/* ─────────────────────────────────────────────────────────────
   Lego — design system case study
   Shares the case-study surface with Jeeves, Parkbeheer and KLu:
   same type stack, same chapter rhythm, same .case-* vocabulary.

   What changes is the palette, and here the palette is literally
   the subject. Two type systems run side by side on this page:

     · the NARRATIVE  — Instrument Serif / DM Sans / DM Mono,
       the voice of the case study, same as every other project.
     · the SPECIMEN   — Inter and Lego's own tokens, quarantined
       inside .spec surfaces.

   Everything inside a .spec is rendered from the --l-* token set,
   which is redefined once under [data-lego-theme="dark"]. That is
   the argument of chapter 06 made physical: one column added to a
   variable table, and the whole library turns over.
   ───────────────────────────────────────────────────────────── */

:root {
  /* case-study chrome */
  --paper: #f4f4f1;
  --paper-2: #ececea;
  --card: #ffffff;
  --ink: #14181d;
  --muted: #5d6873;
  --line: #dcdcd6;
  --line-soft: #e8e8e3;

  /* Lego's primary ramp, as it reads in the Figma variables panel.
     primary-6 is the base; every other step is derived from it. */
  --blue-1: #e6f4ff;
  --blue-2: #bae0ff;
  --blue-3: #91caff;
  --blue-4: #69b1ff;
  --blue-5: #4096ff;
  --blue-6: #1677ff;
  --blue-7: #0958d9;
  --blue-8: #003eb3;

  /* semantic set — indicators, never the message on their own */
  --green-6: #52c41a;
  --gold-6: #faad14;
  --red-6: #ff4d4f;

  --serif: "Instrument Serif", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --inter: "Inter", system-ui, -apple-system, sans-serif;

  /* Lego's own token set, light column. It lives on :root rather than on
     .spec so a lone specimen — the button at the end of the token chain in
     §03 — resolves too. Only .spec gets the dark column, which is why that
     chain stays light while the demo below it flips. */
  --l-bg: #ffffff;
  --l-bg-elevated: #ffffff;
  --l-bg-layout: #f5f5f5;
  --l-fill-quaternary: #f0f0f0;
  --l-text: rgba(0, 0, 0, 0.88);
  --l-text-secondary: rgba(0, 0, 0, 0.65);
  --l-text-tertiary: rgba(0, 0, 0, 0.45);
  --l-border: #d9d9d9;
  --l-border-secondary: #f0f0f0;
  --l-primary: var(--blue-6);
  --l-primary-hover: var(--blue-5);
  --l-primary-active: var(--blue-7);
  --l-primary-bg: var(--blue-1);
  --l-primary-border: var(--blue-3);
  --l-success: var(--green-6);
  --l-warning: var(--gold-6);
  --l-error: var(--red-6);
  --l-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12);
  --l-radius: 6px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 132px;
}
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
/* the global warm tint and grain belong to the darker project pages;
   this one is a documentation surface and wants a clean ground. */
body::before, body::after { display: none !important; }

h1, h2, h3, h4, p, figure, dl, dd, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; background: none; border: 0; }
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--blue-6);
  outline-offset: 3px;
  border-radius: 3px;
}

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

.wrap { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }

.case-skip {
  position: fixed; top: 12px; left: 20px; z-index: 11000;
  background: #fff; padding: 12px 20px; clip-path: inset(50%);
}
.case-skip:focus { clip-path: none; }

/* ══ shared type ═══════════════════════════════════════════ */
.case-label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.large-copy { font-size: 19px; line-height: 1.6; }

.chapter p + p { margin-top: 1.05em; }

.chapter b, .chapter strong { font-weight: 600; }

/* ══ hero ══════════════════════════════════════════════════ */
.case-hero { padding: 116px 0 0; }

.hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.hero-eyebrow span:first-child { color: var(--ink); }

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.95fr);
  gap: 56px;
  padding: 46px 0 54px;
}

.case-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(43px, 5.6vw, 78px);
  text-wrap: balance;
  line-height: 1.02;
  letter-spacing: -0.018em;
}
.case-hero h1 em { font-style: italic; color: var(--blue-7); }

.hero-intro {
  margin-top: 26px;
  font-size: 20px;
  line-height: 1.56;
  max-width: 33em;
  color: #2c343d;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 24px; }
.hero-actions a { display: inline-flex; align-items: center; gap: 22px; min-height: 44px; border-bottom: 1px solid var(--line); font: 12px var(--mono); }
.hero-actions a:first-child { color: var(--blue-7); border-color: var(--blue-7); }
.hero-actions a:hover { color: var(--blue-7); }
.system-scope { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); margin-bottom: 30px; }
.system-scope > div { display: flex; flex-direction: column-reverse; gap: 6px; padding: 22px 28px; border-left: 1px solid var(--line); }
.system-scope > div:first-child { border: 0; padding-left: 0; }
.system-scope dt { font: 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.system-scope dd { font: 400 44px/1 var(--serif); color: var(--blue-7); }
.case-note summary { cursor: pointer; min-height: 44px; padding-block: 10px; color: var(--ink); }
.case-note p { margin-top: 12px; }
.hero-library .zoom { display: block; width: fit-content; max-width: 100%; margin-inline: auto; }
.recording-toggle { display: block; min-height: 44px; margin-top: 14px; padding: 8px 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: 11px var(--mono); cursor: pointer; }
.recording-toggle:hover { border-color: var(--blue-7); color: var(--blue-7); }

.project-details { border-left: 1px solid var(--line); padding-left: 30px; }
.project-details > p {
  font-size: 15px;
  color: var(--muted);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.project-details dl { margin-top: 22px; display: grid; gap: 17px; }
.project-details dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-details dd { margin-top: 3px; font-size: 15.5px; line-height: 1.45; }

.case-note {
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--muted);
  max-width: 74ch;
  padding: 18px 0 60px;
  border-top: 1px solid var(--line);
  margin-top: 34px;
}

/* ══ chapter nav ═══════════════════════════════════════════ */
.chapter-nav {
  position: sticky;
  top: 68px;
  z-index: 90;
  background: rgba(244, 244, 241, 0.93);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  border-block: 1px solid var(--line);
}
.chapter-nav .wrap {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 13px 0;
}
.chapter-nav .wrap::-webkit-scrollbar { display: none; }
.chapter-nav a {
  flex: none;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.chapter-nav a:hover { color: var(--ink); }
.chapter-nav a.active { color: var(--blue-7); border-bottom-color: var(--blue-6); }

/* ══ chapters ══════════════════════════════════════════════ */
.chapter { padding: 96px 0; border-bottom: 1px solid var(--line); }
.chapter-heading { max-width: 30ch; margin-bottom: 46px; }
.chapter-heading h2 {
  margin-top: 14px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.1vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.014em;
  max-width: 20ch;
}
.chapter-heading h2 em { font-style: italic; color: var(--blue-7); }

.prose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 54px;
  align-items: start;
}
.prose-grid.single { grid-template-columns: minmax(0, 76ch); }

.prose-narrow { max-width: 72ch; }

/* aside note */
.side-note {
  border-left: 2px solid var(--blue-6);
  padding: 4px 0 4px 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.side-note strong { color: var(--ink); font-weight: 600; }
.side-note + .side-note { margin-top: 26px; }

/* pull quote */
.pull {
  margin: 52px 0;
  font-family: var(--serif);
  font-size: clamp(26px, 3.1vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 21ch;
}
.pull span { color: var(--blue-7); font-style: italic; }

/* ══ figures ═══════════════════════════════════════════════ */
/* Captures are screen recordings at 480px tall. Blown up to the full
   measure they go soft, and a soft screenshot of a design system is a
   bad advertisement for one — so they sit at native size on a ground
   instead, and only ever scale down. */
figure.shot {
  margin-top: 48px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 26px;
}
figure.shot img {
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}
figure.shot figcaption,
.fig-cap {
  margin-top: 13px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.62;
  letter-spacing: 0.03em;
  color: var(--muted);
  max-width: 78ch;
}
.fig-cap b { color: var(--ink); font-weight: 500; }

.shot-pair {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.shot-pair figure { margin: 0; }
.shot-pair img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

button.zoom {
  display: block;
  width: 100%;
  padding: 0;
  border-radius: 6px;
  cursor: zoom-in;
}

/* ══════════════════════════════════════════════════════════
   THE SPECIMEN SURFACE
   Everything Lego renders lives inside .spec. Its own tokens,
   its own typeface, its own dark mode — sealed off from the
   case study's chrome so the two never contaminate each other.
   ══════════════════════════════════════════════════════════ */
.spec {
  font-family: var(--inter);
  background: var(--l-bg-layout);
  color: var(--l-text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 32px;
  margin-top: 40px;
  transition: background 0.32s ease, color 0.32s ease, border-color 0.32s ease;
}

/* one column in the variable table. that is the whole of dark mode. */
[data-lego-theme="dark"] .spec {
  --l-bg: #141414;
  --l-bg-elevated: #1f1f1f;
  --l-bg-layout: #000000;
  --l-fill-quaternary: #2a2a2a;
  --l-text: rgba(255, 255, 255, 0.88);
  --l-text-secondary: rgba(255, 255, 255, 0.65);
  --l-text-tertiary: rgba(255, 255, 255, 0.45);
  --l-border: #424242;
  --l-border-secondary: #303030;
  --l-primary: #1668dc;
  --l-primary-hover: #3c89e8;
  --l-primary-active: #1554ad;
  --l-primary-bg: #111a2c;
  --l-primary-border: #15417e;
  --l-success: #49aa19;
  --l-warning: #d89614;
  --l-error: #dc4446;
  --l-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
  border-color: #2a2a2a;
}

.spec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--l-border-secondary);
}
.spec-head h3 {
  font-family: var(--inter);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--l-text);
}
.spec-head p {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--l-text-tertiary);
}

/* theme switch — the only control that matters on this page */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--l-border);
  border-radius: 100px;
  background: var(--l-bg);
  color: var(--l-text-secondary);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.theme-switch:hover { border-color: var(--l-primary); color: var(--l-primary); }
.theme-switch svg { width: 14px; height: 14px; }
.theme-switch .on { display: none; }
[data-lego-theme="dark"] .theme-switch .on { display: block; }
[data-lego-theme="dark"] .theme-switch .off { display: none; }

/* ── specimen primitives ─────────────────────────────────── */
.l-btn {
  font-family: var(--inter);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  height: 32px;
  padding: 0 15px;
  border-radius: var(--l-radius);
  border: 1px solid var(--l-border);
  background: var(--l-bg);
  color: var(--l-text);
  transition: all 0.18s ease;
  white-space: nowrap;
}
.l-btn:hover { color: var(--l-primary-hover); border-color: var(--l-primary-hover); }
.l-btn--primary {
  background: var(--l-primary);
  border-color: var(--l-primary);
  color: #fff;
  box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
}
.l-btn--primary:hover { background: var(--l-primary-hover); border-color: var(--l-primary-hover); color: #fff; }
.l-btn--dashed { border-style: dashed; }
.l-btn--text { border-color: transparent; background: transparent; }
.l-btn--text:hover { background: var(--l-fill-quaternary); border-color: transparent; color: var(--l-text); }
.l-btn--link { border-color: transparent; background: transparent; color: var(--l-primary); }
.l-btn--link:hover { color: var(--l-primary-hover); border-color: transparent; }
.l-btn--lg { height: 40px; font-size: 16px; padding: 0 19px; }
.l-btn--sm { height: 24px; font-size: 14px; padding: 0 7px; }
.l-btn[disabled] {
  cursor: not-allowed;
  color: var(--l-text-tertiary);
  background: var(--l-fill-quaternary);
  border-color: var(--l-border);
  box-shadow: none;
}
.l-btn--primary[disabled] { color: var(--l-text-tertiary); background: var(--l-fill-quaternary); }

.l-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* alert */
.l-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 14px;
  border-radius: var(--l-radius);
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid;
}
.l-alert svg { width: 15px; height: 15px; flex: none; margin-top: 3px; }
.l-alert--info { background: var(--l-primary-bg); border-color: var(--l-primary-border); }
.l-alert--info svg { color: var(--l-primary); }
.l-alert--success { background: color-mix(in srgb, var(--l-success) 12%, var(--l-bg)); border-color: color-mix(in srgb, var(--l-success) 42%, var(--l-bg)); }
.l-alert--success svg { color: var(--l-success); }
.l-alert--warning { background: color-mix(in srgb, var(--l-warning) 14%, var(--l-bg)); border-color: color-mix(in srgb, var(--l-warning) 45%, var(--l-bg)); }
.l-alert--warning svg { color: var(--l-warning); }
.l-alert--error { background: color-mix(in srgb, var(--l-error) 12%, var(--l-bg)); border-color: color-mix(in srgb, var(--l-error) 42%, var(--l-bg)); }
.l-alert--error svg { color: var(--l-error); }
.l-alert b { font-weight: 600; }
.l-alert p { color: var(--l-text-secondary); font-size: 13px; margin-top: 2px; }

/* form field */
.l-field { display: grid; gap: 6px; }
.l-field label { font-size: 14px; color: var(--l-text); }
.l-field label i { color: var(--l-error); font-style: normal; margin-right: 3px; }
.l-input {
  font-family: var(--inter);
  font-size: 14px;
  height: 32px;
  padding: 0 11px;
  width: 100%;
  color: var(--l-text);
  background: var(--l-bg);
  border: 1px solid var(--l-border);
  border-radius: var(--l-radius);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.l-input::placeholder { color: var(--l-text-tertiary); }
.l-input:focus {
  outline: 0;
  border-color: var(--l-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--l-primary) 22%, transparent);
}
.l-help { font-size: 12px; color: var(--l-text-tertiary); }

/* tag */
.l-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  line-height: 20px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid var(--l-primary-border);
  background: var(--l-primary-bg);
  color: var(--l-primary);
}
.l-tag--success { border-color: color-mix(in srgb, var(--l-success) 40%, var(--l-bg)); background: color-mix(in srgb, var(--l-success) 12%, var(--l-bg)); color: var(--l-success); }
.l-tag--warning { border-color: color-mix(in srgb, var(--l-warning) 42%, var(--l-bg)); background: color-mix(in srgb, var(--l-warning) 14%, var(--l-bg)); color: var(--l-warning); }
.l-tag--error { border-color: color-mix(in srgb, var(--l-error) 40%, var(--l-bg)); background: color-mix(in srgb, var(--l-error) 12%, var(--l-bg)); color: var(--l-error); }

/* card / table */
.l-card {
  background: var(--l-bg);
  border: 1px solid var(--l-border-secondary);
  border-radius: 8px;
  overflow: hidden;
}
.l-card-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--l-border-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.l-card-head h4 { font-size: 14px; font-weight: 600; }

.l-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.l-table th {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--l-text-secondary);
  background: var(--l-fill-quaternary);
  padding: 9px 14px;
  white-space: nowrap;
  border-bottom: 1px solid var(--l-border-secondary);
}
.l-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--l-border-secondary);
  color: var(--l-text);
  white-space: nowrap;
}
.l-table tr:last-child td { border-bottom: 0; }
.l-table .num { font-variant-numeric: tabular-nums; }

/* tabs */
.l-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--l-border-secondary); }
.l-tabs span {
  font-size: 14px;
  padding-bottom: 11px;
  color: var(--l-text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.l-tabs span.is-active { color: var(--l-primary); border-bottom-color: var(--l-primary); }

/* switch + checkbox */
.l-switch {
  width: 44px; height: 22px; border-radius: 100px;
  background: var(--l-primary); position: relative; flex: none;
}
.l-switch::after {
  content: ""; position: absolute; top: 2px; left: 24px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
}
.l-switch--off { background: rgba(0, 0, 0, 0.25); }
[data-lego-theme="dark"] .l-switch--off { background: rgba(255, 255, 255, 0.3); }
.l-switch--off::after { left: 2px; }

/* ══ 01 · the drift — five dialects of one button ══════════ */
.dialects {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.dialect {
  background: var(--card);
  padding: 26px 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  min-height: 156px;
}
.dialect > span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.dialect small {
  margin-top: auto;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  font-family: var(--mono);
}
/* five plausible, mutually inconsistent renderings of "Save" */
.d1 { font: 500 13px var(--inter); background: #1677ff; color: #fff; border: 0; border-radius: 2px; padding: 7px 16px; }
.d2 { font: 600 15px var(--inter); background: #0f9b8e; color: #fff; border: 0; border-radius: 22px; padding: 10px 22px; letter-spacing: 0.02em; }
.d3 { font: 400 14px Georgia, serif; background: #fff; color: #2f5aa8; border: 1px solid #2f5aa8; border-radius: 4px; padding: 8px 18px; }
.d4 { font: 700 11px var(--inter); background: #253046; color: #fff; border: 0; border-radius: 3px; padding: 11px 20px; text-transform: uppercase; letter-spacing: 0.1em; }
.d5 { font: 400 14px var(--inter); background: linear-gradient(#4d9bff, #1e6ee0); color: #fff; border: 1px solid #1a5fc4; border-radius: 6px; padding: 8px 17px; box-shadow: 0 1px 2px rgba(0,0,0,0.18); }

/* ══ 03 · token architecture ═══════════════════════════════ */
.tier {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.tier > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 26px 26px 28px;
  background: var(--card);
}
.tier h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue-7);
}
.tier h4 {
  margin-top: 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.16;
}
.tier p { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* the ramp */
.ramp { margin-top: 40px; }
.ramp-strip {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.ramp-strip div {
  aspect-ratio: 1 / 0.72;
  display: flex;
  align-items: flex-end;
  padding: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.ramp-strip div.dark-text { color: rgba(0, 0, 0, 0.55); }
.ramp-strip div.light-text { color: rgba(255, 255, 255, 0.92); }
.ramp-strip div.is-base { outline: 2px solid var(--ink); outline-offset: -2px; }

/* the chain: raw value → semantic alias → component property */
.chain {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: stretch;
  gap: 14px;
}
.chain-node {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  padding: 17px 18px;
  display: grid;
  gap: 7px;
  align-content: start;
}
.chain-node > span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.chain-node code {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  word-break: break-all;
}
.chain-node em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 7px;
}
.chain-node em i {
  width: 13px; height: 13px; border-radius: 3px; flex: none;
  border: 1px solid rgba(0, 0, 0, 0.14);
}
.chain-out {
  border: 1px dashed var(--blue-4);
  border-radius: 7px;
  background: var(--blue-1);
  padding: 17px 22px;
  display: grid;
  place-items: center;
  gap: 9px;
}
.chain-out span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-7);
}

/* ══ 04 · the type scale ═══════════════════════════════════ */
.scale { margin-top: 44px; border-top: 1px solid var(--line); }
.scale-row {
  display: grid;
  grid-template-columns: 78px 92px minmax(0, 1fr);
  gap: 22px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.scale-row > b,
.scale-row > i {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.scale-row > i { color: var(--blue-7); }
.scale-row > span {
  font-family: var(--inter);
  color: var(--ink);
  letter-spacing: -0.015em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scale-head {
  display: grid;
  grid-template-columns: 78px 92px minmax(0, 1fr);
  gap: 22px;
  padding-bottom: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ══ 05 · the inventory ════════════════════════════════════ */
.inventory {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 30px 26px;
}
.inv-family h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.inv-family h3 b { font-weight: 400; color: var(--muted); }
.inv-family ul { margin-top: 13px; list-style: none; display: grid; gap: 6px; }
.inv-family li {
  font-family: var(--inter);
  font-size: 13.5px;
  color: #3a434d;
  display: flex;
  align-items: center;
  gap: 8px;
}
.inv-family li::before {
  content: "";
  width: 5px; height: 5px; border-radius: 1px;
  background: var(--blue-3);
  flex: none;
}
.inv-family li.built::before { background: var(--blue-7); }

.inv-total {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 22px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.inv-total strong {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}

/* ══ 07 · contrast audit ═══════════════════════════════════ */
/* The audit has to keep its numbers legible before it keeps its width, so
   below the breakpoint it scrolls inside its own rail rather than crushing
   the verdict column off the edge. */
.table-scroll { margin-top: 40px; overflow-x: auto; }
.audit { width: 100%; border-collapse: collapse; }
.dark-demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 22px;
}
.audit caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding-bottom: 14px;
}
.audit th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 14px 10px 0;
  border-bottom: 1px solid var(--line);
}
.audit td {
  padding: 13px 14px 13px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  vertical-align: middle;
}
.audit .sw {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
}
.audit .sw i {
  width: 26px; height: 26px; border-radius: 4px; flex: none;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.audit .ratio { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; }
.audit .verdict {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  white-space: nowrap;
}
.audit .pass { background: #e7f6e7; color: #1c6b21; }
.audit .partial { background: #fdf3dc; color: #85610a; }
.audit .fail { background: #fdeaea; color: #a32020; }

/* ══ 08 · dependencies ═════════════════════════════════════ */
.deps {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 20px;
}
.dep {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px 22px 24px;
  background: var(--card);
  display: grid;
  gap: 10px;
  align-content: start;
}
.dep h3 { font-family: var(--inter); font-size: 15.5px; font-weight: 600; }
.dep span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue-7);
}
.dep p { font-size: 14px; line-height: 1.58; color: var(--muted); }

/* ══ 09 · the pipeline ═════════════════════════════════════ */
.pipeline {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 16px;
}
.pipe {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  background: var(--card);
  display: grid;
  gap: 9px;
  align-content: start;
  position: relative;
}
.pipe span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.pipe h3 { font-family: var(--inter); font-size: 15px; font-weight: 600; }
.pipe p { font-size: 13.5px; line-height: 1.55; color: var(--muted); }

/* ══ ledger (shared with the other case studies) ═══════════ */
.ledger {
  margin-top: 62px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.ledger article {
  background: var(--card);
  padding: 30px 28px 32px;
  display: grid;
  gap: 13px;
  align-content: start;
}
.ledger span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue-7);
}
.ledger h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.2;
}
.ledger p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* ══ outcome quote ═════════════════════════════════════════ */
.quote-aside {
  border-left: 2px solid var(--blue-6);
  padding-left: 22px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.3;
}
.quote-aside br + * { font-size: 14px; }

/* ══ footer ════════════════════════════════════════════════ */
.case-end { padding: 96px 0 110px; background: var(--paper-2); }
.case-end h2 {
  margin-top: 16px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.014em;
}
.case-end h2 em { font-style: italic; color: var(--blue-7); }
.end-links {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.end-links a { color: var(--muted); transition: color 0.2s; }
.end-links a:hover { color: var(--blue-7); }

/* ══ image dialog ══════════════════════════════════════════ */
.image-dialog {
  width: min(96vw, 1500px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #101418;
  color: #fff;
  overflow: hidden;
}
.image-dialog::backdrop { background: rgba(8, 10, 13, 0.86); }
.image-dialog-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.image-dialog-bar h2 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; }
.image-dialog-bar button { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.66); }
.image-dialog-bar button:hover { color: #fff; }
.image-dialog-scroll { overflow: auto; max-height: calc(92vh - 100px); }
.image-dialog-scroll img { width: 100%; }
.image-dialog > p {
  padding: 11px 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ══ reveal ════════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ══ responsive ════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .hero-layout { grid-template-columns: 1fr; gap: 42px; }
  .project-details { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 26px; }
  .project-details dl { grid-template-columns: 1fr 1fr; gap: 20px 28px; }
  .prose-grid { grid-template-columns: 1fr; gap: 34px; }
  .tier { grid-template-columns: 1fr; }
  .chain { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .wrap { width: calc(100% - 44px); }
  .case-hero { padding-top: 92px; }
  .chapter { padding: 68px 0; }
  .spec { padding: 22px 18px; }
  .shot-pair { grid-template-columns: 1fr; }
  .ramp-strip { grid-template-columns: repeat(4, 1fr); }
  .scale-row, .scale-head { grid-template-columns: 62px 76px minmax(0, 1fr); gap: 14px; }
  .audit .hide-sm { display: none; }
  .audit { min-width: 430px; }
  /* the reviewer form and the queue stop being neighbours and become a stack */
  .dark-demo-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .hero-layout { gap: 28px; padding-block: 30px; }
  .hero-intro { font-size: 17px; margin-top: 20px; }
  .project-details > p { display: none; }
  .project-details dl { margin-top: 0; }
  .project-details dd { font-size: 13px; }
  .project-details dt { font-size: 9px; }
  .system-scope > div { padding: 18px 14px; }
  .system-scope dt { font-size: 8px; }
  .system-scope dd { font-size: 36px; }
  .dialects { grid-template-columns: 1fr 1fr; }
  .inv-total strong { font-size: 34px; }
}
@media (max-width: 820px) {
  .chapter-nav { top: 60px; }
}