/* fallback faces sized to Inter; Inter itself comes from components.css (one file, three weights) */
@font-face { font-family: "Inter fallback"; font-style: normal; font-weight: 400 500; font-display: swap; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); size-adjust: 106.46%; ascent-override: 91.02%; descent-override: 22.64%; line-gap-override: 0.00%; }
@font-face { font-family: "Inter fallback"; font-style: normal; font-weight: 600; font-display: swap; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); size-adjust: 101.77%; ascent-override: 95.21%; descent-override: 23.68%; line-gap-override: 0.00%; }

/* base, as before (overrides components.css's text-size-adjust, link underline and page padding) */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* body repeats the page colours and face, so a host that styles body (the artifact preview wraps the page in its own light body) cannot put light text on a light ground in dark mode */
html:root { color-scheme: light dark; }
html body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: var(--size-4); line-height: var(--leading-body); font-weight: var(--weight-body); font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--ink-3); text-decoration-thickness: var(--line); text-underline-offset: var(--underline-offset); transition: text-decoration-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease), transform var(--dur-press) var(--ease); }
a:hover { text-decoration-color: var(--ink-3); }
a:active { color: var(--accent); transform: translateY(1px); }
:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
.skip { position: absolute; left: var(--space-3); top: var(--skip-hide); background: var(--ink); color: var(--paper); padding: var(--space-2) var(--space-3); font-size: var(--size-graphic); text-decoration: none; min-height: var(--control-h); display: inline-flex; align-items: center; }
.skip:focus { top: var(--space-3); z-index: 4; }
.page { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
header.page { padding-top: var(--space-4); } /* `.page` (0,1,0) beat `header` (0,0,1) and zeroed the 24 px masthead top */
.hy { font-variant-numeric: proportional-nums; } /* Inter's tabular figures (body tnum) widen the hyphen to a figure width, so the hyphen span sets proportional figures and "no-show", "Stage-1" and "300-reply" close up */
b, strong { font-weight: var(--weight-strong); }
h1, h2, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }


/* the stage bar (page 1) and the section list (page 2), STANDARD section 2.
   The bar is 44 px with its rule: the list's last row tucks under the 1 px rule, so each link keeps its 44 px target. */
nav.stages, nav.sections { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); background: var(--paper); border-bottom: var(--line) solid var(--rule); }
nav.stages > ol, nav.sections > ol { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 var(--space-2); margin-bottom: calc(var(--line) * -1); }
nav.stages a, nav.sections a { display: flex; align-items: center; gap: var(--space-1); min-height: var(--control-h); padding: 0 var(--control-pad); font-size: var(--size-graphic); line-height: var(--leading-snug); color: var(--ink-3); text-decoration: none; border-top: var(--line-strong) solid transparent; transition: color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease), transform var(--dur-press) var(--ease); }
nav.stages a b { color: var(--accent); font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; }
nav.stages li[aria-current="true"] a, nav.sections li[aria-current="true"] a { border-top-color: var(--accent); color: var(--ink); font-weight: var(--weight-strong); }
nav.stages li[aria-current="true"], nav.sections li[aria-current="true"] { font-weight: var(--weight-strong); } /* LOCAL: the weight on the marked li too, so the mark that forced colours keep is on the element that carries aria-current */
nav.stages a:focus-visible, nav.sections a:focus-visible { outline: var(--focus); outline-offset: calc(var(--focus-offset) * -1); }
nav.stages a:active, nav.sections a:active { background: var(--paper-2); color: var(--ink); transform: translateY(1px); }

/* page 1 anatomy and rhythm (STANDARD section 1): --space-6 between sections, --space-4 h2 to figure, --space-3 figure to narrative, --space-2 narrative to details */
main.page { padding-bottom: var(--space-6); }
.hero { padding-top: var(--space-5); }
h1, .page > h1 { margin: 0; font-size: var(--size-1); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: var(--weight-strong); text-wrap: balance; } /* `.page > h1` too, so components.css's `.page > h1` (--size-2) no longer shrinks the page-2 title; `.stamp + h1` (later) still sets its gap */
.hero .lede { margin-top: var(--space-3); font-size: var(--size-3); line-height: var(--leading-snug); color: var(--ink-2); max-width: calc(var(--measure-lede) * 2); text-wrap: pretty; }
main h2 { font-size: var(--size-2); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); font-weight: var(--weight-strong); max-width: var(--measure-text); text-wrap: pretty; }
.hero .lede + h2 { margin-top: var(--space-5); }
.stage, .close, #toolkit { margin-top: var(--space-6); }
.stage-label { margin-bottom: var(--space-2); font-size: var(--size-graphic); line-height: var(--leading-snug); font-weight: var(--weight-strong); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
main h2 + figure.gfx { margin-top: var(--space-4); }
figure.gfx + .narrative, main h2 + .narrative { margin-top: var(--space-3); }
.narrative { max-width: var(--measure-text); text-wrap: pretty; }
.narrative + h2 { margin-top: var(--space-5); }
.narrative + details.method, .table-wrap + details.method { margin-top: var(--space-2); }
.narrative + .table-wrap { margin-top: var(--space-4); }

/* the method (details), the ledger's "What it held", the two-way doors and the log: the prototype's summary, 44 px */
details.method { max-width: var(--measure-text); }
summary { display: list-item; min-height: var(--control-h); padding: var(--space-2) 0; cursor: pointer; text-decoration-line: underline; text-decoration-color: var(--ink-3); text-decoration-thickness: var(--line); text-underline-offset: var(--underline-offset); transition: text-decoration-color var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease); }
summary:active { background: var(--paper-2); }
details.method > ol { list-style: decimal; padding: 0 0 0 var(--space-4); }
details.method > ol > li + li { margin-top: var(--space-1); }
.link-out { margin-top: var(--space-1); }
.link-out a { display: inline-flex; align-items: center; min-height: var(--control-h); }

/* the close: three real results and the one accent-filled way in */
.close-lead { margin-top: var(--space-3); max-width: var(--measure-text); color: var(--ink-2); text-wrap: pretty; }
.results { margin-top: var(--space-4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.results a { display: flex; flex-direction: column; gap: var(--space-1); min-height: var(--control-h); padding: var(--space-3) 0 var(--space-2); border-top: var(--line-strong) solid var(--rule); }
.results b { font-size: var(--size-3); line-height: var(--leading-snug); }
.results span { font-size: var(--size-graphic); color: var(--ink-3); }
.way-in { margin-top: var(--space-4); }
.way-in .go-deeper { padding: var(--space-2) var(--control-pad); line-height: var(--leading-snug); max-width: var(--measure-text); }

/* the toolkit: two columns from 1024 px, one below */
.toolkit { margin-top: var(--space-4); }
.toolkit li { break-inside: avoid; }
.toolkit a { display: flex; align-items: center; min-height: var(--control-h); }

/* tables: the stage 8 cadence (page 1) and every page 2 table (STANDARD section 7) */
.table-wrap { overflow-x: auto; }
main table { width: 100%; border-collapse: collapse; font-size: var(--size-graphic); line-height: var(--leading-snug); font-variant-numeric: tabular-nums; }
main caption { caption-side: top; text-align: left; padding: 0 0 var(--space-2); font-size: var(--size-4); color: var(--ink-2); }
main th, main td { padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }
main thead th { font-size: var(--size-graphic); font-weight: var(--weight-strong); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); border-bottom: var(--line-strong) solid var(--rule-strong); }
main td, main tbody th { border-bottom: var(--line) solid var(--rule); }
main th[scope="row"] { font-weight: var(--weight-mid); }
main td[data-num], main th[data-num] { text-align: right; }

/* page 2 (STANDARD sections 1, 6, 7): the stamp, the strip, the milestone line, the ledger, the pills, the sections.
   Class names avoid the two-letter prefix the raw-value grep reads as a duration, so the ms-table and ms rows are matched by attribute. */
.stamp { display: inline-block; margin-top: var(--space-5); padding: var(--space-2) var(--space-3); font-size: var(--size-graphic); line-height: var(--leading-snug); font-weight: var(--weight-strong); color: var(--contrast); background: var(--paper); border: var(--line-strong) solid var(--contrast); max-width: var(--measure-text); }
.stamp + h1 { margin-top: var(--space-4); }
h1 + .lede { margin-top: var(--space-3); font-size: var(--size-3); line-height: var(--leading-snug); color: var(--ink-2); max-width: calc(var(--measure-lede) * 2); text-wrap: pretty; }
.strip { margin-top: var(--space-5); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--line); background: var(--rule); border: var(--line) solid var(--rule); }
.strip > div { background: var(--paper-2); padding: var(--space-3); }
.strip dt { font-size: var(--size-graphic); font-weight: var(--weight-strong); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.strip dd { margin-top: var(--space-1); }
.strip .big { display: block; font-size: var(--size-2); line-height: var(--leading-one); font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; }
.strip .sub { display: block; margin-top: var(--space-1); font-size: var(--size-graphic); color: var(--ink-3); }
figure.milestones { margin-top: var(--space-5); }
figure.milestones svg { display: block; width: 100%; height: auto; font-size: var(--size-graphic); } /* r2: the two drawings (wide, narrow) sit in div.mline-scroll */
figure.milestones figcaption { margin-top: var(--space-2); font-size: var(--size-4); color: var(--ink-3); }
table[class~="ms-table"] { margin-top: var(--space-3); }
.ledger { margin-top: var(--space-5); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
.ledger > li { border-top: var(--line-strong) solid var(--rule-strong); padding-top: var(--space-2); }
.ledger > li > p:first-child { font-size: var(--size-graphic); font-weight: var(--weight-strong); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.ledger h2 { margin-top: var(--space-1); font-size: var(--size-3); }
.ledger .pill { margin-top: var(--space-2); }
.ledger > li > p:not(:first-child) { margin-top: var(--space-2); color: var(--ink-2); }
.ledger ul { list-style: disc; padding: 0 0 var(--space-2) var(--space-4); }
.pill { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--space-4); padding: 0 var(--space-2); font-size: var(--size-graphic); font-weight: var(--weight-strong); letter-spacing: var(--tracking-caps); text-transform: uppercase; border: var(--line) solid currentColor; color: var(--ink-3); background: var(--paper); }
.pill[data-state="done"] { color: var(--ink); border-color: var(--process); }
.pill[data-state="done"]::before { content: ""; width: var(--space-2); height: var(--space-2); background: var(--process); }
.pill[data-state="progress"] { color: var(--accent); }
.pill[data-state="next"] { color: var(--ink-3); }
.pill[data-state="gated"], .pill[data-state="slipped"] { color: var(--contrast); }
.review > section[id] { margin-top: var(--space-6); }
.review > section[id] > h2 + * { margin-top: var(--space-4); }
.review .table-wrap + .table-wrap, .review .table-wrap + details, .review details + .table-wrap, .review details + details { margin-top: var(--space-5); }
.review > section[id] > p { max-width: var(--measure-text); margin-top: var(--space-3); }
.footer-line { margin-top: var(--space-2); font-size: var(--size-graphic); color: var(--ink-3); max-width: var(--measure-text); }
.footer-line a { padding-block: var(--space-1); } /* LOCAL: a 24 px box for the links in the small footer line (harness overflow, inline links) */

/* footer */
footer.page { border-top: var(--line) solid var(--rule); padding: var(--space-3) var(--gutter) var(--space-6); font-size: var(--size-graphic); color: var(--ink-3); }
footer ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
footer a { display: inline-flex; align-items: center; min-height: var(--control-h); }

/* hover, only where hover exists (CRAFT 2.1) */
@media (hover: hover) {
  a:hover { text-decoration-color: var(--accent); color: var(--accent); }
  nav.stages a:hover, nav.sections a:hover { color: var(--accent); }
  .go-deeper[data-to="deep"]:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  summary:hover { text-decoration-color: var(--accent); }
}

/* widths (STANDARD section 8) */
@media (min-width: 1024px) {
  nav.stages, nav.sections { position: sticky; top: calc(var(--head-h) + var(--line)); z-index: 2; }
  .toolkit { columns: 2; column-gap: var(--space-6); }
  .results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  nav.stages > ol, nav.sections > ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  nav.stages > ol, nav.sections > ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger { grid-template-columns: minmax(0, 1fr); }
  .table-wrap th:first-child, .table-wrap td:first-child { position: sticky; left: 0; background: var(--paper); }
  figure.milestones .mline-scroll { overflow-x: auto; }
}
@media (max-width: 374px) {
  .strip { grid-template-columns: minmax(0, 1fr); }
}

/* view transitions: the one rule is in components.css (v3 build); no smooth scroll anywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* forced colours: the current marks keep a visible border */
@media (forced-colors: active) {
  nav.stages li[aria-current="true"] a, nav.sections li[aria-current="true"] a { border-top-color: CanvasText; }
  .pill, .stamp { border-color: CanvasText; }
  .pill[data-state="done"]::before { background: CanvasText; }
}

/* print: no bars, every method open, addresses after links */
@media print {
  .skip, nav.stages, nav.sections { display: none; }
  details > :not(summary) { display: block; }
  main a[href]::after, footer a[href]::after { content: " (unnatpatel.com" attr(href) ")"; font-size: var(--size-graphic); color: var(--ink-3); }
  main a[href^="#"]::after { content: none; }
}

/* @page2 start */
/* page2.css: rules page 2's body needs that how.css does not carry.
   Tokens only. The milestone line is drawn at the page width (76rem) so its 14 px labels stay 14 px; narrower
   than that, it scrolls inside its own box (STANDARD section 8: "the milestone line scrolls inside its box"). */

figure.milestones .mline-scroll { overflow-x: auto; }
figure.milestones .mline-wide { min-width: calc(var(--page-max) - var(--gutter) * 2); }
figure.milestones .mline-narrow { display: none; }
/* r2: under 720 px the line keeps codes only (M0 to M5, step 1 to 3) in a 56 px label column, so the first view holds the
   rows' codes with the first two dots and dates; the table under it names each code. The right edge fades over the last
   24 px of the box (a mask, so the colour is irrelevant; the line's own last 24 px hold no mark) to show it scrolls */
@media (max-width: 719.98px) {
  figure.milestones .mline-wide { display: none; }
  figure.milestones .mline-narrow { display: block; width: auto; }
  figure.milestones .mline-scroll { mask-image: linear-gradient(to right, black calc(100% - var(--space-4)), transparent); }
}

/* the marks (SAMPLE-REVIEW "The milestone line"; STANDARD section 9): done dots --accent, dial-up dots --process,
   the slip and "Now" --contrast; rules and ticks neutral; every mark carries a date or a word */
figure.milestones text { fill: var(--ink-2); }
figure.milestones .code { fill: var(--ink-3); font-weight: var(--weight-strong); }
figure.milestones .name { fill: var(--ink); }
figure.milestones .tick-lbl { fill: var(--ink-3); }
figure.milestones .axis { stroke: var(--rule-strong); stroke-width: var(--line); }
/* r2: the month grid and the row rules are decorative (WCAG 1.4.11 does not apply): every mark carries its date or word, and the
   axis ticks and month labels carry the scale; so they stay --rule, 1.3:1 light and 1.49:1 dark, by design */
figure.milestones .grid, figure.milestones .row-rule { stroke: var(--rule); stroke-width: var(--line); }
figure.milestones .tick { stroke: var(--ink-3); stroke-width: var(--line); }
figure.milestones .mk-done { fill: var(--accent); }
figure.milestones .mk-plan { fill: var(--paper); stroke: var(--accent); stroke-width: var(--line-strong); }
figure.milestones .mk-step { fill: var(--process); }
figure.milestones .mk-slip { fill: none; stroke: var(--contrast); stroke-width: var(--line-strong); }
figure.milestones .mk-now { stroke: var(--contrast); stroke-width: var(--line-strong); }
figure.milestones .now-lbl, figure.milestones .slip-lbl { fill: var(--contrast); }

/* r2: the log's date column takes one width in both log tables, so their rows align; the dates in every table carry
   non-breaking spaces in the body, so no date breaks inside itself */
.review table.log thead th:first-child { width: 7.5em; }

/* the gate marks in the roadmap lanes */
.gate { color: var(--contrast); }

/* rhythm after the ledger and before the closing footer line */
.ledger + .narrative { margin-top: var(--space-5); }
.review > .footer-line { margin-top: var(--space-6); }

/* below 767 px the tables scroll inside their boxes (STANDARD section 8); a floor on the text cells keeps
   them from collapsing to one or two words a line, so each table stays readable as it scrolls */
@media (max-width: 767px) {
  .review td:not([data-num]) { min-width: calc(var(--measure-claim) * 1.5); }
}

/* forced colours (STANDARD section 10): marks use CanvasText or LinkText */
@media (forced-colors: active) {
  figure.milestones text, figure.milestones .code, figure.milestones .name, figure.milestones .tick-lbl,
  figure.milestones .now-lbl, figure.milestones .slip-lbl { fill: CanvasText; }
  figure.milestones .axis, figure.milestones .grid, figure.milestones .row-rule, figure.milestones .tick,
  figure.milestones .mk-slip, figure.milestones .mk-now { stroke: CanvasText; }
  figure.milestones .mk-done, figure.milestones .mk-step { fill: LinkText; }
  figure.milestones .mk-plan { fill: Canvas; stroke: LinkText; }
}
/* @page2 end */

/* ---- site: the M4 nav block (m4/nav.css) with `.end` scoped to div.end, because D-08's milestone
   marks are li.mark.end; then the page-level rules the site template gives inner pages. Tokens only. */
/* nav:start */
/* Site navigation (m6/nav/NAV.md section 3). Source of truth: m4/nav.css. The same block, byte for byte, sits between the
   nav:start and nav:end markers in m2/home/home.css and m3/model/site.css; m4/check.cjs fails on any drift.
   Tokens only. --accent marks links and the current item; --contrast and --process are never used for navigation.
   Glassy header, solid tiles. No comment in this file may contain the view-transition at-rule name (build.py gate k). */

:root { --head-h: 3.375rem; scroll-padding-top: calc(var(--head-h) + var(--space-3)); }
@media (max-width: 767px) { :root { --head-h: 3.25rem; } }
body { background: var(--paper); }
/* (84): body colour hardening. A host page style such as `:root{color-scheme:light} body{background:...;color:...;font:...}`
   can land after this file (the claude.ai preview does). These two rules out-rank it on specificity whatever the order, and
   repeat the values the page already computes, so nothing changes when no such style is present. */
html:root { color-scheme: light dark; }
html body { background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: var(--size-4); line-height: var(--leading-body); }

/* 1. Header: one row, glassy, sticky */
header.site-head {
  position: sticky; top: 0; z-index: 10; padding-top: 0;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: var(--line) solid transparent;
  transition: border-color var(--dur-ui) var(--ease);
  view-transition-name: site-head;
}
header.site-head[data-scrolled] { border-bottom-color: var(--rule); }
.site-head__in {
  max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); box-sizing: border-box;
  min-height: var(--head-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); position: relative;
}
.site-head__brand {
  display: inline-flex; align-items: center; min-height: var(--control-h); white-space: nowrap;
  font-size: var(--size-4); font-weight: var(--weight-strong); color: var(--ink); text-decoration: none;
}
.site-nav { display: flex; align-items: center; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--space-1); }
.site-nav a {
  display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 var(--space-2); box-sizing: border-box;
  font-size: var(--size-graphic); font-weight: var(--weight-mid); color: var(--ink-2); text-decoration: none; white-space: nowrap;
  border-bottom: var(--line-strong) solid transparent;
  transition: color var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease);
}
.site-nav__key { margin-left: var(--space-2); padding-left: var(--space-2); border-left: var(--line) solid var(--rule); }
.site-nav a[aria-current] { color: var(--ink); font-weight: var(--weight-strong); border-bottom-color: var(--accent); }
.site-nav a:active, .site-head__brand:active, .site-head__menu:active {
  background: var(--paper-2); transform: translateY(1px); transition-duration: var(--dur-press);
}
@media (hover: hover) { .site-nav a:hover, .site-head__brand:hover { color: var(--accent); } }
header.site-head :focus-visible { outline: var(--focus); outline-offset: calc(var(--focus-offset) * -1); }
/* the focused skip link opens above the header; main takes focus from it without a ring */
a.skip:focus { z-index: 11; }
main:focus { outline: none; }

/* Menu button: phones with JS only. Its label never changes. */
.site-head__menu {
  display: none; align-items: center; justify-content: center;
  min-height: var(--control-h); min-width: var(--control-h); margin-left: var(--space-1); padding: 0 var(--space-2);
  font: inherit; font-size: var(--size-graphic); font-weight: var(--weight-mid); color: var(--ink);
  background: transparent; border: var(--line) solid var(--rule); border-radius: var(--radius); cursor: pointer;
}
.site-head__menu[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
@media (hover: hover) { .site-head__menu:hover { border-color: var(--rule-strong); background: var(--paper-2); } }

@media (max-width: 767px) {
  /* phone row: brand, the two key links, Menu */
  .site-head__in { gap: 0; }
  .site-head__brand { font-size: var(--size-graphic); }
  .site-nav { gap: var(--space-1); min-width: 0; }
  .site-nav__key { margin-left: 0; padding-left: 0; border-left: 0; gap: 0; }
  .site-nav__key a { padding: 0 var(--space-1); }
  html.js .site-head__menu { display: inline-flex; }
  html.js .site-nav .site-nav__main { display: none; }
  html.js .site-nav .site-nav__main.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: var(--head-h);
    background: var(--paper); border-bottom: var(--line) solid var(--rule); box-shadow: var(--shadow-1);
    padding: var(--space-2) var(--gutter) var(--space-3);
  }
  html.js .site-nav__main.is-open a { display: flex; font-size: var(--size-4); padding: 0; border-bottom: var(--line) solid var(--rule); }
  html.js .site-nav__main.is-open a[aria-current] { border-bottom: var(--line-strong) solid var(--accent); }
  /* without JS the bar wraps so Work, Library and About stay on screen */
  html:not(.js) .site-head__in { flex-wrap: wrap; padding-block: var(--space-1); }
  html:not(.js) .site-nav { flex-wrap: wrap; }
  /* the wrapped bar is taller than --head-h, so without JS it scrolls away instead of covering focused links */
  html:not(.js) header.site-head { position: relative; }
}

/* 2. Breadcrumb: depth 2 and below. One line on desktop, "← Parent" on phones */
.crumbs { margin: var(--space-3) 0 0; font-size: var(--size-graphic); color: var(--ink-3); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; overflow: hidden; }
.crumbs li { display: inline-flex; align-items: center; min-width: 0; white-space: nowrap; }
.crumbs li + li::before { content: "›"; padding: 0 var(--space-2); color: var(--ink-3); }
.crumbs a {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h); min-width: var(--control-h); color: var(--ink-2);
  text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: var(--underline-offset);
}
.crumbs [aria-current="page"] { color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.crumbs a:active { background: var(--paper-2); transform: translateY(1px); transition-duration: var(--dur-press); }
@media (hover: hover) { .crumbs a:hover { color: var(--accent); text-decoration-color: var(--accent); } }
.crumbs .crumbs__up { display: none; }
@media (max-width: 767px) {
  .crumbs ol { display: none; }
  .crumbs .crumbs__up { display: inline-flex; align-items: center; min-height: var(--control-h); color: var(--ink-2); text-decoration: none; }
}
/* r5 (quality M4, journeys R5-M2, NAV.md 11.4): on a page other pages link into at a section, gen.cjs makes the breadcrumb
   main's first child (nav.crumbs--pin). It sticks right under the header with the same glass, so after a section jump
   the page name and the way up stay in view; the jumped-to heading lands below the row (scroll-padding-top) */
.crumbs--pin {
  position: sticky; top: calc(var(--head-h) + var(--line)); z-index: 9; min-height: var(--control-h);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: var(--line) solid transparent; transition: border-color var(--dur-ui) var(--ease);
}
header.site-head[data-scrolled] ~ .page .crumbs--pin { border-bottom-color: var(--rule); }
:root:has(.crumbs--pin) { --pin-h: calc(var(--control-h) + var(--line)); scroll-padding-top: calc(var(--head-h) + var(--line) + var(--pin-h) + var(--space-3)); }
@media (max-width: 767px) {
  /* phones: "← Parent › Page name" on one line; the name gives way (ellipsis) before the up-link does */
  .crumbs--pin { display: flex; align-items: center; gap: var(--space-2); }
  .crumbs--pin .crumbs__up { order: -1; flex: none; }
  .crumbs--pin ol { display: flex; min-width: 0; }
  .crumbs--pin li:not([aria-current]) { display: none; }
  .crumbs--pin li[aria-current] { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .crumbs--pin li[aria-current]::before { padding: 0 var(--space-2) 0 0; }
  /* without JS the phone header scrolls away (section 1), so the row sticks to the top */
  html:not(.js) .crumbs--pin { top: 0; }
  html:not(.js):has(.crumbs--pin) { scroll-padding-top: calc(var(--pin-h) + var(--space-3)); }
}
/* r6 (wayfinding P1): on narrow phones a long page name takes two lines inside the 44 px row before it is cut */
@media (max-width: 400px) {
  .crumbs--pin li[aria-current] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; line-height: 1.25; }
}

/* 3. Context line: plain text, never a link or a Tab stop; a segment never breaks inside.
   A book page names the next chapter on its own line under it (p.context-next, one link). */
.context { margin: var(--space-2) 0 var(--space-2); font-size: var(--size-graphic); color: var(--ink-3); }
.context > span { white-space: nowrap; }
.context b { color: var(--ink-2); font-weight: var(--weight-strong); }
.context-next { margin: 0 0 var(--space-2); font-size: var(--size-graphic); }
.context-next a { display: inline-flex; align-items: center; min-height: var(--control-h); color: var(--accent); }

/* 4. Layer marker at the top of an in-page Deep dive or Evidence section */
.num[data-wayfind="layer"] { font-size: var(--size-graphic); color: var(--ink-3); letter-spacing: var(--tracking-caps); text-transform: uppercase; }

/* 5. On this page, In this section, Chapters, Related */
.toc .toc__cap, .children .caps, .chapters .caps { font-size: var(--size-graphic); color: var(--ink-3); }
.children ul, .chapters ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2) var(--space-4); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.children a, .chapters a { display: inline-flex; align-items: center; min-height: var(--control-h); }
/* links that wrap to two lines keep a visible gap from their neighbours */
.children a, .related a { padding-block: var(--space-1); box-sizing: border-box; }
.chapters [aria-current="page"] { display: inline-flex; align-items: center; min-height: var(--control-h); color: var(--ink); font-weight: var(--weight-strong); }
.children { margin-bottom: var(--space-5); }
@media (min-width: 1024px) { .deep .toc { top: calc(var(--head-h) + var(--space-3)); } }
@media (min-width: 1024px) { main:has(> .crumbs--pin) .deep .toc { top: calc(var(--head-h) + var(--line) + var(--pin-h) + var(--space-3)); } }
/* a deep block whose contents list was left out (fewer than two entries) is one column */
.deep.deep--solo { grid-template-columns: minmax(0, 1fr); }
/* the contents link of the section in view (nav.js) carries the current mark: a 2 px accent rule left of its item
   (one rule however many lines the item wraps to), with the link text in full ink */
/* r3 (quality M-2): 4 px above and below each item keeps two wrapped contents links at least 8 px apart */
.toc li { border-left: var(--line-strong) solid transparent; padding: var(--space-1) 0 var(--space-1) var(--space-2); }
.toc li:has(> a[aria-current="location"]) { border-left-color: var(--accent); }
.toc a[aria-current="location"] { color: var(--ink); }
/* r6 (wayfinding P6, B10): every template keeps its contents list on the same side, the right, as the deep-dive cases do */
@media (min-width: 1024px) {
  .deep { grid-template-columns: minmax(0, 1fr) 14rem; }
  .deep > .toc { grid-column: 2; grid-row: 1; }
  .deep > .body { grid-column: 1; grid-row: 1; }
}
/* deep-dive cases (main[data-toc="side"], written by gen.cjs on /case/ pages only): the contents sit beside the head
   from 1024 up, their caption level with the breadcrumb row; below 768 a collapsed copy sits under the context line */
.toc--head { display: none; }
@media (min-width: 1024px) {
  main[data-toc="side"] { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; column-gap: var(--space-6); align-items: start; }
  main[data-toc="side"] > .head { grid-column: 1; grid-row: 1; }
  main[data-toc="side"] > .deep { display: contents; }
  main[data-toc="side"] .deep > .toc { grid-column: 2; grid-row: 1 / span 2; margin-top: calc(var(--space-4) + var(--space-3)); }
  main[data-toc="side"] .deep > .toc > .caps:first-child { display: flex; align-items: center; min-height: var(--control-h); margin: 0; }
  main[data-toc="side"] .deep > .body { grid-column: 1; grid-row: 2; }
  main[data-toc="side"] > .end { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 767px) {
  main[data-toc="side"] .deep > .toc { display: none; }
  .toc--head { display: block; margin: 0 0 var(--space-3); border-top: var(--line) solid var(--rule); border-bottom: var(--line) solid var(--rule); }
  /* the summary is a control: a chevron that turns when open, hover and pressed states */
  .toc--head summary {
    display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); cursor: pointer; list-style: none;
    font-size: var(--size-graphic); color: var(--ink-2); transition: color var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease);
  }
  .toc--head summary::-webkit-details-marker { display: none; }
  .toc--head summary::after {
    content: ""; flex: none; margin-left: auto; margin-right: var(--space-2); width: 0.5em; height: 0.5em;
    border-right: var(--line-strong) solid currentColor; border-bottom: var(--line-strong) solid currentColor;
    transform: translateY(-25%) rotate(45deg); transition: transform var(--dur-ui) var(--ease);
  }
  .toc--head[open] summary::after { transform: translateY(25%) rotate(-135deg); }
  .toc--head summary:active { background: var(--paper-2); transition-duration: var(--dur-press); }
  /* numbered like the desktop list (templates.css .deep .toc) */
  .toc--head ol { list-style: none; margin: 0; padding: 0 0 var(--space-2); counter-reset: s; }
  .toc--head li { counter-increment: s; }
  .toc--head a { display: flex; align-items: center; min-height: var(--control-h); font-size: var(--size-graphic); color: var(--ink-2); text-decoration: none; }
  .toc--head a::before { content: counter(s, decimal-leading-zero); flex: none; margin-right: var(--space-2); font-weight: var(--weight-strong); color: var(--accent); }
}
@media (hover: hover) { .toc--head summary:hover, .toc--head a:hover { color: var(--accent); } }
.related { margin: 0 0 var(--space-4); padding: var(--space-3); background: var(--paper-2); border-left: var(--line-strong) solid var(--accent); }
.related .caps { margin: 0; font-size: var(--size-graphic); color: var(--ink-2); }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.related a { display: inline-flex; align-items: center; min-height: var(--control-h); color: var(--ink); font-weight: var(--weight-strong); text-underline-offset: var(--underline-offset); }
@media (hover: hover) { .related a:hover { color: var(--accent); } }
/* r3 (critic 4): a body link whose own words do not say where it goes shows the destination's name on a line of its own
   (gen.cjs linkHtml, span.dest); in running text the name follows on the same line after a middle dot */
a .dest { display: block; margin-top: var(--space-1); font-size: var(--size-graphic); font-weight: var(--weight-body); line-height: var(--leading-snug); color: var(--ink-2); }
a.solo:has(> .dest) { flex-direction: column; align-items: flex-start; justify-content: center; padding-block: var(--space-1); box-sizing: border-box; }
a:not(.solo) > .dest { display: inline; margin: 0; }
a:not(.solo) > .dest::before { content: "· "; }
@media (hover: hover) { a:hover .dest { color: var(--accent); } }
/* r4 (quality M1): a name inside a caps label keeps sentence case at chrome size (gen.cjs adds none there today) */
.caps .dest { text-transform: none; letter-spacing: normal; font-size: var(--size-graphic); }
/* r4 (quality P4, CRAFT 7.2): a link that is the whole block rests with the same --ink-3 underline as running-text links.
   r5 (quality M2): :where() keeps this at element weight, so the hover and pressed colours still win */
a:where(.solo) { text-decoration-color: var(--ink-3); }
/* r4 (quality M4, NAV.md 10.4): the /library/ card groups are solid tiles (kicker, title, one line), never bulleted; the
   chapter lists number their entries */
ul.tiles { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
ul.tiles > li { display: grid; margin: 0; }
/* r5 (quality M3, P2): a /library/ list whose every entry is one whole link (the stage lists, the chapter list) is an
   unbulleted grid like nav.chapters, one 44 px row per entry */
ul.link-grid { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2) var(--space-4); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
ul.link-grid > li { margin: 0; }
ul.link-grid a { display: inline-flex; align-items: center; min-height: var(--control-h); }
ul.link-grid a.solo:has(> .dest) { display: inline-flex; flex-direction: column; align-items: flex-start; }
.next-card__d { font-size: var(--size-graphic); line-height: var(--leading-snug); color: var(--ink-2); }
.next-card .dest { margin-top: 0; }
.chapter-n { font-variant-numeric: tabular-nums; color: var(--ink-3); margin-right: var(--space-1); }
/* r3 (critic 5): /book/ lists its chapters in the head, under the lead; /documents/ heads its list with the page's own h2 */
.head > .chapters { margin: var(--space-4) 0 var(--space-5); }
.children > h2 { margin: 0 0 var(--space-3); }
/* r3 (journeys N2): the related cases of a healthcare case are next cards inside its last section */
.prose .next-step--related { margin: var(--space-3) 0 0; }
.prose .next-card { text-decoration: none; }

/* 6. End of page (div.end): next-step cards, pager, Back to <parent>. Solid tiles, never glassy.
   Home has no div.end: its nav.next-step sits between </main> and the footer and gets the same rule. */
body > .next-step, .page > .next-step { max-width: var(--page-max); margin: var(--space-5) auto 0; padding: 0 var(--gutter); box-sizing: border-box; }
div.end { display: grid; gap: var(--space-3); margin: var(--space-5) 0 var(--space-3); padding-top: var(--space-4); border-top: var(--line) solid var(--rule); }
.end__back { margin: 0; }
/* r5 (quality P6): links in the end block rest with the --ink-3 underline too; :where() leaves hover and pressed in charge */
:where(div.end) a { text-decoration-color: var(--ink-3); }
.next-step__cards { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(16rem, 24rem)); }
.next-card, .pager a {
  display: grid; gap: var(--space-1); align-content: start; min-height: var(--control-h); padding: var(--space-3) var(--space-4);
  background: var(--paper-2); border-left: var(--line-strong) solid var(--accent); color: var(--ink); text-decoration: none;
  transition: background-color var(--dur-ui) var(--ease);
}
.pager__sep { display: none; }
.next-card__k, .pager__k { font-size: var(--size-graphic); color: var(--ink-3); }
.next-card__t, .pager__t { font-size: var(--size-4); font-weight: var(--weight-strong); line-height: var(--leading-snug); color: var(--accent); }
.next-card:active, .pager a:active { transform: translateY(1px); transition-duration: var(--dur-press); }
@media (hover: hover) { .next-card:hover, .pager a:hover { background: color-mix(in srgb, var(--accent) 8%, var(--paper-2)); } }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.pager a[rel="next"] { grid-column: 2; text-align: right; }
a.back { display: inline-flex; align-items: center; min-height: var(--control-h); font-size: var(--size-graphic); color: var(--ink-2); }
a.back:active { background: var(--paper-2); transform: translateY(1px); transition-duration: var(--dur-press); }
@media (max-width: 767px) { .pager { grid-template-columns: 1fr; } .pager a[rel="next"] { grid-column: 1; text-align: left; } }

/* 7. Footer: secondary links and the legal line, no layer list */
.site-foot { max-width: var(--page-max); margin: var(--space-5) auto 0; padding: var(--space-3) var(--gutter) var(--space-6); box-sizing: border-box; border-top: var(--line) solid var(--rule); font-size: var(--size-graphic); color: var(--ink-3); }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.site-foot a { display: inline-flex; align-items: center; min-height: var(--control-h); color: var(--ink-2); }
.site-foot .legal { margin: var(--space-2) 0 0; line-height: var(--control-h); }
.page > .site-foot { padding-inline: 0; }

/* 8. The header never cross-fades between pages */
::view-transition-group(site-head) { animation: none; }
::view-transition-old(site-head), ::view-transition-new(site-head) { animation: none; }

/* 9. Fallbacks */
@media (prefers-reduced-transparency: reduce) {
  header.site-head { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--rule); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { header.site-head { background: var(--paper); } }
@media (prefers-reduced-transparency: reduce) { .crumbs--pin { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--rule); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .crumbs--pin { background: var(--paper); } }
@media (forced-colors: active) {
  header.site-head { background: Canvas; backdrop-filter: none; border-bottom: 1px solid CanvasText; }
  .crumbs--pin { background: Canvas; backdrop-filter: none; border-bottom: 1px solid CanvasText; }
  .site-nav a[aria-current] { forced-color-adjust: none; color: Highlight; border-bottom-color: Highlight; text-decoration: underline; }
  .site-nav a:not([aria-current]) { border-bottom-color: Canvas; }
  .site-head__menu { border-color: ButtonText; }
  .next-card, .pager a, .related { border: 1px solid CanvasText; }
  /* r4 (quality M2, W20): the contents mark stays visible: Highlight rule left of the current item, underlined link */
  .toc li { border-left-color: Canvas; }
  .toc li:has(> a[aria-current="location"]) { border-left-color: Highlight; }
  .toc a[aria-current="location"] { text-decoration: underline; text-decoration-thickness: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  header.site-head, .crumbs--pin, .site-nav a, .next-card, .pager a, .toc--head summary, .toc--head summary::after { transition: none; }
  .site-nav a:active, .site-head__menu:active, .crumbs a:active, .next-card:active, .pager a:active, a.back:active { transform: none; }
}
@media print { header.site-head, .crumbs, div.end, .next-step, .site-foot nav { display: none; } }
/* nav:end */

/* the stage bar sticks under the site header from 1024 px, so a jumped-to heading lands below both; this follows the nav
   block, whose :root rule would otherwise reset the padding to the header alone */
@media (min-width: 1024px) {
  :root { scroll-padding-top: calc(var(--head-h) + var(--line) + var(--control-h) + var(--line) + var(--space-3)); }
}
/* the M2 bars inside div.page: the page already has the gutter */
.page nav.stages, .page nav.sections { padding-inline: 0; }
.page nav.stages, .page nav.sections { margin-top: var(--space-3); }
/* the moved M4 sections (toolkit, AI built, functions, controls, boundaries): the M4 template's prose rules, scoped */
.moved { margin-top: var(--space-6); }
.moved .prose { max-width: var(--measure-text); text-wrap: pretty; }
.moved p, .moved ul, .moved dl, .moved table, .moved figure { margin: 0 0 var(--space-3); }
.moved .prose > ul:not(.toolkit):not(:has(a.solo)) { list-style: disc; padding: 0 0 0 var(--space-4); }
.moved .prose > ul:not(.toolkit) > li + li { margin-top: var(--space-1); }
.moved h2 { margin: 0 0 var(--space-3); }
.moved h3, .moved h4 { font-size: var(--size-4); line-height: var(--leading-snug); margin: var(--space-4) 0 var(--space-2); }
.moved h5, .moved h6 { font-size: var(--size-graphic); line-height: var(--leading-snug); margin: var(--space-4) 0 var(--space-2); }
.moved .caps { font-size: var(--size-graphic); font-weight: var(--weight-strong); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--space-2); }
.moved .solo { display: inline-flex; align-items: center; min-height: var(--control-h); min-width: var(--control-h); }
.moved .table-wrap, .moved table.compare { max-width: none; }
.moved .evidence__phone { display: block; }
.moved .brief { margin: 0 0 var(--space-3); }
@media (max-width: 767px) { .moved .evidence__phone img { max-width: var(--measure-lede); margin-inline: auto; } }
/* lazy figures (lazy.js): the placeholder keeps the measured height of the figure it stands for, so nothing moves */
html.js .gfx-lazy { min-height: var(--ph-n, 30rem); }
@media (min-width: 768px) { html.js .gfx-lazy { min-height: var(--ph-w, 30rem); } }
.gfx-lazy figcaption { color: var(--ink-3); }

/* ---- the journey (site copy): the stage bar sticks under the site header at every width, but only inside the journey
   (div.journey holds the bar, the hero, stages 1 to 8, the gap bridge and div#more, the moved reference sections the
   ninth item marks), so it leaves before the close. Under
   1024 px it is one row that scrolls sideways and keeps the current stage in view (stages.js). */
nav.stages, nav.sections { position: sticky; top: calc(var(--head-h) + var(--line)); z-index: 2; }
@media (max-width: 1023px) {
  nav.stages > ol, nav.sections > ol { display: flex; gap: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; position: relative; }
  nav.stages > ol::-webkit-scrollbar, nav.sections > ol::-webkit-scrollbar { display: none; }
  nav.stages li, nav.sections li { flex: none; }
  nav.stages a, nav.sections a { white-space: nowrap; }
  :root { scroll-padding-top: calc(var(--head-h) + var(--line) + var(--control-h) + var(--line) + var(--space-2)); }
}
/* the gap bridge: at each stage, the step the usual process skips and why it earns its place */
.gap-note { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; max-width: var(--measure-text); }
.gap-note > li { padding: var(--space-2) var(--space-3); border-left: calc(var(--line-strong) * 2) solid var(--process); background: color-mix(in srgb, var(--process) 12%, var(--paper)); border-radius: 0 var(--space-1) var(--space-1) 0; font-size: var(--size-graphic); line-height: var(--leading-snug); }
.gap-note b { font-weight: var(--weight-strong); }
.gap-tag { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 var(--space-2); margin-right: var(--space-1); border-radius: var(--space-3); background: var(--process); color: var(--process-ink); font-size: var(--size-graphic); font-weight: var(--weight-strong); line-height: 1; vertical-align: 1px; }
.gap-why { color: var(--ink-2); }
.gaps { margin-top: var(--space-6); }
.gap-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.gap-list a { display: flex; flex-direction: column; justify-content: center; gap: var(--space-1); min-height: calc(var(--control-h) * 1.5); height: 100%; box-sizing: border-box; padding: var(--space-2) var(--space-3); border: var(--line) solid var(--rule); border-left: calc(var(--line-strong) * 2) solid var(--process); border-radius: var(--space-1); color: var(--ink); text-decoration: none; }
.gap-list a b { font-weight: var(--weight-strong); }
.gap-list .gap-at { font-size: var(--size-graphic); color: var(--ink-3); }
.gap-list a:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
@media (hover: hover) { .gap-list a:hover { border-color: var(--accent); } .gap-list a:hover b { color: var(--accent); } }
:target { scroll-margin-top: var(--space-3); }
/* the moved sections: from 1024 px the eyebrow and heading stand in a column beside the text */
.moved__head > .caps { margin: 0 0 var(--space-2); }
@media (min-width: 1024px) {
  .moved { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); column-gap: var(--space-6); align-items: start; }
  .moved > .moved__head { position: sticky; top: calc(var(--head-h) + var(--line) + var(--control-h) + var(--line) + var(--space-4)); }
  .moved .prose { max-width: none; }
  .moved .prose > :is(p, ul:not(.fn-grid, .toolkit), ol, h3, h4, h5) { max-width: var(--measure-text); }
}
/* the decision layers, in the page's colours (was an image with 7 px labels that stayed light in dark mode) */
.layers { margin: 0 0 var(--space-4); }
.layers__cols { display: none; }
.layers__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.layer { --role: var(--process); display: grid; gap: var(--space-2); padding: var(--space-3); border: var(--line-strong) solid var(--role); border-left-width: calc(var(--line-strong) * 3); border-radius: var(--space-1); background: color-mix(in srgb, var(--role) 12%, var(--paper)); }
.layer.human, .layer.ai { --role: var(--accent); }
.layers .layer { max-width: none; }   /* components.css gives .evidence a 40rem viewer width */
.layer.human { background: var(--accent); color: var(--accent-ink); }
.layer__work { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-1); align-items: center; }
.layer__work > .ic { grid-row: span 3; align-self: start; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pin); background: var(--role); color: var(--accent-ink); }
.layer.rules > .layer__work > .ic, .layer.evidence > .layer__work > .ic { color: var(--process-ink); }
.layer.human > .layer__work > .ic { background: var(--accent-ink); color: var(--accent); }
.layer__name { font-weight: var(--weight-strong); font-size: var(--size-4); line-height: var(--leading-snug); }
.layer__does, .layer__note, .layer__k { font-size: var(--size-graphic); line-height: var(--leading-snug); }
.layer__does { font-weight: var(--weight-mid); }
.layer__ctl { display: grid; gap: var(--space-1); padding-top: var(--space-2); border-top: var(--line) solid color-mix(in srgb, var(--role) 45%, transparent); }
.layer__k { font-weight: var(--weight-strong); }
.layer.human .layer__ctl { border-top-color: color-mix(in srgb, var(--accent-ink) 40%, transparent); }
.layers__flow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: var(--space-3) 0 var(--space-2); font-size: var(--size-graphic); font-weight: var(--weight-strong); color: var(--ink-2); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.layers__flow span + span::before { content: "→"; margin-right: var(--space-2); color: var(--process); }
.layers figcaption { font-size: var(--size-graphic); color: var(--ink-3); max-width: var(--measure-text); }
@media (min-width: 768px) {
  .layers__cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--space-4); margin-bottom: var(--space-2); font-size: var(--size-graphic); font-weight: var(--weight-strong); color: var(--ink-3); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
  .layer { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--space-4); align-items: center; }
  .layer__ctl { padding: 0 0 0 var(--space-4); border-top: 0; border-left: var(--line) solid color-mix(in srgb, var(--role) 45%, transparent); }
  .layer.human .layer__ctl { border-left-color: color-mix(in srgb, var(--accent-ink) 40%, transparent); }
}
/* the functions and the controls as cards */
.moved .prose > ul.fn-grid, .ctl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.moved .prose > ul.fn-grid > li + li { margin-top: 0; }
.fn, .ctl { padding: var(--space-3); border: var(--line) solid var(--rule); border-top: calc(var(--line-strong) * 2) solid var(--process); border-radius: var(--space-1); background: var(--paper); }
.fn { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); align-items: start; }
.fn > .ic { grid-row: span 2; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pin); background: var(--process); color: var(--process-ink); }
.moved .fn > :is(h3, p), .moved .ctl > :is(h3, h4, h5, p) { margin: 0; }
.moved .fn > h3, .moved .ctl > :is(h3, h4, h5) { font-size: var(--size-4); margin-bottom: var(--space-1); }
.moved .ctl > .ctl__q { font-weight: var(--weight-strong); margin-bottom: var(--space-2); }
.ctl { border-top-color: var(--accent); }
@media (min-width: 1024px) { .ctl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the toolkit groups fold under their heading and one-line introduction */
.tk-group { margin: 0 0 var(--space-3); border: var(--line) solid var(--rule); border-radius: var(--space-1); background: var(--paper); }
.tk-group > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: center; min-height: var(--control-h); padding: var(--space-2) var(--space-3); cursor: pointer; list-style: none; }
.tk-group > summary::-webkit-details-marker { display: none; }
.tk-group > summary::after { content: ""; grid-column: 2; grid-row: 1 / span 2; width: .625rem; height: .625rem; border-right: var(--line-strong) solid var(--accent); border-bottom: var(--line-strong) solid var(--accent); rotate: 45deg; translate: 0 -25%; transition: rotate var(--dur-ui) var(--ease); }
.tk-group[open] > summary::after { rotate: 225deg; translate: 0 25%; }
.moved .tk-group > summary > h3 { grid-column: 1; margin: 0; }
.tk-intro { grid-column: 1; font-size: var(--size-graphic); color: var(--ink-3); margin-top: var(--space-1); }
.tk-group > summary:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
.tk-group[open] > summary { border-bottom: var(--line) solid var(--rule); }
.tk-group > :not(summary) { margin-inline: var(--space-3); }
.tk-group > summary + * { margin-top: var(--space-3); }
@media (hover: hover) { .tk-group > summary:hover h3 { color: var(--accent); } }
@media print { .tk-group > summary::after { display: none; } }
@media (forced-colors: active) { .gap-tag { border: var(--line) solid CanvasText; } .layer, .layer.human { background: Canvas; color: CanvasText; } }
/* without scripts the measured placeholders give way to the figures inside noscript */
html:not(.js) .gfx-lazy { display: none; }
/* the hero picture of the eight stages (under 768 px only, where the D-01 loop starts below the first screen) */
.hero-loop { display: none; }
@media (max-width: 767px) {
  .hero-loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3) var(--space-2); margin: var(--space-3) 0 var(--space-4); padding: var(--space-3); border: var(--line) solid var(--rule); border-radius: var(--space-2); background: var(--paper-2); position: relative; }
  .hl { --role: var(--process); --role-ink: var(--process-ink); display: grid; justify-items: center; gap: var(--space-1); position: relative; text-align: center; }
  .hl.before { --role: var(--contrast); --role-ink: var(--contrast-ink); }
  .hl.after { --role: var(--accent); --role-ink: var(--accent-ink); }
  .hl > .ic { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pin); background: var(--role); color: var(--role-ink); position: relative; z-index: 1; }
  .hl > .ic svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .hl:not(:nth-child(4n))::after { content: ""; position: absolute; top: 1.125rem; left: calc(50% + 1.25rem); right: calc(-50% + 1rem - var(--space-2)); border-top: 3px solid var(--process); border-radius: 2px; }
  .hl-t { font-size: var(--size-graphic); line-height: var(--leading-snug); color: var(--ink); }
  .hl-t b { color: var(--role); font-weight: var(--weight-strong); }
  .hl.process .hl-t b { color: var(--ink-2); }
  .hl-back { grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--size-graphic); font-weight: var(--weight-strong); color: var(--accent); }
  .hl-back::before { content: "↺"; font-size: var(--size-4); line-height: 1; }
}
/* the brief labels and the comparison tables in the moved sections at the graphic size (14 px), not 12 and 13 px */
.prose .brief dt, .prose .compare { font-size: var(--size-graphic); }
.way-in .go-deeper { font-size: var(--size-graphic); }
/* the icon sprite (page 1): symbols only, never drawn itself */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* review tables under 600 px: each row a card, the row head its title, each cell under its column head (data-th) */
@media (max-width: 599px) {
  .review table.stack, .review table.stack caption, .review table.stack tbody, .review table.stack tr,
  .review table.stack th[scope="row"], .review table.stack td { display: block; }
  .review table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .review table.stack tr { padding: var(--space-3) 0; border-bottom: var(--line) solid var(--rule); }
  .review table.stack tr:first-child { border-top: var(--line-strong) solid var(--rule-strong); }
  .review table.stack.stack :is(th, td) { position: static; min-width: 0; padding: 0; border: 0; text-align: left; background: none; }
  .review table.stack th[scope="row"] { font-size: var(--size-4); font-weight: var(--weight-strong); color: var(--ink); }
  .review table.stack td { margin-top: var(--space-2); overflow-wrap: break-word; }
  .review table.stack td[data-th]::before { content: attr(data-th); display: block; font-size: var(--size-graphic); font-weight: var(--weight-strong); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
}
/* minors r3: the ninth bar item, More, sits after stage 8 at its own width and reads as a reference, not a stage */
@media (min-width: 1024px) { nav.stages > ol { grid-template-columns: repeat(8, minmax(0, 1fr)) auto; } }
nav.stages li.more a { color: var(--ink-2); }
nav.stages li.more[aria-current="true"] a { color: var(--ink); }
/* the 375 hero: the stage number stands over its name, so "3 Prioritize" never wraps inside a quarter of the width */
@media (max-width: 767px) {
  .hero-loop { padding-inline: var(--space-2); column-gap: var(--space-1); }
  .hl-t b { display: block; }
  .hl-t { white-space: nowrap; }
}