/* Independent v3 design. Display type intentionally retained from the accepted font. */
:root { color-scheme: dark; --paper:#eeece4; --muted:#a4a29f; --accent:#d7b0a0; --bg:#171719; --line:#ffffff21; --serif:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif; --sans:"Segoe UI",Tahoma,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--paper); font:14px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.5; }
:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
[hidden] { display:none!important; }
.skip { position:fixed; top:8px; left:8px; transform:translateY(-150%); z-index:50; padding:10px 16px; background:var(--paper); color:var(--bg); }
.skip:focus { transform:none; }
.topbar,main,.footer { --page-gutter:clamp(24px,6.5vw,110px); width:min(1600px,100%); padding-inline:var(--page-gutter); margin-inline:auto; }
.topbar { position:relative; display:flex; align-items:center; gap:25px; min-height:82px; }
.topbar::after { content:""; position:absolute; bottom:0; left:var(--page-gutter); right:var(--page-gutter); border-bottom:1px solid var(--line); pointer-events:none; }
.wordmark { font:26px/1.6 var(--serif); letter-spacing:normal; white-space:nowrap; padding-right:0; }


.topbar-caption { margin-left:-15px; text-align:left; color:#d0ceca; font-size:10px; line-height:1.8; letter-spacing:.045em; }
.topbar-caption b { color:#8f8e8c; font-weight:400; }
.topbar nav { margin-left:auto; display:flex; align-items:center; gap:32px; font-size:12px; }
.topbar nav a { padding-block:12px; color:#aaa9a6; }
.topbar nav a[aria-current],.topbar nav a:hover { color:var(--paper); }
.topbar nav .nav-download { border:1px solid #827269; border-radius:3px; padding:11px 17px; color:#e7cec0; }
.language-switch { display:flex; gap:3px; flex-shrink:0; }
.language-switch button { background:transparent; border:0; padding:8px 5px; color:var(--muted); font-size:12px; }
.language-switch button[aria-pressed="true"] { color:var(--paper); box-shadow:inset 0 -1px var(--accent); }
.download-banner { margin:0 0 24px; }
.download-banner > div { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; }
.download-banner p { margin:8px 0 0; color:var(--muted); font-size:12px; }
@media(max-width:540px) { .topbar { flex-wrap:wrap; padding-block:9px; row-gap:8px; } .topbar nav { order:3; width:100%; justify-content:space-between; } .language-switch { margin-left:auto; } }
.nav-download span { margin-left:22px; }
main { min-height:65vh; outline:none; padding-bottom:70px; }
main:focus-visible { outline:none; }
.landing { min-height:calc(100svh - var(--header-height,82px)); display:flex; flex-direction:column; }
.landing > .intro { flex:1; }
.landing > .collection-tools { flex-shrink:0; display:grid; grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr); gap:20px; border-bottom:1px solid var(--line); }
.collection-tools .edition-tabs { flex-wrap:wrap; }
.collection-right { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:12px; min-width:0; }
.collection-right .search-field { width:180px; max-width:100%; }
.gallery-down { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; background:transparent; color:var(--accent); }
.gallery-down span { display:block; font:26px/1 var(--serif); animation:gallery-nudge 2s ease-in-out infinite; }
.gallery-down:hover { color:var(--paper); }
@keyframes gallery-nudge { 0%,100% { transform:translateY(-3px); } 50% { transform:translateY(3px); } }
@media(prefers-reduced-motion:reduce) { .gallery-down span { animation:none; } }
@media(max-width:540px) { .landing > .collection-tools { grid-template-columns:1fr; gap:12px; } .gallery-down { grid-row:3; justify-self:center; } .collection-right { width:100%; } .collection-right .search-field { width:100%; } }
.gallery-results { padding-top:24px; }
.intro { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:30px; padding:40px 0 34px; }
.overline { display:block; font:10px var(--sans); letter-spacing:.15em; text-transform:uppercase; color:var(--muted); }
.intro h1 { font:400 clamp(66px,7.5vw,112px)/1.04 var(--serif); letter-spacing:-.055em; margin:14px 0 0; }
.intro h1 em { font-weight:400; color:var(--accent); }
.intro h1.site-title { font-size:clamp(38px,4.5vw,70px); line-height:1.16; letter-spacing:-.025em; }
.intro > div { min-width:0; }
.site-title > span,.site-title > em { display:block; }
.site-title > span { font-size:.65em; line-height:1.3; letter-spacing:-.015em; margin-bottom:6px; }
.title-subtitle { color:var(--muted); font:11px/1.7 var(--sans); margin:17px 0 0; letter-spacing:.04em; }
.intro-note { max-width:240px; margin:0 0 9px; color:var(--muted); font:13px/1.85 var(--sans); }
.intro-note strong { color:var(--paper); font-weight:400; }
.intro-copy { min-width:0; }
.intro-copy .download-banner { margin:28px 0 0; }
.intro-aside { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; }
.intro-aside .intro-note { margin:0; text-align:center; }
@media(max-width:540px) { .intro-aside { margin-top:32px; } }
.featured-panel { width:150px; max-width:100%; margin:9px 9px 22px; }
.featured-next { display:flex; justify-content:space-between; gap:12px; width:100%; margin-top:10px; font-size:11px; }
.collection-tools { display:flex; align-items:center; gap:22px; padding:20px 0; border-top:1px solid var(--line); }
.edition-tabs { display:flex; align-items:center; gap:7px; }
.edition-tab { border:0; background:transparent; color:var(--muted); padding:9px 13px; min-height:40px; font-size:12px; border-radius:3px; white-space:nowrap; }
.edition-tab[aria-pressed="true"] { background:var(--paper); color:#252325; }
.edition-tab:hover:not([aria-pressed="true"]) { background:#ffffff09; color:var(--paper); }
.filter-field { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; }
.faction-field { margin-left:auto; }
.filter-field select { min-height:40px; max-width:205px; background:#202022; border:1px solid var(--line); color:#dedbd4; border-radius:3px; padding:8px 30px 8px 12px; font-size:12px; }
.search-field { width:230px; padding:0 0 0 15px; border-left:1px solid var(--line); }
.search-field input { background:transparent; border:0; border-radius:0; width:100%; min-width:0; min-height:40px; color:var(--paper); outline-offset:2px; font-size:12px; }
.search-field input::placeholder { color:#969591; opacity:1; }
.search-icon { width:14px; height:14px; flex-shrink:0; border:1px solid #b3aea9; border-radius:50%; position:relative; margin-right:3px; }
.search-icon::after { content:""; position:absolute; width:5px; height:1px; background:#b3aea9; right:-4px; bottom:-2px; transform:rotate(45deg); }
.collection-caption { display:flex; align-items:center; justify-content:space-between; gap:20px; color:#999995; font-size:11px; margin:0 0 23px; }
.collection-caption strong { color:#e0ddd7; font-weight:400; }
.collection-caption .flip-tip { display:flex; align-items:center; gap:8px; }
.flip-tip span { font-size:18px; color:var(--accent); }
.portrait-group + .portrait-group { margin-top:64px; }
.portrait-group-title { margin:0 0 22px; color:var(--paper); opacity:.8; font:400 clamp(22px,2vw,28px)/1.3 var(--serif); letter-spacing:-.02em; }
.portrait-wall { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,117px),1fr)); gap:28px 32px; padding:9px; }
.portrait { min-width:0; position:relative; width:100%; justify-self:center; }
.portrait-image { position:relative; }
.portrait-image::before { content:""; position:absolute; inset:-9px; border:1px solid var(--line); pointer-events:none; }
.portrait-flip { display:block; width:100%; aspect-ratio:58/64; padding:0; border:0; background:transparent; perspective:1400px; border-radius:0; text-align:left; }
.portrait-turn { display:block; position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .65s cubic-bezier(.2,.65,.2,1); }
.portrait-flip[aria-pressed="true"] .portrait-turn { transform:rotateY(180deg); }
.portrait-side { display:block; position:absolute; inset:0; background-repeat:no-repeat; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:0; overflow:hidden; background-color:#2e2b29; box-shadow:inset 0 0 0 1px #ffffff0d; }
.portrait-side.original { transform:rotateY(180deg); image-rendering:pixelated; }
/* Lift Caitlin's remake slightly; a small overscan keeps the frame filled. */
.portrait[data-hero="castle/Caitlin"] .portrait-side.remake::before { content:""; position:absolute; inset:0; background:inherit; transform:translateY(-1%) scale(1.02); pointer-events:none; }
.portrait-side::after { content:""; position:absolute; inset:65% 0 0; background:linear-gradient(transparent,#08080988); pointer-events:none; }
.side-caption { position:absolute; bottom:12px; left:13px; z-index:1; color:#fff7eb; font:9px var(--sans); letter-spacing:.14em; text-transform:uppercase; opacity:0; transition:opacity .2s; text-shadow:0 1px 3px #000; }
.portrait:hover .side-caption,.portrait:focus-within .side-caption,.original .side-caption { opacity:1; }
.flip-symbol { position:absolute; right:13px; bottom:10px; z-index:1; font:20px var(--serif); color:white; opacity:.75; }
.portrait-select { position:absolute; z-index:2; top:10px; right:10px; display:grid; place-items:center; width:32px; height:32px; padding:0; border:1px solid #ffffff55; border-radius:50%; background:#1717199c; color:#f4eee4; font:20px var(--sans); transition:background .2s; }
.portrait-select[aria-pressed="true"] { background:var(--accent); color:#231d19; border-color:var(--accent); font-size:15px; }
.portrait-select > span { position:relative; display:grid; place-items:center; width:14px; height:14px; line-height:1; }
.portrait-select[aria-pressed="false"] > span { font-size:0; }
.portrait-select[aria-pressed="false"] > span::before,.portrait-select[aria-pressed="false"] > span::after { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:currentColor; border-radius:1px; }
.portrait-select[aria-pressed="false"] > span::before { width:12px; height:1.5px; }
.portrait-select[aria-pressed="false"] > span::after { width:1.5px; height:12px; }
.portrait.selected .portrait-flip { outline:2px solid var(--accent); outline-offset:4px; }
.portrait-info { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:13px; }
.portrait-info h2 { margin:0; opacity:.90; font:300 clamp(15.5px,1.38vw,20.7px)/1.3 var(--serif); letter-spacing:-.025em; overflow-wrap:anywhere; }
.portrait-number { color:#777773; font-size:9px; font-variant-numeric:tabular-nums; }
.portrait-meta { display:flex; align-items:center; gap:7px; color:#aaa7a0; font-size:10px; margin-top:4px; flex-wrap:wrap; }
.portrait-meta .dot { width:3px; height:3px; border-radius:50%; background:#78736d; }
.portrait-meta a:hover { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.empty { padding:65px 25px; text-align:center; border:1px dashed #ffffff25; grid-column:1/-1; }
.empty h2 { font:32px var(--serif); margin:0 0 10px; }
.empty p { color:var(--muted); }
.text-button { color:var(--accent); border:0; border-bottom:1px solid #d7b0a055; background:transparent; padding:8px 0; }
.selection-tray { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:20; width:min(680px,calc(100% - 32px)); background:#eeece4; color:#262325; display:flex; gap:20px; align-items:center; padding:14px 20px; border-radius:6px; box-shadow:0 12px 50px #0006; }
.selection-summary { margin-right:auto; font:17px var(--serif); }
.selection-summary small { display:block; font:10px var(--sans); color:#746d65; margin-top:2px; }
.selection-tray .text-button { color:#5b514a; font-size:11px; border:0; }
.solid-button { display:inline-flex; align-items:center; justify-content:center; gap:22px; background:var(--accent); color:#211c18; border:1px solid var(--accent); border-radius:3px; padding:11px 18px; min-height:43px; font:12px var(--sans); cursor:pointer; }
.solid-button:hover { background:#e8c7b8; }
.selection-tray .solid-button { background:#242326; border-color:#242326; color:var(--paper); }
.reading { max-width:920px; margin:0 auto; padding-top:50px; }
.reading .overline { color:var(--accent); }
.reading h1 { font:400 clamp(42px,6vw,72px)/1.12 var(--serif); letter-spacing:-.045em; margin:18px 0 25px; }
.reading .lead { font:26px/1.6 var(--serif); color:#cbc6bc; max-width:710px; }
.reading h2 { font:30px/1.3 var(--serif); margin:35px 0 12px; }
.reading p,.reading li { color:var(--muted); line-height:1.85; }
.reading strong { color:var(--paper); }
.reading code { color:#e0bcac; font-size:13px; overflow-wrap:anywhere; }
.reading .solid-button { margin-top:15px; }
.install-steps { list-style:none; counter-reset:install; padding:0; }
.install-steps li { counter-increment:install; padding:22px 0 22px 60px; position:relative; border-top:1px solid var(--line); }
.install-steps li::before { content:"0" counter(install); position:absolute; left:0; top:22px; color:var(--accent); font:25px var(--serif); }
.download-list { margin-top:35px; }
.download-row { display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:25px; align-items:center; padding:20px 0; border-top:1px solid var(--line); }
.download-portrait { width:58px; aspect-ratio:58/64; background-repeat:no-repeat; border-radius:0; }
.download-row h2 { margin:0 0 4px; font:26px var(--serif); }
.download-row p { margin:0; font-size:12px; }
.download-row .solid-button { margin:0; }
.plan-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:36px; }
.plan-item { border-top:1px solid var(--line); padding-top:18px; }
.plan-item h2 { margin:10px 0; }
.plan-status { color:var(--accent); font:10px var(--sans); letter-spacing:.1em; text-transform:uppercase; }
.footer { border-top:1px solid var(--line); display:grid; grid-template-columns:1fr auto; gap:20px; padding-block:30px 38px; }
.footer>div>a { font:24px var(--serif); }
.footer i { color:var(--accent); }
.footer p { color:#8f8e88; font-size:11px; }
.footer nav { display:flex; gap:25px; font-size:11px; align-items:center; }
.footer .legal { grid-column:1/-1; font-size:10px; margin:0; line-height:1.8; }
@media(max-width:1100px) { .collection-tools { flex-wrap:wrap; gap:12px; } .edition-tabs { flex:1; } .search-field { width:100%; padding:0; border-left:0; border-top:1px solid var(--line); } .filter-field select { max-width:190px; } }
@media(max-width:760px) { .topbar { min-height:69px; gap:15px; } .topbar-caption { display:none; } .topbar nav { gap:23px; } .intro { padding-top:29px; gap:15px; } .intro h1 { font-size:74px; } .intro-note { font-size:11px; max-width:190px; } .edition-tab { font-size:11px; padding-inline:10px; } .filter-field>span:not(.search-icon) { display:none; } .collection-caption { font-size:10px; } }
@media(max-width:540px) { .topbar { min-height:66px; row-gap:8px; } .wordmark { font-size:26px; } .topbar nav { gap:18px; font-size:11px; } .topbar nav .nav-download { padding:9px 12px; } .nav-download span { margin-left:7px; } .intro { display:block; padding:25px 0; } .intro .overline { font-size:8px; letter-spacing:.12em; } .intro h1 { font-size:68px; margin-top:14px; } .intro-note { max-width:300px; margin:18px 0 0; font-size:12px; line-height:1.7; } .edition-tabs { width:100%; flex:auto; gap:2px; } .edition-tab { flex:1; font-size:11px; padding-inline:8px; } .faction-field { margin-left:0; width:100%; } .filter-field select { width:100%; max-width:none; min-height:42px; } .search-field { border:1px solid var(--line); padding-inline:13px; border-radius:3px; } .collection-tools { padding-block:15px; } .collection-caption { margin:0 0 21px; align-items:flex-start; gap:15px; font-size:10px; } .flip-tip { text-align:right; max-width:160px; } .portrait-info { margin-top:10px; } .portrait-info h2 { font-size:17.3px; } .portrait-number { display:none; } .portrait-meta { font-size:9px; } .portrait-select { width:30px; height:30px; top:8px; right:8px; } .portrait .side-caption { opacity:1; font-size:7px; bottom:10px; left:9px; } .flip-symbol { font-size:17px; right:9px; bottom:7px; } .selection-tray { flex-wrap:wrap; gap:10px; bottom:12px; padding:12px 15px; } .selection-tray .solid-button { width:100%; } .download-row { gap:14px; grid-template-columns:45px minmax(0,1fr); } .download-portrait { width:45px; } .download-row .solid-button { grid-column:2; justify-self:start; } .download-row h2 { font-size:25px; } .plan-grid { grid-template-columns:1fr; gap:15px; } .footer { display:block; padding-bottom:35px; } .footer nav { padding:15px 0 24px; gap:24px; } .reading { padding-top:28px; } }
@media(max-width:540px) { .intro h1 { font-size:clamp(43px,12.4vw,65px); } .intro-note { margin-top:14px; font-size:11px; } body.has-selection .footer { padding-bottom:150px; } }
@media(max-width:360px) { .topbar nav { gap:12px; font-size:10px; } .topbar nav .nav-download { padding-inline:9px; } .nav-download span { margin-left:3px; } .topbar { gap:10px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .portrait-turn,.side-caption,.portrait-select { transition:none; } }