/* ==========================================================================
   GREA — v1-lattice
   Macrostructure: 13 · Index-First
   The index is the page. Twelve ventures are numbered, described and grouped
   by what they actually are; a sticky WebGL lattice on the right is the same
   index drawn spatially — cluster hulls, solid edges for relationships the
   source brief states, dotted edges for shared-discipline adjacencies.
   Delete the canvas and the topology is gone (the rows only carry facts).

   Accent: amber oklch(0.72 0.15 62) — one accent, used on the selected node,
   the selected row marker and focus rings. Everything else is a warm neutral.
   Type: Space Grotesk (display) / General Sans (body) / Geist Mono (outlier).

   Pre-emit self-critique (NOSLOP §9):
     Philosophy 5 — the shape comes from the content: an index of twelve.
     Hierarchy  5 — h1, then cluster sections, then the record panel.
     Execution  4 — type, rules and contrast checked by hand; no 3D slop.
     Specificity 5 — every number is from the brief; the concession block
                   names where enterprise platforms actually win.
     Restraint  4 — one accent, three faces, two edge styles, no icons.
     Variety    5 — index-led with a structural map, not a colour swap.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  color-scheme: dark;

  /* surfaces — dark elevation goes lighter, never darker */
  --paper:   oklch(0.155 0.009 62);
  --paper-2: oklch(0.185 0.010 62);
  --paper-3: oklch(0.215 0.011 62);
  --paper-4: oklch(0.245 0.012 62);

  /* ink — never pure white, always a little chroma */
  --ink:   oklch(0.955 0.006 75);
  --ink-2: oklch(0.86 0.010 68);
  --ink-3: oklch(0.72 0.012 64);
  --ink-4: oklch(0.60 0.012 62);

  /* rules */
  --rule:      oklch(0.30 0.011 62);
  --rule-soft: oklch(0.24 0.010 62);

  /* the one accent */
  --accent:      oklch(0.72 0.15 62);
  --accent-deep: oklch(0.62 0.13 58);
  --accent-dim:  oklch(0.50 0.055 62);

  --font-display: 'Space Grotesk', 'General Sans', sans-serif;
  --font-body: 'General Sans', 'Space Grotesk', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* motion — three buckets, three curves, nothing default */
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --gut: clamp(1.25rem, 3.6vw, 4.5rem);
  --measure: 34rem;
}

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

html {
  overflow-x: clip;              /* never `hidden` — that breaks sticky */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;            /* display type is always roman */
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.018em;
  line-height: 1.06;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
a { color: var(--ink-2); text-decoration: none; }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 1.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--accent-dim); color: var(--ink); }

.mono {
  font-family: var(--font-mono);
  font-size: 0.755em;
  letter-spacing: 0.07em;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.num { font-variant-numeric: tabular-nums; }

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

.skip {
  position: absolute; left: -999px; top: 0; z-index: 20;
  background: var(--accent); color: oklch(0.20 0.05 62);
  padding: 0.5rem 0.85rem; white-space: nowrap;
}
.skip:focus { left: 0.75rem; top: 0.75rem; }

/* -------------------------------------------------------------- masthead -- */
.wrap { padding-inline: var(--gut); }

.masthead {
  border-bottom: 1px solid var(--rule);
  padding-block: 0 0;
}

.masthead__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.4rem;
  padding-block: clamp(0.9rem, 1.6vw, 1.35rem);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  letter-spacing: 0.1em;
  color: var(--ink);
}

.masthead__descriptor { color: var(--ink-4); }

.masthead__links {
  display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.masthead__links a {
  color: var(--ink-3);
  white-space: nowrap;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.masthead__links a:hover { color: var(--ink); border-bottom-color: var(--ink-4); }

.lede-block { padding-block: clamp(1.75rem, 3.6vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem); }

h1 {
  font-size: clamp(2.35rem, 5.1vw, 4.25rem);
  max-width: 22ch;
  margin-bottom: clamp(1.1rem, 2.2vw, 1.75rem);
}

.lede {
  font-size: clamp(1.0625rem, 1.35vw, 1.22rem);
  line-height: 1.58;
  max-width: var(--measure);
  color: var(--ink-2);
}

.lede + .lede { margin-top: 1rem; }

.lede strong { color: var(--ink); font-weight: 500; }

.positioning {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-soft);
  max-width: var(--measure);
  color: var(--ink-3);
}
.positioning b { color: var(--ink); font-weight: 500; }

/* honest counts — real numbers only, tabular from the brief */
.counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, minmax(0, 1fr)));
  gap: 0;
  border-top: 1px solid var(--rule-soft);
}
.counts li {
  padding: 1.1rem 1rem 1.25rem 0;
  border-bottom: 0;
}
.counts b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.3vw, 1.9rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1;
}
.counts span {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.045em;
  color: var(--ink-3);
  line-height: 1.45;
  max-width: 15ch;
}

/* stage jump — the index's own table of contents, doubles as map control */
.stage-nav {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--rule);
}
.stage-nav button {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  width: 100%;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--rule-soft);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-out);
}
.stage-nav .n {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.stage-nav .t {
  font-family: var(--font-display);
  font-size: 0.98rem;
  color: var(--ink-2);
  white-space: nowrap;
  min-width: 0;
}
.stage-nav .c {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stage-nav button:hover .t { color: var(--ink); }
.stage-nav button[aria-current='true'] .n,
.stage-nav button[aria-current='true'] .t { color: var(--accent); }

/* ---------------------------------------------------------------- shell -- */
.shell {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: start;
  border-bottom: 1px solid var(--rule);
}

.shell__col { min-width: 0; padding: 0 var(--gut) 0 var(--gut); }

/* --------------------------------------------------------------- stages -- */
.stage { border-top: 1px solid var(--rule-soft); padding-block: clamp(2.5rem, 4.5vw, 4.25rem) clamp(1.25rem, 2.5vw, 2rem); }

.stage__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
.stage h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  max-width: 24ch;
}
.stage__count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.stage__note {
  margin-top: 1rem;
  max-width: var(--measure);
  color: var(--ink-2);
}
.stage__note + .stage__note { margin-top: 0.7rem; }
.stage__note em { font-style: italic; }   /* italics survive only in body copy */

/* ---------------------------------------------------------------- index -- */
.index { margin-top: clamp(1.25rem, 2.5vw, 2rem); }

.entry {
  display: grid;
  grid-template-columns: 3.15rem minmax(0, 1fr);
  border-top: 1px solid var(--rule-soft);
  padding: 0.85rem 0 1.05rem;
  transition: border-color var(--dur-short) var(--ease-out);
}
.entry:last-child { border-bottom: 1px solid var(--rule-soft); }
.entry.is-current { border-top-color: var(--accent-dim); }

.entry__hit {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 3.15rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 0;
  width: 100%;
  padding: 0.15rem 0 0.1rem;
  text-align: left;
  cursor: pointer;
}

.entry__no {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-micro) var(--ease-out);
}

.entry__name {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 4.1vw, 1.16rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  overflow-wrap: normal;
  min-width: 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color var(--dur-short) var(--ease-out);
}

.entry__mark {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-4);
  padding-left: 0.9rem;
  white-space: nowrap;
}

.entry__hit:hover .entry__name,
.entry__hit:focus-visible .entry__name { text-decoration-color: var(--accent); }
.entry__hit:hover .entry__no { color: var(--ink-2); }

.entry.is-current .entry__no { color: var(--accent); }
.entry.is-current .entry__name { text-decoration-color: var(--accent-dim); }
.entry.is-current .entry__mark { color: var(--accent); }

.entry__what {
  grid-column: 2;
  margin-top: 0.4rem;
  color: var(--ink-2);
  max-width: 30rem;
}

.entry__meta {
  grid-column: 2;
  margin-top: 0.45rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.73rem;
  letter-spacing: 0.04em;
  color: var(--ink-4);
}
.entry__meta a {
  color: var(--ink-3);
  white-space: nowrap;
  border-bottom: 1px solid var(--rule);
  transition: color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.entry__meta a:hover { color: var(--accent); border-bottom-color: var(--accent-dim); }

/* ------------------------------------------------------------ map frame -- */
.shell__map {
  position: sticky;
  top: 0;
  height: 100vh;
  min-width: 0;
  border-left: 1px solid var(--rule);
  display: grid;                /* canvas + overlay stack in one cell */
  grid-template-areas: 'stack';
  background: var(--paper);
}

.map__canvas,
.map__overlay {
  grid-area: stack;
  min-width: 0;
}
.map__canvas { width: 100%; height: 100%; display: block; }

.map__overlay {
  position: relative;
  overflow: hidden;              /* projected labels stay inside the frame */
  pointer-events: none;
}

.map__hud {
  position: absolute;
  left: clamp(1rem, 2.2vw, 1.75rem);
  right: clamp(1rem, 2.2vw, 1.75rem);
  top: clamp(1rem, 2.2vw, 1.75rem);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.map__meta { min-width: 0; }

.map__key {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.15rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.map__key span { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.map__key i { display: block; width: 1.2rem; }
.map__key .sw-solid { height: 0; border-top: 2px solid var(--ink-2); }
.map__key .sw-dash { height: 0; border-top: 2px dashed var(--ink-2); }
.map__key .sw-plate { height: 0.62rem; border: 1px solid var(--ink-4); background: var(--paper-3); }
.map__key .sw-hot { height: 0.62rem; border: 1px solid var(--accent); background: var(--accent); }

.map__stage {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.map__stage b { color: var(--ink-2); font-weight: 400; white-space: nowrap; }

.map__reset {
  pointer-events: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  border-bottom: 1px solid var(--ink-4);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.map__reset:hover { color: var(--ink); border-bottom-color: var(--ink-3); }

/* projected labels */
.labels { position: absolute; inset: 0; pointer-events: none; }

.node-label {
  position: absolute;
  left: 0; top: 0;
  transform: translate3d(-50%, -50%, 0);
  padding: 0.14rem 0.42rem 0.18rem;
  background: color-mix(in oklch, var(--paper) 96%, transparent);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out);
}
.node-label.is-on { opacity: 1; }
.node-label.is-list {
  font-size: 0.84rem;
  padding: 0.09rem 0.32rem 0.13rem;
  color: var(--ink-2);
}
.node-label.is-hot { color: var(--ink); }
.node-label.is-hot::before {
  content: '';
  position: absolute;
  left: 0.4rem; right: 0.4rem; bottom: 0.02rem;
  border-bottom: 1px solid var(--accent-dim);
}

.cluster-label {
  position: absolute;
  left: 0; top: 0;
  transform: translate3d(-50%, -50%, 0);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}
.cluster-label.is-on { opacity: 0.92; }

.map__fallback {
  position: absolute;
  left: clamp(1rem, 2.2vw, 1.75rem);
  right: clamp(1rem, 2.2vw, 1.75rem);
  bottom: clamp(1rem, 2.2vw, 1.75rem);
  max-width: 30rem;
  padding: 1rem 1.15rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 0.95rem;
}
.js .map__fallback { display: none; }
.map.is-failed .map__fallback { display: block; }
.map.is-failed .labels { display: none; }

/* --------------------------------------------------------- record panel -- */
.record {
  position: absolute;
  left: clamp(1rem, 2.2vw, 1.75rem);
  bottom: clamp(1rem, 2.2vw, 1.75rem);
  width: min(21.5rem, calc(100% - 2rem));
  max-height: min(30rem, calc(100% - 3.5rem));
  overflow-y: auto;
  pointer-events: auto;
  background: var(--paper-4);
  border: 1px solid var(--rule);
  padding: 1.15rem 1.25rem 1.3rem;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 14px, 0);
  transition: opacity var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out),
              visibility 0s linear var(--dur-short);
}
.record[data-open='true'] {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition: opacity var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out),
              visibility 0s;
}

.record__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.record__bar b { color: var(--accent); font-weight: 400; }

.record__close {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.record__close:hover { color: var(--ink); border-bottom-color: var(--ink-4); }

.record h3 {
  margin-top: 0.95rem;
  font-size: 1.3rem;
  letter-spacing: -0.015em;
}
.record__what { margin-top: 0.6rem; color: var(--ink-2); font-size: 1rem; }

.record__facts {
  margin-top: 1rem;
  border-top: 1px solid var(--rule-soft);
}
.record__facts > div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0 0.9rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.record__facts dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  padding-top: 0.18rem;
}
.record__facts dd {
  color: var(--ink-2);
  font-size: 0.96rem;
  min-width: 0;
  overflow-wrap: anywhere;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.95rem;
}
.record__facts dd a { color: var(--ink); border-bottom: 1px solid var(--accent-dim); }

.record__links { margin-top: 1.15rem; }
.record__links h4 {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  font-weight: 400;
}
.record__links li {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.record__links li:last-child { border-bottom: 0; }
.record__kind {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  margin-bottom: 0.28rem;
}

/* a scroll shadow, so clipped content reads as "more below", two stops only */
.record::after {
  content: '';
  display: block;
  position: sticky;
  bottom: -0.1rem;
  height: 1.5rem;
  margin: 0 -1.25rem -1.3rem;
  background: linear-gradient(to bottom, transparent, var(--paper-4));
  pointer-events: none;
}
.record__kind .dot { color: var(--ink-3); }
.record__link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 3.6vw, 1rem);
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 1px solid var(--rule);
  transition: border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.record__link:hover { color: var(--accent); border-bottom-color: var(--accent-dim); }
.record__basis { margin-top: 0.35rem; color: var(--ink-3); font-size: 0.93rem; }

/* --------------------------------------------------------- full sections -- */
.band { border-bottom: 1px solid var(--rule); }
.band__inner { padding-inline: var(--gut); }

.how { padding-block: clamp(2.75rem, 5vw, 4.5rem) clamp(2.25rem, 4vw, 3.5rem); }
.how__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.section-head { border-top: 1px solid var(--rule); padding-top: 1rem; }
h2.section-head { font-size: clamp(1.35rem, 2.2vw, 1.75rem); max-width: 26ch; }

.legend { margin-top: 1.6rem; border-top: 1px solid var(--rule-soft); }
.legend li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0 1rem;
  align-items: start;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-3);
}
.legend .sw { padding-top: 0.72rem; }
.sw--solid, .sw--dotted { display: block; width: 2.6rem; height: 0; }
.sw--solid { border-top: 1px solid var(--ink-3); }
.sw--dotted { border-top: 1.5px dotted var(--ink-3); }
.sw--hull { display: block; width: 2.6rem; height: 0.9rem; border: 1px solid var(--ink-4); }
.sw--node { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); margin-top: 0.35rem; }
.sw--hot { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-top: 0.35rem; }
.legend b { color: var(--ink-2); font-weight: 500; }

/* builds — definition list, no cards, no icons */
.builds { padding-block: clamp(3rem, 6vw, 6rem) clamp(2.5rem, 4vw, 4rem); }
.builds__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: start;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.builds p.intro { max-width: 26rem; color: var(--ink-2); margin-top: 1.4rem; }

.specs { border-top: 1px solid var(--rule); }
.specs > div {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 0.4rem 1.5rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.specs dt {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink);
}
.specs dd { color: var(--ink-2); min-width: 0; }

/* claims — indented column, varied rhythm */
.claims { padding-block: clamp(2.5rem, 4.5vw, 3.75rem); }
.claims__inner { padding-left: clamp(0rem, 12vw, 10rem); }
.claims__inner > div { max-width: 40rem; padding: 1.15rem 0; border-bottom: 1px solid var(--rule-soft); }
.claims__inner p + p { margin-top: 0.7rem; }
.claims b { color: var(--ink); font-weight: 500; }

/* ops — a real table with tabular numbers */
.ops { padding-block: clamp(2.25rem, 4vw, 3.25rem) clamp(3rem, 5vw, 4.5rem); }
.ops table { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.ops caption {
  text-align: left;
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding-bottom: 0.85rem;
}
.ops th, .ops td {
  text-align: left;
  vertical-align: top;
  padding: 1rem 1.5rem 1rem 0;
  border-top: 1px solid var(--rule-soft);
  min-width: 0;
}
.ops th {
  width: 12rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  font-weight: 400;
  color: var(--ink-3);
}
.ops td { color: var(--ink-2); }
.ops .num { color: var(--ink); }

/* --------------------------------------------------------------- footer -- */
.footer { padding-block: clamp(2.75rem, 5vw, 4.5rem) clamp(2rem, 3vw, 2.75rem); }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
.footer__list { border-top: 1px solid var(--rule); }
.footer__list li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  align-items: baseline;
}
.footer__list .k {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--ink-4);
  width: 5.5rem;
}
.footer__list a {
  color: var(--ink);
  white-space: nowrap;
  border-bottom: 1px solid var(--accent-dim);
}
.footer__list a:hover { color: var(--accent); }
.footer__list .v { color: var(--ink-3); }
.footer__tail {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.045em;
}
.footer__tail a { color: var(--ink-3); border-bottom: 1px solid var(--rule); white-space: nowrap; }
.footer__tail a:hover { color: var(--accent); }

/* --------------------------------------------------------------- motion -- */
/* No scroll-reveal fades anywhere: the one orchestrated load moment is the
   lattice drawing itself (staggered in the node shader), and scroll does the
   structural work by dollying the camera. Exits run at ~75% of the enter. */

/* --------------------------------------------------------- the 44px beds - */
@media (max-width: 1040px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .shell__map {
    border-left: 0;
    border-bottom: 1px solid var(--rule);
    height: 56vh;
    min-height: 19rem;
    order: -1;
    position: sticky;
    top: 0;
    z-index: 3;
  }
  .how__grid, .builds__grid, .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .specs > div { grid-template-columns: minmax(0, 1fr); }
  .claims__inner { padding-left: clamp(0rem, 6vw, 3rem); }
  .record { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-height: 54vh; border-left: 0; border-right: 0; border-bottom: 0; z-index: 8; }
}

@media (max-width: 620px) {
  .cluster-label { font-size: 0.68rem; letter-spacing: 0.08em; }
  .node-label { font-size: 0.78rem; }
  .node-label.is-list { font-size: 0.74rem; }
  /* a phone keeps the two encodings that carry meaning (solid vs dashed) and
     leaves the rest to the legend in the page flow, so the map gets its top
     third back for labels */
  .map__key { gap: 0.2rem 0.7rem; font-size: 0.72rem; }
  .map__key i { width: 1rem; }
  .map__key span:nth-child(n + 3) { display: none; }
  .entry { grid-template-columns: 2.35rem minmax(0, 1fr); }
  .entry__hit { grid-template-columns: 2.35rem minmax(0, 1fr) auto; }
  .entry__name { font-size: clamp(0.92rem, 4.3vw, 1.06rem); }
  .counts { grid-template-columns: repeat(auto-fit, minmax(7.5rem, minmax(0, 1fr))); }
  .ops th { width: auto; display: block; border-top: 1px solid var(--rule-soft); padding-bottom: 0; }
  .ops td { display: block; border-top: 0; padding-top: 0.35rem; }
  .ops tr { display: block; padding-bottom: 0.75rem; }
  .legend li { grid-template-columns: 2.80rem minmax(0, 1fr); gap: 0 0.7rem; }
  .footer__list .k { width: 4.75rem; }
  .masthead__links { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* spatial motion collapses to an opacity crossfade */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 60ms !important;
    transition-property: opacity !important;
  }
  .record { transform: none; }
  .node-label, .cluster-label { transition-property: opacity !important; }
}