:root{--bg:#000000;--paper:#fcf6e5;--ivory:#fcf6e5;--muted:#bdb9ae;--line:#33312d;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--bg);color:var(--paper);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ivory);outline-offset:3px}.wrap{width:min(1440px,90%);margin:auto}.nav,footer>.wrap,.section-head,.pager,.actions,figcaption,.modal-steps{display:flex;align-items:center}.nav{height:83px;gap:35px}.brand{display:block;width:117px}.nav nav{margin-left:auto;display:flex;gap:31px}.nav a,.actions a,.text-link,footer a{font-size:14px;font-weight:600}.nav nav a{color:#cbc9c0}.nav a:hover,.text-link:hover,footer a:hover{color:var(--ivory)}.nav-action{border:1px solid #55524f;padding:11px 17px;display:flex;align-items:center;gap:14px}.external span,.text-link span{font-size:18px}header{border-bottom:1px solid var(--line)}.hero{background:radial-gradient(ellipse at 60% 50%,#0a0a0a,transparent 63%)}.hero-grid{display:grid;grid-template-columns:.94fr 1.06fr;gap:4.5%;align-items:center;padding-top:clamp(50px,5vw,86px);padding-bottom:clamp(46px,4.5vw,78px)}.eyebrow,figcaption,small,.modal-steps span,footer span{font:600 10px/1.4 'Courier New',monospace;letter-spacing:1.5px}.eyebrow{display:flex;align-items:center;gap:10px;color:#d5cfc2}.eyebrow i{width:22px;height:6px;background:repeating-linear-gradient(115deg,var(--ivory) 0 3px,transparent 3px 6px)}h1,h2,p,figure{margin:0}h1{font-family:'Arial Black',Arial,Helvetica,sans-serif;font-weight:950;font-size:clamp(55px,6.5vw,108px);letter-spacing:-.058em;line-height:.93;margin:28px 0 23px}h1 em{color:var(--ivory);font-style:italic;display:inline-block;padding-right:.06em}h1 em span{color:var(--ivory)}.intro p,.modal-copy p,.accordion p{color:var(--muted);line-height:1.6;font-size:16px}.intro p{max-width:405px}.actions{gap:25px;margin-top:32px}.primary{display:inline-flex;align-items:center;gap:20px;background:var(--ivory);color:#000000;padding:14px 20px}.primary:hover{background:#fffaf0}.primary span{font-size:20px}.text-link{display:inline-flex;align-items:center;gap:8px}.main-art{min-width:0}.art-box{position:relative;padding:6px;border:1px solid #494743;background:#090909}.art-box img{display:block;width:100%;aspect-ratio:1.52;object-fit:cover}.art-box b{width:13px;height:13px;position:absolute;border:solid var(--ivory)}.art-box .tl{left:-1px;top:-1px;border-width:2px 0 0 2px}.art-box .tr{right:-1px;top:-1px;border-width:2px 2px 0 0}.art-box .bl{left:-1px;bottom:-1px;border-width:0 0 2px 2px}.art-box .br{right:-1px;bottom:-1px;border-width:0 2px 2px 0}figcaption{justify-content:space-between;margin-top:11px;color:#9e9f94;font-size:9px;letter-spacing:1px}.cross{font-style:normal;font-size:14px;color:var(--ivory);margin-right:6px}.band{background:#101010;border-block:1px solid var(--line)}.stats{display:grid;grid-template-columns:1fr 1fr 1.1fr;padding-block:21px}.stats div{padding-left:13%;border-left:1px solid var(--line)}.stats div:first-child{border:0;padding-left:0}small{display:block;color:#a8a99c;font-size:9px;letter-spacing:1.3px;margin-bottom:6px}.stats strong{font-size:clamp(20px,2vw,33px);font-weight:650;letter-spacing:-.045em}.stats sup{vertical-align:baseline;font:600 13px Arial;color:#c6c7b8;letter-spacing:0}.archive{padding-block:62px}.section-head{justify-content:space-between;margin:12px 0 25px;gap:20px}h2{font-size:clamp(36px,4vw,65px);letter-spacing:-.067em;line-height:1.04}h2 span{color:var(--ivory)}.pager,.modal-steps{gap:8px}.pager button,.modal-steps button,#close{background:transparent;border:1px solid #595a50;border-radius:50%;width:38px;height:38px;font-size:19px;display:grid;place-items:center}.pager button:disabled{opacity:.35;cursor:default}.pager button:hover:not(:disabled),.modal-steps button:hover,#close:hover{background:var(--ivory);color:#111}.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#5d6053 transparent;padding:4px 2px 12px}.card{flex:0 0 calc((100% - 48px)/4);background:transparent;border:0;text-align:left;padding:0;scroll-snap-align:start}.portrait{position:relative;overflow:hidden;border:1px solid #3e4036}.portrait img{display:block;width:100%;aspect-ratio:1.07;object-fit:cover;transition:transform .35s}.card:hover img{transform:scale(1.045)}.expand{position:absolute;bottom:10px;right:10px;background:#000c;display:grid;place-items:center;width:28px;height:28px;font-size:18px;color:var(--paper)}.card-title{display:block;font-size:21px;font-weight:650;letter-spacing:-.045em;padding-top:13px}.info{padding-block:62px 80px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.12fr;gap:8%}.info h2{margin-top:15px}.accordion details{border-bottom:1px solid var(--line);padding:19px 0}.accordion details:first-child{padding-top:0}summary{font-size:18px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}summary::-webkit-details-marker{display:none}summary:after{content:'+';color:var(--ivory)}details[open] summary:after{content:'−'}.accordion p{font-size:15px;margin-top:12px}.accordion a{margin-top:10px;color:var(--ivory)}footer{border-top:1px solid var(--line)}footer>.wrap{gap:24px;min-height:84px}footer .brand{width:80px}footer span{color:var(--muted);font-size:9px}footer a{margin-left:auto}.locked{overflow:hidden}dialog{width:min(740px,92vw);border:1px solid #626457;background:var(--bg);padding:0;color:var(--paper);max-height:90dvh}dialog::backdrop{background:#070805cf;backdrop-filter:blur(7px)}.modal{display:grid;grid-template-columns:1fr .95fr}.modal img{width:100%;height:100%;object-fit:cover}.modal-copy{padding:62px 24px 25px;position:relative}.modal-copy h2{font-size:38px;margin:18px 0}.modal-copy p{font-size:15px}.modal-steps{margin-top:26px;justify-content:space-between}#close{position:absolute;right:12px;top:12px;width:32px;height:32px}.skip{position:fixed;top:-100px;background:var(--ivory);color:#111;z-index:8;padding:10px}.skip:focus{top:4px}
@media(max-width:850px){.card{flex-basis:calc((100% - 32px)/3)}.hero-grid{gap:4%}.actions{gap:16px}.primary{gap:10px;padding:13px}.intro p{font-size:15px}.nav{height:70px}.brand{width:96px}}
@media(max-width:680px){.wrap{width:90%}.nav{height:64px;gap:12px;justify-content:space-between}.nav nav{display:none}.nav-action{font-size:12px!important;padding:8px 12px}.hero-grid{grid-template-columns:1fr;gap:32px;padding-block:39px 28px}h1{font-size:clamp(62px,12.7vw,86px);margin:22px 0 15px}.actions{margin-top:21px;gap:22px}.primary{padding:13px 17px}.intro p{max-width:390px}.stats{grid-template-columns:.85fr .82fr 1.4fr;padding-block:16px}.stats div{padding-left:12%}.stats strong{font-size:18px}.stats small{font-size:8px;letter-spacing:.6px}.stats sup{font-size:10px}.archive{padding-block:40px}.card{flex-basis:72%}.section-head{margin:11px 0 20px;gap:8px}.pager button{width:32px;height:32px}.info{grid-template-columns:1fr;gap:28px;padding-block:39px 52px}.card-title{font-size:19px}.modal{display:block}.modal img{height:28dvh;object-fit:contain;background:#080907}.modal-copy{padding:20px}.modal-copy h2{margin:14px 0}.modal-steps{margin-top:16px}footer>.wrap{gap:12px}footer span{font-size:8px;letter-spacing:.7px}footer a{font-size:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.hero{background:#000}.hero-grid{grid-template-columns:0.94fr 1.06fr}.intro h1{margin:25px 0 24px}.hero-mark{display:block;width:min(96%,560px);height:auto}.intro p{max-width:430px}.intro p strong{color:var(--paper);font-weight:650}.economics{background:var(--ivory);color:#070707}.economics-grid{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center;padding-block:60px}.economics h2{margin:16px 0}.economics .eyebrow{color:#49463e}.economics .eyebrow i{background:repeating-linear-gradient(115deg,#111 0 3px,transparent 3px 6px)}.economics p{max-width:390px;font-size:16px;color:#49463e;line-height:1.6}.royalties h3{font-size:21px;letter-spacing:-.04em;margin:0 0 20px}.split{display:flex;height:12px;gap:3px}.split b{flex:4;background:#080808}.split i{flex:1;background:repeating-linear-gradient(120deg,#6a655b 0 2px,transparent 2px 5px);border:1px solid #918a7b}.royalties dl{margin:15px 0 0}.royalties dl div{display:flex;align-items:baseline;justify-content:space-between;padding:9px 0;border-bottom:1px solid #c7c0b1}.royalties dd{font-size:21px;font-weight:700;margin:0}.info{border:0}
@media(max-width:680px){.hero-grid,.economics-grid{grid-template-columns:1fr}.hero-mark{width:min(94%,420px)}.economics-grid{gap:28px;padding-block:40px}.stats div{padding-left:8%}.stats strong{font-size:clamp(16px,4.1vw,23px)}}

/* Character catalogue */
.archive { padding-block: clamp(42px, 5.4vw, 82px); }
.archive-heading, .entry-folio, .entry-controls, .turn-pages { display:flex; align-items:center; justify-content:space-between; }
.archive-heading { gap:16px; margin-bottom:24px; }
.archive-count { color:#b7b2a8; font:12px/1.4 monospace; }
.archive-spread { display:grid; grid-template-columns:1fr 1fr; background:#f6f0e3; color:#191813; }
.archive-plate { position:relative; display:grid; place-items:center; border:0; padding:clamp(15px,2.2vw,36px); background:#141412; cursor:zoom-in; }
.archive-plate img { display:block; width:min(100%,440px); aspect-ratio:1; object-fit:contain; box-shadow:0 9px 28px #0008; }
.zoom-mark { position:absolute; right:12px; bottom:12px; width:34px; height:34px; display:grid; place-items:center; font:22px/1 Arial; color:#fff8e9; background:#171713; border:1px solid #746f62; }
.archive-entry { display:flex; flex-direction:column; padding:clamp(23px,3.2vw,54px); }
.entry-folio { border-bottom:1px solid #bcb6a9; padding-bottom:13px; font:600 10px/1.5 monospace; letter-spacing:.12em; }
.entry-copy { margin-block:auto; padding-block:22px; }
.entry-copy h3 { font:400 clamp(40px,4.6vw,75px)/1.02 Georgia,'Times New Roman',serif; letter-spacing:-.065em; margin:0 0 15px; }
.entry-copy p { max-width:45ch; color:#504c44; font-size:clamp(15px,1.15vw,18px); line-height:1.6; }
.entry-traits { border-top:1px solid #c8c2b6; margin:20px 0 0; }
.entry-traits>div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #c8c2b6; }
.entry-traits dt { font:11px/1.4 monospace; color:#5a554e; }
.entry-traits dd { margin:0; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
.swatches { display:flex; }
.swatches i { width:12px; height:12px; border:1px solid #fffa; border-radius:50%; margin-left:-2px; }
.entry-controls { gap:12px; }
.entry-controls button { background:transparent; border:0; color:#171611; }
#open-portrait { border-bottom:1px solid currentColor; padding:7px 0; font:600 13px/1.3 Arial; }
.turn-pages { gap:6px; }
.turn-pages button { width:38px; height:38px; border:1px solid #aea89c; border-radius:50%; font-size:18px; }
.turn-pages button:hover { background:#1b1a17; color:var(--paper); }
.archive-entry button:focus-visible { outline-color:#2c2922; }
.portrait-index { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:12px; }
.portrait-index button { display:flex; align-items:center; gap:10px; position:relative; border:1px solid #3f3d37; padding:7px; text-align:left; background:#11110f; color:#bdb8ad; font:600 clamp(11px,1.1vw,15px)/1.3 Arial; }
.portrait-index button[aria-pressed=true] { border-color:var(--ivory); color:var(--paper); background:#292721; }
.portrait-index button:hover { color:var(--paper); border-color:#b3aea3; }
.portrait-index img { width:clamp(34px,3.7vw,54px); aspect-ratio:1; object-fit:cover; }
@media(max-width:720px) {
 .archive-heading { align-items:end; margin-bottom:17px; }
 .archive-count { max-width:70px; text-align:right; font-size:10px; }
 .archive-spread { grid-template-columns:1fr; }
 .archive-plate { padding:14px; }
 .archive-plate img { width:min(100%,340px); max-height:45svh; }
 .archive-entry { padding:20px; }
 .entry-copy { padding-block:16px; }
 .entry-copy h3 { margin-bottom:9px; }
 .entry-traits { margin-top:13px; }
 .portrait-index { gap:5px; }
 .portrait-index button { padding:3px; flex-direction:column; align-items:stretch; text-align:center; gap:6px; }
 .portrait-index img { width:100%; }
 .portrait-index span { margin-bottom:4px; font-size:10px; }
}