@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/roboto-slab-700.woff2') format('woff2')}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/roboto-slab-800.woff2') format('woff2')}
/* ============================================================
   IRONFISTS — The Scroll of Jungle Village
   Unofficial fan site · self-contained · no external calls
   Fonts are system stacks now; a woodblock-slab display face
   (e.g. Rockwell-black / woodtype) is vendored locally at finalize.
   ============================================================ */

:root{
  --paper:#0a0705;
  --paper-2:#120d09;
  --paper-3:#181009;
  --ink:#f3ead4;
  --ink-soft:#cabf9f;
  --ink-mute:#8a7d5e;
  --ink-faint:#645844;
  --iron:#9a9aa0;
  --steel:#c3c6cd;
  --blood:#c11520;
  --blood-bright:#e2231d;
  --gold:#e2b74c;
  --gold-deep:#c2922c;
  --rule:#2a2016;
  --rule-2:#38291a;
  --bar:#000;
  --barH:38px;
  --wrap:1320px;
  --measure:70ch;
  --disp:"Rockwell","Rockwell Nova","Roboto Slab","Bookman Old Style",Georgia,serif;
  --body:"Avenir Next","Avenir","Segoe UI",ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;
  --read:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --info-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:19px;line-height:1.62;
  padding:var(--barH) 0;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-deep)}
h1,h2,h3,h4{margin:0;line-height:.98;font-family:var(--disp);font-weight:900;letter-spacing:-.01em}
p{margin:0 0 1em}
::selection{background:var(--blood);color:var(--ink)}

/* editorial serif reading prose — distinct from the grotesque UI/labels */
.lead,.tagline,.scene-lead,.cc-sub,.clan-desc,.post-standfirst,.band-head p,.page-body p,.page-body .lead,
.article-body p,.article-body li,.blockquote p,.callout p,.note,.card-dek,.profile-card p,.dossier-body .d-role,
.cut-card p,.services .svc-note,.sponsor-blurb,.supporters .s-sub,.timeline .t-what,.trivia-item p,.footer-brand p,
.map-figure figcaption,.article-figure figcaption,.chart figcaption,.cat-list .cl-dek,.footer-col a,.footer-legal,.footer-legal .disclaimer{font-family:var(--read)}

/* ---- global film grain ---- */
.grain{
  position:fixed;inset:0;background-image:var(--grain);
  background-size:140px 140px;opacity:.055;mix-blend-mode:overlay;
  pointer-events:none;z-index:60;animation:grainShift .55s steps(2) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}
  50%{transform:translate(2%,-1%)}75%{transform:translate(-1%,2%)}100%{transform:translate(0,0)}
}
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---- permanent letterbox bars w/ sprocket ticks ---- */
.letterbox{position:fixed;left:0;right:0;height:var(--barH);background:var(--bar);z-index:70;pointer-events:none;display:flex;align-items:center;overflow:hidden}
.letterbox.top{top:0;border-bottom:1px solid #000}
.letterbox.bottom{bottom:0}
.sprockets{display:flex;gap:20px;padding:0 24px;white-space:nowrap;color:#161009;flex:1 1 auto;min-width:0;overflow:hidden}
.sprockets span{width:26px;height:14px;background:#171009;border-radius:2px;flex:none}
.letterbox.bottom .status{flex:none;padding-right:22px;white-space:nowrap;color:#3a2c17;font:600 11px/1 var(--body);letter-spacing:.32em;text-transform:uppercase;pointer-events:none}
@media (max-width:640px){.letterbox.bottom .status{display:none}}

/* ============================================================
   SITE HEADER / NAV
   ============================================================ */
.masthead{position:fixed;top:var(--barH);left:0;right:0;z-index:55;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(18px,4vw,48px);
  background:linear-gradient(180deg,rgba(10,7,5,.92),rgba(10,7,5,0));
  transition:background .3s,padding .3s}
.masthead.solid{background:rgba(9,6,4,.96);border-bottom:1px solid var(--rule);padding-top:11px;padding-bottom:11px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand .mark{width:30px;height:30px;flex:none;color:var(--blood-bright)}
.brand .word{font-family:var(--disp);font-weight:900;font-size:23px;letter-spacing:.02em;text-transform:uppercase}
.brand .word b{color:var(--gold)}
.nav{display:flex;align-items:center;gap:26px}
.nav a{color:var(--ink-soft);font:600 12px/1 var(--body);letter-spacing:.22em;text-transform:uppercase}
.nav a:hover{color:var(--gold)}
.nav a.cta{color:var(--paper);background:var(--gold);padding:9px 15px;letter-spacing:.14em}
.nav a.cta:hover{background:var(--ink)}
.navtoggle{display:none;background:none;border:1px solid var(--rule-2);color:var(--ink);width:44px;height:40px;cursor:pointer;padding:0}
.navtoggle svg{width:22px;height:22px;margin:0 auto}

/* ============================================================
   HERO / TITLE CARD
   ============================================================ */
.hero{position:relative;min-height:calc(100vh - var(--barH)*2);display:flex;align-items:flex-end;overflow:hidden}
.hero-media{position:absolute;inset:-8% 0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media .duotone{position:absolute;inset:0;background:
  radial-gradient(75% 62% at 50% 86%,rgba(226,110,30,.5),rgba(150,26,14,.28) 42%,transparent 72%),
  radial-gradient(50% 46% at 24% 22%,rgba(180,184,196,.12),transparent),
  linear-gradient(180deg,rgba(10,7,5,.55),rgba(10,7,5,.25) 40%,rgba(10,7,5,.9));}
.hero-inner{position:relative;z-index:3;width:100%;max-width:var(--wrap);margin:0 auto;
  padding:clamp(96px,15vh,150px) clamp(18px,4vw,48px) clamp(40px,7vh,88px);display:grid;
  grid-template-columns:1fr auto;gap:40px;align-items:end}
.kicker{display:inline-flex;align-items:center;gap:12px;color:var(--ink-soft);
  font:600 13px/1 var(--body);letter-spacing:.34em;text-transform:uppercase;margin-bottom:26px}
.kicker .bar{width:44px;height:2px;background:var(--blood)}
.hero h1{font-size:clamp(52px,10.5vw,168px);text-transform:uppercase;
  text-shadow:0 8px 40px rgba(0,0,0,.75);line-height:.92;padding-top:.06em}
.hero h1 .l2{color:var(--gold)}
.hero h1 .l3{color:var(--blood-bright)}
.tagline{margin:26px 0 0;font-style:italic;color:var(--ink-soft);font-size:clamp(17px,2vw,23px);max-width:34ch}
.credit-line{margin-top:18px;color:var(--ink-mute);font:600 12px/1.6 var(--body);letter-spacing:.16em;text-transform:uppercase;max-width:44ch}
.chapter-index{align-self:end;display:flex;flex-direction:column;gap:11px;text-align:right;border-right:2px solid var(--rule-2);padding-right:20px}
.chapter-index a{color:var(--ink-mute);font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;transition:color .2s,transform .2s}
.chapter-index a:hover{color:var(--gold);transform:translateX(-4px)}
.chapter-index a .rn{color:var(--blood);margin-right:8px}
.scroll-cue{position:absolute;left:clamp(18px,4vw,48px);bottom:16px;z-index:3;
  display:flex;align-items:center;gap:10px;color:var(--gold);
  font:600 11px/1 var(--body);letter-spacing:.28em;text-transform:uppercase;animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(5px)}}
.asset-tag{position:absolute;right:clamp(18px,4vw,48px);bottom:16px;z-index:3;color:#6b5e48;font:600 10px/1 var(--body);letter-spacing:.2em;text-transform:uppercase}

/* ============================================================
   CHAPTERS — card + scene
   ============================================================ */
.chapter{position:relative}
.chapter-card{position:relative;min-height:78vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;isolation:isolate}
.chapter-card .cc-media{position:absolute;inset:-6% 0;z-index:0}
.chapter-card .cc-media img{width:100%;height:100%;object-fit:cover}
.chapter-card .cc-media .tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,7,5,.72),rgba(10,7,5,.5) 45%,rgba(10,7,5,.86))}
.cc-inner{position:relative;z-index:2;padding:40px 22px;max-width:1100px}
.cc-rn{font-family:var(--disp);font-weight:900;font-size:clamp(28px,4vw,54px);color:var(--blood-bright);letter-spacing:.06em;
  text-transform:uppercase;display:inline-block;margin-bottom:14px}
.cc-rn::before,.cc-rn::after{content:"";display:inline-block;width:clamp(28px,6vw,80px);height:2px;background:var(--rule-2);vertical-align:middle;margin:0 18px}
.cc-title{font-size:clamp(46px,9vw,140px);text-transform:uppercase;color:var(--ink);line-height:.82;text-shadow:0 6px 34px rgba(0,0,0,.7)}
.cc-title em{font-style:normal;color:var(--gold)}
.cc-sub{margin:22px auto 0;max-width:56ch;color:var(--ink-soft);font-size:clamp(16px,2vw,21px)}
.cc-asset{position:absolute;right:16px;bottom:12px;z-index:2;color:#6b5e48;font:600 10px/1 var(--body);letter-spacing:.2em;text-transform:uppercase}

.scene{max-width:var(--wrap);margin:0 auto;padding:clamp(48px,9vh,110px) clamp(18px,4vw,48px)}
.scene-head{max-width:74ch}
.scene-eyebrow{color:var(--blood);font:700 13px/1 var(--body);letter-spacing:.28em;text-transform:uppercase;margin-bottom:16px}
.scene-lead{font-size:clamp(20px,2.5vw,30px);line-height:1.4;color:var(--ink);font-family:var(--body);font-weight:400}
.scene-lead b{color:var(--gold);font-weight:700}

/* reveal-on-scroll — progressive enhancement: content is visible by default,
   only hidden once JS marks the document (.js), so no-JS/crawlers see everything. */
.js .reveal{opacity:0;transform:translateY(38px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .kb img{will-change:transform;transition:transform 6s ease-out}
.js .kb.in img{transform:scale(1.09)}

/* ============================================================
   CAST — dossier lineup + explorer (Chapter I)
   ============================================================ */
.clan-block{margin-top:clamp(40px,6vh,72px)}
.clan-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:26px}
.clan-head h3{font-size:clamp(26px,3.4vw,44px);text-transform:uppercase;color:var(--ink)}
.clan-head .clan-tag{color:var(--blood);font:700 12px/1 var(--body);letter-spacing:.24em;text-transform:uppercase}
.clan-head .clan-desc{color:var(--ink-mute);font-size:15px;max-width:46ch;margin-left:auto}
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.dossier-card{position:relative;border:1px solid var(--rule-2);background:var(--paper-2);cursor:pointer;
  text-align:left;padding:0;color:inherit;font:inherit;overflow:hidden;display:flex;flex-direction:column}
.dossier-card .portrait{position:relative;aspect-ratio:3/4;overflow:hidden;background:
  radial-gradient(70% 60% at 50% 40%,rgba(180,184,196,.14),#0c0806)}
.dossier-card .portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05);transition:transform .8s ease,filter .5s}
.dossier-card:hover .portrait img{transform:scale(1.06);filter:none}
.dossier-card .portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(9,6,4,.9))}
.dossier-card .plate{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 15px}
.dossier-card .actor{display:block;color:var(--gold);font:700 12px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase}
.dossier-card .char{display:block;font-family:var(--disp);font-weight:900;font-size:20px;color:var(--ink);text-transform:uppercase;margin-top:6px;line-height:1}
.dossier-card .open{position:absolute;top:12px;right:12px;z-index:2;width:30px;height:30px;border:1px solid var(--gold);color:var(--gold);
  display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.8);transition:.25s}
.dossier-card:hover .open{opacity:1;transform:none}
.dossier-card .open svg{width:15px;height:15px}

/* dossier takeover */
.dossier{position:fixed;inset:0;z-index:120;display:none;background:rgba(6,4,3,.9)}
.dossier.open{display:block}
.dossier-inner{position:absolute;inset:var(--barH) 0;display:grid;grid-template-columns:1fr 1fr}
.dossier-photo{position:relative;overflow:hidden;background:#0c0806}
.dossier-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.dossier-photo img.show{opacity:1}
.dossier-photo .grainy{position:absolute;inset:0;background-image:var(--grain);background-size:140px;opacity:.1;mix-blend-mode:overlay;pointer-events:none}
.dossier-photo .swap{position:absolute;left:20px;bottom:20px;z-index:3;display:flex;border:1px solid var(--rule-2);background:rgba(9,6,4,.7);backdrop-filter:blur(3px)}
.dossier-photo .swap button{background:none;border:none;color:var(--ink-mute);font:700 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;padding:11px 16px;cursor:pointer}
.dossier-photo .swap button.on{background:var(--gold);color:var(--paper)}
.dossier-body{position:relative;padding:clamp(28px,5vw,68px);display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,var(--paper-2),var(--paper));overflow:auto}
.dossier-body .d-clan{color:var(--blood);font:700 13px/1 var(--body);letter-spacing:.26em;text-transform:uppercase;margin-bottom:18px}
.dossier-body .d-char{font-size:clamp(38px,6vw,84px);text-transform:uppercase;color:var(--ink);line-height:.84}
.dossier-body .d-actor{margin:18px 0 24px;color:var(--gold);font:700 15px/1 var(--body);letter-spacing:.18em;text-transform:uppercase}
.dossier-body .d-role{font-size:clamp(18px,2.2vw,24px);line-height:1.45;color:var(--ink-soft);max-width:46ch}
.dossier-body .d-nav{margin-top:36px;display:flex;gap:12px;align-items:center}
.dossier-body .d-nav button{background:none;border:1px solid var(--rule-2);color:var(--ink);width:48px;height:48px;cursor:pointer;font-size:18px;transition:.2s}
.dossier-body .d-nav button:hover{border-color:var(--gold);color:var(--gold)}
.dossier-body .d-count{color:var(--ink-mute);font:600 12px/1 var(--body);letter-spacing:.16em;margin-left:8px}
.dossier-close{position:absolute;top:16px;right:18px;z-index:5;background:none;border:none;color:var(--ink);width:46px;height:46px;cursor:pointer}
.dossier-close svg{width:26px;height:26px}
.dossier-asset{position:absolute;right:14px;bottom:12px;z-index:3;color:#6b5e48;font:600 10px/1 var(--body);letter-spacing:.2em;text-transform:uppercase}

/* ============================================================
   ARSENAL — weapon rows
   ============================================================ */
.arsenal-row{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;border-top:1px solid var(--rule)}
.arsenal-row:last-child{border-bottom:1px solid var(--rule)}
.arsenal-row.flip{direction:rtl}
.arsenal-row.flip>*{direction:ltr}
.arsenal-fig{position:relative;overflow:hidden;min-height:340px;background:radial-gradient(60% 50% at 50% 60%,rgba(226,110,30,.3),#0c0806)}
.arsenal-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.arsenal-fig .fig-asset{position:absolute;left:14px;bottom:12px;z-index:2;color:#6b5e48;font:600 10px/1 var(--body);letter-spacing:.18em;text-transform:uppercase}
.arsenal-txt{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center}
.arsenal-txt .idx{color:var(--blood);font-family:var(--disp);font-weight:900;font-size:40px}
.arsenal-txt h4{font-size:clamp(28px,3.4vw,46px);text-transform:uppercase;margin:8px 0 16px;color:var(--ink)}
.arsenal-txt p{color:var(--ink-soft);font-size:17px;max-width:52ch}

/* ============================================================
   RECEPTION — score badges + bars
   ============================================================ */
.scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:8px}
.score-badge{border:1px solid var(--rule-2);background:var(--paper-2);padding:26px 22px;text-align:center;position:relative}
.score-badge .logo-slot{height:44px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.score-badge .logo-slot img{max-height:44px;width:auto;opacity:.92}
.score-badge .s-num{font-family:var(--disp);font-weight:900;font-size:54px;color:var(--gold);line-height:1}
.score-badge .s-of{color:var(--ink-mute);font-size:15px;margin-top:4px}
.score-badge .s-src{color:var(--ink-mute);font:600 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;margin-top:10px}
.verdict{margin-top:14px;color:var(--ink-mute);font-size:13px;font-style:italic}

/* ============================================================
   WATCH & BUY
   ============================================================ */
.watch-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:start}
.cut-card{border:1px solid var(--rule-2);background:var(--paper-2);padding:26px 26px 28px;margin-bottom:16px}
.cut-card h4{font-size:26px;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.cut-card .cut-tag{color:var(--blood);font:700 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px;display:block}
.cut-card p{color:var(--ink-soft);font-size:16px;margin:0}
.services{border:1px solid var(--rule-2);background:var(--paper-2);padding:24px}
.services h4{font-size:20px;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.services .svc-note{color:var(--ink-mute);font-size:13px;margin-bottom:18px}
.svc-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.svc-slot{border:1px solid var(--rule);height:56px;display:flex;align-items:center;justify-content:center;background:#0c0806}
.svc-slot img{max-height:30px;width:auto;opacity:.9}
.trailer-btn{display:inline-flex;align-items:center;gap:12px;margin-top:20px;background:var(--blood);color:var(--ink);
  padding:15px 24px;font:700 13px/1 var(--body);letter-spacing:.18em;text-transform:uppercase}
.trailer-btn:hover{background:var(--blood-bright);color:var(--ink)}
.trailer-btn svg{width:18px;height:18px}

/* ============================================================
   TRIVIA
   ============================================================ */
.trivia-grid{columns:2;column-gap:22px}
.trivia-item{break-inside:avoid;border-left:2px solid var(--blood);padding:4px 0 4px 20px;margin-bottom:22px}
.trivia-item .t-n{color:var(--gold);font-family:var(--disp);font-weight:900;font-size:22px;display:block;margin-bottom:6px}
.trivia-item p{color:var(--ink-soft);font-size:16px;margin:0}
.trivia-item b{color:var(--ink)}

/* ============================================================
   SUPPORTERS band
   ============================================================ */
.supporters{background:linear-gradient(180deg,#0d0a07,#070504);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:clamp(48px,8vh,96px) clamp(18px,4vw,48px)}
.supporters-inner{max-width:var(--wrap);margin:0 auto}
.supporters .s-eyebrow{color:var(--blood);font:700 13px/1 var(--body);letter-spacing:.28em;text-transform:uppercase;margin-bottom:14px}
.supporters h3{font-size:clamp(30px,4.5vw,60px);text-transform:uppercase;color:var(--ink);max-width:20ch}
.supporters .s-sub{color:var(--ink-soft);font-size:17px;max-width:60ch;margin:18px 0 40px;font-style:italic}
.sponsor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule);border-bottom:0}
.sponsor{position:relative;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);
  padding:26px 24px;display:flex;flex-direction:column;gap:12px;background:#0a0705;min-height:150px;transition:background .25s}
.sponsor:nth-child(3n){border-right:0}
.sponsor:hover{background:#120d09}
.sponsor img{height:34px;width:auto;max-width:170px;object-fit:contain;opacity:1}
.sponsor:hover img{opacity:1}
.sponsor-blurb{color:var(--ink-mute);font-size:14px;line-height:1.45;margin-top:auto}
.sponsor .s-num{position:absolute;top:12px;right:14px;color:var(--ink-faint);font:700 11px/1 var(--body);letter-spacing:.12em}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:#070504;padding:clamp(44px,7vh,80px) clamp(18px,4vw,48px) 40px}
.footer-inner{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.footer-brand .word{font-family:var(--disp);font-weight:900;font-size:26px;text-transform:uppercase;color:var(--ink)}
.footer-brand .word b{color:var(--gold)}
.footer-brand p{margin-top:14px;color:var(--ink-mute);font-size:15px;max-width:40ch}
.footer-col h5{font:700 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.footer-col a{color:var(--ink-soft);font-size:15px}
.footer-col a:hover{color:var(--gold)}
.footer-legal{max-width:var(--wrap);margin:44px auto 0;padding-top:24px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--ink-faint);font-size:13px}
.footer-legal .disclaimer{max-width:70ch;color:var(--ink-mute)}
.footer-legal a{color:var(--ink-mute)}

/* ============================================================
   ARTICLE / POST TEMPLATE
   ============================================================ */
.post-hero{position:relative;min-height:66vh;display:flex;align-items:flex-end;overflow:hidden}
.post-hero .ph-media{position:absolute;inset:-6% 0;z-index:0}
.post-hero .ph-media img{width:100%;height:100%;object-fit:cover}
.post-hero .ph-media .tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,7,5,.5),rgba(10,7,5,.35) 45%,rgba(10,7,5,.94))}
.post-hero-inner{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;width:100%;padding:0 clamp(18px,4vw,48px) clamp(34px,6vh,70px)}
.post-kind{color:var(--blood);font:700 12px/1 var(--body);letter-spacing:.26em;text-transform:uppercase;margin-bottom:16px;display:inline-block}
.post-hero h1{font-size:clamp(40px,7vw,104px);text-transform:uppercase;color:var(--ink);text-shadow:0 6px 30px rgba(0,0,0,.7);max-width:16ch}
.post-standfirst{margin-top:22px;font-size:clamp(18px,2.2vw,26px);color:var(--ink-soft);font-style:italic;max-width:60ch}
.post-meta{margin-top:20px;display:flex;gap:18px;flex-wrap:wrap;color:var(--ink-mute);font:600 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase}
.post-meta .dot{color:var(--blood)}

.post-wrap{max-width:var(--wrap);margin:0 auto;padding:clamp(40px,7vh,84px) clamp(18px,4vw,48px);
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(30px,5vw,72px);align-items:start}
.article-body{min-width:0;max-width:var(--measure);padding-inline:2px;font-size:19px}
.article-body>section{margin-bottom:clamp(34px,5vh,58px)}
.article-body h2{font-size:clamp(28px,3.6vw,44px);text-transform:uppercase;color:var(--ink);margin:0 0 20px;line-height:.98}
.article-body h2 .sec-n{color:var(--blood);margin-right:14px}
.article-body h3{font-size:clamp(22px,2.6vw,30px);color:var(--gold);text-transform:uppercase;margin:32px 0 12px}
.article-body p{color:var(--ink-soft);margin:0 0 1.05em}
.article-body p b,.article-body p strong{color:var(--ink)}
.article-body>section:first-of-type>p:first-of-type::first-letter,
.article-body p.drop::first-letter{
  font-family:var(--disp);font-weight:900;float:left;font-size:82px;line-height:.72;
  padding:8px 12px 0 0;color:var(--blood-bright)}

.lead{font-size:clamp(21px,2.6vw,27px);line-height:1.4;color:var(--ink);font-weight:400;margin:0 0 28px}
.pullquote{margin:36px 0;border:0;padding:0;position:relative}
.pullquote p{font-family:var(--disp);font-weight:900;font-size:clamp(26px,3.4vw,40px);line-height:1.02;color:var(--ink);text-transform:uppercase;margin:0;padding-left:26px;border-left:4px solid var(--blood)}
.blockquote{margin:32px 0;padding:22px 26px;background:var(--paper-2);border-left:3px solid var(--gold)}
.blockquote p{font-size:20px;font-style:italic;color:var(--ink);margin:0 0 10px}
.blockquote cite{color:var(--gold);font-style:normal;font:700 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase}
.callout{margin:30px 0;padding:24px 26px;background:linear-gradient(135deg,rgba(193,21,32,.14),rgba(18,13,9,.6));border:1px solid var(--rule-2);border-left:3px solid var(--blood)}
.callout p{margin:0;color:var(--ink);font-size:17px}
.note{margin:24px 0;padding:16px 20px 16px 46px;background:var(--paper-2);color:var(--ink-soft);font-size:15.5px;position:relative;border:1px solid var(--rule)}
.note::before{content:"";position:absolute;left:18px;top:18px;width:16px;height:16px;
  background:var(--gold);-webkit-mask:var(--info-mask) center/contain no-repeat;mask:var(--info-mask) center/contain no-repeat}

.versus{width:100%;border-collapse:collapse;margin:30px 0;font-size:16px}
.versus caption{caption-side:top;text-align:left;color:var(--blood);font:700 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px}
.versus th{background:var(--paper-3);color:var(--gold);text-transform:uppercase;font:700 12px/1.2 var(--body);letter-spacing:.1em;padding:12px 14px;text-align:left;border:1px solid var(--rule-2)}
.versus td{padding:12px 14px;border:1px solid var(--rule);color:var(--ink-soft);vertical-align:top}
.versus tr td:first-child{color:var(--ink);font-weight:600}

.datatable{width:100%;border-collapse:collapse;margin:30px 0;font-size:15.5px}
.datatable caption{caption-side:top;text-align:left;color:var(--blood);font:700 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px}
.datatable th{background:var(--paper-3);color:var(--gold);text-align:left;text-transform:uppercase;font:700 11px/1.2 var(--body);letter-spacing:.1em;padding:11px 13px;border-bottom:2px solid var(--rule-2)}
.datatable td{padding:11px 13px;border-bottom:1px solid var(--rule);color:var(--ink-soft)}
.datatable tr:hover td{background:var(--paper-2)}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;margin:30px 0}
.statblock{border:1px solid var(--rule-2);background:var(--paper-2);padding:20px 18px;text-align:left}
.statblock .stat-num{display:block;font-family:var(--disp);font-weight:900;font-size:clamp(32px,4vw,46px);color:var(--gold);line-height:1}
.statblock .stat-label{display:block;margin-top:8px;color:var(--ink-mute);font-size:13px;line-height:1.3;text-transform:uppercase;letter-spacing:.06em}

.timeline{list-style:none;margin:30px 0;padding:0;border-left:2px solid var(--rule-2)}
.timeline li{position:relative;padding:0 0 26px 28px}
.timeline li::before{content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px;background:var(--blood);border:2px solid var(--paper);border-radius:50%}
.timeline .t-when{display:block;color:var(--gold);font:700 13px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}
.timeline .t-what{display:block;color:var(--ink-soft);font-size:16px}

.chart{margin:30px 0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{margin-top:12px;color:var(--ink-mute);font-size:13px}
.chart .bar-track{fill:var(--paper-3)}
.chart .bar-fill{fill:var(--blood)}
.chart .bar-fill.gold{fill:var(--gold)}
.chart .bar-label{fill:var(--ink-soft);font:600 12px/1 var(--body)}
.chart .bar-val{fill:var(--ink);font:700 12px/1 var(--body)}
.chart .grid-line{stroke:var(--rule);stroke-width:1}
.chart .line-path{fill:none;stroke:var(--gold);stroke-width:2.5}
.chart .line-dot{fill:var(--blood)}
.chart .axis-label{fill:var(--ink-mute);font:600 11px/1 var(--body)}

.article-figure{margin:30px 0}
.article-figure img{width:100%;aspect-ratio:16/9;object-fit:cover;background:radial-gradient(60% 50% at 50% 60%,rgba(226,110,30,.25),#0c0806);border:1px solid var(--rule)}
.article-figure figcaption{margin-top:10px;color:var(--ink-mute);font-size:13.5px;font-style:italic}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:30px 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;border:1px solid var(--rule);background:#0c0806}
.gallery figcaption{margin-top:6px;color:var(--ink-mute);font-size:12px}

.map-figure{margin:30px 0}
.map-figure .map-slot{width:100%;aspect-ratio:16/10;border:1px dashed var(--rule-2);background:
  repeating-linear-gradient(45deg,#0c0806,#0c0806 12px,#0e0a07 12px,#0e0a07 24px);
  display:flex;align-items:center;justify-content:center}
.map-figure .map-slot::after{content:none;color:var(--ink-faint);font:600 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase}
.map-figure figcaption{margin-top:10px;color:var(--ink-mute);font-size:13.5px;font-style:italic}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:30px 0}
.profile-card{border:1px solid var(--rule-2);background:var(--paper-2);padding:20px}
.profile-card .p-photo{width:64px;height:64px;object-fit:cover;border-radius:50%;margin-bottom:14px;background:#0c0806;filter:grayscale(.3)}
.profile-card.no-photo{border-left:3px solid var(--gold)}
.profile-card h3{font-size:22px;color:var(--ink);text-transform:uppercase;margin-bottom:4px}
.profile-card .p-role{color:var(--gold);font:700 12px/1.3 var(--body);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.profile-card p{color:var(--ink-soft);font-size:15px;margin:0 0 10px}
.profile-card .p-links a{font-size:13px;letter-spacing:.06em}
.profile-card .p-attr{color:var(--ink-faint);font-size:12px;margin-top:8px}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:30px 0}
.org-card{display:flex;align-items:center;gap:14px;border:1px solid var(--rule-2);background:var(--paper-2);padding:14px 16px}
.org-card:hover{border-color:var(--gold)}
.org-logo{width:40px;height:40px;object-fit:contain;background:#0c0806;flex:none}
.org-card.no-logo .org-logo{display:none}
.org-name{color:var(--ink);font-weight:700;font-size:15px}
.org-host{display:block;color:var(--ink-mute);font-size:12px}
.entity-ref{color:var(--gold);border-bottom:1px solid var(--rule-2);white-space:nowrap}
.entity-ref:hover{border-color:var(--gold)}

/* by-the-numbers aside rail */
.article-aside{position:sticky;top:calc(var(--barH) + 80px)}
.btn-rail{border:1px solid var(--rule-2);background:var(--paper-2)}
.btn-rail .rail-head{padding:16px 18px;border-bottom:1px solid var(--rule-2);color:var(--blood);font:700 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase}
.btn-fig{padding:18px;border-bottom:1px solid var(--rule)}
.btn-fig:last-child{border-bottom:0}
.btn-fig .n{font-family:var(--disp);font-weight:900;font-size:clamp(30px,3.4vw,42px);color:var(--gold);line-height:1}
.btn-fig .l{margin-top:6px;color:var(--ink-mute);font-size:13px;line-height:1.35}
.article-aside.inline{position:static}
@media (max-width:900px){.article-aside.inline .btn-rail{}}

.related{max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,4vw,48px) clamp(50px,8vh,90px)}
.related h2{font-size:clamp(24px,3vw,36px);text-transform:uppercase;color:var(--ink);margin-bottom:22px;padding-top:30px;border-top:1px solid var(--rule)}
.related-links,.further-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.related-links li a,.further-grid a{display:block;border:1px solid var(--rule-2);background:var(--paper-2);padding:20px 22px;color:var(--ink);
  font-family:var(--disp);font-weight:900;font-size:20px;text-transform:uppercase;transition:.2s}
.related-links li a:hover,.further-grid a:hover{border-color:var(--gold);color:var(--gold);background:var(--paper-3)}
.related-links li a .rl-sec,.further-grid a .rl-sec{display:block;font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.18em;color:var(--blood);margin-bottom:8px}

/* ============================================================
   FEED / CATEGORY / GENERIC PAGE
   ============================================================ */
.section-band{max-width:var(--wrap);margin:0 auto;padding:clamp(48px,8vh,100px) clamp(18px,4vw,48px)}
.band-head{max-width:70ch;margin-bottom:40px}
.band-head .eyebrow{color:var(--blood);font:700 13px/1 var(--body);letter-spacing:.28em;text-transform:uppercase;margin-bottom:14px}
.band-head h2{font-size:clamp(34px,5vw,68px);text-transform:uppercase;color:var(--ink)}
.band-head p{margin-top:18px;color:var(--ink-soft);font-size:19px;max-width:64ch}

.feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.feed .feat{grid-column:span 2}
.card{position:relative;display:flex;flex-direction:column;border:1px solid var(--rule-2);background:var(--paper-2);overflow:hidden;transition:.25s}
.card:hover{border-color:var(--gold);transform:translateY(-3px)}
.card .card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:radial-gradient(60% 50% at 50% 60%,rgba(226,110,30,.24),#0c0806)}
.card.feat .card-media{aspect-ratio:16/8}
.card .card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.card:hover .card-media img{transform:scale(1.05)}
.card .card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.card .card-kicker{color:var(--blood);font:700 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px}
.card h3{font-size:clamp(21px,2vw,27px);text-transform:uppercase;color:var(--ink);line-height:.98;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2em}
.card.feat h3{font-size:clamp(28px,3.2vw,42px);-webkit-line-clamp:3;min-height:auto}
.card .card-dek{margin-top:12px;color:var(--ink-soft);font-size:15.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .card-meta{margin-top:auto;padding-top:16px;color:var(--ink-mute);font:600 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;display:flex;gap:10px;flex-wrap:wrap}
.card .card-meta .dot{color:var(--blood)}

.more-toggle{display:none}
.more-target{display:contents}
.more-toggle:not(:checked)~.feed .over{display:none}
.more-label{display:inline-flex;align-items:center;gap:10px;margin-top:32px;cursor:pointer;color:var(--gold);
  font:700 13px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--rule-2);padding:14px 22px;transition:.2s}
.more-label:hover{border-color:var(--gold);background:var(--paper-2)}
.more-toggle:checked~.more-label .lbl-more{display:none}
.more-label .lbl-less{display:none}
.more-toggle:checked~.more-label .lbl-less{display:inline}

.cat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rule)}
.cat-list li a{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:24px 4px;border-bottom:1px solid var(--rule);transition:.2s}
.cat-list li a:hover{background:var(--paper-2);padding-left:16px}
.cat-list .cl-n{font-family:var(--disp);font-weight:900;font-size:30px;color:var(--blood)}
.cat-list .cl-main .cl-title{font-family:var(--disp);font-weight:900;font-size:clamp(22px,2.4vw,30px);color:var(--ink);text-transform:uppercase;display:block}
.cat-list .cl-main .cl-dek{color:var(--ink-mute);font-size:15px;margin-top:4px;display:block}
.cat-list .cl-meta{color:var(--ink-mute);font:600 12px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;text-align:right}

/* generic content page (about/legal) */
.page-hero{max-width:var(--wrap);margin:0 auto;padding:clamp(50px,9vh,110px) clamp(18px,4vw,48px) 20px}
.page-hero .eyebrow{color:var(--blood);font:700 13px/1 var(--body);letter-spacing:.28em;text-transform:uppercase;margin-bottom:16px}
.page-hero h1{font-size:clamp(40px,7vw,96px);text-transform:uppercase;color:var(--ink)}
.page-body{max-width:74ch;margin:0 auto;padding:20px clamp(18px,4vw,48px) clamp(60px,10vh,120px);font-size:19px}
.page-body h1{font-size:clamp(36px,6vw,72px);text-transform:uppercase;margin-bottom:20px}
.page-body .lead{margin-bottom:22px}
.page-body p{color:var(--ink-soft);margin:0 0 1.1em}
.page-body strong{color:var(--ink)}
.contact-form{display:flex;flex-direction:column;gap:18px;margin-top:26px}
.contact-form label{display:flex;flex-direction:column;gap:8px;color:var(--gold);font:700 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
.contact-form input,.contact-form textarea{background:var(--paper-2);border:1px solid var(--rule-2);color:var(--ink);
  font-family:var(--body);font-size:16px;padding:13px 15px}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--gold)}
.contact-form button{align-self:flex-start;background:var(--gold);color:var(--paper);border:none;padding:14px 30px;
  font:700 13px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.contact-form button:hover{background:var(--ink)}
.err-actions{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.btn-ghost{border:1px solid var(--gold);color:var(--gold);padding:14px 26px;font:700 13px/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
.btn-ghost:hover{background:var(--gold);color:var(--paper)}

/* styleguide helpers */
.sg-section{max-width:var(--wrap);margin:0 auto;padding:40px clamp(18px,4vw,48px);border-top:1px solid var(--rule)}
.sg-section>h2{font-size:32px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.sg-section>.sg-note{color:var(--ink-mute);font-size:14px;margin-bottom:24px}
.sg-demo{max-width:var(--measure)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .feed .feat{grid-column:span 1}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  :root{--barH:26px}
  body{font-size:18px}
  .nav{position:fixed;inset:calc(var(--barH) + 62px) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(8,5,3,.98);border-bottom:1px solid var(--rule);padding:8px 0;transform:translateY(-140%);
    transition:transform .3s;z-index:54}
  .nav.open{transform:none}
  .nav a{padding:15px clamp(18px,4vw,48px);border-bottom:1px solid var(--rule)}
  .nav a.cta{margin:10px clamp(18px,4vw,48px);text-align:center}
  .navtoggle{display:flex;align-items:center}
  .hero-inner{grid-template-columns:1fr}
  .chapter-index{flex-direction:row;flex-wrap:wrap;border-right:0;border-top:2px solid var(--rule-2);padding-right:0;padding-top:16px;gap:8px 18px;text-align:left}
  .dossier-inner{grid-template-columns:1fr;grid-template-rows:44% 56%}
  .arsenal-row,.arsenal-row.flip{grid-template-columns:1fr;direction:ltr}
  .arsenal-fig{min-height:240px}
  .watch-grid{grid-template-columns:1fr}
  .post-wrap{grid-template-columns:1fr}
  .article-aside{position:static;margin-top:20px}
  .footer-inner{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:17px}
  .sponsor-grid{grid-template-columns:1fr 1fr}
  .sponsor:nth-child(3n){border-right:1px solid var(--rule)}
  .sponsor:nth-child(2n){border-right:0}
  .trivia-grid{columns:1}
  .svc-list{grid-template-columns:1fr}
  .cat-list li a{grid-template-columns:auto 1fr;gap:14px}
  .cat-list .cl-meta{grid-column:2;text-align:left}
  .scores{grid-template-columns:1fr}
  .article-body p.drop::first-letter,.article-body>section:first-of-type>p:first-of-type::first-letter{font-size:64px}
}
@media (max-width:400px){
  .sponsor-grid{grid-template-columns:1fr}
  .sponsor{border-right:0!important}
}
/* dark-on-transparent brand logos → light, so they read on the dark badges */
img[src*="logos-ext/metacritic"],img[src*="logos-ext/appletv"],img[src*="logos-ext/amazon"]{filter:brightness(0) invert(.92)}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.sponsor-grid .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.sponsor-grid .sponsor.sponsor img{height:38px!important;display:block!important;width:100%!important}

/* op-recentre-plate: the money mark sat off-centre in its own plate (measured 257px of skew:
   0px on one side, 257px on the other, with a 47px mark in a 304px plate).
   ⚠️ THE CAUSE IS OURS, NOT DESIGN'S: sp-mark-frame forces display:block on the plate, which
   replaces the flex centring Design put there — and with the mark capped by a max-width and no
   auto margins it drifts to one side. Rather than fight the block display, the mark itself is
   centred with auto inline margins, which works whatever the plate's display ends up being. */
a.sp-logo{text-align:center}
a.sp-logo > img{display:block!important;margin-inline:auto!important}

/* op-footer-compact: the footer printed 13 rows for 13 link(s) in
   2 list(s) — 1122px at 390, 5% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too,
   measured 1122 -> 863px (23% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(10px,2.78vw,40px)!important;row-gap:10px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1831px at 390, 8% of the whole page. Two columns bring it to
   984px (46% shorter). Checked before writing: no new overflow, smallest mark still
   120px wide, longest blurb 3 lines, tile heights 164-164px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. Only the tier(s) that were one-per-row are touched (.sponsor-grid.reveal), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sponsor-grid.reveal{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:16px!important}
    .sponsor-grid.reveal > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-grid.reveal > * *{min-width:0!important;max-width:100%}
    .sponsor-grid.reveal img,.sponsor-grid.reveal svg{max-width:100%;height:auto}
  .sponsor-grid.reveal .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sponsor-grid 5 rows at 768). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .sponsor-grid .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */
/* op-heading-levels */
h3:where(.rt-h4){margin: 0px; line-height: 0.98; font-family: var(--disp); font-weight: 900; letter-spacing: -0.01em;}
.arsenal-txt h3:where(.rt-h4){font-size: clamp(28px, 3.4vw, 46px); text-transform: uppercase; margin: 8px 0px 16px; color: var(--ink);}
.cut-card h3:where(.rt-h4){font-size: 26px; text-transform: uppercase; color: var(--ink); margin-bottom: 8px;}
.services h3:where(.rt-h4){font-size: 20px; text-transform: uppercase; color: var(--ink); margin-bottom: 6px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(button.dossier-card > div.portrait > img,
  div.dossier-inner > div.dossier-photo > img.p-actor,
  div.dossier-inner > div.dossier-photo > img.p-char.show,
  div.gallery > figure > img,
  div.score-badge > div.logo-slot > img,
  div.svc-list > a.svc-slot > img,
  section > figure.article-figure > img,
  section.hero > div.hero-media > img,
  section.post-hero > div.ph-media > img){height:auto}
/* op-img-dims:end */

/* op-locator-map — real-geodata locators (Natural Earth 10m · US Census 500k · OSM); the svg is meet-scaled into Design's own box,
   pins and labels are HTML at a fixed px size placed with container-query units, so they stay legible on phones */
.map-slot.is-mapped{position:relative;container-type:size;overflow:hidden;padding:0!important;background:#0e0a07!important;background-image:none!important;border:0!important;color:#f3ead4}
.map-slot.is-mapped::before,.map-slot.is-mapped::after{content:none!important;display:none!important}
.map-slot.is-mapped>svg.mk{position:absolute;inset:0;width:100%;height:100%;display:block}
.map-slot.is-mapped>span{--s:min(100cqw / var(--vw), 100cqh / var(--vh));position:absolute;left:calc(50% + (var(--x) - var(--vw) / 2) * var(--s));top:calc(50% + (var(--y) - var(--vh) / 2) * var(--s));width:0;height:0;pointer-events:none;white-space:nowrap;font-family:var(--body);line-height:1;letter-spacing:0;text-transform:none;font-style:normal}
.map-slot.is-mapped>.mk-p i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#e2b74c;box-shadow:0 0 0 2px #0a0705}
.map-slot.is-mapped>.mk-p b{position:absolute;font-size:12px;font-weight:700;line-height:15px;color:#f3ead4;text-shadow:0 0 2px #0a0705,0 0 2px #0a0705,0 0 3px #0a0705,0 0 4px #0a0705}
.map-slot.is-mapped>.mk-p.r b{left:10px;top:-7.5px}.map-slot.is-mapped>.mk-p.l b{right:10px;top:-7.5px}.map-slot.is-mapped>.mk-p.t b{left:0;transform:translateX(-50%);bottom:8px}.map-slot.is-mapped>.mk-p.b b{left:0;transform:translateX(-50%);top:8px}.map-slot.is-mapped>.mk-p.tr b{left:5px;bottom:4px}.map-slot.is-mapped>.mk-p.br b{left:5px;top:4px}.map-slot.is-mapped>.mk-p.tl b{right:5px;bottom:4px}.map-slot.is-mapped>.mk-p.bl b{right:5px;top:4px}.map-slot.is-mapped>.mk-p.ru b{left:10px;top:-15.5px}.map-slot.is-mapped>.mk-p.rd b{left:10px;top:.5px}.map-slot.is-mapped>.mk-p.lu b{right:10px;top:-15.5px}.map-slot.is-mapped>.mk-p.ld b{right:10px;top:.5px}.map-slot.is-mapped>.mk-p.tt b{left:0;transform:translateX(-50%);bottom:13px}.map-slot.is-mapped>.mk-p.bb b{left:0;transform:translateX(-50%);top:13px}
.map-slot.is-mapped>.mk-a{font-size:11px;font-style:italic;letter-spacing:.04em;color:#f3ead4;opacity:.62;display:flex;justify-content:center;align-items:center}
.map-slot.is-mapped>.mk-a.mk-ref{font-style:normal;opacity:.7;justify-content:flex-start;padding-left:6px;align-items:center}
.map-slot.is-mapped>.mk-a.mk-sea{color:#f3ead4;opacity:.85}
.map-slot.is-mapped>.mk-a.mk-line{font-style:normal;font-weight:700;opacity:.9;color:#e2b74c;text-shadow:0 0 2px #0a0705,0 0 3px #0a0705}
.map-slot.is-mapped>.mk-r::before{content:'';position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;background:#f3ead4;opacity:.55}
/* op-locator-map:end */