/* =====================================================================
   faucet — the whole visual identity is the :root block below. Nothing
   further down hardcodes a colour, a face or a size, so a reskin is these
   ~25 lines plus the PALETTE block in scene.js (the pixel hero has its own
   palette, because canvas cannot read CSS custom properties).

   THREE FACES, EACH WITH ONE JOB, and they do not swap:
     --pixel  headings, labels, buttons, nav, table heads. Furniture.
     --serif  every sentence on the page. Prose is NEVER set in the mono.
     --mono   figures, equations, addresses, anything columnar.

   That split is the whole reason this does not read as a printout. A page
   that sets its prose in a monospace face is a typewriter article however
   good the writing is.
   ===================================================================== */

/* fonts are loaded by a <link> in index.html, not an @import — an @import
   here serialises the download behind this stylesheet, and the page then
   measures `ch` against the fallback face and wraps headings wrong. */

:root {
  --ground: #0c1014;   /* the dark field. MUST match PALETTE.ground in scene.js */
  --sump:   #070a0e;   /* the darker band                                      */
  --panel:  #131a21;   /* raised boxes                                         */
  --panel2: #0f161d;   /* the recessed ones                                    */
  --line:   #26323d;   /* every rule                                           */
  --line2:  #1a232c;   /* the quieter rules inside a panel                     */

  --ink:    #e9eff4;   /* text                                                 */
  --mute:   #8496a5;   /* secondary prose                                      */
  --faint:  #5d6e7d;   /* captions, notes                                      */

  --amber:  #ffb454;   /* THE accent. one colour does every job.               */
  --amber-hi: #ffd79a;
  --amber-lo: #c07f2c;
  --amber-wash: rgba(255, 180, 84, 0.10);

  --chrome: #9db1c4;   /* the metal, for furniture that should read as pipe    */
  --live:   #6fd8a8;
  --bad:    #e0664f;
  --pump:   #00ff88;   /* the buy button, and only the buy button              */

  --pixel: "Silkscreen", monospace;
  --serif: "Source Serif 4", Georgia, serif;
  --mono:  "Space Mono", ui-monospace, monospace;

  --pad: clamp(1rem, 4vw, 2.75rem);
  --wrap: 940px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ---------- nav ---------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem var(--pad) 1.5rem;
  color: var(--ink);
  /* A fade rather than a bar. The nav is fixed over a dark page, so prose
     scrolling underneath collided with it — a solid strip would cut the hero
     in half, and this reads as nothing at all until something passes behind
     it. Not a backdrop-filter: on a page this dark it costs a compositor
     layer and buys nothing visible. */
  background: linear-gradient(180deg,
    var(--ground) 0%, rgba(12, 16, 20, 0.92) 55%, rgba(12, 16, 20, 0) 100%);
}
.nav-brand { font-family: var(--pixel); font-size: 0.85rem; letter-spacing: 0.02em; }
.nav-links {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 0.35rem 1rem;
  font-family: var(--mono); font-size: 0.72rem;
  text-transform: lowercase; color: var(--mute);
}
.nav-links a:hover { color: var(--amber); }
.nav-links a { position: relative; padding-bottom: 2px; }
.nav-links a.on { color: var(--amber); }
.nav-links a.on::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--amber);
}

.nav-left { display: flex; align-items: center; gap: 0.85rem; }
.nav-live {
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--amber-lo);
  border-radius: 999px;
  font-family: var(--mono); font-size: 0.66rem;
  color: var(--amber);
  white-space: nowrap;
}
@media (width <= 760px) { .nav-live { display: none; } }

/* ---------- hero --------------------------------------------------- */

.hero { position: relative; display: grid; min-height: 100dvh; }
.hero-stage { position: absolute; inset: 0; z-index: 0; }

.scene-canvas {
  display: block;
  width: 100%; height: 100%;
  background: #0c1014;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.hero-plate {
  position: relative;
  z-index: 2;
  place-self: end start;
  max-width: min(40rem, 92vw);
  padding: 0 var(--pad) clamp(2rem, 6vh, 3.5rem);
  /* the reveal lives in the boot block near the bottom of this file, as a
     transition rather than a keyframe animation. See the note there. */
}
.hero-kicker {
  margin: 0 0 0.7rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
}
.brand {
  margin: 0 0 0.9rem;
  font-family: var(--pixel);
  font-size: clamp(2.9rem, 10.5vw, 5.4rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
  /* the wordmark is lit by the same thing the stream is */
  text-shadow: 0 0 26px rgba(255, 180, 84, 0.22), 3px 3px 0 rgba(255, 180, 84, 0.14);
}
.claim {
  margin: 0 0 1rem;
  max-width: 20ch;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3.8vw, 2.05rem);
  font-weight: 600;
  line-height: 1.32;
  color: var(--ink);
}
.tag {
  margin: 0 0 1.6rem;
  max-width: 40ch;
  font-size: clamp(0.98rem, 2.1vw, 1.12rem);
  line-height: 1.6;
  color: var(--mute);
}

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

.cta-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  padding: 0.72rem 1rem;
  border: 1px solid var(--line);
  /* notched pixel corners, not a radius — see the craft pass at the bottom */
  border-radius: 0;
  clip-path: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px,
                     100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%,
                     3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px));
  background: var(--panel);
  color: var(--ink);
  font-family: var(--pixel);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.btn:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-key {
  background: var(--amber); border-color: var(--amber); color: #17110a;
  box-shadow: 0 0 22px rgba(255, 180, 84, 0.22);
}
.btn-key:hover:not(:disabled) { background: var(--amber-hi); border-color: var(--amber-hi); color: #17110a; }
.btn-line { background: rgba(19, 26, 33, 0.72); }
.btn-pump { background: none; border-color: var(--pump); color: var(--pump); }
.btn-pump:hover:not(:disabled) { background: var(--pump); border-color: var(--pump); color: #05130c; }

/* ---------- bands -------------------------------------------------- */

.strip { position: relative; padding: clamp(4.5rem, 12vw, 7.5rem) 0; }
.strip-sump { background: var(--sump); }
.strip-grid {
  background-image: radial-gradient(rgba(157, 177, 196, 0.10) 0.7px, transparent 0.7px);
  background-size: 11px 11px;
}

/* THE PIPE RUN — the divider between every band. Not a rule: a length of
   chrome pipe seen edge-on, lit on top and shaded underneath, exactly the
   ramp the hero shades its cylinders with. It is the cheapest way to make
   the page read as plumbing rather than as a document with lines in it. */
.strip::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(180deg,
    #39485a 0 1px, #9db1c4 1px 2px, #66798e 2px 3px, #202b36 3px 4px);
  pointer-events: none;
}
/* every so often the pipe is dripping */
.strip-drip::after {
  content: "";
  position: absolute; top: 4px; left: clamp(2rem, 22vw, 16rem);
  width: 2px; height: 26px;
  background: linear-gradient(180deg, var(--amber) 0%, rgba(255, 180, 84, 0) 100%);
  pointer-events: none;
}

.wrap { width: min(var(--wrap), calc(100% - 2 * var(--pad))); margin: 0 auto; }

.phrase {
  margin: 0 0 1.6rem;
  max-width: 17ch;
  font-family: var(--pixel);
  font-size: clamp(1.3rem, 4vw, 2.2rem);
  line-height: 1.36;
  letter-spacing: 0.01em;
}

.slim { margin: 0 0 2rem; max-width: 42ch; color: var(--mute); }
.slim.wide { max-width: 56ch; }

/* ---------- the six facts ------------------------------------------ */

.plain-list { display: grid; margin: 0 0 2rem; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.plain-list li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.85rem 1.1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
.plain-n { padding-top: 0.35rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--amber); }
.plain-list h3 {
  margin: 0 0 0.5rem;
  max-width: 26ch;
  font-family: var(--pixel);
  font-size: clamp(0.82rem, 2.4vw, 1rem);
  line-height: 1.4;
  font-weight: 400;
}
.plain-list p { margin: 0; max-width: 54ch; color: var(--mute); }
.plain-cta { margin-top: 0.25rem; }

/* ---------- the meter ---------------------------------------------- */

.ledger { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.ledger-head, .ledger-foot {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0.9rem;
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  color: var(--mute);
}
.ledger-foot { border-bottom: 0; border-top: 1px solid var(--line); }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.tile {
  display: grid; gap: 0.35rem; align-content: start;
  padding: 1.3rem 1rem;
  border-right: 1px solid var(--line);
}
.tile:last-child { border-right: 0; }
.tile-k { font-family: var(--pixel); font-size: 0.55rem; letter-spacing: 0.09em; color: var(--faint); }
.tile-v {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(1.3rem, 3.8vw, 1.95rem);
  line-height: 1; letter-spacing: -0.02em;
  color: var(--amber);
  text-shadow: 0 0 18px rgba(255, 180, 84, 0.30);
}
.tile-n { font-family: var(--mono); font-size: 0.68rem; color: var(--faint); }
.tile-trend { font-family: var(--mono); font-size: 0.66rem; }
.tile-trend.up   { color: var(--live); }
.tile-trend.down { color: var(--bad); }
.tile-trend.flat { color: var(--faint); }

.ledger-rows { margin: 0; padding: 0; list-style: none; }
.ledger-rows li {
  display: grid;
  grid-template-columns: 9rem 1fr 1fr;
  gap: 0.5rem;
  padding: 0.72rem 0.9rem;
  border-bottom: 1px solid var(--line2);
  transition: background 0.12s ease;
}
.ledger-rows li:last-child { border-bottom: 0; }
.ledger-rows li:hover { background: rgba(255, 180, 84, 0.04); }
.ledger-rows .k { align-self: center; font-family: var(--pixel); font-size: 0.56rem; letter-spacing: 0.05em; color: var(--mute); }
.ledger-rows .v { font-family: var(--mono); font-size: 1rem; font-weight: 700; }
.ledger-rows .n { font-family: var(--mono); text-align: right; font-size: 0.72rem; color: var(--faint); }

/* ---------- prose blocks ------------------------------------------- */

.thesis-grid { display: grid; gap: 1.3rem; max-width: 56ch; }
.thesis-grid p { margin: 0; font-size: 1.05rem; color: var(--mute); }
.thesis-grid strong { color: var(--ink); font-weight: 600; }

.giant-eq {
  margin: 2.6rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: clamp(0.95rem, 3.2vw, 1.5rem);
  letter-spacing: 0.01em;
  color: var(--amber);
  text-shadow: 0 0 24px rgba(255, 180, 84, 0.25);
}

/* ---------- the live dot ------------------------------------------- */

.live-dot { width: 7px; height: 7px; background: var(--live); animation: pulse 1.6s steps(2, end) infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }

/* ---------- the worked calculation --------------------------------- */

.calc { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel2); }
.calc-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem 1rem;
  padding: 0.78rem 1rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--pixel); font-size: 0.62rem; letter-spacing: 0.07em;
}
.calc-sub { margin-left: auto; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0; color: var(--faint); }
.calc-body { display: grid; }
.calc-row {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: baseline; gap: 0.4rem 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--line2);
}
.calc-row:last-child { border-bottom: 0; }
.calc-name { font-family: var(--pixel); font-size: 0.6rem; letter-spacing: 0.04em; color: var(--amber); }
.calc-eq { font-size: 0.92rem; color: var(--mute); }
.calc-sub2 { font-family: var(--mono); font-size: 0.8rem; color: var(--ink); word-break: break-word; }
.calc-out { font-family: var(--mono); font-weight: 700; font-size: 0.86rem; color: var(--amber); text-align: right; }
.calc-foot {
  margin: 0; padding: 0.9rem 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.86rem; color: var(--faint);
}
.calc-foot b { color: var(--ink); font-weight: 600; }

/* ---------- tables -------------------------------------------------- */

.proj-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.proj {
  width: 100%; min-width: 36rem;
  border-collapse: collapse;
  background: var(--panel);
  font-family: var(--mono);
  font-size: 0.82rem;
}
.proj th {
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--pixel); font-size: 0.54rem; letter-spacing: 0.05em;
  font-weight: 400; color: var(--mute);
  text-align: left; white-space: nowrap;
}
.proj td { padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--line2); white-space: nowrap; }
.proj tr:last-child td { border-bottom: 0; }
.proj tbody tr:hover td { background: rgba(255, 180, 84, 0.05); }
.proj .num { font-weight: 700; color: var(--ink); }
.proj .gain { font-weight: 700; color: var(--amber); }
.proj .say { font-family: var(--serif); white-space: normal; color: var(--mute); }
.proj-empty { font-family: var(--serif); color: var(--faint); font-style: italic; white-space: normal; }
.fine-light { margin: 0.9rem 0 0; font-size: 0.84rem; color: var(--faint); }
.fine-light b { color: var(--ink); font-weight: 600; }

/* ---------- the writeup --------------------------------------------- */

.tech { display: grid; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
/* grid items default to min-width:auto and refuse to shrink below their
   content, which stops .tech-code from ever scrolling inside itself and
   pushes the whole page sideways on a phone */
.tech-block { min-width: 0; padding: 1.5rem 1.3rem; border-bottom: 1px solid var(--line); }
.tech-block:last-child { border-bottom: 0; }
.tech-block h3 { margin: 0 0 0.7rem; font-family: var(--pixel); font-size: 0.76rem; font-weight: 400; letter-spacing: 0.02em; }
.tech-block p { margin: 0 0 0.8rem; max-width: 66ch; color: var(--mute); }
.tech-block p:last-child { margin-bottom: 0; }
.tech-block strong { color: var(--ink); font-weight: 600; }
.tech-code {
  margin: 0 0 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--sump);
  color: var(--amber);
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.55;
  white-space: pre;
  overflow-x: auto;
}

/* ---------- the pressure bands --------------------------------------- */

.regimes {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--panel);
}
.regimes > div {
  display: grid; gap: 0.4rem; align-content: start;
  padding: 1.2rem 1rem;
  border-right: 1px solid var(--line);
  transition: background 0.2s ease;
}
.regimes > div:last-child { border-right: 0; }
.r-name { font-family: var(--pixel); font-size: 0.7rem; }
.r-rule { font-family: var(--mono); font-size: 0.72rem; color: var(--faint); }
.r-turn { margin-top: 0.4rem; font-family: var(--mono); font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.r-note { font-size: 0.86rem; line-height: 1.5; color: var(--mute); }

/* the band the tap is actually in, lit */
.regimes > div.on { background: var(--amber-wash); }
.regimes > div.on .r-name { color: var(--amber); text-shadow: 0 0 16px rgba(255, 180, 84, 0.4); }
.regimes > div.on .r-turn { color: var(--amber); }

/* ---------- the trace ------------------------------------------------ */

.trace { margin-top: 1.25rem; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.trace-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--pixel); font-size: 0.54rem; letter-spacing: 0.09em;
}
.trace-sub { margin-left: auto; font-family: var(--mono); letter-spacing: 0; color: var(--faint); font-size: 0.7rem; }
.trace-canvas { display: block; width: 100%; height: 118px; }
.trace-foot { margin: 0; padding: 0.6rem 0.9rem; border-top: 1px solid var(--line2); font-size: 0.84rem; color: var(--faint); }

/* ---------- the force calculator -------------------------------------- */

.tradebox {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 1.2rem 1.25rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel);
}
.tradebox label { display: grid; gap: 0.5rem; font-family: var(--pixel); font-size: 0.56rem; letter-spacing: 0.07em; color: var(--mute); }
.tradebox .row { display: flex; align-items: center; gap: 0.5rem; }
.tradebox .cur { font-family: var(--mono); font-size: 1.25rem; font-weight: 700; color: var(--faint); }
.tradebox input {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--sump);
  font-family: var(--mono); font-size: 1.1rem; font-weight: 700;
  color: var(--ink);
}
.tradebox input:focus { outline: 2px solid var(--amber-lo); outline-offset: 1px; }
.trade-out { display: grid; gap: 0.3rem; text-align: right; }
.trade-big {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(1.15rem, 3.4vw, 1.65rem);
  color: var(--amber);
  text-shadow: 0 0 18px rgba(255, 180, 84, 0.28);
}
.trade-note { font-size: 0.84rem; color: var(--faint); }

/* ---------- the glossary ---------------------------------------------- */

.gloss { display: grid; grid-template-columns: 10rem minmax(0, 1fr); margin: 0; border-top: 1px solid var(--line); }
.gloss dt {
  padding: 0.9rem 0.9rem 0.9rem 0;
  border-bottom: 1px solid var(--line2);
  font-family: var(--pixel); font-size: 0.58rem; letter-spacing: 0.05em;
  color: var(--amber);
}
.gloss dd {
  margin: 0; padding: 0.9rem 0;
  border-bottom: 1px solid var(--line2);
  font-size: 0.98rem; color: var(--mute);
}
.gloss dt:last-of-type, .gloss dd:last-of-type { border-bottom: 0; }

/* ---------- links ----------------------------------------------------- */

.prog-id {
  display: block; margin: 0 0 1.3rem;
  padding: 0.85rem 1rem;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--sump);
  font-family: var(--mono);
  font-size: clamp(0.68rem, 1.8vw, 0.88rem);
  line-height: 1.6;
  word-break: break-all;
  cursor: pointer;
  color: var(--mute);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.prog-id:hover { color: var(--amber); border-color: var(--amber-lo); }

.link-rail { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-family: var(--pixel); font-size: 0.62rem; }
.link-rail a { padding-bottom: 3px; border-bottom: 1px solid var(--line); }
.link-rail a:hover { color: var(--amber); border-bottom-color: var(--amber); }

.end-phrase { max-width: 20ch; }

/* ---------- the standpipe (scroll gauge) -------------------------------- */

.gauge {
  position: fixed; top: 0; bottom: 0; left: 0;
  width: 6px; z-index: 60;
  background: linear-gradient(90deg, #202b36 0 1px, #39485a 1px 3px, #1a232c 3px 6px);
  pointer-events: none;
}
.gauge-fill {
  position: absolute; top: 0; left: 1px; right: 1px;
  height: 0;
  background: linear-gradient(180deg, var(--amber-hi), var(--amber-lo));
  box-shadow: 0 0 12px rgba(255, 180, 84, 0.5);
}

/* ---------- the pixel icon system --------------------------------------
   One 12x12 glyph per section, drawn in the same idiom as the hero. */
.ph-ic { display: block; margin-bottom: 0.95rem; color: var(--amber); }
.ph-ic svg { display: block; width: 26px; height: 26px; }

/* the oversized valve mark on the no-schedule band */
.mark-big {
  float: right;
  width: clamp(86px, 15vw, 140px);
  margin: 0 0 1.3rem 1.75rem;
  color: var(--chrome);
  opacity: 0.5;
}
.mark-big svg { display: block; width: 100%; height: auto; }
#schedule .wrap::after { content: ""; display: block; clear: both; }

/* ---------- the footer --------------------------------------------------- */

.foot-drip {
  height: 16px;
  background-color: var(--ground);
  background-image:
    linear-gradient(180deg, #39485a 0 1px, #9db1c4 1px 2px, #66798e 2px 3px, #202b36 3px 4px),
    repeating-linear-gradient(90deg, var(--amber) 0 2px, transparent 2px 34px);
  background-size: 100% 4px, 34px 12px;
  background-position: 0 0, 6px 4px;
  background-repeat: repeat-x, repeat-x;
  opacity: 0.85;
}
.site-foot { padding: clamp(2.5rem, 7vw, 4rem) 0 clamp(2rem, 5vw, 3rem); background: var(--sump); color: var(--mute); }
.foot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.foot-col h4 { margin: 0 0 0.85rem; font-family: var(--pixel); font-size: 0.58rem; letter-spacing: 0.09em; font-weight: 400; color: var(--ink); }
.foot-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; font-size: 0.92rem; }
.foot-col a:hover { color: var(--amber); }
.foot-note {
  margin: 2.6rem 0 0; padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem; line-height: 1.7; max-width: 66ch;
  color: var(--faint);
}
.foot-tick { font-family: var(--pixel); font-size: 0.58rem; letter-spacing: 0.08em; color: var(--ink); }

/* ---------- focus, everywhere -------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 2px;
}
::selection { background: var(--amber); color: #17110a; }

.proj-wrap { scrollbar-color: var(--amber-lo) var(--sump); }
.proj-wrap::-webkit-scrollbar { height: 10px; }
.proj-wrap::-webkit-scrollbar-track { background: var(--sump); }
.proj-wrap::-webkit-scrollbar-thumb { background: var(--amber-lo); border-radius: 8px; }

/* =====================================================================
   the boot sequence
   ===================================================================== */

.boot {
  position: absolute;
  left: var(--pad);
  bottom: clamp(1.5rem, 6vh, 3.5rem);
  z-index: 3;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  transition: opacity 0.3s ease;
}
.boot.done { opacity: 0; pointer-events: none; }

.boot-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.boot-lines li {
  display: grid; grid-template-columns: 9rem auto; gap: 0.9rem;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.boot-lines li.in { opacity: 1; transform: none; }
.bk { color: var(--faint); }
.bv { color: var(--amber); }
.bv.ok   { color: var(--live); }
.bv.warn { color: #c9922f; }

.boot-done {
  margin: 0.9rem 0 0;
  font-family: var(--pixel); font-size: 0.62rem; letter-spacing: 0.08em;
  color: var(--ink);
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.boot-done.in { opacity: 1; transform: none; }

/* The plate is held back until the tap actually finishes opening, not on a
   timer that would drift if BOOT_MS changed.

   A TRANSITION, not a keyframe animation, deliberately. An animation
   overrides the element while running, so if it ever stalls the hero copy
   is stranded at opacity 0 — wordmark, claim and buttons all invisible. A
   transition cannot do that: if it does not run, the property is already at
   its final value. It also defaults to VISIBLE, so a dead script leaves the
   copy on the page rather than hiding it. Do not change this back. */
.hero-plate { transition: opacity 0.55s ease, transform 0.55s ease; }
.hero-plate.pending { opacity: 0; transform: translateY(14px); }
.hero-plate.up { opacity: 1; transform: none; }

/* ---- scroll reveal ------------------------------------------------------
   The attribute is only ever added by JS, so a dead script leaves every
   section visible. Same fail-open rule as the hero plate. */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; }
[data-reveal].in { opacity: 1; transform: none; }

/* ---------- narrow --------------------------------------------------- */

@media (width <= 900px) {
  .regimes { grid-template-columns: repeat(2, 1fr); }
  .regimes > div:nth-child(2n) { border-right: 0; }
  .regimes > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (width <= 820px) {
  .ledger-rows li { grid-template-columns: 1fr; }
  .ledger-rows .n { text-align: left; }
  .calc-sub { margin-left: 0; }
  .calc-row { grid-template-columns: 1fr; gap: 0.3rem; }
  .calc-out { text-align: left; }
  .tiles { grid-template-columns: 1fr; }
  .tile { border-right: 0; border-bottom: 1px solid var(--line); }
  .tile:last-child { border-bottom: 0; }
  .tradebox { grid-template-columns: 1fr; }
  .trade-out { text-align: left; }
  .foot-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .nav { background: rgba(12, 16, 20, 0.92); }
  .plain-list li > div, .thesis-grid { min-width: 0; }
  .gauge { width: 4px; background: linear-gradient(90deg, #202b36 0 1px, #39485a 1px 3px, #1a232c 3px 4px); }
  .nav { background: linear-gradient(180deg, var(--ground) 0%, rgba(12, 16, 20, 0.96) 70%, rgba(12, 16, 20, 0) 100%); }
}

@media (width <= 640px) {
  .regimes { grid-template-columns: 1fr; }
  .regimes > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .regimes > div:last-child { border-bottom: 0; }
  .gloss { grid-template-columns: 1fr; }
  .gloss dt { padding-bottom: 0.2rem; border-bottom: 0; }
  .gloss dd { padding-top: 0.15rem; }
  .boot-lines li { grid-template-columns: 7.5rem auto; gap: 0.6rem; }
  .boot { font-size: 0.62rem; }
}

@media (width <= 440px) {
  .nav { align-items: flex-start; }
  .nav-brand { font-size: 0.72rem; }
  .nav-links { gap: 0.3rem 0.7rem; font-size: 0.66rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boot { display: none; }
  .hero-plate { transition: none; }
  .hero-plate.pending { opacity: 1; transform: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   craft pass two — the room, the instruments, the feedback. Each block
   independent; delete any one and nothing else breaks.
   ===================================================================== */

/* ---- the hero vignette --------------------------------------------------
   A soft falloff toward the corners, centred just off the tap. The pixel
   buffer is flat by construction; this is the one non-pixel cheat allowed,
   because it reads as the room's light rather than as an effect. */
.hero-stage::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(95% 80% at 60% 34%, transparent 52%, rgba(5, 8, 11, 0.62) 100%);
}

/* ---- buttons respond like hardware -------------------------------------- */
.btn:hover:not(:disabled) { box-shadow: 0 0 18px rgba(255, 180, 84, 0.15); }
.btn:active:not(:disabled) { transform: translateY(1px); }

/* ---- a reading that just changed flashes once --------------------------- */
.bump { animation: value-bump 0.55s ease-out; }
@keyframes value-bump {
  0% { filter: brightness(2); }
  100% { filter: brightness(1); }
}

/* ---- the drip divider actually drips ------------------------------------ */
.strip-drip::after { animation: drip-fall 8s ease-in infinite; }
@keyframes drip-fall {
  0%, 55% { height: 12px; opacity: 0.35; }
  76%     { height: 30px; opacity: 0.95; }
  82%, 100% { height: 12px; opacity: 0.35; }
}

/* ---- writeup blocks answer the cursor ----------------------------------- */
.tech-block { position: relative; }
.tech-block::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: transparent;
  transition: background 0.2s ease;
}
.tech-block:hover::before { background: var(--amber-lo); }

/* ---- the page scrollbar matches the plumbing ----------------------------- */
html { scrollbar-color: var(--line) var(--sump); }
body::-webkit-scrollbar { width: 12px; }
body::-webkit-scrollbar-track { background: var(--sump); }
body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
body::-webkit-scrollbar-thumb:hover { background: var(--amber-lo); }

@media (prefers-reduced-motion: reduce) {
  .bump { animation: none; }
  .strip-drip::after { animation: none; }
  .btn:active:not(:disabled) { transform: none; }
}