/* ============================================================
   KARN — an automotive world.
   Graphite ground. Two accents in hard roles: signal (orange)
   is KARN and action; hud (steel cyan) is telemetry. One 8° cut
   on everything. Anton shouts, Inter Tight briefs, Share Tech
   Mono reads the instruments. Chaos on the surface, one grid
   underneath.
   ============================================================ */

:root {
  --ground: #0a0b0d;
  --ground-hi: #12141a;
  --panel: #16181f;
  --white: #f2f3f5;
  --steel: #9aa3b2;
  --signal: #ff4d00;
  --signal-deep: #c23a00;
  --hud: #7fd4e8;
  --line: rgba(154, 163, 178, 0.18);
  --line-strong: rgba(154, 163, 178, 0.42);
  --wash: rgba(255, 77, 0, 0.07);

  --f-mega: "Anton", Impact, "Arial Narrow", sans-serif;
  --f-body: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --f-hud: "Share Tech Mono", Consolas, monospace;

  --cut: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  --cut-tl: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  --ease: cubic-bezier(0.2, 0.9, 0.25, 1);
  --rim: clamp(14px, 2vw, 30px);
  --block-y: clamp(70px, 11vh, 150px);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--ground);
  color: var(--white);
  font-family: var(--f-body);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video, svg { display: block; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { color: var(--signal); }

::selection { background: var(--signal); color: var(--ground); }

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--signal); color: var(--ground);
  font-family: var(--f-hud); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 10px 18px; z-index: 300; text-decoration: none;
}
.skip:focus { left: var(--rim); top: var(--rim); }

/* ---------- voices ---------- */

.hudt {
  font-family: var(--f-hud);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.55;
}
.hudt-dim { color: var(--steel); }
.hudt-cy { color: var(--hud); }
.hudt-sig { color: var(--signal); }

.mega {
  font-family: var(--f-mega);
  font-weight: 400;
  font-size: clamp(4rem, 16vw, 15rem);
  line-height: 0.86;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.shout {
  font-family: var(--f-mega);
  font-weight: 400;
  font-size: clamp(2rem, 5.4vw, 4.6rem);
  line-height: 0.94;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

/* ---------- the HUD rim ---------- */

.rim {
  position: fixed; inset: calc(var(--rim) * 0.5);
  border: 1px solid var(--line);
  pointer-events: none; z-index: 90;
}
.rim::before, .rim::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 1px solid var(--line-strong);
}
.rim::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.rim::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.hud-cond {
  position: fixed; top: calc(var(--rim) * 0.5 + 8px); right: calc(var(--rim) * 0.5 + 12px);
  z-index: 91; pointer-events: none;
  color: var(--hud);
}
.hud-vel {
  position: fixed; bottom: calc(var(--rim) * 0.5 + 8px); right: calc(var(--rim) * 0.5 + 12px);
  z-index: 91; pointer-events: none;
  color: var(--steel);
}
@media (max-width: 760px) { .hud-cond { display: none; } }

/* ---------- topbar ---------- */

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(var(--rim) * 0.9) var(--rim);
  transition: background 0.3s;
}
.topbar.settled {
  background: linear-gradient(to bottom, rgba(10, 11, 13, 0.92), rgba(10, 11, 13, 0.75) 70%, transparent);
}
.wordmark {
  font-family: var(--f-mega);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--white);
  display: flex; align-items: baseline; gap: 12px;
}
.wordmark:hover { color: var(--white); }
.wordmark i {
  font-style: normal; color: var(--signal);
  transform: skewX(-8deg); display: inline-block;
}
.wordmark .sub { font-family: var(--f-hud); font-size: 10px; letter-spacing: 0.1em; color: var(--steel); }

.nav { display: flex; align-items: center; gap: clamp(10px, 1.8vw, 26px); }
.nav a {
  font-family: var(--f-hud); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; color: var(--steel);
  padding: 6px 2px; position: relative;
}
.nav a::before {
  content: ""; position: absolute; left: -8px; top: 50%;
  width: 4px; height: 4px; transform: translateY(-50%) rotate(45deg);
  background: var(--signal);
  opacity: 0; transition: opacity 0.15s;
}
.nav a:hover, .nav a:focus-visible { color: var(--white); }
.nav a:hover::before, .nav a:focus-visible::before { opacity: 1; }
.nav a[aria-current="page"] { color: var(--signal); }

/* ---------- buttons ---------- */

.btn-ign, .btn-rail {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-hud); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  border: 0;
}
.btn-ign {
  background: var(--signal); color: var(--ground);
  padding: 16px 32px;
  clip-path: var(--cut);
  position: relative;
  transition: background 0.12s steps(2, jump-none), transform 0.12s var(--ease);
}
.btn-ign:hover, .btn-ign:focus-visible { background: var(--white); color: var(--ground); }
.btn-ign:active { transform: translateY(1px) scaleX(0.995); }
.btn-rail {
  background: transparent; color: var(--white);
  border: 1px solid var(--line-strong);
  padding: 15px 26px;
  position: relative;
  transition: border-color 0.15s;
}
.btn-rail::after {
  content: ""; position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px;
  border-right: 2px solid var(--signal); border-bottom: 2px solid var(--signal);
  transition: width 0.2s var(--ease), height 0.2s var(--ease);
}
.btn-rail:hover, .btn-rail:focus-visible { border-color: var(--white); color: var(--white); }
.btn-rail:hover::after, .btn-rail:focus-visible::after { width: 22px; height: 22px; }
.btn-rail:active { transform: translateY(1px); }

/* ---------- snaps (reveals): hard cuts with a signal ghost ---------- */

/* opacity is a static hard cut — never inside the keyframes, or a hidden
   tab freezes the animation at 0% and the element stays invisible forever.
   The ghost is decorative only: a one-beat signal outline. */
.js-anim .snap { opacity: 0; }
.js-anim .snap.is-in { opacity: 1; animation: snap-ghost 0.22s steps(2, jump-none); }
.js-anim .snap.d1.is-in { animation-delay: 0.07s; }
.js-anim .snap.d2.is-in { animation-delay: 0.14s; }
@keyframes snap-ghost {
  0% { box-shadow: inset 0 0 0 1px var(--signal); }
  100% { box-shadow: none; }
}

/* ---------- the scrub entry ---------- */

.scrub {
  position: relative;
  height: 340svh;
}
.scrub .stage {
  position: sticky; top: 0; height: 100svh;
  overflow: hidden;
}
.scrub .stage > img, .scrub .stage > canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.scrub .stage > canvas { z-index: 1; }
.scrub .stage::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(10, 11, 13, 0.7), transparent 22%),
    linear-gradient(to top, rgba(10, 11, 13, 0.85), transparent 30%);
  pointer-events: none;
}
.scrub-copy {
  position: absolute; z-index: 2;
  left: var(--rim); bottom: calc(var(--rim) * 2.4);
  max-width: min(760px, 84vw);
}
.scrub-meter {
  position: absolute; z-index: 2;
  right: var(--rim); bottom: calc(var(--rim) * 2.4);
  text-align: right; color: var(--hud);
}
.scrub-cue {
  position: absolute; z-index: 2; left: 50%; bottom: 12px;
  transform: translateX(-50%);
  color: var(--steel);
}
/* chapter lines that swap as the scrub progresses */
.scrub-line { display: none; }
.scrub-line.on { display: block; }

/* ---------- world blocks ---------- */

.block { padding: var(--block-y) var(--rim); position: relative; }
.block + .block { border-top: 1px solid var(--line); }
.block-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  margin-bottom: clamp(24px, 4vh, 44px);
}

/* ---------- the chart (peninsula SVG) ---------- */

.chart-wrap {
  display: grid; gap: clamp(20px, 3vw, 40px);
}
@media (min-width: 1000px) { .chart-wrap { grid-template-columns: 3fr 2fr; align-items: start; } }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .land { fill: var(--ground-hi); stroke: var(--line-strong); stroke-width: 1; }
.chart .grid line { stroke: var(--line); stroke-dasharray: 2 6; }
.chart .route { fill: none; stroke: var(--line-strong); stroke-width: 1.2; stroke-dasharray: 4 5; }
.chart .sector-dot { fill: var(--signal); }
.chart .sector-hit { fill: transparent; cursor: pointer; }
.chart text { font-family: var(--f-hud); font-size: 10.5px; fill: var(--steel); letter-spacing: 0.08em; }
.chart .sec { transition: opacity 0.15s; }
.chart .sec .ring { fill: none; stroke: var(--signal); opacity: 0; }
.chart .sec:hover .ring, .chart .sec.lit .ring { opacity: 0.9; }
.chart .sec:hover text, .chart .sec.lit text { fill: var(--white); }

.chart-legend { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.chart-row {
  display: grid; grid-template-columns: 64px 1fr auto;
  gap: 12px; align-items: center;
  background: var(--ground);
  padding: 13px 14px;
  text-decoration: none; color: inherit;
  transition: background 0.12s;
}
.chart-row:hover, .chart-row:focus-visible { background: var(--panel); color: inherit; }
.chart-row .cr-name { font-family: var(--f-mega); font-size: 1.15rem; letter-spacing: 0.04em; }
.chart-row:hover .cr-name { color: var(--signal); }

/* ---------- fleet strip (index) ---------- */

.fleet { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.machine-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  min-height: clamp(300px, 44vh, 460px);
  background: var(--ground);
  text-decoration: none; color: inherit;
  overflow: hidden;
  isolation: isolate;
}
.machine-row:hover { color: inherit; }
.machine-media { position: relative; overflow: hidden; }
.machine-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease), filter 0.4s;
  filter: saturate(0.92);
}
.machine-row:hover .machine-media img { transform: scale(1.03); filter: saturate(1.05); }
.machine-brief {
  position: relative; z-index: 2;
  padding: clamp(18px, 3vw, 40px);
  display: grid; align-content: center; gap: 12px;
}
.machine-code {
  position: absolute; top: 8px; right: 12px; z-index: 1;
  font-family: var(--f-mega);
  font-size: clamp(5rem, 11vw, 10rem);
  line-height: 1; color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  pointer-events: none;
  transition: -webkit-text-stroke-color 0.2s, color 0.2s;
}
.machine-row:hover .machine-code { -webkit-text-stroke-color: var(--signal-deep); }
.machine-name { font-family: var(--f-mega); font-size: clamp(2.4rem, 6vw, 4.8rem); line-height: 0.9; letter-spacing: 0.01em; }
.machine-stats {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  color: var(--steel);
}
.machine-stats b { color: var(--white); font-weight: 400; }
.machine-go {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--signal);
}
.machine-go .arr { transition: transform 0.2s var(--ease); }
.machine-row:hover .machine-go .arr { transform: translateX(6px); }
.machine-row:nth-child(even) .machine-media { order: 2; }
@media (max-width: 860px) {
  .machine-row { grid-template-columns: 1fr; min-height: 0; }
  .machine-row:nth-child(even) .machine-media { order: 0; }
  .machine-media { aspect-ratio: 16 / 9; }
}

/* ---------- machine page: the plate ---------- */

.plate {
  position: relative; min-height: 100svh;
  display: grid; align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.plate .media { position: absolute; inset: -4%; }
.plate .media img { width: 100%; height: 100%; object-fit: cover; }
.plate::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(10, 11, 13, 0.62), transparent 24%),
    linear-gradient(to top, rgba(10, 11, 13, 0.9), rgba(10, 11, 13, 0.25) 42%, transparent 66%);
  pointer-events: none;
}
.plate-mega {
  position: absolute; z-index: 0; left: 0; right: 0; top: 10vh;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(154, 163, 178, 0.4);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
}
.plate-copy {
  position: relative; z-index: 2;
  padding: 0 var(--rim) calc(var(--rim) * 2.2);
  display: grid; gap: 14px;
  max-width: 1500px;
}
.plate-kicker { color: var(--hud); }
.plate-name { font-size: clamp(3.4rem, 12vw, 11rem); }
.plate-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; }
.plate-note { max-width: 46ch; color: var(--steel); }

/* key figure trio riding the plate bottom */
.trio {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
  clip-path: var(--cut-tl);
}
.trio .cell { background: rgba(10, 11, 13, 0.82); padding: 14px 16px 12px; }
.trio .v { font-family: var(--f-mega); font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1; }
.trio .v sub { font-family: var(--f-hud); font-size: 10px; vertical-align: baseline; color: var(--steel); letter-spacing: 0.08em; }
@media (max-width: 640px) { .trio { grid-template-columns: 1fr; } }

/* ---------- spec HUD panels ---------- */

.hud-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  clip-path: var(--cut-tl);
}
.hud-panel .hp-head {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--steel);
}
.hud-panel .hp-body { padding: clamp(14px, 2vw, 22px); }

.specbars { display: grid; gap: 14px; }
.specbar .sb-line { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.specbar .sb-line .sb-v { color: var(--white); }
.specbar .rail { height: 3px; background: var(--line); position: relative; }
.specbar .fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--signal);
  transition: width 0.7s var(--ease);
}
.specbar .fill.cy { background: var(--hud); }

.duo {
  display: grid; gap: clamp(18px, 2.6vw, 36px);
  align-items: start;
}
@media (min-width: 980px) { .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* engineering ledger rows */
.ledger { border-top: 1px solid var(--line-strong); }
.ledger .lrow {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
}
.ledger .lrow .lv { color: var(--white); }
.ledger .lrow .lv.computed { color: var(--hud); }

/* ---------- the sweep stage ---------- */

.sweep-stage {
  position: relative;
  border: 1px solid var(--line);
  clip-path: var(--cut-tl);
  overflow: hidden;
  cursor: ew-resize;
  touch-action: pan-y;
}
.sweep-stage img { width: 100%; }
.sweep-glare {
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.sweep-stage input[type="range"] {
  -webkit-appearance: none; appearance: none;
  position: absolute; left: 10px; right: 10px; bottom: 8px;
  width: calc(100% - 20px);
  height: 22px; background: transparent;
  cursor: ew-resize;
}
.sweep-stage input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--line-strong); }
.sweep-stage input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -8px;
  background: var(--signal);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.sweep-stage input[type="range"]::-moz-range-track { height: 2px; background: var(--line-strong); }
.sweep-stage input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border: 0; border-radius: 0;
  background: var(--signal);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.sweep-tag {
  position: absolute; top: 10px; left: 12px;
  color: var(--steel);
  pointer-events: none;
}

/* ---------- gallery plates ---------- */

.plates-2 {
  display: grid; gap: clamp(16px, 2.4vw, 30px);
}
@media (min-width: 820px) { .plates-2 { grid-template-columns: 3fr 2fr; } }
.gal {
  position: relative; border: 1px solid var(--line);
  clip-path: var(--cut-tl);
}
.gal img { width: 100%; }
.gal figcaption {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  color: var(--steel);
}

/* ---------- machine footer nav (prev / next) ---------- */

.mnav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.mnav a {
  background: var(--ground);
  padding: clamp(22px, 4vh, 44px) var(--rim);
  text-decoration: none; color: inherit;
  display: grid; gap: 6px;
  transition: background 0.15s;
}
.mnav a:hover { background: var(--panel); }
.mnav .mn-name { font-family: var(--f-mega); font-size: clamp(1.6rem, 4vw, 3rem); }
.mnav a:hover .mn-name { color: var(--signal); }
.mnav .next { text-align: right; }

/* ---------- compare (crossing page) ---------- */

.compare-pick { display: flex; flex-wrap: wrap; gap: 10px; }
.pick {
  font-family: var(--f-hud); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--panel); color: var(--steel);
  border: 1px solid var(--line-strong);
  padding: 10px 16px; cursor: pointer;
  clip-path: var(--cut);
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.pick[aria-pressed="true"] { background: var(--signal); color: var(--ground); border-color: var(--signal); }
.pick:hover { color: var(--white); border-color: var(--white); }
.pick[aria-pressed="true"]:hover { color: var(--ground); }

.vs { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 22px; }
@media (min-width: 860px) { .vs { grid-template-columns: 1fr 1fr; } }
.vs-col { background: var(--ground); padding: clamp(16px, 2.6vw, 30px); }
.vs-col .vs-name { font-family: var(--f-mega); font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: 4px; }
.vs-col .vs-img { border: 1px solid var(--line); margin: 12px 0 16px; clip-path: var(--cut-tl); }
.vs-col .vs-img img { width: 100%; }
.vs-empty {
  display: grid; place-items: center; min-height: 300px;
  color: var(--steel); text-align: center; padding: 20px;
}

/* ---------- forms ---------- */

.form-wrap { max-width: 760px; }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 7px; color: var(--steel); }
.field input, .field select, .field textarea {
  width: 100%;
  background: rgba(154, 163, 178, 0.06);
  border: 1px solid var(--line-strong);
  color: var(--white);
  font-family: var(--f-body); font-size: 1rem;
  padding: 13px 14px;
  border-radius: 0;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--signal); outline-offset: 2px; border-color: var(--signal);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239aa3b2' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.field select option { background: var(--panel); color: var(--white); }
.field .err { display: none; margin-top: 6px; color: var(--signal); }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--signal); }
.field.bad .err { display: block; }
.form-grid { display: grid; gap: 0 18px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .wide { grid-column: 1 / -1; } }

.stamped {
  border: 1px solid var(--signal);
  clip-path: var(--cut-tl);
  padding: 16px 18px;
  margin-top: 12px;
}
.stamped .ref { color: var(--signal); }

/* ---------- footer manifest ---------- */

.manifest {
  border-top: 1px solid var(--line-strong);
}
.manifest .m-row {
  display: grid; gap: 1px; background: var(--line);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 860px) { .manifest .m-row { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.m-cell { background: var(--ground); padding: 20px var(--rim); }
.m-cell .m-label { color: var(--steel); margin-bottom: 8px; }
.m-cell ul { list-style: none; }
.m-cell li + li { margin-top: 7px; }
.m-cell a { text-decoration: none; color: var(--steel); }
.m-cell a:hover { color: var(--signal); }
.m-mark { font-family: var(--f-mega); font-size: 1.5rem; letter-spacing: 0.14em; }
.m-mark i { font-style: normal; color: var(--signal); transform: skewX(-8deg); display: inline-block; }
.m-fine {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding: 14px var(--rim) calc(var(--rim) * 1.3);
  color: var(--steel);
}

/* ---------- the reticle & the wipe ---------- */

.reticle {
  position: fixed; left: 0; top: 0; z-index: 200;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s, scale 0.18s var(--ease);
}
.reticle::before, .reticle::after {
  content: ""; position: absolute; inset: 0;
}
.reticle::before {
  border: 1px solid rgba(255, 77, 0, 0.7);
  clip-path: polygon(0 0, 9px 0, 9px 1.5px, 1.5px 1.5px, 1.5px 9px, 0 9px,
    0 0);
}
.reticle::after {
  border: 1px solid rgba(255, 77, 0, 0.7);
  clip-path: polygon(100% 100%, calc(100% - 9px) 100%, calc(100% - 9px) calc(100% - 1.5px),
    calc(100% - 1.5px) calc(100% - 1.5px), calc(100% - 1.5px) calc(100% - 9px), 100% calc(100% - 9px), 100% 100%);
}
.reticle.on { opacity: 1; }
.reticle.hot { scale: 0.62; }

.wipe {
  position: fixed; inset: 0; z-index: 250;
  background: var(--signal);
  clip-path: polygon(0 0, 0 0, -12% 100%, -12% 100%);
  pointer-events: none;
}
.wipe.go {
  animation: wipe-in 0.28s var(--ease) forwards;
}
@keyframes wipe-in {
  to { clip-path: polygon(0 0, 112% 0, 100% 100%, -12% 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .reticle { display: none; }
  .wipe { display: none; }
}

/* ---------- utilities ---------- */

.foot-note { margin-top: 10px; }
.mt-14 { margin-top: 14px; }
.mt-24 { margin-top: 24px; }
.max-52 { max-width: 52ch; }
.dim { color: var(--steel); }

/* ---------- responsive topbar ---------- */

@media (max-width: 560px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; padding-top: 12px; padding-bottom: 10px; }
  .wordmark { width: 100%; }
  .wordmark .sub { display: none; }
  .nav { width: 100%; justify-content: space-between; gap: 6px; }
  .nav a { font-size: 10px; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-anim .snap { opacity: 1; animation: none; }
  .machine-media img, .machine-go .arr, .btn-rail::after { transition: none; }
  .scrub { height: auto; }
  .scrub .stage { position: relative; height: 72svh; }
  .specbar .fill { transition: none; }
}