/* 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 uppercase, and no
     @import beyond the two companions this file pulls in (dotdotdot.css, discofont-3000.css),
   — 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, dotdotdot;

/* The ... layer — extra tokens, the .type-* vocabulary, the dashboard widgets, and
   through it the discofont-3000 mono. It rides in its own layer, declared LAST above, so
   where an added rule and an older one compete, the added one wins — every earlier
   version stays in the cascade underneath it, inspectable and comparable. */
@import url("dotdotdot.css") layer(dotdotdot);

/* 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;
      /* installed on Apple platforms or supplied locally — see discofont-3000.css */
      --font-mono: "discofont-3000", 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-mono);
      font-size: var(--step-0);
      font-optical-sizing: auto;
      line-height: 1.5;
      font-variant-numeric: tabular-nums lining-nums slashed-zero;
      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; }
   pre, 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; }

   /* COLUMNS. A newspaper sets its front page in columns because a long line is
      hard to read, not for ornament — so this spends width only where there is
      width to spend. `--columns` states how many the SOURCE used; the layout
      never renders more than the viewport can carry at a readable measure, and
      in portrait it collapses, since a narrow screen has no width to divide.
      Balanced fill so the last column does not trail off short. */
   .columns {
      --columns: 1;
      column-count: min(var(--columns), max(1, calc((100cqi - var(--gap)) / 24rem)));
      column-gap: var(--gap);
      column-rule: var(--hairline) solid var(--rule);
      column-fill: balance;
      container-type: inline-size;
   }
   .columns > * { break-inside: avoid-column; }
   .columns > :is(h2, h3, h4) { break-after: avoid-column; }
   @media (orientation: portrait) { .columns { column-count: 1; } }
   @media (width < 60rem) { .columns { column-count: 1; } }

   .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; }
   .masthead menu > li { display: contents; }
   .help-link { border: 0; padding: 0; background: none; color: var(--ink-soft); font: inherit; }
   .help-link:hover { border: 0; background: none; color: var(--accent); }
   .shortcut-overlay { inline-size: min(26rem, 90vi); }
   .shortcut-heading { margin-block: 0 0.35rem; font: inherit; font-variant-caps: small-caps; letter-spacing: 0.02em; color: var(--ink-soft); }
   .shortcut-options { margin-block-start: 0.75rem; }
   .shortcut-list { margin: 0; font-family: var(--font-mono); }
   .shortcut-list > div { display: grid; grid-template-columns: 7ch 1fr; gap: 0.75rem; padding-block: 0.15rem; }
   .shortcut-list :is(dt, dd) { margin: 0; }
   .shortcut-list kbd { font: inherit; color: var(--ink); }
   .shortcut-list output { color: var(--ink-mute); }
   .shortcut-list [aria-disabled="true"] { opacity: 0.5; }
   .shortcut-overlay select { margin-inline-start: 0.5rem; }

   .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 < 52rem) {
      .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 < 52rem) {
      .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; }
   .pagebreak, .pagebreak-row {
      color: var(--ink-mute);
      font-family: var(--font-mono);
      font-size: var(--step--2);
      font-variant-numeric: lining-nums tabular-nums;
   }
   .pagebreak { margin-inline: 0.35ch; vertical-align: super; white-space: nowrap; }
   .pagebreak::before { content: "["; }
   .pagebreak::after { content: "]"; }
   .pagebreak-row { margin-block: 0.25rlh; text-align: end; }
   .pagebreak-row .pagebreak { vertical-align: baseline; }

   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; }
   math[display="block"] { display: block; max-inline-size: 100%; overflow-x: auto; margin-block: 1rlh; font-size: var(--step-1); }
   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 { container-type: inline-size; overflow-x: clip; }
   table { inline-size: 100%; max-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:not(.group):hover { background: var(--wash); }
   td small { display: block; color: var(--ink-mute); font-size: 0.86em; line-height: 1.35; }
   td.num small { display: inline; margin-inline-start: 0.35em; }
   tbody tr.group th { padding-block: 0.9rlh 0.15rem; font-family: var(--font-mono); font-size: var(--step--1); font-weight: 400; color: var(--ink-mute); text-align: start; border-block-end: var(--hairline) solid var(--rule-strong); }
   tbody tr.group [data-table-group-toggle] { inline-size: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: inherit; font: inherit; }
   tbody tr.group [data-table-group-toggle]::before { content: "▸ "; }
   tbody tr.group [data-table-group-toggle][aria-expanded="true"]::before { content: "▾ "; }

   .table-wrap > table > thead { display: block; }
   .table-wrap > table > thead > tr { display: flex; flex-wrap: wrap; }
   .table-wrap > table > thead > tr > th { flex: 1 1 9rem; min-inline-size: 0; overflow-wrap: anywhere; }
   .table-wrap > table,
   .table-wrap > table > :is(tbody, tfoot) { display: block; }
   .table-wrap > table > :is(tbody, tfoot) > tr {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
   }
   .table-wrap > table > :is(tbody, tfoot) > tr > td {
      min-inline-size: 0;
      overflow-wrap: anywhere;
      text-align: start;
   }
   .table-wrap > table > :is(tbody, tfoot) > tr > td::before {
      content: attr(data-label);
      display: none;
      margin-block-end: 0.15rem;
      color: var(--ink-mute);
      font-family: var(--font-mono);
      font-size: var(--step--1);
      font-variant-numeric: normal;
   }
   .table-wrap > table > tbody > tr.group,
   .table-wrap > table > tbody > tr.group > th { display: block; inline-size: 100%; }

   @container (inline-size < 48rem) {
      .table-wrap > table > :is(tbody, tfoot) > tr > td::before { display: block; }
   }

   .figure-data { margin-block-start: 0.5rlh; font-size: var(--step--1); }
   .figure-data th, .figure-data td { padding-block: 0.2rem; }
   .table-sort { inline-size: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: inherit; font: inherit; }
   .table-sort:hover { background: none; color: var(--accent); border: 0; }
   th[aria-sort="ascending"] .table-sort::after { content: " ▲"; }
   th[aria-sort="descending"] .table-sort::after { content: " ▼"; }

   /* 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) {
      .anchor-source { anchor-name: var(--anchor); }
      .anchor-target { position-anchor: var(--anchor); }
      [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 */
   .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); }

   .automaton { inline-size: 100%; color: var(--ink-soft); }
   .automaton svg { inline-size: 100%; block-size: auto; overflow: visible; font-family: var(--font-mono); font-size: 0.68rem; }
   .automaton-state rect { fill: var(--paper); stroke: currentColor; stroke-width: 1.2; }
   .automaton-state text, .automaton-label { fill: var(--ink); }
   .automaton-state .accepting { fill: none; }
   .automaton-edge { fill: none; stroke: currentColor; stroke-width: 1.2; }
   .automaton :is(.role-dropped, .role-narrowed) { opacity: 0.42; stroke-dasharray: 4 3; }
   .automaton .role-added { stroke-width: 2; }
   .automaton .role-extended { stroke-width: 1.6; }

   .pipeline { inline-size: 100%; color: var(--ink-soft); }
   .pipeline svg { inline-size: 100%; block-size: auto; overflow: visible; font-family: var(--font-mono); font-size: 0.62rem; }
   .pipeline-cut { fill: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.06em; }
   .pipeline-edge { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
   .pipeline-edge.kind-bytes, .pipeline-edge.kind-artifacts { stroke: var(--blue); }
   .pipeline-edge.kind-terms, .pipeline-edge.kind-categories, .pipeline-edge.kind-matrix { stroke: var(--violet); }
   .pipeline-edge.kind-records, .pipeline-edge.kind-documents, .pipeline-edge.kind-text { stroke: var(--gold); }
   .pipeline-edge.kind-series { stroke: var(--green); }
   .pipeline-edge.kind-scores, .pipeline-edge.kind-ranked { stroke: var(--red); }
   .pipeline-edge.state-incomplete { stroke-dasharray: 8 5; }
   .pipeline-edge.state-empty { stroke-dasharray: 1 5; opacity: 0.45; }
   .pipeline-edge.state-planned { stroke-dasharray: 4 4; opacity: 0.58; }
   .pipeline-edge.state-live { stroke-dasharray: 10 5; }
   .pipeline-edge.compatibility-refined { stroke-linecap: round; opacity: 0.72; }
   .pipeline marker path { fill: var(--rule-strong); }
   .pipeline-node polygon { fill: var(--paper); stroke: var(--rule-strong); }
   .pipeline-node text { fill: var(--ink); }
   .pipeline-node .pipeline-status { fill: var(--ink-mute); font-size: 0.56rem; }
   .pipeline-node.compound polygon { fill: color-mix(in oklab, var(--paper-2), transparent 35%); stroke-dasharray: 3 2; }
   .pipeline-node.leaf polygon { stroke-width: 1; }
   .pipeline-node.current polygon { fill: color-mix(in oklab, var(--accent), var(--paper) 88%); stroke: var(--accent); stroke-width: 2; stroke-dasharray: none; }
   .pipeline-node.current text { fill: var(--accent); font-weight: 700; }
   .pipeline a:focus-visible .pipeline-node polygon { outline: none; stroke: var(--accent); stroke-width: 3; }
   @keyframes pipeline-flow { to { stroke-dashoffset: -30; } }
   @media (prefers-reduced-motion: no-preference) {
      .pipeline-edge:is(.state-live, .state-incomplete) { animation: pipeline-flow 1.8s linear infinite; }
   }

   .promptmap > ol { list-style: none; padding-inline-start: 0; }
   .promptmap li { border-block-start: var(--hairline) solid var(--rule); }
   .promptmap summary { font-family: var(--font-mono); font-size: var(--step--1); }
   .promptmap blockquote { max-inline-size: none; }
   .promptmap .prompt-pieces { list-style: decimal; padding-inline-start: 2rem; }
   .promptmap .prompt-pieces li { padding-block: 0.35rem; }
   .promptmap .prompt-pieces q { font-family: var(--font-mono); font-size: var(--step--1); }
   .promptmap .prompt-pieces [data-was-bleibt^="prompt:"] { border-inline-start: 0.2rem dashed var(--accent); padding-inline-start: 0.7rem; }
   .promptmap .ws-tab { color: var(--ink-mute); font-family: var(--font-mono); }
   .raison { color: var(--ink-mute); font-family: var(--font-mono); font-size: var(--step--2); margin-block-start: -0.45rem; }

   .datatree pre { background: none; border-inline-start: 0; padding-inline: 0; font-variant-numeric: tabular-nums lining-nums; }

   .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:not(.table-sort), .control-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;
   }
   .control-button { display: inline-flex; align-items: baseline; gap: 1.5ch; text-decoration: none; }
   .control-button kbd { color: inherit; font: inherit; opacity: 0.72; }
   button:not(.table-sort):hover, .control-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; }
   .choices { display: grid; gap: 0.25rem; }
   .choice { display: flex; align-items: baseline; gap: 0.55ch; margin: 0; color: var(--ink); }
   output { font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; }

   /* SPARQL — source, action, state, then the ordinary house data table. */
   .sparql form { display: grid; gap: 0.35rlh; }
   .sparql textarea[name="query"] {
      min-block-size: 9rlh;
      overflow-x: auto;
      white-space: pre;
      tab-size: 3;
      background: var(--wash);
      border: 0;
      border-inline-start: 2px solid var(--rule);
      padding: 0.75rem 1rem;
      line-height: 1.55;
   }
   .sparql menu { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; list-style: none; }
   .sparql output { display: block; min-block-size: 1lh; color: var(--ink-mute); }
   .sparql [data-sparql-results]:not(:empty) { margin-block-start: 0.5rlh; }
   .sparql [data-sparql-results][aria-busy="true"] { opacity: 0.72; }
   .sparql [data-sparql-markdown] { margin-block-start: 0.5rlh; }
   .sparql [data-sparql-source] { min-block-size: 6rlh; }
   .sparql td > small { display: inline; margin-inline-start: 0.5ch; }
   .sparql button:disabled { opacity: 0.5; }
}

@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); }
   .embed > :is(img, video) { display: block; inline-size: 100%; block-size: auto; }
   .embed > audio { inline-size: 100%; }
   .embed-representation { margin-block-start: 0.5rlh; }
   .embed-representation::before { content: attr(data-kind) " · " attr(data-source); display: block; color: var(--ink-mute); font-family: var(--font-mono); font-size: var(--step--1); }
   .embed-representation pre { margin-block: 0.15rlh 0; white-space: pre-wrap; }
   .embed-original { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.15rlh 0.7rem; margin-block-start: 0.5rlh; color: var(--ink-mute); font-size: var(--step--1); }
   .embed-original :is(dt, dd) { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }

   /* 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; }

   /* The map figure. The system ships the frame, the profile and the controls;
      the tiles come off the network, so the map itself is the project's module
      and this stays a captioned empty frame without it. Every colour resolves
      from the tokens, which is what makes the drawn styles greyscale by
      default — hue is reserved for the track and the cursor. */
   .map .map-frame {
      position: relative;
      inline-size: 100%;
      aspect-ratio: 16 / 9;
      border: var(--hairline) solid var(--rule);
      background: var(--wash);
      overflow: clip;
   }
   .map .map-frame canvas { display: block; }
   .map .map-frame:fullscreen { aspect-ratio: auto; block-size: 100%; }

   /* the profile: one horizontal panel under the map, a channel per row */
   .map-profile { display: grid; gap: 0.2rlh; margin-block-start: 0.5rlh; }
   .map-profile svg { inline-size: 100%; block-size: 5rlh; display: block; overflow: visible; }
   .map-profile .track { fill: none; stroke: var(--ink-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
   .map-profile .band { fill: var(--wash); }
   .map-profile .cursor { stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; }
   .map-profile .channel { display: grid; grid-template-columns: 6ch 1fr; align-items: center; gap: 1ch; }
   .map-profile .channel > span { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-mute); }

   /* the scrubber, the read-out and the track list — all of it monospaced,
      because every value in them is a number the eye compares down a column */
   .map-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1ch; margin-block-start: 0.4rlh; font-family: var(--font-mono); font-size: var(--step--1); }
   .map-controls input[type="range"] { flex: 1 1 12rem; accent-color: var(--accent); }
   .map-controls output { color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; }
   .map-controls button { background: none; color: var(--ink-soft); border: var(--hairline) solid var(--rule-strong); padding-inline: 1ch; }
   .map-controls button:hover { color: var(--accent); border-color: var(--accent); }
   .map-controls button[aria-pressed="true"] { color: var(--paper); background: var(--accent); border-color: var(--accent); }
   .map-tracks { max-block-size: 12rlh; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; margin-block-start: 0.4rlh; font-family: var(--font-mono); font-size: var(--step--1); }
   .map-tracks button { display: grid; grid-template-columns: 1fr 9ch 6ch; gap: 1ch; inline-size: 100%; text-align: start; padding-block: 0.1rem; border: 0; border-block-end: var(--hairline) solid var(--rule); background: none; color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; }
   .map-tracks button :is(data, time) { text-align: end; color: var(--ink-mute); }
   .map-tracks button:hover { color: var(--accent); }
   .map-tracks button[aria-current="true"] { color: var(--ink); border-block-end-color: var(--accent); }
}

@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, .sparql [data-sparql-status], .sparql [data-sparql-markdown] { display: none; }
      a { text-decoration-line: none; }
      .page-grid { row-gap: 0.5rlh; }
      pre, .card, .media-frame { border: var(--hairline) solid var(--rule); }
      .sparql textarea[name="query"] { resize: none; 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);
   }
}

/* ---------------------------------------------------------------------------
   Wikidata identifiers (CONTRACT §4). An identifier is never shown alone: the
   label carries the meaning, the id carries the identity and the link, and the
   id is set subordinate to the label — mono, smaller, muted. The class names
   are Wikibase's own, as wikidata.org emits them (wb-itemlink, wikibase-title,
   entitytermsview, statementgroupview, statementview, snakview, referenceview),
   so a consumer styles the markup it already has instead of a second
   vocabulary for the same thing. Labels come from the consumer's cache; no
   rule here fetches anything, and none of them invents a label from an id.
   --------------------------------------------------------------------------- */

@layer components {
   /* the identifier inline: label first, in the text face; id after it, quieter.
      The lexeme form/sense id headers are the same slot and take the same ink. */
   .wb-itemlink-id,
   .wikibase-lexeme-form-id,
   .wikibase-lexeme-sense-id {
      font-family: var(--font-mono);
      font-size: 0.78em;
      font-variant-numeric: lining-nums tabular-nums;
      color: var(--ink-mute);
      white-space: nowrap;
   }
   .wb-itemlink-description { color: var(--ink-mute); font-size: var(--step--1); }

   /* a label the cache cannot supply is shown as the absence it is — the
      consumer's own placeholder text, marked; the id never moves up to stand
      in for a name */
   .wb-empty { font-style: italic; color: var(--ink-mute); }

   /* the term came from a language other than the document's; which one is
      data, so it is shown, in the apparatus face at the sidenote's altitude */
   .wb-language-fallback-indicator {
      font-family: var(--font-mono);
      font-size: 0.62em;
      color: var(--ink-mute);
      vertical-align: baseline;
      position: relative;
      inset-block-start: -0.45em;
      margin-inline-start: 0.3ch;
   }

   /* an item: the title pair, then description and aliases */
   .wikibase-entityview { display: grid; row-gap: 0.35rlh; }
   .wikibase-title-id {
      font-family: var(--font-mono);
      font-size: var(--step-0);
      font-style: normal;
      font-weight: 400;
      font-variant-numeric: lining-nums tabular-nums;
      color: var(--ink-mute);
      white-space: nowrap;
   }
   .wikibase-entitytermsview-heading-description {
      font-size: var(--step-1);
      font-style: italic;
      line-height: 1.35;
      color: var(--ink-soft);
   }
   .wikibase-entitytermsview-aliases {
      display: flex;
      flex-wrap: wrap;
      column-gap: 1ch;
      list-style: none;
      padding-inline-start: 0;
      font-family: var(--font-mono);
      font-size: var(--step--1);
      color: var(--ink-mute);
   }
   .wikibase-entitytermsview-aliases li + li { margin-block-start: 0; }
   .wikibase-entitytermsview-aliases-alias:not(:last-child)::after {
      content: attr(data-aliases-separator);
      margin-inline-start: 1ch;
   }

   /* statements: the property is named once, at the group heading, and its
      values nest beneath it — repetition of the property is the duplication
      this grouping exists to delete */
   .wikibase-statementgrouplistview { container-type: inline-size; }
   .wikibase-listview { display: grid; row-gap: 0.35rlh; }
   .wikibase-statementgroupview {
      display: grid;
      grid-template-columns: minmax(0, 12ch) minmax(0, 1fr);
      column-gap: 2ch;
      border-block-start: var(--hairline) solid var(--rule);
      padding-block-start: 0.35rlh;
   }
   .wikibase-statementgroupview-property-label {
      font-family: var(--font-mono);
      font-size: var(--step--1);
      line-height: 1.35;
      color: var(--ink-soft);
      text-wrap: pretty;
   }
   .wikibase-statementgroupview-property-label a { text-decoration-line: none; }
   .wikibase-statementlistview-listview { display: grid; row-gap: 0.3rlh; }

   /* one statement: the value on its line, the rank mark at the end of it,
      qualifiers and references nested under the value they qualify and support */
   .wikibase-statementview {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: 1.5ch;
      row-gap: 0.15rlh;
      align-items: baseline;
   }
   .wikibase-statementview-mainsnak-container { grid-column: 1; grid-row: 1; }
   .wikibase-statementview-rankselector { grid-column: 2; grid-row: 1; justify-self: end; }
   .wikibase-statementview-qualifiers,
   .wikibase-statementview-references-container { grid-column: 1 / -1; }
   /* a deprecated statement recedes; it is the rank mark's word that says why */
   .wikibase-statementview.wb-deprecated { color: var(--ink-mute); }
   .wikibase-rankselector {
      font-family: var(--font-mono);
      font-size: var(--step--1);
      font-variant-caps: all-small-caps;
      letter-spacing: 0.06em;
      color: var(--ink-mute);
   }

   /* a snak is one line: the property names the slot, the value fills it.
      Inside a group the property is already named at the heading, so Wikibase
      leaves the main snak's property empty and it collapses to nothing. */
   .wikibase-snakview > *,
   .wikibase-snakview-property-container > *,
   .wikibase-snakview-value-container > *,
   .wikibase-snakview-body > * { display: inline; }
   .wikibase-snakview-property {
      font-family: var(--font-mono);
      font-size: var(--step--1);
      color: var(--ink-soft);
      margin-inline-end: 0.75ch;
   }
   .wikibase-snakview-property:empty { margin-inline-end: 0; }
   .wikibase-snakview-property a { text-decoration-line: none; }

   .wikibase-statementview-qualifiers,
   .wikibase-statementview-references {
      border-inline-start: var(--hairline) solid var(--rule);
      padding-inline-start: 1.5ch;
      font-size: var(--step--1);
      color: var(--ink-soft);
   }
   /* references live inside the statement they support, folded until asked for */
   .wikibase-statementview-references-container { border-block: 0; padding-block: 0; }
   .wikibase-statementview-references-heading {
      font-family: var(--font-mono);
      font-size: var(--step--1);
      color: var(--ink-mute);
   }

   /* narrow: the property heading stops being a column and becomes a line */
   @container (inline-size < 30rem) {
      .wikibase-statementgroupview { grid-template-columns: minmax(0, 1fr); }
   }
}