/* ==========================================================================
   troll.fan — DOSSIER v3 "THE TAPE"
   An investigative drama publication, not a config file.

   DESIGN SYSTEM
   Palette (semantic, three voices — never a lone acid pop):
     phosphor green  #00ff41  = the archive's voice: structure, facts, cue marks
     amber           #ff8833  = the subject's voice: receipts, defense, first-party
     stamp red       #ff453a  = adjudication only: stamps, verdicts, dead status
     bloom white     #eef8e9  = the brightest phosphor blooms toward white (CRT truth)
     ink stack       #040a05 / #081409 / #0c1f10 — layered depth, no flat black
   Type:
     display = condensed poster gothic (Haettenschweiler/Impact/Avenir Next Cond)
               — tabloid front page x FBI most-wanted, always uppercase, tracked
     body    = monospace — the documentary teletype register
   Signature: the drama timeline as a reel of tape — a ticked phosphor spine,
     solid timecode cue blocks, hazard-stripe act leaders. The verdict is a
     rubber stamp breaking the panel's edge. Zero images; type and CSS carry it.
   Self-contained: no external fonts, scripts, or assets (strict CSP).
   Public token names (--bg --surface --border --text --dim --accent --link etc.)
   are load-bearing — inline style="" attributes in 60 dossiers reference them.
   ========================================================================== */

:root, :root[data-theme="dark"], :root[data-theme="light"] {
  /* public tokens (kept) */
  --bg: #040a05;
  --surface: #081409;
  --surface-2: #0c1f10;
  --border: #1e4d1e;
  --text: #c9d6c6;
  --dim: #8ea78b;
  --accent: #ff6600;
  --accent-dim: #cc5200;
  --red: #ff453a;
  --phosphor: #00ff41;
  --link: #ff8833;
  --white: #ffffff;
  --glow: 0 0 4px rgba(0,255,65,0.30), 0 0 14px rgba(0,255,65,0.10);
  /* v3 tokens */
  --bright: #eef8e9;                 /* blown-out phosphor — display type */
  --hairline: #16371a;               /* structural rules */
  --hairline-soft: #0f2a13;          /* quieter rules on big surfaces */
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, "Courier New", monospace;
  --display: Haettenschweiler, Impact, "Arial Narrow Bold", "Avenir Next Condensed", "Franklin Gothic Medium", "Arial Narrow", sans-serif;
  --measure: 66ch;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html { background: var(--bg); }

body {
  font-family: var(--mono);
  font-size: 1rem;
  background:
    radial-gradient(ellipse 130% 80% at 50% -5%, rgba(0,255,65,0.05), transparent 55%),
    radial-gradient(ellipse 60% 40% at 92% -2%, rgba(255,102,0,0.035), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(150,200,160,0.035) 1px, transparent 1.6px),
    var(--bg);
  background-size: auto, auto, 26px 26px, auto;
  color: var(--text);
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: clip;
}

::selection { background: var(--phosphor); color: #02120a; }

/* CRT atmosphere: scanlines + vignette, both inert overlays */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.10) 3px);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,255,65,0.015), rgba(0,0,0,0.24) 100%);
}

/* Motion is opt-in: everything animated lives inside this gate */
@media (prefers-reduced-motion: no-preference) {
  body::after { animation: crt-flicker 11s steps(1) infinite; }
  .blink { animation: cursor-blink 1.1s steps(1) infinite; }
}
@keyframes crt-flicker {
  0%,100%{opacity:1} 9%{opacity:.9} 9.3%{opacity:1}
  47%{opacity:.94} 47.2%{opacity:1} 81%{opacity:.92} 81.3%{opacity:1}
}
@keyframes cursor-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* --------------------------------------------------------------------------
   Links + focus
   -------------------------------------------------------------------------- */

a { color: var(--link); text-decoration: none; overflow-wrap: anywhere; }
a:hover { text-decoration: underline; text-shadow: 0 0 6px rgba(255,136,51,0.5); }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--phosphor);
  outline-offset: 2px;
  border-radius: 1px;
}

/* --------------------------------------------------------------------------
   Nav — terminal status bar (matches the site shell)
   -------------------------------------------------------------------------- */

nav.site-nav {
  background: rgba(2,10,4,0.92);
  border-bottom: 1px solid var(--hairline);
  padding: 0.65rem 0;
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(4px);
}
nav.site-nav .nav-inner {
  max-width: 960px; margin: 0 auto; padding: 0 1.5rem;
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; align-items: baseline;
}
nav.site-nav a {
  color: var(--text); font-size: 0.78rem; letter-spacing: 0.09em;
  text-transform: uppercase; padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
nav.site-nav a:hover {
  color: var(--phosphor); border-bottom-color: var(--accent);
  text-shadow: var(--glow); text-decoration: none;
}
nav.site-nav a.nav-home {
  color: var(--phosphor); font-weight: bold; font-size: 0.95rem;
  letter-spacing: 0.03em; text-transform: none; margin-right: auto;
  border-bottom: 0; text-shadow: var(--glow);
}
nav.site-nav a.nav-home::before { content: "> "; color: var(--accent); }
nav.site-nav a.nav-cta {
  color: var(--accent); border: 1px solid var(--accent-dim);
  border-radius: 2px; padding: 0.1rem 0.55rem;
}
nav.site-nav a.nav-cta:hover {
  color: #140700; background: var(--accent); border-color: var(--accent); text-shadow: none;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.container { max-width: 960px; margin: 0 auto; padding: 2.2rem 1.5rem 3.5rem; }

/* --------------------------------------------------------------------------
   Case head — the subject wordmark IS the hero. Condensed poster gothic,
   blown to white-hot phosphor with RGB misconvergence fringe. No photo needed.
   -------------------------------------------------------------------------- */

.case-head { padding: 1.6rem 0 0.4rem; }

.dossier-title,
.poster-fields h1 {
  font-family: var(--display);
  font-weight: 700;
  font-synthesis: none;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 0.94;
  color: var(--bright);
  text-wrap: balance;
  overflow-wrap: break-word;
  text-shadow:
    0 0 1px rgba(238,248,233,0.9),
    0 0 22px rgba(0,255,65,0.38),
    0 0 70px rgba(0,255,65,0.16),
    -3px 0 1px rgba(255,64,84,0.13),
    3px 0 1px rgba(64,180,255,0.12);
}

.dossier-title { font-size: clamp(3rem, 11vw, 6.75rem); margin: 0.8rem 0 1rem; }

.dossier-title::before {
  content: "TROLL.FAN \2014  CASE FILE";
  display: block;
  font-family: var(--mono); font-weight: 400;
  font-size: 0.7rem; letter-spacing: 0.45em;
  color: var(--dim); text-shadow: none;
  margin-bottom: 1.2rem;
}

.blink { color: var(--phosphor); text-shadow: 0 0 16px rgba(0,255,65,0.6); }
/* keep the cursor a cursor, not a billboard, inside display-scale titles */
.dossier-title .blink,
.poster-fields h1 .blink { font-size: 0.5em; vertical-align: 0.12em; margin-left: 0.1em; letter-spacing: 0; }

/* factual meta rail under the wordmark (newer pages) */
.case-meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.8rem;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: 0.5rem 0.1rem;
  margin: 0 0 1.5rem;
  font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--dim);
}
.case-meta strong { color: var(--phosphor); font-weight: 400; }

/* the drama hook — the lede, set large */
.poster-hook,
.poster-fields .hook {
  font-size: 1.12rem; line-height: 1.75;
  color: #dfe9db;
  max-width: 62ch;
  margin: 0 0 2.2rem;
}
.poster-hook strong,
.poster-fields .hook strong { color: var(--link); font-style: normal; }

/* --------------------------------------------------------------------------
   Bulletin band (older pages) — wraps honestly, never truncates the record
   -------------------------------------------------------------------------- */

.bolo {
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  color: var(--dim);
  font-size: 0.66rem; letter-spacing: 0.2em; line-height: 2;
  text-transform: uppercase;
  padding: 0.55rem 0.2rem;
  margin: 0.4rem 0 2.4rem;
}
.bolo strong { color: var(--red); text-shadow: 0 0 6px rgba(255,69,58,0.35); }

/* --------------------------------------------------------------------------
   In their own words — first-party record. Amber: the subject's voice.
   The quote is the second-loudest thing on the page, as a drama sheet demands.
   -------------------------------------------------------------------------- */

.ownwords {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  padding: 1.2rem 1.5rem 1.15rem;
  margin: 0 0 2.6rem;
}
.ownwords::before {
  content: "IN THEIR OWN WORDS \2014  FIRST-PARTY RECORD";
  display: block;
  color: var(--dim); font-size: 0.62rem; letter-spacing: 0.32em;
  margin-bottom: 1.1rem;
}
.ow-quote { position: relative; }
.ow-quote + .ow-quote { border-top: 1px dotted var(--hairline); margin-top: 1.2rem; padding-top: 1.2rem; }
.ow-quote blockquote {
  position: relative;
  padding-left: 2.5rem;
  font-size: 1.1rem; line-height: 1.7;
  color: var(--bright);
  max-width: 64ch;
}
.ow-quote blockquote::before {
  content: "\201C";
  position: absolute; left: -0.1rem; top: -0.55rem;
  font-family: var(--display); font-weight: 700; font-synthesis: none;
  font-size: 3.4rem; line-height: 1;
  color: rgba(255,136,51,0.55);
}
.ow-quote blockquote::after { content: ""; }
.ow-attr { color: var(--dim); font-size: 0.75rem; margin-top: 0.5rem; padding-left: 2.5rem; }
.ow-attr::before { content: "\2514\2500 "; color: var(--hairline); }
.ow-attr .ow-handle { color: var(--phosphor); }

/* --------------------------------------------------------------------------
   Subject file panel — a folder with a tab, not a table dump
   -------------------------------------------------------------------------- */

.poster {
  position: relative;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface) 45%);
  box-shadow: 0 0 34px rgba(0,255,65,0.05) inset;
  margin: 3rem 0 1.4rem;
}
.poster::before {
  content: "SUBJECT FILE";
  position: absolute; left: -1px; bottom: calc(100% - 1px);
  background: var(--surface-2);
  border: 1px solid var(--border); border-bottom: none;
  color: var(--dim); font-size: 0.6rem; letter-spacing: 0.32em;
  padding: 0.36rem 1rem 0.3rem;
}

.poster-grid { display: block; }
.poster-fields { padding: 1.5rem 1.7rem 1.2rem; min-width: 0; }
.poster-fields h1 { font-size: clamp(2.3rem, 7vw, 3.9rem); margin-bottom: 1.1rem; }

.field-row {
  display: grid; grid-template-columns: 11ch minmax(0,1fr); gap: 0 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dotted var(--hairline-soft);
  font-size: 0.88rem;
}
.field-row:last-child { border-bottom: none; }
.field-row dt {
  color: var(--dim); font-size: 0.6rem; letter-spacing: 0.24em;
  padding-top: 0.35em; white-space: normal; line-height: 1.3; overflow-wrap: break-word;
}
.field-row dd { color: var(--text); }
.field-row dd strong { color: var(--bright); }
.field-row dd .status-dead,
.status-dead {
  color: var(--red); font-weight: bold; letter-spacing: 0.08em;
  text-shadow: 0 0 6px rgba(255,69,58,0.35);
}

/* evidence-tier chips */
.chip {
  display: inline-block;
  border: 1px solid; border-radius: 2px;
  font-size: 0.55rem; font-weight: bold; letter-spacing: 0.18em;
  padding: 0.08rem 0.42rem;
  vertical-align: 0.14em; margin-left: 0.5em; white-space: nowrap;
}
.chip-fact        { color: var(--phosphor); border-color: rgba(0,255,65,0.5);  background: rgba(0,255,65,0.06); }
.chip-attributed  { color: var(--link);     border-color: rgba(255,136,51,0.5); background: rgba(255,102,0,0.06); }
.chip-testimony   { color: var(--dim);      border-color: var(--hairline); }
.chip-adjudicated { color: var(--red);      border-color: rgba(255,69,58,0.5);  background: rgba(255,69,58,0.06); }

/* charges block (peter-zatko) */
.charges { border-top: 1px solid var(--hairline); padding: 1rem 1.7rem 1.2rem; }
.charges-label { color: var(--dim); font-size: 0.62rem; letter-spacing: 0.28em; margin-bottom: 0.8rem; }
.charges-label::before { content: "# "; color: var(--hairline); }
.charge { display: grid; grid-template-columns: 2.6ch minmax(0,1fr); gap: 0 0.7rem; margin-bottom: 0.75rem; font-size: 0.88rem; }
.charge:last-child { margin-bottom: 0; }
.charge-no { font-family: var(--display); font-weight: 700; font-synthesis: none; color: var(--accent); font-size: 1.05rem; line-height: 1.4; }
.charge-body strong { color: var(--bright); }
.charge-attr { display: block; color: var(--dim); font-size: 0.72rem; margin-top: 0.15rem; }
.charge-attr::before { content: "\2514\2500 "; color: var(--hairline); }

/* --------------------------------------------------------------------------
   Narrator apparatus
   -------------------------------------------------------------------------- */

.naturalist-caption {
  color: var(--dim); font-style: italic; font-size: 0.92rem;
  text-align: center; margin: 1.8rem auto 2.4rem; max-width: 60ch;
}

.fieldnote-block {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--phosphor);
  padding: 1.3rem 1.6rem;
  margin: 2.2rem 0;
  font-size: 0.95rem;
}
.fieldnote-block::before {
  content: "FIELD NOTES \2014  NARRATOR";
  display: block; color: var(--dim); font-size: 0.62rem;
  letter-spacing: 0.32em; margin-bottom: 0.9rem; font-style: normal;
}
.fieldnote-block p { font-style: italic; margin-bottom: 0.8rem; max-width: var(--measure); }
.fieldnote-block p:last-child { margin-bottom: 0; }
.fieldnote-block strong { color: var(--phosphor); font-style: normal; }

/* --------------------------------------------------------------------------
   Section heads — condensed display over a terminal prompt
   -------------------------------------------------------------------------- */

h2 {
  font-family: var(--display); font-weight: 700; font-synthesis: none;
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.05;
  color: var(--bright);
  margin: 3.6rem 0 1.1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--hairline);
  scroll-margin-top: 4.5rem;
  text-shadow: 0 0 18px rgba(0,255,65,0.2);
}
h2::before {
  content: "$ ";
  font-family: var(--mono); font-weight: 400;
  font-size: 0.5em; color: var(--accent);
  vertical-align: 0.45em; letter-spacing: 0;
  text-shadow: none;
}

/* --------------------------------------------------------------------------
   THE DRAMA TIMELINE — the tape.
   A ticked phosphor spine; each beat is a cue: solid timecode block,
   condensed title, the record, its receipts. Acts are hazard-stripe leaders.
   -------------------------------------------------------------------------- */

.act-label {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--display); font-weight: 700; font-synthesis: none;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.1;
  color: var(--phosphor);
  text-shadow: 0 0 14px rgba(0,255,65,0.35);
  margin: 3rem 0 0.35rem;
}
.act-label::after {
  content: ""; flex: 1 1 3rem; height: 9px; min-width: 3rem;
  background: repeating-linear-gradient(-45deg,
    rgba(0,255,65,0.3) 0 2px, transparent 2px 9px);
}
.act-narration {
  color: var(--dim); font-style: italic; font-size: 0.9rem;
  margin: 0.3rem 0 1.6rem; max-width: 62ch;
}

.timeline {
  --g: 2.8rem;   /* gutter width */
  --x: 9px;      /* spine offset  */
  list-style: none;
  position: relative;
  margin: 0.4rem 0 1rem;
  padding-left: var(--g);
}
/* the spine */
.timeline::before {
  content: ""; position: absolute; left: var(--x); top: 4px; bottom: 4px; width: 2px;
  background: linear-gradient(to bottom,
    var(--phosphor), rgba(0,255,65,0.3) 6rem,
    rgba(0,255,65,0.3) calc(100% - 4rem), transparent);
  box-shadow: 0 0 8px rgba(0,255,65,0.25);
}
/* ruler ticks across the spine — the tape's frame marks */
.timeline::after {
  content: ""; position: absolute; left: calc(var(--x) - 4px); top: 4px; bottom: 4px; width: 10px;
  background: repeating-linear-gradient(to bottom,
    rgba(0,255,65,0.16) 0 1px, transparent 1px 16px);
}

.tl-node { position: relative; padding: 0 0 2.4rem; }
.tl-node:last-child { padding-bottom: 0.6rem; }
/* cue diamond, seated on the spine */
.tl-node::before {
  content: ""; position: absolute;
  left: calc(var(--x) - var(--g) - 6px); top: 0.42rem;
  width: 10px; height: 10px;
  background: var(--bg);
  border: 2px solid var(--phosphor);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(0,255,65,0.45);
  z-index: 1;
}
/* connector from cue to timecode */
.tl-node::after {
  content: ""; position: absolute;
  left: calc(var(--x) - var(--g) + 9px); top: calc(0.42rem + 6px);
  width: calc(var(--g) - var(--x) - 15px); height: 2px;
  background: linear-gradient(90deg, rgba(0,255,65,0.5), rgba(0,255,65,0.12));
}
.tl-node:hover::before { box-shadow: 0 0 16px rgba(0,255,65,0.8); }

/* the timecode block — solid phosphor, black ink: the cue label on the tape */
.tl-date {
  display: inline-block;
  font-family: var(--display); font-weight: 700; font-synthesis: none;
  font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #02120a;
  background: var(--phosphor);
  padding: 0.14rem 0.65rem 0.16rem;
  margin-bottom: 0.6rem;
  box-shadow: 0 0 16px rgba(0,255,65,0.28);
}
.tl-title {
  font-family: var(--display); font-weight: 700; font-synthesis: none;
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  letter-spacing: 0.035em; text-transform: uppercase; line-height: 1.1;
  color: var(--bright);
  margin-bottom: 0.55rem;
}
.tl-record { font-size: 0.95rem; margin-bottom: 0.5rem; max-width: var(--measure); }
.tl-record strong { color: var(--phosphor); }
.tl-fieldnote {
  color: var(--dim); font-style: italic; font-size: 0.88rem;
  border-left: 2px solid var(--hairline);
  padding-left: 0.9rem; margin: 0.7rem 0 0.6rem; max-width: 62ch;
}
.tl-fieldnote::before {
  content: "FIELD NOTE"; display: inline-block;
  color: var(--dim); opacity: 0.7; font-style: normal;
  font-size: 0.56rem; letter-spacing: 0.26em; margin-right: 0.6em;
  vertical-align: 0.12em;
}

/* receipts — evidence tags */
.tl-receipts { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.7rem; }
.rcpt {
  display: inline-block;
  border: 1px solid rgba(255,136,51,0.35);
  background: rgba(255,102,0,0.05);
  color: var(--link);
  font-size: 0.7rem; letter-spacing: 0.04em;
  padding: 0.18rem 0.6rem;
}
.rcpt::before { content: "\00BB "; color: var(--accent-dim); }
.rcpt:hover {
  background: var(--accent); border-color: var(--accent);
  color: #140700; text-decoration: none; text-shadow: none;
}
.rcpt:hover::before { color: #140700; }

/* --------------------------------------------------------------------------
   Both sides — tale of the tape. Solid header bands: green case, amber defense.
   -------------------------------------------------------------------------- */

.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin: 1.4rem 0; }
.side-case, .side-defense { padding: 1.1rem 1.2rem 1rem; font-size: 0.9rem; min-width: 0; }
.side-case {
  background: rgba(0,255,65,0.03);
  border: 1px solid var(--hairline);
  border-top: none;
}
.side-defense {
  background: rgba(255,102,0,0.035);
  border: 1px solid rgba(204,82,0,0.4);
  border-top: none;
}
.side-case::before, .side-defense::before {
  display: block;
  font-family: var(--display); font-weight: 700; font-synthesis: none;
  font-size: 1.05rem; letter-spacing: 0.24em; text-transform: uppercase;
  padding: 0.32rem 1.2rem 0.34rem;
  margin: -1.1rem -1.2rem 1rem;
}
.side-case::before { content: "THE CASE"; background: var(--phosphor); color: #02120a; }
.side-defense::before { content: "THE DEFENSE"; background: var(--accent); color: #140700; }
.side-case p, .side-defense p { margin-bottom: 0.8rem; }
.side-case p:last-child, .side-defense p:last-child { margin-bottom: 0; }
.side-case strong { color: var(--phosphor); }
.side-defense strong { color: var(--link); }

/* --------------------------------------------------------------------------
   Verdict — the stamp breaks the panel's top edge
   -------------------------------------------------------------------------- */

.verdict {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,69,58,0.045), transparent 32%),
    var(--surface-2);
  border: 1px solid var(--border);
  padding: 0 1.5rem 1.3rem;
  margin: 3.4rem 0 1rem;
  text-align: center;
  font-size: 0.93rem;
}
.verdict-stamp {
  display: inline-block;
  transform: rotate(-3.5deg);
  font-family: var(--display); font-weight: 700; font-synthesis: none;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  letter-spacing: 0.26em; text-transform: uppercase; line-height: 1;
  color: var(--red);
  border: 3px solid rgba(255,69,58,0.75);
  border-radius: 5px;
  background: var(--bg);
  padding: 0.42rem 0.9rem 0.4rem 1.16rem;
  margin: -1.4rem 0 1.2rem;
  text-shadow: 0 0 10px rgba(255,69,58,0.45);
  box-shadow: 0 0 24px rgba(255,69,58,0.2), inset 0 0 16px rgba(255,69,58,0.12);
}
.verdict p { text-align: left; max-width: 64ch; margin: 0 auto 0.8rem; }
.verdict p:last-child { margin-bottom: 0; }
.verdict strong { color: var(--red); text-shadow: 0 0 6px rgba(255,69,58,0.3); }
.verdict .naturalist { color: var(--dim); font-style: italic; text-align: center; margin-top: 1.1rem; }

/* --------------------------------------------------------------------------
   Evidence locker — exhibit numbers via native ::marker so start= is honored
   -------------------------------------------------------------------------- */

.tier-head {
  display: flex; align-items: center; gap: 0.9rem;
  color: var(--dim); font-size: 0.66rem; letter-spacing: 0.3em;
  margin: 2.2rem 0 0.1rem;
}
.tier-head::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

.locker {
  list-style: decimal-leading-zero;
  margin: 0.9rem 0 0;
  padding-left: 3.1rem;
}
.locker li {
  padding: 0.65rem 0.2rem 0.65rem 0.5rem;
  border-bottom: 1px dashed var(--hairline-soft);
  font-size: 0.85rem;
}
.locker li:last-child { border-bottom: none; }
.locker li::marker {
  font-family: var(--display); font-weight: 700;
  color: rgba(0,255,65,0.55);
  font-size: 1.1rem; letter-spacing: 0.05em;
}
.locker .src-name { color: var(--bright); }
.locker .src-url { display: block; font-size: 0.75rem; margin-top: 0.2rem; }
.locker .src-url::before { content: "\2514\2500 "; color: var(--hairline); }

/* --------------------------------------------------------------------------
   The standard + footer
   -------------------------------------------------------------------------- */

.standard {
  background: var(--surface);
  border: 1px double var(--phosphor);
  outline: 1px solid var(--hairline);
  outline-offset: 4px;
  padding: 1.5rem 1.6rem;
  margin: 3rem 0.25rem 0;
  font-size: 0.9rem;
  max-width: none;
}
.standard strong { color: var(--phosphor); text-shadow: 0 0 6px rgba(0,255,65,0.3); }

footer {
  border-top: 1px dashed var(--hairline);
  padding-top: 2rem; margin-top: 3.5rem;
  text-align: center; color: var(--dim); font-size: 0.8rem;
}
footer p { margin-bottom: 0.5rem; }
.fire { color: var(--accent); }

/* --------------------------------------------------------------------------
   Screencap — the ONE sanctioned real-image treatment (actual screenshots only)
   -------------------------------------------------------------------------- */

figure.screencap {
  border: 1px solid var(--border);
  background: var(--surface-2);
  padding: 0.7rem;
  margin: 1.8rem 0;
}
figure.screencap img { display: block; width: 100%; max-width: 100%; height: auto; }
figure.screencap figcaption {
  color: var(--dim); font-size: 0.72rem; letter-spacing: 0.08em; margin-top: 0.55rem;
}
figure.screencap figcaption::before { content: "\25AA "; color: var(--accent-dim); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .sides { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .container { padding: 1.3rem 1rem 2.6rem; }
  .case-head { padding-top: 0.8rem; }
  .dossier-title { font-size: clamp(2.5rem, 13vw, 4rem); }
  .dossier-title::before { letter-spacing: 0.3em; }
  .poster-fields { padding: 1.1rem 1rem 0.9rem; }
  .poster-fields h1 { font-size: clamp(2rem, 10vw, 2.8rem); }
  .poster-hook, .poster-fields .hook { font-size: 1.02rem; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .field-row dt { padding-top: 0; }
  .timeline { --g: 2.1rem; }
  .tl-date { font-size: 0.85rem; }
  .ow-quote blockquote { font-size: 1rem; padding-left: 2rem; }
  .ow-attr { padding-left: 2rem; }
  .locker { padding-left: 2.5rem; }
  .verdict { padding: 0 1rem 1.1rem; }
  .verdict-stamp { letter-spacing: 0.18em; }
  .charges { padding: 0.9rem 1rem 1rem; }
  nav.site-nav .nav-inner { gap: 0.25rem 0.9rem; }
}