/* The home page (the reference mock of this task). Every value is a token from tokens.css; no raw colour, size, space, duration or
   easing here. Imports: the tokens, the m2-map component and its draw. The layer-component rules the page uses (go-deeper, the
   highlight figure's type) and B's named rules (concept B's site.css) are copied below with no value changed;
   components.css is not imported, because its three @font-face rules would load three font files (BUILD.md step 8). */
@import url("/assets/tokens.css");
@import url("/assets/v3/map/map.css");
@import url("/assets/v3/map/map-draw.css");

/* fonts (tools/fallback.cjs, fallback.json): one Inter file; the fallback sized to it */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/inter-normal-400-latin-c9407645.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@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 (B site.css, named rules; text-size-adjust at 100%, M2-NOTES 23) */
*, *::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 { margin: 0; font-size: var(--size-4); line-height: var(--leading-body); font-weight: var(--weight-body); font-variant-numeric: tabular-nums; }
/* QA-016 (84): repeat the numerals at `html body` so a host page `font:` shorthand landing after this file cannot reset them */
html 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: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-5); text-decoration: none; min-height: var(--control-h); display: inline-flex; align-items: center; }
.skip:focus { top: var(--space-3); z-index: 11; }
.sr { position: absolute; width: var(--line); height: var(--line); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
b, strong { font-weight: var(--weight-strong); }
h1, h2, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
.num { font-variant-numeric: tabular-nums; }

/* hero: name and claim in column A, the lede (span, way in) in column B, the proofs under the claim, the map across (STANDARD anatomy) */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); padding-bottom: var(--space-5); border-bottom: var(--line) solid var(--rule); }
.name { font-size: var(--size-4); font-weight: var(--weight-strong); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-2); }
h1 { font-size: var(--size-1); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: var(--weight-strong); max-width: var(--measure-claim); text-wrap: balance; }
.lede .range-line { font-size: var(--size-3); line-height: var(--leading-snug); color: var(--ink-2); max-width: var(--measure-lede); text-wrap: pretty; margin-bottom: var(--space-3); }
/* the way in: the components' .go-deeper[data-to="deep"], copied */
.go-deeper { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--control-pad); border: var(--line) solid var(--ink); text-decoration: none; font-size: var(--size-5); font-weight: var(--weight-strong); color: var(--ink); }
.go-deeper[data-to="deep"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.go-deeper[data-to="deep"]:focus-visible { outline-color: var(--ink); }
.go-deeper[data-to="deep"]:active { background: var(--paper-2); color: var(--ink); border-color: var(--ink); transform: translateY(1px); }
/* the proofs: B .proof with the type of the components' .highlight__figure and .highlight__figure small */
.proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-4); }
.proof li { padding: var(--space-2) 0; border-top: var(--line) solid var(--rule); }
.proof__figure { display: block; font-weight: var(--weight-strong); font-size: var(--size-2); line-height: var(--leading-one); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; text-wrap: balance; }
.proof__link { color: inherit; text-decoration: none; display: block; }
.proof__where { display: block; font-size: var(--size-5); font-weight: var(--weight-mid); color: var(--ink-3); margin-top: var(--space-1); line-height: var(--leading-snug); }
/* the map inside the hero: the headline and the source line at --size-4 (STANDARD §9); the list's labels at 14 px (M2-NOTES 24) */
.hero .map { margin-top: var(--space-2); }
.hero .map__title { font-size: var(--size-4); line-height: var(--leading-body); color: var(--ink); margin-bottom: var(--space-2); }
.hero .map figcaption { font-size: var(--size-4); line-height: var(--leading-body); color: var(--ink-3); margin-top: var(--space-3); }
.hero .map__bar::before { transition: background-color var(--dur-ui) var(--ease); }
/* the "now" bar in the accent (hiring lens P0-6): the m2-map component marks the current role .is-now */
.hero .map__bar.is-now::before { background: var(--accent); }
.hero .map__bar.is-now { color: var(--accent-ink); }
.hero .map__bar.is-now.is-short .map__employer { color: var(--ink); }
.hero .map__pin span { transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease), transform var(--dur-press) var(--ease); }
.hero .map__pin:active span { transform: translateY(1px); }
@container map (max-width: 719.98px) {
  .hero .map__bar { grid-template-columns: var(--map-date-col) minmax(0, 1fr) auto; font-size: var(--size-graphic); line-height: var(--leading-snug); }
  .hero .map__years-text, .hero .map__employer, .hero .map__field { font-size: var(--size-graphic); line-height: var(--leading-snug); }
  .hero .map__now { font-size: var(--size-graphic); }
}

/* the five results: tiles 3 over 2 at 1024 px and up (M2-NOTES 29); each tile is one link (M2-NOTES 33) */
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-4); padding-top: var(--space-5); }
.step__link { display: grid; grid-template-columns: var(--step-col) minmax(0, 1fr); column-gap: var(--space-2); align-items: start; border-top: var(--line-strong) solid var(--rule-strong); padding: var(--space-3) 0 var(--space-4); min-height: var(--control-h); text-decoration: none; color: var(--ink); }
.step__n { width: var(--pin); height: var(--pin); border-radius: var(--radius-pin); border: var(--line-strong) solid var(--accent); color: var(--accent); background: var(--paper); font-size: var(--size-6); font-weight: var(--weight-strong); line-height: var(--leading-one); display: flex; align-items: center; justify-content: center; margin-top: var(--space-1); font-variant-numeric: tabular-nums; transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease); }
.step__text { font-size: var(--size-4); line-height: var(--leading-body); font-variant-numeric: tabular-nums; text-wrap: pretty; }
/* the figure that leads each result (hiring lens P0-3); a figure inside the sentence stays in the line */
.step__figure { font-size: var(--size-2); line-height: var(--leading-snug); font-weight: var(--weight-strong); color: var(--accent); font-variant-numeric: tabular-nums; }
.step__figure:first-child { display: block; }
.step__link:focus-visible .step__n { background: var(--accent); color: var(--accent-ink); }
.step__link:active { background: var(--paper-2); transform: translateY(1px); }

/* the pitch: a native video (the captionless rendition, its empty caption band cropped: 1280x628), the poster at rest; ONE caption
   line under the frame (pitch-cc.js, QA-012), outside the native controls, its two-line height reserved so a caption change never
   moves the page; the native track (no default) shows only in the player's own full screen / PiP; the transcript closed under it */
.pitch { padding: var(--space-5) 0; border-top: var(--line) solid var(--rule); margin-top: var(--space-5); }
.pitch video { display: block; width: 100%; max-width: var(--viewer-max); aspect-ratio: 1280 / 628; height: auto; background: var(--paper-2); }
.pitch__cc { box-sizing: border-box; max-width: var(--viewer-max); height: calc(2 * var(--leading-snug) * 1em + 2 * var(--space-2)); margin: 0; padding: var(--space-2) var(--space-3); overflow: hidden; font-size: var(--size-3); line-height: var(--leading-snug); font-weight: var(--weight-mid); color: var(--ink); background: var(--paper-2); }
html:not(.js) .pitch__cc { display: none; } /* no JavaScript: no caption line, so no empty box (the native track menu and the transcript remain) */
.transcript { max-width: var(--viewer-max); margin-top: var(--space-3); }
.transcript summary { display: flex; align-items: center; min-height: var(--control-h); 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); }
.transcript summary:active { background: var(--paper-2); }
.transcript ol { list-style: decimal; padding-left: var(--space-4); color: var(--ink-2); max-width: var(--measure-text); }
.transcript li { padding: var(--space-1) 0; }

/* built with AI (B .built) and the credential */
.built { border-top: var(--line-strong) solid var(--rule-strong); padding: var(--space-4) 0; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2); }
.built h2 { font-size: var(--size-2); font-weight: var(--weight-strong); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); max-width: var(--measure-text); text-wrap: pretty; }
.built p { font-size: var(--size-4); line-height: var(--leading-body); color: var(--ink-2); max-width: var(--measure-text); margin: 0; text-wrap: pretty; }
.built p a { color: var(--ink); }

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

/* widths: two columns from 1024 px (the hero), three over two tiles; one column below */
@media (min-width: 1024px) {
  .hero { grid-template-columns: minmax(0, 1fr) var(--lede-col); grid-template-areas: "name lede" "claim lede" "proofs proofs" "map map"; column-gap: var(--space-6); row-gap: var(--space-3); align-items: start; }
  .name { grid-area: name; margin-bottom: 0; }
  h1 { grid-area: claim; }
  .lede { grid-area: lede; }
  .proof { grid-area: proofs; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero .map { grid-area: map; margin-top: var(--space-3); }
  .steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .steps li { grid-column: span 2; }
  .steps li:nth-child(n + 4) { grid-column: span 3; }
  .built { grid-template-columns: var(--lede-col) minmax(0, 1fr); column-gap: var(--space-6); }
}

/* hiring lens A1: the first screen holds the name and role, the claim, the span, the way in, all three proofs and the map headline at 375 x 812 */
@media (max-width: 767px) {
  .hero { row-gap: var(--space-2); }
  .name { margin-bottom: 0; }
}

/* view transitions (CRAFT §1.5); no scroll-behavior rule: the page's one in-page jump is the skip link, which moves at once (§1.6 is met with nothing outside no-preference) */
@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: bars, numbers and the current mark keep a border */
@media (forced-colors: active) {
  .map__bar::before, .step__n { border: var(--line) solid CanvasText; }
}

/* print: the list map, addresses after links, no video */
@media print {
  .skip, .pitch video, .pitch__cc { display: none; }
  .map { max-width: 719px; }
  main a[href]::after, footer a[href]::after { content: " (unnatpatel.com" attr(href) ")"; font-size: var(--size-6); color: var(--ink-3); }
  .transcript > ol { display: block; }
}

/* lane 91 (owner-ux, jarvis-034): the ways in, the "Start here" tiles, the organisation tiles with their reader, and the map's
   employer links. Tokens only; no new font size, hue, radius or shadow (SELFCHECK). The reader needs orgs.js only for the
   right-side pane, Escape, Back and focus return: without it every tile is a plain <details> that opens in place. */
.doors { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.doors .go-deeper:not([data-to="deep"]) { border-color: var(--rule-strong); }
.doors li:not(:first-child) .go-deeper { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.start { padding-top: var(--space-5); }
.start__title, .orgs h2, .built h2 { font-size: var(--size-2); font-weight: var(--weight-strong); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); margin: 0 0 var(--space-3); text-wrap: pretty; }
.start__tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.tile { display: grid; grid-template-columns: var(--pin) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--space-2); align-content: start; min-height: var(--control-h); padding: var(--space-3); border: var(--line) solid var(--rule-strong); text-decoration: none; color: var(--ink); background: var(--paper); transition: border-color var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease); }
.tile__n { grid-row: 1 / 3; width: var(--pin); height: var(--pin); border-radius: var(--radius-pin); border: var(--line-strong) solid var(--accent); color: var(--accent); font-size: var(--size-6); font-weight: var(--weight-strong); line-height: var(--leading-one); display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.tile__t { font-size: var(--size-4); font-weight: var(--weight-strong); line-height: var(--leading-snug); text-wrap: pretty; }
.tile__m { font-size: var(--size-graphic); color: var(--ink-3); margin-top: var(--space-1); }
.tile:active { background: var(--paper-2); transform: translateY(1px); }
.orgs { padding-top: var(--space-5); margin-top: var(--space-5); border-top: var(--line-strong) solid var(--rule-strong); }
.orgs__lede { font-size: var(--size-4); color: var(--ink-2); max-width: var(--measure-text); margin: 0 0 var(--space-3); text-wrap: pretty; }
.orgs__grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); align-items: start; }
.org { border: var(--line) solid var(--rule-strong); background: var(--paper); }
.org__sum { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2); padding: var(--space-3); min-height: var(--control-h); }
.org__sum::-webkit-details-marker { display: none; }
.org__name { font-size: var(--size-4); font-weight: var(--weight-strong); line-height: var(--leading-snug); }
.org__years { font-size: var(--size-graphic); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.org__line { grid-column: 1 / -1; font-size: var(--size-graphic); line-height: var(--leading-snug); color: var(--ink-2); margin-top: var(--space-1); text-wrap: pretty; }
.org[open] .org__sum, .org__sum:focus-visible { border-bottom: var(--line) solid var(--rule); }
.org[open] { border-color: var(--accent); }
.org__body { padding: var(--space-3); display: grid; row-gap: var(--space-2); }
.org__body:focus { outline: none; }
.org__role { font-size: var(--size-graphic); color: var(--ink-3); margin: 0; }
.org__team { font-size: var(--size-4); font-weight: var(--weight-strong); line-height: var(--leading-snug); margin: var(--space-2) 0 0; }
.org__products { list-style: none; margin: 0; padding: 0; }
.org__products a { display: flex; align-items: center; min-height: var(--control-h); border-top: var(--line) solid var(--rule); color: var(--ink); text-decoration: none; font-size: var(--size-4); line-height: var(--leading-snug); padding: var(--space-1) 0; }
.org__products a::before { content: ""; flex: none; width: var(--space-2); height: var(--space-2); margin-right: var(--space-2); background: var(--accent); }
.org__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.org__close { display: none; min-height: var(--control-h); padding: 0 var(--control-pad); border: var(--line) solid var(--ink); background: var(--paper); color: var(--ink); font: inherit; font-size: var(--size-5); font-weight: var(--weight-strong); cursor: pointer; }
html.js .org__close { display: inline-flex; align-items: center; }
/* with the script, an open tile's body is a reader: a sheet over the page on phone, a pane at the right from 1024 px.
   Item 11 (owner, 2026-10-04 20:09Z; the live site's glass view and smooth movement): the body is opaque and its text sharp;
   its top bar (role + Close) is glass (58% paper over 16 px blur) and stays put as the body scrolls; the page under it is
   dimmed and softened by a scrim (38% ink over 6 px blur) that fades at --dur-scrim; the body slides in from the right (desktop)
   or from the bottom (phone) at --dur-reader with --ease-spring (HR-D2-H25, owner reviewer-128: the live site's .48 s spring), and slides out the same way (orgs.js holds the tile open until the
   slide ends); the pane carries the site's one floating shadow. Only transform and opacity move (CRAFT motion rule 3);
   under reduced motion nothing moves (the rule above) and orgs.js closes at once. Clicking the scrim closes the reader. */
html.js .org[open] .org__body { --rpad: var(--gutter); position: fixed; z-index: 3; top: var(--head-h); right: 0; bottom: 0; left: 0; overflow: auto; overscroll-behavior: contain; padding: 0 var(--rpad) var(--space-5); background: var(--paper); border-top: var(--line-strong) solid var(--accent); align-content: start; box-shadow: var(--shadow-1); transform: translateY(100vh); transform: translateY(100dvh); }
/* the body starts off-screen; orgs.js adds org--in one frame after the tile opens (a details body is not a first render, so
   @starting-style would not fire) and takes it away for the slide out. The offset is a viewport length, not a percentage:
   a percentage resolves against the body's box, which is still zero-sized when the just-opened tile is first styled */
html.js .org[open].org--in:not(.org--closing) .org__body { transform: none; }
/* the transition belongs to the two moving states only: the off-screen base must not animate from the closed tile's none */
html.js .org[open]:is(.org--in, .org--closing) .org__body { transition: transform var(--dur-reader) var(--ease-spring); } /* HR-D2-H25: the live site's spring, in and out */
html.js .org[open] .org__bar { position: sticky; top: 0; z-index: 1; margin: 0 calc(-1 * var(--rpad)) var(--space-3); padding: var(--space-2) var(--rpad); min-height: var(--control-h); background: color-mix(in srgb, var(--paper) 58%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border-bottom: var(--line) solid var(--rule); }
html.js.has-reader { overflow: hidden; }
html.js:is(.has-reader, .reader-closing) body::after { content: ""; position: fixed; z-index: 2; top: var(--head-h); right: 0; bottom: 0; left: 0; background: color-mix(in srgb, var(--ink) 38%, transparent); -webkit-backdrop-filter: blur(6px) saturate(1.2); backdrop-filter: blur(6px) saturate(1.2); opacity: 1; transition: opacity var(--dur-scrim) var(--ease); }
@starting-style { html.js.has-reader body::after { opacity: 0; } }
html.js.reader-closing:not(.has-reader) body::after { opacity: 0; pointer-events: none; } /* the scrim fades while the body slides out */
@media (min-width: 1024px) {
  html.js .org[open] .org__body { --rpad: var(--space-5); --pane-w: min(32rem, 45vw); left: auto; width: var(--pane-w); border-top: 0; border-left: var(--line-strong) solid var(--accent); transform: translateX(calc(var(--pane-w) + var(--space-5))); } /* the pane and its shadow start past the right edge */
  html.js .org[open].org--in:not(.org--closing) .org__body { transform: none; }
  .org[open] .org__sum { border-bottom: 0; }
  .built h2 { grid-row: 1 / 3; }
}
@media (prefers-reduced-transparency: reduce) { html.js .org[open] .org__bar { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; } html.js body::after { -webkit-backdrop-filter: none; backdrop-filter: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html.js .org[open] .org__bar { background: var(--paper); } }
@media (forced-colors: active) { html.js .org[open] .org__bar { background: Canvas; backdrop-filter: none; } html.js body::after { background: none; backdrop-filter: none; } }
/* map: the employer names open their organisation (the bar is the target; the pin keeps its own) */
.map__org { color: inherit; text-decoration: none; }
.map__org::after { content: ""; position: absolute; inset: 0; }
.map__bar { position: relative; }
.map__bar .map__pin { position: relative; z-index: 1; }
.map__org:focus-visible { outline: none; }
.map__bar:has(.map__org:focus-visible) { outline: var(--focus); outline-offset: var(--focus-offset); }
@media (hover: hover) {
  .tile:hover, .org__sum:hover { border-color: var(--accent); }
  .org__products a:hover, .map__org:hover { color: var(--accent); }
  .map__bar:has(.map__org:hover) .map__employer { text-decoration: underline; text-decoration-thickness: var(--line); text-underline-offset: 0.15em; }
  .org__close:hover { background: var(--ink); color: var(--paper); }
}
@media (max-width: 767px) { .start__tiles, .orgs__grid { grid-template-columns: minmax(0, 1fr); } .doors { gap: var(--space-1) var(--space-2); } .doors .go-deeper { padding-inline: var(--space-2); } }
@media (forced-colors: active) { .org__products a::before, .tile__n { forced-color-adjust: none; background: CanvasText; } }

/* orgfig:start — item 13 (owner 2026-10-04 22:09Z, reviewer-130) + item 12 (reviewer-129): the organisation readers carry a
   "Key work" figure in the document-figure language. The hue tokens and the .docfig rules below are copies of m4/flowpanel.css
   (tokens) and m4/docfig.css (rules), unchanged; orgs.cjs renders the figures from orgs.json. Reader-only rules follow. */
:root {
  --fp-gold: #b38200; --fp-gold-on: #14171c; --fp-gold-ink: #7f5600;
  --fp-violet: #894be2; --fp-violet-on: #ffffff; --fp-violet-ink: #7b34c4;
  --fp-cyan: #1395aa; --fp-cyan-on: #14171c; --fp-cyan-ink: #0b6577;
  --fp-process-ink: color-mix(in srgb, var(--process) 55%, var(--ink)); /* --process is marks only; this is its text form */
}
@media (prefers-color-scheme: dark) {
  :root {
    --fp-gold: #a68503; --fp-gold-on: #111318; --fp-gold-ink: #e2b955;
    --fp-violet: #8250b8; --fp-violet-on: #ffffff; --fp-violet-ink: #c3a6f2;
    --fp-cyan: #63d5d8; --fp-cyan-on: #111318; --fp-cyan-ink: #7fd3df;
  }
}
/* 91-docfig (jarvis-033 item 8): figures drawn from a /documents/ section's own words (m4/docfig.cjs). Same six hues and
   discs as the flow panels (flowpanel.css above: --fp-gold/-violet/-cyan and the site --accent/--contrast/--process),
   so the two families read as one. Phone first: steps and flows are one rail; tiles are one column, then two or three
   when the figure is wide enough; the flow's second branch (the control built) sits under the chain with a return
   bracket. Static; every label 14px or more; wires are borders, so forced colours keep them. */
.docfig { margin: var(--space-4, 1.5rem) 0 var(--space-5, 2rem); container-type: inline-size; }
.docfig ol.df { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2, 0.5rem); counter-reset: df; }
.docfig ol.df > li { position: relative; margin: 0; padding: 0; min-width: 0; }
.docfig .df-g { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.docfig [data-hue="gold"] { --h: var(--fp-gold); --h-on: var(--fp-gold-on); --h-ink: var(--fp-gold-ink); }
.docfig [data-hue="violet"] { --h: var(--fp-violet); --h-on: var(--fp-violet-on); --h-ink: var(--fp-violet-ink); }
.docfig [data-hue="cyan"] { --h: var(--fp-cyan); --h-on: var(--fp-cyan-on); --h-ink: var(--fp-cyan-ink); }
.docfig [data-hue="accent"] { --h: var(--accent); --h-on: var(--accent-ink); --h-ink: var(--accent); }
.docfig [data-hue="contrast"] { --h: var(--contrast); --h-on: var(--contrast-ink); --h-ink: var(--contrast); }
.docfig [data-hue="process"] { --h: var(--process); --h-on: var(--process-ink); --h-ink: var(--fp-process-ink); }

/* steps and flow: a disc on a rail, the words beside it; the rail wire runs from one disc to the next */
.docfig ol.df--steps > li, .docfig ol.df--flow > li { --d: 2.75rem; display: grid; grid-template-columns: var(--d) minmax(0, 1fr); column-gap: var(--space-3, 1rem); align-items: start; }
.docfig ol.df--steps > li:not(:last-child), .docfig ol.df--flow > li:not(:last-child) { padding-bottom: var(--space-2, 0.5rem); } /* pilot: a stage with no sub-line keeps a visible wire */
.docfig .df-i {
  grid-column: 1; position: relative; z-index: 1; box-sizing: border-box; width: var(--d); height: var(--d); display: grid; place-items: center;
  border-radius: var(--radius-pin, 50%); border: var(--line-strong, 2px) solid var(--h); background: var(--h); color: var(--h-on);
}
.docfig ol.df > li[data-role="target"] .df-i { background: var(--paper); color: var(--h-ink); }
.docfig ol.df--steps > li:not(:last-child)::before, .docfig ol.df--flow > li:not(:last-child)::before {
  content: ""; position: absolute; left: calc(var(--d) / 2 - var(--line-strong, 2px) / 2); top: var(--d); bottom: calc(-1 * var(--space-2, 0.5rem));
  border-left: var(--line-strong, 2px) solid var(--h);
}
.docfig .df-c { grid-column: 2; min-width: 0; display: grid; gap: 0.125rem; padding: calc(var(--d) / 2 - 0.7em) 0 var(--space-1, 0.25rem); }
.docfig .df-t { font-size: var(--size-4, 1rem); font-weight: var(--weight-strong, 600); line-height: 1.4; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.docfig .df-s { font-size: var(--size-graphic, 0.875rem); line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.docfig ol.df--steps > li { counter-increment: df; }
.docfig ol.df--steps .df-t::before { content: counter(df, decimal-leading-zero) " "; font-weight: 700; color: var(--h-ink); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.docfig .df-fig { font-weight: 800; color: var(--h-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.docfig ol.df > li[data-hero] .df-t { font-size: clamp(1.0625rem, 1rem + 1cqi, 1.25rem); }
.docfig ol.df > li[data-hero] .df-fig { font-size: 1.25em; letter-spacing: -0.01em; }

/* the flow's branch: the control built, bracketed under the chain and joined to it with a dotted return */
.docfig ol.df--branch { margin-top: var(--space-3, 1rem); padding-left: calc(2.75rem + var(--space-3, 1rem)); position: relative; }
.docfig ol.df--branch::before { content: ""; position: absolute; left: calc(1.375rem - 1px); top: calc(-1 * var(--space-3, 1rem)); height: var(--space-3, 1rem); border-left: var(--line-strong, 2px) dotted var(--process); }
.docfig ol.df--branch > li { --d: 2.25rem; }
.docfig ol.df--branch > li::after { content: ""; position: absolute; box-sizing: border-box; left: calc(-1 * var(--space-3, 1rem) - 1.375rem - 1px); top: 0; height: calc(var(--d) / 2 + var(--line-strong, 2px) / 2); width: calc(var(--space-3, 1rem) + 1.375rem + 1px); border-left: var(--line-strong, 2px) dotted var(--process); border-bottom: var(--line-strong, 2px) dotted var(--process); }
.docfig ol.df--branch > li:not(:last-child) .df-c::after { content: ""; position: absolute; left: calc(-1 * var(--space-3, 1rem) - 1.375rem - 1px); top: calc(var(--d) / 2); bottom: calc(-1 * var(--space-2, 0.5rem)); border-left: var(--line-strong, 2px) dotted var(--process); }
.docfig ol.df--branch > li:not(:last-child)::before { border-left-style: dotted; }
.docfig ol.df--branch .df-g { width: 1.125rem; height: 1.125rem; }
.docfig ol.df--branch .df-t { font-weight: var(--weight-strong, 600); font-size: var(--size-graphic, 0.875rem); }
.docfig ol.df--branch .df-c { padding-top: calc(var(--d) / 2 - 0.65em); }

/* tiles: a figure's own words in a card, the figure large, the role icon in the corner */
.docfig ol.df--tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--space-3, 1rem); }
.docfig ol.df--tiles > li {
  container-type: inline-size; display: grid; grid-template-rows: auto 1fr; gap: var(--space-2, 0.5rem); box-sizing: border-box; padding: var(--space-3, 1rem);
  border-top: 0.25rem solid var(--h); background: color-mix(in srgb, var(--h) 8%, var(--paper)); color: var(--h-ink);
}
.docfig ol.df--tiles .df-t { font-size: var(--size-4, 1rem); font-weight: var(--weight-strong, 600); color: var(--ink); align-self: start; } /* pilot: figures align across tiles whatever the label length */
.docfig ol.df--tiles .df-fig, .docfig ol.df--tiles > li[data-hero] .df-fig { display: block; font-size: clamp(1.75rem, 1.25rem + 5cqi, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--space-1, 0.25rem); white-space: normal; } /* mirrors m4/docfig.css: a qualified figure may break before the number at 320 px */
.docfig ol.df--tiles > li[data-hero] { border-top-width: 0.375rem; }
.docfig ol.df--tiles > li[data-hero] .df-t { font-size: var(--size-4, 1rem); } /* pilot: the tile's words stay in step with the other tiles; the figure carries the hero */
.docfig ol.df--tiles > li[data-hero] .df-fig { font-size: clamp(2rem, 1.5rem + 5cqi, 3rem); }

/* wide: steps and flow stages side by side when all of them fit; the branch keeps its own row */
@container (min-width: 44rem) {
  .docfig--steps ol.df--steps, .docfig--flow ol.df--flow:not(.df--branch) { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-3, 1rem); }
  .docfig--steps ol.df--steps > li, .docfig--flow ol.df--flow:not(.df--branch) > li { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2, 0.5rem); }
  .docfig--steps ol.df--steps > li .df-i, .docfig--flow ol.df--flow:not(.df--branch) > li .df-i { grid-column: 1; }
  .docfig--steps ol.df--steps > li .df-c, .docfig--flow ol.df--flow:not(.df--branch) > li .df-c { grid-column: 1; padding-top: 0; }
  .docfig--steps ol.df--steps > li:not(:last-child)::before, .docfig--flow ol.df--flow:not(.df--branch) > li:not(:last-child)::before {
    left: var(--d); top: calc(var(--d) / 2 - var(--line-strong, 2px) / 2); bottom: auto; right: calc(-1 * var(--space-3, 1rem)); border-left: 0; border-top: var(--line-strong, 2px) solid var(--h);
  }
  .docfig ol.df--branch { padding-left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4, 1.5rem); }
  .docfig ol.df--branch::before { left: calc(1.375rem - 1px); bottom: auto; height: var(--space-3, 1rem); }
  .docfig ol.df--branch > li::after, .docfig ol.df--branch > li .df-c::after { content: none; }
  .docfig--steps ol.df--steps > li:not(:last-child), .docfig--flow ol.df--flow:not(.df--branch) > li:not(:last-child) { padding-bottom: 0; }
  .docfig ol.df--branch > li:not(:last-child)::before { content: none; }
}
@media (forced-colors: active) {
  .docfig .df-i { border-color: CanvasText; background: Canvas; color: CanvasText; }
  .docfig ol.df--tiles > li, .docfig ol.df--tiles > li[data-hero] { border: 1px solid CanvasText; border-top-width: 0.25rem; }
}
/* the aside (reviewer-125 V02): one sentence the section keeps apart from the sequence, under the rail and outside the
   numbering, marked by a dotted rule on the rail's axis so it reads as "beside", not "next" */
.docfig .df-aside { position: relative; margin: var(--space-2, 0.5rem) 0 0; padding: 0 0 0 calc(2.75rem + var(--space-3, 1rem)); font-size: var(--size-graphic, 0.875rem); line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.docfig .df-aside::before { content: ""; position: absolute; left: calc(1.375rem - 1px); top: 0.15em; bottom: 0.15em; border-left: var(--line-strong, 2px) dotted var(--process); opacity: 0.7; }

/* the reader's own parts: the Close pill (the live site's .v2-close: filled ink, round ends, in the glass bar), the key-work
   kicker, the figure inside the pane, the disclosure that holds the links and the résumé bullets */
.org__close { border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); border-color: var(--ink); gap: var(--space-1); }
.org__x { font-size: var(--size-4); line-height: 1; }
.org__kicker { margin: 0 0 var(--space-2); font-size: var(--size-graphic); font-weight: var(--weight-strong); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.org__fig { margin: var(--space-2) 0 0; }
.org__fig ol.df--tiles { grid-template-columns: minmax(0, 1fr); } /* one figure per tile; one column on the phone sheet, three across in the desktop pane */
@container (min-width: 24rem) { .org__fig ol.df--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .org__fig ol.df--tiles > li[data-hero] { grid-column: 1 / -1; order: -1; } } /* the hero tile leads, full width; the other two share the row */
/* home keeps CRAFT's seven sizes, three hues and the 4 px grid (mock-extra), so inside the reader the document figure's own clamps,
   2 px gaps and em paddings give way to tokens, and its gold/violet/cyan roles map onto the site's three hues */
.org__fig .df-fig, .org__fig ol.df--tiles .df-fig, .org__fig ol.df--tiles > li[data-hero] .df-fig { font-size: var(--size-2); }
.org__fig ol.df > li[data-hero] .df-t { font-size: var(--size-4); }
.org__fig .df-c { gap: var(--space-1); padding-top: var(--space-2); }
.org__fig [data-hue="gold"] { --h: var(--contrast); --h-on: var(--contrast-ink); --h-ink: var(--contrast); }
.org__fig [data-hue="violet"] { --h: var(--accent); --h-on: var(--accent-ink); --h-ink: var(--accent); }
.org__fig [data-hue="cyan"] { --h: var(--process); --h-on: var(--process-ink); --h-ink: var(--fp-process-ink); }
.org__keylink { color: inherit; text-decoration: underline; text-decoration-thickness: var(--line); text-underline-offset: 0.15em; text-decoration-color: var(--h); }
.org__more { border-top: var(--line) solid var(--rule); margin-top: var(--space-2); }
.org__moresum { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--control-h); font-size: var(--size-4); font-weight: var(--weight-strong); color: var(--ink); }
.org__moresum::-webkit-details-marker { display: none; }
.org__moresum::after { content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-right: var(--space-1); border-right: var(--line-strong) solid var(--accent); border-bottom: var(--line-strong) solid var(--accent); transform: rotate(45deg); transition: transform var(--dur-ui) var(--ease); }
.org__more[open] > .org__moresum::after { transform: rotate(225deg); }
.org__moresum:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
.org__resume { margin: var(--space-2) 0 0; padding: 0 0 0 var(--space-3); color: var(--ink-2); font-size: var(--size-graphic); line-height: var(--leading-body); }
.org__resume li { margin: 0 0 var(--space-1); }
.org__resume li::marker { color: var(--accent); }
@media (hover: hover) { .org__close:hover { background: var(--paper); color: var(--ink); } .org__moresum:hover { color: var(--accent); } .org__keylink:hover { color: var(--accent); } }
@media (prefers-reduced-motion: reduce) { .org__moresum::after { transition: none; } }
@media (forced-colors: active) { .org__close { border: var(--line) solid ButtonText; } .org__moresum::after { border-color: CanvasText; } }
/* orgfig:end */

/* 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); }
/* QA-016 (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) 58%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  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) 58%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  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; }
.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(.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, .end, .next-step, .site-foot nav { display: none; } }
/* nav:end */