/* modeldrift.watch, generated by generate_site.py from design/DESIGN_CONTRACT.md.
   Colours come only from the tokens below: light on :root (the default), dark
   on html.theme-dark (set by the theme script) and under prefers-color-scheme:
   dark when no theme class is set. Sans for prose and furniture, mono for data.
   Capitals only in severity chips. Italics only for the model's own emphasis.

   Hooks for tests/site_audit.py:
   - Severity: every chip, model pill, strip cell, legend swatch, coloured count
     and history segment carries one sev-* class. sev-major is the only red,
     sev-significant the only amber, sev-minor the only grey fill. Neutral
     states are outlined: sev-quiet, sev-baseline, sev-pending, sev-untriaged,
     sev-nodata, sev-withdrawn, sev-untracked.
   - Front page: the top-level blocks are direct children of <main>, each with
     its component as the first class, in order: hero, evidence (0 to 3),
     models, strip, stats, feed (omitted when empty), history, method, data.
   - Theme toggle: button#theme-toggle. Quote cards: .quote.baseline and
     .quote.today. Event pages: full responses are .resp inside .exchange.
   - Landing page (/ before launch): html.lp, its own --color-lp-* tokens (TOKENS_LANDING,
     design/LANDING_CONTRACT.md); sev-* classes as above; brand purple never inside them. */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/fonts/space-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/fonts/space-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  color-scheme: light;
  --color-page: #f4f5f7;
  --color-surface: #ffffff;
  --color-surface-sunken: #eef0f4;
  --color-surface-accent: #e8eefd;
  --color-border: #e3e6eb;
  --color-rule: #e3e6eb;
  --color-rule-soft: #e3e6eb;
  --color-border-accent: #e3e6eb;
  --color-border-control: #e3e6eb;
  --color-outline: #c3c8d0;
  --color-chip-neutral: #eef0f4;
  --color-text: #15171b;
  --color-text-body: #15171b;
  --color-text-secondary: #4c525c;
  --color-text-muted: #666c76;
  --color-text-faint: #666c76;
  --color-link: #8f00bd;
  --color-link-hover: #15171b;
  --color-link-underline: rgba(143, 0, 189, 0.45);
  --color-focus: #8f00bd;
  --color-logo-dot: #a400d8;
  --color-nav-hover-bg: #eef0f4;
  --color-primary: #a400d8;
  --color-primary-hover: #15171b;
  --color-on-primary: #fbfcfe;
  --color-secondary-bg: #ffffff;
  --color-secondary-text: #15171b;
  --color-secondary-border: #e3e6eb;
  --color-secondary-hover-bg: #eef0f4;
  --color-secondary-hover-border: #e3e6eb;
  --color-soft-bg: #e8eefd;
  --color-soft-text: #8f00bd;
  --color-soft-hover-bg: #8f00bd;
  --color-soft-hover-text: #fbfcfe;
  --color-ok-bg: #e2f4ea;
  --color-ok-text: #17724a;
  --color-ok-dot: #17724a;
  --color-ok-bar: #17724a;
  --color-bar-track: #eef0f4;
  --color-major-bg: #ffe8e4;
  --color-major-text: #b00a1d;
  --color-major-solid: #b00a1d;
  --color-significant-bg: #fdecd8;
  --color-significant-text: #8a4708;
  --color-significant-solid: #8a4708;
  --color-on-severity-solid: #ffffff;
  --color-minor-bg: #eef0f4;
  --color-minor-text: #4c525c;
  --color-mark-bg: #d6e4ff;
  --color-cell-empty: #eef0f4;
  --color-custody-text: #666c76;
  --color-none: transparent;
  --shadow-raised: 0 8px 24px rgba(21, 23, 27, 0.06);
  --shadow-card: 0 1px 2px rgba(21, 23, 27, 0.04);
  --shadow-card-hover: 0 10px 26px rgba(21, 23, 27, 0.10);
  --color-lp-page: #f5f6f8;
  --color-lp-card: #ffffff;
  --color-lp-panel: #ffffff;
  --color-lp-control: #e9ebf0;
  --color-lp-bubble: #e9ebf0;
  --color-lp-foot: #f5f6f8;
  --color-lp-hairline: #dee1e7;
  --color-lp-card-border: #dee1e7;
  --color-lp-control-border: #dee1e7;
  --color-lp-foot-rule: #dee1e7;
  --color-lp-ink: #15171b;
  --color-lp-quote: #3d434d;
  --color-lp-secondary: #3d434d;
  --color-lp-dek: #3d434d;
  --color-lp-strip-value: #3d434d;
  --color-lp-muted: #5f6570;
  --color-lp-faint: #6b717c;
  --color-lp-brand: #8f00bd;
  --color-lp-brand-hover: #7a00a3;
  --color-lp-brand-tint: #8f00bd;
  --color-lp-link-hover: #15171b;
  --color-lp-quiet-solid: #146b44;
  --color-lp-quiet-text: #146b44;
  --color-lp-disclosure: #e9ebf0;
  --color-lp-major-after: #e9ebf0;
  --color-lp-significant-after: #e9ebf0;
  --color-lp-major-after-text: #3d434d;
  --color-lp-significant-after-text: #3d434d;
  --color-lp-disclosure-text: #3d434d;
  --color-lp-on-brand: #ffffff;
  --color-lp-on-brand-soft: #ffffff;
  --color-lp-brand-band-meta: #ffffff;
  --color-lp-disclosure-border: #dee1e7;
  --color-lp-major-solid: #b0101d;
  --color-lp-major-text: #b0101d;
  --color-lp-major-after-border: #b0101d;
  --color-lp-major-after-label: #b0101d;
  --color-lp-significant-solid: #7f4f00;
  --color-lp-significant-edge: #7f4f00;
  --color-lp-significant-text: #7f4f00;
  --color-lp-significant-after-border: #7f4f00;
  --lp-label-meta: 500 12px/1.35 var(--font-mono);
  --lp-label-meta-track: .04em;
  --lp-label-section: 600 12px/1.35 var(--font-mono);
  --lp-label-section-track: .12em;
  --lp-label-chip: 700 12px/1.2 var(--font-mono);
  --lp-label-chip-track: .06em;
  --color-claim-accent: #8f00bd;
  --color-claim-second: #3d434d;
  --font-sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --max-width: 880px;
  --gutter: 18px;
  --page-bottom: 64px;
  --space-nav: 18px 0 8px;
  --space-hero-top: 22px;
  --space-chips-top: 26px;
  --space-h1-top: 14px;
  --space-dek-top: 14px;
  --space-evidence-top: 22px;
  --space-block: 34px;
  --space-stats-top: 16px;
  --space-grid: 10px;
  --space-heading-to-grid: 12px;
  --space-footer-top: 36px;
  --radius-pill: 999px;
  --radius-section: 14px;
  --radius-card: 14px;
  --radius-tile: 14px;
  --radius-inner: 4px;
  --radius-button: 8px;
  --radius-button-sm: 8px;
  --radius-chip: 4px;
  --radius-row-chip: 4px;
  --radius-cell: 4px;
  --radius-marker: 4px;
  --space-section: 12px;
  --color-bg-a: #f7f8fa;
  --color-bg-b: #f3f3f7;
  --color-bg-c: #eae8f3;
  --color-bg-glow: rgba(122, 40, 226, 0.12);
  --color-bg-bar: rgba(244, 245, 247, 0.86);
  --bg-glow-size: 1500px 1000px;
  --bg-glow-clear: 72%;
  --bg-glow-h: 1200px;
  --color-cc-claude: #76604c;
  --color-cc-claude-bg: #faf6ee;
  --color-cc-claude-edge: #e4ddd0;
  --color-cc-claude-turn: #ede5d6;
  --color-cc-claude-ink: #2a251f;
  --color-cc-claude-line: #d3c8b6;
  --color-cc-claude-rule: transparent;
  --color-cc-gemini: #2d53c4;
  --color-cc-gemini-bg: #f7f9ff;
  --color-cc-gemini-edge: #d8e1f4;
  --color-cc-gemini-turn: #e2e9f8;
  --color-cc-gemini-ink: #1a2233;
  --color-cc-gemini-line: #c1cdea;
  --color-cc-gemini-rule: transparent;
  --cc-fill-gemini: linear-gradient(90deg, #4285f4 0%, #9b72cb 60%, #d96570 100%);
  --color-cc-gpt: #3a3e45;
  --color-cc-gpt-bg: #ffffff;
  --color-cc-gpt-edge: #e2e2e2;
  --color-cc-gpt-turn: #efefef;
  --color-cc-gpt-ink: #0d0d0d;
  --color-cc-gpt-line: #d2d2d2;
  --color-cc-gpt-rule: transparent;
  --cc-shadow: 0 1px 2px rgba(24, 20, 40, 0.05), 0 10px 28px -6px rgba(24, 20, 40, 0.12);
}
html.theme-dark {
  color-scheme: dark;
  --color-page: #0a0a0b;
  --color-surface: #121214;
  --color-surface-sunken: #17171a;
  --color-surface-accent: #17171a;
  --color-border: #26262a;
  --color-rule: #26262a;
  --color-rule-soft: #26262a;
  --color-border-accent: #2c2c31;
  --color-border-control: #33333a;
  --color-outline: #33333a;
  --color-chip-neutral: #17171a;
  --color-text: #f4f2f0;
  --color-text-body: #e8e6e4;
  --color-text-secondary: #b6b6bd;
  --color-text-muted: #8a8a92;
  --color-text-faint: #8a8a92;
  --color-link: #cf6cf0;
  --color-link-hover: #e2a0f7;
  --color-link-underline: rgba(207, 108, 240, 0.45);
  --color-focus: #cf6cf0;
  --color-logo-dot: #a400d8;
  --color-nav-hover-bg: #17171a;
  --color-primary: #a400d8;
  --color-primary-hover: #b81ae8;
  --color-on-primary: #ffffff;
  --color-secondary-bg: #121214;
  --color-secondary-text: #f4f2f0;
  --color-secondary-border: #26262a;
  --color-secondary-hover-bg: #17171a;
  --color-secondary-hover-border: #33333a;
  --color-soft-bg: #17171a;
  --color-soft-text: #cf6cf0;
  --color-soft-hover-bg: #a400d8;
  --color-soft-hover-text: #ffffff;
  --color-ok-bg: #11291e;
  --color-ok-text: #63d69b;
  --color-ok-dot: #63d69b;
  --color-ok-bar: #63d69b;
  --color-bar-track: #17171a;
  --color-major-bg: #5f1113;
  --color-major-text: #ff7070;
  --color-major-solid: #ff7070;
  --color-significant-bg: #3a2510;
  --color-significant-text: #e9a23b;
  --color-significant-solid: #e9a23b;
  --color-on-severity-solid: #0d0f12;
  --color-minor-bg: #1b1b1f;
  --color-minor-text: #b6b6bd;
  --color-mark-bg: #343f6d;
  --color-cell-empty: #17171a;
  --color-custody-text: #8a8a92;
  --color-none: transparent;
  --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 10px 26px rgba(0, 0, 0, 0.60);
  --color-lp-page: #0a0a0b;
  --color-lp-card: #15151a;
  --color-lp-panel: #15151a;
  --color-lp-control: #1e1e24;
  --color-lp-bubble: #1e1e24;
  --color-lp-foot: #0a0a0b;
  --color-lp-disclosure: #1e1e24;
  --color-lp-major-after: #1e1e24;
  --color-lp-significant-after: #1e1e24;
  --color-lp-hairline: #2e2e35;
  --color-lp-card-border: #2e2e35;
  --color-lp-control-border: #2e2e35;
  --color-lp-foot-rule: #2e2e35;
  --color-lp-ink: #f4f2f0;
  --color-lp-quote: #c8c8d0;
  --color-lp-secondary: #c8c8d0;
  --color-lp-dek: #c8c8d0;
  --color-lp-strip-value: #c8c8d0;
  --color-lp-major-after-text: #c8c8d0;
  --color-lp-significant-after-text: #c8c8d0;
  --color-lp-disclosure-text: #c8c8d0;
  --color-lp-muted: #8a8a92;
  --color-lp-faint: #7c7c84;
  --color-lp-brand: #a400d8;
  --color-lp-brand-hover: #b81ae8;
  --color-lp-brand-tint: #cf6cf0;
  --color-lp-link-hover: #f4f2f0;
  --color-lp-on-brand: #ffffff;
  --color-lp-on-brand-soft: #ffffff;
  --color-lp-brand-band-meta: #ffffff;
  --color-lp-disclosure-border: #2e2e35;
  --color-lp-major-solid: #ff6b6f;
  --color-lp-major-text: #ff6b6f;
  --color-lp-major-after-border: #ff6b6f;
  --color-lp-major-after-label: #ff6b6f;
  --color-lp-significant-solid: #e3a92a;
  --color-lp-significant-edge: #e3a92a;
  --color-lp-significant-text: #e3a92a;
  --color-lp-significant-after-border: #e3a92a;
  --color-lp-quiet-solid: #4cc48a;
  --color-lp-quiet-text: #4cc48a;
  --lp-label-meta: 500 12px/1.35 var(--font-mono);
  --lp-label-meta-track: .04em;
  --lp-label-section: 600 12px/1.35 var(--font-mono);
  --lp-label-section-track: .12em;
  --lp-label-chip: 700 12px/1.2 var(--font-mono);
  --lp-label-chip-track: .06em;
  --color-claim-accent: #cf6cf0;
  --color-claim-second: #c8c8d0;
  --color-bg-a: #111319;
  --color-bg-b: #13151a;
  --color-bg-c: #181b21;
  --color-bg-glow: rgba(164, 0, 216, 0.1);
  --color-bg-bar: rgba(17, 19, 25, 0.86);
  --bg-glow-size: 1100px 720px;
  --bg-glow-clear: 68%;
  --bg-glow-h: 900px;
  --color-cc-claude: #d2bea4;
  --color-cc-claude-bg: #262420;
  --color-cc-claude-edge: #3b362f;
  --color-cc-claude-turn: #35312a;
  --color-cc-claude-ink: #eee8de;
  --color-cc-claude-line: #5e5548;
  --color-cc-claude-rule: #3b362f;
  --color-cc-gemini: #93afff;
  --color-cc-gemini-bg: #151a26;
  --color-cc-gemini-edge: #28324a;
  --color-cc-gemini-turn: #222c44;
  --color-cc-gemini-ink: #e2e8f6;
  --color-cc-gemini-line: #3f4e72;
  --color-cc-gemini-rule: #28324a;
  --cc-fill-gemini: linear-gradient(90deg, #4285f4 0%, #9b72cb 60%, #d96570 100%);
  --color-cc-gpt: #d9dce1;
  --color-cc-gpt-bg: #212121;
  --color-cc-gpt-edge: #343434;
  --color-cc-gpt-turn: #303030;
  --color-cc-gpt-ink: #ececec;
  --color-cc-gpt-line: #4d4d4d;
  --color-cc-gpt-rule: #343434;
  --cc-shadow: none;
}
@media (prefers-color-scheme: dark) {
  html:not(.theme-light) {
    color-scheme: dark;
    --color-page: #0a0a0b;
    --color-surface: #121214;
    --color-surface-sunken: #17171a;
    --color-surface-accent: #17171a;
    --color-border: #26262a;
    --color-rule: #26262a;
    --color-rule-soft: #26262a;
    --color-border-accent: #2c2c31;
    --color-border-control: #33333a;
    --color-outline: #33333a;
    --color-chip-neutral: #17171a;
    --color-text: #f4f2f0;
    --color-text-body: #e8e6e4;
    --color-text-secondary: #b6b6bd;
    --color-text-muted: #8a8a92;
    --color-text-faint: #8a8a92;
    --color-link: #cf6cf0;
    --color-link-hover: #e2a0f7;
    --color-link-underline: rgba(207, 108, 240, 0.45);
    --color-focus: #cf6cf0;
    --color-logo-dot: #a400d8;
    --color-nav-hover-bg: #17171a;
    --color-primary: #a400d8;
    --color-primary-hover: #b81ae8;
    --color-on-primary: #ffffff;
    --color-secondary-bg: #121214;
    --color-secondary-text: #f4f2f0;
    --color-secondary-border: #26262a;
    --color-secondary-hover-bg: #17171a;
    --color-secondary-hover-border: #33333a;
    --color-soft-bg: #17171a;
    --color-soft-text: #cf6cf0;
    --color-soft-hover-bg: #a400d8;
    --color-soft-hover-text: #ffffff;
    --color-ok-bg: #11291e;
    --color-ok-text: #63d69b;
    --color-ok-dot: #63d69b;
    --color-ok-bar: #63d69b;
    --color-bar-track: #17171a;
    --color-major-bg: #5f1113;
    --color-major-text: #ff7070;
    --color-major-solid: #ff7070;
    --color-significant-bg: #3a2510;
    --color-significant-text: #e9a23b;
    --color-significant-solid: #e9a23b;
    --color-on-severity-solid: #0d0f12;
    --color-minor-bg: #1b1b1f;
    --color-minor-text: #b6b6bd;
    --color-mark-bg: #343f6d;
    --color-cell-empty: #17171a;
    --color-custody-text: #8a8a92;
    --color-none: transparent;
    --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.55);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-card-hover: 0 10px 26px rgba(0, 0, 0, 0.60);
    --color-lp-page: #0a0a0b;
    --color-lp-card: #15151a;
    --color-lp-panel: #15151a;
    --color-lp-control: #1e1e24;
    --color-lp-bubble: #1e1e24;
    --color-lp-foot: #0a0a0b;
    --color-lp-disclosure: #1e1e24;
    --color-lp-major-after: #1e1e24;
    --color-lp-significant-after: #1e1e24;
    --color-lp-hairline: #2e2e35;
    --color-lp-card-border: #2e2e35;
    --color-lp-control-border: #2e2e35;
    --color-lp-foot-rule: #2e2e35;
    --color-lp-ink: #f4f2f0;
    --color-lp-quote: #c8c8d0;
    --color-lp-secondary: #c8c8d0;
    --color-lp-dek: #c8c8d0;
    --color-lp-strip-value: #c8c8d0;
    --color-lp-major-after-text: #c8c8d0;
    --color-lp-significant-after-text: #c8c8d0;
    --color-lp-disclosure-text: #c8c8d0;
    --color-lp-muted: #8a8a92;
    --color-lp-faint: #7c7c84;
    --color-lp-brand: #a400d8;
    --color-lp-brand-hover: #b81ae8;
    --color-lp-brand-tint: #cf6cf0;
    --color-lp-link-hover: #f4f2f0;
    --color-lp-on-brand: #ffffff;
    --color-lp-on-brand-soft: #ffffff;
    --color-lp-brand-band-meta: #ffffff;
    --color-lp-disclosure-border: #2e2e35;
    --color-lp-major-solid: #ff6b6f;
    --color-lp-major-text: #ff6b6f;
    --color-lp-major-after-border: #ff6b6f;
    --color-lp-major-after-label: #ff6b6f;
    --color-lp-significant-solid: #e3a92a;
    --color-lp-significant-edge: #e3a92a;
    --color-lp-significant-text: #e3a92a;
    --color-lp-significant-after-border: #e3a92a;
    --color-lp-quiet-solid: #4cc48a;
    --color-lp-quiet-text: #4cc48a;
    --lp-label-meta: 500 12px/1.35 var(--font-mono);
    --lp-label-meta-track: .04em;
    --lp-label-section: 600 12px/1.35 var(--font-mono);
    --lp-label-section-track: .12em;
    --lp-label-chip: 700 12px/1.2 var(--font-mono);
    --lp-label-chip-track: .06em;
    --color-claim-accent: #cf6cf0;
    --color-claim-second: #c8c8d0;
    --color-bg-a: #111319;
    --color-bg-b: #13151a;
    --color-bg-c: #181b21;
    --color-bg-glow: rgba(164, 0, 216, 0.1);
    --color-bg-bar: rgba(17, 19, 25, 0.86);
    --bg-glow-size: 1100px 720px;
    --bg-glow-clear: 68%;
    --bg-glow-h: 900px;
    --color-cc-claude: #d2bea4;
    --color-cc-claude-bg: #262420;
    --color-cc-claude-edge: #3b362f;
    --color-cc-claude-turn: #35312a;
    --color-cc-claude-ink: #eee8de;
    --color-cc-claude-line: #5e5548;
    --color-cc-claude-rule: #3b362f;
    --color-cc-gemini: #93afff;
    --color-cc-gemini-bg: #151a26;
    --color-cc-gemini-edge: #28324a;
    --color-cc-gemini-turn: #222c44;
    --color-cc-gemini-ink: #e2e8f6;
    --color-cc-gemini-line: #3f4e72;
    --color-cc-gemini-rule: #28324a;
    --cc-fill-gemini: linear-gradient(90deg, #4285f4 0%, #9b72cb 60%, #d96570 100%);
    --color-cc-gpt: #d9dce1;
    --color-cc-gpt-bg: #212121;
    --color-cc-gpt-edge: #343434;
    --color-cc-gpt-turn: #303030;
    --color-cc-gpt-ink: #ececec;
    --color-cc-gpt-line: #4d4d4d;
    --color-cc-gpt-rule: #343434;
    --cc-shadow: none;
  }
}
html.lp {
  color-scheme: light;
  --color-lp-page: #f5f6f8;
  --color-lp-card: #ffffff;
  --color-lp-panel: #ffffff;
  --color-lp-control: #e9ebf0;
  --color-lp-bubble: #e9ebf0;
  --color-lp-foot: #f5f6f8;
  --color-lp-disclosure: #e9ebf0;
  --color-lp-major-after: #e9ebf0;
  --color-lp-significant-after: #e9ebf0;
  --color-lp-hairline: #dee1e7;
  --color-lp-card-border: #dee1e7;
  --color-lp-control-border: #dee1e7;
  --color-lp-foot-rule: #dee1e7;
  --color-lp-ink: #15171b;
  --color-lp-quote: #3d434d;
  --color-lp-secondary: #3d434d;
  --color-lp-dek: #3d434d;
  --color-lp-strip-value: #3d434d;
  --color-lp-major-after-text: #3d434d;
  --color-lp-significant-after-text: #3d434d;
  --color-lp-disclosure-text: #3d434d;
  --color-lp-muted: #5f6570;
  --color-lp-faint: #6b717c;
  --color-lp-brand: #8f00bd;
  --color-lp-brand-hover: #7a00a3;
  --color-lp-brand-tint: #8f00bd;
  --color-lp-link-hover: #15171b;
  --color-lp-on-brand: #ffffff;
  --color-lp-on-brand-soft: #ffffff;
  --color-lp-brand-band-meta: #ffffff;
  --color-lp-disclosure-border: #dee1e7;
  --color-lp-major-solid: #b0101d;
  --color-lp-major-text: #b0101d;
  --color-lp-major-after-border: #b0101d;
  --color-lp-major-after-label: #b0101d;
  --color-lp-significant-solid: #7f4f00;
  --color-lp-significant-edge: #7f4f00;
  --color-lp-significant-text: #7f4f00;
  --color-lp-significant-after-border: #7f4f00;
  --color-lp-quiet-solid: #146b44;
  --color-lp-quiet-text: #146b44;
  --lp-label-meta: 500 12px/1.35 var(--font-mono);
  --lp-label-meta-track: .04em;
  --lp-label-section: 600 12px/1.35 var(--font-mono);
  --lp-label-section-track: .12em;
  --lp-label-chip: 700 12px/1.2 var(--font-mono);
  --lp-label-chip-track: .06em;
}
html.lp.md {
  color-scheme: light;
  --color-page: #f4f5f7;
  --color-surface: #ffffff;
  --color-surface-sunken: #eef0f4;
  --color-surface-accent: #e8eefd;
  --color-border: #e3e6eb;
  --color-rule: #e3e6eb;
  --color-rule-soft: #e3e6eb;
  --color-border-accent: #e3e6eb;
  --color-border-control: #e3e6eb;
  --color-outline: #c3c8d0;
  --color-chip-neutral: #eef0f4;
  --color-text: #15171b;
  --color-text-body: #15171b;
  --color-text-secondary: #4c525c;
  --color-text-muted: #666c76;
  --color-text-faint: #666c76;
  --color-link: #8f00bd;
  --color-link-hover: #15171b;
  --color-link-underline: rgba(143, 0, 189, 0.45);
  --color-focus: #8f00bd;
  --color-logo-dot: #a400d8;
  --color-nav-hover-bg: #eef0f4;
  --color-primary: #a400d8;
  --color-primary-hover: #15171b;
  --color-on-primary: #fbfcfe;
  --color-secondary-bg: #ffffff;
  --color-secondary-text: #15171b;
  --color-secondary-border: #e3e6eb;
  --color-secondary-hover-bg: #eef0f4;
  --color-secondary-hover-border: #e3e6eb;
  --color-soft-bg: #e8eefd;
  --color-soft-text: #8f00bd;
  --color-soft-hover-bg: #8f00bd;
  --color-soft-hover-text: #fbfcfe;
  --color-ok-bg: #e2f4ea;
  --color-ok-text: #17724a;
  --color-ok-dot: #17724a;
  --color-ok-bar: #17724a;
  --color-bar-track: #eef0f4;
  --color-major-bg: #ffe8e4;
  --color-major-text: #b00a1d;
  --color-major-solid: #b00a1d;
  --color-significant-bg: #fdecd8;
  --color-significant-text: #8a4708;
  --color-significant-solid: #8a4708;
  --color-on-severity-solid: #ffffff;
  --color-minor-bg: #eef0f4;
  --color-minor-text: #4c525c;
  --color-mark-bg: #d6e4ff;
  --color-cell-empty: #eef0f4;
  --color-custody-text: #666c76;
  --color-none: transparent;
  --shadow-raised: 0 8px 24px rgba(21, 23, 27, 0.06);
  --shadow-card: 0 1px 2px rgba(21, 23, 27, 0.04);
  --shadow-card-hover: 0 10px 26px rgba(21, 23, 27, 0.10);
  --color-lp-page: #f5f6f8;
  --color-lp-card: #ffffff;
  --color-lp-panel: #ffffff;
  --color-lp-control: #e9ebf0;
  --color-lp-bubble: #e9ebf0;
  --color-lp-foot: #f5f6f8;
  --color-lp-hairline: #dee1e7;
  --color-lp-card-border: #dee1e7;
  --color-lp-control-border: #dee1e7;
  --color-lp-foot-rule: #dee1e7;
  --color-lp-ink: #15171b;
  --color-lp-quote: #3d434d;
  --color-lp-secondary: #3d434d;
  --color-lp-dek: #3d434d;
  --color-lp-strip-value: #3d434d;
  --color-lp-muted: #5f6570;
  --color-lp-faint: #6b717c;
  --color-lp-brand: #8f00bd;
  --color-lp-brand-hover: #7a00a3;
  --color-lp-brand-tint: #8f00bd;
  --color-lp-link-hover: #15171b;
  --color-lp-quiet-solid: #146b44;
  --color-lp-quiet-text: #146b44;
  --color-lp-disclosure: #e9ebf0;
  --color-lp-major-after: #e9ebf0;
  --color-lp-significant-after: #e9ebf0;
  --color-lp-major-after-text: #3d434d;
  --color-lp-significant-after-text: #3d434d;
  --color-lp-disclosure-text: #3d434d;
  --color-lp-on-brand: #ffffff;
  --color-lp-on-brand-soft: #ffffff;
  --color-lp-brand-band-meta: #ffffff;
  --color-lp-disclosure-border: #dee1e7;
  --color-lp-major-solid: #b0101d;
  --color-lp-major-text: #b0101d;
  --color-lp-major-after-border: #b0101d;
  --color-lp-major-after-label: #b0101d;
  --color-lp-significant-solid: #7f4f00;
  --color-lp-significant-edge: #7f4f00;
  --color-lp-significant-text: #7f4f00;
  --color-lp-significant-after-border: #7f4f00;
  --lp-label-meta: 500 12px/1.35 var(--font-mono);
  --lp-label-meta-track: .04em;
  --lp-label-section: 600 12px/1.35 var(--font-mono);
  --lp-label-section-track: .12em;
  --lp-label-chip: 700 12px/1.2 var(--font-mono);
  --lp-label-chip-track: .06em;
}
html.lp.theme-dark {
  color-scheme: dark;
  --color-lp-page: #0a0a0b;
  --color-lp-card: #15151a;
  --color-lp-panel: #15151a;
  --color-lp-control: #1e1e24;
  --color-lp-bubble: #1e1e24;
  --color-lp-foot: #0a0a0b;
  --color-lp-disclosure: #1e1e24;
  --color-lp-major-after: #1e1e24;
  --color-lp-significant-after: #1e1e24;
  --color-lp-hairline: #2e2e35;
  --color-lp-card-border: #2e2e35;
  --color-lp-control-border: #2e2e35;
  --color-lp-foot-rule: #2e2e35;
  --color-lp-ink: #f4f2f0;
  --color-lp-quote: #c8c8d0;
  --color-lp-secondary: #c8c8d0;
  --color-lp-dek: #c8c8d0;
  --color-lp-strip-value: #c8c8d0;
  --color-lp-major-after-text: #c8c8d0;
  --color-lp-significant-after-text: #c8c8d0;
  --color-lp-disclosure-text: #c8c8d0;
  --color-lp-muted: #8a8a92;
  --color-lp-faint: #7c7c84;
  --color-lp-brand: #a400d8;
  --color-lp-brand-hover: #b81ae8;
  --color-lp-brand-tint: #cf6cf0;
  --color-lp-link-hover: #f4f2f0;
  --color-lp-on-brand: #ffffff;
  --color-lp-on-brand-soft: #ffffff;
  --color-lp-brand-band-meta: #ffffff;
  --color-lp-disclosure-border: #2e2e35;
  --color-lp-major-solid: #ff6b6f;
  --color-lp-major-text: #ff6b6f;
  --color-lp-major-after-border: #ff6b6f;
  --color-lp-major-after-label: #ff6b6f;
  --color-lp-significant-solid: #e3a92a;
  --color-lp-significant-edge: #e3a92a;
  --color-lp-significant-text: #e3a92a;
  --color-lp-significant-after-border: #e3a92a;
  --color-lp-quiet-solid: #4cc48a;
  --color-lp-quiet-text: #4cc48a;
  --lp-label-meta: 500 12px/1.35 var(--font-mono);
  --lp-label-meta-track: .04em;
  --lp-label-section: 600 12px/1.35 var(--font-mono);
  --lp-label-section-track: .12em;
  --lp-label-chip: 700 12px/1.2 var(--font-mono);
  --lp-label-chip-track: .06em;
}
html.md.theme-dark {
  color-scheme: dark;
  --color-page: #0a0a0b;
  --color-surface: #121214;
  --color-surface-sunken: #17171a;
  --color-surface-accent: #17171a;
  --color-border: #26262a;
  --color-rule: #26262a;
  --color-rule-soft: #26262a;
  --color-border-accent: #2c2c31;
  --color-border-control: #33333a;
  --color-outline: #33333a;
  --color-chip-neutral: #17171a;
  --color-text: #f4f2f0;
  --color-text-body: #e8e6e4;
  --color-text-secondary: #b6b6bd;
  --color-text-muted: #8a8a92;
  --color-text-faint: #8a8a92;
  --color-link: #cf6cf0;
  --color-link-hover: #e2a0f7;
  --color-link-underline: rgba(207, 108, 240, 0.45);
  --color-focus: #cf6cf0;
  --color-logo-dot: #a400d8;
  --color-nav-hover-bg: #17171a;
  --color-primary: #a400d8;
  --color-primary-hover: #b81ae8;
  --color-on-primary: #ffffff;
  --color-secondary-bg: #121214;
  --color-secondary-text: #f4f2f0;
  --color-secondary-border: #26262a;
  --color-secondary-hover-bg: #17171a;
  --color-secondary-hover-border: #33333a;
  --color-soft-bg: #17171a;
  --color-soft-text: #cf6cf0;
  --color-soft-hover-bg: #a400d8;
  --color-soft-hover-text: #ffffff;
  --color-ok-bg: #11291e;
  --color-ok-text: #63d69b;
  --color-ok-dot: #63d69b;
  --color-ok-bar: #63d69b;
  --color-bar-track: #17171a;
  --color-major-bg: #5f1113;
  --color-major-text: #ff7070;
  --color-major-solid: #ff7070;
  --color-significant-bg: #3a2510;
  --color-significant-text: #e9a23b;
  --color-significant-solid: #e9a23b;
  --color-on-severity-solid: #0d0f12;
  --color-minor-bg: #1b1b1f;
  --color-minor-text: #b6b6bd;
  --color-mark-bg: #343f6d;
  --color-cell-empty: #17171a;
  --color-custody-text: #8a8a92;
  --color-none: transparent;
  --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 10px 26px rgba(0, 0, 0, 0.60);
  --color-lp-page: #0a0a0b;
  --color-lp-card: #15151a;
  --color-lp-panel: #15151a;
  --color-lp-control: #1e1e24;
  --color-lp-bubble: #1e1e24;
  --color-lp-foot: #0a0a0b;
  --color-lp-disclosure: #1e1e24;
  --color-lp-major-after: #1e1e24;
  --color-lp-significant-after: #1e1e24;
  --color-lp-hairline: #2e2e35;
  --color-lp-card-border: #2e2e35;
  --color-lp-control-border: #2e2e35;
  --color-lp-foot-rule: #2e2e35;
  --color-lp-ink: #f4f2f0;
  --color-lp-quote: #c8c8d0;
  --color-lp-secondary: #c8c8d0;
  --color-lp-dek: #c8c8d0;
  --color-lp-strip-value: #c8c8d0;
  --color-lp-major-after-text: #c8c8d0;
  --color-lp-significant-after-text: #c8c8d0;
  --color-lp-disclosure-text: #c8c8d0;
  --color-lp-muted: #8a8a92;
  --color-lp-faint: #7c7c84;
  --color-lp-brand: #a400d8;
  --color-lp-brand-hover: #b81ae8;
  --color-lp-brand-tint: #cf6cf0;
  --color-lp-link-hover: #f4f2f0;
  --color-lp-on-brand: #ffffff;
  --color-lp-on-brand-soft: #ffffff;
  --color-lp-brand-band-meta: #ffffff;
  --color-lp-disclosure-border: #2e2e35;
  --color-lp-major-solid: #ff6b6f;
  --color-lp-major-text: #ff6b6f;
  --color-lp-major-after-border: #ff6b6f;
  --color-lp-major-after-label: #ff6b6f;
  --color-lp-significant-solid: #e3a92a;
  --color-lp-significant-edge: #e3a92a;
  --color-lp-significant-text: #e3a92a;
  --color-lp-significant-after-border: #e3a92a;
  --color-lp-quiet-solid: #4cc48a;
  --color-lp-quiet-text: #4cc48a;
  --lp-label-meta: 500 12px/1.35 var(--font-mono);
  --lp-label-meta-track: .04em;
  --lp-label-section: 600 12px/1.35 var(--font-mono);
  --lp-label-section-track: .12em;
  --lp-label-chip: 700 12px/1.2 var(--font-mono);
  --lp-label-chip-track: .06em;
}
@media (prefers-color-scheme: dark) {
  html.lp:not(.theme-light) {
    color-scheme: dark;
    --color-lp-page: #0a0a0b;
    --color-lp-card: #15151a;
    --color-lp-panel: #15151a;
    --color-lp-control: #1e1e24;
    --color-lp-bubble: #1e1e24;
    --color-lp-foot: #0a0a0b;
    --color-lp-disclosure: #1e1e24;
    --color-lp-major-after: #1e1e24;
    --color-lp-significant-after: #1e1e24;
    --color-lp-hairline: #2e2e35;
    --color-lp-card-border: #2e2e35;
    --color-lp-control-border: #2e2e35;
    --color-lp-foot-rule: #2e2e35;
    --color-lp-ink: #f4f2f0;
    --color-lp-quote: #c8c8d0;
    --color-lp-secondary: #c8c8d0;
    --color-lp-dek: #c8c8d0;
    --color-lp-strip-value: #c8c8d0;
    --color-lp-major-after-text: #c8c8d0;
    --color-lp-significant-after-text: #c8c8d0;
    --color-lp-disclosure-text: #c8c8d0;
    --color-lp-muted: #8a8a92;
    --color-lp-faint: #7c7c84;
    --color-lp-brand: #a400d8;
    --color-lp-brand-hover: #b81ae8;
    --color-lp-brand-tint: #cf6cf0;
    --color-lp-link-hover: #f4f2f0;
    --color-lp-on-brand: #ffffff;
    --color-lp-on-brand-soft: #ffffff;
    --color-lp-brand-band-meta: #ffffff;
    --color-lp-disclosure-border: #2e2e35;
    --color-lp-major-solid: #ff6b6f;
    --color-lp-major-text: #ff6b6f;
    --color-lp-major-after-border: #ff6b6f;
    --color-lp-major-after-label: #ff6b6f;
    --color-lp-significant-solid: #e3a92a;
    --color-lp-significant-edge: #e3a92a;
    --color-lp-significant-text: #e3a92a;
    --color-lp-significant-after-border: #e3a92a;
    --color-lp-quiet-solid: #4cc48a;
    --color-lp-quiet-text: #4cc48a;
    --lp-label-meta: 500 12px/1.35 var(--font-mono);
    --lp-label-meta-track: .04em;
    --lp-label-section: 600 12px/1.35 var(--font-mono);
    --lp-label-section-track: .12em;
    --lp-label-chip: 700 12px/1.2 var(--font-mono);
    --lp-label-chip-track: .06em;
  }
  html.md:not(.theme-light) {
    color-scheme: dark;
    --color-page: #0a0a0b;
    --color-surface: #121214;
    --color-surface-sunken: #17171a;
    --color-surface-accent: #17171a;
    --color-border: #26262a;
    --color-rule: #26262a;
    --color-rule-soft: #26262a;
    --color-border-accent: #2c2c31;
    --color-border-control: #33333a;
    --color-outline: #33333a;
    --color-chip-neutral: #17171a;
    --color-text: #f4f2f0;
    --color-text-body: #e8e6e4;
    --color-text-secondary: #b6b6bd;
    --color-text-muted: #8a8a92;
    --color-text-faint: #8a8a92;
    --color-link: #cf6cf0;
    --color-link-hover: #e2a0f7;
    --color-link-underline: rgba(207, 108, 240, 0.45);
    --color-focus: #cf6cf0;
    --color-logo-dot: #a400d8;
    --color-nav-hover-bg: #17171a;
    --color-primary: #a400d8;
    --color-primary-hover: #b81ae8;
    --color-on-primary: #ffffff;
    --color-secondary-bg: #121214;
    --color-secondary-text: #f4f2f0;
    --color-secondary-border: #26262a;
    --color-secondary-hover-bg: #17171a;
    --color-secondary-hover-border: #33333a;
    --color-soft-bg: #17171a;
    --color-soft-text: #cf6cf0;
    --color-soft-hover-bg: #a400d8;
    --color-soft-hover-text: #ffffff;
    --color-ok-bg: #11291e;
    --color-ok-text: #63d69b;
    --color-ok-dot: #63d69b;
    --color-ok-bar: #63d69b;
    --color-bar-track: #17171a;
    --color-major-bg: #5f1113;
    --color-major-text: #ff7070;
    --color-major-solid: #ff7070;
    --color-significant-bg: #3a2510;
    --color-significant-text: #e9a23b;
    --color-significant-solid: #e9a23b;
    --color-on-severity-solid: #0d0f12;
    --color-minor-bg: #1b1b1f;
    --color-minor-text: #b6b6bd;
    --color-mark-bg: #343f6d;
    --color-cell-empty: #17171a;
    --color-custody-text: #8a8a92;
    --color-none: transparent;
    --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.55);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-card-hover: 0 10px 26px rgba(0, 0, 0, 0.60);
    --color-lp-page: #0a0a0b;
    --color-lp-card: #15151a;
    --color-lp-panel: #15151a;
    --color-lp-control: #1e1e24;
    --color-lp-bubble: #1e1e24;
    --color-lp-foot: #0a0a0b;
    --color-lp-disclosure: #1e1e24;
    --color-lp-major-after: #1e1e24;
    --color-lp-significant-after: #1e1e24;
    --color-lp-hairline: #2e2e35;
    --color-lp-card-border: #2e2e35;
    --color-lp-control-border: #2e2e35;
    --color-lp-foot-rule: #2e2e35;
    --color-lp-ink: #f4f2f0;
    --color-lp-quote: #c8c8d0;
    --color-lp-secondary: #c8c8d0;
    --color-lp-dek: #c8c8d0;
    --color-lp-strip-value: #c8c8d0;
    --color-lp-major-after-text: #c8c8d0;
    --color-lp-significant-after-text: #c8c8d0;
    --color-lp-disclosure-text: #c8c8d0;
    --color-lp-muted: #8a8a92;
    --color-lp-faint: #7c7c84;
    --color-lp-brand: #a400d8;
    --color-lp-brand-hover: #b81ae8;
    --color-lp-brand-tint: #cf6cf0;
    --color-lp-link-hover: #f4f2f0;
    --color-lp-on-brand: #ffffff;
    --color-lp-on-brand-soft: #ffffff;
    --color-lp-brand-band-meta: #ffffff;
    --color-lp-disclosure-border: #2e2e35;
    --color-lp-major-solid: #ff6b6f;
    --color-lp-major-text: #ff6b6f;
    --color-lp-major-after-border: #ff6b6f;
    --color-lp-major-after-label: #ff6b6f;
    --color-lp-significant-solid: #e3a92a;
    --color-lp-significant-edge: #e3a92a;
    --color-lp-significant-text: #e3a92a;
    --color-lp-significant-after-border: #e3a92a;
    --color-lp-quiet-solid: #4cc48a;
    --color-lp-quiet-text: #4cc48a;
    --lp-label-meta: 500 12px/1.35 var(--font-mono);
    --lp-label-meta-track: .04em;
    --lp-label-section: 600 12px/1.35 var(--font-mono);
    --lp-label-section-track: .12em;
    --lp-label-chip: 700 12px/1.2 var(--font-mono);
    --lp-label-chip-track: .06em;
  }
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--color-page); color: var(--color-text); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--color-page); color: var(--color-text); font: 400 16px/1.55 var(--font-sans);
       -webkit-font-smoothing: antialiased; font-kerning: normal; text-rendering: optimizeLegibility; }
em, i, cite, dfn, var, address { font-style: normal; }
.wrap { max-width: calc(var(--max-width) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) 56px; }
a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); }
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* links in running prose are underlined at rest (the link colour alone is too close to the text colour) */
main :where(p, li, dd.prose, dd) a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
                                    text-decoration-color: var(--color-link-underline); }
main :where(p, li, dd.prose, dd) a:hover { text-decoration-color: currentColor; }
main :is(.kicker, .status-meta, .q-date, .ex-ts, .side-date, .card-foot, .permaline) a { text-decoration: none; }
/* row, button and header/footer links are not prose: the whole row or control is the target */
main a:is(.evrow, .hist-row, .story-row, .lead, .cell, .btn-primary, .btn-secondary, .btn-soft, .btn-ghost, .head-link, .foot-link, .sec-link, .q-link, .rlink),
main a:has(> .chip) { text-decoration: none; }
main :is(.kicker, .status-meta, .q-date, .ex-ts, .side-date, .card-foot, .permaline) a:hover { text-decoration: underline; text-decoration-color: currentColor; }
p { margin: 0 0 .8em; }
h1, h2, h3 { font-weight: 700; color: var(--color-text); }
b, strong { font-weight: 600; }
.m { font-family: var(--font-mono); font-size: .92em; overflow-wrap: anywhere; }
.dim { color: var(--color-text-muted); }
.u { display: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.nw { white-space: nowrap; }


.obs { white-space: nowrap; }


/* section cards (lists, facts, folds on every page) */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
        margin-top: var(--space-section); overflow: hidden; }
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 8px; padding: 14px 16px 12px; }
.card-head h2 { margin: 0; font-size: 15.5px; line-height: 1.3; letter-spacing: -.01em; }
.card-head h2 .dim { font-size: 13.5px; font-weight: 400; letter-spacing: 0; }
.head-link, .foot-link, .sec-link { display: inline-block; padding-block: 13px; margin-block: -13px; font-size: 13.5px; line-height: 18px; font-weight: 600;
                                   color: var(--color-link); }
.head-link:hover, .foot-link:hover, .sec-link:hover { color: var(--color-link-hover); }
.card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 13px 16px;
             border-top: 1px solid var(--color-rule-soft); }
.card-foot > p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--color-text-secondary); }
.none { margin: 0; padding: 14px 16px; color: var(--color-text-muted); font-size: 15px; }
/* front-page sections: heading outside the card (L89-93) */
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px; }
.sec-head h2 { margin: 0; font: 700 19px/1.2 var(--font-sans); letter-spacing: -.015em; }
.sec-note { font-size: 13px; line-height: 1.35; color: var(--color-text-secondary); }
.list-card { margin-top: 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; }


/* run status (L38-43) */
.status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: var(--radius-pill);
               border: 1px solid var(--color-outline); background: var(--color-none); color: var(--color-text-secondary);
               font: 600 12.5px/15px var(--font-sans); }
.status-pill .dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-muted); }
/* record pass six: green means Nominal and nothing else, so a complete run is the ink, outlined, not green */
.status-pill.complete { border-color: var(--color-text); color: var(--color-text); }
.status-pill.complete .dot { background: var(--color-text); }
.status-pill.pending { border-style: dashed; color: var(--color-text-muted); }
.status-pill.partial .dot { background: var(--color-none); box-shadow: inset 0 0 0 1.5px var(--color-text-muted); }
@keyframes mdpulse { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }
.status-meta { font: 500 13px/1.4 var(--font-sans); color: var(--color-text-secondary); }
.status-meta a { color: var(--color-text-secondary); }
.status-meta a:hover { color: var(--color-link-hover); }


/* severity chips (L46-47) and model pills (L99): filled = major red, significant amber, minor grey; neutral states outlined */
.chip { display: inline-block; flex: none; padding: 5px 10px; border: 0; border-radius: var(--radius-chip);
        font: 700 12px/14px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; vertical-align: baseline; }
.chip.soft { font-weight: 600; letter-spacing: 0; text-transform: none; }
.chip.pill { padding: 4px 9px; border-radius: var(--radius-pill); }
.chip.sm { font-size: 11px; line-height: 13px; padding: 3px 7px; border-radius: var(--radius-row-chip); }
.model-pill { display: inline-block; padding: 4px 9px; border: 0; border-radius: var(--radius-pill); font: 600 12px/14px var(--font-sans); white-space: nowrap; }
:is(.chip, .model-pill):is(.sev-quiet, .sev-baseline, .sev-withdrawn, .sev-untriaged, .sev-pending, .sev-nodata, .sev-untracked) { padding: 4px 9px; }
.chip.sm:is(.sev-quiet, .sev-baseline, .sev-withdrawn, .sev-untriaged, .sev-pending, .sev-nodata, .sev-untracked) { padding: 2px 6px; }
.model-pill.pill-ok { border: 1px solid var(--color-outline); background: var(--color-none); color: var(--color-text); }
:is(.chip, .model-pill).sev-major { background: var(--color-major-bg); color: var(--color-major-text); }
:is(.chip, .model-pill).sev-significant { background: var(--color-significant-bg); color: var(--color-significant-text); }
:is(.chip, .model-pill).sev-minor { background: var(--color-minor-bg); color: var(--color-minor-text); }
:is(.chip, .model-pill):is(.sev-quiet, .sev-baseline, .sev-withdrawn, .sev-untracked) { background: var(--color-none); color: var(--color-text-muted); border: 1px solid var(--color-outline); }
:is(.chip, .model-pill).sev-untriaged { background: var(--color-none); color: var(--color-text-secondary); border: 1px solid var(--color-outline); }
:is(.chip, .model-pill):is(.sev-pending, .sev-nodata) { background: var(--color-none); color: var(--color-text-muted); border: 1px dashed var(--color-outline); }
/* steady: the day's readings held AND the model answered every question, which is the only other place the
   severity colour law lets green appear (2026-09-20) */
:is(.chip, .model-pill).sev-steady { background: var(--color-ok-bg); color: var(--color-ok-text); }
.chip.sev-withdrawn { text-decoration: line-through; }


/* hero (L37-51): on the page background, not a card */
.hero { padding: var(--space-hero-top) 0 0; }
.hero-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: var(--space-chips-top); }
h1.display { font: 700 clamp(30px, 7vw, 50px)/1.08 var(--font-sans); letter-spacing: -.03em; margin: var(--space-h1-top) 0 0;
             max-width: 22ch; text-wrap: pretty; color: var(--color-text); }
h1.display.long { font-size: clamp(26px, 5.6vw, 40px); max-width: 28ch; }
.hero .dek { font-size: clamp(16px, 3.4vw, 19px); line-height: 1.55; margin: var(--space-dek-top) 0 0; max-width: 60ch; color: var(--color-text-secondary); }
.dek .m, .ba .m { color: var(--color-text); }
.arrow { color: var(--color-text-faint); padding: 0 .15em; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 16px; }
.hero .notice { margin-top: 16px; }


/* buttons (L84, L85, L195, L196); 44 px tall (ours: tap targets) */
.btn-primary, .btn-secondary, .btn-soft, .btn-ghost { display: inline-flex; align-items: center; min-height: 44px; padding: 11px 16px;
                                                      border-radius: var(--radius-button); font: 600 14px/20px var(--font-sans);
                                                      text-decoration: none; cursor: pointer; }
.btn-primary { border: 0; background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.btn-secondary { padding: 10px 15px; background: var(--color-secondary-bg); color: var(--color-secondary-text); border: 1px solid var(--color-secondary-border); }
.btn-secondary:hover { background: var(--color-secondary-hover-bg); border-color: var(--color-secondary-hover-border); color: var(--color-secondary-text); }
.btn-soft { padding: 11px 15px; background: var(--color-soft-bg); color: var(--color-soft-text); }
.btn-soft:hover { background: var(--color-soft-hover-bg); color: var(--color-soft-hover-text); }
.btn-ghost { padding: 11px 4px; font-weight: 500; color: var(--color-text-secondary); }
.btn-ghost:hover { color: var(--color-text); }
:is(.btn-primary, .btn-secondary, .btn-soft, .btn-ghost):focus-visible { outline-offset: 3px; }

/* notice */
.notice { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--space-section); padding: 12px 16px;
          background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: var(--radius-tile); }
.notice p { margin: 0; min-width: 0; font-size: 14px; line-height: 1.5; color: var(--color-text-body); overflow-wrap: anywhere; }
.notice-glyph { flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%;
                border: 1px solid var(--color-outline); font: 700 11px/1 var(--font-sans); color: var(--color-text-muted); }


/* evidence card (L53-87): padded card, quote tiles, collapsible question + severity note, actions */
/* nesting budget (exhibit rework 2026-09-16): the evidence is an open section, its quotes are the boxes. The insets
   that kept its contents off the old card's border go with the card, so the evidence sits on the page's spine. */
.evidence { margin-top: var(--space-evidence-top); }
.evidence :is(.ev-head, .ev-story, .ev-actions) { padding-left: 0; padding-right: 0; }
.evidence .quotes { padding: 0; }
.ev-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px 10px; }
.ev-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ev-title { margin: 0; min-width: 0; font: 700 13.5px/18px var(--font-sans); color: var(--color-text); }
.ev-model { font: 11.5px/16px var(--font-mono); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.ev-story { padding: 2px 14px 14px; }
.ev-headline { margin: 0; font: 700 20px/1.25 var(--font-sans); letter-spacing: -.02em; color: var(--color-text); text-wrap: pretty; }
.ev-dek { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--color-text-secondary); max-width: 64ch; }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; padding: 0 6px; }
.quotes + .quotes { margin-top: 8px; }
.quote { min-width: 0; padding: 14px; border-radius: var(--radius-inner); background: var(--color-surface-sunken); }
.quote.today { background: var(--color-surface); border: 1.5px solid var(--color-border); }
.quote.today.sev-major { border-color: var(--color-major-bg); }
.quote.today.sev-significant { border-color: var(--color-significant-bg); }
.q-date { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; margin: 0;
          font: 11.5px/16px var(--font-mono); color: var(--color-text-secondary); }
.quote.today.sev-major .q-date { color: var(--color-major-text); }
.quote.today.sev-significant .q-date { color: var(--color-significant-text); }
.q-date .role { font-family: var(--font-sans); }
.q-link { margin: -13px 0 -13px auto; padding: 13px 0; font: 600 12px/16px var(--font-sans); color: var(--color-link); }
.q-link:hover { color: var(--color-link-hover); }
/* The brand accent may not go near anything with severity meaning (CLAUDE.md, permanent). Now that the record
   site's accent IS the brand, a link inside a severity container takes the ink colour instead (2026-09-20). */
:is(.major, [class*="sev-"]) a { color: var(--color-text); text-decoration-color: var(--color-outline); }
:is(.major, [class*="sev-"]) a:hover { color: var(--color-text-secondary); }
.q-state { margin: 9px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text); }
.q-text { margin: 9px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text); overflow-wrap: anywhere; }
.q-text mark { background: var(--color-none); padding: 0; border-radius: 0; }
.qq::before { content: "\201C"; }
.qq::after { content: "\201D"; }
.q-text.raw { font: 13px/1.6 var(--font-mono); white-space: pre-wrap; }
.q-text.raw .qq::before, .q-text.raw .qq::after { content: none; }
.elide { color: var(--color-text-muted); }
.q-note { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--color-text-secondary); }
.q-missing { margin: 9px 0 0; font-size: 15px; line-height: 1.45; color: var(--color-text-muted); }
.q-picks { margin: 8px 0 0; padding-left: 1.8em; font: 12.5px/1.55 var(--font-mono); color: var(--color-text); overflow-wrap: anywhere; }
.ev-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 12px 6px 6px; }
details.ev-more > summary { list-style: none; }
details.ev-more > summary::-webkit-details-marker { display: none; }
details.ev-more[open] { flex-basis: 100%; }
.ev-more .hide, details.ev-more[open] .show { display: none; }
details.ev-more[open] .hide { display: inline; }
.ev-more-body { margin-top: 8px; padding: 14px 0 0; border-top: 1px solid var(--color-rule-soft); }
.ev-more-label { margin: 0; font: 11.5px/16px var(--font-mono); color: var(--color-text-secondary); }
.ev-more-label.why { padding-top: 14px; }
.ev-more-q { margin: 7px 0 0; font: 13px/1.6 var(--font-mono); color: var(--color-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.ev-more-why { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--color-text-secondary); text-wrap: pretty; }
.story-row { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 13px 16px; color: var(--color-text); font-size: 15px; line-height: 1.45; }
.story-row:focus-visible, .evrow:focus-visible, .hist-row:focus-visible, a.lead:focus-visible, details.fold > summary:focus-visible { outline-offset: -2px; }
.story-text { flex: 1; min-width: 0; }


/* "Where each model stands" (L89-135) */
.models { padding-top: var(--space-block); }
.model-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-grid); padding-top: 12px; }
.model { display: flex; flex-direction: column; min-width: 0; padding: 16px; background: var(--color-surface); border: 1px solid var(--color-border);
         border-radius: var(--radius-card); }
.model:hover { border-color: var(--color-outline); }
.model.sev-major { border: 1.5px solid var(--color-major-bg); }
.model.sev-significant { border: 1.5px solid var(--color-significant-bg); }
.model-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.model-name { margin: 0; min-width: 0; font: 700 15.5px/20px var(--font-sans); overflow-wrap: anywhere; }
.model-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.model-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding-top: 14px; }
.model-num { font: 700 34px/1 var(--font-sans); letter-spacing: -.03em; color: var(--color-text); font-variant-numeric: tabular-nums; }
.model-num.sev-major { color: var(--color-major-text); }
.model-num.sev-significant { color: var(--color-significant-text); }
.model-phrase { font: 500 13.5px/1.35 var(--font-sans); color: var(--color-text-secondary); }
.model-note { margin: 14px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--color-text-secondary); }
/* bar (L105): fill = responses recorded / expected (ours, honest); colour by the model's state */
progress.model-bar { display: block; width: 100%; height: 5px; margin-top: 14px; border: 0; border-radius: var(--radius-pill); overflow: hidden;
                     background: var(--color-bar-track); color: var(--color-text); -webkit-appearance: none; appearance: none; }
progress.model-bar::-webkit-progress-bar { background: var(--color-bar-track); }
progress.model-bar::-webkit-progress-value { background: var(--color-text); }
progress.model-bar::-moz-progress-bar { background: var(--color-text); }
progress.model-bar.sev-major::-webkit-progress-value { background: var(--color-major-solid); }
progress.model-bar.sev-major::-moz-progress-bar { background: var(--color-major-solid); }
progress.model-bar.sev-significant::-webkit-progress-value { background: var(--color-significant-solid); }
progress.model-bar.sev-significant::-moz-progress-bar { background: var(--color-significant-solid); }
progress.model-bar.partly::-webkit-progress-value { background: var(--color-outline); }
progress.model-bar.partly::-moz-progress-bar { background: var(--color-outline); }
.model-cov { padding-top: 7px; font: 11.5px/1.5 var(--font-mono); color: var(--color-text-secondary); overflow-wrap: anywhere; }

/* strip of days, per model */
.strip-row { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 12px 18px; border-top: 1px solid var(--color-rule-soft); }
.strip-head { border-top: 0; padding-top: 0; padding-bottom: 6px; }
.strip-head .strip-name { display: none; }
.strip-name { font: 600 13.5px/1.4 var(--font-sans); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.cells { display: grid; grid-template-columns: repeat(21, minmax(0, 1fr)); gap: 3px; }
.cell { display: grid; place-items: center; height: 28px; border-radius: var(--radius-cell); border: 1px solid var(--color-none);
        font: 700 11px/1 var(--font-mono); color: var(--color-text-faint); }
a.cell:hover { outline: 2px solid var(--color-focus); outline-offset: 1px; color: var(--color-text-faint); }
a.cell:focus-visible { outline-offset: 1px; }
.dh { font: 11px/1.25 var(--font-mono); color: var(--color-text-secondary); text-align: center; }
.dh .mon { display: block; visibility: hidden; white-space: nowrap; }
.dh.f21 .mon, .dh.dom1 .mon { visibility: visible; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: 13px; line-height: 1.35; color: var(--color-text-secondary); }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-grid; place-items: center; flex: none; width: 14px; height: 18px; border-radius: 4px; border: 1px solid var(--color-none);
      font: 700 9px/1 var(--font-mono); color: var(--color-text-faint); }
:is(.cell, .sw).sev-major { background: var(--color-major-solid); color: var(--color-on-severity-solid); }
:is(.cell, .sw).sev-significant { background: var(--color-significant-solid); color: var(--color-on-severity-solid); }
:is(.cell, .sw).sev-minor { background: var(--color-minor-bg); }
:is(.cell, .sw):is(.sev-quiet, .sev-baseline) { border-color: var(--color-outline); }
:is(.cell, .sw).sev-untriaged { border-color: var(--color-text-muted); }
:is(.cell, .sw):is(.sev-nodata, .sev-pending) { border: 1px dashed var(--color-outline); }
:is(.cell, .sw).sev-untracked { border: 1px dotted var(--color-outline); }
@media (min-width: 56rem) {
  .strip-row { grid-template-columns: 11rem minmax(0, 1fr); column-gap: 12px; align-items: center; }
  .strip-head .strip-name { display: block; }
}
@media (max-width: 55.99rem) {
  .cells { grid-template-columns: repeat(14, minmax(0, 1fr)); }
  .w21 { display: none !important; }
  .dh.f21 .mon { visibility: hidden; }
  .dh.f14 .mon, .dh.dom1 .mon { visibility: visible; }
}
@media (max-width: 40rem) {
  .cells { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .w14 { display: none !important; }
  .dh.f14 .mon { visibility: hidden; }
  .dh.f12 .mon, .dh.dom1 .mon { visibility: visible; }
}
@media (max-width: 24rem) {
  .cells { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .w12 { display: none !important; }
  .dh.f12 .mon { visibility: hidden; }
  .dh.f11 .mon, .dh.dom1 .mon { visibility: visible; }
  .strip-row { padding-inline: 12px; }
}


/* stat tiles (L137-154) */
/* the record in numbers: a ruled ledger, not a row of tiles. Four squares with a number in each was the
   composition the fresh-eyes audit called "just squares"; these are records on hairlines (2026-09-20). */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 var(--space-grid);
         padding-top: var(--space-stats-top); border-top: 1px solid var(--color-rule); }
.stat { display: flex; flex-direction: column; margin: 0; padding: 12px 0 14px; }
.stat-v { font: 700 26px/1 var(--font-sans); letter-spacing: -.03em; color: var(--color-text); font-variant-numeric: tabular-nums; }
.stat-l { padding-top: 5px; font: 500 13px/1.35 var(--font-sans); color: var(--color-text-secondary); }


/* change rows (L156-172): each row one link; severity chip, model chip, mono id, then the sentence */
.feed { padding-top: var(--space-block); }
.evs { list-style: none; margin: 0; padding: 0; }
.evrow { display: block; min-height: 44px; padding: 14px 16px; border-bottom: 1px solid var(--color-rule); color: var(--color-text); }
.evs > li:last-child > .evrow { border-bottom: 0; }
.evrow:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.ev-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.model-chip { display: inline-block; padding: 2px 7px; border: 1px solid var(--color-outline); border-radius: var(--radius-row-chip);
              font: 600 11.5px/14px var(--font-sans); color: var(--color-text-secondary); white-space: nowrap; }
.ev-id { font: 11.5px/16px var(--font-mono); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.evrow .d { display: block; padding-top: 6px; font-size: 15px; line-height: 1.45; color: var(--color-text); text-wrap: pretty; }
.fold-body > .evs > li:first-child > .evrow { border-top: 0; }
.list-card > .evs + details.fold > summary, .list-card > .evs + .evs { border-top: 1px solid var(--color-rule); }

/* folds (native <details>, work without script) */
details.fold > summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px;
                         min-height: 44px; padding: 15px 18px 13px; cursor: pointer; list-style: none; border-top: 1px solid var(--color-rule-soft); }
details.fold > summary::-webkit-details-marker { display: none; }
.fold-title { font: 600 16px/20px var(--font-sans); letter-spacing: -.015em; color: var(--color-text); }
.feed .fold-title { font-size: 14.5px; letter-spacing: 0; }
.fold-act { font: 600 13.5px/18px var(--font-sans); color: var(--color-link); }
.fold-act .hide, details.fold[open] .fold-act .show { display: none; }
details.fold[open] .fold-act .hide { display: inline; }
.fold-sub { flex-basis: 100%; font-size: 13.5px; line-height: 1.4; color: var(--color-text-secondary); }
details.fold > summary:hover { background: var(--color-surface-sunken); }
details.fold[open] > summary { border-bottom: 1px solid var(--color-rule-soft); }
details.fold.card > summary { border-top: 0; }
details.fold.card[open] > summary { border-bottom: 1px solid var(--color-rule); }


/* days (L200-212): mono date, the day sentence, one chip */
.history { padding-top: var(--space-block); }
.hist-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 10px; min-height: 44px;
            padding: 14px 16px; border-bottom: 1px solid var(--color-rule); color: var(--color-text); }
.list-card > .hist-row:last-child { border-bottom: 0; }
a.hist-row:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.hist-l { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; }
.hist-date { flex: none; font: 12px/18px var(--font-mono); color: var(--color-text-secondary); }
.hist-title { min-width: 0; font: 500 15px/1.45 var(--font-sans); color: var(--color-text); text-wrap: pretty; }
.hist-row.gap .hist-title { color: var(--color-text-faint); }
.hist-lead { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 400; line-height: 1.4; color: var(--color-text-secondary); }
.hist-row .chip { flex: none; }
.days-list { margin-top: 18px; }
.seg.sev-major { color: var(--color-major-text); }
.seg.sev-significant { color: var(--color-significant-text); }
.seg.muted { color: var(--color-text-secondary); }
.seg.faint { color: var(--color-text-faint); }


/* how the record is made (L174-198) */
.method { padding-top: var(--space-block); }
/* how the record is made: four entries on hairlines, the landing's chapter language, not four tiles */
.method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 var(--space-grid);
               margin: 0; padding-top: 12px; }
.method-card { padding: 13px 0 15px; border-top: 1px solid var(--color-rule); }
.method-card dt { margin: 0; font: var(--lp-label-section); letter-spacing: var(--lp-label-section-track);
                  text-transform: uppercase; color: var(--color-text-secondary); }
.method-card dd { margin: 0; padding-top: 7px; font-size: 14.5px; line-height: 1.55; color: var(--color-text-secondary);
                  text-wrap: pretty; }
.method-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; align-items: center; }
/* The price sits WITH the button, which is where a price belongs: a reader deciding has the number and the
   control in one glance. One rule, no new token: the muted text the page already has. The design pass owns how
   it looks; this owns that it is there. */
.fp-price { color: var(--color-text-secondary); font-size: var(--lp-t-small); }


/* data panel: removed in v2 (its facts are in the footer, L214-224) */

/* The landing page, composed to design/V0_CONTRACT.md (the composition authority; LANDING_CONTRACT.md keeps skin
   and law, per its precedence table). One column, one chapter system: every chapter is a 1px rule across the content
   width, a mono label in the accent under it, and its statement 12px below the label. The page's only bordered
   container is exhibit one's plate; its quote blocks are top rules, not boxes, which is how they sit inside it
   without breaking the nesting budget. Substitutions on the way in: Space Grotesk and JetBrains Mono (no serif, no
   italics), our purple where the reference is orange (and no plate tints), our rounded corners, our tick rail in the
   verdict grid's slot, our severity chips, both themes. */
/* The scales. Spacing is the reference's own short ladder (V0_CONTRACT §3): 4 8 12 16 20 24 32 40 48, then the
   chapter pads. --lp-chapter-pad is a chapter's padding above and below its rule, so the separation between two
   chapters is pad + rule + pad. Type keeps our seven roles (LANDING_CONTRACT §0.2, still ours: the reference's
   dozen sizes are skin, and skin is not the composition's to set): mono label, small, body, lead, h3, h2, h1 and
   the display used by the hero and the capture. */
html.lp { --lp-s1: 4px; --lp-s2: 8px; --lp-s3: 12px; --lp-s4: 16px; --lp-s5: 20px; --lp-s6: 24px;
          --lp-s7: 32px; --lp-s8: 40px; --lp-s9: 48px; --lp-s10: 64px; --lp-s11: 72px; --lp-s12: 96px;
          --lp-chapter-pad: var(--lp-s10); --lp-hero-pad: var(--lp-s10); --lp-header-gutter: 20px; --lp-header-h: 57px; --lp-measure: 56ch;
          --lp-t-small: 14px; --lp-t-body: 16px; --lp-t-lead: 18px; --lp-t-h3: 22px; --lp-t-h2: 28px;
          --lp-t-h1: 34px; --lp-t-display: 44px;
          /* Corners and insets say what a thing is (anti-default pass, 2026-09-18). Three radii, never one:
             the evidence plate is the page's one soft object (14); controls a hand can use are 8; ledger
             panels and chips - records, not objects - are nearly square (4). The toggle alone is a pill: it is a
             switch. Two insets: the plate breathes (--lp-pad-plate), ledgers are tight (--lp-pad-ledger). */
          --lp-r-plate: 14px; --lp-r-control: 8px; --lp-r-ledger: 4px;
          --lp-pad-plate: var(--lp-s6); --lp-pad-ledger: var(--lp-s4);
          /* One curve for everything that moves: a fast start that settles, never a bounce. Hover and focus take
             --lp-dur; the rail's entrance is the page's one longer motion. */
          --lp-ease: cubic-bezier(.22, .8, .24, 1); --lp-dur: 180ms; --lp-dur-in: 460ms; }
html.lp, html.lp body { background: var(--color-lp-page); color: var(--color-lp-ink); }
html.lp body { font: 400 var(--lp-t-body)/1.5 var(--font-sans); }
html.lp :where(a, button, summary, input:not([type=hidden]), [tabindex]) {
  outline: 2px solid transparent; outline-offset: 0;
  transition: color var(--lp-dur) var(--lp-ease), background-color var(--lp-dur) var(--lp-ease),
              border-color var(--lp-dur) var(--lp-ease), text-decoration-color var(--lp-dur) var(--lp-ease),
              text-underline-offset var(--lp-dur) var(--lp-ease), box-shadow var(--lp-dur) var(--lp-ease),
              outline-color var(--lp-dur) var(--lp-ease), outline-offset var(--lp-dur) var(--lp-ease); }
/* a theme flip is instant everywhere: the script sets html.lp-flip for the one frame the colours change in, so no
   link fades behind the page it sits on */
html.lp-flip *, html.lp-flip *::before, html.lp-flip *::after { transition: none !important; }
/* focus is drawn, not defaulted: the ring arrives and steps out 3px */
html.lp :where(a, button, summary, input, [tabindex]):focus-visible { outline-color: var(--color-lp-brand-tint); outline-offset: 3px; }
html.lp ::selection { background: var(--color-lp-brand); color: var(--color-lp-on-brand); }
html.lp a { color: var(--color-lp-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
html.lp a:hover { color: var(--color-lp-secondary); text-underline-offset: 5px; }
.lp-page { max-width: 1440px; min-height: 100vh; margin: 0 auto; background: var(--color-lp-page); }
.lp-page :where(p, h1, h2, h3, ol, ul, li, form, blockquote, figure) { margin: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.hp input { border: 1px solid var(--color-lp-hairline); background: var(--color-lp-control); color: var(--color-lp-ink); }

/* the masthead: the wordmark, three links, the toggle - on the page's own gutter, its own bottom rule */
.lp-strip { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: nowrap; align-items: center; gap: 0 var(--lp-s3);
            min-height: 56px; padding: 0 var(--lp-header-gutter); background: var(--color-lp-page);
            border-bottom: 1px solid var(--color-lp-hairline); }
.lp-lockup { font: var(--lp-label-chip); letter-spacing: var(--lp-label-chip-track); }
html.lp .lp-lockup { display: inline-flex; align-items: center; gap: 8px; min-height: 56px; color: var(--color-lp-ink); text-decoration: none; }
.lp-brand-mark { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--color-lp-brand); }
.lp-nav { display: flex; align-items: center; gap: 0 var(--lp-s4); margin-left: auto; }
.lp-navlink, .lp-toggle { font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); }
html.lp .lp-navlink { display: inline-flex; align-items: center; min-height: 56px; color: var(--color-lp-muted); text-decoration: none; }
html.lp .lp-navlink:hover { color: var(--color-lp-ink); box-shadow: inset 0 -2px 0 var(--color-lp-ink); }
.lp-toggle { display: inline-flex; align-items: center; min-height: 56px; margin: 0 0 0 var(--lp-s4); padding: 0; border: 0;
             background: none; color: var(--color-lp-muted); cursor: pointer; }
.lp-toggle[hidden] { display: none; }
.lp-toggle .to-light, .lp-toggle .to-dark { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px;
             border: 1px solid var(--color-lp-hairline); border-radius: 999px; }
.lp-toggle:hover { color: var(--color-lp-ink); }
.lp-toggle .to-light, .lp-toggle .to-dark { transition: border-color var(--lp-dur) var(--lp-ease), background-color var(--lp-dur) var(--lp-ease); }
.lp-toggle:hover .to-light, .lp-toggle:hover .to-dark { border-color: var(--color-lp-ink); background: var(--color-lp-control); }
html.theme-light .lp-toggle .to-light, html:not(.theme-light) .lp-toggle .to-dark { display: none; }

/* every chapter: its own top rule, its label, its statement 12px under the label */
.lp-hero, .lp-exhibit, .lp-method, .lp-plates, .lp-trust, .lp-closer { padding: var(--lp-chapter-pad) var(--lp-header-gutter); }
.lp-hero { padding-top: var(--lp-hero-pad); padding-bottom: var(--lp-hero-pad); }
.lp-exhibit, .lp-method, .lp-plates, .lp-trust, .lp-closer { border-top: 1px solid var(--color-lp-hairline); }
.lp-label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lp-s2);
            font: var(--lp-label-section); letter-spacing: var(--lp-label-section-track); color: var(--color-lp-brand-tint); }
.lp-label.is-cell, .lp-label.is-plate { font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); color: var(--color-lp-muted); }
/* purple never sits inside a severity element (LANDING_CONTRACT §0): an exhibit's chapter label is muted, and the
   quote rules are ink and muted rather than the reference's accent */
.lp-exhibit .lp-label { color: var(--color-lp-muted); }
.lp-title, .lp-method-h, .lp-trust-h, .lp-closer-h, .lp-premise-p, .lp-say { margin-top: var(--lp-s3); }
.lp-dot { flex: none; width: 8px; height: 8px; border: 1px solid var(--color-lp-muted); border-radius: 99px; }
.lp-when { display: inline-flex; align-items: center; gap: var(--lp-s2); white-space: nowrap; }
.lp-dot.live { background: var(--color-lp-quiet-solid); border-color: var(--color-lp-quiet-solid); }
.lp-aside { font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); line-height: 1.4; color: var(--color-lp-muted); }

/* the hero: the live label, the headline, one supporting line, and the way down to the capture. No form, no figure */
.lp-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lp-s2);
             font: var(--lp-label-section); letter-spacing: var(--lp-label-section-track); color: var(--color-lp-brand-tint); }
.lp-hero-say { margin-top: var(--lp-s7); }
/* The countdown (2026-09-18): quiet but legible at a glance - the status label's mono, one contrast step below the
   muted grey (--color-lp-faint, its only use on the page, still AA on the page surface), no container. Tabular
   figures, so a live minute changing never shifts the line. */
.lp-count { font: var(--lp-label-section); letter-spacing: var(--lp-label-section-track); color: var(--color-lp-faint);
            font-variant-numeric: tabular-nums; }
.lp-hero > .lp-count { margin-top: var(--lp-s2); }
.lp-closer-p .lp-count { white-space: nowrap; }
.lp-h1 { max-width: 760px; font: 700 var(--lp-t-display)/.9 var(--font-sans); letter-spacing: -.055em; color: var(--color-lp-ink); text-wrap: balance; }
.lp-h1 .lp-h1-a { color: var(--color-lp-brand-tint); }
.lp-h1 .lp-h1-b { color: var(--color-lp-secondary); }
.lp-dek { max-width: 530px; margin-top: var(--lp-s8); font: 400 var(--lp-t-lead)/1.35 var(--font-sans); color: var(--color-lp-secondary); text-wrap: pretty; }
html.lp .lp-golink { display: inline-flex; align-items: center; gap: var(--lp-s2); min-height: 44px; margin-top: var(--lp-s6);
             border-bottom: 1px solid var(--color-lp-ink); font: var(--lp-label-section); letter-spacing: var(--lp-label-section-track);
             color: var(--color-lp-ink); text-decoration: none; }
html.lp .lp-golink:hover { border-bottom-color: var(--color-lp-brand); color: var(--color-lp-brand); }
/* the arrow points where the link goes, and leans that way on hover */
.lp-golink-a { display: inline-block; transition: transform var(--lp-dur) var(--lp-ease); }
html.lp .lp-golink:hover .lp-golink-a { transform: translateY(3px); }

/* the framed question, twice: a single rule and a question set large, never a filled card */
.lp-premise { margin-top: var(--lp-s9); padding-left: var(--lp-s5); border-left: 1px solid var(--color-lp-hairline); }
.lp-premise-p, .lp-ask { max-width: 390px; font: 400 var(--lp-t-h2)/1.02 var(--font-sans); letter-spacing: -.04em; color: var(--color-lp-ink); text-wrap: pretty; }
.lp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lp-s6); margin-top: var(--lp-s8);
            padding-top: var(--lp-s4); border-top: 1px solid var(--color-lp-hairline); }
.lp-stat-n { font: 400 var(--lp-t-h2)/1.2 var(--font-sans); letter-spacing: -.07em; color: var(--color-lp-ink); }
.lp-stat-c { margin-top: var(--lp-s1); font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); color: var(--color-lp-muted); }

/* exhibit one: the chapter head, then the plate */
.lp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--lp-s5); }
.lp-head-copy { min-width: 0; }
.lp-head > .lp-aside { display: none; max-width: 250px; }
/* the reference's title measure is 377px because its title is four words; ours are generated from the record and
   run longer, so the measure opens to 620px (the aside still has its 250px beside it) */
.lp-title { max-width: 620px; font: 700 var(--lp-t-h1)/.9 var(--font-sans); letter-spacing: -.05em; color: var(--color-lp-ink); text-wrap: balance; }
.lp-plate { margin-top: var(--lp-s8); border: 1px solid var(--color-lp-hairline); border-radius: var(--lp-r-plate); background: var(--color-lp-card); }
.lp-plate-ask { padding: var(--lp-pad-plate); border-bottom: 1px solid var(--color-lp-hairline); }
.lp-plate-say { padding: var(--lp-pad-plate); }
.lp-ask { margin-top: var(--lp-s7); }
.lp-ask-foot { margin-top: var(--lp-s9); }
.lp-bullet { flex: none; width: 6px; height: 6px; border-radius: 99px; background: var(--color-lp-muted); }
.lp-bubbles { display: grid; gap: var(--lp-s5); }
/* the two answers: a 2px top rule and nothing else - a rule, never a box */
.lp-bubble { padding-top: var(--lp-s3); border-top: 2px solid var(--color-lp-ink); }
.lp-bubble.before { border-top-color: var(--color-lp-muted); }
.lp-bubble-label { font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); color: var(--color-lp-ink); }
.lp-bubble.before .lp-bubble-label { color: var(--color-lp-muted); }
.lp-narr-line { margin-top: var(--lp-s5); font: 500 var(--lp-t-small)/1.45 var(--font-sans); color: var(--color-lp-secondary); }
.lp-quote { margin-top: var(--lp-s5); font: 400 var(--lp-t-lead)/1.15 var(--font-sans); letter-spacing: -.03em; color: var(--color-lp-quote); overflow-wrap: anywhere; }
.lp-quote.raw { font: 400 var(--lp-t-small)/1.5 var(--font-mono); letter-spacing: 0; }
.lp-quote.raw .qq::before, .lp-quote.raw .qq::after { content: none; }
.lp-elide { color: inherit; }
.lp-mark { padding: 0; border-radius: 0; background: none; color: inherit; font-weight: 600;
           text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* the verdict block: our tick rail in the reference's grid slot, at the right cell's full width */
.lp-rail-wrap { margin-top: var(--lp-s8); padding-top: var(--lp-s4); border-top: 1px solid var(--color-lp-hairline); }
.lp-days-label { font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); color: var(--color-lp-muted); }
/* The rail is set by hand (anti-default pass, 2026-09-18), the page's one authored detail. The trace line runs 22px
   down a 32px drawing band. A day is a 2px pen stroke, 14px over the line and 4px under it; the two compared days
   stand 20 over and 6 under, 4px wide. A wrong answer pierces the line twice as deep as a right one, so the failures
   read before their colour does. A day with no response is an outlined pill standing on an unbroken line: an empty
   slot, drawn on purpose (2026-09-18: a broken line read as a rendering fault, not a gap in the record). */
.lp-rail { --rule-y: 22px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: var(--lp-s4) 0 0; padding: 0; list-style: none; }
.lp-tick-day { --rise: 14px; --drop: 4px; --tw: 2px; position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--lp-s2); min-width: 0; }
.lp-tick-day.is-side { --rise: 20px; --drop: 6px; --tw: 4px; }
.lp-tick-day.is-sev { --drop: 8px; }
.lp-tick-day.is-side.is-sev { --drop: 12px; }
.lp-tick-day.is-unscored { --tw: 5px; }
.lp-tick-day.is-gap { --tw: 6px; }
.lp-tick-day::before, .lp-tick-day::after { content: ""; position: absolute; top: var(--rule-y); width: 50%; height: 1px; background: var(--color-lp-muted); }
.lp-tick-day::before { left: 0; }
.lp-tick-day::after { right: 0; }
.lp-tick { display: block; box-sizing: border-box; flex: none; border-radius: 1px; background: var(--color-lp-ink); }
.lp-rail .lp-tick { position: relative; z-index: 1; width: var(--tw); height: calc(var(--rise) + var(--drop));
                    margin: calc(var(--rule-y) - var(--rise)) 0 calc(10px - var(--drop)); }
/* the pill: an outline, fully round, filled with the plate so the line does not run through it */
:is(.is-gap > .lp-tick, .lp-tick.is-gap) { border: 1px solid var(--color-lp-muted); border-radius: 999px; background: var(--color-lp-card); }
.sev-major :is(.is-sev > .lp-tick, .lp-tick.is-sev) { background: var(--color-lp-major-solid); }
.sev-significant :is(.is-sev > .lp-tick, .lp-tick.is-sev) { background: var(--color-lp-significant-solid); }
:is(.is-unscored > .lp-tick, .lp-tick.is-unscored) { border: 1px solid var(--color-lp-muted); background: var(--color-lp-card); }
/* The rail's entrance, the page's one considered motion: on first view the days are drawn in order, left to right,
   each stroke rising out of the line. Once - the observer lets go after it. The site script arms it (html.lp-motion)
   only where IntersectionObserver exists and the reader has not asked for reduced motion; without the script every
   tick simply shows. The stagger is the script's: 70ms a day, the whole rail inside 700ms however long it is. */
@keyframes lp-tick-in { from { opacity: 0; clip-path: inset(100% 0 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
html.lp-motion .lp-rail:not(.is-in) .lp-tick { opacity: 0; }
html.lp-motion .lp-rail.is-in .lp-tick { animation: lp-tick-in var(--lp-dur-in) var(--lp-ease) var(--lp-d, 0ms) both; }
.lp-tick-d { font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); color: var(--color-lp-muted); white-space: nowrap; }
.lp-tick-day.is-side > .lp-tick-d { color: var(--color-lp-ink); }
.lp-rail.is-xdense .is-minor > .lp-tick-d { visibility: hidden; }
.lp-rail.is-xdense .lp-tick-day { --tw: 2px; }
.lp-rail.is-xdense .lp-tick-day.is-side { --tw: 3px; }
.lp-rail.is-xdense .lp-tick-day.is-gap, .lp-rail.is-dense .lp-tick-day.is-gap { --tw: 4px; }
.lp-rail.is-xdense > :first-child > .lp-tick-d { align-self: flex-start; }
.lp-rail.is-xdense > :last-child > .lp-tick-d { align-self: flex-end; }
/* the page's one key line: what each mark on the rail means, then what "correct" means for this question */
.lp-days-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lp-s1) var(--lp-s4); margin-top: var(--lp-s4);
               font: 400 var(--lp-t-small)/1.45 var(--font-sans); color: var(--color-lp-secondary); }
.lp-key { display: inline-flex; align-items: center; gap: var(--lp-s2); }
.lp-key > .lp-tick { width: 2px; height: 14px; margin: 0; }
.lp-key > .lp-tick.is-unscored { width: 5px; }
.lp-key > .lp-tick.is-gap { width: 6px; }

/* below the plate, on the page surface: the narration and the control that opens the record */
.lp-note { max-width: var(--lp-measure); margin-top: var(--lp-s6); font: 400 var(--lp-t-body)/1.5 var(--font-sans); color: var(--color-lp-secondary); }
.lp-more { margin-top: var(--lp-s5); }
.lp-more > summary { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 0 var(--lp-s4);
                     list-style: none; border: 1px solid var(--color-lp-hairline); border-radius: var(--lp-r-control); background: var(--color-lp-control);
                     font: 700 var(--lp-t-body)/1.2 var(--font-sans); color: var(--color-lp-ink); cursor: pointer; }
.lp-more > summary::-webkit-details-marker { display: none; }
.lp-more > summary:hover { border-color: var(--color-lp-ink); background: var(--color-lp-card); }
.lp-more .hide, .lp-more[open] .show { display: none; }
.lp-more[open] .hide { display: inline; }
.lp-panel { margin-top: var(--lp-s4); padding-top: var(--lp-s4); border-top: 1px solid var(--color-lp-hairline);
            font: 400 var(--lp-t-body)/1.6 var(--font-sans); color: var(--color-lp-secondary); }
.lp-panel > * + * { margin-top: var(--lp-s3); }
.lp-panel-label { font: var(--lp-label-section); letter-spacing: var(--lp-label-section-track); color: var(--color-lp-muted); }
.lp-panel strong { font-weight: 700; color: var(--color-lp-quote); }
.lp-verbatim { padding: 12px 14px; border: 1px solid var(--color-lp-hairline); border-radius: var(--lp-r-ledger); background: var(--color-lp-control);
               color: var(--color-lp-quote); overflow-wrap: anywhere; }
.lp-prompt { font: 400 var(--lp-t-body)/1.55 var(--font-sans); white-space: pre-wrap; }
/* the opened full record renders the response's own Markdown: headings, lists, code, rules and tables, all on the
   landing's tokens (restored with the v0 composition - the record's verbatim is honesty machinery) */
.lp-md > * + * { margin-top: 10px; }
.lp-md p, .lp-md ul, .lp-md li, .lp-md blockquote { margin: 0; }
.lp-md .mh { display: block; gap: 0; padding: 0; font: 700 var(--lp-t-body)/1.35 var(--font-sans); color: var(--color-lp-ink); }
.lp-md .mh1 { font-size: var(--lp-t-lead); }
.lp-md ul.md { display: flex; flex-direction: column; gap: 4px; padding: 0; list-style: none; }
.lp-md ul.md li { display: flex; gap: 8px; }
.lp-md ul.md li.d1 { padding-left: 16px; }
.lp-md ul.md li.d2 { padding-left: 32px; }
.lp-md .lm { flex: none; color: var(--color-lp-muted); }
.lp-md strong, .lp-md b { font-weight: 700; color: var(--color-lp-ink); }
.lp-md em, .lp-md i { font-style: italic; }
.lp-md code { font: 400 var(--lp-t-small)/1.5 var(--font-mono); }
.lp-md pre { overflow-x: auto; margin: 0; padding: 10px 12px; border-radius: var(--lp-r-ledger); background: var(--color-lp-bubble); font: 400 var(--lp-t-small)/1.5 var(--font-mono); white-space: pre; }
.lp-md blockquote { padding-left: 12px; border-left: 2px solid var(--color-lp-control-border); }
.lp-md hr { border: 0; border-top: 1px solid var(--color-lp-hairline); }
.lp-md table { display: block; overflow-x: auto; border-collapse: collapse; font-size: var(--lp-t-small); }
.lp-md th, .lp-md td { padding: 4px 8px; border: 1px solid var(--color-lp-card-border); text-align: left; vertical-align: top; }
.lp-hash { font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); color: var(--color-lp-muted); overflow-wrap: anywhere; }

/* the method: the chapter head, then three numbered steps, each over its own rule */
.lp-method-h, .lp-trust-h { max-width: 420px; font: 700 var(--lp-t-h1)/.92 var(--font-sans); letter-spacing: -.05em; color: var(--color-lp-ink); text-wrap: balance; }
.lp-steps { display: grid; gap: var(--lp-s7); margin-top: var(--lp-s8); padding: 0; list-style: none; }
.lp-step { padding-top: var(--lp-s4); border-top: 1px solid var(--color-lp-hairline); }
.lp-step-n { display: block; font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); color: var(--color-lp-brand-tint); }
.lp-step-p { display: block; margin-top: var(--lp-s5); font: 400 var(--lp-t-body)/1.15 var(--font-sans); color: var(--color-lp-ink); }

/* exhibit two and this week's drift: two plates, side by side on a desktop */
.lp-plate-row { display: grid; gap: var(--lp-s5); }
.lp-plate.is-tint { margin-top: 0; padding: var(--lp-pad-ledger); border-radius: var(--lp-r-ledger); }
/* exhibit two is not a smaller exhibit one: it is a note pressed into the page - the well surface, no border, square
   corners, a tight inset - where exhibit one is an object laid on it */
.lp-plate.is-tint.lp-exhibit { align-self: start; border-color: transparent; background: var(--color-lp-control); }
.lp-say { max-width: 390px; font: 400 var(--lp-t-h2)/.98 var(--font-sans); letter-spacing: -.05em; color: var(--color-lp-ink); text-wrap: pretty; }
.lp-turn { margin-top: var(--lp-s8); font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); color: var(--color-lp-ink); }
.lp-turn-d { color: var(--color-lp-muted); }
.lp-turn-a { padding: 0 var(--lp-s2); color: var(--color-lp-muted); }
.lp-chip { display: inline-flex; align-items: center; padding: 3px 7px; border: 1px solid var(--color-lp-hairline); border-radius: var(--lp-r-ledger);
           font: var(--lp-label-chip); letter-spacing: var(--lp-label-chip-track); white-space: nowrap; }
.lp-chip.sev-major { border-color: var(--color-lp-major-text); color: var(--color-lp-major-text); }
.lp-chip.sev-significant { border-color: var(--color-lp-significant-text); color: var(--color-lp-significant-text); }
.lp-chip.sev-quiet { border-color: var(--color-lp-quiet-solid); color: var(--color-lp-quiet-text); }
.lp-drift-rows { margin-top: var(--lp-s7); padding: 0; list-style: none; }
/* one row per model: the name and its severity chip on the first line, the count under them (V0_CONTRACT §7.1 puts
   a figure on the right; ours is the record's own sentence, so it takes the row beneath rather than crowding it) */
.lp-drift-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--lp-s1) var(--lp-s4);
                padding-bottom: var(--lp-s3); border-bottom: 1px solid var(--color-lp-hairline); }
.lp-drift-count { grid-column: 1 / -1; }
.lp-drift-row + .lp-drift-row { margin-top: var(--lp-s5); }
.lp-drift-name { flex: 1; min-width: 0; font: 400 var(--lp-t-h3)/1.2 var(--font-sans); letter-spacing: -.02em; color: var(--color-lp-ink); }
.lp-drift-count { font: 400 var(--lp-t-body)/1.45 var(--font-sans); color: var(--color-lp-secondary); }
.lp-caveat { margin-top: var(--lp-s5); font: 400 var(--lp-t-small)/1.45 var(--font-sans); color: var(--color-lp-secondary); }
html.lp .lp-caveat a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-lp-secondary); }
html.lp .lp-caveat a:hover { color: var(--color-lp-ink); }

/* our own failures: the page's quietest chapter, a 2px accent rule on the left */
.lp-trust-in { padding-left: var(--lp-s5); border-left: 2px solid var(--color-lp-hairline); }
.lp-trust-h { max-width: 620px; font-size: var(--lp-t-h3); line-height: 1.1; letter-spacing: -.03em; font-weight: 400; }
.lp-trust .lp-more > summary { min-height: 44px; }
.lp-trust-in > .lp-aside { margin-top: var(--lp-s5); }

/* the capture: the page's one centred block, ruled above and below */
.lp-closer { border-bottom: 1px solid var(--color-lp-hairline); text-align: center; scroll-margin-top: var(--lp-header-h); }
.lp-closer > * { margin-left: auto; margin-right: auto; }
.lp-closer .lp-label { justify-content: center; }
.lp-closer-h { max-width: 650px; font: 700 var(--lp-t-display)/.9 var(--font-sans); letter-spacing: -.055em; color: var(--color-lp-ink); text-wrap: balance; }
.lp-closer-p { max-width: 430px; margin-top: var(--lp-s6); font: 400 var(--lp-t-body)/1.5 var(--font-sans); color: var(--color-lp-secondary); }
.lp-form { position: relative; display: flex; flex-direction: column; gap: var(--lp-s2); max-width: 450px; margin-top: var(--lp-s8); text-align: left; }
.lp-input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--color-lp-hairline); border-radius: var(--lp-r-control);
            background: var(--color-lp-control); color: var(--color-lp-ink); font: 400 var(--lp-t-body)/1.25 var(--font-sans); outline: none; }
.lp-input::placeholder { color: var(--color-lp-muted); opacity: 1; }
.lp-input:hover { border-color: var(--color-lp-muted); }
.lp-input:focus { border-color: var(--color-lp-brand); }
.lp-cta { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 48px;
          padding: 0 var(--lp-s5); border: 0; border-radius: var(--lp-r-control); background: var(--color-lp-brand); color: var(--color-lp-on-brand);
          font: var(--lp-label-chip); letter-spacing: var(--lp-label-chip-track); white-space: nowrap; cursor: pointer; }
.lp-cta:hover { background: var(--color-lp-brand-hover); }
.lp-cta:active { box-shadow: inset 0 2px 0 var(--color-lp-brand-hover); }
.lp-form .signup-msg { display: none; font: 600 var(--lp-t-small)/1.45 var(--font-sans); color: var(--color-lp-secondary); }
.lp-form .signup-msg.lp-ok { color: var(--color-lp-quiet-text); }
.lp-form .signup-msg:target, .lp-form .signup-msg.shown { display: block; }

@media (max-width: 899px) {
  /* The reference's phone masthead carries the wordmark alone. Ours keeps the one link the reference has no need
     for - the method - because the way to it is honesty machinery, not decoration; the two in-page anchors (the
     exhibit, the archive) are the desktop affordance and go. The toggle stays. */
  html.lp .lp-navlink[href^="#"] { display: none; }
  /* a rail on a phone: the month shows only where it changes, and a long trail thins its ticks and labels its ends */
  .lp-rail:not(.is-dense) .lp-tick-d:not(.has-month) > .lp-tick-m { display: none; }
  .lp-rail.is-dense .is-minor > .lp-tick-d { visibility: hidden; }
  .lp-rail.is-dense .lp-tick-day { --tw: 2px; }
  .lp-rail.is-dense .lp-tick-day.is-side { --tw: 3px; }
  .lp-rail.is-dense > :first-child > .lp-tick-d { align-self: flex-start; }
  .lp-rail.is-dense > :last-child > .lp-tick-d { align-self: flex-end; }
}

/* Reduced motion: the rail is simply there, and the arrow stays put. Colour changes on hover and focus stay - they
   are not motion. Print: every tick shows. */
@media (prefers-reduced-motion: reduce) {
  html.lp .lp-rail .lp-tick { opacity: 1 !important; animation: none !important; }
  html.lp .lp-golink-a { transition: none !important; transform: none !important; }
}
@media print { html.lp .lp-rail .lp-tick { opacity: 1 !important; animation: none !important; } }

/* the footer: four lines of mono, nothing else */
.lp-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--lp-s5); padding: var(--lp-s7) var(--lp-header-gutter); }
.lp-foot-line, html.lp .lp-credit a, .lp-foot-mark { font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); line-height: 1.4; color: var(--color-lp-muted); }
html.lp .lp-credit a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
html.lp .lp-credit a:hover { color: var(--color-lp-ink); }
.lp-credit { text-align: left; }
.lp-foot-mark { display: block; color: var(--color-lp-ink); }

/* ---- the record site's own components, unchanged by the landing's composition (DESIGN_CONTRACT.md) ---- */
/* footer (L214-224): provenance that exists, links, the theme toggle */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: var(--space-footer-top); padding: 18px 0 0;
        border-top: 1px solid var(--color-border); }
.foot-prov { max-width: 52ch; font: 11.5px/1.7 var(--font-mono); color: var(--color-text-secondary); word-break: break-all; }
.foot-links { display: flex; align-items: center; gap: 14px; font: 600 13.5px/18px var(--font-sans); }
.foot-links a { display: block; padding: 13px 0; margin: -13px 0; }
/* other pages: kicker, titles, ledes */
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 24px 0 10px; font-size: 13.5px; line-height: 1.4;
          color: var(--color-text-secondary); }
.kicker .m { font-size: 12.5px; }
.kicker .sep { color: var(--color-text-faint); }
.daynav a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.daynav + .kicker { margin-top: 12px; }
h1 { font: 700 clamp(28px, 5.4vw, 40px)/1.1 var(--font-sans); letter-spacing: -.025em; margin: 0 0 12px; max-width: 30ch; text-wrap: pretty; }
main > h1:first-child { margin-top: 24px; }
.dayh, .pid { font-family: var(--font-mono); font-weight: 400; letter-spacing: -.02em; }
.dek, .lede, .ev-lede { font-size: clamp(16px, 3.4vw, 19px); line-height: 1.55; color: var(--color-text-secondary); max-width: 68ch; margin: 0 0 16px; }
.dek .lbl { margin-right: .5em; }
h2.sec { margin: 34px 0 0; font-size: 19px; line-height: 1.2; letter-spacing: -.015em; }
.lbl { font-size: 12.5px; font-weight: 600; color: var(--color-text-secondary); }
.runline { margin: 18px 2px 0; font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); max-width: 68ch; }
.runline .m { font-size: 12px; }
.table-note { margin: 0; padding: 12px 18px; font-size: 13px; line-height: 1.45; color: var(--color-text-secondary); border-top: 1px solid var(--color-rule-soft); }
/* day pages: headline blocks */
.leads { margin-top: 2px; }
a.lead { display: block; margin-top: 12px; padding: 16px 18px 18px; color: inherit; }
a.lead:hover { color: inherit; border-color: var(--color-outline); }
a.lead:hover .lh { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.lk { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 12.5px/1.4 var(--font-mono); color: var(--color-text-secondary); }
.lk .dim { font-family: var(--font-sans); }
.lh { display: block; margin: 10px 0 8px; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: var(--color-text); }
.lead.significant .lh { font-size: 18px; }
.ba { display: block; max-width: 68ch; font-size: 15px; line-height: 1.5; color: var(--color-text-secondary); }
.more { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.4; font-weight: 600; color: var(--color-link); }
/* event pages: the exchange */
.exchange .asked { padding: 16px 18px; }
.asked-l { margin: 0 0 6px; font-size: 12.5px; line-height: 1.4; color: var(--color-text-secondary); }
.prompt { margin: 0; font: 13px/1.62 var(--font-mono); color: var(--color-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.prompt.big { font-size: 14.5px; }
.prompt-card { padding: 16px 18px; }
.prompt-card .note { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--color-text-secondary); }
.prompt-card .note .lbl { margin-right: .4em; }
.quotes.full { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); margin-top: var(--space-section); padding: 0; }
/* a response inside a card or a fold: the card is the receipt, so the text inside it is not boxed a second time */
.card .text, .fold .text { border: 0; border-radius: 0; background: none; }
.quotes.full .quote { padding: 16px; }
.ex-ts { margin: 4px 0 0; font: 12px/1.4 var(--font-mono); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.ex-ts a { display: inline-block; padding-block: 12px; margin-block: -12px; font-family: var(--font-sans); font-weight: 600; }
.ex-verdict { margin: 8px 0 12px; font-size: 14.5px; line-height: 1.45; font-weight: 600; color: var(--color-text); }
.quote .missing { margin: 8px 0 0; }
.hlnote { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--color-text-secondary); }
.turnq { margin: 12px 0 6px; }
.turnq .lbl { display: block; }
.turnq .q { display: block; font: 13px/1.55 var(--font-mono); color: var(--color-text); overflow-wrap: anywhere; }
.missing { color: var(--color-text-muted); }
.resp { font-size: 15.5px; line-height: 1.6; color: var(--color-text-body); overflow-wrap: anywhere; }
.quote.today .resp { color: var(--color-text); }
.resp > :last-child { margin-bottom: 0; }
.resp p { margin: 0 0 .8em; }
.resp .mh { margin: 1.1em 0 .35em; font-weight: 600; color: var(--color-text); }
.resp .mh1, .resp .mh2 { font-size: 1.06em; }
.resp em { font-style: italic; }
.resp strong { font-weight: 600; }
.resp code { font-family: var(--font-mono); font-size: .88em; padding: 1px 4px; border-radius: var(--radius-marker); background: var(--color-chip-neutral); }
.resp pre.code { margin: 0 0 .9em; padding: 10px 12px; font: 13px/1.55 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere;
                 background: var(--color-surface-sunken); border: 1px solid var(--color-rule-soft); border-radius: var(--radius-button); }
.resp blockquote { margin: .5em 0 .9em; padding: 2px 0 2px 12px; border-left: 2px solid var(--color-border); }
.resp ul.md { list-style: none; margin: 0 0 .8em; padding: 0; }
.resp ul.md li { position: relative; margin: 0 0 .3em; padding-left: 1.6em; }
.resp ul.md li.d1 { margin-left: 1.4em; }
.resp ul.md li.d2 { margin-left: 2.8em; }
.resp ul.md li.d3 { margin-left: 4.2em; }
.resp .lm { position: absolute; left: 0; min-width: 1.4em; color: var(--color-text-muted); }
.resp .mdt { overflow-x: auto; margin: .3em 0 .9em; }
.resp table { border-collapse: collapse; min-width: 32rem; font-size: 14px; line-height: 1.4; overflow-wrap: normal; }
.resp th, .resp td { text-align: left; vertical-align: top; padding: 6px 12px 6px 0; border-top: 1px solid var(--color-rule-soft); }
.resp th { font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); border-top: 0; }
.resp hr { margin: 1em 0; border: 0; border-top: 1px solid var(--color-rule-soft); }
mark { background: var(--color-mark-bg); color: inherit; border-radius: 3px; padding: .05em .15em;
       -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.permaline { margin: 14px 2px 0; font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.permaline .m { color: var(--color-text-secondary); font-size: 12px; }
.receipts .fold-body { padding: 14px 18px 18px; }
.receipts .arm-label { margin: 0 -18px 12px; border-top: 1px solid var(--color-rule); }
.receipts .arm-label:first-child { margin-top: -14px; border-top: 0; }
.cmp { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 24px; }
.cmp + .arm-label { margin-top: 18px; }
.side { min-width: 0; }
.sidehead { margin: 0; font-size: 14.5px; line-height: 1.4; }
.sidehead .sub { font-weight: 400; color: var(--color-text-muted); }
.side-date { margin: 2px 0 10px; font: 12.5px/1.4 var(--font-mono); color: var(--color-text-secondary); }
.rlink { margin-left: 8px; font-family: var(--font-sans); font-weight: 600; }
.receipts dl.meta { padding: 0; }
.reading { padding: 16px 18px; }
.reading h2 { margin: 0 0 6px; font-size: 16px; line-height: 1.3; letter-spacing: -.015em; }
.reading p { margin: 0; max-width: 68ch; font-size: 14px; line-height: 1.55; color: var(--color-text-secondary); }
/* response pages: the exact record */
.record { padding: 16px 18px 18px; }
dl.facts { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); gap: 2px 12px; margin: 0 0 12px; }
dl.facts dt { font-size: 13px; line-height: 1.7; color: var(--color-text-secondary); }
dl.facts dd { margin: 0; font: 12px/1.75 var(--font-mono); color: var(--color-text-body); overflow-wrap: anywhere; }
.picks { margin: 0 0 12px; }
.picks ol { margin: 4px 0 0; padding-left: 2.2em; font: 12.5px/1.55 var(--font-mono); color: var(--color-text-body); }
.text { padding: 10px 0; font: 13px/1.62 var(--font-mono); color: var(--color-text-body); white-space: pre-wrap; overflow-wrap: anywhere;
        tab-size: 4; counter-reset: ln; background: var(--color-surface-sunken); border: 1px solid var(--color-rule-soft); border-radius: var(--radius-button); }
.text .l { position: relative; min-height: 1.62em; padding: 0 14px 0 calc(14px + 3.1em); }
.text .l::before { counter-increment: ln; content: counter(ln); position: absolute; left: 8px; width: 3em; text-align: right;
                   font-size: 11px; color: var(--color-text-faint); }
.endmark { margin: 10px 0 0; font: 11.5px/1.5 var(--font-mono); color: var(--color-text-secondary); overflow-wrap: anywhere; }
/* facts and metadata */
dl.meta { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 8px 16px; margin: 0; padding: 14px 18px; }
dl.meta dt { font-size: 13px; line-height: 1.55; color: var(--color-text-secondary); }
dl.meta dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--color-text); overflow-wrap: anywhere; }
dl.meta dd.data { font: 12.5px/1.6 var(--font-mono); }
.runrec dl.meta { padding-top: 0; }
/* data tables */
.scroll { overflow-x: auto; }
table.vt { width: 100%; border-collapse: collapse; font: 12.5px/1.45 var(--font-mono); color: var(--color-text-body); }
.vt thead th { text-align: left; vertical-align: bottom; white-space: nowrap; padding: 12px 12px 10px; font: 600 12.5px/1.3 var(--font-sans);
               color: var(--color-text-secondary); background: var(--color-surface-sunken); border-bottom: 1px solid var(--color-rule); }
.vt td, .vt tbody th { padding: 10px 12px; text-align: left; vertical-align: top; font-weight: 400; border-top: 1px solid var(--color-rule-soft); }
.vt tr > :first-child { padding-left: 18px; }
.vt tr > :last-child { padding-right: 18px; }
.vt tbody tr:first-child > * { border-top: 0; }
.vt tbody th { white-space: nowrap; color: var(--color-text); }
.vt tbody th .dim { display: block; font-size: 11.5px; font-family: var(--font-sans); }
.vt tr.pfirst > * { border-top: 1px solid var(--color-rule); }
.vt td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vt td.nw { white-space: nowrap; }
.vt td.em { font-weight: 700; color: var(--color-text); }
.vt td.det { max-width: 16rem; overflow-wrap: anywhere; }
.vt td.tg { white-space: nowrap; width: 1%; }
.vt td.prose, .vt .prose { font: 14px/1.45 var(--font-sans); }
.hist td { min-width: 12rem; }
.hist .det { color: var(--color-text-muted); }
.now td { min-width: 9rem; }
/* prompts index: fixed proportions so every verbatim prompt wraps in full, never clipped */
table.vt.prompts { table-layout: fixed; }
.prompts col.c-q { width: 24%; }
.prompts col.c-cat { width: 12%; }
.prompts col.c-ask { width: 36%; }
.prompts col.c-why { width: 28%; }
.prompts td.ptext { white-space: pre-wrap; overflow-wrap: anywhere; }
.prompts td.why { color: var(--color-text-secondary); overflow-wrap: anywhere; }
.prompts tbody th.qrow { white-space: normal; font: 400 14.5px/1.45 var(--font-sans); color: var(--color-text); }
.prompts .qn { display: block; font-weight: 700; color: var(--color-text); }
.prompts .qn:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: .16em; }
.prompts .ql { display: block; color: var(--color-text); }
/* documentation pages */
.doc { margin-top: var(--space-section); padding: 4px 18px 18px; background: var(--color-surface); border: 1px solid var(--color-border);
       border-radius: var(--radius-section); }
.doc h2 { margin: 14px 0 8px; font-size: 18px; line-height: 1.3; letter-spacing: -.02em; }
.doc h3 { margin: 16px 0 6px; font-size: 14.5px; line-height: 1.4; }
.doc p, .doc li { max-width: 68ch; font-size: 15.5px; line-height: 1.6; color: var(--color-text-body); }
.doc > .lede:first-child { margin-top: 14px; }
.doc .scroll { margin: 10px 0 14px; }
/* inside a doc card the table keeps its row rules, not a second box */
.doc .mono { font: 13px/1.62 var(--font-mono); overflow-wrap: anywhere; }
.doc .hash { overflow-wrap: anywhere; }
.doc dl.meta { padding: 0; margin: 10px 0 14px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 12px; font: 500 13.5px/1.3 var(--font-sans);
         border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-link); }
.toc a:hover { border-color: var(--color-link); color: var(--color-link-hover); }
.twocol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; }
.limits { padding-left: 1.2rem; }
.limits li { margin-bottom: .7rem; }
@media (max-width: 62rem) {
  table.verd, .verd tbody, .verd tr { display: block; width: 100%; }
  .verd thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .verd tr { padding: 10px 18px; border-top: 1px solid var(--color-rule-soft); }
  .verd tr.pfirst { border-top: 1px solid var(--color-rule); padding-top: 14px; }
  .verd tbody tr:first-child { border-top: 0; }
  .verd tr.pfirst > * { border-top: 0; }
  .verd td, .verd tbody th, .vt.verd tr > :first-child, .vt.verd tr > :last-child { display: inline; border: 0; padding: 0; min-width: 0; max-width: none; white-space: normal; }
  .verd tbody th { display: block; margin-bottom: 4px; font-size: 13px; }
  .verd tbody th .dim { display: inline; margin-left: .5rem; }
  .verd td.n { text-align: left; }
  .verd td.nil, .verd td.tg.nil { display: none; }
  .verd td.tg { margin-right: .4rem; }
  .verd td.mdl::after { content: "\A"; white-space: pre; }
  .verd .u { display: inline; }
  .verd td.v:not(.nil) ~ td.v:not(.nil)::before { content: "\00a0· "; color: var(--color-text-faint); }
}
@media (max-width: 52rem) {
  table.vt, .vt tbody, .vt tr { display: block; width: 100%; }
  .vt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vt:not(.verd) tr { padding: 10px 18px; border-top: 1px solid var(--color-rule-soft); }
  .vt:not(.verd) tbody tr:first-child { border-top: 0; }
  .vt:not(.verd) td, .vt:not(.verd) tbody th, .vt:not(.verd) tr > :first-child, .vt:not(.verd) tr > :last-child {
    display: block; border: 0; padding: 2px 0; min-width: 0 !important; max-width: none !important; white-space: normal; }
  .vt td.n { text-align: left; }
  .vt td[data-label]::before { content: attr(data-label) "  "; font: 12.5px/1.3 var(--font-sans); color: var(--color-text-secondary); }
  .vt td.nil { display: none; }
  .vt:not(.verd) td.inl, .vt:not(.verd) th.inl { display: inline; margin-right: .6rem; }
  .u { display: inline; }
}
@media (max-width: 40rem) {
  dl.meta, dl.facts { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  dl.meta dt { margin-top: 6px; }
  dl.facts dt { margin-top: 4px; }
  .twocol { grid-template-columns: minmax(0, 1fr); }
  .quotes.full { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .hd-nav, .hd-toggle { display: none; }
  .hd { position: static; }
  .wrap { max-width: none; padding: 0; }
}

/* The spacing, type and corner ladder the shared controls (.lp-form, .lp-input, .lp-cta) read. The landing
   page redefines all of these on html.lp, so this block changes nothing there; it is what lets one form
   component serve both the front door and the record. */
:root { --lp-s1: 4px; --lp-s2: 8px; --lp-s3: 12px; --lp-s4: 16px; --lp-s5: 20px; --lp-s6: 24px;
        --lp-s7: 32px; --lp-s8: 40px; --lp-s9: 48px; --lp-s10: 64px;
        --lp-t-small: 14px; --lp-t-body: 16px;
        --lp-r-plate: 14px; --lp-r-control: 8px; --lp-r-ledger: 4px;
        --lp-ease: cubic-bezier(.22, .8, .24, 1); --lp-dur: 180ms; }

/* ---- the one record header (desktop pass, 2026-09-21): the landing's strip, drawn from the record's own tokens.
   Its ends sit on the content's own margins at every width; its hairline runs the full width of the page. */
.hd { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: nowrap; align-items: center; gap: 0 var(--lp-s5);
      min-height: 56px; padding: 0 max(var(--gutter), calc((100% - var(--max-width)) / 2));
      background: var(--color-page); border-bottom: 1px solid var(--color-rule); }
.hd .hd-lockup { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; margin-right: auto;
                 font: var(--lp-label-chip); letter-spacing: var(--lp-label-chip-track); color: var(--color-text);
                 text-decoration: none; white-space: nowrap; }
.hd-mark { flex: none; width: 22px; height: 14px; color: var(--color-primary); }
.hd-nav { display: flex; align-items: center; gap: 0 var(--lp-s5); }
.hd .hd-link { display: inline-flex; align-items: center; min-height: 56px; font: var(--lp-label-meta);
               letter-spacing: var(--lp-label-meta-track); color: var(--color-text-muted); text-decoration: none; white-space: nowrap; }
.hd .hd-link:hover, .hd .hd-link[aria-current="page"] { color: var(--color-text); box-shadow: inset 0 -2px 0 var(--color-text); }
.hd .hd-lockup:hover { color: var(--color-text); }
.hd-toggle { display: inline-flex; align-items: center; min-height: 56px; margin: 0; padding: 0; border: 0; background: none;
             font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); color: var(--color-text-muted); cursor: pointer; }
.hd-toggle[hidden] { display: none; }
.hd-toggle .to-light, .hd-toggle .to-dark { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px;
                                            border: 1px solid var(--color-rule); border-radius: 999px; }
.hd-toggle:hover { color: var(--color-text); }
.hd-toggle:hover .to-light, .hd-toggle:hover .to-dark { border-color: var(--color-text); }
html.theme-light .hd-toggle .to-light, html:not(.theme-light) .hd-toggle .to-dark { display: none; }
@media (max-width: 699px) { .hd .hd-link.is-wide { display: none; } .hd, .hd-nav { column-gap: var(--lp-s4); } }
@media (max-width: 399px) { .hd, .hd-nav { column-gap: 10px; } .hd .hd-lockup { gap: 7px; } .hd-mark { width: 18px; height: 11.5px; }
                            .hd-toggle .to-light, .hd-toggle .to-dark { padding: 0 7px; } }
@media (prefers-reduced-motion: no-preference) {
  .hd .hd-link, .hd-toggle .to-light, .hd-toggle .to-dark {
    transition: color var(--lp-dur) var(--lp-ease), box-shadow var(--lp-dur) var(--lp-ease), border-color var(--lp-dur) var(--lp-ease); }
}

/* ---- the front page. Sections are separated by space and one rule, never by a box. */
.fp-top { padding: var(--lp-s8) 0 0; }
.fp-eyebrow { margin: 0 0 var(--lp-s3); font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track);
              text-transform: uppercase; color: var(--color-text-secondary); }
.fp-h1 { margin: 0; font: 700 30px/1.06 var(--font-sans); letter-spacing: -.028em; text-wrap: balance; }
.fp-h1-a { color: var(--color-primary); }
.fp-dek { margin: var(--lp-s4) 0 0; max-width: 54ch; font-size: 17px; line-height: 1.5; color: var(--color-text-secondary); }
.fp-limit { margin: var(--lp-s3) 0 0; max-width: 62ch; font-size: 15px; line-height: 1.5; color: var(--color-text-muted); }
/* The front page's claim is the landing's headline (2026-09-23): the same display size at each width, weight, leading,
   tracking, two lines and two colours, so the page has one first thing and keeps it at the flip. The sizes are the
   landing's --lp-t-display ladder (34, 44 from 700px, 66 from 900px), written out because the record is not html.lp.
   /alerts/ keeps .fp-h1; its hero is not this one. */
.fp-claim { margin: 0; max-width: 760px; font: 700 34px/.9 var(--font-sans); letter-spacing: -.055em; color: var(--color-text);
            text-wrap: balance; }
.fp-claim .fp-h1-a { color: var(--color-claim-accent); }
.fp-claim-b { display: block; color: var(--color-claim-second); }
.fp-hero .fp-eyebrow { margin-bottom: var(--lp-s5); }
.fp-hero .fp-dek { margin-top: var(--lp-s6); }
@media (min-width: 700px) { .fp-claim { font-size: 44px; } }
@media (min-width: 900px) {
  .fp-claim { font-size: 66px; }
  .fp-hero .fp-eyebrow { margin-bottom: var(--lp-s7); }
  .fp-hero .fp-dek { margin-top: var(--lp-s8); font-size: 20px; line-height: 1.45; }
  .fp-hero .fp-limit { margin-top: var(--lp-s4); }
}
.fp-label { margin: 0 0 var(--lp-s3); font: var(--lp-label-section); letter-spacing: var(--lp-label-section-track);
            text-transform: uppercase; color: var(--color-text-secondary); }
.fp-legend { margin: var(--lp-s3) 0 0; max-width: 72ch; font-size: 13.5px; line-height: 1.5; color: var(--color-text-secondary); }
.wm, .tk, .fp-brief, .fp-join, .al-facts, .bs { margin-top: var(--lp-s9); padding-top: var(--lp-s6);
                                                border-top: 1px solid var(--color-rule); }
.sec-hd { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px var(--lp-s4); }
.sec-hd h2 { margin: 0; font: 700 22px/1.2 var(--font-sans); letter-spacing: -.015em; }
.sec-go { font: 600 14.5px/1.3 var(--font-sans); }

/* The brief's grid (the models section, and the sample on /alerts/). The dot and the word are the state; colour by the
   colour law. */
.gd-wrap { margin-top: var(--lp-s5); }
.gd { position: relative; width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; }  /* its .vh words stay inside the scroll */
.gd thead th { padding: 0 var(--lp-s3) 10px 0; border-bottom: 1px solid var(--color-text); font: var(--lp-label-section);
               letter-spacing: var(--lp-label-section-track); text-transform: uppercase; color: var(--color-text); }
.gd thead td { width: 34%; border-bottom: 1px solid var(--color-text); }
.gd tbody th { padding: 10px var(--lp-s3) 10px 0; border-top: 1px solid var(--color-rule); font: 400 15px/1.35 var(--font-sans);
               color: var(--color-text-secondary); vertical-align: middle; }
.gd td { padding: 10px var(--lp-s3) 10px 0; border-top: 1px solid var(--color-rule); vertical-align: middle; }
.gd tr:first-child > * { border-top: 0; }
.state { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1.2 var(--font-mono); letter-spacing: .08em;
         text-transform: uppercase; white-space: nowrap; color: var(--color-text-muted); }
.gd-c { display: inline-flex; align-items: center; gap: 8px; min-height: 18px; font: 600 12px/1.25 var(--font-mono);
        letter-spacing: .03em; color: var(--color-text-muted); }
:is(.state, .gd-c, .wm-sev) .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--color-text-muted); }
:is(.state, .gd-c, .wm-sev).sev-steady { color: var(--color-ok-text); }
:is(.state, .gd-c, .wm-sev).sev-significant { color: var(--color-significant-text); }
:is(.state, .gd-c, .wm-sev).sev-major { color: var(--color-major-text); }
:is(.state, .gd-c, .wm-sev).sev-steady .dot { background: var(--color-ok-dot); }
:is(.state, .gd-c, .wm-sev).sev-significant .dot { background: var(--color-significant-solid); }
:is(.state, .gd-c, .wm-sev).sev-major .dot { background: var(--color-major-solid); }
:is(.state, .gd-c, .wm-sev):is(.sev-nodata, .sev-pending) .dot { background: var(--color-none); border: 1.5px solid var(--color-outline); }
.wm-sev.sev-minor .dot { background: var(--color-minor-text); }
.gd-notes { margin: var(--lp-s4) 0 0; padding: 0; list-style: none; }
.gd-note { display: grid; grid-template-columns: 34% 1fr; padding: 10px 0; border-top: 1px solid var(--color-rule); }
.gd-note-m { padding-right: var(--lp-s3); font-weight: 600; color: var(--color-text); }
.gd-why { max-width: 62ch; font-size: 15px; line-height: 1.5; color: var(--color-text-secondary); text-wrap: pretty; }

/* WHAT MOVED: the day in one line, then each change as ONE grouped item and one link */
.wm-day { margin: var(--lp-s2) 0 0; font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); color: var(--color-text-secondary); }
.wm-day > span { white-space: nowrap; }
.wm-day .sev-major { color: var(--color-major-text); font-weight: 700; }
.wm-day .sev-significant { color: var(--color-significant-text); font-weight: 700; }
.wm-lead { margin-top: var(--lp-s5); }
.wm-lead-h { margin: var(--lp-s5) 0 0; font: 700 20px/1.3 var(--font-sans); letter-spacing: -.012em; }
.wm-lead .wm-lead-h { margin: 0; }
.wm-lead-d { margin: 6px 0 0; max-width: 62ch; color: var(--color-text-secondary); }
.wm-list, .wm-rows, .wm-sides { margin: 0; padding: 0; list-style: none; }
.wm-list { margin-top: var(--lp-s3); }
.wm-list > li + li { border-top: 1px solid var(--color-rule); }
main a.wm-item, main a.wm-row { display: block; color: var(--color-text); text-decoration: none; }
.wm-item { padding: var(--lp-s5) 0 var(--lp-s6); }
.wm-meta { display: block; font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); color: var(--color-text-secondary); }
.wm-sev { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.wm-sev .dot { width: 8px; height: 8px; }
.wm-h { display: block; margin-top: 6px; max-width: 46ch; font: 700 19px/1.3 var(--font-sans); letter-spacing: -.012em; text-wrap: pretty; }
.wm-sides { margin-top: var(--lp-s3); }
.wm-side { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0 var(--lp-s4); padding: 3px 0; }
.wm-when { grid-row: 1 / span 2; padding-top: 3px; font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); color: var(--color-text-secondary); }
.wm-did { font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--color-text); }
.wm-side .q-text { display: block; grid-column: 2; margin: 1px 0 0; font-size: 15px; line-height: 1.45; color: var(--color-text-secondary); }
.wm-side .q-text mark { padding: 0 1px; border-radius: 2px; background: var(--color-mark-bg); color: inherit; }
main a.wm-item:hover .wm-h, main a.wm-row:hover .wm-rh { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.wm-rows { border-top: 1px solid var(--color-rule); }
.wm-rows > li { border-bottom: 1px solid var(--color-rule); }
.wm-row { display: block; padding: 12px 0; }
.wm-rh { display: block; margin-top: 3px; font-size: 15.5px; line-height: 1.45; }
.wm-more { margin: var(--lp-s3) 0 0; font-size: 14.5px; }

/* the ledgers: rows on hairlines, one row per model, every explanation in a header or the legend */
.tk-scroll { margin-top: var(--lp-s4); }
.tk-table { width: 100%; border-collapse: collapse; text-align: left; }
.tk-table thead th { padding: 0 var(--lp-s3) 8px 0; border-bottom: 1px solid var(--color-text); font: var(--lp-label-section);
                     letter-spacing: var(--lp-label-section-track); text-transform: uppercase; color: var(--color-text-secondary); white-space: nowrap; }
.tk-table tbody th, .tk-table tfoot th { padding: 12px var(--lp-s3) 12px 0; border-top: 1px solid var(--color-rule);
                                         font: 700 16px/1.25 var(--font-sans); letter-spacing: -.015em; vertical-align: middle; }
.tk-table td { padding: 12px var(--lp-s3) 12px 0; border-top: 1px solid var(--color-rule); vertical-align: middle; }
.tk-table td:last-child, .tk-table th:last-child { padding-right: 0; }
.tk-table tfoot > tr > * { border-top: 1px solid var(--color-text); }
.tk-table tfoot th { font-weight: 600; color: var(--color-text-secondary); }
.tk-v { display: block; font: 600 15.5px/1.3 var(--font-sans); font-variant-numeric: tabular-nums; }
.tk.is-rates .tk-v { font-weight: 500; }
.tk-with { display: flex; align-items: center; gap: var(--lp-s4); }
.tk-with .tk-v { min-width: 3.2em; }
.spark { flex: none; display: block; width: 96px; height: 24px; }
.sp-band { fill: var(--color-chip-neutral); }
.sp-zero { stroke: var(--color-outline); stroke-width: 1; }
.sp-line { fill: none; stroke: var(--color-text); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.sp-dot { fill: var(--color-text); }
.tk-table .tk-note-row td { padding: 0 0 14px; border-top: 0; }
.tk-note { margin: 0; max-width: 72ch; font-size: 14px; line-height: 1.5; color: var(--color-text-secondary); }

/* /alerts/: a real brief, drawn as the email draws it, in ONE container (nothing boxed inside it) */
.bs-mail { max-width: 640px; margin-top: var(--lp-s5); padding: var(--lp-s6) var(--lp-s6) var(--lp-s7);
           border: 1px solid var(--color-rule); border-radius: var(--lp-r-plate); background: var(--color-surface); }
.bs-top { display: flex; justify-content: space-between; align-items: center; margin: 0 0 var(--lp-s5);
          font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); color: var(--color-text-secondary); }
.bs-brand { display: inline-flex; align-items: center; gap: 10px; font: var(--lp-label-chip); letter-spacing: var(--lp-label-chip-track);
            color: var(--color-text); }
.bs-zone { margin-top: var(--lp-s6); }
.bs-top + .bs-zone { margin-top: 0; }
.bs-h { margin: 0; font: 700 21px/1.25 var(--font-sans); letter-spacing: -.015em; }
.bs-affects { margin: 8px 0 0; font-weight: 600; line-height: 1.45; }
.gd.is-sample { margin-top: var(--lp-s4); }
.gd.is-sample tbody th { font-size: 14px; }
.bs-model { display: flex; align-items: center; gap: var(--lp-s5); margin: 0; font: 700 19px/1.2 var(--font-sans); }
.bs-about { margin: var(--lp-s3) 0 0; font-weight: 700; line-height: 1.35; }
.bs-story { margin: 4px 0 0; color: var(--color-text-secondary); line-height: 1.5; }
.bs-tech { margin: var(--lp-s3) 0 0; font-size: 15px; line-height: 1.5; color: var(--color-text); }
.bs-mail .wm-sides { margin-top: var(--lp-s3); }

/* /alerts/: what the brief is, three short lines (record pass six, chunk 6; they were three mono-labelled columns) */
.al-facts { max-width: 600px; margin-left: auto; margin-right: auto; }
.al-l { margin: 0; padding: 12px 0; border-top: 1px solid var(--color-rule); font-size: 17px; line-height: 1.5; color: var(--color-text); }
.al-l:first-child { border-top: 0; padding-top: 0; }
.al-price { margin: var(--lp-s5) 0 0; font: 600 20px/1.4 var(--font-sans); color: var(--color-text); }

@media (max-width: 52rem) {
  /* the ledgers become records: a label per cell, nothing squeezed sideways */
  .tk-table, .tk-table tbody, .tk-table tfoot, .tk-table tr, .tk-table th, .tk-table td { display: block; }
  .tk-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tk-table tbody tr, .tk-table tfoot tr { padding: var(--lp-s4) 0 var(--lp-s4); border-top: 1px solid var(--color-rule); }
  .tk-table tbody th, .tk-table tfoot th { padding: 0 0 var(--lp-s2); border-top: 0; font-size: 18px; }
  .tk-table td { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--lp-s3); padding: 5px 0; border-top: 0; }
  .tk-table td:empty { display: none; }
  .tk-table td::before { content: attr(data-l); font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track);
                         color: var(--color-text-secondary); }
  .tk-table .tk-note-row { padding-top: 0; border-top: 0; }
  .tk-table .tk-note-row td { display: block; }
  .tk-table .tk-note-row td::before { content: none; }
  .gd thead td, .gd-note { grid-template-columns: 30% 1fr; }
  .gd thead td { width: 30%; }
  .gd tbody th { font-size: 13.5px; hyphens: auto; overflow-wrap: anywhere; }
  .state { gap: 6px; font-size: 11.5px; letter-spacing: .04em; white-space: normal; }
  .gd:has(thead th:nth-of-type(4)) { min-width: 30rem; }
  .wm-side { grid-template-columns: 5.5rem 1fr; gap: 0 var(--lp-s3); }
}
@media (min-width: 46rem) {
  .fp-top { padding-top: var(--lp-s10); }
  .fp-h1 { font-size: 44px; }
  .wm, .tk, .fp-brief, .fp-join, .al-facts, .bs { margin-top: var(--lp-s10); }
}
@media (prefers-reduced-motion: no-preference) {
  .fp-join button[type="submit"], .fp-join input[type="email"] {
    transition: background-color var(--lp-dur) var(--lp-ease), border-color var(--lp-dur) var(--lp-ease); }
}

/* THE FRONT PAGE ON A DESKTOP: A · Stretch (Brad's pick, 2026-09-23; B · Split was built first by mistake and is gone).
   From 1200px the page is one column that grows with the screen. The hero splits in two the way the landing's does:
   the claim on the left; on the right, behind a hairline, the dek, the one-sample line and the day in one sentence (record
   pass two). Every section below spans the same column. Front page only (body:has(.fp-hero)); nothing under 1200px
   changes. Every size that grows with the screen reads --fw, the frame, which stops at 1920px: wider than that the page
   IS its 1920 layout, centred, and the extra width is equal margin on both sides. The header follows, because its
   padding already reads --max-width and --gutter. */
@media (min-width: 1200px) {
  body:has(.fp-hero) { --fw: min(100vw, 1920px); --gutter: clamp(40px, calc(var(--fw) * .04), 120px);
                       --max-width: calc(var(--fw) - 2 * var(--gutter)); --a-gap: clamp(40px, calc(var(--fw) * .04), 120px); }
  body:has(.fp-hero) .fp-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
                                column-gap: clamp(48px, calc(var(--fw) * .05), 160px); align-items: end; }
  .fp-hero > .fp-eyebrow { grid-column: 1 / -1; }
  .fp-hero > .fp-claim { grid-column: 1; grid-row: 2 / span 3; max-width: none; font-size: clamp(72px, calc(var(--fw) * .05), 150px); }
  .fp-hero > :is(.fp-dek, .fp-limit, .fp-now) { grid-column: 2; margin: 0; padding-left: var(--lp-s7); border-left: 1px solid var(--color-rule); }
  .fp-hero > .fp-dek { grid-row: 2; align-self: end; padding-bottom: var(--lp-s3); font-size: clamp(20px, calc(var(--fw) * .012), 28px); }
  .fp-hero > .fp-limit { grid-row: 3; padding-bottom: .1em; font-size: clamp(15px, calc(var(--fw) * .0085), 19px); }
  .fp-hero > .fp-now { grid-row: 4; padding-top: var(--lp-s3); padding-bottom: .1em; font-size: clamp(15px, calc(var(--fw) * .0085), 19px); }
}

/* THE FRAME ON THE OTHER PAGES (desktop pass, part two, 2026-09-24). A page that opts in (page(frame=True) writes
   body.fw) takes the front page's frame from 1200px: the same --fw, gutter and width, stopping at 1920 and centred
   above it, so the header's ends sit where they sit on the front page. Under 1200px nothing changes. */
@media (min-width: 1200px) {
  body.fw { --fw: min(100vw, 1920px); --gutter: clamp(40px, calc(var(--fw) * .04), 120px);
            --max-width: calc(var(--fw) - 2 * var(--gutter)); --a-gap: clamp(40px, calc(var(--fw) * .04), 120px); }
}

/* EVENT PAGES: what gets shared. The meta line and the dated lines are What moved's own; the full answers stand side
   by side under the question on one ink rule each, never in a box; the model's own block quotes lose the left rule. */
.ev-top { padding-top: var(--lp-s8); }
.ev .ev-meta { margin: 0; }
.ev-h.fp-disp { margin: var(--lp-s4) 0 0; max-width: 26ch; }
.ev-top > .cc-pair { max-width: 720px; }
.ev-why { margin-top: var(--lp-s9); padding-top: var(--lp-s6); border-top: 2px solid var(--color-text); }
.ev-why h2, .ev .exchange h2 { margin: 0; font: 700 22px/1.2 var(--font-sans); letter-spacing: -.015em; }
.ev-lede { margin: var(--lp-s3) 0 0; max-width: 62ch; font-size: 17px; line-height: 1.5; color: var(--color-text-secondary); }
.ev-rule { margin: var(--lp-s3) 0 0; max-width: 62ch; font-size: 15px; line-height: 1.5; color: var(--color-text-muted); }
.ev .exchange { margin-top: var(--lp-s9); padding-top: var(--lp-s6); border-top: 2px solid var(--color-text); }
.ev .exchange .asked { margin-top: var(--lp-s6); padding: 0; }
.ev .asked-l { margin: 0 0 var(--lp-s2); font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); color: var(--color-text-secondary); }
.ev .prompt { max-width: 96ch; font-size: 14px; }
.ev .quotes.full { gap: var(--lp-s7) var(--lp-s8); margin-top: var(--lp-s6); padding: 0; }
.ev .quotes.full .quote, .ev .quote.today { padding: var(--lp-s3) 0 0; border: 0; border-top: 1px solid var(--color-text);
                                           border-radius: 0; background: none; }
.ev .quote .resp { max-width: 74ch; }
.ev .resp blockquote { margin: .5em 0 .9em; padding: 0; border-left: 0; color: var(--color-text-secondary); }
.ev-folds { margin-top: var(--lp-s9); border-bottom: 1px solid var(--color-rule); }
.ev-folds details.fold > summary { padding: 15px 0 13px; border-top: 1px solid var(--color-rule); }
.ev-folds details.fold > summary:hover { background: none; }
.ev-folds details.fold > summary:hover .fold-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ev-folds .receipts .fold-body { padding: 14px 0 18px; }
.ev-folds .receipts .arm-label { margin: 0 0 12px; }
/* DAY PAGES: the front page's What moved at full length, its folds on rules like the event page's */
.dy-top { padding-top: var(--lp-s5); }
.dy-top .dy-h { margin-top: var(--lp-s4); }
.dy-top + .fp-run { margin-top: var(--lp-s8); }
.dy-moved { margin-top: var(--lp-s9); padding-top: 0; border-top: 0; }
.dy-moved .wm-rows { margin-top: var(--lp-s6); border-top: 1px solid var(--color-text); }
.dy-moved .wm-row { padding: var(--lp-s4) 0; }
.dy-moved .wm-rh { font-size: 17px; line-height: 1.45; }
.dy-moved .dy-folds { margin-top: var(--lp-s5); }
.dy-moved .dy-folds .fold-body { padding: 0 0 var(--lp-s4); }
.dy-moved .dy-folds .wm-rows { margin-top: 0; border-top: 0; }
.dy-folds .fold-body > .table-note { margin: var(--lp-s3) 0 0; }
.dy-folds .tk-fold .tk-scroll { margin-top: 0; }
@media (min-width: 1200px) {
  body.fw .dy-moved, body.fw .dy-top + .fp-run { margin-top: clamp(64px, calc(var(--fw) * .05), 112px); }
  body.fw .dy-top + .fp-run .run-n { font-size: clamp(40px, calc(var(--fw) * .028), 56px); }
}
/* the Days index: one row a day on hairlines, no box */
.days-list { margin-top: var(--lp-s6); border-top: 1px solid var(--color-text); }
.days-list > .hist-row { padding: var(--lp-s3) 0; border-bottom: 1px solid var(--color-rule); }
.days-list > a.hist-row:hover { background: none; }
.days-list > a.hist-row:hover .hist-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.days-list .hist-date { min-width: 4.5rem; }
/* THE PLAIN RECORD PAGES (prompt pages, response pages, the Prompts index, About): a meta line, the headline, the
   facts on a hairline (beside the headline from 1200px), sections on rules, tables with a hairline head, no boxes */
.pg-top { padding-top: var(--lp-s6); }
.pg .pg-meta { margin: 0; }
.pg-meta a { color: inherit; }
.pg-h { margin: 10px 0 0; max-width: 26ch; font: 700 30px/1.1 var(--font-sans); letter-spacing: -.028em; text-wrap: balance; }
.pg-h.fp-disp { margin-top: var(--lp-s4); font-size: 28px; }
.pg-sec > .fp-disp { margin: 0; }
.pg-sec > .fp-disp + .fp-legend { margin-top: var(--lp-s3); }
.pg-sec:has(> .fp-disp) { border-top: 2px solid var(--color-text); }
.pg-first { margin-top: var(--lp-s8); }
.pg-lede { max-width: 62ch; }
.pg .record > .text { max-width: 120ch; }
.pg-dek { margin: var(--lp-s3) 0 0; max-width: 62ch; }
.pg-facts, .pg-top > .pg-ask { margin-top: var(--lp-s6); padding-top: var(--lp-s4); border-top: 1px solid var(--color-rule); }
.pg-facts dl.meta { padding: 0; }
.pg .asked-l { margin: 0 0 var(--lp-s2); font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); color: var(--color-text-secondary); }
.pg .note { margin: var(--lp-s3) 0 0; max-width: 72ch; font-size: 14.5px; line-height: 1.5; color: var(--color-text-secondary); }
.pg-sec { margin-top: var(--lp-s9); padding: var(--lp-s6) 0 0; border-top: 1px solid var(--color-rule); }
.pg-sec h2, .pg-prose h2 { margin: 0; font: 700 22px/1.2 var(--font-sans); letter-spacing: -.015em; }
.pg-sec > .fp-legend { margin: var(--lp-s2) 0 var(--lp-s4); }
.pg-legend { margin-top: 0; }
.pg-index { margin-top: var(--lp-s7); }
.pg .vt thead th { background: none; border-bottom: 1px solid var(--color-text); }
.pg .vt tr > :first-child { padding-left: 0; }
.pg .vt tr > :last-child { padding-right: 0; }
.pg-prose { max-width: 62ch; }
.pg-prose .lede { margin: 0; font-size: 20px; line-height: 1.45; color: var(--color-text); }
.pg-prose h2 + p { margin-top: var(--lp-s2); }
.pg-prose h2 { margin-top: var(--lp-s8); }
.pg-prose p { font-size: 16px; line-height: 1.6; color: var(--color-text-secondary); }
@media (min-width: 46rem) { .pg-h { font-size: 40px; } }
@media (min-width: 700px) { .pg-h.fp-disp { font-size: 36px; } }
@media (min-width: 900px) { .pg-h.fp-disp { font-size: 44px; } }
@media (min-width: 1200px) {
  body.fw .pg-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: clamp(48px, calc(var(--fw) * .05), 160px);
                    padding-top: var(--lp-s8); }
  body.fw .pg-top > :not(.pg-facts) { grid-column: 1; }
  body.fw .pg-top > .pg-facts { grid-column: 2; grid-row: 1 / span 4; align-self: end; margin: 0; padding: 0 0 0 var(--lp-s7);
                                border-top: 0; border-left: 1px solid var(--color-rule); }
  body.fw .pg-h { font-size: clamp(44px, calc(var(--fw) * .03), 64px); }
}
/* /alerts/ in the frame (record pass six, chunk 6): the headline at the hero's scale, the price line under it */
@media (min-width: 1200px) {
  body.fw .al-top > .fp-h1 { max-width: 22ch; font-size: clamp(44px, calc(var(--fw) * .03), 64px); }
}
  body.fw .al-top > .fp-dek { grid-row: 2; align-self: end; padding-bottom: var(--lp-s3); font-size: clamp(17px, calc(var(--fw) * .0105), 21px); }
  body.fw .al-top > .fp-limit { grid-row: 3; align-self: start; padding-bottom: .1em; }
}
@media (min-width: 1200px) {
  /* record pass six: the headline across the top, the two cards side by side under it (chat_pair, THE PAIR) */
  .ev-top { padding-top: var(--lp-s10); }
  .ev-why { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: clamp(48px, calc(var(--fw) * .05), 160px); }
  .ev-why > * { grid-column: 1; }
  .ev-lede { font-size: clamp(17px, calc(var(--fw) * .0105), 21px); }
  .ev .quotes.full { column-gap: var(--a-gap); }
}

/* ---- THE RECORD PAGE, PASS TWO (2026-09-27). Three content modes and nothing between them: a display headline in the
   hero's type scale (.fp-disp) with at most one explainer line (.fp-disp-p), which opens every section; a ledger row,
   one line per model or per item, the ink rule above and thin rules between; a meta line or a strip, mono, small,
   numbers and facts only. The small mono label over a medium heading is gone from the page. Body copy stays the step
   the first record pass set; mono is for meta lines, column heads, the disclosure's contents and the footer. */
html:not(.lp) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:not(.lp) { scroll-behavior: auto; } }
/* The record page's ground: in dark a diagonal gradient with a glow of the brand purple at the top right that fades out
   before the models; in light the same glow at half the strength over the paper. Tokens from RECORD_BG (their own
   blocks: the app's pinned tokens and the landing's palette do not move). Nothing on the page moves with it. */
/* Record pass three: every record-side page stands on the same ground under the same bar (the methodology keeps the
   landing product's own palette). */
:is(body:has(.fp-hero), html:not(.md):not(.lp) body.fw) { background-color: var(--color-page);
                     background-image: radial-gradient(var(--bg-glow-size) at 78% -8%, var(--color-bg-glow), transparent var(--bg-glow-clear)),
                                       linear-gradient(120deg, var(--color-bg-a), var(--color-bg-b), var(--color-bg-c));
                     background-size: 100% var(--bg-glow-h), 100% 100%; background-repeat: no-repeat; }
:is(body:has(.fp-hero), html:not(.md):not(.lp) body.fw) .hd { background: var(--color-bg-bar); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

.fp-disp { margin: 0; max-width: 24ch; font: 700 28px/1.08 var(--font-sans); letter-spacing: -.035em; color: var(--color-text);
           text-wrap: balance; }
.fp-disp a { color: inherit; text-decoration: none; }
.fp-disp a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.fp-disp-p { margin: var(--lp-s4) 0 0; max-width: 58ch; font-size: 17px; line-height: 1.5; color: var(--color-text-secondary); }
.fp-now { margin: var(--lp-s4) 0 0; max-width: 62ch; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--color-text); }
.fp-wm, .fp-models, .fp-run { margin-top: var(--lp-s10); }
.fp-models .sec-hd { align-items: flex-end; row-gap: var(--lp-s3); }

/* What moved, hero-sized: the severity line, the headline, one sentence; the dated before and after as two rows */
.fp-wm { padding-top: var(--lp-s7); border-top: 2px solid var(--color-text); }
.fp-wm .wm-say > .wm-meta { margin: 0 0 var(--lp-s4); }
.fp-wm .wm-lead > .wm-sides { margin-top: var(--lp-s6); }
.fp-wm .wm-lead .wm-side { padding: var(--lp-s3) 0; }
.fp-wm .wm-lead .wm-side + .wm-side { border-top: 1px solid var(--color-rule); }
.fp-wm .wm-did, .fp-wm .wm-side .q-text { font-size: 16px; line-height: 1.55; }
.fp-wm .wm-rows { margin-top: var(--lp-s8); border-top: 1px solid var(--color-text); }
.fp-wm .wm-row { padding: var(--lp-s4) 0; }
.fp-wm .wm-rh { font-size: 17px; line-height: 1.45; }
.fp-wm .wm-more { margin: var(--lp-s4) 0 0; font-size: 15.5px; }

/* Three models: one ledger row per model. On a phone a row is two lines, the name, the label and the rail, then
   coverage, right answers and cost (the line under 480px is dropped); on a desktop the row runs across one grid whose
   column heads say once what each value is. */
.fp-models { --td-h: 22px; --md-cols: minmax(7.5rem, 1fr) minmax(10rem, 1.25fr) minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, .8fr) 9.5rem; }
.td-cols { margin-top: var(--lp-s7); border-top: 1px solid var(--color-text); }
.md-hd { display: none; }
.td-m { display: grid; grid-template-columns: 4.25rem 5.75rem minmax(0, 1fr);
        grid-template-areas: "name state rail" ". . ends" "count count count" "vals vals vals" "spark spark spark";
        column-gap: var(--lp-s3); align-items: start; padding: var(--lp-s4) 0; border-top: 1px solid var(--color-rule); }
.td-week { display: contents; }
.td-week > .td-rail { grid-area: rail; }
.td-week > .td-ends { grid-area: ends; }
.td-week > .td-count { grid-area: count; }
.md-vals { margin-top: 6px; }
.md-hd + .td-m { border-top: 0; }
.td-name { grid-area: name; margin: 0; font: 700 18px/1.2 var(--font-sans); letter-spacing: -.015em; color: var(--color-text); }
.td-state { grid-area: state; margin: 4px 0 0; }
.td-m .state { gap: 6px; font-size: 11px; letter-spacing: .06em; }
.md-vals { grid-area: vals; display: flex; flex-wrap: wrap; gap: 2px var(--lp-s3); }
.md-cov, .md-right, .md-cost { margin: 0; font: 500 15.5px/1.4 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--color-text); }
.md-spark { grid-area: spark; margin: 0; }
.md-u { color: var(--color-text-secondary); }
.td-rail { display: flex; align-items: flex-end; justify-content: space-between; height: var(--td-h); padding: 0 2px;
           border-bottom: 1px solid var(--color-outline); }
.td-d { display: flex; flex: 0 1 20px; justify-content: center; align-items: flex-end; min-width: 0; height: 100%; color: var(--color-text-muted); }
.td-d.is-today { flex: none; width: 20px; }
/* Every day is drawn the same height and width: today is marked by its label under the rail (TODAY), nothing else,
   because a taller mark reads as a bigger value. */
.td-tick { flex: none; width: 6px; height: 100%; border-radius: 1px 1px 0 0; background: currentColor; }
.td-ring { flex: none; width: 9px; height: 9px; margin-bottom: 4px; border: 1.5px solid var(--color-text-muted); border-radius: 50%; }
.td-sw.sev-steady, .td-d.sev-steady { color: var(--color-ok-dot); }
.td-sw.sev-significant, .td-d.sev-significant { color: var(--color-significant-solid); }
.td-sw.sev-major, .td-d.sev-major { color: var(--color-major-solid); }
.td-ends { display: flex; justify-content: space-between; gap: 8px; margin: 5px 0 0; font: 400 11px/1.3 var(--font-mono);
           letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-secondary); }
.td-ends .td-today { font-weight: 600; }
.td-count { margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: var(--color-text-secondary); }
.td-n { font-family: var(--font-mono); font-weight: 700; color: var(--color-text); }
.td-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--lp-s5); margin: var(--lp-s4) 0 0; padding: 0;
          list-style: none; font: 400 12px/1.3 var(--font-mono); letter-spacing: .04em; color: var(--color-text-secondary); }
.td-key li { display: inline-flex; align-items: center; gap: 8px; }
.td-sw { flex: none; width: 4px; height: 12px; border-radius: 1px; background: currentColor; }
.td-sw.is-ring { width: 8px; height: 8px; border: 1.5px solid var(--color-text-muted); border-radius: 50%; background: var(--color-none); }
/* the grid under the rows is quiet detail: faint column heads over a hairline, muted row labels */
.fp-models .gd-wrap { margin-top: var(--lp-s8); }
.fp-models .gd thead th { font: 600 11px/1.3 var(--font-mono); letter-spacing: .12em; color: var(--color-text-secondary); }
.fp-models .gd thead :is(th, td) { padding-bottom: 12px; border-bottom-color: var(--color-text); }
.fp-models .gd tbody tr:last-child > * { border-bottom: 1px solid var(--color-rule); }
.rd-note { display: grid; grid-template-columns: 34% 1fr; margin: 0; padding: 10px 0; border-top: 1px solid var(--color-rule); }
.md-total { display: flex; justify-content: space-between; gap: var(--lp-s4); margin: var(--lp-s5) 0 0; padding: 12px 0;
            border-top: 1px solid var(--color-text); font: 600 16px/1.3 var(--font-sans); color: var(--color-text-secondary); }
.md-total .md-cost { display: block; font-weight: 600; }
.rd-all { margin-top: 0; border-bottom: 1px solid var(--color-rule); }
details.fold.rd-all > summary { padding: 15px 0 13px; border-top: 1px solid var(--color-rule); }
details.fold.rd-all > summary:hover { background: none; }
details.fold.rd-all > summary:hover .fold-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
details.fold.rd-all[open] > summary { border-bottom: 0; }
.rd-all .fold-body { padding: 0 0 var(--lp-s4); }
.rd-more { border-collapse: collapse; text-align: left; font: 400 13px/1.5 var(--font-mono); font-variant-numeric: tabular-nums;
           color: var(--color-text); }
.rd-more th, .rd-more td { padding: 8px var(--lp-s6) 8px 0; border-top: 1px solid var(--color-rule); white-space: nowrap; }
.rd-more thead th { padding-top: 0; border-top: 0; border-bottom: 1px solid var(--color-text); font: var(--lp-label-section);
                    letter-spacing: var(--lp-label-section-track); text-transform: uppercase; color: var(--color-text-secondary); }
.rd-more tbody tr:first-child > * { border-top: 0; }
.rd-more tbody th { font-weight: 600; }

/* The run, as a strip: no headline, four cells between two rules, one big mono number and a small label each */
.fp-run { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-text);
          border-bottom: 1px solid var(--color-text); }
.run-c { min-width: 0; padding: var(--lp-s6) var(--lp-s4) var(--lp-s6) 0; }
.run-n { margin: 0; font: 700 34px/1.05 var(--font-mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
         color: var(--color-text); white-space: nowrap; }
.run-n .sev-major { color: var(--color-major-text); }
.run-n .sev-significant { color: var(--color-significant-text); }
.run-l { margin: 10px 0 0; font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); text-transform: uppercase;
         color: var(--color-text-secondary); }

/* The daily brief: ONE full-bleed field, the page's only one, purple in both themes (FIELD_CSS). Its gradient is painted
   by a border-image with an outset, so it runs to the window's edges without widening anything: the section's own box
   stays on the column. White text; the one button is white with purple text. Purple here carries no severity meaning,
   and nothing with severity meaning sits inside the field. */
.fp-brief { padding-top: 0; border-top: 0; }
.fp-brief > .br-field { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--lp-s8); padding: var(--lp-s9) 0 var(--lp-s10);
                        background-color: var(--color-field-mid); color: var(--color-text);
                        border-image: linear-gradient(112deg, var(--color-field-a), var(--color-field-mid), var(--color-field-c)) fill 0 / 0 / 0 100vmax; }
.br-look-h { margin: 0; font: 600 15px/1.35 var(--font-sans); color: var(--color-text-secondary); }
.br-look-a { margin: var(--lp-s2) 0 0; font: 700 19px/1.35 var(--font-sans); letter-spacing: -.01em; color: var(--color-text); }
.br-look-s { margin: 4px 0 0; font-size: 16px; line-height: 1.5; color: var(--color-text); }
.br-look-t { margin: var(--lp-s2) 0 0; font-size: 15.5px; line-height: 1.55; color: var(--color-text-secondary); }
.br-field .btn-primary { min-height: 48px; padding: 12px 22px; font: 700 16px/1.2 var(--font-sans); border-radius: var(--lp-r-control); }

/* The weekly, as one row: the display headline and its sentence, then the field and the button on one baseline */
.fp-join { margin-top: var(--lp-s10); padding-top: 0; border-top: 0; }
.fp-join-p { margin: var(--lp-s4) 0 0; max-width: 52ch; font-size: 17px; line-height: 1.6; color: var(--color-text-secondary); }
.fp-join .signup-form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; max-width: none; margin-top: var(--lp-s6); }
.fp-join input[type="email"] { flex: 1 1 220px; min-width: 0; width: auto; }  /* not .lp-input: the landing freeze hashes every .lp- rule */
.fp-join .signup-form .signup-msg { flex-basis: 100%; }
.fp-join button[type="submit"] { font: 600 15px/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; }

@media (min-width: 700px) { .fp-disp { font-size: 36px; } }
@media (min-width: 900px) { .fp-disp { font-size: 44px; } .fp-disp-p { font-size: 19px; } }
@media (max-width: 479.98px) { .md-spark { display: none; } }
@media (max-width: 52rem) {
  /* /alerts/'s sample brief on a phone (record pass two): it clipped "drifting" to "driftin" and broke "Recommendations"
     mid-word. The columns take the width their words need, a label breaks only between words, and a cell's word may
     sit under its dot rather than be cut. */
  .bs-mail { padding: var(--lp-s5) var(--lp-s4) var(--lp-s6); }
  .gd.is-sample { table-layout: auto; }
  .gd.is-sample thead td { width: auto; }
  .gd.is-sample tbody th { font-size: 13.5px; hyphens: manual; overflow-wrap: normal; }
  .gd.is-sample .gd-c { flex-wrap: wrap; row-gap: 2px; }
  .fp-models .gd { table-layout: auto; }
  .fp-models .gd thead td, .fp-models .gd tbody th { width: 1%; white-space: nowrap; hyphens: manual; overflow-wrap: normal; }
  .fp-models .gd thead th { width: 33%; }
  .rd-note { grid-template-columns: 30% 1fr; }
  .fp-run { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .run-c:nth-child(n+3) { border-top: 1px solid var(--color-rule); }
  .run-n { font-size: 26px; }
  .fp-brief > .br-field { padding: var(--lp-s8) 0 var(--lp-s9); }
}
@media (min-width: 52rem) {
  .fp-models { --td-h: 24px; }
  .md-hd { display: grid; grid-template-columns: var(--md-cols); column-gap: var(--lp-s5); align-items: end; padding: 0 0 8px; }
  .md-hd > span { font: var(--lp-label-section); letter-spacing: var(--lp-label-section-track); text-transform: uppercase;
                  color: var(--color-text-secondary); }
  .md-hd + .td-m { border-top: 1px solid var(--color-text); }
  .td-cols { border-top: 0; }
  .td-m { grid-template-columns: var(--md-cols); grid-template-areas: "name week cov right cost spark" "state week cov right cost spark";
          column-gap: var(--lp-s5); row-gap: 6px; }
  .td-name { font-size: 20px; }
  .td-m .state { font-size: 12px; letter-spacing: .08em; }
  .td-state { margin: 0; }
  .md-vals { display: contents; }
  .md-cov, .md-right, .md-cost { font-size: 16.5px; }
  .md-cov { grid-area: cov; } .md-right { grid-area: right; } .md-cost { grid-area: cost; }
  .md-u { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .md-spark { grid-row: 1 / span 2; }
  .td-week { display: block; grid-area: week; max-width: 15rem; }
  .md-vals { margin-top: 0; }
  .md-total { display: grid; grid-template-columns: var(--md-cols); column-gap: var(--lp-s5); }
  .md-total .md-cost { grid-area: auto; grid-column: 5; font-size: 16.5px; color: var(--color-text); }
  .fp-brief > .br-field { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: var(--lp-s9); align-items: start; }
  .fp-join { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--lp-s9); align-items: end; }
  .fp-join .signup-form { margin-top: 0; }
}
@media (min-width: 1200px) {
  :is(body:has(.fp-hero), body.fw) .fp-disp { font-size: clamp(44px, calc(var(--fw) * .03), 64px); }
  :is(body:has(.fp-hero), body.fw) .fp-disp-p { font-size: clamp(19px, calc(var(--fw) * .0115), 24px); }
  body:has(.fp-hero) :is(.fp-wm, .fp-models, .fp-run, .fp-join) { margin-top: clamp(96px, calc(var(--fw) * .066), 128px); }
  body:has(.fp-hero) .fp-brief { margin-top: clamp(96px, calc(var(--fw) * .066), 128px); }
  /* What moved: the lead change on the left, its dated before and after on the right behind a hairline, in the hero's
     own proportions */
  body:has(.fp-hero) .wm-lead.has-sides { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
                                          column-gap: clamp(48px, calc(var(--fw) * .05), 160px); align-items: end; }
  body:has(.fp-hero) .wm-lead.has-sides > .wm-sides { margin: 0; padding-left: var(--lp-s7); border-left: 1px solid var(--color-rule); }
  body:has(.fp-hero) .fp-models { --td-h: clamp(24px, calc(var(--fw) * .016), 30px);
    --md-cols: minmax(9rem, 1fr) minmax(12rem, 1.2fr) minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, .8fr) 10.5rem; }
  body:has(.fp-hero) .td-name { font-size: clamp(20px, calc(var(--fw) * .0135), 26px); }
  body:has(.fp-hero) :is(.md-cov, .md-right, .md-cost) { font-size: clamp(16.5px, calc(var(--fw) * .0095), 19px); }
  body:has(.fp-hero) .td-week { max-width: 18rem; }
  body:has(.fp-hero) .run-n { font-size: clamp(40px, calc(var(--fw) * .028), 56px); }
  :is(body:has(.fp-hero), body.fw) .fp-brief > .br-field { padding: 96px 0 104px; column-gap: var(--a-gap); }
  :is(body:has(.fp-hero), body.fw) .fp-join { column-gap: var(--a-gap); }
}

/* ---- THE CHAT CARDS (record pass three; rebuilt as the object by record pass four, 2026-09-28). A change's before and
   after as two cards, stacked. A card is one box; inside it only the user turn is filled. The answer is the card's body:
   the site's body size, 17px/1.5, up to five lines (eight on a phone's narrow card), then the cut, with "Full answer" as
   its own line under it. Each model's surface, turn, answer ink and type, mark and name come from its CARD_MODELS row
   (the generated rules after INSTRUMENT_CSS). Light cards lie on the page with one soft shadow, dark ones on a 1px rule.
   The after chip is filled in the site's ink. No severity mark is drawn on a card. */
.cc-pair { display: flex; flex-direction: column; gap: 16px; margin-top: var(--lp-s7); }
.cc { --cc-tone: var(--color-cc-gpt); --cc-bg: var(--color-cc-gpt-bg); --cc-edge: var(--color-cc-gpt-edge);
      --cc-turn: var(--color-cc-gpt-turn); --cc-ink: var(--color-cc-gpt-ink); --cc-rule: var(--color-cc-gpt-rule); --cc-line: var(--color-cc-gpt-line);
      --cc-turn-r: 24px; --cc-turn-w: 86%;
      --cc-a-w: 400; --cc-a-ls: 0;
      display: flex; flex-direction: column; flex: 1 1 auto; margin: 0; padding: 22px 22px 20px;
      border: 1px solid var(--cc-rule); border-radius: 20px; background: var(--cc-bg); box-shadow: var(--cc-shadow);
      color: var(--cc-ink); }
.cc-who { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 18.7px/1.25 var(--font-sans); letter-spacing: -.012em; }
.cc-mark { display: inline-flex; flex: none; color: var(--cc-tone); }
.cc-mark svg { display: block; overflow: visible; }
.cc-name { color: var(--color-text); }
/* a name filled with its row's gradient asset: the gradient is the text's paint; the ink stays underneath for anything
   that cannot clip a background to text */
.cc-name.is-fill { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cc-chip { margin-left: auto; padding: 4px 12px; border: 1px solid var(--cc-tone); border-radius: 999px;
           font: 500 13px/1.2 var(--font-sans); letter-spacing: 0; white-space: nowrap; color: var(--cc-tone); }
.cc.is-after .cc-chip { border-color: var(--color-text); background: var(--color-text); color: var(--color-page); }
.cc-q { display: block; align-self: flex-end; width: fit-content; max-width: var(--cc-turn-w); margin: 18px 0 0; padding: 11px 18px;
        border-radius: var(--cc-turn-r); background: var(--cc-turn); color: var(--color-text); text-decoration: none; }
.cc-q .ptext { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
               font: 400 15px/1.45 var(--font-sans); white-space: normal; overflow-wrap: anywhere; }
.cc-q:hover .ptext { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cc-a { display: flex; flex-direction: column; flex: 1 1 auto; margin-top: 20px; }
.cc-a.has-mark { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 14px; }
.cc-a.has-mark > .cc-mark { grid-column: 1; grid-row: 1; margin-top: 3px; }
.cc-a.has-mark > :not(.cc-mark) { grid-column: 2; }
.cc-say { margin: 0; }
.cc .qq::before, .cc .qq::after { content: none; }  /* the turn says who is speaking; the words are not quoted again */
.cc-say .q-text { display: block; margin: 0; color: var(--cc-ink); }
/* record pass six: the cut is the build's, at a word (card_excerpt); this height of whole lines (eight on a phone, five
   from 700px) is a safety net, never a line clamp, whose ellipsis lands mid-word ("Worl…") */
.cc-say .q-text .qq { display: block; max-height: calc(8 * 1.5em + 7 * .3em); overflow: hidden;
                      font: var(--cc-a-w) 17px/1.5 var(--font-sans); letter-spacing: var(--cc-a-ls); overflow-wrap: anywhere; }
.cc-say .q-text.raw .qq { font: 400 14px/1.6 var(--font-mono); letter-spacing: 0; white-space: pre-wrap; }
.cc-l { display: block; }
.cc-l.is-h, .cc-l b { font-weight: 650; }
.cc-l + .cc-l { margin-top: .3em; }
.cc-say .q-text mark { padding: 0 2px; border-radius: 3px; background: var(--color-mark-bg); color: inherit; }
.cc-note { margin: 10px 0 0; font: 400 13.5px/1.45 var(--font-sans); color: var(--color-text-secondary); }
.cc-go-l { margin: auto 0 0; padding-top: 14px; text-align: right; }
.cc-go { font-size: 14.5px; font-weight: 600; white-space: nowrap; text-decoration: underline;
         text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (min-width: 700px) {
  .cc { padding: 28px 28px 24px; }
  .cc-say .q-text .qq { max-height: calc(5 * 1.5em + 4 * .3em); }
}
/* THE PAIR (record pass six, 2026-09-29): one component on /record/, the event page and the day page. The headline runs
   across the top; from 1200px the two cards sit side by side under it, the before on the left and the after on the
   right, one row, each at most 720px (about 650px each in the 1324px column at 1440: pass four's proportions). Under
   1200px they stack, the before on top, as before. The row is as tall as the taller card and no taller. */
.fp-wm .wm-lead > .cc-pair { margin-top: var(--lp-s7); }
@media (min-width: 1200px) {
  .cc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 720px)); justify-content: start; align-items: stretch;
             column-gap: clamp(16px, calc(var(--fw, 100vw) * .014), 24px); }
  .ev-top > .cc-pair, .wm-lead.has-cards > .cc-pair { width: 100%; max-width: none; margin: var(--lp-s7) 0 0; }
  :is(.ev-top > .ev-say, .wm-lead.has-cards > .wm-say) .fp-disp { max-width: 36ch; }
}
/* THE TWO MOTIONS (record pass three), and nothing else moves: the after card on /record/ arrives once, on first view
   (0 to 1 and a 12px rise, 300ms, ease-out), armed by the site script (html.cc-motion) only where it can observe and
   motion is allowed; and the severity dot on the lead change's line pulses (1 to .55 and back, 2s, ease-in-out). Both
   are off under reduced motion; with no script the card is simply there. */
@media (prefers-reduced-motion: no-preference) {
  html.cc-motion .fp-wm .cc-arrive { transition: opacity 300ms cubic-bezier(0, 0, .58, 1), transform 300ms cubic-bezier(0, 0, .58, 1); }
  html.cc-motion .fp-wm .cc-arrive:not(.is-in) { opacity: 0; transform: translateY(12px); }
  .fp-wm .wm-say > .wm-meta .wm-sev .dot { animation: cc-pulse 2s cubic-bezier(.42, 0, .58, 1) infinite; }
}
@keyframes cc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.cc-claude { --cc-tone: var(--color-cc-claude); --cc-bg: var(--color-cc-claude-bg); --cc-edge: var(--color-cc-claude-edge); --cc-turn: var(--color-cc-claude-turn); --cc-ink: var(--color-cc-claude-ink); --cc-rule: var(--color-cc-claude-rule); --cc-line: var(--color-cc-claude-line); --cc-turn-r: 12px; --cc-a-w: 400; --cc-a-ls: -.006em; }
.cc-claude .cc-mark.at-answer svg { width: 20px; height: 20px; }
.cc-claude .cc-mark.at-name svg { width: 20px; height: 20px; }
.cc-gemini { --cc-tone: var(--color-cc-gemini); --cc-bg: var(--color-cc-gemini-bg); --cc-edge: var(--color-cc-gemini-edge); --cc-turn: var(--color-cc-gemini-turn); --cc-ink: var(--color-cc-gemini-ink); --cc-rule: var(--color-cc-gemini-rule); --cc-line: var(--color-cc-gemini-line); --cc-turn-r: 24px 6px 24px 24px; --cc-a-w: 400; --cc-a-ls: .004em; }
.cc-gemini .cc-mark.at-answer svg { width: 20px; height: 20px; }
.cc-gemini .cc-mark.at-name svg { width: 20px; height: 20px; }
.cc-gemini .cc-name.is-fill { background-image: var(--cc-fill-gemini); }
.cc-gpt { --cc-tone: var(--color-cc-gpt); --cc-bg: var(--color-cc-gpt-bg); --cc-edge: var(--color-cc-gpt-edge); --cc-turn: var(--color-cc-gpt-turn); --cc-ink: var(--color-cc-gpt-ink); --cc-rule: var(--color-cc-gpt-rule); --cc-line: var(--color-cc-gpt-line); --cc-turn-r: 24px; --cc-a-w: 500; --cc-a-ls: -.012em; }

/* ---- RECORD PASS FIVE (2026-09-29): every page answers one question, and its first screen answers it. The three
   modes hold (a display headline with at most one explainer line, ledger rows, meta lines and strips); each page's
   first screen is held to its list by tests/page_budget.py. */

/* DAY PAGES: the day's reading, the date, the strip, the lead change beside its cards; then every change as a row */
.dy-top { padding-top: var(--lp-s8); }
.dy-top .dy-h { margin-top: 0; max-width: 28ch; }
.dy-when { margin-top: var(--lp-s3); }
.dy-lead { padding-top: var(--lp-s8); }
.dy-lead .ev-h.dy-lead-h { font-size: 26px; line-height: 1.12; max-width: 24ch; }
.dy-lead .ev-h.dy-lead-h a { color: inherit; text-decoration: none; }
.dy-lead .ev-h.dy-lead-h a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.dy-moved { margin-top: var(--lp-s10); padding-top: var(--lp-s6); border-top: 2px solid var(--color-text); }
.dy-moved > .fp-disp-p { margin-top: var(--lp-s3); }
.dy-g { display: flex; align-items: baseline; gap: 10px; margin: var(--lp-s8) 0 0; padding-bottom: 10px;
        border-bottom: 1px solid var(--color-text); font: 700 18px/1.3 var(--font-sans); letter-spacing: -.01em; color: var(--color-text); }
.dy-n { font-family: var(--font-mono); color: var(--color-text-secondary); }
.dy-rows { margin: 0; padding: 0; list-style: none; }
.dy-gap { margin-top: var(--lp-s7); border-top: 1px solid var(--color-text); }
.dy-rows > li { border-bottom: 1px solid var(--color-rule); }
.dy-row, .dy-miss { display: grid; grid-template-columns: 14px 5.5rem 10.5rem minmax(0, 1fr); column-gap: var(--lp-s3);
                    align-items: baseline; padding: 12px 0; }
main a.dy-row { color: var(--color-text); text-decoration: none; }
main a.dy-row:hover .dy-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.dy-row .wm-sev, .dy-miss .wm-sev { align-self: center; }
.dy-m { font-weight: 700; }
.dy-q { font: 500 14px/1.4 var(--font-mono); letter-spacing: -.01em; color: var(--color-text-secondary); white-space: nowrap; }
.dy-t { font-size: 16.5px; line-height: 1.45; }
.dy-miss .dy-t { color: var(--color-text-secondary); }
.dy-note { padding: 12px 0; font-size: 15.5px; line-height: 1.5; color: var(--color-text-secondary); }
.dy-note .notice { margin: 0; }
/* record pass six: a model's pick changes are one folded row; opened, its rows sit under it on the ledger's own columns */
.dy-pk > details > summary { cursor: pointer; list-style: none; }
.dy-pk > details > summary::-webkit-details-marker { display: none; }
.dy-pk > details > summary:hover .dy-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.dy-pk .fold-act { margin-left: 6px; font-size: 14.5px; }
.dy-pk .fold-act .hide, .dy-pk > details[open] .fold-act .show { display: none; }
.dy-pk > details[open] .fold-act .hide { display: inline; }
.dy-pk > details > .dy-rows { border-top: 1px solid var(--color-rule); }
.dy-pk > details > .dy-rows > li:last-child { border-bottom: 0; }
.dy-nav { margin: var(--lp-s7) 0 0; }
@media (max-width: 699.98px) {
  .dy-row, .dy-miss { grid-template-columns: 14px auto minmax(0, 1fr); row-gap: 2px; }
  .dy-row .dy-t, .dy-miss .dy-t { grid-column: 2 / -1; }
}
@media (min-width: 1200px) {
  body.fw .dy-lead { padding-top: clamp(64px, calc(var(--fw) * .045), 96px); }
  body.fw .dy-lead .ev-h.dy-lead-h { font-size: clamp(28px, calc(var(--fw) * .019), 38px); }
  body.fw .dy-moved { margin-top: clamp(96px, calc(var(--fw) * .066), 128px); }
}

/* PROMPT PAGES: the question, then each model across every day */
.pq-top { padding-top: var(--lp-s8); }
.pq-h.fp-disp { max-width: none; }
.pq-cat { margin-top: var(--lp-s3); max-width: 70ch; }
/* record pass six, chunk 5: the question drawn as a card's user turn (a bubble at a reading width), not a full-width slab */
.pq-q { margin: var(--lp-s7) 0 0; }
.pq-q .asked-l { margin: 0 0 8px; font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); color: var(--color-text-secondary); }
.pq-q .ptext { width: fit-content; max-width: 46rem; margin: 0; padding: 12px 20px 13px; border-radius: 22px;
               background: var(--color-chip-neutral); font: 400 17px/1.5 var(--font-sans); white-space: pre-wrap;
               overflow-wrap: anywhere; color: var(--color-text); }
.pq-models { margin-top: var(--lp-s8); }
.pq-rows { margin: 0; padding: 0; list-style: none; }
.pq-m { display: grid; grid-template-columns: 7rem minmax(0, 36rem) minmax(0, 1fr); column-gap: var(--lp-s6);
        align-items: end; row-gap: 8px; padding: 22px 0; border-bottom: 1px solid var(--color-rule); }
.pq-endrow { padding: 0 0 8px; border-bottom: 1px solid var(--color-text); }
.pq-ends { grid-column: 2; display: flex; justify-content: space-between; margin: 0;
           font: 400 11px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-secondary); }
/* record pass six, chunk 5: name, rail and coverage on one line (their feet on one line); the right-answer count is the
   row's second line, at reading size and in ink: on a scored question it is the fact of the page */
.pq-name { grid-column: 1; grid-row: 1; margin: 0; font: 700 22px/1.2 var(--font-sans); letter-spacing: -.015em; }
.pq-cov, .pq-right { margin: 0; font: 500 17px/1.45 var(--font-sans); font-variant-numeric: tabular-nums; }
.pq-cov { color: var(--color-text-secondary); }
.pq-right { color: var(--color-text); font-weight: 600; }
.pq-m > .pq-cov { grid-column: 3; grid-row: 1; }
.pq-m > .pq-right { grid-column: 2 / -1; grid-row: 2; }
.pq-rail { grid-column: 2; grid-row: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 1px;
           height: 40px; padding: 0 1px; border-bottom: 1px solid var(--color-outline); }
.pq-t { flex: 0 1 6px; min-width: 1px; height: 45%; border-radius: 1px 1px 0 0; background: var(--color-text-muted); }
.pq-t.is-change { height: 100%; }
.pq-t.sev-major { background: var(--color-major-solid); }
.pq-t.sev-significant { background: var(--color-significant-solid); }
.pq-t.sev-minor, .pq-t.sev-unknown { background: var(--color-minor-text); }
/* right and wrong by shape, in ink, never a severity colour: a filled tick right, an outlined tick wrong */
.pq-t.is-right { height: 100%; background: var(--color-text); }
.pq-t.is-wrong { height: 100%; border: 1.5px solid var(--color-text); background: var(--color-none); }
/* a day the provider's filter stopped: an outlined square (a neutral state), beside the ring of a day with no response */
.pq-t.is-filter { flex: 0 0 auto; width: 8px; height: 8px; margin-bottom: 4px; border: 1.5px solid var(--color-text-muted);
                  border-radius: 1px; background: var(--color-none); }
.pq-t.is-gap { flex: 0 0 auto; width: 8px; height: 8px; margin-bottom: 4px; border: 1.5px solid var(--color-text-muted); border-radius: 50%;
               background: var(--color-none); }
.pq-key { display: flex; flex-wrap: wrap; gap: 8px var(--lp-s5); margin: var(--lp-s4) 0 0; padding: 0; list-style: none;
          font: 400 12px/1.3 var(--font-mono); letter-spacing: .04em; color: var(--color-text-secondary); }
.pq-key li { display: inline-flex; align-items: flex-end; gap: 8px; }
.pq-key .pq-t { flex: none; width: 5px; height: 12px; }
.pq-key .pq-t:not(.is-change):not(.is-gap):not(.is-right):not(.is-wrong):not(.is-filter) { height: 6px; }
.pq-key .pq-t:is(.is-gap, .is-filter) { width: 8px; height: 8px; margin: 0 0 2px; }
.pq-whole { margin-top: var(--lp-s5); }
.pq-wm + .pq-wm { margin-top: var(--lp-s5); }
.pq-wm .pq-name { font-size: 17px; }
.pq-wm .pq-ends { margin-top: 10px; }
.pq-wm .pq-rail { margin-top: 4px; max-width: 44rem; }
.pq-cutl { font: 600 13px/1.3 var(--font-mono); color: var(--color-text-secondary); }
.pq-lines.pq-samelist { margin-top: var(--lp-s6); border-top: 1px solid var(--color-text); }
.pq-samelist .pq-row { grid-template-columns: 5rem minmax(0, 1fr); padding: 12px 0; border-bottom: 1px solid var(--color-rule); }
.pq-samelist .pq-a { grid-column: 2; white-space: normal; font-size: 17px; }
.pq-days > .ev-folds { margin-top: var(--lp-s6); }
.pq-days { margin-top: var(--lp-s10); padding-top: var(--lp-s6); border-top: 2px solid var(--color-text); }
@media (min-width: 1200px) { body.fw .pq-days { margin-top: clamp(96px, calc(var(--fw) * .066), 128px); } }
.pq-dlist, .pq-lines { margin: 0; padding: 0; list-style: none; }
.pq-dlist { margin-top: var(--lp-s6); border-top: 1px solid var(--color-text); }
.pq-day { display: grid; grid-template-columns: 5rem minmax(0, 1fr); column-gap: var(--lp-s4); padding: 10px 0;
          border-bottom: 1px solid var(--color-rule); }
.pq-d { margin: 0; padding-top: 3px; font: 500 14px/1.4 var(--font-mono); color: var(--color-text-secondary); }
.pq-row { display: grid; grid-template-columns: 5rem 14px minmax(0, 1fr); column-gap: var(--lp-s3); align-items: baseline; padding: 3px 0; }
.pq-mn { grid-column: 1; font-weight: 700; }
.pq-sev { grid-column: 2; align-self: center; }
.pq-a { grid-column: 3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-body);
        font-size: 15.5px; line-height: 1.5; }
main a.pq-row { color: var(--color-text); text-decoration: none; }
main a.pq-row:hover .qq { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pq-a .q-text, .pq-a .qq { display: inline; }
.pq-a .qq::before, .pq-a .qq::after { content: none; }
.pq-a.is-none { color: var(--color-text-secondary); }
.pq-o { font: 600 13px/1.3 var(--font-mono); letter-spacing: .02em; color: var(--color-text-secondary); }
.pq-folds { margin-top: var(--lp-s9); }
@media (max-width: 699.98px) {
  .pq-m { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .pq-m > * { grid-column: 1 !important; grid-row: auto !important; }
  .pq-day { grid-template-columns: minmax(0, 1fr); }
  .pq-row { grid-template-columns: 4.5rem 14px minmax(0, 1fr); }
  .pq-a { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
}
@media (min-width: 1200px) {
  body.fw .pq-top { padding-top: clamp(64px, calc(var(--fw) * .045), 96px); }
  body.fw .pq-m { grid-template-columns: 8rem minmax(0, 44rem) minmax(0, 1fr); }
  body.fw .pq-q .ptext { font-size: clamp(17px, calc(var(--fw) * .0105), 20px); }
}

/* RESPONSE PAGES: the card at full length, then one strip and two links */
.rp-card { padding-top: var(--lp-s7); }
/* record pass six: the first-screen height rule is gone (it stretched the cards and left empty ground on a quiet day and
   on every prompt page). A first-screen group takes its own height and the next section starts at the rhythm its own
   margin sets; tests/page_budget.py holds what may show on the first screen. */
/* record pass six, chunk 5: the card at a card's width in the pair (720px), centred, with "Question N" and the day above it;
   the strip, the links and the folds on the same column */
.rp-card > .cc, .rp-kick, .rp-meta, .rp-folds { max-width: 720px; margin-left: auto; margin-right: auto; }
.rp-kick { margin-bottom: var(--lp-s4); }
.rp-kick .rp-q { font-weight: 700; }
/* the speaker line outranks the model's own headings: 24px, then the headings at 21, 19 and 17.5 over 17px body */
h1.cc-who { width: 100%; max-width: none; margin: 0; font: 700 24px/1.25 var(--font-sans); letter-spacing: -.015em; }
.cc-say.cc-full { color: var(--cc-ink); }
.cc-full .resp { font-size: 17px; line-height: 1.55; color: var(--cc-ink); }
.cc-full .resp strong { font-weight: 650; }
.cc-full .resp .mh { margin: 1.3em 0 .4em; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--cc-ink); }
.cc-full .resp .mh1 { font-size: 21px; }
.cc-full .resp .mh2 { font-size: 19px; }
.cc-full .resp .mh3 { font-size: 17.5px; }
.cc-full .resp blockquote { padding-left: 12px; border-left: 2px solid var(--cc-edge); }
/* code in the card's own tone (its user turn's fill), not a cool box in a warm card; rules drawn in the card's line tone */
.cc .resp pre.code { border-color: transparent; background: var(--cc-turn); color: var(--cc-ink); }
.cc .resp code { background: var(--cc-turn); }
.cc .resp :is(th, td, hr) { border-color: var(--cc-line); }
.rp-strip .rp-i { white-space: nowrap; }
.cc-turn { margin: var(--lp-s4) 0 6px; font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); color: var(--color-text-secondary); }
.cc-turn:first-child { margin-top: 0; }
.cc.is-full .cc-q .ptext { -webkit-line-clamp: unset; display: block; white-space: pre-wrap; }
/* 2026-10-05: the strip starts at the site's rhythm (40px, tests/page_budget.py RHYTHM) under the card: on a failed
   request's page the card is short and the strip is on the first screen, where a section after the first group
   shows only at that distance */
.rp-meta { margin-top: var(--lp-s8); padding-top: var(--lp-s4); border-top: 1px solid var(--color-text); }
.rp-strip { margin: 0; overflow-wrap: anywhere; }
.rp-go { display: flex; flex-wrap: wrap; gap: 6px var(--lp-s6); margin: var(--lp-s4) 0 0; font-size: 16px; font-weight: 600; }
.rp-folds { margin-top: var(--lp-s7); }
@media (min-width: 1200px) {
  body.fw .rp-card { padding-top: clamp(48px, calc(var(--fw) * .035), 80px); }
}

/* ABOUT: the one sentence, the why beside it, the record as a strip, three ledger rows */
.ab-top { padding-top: var(--lp-s8); }
.ab-h.fp-disp { max-width: 22ch; }
.ab-why { margin: var(--lp-s5) 0 0; max-width: 60ch; font-size: 18px; line-height: 1.55; color: var(--color-text-secondary); }
.ab-strip { margin-top: var(--lp-s8); grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ab-rows { margin: var(--lp-s4) 0 0; padding: 0; list-style: none; }
.ab-row { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); column-gap: var(--lp-s6); padding: var(--lp-s4) 0;
          border-bottom: 1px solid var(--color-rule); }
.ab-k { margin: 0; font: 700 18px/1.35 var(--font-sans); letter-spacing: -.01em; }
.ab-v { margin: 0; max-width: 70ch; font-size: 16.5px; line-height: 1.55; color: var(--color-text-secondary); }
@media (max-width: 699.98px) {
  .ab-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-strip .run-c:nth-child(n+3) { border-top: 1px solid var(--color-rule); }
  .ab-row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
}
@media (min-width: 1200px) {
  body.fw .ab-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: var(--a-gap);
                    align-items: end; padding-top: clamp(64px, calc(var(--fw) * .045), 96px); }
  body.fw .ab-why { margin: 0; padding-left: var(--lp-s7); border-left: 1px solid var(--color-rule);
                    font-size: clamp(17px, calc(var(--fw) * .0105), 21px); }
  body.fw .ab-strip .run-n { font-size: clamp(40px, calc(var(--fw) * .028), 56px); }
}

/* /alerts/: the WEEK-OLD BRIEF, centred at the email's own width, the page's rules either side meeting its top edge,
   labelled with its day above and below (record pass six, chunk 6) */
.bs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px) minmax(0, 1fr); align-items: start; }
.bs > * { grid-column: 2; }
.bs::before, .bs::after { content: ""; grid-row: 2; align-self: start; margin-top: 0; border-top: 1px solid var(--color-rule); }
.bs::before { grid-column: 1; margin-right: var(--lp-s5); }
.bs::after { grid-column: 3; margin-left: var(--lp-s5); }
.bs .bs-mail { width: 100%; max-width: 600px; margin: 0; }
.wm + .bs, .al-top + .bs, .bs { border-top: 0; padding-top: 0; }
.bs-label { margin: 0; padding: 12px 0; font-size: 14.5px; line-height: 1.5; text-align: center; color: var(--color-text-secondary); }
@media (max-width: 699.98px) {
  .bs { grid-template-columns: minmax(0, 1fr); }
  .bs > * { grid-column: 1; }
  .bs::before, .bs::after { content: none; }
}

/* ---- RECORD PASS SIX (2026-09-29): the shared layout. The pair side by side is THE PAIR (after THE CHAT CARDS). */

/* THE CARD'S WORDS. The build cuts them at a word to what the card's lines hold (card_excerpt), so the card's own
   ellipsis ends them; the height below is only a safety net and hides whole lines. Nothing here moves: the site's two
   motions are the only ones. Code is code: mono, each line its own, as written. A run of table rows is a small table
   that scrolls sideways on a narrow card. */
.cc-l.is-code { font: 400 14.5px/1.55 var(--font-mono); letter-spacing: 0; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; }
.cc-l.is-code + .cc-l.is-code { margin-top: 0; }
.cc-tbl { display: flex; overflow-x: auto; margin: .3em 0; overscroll-behavior-x: contain; }
.cc-tt { display: table; flex: none; border-collapse: collapse; font-size: 14.5px; line-height: 1.4; }
.cc-tr { display: table-row; }
.cc-td { display: table-cell; padding: 3px 16px 3px 0; white-space: nowrap; border-top: 1px solid var(--cc-rule); }
.cc-tr:first-child > .cc-td { border-top: 0; font-weight: 650; }
/* A TABLE'S EDGE, on the cards, the full answers and the response page: the right edge fades, so a table wider than its
   column shows there is more; a 32px spacer ends every table, so scrolled to its end (or narrower than its column) the
   fade lies over the spacer and nothing of the table stays hidden. Not on the landing, whose phone layout is frozen. */
:is(.cc-tbl, html:not(.lp) .resp .mdt) { -webkit-mask-image: linear-gradient(to right, var(--color-text) calc(100% - 32px), transparent);
                           mask-image: linear-gradient(to right, var(--color-text) calc(100% - 32px), transparent); }
html:not(.lp) .resp .mdt { display: flex; overscroll-behavior-x: contain; }
html:not(.lp) .resp .mdt > table { flex: none; }
:is(.cc-tbl, html:not(.lp) .resp .mdt)::after { content: ""; flex: 0 0 32px; }
/* the question turn: two lines from 700px; on a phone four, so a question like Question 48's keeps its point */
@media (max-width: 699.98px) { .cc-q .ptext { -webkit-line-clamp: 4; } }

/* THE GROUND reaches the window's bottom on a page shorter than the window */
:is(body:has(.fp-hero), html:not(.md):not(.lp) body.fw) { min-height: 100vh; }

/* THE FOOTER'S LINKS wrap between links, never inside one ("The brief" on two lines at 390); the row gap keeps each
   link's 44px target clear of the next row's */
.foot-links { flex-wrap: wrap; row-gap: 28px; }
.foot-links a { white-space: nowrap; }

/* NAVIGATION, minimal: the day's link at the top of an event page, the previous and next day at the top of a day page */
.ev-day, .dy-nav-top { margin: 0 0 var(--lp-s4); }

/* ---- CHUNK 3: the front page and the day pages ---- */

/* THE FRONT PAGE'S HERO: the tagline, and today's reading big directly under it, second only to the tagline (Brad's
   call). The two method paragraphs that stood beside the tagline live on About now. What moved's headline steps down a
   size so the reading outranks it. */
.fp-hero > .fp-now { margin: var(--lp-s6) 0 0; max-width: 30ch; font: 700 30px/1.12 var(--font-sans); letter-spacing: -.022em;
                     color: var(--color-text); text-wrap: balance; }
@media (min-width: 700px) { .fp-hero > .fp-now { font-size: 36px; } }
.fp-wm .wm-h.fp-disp { font-size: 24px; line-height: 1.15; }
@media (min-width: 700px) { .fp-wm .wm-h.fp-disp { font-size: 28px; } }
@media (min-width: 1200px) {
  body:has(.fp-hero) .fp-hero { display: block; padding-top: var(--lp-s8); }
  body:has(.fp-hero) .fp-hero > .fp-eyebrow { margin-bottom: var(--lp-s6); }
  body:has(.fp-hero) .fp-hero > .fp-now { margin: var(--lp-s6) 0 0; padding: 0; border: 0; max-width: 34ch;
                                          font-size: clamp(48px, calc(var(--fw) * .034), 64px); }
  body:has(.fp-hero) .fp-wm { margin-top: clamp(48px, calc(var(--fw) * .036), 88px); padding-top: var(--lp-s6); }
  body:has(.fp-hero) .fp-wm .wm-h.fp-disp { max-width: 50ch; font-size: clamp(28px, calc(var(--fw) * .02), 38px); }
  body:has(.fp-hero) .fp-wm .wm-say > .fp-disp-p { max-width: 56em; margin-top: var(--lp-s3); font-size: clamp(17px, calc(var(--fw) * .0118), 21px); }
  body:has(.fp-hero) .fp-wm .wm-lead.has-cards > .cc-pair { margin-top: var(--lp-s6); }
}

/* A RESPONSE-TIME CHANGE'S CARDS show the two times, large, and the usual range: the answer's words cannot show it */
.cc-say.cc-time { display: flex; flex-direction: column; gap: 8px; color: var(--cc-ink); }
.cc-big { font: 700 40px/1.05 var(--font-sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cc-tl { max-width: 34ch; font-size: 16.5px; line-height: 1.45; }
@media (min-width: 700px) { .cc-big { font-size: 48px; } .cc-tl { font-size: 17px; } }
/* record pass six, chunk 4: on an event page the day's answer follows its number, as context; a filter's note is the
   card's first line, before the cut */
.cc-say.cc-ctx { margin-top: 20px; }
.cc-note.is-first { margin: 0 0 10px; }

/* THE OFFER (record pass six, chunk 4): the one pricing block. The promise on the left, the price and the one filled
   button on the right, the founding place as one line under a thin rule, and one line under both */
.offer { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--lp-s6); margin-top: var(--lp-s9);
         padding-top: var(--lp-s7); border-top: 2px solid var(--color-text); }
.of-h { margin: 0; max-width: 30ch; font: 700 26px/1.2 var(--font-sans); letter-spacing: -.02em; color: var(--color-text); }
.of-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 6px; margin: 0; }
.of-amt { font: 700 56px/1 var(--font-sans); letter-spacing: -.035em; color: var(--color-text); }
.of-per { max-width: 40ch; font-size: 16px; line-height: 1.45; color: var(--color-text-secondary); }
.of-buy > .of-go { margin-top: var(--lp-s5); min-height: 48px; padding: 12px 22px; font: 700 16px/1.2 var(--font-sans);
                   border-radius: var(--lp-r-control); }
.of-life { margin: var(--lp-s5) 0 0; padding-top: var(--lp-s4); border-top: 1px solid var(--color-rule); font-size: 15px;
           line-height: 1.5; color: var(--color-text-secondary); }
.of-free { margin: 0; font-size: 15px; line-height: 1.5; color: var(--color-text-secondary); }
@media (min-width: 900px) {
  .offer { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: var(--lp-s9); align-items: start; }
  .of-h { font-size: 34px; }
  .of-free { grid-column: 1 / -1; }
}

/* record pass six, chunk 6: the offer inside the purple field (the record page and /alerts/) takes the field's tokens
   and the field's width; on the record the week-old brief's item sits under the promise */
.br-field > .offer { grid-column: 1 / -1; margin: 0; padding: 0; border-top: 0; }
.of-say .br-look { margin-top: var(--lp-s6); padding-top: var(--lp-s5); border-top: 1px solid var(--color-rule); max-width: 60ch; }
.br-look-go { margin: var(--lp-s3) 0 0; font-size: 15.5px; }
.br-look-go a { font-weight: 600; }
/* /alerts/: the weekly's submit as a text link, so the offer is the page's one filled button */
.fj-link { align-self: center; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--color-link, var(--color-primary));
           font: 600 16px/1.2 var(--font-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* THE GRID says what differs: the rows nominal on every model are one line under it */
.gd-rest { display: flex; align-items: baseline; gap: 10px; margin: var(--lp-s5) 0 0; padding: 12px 0; border-bottom: 1px solid var(--color-rule);
           font-size: 15.5px; line-height: 1.5; color: var(--color-text-secondary); }
.gd-rest > .gd-c { flex: none; transform: translateY(1px); }
.fp-models .gd-wrap + .gd-rest { margin-top: 0; }
/* a cell's word may sit under its dot on a phone, never be cut ("driftin") */
@media (max-width: 52rem) { .fp-models .gd .gd-c { flex-wrap: wrap; row-gap: 2px; } }

/* THE STRIP, three cells (the run's length left): on the front page it sits in the models section, under its headline */
.fp-run:not(.ab-strip) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp-models > .fp-run { margin-top: var(--lp-s6); }
@media (max-width: 52rem) {
  .fp-run:not(.ab-strip) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-run:not(.ab-strip) > .run-c:first-child { grid-column: 1 / -1; }
  .fp-run:not(.ab-strip) > .run-c:nth-child(n+2) { border-top: 1px solid var(--color-rule); }
}
@media (min-width: 1200px) { body:has(.fp-hero) .fp-models > .fp-run .run-n { font-size: clamp(34px, calc(var(--fw) * .024), 48px); } }

/* DAY PAGES. "Every change" and "Missing responses" are section rules over their rows, not display headlines; a partial
   day's missing responses come first, in ink; major and significant rows carry their own weight; the smaller rows sit
   under the pick lines, open from 700px and folded on a phone with their count in the fold's line. */
.dy-sec { margin: 0; padding-top: 14px; border-top: 2px solid var(--color-text); font: 700 22px/1.25 var(--font-sans);
          letter-spacing: -.015em; color: var(--color-text); }
.dy-sec .dy-n { font-size: .8em; font-weight: 500; }
.dy-said { margin: 8px 0 0; max-width: 70ch; font-size: 16px; line-height: 1.5; color: var(--color-text-secondary); }
.dy-missing, .dy-moved { margin-top: var(--lp-s10); padding-top: 0; border-top: 0; }
.dy-missing + .dy-moved { margin-top: var(--lp-s9); }
.dy-missing .dy-gap { margin-top: var(--lp-s4); }
.dy-miss .dy-t { color: var(--color-text); }
.dy-g.is-big { font-size: 20px; }
.dy-rows.is-big .dy-row { padding: 16px 0; }
.dy-rows.is-big .dy-m { font-size: 18px; }
.dy-rows.is-big .dy-t { font-size: 18.5px; line-height: 1.4; font-weight: 600; letter-spacing: -.008em; }
/* the dot sits on the row's first line, not the middle of a two-line row */
.dy-row .wm-sev, .dy-miss .wm-sev { align-self: start; display: flex; align-items: center; height: calc(16.5px * 1.45); }
.dy-rows.is-big .dy-row .wm-sev { height: calc(18.5px * 1.4); }
.dy-fold > summary { display: block; padding: 12px 0; border-bottom: 1px solid var(--color-rule); cursor: pointer; list-style: none; }
.dy-fold > summary::-webkit-details-marker { display: none; }
.dy-fold > summary:hover .dy-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.dy-fold > summary .dy-t { font-weight: 600; }
.dy-fold .fold-act { margin-left: 6px; font-size: 14.5px; }
.dy-fold .fold-act .hide, .dy-fold[open] .fold-act .show { display: none; }
.dy-fold[open] .fold-act .hide { display: inline; }
@media (min-width: 700px) {
  .dy-fold > summary { display: none; }
  .dy-fold::details-content { display: block; content-visibility: visible; }
}
@media (min-width: 1200px) {
  body.fw .dy-missing, body.fw .dy-moved { margin-top: clamp(64px, calc(var(--fw) * .05), 112px); }
  body.fw .dy-missing + .dy-moved { margin-top: clamp(48px, calc(var(--fw) * .04), 88px); }
  body.fw .dy-lead .ev-h.dy-lead-h { max-width: 52ch; }
}
.br-field {
  color-scheme: dark;
  --color-field-a: #4d006e;
  --color-field-mid: #8f00bd;
  --color-field-c: #6f009d;
  --color-text: #ffffff;
  --color-text-body: #ffffff;
  --color-text-secondary: #f1e3f8;
  --color-text-muted: #f1e3f8;
  --color-text-faint: #f1e3f8;
  --color-rule: rgba(255, 255, 255, 0.28);
  --color-rule-soft: rgba(255, 255, 255, 0.28);
  --color-link: #ffffff;
  --color-link-hover: #ffffff;
  --color-link-underline: rgba(255, 255, 255, 0.6);
  --color-focus: #ffffff;
  --color-primary: #ffffff;
  --color-primary-hover: #f1e3f8;
  --color-on-primary: #6f009d;
}

/* The landing page at 900px and up (design/V0_CONTRACT.md §1, §3): the gutter opens to 48px, chapters separate by
   96px of padding either side of their rule (64 for the quietest chapter, 128 inside the hero), and the two-column
   objects appear - the hero beside the framed question, the plate's question beside its answers, the method's steps,
   the two plates. The type steps up one rung; the ladder itself does not change. */
@media (min-width: 900px) {
  html.lp { --lp-header-gutter: 48px; --lp-chapter-pad: 96px; --lp-hero-pad: 128px;
            --lp-t-lead: 20px; --lp-t-h3: 24px; --lp-t-h2: 34px; --lp-t-h1: 48px; --lp-t-display: 66px;
            --lp-pad-plate: var(--lp-s7); --lp-pad-ledger: var(--lp-s5); }
  .lp-hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); column-gap: 80px; align-items: end; }
  /* row one pairs the status label with the countdown on one baseline; the countdown starts on the premise's text
     edge (its rule and inset), so it hangs from the grid instead of floating at the page's right */
  .lp-hero > .lp-kicker { grid-column: 1; grid-row: 1; align-self: baseline; }
  .lp-hero > .lp-count { grid-column: 2; grid-row: 1; align-self: baseline; margin-top: 0; padding-left: calc(var(--lp-s7) + 1px); }
  .lp-hero-say { grid-column: 1; grid-row: 2; }
  .lp-hero > .lp-premise { grid-column: 2; grid-row: 2; }
  .lp-premise { margin-top: 0; padding-left: var(--lp-s7); }
  .lp-head > .lp-aside { display: block; }
  .lp-plate:not(.is-tint) { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
  .lp-plate-ask { border-bottom: 0; border-right: 1px solid var(--color-lp-hairline); }
  .lp-bubbles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-method { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: var(--lp-s12); align-items: start; }
  .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lp-s7); margin-top: 0; }
  .lp-plate-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-trust { padding-top: var(--lp-s10); padding-bottom: var(--lp-s10); }
  .lp-trust-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--lp-s5); padding-left: var(--lp-s7); }
  .lp-trust-in > .lp-aside { margin-top: 0; text-align: right; }
  .lp-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; column-gap: var(--lp-s6); }
  .lp-panel > * { grid-column: 1 / -1; }
  .lp-panel > .lp-side-a { grid-column: 1; }
  .lp-panel > .lp-side-b { grid-column: 2; }
  .lp-closer .lp-form { flex-direction: row; flex-wrap: wrap; }
  .lp-closer .lp-input { flex: 1 1 160px; min-width: 0; width: auto; }
  .lp-closer .lp-form .signup-msg { flex-basis: 100%; }
  .lp-foot { flex-wrap: nowrap; }
  .lp-credit { text-align: right; }
}

/* methodology in the landing product. The record's components are reskinned by redefining the record's colour tokens
   on html.md (TOKENS_MD_DARK / TOKENS_MD_LIGHT, which also carry the landing tokens). It follows the preference like
   every page since the compression pass.
   Structural pass (2026-09-16, design/BLOWUP_AUDIT.md §5.7): the page runs on the landing's scales. Four type roles -
   page title (--lp-t-h2), section title (--lp-t-h3), table caption (body, 600), body - so a section title sits a clear
   step above a table caption; running prose is held to --lp-measure; sections are separated by the page's own section
   rhythm; the contents nav is the compressed control (44px, one hairline, 10px radius); the two scoring tables share
   row heights. */
html.md body { font: 400 var(--lp-t-body)/1.6 var(--font-sans); }
html.md .wrap { max-width: calc(var(--max-width) + 2 * var(--gutter)); margin: 0 auto; }
html.md a { color: var(--color-lp-brand-tint); text-decoration-color: var(--color-lp-brand-tint); }
html.md a:hover { color: var(--color-lp-link-hover); }
html.md main > h1 { margin-top: var(--lp-s8); font: 700 var(--lp-t-h2)/1.1 var(--font-sans); letter-spacing: -.025em; color: var(--color-lp-ink); }
html.md .lede { max-width: var(--lp-measure); margin-top: var(--lp-s4); font: 400 var(--lp-t-lead)/1.5 var(--font-sans); color: var(--color-lp-dek); }
/* Desktop pass, part two (2026-09-24): no boxes. The contents are a plain list of links (four to a row, a sticky strip
   on a phone, a quiet side index from 1200px) and each section opens on a rule under its heading, like every other page.
   The cards read three tokens nothing defined (--lp-section-margin, --lp-section-pad, --lp-card-pad), so they had no
   padding and "1." sat clipped against the card's edge; the rules below use the spacing ladder, which is defined. */
html.md .toc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--lp-s5); margin-top: var(--lp-s7);
               border-top: 1px solid var(--color-lp-hairline); border-bottom: 1px solid var(--color-lp-hairline); }
html.md .toc a { display: flex; align-items: center; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none;
                 font: 600 var(--lp-t-small)/1.3 var(--font-sans);
                 color: var(--color-lp-secondary); text-decoration: none; }
html.md .toc a:hover { color: var(--color-lp-ink); text-decoration: underline; text-underline-offset: 4px; }
html.md .doc { margin-top: var(--lp-s10); padding: var(--lp-s6) 0 0; border: 0; border-top: 1px solid var(--color-lp-hairline);
               border-radius: 0; background: none; box-shadow: none;
               scroll-margin-top: calc(var(--lp-header-h) + var(--lp-s4)); }
/* the digest and the command that checks it are one string each: they scroll inside their own line, never wrap mid-string */
html.md .doc .md-verify { max-width: none; margin: var(--lp-s4) 0 var(--lp-s5); padding: var(--lp-s3) 0; overflow-x: auto;
                          white-space: nowrap; border-top: 1px solid var(--color-lp-hairline); border-bottom: 1px solid var(--color-lp-hairline); }
html.md .doc .md-verify .hash { overflow-wrap: normal; }
html.md .doc h2 { margin: 0 0 var(--lp-s4); font: 700 var(--lp-t-h3)/1.25 var(--font-sans); letter-spacing: -.015em; color: var(--color-lp-ink); }
html.md .doc h3 { margin: var(--lp-s6) 0 var(--lp-s3); font: 600 var(--lp-t-body)/1.35 var(--font-sans); letter-spacing: 0; color: var(--color-lp-ink); }
html.md .doc p, html.md .doc li, html.md .doc dd { max-width: var(--lp-measure); font-size: var(--lp-t-body); line-height: 1.6; color: var(--color-lp-secondary); }
html.md .doc strong { color: var(--color-lp-ink); }
html.md .doc .scroll { max-width: none; }
html.md .doc .mono, html.md .doc .hash, html.md .doc .dim { font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); line-height: 1.8; color: var(--color-lp-muted); }
html.md .doc .mono a { font: inherit; letter-spacing: inherit; }
html.md table.vt { font: 400 var(--lp-t-small)/1.5 var(--font-sans); color: var(--color-lp-secondary); }
html.md table.vt th[scope="col"] { font: var(--lp-label-section); letter-spacing: var(--lp-label-section-track); color: var(--color-lp-muted); }
html.md table.vt .inl, html.md table.vt th[scope="row"] { font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); color: var(--color-lp-ink); }
html.md table.vt .inl a, html.md table.vt .inl .unlinked { font: inherit; letter-spacing: inherit; }
html.md table.vt .prose { font: 400 var(--lp-t-small)/1.5 var(--font-sans); color: var(--color-lp-secondary); }
html.md .chip { font: var(--lp-label-chip); letter-spacing: var(--lp-label-chip-track); }
html.md dl.meta dt { font: var(--lp-label-section); letter-spacing: var(--lp-label-section-track); color: var(--color-lp-muted); }
html.md dl.meta dd { font-size: var(--lp-t-body); }
html.md .foot-prov { font: var(--lp-label-meta); letter-spacing: var(--lp-label-meta-track); line-height: 1.8; color: var(--color-lp-muted); }
html.md .foot-links { font: 600 var(--lp-t-body)/18px var(--font-sans); }
.md-top { margin-top: var(--lp-s4); }
html.md .md-top a { display: inline-flex; align-items: center; min-height: 44px; font: 600 var(--lp-t-body)/1.2 var(--font-sans); }
/* the scoring pair: side by side, the two tables' captions and rows are items of ONE grid (the row count is written
   at build time, below), so row n of the left table and row n of the right share a height and their rules line up */
@media (min-width: 40.01rem) {
  html.md .pair { grid-auto-flow: column; column-gap: var(--lp-s5); }
  html.md .pair > div, html.md .pair .scroll, html.md .pair table, html.md .pair tbody { display: contents; }
  html.md .pair tr { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); }
  html.md .pair h3 { align-self: end; }
}
/* From 1200px the page takes the front page's frame (body.fw) and the contents become a quiet side index beside the
   sections, sticky under the header; the title sits on the frame's left edge and the page no longer needs its
   "Back to top" links, because the index is always in view. */
@media (min-width: 1200px) {
  html.md main > h1 { font-size: clamp(44px, calc(var(--fw) * .03), 64px); }
  html.md .md-body { display: grid; grid-template-columns: 13rem minmax(0, 1fr); column-gap: var(--a-gap); align-items: start; }
  html.md .toc { position: sticky; top: calc(var(--lp-header-h) + var(--lp-s6)); display: flex; flex-direction: column;
                 margin-top: var(--lp-s10); padding-top: var(--lp-s6); border-bottom: 0; overflow: visible; }
  html.md .md-top { display: none; }
}
@media (max-width: 899px) {
  html.md .toc { position: sticky; top: var(--lp-header-h); z-index: 5; display: flex; flex-wrap: nowrap; margin: var(--lp-s4) calc(-1 * var(--gutter)) 0;
                 padding: var(--lp-s2) var(--gutter); overflow-x: auto; border-bottom: 1px solid var(--color-lp-hairline); background: var(--color-lp-page); }
  html.md .toc a { flex: none; }
  html.md .toc { gap: 0 var(--lp-s5); border-top: 0; }
  /* below the masthead AND the sticky contents strip (8 + 44 + 8 + its hairline) */
  html.md .doc { scroll-margin-top: calc(var(--lp-header-h) + 61px + var(--lp-s4)); }
}
@media (min-width: 40.01rem) { html.md .pair { grid-template-rows: repeat(11, auto); } }
@media print {
  :root, html.theme-dark, html:not(.theme-light) {
    color-scheme: light;
    --color-page: #f4f5f7;
    --color-surface: #ffffff;
    --color-surface-sunken: #eef0f4;
    --color-surface-accent: #e8eefd;
    --color-border: #e3e6eb;
    --color-rule: #e3e6eb;
    --color-rule-soft: #e3e6eb;
    --color-border-accent: #e3e6eb;
    --color-border-control: #e3e6eb;
    --color-outline: #c3c8d0;
    --color-chip-neutral: #eef0f4;
    --color-text: #15171b;
    --color-text-body: #15171b;
    --color-text-secondary: #4c525c;
    --color-text-muted: #666c76;
    --color-text-faint: #666c76;
    --color-link: #8f00bd;
    --color-link-hover: #15171b;
    --color-link-underline: rgba(143, 0, 189, 0.45);
    --color-focus: #8f00bd;
    --color-logo-dot: #a400d8;
    --color-nav-hover-bg: #eef0f4;
    --color-primary: #a400d8;
    --color-primary-hover: #15171b;
    --color-on-primary: #fbfcfe;
    --color-secondary-bg: #ffffff;
    --color-secondary-text: #15171b;
    --color-secondary-border: #e3e6eb;
    --color-secondary-hover-bg: #eef0f4;
    --color-secondary-hover-border: #e3e6eb;
    --color-soft-bg: #e8eefd;
    --color-soft-text: #8f00bd;
    --color-soft-hover-bg: #8f00bd;
    --color-soft-hover-text: #fbfcfe;
    --color-ok-bg: #e2f4ea;
    --color-ok-text: #17724a;
    --color-ok-dot: #17724a;
    --color-ok-bar: #17724a;
    --color-bar-track: #eef0f4;
    --color-major-bg: #ffe8e4;
    --color-major-text: #b00a1d;
    --color-major-solid: #b00a1d;
    --color-significant-bg: #fdecd8;
    --color-significant-text: #8a4708;
    --color-significant-solid: #8a4708;
    --color-on-severity-solid: #ffffff;
    --color-minor-bg: #eef0f4;
    --color-minor-text: #4c525c;
    --color-mark-bg: #d6e4ff;
    --color-cell-empty: #eef0f4;
    --color-custody-text: #666c76;
    --color-none: transparent;
    --shadow-raised: 0 8px 24px rgba(21, 23, 27, 0.06);
    --shadow-card: 0 1px 2px rgba(21, 23, 27, 0.04);
    --shadow-card-hover: 0 10px 26px rgba(21, 23, 27, 0.10);
    --color-lp-page: #f5f6f8;
    --color-lp-card: #ffffff;
    --color-lp-panel: #ffffff;
    --color-lp-control: #e9ebf0;
    --color-lp-bubble: #e9ebf0;
    --color-lp-foot: #f5f6f8;
    --color-lp-hairline: #dee1e7;
    --color-lp-card-border: #dee1e7;
    --color-lp-control-border: #dee1e7;
    --color-lp-foot-rule: #dee1e7;
    --color-lp-ink: #15171b;
    --color-lp-quote: #3d434d;
    --color-lp-secondary: #3d434d;
    --color-lp-dek: #3d434d;
    --color-lp-strip-value: #3d434d;
    --color-lp-muted: #5f6570;
    --color-lp-faint: #6b717c;
    --color-lp-brand: #8f00bd;
    --color-lp-brand-hover: #7a00a3;
    --color-lp-brand-tint: #8f00bd;
    --color-lp-link-hover: #15171b;
    --color-lp-quiet-solid: #146b44;
    --color-lp-quiet-text: #146b44;
    --color-lp-disclosure: #e9ebf0;
    --color-lp-major-after: #e9ebf0;
    --color-lp-significant-after: #e9ebf0;
    --color-lp-major-after-text: #3d434d;
    --color-lp-significant-after-text: #3d434d;
    --color-lp-disclosure-text: #3d434d;
    --color-lp-on-brand: #ffffff;
    --color-lp-on-brand-soft: #ffffff;
    --color-lp-brand-band-meta: #ffffff;
    --color-lp-disclosure-border: #dee1e7;
    --color-lp-major-solid: #b0101d;
    --color-lp-major-text: #b0101d;
    --color-lp-major-after-border: #b0101d;
    --color-lp-major-after-label: #b0101d;
    --color-lp-significant-solid: #7f4f00;
    --color-lp-significant-edge: #7f4f00;
    --color-lp-significant-text: #7f4f00;
    --color-lp-significant-after-border: #7f4f00;
    --lp-label-meta: 500 12px/1.35 var(--font-mono);
    --lp-label-meta-track: .04em;
    --lp-label-section: 600 12px/1.35 var(--font-mono);
    --lp-label-section-track: .12em;
    --lp-label-chip: 700 12px/1.2 var(--font-mono);
    --lp-label-chip-track: .06em;
    --color-claim-accent: #8f00bd;
    --color-claim-second: #3d434d;
  }
}