/* =====================================================================
   drill — 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 ~20 lines plus PALETTE in drill-scene.js (canvas can't read CSS
   custom properties, so the hero keeps its own copy — see the note
   there).

   Dark ground, one lit accent, mono for figures, a slab serif for the
   one stretch of actual prose. Fonts load via <link> in index.html, not
   @import — an @import here serialises behind this stylesheet and the
   page measures headings against the fallback face while it waits.
   ===================================================================== */

:root {
  --void:       #07090f;   /* the ground                              */
  --ink:        #e9edf2;   /* primary text                            */
  --mute:       #848b94;   /* secondary text                          */
  --line:       #1d212b;   /* hairlines                                */

  --panel:      #0f131c;   /* boxed rows: the log, the stat rail       */
  --panel-line: #252a36;

  --ember:      #ffe81a;   /* the one accent. every job, nothing else  */
  --ember-dim:  rgba(255, 232, 26, 0.28);
  --ember-glow: rgba(255, 232, 26, 0.55);

  --pixel: "Silkscreen", monospace;                 /* headings, labels, nav, buttons */
  --mono:  "Space Mono", ui-monospace, monospace;   /* figures, the log                */
  --serif: "Zilla Slab", serif;                     /* the manifesto, and only that    */

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

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

/* Any author `display` beats the UA's [hidden] rule, so an element with
   a display of its own stays visible when hidden. That shipped the CA
   button as an empty box on every pre-launch render. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.55;
  -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.9rem var(--pad);
  color: var(--ink);
  background: linear-gradient(rgba(10, 8, 6, 0.75), transparent);
}
.nav-brand { font-family: var(--pixel); font-size: 0.85rem; letter-spacing: 0.03em; color: var(--ember); }
.nav-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem 1.1rem; font-size: 0.72rem; text-transform: lowercase; letter-spacing: 0.03em; color: var(--mute); }
.nav-links a:hover { color: var(--ember); }
/* Five routes in Silkscreen do not fit 390px at the desktop size, and the
   last one dropped to a second line on its own, which reads as a mistake
   rather than as a wrap. */
@media (max-width: 640px) {
  .nav { padding-left: 0.8rem; padding-right: 0.8rem; }
  .nav-links { gap: 0.3rem 0.62rem; font-size: 0.62rem; }
  .nav-brand { font-size: 0.72rem; }
}

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

/* The scene's floor plate sits at 52% of the canvas height. The hero is sized
   and the plate padded so the text block lands in the strata BELOW that
   line — the chart is above ground, the writing is under it. Getting
   this wrong put the bright floor rule straight through the wordmark. */
.hero { position: relative; display: grid; min-height: max(700px, min(94vh, 850px)); border-bottom: 1px solid var(--line); }
/* Shorter on a phone: the scene covers, so a tall hero on a narrow
   screen means a very deep horizontal crop and the trace loses most of
   its history off the left. */
@media (max-width: 640px) { .hero { min-height: max(660px, 74vh); } }
.hero-stage { position: absolute; inset: 0; z-index: 0; }
.drill-canvas {
  display: block; width: 100%; height: 100%;
  background: #070503;
  image-rendering: pixelated; image-rendering: crisp-edges;
}

.hero-plate {
  position: relative; z-index: 2;
  place-self: end start;
  width: 100%;
  padding: 0 var(--pad) clamp(1rem, 3vh, 1.6rem);
  display: flex; flex-direction: column; gap: 0.4rem;
}
.kicker {
  font-family: var(--pixel); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ember); background: rgba(10, 8, 6, 0.7); border: 1px solid var(--panel-line);
  width: fit-content; padding: 0.3rem 0.55rem;
}
.brand {
  margin: 0; font-family: var(--pixel); font-size: clamp(2.3rem, 8.4vw, 4.4rem); line-height: 0.92;
  letter-spacing: -0.01em; color: #fff8ef;
  text-shadow: 0 2px 0 #07050300, 0 0 34px rgba(255, 157, 61, 0.22);
}
.koan { margin: 0; max-width: 30ch; font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 2.4vw, 1.25rem); color: var(--mute); }

.readout { display: flex; align-items: baseline; gap: 0.85rem; flex-wrap: wrap; margin-top: 0.15rem; }
.regime {
  font-family: var(--pixel); font-size: 0.72rem; letter-spacing: 0.14em; padding: 0.3rem 0.6rem;
  border: 1px solid var(--panel-line); color: var(--mute);
}
.regime.is-holding { color: var(--ember); border-color: var(--ember-dim); }
.regime.is-drilling { color: #fff; background: var(--ember); border-color: var(--ember); animation: pulse 0.9s steps(4) infinite; }
.regime.is-responding { color: var(--ember); border-color: var(--ember); }
.mcap { font-family: var(--mono); font-size: clamp(1.6rem, 5vw, 2.6rem); font-variant-numeric: tabular-nums; color: var(--ink); }
.status { font-size: 0.78rem; color: var(--mute); }

/* The hero readout rail. Cells divided by hairlines rather than boxed as
   cards: a card grid in a hero reads as a marketing layout, a divided rail
   reads as an instrument, and the second one is the register this page is
   in. Sits on a scrim so it stays legible over the rock. */
.hero-rail {
  display: flex; flex-wrap: wrap; margin-top: 0.5rem;
  border: 1px solid var(--panel-line);
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  width: fit-content; max-width: 100%;
}
.hr-cell {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.45rem 1rem; border-right: 1px solid var(--panel-line);
}
.hr-cell:last-child { border-right: none; }
.hr-k {
  font-family: var(--pixel); font-size: 0.56rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--mute); white-space: nowrap;
}
.hr-v {
  font-family: var(--mono); font-size: 1.05rem; color: var(--ember);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.hr-v.is-idle { color: var(--mute); }
.hero-last {
  margin: 0.5rem 0 0; font-family: var(--serif); font-style: italic;
  font-size: 1rem; color: var(--mute); max-width: 46ch;
}
@media (max-width: 640px) {
  .hr-cell { padding: 0.45rem 0.8rem; flex: 1 1 50%; }
  .hr-cell:nth-child(2) { border-right: none; }
  .hr-cell:nth-child(-n+2) { border-bottom: 1px solid var(--panel-line); }
  .hr-v { font-size: 0.92rem; }
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

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

.strip { border-bottom: 1px solid var(--line); }
.strip-in { max-width: var(--wrap); margin: 0 auto; padding: clamp(2.5rem, 8vh, 4.5rem) var(--pad); }

.eyebrow { font-family: var(--pixel); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ember); margin: 0 0 1.1rem; }

/* manifesto: the one place prose lives, so it gets the serif */
.manifest p {
  font-family: var(--serif); font-size: clamp(1.02rem, 2.1vw, 1.2rem); line-height: 1.65;
  color: var(--ink); max-width: 62ch; margin: 0 0 1.1rem;
}
.manifest p:last-child { margin-bottom: 0; color: var(--mute); }

/* stat rail */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--panel-line); border: 1px solid var(--panel-line); }
.stat { background: var(--panel); padding: 1.1rem 1rem; }
.stat-label { font-family: var(--pixel); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.stat-value { font-family: var(--mono); font-size: clamp(1.3rem, 3.2vw, 1.7rem); color: var(--ink); margin-top: 0.35rem; font-variant-numeric: tabular-nums; }
.stat-value.is-lit { color: var(--ember); }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* the log */
/* A sentence, so it gets the serif. It was inheriting the body mono, which
   is the typewriter trap in miniature: mono is for figures and labels, and
   these are prose however short they are. */
.log-note {
  font-family: var(--serif); font-size: 0.98rem; color: var(--mute);
  margin: -0.4rem 0 1.4rem; max-width: 62ch;
}
.log { display: flex; flex-direction: column; border: 1px solid var(--panel-line); background: var(--panel); }
.log-row {
  display: grid; grid-template-columns: 6.5rem 1fr 5rem 12.5rem;
  gap: 0.75rem; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--panel-line);
  font-size: 0.82rem; align-items: center;
}
.log-row:last-child { border-bottom: none; }
.log-row.is-head { color: var(--mute); font-family: var(--pixel); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; }
.log-time { color: var(--mute); font-variant-numeric: tabular-nums; }
.log-depth { color: var(--ember); font-variant-numeric: tabular-nums; }
.log-duration { color: var(--mute); font-variant-numeric: tabular-nums; }
.log-response { color: var(--mute); font-variant-numeric: tabular-nums; }
.log-response.is-lit { color: var(--ink); }
.log-empty { padding: 1.6rem 0.9rem; color: var(--mute); text-align: center; font-size: 0.85rem; }
@media (max-width: 640px) {
  .log-row { grid-template-columns: 5rem 1fr 5rem; }
  .log-response { display: none; }
}

/* ---------- the instrument -------------------------------------------- */

.inline-link { color: var(--ember); border-bottom: 1px solid var(--ember-dim); }
.inline-link:hover { border-color: var(--ember); }

.gauge { border: 1px solid var(--panel-line); background: var(--panel); }
.gauge-row {
  display: grid; grid-template-columns: 10rem 7rem 1fr;
  gap: 0.9rem; align-items: baseline;
  padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--panel-line);
}
.gauge-row:last-child { border-bottom: none; }
.gauge-k {
  font-family: var(--pixel); font-size: 0.6rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mute);
}
.gauge-v {
  font-family: var(--mono); font-size: 0.95rem; color: var(--ember);
  font-variant-numeric: tabular-nums;
}
.gauge-v.is-fixed { color: var(--mute); }      /* a constant, not a reading */
.gauge-n { font-family: var(--serif); font-size: 0.92rem; color: var(--mute); }
@media (max-width: 640px) {
  .gauge-row { grid-template-columns: 1fr auto; row-gap: 0.2rem; }
  .gauge-n { grid-column: 1 / -1; font-size: 0.86rem; }
}

/* ---------- the route index -------------------------------------------- */

.rooms { border-top: 1px solid var(--panel-line); }
.room {
  display: grid; grid-template-columns: 2.5rem 8rem 1fr;
  gap: 0.9rem; align-items: baseline;
  padding: 0.85rem 0.2rem; border-bottom: 1px solid var(--panel-line);
}
.room:hover { background: var(--panel); }
.room:hover .room-t { color: var(--ember); }
.room-n { font-family: var(--mono); font-size: 0.78rem; color: var(--mute); }
.room-t {
  font-family: var(--pixel); font-size: 0.82rem; letter-spacing: 0.02em;
  color: var(--ink);
}
.room-d { font-family: var(--serif); font-size: 0.95rem; color: var(--mute); }
@media (max-width: 640px) {
  .room { grid-template-columns: 2.5rem 1fr; row-gap: 0.15rem; }
  .room-d { grid-column: 2 / -1; }
}

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

.foot { padding: clamp(2rem, 6vh, 3rem) var(--pad) clamp(2.5rem, 8vh, 4rem); text-align: center; }
.foot-line { font-family: var(--serif); font-style: italic; color: var(--mute); max-width: 36ch; margin: 0 auto 1.6rem; }
.foot-links { display: flex; justify-content: center; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.foot-links a { font-family: var(--pixel); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); border-bottom: 1px solid transparent; padding-bottom: 2px; }
.foot-links a:hover { color: var(--ember); border-color: var(--ember); }
.ca {
  display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.78rem;
  color: var(--mute); background: var(--panel); border: 1px solid var(--panel-line); padding: 0.45rem 0.7rem; cursor: pointer;
}
.ca:hover { color: var(--ember); border-color: var(--ember-dim); }
.ca-copied { color: var(--ember); }