/* Fettler. Tokens, then structure, then artefacts, then breakpoints. */

:root {
  /* B1 palette */
  --paper: #EEF0EA;
  --sheet: #FAFBF7;
  --ink: #1D2420;
  --ink-2: #4E5A52;
  --rule: #C9CFC4;
  --oxide: #9A3B22;
  --oxide-deep: #7B2F1B;
  --moss: #2F5D3A;
  --ochre: #7E6011;

  /* B2 families */
  --sans: Archivo, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* B2 scale, desktop */
  --fs-display: 68px;
  --fs-h2: 38px;
  --fs-h3: 21px;
  --fs-lead: 21px;
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-marker: 13px;
  --fs-mono: 13px;
  --fs-mono-h: 12px;

  /* B3 spacing */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;
  --s6: 104px;
  --s7: 160px;
  --gutter: 32px;
  --marker-col: 200px;
  --marker-gap: 48px;
  --radius: 2px;

  /* B4 motion. One easing system for the whole site, and one scroll offset so a
     linked section always stops clear of the sticky bar. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t: 120ms;
  --scroll-offset: 72px;
}

/* Twelve line reset */
*, *::before, *::after { box-sizing: border-box; }
/* One offset only. scroll-padding on the scroller and scroll-margin on the
   target add up, which parked every anchor two header heights down the page. */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth; scroll-padding-top: var(--scroll-offset); }
body { margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.62;
  font-variation-settings: "wdth" 100, "wght" 400; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; }
svg { width: 100%; height: auto; display: block; max-width: 100%; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* Focus and skip link */
:focus-visible { outline: 2px solid var(--oxide); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--paper); color: var(--ink); padding: 12px 16px;
  border: 1px solid var(--rule); border-radius: var(--radius); }
.skip:focus { left: var(--gutter); top: var(--s1); }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sprite { display: none; }

/* Type roles */
.display { font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.022em;
  font-variation-settings: "wdth" 118, "wght" 620; }
h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.015em;
  font-variation-settings: "wdth" 108, "wght" 600; }
h3 { font-size: var(--fs-h3); line-height: 1.28; letter-spacing: -0.005em;
  font-variation-settings: "wdth" 100, "wght" 600; }
.lead { font-size: var(--fs-lead); line-height: 1.52; max-width: 56ch;
  font-variation-settings: "wdth" 100, "wght" 400; }
.body { font-size: var(--fs-body); line-height: 1.62; max-width: 64ch; }
.small { font-size: var(--fs-small); line-height: 1.45; letter-spacing: 0.005em;
  font-variation-settings: "wdth" 92, "wght" 500; }
.muted { color: var(--ink-2); }
.marker { font-size: var(--fs-marker); line-height: 1.3; letter-spacing: 0.02em;
  color: var(--ink-2); font-variation-settings: "wdth" 88, "wght" 600; }

.link { text-decoration: underline; text-decoration-color: var(--oxide);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: text-decoration-thickness var(--t) var(--ease-out); }

.btn { display: inline-block; background: var(--oxide); color: var(--sheet);
  padding: 11px 20px; border-radius: var(--radius); text-decoration: none;
  font-size: var(--fs-small); letter-spacing: 0.005em;
  font-variation-settings: "wdth" 96, "wght" 600;
  transition: background var(--t) var(--ease-out); }
.btn:active { background: var(--ink); }

/* Layout shell */
.page { width: 100%; max-width: calc(1160px + (var(--gutter) * 2)); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter); }
.wordmark-frame { width: 129px; height: 34px; display: block; flex: none; }
@media (max-width: 859px) { .wordmark-frame { width: 113px; height: 30px; } }

/* Header */
.bar { position: sticky; top: 0; z-index: 10; background: var(--paper);
  border-bottom: 1px solid transparent; }
.bar.is-scrolled { border-bottom-color: var(--rule); }
.bar-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.nav { display: flex; align-items: center; gap: var(--s3); }
.nav-list { display: flex; align-items: center; gap: var(--s3); }
.nav-list a { font-size: var(--fs-small); text-decoration: none; color: var(--ink);
  font-variation-settings: "wdth" 96, "wght" 500;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color var(--t) var(--ease-out); }
.menu-btn { display: none; background: none; border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 7px 12px; font-size: var(--fs-small);
  font-variation-settings: "wdth" 96, "wght" 500; cursor: pointer;
  transition: background var(--t) var(--ease-out); }

/* Hero */
.hero { padding-top: var(--s6); padding-bottom: 120px; }
.hero-grid { display: grid; grid-template-columns: 5fr 6fr; gap: var(--s5); align-items: center; }
.hero-grid > * { min-width: 0; }
.spec > * { min-width: 0; }
.hero-copy .lead { margin-top: var(--s3); }
.credential { border-top: 1px solid var(--rule); padding-top: var(--s3);
  margin-top: var(--s4); max-width: 64ch; }
.actions { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3); }

/* Sections and the margin rule */
.sections { position: relative; }
.sections::before { content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--gutter) + var(--marker-col) + var(--marker-gap) / 2);
  width: 1px; background: var(--rule); }
.section { padding-top: var(--s6); padding-bottom: var(--s6); }
.spec { display: grid; grid-template-columns: var(--marker-col) minmax(0, 1fr); gap: var(--marker-gap); }
.col { min-width: 0; }
.col .lead { margin-top: var(--s3); }
.closing { border-top: 1px solid var(--rule); padding-top: var(--s3); margin-top: var(--s4); }
.closing-text { color: var(--ink-2); font-size: var(--fs-body); line-height: 1.62; max-width: 64ch; }

/* D2 ruled list */
.ruled-list { margin-top: var(--s4); }
.ruled-list li { border-top: 1px solid var(--rule); padding: var(--s3) 0; }
.ruled-list li:last-child { border-bottom: 1px solid var(--rule); }
.ruled-title { font-size: var(--fs-h3); line-height: 1.28; letter-spacing: -0.005em;
  font-variation-settings: "wdth" 100, "wght" 600; max-width: 64ch; }
.ruled-list .body { margin-top: var(--s1); color: var(--ink-2); }

/* D2 comparison strip. No fill and no vertical rules: the axis label carries the
   column and the single hairline inside each cell carries the comparison. */
.strip-h { margin-top: var(--s5); max-width: 26ch; }
/* Five shared rows, so the axis labels, both openings and the hairline between
   them sit on the same lines across all four cells. Without subgrid each cell
   simply sizes its own rows, which is the same layout, less well aligned. */
.compare { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto); column-gap: var(--s3); row-gap: 0;
  margin-top: var(--s3); }
.compare > li { min-width: 0; display: grid; grid-row: span 5;
  grid-template-rows: subgrid; row-gap: 0;
  border-top: 1px solid var(--rule); padding-top: var(--s2); }
.cmp { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
.cmp-axis { margin-bottom: var(--s2); }
.cmp-lab { font-size: var(--fs-marker); line-height: 1.45; letter-spacing: 0.005em;
  font-variation-settings: "wdth" 92, "wght" 500; color: var(--ink-2); }
.cmp dd { margin: 4px 0 0; font-size: var(--fs-body); line-height: 1.62; color: var(--ink-2); }
.cmp-lab-us { margin-top: var(--s2); padding-top: var(--s2);
  border-top: 1px solid var(--rule); color: var(--ink);
  font-variation-settings: "wdth" 92, "wght" 600; }
.cmp-us { color: var(--ink); }

/* D3 delivery specification, artefact 5 */
.deliver { margin-top: var(--s4); }
.deliver-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 0.72fr);
  gap: var(--s4); border-top: 1px solid var(--rule); padding: var(--s3) 0; align-items: start; }
.deliver-row:last-child { border-bottom: 1px solid var(--rule); }
.deliver dt { font-size: var(--fs-h3); line-height: 1.28; letter-spacing: -0.005em;
  font-variation-settings: "wdth" 100, "wght" 600; }
.deliver-body { font-size: var(--fs-body); line-height: 1.62; }
.deliver-eg { font-family: var(--mono); font-size: var(--fs-mono); line-height: 1.5; color: var(--ink-2); }

/* D4 anatomy. The section paints over the margin rule, which would otherwise
   cross the full width copy; the rule resumes above and below it. */
.wide { position: relative; background: var(--paper); }
.wide .marker-above { margin-bottom: var(--s2); }
.wide h2 { max-width: 20ch; }
.wide .lead { margin-top: var(--s3); }
.diagram { position: relative; margin-top: var(--s5); }
.anatomy { display: block; width: 100%; height: auto; }
.anatomy-v { display: none; }
.sv-num { font-family: var(--mono); font-size: 12px; font-weight: 600; fill: var(--ink-2); }
.sv-name { font-family: var(--sans); font-size: 17px; font-weight: 600; fill: var(--ink); }
.sv-sub { font-family: var(--mono); font-size: 12px; fill: var(--ink-2); }
.negations { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4);
  margin-top: var(--s5); border-top: 1px solid var(--rule); padding-top: var(--s3); }
.negations > div + div { border-left: 1px solid var(--rule); padding-left: var(--s4); }
.negations .body { margin-top: var(--s1); color: var(--ink-2); }

/* D5 already running. Each tile is a machine's identity card: a mono header row
   naming the department, the work in prose, and the shape of the run in mono at
   the foot, which is why these carry the artefact panel treatment. */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto); column-gap: var(--s3); row-gap: 0;
  margin-top: var(--s4); }
/* Four shared rows again, so the department rule, the title, the prose and the
   rule above the shape block line up straight across every tile in a row. */
.tile { min-width: 0; display: grid; grid-row: span 4; grid-template-rows: subgrid;
  row-gap: 0; margin-bottom: var(--s3); background: var(--sheet);
  border: 1px solid var(--rule); border-radius: var(--radius); }
.tile-dept { font-family: var(--mono); font-size: var(--fs-mono-h); font-weight: 600;
  letter-spacing: 0.01em; line-height: 1.4; color: var(--ink-2); padding: 9px var(--s2);
  border-bottom: 1px solid var(--rule); font-variation-settings: normal; }
.tile-h { padding: var(--s2) var(--s2) 0; }
.tile-body { padding: var(--s1) var(--s2) var(--s3); font-size: var(--fs-body);
  line-height: 1.62; color: var(--ink-2); }
.tile-shape { padding: 10px var(--s2); border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--fs-mono); line-height: 1.5; color: var(--ink-2); }
.tile-shape > div + div { margin-top: 2px; }
.tile-shape dt, .tile-shape dd { display: inline; margin: 0; }
.tile-shape dt::after { content: ":\00a0"; }
.tile-shape dd { color: var(--ink); }

/* D6 guardrails */
.guardrails { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--marker-gap); row-gap: var(--s4); margin-top: var(--s5); }
.guardrails > div { border-top: 1px solid var(--rule); padding-top: var(--s2); }
.guardrails dt { font-size: var(--fs-h3); line-height: 1.28; letter-spacing: -0.005em;
  font-variation-settings: "wdth" 100, "wght" 600; }
.guardrails dd { margin: var(--s1) 0 0; font-size: var(--fs-body); line-height: 1.62; color: var(--ink-2); }

/* D7 commercial lines */
.commercial { margin-top: var(--s5); }
.commercial li { border-top: 1px solid var(--rule); padding: var(--s3) 0;
  font-size: var(--fs-body); line-height: 1.62; max-width: 64ch; }
.commercial li:last-child { border-bottom: 1px solid var(--rule); }

/* D8 fit */
.recognition { margin-top: var(--s4); display: grid; row-gap: var(--s2); }
.recognition li { position: relative; padding-left: var(--s2); font-size: var(--fs-body);
  line-height: 1.62; max-width: 64ch; }
.recognition li::before { content: ""; position: absolute; left: 0; top: 11px;
  width: 4px; height: 4px; background: var(--oxide); }
.industries { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: var(--s4); border-top: 1px solid var(--rule); padding-top: var(--s3); }
.industries li { font-size: var(--fs-h3); line-height: 1.28; letter-spacing: -0.005em;
  font-variation-settings: "wdth" 100, "wght" 600; padding: 0 var(--s2); }
.industries li:first-child { padding-left: 0; }
.industries li:last-child { padding-right: 0; }
.industries li + li { border-left: 1px solid var(--rule); }
.worked-h { margin-top: var(--s5); }
.worked-h + .body { margin-top: var(--s1); color: var(--ink-2); }
.workflows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--marker-gap); row-gap: var(--s1); margin-top: var(--s3); }
.workflows li { position: relative; padding-left: var(--s2); font-size: var(--fs-body); line-height: 1.62; }
.workflows li::before { content: ""; position: absolute; left: 0; top: 11px;
  width: 4px; height: 4px; background: var(--rule); }
.workflows + .small { margin-top: var(--s3); max-width: 64ch; }

/* D9 rules */
.rules-list { display: grid; row-gap: var(--s4); margin-top: var(--s4); }
.rules-list li { border-top: 1px solid var(--rule); padding-top: var(--s2); }
.rules-list .body { margin-top: var(--s1); color: var(--ink-2); }

/* D10 the band */
.band { position: relative; width: 100%; background: var(--sheet);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.band-inner { width: 100%; max-width: calc(1160px + (var(--gutter) * 2)); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter); }
.band-copy { max-width: 720px; }
.band-copy .body { margin-top: var(--s3); }
.band-copy .actions { margin-top: var(--s4); }
.band-copy .muted { margin-top: var(--s3); }

/* D11 faq */
.faq { margin-top: var(--s4); }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); padding: 20px 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq .q { font-size: var(--fs-h3); line-height: 1.28; letter-spacing: -0.005em;
  font-variation-settings: "wdth" 100, "wght" 600; }
.plus { position: relative; flex: none; width: 12px; height: 12px; align-self: center;
  transition: transform var(--t) var(--ease-in-out); }
.plus::before, .plus::after { content: ""; position: absolute; background: var(--ink-2); }
.plus::before { left: 0; right: 0; top: 5.5px; height: 1px; }
.plus::after { top: 0; bottom: 0; left: 5.5px; width: 1px; }
.faq details[open] .plus { transform: rotate(45deg); }
.faq details .body { margin-top: var(--s2); padding-bottom: var(--s1); color: var(--ink-2); }

/* Artefact panels */
.panel-scroll { overflow-x: auto; min-width: 0; max-width: 100%; margin-top: var(--s4); }
.artefact { width: 100%; background: var(--sheet); border: 1px solid var(--rule);
  border-radius: var(--radius); border-collapse: separate; border-spacing: 0;
  text-align: left; }
.artefact thead th { font-family: var(--mono); font-size: var(--fs-mono-h); font-weight: 600;
  letter-spacing: 0.01em; line-height: 1.4; color: var(--ink-2);
  padding: 9px 12px; border-bottom: 1px solid var(--rule); font-variation-settings: normal; }
.artefact td { font-family: var(--mono); font-size: var(--fs-mono); line-height: 1.5;
  color: var(--ink); padding: 8px 12px; border-bottom: 1px solid var(--rule);
  vertical-align: top; }
.artefact tbody tr:last-child td, .artefact tbody tr:last-child th { border-bottom: 0; }
.demo-caption { caption-side: bottom; text-align: left; padding-top: var(--s1);
  font-family: var(--sans); font-size: var(--fs-small); line-height: 1.45;
  letter-spacing: 0.005em; color: var(--ink-2); font-variation-settings: "wdth" 92, "wght" 500; }
.c-time { width: 56px; white-space: nowrap; color: var(--ink-2); }
.c-state { width: 96px; white-space: nowrap; text-align: right; }
.artefact th.c-state { text-align: right; }
.dot { display: inline-block; width: 6px; height: 6px; margin-right: 7px; vertical-align: 1px; }
.dot-moss { background: var(--moss); }
.dot-ochre { background: var(--ochre); }
.dot-oxide { background: var(--oxide); }
.runstrip { table-layout: fixed; }
.runstrip .c-time { width: 56px; }
.runstrip thead th:nth-child(2), .runstrip tbody td:nth-child(2) { width: 104px; }
.runstrip .c-state { width: 116px; white-space: normal; }
.runstrip td { height: 34px; }
.queue-foot { border-top: 1px solid var(--rule); border-bottom: 0; color: var(--oxide); }

/* Artefact 4, the phase ledger */
.ledger td, .ledger th[scope="row"] { border-bottom: 1px solid var(--rule); vertical-align: top; padding: var(--s2) 12px; }
.ledger .c-no { width: 48px; border-left: 2px solid var(--rule); color: var(--ink-2); }
.ledger .c-phase { width: 150px; font-family: var(--sans); font-size: var(--fs-h3);
  line-height: 1.28; letter-spacing: -0.005em; font-variation-settings: "wdth" 100, "wght" 600;
  text-align: left; }
.ledger thead th.c-phase { font-family: var(--mono); font-size: var(--fs-mono-h);
  font-weight: 600; letter-spacing: 0.01em; font-variation-settings: normal; }
.ledger .c-when { width: 96px; color: var(--ink-2); }
.ledger tbody td:not(.c-no):not(.c-when) { font-family: var(--sans); font-size: var(--fs-body); line-height: 1.62; }
/* v1.4: the homepage ledger carries the weeks in the phase name and has no When
   column, so its phase cell takes the width that column used to hold. The dated
   variant on /how-it-works is untouched. */
.ledger-nw .c-phase { width: 215px; }
.ledger .c-end { color: var(--ink-2); }
.ledger thead th { border-left: 0; }
.ledger thead th:first-child { border-left: 2px solid transparent; }

/* Footer */
.footer { border-top: 1px solid var(--rule); padding-top: var(--s5); padding-bottom: var(--s5); }
.footer-grid { display: grid; grid-template-columns: 4fr 3fr 3fr; gap: var(--marker-gap); }
.footer-grid .body { margin-top: var(--s2); max-width: 40ch; }
.footer-grid .small { margin-top: var(--s2); max-width: 40ch; }
.footer-h { font-size: var(--fs-small); line-height: 1.45; letter-spacing: 0.005em;
  color: var(--ink-2); font-variation-settings: "wdth" 92, "wght" 600; }
.footer-links { margin-top: var(--s2); display: grid; row-gap: var(--s1); }
.footer-links + .footer-h { margin-top: var(--s4); }
.footer-links a { font-size: var(--fs-body); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color var(--t) var(--ease-out); }
.colophon { border-top: 1px solid var(--rule); margin-top: var(--s5); padding-top: var(--s3); }

/* Privacy page */
.doc { max-width: 720px; }
.doc h1 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.015em;
  font-variation-settings: "wdth" 108, "wght" 600; }
.doc .body { margin-top: var(--s3); }
.doc .back { margin-top: var(--s4); }

/* The travelling square, B4 */
.tracer { fill: var(--oxide); }

/* Breakpoints */
@media (max-width: 1080px) {
  .nav, .nav-list { gap: 16px; }
  .nav-list a { white-space: nowrap; }
  .deliver-row { grid-template-columns: 170px minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare > li:nth-child(n + 3) { margin-top: var(--s4); }
  .deliver-eg { grid-column: 2; border-left: 2px solid var(--rule); padding-left: var(--s2); }
}

@media (max-width: 859px) {
  :root {
    --fs-display: 38px; --fs-h2: 27px; --fs-h3: 19px; --fs-lead: 18px;
    --fs-body: 16px; --fs-small: 13px; --fs-marker: 12px;
    --fs-mono: 12px; --fs-mono-h: 11px;
    --gutter: 20px; --marker-gap: 24px;
  }
  .nav { gap: var(--s1); }

  .hero { padding-top: var(--s5); padding-bottom: var(--s5); }
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-art { margin-top: var(--s4); }
  .section { padding-top: var(--s5); padding-bottom: var(--s5); }
  .spec { grid-template-columns: 1fr; gap: 0; }
  .spec .marker { margin-bottom: var(--s2); }
  .sections::before { display: none; }

  .deliver-row { grid-template-columns: 1fr; gap: var(--s1); }
  .deliver-eg { grid-column: 1; margin-left: var(--s2); }
  .negations { grid-template-columns: 1fr; gap: 0; }
  .negations > div { border-top: 1px solid var(--rule); padding-top: var(--s3); margin-top: var(--s3); }
  .negations > div:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
  .negations > div + div { border-left: 0; padding-left: 0; }
  .guardrails, .workflows { grid-template-columns: 1fr; }
  .industries { grid-template-columns: 1fr; }
  .industries li, .industries li:first-child, .industries li:last-child { padding: var(--s2) 0; border-left: 0; }
  .industries li + li { border-top: 1px solid var(--rule); border-left: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s4); }

  /* Artefact tables keep a legible minimum and scroll inside their wrapper */
  .runstrip { table-layout: auto; min-width: 520px; }
  .queue { min-width: 430px; }

  /* Ledger becomes stacked blocks */
  .ledger, .ledger tbody, .ledger tr { display: block; width: 100%; }
  .ledger thead { display: none; }
  .ledger tr { border-left: 2px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--s3) 12px; }
  .ledger tbody tr:last-child { border-bottom: 0; }
  .ledger td, .ledger th[scope="row"] { display: block; border: 0; padding: 0; }
  .ledger .c-no { width: auto; display: inline-block; border-left: 0; margin-right: var(--s1); }
  .ledger tbody th.c-phase { width: auto; display: inline-block; vertical-align: baseline; }
  .ledger .c-when { width: auto; margin-top: 2px; }
  .ledger tbody td[data-label] { margin-top: var(--s2); }
  .ledger tbody td[data-label]::before { content: attr(data-label); display: block;
    font-family: var(--mono); font-size: var(--fs-mono-h); font-weight: 600;
    letter-spacing: 0.01em; color: var(--ink-2); margin-bottom: 2px; }
}

@media (max-width: 719px) {
  .anatomy-h { display: none; }
  .anatomy-v { display: block; max-width: 340px; }
  .tiles, .compare { grid-template-columns: minmax(0, 1fr); }
  .compare > li:nth-child(n + 2) { margin-top: var(--s3); }
}

@media (prefers-contrast: more) {
  :root { --rule: #4E5A52; }
}


/* ---------------------------------------------------------------------------
   B4 motion. Reveal on enter, table rows row by row, a reading progress rule,
   and a header that gets out of the way on a small screen. No parallax, no
   counters. Hero playback has its own clock. Everything below is gated so
   the page renders complete if the script never runs.
   --------------------------------------------------------------------------- */

.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 30;
  background: var(--oxide); transform: scaleX(0); transform-origin: 0 50%; }

/* The bar comes back on the first upward scroll, so it stays inside the UI budget. */
.bar { transition: transform 200ms var(--ease-out); }

/* A group entrance: opacity plus an 8px lift, 300ms, 60ms apart, capped at eight
   steps so the last item in a group starts within 480ms of the first. */
.js [data-reveal] { opacity: 0; transform: translateY(8px); }
.js [data-reveal].is-in { opacity: 1; transform: none;
  transition: opacity 300ms var(--ease-out) calc(var(--i, 0) * 60ms),
              transform 300ms var(--ease-out) calc(var(--i, 0) * 60ms); }

/* Rows fill in 70ms apart, capped at six steps, so a table finishes inside 420ms. */
.js [data-reveal-rows] tbody tr { opacity: 0; transform: translateY(8px); }
.js [data-reveal-rows] tbody tr.is-in { opacity: 1; transform: none;
  transition: opacity 300ms var(--ease-out) calc(var(--i, 0) * 70ms),
              transform 300ms var(--ease-out) calc(var(--i, 0) * 70ms); }

@media (max-width: 859px) {
  .bar.is-hidden { transform: translateY(-100%); }
}


/* ---------------------------------------------------------------------------
   Workflow diagrams. Artefacts 7 to 11, per DESIGN-SPEC-WORKFLOWS.md. Glyph
   vocabulary first, then type, then the components that hold the drawings.
   --------------------------------------------------------------------------- */

.wf { display: block; width: 100%; height: auto; max-width: 100%; }
.wf-v { display: none; }

.wf path { fill: none; stroke: var(--rule); stroke-width: 1;
  stroke-linecap: butt; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.wf .c { stroke: var(--ink-2); }
.wf .ps { stroke: none; }
.wf .sys { fill: var(--paper); stroke: var(--rule); stroke-width: 1; }
.wf .agt { fill: var(--sheet); stroke: var(--ink); stroke-width: 1; }
.wf .gate { fill: var(--sheet); stroke: var(--oxide); stroke-width: 1; }
.wf .bar-i { fill: var(--ink); stroke: none; }
.wf .bar-o { fill: var(--oxide); stroke: none; }
.wf .dia { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.5; }
.wf .wf-panel-r { fill: var(--sheet); stroke: var(--rule); stroke-width: 1; }
.wf .seg { fill: var(--ink); }
.wf .seg-open { fill: var(--paper); stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 3; }
.wf .tk { stroke: var(--ink); }

.wf text { font-family: var(--mono); }
.wf .t1 { font-size: 11px; font-weight: 500; fill: var(--ink); }
.wf .t2 { font-size: 10px; font-weight: 400; fill: var(--ink-2); }
.wf .t2-11 { font-size: 11px; }
.wf .t2-9 { font-size: 9px; }
.wf .sn { font-size: 10px; font-weight: 600; fill: var(--ink-2); }
.wf .hd { font-size: 12px; font-weight: 600; fill: var(--ink-2); }
.wf .hd-11 { font-size: 11px; }
.wf .fo { fill: var(--oxide); }
.wf .nm { font-family: var(--sans); font-size: 15px; fill: var(--ink);
  font-variation-settings: "wdth" 96, "wght" 600; }
.wf .nm-13 { font-size: 13px; }
.wf .nm-14 { font-size: 14px; }
.wf .nm-19 { font-size: 19px; }
.wf .nm-o { fill: var(--oxide); }
.wf .el { font-family: var(--sans); font-size: 11px; fill: var(--ink-2);
  font-variation-settings: "wdth" 92, "wght" 500; }
.wf .el-10 { font-size: 10px; }
.wf .tm { font-family: var(--sans); font-size: 13px; fill: var(--ink-2);
  font-variation-settings: "wdth" 88, "wght" 600; }

/* The legend, once, beneath the hero diagram */
.legend { display: flex; flex-wrap: wrap; gap: 28px; margin-top: var(--s3); }
.legend li { display: flex; align-items: center; font-size: 13px; line-height: 1.45;
  color: var(--ink-2); font-variation-settings: "wdth" 92, "wght" 500; }
.legend-icon { width: 22px; height: 14px; flex: none; margin-right: 8px; vertical-align: -2px; }

/* Hero: the diagram is now the load bearing element */
.hero-copy .studio { margin-top: var(--s3); }
.hero-art .demo-note { margin-top: var(--s1); }

/* Artefact 9, the four delivery glyphs */
.delivery-icon { display: block; width: 64px; height: 64px; margin-bottom: 12px; }

/* Hero workflow selection. Labels wrap on desktop and scroll on mobile. */
.hero-chart { position: relative; min-width: 0; }
.hero-scene { opacity: 1; }
.hero-outgoing { position: absolute; inset: 0; pointer-events: none; }
.hero-tabs-scroll { min-width: 0; border-bottom: 1px solid var(--rule); }
.hero-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px;
  position: relative; }
.hero-tabs a { position: relative; display: flex; align-items: center; min-height: 64px;
  padding: 12px 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: var(--sans); font-size: 14px; line-height: 18px;
  font-variation-settings: "wdth" 96, "wght" 500; color: var(--ink-2);
  text-decoration: none; cursor: pointer; }
.hero-tabs a[aria-selected="true"], .hero-tabs:not([role]) a:first-child { color: var(--ink); }
.hero-tabs a[aria-selected="true"], .hero-tabs:not([role]) a:first-child { border-bottom-color: var(--ink); }
.hero-tab-progress { position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--oxide); transform: scaleX(0); transform-origin: left; }
.hero-tabs a:not([aria-selected="true"]) .hero-tab-progress { visibility: hidden; }
.hero-anatomy-caption { margin-top: var(--s2); }
.hero-art .legend { margin-top: var(--s2); }
.hero-art .wf-node .sys { fill: var(--sheet); stroke: var(--ink); }
.hero-art .wf-node text { fill: var(--ink); }
.hero-art .wf-node .nm-o { fill: var(--oxide); }
.hero-art .wf.is-armed .wf-node { opacity: 1; transition: none; }
.hero-art .wf.is-armed .wf-node:not(.is-lit) .sys { stroke: var(--rule); }
.hero-art .wf.is-armed .wf-node:not(.is-lit) text { fill: var(--ink-2); }
.hero-art .wf.is-armed .wf-node:not(.is-lit) .dia { stroke: var(--rule); }
.hero-art .wf .decision-beat { stroke-width: 2; }
.hero-art .wf .chosen { fill: var(--ink); }
.hero-art .wf .gate-bar, .hero-art .wf.is-armed .is-lit .gate-bar { transition: none; transform-box: fill-box; transform-origin: top; }
.hero-art .wf .pulse { stroke: var(--ink-2); }
.hero-art .run-complete { fill: var(--oxide); }
.demo-note { margin-top: var(--s2); }

/* Artefact 10 and 11 in their sections */
.track-fig { margin-top: var(--s4); }
.gate-fig { margin-top: var(--s4); margin-bottom: var(--s4); }
.guardrails { grid-template-rows: repeat(3, auto); grid-auto-flow: column; }
.guardrails dt .pt { display: inline-block; width: 4px; height: 4px;
  background: var(--oxide); margin-right: 8px; vertical-align: 3px; }
.more { margin-top: var(--s3); }

/* Shared diagram reveal. The hero overrides this with its pausable clock.
   The base state is the finished
   state, so nothing here is needed for the page to read correctly. */
.pulse { stroke: var(--ink-2); stroke-width: 1; fill: none;
  vector-effect: non-scaling-stroke; opacity: 0; }
.is-armed .pulse { opacity: 1; }
.wf [data-lit] { opacity: 1; transition: opacity 120ms var(--ease-out); }
.wf.is-armed [data-lit] { opacity: 0.35; }
.wf.is-armed [data-lit].is-lit { opacity: 1; }
.wf.is-armed .gate-bar { transform: scaleY(0); transform-box: fill-box; transform-origin: top; }
/* Explanatory motion: the gate bar grows as the gate lights, 220ms, once per diagram. */
.wf.is-armed .is-lit .gate-bar { transform: scaleY(1); transition: transform 220ms var(--ease-out); }

@media (max-width: 859px) {
  .guardrails { grid-auto-flow: row; grid-template-rows: none; }
}

@media (max-width: 719px) {
  .wf-h { display: none; }
  .wf-v { display: block; }
  .legend { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
  .hero-tabs-scroll { overflow-x: auto; scrollbar-width: none; padding: 3px 0; }
  .hero-tabs-scroll::-webkit-scrollbar { display: none; }
  .hero-tabs { display: flex; width: max-content; gap: 24px; }
  .hero-tabs a { white-space: nowrap; min-height: 44px; }
  .hero-art .wf-v .t2, .hero-art .wf-v .sn, .hero-art .wf-v .hd,
  .hero-art .wf-v .el { font-size: 13px; }


}


/* Mobile compatibility: keep the document inside its own available width. */
.book-short, .wf-compact, .scroll-hint, .phase-pulses { display: none; }
.page, .band-inner { padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.footer { padding-bottom: max(var(--s5), env(safe-area-inset-bottom)); }
.progress { top: env(safe-area-inset-top, 0px);
  left: env(safe-area-inset-left, 0px); right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: content-box;
  clip-path: inset(0 0 env(safe-area-inset-bottom, 0px) 0); pointer-events: none; }
.panel-scroll { overscroll-behavior-x: contain; }
.hero-art, .hero-scene, .hero-tabs-scroll, .hero-tabs, .nav { min-width: 0; }
a:active, button:active, summary:active { background-color: var(--rule); }
.btn:active { background-color: var(--ink); }
.bar:focus-within, .bar.menu-open { transform: none; }

@media (min-width: 860px) and (max-width: 1080px) {
  :root { --marker-col: 140px; --marker-gap: 24px; }
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; }
  .hero-copy .display { font-size: 48px; }
}

@media (max-width: 1080px) {
  :root { --scroll-offset: 64px; }
  a, button, summary { min-width: 44px; min-height: 44px; }
  a { display: inline-flex; align-items: center; max-width: 100%; overflow-wrap: anywhere; }
  .btn { justify-content: center; text-align: center; }
  .bar-inner { height: 56px; gap: 8px; }
  .bar .btn { white-space: nowrap; padding: 10px 12px; font-size: 13px; }
  .nav { gap: 8px; }
  .bar .nav-list { position: absolute; top: 56px; left: 0; right: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: 0 max(20px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    max-height: calc(100dvh - 56px); overflow-y: auto; overscroll-behavior-y: contain; }
  .bar .nav-list.is-open { display: flex; }
  .nav-list li { width: 100%; border-top: 1px solid var(--rule); }
  .bar .nav-list a { display: flex; align-items: center; width: 100%; min-height: 48px;
    padding: 10px 0; font-size: 16px; white-space: normal; }
  .menu-btn { display: none; }
  .menu-ready .menu-btn { display: inline-block; }
  .bar.menu-open { position: fixed; top: 0; left: 0; right: 0; }
  /* Navigation remains usable when JavaScript is unavailable or fails to load. */
  .bar:not(.menu-ready) .bar-inner { height: auto; min-height: 56px; flex-wrap: wrap; }
  .bar:not(.menu-ready) .nav { flex-wrap: wrap; }
  .bar:not(.menu-ready) .nav-list { display: flex; position: static; max-height: none; padding: 0;
    flex-direction: row; flex-wrap: wrap; border: 0; }
  .bar:not(.menu-ready) .nav-list li { width: auto; }
  .hero-tabs-scroll { overflow-x: auto; scroll-snap-type: x proximity;
    scroll-padding-inline: 4px; padding: 4px; scrollbar-width: thin; }
  .hero-tabs-scroll::-webkit-scrollbar { display: block; height: 4px; }
  .hero-tabs { display: flex; width: max-content; gap: 24px; }
  .hero-tabs a { min-height: 44px; white-space: nowrap; scroll-snap-align: start; }
  .scroll-hint { display: block; margin-top: var(--s4); color: var(--ink-2); }
  .scroll-hint + .panel-scroll { margin-top: var(--s1); }
  .footer-links a { width: fit-content; max-width: 100%; }
  h1, h2, h3, .body, .lead, .credential, .closing-text, .small { overflow-wrap: anywhere; }
  .skip { z-index: 40; }
}

@media (max-width: 859px) {
  .page-head, .hero, .section { padding-top: 64px; padding-bottom: 64px; }
  .doc h1 { font-size: 38px; }
  .guardrails { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 719px) {
  .wf-gate.wf-v .t2 { font-size: 13px; }
  .deliver dt { display: flex; align-items: center; gap: 16px; }
  .delivery-icon { width: 40px; height: 40px; margin: 0; flex: none; }
  .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hero-art .wf-v .t2, .hero-art .wf-v .sn, .hero-art .wf-v .hd,
  .hero-art .wf-v .el { font-size: 11px; }
}

@media (max-width: 599px) {
  .hero-scene .wf-h, .hero-scene .wf-v { display: none; }
  .hero-scene .wf-compact { display: block; max-width: 390px; margin-inline: auto; }
  .wf-compact .t1, .wf-compact .t2, .wf-compact .el { font-size: 12px; }
  .wf-compact .nm { font-size: 16px; }
  .hero-art { margin-top: 40px; }
  /* The ledger supplies the phase names; its rail follows variable-height rows. */
  .track-fig { display: none; }
  .phase-panel { overflow: visible; position: relative; }
  .phase-pulses { display: block; position: absolute; left: 0; top: 0; width: 24px; pointer-events: none; }
  .phase-panel .ledger { background: transparent; border: 0; }
  .phase-panel .ledger tbody { padding-left: 24px; position: relative; }
  .phase-panel .ledger tbody::before { content: ""; position: absolute;
    top: 0; bottom: 0; left: 0; width: 1px; background: var(--rule); }
  .phase-panel .ledger tr { position: relative; background: var(--sheet);
    border: 1px solid var(--rule); border-bottom: 0; }
  .phase-panel .ledger tbody tr:last-child { border-bottom: 1px solid var(--rule); }
  .phase-panel .ledger tr::after { content: ""; position: absolute;
    top: 24px; left: -28px; width: 8px; height: 1px; background: var(--ink); }
  .phase-panel .ledger tr:nth-child(3)::before { content: ""; position: absolute;
    top: 24px; bottom: 24px; left: -24px; width: 12px; border: 1px solid var(--rule); border-left: 0; }
}

@media (max-width: 399px) {
  .book-full { display: none; }
  .book-short { display: inline; }
}

@media (max-height: 499px) and (max-width: 1080px) {
  :root { --fs-display: 38px; --fs-h2: 27px; --fs-h3: 19px; --fs-lead: 18px;
    --fs-body: 16px; --fs-small: 13px; --fs-marker: 12px;
    --fs-mono: 12px; --fs-mono-h: 11px; --gutter: 20px; }
  .hero-copy .display, .doc h1 { font-size: 38px; }
  .hero, .section { padding-top: 64px; padding-bottom: 64px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-art { margin-top: 40px; }
  .bar-inner { height: 56px; }
  .bar .nav-list { max-height: calc(100dvh - 56px); }
}

/* ---------------------------------------------------------------------------
   Motion that has to sit last: the menu panel, hover gating, reduced motion.
   --------------------------------------------------------------------------- */

/* The panel slides down out of the bar it belongs to and leaves the same way,
   which is what the discrete display transition buys. Gated on .menu-ready so
   the no-script layout is never hidden by it. */
@media (max-width: 1080px) and (prefers-reduced-motion: no-preference) {
  .bar.menu-ready .nav-list { opacity: 0; transform: translateY(-8px);
    transition: opacity 200ms var(--ease-drawer), transform 200ms var(--ease-drawer),
                display 200ms allow-discrete; }
  .bar.menu-ready .nav-list.is-open { opacity: 1; transform: none; }
  @starting-style {
    .bar.menu-ready .nav-list.is-open { opacity: 0; transform: translateY(-8px); }
  }
}

/* A tap fires a false hover, so every hover change is gated. The :active states
   above stay ungated, which is what gives touch its feedback. */
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-thickness: 2px; }
  .btn:hover { background: var(--oxide-deep); }
  .nav-list a:hover { border-bottom-color: var(--oxide); }
  .menu-btn:hover { background: var(--sheet); }
  .footer-links a:hover { border-bottom-color: var(--oxide); }
  .hero-tabs a:hover { color: var(--ink); }
}

/* Fewer and gentler, not none. The fades that report a change survive at 150ms;
   every lift, slide, pulse and travelling mark goes, and scrolling is instant. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bar, .bar.is-hidden { transform: none; transition: none; }
  .plus { transition: none; }
  .js [data-reveal], .js [data-reveal-rows] tbody tr { transform: none; }
  .js [data-reveal].is-in,
  .js [data-reveal-rows] tbody tr.is-in {
    transition: opacity 150ms var(--ease-out) calc(var(--i, 0) * 60ms); }
  .wf.is-armed [data-lit], .wf.is-armed [data-lit].is-lit { opacity: 1; }
  .wf [data-lit], .wf .gate-bar { transition: none; }
  .wf.is-armed .gate-bar, .wf.is-armed .is-lit .gate-bar { transform: none; }
  .tracer, .pulse { display: none; }
  .hero-tab-progress { display: none; }
}