/* ==========================================================================
   hey-shiv.github.io — SIGNAL (retoned to Coral & Cream, Sept 2026)
   --------------------------------------------------------------------------
   Not a portfolio laid out as a document. An interface for a way of working:
   signal -> representation -> retrieval -> evaluation -> failure -> iteration.

   Default mode is the instrument: near-black ground, a single acid-signal
   accent spent only on active/selected/measured states, huge display type
   next to tiny monospace telemetry. The toggle switches to PAPER — a warm,
   quiet reading surface for when the content, not the machine, should be
   in front.

   Structure comes from type, rules, and the signal line — not from cards.
   ========================================================================== */

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

:root {
  /* ---- INSTRUMENT (default): near-black ground, quiet steel borders. */
  --bg: #1f1411;
  --bg-sunk: #180f0d;
  --surface: #2a1c18;
  --surface-elevated: #33231e;

  --text: #f7e9e4;
  --text-secondary: #d4bfb8;
  --text-muted: #b29d96;
  --heading: #fff5ef;
  --heading-soft: #f7e9e4;

  --border: #3a2a25;
  --border-strong: #4f3a33;

  /* The one accent: coral on dark, deep coral on cream (contrast-safe). Decorative/state only — never
     run as body-text color, so contrast stays honest in both modes. */
  --signal: #ff8f84;
  --signal-dim: #d9736a;
  --signal-wash: rgba(255, 111, 97, 0.12);
  --on-signal: #1f1411;

  /* Readable accent for links/interactive text: bright enough on dark. */
  --accent: #ff8f84;
  --accent-hover: #ffb0a8;
  --accent-soft: #e37c71;
  --accent-wash: var(--signal-wash);
  --on-accent: #1f1411;

  /* Semantic status, deliberately separate from the accent. */
  --done: #57c47f;
  --progress: #ff8f84;
  --negative: #b29d96;

  --code-bg: #180f0d;
  --code-text: #f7e9e4;
  --dot: #57c47f;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.45);

  --s1: 0.25rem;  --s2: 0.375rem; --s3: 0.5rem;  --s4: 0.75rem;
  --s5: 1rem;     --s6: 1.25rem;  --s7: 1.5rem;  --s8: 2rem;
  --s9: 2.75rem;  --s10: 3.5rem;  --s11: 4.5rem; --s12: 6rem;
  --s13: 8rem;

  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 10px;

  --measure: 34rem;
  --measure-wide: 40rem;
  --measure-read: 42rem;
  --page: 60rem;
  --page-wide: 78rem;

  --font-display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", "SFMono-Regular", Consolas, monospace;

  --glow-1: transparent;
  --glow-2: transparent;
  --glow-3: transparent;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --nav-h: 3.25rem;
}

html {
  font-size: 16px;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

/* ---- PAPER: a quiet, warm reading surface. Toggled, not default. */
html[data-theme="light"] {
  color-scheme: light;
  --glow-1: transparent;
  --glow-2: transparent;
  --glow-3: transparent;

  --bg: #fff5ef;
  --bg-sunk: #fbe9e1;
  --surface: #fffaf7;
  --surface-elevated: #ffffff;

  --text: #2a1a17;
  --text-secondary: #4d3a35;
  --text-muted: #6b5853;
  --heading: #221512;
  --heading-soft: #2a1a17;

  --border: #f0dcd4;
  --border-strong: #e2c4b9;

  /* On paper the accent also carries small text (active step labels, HUD,
     open-status), so it is darkened to clear AA rather than staying acid. */
  --signal: #b8412f;
  --signal-dim: #ff6f61;
  --signal-wash: rgba(255, 111, 97, 0.14);
  --on-signal: #ffffff;

  --accent: #b8412f;
  --accent-hover: #9a3424;
  --accent-soft: #ff6f61;
  --accent-wash: var(--signal-wash);
  --on-accent: #ffffff;

  --done: #2f7a4f;
  --progress: #b8412f;
  --negative: #75625d;

  --code-bg: #fbe9e1;
  --code-text: #2a1a17;
  --dot: #2f7a4f;

  --shadow-sm: 0 1px 2px rgba(20, 18, 8, 0.05);
  --shadow-md: 0 1px 2px rgba(20, 18, 8, 0.04), 0 10px 28px rgba(20, 18, 8, 0.08);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(48vmax 48vmax at 12% 18%, var(--glow-1), transparent 70%),
    radial-gradient(44vmax 44vmax at 88% 30%, var(--glow-2), transparent 70%),
    radial-gradient(40vmax 40vmax at 45% 95%, var(--glow-3), transparent 70%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

a { color: var(--accent); text-decoration: none; }
a:hover, a:focus-visible { color: var(--accent-hover); }

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

img { max-width: 100%; display: block; }
figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s10) 0 0; }
::selection { background: var(--accent-wash); color: var(--heading); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--s3) var(--s5);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.skip-link:focus { left: var(--s5); top: var(--s3); color: var(--on-accent); }

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

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0 0 var(--s5);
  font-family: var(--font-display);
  color: var(--heading);
  line-height: 1.16;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.5rem + 2.1vw, 2.9rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.04em; }
h2 { font-size: clamp(1.42rem, 1.24rem + 0.8vw, 1.75rem); font-weight: 600; }
h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.02em; }
h4 { font-size: 0.98rem; font-weight: 600; }

p {
  margin: 0 0 var(--s5);
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.7;
  max-width: var(--measure);
  text-wrap: pretty;
}

ul, ol { margin: 0; padding-left: 1.2rem; }
li + li { margin-top: var(--s4); }
strong { font-weight: 600; color: var(--heading-soft); }

.eyebrow, .section-label, .post-meta, .meta-label {
  margin: 0 0 var(--s5);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.section-copy { font-size: 0.95rem; }
.muted { color: var(--text-muted); }

.identity, .subtitle {
  margin: 0 0 var(--s5);
  max-width: var(--measure-wide);
  color: var(--text-secondary);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.55;
}

.statement {
  margin: 0 0 var(--s5);
  max-width: var(--measure-wide);
  color: var(--text);
  font-size: clamp(1.08rem, 1rem + 0.4vw, 1.28rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.018em;
}

.back-links { margin-top: var(--s8); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.05em; }
.back-links a { color: var(--text-muted); }
.back-links a:hover { color: var(--text); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.container { max-width: var(--page); margin: 0 auto; padding: 0 var(--s7) var(--s11); }

main section { margin: 0 0 var(--s11); padding-top: var(--s10); border-top: 1px solid var(--border); }
main section:first-of-type { padding-top: 0; border-top: 0; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  margin-bottom: var(--s7);
}

.section-head .section-label { margin-bottom: 0; }
.section-head h2 { margin: 0; }

.section-link { flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-muted); }
.section-link:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   5. Navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-height: var(--nav-h);
  margin-bottom: var(--s9);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s7);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
}

.site-nav a { position: relative; display: inline-block; padding: var(--s2) 0; color: var(--text-muted); font-weight: 500; }

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s var(--ease);
}

.site-nav a:hover, .site-nav a:focus-visible { color: var(--text); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--text); }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav-logo {
  display: flex;
  align-items: center;
  margin-right: var(--s3);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.nav-logo::after { display: none; }
.nav-logo img { border-radius: var(--radius-sm); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  margin-left: auto;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-family: "Apple Symbols", "Segoe UI Symbol", sans-serif;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.theme-toggle:hover, .theme-toggle:focus-visible { color: var(--text); background: var(--bg-sunk); outline: none; }

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

.hero { margin: 0 0 var(--s11); padding-top: 0; border-top: 0; }

/* The hero is a masthead, not a column.

   The name runs the full measure of the page. Beneath it a split row puts
   the thesis against the supporting detail, so the block has two live edges
   instead of one ragged one. Then the visualisation breaks the container
   entirely and runs edge to edge — the widest thing on the site, and the
   first thing that shows the work rather than describing it. */

.hero-grid { display: block; }

.hero-lede { max-width: none; }

.hero-split { display: block; }

@media (min-width: 860px) {
  .hero-split {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: var(--s10);
    align-items: start;
    padding-top: var(--s7);
    border-top: 1px solid var(--border);
  }

  .hero-split > * { min-width: 0; }
}

/* Full-bleed: escape the container and span the viewport. */
.hero-viz {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: var(--s10);
  padding: var(--s7) 0 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunk);
}

.hero-viz canvas {
  display: block;
  width: 100%;
  height: clamp(150px, 20vw, 260px);
}

.hero-viz-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--s7) var(--s7);
}

/* ---- Masthead type ---- */

.availability-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s7);
  padding: 0.28rem 0.65rem 0.28rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.availability-main {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.availability-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--dot); }

.availability-pill {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.availability-pill::before { content: "/"; margin-right: var(--s2); color: var(--border-strong); }

/* The name is the masthead: it runs the full measure of the page. */
.hero-name {
  margin: 0 0 var(--s4);
  max-width: none;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 0.2rem + 8.6vw, 6.4rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.9;
}

.hero-role {
  margin: 0 0 var(--s7);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-role b { color: var(--border-strong); font-weight: 500; }

.hero .statement {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(1.3rem, 0.95rem + 1.45vw, 2rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.032em;
}

.hero p:not(.statement):not(.hero-role) { max-width: 34rem; font-size: 0.98rem; }

/* --------------------------------------------------------------------------
   7. Actions — a real CTA hierarchy
   -------------------------------------------------------------------------- */

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s7); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 2.5rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease),
    color 0.18s var(--ease), transform 0.18s var(--ease);
}

.btn:hover, .btn:focus-visible { border-color: var(--text); color: var(--text); transform: translateY(-1px); }

.btn-primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.btn-primary:hover, .btn-primary:focus-visible { border-color: var(--accent-hover); background: var(--accent-hover); color: var(--on-accent); }

.btn-arrow { font-size: 0.85rem; line-height: 1; opacity: 0.6; transition: transform 0.18s var(--ease); }
.btn:hover .btn-arrow { transform: translate(1px, -1px); opacity: 1; }

.actions-quiet {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  margin-top: var(--s5);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
}

.actions-quiet a { color: var(--text-muted); border-bottom: 1px solid var(--border-strong); padding-bottom: 1px; }
.actions-quiet a:hover { color: var(--text); border-bottom-color: var(--accent); }

/* --------------------------------------------------------------------------
   8. Hero artifact — a trace from the retrieval pipeline
   -------------------------------------------------------------------------- */

.artifact {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.artifact-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunk);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.artifact-bar b { color: var(--text-secondary); font-weight: 500; }
.artifact-body { padding: var(--s5); }

.trace { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.trace li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  gap: var(--s4);
  align-items: baseline;
  margin: 0;
  padding: var(--s3) 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
}

.trace li + li { border-top: 1px dashed var(--border); }
.trace .t-step { color: var(--border-strong); font-size: 0.66rem; }
.trace .t-name { color: var(--text); }
.trace .t-val { color: var(--text-muted); font-size: 0.68rem; text-align: right; white-space: nowrap; }
.trace li:last-child .t-name { color: var(--accent); }

.artifact-foot {
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--border);
  background: var(--bg-sunk);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   9. Work
   -------------------------------------------------------------------------- */

.featured-projects, .work-list { display: grid; gap: var(--s7); margin: 0; padding: 0; list-style: none; }
.featured-projects > li + li, .work-list > li + li { margin-top: 0; }

.project-card {
  position: relative;
  min-width: 0;
  padding: var(--s7);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.project-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.project-card p { max-width: none; font-size: 0.95rem; }
.project-card p:last-child { margin-bottom: 0; }

.project-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5); margin-bottom: var(--s5); }
.project-card-header h3 { margin: 0; font-size: 1.2rem; }
.project-card-header .eyebrow { margin-bottom: var(--s2); }

.project-index { display: block; margin-bottom: var(--s2); color: var(--text-muted); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; }

.status-token {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  flex: 0 0 auto;
  padding: 0.18rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-sunk);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-token::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: currentColor; }
.status-token[data-state="building"] { color: var(--progress); }
.status-token[data-state="done"] { color: var(--done); }
.status-token[data-state="negative"] { color: var(--negative); }

.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5);
  margin: var(--s6) 0;
  padding: var(--s5) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.metric-strip-large { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.metric-strip span {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-transform: uppercase;
}

.metric-strip strong {
  color: var(--heading);
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1;
  text-transform: none;
}

.stack { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s5) 0 0; padding: 0; list-style: none; }

.stack li {
  margin: 0;
  padding: 0.16rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.learned {
  margin: var(--s6) 0 0;
  padding: var(--s5);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--accent-wash);
}

.learned p { margin: 0; max-width: none; color: var(--text); font-size: 0.93rem; }
.learned .meta-label { margin-bottom: var(--s2); color: var(--accent); }

.project-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin: var(--s6) 0; }
.project-spec div { padding-top: var(--s4); border-top: 1px solid var(--border); }

.project-spec dt {
  margin-bottom: var(--s2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.project-spec dd { margin: 0; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; }

.project-links { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); padding: 0; list-style: none; }

.project-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 2.1rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.project-links a:hover, .project-links a:focus-visible { border-color: var(--text); color: var(--text); }

.project-figure { margin: var(--s6) 0 0; padding: var(--s5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-sunk); }
.project-figure img { width: 100%; height: auto; mix-blend-mode: normal; filter: invert(1) hue-rotate(180deg); opacity: 0.86; }
html[data-theme="light"] .project-figure img { mix-blend-mode: multiply; filter: none; opacity: 1; }
.project-figure figcaption { margin-top: var(--s4); color: var(--text-muted); font-family: var(--font-mono); font-size: 0.64rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   10. Pipelines
   -------------------------------------------------------------------------- */

.mini-map { margin: var(--s6) 0; padding: var(--s5) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.mini-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin: 0; padding: 0; list-style: none; }

.mini-flow li { position: relative; min-width: 0; margin: 0; padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-sunk); }
.mini-flow li + li::before { content: ""; position: absolute; top: 50%; left: calc(var(--s3) * -1); width: var(--s3); height: 1px; background: var(--border-strong); }
.mini-flow span { display: block; color: var(--heading-soft); font-family: var(--font-display); font-size: 0.86rem; font-weight: 600; line-height: 1.25; }
.mini-flow small { display: block; margin-top: var(--s1); color: var(--text-muted); font-size: 0.7rem; line-height: 1.45; }

.pipeline-grid, .roadmap-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin: var(--s6) 0 0; padding: 0; list-style: none; }
.pipeline-grid li, .roadmap-list li { margin: 0; padding: var(--s5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.pipeline-grid span, .roadmap-list span { display: block; margin-bottom: var(--s3); color: var(--text-muted); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; }
.pipeline-grid strong, .roadmap-list strong { display: block; color: var(--heading); font-family: var(--font-display); font-size: 0.96rem; font-weight: 600; line-height: 1.3; }
.pipeline-grid small, .roadmap-list small { display: block; margin-top: var(--s2); color: var(--text-muted); font-size: 0.76rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   11. Lists
   -------------------------------------------------------------------------- */

.focus-grid, .signal-list, .philosophy-list, .now-list, .detail-list,
.post-list, .project-list, .folder-list, .dash-list, .lab-note-list, .stance-list { list-style: none; padding: 0; }

.focus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s8); }
.signal-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s6); }

.focus-grid li, .signal-list li, .now-list li, .detail-list li {
  position: relative;
  margin: 0;
  padding: var(--s4) 0 var(--s4) var(--s6);
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
}

.focus-grid li::before, .signal-list li::before, .now-list li::before, .detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.42em;
  width: 8px;
  height: 1px;
  background: var(--border-strong);
}

.philosophy-list li, .stance-list li {
  margin: 0;
  padding: var(--s5) 0;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.6;
}

.stance-list li { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: var(--s5); }
.stance-list b { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; }

.dash-list li { position: relative; margin: 0 0 var(--s4); padding-left: var(--s6); color: var(--text-secondary); }
.dash-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1px; background: var(--border-strong); }

.lab-note-list li {
  display: grid;
  grid-template-columns: minmax(9rem, 0.85fr) minmax(0, 1.6fr);
  gap: var(--s5);
  margin: 0;
  padding: var(--s5) 0;
  border-top: 1px solid var(--border);
}

.lab-note-list strong { color: var(--heading-soft); font-family: var(--font-display); font-size: 0.96rem; font-weight: 600; }
.lab-note-list span { color: var(--text-secondary); font-size: 0.93rem; line-height: 1.6; }

.skill-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s7); margin: 0; padding: 0; }
.skill-cols > div { padding-top: var(--s4); border-top: 1px solid var(--border); }
.skill-cols dt { margin-bottom: var(--s3); color: var(--text-muted); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; }
.skill-cols dd { margin: 0; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.7; }

.trajectory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin: var(--s7) 0 0; padding: 0; list-style: none; }

.trajectory li {
  margin: 0;
  padding: var(--s5);
  border: 1px solid var(--border);
  border-top: 2px solid var(--border-strong);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface);
}

.trajectory li:nth-child(1) { border-top-color: var(--done); }
.trajectory li:nth-child(2) { border-top-color: var(--accent); }
.trajectory li:nth-child(3) { border-top-color: var(--border-strong); }

.trajectory h3 { margin: 0 0 var(--s3); color: var(--text-muted); font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.trajectory p { margin: 0; max-width: none; font-size: 0.92rem; line-height: 1.6; }

/* --------------------------------------------------------------------------
   12. Writing
   -------------------------------------------------------------------------- */

.post-list { margin-top: 0; }
.post-list li { margin: 0; padding: var(--s6) 0; border-top: 1px solid var(--border); }

.post-title { display: block; color: var(--heading); font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.018em; line-height: 1.35; }
a.post-title:hover, a.post-title:focus-visible { color: var(--accent); }
.post-meta { display: block; margin: var(--s2) 0 var(--s3); font-size: 0.66rem; }

.post-kind {
  display: inline-block;
  margin-right: var(--s3);
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.folder-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s7); }
.folder-list li { margin: 0; padding: 0; }

.folder-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 6.5rem;
  padding: var(--s6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text-secondary);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.folder-link:hover, .folder-link:focus-visible { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.folder-label { display: block; margin-bottom: auto; color: var(--heading); font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; }
.folder-meta { display: block; margin-top: var(--s6); color: var(--text-muted); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; }

.project-list { margin-top: var(--s6); }
.project-list li { margin: 0; padding: var(--s6) 0; border-top: 1px solid var(--border); }
.project-title { display: block; margin-bottom: var(--s3); color: var(--heading-soft); font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -0.018em; line-height: 1.4; }

.previous-work { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--border); }

.previous-work summary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  list-style: none;
}

.previous-work summary::-webkit-details-marker { display: none; }

.previous-work summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  line-height: 1;
}

.previous-work[open] summary::before { content: "\2212"; }
.previous-work summary:hover { color: var(--text); }

/* --------------------------------------------------------------------------
   13. Detail pages
   -------------------------------------------------------------------------- */

.detail-hero h1 { max-width: 22ch; }
.detail-meta { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s6) 0 0; padding: 0; list-style: none; }

.detail-meta li {
  margin: 0;
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.summary-grid, .now-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s6); }
.summary-block, .now-block, .artifact-panel { padding: var(--s6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.summary-block h3, .now-block h3, .artifact-panel h3 { margin-bottom: var(--s4); font-size: 0.98rem; }
.summary-block p, .now-block p, .artifact-panel p { margin: 0; max-width: none; font-size: 0.92rem; line-height: 1.65; }

.artifact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s6); }
.artifact-panel pre { margin: var(--s4) 0 0; max-width: 100%; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.artifact-panel code { white-space: pre-wrap; overflow-wrap: anywhere; }
.architecture-panel { margin-top: var(--s7); }

.system-map { margin-top: var(--s7); padding: var(--s6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }

.system-map-title { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); margin-bottom: var(--s5); padding-bottom: var(--s4); border-bottom: 1px solid var(--border); }
.system-map-title strong { color: var(--heading); font-family: var(--font-display); font-size: 0.98rem; font-weight: 600; }
.system-map-title span { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; }

.diagram-lanes { display: grid; gap: var(--s4); }
.diagram-lane { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s4); align-items: stretch; }

.diagram-lane-label {
  display: flex;
  align-items: center;
  margin: 0;
  padding: var(--s4);
  border: 1px solid var(--border);
  border-left: 2px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-sunk);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.diagram-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.diagram-flow li { position: relative; min-width: 0; margin: 0; padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.diagram-flow li + li::before { content: ""; position: absolute; top: 50%; left: calc(var(--s3) * -1); width: var(--s3); height: 1px; background: var(--border-strong); }
.diagram-flow strong { display: block; color: var(--heading-soft); font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; line-height: 1.3; }
.diagram-flow small { display: block; margin-top: var(--s1); color: var(--text-muted); font-size: 0.72rem; line-height: 1.45; }

/* --------------------------------------------------------------------------
   14. Articles
   -------------------------------------------------------------------------- */

.article-header { margin-top: var(--s8); }
.article-header .statement, .article-header p { max-width: 42rem; }
.article-header p:last-child { margin-bottom: 0; }

article { margin-top: var(--s8); }
article h2 { margin-top: var(--s9); margin-bottom: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--border); }
article p, article li { color: var(--text-secondary); }
article p { font-size: 1.06rem; line-height: 1.8; max-width: 42rem; }
article ul, article ol { margin: var(--s5) 0 var(--s7); max-width: 42rem; }

article pre {
  margin: var(--s6) 0 var(--s7);
  padding: var(--s5);
  overflow-x: auto;
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--code-bg);
  color: var(--code-text);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.65;
  white-space: pre-wrap;
}

article code { font-family: var(--font-mono); font-size: 0.86em; }
article pre code { font-size: inherit; }
article :not(pre) > code { padding: 0.08rem 0.3rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--code-bg); color: var(--code-text); }

.article-figure { margin: var(--s8) 0; }
.article-figure img { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); }
.article-figure figcaption { margin-top: var(--s3); max-width: 42rem; color: var(--text-muted); font-size: 0.8rem; line-height: 1.55; }

.lab-note { margin: var(--s7) 0; padding: var(--s5); border: 1px solid var(--border); border-left: 2px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--accent-wash); }
.lab-note p { margin: 0; max-width: none; color: var(--text); font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   15. Contact + footer
   -------------------------------------------------------------------------- */

.contact { padding-top: var(--s10); border-top: 1px solid var(--border); }
.contact h2 { max-width: 16ch; margin-bottom: var(--s6); font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); letter-spacing: -0.035em; }

footer { margin-top: var(--s10); padding: var(--s7) 0 var(--s8); border-top: 1px solid var(--border); }
.footer-grid { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s5); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s6); margin: 0; padding: 0; list-style: none; }
.footer-links li { margin: 0; }
.footer-links a { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.05em; }
.footer-links a:hover { color: var(--text); }
footer p { margin: 0; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; }

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s8); }
  .hero .statement { max-width: 32ch; }
  .signal-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipeline-grid, .roadmap-list, .trajectory { grid-template-columns: 1fr; }
  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
}

@media (max-width: 640px) {
  .container { padding: 0 var(--s6) var(--s10); }
  main section { margin-bottom: var(--s10); padding-top: var(--s9); }
  .hero { margin-bottom: var(--s10); }
  .site-header { gap: var(--s4); margin-bottom: var(--s8); }
  .site-nav { gap: var(--s5); font-size: 0.72rem; }
  .section-head { display: block; }
  .section-head .section-link { display: inline-block; margin-top: var(--s3); }

  .metric-strip, .focus-grid, .signal-list, .project-spec,
  .summary-grid, .now-grid, .artifact-grid, .folder-list,
  .mini-flow, .diagram-flow { grid-template-columns: 1fr; }

  .mini-flow, .diagram-flow { gap: var(--s4); }
  .mini-flow li + li::before, .diagram-flow li + li::before { top: calc(var(--s4) * -1); left: var(--s5); width: 1px; height: var(--s4); }
  .diagram-lane { grid-template-columns: 1fr; gap: var(--s3); }
  .project-card { padding: var(--s6); }
  .project-card-header { display: block; }
  .status-token { margin-top: var(--s4); }
  .lab-note-list li, .stance-list li { grid-template-columns: 1fr; gap: var(--s2); }
  .system-map, .system-map-title { display: block; }
  .system-map { padding: var(--s5); }
  .system-map-title span { display: block; margin-top: var(--s2); }
  .trace li { grid-template-columns: 1.2rem minmax(0, 1fr); }
  .trace .t-val { grid-column: 2; text-align: left; }
  .btn { flex: 1 1 auto; justify-content: center; }
  .footer-grid { display: grid; gap: var(--s5); }
}

/* --------------------------------------------------------------------------
   17. Motion and print
   -------------------------------------------------------------------------- */

.reveal { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise 0.55s var(--ease) both; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
}

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

@media print {
  .theme-toggle, .site-nav, .back-links, .skip-link { display: none; }
  body { background: #fff; color: #000; }
  .project-card, .folder-link, .summary-block, .now-block, .artifact { box-shadow: none; }
}

.skill-cols-spaced { margin-top: var(--s9); }

/* --------------------------------------------------------------------------
   18. Hero visualisation
   --------------------------------------------------------------------------
   Signal, representation, retrieval — the shape of the pipeline, drawn from
   generated data and labelled as such.
   -------------------------------------------------------------------------- */

.hero-viz {
  margin-top: var(--s10);
  padding-top: var(--s6);
  border-top: 1px solid var(--border);
}

.hero-viz canvas {
  display: block;
  width: 100%;
  height: 190px;
}

.viz-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s7);
  margin: var(--s6) 0 0;
  padding: 0;
  list-style: none;
}

.viz-legend li {
  margin: 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
}

.viz-legend b {
  display: block;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.viz-legend span {
  display: block;
  margin-top: var(--s1);
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.viz-note {
  margin: var(--s5) 0 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   19. Failure timeline
   -------------------------------------------------------------------------- */

.timeline { margin: 0; padding: 0; list-style: none; }

.timeline > li {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--s6);
  margin: 0;
  padding: var(--s8) 0;
  border-top: 1px solid var(--border);
}

.timeline > li:first-child { border-top: 0; padding-top: 0; }

.tl-num {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.tl-body h3 { margin: 0 0 var(--s5); font-size: 1.1rem; }

.tl-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--border);
}

.tl-steps li {
  position: relative;
  margin: 0;
  padding: 0 var(--s5) 0 var(--s5);
  border-right: 1px solid var(--border);
}

.tl-steps li:last-child { border-right: 0; }

/* The marker that walks the timeline. The last step is the resolution. */
.tl-steps li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0.42em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--border-strong);
}

.tl-steps li:last-child::before { background: var(--done); }

.tl-steps b {
  display: block;
  margin-bottom: var(--s2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.tl-steps span { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; }

/* --------------------------------------------------------------------------
   20. Writing index — publication style
   -------------------------------------------------------------------------- */

.writing-list { margin: 0; padding: 0; list-style: none; counter-reset: w; }

.writing-list > li { margin: 0; border-top: 1px solid var(--border); }
.writing-list > li:last-child { border-bottom: 1px solid var(--border); }

.w-row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: var(--s6);
  align-items: baseline;
  padding: var(--s7) 0;
  color: var(--heading);
  transition: padding-left 0.25s var(--ease), color 0.2s var(--ease);
}

a.w-row:hover, a.w-row:focus-visible { padding-left: var(--s4); color: var(--accent); }

.w-num { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; }

.w-title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.94rem + 0.55vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.25;
}

.w-meta {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.w-row[aria-disabled="true"] { color: var(--text-secondary); }
.w-row[aria-disabled="true"] .w-title { color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   21. Motion — only when JS is present, so nothing is ever stranded hidden
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html.js-motion .rise {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }

  html.js-motion .rise.in { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .viz-legend { grid-template-columns: 1fr; gap: var(--s4); }
  .tl-steps { grid-template-columns: 1fr; border-left: 1px solid var(--border); }
  .tl-steps li { padding: var(--s4) 0 var(--s4) var(--s5); border-right: 0; }
  .tl-steps li + li { border-top: 1px solid var(--border); }
}

@media (max-width: 640px) {
  .hero-viz canvas { height: 150px; }
  .timeline > li { grid-template-columns: 1fr; gap: var(--s4); }
  .w-row { grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s4); padding: var(--s6) 0; }
  .w-meta { grid-column: 2; }
}

/* Video figure — the 4K pipeline render. */
.project-figure-video { padding: 0; overflow: hidden; }

.project-figure-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--bg-sunk);
}

.project-figure-video figcaption { padding: var(--s4) var(--s5) var(--s5); margin-top: 0; }

/* --------------------------------------------------------------------------
   22. Now — a status board, not a resume
   -------------------------------------------------------------------------- */

.status-list { margin: 0; padding: 0; list-style: none; counter-reset: st; }

.status-list > li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--s6);
  margin: 0;
  padding: var(--s6) 0;
  border-top: 1px solid var(--border);
}

.status-list > li:last-child { border-bottom: 1px solid var(--border); }

.status-list .st-num { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; }
.status-list h3 { margin: 0 0 var(--s2); font-size: 1.02rem; }
.status-list p { margin: 0; max-width: none; font-size: 0.93rem; line-height: 1.62; }

.status-state {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.status-state::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: currentColor; }
.status-state[data-state="done"] { color: var(--done); }
.status-state[data-state="active"] { color: var(--accent); }

@media (max-width: 640px) {
  .status-list > li { grid-template-columns: 1fr; gap: var(--s2); }
}

/* --------------------------------------------------------------------------
   23. Vertical pipeline — flagship project page
   -------------------------------------------------------------------------- */

.pipeline-v { margin: var(--s7) 0 0; padding: 0; list-style: none; counter-reset: pv; }

.pipeline-v > li {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--s5);
  margin: 0;
  padding: 0 0 var(--s7);
}

.pipeline-v > li:last-child { padding-bottom: 0; }

/* The connecting rail. */
.pipeline-v > li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 0.62rem;
  top: 1.5rem;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.pv-dot {
  position: relative;
  z-index: 1;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
}

.pipeline-v > li[data-built="yes"] .pv-dot { border-color: var(--done); background: var(--done); }
.pipeline-v > li[data-built="next"] .pv-dot { border-color: var(--accent); border-style: dashed; }

.pv-body strong {
  display: block;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.018em;
}

.pv-body small { display: block; margin-top: var(--s1); color: var(--text-muted); font-size: 0.82rem; line-height: 1.55; }

.pv-tag {
  display: inline-block;
  margin-top: var(--s3);
  padding: 0.1rem 0.42rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pipeline-v > li[data-built="yes"] .pv-tag { color: var(--done); border-color: color-mix(in srgb, var(--done) 40%, var(--border)); }
.pipeline-v > li[data-built="next"] .pv-tag { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }

/* ==========================================================================
   24. Art direction pass
   --------------------------------------------------------------------------
   Less formatting, more composition. Three moves:
     – projects stop being cards and become editorial blocks
     – numbers become objects, not table cells
     – large statements break the page and give the eye somewhere to rest
   Later in the cascade than the base rules, so these win by order.
   ========================================================================== */

/* ---- Projects: editorial blocks, not cards ---------------------------- */

.featured-projects { gap: 0; }

.project-card {
  padding: var(--s12) 0 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.project-card:hover { border-color: var(--border); box-shadow: none; }

.featured-projects > li:first-child .project-card,
.featured-projects > .project-card:first-child { border-top: 0; padding-top: var(--s9); }

.project-card-header { display: block; margin-bottom: var(--s7); }

.project-index {
  display: block;
  margin-bottom: var(--s5);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
}

.project-card-header .eyebrow { margin-bottom: var(--s4); }

.project-card-header h3 {
  max-width: 14ch;
  font-size: clamp(1.9rem, 1.1rem + 3.1vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.project-card-header .status-token { margin-top: var(--s5); }

/* The lead paragraph of a project reads like a standfirst. */
.project-card > p:first-of-type {
  max-width: 30rem;
  font-size: clamp(1.05rem, 0.96rem + 0.42vw, 1.24rem);
  font-weight: 450;
  line-height: 1.5;
  letter-spacing: -0.014em;
  color: var(--text);
}

.project-card > p { max-width: 34rem; }

/* ---- Numbers as objects ---------------------------------------------- */

.metric-strip {
  gap: var(--s8) var(--s7);
  margin: var(--s9) 0;
  padding: 0;
  border: 0;
}

.metric-strip span { gap: var(--s2); }

.metric-strip strong {
  font-size: clamp(2.4rem, 1.3rem + 3.4vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.9;
}

.metric-strip span {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}

/* ---- Large statements: the page breathing ----------------------------- */

.anchor-statement {
  margin: 0;
  padding: var(--s12) 0;
  border-top: 1px solid var(--border);
}

.anchor-statement blockquote {
  margin: 0;
  max-width: 18ch;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 0.8rem + 4.6vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.98;
  text-wrap: balance;
}

.anchor-statement footer {
  margin: var(--s7) 0 0;
  padding: 0;
  border: 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* ---- Fewer boxes ------------------------------------------------------ */

.trajectory li,
.pipeline-grid li,
.roadmap-list li {
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background: none;
  padding: var(--s5) 0 0;
}

.trajectory { gap: var(--s7); }

.trajectory li { border-top: 2px solid var(--border-strong); }
.trajectory li:nth-child(1) { border-top-color: var(--done); }
.trajectory li:nth-child(2) { border-top-color: var(--accent); }
.trajectory li:nth-child(3) { border-top-color: var(--border-strong); }

.mini-flow li { border: 0; border-left: 1px solid var(--border); border-radius: 0; background: none; padding: 0 0 0 var(--s4); }
.mini-flow li + li::before { display: none; }
.mini-map { border-bottom: 0; padding-bottom: 0; }

.project-figure { padding: 0; border: 0; border-radius: 0; background: none; }
.project-figure figcaption { padding: 0; margin-top: var(--s4); }

.learned { background: none; border-left: 2px solid var(--accent); border-radius: 0; padding: var(--s2) 0 var(--s2) var(--s6); }
.learned p { font-size: 1.02rem; line-height: 1.6; }

/* ---- Earlier builds: visually subordinate ----------------------------- */

.previous-work { margin-top: var(--s10); }
.previous-work .project-title { font-size: 0.95rem; }
.previous-work .muted { font-size: 0.88rem; }

/* ---- Rhythm ----------------------------------------------------------- */

main section { margin-bottom: var(--s12); padding-top: var(--s12); }
.hero { margin-bottom: 0; }

@media (max-width: 640px) {
  main section { margin-bottom: var(--s10); padding-top: var(--s10); }
  .project-card { padding-top: var(--s10); }
  .anchor-statement { padding: var(--s10) 0; }
  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7) var(--s5); }
}

/* ==========================================================================
   25. SIGNAL — the instrument system
   --------------------------------------------------------------------------
   The recurring motifs that make the homepage feel like one continuous
   machine rather than a stack of sections: a signal-marker before every
   major node, a fixed rail that tracks position through the sequence on
   desktop, a full-bleed live waveform, and a graph-paper surface for the
   quantitative work.
   ========================================================================== */

/* ---- Signal marker: the node that opens every major section ----------- */

.signal-marker {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin: 0 0 var(--s5);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.signal-marker::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-wash);
}

.section-head .signal-marker { margin-bottom: var(--s4); }

/* ---- Fixed signal rail: desktop-only spine tracking scroll position ---- */

.signal-rail {
  position: fixed;
  left: var(--s6);
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.signal-rail li {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  padding: var(--s4) 0;
}

.signal-rail li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: var(--s4);
  background: var(--border);
  transform: translateX(-50%);
}

.signal-rail a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.signal-rail a::after {
  content: attr(data-label);
  position: absolute;
  left: var(--s6);
  top: 50%;
  transform: translateY(-50%);
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s var(--ease);
}

.signal-rail a:hover::after, .signal-rail a:focus-visible::after { opacity: 1; }
.signal-rail li.is-active a { background: var(--signal); transform: scale(1.5); }

@media (min-width: 1024px) {
  .signal-rail { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .signal-rail a { transition: none; }
}

/* ---- Entry: SIGNAL / 001 ------------------------------------------------ */

.entry-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  margin-bottom: var(--s9);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.entry-tag .signal-live {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.entry-tag .signal-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--signal);
  animation: signal-pulse 2.4s ease-in-out infinite;
}

@keyframes signal-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--signal-wash); }
  50% { opacity: 0.55; box-shadow: 0 0 0 5px var(--signal-wash); }
}

/* The headline, run at instrument scale. */
.entry-headline {
  margin: 0 0 var(--s8);
  max-width: none;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1rem + 7.4vw, 6.8rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.94;
  text-wrap: balance;
}

.entry-headline em { color: var(--signal); font-style: normal; }

.entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s6);
  margin: 0 0 var(--s9);
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.entry-tags li::before { content: "/"; margin-right: var(--s3); color: var(--border-strong); }
.entry-tags li:first-child::before { content: none; }

/* ---- Live signal: full-bleed canvas ------------------------------------ */

.live-signal {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: var(--s10);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunk);
}

.live-signal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  max-width: var(--page-wide);
  margin: 0 auto;
  padding: var(--s5) var(--s7) 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.live-signal canvas {
  display: block;
  width: 100%;
  height: clamp(220px, 32vw, 420px);
  cursor: crosshair;
}

.live-signal-foot {
  max-width: var(--page-wide);
  margin: 0 auto;
  padding: 0 var(--s7) var(--s6);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  line-height: 1.6;
}

/* ---- Protocol: bigger numerals, engineering-log rhythm ------------------ */

.stance-list { counter-reset: none; }
.stance-list b { font-size: 0.92rem; letter-spacing: 0.02em; }
.stance-list li { padding: var(--s6) 0; }

/* ---- Archive: deliberately quiet, historical artifacts ------------------ */

.archive-list { margin: var(--s6) 0 0; padding: 0; list-style: none; }
.archive-year { margin: var(--s8) 0 var(--s4); color: var(--text-muted); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; }
.archive-year:first-child { margin-top: 0; }

.archive-list li {
  display: grid;
  grid-template-columns: minmax(11rem, 0.9fr) minmax(0, 1.6fr);
  gap: var(--s5);
  margin: 0;
  padding: var(--s5) 0;
  border-top: 1px solid var(--border);
}

.archive-list h3 { margin: 0; font-size: 0.96rem; font-weight: 600; color: var(--heading-soft); }
.archive-list .archive-stack { display: block; margin-top: var(--s2); color: var(--text-muted); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; }
.archive-list p { margin: 0; max-width: none; font-size: 0.88rem; line-height: 1.6; color: var(--text-muted); }

/* ---- Status glyphs: built / in progress / planned ----------------------- */

.state-glyph { display: inline-flex; align-items: center; gap: var(--s2); }
.state-glyph::before { content: ""; width: 7px; height: 7px; border-radius: 999px; flex: 0 0 auto; }
.state-glyph[data-state="built"]::before { background: var(--done); }
.state-glyph[data-state="progress"]::before { background: var(--signal); }
.state-glyph[data-state="planned"] { color: var(--text-muted); }
.state-glyph[data-state="planned"]::before { background: transparent; border: 1px solid var(--border-strong); }

/* ---- Graph paper: the quantitative surface (VCP Screener) -------------- */

.graph-surface {
  position: relative;
  margin: var(--s8) 0 0;
  padding: var(--s7);
  border: 1px solid var(--border);
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 28px 28px;
  background-color: var(--bg-sunk);
}

.graph-result {
  margin-top: var(--s6);
  padding-top: var(--s6);
  border-top: 1px dashed var(--border-strong);
}

.graph-result .signal-marker { color: var(--text-muted); }

.graph-result strong {
  display: block;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* ---- Flagship question + representation chips --------------------------- */

.flagship-question {
  max-width: 22ch;
  margin: 0 0 var(--s8);
  color: var(--heading);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.05rem + 2vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.stage-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s6) 0 0; padding: 0; list-style: none; }

.stage-row li {
  margin: 0;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stage-row li:first-child { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 40%, var(--border)); }

/* ---- Failure graph: assumption -> failure -> correction ----------------- */

.failure-graph .tl-steps li::before { width: 9px; height: 9px; left: -5px; border: 2px solid var(--bg); background: var(--border-strong); }
.failure-graph .tl-steps li:last-child::before { background: var(--signal); }
.failure-graph .timeline > li:not(:first-child) { position: relative; }

/* ---- End of signal: the instrument powering down ------------------------ */

.end-signal {
  position: relative;
  padding-top: var(--s10);
  border-top: 1px solid var(--border);
  overflow: hidden;
}

.end-signal::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--signal), transparent 60%);
  opacity: 0.6;
}

.end-signal .signal-marker { color: var(--text-muted); }

.end-signal h2 {
  max-width: 18ch;
  margin-bottom: var(--s6);
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.signal-fade {
  margin-top: var(--s11);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 20%, var(--border-strong) 80%, transparent);
}

/* ---- Responsive: instrument system --------------------------------------- */

@media (max-width: 900px) {
  .live-signal canvas { height: 220px; }
  .archive-list li { grid-template-columns: 1fr; gap: var(--s2); }
}

@media (max-width: 640px) {
  .entry-tag { display: block; }
  .entry-tag .signal-live { margin-top: var(--s3); }
  .entry-tags { gap: var(--s2) var(--s5); font-size: 0.68rem; }
  .live-signal canvas { height: 170px; }
  .live-signal-head { display: block; }
  .graph-surface { padding: var(--s5); background-size: 20px 20px; }
}

/* ==========================================================================
   26. WORLDS — spatial environments
   --------------------------------------------------------------------------
   The site is not a stack of sections; it is a system you move through.
   Three environments share one grammar and change visual vocabulary:

     SIGNAL      audio, organic — waveform, chroma, tonal structure
     SYSTEM      engineering — nodes, pipelines, relationships
     EVALUATION  quantitative — measurement, comparison, ranking

   Each world is full-bleed so large screens are actually used, with the
   reading column staying narrow inside it.
   ========================================================================== */

.world {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunk);
}

.world-head {
  max-width: var(--page-wide);
  margin: 0 auto;
  padding: var(--s10) var(--s7) 0;
}

.world-head h2,
.world-head .world-title {
  max-width: 12ch;
  margin: 0 0 var(--s5);
  color: var(--heading);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.1rem + 4.4vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.94;
}

.world-question {
  max-width: 20ch;
  margin: 0 0 var(--s8);
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.95rem + 1.4vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.18;
}

.world-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: var(--s9);
  align-items: start;
  max-width: var(--page-wide);
  margin: 0 auto;
  padding: 0 var(--s7);
}

/* The instrument: sticky while the steps scroll past it. */
.world-visual {
  position: sticky;
  top: calc(var(--nav-h) + var(--s5));
  display: flex;
  flex-direction: column;
  height: min(68vh, 580px);
  padding-bottom: var(--s5);
}

.world-visual canvas {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  cursor: crosshair;
}

.world-hud {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.world-hud .hud-stage { color: var(--signal); }

.world-steps { margin: 0; padding: 12vh 0 18vh; list-style: none; }

.world-step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 46vh;
  margin: 0;
  padding: var(--s5) 0;
}

/* Inactive steps recede but stay readable: dimming body copy to a whisper
   makes the active state obvious and the rest of the content inaccessible.
   The colour shift on the label carries the state instead. */
@media (prefers-reduced-motion: no-preference) {
  .world-step { opacity: 0.72; transition: opacity 0.45s var(--ease); }
  .world-step.is-active { opacity: 1; }
}

.world-step .step-label {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin: 0 0 var(--s4);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.world-step.is-active .step-label { color: var(--signal); }

.world-step h3 {
  margin: 0 0 var(--s4);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.world-step p { margin: 0; max-width: 34rem; font-size: 0.95rem; line-height: 1.68; }

.world-foot {
  max-width: var(--page-wide);
  margin: 0 auto;
  padding: 0 var(--s7) var(--s10);
}

/* ---- Readouts: numbers as instrument panel measurements ---------------- */

.readouts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s9) var(--s11);
  margin: 0;
  padding: 0;
  list-style: none;
}

.readouts li { margin: 0; }

.readouts b {
  display: block;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 1.4rem + 5.4vw, 5.6rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.06em;
  line-height: 0.86;
}

.readouts span {
  display: block;
  margin-top: var(--s3);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.world-foot > .meta-label { margin: 0 0 var(--s6); color: var(--text-muted); }

.world-status {
  max-width: 40rem;
  margin: var(--s9) 0 0;
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.65;
}

/* ---- Compare: one result, two columns, the winner lit ------------------ */

.compare { max-width: 44rem; }

.compare-table {
  width: 100%;
  margin-top: var(--s5);
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.compare-table caption {
  caption-side: bottom;
  padding-top: var(--s4);
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.55;
  text-align: left;
}

.compare-table th,
.compare-table td {
  padding: var(--s4) var(--s3) var(--s4) 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: baseline;
}

.compare-table thead th {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.compare-table tbody th {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.compare-table td {
  color: var(--heading);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.95rem + 1.4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.compare-table .is-winner { color: var(--signal); }

/* Five-column variant: the value font steps down so four runs fit a phone. */
.compare-table-wide td { font-size: clamp(0.95rem, 0.7rem + 1.1vw, 1.5rem); }
.compare-table-wide th,
.compare-table-wide td { padding-right: var(--s2); }
.compare-table-wide tbody th { white-space: normal; letter-spacing: 0.04em; }

.compare-verdict {
  margin: var(--s6) 0 0;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.archive-list .project-links { margin-top: var(--s4); }

/* ---- The system: one question, changing material ----------------------- */

.system-transform {
  --system-progress: 0;
  --system-audio: 1;
  --system-representation: 0;
  --system-retrieval: 0;
  --system-evaluation: 0;
  --system-failure: 0;
  --system-resolution: 0;
  width: 100vw;
  min-height: 410vh;
  margin-left: calc(50% - 50vw);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.system-transform-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 42rem;
  overflow: hidden;
}

.system-transform-inner {
  position: relative;
  max-width: var(--page-wide);
  height: 100%;
  margin: 0 auto;
  padding: clamp(5.75rem, 10vh, 8.5rem) var(--s7) var(--s7);
}

.system-intro { position: relative; z-index: 2; max-width: 34rem; }
.system-intro h2 { max-width: 18ch; margin-bottom: 0; }

.film-composition {
  position: absolute;
  top: clamp(17rem, 37vh, 25rem);
  right: max(var(--s7), calc((100vw - var(--page-wide)) / 2 + var(--s7)));
  left: max(var(--s7), calc((100vw - var(--page-wide)) / 2 + var(--s7)));
  bottom: clamp(2.5rem, 8vh, 6rem);
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.film-composition::before,
.film-composition::after {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  width: 1px;
  content: "";
  background: var(--border);
}
.film-composition::before { left: 13%; }
.film-composition::after { right: 18%; }

.film-index,
.film-caption,
.film-question-count {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.film-index { position: absolute; z-index: 4; top: 1rem; left: 0; display: flex; gap: 0.5rem; }
.film-index span:last-child { color: var(--signal); }
.film-caption { position: absolute; z-index: 4; right: 0; bottom: 1rem; }

.film-words { position: absolute; inset: 0; }
.film-word {
  position: absolute;
  display: block;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 10.5vw, 10.5rem);
  font-weight: 600;
  line-height: 0.77;
  letter-spacing: -0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  will-change: transform, opacity, filter;
}

/* Each word occupies the same field, then slips out of register. */
.film-audio { top: 26%; left: 3%; opacity: var(--system-audio); transform: translate(calc(var(--system-progress) * -20vw), calc(var(--system-progress) * -3rem)) scale(calc(1 + var(--system-progress) * .2)); }
.film-representation { top: 8%; left: 12%; font-size: clamp(2.7rem, 8.1vw, 8.2rem); opacity: var(--system-representation); transform: translate(calc((var(--system-progress) - .21) * -38vw), calc((var(--system-progress) - .21) * 9rem)) skewX(calc((var(--system-progress) - .21) * -16deg)); }
.film-retrieval { top: 47%; right: -2%; font-size: clamp(2.8rem, 8.6vw, 8.5rem); opacity: var(--system-retrieval); transform: translate(calc((var(--system-progress) - .42) * 32vw), calc((var(--system-progress) - .42) * -7rem)); }
.film-evaluation { top: 18%; left: 22%; font-size: clamp(2.4rem, 7.1vw, 7.1rem); opacity: var(--system-evaluation); transform: translate(calc((var(--system-progress) - .62) * -25vw), calc((var(--system-progress) - .62) * -6rem)) scaleX(calc(1 + (var(--system-progress) - .62) * .8)); }
.film-failure { right: 5%; bottom: 16%; color: var(--text-secondary); font-size: clamp(3rem, 9.2vw, 9.2rem); opacity: var(--system-failure); transform: translate(calc((var(--system-progress) - .8) * 28vw), calc((var(--system-progress) - .8) * 3rem)) scaleY(calc(1 + (var(--system-progress) - .8) * -1.5)); }
.film-system { top: 18%; left: 29%; color: var(--signal); font-size: clamp(4rem, 11vw, 11rem); line-height: .7; opacity: var(--system-resolution); transform: translateY(calc((1 - var(--system-progress)) * 10rem)); }

.film-question { position: absolute; z-index: 5; right: 5%; bottom: 12%; width: min(22rem, 34%); }
.film-question p { position: absolute; right: 0; bottom: 0; width: 100%; margin: 0; color: var(--text-secondary); font-family: var(--font-mono); font-size: clamp(.72rem, 1.2vw, .9rem); line-height: 1.7; letter-spacing: .035em; }
.film-question-count { position: absolute; right: 0; bottom: calc(100% + 1rem); }
.film-question-audio { opacity: var(--system-audio); }
.film-question-representation { opacity: var(--system-representation); }
.film-question-retrieval { opacity: var(--system-retrieval); }
.film-question-evaluation { opacity: var(--system-evaluation); }
.film-question-failure { opacity: var(--system-failure); }
.film-question-system { opacity: var(--system-resolution); color: var(--heading) !important; }

@media (prefers-reduced-motion: reduce) {
  .system-transform { min-height: auto; }
  .system-transform-sticky { position: static; height: auto; min-height: 0; }
  .system-transform-inner { height: auto; padding-top: var(--s10); padding-bottom: var(--s10); }
  .film-composition { position: relative; top: auto; right: auto; bottom: auto; left: auto; height: 30rem; margin-top: var(--s8); }
  .film-word, .film-question p { transition: none; }
}

@media (max-width: 820px) {
  .system-transform { min-height: 340vh; }
  .system-transform-sticky { min-height: 37rem; }
  .system-transform-inner { padding-right: var(--s6); padding-left: var(--s6); }
  .film-composition { right: var(--s6); left: var(--s6); top: 19rem; }
  .film-composition::before { left: 7%; }
  .film-composition::after { right: 7%; }
  .film-word { font-size: clamp(2.9rem, 16vw, 5.5rem); }
  .film-representation, .film-retrieval, .film-evaluation { font-size: clamp(2.15rem, 12vw, 4.2rem); }
  .film-system { left: 16%; font-size: clamp(3.5rem, 18vw, 6rem); }
  .film-question { right: 1.2rem; bottom: 4rem; width: min(15.5rem, 72%); }
  .film-caption { display: none; }
}

/* ---- Failure network --------------------------------------------------- */

.fgraph-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--s8);
  align-items: start;
  margin-top: var(--s7);
}

.fgraph { display: block; width: 100%; height: auto; overflow: visible; }

.fedge { stroke: var(--border-strong); stroke-width: 1; opacity: 0.5; transition: stroke 0.25s var(--ease), opacity 0.25s var(--ease); }
.fedge.is-lit { stroke: var(--signal); opacity: 0.95; }

.fnode { cursor: pointer; }
.fnode:focus { outline: none; }

.fnode circle {
  fill: var(--surface);
  stroke: var(--border-strong);
  stroke-width: 1.3;
  transition: stroke 0.2s var(--ease), fill 0.2s var(--ease);
}

.fnode[data-status="open"] circle { stroke-dasharray: 3 3; }
.fnode text {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.fnode:hover circle, .fnode:focus-visible circle { stroke: var(--signal); fill: var(--signal-wash); }
.fnode:hover text, .fnode:focus-visible text { fill: var(--text); }
.fnode.is-active circle { stroke: var(--signal); fill: var(--signal); }
.fnode.is-active text { fill: var(--text); }
.fnode:focus-visible circle { stroke-width: 2.4; }

.fgraph-spine { fill: var(--text-muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }

.fdetail { padding-top: var(--s5); border-top: 1px solid var(--border-strong); }
.fdetail h3 { margin: 0 0 var(--s5); font-size: 1.15rem; letter-spacing: -0.025em; }

.fdetail dl { display: grid; gap: 0; margin: 0; }
.fdetail dt {
  margin: 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.fdetail dd { margin: var(--s2) 0 var(--s5); color: var(--text-secondary); font-size: 0.92rem; line-height: 1.62; }
.fdetail dd:last-child { margin-bottom: 0; }
.fdetail .status-open { color: var(--signal); }

/* Without JS every case stays readable: they simply stack. */
.fcase + .fcase { margin-top: var(--s8); }
.js-on .fcase[hidden] { display: none; }

/* ---- Representation switcher (Audio Explorer) -------------------------- */

.rep {
  margin-top: var(--s7);
  border-top: 1px solid var(--border);
  padding-top: var(--s5);
}

.rep-switch { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s5); padding: 0; list-style: none; }
.rep-switch li { margin: 0; }

.rep-switch button {
  min-height: 2.2rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.rep-switch button:hover { color: var(--text); border-color: var(--border-strong); }
.rep-switch button[aria-pressed="true"] {
  color: var(--signal);
  border-color: color-mix(in srgb, var(--signal) 50%, var(--border));
  background: var(--signal-wash);
}

.rep-stage { position: relative; }
.rep-stage canvas { display: block; width: 100%; height: clamp(210px, 30vw, 340px); cursor: crosshair; }

.rep-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  margin: 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  line-height: 1.6;
}

.rep-caption b { color: var(--text-secondary); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---- Evaluation room --------------------------------------------------- */

.eval-room { margin-top: var(--s8); }

.eval-bands { margin: var(--s7) 0 0; padding: 0; list-style: none; }

.eval-bands li {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--s5);
  align-items: center;
  margin: 0;
  padding: var(--s5) 0;
  border-top: 1px solid var(--border);
}

.eval-bands b {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eval-bands svg { display: block; width: 100%; height: 34px; overflow: visible; }
.eval-tick { stroke: var(--border-strong); stroke-width: 1.5; }
.eval-tick-signal { stroke: var(--signal); }
.eval-axis { stroke: var(--border); stroke-width: 1; }

/* ---- Recruiter fast path ----------------------------------------------- */

.fastpath {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fastpath a { color: var(--text-secondary); border-bottom: 1px solid var(--border-strong); padding-bottom: 1px; }
.fastpath a:hover, .fastpath a:focus-visible { color: var(--signal); border-bottom-color: var(--signal); }

/* ---- Worlds: responsive ------------------------------------------------ */

@media (max-width: 1024px) {
  .world-inner { display: block; padding: 0 var(--s7); }
  .world-visual {
    position: sticky;
    top: var(--nav-h);
    z-index: 5;
    height: 42vh;
    padding: var(--s4) 0;
    background: var(--bg-sunk);
    box-shadow: 0 12px 20px -18px rgba(0, 0, 0, 0.9);
  }
  .world-steps { padding: var(--s8) 0 var(--s10); }
  .world-step { min-height: 0; padding: var(--s8) 0; }
  .fgraph-layout { grid-template-columns: 1fr; gap: var(--s7); }
}

@media (max-width: 820px) {
  .constellation { display: none; }
  .cnode-list { display: grid; gap: 0; }
  .cnode-list li { margin: 0; }
  .cnode-list a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s5);
    padding: var(--s5) 0;
    border-top: 1px solid var(--border);
    color: var(--heading);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .cnode-list a span {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}

@media (max-width: 640px) {
  .world-head { padding: var(--s9) var(--s6) 0; }
  .world-inner, .world-foot, .constellation-inner { padding-left: var(--s6); padding-right: var(--s6); }
  .world-visual { height: 34vh; }
  .world-hud { font-size: 0.58rem; letter-spacing: 0.08em; }
  .readouts { gap: var(--s8); }
  .readouts li { flex: 1 1 40%; }
  .eval-bands li { grid-template-columns: 1fr; gap: var(--s3); }
  .rep-stage canvas { height: 200px; }
  .rep-caption { display: block; }
  .rep-caption b { display: block; margin-bottom: var(--s2); }
}

@media (prefers-reduced-motion: reduce) {
  .world-visual { position: static; height: 300px; }
  .world-step { min-height: 0; padding: var(--s7) 0; opacity: 1; }
  .world-steps { padding: var(--s7) 0; }
}

/* Full-bleed environments opt out of the default section rhythm: they carry
   their own rules, padding and ground. */
main section.world,
main section.constellation-wrap {
  margin-bottom: 0;
  padding-top: 0;
}

main section.world + section,
main section.constellation-wrap + section,
.live-signal + section { border-top: 0; }

.live-signal { margin-bottom: 0; }
main section.world { margin-top: 0; }

/* The signal-marker carries a trailing status glyph on world headers. */
.signal-marker .state-glyph {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
}

/* ==========================================================================
   27. Work pages — measure and composition
   --------------------------------------------------------------------------
   The detail pages reuse .hero, which was tuned as a homepage masthead: a
   20ch statement and a 34rem column. On a wide screen that reads as a thin
   ribbon of text with the right half of the page empty. Work pages get a
   real measure and a two-column opening instead.
   ========================================================================== */

:root { --page: 66rem; --measure: 37rem; }

.detail-hero .statement,
.article-header .statement {
  max-width: 34rem;
  font-size: clamp(1.12rem, 1rem + 0.6vw, 1.42rem);
  font-weight: 450;
  line-height: 1.4;
  letter-spacing: -0.018em;
  color: var(--text-secondary);
}

.detail-hero h1 {
  max-width: 20ch;
  font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.6rem);
  letter-spacing: -0.045em;
  line-height: 1.0;
}

.detail-hero p:not(.statement):not(.eyebrow) { max-width: 37rem; }

/* Two live edges instead of one ragged one, once there is room for them. */
@media (min-width: 1024px) {
  .detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    column-gap: var(--s10);
    align-items: start;
  }

  .detail-hero .eyebrow { grid-column: 1 / -1; }
  .detail-hero h1 { grid-column: 1; margin-bottom: 0; max-width: 16ch; }
  .detail-hero .statement { grid-column: 2; margin-top: 0.4rem; }
  .detail-hero .detail-meta { grid-column: 2; margin-top: var(--s6); }
}

/* Long-form and case-study body copy wants a slightly wider column than the
   homepage's editorial fragments. */
main section > p,
.summary-block p,
.now-block p { max-width: 37rem; }

article p, article ul, article ol, .article-figure figcaption { max-width: 40rem; }

/* ==========================================================================
   28. Touch targets
   --------------------------------------------------------------------------
   Text-scale links are fine with a mouse but tight under a thumb. On touch
   layouts the interactive rows grow to a comfortable target without changing
   how the type sits.
   ========================================================================== */

@media (max-width: 820px) {
  .site-nav a { padding: var(--s3) 0; }
  .rep-switch button { min-height: 2.75rem; padding: 0.6rem 0.9rem; }
  .project-links a { min-height: 2.75rem; padding: var(--s3) 0.8rem; }
  .actions-quiet a, .fastpath a { display: inline-block; padding: var(--s2) 0; }
  .cnode-list a { padding: var(--s6) 0; }
}

/* The name is the anchor: clearly legible, but not the hero statement. */
.entry-identity {
  margin: 0 0 var(--s2);
  max-width: none;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* The pipeline render inside an article figure. */
.article-figure video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-sunk);
}

/* A world on the page ground rather than the sunk ground, so consecutive
   environments alternate instead of merging into one long dark block. */
.world--flat { background: var(--bg); }
.world--flat .world-visual { background: var(--bg); }

/* Homepage steps are captions, not case study: they hand off to the project. */
.step-more { margin-top: var(--s5) !important; }
.step-more a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--signal);
  padding-bottom: 2px;
}

/* ==========================================================================
   29. Minimal homepage
   --------------------------------------------------------------------------
   The homepage is deliberately quiet: typography, rules and a few numbers.
   Canvases, step-by-step illustrations and the failure graph live on the
   project pages.
   ========================================================================== */

.flagship {
  padding: var(--s9) 0;
  border-top: 1px solid var(--border);
}

.section-head + .flagship { padding-top: var(--s4); border-top: 0; }
.flagship:last-child { padding-bottom: 0; }

article .flagship-kicker {
  display: flex;
  max-width: none;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--s3) var(--s6);
  margin: 0 0 var(--s6);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.flagship-title {
  margin: 0 0 var(--s4);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.2rem + 4.6vw, 4.4rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.flagship-title a { color: var(--heading); transition: color 0.2s var(--ease); }
.flagship-title a:hover, .flagship-title a:focus-visible { color: var(--signal); }

.flagship-question {
  max-width: 30ch;
  margin: 0 0 var(--s6);
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

article .flagship-summary {
  max-width: 38rem;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.7;
}

article .flagship-figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s7) var(--s10);
  max-width: none;
  margin: var(--s8) 0 0;
  padding: 0;
  list-style: none;
}

.flagship-figures li { margin: 0; }

.flagship-figures b {
  display: block;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.6rem);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.flagship-figures b small { font-size: 0.6em; letter-spacing: -0.02em; }

.flagship-figures b i {
  margin: 0 0.25em;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.42em;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.35em;
}

.flagship-figures span {
  display: block;
  margin-top: var(--s3);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.flagship .project-links { margin-top: var(--s8); }

/* ---- Also built: one row each, no cards ------------------------------- */

.also-list { margin: 0; padding: 0; list-style: none; }
.also-list > li { margin: 0; border-top: 1px solid var(--border); }
.also-list > li:last-child { border-bottom: 1px solid var(--border); }

.also-row {
  display: grid;
  grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 2fr);
  gap: var(--s2) var(--s7);
  align-items: baseline;
  padding: var(--s6) 0;
  color: inherit;
}

.also-row .also-title { grid-column: 1; grid-row: 1; }
.also-row .also-meta { grid-column: 1; grid-row: 2; }
.also-row .also-desc { grid-column: 2; grid-row: 1 / span 2; }

.also-title { color: var(--heading-soft); font-size: 1rem; font-weight: 600; transition: color 0.2s var(--ease); }
.also-desc { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; }

.also-meta {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

a.also-row:hover .also-title, a.also-row:focus-visible .also-title { color: var(--signal); }
a.also-row:hover, a.also-row:focus-visible { color: inherit; }

@media (max-width: 720px) {
  .also-row { grid-template-columns: 1fr; }
  .also-row .also-desc { grid-column: 1; grid-row: 2; }
  .also-row .also-meta { grid-row: 3; margin-top: var(--s2); }
  article .flagship-figures { gap: var(--s6) var(--s8); }
}

/* ==========================================================================
   30. Header socials + a single centred homepage column
   ========================================================================== */

/* Identity on the left, the ways to reach me on the right. The header is
   sticky, so these stay on screen the whole way down every page. */
.nav-social {
  display: flex;
  align-items: center;
  gap: var(--s1);
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.nav-social li { margin: 0; }

.nav-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: var(--text-muted);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.nav-social a:hover, .nav-social a:focus-visible { color: var(--text); background: var(--bg-sunk); outline: none; }
.nav-social svg { display: block; width: 1rem; height: 1rem; }
.nav-social + .theme-toggle { margin-left: var(--s2); }

@media (max-width: 560px) {
  .site-nav .nav-work { display: none; }
  .site-header { gap: var(--s3); }
  .nav-social { gap: 0; }
  .nav-social a { width: 1.75rem; height: 1.75rem; }
  .nav-social svg { width: 0.95rem; height: 0.95rem; }
  .nav-social + .theme-toggle { margin-left: 0; }
}

@media print { .nav-social { display: none; } }


@media (max-width: 560px) {
  body.home .hero-role { font-size: 0.6rem; letter-spacing: 0.08em; white-space: nowrap; }
}

/* ==========================================================================
   31. Full width
   --------------------------------------------------------------------------
   The site runs edge to edge with generous gutters. Width is filled with
   balanced columns, never one narrow column hugging the left edge.
   ========================================================================== */

/* 10% of the viewport on each side on desktop; a slim gutter on phones. */
:root { --gutter: 10vw; }

@media (max-width: 820px) {
  :root { --gutter: 1.25rem; }
}

.container { max-width: none; padding-left: var(--gutter); padding-right: var(--gutter); }

.world-head,
.world-inner,
.world-foot { max-width: none; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---- Homepage ------------------------------------------------------------ */

body.home main section { margin-bottom: var(--s11); padding-top: var(--s11); }
/* The editorial hero template: tag row across the top, name, role line, a
   two-line display headline, then the lede and buttons; the live-signal band
   follows directly underneath. */
body.home .hero { margin-bottom: 0; }
body.home .entry-headline { max-width: 9.5em; }

.live-signal-head,
.live-signal-foot { max-width: none; padding-left: var(--gutter); padding-right: var(--gutter); }

/* Flagships stack one below the other; each is a full-width row with the
   title on the left and the evidence on the right. */
.flagship-grid .flagship {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s6) var(--s11);
  align-items: start;
  padding: var(--s2) 0 0;
  border-top: 0;
}

.flagship-grid .flagship + .flagship { margin-top: var(--s10); padding-top: var(--s10); border-top: 1px solid var(--border); }
.flagship-head .flagship-question { margin-bottom: 0; }
.flagship-body { padding-top: calc(1rem + var(--s6)); }
.flagship-body .flagship-figures { margin-top: var(--s7); }
.flagship-body .project-links { margin-top: var(--s7); }

body.home .also-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--s9);
}

body.home .also-list > li,
body.home .also-list > li:last-child { border-top: 1px solid var(--border); border-bottom: 0; }

body.home .also-row {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s6) 0 0;
}

body.home .skill-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6) var(--s9); }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s6) var(--s11);
  align-items: end;
}

.contact-grid h2 { max-width: 17ch; margin: 0; font-size: clamp(1.9rem, 1.1rem + 2.3vw, 3.2rem); }
.contact-grid p { max-width: 34rem; margin-top: 0; }

@media (max-width: 900px) {
  .flagship-grid .flagship { grid-template-columns: 1fr; }
  .flagship-body { padding-top: 0; }
  body.home .also-list { grid-template-columns: 1fr; }
  body.home .also-row { padding-bottom: var(--s6); }
  body.home .also-list > li:last-child { border-bottom: 1px solid var(--border); }
  body.home .skill-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body.home .skill-cols { grid-template-columns: 1fr; }
}

/* ---- Inner pages: label on the left, content on the right --------------- */

@media (min-width: 1024px) {
  main > section:has(> .section-label:first-child) {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(0, 3fr);
    column-gap: var(--s11);
    align-items: start;
  }

  main > section:has(> .section-label:first-child) > * { grid-column: 2; }

  main > section:has(> .section-label:first-child) > .section-label {
    position: sticky;
    top: calc(var(--nav-h) + var(--s6));
    grid-column: 1;
    grid-row: 1;
    margin-top: 0.3rem;
  }

  main > section:has(> .section-label:first-child) > p { max-width: 44rem; }
}

/* Long-form posts keep a centred reading column inside the full-width site. */
main:has(> article) > .back-links,
main:has(> article) > .article-header,
main > article { max-width: 48rem; margin-left: auto; margin-right: auto; }

/* Case-study heroes: the links sit with the tags in the right-hand column. */
@media (min-width: 1024px) {
  .detail-hero .project-links { grid-column: 2; }
}

.world-head .world-title { max-width: 18ch; }
.world-head .world-question { max-width: 30ch; }

/* The sticky header's background runs edge to edge (its rule still aligns
   with the content), so full-bleed bands never show beside it on scroll. */
.site-header {
  box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--bg) 94%, transparent);
  clip-path: inset(0 -100vmax);
}

/* Header: a touch larger and darker, same width as the content. */
:root { --nav-h: 4.25rem; }

.site-nav { font-size: 0.86rem; }
.site-nav a { color: var(--text-secondary); }
.site-nav .nav-logo { color: var(--heading); font-size: 1.02rem; }
.nav-social a { width: 2.35rem; height: 2.35rem; color: var(--text-secondary); }
.nav-social svg { width: 1.2rem; height: 1.2rem; }
.theme-toggle { width: 2.2rem; height: 2.2rem; color: var(--text-secondary); font-size: 1.3rem; }

@media (max-width: 640px) {
  .site-nav { font-size: 0.8rem; }
}

@media (max-width: 560px) {
  :root { --nav-h: 3.75rem; }
  .site-nav .nav-logo { font-size: 0.95rem; }
  .nav-social a { width: 1.85rem; height: 1.85rem; }
  .nav-social svg { width: 1.05rem; height: 1.05rem; }
  .theme-toggle { width: 1.9rem; height: 1.9rem; font-size: 1.15rem; }
}

/* The name, a step larger on the homepage. */
body.home .hero p.entry-identity { font-size: clamp(1.3rem, 1.05rem + 0.7vw, 1.8rem); letter-spacing: -0.015em; }

.flagship-note {
  margin: var(--s7) 0 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  line-height: 1.7;
  text-transform: uppercase;
}