/* ============================================================
   WHAT IS [ ] — red-on-black manifesto shell
   Design system. No framework. Two typefaces, one accent.
   ============================================================ */

/* self-hosted fonts (preloaded in index.html) */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400;
  font-display: block; src: url("assets/fonts/anton-400.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400;
  font-display: block; src: url("assets/fonts/spacemono-400.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700;
  font-display: block; src: url("assets/fonts/spacemono-700.woff2") format("woff2"); }

:root {
  /* — palette — */
  --black:      #0a0908;   /* dead canvas, faintly warm */
  --black-2:    #120f0e;   /* raised surface */
  --red:        #c8102e;   /* blood — the only accent */
  --red-hot:    #e2451f;   /* hover / live */
  --red-dim:    #7a1620;   /* secondary strokes, hairlines */
  --bone:       #ece5d8;   /* body text */
  --bone-dim:   #8c857a;   /* captions, metadata */
  --grid:       #181513;   /* faint dossier grid lines */

  /* — type — */
  --display: "Anton", "Arial Narrow", sans-serif;
  --mono: "Space Mono", "Courier New", monospace;

  /* — motion — */
  --slam: cubic-bezier(.16, 1.2, .3, 1);   /* overshoot */
  --hard: cubic-bezier(.7, 0, .2, 1);      /* fast, decisive */

  /* — metrics — */
  --edge: clamp(1rem, 4vw, 3rem);
  --maxw: 1250px;            /* wide enough for the longest title on one line, leaves gutter for the cue */
  --hair: 1px;
}

/* ───────── reset ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--black);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: -1px -1px;
  color: var(--bone);
  font-family: var(--mono);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;        /* avoid orphan words / single-word last lines */
}
img, svg, video, iframe { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--red-hot); text-underline-offset: 3px; }
::selection { background: var(--red); color: var(--black); }

.svg-defs { position: absolute; }

/* ───────── atmosphere ───────── */
.grain, .scanlines, .vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 9;
}
.grain {
  z-index: 8; opacity: .055; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 7s steps(6) infinite;
}
.scanlines {
  opacity: .35;
  background: repeating-linear-gradient(
    to bottom, transparent 0 2px, rgba(0,0,0,.45) 2px 3px);
}
.vignette {
  background: radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(0,0,0,.7) 100%);
}
@keyframes grain-shift {
  0% { transform: translate(0,0); }    20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -2%); } 60% { transform: translate(-2%, 4%); }
  80% { transform: translate(4%, 2%); } 100% { transform: translate(0,0); }
}

/* ───────── hand-drawn marker frame ─────────
   border lives on pseudo-elements so displacement
   wobbles the stroke but never the content. */
.frame { position: relative; }
.frame::before {
  content: ""; position: absolute; inset: 0;
  border: 2.5px solid var(--red);
  filter: url(#rough);
  pointer-events: none;
}
.frame--double::after {
  content: ""; position: absolute; inset: -6px -4px -2px -7px;
  border: 1.5px solid var(--red);
  filter: url(#rough2);
  opacity: .5; pointer-events: none;
}

/* ───────── hero ───────── */
.hero {
  padding: clamp(.5rem, 1.8vh, 1rem) var(--edge) clamp(.3rem, 1vh, .6rem);
  max-width: var(--maxw); margin-inline: auto;
}
.hero__box {
  display: inline-block;
  padding: clamp(.25rem, 1.1vh, .6rem) 0 0;   /* tight gap under the classification bar */
}
.hero__kicker {
  font-family: var(--mono); font-weight: 700; letter-spacing: .42em;
  text-transform: uppercase; color: var(--red); font-size: .7rem;
  margin: 0 0 1.4rem; padding-left: .1em;
}
.hero h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.2rem, 8vw, 6rem);
  line-height: .9; letter-spacing: .01em; margin: 0;
  text-transform: uppercase; color: var(--bone); white-space: nowrap;
}
/* redacted topic word: real word underneath, censor bar over it.
   long blank -> random flicker -> reveal -> flicker -> repeat, on one
   GPU-composited opacity animation (step-end = hard digital cuts). */
.redact { position: relative; display: inline-block; }
.redact__word { color: var(--bone); position: relative; z-index: 0;
  text-shadow: 0 0 24px rgba(226,69,31,.35); }
.redact__bar {
  position: absolute; left: -.05em; right: -.05em; top: .1em; bottom: .14em;
  z-index: 1; background: var(--red); transform: rotate(-.5deg);
  box-shadow: 0 0 22px rgba(200,16,46,.45);
  opacity: 1;                       /* start censored, even before the animation ticks */
  animation: redact 64s step-end infinite;
}
@keyframes redact {
  0%   { opacity: 1 }                 /* ~30s blanked */
  46%  { opacity: 1 }
  46.5%{ opacity: .35 } 47%{ opacity: 1 } 47.6%{ opacity: 0 } 48%{ opacity: .85 }
  48.4%{ opacity: 0 } 48.9%{ opacity: 1 } 49.3%{ opacity: 0 } 49.7%{ opacity: .5 }
  50%  { opacity: 0 }                 /* ~30s revealed */
  96%  { opacity: 0 }
  96.4%{ opacity: .6 } 96.8%{ opacity: 0 } 97.3%{ opacity: 1 } 97.7%{ opacity: .2 }
  98.2%{ opacity: 1 } 98.6%{ opacity: 0 } 99.1%{ opacity: 1 } 99.5%{ opacity: .4 }
  100% { opacity: 1 }
}
@media (prefers-reduced-motion: reduce) {
  .redact__bar { animation: none; opacity: 0; }   /* reveal the word, no flicker */
}
.hero__sub {
  font-family: var(--mono); color: var(--bone-dim);
  max-width: 46ch; margin: 1.8rem 0 0; font-size: .95rem;
}

/* parallax title: fixed + spacer (set up in app.js). transform/top only. */
.hero h1.is-parallax { position: fixed; z-index: 7; margin: 0;
  transform-origin: top left; will-change: top, transform; }
.hero__titlespacer { pointer-events: none; }
/* everything in the hero except the title fades out as the title rises */
.classbar, .hero__file, .hero__kicker, .hero__sub, .hero__rule { opacity: var(--hf, 1); }
.titleplate {                       /* ever-present header backdrop, fades in on scroll */
  position: fixed; top: 0; left: 0; right: 0; z-index: 6; opacity: 0;
  background: rgba(10,9,8,.92); border-bottom: var(--hair) solid var(--red);
  backdrop-filter: blur(3px); pointer-events: none; will-change: opacity;
}
@media (max-width: 560px) { .hero h1 { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .hero h1.is-parallax { position: static; transform: none; } }
.hero__rule {
  height: 2px; background: var(--red); margin-top: clamp(2rem, 6vh, 4rem);
  filter: url(#rough); transform-origin: left;
}

/* ───────── dossier chrome (B: Declassified) ───────── */
.classbar {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-bottom: var(--hair) solid var(--red-dim); padding-bottom: 10px;
  font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: var(--bone-dim);
}
.classbar__clf { color: var(--red); }
.hero__file {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--bone-dim); margin: 0 0 1rem;
}
.hero__box { overflow: visible; }
.hero__stamp {
  position: absolute; top: clamp(-.6rem, -1vw, -.2rem); right: clamp(.5rem, 3vw, 2.4rem);
  border: 3px solid var(--red); color: var(--red);
  font-family: var(--display); text-transform: uppercase; letter-spacing: .1em;
  font-size: clamp(.8rem, 1.6vw, 1.2rem); padding: .35em .7em;
  transform: rotate(7deg); opacity: .9; pointer-events: none;
}

/* relocated lead lines: subhead above the tabs, prompt above the warnings */
/* subhead row: subtext on the left, small attribution chip on the right */
.lead-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: clamp(1rem, 4vw, 3rem); flex-wrap: wrap;
  margin: 0 0 clamp(1rem, 2.6vh, 1.9rem);
}
.lead-sub {
  font-family: var(--mono); color: var(--bone-dim); font-size: .9rem;
  max-width: 60ch; margin: 0; flex: 1 1 22ch;
  text-wrap: balance;        /* even line lengths -> no stubby last line */
}
.lead-attr {   /* "According to Lawrence Britt:" — small bordered chip */
  flex: 0 0 auto; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bone); white-space: nowrap;
  border: var(--hair) solid var(--red); padding: .5rem .75rem; line-height: 1.1;
}
.lead-prompt {   /* previous kicker font: mono, bold, wide-tracked, small, red — hugs tight */
  font-family: var(--mono); font-weight: 700; letter-spacing: .42em;
  text-transform: uppercase; color: var(--red); font-size: .7rem;
  text-align: right; padding-right: .1em;
  margin: clamp(.2rem, .6vh, .35rem) 0 clamp(.25rem, .7vh, .4rem);
}
.lead-prompt--bottom { margin: clamp(2rem, 6vh, 3.6rem) 0 0; }   /* sits at the very bottom */

/* ───────── framework tabs (co-equal, under the title card) ───────── */
.tabs {
  display: flex; gap: 0; margin: 0 0 clamp(.35rem, 1vh, .6rem);
  border-bottom: 2px solid var(--red); filter: url(#rough);
}
.tab {
  flex: 1 1 0; text-align: left; position: relative;
  padding: clamp(.6rem, 1.4vw, .95rem) clamp(.9rem, 2.2vw, 1.5rem);
  border: var(--hair) solid var(--red-dim); border-bottom: 0;
  background: transparent; display: flex; flex-direction: column; gap: .3rem;
  opacity: .45;                                   /* unselected tabs sit back */
  transition: background .2s var(--hard), opacity .2s var(--hard);
}
.tab + .tab { border-left: 0; }
.tab__label {
  font-family: var(--display); text-transform: uppercase; line-height: 1;
  font-size: clamp(1.1rem, 3vw, 2rem); letter-spacing: .01em;
  color: var(--bone-dim); transition: color .2s var(--hard);
}
.tab__note {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--bone-dim);
}
.tab:hover { opacity: .8; }
.tab:hover .tab__label { color: var(--bone); }

/* SELECTED: full opacity, lit panel, bright label, a thick red bar across the top */
.tab[aria-selected="true"] {
  opacity: 1; background: var(--black-2); border-color: var(--red);
}
.tab[aria-selected="true"] .tab__label { color: var(--red-hot); }
.tab[aria-selected="true"] .tab__note { color: var(--bone); }
.tab[aria-selected="true"]::before {       /* pressed indicator: red bar on top edge */
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 4px;
  background: var(--red); z-index: 2;
}
.tab[aria-selected="true"]::after {        /* connector: bridges over the red underline */
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: var(--black-2); z-index: 1;
}
.tab:focus-visible { outline: 2px dashed var(--red-hot); outline-offset: -5px; }

.fwpanel { display: flex; flex-direction: column; gap: clamp(.55rem, 1.6vh, 1rem); }
.fwpanel[hidden] { display: none; }

@media (max-width: 560px) {
  .tab__label { font-size: 1.1rem; }
  .tab { padding: .8rem .9rem; }
}

/* ───────── statements (accordion) ───────── */
.statements {
  padding: 0 var(--edge) clamp(3rem, 10vh, 7rem);
  max-width: var(--maxw); margin-inline: auto;
  display: flex; flex-direction: column; gap: 0;   /* spacing controlled per-element */
}
.statement { position: relative; border-top: var(--hair) solid var(--red-dim); padding-top: clamp(.35rem, .9vh, .65rem); }

.statement__head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: stretch;
  gap: clamp(.8rem, 2.5vw, 2rem); width: 100%; text-align: left;
  padding: clamp(.45rem, 1.2vw, .8rem) clamp(1rem, 3vw, 2rem);
}
.statement__num {   /* spans from the top of the eyebrow to the bottom of the title */
  font-family: var(--display); font-size: clamp(2.7rem, 7vw, 5rem);
  color: var(--red); line-height: .76; font-variant-numeric: tabular-nums;
  align-self: stretch; display: flex; align-items: center;
}
.statement__titlewrap { display: flex; flex-direction: column; gap: .35rem; }
.statement__eyebrow {
  font-family: var(--mono); font-weight: 700; font-size: .64rem;
  letter-spacing: .34em; text-transform: uppercase; color: var(--bone-dim);
}
.statement__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.4rem, 4.4vw, 3.1rem); line-height: 1; letter-spacing: .005em;
  text-transform: uppercase; color: var(--bone); margin: 0;
  transition: color .3s var(--hard);
}
.statement__head:hover .statement__title,
.statement__head:focus-visible .statement__title { color: var(--red-hot); }
.statement__sign {
  font-family: var(--display); font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--red); line-height: 1; transition: transform .45s var(--slam);
}
.statement.open .statement__sign { transform: rotate(45deg); }
.statement__head:focus-visible { outline: 2px dashed var(--red-hot); outline-offset: 4px; }

/* collapsible region — animates to true content height */
.statement__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--hard);
}
.statement.open .statement__panel { grid-template-rows: 1fr; }
.statement__panelinner { overflow: hidden; min-height: 0; }
.statement__blurb {   /* explainer: centered, +10%, brighter */
  color: #b6ac9b; max-width: 66ch;
  margin: clamp(1rem,2.5vh,1.6rem) auto 0;
  padding: 0 clamp(1rem,3vw,2rem);
  font-size: 1.05rem; text-align: center;
}

/* ───────── carousel (slow endless auto-scroll, pause on hover) ───────── */
.carousel__wrap { position: relative; margin-top: clamp(1.2rem, 3vh, 2rem); }
.carousel {
  overflow: hidden; padding: .6rem 0 1.4rem;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.carousel__track {
  display: flex; gap: clamp(.9rem, 2vw, 1.5rem); width: max-content;
  padding-left: clamp(1rem, 3vw, 2rem); will-change: transform;
}
.carousel__track.is-marquee { animation: carousel-marquee var(--dur, 60s) linear infinite; }
/* pause the slide while the viewer is reading (hover) or tabbing through cards */
.carousel:hover .carousel__track.is-marquee,
.carousel:focus-within .carousel__track.is-marquee { animation-play-state: paused; }
@keyframes carousel-marquee { to { transform: translateX(calc(-1 * var(--shift, 50%))); } }
@media (prefers-reduced-motion: reduce) {
  .carousel { overflow-x: auto; }   /* no auto-slide -> let the viewer scroll manually */
}

/* ───────── cards ───────── */
.card {
  flex: 0 0 auto; width: clamp(220px, 26vw, 320px);
  background: var(--black-2);
  padding: .9rem; display: flex; flex-direction: column; gap: .7rem;
  text-align: left; color: var(--bone);
  transition: transform .35s var(--slam), background .3s;
  opacity: 0; transform: translateY(14px);
}
.statement.open .card { animation: card-in .55s var(--slam) forwards; }
/* crisp hairline frames on cards (B discipline); marker wobble stays on the hero */
.card::before { filter: none; border-width: 1.5px; border-color: var(--red-dim); }
.card:hover { transform: translateY(-6px); background: #1a1513; }
.card:hover::before { border-color: var(--red-hot); }
.card:focus-visible { outline: 2px dashed var(--red-hot); outline-offset: 5px; }

/* ───────── hover highlight: even wash over the whole clickable element ─────────
   only on .glow (clickable) elements, only while the cursor is directly over them. */
.glow { position: relative; }
.glow::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; mix-blend-mode: screen; opacity: 0;
  transition: opacity .2s ease; background: rgba(226,69,31,.15);
}
.glow:hover::after, .glow:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .glow::after { transition: none; } }
.card__kicker {
  font-family: var(--mono); font-weight: 700; font-size: .62rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--red);
  display: flex; justify-content: space-between; align-items: center;
}
.card__kicker .idx { color: var(--bone-dim); letter-spacing: .1em; }
.card__kicker .idx .yy { color: var(--red-hot); font-weight: 700; font-size: 1.18em; }
.card__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: #000; border-bottom: var(--hair) solid var(--red-dim);
}
.card__media img { width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.2) contrast(1.05); }
.card__title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: 1.15rem; line-height: 1.02; margin: 0; color: var(--bone);
}
.card__caption { font-size: .78rem; color: var(--bone-dim); margin: 0; line-height: 1.45; }

/* play glyph for video cards */
.card__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--red); font-size: 2.4rem;
}
.card__play::after {
  content: ""; width: 0; height: 0;
  border-left: 26px solid var(--red); border-top: 16px solid transparent;
  border-bottom: 16px solid transparent; filter: drop-shadow(0 0 12px rgba(0,0,0,.6));
  transition: border-left-color .3s;
}
.card:hover .card__play::after { border-left-color: var(--red-hot); }

/* article source tag */
.card__source {
  position: absolute; left: 0; bottom: 0; background: var(--red);
  color: var(--black); font-weight: 700; font-size: .6rem; letter-spacing: .15em;
  text-transform: uppercase; padding: .3rem .55rem;
}

/* audio waveform teaser (bars built in JS) */
.waveform { display: flex; align-items: flex-end; gap: 3px; height: 100%; padding: 14% 8%; }
.waveform span { flex: 1; background: var(--red); opacity: .8; min-height: 3px; }

/* dataset teaser (bars built in JS) */
.data-teaser { display: flex; align-items: flex-end; gap: 4px; height: 100%; padding: 12% 9%; }
.data-teaser span { flex: 1; background: var(--red-dim); }
.data-teaser span:last-child { background: var(--red); }

/* quote card — no media, oversized mark */
.card--quote .card__media {
  aspect-ratio: 4 / 3; display: grid; align-content: center; padding: .4rem 1rem;
  border-bottom: 0;
}
.card--quote blockquote {
  margin: 0; font-family: var(--mono); font-size: .92rem; color: var(--bone);
  line-height: 1.4; position: relative; padding-top: 1.6rem;
}
.card--quote blockquote::before {
  content: "\201C"; position: absolute; top: -1.2rem; left: -.2rem;
  font-family: var(--display); font-size: 4rem; color: var(--red); line-height: 1;
}

/* evidence card — text-forward: the quote/headline + outlet tag */
.card__ev {
  background: transparent; border-bottom: 0; padding: .1rem 0 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: .7rem;
}
.ev-text {
  font-family: var(--mono); font-size: .82rem; line-height: 1.5; color: var(--bone); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.card--evidence .card__source { position: static; align-self: flex-start; }

/* fallback / unsupported */
.card__media--fallback { display: grid; place-items: center; color: var(--red-dim);
  font-family: var(--display); font-size: 2rem; }

/* placeholder card — ghost number, dashed frame so it reads as "to be filled" */
.card__ghostnum { font-family: var(--display); font-size: 3rem; color: var(--red-dim);
  opacity: .55; letter-spacing: .05em; }
.card:has(.card__ghostnum)::before { border-style: dashed; opacity: .65; }
.card:has(.card__ghostnum) .card__title { color: var(--bone-dim); }

/* ───────── modal ───────── */
.modal {
  border: 0; padding: 0; background: transparent; color: var(--bone);
  max-width: min(1100px, 94vw); max-height: 92vh; width: 100%;
  margin: auto; overflow: visible;
}
.modal::backdrop { background: rgba(5,4,3,0); transition: background .35s; }
.modal[open]::backdrop {
  background: rgba(5,4,3,.86);
  backdrop-filter: blur(3px) saturate(.6);
}
.modal[open] .modal__frame { animation: modal-in .45s var(--slam); }
.modal__frame {
  position: relative; background: var(--black-2);
  padding: clamp(1rem, 3vw, 2.4rem); max-height: 92vh; overflow: auto;
}
.modal__close {
  position: absolute; top: -1px; right: -1px; z-index: 2;
  background: var(--red); color: var(--black); font-weight: 700;
  font-family: var(--mono); letter-spacing: .12em; font-size: .72rem;
  padding: .6rem .9rem; transition: background .25s;
}
.modal__close:hover, .modal__close:focus-visible { background: var(--red-hot); outline: 0; }
.modal__body { display: flex; flex-direction: column; gap: 1.2rem; }
.modal__kicker {
  font-weight: 700; font-size: .68rem; letter-spacing: .34em;
  text-transform: uppercase; color: var(--red);
}
.modal__title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.6rem, 4vw, 3rem); line-height: 1; margin: 0; color: var(--bone);
}
.modal__caption { color: var(--bone-dim); max-width: 70ch; margin: 0; }
.modal__media img, .modal__media video, .modal__media iframe {
  width: 100%; height: auto; max-height: 70vh; object-fit: contain; background: #000;
}
.modal__media iframe { aspect-ratio: 16 / 9; height: auto; }
.modal__media { border: var(--hair) solid var(--red-dim); }

/* audio in modal */
.modal__audio audio { width: 100%; filter: invert(1) hue-rotate(180deg) contrast(1.1); }
.modal__audio .bignote { font-family: var(--display); color: var(--red); font-size: 1.4rem; }

/* article in modal */
.modal__article .excerpt {
  font-size: 1.05rem; line-height: 1.6; color: var(--bone);
  border-left: 3px solid var(--red); padding-left: 1.2rem; margin: 0;
}
.modal__article .meta { color: var(--bone-dim); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.modal__readout {
  align-self: flex-start; background: var(--red); color: var(--black);
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: .8rem 1.3rem; font-size: .8rem; transition: background .25s, transform .25s var(--slam);
}
.modal__readout:hover { background: var(--red-hot); transform: translateX(4px); }

/* quote in modal */
.modal__quote blockquote {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.6rem, 5vw, 3.4rem); line-height: 1.04; color: var(--bone);
  margin: 0; position: relative; padding-top: 2.4rem;
}
.modal__quote blockquote::before {
  content: "\201C"; position: absolute; top: -2.2rem; left: -.4rem;
  color: var(--red); font-size: 7rem; line-height: 1;
}
.modal__quote cite { font-family: var(--mono); font-style: normal; color: var(--red);
  display: block; margin-top: 1.4rem; letter-spacing: .12em; }

/* placeholder modal — intentionally near-empty */
.modal__placeholder {
  display: grid; place-items: center; min-height: 38vh;
  border: 2px dashed var(--red-dim);
}
.modal__placeholder span {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .2em;
  color: var(--red-dim); font-size: clamp(1.2rem, 3vw, 2rem); opacity: .6;
}

/* evidence modal — quote, source, why-it-matches, link */
.modal__evquote {
  font-family: var(--mono); font-size: clamp(1.05rem, 2vw, 1.55rem); line-height: 1.42;
  color: var(--bone); margin: 0; padding-left: 1.2rem; border-left: 3px solid var(--red);
}
.modal__source .meta {
  color: var(--red); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 .35rem;
}
.modal__source .src-title { color: var(--bone-dim); font-style: italic; margin: 0; max-width: 72ch; }
.modal__why { border-top: var(--hair) solid var(--red-dim); padding-top: 1.1rem; }
.modal__why .why-label {
  font-family: var(--mono); font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
  color: var(--red); font-size: .62rem; margin: 0 0 .5rem;
}
.modal__why .why-text { color: var(--bone); line-height: 1.6; margin: 0; max-width: 72ch; }

/* dataset chart in modal (svg drawn by app.js) */
.modal__chart svg { width: 100%; height: auto; }
.modal__chart .axis { stroke: var(--red-dim); stroke-width: 1; }
.modal__chart .bar { fill: var(--red); }
.modal__chart .bar:hover { fill: var(--red-hot); }
.modal__chart .line { fill: none; stroke: var(--red); stroke-width: 2.5; }
.modal__chart .dot { fill: var(--red-hot); }
.modal__chart .lab { fill: var(--bone-dim); font-family: var(--mono); font-size: 11px; }
.modal__chart .val { fill: var(--bone); font-family: var(--mono); font-size: 11px; }

/* ───────── scroll cue (bottom-right, pulsing red down-chevrons) ───────── */
.scrollcue {
  position: fixed; bottom: clamp(1rem, 4vh, 2.4rem);
  right: max(.5rem, calc((100vw - var(--maxw)) / 2 - 88px));   /* in the gutter, clear of content */
  z-index: 7; color: var(--red); pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(200,16,46,.55));
  transition: opacity .45s var(--hard);
}
.scrollcue.gone { opacity: 0; }
.scrollcue svg { display: block; width: 84px; height: auto; }   /* ~3x */
/* small viewports: tuck (shrink to the corner), then fade out entirely on phones */
@media (max-width: 1240px) {
  .scrollcue { right: clamp(.4rem, 1.6vw, .9rem); bottom: clamp(.7rem, 3vh, 1.4rem); }
  .scrollcue svg { width: 52px; }
}
@media (max-width: 620px) { .scrollcue { display: none; } }
.scrollcue polyline { transform-box: fill-box; transform-origin: center; }
.scrollcue .cue-a { animation: cue-bob 1.5s ease-in-out infinite; }
.scrollcue .cue-b { animation: cue-bob 1.5s ease-in-out .2s infinite; }
@keyframes cue-bob {
  0%, 100% { transform: translateY(-2px); opacity: .3; }
  50%      { transform: translateY(3px);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scrollcue .cue-a, .scrollcue .cue-b { animation: none; opacity: .75; }
}

/* ───────── colophon ───────── */
.colophon {
  padding: clamp(2rem,6vh,4rem) var(--edge); border-top: var(--hair) solid var(--red-dim);
  max-width: var(--maxw); margin-inline: auto;
  color: var(--bone-dim); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.colophon b { color: var(--red); font-weight: 700; }

/* ───────── fatal error panel (file:// trap, bad JSON) ───────── */
.fatal {
  margin: var(--edge); padding: clamp(1.5rem, 5vw, 3rem);
  max-width: 70ch;
}
.fatal h2 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  color: var(--red); font-size: clamp(1.8rem, 6vw, 3.4rem); margin: 0 0 1rem; line-height: 1;
}
.fatal p { color: var(--bone); }
.fatal code {
  display: block; background: #000; color: var(--red-hot);
  padding: .9rem 1.1rem; margin: 1rem 0; border-left: 3px solid var(--red);
  font-size: .9rem; user-select: all;
}
.fatal .why { color: var(--bone-dim); font-size: .85rem; }

/* ───────── load reveal ───────── */
@keyframes card-in { to { opacity: 1; transform: translateY(0); } }
@keyframes modal-in {
  from { opacity: 0; transform: scale(.92) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes stamp-in {
  0%   { opacity: 0; transform: scale(1.25) rotate(-3deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.hero__box, .statement { animation: stamp-in .7s var(--slam) backwards; }
.hero__box { animation-delay: .05s; }
.statement:nth-child(1) { animation-delay: .18s; }
.statement:nth-child(2) { animation-delay: .28s; }
.statement:nth-child(3) { animation-delay: .38s; }
.statement:nth-child(4) { animation-delay: .48s; }
.statement:nth-child(n+5) { animation-delay: .56s; }

/* ───────── responsive ───────── */
@media (max-width: 640px) {
  .statement__head { grid-template-columns: auto 1fr auto; gap: .7rem; }
  .statement__blurb { padding-left: 0; }
  .card { width: 78vw; }
  .scanlines { opacity: .2; }
}

/* ───────── reduced motion ───────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .grain { animation: none; }
  .card { opacity: 1; transform: none; }
}