/* Self-hosted variable webfonts, latin + latin-ext subsets.
   Variable rather than static instances: four files cover all eleven weight/style
   combinations the page uses (125KB vs 389KB for the static set).
   unicode-range means latin-ext is only fetched if the page ever contains those
   characters. Serving from our own origin removes a render-blocking request to
   fonts.googleapis.com and a second connection to fonts.gstatic.com. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/anton-normal-latin-ext.woff2) format('woff2-variations');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/anton-normal-latin.woff2) format('woff2-variations');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito';font-style:italic;font-weight:600 700;font-display:swap;src:url(/fonts/nunito-italic-latin-ext.woff2) format('woff2-variations');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:italic;font-weight:600 700;font-display:swap;src:url(/fonts/nunito-italic-latin.woff2) format('woff2-variations');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/nunito-normal-latin-ext.woff2) format('woff2-variations');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/nunito-normal-latin.woff2) format('woff2-variations');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/roboto-mono-normal-latin-ext.woff2) format('woff2-variations');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/roboto-mono-normal-latin.woff2) format('woff2-variations');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================
   THE MORFIN FILE — Washington State Republican Party
   ============================================================ */

:root{
  --ink:#0a0b0e;
  --ink-2:#14161c;
  --ink-3:#1e222b;
  --paper:#f2efe7;
  --paper-2:#e7e3d8;
  /* Palette matched to the WAGOP opponent handout (Sept 2026). The handout's
     red is #eb1c2c; white on it measures 4.44:1, just under AA, and white text
     sits on this token in 34 places. Darkened along the same hue until white
     clears 4.5 with headroom rather than landing on it — 10.3/255 from the
     printed red, where the value it replaces was 26.9 away. */
  --red:#e81525;
  --red-deep:#b81a14;     /* red for small text or low-contrast grounds:
                             3.2:1 on --gold, 4.9:1 on the tinted ballot row */
  --red-hot:#f15e69;      /* handout hue, lightened */
  --gold:#fcdb16;         /* the handout's yellow, exact */
  --gold-deep:#e1c103;
  --blue:#1b3f95;         /* the handout's blue, exact. On the printed page it
                             sits on yellow; here it only ever carries white or
                             sits on paper, so the full-strength value works. */
  --blue-line:#3263da;    /* the same hue lifted for the 5px accent borders on
                             dark cards — #1b3f95 there is 1.89:1 and vanishes */
  --blue-bright:#668be3;
  --blue-deep:#2351c0;

  /* Text roles.
     Two neutral families, each derived in OKLCH from the surface it sits on, so
     muted copy carries that surface's own cast instead of a generic grey. The ink
     family is cool (hue 271, taken from --ink); the paper family is warm (hue 90,
     taken from --paper). This replaces 13 near-identical hand-picked greys that
     were all cool-cast, including the ones sitting on the warm paper sections.
     Every role clears WCAG AA on every surface it is used on. --on-ink-5 is the
     one exception: large-text only (3:1), reserved for the .punch-x separator. */
  --on-ink-1:#d1d5de;      /* lead copy on dark        13.4:1 on --ink */
  --on-ink-2:#b2b6c3;      /* body copy on dark         9.7:1 */
  --on-ink-3:#9a9fad;      /* captions, citations       7.4:1 */
  --on-ink-4:#8b8f9e;      /* meta, chrome, case refs   6.1:1 */
  --on-ink-5:#656976;      /* large display only        3.6:1 */
  --on-paper-2:#45423a;    /* body copy on paper        8.7:1 on --paper */
  --on-paper-3:#59564c;    /* secondary copy            6.4:1 */
  --on-paper-4:#676358;    /* source lines, meta        5.2:1 */

  /* The page's one semantic pair: what he said vs. what the record shows. */
  --said:#8cc0ee;
  --real:#ff8b7e;

  --display:'Anton',Impact,'Haettenschweiler',sans-serif;
  --body:'Nunito',system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:'Roboto Mono',ui-monospace,Menlo,monospace;

  --wrap:1180px;
  --band-h:54px;          /* the hand-off band; subtracted from the hero */
  --ease:cubic-bezier(.16,.84,.34,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
html,body{overscroll-behavior-x:none}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;
  /* clip, not hidden: hidden makes body a scroll container that can still be
     panned/rubber-banded sideways on mobile. */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,canvas,svg{max-width:100%;display:block}
a{color:inherit}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}

.skip{
  position:absolute;top:.5rem;left:.5rem;z-index:999;
  background:var(--ink);color:#fff;padding:.8rem 1.2rem;
  clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap;
}
.skip:focus{clip-path:none;width:auto;height:auto}

:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* ---------- shared type ---------- */
.section-head{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.5rem,7.2vw,5.2rem);line-height:.92;
  letter-spacing:.005em;text-transform:uppercase;
  margin:0 0 1.1rem;
}
.section-head .red{color:var(--red)}
.section-sub{
  font-size:clamp(1.02rem,1.9vw,1.22rem);max-width:62ch;
  margin:0 0 2.9rem;color:var(--on-paper-2);font-weight:600;
}
/* dark sections need light body copy */
.glance .section-sub,.mapsec .section-sub,
.docs .section-sub,.more .section-sub{color:var(--on-ink-2)}
.src{
  font-family:var(--mono);font-size:.71rem;font-weight:500;letter-spacing:.055em;
  text-transform:uppercase;color:var(--on-paper-4);margin:.9rem 0 0;line-height:1.5;
}
.glance .src,.mapsec .src,.docs .src,.more .src,
.card-dark .src{color:var(--on-ink-4)}
.red{color:var(--red)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--display);font-size:1.02rem;
  letter-spacing:.045em;text-transform:uppercase;text-decoration:none;
  padding:.95rem 1.9rem;border:3px solid transparent;
  transition:transform .18s var(--ease),background .18s,color .18s,box-shadow .18s;
}
.btn:hover{transform:translateY(-3px)}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 6px 0 #9b1f18}
.btn-primary:hover{background:var(--red-hot);box-shadow:0 9px 0 #9b1f18}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 6px 0 rgba(0,0,0,.35);margin-top:1.6rem}
.btn-dark:hover{background:var(--red)}

/* ============================================================
   HERO
   ============================================================ */
/* ---------- the handout hand-off ----------
   Yellow is a surface on the printed handout and carries every claim on it;
   on this site it had only ever been an accent. This band is the one place
   the two pieces touch, so it uses the handout's exact yellow and its warning
   mark. Ink on this yellow is 14.3:1. */
.handoff{background:var(--gold);color:var(--ink);position:relative;z-index:6}
.handoff-in{display:flex;align-items:center;gap:1rem;height:var(--band-h)}
.handoff-mark{flex:0 0 auto;width:25px;height:22px;color:var(--red)}
.handoff-copy{margin:0;font-size:.93rem;line-height:1.34}
.handoff-copy b{font-weight:800}
.handoff-copy span{color:#4a4126;font-weight:500}   /* 7.4:1 on the yellow */
.handoff-go{
  margin-left:auto;flex:0 0 auto;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;white-space:nowrap;
  color:var(--ink);text-decoration:none;border:2px solid var(--ink);
  padding:.55rem .85rem;transition:background .15s,color .15s;
}
@media (hover:hover) and (pointer:fine){
  .handoff-go:hover{background:var(--ink);color:var(--gold)}
}
.handoff-go:active{background:var(--ink);color:var(--gold)}

.hero{
  position:relative;min-height:calc(100svh - var(--band-h));display:flex;align-items:center;
  background:#06070a;color:#fff;overflow:hidden;isolation:isolate;
}
.hero-gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.95}
.hero-vignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 42%,transparent 25%,rgba(3,4,6,.72) 78%,#050609 100%),
    linear-gradient(180deg,rgba(5,6,9,.8),transparent 28%,transparent 62%,rgba(5,6,9,.92));
}
.hero-scan{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}
.hero-inner{position:relative;z-index:4;
  padding:clamp(4.5rem,11vh,8rem) 0 clamp(4rem,10vh,7rem)}

.kicker{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.5rem;
}
.kicker::before{content:"";display:inline-block;width:38px;height:2px;background:var(--red);
  vertical-align:middle;margin-right:.85rem;transform:translateY(-2px)}

.hero-title{margin:0 0 1.6rem;font-family:var(--display);font-weight:400;text-transform:uppercase}
.hero-title .l1{
  display:block;font-size:clamp(1.7rem,4.3vw,3.7rem);line-height:1;
  letter-spacing:.012em;color:#fff;
}
.hero-title .l2{
  display:block;font-size:clamp(3.5rem,10.4vw,9.4rem);line-height:.85;
  color:var(--red);letter-spacing:-.004em;margin-top:.06em;
  text-shadow:0 0 62px rgba(224,54,44,.42);
}
.hero-sub{
  font-size:clamp(1.08rem,2.3vw,1.5rem);max-width:44ch;color:var(--on-ink-1);
  font-weight:600;margin:0 0 2.4rem;
}
.hero-sub strong{color:#fff;font-weight:900}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap}

/* ---------- subject / case-file portrait ---------- */
.hero-inner{display:grid;grid-template-columns:1.45fr .55fr;gap:3rem;align-items:center}
.hero-copy{min-width:0}

.subject{margin:0;max-width:352px;justify-self:end}
.subject[hidden]{display:none}
.sf{
  position:relative;overflow:hidden;background:#05070b;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 26px 60px rgba(0,0,0,.6);
}
.sf img{
  width:100%;height:auto;display:block;
  /* surveillance still: cold, hard, degraded */
  filter:grayscale(1) contrast(1.34) brightness(.86) saturate(0);
}
.sf-tone{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(44,84,132,.55),rgba(150,30,22,.4));
  mix-blend-mode:color;
}
.sf-scan{
  position:absolute;inset:0;pointer-events:none;opacity:.6;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.34) 0 1px,transparent 1px 3px);
}
.sf-vig{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(78% 68% at 50% 42%,transparent 42%,rgba(3,5,9,.82) 100%);
}
.sf-c{position:absolute;width:20px;height:20px;border:2px solid rgba(255,255,255,.55);pointer-events:none}
.sf-c.tl{top:9px;left:9px;border-right:0;border-bottom:0}
.sf-c.tr{top:9px;right:9px;border-left:0;border-bottom:0}
.sf-c.bl{bottom:9px;left:9px;border-right:0;border-top:0}
.sf-c.br{bottom:9px;right:9px;border-left:0;border-top:0}
.sf-id{
  position:absolute;top:0;left:0;background:var(--red);color:#fff;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;font-weight:700;
  padding:.32rem .7rem;
}
.subject figcaption{
  margin-top:.85rem;border-left:3px solid var(--red);padding-left:.8rem;
  font-family:var(--mono);color:var(--on-ink-3);
}
.subject figcaption b{display:block;color:#fff;font-size:.9rem;letter-spacing:.1em}
.subject figcaption span{display:block;font-size:.63rem;letter-spacing:.05em;margin-top:.25rem;line-height:1.6}
.subject figcaption .sf-case{color:var(--on-ink-4);font-size:.6rem}


/* glitch */
.glitch{position:relative}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;inset:0;pointer-events:none;
  clip-path:inset(0 0 0 0);
}
.glitch::before{color:#00e0ff;transform:translate(-3px,0);opacity:.0;mix-blend-mode:screen}
.glitch::after{color:#ffe14a;transform:translate(3px,0);opacity:.0;mix-blend-mode:screen}
.glitch.on::before{animation:gA .42s steps(2,end) both}
.glitch.on::after{animation:gB .42s steps(2,end) both}
@keyframes gA{
  0%{opacity:.85;clip-path:inset(12% 0 62% 0);transform:translate(-8px,0)}
  30%{opacity:.7;clip-path:inset(58% 0 18% 0);transform:translate(6px,0)}
  60%{opacity:.6;clip-path:inset(30% 0 44% 0);transform:translate(-4px,0)}
  100%{opacity:0;transform:translate(0,0)}
}
@keyframes gB{
  0%{opacity:.85;clip-path:inset(66% 0 10% 0);transform:translate(8px,0)}
  35%{opacity:.7;clip-path:inset(20% 0 58% 0);transform:translate(-6px,0)}
  70%{opacity:.5;clip-path:inset(46% 0 30% 0);transform:translate(3px,0)}
  100%{opacity:0;transform:translate(0,0)}
}

/* HUD */
.hud{position:absolute;inset:0;z-index:3;pointer-events:none;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-4)}
.hud>div{position:absolute;display:flex;gap:1.4rem;align-items:center}
.hud-tl{top:1.7rem;left:1.7rem}
.hud-tr{top:1.7rem;right:1.7rem}
.hud-bl{bottom:1.7rem;left:1.7rem}
.hud-br{bottom:1.7rem;right:1.7rem}
.rec{display:inline-flex;align-items:center;gap:.55rem;color:var(--red-hot);font-weight:700}
.rec i{width:9px;height:9px;border-radius:50%;background:var(--red-hot);animation:blink 1.5s steps(1,end) infinite}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:.12}}
.hud-case{color:var(--on-ink-4)}
.cross{position:absolute;width:22px;height:22px;border:2px solid rgba(255,255,255,.28)}
.cross-tl{top:1.1rem;left:1.1rem;border-right:0;border-bottom:0}
.cross-tr{top:1.1rem;right:1.1rem;border-left:0;border-bottom:0}
.cross-bl{bottom:1.1rem;left:1.1rem;border-right:0;border-top:0}
.cross-br{bottom:1.1rem;right:1.1rem;border-left:0;border-top:0}

.scroll-cue{position:absolute;bottom:1.9rem;left:50%;transform:translateX(-50%);z-index:5}
.scroll-cue span{display:block;width:2px;height:46px;background:linear-gradient(180deg,transparent,var(--red));
  animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{background:var(--red);color:#fff;overflow:hidden;touch-action:pan-y;padding:.78rem 0;
  border-top:4px solid var(--ink);border-bottom:4px solid var(--ink)}
.ticker-track{display:flex;gap:1.6rem;align-items:center;white-space:nowrap;
  width:max-content;animation:roll 46s linear infinite}
.ticker-track span{font-family:var(--display);font-size:1.06rem;letter-spacing:.07em;text-transform:uppercase}
.ticker-track i{font-style:normal;font-size:.6rem;opacity:.72}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   AT A GLANCE
   ============================================================ */
.glance{background:var(--ink);color:#fff;padding:6.5rem 0 7rem}
.glance .section-head{margin-bottom:3.2rem}
.stat-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.stat{
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  border:1px solid rgba(255,255,255,.09);border-top:5px solid var(--red);
  padding:2.1rem 1.5rem 1.8rem;position:relative;overflow:hidden;
}
.stat::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.028) 0 1px,transparent 1px 4px)}
.stat-num{font-family:var(--display);font-size:clamp(3.4rem,8vw,5.1rem);line-height:.86;color:var(--gold)}
.stat-label{font-size:.94rem;color:var(--on-ink-2);margin-top:.85rem;font-weight:600;line-height:1.48}
.stat-label b{color:#fff}

/* ============================================================
   THE LIE — yellow slab
   ============================================================ */
.feature{background:var(--paper);padding:6.5rem 0}
.yellowbox{
  background:var(--gold);color:var(--ink);padding:clamp(2rem,5vw,3.6rem);
  border:5px solid var(--ink);position:relative;
  box-shadow:16px 16px 0 var(--ink);
}
.fx-head{display:flex;gap:1.4rem;align-items:flex-start;margin-bottom:1.6rem}
.fx-head h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.55rem,4.2vw,3rem);line-height:.96;margin:0;color:var(--red-deep);
}
.icon{flex:0 0 auto;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:#fff}
.icon svg{width:34px;height:34px}
.icon-red{background:var(--red)}
.icon-blue{background:var(--blue)}

.lede{font-size:clamp(1.04rem,2vw,1.24rem);font-weight:600;margin:0 0 1.9rem}
.pullquote{
  margin:0 0 1.9rem;padding:1.5rem 1.7rem;background:var(--ink);color:#fff;
  border-left:8px solid var(--red);
}
.pullquote p{margin:0 0 .9rem;font-size:clamp(1rem,2vw,1.2rem);font-weight:700;line-height:1.5}
.pullquote mark{background:var(--red);color:#fff;padding:0 .18em}
.pullquote cite{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--on-ink-3);font-style:normal}
.law{background:rgba(10,11,14,.09);border:2px dashed rgba(10,11,14,.4);padding:1.25rem 1.5rem}
.law h3{font-family:var(--display);font-weight:400;font-size:1rem;letter-spacing:.09em;margin:0 0 .5rem;text-transform:uppercase}
.law p{margin:0;font-size:.96rem;font-weight:600}

/* ============================================================
   THE SWORN APPLICATION
   ============================================================ */
.sworn{background:var(--paper-2);padding:6.5rem 0}
.sworn-quote{
  margin:0 0 2.2rem;padding:2rem 2.2rem;background:var(--ink);color:#fff;
  border-left:10px solid var(--gold);box-shadow:12px 12px 0 rgba(10,11,14,.18);
}
.sworn-quote p{margin:0 0 1rem;font-size:clamp(1.1rem,2.6vw,1.6rem);
  font-weight:700;line-height:1.42;font-style:italic}
.sworn-quote mark{background:var(--red);color:#fff;padding:0 .2em;font-style:normal}
.sworn-quote cite{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--on-ink-3);font-style:normal;line-height:1.6;display:block}
.sworn .cards .card-dark{border-color:var(--red);box-shadow:9px 9px 0 var(--red)}
.sworn .cards .card-dark h3{color:var(--gold)}
.sworn .cards .card-dark:hover{box-shadow:15px 15px 0 var(--gold)}

/* sits inside a light .card — keep it dark-on-tint */
.bodycam{
  margin:1rem 0 0;padding:1rem 1.15rem;background:rgba(10,11,14,.055);
  border-left:4px solid var(--red);color:var(--ink);
  font-size:1.02rem;font-weight:800;font-style:italic;line-height:1.6;
}
.bodycam em{display:inline-block;margin:.35rem 0;font-weight:500;font-style:normal;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-paper-4)}

/* ============================================================
   EVIDENCE MAP
   ============================================================ */
.mapsec{background:var(--ink);color:#fff;padding:6.5rem 0 7rem}
.mapfig{margin:0 0 2.6rem;border:1px solid rgba(255,255,255,.14);background:#07080b;position:relative}
.map-hud{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.7rem 1rem;border-bottom:1px solid rgba(255,255,255,.12);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-3)}
.rec.sm i{width:7px;height:7px}
.map-count b{color:var(--gold);font-size:.95rem}
/* Default view fits the container so the whole map is visible; the canvas
   scales its own labels up as it shrinks. "Zoom in" switches to a fixed
   width inside a horizontal scroller for street-level detail. */
.map-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
#mapCanvas{width:100%;height:auto;display:block}
.mapfig.zoomed #mapCanvas{width:1100px;max-width:none}
.map-zoom{
  margin-left:auto;flex:0 0 auto;cursor:pointer;
  background:transparent;color:var(--gold);border:1px solid rgba(252,219,22,.5);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.34rem .7rem;font-weight:700;transition:background .15s,color .15s;
}
.map-zoom:hover{background:var(--gold);color:var(--ink)}
/* Touch input, not screen size, decides the target: a laptop with a
   touchscreen needs the same 44px as a phone. */
@media (pointer:coarse){
  .handoff-go{min-height:44px;display:grid;place-items:center}
  .map-zoom{min-height:44px;min-width:44px;padding:.5rem 1rem}
}
.map-hint{display:none}
.mapfig.zoomed .map-hint{display:block}
.map-hint{margin:0;padding:.5rem .9rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-ink-4);border-top:1px solid rgba(255,255,255,.08)}
.mapfig figcaption{
  padding:.95rem 1rem;border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--on-ink-3);display:flex;gap:1.3rem;flex-wrap:wrap;align-items:center;
}
.mapfig figcaption em{font-style:normal;opacity:.62;margin-left:auto}
.lg-item{display:inline-flex;align-items:center;gap:.5rem}
.lg-hot,.lg-cold{width:11px;height:11px;border-radius:50%;display:inline-block;flex:0 0 auto}
.lg-hot{background:var(--red-hot);box-shadow:0 0 10px var(--red-hot)}
.lg-cold{background:var(--blue-deep)}

.house-punch{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:stretch;
  margin-bottom:1.4rem}
.hp-side{background:var(--ink-2);border:1px solid rgba(255,255,255,.1);padding:1.3rem 1.4rem}
.hp-said{border-top:5px solid var(--blue-line)}
.hp-real{border-top:5px solid var(--red)}
.hp-tag{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-ink-4);margin-bottom:.45rem}
.hp-side b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.05rem,2.6vw,1.5rem);line-height:1.08}
.hp-said b{color:var(--said)}
.hp-real b{color:var(--real)}
.hp-note{display:block;margin-top:.5rem;font-size:.86rem;font-weight:600;color:var(--on-ink-2)}
.hp-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;padding:0 .4rem}
.hp-dist{font-family:var(--display);font-size:clamp(1.3rem,3.4vw,2rem);color:#fff;line-height:1}
.hp-line{width:2px;flex:1;min-height:26px;background:linear-gradient(180deg,var(--blue-line),var(--red))}
.hp-sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-4)}

.map-punch{display:grid;grid-template-columns:1fr auto 1fr;gap:1.4rem;align-items:center}
.punch-a,.punch-b{background:var(--ink-2);border:1px solid rgba(255,255,255,.1);padding:1.7rem 1.5rem;text-align:center}
.punch-a{border-top:5px solid var(--red)}
.punch-b{border-top:5px solid var(--blue-line)}
.punch-a b,.punch-b b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(3rem,7vw,4.6rem);line-height:.85}
.punch-a b{color:var(--red-hot)}
.punch-b b{color:var(--blue-bright)}
.punch-a span,.punch-b span{display:block;margin-top:.6rem;font-size:.92rem;color:var(--on-ink-2);font-weight:600}
.punch-x{font-family:var(--display);font-size:1.5rem;color:var(--on-ink-5);text-transform:uppercase}

/* ============================================================
   CARDS
   ============================================================ */
.evidence-grid{background:var(--paper);padding:6.5rem 0}
.cards{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.cards-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
/* Four evidence cards. auto-fit sized them 3-up at the wrap's 1180px and left a
   lone card stranded on a second row. Explicit tracks instead, stepping 4 -> 2 -> 1
   and never 3, so the group always divides evenly and never orphans a card. */
.cards-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1080px){.cards-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cards-4{grid-template-columns:1fr}}
/* The 4-up column is ~279px, so give the measure back some of the gutter. */
@media (min-width:1081px){.cards-4 .card{padding:1.7rem 1.35rem}}
.card{
  background:#fff;border:3px solid var(--ink);padding:2rem 1.7rem;
  box-shadow:9px 9px 0 var(--ink);transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.card:hover{transform:translate(-4px,-4px);box-shadow:15px 15px 0 var(--red)}
.card .icon{margin-bottom:1.1rem}
.card h3{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:1.42rem;line-height:1.06;margin:0 0 .8rem;color:var(--red)}
.card p:not(.src){margin:0;font-size:.99rem;font-weight:600}
.card-dark{background:var(--ink);color:#fff;border-color:var(--gold);box-shadow:9px 9px 0 var(--gold)}
.card-dark:hover{box-shadow:15px 15px 0 var(--red)}
.card-dark h3{color:var(--gold)}
.more{background:var(--ink-2);padding:6.5rem 0}
.more .section-head{color:#fff}
.mini-list{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.6rem}
.mini-list li{background:rgba(255,255,255,.06);border-left:4px solid var(--red);
  padding:.7rem .9rem;font-size:.93rem;font-weight:600}
.mini-list b{color:var(--gold)}
.mini-list span{font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.06em;color:var(--on-ink-3);display:block;margin-top:.15rem}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline-sec{background:var(--paper-2);padding:6.5rem 0}
.timeline{list-style:none;margin:0;padding:0 0 0 2.4rem;position:relative;max-width:860px}
.timeline::before{content:"";position:absolute;left:7px;top:.5rem;bottom:.5rem;width:3px;background:rgba(10,11,14,.16)}
.timeline li{position:relative;padding:0 0 2.4rem}
.timeline li::before{
  content:"";position:absolute;left:-2.4rem;top:.42rem;width:17px;height:17px;border-radius:50%;
  background:var(--paper-2);border:4px solid var(--ink);
}
.timeline .tl-key::before{border-color:var(--red);background:var(--red);
  box-shadow:0 0 0 6px rgba(224,54,44,.2)}
.tl-date{display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red-deep);font-weight:700;margin-bottom:.35rem}
.timeline p{margin:0;font-size:1.04rem;font-weight:600}
.tl-key p{font-size:1.14rem}

/* ============================================================
   RESIGNATION
   ============================================================ */
.resign{background:var(--paper);padding:6.5rem 0}
.resign-grid{display:grid;gap:3rem;grid-template-columns:1fr 1fr;align-items:center}
.resign-copy h2{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,5vw,3.5rem);line-height:.94;margin:1.1rem 0 1.1rem}
.resign-copy p:not(.src){font-size:1.06rem;font-weight:600;margin:0 0 1rem}
.quote-inline{
  background:var(--gold);border-left:8px solid var(--ink);padding:1.1rem 1.3rem;
  font-size:clamp(1.05rem,2.2vw,1.28rem);font-weight:800;font-style:italic;
}
.quote-inline u{text-decoration-color:var(--red);text-decoration-thickness:4px;text-underline-offset:3px}

/* real scanned exhibit */
.resign-doc{margin:0}
.exhibit{
  display:block;position:relative;background:#fff;padding:.6rem;
  border:3px solid var(--ink);box-shadow:16px 16px 0 var(--ink);
  transform:rotate(-1.2deg);transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.exhibit:hover{transform:rotate(0deg) scale(1.015);box-shadow:20px 20px 0 var(--red)}
.exhibit img{width:100%;height:auto;display:block}
.exhibit-tag{
  position:absolute;top:-.85rem;left:1.2rem;z-index:2;
  background:var(--red);color:#fff;font-family:var(--mono);font-size:.63rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:.32rem .7rem;
}
.resign-doc figcaption{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--on-paper-4);margin-top:1.6rem;text-align:center;
}

/* ============================================================
   DOCUMENTS
   ============================================================ */
.docs{background:var(--ink);color:#fff;padding:6.5rem 0 7rem}
.doc-list{display:grid;gap:.85rem}
.doc-item{
  display:grid;grid-template-columns:auto 1fr auto;gap:.4rem 1.3rem;align-items:center;
  text-decoration:none;background:var(--ink-2);border:1px solid rgba(255,255,255,.11);
  border-left:5px solid var(--red);padding:1.25rem 1.5rem;
  transition:background .18s,transform .18s var(--ease),border-color .18s;
}
.doc-item:hover{background:var(--ink-3);transform:translateX(7px);border-left-color:var(--gold)}
.doc-tag{grid-column:1;grid-row:1/3;font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);background:var(--gold);padding:.4rem .6rem;
  font-weight:700;align-self:center;white-space:nowrap}
.doc-title{grid-column:2;grid-row:1;font-weight:800;font-size:1.03rem;text-align:left}
.doc-meta{grid-column:2;grid-row:2;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  color:var(--on-ink-4);text-align:left}
.doc-arrow{grid-column:3;grid-row:1/3;font-size:1.5rem;color:var(--red);
  align-self:center;transition:transform .18s var(--ease)}
.doc-item:hover .doc-arrow{transform:translateX(5px);color:var(--gold)}

/* ============================================================
   VOTE NO
   ============================================================ */
.voteno{background:var(--ink);color:#fff;padding:7rem 0;text-align:center;position:relative;overflow:hidden}
.vn-noise{position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
.voteno .wrap{position:relative;z-index:2}
.vn-line{margin:0;display:flex;justify-content:center;align-items:baseline;gap:1.4rem;flex-wrap:wrap}
.vn-vote{font-family:var(--display);font-size:clamp(3.6rem,15vw,11rem);line-height:.82;color:#fff}
.vn-no{font-family:var(--display);font-size:clamp(4.4rem,19vw,14rem);line-height:.78;color:var(--red);
  text-shadow:0 0 70px rgba(224,54,44,.5)}
.vn-name{font-family:var(--display);font-size:clamp(1.5rem,5vw,3.3rem);line-height:1;margin:.5rem 0 .3rem;color:#fff}
.vn-dist{font-family:var(--display);font-size:clamp(1rem,3vw,1.9rem);color:var(--gold);letter-spacing:.05em;margin:0}
.vn-date{font-family:var(--body);font-weight:700;font-size:clamp(.9rem,2vw,1.1rem);
  color:var(--on-ink-1);margin:1.5rem 0 0;letter-spacing:.02em}
.vn-date b{color:#fff;border-bottom:3px solid var(--red);padding-bottom:2px}

/* ============================================================
   THE BALLOT
   ============================================================ */
.ballot{background:var(--paper);padding:6.5rem 0}
.ballot-card{background:#fff;border:4px solid var(--ink);box-shadow:14px 14px 0 var(--ink);
  max-width:860px;overflow:hidden}
.bc-head{background:var(--ink);color:var(--gold);font-family:var(--mono);font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;padding:.7rem 1.2rem;font-weight:700}
.bc-row{display:grid;grid-template-columns:auto auto 1fr auto;gap:1.1rem;align-items:center;
  padding:1.5rem 1.4rem;border-bottom:2px solid rgba(10,11,14,.12)}

/* candidate thumbnails: he gets the case-file treatment, she does not */
.bc-photo{width:74px;height:74px;object-fit:cover;border:3px solid var(--ink);flex:0 0 auto}
.bc-photo[hidden]{display:none}
.bc-photo-no{filter:grayscale(1) contrast(1.3) brightness(.88);opacity:.75}
.bc-photo-yes{object-position:50% 45%;background:#fff;border-color:var(--blue)}
.bc-row:last-child{border-bottom:0}
.bc-box{width:38px;height:32px;border:3px solid var(--ink);display:grid;place-items:center;flex:0 0 auto}
.bc-checked svg{width:26px;height:22px;overflow:visible}
.bc-name{font-family:var(--display);font-size:clamp(1.15rem,3vw,1.8rem);text-transform:uppercase;
  line-height:1.06}
.bc-name em{display:block;font-family:var(--body);font-style:normal;font-weight:600;
  font-size:.78rem;letter-spacing:.02em;text-transform:none;color:var(--on-paper-3);margin-top:.2rem}
.bc-verdict{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;text-align:right;line-height:1.5}
.bc-no{background:rgba(224,54,44,.06)}
/* strike the NAME only — text-decoration on a parent cannot be undone by a child */
.bc-cand{display:block}
.bc-no .bc-name{color:var(--on-paper-3)}
.bc-no .bc-cand{text-decoration:line-through;text-decoration-color:var(--red);
  text-decoration-thickness:4px}
.bc-no .bc-name em{color:var(--on-paper-4)}
.bc-no .bc-verdict{color:var(--red-deep)}
.bc-yes{background:rgba(47,107,168,.06)}
.bc-yes .bc-verdict{color:#2f6ba8;font-size:.78rem}
.bc-yes .bc-verdict b{font-family:var(--display);font-weight:400;font-size:1.35rem;letter-spacing:.04em;
  /* Pinning Anton to 400 (it ships no bold) dropped this below the large-text
     threshold, so it needs the full 4.5:1 rather than 3:1. --red-deep is the
     role for exactly this: red carrying small text on a light tinted ground. */
  color:var(--red-deep);display:inline-block;vertical-align:-2px;margin:0 .12em}

.ballot-cta{margin:2.4rem 0 0;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.btn-outline{border-color:var(--ink);color:var(--ink);box-shadow:0 6px 0 rgba(10,11,14,.25)}
.btn-outline:hover{background:var(--ink);color:#fff}
.ballot-cta span{font-size:.92rem;font-weight:600;color:var(--on-paper-3);max-width:34ch}

@media (max-width:720px){
  /* One compact line. The CTA goes: the hero's own "Read the documents" button
     is on this same screen, so a full-width duplicate was costing a quarter of
     the fold to route somewhere the reader can already reach. */
  .handoff-in{height:auto;gap:.7rem;padding:.6rem 0;align-items:flex-start}
  .handoff-copy{font-size:.86rem;line-height:1.3}
  .handoff-copy span{display:none}
  .handoff-go{display:none}
  .handoff-mark{width:21px;height:19px;margin-top:.1rem}
}
@media (max-width:640px){
  .bc-row{grid-template-columns:auto auto 1fr;gap:.7rem .9rem}
  .bc-photo{width:56px;height:56px}
  .bc-verdict{grid-column:1/-1;text-align:left}
  .ballot-card{box-shadow:8px 8px 0 var(--ink)}
}

/* ============================================================
   CLOSER + FOOTER
   ============================================================ */
.closer{background:var(--paper);padding:5.5rem 0}
.closer-grid{display:grid;gap:2.5rem;grid-template-columns:1.15fr 1fr;align-items:center}
.closer-copy{display:flex;gap:1.5rem;align-items:center}
.check{flex:0 0 auto;width:76px;color:var(--ink)}
.closer-copy h2{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.6rem,4vw,2.7rem);line-height:1.02;margin:0}
.closer-note{border:3px solid var(--gold-deep);background:#fff;padding:1.5rem 1.7rem}
.closer-note p{margin:0;font-size:1rem;font-weight:600}

.site-footer{background:var(--ink);color:var(--on-ink-4);padding:2.6rem 0 3.2rem;
  border-top:5px solid var(--red);font-family:var(--mono)}
.paidfor{margin:0 0 .9rem;font-size:.79rem;letter-spacing:.03em;color:var(--on-ink-1);line-height:1.7}
.foot-meta{margin:0;font-size:.7rem;letter-spacing:.03em;line-height:1.7}

/* ============================================================
   REVEAL / MOTION
   ============================================================ */
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .48s var(--ease),transform .48s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* armed in <head>, disarmed by initReveals(); see index.html */
.reveal-failsafe .reveal,.reveal-failsafe .slam{opacity:1;transform:none;transition:none}
.reveal[data-d="1"]{transition-delay:.05s}
.reveal[data-d="2"]{transition-delay:.10s}
.reveal[data-d="3"]{transition-delay:.16s}
.reveal[data-d="4"]{transition-delay:.22s}
.reveal[data-d="5"]{transition-delay:.28s}

.slam{opacity:0;transform:scale(1.35);
  transition:opacity .34s var(--ease),transform .34s cubic-bezier(.2,1.5,.4,1)}
.slam.in{opacity:1;transform:none}
.slam[data-d="1"]{transition-delay:.05s}
.slam[data-d="2"]{transition-delay:.18s}
.slam[data-d="3"]{transition-delay:.34s}
.slam[data-d="4"]{transition-delay:.46s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:2.2rem}
  .subject{justify-self:start;max-width:290px}
}
@media (max-width:860px){
  .map-hud{font-size:.58rem;letter-spacing:.1em;padding:.6rem .7rem;gap:.6rem}
  .map-count b{font-size:.82rem}
  .mapfig figcaption{font-size:.6rem;gap:.9rem;padding:.8rem .7rem}
}
@media (max-width:900px){
  .house-punch{grid-template-columns:1fr;gap:.6rem}
  .hp-mid{flex-direction:row;gap:.7rem;padding:.2rem 0}
  .hp-line{width:auto;height:2px;flex:1;min-height:0;
    background:linear-gradient(90deg,var(--blue-line),var(--red))}
  .resign-grid,.closer-grid{grid-template-columns:1fr}
  .map-punch{grid-template-columns:1fr}
  .punch-x{display:none}
  .exhibit{transform:none;box-shadow:9px 9px 0 var(--ink)}
}
@media (max-width:620px){
  body{font-size:16px}
  .hero-title .l2{line-height:.95}
  /* wide tracking + long strings wrap badly on a phone */
  .kicker{letter-spacing:.11em;font-size:.62rem;line-height:1.6}
  .kicker::before{width:24px;margin-right:.6rem}
  /* .85 line-height lets the glyphs ride up into the line above */
  .hero-title .l1{font-size:1.55rem}
  /* the 30px slide-in briefly overlaps the huge headline below it — fade only */
  .hero-title .reveal{transform:none}
  /* glitch layers make the headline unreadable at this size */
  .glitch::before,.glitch::after{display:none}
  .hero-title .l2{line-height:.98;margin-top:.06em}
  .hero-sub{font-size:.98rem}
  .hero-cta{gap:.7rem}
  .hero-cta .btn{width:100%;text-align:center}
  /* On a phone the hero was loose elements floating on the background.
     Contain it as one case-file panel: header strip, subject block, verdict,
     summary, actions — each separated by a rule so it reads as a document. */
  .hero{min-height:0;padding:4.5rem 0 3rem}
  .hero-inner{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    background:linear-gradient(180deg,rgba(7,9,14,.86),rgba(7,9,14,.66));
    border:1px solid rgba(255,255,255,.17);
    box-shadow:0 26px 64px rgba(0,0,0,.6);
    padding:0 0 1.25rem;
  }
  .hero-copy{display:contents}
  .kicker{order:1}
  .subject{order:2}
  .hero-title{order:3}
  .hero-sub{order:4}
  .hero-cta{order:5}

  /* header strip */
  .kicker{
    margin:0;padding:.8rem 1rem;
    background:rgba(255,255,255,.05);
    border-bottom:1px solid rgba(255,255,255,.14);
    color:var(--gold);
  }
  .kicker::before{display:none}

  .subject{padding:1.1rem 1rem;margin:0}
  .hero-title{
    padding:1.15rem 1rem .2rem;margin:0;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .hero-sub{
    padding:1rem 1rem 0;margin:0;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .hero-cta{padding:1.1rem 1rem 0;margin:0}

  .subject{
    max-width:100%;
    display:grid;grid-template-columns:104px 1fr;gap:.9rem;align-items:center;
  }
  .subject figcaption{margin-top:0;padding-left:.7rem}
  .subject figcaption b{font-size:.8rem;letter-spacing:.06em}
  .subject figcaption span{font-size:.6rem;line-height:1.55}
  .subject figcaption .sf-case{display:none}
  /* the scanlines + vignette are tuned for a ~350px portrait; at 118px they
     cover the face entirely. Keep the grayscale/tone, drop the texture. */
  .sf-scan,.sf-vig{display:none}
  .sf img{filter:grayscale(1) contrast(1.18) brightness(1.02) saturate(0)}
  /* Do NOT set opacity on .sf-tone: opacity creates a stacking context, which
     breaks its mix-blend-mode:color and paints the gradient opaque over his
     face. At 118px the tint reads as nothing anyway, so drop it outright. */
  .sf-tone{display:none}
  .sf-id{font-size:.5rem;padding:.2rem .42rem;letter-spacing:.14em}
  .sf-c{width:13px;height:13px;border-width:2px}
  .sf-c.tl,.sf-c.tr{top:6px}
  .sf-c.bl,.sf-c.br{bottom:6px}
  .sf-c.tl,.sf-c.bl{left:6px}
  .sf-c.tr,.sf-c.br{right:6px}

  .hero-title .l1{font-size:1.5rem}
  .scroll-cue{display:none}
  /* .hud>div{display:flex} outranks a bare class selector — needs to match it */
  .hud>.hud-bl,.hud>.hud-br{display:none}
  .yellowbox{box-shadow:9px 9px 0 var(--ink)}
  .card{box-shadow:6px 6px 0 var(--ink)}
  .card-dark{box-shadow:6px 6px 0 var(--gold)}
  .fx-head{flex-direction:column;gap:.9rem}
  .doc-item{grid-template-columns:1fr auto}
  .doc-tag{grid-column:1;grid-row:1;justify-self:start}
  .doc-title{grid-column:1;grid-row:2}
  .doc-meta{grid-column:1;grid-row:3}
  .doc-arrow{grid-column:2;grid-row:1/4}
  .closer-copy{flex-direction:column;align-items:flex-start}
  /* The map is the section's evidence, not an inline figure. Letting it run
     to the full viewport width buys back the wrap's 40px, which is ~12% more
     map and drops the shrink factor from 3.6 to 3.2 — the difference between
     labels that need squinting and labels that read. */
  .mapfig{width:100vw;margin-inline:calc(50% - 50vw);border-inline:0}
  .mapfig figcaption{display:grid;gap:.5rem;justify-items:start}
  .mapfig figcaption em{margin-left:0}
  .nb{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.slam{opacity:1;transform:none;transition:none}
  .ticker-track{animation:none}
  .rec i,.scroll-cue span{animation:none}
  .glitch.on::before,.glitch.on::after{animation:none;opacity:0}
  .btn:hover,.card:hover,.doc-item:hover{transform:none}
}



/* Windows High Contrast / forced-colors: the OS replaces authored colours.
   The two canvases carry meaning that a forced palette would flatten, so they
   opt out; everything else is text and is better off adopting the user's colours. */
@media (forced-colors:active){
  #mapCanvas,.hero-gl{forced-color-adjust:none}
  .btn{border:1px solid ButtonText}
  .bc-box,.bc-photo{forced-color-adjust:none}
}