/* ==========================================================
   KIDNAP AND KILL — grok "unsealed exhibit" system
   evidence black · manila paper · typewriter metadata ·
   stamp red · redactions that reveal
   ========================================================== */

:root{
  --black:       #141210;
  --coal:        #1e1b17;
  --line-dark:   #37332c;
  --paper:       #e9e2d0;
  --paper-raised:#f2ecdd;
  --ink:         #26211a;
  --ink-muted:   #57503f;
  --bone:        #f0ebdd;
  --bone-muted:  #a89f8c;
  --red:         #b32632;   /* buttons, large numerals */
  --red-deep:    #8e1823;   /* small red text on paper */
  --red-light:   #e05a63;   /* small red text on black */
  --focus:       #ffd15c;   /* highlighter */

  --disp: "Big Shoulders", "Arial Narrow", sans-serif;
  --serif:"Source Serif 4", Georgia, serif;
  --mono: "Courier Prime", "Courier New", monospace;

  --header-h: 4.25rem;
  --reading: 68ch;
  --shell: 74rem;
  --pad: clamp(1rem, 4vw, 3.5rem);

  --step--1: clamp(.82rem, .79rem + .12vw, .9rem);
  --step-0:  clamp(1rem, .97rem + .18vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.17rem + .4vw, 1.5rem);
  --step-2:  clamp(1.56rem, 1.41rem + .75vw, 2rem);
  --step-3:  clamp(1.95rem, 1.67rem + 1.4vw, 2.75rem);
  --step-4:  clamp(2.44rem, 1.96rem + 2.4vw, 3.8rem);
  --step-5:  clamp(3.05rem, 2.18rem + 4.35vw, 5.5rem);
  --step-6:  clamp(3.8rem, 2.17rem + 8.15vw, 8.4rem);

  --sp-s:  clamp(.8rem, .7rem + .4vw, 1rem);
  --sp-m:  clamp(1.25rem, 1.05rem + 1vw, 1.8rem);
  --sp-l:  clamp(2rem, 1.5rem + 2.5vw, 3.4rem);
  --sp-xl: clamp(3.3rem, 2.3rem + 5vw, 6rem);
  --sp-2xl:clamp(4.5rem, 3rem + 7vw, 9rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--black); }
body{
  margin:0; min-width:20rem;
  background:var(--black); color:var(--bone);
  font-family:var(--serif); font-size:var(--step-0); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
body.menu-open{ overflow:hidden; }
img,svg,iframe{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
p,h1,h2,h3,h4,blockquote,figure,dl,dd,ul,ol{ margin-top:0; }
address{ font-style:normal; }
section,footer{ scroll-margin-top:var(--header-h); }
.mono{ font-family:var(--mono); }
em{ font-style:italic; }
::selection{ background:var(--red); color:#fff; }

:focus-visible{
  outline:3px solid var(--focus); outline-offset:2px;
  box-shadow:0 0 0 6px #141210;
}

.sr-only{
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}
.skip-link{
  position:fixed; top:.75rem; left:.75rem; z-index:1000;
  padding:.7rem 1rem; transform:translateY(-160%);
  background:var(--paper-raised); color:var(--ink);
  font-family:var(--mono); font-size:.82rem; font-weight:700; text-decoration:none;
}
.skip-link:focus{ transform:translateY(0); }

.section-shell{ width:min(calc(100% - 2rem), var(--shell)); margin-inline:auto; }
.reading{ max-width:var(--reading); }

.eyebrow{
  margin-bottom:var(--sp-m); color:var(--red-deep);
  font-size:var(--step--1); font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; line-height:1.5;
}
.eyebrow-light{ color:var(--red-light); }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; min-height:48px; align-items:center; justify-content:center;
  gap:.5rem; padding:.85rem 1.5rem; border:2px solid transparent;
  font-family:var(--mono); font-size:.85rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  text-align:center; cursor:pointer; background:none;
}
.btn-solid{ background:var(--red); border-color:var(--red); color:#fff; }
.btn-solid:hover{ background:var(--red-deep); border-color:var(--red-deep); }
.btn-ink{ border-color:var(--ink); color:var(--ink); }
.btn-ink:hover{ background:var(--ink); color:var(--paper); }
.play-mark{ font-size:.72em; }

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:1.25rem;
  min-height:var(--header-h); padding-inline:var(--pad);
  background:var(--black);
  border-bottom:1px solid #ffffff1f; color:var(--bone);
}
.nav-brand{
  font-family:var(--disp); font-weight:900; font-size:1.5rem; letter-spacing:.04em;
  text-decoration:none; white-space:nowrap;
}
.nav-brand span{ color:var(--red-light); }
.nav-links{ display:flex; margin-left:auto; }
.nav-link{
  display:inline-flex; min-height:44px; align-items:center; padding-inline:.85rem;
  border:0; background:none; cursor:pointer;
  font-family:var(--mono); font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase;
  color:#c9c2b2; text-decoration:none;
  border-bottom:2px solid transparent;
}
.nav-link:hover{ color:var(--bone); border-color:var(--red); }
.nav-donate{
  display:inline-flex; min-height:44px; align-items:center;
  font-family:var(--mono); font-size:.8125rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; background:var(--red); border:1px solid var(--red); text-decoration:none;
  padding:0 1.1rem; white-space:nowrap;
}
.nav-donate:hover{ background:var(--red-deep); border-color:var(--red-deep); }
.nav-toggle{
  display:none; width:48px; height:48px; padding:0; border:0; background:none; cursor:pointer;
}
.nav-toggle span{
  display:block; width:23px; height:2px; margin:6px auto; background:currentColor;
}
.nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

.mobile-menu[hidden]{ display:none; }
.mobile-menu{
  position:fixed; z-index:90; inset:var(--header-h) 0 0; overflow-y:auto;
  background:var(--black); color:var(--bone);
}
.mobile-menu-inner{
  display:flex; flex-direction:column; justify-content:center;
  width:min(calc(100% - 2rem), 36rem); min-height:100%;
  margin-inline:auto; padding-block:2rem 4rem;
}
.mobile-menu-label{
  margin-bottom:1.4rem; color:var(--red-light);
  font-family:var(--mono); font-size:.8125rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.mobile-menu-link{
  display:flex; width:100%; min-height:58px; align-items:center;
  padding:.7rem 0; border:0; border-bottom:1px solid var(--line-dark);
  background:none; color:var(--bone); text-align:left; text-decoration:none; cursor:pointer;
  font-family:var(--disp); font-size:var(--step-2); font-weight:700; text-transform:uppercase;
}
.mobile-menu-contact{
  margin-top:2rem; border-bottom:0; color:var(--bone-muted);
  font-family:var(--mono); font-size:.8125rem; text-transform:none;
}

/* ============ HERO ============ */
.hero{
  display:grid; align-items:center; min-height:calc(100svh - 5rem);
  padding:calc(var(--header-h) + 2rem) var(--pad) var(--sp-xl);
  background:
    radial-gradient(ellipse 90% 55% at 78% 18%, #2c1818 0%, transparent 52%),
    radial-gradient(ellipse 120% 70% at 50% -10%, #2a2620 0%, transparent 60%),
    var(--black);
}
.hero-stage{
  width:min(100%, var(--shell)); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(18rem,.98fr);
  gap:clamp(1.75rem, 4vw, 3.5rem); align-items:end;
}
.hero-copy{ min-width:0; }
.hero-docket{
  margin-bottom:clamp(1.25rem, 3.5vh, 2.25rem); color:var(--bone-muted);
  font-size:var(--step--1); letter-spacing:.06em; text-transform:uppercase; line-height:1.55;
}
.docket-status{ color:var(--red-light); font-weight:700; }
.hero-quote{
  margin:0 0 clamp(1.6rem, 4.5vh, 2.75rem);
  padding:0 0 0 1.15rem;
  border-left:3px solid var(--red);
  max-width:40rem;
}
.hero-quote-label{
  margin:0 0 .85rem; color:var(--bone-muted);
  font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase; line-height:1.5;
}
.hero-quote-label span{
  color:var(--red-light); font-weight:700; margin-right:.75rem; letter-spacing:.14em;
}
.hero-quote blockquote{ margin:0; }
.hero-quote blockquote p{
  margin:0 0 .9rem;
  font-family:var(--serif); font-size:clamp(1.85rem, 1.15rem + 2.6vw, 3.55rem);
  font-weight:600; font-style:italic; line-height:1.18; letter-spacing:-.02em;
  color:var(--bone); text-wrap:balance;
}
.hero-quote figcaption{
  font-size:.8125rem; letter-spacing:.04em; color:var(--bone-muted); line-height:1.7;
}
.hero-title{
  margin:0 0 .7rem; font-family:var(--disp); font-weight:900; text-transform:uppercase;
  font-size:clamp(3.4rem, 9.5vw, 7.8rem); line-height:.86; letter-spacing:.005em;
}
.hero-title .line{ display:block; }
.hero-title em{
  font-style:normal; font-weight:700; color:var(--red-light);
  font-size:.4em; vertical-align:.55em; letter-spacing:.1em; margin-right:.08em;
}
.hero-sub{
  margin-bottom:clamp(1.4rem, 3.5vh, 2.25rem); color:var(--bone-muted);
  font-size:.85rem; letter-spacing:.26em; text-transform:uppercase;
}

/* ============ REDACTION (signature) ============ */
.redact{
  position:relative; display:inline;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
/* bars exist only with JS + motion allowed; see media block below */

/* ============ POSTER (hero frame) ============ */
.poster{
  position:relative; display:block; width:100%;
  padding:0; border:1px solid #ffffff26; background:#000; cursor:pointer; overflow:hidden;
  appearance:none; -webkit-appearance:none;
}
.hero-poster{
  min-width:0;
  box-shadow:0 28px 50px -18px #000000c2;
}
.poster img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; opacity:.88; }
.poster:hover img{ opacity:1; }
.poster-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:4.75rem; height:4.75rem; display:grid; place-items:center;
  background:var(--red); color:#fff; border-radius:50%;
  box-shadow:0 0 0 10px #b3263240;
}
.poster:hover .poster-play{ box-shadow:0 0 0 16px #b3263240; }
.poster-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:.55rem .9rem; text-align:left;
  background:linear-gradient(transparent, #000000d9);
  color:#d8d2c2; font-size:.8125rem; letter-spacing:.16em; text-transform:uppercase;
}

/* ============ FILE SECTIONS (paper) ============ */
.file{ background:var(--black); padding:0 var(--pad); }
.file-tab{
  display:block; width:max-content; max-width:100%;
  margin:var(--sp-2xl) auto 0; margin-left:max(0px, calc((100% - var(--shell)) / 2));
  padding:.8rem 1.4rem .6rem;
  background:var(--paper); color:var(--ink);
  font-size:.8125rem; letter-spacing:.16em; text-transform:uppercase;
  border-radius:8px 8px 0 0;
}
.file-tab b{ font-weight:700; color:var(--red-deep); margin-right:.5rem; }
.paper{
  position:relative; max-width:var(--shell); margin-inline:auto;
  background:var(--paper); color:var(--ink);
  padding:clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 5vw, 5rem);
  box-shadow:0 30px 60px -20px #000000cc;
}
.paper::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.17 0 0 0 0 0.12 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)'/%3E%3C/svg%3E");
}
.paper > *{ position:relative; }

.file-head{
  margin-bottom:var(--sp-m); font-family:var(--disp); font-weight:900; text-transform:uppercase;
  font-size:var(--step-5); line-height:.94; letter-spacing:-.005em; color:var(--ink);
}
.lede{
  max-width:var(--reading); margin-bottom:var(--sp-l);
  font-size:var(--step-1); line-height:1.55; font-weight:600;
}
.reading p{ margin-bottom:1.15em; color:#332d24; }
.reading strong{ color:var(--red-deep); font-weight:700; }

/* fact register */
.fact-register{
  display:grid; grid-template-columns:repeat(4, 1fr);
  margin:var(--sp-l) 0 var(--sp-xl);
  border-top:2px solid var(--ink); border-bottom:1px solid var(--ink);
}
.fact-register > div{ min-width:0; padding:var(--sp-m); border-right:1px solid #26211a40; }
.fact-register > div:first-child{ padding-left:0; }
.fact-register > div:last-child{ border-right:0; }
.fact-register dt{
  margin-bottom:.35rem; color:var(--red-deep);
  font-family:var(--disp); font-weight:900; font-size:var(--step-3); line-height:.9; letter-spacing:-.02em;
}
.fact-register dd{
  margin-left:0; max-width:18ch; color:var(--ink-muted);
  font-size:.8125rem; line-height:1.5; letter-spacing:.04em; text-transform:uppercase;
}

/* timeline */
.timeline-heading{ margin-bottom:var(--sp-l); }
.timeline-title{
  margin-bottom:0; font-family:var(--disp); font-weight:900; text-transform:uppercase;
  font-size:var(--step-4); line-height:1;
}
.timeline{ position:relative; list-style:none; margin:0; padding:0; max-width:64rem; }
.timeline::before{
  content:""; position:absolute; top:.5rem; bottom:0; left:9.5rem; width:1px; background:var(--ink);
}
/* progress rail: red line fills the chronology as it is read (scaleY set by JS) */
.timeline::after{
  content:""; position:absolute; top:.5rem; bottom:0; left:9.5rem; width:1px;
  background:var(--red); transform-origin:top center;
  transform:scaleY(var(--progress, 0));
}
.fact-register dt{ font-variant-numeric:tabular-nums; }
.tl{
  position:relative; display:grid; grid-template-columns:9.5rem minmax(0,1fr);
  padding-bottom:var(--sp-xl);
}
.tl::before{ /* marker */
  content:""; position:absolute; z-index:1; top:.4rem; left:calc(9.5rem - 4px);
  width:9px; height:9px; border-radius:50%;
  background:var(--red); border:2px solid var(--paper); box-shadow:0 0 0 1px var(--ink);
}
.tl-today::before{ width:15px; height:15px; left:calc(9.5rem - 7px); background:var(--ink); }
.tl-date{
  padding-right:var(--sp-m); padding-top:.15rem; color:var(--red-deep);
  font-size:.8125rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; line-height:1.5;
}
.tl-body{ min-width:0; max-width:var(--reading); padding-left:var(--sp-l); }
.tl-body h4{
  margin-bottom:.6rem; font-family:var(--serif); font-size:var(--step-1); font-weight:700; line-height:1.25;
}
.tl-body p{ color:#332d24; margin-bottom:0; }
.tl-body h4 + p{ margin-top:0; }
.hl-red{ color:var(--red-deep); font-weight:700; }
.verdict-chip{
  display:inline-block; font-family:var(--mono); font-size:.8125rem; font-weight:700;
  text-transform:uppercase; color:var(--red-deep); border:2px solid var(--red-deep);
  padding:.15em .5em; margin-left:.6em; transform:rotate(-2deg); vertical-align:middle;
}
.tl-today h4{ color:var(--red-deep); }
.tl-quote blockquote{
  margin:0; padding:.15rem 0 .15rem 1.05rem;
  border-left:3px solid var(--red-deep);
}
.tl-quote blockquote p{
  margin-bottom:.8rem; color:var(--ink);
  font-family:var(--serif); font-size:var(--step-3); font-weight:600;
  font-style:italic; line-height:1.22; letter-spacing:-.015em;
}
.tl-quote cite{
  display:block; color:var(--ink-muted); font-style:normal;
  font-size:.8125rem; line-height:1.65; letter-spacing:.03em;
}
.source-note{
  margin-top:1rem; padding-top:1rem; border-top:1px solid #26211a38;
  color:var(--ink-muted); font-size:.8125rem; line-height:1.65;
}

/* ============ FILM (dark) ============ */
.film{ padding:var(--sp-2xl) var(--pad); background:var(--coal); }
.film-layout{
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(17rem,.7fr); gap:var(--sp-xl);
}
.dark-head{
  margin-bottom:var(--sp-m); font-family:var(--disp); font-weight:900; text-transform:uppercase;
  font-size:var(--step-5); line-height:.94; color:var(--bone);
}
.film-copy{ max-width:var(--reading); }
.film-lede{ font-size:var(--step-1); line-height:1.55; color:var(--bone); margin-bottom:1.15em; }
.film-copy p:not(.eyebrow):not(.film-lede){ color:#cfc9ba; margin-bottom:1.15em; }
.film-quote{
  grid-column:1 / -1; display:grid; align-items:end; gap:var(--sp-l);
  grid-template-columns:minmax(0,1fr) minmax(14rem,.38fr);
  margin:var(--sp-m) 0 0; padding:var(--sp-l) 0;
  border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
}
.film-quote blockquote{ margin:0; }
.film-quote blockquote p{
  margin:0; max-width:22ch; font-family:var(--serif); font-weight:600; font-style:italic;
  font-size:var(--step-4); line-height:1.12; color:var(--bone); letter-spacing:-.01em;
}
.film-quote figcaption{ color:var(--bone-muted); font-size:.8125rem; line-height:1.65; }
.director-card{
  grid-row:1; grid-column:2; align-self:start;
  padding:var(--sp-m); border-top:3px solid var(--red); background:#262119;
}
.director-name{
  margin-bottom:var(--sp-m); font-family:var(--disp); font-weight:900; text-transform:uppercase;
  font-size:var(--step-3); line-height:.98; color:var(--bone);
}
.director-name span{
  display:block; margin-top:.25rem; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:var(--step-0); color:var(--bone-muted); text-transform:none;
}
.director-card p:not(.eyebrow){ color:#cfc9ba; font-size:.98rem; }
.director-card a{
  display:inline-flex; min-height:44px; align-items:center;
  color:var(--red-light); font-size:.8125rem; overflow-wrap:anywhere;
}

/* ============ APPARATUS (dossiers) ============ */
.dossier-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1.25rem; margin-bottom:var(--sp-xl);
}
.dossier{
  background:var(--paper-raised); border:1px solid #26211a4d;
  border-top:4px solid var(--red); padding:1.5rem 1.5rem 1.25rem;
  box-shadow:2px 3px 0 #26211a1a;
}
.dossier-code{
  margin-bottom:.2rem; color:var(--red-deep);
  font-size:.8125rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.dossier h3{
  margin:0 0 .15rem; font-family:var(--disp); font-weight:900; text-transform:uppercase;
  font-size:var(--step-2); line-height:.95;
}
.dossier-role{
  margin-bottom:1rem; font-style:italic; color:var(--ink-muted); font-size:var(--step-0);
}
.dossier ul{ list-style:none; margin:0; padding:0; }
.dossier li{
  padding:.55rem 0; border-top:1px dashed #26211a38;
  font-size:.95rem; line-height:1.55; color:#332d24;
}
.dossier li strong{ color:var(--red-deep); font-weight:700; }
.dossier .src{
  display:block; margin-top:.25rem; color:var(--ink-muted);
  font-size:.8125rem; letter-spacing:.04em;
}
.apparatus-close{
  margin:0 0 var(--sp-l); padding:var(--sp-l) 0 var(--sp-m);
  border-top:2px solid var(--ink);
  max-width:56rem;
}
.apparatus-close blockquote{ margin:0 0 .8rem; }
.apparatus-close blockquote p{
  margin:0; font-family:var(--serif); font-size:var(--step-3); font-weight:600;
  line-height:1.22; letter-spacing:-.015em; color:var(--ink);
}
.apparatus-close figcaption{ color:var(--ink-muted); font-size:.8125rem; letter-spacing:.04em; }
.apparatus-note{
  max-width:var(--reading); color:var(--ink-muted);
  font-size:.8125rem; line-height:1.7; letter-spacing:.03em;
}

/* SMS exhibit — the handler and his informant, verbatim */
.sms-exhibit{ margin:0 0 var(--sp-xl); max-width:34rem; }
.sms-head{
  display:flex; flex-direction:column; gap:.15rem;
  margin-bottom:1.1rem; padding-bottom:.6rem;
  border-bottom:2px solid var(--ink);
  color:var(--ink); font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase;
}
.sms-head .sms-when{ color:var(--red-deep); font-weight:700; }
.sms-thread{ display:flex; flex-direction:column; gap:1.1rem; }
.sms-msg{ max-width:88%; }
.sms-agent{ align-self:flex-start; }
.sms-informant{ align-self:flex-end; text-align:right; }
.sms-meta{
  margin:0 0 .3rem; color:var(--ink-muted);
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
}
.sms-bubble{
  display:inline-block; margin:0; padding:.65rem 1rem;
  font-family:var(--mono); font-size:var(--step-0); line-height:1.45; text-align:left;
}
.sms-agent .sms-bubble{
  background:var(--ink); color:var(--bone);
  border-radius:2px 10px 10px 10px;
}
.sms-informant .sms-bubble{
  background:var(--paper-raised); color:var(--ink);
  border:1px solid #26211a4d; border-radius:10px 2px 10px 10px;
  box-shadow:2px 3px 0 #26211a1a;
}
.sms-punch .sms-bubble{
  background:var(--red); color:var(--bone);
  font-size:var(--step-2); font-weight:700; line-height:1.1;
  padding:.55rem 1rem .5rem;
}
.sms-note{
  margin-top:1.1rem; max-width:var(--reading); color:var(--ink-muted);
  font-size:.8125rem; line-height:1.7; letter-spacing:.03em;
}
.sms-thread .sms-msg:nth-child(2){ transition-delay:240ms; }
.sms-thread .sms-msg:nth-child(3){ transition-delay:700ms; }

/* ============ PAGE HEADS (sub-pages) ============ */
.page-head .paper{ padding-top:clamp(2rem, 5vh, 3.25rem); }
.page-head .eyebrow{ margin-bottom:.55rem; }
h1.file-head{ margin-bottom:var(--sp-m); }

/* ============ NEXT STEPS (cross-references between pages) ============ */
.next-steps{
  display:grid; gap:.85rem; margin-top:var(--sp-xl);
  grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
  border-top:2px solid var(--ink); padding-top:var(--sp-l);
}
.next-step{
  display:flex; flex-direction:column; gap:.3rem;
  padding:1rem 1.1rem; text-decoration:none;
  background:var(--paper-raised); border:1px solid #26211a33;
  border-left:4px solid var(--ink);
  transition:border-color 140ms ease, transform 140ms ease;
}
.next-step:hover, .next-step:focus-visible{ border-left-color:var(--red); transform:translateX(2px); }
.next-step-label{
  color:var(--ink-muted); font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase;
}
.next-step-title{
  font-family:var(--serif); font-size:var(--step-0);
  line-height:1.35; color:var(--ink);
}
.next-step-title::after{ content:" →"; color:var(--red-deep); }
.next-step-primary{ border-left-color:var(--red); background:#f4eeddff; }
.next-step-primary .next-step-label{ color:var(--red-deep); font-weight:700; }

/* ============ OUTCOME REGISTER (all fourteen) ============ */
.register-wrap{ overflow-x:auto; margin:var(--sp-l) 0 var(--sp-m); }
.register{
  width:100%; border-collapse:collapse; min-width:38rem;
  font-size:.9375rem; background:var(--paper-raised);
}
.register thead th{
  text-align:left; padding:.6rem .8rem;
  font-family:var(--mono); font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone); background:var(--ink);
}
.register tbody th, .register tbody td{
  padding:.7rem .8rem; border-top:1px solid #26211a26; vertical-align:top; color:#332d24;
}
.register tbody th{
  text-align:left; font-family:var(--serif); font-weight:700;
  font-size:var(--step-0); color:var(--ink); white-space:nowrap;
}
.register tbody td:nth-child(2){
  font-family:var(--mono); font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted);
}
/* Status accent rides on a custom property so it never fights column rules.
   Colour is decoration only: the Disposition column always states the outcome. */
.register{ --accent:var(--ink-muted); }
.reg-acquitted{ --accent:#2f6b3a; }
.reg-convicted{ --accent:var(--red-deep); }
.reg-vacated  { --accent:#9a6a12; }
.reg-plea     { --accent:var(--ink-muted); }
.register tbody th{ border-left:4px solid var(--accent); }
.register tbody tr:hover{ background:#26211a0a; }

/* ============ PRODUCTION CREDITS ============ */
.crew{
  margin-top:1.1rem; padding-top:.9rem;
  border-top:1px solid #ffffff26;
  display:grid; gap:.4rem;
}
.crew > div{ display:flex; gap:.6rem; align-items:baseline; justify-content:space-between; }
.crew dt{
  color:var(--bone-muted); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
}
.crew dd{ margin:0; color:var(--bone); font-size:.8125rem; letter-spacing:.04em; text-align:right; }

/* ============ GHOST BUTTON ============ */
.btn-ghost{
  border:2px solid currentColor; background:transparent; color:var(--bone);
}
.btn-ghost:hover, .btn-ghost:focus-visible{ background:var(--bone); color:var(--black); }
.film-more{ margin-top:var(--sp-m); }

/* ============ B-ROLL BANDS (silent loops from the film) ============ */
.broll{
  position:relative; overflow:hidden; line-height:0;
  background:var(--black); border-block:1px solid var(--line-dark);
}
.broll-media{
  display:block; width:100%; height:auto;
  aspect-ratio:17/9; max-height:90vh;
  object-fit:cover; opacity:.8;
}
.broll::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, #141210 0%, #14121000 16%, #14121000 78%, #141210cc 100%);
}
.broll-tag{
  position:absolute; z-index:2; left:var(--pad); bottom:1rem; line-height:1.4;
  color:var(--bone-muted); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
}
.broll-tag::before{ content:"▸ "; color:var(--red-light); }

/* ============ STILLS (from the film) ============ */
.stills{
  padding:var(--sp-2xl) var(--pad); background:var(--black);
  border-top:1px solid var(--line-dark);
}
.stills .dark-head{ font-size:var(--step-4); }
.stills-lede{
  max-width:var(--reading); margin-bottom:var(--sp-l);
  font-size:var(--step-1); line-height:1.55; color:#cfc9ba;
}
.filmstrip{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(1rem, 2.5vw, 2rem);
}
.filmstrip figure{ margin:0; }
.filmstrip img{
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border:1px solid #ffffff26; background:#000; opacity:.88;
}
.filmstrip li:hover img{ opacity:1; }
.filmstrip figcaption{
  padding:.65rem .2rem 0; color:var(--bone-muted);
  font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase;
}
.filmstrip figcaption::before{ content:"▸ "; color:var(--red-light); }

/* ============ FUND ============ */
.paper-fund{ background:var(--paper-raised); border-left:clamp(.45rem, 1vw, .85rem) solid var(--red); }
.fund-layout{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(16rem,.6fr);
  gap:var(--sp-xl); align-items:start;
}
.fund-list{
  list-style:none; margin:0 0 var(--sp-l); padding:0; max-width:34rem;
}
.fund-list li{
  display:flex; align-items:baseline; gap:1rem;
  padding:.7rem 0; border-bottom:1px dashed #26211a40;
  font-weight:600;
}
.fund-list li::before{ content:"—"; color:var(--red-deep); }
.campaign-url{
  display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin:var(--sp-m) 0 0;
  color:var(--ink-muted); font-size:.8125rem; overflow-wrap:anywhere; letter-spacing:.04em;
}
.fund-byline{
  margin:-1rem 0 var(--sp-m); max-width:var(--reading);
  font-family:var(--mono); font-size:.8125rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-muted);
}
.campaign-url span{ color:var(--red-deep); font-weight:700; text-transform:uppercase; }
.check-card{
  padding:var(--sp-l); border:1px solid var(--ink); background:var(--paper);
}
.check-card h3{ margin-bottom:.7rem; font-size:var(--step-1); }
.check-card address{ font-size:.9rem; line-height:1.75; }

/* ============ WRITE ============ */
.mail-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr));
  gap:1.25rem; margin-bottom:var(--sp-xl);
}
.mail-card{
  display:flex; flex-direction:column;
  background:var(--paper-raised); border:1px solid #26211a4d;
  padding:1.5rem; box-shadow:2px 3px 0 #26211a1a;
}
.mail-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  margin-bottom:1.1rem; min-height:4.4rem;
}
.mail-num{ margin-bottom:.2rem; color:var(--red-deep); font-size:.8125rem; font-weight:700; }
.mail-card h3{
  margin:0; font-family:var(--disp); font-weight:900; text-transform:uppercase;
  font-size:var(--step-2); line-height:.95;
}
.mail-flag{
  max-width:17ch; margin:0; text-align:right; color:var(--red-deep);
  font-size:.8125rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; line-height:1.5;
}
.postal{ margin-bottom:1.25rem; font-size:.86rem; line-height:1.8; color:#332d24; }
.copy-address{
  display:inline-flex; min-height:46px; align-items:center; align-self:flex-start; margin-top:auto;
  padding:.7rem 0; border:0; border-bottom:2px solid var(--red); background:none;
  color:var(--ink); font-size:.8125rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
}
.copy-address:hover{ color:var(--red-deep); }
.mail-rules{ background:var(--coal); color:var(--bone); border:0; }
.mail-rules h3{
  margin-bottom:1rem; font-family:var(--disp); font-weight:900; text-transform:uppercase;
  font-size:var(--step-2); color:var(--bone);
}
.mail-rules ul{ list-style:none; margin:0; padding:0; }
.mail-rules li{
  padding:.5rem 0; border-bottom:1px dashed #ffffff26;
  font-size:.92rem; line-height:1.55; color:#d5cebd;
}
.mail-rules li:last-child{ border-bottom:0; }
.mail-rules b{ color:var(--bone); }
.family-support{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-l); flex-wrap:wrap;
  margin-bottom:var(--sp-xl); padding:var(--sp-l) 0;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
}
.family-support h3{ margin-bottom:.35rem; font-size:var(--step-2); }
.family-support p:last-child{ margin-bottom:0; color:#332d24; }
.write-close{ text-align:center; padding-top:var(--sp-m); }
.write-close > p.mono{
  margin-bottom:var(--sp-m); color:var(--red-deep);
  font-size:var(--step--1); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.write-close-head{
  margin:0; font-family:var(--disp); font-weight:900; text-transform:uppercase;
  font-size:var(--step-6); line-height:.86; letter-spacing:-.01em; color:var(--ink);
}

/* ============ PRESS (dark) ============ */
.press{ padding:var(--sp-2xl) var(--pad); background:var(--black); border-top:1px solid var(--line-dark); }
.press .dark-head{ font-size:var(--step-4); }
.press-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); list-style:none; margin:0; padding:0;
  border-top:1px solid var(--line-dark); border-left:1px solid var(--line-dark);
}
.press-grid li{ display:grid; border-right:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); }
.press-grid a{
  display:flex; flex-direction:column; gap:.7rem; min-height:10rem;
  padding:var(--sp-m); text-decoration:none;
}
.press-grid a:hover{ background:#ffffff0a; }
.press-outlet{
  color:var(--red-light); font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.press-title{ font-size:var(--step-0); line-height:1.4; color:var(--bone); max-width:26ch; }
.press-act{
  margin-top:auto; color:var(--bone-muted); font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase;
}
.press-grid a:hover .press-act{ color:var(--red-light); }
.press-contact{ margin:var(--sp-m) 0 0; color:var(--bone-muted); font-size:.8125rem; }
.press-contact a{ display:inline-flex; min-height:44px; align-items:center; color:var(--red-light); }

/* ============ FOOTER ============ */
.footer{ padding:var(--sp-xl) var(--pad) var(--sp-l); background:var(--coal); border-top:1px solid var(--line-dark); }
.footer-grid{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-l); flex-wrap:wrap;
  max-width:var(--shell); margin:0 auto var(--sp-l);
}
.footer-brand{
  margin-bottom:.4rem; font-family:var(--disp); font-weight:900; text-transform:uppercase;
  font-size:var(--step-2); line-height:1;
}
.footer-brand em{ font-style:normal; font-weight:700; color:var(--red-light); font-size:.55em; }
.footer-tag{ margin:0; color:#c4bba8; font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; }
.footer-links{ display:flex; flex-wrap:wrap; gap:0 1.25rem; }
.footer-links a, .footer-links button{
  display:inline-flex; min-height:44px; align-items:center; padding:0; border:0; background:none; cursor:pointer;
  color:#c9c2b2; font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  border-bottom:1px solid transparent;
}
.footer-links a:hover, .footer-links button:hover{ color:var(--bone); border-color:var(--red); }
.footer-fine{
  max-width:var(--shell); margin:0 auto .5rem;
  color:#a39b88; font-size:.8125rem; line-height:1.7; letter-spacing:.03em;
}

/* ============ TRAILER DIALOG ============ */
.trailer-dialog{
  width:min(calc(100% - 1.5rem), 70rem); max-width:none;
  max-height:calc(100dvh - 1.5rem); margin:auto; padding:0; overflow:auto;
  border:1px solid #444840; background:var(--black); color:var(--bone);
}
.trailer-dialog::backdrop{ background:#000000e0; }
.trailer-dialog-shell{ padding:clamp(.8rem, 2vw, 1.5rem); }
.trailer-dialog-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  min-height:58px; margin-bottom:.8rem;
}
.trailer-dialog-header .eyebrow{ margin-bottom:.25rem; }
.trailer-dialog-header h2{
  margin:0; font-family:var(--disp); font-weight:900; text-transform:uppercase;
  font-size:var(--step-2); line-height:1;
}
.dialog-close{
  display:grid; place-items:center; width:48px; height:48px; flex:0 0 auto;
  padding:0; border:1px solid #575b53; background:none; cursor:pointer; color:var(--bone);
}
.dialog-close span{ font-size:2rem; font-weight:300; line-height:1; font-family:Arial, sans-serif; }
.video-frame{ position:relative; aspect-ratio:16/9; background:#050505; overflow:hidden; }
.video-frame iframe{ width:100%; height:100%; border:0; }
.trailer-fallback{ margin:0; padding-top:.8rem; color:var(--bone-muted); font-size:.8125rem; }
.trailer-fallback a{ display:inline-flex; min-height:44px; align-items:center; color:var(--red-light); }

/* ============ RESPONSIVE ============ */
@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-donate{ margin-left:auto; }
  .nav-toggle{ display:block; }
  .hero-stage{ grid-template-columns:1fr; }
  .hero-poster{ max-width:42rem; }
  .fact-register{ grid-template-columns:repeat(2, 1fr); }
  .fact-register > div{ border-bottom:1px solid #26211a40; }
  .fact-register > div:nth-child(2){ border-right:0; }
  .fact-register > div:nth-child(3){ padding-left:0; }
  .fact-register > div:nth-child(3),
  .fact-register > div:nth-child(4){ border-bottom:0; }
  .film-layout, .fund-layout{ grid-template-columns:1fr; }
  .film-quote{ grid-template-columns:1fr; }
  .director-card{ grid-row:auto; grid-column:auto; max-width:var(--reading); }
  .press-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-height: 700px){
  .hero{ min-height:auto; padding-block:calc(var(--header-h) + 1.5rem) 2rem; }
  .hero-docket{ margin-bottom:1rem; }
  .hero-quote{ margin-bottom:1.25rem; }
  .hero-quote blockquote p{ font-size:clamp(1.65rem, 3.4vw, 2.6rem); }
  .hero-title{ font-size:clamp(2.8rem, 8vw, 5.2rem); }
}
@media (max-width: 640px){
  :root{ --header-h:4rem; }
  .hero-title{ font-size:clamp(3.2rem, 16vw, 5.8rem); }
  .hero-quote{ padding-left:.9rem; }
  .timeline::before{ left:4px; }
  .timeline::after{ left:4px; }
  .tl{ display:block; padding-left:1.6rem; }
  .tl::before{ left:0; }
  .tl-today::before{ left:-3px; }
  .tl-date{ display:block; margin-bottom:.6rem; padding-right:0; }
  .tl-body{ padding-left:0; }
  .tl-quote blockquote p{ font-size:var(--step-2); }
  .press-grid{ grid-template-columns:1fr; }
  .press-grid a{ min-height:0; }
  .filmstrip{ grid-template-columns:1fr; }
  .dossier-grid{ grid-template-columns:1fr; }
  .family-support{ align-items:stretch; flex-direction:column; }
  .family-support .btn{ width:100%; }
  .footer-grid{ flex-direction:column; }
  .trailer-dialog{ width:calc(100% - .75rem); max-height:calc(100dvh - .75rem); }
}

/* ============ MOTION (opt-in) ============ */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
  .btn, .nav-link, .nav-donate, .footer-links a, .footer-links button,
  .copy-address, .dialog-close, .mobile-menu-link, .poster img, .poster-play{
    transition:color 180ms ease, background-color 180ms ease, border-color 180ms ease,
      opacity 250ms ease, box-shadow 250ms ease, transform 180ms ease;
  }
  .nav-toggle span{ transition:transform 220ms ease; }
  .trailer-dialog[open]{ animation:dialog-enter 240ms ease both; }
  .trailer-dialog[open]::backdrop{ animation:backdrop-enter 240ms ease both; }

  .js [data-motion]{
    opacity:0; transform:translateY(14px);
    transition:opacity 420ms ease, transform 420ms ease;
  }
  .js [data-motion].is-visible{ opacity:1; transform:none; }

  .js [data-paper-lift],
  .js [data-paper-lift] + .paper{
    transform:translateY(20px);
    transition:transform 560ms ease-out;
  }
  .js [data-paper-lift].is-visible,
  .js [data-paper-lift].is-visible + .paper{ transform:none; }

  /* Redaction as the span's OWN background — box-decoration-break:clone paints
     the bar per line-fragment, so coverage is exact at any size/wrap/viewport
     (an absolutely-positioned overlay cannot follow wrapped inline fragments).
     Reveal: bar retracts left→right, ink follows. */
  .js .redact{
    color:transparent;
    padding:.08em .14em; margin-inline:-.14em;
    border-radius:1px;
    background-image:linear-gradient(var(--redact-bar, var(--ink)), var(--redact-bar, var(--ink)));
    background-repeat:no-repeat;
    background-position:right center;
    background-size:100% 100%;
    box-shadow:inset 0 0 0 1px var(--redact-edge, transparent);
    transition:
      background-size 480ms cubic-bezier(.65,0,.35,1),
      color 260ms ease 320ms,
      box-shadow 200ms ease 200ms;
  }
  .js .is-visible .redact,
  .js .redact.is-visible{
    color:inherit;
    background-size:0% 100%;
    box-shadow:inset 0 0 0 1px transparent;
  }
  .js .hero-quote .redact.r1{ transition-delay:520ms, 840ms, 720ms; }
  .js .hero-quote .redact.r2{ transition-delay:820ms, 1140ms, 1020ms; }
  .hero, .film{ --redact-bar:#080706; --redact-edge:#ffffff30; }

  /* Directed hero entrance — one orchestrated beat, transform/opacity only.
     (The hero sequence is the single sanctioned >1s moment.) */
  @keyframes rise-in{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:none; }
  }
  .js .hero-docket{ animation:rise-in 420ms ease-out both; }
  .js .hero-quote-label{ animation:rise-in 420ms ease-out 120ms both; }
  .js .hero-quote blockquote{ animation:rise-in 480ms ease-out 220ms both; }
  .js .hero-quote figcaption{ animation:rise-in 480ms ease-out 320ms both; }
  .js .hero-title{ animation:rise-in 540ms ease-out 640ms both; }
  .js .hero-sub{ animation:rise-in 420ms ease-out 780ms both; }
  .js .hero-cta{ animation:rise-in 420ms ease-out 880ms both; }
  .js .hero-poster{ animation:rise-in 600ms ease-out 920ms both; }

  .tl.is-visible .verdict-chip{ animation:stamp-in 200ms ease-out both; }
  @keyframes stamp-in{
    from{ transform:scale(1.4) rotate(-6deg); opacity:0; }
    to{ transform:scale(1) rotate(-2deg); opacity:1; }
  }

  @keyframes dialog-enter{
    from{ opacity:0; transform:translateY(10px) scale(.99); }
    to{ opacity:1; transform:none; }
  }
  @keyframes backdrop-enter{ from{ opacity:0; } to{ opacity:1; } }
}

/* ============ PRINT (address sheet) ============ */
@media print{
  .nav, .mobile-menu, .hero, .film, #fund, .press, .footer,
  .copy-address, .family-support, .write-close, .trailer-dialog, .file-tab{
    display:none !important;
  }
  body, .paper{ background:#fff; color:#000; box-shadow:none; }
  .paper::before{ display:none; }
  #record .paper{ display:none; }
  .mail-grid{ display:block; }
  .mail-card{
    break-inside:avoid; margin-bottom:1rem; padding:1rem;
    border:1px solid #000; box-shadow:none; background:#fff;
  }
  .mail-rules{ background:#fff; color:#000; border:1px solid #000; }
  .mail-rules li, .postal{ color:#000; }
}
