/* ==========================================================================
   [COMPANY] — editorial / research-lab site
   Motif: the computational cell. Grids that refine into finer grids.
   Signature: the figure system.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Interface colour — 5 named values. Paper-like, cool, printed-chart grey. */
  --ground:      #EDEFEC;   /* chart paper */
  --plate:       #F7F8F5;   /* whiter paper: figure plates, table zebra */
  --ink:         #1A201E;   /* text, hairline ticks */
  --muted:       #5D6663;   /* secondary text, labels */
  --rule:        #C9CDC6;   /* hairlines */
  --rule-strong: #9AA19B;   /* emphasised hairlines, literature rule */
  --accent:      #A6215F;   /* aeronautical-chart magenta. INTERACTIVE ONLY. */
  --accent-deep: #7C1646;

  /* Data ramp — sequential, single hue, light to dark.
     RESERVED FOR DATA FIGURES. Never an interface colour. */
  --d1: #D9E4E1;
  --d2: #B7CFCC;
  --d3: #85AFAE;
  --d4: #52878B;
  --d5: #275C68;

  /* Placeholder token wash — must read as obviously unfinished. */
  --tok-bg: rgba(26, 32, 30, 0.065);

  /* Type */
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale, ratio 1.25 from a 17px body */
  --t-3xs: 0.6875rem;  /* 11    */
  --t-2xs: 0.75rem;    /* 12    */
  --t-xs:  0.8125rem;  /* 13    */
  --t-s:   0.9375rem;  /* 15    */
  --t-m:   1.0625rem;  /* 17 — body */
  --t-l:   1.3125rem;  /* 21    */
  --t-xl:  1.65rem;    /* 26.5  */
  --t-2xl: 2.0625rem;  /* 33    */
  --t-3xl: 2.5625rem;  /* 41    */

  /* Layout */
  --rail: 9.5rem;
  --measure: 34rem;
  --gap: 2.75rem;
}

/* --- 2. Reset & base ----------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-m);
  font-optical-sizing: auto;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(166, 33, 95, 0.16); }

img, canvas, svg { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-deep); }

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

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

.skip {
  position: absolute; left: 1rem; top: -3rem;
  background: var(--ink); color: var(--ground);
  padding: 0.5rem 0.9rem; font-family: var(--sans); font-size: var(--t-xs);
  z-index: 20; transition: top 120ms;
}
.skip:focus { top: 0.6rem; }

/* --- 3. Headings & text ------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); font-weight: 500; }
h4 { font-size: var(--t-l); }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: var(--t-l);
  line-height: 1.5;
  color: var(--ink);
}

.dek {
  font-size: var(--t-l);
  font-style: italic;
  line-height: 1.45;
  color: var(--muted);
  margin: 0.9rem 0 0;
  text-wrap: pretty;
}

.measure   { max-width: var(--measure); }
.measure-w { max-width: 44rem; }

.muted { color: var(--muted); }

/* Utility label — the grotesque, used only for labels and navigation */
.label {
  font-family: var(--sans);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Placeholder token. Deliberately conspicuous: nothing here is a real number. */
.tok {
  font-family: var(--mono);
  font-size: 0.86em;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--ink);
  background: var(--tok-bg);
  border-bottom: 1px dotted var(--rule-strong);
  padding: 0.06em 0.28em;
  white-space: nowrap;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --- 4. Shell ----------------------------------------------------------- */

.wrap {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.topbar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .topbar { background: var(--ground); }
}

.topbar-in {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 3.6rem;
  max-width: 76rem; margin: 0 auto; padding: 0 1.5rem;
}
@media (max-width: 32rem) {
  /* the wordmark takes its own line so the nav never crowds it */
  .topbar-in {
    flex-wrap: wrap; align-items: baseline;
    gap: 0.3rem 0.9rem; padding: 0.55rem 1.1rem; min-height: 0;
  }
  .brand { flex: 0 0 100%; }
  nav.main { gap: 0.9rem; }
}

/* [LOGO] — quadtree mark + wordmark */
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--ink); text-decoration: none;
  font-family: var(--serif); font-size: var(--t-m); font-weight: 600;
  letter-spacing: -0.005em;
  margin-right: auto;
}
.brand:hover { color: var(--ink); }
.brand:hover .mark rect { fill: var(--accent); }
/* the wordmark is the only route home — its focus ring is navigation, not decoration */
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.mark { display: block; flex: none; }
.mark rect { fill: var(--ink); transition: fill 140ms; }
.mark .frame { fill: none; stroke: var(--ink); stroke-width: 1; }

nav.main { display: flex; align-items: baseline; gap: 1.35rem; flex-wrap: wrap; }
nav.main a {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
nav.main a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
nav.main a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.nav-cta {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 500;
  color: var(--accent) !important;
  border-bottom: 1px solid var(--accent) !important;
}
.nav-cta:hover { color: var(--accent-deep) !important; }

/* --- 5. Bands (a section, with a label in the left rail) ----------------- */

.band { border-top: 1px solid var(--rule); }
.band > .wrap { padding-top: 4.25rem; padding-bottom: 4.25rem; }
.band--tight > .wrap { padding-top: 2.75rem; padding-bottom: 2.75rem; }

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* minmax(0,…): lets tables scroll */
  gap: 1.5rem;
}
@media (min-width: 62rem) {
  .cols { grid-template-columns: var(--rail) minmax(0, 1fr); gap: var(--gap); }
}

.rail { position: relative; }
@media (min-width: 62rem) {
  .rail { position: sticky; top: 5.5rem; align-self: start; }
}
.rail .label { display: block; }
.rail-note {
  font-family: var(--mono); font-size: var(--t-3xs); line-height: 1.5;
  color: var(--muted); margin-top: 0.6rem;
}

/* --- 6. Hero ------------------------------------------------------------ */

.hero > .wrap { padding-top: 2.5rem; padding-bottom: 3.25rem; }

/* Three things above the figure, in one column, on a short measure. The old
   two-column grid put a 580-character thesis beside the headline and cost
   Fig. 1 its place on the first screen. */
.hero-head { max-width: 46rem; }

.eyebrow {
  font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  display: block; margin-bottom: 1.1rem;
}

.hero h1 { font-size: clamp(2.0625rem, 4.6vw, 3.45rem); letter-spacing: -0.022em; }
.hero-head .dek { max-width: 38rem; margin-top: 1.15rem; }

/* the signature figure gets the full container width */
.hero-fig { margin-top: 2.25rem; }

/* …but never more height than the first screen has left for it. The frame is
   2:1, so height = width / 2; capping the width at twice the leftover height
   lands the whole figure above the fold. On a tall window the cap exceeds 100%
   and the figure keeps its full width — this only bites when the window is
   short, which is exactly when it should. */
@media (min-width: 62rem) {
  .hero-fig .fig-frame {
    max-width: min(100%, calc((100vh - 25rem) * 2));
    max-width: min(100%, calc((100svh - 25rem) * 2));
    margin-inline: auto;
  }
}

/* One primary action */
.cta {
  display: inline-flex; align-items: baseline; gap: 0.55rem;
  font-family: var(--sans); font-size: var(--t-s); font-weight: 500;
  color: var(--accent); text-decoration: none;
  border: 1px solid var(--accent);
  padding: 0.62rem 1.05rem;
  transition: background 140ms, color 140ms;
}
.cta::after { content: "→"; font-family: var(--mono); font-size: 0.9em; }
.cta:hover { background: var(--accent); color: var(--ground); }
.cta-row { margin-top: 1.6rem; display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap; }
.cta-aside { font-family: var(--mono); font-size: var(--t-2xs); color: var(--muted); }

/* --- 7. Figures — the signature ---------------------------------------- */

.fig { margin: 2.5rem 0 0; }
.fig:first-child { margin-top: 0; }

/* hairline frame + registration ticks, like a plate pasted into a paper */
.fig-frame {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--plate);
}
.fig-frame::before {
  content: ""; position: absolute; inset: -6px; pointer-events: none;
  background-image:
    linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink));
  background-size: 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px;
  background-position:
    left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom;
  background-repeat: no-repeat;
  opacity: 0.55;
}

figcaption { margin-top: 0.85rem; max-width: 40rem; }
.cap {
  font-size: var(--t-s); line-height: 1.5; color: var(--ink);
  margin: 0;
}
.fig-num {
  font-family: var(--mono); font-size: 0.88em; font-weight: 500;
  letter-spacing: 0.01em;
}
.prov {
  font-family: var(--mono); font-size: var(--t-3xs); line-height: 1.6;
  color: var(--muted); letter-spacing: 0.005em;
  margin: 0.5rem 0 0; padding-top: 0.45rem;
  border-top: 1px dotted var(--rule-strong);
}

/* A second provenance paragraph, reading as a continuation of the first: same
   voice, no second rule. Used for the hero figure's key, which is prose about
   what the marks mean and belongs with the prose, not between map and caption.
   Declared after .prov so the cascade does the overriding, not !important. */
.prov--cont { border-top: 0; padding-top: 0; margin-top: 0.55rem; }

/* wide figure: reaches back across the rail on desktop */
@media (min-width: 62rem) {
  .fig--wide { margin-left: calc(-1 * (var(--rail) + var(--gap))); }
  .fig--wide figcaption { margin-left: calc(var(--rail) + var(--gap)); }
}

/* Figure plate placeholder — carries the mesh motif */
.plate {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem;
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px),
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 12px 12px, 12px 12px;
  background-position: 0 0;
  /* faint mesh: the coarse lines read, the fine ones are a texture */
  opacity: 1;
}
.plate::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent, var(--plate) 65%);
  opacity: 0.72;
}
.plate-tok, .plate-hint { position: relative; }
.plate-tok {
  font-family: var(--mono); font-size: var(--t-s); font-weight: 500;
  background: var(--plate); padding: 0.2em 0.5em;
  border: 1px dotted var(--rule-strong);
}
.plate-hint {
  font-family: var(--sans); font-size: var(--t-3xs); font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted);
}
.plate--tall { aspect-ratio: 4 / 3; }
/* a wide plate at container width would otherwise be a very large void */
.fig--wide .plate { aspect-ratio: 2.3 / 1; }

/* --- 8. The hero comparison figure (canvas + drag bar) ----------------- */

/* One map, two resolutions, a bar between them. The bar is the figure's whole
   argument, so it is drawn like an instrument: a hairline, a grip, nothing
   decorative. Interactive, so it is the one place in a data figure that may use
   --accent — and only on focus, where the user needs to see where they are. */
.resolve {
  position: relative;
  background: var(--plate);
  touch-action: pan-y;            /* dragging the bar must not scroll the page */
}
.resolve canvas {
  display: block; width: 100%; height: auto; aspect-ratio: 2 / 1;
}

/* On a phone the whole footprint across ~360 px is a map whose resolved mesh is
   finer than a pixel, and a bar dragged along it spends the whole gesture under
   the reader's own thumb — they cannot see the seam they are moving. So below
   44rem the frame is a WINDOW onto part of the map (--resolve-zoom of it), the
   seam is pinned to the middle of that window, and it is the map that moves:
   the reader drags the ground under a fixed line. The comparison happens at
   twice the scale, always dead centre, and never under the hand doing it.
   JS reads --resolve-zoom off this element and does the rest, so the breakpoint
   is declared once — here — and there is no second copy of it to drift. */
@media (max-width: 44rem) {
  .resolve {
    --resolve-zoom: 2;
    overflow: hidden;
    cursor: grab;
  }
  .resolve:active { cursor: grabbing; }
  /* wider than its box on purpose — past the blanket cap in the reset */
  .resolve canvas { width: calc(var(--resolve-zoom) * 100%); max-width: none; }
  /* The seam now sits dead centre of the figure, which is exactly where a
     thumb lands to scroll the page — so it must pass a vertical swipe through
     like the rest of the map, and it is no longer the thing being dragged. */
  .resolve-bar { cursor: inherit; touch-action: pan-y; }
}
.resolve-bar {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2.75rem; margin-left: -1.375rem;   /* a comfortable target, hairline seam */
  cursor: ew-resize; touch-action: none;
  display: flex; align-items: center; justify-content: center;
}
.resolve-bar::before {          /* the seam itself, dead centre */
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; margin-left: -0.5px; background: var(--ink); opacity: 0.85;
}
.resolve-grip {
  position: relative;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--plate); border: 1px solid var(--ink);
  box-shadow: 0 1px 3px rgba(26, 32, 30, 0.28);
}
.resolve-grip::before, .resolve-grip::after {   /* two chevrons: drag me */
  content: ""; position: absolute; top: 50%; width: 0.32rem; height: 0.32rem;
  margin-top: -0.16rem;
  border-top: 1px solid var(--ink); border-right: 1px solid var(--ink);
}
.resolve-grip::before { left: 0.34rem; transform: rotate(-135deg); }
.resolve-grip::after  { right: 0.34rem; transform: rotate(45deg); }

.resolve-bar:focus-visible { outline: none; }
.resolve-bar:focus-visible .resolve-grip {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(166, 33, 95, 0.28);
}
.resolve-bar:focus-visible::before { background: var(--accent); opacity: 1; }

/* Side keys, over the map rather than under it: the two labels now name two
   halves of one image, so they have to sit in the half they name. */
.resolve-key {
  position: absolute; top: 0; margin: 0;
  display: flex; gap: 0.4rem; align-items: baseline;
  padding: 0.4rem 0.6rem 0.45rem;
  background: var(--plate); border: 1px solid var(--rule); border-top: 0;
  font-family: var(--sans); font-size: var(--t-3xs); font-weight: 500;
  letter-spacing: 0.04em; color: var(--muted);
  pointer-events: none;         /* never in the way of the drag */
}
.resolve-key--a { left: 0; border-left: 0; }
.resolve-key--b { right: 0; border-right: 0; }
.resolve-key b {
  font-family: var(--mono); font-weight: 500; color: var(--ink);
  letter-spacing: 0;
}
@media (max-width: 30rem) {     /* two keys will not fit beside each other */
  .resolve-key { font-size: 0.625rem; padding: 0.3rem 0.45rem 0.35rem; }
}

.fig-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.25rem 2rem;
  margin-top: 0.85rem;
}
@media (min-width: 62rem) {
  .fig--wide .fig-meta { margin-left: calc(var(--rail) + var(--gap)); }
}

/* sequential ramp legend */
.rampkey { display: flex; align-items: center; gap: 0.55rem; }
/* a continuous strip, not swatches: the figure's band count is not a value key */
.rampkey-strip {
  display: block; width: 6.75rem; height: 0.6rem;
  border: 1px solid var(--rule);
  background: linear-gradient(to right,
    var(--d1), var(--d2), var(--d3), var(--d4), var(--d5));
}
.rampkey span {
  font-family: var(--mono); font-size: var(--t-3xs); color: var(--muted);
}

/* --- 8b. How it runs — the engine figure and its two takeaways -------- */

/* Two facts and no more. Mono, on the ink palette: never --accent (interactive
   only), never --d1..--d5 (data figures only). */
.keyfacts {
  display: grid; grid-template-columns: minmax(0, 1fr);
  margin: 2.4rem 0 0; max-width: 34rem;
  border-top: 1px solid var(--ink);
}
@media (min-width: 40rem) {
  .keyfacts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2rem; }
}
.keyfact { padding: 0.9rem 0 1rem; border-bottom: 1px solid var(--rule); }
.keyfact dt {
  font-family: var(--sans); font-size: var(--t-3xs); font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted);
  line-height: 1.35;
}
.keyfact dd {
  margin: 0.5rem 0 0;
  font-family: var(--mono); font-size: var(--t-l); line-height: 1.25;
}

/* One plate, split down the middle: the same site and the same hour, solved
   and inferred. The seam is a hairline, like the hero figure's — the two sides
   are one image, not two figures. */
.eng-fields { position: relative; }
.plate--split::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; margin-left: -0.5px;
  background: var(--rule-strong); opacity: 0.9; z-index: 0;
}
.plate--split .plate-tok, .plate--split .plate-hint { z-index: 1; }
@media (max-width: 44rem) {
  /* two half-panels in a 2.3:1 frame get very narrow; give them height back */
  .fig--wide .plate--split { aspect-ratio: 3 / 2; }
}

/* side keys, sitting in the half they name — same instrument grammar as Fig. 1 */
.eng-key {
  position: absolute; top: 0; margin: 0; max-width: 47%;
  display: flex; gap: 0.4rem; align-items: baseline;
  padding: 0.4rem 0.6rem 0.45rem;
  background: var(--plate); border: 1px solid var(--rule); border-top: 0;
  font-family: var(--sans); font-size: var(--t-3xs); font-weight: 500;
  letter-spacing: 0.04em; line-height: 1.4; color: var(--muted);
}
.eng-key--a { left: 0; border-left: 0; }
.eng-key--b { right: 0; border-right: 0; }
.eng-key b {
  font-family: var(--mono); font-weight: 500; color: var(--ink); letter-spacing: 0;
}
@media (max-width: 30rem) {
  .eng-key { font-size: 0.625rem; padding: 0.3rem 0.45rem 0.35rem; }
}

/* the costs beneath the panels and the agreement between them, inside the
   frame so they stay aligned with the halves they belong to */
.eng-stats {
  display: grid; grid-template-columns: minmax(0, 1fr);
  margin: 0; border-top: 1px solid var(--rule);
}
@media (min-width: 44rem) {
  .eng-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
}
.eng-stat { padding: 0.7rem 0.9rem 0.8rem; border-bottom: 1px solid var(--rule); }
.eng-stat:last-child { border-bottom: 0; }
.eng-stat dt {
  font-family: var(--sans); font-size: var(--t-3xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  line-height: 1.35;
}
.eng-stat dd {
  margin: 0.4rem 0 0;
  font-family: var(--mono); font-size: var(--t-s); line-height: 1.3;
}
@media (min-width: 44rem) {
  .eng-stat { border-bottom: 0; }
  .eng-stat--mid {
    text-align: center;
    border-left: 1px solid var(--rule); border-right: 1px solid var(--rule);
  }
  .eng-stat:last-child { text-align: right; }
}

/* --- 9. Literature block — visually distinct from [COMPANY]'s numbers -- */

.lit {
  border-left: 2px solid var(--rule-strong);
  padding: 0.15rem 0 0.15rem 1.35rem;
  margin: 2rem 0 0;
}
.lit-head {
  font-family: var(--sans); font-size: var(--t-3xs); font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 1.15rem;
}
.lit-items { display: grid; gap: 1.4rem; margin: 0; }
@media (min-width: 44rem) { .lit-items { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.lit-item { margin: 0; }
.lit-val {
  font-family: var(--mono); font-size: var(--t-xl); font-weight: 400;
  line-height: 1.1; color: var(--muted);
  display: block;
  /* grey, never the accent, never the data ramp: this is not our number */
}
.lit-val b { color: var(--muted); font-weight: 400; }
.lit-what { font-size: var(--t-s); line-height: 1.45; margin: 0.5rem 0 0; color: var(--ink); }
.lit-src {
  font-family: var(--mono); font-size: var(--t-3xs); line-height: 1.55;
  color: var(--muted); margin: 0.45rem 0 0;
}
.lit-foot {
  font-size: var(--t-s); color: var(--muted); margin: 1.5rem 0 0;
  max-width: 34rem;
}

/* --- 10. Ordered steps — numbering encodes a real sequence ------------- */

.steps { display: grid; gap: 0; margin-top: 0.5rem; }
.step {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem;
  padding: 2.25rem 0;
  border-top: 1px solid var(--rule);
}
.step:first-child { border-top: 0; padding-top: 0.25rem; }
@media (min-width: 52rem) {
  .step {
    grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 20rem);
    gap: 1.75rem; align-items: start;
  }
}
.step-n {
  font-family: var(--mono); font-size: var(--t-s); font-weight: 500;
  color: var(--accent); letter-spacing: 0.02em;
  padding-top: 0.35rem;
}
.step-body { max-width: 26rem; }
.step-body h3 { margin-bottom: 0.7rem; }
.step-body p { font-size: var(--t-s); line-height: 1.6; }
.step-fig { margin: 0; }
.step-fig .plate { aspect-ratio: 4 / 3; }
.step-fig figcaption { max-width: 20rem; }

/* --- 11. Tables -------------------------------------------------------- */

.tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 1.9rem;
  max-width: 50rem;
  border-bottom: 1px solid var(--rule);
}
table { border-collapse: collapse; width: 100%; min-width: 38rem; }
/* two-column key/value tables don't need the comparison table's min-width */
.tbl-wrap--kv { max-width: 32rem; }
.tbl-wrap--kv table { min-width: 18rem; }

caption {
  caption-side: top; text-align: left;
  font-family: var(--sans); font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  padding-bottom: 0.8rem;
}

th, td {
  padding: 0.6rem 0.9rem;
  text-align: right;
  vertical-align: baseline;
}
th:first-child, td:first-child { text-align: left; padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }

thead th {
  font-family: var(--sans); font-size: var(--t-3xs); font-weight: 600;
  letter-spacing: 0.075em; text-transform: uppercase; color: var(--muted);
  line-height: 1.35;
  border-bottom: 1px solid var(--ink);
}
thead tr:first-child th { border-bottom: 1px solid var(--rule); }
thead tr:last-child th { border-bottom: 1px solid var(--ink); }
th.cg-head {
  text-align: center; color: var(--ink);
  border-left: 1px solid var(--rule); border-right: 1px solid var(--rule);
}
tbody th {
  font-family: var(--serif); font-weight: 400; font-size: var(--t-s);
  line-height: 1.35; color: var(--ink);
}
tbody td {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 400;
  font-variant-numeric: tabular-nums;
}
tbody tr { border-top: 1px solid var(--rule); }
tbody tr:first-child { border-top: 0; }
tr.is-ours th, tr.is-ours td { background: var(--plate); }
tr.is-ours th { font-weight: 600; }
td.nil { color: var(--muted); }

.tbl-notes {
  font-family: var(--mono); font-size: var(--t-3xs); line-height: 1.7;
  color: var(--muted); margin: 0.9rem 0 0; max-width: 44rem;
}
.tbl-notes li { margin-bottom: 0.25rem; }
.tbl-notes { padding-left: 1.4rem; }

/* --- 12. Definition rows (platform layers) ------------------------------ */

.spec {
  display: grid; gap: 0; margin: 0;
  max-width: 46rem;
  border-top: 1px solid var(--rule);
}
.spec > div {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.3rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 40rem) {
  .spec > div { grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; align-items: baseline; }
}
.spec dt {
  font-family: var(--sans); font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
  padding-top: 0.15rem;
}
.spec dd { margin: 0; font-size: var(--t-s); line-height: 1.55; }

.layer { padding: 3.25rem 0; border-top: 1px solid var(--rule); }
.layer:first-of-type { border-top: 0; padding-top: 0.5rem; }
.layer-head {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem;
  margin-bottom: 1.75rem;
}
@media (min-width: 52rem) {
  .layer-head { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1.75rem; }
}
.layer-head p { max-width: 34rem; font-size: var(--t-s); }
.layer-head h2 + p { margin-top: 0.75rem; }
@media (min-width: 52rem) { .layer-body { margin-left: 4.25rem; } }

/* --- 12b. Standard and tuned — two alternatives, equal weight ---------- */

/* A fork, not a ladder. Both tiers get the same rule, the same heading level,
   the same type and the same column width. Nothing here may be highlighted,
   recommended, shaded, accented or priced, and neither side is a checklist of
   what the other lacks. */
.tiers {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 2.75rem; margin-top: 2.4rem;
}
@media (min-width: 52rem) {
  .tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap); align-items: start;
  }
}
.tier { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.tier-head {
  display: flex; align-items: baseline; gap: 0.85rem; flex-wrap: wrap;
  margin-bottom: 1.35rem;
}
.tier-name { font-size: var(--t-xl); margin: 0; }
.tier-tag {
  font-family: var(--sans); font-size: var(--t-3xs); font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted);
  margin: 0;
}
/* inside a half-width column the term/value pair stacks, at both tiers alike */
.spec--tier { max-width: none; border-top: 1px solid var(--rule); }
.spec--tier > div { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }

/* --- 13. Research index ------------------------------------------------- */

.postlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.postlist li { border-bottom: 1px solid var(--rule); }
.postlist a {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem;
  padding: 1.6rem 0; text-decoration: none; color: var(--ink);
}
@media (min-width: 46rem) {
  .postlist a { grid-template-columns: 7rem minmax(0, 40rem); gap: 2rem; align-items: baseline; }
}
.postlist a:hover .pl-title { color: var(--accent); }
.pl-date {
  font-family: var(--mono); font-size: var(--t-2xs); color: var(--muted);
  padding-top: 0.4rem;
}
.pl-title { font-size: var(--t-l); line-height: 1.25; display: block; }
.pl-dek {
  font-size: var(--t-s); font-style: italic; color: var(--muted);
  margin-top: 0.35rem; line-height: 1.45;
}

/* --- 14. Long-form post ------------------------------------------------ */

.post { --measure: 36rem; }
/* the article column is centred; the shell above and below stays at 76rem */
.post > .wrap { max-width: 58rem; padding-top: 3.5rem; padding-bottom: 4rem; }

.post-head { border-bottom: 1px solid var(--rule); padding-bottom: 2.25rem; margin-bottom: 2.75rem; }
.post-head h1 { font-size: clamp(2.0625rem, 3.8vw, 2.9rem); max-width: 32rem; }
.post-meta {
  font-family: var(--mono); font-size: var(--t-2xs); color: var(--muted);
  margin-top: 1.6rem; display: flex; gap: 1.5rem; flex-wrap: wrap;
}

/* article grid: text column + right margin for notes */
.post-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--gap); }
@media (min-width: 68rem) {
  .post-body { grid-template-columns: minmax(0, 36rem) minmax(0, 13rem); }
}
.post-body > * { grid-column: 1; }
.post-body h2 {
  font-size: var(--t-xl); margin: 2.9rem 0 1rem;
}
.post-body h2:first-child { margin-top: 0; }
.post-body p { line-height: 1.68; }
.post-body > .fig { grid-column: 1 / -1; margin: 2.75rem 0 2.9rem; }

/* margin note: sits in the right column on wide screens, inline below */
.mnote {
  grid-column: 1;
  font-family: var(--sans); font-size: var(--t-xs); line-height: 1.55;
  color: var(--muted);
  border-left: 2px solid var(--rule); padding-left: 0.9rem;
  margin: 0 0 1.4rem;
}
@media (min-width: 68rem) {
  .mnote {
    grid-column: 2; margin-top: 0.35rem;
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--rule); padding-top: 0.6rem;
  }
}
.mnote-n {
  font-family: var(--mono); font-size: var(--t-3xs); color: var(--accent);
  display: block; margin-bottom: 0.3rem;
}

.pull {
  font-size: var(--t-l); line-height: 1.4; font-style: italic;
  color: var(--ink); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
  padding: 1.2rem 0; margin: 2.4rem 0;
}

pre {
  margin: 2rem 0;
  padding: 1.05rem 1.15rem;
  background: var(--plate);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--rule-strong);
  overflow-x: auto;
  font-family: var(--mono); font-size: var(--t-xs); line-height: 1.65;
  color: var(--ink);
}
pre .c { color: var(--muted); }
code {
  font-family: var(--mono); font-size: 0.88em;
  background: var(--tok-bg); padding: 0.08em 0.3em;
}
pre code { background: none; padding: 0; font-size: 1em; }

.footnotes {
  grid-column: 1 / -1;
  border-top: 1px solid var(--rule); margin-top: 3rem; padding-top: 1.25rem;
  font-size: var(--t-xs); color: var(--muted); line-height: 1.6;
}
.footnotes ol { padding-left: 1.4rem; margin: 0; }
.footnotes li { margin-bottom: 0.5rem; }

/* --- 15. About / contact ---------------------------------------------- */

.people {
  display: grid; gap: 0; margin-top: 0.5rem; max-width: 46rem;
  border-top: 1px solid var(--rule);
}
.person {
  padding: 1.6rem 0; border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem;
}
@media (min-width: 46rem) {
  .person { grid-template-columns: 14rem minmax(0, 1fr); gap: 2rem; align-items: baseline; }
}
.person-name { font-size: var(--t-l); margin: 0; }
.person-bio { font-size: var(--t-s); line-height: 1.6; margin: 0; color: var(--ink); }

.contactcard {
  border: 1px solid var(--ink); padding: 1.75rem;
  display: grid; gap: 1.1rem;
}
.contactcard .mail {
  font-family: var(--mono); font-size: var(--t-l); word-break: break-all;
}

.stagenote {
  margin-top: 2.5rem; border-top: 1px solid var(--rule); padding-top: 1rem;
  font-family: var(--mono); font-size: var(--t-2xs); line-height: 1.7; color: var(--muted);
  max-width: 34rem;
}

/* --- 16. Close band & footer ----------------------------------------- */

.close > .wrap { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.close h2 { font-size: var(--t-2xl); max-width: 30rem; }

footer.site { border-top: 1px solid var(--ink); }
footer.site > .wrap { padding-top: 2rem; padding-bottom: 3rem; }
.foot {
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
  align-items: baseline; justify-content: space-between;
}
.foot-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.foot a { font-family: var(--sans); font-size: var(--t-xs); }
.foot-id {
  font-family: var(--mono); font-size: var(--t-2xs); color: var(--muted);
  line-height: 1.7;
}

/* --- 17. Motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}