@wxxb789/anc 0.0.1

package/src/styles/global.css

@@ -0,0 +1,1739 @@
+@import './tokens.css';
+
+/*
+ * Layout shell and reading surface.
+ *
+ * Everything here is plain CSS with no JavaScript dependency: the theme follows
+ * `prefers-color-scheme` through `light-dark()` in `tokens.css`, and the two
+ * preference toggles only override an attribute that CSS already understands.
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+  /* Keeps an in-page anchor target clear of the sticky header. The header
+     wraps to several rows at 320 px, so the mobile-first value allows for
+     that and the wide-viewport override below tightens it. */
+  scroll-padding-top: 9rem;
+}
+
+body {
+  margin: 0;
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: var(--leading-body);
+  /* A long unbroken token (a URL, a hash) must wrap rather than widen the page. */
+  overflow-wrap: break-word;
+}
+
+/*
+ * Mixed zh-CN / English line breaking.
+ *
+ * `word-break: normal` keeps English words whole; CJK already breaks between
+ * characters, so nothing extra is needed to wrap Chinese text. `line-break:
+ * strict` stops a line from starting with a CJK closing bracket or ending with
+ * an opening one, which is the visible failure mode in bilingual prose.
+ */
+:where(body) {
+  word-break: normal;
+  line-break: strict;
+}
+
+:is(h1, h2, h3, h4, h5, h6) {
+  line-height: var(--leading-tight);
+  text-wrap: balance;
+}
+
+p,
+li {
+  text-wrap: pretty;
+}
+
+a {
+  color: var(--color-link);
+  text-underline-offset: 0.2em;
+}
+
+/* Focus is never signalled by colour alone: the ring is a shape change too. */
+:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+:is(img, svg, video) {
+  max-width: 100%;
+  height: auto;
+}
+
+.skip-link {
+  position: absolute;
+  top: var(--space-2);
+  left: var(--space-2);
+  z-index: 100;
+  padding: var(--space-2) var(--space-4);
+  border: 1px solid var(--color-line-strong);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-text);
+  box-shadow: var(--elevation-2);
+  /* Off-screen until focused, rather than `display: none`, so it stays tabbable. */
+  transform: translateY(calc(-100% - var(--space-4)));
+  transition: transform var(--motion-fast) var(--ease);
+}
+
+.skip-link:focus-visible {
+  transform: translateY(0);
+}
+
+/*
+ * Controls that only work with JavaScript. `theme-init.js` sets `data-js` on
+ * the root before first paint, so they never appear as dead buttons.
+ *
+ * The selector deliberately outranks `.site-nav a, .site-nav button` below: a
+ * bare `[data-js-only]` is (0,1,0) and loses to that rule's (0,1,1), which
+ * would leave these visible with scripting disabled — the failure this rule
+ * exists to prevent. `tests/built-output.test.ts` resolves the cascade.
+ */
+:root:not([data-js='on']) [data-js-only] {
+  display: none;
+}
+
+/* ---------------------------------------------------------------- shell -- */
+
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-3) var(--gutter);
+  border-bottom: 1px solid var(--color-line);
+  background: var(--color-bg);
+}
+
+.brand {
+  color: var(--color-text);
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  text-decoration: none;
+}
+
+.site-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  align-items: center;
+}
+
+.site-nav a,
+.site-nav button {
+  display: inline-flex;
+  gap: var(--space-1);
+  align-items: center;
+  padding: var(--space-1) var(--space-2);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--color-muted);
+  font: inherit;
+  font-size: var(--text-sm);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.site-nav a:hover,
+.site-nav button:hover {
+  border-color: var(--color-line-strong);
+  color: var(--color-text);
+}
+
+/* Pressed state carries a border and a background, not just a colour shift. */
+.site-nav button[aria-pressed='true'] {
+  border-color: var(--color-accent);
+  background: var(--color-wash);
+  color: var(--color-text);
+}
+
+main {
+  width: min(var(--width-page), 100%);
+  margin: 0 auto;
+  padding: var(--space-12) var(--gutter) var(--space-16);
+}
+
+/* `#main` is focused programmatically by the skip link and carries
+   `tabindex="-1"`, so it is never reached by Tab. Suppress the ring only for
+   that programmatic case; `:focus-visible` keeps it wherever a browser judges
+   the focus worth showing. */
+main:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* ------------------------------------------------------------ explorer -- */
+
+/*
+ * The collection rail (TK-05c).
+ *
+ * Below the two-column breakpoint it is a block after the article: one column,
+ * every group closed except the reader's own, and the disclosures *are* the
+ * drawer requirements section 16 asks for on mobile. The desktop treatment —
+ * sticky, beside the article — is the `@media (min-width: 64rem)` block at the
+ * end of this file.
+ *
+ * Nothing here needs JavaScript. `<details>` is the collapse, `position: sticky`
+ * is the follow, and `aria-current` is the location; there is no script to load
+ * and no state to persist.
+ */
+.explorer {
+  width: min(var(--width-page), 100%);
+  margin: 0 auto var(--space-16);
+  padding: 0 var(--gutter);
+  font-size: var(--text-sm);
+}
+
+.explorer-groups,
+.explorer-notes {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.explorer-group {
+  border-bottom: 1px solid var(--color-line);
+}
+
+.explorer-group > summary {
+  display: flex;
+  gap: var(--space-2);
+  justify-content: space-between;
+  align-items: baseline;
+  padding: var(--space-3) var(--space-1);
+  color: var(--color-text);
+  font-weight: 600;
+  cursor: pointer;
+}
+
+/* Text, not a badge — same treatment as every other count on the site. */
+.explorer-count {
+  color: var(--color-muted);
+  font-size: var(--text-xs);
+  font-variant-numeric: tabular-nums;
+}
+
+/*
+ * The open/close transition, on the native `::details-content` pseudo-element.
+ *
+ * This is Quartz's `0fr → 1fr` idea reached through the platform instead of
+ * through script: `interpolate-size: allow-keywords` lets `block-size` animate
+ * between `0` and `auto`, and `content-visibility` is in the transition list
+ * with `allow-discrete` so the content is not clipped away before the height
+ * has finished collapsing.
+ *
+ * A `transition`, deliberately **not** an `animation`, and that distinction is a
+ * WCAG fix rather than a stylistic one. An `animation` on `[open]` runs when the
+ * page *loads*, because the reader's own group is already open in the served
+ * HTML — so the rail faded in from `opacity: 0` on every navigation, and the
+ * out-of-band axe audit caught the links mid-fade at a computed 4.44:1 against
+ * the 4.5 threshold, on 245 nodes across both corpora. A transition fires only
+ * on a state change, so an already-open group is simply open at first paint and
+ * there is no partial-opacity frame for anything to measure. That audit is run
+ * from `.tmp/axe-audit.mjs` against an `axe.min.js` on disk — axe-core is in
+ * neither `dependencies` nor `devDependencies`, so no gate in this repository
+ * recomputes the number and TK-09 owns whether one should.
+ *
+ * `::details-content` rather than Quartz's `grid-template-rows: 0fr → 1fr`,
+ * which was the shape L5 named. Both are transitions and either would have
+ * fixed the contrast defect; the reason to prefer this one is that
+ * `grid-template-rows` needs a wrapper element to be the single grid row, and
+ * a `<details>` given `display: grid` loses the browser's own open/closed box
+ * behaviour — so that shape costs a `<div>` per group whose only job is to be
+ * animated. The trade is browser support: `interpolate-size` is Chromium-only
+ * today, where `grid-template-rows` is not. That is why the whole block sits
+ * behind `@supports` and the collapse itself is the native `<details>` — a
+ * browser that skips this snaps open exactly as it always has, which is a
+ * missing animation rather than a missing feature.
+ *
+ * The `prefers-reduced-motion` block at the end of this file turns the
+ * transition off. It needs `*::details-content` in its selector list to do so:
+ * a type selector matches elements and never a pseudo-element, so `*` alone
+ * left this transition running at its full duration under `reduce`.
+ */
+@supports (interpolate-size: allow-keywords) {
+  .explorer-group {
+    interpolate-size: allow-keywords;
+  }
+
+  .explorer-group::details-content {
+    block-size: 0;
+    /*
+     * `clip` with a margin rather than `hidden`, so the focus ring survives.
+     *
+     * This pseudo-element is a clip box that hugs the links exactly, and the
+     * global ring is a 2 px outline at `outline-offset: 2px` — so under
+     * `overflow: hidden` every link's ring was cut flat on both horizontal
+     * edges. Measured: 0 px of ring reached the left and right of a note link
+     * at every width, against the 4 px it needs. The rail's own padding cannot
+     * fix this one; it is a second, inner clip box.
+     *
+     * `overflow-clip-margin` lets the ring paint outside the box while the box
+     * still clips the collapse — which `scroll` or `visible` would not, since
+     * either would let a closed group's links bleed below its summary. WCAG
+     * 2.4.11.
+     */
+    overflow: clip;
+    overflow-clip-margin: 4px;
+    transition:
+      block-size var(--motion-fast) var(--ease),
+      content-visibility var(--motion-fast) allow-discrete;
+  }
+
+  .explorer-group[open]::details-content {
+    block-size: auto;
+  }
+}
+
+.explorer-index,
+.explorer-notes a {
+  display: block;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+  color: var(--color-link);
+  text-decoration: none;
+}
+
+.explorer-index {
+  color: var(--color-muted);
+  font-size: var(--text-xs);
+}
+
+.explorer-notes {
+  padding-bottom: var(--space-2);
+}
+
+.explorer-index:hover,
+.explorer-notes a:hover,
+.explorer-index:focus-visible,
+.explorer-notes a:focus-visible {
+  background: var(--color-wash);
+  text-decoration: underline;
+}
+
+/*
+ * A windowed group's own sentence: how many of its notes the rail drew, and
+ * where the rest are. Same muted treatment as `.explorer-index`, because it is
+ * the same kind of thing — a note about the list rather than a member of it.
+ */
+.explorer-bound {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin: 0;
+  padding: var(--space-1) var(--space-2) var(--space-2);
+  color: var(--color-muted);
+  font-size: var(--text-xs);
+}
+
+.explorer-bound a {
+  color: var(--color-link);
+}
+
+/*
+ * The page being read. Three signals, not one: a weight change, a left rule,
+ * and the text colour. WCAG 1.4.1 — a reader who cannot distinguish the colour
+ * still sees where they are, and `aria-current="page"` says it outright to a
+ * screen reader.
+ */
+.explorer-notes a[aria-current='page'] {
+  border-left: 3px solid var(--color-accent);
+  background: var(--color-wash);
+  color: var(--color-text);
+  font-weight: 700;
+}
+
+.site-footer {
+  padding: var(--space-8) var(--gutter);
+  border-top: 1px solid var(--color-line);
+  color: var(--color-muted);
+  font-size: var(--text-sm);
+}
+
+.site-footer p {
+  max-width: var(--measure);
+  margin: 0;
+}
+
+/* The site map is the guarantee that no route is an orphan, so it lays out as
+   wrapping text links that stay operable at 320 px. */
+.site-map {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-4);
+  margin-bottom: var(--space-4);
+}
+
+/* Shown only on paper — the canonical route belongs on a printed page, not on
+   a screen where the address bar already carries it. */
+.print-only {
+  display: none;
+}
+
+/* ------------------------------------------------------------- surfaces -- */
+
+.hero {
+  max-width: var(--measure);
+  padding-bottom: var(--space-12);
+}
+
+.eyebrow {
+  margin: 0;
+  color: var(--color-accent);
+  font: 700 var(--text-xs) / 1 var(--font-mono);
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.hero h1 {
+  margin: var(--space-4) 0 var(--space-4);
+  font-size: var(--text-3xl);
+  letter-spacing: -0.04em;
+}
+
+.hero > p:last-child {
+  color: var(--color-muted);
+  font-size: var(--text-lg);
+}
+
+.section-heading {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  justify-content: space-between;
+  align-items: baseline;
+  padding-bottom: var(--space-2);
+  border-bottom: 1px solid var(--color-line);
+}
+
+.section-heading h2 {
+  margin: 0;
+  font-size: var(--text-xl);
+}
+
+.section-heading span {
+  color: var(--color-muted);
+  font-size: var(--text-sm);
+}
+
+/* `minmax(0, …)` rather than a fixed floor: a fixed floor is what pushes a
+   grid past a 320 px viewport. */
+.note-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
+  gap: var(--space-4);
+  margin-top: var(--space-6);
+}
+
+.note-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 0;
+  padding: var(--space-6);
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  box-shadow: var(--elevation-1);
+}
+
+.note-card h3 {
+  margin: 0;
+  font-size: var(--text-lg);
+}
+
+.note-card h3 a {
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.note-card h3 a:hover {
+  text-decoration: underline;
+}
+
+.note-card p {
+  margin: 0;
+  color: var(--color-muted);
+  font-size: var(--text-sm);
+}
+
+.read-more {
+  margin-top: auto;
+  font-size: var(--text-sm);
+}
+
+/* ------------------------------------------------- facets and empty states -- */
+
+/*
+ * An empty tag or collection index is the normal state for the current
+ * projection, not an error, so it reads as ordinary prose rather than as a
+ * warning. Nothing here is signalled by colour.
+ */
+.empty-state,
+.facet-note {
+  max-width: var(--measure);
+  margin: var(--space-6) 0 0;
+  color: var(--color-muted);
+}
+
+.facet-list {
+  max-width: var(--measure);
+  margin: var(--space-6) 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.facet-list li {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-4);
+  justify-content: space-between;
+  align-items: baseline;
+  padding: var(--space-3) 0;
+  border-bottom: 1px solid var(--color-line);
+}
+
+/* Text, not a badge. Same treatment as the facet count, which is the same
+   information in the same relationship to a heading — one rule rather than two
+   that would drift. */
+.facet-count,
+.relations-count {
+  color: var(--color-muted);
+  font-size: var(--text-sm);
+}
+
+/* ---------------------------------------------------------------- prose -- */
+
+.prose {
+  max-width: var(--measure);
+  margin-inline: auto;
+  min-width: 0;
+}
+
+.prose h1 {
+  font-size: var(--text-2xl);
+  letter-spacing: -0.03em;
+}
+
+.prose h2 {
+  margin-top: var(--space-12);
+  padding-bottom: var(--space-2);
+  border-bottom: 1px solid var(--color-line);
+  font-size: var(--text-xl);
+}
+
+.prose h3 {
+  margin-top: var(--space-8);
+  font-size: var(--text-lg);
+}
+
+/* In-content links keep their underline: the link is not signalled by colour
+   alone. Navigation and card links are distinguished by position and role. */
+.prose a {
+  text-decoration: underline;
+}
+
+.prose pre {
+  max-width: 100%;
+  overflow-x: auto;
+  padding: var(--space-4);
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-alt);
+  font-size: var(--text-sm);
+}
+
+.prose code {
+  font-family: var(--font-mono);
+  font-size: 0.925em;
+}
+
+.prose :not(pre) > code {
+  padding: 0.1em 0.35em;
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-alt);
+}
+
+.prose blockquote {
+  margin-inline: 0;
+  padding-left: var(--space-4);
+  border-left: 3px solid var(--color-accent);
+  color: var(--color-muted);
+}
+
+/* --------------------------------------------------- rendered markdown -- */
+
+/*
+ * Every class `src/lib/markdown.ts` can emit has a rule below, or is named in
+ * the "deliberately unstyled" block at the end of this section, or lives in a
+ * per-page stylesheet that loads only where it is needed: the `token-*` map in
+ * `src/styles/code.css`, the math classes in `src/styles/math.css`, and the
+ * diagram classes in `src/styles/diagram.css`. The allowlist at `markdown.ts`
+ * is the list: `heading-anchor`, `code-block`, `language-*`, `token` and
+ * `token-*`, `callout` and `callout-*`, `callout-title`, `contains-task-list`,
+ * `task-list-item`, `footnotes`, `data-footnote-backref`, `sr-only`,
+ * `math-inline`, `math-display`, `diagram`, `diagram-canvas`, `diagram-source`.
+ *
+ * Quartz's thirteen-kind callout vocabulary and its mask-image icon set are
+ * deliberately not imported: the corpus has zero callouts, and a colour-per-kind
+ * table is thirteen decisions for a construct nobody has written yet. One
+ * neutral callout treatment carries the label, which is the part that means
+ * something.
+ */
+
+/*
+ * The one live accessibility bug in this section. satteri emits
+ * `<h2 class="sr-only" id="footnote-label">Footnotes</h2>` and, with no rule for
+ * it, that heading rendered as a full-size visible heading above the footnote
+ * list — a piece of generated scaffolding presented to the reader as content.
+ *
+ * The clip-path recipe rather than `display: none` or `visibility: hidden`,
+ * because those remove the element from the accessibility tree too, which is
+ * the opposite of what a screen-reader-only heading is for.
+ */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/*
+ * The heading anchor: a `#` that appears on hover or focus.
+ *
+ * Hidden until then rather than always visible, because fifteen of them down an
+ * article is visual noise — but `opacity`, not `display: none`, so the link
+ * stays in the tab order and in the accessibility tree. It carries its own
+ * `aria-label` from the renderer, so its `#` is decoration a screen reader never
+ * has to read as a heading's name.
+ *
+ * `.prose .heading-anchor`, not a bare `.heading-anchor`: `.prose a` is (0,1,1)
+ * and sets `text-decoration: underline` on every in-content link, so a (0,1,0)
+ * rule loses and the `#` ships underlined. The same trap TK-02 documented for
+ * `[data-js-only]` against `.site-nav button`.
+ */
+.prose .heading-anchor {
+  margin-left: var(--space-2);
+  color: var(--color-muted);
+  font-weight: 400;
+  text-decoration: none;
+  opacity: 0;
+  transition: opacity var(--motion-fast) var(--ease);
+}
+
+:is(h1, h2, h3, h4, h5, h6):hover > .heading-anchor,
+.heading-anchor:focus-visible {
+  opacity: 1;
+}
+
+/* Touch and keyboard have no hover, so the anchor is simply always there. */
+@media (hover: none) {
+  .heading-anchor {
+    opacity: 1;
+  }
+}
+
+/*
+ * A fenced code block. `<figure>` carries a UA `margin-inline: 40px` that would
+ * indent every code block away from the prose, so the margin is set explicitly.
+ * `min-width: 0` stops the figure from being sized by its widest line — the
+ * classic way a code block widens the whole page — leaving `.prose pre`'s own
+ * `overflow-x: auto` to do the scrolling.
+ */
+.code-block {
+  margin: var(--space-6) 0;
+  min-width: 0;
+}
+
+.code-block > pre {
+  margin: 0;
+}
+
+/*
+ * Syntax highlighting is not here. The `token-*` map lives in
+ * `src/styles/code.css`, which `src/pages/notes/[slug].astro` links only when
+ * `RenderedNote.hasCode` is true — owner decision 7, heavy assets load per page.
+ * `.code-block` stays in this file on purpose: a Mermaid fence renders as one
+ * while setting `hasMermaid` rather than `hasCode`, so gating the figure's own
+ * rules would leave a diagram-only page with an unstyled block.
+ */
+
+/*
+ * A callout. One neutral treatment for every kind: the kind is announced by the
+ * title text the renderer promotes to `<strong>`, not by a colour a reader has
+ * to have learned. `data-callout` is on the element for a later ticket that
+ * decides whether differentiating them is worth a second visual vocabulary.
+ *
+ * The published corpus has none; TK-11's fixture has `note`, `tip`, and
+ * `warning`, which is what makes this rule observable at all. That does not
+ * change the treatment — it is what confirms the neutral one reads correctly
+ * when three kinds sit on one page.
+ *
+ * `.prose .callout`, not a bare `.callout`: a callout *is* a `<blockquote>`, and
+ * `.prose blockquote` (0,1,1) would otherwise win and paint it muted-on-muted.
+ */
+.prose .callout {
+  margin: var(--space-6) 0;
+  padding: var(--space-4);
+  border-left: 3px solid var(--color-accent);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  background: var(--color-surface-alt);
+  color: var(--color-text);
+}
+
+.callout > :first-child {
+  margin-top: 0;
+}
+
+.callout > :last-child {
+  margin-bottom: 0;
+}
+
+.callout-title {
+  display: block;
+  color: var(--color-accent);
+}
+
+/*
+ * Task lists. The checkboxes are `disabled` by the renderer — they are printed
+ * state, not controls — so the list loses its bullet and the box sits in the
+ * margin rather than indenting the text away from every other list.
+ */
+.contains-task-list {
+  padding-left: 0;
+  list-style: none;
+}
+
+.task-list-item {
+  padding-left: 1.6em;
+  text-indent: -1.6em;
+}
+
+.task-list-item > input[type='checkbox'] {
+  width: 1em;
+  height: 1em;
+  margin-right: 0.6em;
+  text-indent: 0;
+  vertical-align: -0.1em;
+}
+
+/* Footnotes: a smaller, separated block at the end of the article. */
+.footnotes {
+  margin-top: var(--space-12);
+  padding-top: var(--space-6);
+  border-top: 1px solid var(--color-line);
+  color: var(--color-muted);
+  font-size: var(--text-sm);
+}
+
+.footnotes li:target {
+  background: var(--color-wash);
+}
+
+/* The `↩` back-reference is a link, so it gets the link treatment and a target
+   large enough to hit — the glyph alone is well under the 24 px minimum.
+   Scoped to `.prose` for the same specificity reason as `.heading-anchor`. */
+.prose .data-footnote-backref {
+  display: inline-block;
+  min-width: 1.5em;
+  text-align: center;
+  text-decoration: none;
+}
+
+/*
+ * Math and diagrams are styled by `src/styles/math.css` and
+ * `src/styles/diagram.css`, which load only on the pages that carry one — owner
+ * decision 7. `math-inline`, `math-display`, `diagram`, and the classes the
+ * diagram flattening pass writes are therefore deliberately absent here rather
+ * than missing: a rule in this sheet would ship the styling to every page and
+ * defeat the gating.
+ *
+ * Until TK-15 this file styled `math-inline`/`math-display` as monospace source,
+ * which was correct while math was a downgrade and is wrong now that it is
+ * MathML: the monospace family and the literal colour would override the math
+ * font on every expression.
+ */
+
+/*
+ * Deliberately unstyled, with the reason:
+ *
+ * - `token` — the bare class Prism puts on every token alongside its specific
+ *   one. A colour here would apply to *every* token, and the built `<head>`
+ *   orders `code.css` before this sheet, so at equal specificity this rule
+ *   would win and repaint the whole stream one colour. Inheriting the body
+ *   colour is both the correct unhighlighted default and the safe one.
+ * - `language-*` — the fence language is already carried visually by the block
+ *   itself and semantically by `data-code-language`.
+ * - `callout-*` — the per-kind classes. See the `.callout` note above: every
+ *   kind gets one neutral treatment, and the kind is carried by the title text
+ *   rather than by a colour. TK-11's fixture ships three of them, so this is
+ *   now a deliberate choice observed at scale rather than an untested default.
+ *
+ * This block is the single record, including for the classes `code.css` styles:
+ * `tests/built-output.test.ts` reads it and asserts each name appears, so a
+ * second copy beside those rules would be an unchecked one.
+ */
+
+/* ponytail: a wide table still needs a scroll container, and a wrapper element
+   is the Markdown pipeline's to emit. TK-03 owns that; styling it here without
+   the wrapper would mean `display: block`, which strips table semantics. */
+.prose table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.prose :is(th, td) {
+  padding: var(--space-2) var(--space-3);
+  /* `--color-line-strong`, not `--color-line`: a gridline is the only thing
+     separating one cell's data from the next, so it carries information and
+     needs the 3:1 non-text contrast. `--color-line` is for decorative rules
+     where the layout already communicates the boundary. */
+  border: 1px solid var(--color-line-strong);
+  text-align: left;
+}
+
+/* ------------------------------------------------------- note anatomy -- */
+
+/*
+ * Requirements section 9.2's thirteen elements, in the order the page emits
+ * them. Everything here is above or below `.prose` rather than inside it: the
+ * article body is rendered Markdown and its rules are the section above.
+ *
+ * `--measure` on each region, not a shared wrapper, so a region can opt out
+ * when its content is not prose — none does yet, and the day the table of
+ * contents moves into a rail (TK-05c) it stops being a measure-width block
+ * without dragging the header and footer with it.
+ */
+
+.note-header,
+.note-footer {
+  max-width: var(--measure);
+  margin-inline: auto;
+}
+
+.note-header {
+  margin-bottom: var(--space-8);
+}
+
+/*
+ * The trail. `<ol>` because the order is the meaning, and the separator is
+ * generated content rather than markup so it is decoration a reader can never
+ * select or a screen reader mistake for a crumb.
+ *
+ * `content: '/' / ''` gives the generated string empty alternative text, so a
+ * screen reader that supports the syntax announces "Home, Notes, <title>"
+ * rather than interleaving "slash". In a browser that does not, the whole
+ * declaration is invalid and the separator simply does not render — the
+ * crumbs are still spaced `<li>` elements in an ordered list, which reads
+ * correctly. That is the safe direction for an unsupported value, and it is why
+ * this is worth using here and not on the table of contents' counters, where
+ * losing the number would cost a sighted reader the depth cue.
+ */
+.breadcrumbs ol {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1) var(--space-2);
+  margin: 0;
+  padding: 0;
+  color: var(--color-muted);
+  font-size: var(--text-sm);
+  list-style: none;
+}
+
+.breadcrumbs li + li::before {
+  content: '/' / '';
+  margin-right: var(--space-2);
+  color: var(--color-line-strong);
+}
+
+.breadcrumbs [aria-current='page'] {
+  color: var(--color-text);
+}
+
+.note-title {
+  margin: var(--space-4) 0 0;
+  font-size: var(--text-2xl);
+  letter-spacing: -0.03em;
+}
+
+/*
+ * Public metadata: a description list, because each row genuinely is a term and
+ * its value. The label is text, never an icon alone, so nothing here depends on
+ * recognizing a glyph — and nothing is encoded by colour.
+ */
+.note-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-6);
+  margin: var(--space-4) 0 0;
+  color: var(--color-muted);
+  font-size: var(--text-sm);
+}
+
+.note-meta > div {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  align-items: baseline;
+}
+
+.note-meta dt {
+  font-weight: 600;
+}
+
+.note-meta dd {
+  margin: 0;
+}
+
+/* Public label lists inside metadata rows: semantic lists, wrapping, comma-free. */
+.note-tags,
+.note-aliases {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.note-tags a {
+  display: inline-block;
+  padding: 0 var(--space-2);
+  border: 1px solid var(--color-line-strong);
+  border-radius: var(--radius-sm);
+}
+
+/*
+ * The optional summary, when the artifact carries a `description` distinct from
+ * the excerpt. Larger than body text and not italic: an italic run of two lines
+ * is harder to read and says nothing the position does not already say.
+ */
+.note-summary {
+  margin: var(--space-6) 0 0;
+  padding-left: var(--space-4);
+  border-left: 3px solid var(--color-accent);
+  color: var(--color-muted);
+  font-size: var(--text-lg);
+}
+
+/*
+ * The table of contents.
+ *
+ * `<details open>` is the collapse: native, keyboard-operable, announced as a
+ * disclosure, and zero JavaScript. The summary is the only interactive chrome,
+ * and it keeps a real focus ring because `:focus-visible` is global.
+ */
+.toc {
+  max-width: var(--measure);
+  margin: 0 auto var(--space-8);
+  padding: var(--space-4) var(--space-6);
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+}
+
+.toc-details > summary {
+  color: var(--color-text);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+/*
+ * Nested ordered lists, numbered by CSS counters rather than by the browser's
+ * default numbering, so a nested item reads `2.1` and depth is legible from the
+ * number as well as from the indentation — which matters at 320 px, where three
+ * levels of indent would cost more width than the text can spare.
+ *
+ * `list-style: none` removes the browser's own marker, which a screen reader
+ * would otherwise announce alongside this one. The list is still an `<ol>`, so
+ * the position and the count are conveyed by the element, not by the digits:
+ * nothing here is information a reader gets only from the generated content.
+ */
+.toc-list {
+  margin: var(--space-3) 0 0;
+  padding-left: var(--space-4);
+  counter-reset: toc-item;
+  list-style: none;
+}
+
+.toc-list .toc-list {
+  margin-top: var(--space-1);
+}
+
+.toc-list li {
+  margin-top: var(--space-1);
+  counter-increment: toc-item;
+  font-size: var(--text-sm);
+  text-indent: -1.4em;
+  padding-left: 1.4em;
+}
+
+.toc-list li::before {
+  content: counters(toc-item, '.') '. ';
+  color: var(--color-muted);
+}
+
+/*
+ * `--color-link`, declared rather than inherited. Quartz's unread
+ * table-of-contents links measure 2.04:1 in light and 2.92:1 in dark — both
+ * WCAG AA failures in the default state, on the component it is otherwise best
+ * at. Its failure mode is inheritance: the list is styled as secondary chrome,
+ * so its links take the dimmest colour in the palette. Naming the token here
+ * costs one declaration and is what `tests/design-tokens.test.ts` can actually
+ * check; ours measure 6.72:1 and 10.37:1.
+ */
+.toc-list a {
+  color: var(--color-link);
+  text-decoration: none;
+}
+
+.toc-list a[aria-current='location'] {
+  color: var(--color-text);
+  font-weight: 700;
+  text-decoration-thickness: 0.16em;
+}
+
+.toc-list a:hover,
+.toc-list a:focus-visible {
+  text-decoration: underline;
+}
+
+/*
+ * The footer: public provenance and the canonical route.
+ *
+ * `.note-canonical` is the on-screen provenance line. The layout's own
+ * `.print-only` paragraph carries the same route for paper, and TK-08 upgrades
+ * both to the absolute canonical URL once `site:` is configured.
+ */
+.note-footer {
+  margin-top: var(--space-16);
+  padding-top: var(--space-6);
+  border-top: 1px solid var(--color-line);
+  color: var(--color-muted);
+  font-size: var(--text-sm);
+}
+
+.note-footer p {
+  margin: 0 0 var(--space-2);
+}
+
+.note-canonical {
+  font-family: var(--font-mono);
+  word-break: break-all;
+}
+
+/* ------------------------------------------------ relationship surfaces -- */
+
+/*
+ * Requirements section 9.2's items 8, 9, 10, and 12: what this note links to,
+ * what links to it, what it is near, and where it sits in its collection.
+ *
+ * The three lists are one component rendered three times and share one rule
+ * set. They are visually identical on purpose: a reader distinguishes them by
+ * the heading, which is text, rather than by a colour or a border treatment
+ * that would encode the difference in a way section 17 forbids.
+ */
+
+.relations,
+.collection-pager {
+  max-width: var(--measure);
+  margin-inline: auto;
+}
+
+.relations {
+  margin-top: var(--space-12);
+  padding-top: var(--space-6);
+  border-top: 1px solid var(--color-line);
+}
+
+/*
+ * The graph region's frame, here rather than in `graph.css`.
+ *
+ * `graph.css` is conditional — it loads only on a page that actually draws a
+ * figure (owner decision 7), which is the right trade for a stylesheet of SVG
+ * styling that most pages have no use for. But the region itself renders on
+ * *every* note page, carrying its heading and, where there is no neighbourhood,
+ * an empty state. Leaving the frame in the conditional sheet shipped that empty
+ * state unstyled: full width, no rule above it, sitting under three
+ * `.relations` sections that all have one. The published corpus is a single
+ * note with no edges, so that was the state on every page of the live site.
+ *
+ * Same rules as `.relations`, because it is the same kind of region and a
+ * reader distinguishes them by their headings.
+ */
+.graph-region {
+  max-width: var(--measure);
+  margin-inline: auto;
+  margin-top: var(--space-12);
+  padding-top: var(--space-6);
+  border-top: 1px solid var(--color-line);
+}
+
+.relations-heading {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-4);
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.relations-heading h2 {
+  margin: 0;
+  font-size: var(--text-lg);
+}
+
+/* Text, not a badge: nothing here is carried by colour or shape alone. Styled
+   with `.facet-count` in the facets section — the same information in the same
+   relationship to a heading. */
+
+/*
+ * The derived list states its rule. Only the related-note section carries one:
+ * "Links to" and "Linked from" are authored edges and need no explanation,
+ * while a list nobody wrote does — otherwise a reader cannot tell a suggestion
+ * from an editorial choice.
+ */
+.relations-derivation {
+  margin: var(--space-2) 0 0;
+  color: var(--color-muted);
+  font-size: var(--text-sm);
+}
+
+/*
+ * The large-list treatment, and the whole of it.
+ *
+ * `auto-fit` with a `min()` floor is one column at 320 px and as many as fit
+ * beyond it, so a note with forty backlinks is a block a reader takes in rather
+ * than a screen of scrolling — and it needs no truncation, no "show more"
+ * control, and therefore no JavaScript. The `min(…, 100%)` floor is what keeps
+ * the track from pushing the page past a narrow viewport; a fixed floor is the
+ * usual cause of exactly that.
+ *
+ * It stays one `<ul>` in document order, so the element still carries the count
+ * and the reading order: multi-column is presentation, and a screen reader
+ * announces "list, 40 items" either way.
+ */
+.relations-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
+  gap: var(--space-1) var(--space-6);
+  margin: var(--space-4) 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.relations-list li {
+  min-width: 0;
+}
+
+/*
+ * The collection pager: previous and next within one collection.
+ *
+ * Two links in a row that wraps to two rows at 320 px, and `margin-left: auto`
+ * on the next link so a note with only a next neighbour keeps it on the right
+ * where a reader expects it, with no placeholder standing in for the absent
+ * one.
+ */
+.collection-pager {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4);
+  margin-top: var(--space-12);
+  padding-top: var(--space-6);
+  border-top: 1px solid var(--color-line);
+}
+
+.collection-pager a {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-width: 0;
+  max-width: 100%;
+  padding: var(--space-3) var(--space-4);
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  text-decoration: none;
+}
+
+.collection-pager a:hover .pager-title,
+.collection-pager a:focus-visible .pager-title {
+  text-decoration: underline;
+}
+
+/*
+ * `.pager-next` is the only positional class the pager needs: `margin-left:
+ * auto` is what keeps a lone next link on the right, where a reader expects it,
+ * with no placeholder standing in for the absent previous one. There is no
+ * `.pager-previous` — the previous link is the flex row's first item already,
+ * and a class carrying no declaration is a hook nobody maintains.
+ */
+.pager-next {
+  margin-left: auto;
+  text-align: right;
+}
+
+.pager-direction {
+  color: var(--color-muted);
+  font-size: var(--text-xs);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.pager-title {
+  color: var(--color-link);
+  font-size: var(--text-sm);
+}
+
+/* --------------------------------------------------------- enhancements -- */
+
+/*
+ * The link preview.
+ *
+ * `left`/`top` are set by `link-preview.ts` from `placePreview`, which clamps to
+ * all four viewport edges. Two of this rule's declarations are what let that
+ * arithmetic hold rather than merely try:
+ *
+ * - The width is bounded by `calc(100% - 1rem)`, twice the 8 px margin the
+ *   script clamps to. A percentage on a fixed-position element resolves against
+ *   the initial containing block, which — unlike `100vw` — excludes a classic
+ *   scrollbar, so the CSS and the script measure the same box. The previous
+ *   `100vw` spelling was a scrollbar wider than the space the script clamps to.
+ * - The excerpt is bounded to four lines, so the panel's height cannot grow with
+ *   the payload. Requirements section 8.1 asks for a *bounded* excerpt, and an
+ *   unbounded one is also the case where the vertical clamp has to give up an
+ *   edge. Nothing is lost: the full excerpt is on the note's own page and on its
+ *   card, and the preview is never the only way to reach it.
+ *
+ * No transition and no animation: a reduced-motion reader has nothing here to
+ * opt out of.
+ */
+#link-preview {
+  position: fixed;
+  z-index: 50;
+  width: min(22rem, calc(100% - 1rem));
+  padding: var(--space-4);
+  border: 1px solid var(--color-line-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  box-shadow: var(--elevation-2);
+}
+
+#link-preview p {
+  display: -webkit-box;
+  overflow: hidden;
+  margin: var(--space-2) 0 0;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  line-clamp: 4;
+  color: var(--color-muted);
+  font-size: var(--text-sm);
+}
+
+/* The `#heading` a link lands on, shown verbatim because that is what the
+   address bar will show; it is a route fragment, so it is set in the mono face
+   the rest of the site uses for literal strings. */
+.preview-fragment {
+  display: block;
+  margin-top: var(--space-1);
+  overflow-wrap: anywhere;
+  color: var(--color-muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+}
+
+/* --------------------------------------------------------------- search -- */
+
+/*
+ * TK-06. The dialog's own chrome, plus the handful of Pagefind classes worth
+ * restyling.
+ *
+ * Pagefind's `pagefind-modular-ui.css` ships alongside its bundle and is loaded
+ * with it on first open, so most of the result layout is already handled. What
+ * is below is only what the shipped sheet gets wrong for this site: it assumes
+ * its own colours, and it has no notion of these tokens. Everything here is
+ * scoped inside `#search-dialog` so none of it can reach the page.
+ *
+ * Nothing here is a CSP relaxation. `pagefind-highlight.js` — which creates a
+ * `<style>` element and sets `innerText`, defaulting `addStyles` to true — is
+ * never loaded: it is a separate opt-in bundle, and this file does not opt in.
+ * The `<mark>` rule below is ours, on Pagefind's own excerpt markup.
+ */
+
+#search-dialog {
+  width: min(44rem, calc(100% - var(--space-4)));
+  padding: var(--space-4);
+  border: 1px solid var(--color-line-strong);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+
+#search-dialog::backdrop {
+  background: rgb(0 0 0 / 0.55);
+}
+
+.search-close {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.search-label {
+  display: block;
+  margin-bottom: var(--space-1);
+  color: var(--color-muted);
+  font-size: var(--text-sm);
+}
+
+#search-input {
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-line-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-bg);
+  color: var(--color-text);
+  font: inherit;
+  /* 16px minimum, or iOS Safari zooms the page on focus and the reader lands
+     on a layout they then have to pinch back out of. */
+  font-size: max(1rem, var(--text-base));
+}
+
+#search-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+/*
+ * The filter groups collapse to nothing when the index carries no values for
+ * them — which is the published corpus, whose artifact has no `tags` and no
+ * `collection`.
+ *
+ * The two child rules do the work: the script builds a pill group into a
+ * container only when the index proves it has values for that filter, so an
+ * unused container stays genuinely empty. The parent rule is what stops the
+ * flex container contributing its own `gap` and padding around two empty
+ * children, and it needs `:has()` rather than `:empty` — `#search-filters`
+ * always has both child elements, so `:empty` could never match it.
+ */
+#search-filters:not(:has(*:not(:empty))) {
+  display: none;
+}
+
+#search-filter-tag:empty,
+#search-filter-collection:empty {
+  display: none;
+}
+
+/*
+ * The status line: one sentence, always in the same place.
+ *
+ * It keeps its box even when empty — `min-height` rather than collapsing —
+ * because the `ready` state writes an empty string, and a line that vanishes
+ * would shift every result down by its height on the first keystroke.
+ */
+#search-status {
+  min-height: 1.5em;
+  margin: var(--space-3) 0 0;
+  color: var(--color-muted);
+  font-size: var(--text-sm);
+}
+
+#search-results {
+  max-height: min(60vh, 32rem);
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+
+#search-dialog .pagefind-modular-list-result {
+  padding: var(--space-3) 0;
+  border-top: 1px solid var(--color-line);
+}
+
+#search-dialog .pagefind-modular-list-title {
+  margin: 0;
+  font-size: var(--text-base);
+}
+
+#search-dialog .pagefind-modular-list-link {
+  color: var(--color-link);
+  font-weight: 600;
+}
+
+#search-dialog .pagefind-modular-list-excerpt {
+  margin: var(--space-1) 0 0;
+  color: var(--color-muted);
+  font-size: var(--text-sm);
+}
+
+/*
+ * The matched term. `--color-wash` behind ordinary text rather than a browser
+ * default yellow, which fails contrast against this site's dark theme, and a
+ * weight change beside it so the match is never signalled by colour alone.
+ */
+#search-dialog mark {
+  background: var(--color-wash);
+  color: var(--color-text);
+  font-weight: 600;
+}
+
+/* The filter pills. Pagefind renders real `<button>` elements, so they are
+   keyboard operable already; this is colour and shape only. `aria-pressed`
+   carries the selected state, and the border weight shows it without colour. */
+#search-dialog .pagefind-modular-filter-pill {
+  padding: var(--space-1) var(--space-3);
+  border: 1px solid var(--color-line-strong);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-alt);
+  color: var(--color-text);
+  font: inherit;
+  font-size: var(--text-sm);
+}
+
+#search-dialog .pagefind-modular-filter-pill[aria-pressed='true'] {
+  border-color: var(--color-accent);
+  border-width: 2px;
+  font-weight: 600;
+}
+
+/* Pagefind's own hidden markers. Its stylesheet already implements these, but
+   this site's rules are more specific inside the dialog, so restating them is
+   what keeps a suppressed control suppressed. */
+#search-dialog [data-pfmod-hidden] {
+  display: none;
+}
+
+#search-dialog [data-pfmod-suppressed] {
+  visibility: hidden;
+}
+
+/* --------------------------------------------------------- reader mode -- */
+
+/*
+ * Reader mode strips the page to the reading surface: the header's route links
+ * go, the header stops following the scroll, and card chrome flattens. The
+ * toggles themselves stay — hiding the control that turns the mode off is how
+ * a keyboard user gets stranded — and the footer site map stays too, so every
+ * route this site owns is still one link away and reader mode removes chrome
+ * rather than information.
+ */
+:root[data-reader='on'] {
+  --measure: 65ch;
+  --leading-body: 1.85;
+}
+
+:root[data-reader='on'] .site-nav a,
+/* The collection rail, for the same reason as the header's route links: it is
+   navigation into the rest of the site rather than part of the page being
+   read. No route is stranded — the footer site map survives reader mode, and
+   every note is one link from the home page it lists them on. */
+:root[data-reader='on'] .explorer,
+:root[data-reader='on'] .site-footer p:not(.print-only) {
+  display: none;
+}
+
+/*
+ * And the two-column track goes with it. `:has(> .explorer)` still matches a
+ * `display: none` child, so without this reader mode would keep a 240 px column
+ * reserved for a rail it just hid, and push the article off centre — the same
+ * defect the `:has()` guard exists to prevent on a corpus with no rail.
+ */
+:root[data-reader='on'] .page-shell {
+  display: block;
+}
+
+:root[data-reader='on'] .site-header {
+  position: static;
+  border-bottom-color: transparent;
+}
+
+:root[data-reader='on'] .note-card {
+  border-color: transparent;
+  box-shadow: none;
+}
+
+/* ------------------------------------------------------------ responsive -- */
+
+/*
+ * Mobile-first: the rules above are the 320 px layout — one column, a nav that
+ * wraps rather than scrolls, and no fixed width anywhere.
+ *
+ * ponytail: the nav's five text links wrap to two or three rows at 320 px and
+ * stay fully readable and operable, so no drawer or disclosure is built for
+ * them; a `<details>` around five links is more machinery than the problem.
+ *
+ * The rail is TK-05c and reverses this block's earlier "no rail, and no empty
+ * media query pretending otherwise" note, which was written when the content
+ * that would fill one did not exist yet. It does now — `.page-shell` below is
+ * the three layouts requirements section 16 asks for, and each is a property of
+ * one grid rather than three separate treatments:
+ *
+ * - **mobile** (below 48rem): one column, the explorer below the article as a
+ *   stack of closed `<details>` — which is the "drawer" the requirement asks
+ *   for, built out of the disclosure the rail already is rather than out of a
+ *   second navigation model with its own script and focus trap;
+ * - **tablet** (48rem to 64rem): still one column, but the article gains its
+ *   wide padding while the panels stay collapsed and collapsible;
+ * - **desktop** (64rem and up): two columns, article centred on its own measure,
+ *   rail sticky beside it.
+ *
+ * 64rem rather than 48rem for the two-column switch because the rail costs
+ * 15rem: at 48rem the article would be left with under 33rem, which is below
+ * `--measure` and would narrow the prose to buy chrome.
+ */
+@media (min-width: 48rem) {
+  main {
+    padding-block: var(--space-16);
+  }
+
+  /* The header is one row once there is width for it. */
+  html {
+    scroll-padding-top: 5rem;
+  }
+
+  /*
+   * Tablet: the groups become panels beside each other rather than a single
+   * stack, which is the "collapsible side panels" of requirements section 16.
+   *
+   * This band gets its own treatment rather than inheriting the mobile one
+   * because it has width the mobile layout cannot use and not enough width to
+   * put the rail beside the article: measured, `--measure` resolves to 623 px,
+   * and a 240 px rail at 768 px would leave the prose 528 px — narrowing the
+   * reading column to buy chrome, which is the wrong trade in the one band
+   * where the reader is most likely reading. Laying the panels out
+   * horizontally spends the extra width on the navigation instead, and costs
+   * the article nothing.
+   */
+  .explorer-groups {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
+    gap: 0 var(--space-6);
+    align-items: start;
+  }
+}
+
+/*
+ * Desktop: the article and its rail, side by side.
+ *
+ * `:has(> .explorer)` is load-bearing, not a flourish. The rail renders nothing
+ * on a corpus with fewer than two notes and nothing in reader mode, and an
+ * unconditional two-column grid then reserves a 240 px track for an element
+ * that is not there — measured on the *published* build, which is exactly that
+ * corpus: the article sat 136 px left of centre at 1440 px with an empty column
+ * beside it. The requirement says "centered article", so the grid engages only
+ * when there is a rail to put in it, and every other case keeps the centred
+ * single column it had before this ticket.
+ *
+ * `minmax(0, …)` on the article track rather than `1fr` alone: a `1fr` track has
+ * an automatic minimum of its content's min-content width, so one long unbroken
+ * token inside the article would push the whole grid wider than the viewport
+ * instead of wrapping. That is the fixed-track overflow the 320 px gate exists
+ * to catch, arriving at 1280 px instead.
+ */
+@media (min-width: 64rem) {
+  .page-shell:has(> .explorer) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) var(--width-rail);
+    gap: var(--gutter);
+    width: min(calc(var(--width-page) + var(--width-rail) + var(--gutter)), 100%);
+    margin-inline: auto;
+    align-items: start;
+  }
+
+  /* `main` is centred inside its own track rather than by the shell, so the
+     article keeps the measure it has at every other width and the rail does not
+     shift the prose off centre relative to itself. */
+  .page-shell:has(> .explorer) > main {
+    width: 100%;
+  }
+
+  .explorer {
+    /* `sticky`, not a scroll listener: the rail follows the reader down a long
+       article at zero JavaScript. The offset clears the sticky header. */
+    position: sticky;
+    top: 5rem;
+    /* The page gutter goes: it is the page's own edge padding, and inside a
+       grid track the shell's `gap` already separates the rail from the article.
+       Keeping it would spend roughly a quarter of `--width-rail` on whitespace
+       and wrap titles that would otherwise fit.
+
+       Not zero, though. `overflow-y: auto` below makes this a scroll container,
+       which clips on *both* axes — and the global focus ring is a 2 px outline
+       at `outline-offset: 2px`, so it reaches 4 px outside the element it is
+       drawn on. Measured with no padding: the ring on a summary sat exactly
+       4 px left of the rail's box and was cut flat. This is the space it needs
+       to be seen (WCAG 2.4.11). */
+    margin: var(--space-16) 0 0;
+    padding: 0 0 0 4px;
+    /* Its own scroll container, so a rail longer than the viewport scrolls
+       within itself instead of stretching the grid row and stranding the
+       bottom of the list where no scroll can reach it. */
+    max-height: calc(100vh - 7rem);
+    overflow-y: auto;
+    /* Reserve the gutter the scrollbar takes, so appearing and disappearing
+       does not reflow the list under the reader's pointer. */
+    scrollbar-gutter: stable;
+  }
+
+  /* Back to one stack: the tablet band's side-by-side panels are for width the
+     rail does not have once it is a 15rem column. Without this the `auto-fit`
+     grid above would still apply and each group would be squeezed into a
+     fraction of the rail. */
+  .explorer-groups {
+    display: block;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  /*
+   * The explorer's open transition, in its own rule and **not** appended to the
+   * list above.
+   *
+   * Two facts make that separation load-bearing. A type selector matches
+   * elements and never a pseudo-element, so `*` alone does not reach
+   * `::details-content` — measured, the transition still computed to 0.12s
+   * under `reduce` until this rule existed. And an unrecognized pseudo-element
+   * invalidates the *entire* selector list it appears in, not just its own
+   * compound — also measured: `#a, #a::before, #a::unknown { … }` applies to
+   * nothing at all. `::details-content` is new enough that plenty of browsers
+   * do not know it, so putting it in the list above would have traded a
+   * rail-only reduced-motion gap for a site-wide one on exactly those
+   * browsers. Alone, it fails alone.
+   */
+  *::details-content {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ---------------------------------------------------------------- print -- */
+
+@media print {
+  /* `:root:root` is (0,2,0), which ties `:root[data-theme='dark']` in
+     tokens.css and wins on order. A plain `:root` here is (0,1,0) and loses,
+     which would print the dark palette — light text on white paper — for
+     anyone who has chosen the dark theme. A media query adds no specificity. */
+  :root:root {
+    color-scheme: light;
+  }
+
+  body {
+    background: #fff;
+    color: #000;
+    font-size: 11pt;
+  }
+
+  .site-header,
+  .skip-link,
+  .breadcrumbs,
+  .toc,
+  /* Site-wide navigation, like the breadcrumbs above it: a list of every other
+     page on the site is the definition of chrome on paper. */
+  .explorer,
+  /* Navigation into the site, like the breadcrumbs above it: on paper "Next"
+     points at nothing. The relationship lists stay — those are information, and
+     the rule below prints each one's route. */
+  .collection-pager,
+  /* The layout's `.print-only` paragraph already prints this page's route.
+     Printing the on-screen provenance line too would put the same path on the
+     page twice, in two different wordings. TK-08 upgrades both to the absolute
+     canonical URL; whichever survives, it should be one of them. */
+  .note-canonical,
+  #search-dialog,
+  #link-preview {
+    display: none !important;
+  }
+
+  /* The two-column track goes with the rail it was reserved for. `:has(>
+     .explorer)` still matches the `display: none` child above, so without this
+     a landscape sheet keeps a 240 px column for something that is not printed
+     — measured at 1056 px, 272 px of blank paper down the right-hand edge. The
+     `:has()` selector is repeated rather than written plain because
+     `.page-shell` alone loses to it on specificity. Same defect and same fix as
+     the reader-mode reset above. */
+  .page-shell:has(> .explorer) {
+    display: block;
+  }
+
+  main {
+    width: auto;
+    max-width: none;
+    padding: 0;
+  }
+
+  .prose,
+  .note-header,
+  .note-footer,
+  .relations {
+    max-width: none;
+  }
+
+  .print-only {
+    display: block;
+  }
+
+  /* ponytail: prints each link's route, since the absolute canonical origin is
+     configured by TK-08. Swap `attr(href)` for the canonical URL there. */
+  .prose a[href]::after,
+  .note-header a[href]::after,
+  .relations a[href]::after {
+    content: ' (' attr(href) ')';
+    font-size: 0.85em;
+    word-break: break-all;
+  }
+
+  .prose a[href^='#']::after {
+    content: '';
+  }
+
+  .prose pre {
+    white-space: pre-wrap;
+  }
+
+  :is(h1, h2, h3) {
+    break-after: avoid;
+  }
+
+  .prose :is(pre, blockquote, table) {
+    break-inside: avoid;
+  }
+}