/* ==========================================================
   THE LONG DARK — case file stylesheet
   near-black / smoke / harsh white / red exactly twice
   ========================================================== */

:root{
  --ink:    #0a0a0b;   /* the dark */
  --coal:   #121214;   /* document panels */
  --coal-2: #0e0e10;
  --bar:    #1a1a1d;   /* redaction bar */
  --line:   #232327;   /* hairlines */
  --smoke:  #a09d96;   /* body text */
  --fog:    #67655f;   /* dim annotations */
  --paper:  #e9e7e2;   /* harsh white / evidence tags */
  --red:    #b1121b;   /* used exactly twice: .red-1 .red-2 */
  --anton:  "Anton", "Oswald", Impact, sans-serif;
  --oswald: "Oswald", "Arial Narrow", sans-serif;
  --mono:   "Courier Prime", "Courier New", monospace;
  --hw:     "Caveat", cursive;
  --sx: -600px;  /* spotlight coords, driven by JS per element */
  --sy: -600px;
  --spot-r: 200px;
  --ambient: rgba(0,0,0,.12); /* faint floor so hidden layers ghost through */
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--ink);
  color:var(--smoke);
  font-family:var(--oswald);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--paper); color:var(--ink); }

a{ color:var(--paper); text-decoration:none; }

.mono{ font-family:var(--mono); }
.dim{ color:var(--fog); }
.hw{ font-family:var(--hw); font-size:1.5em; color:var(--paper); }

/* the only two drops of red on the site */
.red-1{ color:var(--red); border-color:var(--red); }
.red-2{ color:var(--red); }

/* ---------- film grain + vignette + torch ---------- */
#grain{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:60;
  opacity:.5; mix-blend-mode:overlay;
}
.vignette{
  position:fixed; inset:0; pointer-events:none; z-index:55;
  background:
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);
}
.torch{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(circle 260px at var(--tx,-600px) var(--ty,-600px),
    rgba(233,231,226,.055) 0%, rgba(233,231,226,.02) 45%, transparent 72%);
}

/* ---------- spotlight mask ---------- */
.mask-spot{
  -webkit-mask-image:radial-gradient(circle var(--spot-r) at var(--sx) var(--sy),
      #000 0%, rgba(0,0,0,.78) 45%, rgba(0,0,0,.26) 68%, var(--ambient) 82%);
          mask-image:radial-gradient(circle var(--spot-r) at var(--sx) var(--sy),
      #000 0%, rgba(0,0,0,.78) 45%, rgba(0,0,0,.26) 68%, var(--ambient) 82%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
/* touch devices: no hover to hunt with — lift the ambient floor so the
   locker reads, and let the drifting torch stay the drama, not the gate */
@media (hover: none){
  :root{ --ambient: rgba(0,0,0,.5); }
  .darkroom-faint{ display:none; }
}

/* ---------- header ---------- */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:70;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem clamp(1rem,3vw,2.5rem);
  background:rgba(10,10,11,.82);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  font-size:.72rem; letter-spacing:.14em;
}
.head-case{ color:var(--paper); white-space:nowrap; }
.head-status{ color:var(--fog); white-space:nowrap; }
.head-nav{ display:flex; gap:clamp(.8rem,2.4vw,2rem); }
.head-nav a{
  font-family:var(--oswald); font-weight:500; font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--fog);
  padding:.2rem 0; border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s;
}
.head-nav a:hover, .head-nav a:focus-visible{ color:var(--paper); border-bottom-color:var(--paper); }
.head-nav a.active{ color:var(--paper); border-bottom-color:var(--paper); }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; isolation:isolate;
}
.hero-blinds{
  position:absolute; inset:-20%; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(102deg,
    transparent 0 54px, rgba(233,231,226,.045) 54px 74px,
    rgba(233,231,226,.018) 74px 96px, transparent 96px 150px);
  animation:blinds-drift 26s ease-in-out infinite alternate;
}
@keyframes blinds-drift{
  0%  { transform:translateX(-3.5%) skewX(0deg);   opacity:.85; }
  45% { opacity:1; }
  100%{ transform:translateX(3.5%)  skewX(-1.2deg); opacity:.7; }
}

.hero-hidden{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.clue{
  position:absolute; max-width:34ch;
  font-size:.78rem; letter-spacing:.06em; line-height:1.5;
  color:var(--paper); opacity:.85;
  border-left:2px solid var(--paper); padding-left:.7rem;
  transform:rotate(-.6deg);
}
.clue:nth-child(even){ transform:rotate(.8deg); border-left:0; border-right:2px solid var(--paper); padding-left:0; padding-right:.7rem; text-align:right; }
.clue-ring{
  position:absolute; width:170px; height:110px;
  border:2px solid rgba(233,231,226,.7); border-radius:48% 52% 55% 45%/60% 45% 55% 40%;
  transform:rotate(-8deg);
}
.clue-ring.small{ width:110px; height:76px; transform:rotate(14deg); }

.hero-core{ position:relative; z-index:3; text-align:center; padding:5.5rem 1.25rem 3.5rem; }
.hero-kicker{
  font-size:.72rem; letter-spacing:.3em; color:var(--fog);
  margin-bottom:2rem;
}
.hero-title{
  font-family:var(--anton); font-weight:400;
  font-size:clamp(4.2rem, min(15.5vw, 17vh), 13rem);
  line-height:.88; letter-spacing:.015em;
  color:var(--paper); text-transform:uppercase;
}
.hero-title .line{ display:block; }
/* a streetlight with a bad ballast: one brief stutter every 11s */
.hero-title{ animation:title-flicker 11s steps(1,end) infinite 7s; }
@keyframes title-flicker{
  0%, 60.9%, 63.2%, 100% { opacity:1; }
  61%   { opacity:.42; }
  61.4% { opacity:.94; }
  61.9% { opacity:.3; }
  62.4% { opacity:.88; }
}
.hero-title .line:nth-child(2){ letter-spacing:.06em; }
.hero-sub{
  margin-top:2.4rem; font-size:1rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--smoke);
}
.hero-sub .hw{ letter-spacing:.02em; text-transform:none; vertical-align:-.12em; }
.hero-tag{
  margin-top:1.1rem; font-size:.85rem; font-style:italic;
  letter-spacing:.1em; color:var(--fog);
}
.hero-meta{
  margin-top:2.6rem; display:flex; align-items:center; justify-content:center;
  gap:1.2rem; flex-wrap:wrap; font-size:.75rem; letter-spacing:.2em;
}
.tag{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.22em;
  color:var(--ink); background:var(--paper);
  padding:.28em .7em .22em;
}
.tag.sm{ font-size:.6rem; padding:.24em .55em .18em; margin-right:.6em; }

.hero-hint{
  position:absolute; z-index:3; top:5.2rem; right:clamp(1rem,3vw,2.5rem);
  font-size:.66rem; letter-spacing:.24em; color:var(--fog);
  text-transform:uppercase; animation:hint-pulse 4s ease-in-out infinite;
}
@keyframes hint-pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:.9; } }
.scroll-cue{
  position:absolute; z-index:3; bottom:1.6rem; left:50%; transform:translateX(-50%);
  font-size:.66rem; letter-spacing:.28em; color:var(--fog);
  animation:hint-pulse 3s ease-in-out infinite .8s;
}

/* ---------- ticker ---------- */
.ticker{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; background:var(--coal-2);
  padding:.55rem 0;
}
.ticker-track{
  display:flex; width:max-content;
  font-size:.7rem; letter-spacing:.22em; color:var(--fog); text-transform:uppercase;
  animation:ticker 42s linear infinite;
}
@keyframes ticker{ to{ transform:translateX(-50%); } }

/* ---------- sections ---------- */
section{ position:relative; padding:clamp(4.5rem,8vw,7rem) clamp(1.1rem,5vw,4rem); }
.section-head{
  display:flex; align-items:baseline; gap:1.4rem; flex-wrap:wrap;
  max-width:1100px; margin:0 auto clamp(2.6rem,6vw,4.5rem);
  border-bottom:1px solid var(--line); padding-bottom:1.1rem;
}
.sec-no{
  font-size:.8rem; letter-spacing:.2em; color:var(--fog);
  border:1px solid var(--line); padding:.3em .6em;
}
.sec-title{
  font-family:var(--anton); font-weight:400;
  font-size:clamp(2rem,5.4vw,3.6rem); letter-spacing:.03em;
  color:var(--paper); text-transform:uppercase; line-height:1;
}
.sec-note{ font-size:.72rem; letter-spacing:.18em; color:var(--fog); margin-left:auto; }

/* ---------- report document ---------- */
.report-doc{
  position:relative; max-width:860px; margin:0 auto;
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(233,231,226,.016) 27px 28px),
    linear-gradient(178deg, var(--coal) 0%, var(--coal-2) 100%);
  border:1px solid var(--line);
  padding:clamp(1.6rem,4.5vw,3.2rem) clamp(1.2rem,5vw,3.4rem) clamp(2rem,5vw,3rem) clamp(2.4rem,7vw,4.6rem);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
/* punch holes */
.report-doc::before{
  content:""; position:absolute; left:.95rem; top:0; bottom:0; width:14px;
  background:
    radial-gradient(circle 6px at 7px 18%, var(--ink) 98%, transparent),
    radial-gradient(circle 6px at 7px 50%, var(--ink) 98%, transparent),
    radial-gradient(circle 6px at 7px 82%, var(--ink) 98%, transparent);
}
/* faint ring stain */
.report-doc::after{
  content:""; position:absolute; right:8%; top:4%; width:120px; height:120px;
  border-radius:50%; pointer-events:none;
  border:9px solid rgba(160,157,150,.05);
  filter:blur(1px);
}
.doc-stamp{
  position:absolute; top:2.2rem; right:clamp(.8rem,4vw,2.6rem); z-index:2;
  font-family:var(--oswald); font-weight:600; font-size:clamp(.9rem,2.4vw,1.35rem);
  letter-spacing:.32em; text-transform:uppercase;
  border:3px double currentColor; padding:.32em .8em .26em;
  transform:rotate(7deg); opacity:.9;
  mix-blend-mode:screen;
}
.doc-head{
  border-bottom:2px solid var(--line); padding-bottom:1rem; margin-bottom:1.6rem;
  font-size:.72rem; letter-spacing:.08em; color:var(--fog);
}
.doc-row{ display:flex; flex-wrap:wrap; gap:.35rem 2.2rem; padding:.32rem 0; }
.doc-row.fields{ border-top:1px dashed var(--line); }
.doc-row b{ color:var(--smoke); font-weight:700; margin-right:.45em; }
.doc-hint{ font-size:.68rem; letter-spacing:.18em; color:var(--fog); font-style:italic; margin-bottom:1.4rem; }
.doc-body{ font-size:.92rem; line-height:1.9; letter-spacing:.02em; }
.doc-body p{ margin-bottom:1.35rem; }
.doc-sig{ margin-top:2.2rem; color:var(--fog); letter-spacing:.1em; font-size:.8rem; }
.doc-sig .sig{ display:inline-block; margin-left:1rem; transform:rotate(-4deg); font-size:1.9rem; }

/* redaction bars — box-decoration-break keeps wrapped lines covered */
.redact{ cursor:help; }
.redact-in{
  color:transparent;
  background-image:linear-gradient(#23232b,#23232b);
  background-repeat:no-repeat; background-size:100% 88%; background-position:0 60%;
  box-shadow:inset 0 0 0 1px rgba(233,231,226,.08);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  padding:.05em .25em;
  transition:color .55s ease .18s, background-size .7s cubic-bezier(.77,0,.18,1), box-shadow .5s;
}
.redact:hover .redact-in, .redact:focus-visible .redact-in, .redact.open .redact-in{
  color:var(--paper);
  background-size:0% 88%;
  box-shadow:inset 0 0 0 1px transparent;
}

/* ---------- darkroom / evidence ---------- */
.darkroom{ background:var(--ink); padding-bottom:clamp(3rem,5vw,4rem); }
.dossiers{ padding-top:clamp(3.5rem,6vw,5rem); }
.darkroom-stage{
  position:relative; max-width:1100px; margin:0 auto;
  min-height:520px;
  border:1px solid var(--line);
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(233,231,226,.02), transparent 60%),
    var(--coal-2);
  overflow:hidden;
}
.darkroom-faint{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.72rem; letter-spacing:.3em; color:#3a3936; text-transform:uppercase;
  text-align:center; padding:1rem;
  transition:opacity .8s ease;
}
.darkroom-stage:hover .darkroom-faint{ opacity:0; }
.darkroom-hidden{ position:relative; padding:clamp(2rem,5vw,3.5rem); --spot-r:280px; }
/* faint room furniture so the locker reads as a room, not a void */
.locker-stencil{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.locker-stencil::before{
  content:"LOCKER B-9"; position:absolute; right:-.06em; bottom:-.28em;
  font-family:var(--anton); font-size:clamp(4rem,11vw,8.5rem); letter-spacing:.04em;
  color:transparent; -webkit-text-stroke:1px rgba(233,231,226,.07);
  white-space:nowrap;
}
.locker-stencil::after{
  content:"HALE CO. EVIDENCE — AUTHORIZED PERSONNEL ONLY";
  position:absolute; left:1.1rem; top:.9rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.3em;
  color:rgba(233,231,226,.14);
}
.corner{ position:absolute; width:18px; height:18px; border:1px solid rgba(233,231,226,.22); pointer-events:none; }
.corner.tl{ top:.6rem; left:.6rem; border-right:0; border-bottom:0; }
.corner.tr{ top:.6rem; right:.6rem; border-left:0; border-bottom:0; }
.corner.bl{ bottom:.6rem; left:.6rem; border-right:0; border-top:0; }
.corner.br{ bottom:.6rem; right:.6rem; border-left:0; border-top:0; }
.exhibits{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.2rem,3vw,2.2rem);
}
.exhibit{ border:1px solid var(--line); background:rgba(10,10,11,.6); padding:1.1rem; transition:border-color .35s, transform .35s; }
.exhibit:hover{ border-color:#45454c; transform:translateY(-3px); }
.ex-visual{ color:var(--paper); padding:.8rem .4rem 1rem; }
.ex-visual svg{ display:block; width:100%; height:auto; font-family:var(--mono); }
.exhibit figcaption{
  font-size:.72rem; line-height:1.7; letter-spacing:.05em; color:var(--smoke);
  border-top:1px dashed var(--line); padding-top:.8rem;
}
.darkroom-line{
  margin-top:clamp(2rem,5vw,3rem); text-align:center;
  font-family:var(--anton); font-size:clamp(1.4rem,3.6vw,2.6rem);
  letter-spacing:.08em; color:var(--paper);
}

/* ---------- dossiers ---------- */
.dossier-grid{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.4rem,3vw,2.4rem);
}
.dossier{
  display:grid; grid-template-columns:150px 1fr; gap:1.4rem;
  border:1px solid var(--line); background:var(--coal-2);
  padding:1.4rem; position:relative;
  transition:border-color .4s, transform .4s;
}
.dossier:hover{ border-color:#3c3c40; transform:translateY(-4px); }
.dossier::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, transparent 0 3px, rgba(0,0,0,.12) 3px 4px);
  opacity:0; transition:opacity .4s;
}
.dossier:hover::after{ opacity:1; }
.d-photo{
  position:relative; background:#161618; border:1px solid var(--line);
  min-height:200px; overflow:hidden;
}
.d-photo svg{ position:absolute; inset:0; width:100%; height:100%; }
.d-photo .sil{ fill:#2d2d33; }
.d-photo .sil-hat{ fill:#26262b; }
/* photo corners, like a mounted print */
.d-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(135deg, var(--coal-2) 8px, transparent 8px) top left,
    linear-gradient(225deg, var(--coal-2) 8px, transparent 8px) top right,
    linear-gradient(45deg,  var(--coal-2) 8px, transparent 8px) bottom left,
    linear-gradient(315deg, var(--coal-2) 8px, transparent 8px) bottom right;
  background-size:52% 52%; background-repeat:no-repeat;
}
.d-photo::before{ /* mugshot height lines */
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(180deg, transparent 0 34px, rgba(233,231,226,.07) 34px 35px);
}
.d-num{
  position:absolute; bottom:.5rem; left:.5rem;
  font-size:.62rem; letter-spacing:.2em; color:var(--ink);
  background:var(--paper); padding:.22em .5em;
}
.d-name{
  font-family:var(--anton); font-weight:400; font-size:1.55rem;
  letter-spacing:.04em; color:var(--paper); line-height:1.05;
}
.d-actor{ font-size:.68rem; letter-spacing:.16em; color:var(--fog); text-transform:uppercase; margin:.45rem 0 1rem; }
.d-actor b{ color:var(--smoke); }
.d-fields{ font-size:.74rem; line-height:1.55; }
.d-fields div{ display:grid; grid-template-columns:88px 1fr; gap:.7rem; padding:.34rem 0; border-top:1px dashed var(--line); }
.d-fields dt{ color:var(--fog); letter-spacing:.14em; }
.d-fields dd{ color:var(--smoke); }
.d-quote{
  margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-style:italic; font-size:.8rem;
  color:var(--paper); line-height:1.6;
}

/* ---------- statement ---------- */
.statement{ overflow:hidden; isolation:isolate; background:var(--coal-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.statement-blinds{
  position:absolute; inset:-15%; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(96deg,
    transparent 0 70px, rgba(233,231,226,.05) 70px 92px,
    rgba(233,231,226,.02) 92px 118px, transparent 118px 190px);
  animation:blinds-drift 32s ease-in-out infinite alternate-reverse;
}
.statement .section-head, .statement-body{ position:relative; z-index:1; }
.statement-body{ max-width:760px; margin:0 auto; }
.st-big{
  font-family:var(--anton); font-size:clamp(1.7rem,4.6vw,3.1rem);
  line-height:1.14; letter-spacing:.03em; color:var(--paper);
  margin-bottom:2.2rem;
}
.statement-body p{ margin-bottom:1.5rem; font-size:1.02rem; line-height:1.95; font-weight:300; letter-spacing:.02em; }
.statement-body em{ color:var(--paper); font-style:italic; }
.st-sign{ margin-top:2.6rem; font-size:.74rem; letter-spacing:.24em; color:var(--fog); }

/* ---------- screenings ---------- */
.screen-table{ max-width:1000px; margin:0 auto; border:1px solid var(--line); font-size:.78rem; letter-spacing:.08em; }
.sc-row{
  display:grid; grid-template-columns:110px 170px 1fr 260px; gap:1rem;
  padding:1.05rem 1.3rem; border-bottom:1px solid var(--line); align-items:baseline;
  transition:background .3s, padding-left .3s;
}
.sc-row:last-child{ border-bottom:0; }
.sc-row:not(.sc-head):hover{ background:rgba(233,231,226,.035); padding-left:1.8rem; }
.sc-head{ color:var(--fog); font-size:.64rem; letter-spacing:.26em; background:var(--coal-2); }
.sc-row span:nth-child(1){ color:var(--paper); }
.sc-head span:nth-child(1){ color:var(--fog); }
.sc-row.premiere{ background:rgba(233,231,226,.03); }
.screen-note{
  max-width:1000px; margin:1.4rem auto 0; text-align:right;
  font-size:.72rem; letter-spacing:.2em; color:var(--fog); font-style:italic;
}

/* ---------- footer ---------- */
.site-foot{
  border-top:1px solid var(--line); padding:clamp(3rem,7vw,5rem) clamp(1.1rem,5vw,4rem) 2.4rem;
  background:var(--coal-2); overflow:hidden;
}
.foot-title{
  position:relative;
  font-family:var(--anton); font-size:clamp(3rem,12vw,9.5rem); line-height:.9;
  text-align:center; letter-spacing:.02em;
  color:transparent; -webkit-text-stroke:1px #38383e;
  user-select:none; margin-bottom:clamp(2rem,5vw,3.6rem);
  white-space:nowrap;
}
/* the outline fills with light wherever the torch passes */
.foot-fill{
  position:absolute; inset:0; pointer-events:none;
  color:var(--paper); -webkit-text-stroke:0;
}
.foot-grid{
  max-width:1000px; margin:0 auto 2.6rem;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;
  font-size:.72rem; letter-spacing:.14em;
}
.foot-grid > div{ display:grid; gap:.4rem; border-top:1px solid var(--line); padding-top:.9rem; }
.foot-label{ color:var(--fog); font-size:.62rem; letter-spacing:.24em; }
.foot-grid span:not(.foot-label){ color:var(--smoke); }
.foot-legal{
  max-width:1000px; margin:0 auto; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:1.2rem;
  font-size:.64rem; letter-spacing:.12em; color:var(--fog);
}
.foot-legal a{ color:var(--smoke); border-bottom:1px solid var(--line); transition:color .3s, border-color .3s; }
.foot-legal a:hover{ color:var(--paper); border-color:var(--paper); }

/* ---------- scroll reveals ---------- */
.reveal{
  opacity:0; transform:translateY(26px);
  clip-path:inset(0 0 18% 0);
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1), clip-path .9s cubic-bezier(.22,1,.36,1);
}
.reveal.in{ opacity:1; transform:none; clip-path:inset(0 0 0 0); }
.hero .reveal{ transition-delay:calc(var(--d,0)*120ms); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .hero-blinds, .statement-blinds, .hero-hint, .scroll-cue, .hero-title{ animation:none; }
  .ticker-track{ animation:none; transform:none; }
  #grain{ opacity:.35; }
  .reveal{ opacity:1; transform:none; clip-path:none; transition:none; }
  .mask-spot{ -webkit-mask-image:none; mask-image:none; }
  .hero-hidden{ opacity:.28; }
  .foot-fill{ display:none; }
  .darkroom-faint{ display:none; }
  .redact-in{ transition:none; }
  .dossier, .sc-row{ transition:none; }
  .torch{ display:none; }
}

/* ---------- responsive ---------- */
@media (max-width: 960px){
  .exhibits{ grid-template-columns:repeat(2,1fr); }
  .dossier-grid{ grid-template-columns:1fr; }
  .sc-row{ grid-template-columns:90px 130px 1fr; }
  .sc-row span:nth-child(4){ grid-column:2 / -1; color:var(--fog); }
  .sc-head span:nth-child(4){ display:none; }
}
@media (max-width: 720px){
  .site-head{ font-size:.62rem; padding:.7rem .9rem; justify-content:center; }
  .head-status, .head-case{ display:none; }
  .head-nav{ gap:.85rem; }
  .head-nav a{ font-size:.62rem; letter-spacing:.12em; }
  .hero-hint{ top:auto; bottom:4.4rem; right:50%; transform:translateX(50%); white-space:nowrap; }
  /* keep the hidden layer out of the title's way on small screens */
  .clue{ font-size:.64rem; max-width:24ch; }
  .clue:nth-of-type(3), .clue:nth-of-type(4), .clue:nth-of-type(5), .clue:nth-of-type(6){ display:none; }
  .clue:nth-of-type(1){ top:9% !important; left:6% !important; }
  .clue:nth-of-type(2){ top:15.5% !important; right:5% !important; }
  .clue-ring{ display:none; }
  .sec-note{ margin-left:0; width:100%; }
  .report-doc{ padding-left:2.2rem; }
  .doc-stamp{ top:1.1rem; }
  .doc-sig .sig{ display:block; margin:0.4rem 0 0; }
  .exhibits{ grid-template-columns:1fr; }
  .darkroom-stage{ min-height:420px; }
  .dossier{ grid-template-columns:110px 1fr; gap:1rem; padding:1rem; }
  .d-photo{ min-height:0; height:150px; align-self:start; }
  .d-fields div{ grid-template-columns:74px 1fr; }
  .sc-row{ grid-template-columns:80px 1fr; gap:.5rem .9rem; padding:.9rem 1rem; }
  .sc-row span:nth-child(3){ grid-column:2; color:var(--fog); }
  .sc-row span:nth-child(4){ grid-column:2; }
  .sc-head span:nth-child(3){ display:none; }
  .foot-grid{ grid-template-columns:1fr; gap:1rem; }
  .foot-legal{ flex-direction:column; }
}

/* the second drop of red survives every breakpoint (after media queries so it wins) */
.screen-table .sc-row span.red-2{ color:var(--red); }