/* ==========================================================================
   verifiable.pro: site stylesheet
   A publication that shows its receipts. Wherever a page could carry a
   generic module, it carries something a reader can check: the definition
   band and manifest line on the front, the "On the record" ledger with stack
   locators, the claim-check card, the verification record and the "Check our
   work" receipt. The recurring signs are the cinnabar seal square, a mono layer
   for every machine-checkable value, solid perforations for receipts, and an
   evidence vocabulary drawn in line styles. Newsreader + IBM Plex on a white
   page with graphite ink.
   Fonts come from the template's Google Fonts link (no @import):
   Newsreader 400/500/600 + italic 400, IBM Plex Sans 400/500/600,
   IBM Plex Mono 400/500. See DESIGN.md for the system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Paper and ink */
  --paper: #ffffff;
  --header-bg: #ffffff;
  --tint: #f4f5f6;
  --tint-2: #eceef0;
  --ink: #1b1d1f;
  --ink-strong: #0f1113;
  --ink-2: #4b5157;
  --ink-3: #61676d;
  --on-ink: #ffffff;

  /* Rules */
  --rule: #d9dcdf;
  --rule-soft: #e9ebed;
  --rule-strong: #1b1d1f;
  --hatch: #9aa1a8;

  /* Accent: cinnabar, the colour of a seal impression */
  --accent: #b3261e;
  --accent-strong: #8f1d17;
  --accent-wash: #fbefed;
  --accent-line: #e2a49e;
  --on-accent: #ffffff;
  --focus: #b3261e;
  --selection: #f5d3cf;
  --hl: #fff0a6;
  --hl-ink: #0f1113;

  /* Code wells */
  --code-bg: #f4f5f6;

  /* Footer: dark in both themes */
  --footer-bg: #17191b;
  --footer-ink: #d4d7da;
  --footer-ink-2: #9da3a9;
  --footer-link: #eef0f1;
  --footer-rule: #2f3337;
  --footer-edge: #17191b;
  --footer-chip: #1f2225;
  --footer-focus: #eef0f1;

  /* Mark: graphite tile, white V, seal-red square */
  --mark-tile: #1d2023;
  --mark-glyph: #ffffff;
  --mark-seal: #e2412f;
  --mark-tile-inverse: #e6e8ea;
  --mark-glyph-inverse: #141618;
  --mark-seal-inverse: #c8321f;

  /* Generated illustrations */
  --art-bg: #eef0f1;
  --art-grid: #dde0e3;
  --art-mute: #d4d8db;
  --art-ink: #262a2e;
  --art-paper: #ffffff;
  --art-faint: #bcc2c7;
  --art-accent: #b3261e;
  --art-text: #50565c;

  /* Topic hues: equal OKLCH lightness (0.56) and chroma (0.075), hues kept
     clear of the cinnabar accent. Swatches and rules only, never text. */
  --t-cc: #37837d; /* confidential computing: enclave teal */
  --t-vi: #776c9c; /* verifiable inference: proof violet */
  --t-fv: #57805a; /* formal verification: lemma green */
  --t-ea: #916d42; /* evaluations and audits: sample ochre */
  --t-sc: #797842; /* supply chain: manifest olive */
  --t-cp: #3c7e94; /* content provenance: credential steel */
  --t-aa: #906486; /* agent accountability: agent plum */
  --t-gc: #5776a0; /* compute governance: treaty slate */

  /* Trusted execution environments: a muted indigo, the colour of the TEE
     layers in the hero. It marks TEE coverage only (the TEE label, the stack's TEE
     lines, the TEE tier) and is never used for links, buttons or focus.
     --tee-ink is 8.2:1 on white and 7.2:1 on --tee-wash. */
  --tee-ink: #3f4a8a;
  --tee-wash: #eef0fa;
  --tee-rule: #b9bfe6;

  /* The hero's layer icons, one hue per layer, T7 to T1 (21.2). Each is at
     least 4.5:1 on white */
  --hl-institutions: #a15c07;
  --hl-evaluations: #6d3fd6;
  --hl-agents: #0b7f81;
  --hl-outputs: #c2255c;
  --hl-models: #1f5fd6;
  --hl-runtime: #4f46e5;
  --hl-hardware: #13803f;
  /* Completing the hero's exploration, never a security verdict. */
  --hero-complete-ink: #187143;
  /* SEPT Lab wordmark colour, from its current site's --accent. */
  --sept-brand: #990000;

  /* You, the person in the hero's scene (21.2): the coat and its shaded side, the trousers
     and theirs, and your data (the packets that travel the stack), in the coat's colour. The
     scene reads these, and keeps its own copy for when it stands alone. On light pages they
     are brighter and more saturated than on dark ones; the coat keeps 3:1 on white */
  --you-coat: #df7a00;
  --you-coat-2: #c2620a;
  --you-legs: #2f6fd0;
  --you-legs-2: #2457a8;
  --you-data: #df7a00;

  /* Print always sets ink on white, whatever the screen theme */
  --print-paper: #ffffff;
  --print-ink: #000000;
  --print-ink-2: #2b2b2b;
  --print-ink-3: #4a4a4a;
  --print-rule: #b8b8b8;
  --print-tint: #ececec;
  --print-mute: #d6d6d6;
  --print-accent: #9e1b12;

  /* Type families */
  --serif: "Newsreader", "Iowan Old Style", "Charter", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* One type scale, used everywhere:
     12 · 13 · 14 · 16 · 18 · 20 · 24 · 26–34 · 30–44 · 34–54 px */
  --fs-1: 0.75rem;
  --fs-2: 0.8125rem;
  --fs-3: 0.875rem;
  --fs-4: 1rem;
  --fs-5: 1.125rem;
  --fs-6: 1.25rem;
  --fs-7: 1.5rem;
  --fs-8: clamp(1.625rem, 1.3rem + 1.1vw, 2.125rem);
  --fs-9: clamp(1.875rem, 1.35rem + 2vw, 2.75rem);
  --fs-10: clamp(2.125rem, 1.4rem + 2.8vw, 3.375rem);

  --lh-tight: 1.1;
  --lh-head: 1.22;
  --lh-ui: 1.45;
  --track-title: -0.018em;
  --track-head: -0.008em;
  --track-label: 0.1em;
  --label-case: uppercase;

  /* Reading */
  --prose-font: var(--serif);
  --prose-size: var(--fs-5);
  --prose-lh: 1.62;
  --prose-track: 0;
  --measure: 35rem;

  /* Layout */
  --container: 1160px;
  --aside: 18.75rem;
  --col-gap: 3.5rem;
  --block-w: calc(var(--measure) + var(--col-gap) + var(--aside));
  --bleed-l: max(16px, env(safe-area-inset-left, 0px));
  --bleed-r: max(16px, env(safe-area-inset-right, 0px));
  --sticky-offset: 7rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111416;
    --header-bg: #111416;
    --tint: #191d20;
    --tint-2: #20252a;
    --ink: #e2e5e8;
    --ink-strong: #f3f5f6;
    --ink-2: #b3b9bf;
    --ink-3: #959ca3;
    --on-ink: #111416;
    --rule: #2b3035;
    --rule-soft: #22272b;
    --rule-strong: #9aa1a8;
    --hatch: #4e555c;
    --accent: #f07a6d;
    --accent-strong: #ff9a8f;
    --accent-wash: #2a1a18;
    --accent-line: #8a4038;
    --on-accent: #111416;
    --focus: #f07a6d;
    --selection: #5a2a25;
    --hl: #36310f;
    --hl-ink: #f3efd8;
    --code-bg: #191d20;
    --footer-bg: #0a0c0d;
    --footer-ink: #c9cdd1;
    --footer-ink-2: #8f969c;
    --footer-link: #e6e8ea;
    --footer-rule: #23272b;
    --footer-edge: #262b30;
    --footer-chip: #121517;
    --footer-focus: #e6e8ea;
    --mark-tile: #e6e8ea;
    --mark-glyph: #141618;
    --mark-seal: #c8321f;
    --mark-tile-inverse: #e6e8ea;
    --mark-glyph-inverse: #141618;
    --mark-seal-inverse: #c8321f;
    --art-bg: #171a1d;
    --art-grid: #23272b;
    --art-mute: #2a2f34;
    --art-ink: #a9b0b6;
    --art-paper: #20252a;
    --art-faint: #3c4248;
    --art-accent: #f07a6d;
    --art-text: #a0a6ac;
    --t-cc: #6eaca6;
    --t-vi: #a197c3;
    --t-fv: #85aa86;
    --t-ea: #b99872;
    --t-sc: #a2a273;
    --t-cp: #70a8bc;
    --t-aa: #b990af;
    --t-gc: #84a1c7;
    --tee-ink: #a9b1f0;
    --tee-wash: #1b1e33;
    --tee-rule: #3a4170;
    --hl-institutions: #e8b04b;
    --hl-evaluations: #b197fc;
    --hl-agents: #3cc6c8;
    --hl-outputs: #f783ac;
    --hl-models: #74a7ff;
    --hl-runtime: #9d97ff;
    --hl-hardware: #4cc77e;
    --hero-complete-ink: #6edb9a;
    --sept-brand: #ff9b9b;
    --you-coat: #e09a45;
    --you-coat-2: #c27f2e;
    --you-legs: #7e9cc7;
    --you-legs-2: #6a87b0;
    --you-data: #f0a24a;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #111416;
  --header-bg: #111416;
  --tint: #191d20;
  --tint-2: #20252a;
  --ink: #e2e5e8;
  --ink-strong: #f3f5f6;
  --ink-2: #b3b9bf;
  --ink-3: #959ca3;
  --on-ink: #111416;
  --rule: #2b3035;
  --rule-soft: #22272b;
  --rule-strong: #9aa1a8;
  --hatch: #4e555c;
  --accent: #f07a6d;
  --accent-strong: #ff9a8f;
  --accent-wash: #2a1a18;
  --accent-line: #8a4038;
  --on-accent: #111416;
  --focus: #f07a6d;
  --selection: #5a2a25;
  --hl: #36310f;
  --hl-ink: #f3efd8;
  --code-bg: #191d20;
  --footer-bg: #0a0c0d;
  --footer-ink: #c9cdd1;
  --footer-ink-2: #8f969c;
  --footer-link: #e6e8ea;
  --footer-rule: #23272b;
  --footer-edge: #262b30;
  --footer-chip: #121517;
  --footer-focus: #e6e8ea;
  --mark-tile: #e6e8ea;
  --mark-glyph: #141618;
  --mark-seal: #c8321f;
  --mark-tile-inverse: #e6e8ea;
  --mark-glyph-inverse: #141618;
  --mark-seal-inverse: #c8321f;
  --art-bg: #171a1d;
  --art-grid: #23272b;
  --art-mute: #2a2f34;
  --art-ink: #a9b0b6;
  --art-paper: #20252a;
  --art-faint: #3c4248;
  --art-accent: #f07a6d;
  --art-text: #a0a6ac;
  --t-cc: #6eaca6;
  --t-vi: #a197c3;
  --t-fv: #85aa86;
  --t-ea: #b99872;
  --t-sc: #a2a273;
  --t-cp: #70a8bc;
  --t-aa: #b990af;
  --t-gc: #84a1c7;
  --tee-ink: #a9b1f0;
  --tee-wash: #1b1e33;
  --tee-rule: #3a4170;
  --hl-institutions: #e8b04b;
  --hl-evaluations: #b197fc;
  --hl-agents: #3cc6c8;
  --hl-outputs: #f783ac;
  --hl-models: #74a7ff;
  --hl-runtime: #9d97ff;
  --hl-hardware: #4cc77e;
  --hero-complete-ink: #6edb9a;
  --sept-brand: #ff9b9b;
  --you-coat: #e09a45;
  --you-coat-2: #c27f2e;
  --you-legs: #7e9cc7;
  --you-legs-2: #6a87b0;
  --you-data: #f0a24a;
  color-scheme: dark;
}

/* Chinese edition. The tokens sit on [lang] rather than .site so Chinese
   islands in English pages (the language switch, glossary equivalents) and
   English islands in Chinese pages pick up the right stacks.
   Body and UI put the CJK face first so full-width punctuation renders in it;
   headlines keep Newsreader for Latin and fall back to Songti / Noto Serif CJK,
   then Microsoft YaHei on Windows (never faux-bold SimSun). */
[lang="zh-CN"] {
  --serif: "Newsreader", "Iowan Old Style", Georgia, "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "Microsoft YaHei", serif;
  --sans: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", monospace;
  --cjk-serif: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "Newsreader", Georgia, "Microsoft YaHei", serif;
  --lh-tight: 1.3;
  --lh-head: 1.4;
  --lh-ui: 1.6;
  --track-title: 0;
  --track-head: 0;
  --track-label: 0.04em;
  --prose-font: var(--sans);
  --prose-size: 1.0625rem;
  --prose-lh: 1.9;
  --prose-track: 0.02em;
  --measure: 40.5rem;
}

[lang="en"] {
  --serif: "Newsreader", "Iowan Old Style", "Charter", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Topic assignment. Figures, thumbnails, tiles, cards and catalog groups carry
   data-topic or data-group; chips and kicker topics are links to the topic
   page, matched by their path until the template adds data-topic to them. */
[data-topic="confidential-computing"], [data-group="confidential-computing"],
a:is([href*="/confidential-computing/"], [href^="confidential-computing/"]) { --topic: var(--t-cc); --swatch: block; }
[data-topic="verifiable-inference"], [data-group="verifiable-inference"],
a:is([href*="/verifiable-inference/"], [href^="verifiable-inference/"]) { --topic: var(--t-vi); --swatch: block; }
[data-topic="formal-verification"], [data-group="formal-verification"],
a:is([href*="/formal-verification/"], [href^="formal-verification/"]) { --topic: var(--t-fv); --swatch: block; }
[data-topic="evaluation-audits"], [data-group="evaluation-audits"],
a:is([href*="/evaluation-audits/"], [href^="evaluation-audits/"]) { --topic: var(--t-ea); --swatch: block; }
[data-topic="supply-chain"], [data-group="supply-chain"],
a:is([href*="/supply-chain/"], [href^="supply-chain/"]),
[data-topic="provenance-supply-chain"], [data-group="provenance-supply-chain"],
a:is([href*="/provenance-supply-chain/"], [href^="provenance-supply-chain/"]) { --topic: var(--t-sc); --swatch: block; }
[data-topic="content-provenance"], [data-group="content-provenance"],
a:is([href*="/content-provenance/"], [href^="content-provenance/"]) { --topic: var(--t-cp); --swatch: block; }
[data-topic="agents-accountability"], [data-group="agents-accountability"],
a:is([href*="/agents-accountability/"], [href^="agents-accountability/"]) { --topic: var(--t-aa); --swatch: block; }
[data-topic="governance-compute"], [data-group="governance-compute"],
a:is([href*="/governance-compute/"], [href^="governance-compute/"]) { --topic: var(--t-gc); --swatch: block; }

/* Topic pages: the hue reaches the page head through the layout's data-topic */
.wrap:has(> .topic-layout[data-topic="confidential-computing"]) { --topic: var(--t-cc); }
.wrap:has(> .topic-layout[data-topic="verifiable-inference"]) { --topic: var(--t-vi); }
.wrap:has(> .topic-layout[data-topic="formal-verification"]) { --topic: var(--t-fv); }
.wrap:has(> .topic-layout[data-topic="evaluation-audits"]) { --topic: var(--t-ea); }
.wrap:has(> .topic-layout:is([data-topic="supply-chain"], [data-topic="provenance-supply-chain"])) { --topic: var(--t-sc); }
.wrap:has(> .topic-layout[data-topic="content-provenance"]) { --topic: var(--t-cp); }
.wrap:has(> .topic-layout[data-topic="agents-accountability"]) { --topic: var(--t-aa); }
.wrap:has(> .topic-layout[data-topic="governance-compute"]) { --topic: var(--t-gc); }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-4);
  line-height: var(--lh-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

.site {
  font-family: var(--sans);
  line-height: var(--lh-ui);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

main { display: block; flex: 1 0 auto; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul, pre { margin: 0; }
ol, ul { padding: 0; }
h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
strong, b, th { font-weight: 600; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a.ext { overflow-wrap: anywhere; }
code, kbd, samp { font-family: var(--mono); font-size: 0.9em; }
time, .count, .tile-count, .result-count { font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--selection); color: var(--ink-strong); }
[hidden] { display: none !important; }
/* Anchors, and focus that scrolls the page, stop below the sticky header */
html { scroll-padding-top: var(--sticky-offset); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.wrap {
  box-sizing: content-box;
  max-width: var(--container);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.skip-link {
  position: absolute;
  left: max(12px, env(safe-area-inset-left, 0px));
  top: -4rem;
  z-index: 100;
  padding: 0.65rem 0.95rem;
  background: var(--ink);
  color: var(--on-ink);
  font: 600 var(--fs-3)/1 var(--sans);
  text-decoration: none;
}
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 0.5rem); }

/* Visually hidden, kept for screen readers */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Headline links: graphite, underlined in the accent on hover */
:is(.lead-title, .card-title, .ledger-title, .river-title, .feature-title, .topic-card-title, .search-list) a,
.topic-tile h3 a {
  color: inherit;
  text-decoration: none;
}
:is(.lead-title, .card-title, .ledger-title, .river-title, .feature-title, .topic-card-title, .search-list) a:hover,
.topic-tile h3 a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.14em;
}

/* --------------------------------------------------------------------------
   3. Header: one row on desktop (a single-line wordmark set off by a hairline,
   sections left-aligned beside it); on phones a compact bar (brand, search,
   language) over a single scrollable row of sections. The active section is
   marked with the seal square.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  background: var(--header-bg);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand tools" "nav nav";
  align-items: center;
  column-gap: 0.75rem;
}

.brand {
  grid-area: brand;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  padding: 0.5rem 0;
  color: var(--ink-strong);
  text-decoration: none;
}

.mark { display: block; flex: none; width: 32px; height: 32px; }
.mark-bg { fill: var(--mark-tile); }
.mark-fg { fill: var(--mark-seal); }
.mark-fg-stroke { fill: none; stroke: var(--mark-glyph); }

/* Wordmark: Newsreader nameplate, the domain set in a muted italic */
.brand-name {
  font: 600 1.3125rem/1 var(--serif);
  letter-spacing: -0.012em;
  color: var(--ink-strong);
  white-space: nowrap;
}
.brand-tld {
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-3);
}

.site-nav {
  grid-area: nav;
  display: flex;
  justify-content: space-between;
  gap: 0.625rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin-left: calc(-1 * var(--bleed-l));
  margin-right: calc(-1 * var(--bleed-r));
  padding: 0 var(--bleed-r) 0 var(--bleed-l);
  border-top: 1px solid var(--rule-soft);
}
.site-nav::-webkit-scrollbar { display: none; }

.site-nav a {
  flex: none;
  padding: 0.75rem 0 0.625rem;
  border-bottom: 2px solid transparent;
  font: 500 var(--fs-3)/1 var(--sans);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--ink-strong); border-bottom-color: var(--rule); }
.site-nav a[aria-current="page"] {
  color: var(--ink-strong);
  font-weight: 600;
  border-bottom-color: transparent;
}
.site-nav a[aria-current="page"]::before {
  content: "";
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.42rem;
  vertical-align: 0.12em;
  background: var(--accent);
}
.site-nav a:focus-visible { outline-offset: -2px; }

.header-tools {
  grid-area: tools;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.search-link {
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  border: 1px solid transparent;
  color: var(--ink);
}
.search-link svg { display: block; }
.search-link:hover { background: var(--tint); }
.search-link[aria-current="page"] { border-color: var(--rule-strong); }

/* The light/dark toggle (site.js shows it): the moon offers dark, the sun light */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { background: var(--tint); }
.theme-toggle svg { display: block; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

.lang-switch {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--rule);
}
.lang-switch > * {
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 0.6rem;
  font: 500 var(--fs-2)/1 var(--sans);
}
.lang-current { background: var(--ink); color: var(--on-ink); font-weight: 600; }
.lang-switch a { color: var(--ink-2); text-decoration: none; }
.lang-switch a:hover { background: var(--tint); color: var(--ink-strong); }
.lang-switch a:focus-visible { outline-offset: 1px; }

/* --------------------------------------------------------------------------
   4. Footer: the content digest leads, set as a receipt line; below a
   perforation, three columns (read, contribute, machine-readable)
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: 5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--footer-edge);
  background: var(--footer-bg);
  color: var(--footer-ink);
  font-size: var(--fs-3);
  line-height: 1.55;
}
/* Rings and underlines that read on the dark ground in both themes */
.site-footer :focus-visible { outline-color: var(--footer-focus); }

.footer-analytics {
  padding: 0; border: 0; background: transparent; color: var(--footer-link);
  font: inherit; cursor: pointer; text-align: start;
}
.footer-analytics:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.analytics-choice {
  position: fixed; z-index: 46; left: 1rem; bottom: 1rem;
  width: min(34rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto;
  padding: 1.25rem; border: 1px solid var(--rule-strong); background: var(--paper);
  color: var(--ink); font: 400 var(--fs-3)/1.55 var(--sans);
}
.analytics-choice h2 { margin: 0 0 0.5rem; font: 600 1.125rem/1.3 var(--sans); }
.analytics-choice p { margin: 0.5rem 0; }
.analytics-choice a { color: var(--ink); text-underline-offset: 0.2em; }
.analytics-status { color: var(--ink-2); }
.analytics-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.analytics-actions button {
  min-height: 44px; flex: 1; padding: 0.5rem 1rem; border: 1px solid var(--rule-strong);
  background: var(--paper); color: var(--ink); font: 600 var(--fs-3)/1.4 var(--sans); cursor: pointer;
}
.analytics-actions button:hover { background: var(--tint); }
@media print { .analytics-choice, .footer-analytics { display: none !important; } }

.footer-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 3rem;
  padding-bottom: 1.9rem;
  margin-bottom: 2.25rem;
  border-bottom: 1px solid var(--footer-ink-2);
}
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }

.brand-footer { padding: 0; color: var(--footer-link); }
.brand-footer .mark { width: 32px; height: 32px; }
.brand-footer .mark-bg { fill: var(--mark-tile-inverse); }
.brand-footer .mark-fg { fill: var(--mark-seal-inverse); }
.brand-footer .mark-fg-stroke { stroke: var(--mark-glyph-inverse); }
.brand-footer .brand-name { color: var(--footer-link); font-size: 1.1875rem; }
.brand-footer .brand-tld { color: var(--footer-ink-2); }

.footer-brand p { margin-top: 0.9rem; max-width: 34ch; color: var(--footer-ink-2); }
.footer-brand .footer-credits { max-width: none; color: var(--footer-ink); font: 400 var(--fs-2)/1.5 var(--sans); --sept-brand: #ff9b9b; }
.footer-credits .sept-wordmark { color: var(--footer-link); font-weight: 600; white-space: nowrap; }
.footer-credits .sept-brand { color: var(--sept-brand); }
.footer-credits a { color: var(--footer-link); text-decoration-color: var(--footer-ink-2); text-underline-offset: 0.2em; }

.footer-build .footer-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.footer-build .footer-label::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--mark-seal-inverse);
}
.footer-digest { margin-top: 0.35rem; }
.footer-digest a { color: var(--footer-link); text-decoration: none; }
.footer-digest code {
  font: 400 var(--fs-6)/1.25 var(--mono);
  letter-spacing: 0.03em;
  color: var(--footer-link);
  overflow-wrap: anywhere;
}
.footer-digest a:hover code { text-decoration: underline; text-decoration-color: var(--footer-ink-2); text-underline-offset: 0.25em; }
.footer-build-text { margin-top: 0.6rem; max-width: 56ch; color: var(--footer-ink-2); }
.footer-build-text a { color: var(--footer-link); text-decoration: underline; text-decoration-color: var(--footer-rule); text-underline-offset: 0.2em; white-space: nowrap; }
.footer-build-text a:hover { text-decoration-color: var(--footer-link); }

.footer-col h2 {
  margin-bottom: 0.85rem;
  font: 600 var(--fs-1)/1.2 var(--sans);
  letter-spacing: var(--track-label);
  text-transform: var(--label-case);
  color: var(--footer-ink-2);
}
.footer-col ul { list-style: none; display: grid; gap: 0.5rem; }
.footer-col .ext-mark { color: var(--footer-ink-2); }
.footer-labelled { margin-top: 0.45rem; }
.footer-col a { color: var(--footer-link); text-decoration: none; }
.footer-col a:hover { text-decoration: underline; text-decoration-color: var(--footer-ink-2); text-underline-offset: 0.2em; }

.footer-label {
  display: block;
  margin-bottom: 0.15rem;
  font: 500 var(--fs-1)/1.3 var(--sans);
  letter-spacing: 0.06em;
  text-transform: var(--label-case);
  color: var(--footer-ink-2);
}
.email { font: 400 var(--fs-3)/1.4 var(--mono); color: var(--footer-link); overflow-wrap: anywhere; }

.footer-bottom {
  margin-top: 2.5rem;
  padding-bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px));
  font-size: var(--fs-2);
  color: var(--footer-ink-2);
}
.footer-bottom p { padding-top: 1.1rem; border-top: 1px solid var(--footer-rule); }

/* --------------------------------------------------------------------------
   5. Shared editorial pieces
   -------------------------------------------------------------------------- */

/* Kicker: kind in the accent, topic in quiet ink behind its hue swatch */
.kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.9rem;
  margin-bottom: 0.55rem;
  font: 600 var(--fs-1)/1.35 var(--sans);
  letter-spacing: var(--track-label);
  text-transform: var(--label-case);
}
.kicker .kind { color: var(--accent); text-decoration: none; }
a.kind:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.kicker .topic {
  font-weight: 500;
  font-size: var(--fs-2);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  text-decoration: none;
}
.kicker .topic::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.45rem;
  background: var(--topic, var(--ink-3));
}
.kicker a:focus-visible { outline-offset: 1px; }
.kicker .topic:hover { color: var(--ink-strong); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.2em; }

/* Dates: label in small capitals, value in mono */
.dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.1rem;
  font-size: var(--fs-2);
  color: var(--ink-2);
}
.date-item { white-space: nowrap; }
.date-label {
  font: 500 var(--fs-1)/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: var(--label-case);
  color: var(--ink-3);
}
:is(.dates, .dateline, .doc-details, .changes) time {
  font-family: var(--mono);
  font-size: var(--fs-2);
  letter-spacing: 0;
}

.byline { font: 500 var(--fs-3)/1.4 var(--sans); color: var(--ink-2); }

.read-more { font: 600 var(--fs-3)/1.4 var(--sans); }
.read-more a,
.block-more {
  color: var(--accent);
  text-decoration: none;
}
.read-more a:hover,
.block-more:hover {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Section heads: 2px graphite rule, small capitals, accent "see all" */
.block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 1.25rem;
  padding-top: 0.7rem;
  border-top: 2px solid var(--rule-strong);
}
.block-title {
  font: 600 var(--fs-2)/1.3 var(--sans);
  letter-spacing: var(--track-label);
  text-transform: var(--label-case);
  color: var(--ink-strong);
}
.block-more { font: 500 var(--fs-3)/1.3 var(--sans); white-space: nowrap; }
.block-dek {
  max-width: 68ch;
  margin: -0.4rem 0 1.4rem;
  font: 400 var(--fs-4)/1.5 var(--sans);
  color: var(--ink-2);
}

/* Chips: topics are outlined links with their hue swatch; evidence chips
   carry the seal square */
.chips,
.dd-chips dd,
.stack-topics { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  font: 500 var(--fs-2)/1.3 var(--sans);
  color: var(--ink-2);
  text-decoration: none;
}
a.chip::before {
  content: "";
  display: var(--swatch, none);
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--topic);
}
a.chip:hover { border-color: var(--ink-3); color: var(--ink-strong); }
.chip-evidence {
  border-color: transparent;
  background: var(--tint);
  font: 400 var(--fs-1)/1.35 var(--mono);
  color: var(--ink);
}
.chip-evidence::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--accent);
}

/* Generated illustrations: drawn from the source digest, coloured here */
.art { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.art .a-bg { fill: var(--art-bg); }
.art .a-grid { fill: none; stroke: var(--art-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.art .a-mute { fill: var(--art-mute); }
.art .a-ink { fill: var(--art-ink); }
.art .a-paper { fill: var(--art-paper); }
.art .a-stroke { fill: none; stroke: var(--art-ink); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.art .a-ink-stroke { fill: none; stroke: var(--art-ink); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.art .a-faint { fill: none; stroke: var(--art-faint); stroke-width: 1; vector-effect: non-scaling-stroke; }
.art .a-faint-dot { fill: var(--art-faint); }
.art .a-acc { fill: var(--art-accent); }
.art .a-acc-stroke { fill: none; stroke: var(--art-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.art .a-text { fill: var(--art-text); font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; }
/* The caption carries the digest, so the tag drawn inside the plate is
   hidden everywhere: once readable at full size, never at thumbnail size. */
.art .a-text,
.art rect.a-paper:has(+ .a-text) { display: none; }

.art-figure { min-width: 0; }
.art-figure > a { display: block; }
.art-figure .art { background: var(--art-bg); }

figcaption {
  margin-top: 0.6rem;
  font: 400 var(--fs-2)/1.5 var(--sans);
  color: var(--ink-3);
}
figcaption code {
  display: inline-block;
  margin-left: 0.15rem;
  padding: 0 0.3rem;
  background: var(--tint);
  font-size: var(--fs-1);
  line-height: 1.6;
  color: var(--ink-2);
  white-space: nowrap;
}

.thumb {
  display: block;
  overflow: hidden;
  background: var(--art-bg);
}
.thumb .art { width: 100%; height: 100%; aspect-ratio: auto; }
.thumb .a-grid { stroke-opacity: 0.55; }

/* Story cards: hairline column rules sit in the gutters; the row clips the
   rule left of each first column, so wrapping never leaves a stray rule */
.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.75rem 2.5rem;
  overflow: clip;
  overflow-clip-margin: 8px;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}
.card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.25rem;
  border-left: 1px solid var(--rule);
}
.card .thumb { aspect-ratio: 16 / 9; }
.card-body { min-width: 0; }
.card-title {
  font: 600 var(--fs-6)/1.25 var(--serif);
  letter-spacing: var(--track-head);
  color: var(--ink-strong);
}
.card-dek {
  margin-top: 0.5rem;
  font: 400 var(--fs-3)/1.55 var(--sans);
  color: var(--ink-2);
}
.card .kicker { margin-bottom: 0.4rem; }

/* Resources: compact three-column list on the front, a ledger elsewhere */
.resource-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  column-gap: 2.5rem;
}
.resource {
  min-width: 0;
  padding: 1rem 0 1.15rem;
  border-bottom: 1px solid var(--rule);
}
.resource:target { background: var(--hl); box-shadow: -0.5rem 0 0 var(--hl), 0.5rem 0 0 var(--hl); }
.resource-title { font: 600 var(--fs-4)/1.35 var(--sans); color: var(--ink-strong); }
.resource-title a { color: inherit; text-decoration: none; }
.resource-title a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
.ext-mark { display: inline-block; margin-left: 0.3em; font-weight: 400; color: var(--accent); }
.resource-meta {
  margin-top: 0.35rem;
  font: 400 var(--fs-1)/1.5 var(--mono);
  color: var(--ink-3);
}
.resource-checked {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.2rem;
  color: var(--ink-2);
}
/* The tick: the site checked that the link resolves, nothing more */
.resource-checked::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.3rem;
  margin-top: -0.2rem;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.resource-note {
  margin-top: 0.4rem;
  max-width: 64ch;
  font: 400 var(--fs-3)/1.5 var(--sans);
  color: var(--ink-2);
}
.resource .chips { margin-top: 0.65rem; }

.resource-list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); }

.empty {
  list-style: none;
  padding: 1rem 1.15rem;
  border: 1px solid var(--hatch);
  font: 400 var(--fs-3)/1.5 var(--sans);
  color: var(--ink-2);
}

.mini-label,
.mini-title,
.aside-title {
  font: 600 var(--fs-1)/1.3 var(--sans);
  letter-spacing: var(--track-label);
  text-transform: var(--label-case);
}

/* --------------------------------------------------------------------------
   6. Home
   -------------------------------------------------------------------------- */
/* Definition band: the site's one idea in dictionary form, and a mono
   ledger line (edition date, counts, manifest digest). The solid edge is
   the receipt perforation. */
.defn-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem 2.5rem;
  padding: 1.1rem 0 0.95rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--hatch);
}
.defn {
  max-width: 46rem;
  font: italic 400 var(--fs-5)/1.45 var(--serif);
  color: var(--ink-2);
}
.defn dfn { font-style: normal; font-weight: 600; color: var(--ink-strong); }
.defn-pos {
  margin: 0 0.5em 0 0.4em;
  font: 400 var(--fs-2)/1 var(--mono);
  font-style: normal;
  color: var(--ink-3);
}
.defn a {
  font: 600 var(--fs-3)/1.4 var(--sans);
  font-style: normal;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.defn a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 0.2em; }
.ledger-line {
  display: flex;
  flex-wrap: wrap;
  font: 400 var(--fs-1)/1.6 var(--mono);
  color: var(--ink-3);
}
.ledger-line > * { white-space: nowrap; }
.ledger-line > :not(:last-child)::after { content: "·"; margin: 0 0.55em; }
.ledger-line a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
.ledger-line a:hover { color: var(--accent); text-decoration-color: currentColor; }
.ledger-line code { font-size: inherit; color: var(--ink-strong); }

.home-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }

.lead-story { min-width: 0; container-type: inline-size; }
.lead-story .dates { margin-bottom: 0.85rem; }
.lead-title {
  font: 600 var(--fs-9)/var(--lh-tight) var(--serif);
  letter-spacing: var(--track-title);
  color: var(--ink-strong);
}
.lead-dek {
  margin-top: 0.9rem;
  max-width: 34em;
  font: 400 var(--fs-5)/1.5 var(--serif);
  color: var(--ink-2);
}
/* The lead ends on proof: the plate beside a claim-check card */
.lead-proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 1.4rem; }
.lead-proof .lead-art { margin-top: 0; }
.lead-story .read-more { margin-top: 1rem; }
@container (min-width: 620px) {
  .lead-proof { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
}

.claim-card { border-top: 2px solid var(--rule-strong); }
.claim-card > div {
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font: 400 var(--fs-3)/1.45 var(--sans);
}
.claim-card dt {
  padding-top: 0.1rem;
  font: 500 var(--fs-1)/1.4 var(--sans);
  letter-spacing: 0.06em;
  text-transform: var(--label-case);
  color: var(--ink-3);
}
.claim-card dd { min-width: 0; color: var(--ink); }
.claim-card .cc-evidence dd { display: flex; flex-wrap: wrap; gap: 0.3rem; }
/* "What we checked" reads as a quotation from the record, full width */
.claim-card .cc-checked { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
.claim-card .cc-checked dd { font: italic 400 var(--fs-4)/1.5 var(--serif); color: var(--ink-2); }
.claim-card .cc-digest { border-bottom: 1px solid var(--hatch); }
.claim-card .cc-digest code { font-size: var(--fs-2); color: var(--ink-strong); overflow-wrap: anywhere; }
/* The tombstone closes the card */
.claim-card .cc-digest dd::after {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.5rem;
  background: var(--accent);
}

.home-side { min-width: 0; }

/* "On the record": numbered briefs, each with a receipt line that places it
   on the verification stack */
.ledger-rail .block-head { margin-bottom: 0.15rem; }
.ledger { list-style: none; counter-reset: brief; }
.ledger-row {
  counter-increment: brief;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: 0.75rem;
  padding: 0.95rem 0 0.85rem;
  border-bottom: 1px solid var(--rule);
}
.ledger-row::before {
  content: counter(brief, decimal-leading-zero);
  grid-row: 1 / span 3;
  font: 500 var(--fs-2)/1.45 var(--mono);
  color: var(--accent);
}
.ledger-row > * { grid-column: 2; min-width: 0; }
.ledger-dates { font: 400 var(--fs-1)/1.45 var(--mono); color: var(--ink-3); }
/* a date never breaks inside itself ("2026年10月 / 20日") */
.ledger-dates time, .ledger-line time { white-space: nowrap; }
.ledger-title {
  margin-top: 0.2rem;
  font: 600 var(--fs-5)/1.28 var(--serif);
  letter-spacing: var(--track-head);
  color: var(--ink-strong);
}
.ledger-receipt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.85rem;
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--hatch);
  font: 400 var(--fs-1)/1.4 var(--mono);
  color: var(--ink-3);
}
.ledger-receipt code { font-size: inherit; color: var(--ink-2); }
.locator { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ink-2); }
.locator svg { display: block; flex: none; }
.locator .loc-off { fill: var(--rule); }
.locator .loc-on { fill: var(--accent); }

.home-side .check-strip { margin-top: 2rem; }

.home-block,
.stack-block { margin-top: 3.5rem; }
.home { padding-bottom: 0.25rem; }

/* Learn row: the entry point leads typographically, no filled box. The
   label repeats the "Start here" string the Learn page renders. */
.card-start { padding-top: 0.85rem; border-top: 2px solid var(--accent); }
.card-start::after {
  content: "Start here";
  order: -1;
  font: 600 var(--fs-1)/1.3 var(--sans);
  letter-spacing: var(--track-label);
  text-transform: var(--label-case);
  color: var(--accent);
}
.card-start:lang(zh-CN)::after { content: "从这里开始"; }
.card-start .kicker .kind { color: var(--ink-3); }
.card-start .card-title { font-size: var(--fs-8); line-height: 1.15; letter-spacing: var(--track-title); }
.card-start .card-dek { margin-top: 0.75rem; font: 400 var(--fs-5)/1.5 var(--serif); color: var(--ink-2); }
.card-learn:not(.card-start) .card-title,
.card-related .card-title { font-size: var(--fs-5); line-height: 1.3; }
.card-row-learn { align-items: start; }

/* Topics grid: each tile opens on its topic's hue rule */
.topic-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: 0 2rem;
}
.topic-tile {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.8rem 0 1.15rem;
  border-top: 3px solid var(--topic, var(--rule-strong));
}
.topic-tile h3 { font: 600 var(--fs-5)/1.28 var(--serif); color: var(--ink-strong); }
.topic-tile p { font: 400 var(--fs-3)/1.5 var(--sans); color: var(--ink-2); }
.topic-tile .tile-count,
.tile-count {
  margin-top: auto;
  padding-top: 0.3rem;
  font: 400 var(--fs-1)/1.3 var(--mono);
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   7. The verification stack: a ruled table, T7 (policy) to T1
   (hardware), each row with a locator showing its place in the stack
   -------------------------------------------------------------------------- */
.stack {
  list-style: none;
  counter-reset: layer 8;
  border-top: 1px solid var(--rule-strong);
}
.stack-layer {
  counter-increment: layer -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0.45rem;
  padding: 0.95rem 0 1rem;
  border-bottom: 1px solid var(--rule);
}
.stack-layer:nth-child(1) { --pos: 0; }
.stack-layer:nth-child(2) { --pos: 1; }
.stack-layer:nth-child(3) { --pos: 2; }
.stack-layer:nth-child(4) { --pos: 3; }
.stack-layer:nth-child(5) { --pos: 4; }
.stack-layer:nth-child(6) { --pos: 5; }
.stack-layer:nth-child(7) { --pos: 6; }
.stack-name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font: 600 var(--fs-5)/1.3 var(--serif);
  color: var(--ink-strong);
}
.stack-index {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 500 var(--fs-1)/1 var(--mono);
  color: var(--accent);
}
.stack-index::before { content: "L" counter(layer); min-width: 1.15rem; }
/* Seven strata, the current one in the accent */
.stack-index::after {
  content: "";
  width: 0.5625rem;
  height: 1.25rem;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 calc(var(--pos, 0) * 3px) / 100% 2px no-repeat,
    repeating-linear-gradient(to bottom, var(--rule) 0 2px, transparent 2px 3px);
}
.stack-claim {
  font: italic 400 var(--fs-4)/1.5 var(--serif);
  color: var(--ink-2);
}
.stack-claim-label {
  display: block;
  margin-bottom: 0.25rem;
  font: normal 600 var(--fs-1)/1.3 var(--sans);
  letter-spacing: var(--track-label);
  text-transform: var(--label-case);
  color: var(--ink-3);
}
/* The column label shows once, like a table head; screen readers keep it */
.stack-layer:not(:first-child) .stack-claim-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.stack-topics { align-content: start; }

/* --------------------------------------------------------------------------
   8. Page heads and breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumb { padding-top: 1.25rem; font: 400 var(--fs-2)/1.4 var(--sans); color: var(--ink-3); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.15rem 0; }
.breadcrumb li { display: inline-flex; align-items: baseline; min-width: 0; }
.breadcrumb li + li::before {
  content: "/";
  content: "/" / "";
  margin: 0 0.55rem;
  color: var(--rule);
}
.breadcrumb a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule); }
.breadcrumb a:hover { color: var(--accent); text-decoration-color: currentColor; }
/* The current page's title takes the rest of the line and ends in an
   ellipsis when it does not fit. It is a block box, as text-overflow needs */
.breadcrumb [aria-current="page"] {
  display: block;
  flex: 1 1 0;
  min-width: min(8rem, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 48ch;
}

.page-head {
  padding: 1.1rem 0 1.6rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--rule-strong);
}
.page-title {
  font: 500 var(--fs-10)/var(--lh-tight) var(--serif);
  letter-spacing: var(--track-title);
  color: var(--ink-strong);
}
.page-dek {
  margin-top: 0.85rem;
  max-width: 34em;
  font: 400 var(--fs-5)/1.5 var(--serif);
  color: var(--ink-2);
}
.page-head .kicker { margin-bottom: 0.7rem; }

/* --------------------------------------------------------------------------
   9. Latest: filter bar and the dated river
   -------------------------------------------------------------------------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
  font: 500 var(--fs-3)/1 var(--sans);
  color: var(--ink);
  cursor: pointer;
}
.filter-btn:hover:not(:disabled) { border-color: var(--ink); }
.filter-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.filter-btn:disabled { cursor: not-allowed; background: var(--tint); border-color: var(--rule-soft); border-style: solid; color: var(--ink-3); }
.filter-btn .count { font: 400 var(--fs-1)/1 var(--mono); color: var(--ink-3); }
.filter-btn[aria-pressed="true"] .count { color: inherit; opacity: 0.78; }

.river-groups { min-height: 40vh; }
.river-group + .river-group { margin-top: 2.75rem; }
.river-month {
  padding: 0.55rem 0 0.15rem;
  border-top: 2px solid var(--rule-strong);
  font: italic 400 var(--fs-7)/1.2 var(--serif);
  letter-spacing: -0.005em;
  color: var(--ink-strong);
}
.river { list-style: none; }
.river-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5rem;
  grid-template-areas: "date thumb" "body thumb";
  gap: 0.35rem 1rem;
  padding: 1.15rem 0 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.river-date { grid-area: date; font: 400 var(--fs-2)/1.4 var(--mono); color: var(--ink-3); }
.river-body { grid-area: body; min-width: 0; }
.river-item .thumb { grid-area: thumb; aspect-ratio: 1 / 1; align-self: start; }
.river-title {
  margin: 0.05rem 0 0.4rem;
  font: 600 var(--fs-6)/1.24 var(--serif);
  letter-spacing: var(--track-head);
  color: var(--ink-strong);
}
.river-dek { max-width: 64ch; font: 400 var(--fs-3)/1.55 var(--sans); color: var(--ink-2); }
.river-item .dates { margin-top: 0.55rem; }
.river .empty { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   10. Article
   Phones and tablets: one column. From 1024px the article is a centred block
   (reading measure + gutter + record column) so prose, callouts, the news
   plate and the record share edges; feature plates break out to a 21:9 band.
   -------------------------------------------------------------------------- */
.article-head {
  padding: 1rem 0 0;
  border-bottom: 2px solid var(--rule-strong);
}
.article-title {
  font: 500 var(--fs-10)/var(--lh-tight) var(--serif);
  letter-spacing: var(--track-title);
  color: var(--ink-strong);
}
.article-dek {
  margin-top: 0.9rem;
  max-width: 32em;
  font: 400 var(--fs-6)/1.45 var(--serif);
  color: var(--ink-2);
}

/* The meta line: byline, the dates and reading time between rules */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.5rem;
  margin-top: 1.4rem;
  padding: 0.7rem 0 0.75rem;
  border-top: 1px solid var(--rule);
  font: 400 var(--fs-3)/1.45 var(--sans);
  color: var(--ink-2);
}
.article-meta .byline { font-weight: 600; color: var(--ink-strong); }
.dateline { display: flex; flex-wrap: wrap; gap: 0.2rem 1.25rem; }
.dateline > div { display: flex; align-items: baseline; gap: 0.45rem; white-space: nowrap; }
.dateline dt,
.doc-details dt {
  font: 500 var(--fs-1)/1.3 var(--sans);
  letter-spacing: 0.06em;
  text-transform: var(--label-case);
  color: var(--ink-3);
}
.dateline dd { color: var(--ink); }
.reading-time { color: var(--ink-3); }
.translation-note {
  flex-basis: 100%;
  margin-top: 0.2rem;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--accent);
  background: var(--tint);
  font-size: var(--fs-2);
  color: var(--ink-2);
}
.translation-note a { color: var(--ink); text-decoration-color: var(--accent-line); text-underline-offset: 0.2em; }
.translation-note a:hover { color: var(--accent); }

.article-art { margin: 1.75rem 0 2.25rem; }

.article-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
.article-body { min-width: 0; }

/* Prose */
.prose {
  font-family: var(--prose-font);
  font-size: var(--prose-size);
  line-height: var(--prose-lh);
  letter-spacing: var(--prose-track);
  color: var(--ink);
  overflow-wrap: break-word;
}
.prose > * { max-width: var(--measure); }
.prose > * + * { margin-top: 1.05em; }
.prose > h2 {
  margin-top: 1.9em;
  font: 600 var(--fs-7)/1.22 var(--serif);
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}
.prose > h3 {
  margin-top: 1.7em;
  font: 600 var(--fs-5)/1.35 var(--sans);
  letter-spacing: 0;
  color: var(--ink-strong);
}
.prose > h4 {
  margin-top: 1.6em;
  font: 600 var(--fs-1)/1.4 var(--sans);
  letter-spacing: var(--track-label);
  text-transform: var(--label-case);
  color: var(--ink-2);
}
.prose > :is(h2, h3, h4) + * { margin-top: 0.55em; }
.prose > :first-child { margin-top: 0; }
.prose a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--accent-line); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.prose a:hover { color: var(--accent); text-decoration-color: currentColor; }
.prose ul,
.prose ol { padding-left: 1.35em; }
.prose ul { list-style-type: square; }
.prose li + li { margin-top: 0.4em; }
.prose li > ul,
.prose li > ol { margin-top: 0.4em; }
.prose li::marker { color: var(--ink-3); }
.prose ol > li::marker { font-family: var(--mono); font-size: 0.85em; }
.prose blockquote {
  padding-left: 1.1em;
  border-left: 2px solid var(--accent);
  font-style: italic;
  color: var(--ink-2);
}
.prose blockquote > * + * { margin-top: 0.8em; }
/* A section break: a hairline led by the seal square */
.prose hr {
  position: relative;
  height: 1px;
  margin: 2.4em 0;
  border: 0;
  background: var(--rule);
  overflow: visible;
}
.prose hr::after {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 9px;
  height: 9px;
  background: var(--accent);
}
.prose :not(pre) > code {
  padding: 0.08em 0.32em;
  background: var(--code-bg);
  font-size: 0.82em;
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}
.prose em { font-style: italic; }
.prose img { height: auto; }
.prose details {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.6rem 0;
  font-family: var(--sans);
  font-size: var(--fs-4);
}
.prose summary { cursor: pointer; font-weight: 600; color: var(--ink-strong); }
.prose details[open] summary { margin-bottom: 0.5rem; }
.prose figure > img,
.prose figure > svg { display: block; width: 100%; height: auto; }
.prose dl > div,
.prose dt { margin-top: 0.6em; }
.prose dt { font-family: var(--sans); font-weight: 600; font-size: 0.9em; color: var(--ink-strong); }
.prose dd { margin-left: 0; }

/* Explainers and guides open with a larger lede */
.kind-explainer .prose > p:first-child,
.kind-guide .prose > p:first-child {
  font-size: 1.1em;
  line-height: 1.55;
  color: var(--ink-strong);
}
/* Analysis opens with a two-line drop capital in the display cut */
.kind-analysis .prose > p:first-child::first-letter {
  float: left;
  margin: 0.06em 0.1em 0 0;
  font: 500 3.2em/0.84 var(--serif);
  color: var(--ink-strong);
}

/* Citations: [n] in mono, the number in the accent, matching the ledger */
sup.cite {
  margin-left: 0.08em;
  font: 400 max(0.62em, 0.75rem)/0 var(--mono);
  letter-spacing: 0;
  color: var(--ink-3);
  vertical-align: 0.55em;
}
.prose .cite-link,
.cite-link {
  padding: 0 0.05em;
  color: var(--accent);
  text-decoration: none;
}
.prose .cite-link:hover { text-decoration: underline; }

/* Callouts: the line style says what kind of statement it is.
   solid frame = reported facts; tint + heavy rule = our interpretation;
   ruled ledger = what we checked; solid = the boundary of a claim;
   hatched band = a hypothetical example; hairline = a note. */
.callout {
  position: relative;
  margin: 1.8em 0;
  padding: 0.95rem 1.15rem 1.05rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  font: 400 var(--fs-4)/1.6 var(--sans);
  letter-spacing: 0;
  color: var(--ink);
}
.prose > .callout { margin-top: 1.8em; }
.prose > .callout + * { margin-top: 1.8em; }
.callout-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.45rem;
  font: 600 var(--fs-1)/1.3 var(--sans);
  letter-spacing: var(--track-label);
  text-transform: var(--label-case);
  color: var(--ink-strong);
}
.callout-body > * + * { margin-top: 0.7em; }
.callout-body ul,
.callout-body ol { padding-left: 1.2em; }
.callout-body a { color: inherit; text-decoration-color: var(--accent-line); text-underline-offset: 0.2em; }
.callout-body a:hover { color: var(--accent); }

/* Key facts: reported, a solid frame */
.callout-facts { border-top: 3px solid var(--rule-strong); }
.callout-facts .callout-label::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--ink-strong);
}

/* Why it matters: our reading of the story, a tint with a heavy rule */
.callout-analysis {
  background: var(--tint);
  border: 0;
  border-left: 3px solid var(--rule-strong);
}
.callout-analysis .callout-label::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border: 1.5px solid var(--ink-strong);
  background: linear-gradient(to right, var(--ink-strong) 50%, transparent 50%);
}
.callout-analysis .callout-body { font: 400 var(--fs-5)/1.55 var(--serif); }

/* What we checked: ledger paper. Ruled lines at the body's line height, a
   red double margin rule, a tick, and the tombstone after the last line. */
.callout-checked {
  padding: 0.85rem 1.15rem 1rem 2.25rem;
  border: 1px solid var(--rule-strong);
  border-top-width: 3px;
  background:
    linear-gradient(var(--accent), var(--accent)) 0.95rem 0 / 1px 100% no-repeat,
    linear-gradient(var(--accent), var(--accent)) 1.2rem 0 / 1px 100% no-repeat,
    var(--paper);
}
.callout-checked .callout-label::before {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.38rem;
  margin: -0.2rem 0.05rem 0 0;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.callout-checked .callout-body {
  background: repeating-linear-gradient(to bottom, transparent 0 calc(1.6em - 1px), var(--rule) calc(1.6em - 1px) 1.6em);
}
.callout-checked .callout-body > *,
.callout-checked .callout-body li { margin: 0; }
.callout-checked .callout-body > * + * { margin-top: 1.6em; }

/* The tombstone: ends "What we checked" and the article's last block */
.callout-checked .callout-body > p:last-child::after,
.page-article .prose > p:has(+ :is(.sources, .changes))::after,
.page-article .prose > .callout:has(+ :is(.sources, .changes)) .callout-body > p:last-child::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.4em;
  background: var(--accent);
}

/* What this does not show: a solid boundary */
.callout-limits {
  background: transparent;
  border: 1px solid var(--ink-3);
}
.callout-limits .callout-label::before {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border: 1.5px solid var(--ink-strong);
  background: linear-gradient(to top right, transparent calc(50% - 0.75px), var(--ink-strong) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px));
}

/* Worked example (hypothetical): a hatched band, never mistaken for reporting */
.callout-example { padding-left: calc(1rem + 1.15rem); }
.callout-example::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1rem;
  border-right: 1px solid var(--rule);
  background: repeating-linear-gradient(135deg, var(--hatch) 0 1px, transparent 1px 6px);
}
.callout-example .callout-label { color: var(--ink-2); }

/* Disclosure: a relationship readers should weigh, set apart from the reporting */
.callout-disclosure {
  background: var(--tint);
  border: 0;
  border-left: 3px solid var(--accent);
}
.callout-disclosure .callout-label::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
}

/* Note */
.callout-note {
  padding: 0.1rem 0 0.1rem 1rem;
  border: 0;
  border-left: 1px solid var(--ink-3);
}

/* Worksheets: ruled form lines, square boxes that fill with the accent */
.prose .checklist {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--rule-strong);
}
.checklist .task {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  margin: 0;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  font: 400 var(--fs-4)/1.5 var(--sans);
  letter-spacing: 0;
}
.checklist .task > ul,
.checklist .task > ol { grid-column: 2; }
.checklist input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.17rem 0 0;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  cursor: pointer;
}
.checklist input::before {
  content: "";
  width: 0.6rem;
  height: 0.32rem;
  border-left: 2px solid var(--on-accent);
  border-bottom: 2px solid var(--on-accent);
  transform: translateY(-0.06rem) rotate(-45deg);
  opacity: 0;
}
.checklist input:checked { background: var(--accent); border-color: var(--accent); }
.checklist input:checked::before { opacity: 1; }
.checklist input:focus-visible { outline-offset: 2px; }
.checklist label { cursor: pointer; }
.checklist input:checked + label { color: var(--ink-2); }

/* Tables: booktabs. Heavy top and bottom rules, a light mid rule, mono
   column heads, tabular figures */
.table-wrap {
  margin: 1.9em 0;
  overflow-x: auto;
  border-top: 2px solid var(--rule-strong);
  border-bottom: 2px solid var(--rule-strong);
  -webkit-overflow-scrolling: touch;
}
.table-wrap:has(th:nth-child(4)) table { min-width: 34rem; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font: 400 var(--fs-3)/1.45 var(--sans);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
}
.prose th {
  padding: 0.7rem 1rem 0.55rem 0;
  border-bottom: 1px solid var(--rule-strong);
  font: 500 var(--fs-2)/1.3 var(--mono);
  letter-spacing: 0.01em;
  text-align: left;
  color: var(--ink-2);
  vertical-align: bottom;
}
.prose td {
  padding: 0.65rem 1rem 0.65rem 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
.prose tr:last-child td { border-bottom: 0; }
.prose td:first-child { font-weight: 600; color: var(--ink-strong); }
.prose th:last-child,
.prose td:last-child { padding-right: 0; }

/* Code */
.prose pre,
pre.code {
  margin-top: 1.4em;
  padding: 0.95rem 1.1rem;
  overflow-x: auto;
  background: var(--code-bg);
  border-left: 3px solid var(--rule-strong);
  font: 400 var(--fs-2)/1.6 var(--mono);
  letter-spacing: 0;
  color: var(--ink-strong);
  tab-size: 2;
  white-space: pre;
}
.prose pre code,
pre.code code { padding: 0; background: none; font-size: inherit; color: inherit; overflow-wrap: normal; }

/* Sources and changes: a double rule closes the story, then a numbered
   ledger whose [n] markers match the citations */
.sources,
.changes {
  margin-top: 3rem;
  font: 400 var(--fs-3)/1.5 var(--sans);
  letter-spacing: 0;
}
.prose > .changes { margin-top: 2.25rem; }
.sources h2,
.changes h2 {
  margin: 0;
  padding: 0.75rem 0 0.6rem;
  border-top: 3px double var(--rule-strong);
  border-bottom: 1px solid var(--rule);
  font: 600 var(--fs-1)/1.3 var(--sans);
  letter-spacing: var(--track-label);
  text-transform: var(--label-case);
  color: var(--ink-strong);
}
.prose .sources ol,
.prose .changes ol { list-style: none; padding: 0; counter-reset: src; }
.prose .sources li {
  counter-increment: src;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  margin: 0;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.prose .sources li::before {
  content: "[" counter(src) "]";
  grid-row: 1 / span 2;
  font: 500 var(--fs-2)/1.55 var(--mono);
  color: var(--accent);
}
.prose .sources li > a {
  grid-column: 2;
  font-weight: 500;
  color: var(--ink-strong);
  text-decoration-color: var(--rule);
}
.prose .sources li > a:hover { color: var(--accent); text-decoration-color: currentColor; }
.source-meta {
  grid-column: 2;
  display: block;
  margin-top: 0.15rem;
  font: 400 var(--fs-1)/1.45 var(--mono);
  color: var(--ink-3);
}
.prose .sources li:target { background: var(--hl); box-shadow: -0.5rem 0 0 var(--hl), 0.5rem 0 0 var(--hl); }
.prose .sources li:target > a,
.prose .sources li:target .source-meta { color: var(--hl-ink); }
.prose .changes li {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.changes time { color: var(--ink-3); }

/* The document aside: details, the verification record, contents */
.doc-aside { display: grid; gap: 2rem; align-content: start; min-width: 0; }
.aside-title { margin-bottom: 0.65rem; color: var(--ink-strong); }

.doc-details { padding-top: 0.7rem; border-top: 2px solid var(--rule-strong); }
.doc-details dl > div {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--rule-soft);
  font: 400 var(--fs-3)/1.4 var(--sans);
}
.doc-details dt { padding-top: 0.12rem; }
.doc-details dd { min-width: 0; color: var(--ink); }
.doc-details .dd-chips { display: block; }
.doc-details .dd-chips dt { margin-bottom: 0.45rem; }

/* Disclosure in the aside, ruled like the details list above it */
.doc-aside .disclosure { padding-top: 0.7rem; border-top: 2px solid var(--accent); }
.doc-aside .disclosure p { font: 400 var(--fs-3)/1.5 var(--sans); color: var(--ink-2); }

/* The verification record, set as a receipt */
.record {
  padding: 0.85rem 1rem 1rem;
  background: var(--tint);
  border-top: 2px solid var(--rule-strong);
}
.record .aside-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--hatch);
}
.record .aside-title::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent);
}
.record-label {
  margin: 0.85rem 0 0.35rem;
  font: 500 var(--fs-1)/1.3 var(--sans);
  letter-spacing: 0.06em;
  text-transform: var(--label-case);
  color: var(--ink-3);
}
.hash-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.hash {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0.55rem;
  font: 400 var(--fs-1)/1.35 var(--mono);
  letter-spacing: 0.01em;
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}
.copy-btn {
  flex: none;
  min-width: 3.75rem;
  margin: -1px -1px -1px 0;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 0;
  background: var(--ink);
  font: 600 var(--fs-1)/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: var(--label-case);
  color: var(--on-ink);
  cursor: pointer;
}
.copy-btn:hover { background: var(--accent); color: var(--on-accent); }
.copy-btn:focus-visible { outline-offset: 2px; }
.record-links { margin-top: 0.8rem; font: 500 var(--fs-3)/1.4 var(--sans); color: var(--ink-3); }
.record-links a { color: var(--ink); text-decoration-color: var(--accent-line); text-underline-offset: 0.2em; }
.record-links a:hover { color: var(--accent); text-decoration-color: currentColor; }
.record-note {
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--hatch);
  font: 400 var(--fs-2)/1.5 var(--sans);
  color: var(--ink-2);
}

/* "Check our work" (home) and "Check or correct this page" (end of each
   article): the same receipt as the verification record, set as label and
   value rows between perforations */
.check-strip {
  padding: 0.85rem 1rem 0.35rem;
  background: var(--tint);
  border-top: 2px solid var(--rule-strong);
  font-family: var(--sans);
  letter-spacing: 0;
}
.check-strip .aside-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--hatch);
}
.check-strip .aside-title::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent);
}
.check-strip dl > div {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hatch);
  font: 400 var(--fs-3)/1.45 var(--sans);
}
.check-strip dl > div:last-child { border-bottom: 0; }
.check-strip dt {
  margin: 0;
  padding-top: 0.1rem;
  font: 500 var(--fs-1)/1.45 var(--sans);
  letter-spacing: 0.06em;
  text-transform: var(--label-case);
  color: var(--ink-3);
}
.check-strip dd { min-width: 0; margin: 0; color: var(--ink-2); }
.check-strip dd a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 0.2em; }
.check-strip dd a:hover { color: var(--accent); text-decoration-color: currentColor; }
.check-strip dd > code,
.check-strip .email {
  padding: 0;
  background: none;
  font: 400 var(--fs-2)/1.45 var(--mono);
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}
.check-strip dl > .check-verify { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
.check-strip .hash-row { display: flex; }
.check-strip .hash { padding: 0.45rem 0.55rem; background: none; font-size: var(--fs-1); overflow-wrap: break-word; word-break: normal; }
.check-how { display: block; margin-top: 0.35rem; font-size: var(--fs-2); }
.prose > .check-strip { margin-top: 2.5rem; }

/* On this page: numbered in section order */
.toc { order: -1; padding-top: 0.7rem; border-top: 2px solid var(--rule-strong); }
.toc ol { list-style: none; counter-reset: toc; }
.toc li {
  counter-increment: toc;
  display: grid;
  grid-template-columns: 1.85rem minmax(0, 1fr);
  border-top: 1px solid var(--rule-soft);
}
.toc li::before {
  content: counter(toc, decimal-leading-zero);
  padding-top: 0.5rem;
  font: 500 var(--fs-1)/1.5 var(--mono);
  color: var(--ink-3);
}
.toc li a {
  display: block;
  padding: 0.42rem 0;
  font: 400 var(--fs-3)/1.45 var(--sans);
  color: var(--ink-2);
  text-decoration: none;
}
.toc li a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }

.related { margin-top: 4rem; }

/* --------------------------------------------------------------------------
   11. Topics
   -------------------------------------------------------------------------- */
.page-topics .stack-block { margin-top: 0; }
.page-head + .stack-block > .block-head { padding-top: 0; border-top: 0; }

.topic-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr));
  column-gap: 3rem;
  margin-top: 3.5rem;
}
.topic-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem 0 1.6rem;
  border-top: 2px solid var(--rule-strong);
}
.topic-card-title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font: 600 var(--fs-8)/1.15 var(--serif);
  letter-spacing: var(--track-head);
  color: var(--ink-strong);
}
.topic-card-title::before {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--topic, var(--ink-3));
}
.topic-card-lede { font: 400 var(--fs-5)/1.45 var(--serif); color: var(--ink); }
.topic-card-desc { font: 400 var(--fs-3)/1.55 var(--sans); color: var(--ink-2); }
.mini-title { margin-top: 0.5rem; color: var(--ink-3); }
.question-list {
  list-style: none;
  display: grid;
  gap: 0.35rem;
  font: 400 var(--fs-3)/1.45 var(--sans);
  color: var(--ink);
}
.question-list li { position: relative; padding-left: 1rem; }
ul.question-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.35rem;
  height: 0.35rem;
  background: var(--ink-3);
}
ol.question-list { counter-reset: q; }
ol.question-list li { counter-increment: q; padding-left: 1.6rem; }
ol.question-list li::before {
  content: counter(q);
  position: absolute;
  left: 0;
  font: 500 var(--fs-1)/1.75 var(--mono);
  color: var(--accent);
}
.topic-card .tile-count { margin-top: 0.4rem; }

.page-topic .page-head { border-bottom: 3px solid var(--topic, var(--rule-strong)); }
.page-topic .page-head .kicker .kind::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.5rem;
  background: var(--topic, var(--accent));
}
.topic-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
.topic-main { min-width: 0; }
.topic-main > section { margin-top: 2.75rem; }
.topic-desc {
  max-width: 40em;
  font: 400 var(--fs-6)/1.55 var(--serif);
  color: var(--ink);
}
.topic-aside { display: grid; gap: 2rem; align-content: start; min-width: 0; }
.topic-aside .aside-title { padding-top: 0.7rem; border-top: 2px solid var(--rule-strong); }
.technique-list > div { padding: 0.65rem 0; border-top: 1px solid var(--rule-soft); }
.technique-list dt { font: 600 var(--fs-4)/1.35 var(--serif); color: var(--ink-strong); }
.technique-list dd { margin-top: 0.15rem; font: 400 var(--fs-3)/1.5 var(--sans); color: var(--ink-2); }
.layer-list { list-style: none; display: grid; }
.layer-list li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--rule-soft);
  font: 500 var(--fs-3)/1.4 var(--sans);
  color: var(--ink);
}
.layer-list li::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--ink-3);
}

/* --------------------------------------------------------------------------
   12. Learn
   -------------------------------------------------------------------------- */
.learn-start { margin-bottom: 3.5rem; }
.learn-start .mini-label {
  margin-bottom: 1rem;
  color: var(--accent);
}
.feature-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
.feature-title {
  font: 600 var(--fs-8)/1.15 var(--serif);
  letter-spacing: var(--track-head);
  color: var(--ink-strong);
}
.feature-dek { margin-top: 0.7rem; font: 400 var(--fs-5)/1.5 var(--serif); color: var(--ink-2); }
.feature-body .read-more { margin-top: 1rem; }
.feature-art { align-self: start; }

/* --------------------------------------------------------------------------
   13. Resources catalog: filters, then a ledger grouped by topic
   -------------------------------------------------------------------------- */
.filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
  background: var(--tint);
}
.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.field label,
.search-form label {
  font: 600 var(--fs-1)/1.3 var(--sans);
  letter-spacing: var(--track-label);
  text-transform: var(--label-case);
  color: var(--ink-2);
}
.field input,
.field select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--ink-3);
  border-radius: 0;
  background-color: var(--paper);
  font: 400 var(--fs-4)/1.2 var(--sans);
  color: var(--ink);
}
.field select {
  padding-right: 2.25rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.75rem center;
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field input::placeholder,
.search-form input::placeholder { color: var(--ink-3); opacity: 1; }
.field input:hover,
.field select:hover { border-color: var(--ink); }
.field input:focus-visible,
.field select:focus-visible { outline-offset: 1px; border-color: var(--ink); }
.field-search input { padding-right: 0.5rem; }

.result-count { margin-bottom: 1.5rem; font: 400 var(--fs-2)/1.4 var(--mono); color: var(--ink-3); }
.catalog-group + .catalog-group { margin-top: 2.75rem; }
.catalog-title {
  padding-top: 0.7rem;
  border-top: 2px solid var(--rule-strong);
  font: 600 var(--fs-7)/1.2 var(--serif);
  letter-spacing: var(--track-head);
  color: var(--ink-strong);
}
.catalog-title::before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.6rem;
  vertical-align: 0.12em;
  background: var(--topic, var(--ink-3));
}
.catalog-title .count { margin-left: 0.4rem; font: 400 var(--fs-2)/1 var(--mono); letter-spacing: 0; color: var(--ink-3); white-space: nowrap; }
/* The group already names the entry's first topic; its chip would repeat it */
.resource-catalog .chips > .chip:first-child { display: none; }
.resource-catalog .chips:not(:has(> .chip:nth-child(2))) { display: none; }
.resource-catalog ~ .empty { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   14. Glossary
   -------------------------------------------------------------------------- */
.letter-jump { margin-bottom: 2.25rem; }
.letter-jump ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.letter-jump a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--rule);
  font: 500 var(--fs-3)/1 var(--mono);
  color: var(--ink);
  text-decoration: none;
}
.letter-jump a:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

.glossary { min-width: 0; }
.term-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 0.6rem;
  border-top: 2px solid var(--rule-strong);
}
.term-group + .term-group { margin-top: 2.5rem; }
.term-letter {
  font: 500 var(--fs-9)/1 var(--serif);
  color: var(--ink-strong);
}
.term {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  padding: 1rem 0 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.term:last-child { border-bottom: 0; }
.term:target { background: var(--hl); box-shadow: -0.6rem 0 0 var(--hl), 0.6rem 0 0 var(--hl); }
.term:target .term-name,
.term:target .term-alt,
.term:target p { color: var(--hl-ink); }
.term dt { display: flex; flex-direction: column; gap: 0.2rem; }
.term-name { font: 600 var(--fs-6)/1.25 var(--serif); color: var(--ink-strong); }
.term-alt { font: 400 var(--fs-3)/1.4 var(--sans); color: var(--ink-3); }
.term-alt:lang(zh-CN) { letter-spacing: 0.04em; }
.term dd p { max-width: 62ch; font: 400 var(--fs-5)/1.55 var(--serif); color: var(--ink); }
.term .term-topic { max-width: none; margin-top: 0.45rem; font: 400 var(--fs-2)/1.4 var(--sans); color: var(--ink-3); }
.term-topic a { color: var(--ink-2); text-decoration-color: var(--accent-line); text-underline-offset: 0.2em; }
.term-topic a::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin: 0 0.35rem 0 0.1rem;
  background: var(--topic, var(--ink-3));
}
.term-topic a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   15. Search and 404
   -------------------------------------------------------------------------- */
.search-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 44rem; margin-bottom: 2rem; }
.search-form input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 3.5rem;
  padding: 0 0.15rem;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  font: 400 var(--fs-7)/1.2 var(--serif);
  color: var(--ink-strong);
}
/* Focus is an underline in the accent rather than a box */
.search-form input:focus-visible {
  outline: none;
  border-bottom-color: var(--focus);
  box-shadow: 0 2px 0 0 var(--focus);
}
.search-results { max-width: 52rem; }
.search-status { font: 400 var(--fs-3)/1.5 var(--sans); color: var(--ink-3); }
.search-group + .search-group { margin-top: 2.25rem; }
.search-group .mini-label { padding-top: 0.6rem; border-top: 2px solid var(--rule-strong); color: var(--ink-strong); }
.search-list { list-style: none; }
.search-list li { padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
.search-list a { font: 600 var(--fs-5)/1.3 var(--serif); color: var(--ink-strong); }
.search-list a.ext::after { content: " ↗"; content: " ↗" / ""; color: var(--accent); font-family: var(--sans); font-weight: 400; }
.search-meta { display: block; margin-top: 0.2rem; font: 400 var(--fs-1)/1.4 var(--mono); color: var(--ink-3); }
.search-list p { margin-top: 0.3rem; font: 400 var(--fs-3)/1.5 var(--sans); color: var(--ink-2); }

.notfound { padding-top: 3.5rem; padding-bottom: 2rem; }
.notfound .page-title { margin-top: 0.3rem; max-width: 18ch; }
.notfound .page-dek { margin-top: 0.9rem; }
.notfound .read-more { margin-top: 1.75rem; }
.notfound .kicker .kind { font-family: var(--mono); letter-spacing: 0.04em; }
.page-404 .notfound { min-height: 46vh; }

/* Page modifiers */
.page-home .site-footer { margin-top: 4.5rem; }
:is(.page-latest, .page-learn, .page-resources, .page-glossary, .page-search) .page-head { margin-bottom: 1.75rem; }
.page-topic .page-title { max-width: 22ch; }
.page-about .page-title { max-width: 20ch; }

/* --------------------------------------------------------------------------
   16. Chinese edition
   -------------------------------------------------------------------------- */
.site[lang="zh-CN"] {
  line-break: strict;
  text-autospace: normal;
}
/* Chinese has no italic: deks, claims and months stand upright */
.site[lang="zh-CN"] .stack-claim,
.site[lang="zh-CN"] .river-month,
.site[lang="zh-CN"] .prose blockquote,
.site[lang="zh-CN"] .callout-analysis .callout-body { font-style: normal; }
.site[lang="zh-CN"] em { font-style: normal; -webkit-text-emphasis: filled dot; text-emphasis: filled dot; -webkit-text-emphasis-position: under; text-emphasis-position: under right; }
/* Section heads become serif Chinese titles instead of tracked capitals */
.site[lang="zh-CN"] .block-title {
  font: 600 var(--fs-5)/1.35 var(--cjk-serif);
  letter-spacing: 0.02em;
}
.site[lang="zh-CN"] .river-month { font: 600 var(--fs-6)/1.35 var(--cjk-serif); letter-spacing: 0.02em; }
/* Labels keep a 13px floor in Chinese */
.site[lang="zh-CN"] .kicker,
.site[lang="zh-CN"] .mini-label,
.site[lang="zh-CN"] .mini-title,
.site[lang="zh-CN"] .aside-title,
.site[lang="zh-CN"] .callout-label,
.site[lang="zh-CN"] .stack-claim-label,
.site[lang="zh-CN"] .date-label,
.site[lang="zh-CN"] .dateline dt,
.site[lang="zh-CN"] .doc-details dt,
.site[lang="zh-CN"] .record-label,
.site[lang="zh-CN"] .sources h2,
.site[lang="zh-CN"] .changes h2,
.site[lang="zh-CN"] .footer-col h2,
.site[lang="zh-CN"] .footer-label,
.site[lang="zh-CN"] .field label,
.site[lang="zh-CN"] .search-form label,
.site[lang="zh-CN"] .copy-btn,
.site[lang="zh-CN"] .claim-card dt,
.site[lang="zh-CN"] .check-strip dt {
  font-size: var(--fs-2);
  letter-spacing: var(--track-label);
}
.site[lang="zh-CN"] .card-start::after { font-size: var(--fs-2); letter-spacing: var(--track-label); }
/* The definition band and receipts: upright CJK serif, mono only for figures */
.site[lang="zh-CN"] .defn { font: 400 var(--fs-5)/1.75 var(--cjk-serif); letter-spacing: 0.02em; }
.site[lang="zh-CN"] .defn-pos { margin: 0 0.6em; font-family: var(--sans); font-size: var(--fs-2); }
.site[lang="zh-CN"] .ledger-line,
.site[lang="zh-CN"] .ledger-receipt > span:not(.locator),
.site[lang="zh-CN"] .ledger-filed { font-family: var(--sans); letter-spacing: 0.01em; }
.site[lang="zh-CN"] .ledger-line,
.site[lang="zh-CN"] .ledger-dates,
.site[lang="zh-CN"] .ledger-receipt { font-size: var(--fs-2); }
.site[lang="zh-CN"] .claim-card .cc-checked dd { font: 400 var(--fs-4)/1.75 var(--sans); letter-spacing: 0.01em; }
.site[lang="zh-CN"] .check-strip dd,
.site[lang="zh-CN"] .claim-card dd,
.site[lang="zh-CN"] .footer-build-text { line-height: 1.7; }
.site[lang="zh-CN"] .lead-title,
.site[lang="zh-CN"] .article-title,
.site[lang="zh-CN"] .page-title,
.site[lang="zh-CN"] .feature-title,
.site[lang="zh-CN"] .topic-card-title,
.site[lang="zh-CN"] .card-start .card-title { font-weight: 600; letter-spacing: 0.01em; }
.site[lang="zh-CN"] .lead-dek,
.site[lang="zh-CN"] .article-dek,
.site[lang="zh-CN"] .page-dek,
.site[lang="zh-CN"] .feature-dek,
.site[lang="zh-CN"] .topic-desc { font-family: var(--sans); line-height: 1.75; letter-spacing: 0.02em; }
.site[lang="zh-CN"] .card-dek,
.site[lang="zh-CN"] .river-dek,
.site[lang="zh-CN"] .block-dek,
.site[lang="zh-CN"] .resource-note,
.site[lang="zh-CN"] .topic-tile p,
.site[lang="zh-CN"] .topic-card-desc,
.site[lang="zh-CN"] .footer-brand p,
.site[lang="zh-CN"] .footer-build-text { line-height: 1.75; letter-spacing: 0.01em; }
.site[lang="zh-CN"] .stack-claim,
.site[lang="zh-CN"] .callout-analysis .callout-body,
.site[lang="zh-CN"] .term dd p,
.site[lang="zh-CN"] .card-start .card-dek,
.site[lang="zh-CN"] .topic-card-lede { font-family: var(--sans); line-height: 1.75; }
.site[lang="zh-CN"] .ledger-title,
.site[lang="zh-CN"] .card-title,
.site[lang="zh-CN"] .river-title,
.site[lang="zh-CN"] .topic-tile h3,
.site[lang="zh-CN"] .term-name,
.site[lang="zh-CN"] .search-list a { line-height: 1.42; }
.site[lang="zh-CN"] .prose > * + * { margin-top: 1.1em; }
.site[lang="zh-CN"] .prose > h2 { font-family: var(--cjk-serif); font-size: 1.3125rem; line-height: 1.45; letter-spacing: 0.02em; }
.site[lang="zh-CN"] .prose > h3 { line-height: 1.5; }
.site[lang="zh-CN"] .callout { line-height: 1.8; letter-spacing: 0.02em; }
.site[lang="zh-CN"] .callout-checked .callout-body { background-image: repeating-linear-gradient(to bottom, transparent 0 calc(1.8em - 1px), var(--rule) calc(1.8em - 1px) 1.8em); }
.site[lang="zh-CN"] .callout-checked .callout-body > * + * { margin-top: 1.8em; }
/* Mono only for figures and digests; Chinese words stay in the sans */
.site[lang="zh-CN"] .resource-meta,
.site[lang="zh-CN"] .source-meta,
.site[lang="zh-CN"] .search-meta { font-family: var(--sans); letter-spacing: 0.01em; }
.site[lang="zh-CN"] .kind-analysis .prose > p:first-child::first-letter { float: none; margin: 0; font: inherit; color: inherit; }
.site[lang="zh-CN"] .translation-note { font-size: var(--fs-3); }

/* --------------------------------------------------------------------------
   17. Responsive layout (mobile first)
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
  /* Lead and article plates run edge to edge on phones */
  .lead-art,
  .article-art {
    margin-left: calc(-1 * var(--bleed-l));
    margin-right: calc(-1 * var(--bleed-r));
  }
  .lead-art figcaption,
  .article-art figcaption {
    padding-left: var(--bleed-l);
    padding-right: var(--bleed-r);
  }
  .card-row { gap: 0; }
  .card-row .card + .card { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
  /* Cards with pictures become compact rows, like the rail and the river */
  .card:has(> .thumb) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.5rem;
    gap: 0.9rem;
    align-items: start;
  }
  .card:has(> .thumb) .thumb { grid-column: 2; grid-row: 1; aspect-ratio: 1 / 1; margin-top: 0.2rem; }
  .card:has(> .thumb) .card-body { grid-column: 1; grid-row: 1; }
  .card:has(> .thumb) .card-title { font-size: var(--fs-5); line-height: 1.28; }
  .page-dek,
  .article-dek { font-size: var(--fs-5); }
  .article-meta { gap: 0.3rem 1.1rem; }
  .article-meta .reading-time { order: 1; }
  .article-meta .dateline { order: 2; column-gap: 1rem; }
  .article-meta .translation-note { order: 3; }
  .callout { padding: 0.85rem 1rem 0.95rem; }
  .callout-checked { padding-left: 2rem; }
  .callout-example { padding-left: calc(0.75rem + 1rem); }
  .callout-example::before { width: 0.75rem; }
  .callout-note { padding: 0.1rem 0 0.1rem 0.9rem; }
  .prose .changes li { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
}

@media (max-width: 379px) {
  .site-nav { gap: 0.5rem; }
  .site-nav a { font-size: var(--fs-2); }
}


@media (min-width: 600px) {
  .site-nav { justify-content: flex-start; gap: 1.6rem; }
  /* News plates keep to the reading column, so text and picture share edges */
  .kind-news .article-art { max-width: var(--measure); }
  .stack-layer {
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    column-gap: 1.75rem;
  }
  .stack-topics { grid-column: 2; }
  .river-item {
    grid-template-columns: 7rem minmax(0, 1fr) 8rem;
    grid-template-areas: "date body thumb";
    gap: 0 1.5rem;
    padding: 1.35rem 0 1.45rem;
  }
  /* A double rule sets the date column off from the story */
  .river-date { align-self: stretch; padding-top: 0.2rem; border-right: 3px double var(--rule); }
  .river-item .thumb { aspect-ratio: 4 / 3; }
  .river-title { font-size: var(--fs-7); }
  .filters { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); align-items: end; padding: 1.1rem 1.25rem 1.25rem; }
  .term {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    column-gap: 2rem;
  }
  .term-group { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1.5rem; }
  .feature-card { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.25rem; align-items: center; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2.5rem; }
  .doc-aside { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); column-gap: 2rem; }
  .topic-aside { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); column-gap: 2rem; }
}

@media (min-width: 760px) {
  :root {
    --bleed-l: max(32px, env(safe-area-inset-left, 0px));
    --bleed-r: max(32px, env(safe-area-inset-right, 0px));
    --prose-size: var(--fs-6);
    --measure: 35rem;
  }
  [lang="zh-CN"] { --prose-size: 1.125rem; --measure: 40.5rem; }
  .wrap {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
  .mark { width: 36px; height: 36px; }
  .brand-name { font-size: 1.4375rem; }
  .defn-band { padding-top: 1.5rem; margin-bottom: 2.25rem; }
  .breadcrumb { padding-top: 1.75rem; }
  .page-head { padding-top: 1.25rem; padding-bottom: 1.9rem; margin-bottom: 2.25rem; }
  .article-head { padding-top: 1.25rem; }
  .resource-list .resource {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 16rem);
    grid-template-areas: "title meta" "note meta" "chips meta";
    column-gap: 2rem;
    align-items: start;
  }
  .resource-list .resource-title { grid-area: title; }
  .resource-list .resource-meta { grid-area: meta; margin-top: 0.2rem; text-align: right; }
  .resource-list .resource-checked { justify-content: flex-end; }
  .resource-list .resource-note { grid-area: note; }
  .resource-list .chips { grid-area: chips; }
}

@media (min-width: 960px) {
  :root { --sticky-offset: 5.5rem; }
  .header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand nav tools";
    column-gap: 2rem;
  }
  /* The wordmark is set off by a hairline; sections run from the left */
  .header-inner .brand { align-self: stretch; padding: 0.8rem 1.75rem 0.8rem 0; border-right: 1px solid var(--rule); }
  .site-nav {
    justify-content: flex-start;
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    overflow: visible;
    border-top: 0;
  }
  .site-nav a { padding: 1.55rem 0 1.45rem; font-size: 0.9375rem; margin-bottom: -1px; }
  .header-tools { gap: 0.5rem; }

  .defn-band { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .ledger-line { justify-content: flex-end; }
  /* The lead takes the wider column; the ledger is text only and runs narrower */
  .home-top {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 0;
  }
  .lead-story { padding-right: 2.5rem; }
  .home-side { padding-left: 2.5rem; border-left: 1px solid var(--hatch); }
  .card-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Rows of two (or one) set the picture beside the text rather than
     leaving empty columns; analysis cards always do */
  .card-row:has(> .card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-row > .card:only-child { grid-column: span 2; }
  .card-analysis,
  .card-row:has(> .card:nth-child(2):last-child) > .card:has(> .thumb),
  .card-row > .card:only-child:has(> .thumb) {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 1.25rem;
    align-items: start;
  }
  .card-analysis .card-title,
  .card-row:has(> .card:nth-child(2):last-child) > .card:has(> .thumb) .card-title,
  .card-row > .card:only-child:has(> .thumb) .card-title { font-size: var(--fs-6); line-height: 1.25; }
  .footer-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: start; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 960-1023px: the nav shares its row with the wordmark and the tools, so it runs tighter */
@media (min-width: 960px) and (max-width: 1023.98px) {
  .header-inner { column-gap: 1.5rem; }
  .site-nav { gap: 1.25rem; }
}

@media (min-width: 1024px) {
  /* The article block: [full | main (measure) | gutter | record | full] */
  .article {
    display: grid;
    grid-template-columns:
      [full-start] minmax(0, 1fr)
      [main-start] minmax(0, var(--measure))
      [main-end] var(--col-gap)
      [aside-start] var(--aside)
      [aside-end] minmax(0, 1fr)
      [full-end];
    grid-template-rows: auto auto 1fr;
  }
  .article > .article-grid { display: contents; }
  .article > .article-head { grid-column: main-start / aside-end; grid-row: 1; }
  .article > .article-art { grid-column: main; grid-row: 2; margin-bottom: 2.5rem; }
  .article .article-body { grid-column: main; grid-row: 3; }
  .article .doc-aside {
    grid-column: aside;
    grid-row: 2 / span 2;
    align-self: stretch;
    margin-top: 1.75rem;
  }
  .doc-aside { grid-template-columns: minmax(0, 1fr); }
  .doc-aside .toc { order: 0; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 6rem); }
  .page-article .breadcrumb,
  .page-about .breadcrumb,
  .page-about .page-head {
    width: min(100%, var(--block-w));
    margin-inline: auto;
  }
  .page-about .article-grid {
    grid-template-columns: minmax(0, var(--measure)) var(--aside);
    justify-content: center;
    column-gap: var(--col-gap);
    align-items: start;
  }
  .page-about .doc-aside { grid-template-columns: minmax(0, 1fr); align-self: stretch; }
  .page-about .doc-aside .toc { order: 1; }

  /* Analysis, explainers and guides: the plate breaks out to a 21:9 band.
     The drawing keeps its 16:9 composition, centred on a mat of its own
     ground, so nothing is cropped. */
  :is(.kind-analysis, .kind-explainer, .kind-guide) .article > .article-art { grid-column: full; }
}
/* The band itself needs container query units; without them the plate
   simply runs the full width at 16:9. */
@media (min-width: 1024px) {
  @supports (height: 1cqw) {
    :is(.kind-analysis, .kind-explainer, .kind-guide) .article > .article-art {
      position: relative;
      isolation: isolate;
      container-type: inline-size;
    }
    :is(.kind-analysis, .kind-explainer, .kind-guide) .article-art::before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      right: 0;
      height: calc(100cqw * 9 / 21);
      background: var(--art-bg);
    }
    :is(.kind-analysis, .kind-explainer, .kind-guide) .article-art .art {
      width: auto;
      height: calc(100cqw * 9 / 21);
      max-width: 100%;
      margin-inline: auto;
      outline: 1px solid var(--art-grid);
      outline-offset: -1px;
    }
    :is(.kind-analysis, .kind-explainer, .kind-guide) .article-art figcaption {
      width: min(100%, var(--block-w));
      margin-inline: auto;
    }
  }
}
@media (min-width: 1024px) {
  :is(.kind-analysis, .kind-explainer, .kind-guide) .article .doc-aside { grid-row: 3; margin-top: 0; }

  .topic-layout {
    grid-template-columns: minmax(0, 1fr) var(--aside);
    gap: 0 var(--col-gap);
  }
  .topic-aside { grid-template-columns: minmax(0, 1fr); }
  .stack-layer { grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr) minmax(0, 17rem); }
  .stack-topics { grid-column: auto; }

  /* Resources: the filters become a sticky column beside the ledger */
  .page-resources main > .wrap:has(> .filters:not([hidden])) {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    column-gap: 3rem;
    align-items: start;
  }
  .page-resources main > .wrap > .breadcrumb,
  .page-resources main > .wrap > .page-head { grid-column: 1 / -1; }
  .page-resources main > .wrap > .filters {
    grid-column: 1;
    grid-row: 3 / span 3;
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 6rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    margin: 0;
  }
  .page-resources main > .wrap > .result-count,
  .page-resources main > .wrap > .resource-catalog,
  .page-resources main > .wrap > .empty { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   18. Motion, forced colours and print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  a, .filter-btn, .copy-btn, .chip, .search-link, .theme-toggle, .letter-jump a, .checklist input {
    transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, text-decoration-color 0.12s ease;
  }
  .prose .sources li, .term, .resource { transition: background-color 0.5s ease, box-shadow 0.5s ease; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  .checklist input:checked { background: Highlight; border-color: Highlight; }
  .checklist input::before { border-color: HighlightText; }
  .search-form input:focus-visible { outline: 2px solid Highlight; }
  .copy-btn { border: 1px solid ButtonText; }
  .site-nav a[aria-current="page"] { text-decoration: underline; }
  .site-nav a[aria-current="page"]::before { background: CanvasText; }
  .locator .loc-on { fill: CanvasText; }
  .locator .loc-off { fill: GrayText; }
}

@media print {
  :root:root {
    --paper: var(--print-paper);
    --header-bg: var(--print-paper);
    --tint: var(--print-paper);
    --tint-2: var(--print-paper);
    --code-bg: var(--print-paper);
    --ink: var(--print-ink);
    --ink-strong: var(--print-ink);
    --ink-2: var(--print-ink-2);
    --ink-3: var(--print-ink-3);
    --rule: var(--print-rule);
    --rule-soft: var(--print-rule);
    --rule-strong: var(--print-ink);
    --accent: var(--print-accent);
    --accent-line: var(--print-rule);
    --hatch: var(--print-rule);
    --hl: var(--print-paper);
    --art-bg: var(--print-paper);
    --art-grid: var(--print-tint);
    --art-mute: var(--print-mute);
    --art-ink: var(--print-ink-2);
    --art-paper: var(--print-paper);
    --art-faint: var(--print-rule);
    --art-accent: var(--print-accent);
    --art-text: var(--print-ink-3);
    color-scheme: light;
  }
  .site-header, .site-footer, .skip-link, .filter-bar, .filters, .copy-btn, .related, .check-strip, .toc, .letter-jump { display: none !important; }
  .site { display: block; }
  .article, .article-grid { display: block; }
  .doc-aside { margin-top: 2rem; }
  .prose > * { max-width: none; }
  .prose a.ext::after { content: " (" attr(href) ")"; font-size: 0.8em; color: var(--ink-3); }
  .prose .sources li > a::after { content: " " attr(href); font: 400 0.85em var(--mono); color: var(--ink-3); overflow-wrap: anywhere; }
  .art-figure, .callout, .table-wrap { break-inside: avoid; }
}

/* ==========================================================================
   Restyle layer: a quieter editorial page.
   Sentence-case labels in the UI face, no mono labels, no seal squares or
   hue swatches, solid hairlines, and more room between stories.
   ========================================================================== */
:root, [lang="en"], [lang="zh-CN"] {
  --label-case: none;
  --track-label: 0;
  --mono: var(--sans);
}
code, kbd, samp, pre { font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

a.chip::before,
.chip-evidence::before,
.callout-label::before,
.resource-checked::before { content: none !important; display: none !important; }

/* Header: the current section is underlined, not marked with a square */
.site-nav a[aria-current="page"]::before { content: none; display: none; }
.site-nav a[aria-current="page"] { color: var(--ink-strong); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.45em; }

/* Kicker: section in the accent, topic after a middle dot */
.kicker { gap: 0.25rem 0; margin-bottom: 0.6rem; font: 600 0.8125rem/1.35 var(--sans); }
.kicker .topic { font: 500 0.8125rem/1.35 var(--sans); color: var(--ink-3); }
.kicker .topic::before {
  content: "·";
  display: inline;
  width: auto;
  height: auto;
  margin: 0 0.5em;
  background: none;
  color: var(--ink-3);
}
.kicker .topic:first-child::before { content: none; }

/* Section heads */
.block-head { margin-bottom: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--ink-strong); }
.block-title { font: 600 1.0625rem/1.3 var(--sans); color: var(--ink-strong); }
.block-more { font: 500 0.875rem/1.3 var(--sans); }

/* Dates read as plain text */
.dates { gap: 0.2rem 1rem; font: 400 0.875rem/1.4 var(--sans); color: var(--ink-3); }
.date-label { font: 400 0.875rem/1.4 var(--sans); color: var(--ink-3); }
:is(.dates, .dateline, .doc-details, .changes) time { font: inherit; }

/* Home: lead and two secondary stories on the left, latest news on the right */
.home { padding-top: 2.25rem; }
.lead-title {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.125rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
}
.lead-title a { color: inherit; text-decoration: none; }
.lead-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.lead-dek { max-width: 40rem; margin-top: 1rem; font: 400 1.1875rem/1.55 var(--serif); color: var(--ink-2); }
.lead-meta { margin-top: 1rem; font: 400 0.875rem/1.4 var(--sans); color: var(--ink-3); }
.home-seconds { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.home-block { margin-top: 3.5rem; }

.ledger-rail .block-head { margin-bottom: 0.25rem; }
.ledger-row { display: block; padding: 0.95rem 0; border-bottom: 1px solid var(--rule); }
.ledger-row:last-child { border-bottom: 0; }
.ledger-row::before { content: none; display: none; }
.ledger-title { margin: 0; font: 600 1.0625rem/1.35 var(--serif); letter-spacing: 0; }
.ledger-title a { color: var(--ink-strong); text-decoration: none; }
.ledger-title a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.ledger-dates { margin-top: 0.35rem; font: 400 0.8125rem/1.45 var(--sans); color: var(--ink-3); }

/* Cards: no rules between them, no "Start here" tab */
.card { gap: 0.5rem; }
.card::before { content: none; display: none; }
.card-title { font: 600 1.25rem/1.3 var(--serif); letter-spacing: 0; }
.card-title a { color: var(--ink-strong); text-decoration: none; }
.card-title a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.card-dek { margin-top: 0.45rem; font: 400 0.9375rem/1.6 var(--sans); color: var(--ink-2); }
.card-start { padding-top: 0; border-top: 0; }
.card-start::after { content: none; display: none; }
.card-start .card-title { font: 600 1.25rem/1.3 var(--serif); }
.card-start .card-dek { margin-top: 0.45rem; font: 400 0.9375rem/1.6 var(--sans); }
.card-start .kicker .kind { color: var(--accent); }

/* Topics on the front: name, one line, count */
.topic-grid { gap: 1.75rem 2.5rem; }
.topic-tile { padding: 0; border: 0; background: none; }
.topic-tile h3 { font: 600 1.0625rem/1.3 var(--serif); }
.topic-tile p { margin-top: 0.35rem; font: 400 0.875rem/1.55 var(--sans); color: var(--ink-2); }
.topic-tile .tile-count { margin-top: 0.35rem; font: 400 0.8125rem/1.4 var(--sans); color: var(--ink-3); }

/* Chips: quiet outlined labels */
.chip { padding: 0.2rem 0.55rem; font: 500 0.8125rem/1.3 var(--sans); }
.chip-evidence { font: 400 0.8125rem/1.35 var(--sans); }

/* Lists without thumbnails */
.river-item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "date" "body"; row-gap: 0.25rem; }
.river-date { font: 400 0.875rem/1.4 var(--sans); }

/* Article: the digest sits in a closed details box at the end */
.article-title { letter-spacing: -0.012em; }
.verify { margin-top: 1.1rem; font: 400 0.875rem/1.55 var(--sans); color: var(--ink-2); }
.verify summary { cursor: pointer; color: var(--ink-2); }
.verify summary:hover { color: var(--ink-strong); }
.verify .record-note { margin-top: 0.6rem; }
/* The digest beside its copy button, which fills the row's height (.hash-row stretches it,
   and the digest wraps inside its own box). A row that wrapped or centred them left the
   button, which has no padding of its own above or below, a 12px bar under the digest */
.verify .hash-row { margin-top: 0.6rem; }
.verify .hash { font-size: 0.75rem; overflow-wrap: anywhere; }
.verify .record-links { margin-top: 0.4rem; }

/* Ask: sources without digest chips */
.chat-digest { display: none !important; }

@media (min-width: 760px) {
  .river-item { grid-template-columns: 8.5rem minmax(0, 1fr); grid-template-areas: "date body"; column-gap: 1.5rem; }
}
@media (min-width: 960px) {
  .home-top { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 0; }
  .home-main { min-width: 0; padding-right: 3rem; }
  .lead-story { padding-right: 0; }
  .home-side { padding-left: 2.5rem; border-left: 1px solid var(--rule); }
  .home-seconds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* "What we checked": a plain box, without notebook rules, margin lines or the end square */
.callout-checked {
  padding: 0.95rem 1.15rem 1.05rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--paper);
}
.callout-checked .callout-body { background: none; }
.callout-checked .callout-body > * + * { margin-top: 0.7em; }
.callout-checked .callout-body > p:last-child::after,
.page-article .prose > p:has(+ :is(.sources, .changes))::after,
.page-article .prose > .callout:has(+ :is(.sources, .changes)) .callout-body > p:last-child::after { content: none; display: none; }
.callout-label { font: 600 0.875rem/1.3 var(--sans); }

/* Article: a hairline under the header and room before the text */
.article-head { margin-bottom: 2.25rem; border-bottom: 1px solid var(--rule); }

/* Latest: no double rule beside the date */
.river-date { border-right: 0; }

/* "Check or correct this page": a plain block under a hairline */
.check-strip { padding: 1rem 0 0; border: 0; border-top: 1px solid var(--rule-strong); background: none; }
.check-strip .aside-title::before { content: none; display: none; }
.check-strip .aside-title { padding: 0; border: 0; font: 600 0.9375rem/1.3 var(--sans); }

/* Stack and topics: no layer codes, stripe glyphs, swatches or square bullets */
.stack-index { display: none; }
.topic-card-title::before { content: none; display: none; }
ul.question-list li::before { content: "–"; top: 0; width: auto; height: auto; background: none; color: var(--ink-3); }
.layer-list li::before { content: none; display: none; }

/* ==========================================================================
   19. TEE redesign (21 October 2026)
   Trusted execution environments are the site's main subject. The site has
   one image, the home hero; every other page is text, set apart by
   spacing, type and rules, with long field lists folded into <details>.
   The TEE indigo (--tee-*, section 1) marks TEE coverage only; links,
   buttons and focus stay cinnabar. This layer only adds rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   19.1 Shared pieces: folds, field lists and small labels
   -------------------------------------------------------------------------- */
/* A fold: the summary is a quiet sans line; the body opens under it */
main details:not(.verify, .prose details) > summary {
  width: fit-content;
  max-width: 100%;
  padding: 0.3rem 0;
  font: 500 var(--fs-3)/1.4 var(--sans);
  color: var(--ink-2);
  cursor: pointer;
}
main details:not(.verify, .prose details) > summary::marker { color: var(--ink-3); }
main details:not(.verify, .prose details) > summary:hover { color: var(--ink-strong); }
main details:not(.verify, .prose details)[open] > summary { margin-bottom: 0.65rem; }

/* Label and value lists: the label is a small sans line above its value */
:where(.tier-fields, .platform-fields, .limit-fields, .limit dl) > div + div,
:where(.tier-fields, .platform-fields, .limit-fields, .limit dl) > dd + dt { margin-top: 0.8rem; }
:where(.tier-fields, .platform-fields, .limit-fields, .limit dl) dt {
  margin-bottom: 0.15rem;
  font: 600 var(--fs-1)/1.35 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}
:where(.tier-fields, .platform-fields, .limit-fields, .limit dl) dd {
  margin: 0;
  min-width: 0;
  font: 400 var(--fs-3)/1.55 var(--sans);
  color: var(--ink);
}
:is(.tier-fields, .platform-fields, .limit-fields, .limit dl) a,
:is(.tier-read, .tier-includes, .platform-sources, .limit-sources, .tracker, .tiers-he-note, .catalog-trust, .rpath-why, .path-outcome) a {
  color: inherit;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 0.2em;
}
:is(.tier-fields, .platform-fields, .limit-fields, .limit dl) a:hover,
:is(.tier-read, .tier-includes, .platform-sources, .limit-sources, .tracker, .tiers-he-note, .catalog-trust, .rpath-why, .path-outcome) a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}
/* In a fold, the line after a field list (the approaches a tier includes, a
   platform's or an attack's sources) starts after a pause, so it does not
   read as part of the last field */
details > :is(.tier-fields, .platform-fields, .limit-fields) + * { margin-top: 1.1rem; }
/* An empty platform cell reads "Not yet covered here" in quiet ink */
.is-pending, .plat-pending { color: var(--ink-3); font-style: normal; }

/* Section heads written as a bare h2 match the block heads above */
:where(.page-tee, .page-topics, .page-learn, .page-resources, .page-home) main section > h2:not([class]) {
  margin-bottom: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ink-strong);
  font: 600 1.0625rem/1.3 var(--sans);
  color: var(--ink-strong);
}

/* --------------------------------------------------------------------------
   19.2 Story tags: layer codes in plain sans, then one outlined TEE label.
   Tags are not links and add no tab stops; a visually hidden sentence
   gives screen readers the full layer names.
   -------------------------------------------------------------------------- */
.tags {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  margin-left: 0.6rem;
  vertical-align: baseline;
}
:is(.dates, .river-meta, .tag-line) > .tags { margin-left: 0; }
.tag-layers {
  font: 500 var(--fs-1)/1.3 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  white-space: nowrap;
}
.tag {
  display: inline-block;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  font: 600 var(--fs-1)/1.15 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  white-space: nowrap;
}
.tag-tee {
  border-color: var(--tee-rule);
  background: var(--tee-wash);
  color: var(--tee-ink);
}
/* Long-form rows on Latest carry their tags on a line under the dek */
.river-meta {
  margin-top: 0.55rem;
  font: 400 var(--fs-2)/1.45 var(--sans);
  color: var(--ink-3);
}
/* "T1–T7 name the stack layer ...": once under the filters, once under each table */
.tags-note {
  max-width: 46rem;
  margin-top: 0.85rem;
  font: 400 var(--fs-2)/1.5 var(--sans);
  color: var(--ink-3);
}
.filter-bar + .tags-note { margin: -1.1rem 0 2rem; }

/* --------------------------------------------------------------------------
   19.3 Home: the hero band. Kicker, tagline, positioning and two links,
   then the hero; 21.1 sets the band's layout by width. On phones the
   hero keeps the page gutters: the pause control, the scene, its list of
   layers and its links.
   -------------------------------------------------------------------------- */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.75rem;
}
.home-intro { min-width: 0; }
.home-hero > .ledger-rail { min-width: 0; }
.home-tagline {
  font: 500 clamp(2.25rem, 1.5rem + 2.6vw, 3.25rem)/1.08 var(--serif);
  letter-spacing: -0.012em;
  color: var(--ink-strong);
  text-wrap: balance;
}
.home-positioning,
.home-positioning-short {
  max-width: 40rem;
  margin-top: 1.1rem;
  font: 400 1.1875rem/1.55 var(--serif);
  color: var(--ink-2);
}
.home-positioning-short { display: none; }
.home-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.75rem;
  margin-top: 1.2rem;
  font: 600 0.9375rem/1.4 var(--sans);
}
.home-links a { color: var(--accent); text-decoration: none; }
.home-links a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 0.2em; }

/* The rail's meta line: date · first publisher, then the tags */
.home-hero .ledger-row .ledger-dates,
.home-hero .ledger-row .ledger-meta { margin-top: 0.35rem; }

/* --------------------------------------------------------------------------
   19.4 The hero: the drawn stack and its seven layer labels.
   The inline SVG scene (sitegen/templates/hero-scene.svg) has no ground and
   no frame: it sits on the page in both themes and paints itself with its
   own hv- tokens. From 45em (720px at the default text size) the labels
   stand in a column to its right, each joined to its plate by a leader
   line; render.py hands the figure the scene's width and the column's
   start as --hero-art and --hero-labels, the same percentages it draws
   the leaders in. The label rows are sized in rem but spaced by the
   stage's width, so the breakpoints are in em and rem: larger default
   text falls back to the layout below it instead of overlapping. Below
   45em the labels are a ruled list under the scene. The pause control
   comes first in the figure, so it is first in the tab order: top right,
   where the scene is empty, and above the scene on phones. hero.js sets
   data-animated and data-motion; without it, or under reduced motion, the
   scene is a still frame.
   -------------------------------------------------------------------------- */
.hero-visual {
  position: relative;
  min-width: 0;
  margin: 0;
}
.hero-stage { position: relative; }
.hero-art { width: var(--hero-art, 60%); }
.hero-art > svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Leader lines: hairlines in quiet ink, indigo for the TEE layers, with a
   dot on each plate's corner. The overlay stretches with the stage, so the
   strokes keep their width and the dot is a zero-length round-capped
   stroke, which stays round */
.hero-leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.hero-leader {
  fill: none;
  stroke: var(--ink-3);
  opacity: 0.55;
}
.hero-leader > * {
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.hero-leader > .hero-leader-dot {
  stroke-width: 5px;
  stroke-linecap: round;
}
.hero-leader.is-tee { stroke: var(--tee-ink); opacity: 0.8; }

/* A label: a 2px rule (indigo on the TEE layers), the layer's icon, its
   code and short name ("T5 Agents"), the TEE label, then the examples in
   quiet ink. The code and name are the link, and its target covers the
   head line across the row, the name area that opens the layer; the
   examples under it are not part of it */
.hero-layers {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--hero-labels, 63%);
  min-width: 13rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-layer {
  position: absolute;
  top: var(--ly);
  left: 0;
  transform: translateY(-50%);
  padding-left: 0.6rem;
  border-left: 2px solid var(--rule);
  white-space: nowrap;
}
.hero-layer.is-tee { border-left-color: var(--tee-ink); }
.hero-layer-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font: 600 var(--fs-2)/1.25 var(--sans);
}
.hero-layer-icon {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-layer.is-tee .hero-layer-icon { stroke: var(--tee-ink); }
.hero-layer[data-layer] .hero-layer-icon { stroke: var(--hl-icon, var(--ink-2)); }
.hero-layer[data-layer="institutions"] { --hl-icon: var(--hl-institutions); }
.hero-layer[data-layer="evaluations"] { --hl-icon: var(--hl-evaluations); }
.hero-layer[data-layer="agents"] { --hl-icon: var(--hl-agents); }
.hero-layer[data-layer="outputs"] { --hl-icon: var(--hl-outputs); }
.hero-layer[data-layer="models"] { --hl-icon: var(--hl-models); }
.hero-layer[data-layer="runtime"] { --hl-icon: var(--hl-runtime); }
.hero-layer[data-layer="hardware"] { --hl-icon: var(--hl-hardware); }
.hero-layer-link {
  color: var(--ink-strong);
  text-decoration: none;
}
/* The name area: the link's target spans the head line, from the row's
   rule to the column's edge, 0.3rem above it and 0.15rem below, short of
   the examples (0.2rem down), so it is at least 24px tall and a pointer
   on the examples reaches them, not the name */
.hero-layer-link::after {
  content: "";
  position: absolute;
  inset: -0.3rem 0 -0.15rem calc(-0.6rem - 2px);
}
.hero-layer-link:hover,
.hero-layer-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
/* The layer's code before its name, as the story tags write it: a quiet
   prefix in --ink-3 and medium weight, which takes the name's colour while
   the name is lit; screen readers hear "T5, Agents" (a hidden comma). An
   inline block, so the name's underline under the mouse leaves it out */
.hero-layer-code {
  display: inline-block;
  margin-right: 0.3em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.hero-layer-link:is(:hover, :focus-visible) .hero-layer-code,
.hero-layer.is-active .hero-layer-code { color: inherit; }
.hero-layer-head .tag { margin-left: 0.15rem; padding: 0.05rem 0.3rem; }
.hero-examples {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.2rem;
  padding-left: 1.45rem;
  font: 400 var(--fs-1)/1.25 var(--sans);
  color: var(--ink-3);
}
.hero-ex {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
/* Vendor marks in their brand colour (sitegen/logos.py sets --logo and
   --logo-dark on each); forced colours draw them in CanvasText */
.hero-logo {
  display: block;
  flex: none;
  fill: var(--logo, currentColor);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-logo { fill: var(--logo-dark, var(--logo, currentColor)); }
}
:root[data-theme="dark"] .hero-logo { fill: var(--logo-dark, var(--logo, currentColor)); }
.hero-sep { opacity: 0.6; }
/* The TEE label sits above the link's target, so its title shows on
   hover. The marks lie outside the target: a pointer on a mark reaches the
   mark, whose brand name hero.js shows in a tooltip (21.10) */
.hero-layer-head .tag {
  position: relative;
  z-index: 1;
}

/* Without hero.js, the hovered or focused label lights its rule and its
   leader line; with it, the open layer's label is lit instead (21.3), so
   a focused label and a hovered one never light at once. Only where
   scripts never run: a :has() over :hover makes the browser restyle the
   whole stage each time the pointer crosses a label, which the script's
   own lighting has no need of */
@media (scripting: none) {
  .hero-visual:not([data-enhanced]) .hero-layer:has(.hero-layer-link:is(:hover, :focus-visible)) { border-left-color: var(--accent); }
  .hero-visual:not([data-enhanced]) .hero-stage:has(.hero-layer:nth-child(1) .hero-layer-link:is(:hover, :focus-visible)) .hero-leader:nth-child(1),
  .hero-visual:not([data-enhanced]) .hero-stage:has(.hero-layer:nth-child(2) .hero-layer-link:is(:hover, :focus-visible)) .hero-leader:nth-child(2),
  .hero-visual:not([data-enhanced]) .hero-stage:has(.hero-layer:nth-child(3) .hero-layer-link:is(:hover, :focus-visible)) .hero-leader:nth-child(3),
  .hero-visual:not([data-enhanced]) .hero-stage:has(.hero-layer:nth-child(4) .hero-layer-link:is(:hover, :focus-visible)) .hero-leader:nth-child(4),
  .hero-visual:not([data-enhanced]) .hero-stage:has(.hero-layer:nth-child(5) .hero-layer-link:is(:hover, :focus-visible)) .hero-leader:nth-child(5),
  .hero-visual:not([data-enhanced]) .hero-stage:has(.hero-layer:nth-child(6) .hero-layer-link:is(:hover, :focus-visible)) .hero-leader:nth-child(6),
  .hero-visual:not([data-enhanced]) .hero-stage:has(.hero-layer:nth-child(7) .hero-layer-link:is(:hover, :focus-visible)) .hero-leader:nth-child(7) {
    stroke: var(--accent);
    opacity: 1;
  }
}

/* The pause control: 13px Plex Sans, square, no blur, on the page ground */
:is(.verification-motion, [data-motion-toggle]) {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.25rem;
  margin: 0;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
  font: 500 0.8125rem/1.3 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  cursor: pointer;
}
:is(.verification-motion, [data-motion-toggle]):hover {
  border-color: var(--ink-3);
  color: var(--ink-strong);
}
:is(.verification-motion, [data-motion-toggle]) svg {
  display: block;
  flex: none;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
}
:is(.verification-motion, [data-motion-toggle]) .verification-play-icon { display: none; }

/* "Check all layers": in the pause control's place, and drawn like it, until
   every layer is checked; then hero.js hides it and shows the control */
.hero-all {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  min-height: 2.25rem;
  margin: 0;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
  font: 500 0.8125rem/1.3 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  cursor: pointer;
}
.hero-all:hover { border-color: var(--ink-3); color: var(--ink-strong); }
[data-motion="paused"] :is(.verification-motion, [data-motion-toggle]) .verification-pause-icon { display: none; }
[data-motion="paused"] :is(.verification-motion, [data-motion-toggle]) .verification-play-icon { display: block; }

/* "Still image": shown instead of the control under reduced motion */
.verification-static-label {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 0.35rem 0.7rem;
  font: 500 0.8125rem/1.3 var(--sans);
  color: var(--ink-3);
}

/* The figure has no caption: the scene's description says what it shows,
   and the two links to the Stack page follow the stage (21.2) */

/* The scene animates itself (its pulse runs only under [data-animated])
   and pauses its pulse and pings itself under data-motion="paused" and
   "suspended" (the control, off-screen, a hidden tab, an open card): no
   page rule reaches into it, and none matches every element of the
   figure, since data-motion changes each time a card opens or closes */

/* Reduced motion: the still frame, "Still image" in place of the control,
   and no animation or transition anywhere in the hero */
@media (prefers-reduced-motion: reduce) {
  [data-verification-visual] * { animation: none !important; transition: none !important; }
  :is(.verification-motion, [data-motion-toggle]) { display: none !important; }
  .verification-static-label { display: block; }
  [data-hv-checked]:not([data-hv-checked="7"]) .verification-static-label { display: none; }
}
@media (pointer: coarse) {
  :is(.verification-motion, [data-motion-toggle]),
  .hero-all { min-height: 2.75rem; padding-inline: 0.8rem; }
}

/* Phones, and larger default text below 45em: the control at the right
   above the scene, the scene centred at up to 24rem, and the labels as a
   ruled list under it (name and TEE label, then the examples) */
@media (max-width: 44.999em) {
  .hero-visual { display: flex; flex-direction: column; }
  .hero-art { width: auto; max-width: 24rem; margin-inline: auto; }
  .hero-leaders { display: none; }
  .hero-layers {
    position: static;
    min-width: 0;
    margin-top: 1.25rem;
    border-top: 2px solid var(--rule-strong);
  }
  .hero-layer {
    position: relative;
    top: auto;
    transform: none;
    padding: 0.6rem 0;
    border-left: 0;
    border-bottom: 1px solid var(--rule);
    white-space: normal;
  }
  .hero-examples { flex-wrap: wrap; margin-top: 0.3rem; }
  :is(.verification-motion, [data-motion-toggle]),
  .verification-static-label,
  .hero-all { position: static; align-self: flex-end; margin-bottom: 0.75rem; }
}

/* --------------------------------------------------------------------------
   19.5 The verification stack: seven rows, T7 at the top. Each row names
   the layer, its checkable claim and what a TEE contributes. The TEE
   lines form a spine: a strong rule on a wash where the evidence is
   direct (T1, T2), a faded rule above. The reach label says it in words.
   The table is on the Stack page only: head, body, topics, coverage.
   -------------------------------------------------------------------------- */
.layer-table {
  list-style: none;
  border-top: 1px solid var(--rule);
}
.layer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0.6rem 1.75rem;
  padding: 1.05rem 0 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.layer-row > * { min-width: 0; }
.layer-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
}
.layer-code {
  display: inline-block;
  flex: none;
  min-width: 1.45rem;
  font: 500 var(--fs-2)/1.3 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.layer-name {
  min-width: 0;
  font: 600 var(--fs-5)/1.3 var(--serif);
  letter-spacing: 0;
  color: var(--ink-strong);
}
.layer-body { display: grid; gap: 0.65rem; min-width: 0; }
.layer-body > * { min-width: 0; }
.layer-claim {
  max-width: 44rem;
  font: italic 400 var(--fs-4)/1.5 var(--serif);
  color: var(--ink-2);
}
/* Column labels show once, on the first row, like a table head; screen
   readers keep them on every row */
.layer-claim-label,
.layer-tee-label {
  display: block;
  margin-bottom: 0.2rem;
  font: normal 600 var(--fs-1)/1.35 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}
.layer-tee-label { color: var(--tee-ink); }
.layer-row:not(:first-child) .layer-claim-label,
.layer-row:not(:first-child) .layer-tee-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.layer-tee {
  max-width: 44rem;
  padding: 0.1rem 0 0.15rem 0.75rem;
  border-left: 3px solid var(--tee-rule);
  font: 400 var(--fs-3)/1.55 var(--sans);
  color: var(--ink);
}
.layer-row[data-reach="direct"] .layer-tee {
  padding: 0.4rem 0.75rem;
  border-left-color: var(--tee-ink);
  background: var(--tee-wash);
}
.layer-reach {
  display: block;
  margin-bottom: 0.1rem;
  font: 600 var(--fs-1)/1.35 var(--sans);
  letter-spacing: 0;
  color: var(--tee-ink);
}
.layer-others {
  max-width: 44rem;
  font: 400 var(--fs-3)/1.55 var(--sans);
  color: var(--ink-2);
}
.layer-others a { color: var(--ink); text-decoration-color: var(--accent-line); text-underline-offset: 0.2em; }
.layer-others a:hover { color: var(--accent); text-decoration-color: currentColor; }
.layer-topics { display: flex; flex-wrap: wrap; align-content: start; gap: 0.375rem; }
.layer-cover {
  font: 400 var(--fs-2)/1.45 var(--sans);
  color: var(--ink-3);
}
.layer-cover > * + * { margin-top: 0.35rem; }
.layer-cover a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
.layer-cover a:hover { color: var(--accent); text-decoration-color: currentColor; }
.layer-cover time { white-space: nowrap; }
/* Stack page: "More on this layer" folds the TEE line in full, the other
   evidence and the newest brief, as short paragraphs in the row's voice */
.layer-more > p {
  max-width: 44rem;
  font: 400 var(--fs-3)/1.55 var(--sans);
  color: var(--ink-2);
}
.layer-more > p + p { margin-top: 0.55rem; }
.layer-more > .layer-tee-text { color: var(--ink); }
.layer-more time { white-space: nowrap; }
.layer-more > p a { color: var(--ink); text-decoration-color: var(--accent-line); text-underline-offset: 0.2em; }
.layer-more > p a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* The row a link lands on (an article's Filing box, search) is highlighted */
.layer-row:target,
.tier:target:not([data-tier="tee"], #tier-tee, .tier-tee),
.limit:target,
.path-step:target {
  background: var(--hl);
  box-shadow: -0.5rem 0 0 var(--hl), 0.5rem 0 0 var(--hl);
}

/* The block's closing lines: the chain legend, then the tags note */
.stack-block > p:not(.block-dek, .tags-note) { margin-top: 1rem; }
.stack-block > p:not(.block-dek) + .tags-note { margin-top: 0.4rem; }

/* --------------------------------------------------------------------------
   19.6 Trust tiers: the order note, the provider's word as an unnumbered
   baseline, then five open rows. Each row hangs its heading in a left
   column from 1024px. The TEE tier sits on the wash under a 3px rule.
   -------------------------------------------------------------------------- */
.tiers-note {
  max-width: 46rem;
  padding-left: 1rem;
  border-left: 1px solid var(--ink-3);
  font: 400 var(--fs-4)/1.6 var(--sans);
  color: var(--ink-2);
}
.tier-baseline {
  margin-top: 1.75rem;
  padding: 1rem 1.15rem 1.15rem;
  border: 1px solid var(--rule);
}
.tier-baseline > * + * { margin-top: 0.4rem; }
.tier-baseline h3,
.tier-baseline .tier-title,
.tier-baseline .baseline-name {
  font: 600 var(--fs-6)/1.3 var(--serif);
  color: var(--ink-strong);
}
.tier-baseline p { max-width: 46rem; font: 400 var(--fs-3)/1.6 var(--sans); color: var(--ink-2); }
.tier-baseline .baseline-label,
.tier-baseline .tier-baseline-label,
.tier-baseline .tier-label {
  font: 600 var(--fs-1)/1.35 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}
.tier {
  padding: 1.6rem 0 1.75rem;
  border-top: 1px solid var(--rule);
}
:is(.tier-baseline, .tiers-note) + .tier { margin-top: 1.75rem; }
.tier:last-of-type { border-bottom: 1px solid var(--rule); }
.tier-body { min-width: 0; }
.tier-body > * + * { margin-top: 0.7rem; }
.tier-title {
  font: 600 1.375rem/1.25 var(--serif);
  letter-spacing: -0.005em;
  color: var(--ink-strong);
  text-wrap: pretty;
}
.tier-n { color: var(--ink-3); white-space: nowrap; }
.tier-mech {
  font: 500 var(--fs-3)/1.45 var(--sans);
  color: var(--ink-2);
}
.tier-body > .tier-mech { margin-top: 0.35rem; }
.tier-fields { max-width: 52rem; }
.tier details { max-width: 52rem; }
.tier-includes,
.tier-read {
  max-width: 46rem;
  font: 400 var(--fs-3)/1.55 var(--sans);
  color: var(--ink-3);
}
.tier-read { color: var(--ink-2); }
.tiers-he-note {
  max-width: 46rem;
  margin-top: 1.25rem;
  font: 400 var(--fs-3)/1.55 var(--sans);
  color: var(--ink-3);
}
/* "Why we compare from a TEE": the section's closing link, after a pause */
.tiers > .read-more { margin-top: 1rem; }

/* The TEE tier: the main subject, on the wash under a 3px indigo rule */
.tier:is([data-tier="tee"], #tier-tee, .tier-tee) {
  --band-l: 1rem;
  --band-r: 1rem;
  margin-left: calc(-1 * var(--band-l));
  margin-right: calc(-1 * var(--band-r));
  padding: 1.4rem var(--band-r) 1.6rem var(--band-l);
  border-top: 3px solid var(--tee-ink);
  background: var(--tee-wash);
}
.tier:is([data-tier="tee"], #tier-tee, .tier-tee) + .tier { border-top-color: transparent; }
.tier-main-label {
  display: inline-block;
  font: 600 var(--fs-1)/1.35 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--tee-ink);
}
.tier-title .tier-main-label { margin-left: 0.5rem; vertical-align: 0.3em; }
.tier-hub,
.tier-hub-link {
  font: 600 var(--fs-3)/1.4 var(--sans);
}
:is(.tier-hub, .tier-hub-link) a,
a:is(.tier-hub, .tier-hub-link) { color: var(--accent); text-decoration: none; }
:is(.tier-hub, .tier-hub-link) a:hover,
a:is(.tier-hub, .tier-hub-link):hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 0.2em; }

/* Combinations in practice: three text cards */
.combos,
.combo-list,
:has(> .combo) {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.75rem 2.5rem;
}
.combo { min-width: 0; padding-top: 0.85rem; border-top: 1px solid var(--rule-strong); }
.combo > * + * { margin-top: 0.5rem; }
.combo h3,
.combo .combo-title { font: 600 var(--fs-5)/1.3 var(--serif); color: var(--ink-strong); }
.combo :is(h3, .combo-title) a { color: inherit; text-decoration: none; }
.combo :is(h3, .combo-title) a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.15em; }
.combo p { font: 400 var(--fs-3)/1.6 var(--sans); color: var(--ink-2); }
.combo .combo-tiers,
.combo .combo-meta { font: 500 var(--fs-2)/1.45 var(--sans); color: var(--ink-3); }

/* The topic index on the Stack page: compact text rows */
.topic-index {
  list-style: none;
  border-top: 1px solid var(--rule);
}
.topic-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3rem 2rem;
  padding: 0.95rem 0 1rem;
  border-bottom: 1px solid var(--rule);
}
.topic-row > * { min-width: 0; }
.topic-row h3,
.topic-row .topic-row-name { font: 600 var(--fs-5)/1.3 var(--serif); color: var(--ink-strong); }
.topic-row :is(h3, .topic-row-name) a { color: inherit; text-decoration: none; }
.topic-row :is(h3, .topic-row-name) a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.15em; }
.topic-row p { font: 400 var(--fs-3)/1.55 var(--sans); color: var(--ink-2); }
.topic-row .topic-row-tiers,
.topic-row .topic-row-count,
.topic-row .tile-count { font: 400 var(--fs-2)/1.45 var(--sans); color: var(--ink-3); }
.topic-row .tier-main-label,
.topic-row .topic-main-label { margin-left: 0.45rem; }

/* The tier summary (Vision): booktabs, three columns */
table.tier-summary {
  width: 100%;
  margin: 1.6em 0;
  border-collapse: collapse;
  border-top: 2px solid var(--rule-strong);
  border-bottom: 2px solid var(--rule-strong);
  font: 400 var(--fs-3)/1.5 var(--sans);
  letter-spacing: 0;
}
table.tier-summary th {
  padding: 0.7rem 1rem 0.55rem 0;
  border-bottom: 1px solid var(--rule-strong);
  font: 600 var(--fs-2)/1.3 var(--sans);
  text-align: left;
  vertical-align: bottom;
  color: var(--ink-2);
}
table.tier-summary td,
table.tier-summary tbody th {
  padding: 0.65rem 1rem 0.7rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font: 400 var(--fs-3)/1.5 var(--sans);
  vertical-align: top;
  color: var(--ink);
}
table.tier-summary tr:last-child td,
table.tier-summary tr:last-child th { border-bottom: 0; }
table.tier-summary td:last-child,
table.tier-summary th:last-child { padding-right: 0; }
table.tier-summary tbody td:first-child,
table.tier-summary tbody th:first-child { font-weight: 600; color: var(--ink-strong); }

/* --------------------------------------------------------------------------
   19.7 Path lists: a numbered reading order. Each step gives the kind and
   reading time, the title and what the reader can do afterwards. The hub
   and the home page use the compact .path-mini.
   -------------------------------------------------------------------------- */
.path {
  list-style: none;
  border-top: 1px solid var(--rule);
}
.path-step {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: start;
  column-gap: 1rem;
  padding: 1.1rem 0 1.2rem;
  border-bottom: 1px solid var(--rule);
}
.path-step > * { grid-column: 2; min-width: 0; }
.path-step > .path-n { grid-column: 1; grid-row: 1 / span 3; }
.path-n {
  font: 500 1.75rem/1 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-3);
}
.path-body { min-width: 0; }
.path-body > * + * { margin-top: 0.3rem; }
.path-kind,
.path-meta {
  font: 400 var(--fs-2)/1.4 var(--sans);
  color: var(--ink-3);
}
.path-title {
  font: 600 var(--fs-6)/1.3 var(--serif);
  letter-spacing: 0;
  color: var(--ink-strong);
}
.path-title a { color: inherit; text-decoration: none; }
.path-title a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.14em; }
.path-outcome {
  max-width: 40rem;
  font: 400 var(--fs-3)/1.6 var(--sans);
  color: var(--ink-2);
}
.path-body > .path-outcome { margin-top: 0.4rem; }
.path-step.is-planned .path-title { font-weight: 500; color: var(--ink-2); }
.path-step.is-planned .path-n { color: var(--ink-3); }
.path-step.is-planned .path-planned,
.path-step.is-planned .path-status,
.path-step.is-planned .path-label {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--rule);
  font: 500 var(--fs-1)/1.3 var(--sans);
  color: var(--ink-3);
  vertical-align: 0.12em;
}
.path-mini .path-step {
  grid-template-columns: 1.75rem minmax(0, 1fr);
  column-gap: 0.75rem;
  padding: 0.8rem 0 0.85rem;
}
.path-mini .path-n { font-size: 1.25rem; line-height: 1.15; }
.path-mini .path-title { font-size: var(--fs-4); line-height: 1.35; }
.path-mini .path-outcome { font-size: var(--fs-3); }
/* Planned steps on the hub follow the published ones without a gap rule */
.path-mini .path-step.is-planned { padding: 0.6rem 0 0.65rem; }

/* --------------------------------------------------------------------------
   19.8 Home: the TEE block in two columns from 960px, and "Checks you
   can run"
   -------------------------------------------------------------------------- */
.tee-block,
.checks-block { margin-top: 3.5rem; }
.tee-block > * { min-width: 0; }
/* Below 960px the two columns stack, and the gap keeps the path's heading
   off the last brief's rule */
.tee-block .tee-col + .tee-col { margin-top: 2.25rem; }
:is(.tee-block, .checks-block) h3.mini-title,
:is(.tee-block, .checks-block) .tee-col-title,
:is(.tee-block, .checks-block) .col-title {
  margin: 0 0 0.6rem;
  font: 600 var(--fs-4)/1.35 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-strong);
}
/* Text rows (Latest on TEEs): serif title, then date · publisher and tags */
.tee-latest,
.tee-news,
.tee-briefs {
  list-style: none;
  border-top: 1px solid var(--rule);
}
:is(.tee-latest, .tee-news, .tee-briefs) > li,
.brief-row {
  padding: 0.85rem 0 0.9rem;
  border-bottom: 1px solid var(--rule);
}
.brief-row h3,
.brief-row h4,
.brief-row .brief-title {
  font: 600 1.0625rem/1.35 var(--serif);
  color: var(--ink-strong);
}
.brief-row :is(h3, h4, .brief-title) a { color: inherit; text-decoration: none; }
.brief-row :is(h3, h4, .brief-title) a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.brief-row p { margin-top: 0.35rem; font: 400 var(--fs-2)/1.45 var(--sans); color: var(--ink-3); }

/* Checks: text cards with a count line */
.checks-block > ul,
.checks-block > ol {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.75rem 2.5rem;
}
.checks-block > :is(ul, ol) > li { min-width: 0; }
:is(.check-card, .worksheet-card, .checks-block .card) .card-meta,
:is(.check-card, .worksheet-card, .checks-block .card) .check-meta,
:is(.check-card, .worksheet-card, .checks-block .card) .ws-meta,
:is(.check-card, .worksheet-card, .checks-block .card) .ws-steps {
  margin-top: 0.55rem;
  font: 400 var(--fs-2)/1.45 var(--sans);
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   19.9 The TEE hub (/topics/confidential-computing/): full width, no
   aside. Sections follow the head in reading order; trackers are dated
   and fold their longer fields.
   -------------------------------------------------------------------------- */
.page-tee .page-head .kicker .kind::before { content: none; display: none; }
/* The hub's head closes on the TEE rule, the page's only coloured rule */
.page-tee .page-head { border-bottom: 3px solid var(--tee-ink); }
/* A section that opens right under a page head needs no rule of its own */
.page-head + section > .block-head:first-child { padding-top: 0; border-top: 0; }
.tee-head .page-dek { max-width: 40em; }
.tee-head > p:not(.kicker, .page-dek) {
  margin-top: 1rem;
  font: 600 var(--fs-3)/1.4 var(--sans);
}
.tee-head > p:not(.kicker, .page-dek) a,
.hub-why a,
a.hub-why { color: var(--accent); text-decoration: none; }
.tee-head > p:not(.kicker, .page-dek) a:hover,
.hub-why a:hover,
a.hub-why:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 0.2em; }
/* Sections on the hub, Stack, Learn and Resources pages sit 3.5rem apart */
:where(.page-tee, .page-topics, .page-learn, .page-resources, .page-vision) main .wrap > section + section,
:where(.page-tee) main :is(.hub, .tee-hub) > section + section { margin-top: 3.5rem; }
/* The hub's intro paragraphs. Keyed to their class, not to "a paragraph
   with no class": a :not([class]) before "+ *" or " a" makes the browser
   restyle the next sibling's subtree, or every link, under any element
   anywhere whose class changes, such as the home hero's rows */
.hub-intro {
  max-width: 46rem;
  font: 400 var(--fs-4)/1.6 var(--sans);
  color: var(--ink-2);
}
.hub-intro + * { margin-top: 1.25rem; }
.hub-intro a { color: var(--ink); text-decoration-color: var(--accent-line); text-underline-offset: 0.2em; }
.hub-intro a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* What a checked report establishes: two lists side by side from 760px */
.hub-cols,
.establishes,
.hub-establishes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem 3rem;
}
:is(.hub-cols, .establishes, .hub-establishes) > * { min-width: 0; }
:is(.hub-cols, .establishes, .hub-establishes) h3,
:is(.hub-cols, .establishes, .hub-establishes) .hub-col-title {
  margin-bottom: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--rule-strong);
  font: 600 var(--fs-4)/1.35 var(--sans);
  color: var(--ink-strong);
}
:is(.hub-cols, .establishes, .hub-establishes) ul,
:is(.hub-cols, .establishes, .hub-establishes) ol,
.hub-list {
  list-style: none;
  display: grid;
}
:is(.hub-cols, .establishes, .hub-establishes) :is(ul, ol) > li,
.hub-list > li {
  position: relative;
  padding: 0.55rem 0 0.6rem 1.1rem;
  border-bottom: 1px solid var(--rule-soft);
  font: 400 var(--fs-4)/1.55 var(--sans);
  color: var(--ink);
}
:is(.hub-cols, .establishes, .hub-establishes) :is(ul, ol) > li::before,
.hub-list > li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--ink-3);
}
.boundary,
.hub-boundary {
  max-width: 46rem;
  margin-top: 1.25rem;
  padding-left: 1rem;
  border-left: 1px solid var(--ink-3);
  font: 400 var(--fs-5)/1.55 var(--serif);
  color: var(--ink-strong);
}
.hub-links,
.hub-more {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin-top: 1rem;
  font: 600 var(--fs-3)/1.4 var(--sans);
}
:is(.hub-links, .hub-more) a { color: var(--accent); text-decoration: none; }
:is(.hub-links, .hub-more) a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 0.2em; }
/* "Open questions and core techniques": a fold on its own line under the
   links, its questions and techniques held to the reading measure */
.page-tee section > details { max-width: 46rem; margin-top: 1.75rem; }
.page-tee section > details > .mini-title { margin-top: 1.4rem; }
.page-tee section > details > summary + .mini-title { margin-top: 0; }
.page-tee details .question-list { margin-top: 0.45rem; gap: 0.5rem; }
.page-tee details .technique-list { margin-top: 0.5rem; max-width: 46rem; }

/* Platforms: CPU and GPU groups side by side from 1024px */
.platform-group { min-width: 0; }
.platform-group + .platform-group { margin-top: 2.5rem; }
.platform-group > h3,
.platform-group > .platform-group-title {
  margin-bottom: 0.25rem;
  font: 600 var(--fs-4)/1.35 var(--sans);
  color: var(--ink-strong);
}
.platform-group > article,
.platform-group > .platform,
.platform-group > .platform-card {
  min-width: 0;
  padding: 1rem 0 1.1rem;
  border-top: 1px solid var(--rule);
}
.platform-group > article:last-of-type,
.platform-group > .platform:last-of-type,
.platform-group > .platform-card:last-of-type { border-bottom: 1px solid var(--rule); }
.platform-group > :is(article, .platform, .platform-card) > * + * { margin-top: 0.55rem; }
:is(.platform, .platform-card, .platform-group > article) h3,
:is(.platform, .platform-card, .platform-group > article) h4 {
  font: 600 var(--fs-5)/1.3 var(--serif);
  color: var(--ink-strong);
}
.platform-fields { max-width: 40rem; }
.platform-sources,
.limit-sources,
.tracker-sources,
.sources-line {
  font: 400 var(--fs-2)/1.5 var(--sans);
  color: var(--ink-3);
}
.platform-note,
.gpu-note {
  max-width: 40rem;
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 1px solid var(--ink-3);
  font: 400 var(--fs-3)/1.6 var(--sans);
  color: var(--ink-2);
}

/* The services tracker: booktabs on wide screens, one block per service
   on phones, each cell headed by its data-label */
.tracker {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--rule-strong);
  border-bottom: 2px solid var(--rule-strong);
  font: 400 var(--fs-3)/1.5 var(--sans);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
}
.table-wrap > .tracker { border-top: 0; border-bottom: 0; }
.tracker th {
  padding: 0.7rem 1.25rem 0.55rem 0;
  border-bottom: 1px solid var(--rule-strong);
  font: 600 var(--fs-2)/1.3 var(--sans);
  text-align: left;
  vertical-align: bottom;
  color: var(--ink-2);
}
.tracker td,
.tracker tbody th {
  padding: 0.8rem 1.25rem 0.85rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font: 400 var(--fs-3)/1.5 var(--sans);
  text-align: left;
  vertical-align: top;
  color: var(--ink);
}
.tracker tr:last-child td,
.tracker tr:last-child th { border-bottom: 0; }
.tracker td:last-child,
.tracker th:last-child { padding-right: 0; }
/* The first cell names the service in serif; its sources sit under it */
.tracker tbody td:first-child,
.tracker tbody th:first-child {
  width: 24%;
  font: 600 var(--fs-4)/1.35 var(--serif);
  color: var(--ink-strong);
}
.tracker tbody :is(td, th):first-child p,
.tracker tbody :is(td, th):first-child ul,
.tracker tbody :is(td, th):first-child ol,
.tracker tbody :is(td, th):first-child small,
.tracker tbody :is(td, th):first-child .tracker-sources,
.tracker tbody :is(td, th):first-child .sources-line {
  display: block;
  margin-top: 0.3rem;
  font: 400 var(--fs-2)/1.45 var(--sans);
  color: var(--ink-3);
}
.tracker ul,
.tracker ol { list-style: none; }
/* An open sources fold lists one source per line, a little apart, so a
   title that wraps does not run into the next */
.tracker details li + li { margin-top: 0.4rem; }
.tracker-note,
.as-of {
  max-width: 46rem;
  margin-top: 0.85rem;
  font: 400 var(--fs-2)/1.5 var(--sans);
  color: var(--ink-3);
}
.tracker-note + .as-of,
.as-of + .tracker-note { margin-top: 0.3rem; }

/* Attacks and limits: newest first; the date hangs left from 760px */
.limits {
  list-style: none;
  border-top: 1px solid var(--rule);
}
.limit {
  padding: 1.1rem 0 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.limit > * + * { margin-top: 0.5rem; }
.limit > time,
.limit > .limit-date,
.limit > .date {
  display: block;
  font: 400 var(--fs-3)/1.4 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.limit > h3,
.limit > .limit-name {
  font: 600 var(--fs-6)/1.3 var(--serif);
  color: var(--ink-strong);
}
.limit .limit-kind,
.limit .limit-access-label,
.limit .limit-label,
.limit .access-label {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--rule);
  font: 500 var(--fs-1)/1.35 var(--sans);
  color: var(--ink-2);
}
.limit dl,
.limit .limit-fields,
.limit details { max-width: 46rem; }
.limit .editor-note,
.limit .limit-editor,
.limit .disclosure-note {
  font: 400 var(--fs-2)/1.5 var(--sans);
  color: var(--ink-2);
}
/* Responses: headed like the hub's other sub-sections; each response is a
   serif name, its text, then its sources in the quieter sources line */
.responses,
.limit-responses { max-width: 46rem; margin-top: 2.25rem; }
:is(.responses, .limit-responses) > h3 {
  margin-bottom: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--rule-strong);
  font: 600 var(--fs-4)/1.35 var(--sans);
  color: var(--ink-strong);
}
:is(.responses, .limit-responses) > h4 {
  margin-top: 1.25rem;
  font: 600 var(--fs-5)/1.3 var(--serif);
  color: var(--ink-strong);
}
:is(.responses, .limit-responses) > h3 + h4 { margin-top: 0; }
:is(.responses, .limit-responses) > h4 time { font: 400 var(--fs-3)/1.3 var(--sans); color: var(--ink-3); }
:is(.responses, .limit-responses) p:not(.limit-sources) { margin-top: 0.35rem; font: 400 var(--fs-3)/1.6 var(--sans); color: var(--ink-2); }
:is(.responses, .limit-responses) .limit-sources { margin-top: 0.45rem; }

/* Primary documents: two columns of reading lists from 760px. The columns
   flow on their own (multi-column, each group kept whole), so a short list
   leaves no hole beside a long one. The space between groups is padding,
   not margin, so the second column starts level with the first in every
   engine */
.reading-grid { display: block; column-gap: 3rem; }
.reading-grid > * {
  min-width: 0;
  break-inside: avoid;
}
.reading-grid > :not(:last-child) { padding-bottom: 1.75rem; }
.reading-grid h3,
.reading-grid h4 {
  margin-bottom: 0.15rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--rule-strong);
  font: 600 var(--fs-4)/1.35 var(--sans);
  color: var(--ink-strong);
}
.reading-grid ul,
.reading-grid ol { list-style: none; }
.reading-grid li {
  padding: 0.55rem 0 0.6rem;
  border-bottom: 1px solid var(--rule-soft);
  font: 400 var(--fs-3)/1.45 var(--sans);
  color: var(--ink-3);
}
.reading-grid li:last-child { border-bottom: 0; }
.reading-grid li a {
  font: 500 var(--fs-4)/1.4 var(--sans);
  color: var(--ink-strong);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.reading-grid li a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
.reading-grid li > span:not(.ext-mark),
.reading-grid li > small:not(.ext-mark),
.reading-grid li > p:not(.ext-mark) { display: block; margin-top: 0.15rem; }
.reading-grid .reading-terms .chips { margin-top: 0.6rem; }
.page-tee .terms,
.page-tee .hub-terms { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   19.10 Learn: worksheet cards and term cards
   -------------------------------------------------------------------------- */
.worksheet-cards,
.ws-row,
:has(> .worksheet-card) {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.75rem 2.5rem;
}
/* When the cards share a parent with a heading, the heading spans the row */
:has(> .worksheet-card) > :not(.worksheet-card),
:has(> .combo) > :not(.combo),
:has(> .rpath) > :not(.rpath) { grid-column: 1 / -1; }
.worksheet-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule-strong);
}
.worksheet-card h3,
.worksheet-card .card-title { font: 600 var(--fs-6)/1.3 var(--serif); letter-spacing: 0; color: var(--ink-strong); }
.worksheet-card :is(h3, .card-title) a { color: inherit; text-decoration: none; }
.worksheet-card :is(h3, .card-title) a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.15em; }
.worksheet-card p { font: 400 var(--fs-3)/1.55 var(--sans); color: var(--ink-2); }
.worksheet-card .ws-kind,
.worksheet-card .kicker { margin: 0; font: 500 var(--fs-2)/1.4 var(--sans); color: var(--ink-3); }
.worksheet-card .ws-needs,
.worksheet-card .needs { color: var(--ink); }
.worksheet-card .ws-steps,
.worksheet-card .steps { margin-top: auto; padding-top: 0.2rem; color: var(--ink-3); }

.term-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 2.5rem;
  border-top: 1px solid var(--rule);
}
.term-cards > div,
.term-card {
  min-width: 0;
  padding: 0.85rem 0 0.95rem;
  border-bottom: 1px solid var(--rule);
}
.term-cards dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; }
.term-cards .term-name,
.term-cards dt > :first-child { font: 600 var(--fs-5)/1.3 var(--serif); color: var(--ink-strong); }
.term-cards :is(.term-name, dt > :first-child) a { color: inherit; text-decoration: none; }
.term-cards :is(.term-name, dt > :first-child) a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.15em; }
.term-cards .term-alt { font: 400 var(--fs-3)/1.4 var(--sans); color: var(--ink-3); }
.term-cards dd { margin: 0.3rem 0 0; font: 400 var(--fs-3)/1.6 var(--sans); color: var(--ink-2); }
.term-cards + p,
.all-terms { margin-top: 1rem; font: 600 var(--fs-3)/1.4 var(--sans); }
:is(.term-cards + p, .all-terms) a { color: var(--accent); text-decoration: none; }
:is(.term-cards + p, .all-terms) a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 0.2em; }

/* All explainers and guides: a compact dated list */
.compact-list {
  list-style: none;
  border-top: 1px solid var(--rule);
}
.compact-list > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.15rem 1.5rem;
  padding: 0.7rem 0 0.75rem;
  border-bottom: 1px solid var(--rule);
}
.compact-list > li > * { min-width: 0; }
.compact-list time,
.compact-list .compact-date { font: 400 var(--fs-2)/1.45 var(--sans); color: var(--ink-3); }
.compact-list a { font: 600 var(--fs-4)/1.4 var(--serif); color: var(--ink-strong); text-decoration: none; }
.compact-list a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.15em; }

/* --------------------------------------------------------------------------
   19.11 Resources: reading paths, the TEE area filter and catalog trust
   lines
   -------------------------------------------------------------------------- */
.rpaths,
.reading-paths,
:has(> .rpath) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem 3rem;
}
.rpath {
  min-width: 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule-strong);
}
.rpath > * + * { margin-top: 0.45rem; }
.rpath > h2,
.rpath > h3 { font: 600 var(--fs-6)/1.3 var(--serif); letter-spacing: 0; color: var(--ink-strong); }
.rpath > p { max-width: 40rem; font: 400 var(--fs-3)/1.55 var(--sans); color: var(--ink-2); }
.rpath ol {
  list-style: none;
  counter-reset: rp;
  margin-top: 0.85rem;
  border-top: 1px solid var(--rule-soft);
}
.rpath ol > li {
  counter-increment: rp;
  position: relative;
  padding: 0.6rem 0 0.65rem 1.75rem;
  border-bottom: 1px solid var(--rule-soft);
}
.rpath ol > li::before {
  content: counter(rp);
  position: absolute;
  left: 0;
  top: 0.6rem;
  font: 500 var(--fs-3)/1.45 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-3);
}
.rpath ol > li > a {
  font: 500 var(--fs-4)/1.4 var(--sans);
  color: var(--ink-strong);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.rpath ol > li > a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
.rpath ol > li > p:not(.ext-mark),
.rpath ol > li > span:not(.ext-mark),
.rpath ol > li > .rpath-why:not(.ext-mark) {
  display: block;
  margin-top: 0.15rem;
  font: 400 var(--fs-3)/1.5 var(--sans);
  color: var(--ink-2);
}

/* The catalog starts a new part of the page: the paths end, a full-width
   rule follows a section's worth of space, and the filters, the count and
   the catalog open under it */
.page-resources .rpaths-section:has(+ .filters) {
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--ink-strong);
  margin-bottom: 1.5rem;
}
/* Given a heading of its own (a block head before the filters), the catalog
   opens like the page's other sections, under that heading's rule */
.page-resources main > .wrap > .block-head { margin-top: 3.5rem; }

/* Catalog: the TEE group comes first, split by area; each group says who
   you trust */
.catalog-trust {
  max-width: 46rem;
  margin-top: 0.45rem;
  font: 400 var(--fs-3)/1.5 var(--sans);
  color: var(--ink-2);
}
.catalog-sub {
  margin-top: 1.6rem;
  padding-bottom: 0.1rem;
  font: 600 var(--fs-4)/1.35 var(--sans);
  letter-spacing: 0;
  color: var(--ink-strong);
}
.catalog-trust + .catalog-sub,
.catalog-title + .catalog-sub { margin-top: 1.1rem; }
.catalog-sub .count { margin-left: 0.35rem; font: 400 var(--fs-2)/1 var(--sans); color: var(--ink-3); }

/* --------------------------------------------------------------------------
   19.12 Topic pages: how the topic compares with a TEE, and the trust tiers
   in the aside
   -------------------------------------------------------------------------- */
.callout-tee {
  max-width: 44rem;
  border: 0;
  border-left: 3px solid var(--tee-ink);
  background: var(--tee-wash);
}
.callout-tee .callout-label { color: var(--tee-ink); }
.callout-tee .callout-body { font: 400 var(--fs-4)/1.6 var(--sans); color: var(--ink); }
.topic-aside .tier-list,
.topic-aside .tier-links { list-style: none; display: grid; }
.topic-aside :is(.tier-list, .tier-links) li {
  padding: 0.5rem 0;
  border-top: 1px solid var(--rule-soft);
  font: 500 var(--fs-3)/1.4 var(--sans);
}
.topic-aside :is(.tier-list, .tier-links) a { color: var(--ink); text-decoration-color: var(--accent-line); text-underline-offset: 0.2em; }
.topic-aside :is(.tier-list, .tier-links) a:hover { color: var(--accent); text-decoration-color: currentColor; }
.layer-list .layer-code { min-width: 1.45rem; }
.layer-list a { color: var(--ink); text-decoration-color: var(--accent-line); text-underline-offset: 0.2em; }
.layer-list a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* --------------------------------------------------------------------------
   19.13 Latest: the TEE toggle and the stack layer select join the kind
   buttons; the toggle is an ordinary filter button
   -------------------------------------------------------------------------- */
.filter-bar { align-items: center; }
.filter-layer {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  max-width: 100%;
  font: 500 var(--fs-3)/1.3 var(--sans);
  color: var(--ink-2);
}
.filter-layer select,
.filter-bar select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  max-width: 100%;
  height: 2.5rem;
  padding: 0 2.1rem 0 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background-color: var(--paper);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: right 1rem center, right 0.7rem center;
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
  background-repeat: no-repeat;
  font: 500 var(--fs-3)/1.2 var(--sans);
  color: var(--ink);
  cursor: pointer;
}
.filter-layer select:hover,
.filter-bar select:hover { border-color: var(--ink); }
.filter-layer select:focus-visible,
.filter-bar select:focus-visible { outline-offset: 1px; border-color: var(--ink); }

/* --------------------------------------------------------------------------
   19.14 Articles and Vision
   -------------------------------------------------------------------------- */
.doc-details :is(.dd-layers, .dd-tracked) dd a { color: var(--ink); text-decoration-color: var(--accent-line); text-underline-offset: 0.2em; }
.doc-details :is(.dd-layers, .dd-tracked) dd a:hover { color: var(--accent); text-decoration-color: currentColor; }
/* Each layer name stays whole and keeps a little air from the next */
.doc-details .dd-layers dd a { display: inline-block; margin-right: 0.6rem; }

/* Vision opens with the positioning paragraph as its lead */
.prose > .lead {
  font-size: 1.1em;
  line-height: 1.55;
  color: var(--ink-strong);
}
.prose > .tiers-note { font-family: var(--sans); font-size: var(--fs-4); }
.page-vision .page-title { max-width: 20ch; }

/* --------------------------------------------------------------------------
   19.15 Chinese edition
   -------------------------------------------------------------------------- */
.site[lang="zh-CN"] .tag-layers,
.site[lang="zh-CN"] .tag,
.site[lang="zh-CN"] .layer-code,
.site[lang="zh-CN"] .layer-claim-label,
.site[lang="zh-CN"] .layer-tee-label,
.site[lang="zh-CN"] .layer-reach,
.site[lang="zh-CN"] .layer-bind-label,
.site[lang="zh-CN"] .bind-status,
.site[lang="zh-CN"] .tier-main-label,
.site[lang="zh-CN"] .tier-n,
.site[lang="zh-CN"] .tier-read-label,
.site[lang="zh-CN"] .path-kind,
.site[lang="zh-CN"] .path-meta,
.site[lang="zh-CN"] .tier-baseline .baseline-label,
.site[lang="zh-CN"] .tier-baseline .tier-baseline-label,
.site[lang="zh-CN"] .tier-baseline .tier-label { font-size: var(--fs-2); letter-spacing: 0.02em; }
.site[lang="zh-CN"] :is(.tier-fields, .platform-fields, .limit-fields, .limit dl) dt,
.site[lang="zh-CN"] .path-step.is-planned .path-planned,
.site[lang="zh-CN"] .path-step.is-planned .path-status,
.site[lang="zh-CN"] .limit .limit-kind,
.site[lang="zh-CN"] .limit .limit-label,
.site[lang="zh-CN"] .limit .access-label,
.site[lang="zh-CN"] .limit .limit-access-label { font-size: var(--fs-2); letter-spacing: 0.02em; }
/* Metadata lines that carry Chinese words keep the 13px floor too */
.site[lang="zh-CN"] .resource-meta,
.site[lang="zh-CN"] .resource-checked,
.site[lang="zh-CN"] .source-meta,
.site[lang="zh-CN"] .search-meta,
.site[lang="zh-CN"] .tile-count { font-size: var(--fs-2); }
/* The Chinese tagline breaks at its comma rather than inside a word */
.site[lang="zh-CN"] .home-tagline { font-weight: 600; line-height: 1.25; letter-spacing: 0.01em; word-break: keep-all; overflow-wrap: anywhere; }
.site[lang="zh-CN"] .home-positioning,
.site[lang="zh-CN"] .home-positioning-short { font: 400 1.0625rem/1.8 var(--sans); letter-spacing: 0.02em; }
.site[lang="zh-CN"] .layer-claim { font-family: var(--cjk-serif); font-style: normal; line-height: 1.7; letter-spacing: 0.01em; }
/* The site's own Chinese headings (page, section, tier, layer and group
   names) break at spaces and punctuation, not inside a word (可|信, 度|量);
   a run too long for its line still wraps. Story titles keep ordinary,
   balanced breaking: their long runs would otherwise end on a lone
   character. The count under each stack row never breaks inside 涉及 */
.site[lang="zh-CN"] .page-title,
.site[lang="zh-CN"] .block-title,
.site[lang="zh-CN"] .tier-title,
.site[lang="zh-CN"] .layer-name,
.site[lang="zh-CN"] .rpath > h3,
.site[lang="zh-CN"] .combo h3,
.site[lang="zh-CN"] .topic-row h3,
.site[lang="zh-CN"] .catalog-title,
.site[lang="zh-CN"] .catalog-sub,
.site[lang="zh-CN"] .hub-cols h3,
.site[lang="zh-CN"] .reading-grid h3,
.site[lang="zh-CN"] .platform-group > h3,
.site[lang="zh-CN"] .responses > h3,
.site[lang="zh-CN"] .mini-title { word-break: keep-all; overflow-wrap: anywhere; }
.site[lang="zh-CN"] .layer-count { word-break: keep-all; }
.site[lang="zh-CN"] .layer-tee,
.site[lang="zh-CN"] .layer-others,
.site[lang="zh-CN"] .layer-more > p,
.site[lang="zh-CN"] .tiers-note,
.site[lang="zh-CN"] .tier-baseline p,
.site[lang="zh-CN"] .path-outcome,
.site[lang="zh-CN"] .hub-intro,
.site[lang="zh-CN"] .platform-note,
.site[lang="zh-CN"] .gpu-note,
.site[lang="zh-CN"] .catalog-trust,
.site[lang="zh-CN"] .rpath > p,
.site[lang="zh-CN"] .worksheet-card p,
.site[lang="zh-CN"] .term-cards dd,
.site[lang="zh-CN"] .combo p,
.site[lang="zh-CN"] .topic-row p,
.site[lang="zh-CN"] .responses p { line-height: 1.75; letter-spacing: 0.01em; }
.site[lang="zh-CN"] :is(.tier-fields, .platform-fields, .limit-fields, .limit dl) dd { line-height: 1.75; letter-spacing: 0.01em; }
.site[lang="zh-CN"] .layer-name,
.site[lang="zh-CN"] .tier-title,
.site[lang="zh-CN"] .path-title,
.site[lang="zh-CN"] .limit > h3,
.site[lang="zh-CN"] .rpath > h3,
.site[lang="zh-CN"] .worksheet-card h3,
.site[lang="zh-CN"] .combo h3,
.site[lang="zh-CN"] .topic-row h3 { line-height: 1.42; letter-spacing: 0.01em; }
.site[lang="zh-CN"] .boundary { font-family: var(--cjk-serif); line-height: 1.7; }
.site[lang="zh-CN"] .tracker td,
.site[lang="zh-CN"] .tracker tbody th,
.site[lang="zh-CN"] table.tier-summary td { line-height: 1.7; }

/* --------------------------------------------------------------------------
   19.16 Responsive layout
   -------------------------------------------------------------------------- */
@media (max-width: 599.98px) {
  /* Phones: the one-sentence positioning */
  .home-positioning { display: none; }
  .home-positioning-short { display: block; font-size: 1.0625rem; }
  /* The TEE tier band runs to the gutter */
  .tier:is([data-tier="tee"], #tier-tee, .tier-tee) { --band-l: var(--bleed-l); --band-r: var(--bleed-r); }
  /* The tier summary: one block per tier when cells carry labels, or a
     table that scrolls inside itself */
  table.tier-summary:has(td[data-label]) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  table.tier-summary:has(td[data-label]),
  table.tier-summary:has(td[data-label]) tbody,
  table.tier-summary:has(td[data-label]) tr,
  table.tier-summary:has(td[data-label]) td,
  table.tier-summary:has(td[data-label]) th { display: block; }
  table.tier-summary:has(td[data-label]) tr { padding: 0.75rem 0; border-bottom: 1px solid var(--rule-soft); }
  table.tier-summary:has(td[data-label]) tr:last-child { border-bottom: 0; }
  table.tier-summary:has(td[data-label]) td,
  table.tier-summary:has(td[data-label]) th { padding: 0.2rem 0; border: 0; }
  table.tier-summary td[data-label]::before {
    content: attr(data-label);
    display: block;
    font: 600 var(--fs-1)/1.35 var(--sans);
    color: var(--ink-3);
  }
  table.tier-summary:not(:has(td[data-label])) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  table.tier-summary:not(:has(td[data-label])) td,
  table.tier-summary:not(:has(td[data-label])) th { min-width: 8.5rem; }
}

@media (min-width: 600px) {
  .worksheet-cards,
  .ws-row { gap: 1.75rem 2rem; }
}

@media (min-width: 600px) and (max-width: 1023.98px) {
  /* Resources: four filters as search over three selects */
  .filters:has(> .field:nth-of-type(4)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filters:has(> .field:nth-of-type(4)) > .field-search { grid-column: 1 / -1; }
}

@media (max-width: 759.98px) {
  /* The services tracker: one block per service, cells headed by their
     data-label */
  .tracker thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tracker,
  .tracker tbody,
  .tracker tr,
  .tracker td,
  .tracker th { display: block; }
  .tracker { border-bottom-width: 1px; border-bottom-color: var(--rule); }
  .tracker tr { padding: 0.95rem 0 1rem; border-bottom: 1px solid var(--rule); }
  .tracker tr:last-child { border-bottom: 0; }
  .tracker tbody td,
  .tracker tbody th { padding: 0.25rem 0; border: 0; }
  .tracker tbody td:first-child,
  .tracker tbody th:first-child { width: auto; padding-bottom: 0.4rem; }
  .tracker td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.1rem;
    font: 600 var(--fs-1)/1.35 var(--sans);
    color: var(--ink-3);
  }
}

@media (min-width: 760px) {
  /* Stack page: head beside the body; topics and coverage under the body */
  .stack-block .layer-row { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
  .stack-block .layer-row > :not(.layer-head) { grid-column: 2; }
  .tier:is([data-tier="tee"], #tier-tee, .tier-tee) { --band-l: 1.25rem; --band-r: 1.25rem; }
  .hub-cols,
  .establishes,
  .hub-establishes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.hub-cols, .establishes, .hub-establishes) > :not(div, section, article) { grid-column: 1 / -1; }
  .reading-grid { column-count: 2; }
  .term-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compact-list > li { grid-template-columns: 8.5rem minmax(0, 1fr); }
  .limit {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    column-gap: 1.5rem;
  }
  .limit > * { grid-column: 2; min-width: 0; }
  .limit > * + * { margin-top: 0; }
  .limit > :not(:is(time, .limit-date, .date)) + * { margin-top: 0.5rem; }
  .limit > time,
  .limit > .limit-date,
  .limit > .date { grid-column: 1; grid-row: 1 / span 8; padding-top: 0.25rem; }
  .topic-row { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
  .topic-row > :not(:first-child) { grid-column: 2; }
}

@media (min-width: 960px) {
  /* The TEE block: latest TEE briefs beside the five-step path */
  .tee-block {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
    align-items: start;
  }
  .tee-block > .block-head,
  .tee-block > .block-dek,
  .tee-block > h2,
  .tee-block > p { grid-column: 1 / -1; }
  .tee-block > .tee-cols,
  .tee-block > .tee-grid,
  .tee-block > .tee-columns,
  .tee-block:not(:has(> div:not(.block-head) ~ div:not(.block-head))) > div:not(.block-head):has(> :nth-child(2)) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
    align-items: start;
  }
  .tee-block .tee-col + .tee-col { margin-top: 0; }
  .rpaths,
  .reading-paths,
  :has(> .rpath) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  /* Stack page: head, body, topics, coverage. The count ("13 stories · 11
     about TEEs") holds one line, and its column widens to fit it */
  .layer-count { white-space: nowrap; }
  .stack-block .layer-row {
    grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr) minmax(0, 11rem) minmax(min-content, 9.5rem);
    column-gap: 1.5rem;
  }
  .stack-block .layer-row > :not(.layer-head) { grid-column: auto; }
  /* Tiers: the heading hangs in a left column */
  .tier-body { display: flow-root; }
  .tier-body > .tier-head,
  .tier-body > .tier-title,
  .tier-body > .tier-mech,
  .tier-body > .tier-main-label {
    float: left;
    clear: left;
    width: 15.5rem;
    margin-top: 0;
  }
  .tier-body > .tier-mech { margin-top: 0.4rem; }
  .tier-body > .tier-main-label { margin-top: 0.75rem; }
  .tier-body > :not(.tier-head, .tier-title, .tier-mech, .tier-main-label) { margin-left: 18rem; }
  /* A Chinese tier name (检查方及其获得的访问权限) is one unbroken run of up
     to 12 characters, so its column is wider */
  .site[lang="zh-CN"] .tier-body > .tier-head,
  .site[lang="zh-CN"] .tier-body > .tier-title,
  .site[lang="zh-CN"] .tier-body > .tier-mech,
  .site[lang="zh-CN"] .tier-body > .tier-main-label { width: 17.5rem; }
  .site[lang="zh-CN"] .tier-body > :not(.tier-head, .tier-title, .tier-mech, .tier-main-label) { margin-left: 20rem; }
  .tier-body > :not(.tier-head, .tier-title, .tier-mech, .tier-main-label) + :not(.tier-head, .tier-title, .tier-mech, .tier-main-label) { margin-top: 0.85rem; }
  .tier-body > :is(.tier-head, .tier-title, .tier-mech, .tier-main-label) + :not(.tier-head, .tier-title, .tier-mech, .tier-main-label) { margin-top: 0; }
  /* The Learn path reads as a table: numeral, kind and title, outcome */
  .path:not(.path-mini) .path-step {
    grid-template-columns: 3rem minmax(0, 0.95fr) minmax(0, 1.05fr);
    column-gap: 2rem;
  }
  .path:not(.path-mini) .path-body { display: contents; }
  .path:not(.path-mini) .path-body > * { grid-column: 2; margin-top: 0; }
  .path:not(.path-mini) .path-body > * + :not(.path-outcome) { margin-top: 0.3rem; }
  .path:not(.path-mini) .path-body > .path-outcome { grid-column: 3; grid-row: 2 / span 2; align-self: start; }
  .path:not(.path-mini) .path-body > .path-outcome:nth-child(2) { grid-row: 1 / span 2; }
  /* A step without an outcome (the planned ones) takes the outcome column too */
  .path:not(.path-mini) .path-body:not(:has(> .path-outcome)) > * { grid-column: 2 / -1; }
  /* Field lists run in two columns */
  .tier-fields { columns: 2; column-gap: 2.5rem; max-width: none; }
  .tier details { max-width: none; }
  .tier-fields > div { break-inside: avoid; }
  .tier-fields > dt { break-after: avoid; }
  .tier-fields > dd { break-before: avoid; }
  .tier-fields > div + div,
  .tier-fields > dd + dt { margin-top: 0; padding-top: 0; }
  .tier-fields > div,
  .tier-fields > dd { margin-bottom: 0.85rem; }
  /* Platform groups: CPU beside GPU */
  :has(> .platform-group + .platform-group) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
    align-items: start;
  }
  :has(> .platform-group + .platform-group) > :not(.platform-group) { grid-column: 1 / -1; }
  .platform-group + .platform-group { margin-top: 0; }
  /* Resources: the paths run full width above the sticky filters */
  .page-resources main > .wrap:has(> .filters:not([hidden])) > :not(.filters, .result-count, .resource-catalog, .empty) { grid-column: 1 / -1; }
  .page-resources main > .wrap > .filters { grid-row: auto / span 3; }
  /* Vision: the About page's measure and record column */
  .page-vision .breadcrumb,
  .page-vision .page-head {
    width: min(100%, var(--block-w));
    margin-inline: auto;
  }
  .page-vision .article-grid {
    grid-template-columns: minmax(0, var(--measure)) var(--aside);
    justify-content: center;
    column-gap: var(--col-gap);
    align-items: start;
  }
  .page-vision .doc-aside { grid-template-columns: minmax(0, 1fr); align-self: stretch; }
  .page-vision .doc-aside .toc { order: 1; }
}

@media (min-width: 1200px) {
  .stack-block .layer-row {
    grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr) minmax(0, 12rem) minmax(min-content, 10.5rem);
    column-gap: 1.75rem;
  }
}

/* --------------------------------------------------------------------------
   19.17 Motion, forced colours and print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  :is(.verification-motion, [data-motion-toggle]) { transition: background-color 0.12s ease, border-color 0.12s ease; }
}
@media (forced-colors: active) {
  .tag-tee,
  .layer-tee,
  .callout-tee { border-color: CanvasText; }
  .tag-tee,
  .layer-tee-label,
  .layer-reach,
  .tier-main-label { color: CanvasText; }
  /* The faded spine stays thinner, so the fade survives without colour */
  .layer-row:not([data-reach="direct"]) .layer-tee { border-left-width: 1px; padding-left: calc(0.75rem + 2px); }
  .tier:is([data-tier="tee"], #tier-tee, .tier-tee) { border-top-color: CanvasText; }
  :is(.verification-motion, [data-motion-toggle]) { border-color: ButtonText; }
  .hero-leader,
  .hero-leader.is-tee { stroke: CanvasText; opacity: 1; }
  .hero-layer,
  .hero-layer.is-tee { border-left-color: CanvasText; }
  .hero-layer-icon,
  .hero-layer.is-tee .hero-layer-icon,
  .hero-layer[data-layer] .hero-layer-icon { stroke: CanvasText; }
  :root:not([data-theme="light"]) .hero-logo,
  :root .hero-logo { fill: CanvasText; }
}
@media print {
  :root:root {
    --tee-ink: var(--print-ink);
    --tee-wash: var(--print-paper);
    --tee-rule: var(--print-rule);
  }
  :is(.verification-motion, [data-motion-toggle]),
  .verification-static-label { display: none !important; }
  .layer-row, .tier, .tier-baseline, .path-step, .limit, .rpath, .worksheet-card, .tracker tr { break-inside: avoid; }
}

/* ==========================================================================
   20. Owner review, 21 October: the evidence chain, stack cards and the
   home band with the hero beside the positioning
   ========================================================================== */

/* --------------------------------------------------------------------------
   20.1 Home band: kicker, tagline, a one-sentence positioning and links,
   then the hero. The band is a query container and measures its own width
   in rem, so larger default text falls back to a narrower layout; 21.1
   sets the layouts.
   -------------------------------------------------------------------------- */
.home { container: home / inline-size; }
.home-kicker { margin-bottom: 0.85rem; font: 600 var(--fs-3)/1.4 var(--sans); color: var(--accent); }
.home-hero .home-positioning { max-width: 33rem; }

/* --------------------------------------------------------------------------
   20.2 Home news: the lead brief, then four more beside it from 960px
   -------------------------------------------------------------------------- */
.home-news { margin-top: 0.5rem; }
.home-news-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 3rem; }
.news-lead .kicker { margin-bottom: 0.5rem; }
.news-lead-title {
  font: 500 clamp(1.625rem, 1.25rem + 1.4vw, 2.25rem)/1.12 var(--serif);
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  text-wrap: balance;
}
.news-lead-title a { color: inherit; text-decoration: none; }
.news-lead-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.news-lead-dek { max-width: 40rem; margin-top: 0.75rem; font: 400 1.125rem/1.55 var(--serif); color: var(--ink-2); }
.news-lead .ledger-dates { margin-top: 0.75rem; }
.home-news-grid > .ledger { border-top: 1px solid var(--rule); }
.site[lang="zh-CN"] .news-lead-dek { font: 400 1.0625rem/1.8 var(--sans); letter-spacing: 0.02em; }
.site[lang="zh-CN"] .news-lead-title { font-weight: 600; letter-spacing: 0.01em; }

/* --------------------------------------------------------------------------
   20.3 The evidence chain. A line runs through the layer codes: the upper
   half of a row is the link from the layer above, the lower half the link
   to the layer below. Solid: a binding in use; dashed: emerging; two stubs
   and a gap: none yet. The legend and the Stack page say it in words.
   -------------------------------------------------------------------------- */
.layer-row { --row-pt: 1.05rem; --chain-x: 1.1rem; --chain-y: calc(var(--row-pt) + 0.73rem); position: relative; padding-top: var(--row-pt); }
.layer-head { position: relative; z-index: 1; align-items: flex-start; }
.layer-code {
  box-sizing: border-box;
  min-width: calc(var(--chain-x) * 2);
  margin-top: 0.04rem;
  padding: 0.1rem 0.3rem;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  text-align: center;
  color: var(--ink-2);
}
.layer-row[data-reach="direct"] .layer-code { border-color: var(--tee-ink); background: var(--tee-wash); color: var(--tee-ink); }
.layer-row::before,
.layer-row::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: calc(var(--chain-x) - 1px);
  width: 2px;
  pointer-events: none;
}
.layer-row::before { top: -1px; height: calc(var(--chain-y) + 1px); }
.layer-row::after { top: var(--chain-y); bottom: -1px; }
.layer-row[data-bind-above="none"]::before,
.layer-row[data-bind="none"]::after { display: none; }
.layer-row[data-bind-above="deployed"]::before,
.layer-row[data-bind="deployed"]::after { background: var(--ink-strong); }
.layer-row[data-bind-above="emerging"]::before { background: repeating-linear-gradient(to top, var(--ink-2) 0 5px, transparent 5px 9px); }
.layer-row[data-bind="emerging"]::after { background: repeating-linear-gradient(to bottom, var(--ink-2) 0 5px, transparent 5px 9px); }
.layer-row[data-bind-above="missing"]::before { background: linear-gradient(var(--ink-3), var(--ink-3)) bottom / 2px 0.45rem no-repeat; }
.layer-row[data-bind="missing"]::after { background: linear-gradient(var(--ink-3), var(--ink-3)) top / 2px 0.45rem no-repeat; }
/* Below 760px the head has no column of its own, so the body, topics and
   coverage start right of the line, in line with the layer's name */
@media (max-width: 759.98px) {
  .stack-block .layer-row > :not(.layer-head) { margin-left: calc(var(--chain-x) * 2 + 0.6rem); }
}

/* The binding to the layer below, in words (Stack page) */
.layer-bind { max-width: 44rem; font: 400 var(--fs-3)/1.55 var(--sans); color: var(--ink); }
.layer-bind-label { display: block; margin-bottom: 0.2rem; font: 600 var(--fs-1)/1.35 var(--sans); color: var(--ink-3); }
.bind-status {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--rule-strong);
  font: 600 var(--fs-1)/1.35 var(--sans);
  color: var(--ink-strong);
  white-space: nowrap;
}
.bind-emerging { border-style: dashed; color: var(--ink-2); }
.bind-missing { border-color: var(--rule); color: var(--ink-3); }
.chain-legend { max-width: 46rem; font: 400 var(--fs-2)/1.55 var(--sans); color: var(--ink-2); }
.site[lang="zh-CN"] .layer-bind,
.site[lang="zh-CN"] .chain-legend { line-height: 1.75; letter-spacing: 0.01em; }

/* --------------------------------------------------------------------------
   20.4 Story tags link to the Stack page; site.js opens a stack card
   -------------------------------------------------------------------------- */
a.tag-layers {
  color: var(--ink-2);
  text-decoration: underline dotted var(--ink-3);
  text-underline-offset: 0.25em;
}
a.tag-layers:hover,
a.tag-layers:focus-visible { color: var(--ink-strong); text-decoration-style: solid; }
.stack-pop {
  position: absolute;
  z-index: 60;
  width: 16rem;
  max-width: calc(100vw - 16px);
  padding: 0.7rem 0.8rem 0.65rem;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  box-shadow: 0 10px 28px rgba(15, 17, 19, 0.14);
  font: 400 var(--fs-2)/1.4 var(--sans);
  color: var(--ink);
}
.stack-pop-title { margin: 0 0 0.45rem; font: 600 var(--fs-1)/1.35 var(--sans); color: var(--ink-3); }
.stack-pop-list { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.stack-pop-row { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); align-items: center; gap: 0.55rem; padding: 0.15rem 0.25rem; color: var(--ink-3); }
.stack-pop-code {
  box-sizing: border-box;
  padding: 0.05rem 0;
  border: 1px solid var(--rule);
  text-align: center;
  font: 600 var(--fs-1)/1.3 var(--sans);
  font-variant-numeric: tabular-nums;
}
.stack-pop-row.is-direct .stack-pop-code { border-color: var(--tee-rule); }
.stack-pop-row.is-on { background: var(--tint); color: var(--ink-strong); font-weight: 600; }
.stack-pop-row.is-on .stack-pop-code { border-color: var(--ink-strong); background: var(--ink-strong); color: var(--paper); }
.stack-pop-note { margin: 0.5rem 0 0; font: 400 var(--fs-1)/1.45 var(--sans); color: var(--ink-3); }
.site[lang="zh-CN"] ~ .stack-pop, html[lang="zh-CN"] .stack-pop { font-size: var(--fs-2); }

/* --------------------------------------------------------------------------
   20.5 Review fixes: the tier number on its own line, reading links as a
   list, no topic swatches, and topic rows without a stretched first line
   -------------------------------------------------------------------------- */
.tier-title .tier-n { display: block; margin-bottom: 0.15rem; font: 600 var(--fs-1)/1.35 var(--sans); color: var(--ink-3); }
.tier-read { margin-top: 0.75rem; }
.tier-read-label { font: 600 var(--fs-1)/1.35 var(--sans); color: var(--ink-3); }
.tier-read-list { display: grid; gap: 0.25rem; margin: 0.25rem 0 0; padding: 0; list-style: none; }
.tier-read-list a { font: 400 var(--fs-3)/1.45 var(--sans); }
.page-topic .page-head .kicker .kind::before,
.catalog-title::before,
.term-topic a::before { content: none !important; display: none !important; }
.site[lang="zh-CN"] .layer-count { word-break: normal; }

@media (max-width: 599.98px) {
  .home-hero .home-positioning { display: block; font-size: 1.0625rem; }
  .home-hero > .hero-visual { margin-top: 0.5rem; }
}
@media (min-width: 760px) {
  .topic-row > :first-child { grid-row: span 3; }
}
@media (min-width: 960px) {
  .home-tagline { font-size: clamp(2.25rem, 1.2rem + 1.9vw, 3rem); }
  .home-news-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .home-news-grid > .ledger { padding-left: 2.5rem; border-top: 0; border-left: 1px solid var(--rule); }
  .home-news-grid > .ledger > .ledger-row:first-child { padding-top: 0; }
}
@media (min-width: 1024px) {
  /* Fixed count columns, so every row of a table lines up (counts may wrap) */
  .layer-count { white-space: normal; }
  .stack-block .layer-row { grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr) minmax(0, 11rem) 10rem; }
}
@media (min-width: 1200px) {
  .stack-block .layer-row { grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr) minmax(0, 12rem) 10.5rem; }
}
@media (forced-colors: active) {
  .layer-row::before, .layer-row::after { background: CanvasText !important; }
  .stack-pop { border-color: CanvasText; }
  .stack-pop-row.is-on { outline: 1px solid CanvasText; }
}
@media print {
  .stack-pop, .layer-row::before, .layer-row::after { display: none; }
}

/* ==========================================================================
   21. Home hero, second round (22 October 2026): the person in the scene
   (since the third round, you, talking with an AI system), layer cards on
   the figure, the chain by binding status, and a band built around a
   larger figure. The compact stack table left the home page; the full
   table stays on the Stack page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   21.1 The band. From a 70rem band (1184px screens at the default text
   size) a 21rem intro column stands beside the figure; between 56 and 70rem
   the intro is a two-column masthead over the figure; below 56rem it is one
   column. Every layout caps the figure's width so that its whole stage
   (the scene, then the row with the person's label and the hint) fits on
   one screen. --hero-ratio is the scene's height over the figure's width;
   the cap keeps 11.25rem of the screen for the header, the band's top
   padding and up to 5.75rem for that row (its name line carries the
   reader's progress, which wraps under the name where the label is
   narrow), and 9.75rem in the masthead, whose figure is read scrolled up
   under the header. --hero-band tells hero.js
   whether the intro is beside the figure ("side"), where a card may rise
   into the band's top padding.
   -------------------------------------------------------------------------- */
.home-hero { gap: 2rem 2.5rem; align-items: start; padding: 1.25rem 0 2.5rem; --hero-band: stacked; }
/* the editor, in the footer's last line on every page */
.footer-bottom .footer-editor { color: inherit; text-decoration: underline; text-decoration-color: var(--footer-rule); text-underline-offset: 0.2em; }
.footer-bottom .footer-editor:hover { text-decoration-color: currentColor; }
.home-hero > .hero-visual {
  width: 100%;
  justify-self: center;
  max-width: max(36rem, calc((100svh - 11.25rem) / var(--hero-ratio)));
}
@container home (min-width: 56rem) and (max-width: 69.999rem) {
  /* The masthead: kicker and tagline on the left, the positioning, links
     and editor line on the right, both ending on one line */
  .home-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 3rem; align-items: end; }
  .home-tagline { font-size: clamp(2.25rem, 1.2rem + 1.9vw, 2.875rem); }
  .home-hero > .hero-visual { max-width: min(50rem, max(36rem, calc((100svh - 9.75rem) / var(--hero-ratio)))); }
}
@container home (min-width: 70rem) {
  /* The intro beside the figure, its kicker near T7's left corner. The
     band rises 1.25rem into the page's top padding (a query cannot style
     its own container, .home) and keeps 0.5rem of its own, so the figure
     starts 2rem higher. A figure narrower than its column keeps to the
     right, in line with the header's language switch, and the spare width
     falls between the intro and the person */
  .home-hero { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); margin-top: -1.25rem; padding-top: 0.5rem; --hero-band: side; }
  .home-intro { padding-top: 4.5rem; }
  .home-tagline { font-size: 2.5rem; }
  .site[lang="zh-CN"] .home-tagline { font-size: 2.25rem; }
  .home-hero .home-positioning { font-size: 1.0625rem; }
  .home-hero > .hero-visual { justify-self: end; }
}

/* --------------------------------------------------------------------------
   21.2 The figure. From 45em the stage is a grid: row 1 is the scene, and
   the leaders, labels and legend are positioned inside that row
   (grid-area with explicit lines), so their percentages follow the scene;
   row 2 holds the person's label and, beside it under the label column,
   the hint, its text in line with the labels and the legend above it.
   The person's label keeps 1.25rem short of where the cards start
   (--hero-card). The links under the stage span the figure: hero.js keeps
   every card within the stage. On phones the stage is the reading order:
   scene, person, hint, list, legend.
   -------------------------------------------------------------------------- */
.hero-stage { container-type: inline-size; }

/* The person's label: who the figure in front of the board stands for */
.hero-person-head { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.75rem; padding-left: 1.4rem; }
.hero-person-name { margin: 0; font: 600 var(--fs-3)/1.4 var(--sans); color: var(--ink-strong); }
.hero-person-name .hero-person-icon { position: absolute; left: 0; top: 0.1rem; }
.hero-person-icon,
.hc-who-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}
.hero-person-who,
.hero-hint { margin: 0.1rem 0 0; padding-left: 1.4rem; font: 400 var(--fs-2)/1.45 var(--sans); color: var(--ink-2); }
.hero-hint { margin-top: 0.35rem; color: var(--ink-3); text-wrap: balance; }
/* the line under "You, talking with an AI system" wraps into even lines; in Chinese
   only at its punctuation (21.8), so it breaks at the semicolon, never inside a word */
.hero-person-who { text-wrap: balance; }
/* The original description stays; hero.js reveals this sentence only after all
   seven layers have been explored. It adds no motion, including under reduced motion. */
.hero-complete { color: var(--hero-complete-ink); font-weight: 600; }
/* The hint gives one line, chosen by input type through the hover and pointer media
   features: pointing (or Tab) from 45em with a mouse or a pen, which can hover; a tap on
   a layer's arrow on touch screens, from 45em where the pointer cannot hover (where 21.4
   shows the arrows) and below 45em where it is coarse or cannot hover; a click on the
   arrow in the list below 45em with a mouse. Once every layer is checked
   (data-hv-checked="7") the line drops its promise of colour. The two states share one
   grid cell and the other is only invisible, so the hint keeps its height as it changes
   and nothing below it moves; screen readers read the one shown */
.hero-hint { display: grid; }
.hero-hint-todo,
.hero-hint-done { grid-area: 1 / 1; }
.hero-hint-done,
[data-hv-checked="7"] .hero-hint-todo { visibility: hidden; }
[data-hv-checked="7"] .hero-hint-done { visibility: visible; }
.hero-hint-touch,
.hero-hint-click { display: none; }
@media (min-width: 45em) and (hover: none) {
  .hero-hint-pointer { display: none; }
  .hero-hint-touch { display: inline; }
}
@media (max-width: 44.999em) {
  .hero-hint-pointer { display: none; }
  .hero-hint-click { display: inline; }
}
@media (max-width: 44.999em) and (hover: none), (max-width: 44.999em) and (pointer: coarse) {
  .hero-hint-click { display: none; }
  .hero-hint-touch { display: inline; }
}

/* The reader's progress, which hero.js shows on the person's name line (it
   wraps under the name where the label is narrow): how many layers are
   checked, announced politely */
.hero-progress { margin: 0; font: 600 var(--fs-2)/1.4 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* A layer the reader has checked keeps a check in the layer's hue after its name and TEE
   label for the rest of the page view (hero.js marks the row .is-checked) */
.hero-tick { display: none; }
[data-enhanced] .hero-layer.is-checked .hero-tick { display: inline-flex; flex: none; }
.hero-tick-icon {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--hl-icon, var(--ink-2));
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The legend: how far the chain holds today, one line per run of equal
   bindings, each with a sample of the line the scene draws. The samples
   are in the indigo the scene draws the chain in (--tee-ink is the
   scene's --hv-tee in both themes), so a reader can match them to the
   drawing; the stubs of a missing run step back to 0.6, which keeps 3:1
   on the page in both themes. The words stay in ink */
.hero-chain-title { margin: 0 0 0.2rem; font: 600 var(--fs-2)/1.4 var(--sans); color: var(--ink-2); }
.hero-chain-runs { margin: 0; padding: 0; list-style: none; font: 400 var(--fs-2)/1.45 var(--sans); color: var(--ink-2); }
.hero-chain-runs > li { display: flex; align-items: center; gap: 0.45rem; }
.hero-chain-sample {
  flex: none;
  width: 1.75rem;
  height: 0.25rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  color: var(--tee-ink);
}
.hero-chain-runs [data-bind="missing"] .hero-chain-sample { opacity: 0.6; }
.hero-chain-status { font-weight: 600; }

/* The two links to the Stack page, under the stage; the figure has no
   caption */
.hero-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; margin: 1rem 0 0; font: 600 var(--fs-3)/1.4 var(--sans); }
.hero-links a { color: var(--accent); text-decoration: none; }
.hero-links a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 0.2em; }

/* "Who checks" under each row: on phones (at rest on T1 and T2 only; see
   21.6) and in print */
.hero-who-line { display: none; margin: 0.3rem 0 0; font: 400 var(--fs-2)/1.45 var(--sans); color: var(--ink-2); }
.hero-who-label { font-weight: 600; color: var(--ink-3); }

@media (min-width: 45em) {
  .hero-stage { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero-art,
  .hero-leaders,
  .hero-layers,
  .hero-chain { grid-area: 1 / 1 / 2 / 2; }
  .hero-person { grid-area: 2 / 1 / 3 / 2; max-width: calc(var(--hero-card) - 1.25rem); margin-top: 0.5rem; }
  /* The hint shares row 2 with the person's label; the row grows only
     when the hint is the taller */
  .hero-stage > .hero-hint { grid-area: 2 / 1 / 3 / 2; align-self: start; margin: 0.5rem 0 0 var(--hero-labels); padding-left: calc(0.6rem + 2px); }
  /* The legend under T1's label, its text in line with the labels' */
  .hero-chain { position: absolute; left: var(--hero-labels); right: 0; bottom: 0; padding-left: calc(0.6rem + 2px); }
  /* A row spans the label column, so its card can run to the stage's edge */
  .hero-layer { right: 0; }
}

/* --------------------------------------------------------------------------
   21.3 Labels while a card is open: the active rule, name and leader in the
   accent; the other names step back to --ink-3 (never below 4.5:1) and
   the other leaders fade. A label, the legend or the hint that the card
   covers or nearly touches (hero.js marks it .is-covered) is hidden
   rather than left cut off at the card's edge; a hidden name stays in the
   tab order, and focusing it opens its own card.
   Motion, none under reduced motion, moves only opacity and transform,
   never the layout, and runs on the compositor: the rows, the legend, the
   hint and the leaders keep a layer of their own (will-change), so a fade
   neither makes nor drops one. A card that opens from rest fades and
   slides in while what it covers fades out, in 0.18s. A card that
   replaces an open one, or that a tap opens, shows at once (hero.js sets
   data-hv-instant on the figure until the card closes), with no frame
   between two cards: what it covers goes at once, what it uncovers comes
   back in 0.12s, and the leaders follow in 0.1s, as the scene does, so the
   lit plate keeps up with a pointer that scans the plates. A leader's
   colour changes at once; only its opacity fades
   -------------------------------------------------------------------------- */
@media (min-width: 45em) {
  .hero-layer.is-active { z-index: 5; border-left-color: var(--accent); }
  .hero-layer.is-active .hero-layer-link { color: var(--accent); }
  .hero-leader.is-active { stroke: var(--accent); opacity: 1; }
  [data-hv-active] .hero-layer:not(.is-active) .hero-layer-link { color: var(--ink-3); }
  [data-hv-active] .hero-leader:not(.is-active) { opacity: 0.2; }
  :is(.hero-layer, .hero-chain, .hero-hint).is-covered { opacity: 0; pointer-events: none; }
}
@media (min-width: 45em) and (prefers-reduced-motion: no-preference) {
  .hero-layer,
  .hero-chain,
  .hero-hint,
  .hero-leader { will-change: opacity; transition: opacity 0.18s ease; }
  [data-hv-instant] .hero-layer,
  [data-hv-instant] .hero-chain,
  [data-hv-instant] .hero-hint { transition-duration: 0.12s; }
  [data-hv-instant] :is(.hero-layer, .hero-chain, .hero-hint).is-covered { transition-duration: 0s; }
  [data-hv-instant] .hero-leader { transition-duration: 0.1s; }
}
/* A card that shows from rest fades and slides 4px out of its label, on the compositor;
   only for a mouse, a pen or the keyboard: a tapped card shows at once, since hero.js
   scrolls it into view from where it lies, and so does a card that replaces another. A
   card shows as hero.js places it (data-open-place), for a mouse once the pointer has
   settled on its layer, so the entrance keys on that, not on the open layer */
@media (min-width: 45em) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero-visual:not([data-hv-instant]) .hero-layer[data-open-place] > .hero-card { animation: hero-card-in 0.18s cubic-bezier(0.2, 0.7, 0.3, 1); }
  .hero-visual:not([data-hv-instant]) .hero-layer[data-open-place="up"] > .hero-card { animation-name: hero-card-in-up; }
}
@keyframes hero-card-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes hero-card-in-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   21.4 The chevron: touch screens and phones only, after hero.js. It sits
   above the name link's stretched target (19.4's ::after), like the TEE
   label; on touch tablets it follows the name in the row's head, a 44px
   target whose negative margins keep the head's line height
   -------------------------------------------------------------------------- */
.hero-more { display: none; }
@media (max-width: 44.999em), (hover: none) {
  [data-enhanced] .hero-more {
    position: relative;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: -0.775rem -0.6rem -0.775rem -0.2rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-2);
    cursor: pointer;
  }
}
/* On touch tablets the whole target is the chevron's: it lies above the
   examples' marks, and above its own card, whose bottom edge comes within
   it when the card opens upward. A tap on the part of a mark under it opens
   the card, whose Examples line (21.10) names that mark */
@media (min-width: 45em) and (hover: none) {
  [data-enhanced] .hero-more { z-index: 5; }
}
.hero-more-icon {
  display: block;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-more[aria-expanded="true"] .hero-more-icon { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   21.5 Layer cards: a flat card (1px frame, 3px top rule, no shadow, no
   radius, no close button) anchored to its own label. From 45em it opens
   below its label (T7 to T4) or above it (T3 to T1); hero.js shows it by
   setting data-open-place, the other side when that one has no room, and
   "fit", over its label's head with a top of its own, when neither side
   has; it never lies over its label's examples, whose marks keep their
   names. A card for a label that a mouse swept to keeps clear of the label
   the sweep reaches next: on the side the pointer came from, or "fit"
   (going down), or "past" the next label, with a top of its own. It
   starts just right of every
   plate's right corner (--hero-card), so it never covers a plate. Without
   hero.js the cards stay hidden from 45em (the name links describe the
   claim and who checks it), and hover never opens them.
   -------------------------------------------------------------------------- */
.hero-card {
  box-sizing: border-box;
  padding: 0.7rem 0.85rem 0.75rem;
  border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--ink-strong);
  background: var(--paper);
  font: 400 var(--fs-2)/1.45 var(--sans);
  color: var(--ink);
  white-space: normal;
}
.hero-layer.is-tee > .hero-card { border-top-color: var(--tee-ink); }
.hc-head { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; }
.hc-code {
  flex: none;
  padding: 0.02rem 0.3rem;
  border: 1px solid var(--rule-strong);
  font: 500 var(--fs-1)/1.3 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.hero-layer.is-tee .hc-code { border-color: var(--tee-ink); background: var(--tee-wash); color: var(--tee-ink); }
.hc-name { font: 600 1.0625rem/1.3 var(--serif); color: var(--ink-strong); }
.hc-claim { margin: 0.4rem 0 0; font: italic 400 0.9375rem/1.45 var(--serif); color: var(--ink); }
.hc-label { font-weight: 600; color: var(--ink-3); }
.hc-who { margin: 0.5rem 0 0; color: var(--ink-strong); }
.hc-who-icon { display: inline-block; width: 0.85rem; height: 0.85rem; margin-right: 0.25rem; vertical-align: -0.1rem; color: var(--ink-3); }
.hc-tee { margin: 0.5rem 0 0; padding: 0.05rem 0 0.1rem 0.6rem; border-left: 3px solid var(--tee-rule); }
.hc-tee .hc-label { color: var(--tee-ink); }
.hero-layer.is-tee .hc-tee { padding: 0.3rem 0.6rem; border-left-color: var(--tee-ink); background: var(--tee-wash); }
.hc-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin: 0.6rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule);
  font: 400 var(--fs-1)/1.35 var(--sans);
  color: var(--ink-3);
}
.hc-count { color: var(--ink-2); }
a.hc-count { position: relative; z-index: 1; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
a.hc-count:hover { color: var(--accent); text-decoration-color: currentColor; }
/* the cue keeps to the right, also when it wraps under the count */
.hc-open { margin-left: auto; font-weight: 600; color: var(--accent); white-space: nowrap; }
@media (min-width: 45em) {
  /* The card starts at --hero-card: --hero-shift (in cqw of the stage) to
     the left of the label column, and 2px more for the label's rule */
  .hero-card {
    position: absolute;
    z-index: 4;
    left: calc(var(--hero-shift) * -1cqw - 2px);
    right: 0;
    top: calc(100% + 0.4rem);
    cursor: pointer;
  }
  .hero-layer:is([data-place="up"]:not([data-open-place]), [data-open-place="up"]) > .hero-card { top: auto; bottom: calc(100% + 0.4rem); }
  .hero-layer[data-open-place="down"] > .hero-card { top: calc(100% + 0.4rem); bottom: auto; }
  /* A top of its own, which hero.js gives it: over its own label's head,
     ending at the head's bottom, above the examples (fit), and beyond the
     label that a sweep reaches next (past) */
  .hero-layer:is([data-open-place="fit"], [data-open-place="past"]) > .hero-card { bottom: auto; }
  .hero-visual:not([data-enhanced]) .hero-card { display: none; }
  /* A closed card stays readable to screen readers, and its stories link
     stays in the tab order: focusing it opens the card. It keeps its full
     size and place, clipped away to nothing, which also takes it out of
     hit testing; so showing or closing it changes only its clip: the
     browser lays out and restyles none of its text. It shows as hero.js
     places it (data-open-place): at once for focus, a tap or a click, and,
     for a layer that a mouse or pen points at, once the pointer settles */
  .hero-layer:not([data-open-place]) > .hero-card { clip-path: inset(50%); }
}
/* A bridge over the gap to the label, so a mouse can reach the card. Touch
   screens have none: it would lie over the top of the label's chevron. A
   card over its own label's head needs none, and one past the next label
   has that label between it and its own */
@media (min-width: 45em) and (hover: hover) {
  .hero-card::before { content: ""; position: absolute; left: 0; right: 0; top: -0.55rem; height: 0.55rem; }
  .hero-layer:is([data-place="up"]:not([data-open-place]), [data-open-place="up"]) > .hero-card::before { top: auto; bottom: -0.55rem; }
  .hero-layer:is([data-open-place="fit"], [data-open-place="past"]) > .hero-card::before { display: none; }
}

/* --------------------------------------------------------------------------
   21.6 Phones: the ruled list. A row: icon, name, TEE label and chevron;
   the examples; "Who checks"; the card. The chevron, a 44px target centred
   on the name's line, opens the card in the row, and several can be open.
   "Who checks" shows at rest only on the TEE layers, T1 and T2 (.is-tee),
   where it says that the reader's own device checks; on the other rows it
   shows once the row is open, with the card. Without hero.js every card is
   open, with its "Who checks". "Who checks" and the card start below the
   chevron, so they take the row's full width
   -------------------------------------------------------------------------- */
@media (max-width: 44.999em) {
  .hero-person { margin-top: 0.75rem; }
  .hero-layer { position: relative; padding: 0.6rem 2.75rem 0.6rem 0; }
  /* the name's stretched target covers the head line only, from the row's
     top to just above the examples (1.95rem down), not the examples, the
     "Who checks" line or an open card; the row, not the head, places it and
     the chevron */
  .hero-layer-head { position: static; }
  .hero-layer-link::after { inset: 0 2.75rem auto 0; height: 1.85rem; }
  [data-enhanced] .hero-more { position: absolute; top: -0.25rem; right: -0.35rem; width: 2.75rem; height: 2.75rem; margin: 0; }
  .hero-who-line { display: block; margin-right: -2.75rem; }
  .hero-card { margin: 0.6rem -2.75rem 0.15rem 0; }
  .hero-card .hc-who,
  .hero-card .hc-open { display: none; }
  [data-enhanced] .hero-layer:not(.is-open) > .hero-card { display: none; }
  .hero-chain { margin-top: 1.25rem; }
}
/* On screens only, so that print keeps every row's "Who checks" (21.9) */
@media screen and (max-width: 44.999em) {
  [data-enhanced] .hero-layer:not(.is-tee):not(.is-open) > .hero-who-line { display: none; }
}

/* --------------------------------------------------------------------------
   21.7 Stack page: who checks, under each claim
   -------------------------------------------------------------------------- */
.layer-checkers { max-width: 44rem; font: 400 var(--fs-3)/1.55 var(--sans); color: var(--ink); }
.layer-checkers-label { display: block; margin-bottom: 0.2rem; font: 600 var(--fs-1)/1.35 var(--sans); color: var(--ink-3); }

/* --------------------------------------------------------------------------
   21.8 Chinese: the 13px floor for labels, codes, the binding chip and a
   label's example named in Chinese, the CJK serif for the claim and name,
   and looser leading
   -------------------------------------------------------------------------- */
.site[lang="zh-CN"] .hero-person-who,
.site[lang="zh-CN"] .hero-hint,
.site[lang="zh-CN"] .hero-chain,
.site[lang="zh-CN"] .hero-who-line,
.site[lang="zh-CN"] .hero-card,
.site[lang="zh-CN"] .layer-checkers { line-height: 1.7; letter-spacing: 0.01em; }
.site[lang="zh-CN"] .hc-claim { font: 400 0.9375rem/1.65 var(--cjk-serif); }
.site[lang="zh-CN"] .hc-name { font-family: var(--cjk-serif); word-break: keep-all; overflow-wrap: anywhere; }
.site[lang="zh-CN"] .hero-person-who,
.site[lang="zh-CN"] .hero-hint { word-break: keep-all; overflow-wrap: anywhere; }
/* The Chinese hint wraps line by line: balanced, Chrome breaks it at the space
   after "Tab", away from its 键, where filling each line breaks it at the comma */
.site[lang="zh-CN"] .hero-hint { text-wrap: wrap; }
.site[lang="zh-CN"] .hc-code,
.site[lang="zh-CN"] .hc-foot,
.site[lang="zh-CN"] .layer-checkers-label { font-size: var(--fs-2); }
/* A label's example named in Chinese, such as 网信办 on T7, is set at 13px; a
   Latin name, in its own lang island, stays at 12px as on the English page, so
   the label column keeps its width, and the Chinese name's line height keeps
   the examples' line 15px tall, as the marks and the Latin names set it */
.site[lang="zh-CN"] .hero-ex { font-size: var(--fs-2); line-height: 1.15; }
.site[lang="zh-CN"] .hero-ex > [lang] { font-size: var(--fs-1); line-height: 1.25; }

/* --------------------------------------------------------------------------
   21.9 Forced colours and print. The scene keeps its own paint, like an
   image; the hero prints as a plain list of the layers, with their codes,
   and who checks them, after the person's label and before the legend
   (kept on one page) and the links
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .hero-art > svg { forced-color-adjust: none; }
  .hero-complete { color: CanvasText; }
  .hero-card,
  .hc-code { border-color: CanvasText; }
  .hc-tee,
  .hero-layer.is-tee .hc-tee { border-left-color: CanvasText; }
  /* The faded TEE line stays thinner, as on the Stack page */
  .hero-layer:not(.is-tee) .hc-tee { border-left-width: 1px; padding-left: calc(0.6rem + 2px); }
  .hero-layer.is-active,
  .hero-layer.is-tee.is-active { border-left-color: Highlight; }
  .hero-leader.is-active { stroke: Highlight; }
  /* the legend's samples in CanvasText, the missing run's stubs too: the
     gap between them says "missing" */
  .hero-chain-runs .hero-chain-sample { color: CanvasText; }
  .hero-chain-runs [data-bind="missing"] .hero-chain-sample { opacity: 1; }
  .hero-more { color: ButtonText; }
  .hero-all { border-color: ButtonText; }
  .hero-tick-icon { stroke: CanvasText; }
}
@media print {
  .hero-art,
  .hero-leaders,
  .hero-card,
  .hero-more,
  .hero-hint,
  .hero-all,
  .hero-progress,
  .hero-complete,
  .hero-tick,
  .hero-tip,
  :is(.verification-motion, [data-motion-toggle]),
  .verification-static-label { display: none !important; }
  .hero-stage { display: block; }
  .hero-layers,
  .hero-chain { position: static; margin-top: 1rem; padding-left: 0; }
  .hero-chain { break-inside: avoid; }
  /* Each label keeps its code before its name ("T7 Policy"), which the
     story tags refer to, and "Who checks" lines up with the code */
  .hero-layer { position: relative; transform: none; padding: 0.35rem 0; border: 0; white-space: normal; break-inside: avoid; }
  .hero-who-line { display: block; margin-right: 0; padding-left: 1.45rem; }
  .hero-person { max-width: none; }
}

/* --------------------------------------------------------------------------
   21.10 The brand names of the vendor marks, and the cards' names line on
   touch screens. hero.js shows the figure's
   one tooltip (.hero-tip, aria-hidden: every mark it names is named for
   screen readers already) over the mark that a mouse or pen rests on, or
   that a tap touches, and places it in the figure's box with an inline
   top and left: above the mark, or below it where the open card or the
   window's top is in the way, and always inside the window. It is drawn
   like the current language in the header's switch: square, --ink ground,
   --on-ink text, 13px Plex Sans, no shadow, so it reads as the page's own
   in both themes. It takes no pointer events, so it never comes
   between the pointer and a label, a card or a plate, and it paints above
   the open card (z-index 4 in its row) and the open row (5)
   -------------------------------------------------------------------------- */
.hero-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  box-sizing: border-box;
  width: max-content;
  max-width: min(16rem, calc(100vw - 1rem));
  padding: 0.2rem 0.45rem 0.25rem;
  background: var(--ink);
  color: var(--on-ink);
  font: 500 var(--fs-2)/1.35 var(--sans);
  letter-spacing: 0;
  white-space: normal;
  pointer-events: none;
}
@media (forced-colors: active) {
  .hero-tip { border: 1px solid CanvasText; }
}
/* On touch screens no pointer rests on a mark, so an open card also names
   the examples in its label (.hc-names, aria-hidden like the tooltip), above
   its foot; elsewhere the line takes no room, so a card keeps its size and
   its place. A tap on a mark still shows that mark's name; on touch tablets,
   where the chevron's 44px target lies over part of some marks (21.4), a tap
   there opens the card, whose line names them, so every name is reachable */
.hc-names { display: none; margin: 0.5rem 0 0; color: var(--ink-2); }
@media (hover: none), (pointer: coarse) {
  .hc-names { display: block; }
}

/* ==========================================================================
   22. Lead illustrations and a quieter home page (23 October 2026)
   An article with an illustration.json opens on a captioned lead figure
   under its head; lists show a copy of the picture beside the story. The
   pictures keep their own light palette (they are files shown through
   <img>), sit on a neutral mat behind a hairline frame, never carry a
   shadow, and are dimmed a little on dark pages. List copies are
   decorative links (aria-hidden, no tab stop) beside the title link.
   The home page's type steps down by about a sixth. This layer only adds
   rules.
   ========================================================================== */
:root {
  --media-mat: var(--tint);
  --media-frame: var(--rule);
  --media-dim: none;
  --media-dim-photo: none;
  --media-ratio: 3 / 2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --media-mat: var(--paper);
    --media-dim: brightness(0.78) contrast(0.92);
    --media-dim-photo: brightness(0.9);
  }
}
:root[data-theme="dark"] {
  --media-mat: var(--paper);
  --media-dim: brightness(0.78) contrast(0.92);
  --media-dim-photo: brightness(0.9);
}

/* --------------------------------------------------------------------------
   22.1 The picture: a mat, a 1px frame, and the image filling it. A copy in
   a list is cropped to 3:2, the shape of the illustrations' canvas and of
   the photos that tools/photos.py makes (a picture of another shape is
   cropped to it too); the article's figure keeps the picture's own
   proportions, from its width and height attributes
   -------------------------------------------------------------------------- */
.lead-figure-link,
.story-thumb {
  display: block;
  overflow: hidden;
  border: 1px solid var(--media-frame);
  background: var(--media-mat);
}
.lead-figure-img,
.story-thumb-img {
  display: block;
  width: 100%;
  height: auto;
  filter: var(--media-dim);
}
.story-thumb { aspect-ratio: var(--media-ratio); }
.story-thumb-img { height: 100%; object-fit: cover; }
/* a photo's tones are already mid-range and softened by its grade (tools/photos.py), so on
   dark pages it only loses a little brightness; an illustration keeps its light palette and
   dims more. The figure and the list copy carry the image's kind */
.lead-figure[data-image-kind="photo"],
.story-thumb[data-image-kind="photo"] { --media-dim: var(--media-dim-photo); }
/* pointing at a list copy underlines the story's title, the row's one link */
:is(.ledger-row, .brief-row, .river-item, .news-lead, .card):has(> .story-thumb:hover)
  :is(.ledger-title, .river-title, .news-lead-title, .card-title, h3, h4) a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* --------------------------------------------------------------------------
   22.2 The article's lead figure: right after the head, as wide as the
   reading column, then the caption and the credit line (a photo's credit,
   license, source and changes; an illustration's published scene
   description, and how the site makes illustrations)
   -------------------------------------------------------------------------- */
.lead-figure { max-width: var(--measure); margin: 0 0 2.25rem; }
.lead-figure figcaption {
  margin-top: 0.65rem;
  font: 400 var(--fs-2)/1.5 var(--sans);
  color: var(--ink-2);
}
.lead-caption { display: block; }
.lead-credit { display: block; margin-top: 0.2rem; color: var(--ink-3); }
.lead-credit-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 0.2em;
}
.lead-credit-link:hover { color: var(--accent); }
.site[lang="zh-CN"] .lead-figure figcaption { line-height: 1.7; letter-spacing: 0.01em; }
@media (min-width: 1024px) {
  /* The figure takes the reading column's second row, beside the record column */
  .article > .lead-figure { grid-column: main; grid-row: 2; margin-bottom: 2.5rem; }
  .article.has-lead .doc-aside { grid-row: 2 / span 2; margin-top: 0; }
}

/* --------------------------------------------------------------------------
   22.3 Lists. The home page's lead brief opens on its picture; the rail, the
   TEE block's rows and the TEE hub's coverage carry a copy at the right;
   Latest and the topic pages give a picture column beside the story, shaped
   by the list's own width (in a phone-width list the picture stands above
   the story); related cards show it on top. Rows without a picture keep
   their text layout
   -------------------------------------------------------------------------- */
/* narrower than the lead column; beside it from 960px the rail runs five
   stories, so the two end about level */
.news-lead-media { max-width: 32rem; margin-bottom: 1.1rem; }
@media (max-width: 959.98px) {
  /* under the lead brief the rail needs no fifth story to balance it */
  .home-news .ledger > .ledger-row:nth-child(5) { display: none; }
  .home-news .ledger > .ledger-row:nth-child(4) { border-bottom: 0; }
}

.ledger-row.has-thumb,
.brief-row.has-thumb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem;
  grid-template-rows: auto 1fr;
  column-gap: 1rem;
  align-items: start;
}
.ledger-row.has-thumb > :not(.story-thumb),
.brief-row.has-thumb > :not(.story-thumb) { grid-column: 1; }
.ledger-row.has-thumb > .story-thumb,
.brief-row.has-thumb > .story-thumb { grid-column: 2; grid-row: 1 / span 2; margin-top: 0.2rem; }
/* beside a copy the meta line is narrow: tags that wrap onto their own line
   start close to its left edge */
:is(.ledger-row, .brief-row).has-thumb > p > .tags { margin-left: 0.35rem; }
@media (max-width: 479.98px) {
  /* on phones a smaller copy leaves the title a wider column */
  .ledger-row.has-thumb,
  .brief-row.has-thumb { grid-template-columns: minmax(0, 1fr) 5.5rem; column-gap: 0.75rem; }
}
/* The TEE hub's coverage keeps to the hub's 46rem measure, as its intros and
   responses do, so each copy stays beside its title; from 760px the copy is
   larger, and at the right as in every other list */
.page-tee .tee-latest:has(> .brief-row.has-thumb),
.page-tee #coverage:has(.brief-row.has-thumb) > .block-head { max-width: 46rem; }
@media (min-width: 760px) {
  .page-tee .tee-latest > .brief-row.has-thumb { grid-template-columns: minmax(0, 1fr) 8.5rem; column-gap: 1.5rem; }
}
@media (min-width: 960px) and (max-width: 1279.98px) {
  /* beside the lead brief the rail is only about 21rem wide: a smaller copy, as
     Audit Commons' rail, keeps its titles to about three lines */
  .home-news .ledger-row.has-thumb { grid-template-columns: minmax(0, 1fr) 5.5rem; column-gap: 0.875rem; }
  /* and a slightly smaller lead picture keeps the brief level with it */
  .news-lead-media { max-width: 28rem; }
}
@media (min-width: 1280px) {
  /* from 1280px the rail is at least about 26rem wide: a slightly larger copy */
  .home-news .ledger-row.has-thumb { grid-template-columns: minmax(0, 1fr) 7.5rem; }
}

/* Latest and the topic pages. The list is a container, so a row takes its
   shape from the list's width, not the screen's: a topic page's list shares
   the page with the record column, Latest's runs the full width */
.river { container: river / inline-size; }
.river-item.has-thumb {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "thumb" "date" "body";
}
.river-item.has-thumb > .river-thumb { grid-area: thumb; max-width: 15rem; margin-bottom: 0.6rem; }
@container river (min-width: 30rem) {
  /* the date above the story, as on phones, and the picture in a column at
     the right, so the story keeps a wide column */
  .river-item.has-thumb {
    grid-template-columns: minmax(0, 1fr) clamp(8rem, 28cqi, 11rem);
    grid-template-rows: auto 1fr;
    grid-template-areas: "date thumb" "body thumb";
    gap: 0.25rem 1.25rem;
  }
  .river-item.has-thumb > .river-thumb { max-width: none; margin: 0.2rem 0 0; }
}
@container river (min-width: 60rem) {
  /* a list 60rem wide (Latest from 1024px): the date, the story, the picture */
  .river-item.has-thumb {
    grid-template-columns: 8.5rem minmax(0, 1fr) 13.5rem;
    grid-template-rows: auto;
    grid-template-areas: "date body thumb";
    column-gap: 1.5rem;
  }
}
@container river (min-width: 68rem) {
  /* wider still, the dek keeps its measure, so a larger picture takes the
     room and stays close to its story */
  .river-item.has-thumb { grid-template-columns: 8.5rem minmax(0, 1fr) 18rem; }
}

.card.has-thumb > .card-thumb { order: -1; }
@media (max-width: 599.98px) {
  /* one related card under another, as the hairline between them assumes */
  .related .card-row:has(> .card.has-thumb) { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 600px) and (max-width: 959.98px) {
  /* related cards with pictures run two to a row here; the third spans the
     row, its picture under the first card and its text under the second, so
     no card stands alone */
  .related .card-row:has(> .card.has-thumb) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related .card-row > .card.has-thumb:nth-child(3):last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   22.4 A quieter home page: display type (the tagline and the lead brief's
   title) steps down by about a sixth at every width, and running text (the
   positioning, deks, story titles, section and column heads, links) by
   about 1px, keeping its order; metadata stays at 13px, and Chinese column
   heads stay on the label scale, at 13px. The hero keeps
   its sizes
   -------------------------------------------------------------------------- */
.page-home .home-kicker { font-size: var(--fs-2); }
.page-home .home-tagline { font-size: clamp(1.875rem, 1.25rem + 2.2vw, 2.5rem); }
.page-home .home-hero .home-positioning { font-size: var(--fs-4); }
.page-home .home-links { font-size: var(--fs-3); }
.page-home .block-title { font-size: var(--fs-4); }
.page-home :is(.tee-block, .checks-block) h3.mini-title { font-size: 0.9375rem; }
.page-home .news-lead-title { font-size: clamp(1.375rem, 1.05rem + 1.18vw, 1.875rem); line-height: 1.16; }
.page-home .news-lead-dek { margin-top: 0.6rem; font-size: var(--fs-4); }
.page-home .ledger-title,
.page-home .brief-row :is(h3, h4) { font-size: var(--fs-4); }
.page-home .check-card .card-title { font-size: 1.0625rem; }
.page-home .path-mini .path-title { font-size: 0.9375rem; }
.page-home[lang="zh-CN"] .block-title { font-size: 1.0625rem; }
.page-home[lang="zh-CN"] :is(.tee-block, .checks-block) h3.mini-title { font-size: var(--fs-2); }
.page-home[lang="zh-CN"] .home-positioning,
.page-home[lang="zh-CN"] .news-lead-dek { font-size: var(--fs-4); }
.page-home[lang="zh-CN"] .home-tagline { font-size: clamp(1.8125rem, 1.15rem + 2.3vw, 2.25rem); }
.page-home[lang="zh-CN"] .news-lead-title { line-height: 1.3; }
@container home (min-width: 56rem) and (max-width: 69.999rem) {
  .page-home .home-tagline { font-size: clamp(1.875rem, 1rem + 1.6vw, 2.375rem); }
  .page-home[lang="zh-CN"] .home-tagline { font-size: clamp(1.75rem, 0.95rem + 1.6vw, 2.125rem); }
}
@container home (min-width: 70rem) {
  .page-home .home-tagline { font-size: 2.0625rem; }
  .page-home[lang="zh-CN"] .home-tagline { font-size: 1.875rem; }
}

/* --------------------------------------------------------------------------
   22.5 Forced colours and print. The pictures keep their own paint, framed
   in CanvasText. Print keeps the article's figure with its caption and
   credit, and leaves out the list copies
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .lead-figure-link,
  .story-thumb { border-color: CanvasText; }
  .lead-figure-img,
  .story-thumb-img { filter: none; }
}
@media print {
  /* rows without their copy take the layout of rows that never had one */
  .story-thumb { display: none !important; }
  .ledger-row.has-thumb,
  .brief-row.has-thumb { display: block; }
  .river-item.has-thumb { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "date" "body"; }
  .lead-figure { max-width: 100%; break-inside: avoid; }
  .lead-figure-link { display: inline-block; max-width: 100%; vertical-align: top; border-color: var(--print-rule); background: none; }
  .lead-figure-img { max-height: 11cm; width: auto; max-width: 100%; filter: none; }
  .lead-credit-link { text-decoration: none; }
}
@media print and (min-width: 760px) {
  .river-item.has-thumb { grid-template-columns: 8.5rem minmax(0, 1fr); grid-template-areas: "date body"; column-gap: 1.5rem; }
}

/* --------------------------------------------------------------------------
   Bylines, in wire-service style. The article's meta line opens with the
   byline: an automated byline's name ("verifiable.pro Wire"), a dot and an
   outlined "Automated" tag, a link to About's #ai whose tooltip says what
   the software does, or a person's "By <name>"; "Submitted by <name>" may
   follow, after a dot. A list row says it in short: the automated
   byline's name (its tooltip, the description) or "By <name>", in the
   row's own meta type
   -------------------------------------------------------------------------- */
.byline-tag {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--rule);
  font: 600 var(--fs-1)/1.2 var(--sans);
  color: var(--ink-2);
  text-decoration: none;
  vertical-align: 0.08em;
  white-space: nowrap;
}
.byline-tag:hover { border-color: var(--accent); color: var(--accent); }
.byline-sep { margin: 0 0.15rem; font-weight: 400; color: var(--ink-3); }
.article-meta .byline-submitted { font-weight: 500; color: var(--ink-2); }
.byline-mark { white-space: nowrap; }
.byline-mark[title] { cursor: help; }
.river-meta > .byline-mark ~ .tags { margin-left: 0.6rem; }
.site[lang="zh-CN"] .byline-tag { font-size: var(--fs-2); letter-spacing: 0.02em; }
@media (forced-colors: active) {
  .byline-tag { border-color: LinkText; color: LinkText; }
}
@media print {
  .byline-tag { border: 0; padding: 0; color: inherit; }
}