/* tuf-tuf-tufte-3000 — Tufte-style document/dashboard system.
   Targets: current pre-releases of Safari (Technology Preview) and Chrome (Canary).
   Everything degrades progressively; nothing here requires JavaScript.
   Rules of the house (enforced by ./lint):
   — logical properties only, no floats, no !important, no @import, no uppercase,
   — colors exist once, as oklch() pairs inside light-dark(), in the tokens layer,
   — every animation lives behind prefers-reduced-motion,
   — sidenotes are grid-placed semantic <aside>s, not checkbox hacks. */

@layer reset, tokens, base, layout, sidenotes, typography, components, charts, forms, media, motion, print, utilities;

/* Text face: EB Garamond (variable, wght 400–800 + italic). The Aldine line —
   Griffo's Bembo begat Garamond begat this — which makes it ET Book's heir with
   working small caps, text figures, and a weight axis. OFL; see fonts/OFL.txt. */
@font-face {
   font-family: "EB Garamond";
   font-style: normal;
   font-weight: 400 800;
   font-display: swap;
   src: url("fonts/EBGaramond-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: "EB Garamond";
   font-style: normal;
   font-weight: 400 800;
   font-display: swap;
   src: url("fonts/EBGaramond-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: "EB Garamond";
   font-style: italic;
   font-weight: 400 800;
   font-display: swap;
   src: url("fonts/EBGaramond-Italic-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: "EB Garamond";
   font-style: italic;
   font-weight: 400 800;
   font-display: swap;
   src: url("fonts/EBGaramond-Italic-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;
}
/* Data face: Berkeley Mono, licensed per seat — never committed to the repo.
   local() picks it up wherever it is installed; everyone else gets ui-monospace. */
@font-face {
   font-family: "Berkeley Mono";
   font-style: normal;
   font-weight: 400 700;
   font-display: swap;
   src: local("Berkeley Mono"), local("BerkeleyMono-Regular");
}

@layer reset {
   *, *::before, *::after { box-sizing: border-box; }
   * { margin: 0; }
   html { text-size-adjust: 100%; interpolate-size: allow-keywords; }
   img, svg, video, canvas, iframe { display: block; max-inline-size: 100%; block-size: auto; }
   input, button, textarea, select { font: inherit; color: inherit; }
   p, h1, h2, h3, h4, li, dd, figcaption { overflow-wrap: break-word; }
   :target { scroll-margin-block: 5rlh; }
}

@layer tokens {
   :root {
      color-scheme: light dark;

      /* type */
      --font-serif: "EB Garamond", Charter, Georgia, serif;
      --font-mono: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace;
      /* Role slots for the .type-* vocabulary. They resolve to the book serif so
         the system still makes no third-party request; a project that self-hosts a
         display or slab face repoints these two and nothing else. */
      --font-display: var(--font-serif);
      --font-slab: var(--font-serif);

      /* paper and ink — everything else is mixed from these plus six accents */
      --paper: light-dark(oklch(97.5% 0.006 95), oklch(21% 0.008 95));
      --paper-2: light-dark(oklch(100% 0 0), oklch(25% 0.009 95));
      --ink: light-dark(oklch(22% 0.01 95), oklch(93% 0.008 95));
      --ink-soft: light-dark(oklch(40% 0.012 110), oklch(82% 0.01 110));
      --ink-mute: light-dark(oklch(54% 0.014 110), oklch(68% 0.012 110));
      --red: light-dark(oklch(46% 0.13 30), oklch(68% 0.12 30));
      --blue: light-dark(oklch(48% 0.07 240), oklch(72% 0.07 240));
      --green: light-dark(oklch(50% 0.07 140), oklch(74% 0.07 140));
      --gold: light-dark(oklch(58% 0.09 85), oklch(78% 0.1 85));
      --violet: light-dark(oklch(48% 0.07 310), oklch(74% 0.07 310));
      --mark: light-dark(oklch(92% 0.06 95), oklch(35% 0.05 95));

      /* state — reserved, never themed. Always paired with a word or ▲/▼:
         hue valence flips across cultures, so color alone never carries state. */
      --ok: light-dark(oklch(48.1% 0.097 141), oklch(80.4% 0.103 134));
      --warn: light-dark(oklch(52.3% 0.101 77), oklch(78.5% 0.115 87));
      --bad: var(--red);

      /* chart series slots — fixed order, never cycled or re-sorted. Generated in
         OKLCH against both surfaces and machine-validated for colour-vision
         deficiency (Machado 2009 ΔE), lightness band, chroma floor and contrast.
         Semantics, ramps and the validation recipe are in colors.md; colors.html
         is the live lab. Written back in OKLCH, the space they were generated in. */
      --chart-1: light-dark(oklch(50.0% 0.130 27), oklch(62.0% 0.120 27));
      --chart-2: light-dark(oklch(48.1% 0.110 285), oklch(60.0% 0.110 285));
      --chart-3: light-dark(oklch(52.1% 0.111 135), oklch(63.1% 0.110 138));
      --chart-4: light-dark(oklch(58.0% 0.105 220), oklch(64.0% 0.110 220));
      --chart-5: light-dark(oklch(62.0% 0.131 55), oklch(65.4% 0.120 55));
      --chart-6: light-dark(oklch(55.0% 0.110 340), oklch(64.0% 0.109 340));
      --chart-7: light-dark(oklch(66.0% 0.130 80), oklch(66.4% 0.120 80));
      --chart-8: light-dark(oklch(63.0% 0.119 175), oklch(64.5% 0.110 175));

      /* base-map palettes — see .map-demo in the components layer */
      --map-lit-bg: light-dark(oklch(95.3% 0.023 99), oklch(20.9% 0.010 125));
      --map-lit-road: light-dark(oklch(81.2% 0.039 96), oklch(45.5% 0.030 127));
      --map-lit-water: light-dark(oklch(70.5% 0.037 183), oklch(57.2% 0.053 225));
      --map-density-bg: light-dark(oklch(97.3% 0.009 120), oklch(18.8% 0.013 145));
      --map-density-road: light-dark(oklch(86.8% 0.025 128), oklch(36.5% 0.031 133));
      --map-density-water: light-dark(oklch(77.6% 0.039 216), oklch(46.3% 0.058 224));
      --map-density-point: light-dark(oklch(65.8% 0.160 41), oklch(77.9% 0.146 52));
      --map-research-bg: light-dark(oklch(97.6% 0.004 271), oklch(19.5% 0.017 264));
      --map-research-road: light-dark(oklch(86.0% 0.017 251), oklch(38.3% 0.031 258));
      --map-research-water: light-dark(oklch(71.6% 0.084 249), oklch(67.7% 0.099 244));
      --map-research-point: light-dark(oklch(48.0% 0.115 253), oklch(81.8% 0.094 251));
      --map-night-bg: oklch(18.5% 0.012 139);
      --map-night-road: oklch(37.6% 0.030 134);
      --map-night-water: oklch(32.7% 0.048 231);
      --map-night-land: oklch(21.8% 0.016 141);
      --map-night-point: oklch(80.4% 0.108 92);

      /* derived, never redefined elsewhere */
      --rule: color-mix(in oklab, var(--ink), transparent 82%);
      --rule-strong: color-mix(in oklab, var(--ink), transparent 62%);
      --wash: color-mix(in oklab, var(--ink), transparent 94%);

      /* rhythm */
      --measure: 60ch;
      --side: clamp(14rem, 22vi, 19rem);
      --gap: clamp(1.25rem, 3vi, 3.25rem);
      --edge: minmax(var(--gap), 1fr);
      --hairline: 1px;

      /* fluid modular scale */
      --step--1: clamp(0.84rem, 0.8rem + 0.18vi, 0.95rem);
      --step-0: clamp(1.05rem, 0.98rem + 0.35vi, 1.25rem);
      --step-1: clamp(1.27rem, 1.16rem + 0.55vi, 1.58rem);
      --step-2: clamp(1.53rem, 1.36rem + 0.9vi, 2.02rem);
      --step-3: clamp(1.86rem, 1.58rem + 1.4vi, 2.62rem);
      --step-4: clamp(2.25rem, 1.83rem + 2.1vi, 3.4rem);
   }
   /* explicit override beats the OS; light-dark() resolves from color-scheme */
   :root[data-theme="light"] { color-scheme: light; }
   :root[data-theme="dark"] { color-scheme: dark; }

   /* registered so the accent can transition and be derived from in charts */
   @property --accent {
      syntax: "<color>";
      inherits: true;
      initial-value: oklch(46% 0.13 30);
   }
   :root { --accent: var(--red); }
}

@layer base {
   /* line-height lives on the root so 1rlh is a determinate 24px rhythm unit,
      not the font's "normal" — body re-declares 1.5 over its own font size */
   html { line-height: 1.5; hanging-punctuation: first last; scrollbar-gutter: stable; }
   body {
      min-block-size: 100svh;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--font-serif);
      font-size: var(--step-0);
      font-optical-sizing: auto;
      line-height: 1.5;
      font-variant-numeric: oldstyle-nums proportional-nums;
      text-spacing-trim: space-all;
   }
   ::selection { background: var(--mark); color: var(--ink); }
   a {
      color: inherit;
      text-decoration-line: underline;
      text-decoration-thickness: from-font;
      text-decoration-color: color-mix(in oklab, var(--accent), transparent 40%);
      text-underline-offset: 0.14em;
   }
   a:hover { color: var(--accent); }
   :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
   code, kbd, samp, output, data { font-family: var(--font-mono); font-size: 0.86em; font-variant-numeric: tabular-nums lining-nums; }
   kbd { border: var(--hairline) solid var(--rule-strong); border-block-end-width: 2px; border-radius: 0.25em; padding: 0.05em 0.35em; }
   mark { background: var(--mark); color: var(--ink); }
   ::target-text { background: var(--mark); }
   hr { border: 0; border-block-start: var(--hairline) solid var(--rule); margin-block: 2rlh; }
   [hidden] { display: none; }
}

@layer layout {
   /* One grid carries the whole document. Named columns; children default to
      the reading column; sidenotes take the margin column; `dense` lets the
      main text flow past long notes instead of leaving holes. */
   .page-grid {
      display: grid;
      grid-template-columns:
         [full-start] var(--edge)
         [main-start] minmax(0, var(--measure))
         [main-end] var(--gap)
         [margin-start] var(--side)
         [margin-end] var(--edge)
         [full-end];
      grid-auto-flow: row dense;
      row-gap: 0.75rlh;
      align-items: start;
   }
   .page-grid > * { grid-column: main; }

   /* sections are subgrids: their children keep addressing the page columns,
      so sidenotes work at any nesting depth the document actually uses */
   :is(.page-grid, .subgrid) > :is(.section, .article-header, .doc-body, .subgrid) {
      grid-column: full;
      display: grid;
      grid-template-columns: subgrid;
      grid-auto-flow: row dense;
      row-gap: 0.75rlh;
   }
   :is(.section, .article-header, .doc-body, .subgrid) > * { grid-column: main; }
   .full { grid-column: full; }
   .wide { grid-column: main-start / margin-end; }
   .side { grid-column: margin; }

   .shell { padding-block: clamp(1.5rem, 4vb, 4.5rem); }

   .masthead {
      grid-column: main-start / margin-end;
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 1.25rem;
      align-items: baseline;
      border-block-end: var(--hairline) solid var(--rule-strong);
      padding-block-end: 0.75rem;
      margin-block-end: clamp(1.5rem, 4vb, 3.5rem);
   }
   .masthead nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-soft); }
   .masthead nav a { text-decoration-line: none; }
   .masthead menu { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin-inline-start: auto; }

   .section { margin-block-start: 1.5rlh; }

   /* cards & dashboard fields — container-driven, no breakpoint soup */
   .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--hairline); background: var(--rule); border-block: var(--hairline) solid var(--rule); }
   .dashboard-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
   .span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }

   @media (width < 68rem) {
      .page-grid { grid-template-columns: [full-start] var(--gap) [main-start margin-start] minmax(0, 1fr) [main-end margin-end] var(--gap) [full-end]; }
      .wide, .side { grid-column: main; }
      .masthead { grid-column: main; }
   }
   @media (width < 52rem) {
      .dashboard-grid > * { grid-column: 1 / -1; }
   }
}

@layer sidenotes {
   /* Semantic sidenotes. Source order is the contract:
         <p>… claim<a class="sn" id="r:k" href="#n:k" role="doc-noteref"></a> …</p>
         <aside class="sidenote" id="n:k" role="note">explanation</aside>
      The aside follows the block that references it. Grid places it in the
      margin on the same row; twin counters number marker and note in lockstep.
      No checkbox hack, no floats, no JavaScript. */
   .page-grid, .doc-body { counter-reset: sn-ref sn-note; }

   a.sn { counter-increment: sn-ref; text-decoration-line: none; }
   a.sn::after {
      content: counter(sn-ref);
      font-family: var(--font-mono);
      font-size: 0.62em;
      color: var(--accent);
      vertical-align: baseline;
      position: relative;
      inset-block-start: -0.5em;
      padding-inline: 0.08em;
   }

   .sidenote, .marginnote {
      grid-column: margin;
      align-self: start;
      color: var(--ink-soft);
      font-size: var(--step--1);
      line-height: 1.42;
      text-wrap: pretty;
   }
   .sidenote { counter-increment: sn-note; }
   .sidenote::before {
      content: counter(sn-note);
      font-family: var(--font-mono);
      font-size: 0.68em;
      color: var(--accent);
      vertical-align: baseline;
      position: relative;
      inset-block-start: -0.45em;
      margin-inline-end: 0.35ch;
   }
   .marginnote { font-style: italic; }
   .marginnote em, .marginnote i { font-style: normal; }
   .sidenote:target, .sidenote:has(:target) { background: var(--mark); }

   /* narrow: the margin column is gone; notes become quiet inline notes,
      visible by default — a note the reader must summon is a footnote again */
   @media (width < 68rem) {
      .sidenote, .marginnote {
         grid-column: main;
         border-inline-start: 2px solid var(--rule-strong);
         padding-inline-start: 0.75rem;
         margin-block: 0.25rlh;
      }
   }
}

@layer typography {
   h1, h2, h3, h4 {
      font-weight: 500;
      line-height: 1.08;
      text-wrap: balance;
      text-box: trim-both cap alphabetic;
      margin-block: 1rlh 0;
   }
   h1 { font-size: var(--step-4); font-weight: 550; margin-block-start: 0; }
   h2 { font-size: var(--step-2); }
   h3 { font-size: var(--step-1); font-style: italic; }
   h4 { font-size: var(--step-0); font-variant-caps: all-small-caps; letter-spacing: 0.03em; }

   p { text-wrap: pretty; }
   .subtitle { font-size: var(--step-1); font-style: italic; color: var(--ink-soft); line-height: 1.35; }
   .lede { font-size: var(--step-1); line-height: 1.45; }
   .kicker { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); }
   .smallcaps, .run-in { font-variant-caps: small-caps; letter-spacing: 0.02em; }
   .run-in { color: var(--accent); }
   .newthought { font-variant-caps: small-caps; letter-spacing: 0.04em; font-size: 1.06em; }

   blockquote { padding-inline-start: 1.25rem; border-inline-start: 2px solid var(--rule); color: var(--ink-soft); }
   blockquote footer { font-size: var(--step--1); font-style: italic; margin-block-start: 0.35rlh; }
   .epigraph { border: 0; padding-inline-start: 0; font-style: italic; font-size: var(--step-1); }
   .epigraph em, .epigraph i { font-style: normal; }

   ul, ol { padding-inline-start: 1.4rem; }
   li + li { margin-block-start: 0.2rlh; }
   ::marker { color: var(--ink-mute); font-variant-numeric: oldstyle-nums; }
   dt { font-variant-caps: small-caps; letter-spacing: 0.02em; }
   dd { padding-inline-start: 1.4rem; }

   time, .num { font-variant-numeric: lining-nums tabular-nums; }
   sub, sup { font-size: 0.7em; line-height: 0; }
   abbr[title] { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: var(--ink-mute); cursor: help; }
}

@layer components {
   .brand { font-size: var(--step-1); font-weight: 550; text-decoration-line: none; }

   .card { container-type: inline-size; background: var(--paper); padding: clamp(0.85rem, 3cqi, 1.3rem); }
   .card-title { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-mute); margin-block-end: 0.5rlh; }

   .metric { font-size: clamp(2rem, 14cqi, 3.6rem); line-height: 1; text-box: trim-both cap alphabetic; font-variant-numeric: lining-nums tabular-nums; }
   .metric small { font-size: 0.32em; color: var(--ink-mute); font-variant-numeric: normal; }
   .delta { font-family: var(--font-mono); font-size: var(--step--1); color: var(--green); }
   .delta[data-down] { color: var(--red); }

   figure { margin-block: 0.5rlh; }
   figcaption { color: var(--ink-mute); font-size: var(--step--1); line-height: 1.42; margin-block-start: 0.35rlh; text-wrap: pretty; }
   .page-grid > figure.margin { grid-column: margin; align-self: start; }

   /* tables — thin rules, tabular figures, numbers end-aligned */
   .table-wrap { overflow-x: auto; scrollbar-gutter: stable; }
   table { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
   caption { text-align: start; font-style: italic; color: var(--ink-soft); margin-block-end: 0.35rlh; }
   th, td { padding: 0.4rem 0.7rem; text-align: start; vertical-align: top; }
   thead th { border-block-end: var(--hairline) solid var(--rule-strong); font-family: var(--font-mono); font-size: var(--step--1); font-weight: 400; color: var(--ink-mute); }
   tbody tr { border-block-end: var(--hairline) solid var(--rule); }
   tbody tr:last-child { border-block-end-color: var(--rule-strong); }
   tfoot { font-weight: 550; }
   th.num, td.num { text-align: end; }
   tbody tr:hover { background: var(--wash); }

   /* code */
   pre { overflow-x: auto; scrollbar-gutter: stable; padding: 0.75rem 1rem; background: var(--wash); border-inline-start: 2px solid var(--rule); font-size: var(--step--1); line-height: 1.55; tab-size: 3; }
   pre code { font-size: 1em; background: none; border: 0; padding: 0; }
   :not(pre) > code { background: var(--wash); padding: 0.05em 0.3em; border-radius: 0.2em; }
   pre mark { background: var(--mark); box-decoration-break: clone; }

   /* disclosure — exclusive accordions via details[name]; animated via
      interpolate-size + ::details-content where supported */
   details { border-block: var(--hairline) solid var(--rule); padding-block: 0.5rem; }
   details + details { border-block-start: 0; }
   summary { cursor: default; font-variant-caps: small-caps; letter-spacing: 0.02em; color: var(--ink-soft); }
   summary:hover { color: var(--accent); }
   details::details-content { block-size: 0; overflow-y: clip; }
   details[open]::details-content { block-size: auto; }

   /* anchored popover — citations, definitions, menus */
   [popover] {
      position: fixed;
      inset: auto;
      margin: 0.35rem 0 0;
      max-inline-size: min(38ch, 90vi);
      background: var(--paper-2);
      color: var(--ink);
      border: var(--hairline) solid var(--rule-strong);
      padding: 0.75rem 1rem;
      font-size: var(--step--1);
      line-height: 1.45;
   }
   [popover]::backdrop { background: none; }
   @supports (anchor-name: --a) {
      [popover] { position-area: block-end span-inline-end; position-try-fallbacks: flip-block, flip-inline; }
   }

   .status { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-mute); }
   .status::before { content: "· "; color: var(--green); }

   /* generated documents (pandoc/kramdown via template.html) */
   .doc-toc { position: sticky; inset-block-start: 1rem; max-block-size: calc(100svb - 2rem); overflow-y: auto; font-family: var(--font-mono); font-size: var(--step--1); }
   .doc-toc ul { list-style: none; padding-inline-start: 0; }
   .doc-toc ul ul { padding-inline-start: 1.5ch; }
   .doc-toc a { color: var(--ink-soft); text-decoration-line: none; }
   .doc-toc a:hover { color: var(--accent); }
   .doc-body :is(h2, h3, h4) > a { text-decoration-line: none; }
   .doc-body table { font-size: var(--step--1); }
   @media (width < 68rem) { .doc-toc { position: static; max-block-size: none; } }
}

@layer charts {
   /* Charts are inline SVG drawn in data-ink only: range-frame axes, direct
      labels, thin strokes. Color comes from currentColor and the accent vars
      so light/dark needs no chart-side logic. */
   .chart { inline-size: 100%; color: var(--ink-soft); }
   .chart svg { overflow: visible; font-family: var(--font-mono); font-size: 0.66rem; inline-size: 100%; block-size: auto; }
   .chart .axis { stroke: currentColor; stroke-width: 1; }
   .chart .tick { fill: var(--ink-mute); }
   .chart .series { fill: none; stroke-width: 1.4; }
   .chart .dot { stroke: none; }
   .chart .label { fill: var(--ink); }
   .chart .grid-rule { stroke: var(--rule); }

   .sparkline { inline-size: 100%; block-size: 1.6rlh; color: var(--accent); }
   .sparkline svg { inline-size: 100%; block-size: 100%; overflow: visible; }

   /* bar-in-table: a proportional rule behind a number; pure CSS */
   .bar { --value: 0; position: relative; display: block; min-inline-size: 8ch; }
   .bar::after {
      content: "";
      position: absolute;
      inset-block: 0.2em;
      inset-inline-start: 0;
      inline-size: calc(var(--value) * 1%);
      background: color-mix(in oklab, var(--accent), transparent 72%);
   }

   meter, progress { inline-size: 100%; block-size: 0.5rem; accent-color: var(--accent); }

   /* Identity: nominal series take their slot from the fixed order, so the same
      category keeps the same ink across every figure on the page. */
   .chart [data-series="1"], .series-1 { --series: var(--chart-1); }
   .chart [data-series="2"], .series-2 { --series: var(--chart-2); }
   .chart [data-series="3"], .series-3 { --series: var(--chart-3); }
   .chart [data-series="4"], .series-4 { --series: var(--chart-4); }
   .chart [data-series="5"], .series-5 { --series: var(--chart-5); }
   .chart [data-series="6"], .series-6 { --series: var(--chart-6); }
   .chart [data-series="7"], .series-7 { --series: var(--chart-7); }
   .chart [data-series="8"], .series-8 { --series: var(--chart-8); }
   .chart [data-series] { stroke: var(--series); }
   .chart [data-series].dot, .chart [data-series].fill { fill: var(--series); stroke: none; }

   /* State, spelled out. .ok/.warn/.bad colour the mark; the reading still needs
      the word or arrow beside it. Neutral states stay unstyled. */
   .ok { color: var(--ok); }
   .warn { color: var(--warn); }
   .bad { color: var(--bad); }
}

@layer forms {
   fieldset { border: var(--hairline) solid var(--rule); padding: 0.75rem 1rem 1rem; }
   legend { font-variant-caps: small-caps; letter-spacing: 0.02em; color: var(--ink-soft); padding-inline: 0.4ch; }
   label { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-soft); display: block; margin-block-end: 0.2rem; }

   input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select {
      background: var(--paper-2);
      border: var(--hairline) solid var(--rule-strong);
      border-radius: 0;
      padding: 0.4rem 0.6rem;
      font-family: var(--font-mono);
      font-size: var(--step--1);
      inline-size: 100%;
   }
   textarea { field-sizing: content; min-block-size: 2.5rlh; resize: vertical; }
   input:user-invalid, textarea:user-invalid { border-color: var(--red); }
   input:user-valid, textarea:user-valid { border-color: var(--green); }
   :root { accent-color: var(--accent); }

   button {
      font-family: var(--font-mono);
      background: var(--ink);
      color: var(--paper);
      border: var(--hairline) solid var(--ink);
      padding: 0.4rem 1rem;
      font-size: var(--step--1);
      cursor: default;
   }
   button:hover { background: var(--accent); border-color: var(--accent); }
   button[data-tone="quiet"] { background: none; color: var(--ink-soft); border-color: var(--rule-strong); }
   button[data-tone="quiet"]:hover { color: var(--accent); border-color: var(--accent); background: none; }

   /* customizable select where implemented; a decent native select elsewhere */
   @supports (appearance: base-select) {
      select, select::picker(select) { appearance: base-select; }
      select::picker(select) { background: var(--paper-2); border: var(--hairline) solid var(--rule-strong); }
      select option { padding: 0.35rem 0.6rem; }
      select option:checked { background: var(--wash); }
   }

   search { display: block; }
}

@layer media {
   .media-frame { border: var(--hairline) solid var(--rule); background: var(--wash); }
   .media-frame :is(iframe, video) { inline-size: 100%; aspect-ratio: 16 / 9; border: 0; }
   .media-frame img { inline-size: 100%; }
   .embed-load { inline-size: 100%; aspect-ratio: 16 / 9; display: grid; place-content: center; background: var(--wash); color: var(--ink-soft); border: var(--hairline) solid var(--rule); font-size: var(--step--1); }
   .embed-load:hover { color: var(--accent); background: var(--wash); border-color: var(--accent); }

   /* streaming displays: a log that stays honest — monospaced, timestamped */
   .feed { display: grid; gap: 0.15rem; font-family: var(--font-mono); font-size: var(--step--1); max-block-size: 14rlh; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; }
   .feed > * { display: grid; grid-template-columns: 9ch 1fr auto; gap: 1ch; padding-block: 0.1rem; border-block-end: var(--hairline) solid var(--rule); }
   .feed time { color: var(--ink-mute); }
   .feed data { text-align: end; }
}

@layer motion {
   /* All movement is opt-in via the user's own OS setting. */
   @media (prefers-reduced-motion: no-preference) {
      html { scroll-behavior: smooth; }

      [popover] { transition: opacity 0.14s ease, translate 0.14s ease, display 0.14s allow-discrete, overlay 0.14s allow-discrete; }
      [popover]:not(:popover-open) { opacity: 0; translate: 0 -0.25rem; }
      @starting-style { [popover]:popover-open { opacity: 0; translate: 0 -0.25rem; } }

      details::details-content { transition: block-size 0.2s ease, content-visibility 0.2s allow-discrete; }

      .feed > * { transition: opacity 0.3s ease, background 1.2s ease; }
      @starting-style { .feed > * { opacity: 0; background: var(--mark); } }

      /* reading progress: a hairline that fills as the document scrolls */
      @supports (animation-timeline: scroll()) {
         .reading-progress {
            position: fixed;
            inset-block-start: 0;
            inset-inline-start: 0;
            inline-size: 100%;
            block-size: 2px;
            background: var(--accent);
            transform-origin: 0 50%;
            scale: 0 1;
            animation: reading-progress linear both;
            animation-timeline: scroll(root);
         }
         @keyframes reading-progress { to { scale: 1 1; } }
      }
   }
   @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; }
      .reading-progress { display: none; }
   }
}

@layer print {
   @media print {
      :root { color-scheme: light; }
      .masthead menu, .reading-progress, .embed-load, button { display: none; }
      a { text-decoration-line: none; }
      .page-grid { row-gap: 0.5rlh; }
      pre, .card, .media-frame { border: var(--hairline) solid var(--rule); }
   }
}

@layer utilities {
   .muted { color: var(--ink-mute); }
   .soft { color: var(--ink-soft); }
   .mono { font-family: var(--font-mono); font-size: 0.92em; }
   .accent { color: var(--accent); }
   .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------------------------------------------------------------------------
   Merged in from the 🪩-style 3000 line (lit / dataismus / dotfiles, 2026-07-13):
   the type-role vocabulary, native diff semantics, callouts, the image mosaic
   and the map colour schemes. Ported to this system's tokens and layers —
   --ink-faint→--ink-mute, --line→--rule, --accent-2→--blue, --accent-3→--green,
   --paper-3→a mixed wash — so there is exactly one spelling per construct.
   --------------------------------------------------------------------------- */

@layer typography {
   /* Type roles name the job, not the face; the face comes from the token. */
   .type-display {
      font-family: var(--font-display);
      font-weight: 720;
      line-height: 0.98;
      letter-spacing: -0.018em;
      font-variation-settings: "SOFT" 35, "WONK" 1;
      text-wrap: balance;
   }
   .type-slab, .type-headline {
      font-family: var(--font-slab);
      font-weight: 650;
      line-height: 1.04;
      letter-spacing: -0.012em;
      text-wrap: balance;
      font-optical-sizing: auto;
   }
   .type-narrow {
      font-family: var(--font-slab);
      font-weight: 670;
      line-height: 1;
      letter-spacing: -0.018em;
      font-stretch: condensed;
   }
   .type-book {
      font-family: var(--font-serif);
      font-size: var(--step-0);
      line-height: 1.64;
      font-optical-sizing: auto;
      font-variant-numeric: oldstyle-nums proportional-nums;
   }
   .type-deck {
      font-family: var(--font-serif);
      font-size: var(--step-1);
      line-height: 1.42;
      color: var(--ink-soft);
   }
   .type-mono, .type-data, .type-table {
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums lining-nums slashed-zero;
      font-feature-settings: "tnum" 1, "lnum" 1, "zero" 1;
   }
   .type-kicker, .eyebrow, .breadcrumb {
      font-family: var(--font-mono);
      font-size: var(--step--1);
      color: var(--ink-mute);
      font-variant-caps: all-small-caps;
      letter-spacing: 0.08em;
   }

   /* Diff semantics — proposed edits rendered with native ins/del.
      ins = addition, del = removal; wrap an old/new pair in .change and both
      turn gold, reading as "superseded by", not "wrong then right". */
   ins, del {
      padding: 0 0.22em;
      text-decoration-thickness: 0.09em;
   }
   ins {
      background: color-mix(in oklab, var(--green), transparent 82%);
      color: light-dark(color-mix(in oklab, var(--green), var(--ink) 42%), color-mix(in oklab, var(--green), var(--ink) 18%));
      text-decoration: none;
   }
   del {
      background: color-mix(in oklab, var(--red), transparent 88%);
      color: color-mix(in oklab, var(--red), var(--ink) 22%);
      text-decoration-line: line-through;
   }
   .change del {
      background: color-mix(in oklab, var(--gold), transparent 84%);
      color: color-mix(in oklab, var(--gold), var(--ink) 30%);
   }
   .change ins {
      background: color-mix(in oklab, var(--gold), transparent 76%);
      color: light-dark(color-mix(in oklab, var(--gold), var(--ink) 52%), color-mix(in oklab, var(--gold), var(--ink) 14%));
   }
}

@layer components {
   /* Callouts carry exactly one severity. The severity word is in the <b>, so
      the reading survives without colour. */
   .callout-grid { display: grid; gap: 0.8rem; }
   .callout {
      display: grid;
      grid-template-columns: 5.5rem minmax(0, 1fr);
      gap: 1rem;
      align-items: start;
      border: var(--hairline) solid var(--rule);
      border-inline-start-width: 0.42rem;
      background: var(--paper-2);
      padding: 0.82rem 1rem;
   }
   .callout b {
      color: var(--ink);
      font-family: var(--font-mono);
      font-size: var(--step--1);
      letter-spacing: 0.08em;
      font-variant-caps: all-small-caps;
   }
   .callout p { margin: 0; color: var(--ink-soft); }
   .callout.info { border-inline-start-color: var(--blue); }
   .callout.warn { border-inline-start-color: var(--gold); }
   .callout.error { border-inline-start-color: var(--red); }
   .callout.fatal {
      border-color: var(--ink);
      background: var(--ink);
      color: var(--paper);
   }
   .callout.fatal b, .callout.fatal p { color: var(--paper); }

   /* Mosaic: images sized by their weight in the argument, captioned in place. */
   .mosaic {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
      grid-auto-rows: 6.2rem;
      grid-auto-flow: dense;
      gap: 0.65rem;
   }
   .mosaic figure {
      position: relative;
      margin: 0;
      min-block-size: 0;
      overflow: clip;
      border: var(--hairline) solid var(--rule);
      background: color-mix(in oklab, var(--paper), var(--ink) 5%);
   }
   .mosaic img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      display: block;
      filter: saturate(0.82) contrast(1.04);
   }
   .mosaic figcaption {
      position: absolute;
      inset-inline: 0;
      inset-block-end: 0;
      padding: 0.35rem 0.45rem;
      background: color-mix(in oklab, var(--ink), transparent 18%);
      color: var(--paper);
      font-family: var(--font-mono);
      font-size: 0.62rem;
      letter-spacing: 0.06em;
      font-variant-caps: all-small-caps;
   }
   .mosaic .wide { grid-column: span 2; }
   .mosaic .tall { grid-row: span 2; }
   .mosaic .large { grid-column: span 2; grid-row: span 2; }

   /* Map schemes: base map ink for a panel, as four named palettes. The demo
      surface renders them without a tile request; a real map repoints --m-*. */
   .map-schemes {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
      gap: 0.85rem;
   }
   .map-demo {
      --m-bg: color-mix(in oklab, var(--paper), var(--ink) 5%);
      --m-road: var(--rule-strong);
      --m-water: var(--blue);
      --m-land: var(--paper-2);
      --m-point: var(--accent);
      position: relative;
      min-block-size: 15rem;
      overflow: clip;
      border: var(--hairline) solid var(--rule);
      background:
         radial-gradient(circle at 20% 80%, color-mix(in oklab, var(--m-water), transparent 70%), transparent 18%),
         radial-gradient(circle at 70% 18%, color-mix(in oklab, var(--m-point), transparent 76%), transparent 20%),
         linear-gradient(135deg, transparent 48%, var(--m-road) 49% 50%, transparent 51%),
         linear-gradient(25deg, transparent 58%, var(--m-road) 59% 60%, transparent 61%),
         var(--m-bg);
   }
   .map-demo::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
         radial-gradient(circle at 24% 36%, var(--m-point) 0 0.28rem, transparent 0.32rem),
         radial-gradient(circle at 42% 58%, var(--m-point) 0 0.24rem, transparent 0.29rem),
         radial-gradient(circle at 72% 41%, var(--m-point) 0 0.34rem, transparent 0.39rem),
         radial-gradient(circle at 62% 72%, var(--m-point) 0 0.21rem, transparent 0.26rem);
   }
   /* Four named base-map palettes. Values live in the tokens layer; a scheme
      class only chooses which set the panel's --m-* slots read from. */
   .map-demo.lit {
      --m-bg: var(--map-lit-bg);
      --m-road: var(--map-lit-road);
      --m-water: var(--map-lit-water);
      --m-point: var(--accent);
   }
   .map-demo.density {
      --m-bg: var(--map-density-bg);
      --m-road: var(--map-density-road);
      --m-water: var(--map-density-water);
      --m-point: var(--map-density-point);
   }
   .map-demo.research {
      --m-bg: var(--map-research-bg);
      --m-road: var(--map-research-road);
      --m-water: var(--map-research-water);
      --m-point: var(--map-research-point);
   }
   /* night is a fixed scheme: it holds its own ink under either OS setting. */
   .map-demo.night {
      --m-bg: var(--map-night-bg);
      --m-road: var(--map-night-road);
      --m-water: var(--map-night-water);
      --m-land: var(--map-night-land);
      --m-point: var(--map-night-point);
      color-scheme: dark;
   }
   .map-caption {
      position: absolute;
      inset-inline: 0.75rem;
      inset-block-end: 0.65rem;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      color: var(--ink);
      font-family: var(--font-mono);
      font-size: var(--step--1);
   }
}