/* CHIP SUPPLY CHAIN design system (the redesign of 25 Oct 2026, qa/redesign/BRIEF.md)
   Ground: white. Ink: a warm near-black, with two secondary inks. Paper (#f4f4f2) is a tint only, for the chokepoint card,
   figure frames, source strips and flashcards.
   Accent: red wine, #7a1f2b on white and #d98a95 on dark. It marks links, the reader's place (the current menu item, the
   current item in a contents list), the logo tile, and two signals in the data (the visual pass of 27 Oct 2026, as the
   live site has them): Extreme, wherever a stage's band is shown (its mark, and its word on the home list), and the
   largest value on every chart, its bar and its value ("garnet on the largest only", the owner's chart rule of 21 Oct).
   Suppliers' Critical rating is wine too. High stays ink or gray, and the other bars the light tint.
   Type (the hybrid, chosen 28 Oct 2026, MAIN/qa/design9/BUILD-SYSTEM.md): Fraunces for the display, at optical size 48 with
   SOFT and WONK at 0 (the name at 28), and Source Serif 4 for the text, its optical size following the size. Fraunces draws
   the name, page and chapter titles, section heads, card ratings and large numbers (400 for titles and section heads, 500
   for small headings); Source Serif 4 the standfirsts, text, review questions, captions, lists and notes. The serif keeps
   to seven steps (--t-title to --t-note, below; design round nine, revision 1). Hanken Grotesk for menus, buttons, tabs,
   fields and every label, and since the visual pass of 27 Oct 2026 for the kickers too, in the live site's small spaced
   capitals (--font-kicker, --fs-label, --tr-label, --tt-label), and for dates, counts, bar values and axis numbers on
   tabular figures, in four steps (--ui to --mark). Fragment Mono only for figure numbers ("Figure 11.2"), codes and the
   address inside Cite. Source Serif 4 set both display and text from 27 to 28 Oct 2026; before that the display face was
   Fraunces and the text face Literata. No text under 11 px. */
:root {
  --bg: #fcfcfa; /* a barely off-white, to take the glare off long reading (owner, 27 Oct); print stays white */
  --bg-2: #f4f4f2;   /* paper: a tint, never the ground */
  --bg-3: #e4e3df;
  --ink: #171716;
  --ink-2: #45443f;
  --muted: #6b6a64;  /* the label gray, 5.3:1 on the ground, 4.9:1 on paper: ink, secondary ink and label in three even steps
                        (design round nine, revision 5, 28 Oct 2026; #56554f before) */
  --line: #e1e0db;
  --line-2: #c4c3bd;
  --rule-ink: #8c8a84; /* a rule that must be seen: the foot of a field row, the footer's top */
  --control-edge: #8c8a84; /* the edge of a field, a select, a chip or a checkbox, 3.5:1 on white (WCAG 1.4.11) */
  --accent: #7a1f2b;
  --accent-ink: #7a1f2b; /* 10.2:1 on white */
  --accent-soft: #f3e3e5;
  --accent-fill: var(--accent);
  --ctx: #d2d1cc; /* the chart rule: the values that are not the largest (the largest is wine) */
  --c1: #2b63c4; --c2: #e06a1f; --c3: #1f9a6d; --c4: #c9a10c; --c5: #5a48b8; --c6: #c3302b; --c7: #2e7d1e; --c8: #8a9099;
  /* night: the specimen ground of the two chapters that are not stages (the economics chapter and the essay) */
  --night: #121211; --night-ink: #e8e7e3; --night-ink2: #a9a7a1; --night-rule: #34332f; --night-accent: #d98a95;
  --stage-ink: 23, 23, 22;
  --stage-accent: 122, 31, 43;
  --shadow: 0 0 0 1px rgba(23, 23, 22, 0.06), 0 18px 30px -18px rgba(23, 23, 22, 0.35); /* floating popovers only */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif; /* the hybrid (28 Oct 2026): Fraunces for display only */
  --font-body: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-ui: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: var(--font-ui); /* the interface-label slot, kept under its old name so every module reads it */
  --font-code: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* figure numbers, codes, the address in Cite */
  --font-kicker: var(--font-ui); /* kickers and labels, in small spaced capitals (the visual pass of 27 Oct 2026; Fragment Mono before) */
  --fs-label: 11.5px; --tr-label: 0.08em; --tt-label: uppercase; /* the live site's label: 11 to 12 px capitals, tracked, in the muted ink */
  --font-caption: var(--font-body);
  /* Fraunces at a fixed optical size, SOFT and WONK at 0, as before 27 Oct 2026 */
  --opsz-title: "opsz" 48, "SOFT" 0, "WONK" 0;
  --opsz-numeral: "opsz" 48, "SOFT" 0, "WONK" 0;
  --opsz-name: "opsz" 28, "SOFT" 0, "WONK" 0; /* the name in the masthead */
  /* the text scale: Source Serif 4 reads at 20 px where Literata read at 18.5 px (the same x-height, about 9.5 px), so every
     size set in the text face is its old size times this ratio, here and in each module. One edit here moves them all;
     --measure follows it, so the text column stays 666 px, the width of the figures */
  --text-scale: calc(18 / 18.5); /* 20 / 18.5 until 27 Oct, when the owner found the text too large throughout (18.5 px body in Source Serif 4); 18 / 18.5 from 28 Oct, the owner asking for it slightly smaller again: an 18 px body */
  --band: 0px; /* height of the sticky specimen band on phones; anchors add it to their offset */
  --measure: calc(36em / var(--text-scale)); /* 33.3 em: 666 px of the 20 px chapter text, about 71 characters */
  --frame: 650px;   /* chapter header and chokepoint card keep their earlier width */
  --bar-5: var(--accent); --bar-4: #8c8a84; --bar-3: #c4c3bd; /* bands as marks: Extreme wine, High mid gray, below that a tint */
  --col: 63%;
  --margin: clamp(16px, 4.45vw, 64px); /* the page's outer margin, the masthead's and the column's */
  --gutter: 88px;     /* the ledger column */
  --gutter-gap: 28px;
  --masthead: 64px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --scrim: rgba(23, 23, 22, 0.30); /* the ground under a modal (search); darker in dark mode, never lighter */
  /* the type and spacing scale. Labels are sentence case (the tracking tokens stay for the rules that read them). Kept off the
     scale on purpose: the masthead, body and input sizes, chart and board labels fitted to their geometry, em-sized
     footnote marks, and the few rules the PDF inherits (print.css sets no size of its own) */
  /* interface labels: Hanken Grotesk */
  --fs-cap-s: 11px;  --tr-cap-s: 0.01em; /* dense labels: stage numbers and tiles, country codes, card keys */
  --fs-cap: 12px;    --tr-cap: 0.01em;   /* the label: meta lines, buttons, sub-tabs, summaries */
  --fs-ui-s: 12.5px;                     /* footer, sources, hints, counts */
  --fs-ui: 14px;                         /* tabs, named chips, Read the chapter */
  /* the type scale (design round nine, revision 1, 28 Oct 2026): seven steps of the serif in place of twenty sizes, each
     about 15 percent or more from its neighbor, and four of Hanken Grotesk (--ui, --ui-s, --fs-label, --fs-cap-s). Every
     serif rule names a step. Fraunces sets the display steps (title, section, block) and, at 500, the small heads at the
     lead step; Source Serif 4 the text steps (lead, text, small, note). --text-scale stays the one knob: --tk is 1 at its
     value today (18 / 18.5), and the text steps move with it. The large numbers keep their own sizes (--fs-num-*) */
  --tk: calc(var(--text-scale) * 18.5 / 18);
  --t-title: clamp(48px, 5.8vw, 84px);   /* every page title but the home's one-line title */
  --t-section: clamp(28px, 2.4vw, 34px); /* section heads, In plain terms, the next chapter's title */
  --t-block: 26px;                       /* Flashcards, Sources, the flashcard question, the card's ratings and price */
  --t-lead: calc(21px * var(--tk));      /* standfirsts, In plain terms' text; figure titles and h4 in Fraunces at 500 */
  --t-text: calc(18px * var(--tk));      /* body, In short, the flashcard answer, animation steps, Previous */
  --t-small: calc(15.5px * var(--tk));   /* captions, figure subtitles, card rows, tables, the flashcard reason */
  --t-note: calc(13.5px * var(--tk));    /* card explanations, the specimen caption, source lists */
  --ui: 15px; --ui-s: 13px;              /* Hanken: menus, buttons and the rail's contents / the rail's chain, chips, strips */
  /* the reading tokens before the scale, kept as names of its steps; --fs-plain only for The Chain's contents page */
  --fs-note: var(--t-note); --fs-small: var(--t-small); --fs-plain: calc(17px * var(--text-scale)); --fs-body: var(--t-text); --fs-lede: var(--t-lead);
  /* display */
  --fs-d6: 16.5px; --fs-d5: 19px; --fs-d4: 21px; --fs-d3: 24px; --fs-d2: 28px;
  --fs-d1s: clamp(26px, 2.3vw, 32px);    /* walk step titles */
  --fs-d1: clamp(40px, 4.6vw, 66px);     /* every page title */
  --fs-num-s: 30px; --fs-num-m: 54px; --fs-num-l: 72px;
  /* block rhythm: the gaps between sections (inner paddings stay their own) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #121211; --bg-2: #1c1c1a; --bg-3: #272725;
  --ink: #e8e7e3; --ink-2: #c6c4be; --muted: #8f8d87; /* muted 5.7:1 on the ground, 5.1:1 on the tint (#a9a7a1 before revision 5) */
  --line: #2c2b28; --line-2: #45443f; --rule-ink: #75736d; --control-edge: #75736d; /* 3.9:1 on the dark ground */
  --accent: #d98a95; --accent-ink: #d98a95; --accent-soft: rgba(217, 138, 149, 0.16); /* wine for text on dark, 7.2:1 */
  --accent-fill: #a8414b;
  --ctx: #45443f;
  --c1: #5b8ee6; --c2: #ef8140; --c3: #34b585; --c4: #d9b21e; --c5: #8676d8; --c6: #e0504a; --c7: #4f9c3a; --c8: #8a9099;
  --stage-ink: 232, 231, 227; --stage-accent: 217, 138, 149;
  --shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 18px 30px -18px rgba(0, 0, 0, 0.6);
  --bar-5: var(--accent); --bar-4: #8c8a84; --bar-3: #45443f; /* Extreme the wine for dark, 7.2:1 on the ground; High mid gray */
  --scrim: rgba(6, 6, 5, 0.72);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* a control reached by Tab scrolls clear of the fixed masthead, the walk's rail under it and the phone strip (WCAG 2.4.11).
   The padding holds while the reader moves by Tab (html.kb, set in src/app.js Keys): links and jumps already land clear of
   the masthead through scroll-margin-top, and the two would add up */
html.kb { scroll-padding-top: calc(var(--masthead) + 12px); }
html.kb:has(.view[data-view="walk"]:not([hidden]) .wk-rail[data-show="1"]:not([hidden])) { scroll-padding-top: calc(var(--masthead) + 58px); }
@media (max-width: 900px) {
  html.kb { scroll-padding-bottom: calc(var(--strip-h, 64px) + 12px); } /* the strip's own height (src/app.js Band) */
  html.kb:has(.stage[data-collapsed="0"]) { scroll-padding-bottom: calc(min(58vh, 480px) + 12px); }
  html.kb:has(.stage[data-hidden="1"]) { scroll-padding-bottom: 60px; }
}
@media (prefers-reduced-motion: reduce) { .stage { transition: none; } html { scroll-behavior: auto; } }
/* a phone's page titles: one size for the chapters and the views, as large as the width allows */
@media (max-width: 900px) { :root { --t-title: min(68px, 15vw); } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration-color: var(--rule-ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--accent); }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
img, svg, canvas { max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, .vt { margin: 0; text-wrap: balance; } /* .vt: a view's title on the home page, a level-one heading that is not a second h1 (src/template.html) */
p, li, dd { text-wrap: pretty; }
p { margin: 0 0 1.15em; }
strong { font-weight: 600; }
small { font-size: 0.85em; }
[hidden] { display: none !important; }
.sr-only { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -10000px; top: 8px; z-index: 100; padding: 8px 14px; background: var(--ink); color: var(--bg); font-family: var(--font-ui); font-size: 14px; font-weight: 500; text-decoration: none; border-radius: 999px; }
.skip:focus { left: 8px; }
#main:focus { outline: none; } /* the skip link lands on the whole column, which draws no ring: the next Tab shows where focus is */

/* ---------- labels: a kicker in Hanken Grotesk, small spaced capitals in the muted ink (the live site's, 27 Oct 2026) ---------- */
.label { font-family: var(--font-kicker); font-size: var(--fs-label); line-height: 1.4; font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); color: var(--muted); }
.num, .tabular { font-variant-numeric: tabular-nums; }

/* ---------- display type: Source Serif 4, its optical size following the size, never bold ---------- */
.wk-title, .ch-title, .view-head h1, .view-head h2, .view-head .vt, .aic .vt, .thesis, .contents h2, .chapter .prose h2, .chapter .prose h3, .wk-t, .wk-end-t,
.brief-head .t, .gl-entry dt, .timeline h4, .sources-list h3, .prevnext .pn .t, .fig-title,
.ct-tip b, .gl-tip b, .cp-search-results b, .sheet-head b, .wk-pn-t, .ex-rank .name, .ex-panel figcaption b, .ex-tip b {
  font-family: var(--font-display); font-weight: 500; font-variation-settings: var(--opsz-title); letter-spacing: 0;
}

/* ---------- links and buttons: the two the redesign draws everywhere ----------
   .link: a way on, in Hanken over an ink rule that turns wine; .btn: a pill, solid ink or a ghost edge */
.link { font-family: var(--font-ui); font-weight: 500; font-size: 15px; line-height: 1.2; color: var(--ink); text-decoration: none; display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 0 5px; border-bottom: 1px solid var(--ink); }
.link:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* ---------- masthead: the wordmark, the menu with the current item marked, search and the theme ---------- */
.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--masthead);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--margin);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
/* the wordmark: the favicon's tile (build/assets/icons/favicon.svg, inline) beside the name in Source Serif 4 at 540.
   The tile keeps the favicon's own wine in both themes, so it matches the tab icon; the link's aria-label carries the name */
.wordmark { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
.wordmark .wm-tile { display: block; flex: none; width: 27px; height: 27px; }
.wordmark .wm-tile rect { fill: #7a1f2b; }
.wordmark .wm-tile path { fill: #ffffff; }
.wordmark .wm-name { font-family: var(--font-display); font-size: 20px; font-weight: 540; font-variation-settings: var(--opsz-name); letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
@media (max-width: 900px) {
  .wordmark { flex: 1 1 auto; min-width: 0; min-height: 30px; gap: 10px; padding-right: 92px; }
  .wordmark .wm-tile { width: 25px; height: 25px; }
  .wordmark .wm-name { font-size: 18px; }
}
@media (max-width: 900px) { .tabs a:focus-visible { outline-offset: -3px; } } /* the strip scrolls and is as tall as its tabs, so an outside ring loses its top and bottom */
.tabs { display: flex; gap: 4px; align-items: center; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  font-family: var(--font-ui); font-weight: 400; font-size: 15px; letter-spacing: 0;
  text-decoration: none; padding: 8px 10px 7px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--ink); white-space: nowrap; flex: 0 0 auto;
}
.tabs a:hover { color: var(--ink-2); border-bottom-color: var(--line-2); }
.tabs a[aria-current="page"] { background: none; color: var(--ink); border-bottom-color: var(--accent); }
/* the two icon buttons, round, on a hairline edge (search is .search-btn, below) */
.theme-toggle { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--line-2); border-radius: 50%; display: inline-grid; place-items: center; margin-left: 8px; color: var(--ink); transition: border-color 0.15s, color 0.15s; }
.theme-toggle svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; }
@media (hover: hover) { .search-btn:hover, .theme-toggle:hover { border-color: var(--ink); color: var(--ink); } } /* a tap on a phone leaves no mark behind */
/* from 901 px the tabs fill the bar's height, so the current item's wine rule lies on the masthead's own hairline */
@media (min-width: 901px) {
  .masthead { align-items: stretch; }
  .wordmark { align-self: center; }
  .tabs { align-self: stretch; align-items: stretch; overflow: visible; gap: 6px; }
  .tabs a { display: flex; align-items: center; padding: 0 9px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .tabs a:focus-visible { outline-offset: -6px; } /* the tab is the bar's full height, so its focus ring draws inside it */
  .tabs .search-btn, .tabs .theme-toggle { align-self: center; }
  .tabs .search-btn { margin-left: 14px; }
  .tabs .theme-toggle { margin-left: 8px; }
}

/* ---------- page grid ---------- */
#app { position: relative; z-index: 1; padding-top: var(--masthead); }
.column { width: var(--col); padding: 0 clamp(16px, 4vw, 56px) 0 var(--margin); }
.column.wide { width: min(100%, 1180px); }
.column.wide[data-view="suppliers"], .column.wide[data-view="controls"], .column.wide[data-view="glossary"] { width: 100%; }
.view { min-height: 60vh; }

/* ---------- stage (the specimen): the canvas, then a plain caption flush left, a mono label and the chapter's own words ---------- */
.stage {
  position: fixed; top: var(--masthead); right: 0; bottom: 0; width: calc(100% - var(--col)); margin: 0; /* the UA gives figure a 40px margin, which pushed the stage under the rail */
  z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
  padding-top: clamp(8px, 3vh, 32px);
}
/* the canvas is as tall as it is wide, so the drawing fills it and the caption sits right under the drawing; on a short window
   it gives up height first (flex-shrink), and the caption keeps its place under it */
.stage .stage-thumb { display: none; } /* the phone's collapsed strip only (below) */
.stage canvas { order: 1; position: relative; flex: 0 1 auto; aspect-ratio: 1 / 1; min-height: 120px; width: 100%; align-self: stretch; display: block; margin-top: 0; }
@media (hover: hover) and (pointer: fine) { .stage canvas { pointer-events: auto; cursor: grab; touch-action: none; outline: none; } /* the figure itself lets clicks through to the page; the canvas takes them so it can be turned */ .stage canvas.is-dragging { cursor: grabbing; } .stage canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); } }
.stage .stage-tag {
  order: 2; position: relative; z-index: 1; margin: 0 var(--margin) 6px clamp(16px, 2.2vw, 32px); padding: 14px 0 0; text-align: left;
  font-family: var(--font-kicker); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); line-height: 16px; color: var(--muted);
}
.stage .stage-tag b { color: inherit; font-weight: inherit; }
/* the tag's phone words (src/app.js Sections.specTag): a laptop names the chapter; the phone's strip names the specimen and
   says what a tap opens (page revision 2, 28 Oct 2026, below at 900 px) */
.stage .stage-tag .tag-sp, .stage .stage-tag .tag-tap, .stage .stage-read { display: none; }
.stage figcaption {
  order: 3; position: relative; z-index: 1; flex: none; margin: 0 var(--margin) 32px clamp(16px, 2.2vw, 32px); max-width: 34em; text-align: left;
  font-family: var(--font-caption); font-size: var(--t-note); line-height: 1.5; letter-spacing: 0; color: var(--ink-2);
  padding: 0;
}
.stage figcaption b { color: var(--ink); font-weight: 500; }
/* on the home page, beside the hero, the specimen's label and description are centered under the drawing, the description
   set as the rail's links are, in Hanken Grotesk (owner, 27 Oct). The phone's strip keeps its own small, left-set caption. */
@media (min-width: 901px) {
  /* the label spans the stage as the description does, and the pause button sits outside its centre: padding on the left as
     wide as the button and its gap keeps "Specimen 01" itself on the same centre line as the text under it */
  html[data-view="walk"] .stage .stage-tag { align-self: stretch; margin-left: var(--margin); margin-right: var(--margin); text-align: center; }
  html[data-view="walk"] .stage .stage-tag:has(.stage-pause) { padding-left: 36px; }
  html[data-view="walk"] .stage figcaption { margin-left: var(--margin); margin-right: var(--margin); max-width: none; align-self: center; text-align: center; text-wrap: balance;
    font-family: var(--font-ui); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
}
.stage[data-hidden="1"] { display: none; }
/* the turn's pause (WCAG 2.2.2, src/app.js Band.init): a small round button at the end of the specimen label on a laptop,
   over the thumbnail's corner on a phone. Reduced motion never turns the specimen, so it has no button */
.stage .stage-pause { pointer-events: auto; display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -6px 0 -6px 12px; padding: 0; vertical-align: middle; border: 1px solid var(--line-2); border-radius: 50%; background: var(--bg); color: var(--ink-2); letter-spacing: 0; }
.stage .stage-pause svg { width: 10px; height: 10px; fill: currentColor; stroke: none; }
.stage .stage-pause:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 900px) {
  .stage .stage-pause { position: absolute; left: 9px; bottom: 9px; z-index: 2; margin: 0; width: 28px; height: 28px; }
  .stage .stage-pause::before { content: ""; position: absolute; inset: -8px; } /* a 44 px target round the 28 px button */
  .stage[data-collapsed="0"] .stage-pause { bottom: auto; top: 50px; left: 12px; }
}

/* ---------- contents ---------- */
.contents { padding: 36px 0 20px; border-top: 1px solid var(--line); margin-top: 40px; }
.contents h2 { font-size: 26px; margin-bottom: 20px; }
.contents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 0 36px; }
.contents-k { font-family: var(--font-mono); font-size: var(--fs-cap); font-weight: 500; letter-spacing: 0; color: var(--muted); margin: 0 0 16px; }
.contents-grid + .contents-k { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); }
.contents-note { font-size: var(--fs-small); color: var(--ink-2); max-width: 62ch; margin: -6px 0 18px; }
/* each entry: the number in the margin, the title, and under it the chapter's one-line summary */
.contents-grid .item { break-inside: avoid; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-content: start; padding: 14px 0 16px; border-top: 1px solid var(--line); }
.contents-grid .n { grid-row: 1 / span 2; padding-top: 6px; font-family: var(--font-mono); font-size: var(--fs-cap); font-weight: 500; color: var(--muted); letter-spacing: var(--tr-cap); font-variant-numeric: tabular-nums; }
.contents-grid .t { display: block; font-family: var(--font-display); font-weight: 500; font-variation-settings: var(--opsz-title); font-size: var(--fs-d5); line-height: 1.2; letter-spacing: 0; text-transform: none; margin: 0 0 5px; text-decoration: none; }
.contents-grid .t:hover { color: var(--accent); }
.contents-grid .ol { grid-column: 2; margin: 0; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); }

/* ---------- prose ----------
   A chapter's sections are h2 and its subsections h3 (29 Oct 2026, build/build.js markdown(); they were h3 and h4), so the
   rules for them name the chapter. The prose is a chapter's alone, so nothing else on the site moves. */
.prose { max-width: var(--measure); }
.view[data-view="geopolitics"] { --measure: calc(40em / var(--text-scale)); } /* the essay reads a little wider than the chapters */
.chapter .prose h2 { font-size: var(--t-section); line-height: 1.15; margin: 2em 0 0.65em; max-width: var(--measure); scroll-margin-top: calc(var(--masthead) + var(--band, 0px) + 16px); }
.chapter .prose h3 { font-size: var(--t-lead); line-height: 1.25; margin: 1.7em 0 0.5em; max-width: var(--measure); scroll-margin-top: calc(var(--masthead) + var(--band, 0px) + 16px); }
.prose > p, .prose > ul, .prose > ol, .prose blockquote { max-width: var(--measure); }
.chapter .prose h4 { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap); letter-spacing: 0; color: var(--muted); margin: 1.6em 0 0.5em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.15em; }
.prose li { margin-bottom: 0.45em; }
.prose li::marker { color: var(--muted); }
.prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 1px solid var(--accent); color: var(--ink-2); font-style: italic; }
.prose code { font-family: var(--font-code); font-size: 0.82em; background: var(--bg-2); padding: 1px 5px; border-radius: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }
.prose .takeaways { margin: 2.4em 0 1em; padding: 16px 0 8px; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line-2); background: none; border-radius: 0; }
.chapter .prose .takeaways h2 { margin: 0 0 0.6em; font-size: var(--fs-cap); font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; color: var(--muted); }
.prose .takeaways p { font-size: var(--t-text); }
sup.cite { font-size: max(11px, 0.62em); line-height: 0; vertical-align: 0.55em; margin-left: 1px; } /* no space before it (inline() in build.js): the mark sits on its word */
sup.cite a { position: relative; font-family: var(--font-mono); font-weight: 500; color: var(--muted); text-decoration: none; padding: 0 1px; border-radius: 0; } /* the ::before box below keeps the 24 px target */
/* the footnote number in the label gray, wine on hover and focus: wine is kept for the signal (design round nine, revision 2) */
sup.cite a:hover, sup.cite a:focus-visible { color: var(--accent-ink); background: var(--accent-soft); text-decoration: none; }
/* small controls keep their look but take a fingertip: an invisible box at least 24 px square, centered on the control */
sup.cite a::before, .ch-copy::before, .permalink::before, .fc-more::before, .gl-tip a::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 24px); height: max(100%, 26px); transform: translate(-50%, -50%);
}
.ch-copy, .permalink, .fc-more, .gl-tip a { position: relative; }
/* on a touch screen the boxes grow to a fingertip's 32 by 36 px, the footnote numbers most of all (28 Oct 2026) */
@media (pointer: coarse) { sup.cite a::before, .gl-tip a::before { width: max(100%, 32px); height: max(100%, 36px); } }
/* link targets land clear of the fixed masthead, whose real height app.js measures into --masthead */
.figure[id], h2[id], h3[id], h4[id], h5[id], .timeline li[id], .lk-entry { scroll-margin-top: calc(var(--masthead) + var(--band, 0px) + 16px); }
.ct-tip { position: fixed; z-index: 50; width: max-content; max-width: min(360px, calc(100vw - 16px)); background: var(--bg); border: 1px solid var(--line-2); border-radius: 0; box-shadow: var(--shadow); padding: 12px 15px 13px; }
.ct-tip .tier { float: right; margin: 1px 0 0 10px; }
.ct-tip b { display: block; font-size: var(--t-text); line-height: 1.25; margin-bottom: 5px; }
.ct-tip p { font-family: var(--font-mono); font-size: var(--fs-ui-s); letter-spacing: 0.01em; line-height: 1.45; color: var(--muted); margin: 0 0 9px; }
.ct-tip a { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap); letter-spacing: 0; color: var(--accent); text-decoration: none; }
.ct-tip a:hover { text-decoration: underline; }
.ct-tip.is-sheet { left: 10px; right: 10px; top: auto; width: auto; max-width: none; }

/* tables */
.table-wrap { overflow-x: auto; margin: 1.3em 0 1.6em; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line-2); border-radius: 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); line-height: 1.4; font-variant-numeric: tabular-nums; }
.prose th, .prose td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: 0; color: var(--muted); background: none; font-weight: 500; }
.prose tr:last-child td { border-bottom: 0; }
.prose td:first-child { font-weight: 500; }
.prose th .gl-term { text-transform: inherit; letter-spacing: inherit; } /* a glossary term in a column head reads as the head does */
/* a figure column (class "n", set by the table renderer in build.js): right-aligned so magnitudes line up, on tabular digits */
.prose td.n, .prose th.n { text-align: right; white-space: nowrap; padding-left: 18px; padding-right: 0; font-variant-numeric: tabular-nums lining-nums; }
.prose th:not(.n):last-child, .prose td:not(.n):last-child { padding-right: 0; }
@media (max-width: 480px) { .prose td.n, .prose th.n { white-space: normal; } } /* a phone lets a long range wrap at its dash so the table fits its box */
.prose td.n + td:not(.n), .prose th.n + th:not(.n) { padding-left: 18px; } /* a text column after a figure column keeps a gap: the figure is flush right, so "100.0%" ran into "revenue, 2025" (final QA B9) */
/* a phone (28 Oct 2026): a table in the note step, so a long name ("Blackwell") fits its column, and a soft shadow at an edge
   while more of the table lies past it, so a table wider than the screen says it scrolls */
@media screen and (max-width: 480px) {
  .prose table { font-size: var(--t-note); }
  .prose th, .prose td, .prose td.n:not(:last-child), .prose th.n:not(:last-child) { padding-right: 10px; }
  .table-wrap {
    --sh: color-mix(in srgb, var(--ink) 16%, transparent);
    background: linear-gradient(to right, var(--bg) 40%, transparent) left / 28px 100% no-repeat local,
      linear-gradient(to left, var(--bg) 40%, transparent) right / 28px 100% no-repeat local,
      linear-gradient(to right, var(--sh), transparent) left / 12px 100% no-repeat scroll,
      linear-gradient(to left, var(--sh), transparent) right / 12px 100% no-repeat scroll;
  }
}

/* figures */
.figure { margin: 1.6em 0 2em; padding: 16px 0 12px; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line-2); border-radius: 0; background: none; }
.figure .fig-title { font-size: var(--t-text); margin: 0 0 12px; line-height: 1.3; }
.figure .fig-title .unit { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap-s); color: var(--muted); letter-spacing: 0; margin-left: 8px; }
.figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.figure .fig-source { margin: 10px 0 0; font-family: var(--font-mono); font-size: var(--fs-ui-s); color: var(--muted); letter-spacing: 0.01em; }
.figure .fig-source a { color: var(--muted); }
/* bar charts (figure() in build.js): HTML rows, each label whole. From 641 px the label sits beside its bar in a column as wide as
   the longest label (--lw, at most 45 percent); below that it takes its own line above the bar. A chart is one series, so its
   bars are the light tint and the largest wine (.hb.top), its value in wine. --vw keeps room past the longest bar for its value. */
.hbars { display: grid; gap: 9px; margin: 2px 0 4px; font-family: var(--font-mono); font-size: 12.5px; }
.hb { display: grid; gap: 4px; }
.hb-l { line-height: 1.3; color: var(--ink-2); }
.hb-r { display: flex; align-items: center; gap: 8px; padding-right: var(--vw, 3.6em); }
.hb-r i { display: block; flex: none; height: 12px; background: var(--ctx); }
.hb-r b { flex: none; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; margin-right: calc(-1 * var(--vw, 3.6em)); }
.hb.top .hb-r i { background: var(--accent); } /* the chart rule: the largest value in wine with a bold wine value, the rest in the light tint */
.hb.top .hb-r b { color: var(--accent-ink); font-weight: 700; }
@media (min-width: 641px) { .hbars { gap: 7px; } .hb { grid-template-columns: min(var(--lw, 14em), 45%) minmax(0, 1fr); align-items: center; column-gap: 12px; } .hb-l { text-align: right; } }
.stack-bar { display: flex; height: 26px; gap: 2px; border-radius: 0; overflow: hidden; }
.stack-bar i { display: block; height: 100%; min-width: 2px; }
.stack-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); }
.stack-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 0; margin-right: 7px; vertical-align: -1px; background: var(--sw); }
.stack-legend b { font-weight: 500; color: var(--ink); margin-left: 4px; white-space: nowrap; }
/* stacked bars, the owner's middle way (decision 4): data-k, set by figure() in build.js, names each segment's color. The
   largest share is garnet ("lead", its legend figure in garnet ink); the rest take the five chart hues in data order ("1" to
   "5"), any past five a light tail, and a remainder ("rest") a hatch with a hairline edge. The country stacks keep each
   country's own color ("c1" to "c7", the Suppliers page's), and a region or remainder there turns neutral ("n1", "n2"). */
:root { --stk-1: #2b63c4; --stk-2: #1f9a6d; --stk-3: #c9a10c; --stk-4: #5a48b8; --stk-5: #e06a1f; --stk-tail: #c9c6bf; --stk-edge: #a9a49b; --stk-n1: #8a9099; --stk-n2: #b4b9be; }
:root[data-theme="dark"] { --stk-1: #4f86dc; --stk-2: #2a9670; --stk-3: #ad8f14; --stk-4: #7f6fd4; --stk-5: #c96a2a; --stk-tail: #4b5159; --stk-edge: #6d747c; }
.stack-bar i, .stack-legend span { --sw: var(--stk-tail); }
.stack-bar i { background: var(--sw); }
.stack-bar [data-k="lead"], .stack-legend [data-k="lead"] { --sw: var(--ink); }
.stack-bar [data-k="1"], .stack-legend [data-k="1"] { --sw: var(--stk-1); }
.stack-bar [data-k="2"], .stack-legend [data-k="2"] { --sw: var(--stk-2); }
.stack-bar [data-k="3"], .stack-legend [data-k="3"] { --sw: var(--stk-3); }
.stack-bar [data-k="4"], .stack-legend [data-k="4"] { --sw: var(--stk-4); }
.stack-bar [data-k="5"], .stack-legend [data-k="5"] { --sw: var(--stk-5); }
.stack-bar [data-k="c1"], .stack-legend [data-k="c1"] { --sw: var(--c1); }
.stack-bar [data-k="c2"], .stack-legend [data-k="c2"] { --sw: var(--c2); }
.stack-bar [data-k="c3"], .stack-legend [data-k="c3"] { --sw: var(--c3); }
.stack-bar [data-k="c4"], .stack-legend [data-k="c4"] { --sw: var(--c4); }
.stack-bar [data-k="c5"], .stack-legend [data-k="c5"] { --sw: var(--c5); }
.stack-bar [data-k="c6"], .stack-legend [data-k="c6"] { --sw: var(--c6); }
.stack-bar [data-k="c7"], .stack-legend [data-k="c7"] { --sw: var(--c7); }
.stack-bar [data-k="n1"], .stack-legend [data-k="n1"] { --sw: var(--stk-n1); }
.stack-bar [data-k="n2"], .stack-legend [data-k="n2"] { --sw: var(--stk-n2); }
.stack-bar i[data-k="rest"], .stack-legend span[data-k="rest"]::before { background: repeating-linear-gradient(135deg, var(--stk-edge) 0 1px, transparent 1px 4px); box-shadow: inset 0 0 0 1px var(--stk-edge); }
.stack-legend span[data-k="lead"] b { color: var(--ink); font-weight: 700; }
.tl { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-2); }
.tl li { position: relative; padding: 0 0 12px 18px; font-size: var(--fs-small); line-height: 1.4; }
.tl li::before { content: ""; position: absolute; left: -4px; top: 8px; width: 7px; height: 7px; border-radius: 0; background: var(--ink); }
.tl li .d { font-family: var(--font-ui); font-size: 12px; color: var(--muted); letter-spacing: 0.02em; display: block; font-variant-numeric: tabular-nums; }
.prose .tl { padding-left: 0; margin-left: 4px; } /* .prose ol would indent the list 1.3em and leave the marks off the rule */
.prose .tl li { margin-bottom: 0; }

/* glossary terms in the prose: a dotted rule under the word, lighter than a link's solid one, so "define this" reads apart
   from "go there"; solid garnet on hover and while its popover is open; one shared popover */
.nw { white-space: nowrap; } /* a figure range, or a glossary term with the punctuation after it (build.js glossaryWrap) */
/* the term itself may still wrap within its own box: "National Integrated Circuit Industry Investment Fund," on one line ran
   past a phone's width and scrolled the geopolitics essay sideways (453 px at 390) */
.nw > .gl-term { white-space: normal; }
.gl-term { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; text-align: inherit; cursor: help; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: color-mix(in srgb, var(--muted) 75%, var(--bg)); text-decoration-thickness: 1.5px; text-underline-offset: 0.24em; transition: text-decoration-color 0.15s; }
.gl-term:hover, .gl-term[aria-describedby] { text-decoration-style: solid; text-decoration-color: var(--accent); }
.site-footer .sources-key { margin: 12px 0 0; font-family: var(--font-ui); font-size: 13px; letter-spacing: 0; line-height: 1.7; color: var(--muted); max-width: 90ch; }
.site-footer .updated { display: block; margin-top: 10px; font-family: var(--font-kicker); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); color: var(--muted); }
.gl-tip { position: fixed; z-index: 50; width: max-content; max-width: min(340px, calc(100vw - 16px)); background: var(--bg); border: 1px solid var(--line-2); border-top: 2px solid var(--ink); border-radius: 0; box-shadow: var(--shadow); padding: 12px 16px 13px; }
.gl-tip b { display: block; font-size: var(--t-text); line-height: 1.2; margin-bottom: 6px; }
.gl-tip p { font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); margin: 0 0 10px; }
.gl-tip a { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap); letter-spacing: 0; color: var(--accent); text-decoration: none; }
.gl-tip a:hover { text-decoration: underline; }
.gl-tip .gl-tip-test { color: var(--ink); border-top: 1px solid var(--line); padding-top: 8px; }
.gl-tip .gl-tip-test .label { display: block; margin-bottom: 3px; color: var(--muted); }

/* previous / next, at the foot of every chapter */
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 2.8em 0 0; }
.prevnext .pn { display: block; text-decoration: none; color: var(--ink); background: none; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; padding: 12px 0 14px; min-width: 0; }
.prevnext .pn:hover { border-top-color: var(--ink); background: none; }
.prevnext .pn .label { display: block; margin-bottom: 6px; }
.prevnext .pn .t { display: block; font-size: 18px; line-height: 1.15; overflow-wrap: anywhere; }
.prevnext .pn .n { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-ui-s); color: var(--muted); margin-right: 7px; font-variant-numeric: tabular-nums; }
.prevnext .next { grid-column: 2; text-align: right; }
/* the sources close the text, under an ink rule, before Previous and Next turn the page; the sign sits at the line's far end */
.chapter-sources { margin: 2.8em 0 0; padding-top: 0; border-top: 1px solid var(--ink); max-width: var(--measure); }
.chapter-sources summary { cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap); letter-spacing: 0; color: var(--ink); list-style: none; padding: 13px 0 12px; margin: 0; }
.chapter-sources summary::-webkit-details-marker { display: none; }
.chapter-sources summary::after { content: "+"; font-size: 16px; line-height: 1; color: var(--muted); }
.chapter-sources[open] summary::after { content: "\2212"; }
.chapter-sources ol { margin: 12px 0 0; padding-left: 2.2em; font-size: var(--fs-note); line-height: 1.5; color: var(--ink-2); columns: 1; }
.chapter-sources summary:hover::after { color: var(--accent); }
/* the key to the tier marks, at the head of the list (build/build.js SOURCE_KEY) */
.chapter-sources .src-key { margin: 4px 0 14px; font-family: var(--font-ui); font-size: 13px; line-height: 1.6; color: var(--ink-2); max-width: none; }
.chapter-sources .src-key-k { margin-right: 8px; font-family: var(--font-kicker); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); color: var(--muted); }
.chapter-sources .src-key .tier { margin: 0 5px 0 6px; }
.chapter-sources li:target { background: var(--accent-soft); } /* a source the address names */
.chapter-sources li { margin-bottom: 7px; overflow-wrap: anywhere; padding-left: 27px; text-indent: -27px; } /* a title that wraps hangs clear of its tier mark */
.chapter-sources li .tier { text-indent: 0; margin-right: 9px; }
.chapter-sources li .src-meta { text-indent: 0; }
.chapter-sources + .prevnext { margin-top: 2.2em; }
.chapter-sources li a { color: var(--ink-2); }
.chapter-sources li .host { font-family: var(--font-mono); font-size: var(--fs-ui-s); color: var(--muted); margin-left: 6px; }

/* Back to top sits in the bottom corner: links and jumps land controls near the top of the window (Copy table, the board's Now), never at its foot */
.to-top { position: fixed; right: 24px; bottom: 20px; z-index: 35; font-family: var(--font-ui); font-weight: 500; font-size: 13px; letter-spacing: 0; color: var(--ink-2); border: 1px solid var(--rule-ink); background: var(--bg); padding: 7px 14px; border-radius: 999px; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s; }
.to-top[data-show="1"] { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity 0.3s; } /* hidden, it leaves the Tab order too */
/* where the specimen fills the right of the window (The Chain, Home), its caption holds the foot, so the button keeps the empty top corner */
@media (min-width: 901px) { body:has(.stage[data-hidden="0"]) .to-top { top: calc(var(--masthead) + 14px); bottom: auto; } }
.to-top:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- landscape ---------- */
.view-head { padding: clamp(36px, 7vh, 72px) 0 18px; }
.view-head h1, .view-head h2, .view-head .vt { font-weight: 400; font-size: var(--t-title); line-height: 1; text-transform: none; letter-spacing: -0.015em; margin-bottom: 14px; }
.view-head .dek { font-size: var(--fs-lede); line-height: 1.45; color: var(--ink-2); max-width: 30em; }
.picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; }
/* the picker: hairline chips, the maker's country as a code at the right edge, no tints */
.picker button { position: relative; border: 1px solid var(--line-2); border-radius: 0; padding: 8px 40px 8px 11px; text-align: left; background: none; min-width: 128px; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.picker button:hover { border-color: var(--ink); }
.picker button[data-cc]::after { content: attr(data-cc); position: absolute; right: 9px; top: 9px; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap-s); letter-spacing: var(--tr-cap-s); color: var(--muted); }
.picker button[aria-pressed="true"]::after { color: var(--bg); opacity: 0.7; }
.picker .vrow { flex-basis: 100%; display: flex; gap: 8px 14px; align-items: flex-start; }
.picker .vname { flex: 0 0 112px; padding-top: 9px; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap-s); letter-spacing: 0; color: var(--ink-2); }
.picker .vchips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; }
.picker button[aria-pressed="true"], .picker button[data-cc][aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (max-width: 699px) { .picker .vrow { flex-direction: column; gap: 6px; } .picker .vname { flex-basis: auto; padding-top: 4px; } } /* flex-basis: auto, or the 112 px basis becomes a 112 px gap in the column */
.picker button b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-ui); line-height: 1.2; }
.picker button span { display: block; font-family: var(--font-mono); font-size: var(--fs-cap-s); letter-spacing: 0; opacity: 0.75; margin-top: 3px; }
.picker .group { flex-basis: 100%; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap); letter-spacing: 0; color: var(--muted); margin: 10px 0 -2px; padding-top: 10px; border-top: 1px solid var(--line); }
.picker .group:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* ---------- suppliers ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 20px 0 14px; }
.filters input, .filters select { font: inherit; font-family: var(--font-mono); font-size: 13px; padding: 8px 10px; border: 1px solid var(--control-edge); border-radius: 0; background: var(--bg); color: var(--ink); min-width: 180px; }
.filters input::placeholder { color: var(--muted); }
/* the selects drop the browser's rounded arrow for a hairline chevron, square like the inputs beside them */
.filters select {
  -webkit-appearance: none; appearance: none; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.filters input:focus-visible, .filters select:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.chips button { font-family: var(--font-ui); font-weight: 400; font-size: 13.5px; line-height: 1; letter-spacing: 0; padding: 8px 12px; min-height: 32px; border: 1px solid var(--control-edge); border-radius: 999px; background: none; color: var(--ink); }
.chips button:hover { border-color: var(--ink); }
.chips button b { font-family: var(--font-ui); font-weight: 400; font-size: 11.5px; color: var(--muted); margin-left: 6px; font-variant-numeric: tabular-nums; }
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chips button[aria-pressed="true"] b { color: var(--bg); opacity: 0.7; }
.sup-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-weight: 500; font-size: 14px; line-height: 1.2; letter-spacing: 0; text-transform: none; padding: 9px 16px; min-height: 38px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--bg); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule-ink); }
.btn:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--bg); }
.btn.ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.sup-wrap { overflow-x: auto; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line-2); border-radius: 0; margin-bottom: 40px; }
.sup { border-collapse: collapse; width: 100%; font-size: var(--fs-note); line-height: 1.4; }
.sup th { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap); letter-spacing: 0; color: var(--muted); background: var(--bg); text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-2); white-space: nowrap; position: sticky; top: 0; }
.sup th button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.sup th[aria-sort="ascending"] button::after { content: " \25B2"; color: var(--accent); }
.sup th[aria-sort="descending"] button::after { content: " \25BC"; color: var(--accent); }
.sup td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.sup td.name b { font-weight: 600; display: block; }
.sup td.name span { font-family: var(--font-mono); font-size: var(--fs-ui-s); color: var(--muted); }
.sup td.role { min-width: 380px; max-width: 640px; color: var(--ink-2); font-size: var(--fs-note); }
.sup td .cc { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; }
.chk { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap-s); letter-spacing: 0; padding: 2px 7px; border-radius: 0; border: 1px solid var(--line-2); white-space: nowrap; }
.chk.Critical { border-color: var(--accent); color: var(--accent); background: none; }
.chk.Important { color: var(--ink-2); }
.chk.Contested { border-style: dashed; color: var(--ink-2); }
.chk.Diversified { color: var(--muted); }
.sup tr:hover td { background: var(--bg-2); }
.count { font-family: var(--font-mono); font-size: var(--fs-ui-s); color: var(--muted); letter-spacing: 0.01em; }

/* ---------- geopolitics ---------- */
.matrix-wrap { overflow-x: auto; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line-2); border-radius: 0; margin: 18px 0 8px; }
.matrix { border-collapse: collapse; width: 100%; font-size: var(--fs-note); font-variant-numeric: tabular-nums; }
.matrix th { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap); letter-spacing: 0; color: var(--muted); padding: 10px 8px; border-bottom: 1px solid var(--line-2); background: none; text-align: center; }
.matrix th:first-child { text-align: left; }
.matrix td { padding: 0; border-bottom: 1px solid var(--line); text-align: center; }
.matrix td:first-child { text-align: left; padding: 8px 10px 8px 0; font-weight: 500; font-size: var(--fs-note); white-space: nowrap; max-width: 260px; }
#exposure-table td:first-child { white-space: normal; min-width: 200px; width: 28%; }
/* the China revenue table shades in ink (AA on every cell, both themes) and marks each firm's highest year in garnet, as its panel does */
#exposure-table td .cell { background: color-mix(in srgb, var(--ink) calc(var(--v) * 0.3%), transparent); }
#exposure-table td .cell.is-peak { color: var(--accent-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent-fill); }
:root[data-theme="dark"] #exposure-table td .cell.is-peak { color: var(--ink); } /* dark: the red figure fell to 3.0:1 on its heat cell, so the peak keeps its weight and garnet rule in ink */
.matrix td:first-child small { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--muted); font-weight: 400; letter-spacing: 0.04em; }
.matrix td .cell { display: block; padding: 9px 6px; color: var(--ink); background: color-mix(in srgb, var(--ctx) calc(min(var(--v), 60) * 1.66%), transparent); } /* a light tint that deepens with the share; never the accent */
.matrix td .cell[data-hi="1"] { font-weight: 700; }
.matrix td .cell.zero { color: var(--muted); }
.matrix-note { font-family: var(--font-mono); font-size: var(--fs-ui-s); color: var(--muted); margin: 8px 0 30px; line-height: 1.5; }
.timeline { list-style: none; margin: 18px 0 40px; padding: 0; }
.timeline li { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.timeline .d { font-family: var(--font-ui); font-size: 12px; color: var(--muted); letter-spacing: 0.01em; padding-top: 3px; font-variant-numeric: tabular-nums; }
.timeline .d b { display: block; color: var(--ink); font-weight: 500; }
.timeline h4 { font-size: var(--t-text); margin-bottom: 4px; }
.timeline p { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); margin: 0 0 6px; }
.timeline .cat { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap); letter-spacing: 0; color: var(--ink-2); } /* the US category in ink, as on Suppliers; garnet stays for what must be seen */
/* the five kinds of move are words, never colors: no hue marks a country (redesign, rule B) */
.timeline .cat.cn, .timeline .cat.ally, .timeline .cat.policy, .timeline .cat.corp { color: var(--ink-2); }
.timeline .src { font-family: var(--font-mono); font-size: var(--fs-ui-s); color: var(--muted); }
.year-label { font-family: var(--font-display); font-weight: 360; font-variation-settings: var(--opsz-numeral); font-size: 40px; color: var(--muted); line-height: 1; margin: 28px 0 0; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
.tl-filters { margin: 14px 0 6px; }

/* ---------- briefing ---------- */
.briefing { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; margin-bottom: 50px; }
.brief-card { border: 0; border-top: 1px solid var(--ink); border-radius: 0; background: none; padding: 16px 0 14px; display: flex; flex-direction: column; gap: 10px; }
.brief-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.brief-head .n { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap); color: var(--muted); letter-spacing: var(--tr-cap); }
.brief-head .t { font-weight: 400; font-size: 24px; text-decoration: none; line-height: 1.05; }
.brief-head .t:hover { color: var(--accent); }
.brief-meta { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--fs-ui-s); color: var(--muted); }
.brief-meta .pips { display: inline-flex; gap: 3px; }
.brief-meta .pips i { width: 9px; height: 9px; border: 1.5px solid var(--ink); border-radius: 0; display: inline-block; }
.brief-meta .pips i.on { background: var(--ink); border-color: var(--ink); }
.brief-meta .conc { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap); letter-spacing: 0; color: var(--ink-2); }
.brief-meta .conc.Extreme { color: var(--ink); }
.brief-lede { font-family: var(--font-body); font-size: var(--t-text); line-height: 1.45; color: var(--ink); margin: 0 0 4px; }
.brief-short p { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); margin: 0 0 0.6em; }
.brief-leaders { font-size: var(--t-note); color: var(--ink-2); margin: 0; padding-top: 8px; border-top: 1px solid var(--line); }
.brief-leaders .label { margin-right: 6px; }
.brief-leaders .chip { margin-left: 2px; }

/* ---------- glossary ---------- */
.glossary { margin: 10px 0 50px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 0 40px; } /* min() keeps the column inside the page on a 320 px phone */
.gl-entry { display: grid; grid-template-columns: 1fr; padding: 14px 0; border-top: 1px solid var(--line); break-inside: avoid; scroll-margin-top: calc(var(--masthead) + var(--band, 0px) + 14px); } /* #gl-<term> links land clear of the masthead */
.gl-entry dt { font-size: var(--t-text); margin-bottom: 4px; }
.gl-entry dt .aka { display: block; font-family: var(--font-mono); font-size: var(--fs-ui-s); letter-spacing: 0.01em; color: var(--muted); font-weight: 400; margin-top: 2px; }
.gl-entry dd { margin: 0; }
.gl-entry dd p { font-size: var(--fs-small); line-height: 1.5; margin: 0 0 4px; }
.gl-entry dd p.why { color: var(--ink-2); font-size: var(--fs-note); }
.gl-link { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap); letter-spacing: 0; color: var(--accent); text-decoration: none; }
@media (max-width: 900px) { .briefing { grid-template-columns: 1fr; } }

/* ---------- source tiers ---------- */
.tier { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-cap-s); font-weight: 500; letter-spacing: 0.06em; width: 18px; height: 18px; line-height: 16px; text-align: center; border: 1px solid var(--line-2); border-radius: 0; margin-right: 8px; color: var(--ink-2); vertical-align: 1px; }
.tier-A { border-color: var(--ink); color: var(--ink); }
.tier-B { border-color: var(--line-2); }
.tier-C { border-style: dashed; color: var(--muted); }
.tier-D, .tier-\? { border-color: var(--c6); color: var(--c6); }
.tier-key { font-family: var(--font-mono); font-size: var(--fs-cap); color: var(--muted); margin: 6px 0 10px; }

/* ---------- controls view ---------- */
.matrix td .cell { text-decoration: none; }
.matrix td a.cell:hover { outline: 1px solid var(--accent); }
.controls-intro { max-width: 66ch; color: var(--ink-2); font-size: var(--t-text); }

/* ---------- research tools ---------- */
.search-btn { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--line-2); border-radius: 50%; display: inline-grid; place-items: center; margin-left: 8px; color: var(--ink); transition: border-color 0.15s, color 0.15s; }
.search-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; }
#cp-search { position: fixed; inset: 0; z-index: 100; background: var(--scrim); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 0; }
.cp-search-panel { width: min(680px, 100%); background: var(--bg); border: 1px solid var(--ink); border-radius: 6px; box-shadow: var(--shadow); overflow: hidden; }
.cp-search-panel input { width: 100%; font: inherit; font-family: var(--font-ui); font-size: 17px; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line); background: var(--bg); color: var(--ink); outline: none; }
.cp-search-panel input:focus-visible { box-shadow: inset 0 -2px 0 var(--accent); } /* the box draws no ring, so focus shows as a garnet rule along its foot */
.cp-search-panel input::placeholder { color: var(--muted); }
@media (max-width: 359px) { .cp-search-panel input::placeholder { font-size: 13px; } } /* typed text stays 17 px, so iOS does not zoom */
.cp-search-panel input::-webkit-search-cancel-button { filter: grayscale(1); opacity: 0.7; cursor: pointer; } /* the browser's clear button, in the site's grays */ /* the browser's gray fell to 3.9:1 in dark; muted is 5.6:1 and 6.3:1 */
.cp-search-results { list-style: none; margin: 0; padding: 0; max-height: 56vh; overflow: auto; }
.cp-search-results li a { display: grid; grid-template-columns: 110px 1fr; gap: 2px 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); text-decoration: none; }
.cp-search-results li a:hover, .cp-search-results li a:focus { background: var(--bg-2); }
.cp-search-results .k { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap); letter-spacing: 0; color: var(--muted); grid-row: span 2; padding-top: 3px; }
.cp-search-results b { font-size: var(--t-text); line-height: 1.25; }
.cp-search-results .t { font-size: var(--fs-note); color: var(--ink-2); line-height: 1.4; }
.cp-search-results .none { padding: 14px 16px; color: var(--muted); }
.cp-search-hint { margin: 0; padding: 8px 16px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.02em; }
/* the box carries a magnifier, drawn in --muted (the data URI cannot read a token, so dark mode repeats it in its own gray) */
.cp-search-panel input { padding-left: 44px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c636d' stroke-width='1.5'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px 50% / 18px 18px; }
:root[data-theme="dark"] .cp-search-panel input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23939aa3' stroke-width='1.5'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); }
/* Enter opens the first result, so the first result is marked: a garnet edge, and on a keyboard device the Enter glyph.
   A "Nothing matches" note can sit above it, so "first" is the first link. Once the reader moves into the list, the mark
   gives way to the focused row. */
.cp-search-results li:first-child a, .cp-search-results li.none:first-child + li a { background: var(--bg-2); box-shadow: inset 2px 0 0 var(--accent); }
.cp-search-results:has(a:focus) li a:not(:focus) { box-shadow: none; }
.cp-search-results:has(a:focus) li a:not(:focus):not(:hover) { background: none; }
@media (hover: hover) {
  .cp-search-results:not(:has(a:focus)) li:first-child a b::after, .cp-search-results:not(:has(a:focus)) li.none:first-child + li a b::after { content: "\00a0\00a0\21B5" / ""; font-family: var(--font-mono); font-size: var(--fs-ui-s); font-weight: 400; color: var(--muted); }
}
/* an empty search suggests what to type (src/app.js Tools.tryNames); the row hides once the reader types */
.cp-search-try { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; padding: 12px 16px 13px; border-bottom: 1px solid var(--line); }
.cp-search-try button { font-family: var(--font-body); font-size: var(--fs-small); color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; padding: 3px 0; }
.cp-search-try button:hover { text-decoration-color: var(--accent); color: var(--accent); }
/* a phone: the panel starts at the top, where the keyboard leaves room, and each result takes the full width */
@media (max-width: 640px) {
  #cp-search { padding: 8px 8px 0; }
  .cp-search-panel input { font-size: 16px; } /* 16 px stops iOS zooming in on focus */
  .cp-search-results { max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); }
  .cp-search-results li a { grid-template-columns: 1fr; gap: 3px; padding: 11px 14px 12px; }
  .cp-search-results .k { grid-row: auto; padding-top: 0; font-size: var(--fs-cap-s); }
  .cp-search-results .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
.permalink { margin-left: 8px; font-family: var(--font-mono); font-size: 0.65em; color: var(--muted); text-decoration: none; opacity: 0; transition: opacity 0.15s; }
.chapter h2:hover .permalink, .chapter h3:hover .permalink, .permalink:focus, .permalink[data-done] { opacity: 1; } /* the permalinks are a chapter's sections' and subsections' (src/app.js) */
.permalink[data-done] { color: var(--accent); }
.export-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 12px; }
.export-bar .count { margin-right: auto; }
.export-bar--quiet { justify-content: flex-end; }
/* the quiet line at the foot of what it copies: "Copy the board · Table · JSON" (addExport in src/app.js) */
.export-bar.xq { display: flex; align-items: baseline; gap: 2px 8px; margin: 14px 0 0; justify-content: flex-start; font-family: var(--font-mono); font-size: var(--fs-ui-s); letter-spacing: 0.01em; color: var(--muted); }
.export-bar.xq .btn.ghost { border: 0; background: none; padding: 4px 0; min-height: 24px; font-size: var(--fs-cap); letter-spacing: var(--tr-cap); color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.export-bar.xq .btn.ghost:hover { color: var(--ink); text-decoration-color: var(--accent); }
.export-bar.xq .xq-s { color: var(--line-2); }
.tl-bar .export-bar.xq { margin: 0 0 0 auto; flex: 0 0 auto; align-self: center; }
@media (max-width: 899px) { .tl-bar .export-bar.xq { margin: 0; width: 100%; } }
.cite { margin-top: 14px; }
.cite summary { cursor: pointer; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap); letter-spacing: 0; color: var(--ink-2); padding: 4px 0; margin: -4px 0; }
.cite pre { margin: 10px 0 0; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; font-family: var(--font-code); font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; overflow-x: auto; color: var(--ink); }

/* ---------- sources view ---------- */
.sources-list h3 { font-size: 21px; margin: 28px 0 10px; }
.sources-list ol { padding-left: 2.2em; font-size: var(--t-note); line-height: 1.5; color: var(--ink-2); }
.sources-list li { margin-bottom: 6px; overflow-wrap: anywhere; }
/* publisher and date, after the title of a reference */
.src-meta { display: block; font-family: var(--font-mono); font-size: 11px; line-height: 1.4; color: var(--muted); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--rule-ink); margin-top: 72px; padding: 32px 0 64px; font-family: var(--font-ui); font-size: 14px; line-height: 1.6; color: var(--muted); }
.site-footer a { color: var(--ink); text-underline-offset: 3px; }
.site-footer a:hover { color: var(--accent-ink); }
.site-footer .credits { margin: 0 0 4px; font-size: 15px; line-height: 1.5; color: var(--ink); max-width: 36em; }
.site-footer .credits b { font-weight: 500; }
/* on the two ledger pages (the walk and The Chain) the footer is the ledger's last row: the favicon's tile (build.js puts the
   masthead's own tile first in the footer) signs off in the ledger column and the words keep to the text's edge. A phone's
   chapters drop the column, so there The Chain's footer stays flush with the text; the walk keeps its 34 px column. Screen
   only: the PDF sets its own footer (print.css). Elsewhere the tile stays hidden. */
.site-footer .ft-mark { display: none; }
.ft-mark .wm-tile { display: block; width: 22px; height: 22px; }
.ft-mark .wm-tile rect { fill: #7a1f2b; } /* the favicon's own wine and white in both themes, as in the masthead */
.ft-mark .wm-tile path { fill: #ffffff; }
@media screen {
  .view[data-view="walk"] .site-footer { display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr); column-gap: var(--gutter-gap); align-items: start; }
  .view[data-view="walk"] .site-footer > * { grid-column: 2; min-width: 0; }
  .view[data-view="walk"] .site-footer > .ft-mark { display: block; grid-column: 1; grid-row: 1 / span 3; justify-self: end; margin: 1px 14px 0 0; }
}
@media screen and (max-width: 900px) {
  .ft-mark .wm-tile { width: 18px; height: 18px; }
  .view[data-view="walk"] .site-footer > .ft-mark { margin-right: 8px; }
}


/* ---------- hero: a thesis, three claims, the chain scored ---------- */
.hero { padding: clamp(26px, 5vh, 56px) 0 clamp(24px, 3.6vh, 42px); }
.hero .eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(20px, 3.4vh, 34px); }
.hero .eyebrow i { display: block; width: 26px; height: 1px; background: var(--ink); flex: 0 0 auto; }
.hero .eyebrow .sep { color: var(--line-2); }
.thesis { font-weight: 400; font-size: clamp(34px, 3.55vw, 50px); line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; max-width: 13.4em; margin: 0 0 clamp(16px, 2.4vh, 26px); }
.thesis .q { color: var(--ink); font-variant-numeric: tabular-nums; }
.hero .dek { font-size: var(--t-text); line-height: 1.55; color: var(--ink-2); max-width: 24em; margin: 0 0 clamp(20px, 3vh, 30px); }
.claims { display: flex; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.claims div { flex: 1; padding: 12px 16px 13px; border-right: 1px solid var(--line); min-width: 0; }
.claims div:first-child { padding-left: 0; }
.claims div:last-child { border-right: 0; }
.claims b { display: block; font-family: var(--font-display); font-weight: 400; font-variation-settings: normal; font-size: 30px; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.claims .of-five b { color: var(--ink); }
.claims span { display: block; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap-s); line-height: 1.45; letter-spacing: 0; color: var(--muted); margin-top: 7px; }
.hero .credits { font-family: var(--font-mono); font-size: var(--fs-ui-s); line-height: 1.75; color: var(--muted); max-width: 58ch; margin: clamp(18px, 2.6vh, 26px) 0 0; }
.hero .credits a, .hero .credits b { color: var(--ink-2); font-weight: 500; }
.scroll-hint { display: inline-flex; gap: 10px; align-items: center; margin-top: 26px; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap); letter-spacing: 0; color: var(--muted); }
.scroll-hint svg { width: 14px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.4; animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .scroll-hint svg { animation: none; } }

/* ---------- sub-tabs inside a view (Controls: what the rules did / China revenue share) ---------- */
/* sub-tabs (Export Controls): Hanken words over a hairline, the current one on a 2 px wine rule, the reader's place */
.subtabs { display: flex; gap: 28px; margin: 40px 0 0; border-bottom: 1px solid var(--line-2); }
.subtabs a { font-family: var(--font-ui); font-weight: 400; font-size: 17px; line-height: 1; letter-spacing: 0; color: var(--ink-2); text-decoration: none; padding: 12px 0 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subtabs a:hover { color: var(--ink); }
.subtabs a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--accent); }
@media (max-width: 760px) { .subtabs { gap: 22px; margin-top: 28px; } .subtabs a { font-size: 16px; } }
@media (min-width: 901px) and (max-width: 1100px) { .tabs a { padding: 0 6px; font-size: 14px; } .tabs { gap: 2px; } } /* the phone strip (900 px and below) sets its own size */

.stage .stage-actions, .sheet { display: none; }

.made { font-family: var(--font-mono); font-size: var(--fs-ui-s); letter-spacing: 0.01em; color: var(--muted); margin: 40px 0 20px; max-width: var(--measure); }

.hero--home { padding-bottom: 12px; }
.column.wide[data-view="home"] { width: 100%; }

.print-only { display: none; }
.howto > p { max-width: none; }
.howto .howto-dl { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.howto { max-width: none; margin: 0; padding: clamp(36px, 7vh, 72px) 0 6px; border: 0; border-radius: 0; background: none; } /* opens as AI Chips and Suppliers do: room under the masthead, no second rule; the contents block draws the rule below */
.howto h1.howto-title, .howto h2.howto-title { font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--opsz-title); font-size: var(--fs-d1); line-height: 1; letter-spacing: -0.015em; text-transform: none; color: var(--ink); margin: 0 0 14px; }
.howto .howto-lede { font-size: var(--fs-lede); line-height: 1.45; color: var(--ink-2); max-width: 30em; margin: 0 0 26px; }
@media (max-width: 640px) { .howto .howto-lede { font-size: var(--fs-plain); } }
.howto p { font-size: var(--fs-plain); line-height: 1.5; }

/* ---------- China exposure charts ---------- */
.ex-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap-s); letter-spacing: 0; color: var(--muted); margin: 14px 0 6px; }
.ex-legend i { display: inline-block; vertical-align: middle; margin-right: 7px; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; }
/* the context bars recede to a mid gray, so the peak year differs from them in lightness as well as hue (3.0:1 against the
   garnet in light; dark already separates, 3.5:1 against the wine) */
.ex-legend, .ex-panel { --ex-bar: var(--ctx); } /* the chart rule: each firm's peak year in wine, the other years in the light tint */
.ex-legend .lg-bar { width: 10px; height: 12px; border-radius: 0; background: var(--ex-bar); }
.ex-legend .lg-top { width: 10px; height: 12px; border-radius: 0; background: var(--accent); }
.ex-legend .lg-rule { width: 1px; height: 12px; border-radius: 0; border-left: 1px solid var(--ink); background: none; opacity: 0.4; }
.ex-cat { grid-column: 1 / -1; margin: 18px 0 0; padding-bottom: 6px; border-bottom: 1px solid var(--ink); font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap); letter-spacing: 0; color: var(--ink-2); }
.ex-cat:first-child { margin-top: 4px; }
.ex-panel .tick { font-family: var(--font-mono); font-size: 11px; fill: var(--muted); }
.ex-pnote { margin: 4px 0 0; font-family: var(--font-ui); font-size: 12px; line-height: 1.4; color: var(--muted); } /* what the share measures, where it differs from the firm's other published share (final QA B10) */
.ex-panel .bar { fill: var(--ex-bar); }
.ex-panel .bar.top { fill: var(--accent); }
/* a hovered bar darkens; the peak keeps its wine */
.ex-panel a:hover rect, .ex-panel a:hover circle { fill: var(--ink-2); stroke: none; }
.ex-panel a:hover rect.top { fill: var(--accent); }
.ex-panel .share { font-family: var(--font-mono); font-size: 11px; fill: var(--muted); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.ex-panel .share.top { fill: var(--accent-ink); font-weight: 700; }
.ex-panel .val { font-family: var(--font-mono); font-size: 11px; font-weight: 500; fill: var(--ink); }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 22px; margin: 6px 0 12px; }
/* each category is a group (exposureViz in build/build.js). Where subgrid works, a group spans as many columns as it has panels,
   up to the grid's own, and the grid packs densely, so the one-firm categories share a row. Without it the groups dissolve
   into the grid and every category takes its own row */
.ex-group { display: contents; }
.ex-group .ex-cat { margin-top: 18px; }
.ex-group:first-child .ex-cat { margin-top: 4px; }
@supports (grid-template-columns: subgrid) {
  #exposure-viz { container: exv / inline-size; }
  .ex-grid { --cols: 1; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-flow: row dense; gap: 18px 22px; }
  @container exv (min-width: 500px) { .ex-grid { --cols: 2; } }
  @container exv (min-width: 760px) { .ex-grid { --cols: 3; } }
  @container exv (min-width: 1010px) { .ex-grid { --cols: 4; } }
  @container exv (min-width: 1260px) { .ex-grid { --cols: 5; } }
  .ex-group { display: grid; grid-template-columns: subgrid; row-gap: 14px; align-content: start; grid-column: span min(var(--n), var(--cols)); }
  .ex-group .ex-cat, .ex-group:first-child .ex-cat { grid-column: 1 / -1; margin: 10px 0 0; }
}
.ex-panel { margin: 0; padding: 10px 0 6px; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: none; }
.ex-panel figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 4px; }
.ex-panel figcaption b { font-size: 15px; white-space: nowrap; } /* fitted to the small multiples: 16.5 px wraps the peak line beside it */
.ex-panel figcaption span { font-family: var(--font-mono); font-size: var(--fs-cap-s); letter-spacing: 0; color: var(--muted); text-align: right; }
@media (min-width: 600px) { .ex-panel figcaption, .ex-panel figcaption b { display: block; } .ex-panel figcaption span { display: block; margin-top: 2px; text-align: left; } } /* the longest peak line (184 px) fits the narrowest panel (234 px) */
.ex-panel svg { display: block; width: 100%; height: auto; }
.ex-panel .grid { stroke: var(--line); stroke-dasharray: 2 3; }
.ex-panel .rule { stroke: var(--ink); stroke-dasharray: none; opacity: 0.22; } /* the rule dates are solid hairlines; the counting-basis change is the only dashed line */
.ex-panel .axis { stroke: var(--line-2); }
.ex-panel .area { fill: var(--ink); fill-opacity: 0.07; }
.ex-panel .line { fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linejoin: round; }
.ex-panel .pt { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; }
.ex-panel .pt.peak { fill: var(--ink); stroke: var(--ink); }
.ex-tip { position: absolute; z-index: 40; max-width: 320px; padding: 8px 10px; background: var(--ink); color: var(--bg); font-family: var(--font-mono); font-size: var(--fs-ui-s); line-height: 1.45; border-radius: 0; pointer-events: none; }
@media (hover: hover) { .ex-tip { pointer-events: auto; } } /* a mouse can move onto the tip and it stays (WCAG 1.4.13); a tap still reaches the bar */
.ex-tip b { display: block; font-size: 14px; margin-bottom: 2px; }
.table-view > summary { cursor: pointer; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap); letter-spacing: 0; color: var(--muted); margin: 10px 0 4px; }

/* ---------- chain strip: every stage, scored, always in the same order ---------- */
.chain { padding: 18px 0 20px; border-top: 1px solid var(--line); }
.chain-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.chain-head h2 { font-family: var(--font-mono); font-size: var(--fs-cap); font-weight: 600; letter-spacing: 0; color: var(--ink); margin: 0; }
.chain-head p { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.02em; margin: 0; }
.chain-key { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.chain-key span { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap-s); letter-spacing: 0; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.chain-key i { width: 9px; height: 9px; display: inline-block; }
.chain-track { display: grid; grid-template-columns: repeat(15, 1fr); gap: 3px; align-items: start; list-style: none; margin: 0; padding: 0; }
.stage-cell { min-width: 0; position: relative; }
.stage-cell a { display: flex; flex-direction: column; gap: 6px; padding-bottom: 5px; text-decoration: none; }
.stage-cell .n { font-family: var(--font-mono); font-size: var(--fs-cap-s); letter-spacing: var(--tr-cap-s); color: var(--muted); font-variant-numeric: tabular-nums; }
.stage-cell .bar { height: 46px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--line-2); }
.stage-cell .bar i { display: block; width: 100%; height: 22%; background: var(--bar-3); transition: height 0.25s var(--ease); }
.stage-cell[data-band="4"] .bar i { height: 100%; background: var(--bar-5); }
.stage-cell[data-band="3"] .bar i { height: 66%; background: var(--bar-4); }
.stage-cell[data-band="2"] .bar i { height: 38%; background: var(--bar-3); }
.stage-cell[data-band="1"] .bar i { height: 16%; background: var(--bar-3); }
.stage-cell .t { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap-s); letter-spacing: 0; color: var(--ink-2); line-height: 1.25; overflow-wrap: normal; hyphens: manual; }
.stage-cell a:hover .t, .stage-cell a:hover .n { color: var(--ink); }
.stage-cell[aria-current="true"] .n, .stage-cell[aria-current="true"] .t { color: var(--ink); font-weight: 600; }
.stage-cell[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.chain--compact { padding: 0; border-top: 0; margin-bottom: 30px; }
.chain--compact .chain-track { gap: 2px; }
.chain--compact .stage-cell .bar { height: 26px; }
.chain--compact .stage-cell .t { visibility: hidden; white-space: nowrap; }
.chain--compact .stage-cell[aria-current="true"] .t { visibility: visible; }

/* ---------- chapter: the ledger column, then the head and the text ----------
   A two-track grid. The first track is the ledger column: the chapter number, and under it the stages of the
   chain as ruled rows of number plus bar, one per stage, the current one ticked in garnet and named beneath. The second track
   holds the head (title, lede, meta, In plain terms, In short, the chokepoint card) and the prose. */
.chapter {
  display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr); column-gap: var(--gutter-gap); align-items: start;
  padding: 72px 0 24px; border-top: 1px solid var(--line-2); scroll-margin-top: calc(var(--masthead) + var(--band, 0px) + 12px);
}
/* The Chain shows one chapter at a time (html[data-chain], src/template.html), laid out whole. Should the script not run and
   every chapter show, a chapter away from the window skips its layout and stands at an estimated height (about a median
   chapter at this width); once laid out, its real height is remembered (auto). Print lays out everything. */
@media screen {
  article.chapter { content-visibility: auto; contain-intrinsic-height: auto 12500px; } /* the chapter page of redesign stage 2: a median chapter's height at each width, measured 25 Oct 2026 */
  /* the browser keeps the view still as chapters above it take their real heights (scroll anchoring) by following an element
     on screen; the sticky ledger never moves, so it must not be the one followed */
  .ch-ledger { overflow-anchor: none; }
}
@media screen and (max-width: 1100px) { article.chapter { contain-intrinsic-height: auto 12600px; } }
@media screen and (max-width: 900px) { article.chapter { contain-intrinsic-height: auto 16900px; } }
@media screen and (max-width: 360px) { article.chapter { contain-intrinsic-height: auto 19200px; } }
.chapter > .ch-ledger { grid-column: 1; grid-row: 1 / span 2; }
.chapter > .chapter-head, .chapter > .prose { grid-column: 2; }
.chapter-head { margin-bottom: 8px; min-width: 0; }
.chapter-head > .ch-id { max-width: var(--frame); }
.ch-ledger { position: sticky; top: calc(var(--masthead) + 28px); text-align: right; padding-right: 14px; } /* the fixed rail it once cleared was retired on 21 Oct 2026 */
.ch-id { display: block; margin-bottom: 22px; }
.ch-tile { border: 0; border-radius: 0; background: none; text-align: right; padding: 0; overflow: visible; }
.ch-tile .k { display: block; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap-s); letter-spacing: 0; color: var(--muted); }
.ch-tile .v { display: block; font-family: var(--font-display); font-weight: 360; font-variation-settings: var(--opsz-numeral); font-size: var(--fs-num-l); line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); margin: 6px 0 4px; }
.ch-tile .of { display: block; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap-s); letter-spacing: 0; color: var(--muted); white-space: nowrap; }
/* the stages, turned vertical */
.ch-ledger .chain--compact { margin: 22px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.ch-ledger .chain-track { display: block; }
.ch-ledger .stage-cell a { flex-direction: row; align-items: center; gap: 7px; padding: 0; height: 15px; border-bottom: 1px solid var(--line); }
.ch-ledger .stage-cell .n { display: block; width: 16px; font-size: var(--fs-cap-s); letter-spacing: 0; color: var(--muted); text-align: left; }
.ch-ledger .stage-cell .bar { flex: 1 1 auto; height: 5px; border-bottom: 0; align-items: stretch; }
.ch-ledger .stage-cell .bar i { height: 100%; width: 16%; transition: none; }
.ch-ledger .stage-cell[data-band="2"] .bar i { width: 38%; }
.ch-ledger .stage-cell[data-band="3"] .bar i { width: 66%; }
.ch-ledger .stage-cell[data-band="4"] .bar i { width: 100%; }
.ch-ledger .stage-cell .t { display: none; }
.ch-ledger .stage-cell[aria-current="true"] .n { color: var(--accent); font-weight: 600; }
.ch-ledger .stage-cell[aria-current="true"]::after { left: -14px; right: auto; top: 3px; bottom: 3px; height: auto; width: 2px; background: var(--accent); }
/* the key under the rows: each band's bar drawn as the rows draw it, then its name */
.ch-ledger .ledger-key { margin: 12px 0 0; padding-left: 23px; text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap-s); line-height: 1.3; letter-spacing: 0; color: var(--ink-2); }
.ch-ledger .ledger-key .lgk { display: block; margin: 0 0 8px; }
.ch-ledger .ledger-key .lgk i { display: block; height: 5px; width: 16%; margin: 0 0 4px; background: var(--bar-3); }
.ch-ledger .ledger-key .lgk[data-band="4"] i { width: 100%; background: var(--bar-5); }
.ch-ledger .ledger-key .lgk[data-band="3"] i { width: 66%; background: var(--bar-4); }
.ch-ledger .ledger-key .lgk[data-band="2"] i { width: 38%; }
@media (max-width: 1100px) { .ch-ledger .ledger-key { padding-left: 0; } }
.ch-title { font-weight: 400; font-size: clamp(36px, 3.6vw, 50px); line-height: 1; letter-spacing: -0.015em; margin: -4px 0 16px; }
.ch-lede { font-size: var(--fs-lede); line-height: 1.45; color: var(--ink-2); max-width: 26em; font-weight: 400; margin: 0; }
/* the facts, one line where it fits; the cite line under it holds the actions. Each fact carries its dot in an 18 px slot
   before it, and the line is drawn 18 px to the left with that strip clipped, so the first fact on every line, wrapped or
   not, loses its dot (the facts are text only, so nothing focusable is clipped) */
.ch-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; margin: 16px 0 0 -18px; clip-path: inset(0 0 0 18px); }
.ch-meta .label::before { content: "\00b7"; display: inline-block; width: 18px; text-align: center; color: var(--muted); }
.ch-copy { background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.ch-copy:hover { text-decoration-color: var(--accent); }
.ch-copy[data-done] { color: var(--muted); text-decoration: none; }
.inshort { margin: 0 0 30px; border-left: 0; padding-left: 0; max-width: var(--measure); }
.chapter .inshort h2 { margin: 0 0 10px; }
.chapter .inshort h2.label, .chapter .prose .inshort h2 { font-family: var(--font-mono); font-weight: 500; font-variation-settings: normal; font-size: var(--fs-cap); line-height: 1.4; letter-spacing: 0; color: var(--muted); margin: 0 0 10px; } /* the essay's "In short" sits inside the prose, where .prose h2 would otherwise size it as a heading */
.inshort p { font-size: var(--fs-lede); line-height: 1.5; color: var(--ink); max-width: var(--measure); margin: 0 0 0.6em; }
/* "In plain terms" opens the head: a rule above and below, a garnet label */
.plain { border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line-2); background: none; border-radius: 0; padding: 14px 0 16px; margin: 26px 0 26px; max-width: var(--measure); }
.plain .label { color: var(--muted); display: block; margin-bottom: 7px; }
.plain p { font-size: var(--t-lead); line-height: 1.55; color: var(--ink); max-width: var(--measure); margin: 0; }
.prose .takeaways { display: none; }

/* ---------- the chokepoint card: a ruled statement, no box, no shadow ---------- */
.plate { max-width: var(--measure); border: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); border-radius: 0; background: none; box-shadow: none; overflow: hidden; margin-bottom: 38px; }
.plate-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; background: none; border-bottom: 1px solid var(--line-2); }
.plate-head .label { color: var(--ink); font-weight: 600; }
.plate-kpis .v.sub-4 { color: var(--ink); }
/* each band is said once, in its cell: the value is the glossary button the head's tag used to be (its definition in a popover) */
.plate-kpis .v .v-btn { font: inherit; color: inherit; letter-spacing: inherit; text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 6px; cursor: help; }
.plate-kpis .v .v-btn:hover, .plate-kpis .v .v-btn[aria-describedby] { text-decoration-color: currentColor; }
.pips { display: inline-flex; gap: 4px; }
.pips i { width: 9px; height: 9px; border-radius: 0; border: 1.5px solid var(--ink-2); display: block; }
.pips i.on { background: var(--ink); border-color: var(--ink); }
.plate-kpis { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.plate-kpis > div { padding: 15px 18px 16px 0; border-right: 1px solid var(--line); min-width: 0; }
.plate-kpis > div + div { padding-left: 18px; }
.plate-kpis > div:last-child { border-right: 0; }
/* between 901 and 1100 px the column is about 480 px: the two bands share a row and the price takes the width under them */
@media (min-width: 901px) and (max-width: 1100px) {
  .plate-kpis { grid-template-columns: 1fr 1fr; }
  .plate-kpis > div:nth-child(2) { border-right: 0; }
  .plate-kpis > div:last-child { grid-column: 1 / -1; padding-left: 0; border-top: 1px solid var(--line); }
}
.plate-kpis .k { display: block; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap-s); letter-spacing: 0; color: var(--muted); margin-bottom: 8px; }
.plate-kpis .v { display: block; font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--opsz-title); font-size: var(--t-block); line-height: 1.05; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.plate-kpis .v.cost { font-size: var(--t-block); }
.plate-kpis .v.cost.long { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small); line-height: 1.35; letter-spacing: 0; font-variation-settings: normal; }
.plate-kpis .v small { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.plate-kpis .v.Extreme { color: var(--ink); }
.plate-kpis .sub { display: block; font-family: var(--font-body); font-size: var(--fs-note); line-height: 1.45; letter-spacing: 0; color: var(--muted); margin-top: 8px; }
.plate-rows { margin: 0; border-bottom: 1px solid var(--line); }
.plate-rows .row { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.plate-rows .row:last-child { border-bottom: 0; }
.plate-rows dt { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap-s); letter-spacing: 0; color: var(--muted); padding-top: 4px; }
.plate-rows dd { margin: 0; font-size: var(--fs-small); line-height: 1.45; }
.plate-rows ul { list-style: none; margin: 0; padding: 0; }
.plate-rows li { padding-left: 32px; text-indent: -32px; margin-bottom: 8px; }
.plate-rows li:last-child { margin-bottom: 0; }
.chip { display: inline-block; width: 24px; text-align: center; text-indent: 0; margin-right: 8px; font-family: var(--font-mono); font-size: var(--fs-cap-s); font-weight: 500; letter-spacing: var(--tr-cap-s); border: 1px solid var(--line-2); border-radius: 0; padding: 1px 0 2px; color: var(--ink-2); vertical-align: 1px; }
/* a chip that carries a chapter name and a link, rather than a country code */
.chip-ch { display: block; width: fit-content; max-width: 100%; text-align: left; margin: 7px 0 0; padding: 2px 7px 3px; letter-spacing: 0; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-ch:hover, .chip-ch:focus-visible { border-color: var(--accent); background: none; color: var(--accent); }
.cc { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; }
.plate-rows .who { font-weight: 600; }
.plate-rows .note { color: var(--muted); font-size: var(--fs-note); }
.plate-rows .why { color: var(--ink-2); font-size: var(--fs-small); }
.plate-status { display: grid; grid-template-columns: 1fr 1fr; }
.plate-status > div { padding: 14px 18px 16px 0; border-right: 1px solid var(--line); }
.plate-status > div + div { padding-left: 18px; }
.plate-status > div:last-child { border-right: 0; }
.plate-status .k { display: block; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap-s); letter-spacing: 0; color: var(--muted); margin-bottom: 7px; }
.plate-status p { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); margin: 0; }
/* the card's footnote marks: on a figure set large the mark keeps the size of the card's other marks and rides at the
   figure's cap height; two marks in one place (a field with more urls than sentences) take a comma between them */
.plate-kpis .v:not(.long) sup.cite { font-size: max(11px, 0.4em); vertical-align: 1.1em; margin-left: 0; }
.plate sup.cite-sep { font-family: var(--font-mono); font-size: max(11px, 0.62em); line-height: 0; vertical-align: 0.55em; color: var(--accent); }
.brief-meta .conc.Extreme, .plate-kpis .v.Extreme { color: var(--ink); }

.dbg-only .hero, .dbg-only .contents, .dbg-only #chain, .dbg-only .chapter:not(.only) { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { :root { --col: 62%; --gutter: 64px; --gutter-gap: 20px; } body { font-size: var(--t-text); } .ch-tile .v { font-size: var(--fs-num-m); } }
@media (max-width: 900px) {
  :root { --col: 100%; --masthead: 81px; --gutter: 34px; --gutter-gap: 12px; } /* the two-row phone masthead; measured at runtime too, but the first paint must not shift */
  body { font-size: var(--t-text); }
  .masthead { padding: 8px 16px 0; height: auto; min-height: 52px; flex-wrap: wrap; gap: 0 8px; align-items: center; }
  .masthead .search-btn, .masthead .theme-toggle { position: absolute; top: 7px; width: 32px; height: 32px; margin: 0; } /* the buttons live inside the tab strip; on phones they pin to the first row, clear of the tabs below so each tab keeps a full 24 px to tap */
  .masthead .theme-toggle { right: 16px; }
  .masthead .search-btn { right: 56px; }
  .tabs { order: 3; flex: 0 0 100%; width: 100%; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; margin: 2px 0 -1px; padding: 0; }
  .tabs a { padding: 7px 8px 9px; font-size: 14px; border-bottom-width: 2px; } /* the current tab's rule lies on the masthead's hairline, as on a laptop */
  .chapter .chain--compact { display: none; }
  .column { padding: 0 18px; }
  :root { --band: 0px; }
  /* the specimen becomes a bottom strip, like a dashboard bar. Collapsed it is 64 px (page revision 2, 28 Oct 2026, below);
     opened it shows the drawing, its caption and its parts. These rules are the opened strip's */
  .stage { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: auto; min-height: 0; interpolate-size: allow-keywords; margin: 0; z-index: 35; background: var(--bg); border-top: 1px solid var(--line-2); border-bottom: 0; box-shadow: none; pointer-events: auto; display: grid; grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; align-items: start; column-gap: 12px; row-gap: 4px; padding: 6px 10px 8px 6px; overflow: hidden; transition: height 0.25s var(--ease); }
  .stage canvas { order: 0; grid-column: 1; grid-row: 1 / -1; width: 116px; height: 116px; margin: 0; align-self: center; }
  .stage .stage-tag { order: 0; position: static; grid-column: 2; grid-row: 1; margin: 0; padding: 4px 0 0; text-align: left; font-size: 11px; letter-spacing: 0.06em; line-height: 15px; }
  .stage .stage-actions { display: flex; gap: 6px; grid-column: 2; grid-row: 3; justify-self: end; }
  .stage .stage-actions button { font-family: var(--font-ui); font-weight: 500; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink); background: none; border: 1px solid var(--rule-ink); border-radius: 999px; padding: 4px 12px; min-height: 28px; cursor: pointer; }
  .stage figcaption { order: 0; display: block; grid-column: 2; grid-row: 2; margin: 0; padding: 0; max-width: none; text-align: left; font-family: var(--font-ui); font-size: 11.5px; line-height: 1.38; color: var(--ink-2); }
  /* collapsed (page revision 2, 28 Oct 2026): a 64 px strip, a 52 px live thumbnail at the left, two lines in Hanken Grotesk
     13 px, "Specimen 04 · EUV scanner" in ink at 500 and "Tap for the drawing and its parts" in ink-2, and Contents at the
     right. The caption, Top and Expand leave it: Expand is the strip itself, a clear button over all of it but Contents, so a
     tap anywhere opens it and a keyboard reaches it. A 3 px wine rule on its top edge fills with the share of the chapter
     read (src/app.js Sections), wine marking the reader's place */
  .stage[data-collapsed="1"]:not([data-hidden="1"]) { display: block; height: 64px; padding: 0; }
  .stage[data-collapsed="1"]:not([data-hidden="1"]) canvas { position: absolute; left: 12px; top: 6px; width: 52px; height: 52px; min-height: 0; aspect-ratio: auto; margin: 0; }
  .stage[data-collapsed="1"]:not([data-hidden="1"]) .stage-tag { position: absolute; left: 76px; right: 116px; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; font-family: var(--font-ui); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 18px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stage[data-collapsed="1"] .stage-tag .tag-tap { display: block; overflow: hidden; text-overflow: ellipsis; font-weight: 400; color: var(--ink-2); }
  .stage[data-collapsed="1"] figcaption, .stage[data-collapsed="1"] .stage-pause { display: none; }
  /* the specimen's line drawing in the collapsed strip, in place of the live one (src/app.js Stage.show); the canvas keeps its
     box, so the drawing is the right size the moment the strip opens */
  .stage[data-collapsed="1"][data-thumb="1"]:not([data-hidden="1"]) .stage-thumb { display: block; position: absolute; left: 12px; top: 6px; width: 52px; height: 52px; object-fit: contain; mix-blend-mode: multiply; pointer-events: none; }
  :root[data-theme="dark"] .stage[data-collapsed="1"][data-thumb="1"] .stage-thumb { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
  .stage[data-collapsed="1"][data-thumb="1"]:not([data-hidden="1"]) canvas { visibility: hidden; }
  .stage[data-collapsed="1"]:not([data-hidden="1"]) .stage-actions { position: static; }
  .stage[data-collapsed="1"]:not([data-hidden="1"]) .stage-menu { position: absolute; right: 12px; top: 18px; z-index: 3; }
  .stage[data-collapsed="1"]:not([data-hidden="1"]) .stage-actions .stage-toggle { position: absolute; left: 0; top: 0; bottom: 0; right: 108px; z-index: 2; margin: 0; padding: 0; border: 0; border-radius: 0; min-height: 0; background: none; color: transparent; font-size: 0; cursor: pointer; }
  .stage[data-collapsed="1"]:not([data-hidden="1"]) .stage-actions .stage-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
  .stage .stage-read { display: block; position: absolute; left: 0; right: 0; top: -1px; height: 3px; z-index: 4; transform-origin: 0 50%; transform: scaleX(var(--read, 0)); background: var(--accent); pointer-events: none; }
  .stage[data-hidden="1"] .stage-read { display: none; }
  /* the strip names the specimen (its name), where a laptop's label names the chapter */
  .stage .stage-tag .tag-ch { display: none; }
  .stage .stage-tag .tag-sp { display: inline; }
  .stage[data-collapsed="0"] { height: min(58vh, 480px); grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 44px minmax(0, 1fr) auto; padding: 0 12px 8px; }
  .stage[data-collapsed="0"] canvas { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 100%; }
  .stage[data-collapsed="0"] .stage-tag { grid-column: 1; grid-row: 1; padding-top: 14px; }
  .stage[data-collapsed="0"] .stage-actions { grid-column: 2; grid-row: 1; align-self: center; }
  .stage[data-collapsed="0"] figcaption { grid-column: 1 / -1; grid-row: 3; margin: 6px 0 0; -webkit-line-clamp: 6; }
  body { padding-bottom: calc(var(--strip-h, 64px) + 12px); }
  /* the contents sheet */
  .sheet { display: block; position: fixed; inset: 0; z-index: 60; background: var(--bg); overflow-y: auto; padding: 14px 16px 90px; }
  .sheet[hidden] { display: none; }
  .sheet-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 14px; }
  .sheet-head b { font-size: var(--t-lead); }
  .sheet-close { font-size: 22px; line-height: 1; background: none; border: 1px solid var(--rule-ink); border-radius: 50%; width: 36px; height: 36px; color: var(--ink); }
  .sheet-pages { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
  .sheet-pages a { font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-ui); padding: 7px 14px; border: 1px solid var(--rule-ink); border-radius: 999px; color: var(--ink); text-decoration: none; }
  .sheet-chapters { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
  .sheet-chapters a { display: grid; grid-template-columns: 34px 1fr; align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
  .sheet-chapters .n { font-family: var(--font-mono); font-size: var(--fs-cap); color: var(--muted); font-variant-numeric: tabular-nums; }
  /* the chapter being read, in wine, with its sections under it (src/app.js Band) */
  .sheet-chapters a[aria-current="page"] .t, .sheet-chapters a[aria-current="page"] .n { color: var(--accent-ink); }
  .sheet-chapters a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--accent); padding-left: 10px; }
  .sheet-secs { list-style: none; margin: 0; padding: 4px 0 10px 54px; border-bottom: 1px solid var(--line); }
  .sheet-secs a { display: block; padding: 7px 0; border-bottom: 0; font-family: var(--font-ui); font-size: 14px; line-height: 1.35; color: var(--ink-2); text-decoration: none; }
  .sheet-secs a:hover { color: var(--accent-ink); }
  .sheet-chapters .t { font-family: var(--font-display); font-weight: 500; font-variation-settings: var(--opsz-title); font-size: var(--t-text); }
  .sheet-chapters .sheet-k { font-family: var(--font-mono); font-size: var(--fs-cap); font-weight: 500; letter-spacing: 0; color: var(--muted); padding: 18px 0 8px; border-bottom: 1px solid var(--line); }
  .hero { padding-top: 22px; }
  /* Back to top: Top left the strip (page revision 2), so the pill stands at the right just over the strip, or at the foot of a
     page with no strip */
  .to-top { right: 12px; bottom: calc(var(--strip-h, 64px) + 12px); }
  body:has(.stage[data-route="none"]) .to-top { bottom: 16px; }
  /* the tab strip scrolls: while more tabs hide to the right, its edge fades out under a chevron */
  .masthead:has(.tabs[data-end="0"])::after {
    content: "\203A"; position: absolute; right: 0; bottom: 0; width: 50px; height: 36px; padding: 0 9px 5px 0;
    display: flex; align-items: center; justify-content: flex-end;
    font-family: var(--font-mono); font-weight: 500; font-size: 20px; line-height: 1; color: var(--ink-2);
    background: linear-gradient(to right, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg) 62%); pointer-events: none;
  }
  .stage .stage-top { display: none; }
  /* without WebGL the strip keeps Contents so the phone still has its navigation; on a page with no specimen (Suppliers,
     Export Controls, Glossary, AI Chips) there is no strip at all (page revision 2: the empty 128 px band goes) */
  .stage[data-hidden="1"] { display: grid; height: 48px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr; padding: 0 12px; }
  .stage[data-hidden="1"] canvas, .stage[data-hidden="1"] figcaption, .stage[data-hidden="1"] .stage-tag, .stage[data-hidden="1"] .stage-toggle { display: none; }
  .stage[data-hidden="1"] .stage-actions { grid-column: 2; grid-row: 1; align-self: center; }
  body:has(.stage[data-hidden="1"]) { padding-bottom: 64px; }
  .stage[data-route="none"] { display: none !important; }
  /* the chapter on a phone: one column, the number as a plain block above the title */
  .chapter { display: block; padding-top: 44px; }
  .ch-ledger { position: static; text-align: left; padding: 0; margin-bottom: 12px; }
  .ch-tile { text-align: left; width: auto; }
  .ch-tile .v { font-size: var(--fs-num-m); }
  .ch-id { margin-bottom: 14px; }
  .ch-title { font-size: 38px; }
  .claims b { font-size: 24px; }
  .chain-track { grid-template-columns: repeat(5, 1fr); gap: 3px 8px; row-gap: 14px; }
  .chain-key { margin-left: 0; flex-basis: 100%; }
  .chain--compact .stage-cell .t { visibility: visible; white-space: normal; }
  .plate-kpis { grid-template-columns: 1fr; }
  .plate-kpis > div, .plate-kpis > div + div { border-right: 0; border-bottom: 1px solid var(--line); padding-left: 0; } /* "+ div" too, or the desktop indent of the second and third cells survives */
  .plate-rows .row { grid-template-columns: 1fr; gap: 6px; }
  .plate-status { grid-template-columns: 1fr; }
  .plate-status > div, .plate-status > div + div { border-right: 0; border-bottom: 1px solid var(--line); padding-left: 0; }
  .inshort p { font-size: var(--t-text); }
  .prevnext { grid-template-columns: 1fr; }
  .prevnext .next { grid-column: 1; text-align: left; }
  /* the popover becomes a sheet across the foot of the screen, above the specimen strip */
  .gl-tip.is-sheet { left: 10px; right: 10px; top: auto; width: auto; max-width: none; }
  .timeline li { grid-template-columns: 1fr; gap: 4px; }
}
/* a phone: the wordmark is the way home, so the Home tab goes and the other five fit a 360 px screen without scrolling */
@media (max-width: 480px) { :root { --masthead: 76px; } .tabs a[data-view="walk"] { display: none; } .tabs { gap: 0; } .tabs a { padding: 6px 6px 9px; font-size: 11.5px; } }
@media (max-width: 380px) { .tabs a { padding-left: 5px; padding-right: 5px; padding-bottom: 10px; font-size: 11px; } } /* the extra pixel keeps the masthead's height, so the page sits where it does at 390 px */


/* the chapter head on a phone: the numeral beside its two labels on one ruled line, so the title starts in the first screen */
@media (max-width: 900px) {
  .chapter { padding-top: 36px; }
  .ch-ledger { margin-bottom: 18px; }
  .ch-tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: end; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
  .ch-tile .v { grid-column: 1; grid-row: 1 / span 2; font-size: var(--fs-num-m); margin: 0; line-height: 0.82; }
  .ch-tile .k { grid-column: 2; grid-row: 1; align-self: end; }
  .ch-tile .of { grid-column: 2; grid-row: 2; align-self: end; margin-top: 3px; }
  .ch-id { margin-bottom: 0; }
}

/* ---------- end-of-chapter flashcards: four cards, then the four things to remember ---------- */
.review { max-width: var(--measure); margin: 3.2em 0 0; border-top: 2px solid var(--ink); padding-top: 4px; }
.review .rv-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.prose .review .rv-title { margin: 0.55em 0 0.2em; }
.review .rv-sub { margin: 0; font-family: var(--font-mono); font-size: var(--fs-ui-s); color: var(--muted); }
.fc-deck { position: relative; margin: 16px 16px 0 0; perspective: 1600px; }
.fc-deck[hidden], .fc-end[hidden], .fc-card[hidden], .fc-nav[hidden] { display: none; }
.fc-behind { position: absolute; inset: 0; border: 1px solid var(--line); background: var(--bg); transform: translate(8px, 8px); }
.fc-behind--2 { transform: translate(16px, 16px); border-color: var(--line); }
.fc-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fc-card.is-flipped { transform: rotateY(180deg); }
.fc-face { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; padding: 22px 26px 20px; border: 1px solid var(--line-2); background: var(--bg-2); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fc-back { transform: rotateY(180deg); background: var(--bg-2); }
.fc-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; }
.fc-row--end { justify-content: flex-end; margin-top: auto; }
.fc-row--foot { margin-top: auto; flex-wrap: wrap; }
.fc-row--gap { justify-content: flex-start; }
.fc-marks { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-left: auto; }
.fc-link { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); background: none; border: 0; border-radius: 0; padding: 8px 2px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.fc-link:hover:not(:disabled) { color: var(--ink); text-decoration-color: var(--ink); }
.fc-link:disabled { color: var(--muted); opacity: 0.45; text-decoration: none; cursor: default; }
.fc-link.fc-prev:disabled, .fc-link.fc-next:disabled { visibility: hidden; } /* a step the reader cannot take yet is not drawn; its space stays, so nothing moves */
.fc-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fc-steps { display: flex; gap: 18px; margin-left: auto; }
.fc-q { margin: 6px 0 22px; font-family: var(--font-body); font-weight: 400; font-size: var(--t-block); line-height: 1.3; color: var(--ink); text-wrap: balance; }
.fc-a { margin: 4px 0 0; font-family: var(--font-body); font-weight: 600; font-size: var(--t-text); line-height: 1.35; color: var(--ink); text-wrap: balance; }
.fc-why { margin: 0 0 6px; font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.fc-more { font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: 0; color: var(--accent); white-space: normal; margin-left: 4px; } /* it wraps: a long section name would widen the card past a 320 px screen */
.fc-btn { font-family: var(--font-ui); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink); background: var(--bg); border: 1px solid var(--rule-ink); border-radius: 999px; padding: 8px 16px; min-height: 36px; cursor: pointer; }
.fc-btn:hover { border-color: var(--ink); color: var(--ink); }
.fc-btn--solid { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.fc-btn--solid:hover { color: var(--bg); background: var(--ink-2); border-color: var(--ink-2); }
.fc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fc-nav { display: flex; align-items: center; gap: 16px; margin: 24px 0 0; }
.fc-n { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* the card's place, for a screen reader (build/build.js deckHTML) */
.fc-dots { display: flex; gap: 6px; }
.fc-dots i { width: 9px; height: 9px; border: 1px solid var(--ink-2); }
.fc-dots i.on { background: var(--ink); }
.fc-dots i.k { background: var(--accent); border-color: var(--accent); }
.fc-dots i.m { background: repeating-linear-gradient(135deg, var(--ink-2) 0 1px, transparent 1px 3px); }
.fc-end { margin-top: 10px; }
.fc-score { display: flex; align-items: baseline; gap: 14px; margin: 8px 0 6px; }
.fc-big { font-family: var(--font-display); font-weight: 360; font-size: 64px; line-height: 1; font-variation-settings: var(--opsz-numeral); color: var(--ink); }
.fc-score-t { font-size: var(--t-small); color: var(--ink-2); }
.review .rv-keep { margin: 8px 0 14px; padding: 14px 0 4px; border-top: 1px solid var(--line-2); }
.review .rv-keep h4.label, .chapter .review .rv-keep h3.label { margin: 0 0 12px; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); line-height: 1.4; color: var(--muted); }
.review .rv-keep ul { list-style: none; margin: 0; padding: 0; }
.review .rv-keep li { position: relative; padding: 0 0 10px 30px; font-size: var(--t-text); line-height: 1.5; color: var(--ink); }
.review .rv-keep li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 12px; border-top: 2px solid var(--accent); }
.review .rv-keep li.miss { color: var(--ink-2); }
.review .rv-keep li.miss::before { border-top-style: dashed; border-color: var(--line-2); }
.review .rv-keep .fc-more { margin-left: 0; } /* the space before it is the gap, so a link that wraps starts flush with the text */
@media (prefers-reduced-motion: reduce) { .fc-card { transition: none; } }
@media (max-width: 700px) { .fc-face { padding: 18px 18px 16px; } .fc-q { font-size: var(--t-lead); } .fc-a { font-size: var(--t-text); } .fc-deck { margin-right: 12px; } }
@media print { .review .rv-head, .fc-deck, .fc-nav, .fc-score, .fc-end .fc-row { display: none !important; } .fc-end[hidden] { display: block !important; } .review { border-top-width: 1px; } }
/* a returning reader's last score takes the place of the deck's instruction (app.js); the same quiet line */
.review .rv-sub.fc-last { color: var(--ink-2); }

/* ---------- explainer animations: step names above, the video, the caption below ---------- */
.figure--anim { max-width: var(--measure); }
/* the step row: the step names, and at its end the Paused mark, kept outside the frame so it never covers a label drawn in the video */
.anim-bar { display: flex; align-items: baseline; gap: 0 16px; margin: 10px 0 12px; }
.figure--anim .anim-steps { display: flex; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; gap: 2px 13px; list-style: none; margin: 0; padding: 0; }
.figure--anim .anim-steps li { margin: 0; }
.anim-steps button { font-family: var(--font-mono); font-size: var(--fs-cap); font-weight: 500; letter-spacing: 0; color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 5px 0 4px; cursor: pointer; }
.anim-steps button .n { margin-right: 6px; font-variant-numeric: tabular-nums; } /* full strength: at 0.7 opacity the numbers fell to 3.0:1 */
.anim-steps button:hover { color: var(--ink); }
.anim-steps button[aria-current="step"] { color: var(--accent); border-bottom-color: var(--accent); }
.anim-steps button:focus-visible, .anim-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.anim-stage { position: relative; width: 100%; background: var(--bg); border: 1px solid var(--line); box-sizing: border-box; cursor: pointer; }
/* a hairline frame: browsers decode video colors a shade differently from the page, and a line hides that */
.anim-stage video { display: block; width: 100%; height: 100%; }
.anim-print { display: none; }
.anim-state { flex: none; font-family: var(--font-mono); font-size: var(--fs-cap-s); font-weight: 500; line-height: 1.4; letter-spacing: 0; color: var(--ink-2); background: var(--bg); border: 1px solid var(--line-2); padding: 2px 7px; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.figure--anim.is-paused .anim-state { opacity: 1; }
.anim-cap { margin: 12px 0 6px; min-height: 3em; font-size: var(--t-small); line-height: 1.5; color: var(--ink); }
.anim-transcript { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 700px) { .figure--anim .anim-steps { gap: 0 12px; } .anim-cap { min-height: 4.5em; font-size: var(--fs-small); } }
@media (prefers-reduced-motion: reduce) { .anim-state { transition: none; } }
@media print {
  /* an animation prints as its last frame (.anim-print, the light still) above the list of its steps (.anim-transcript) */
  .anim-bar, .anim-steps, .anim-cap, .anim-stage video, .anim-state { display: none !important; }
  .anim-print { display: block; width: 100%; }
  .anim-stage { aspect-ratio: auto !important; background: none; }
  .anim-transcript { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin: 8px 0 0; padding-left: 1.4em; font-size: 10pt; }
}

@media print {
  .masthead, .stage, .to-top, .theme-toggle { display: none !important; }
  #app { padding-top: 0; } .column { width: 100%; padding: 0; } body { font-size: 11pt; background: #fff; color: #000; }
  .chapter { break-before: page; }
}
.ex-panel .dot { fill: var(--bg); stroke: var(--ink-2); stroke-width: 1.5; }
.ex-panel .dot.last { fill: var(--ink); }

/* print keeps the scale the PDFs were set in (20 / 18.5 of the Literata sizes) */
@media print { :root { --text-scale: calc(10 / 9.8); } } /* the book's text at 10 pt (28 Oct 2026; 20 / 18.5, about 10.6 pt, before) */

/* module: chapter.css */
/* ==========================================================================
   The chapter page (redesign stage 2, qa/redesign/BRIEF.md; the hybrid mockup's chapter.html in the type of r8-body-1/2).
   One sheet for both homes of a chapter: The Chain in the app (article.chapter, built by build/build.js chapterHTML) and the
   readable page dist/<chapter>/ (build/modules/social.js inlines this file after build/assets/chapter-page.css).
   It reads only tokens both define: the grounds and inks, --ctx, --night*, the faces (--font-display, --font-body,
   --font-ui, --font-code, --font-kicker), the label's capitals (--fs-label, --tr-label, --tt-label), --margin and --masthead.
   The opener is "the column" of design round five (chosen 27 Oct 2026, MAIN/qa/design5/opener/b): from its first line the
   chapter keeps the grid its body keeps. The article is a 12-column grid, the contents rail in cols 1-3 (sticky, from the
   top) beside one column of text from col 4, at the text's measure (666 px):
     row 1  the opener: the kicker with the card's verdict, the title, the standfirst, the facts and the cite line
     row 2  the specimen, the chapter's first plate: the drawing on the open ground, its caption and its parts side by side
            under it, the caption standing on the drawing's foot
     row 3  In plain terms; row 4  In short
     row 5  the prose: the lead, then the chokepoint card on the paper tint (the chapter's first table), then the sections
   Under 1200 px the rail becomes a line of links over the specimen; under 900 px (the app's phone, where the specimen is the
   strip at the foot of the screen) everything is one column.
   ========================================================================== */

/* ---------- the band's meter (28 Oct 2026, MAIN/qa/design9/BUILD-SYSTEM.md), one component for the chapter sidebar, the card
   and the line above the title: the home page's four rising bars (src/modules/walk.css), at 36, 57, 79 and 100 percent of its
   height. Extreme lights all four in wine, High three in the mid gray, Moderate and Low theirs in the light tint; unlit bars
   take the hairline. Each place sets the height (--mh), the bar's width (--mw) and the gap (--mg). The meter is aria-hidden:
   the link's label and the visible word carry the band. Bars are <b>, since some rules style i inside these parents ---------- */
.meter { display: inline-flex; flex: none; align-items: flex-end; gap: var(--mg, 2px); height: var(--mh, 14px); margin: 0; padding: 0; vertical-align: baseline; }
.meter > b { display: block; flex: none; width: var(--mw, 5px); margin: 0; padding: 0; border: 0; background: var(--line); }
.meter > b:nth-child(1) { height: 36%; }
.meter > b:nth-child(2) { height: 57%; }
.meter > b:nth-child(3) { height: 79%; }
.meter > b:nth-child(4) { height: 100%; }
.meter > b.on { background: var(--bar-3); }
.meter[data-level="4"] > b.on { background: var(--bar-5); }
.meter[data-level="3"] > b.on { background: var(--bar-4); }

/* ---------- the page ---------- */
.view[data-view="stack"] { width: 100%; padding: 0 var(--margin); }
/* The Chain's contents page (the head, the line and the list) has its own sheet, src/modules/contents.css, which only the app loads */

article.chapter {
  --g: 24px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start;
  padding: 56px 0 32px; border-top: 1px solid var(--line-2);
}
@media (max-width: 1199px) { article.chapter { --g: 20px; } }
article.chapter > .chapter-head { display: contents; }
article.chapter > .chapter-head > * { min-width: 0; }

/* ---------- 1. the opener, in the text column ---------- */
.chapter .ch-open { grid-column: 4 / 13; grid-row: 1; display: block; padding: 0; border: 0; }
/* the opener stands over the drawing's canvas, which rides up under it by the empty band over the drawing (--lift, below) */
@media screen { .chapter .ch-open { position: relative; z-index: 1; } }
.chapter .ch-kick {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 0;
  font-family: var(--font-kicker); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); line-height: 16px; color: var(--muted);
}
.chapter .ch-band { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: var(--ui-s); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); } /* the verdict is the card's words, so it keeps their case beside the kicker's capitals */
.chapter .ch-band .meter { --mh: 11px; --mw: 4px; --mg: 1.5px; margin: 0 -1px 0 0; } /* the band's meter, beside its word */
/* the card's verdict, its two ratings in the card's own words, so both stand on the first screen while the card itself waits
   before section 01. The two never part mid-phrase; on the narrowest phones the second takes a line of its own, without the dot */
.chapter .ch-verdict { flex-wrap: wrap; row-gap: 2px; }
.chapter .ch-verdict > span { white-space: nowrap; }
.chapter .ch-verdict .sep { margin: 0 2px; color: var(--muted); font-weight: 400; }
@media (max-width: 359px) { .chapter .ch-verdict .sep { display: none; } }
.chapter .ch-title {
  margin: 20px 0 0 -0.045em; max-width: 666px; /* the title keeps to the measure, so it, the standfirst and the plate share one edge */
  font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--opsz-title);
  font-size: var(--t-title); line-height: 0.94; letter-spacing: -0.03em; text-wrap: balance; overflow-wrap: normal;
}
/* a long title ("Chemicals, Gases and Photoresist") takes two lines at a smaller size */
.chapter .ch-title.is-long { font-size: clamp(36px, 4vw, 58px); line-height: 0.98; letter-spacing: -0.022em; }
.chapter .ch-lede {
  margin: 22px 0 0; max-width: 666px;
  font-family: var(--font-body); font-weight: 400; font-size: var(--t-lead); line-height: 1.4; color: var(--ink-2);
}
.chapter .ch-omet { margin-top: 18px; max-width: 666px; min-width: 0; }
/* the facts: one line in the label's capitals, a dot between facts, none at the start of a wrapped line (the 18 px slot is clipped) */
.chapter .ch-meta { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0 0 0 -18px; clip-path: inset(0 0 0 18px); }
.chapter .ch-meta .label { font-family: var(--font-kicker); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); line-height: 20px; color: var(--muted); white-space: nowrap; }
.chapter .ch-meta .label::before { content: "\00b7"; display: inline-block; width: 18px; text-align: center; color: var(--muted); }
/* the cite line: Link to chapter, Cite this chapter and Chapter PDF as the site's .link, ink over an ink rule that turns wine */
.chapter .ch-omet .ch-cite { margin: 12px 0 0; }
.chapter .ch-omet .ch-cite-line { gap: 4px 24px; font-family: var(--font-ui); font-size: 15px; font-weight: 500; color: var(--ink); }
.chapter .ch-omet .ch-cite-line > * { padding: 6px 0 5px; }
.chapter .ch-omet .ch-cite-sep { display: none; }
.chapter .ch-omet .ch-cite-btn, .chapter .ch-omet .ch-cite-pdf, .chapter .ch-omet .ch-cite-copylink {
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 5px;
}
.chapter .ch-omet .ch-cite-btn:hover, .chapter .ch-omet .ch-cite-pdf:hover, .chapter .ch-omet .ch-cite-copylink:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }
.chapter .ch-omet .ch-cite-copylink[data-done] { color: var(--muted); border-bottom-color: var(--line-2); }
.chapter .ch-omet .ch-cite-box { margin-top: 10px; }

/* ---------- 2. the specimen, the chapter's first plate: the drawing at the measure on the open ground (no box: the box is for
   data figures), its caption and its parts side by side under it ---------- */
/* The canvas is --draw-h tall, and the drawing turns inside the sphere that fits it. src/app.js Stage.fit measures the drawing as
   it turns and fits the plate to it: the canvas takes the height at which the drawing stands about 340 px tall, the slot is
   shorter by the empty band over the drawing (--lift), the canvas riding up into the space under the opener, and the caption
   rises into the band under it (--slack, the caption's rule below). The defaults are a typical drawing's, so the page barely
   moves when the drawing arrives */
.chapter .ch-spec { --draw-h: 460px; --lift: 52px; --slack: 46px; grid-column: 4 / 13; grid-row: 2; display: block; max-width: 666px; margin: 44px 0 0; padding: 0; }
.chapter .ch-spec-draw { position: relative; height: calc(var(--draw-h) - var(--lift, 0px)); min-width: 0; }
.chapter .ch-spec-draw canvas { position: absolute; left: 0; top: calc(-1 * var(--lift, 0px)); display: block; width: 100%; height: var(--draw-h); }
.chapter .ch-spec-draw > .ch-balloons { top: calc(-1 * var(--lift, 0px)); height: var(--draw-h); }
@media (hover: hover) and (pointer: fine) {
  .chapter .ch-spec-draw canvas { cursor: grab; touch-action: none; outline: none; }
  .chapter .ch-spec-draw canvas.is-dragging { cursor: grabbing; }
  .chapter .ch-spec-draw canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
}
/* the caption stands on the drawing's own foot: --slack is the empty band under the drawing (src/app.js Stage.fit), which the
   caption rises into; it sits above the canvas, so its links stay in reach */
.chapter .ch-spec-cap { position: relative; min-width: 0; margin: calc(14px - var(--slack, 0px)) 0 0; max-width: none; transition: margin-top 0.3s var(--ease, ease); }
/* with no WebGL (src/app.js Stage.init) the slot would frame nothing: the caption stands alone */
html.no-stage .chapter .ch-spec-draw { display: none; }
html.no-stage .chapter .ch-spec-cap { margin-top: 0; }
.chapter .ch-spec-cap .label { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-family: var(--font-kicker); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); line-height: 16px; color: var(--muted); }
.chapter .ch-spec-cap > p:not(.ch-parts-k) { margin: 0; max-width: 40em; font-family: var(--font-body); font-size: var(--t-note); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
/* the caption beside the parts: the label over the caption on the left, the parts' label over the list in a 252 px column on the
   right (wide enough for "Parts, as numbered on the drawing" on one line); on a phone they stack, as before */
@media screen and (min-width: 641px) {
  .chapter .ch-spec-cap.has-parts { display: grid; grid-template-columns: minmax(0, 1fr) 252px; column-gap: 28px; align-items: start; }
  .chapter .ch-spec-cap.has-parts > .label { grid-column: 1; grid-row: 1; }
  .chapter .ch-spec-cap.has-parts > p:not(.ch-parts-k) { grid-column: 1; grid-row: 2; }
  .chapter .ch-spec-cap.has-parts > .ch-parts-k { grid-column: 2; grid-row: 1; margin: 0 0 6px; padding: 0; border: 0; }
  .chapter .ch-spec-cap.has-parts > .ch-parts { grid-column: 2; grid-row: 2 / span 2; font-size: 13px; }
  .chapter .ch-spec-cap.has-parts > .ch-parts li { padding: 3px 0; }
  .chapter .ch-spec-cap.has-parts > .ch-spec-3d { grid-column: 1; grid-row: 3; justify-self: start; }
}
/* the turn's pause, when the drawing is in this slot (Stage.host moves it here from the stage) */
.chapter .ch-spec-cap .stage-pause { pointer-events: auto; display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -4px 0; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: var(--bg); color: var(--ink-2); }
.chapter .ch-spec-cap .stage-pause svg { width: 10px; height: 10px; fill: currentColor; stroke: none; }
.chapter .ch-spec-cap .stage-pause:hover { color: var(--ink); border-color: var(--ink); }
/* the parts, as numbered on the drawing (data/specimen-parts.json): a ruled list under the caption */
.ch-parts-k { margin: 14px 0 4px; padding-top: 10px; border-top: 1px solid var(--rule-ink); font-family: var(--font-kicker); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); line-height: 16px; color: var(--muted); }
.ch-parts { list-style: none; margin: 0; padding: 0; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.ch-parts li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 6px; align-items: baseline; padding: 4px 0; }
.ch-parts li { align-items: center; }
.ch-parts b { display: grid; place-items: center; width: 20px; height: 20px; border: 1.25px solid var(--ink); border-radius: 50%; font-family: var(--font-ui); font-size: 11px; font-weight: 600; line-height: 1; }
.ch-parts a { color: var(--accent-ink); text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.ch-parts a:hover { text-decoration-color: var(--accent); }
/* the balloons over the live drawing (src/app.js Stage.balloons): numbered circles, their names, leader lines to the parts */
.ch-balloons { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ch-balloons line { stroke: var(--ink); stroke-width: 1.4; }
.ch-balloons .dot { fill: var(--ink); stroke: var(--bg); stroke-width: 1.5; }
.ch-balloons .bal { fill: var(--bg); stroke: var(--ink); stroke-width: 1.6; }
.ch-balloons .num { font-family: var(--font-ui); font-size: 13px; font-weight: 700; fill: var(--ink); }
.ch-balloons .nm { font-family: var(--font-ui); font-size: 14px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
/* the phone's expanded strip: the numbers alone, over the strip's canvas (src/app.js Stage.stripBalloons) */
.stage .ch-balloons.is-strip { right: auto; bottom: auto; z-index: 2; }
.ch-balloons.is-strip .nm { display: none; }
/* the two chapters that are not stages set their drawing on the night ground (the hybrid's --night tokens): the ground fills the drawing's slot,
   which gives the plate its own edge, and the caption sits under it on the page's ground */
.chapter .ch-spec[data-night] { --draw-h: 640px; --lift: 120px; --slack: 120px; margin-top: 36px; }
.chapter .ch-spec[data-night] .ch-spec-draw {
  height: calc(var(--draw-h) - var(--lift) - var(--slack)); overflow: hidden; background: var(--night); color: var(--night-ink);
  --bg: var(--night); --ink: var(--night-ink); --ink-2: var(--night-ink2); --muted: var(--night-ink2); --line-2: var(--night-rule); --rule-ink: var(--night-rule); --accent: var(--night-accent); --accent-ink: var(--night-accent);
  --stage-ink: 232, 231, 227; --stage-accent: 217, 138, 149;
}
.chapter .ch-spec[data-night] .ch-spec-cap { margin-top: 14px; } /* the night ground ends the drawing: no slack to rise into */

/* ---------- 3. the chokepoint card, the chapter's first table: in the text after the lead, before section 01 (build/build.js
   withCard), at the measure on the paper tint; its three ratings in a row, then each field as a row, the label in a column of
   its own (wide enough for "Why substitution is slow" on one line) and the answer beside it ---------- */
.chapter .plate { max-width: 40em; margin: 44px 0 0; padding: 20px 26px 22px; background: var(--bg-2); border: 0; overflow: visible; }
/* On this page lands the card clear of the masthead (and of the phone's slim bar) */
.chapter .plate[id] { scroll-margin-top: calc(var(--masthead) + var(--band, 0px) + 16px); }
.chapter .plate-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; padding: 0 0 16px; border-bottom: 1px solid var(--ink); }
.chapter .plate-head .label { font-family: var(--font-ui); font-size: var(--ui); font-weight: 500; line-height: 20px; color: var(--ink); letter-spacing: 0; text-transform: none; }
.chapter .plate-where { font-family: var(--font-kicker); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); line-height: 16px; color: var(--muted); }
.chapter .plate-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 44px; padding: 26px 0 30px; border-bottom: 1px solid var(--rule-ink); }
.chapter .plate-kpis > div, .chapter .plate-kpis > div + div { padding: 0; border: 0; min-width: 0; }
.chapter .plate-kpis .k { font-family: var(--font-kicker); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); line-height: 16px; color: var(--muted); margin: 0; }
.chapter .plate-kpis .v {
  display: flex; align-items: flex-end; gap: 10px; margin: 12px 0 8px;
  font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--opsz-title);
  font-size: var(--t-block); line-height: 1.15; letter-spacing: -0.01em; white-space: nowrap; overflow-wrap: normal; color: var(--ink); /* the ratings at the size of the price beside them (owner, 27 Oct) */
}
.chapter .plate-kpis .v .meter { --mh: 20px; --mw: 6px; --mg: 2px; margin: 0 1px 0.22em 0; } /* the band's meter, standing on the word's baseline */
.chapter .plate-kpis .v .v-btn { text-underline-offset: 0.12em; text-decoration-thickness: 1.5px; }
.chapter .plate-kpis .v.cost { display: block; margin: 12px 0 8px; font-weight: 400; font-size: var(--t-block); line-height: 1.15; letter-spacing: -0.01em; white-space: normal; }
.chapter .plate-kpis .v.cost.long { font-family: var(--font-body); font-weight: 500; font-size: var(--t-small); line-height: 1.4; letter-spacing: 0; font-variation-settings: normal; }
.chapter .plate-kpis .sub { margin: 0; max-width: 28em; font-family: var(--font-body); font-size: var(--t-note); line-height: 1.5; color: var(--ink-2); }
/* Who leads beside Where it is made, the reason under them, then China beside the US */
.chapter .plate-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; border-bottom: 1px solid var(--line-2); }
.chapter .plate-rows .row { display: block; padding: 18px 0 20px; border-bottom: 0; }
.chapter .plate-rows .row--why { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: 44px; border-top: 1px solid var(--line-2); }
.chapter .plate-rows .row--why:only-child, .chapter .plate-rows .row--why:first-child { border-top: 0; }
.chapter .plate-rows dt { padding: 0 0 10px; font-family: var(--font-kicker); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); line-height: 16px; color: var(--muted); }
.chapter .plate-rows dd { font-family: var(--font-body); font-size: var(--t-small); line-height: 1.5; }
.chapter .plate-rows .row--why dd { max-width: 40em; color: var(--ink-2); }
.chapter .plate-rows li { display: grid; grid-template-columns: 32px minmax(0, 7.5em) minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 0; text-indent: 0; margin: 0 0 9px; }
.chapter .plate-rows .chip { width: auto; margin: 0; padding: 0; border: 0; text-align: left; font-family: var(--font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; color: var(--muted); }
.chapter .plate-rows .who { font-family: var(--font-ui); font-size: 15px; font-weight: 600; }
.chapter .plate-rows .note { font-family: var(--font-body); font-size: var(--t-small); line-height: 1.45; color: var(--ink-2); } /* a card row, so the rows' step, the same as Why substitution is slow and the China and US lines */
.chapter .plate-status { grid-template-columns: 1fr 1fr; column-gap: 44px; border: 0; }
.chapter .plate-status > div, .chapter .plate-status > div + div { padding: 18px 0 2px; border: 0; }
.chapter .plate-status .k { margin: 0 0 10px; font-family: var(--font-kicker); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); line-height: 16px; color: var(--muted); }
.chapter .plate-status p { font-family: var(--font-body); font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); max-width: calc(36em / var(--text-scale)); }
.chapter .plate sup.cite { vertical-align: 0.5em; }
/* the ledger at the measure (screen only: paper sets the card its own way, src/modules/print.css). No "a + b" selector here or in
   the phone's rules: Paged.js (build/pdf.py) lifts every rule with one out of its media query and applies it on paper too, so
   ".plate" in the selector outweighs the older "div + div" rules instead */
@media screen {
  .chapter > .prose > .plate { max-width: 40em; } /* as wide as the flashcards and sources (owner, 27 Oct): about 8 percent wider than the 666 px text, kept on 30 Oct after design10 P2.2 narrowed them without asking */
  .chapter .plate-head { padding: 0 0 12px; }
  .chapter .plate-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 22px; padding: 16px 0 18px; }
  .chapter .plate-kpis > div:last-child { grid-column: auto; padding-left: 0; border-top: 0; } /* the price stays in the row at every width */
  .chapter .plate-kpis .v { margin: 10px 0 6px; gap: 8px; font-size: var(--t-block); }
  .chapter .plate-kpis .v.cost { margin: 10px 0 6px; font-size: var(--t-block); }
  .chapter .plate-kpis .v.cost.long { font-size: var(--t-small); }
  .chapter .plate-kpis .sub { font-size: var(--t-note); line-height: 1.5; }
  .chapter .plate-rows { display: block; border: 0; }
  .chapter .plate-rows .row, .chapter .plate-rows .row--why, .chapter .plate .plate-status > div {
    display: grid; grid-template-columns: 186px minmax(0, 1fr); column-gap: 18px; padding: 14px 0 10px; border: 0; border-top: 1px solid var(--line-2);
  }
  .chapter .plate-rows > .row:first-child { border-top: 0; }
  .chapter .plate-rows dt, .chapter .plate-status .k { margin: 0; padding: 3px 0 0; }
  .chapter .plate-rows dd { font-size: var(--t-small); }
  .chapter .plate-rows .row--why dd { max-width: none; }
  .chapter .plate-rows li { grid-template-columns: 28px minmax(0, 6.6em) minmax(0, 1fr); column-gap: 10px; margin: 0 0 7px; }
  .chapter .plate-rows .who { font-size: 14px; }
  .chapter .plate-rows .note { font-size: var(--t-small); }
  .chapter .plate-status { display: block; }
  .chapter .plate-status p { font-size: var(--t-small); line-height: 1.5; max-width: none; }
}

/* ---------- 4. the rail beside the whole chapter, from its first line ---------- */
.chapter .ch-rail {
  grid-column: 1 / 4; grid-row: 1 / span 5; align-self: start; position: sticky; top: calc(var(--masthead) + 16px);
  max-height: calc(100vh - var(--masthead) - 28px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  margin-top: 0; padding: 0 14px 8px 0; text-align: left; font-family: var(--font-ui);
}
/* set a little closer than before the card joined On this page, so the whole rail still fits a 900 px window (and closer
   again, 14 px to 12, for Lithography's sixth figure, 29 Oct 2026) */
.chapter .ch-rail .rail-part + .rail-part { margin-top: 12px; }
.chapter .ch-rail .rail-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 6px; font-family: var(--font-kicker); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); line-height: 16px; color: var(--ink); }
.chapter .ch-rail ol { list-style: none; margin: 0; padding: 0; }
.chapter .rail-toc a { display: block; padding: 3px 0 3px 12px; border-left: 2px solid var(--line); font-size: var(--ui); line-height: 19px; color: var(--ink-2); text-decoration: none; }
.chapter .rail-toc a:hover { color: var(--ink); }
.chapter .rail-toc a[aria-current] { color: var(--ink); font-weight: 500; border-left-color: var(--accent); }
.chapter .rail-figs a { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 2px 0; font-size: var(--ui-s); line-height: 16px; color: var(--ink-2); text-decoration: none; }
.chapter .rail-figs a:hover { color: var(--ink); }
.chapter .rail-figs .n { font-family: var(--font-code); font-size: 11.5px; color: var(--muted); }
/* the rail's Extreme and High key was removed at the owner's request (28 Oct 2026): each stage's mark and its link's label carry the band */
/* the chain: number, name, the band's meter at the line's end, right-aligned; the current stage's number in wine and its
   name bold, its meter keeping its band's look */
.chapter .ch-rail .chain-track { display: block; gap: 0; }
.chapter .ch-rail .stage-cell { position: static; }
.chapter .ch-rail .stage-cell::after { content: none; }
.chapter .ch-rail .stage-cell a { display: grid; grid-template-columns: 24px minmax(0, 1fr) 17px; column-gap: 6px; align-items: center; height: auto; padding: 1.5px 0; border: 0; font-size: 13px; line-height: 16px; color: var(--ink-2); text-decoration: none; }
.chapter .ch-rail .stage-cell .n { width: auto; font-family: var(--font-ui); font-size: 11.5px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chapter .ch-rail .stage-cell .t { display: block; visibility: visible; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-ui); font-size: 13px; font-weight: 400; color: inherit; }
.chapter .ch-rail .stage-cell .meter { --mh: 10px; --mw: 3px; --mg: 1.5px; justify-self: end; }
.chapter .ch-rail .stage-cell a:hover { color: var(--ink); }
.chapter .ch-rail .stage-cell[aria-current="true"] a { color: var(--ink); font-weight: 600; }
.chapter .ch-rail .stage-cell[aria-current="true"] .t { font-weight: 600; }
.chapter .ch-rail .stage-cell[aria-current="true"] .n { color: var(--accent-ink); }
.chapter .ch-rail .rail-across { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.chapter .ch-rail .rail-across .stage-cell a { grid-template-columns: 24px minmax(0, 1fr); }
/* Hide contents and Show contents (build/build.js RAIL_TOGGLE_JS adds both). Hide contents ends the rail's first line, beside
   On this page, quiet in the interface face, its target 26 px tall without making the line taller (the rail gives it 8 px of
   room at the top, so its scroll box does not clip it). Pressed, the rail's parts go and the text column moves to the middle of
   the page at its own measure (666 px), the figures with it; the column keeps its width, so the reader's place in the text does
   not move. Show contents, a small pill at the top of the left margin, level with the kicker, stays in view while the rail is
   hidden. Wide screens only: under 1200 px the rail is a line of links over the specimen and neither button shows. Print shows
   neither the buttons nor the change. */
.chapter .ch-rail .rail-tog { display: none; }
@media screen and (min-width: 1200px) {
  .chapter .ch-rail { margin-top: -8px; padding-top: 8px; }
  .chapter .ch-rail[data-more] { -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); } /* on a short window the rail scrolls and macOS hides its scrollbar: while rows wait below (src/app.js sets data-more), its foot fades */
  .chapter .ch-rail .rail-tog {
    align-items: center; gap: 6px; margin: 0; cursor: pointer; background: none; color: var(--muted);
    font-family: var(--font-ui); font-size: 13px; font-weight: 500; line-height: 16px; letter-spacing: 0; white-space: nowrap;
  }
  .chapter .ch-rail .rail-tog:hover { color: var(--ink); }
  .chapter .ch-rail .rail-tog:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; border-radius: 3px; color: var(--ink); }
  .chapter .ch-rail .rt-ic { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; }
  .chapter .ch-rail .rail-on > .rail-k { align-items: center; } /* the button has no text baseline of its own to share */
  .chapter .ch-rail .rail-hide { display: inline-flex; margin: -5px 0 -5px auto; padding: 5px 2px 5px 6px; border: 0; }
  .chapter .ch-rail .rail-show {
    margin: -6px 0 0; padding: 0 12px 0 10px; height: 28px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); color: var(--ink-2);
  }
  .chapter .ch-rail .rail-show:hover { border-color: var(--ink); }
  .chapter .ch-rail .rail-show:focus-visible { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); border-radius: 999px; }
  html.rail-off .chapter .ch-rail .rail-show { display: inline-flex; }
  html.rail-off .chapter .ch-rail .rail-body { display: none; }
  html.rail-off article.chapter { grid-template-columns: minmax(0, 1fr) minmax(0, 666px) minmax(0, 1fr); column-gap: 0; }
  html.rail-off .chapter .ch-rail { grid-column: 1; }
  html.rail-off .chapter .ch-open, html.rail-off .chapter .ch-spec, html.rail-off .chapter .plain,
  html.rail-off .chapter .inshort, html.rail-off .chapter > .prose { grid-column: 2 / 4; }
}

/* In plain terms and In short follow the specimen, then the prose; In plain terms' ink rule divides them from the opener.
   Both keep to the measure (666 px), as the title, the plate and the text do, so the ink rule ends where the card's tint does */
.chapter .plain { grid-column: 4 / 13; grid-row: 3; max-width: 666px; margin: 56px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--ink); background: none; }
.chapter .plain h2.label, .chapter .plain .label {
  display: block; margin: 14px 0 22px; padding: 0; font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--opsz-title);
  font-size: var(--t-section); line-height: 1.08; letter-spacing: -0.02em; text-transform: none; color: var(--ink);
}
.chapter .plain p { margin: 0; font-family: var(--font-body); font-size: var(--t-lead); line-height: 1.57; color: var(--ink); max-width: 33em; }
.chapter .inshort { grid-column: 4 / 13; grid-row: 4; max-width: 666px; margin: 36px 0 0; }
.chapter .inshort h2.label { margin: 0 0 12px; font-family: var(--font-ui); font-weight: 500; font-size: var(--ui); line-height: 20px; color: var(--ink); letter-spacing: 0; text-transform: none; }
.chapter .inshort p, .chapter .inshort li { font-family: var(--font-body); font-size: var(--t-text); line-height: 1.55; color: var(--ink); }
.chapter .inshort p { margin: 0 0 0.7em; }
.chapter > .prose { grid-column: 4 / 13; grid-row: 5; max-width: none; min-width: 0; margin-top: 16px; counter-reset: sec; }
/* the measure: 33.3 em of the 20 px text, 666 px, the width of the figures. Written out rather than var(--measure), since the
   readable pages set --measure for their own narrower page (build/assets/chapter-page.css) */
.chapter > .prose > * { max-width: calc(36em / var(--text-scale)); }
.chapter > .prose > .table-wrap, .chapter > .prose > .prevnext { max-width: none; }
/* each section opens on an ink rule, its number alone above a large heading in the display face (design round nine,
   revision 4: the kicker no longer repeats the heading). The sections are h2 and their subsections h3 since 29 Oct 2026
   (build/build.js markdown(); they were h3 and h4) */
.chapter > .prose > h2 {
  counter-increment: sec; margin: 72px 0 22px; padding-top: 14px; border-top: 1px solid var(--ink); max-width: 666px; /* its rule spans the text and figures under it */
  font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--opsz-title);
  font-size: var(--t-section); line-height: 1.12; letter-spacing: -0.015em; /* was 32 to 44 px (owner, 27 Oct: too large) */
}
.chapter > .prose > h2::before { content: counter(sec, decimal-leading-zero); display: block; margin: 0 0 14px; font-family: var(--font-kicker); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); line-height: 16px; color: var(--muted); }
.chapter > .prose > h3 { margin: 40px 0 14px; font-family: var(--font-display); font-weight: 500; font-variation-settings: var(--opsz-title); font-size: var(--t-lead); line-height: 1.27; letter-spacing: -0.005em; }
.chapter > .prose > p, .chapter > .prose > ul, .chapter > .prose > ol { font-size: var(--t-text); line-height: 1.55; }

/* ---------- figures: one grammar for every chart ---------- */
/* a figure keeps to the text's measure (666 px, --measure of the 20 px text). Wider, the bars stretched across the page and the
   explainers, drawn at 760 px, were blown up past their size and blurred (owner, 26 Oct). Its frame is a hairline (the visual
   pass of 27 Oct 2026: lighter chrome), and its head is tight: the number small, the finding, then the title under it */
.chapter .figure { margin: 34px 0 44px; padding: 0; border: 1px solid var(--line-2); background: var(--bg); max-width: 666px; }
/* on screen a figure, its explainer animation and the section rule over them take the card's and flashcards' edge, 720 px, about
   8 percent wider than the 666 px text (owner, 30 Oct 2026). The explainer films are 1520 px wide (760 px at 2x), so at 720 px
   they are drawn smaller than their size and stay sharp. Paper sets its own widths (src/modules/print.css) */
@media screen { .chapter .figure, .chapter > .prose > h2 { max-width: 720px; } }
.chapter .fig-head { padding: 18px 24px 0; }
.chapter .fig-k { display: inline-block; font-family: var(--font-code); font-size: 11.5px; line-height: 16px; color: var(--muted); text-decoration: none; }
.chapter .fig-k:hover { color: var(--accent-ink); }
.chapter .figure .fig-title { margin: 6px 0 4px; max-width: calc(36em / var(--text-scale)); font-family: var(--font-display); font-weight: 500; font-variation-settings: var(--opsz-title); font-size: var(--t-lead); line-height: 1.27; letter-spacing: -0.008em; text-wrap: balance; }
.chapter .figure .fig-title .unit, .chapter .figure .fig-sub .unit { font-family: var(--font-ui); font-weight: 400; font-size: 12.5px; color: var(--muted); margin-left: 8px; letter-spacing: 0; }
.chapter .fig-sub { margin: 0; max-width: 44em; font-family: var(--font-body); font-size: var(--t-small); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.chapter .fig-body { padding: 16px 24px 14px; }
/* bars, the chart rule (the owner's of 21 Oct, "garnet on the largest only", amended 28 Oct: wine on the value the title names):
   the marked value wine with its value bold in wine, the rest the light tint, a remainder hatched; every value in Hanken
   Grotesk on tabular figures */
.chapter .hbars { gap: 10px; margin: 0; font-family: var(--font-ui); font-size: 14px; }
.chapter .hb-l { line-height: 1.3; color: var(--ink-2); }
.chapter .hb-r { gap: 10px; }
.chapter .hb-r i { height: 22px; background: var(--ctx); border-radius: 0 2px 2px 0; }
.chapter .hb-r b { font-family: var(--font-ui); font-size: 13.5px; font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chapter .hb.top .hb-l { color: var(--ink); font-weight: 600; }
.chapter .hb.top .hb-r i { background: var(--accent); }
.chapter .hb.top .hb-r b { font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--accent-ink); }
.chapter .hb.rest .hb-r i { background: repeating-linear-gradient(135deg, var(--rule-ink) 0 1px, transparent 1px 5px); box-shadow: inset 0 0 0 1px var(--rule-ink); }
@media (min-width: 641px) { .chapter .hbars { gap: 10px; } .chapter .hb { column-gap: 14px; } }
/* columns, for a series over time or generations (revision 5): years left to right on an ink baseline, each value over its
   column in Hanken Grotesk and each label under it; at most 150 px a column, 18 px apart, 190 px at the tallest */
.chapter .cols { --ch: 190px; --cw: 150px; --cg: 18px; width: fit-content; max-width: 100%; margin: 4px 0 0; font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.chapter .cols-plot, .chapter .cols-lab { display: grid; grid-template-columns: repeat(var(--n), minmax(0, var(--cw))); column-gap: var(--cg); }
.chapter .cols-plot { align-items: end; padding-top: 4px; border-bottom: 1px solid var(--ink); }
.chapter .col { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.chapter .col > b { display: block; margin: 0 calc(-0.5 * var(--cg)) 6px; text-align: center; font-size: 13.5px; font-weight: 400; line-height: 1.25; color: var(--ink-2); white-space: nowrap; }
.chapter .col > i { display: block; height: calc(var(--h) * var(--ch)); background: var(--ctx); border-radius: 2px 2px 0 0; }
.chapter .col.top > b { font-size: 15px; font-weight: 700; color: var(--accent-ink); }
.chapter .col.top > i { background: var(--accent); }
.chapter .col.rest > i { background: repeating-linear-gradient(135deg, var(--rule-ink) 0 1px, transparent 1px 5px); box-shadow: inset 0 0 0 1px var(--rule-ink); }
.chapter .col-ref { position: absolute; left: -5px; right: -5px; height: 2px; margin-bottom: -1px; background: var(--ink); }
.chapter .col-ref span { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 12.5px; line-height: 1.2; color: var(--ink-2); }
.chapter .cols-lab { padding-top: 7px; }
.chapter .cols-lab span { min-width: 0; text-align: center; font-size: 13.5px; line-height: 1.3; color: var(--ink-2); }
.chapter .cols-lab span.top { color: var(--ink); font-weight: 600; }
/* the chart rule as the owner amended it on 28 Oct 2026 (figure() in build/build.js): wine on the value the title names, the
   largest by default, the largest change on a change chart. A range is a solid bar to its low end (--lo) and a hatched span to
   its high end inside a 1.5 px outline; the solid part is the mark's wine, or the tint when the span alone is what the title
   names (.span), and a reference value inside it is a 2 px ink tick, named beside it */
.chapter .hb.range .hb-r i, .chapter .col.range > i { --fill: var(--ctx); --edge: var(--rule-ink); position: relative; border-radius: 0; box-shadow: inset 0 0 0 1.5px var(--edge); }
.chapter .hb.range.top .hb-r i, .chapter .col.range.top > i { --fill: var(--accent); --edge: var(--accent); }
.chapter .hb.range.top.span .hb-r i, .chapter .col.range.top.span > i { --fill: var(--ctx); }
.chapter .hb.range .hb-r i { background: linear-gradient(90deg, var(--fill) 0 var(--lo), transparent var(--lo)), repeating-linear-gradient(135deg, var(--edge) 0 2px, transparent 2px 6px); }
.chapter .col.range > i { background: linear-gradient(0deg, var(--fill) 0 var(--lo), transparent var(--lo)), repeating-linear-gradient(135deg, var(--edge) 0 2px, transparent 2px 6px); }
.chapter .hb:has(.hb-ref) { margin-bottom: 18px; }
.chapter .hb-ref { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--ink); }
.chapter .hb-ref span, .chapter .col-ref span { font-style: normal; }
.chapter .hb-ref span { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12.5px; line-height: 1.2; color: var(--ink-2); }
/* a change, before and after (revision 5): one row per subject, its name and years at the left, then the axis, an open circle
   at the earlier value and an arrow to the later one, hairline ticks running through every row, and the change at the right */
.chapter .cg { margin: 0; font-family: var(--font-ui); font-size: 14px; font-variant-numeric: tabular-nums; } /* 14 px, so --lw and --vw (em) size its columns as the bars' do */
.chapter .cg-row { display: grid; grid-template-columns: min(var(--lw, 12em), 36%) minmax(0, 1fr) var(--vw, 7em); column-gap: 18px; align-items: center; }
.chapter .cg-l { min-width: 0; padding: 7px 0; line-height: 1.25; }
.chapter .cg-l b { display: block; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.chapter .cg-l small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.chapter .cg-row.top .cg-l b { font-weight: 600; }
.chapter .cg-t { position: relative; align-self: stretch; min-height: 50px; }
.chapter .cg-tick { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; background: var(--line); }
.chapter .cg-axis .cg-t { min-height: 24px; }
.chapter .cg-axis .cg-t span { position: absolute; bottom: 6px; transform: translateX(-50%); font-size: 12px; line-height: 1; color: var(--muted); white-space: nowrap; }
.chapter .cg-end { position: absolute; top: 3px; transform: translateX(-50%); font-size: 12px; line-height: 1; color: var(--ink-2); white-space: nowrap; }
.chapter .cg-from { position: absolute; z-index: 1; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; box-sizing: border-box; border: 1.6px solid var(--ink); border-radius: 50%; background: var(--bg); }
.chapter .cg-arrow { --c: var(--ink); --hl: 8px; --hw: 4.5px; position: absolute; top: 50%; height: 1.6px; margin-top: -0.8px; background: var(--c); }
.chapter .cg-arrow::before { content: ""; position: absolute; top: 50%; width: 0; height: 0; border-style: solid; transform: translateY(-50%); }
.chapter .cg-arrow[data-dir="down"]::before { left: -1px; border-width: var(--hw) var(--hl) var(--hw) 0; border-color: transparent var(--c) transparent transparent; }
.chapter .cg-arrow[data-dir="up"]::before { right: -1px; border-width: var(--hw) 0 var(--hw) var(--hl); border-color: transparent transparent transparent var(--c); }
.chapter .cg-row.top .cg-arrow { --c: var(--accent); --hl: 12px; --hw: 6.5px; height: 2.6px; margin-top: -1.3px; }
.chapter .cg-row.top .cg-from { border-color: var(--accent); }
.chapter .cg-v { font-size: 13.5px; font-weight: 400; color: var(--ink-2); white-space: nowrap; }
.chapter .cg-row.top .cg-v { font-size: 15px; font-weight: 700; color: var(--accent-ink); }
/* on a phone: narrower columns; a change row's name and years on one line over its axis */
@media screen and (max-width: 640px) {
  .chapter .col-ref span { width: 6em; white-space: normal; } /* "reference case 649" ran past the page at 320 px (WCAG reflow) */
  .chapter .cols { --ch: 150px; --cw: 96px; --cg: 10px; }
  .chapter .col > b, .chapter .cols-lab span { font-size: 12.5px; }
  .chapter .col.top > b { font-size: 13.5px; }
  .chapter .cg-row { grid-template-columns: minmax(0, 1fr) var(--vw, 7em); column-gap: 12px; } /* one width for every row's change, so the axes line up */
  .chapter .cg-axis .cg-t span:first-child { transform: none; } /* the axis's end labels stay inside the column */
  .chapter .cg-axis .cg-t span:last-child { transform: translateX(-100%); }
  .chapter .cg-l { grid-column: 1 / -1; padding: 12px 0 0; }
  .chapter .cg-l b, .chapter .cg-l small { display: inline; }
  .chapter .cg-l small { margin: 0 0 0 8px; }
  .chapter .cg-axis .cg-l { display: none; }
  .chapter .cg-t { min-height: 40px; }
  .chapter .cg-row.has-ends .cg-t { min-height: 46px; }
  .chapter .cg-row.has-ends .cg-arrow, .chapter .cg-row.has-ends .cg-from { top: 62%; }
}
/* parts inside a whole, on one scale (15.3, quick win A of 29 Oct 2026; figure() in build/build.js): the whole's words over its
   bracket, the total's words over its own, then the bar, an outline to the whole's low end (--lo) and hatched to its high end as
   a range is, with the parts carved inside it on hairlines of ground; under it each part's name and value on a leader, the
   rightmost first. --b is where the total ends. A row of names is --rh tall and the first sits --g under the bar, so each
   leader (row --i) runs from the bar's foot to its row. Hovering a part or its name lights both (FIG_JS) */
.chapter .pw { --rh: 24px; --g: 10px; --lx: 18px; --bh: 34px; margin: 0; font-family: var(--font-ui); font-size: 13.5px; line-height: 18px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.chapter .pw-lab { display: block; white-space: nowrap; }
.chapter .pw-lab b { font-weight: 600; color: var(--ink); }
.chapter .pw-whole { text-align: right; }
.chapter .pw-whole .pw-lab { white-space: normal; }
.chapter .pw-total { width: var(--b); margin-top: 6px; }
.chapter .pw-brk { display: block; box-sizing: border-box; height: 5px; margin-top: 4px; border: 1px solid var(--ink-2); border-bottom: 0; }
.chapter .pw-bar { position: relative; height: var(--bh); margin-top: 5px; }
.chapter .pw-bar::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1.5px var(--rule-ink); pointer-events: none; }
.chapter .pw-range { position: absolute; top: 0; bottom: 0; left: var(--lo); right: 0; border-left: 1.5px solid var(--rule-ink); background: repeating-linear-gradient(135deg, var(--rule-ink) 0 2px, transparent 2px 6px); }
.chapter .pw-part { position: absolute; top: 1.5px; bottom: 1.5px; left: calc(var(--x0) + 0.6px); width: calc(var(--w) - 1.2px); background: var(--ctx); transition: opacity .15s; }
.chapter .pw-part[data-k="0"] { left: 1.5px; width: calc(var(--w) - 2.1px); }
.chapter .pw-part.top { background: var(--accent); }
.chapter .pw-rows { margin-top: var(--g); }
.chapter .pw-row { position: relative; height: var(--rh); padding-left: calc(var(--b) + var(--lx)); line-height: var(--rh); white-space: nowrap; transition: opacity .15s; }
.chapter .pw-lead { position: absolute; box-sizing: border-box; left: var(--x); width: calc(var(--b) + var(--lx) - 6px - var(--x)); top: calc(2px - var(--g) - var(--i) * var(--rh)); height: calc(var(--g) - 2px + var(--i) * var(--rh) + var(--rh) / 2); margin-left: -0.5px; border: solid var(--rule-ink); border-width: 0 0 1px 1px; }
.chapter .pw-v { margin-left: 6px; font-size: 14px; font-weight: 400; color: var(--ink); }
.chapter .pw-row.top .pw-nm { font-weight: 600; color: var(--ink); }
.chapter .pw-row.top .pw-v { font-weight: 700; color: var(--accent-ink); }
.chapter .pw-row.top .pw-lead { border-color: var(--accent); }
.chapter .pw.has-lit .pw-part:not(.lit), .chapter .pw.has-lit .pw-row:not(.lit) { opacity: .35; }
.chapter .pw-row.lit .pw-lead { border-color: var(--ink); }
.chapter .pw-row.top.lit .pw-lead { border-color: var(--accent); }
@media screen and (max-width: 640px) {
  .chapter .pw { --rh: 22px; --lx: 14px; --bh: 30px; font-size: 12.5px; }
  .chapter .pw-v { font-size: 13px; }
}
/* the table a reader can switch to (Table, src/app.js Figs): the figure's own rows, ruled */
.chapter .figure.is-table table.fig-table { position: static; width: 100%; height: auto; margin: 0; clip: auto; clip-path: none; overflow: visible; white-space: normal; border-collapse: collapse; font-family: var(--font-ui); font-size: 14px; line-height: 20px; }
.chapter .figure.is-table table.fig-table caption { display: none; }
.chapter .figure.is-table table.fig-table th, .chapter .figure.is-table table.fig-table td { padding: 7px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.chapter .figure.is-table table.fig-table td { text-align: right; font-family: var(--font-ui); font-size: 14px; font-variant-numeric: tabular-nums; }
.chapter .figure.is-table .hbars, .chapter .figure.is-table .cols, .chapter .figure.is-table .cg, .chapter .figure.is-table .pw { display: none; }
/* the source line, as the live site sets it (the visual pass of 27 Oct 2026): no box, one quiet line under the chart, "Source:",
   the linked title and its footnote number; at the line's end the actions as small text links, Cite · Table · CSV · PNG; a
   note is one more quiet line, and an opened citation runs the full width under them. The source never shrinks to make room:
   when it and the actions do not fit one line, the actions go just under it, from the left (space-between sets a line's
   single item at its start) */
.chapter .fig-strip {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 24px; row-gap: 2px;
  margin: 0 24px; padding: 2px 0 16px; background: none; border: 0;
  font-family: var(--font-ui); font-size: var(--ui-s); line-height: 18px; color: var(--muted);
}
.chapter .fig-strip > * { flex: 0 0 auto; max-width: 100%; min-width: 0; }
.chapter .fig-strip > .fs-acts { display: flex; flex-wrap: nowrap; white-space: nowrap; }
.chapter .fig-strip > .fs-note, .chapter .fig-strip > .ch-cite-box { flex-basis: 100%; }
.chapter .fig-strip .fs-src a { color: var(--ink-2); text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.chapter .fig-strip .fs-src a:hover { color: var(--ink); text-decoration-color: var(--accent); }
/* the source's footnote number, in brackets on the line (it opens the same card as the marks in the text) */
.chapter .fig-strip sup.cite { font-size: var(--ui-s); vertical-align: baseline; line-height: inherit; margin-left: 2px; }
.chapter .fig-strip sup.cite a { font-family: var(--font-ui); font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.chapter .fig-strip sup.cite a::after { content: "]"; }
.chapter .fig-strip sup.cite a::before { content: "["; position: static; width: auto; height: auto; transform: none; }
.chapter .fig-strip .fs-note { max-width: 46em; line-height: 1.45; }
.chapter .fig-strip .fs-acts > a, .chapter .fig-strip .fs-acts > button {
  font: inherit; color: var(--ink-2); background: none; border: 0; padding: 3px 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); text-decoration-thickness: 1px;
}
/* a middle dot between two actions; an inline block, so the link's underline passes it by */
.chapter .fig-strip .fs-acts > * + *::before { content: "\00b7"; display: inline-block; width: 17px; text-align: center; color: var(--muted); }
.chapter .fig-strip .fs-acts > a:hover, .chapter .fig-strip .fs-acts > button:hover { color: var(--accent-ink); text-decoration-color: var(--accent); }
.chapter .fig-strip .fs-acts > [aria-pressed="true"] { color: var(--accent-ink); text-decoration-color: var(--accent); }
.chapter .fig-strip .ch-cite-box { margin: 6px 0 0; padding: 10px 14px; border-left: 2px solid var(--accent); background: var(--bg-2); }
.chapter .fig-strip .ch-cite-text { font-family: var(--font-body); font-size: var(--t-note); line-height: 1.5; color: var(--ink); }
.chapter .fig-strip .ch-cite-text a { font-family: var(--font-code); font-size: 12.5px; overflow-wrap: anywhere; } /* the figure's address, a code */
.chapter .fig-strip .ch-cite-copy { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--accent-ink); background: none; border: 0; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* an explainer animation: its steps above, the video, the caption under it */
.chapter .figure--anim .anim-bar { margin: 0 0 12px; }
.chapter .figure--anim .anim-cap { margin: 12px 0 0; font-family: var(--font-body); font-size: var(--t-small); }
/* a timeline: dates in mono on a hairline */
.chapter .figure .tl li { font-family: var(--font-body); font-size: var(--t-small); }
.chapter .figure .tl li::before { background: var(--ink); }

/* ---------- flashcards, sources, previous and next ---------- */
.chapter > .prose > .review { max-width: 40em; margin: 88px 0 0; padding-top: 14px; border-top: 1px solid var(--ink); }
.chapter .review .rv-head { display: block; }
.chapter .review .rv-title, .chapter .prose .review .rv-title {
  margin: 0 0 8px; padding: 0; border: 0; font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--opsz-title);
  font-size: var(--t-block); line-height: 1.2; letter-spacing: -0.01em; /* the end matter reads as end matter, smaller than the numbered sections (owner, 27 Oct) */
}
.chapter .review .rv-title::before { content: none; }
.chapter .review .rv-sub { font-family: var(--font-ui); font-size: 14px; color: var(--muted); }
.chapter .fc-deck { margin-top: 22px; }
.chapter .fc-face { padding: 24px 28px 22px; border: 0; background: var(--bg-2); }
.chapter .fc-behind { border: 0; background: color-mix(in srgb, var(--bg-2) 70%, var(--line)); }
.chapter .fc-behind--2 { background: color-mix(in srgb, var(--bg-2) 45%, var(--line)); }
.chapter .fc-row .label { font-family: var(--font-kicker); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); color: var(--muted); }
.chapter .fc-back .fc-row .label:last-child { color: var(--accent-ink); }
.chapter .fc-q { margin: 18px 0 22px; font-family: var(--font-body); font-weight: 400; font-size: var(--t-block); line-height: 1.32; letter-spacing: -0.005em; }
.chapter .fc-a { font-family: var(--font-body); font-weight: 600; font-size: var(--t-text); line-height: 1.4; }
.chapter .fc-why { font-family: var(--font-body); font-size: var(--t-small); line-height: 1.55; }
.chapter .fc-more { font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; }
/* the sources fold under an ink rule, their summary a section heading */
.chapter > .prose > .chapter-sources { max-width: 40em; margin: 88px 0 0; border-top: 1px solid var(--ink); }
.chapter .chapter-sources summary {
  padding: 16px 0 12px; font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--opsz-title);
  font-size: var(--t-block); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink);
}
.chapter .chapter-sources summary::after { font-family: var(--font-ui); font-size: 22px; font-weight: 300; }
.chapter .chapter-sources ol { font-size: var(--t-note); }
/* the door to the next chapter closes the chapter (the hybrid mockup's .nextx; build/build.js chapterDoor): The Chain shows one
   chapter at a time, so the door is the way on. On an ink rule, Previous small in the first quarter; the next chapter in the
   rest: where it sits in the chain, its title as large as a chapter's own, its one line and Continue as a pill with the
   arrow in an ink circle, beside a still of its specimen. The whole of it is one link. The readable page dist/<chapter>/
   ends on the same door. */
.chapter > .prose > .prevnext, .ch-page .endnav .prevnext {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: var(--g); align-items: start;
  max-width: none; margin: 96px 0 0; padding: 24px 0 8px; border-top: 1px solid var(--ink);
}
.chapter .prevnext .pn { display: block; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink); text-decoration: none; text-align: left; }
.chapter .prevnext .next { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: var(--g); align-items: start; }
.chapter .prevnext .next > * { grid-column: 1; }
.chapter .prevnext .next > .ex { grid-column: 2; grid-row: 1 / span 4; align-self: start; display: flex; justify-content: center; padding-top: 28px; }
.chapter .prevnext .ex img { display: block; width: auto; height: auto; max-width: 100%; max-height: 180px; }
.chapter .prevnext .ex[data-night] img { border-radius: 2px; }
/* the still is a light render, turned light-on-dark as the readable page turns it; its box carries the ground, so the screen
   blend has the ground to work on inside the app's own layer (#app stacks above the page's ground) */
:root[data-theme="dark"] .chapter .prevnext .ex:not([data-night]) { isolation: isolate; background: var(--bg); }
:root[data-theme="dark"] .chapter .prevnext .ex:not([data-night]) img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
.chapter .prevnext .prev { grid-column: 1; grid-row: 1; }
.chapter .prevnext .pn .label { display: block; margin: 0 0 12px; font-family: var(--font-kicker); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); line-height: 16px; color: var(--muted); }
.chapter .prevnext .prev .label { margin-bottom: 6px; }
.chapter .prevnext .prev .t { display: block; font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--opsz-title); font-size: var(--t-text); line-height: 1.35; letter-spacing: 0; color: var(--ink-2); overflow-wrap: normal; }
.chapter .prevnext .next .t {
  display: block; max-width: 16em; margin: 0 0 12px -0.02em; font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--opsz-title);
  font-size: var(--t-section); line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; overflow-wrap: normal; /* was 44 to 68 px: too loud for a way on (owner, 27 Oct) */
}
.chapter .prevnext .next .ol { display: block; max-width: 34em; margin: 0 0 22px; font-family: var(--font-body); font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.chapter .prevnext .go {
  display: inline-flex; justify-self: start; align-items: center; gap: 16px; height: 48px; padding: 0 6px 0 22px; border: 1px solid var(--ink); border-radius: 999px;
  font-family: var(--font-ui); font-size: 15px; font-weight: 500; line-height: 1; color: var(--ink); white-space: nowrap;
}
.chapter .prevnext .go .circ { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 17px; line-height: 1; }
.chapter .prevnext .pn:hover .t { color: var(--accent-ink); }
.chapter .prevnext .next:hover .go { border-color: var(--accent); color: var(--accent-ink); }
.chapter .prevnext .next:hover .go .circ { background: var(--accent-fill); color: #fff; }
.chapter .prevnext .pn:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

/* ---------- under 1200 px: one column from the left margin, the rail a line of links between the opener and the specimen ---------- */
@media (max-width: 1199px) {
  .chapter .ch-open { grid-column: 1 / -1; }
  .chapter .ch-rail { grid-column: 1 / -1; grid-row: 2; position: static; max-height: none; overflow: visible; margin-top: 36px; padding: 0; }
  .chapter .ch-rail .rail-figs-w, .chapter .ch-rail .rail-chain-w { display: none; }
  .chapter .rail-toc { display: flex; flex-wrap: wrap; gap: 4px 22px; }
  .chapter .rail-toc a { padding: 2px 0; border: 0; border-bottom: 1px solid var(--rule-ink); font-size: 14.5px; line-height: 24px; }
  .chapter .rail-toc a[aria-current] { font-weight: 400; border-bottom-color: var(--rule-ink); }
  .chapter .ch-spec { grid-column: 1 / -1; grid-row: 3; }
  .chapter .plain { grid-column: 1 / -1; grid-row: 4; }
  .chapter .inshort { grid-column: 1 / -1; grid-row: 5; }
  .chapter > .prose { grid-column: 1 / -1; grid-row: 6; }
  /* a readable page has no other way to the other stages (The Chain in the app has its contents and its sheet), so under 1200 px
     its rail keeps The chain, compact: one numbered cell a chapter with its band's mark, the chapter's name in the link's label */
  .page--chapter .chapter .ch-rail .rail-chain-w { display: block; margin-top: 18px; }
  .page--chapter .chapter .ch-rail .rail-chain, .page--chapter .chapter .ch-rail .rail-across { display: flex; flex-wrap: wrap; gap: 4px; }
  .page--chapter .chapter .ch-rail .rail-across { margin: 4px 0 0; padding: 0; border: 0; }
  .page--chapter .chapter .ch-rail .stage-cell a,
  .page--chapter .chapter .ch-rail .rail-across .stage-cell a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 36px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 3px; }
  .page--chapter .chapter .ch-rail .stage-cell .t { display: none; }
  .page--chapter .chapter .ch-rail .stage-cell .n { font-size: 12px; color: var(--ink-2); }
  .page--chapter .chapter .ch-rail .stage-cell .meter { justify-self: auto; }
  .page--chapter .chapter .ch-rail .stage-cell a:hover { border-color: var(--ink); }
  .page--chapter .chapter .ch-rail .stage-cell[aria-current="true"] a { border-color: var(--accent); }
  .page--chapter .chapter .ch-rail .rail-across::before { content: ""; display: block; flex: 0 0 100%; height: 0; }
}

/* ---------- the app's phone (under 900 px): one column; the specimen is the strip at the foot of the screen ---------- */
@media (max-width: 900px) {
  /* one column in reading order: the opener, On this page, then In plain terms, In short and the text, the card in it after the
     lead; nothing stands between the opener and the text (the specimen is the strip; a readable page shows its still after the
     opener) */
  article.chapter { display: flex; flex-direction: column; align-items: stretch; padding: 36px 0 24px; }
  article.chapter > .chapter-head > *, article.chapter > .ch-rail, article.chapter > .prose { min-width: 0; }
  .chapter .ch-open { order: 1; } .chapter .ch-spec { order: 2; } .chapter .ch-rail { order: 3; }
  .chapter .plain { order: 4; } .chapter .inshort { order: 5; } article.chapter > .prose { order: 6; }
  .chapter .ch-kick { gap: 4px 14px; }
  .chapter .ch-title, .chapter .ch-title.is-long { margin: 16px 0 0 -0.04em; font-size: var(--t-title); line-height: 0.98; }
  .chapter .ch-title.is-long { font-size: min(46px, 11vw); line-height: 1.02; }
  .chapter .ch-lede { margin-top: 16px; font-size: var(--t-lead); line-height: 1.38; }
  .chapter .ch-omet { margin-top: 14px; }
  .chapter .ch-omet .ch-cite-line { gap: 4px 22px; }
  .view[data-view="stack"] .chapter .ch-spec { display: none; }
  .chapter .ch-spec { margin-top: 28px; }
  .chapter .ch-rail { margin-top: 36px; }
  .chapter .plain { margin-top: 32px; }
  .chapter .plain p { font-size: var(--t-text); line-height: 1.55; }
  .chapter .inshort p, .chapter .inshort li { font-size: var(--t-text); }
  .chapter > .prose > h2 { margin-top: 56px; font-size: var(--t-section); }
  .chapter > .prose > p, .chapter > .prose > ul, .chapter > .prose > ol { font-size: var(--t-text); }
  .chapter .figure { margin: 28px calc(-1 * var(--margin)) 36px; border-left: 0; border-right: 0; }
  .chapter .fig-head { padding: 16px var(--margin) 0; }
  .chapter .fig-body { padding: 14px var(--margin) 12px; }
  .chapter .fig-strip { margin: 0 var(--margin); }
  .chapter .figure .fig-title { font-size: var(--t-text); line-height: 1.3; }
  /* as the card: in The Chain a figure stays in the column, since the chapter's paint containment would clip a bleed */
  .view[data-view="stack"] .chapter .figure { margin: 28px 0 36px; }
  .view[data-view="stack"] .chapter .fig-head, .view[data-view="stack"] .chapter .fig-body { padding-left: 0; padding-right: 0; }
  .view[data-view="stack"] .chapter .fig-strip { margin: 0; }
  .chapter .fig-strip > .fs-acts { flex-wrap: wrap; }
  .chapter .fc-face { padding: 20px 18px; }
  .chapter .fc-q { font-size: var(--t-lead); }
  /* the door: the next chapter first, its still under the button, then Previous */
  .chapter > .prose > .prevnext, .ch-page .endnav .prevnext { grid-template-columns: minmax(0, 1fr); margin-top: 64px; padding-top: 20px; }
  .chapter .prevnext .next { grid-column: 1; grid-row: 1; display: block; }
  .chapter .prevnext .next > .ex { justify-content: flex-start; padding-top: 28px; }
  .chapter .prevnext .ex img { max-width: 48%; max-height: 160px; }
  .chapter .prevnext .prev { grid-column: 1; grid-row: 2; margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line-2); }
  .chapter .prevnext .next .t { font-size: var(--t-section); line-height: 1.1; }
  .chapter .prevnext .next .ol { font-size: var(--t-small); }
}

/* the card on a phone, in the column with padding of its own (in The Chain each chapter keeps its paint inside its box,
   content-visibility, which would clip a bleed: stage 2 review, item 3); each label over its answer. Screen only: a printed
   page is narrower than 900 px too, and paper sets the card its own way (src/modules/print.css) */
@media screen and (max-width: 900px) {
  .chapter .plate { margin: 36px 0 0; padding: 18px 16px 10px; }
  .chapter .plate-kpis { grid-template-columns: 1fr; row-gap: 0; padding: 0; }
  .chapter .plate .plate-kpis > div { padding: 14px 0; border-top: 1px solid var(--line-2); }
  .chapter .plate .plate-kpis > div:first-child { border-top: 0; }
  .chapter .plate-kpis .v { margin: 8px 0 6px; font-size: var(--t-block); }
  .chapter .plate-rows .row, .chapter .plate-rows .row--why, .chapter .plate .plate-status > div { display: block; }
  .chapter .plate-rows dt, .chapter .plate-status .k { display: block; padding: 0 0 8px; }
  .chapter .plate-rows li { grid-template-columns: 28px minmax(0, 1fr); }
  .chapter .plate-rows li .note { grid-column: 2; }
}

/* ---------- the stage beside the page, on The Chain and elsewhere ---------- */
@media (min-width: 901px) {
  /* The Chain draws its specimen in each chapter's slot, so the stage beside the page stands down there */
  html[data-view="stack"] .stage { display: none; }
  /* with no stage beside the page, Back to top returns to the window's foot */
  html[data-view="stack"] body:has(.stage[data-hidden]) .to-top { top: auto; bottom: 20px; }
  /* the caption stands right under the drawing: the empty band the drawing leaves at the canvas's foot (--slack, Stage.fit) */
  .stage .stage-tag { margin-top: calc(-1 * var(--slack, 0px)); transition: margin-top 0.3s var(--ease, ease); }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) { .stage .stage-tag, .chapter .ch-spec-cap { transition: none; } }
/* the parts list rides in the phone strip's caption on The Chain, shown once the strip is expanded */
.stage .stage-parts { display: none; }
@media (max-width: 900px) {
  .stage[data-collapsed="0"] figcaption { display: block; -webkit-line-clamp: unset; max-height: 9.5em; overflow-y: auto; }
  .stage[data-collapsed="0"] .stage-parts { display: block; }
  .stage .stage-parts .ch-parts-k { margin-top: 0; }
  .stage[data-collapsed="0"] .stage-parts + .stage-cap-t { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
  .stage .stage-parts .ch-parts { font-size: 12.5px; }
}

/* ---------- the phone's slim bar: where the reader is, once the masthead has gone up (src/app.js Slim) ---------- */
.ch-slim { display: none; }
@media (max-width: 900px) {
  .ch-slim {
    display: flex; align-items: center; gap: 10px; position: fixed; left: 0; right: 0; top: 0; z-index: 39; height: 40px;
    padding: 0 16px; background: var(--bg); border-bottom: 1px solid var(--line-2); color: var(--ink); text-decoration: none;
    transform: translateY(-100%); visibility: hidden; transition: transform 0.25s var(--ease, ease), visibility 0s 0.25s;
    font-family: var(--font-ui); font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden;
  }
  .ch-slim .n { flex: none; font-family: var(--font-ui); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .ch-slim .t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
  .ch-slim .s { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
  .ch-slim .s:not(:empty)::before { content: "\00b7"; margin: 0 8px 0 0; color: var(--muted); }
  html.slim-on .ch-slim { transform: none; visibility: visible; transition: transform 0.25s var(--ease, ease); }
  /* a link into The Chain lands clear of the slim bar too (--band joins --masthead in every landing offset) */
  html[data-view="stack"] { --band: 40px; }
  html.slim-on:not(.mast-up) .ch-slim { top: var(--masthead); }
  .masthead { transition: transform 0.25s var(--ease, ease); }
  html.mast-up .masthead { transform: translateY(-100%); }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .ch-slim, .masthead { transition: none; } }

@media print {
  .ch-slim, .chapter .ch-rail .rail-part, .chapter .ch-spec-draw, .chapter .fig-strip .fs-acts { display: none !important; }
}

/* ---------- the readable page dist/<chapter>/ (build/modules/social.js): the same chapter, with no live drawing ---------- */
.page.page--chapter { max-width: none; padding: 0 var(--margin); }
.chapter .print-only { display: none; }
article.ch-page { padding-top: 56px; border-top: 0; }
.ch-page .ch-omet .cta { margin: 18px 0 0; }
.ch-page .ch-omet .ch-cite { margin: 10px 0 0; }
.ch-page .ch-omet .ch-cite-line { font-family: var(--font-ui); }
/* the specimen: the still where the app draws the live one, at the measure, its caption and parts under it as in The Chain, and
   the way to the live one; Lithography's still carries its numbered parts */
.ch-page .ch-spec:not(.has-still) .ch-spec-cap { margin: 0; } /* only if a chapter has no still yet: a plain caption, flush left */
/* a chapter's still (qa/redesign/stills.js): centered in the plate, no taller than the app's slot draws it; on the dark theme it
   is turned light-on-dark as Lithography's is, and the two chapters that are not stages keep their night ground */
.ch-page .ch-still-img { display: block; width: auto; height: auto; max-width: 100%; max-height: 380px; margin: 0 auto; }
@media (max-width: 760px) { .ch-page .ch-still-img { max-height: min(380px, 52vh); } }
:root[data-theme="dark"] .ch-page .ch-spec:not([data-night]) .ch-still-img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
.ch-page .ch-spec.has-still .ch-spec-draw { height: auto; }
.ch-page .ch-spec[data-night].has-still .ch-spec-draw { padding: 24px; }
.ch-page .ch-spec.has-still .ch-spec-cap { margin: 14px 0 0; } /* a still has no empty band to rise into */
.ch-page .ch-spec-3d { display: inline-block; margin-top: 10px; font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--accent-ink); }
.ch-still { display: block; width: 100%; height: auto; overflow: visible; }
.ch-still--narrow { display: none; }
@media (max-width: 560px) { .ch-still--wide { display: none; } .ch-still--narrow { display: block; } }
.ch-still line { stroke: var(--ink); }
.ch-still .dot { fill: var(--ink); stroke: var(--bg); stroke-width: 2.4; }
.ch-still .bal { fill: var(--bg); stroke: var(--ink); }
.ch-still .num { font-family: var(--font-ui); font-weight: 700; fill: var(--ink); }
.ch-still .nm { font-family: var(--font-ui); font-weight: 600; fill: var(--ink); }
/* the still is a light render: on the dark theme it is turned to light-on-dark, its blue kept blue */
:root[data-theme="dark"] .ch-still image { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; } /* screen: the inverted white ground, now black, takes the page's own dark */
.ch-page .plain h2.label { display: block; margin: 14px 0 22px; padding: 0; font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--opsz-title); font-size: var(--t-section); line-height: 1.08; letter-spacing: -0.02em; text-transform: none; color: var(--ink); }
.ch-page .inshort h2.label { margin: 0 0 12px; font-family: var(--font-ui); font-weight: 500; font-size: var(--ui); line-height: 20px; color: var(--ink); letter-spacing: 0; text-transform: none; }
.ch-page > .prose > h2 {
  counter-increment: sec; margin: 72px 0 22px; padding-top: 14px; border-top: 1px solid var(--ink); max-width: 666px; /* its rule spans the text and figures under it */
  font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--opsz-title); font-size: var(--t-section); line-height: 1.12; letter-spacing: -0.015em;
}
.ch-page > .prose > h2::before { content: counter(sec, decimal-leading-zero); display: block; margin: 0 0 14px; font-family: var(--font-kicker); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); line-height: 16px; color: var(--muted); }
.ch-page > .prose > h3 { counter-increment: none; margin: 40px 0 14px; padding: 0; border: 0; font-family: var(--font-display); font-weight: 500; font-variation-settings: var(--opsz-title); font-size: var(--t-lead); line-height: 1.27; letter-spacing: -0.005em; }
.ch-page > .prose > h3::before { content: none; }
.ch-page > .prose > .review, .ch-page > .prose > .sources, .ch-page > .prose > .endnav > :not(.prevnext) { max-width: 40em; }
.ch-page > .prose > .sources { margin-top: 88px; padding-top: 14px; border-top: 1px solid var(--ink); }
.ch-page .review h2.label, .ch-page .sources h2.label { margin: 0 0 14px; font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--opsz-title); font-size: var(--t-block); line-height: 1.2; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.ch-page > .prose > .endnav { margin-top: 88px; }
/* the door, after the way to the interactive chapter and the related chapters (the shared rules above), as wide as The Chain's */
.ch-page > .prose > .endnav { max-width: none; }
.ch-page .endnav .prevnext { margin-top: 64px; }
@media (max-width: 900px) {
  article.ch-page { padding-top: 32px; }
  .ch-page .ch-spec[data-night].has-still .ch-spec-draw { padding: 16px; }
}
@media print { .ch-page .ch-spec-3d { display: none; } }

/* the specimen stills and explainer videos are rendered on white; on the barely off-white ground they multiply into it, so no
   white box shows round them (27 Oct). Each sits in a box that carries the ground, so the blend has the ground to work on. */
:root:not([data-theme="dark"]) .chapter .prevnext .ex:not([data-night]) { isolation: isolate; background: var(--bg); }
:root:not([data-theme="dark"]) .chapter .prevnext .ex:not([data-night]) img,
:root:not([data-theme="dark"]) .ch-page .ch-spec:not([data-night]) .ch-still-img,
:root:not([data-theme="dark"]) .ch-still image,
:root:not([data-theme="dark"]) .anim-stage video, :root:not([data-theme="dark"]) .anim-stage img { mix-blend-mode: multiply; }
:root:not([data-theme="dark"]) .ch-page .ch-spec:not([data-night]), :root:not([data-theme="dark"]) .anim-stage { isolation: isolate; background: var(--bg); }


/* module: chips.css */
/* AI Chips: the shelves (design round seven, option B, chosen 28 Oct 2026; qa/design7/b/ in the main checkout, built from
   qa/design7/BUILD-SHELVES.md). The head sets the title and the standfirst beside the field chart; under it one ruled shelf
   per maker holds that maker's packages, drawn from above at one scale; a chip opens in place under its shelf as a chip card
   set like the chokepoint card, on the card's gray ground, and widens into two to four columns to compare. Wine marks the
   largest value, the reader's chip and links. Source Serif 4 sets the words and the large numbers, Hanken Grotesk the small
   labels. Nothing is under 11 px. src/app.js Landscape draws it; every rule is scoped to #aic (.aic), so the shared parts of
   the other views never reach it. */

.view[data-view="landscape"] { width: 100%; padding: 0 var(--margin); }
:root {
  --aic-die: #171716; --aic-hbm: #b9b7b0; --aic-hbm-line: #8c8a84; --aic-base: #d7d6d0; --aic-int: #efeeea; --aic-sub: #fcfcfa; --aic-dot: #8c8a84;
}
:root[data-theme="dark"] {
  --aic-die: #e8e7e3; --aic-hbm: #5f5e59; --aic-hbm-line: #8c8a84; --aic-base: #3a3a37; --aic-int: #1f1f1d; --aic-sub: #121211; --aic-dot: #8c8a84;
}
.aic { position: relative; font-variant-numeric: lining-nums; line-height: 1.55; }
.aic p { margin: 0; }
.aic h1, .aic .vt, .aic h2, .aic h3, .aic h4, .aic h5 { font-weight: 400; margin: 0; }
.aic svg.plan, .aic svg.chart { display: block; max-width: none; }
.aic .cap { font: 500 12.5px/16px var(--font-ui); letter-spacing: .085em; text-transform: uppercase; color: var(--muted); margin: 0; }

/* ---------------------------------------------------------------- the head: the title and the standfirst beside the field chart */
.aic .head { padding-top: clamp(40px, 7vh, 64px); }
.aic .head-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 24px 64px; align-items: stretch; }
.aic .head-l { display: flex; flex-direction: column; min-width: 0; }
.aic .head .vt { margin: 0 0 0 -0.045em; font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--opsz-title); font-size: var(--t-title); line-height: 0.92; letter-spacing: -0.03em; } /* the seven steps (28 Oct 2026) */
.aic .head .dek { margin: 24px 0 0; max-width: 24em; font-family: var(--font-body); font-size: var(--t-lead); line-height: 1.38; color: var(--ink-2); }
.aic .hfig { margin: 0; min-width: 0; }
.aic .hfig .fig-h { font: 400 var(--t-lead)/1.35 var(--font-body); margin: 0 0 12px; }
.aic .head .finding { margin: 28px 0 0; max-width: 31.5em; padding-top: 14px; border-top: 1px solid var(--line-2); font: 400 var(--t-text)/1.5 var(--font-body); color: var(--ink); }
.aic .hfig .fcap { font: 400 var(--t-small)/1.5 var(--font-body); color: var(--muted); margin-top: 6px; max-width: 666px; }
.aic .chart-host { min-height: 250px; }
/* the key to the drawings: the marks a shelf uses, and the shelves' scale */
.aic .key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: auto; padding-top: 28px; font: 400 13px/1.3 var(--font-ui); color: var(--muted); }
.aic .key .ki { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.aic .key .sw { width: 12px; height: 12px; display: inline-block; flex: none; border: 1px solid var(--ink-2); }
.aic .key .sw.die { background: repeating-linear-gradient(45deg, var(--ink) 0 1px, transparent 1px 3.2px); border-color: var(--ink); }
.aic .key .sw.hbm { background: var(--aic-hbm); }
.aic .key .sw.int { background: var(--aic-int); }

/* ---------------------------------------------------------------- the shelves: one ruled row per maker */
.aic .shelves { margin-top: 30px; }
.aic .shelf-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.aic .shelf { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 0 24px; padding: 20px 0 16px; border-bottom: 1px solid var(--line); }
.aic .sh-mk h2 { font: 400 21px/1.3 var(--font-body); }
.aic .sh-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: flex-start; }
.aic .own-scale { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font: 400 13px/1.4 var(--font-ui); color: var(--muted); margin-top: 8px; max-width: 15em; }
.aic .it-b { display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: left; padding: 0; border-radius: 3px; }
.aic .it-b .pic { display: flex; align-items: flex-end; margin-bottom: 9px; }
.aic .it-b .nm { font: 400 var(--t-text)/1.25 var(--font-body); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.aic .it-b .yr { font: 400 12.5px/1.4 var(--font-ui); color: var(--muted); }
.aic .it-b:hover .nm { color: var(--accent-ink); text-decoration-color: var(--accent); }
.aic .it-b:hover .plan .p-sub { stroke: var(--accent); }
.aic .it.on .nm { color: var(--accent-ink); text-decoration-color: var(--accent); }
.aic .nodraw { display: block; width: 36px; height: 26px; border: 1px dashed var(--line-2); border-radius: 2px; }
.aic .sh-foot { margin-top: 16px; }

/* ---------------------------------------------------------------- the package plan, at one scale */
.aic .plan .p-sub { fill: var(--aic-sub); stroke: var(--ink-2); stroke-width: 1; }
.aic .plan .p-int { fill: var(--aic-int); stroke: var(--ink-2); stroke-width: .8; }
.aic .plan .p-base { fill: var(--aic-base); stroke: var(--ink-2); stroke-width: .8; }
.aic .plan .p-die { fill: var(--aic-die); stroke: var(--aic-die); stroke-width: 1; }
.aic .plan.big .p-die { fill: url(#aic-hatch); stroke: var(--ink); stroke-width: 1.3; }
.aic .plan .p-hbm { fill: var(--aic-hbm); stroke: var(--ink-2); stroke-width: .8; }
.aic .plan.big .p-hbm { fill: url(#aic-stack); }
.aic .plan.mid .p-die { fill: url(#aic-hatch-s); stroke: var(--ink); stroke-width: 1; }
.aic .plan.mid .p-hbm { fill: var(--aic-hbm); stroke: var(--ink-2); stroke-width: .7; }
.aic .plan.mid .p-sub { stroke-width: .8; }
.aic .plan.sel .p-die { fill: url(#aic-hatch-w); stroke: var(--accent); }
.aic .plan.sel .p-sub { stroke: var(--accent); stroke-width: 1.4; }
.aic .plan .p-wafer { fill: var(--aic-int); stroke: var(--ink-2); stroke-width: 1; }
.aic .plan .p-grid { stroke: var(--bg); stroke-width: .6; opacity: .55; }
.aic .plan.big .p-grid { stroke: var(--ink); stroke-width: .5; opacity: .5; }
.aic .plan .p-ref { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 4 3; }
.aic .plan .p-ref-t { font: 400 12.5px var(--font-ui); fill: var(--muted); }
.aic .plan .lead { stroke: var(--ink); stroke-width: .9; fill: none; }
.aic .plan .lead-halo { stroke: var(--bg); stroke-width: 4; fill: none; stroke-linecap: round; }
.aic .plan .lead-dot { fill: var(--ink); stroke: var(--bg); stroke-width: 1.5; }
.aic .plan .co-c { fill: var(--bg); stroke: var(--ink); stroke-width: 1; }
.aic .plan .co-n { font: 500 11.5px var(--font-ui); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.aic .plan .co-t { font: 400 14px var(--font-ui); fill: var(--ink); dominant-baseline: central; }
#aic-defs .aic-hl { stroke: var(--ink); stroke-width: 1.1; }
#aic-defs .aic-hl.aic-s { stroke-width: .9; }
#aic-defs .aic-hl.aic-w { stroke: var(--accent); stroke-width: 1.1; }
#aic-defs .aic-hs { stroke: var(--aic-hbm-line); stroke-width: .9; }
#aic-defs .aic-hbk { fill: var(--aic-hbm); }
#aic-defs .aic-hd { fill: var(--bg); }
.aic .scalebar { display: inline-flex; align-items: center; gap: 8px; font: 400 12.5px/1 var(--font-ui); color: var(--muted); white-space: nowrap; flex: none; }
.aic .scalebar i { display: block; height: 6px; border: 1px solid var(--ink-2); border-top: 0; }

/* ---------------------------------------------------------------- small parts: notes, sources, the text actions */
.aic .said { font: 400 15.5px/1.5 var(--font-body); color: var(--muted); margin-top: 18px; max-width: 40em; }
.aic .said a, .aic .srcline a { color: var(--ink-2); }
.aic .srcline { font: 400 15.5px/1.5 var(--font-body); color: var(--muted); }
.aic .srcline a:hover { color: var(--accent-ink); }
.aic .note-s { font: 400 15.5px/1.55 var(--font-body); color: var(--muted); }
.aic .nil { color: var(--line-2); }
.aic sup.cm { font: 500 11px/0 var(--font-ui); margin-left: 2px; vertical-align: super; }
.aic sup.cm a { position: relative; font-family: var(--font-mono); color: var(--muted); text-decoration: none; padding: 0 1px; } /* gray, as in the chapters: wine marks each row's largest value */
.aic sup.cm a:hover, .aic sup.cm a:focus-visible { color: var(--accent-ink); background: var(--accent-soft); text-decoration: none; }
.aic sup.cm a::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 24px); height: max(100%, 26px); transform: translate(-50%, -50%); }
/* the site's text action, as "Link to chapter" is set */
.aic .tact { font: 500 15px/22px var(--font-ui); color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 7px; padding: 4px 0 8px; white-space: nowrap; }
.aic .tact:hover { color: var(--accent-ink); text-decoration-color: var(--accent); }
/* a quiet text button: Hanken, underlined, says what it does */
.aic .tbtn { font: 500 14px/20px var(--font-ui); color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-ink); text-decoration-thickness: 1px; text-underline-offset: .3em; padding: 4px 0; }
.aic .tbtn:hover { color: var(--accent-ink); text-decoration-color: var(--accent); }

/* ---------------------------------------------------------------- who makes it: lines like the chokepoint card */
.aic .parts { list-style: none; margin: 0; padding: 0; }
.aic .parts li { display: grid; grid-template-columns: 26px 120px minmax(0, 1fr); gap: 0 14px; padding: 0 0 14px; align-items: baseline; }
.aic .parts li + li { padding-top: 12px; border-top: 1px solid var(--line-2); }
.aic .parts .no { width: 22px; height: 22px; border: 1px solid var(--ink); border-radius: 50%; display: inline-grid; place-items: center; font: 500 11.5px/1 var(--font-ui); transform: translateY(-1px); }
.aic .parts .no.none { border-color: transparent; }
.aic .parts .k { font: 500 12.5px/18px var(--font-ui); letter-spacing: .085em; text-transform: uppercase; color: var(--muted); }
.aic .parts .v { font: 400 17px/1.5 var(--font-body); min-width: 0; }
.aic .parts .v b, .aic .cmp-t b { font-weight: 600; }
.aic .l1, .aic .l2 { display: block; }
.aic .l2 { color: var(--muted); font-size: .94em; margin-top: 1px; }

/* ---------------------------------------------------------------- notes and sources */
.aic .notes { font: 400 17.5px/1.6 var(--font-body); max-width: 40em; }
.aic .notes p { margin: 0 0 1em; }
.aic .notes p:last-child { margin-bottom: 0; }
.aic .srcs { margin: 0; padding: 0 0 0 26px; font: 400 15px/1.5 var(--font-body); color: var(--ink-2); max-width: 44em; }
.aic .srcs li { padding: 3px 0 3px 4px; }
.aic .srcs li::marker { font: 500 12px var(--font-ui); color: var(--muted); }
.aic .srcs li:target { background: var(--accent-soft); }
.aic .srcs a { text-decoration-color: var(--line-2); }

/* ---------------------------------------------------------------- the field chart */
.aic .chart .grid { stroke: var(--line); stroke-width: 1; }
.aic .chart .base { stroke: var(--ink); stroke-width: 1; }
.aic .chart .tick { font: 400 12.5px var(--font-ui); fill: var(--muted); }
.aic .chart .unit { font: 500 12px var(--font-ui); fill: var(--muted); letter-spacing: .06em; }
.aic .chart .dot { fill: var(--bg); stroke: var(--aic-dot); stroke-width: 1.4; }
.aic .chart .dot.top { fill: var(--accent-fill); stroke: var(--accent-fill); }
.aic .chart .ring { fill: none; stroke: var(--accent); stroke-width: 1.8; }
.aic .chart .dot.mine { fill: var(--accent-fill); stroke: var(--bg); stroke-width: 1.5; }
.aic .chart .lab { font: 400 12.5px var(--font-ui); fill: var(--ink-2); }
.aic .chart .lab.top { font-weight: 600; fill: var(--ink); }
.aic .chart .lab.mine { font-weight: 600; fill: var(--accent-ink); }
.aic .chart .lab-h { stroke: var(--bg); stroke-width: 4; stroke-linejoin: round; paint-order: stroke; }
.aic .chart .off { fill: var(--muted); }
.aic .chart .off.top { fill: var(--accent-fill); }
.aic .chart .hov { pointer-events: none; }
.aic .chart .hov .lab { font-weight: 600; fill: var(--ink); }
.aic .chart .hov circle { fill: var(--ink); stroke: var(--bg); stroke-width: 1.5; }
.aic svg.chart { outline: none; }
.aic svg.chart:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 6px; border-radius: 4px; }
.aic .chart .foc .kf { fill: none; stroke: var(--accent); stroke-width: 2; }
/* the head's chart and the shelves, linked (quick win B, 29 Oct 2026; src/app.js Landscape, Lk): the dot of the package under
   the pointer or the focus in ink, ringed, with its name and figure; the package a dot led to ringed in ink, its name in wine,
   and flashed once as it comes into view */
.aic .chart .lit { pointer-events: none; }
.aic .chart .lit .lit-dot { fill: var(--ink); stroke: var(--bg); stroke-width: 1.5; }
.aic .chart .lit .lit-ring { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.aic .chart .lit .lit-lab { font-weight: 600; fill: var(--ink); }
.aic .chart .lit .lit-none { font-weight: 500; fill: var(--ink-2); }
.aic li.it.is-lit .it-b .nm { color: var(--accent-ink); text-decoration-color: var(--accent); }
.aic li.it.is-lit .it-b .pic { outline: 1.5px solid var(--ink); outline-offset: 6px; border-radius: 2px; }
@keyframes aic-flash { 0%, 30% { background: var(--accent-soft); box-shadow: 0 0 0 8px var(--accent-soft); } 100% { background: transparent; box-shadow: 0 0 0 8px transparent; } }
.aic .it-b.flash { animation: aic-flash 1.8s ease-out; }
@media (prefers-reduced-motion: reduce) { .aic .it-b.flash { animation: none; } }
.aic .ctip { position: absolute; z-index: 6; min-width: 170px; max-width: 260px; background: var(--bg); border-radius: 8px; box-shadow: var(--shadow); padding: 10px 14px 12px; pointer-events: auto; }
.aic .ct-n { font: 400 18px/1.25 var(--font-body); }
.aic .ct-n span { font: 400 13px/1 var(--font-ui); color: var(--muted); margin-left: 8px; }
.aic .ct-v { font: 400 13.5px/1.4 var(--font-ui); color: var(--ink-2); margin: 3px 0 6px; }
.aic .ctip .tbtn { font-size: 14px; padding: 2px 0; }
.aic .mselect { appearance: none; -webkit-appearance: none; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23171716' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 2px center / 12px 8px; padding: 0 22px 1px 0; font: inherit; color: var(--ink); cursor: pointer; }
:root[data-theme="dark"] .aic .mselect { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23e8e7e3' stroke-width='1.4'/%3E%3C/svg%3E"); }
.aic .mselect:hover { border-bottom-color: var(--accent); }
.aic .mselect option { font-size: 16px; color: #171716; background: #fff; }

/* ---------------------------------------------------------------- the chip card, set like the chokepoint card */
.aic .card-li { padding: 0 0 26px; border-bottom: 1px solid var(--line); }
.aic .card { position: relative; background: var(--bg-2); padding: 22px 32px 34px; margin-top: 4px; }
.aic .card .tact, .aic .card .tbtn { background: none; }
.aic .card-top { display: flex; align-items: baseline; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.aic .card-top .card-m { font: 400 14px/1.3 var(--font-ui); color: var(--muted); }
.aic .card-top [data-home] { font-size: 14px; padding: 2px 0; margin-left: auto; }
.aic .card-top .tact { padding: 0 0 2px; }
.aic .card-top .four { font: 400 14px/1.3 var(--font-ui); color: var(--muted); }
/* one chip: the name and the drawing, then the figures in one row, then ruled rows with their label at the left */
.aic .card-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 24px 48px; padding: 30px 0; align-items: start; }
.aic .ci-text h2 { font: 400 clamp(46px, 4.4vw, 60px)/1.02 var(--font-display); letter-spacing: -0.018em; margin: 0 0 14px -0.03em; outline: none; }
.aic .ci-text .dek { font: 400 19.5px/1.45 var(--font-body); color: var(--ink-2); max-width: 22em; margin-bottom: 26px; }
.aic .ci-pic { margin: 0; }
.aic .ci-pic figcaption { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; max-width: 34em; }
.aic .cap-t { font: 400 15px/1.5 var(--font-body); color: var(--muted); }
.aic .card .plan .lead-halo { stroke: var(--bg-2); }
.aic .card .plan .co-c { fill: var(--bg-2); }
.aic .card .plan .p-sub { fill: var(--bg-2); }
.aic .nopic { font: 400 17px/1.5 var(--font-body); color: var(--muted); padding: 30px 0; max-width: 24em; }
.aic .card-stats { border-top: 1px solid var(--ink); padding: 20px 0 26px; }
.aic .stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 24px; margin: 0; }
.aic .st { display: flex; flex-direction: column-reverse; justify-content: flex-end; margin: 0; }
.aic .st dd { margin: 0; font: 400 46px/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.aic .st dt { font: 400 14px/1.35 var(--font-ui); color: var(--muted); margin-top: 9px; }
.aic .card-stats .said { margin-top: 18px; }
.aic .card-stats .srcline { margin-top: 8px; }
.aic .card-stats .said + .srcline { margin-top: 4px; }
.aic .card-rows { margin: 0; border-top: 1px solid var(--ink); }
.aic .cr { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 32px; padding: 18px 0 20px; border-bottom: 1px solid var(--line-2); }
.aic .cr:last-child { border-bottom: 0; padding-bottom: 0; }
.aic .cr > dt { font: 400 15px/1.5 var(--font-ui); color: var(--ink); padding-top: 2px; }
.aic .cr > dd { margin: 0; min-width: 0; font: 400 17px/1.55 var(--font-body); max-width: 46em; }
.aic .cr .said { margin-top: 10px; }
.aic .cr .note-s + .note-s { margin-top: 10px; }
.aic .stand-r .fig-h, .aic .card-stand .fig-h { font: 400 var(--t-text)/1.4 var(--font-body); margin: 0 0 12px; }
.aic .stand-r .note-s { margin-top: 8px; max-width: 40em; }
.aic .stand-r .chart-host { max-width: 760px; min-height: 0; }
.aic .card-more { display: grid; grid-template-columns: minmax(0, 760px); margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line-2); }
.aic .card-stand .note-s { margin-top: 10px; }
.aic .card-stand .chart-host { min-height: 0; }
.aic .card-h3 { font: 400 24px/1.2 var(--font-body); margin: 0 0 16px; }
.aic .card .chart .lab-h { stroke: var(--bg-2); }
.aic .card .chart .dot { fill: var(--bg-2); }
.aic .card .chart .dot.top, .aic .card .chart .dot.mine { fill: var(--accent-fill); }
.aic .card .chart .hit { fill: transparent; }
.aic .card-notes { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line-2); }
.aic .note-s.speed { max-width: 46em; margin-bottom: 18px; }
.aic .note-s.speed .cap { display: block; margin-bottom: 6px; }
.aic .src-h { font: 500 12.5px/16px var(--font-ui); letter-spacing: .085em; text-transform: uppercase; color: var(--muted); margin: 24px 0 8px; }
.aic .cnote { padding: 22px 0 26px; border-top: 1px solid var(--line-2); }
.aic .cnote:first-of-type { border-top: 0; padding-top: 4px; }
.aic .cnote-h { font: 400 23px/1.25 var(--font-body); margin: 0 0 12px; display: flex; gap: 12px; align-items: baseline; }
.aic .cnote-h span { font: 400 14px/1 var(--font-ui); color: var(--muted); }

/* ---------------------------------------------------------------- the comparison: columns, each headed by a drawing */
.aic .cmp { --n: 2; margin-top: 28px; }
.aic .cmp-grid { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 var(--gap, 32px); }
.aic .cmp-head { padding-bottom: 6px; min-width: 0; }
.aic .cmp-head h3 { font: 400 27px/1.1 var(--font-body); letter-spacing: -0.01em; margin-top: 12px; }
.aic .cmp-head .meta { font: 400 14.5px/1.4 var(--font-ui); color: var(--muted); margin-top: 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.aic .cmp-head .tbtn { font-size: 13.5px; padding: 2px 0; }
.aic .cmp-pic { display: flex; align-items: flex-end; }
.aic .cmp-head .sz { font: 400 13px/1.35 var(--font-ui); color: var(--muted); margin-top: 10px; }
.aic .cmp-pic .none { font: 400 15px/1.45 var(--font-body); color: var(--muted); padding-bottom: 6px; max-width: 16em; }
.aic .cmp-scale { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; }
.aic .cmp-sec { margin-top: 30px; }
.aic .cmp-sec > h3 { font: 400 22px/1.2 var(--font-body); padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.aic .cmp-row { border-bottom: 1px solid var(--line-2); padding: 14px 0 16px; }
.aic .cmp-row > .cap { margin-bottom: 8px; }
.aic .cmp-v { font: 400 34px/1.05 var(--font-display); letter-spacing: -0.015em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.aic .cmp-v.top { color: var(--accent-ink); }
.aic .cmp-v.nil { color: var(--line-2); }
.aic .cmp-t { font: 400 16.5px/1.5 var(--font-body); min-width: 0; overflow-wrap: anywhere; }
.aic .cmp-t.nil { color: var(--line-2); }
.aic .cmp .said { margin-top: 14px; }
.aic .cmp-src .srcline { font-size: 14.5px; line-height: 1.45; }
.aic .cmp-row.bare { border-bottom: 0; padding: 0; }
.aic .cmp-row.src { padding: 12px 0 0; }
.aic .cmp.side .cmp-row { display: grid; grid-template-columns: var(--lw) minmax(0, 1fr); column-gap: var(--gap); }
.aic .cmp.side .cmp-row > .cap { margin: 4px 0 0; }
.aic .cmp.side .cmp-row.bare > .said, .aic .cmp.side .cmp-row.bare > .cmp-scale { grid-column: 2; }
/* three or four chips on a phone: the heads two by two, then each figure as a short list, one line per chip */
.aic .cmp.stack .cmp-row .cmp-grid.cmp-heads { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 18px; align-items: end; }
.aic .cmp.stack .cmp-pic { height: auto !important; }
.aic .cmp.stack .cmp-head h3 { font-size: 22px; margin-top: 8px; }
.aic .cmp.stack .cmp-head .meta { font-size: 13.5px; }
.aic .cmp.stack .cmp-row .cmp-grid { display: block; }
.aic .cmp.stack .cmp-v { display: flex; justify-content: space-between; align-items: baseline; font-size: 26px; padding: 4px 0; }
.aic .cmp.stack .cmp-v + .cmp-v { border-top: 1px dotted var(--line-2); }
.aic .cmp.stack .cmp-t { padding: 6px 0 8px; }
.aic .cmp.stack .cmp-t + .cmp-t { border-top: 1px dotted var(--line-2); }
.aic .sn { font: 400 15px/1.3 var(--font-ui); color: var(--ink-2); letter-spacing: 0; margin-right: 12px; }
.aic .cmp.stack .cmp-t .sn { display: block; margin-bottom: 2px; }
.aic .cmp.stack .cmp-v.top .sn { color: var(--accent-ink); }
.aic .cmp.stack .cmp-src .srcline { margin-bottom: 6px; }

/* ---------------------------------------------------------------- the chip picker: a list by maker with a filter */
.aic .cxp { position: absolute; z-index: 60; width: 380px; max-height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column; background: var(--bg); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; line-height: 1.5; }
.aic .cxp-head, .aic .cxp-in, .aic .cxp-sug, .aic .cxp-none { flex: none; }
.aic .cxp-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 8px; }
.aic .cxp-t { font: 400 20px/1.2 var(--font-body); }
.aic .cxp-x { font: 400 14px/1 var(--font-ui); color: var(--muted); text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--line-2); padding: 6px 0; }
.aic .cxp-x:hover { color: var(--ink); }
.aic .cxp-in { margin: 6px 18px 10px; height: 40px; border: 1px solid var(--control-edge); border-radius: 8px; padding: 0 12px; background: var(--bg); color: var(--ink); font: 400 15px var(--font-ui); }
.aic .cxp-in::placeholder { color: var(--muted); opacity: 1; }
.aic .cxp-in:focus { outline: none; border-color: var(--ink); }
.aic .cxp-sug { padding: 2px 18px 10px; font: 400 14px/1.5 var(--font-ui); color: var(--muted); }
.aic .cxp-sug .sug-k { display: block; margin-bottom: 2px; }
.aic .cxp-sug button { font: 500 14px/1.5 var(--font-ui); color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .25em; margin-right: 10px; }
.aic .cxp-sug button:hover { color: var(--accent-ink); }
.aic .cxp-list { overflow-y: auto; padding: 0 0 12px; border-top: 1px solid var(--line); }
.aic .cxp-gh { font: 500 12px/16px var(--font-ui); letter-spacing: .085em; text-transform: uppercase; color: var(--muted); padding: 14px 18px 4px; }
.aic .cxp-o { display: flex; align-items: baseline; gap: 10px; padding: 7px 18px; cursor: pointer; }
.aic .cxp-o .n { font: 400 17px/1.3 var(--font-body); }
.aic .cxp-o .y { font: 400 13px/1 var(--font-ui); color: var(--muted); }
.aic .cxp-o .s { margin-left: auto; font: 400 12.5px/1 var(--font-ui); color: var(--accent-ink); }
.aic .cxp-o.is-active, .aic .cxp-o:hover { background: var(--bg-2); }
.aic .cxp-o[aria-disabled="true"] { cursor: default; }
.aic .cxp-o[aria-disabled="true"] .n { color: var(--muted); }
.aic .cxp-none { padding: 14px 18px; font: 400 15px/1.5 var(--font-body); color: var(--muted); }
.aic .cxp-scrim { position: fixed; inset: 0; z-index: 59; background: var(--scrim); }

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1180px) {
  .aic .card-intro { grid-template-columns: minmax(0, 1fr); }
  .aic .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aic .head-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); column-gap: 40px; }
}
/* under 981 px the head stacks: the title, the standfirst, the finding, the chart, the key */
@media (max-width: 980px) {
  .aic .head-grid { display: flex; flex-direction: column; gap: 0; }
  .aic .head-l { display: contents; }
  .aic .head-l .vt { order: 1; } .aic .head-l .dek { order: 2; } .aic .head .finding { order: 3; } .aic .hfig { order: 4; max-width: 666px; margin-top: 32px; } .aic .key { order: 5; margin-top: 0; }
}
@media (max-width: 760px) {
  .aic .head { padding-top: 32px; }
  .aic .head .vt { font-size: var(--t-title); }
  .aic .head .dek { margin-top: 16px; font-size: var(--t-text); line-height: 1.35; }
  .aic .chart-host { min-height: 260px; }
  .aic .shelves { margin-top: 36px; }
  .aic .shelf { grid-template-columns: 1fr; gap: 12px; padding: 16px 0 18px; }
  .aic .sh-mk { display: flex; align-items: baseline; gap: 10px; }
  .aic .sh-mk h2 { font-size: var(--t-text); }
  .aic .hfig .fig-h { font-size: var(--t-text); } /* a figure's title on a phone, as the chapters set it */
  .aic .sh-row { gap: 14px 20px; }
  .aic .it-b .pic { margin-bottom: 7px; }
  .aic .it-b .nm { font-size: var(--t-small); }
  .aic .card-li { margin: 0 calc(-1 * var(--margin)); padding-bottom: 20px; }
  .aic .card { padding: 18px 16px 28px; }
  .aic .ci-text h2 { font-size: 44px; }
  .aic .ci-text .dek { font-size: var(--t-text); margin-bottom: 20px; }
  .aic .card-intro { padding: 22px 0 24px; }
  .aic .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .aic .st dd { font-size: 38px; }
  .aic .cr { grid-template-columns: 1fr; gap: 8px; padding: 16px 0 18px; }
  .aic .cr > dt { font: 500 12.5px/16px var(--font-ui); letter-spacing: .085em; text-transform: uppercase; color: var(--muted); }
  .aic .parts li { grid-template-columns: 26px minmax(0, 1fr); }
  .aic .parts .v { grid-column: 2; }
  .aic .cmp-head h3 { font-size: 22px; }
  .aic .cmp-v { font-size: 27px; }
  .aic .cmp-t { font-size: 15.5px; }
  .aic .cmp-sec > h3 { font-size: 21px; }
  .aic .cxp { position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto !important; max-height: 78vh; border-radius: 14px 14px 0 0; }
}


/* module: contents.css */
/* ==========================================================================
   The Chain's contents page (#/chain): design round eight, option 3 "clean", chosen by the owner on 28 Oct 2026
   (MAIN/qa/design8/b/b1-clean.html, its builder src/build_clean.py, the "B1 clean" section of its notes.md). The markup is
   src/template.html (.howto, the head) and build/build.js CONTENTS (the rows); src/app.js marks the chapter pointed at
   (.is-hot). Only the app loads this sheet: the readable chapter pages inline src/modules/chapter.css alone. Print:
   src/modules/print.css, which comes after this file, makes the head and the rows the book's title and contents.
   ========================================================================== */
/* ---------- The head: the title with one finding and the key to the marks under it on the left, and the downloads as a
   short column of small links on the right (the owner's option 2 of 28 Oct 2026). Space under it, no rule.
   ---------- The rows: one per chapter, with no route. The drawing in a fixed box on the page's ground (no tint: the owner
   rejects gray blocks under drawings), centered, every drawing at the same area of it (build/line-stills.py); the number
   with its band's single mark (a solid wine bar for Extreme, a hollow ink mark for High); the title, which links to the
   chapter and covers the row; and the chapter's one line in the quieter ink. The stages in two columns from 1300 px, the
   first half on the left; from 1000 to 1299 px one column, each title with its one line beside it; from 760 to 999 px one
   column as at 1440; under 760 px the drawing, number and title on one line with the one line under them, and the sentence
   at the foot under a hairline. The two chapters across the chain follow as the same rows, with no mark, under a small label.
   Screen only: on paper the head and the rows are the book's title and contents (src/modules/print.css), with no drawing. */
.ct-bmk { display: inline-block; flex: none; width: 6px; height: 13px; background: var(--accent-fill); } /* Extreme, a wine bar (on dark #a8414b, 3.1:1 on the ground) */
.ct-bmk.h { height: 7px; background: transparent; box-shadow: inset 0 0 0 1.25px var(--ink); } /* High, an ink outline */
.contents ol.contents-grid { list-style: none; margin: 0; padding: 0; } /* the rows are lists on screen and on paper */
@media screen {
  /* the head */
  .view[data-view="stack"] > .howto {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end;
    padding: 34px 0 0;
  }
  .howto .howto-l { grid-column: 1 / 9; min-width: 0; }
  .howto h1.howto-title {
    margin: 0 0 0 -0.045em; font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--opsz-title);
    font-size: var(--t-title); line-height: 0.92; letter-spacing: -0.03em; /* the seven steps (28 Oct 2026; 80 px before) */
  }
  /* the downloads, within reach and quiet: small links stacked beside the title */
  .howto .howto-dl { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; font-family: var(--font-ui); font-size: 13px; line-height: 20px; }
  .howto .howto-dl a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
  .howto .howto-dl a:hover { color: var(--accent-ink); text-decoration-color: var(--accent); }
  .howto .howto-r { grid-column: 9 / 13; align-self: start; min-width: 0; padding-top: 18px; }
  .howto .howto-std { max-width: 30em; margin: 22px 0 0; font-family: var(--font-body); font-size: var(--t-lead); line-height: 1.45; color: var(--ink-2); } /* a standfirst's step */
  /* the key to the rows' marks, each mark before its band's word */
  .howto .howto-key { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 14px 0 0; font-family: var(--font-ui); font-size: 13px; line-height: 20px; color: var(--muted); }
  .howto-key .ct-bmk { margin: 0 7px 0 0; vertical-align: -1px; }
  .howto-key .ct-bmk.h { vertical-align: 0; }
  .view[data-view="stack"] > .contents { margin: 0; padding: 0 0 24px; border: 0; }
  .contents > .contents-h { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* for screen readers; the book prints it */

  /* the rows: --tw x --th is the drawing's box */
  .contents .ct-st { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin: 52px 0 0; }
  .contents .ct-col { display: block; grid-column: span 6; }
  .contents .ct-col > .item {
    position: relative; display: grid; grid-template-columns: calc(var(--tw, 112px) + 24px) 44px minmax(0, 1fr); column-gap: 0;
    grid-template-rows: auto 1fr; align-items: start; padding: 0 24px 32px 0; border: 0;
  } /* a drawing taller than the title and a short one line together leaves its room under the one line */
  /* the stills are rendered on white: on the light ground they multiply into it, on dark they turn light on dark, as the
     chapter's own stills do */
  .ct-tile { grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--tw, 112px); height: var(--th, 84px); padding: 9px; background: var(--bg); isolation: isolate; }
  .ct-tile img { display: block; width: var(--w); height: auto; max-width: 100%; max-height: 100%; mix-blend-mode: multiply; }
  :root[data-theme="dark"] .ct-tile img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
  .contents .ct-col .n {
    grid-column: 2; grid-row: 1; align-self: baseline; display: flex; align-items: center; gap: 7px; padding: 0;
    font-family: var(--font-code); font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0; color: var(--muted);
  }
  .contents .ct-col .t {
    grid-column: 3; grid-row: 1; align-self: baseline; display: block; margin: 0; font-family: var(--font-display); font-weight: 500;
    font-variation-settings: var(--opsz-title); font-size: var(--t-lead); line-height: 1.3; letter-spacing: -0.005em;
    color: var(--ink); text-decoration: none;
  }
  .contents .ct-col .t::after { content: ""; position: absolute; inset: 0 0 18px; } /* the whole row opens the chapter */
  .contents .ct-col .ol { grid-column: 3; grid-row: 2; margin: 5px 0 0; max-width: 33em; font-family: var(--font-body); font-size: var(--t-small); line-height: 1.55; color: var(--muted); }
  /* the reader's selection: the chapter pointed at or focused (src/app.js) */
  .contents .ct-col > .item:hover .t, .contents .ct-col > .item.is-hot .t, .contents .ct-col > .item:hover .n, .contents .ct-col > .item.is-hot .n { color: var(--accent-ink); }
  /* and its drawing lifts off the page (owner, 28 Oct 2026); with reduced motion it stays where it is */
  .contents .ct-tile img { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
  .contents .ct-col > .item:hover .ct-tile img, .contents .ct-col > .item.is-hot .ct-tile img { transform: translateY(-6px) scale(1.08); }
  @media (prefers-reduced-motion: reduce) {
    .contents .ct-tile img { transition: none; }
    .contents .ct-col > .item:hover .ct-tile img, .contents .ct-col > .item.is-hot .ct-tile img { transform: none; }
  }

  /* the chapters across the chain: the same rows, under a small label and space */
  .contents .ct-x { margin: 30px 0 0; }
  .contents .ct-xk { display: block; margin: 0 0 22px; font-family: var(--font-kicker); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); line-height: 16px; color: var(--muted); }
  .contents .ct-x .ct-st { margin-top: 0; }
}
/* the widths between: the drawing's box a little smaller under 1440 px */
@media screen and (max-width: 1439px) {
  .contents .ct-col > .item { --tw: clamp(96px, 11.4vw - 52px, 112px); --th: calc(var(--tw) * 0.75); padding-right: 16px; }
}
@media screen and (max-width: 1299px) {
  .contents .ct-st { display: block; margin-top: 48px; }
  .contents .ct-col > .item { padding-right: 0; }
}
/* one column, each title with its one line beside it */
@media screen and (min-width: 1000px) and (max-width: 1299px) {
  .contents .ct-col > .item { --tw: 96px; --th: 72px; grid-template-columns: calc(var(--tw) + 24px) 44px minmax(0, 14em) minmax(0, 1fr); padding-bottom: 28px; }
  .contents .ct-col .t { text-wrap: balance; }
  .contents .ct-col .ol { grid-column: 4; grid-row: 1 / span 2; margin: 2px 0 0 24px; max-width: 36em; }
}
/* one column, as at 1440 */
@media screen and (min-width: 760px) and (max-width: 999px) {
  .contents .ct-col > .item { --tw: 96px; --th: 72px; }
  .contents .ct-col .ol { max-width: 36em; }
}
/* a phone: the title, the finding, the key to the marks (before the sixteen rows it decodes), the downloads, then the
   rows. Each row sets its drawing, number and title on one line, the one line under all three */
@media screen and (max-width: 759px) {
  .view[data-view="stack"] > .howto { display: block; padding-top: 0; }
  html[data-chain="contents"] .view[data-view="stack"]:not([hidden]) { display: flex; flex-direction: column; }
  html[data-chain="contents"] .view[data-view="stack"] > .howto, html[data-chain="contents"] .howto .howto-l, html[data-chain="contents"] .howto .howto-r { display: contents; }
  .howto h1.howto-title { order: 0; margin-top: 26px; font-size: var(--t-title); }
  .howto .howto-std { order: 1; margin: 18px 0 0; font-size: var(--t-text); }
  .howto .howto-key { order: 2; margin-top: 12px; }
  .howto .howto-dl { order: 3; flex-direction: row; flex-wrap: wrap; gap: 4px 20px; margin-top: 16px; }
  .view[data-view="stack"] > .contents { order: 4; padding-bottom: 24px; }
  .view[data-view="stack"] > .site-footer { order: 5; }
  .contents .ct-st { margin-top: 36px; }
  .contents .ct-x { margin-top: 18px; }
  .contents .ct-col > .item { --tw: 64px; --th: 48px; grid-template-columns: calc(var(--tw) + 14px) 36px minmax(0, 1fr); padding: 0 0 30px; }
  .ct-tile { grid-row: 1; padding: 6px; }
  .contents .ct-col .n, .contents .ct-col .t { align-self: center; }
  .contents .ct-col .t { font-size: var(--t-text); line-height: 24px; }
  .contents .ct-col .t::after { inset: 0 0 14px; }
  .contents .ct-col .ol { grid-column: 1 / -1; grid-row: 2; margin: 10px 0 0; font-size: var(--t-small); }
}
/* on paper the rows are the book's contents: no drawing, no label, and the book's own standfirst in place of the sentence */
@media print {
  .howto .howto-std, .howto .howto-key, .contents .ct-tile, .contents .ct-xk { display: none !important; }
}

/* The Chain's contents draw every chapter themselves, so on a phone the specimen strip stands down there too, before boot
   (data-route) as after (data-view), and Back to top floats at the window's foot as it does on a wide screen */
@media screen and (max-width: 900px) {
  html.booted[data-view="stack"][data-chain="contents"] .stage, html:not(.booted)[data-route="stack"][data-chain="contents"] .stage { display: none !important; }
  html.booted[data-view="stack"][data-chain="contents"] body, html:not(.booted)[data-route="stack"][data-chain="contents"] body { padding-bottom: 0; }
  html.booted[data-view="stack"][data-chain="contents"] .to-top { display: block; }
}


/* module: controls.css */
/* Export Controls: the board of flows, the year scrubber and the threshold board.
   The board is the page's index, nine things that move across the chokepoint, each with its state on
   the scrubber's date, and every row opens into its own history. By date keeps the plain chronology
   with a compact board riding the scroll. The kinds of move are words, never colors. Dates and years are
   set in Hanken Grotesk on tabular figures so their digits align, as every label is (Fragment Mono until the visual
   pass of 27 Oct 2026). The redesign's block
   at the foot of this file sets the page in the new type and takes the accent off every data value. */

/* ---------- shared chrome ---------- */
.controls-intro { margin: 0 0 16px; }
.cf-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.cf-top .controls-intro { margin-bottom: 12px; max-width: 62ch; }
.cf-modes { display: flex; gap: 0; flex: 0 0 auto; margin-top: 12px; }
.cf-mode {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap); letter-spacing: 0;
  padding: 6px 13px; border: 1px solid var(--line-2); background: none; color: var(--muted); cursor: pointer;
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}
.cf-mode:first-child { border-radius: 0; }
.cf-mode:last-child { border-radius: 0; border-left-width: 0; }
.cf-mode:hover { color: var(--ink); }
.cf-mode[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ---------- the two columns ---------- */
.cf[data-mode="subject"] .cf-chron { display: none; }

/* ---------- the year scrubber ---------- */
.cf-scrub { margin: 0 0 16px; }
.cf-scrub-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 7px; }
.cf-asof { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap); letter-spacing: 0; color: var(--muted); margin: 0; }
.cf-asof b { font-family: var(--font-display); font-variation-settings: var(--opsz-title); font-weight: 400; font-size: var(--t-lead); letter-spacing: 0; text-transform: none; color: var(--ink); margin-left: 6px; font-variant-numeric: tabular-nums; }
.cf-now {
  flex: 0 0 auto; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap-s); letter-spacing: 0;
  padding: 4px 11px 5px; border: 1px solid var(--line-2); border-radius: 0; background: none; color: var(--ink-2); cursor: pointer;
}
.cf-now:hover, .cf-now:focus-visible { border-color: var(--accent); color: var(--ink); }
.cf-track { position: relative; padding-top: 8px; }
.cf-years { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid var(--line-2); }
.cf-year {
  display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 1px 3px;
  background: none; border: 0; border-right: 1px solid var(--line); color: var(--muted); cursor: pointer;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.cf-year:last-child { border-right: 0; }
.cf-year:hover { background: none; color: var(--ink); }
.cf-yl, .cf-ys { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.cf-ys { display: none; }
.cf-yn { font-family: var(--font-ui); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cf-year[aria-pressed="true"] { color: var(--ink); }
.cf-year[aria-pressed="true"] .cf-yl, .cf-year[aria-pressed="true"] .cf-ys { font-weight: 600; }
.cf-year[aria-pressed="true"] .cf-yn { color: var(--accent); }
.cf-head {
  position: absolute; left: 0; top: 1px; width: 2px; height: 15px; background: var(--accent);
  transition: transform 240ms var(--ease); pointer-events: none;
}
.cf-head::after {
  content: ""; position: absolute; left: -3px; top: -4px; width: 8px; height: 5px;
  background: var(--accent); clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ---------- the board ----------
   The whole header opens the row, but the citation under each state is a link, and a link may not sit
   inside a button. So the header is the grid and the button is laid over it; the citation and the
   glossary terms are raised above that overlay, and everything else reads through it. */
.cf-board { margin: 0 0 34px; border-bottom: 1px solid var(--line); }
.cf-row { position: relative; }
.cf-rowh {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px 62px 14px; align-items: start; gap: 6px 16px;
  padding: 12px 2px 13px 0; border-top: 1px solid var(--line); font-weight: 400; text-align: left;
}
.cf-btn { position: absolute; inset: 0; width: 100%; height: 100%; background: none; border: 0; padding: 0; cursor: pointer; }
.cf-rowh:hover { background: none; }
.cf-rowh:hover .cf-name { color: var(--accent); }
.cf-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cf-id { min-width: 0; }
.cf-name { font-family: var(--font-display); font-variation-settings: var(--opsz-title); font-weight: 500; font-size: var(--t-text); letter-spacing: 0; color: var(--ink); transition: color 0.15s; }
.cf-route { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; color: var(--muted); margin-left: 9px; white-space: nowrap; }
.cf-what { display: block; font-family: var(--font-body); font-size: var(--fs-note); line-height: 1.35; color: var(--ink-2); margin-top: 2px; max-width: 58ch; }
.cf-state { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.cf-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
/* the ramp, open to prohibited: outlined muted, dashed muted, dashed ink, garnet, solid ink */
.cf-pill {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap-s); letter-spacing: 0; white-space: nowrap;
  padding: 2px 7px 3px; border: 1px solid var(--line-2); border-radius: 0; color: var(--muted); background: transparent;
}
.cf-pill.is-open { border-color: var(--line-2); color: var(--muted); background: transparent; }
.cf-pill.is-case { border-style: dashed; border-color: var(--ink); color: var(--ink); }
/* restricted: limited to some buyers or uses without a ban, a step below case by case, so its dash is lighter */
.cf-pill.is-restricted { border-style: dashed; border-color: var(--muted); color: var(--ink-2); background: transparent; }
.cf-pill.is-denial { background: none; border-color: var(--accent); color: var(--accent); }
.cf-pill.is-prohibited { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.cf-pill.is-policy { background: none; border-color: var(--ink-2); color: var(--ink-2); }
/* a stayed instrument: the outcome is drawn back, and the tag beside it says until when */
.cf-pill.is-suspended { background: transparent; border-color: var(--line-2); color: var(--muted); }
.cf-susp {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; white-space: nowrap;
  padding: 2px 6px 3px; border: 1px dashed var(--line-2); border-radius: 0; color: var(--ink-2); background: none;
}
.cf-lab { font-family: var(--font-body); font-size: var(--fs-note); line-height: 1.3; color: var(--ink-2); }
.cf-when { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; line-height: 1.5; color: var(--muted); }
.cf-cite {
  position: relative; z-index: 1; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; line-height: 1.5;
  color: var(--muted); text-decoration-color: var(--line-2); overflow-wrap: anywhere;
}
a.cf-cite:hover, a.cf-cite:focus-visible { color: var(--accent); text-decoration-color: var(--accent); }
.cf-n { font-family: var(--font-mono); font-size: var(--fs-cap-s); letter-spacing: var(--tr-cap-s); color: var(--muted); text-align: right; white-space: nowrap; padding-top: 4px; }
.cf-caret {
  width: 8px; height: 8px; border-right: 1.6px solid var(--line-2); border-bottom: 1.6px solid var(--line-2);
  transform: rotate(45deg); transition: transform 200ms var(--ease); margin: 6px auto 0;
}
.cf-row[data-open="1"] .cf-caret { transform: rotate(225deg); margin: 12px auto 0; }
.cf-row[data-open="1"] .cf-rowh { background: none; border-top-color: var(--ink); }

/* the drawer: 0fr and 1fr are its two rests, so it is always sized by its own content; app.js plays the
   run between them on the height. Visibility keeps a shut drawer out of the tab order. */
.cf-hist { display: grid; grid-template-rows: 0fr; overflow: hidden; }
.cf-hist-in { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear 220ms; }
.cf-row[data-open="1"] .cf-hist { grid-template-rows: 1fr; }
.cf-row[data-open="1"] .cf-hist-in { visibility: visible; transition-delay: 0s; }

.cf-evs { list-style: none; margin: 0; padding: 2px 0 14px; }
.cf-ev { display: grid; grid-template-columns: 150px 108px minmax(0, 1fr); gap: 14px; padding: 10px 0 11px; border-top: 1px dashed var(--line); }
.cf-ev:first-child { border-top: 0; }
.cf-ev-d { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.02em; color: var(--muted); line-height: 1.4; font-variant-numeric: tabular-nums; }
.cf-ev-d b { display: block; font-weight: 500; font-size: 11.5px; color: var(--ink); }
.cf-ev-d span { display: block; }
/* announced, then in force: the label above the date it belongs to */
.cf-ev-k { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap-s); letter-spacing: 0; color: var(--muted); margin-top: 4px; }
.cf-ev-d .cf-ev-k:first-child { margin-top: 0; }
.cf-ev-t { font-family: var(--font-display); font-variation-settings: var(--opsz-title); font-weight: 500; font-size: var(--t-text); line-height: 1.2; margin: 1px 0 3px; }
.cf-ev-g { font-family: var(--font-body); font-size: var(--fs-note); line-height: 1.45; color: var(--ink-2); margin: 0 0 5px; max-width: 70ch; }
.cf-ev-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; margin-bottom: 2px; }
.cf-inst {
  font-family: var(--font-mono); font-size: var(--fs-cap-s); letter-spacing: 0;
  padding: 1px 5px 2px; border: 1px solid var(--line-2); border-radius: 0; color: var(--muted); background: none;
}
.cf-ev-cite {
  display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; line-height: 1.5;
  color: var(--muted); margin: 0 0 5px; text-decoration-color: var(--line-2); overflow-wrap: anywhere;
}
a.cf-ev-cite:hover, a.cf-ev-cite:focus-visible { color: var(--accent); text-decoration-color: var(--accent); }
.cf-ev-from { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); }
/* the chapter that tells the flow's story, at the foot of an open row */
.cf-chapter { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; padding: 0 0 16px; }
.cf-chapter a { font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: 0; color: var(--ink-2); text-decoration-color: var(--line-2); }
.cf-chapter a:hover, .cf-chapter a:focus-visible { color: var(--ink); text-decoration-color: var(--accent); }
.cf-chapter-n { font-family: var(--font-body); font-size: var(--fs-note); color: var(--muted); }
.cf-hist .cat {
  display: block; font-family: var(--font-mono); font-size: var(--fs-cap-s); letter-spacing: 0;
  color: var(--ink-2); margin-bottom: 2px; /* the US category in ink, as on Suppliers */
}
.cf-hist .src { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.cf-none { font-family: var(--font-mono); font-size: var(--fs-ui-s); color: var(--muted); padding: 8px 0 14px; margin: 0; }

/* under each year on a phone: where the flows stood when the year ended */
.cf-sum { display: none; }

@keyframes cf-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cf-flip { from { opacity: 0; } to { opacity: 1; } }
@keyframes cf-glow { 0%, 62% { background-color: var(--accent-soft); } 100% { background-color: transparent; } }
.cf-board[data-in="1"] .cf-rowh { animation: cf-in 260ms var(--ease) var(--d, 0ms) backwards; }
.cf-state.is-flip { animation: cf-flip 150ms linear; }
.cf-row.is-changed { animation: cf-glow 600ms var(--ease); }

/* ---------- timeline: filter bar ---------- */
.tl-bar { display: flex; align-items: flex-start; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 12px; }
.tl-bar .chips { margin: 0; flex: 1 1 320px; }
.tl-all { flex: 0 0 auto; padding: 5px 11px; font-size: var(--fs-cap); }
.tl-all[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* "Show full summaries" is a quiet text switch beside the chips, set like the export line */
.tl-all.btn.ghost { border: 0; padding: 4px 0; min-height: 24px; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; align-self: center; }
.tl-all.btn.ghost:hover { color: var(--ink); text-decoration-color: var(--accent); }
.tl-all.btn.ghost[aria-pressed="true"] { background: none; color: var(--ink); text-decoration-color: var(--accent); }
.chips button.tl-chip { padding-left: 22px; position: relative; }
.tl-chip::before {
  content: ""; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px;
  margin-top: -3.5px; border-radius: 50%; background: var(--ink);
}
.tl-chip[aria-pressed="true"]::before { background: var(--bg); } /* the pressed chip is filled with ink, so its dot turns to the ground */

/* ---------- timeline: compact entries ---------- */
.cf-rowh { margin: 0; font-size: inherit; }
.timeline { margin-top: 4px; }
.timeline .tl-year { display: block; border: 0; padding: 0; }
.timeline .tl-year .year-label { display: inline-block; font-size: 34px; margin: 22px 0 0; }
.timeline .tl-n {
  font-family: var(--font-mono); font-size: var(--fs-cap-s); letter-spacing: 0;
  color: var(--muted); margin-left: 10px; vertical-align: 6px;
}
.timeline .tl-e { padding: 11px 0 12px; scroll-margin-top: calc(var(--masthead) + 20px); }
/* the entry you jumped to, marked until you pick another; the negative margin keeps the grid in line */
.timeline .tl-e.is-target { background: none; box-shadow: inset 2px 0 0 var(--accent); padding-left: 12px; margin-left: -12px; }
.timeline .tl-body { line-height: 1.3; } /* the "More" button sits on this line box, so keep it tight */
.timeline .cat { display: block; }
.timeline .cf-ev-tags { margin-bottom: 3px; }
/* the day a rule takes force, under the day it was announced */
.timeline .d .tl-eff { display: block; font-size: 11px; color: var(--muted); margin: 1px 0 2px; }
.timeline .cf-ev-cite { margin: 0 0 6px; }
.timeline .tl-e h4 { font-size: var(--t-text); line-height: 1.24; margin-bottom: 3px; }
.timeline .tl-gist { font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); margin: 0 0 5px; max-width: 76ch; }
.timeline .tl-more, .cf-hist .tl-more {
  font-family: var(--font-mono); font-size: var(--fs-cap-s); letter-spacing: 0;
  color: var(--muted); background: none; border: 0; border-bottom: 1px solid var(--line-2);
  padding: 0 0 1px; cursor: pointer; position: relative;
}
.timeline .tl-more::before, .cf-hist .tl-more::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 24px); height: 26px; transform: translate(-50%, -50%); } /* a 24 px target, same look */
.timeline .tl-more:hover, .timeline .tl-more:focus-visible,
.cf-hist .tl-more:hover, .cf-hist .tl-more:focus-visible { color: var(--ink); border-bottom-color: var(--accent); }
.timeline .tl-panel, .cf-hist .tl-panel { margin: 9px 0 2px; padding-left: 13px; border-left: 1px solid var(--line-2); max-width: 76ch; }
.timeline .tl-panel p, .cf-hist .tl-panel p { font-size: var(--fs-small); line-height: 1.55; margin: 0 0 6px; }
.timeline .tl-panel .src, .cf-hist .tl-panel .src { display: inline-block; }
.timeline .tl-empty { display: block; border-top: 0; padding: 18px 0; }

@keyframes tl-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.timeline .tl-e.is-in { animation: tl-in 260ms var(--ease) backwards; }

/* ---------- desktop: the chronology reads on the left, the compact board rides the scroll ---------- */
@media (min-width: 900px) {
  .cf[data-mode="date"] { display: flex; align-items: flex-start; gap: 34px; }
  .cf[data-mode="date"] .cf-chron { order: 0; flex: 1 1 auto; min-width: 0; }
  .cf[data-mode="date"] .cf-side {
    order: 1; flex: 0 0 38%; position: sticky; top: var(--masthead); z-index: 5;
    max-height: calc(100vh - var(--masthead) - 14px); overflow-y: auto; padding: 12px 0 6px;
    background: var(--bg); border-left: 1px solid var(--line); padding-left: 22px;
  }
  /* the compact board is a read-out: name, route, the pill and any stay on it, nothing else */
  .cf[data-mode="date"] .cf-what, .cf[data-mode="date"] .cf-n, .cf[data-mode="date"] .cf-caret,
  .cf[data-mode="date"] .cf-lab, .cf[data-mode="date"] .cf-when, .cf[data-mode="date"] .cf-cite,
  .cf[data-mode="date"] .cf-hist { display: none; }
  .cf[data-mode="date"] .cf-rowh { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 8px 2px 8px 0; align-items: center; }
  .cf[data-mode="date"] .cf-name { font-size: var(--t-small); }
  .cf[data-mode="date"] .cf-route { display: block; margin-left: 0; margin-top: 1px; }
  .cf[data-mode="date"] .cf-state { align-items: flex-end; }
  .cf[data-mode="date"] .cf-board { margin-bottom: 6px; }
  .cf[data-mode="date"] .cf-asof b { font-size: var(--t-text); }
  .cf[data-mode="date"] .cf-legend { grid-template-columns: 1fr; gap: 9px 0; }
  /* the board fills the right of the window from top to foot, so Back to top moves to the foot of the chronology,
     just left of the board's rule: the column's right padding, plus the board's 38 percent of the row, plus 12 px */
  body:has(.view[data-view="controls"]:not([hidden]) .sub:not([hidden]) > .cf[data-mode="date"]) .to-top {
    right: calc(clamp(16px, 4vw, 56px) + 0.38 * (100vw - clamp(16px, 4vw, 56px) - clamp(16px, 3vw, 44px)) + 12px);
  }
}

@media (max-width: 899px) {
  .cf[data-mode="date"] .cf-side { display: none; } /* nothing new pinned to the top of a phone screen */
  .cf[data-mode="date"] .cf-sum { display: block; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--muted); margin: 3px 0 0; }
  .cf-top { gap: 6px 12px; }
  .cf-modes { margin-top: 0; margin-bottom: 12px; }
  .cf-rowh { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; align-items: start; }
  .cf-name { font-size: var(--t-text); }
  .cf-route { display: block; margin-left: 0; }
  .cf-what { font-size: var(--fs-note); }
  .cf-id { grid-column: 1; grid-row: 1; }
  .cf-n { grid-column: 2; grid-row: 1; text-align: right; padding-top: 4px; }
  .cf-state { grid-column: 1 / -1; grid-row: 2; margin-top: 6px; }
  .cf-caret { display: none; }
  .cf-ev { grid-template-columns: 96px minmax(0, 1fr); gap: 4px 12px; }
  .cf-ev-p { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; }
  .cf-ev-lab { display: inline; margin-top: 0; max-width: none; }
  .cf-ev-from, .cf-ev-p .cf-ev-cite { display: inline; margin: 0; }
  .cf-ev-p:empty { display: none; }
  .cf-asof b { font-size: var(--t-text); }
  .tl-bar { gap: 8px 10px; }
  .tl-all { width: auto; text-align: left; }
  .timeline .tl-year .year-label { font-size: var(--fs-num-s); }
  .timeline .tl-e h4 { font-size: var(--t-text); }
  .timeline .tl-gist { font-size: var(--fs-small); }
}

@media (max-width: 560px) {
  .cf-yl { display: none; }
  .cf-ys { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .timeline .tl-e.is-in, .cf-board[data-in="1"] .cf-rowh,
  .cf-state.is-flip, .cf-row.is-changed { animation: none; }
  .cf-hist, .cf-caret, .cf-head, .cf-mode, .cf-year { transition: none; }
}

/* ---------- the board's legend: the ramp, and what each outcome means to an exporter ---------- */
.cf-legend {
  list-style: none; margin: 14px 0 0; padding: 13px 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 12px 26px;
}
.cf-legend li { display: grid; gap: 4px; align-items: start; align-content: start; }
.cf-legend .cf-pill, .cf-legend .cf-susp { justify-self: start; }
.cf-legend li > span:last-child { font-family: var(--font-body); font-size: var(--fs-note); line-height: 1.4; color: var(--muted); }
/* six entries read as three and three, not five and a stray */
@media (min-width: 900px) { .cf-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cf[data-mode="date"] .cf-legend { grid-template-columns: 1fr; gap: 9px 0; } }
/* a glossary term inside a state label answers for itself, above the button that opens the row */
.cf-lab .gl-term { font: inherit; color: inherit; position: relative; z-index: 1; }

/* ---------- histories: the state's own label, and an honest gutter ---------- */
.cf-ev-lab { display: block; margin-top: 5px; font-family: var(--font-mono); font-size: 11px; line-height: 1.4; color: var(--ink-2); max-width: 150px; }
.cf-ev-none { font-family: var(--font-mono); font-size: var(--fs-cap-s); letter-spacing: 0; color: var(--muted); }
/* ---------- the years look like buttons and meet a fingertip ---------- */
.cf-year { border: 1px solid var(--line); border-right-width: 1px; background: none; border-radius: 0; min-height: 44px; margin: 0 1px; }
.cf-year:hover { border-color: var(--line-2); }
.cf-year[aria-pressed="true"] { border-color: var(--accent); background: none; }
.cf-now, .cf-mode { min-height: 34px; }
@media (max-width: 899px) { .cf-now, .cf-mode { min-height: 44px; } .cf-year { min-height: 48px; } }

/* the line above the board that points down to the chronology */
.cf-jump { margin: 0; }
.cf-jump-btn { font: inherit; font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.4; color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.cf-jump-btn:hover, .cf-jump-btn:focus-visible { color: var(--ink); text-decoration-color: var(--accent); }
#timeline { scroll-margin-top: calc(var(--masthead) + 16px); }

/* ---------- the board as a chart: one five-step scale a row, No license to Prohibited ----------
   A dot marks the row's state, the line up to it ink to Case by case and garnet from a presumption of denial; the scale's two
   ends are named once above the board (.cf-scale, in src/template.html). When the date moves, the dots slide along their
   scales: the one motion here, and it is the state changing (none under reduced motion). A closed row is one line; its
   description opens with the row. The pills and the full key under the board stay for readers who prefer words */
.cf-scale { display: none; }
.cf-scale-r { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.cf-scale-r i { flex: 1 1 auto; height: 1px; position: relative; background: linear-gradient(to right, var(--line-2), var(--accent-fill)); }
.cf-scale-r i::after { content: ""; position: absolute; right: -1px; top: -3px; border: 3.5px solid transparent; border-left: 6px solid var(--accent-fill); border-right: 0; }
.cf-scale-r span:last-child { color: var(--accent-ink); }
@media (min-width: 900px) {
  .cf[data-mode="subject"] .cf-rowh, .cf-scale { grid-template-columns: minmax(0, 0.85fr) 292px minmax(0, 1.2fr) 64px 14px; }
  .cf-scale { display: grid; column-gap: 16px; align-items: end; padding: 0 2px 7px 0; }
  .cf-scale-l, .cf-scale-x { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
  .cf-scale-l { font-weight: 500; letter-spacing: 0; }
  .cf-scale-x { grid-column: 3 / -1; }
  .cf-scale-r { margin: 0 14px 0 4px; }
  .cf[data-mode="subject"] .cf-route { display: block; margin: 2px 0 0; }
  .cf[data-mode="date"] .cf-ramp, .cf[data-mode="date"] .cf-scale { display: none; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .cf[data-mode="subject"] .cf-rowh, .cf-scale { grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1.1fr) 56px 14px; } /* the names wrap here, so the scale narrows */
}
.cf[data-mode="subject"] .cf-row:not([data-open="1"]) .cf-what { display: none; }
.cf-ramp { position: relative; display: block; height: 22px; margin: 6px 14px 0 4px; }
.cf-ramp-t { position: absolute; left: 0; right: 0; top: 10px; height: 1px; background: var(--line-2); }
.cf-ramp-k { position: absolute; top: 7px; width: 1px; height: 7px; margin-left: -0.5px; background: var(--line-2); }
.cf-ramp-f { position: absolute; left: 0; top: 9px; height: 3px; width: calc(var(--i) * 25%); background: var(--ink-2); transition: width 240ms var(--ease); }
.cf-ramp-d { position: absolute; top: 4px; left: calc(var(--i) * 25%); width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--bg); transition: left 240ms var(--ease); }
.cf-ramp.is-closed .cf-ramp-f, .cf-ramp.is-closed .cf-ramp-d { background: var(--accent-fill); }
.cf-ramp.is-susp .cf-ramp-f { background: var(--line-2); }
.cf-ramp.is-susp .cf-ramp-d { background: var(--bg); border: 1.5px dashed var(--ink-2); }
.cf-ramp.is-policy .cf-ramp-f, .cf-ramp.is-policy .cf-ramp-d { display: none; }
.cf-ramp.is-policy .cf-ramp-t, .cf-ramp.is-policy .cf-ramp-k { background: var(--line); }
@media (max-width: 899px) {
  .cf-ramp { grid-column: 1 / -1; grid-row: 2; margin: 8px 7px 0; }
  .cf-state { grid-row: 3; }
  .cf-scale { display: flex; margin: 0 0 6px; }
  .cf-scale-r { flex: 1 1 auto; }
  .cf-scale-l, .cf-scale-x { display: none; }
}
/* the scrubber's years carry their number of moves as a small bar */
.cf-yb { display: block; width: 14px; margin: 0 auto 4px; background: var(--muted); opacity: 0.55; }
.cf-year { justify-content: flex-end; }
.cf-year[aria-pressed="true"] .cf-yb { background: var(--accent-fill); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cf-ramp-f, .cf-ramp-d { transition: none; } }

/* ==========================================================================
   The redesign (stage 3, qa/redesign/BRIEF.md): today's deadline-first layout, restyled. The title over its standfirst
   (.view-head.vh, suppliers.css), the two sub-tabs, the countdown, then the timeline and the board. No data value takes the
   accent: the board's states, its scale and the countdown are ink, gray or an outline; the wine marks only the reader's place
   (the current tab, the entry a link opened) and links.
   ========================================================================== */
.view[data-view="controls"] { width: 100%; padding: 0 var(--margin); }

/* the countdown: the date, how far off it is, what happens, and its entry */
.cf-up { margin: 40px 0 36px; }
.cf-up-h { margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--ink); font-family: var(--font-display); font-weight: 500; font-variation-settings: var(--opsz-title); font-size: var(--t-block); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.cf-up-list { list-style: none; margin: 0; padding: 0; }
.cf-up-i { display: grid; grid-template-columns: 8.6em 7.4em minmax(0, 1fr); column-gap: 24px; align-items: baseline; padding: 13px 0 12px; border-bottom: 1px solid var(--line); }
.cf-up-d, .cf-up-n { font-family: var(--font-ui); font-size: 12.5px; line-height: 20px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cf-up-d { color: var(--ink); }
.cf-up-i.is-soon .cf-up-n { color: var(--ink); }
.cf-up-t { min-width: 0; font-family: var(--font-body); font-size: var(--t-small); line-height: 1.45; color: var(--ink); }
.cf-up-link { display: inline-block; margin-left: 12px; padding: 2px 0; font-family: var(--font-ui); font-size: 13px; line-height: 18px; color: var(--ink-2); white-space: nowrap; text-decoration-color: var(--rule-ink); }
.cf-up-link:hover { color: var(--accent-ink); text-decoration-color: var(--accent); }
/* from 761 px the date and its countdown stack in one column, so the text shares the timeline's left edge and a reading measure (design10 data P2.1) */
@media (min-width: 761px) {
  .cf-up-i { grid-template-columns: 110px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; }
  .cf-up-d { grid-area: 1 / 1; }
  .cf-up-n { grid-area: 2 / 1; }
  .cf-up-t { grid-column: 2; grid-row: 1 / span 2; max-width: 76ch; }
}
@media (max-width: 760px) {
  .cf-up { margin: 28px 0 28px; }
  .cf-up-h { font-size: var(--t-lead); }
  .cf-up-i { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 4px; }
  .cf-up-t { grid-column: 1 / -1; font-size: var(--t-small); }
}

/* the line that points down to the chronology, and the order switch */
.cf-jump-btn { font-family: var(--font-body); font-size: var(--t-text); color: var(--ink); text-decoration-color: var(--rule-ink); }
.cf-modes { padding: 3px; gap: 2px; border: 1px solid var(--control-edge); border-radius: 999px; }
.cf-mode, .cf-mode:first-child, .cf-mode:last-child { border: 0; border-radius: 999px; font-family: var(--font-ui); font-weight: 400; font-size: 13.5px; line-height: 1; padding: 8px 14px; min-height: 30px; color: var(--ink-2); }
.cf-mode[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.cf-mode:focus-visible { outline-offset: 2px; }
@media (max-width: 899px) { .cf-mode { min-height: 40px; } }

/* the timeline's filters and its entries: the kinds of move are words, each chip's dot ink */
.tl-chip::before { background: var(--ink); }
.cf-hist .cat { color: var(--ink-2); }
.tl-all.btn.ghost { font-family: var(--font-ui); font-size: 13.5px; }
.timeline .tl-year .year-label { font-family: var(--font-display); font-weight: 360; font-variation-settings: var(--opsz-numeral); font-size: 44px; line-height: 1; letter-spacing: -0.03em; }
.timeline .tl-n { font-family: var(--font-ui); font-size: 12px; vertical-align: 10px; font-variant-numeric: tabular-nums; }
.timeline .cat, .cf-hist .cat { font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; }
.cf-inst { font-family: var(--font-ui); font-size: 12px; border-radius: 3px; padding: 1px 6px 2px; }
.timeline .tl-gist { font-size: var(--t-small); line-height: 1.5; }
.timeline .tl-more, .cf-hist .tl-more { font-family: var(--font-ui); font-size: 13px; color: var(--ink-2); }

/* the scrubber: the year shown is ink, never wine (its bar is a count, a data value) */
.cf-asof { font-family: var(--font-ui); font-weight: 400; font-size: 13px; color: var(--muted); }
.cf-asof b { font-weight: 360; } /* a light number, as the year labels are */
.cf-now { font-family: var(--font-ui); font-weight: 400; font-size: 13px; padding: 6px 14px; border: 1px solid var(--control-edge); border-radius: 999px; color: var(--ink); }
.cf-now:hover, .cf-now:focus-visible { border-color: var(--ink); }
.cf-year { border-radius: 3px; }
.cf-year[aria-pressed="true"] { border-color: var(--ink); }
.cf-year[aria-pressed="true"] .cf-yn { color: var(--ink); }
.cf-year[aria-pressed="true"] .cf-yb { background: var(--ink); }
.cf-head, .cf-head::after { background: var(--ink); }

/* the board: the five states from open to closed as outlines of rising weight, then a fill. No license a hairline, Restricted
   a light dash, Case by case an ink dash, Presumption of denial a solid ink outline, Prohibited filled ink */
.cf-pill { font-family: var(--font-ui); font-weight: 500; font-size: 12px; line-height: 16px; padding: 2px 8px 3px; border-radius: 3px; }
.cf-pill.is-denial { border: 1.5px solid var(--ink); color: var(--ink); padding: 1.5px 7.5px 2.5px; }
.cf-susp { font-family: var(--font-ui); font-size: 12px; border-radius: 3px; }
.cf-name { font-size: var(--t-text); }
.cf-route, .cf-when, .cf-cite, .cf-ev-cite, .cf-ev-from { font-family: var(--font-ui); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.cf-ramp-f { background: var(--ink-2); }
.cf-ramp.is-closed .cf-ramp-f, .cf-ramp.is-closed .cf-ramp-d { background: var(--ink); }
.cf-ramp.is-closed .cf-ramp-f { height: 4px; top: 8.5px; } /* past a presumption of denial the line thickens, as the pills do */
.cf-scale-r { font-family: var(--font-ui); font-size: 12px; }
.cf-scale-r i { background: linear-gradient(to right, var(--line-2), var(--ink)); }
.cf-scale-r i::after { border-left-color: var(--ink); }
.cf-scale-r span:last-child { color: var(--ink); }
.cf-scale-l, .cf-scale-x { font-family: var(--font-ui); font-size: 12px; }
.cf-legend li > span:last-child { font-size: var(--t-note); }
.cf-row.is-changed { animation-name: cf-glow2; }
@keyframes cf-glow2 { 0%, 62% { background-color: var(--bg-2); } 100% { background-color: transparent; } }
@media (min-width: 900px) {
  .cf[data-mode="date"] .cf-side { border-left-color: var(--line-2); }
}

/* China revenue share: the section head as the countdown's, the key in Hanken at a readable size */
.ex-h { margin-top: 40px; }
.ex-legend { font-family: var(--font-ui); font-weight: 400; font-size: 12.5px; color: var(--ink-2); margin-top: 16px; }
.ex-cat { font-family: var(--font-ui); font-size: 13px; color: var(--ink); }
.ex-panel figcaption span { font-family: var(--font-ui); font-size: 12px; }
.table-view > summary { font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 760px) { .ex-h { margin-top: 28px; } }

/* final QA B1 and B3 (28 Oct 2026). A stay that holds up a row's own outcome draws its pill back in every state alike: the
   denial pill's 1.5 px ink outline above (line 417) no longer outranks it, and the ramp's dashed dot wins over the closed fill.
   A stay of one measure inside a row keeps the pill in ink and names the measure in its tag (Geo.stayText in src/app.js).
   A second review policy sits beside the first, each followed by whom it covers. Past the day the data was checked, a stay
   whose end has come, or a change that falls due, is tagged as not confirmed, in a darker dash. */
.cf-pill.is-suspended { border-width: 1px; border-color: var(--line-2); color: var(--muted); background: transparent; padding: 2px 8px 3px; }
.cf-ramp.is-susp .cf-ramp-f { background: var(--line-2); }
.cf-ramp.is-susp .cf-ramp-d { background: var(--bg); border: 1.5px dashed var(--ink-2); }
.cf-for { font-family: var(--font-ui); font-size: 12px; line-height: 16px; color: var(--muted); margin-right: 6px; }
.cf-susp.is-unconfirmed { border-color: var(--ink-2); color: var(--ink); white-space: normal; }
.cf-checked { margin-left: 10px; font-size: 12px; color: var(--muted); }
.cf-checked[hidden] { display: none; }
.cf-up-i.is-passed .cf-up-n { white-space: normal; color: var(--ink); }
/* the compact board (By date, desktop): two policies and a named stay wrap within the state's column, flush right, so the
   row's name keeps its width */
@media (min-width: 900px) {
  .cf[data-mode="date"] .cf-rowh { grid-template-columns: minmax(9em, 1fr) minmax(0, auto); }
  .cf[data-mode="date"] .cf-pills { justify-content: flex-end; max-width: 17em; }
  .cf[data-mode="date"] .cf-for { margin-right: 0; }
  .cf[data-mode="date"] .cf-susp { white-space: normal; text-align: right; }
}


/* module: figsteps.css */
/* Figures that step, 13.2 and 16.2 (build/figsteps.js, src/modules/figsteps.js). They sit in the chapter's figure grammar
   (chapter.css: the box, the head, the bars, the source strip); this sheet adds the step row, the step's sentence, the bars
   arriving with their step and the drawing of 13.2. On paper the figure is at rest: every bar, the drawing whole, the last
   sentence, and no step row. */

/* the step row, as the explainers set theirs (styles.css .anim-steps) */
.figure--steps ol.sf-steps { display: flex; flex-wrap: wrap; gap: 2px 13px; list-style: none; margin: 0 0 16px; padding: 0; max-width: none; }
.figure--steps ol.sf-steps li { margin: 0; padding: 0; }
.figure--steps ol.sf-steps li::before { content: none; display: none; }
.figure--steps .sf-cap { margin: 14px 0 0; min-height: 4.5em; font-family: var(--font-body); font-size: var(--t-small); line-height: 1.5; color: var(--ink); }
.figure--steps.is-table .sf-steps, .figure--steps.is-table .sf-cap, .figure--steps.is-table .sf-draw { display: none; }

/* bars that arrive with their step (screen only: on paper every bar stands) */
@media screen {
  .figure--steps .hbars .hb { transition: opacity 420ms var(--ease); }
  .figure--steps .hbars .hb-r i { transition: width 900ms var(--ease); }
  .figure--steps .hbars .hb.is-off { opacity: 0; }
  .figure--steps .hbars .hb.is-off .hb-r i { width: 0 !important; }
  .figure--steps .hbars .hb.is-new .hb-l { color: var(--ink); }
}

/* 13.2: the racks and one GPU's two links (figsteps.js draws the svg at the column's width) */
.sf-draw { position: relative; margin: 0 0 18px; }
.sf-draw svg { display: block; width: 100%; height: auto; overflow: visible; }
.sy-frame { fill: var(--bg); stroke: var(--line-2); stroke-width: 1; transition: stroke 500ms var(--ease), stroke-width 500ms var(--ease); }
.sy-frame.held { stroke: var(--ink); stroke-width: 1.5; }
.sy-ctray { fill: var(--bg-2); }
.sy-gpu { fill: var(--rule-ink); transition: fill 500ms var(--ease); }
.sy-gpu.on { fill: var(--accent); }
.sy-stray { fill: var(--ink-2); }
.sy-port { fill: var(--bg-3); }
.sy-up { fill: none; stroke: var(--accent); stroke-linejoin: round; }
.sy-up.ctx, .sy-out.ctx { stroke: var(--ctx); }
.sy-out { fill: none; stroke: var(--ink-2); stroke-linejoin: round; }
.sy-net { fill: none; stroke: var(--ink-2); }
.sy-flow { fill: none; stroke-linecap: round; }
.sy-flow.up { stroke: var(--bg); }
.sy-flow.out { stroke: var(--ink); }
.sy-lab { font-family: var(--font-ui); font-size: 12px; fill: var(--ink-2); }
.sy-lab.k { font-weight: 600; fill: var(--ink); }
.sy-lab.w { font-weight: 700; fill: var(--accent-ink); }
.sy-lab.m { fill: var(--muted); }
.sy-layer { fill: var(--ink); }
.sy-blk-t { font-family: var(--font-ui); font-size: 11.5px; fill: var(--ink); text-anchor: middle; }
.sy-drop { stroke: var(--ink); stroke-width: 1; fill: none; }
.sy-hold { fill: var(--ink); }
.sy-fade { transition: opacity 500ms var(--ease); }
.sy-fade.off { opacity: 0; }
@keyframes sy-up { to { stroke-dashoffset: -12; } }
@keyframes sy-out { to { stroke-dashoffset: -108; } }
.sy-flow.up.go { animation: sy-up 0.6s linear infinite; }
.sy-flow.out.go { animation: sy-out 5.4s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .sy-flow.up.go, .sy-flow.out.go { animation: none; }
  .figure--steps .hbars .hb, .figure--steps .hbars .hb-r i, .sy-gpu, .sy-fade, .sy-frame { transition: none; }
}

@media print {
  .figure--steps .sf-steps { display: none !important; }
  .figure--steps .sf-cap { min-height: 0; margin: 2.4mm 0 0; font-size: calc(8.4pt * var(--text-scale, 1)); line-height: 1.38; }
  .sf-draw { margin: 0 0 3mm; break-inside: avoid; }
  .sf-draw svg { max-width: min(100%, 134mm); }
  .sy-flow { animation: none !important; }
  .sy-fade, .sy-gpu, .sy-frame { transition: none !important; }
}


/* module: live.css */
/* Live explainers (29 Oct 2026, the owner's approved mockups): figure 04.2, several passes (src/modules/live-saqp.js), and
   figure 07.1, driven by its model (src/modules/live-yield.js). Each is a .figure--anim whose stage the module draws into;
   the module marks the figure .figure--live and .lv-saqp or .lv-yield. Every label is HTML text at 11.5 px or more. On paper
   the live parts (.lv-screen) give way to the stage's still, .anim-print, above the list of steps, as the videos do. */

/* labels drawn as text over a canvas */
.lv-draw { position: relative; }
.lv-draw canvas { display: block; width: 100%; height: auto; }
.lv-lab { position: absolute; white-space: nowrap; pointer-events: none; font-family: var(--font-ui); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; color: var(--ink-2); transition: opacity 0.25s; }
.lv-lab.lead::after { content: ""; position: absolute; left: 50%; top: calc(100% + 3px); width: 1px; height: var(--lead, 10px); background: currentColor; opacity: 0.7; }
@media (prefers-reduced-motion: reduce) { .lv-lab { transition: none; } }

/* ---------- 04.2, several passes ---------- */
/* the tally's three kinds of step, in the drawing's own colors: light, deposited film (first and second), etch */
:root { --sq-violet: #5a4bb0; --sq-dep: #8a9bb0; --sq-gen2: #4f8a8b; --sq-etch: #45443f; }
:root[data-theme="dark"] { --sq-violet: #a99cff; --sq-dep: #7d8ea3; --sq-gen2: #5fa3a4; --sq-etch: #c6c4be; }
.lv-saqp .anim-stage { cursor: pointer; padding: 14px 0 16px; }
.lv-saqp .sq-lane-k { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin: 0 16px 8px;
  font-family: var(--font-ui); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); line-height: 1.35; }
.lv-saqp .sq-lane-euv { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.lv-saqp .sq-ghostkey { display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--ink-2); }
.lv-saqp .sq-ghostkey svg { width: 10px; height: 14px; fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2.5 2; }
.lv-saqp .sq-onfilm { color: #171716; text-shadow: 0 0 3px #c98f2e, 0 0 3px #c98f2e, 0 0 2px #c98f2e; }
.lv-saqp .sq-onwafer { color: #f4f3ef; }
.lv-saqp .sq-dim { white-space: normal; width: max-content; max-width: min(230px, 46%); text-align: center; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px; line-height: 1.3; color: var(--ink-2); }
.lv-saqp .sq-dim.sq-reflect { max-width: none; white-space: nowrap; text-align: left; color: var(--sq-violet); text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg), 0 0 2px var(--bg); }
.lv-saqp .sq-tiles { display: flex; flex-wrap: wrap; gap: 5px; min-height: 22px; list-style: none; margin: 10px 16px 0; padding: 0; }
.lv-saqp .sq-tile { display: inline-flex; width: 22px; height: 22px; border-radius: 3px; background: var(--k); }
.lv-saqp .sq-tile svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .lv-saqp .sq-tile svg { stroke: var(--bg); }
.lv-saqp .sq-tiles .sq-tile.off { display: none; }
.lv-saqp .sq-tiles .sq-tile:not(.off) { animation: sq-in 0.35s ease-out; }
@keyframes sq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lv-saqp .sq-tiles .sq-tile:not(.off) { animation: none; } }
.lv-saqp .sq-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 16px 0; font-family: var(--font-ui); font-size: 12px; color: var(--ink-2); }
.lv-saqp .sq-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.lv-saqp .sq-tile-s { width: 16px; height: 16px; border-radius: 2px; }
@media (max-width: 600px) {
  .lv-saqp .anim-stage { padding: 12px 0 14px; }
  .lv-saqp .sq-lane-k, .lv-saqp .sq-tiles, .lv-saqp .sq-legend { margin-left: 12px; margin-right: 12px; }
  .lv-saqp .sq-dim { max-width: 48%; font-size: 11.5px; }
}

/* ---------- 07.1, driven by its model ---------- */
.lv-yield .anim-stage { cursor: default; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 8px 28px; align-items: center; padding: 20px 22px; }
.lv-yield .yd-wafer canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.lv-yield .yd-read { display: grid; gap: 18px; align-content: center; }
.lv-yield .yd-k { margin: 0 0 -6px; font-family: var(--font-ui); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lv-yield .yd-row { position: relative; padding-left: 16px; transition: opacity 0.35s; }
.lv-yield .yd-row::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 2px; width: 2px; background: var(--accent); opacity: 0; transition: opacity 0.25s; }
.lv-yield .yd-row.on::before { opacity: 1; }
.lv-yield .yd-row.off { opacity: 0; }
.lv-yield .yd-num { font-family: var(--font-display); font-variation-settings: var(--opsz-numeral); font-weight: 300; font-size: 44px; line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lv-yield .yd-unit { margin-left: 8px; font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.lv-yield .yd-row.on .yd-num, .lv-yield .yd-row.on .yd-unit { color: var(--accent-ink); }
.lv-yield .yd-name { display: block; margin-top: 6px; font-family: var(--font-ui); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); line-height: 1.35; }
.lv-yield .yd-ctls { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin: 16px 0 0; }
.lv-yield .yd-ctl { display: block; }
.lv-yield .yd-ctl-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: var(--font-ui); }
.lv-yield .yd-ctl-k { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lv-yield .yd-ctl output { font-size: 14px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-yield .yd-track { position: relative; --th: 20px; }
.lv-yield input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 32px; margin: 2px 0 0; background: none; cursor: pointer; }
.lv-yield input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--control-edge); }
.lv-yield input[type="range"]::-moz-range-track { height: 2px; background: var(--control-edge); }
.lv-yield input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: var(--th); height: var(--th); margin-top: -9px; border-radius: 50%; background: var(--ink); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--ink); }
.lv-yield input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--ink); }
.lv-yield input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lv-yield .yd-ticks { position: relative; height: 30px; margin: 0 calc(var(--th, 20px) / 2); font-family: var(--font-ui); font-size: 11.5px; color: var(--muted); }
.lv-yield .yd-tick { position: absolute; top: 0; transform: translateX(-50%); text-align: center; white-space: nowrap; line-height: 1.3; }
.lv-yield .yd-tick::before { content: ""; display: block; width: 1px; height: 5px; margin: 0 auto 2px; background: var(--control-edge); }
.lv-yield .yd-tick.end { transform: translateX(-100%); text-align: right; }
.lv-yield .yd-tick.end::before { margin: 0 0 2px auto; }
.lv-yield .yd-tick.start { transform: none; text-align: left; }
.lv-yield .yd-tick.start::before { margin: 0 auto 2px 0; }
.lv-yield .yd-tick small { display: block; font-size: 11.5px; color: var(--muted); }
@media (max-width: 600px) {
  .lv-yield .anim-stage { grid-template-columns: 1fr; padding: 14px 12px 16px; gap: 12px; }
  .lv-yield .yd-wafer { width: min(100%, 224px); margin: 0 auto; }
  .lv-yield .yd-read { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
  .lv-yield .yd-k { grid-column: 1 / -1; margin: 0; }
  .lv-yield .yd-row { padding-left: 8px; }
  .lv-yield .yd-num { font-size: 30px; }
  .lv-yield .yd-unit { display: block; margin: 4px 0 0; font-size: 12px; }
  .lv-yield .yd-name { font-size: 11.5px; letter-spacing: 0.04em; }
  .lv-yield .yd-ctls { grid-template-columns: 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .lv-yield .yd-row, .lv-yield .yd-row::before { transition: none; } }

/* on paper and in the PDF: the still in place of the live parts (styles.css and print.css print the still and the steps) */
@media print {
  .figure--live .lv-screen { display: none !important; }
  .figure--live .anim-stage { display: block !important; padding: 0 !important; cursor: auto; }
  /* 04.2's still is near square: held to 100 mm tall (about 105 mm wide), so the figure and its first steps share a page */
  .chapter .figure--live.figure--anim .anim-print { width: auto; max-width: 134mm; max-height: 100mm; }
}


/* module: lookup.css */
/* The Glossary, search first, with what it holds under the field ("Kinds and letters", the owner's choice of 30 Oct 2026;
   src/modules/lookup.js; the mockup is qa/excellence/glossary-alt/sf-kinds/ in the main checkout, with its designer's pass).
   At rest the view holds the name, one field, Random entry and, under them, one row of kinds with their counts and one row of
   letters, each opening Browse A to Z. Typing drops suggestions inside the field's rounded edge. An entry or the A to Z index
   moves the same field into a slim bar under the masthead and shows one centered column. #gl-view[data-state] names the state:
   home, entry or browse. Every color, face and size is a site token; wine marks focus and the current item only, and in a
   country's shares the largest one (the chart rule: the largest wine, the rest the light tint). */
:root { --gl-col: 700px; --gl-bar-h: 0px; --gl-strip-h: 0px; }
.view[data-view="glossary"] { width: 100%; padding: 0; }
/* the parts the rows fill wait, hidden, until they are in, so nothing painted early moves (lookup.js sets data-gl) */
.view[data-view="glossary"]:not([data-gl]) .gl-wait { visibility: hidden; }
.gl { min-height: calc(100vh - var(--masthead)); }
.gl:not([data-state="browse"]) .gl-browse, .gl:not([data-state="entry"]) .gl-pane { display: none; }
.view[data-view="glossary"] > .site-footer { margin: 0 var(--margin); }

/* ---------- the head: at rest, the calm first screen ---------- */
.gl-head { display: flex; flex-direction: column; align-items: center; min-height: calc(100vh - var(--masthead)); min-height: calc(100dvh - var(--masthead)); padding: clamp(40px, 19vh, 200px) var(--margin) 72px; }
.gl-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--opsz-title); font-size: clamp(56px, 13vw, 96px); line-height: 1; letter-spacing: -0.03em; color: var(--ink); transform-origin: 0 0; }
.gl-title a { color: inherit; text-decoration: none; }
.gl-title a:focus-visible { outline-offset: 6px; }
.gl:not([data-state="home"]) .gl-title a:hover { text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.gl-field { position: relative; width: min(640px, 100%); height: 54px; margin-top: clamp(26px, 4.4vh, 40px); }
.gl-box { position: absolute; left: 0; right: 0; top: 0; z-index: 25; border: 1px solid var(--control-edge); border-radius: 27px; background: var(--bg); transition: border-color 0.15s; }
.gl-box:hover { border-color: var(--ink-2); }
.gl-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.gl-field.is-open .gl-box { box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.gl-frow { position: relative; display: flex; align-items: center; height: 52px; }
.gl-frow svg { position: absolute; left: 20px; top: 50%; width: 18px; height: 18px; margin-top: -9px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.gl-frow input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0 52px 0 50px; border: 0; border-radius: 27px; background: none; font-family: var(--font-ui); font-size: 17px; color: var(--ink); outline: none; -webkit-appearance: none; appearance: none; }
.gl-frow input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.gl-frow input::placeholder { color: var(--muted); opacity: 1; }
.gl-clear { position: absolute; right: 7px; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; font-family: var(--font-ui); font-size: 24px; line-height: 1; color: var(--muted); }
.gl-clear:hover { color: var(--ink); }
.gl-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.gl-btns .btn { min-height: 40px; padding: 9px 20px; font-size: 14.5px; }
.gl-az-link { display: none; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.gl-az-link:hover { text-decoration-color: currentColor; }

/* ---------- what is inside: the kinds with their counts, then the letters ---------- */
/* the gap above them is about twice the 28 px between the field and the button, so the search and the contents read as two
   tiers; the figures use the name-size optical cut; the letters sit on 27 equal-pitch cells with a wider first cell for 0–9,
   so the row's ink runs edge to edge under the field and every gap reads the same (the designer's pass, 29 Oct 2026) */
.gl-hold { width: min(640px, 100%); margin-top: 52px; }
.gl-kindrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; margin: 0; padding: 0; list-style: none; font-family: var(--font-ui); font-size: 14.5px; line-height: 1.4; color: var(--muted); }
.gl-kindrow li { display: flex; align-items: baseline; }
.gl-kindrow li + li::before { content: "·"; padding: 0 12px; color: var(--muted); }
.gl-kindrow a { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 1px; color: var(--ink-2); text-decoration: none; }
.gl-kindrow .n { font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--opsz-name); font-size: 21px; line-height: 1; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.gl-kindrow .w { text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gl-kindrow a:hover .w { color: var(--ink); text-decoration-color: currentColor; }
.gl-abc { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(26, minmax(0, 1fr)); margin: 18px 0 0; padding: 6px 0 0; border-top: 1px solid var(--line); }
.gl-abc a:focus-visible { outline-offset: 0; border-radius: 4px; } /* the ring keeps to its own cell and clears the rule */
.gl-abc a, .gl-abc span { display: flex; align-items: center; justify-content: center; min-width: 0; height: 34px; font-family: var(--font-ui); font-size: 14px; line-height: 1; color: var(--ink-2); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gl-abc span { color: var(--line-2); }
.gl-abc a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 4px; }
.gl:not([data-state="home"]) .gl-hold { display: none; }

/* ---------- the suggestions, inside the same rounded edge ---------- */
.gl-sugg { margin: 0 20px; padding: 6px 0 12px; border-top: 1px solid var(--line); }
.gl-sugg[hidden] { display: none; }
.gl-sugg ul { list-style: none; margin: 0 -20px; padding: 0; }
.gl-grp { margin: 0; padding: 12px 24px 4px 50px; font-family: var(--font-kicker); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); line-height: 1.4; color: var(--muted); }
.gl-opt { position: relative; display: block; min-height: 44px; padding: 8px 24px 9px 50px; cursor: pointer; }
.gl-opt::before { content: ""; position: absolute; left: 31px; top: 10px; width: 3px; height: 20px; border-radius: 2px; background: transparent; }
.gl-opt[aria-selected="true"]::before { background: var(--accent); }
.gl-opt-h { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.gl-opt-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-ui); font-size: 16px; font-weight: 500; line-height: 22px; color: var(--ink); }
.gl-opt-k { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-ui); font-size: 13px; line-height: 22px; color: var(--muted); }
.gl-opt-d { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-body); font-size: 15px; line-height: 21px; color: var(--ink-2); }
.gl-opt:hover .gl-opt-n { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.gl-opt[aria-selected="true"] .gl-opt-n { color: var(--ink); text-decoration: none; }
.gl-none { margin: 0; padding: 12px 24px 6px 30px; font-family: var(--font-ui); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.gl-none b { font-weight: 600; color: var(--ink); }
.gl-opt-raw .gl-opt-n { font-weight: 400; }
.gl-all { display: block; margin: 6px 0 0 30px; padding: 8px 0; min-height: 40px; font-family: var(--font-ui); font-size: 14.5px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.gl-all:hover { text-decoration-color: currentColor; }

/* ---------- an entry or the index: the head becomes a slim bar, the field in it ---------- */
.gl:not([data-state="home"]) .gl-head { position: sticky; top: var(--masthead); z-index: 30; display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, var(--gl-col)) minmax(max-content, 1fr); align-items: center; column-gap: 28px; min-height: 0; padding: 10px var(--margin); background: var(--bg); border-bottom: 1px solid var(--line); }
.gl:not([data-state="home"]) .gl-title { justify-self: start; font-size: 27px; letter-spacing: -0.015em; }
.gl:not([data-state="home"]) .gl-field { width: 100%; height: 44px; margin: 0; }
.gl:not([data-state="home"]) .gl-box { border-radius: 22px; }
.gl:not([data-state="home"]) .gl-frow { height: 42px; }
.gl:not([data-state="home"]) .gl-frow svg { left: 16px; width: 16px; height: 16px; margin-top: -8px; }
.gl:not([data-state="home"]) .gl-frow input { padding-left: 44px; font-size: 16px; border-radius: 22px; }
.gl:not([data-state="home"]) .gl-clear { right: 3px; }
.gl:not([data-state="home"]) .gl-sugg { max-height: calc(100vh - var(--masthead) - var(--gl-bar-h) - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.gl:not([data-state="home"]) .gl-opt, .gl:not([data-state="home"]) .gl-grp { padding-left: 44px; }
.gl:not([data-state="home"]) .gl-opt::before { left: 26px; }
.gl:not([data-state="home"]) .gl-btns { display: none; }
.gl:not([data-state="home"]) .gl-az-link { display: inline-flex; align-items: center; justify-self: end; min-height: 44px; font-family: var(--font-ui); font-size: 14.5px; white-space: nowrap; }
.gl-az-link[aria-current="page"] { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.gl-az-link .s { display: none; }

/* ---------- the entry: one centered column ---------- */
.gl-pane { padding: 44px var(--margin) 72px; outline: none; }
.gl-e { max-width: 700px; margin: 0 auto; }
.gl-kind { margin: 0 0 14px; }
.gl-hw { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 4.3vw, 62px); line-height: 1.04; letter-spacing: -0.022em; color: var(--ink); overflow-wrap: anywhere; outline: none; }
/* the name takes focus when an entry opens (a heading, never a control), so it carries no ring, as the old sheet's title did */
.gl-hw:focus, .gl-hw:focus-visible { outline: none; }
.gl-native { margin-left: 0.32em; font-family: var(--font-body); font-size: 0.42em; letter-spacing: 0; color: var(--muted); }
.gl-names, .gl-meta { margin: 14px 0 0; font-family: var(--font-ui); font-size: 15px; line-height: 1.5; color: var(--muted); }
.gl-def { margin: 26px 0 0; font-family: var(--font-body); font-size: var(--t-lead); line-height: 1.5; color: var(--ink); }
.gl-p { margin: 16px 0 0; font-family: var(--font-body); font-size: var(--t-text); line-height: 1.62; color: var(--ink-2); }
.gl-p b { font-weight: 600; color: var(--ink); }
.gl-x { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.gl-x:hover { text-decoration-color: currentColor; }
.gl-reads { margin: 24px 0 0; font-family: var(--font-ui); font-size: 14.5px; line-height: 1.65; color: var(--ink); }
.gl-reads .gl-rr { display: block; }
.gl-reads .k { margin-right: 8px; color: var(--muted); }
.gl-reads a { color: var(--ink); text-underline-offset: 3px; }
.gl-also a { color: var(--ink-2); text-decoration-color: var(--line-2); }
.gl-reads .gl-tbtn { margin-left: 2px; font-size: 14.5px; color: var(--muted); }
.gl-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 9px 28px; margin: 30px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); font-family: var(--font-ui); font-size: 14.5px; line-height: 1.5; }
.gl-facts dt { color: var(--muted); }
.gl-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.gl-facts dd a { color: var(--ink); text-underline-offset: 3px; }
.gl-facts .sup-ex-mini.ex-panel { margin: 8px 0 2px; }
/* a firm's rating as the Suppliers mark, in ink: the page's one wine data mark belongs to Suppliers */
.gl-chk { display: inline-flex; align-items: flex-end; gap: 7px; }
.gl-chk::before { content: ""; display: inline-block; width: 4px; margin-bottom: 4px; background: var(--ink); }
.gl-chk--critical::before { width: 6px; height: 14px; }
.gl-chk--important::before { height: 10px; }
.gl-chk--contested::before { height: 10px; background: none; box-shadow: inset 0 0 0 1.25px var(--ink); }
.gl-chk--diversified::before { height: 5px; background: var(--muted); }
.gl-note { margin: 16px 0 0; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.55; color: var(--muted); overflow-wrap: anywhere; }
.gl-note b { font-weight: 600; color: var(--ink-2); }
.gl-links { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 22px 0 0; font-family: var(--font-ui); font-size: 14.5px; line-height: 1.5; }
.gl-links a { color: var(--ink); text-underline-offset: 3px; }
.gl-part { margin-top: 48px; }
.gl-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--rule-ink); font-family: var(--font-display); font-weight: 400; font-size: 23px; line-height: 1.2; color: var(--ink); }
.gl-n { font-family: var(--font-ui); font-size: 13px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gl-men { list-style: none; margin: 0; padding: 0; }
.gl-men li { border-bottom: 1px solid var(--line); }
.gl-men a { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; padding: 14px 0 15px; color: inherit; text-decoration: none; }
.gl-src { padding-top: 3px; font-family: var(--font-ui); font-size: 13px; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.gl-src b { display: block; margin-bottom: 2px; font-family: var(--font-kicker); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); line-height: 16px; color: var(--muted); }
.gl-txt { font-family: var(--font-body); font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); }
.gl-txt mark { padding: 0 2px; border-radius: 2px; background: var(--accent-soft); color: var(--ink); }
.gl-men a:hover .gl-txt { color: var(--ink); }
.gl-more { margin: 14px 0 0; }
.gl-more button, .gl-tbtn { font-family: var(--font-ui); font-size: 14.5px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-ink); text-underline-offset: 3px; }
.gl-nil { margin: 14px 0 0; font-family: var(--font-ui); font-size: 14.5px; color: var(--muted); }
/* a country's shares: the largest in wine, the rest in the chart rule's tint (chart color rule, 21 Oct 2026) */
.gl-shares, .gl-cards, .gl-cats { list-style: none; margin: 0; padding: 0; }
.gl-share { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, 34%) 52px; column-gap: 16px; align-items: center; padding: 10px 0 11px; border-bottom: 1px solid var(--line); }
.gl-share-k { font-family: var(--font-body); font-size: var(--t-small); line-height: 1.3; color: var(--ink); }
.gl-share-bar { height: 10px; background: linear-gradient(to right, var(--ctx) var(--w), transparent var(--w)); box-shadow: inset 0 -1px 0 var(--line-2); }
.gl-share.is-top .gl-share-bar { background: linear-gradient(to right, var(--accent) var(--w), transparent var(--w)); }
.gl-share-v { text-align: right; font-family: var(--font-ui); font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gl-share.is-top .gl-share-v { font-weight: 700; color: var(--accent-ink); }
.gl-share-m { grid-column: 1 / -1; margin-top: 3px; font-family: var(--font-ui); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.gl-small { margin: 10px 0 0; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.gl-small a { color: var(--ink); text-underline-offset: 3px; }
.gl-cards li { border-bottom: 1px solid var(--line); }
.gl-cards a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 11px 0 12px; color: inherit; text-decoration: none; }
.gl-card-t { font-family: var(--font-body); font-size: var(--t-small); color: var(--ink); }
.gl-card-b { display: inline-flex; align-items: flex-end; gap: 7px; font-family: var(--font-ui); font-size: 13px; color: var(--ink-2); }
/* each stage's band as the chain's mark: Extreme a wine bar, High an outlined one */
.gl-card-b::before { content: ""; display: inline-block; width: 5px; height: 12px; margin-bottom: 3px; background: var(--bar-5); }
.gl-card-b--high::before { height: 6px; background: transparent; box-shadow: inset 0 0 0 1.25px var(--ink); }
.gl-card-n { grid-column: 1 / -1; font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--muted); }
.gl-cards a:hover .gl-card-t { text-decoration: underline; }
.gl-cats li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 10px 0 11px; border-bottom: 1px solid var(--line); font-family: var(--font-ui); font-size: 14.5px; line-height: 1.5; }
.gl-cat-c { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gl-cat-f { grid-column: 1 / -1; font-size: 13.5px; color: var(--muted); }
.gl-cat-f a { color: var(--ink); margin-right: 10px; text-underline-offset: 3px; }
.gl-pn { display: flex; justify-content: space-between; gap: 24px; margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--rule-ink); }
.gl-pn a { display: flex; flex-direction: column; gap: 4px; max-width: 48%; color: inherit; text-decoration: none; }
.gl-pn a.gl-next { margin-left: auto; text-align: right; }
.gl-pn .gl-pn-n { font-family: var(--font-display); font-size: 21px; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
/* wine marks focus and the current item only, so a pointer over a link turns it to full ink */
.gl-x:hover, .gl-reads a:hover, .gl-links a:hover, .gl-more button:hover, .gl-tbtn:hover { color: var(--ink); }
.gl-men a:hover .gl-src, .gl-cards a:hover .gl-card-t, .gl-pn a:hover .gl-pn-n { color: var(--ink); }
/* the passage a link lands on, on its chapter's page, for a moment */
.lk-flash { outline: 1.5px solid var(--accent); outline-offset: 6px; border-radius: 0; transition: outline-color 0.6s ease 1.6s; }

/* ---------- Browse A to Z: every name, under its letter ---------- */
.gl-browse { max-width: calc(var(--gl-col) + 2 * var(--margin)); margin: 0 auto; padding: 40px var(--margin) 80px; } /* the names stand in the field's column, the letters hang to its left */
.gl-bhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.gl-bh { margin: 0; font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--opsz-title); font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); outline: none; }
.gl-bcount { margin: 0; font-family: var(--font-ui); font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gl-kinds { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 14px 0 0; }
.gl-kinds button { padding: 8px 0 5px; border-bottom: 2px solid transparent; font-family: var(--font-ui); font-size: 14.5px; line-height: 1.2; color: var(--muted); white-space: nowrap; }
.gl-kinds button:hover { color: var(--ink); }
.gl-kinds button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.gl-jump { position: sticky; top: calc(var(--masthead) + var(--gl-bar-h)); z-index: 6; display: flex; justify-content: space-between; margin: 18px 0 0; padding: 6px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.gl-jump button, .gl-jump span { display: flex; align-items: center; justify-content: center; min-width: 26px; height: 32px; font-family: var(--font-ui); font-size: 14px; line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gl-jump span { color: var(--line-2); }
.gl-jump::before { content: ""; position: absolute; top: 0; bottom: -1px; right: 100%; width: 76px; background: var(--bg); } /* the strip's ground runs over the hanging letters, so the letter before slides under it */
.gl-jump button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.gl-jump button[aria-current="true"] { color: var(--accent-ink); font-weight: 700; }
.gl-az { list-style: none; margin: 0; padding: 0; }
.gl-g { display: grid; grid-template-columns: 76px minmax(0, 1fr); margin-left: -76px; }
.gl-g[hidden] { display: none; }
.gl-lh { position: sticky; top: calc(var(--masthead) + var(--gl-bar-h) + var(--gl-strip-h)); align-self: start; margin: 0; padding-top: 22px; font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 0.9; color: var(--ink); outline: none; }
.gl-rows { list-style: none; margin: 0; padding: 20px 0 19px; border-bottom: 1px solid var(--line); columns: 3 190px; column-gap: 30px; }
.gl-r { break-inside: avoid; }
.gl-r[hidden] { display: none; }
.gl-r a { display: block; padding: 3px 0 4px; font-family: var(--font-ui); font-size: 15px; line-height: 21px; color: var(--ink-2); text-decoration: none; }
.gl-r a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.gl-r a[aria-current="true"] { color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); padding-left: 8px; }
/* a control reached by Tab lands clear of the bar (and in the index, the letters) as well as the masthead (WCAG 2.4.11) */
html.kb:has(.view[data-view="glossary"]:not([hidden]) .gl:not([data-state="home"])) { scroll-padding-top: calc(var(--masthead) + var(--gl-bar-h) + var(--gl-strip-h) + 12px); }

/* ---------- narrower: the bar drops the name, a phone keeps the same calm screen ---------- */
@media (max-width: 1099px) { :root { --gl-col: 640px; } }
@media (max-width: 879px) {
  .gl-head { padding-top: clamp(28px, 12vh, 150px); }
  .gl-field { height: 52px; }
  .gl-frow { height: 50px; }
  .gl-frow svg { left: 17px; }
  .gl-frow input { padding: 0 48px 0 44px; font-size: 17px; }
  .gl-opt, .gl-grp { padding-left: 44px; padding-right: 18px; }
  .gl-opt::before { left: 27px; }
  .gl-none { padding-left: 26px; }
  .gl-all { margin-left: 26px; }
  .gl:not([data-state="home"]) .gl-head { grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; padding: 8px var(--margin); }
  .gl:not([data-state="home"]) .gl-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gl-az-link .l { display: none; }
  .gl-az-link .s { display: inline; }
  .gl-pane { padding-top: 30px; }
  .gl-browse { padding-top: 28px; padding-right: calc(var(--margin) + 22px); }
  .gl-bh { font-size: 34px; }
  .gl-kinds button { padding: 11px 0 8px; }
  .gl-jump { position: fixed; top: calc(var(--masthead) + var(--gl-bar-h) + 6px); bottom: 50px; right: 0; z-index: 6; flex-direction: column; justify-content: flex-start; width: 28px; margin: 0; padding: 0; border: 0; background: none; touch-action: none; }
  .gl-jump button, .gl-jump span { flex: 1 1 0; min-width: 0; height: auto; max-height: 26px; font-size: 12px; }
  .gl-jump::before { content: none; }
  .gl-g { display: block; margin-left: 0; }
  .gl-lh { position: sticky; top: calc(var(--masthead) + var(--gl-bar-h)); z-index: 2; padding: 18px 0 6px; background: var(--bg); font-size: 24px; line-height: 1; }
  .gl-rows { columns: auto; padding: 0; border-bottom: 0; }
  .gl-r a { padding: 11px 0; font-size: 16.5px; line-height: 22px; border-bottom: 1px solid var(--line); }
  .gl-r a[aria-current="true"] { padding-left: 10px; }
  .gl-hw { font-size: clamp(36px, 10.5vw, 46px); }
  .gl-def { margin-top: 20px; font-size: 20px; }
  .gl-p { font-size: 17.5px; }
  .gl-facts { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .gl-facts dd { margin-bottom: 10px; }
  .gl-men a { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .gl-share { grid-template-columns: minmax(0, 1fr) 72px 48px; column-gap: 12px; }
  .gl-pn .gl-pn-n { font-size: 19px; }
  /* a phone: the kinds as a small table, two columns set as one centered block, the figures right-set so each column's words
     share one edge; the letters as a grid of 44 px keys */
  .gl-btns .btn { min-height: 44px; } /* a phone's targets are 44 px */
  .gl-hold { margin-top: 40px; }
  .gl-kindrow { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; column-gap: clamp(20px, 9vw, 44px); }
  .gl-kindrow li { justify-content: flex-start; }
  .gl-kindrow li + li::before { content: none; }
  .gl-kindrow a { align-items: baseline; gap: 7px; min-height: 44px; padding: 11px 6px 10px; }
  .gl-kindrow .n { display: inline-block; min-width: 1.8em; text-align: right; }
  .gl-abc { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); margin-top: 12px; padding-top: 4px; }
  .gl-abc a, .gl-abc span { min-width: 0; height: 44px; font-size: 15.5px; }
}

/* on paper: the entry alone */
@media print {
  .gl-head, .gl-browse, .gl-pn, .gl-more { display: none !important; }
  .gl-pane { padding: 0; }
}


/* module: print.css */
/* Print: the report. A 10 pt page, each chapter from a new page, every source a short footnote at the foot
   of the page it is cited on, a source list with full addresses after each chapter, and a running head in the margin.
   Footnotes and margin boxes need Paged.js, which build/pdf.py injects from build/vendor/ after
   the page has loaded; src/modules/print.js writes each note from the citation's data-* fields
   and puts the class cp-print on <html>. Without Paged.js (the browser's own Print) the page
   still prints and each chapter keeps its source list at its end.
   The type and colors are the redesign's (qa/redesign/BRIEF.md, stage 4; the faces since the hybrid of 28 Oct 2026):
   Fraunces for headings, Source Serif 4 for text, each as fixed instances at 400, 500 and 600, with an italic of the text
   face at 400 and the wordmark in Fraunces at its own optical size (print.js: a weight between the named ones prints as
   Type 3 shapes, which do not copy or search), Hanken Grotesk for labels, Fragment Mono
   for kickers, codes and dates; ink on white, with the wine on links (the citation marks, the parts list's links), the logo
   tile, the Extreme marks and the one value that matters on each chart (its bar and its bold value; the rest the light tint),
   as on screen since the visual pass of 27 Oct 2026 and the chart rule as amended on 28 Oct 2026.
   The chapter on screen is a 12-column grid (src/modules/chapter.css). On paper it is one column of text with the chain
   in a margin column at its left, so the rules below undo the grid; they carry the screen's selector weight (.chapter
   ...) and come after chapter.css, so they win.
   Everything below is inside @page or @media print: the screen site must not change. */

@page {
  size: A4;
  margin: 17mm 20mm 16mm;

  /* Running heads and folios. Paged.js sets their type through the rules at the end of this file;
     Chrome also draws these boxes when it prints the page itself (it has no string(), so the
     chapter head is left out there), and the type in each box is for that path.
     One string() to a box: Paged.js passes strings through a custom property, and two of them
     in one box cancel each other out. The left head is the chapter's own "Chapter 4: Lithography"; the right names the
     section the page holds ("Chokepoint card", "Who makes it", "Sources (30)"; string-set, below), since the foot
     already names the site. Chrome's own print drops the string() declaration and keeps the site's name. */
  @top-left { content: string(chapter); font: 500 7.5pt "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; color: #45443f; }
  @top-right { content: "Chip Supply Chain"; content: string(section); font: 500 7.5pt "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; color: #45443f; }
  @bottom-left { content: "chipsupplychain.org"; font: 500 7.5pt "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; color: #45443f; }
  @bottom-right { content: counter(page) " / " counter(pages); font: 500 7.5pt "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; color: #45443f; }

  /* The foot of the page: a hairline, then the notes. */
  @footnote { margin-top: 4mm; padding-top: 2.2mm; border-top: 0.4pt solid #c4c3bd; }
}

/* The title page carries no head and no folio. */
@page :first {
  @top-left { content: none; }
  @top-right { content: none; }
  @bottom-left { content: none; }
  @bottom-right { content: none; }
}

@media print {
  /* Paper is white with ink, whatever the reader was using: the site's light tokens, and the list matches every
     dark-theme selector at equal weight (a system-dark block uses :root:not([data-theme="light"])). */
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    --bg: #fff; --bg-2: #f4f4f2; --bg-3: #e4e3df;
    --ink: #171716; --ink-2: #45443f; --muted: #56554f;
    --line: #e1e0db; --line-2: #c4c3bd; --rule-ink: #8c8a84; --control-edge: #8c8a84;
    --accent: #7a1f2b; --accent-ink: #7a1f2b; --accent-soft: #f3e3e5; --accent-fill: #7a1f2b;
    --ctx: #d2d1cc; /* the chart rule: the values that are not the largest (the largest is wine) */
    --c1: #2b63c4; --c2: #e06a1f; --c3: #1f9a6d; --c4: #c9a10c; --c5: #5a48b8; --c6: #c3302b; --c7: #2e7d1e; --c8: #8a9099;
    --stage-ink: 23, 23, 22; --stage-accent: 122, 31, 43;
    --bar-5: #7a1f2b; --bar-4: #8c8a84; --bar-3: #c4c3bd; /* Extreme in wine, as on screen */
    --shadow: none; --masthead: 0px; --band: 0px; --col: 100%; --measure: 128mm;
    /* the static print fonts (print.js printFonts), with Noto for Chinese and Japanese titles, so nothing falls back to a
       system font (those print as Type 3 shapes, which do not copy or search) */
    --font-display: "Fraunces", "Noto Serif SC", "Noto Serif JP", Georgia, serif;
    --font-body: "Source Serif 4", "Noto Serif SC", "Noto Serif JP", Georgia, serif;
    --font-ui: "Hanken Grotesk", "Noto Sans SC", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
    --font-mono: var(--font-ui);
    --font-code: "Fragment Mono", "Noto Sans SC", "Noto Sans JP", ui-monospace, monospace;
    --font-kicker: var(--font-code); --font-caption: var(--font-body);
    --tt-label: none; --tr-label: 0; /* paper keeps its kickers in Fragment Mono, sentence case; the screen's capitals stop here */
    --opsz-title: normal; --opsz-numeral: normal; --opsz-name: normal;
    color-scheme: light;
  }
  :root[data-theme="dark"] .timeline .cat.policy { color: #7a5f06; } /* the screen's dark-theme yellow is unreadable on paper */

  /* Fills and backgrounds are data here: the bars, the band marks and every SVG chart. */
  *, *::before, *::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* static fonts have no axes to set: each optical size is its own instance (print.js PRINT_FONTS) */
  *, *::before, *::after { font-variation-settings: normal !important; font-optical-sizing: none; }
  /* and no bold or italic made up by the browser: Chrome draws a made-up face as Type 3 shapes too (Fragment Mono has one
     weight, so a mono label inside a bold line keeps its own) */
  *, *::before, *::after { font-synthesis: none; }

  /* Chrome, screen furniture off: masthead, specimen stage, phone strip and its sheet, rail,
     back-to-top, search dialog, hover tooltips and the copy buttons. */
  .masthead, .tabs, .search-btn, .theme-toggle, .skip,
  .stage, .stage-actions, .stage-tag, .sheet,
  .rail, .to-top, #cp-search, .ex-tip, .ct-tip, .gl-tip, .export-bar, .permalink, .ch-copy,
  .howto-dl, .prevnext, .ch-meta, .chain--compact, .chain-foot, .ledger-key, .ch-slim { display: none !important; }

  /* Every view that is on screen prints, full width. Hidden views stay hidden. */
  .view[hidden] { display: none !important; }
  .view:not([hidden]) { display: block; min-height: 0; }
  .view.column:not([hidden]), .view.column.wide:not([hidden]), .view[data-view="stack"]:not([hidden]) { width: 100%; max-width: none; padding: 0; }
  .view[data-view="stack"] > .howto, .view[data-view="stack"] > .contents { max-width: none; }
  #app { padding-top: 0; }
  body::before { display: none !important; } /* the wafer grain is a page-sized alpha layer; printed, it costs a megabyte a page */

  /* ---------- the type ramp for paper ----------
     Screen sizes are in px and far too large at this measure; every step of the ramp is set here in points against a
     10.6 pt body of Source Serif 4, so the hierarchy holds on the page. Each size in the text face is its old Literata size
     times the text scale (src/styles.css), as on screen: 9.8 pt then, 10.6 pt now. */
  body { background: #fff; color: var(--ink); font-family: var(--font-body); font-size: calc(9.8pt * var(--text-scale)); line-height: 1.5; }
  .column { width: 100%; max-width: none; padding: 0; margin-left: 0; }
  a[href] { text-decoration: none; color: inherit; }
  /* the marks in the text are links: they stay wine, the notes they call are at the foot */
  .prose sup.cite a, .chapter sup.cite a, .chapter .plate sup.cite a, sup.cite-sep { color: var(--accent-ink); }
  sup.cite { margin-left: 1px; }
  sup.cite a { padding: 0; background: none !important; }

  /* ---------- the chapter: one column of text, the chain in a margin column at its left ---------- */
  /* Paged.js copies the chapter onto each page it fills, each copy with its own padding: so no padding at the foot,
     or it stood under the last line of every page. The opener sinks 20 mm on its first page (the book's later pages,
     copies with data-split-from, start at the margin); a chapter printed alone opens under its title block. */
  article.chapter { display: block; break-before: page; padding: 20mm 0 0 36mm; border-top: 0; }
  /* The margin column holds the chain on a chapter's first page only. From its second page the text takes the page's width,
     its lines capped at --pcol (150 mm, about 85 characters of the 10 pt text): the book ran 203 pages with the margin
     on every page (28 Oct 2026), against 174 for the live book. */
  article.chapter[data-split-from] { padding-top: 0; padding-left: 0; --pcol: 150mm; }
  .cp-alone article.chapter { padding-top: 0; }
  article.chapter > .chapter-head { display: block; margin: 0; }
  .chapter .ch-open, .chapter .ch-spec, .chapter .plain, .chapter .inshort, .chapter > .prose { grid-column: auto; grid-row: auto; }

  /* the margin column: print.js moves the rail to the head of the chapter, where it floats beside the opener. Its screen
     parts go (chapter.css); what prints is the chain (print.js stageIndex): each stage's number, its whole name and its
     band's meter, as the screen's rail shows them, the chapter's own stage in bold. Long names take two lines. */
  .chapter > .ch-ledger { float: left; width: 31mm; margin: 0.6mm 0 0 -36mm; padding: 0; position: static; max-height: none; overflow: visible; text-align: left; }
  .chapter .ch-tile { display: none !important; }
  .chapter .cp-index-k { margin: 0 0 1.4mm; font-family: var(--font-code); font-size: 6.6pt; line-height: 1.3; color: var(--muted); }
  .chapter .cp-index { list-style: none; margin: 0; padding: 0; border-top: 0.6pt solid var(--ink); }
  .chapter .cp-index li { display: grid; grid-template-columns: 4.2mm minmax(0, 1fr) 3.3mm; column-gap: 1.2mm; align-items: baseline; margin: 0; padding: 0.75mm 0;
    border-bottom: 0.3pt solid var(--line); font-family: var(--font-ui); font-size: 6.4pt; line-height: 1.22; color: var(--ink-2); break-inside: avoid; }
  .chapter .cp-index .n { font-family: var(--font-code); font-size: 6pt; color: var(--muted); font-variant-numeric: tabular-nums; }
  .chapter .cp-index .t { min-width: 0; text-wrap: balance; }
  /* the band's meter (chapter.css .meter), sized for paper: on the name's first line */
  .chapter .cp-index .meter { --mh: 2.2mm; --mw: 0.6mm; --mg: 0.3mm; align-self: start; justify-self: end; margin-top: 0.3mm; }
  .chapter .cp-index li.is-here { color: var(--ink); font-weight: 600; }
  .chapter .cp-index li.is-here .n { color: var(--ink); }
  .chapter .cp-index.cp-across { margin-top: 2.4mm; border-top-width: 0.3pt; border-top-color: var(--line-2); }

  /* 1. the opener: the kicker in mono, the title in the display face, the standfirst in the text face, an ink rule under them */
  .chapter .ch-open { display: block; margin: 0; padding: 0 0 4.2mm; border-bottom: 0.6pt solid var(--ink); }
  .chapter .ch-kick { display: flex; flex-wrap: wrap; align-items: center; gap: 1mm 5mm; margin: 0; font-family: var(--font-code); font-size: 7.4pt; line-height: 1.3; color: var(--muted); }
  .chapter .ch-band { gap: 1.6mm; font-family: var(--font-ui); font-size: 7.6pt; font-weight: 500; color: var(--ink); }
  .chapter .ch-band .meter { --mh: 2.6mm; --mw: 0.9mm; --mg: 0.35mm; margin: 0; }
  .chapter .ch-title, .chapter .ch-title.is-long { margin: 4.4mm 0 0 -0.04em; font-family: var(--font-display); font-weight: 400; font-size: 34pt; line-height: 0.98; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
  .chapter .ch-title.is-long { font-size: 27pt; line-height: 1.02; }
  .chapter .ch-lede { margin: 4mm 0 0; max-width: 118mm; font-family: var(--font-body); font-size: calc(11.6pt * var(--text-scale)); line-height: 1.4; color: var(--ink-2); }
  .chapter .ch-omet { display: none; } /* the facts line and the cite line are the screen's; the title block and the colophon carry both */

  /* 2. the specimen: its caption, plain and flush left; Lithography's annotated drawing above it (print.js stills) */
  .chapter .ch-spec, .chapter .ch-spec[data-night] { display: block; margin: 0; padding: 4mm 0 0; background: none; color: var(--ink);
    --bg: #fff; --ink: #171716; --ink-2: #45443f; --muted: #56554f; --line-2: #c4c3bd; --rule-ink: #8c8a84; --accent: #7a1f2b; --accent-ink: #7a1f2b; }
  .chapter .ch-spec .cp-still { margin: 0 0 3mm; break-inside: avoid; }
  .chapter .ch-spec .cp-still svg { display: block; width: 122mm; max-width: 100%; height: auto; overflow: visible; }
  .chapter .ch-spec .ch-still--narrow { display: none; }
  .chapter .ch-spec-cap { margin: 0; max-width: 122mm; }
  .chapter .ch-spec-cap .label { display: block; margin: 0 0 1mm; font-family: var(--font-code); font-size: 7pt; line-height: 1.3; color: var(--muted); }
  .chapter .ch-spec-cap > p:not(.ch-parts-k) { margin: 0; font-family: var(--font-body); font-size: calc(8.4pt * var(--text-scale)); line-height: 1.45; color: var(--ink-2); }
  .chapter .ch-spec-cap .stage-pause { display: none; }
  .chapter .ch-parts-k { margin: 2.4mm 0 0.6mm; padding-top: 1.8mm; border-top: 0.4pt solid var(--rule-ink); font-family: var(--font-code); font-size: 7pt; line-height: 1.3; color: var(--muted); }
  .chapter .ch-parts { font-family: var(--font-ui); font-size: 8pt; line-height: 1.35; color: var(--ink); }
  .chapter .ch-parts li { grid-template-columns: 5mm minmax(0, 1fr); column-gap: 1.2mm; padding: 0.6mm 0; break-inside: avoid; }
  .chapter .ch-parts b { width: 3.8mm; height: 3.8mm; border-width: 0.7pt; font-size: 6.4pt; }
  .chapter .ch-parts a { color: var(--accent-ink); text-decoration: none; }
  .ch-still line { stroke: var(--ink); }
  .ch-still .dot { fill: var(--ink); stroke: #fff; }
  .ch-still .bal { fill: #fff; stroke: var(--ink); }
  .ch-still .num, .ch-still .nm { font-family: var(--font-ui); fill: var(--ink); }

  /* In plain terms opens the text as a section does: an ink rule, then the heading in the display face. In short follows it. */
  .chapter .plain, .chapter .ch-page .plain { max-width: var(--pcol, 128mm); margin: 6mm 0 0; padding: 2.6mm 0 0; border: 0; border-top: 0.6pt solid var(--ink); background: none; }
  .chapter .plain h2.label, .chapter .plain .label { display: block; margin: 0 0 2.4mm; padding: 0; font-family: var(--font-display); font-weight: 400; font-size: 16pt; line-height: 1.12; letter-spacing: -0.012em; color: var(--ink); }
  .chapter .plain p { margin: 0; max-width: var(--pcol, 128mm); font-family: var(--font-body); font-size: calc(10.2pt * var(--text-scale)); line-height: 1.5; color: var(--ink); }
  .chapter .inshort { max-width: var(--pcol, 128mm); margin: 5mm 0 0; padding: 0; border: 0; }
  .chapter .inshort h2.label { margin: 0 0 1.2mm; font-family: var(--font-ui); font-weight: 600; font-size: 8pt; line-height: 1.3; color: var(--ink); }
  /* each paragraph stands 1.8 mm below the one before. No "a + b" or ":first-of-type" selectors in this file: Paged.js
     rewrites them as attribute rules of lower weight, and they lose. */
  .chapter .inshort p, .chapter .inshort li { margin: 1.8mm 0 0; font-family: var(--font-body); font-size: calc(10pt * var(--text-scale)); line-height: 1.48; color: var(--ink); }

  /* the text: a measure of about 75 characters, left-aligned, the way a report reads. Space between blocks is set above
     them, never below: Chrome drops a block's top margin at the head of a page, but counts a bottom margin against the
     page it ends, so the last lines of a paragraph, or the card after it, went over. */
  .chapter > .prose { margin: 5mm 0 0; max-width: none; }
  .chapter > .prose > * { max-width: var(--pcol, none); } /* figures, tables and the deck end with the text's right edge */
  .chapter > .prose > p, .chapter > .prose > ul, .chapter > .prose > ol, .chapter > .prose > blockquote,
  .chapter > .prose > h2, .chapter > .prose > h3, .chapter > .prose > h4 { max-width: var(--pcol, 128mm); }
  .chapter > .prose > p, .chapter > .prose > ul, .chapter > .prose > ol, .chapter > .prose > blockquote { margin: 2.4mm 0 0; font-size: calc(9.8pt * var(--text-scale)); line-height: 1.5; }
  .chapter .prose li { margin: 0.3em 0 0; }
  .chapter .prose blockquote { padding-left: 4mm; border-left: 0.6pt solid var(--ink); }
  .chapter .prose code { font-family: var(--font-code); font-size: 0.86em; }
  /* each section opens on an ink rule, its number in mono above the heading in the display face (print.js numbers them: a CSS
     counter starts again on every page Paged.js lays out). Sections are h2, subsections h3, since 29 Oct 2026 (h3 and h4 before) */
  .chapter > .prose > h2 { break-inside: avoid; margin: 7mm 0 2.2mm; padding: 2.4mm 0 0; border-top: 0.6pt solid var(--ink); font-family: var(--font-display); font-weight: 400; font-size: 16pt; line-height: 1.12; letter-spacing: -0.012em; color: var(--ink); }
  .chapter > .prose > h2::before { content: attr(data-cp-n); display: block; margin: 0 0 1.6mm; font-family: var(--font-code); font-size: 7pt; font-weight: 400; line-height: 1.3; letter-spacing: 0; color: var(--muted); }
  .chapter > .prose > h3 { margin: 4.6mm 0 1.4mm; font-family: var(--font-display); font-weight: 500; font-size: 11.2pt; line-height: 1.25; letter-spacing: 0; color: var(--ink); }
  .chapter > .prose > h4 { margin: 4mm 0 1.2mm; font-family: var(--font-ui); font-weight: 600; font-size: 8pt; color: var(--ink); }

  /* 3. the chokepoint card: in the text after the lead, before section 01, as on screen (print.js cardsToText). On paper it
     is ruled, not tinted: an ink rule over the head, the two ratings large in the display face with the band's meter, then label and
     text in rows. */
  .chapter .plate { max-width: var(--pcol, none); margin: 6mm 0 0; padding: 0; background: none; border: 0; border-bottom: 0.6pt solid var(--ink); box-shadow: none; overflow: hidden; }
  .chapter .prose .plate li { margin-top: 0; }
  .chapter .plate-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4mm; padding: 2mm 0 2mm; border-top: 0.6pt solid var(--ink); border-bottom: 0.4pt solid var(--rule-ink); }
  .chapter .plate-head .label { font-family: var(--font-ui); font-size: 8.4pt; font-weight: 600; line-height: 1.3; color: var(--ink); white-space: nowrap; }
  .chapter .plate-where { font-family: var(--font-code); font-size: 7pt; color: var(--muted); }
  .chapter .plate-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 6mm; padding: 2.6mm 0 3mm; border-bottom: 0.4pt solid var(--rule-ink); }
  .chapter .plate-kpis > div, .chapter .plate-kpis > div + div { padding: 0; border: 0; }
  .chapter .plate-kpis .k, .chapter .plate-status .k, .chapter .plate-rows dt { display: block; margin: 0 0 1mm; padding: 0; font-family: var(--font-code); font-size: 6.8pt; font-weight: 400; line-height: 1.3; letter-spacing: 0; color: var(--muted); }
  .chapter .plate-kpis .v { display: flex; align-items: flex-end; gap: 2mm; margin: 1.2mm 0 1.4mm; font-family: var(--font-display); font-weight: 400; font-size: 21pt; line-height: 0.95; letter-spacing: -0.02em; white-space: nowrap; color: var(--ink); }
  .chapter .plate-kpis .v .meter { --mh: 0.72em; --mw: 1.5mm; --mg: 0.5mm; margin: 0 0.2mm 0.08em 0; }
  .chapter .plate-kpis .v.cost { display: block; margin: 1.2mm 0 1mm; font-size: 13pt; line-height: 1.1; white-space: normal; }
  .chapter .plate-kpis .v.cost.long { font-family: var(--font-body); font-weight: 600; font-size: calc(8.8pt * var(--text-scale)); line-height: 1.3; letter-spacing: 0; }
  .chapter .plate-kpis .v small { font-size: 8pt; }
  .chapter .plate-kpis .sub { display: block; margin: 0; font-family: var(--font-body); font-size: calc(7.4pt * var(--text-scale)); line-height: 1.38; color: var(--ink-2); }
  .chapter .plate-rows { display: block; margin: 0; border: 0; }
  .chapter .plate-rows .row, .chapter .plate-rows .row--why { display: grid; grid-template-columns: 26mm minmax(0, 1fr); column-gap: 4mm; padding: 1.8mm 0; border: 0; border-bottom: 0.3pt solid var(--line-2); }
  .chapter .plate-rows dt { margin: 0.3mm 0 0; }
  .chapter .plate-rows dd { margin: 0; font-family: var(--font-body); font-size: calc(8.2pt * var(--text-scale)); line-height: 1.36; color: var(--ink); max-width: none; }
  .chapter .plate-rows .row--why dd, .chapter .plate-rows .why { font-size: calc(8.2pt * var(--text-scale)); color: var(--ink-2); }
  .chapter .plate-rows ul { margin: 0; padding: 0; list-style: none; }
  .chapter .plate-rows li { display: grid; grid-template-columns: 5.4mm minmax(0, 24mm) minmax(0, 1fr); column-gap: 1.6mm; align-items: baseline; margin: 0 0 0.7mm; padding: 0; text-indent: 0; }
  .chapter .plate-rows .chip, .chapter .plate .chip { width: auto; margin: 0; padding: 0; border: 0; text-align: left; font-family: var(--font-code); font-size: 6.6pt; font-weight: 400; letter-spacing: 0; color: var(--muted); }
  .chapter .plate-rows .who { font-family: var(--font-ui); font-size: 8pt; font-weight: 600; color: var(--ink); }
  .chapter .plate-rows .note { font-family: var(--font-body); font-size: calc(7.8pt * var(--text-scale)); line-height: 1.34; color: var(--ink-2); }
  .chapter .plate-status { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6mm; border: 0; }
  .chapter .plate-status > div, .chapter .plate-status > div + div { padding: 1.8mm 0 2.2mm; border: 0; }
  .chapter .plate-status p { margin: 0; font-family: var(--font-body); font-size: calc(7.9pt * var(--text-scale)); line-height: 1.36; color: var(--ink-2); max-width: none; }
  .chapter .plate sup.cite { vertical-align: super; }
  .cc { font-family: var(--font-code); font-size: 6.8pt; }
  /* A chapter whose card would open a page after a short one is laid out again with its head and card set closer
     (build/pdf.py, print.js .cp-tight): the end of In short and the card then share a page. */
  .chapter.cp-tight .plain, .chapter.cp-tight .inshort, .chapter.cp-tight .plate { margin-top: 4.5mm; }
  .chapter.cp-tight .plain { padding-top: 2mm; }
  .chapter.cp-tight .plain p { line-height: 1.44; }
  .chapter.cp-tight .inshort p { margin-top: 1.4mm; font-size: calc(9.6pt * var(--text-scale)); line-height: 1.42; }
  .chapter.cp-tight .plate-kpis { padding: 2mm 0 2.2mm; }
  .chapter.cp-tight .plate-rows .row, .chapter.cp-tight .plate-rows .row--why { padding: 1.2mm 0; }
  .chapter.cp-tight .plate-rows dd, .chapter.cp-tight .plate-rows .why { font-size: calc(7.8pt * var(--text-scale)); line-height: 1.3; }
  .chapter.cp-tight .plate-rows .note { font-size: calc(7.5pt * var(--text-scale)); }
  .chapter.cp-tight .plate-rows li { margin-bottom: 0.3mm; }
  .chapter.cp-tight .plate-status > div { padding: 1.4mm 0 1.6mm; }
  .chapter.cp-tight .plate-status p { font-size: calc(7.6pt * var(--text-scale)); line-height: 1.3; }
  /* A card that with its notes is taller than a page even set closer would run into the notes (it is kept whole as one
     block, and Chrome never breaks that). Its chapter is laid out once more with the card free to break, between its
     parts only (print.js .cp-split): the figures, each row, the two lines on China and the US. */
  .chapter.cp-split .plate { break-inside: auto; overflow: visible; }
  .chapter.cp-split .plate-head, .chapter.cp-split .plate-kpis, .chapter.cp-split .plate-rows .row, .chapter.cp-split .plate-status { break-inside: avoid; }
  .chapter.cp-split .plate-head { break-after: avoid; }
  .chapter .plate[data-split-to] { border-bottom: 0; } /* the card's closing rule on its last part only */

  /* ---------- figures: the number in mono, the finding in the display face, the title under it, the chart, the source ----------
     On paper the frame is an ink rule above and a hairline below; the source line's buttons are the screen's (chapter.css
     hides them). */
  .chapter .figure { max-width: var(--pcol, none); margin: 5.5mm 0 0; padding: 0; border: 0; border-top: 0.6pt solid var(--ink); border-bottom: 0.3pt solid var(--line-2); background: none; }
  .chapter .fig-head { padding: 2.2mm 0 0; }
  .chapter .fig-k { font-family: var(--font-code); font-size: 7pt; line-height: 1.3; color: var(--ink); }
  .chapter .figure .fig-title { margin: 1.4mm 0 0.8mm; max-width: var(--pcol, 128mm); font-family: var(--font-display); font-weight: 500; font-size: 11.4pt; line-height: 1.24; letter-spacing: -0.005em; color: var(--ink); text-wrap: balance; }
  .chapter .figure .fig-title .unit, .chapter .figure .fig-sub .unit { margin-left: 1.6mm; font-family: var(--font-code); font-weight: 400; font-size: 6.8pt; color: var(--muted); }
  .chapter .fig-sub { margin: 0; max-width: var(--pcol, 128mm); font-family: var(--font-body); font-size: calc(8.2pt * var(--text-scale)); line-height: 1.4; color: var(--ink-2); }
  .chapter .fig-body { padding: 3mm 0 2.6mm; }
  /* bars as HTML rows (figure() in build/build.js), the chart rule: the largest wine with its value bold in wine, the rest the tint; on
     paper the label stands beside its bar, right-aligned (the screen sets it above the bar below 641 px, a width Paged.js's
     pages never report) */
  .chapter .hbars { gap: 0.9mm; margin: 0; font-family: var(--font-ui); font-size: 7.6pt; }
  .chapter .hb { grid-template-columns: min(var(--lw, 14em), 45%) minmax(0, 1fr); align-items: center; gap: 0 3mm; column-gap: 3mm; }
  .chapter .hb-l { text-align: right; line-height: 1.25; color: var(--ink-2); }
  .chapter .hb-r { gap: 2mm; }
  .chapter .hb-r i { height: 2.8mm; background: var(--ctx); border-radius: 0; }
  .chapter .hb-r b { font-family: var(--font-code); font-size: 7pt; font-weight: 400; color: var(--ink-2); }
  .chapter .hb.top .hb-l { color: var(--ink); font-weight: 700; }
  .chapter .hb.top .hb-r i { background: var(--accent-fill); }
  .chapter .hb.top .hb-r b { font-family: var(--font-ui); font-size: 7.8pt; font-weight: 700; color: var(--accent-ink); }
  .chapter .hb.rest .hb-r i { background: repeating-linear-gradient(135deg, var(--rule-ink) 0 0.5pt, transparent 0.5pt 1.4mm); box-shadow: inset 0 0 0 0.5pt var(--rule-ink); }
  /* the new forms of 28 Oct 2026 (revisions 4 and 5, figure() in build/build.js), with the chart rule as on screen: wine on the
     value the title names, the largest by default, the largest change on a change chart; the rest the tint.
     A range: solid to its low end (the mark's wine, or the tint where the span alone is named), hatched to its high end inside
     a wine outline, a reference value an ink tick named beside it */
  .chapter .hb.range .hb-r i, .chapter .col.range > i { --fill: var(--ctx); --edge: var(--rule-ink); box-shadow: inset 0 0 0 0.8pt var(--edge); border-radius: 0; }
  .chapter .hb.range.top .hb-r i, .chapter .col.range.top > i { --fill: var(--accent-fill); --edge: var(--accent-fill); }
  .chapter .hb.range.top.span .hb-r i, .chapter .col.range.top.span > i { --fill: var(--ctx); }
  .chapter .hb.range .hb-r i { background: linear-gradient(90deg, var(--fill) 0 var(--lo), transparent var(--lo)), repeating-linear-gradient(135deg, var(--edge) 0 0.6pt, transparent 0.6pt 1.5mm); }
  .chapter .hb-ref { top: -0.8mm; bottom: -0.8mm; width: 0.9pt; margin-left: -0.45pt; }
  .chapter .hb-ref span { top: calc(100% + 0.6mm); font-size: 6.8pt; }
  .chapter .hb:has(.hb-ref) { margin-bottom: 3.6mm; }
  /* columns: years left to right on an ink baseline, at most 24 mm a column, 32 mm at the tallest */
  .chapter .cols { --ch: 32mm; --cw: 24mm; --cg: 3mm; margin: 0; }
  .chapter .cols-plot { padding-top: 0.6mm; border-bottom: 0.6pt solid var(--ink); }
  .chapter .col > b { margin: 0 -1.5mm 1mm; font-family: var(--font-code); font-size: 7pt; font-weight: 400; color: var(--ink-2); }
  .chapter .col > i { border-radius: 0; }
  .chapter .col.top > b { font-family: var(--font-ui); font-size: 7.8pt; font-weight: 700; color: var(--accent-ink); }
  .chapter .col.top > i { background: var(--accent-fill); }
  .chapter .col.range > i { background: linear-gradient(0deg, var(--fill) 0 var(--lo), transparent var(--lo)), repeating-linear-gradient(135deg, var(--edge) 0 0.6pt, transparent 0.6pt 1.5mm); }
  .chapter .col.rest > i { background: repeating-linear-gradient(135deg, var(--rule-ink) 0 0.5pt, transparent 0.5pt 1.4mm); box-shadow: inset 0 0 0 0.5pt var(--rule-ink); }
  .chapter .col-ref { left: -1mm; right: -1mm; height: 0.9pt; margin-bottom: -0.45pt; }
  .chapter .col-ref span { left: calc(100% + 1.2mm); font-size: 6.8pt; }
  .chapter .cols-lab { padding-top: 1.2mm; }
  .chapter .cols-lab span { font-size: 7.2pt; line-height: 1.25; }
  .chapter .cols-lab span.top { font-weight: 700; }
  /* change rows: the name and its years at the left, the axis with hairline ticks, an open circle at the earlier value and an
     arrow to the later one, the change at the right */
  .chapter .cg { font-size: 7.6pt; } /* the em of its --lw and --vw, as the bars' */
  .chapter .cg-row { grid-template-columns: min(var(--lw, 12em), 34%) minmax(0, 1fr) var(--vw, 7em); column-gap: 3mm; }
  .chapter .cg-l { padding: 1mm 0; }
  .chapter .cg-l b { font-size: 7.8pt; }
  .chapter .cg-l small { margin-top: 0.3mm; font-size: 6.8pt; }
  .chapter .cg-t { min-height: 8.4mm; }
  .chapter .cg-axis .cg-t { min-height: 4mm; }
  .chapter .cg-axis .cg-t span, .chapter .cg-end { font-size: 6.6pt; }
  .chapter .cg-axis .cg-t span { bottom: 1mm; }
  .chapter .cg-end { top: 0.4mm; }
  .chapter .cg-tick { width: 0.3pt; margin-left: -0.15pt; background: var(--line-2); }
  .chapter .cg-from { width: 2mm; height: 2mm; margin: -1mm 0 0 -1mm; border-width: 0.8pt; background: #fff; }
  .chapter .cg-arrow { --hl: 1.6mm; --hw: 0.9mm; height: 0.8pt; margin-top: -0.4pt; }
  .chapter .cg-row.top .cg-arrow { --c: var(--accent-fill); --hl: 2.2mm; --hw: 1.2mm; height: 1.3pt; margin-top: -0.65pt; }
  .chapter .cg-row.top .cg-from { border-color: var(--accent-fill); }
  .chapter .cg-v { font-family: var(--font-code); font-size: 7pt; }
  .chapter .cg-row.top .cg-v { font-family: var(--font-ui); font-size: 7.8pt; font-weight: 700; color: var(--accent-ink); }
  .chapter .figure .cols, .chapter .figure .cg { break-inside: avoid; }
  /* parts inside a whole (15.3): the screen's drawing in the figures' small type, hairlines and the wine of paper */
  .chapter .pw { --rh: 4.4mm; --g: 2mm; --lx: 3.2mm; --bh: 6mm; font-size: 7.6pt; line-height: 1.3; break-inside: avoid; }
  .chapter .pw-total { margin-top: 1mm; }
  .chapter .pw-brk { height: 1mm; margin-top: 0.8mm; border-width: 0.5pt; border-color: var(--ink-2); }
  .chapter .pw-bar { margin-top: 1mm; }
  .chapter .pw-bar::after { box-shadow: inset 0 0 0 0.8pt var(--rule-ink); }
  .chapter .pw-range { border-left-width: 0.8pt; background: repeating-linear-gradient(135deg, var(--rule-ink) 0 0.6pt, transparent 0.6pt 1.5mm); }
  .chapter .pw-part { top: 0.8pt; bottom: 0.8pt; }
  .chapter .pw-part[data-k="0"] { left: 0.8pt; width: calc(var(--w) - 1.4pt); }
  .chapter .pw-part.top { background: var(--accent-fill); }
  .chapter .pw-lead { top: calc(0.6mm - var(--g) - var(--i) * var(--rh)); height: calc(var(--g) - 0.6mm + var(--i) * var(--rh) + var(--rh) / 2); border-width: 0 0 0.5pt 0.5pt; }
  .chapter .pw-row.top .pw-lead { border-color: var(--accent-fill); }
  .chapter .pw-v { font-family: var(--font-code); font-size: 7pt; }
  .chapter .pw-row.top .pw-v { font-family: var(--font-ui); font-size: 7.8pt; }
  .chapter .figure .tl li { font-family: var(--font-body); font-size: calc(8.4pt * var(--text-scale)); line-height: 1.36; }
  .chapter .figure .tl li .d { font-family: var(--font-code); font-size: 6.8pt; }
  /* an animation on paper: its last frame, then its steps in the figures' small type (styles.css prints the list) */
  .chapter .figure--anim .anim-stage { border: 0; }
  .chapter .figure--anim .anim-print { display: block; width: 100%; max-width: 134mm; height: auto; }
  .chapter .figure--anim .anim-transcript { margin: 2.4mm 0 0; padding-left: 5mm; font-family: var(--font-body); font-size: calc(8.4pt * var(--text-scale)); line-height: 1.38; }
  .chapter .figure--anim .anim-transcript li { margin: 0 0 0.9mm; }
  /* an explainer's drawing stays whole, but its numbered steps may run on to the next page: in the larger type a drawing and
     five steps could be taller than a page (chapter 3, 27 Oct) */
  .chapter .figure.figure--anim { break-inside: auto; }
  .chapter .figure--anim .anim-stage { break-inside: avoid; break-after: avoid; }
  .chapter .figure--anim .anim-transcript li { break-inside: avoid; }
  /* the source line: "Source", the source's name and its note number, any note */
  .chapter .fig-strip { display: block; margin: 0; padding: 1.6mm 0 1.8mm; background: none; border-top: 0.3pt solid var(--line-2); font-family: var(--font-code); font-size: 6.8pt; line-height: 1.4; color: var(--ink-2); }
  .chapter .fig-strip .fs-src, .chapter .fig-strip .fs-note { display: block; }
  .chapter .fig-strip .fs-note { margin-top: 0.6mm; font-family: var(--font-body); font-size: calc(7.6pt * var(--text-scale)); line-height: 1.38; max-width: var(--pcol, 128mm); color: var(--ink-2); }
  .chapter .fig-strip .fs-k, .chapter .fig-strip .fs-note .fs-k { margin-right: 1.4mm; font-family: var(--font-code); font-size: 6.8pt; color: var(--muted); }
  .chapter .fig-strip .fs-src a { color: var(--ink); text-decoration: none; }
  .chapter .fig-strip sup.cite { font-size: 6.8pt; vertical-align: baseline; }
  .chapter .fig-strip sup.cite a { font-family: var(--font-code); color: var(--accent-ink); }
  .chapter .fig-strip .ch-cite-box { display: none !important; }
  /* tables in the text: they may fill the column, never spill off it */
  .table-wrap { overflow: visible; margin: 4mm 0 0; }
  .prose > .cp-after { margin-top: 4.5mm; } /* the block after a figure or table (print.js marks it) */
  .prose table { font-family: var(--font-ui); font-size: 8pt; line-height: 1.32; }
  .prose th, .prose td { padding: 1.3mm 2.4mm; }
  .prose th { font-family: var(--font-ui); font-size: 7pt; font-weight: 600; letter-spacing: 0; text-transform: none; }
  .prose td.num, .prose td[data-num] { font-family: var(--font-code); }
  figure svg, .figure svg, #exposure-viz svg { max-width: min(100%, 134mm); height: auto; } /* the first page's column, also where the text runs wider */

  /* ---------- the questions and the takeaways ---------- */
  .chapter > .prose > .review { max-width: var(--pcol, 128mm); margin: 7mm 0 0; padding: 0; border-top: 0; } /* the deck's head is screen-only, so its rule would stand alone over the list's own */
  .review .fc-end { margin-top: 0; }
  .review .rv-keep { margin: 0; padding-top: 2.6mm; }
  .review .rv-keep h4.label, .review .cp-quiz h4.label, .chapter .review .rv-keep h3.label, .chapter .review .cp-quiz h3.label { margin: 0 0 1mm; font-family: var(--font-ui); font-weight: 600; font-size: 8pt; line-height: 1.35; letter-spacing: 0; text-transform: none; color: var(--ink); }
  .review .rv-keep li { margin-top: 1.6mm; padding: 0 0 0 6mm; font-family: var(--font-body); font-size: calc(9.6pt * var(--text-scale)); line-height: 1.45; }
  .review .rv-keep li::before { left: 0.6mm; top: 0.7em; width: 2.8mm; border-top: 0.8pt solid var(--ink); }
  /* the deck's questions, printed above the takeaways (print.js quiz): each with the section that answers it, so a
     reader can answer from memory and then check against the list below. Its rule is ink, as every section's. */
  .review .cp-quiz { margin: 0; padding-top: 2.6mm; border-top: 0.6pt solid var(--ink); }
  .review .cp-quiz ol { margin: 0; padding-left: 6mm; }
  .review .cp-quiz li { margin: 1.4mm 0 0; padding-left: 1.2mm; font-family: var(--font-body); font-size: calc(9.6pt * var(--text-scale)); line-height: 1.45; }
  .review .cp-quiz li::marker { font-family: var(--font-code); font-size: 7pt; color: var(--muted); }
  .review .cp-quiz .cp-quiz-re { margin-left: 1.2mm; font-family: var(--font-code); font-size: 6.8pt; color: var(--muted); white-space: nowrap; }
  .review .rv-keep.cp-quizzed { margin-top: 4mm; border-top: 0.3pt solid var(--line-2); }
  /* each question and each takeaway whole: Paged.js lost the first line of a takeaway it split across two pages */
  .review .rv-keep li, .review .cp-quiz li { break-inside: avoid; }
  .review .rv-keep[data-split-from], .review .cp-quiz[data-split-from] { border-top: 0; margin-top: 0; padding-top: 0; }

  /* ---------- the book's cover, The Chain's title, and the contents ---------- */
  .print-only { display: block !important; }
  /* A4 portrait, the wafer cover (qa/cover-wafer.md). The 300 mm wafer in plan view, drawn in ink by build/cover-art.py,
     sits centred as one object on the white sheet: 164mm across, 23mm in from either side, 14mm from the head, notch at
     the foot. Beneath it the type: the wordmark (the favicon's tile and the name, as on every page of the site), the
     title in the display face, the subtitle in the text face, then the colophon at the foot under one hairline. No running head:
     @page :first empties the margin boxes. The cover fills its box to within 2 mm: a larger title or tile runs the
     edition line onto page 2. */
  .print-title { break-after: page; min-height: 258mm; display: flex !important; flex-direction: column; padding-bottom: 0; line-height: 1.42; }
  .print-title .pt-art { align-self: flex-start; display: block; width: 164mm; height: auto; max-width: none; margin: -3mm 0 0 3mm; background: none; break-inside: avoid; break-after: avoid; }
  .print-title .pt-type { margin: 0; }
  .print-title .pt-k { margin: 16mm 0 7mm; font-family: var(--font-code); font-size: 8pt; color: var(--muted); }
  .print-title .pt-k.pt-wm { display: flex; align-items: center; gap: 3mm; color: var(--ink); margin: 13mm 0 6mm; }
  .print-title .pt-wm .wm-tile { display: block; width: 7mm; height: 7mm; flex: none; }
  .print-title .pt-wm .wm-tile rect { fill: #7a1f2b; }
  .print-title .pt-wm .wm-tile path { fill: #fff; }
  .print-title .pt-wm .wm-name { font-family: "Fraunces Mark", var(--font-display); font-weight: 500; font-size: 14pt; letter-spacing: -0.005em; line-height: 1; }
  .print-title .pt-h { margin: 0 0 6mm; font-family: var(--font-display); font-weight: 400; font-size: 64pt; line-height: 0.92; letter-spacing: -0.025em; color: var(--ink); }
  .print-title .pt-sub { margin: 0; max-width: 150mm; font-family: var(--font-body); font-weight: 400; font-size: calc(14pt * var(--text-scale)); line-height: 1.32; color: var(--ink-2); }
  .print-title .pt-foot { margin-top: auto; padding-top: 4mm; }
  .print-title .pt-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8mm; border-top: 0.5pt solid var(--ink); padding-top: 3.5mm; }
  .print-title .pt-by { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 11pt; }
  .print-title .pt-meta { margin: 2.6mm 0 0; font-family: var(--font-code); font-size: 7.4pt; color: var(--muted); }

  /* The Chain's title and standfirst, then the contents as a report's contents: one line a chapter, with its page. On screen
     the head sets the title beside the standfirst and the contents draw the chain as a picture (src/modules/chapter.css, design
     round six); on paper the title stands over the standfirst, the picture and the downloads go, and the list is the
     contents, under the group heads only the book prints (.print-only, build/build.js CONTENTS). How to read a chapter went
     on 28 Oct 2026 (owner), so the title, the standfirst and the contents share the page after the cover. */
  .view[data-view="stack"] > .howto, .howto .howto-r { display: block; }
  .howto { margin: 0 0 4mm; padding: 3.4mm 0 1mm; border-top: 0.6pt solid var(--ink); break-inside: avoid; }
  .howto h1.howto-title, .howto h2.howto-title { margin: 0 0 2mm; font-family: var(--font-display); font-weight: 400; font-size: 24pt; line-height: 1.04; letter-spacing: -0.02em; }
  .howto .howto-lede { max-width: 140mm; margin-bottom: 2.6mm; font-family: var(--font-body); font-size: calc(9.8pt * var(--text-scale)); line-height: 1.42; color: var(--ink-2); }
  .contents .ln { display: none !important; }
  .contents { break-after: page; padding: 2.6mm 0 0; margin-top: 2mm; border-top: 0.6pt solid var(--ink); }
  /* the two group heads ("The fourteen stages", "Across the chain") and the note under the second: the screen's 40 px
     above the second ran the contents' last line onto a page of its own */
  .contents .contents-k { margin: 3.5mm 0 2mm; padding-top: 0; border-top: 0; font-family: var(--font-code); font-size: 7.2pt; font-weight: 400; color: var(--muted); }
  .contents .contents-note { margin: 0 0 2mm; font-family: var(--font-body); font-size: calc(8.8pt * var(--text-scale)); line-height: 1.4; color: var(--ink-2); }
  .contents h2 { margin-bottom: 3mm; font-family: var(--font-display); font-weight: 400; font-size: 16pt; letter-spacing: -0.012em; }
  /* the first group head with the key at its right: the band's mark beside each word, as beside each number below */
  .contents .contents-kr.print-only { display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; margin: 26px 0 0; }
  .contents .ct-key { display: flex; gap: 16px; margin: 0; font-family: var(--font-ui); font-size: 13px; line-height: 16px; color: var(--ink-2); }
  .contents .ct-key span { display: inline-flex; align-items: flex-end; gap: 6px; }
  .contents .ct-bmk { width: 5px; height: 12px; margin-bottom: 2px; }
  .contents .ct-bmk.h { height: 6px; }
  .contents-grid { display: block; }
  .contents-grid .item { break-inside: avoid; display: flex; align-items: baseline; gap: 0; border-top: 0; border-bottom: 0.3pt solid var(--line-2); padding: 0.6mm 0; } /* close enough that the sixteen lines share the page with the title and standfirst */
  /* the number in a column of its own, so every title starts on one edge; the page number set in the text's figures, on
     the title's baseline */
  .contents-grid .n { flex: none; display: flex; align-items: flex-end; gap: 7px; width: 9mm; padding: 0; font-family: var(--font-code); font-size: 7.2pt; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .contents-grid .t { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 6mm; margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 9.6pt; line-height: 1.4; letter-spacing: 0; }
  .contents-grid .item ul, .contents-grid .ol { display: none; } /* the section list and the one-liners are the site's; the page wants the spine */
  .contents-grid .t::after { content: target-counter(attr(href url), page); font-family: var(--font-code); font-weight: 400; font-size: 7.6pt; color: var(--ink-2); }
  .contents .item { break-inside: avoid; }

  /* ---------- one chapter alone (build/pdf.py --chapter) ----------
     print.js puts a compact title block where the cover and contents were: the wordmark and the edition, then the chapter's
     own address. The chapter starts beneath it, and the colophon follows the last page of text (the two breaks are turned
     off under .site-footer, below). */
  .pt-chapter { margin: 0 0 7mm; padding: 0 0 3.4mm; border-bottom: 0.4pt solid var(--line-2); break-inside: avoid; break-after: avoid; }
  .pt-chapter p { margin: 0; }
  .pt-chapter .ptc-k { display: flex; justify-content: space-between; align-items: center; gap: 6mm; font-family: var(--font-code); font-size: 7.4pt; color: var(--muted); }
  .pt-chapter .ptc-ed { color: var(--ink-2); }
  .pt-chapter .ptc-wm { display: inline-flex; align-items: center; gap: 2.4mm; color: var(--ink); }
  .pt-chapter .ptc-wm .wm-tile { display: block; width: 5.4mm; height: 5.4mm; flex: none; }
  .pt-chapter .ptc-wm .wm-tile rect { fill: #7a1f2b; }
  .pt-chapter .ptc-wm .wm-tile path { fill: #fff; }
  .pt-chapter .ptc-wm .wm-name { font-family: "Fraunces Mark", var(--font-display); font-weight: 500; font-size: 11pt; line-height: 1; }
  .pt-chapter .ptc-url { margin-top: 1.6mm; font-family: var(--font-code); font-size: 7.4pt; color: var(--muted); }
  .pt-chapter .ptc-url a { color: var(--accent-ink); }

  /* ---------- the colophon ----------
     the citation for this edition, written by print.js in place of the screen's, set as type: the citation in the text
     face with the work in italic, the BibTeX in mono, each on a hairline at its left. The edition is in the foot of every
     page, so the screen's "Updated" line is left out. */
  .site-footer { break-before: page; margin-left: 36mm; padding: 0; border-top: 0.6pt solid var(--ink); font-family: var(--font-ui); font-size: 8.4pt; line-height: 1.5; color: var(--ink-2); }
  .site-footer[data-split-from] { border-top: 0; }
  .site-footer .ft-mark { display: none; }
  .site-footer .credits { margin: 2.6mm 0 0; font-size: 9pt; color: var(--ink); }
  .site-footer .credits b { font-weight: 600; }
  .site-footer .sources-key { margin-top: 2mm; font-size: 7.4pt; line-height: 1.45; color: var(--ink-2); }
  .site-footer .updated { display: none; }
  .site-footer .tier { width: auto; height: auto; line-height: 1.25; padding: 0 0.8mm; margin: 0 1.2mm 0 0; font-family: var(--font-ui); font-size: 6.2pt; vertical-align: 0.4pt; }
  .site-footer .sources-key .tier { border: 0 !important; width: auto; font-weight: 600; padding: 0; margin: 0 1mm 0 0; }
  .site-footer .cite--edition summary { margin: 6mm 0 2mm; font-family: var(--font-ui); font-weight: 600; font-size: 8pt; letter-spacing: 0; text-transform: none; color: var(--ink); }
  .site-footer .cite--edition pre, .site-footer .cite--edition .cp-cite-text { margin: 2.4mm 0 0; padding: 0.4mm 0 0.4mm 3.5mm; background: none; border: 0; border-left: 0.6pt solid var(--line-2); }
  .site-footer .cite--edition .cp-cite-text { max-width: var(--pcol, 128mm); font-family: var(--font-body); font-size: calc(9pt * var(--text-scale)); line-height: 1.45; color: var(--ink); border-left-color: var(--ink); overflow-wrap: anywhere; }
  .site-footer .cite--edition .cp-cite-text a { color: var(--accent-ink); }
  .site-footer .cite--edition pre { font-family: var(--font-code); font-size: 6.8pt; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
  /* the citation and its BibTeX on one page, under their heading; the credits and the tier key may close the page before */
  .site-footer .cite--edition { break-inside: avoid; }
  .site-footer .credits, .site-footer .sources-key { break-inside: avoid; }
  /* one chapter alone starts under its title block and the colophon follows its text. Paged.js applies breaks by
     selector, in the order the rules come, inside the body: so these come after the rules they undo, and key on the
     title block rather than on a class of <html>. */
  .pt-chapter + .chapter { break-before: auto; }
  .pt-chapter ~ .site-footer { break-before: auto; margin-top: 10mm; }

  /* Collapsed source lists and method notes open on paper. */
  details { display: block; }
  details > summary { display: block; list-style: none; }
  details:not([open]) > *:not(summary) { display: block !important; }
  details::details-content { content-visibility: visible !important; display: block !important; block-size: auto !important; }
  .mt-note { break-inside: avoid; }
  .chapter-sources li { break-inside: avoid; }
  .chapter-sources ol, .mt-cites { font-size: calc(7.4pt * var(--text-scale)); }
  .chapter-sources li, .mt-cites li { overflow-wrap: anywhere; }
  /* the browser's own print (and the PDF's fallback) gives each source its full address under its title; the marks in
     the text stay numbers. src/app.js opens the folded lists before the browser prints. */
  .chapter-sources li > a[href]::after { content: attr(href); display: block; font-family: var(--font-code); font-size: 6.4pt; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
  .chapter-sources summary::before, .chapter-sources[open] summary::before, .mt-note > summary::before { content: ""; }
  .chapter-sources summary::after, .chapter-sources[open] summary::after { content: none; }
  .chapter .chapter-sources summary { font-size: 16pt; padding: 2.4mm 0 2mm; }
  /* with real footnotes, the list at the end of the chapter would say everything twice */
  .cp-print .chapter-sources { display: none !important; }

  /* Whole on one page: the card, each chart or figure with its title and source line, and the short boxes elsewhere on
     the site. In plain terms, In short, paragraphs and lists run on across a page like any text, two lines at least
     either side. */
  .gl-term { border-bottom: 0 !important; text-decoration: none !important; background: none !important; color: inherit !important; }
  /* print.js makes each glossary term a span (a button never breaks across a line), the card's two ratings among them */
  .gl-term { display: inline; white-space: normal; line-height: inherit; letter-spacing: inherit; vertical-align: baseline; font: inherit; }
  .view-head { break-after: avoid; padding-top: 0; }
  .plate, .figure, .brief-card, .gl-entry, .mt-note, .mt-log li, .ch-spec .cp-still { break-inside: avoid; }
  /* a box that runs on to the next page has its top rule on its first part only */
  .plain[data-split-from], .cp-sources[data-split-from] { border-top: 0; padding-top: 0; margin-top: 0; }
  p, li, blockquote, dd { orphans: 2; widows: 2; }
  /* the screen's "pretty" wrap moves a paragraph's line ends once Paged.js has cut it at a page's foot, and the lines it
     measured for the first page then overran it and were lost: on paper every paragraph wraps the plain way */
  p, li, blockquote, dd, .ch-lede, .fig-sub { text-wrap: wrap !important; }
  h1, h2, h3, h4, h5, .ch-title, .ch-lede, .ch-kick, .label, .fig-head { break-after: avoid; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }

  /* ---------- footnotes ----------
     print.js writes one .fn beside every citation from its data-* fields; Paged.js floats it to
     the foot of the page the superscript landed on. The superscript in the text is the call, so
     Paged.js's own call and marker are turned off and the note carries its own number. */
  .fn { float: footnote; }
  .fn::footnote-call { content: none; }
  .fn::footnote-marker { content: ""; }
  /* One note a line where it fits: the number hung in the margin of the notes, the title in ink, then publisher, date
     and page, then the short address (print.js shortUrl; the chapter's source list gives it in full). */
  .fn[data-note] { font-family: var(--font-body); font-size: calc(7.1pt * var(--text-scale)); line-height: 1.32; color: var(--ink-2); }
  .pagedjs_footnote_inner_content .fn { display: block; list-style: none; position: relative; padding-left: 5.5mm; margin: 0 0 0.7mm; }
  .pagedjs_footnote_inner_content .fn:last-child { margin-bottom: 0; }
  .fn-n { position: absolute; left: 0; top: 0.2pt; width: 4.4mm; text-align: right; font-family: var(--font-code); font-weight: 400; font-size: 6.4pt; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .fn-t { color: var(--ink); }
  .fn-m { color: var(--ink-2); }
  .fn-u { font-family: var(--font-code); font-size: 6pt; color: var(--muted); white-space: nowrap; }

  /* ---------- the chapter's source list, after its text ----------
     print.js (sourceList) builds it from the screen's list: numbered as the notes are, each source with its tier, its
     title, its publisher and date, and its full address. It opens as a section does. Its heading is an h2 since 29 Oct 2026
     (an h3 before), so this rule names the chapter, to outweigh the screen's .chapter .prose h2 as it did .prose h3 */
  .cp-sources { max-width: none; margin: 9mm 0 0; padding-top: 2.4mm; border-top: 0.6pt solid var(--ink); }
  .chapter .cp-sources .cp-sources-h { margin: 0 0 2.6mm; font-family: var(--font-display); font-weight: 400; font-size: 16pt; line-height: 1.12; letter-spacing: -0.012em; text-transform: none; color: var(--ink); break-after: avoid; }
  .cp-sources ol { margin: 0; padding-left: 6.5mm; font-family: var(--font-body); font-size: calc(7.4pt * var(--text-scale)); line-height: 1.34; color: var(--ink-2); }
  .cp-sources li { padding-left: 3.8mm; margin: 1.1mm 0 0; break-inside: avoid; }
  .cp-sources li::marker { font-family: var(--font-code); font-size: 6.4pt; color: var(--ink-2); }
  .cp-sources li a { color: var(--ink); }
  /* the tier as a quiet letter in a hanging column, so the title, its second line and the address share one edge (a
     negative margin keeps it on the baseline; placed absolutely, it ran into the list's number) */
  .cp-sources .tier { display: inline-block; border: 0 !important; background: none !important; width: 3.8mm; height: auto; padding: 0;
    margin: 0 0 0 -3.8mm; text-align: left; font-family: var(--font-ui); font-weight: 600; font-size: 6pt; line-height: 1; vertical-align: baseline; color: var(--muted) !important; }
  .cp-sources .src-meta { display: inline; font-family: var(--font-body); font-size: calc(7.4pt * var(--text-scale)); color: var(--ink-2); }
  .cp-sources .src-meta::before { content: ". "; }
  .cp-sources .src-url { display: block; font-family: var(--font-code); font-size: 6.1pt; line-height: 1.36; color: var(--muted); overflow-wrap: anywhere; }
  /* a heading an earlier layout left at the foot of a page opens the next one (print.js .cp-break, build/pdf.py) */
  .cp-break { break-before: page; }
  /* a chapter that lost lines at a page's foot to Paged.js is laid out again with its lines a little closer (print.js
     .cp-nudge, build/pdf.py), so its page ends fall elsewhere */
  .chapter.cp-nudge .plain p, .chapter.cp-nudge .inshort p, .chapter.cp-nudge > .prose > p, .chapter.cp-nudge > .prose > ul,
  .chapter.cp-nudge > .prose > ol { line-height: 1.45; }
  /* and when that still loses lines, a little looser (.cp-loose), so the page ends fall the other way */
  .chapter.cp-loose .plain p, .chapter.cp-loose .inshort p, .chapter.cp-loose > .prose > p, .chapter.cp-loose > .prose > ul,
  .chapter.cp-loose > .prose > ol { line-height: 1.55; }
  /* a chapter whose last few sources ran onto a page of their own is laid out again with its list set closer
     (print.js finish() names it, build/pdf.py lays it out, prepare() marks it .cp-sources-tight) */
  .cp-sources-tight .cp-sources li { margin-top: 0.55mm; }
  .cp-sources-tight .cp-sources ol { line-height: 1.24; }
  .cp-sources-tight .cp-sources .src-url { line-height: 1.25; }
  /* a note that Paged.js could not move stays in the text; it must not print as loose words */
  .pagedjs_page_content .fn { display: none !important; }

  /* the hairline above the notes is short, the width of a thumb, like the report this follows */
  .pagedjs_footnote_content { border-top: 0 !important; position: relative; }
  .pagedjs_footnote_content::before { content: ""; position: absolute; top: 0; left: 0; width: 42mm; border-top: 0.4pt solid #c4c3bd; }

  /* ---------- running heads ----------
     the h2 carries "Chapter 4: " for screen readers, which makes it the running head already */
  .ch-title { string-set: chapter content(text); }
  /* and the right head names the section. Paged.js keeps one selector list per name, so every source of the name is in
     this one rule; the deck's hidden "Flashcards" heading is not a child of the text, so it never names a page. Each source's
     words are its data-cp-run (print.js runningHeads): a section's short heading, as the rail lists it, so a chapter's own
     words for a heading (data/section-headings.json, 29 Oct 2026) never lengthen the head, and any other source's own text.
     The sections are h2 and the deck's two labels h3 since 29 Oct 2026 (h3 and h4 before) */
  .prose > h2, .plate-head .label, .cp-sources .cp-sources-h, .review .cp-quiz h3.label, .review .rv-keep h3.label { string-set: section attr(data-cp-run); }
  /* no running head over a chapter's opening page or the colophon (print.js finish() marks those pages) */
  .cp-opener .pagedjs_margin-top-left, .cp-opener .pagedjs_margin-top-right,
  .cp-colophon .pagedjs_margin-top-left, .cp-colophon .pagedjs_margin-top-right { visibility: hidden; }
  .pagedjs_margin-top-left > .pagedjs_margin-content::after,
  .pagedjs_margin-top-right > .pagedjs_margin-content::after,
  .pagedjs_margin-bottom-left > .pagedjs_margin-content::after,
  .pagedjs_margin-bottom-right > .pagedjs_margin-content::after {
    font-family: var(--font-ui); font-weight: 500; font-size: 7.5pt; color: var(--ink-2); white-space: nowrap;
  }
  .pagedjs_margin-bottom-right > .pagedjs_margin-content::after { font-family: var(--font-code); font-weight: 400; font-size: 7pt; }
  .pagedjs_margin-top-left > .pagedjs_margin-content::after,
  .pagedjs_margin-top-right > .pagedjs_margin-content::after { padding-top: 8mm; }
  .pagedjs_margin-bottom-left > .pagedjs_margin-content::after,
  .pagedjs_margin-bottom-right > .pagedjs_margin-content::after { padding-bottom: 4mm; }
  .pagedjs_page { background: #fff; }
}


/* module: summary-a.css */
/* ---------------------------------------------------------------
   summary-a: the map-first summary at #/summary-a
   Ground, ink and garnet come from the site tokens; nothing is hard-coded.
   --------------------------------------------------------------- */

.view[data-view="summary-a"] { width: min(100%, 1320px); }
.sa { padding-bottom: 80px; }
.sa .view-head { padding-bottom: 10px; }
.sa .view-head .dek { max-width: 46em; }

.sa-h { font-family: var(--font-display); font-variation-settings: var(--opsz-title); font-size: var(--t-text); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink); }
.sa-sub { font-size: var(--t-small); line-height: 1.5; color: var(--muted); max-width: 92ch; margin: 6px 0 0; }
.sa-map-head { margin: 0 0 14px; }

.sa-mapwrap { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.sa-strip, .sa-numbers { margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line); }

/* ---------- map + panel ---------- */
.sa-grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 14px 22px; align-items: start; }
.sa-grid > .sa-map { grid-column: 1; grid-row: 1; }
.sa-grid > .sa-panels { grid-column: 2; grid-row: 1 / span 3; }
.sa-grid > .sa-chips { grid-column: 1; grid-row: 2; }
.sa-grid > .sa-legend { grid-column: 1; grid-row: 3; }
.sa-map { position: relative; background: none; border: 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); border-radius: 0; overflow: visible; }
.sa-svg { display: block; width: 100%; height: auto; border-radius: 0; }
.sa-ocean { fill: var(--bg); }
.sa-land { fill: var(--bg-3); stroke: var(--line-2); stroke-width: 0.9; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sa-sea { fill: var(--bg); stroke: var(--line-2); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.sa-grat { stroke: var(--line-2); stroke-width: 0.5; opacity: 0.5; vector-effect: non-scaling-stroke; }
.sa-eq { opacity: 0.65; }
.sa-leader { stroke: var(--muted); stroke-width: 1; opacity: 0.6; vector-effect: non-scaling-stroke; }
.sa-map[data-cc] .sa-leader { transition: opacity 0.2s var(--ease); }

.sa-overlay { position: absolute; inset: 0; }

/* town pins */
.sa-town {
  --d: var(--d0);
  position: absolute; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%; background: var(--accent); opacity: 0.85; cursor: pointer;
  box-shadow: 0 0 0 1px var(--bg);
}
.sa-town--sub { background: transparent; border: 1.5px solid var(--ink-2); opacity: 0.75; box-shadow: none; }
.sa-town.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-soft); }

/* country markers */
.sa-marker {
  --d: var(--d0);
  position: absolute; width: var(--d); height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%; padding: 0; line-height: 0;
}
.sa-marker-dot {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  border-radius: 50%; background: var(--bg); border: 1.5px solid var(--line-2);
  transition: transform 0.18s var(--ease), background 0.18s var(--ease);
}
/* a heavier ring where a stage scored 5 of 5 names the country */
.sa-marker[data-hard="1"] .sa-marker-dot { border: 2.5px solid var(--ink-2); }
.sa-marker-cc { font-family: var(--font-mono); font-size: var(--fs-cap-s); font-weight: 600; letter-spacing: 0.02em; line-height: 1; color: var(--muted); }
.sa-marker[data-hard="1"] .sa-marker-cc { color: var(--ink); }
.sa-marker:hover .sa-marker-dot { transform: scale(1.12); }
.sa-marker[aria-pressed="true"] .sa-marker-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.sa-marker[aria-pressed="true"] .sa-marker-cc { color: var(--bg); }
.sa-marker:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* the selected country's own pins and leader line lift out of the base map */
.sa-map[data-cc="US"] .sa-leader[data-cc="US"], .sa-map[data-cc="NL"] .sa-leader[data-cc="NL"],
.sa-map[data-cc="DE"] .sa-leader[data-cc="DE"], .sa-map[data-cc="JP"] .sa-leader[data-cc="JP"],
.sa-map[data-cc="TW"] .sa-leader[data-cc="TW"], .sa-map[data-cc="KR"] .sa-leader[data-cc="KR"],
.sa-map[data-cc="CN"] .sa-leader[data-cc="CN"], .sa-map[data-cc="MY"] .sa-leader[data-cc="MY"],
.sa-map[data-cc="SG"] .sa-leader[data-cc="SG"] { opacity: 1; stroke: var(--accent); stroke-width: 1.4; }

/* ---------- the country panel ---------- */
.sa-panels { position: relative; }
.sa-panel {
  background: none; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line-2); border-radius: 0;
  padding: 18px 18px 16px; max-height: calc(100vh - var(--masthead) - 96px); overflow: auto;
}
.sa-panel-head { display: flex; align-items: baseline; gap: 9px; }
.sa-panel-cc { font-family: var(--font-mono); font-size: var(--fs-cap); font-weight: 500; letter-spacing: var(--tr-cap); color: var(--accent); border: 1px solid var(--line-2); border-radius: 0; padding: 1px 5px; }
.sa-panel-head h4 { font-family: var(--font-display); font-variation-settings: var(--opsz-title); font-size: var(--t-section); font-weight: 400; line-height: 1.05; text-transform: none; letter-spacing: 0; }
.sa-panel-lede { font-size: var(--fs-plain); line-height: 1.45; color: var(--ink); margin: 10px 0 14px; }

.sa-facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sa-fact { position: relative; border-bottom: 1px solid var(--line); }
.sa-fact a, .sa-fact-in { display: block; position: relative; padding: 8px 2px; text-decoration: none; }
.sa-fact a:hover { background: var(--bg-2); }
.sa-fact a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sa-fact-bar { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--accent-soft); pointer-events: none; }
.sa-fact-k { font-family: var(--font-body); font-size: var(--fs-note); font-weight: 500; line-height: 1.25; color: var(--ink); display: block; }
.sa-fact--share .sa-fact-k { padding-right: 62px; }
.sa-fact-v { position: absolute; right: 2px; top: 8px; font-family: var(--font-mono); font-size: var(--fs-ui); font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.sa-fact-v small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); text-align: right; letter-spacing: 0.04em; }
.sa-fact-note { display: block; font-size: var(--fs-note); line-height: 1.4; color: var(--muted); margin-top: 2px; }
.sa-sc { font-family: var(--font-mono); font-size: 11px; font-weight: 500; margin-left: 7px; padding: 1px 4px; border-radius: 0; color: var(--bg); background: var(--bar-3); vertical-align: 1px; }
.sa-sc[data-band="4"] { background: var(--bar-5); }
.sa-sc[data-band="3"] { background: var(--bar-4); }
/* dark mode fills the badge in mid tones (the wine, the High gray), so its figure takes the cream ink: 4.9:1 on the wine,
   4.5:1 on --bar-4. The dark ground color failed AA at 3.0:1 */
:root[data-theme="dark"] .sa-sc { color: var(--ink); }

.sa-china { margin: 14px 0 0; padding: 10px 0 4px 12px; background: none; border-left: 1px solid var(--accent); }
.sa-china .label { display: block; margin-bottom: 7px; }
.sa-china p { font-size: var(--fs-note); line-height: 1.45; color: var(--ink-2); margin: 0 0 9px; }
.sa-china a { font-weight: 600; color: var(--ink); text-decoration-color: var(--accent); }

.sa-panel-foot { font-family: var(--font-mono); font-size: var(--fs-ui-s); line-height: 1.5; color: var(--muted); margin: 12px 0 0; }
.sa-panel-foot a { color: var(--ink-2); }
.sa-dot-sep { opacity: 0.5; }

/* ---------- chips + legend ---------- */
.sa-chips { margin: 14px 0 0; }
.sa-chiprow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 8px; }
.sa-chiprow .label { flex: 0 0 auto; }
.sa-chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-chip {
  font-family: var(--font-mono); font-size: var(--fs-ui); font-weight: 500; line-height: 1;
  padding: 8px 10px; border: 1px solid var(--control-edge); border-radius: 0; background: none; color: var(--ink-2);
}
.sa-chip small { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-left: 6px; }
.sa-chip:hover { border-color: var(--ink-2); color: var(--ink); }
.sa-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.sa-chip[aria-pressed="true"] small { color: var(--bg); }
.sa-chip--minor { font-size: 12.5px; padding: 6px 8px; color: var(--muted); }

.sa-legend { font-family: var(--font-mono); font-size: var(--fs-cap-s); letter-spacing: 0; color: var(--muted); margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.sa-lg { display: inline-block; margin-right: -8px; }
.sa-lg--big { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ink-2); background: var(--bg); }
.sa-lg--hard { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--ink-2); background: var(--bg); }
.sa-lg--pin { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.sa-lg--sub { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink-2); }

/* ---------- the chain in one strip ---------- */
.sa-tiles { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; list-style: none; margin: 0; padding: 0; }
.sa-tile { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0 0 6px; text-align: left; }
.sa-tile-n { font-family: var(--font-mono); font-size: var(--fs-cap-s); color: var(--muted); font-variant-numeric: tabular-nums; }
.sa-tile-bar { display: flex; align-items: flex-end; height: 62px; border-bottom: 1px solid var(--line-2); }
.sa-tile-bar i { display: block; width: 100%; height: 22%; background: var(--bar-3); transition: height 0.25s var(--ease); }
.sa-tile[data-band="4"] .sa-tile-bar i { height: 100%; background: var(--bar-5); }
.sa-tile[data-band="3"] .sa-tile-bar i { height: 66%; background: var(--bar-4); }
.sa-tile[data-band="2"] .sa-tile-bar i { height: 38%; background: var(--bar-3); }
.sa-tile-t { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap-s); letter-spacing: 0; color: var(--ink-2); line-height: 1.2; }
.sa-tile:hover .sa-tile-t, .sa-tile:hover .sa-tile-n { color: var(--ink); }
.sa-tile[aria-pressed="true"] .sa-tile-n, .sa-tile[aria-pressed="true"] .sa-tile-t { color: var(--ink); font-weight: 500; }
.sa-tile[aria-pressed="true"] { position: relative; }
.sa-tile[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ink); }
.sa-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sa-details { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; min-height: 190px; }
.sa-stage-detail h4 { display: flex; align-items: baseline; gap: 9px; font-family: var(--font-display); font-variation-settings: var(--opsz-title); font-size: var(--t-block); font-weight: 400; text-transform: none; letter-spacing: 0; }
.sa-stage-detail p { font-size: var(--fs-plain); line-height: 1.5; color: var(--ink-2); max-width: var(--measure); margin: 10px 0 12px; }
.sa-stage-leaders { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.sa-stage-leaders ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.sa-stage-leaders li { font-family: var(--font-body); font-size: var(--fs-note); font-weight: 500; padding: 4px 8px; background: none; border: 1px solid var(--line-2); border-radius: 0; }
.sa-cc { font-family: var(--font-mono); font-size: var(--fs-cap-s); color: var(--accent); margin-right: 6px; }
.sa-stage-link { margin: 14px 0 0 !important; font-family: var(--font-mono); font-size: var(--fs-ui); font-weight: 500; }
.sa-stage-link a { text-decoration-color: var(--accent); }

/* ---------- four numbers ---------- */
.sa-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0; }
.sa-num { border-top: 1px solid var(--ink); padding-top: 12px; }
.sa-num b { display: block; font-family: var(--font-display); font-variation-settings: var(--opsz-numeral); font-size: clamp(34px, 3.6vw, 52px); font-weight: 360; line-height: 1; letter-spacing: -0.02em; text-transform: none; color: var(--accent); font-variant-numeric: tabular-nums lining-nums; }
.sa-num p { font-size: var(--t-small); line-height: 1.45; color: var(--ink-2); margin: 10px 0 8px; }
.sa-num a { font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: 0; color: var(--muted); }
.sa-num a:hover { color: var(--ink); }

/* ---------- call to action ---------- */
.sa-cta { margin-top: 52px; border-top: 1px solid var(--line); padding-top: 26px; }
.sa-cta-main {
  display: inline-flex; flex-direction: column; gap: 4px; padding: 16px 22px; text-decoration: none;
  background: var(--ink); color: var(--bg); border-radius: 0;
  font-family: var(--font-display); font-variation-settings: var(--opsz-title); font-size: var(--t-lead); font-weight: 500; text-transform: none; letter-spacing: 0;
}
.sa-cta-main span { font-family: var(--font-mono); font-size: var(--fs-ui-s); font-weight: 400; letter-spacing: 0.06em; text-transform: none; opacity: 0.72; }
.sa-cta-main:hover { background: var(--accent-ink); }
.sa-cta-links { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 18px; font-family: var(--font-display); font-variation-settings: var(--opsz-title); font-size: var(--t-text); font-weight: 600; }
.sa-cta-links a { text-decoration-color: var(--line-2); }

/* ---------- narrow ---------- */
@media (max-width: 900px) {
  /* one column on a phone: map, then the country buttons, then the panel */
  .sa-grid { grid-template-columns: 1fr; gap: 14px; }
  .sa-grid > .sa-map, .sa-grid > .sa-panels, .sa-grid > .sa-chips, .sa-grid > .sa-legend { grid-column: 1; grid-row: auto; }
  .sa-grid > .sa-map { order: 1; }
  .sa-grid > .sa-chips { order: 2; margin-top: 0; }
  .sa-grid > .sa-panels { order: 3; }
  .sa-grid > .sa-legend { order: 4; }
  .sa-panel { max-height: none; }
  .sa-nums { grid-template-columns: repeat(2, 1fr); }
  .sa-tiles { grid-template-columns: repeat(8, 1fr); row-gap: 12px; }
  .sa-tile-bar { height: 46px; }
}
@media (max-width: 700px) {
  /* the map runs to both edges on a phone: at this width every degree of width counts */
  .sa-map { margin: 0 -18px; border-left: 0; border-right: 0; border-radius: 0; }
  .sa-chip { padding: 7px 9px; font-size: 13px; }
  .sa-chip--minor { padding: 6px 8px; font-size: 12px; }
  .sa-marker { --d: max(18px, calc(var(--d0) * 0.66)); }
  .sa-marker-cc { display: none; }
  .sa-town { --d: max(5px, calc(var(--d0) * 0.75)); }
  .sa-panel-head h4 { font-size: var(--t-block); }
  .sa-panel-lede { font-size: var(--fs-small); }
  .sa-nums { grid-template-columns: 1fr; gap: 14px; }
  .sa-num b { font-size: 40px; }
  .sa-tiles { grid-template-columns: repeat(5, 1fr); gap: 4px 6px; row-gap: 14px; }
  .sa-stage-detail p { font-size: var(--fs-small); }
  .sa-cta-main { display: flex; font-size: 18px; }
  .sa-legend { gap: 5px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .sa-marker-dot, .sa-tile-bar i, .sa-leader { transition: none; }
  .sa-marker:hover .sa-marker-dot { transform: none; }
}

/* the home page's two exits */
.sa-exits { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 30px 0 8px; }
.sa-exit { display: block; padding: 14px 0 16px; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: none; text-decoration: none; color: var(--ink); transition: border-color 0.2s var(--ease); }
.sa-exit:hover, .sa-exit:focus-visible { border-top-color: var(--ink); }
.sa-exit b { display: block; font-family: var(--font-display); font-variation-settings: var(--opsz-title); font-weight: 500; font-size: var(--t-lead); letter-spacing: 0; margin-bottom: 4px; }
.sa-exit span { display: block; font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); }
@media (max-width: 700px) { .sa-exits { grid-template-columns: 1fr; } }

.sa-est { font-family: var(--font-mono); font-weight: 500; font-style: normal; font-size: var(--fs-cap-s); letter-spacing: 0; color: var(--ink-2); margin-left: 6px; }
.sa-est--basis { text-transform: none; letter-spacing: 0.02em; }

.sa-town[data-dead="1"] { cursor: default; }

/* ---------- the atlas on the Suppliers page: the route of one chip (redesign stage 3) ----------
   The hybrid mockup's route (qa/design3/directions/hybrid/suppliers.html): a section head over an ink rule, the country
   buttons as pills, the map on white with the land in a light tint, the stops, one per stage, as numbered discs (solid ink for a
   stage rated Extreme, an ink ring for one rated High, as the key says), the chosen country's panel beside the map and the
   strip of stops under it. A chosen country keeps its stops as they are and names their towns; the other stops turn gray.
   No color marks a country: the accent marks only the reader's place (a stop or card under the pointer or in focus). */
:root { --map-land: #ecebe7; --map-grat: #efeeea; --stop-off: #d6d5d0; }
:root[data-theme="dark"] { --map-land: #2a2a27; --map-grat: #1f1f1d; --stop-off: #3a3936; }
.sa--atlas { padding-bottom: 0; }
.sa-doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 10px 0 34px; }
.atlas { margin-top: 72px; }
.atlas .sup-sec-h { margin: 0; }
.atlas .sa-roles { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 14px 0; list-style: none; border-bottom: 1px solid var(--line); }
.atlas .sa-role {
  display: inline-flex; align-items: center; margin: 0; padding: 8px 13px; min-height: 34px; border: 1px solid var(--control-edge); border-radius: 999px;
  background: none; color: var(--ink); cursor: pointer; font-family: var(--font-ui); font-size: 14px; font-weight: 400; line-height: 1; white-space: nowrap;
}
.atlas .sa-role:hover { border-color: var(--ink); }
.atlas .sa-role[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.atlas .sa-role-name { font: inherit; }
.atlas .sa-role-meta, .atlas .sa-role-line { display: none; }

.atlas-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 24px; align-items: start; }
.atlas .sa-map { grid-column: 1 / 10; grid-row: 1; margin-top: 18px; border: 0; background: none; }
.atlas .sa-svg { display: block; }
.atlas .sa-ocean { fill: var(--bg); }
.atlas .sa-land { fill: var(--map-land); stroke: var(--bg); stroke-width: 0.6; }
.atlas .sa-sea { fill: var(--bg); stroke: var(--line); stroke-width: 0.6; }
.atlas .sa-grat { stroke: var(--map-grat); stroke-width: 0.6; opacity: 1; }
.atlas .sa-route { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0.32; vector-effect: non-scaling-stroke; }
.atlas .sa-tail { stroke: var(--ink-2); stroke-width: 0.8; opacity: 0.8; vector-effect: non-scaling-stroke; }

/* the stops: Extreme solid wine (the visual pass of 27 Oct 2026), High an ink ring, both on a white halo so they read over the routes */
.sa-stop {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; z-index: 3;
  display: grid; place-items: center; background: var(--bar-5); color: var(--bg); border: 0; box-shadow: 0 0 0 2px var(--bg);
  font-family: var(--font-ui); font-weight: 600; font-size: 11.5px; line-height: 1; text-decoration: none; transition: background 0.15s, color 0.15s;
}
.sa-stop[data-band="High"] { background: var(--bg); color: var(--ink); box-shadow: 0 0 0 2px var(--bg), inset 0 0 0 1.5px var(--ink); }
.sa-stop:hover, .sa-stop:focus-visible { z-index: 6; outline: 2px solid var(--accent); outline-offset: 2px; }
/* a chosen country: its stops stay as they are and name their towns; the rest become small gray dots on the route, so every
   name sits beside its own stop (the strip under the map still lists them all) */
.atlas .sa-map[data-cc] .sa-stop:not(.is-on) { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--stop-off); box-shadow: 0 0 0 1.5px var(--bg); }
.atlas .sa-map[data-cc] .sa-stop:not(.is-on) span { display: none; }
.atlas .sa-map[data-cc] .sa-stop:not(.is-on):hover, .atlas .sa-map[data-cc] .sa-stop:not(.is-on):focus-visible { outline-offset: 3px; }
.atlas .sa-map[data-cc] .sa-route { opacity: 0.18; }
.atlas .sa-stop.is-on { z-index: 5; }
.atlas .sa-stop.is-on::after { content: attr(data-place); }
.sa-stop::after {
  content: none; position: absolute; left: 27px; top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
  font-family: var(--font-ui); font-weight: 400; font-size: 11px; line-height: 16px; letter-spacing: 0; color: var(--ink);
  background: color-mix(in srgb, var(--bg) 88%, transparent); padding: 1px 4px;
}
/* where a country's towns crowd, the build gives each label a side (data-lab) so none covers a stop or another label */
.sa-stop[data-lab="l"]::after { left: auto; right: 27px; }
.sa-stop[data-lab="d"]::after { left: 50%; top: 24px; transform: translateX(-50%); }
.sa-stop[data-lab="u"]::after { left: 50%; top: auto; bottom: 24px; transform: translateX(-50%); }
.sa-stop[data-lab="rd"]::after { top: calc(50% + 11px); }
.sa-stop[data-lab="ru"]::after { top: calc(50% - 11px); }
.sa-stop[data-lab="ld"]::after { left: auto; right: 27px; top: calc(50% + 11px); }
.sa-stop[data-lab="lu"]::after { left: auto; right: 27px; top: calc(50% - 11px); }
.sa-stop[data-lab="dr"]::after { left: 3px; top: 24px; transform: none; }
.sa-stop[data-lab="dl"]::after { left: auto; right: 3px; top: 24px; transform: none; }
.sa-stop[data-lab="ur"]::after { left: 3px; top: auto; bottom: 24px; transform: none; }
.sa-stop[data-lab="ul"]::after { left: auto; right: 3px; top: auto; bottom: 24px; transform: none; }
.sa-stop-tip { position: absolute; z-index: 50; max-width: 300px; padding: 10px 12px 11px; background: var(--bg); color: var(--ink); border: 1px solid var(--line-2); box-shadow: var(--shadow); font-family: var(--font-ui); font-size: 13px; line-height: 1.45; pointer-events: none; }
.sa-stop-tip[hidden] { display: none; }
@media (hover: hover) { .sa-stop-tip { pointer-events: auto; } } /* a mouse can move onto the tip and it stays (WCAG 1.4.13) */
.sa-stop-tip b { display: block; font-family: var(--font-display); font-variation-settings: var(--opsz-title); font-weight: 500; font-size: var(--t-small); margin-bottom: 3px; }
.sa-stop-tip span { display: block; color: var(--ink-2); }
.sa-stop-tip .sa-stop-tip-s { margin-top: 4px; font-family: var(--font-ui); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* beside the map: the chosen country's panel, then the key. The column runs as tall as the map and the strip under it, and a
   longer panel scrolls inside it, with a fade at its foot until the end is in view (src/modules/summary-a.js more()) */
.atlas-side { grid-column: 10 / 13; grid-row: 1 / span 2; align-self: stretch; display: flex; flex-direction: column; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--rule-ink); min-height: 0; }
.atlas .sa-panels { position: relative; flex: 1 1 auto; min-height: 300px; }
.atlas .sa-panel { position: absolute; inset: 0; max-height: none; overflow: auto; border: 0; padding: 0 4px 12px 0; }
.atlas .sa-panels[data-more="1"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
.atlas .sa-panel-head { display: flex; align-items: baseline; gap: 10px; }
.atlas .sa-panel-cc { order: 2; border: 0; padding: 0; font-family: var(--font-ui); font-size: 12px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.atlas .sa-panel-head h4 { font-family: var(--font-display); font-variation-settings: var(--opsz-title); font-weight: 500; font-size: var(--t-block); line-height: 1.15; letter-spacing: -0.01em; }
.atlas .sa-panel-meta { margin: 6px 0 0; font-family: var(--font-ui); font-size: 12.5px; line-height: 17px; color: var(--muted); font-variant-numeric: tabular-nums; }
.atlas .sa-panel-role { margin: 6px 0 0; font-family: var(--font-body); font-size: var(--t-small); line-height: 1.5; color: var(--ink); }
.atlas .sa-panel-lede { margin: 10px 0 14px; font-family: var(--font-body); font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.atlas .sa-panel--none .sa-panel-lede { color: var(--ink-2); }
.atlas .sa-facts { border-top: 1px solid var(--line); }
.atlas .sa-fact a, .atlas .sa-fact-in { padding: 8px 2px; }
.atlas .sa-fact a:hover { background: none; }
.atlas .sa-fact a:hover .sa-fact-k { color: var(--accent-ink); }
.atlas .sa-fact-bar { background: var(--bg-2); } /* a share as a light tint behind its row: data, so never the accent */
.atlas .sa-fact-k { font-family: var(--font-ui); font-size: 14px; font-weight: 500; }
.atlas .sa-fact-v { font-family: var(--font-ui); font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; }
.atlas .sa-fact-v small { font-family: var(--font-ui); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.atlas .sa-fact-note { font-family: var(--font-body); font-size: var(--t-note); color: var(--muted); }
.atlas .sa-est { display: block; margin: 2px 0 0; font-family: var(--font-ui); font-weight: 400; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* a stage's band beside its name, as the chapter's kicker marks it: a bar for Extreme, an outline for High */
.atlas .sa-sc { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 0; background: none; color: var(--ink); font-family: var(--font-ui); font-size: 12px; font-weight: 500; vertical-align: 1px; }
.atlas .sa-sc .meter { --mh: 10px; --mw: 3px; --mg: 1.5px; } /* the band's meter, as the strip below draws it (28 Oct 2026; a single mark before) */
:root[data-theme="dark"] .atlas .sa-sc { color: var(--ink); }
.atlas .sa-china { margin: 14px 0 0; padding: 10px 0 2px; border-left: 0; border-top: 1px solid var(--line); }
.atlas .sa-china a { color: var(--ink); text-decoration-color: var(--rule-ink); }
.atlas .sa-china a:hover { text-decoration-color: var(--accent); }
.atlas .sa-panel-foot { margin: 12px 0 0; font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--muted); }
.atlas .sa-panel-foot a { color: var(--ink-2); }
.atlas-key { display: grid; gap: 8px; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-family: var(--font-ui); font-size: 13.5px; line-height: 20px; color: var(--ink-2); }
.atlas-key span { display: inline-flex; align-items: center; gap: 9px; }
.sa-kstop { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--bar-5); color: var(--bg); font-family: var(--font-ui); font-style: normal; font-weight: 600; font-size: 11px; line-height: 1; }
.sa-kstop[data-band="High"] { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* the strip: the stops in order, each with its band as a mark beside its number */
.atlas .sa-strip-stops { grid-column: 1 / 10; grid-row: 2; list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 14px; row-gap: 4px; border-top: 1px solid var(--ink); }
.atlas .sa-strip-stops li { min-width: 0; }
.sa-stopcard { display: flex; flex-direction: column; gap: 3px; padding: 10px 6px 8px 0; text-decoration: none; color: var(--ink); min-width: 0; border: 0; }
.sa-stopcard-n { display: flex; align-items: flex-end; gap: 6px; font-family: var(--font-ui); font-size: 11.5px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sa-stopcard-n .sa-bmk { --mh: 11px; --mw: 3px; --mg: 1.5px; margin-bottom: 3px; } /* the band's meter (src/modules/chapter.css .meter), at the rail's size */
.sa-stopcard-t { display: block; font-family: var(--font-ui); font-weight: 500; font-size: 13.5px; line-height: 1.25; margin: 0; overflow-wrap: break-word; hyphens: auto; }
.sa-stopcard-w { display: block; font-family: var(--font-ui); font-size: 11px; line-height: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sa-stopcard:hover .sa-stopcard-t, .sa-stopcard.is-hot .sa-stopcard-t, .sa-stopcard:focus-visible .sa-stopcard-t { color: var(--accent-ink); }
/* the strip agrees with the map: with a country chosen, its cards stay dark and the rest go quiet */
.atlas[data-cc] .sa-stopcard:not(.is-on) .sa-stopcard-t { color: var(--muted); font-weight: 400; }
.atlas[data-cc] .sa-stopcard:not(.is-on) .sa-bmk { opacity: 0.35; }

@media (max-width: 1199px) {
  .atlas .sa-map { grid-column: 1 / -1; }
  .atlas-side { grid-column: 1 / -1; grid-row: 2; margin-top: 18px; }
  .atlas .sa-panels { min-height: 0; }
  .atlas .sa-panel { position: static; overflow: visible; padding: 0; }
  .atlas .sa-panels[data-more="1"]::after { content: none; }
  .atlas-key { grid-template-columns: auto auto; justify-content: start; column-gap: 28px; }
  .atlas .sa-strip-stops { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 24px; }
  .sa-stop { width: 20px; height: 20px; margin: -10px 0 0 -10px; font-size: 11px; }
}
@media (max-width: 899px) {
  .sa-doors { grid-template-columns: 1fr; gap: 8px; margin: 6px 0 24px; }
}
@media (max-width: 760px) {
  .atlas { margin-top: 48px; }
  /* a phone: the buttons scroll sideways, the stops are small dots (the strip below is the list to tap), the strip in two columns */
  .atlas .sa-roles { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-right: calc(-1 * var(--margin)); padding-right: var(--margin); }
  .atlas .sa-roles::-webkit-scrollbar { display: none; }
  .atlas .sa-roles li { flex: 0 0 auto; }
  .atlas .sa-role { padding: 7px 11px; font-size: 13.5px; white-space: nowrap; }
  .atlas .sa-map { margin-left: calc(-1 * var(--margin)); margin-right: calc(-1 * var(--margin)); }
  .sa-stop { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; pointer-events: none; box-shadow: 0 0 0 1px var(--bg); }
  .sa-stop[data-band="High"] { box-shadow: 0 0 0 1px var(--bg), inset 0 0 0 1.25px var(--ink); }
  .sa-stop span { display: none; }
  .sa-stop::after, .atlas .sa-stop.is-on::after { display: none; }
  .atlas .sa-map[data-cc] .sa-stop:not(.is-on) { box-shadow: 0 0 0 1px var(--bg); }
  .atlas .sa-tail { display: none; }
  .atlas .sa-strip-stops { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .atlas-key { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sa-stop { transition: none; } }


/* module: suppliers.css */
/* Suppliers (redesign stage 3, qa/redesign/BRIEF.md; the hybrid mockup's suppliers.html and review image r6-critical-only.png).
   The page reads top to bottom: the title with its four counts, the route of one chip (summary-a.css), the ribbons open on the
   page, then every firm under three tabs, By segment (the ladder), By country and Table.
   Color: the firms rated Critical are red wine, the one data color on the site (their ribbons, their names, their marks).
   Every other ribbon is gray. A country followed with its button turns its other ribbons dark gray and keeps its Critical
   ones wine, and the pressed button fills black. The list's twenty categories are "segments"; "stages" are the chapters.
   Motion: one left-to-right reveal of the ribbons, and the firm panels opening. Nothing loops. */

.view[data-view="suppliers"] { width: 100%; padding: 0 var(--margin); }
:root { --rib: #d2d1cc; --rib-on: #8c8a84; --rib-crit: var(--accent); }
:root[data-theme="dark"] { --rib: #3a3936; --rib-on: #8c8a84; --rib-crit: #b8505c; }

/* ---------- the view head, shared by the other views (Suppliers, Export Controls, The Chain's top) ---------- */
.view-head.vh {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end;
  padding: clamp(40px, 7vh, 64px) 0 0;
}
.view-head.vh h1, .view-head.vh .vt {
  grid-column: 1 / -1; margin: 0 0 0 -0.045em;
  font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--opsz-title);
  font-size: var(--t-title); line-height: 0.92; letter-spacing: -0.03em;
}
.view-head.vh .dek {
  grid-column: 1 / 7; margin: 24px 0 0; max-width: 31em;
  font-family: var(--font-body); font-size: var(--t-lead); line-height: 1.38; color: var(--ink-2);
}
.view-head.sup-head .vt { grid-column: 1 / 8; } /* beside its four counts */
@media (max-width: 1199px) { .view-head.vh .dek { grid-column: 1 / -1; } .view-head.sup-head .vt { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .view-head.vh { display: block; padding-top: 32px; }
  .view-head.vh h1, .view-head.vh .vt { font-size: var(--t-title); }
  .view-head.vh .dek { margin-top: 16px; font-size: var(--t-text); line-height: 1.35; }
}

/* the four counts beside the Suppliers title: large numbers over an ink rule */
.sup-facts-row { grid-column: 8 / 13; grid-row: 1 / span 2; align-self: end; display: flex; margin: 0; border-top: 1px solid var(--ink); }
.sup-facts-row div { flex: 1 1 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 12px 8px 0 0; min-width: 0; }
.sup-facts-row dd { margin: 0; font-family: var(--font-display); font-weight: 360; font-variation-settings: var(--opsz-numeral); font-size: clamp(40px, 3.6vw, 54px); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: lining-nums; color: var(--ink); }
.sup-facts-row dt { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-family: var(--font-ui); font-size: 14px; line-height: 20px; color: var(--ink-2); }
.sup-mk { display: inline-block; flex: none; width: 5px; height: 14px; background: var(--rib-crit); }
@media (max-width: 1199px) { .sup-facts-row { grid-column: 1 / -1; grid-row: auto; margin-top: 32px; max-width: 640px; } }
@media (max-width: 760px) { .sup-facts-row { margin-top: 24px; } .sup-facts-row dd { font-size: 36px; } .sup-facts-row dt { font-size: 13px; } }

/* ---------- a section head: the heading over an ink rule, a mono line or a control at its right ---------- */
.sup-sec-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.sup-sec-h h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-variation-settings: var(--opsz-title); font-size: var(--t-block); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.sup-sec-sub { margin: 0; font-family: var(--font-ui); font-size: 12.5px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .sup-sec-h { display: block; } .sup-sec-sub { margin-top: 6px; } .sup-sec-h h2 { font-size: var(--t-lead); } }

/* ---------- the ribbons (by share since 29 Oct 2026: src/modules/supshares.css draws their states, the phone rows and the
   Table on these shared parts) ---------- */
.sup-pipe { position: relative; margin: 88px 0 0; }
.sup-pipe-top { align-items: center; }
.sup-pipe-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.sup-pipe-plot { grid-column: 1 / 10; position: relative; padding-top: 18px; min-width: 0; }
.sup-pipe-svg { display: block; max-width: none; } /* the site caps every svg at its column; this one is drawn at the column's width */
.sup-band { cursor: pointer; transition: opacity 160ms linear, fill 160ms linear; }
.sup-band.sup-rib { stroke: none; fill: var(--rib); opacity: 0.8; }
.sup-cnode { fill: var(--ink); }
.sup-snode { fill: var(--ink-2); }
.sup-hit { fill: transparent; cursor: pointer; outline: none; }
.sup-hit:focus-visible { stroke: var(--accent); stroke-width: 1.5px; } /* the keyboard's segment: a frame round its label (the rect takes no outline) */
.sup-clab { font-family: var(--font-ui); font-weight: 500; fill: var(--ink); text-anchor: end; }
.sup-lab-t { font-family: var(--font-ui); font-weight: 400; fill: var(--ink); text-anchor: start; }
.sup-flow text { pointer-events: none; }

/* beside the ribbons: the key, the country buttons, the notes */
.sup-legend { display: grid; gap: 10px; margin: 0; font-family: var(--font-ui); font-size: 14px; line-height: 20px; color: var(--ink-2); }
.sup-lg { display: flex; align-items: center; gap: 10px; }
.sup-all-sw, .sup-crit-sw { display: block; flex: none; width: 26px; height: 12px; }
.sup-all-sw { background: var(--rib); }
.sup-crit-sw { background: var(--rib-crit); }
.sup-follow { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.sup-follow-k { margin: 0 0 10px; font-family: var(--font-kicker); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); line-height: 16px; color: var(--muted); }
.sup-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sup-chip { font-family: var(--font-ui); font-size: 13.5px; line-height: 1; padding: 8px 12px; min-height: 32px; border: 1px solid var(--control-edge); border-radius: 999px; color: var(--ink); background: none; }
.sup-chip:hover { border-color: var(--ink); }
.sup-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.sup-note { margin: 0; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
/* under the drawing, its source */
.sup-pipe-note { grid-column: 1 / 10; margin-top: 16px; max-width: 78ch; color: var(--muted); }
@media (max-width: 1199px) {
  .sup-pipe-plot, .sup-pipe-note { grid-column: 1 / -1; }
  .sup-pipe-note { margin-top: 22px; }
}
@media (max-width: 760px) { .sup-pipe { margin-top: 56px; } }

/* the tip over the ribbons */
.sup-tip { position: absolute; z-index: 30; min-width: 180px; max-width: 340px; padding: 10px 12px 11px; background: var(--bg); border: 1px solid var(--line-2); box-shadow: var(--shadow); pointer-events: none; }
.sup-tip[hidden] { display: none; }
@media (hover: hover) { .sup-tip { pointer-events: auto; } } /* a mouse can move onto the tip and it stays (WCAG 1.4.13); a tap still reaches the drawing under it */
.sup-tip b { display: block; font-family: var(--font-display); font-variation-settings: var(--opsz-title); font-weight: 500; font-size: var(--t-small); line-height: 1.2; color: var(--ink); }
.sup-tip .sup-tip-n { display: block; margin: 3px 0 7px; font-family: var(--font-ui); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- every firm: the tabs and the filters, the toolbar, the lists ---------- */
.sup-reg { margin: 88px 0 0; scroll-margin-top: calc(var(--masthead) + 14px); }
.sup-reg-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.sup-tabs { display: inline-flex; gap: 28px; margin: 0; border: 0; }
.sup-tabs a { position: relative; padding: 10px 0; font-family: var(--font-ui); font-size: 17px; line-height: 1; color: var(--ink-2); text-decoration: none; }
.sup-tabs a:hover { color: var(--ink); }
.sup-tabs a[aria-current] { color: var(--ink); }
.sup-tabs a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -15px; height: 2px; background: var(--accent); }
.sup-reg .filters { margin: 0; gap: 10px; }
.sup-reg .filters input, .sup-reg .filters select { font-family: var(--font-ui); font-size: 14px; height: 40px; padding: 0 12px; border: 1px solid var(--control-edge); border-radius: 4px; background-color: var(--bg); }
.sup-reg .filters select { padding-right: 32px; }
.sup-reg .filters input { width: 270px; min-width: 0; }
.sup-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 14px 0 0; scroll-margin-top: calc(var(--masthead) + 14px); }
.sup-toolbar .count { margin-right: auto; font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sup-lv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin: 18px 0 0; }
.sup-ladder-h { display: block; margin: 0; font-family: var(--font-kicker); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); color: var(--muted); }
.sup-key { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0; font-family: var(--font-body); font-size: var(--t-note); }
.sup-key b { font-weight: 500; color: var(--ink); }
.sup-key .k-crit { color: var(--accent-ink); font-weight: 600; }
.sup-key .k-div { color: var(--muted); font-weight: 400; }
.sup-ladder[hidden], .sup-ladder-h[hidden], .sup-key[hidden], .sup-wrap[hidden] { display: none; }
@media (max-width: 760px) {
  .sup-reg { margin-top: 64px; }
  .sup-reg-h { display: block; }
  .sup-tabs { gap: 22px; }
  .sup-tabs a { font-size: 16px; }
  .sup-reg .filters { margin-top: 22px; }
  .sup-reg .filters > * { flex: 1 1 100%; }
  .sup-reg .filters input { width: 100%; }
}

/* ---------- the ladders: by segment, by country ---------- */
.sup-ladder { margin: 10px 0 40px; border-top: 1px solid var(--line-2); }
.sup-rung {
  display: grid; grid-template-columns: 84px 250px minmax(0, 1fr); column-gap: 24px; align-items: start;
  padding: 18px 0 20px; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--masthead) + 14px);
}
.sup-rung[data-lit="1"] { box-shadow: inset 2px 0 0 var(--accent); }
.sup-rank {
  grid-column: 1; grid-row: 1 / span 2; padding-top: 2px;
  font-family: var(--font-display); font-variation-settings: var(--opsz-numeral); font-weight: 360; font-size: 52px; line-height: 0.86;
  letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums lining-nums;
}
.sup-rung[data-lit="1"] .sup-rank { color: var(--accent-ink); }
/* the numeral counts firms, as the stat strip's "226 / firms" does (design10 data P1.3): in chain order it could read as a stage number */
.sup-rank::after { content: attr(data-unit); display: block; margin-top: 7px; font: 400 12px/1 var(--font-ui); font-variation-settings: normal; letter-spacing: 0; color: var(--muted); }
.sup-rung[data-empty="1"] .sup-rank::after { content: none; }
.sup-rung-head { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.sup-rung-name { margin: 0; font-family: var(--font-display); font-variation-settings: var(--opsz-title); font-weight: 500; font-size: var(--t-text); line-height: 1.2; color: var(--ink); }
.sup-rung-n { margin: 8px 0 0; font-family: var(--font-ui); font-size: 12px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* the Critical firms of a segment or country: one red wine mark each */
.sup-crit-n { display: inline-flex; align-items: flex-end; gap: 8px; color: var(--accent-ink); }
.sup-crit-sq { display: inline-flex; align-items: flex-end; gap: 3px; }
.sup-crit-sq i { display: block; width: 4px; height: 14px; background: var(--rib-crit); }
.sup-names { grid-column: 3; grid-row: 1; margin: 0; line-height: 1.75; }
.sup-panel { grid-column: 3; } /* here, ahead of the narrow layouts below: set after them, it put an opened firm in a third column over the segment's name on tablets and phones (28 Oct 2026) */
.sup-nw { display: inline; white-space: nowrap; } /* a name and its comma stay together; the list breaks at the spaces between names */
.sup-nw[hidden] { display: none; }
.sup-nw::after { content: ","; color: var(--muted); }
.sup-nw.is-last::after { content: ""; }
.sup-name { font-family: var(--font-body); font-weight: 400; font-size: var(--t-small); line-height: 1.3; color: var(--ink); padding: 1px 2px; margin: 0 -2px; white-space: normal; }
.sup-name.lv-Critical { color: var(--accent-ink); font-weight: 600; }
.sup-name.lv-Diversified { color: var(--muted); }
.sup-name:hover { background: var(--bg-2); }
.sup-name[aria-expanded="true"] { box-shadow: inset 0 -1.5px 0 var(--accent); }
.sup-cc { font-style: normal; font-family: var(--font-ui); font-weight: 400; font-size: 11px; color: var(--muted); margin-left: 4px; font-variant-numeric: tabular-nums; }
.sup-ladder-cc .sup-cc { font-family: var(--font-ui); } /* by country, the tag is the firm's segment, a word */
.sup-rung[data-empty="1"] .sup-names, .sup-rung[data-empty="1"] .sup-panel { display: none; }
.sup-rung[data-empty="1"] { padding: 10px 0 11px; } /* nothing matches here: collapse to the header */
.sup-rung[data-empty="1"] .sup-rung-name { color: var(--muted); }
.sup-rung[data-empty="1"] .sup-rank { color: var(--line-2); font-size: 28px; }
@media (max-width: 1023px) {
  .sup-rung { grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; }
  .sup-rank { font-size: 44px; }
  .sup-rung-head { grid-column: 2; grid-row: 1; }
  .sup-names { grid-column: 2; grid-row: 2; margin-top: 8px; }
  .sup-panel { grid-column: 2; }
}
@media (max-width: 699px) {
  .sup-rung { grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; padding: 14px 0 16px; }
  .sup-rank { grid-row: 1; font-size: 34px; }
  .sup-rung-name { font-size: var(--t-text); }
  .sup-rung-n { margin-top: 4px; }
  .sup-names { grid-column: 1 / -1; margin-top: 10px; }
  .sup-panel { grid-column: 1 / -1; }
}

/* ---------- the firm panel under a rung ---------- */
.sup-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms var(--ease); }
.sup-panel[data-open="1"] { grid-template-rows: 1fr; }
.sup-panel-in { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear 220ms; }
.sup-panel[data-open="1"] .sup-panel-in { visibility: visible; transition-delay: 0s; }
.sup-detail-body { padding: 14px 0 4px; margin-top: 10px; border-top: 1px solid var(--line); }
.sup-detail-h { margin: 0 0 8px; font-family: var(--font-display); font-variation-settings: var(--opsz-title); font-weight: 500; font-size: var(--t-text); color: var(--ink); }
.sup-detail-h .chk { margin-left: 8px; vertical-align: 2px; }
.sup-detail-h em { font-style: normal; font-family: var(--font-ui); font-weight: 400; font-size: 11.5px; color: var(--muted); margin-left: 8px; font-variant-numeric: tabular-nums; }
.sup-role { margin: 0 0 12px; max-width: 62ch; font-family: var(--font-body); font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); }
.sup-facts { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 5px 14px; margin: 0; max-width: 82ch; }
.sup-facts dt { padding-top: 2px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; color: var(--muted); }
.sup-facts dd { margin: 0; font-family: var(--font-body); font-size: var(--t-note); line-height: 1.5; color: var(--ink-2); }
.sup-src { display: inline-block; margin-top: 12px; font-family: var(--font-ui); font-size: 13px; color: var(--ink-2); }
.sup-src:hover { color: var(--accent-ink); }
@media (max-width: 699px) { .sup-facts { grid-template-columns: 1fr; gap: 1px; } .sup-facts dd { margin-bottom: 8px; } }

/* ---------- the table ---------- */
.sup-wrap { margin: 18px 0 40px; overflow-x: auto; border-top: 1px solid var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .sup-panel, .sup-panel-in, .sup-band { transition: none; }
}

/* revenue as filed: the method note under the list, and the filed figure (here and on the Index card), which never breaks inside */
.sup-rev-note { margin: 22px 0 0; max-width: 72ch; color: var(--muted); }
.sup-rev-note:empty { display: none; }
.rev-filed { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rev-usd { white-space: nowrap; } /* "about $122 billion" stays on one line */

/* ---------- a firm's China revenue share (the Export Controls panel, joined by build/exposure.js) ---------- */
.sup-ex { font-style: normal; font-family: var(--font-ui); font-weight: 400; font-size: 11px; color: var(--muted); margin-left: 6px; padding-left: 6px; border-left: 1px solid var(--line-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sup-china { margin: 10px 0 0; font-size: var(--t-note); line-height: 1.45; }
.sup-china a { display: inline-block; padding: 3px 0; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.sup-china a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
.sup td.name .sup-ex-a { display: block; width: fit-content; margin-top: 0; padding: 5px 0; font-family: var(--font-ui); font-size: 12.5px; line-height: 1.4; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 2px; }
.sup td.name .sup-ex-a:hover { color: var(--accent-ink); }
/* under the From China line, the firm's own chart, cloned from its panel on Export Controls (Suppliers.exMini); the figure beside
   it is the text, so the copy is hidden from screen readers. .ex-panel gives it the panel's colors */
.sup-ex-mini.ex-panel { display: block; width: 240px; max-width: 100%; margin: 6px 0 2px; padding: 0; border: 0; }
.sup-ex-mini svg { width: 240px; max-width: 100%; height: auto; }
/* the chart a link opens (#/exposure/<slug>) lands with its category heading in view, and takes a short wash of the paper
   tint, once; app.js adds the wash only when motion is allowed */
.ex-panel { scroll-margin-top: calc(var(--masthead) + var(--band) + 52px); }
.ex-panel.ex-flash { animation: ex-flash 1.8s var(--ease) both; }
@keyframes ex-flash {
  0%, 30% { background-color: var(--bg-2); box-shadow: 0 0 0 10px var(--bg-2); }
  100% { background-color: transparent; box-shadow: 0 0 0 10px transparent; }
}
@media (prefers-reduced-motion: reduce) { .ex-panel.ex-flash { animation: none; } }


/* module: supshares.css */
/* The Suppliers ribbons, by share (build/modules/supplier-shares.js, src/modules/supshares.js). They take the ribbon styles
   in suppliers.css (.sup-pipe, .sup-rib, the key, the buttons, the tip); this sheet adds the layout that puts the follow
   buttons first, the ribbon states, the printed shares, the firm names, the phone rows, the tip, the Table and the source
   line with its actions. */
.ss .ss-code { font-family: var(--font-code); font-size: 12px; }

/* the follow buttons come first in the page's order (and so in the tab order), the drawing after them. A wide screen still
   sets them in the right-hand column, beside the drawing, with the notes under them. */
.ss-body { grid-template-rows: auto 1fr auto; }
.ss .ss-side-top { grid-column: 10 / 13; grid-row: 1; padding-top: 22px; min-width: 0; }
.ss .ss-plot { grid-column: 1 / 10; grid-row: 1 / 3; }
.ss .ss-side-note { grid-column: 10 / 13; grid-row: 2; align-self: start; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.ss .ss-src { grid-column: 1 / 10; grid-row: 3; }
.ss .ss-side-note p { margin: 0; }
.ss .ss-side-note p + p { margin-top: 10px; }
@media (max-width: 1199px) {
  .ss-body { grid-template-rows: none; }
  .ss .ss-side-top, .ss .ss-plot, .ss .ss-side-note, .ss .ss-src { grid-column: 1 / -1; grid-row: auto; }
  .ss .ss-side-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: 28px; align-items: start; padding-top: 18px; }
  .ss .ss-side-top .sup-follow { margin-top: 0; padding-top: 0; border-top: 0; }
  .ss .ss-side-note { max-width: 78ch; }
}
@media (max-width: 760px) {
  .ss .ss-side-top { display: block; }
  .ss .ss-side-top .sup-follow { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
}
.ss .sup-legend .sup-lg { display: flex; align-items: center; gap: 10px; }
.ss .sup-legend .ss-key { padding-left: 36px; }

/* the ribbons: gray, the followed country's in wine, a hovered segment's or ribbon's darker and the rest faded */
.ss .sup-rib { fill: var(--rib); opacity: 0.8; }
.ss[data-lit="1"] .sup-rib { opacity: 0.45; }
.ss[data-lit="1"] .sup-rib[data-lit] { fill: var(--rib-crit); opacity: 0.95; }
.ss .ss-svg[data-hot="1"] .sup-rib { opacity: 0.22; }
.ss .ss-svg[data-hot="1"] .sup-rib[data-lit] { opacity: 0.4; }
.ss .ss-svg[data-hot="1"] .sup-rib[data-hot] { fill: var(--rib-on); opacity: 0.9; }
.ss .ss-svg[data-hot="1"] .sup-rib[data-hot][data-lit] { fill: var(--rib-crit); opacity: 1; }
.ss-clab.on { fill: var(--accent-ink); font-weight: 600; }
.ss-hit { fill: transparent; cursor: pointer; outline: none; }
.ss-hit:focus-visible { stroke: var(--accent); stroke-width: 1.5px; }

/* shares printed on the drawing, with a ground-colored halo so they read over the ribbons */
.ss-v { font-family: var(--font-ui); font-size: 12px; font-weight: 600; fill: var(--ink); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--bg); stroke-width: 3.5px; stroke-linejoin: round; }
.ss-v.ss-v-lit { fill: var(--accent-ink); }

/* the segment labels: a muted mark where the row is not 2025 revenue, and the firms under the name. A followed country's
   firms go to ink and the rest to the label gray (5.3:1 light, 5.7:1 dark). */
.ss-mk { fill: var(--muted); color: var(--muted); font-size: 11.5px; }
.ss-fn, .ss-fsep { transition: fill 160ms linear, color 160ms linear; }
.ss-fsep { fill: var(--muted); color: var(--muted); }
.ss-fn.on { fill: var(--ink); color: var(--ink); font-weight: 600; }
.ss-fn.off { fill: var(--muted); color: var(--muted); }

/* the tip */
.ss-tip { max-width: 360px; }
.ss-tip .ss-tip-big { display: block; margin: 0 0 6px; font-family: var(--font-ui); font-size: 20px; font-weight: 600; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ss-tip .ss-tip-firms { display: block; margin-top: 2px; font-family: var(--font-ui); font-size: 13px; line-height: 1.45; color: var(--ink); }
.ss-tip .ss-tip-firms .k { display: block; font-size: 11.5px; color: var(--muted); }
.ss-tip .ss-tip-src { display: block; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); font-family: var(--font-ui); font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.ss-tip .ss-tip-src a { color: var(--ink-2); text-underline-offset: 2px; }

/* narrower than 600 px: one row per segment */
.ss-rows { list-style: none; margin: 0; padding: 0; }
.ss-row { margin: 0; padding: 10px 0 11px; border-bottom: 1px solid var(--line); }
.ss-row:first-child { padding-top: 2px; }
.ss-row-h { margin: 0 0 6px; font-family: var(--font-ui); font-size: 14px; line-height: 19px; color: var(--ink); }
.ss-row-h .ss-mk { font-size: 12px; }
.ss-strip { display: flex; height: 24px; }
.ss-sl { flex: none; box-sizing: border-box; display: flex; align-items: center; min-width: 1px; overflow: hidden; border-right: 1px solid var(--bg); background: var(--rib); }
.ss-sl:last-child { border-right: 0; }
.ss-sl b { padding: 0 5px; font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums; }
.ss-sl[data-lit] { background: var(--rib-crit); }
.ss-sl[data-lit] b { color: #fff; } /* 10.2:1 on the light wine, 4.8:1 on the dark */
.ss-rest { margin: 5px 0 0; font-family: var(--font-ui); font-size: 12px; line-height: 17px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ss-rest span[data-lit] { color: var(--accent-ink); font-weight: 600; }
.ss-row-f { margin: 5px 0 0; font-family: var(--font-ui); font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
.ss-row-f:empty { display: none; }

/* the source line, with Cite, Table and CSV at its end as a figure's strip has them; the citation opens under it */
.ss .ss-src { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 24px; row-gap: 4px; }
.ss .ss-src { max-width: none; } /* the links sit at the drawing's right edge, as on chapter figures */
.ss .ss-src .fs-src { flex: 0 1 auto; min-width: 0; max-width: 78ch; }
@media (max-width: 599px) { .ss .ss-side-note p:first-child { display: none; } } /* it describes the ribbons, which a phone does not draw */
.ss .ss-acts { display: flex; flex-wrap: nowrap; white-space: nowrap; font-family: var(--font-ui); font-size: var(--ui-s); }
.ss .ss-acts > a, .ss .ss-acts > button { font: inherit; color: var(--ink-2); background: none; border: 0; padding: 3px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; }
.ss .ss-acts > * + *::before { content: "\00b7"; display: inline-block; width: 17px; text-align: center; color: var(--muted); }
.ss .ss-acts > a:hover, .ss .ss-acts > button:hover { color: var(--accent-ink); text-decoration-color: var(--accent); }
.ss .ss-acts > [aria-pressed="true"] { color: var(--accent-ink); text-decoration-color: var(--accent); }
.ss .ss-src .ch-cite-box { flex-basis: 100%; margin: 6px 0 0; padding: 10px 14px; border-left: 2px solid var(--accent); background: var(--bg-2); }
.ss .ss-src .ch-cite-text { margin: 0; font-family: var(--font-body); font-size: var(--t-note); line-height: 1.5; color: var(--ink); }
.ss .ss-src .ch-cite-text a { font-family: var(--font-code); font-size: 12.5px; overflow-wrap: anywhere; }
.ss .ss-src .ch-cite-copy { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--accent-ink); background: none; border: 0; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* the Table, in the drawing's place: the followed country's shares in bold */
.ss-table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: 13.5px; line-height: 19px; color: var(--ink); }
.ss-table th, .ss-table td { padding: 7px 12px 7px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; vertical-align: top; }
.ss-table thead th { color: var(--muted); font-size: 12.5px; border-bottom-color: var(--ink); }
.ss-table td { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ss-table td a { color: var(--ink-2); text-underline-offset: 2px; text-decoration-color: var(--line-2); }
.ss-table .ss-tc[data-lit] { color: var(--ink); font-weight: 700; }
.ss-table .ss-tseg { display: block; font-weight: 500; color: var(--ink); }
.ss-table .ss-tfirms { display: block; font-size: 12.5px; color: var(--muted); }
@media (max-width: 599px) {
  .ss-table { font-size: 12.5px; line-height: 17px; }
  .ss-table th, .ss-table td { padding-right: 8px; }
  .ss-table .ss-tfirms { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .ss-fn, .ss-fsep { transition: none; } }

/* on paper: the drawing as it stands, scaled to the page, with its key and notes; no tip and no actions */
@media print {
  .ss .ss-tip, .ss .ss-acts, .ss .ch-cite-box { display: none !important; }
  .ss .ss-svg { max-width: 100%; height: auto; }
  .ss .ss-plot { break-inside: avoid; }
}


/* module: underline.css */
/* Chips built just under the line, first on Export Controls (build/modules/under-line.js, src/modules/underline.js). The
   figure takes the chapter figure's grammar (chapter.css) outside a chapter: the ruled box at 666 px, the Fraunces title,
   the source strip with Cite, Table, CSV and PNG. Inside, the ladder (29 Oct 2026): one row for each US move, its date and
   rule, its lanes and lines, and its sentence. A chip's record opens beside its dot. */
.ul { margin: 40px 0 8px; }
.ul .figure.ul-fig { margin-top: 24px; }

.ul .figure { margin: 0; padding: 0; border: 1px solid var(--line-2); background: var(--bg); max-width: 666px; }
.ul .fig-head { padding: 18px 24px 0; }
.ul .figure .fig-title { margin: 6px 0 4px; font-family: var(--font-display); font-weight: 500; font-variation-settings: var(--opsz-title); font-size: var(--t-lead); line-height: 1.27; letter-spacing: -0.008em; text-wrap: balance; color: var(--ink); }
.ul .fig-sub { margin: 0; font-family: var(--font-body); font-size: var(--t-small); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.ul .fig-body { padding: 16px 24px 14px; }
.ul .fig-strip { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 24px; row-gap: 2px; margin: 0 24px; padding: 2px 0 16px; font-family: var(--font-ui); font-size: var(--ui-s); line-height: 18px; color: var(--muted); }
.ul .fig-strip > * { flex: 0 0 auto; max-width: 100%; min-width: 0; }
.ul .fig-strip > .fs-acts { display: flex; flex-wrap: nowrap; white-space: nowrap; }
.ul .fig-strip > .ch-cite-box { flex-basis: 100%; }
.ul .fig-strip a { color: var(--ink-2); text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.ul .fig-strip a:hover { color: var(--ink); text-decoration-color: var(--accent); }
.ul .fs-acts > a, .ul .fs-acts > button { font: inherit; color: var(--ink-2); background: none; border: 0; padding: 3px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; }
.ul .fs-acts > * + *::before { content: "\00b7"; display: inline-block; width: 17px; text-align: center; color: var(--muted); }
.ul .fs-acts > a:hover, .ul .fs-acts > button:hover { color: var(--accent-ink); text-decoration-color: var(--accent); }
.ul .fs-acts > [aria-pressed="true"] { color: var(--accent-ink); text-decoration-color: var(--accent); }
.ul .ch-cite-box { margin: 6px 0 0; padding: 10px 14px; border-left: 2px solid var(--accent); background: var(--bg-2); }
.ul .ch-cite-text { margin: 0; font-family: var(--font-body); font-size: var(--t-note); line-height: 1.5; color: var(--ink); }
.ul .ch-cite-text a { font-family: var(--font-code); font-size: 12.5px; overflow-wrap: anywhere; }
.ul .ch-cite-copy { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--accent-ink); background: none; border: 0; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 760px) {
  .ul .figure { margin: 0 calc(-1 * var(--margin)); border-left: 0; border-right: 0; }
  .ul .fig-head { padding: 16px var(--margin) 0; }
  .ul .fig-body { padding: 14px var(--margin) 12px; }
  .ul .fig-strip { margin: 0 var(--margin); }
  .ul .fig-strip > .fs-acts { flex-wrap: wrap; }
  .ul .figure .fig-title { font-size: var(--t-text); line-height: 1.3; }
}

/* the key, above the ladder */
.ul-key { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 4px; font-family: var(--font-ui); font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
.ul-key span { display: inline-flex; align-items: center; gap: 7px; }
.ul-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.ul-key i.n { background: var(--accent); }
.ul-key i.m { background: var(--muted); }
.ul-key i.l { width: 16px; height: 11px; border-radius: 0; background: var(--ctx); }
.ul-key i.c { width: 16px; height: 11px; border-radius: 0; background: var(--ctx) repeating-linear-gradient(135deg, transparent 0 3px, var(--rule-ink) 3px 4px); opacity: 0.9; }

/* the ladder: one row for each move */
.ul ol.ul-ladder { list-style: none; margin: 0; padding: 0; }
.ul ol.ul-ladder li.ul-row { margin: 0; padding: 18px 0 14px; border-top: 1px solid var(--line); }
.ul ol.ul-ladder li.ul-row::before { content: none; display: none; }
.ul ol.ul-ladder li.ul-row:first-child { border-top: 0; padding-top: 12px; }
.ul-rh { margin: 0 0 8px; font-family: var(--font-ui); font-size: 14px; line-height: 20px; color: var(--ink); text-wrap: pretty; }
.ul-rh b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ul-rk { margin: 0 8px 0 6px; color: var(--muted); }
.ul-rk::before { content: "· "; }
.ul-track { position: relative; }
.ul-track svg { display: block; width: 100%; height: auto; overflow: visible; }
.ul-rn { margin: 6px 0 0; font-family: var(--font-body); font-size: var(--t-small); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.ul-axis { margin: 4px 0 0; font-family: var(--font-ui); font-size: 12.5px; line-height: 18px; color: var(--ink-2); text-align: right; }

/* the drawing */
.ul-lane.lic { fill: var(--ctx); opacity: 0.5; }
.ul-lane.case { opacity: 1; }
.ul-hatch { stroke: var(--rule-ink); stroke-width: 1; opacity: 0.6; }
.ul-sep { stroke: var(--bg); stroke-width: 2; }
.ul-base { stroke: var(--ink); stroke-width: 1; }
.ul-ln { font-family: var(--font-ui); font-size: 11.5px; fill: var(--ink-2); }
.ul-ln.lic, .ul-ln.case { fill: var(--ink); font-weight: 600; }
.ul-tl { stroke: var(--ink); stroke-width: 1.4; }
.ul-tl.m { stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 4 3; }
.ul-tv { font-family: var(--font-ui); font-size: 12px; fill: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ul-tv.m { font-weight: 400; fill: var(--ink-2); }
.ul-inset .ul-tv { font-weight: 400; fill: var(--muted); font-size: 11.5px; }
.ul-inset .ul-tv.m { fill: var(--ink-2); font-weight: 600; }
.ul-inset .axis { stroke: var(--ink-2); stroke-width: 1; }
.ul-inset .lead { fill: none; stroke: var(--rule-ink); stroke-width: 1; stroke-dasharray: 2 3; }
.ul-arrow line, .ul-arrow path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ul-cut { font-family: var(--font-ui); font-size: 11.5px; font-weight: 500; fill: var(--accent-ink); paint-order: stroke; stroke: var(--bg); stroke-width: 3.5px; stroke-linejoin: round; font-variant-numeric: tabular-nums; }
.ul-dot { cursor: pointer; outline: none; }
.ul-dot .hit { fill: transparent; }
.ul-dot .d { fill: var(--muted); stroke: var(--bg); stroke-width: 1.5; }
.ul-dot.named .d { fill: var(--accent); }
.ul-dot .ring { fill: none; stroke: var(--ink); stroke-width: 1.4; opacity: 0; }
.ul-dot.on .ring, .ul-dot:focus-visible .ring { opacity: 1; }
.ul-lab { font-family: var(--font-ui); paint-order: stroke; stroke: var(--bg); stroke-width: 3.5px; stroke-linejoin: round; pointer-events: none; }
.ul-lab .nm { fill: var(--accent-ink); font-weight: 700; font-size: 13px; }
.ul-lab .ot { fill: var(--ink-2); font-size: 12px; }
.ul-lab .num { fill: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.ul .ul-dot, .ul .ul-lab, .ul .ul-arrow, .ul .ul-cut { transition: opacity 160ms linear; }
.ul.is-hot .ul-dot:not(.on), .ul.is-hot .ul-lab:not(.on), .ul.is-hot .ul-arrow:not(.on) { opacity: 0.3; }

/* a chip's record, beside its dot */
.ul .fig-body { position: relative; }
.ul-rec { position: absolute; z-index: 5; width: 250px; max-width: calc(100% - 8px); padding: 12px 14px; background: var(--bg); border: 1px solid var(--line-2); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
.ul-rec[hidden] { display: none; }
.ul-rec .h { margin: 0 0 8px; font-family: var(--font-display); font-weight: 500; font-variation-settings: var(--opsz-title); font-size: 16px; line-height: 1.3; color: var(--ink); }
.ul-rec dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 0 0 8px; font-family: var(--font-ui); font-size: 13px; line-height: 18px; }
.ul-rec dt { color: var(--muted); }
.ul-rec dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.ul-rec a { font-family: var(--font-ui); font-size: 13px; color: var(--ink-2); text-underline-offset: 3px; }

/* the Table in place of the ladder */
.ul .figure.is-table .ul-ladder, .ul .figure.is-table .ul-key, .ul .figure.is-table .ul-axis, .ul .figure.is-table .ul-rec { display: none; }
.ul .figure.is-table table.fig-table { position: static; width: 100%; height: auto; margin: 0; clip: auto; clip-path: none; overflow: visible; white-space: normal; border-collapse: collapse; font-family: var(--font-ui); font-size: 13px; line-height: 18px; }
.ul .figure.is-table table.fig-table caption { display: none; }
.ul .figure.is-table table.fig-table th, .ul .figure.is-table table.fig-table td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; vertical-align: top; color: var(--ink); }
.ul .figure.is-table table.fig-table thead th { color: var(--muted); font-size: 12px; border-bottom-color: var(--ink); }
.ul .figure.is-table table.fig-table td { font-variant-numeric: tabular-nums; }
.ul .figure.is-table .fig-body { overflow-x: auto; }
@media (prefers-reduced-motion: reduce) { .ul .ul-dot, .ul .ul-lab, .ul .ul-arrow, .ul .ul-cut { transition: none; } }

/* on paper: the ladder as it stands; no actions or record */
@media print {
  .ul .figure { break-inside: avoid; }
  .ul .fs-acts, .ul .ch-cite-box, .ul-rec { display: none !important; }
  .ul .figure { margin: 0 !important; border: 0; border-top: 0.6pt solid var(--ink); max-width: 666px; }
  .ul .fig-head, .ul .fig-body { padding-left: 0; padding-right: 0; }
  .ul .fig-strip { margin: 0; }
  .ul ol.ul-ladder li.ul-row { break-inside: avoid; }
}


/* module: walk.css */
/* ==========================================================================
   The home page (#/, the Start here walk) in the redesign of 25 Oct 2026 (qa/redesign/BRIEF.md), its hero set back to the
   home's structure before the redesign on 27 Oct 2026 (qa/redesign/stage-home.md), in the redesign's type and colors.
   Tokens only; every class is prefixed wk-.
   The hero: the title and subtitle, the read's counts, then the chain at a glance (a sentence on how many stages are rated
   Extreme and the stages one row each, whose meter picks the specimen on the stage beside it). Then the walk (one plain
   paragraph per chapter, each number in the ledger column), the flashcards and Other pages.
   ========================================================================== */

/* ---------- the hero: on the text column's edge, so the stage numbers hang in the ledger column, as the walk's do ---------- */
.wk { padding-bottom: 30px; }
.wk-head { padding: clamp(36px, 7vh, 72px) 0 0; margin-left: calc(var(--gutter) + var(--gutter-gap)); }
.wk-title {
  font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--opsz-title);
  font-size: var(--fs-d1); line-height: 1.02; letter-spacing: -0.02em;
  text-transform: none; margin: 0 0 0 -0.04em; color: var(--ink);
}
/* between a phone and a wide screen the text column is about 45 percent of the window: the title takes one line there too */
@media (min-width: 901px) and (max-width: 1199px) { .wk-title { font-size: min(var(--fs-d1), 4.2vw); } }
.wk-dek { font-family: var(--font-body); font-weight: 400; font-size: var(--t-lead); line-height: 1.4; color: var(--ink-2); max-width: 30em; margin: 14px 0 0; text-wrap: balance; }
/* the read's counts, as a chapter's facts line is set: the label's capitals in the muted ink, a dot between, the first on each line without one */
.wk-meta { display: flex; flex-wrap: wrap; align-items: baseline; margin: 14px 0 0 -18px; clip-path: inset(0 0 0 18px); }
.wk-meta .label { font-family: var(--font-kicker); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: var(--tt-label); line-height: 20px; color: var(--muted); white-space: nowrap; }
.wk-meta .label::before { content: "\00b7"; display: inline-block; width: 18px; text-align: center; color: var(--muted); }

/* ---------- the chain at a glance ----------
   An ink rule, the kicker, the sentence, then a row per stage between hairlines: the name (a link) and, at the row's end,
   the band's meter and word (a button that picks the specimen). The number hangs in the ledger column, right-set where
   the walk's numbers are; it belongs to the link, so it takes the reader to the chapter too. Extreme is wine, its meter and
   its word, as on the live site (the visual pass of 27 Oct 2026); High the lighter tint. The row whose specimen is showing
   (.is-shown) is the reader's selection: a paper tint across the row, its hanging number included, the number in wine. */
.wk-gl { margin: 32px 0 0; }
.wk-gl-h { display: block; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--ink); }
.wk-gl-p { margin: 6px 0 16px; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.wk-gl-p b { color: var(--ink); font-weight: 600; }
.wk-gl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.wk-gl-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
.wk-gl-list li + li { border-top: 1px solid var(--line); }
.wk-gl-a {
  display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr); column-gap: var(--gutter-gap); align-items: baseline;
  margin-left: calc(-1 * (var(--gutter) + var(--gutter-gap))); min-height: 32px; padding: 5px 16px 6px 0;
  color: var(--ink); text-decoration: none;
}
.wk-gl-n { padding-right: 14px; text-align: right; font-family: var(--font-ui); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wk-gl-t { font-family: var(--font-display); font-weight: 500; font-variation-settings: var(--opsz-title); font-size: var(--t-text); line-height: 1.3; text-wrap: wrap; }
.wk-gl-a:hover .wk-gl-t, .wk-gl-a:focus-visible .wk-gl-t { color: var(--accent-ink); }
/* the stage's first three firms, on a quiet line under its name (29 Oct 2026) */
.wk-gl-lead { display: block; margin: 2px 0 0; font-family: var(--font-ui); font-size: 13px; line-height: 1.3; font-weight: 400; font-variation-settings: normal; letter-spacing: 0; color: var(--muted); }
.wk-gl-lead .f { white-space: nowrap; }
.wk-gl-a:hover .wk-gl-lead, .wk-gl-a:focus-visible .wk-gl-lead { color: var(--ink-2); }
.wk-gl-a:focus-visible { outline-offset: -2px; }
/* the button fills the row's height, so the whole end of the row picks; its meter and word sit on the name's first line */
.wk-gl-c { display: inline-flex; align-items: center; align-content: flex-start; flex-wrap: wrap; gap: 9px; padding: 9px 0 0 12px; font-family: var(--font-ui); font-size: 13px; line-height: 16px; color: var(--muted); text-align: left; cursor: pointer; }
.wk-gl-c:focus-visible { outline-offset: -2px; }
.wk-gl-m { --mh: 14px; --mw: 5px; --mg: 2px; } /* the band's meter (src/modules/chapter.css .meter), at the size it was drawn here first */
.wk-gl-w { min-width: 4.6em; }
.wk-gl-list li[data-level="4"] .wk-gl-w { color: var(--accent-ink); font-weight: 600; }
.wk-gl-list li.is-shown { background: var(--bg-2); }
@media (min-width: 901px) { .wk-gl-list li.is-shown { box-shadow: calc(-1 * (var(--gutter) + var(--gutter-gap))) 0 0 var(--bg-2); } } /* the tint reaches the number in the ledger column */
.wk-gl-list li.is-shown .wk-gl-n { color: var(--accent-ink); font-weight: 600; }
.wk-gl-list li.is-shown .wk-gl-t { font-weight: 600; }
.wk-gl-list li.is-shown .wk-gl-lead { font-weight: 400; color: var(--ink-2); }

/* ---------- the walk: the ledger column ---------- */
.wk-list { list-style: none; margin: clamp(80px, 13vh, 120px) 0 0; padding: 0; }
.wk-step {
  display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr); gap: 0 var(--gutter-gap);
  scroll-margin-top: calc(var(--masthead) + 66px);
}
.wk-block { min-width: 0; padding: 0 0 64px; }

.wk-mark { position: relative; }
.wk-mark::before { /* the hairline: one segment per step, joined into a continuous rule */
  content: ""; position: absolute; right: 0; top: 0; height: 100%; width: 1px; background: var(--line-2);
}
.wk-list .wk-step:last-child .wk-mark::before { height: 26px; }
.wk-n { /* the number is the mark: the display face, light, large */
  position: absolute; right: 14px; top: -12px;
  font-family: var(--font-display); font-weight: 360; font-variation-settings: var(--opsz-numeral);
  font-size: var(--fs-num-m); line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums; color: var(--muted);
}
.wk-step.is-past .wk-mark::before { background: var(--ink-2); }
.wk-step.is-here .wk-mark::before { background: linear-gradient(to bottom, var(--accent) var(--wk-fill, 0%), var(--line-2) var(--wk-fill, 0%)); }
.wk-step.is-past .wk-n { color: var(--ink-2); }
.wk-step.is-here .wk-n { color: var(--accent-ink); }

/* ---------- the walk: one block ---------- */
.wk-where { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 10px; }
.wk-t {
  font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--opsz-title);
  font-size: var(--t-section); line-height: 1.1; letter-spacing: -0.01em;
  margin: 0 0 16px; max-width: 15em;
}
.wk-p { max-width: var(--measure); line-height: 1.62; margin: 0 0 18px; }

.wk-leaders {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 11px;
  max-width: var(--measure); margin: 0 0 16px;
  font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2);
}
.wk-leaders .label { flex: 0 0 auto; }
.wk-lead { font-weight: 500; color: var(--ink); }
.wk-lead .chip { width: auto; margin: 0 0 0 3px; padding: 0; border: 0; font-family: var(--font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; color: var(--muted); vertical-align: baseline; } /* the country code as plain tracked capitals, no box; the markup already carries a literal space */
.wk-sep { font-style: normal; color: var(--line-2); }

.wk-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px;
  max-width: var(--measure); padding-top: 12px; border-top: 1px solid var(--line);
}
.wk-score {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-ui); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.wk-sc { display: inline-flex; align-items: center; gap: 8px; }
.wk-sc .meter { --mh: 13px; --mw: 4px; --mg: 1.5px; } /* the band's meter, beside its word (src/modules/chapter.css .meter) */
.wk-sc > b { color: var(--ink); font-weight: 500; font-size: 14px; }
.wk-read {
  margin-left: auto; font-family: var(--font-ui); font-weight: 500;
  font-size: 15px; letter-spacing: 0; white-space: nowrap; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--ink); padding: 3px 0 2px;
}
.wk-read::after { content: "\00a0\2192"; }
/* Read the chapter, the Concentration tag and each source link take a fingertip: an invisible box at least 24 px tall,
   centered on the control */
.wk-read, .wk-score-term, .wk-facts .wk-src { position: relative; }
.wk-read::before, .wk-score-term::before, .wk-facts .wk-src::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 24px); height: max(100%, 26px); transform: translate(-50%, -50%);
}
.wk-facts .wk-src::before { width: calc(100% + 12px); height: 32px; } /* a fingertip's target round a short link */
.wk-read:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }

.wk-pn { display: none; }

/* ---------- the walk: the end, Other pages (its own ink rule opens it) ---------- */
.wk-tabs { display: block; margin: 30px 0 4px; padding: 0; background: none; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line-2); border-radius: 0; }
.wk-tabs-k { margin: 0; padding: 12px 0 10px; border-bottom: 1px solid var(--line); }
.wk-tabs a { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 0 20px; align-items: baseline; min-width: 0; padding: 12px 0 13px; border-top: 1px solid var(--line); color: var(--ink-2); text-decoration: none; }
.wk-tabs a:first-of-type { border-top: 0; }
.wk-tabs .wk-tab { display: block; font-family: var(--font-display); font-weight: 500; font-variation-settings: var(--opsz-title); font-size: var(--t-text); line-height: 1.2; padding: 0; margin: 0; border: 0; border-radius: 0; color: var(--ink); background: none; transition: color 0.15s; }
.wk-tabs .wk-tab::after { content: "\00a0\2192"; font-weight: 400; color: var(--muted); }
.wk-tabs a:hover .wk-tab, .wk-tabs a:focus-visible .wk-tab { background: none; color: var(--accent-ink); }
.wk-tabs a:hover .wk-tab::after { color: var(--accent-ink); }
.wk-tabs span { display: block; font-size: var(--fs-small); line-height: 1.5; }
.wk-end { max-width: var(--measure); margin-left: calc(var(--gutter) + var(--gutter-gap)); }
.wk-end .wk-tabs { margin: 0; }

/* ---------- the walk: the flashcards after the last step ----------
   The chapter decks' component and look (styles.css .review, .fc-*), set in the walk's text column. A chapter's deck sits in
   .prose, which gives its title the heading type; here the title takes the same type directly. */
.wk-deck { max-width: var(--measure); margin: 0 0 56px calc(var(--gutter) + var(--gutter-gap)); }
.wk-deck .review { margin-top: 6px; }
.wk-deck .rv-title {
  font-family: var(--font-display); font-weight: 400; font-variation-settings: var(--opsz-title); letter-spacing: -0.01em;
  font-size: var(--t-section); line-height: 1.15; margin: 0.55em 0 0.2em;
}
/* ten dots leave a phone no room for both step links beside them, so the links move under the dots, each on one line */
.wk-deck .fc-nav { flex-wrap: wrap; row-gap: 2px; }
.wk-deck .fc-steps .fc-link { white-space: nowrap; }
@media (max-width: 900px) { .wk-deck { margin-left: 0; margin-bottom: 40px; } }

/* ---------- the progress rail ---------- */
.wk-rail {
  position: fixed; left: 0; top: var(--masthead); z-index: 30; width: var(--col);
  padding: 8px clamp(16px, 4vw, 56px) 9px var(--margin);
  background: var(--bg); border-bottom: 1px solid var(--line);
  transform: translateY(-110%); opacity: 0; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.wk-rail[data-show="1"] { transform: none; opacity: 1; }
.wk-rail-bar { height: 2px; background: var(--line); border-radius: 0; overflow: hidden; }
.wk-rail-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.15s linear; }
.wk-rail-line { display: flex; gap: 12px; align-items: baseline; margin: 6px 0 0; font-family: var(--font-ui); font-size: 13px; letter-spacing: 0; color: var(--muted); }
.wk-rail-n { flex: 0 0 auto; font-family: var(--font-ui); font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.wk-rail-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- start here: the landing-page chooser (START_HERE, not placed on the page today) ---------- */
.wk-sh { border-top: 1px solid var(--line); padding: 15px 0 20px; }
.wk-sh-h { display: block; margin: 0 0 11px; }
.wk-sh-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px 14px; margin: 0; padding: 0; }
.wk-sh-list li { display: flex; flex-direction: column; min-width: 0; }
.wk-sh-item { flex: 1 1 auto; display: block; text-decoration: none; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: none; padding: 10px 0 11px; transition: border-color 0.15s; }
.wk-sh-item:hover { border-top-color: var(--ink); background: none; }
.wk-sh-t { display: block; font-family: var(--font-display); font-weight: 500; font-variation-settings: var(--opsz-title); font-size: var(--t-text); line-height: 1.2; letter-spacing: 0; margin: 0 0 4px; text-wrap: balance; }
.wk-sh-t::after { content: "\00a0\2192"; color: var(--muted); font-weight: 400; }
.wk-sh-item:hover .wk-sh-t { color: var(--accent-ink); }
.wk-sh-d { display: block; font-size: var(--t-note); line-height: 1.38; color: var(--ink-2); }
.wk-sh-more { align-self: flex-start; margin-top: 6px; font-family: var(--font-ui); font-weight: 500; font-size: 13px; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.wk-sh-more:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }
.wk-sh-more::after { content: "\00a0\2192"; }

/* ---------- the walk: sourced facts ---------- */
.wk-facts { list-style: none; margin: 10px 0 6px; padding: 8px 0 6px 16px; border-left: 1px solid var(--line-2); max-width: var(--measure); }
.wk-facts li { font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); margin: 0 0 7px; }
.wk-facts .wk-src { font-family: var(--font-ui); font-weight: 500; font-size: 12.5px; letter-spacing: 0; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; margin-left: 6px; white-space: nowrap; }
.wk-facts .wk-src::after { content: "\00a0\2197"; }
.wk-facts .wk-src:hover { color: var(--accent-ink); text-decoration-color: var(--accent); }

@media (max-width: 1100px) {
  .wk-tabs a { grid-template-columns: 150px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .wk-sh-list { grid-template-columns: 1fr; gap: 8px; }
  .wk-sh-t { font-size: var(--t-small); }
}

/* ---------- phones: one column; the specimen is the strip at the foot of the screen ---------- */
@media (max-width: 900px) {
  /* the hero as the home set it on a phone before the redesign: flush with the text, the title on one line, the stage
     numbers in the 34 px ledger column inside the rules, and a long name breaking into two even lines */
  .wk-head { margin-left: 0; padding-top: 28px; }
  .wk-title { font-size: min(46px, 9vw); line-height: 1.08; letter-spacing: -0.015em; } /* one line from 320 px; larger on a tablet */
  .wk-dek { font-size: var(--t-text); margin-top: 10px; }
  .wk-meta { margin-top: 12px; }
  .wk-gl { margin-top: 24px; }
  .wk-gl-h { padding-top: 10px; }
  .wk-gl-p { margin: 5px 0 12px; font-size: var(--fs-small); line-height: 1.45; }
  .wk-gl-a { margin-left: 0; min-height: 36px; padding: 7px 10px 6px 0; }
  .wk-gl-n { padding-right: 8px; } /* right-set where the walk's numbers are */
  .wk-gl-t { font-size: var(--t-small); }
  .wk-gl-lead { font-size: 12.5px; }
  .wk-gl-c { gap: 7px; padding: 10px 0 0 6px; font-size: 12.5px; }
  .wk-gl-w { min-width: 4.3em; }

  .wk-list { margin-top: 64px; }
  .wk-step { scroll-margin-top: calc(var(--masthead) + 60px); }
  .wk-block { padding-bottom: 40px; }
  .wk-n { display: block; right: 8px; top: -4px; font-size: 26px; }
  .wk-t { font-size: var(--t-block); max-width: none; }
  .wk-foot { gap: 10px 14px; }
  .wk-read { margin-left: 0; }
  .wk-end { margin-left: 0; }
  .wk-tabs a { grid-template-columns: 1fr; gap: 2px; }
  .wk-tabs .wk-tab { font-size: var(--t-small); }
  .wk-tabs span { font-size: var(--fs-small); }

  .wk-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 0; }
  .wk-pn a { display: block; min-width: 0; text-decoration: none; border: 1px solid var(--line-2); border-radius: 4px; background: none; padding: 9px 11px 10px; }
  .wk-pn a:hover { border-color: var(--ink); }
  .wk-pn .wk-next { text-align: right; }
  .wk-pn .label { display: block; margin-bottom: 3px; }
  .wk-pn-t { display: block; font-family: var(--font-display); font-weight: 500; font-variation-settings: var(--opsz-title); font-size: var(--t-small); line-height: 1.25; overflow-wrap: anywhere; }
}
@media (max-width: 380px) { /* a 360 px phone: a narrower meter and word keep most names on one line */
  .wk-gl-c { gap: 5px; font-size: 12px; }
  .wk-gl-m { --mw: 4px; }
  .wk-gl-w { min-width: 0; }
}
@media (max-width: 420px) {
  .wk-t { font-size: var(--t-block); }
  .wk-pn-t { font-size: var(--t-note); }
}
@media (prefers-reduced-motion: reduce) {
  .wk-rail { transition: none; }
}
@media print {
  .wk-rail, .wk-pn { display: none !important; }
  .wk-step { break-inside: avoid; }
}