/* assets/css/main.css — PROJECT YELLOW
   Tokens live here and nowhere else. Mobile overrides are in ONE block
   at the very bottom of this file. Do not scatter media queries. */

/* ═══ TOKENS ═══════════════════════════════════════════════════════ */
:root {
  --yellow:       #f4ff72;
  --black:        #000000;
  --panel:        #0a0a0a;
  --line:         #1e1e1e;
  --dim:          #6f7449;
  --white:        #ffffff;
  --alarm:        #ff3b1f;
  --accomplished: #3fa34d;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Courier New", monospace;

  --ls-body:  .02em;
  --ls-label: .18em;
  --ls-micro: .32em;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 20px;
  --s5: 32px; --s6: 52px; --s7: 84px;

  --maxw: 1080px;
  --edge: 24px;
}

/* ═══ RESET ════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--yellow);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: var(--ls-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* ═══ ATMOSPHERE ═══════════════════════════════════════════════════ */
.scanlines,
.noise { position: fixed; inset: 0; z-index: 90; pointer-events: none; }

.scanlines {
  background: repeating-linear-gradient(
    to bottom,
    rgba(244,255,114,.028) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: screen;
}

.noise {
  opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* ═══ BOOT TERMINAL ════════════════════════════════════════════════ */
.boot {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  padding: var(--s6) var(--edge) var(--s4);
  background: var(--black);
  overflow: hidden;
}
.boot[hidden] { display: none; }
.boot--out { animation: boot-out .34s steps(4) forwards; }
@keyframes boot-out { to { opacity: 0; visibility: hidden; } }

.boot__screen {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.65;
}
.boot__line { white-space: pre-wrap; word-break: break-word; }
.boot__line--dim   { color: var(--dim); }
.boot__line--alarm { color: var(--alarm); }
.boot__line--white { color: var(--white); }
.boot__line--gap   { height: 1.62em; }

.boot__cursor {
  display: inline-block;
  width: .62em; height: 1em;
  background: var(--yellow);
  vertical-align: -.14em;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.boot__skip {
  align-self: center;
  margin-top: var(--s4);
  padding: var(--s2) var(--s4);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  font-size: 11.5px;
  letter-spacing: var(--ls-micro);
  cursor: pointer;
}
.boot__skip:hover { border-color: var(--yellow); color: var(--yellow); }

/* ═══ SHELL ════════════════════════════════════════════════════════ */
.shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--edge); }

.site { opacity: 0; transition: opacity .5s ease; }
.site--lit { opacity: 1; }

/* ═══ HEADER ═══════════════════════════════════════════════════════ */
.top {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(6px);
}
.top__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--s3) var(--edge);
}
.top__mark {
  font-size: 14px; font-weight: 700;
  letter-spacing: var(--ls-label);
  text-decoration: none;
}
.top__mark span { color: var(--dim); }

.nav { display: flex; gap: var(--s4); }
.nav a {
  font-size: 11.5px; letter-spacing: var(--ls-micro);
  text-decoration: none; color: var(--dim);
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--yellow); border-bottom-color: var(--yellow); }

/* ═══ RULES BAND (inverted — signal, not decoration) ═══════════════ */
.band {
  padding: var(--s3) var(--edge);
  background: var(--yellow);
  color: var(--black);
  text-align: center;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: var(--ls-label);
  line-height: 1.5;
}
.band a { color: var(--black); }

/* ═══ HERO ═════════════════════════════════════════════════════════ */
.hero { padding: var(--s7) 0 var(--s6); }
.hero__grid {
  display: grid; grid-template-columns: 1fr 300px;
  gap: var(--s6); align-items: center;
}
.eyebrow {
  color: var(--dim);
  font-size: 11.5px; letter-spacing: var(--ls-micro);
  margin-bottom: var(--s4);
}
.hero__title {
  font-size: clamp(30px, 6.4vw, 62px);
  font-weight: 700; letter-spacing: -.02em; line-height: .96;
  margin-bottom: var(--s4);
}
.hero__sub {
  max-width: 48ch; color: var(--dim);
  font-size: 15px; line-height: 1.75;
  margin-bottom: var(--s5);
}
.hero__sub strong { color: var(--yellow); font-weight: 400; }

/* Todd */
.asset { position: relative; }
.asset img {
  width: 100%;
  filter: drop-shadow(0 0 42px rgba(244,255,114,.13));
  cursor: crosshair;
  transition: transform .18s ease;
  user-select: none; -webkit-user-drag: none;
}
.asset img:active { transform: scale(.97); }
.asset__tag {
  margin-top: var(--s3);
  color: var(--dim);
  font-size: 11px; letter-spacing: var(--ls-micro); text-align: center;
}
.asset__say {
  min-height: 2.4em; margin-top: var(--s2);
  color: var(--yellow);
  font-size: 12.5px; letter-spacing: var(--ls-body); text-align: center;
}

.wilson-stack {
  position: relative; width: 220px; aspect-ratio: 1 / 1;
  margin: 32px auto;
  filter: drop-shadow(0 0 46px rgba(244,255,114,.14));
  transform-origin: 50% 82%;
  animation: wilson-rock 2.8s ease-in-out infinite;
}
.wilson-stack img {
  position: absolute; inset: 0; width: 100%; max-width: none; height: 100%;
  object-fit: contain;
}
.wilson-note { width: min(100%, 560px); margin: 24px auto 0; }
.wilson-note-wrap { position: relative; width: min(100%, 560px); margin: 24px auto 0; }
.wilson-note-wrap .wilson-note { width: 100%; margin: 0; }
.wilson-note-hotspot {
  position: absolute; left: 50%; bottom: 4%; width: 27%; height: 9%;
  transform: translateX(-50%); border: 0; background: transparent; cursor: pointer;
}
.wilson-note-hotspot:hover, .wilson-note-hotspot:focus-visible { outline: 1px dashed var(--yellow); outline-offset: 3px; }
.terminal {
  margin: var(--s5) auto 0; padding: var(--s3); border: 1px solid var(--yellow);
  background: #050505; color: var(--yellow); text-align: left;
}
.terminal[hidden] { display: none; }
.terminal__top { display: flex; justify-content: space-between; gap: var(--s3); color: var(--dim); font-size: 10px; letter-spacing: var(--ls-micro); }
.terminal__top button, .terminal__form button {
  border: 1px solid var(--line); background: transparent; color: var(--yellow);
  font: inherit; cursor: pointer;
}
.terminal__top button { padding: 3px 6px; font-size: 10px; }
.terminal__output { min-height: 116px; max-height: 210px; margin: var(--s3) 0; overflow: auto; white-space: pre-wrap; color: var(--white); font: 12px/1.6 var(--mono); }
.terminal__top button:hover, .terminal__form button:hover { border-color: var(--yellow); background: var(--yellow); color: var(--black); }
.terminal__form { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s3); }
.terminal__form label { color: var(--yellow); }
.terminal__form input { min-width: 0; flex: 1; border: 0; border-bottom: 1px solid var(--line); outline: 0; background: transparent; color: var(--yellow); font: 12px var(--mono); padding: 6px 0; }
.terminal__form input:focus { border-bottom-color: var(--yellow); }
.terminal__form button { padding: 5px 8px; font-size: 10px; }
@keyframes wilson-rock {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

/* ═══ BUTTONS ══════════════════════════════════════════════════════ */
.row { display: flex; flex-wrap: wrap; gap: var(--s3); }

.btn {
  display: inline-block;
  padding: 13px var(--s4);
  border: 1px solid var(--yellow);
  background: transparent; color: var(--yellow);
  font-size: 12px; font-weight: 700;
  letter-spacing: var(--ls-label);
  text-decoration: none; cursor: pointer;
  transition: background .14s linear, color .14s linear;
}
.btn:hover { background: var(--yellow); color: var(--black); }
.btn--solid { background: var(--yellow); color: var(--black); }
.btn--solid:hover { background: transparent; color: var(--yellow); }
.btn--ghost { border-color: var(--line); color: var(--dim); }
.btn--ghost:hover { background: transparent; border-color: var(--yellow); color: var(--yellow); }

/* Global game scores — shared by both recovered cabinets. */
.leaderboard { margin-top: var(--s4); border: 1px solid var(--line); }
.leaderboard__summary { display: block; padding: 9px var(--s3); background: #65d96f; color: var(--black); cursor: pointer; font-size: 10px; font-weight: 700; letter-spacing: var(--ls-label); text-align: center; }
.leaderboard__summary:hover { background: #7bea84; }
.leaderboard__body { padding: 0 var(--s4) var(--s4); }
.leaderboard__list { margin: 0; padding: 0; list-style: none; }
.leaderboard__row { display: grid; grid-template-columns: 34px 1fr auto; gap: var(--s3); padding: 9px 0; border-top: 1px solid var(--line); font-size: 12px; }
.leaderboard__rank, .leaderboard__score { color: var(--yellow); font-variant-numeric: tabular-nums; }
.leaderboard__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.leaderboard__empty { padding: 12px 0; color: var(--dim); font-size: 11px; }
.leaderboard__form { display: flex; gap: var(--s2); margin-top: var(--s4); }
.leaderboard__form input { min-width: 0; flex: 1; border: 1px solid var(--line); background: transparent; color: var(--yellow); font: 12px var(--mono); padding: 10px; }
.leaderboard__out { min-height: 1.4em; margin: var(--s2) 0 0; color: var(--dim); font-size: 11px; }

/* ═══ SECTION ══════════════════════════════════════════════════════ */
.sec { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.sec__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s5);
}
.sec__title { font-size: 17px; font-weight: 700; letter-spacing: var(--ls-label); }
.sec__meta  { color: var(--dim); font-size: 11px; letter-spacing: var(--ls-micro); }

/* ═══ SCOREBOARD ═══════════════════════════════════════════════════ */
.score {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
}
.score__cell { padding: var(--s4); border-right: 1px solid var(--line); }
.score__cell:last-child { border-right: 0; }
.score__k { color: var(--dim); font-size: 11px; letter-spacing: var(--ls-micro); }
.score__v {
  margin-top: var(--s2);
  font-size: clamp(22px, 4.6vw, 36px); font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.score__v[data-empty="true"] { color: var(--dim); }
.score__n { margin-top: var(--s1); color: var(--dim); font-size: 11px; letter-spacing: var(--ls-body); }
.score__n a { color: var(--yellow); }

.score--record { grid-template-columns: 1fr; margin-top: var(--s3); }
.score__section-k { margin: var(--s4) 0 var(--s2); color: var(--dim); font-size: 11px; letter-spacing: var(--ls-micro); }
.score--latest { grid-template-columns: repeat(4, 1fr); }
.score__unit { margin-left: var(--s2); font-size: 13px; font-weight: 400; letter-spacing: var(--ls-label); color: var(--dim); }

.livebadge {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: var(--s2);
  font-size: 9px; font-weight: 700; letter-spacing: .1em;
  color: var(--accomplished);
}
.livebadge[hidden] { display: none; }
.livebadge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accomplished); }

/* ═══ OPERATIONS ═══════════════════════════════════════════════════ */
.op { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.op:first-child { border-top: 0; padding-top: var(--s5); }
.op--classified { border-color: var(--alarm); }

.op__name {
  font-size: clamp(16px, 3.2vw, 24px); font-weight: 700;
  letter-spacing: .04em; text-align: center;
}
.op__obj {
  margin-top: var(--s2);
  color: var(--dim);
  font-size: 12px; letter-spacing: var(--ls-label); text-align: center;
}
.op__rule { height: 1px; margin: var(--s4) 0 var(--s5); background: var(--yellow); }
.op--classified .op__rule { background: var(--alarm); }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.tier { text-align: center; }

.badge {
  position: relative;
  width: 92px; margin: 0 auto var(--s3);
  aspect-ratio: 193 / 224;          /* the emblems' true ratio */
}
.badge img,
.badge svg { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Fallback outline hex — only reached by a glyph with no cut emblem. */
.badge__hex   { fill: none; stroke: var(--yellow); stroke-width: 4; }
.badge__glyph { fill: var(--yellow); }

/* Raster emblems are solid, so state is carried by exposure, not stroke. */
.tier--accomplished .badge img { opacity: .38; }
.tier--locked .badge img       { filter: brightness(.4) saturate(.3); }

.tier--accomplished .badge__hex,
.tier--accomplished .badge__glyph { opacity: .5; }
.tier--locked .badge__hex   { stroke: var(--dim); }
.tier--locked .badge__glyph { fill: var(--dim); }

.stamp {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transform: rotate(-12deg);
  pointer-events: none;
}
.stamp span {
  padding: 3px 7px;
  border: 2px solid var(--accomplished);
  border-radius: 3px;
  color: var(--accomplished);
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
}
.tier__goal { font-size: 13px; font-weight: 700; letter-spacing: var(--ls-label); }
.tier--locked .tier__goal { color: var(--dim); }
.tier__prog { margin-top: var(--s1); color: var(--dim); font-size: 11px; letter-spacing: var(--ls-body); }

/* ═══ TRANSMISSIONS ════════════════════════════════════════════════ */
.log { border: 1px solid var(--line); }
.log li {
  display: grid; grid-template-columns: 108px 1fr;
  gap: var(--s4);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.log li:last-child { border-bottom: 0; }
.log__stamp { color: var(--dim); font-size: 11px; letter-spacing: var(--ls-micro); }
.archive-form { display: block !important; padding: var(--s4) !important; }
.archive-form__head { display: flex; justify-content: space-between; gap: var(--s4); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.archive-form__meta { color: var(--dim); font-size: 10px; letter-spacing: var(--ls-micro); text-align: right; }
.archive-form__subject { margin-top: var(--s3); font-size: 12px; font-weight: 700; letter-spacing: var(--ls-label); }
.archive-form__subject a { color: var(--yellow); }
.archive-form__body { max-width: 78ch; margin-top: var(--s2); color: var(--dim); font-size: 13px; line-height: 1.7; }

/* ═══ CLEARANCE LADDER ═════════════════════════════════════════════ */
.ladder { display: grid; gap: var(--s2); }
.rung {
  display: grid; grid-template-columns: 92px 1fr auto;
  gap: var(--s4); align-items: center;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-left: 6px solid var(--level-color, var(--line));
  font-size: 13.5px;
}
.rung--on { border-color: var(--level-color, var(--yellow)); }
.rung__lv { color: var(--level-color, var(--yellow)); font-weight: 700; letter-spacing: var(--ls-label); }
.rung__st { color: var(--dim); font-size: 11px; letter-spacing: var(--ls-micro); }
.rung--on .rung__st { color: var(--level-color, var(--yellow)); }

/* ═══ FILE — code gate ════════════════════════════════════════════ */
.gate {
  padding: var(--s5);
  margin-bottom: var(--s5);
  border: 1px solid var(--yellow);
  background: var(--panel);
}
.gate__head { margin-bottom: var(--s4); }
.gate__head .sec__meta { margin-top: var(--s2); }
.gate__uplink {
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  border-left: 2px solid var(--yellow);
  color: var(--dim);
  font-size: 12.5px; line-height: 1.7;
}
.gate__uplink strong { color: var(--yellow); font-weight: 700; letter-spacing: var(--ls-label); }
.gate__uplink a { color: var(--yellow); }

.gate__ladder { margin: var(--s5) 0 0; padding: 0; list-style: none; }

/* Ten-level legend. The swatch is the whole point: it is the key to the
   colours the document is redacted in. */
.lg {
  display: grid;
  grid-template-columns: 14px 34px 92px 1fr auto;
  gap: var(--s3); align-items: baseline;
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--dim);
  opacity: .55;
}
.lg--on { opacity: 1; }
.lg__sw { width: 14px; height: 14px; align-self: center; }
.lg--on .lg__sw { box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.lg__lv { font-weight: 700; letter-spacing: .08em; }
.lg__nm { font-weight: 700; letter-spacing: var(--ls-micro); font-size: 10.5px; }
.lg__how { line-height: 1.6; }
.lg__st { font-size: 9.5px; letter-spacing: var(--ls-micro); white-space: nowrap; }
.lg--on .lg__st { color: var(--accomplished); }
.lg__jump { border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.lg__jump:hover { text-decoration: underline; }
.lg--never { opacity: .5; }
.gate__note { margin-top: var(--s4); color: var(--dim); font-size: 11px; line-height: 1.7; }

.meter { border: 1px solid var(--line); padding: var(--s4); margin-bottom: var(--s5); }
.meter__t { display: flex; justify-content: space-between; gap: var(--s4); font-size: 11px; letter-spacing: var(--ls-micro); color: var(--dim); }
.meter__bar { height: 8px; margin-top: var(--s3); border: 1px solid var(--line); }
.meter__fill { height: 100%; background: var(--yellow); transition: width .5s ease; }
.meter__n { margin-top: var(--s3); font-size: 13px; }

/* ═══ FILE — the document ═════════════════════════════════════════
   Ten authored sections, each gated as a whole (a "sealed" stub when
   below clearance). --level-color is set inline per element by
   dossier.js/dossier-doc.js from PY.levels, so the same handful of
   rules below paint all ten colours plus the sealed maroon. */
.doc { font-size: 13px; line-height: 1.7; }

/* cover / closing stamp — the two skewed classification boxes */
.doc__classify {
  text-align: center;
  border: 3px solid var(--alarm);
  padding: var(--s5) var(--s4);
  background: #1a0f0c;
  font-weight: 700; letter-spacing: .18em; line-height: 1.7;
  font-size: 13px;
}
.doc__classify--head { margin-bottom: var(--s5); transform: skewY(-1deg); }
.doc__classify--foot { margin-top: var(--s6); transform: skewY(-1deg); font-size: 12px; }

.doc__meta { text-align: center; color: var(--dim); font-size: 11.5px; line-height: 2; margin-bottom: var(--s5); }
.doc__meta strong { color: var(--white); }

/* one shell per section, coloured by its own clearance level */
.section-shell {
  margin: 0 0 var(--s5);
  padding: var(--s5) var(--s4) var(--s4);
  border-left: 6px solid var(--level-color, var(--yellow));
  background: #050505;
  position: relative;
}
.section-shell.sealed { padding: var(--s4); opacity: .85; }

.section-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: var(--ls-micro);
  color: var(--level-color, var(--dim));
  margin-bottom: var(--s3);
}
.section-title {
  font-size: clamp(15px, 2.4vw, 18px); font-weight: 700; letter-spacing: var(--ls-label);
  margin: var(--s2) 0 var(--s4);
}
.subsection-title {
  font-size: 12px; font-weight: 700; letter-spacing: var(--ls-micro);
  color: var(--dim);
  margin: var(--s4) 0 var(--s2);
}
.sealed__msg { color: var(--dim); font-size: 12px; line-height: 1.7; }

/* classification band — top and bottom of each OPEN section. Triple-click
   still stamps it "declassified in error"; see bindBands() in dossier.js */
.doc__band {
  margin: 0 0 var(--s4);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-size: 9.5px; letter-spacing: var(--ls-micro); text-align: center;
  cursor: pointer;
}
.doc__band--f { margin: var(--s4) 0 0; padding: var(--s2) 0 0; border-top: 1px solid var(--line); border-bottom: 0; }
.doc__band--hit { color: var(--alarm); border-color: var(--alarm); }
.doc__band--glitch { animation: band-glitch 3.6s steps(2, end) infinite; }
.doc__band--glitch::after { content: " // ?"; color: var(--alarm); }
.doc__band--hit { animation: none; }
.doc__band--hit::after { content: none; }
@keyframes band-glitch {
  0%, 92%, 100% { opacity: 1; transform: none; }
  93% { opacity: .45; transform: translateX(1px); }
  94% { opacity: 1; transform: translateX(-1px); }
  95% { opacity: .65; }
}
.dev-secret {
  margin: var(--s4) 0;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--alarm);
  color: var(--alarm);
  font-size: 11px;
  letter-spacing: .08em;
  line-height: 1.7;
}

/* body copy */
.content { font-size: 13px; line-height: 1.8; }
.content p { margin-bottom: var(--s3); }
.content p:last-child { margin-bottom: 0; }
.content ul, .content ol { margin: 0 0 var(--s3) 20px; }
.content strong { color: var(--white); }

.memo { border: 1px solid var(--line); background: #161616; padding: var(--s4); margin: var(--s3) 0; font-size: 12px; line-height: 1.7; }
.memo-header { font-weight: 700; margin-bottom: var(--s1); }

/* A memo actually FROM Todd — yellow accent, lowercase body, no
   corrections. Command types in caps; Todd does not. */
.memo--todd { border-color: var(--yellow); background: #171702; }
.memo--todd .memo-header { color: var(--yellow); }
.memo--todd .memo__body { text-transform: none; letter-spacing: normal; font-size: 13px; line-height: 1.8; margin-top: var(--s3); color: var(--white); }
.memo--todd .memo__sig { margin-top: var(--s3); color: var(--dim); text-transform: none; }

.graphic-sensitive { margin-top: var(--s4); font-size: 11px; letter-spacing: var(--ls-micro); }
.graphic-sensitive a { color: var(--alarm); }
.graphic-modal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s4); background: rgba(0,0,0,.94);
}
.graphic-modal__box {
  position: relative; max-width: min(92vw, 760px); max-height: 92vh;
  padding: var(--s4); border: 1px solid var(--alarm); background: var(--black);
}
.graphic-modal img { max-width: 100%; max-height: calc(92vh - 64px); object-fit: contain; }
.graphic-modal__close {
  display: block; margin: 0 0 var(--s3) auto; padding: 4px 8px;
  border: 1px solid var(--alarm); background: transparent; color: var(--alarm);
  font-size: 10px; letter-spacing: var(--ls-micro); cursor: pointer;
}
.graphic-modal__close:hover { background: var(--alarm); color: var(--black); }

.konami-touch {
  margin-top: var(--s6); padding: var(--s4);
  border: 1px dashed var(--level-color, var(--dim));
  background: rgba(70,165,216,.04);
}
.konami-touch__note { margin-top: var(--s2); color: var(--dim); font-size: 12px; }
.konami-touch__pad {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s2);
  max-width: 440px; margin-top: var(--s4);
}
.konami-touch__pad button {
  min-height: 42px; border: 1px solid var(--level-color, var(--dim));
  background: transparent; color: var(--level-color, var(--yellow));
  font-weight: 700; cursor: pointer; touch-action: manipulation;
}
.konami-touch__pad button:active,
.konami-touch__pad button:hover { background: var(--level-color, var(--yellow)); color: var(--black); }
.konami-touch__status { margin-top: var(--s3); color: var(--dim); font-size: 10px; letter-spacing: var(--ls-micro); }
.unlock-toast {
  position: fixed; top: var(--s5); left: 50%; z-index: 130;
  transform: translateX(-50%); padding: var(--s3) var(--s4);
  border: 1px solid var(--accomplished); background: var(--black);
  color: var(--accomplished); font-size: 11px; font-weight: 700;
  letter-spacing: var(--ls-label); text-align: center;
  box-shadow: 0 0 24px rgba(63,163,77,.22);
  animation: unlock-toast-in .22s ease-out;
}
.unlock-toast--out { animation: unlock-toast-out .35s ease-in forwards; }
@keyframes unlock-toast-in { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes unlock-toast-out { to { opacity: 0; transform: translate(-50%, -8px); } }

.to-top {
  position: fixed; right: var(--s4); bottom: var(--s4); z-index: 35;
  padding: 8px 10px; border: 1px solid var(--yellow);
  background: rgba(0,0,0,.88); color: var(--yellow);
  font-size: 10px; font-weight: 700; letter-spacing: var(--ls-micro);
  cursor: pointer; opacity: 0; pointer-events: none;
  transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.to-top:hover, .to-top:focus-visible { background: var(--yellow); color: var(--black); outline: none; }

.redaction-bar {
  height: 8px; margin: var(--s4) 0;
  background: linear-gradient(90deg, transparent, var(--level-color, var(--dim)), transparent);
  opacity: .5;
}
.doc__pagebreak { border: 0; border-top: 1px dashed var(--line); margin: var(--s5) 0 0; padding-top: var(--s4); }

/* forward-referencing paragraphs — a lower section teasing a higher one.
   Open: tinted left-border in the REFERENCED level's colour (not the
   section's own). Sealed: collapses to a one-line notice via JS. */
.mark-l1, .mark-l2, .mark-l3, .mark-l4, .mark-l5,
.mark-l6, .mark-l7, .mark-l8, .mark-l9, .mark-l10 {
  display: block;
  padding: var(--s2) 0 var(--s2) var(--s3);
  border-left: 3px solid var(--level-color, var(--yellow));
}
.mark-sealed-wrap { display: block; padding: var(--s2) var(--s3); }
.mark-sealed {
  display: inline-block;
  padding: 3px 8px;
  border: 1px dashed var(--level-color, var(--dim));
  color: var(--level-color, var(--dim));
  font-size: 10px; font-weight: 700; letter-spacing: var(--ls-micro);
}

/* content that is never released at any clearance — baked into the
   source as a permanent placeholder, not toggled at render time */
.mark-withheld {
  display: block;
  padding: var(--s2) 0 var(--s2) var(--s3);
  border-left: 3px solid var(--sealed, #7a1d10);
  color: var(--dim);
  font-style: italic;
}

/* Appendix G — konami-only, no code reaches it, sealed-maroon throughout */
.appendix-g { border-left-color: #7a1d10 !important; }

/* ═══ THE ASSET, EVADING ═══════════════════════════════════════════
   Todd stops talking, then stops holding still. See assets/js/site.js */
.asset img { will-change: transform; }
.asset--evasive img { cursor: not-allowed; transition: transform .16s cubic-bezier(.2,.9,.3,1); }
.asset--cornered img { animation: jitter .28s steps(2) infinite; }
@keyframes jitter { 50% { transform: translate(var(--tx,0), calc(var(--ty,0px) + 2px)); } }

/* ═══ CAPTURE / CODE INPUT ═════════════════════════════════════════ */
.capture { display: flex; gap: 0; max-width: 460px; border-bottom: 1px solid var(--line); }
.capture:focus-within { border-bottom-color: var(--yellow); }
.capture input {
  flex: 1; min-width: 0;
  padding: 12px 0;
  border: 0; outline: 0; background: transparent;
  color: var(--white); caret-color: var(--yellow);
  font: inherit; font-size: 13.5px; letter-spacing: var(--ls-body);
  /* Without this, mobile WebKit paints a native white field and the whole
     terminal illusion dies in a single element. */
  -webkit-appearance: none; appearance: none; border-radius: 0;
}
.capture input::placeholder { color: var(--dim); }
.capture button {
  padding: 0 0 0 var(--s4);
  border: 0; background: transparent; color: var(--yellow);
  font-size: 11.5px; font-weight: 700; letter-spacing: var(--ls-micro);
  cursor: pointer;
  -webkit-appearance: none; appearance: none; border-radius: 0;
}
.capture button:hover { color: var(--white); }
.capture__note { margin-top: var(--s3); color: var(--dim); font-size: 11.5px; line-height: 1.6; }

.code {
  display: inline-block;
  margin: var(--s3) 0;
  padding: 8px 16px;
  border: 1px solid var(--yellow);
  color: var(--yellow);
  font-size: 20px; font-weight: 700; letter-spacing: .22em;
  user-select: all;
}
.code__out { margin-top: var(--s3); font-size: 11.5px; line-height: 1.6; min-height: 1.6em; }

/* ═══ FOOT ═════════════════════════════════════════════════════════ */
.foot {
  margin-top: var(--s6);
  padding: var(--s5) 0 var(--s6);
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 11.5px; letter-spacing: var(--ls-body);
}
.foot__in {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  justify-content: space-between;
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--edge);
}
.foot a { text-decoration: none; }
.foot a:hover { color: var(--yellow); }

/* The period at the end of the last sentence is a door. An empty inline
   <a> has essentially no hit target — visually it's one character, and
   without help the CLICKABLE area is the same one character, which is
   exactly what clearance.html's own copy calls out: "it was four pixels
   wide." That's the joke, not the difficulty — so the tap target below
   is padded out generously in every direction with a matching negative
   margin, which enlarges the invisible click zone without nudging a
   single visible pixel of the surrounding sentence. */
.door {
  display: inline-block;
  color: inherit; text-decoration: none; cursor: default;
  padding: 14px; margin: -14px;
}
.door:hover { color: var(--alarm); }

/* ═══ DEAD END ═════════════════════════════════════════════════════ */
.dead {
  display: grid; place-items: center;
  min-height: 100svh;
  padding: var(--s5) var(--edge);
  text-align: center;
}
.dead__code { font-size: clamp(56px, 16vw, 150px); font-weight: 700; letter-spacing: -.05em; line-height: .9; }
.dead__msg  { margin-top: var(--s4); color: var(--dim); font-size: 13px; letter-spacing: var(--ls-label); }

/* ═══ MOTION ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .scanlines { display: none; }
}

/* ═══ CIPHER (Form 22-B) ═══════════════════════════════════════════ */
.cipher {
  padding: var(--s5) var(--s4);
  border: 1px solid var(--yellow);
  background: var(--panel);
  text-align: center;
}
.cipher__meta { color: var(--dim); font-size: 10px; letter-spacing: var(--ls-micro); }
.cipher__text {
  margin-top: var(--s4);
  color: var(--yellow);
  font-size: clamp(13px, 2.6vw, 19px); font-weight: 700; letter-spacing: .16em;
  line-height: 1.9; word-break: break-word;
  user-select: all;
}

/* ═══ FRAGMENTS (the chain) ════════════════════════════════════════ */
.frag {
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  border: 1px dashed var(--yellow);
  color: var(--dim);
  font-size: 11px; letter-spacing: var(--ls-micro);
}
.frag__v {
  color: var(--yellow);
  font-size: 17px; font-weight: 700; letter-spacing: .2em;
  user-select: all;
}

/* ═══ PRINT ════════════════════════════════════════════════════════
   Nobody prints a website. Somebody will print this one. */
@media print {
  .scanlines, .noise, .top, .foot, .gate, .meter, .game { display: none !important; }
  body { background: #fff; color: #000; }
  .section-shell { border-color: #000 !important; background: #fff; page-break-inside: avoid; }
  .content, .section-title, .subsection-title, .section-label, .doc__meta, .doc__classify { color: #000 !important; }
  .memo { background: #f2f2f2; border-color: #999; }
  .mark-sealed, .mark-withheld { border-color: #000 !important; color: #000 !important; }
  .doc::before {
    content: "UNAUTHORISED REPRODUCTION OF FILE 0001. THIS COPY IS NOW THE SECOND COPY. YOU HAVE READ SECTION V. YOU KNOW WHAT HAPPENED TO THE SECOND COPY.";
    display: block; margin-bottom: 16px; padding: 10px;
    border: 2px solid #000; color: #000;
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-align: center;
  }
}

/* ═══ TODD RUN — mini-game ═════════════════════════════════════════ */
.game {
  position: fixed; inset: 0; z-index: 120;
  display: none; place-items: center;
  padding: var(--edge);
  background: rgba(0,0,0,.985);
  overflow-y: auto;                 /* a short/rotated viewport can scroll to the panel, never clip it */
}
.game[data-open="true"] { display: grid; }
.game__box { width: 100%; max-width: 780px; max-height: 100%; border: 1px solid var(--yellow); background: var(--black); }
.game__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  font-size: 11px; letter-spacing: var(--ls-micro); color: var(--dim);
}
.game__x { border: 0; background: transparent; cursor: pointer; font-size: 11px; letter-spacing: var(--ls-micro); color: var(--dim); }
.game__x:hover { color: var(--yellow); }
/* The canvas's internal resolution is fixed at 900x260 (see todd-game.js
   var W, H) — CSS must lock the SAME ratio or everything drawn on it
   (Todd, the eggs) scales non-uniformly and reads as stretched. A fixed
   px height at a fluid width — the old mobile override — is exactly the
   bug: it silently retargets the box to a different ratio than the
   bitmap was drawn at. aspect-ratio keeps them locked at every width. */
.game__canvas { display: block; width: 100%; aspect-ratio: 900 / 260; background: var(--black); touch-action: manipulation; }
.game__foot { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); font-size: 11.5px; color: var(--dim); text-align: center; }

.game__over {
  position: relative;
  display: none;
  padding: var(--s6) var(--s5);
  background: var(--black);
  text-align: center;
}
.game__over[data-show="true"] { display: block; }

/* The end panel REPLACES the field — it never floats over it, or a tall
   win screen spills out of the box and onto the page behind it. */
.game__box[data-ended="true"] .game__wrap,
.game__box[data-ended="true"] .game__foot { display: none; }
.game__ttl { font-size: clamp(22px, 5vw, 40px); font-weight: 700; letter-spacing: -.02em; line-height: 1.02; }
.game__msg { margin-top: var(--s3); color: var(--dim); font-size: 13.5px; line-height: 1.7; }
.game__wrap { position: relative; }
.game__box  { position: relative; }

/* the whopping digital hi-five */
.five { width: 128px; margin: 0 auto var(--s4); }
.five svg { width: 100%; height: auto; }
.five path, .five line { stroke: var(--yellow); fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.five--slap { animation: slap .5s cubic-bezier(.2,1.6,.4,1) 1; }
@keyframes slap {
  0%   { transform: translateY(-26px) rotate(-16deg) scale(.86); opacity: .2; }
  55%  { transform: translateY(6px) rotate(5deg) scale(1.1); opacity: 1; }
  100% { transform: none; }
}
.spark { position: absolute; inset: 0; pointer-events: none; }
.spark i {
  position: absolute; left: 50%; top: 34%;
  width: 3px; height: 16px; background: var(--yellow);
  transform-origin: 50% 100%;
  animation: spark .62s ease-out forwards;
}
@keyframes spark { to { transform: translateY(-64px) scaleY(.2); opacity: 0; } }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE REFINEMENTS — all viewport overrides live below this line
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  :root { --edge: 18px; }

  .hero { padding: var(--s6) 0 var(--s5); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--s5); }
  .asset { max-width: 220px; margin: 0 auto; order: -1; }

  /* A two-word title (STANDING BY) squeezed against right-aligned meta
     text in one unwrapped flex row breaks mid-word on narrow screens.
     Stack instead — same pattern as .gate__head, which never had this
     problem because it was already single-column. */
  .sec__head { flex-direction: column; align-items: flex-start; gap: var(--s2); }

  .score { grid-template-columns: 1fr; }
  .score__cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .score__cell:last-child { border-bottom: 0; }
  .score--latest { grid-template-columns: repeat(4, 1fr); }
  .score--latest .score__cell { padding: var(--s3) var(--s2); }
  .score--latest .score__k { font-size: 9px; letter-spacing: .12em; white-space: nowrap; }
  .score--latest .score__v { font-size: clamp(18px, 6vw, 28px); white-space: nowrap; }

  .tiers { gap: var(--s3); }
  .badge { width: 68px; }

  .log li  { grid-template-columns: 1fr; gap: var(--s1); }
  .rung    { grid-template-columns: 1fr auto; }
  .rung__d { grid-column: 1 / -1; color: var(--dim); }

  .gate         { padding: var(--s4); }
  .lg      { grid-template-columns: 14px 32px 1fr; gap: var(--s2); }
  .lg__how { grid-column: 2 / -1; }
  .lg__st  { grid-column: 2 / -1; }

  .doc              { font-size: 12px; }
  .section-shell    { padding: var(--s4) var(--s3); }
  .doc__classify    { padding: var(--s4) var(--s3); font-size: 11.5px; }

  .five         { width: 96px; }

  /* At this breakpoint the logo and four nav links no longer both fit on
     one row. Neither .top__in nor .nav allows wrapping, so instead of
     dropping to a second row, the flex items just SHRINK — and a shrunk
     <a> wraps its own text mid-link ("THE FILE" -> "THE" / "FILE") while
     a later sibling (UPLINK) stays put on row one. Four words end up
     scattered across two rows in no readable order. Wrapping the row,
     with each link kept unsplit, turns that into a plain two-row menu
     at every width where it stops fitting on one line — not just the
     narrowest phones. */
  .top__in { flex-wrap: wrap; row-gap: var(--s2); }
  .nav { gap: var(--s3); flex-wrap: wrap; row-gap: var(--s2); }
  .nav a { font-size: 11px; letter-spacing: .16em; white-space: nowrap; }

  .boot { padding: var(--s5) var(--edge) var(--s4); }
  .boot__screen { font-size: 12.5px; }
}

@media (max-width: 420px) {
  /* .top__in already wraps as of the 860px query above; below 420px
     there's room for only one item per row, so stack it outright rather
     than wrap-and-center. */
  .top__in  { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .badge    { width: 58px; }
  .tier__goal { font-size: 11px; letter-spacing: .1em; }
}