/* ============================================================================
   /articles/rust-rewrite  --  "Eight services, one weekend, no runtime"

   Its own world, deliberately not the home page's specimen survey and not either
   sibling article's. A night test cell: black granite, machined metal, one cold
   blade of instrument light. Two inks carry the entire argument -- sodium amber
   is always the BEFORE number (the runtime: hot, heavy, still burning) and ice
   blue is always the AFTER one (the binary: cold, thin, exact). Two pale
   calibration-certificate plates hold the evidence tables.
   ========================================================================== */

@import url('/articles/rust-rewrite/assets/fonts.css');

:root {
  /* --- the test cell ------------------------------------------------------ */
  --ink-950: #05080b;
  --ink-900: #0a1016;
  --ink-850: #0e151d;
  --ink-800: #131c25;
  --ink-700: #1b2732;
  --ink-600: #26343f;
  --hair: rgba(150, 178, 200, 0.16);
  --hair-strong: rgba(150, 178, 200, 0.32);

  --bone: #e9eff5;
  --mist: #a8b8c6;
  /* 4.5:1+ on --ink-900, --ink-850 and --ink-800, measured rather than eyeballed. */
  --mist-dim: #8fa2b2;

  /* --- before: the runtime ----------------------------------------------- */
  --amber: #ff8a3d;
  --amber-deep: #b8571c;
  --amber-soft: rgba(255, 138, 61, 0.14);
  --amber-line: rgba(255, 138, 61, 0.42);

  /* --- after: the binary -------------------------------------------------- */
  --ice: #6fd7ff;
  --ice-deep: #2a93c4;
  --ice-soft: rgba(111, 215, 255, 0.13);
  --ice-line: rgba(111, 215, 255, 0.42);

  /* --- the certificate plate ---------------------------------------------- */
  --paper: #e8ecf0;
  --paper-2: #dae1e7;
  --graphite: #0c1319;
  --graphite-2: #3d4c5b;
  --hair-l: rgba(12, 19, 25, 0.16);
  --hair-l-strong: rgba(12, 19, 25, 0.3);
  /* amber and ice again, darkened until they clear 4.5:1 on paper. */
  --amber-l: #a24d0a;
  --ice-l: #0d6285;

  --shell: 1180px;
  --measure: 68ch;
  --gutter: clamp(1.15rem, 4vw, 3.6rem);
  --pad: clamp(4rem, 9vh, 7.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --s--1: clamp(0.78rem, 0.75rem + 0.12vw, 0.85rem);
  --s-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --s-1: clamp(1.16rem, 1.05rem + 0.48vw, 1.4rem);
  --s-2: clamp(1.48rem, 1.26rem + 1vw, 2.05rem);
  --s-3: clamp(2rem, 1.45rem + 2.3vw, 3.45rem);
  --s-4: clamp(2.6rem, 1.5rem + 4.8vw, 5.6rem);
}

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

html {
  scrollbar-color: var(--ink-600) var(--ink-950);
  scrollbar-width: thin;
  caret-color: var(--ice);
  accent-color: var(--ice);
  -webkit-text-size-adjust: 100%;
}
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--ink-950); }
::-webkit-scrollbar-thumb { background: var(--ink-600); border: 3px solid var(--ink-950); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--ice-deep); }
::selection { background: var(--ice); color: var(--ink-950); }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 2px; }

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--bone);
  font-family: 'Supreme', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--s-0);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: 'Technor', 'Supreme', system-ui, sans-serif;
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0;
}
p { text-wrap: pretty; margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

.mono, code, .num, th, .tag, .key {
  font-family: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 0; left: 0; z-index: 90;
  padding: 0.7rem 1.1rem; margin: 0.5rem;
  background: var(--ice); color: var(--ink-950);
  font: 500 0.85rem/1 'Geist Mono', monospace; border-radius: 4px;
  transform: translateY(-180%); transition: transform 0.25s var(--ease);
}
.skip-link:focus-visible { transform: none; }

/* ---------------------------------------------------------------- topbar -- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 2rem);
  padding: 0.75rem var(--gutter);
  background: rgba(10, 16, 22, 0.72);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--hair);
}
.topbar__home {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--mist); text-decoration: none;
  font-size: var(--s--1); letter-spacing: 0.04em;
  padding-block: 0.55rem;
}
.topbar__home svg { width: 16px; height: 16px; }
.topbar__home:hover { color: var(--bone); }
.topbar__brand {
  font-family: 'Technor', sans-serif; font-weight: 600; font-size: 0.95rem;
  letter-spacing: -0.01em; text-decoration: none; color: var(--bone);
  padding-left: clamp(0.5rem, 2vw, 1.4rem); border-left: 1px solid var(--hair);
}
.topbar__brand span {
  display: block; font-family: 'Geist Mono', monospace; font-weight: 400;
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist-dim);
}
.topbar__nav { margin-left: auto; display: flex; gap: clamp(0.6rem, 1.6vw, 1.5rem); }
.topbar__nav a {
  font-family: 'Geist Mono', monospace; font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--mist-dim); text-decoration: none; padding: 0.35rem 0.16rem;
  border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.topbar__nav a:hover { color: var(--bone); }
.topbar__nav a.active { color: var(--ice); border-bottom-color: var(--ice); }
.topbar__progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: transparent; }
.topbar__progress span { display: block; height: 100%; width: 0; background: var(--ice); }
@media (max-width: 900px) { .topbar__nav { display: none; } }

/* ------------------------------------------------------------- structure -- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--wide { max-width: 1360px; }
section { position: relative; }
.stage { padding-block: var(--pad); }
.stage--dark { background: var(--ink-900); }
.stage--deep { background: var(--ink-950); }
.stage--paper { background: var(--paper); color: var(--graphite); }
.stage--paper h1, .stage--paper h2, .stage--paper h3 { color: var(--graphite); }
.stage--paper ::selection { background: var(--graphite); color: var(--paper); }
.stage--paper a { color: var(--ice-l); }

.marker {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: 'Geist Mono', monospace; font-size: 0.68rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--mist-dim); margin-bottom: 1.3rem;
}
.marker::after { content: ''; flex: 1; height: 1px; background: var(--hair); }
.stage--paper .marker { color: var(--graphite-2); }
.stage--paper .marker::after { background: var(--hair-l); }

h2 { font-size: var(--s-3); margin-bottom: 1.1rem; }
h3 { font-size: var(--s-1); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; }
.lede { font-size: var(--s-1); line-height: 1.5; color: var(--mist); max-width: var(--measure); }
.stage--paper .lede { color: var(--graphite-2); }
.prose { max-width: var(--measure); color: var(--mist); }
.prose strong { color: var(--bone); font-weight: 500; }
.stage--paper .prose { color: var(--graphite-2); }
.stage--paper .prose strong { color: var(--graphite); font-weight: 700; }
.prose em { font-style: normal; color: var(--ice); }
.stage--paper .prose em { color: var(--ice-l); }

.note {
  font-size: var(--s--1); line-height: 1.6; color: var(--mist-dim);
  border-left: 1px solid var(--hair-strong); padding-left: 1rem; max-width: 62ch;
}
.stage--paper .note { color: var(--graphite-2); border-left-color: var(--hair-l-strong); }

.reveal { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 0.85s var(--ease), transform 1s var(--ease); }
.reveal.on { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ hero -- */
.pin { position: relative; }
.pin__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; }
.pin--hero { height: 320vh; }

.cell {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 70% 110%, rgba(255, 138, 61, 0.1), transparent 60%),
    radial-gradient(90% 60% at 20% -10%, rgba(111, 215, 255, 0.09), transparent 65%),
    var(--ink-950);
}
.cell::after {
  content: ''; position: absolute; inset: 0; opacity: 0.5;
  background-image: linear-gradient(var(--hair) 1px, transparent 1px), linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 20%, transparent 78%);
}

.hero {
  position: relative; z-index: 2; align-self: center;
  width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
}
.hero h1 { font-size: var(--s-4); font-weight: 700; letter-spacing: -0.035em; line-height: 0.92; }
.hero h1 b { color: var(--ice); font-weight: 700; }
.hero__sub { margin-top: 1.4rem; font-size: var(--s-1); color: var(--mist); max-width: 34ch; }
.hero__by {
  margin-top: 1.6rem; font-family: 'Geist Mono', monospace; font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist-dim);
}

/* the drain: one column of memory, weighed before and after */
.drain { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2.4rem); align-items: end; height: min(56vh, 460px); }
.drain__col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.drain__bar { position: relative; width: 100%; border-radius: 3px 3px 0 0; transition: height 0.15s linear; }
.drain__bar--before { background: linear-gradient(180deg, var(--amber) 0%, var(--amber-deep) 100%); box-shadow: 0 0 40px -6px rgba(255, 138, 61, 0.55); height: 100%; }
.drain__bar--after { background: linear-gradient(180deg, var(--ice) 0%, var(--ice-deep) 100%); box-shadow: 0 0 40px -6px rgba(111, 215, 255, 0.5); height: 7.5%; }
/* The cap sits on top of its own bar rather than on the column, so it rides the level down as the
   amber column drains instead of hanging, clipped, under the masthead. */
.drain__cap {
  position: absolute; left: -0.5rem; right: -0.5rem; bottom: calc(100% + 0.5rem); margin: 0;
  font-family: 'Geist Mono', monospace; font-size: 0.74rem; letter-spacing: 0.02em; text-align: center;
}
.drain__cap b { display: block; font-size: clamp(1.1rem, 2.4vw, 1.7rem); font-weight: 600; letter-spacing: -0.01em; }
.drain__col--before .drain__cap { color: var(--amber); }
.drain__col--after .drain__cap { color: var(--ice); }
.drain__foot {
  position: absolute; left: 0; right: 0; top: calc(100% + 0.5rem);
  font-family: 'Geist Mono', monospace; font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mist-dim); text-align: center;
}
.drain__rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hair-strong); }

.hero-stats {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%) translateY(14px);
  bottom: clamp(1.6rem, 5vh, 3.4rem); width: 100%; max-width: var(--shell); padding-inline: var(--gutter);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair);
  border-block: 1px solid var(--hair); opacity: 0; transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
}
.hero-stats.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.hero-stats > div { background: var(--ink-950); padding: 0.9rem 1rem; }
.hero-stats dt { font-family: 'Geist Mono', monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist-dim); }
.hero-stats dd { margin: 0.25rem 0 0; font-family: 'Technor', sans-serif; font-size: clamp(1.3rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -0.02em; color: var(--ice); }

.scroll-cue {
  position: absolute; z-index: 3; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  font-family: 'Geist Mono', monospace; font-size: 0.63rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mist-dim); transition: opacity 0.4s;
}
.scroll-cue.off { opacity: 0; }

@media (max-width: 900px) {
  /* On a phone the hero has to fit in one viewport with the stat strip pinned under it, so the
     measurement footnote is dropped here: section 05 states the same definition in its own note. */
  .hero { grid-template-columns: 1fr; gap: 1.15rem; align-content: center; padding-top: 3.4rem; padding-bottom: 7rem; }
  .hero .note { display: none; }
  .hero__sub { margin-top: 1rem; }
  .hero__by { margin-top: 1.1rem; }
  /* The amber cap is absolutely positioned above its bar, and in one column that lands it on top of
     the byline. Give the bar its own headroom and drop the reading time, which the article card and
     the index both already carry. */
  .hero__read { display: none; }
  .drain { height: min(20vh, 168px); margin-top: 2.4rem; }
  .hero-stats { bottom: 1rem; grid-template-columns: repeat(3, 1fr); }
  .hero-stats > div { padding: 0.5rem 0.55rem; }
  .hero-stats dt { font-size: 0.52rem; letter-spacing: 0.08em; line-height: 1.3; }
  .hero-stats dd { font-size: 1.02rem; line-height: 1.2; }
  .scroll-cue { display: none; }
  .pin--hero { height: 260vh; }
}

/* ------------------------------------------------------------- two-column -- */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.8rem, 5vw, 4.5rem); align-items: start; }
.split--flip > *:first-child { order: 2; }
@media (max-width: 980px) { .split { grid-template-columns: 1fr; } .split--flip > *:first-child { order: 0; } }

figure { margin: 0; }
figure img { width: 100%; height: auto; display: block; border-radius: 3px; border: 1px solid var(--hair); }
figcaption { margin-top: 0.7rem; font-family: 'Geist Mono', monospace; font-size: 0.68rem; letter-spacing: 0.02em; color: var(--mist-dim); }
.stage--paper figcaption { color: var(--graphite-2); }

/* ---------------------------------------------------------------- snippets -- */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 0.5rem; }
.tabs button {
  appearance: none; border: 1px solid var(--hair-l); cursor: pointer; background: var(--paper);
  font-family: 'Geist Mono', monospace; font-size: 0.72rem; letter-spacing: 0.03em;
  color: var(--graphite-2); padding: 0.62rem 0.95rem; min-height: 44px;
  transition: background 0.18s, color 0.18s;
}
.tabs button:hover { background: var(--paper-2); color: var(--graphite); }
.tabs button[aria-selected='true'] { background: var(--graphite); color: var(--paper); }

.panes { border: 1px solid var(--hair-l); background: #fff; }
.pane { display: none; }
.pane.on { display: block; }
.pane__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair-l); }
.pane__side { background: #fff; padding: 0; display: flex; flex-direction: column; }
.pane__head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.55rem 0.95rem; border-bottom: 1px solid var(--hair-l);
  font-family: 'Geist Mono', monospace; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.pane__side--before .pane__head { color: var(--amber-l); }
.pane__side--after .pane__head { color: var(--ice-l); }
.pane pre { margin: 0; padding: 0.95rem; overflow-x: auto; flex: 1; }
.pane pre code { font-size: 0.795rem; line-height: 1.6; color: var(--graphite); white-space: pre; display: block; }
.pane__note { border-top: 1px solid var(--hair-l); padding: 0.9rem 0.95rem; font-size: 0.87rem; line-height: 1.55; color: var(--graphite-2); grid-column: 1 / -1; background: var(--paper); }
.pane__note b { color: var(--graphite); font-weight: 700; }
.pane__note code { font-family: 'Geist Mono', monospace; font-size: 0.83em; background: var(--paper-2); padding: 0.05em 0.3em; border-radius: 2px; }
@media (max-width: 860px) { .pane__grid { grid-template-columns: 1fr; } }

/* code colouring, applied by script.js: deliberately three tones, not a rainbow */
.k { color: #9333c4; }
.s { color: #0a6b4a; }
.c { color: #5c6a79; font-style: italic; }
.t { color: var(--amber-l); }

/* ------------------------------------------------------------------ layers -- */
.pin--layers { height: 400vh; }
.layers-scene { position: relative; z-index: 2; align-self: center; width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.stack { display: flex; flex-direction: column; gap: 6px; }
.layer {
  position: relative; border: 1px solid var(--amber-line); background: var(--amber-soft);
  padding: 0.62rem 0.9rem; border-radius: 2px;
  font-family: 'Geist Mono', monospace; font-size: 0.78rem; letter-spacing: 0.01em; color: var(--amber);
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), color 0.5s, border-color 0.5s, background 0.5s;
}
.layer span { color: var(--mist-dim); font-size: 0.68rem; }
.layer--keep { border-color: var(--ice-line); background: var(--ice-soft); color: var(--ice); }
/* A removed layer keeps its slot as a legible ghost. At 0.13 it read as a hole in the stack,
   which is the opposite of the point: the reader should see what USED to be there. */
.layer.gone { opacity: 0.3; transform: translate3d(30px, 0, 0); }
.readout { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding-block: 1.1rem; display: grid; gap: 0.9rem; }
.readout__row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1rem; }
.readout__label { font-family: 'Geist Mono', monospace; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist-dim); }
.readout__value { font-family: 'Technor', sans-serif; font-size: clamp(1.5rem, 3.4vw, 2.5rem); font-weight: 600; letter-spacing: -0.02em; color: var(--ice); font-variant-numeric: tabular-nums; }
.readout__value small { font-size: 0.42em; font-weight: 400; color: var(--mist-dim); margin-left: 0.35em; letter-spacing: 0.06em; }
@media (max-width: 980px) { .layers-scene { grid-template-columns: 1fr; gap: 1.4rem; } .pin--layers { height: 340vh; } .layer { padding: 0.45rem 0.7rem; font-size: 0.7rem; } }

/* ------------------------------------------------------------------ cards -- */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(0.7rem, 1.1vw, 1rem); }

/* Alternating surfaces so two neighbours are never the same tone, plus an accent rule on top.
   The old version shared one background through a 1px grid gap, which read as a single table. */
.rw {
  position: relative; background: var(--ink-800); border: 1px solid var(--hair); border-radius: 4px;
  padding: 1.6rem 1.45rem 1.35rem; display: flex; flex-direction: column; gap: 0.35rem;
  text-decoration: none; overflow: hidden;
  transition: background 0.28s var(--ease), border-color 0.28s var(--ease), transform 0.35s var(--ease);
}
.rw::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--ice-deep); }
.rw:nth-child(even) { background: var(--ink-700); }
.rw:nth-child(even)::before { background: var(--ice); }
a.rw:hover { background: var(--ink-600); border-color: var(--hair-strong); transform: translateY(-3px); }

.rw__co { font-family: 'Technor', sans-serif; font-size: 1.45rem; font-weight: 600; letter-spacing: -0.022em; color: var(--bone); line-height: 1.02; }
.rw__what { font-family: 'Geist Mono', monospace; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mist-dim); margin-bottom: 0.75rem; }
.rw__num { font-family: 'Technor', sans-serif; font-size: 1.62rem; font-weight: 600; letter-spacing: -0.025em; color: var(--ice); line-height: 1.05; font-variant-numeric: tabular-nums; padding-top: 0.85rem; border-top: 1px solid var(--hair); }
.rw__body { font-size: 0.9rem; line-height: 1.6; color: var(--mist); margin: 0.35rem 0 0; }
.rw__src { margin-top: auto; padding-top: 1rem; font-family: 'Geist Mono', monospace; font-size: 0.66rem; letter-spacing: 0.04em; color: var(--mist-dim); }
a.rw:hover .rw__src { color: var(--ice); }

/* ------------------------------------------------------------------ table -- */
.tablewrap { overflow-x: auto; border: 1px solid var(--hair-l); background: #fff; }
.stage--dark .tablewrap, .stage--deep .tablewrap { border-color: var(--hair); background: var(--ink-850); }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 720px; }
thead th {
  text-align: right; font-family: 'Geist Mono', monospace; font-weight: 500;
  font-size: 0.64rem; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--hair-l-strong); color: var(--graphite-2); white-space: nowrap;
}
thead th:first-child, tbody td:first-child { text-align: left; }
tbody td { text-align: right; padding: 0.62rem 0.75rem; border-bottom: 1px solid var(--hair-l); color: var(--graphite-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody td:first-child { color: var(--graphite); font-weight: 500; white-space: normal; min-width: 11rem; }
tbody td small { display: block; font-weight: 400; color: var(--graphite-2); font-size: 0.78em; line-height: 1.35; white-space: normal; }
tbody tr.total td { border-top: 1px solid var(--hair-l-strong); font-weight: 700; color: var(--graphite); background: var(--paper); }
.good { color: var(--ice-l); font-weight: 600; }
.bad { color: var(--amber-l); font-weight: 600; }
.stage--dark thead th, .stage--deep thead th { color: var(--mist-dim); border-bottom-color: var(--hair-strong); }
.stage--dark tbody td, .stage--deep tbody td { color: var(--mist); border-bottom-color: var(--hair); }
.stage--dark tbody td:first-child, .stage--deep tbody td:first-child { color: var(--bone); }
.stage--dark .good, .stage--deep .good { color: var(--ice); }
.stage--dark .bad, .stage--deep .bad { color: var(--amber); }
.stage--dark tbody tr.total td, .stage--deep tbody tr.total td { color: var(--bone); background: var(--ink-800); border-top-color: var(--hair-strong); }

/* --------------------------------------------------------------- bar chart -- */
.chart { display: grid; gap: 0.55rem; }
.crow { display: grid; grid-template-columns: 8.5rem 1fr; align-items: center; gap: 0.85rem; }
.crow__name { font-family: 'Geist Mono', monospace; font-size: 0.72rem; color: var(--mist); text-align: right; }
.crow__track { position: relative; height: 26px; background: var(--ink-850); border: 1px solid var(--hair); border-radius: 2px; overflow: hidden; }
.crow__fill { position: absolute; inset: 0 auto 0 0; width: 0; transition: width 1.1s var(--ease); background: linear-gradient(90deg, var(--ink-600), var(--ink-600)); }
.crow.on .crow__fill { width: var(--w, 0%); }
.crow[data-lang='rust'] .crow__fill { background: linear-gradient(90deg, var(--ice-deep), var(--ice)); }
.crow[data-lang='go'] .crow__fill { background: linear-gradient(90deg, #2f6f63, #4fb3a0); }
.crow[data-lang='node'] .crow__fill { background: linear-gradient(90deg, var(--amber-deep), var(--amber)); }
.crow__val { position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%); font-family: 'Geist Mono', monospace; font-size: 0.72rem; color: var(--bone); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.chart-key { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1rem; font-family: 'Geist Mono', monospace; font-size: 0.68rem; color: var(--mist-dim); }
.chart-key i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 0.4rem; vertical-align: -1px; }
.chart-switch { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 1.3rem; }
.chart-switch button {
  appearance: none; border: 1px solid var(--hair); cursor: pointer; background: var(--ink-850); color: var(--mist-dim);
  font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: 0.03em;
  padding: 0.55rem 0.85rem; min-height: 44px; transition: background 0.18s, color 0.18s;
}
.chart-switch button:hover { background: var(--ink-800); color: var(--bone); }
.chart-switch button[aria-selected='true'] { background: var(--ice); color: var(--ink-950); }

/* ------------------------------------------------------------------ facts -- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--hair); border-block: 1px solid var(--hair); }
.facts > div { background: var(--ink-900); padding: 1rem 1.05rem; }
.stage--paper .facts { background: var(--hair-l); border-block-color: var(--hair-l); }
.stage--paper .facts > div { background: var(--paper); }
.facts dt { font-family: 'Geist Mono', monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mist-dim); }
.stage--paper .facts dt { color: var(--graphite-2); }
.facts dd { margin: 0.3rem 0 0; font-family: 'Technor', sans-serif; font-size: clamp(1.35rem, 2.6vw, 1.95rem); font-weight: 600; letter-spacing: -0.025em; color: var(--ice); font-variant-numeric: tabular-nums; }
.stage--paper .facts dd { color: var(--ice-l); }
.facts dd small { display: block; font-family: 'Supreme', sans-serif; font-size: 0.44em; font-weight: 400; letter-spacing: 0; color: var(--mist-dim); margin-top: 0.2rem; line-height: 1.4; }
.stage--paper .facts dd small { color: var(--graphite-2); }

/* ------------------------------------------------------------------ misc --- */
.callout { border: 1px solid var(--hair); background: var(--ink-850); padding: 1.2rem 1.3rem; border-radius: 3px; }
.stage--paper .callout { border-color: var(--hair-l); background: #fff; }
.callout h3 { margin-bottom: 0.5rem; }

.prose code, .rw__body code, .note code, .callout code {
  font-size: 0.86em; color: var(--bone);
  background: rgba(150, 178, 200, 0.11); padding: 0.06em 0.34em; border-radius: 2px;
}
.stage--paper .prose code, .stage--paper .note code, .stage--paper .callout code {
  color: var(--graphite); background: rgba(12, 19, 25, 0.08);
}

.tag { display: inline-block; border: 1px solid var(--hair-strong); border-radius: 999px; padding: 0.22rem 0.66rem; font-size: 0.68rem; letter-spacing: 0.06em; color: var(--mist); }
.stage--paper .tag { border-color: var(--hair-l-strong); color: var(--graphite-2); }

.linkout { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--ice); font-family: 'Geist Mono', monospace; font-size: 0.82rem; border-bottom: 1px solid var(--ice-line); padding-bottom: 0.15rem; min-height: 44px; }
.linkout:hover { border-bottom-color: var(--ice); }
.stage--paper .linkout { color: var(--ice-l); border-bottom-color: rgba(13, 98, 133, 0.4); }
.linkout svg { width: 15px; height: 15px; }

.prose a, .note a, .rw__body a { color: var(--ice); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--ice-line); }
.stage--paper .prose a, .stage--paper .note a { color: var(--ice-l); text-decoration-color: rgba(13, 98, 133, 0.45); }
.prose a:hover, .note a:hover { text-decoration-color: currentColor; }

.foot { border-top: 1px solid var(--hair); padding-block: 3rem 4rem; }
.foot__row { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: baseline; justify-content: space-between; }
.foot a { display: inline-block; font-family: 'Geist Mono', monospace; font-size: 0.8rem; color: var(--mist); text-decoration: none; border-bottom: 1px solid var(--hair-strong); padding: 0.62rem 0 0.5rem; }
.foot a:hover { color: var(--ice); border-bottom-color: var(--ice); }
.foot__meta { font-family: 'Geist Mono', monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist-dim); }

.stack-gap { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); }
.pad-tight { padding-bottom: calc(var(--pad) * 0.55); }
.pad-tight-top { padding-top: calc(var(--pad) * 0.6); }

/* ------------------------------------------------------- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .layer { transition: none; }
  .crow__fill { transition: none; }
  .hero-stats { transition: none; }
  /* The scene's LAST frame is not its most informative one. With no motion, the amber column stays
     full and the removed layers stay in place as dashed ghosts, so the comparison is still legible. */
  .layer[data-off] { opacity: 0.55; border-style: dashed; }
  .pin--hero, .pin--layers { height: auto; }
  .pin__stage { position: static; height: auto; padding-block: var(--pad); display: block; }
  /* With the stage un-pinned there is no viewport to hang the strip off, so it rejoins the flow. */
  .hero-stats { position: static; transform: none; margin: 2.5rem auto 0; }
  .hero-stats.on { transform: none; }
  .scroll-cue { display: none; }
  .hero { padding-bottom: 0; }
}

/* The hero used to be a pinned scene whose amber column drained as you scrolled. That animation is
   gone, so it is a normal section again: pinning it would have meant a viewport of dead scroll, and
   the absolutely positioned stat strip is what left a gap above "memory reduction". */
.pin--hero { height: auto; }
.pin--hero .pin__stage { position: static; height: auto; display: block; padding-block: calc(var(--pad) * 1.15) var(--pad); }
/* relative, not static: z-index only applies to positioned elements, and static let the
   absolutely positioned .cell backdrop paint straight over the whole strip. */
.pin--hero .hero-stats { position: relative; z-index: 3; left: auto; right: auto; bottom: auto; transform: none; opacity: 1; margin: clamp(2rem, 4vh, 3rem) auto 0;
  /* the base rule pads the container, which showed as empty grey blocks at each end once the
     hairline background was no longer hidden behind the pinned layout. Drop the padding and size
     the strip to the text column instead, so the first cell lines up with the body copy. */
  padding-inline: 0; max-width: min(100% - var(--gutter) * 2, calc(var(--shell) - var(--gutter) * 2)); }
/* The amber bar is full height now and its caption sits above it, so the drain needs headroom or
   the number is clipped by the fixed masthead. */
.pin--hero .drain { margin-top: 3rem; height: min(46vh, 400px); }
.hero__lede { margin-top: 1.1rem; font-size: var(--s-0); color: var(--mist); max-width: 46ch; }
.hero-stats dd small {
  display: block; font-family: 'Supreme', sans-serif; font-size: 0.4em; font-weight: 400;
  letter-spacing: 0; color: var(--mist-dim); margin-top: 0.35rem; line-height: 1.45;
}
@media (max-width: 900px) {
  .pin--hero .hero-stats { margin-top: 1.6rem; }
  .hero__lede { max-width: none; }
  /* must be scoped the same way as the desktop rule above, or that one out-specifies it and the
     memory column takes up half a phone screen. */
  .pin--hero .drain { height: min(22vh, 190px); margin-top: 2.6rem; }
}

/* subsection headings inside running prose need more air above than a paragraph gap gives them */
.prose p + h3 { margin-top: 1.9rem; }
.prose h3 + p { margin-top: 0.45rem; }