@bongos/core 1.24.49 → 1.24.51

package/modules/status-ui/public/style.css

@@ -1,323 +1,427 @@
-/* status.example.com — public ledger of an ancient-Greek city.
-   Form factor: weathered marble + parchment, Cinzel inscription headings,
-   EB Garamond body. Square corners, hairline double-rules, no SaaS softness.
-   Palette stays inside the locked Mediterranean range. */
-
-:root {
-  /* aged marble + parchment */
-  --bg:           #ece0c2;   /* base — deeper than V1, slightly more yellowed */
-  --bg-card:      #f6ecd2;   /* tablet face */
-  --bg-deep:      #ddc99c;   /* recessed wells (stat blocks, cat tags) */
-  --bg-frame:     #e3d0a4;   /* outer frame channel between double rules */
-
-  /* ink + accents */
-  --ink:          #2a2110;   /* burnt umber — the carved letter */
-  --ink-soft:     #6e5b3a;   /* aged ink */
-  /* #409: bumped from #97825a (~2.6:1 against --bg) to meet WCAG AA 4.5:1
-     for the small italic labels that use this token. ~4.8:1 against --bg now,
-     still distinct enough from --ink-soft (#6e5b3a, ~5.1:1) to read as
-     "fainter ink" but no longer fails accessibility on small text. */
-  --ink-faint:    #735f3d;
-  --rule:         #8b6f2c;   /* antique gold rule */
-  --rule-soft:    #b89a55;
-  --accent:       #4a7d5c;   /* olive */
-  --accent-deep:  #2f5a3f;
-  --sea:          #2d6e7e;   /* aegean */
-  --terracotta:   #a85530;
-
-  --font-display: "Cinzel", "Cormorant Garamond", "Trajan Pro", "Iowan Old Style", Georgia, serif;
-  --font-body:    "EB Garamond", "Iowan Old Style", "Hoefler Text", Georgia, serif;
+/* status.<apex> — the public build-status page, on the chrome world (task 1005089,
+   goal 1000138; the owner's decision of 2026-11-06 in DESIGN.md "Naming").
+
+   THE WORLD. DESIGN.md at the repo root governs this sheet the way its chapter
+   "The hall (builders' hall)" governs the hall: the pack's thirteen colours and
+   two faces, the one warm accent, the panel (bg-card, one hairline, 16px
+   corners, no shadow), the shared scales in modules/ui-design/public/tokens.css
+   (--ds-*), and the shared button and field (modules/hall-ui/public/controls.css,
+   linked by index.html). No parchment, no inscription faces, no bronze cursors,
+   no double-ruled frames.
+
+   WHERE THE COLOURS COME FROM. The server (serve-internal.js themeMarkup) and the
+   off-box mirror (scripts/status-mirror-sync.js) both splice the pack's
+   thirteen colours, its two faces, its font links and its favicon as a :root at
+   the END of <head>. This sheet declares no :root of its own (DESIGN.md: no page
+   :root). Its fallback for a pack with no theme is written at ZERO specificity
+   (:where(html)), so whatever the pack splices always wins.
+
+   THE STATUS VOCABULARY. This page renders verification state (what shipped,
+   what passed review, what is over budget), so it keeps the hall's fixed
+   --ok / --warn / --danger / --info and their -weak fills, the one sanctioned
+   exception to the Fifteen Rule. The values are the hall's, byte for byte;
+   tests/status_page_chrome.mjs fails if the two drift.
+
+   BOTH MODES. The page has no theme switch of its own, but the dark tier is
+   written on the hall's pair all the same — html[data-theme="dark"], and
+   @media (prefers-color-scheme: dark) html:not([data-theme]) — byte-identical,
+   so a later switch is a script, not a second sheet. Both outrank the pack's
+   :root (0,1,1 over 0,1,0); the pack's accent, sea and terracotta are never
+   re-pinned in dark (the Unpinned Accent Rule). */
+
+/* ---------- the fallback contract tier (zero specificity; the pack wins) ---------- */
+:where(html) {
+  --bg:           #edecee;
+  --bg-card:      #fbfafc;
+  --bg-deep:      #e2e1e4;
+  --bg-frame:     #f6f5f7;
+  --ink:          #17181a;
+  --ink-soft:     #55565a;
+  --ink-faint:    #65656a;
+  --rule:         #c6c6c8;
+  --rule-soft:    #dcdbdd;
+  --accent:       #fb9569;
+  --accent-deep:  #a3481a;
+  --sea:          #5b6fd0;
+  --terracotta:   #c9512c;
+  --font-display: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
+  --font-body:    "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
+}
+
+/* ---------- the derived tier (DESIGN.md "Reuse": the same names, the same recipes) ---------- */
+html {
+  color-scheme: light;
+  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
+
+  --glass:        rgba(23, 24, 26, .05);
+  --glass-strong: rgba(23, 24, 26, .08);
+  --glass-edge:   rgba(23, 24, 26, .12);
+
+  --accent-ink:  color-mix(in srgb, var(--accent) 45%, #240e00);
+  --accent-lift: color-mix(in srgb, var(--accent) 58%, #ffffff);
+  --accent-tint: color-mix(in srgb, var(--accent) 30%, #fffdf9);
+  --accent-on:   #2a1305;
+
+  /* the status vocabulary: the hall's values (modules/hall-ui/public/style.css) */
+  --ok:          #187444;
+  --ok-weak:     color-mix(in srgb, #187444 12%, var(--bg-card));
+  --warn:        #895c00;
+  --warn-weak:   color-mix(in srgb, #895c00 14%, var(--bg-card));
+  --danger:      #b42318;
+  --danger-weak: color-mix(in srgb, #b42318 10%, var(--bg-card));
+  --info:        color-mix(in srgb, var(--sea) 86%, #000000);
+  --info-weak:   color-mix(in srgb, var(--info) 9%, var(--bg-card));
+
+  --focus: color-mix(in srgb, var(--accent-deep) 82%, #3a1400);
+  --scrim: rgba(0, 0, 0, .55);
+
+  /* the tile inside a panel: a tone, not a frame */
+  --tile: color-mix(in srgb, var(--ink) 4%, var(--bg-card));
+
+  --label-face:  var(--font-mono);
+  --label-size:  var(--ds-text-2xs);
+  --label-space: .12em;
+
+  /* the hall's aliases onto the shared scales, which controls.css spends */
+  --line:        var(--ds-line);
+  --radius:      var(--ds-radius-panel);
+  --radius-sm:   var(--ds-radius-tile);
+  --radius-pill: var(--ds-radius-pill);
+
+  --content-max: 820px;
+}
+
+/* ---------- dark: written twice, byte-identical ---------- */
+html[data-theme="dark"] {
+  color-scheme: dark;
+  --bg:        #000000;
+  --bg-card:   #101012;
+  --bg-deep:   #000000;
+  --bg-frame:  #08080a;
+  --ink:       #ffffff;
+  --ink-soft:  #c0c0c0;
+  --ink-faint: #a8a8a8;
+  --rule:      rgba(255, 255, 255, .16);
+  --rule-soft: rgba(255, 255, 255, .08);
+  --glass:        rgba(255, 255, 255, .11);
+  --glass-strong: rgba(255, 255, 255, .17);
+  --glass-edge:   rgba(255, 255, 255, .13);
+  --accent-ink:  var(--accent);
+  --accent-tint: color-mix(in srgb, var(--accent) 22%, #0b0a09);
+  --ok:          #4ade80;
+  --ok-weak:     color-mix(in srgb, #4ade80 14%, var(--bg-card));
+  --warn:        #fbbf24;
+  --warn-weak:   color-mix(in srgb, #fbbf24 14%, var(--bg-card));
+  --danger:      #f87171;
+  --danger-weak: color-mix(in srgb, #f87171 14%, var(--bg-card));
+  --info:        color-mix(in srgb, var(--sea) 80%, #ffffff);
+  --info-weak:   color-mix(in srgb, var(--info) 14%, var(--bg-card));
+  --focus:       var(--accent);
+  --tile:        color-mix(in srgb, var(--ink) 6%, var(--bg-card));
+  --label-face:  var(--font-body);
+  --label-size:  var(--ds-text-2xs-plus);
+  --label-space: .1em;
+}
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme]) {
+    color-scheme: dark;
+    --bg:        #000000;
+    --bg-card:   #101012;
+    --bg-deep:   #000000;
+    --bg-frame:  #08080a;
+    --ink:       #ffffff;
+    --ink-soft:  #c0c0c0;
+    --ink-faint: #a8a8a8;
+    --rule:      rgba(255, 255, 255, .16);
+    --rule-soft: rgba(255, 255, 255, .08);
+    --glass:        rgba(255, 255, 255, .11);
+    --glass-strong: rgba(255, 255, 255, .17);
+    --glass-edge:   rgba(255, 255, 255, .13);
+    --accent-ink:  var(--accent);
+    --accent-tint: color-mix(in srgb, var(--accent) 22%, #0b0a09);
+    --ok:          #4ade80;
+    --ok-weak:     color-mix(in srgb, #4ade80 14%, var(--bg-card));
+    --warn:        #fbbf24;
+    --warn-weak:   color-mix(in srgb, #fbbf24 14%, var(--bg-card));
+    --danger:      #f87171;
+    --danger-weak: color-mix(in srgb, #f87171 14%, var(--bg-card));
+    --info:        color-mix(in srgb, var(--sea) 80%, #ffffff);
+    --info-weak:   color-mix(in srgb, var(--info) 14%, var(--bg-card));
+    --focus:       var(--accent);
+    --tile:        color-mix(in srgb, var(--ink) 6%, var(--bg-card));
+    --label-face:  var(--font-body);
+    --label-size:  var(--ds-text-2xs-plus);
+    --label-space: .1em;
+  }
 }
 
+/* ---------- the page ---------- */
 * { box-sizing: border-box; }
 
-html {
+html { background: var(--bg); }
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: var(--font-body);
+  font-size: var(--ds-text-2xl);
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--ink);
   background: var(--bg);
-  /* Bronze arrowhead as the ambient cursor (hotspot = tip at 0,0). Inherited
-     by everything; clickable elements override to the Hand of Hermes below. */
-  cursor: url('cursors/arrow.png') 0 0, auto;
+  -webkit-font-smoothing: antialiased;
 }
 
-/* #731: themed scrollbars + base select theming across the status dashboard,
-   matching the builder surface — no page shows a default grey OS scrollbar or a
-   bare white dropdown. (The .world-timeline keeps its own thinner override.) */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--rule-soft) var(--bg-frame);
+a {
+  color: var(--accent-ink);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  text-decoration-color: color-mix(in srgb, var(--accent-ink) 45%, transparent);
+  transition: text-decoration-color var(--ds-dur-fast) var(--ds-ease);
+}
+a:hover { text-decoration-color: currentColor; }
+
+::selection { background: var(--accent-tint); color: var(--ink); }
+
+/* the two-tone ring: a 2px accent-derived outline at 3px offset inside a --bg halo */
+:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 3px;
+  box-shadow: 0 0 0 8px var(--bg);
+  border-radius: var(--ds-radius-tile);
 }
-::-webkit-scrollbar { width: 12px; height: 12px; }
-::-webkit-scrollbar-track { background: var(--bg-frame); }
-::-webkit-scrollbar-thumb {
-  background: var(--rule-soft);
-  border-radius: 6px;
-  border: 3px solid var(--bg-frame);
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
-::-webkit-scrollbar-thumb:hover { background: var(--rule); }
-::-webkit-scrollbar-corner { background: var(--bg-frame); }
 
 /* ---------- Off-box availability banner (ADR 0029, #737) ----------
-   Only renders on the off-box GitHub Pages mirror, whose index.html injects the
-   #offbox-status div + driver script; on the droplet the div is absent so these
-   rules are inert. Kept here so public-status/style.css is byte-identical on
-   both hosts and the mirror sync stays a pure copy. */
+   Only renders on the off-box mirror, whose index.html injects the
+   #offbox-status div + driver script; on the server the div is absent and these
+   rules are inert. Kept here so style.css is byte-identical on both hosts. */
 .offbox-status {
   font-family: var(--font-body);
+  font-size: var(--ds-text-md);
+  font-weight: 500;
   text-align: center;
-  color: #fff;
-  padding: 6px 12px;
-  font-size: 0.92rem;
-  letter-spacing: 0.01em;
+  padding: var(--ds-space-hair) var(--ds-space-sm);
+  border-bottom: var(--line) solid var(--rule-soft);
 }
 .offbox-status:empty { display: none; }
-.offbox-status--up      { background: #2e7d32; }
-.offbox-status--down    { background: #b00020; }
-.offbox-status--unknown { background: #6b6b6b; color: #f2f2f2; }
+.offbox-status--up      { background: var(--ok-weak); color: var(--ok); }
+.offbox-status--down    { background: var(--danger-weak); color: var(--danger); }
+.offbox-status--unknown { background: var(--bg-card); color: var(--ink-soft); }
 
-select {
-  font-family: var(--font-body);
-  color: var(--ink);
-  background: var(--bg-card);
-  border: 1px solid var(--rule);
-  border-radius: 4px;
-  padding: 6px 10px;
+/* ---------- the top bar: the mark, the name, the text-size control ---------- */
+.topbar {
+  border-bottom: var(--line) solid var(--rule-soft);
+  background: var(--bg);
 }
-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
-select option { background: var(--bg-card); color: var(--ink); }
-
-/* Clickable affordance: the Hand of Hermes on standard interactive elements
-   (the arrowhead above stays the ambient default). Low specificity so
-   disabled / help / not-allowed states keep their own cursors. */
-a[href], button, summary, select, label[for],
-[role="button"], [role="tab"], [role="link"] {
-  cursor: url('cursors/hand-pointer.png') 4 1, pointer;
+.topbar__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ds-space-sm);
+  max-width: var(--content-max);
+  min-height: 56px;
+  margin: 0 auto;
+  padding: 0 var(--ds-space-gutter-narrow);
 }
-
-body {
-  margin: 0;
-  font-family: var(--font-body);
-  font-size: 18px;
-  font-weight: 400;
+.topbar__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-xs);
+  min-width: 0;
+}
+.topbar__mark {
+  display: block;
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  /* drawn from the one mark (modules/ui-design/public/brand/mark.svg, task 1005088) */
+  --mark-ink: var(--ink);
+}
+.topbar__name {
+  font-family: var(--font-display);
+  font-size: var(--ds-text-xl);
+  font-weight: 500;
+  letter-spacing: -0.01em;
   color: var(--ink);
-  background: var(--bg);
-  /* subtle weathered-marble veining built from radial blooms + a vertical
-     wash so the page doesn't read as a flat color */
-  background-image:
-    radial-gradient(circle at 18% 12%, rgba(139, 111, 44, 0.08), transparent 45%),
-    radial-gradient(circle at 82% 88%, rgba(45, 110, 126, 0.07), transparent 50%),
-    radial-gradient(circle at 50% 50%, rgba(168, 85, 48, 0.04), transparent 70%),
-    linear-gradient(180deg, rgba(255, 250, 230, 0.18) 0%, transparent 30%, rgba(60, 40, 10, 0.04) 100%);
-  background-attachment: fixed;
-  line-height: 1.55;
-  min-height: 100vh;
-  -webkit-font-smoothing: antialiased;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-a {
-  color: var(--accent-deep);
-  text-decoration: none;
-  border-bottom: 1px solid var(--rule-soft);
-  transition: color 200ms, border-color 200ms;
+/* task 1475 (idea 280): the text-size control, a ghost pill in the bar */
+.ledger-zoom {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ds-space-hair);
+  min-width: 40px;
+  min-height: 40px;
+  padding: 0 var(--ds-space-xs);
+  border: var(--line) solid var(--rule);
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: var(--ink-soft);
+  font: inherit;
+  cursor: pointer;
+  transition: color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
+}
+.ledger-zoom:hover { color: var(--ink); border-color: var(--ink-faint); }
+.ledger-zoom:focus-visible { border-radius: var(--radius-pill); }
+.ledger-zoom svg { width: 18px; height: 18px; }
+.ledger-zoom--on { color: var(--accent-ink); border-color: var(--accent); }
+.ledger-zoom__pct {
+  font-family: var(--font-mono);
+  font-size: var(--ds-text-sm);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
 }
 
-a:hover { color: var(--terracotta); border-color: var(--terracotta); }
-
-/* ---------- Hero ---------- */
-
+/* ---------- the opening ---------- */
 .herm {
-  text-align: center;
-  padding: 72px 24px 28px;
-  max-width: 760px;
+  max-width: var(--content-max);
   margin: 0 auto;
+  padding: var(--ds-space-xl) var(--ds-space-gutter-narrow) var(--ds-space-lg);
 }
-
-.herm__sigil {
-  display: block;
-  width: 72px;
-  height: 72px;
-  margin: 0 auto 18px;
-  color: var(--ink);
-  opacity: 0.78;
-}
-
 .herm h1 {
   font-family: var(--font-display);
-  font-weight: 700;
-  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  margin: 0 0 14px;
+  font-size: var(--ds-text-display);
+  font-weight: 300;
+  line-height: 0.92;
+  letter-spacing: -0.042em;
+  text-transform: lowercase;
   color: var(--ink);
-  text-shadow: 0 1px 0 rgba(255, 250, 230, 0.6);
+  margin: 0 0 var(--ds-space-md);
+  overflow-wrap: anywhere;
 }
-
 .herm__epigraph {
-  font-family: var(--font-body);
-  font-style: italic;
-  font-size: 1.08rem;
+  font-size: var(--ds-text-3xl);
+  font-weight: 400;
   color: var(--ink-soft);
-  letter-spacing: 0.04em;
-  margin: 0 0 22px;
+  margin: 0 0 var(--ds-space-sm);
 }
-
 .herm__sub {
-  font-size: 1.05rem;
+  max-width: 34em;
   color: var(--ink);
-  line-height: 1.65;
-  max-width: 560px;
-  margin: 0 auto 22px;
-}
-
-/* drop cap on the hero paragraph */
-.herm__sub::first-letter {
-  font-family: var(--font-display);
-  font-weight: 700;
-  font-size: 3.2rem;
-  line-height: 0.85;
-  float: left;
-  margin: 6px 10px 0 0;
-  color: var(--rule);
+  margin: 0 0 var(--ds-space-md);
 }
-
 .herm__meta {
-  font-family: var(--font-body);
-  font-style: italic;
-  font-size: 0.95rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ds-space-hair) 0;
+  font-size: var(--ds-text-md);
   color: var(--ink-soft);
   margin: 0;
 }
-
-.dot { margin: 0 10px; opacity: 0.55; }
-
-/* ---------- Banner / section rule ---------- */
-
-.rule {
-  display: flex;
+.herm__meta a {
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  gap: 14px;
-  margin: 0 auto;
-  max-width: 800px;
-  padding: 18px 24px;
-  color: var(--rule);
-  position: relative;
+  min-height: 24px;
 }
+.dot { margin: 0 var(--ds-space-xs); color: var(--ink-faint); }
 
-.rule::before, .rule::after {
-  content: "";
-  flex: 1;
-  height: 0;
-  border-top: 1px solid var(--rule-soft);
-  box-shadow: 0 2px 0 -1px var(--rule-soft); /* second rule below */
+/* ---------- the section nav (#409): label chips under a hairline ---------- */
+.status-nav {
+  position: sticky;
+  top: 0;
+  z-index: var(--ds-z-topbar);
+  background: var(--bg);
+  border-bottom: var(--line) solid var(--rule-soft);
+  margin: 0;
 }
-
-.rule svg {
-  width: 9px;
-  height: 9px;
-  flex-shrink: 0;
-  opacity: 0.85;
+.status-nav__inner {
+  max-width: var(--content-max);
+  margin: 0 auto;
+  padding: 0 var(--ds-space-gutter-narrow);
 }
-
-.rule--banner svg { width: 11px; height: 11px; }
-
-.rule--small {
-  max-width: 280px;
-  padding: 14px 0 18px;
-  margin-top: 0;
+.status-nav__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 var(--ds-space-md);
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
-
-.rule--small::before, .rule--small::after {
-  box-shadow: none;
-  border-top-color: var(--rule);
-  opacity: 0.5;
+.status-nav__chip {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: uppercase;
+  color: var(--ink-soft);
+  text-decoration: none;
+  border-bottom: 2px solid transparent;
+  white-space: nowrap;
+  transition: color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
+}
+.status-nav__chip:hover { color: var(--ink); }
+.status-nav__chip:focus-visible { border-radius: 0; }
+.status-nav__chip--active {
+  color: var(--ink);
+  border-bottom-color: var(--accent);
 }
 
-/* ---------- Tablets (sections) ---------- */
-
+/* ---------- panels (DESIGN.md "The hall": bg-card, one hairline, 16px, no shadow) ---------- */
 main {
-  max-width: 800px;
+  max-width: var(--content-max);
   margin: 0 auto;
-  padding: 24px 24px 56px;
+  padding: var(--ds-space-md) var(--ds-space-gutter-narrow) var(--ds-space-xl);
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: var(--ds-space-md);
 }
 
 .tablet {
-  position: relative;
   background: var(--bg-card);
-  /* double-rule frame: outer 1px ink rule + 4px parchment channel + inner
-     1px gold rule, achieved with one border + two box-shadows */
-  border: 1px solid var(--ink-soft);
-  border-radius: 0;
-  padding: 28px 32px 30px;
-  box-shadow:
-    inset 0 0 0 4px var(--bg-frame),
-    inset 0 0 0 5px var(--rule-soft),
-    0 2px 0 0 rgba(60, 40, 10, 0.10),
-    0 12px 32px -20px rgba(60, 40, 10, 0.55);
-  /* #409: leave room above each tablet so anchor links from the sticky
-     nav clear the strip. Roughly nav height (~36px) + breathing room. */
-  scroll-margin-top: 64px;
-}
-
-/* small carved corner ornaments (subtle, just interior tick marks) */
-.tablet::before, .tablet::after {
-  content: "";
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  border: 1px solid var(--rule);
-  opacity: 0.55;
+  border: var(--line) solid var(--rule-soft);
+  border-radius: var(--ds-radius-panel);
+  padding: var(--ds-space-gutter);
+  /* leave room above each panel so the sticky nav's anchors clear it */
+  scroll-margin-top: 60px;
 }
-.tablet::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
-.tablet::after  { bottom: 10px; right: 10px; border-left: none; border-top: none; }
 
 .tablet__head {
   display: flex;
   align-items: flex-start;
-  gap: 18px;
-  margin: 0 0 22px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--rule-soft);
-  box-shadow: 0 2px 0 -1px var(--rule-soft);
-  padding-bottom: 18px;
+  gap: var(--ds-space-sm);
+  margin: 0 0 var(--ds-space-md);
 }
-
-.tablet__icon {
-  width: 36px;
-  height: 36px;
-  flex-shrink: 0;
-  color: var(--ink);
-  opacity: 0.82;
-  margin-top: 2px;
-}
-
 .tablet__heading { flex: 1; min-width: 0; }
-
 .tablet h2 {
   font-family: var(--font-display);
-  font-weight: 700;
-  font-size: 1.5rem;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  margin: 0 0 4px;
+  font-size: var(--ds-text-title);
+  font-weight: 300;
+  line-height: 1.2;
+  letter-spacing: -0.03em;
   color: var(--ink);
+  margin: 0 0 var(--ds-space-hair);
 }
-
 .tablet__subtitle {
-  font-family: var(--font-body);
-  font-style: italic;
-  font-size: 0.98rem;
+  font-size: var(--ds-text-lg);
   color: var(--ink-soft);
   margin: 0;
   line-height: 1.45;
 }
 
 .empty {
-  color: var(--ink-faint);
-  font-style: italic;
+  color: var(--ink-soft);
   margin: 0;
-  font-size: 1rem;
+  font-size: var(--ds-text-lg);
 }
 
 /* ---------- The loader (task 1005053; the hall's, task 1005043) ----------
@@ -374,222 +478,180 @@ main {
 .versions {
   display: flex;
   flex-direction: column;
-  gap: 22px;
+  gap: var(--ds-space-md);
 }
 
 .version-row {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--ds-space-hair);
 }
 
 .version-row__name {
   font-family: var(--font-display);
+  font-size: var(--ds-text-xl);
   font-weight: 500;
-  font-size: 1.05rem;
-  letter-spacing: 0.06em;
   color: var(--ink);
 }
 
-/* Stacked three-segment lifecycle bar — shipped / confirmed / completed,
-   sized by raw task count (matches the work board's bars). */
+/* Stacked three-segment lifecycle bar — shipped / confirmed / completed, sized
+   by raw task count (matches the work board's bars). Verification state, so
+   the status vocabulary: shipped is the full --ok, the two earlier stages
+   lighter mixes of it. */
 .version-row__bar {
   display: flex;
-  height: 12px;
-  background: var(--bg-deep);
-  border: 1px solid var(--rule-soft);
+  height: 10px;
+  background: var(--tile);
+  border-radius: var(--radius-pill);
   overflow: hidden;
-  box-shadow: inset 0 1px 2px rgba(60, 40, 10, 0.18);
 }
-.version-row__seg { height: 100%; transition: width 600ms ease-out; }
-.version-row__seg--shipped   { background: linear-gradient(180deg, var(--accent), var(--accent-deep)); }
-.version-row__seg--confirmed { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 65%, white), var(--accent)); }
-.version-row__seg--completed { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 30%, white), color-mix(in oklab, var(--accent) 55%, white)); }
+.version-row__seg { height: 100%; transition: width var(--ds-dur-slower) var(--ds-ease); }
+.version-row__seg--shipped   { background: var(--ok); }
+.version-row__seg--confirmed { background: color-mix(in srgb, var(--ok) 55%, var(--bg-card)); }
+.version-row__seg--completed { background: color-mix(in srgb, var(--ok) 28%, var(--bg-card)); }
 
 .version-row__pct {
-  font-size: 0.92rem;
+  font-size: var(--ds-text-md);
   color: var(--ink-soft);
-  font-style: italic;
   font-variant-numeric: tabular-nums;
 }
 
 /* Description folded into a collapsed dropdown. */
 .version-row__about { margin: 2px 0 0; }
 .version-row__about-summary {
-  cursor: url('cursors/hand-pointer.png') 4 1, pointer;
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  cursor: pointer;
   list-style: none;
-  font-family: var(--font-body);
-  font-style: italic;
-  font-size: 0.92rem;
+  font-size: var(--ds-text-md);
   color: var(--ink-soft);
   user-select: none;
 }
+.version-row__about-summary:hover { color: var(--ink); }
 .version-row__about-summary::-webkit-details-marker { display: none; }
 .version-row__about-summary::before {
-  content: "▸";
-  font-style: normal;
-  font-size: 0.8rem;
-  color: var(--rule);
-  transition: transform 180ms;
+  content: "";
   display: inline-block;
-  width: 0.9em;
+  width: 6px;
+  height: 6px;
+  margin-right: var(--ds-space-xs);
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: rotate(-45deg);
+  transition: transform var(--ds-dur-fast) var(--ds-ease);
 }
-.version-row__about[open] > .version-row__about-summary::before { transform: rotate(90deg); }
+.version-row__about[open] > .version-row__about-summary::before { transform: rotate(45deg); }
 
 .version-row__desc {
-  font-family: var(--font-body);
-  font-style: italic;
-  font-size: 0.95rem;
+  font-size: var(--ds-text-lg);
   line-height: 1.5;
   color: var(--ink-soft);
-  margin: 8px 0 4px;
-  /* Use the full tablet width — the dropdown gives the description the whole
-     row rather than a narrow column (task 981). */
+  margin: var(--ds-space-hair) 0 4px;
   max-width: none;
 }
 
-/* ---------- Treasury (cost summary) ---------- */
+/* ---------- Treasury (cost summary) and the stat tiles ---------- */
 
 .cost-summary {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 14px;
-  margin-bottom: 24px;
+  gap: var(--ds-space-xs);
+  margin-bottom: var(--ds-space-md);
 }
 
 .stat {
-  text-align: center;
-  padding: 16px 12px 14px;
-  background: var(--bg-deep);
-  border: 1px solid var(--rule-soft);
-  position: relative;
-}
-
-.stat::before {
-  content: "";
-  position: absolute;
-  inset: 3px;
-  border: 1px solid var(--bg-card);
-  pointer-events: none;
+  padding: var(--ds-space-sm);
+  background: var(--tile);
+  border-radius: var(--ds-radius-tile);
 }
 
 .stat__num {
   font-family: var(--font-display);
-  font-weight: 700;
-  font-size: 1.9rem;
+  font-size: var(--ds-text-5xl);
+  font-weight: 300;
+  line-height: 1.05;
+  letter-spacing: -0.03em;
   color: var(--ink);
   font-variant-numeric: tabular-nums;
-  line-height: 1.05;
-  letter-spacing: 0.02em;
+  overflow-wrap: anywhere;
 }
 
 .stat__label {
-  font-family: var(--font-body);
-  font-style: italic;
-  font-size: 0.9rem;
+  font-size: var(--ds-text-sm);
   color: var(--ink-soft);
-  margin-top: 6px;
-  letter-spacing: 0.02em;
+  margin-top: var(--ds-space-hair);
 }
 
 .chart-wrap {
   position: relative;
   height: 260px;
-  margin: 0 0 10px;
-  padding: 8px 4px 0;
+  margin: 0 0 var(--ds-space-xs);
 }
 
 .chart-note {
-  font-size: 0.92rem;
+  max-width: 44em;
+  font-size: var(--ds-text-md);
   color: var(--ink-soft);
-  font-style: italic;
-  margin: 0 0 18px;
-  text-align: center;
+  margin: 0 0 var(--ds-space-md);
   line-height: 1.5;
 }
 
 /* V3.R83 (#303): attributed-vs-unattributed spend headline above the chips. */
 .cost-split {
-  font-size: 0.95rem;
+  font-size: var(--ds-text-md);
+  font-weight: 500;
   color: var(--ink);
-  text-align: center;
-  margin: 0 0 10px;
-  font-weight: 600;
+  margin: 0 0 var(--ds-space-xs);
 }
 
+.cost-filters { gap: var(--ds-space-sm) !important; }
+
 .cost-cats {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
-  justify-content: center;
+  gap: var(--ds-space-hair);
 }
 
 .cost-cat {
-  font-family: var(--font-body);
-  font-size: 0.92rem;
-  padding: 5px 12px;
-  background: var(--bg-deep);
-  border: 1px solid var(--rule-soft);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 26px;
+  padding: 0 var(--ds-space-xs);
+  border-radius: var(--radius-pill);
+  background: var(--tile);
+  font-size: var(--ds-text-sm);
   color: var(--ink-soft);
   font-variant-numeric: tabular-nums;
 }
 
 .cost-cat strong {
-  font-family: var(--font-display);
-  color: var(--ink);
   font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  font-size: 0.78rem;
-  margin-right: 4px;
+  color: var(--ink);
+  margin-right: 2px;
 }
 
-/* ---------- Lately Inscribed (shipped feed) ---------- */
-
-/* GDS #191: in-head date-range filter. Sits to the right of the heading on
-   wide layouts; falls beneath it on narrow viewports via the existing
-   tablet__head media query at the bottom of this file. */
+/* ---------- the panel filters (GDS #191) ----------
+   The field itself is the shared one (controls.css); this only lays it out. */
 .tablet__filter {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--ds-space-hair);
   flex-shrink: 0;
-  margin-top: 4px;
 }
 
 .tablet__filter-label {
-  font-family: var(--font-display);
-  font-weight: 500;
-  font-size: 0.72rem;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
   text-transform: uppercase;
-  letter-spacing: 0.18em;
   color: var(--ink-soft);
 }
 
-.tablet__filter-select {
-  font-family: var(--font-body);
-  font-size: 0.92rem;
-  color: var(--ink);
-  background: transparent;
-  border: 1px solid var(--rule);
-  padding: 5px 26px 5px 10px;
-  cursor: url('cursors/hand-pointer.png') 4 1, pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
-                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
-  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
-  background-size: 5px 5px, 5px 5px;
-  background-repeat: no-repeat;
-  transition: border-color 0.15s ease, background-color 0.15s ease;
-}
-
-.tablet__filter-select:hover,
-.tablet__filter-select:focus {
-  border-color: var(--ink-soft);
-  outline: none;
-  background-color: var(--rule-soft);
-}
+.tablet__filter-select { cursor: pointer; }
+
+/* ---------- Lately Inscribed (shipped feed): ledger rows ---------- */
 
 .shipped {
   list-style: none;
@@ -600,123 +662,76 @@ main {
 }
 
 .shipped li:not(.empty):not(.empty-row) {
-  padding: 16px 0 14px;
-  border-bottom: 1px solid var(--rule-soft);
-  position: relative;
-}
-
-.shipped li:not(.empty):not(.empty-row)::before {
-  content: "❦";
-  position: absolute;
-  left: 0;
-  top: 17px;
-  color: var(--rule);
-  font-size: 0.85rem;
-  opacity: 0.6;
-}
-
-.shipped li:not(.empty):not(.empty-row) {
-  padding-left: 22px;
+  padding: var(--ds-space-sm) 0;
+  border-bottom: var(--line) solid var(--rule-soft);
 }
 
 .shipped li:last-child { border-bottom: none; }
 
-/* GDS #191: invisible placeholder rows pad short pages so the section
-   height is constant across pages and across date-range changes. Matches
-   the vertical footprint of a real .shipped li: 16px top padding + ~1.5em
-   title (24px) + 4px gap + ~0.92rem italic meta (~21px) + 14px bottom
-   padding + 1px border ≈ 80px. aria-hidden in markup keeps them out of
-   the a11y tree. */
+/* GDS #191: invisible placeholder rows pad short pages so the section height is
+   constant across pages and date ranges. aria-hidden in markup. */
 .shipped li.empty-row {
   visibility: hidden;
-  min-height: 83px;
-  border-bottom: 1px solid transparent;
+  min-height: 76px;
+  border-bottom: var(--line) solid transparent;
 }
 
 .shipped__title {
-  font-size: 1.05rem;
+  font-size: var(--ds-text-xl);
   color: var(--ink);
   margin: 0 0 4px;
-  line-height: 1.5;
+  line-height: 1.45;
 }
 
 .shipped__meta {
-  font-size: 0.92rem;
+  font-size: var(--ds-text-md);
   color: var(--ink-soft);
-  font-style: italic;
   margin: 0;
 }
 
-/* task 1003109: the optional ship-time visual on a public shipped row. Small on
-   purpose — this is a scannable feed, and the thumbnail links to the full-size
-   image for anyone who wants to look properly. Absent on most rows; nothing is
-   drawn when a task has no visual. */
+/* task 1003109: the optional ship-time visual on a public shipped row. */
 .shipped__visual {
   display: block;
   width: 40px;
   height: 40px;
   object-fit: cover;
-  margin: 0 0 6px;
-  border: 1px solid var(--rule, rgba(0, 0, 0, 0.15));
-  border-radius: 3px;
+  margin: 0 0 var(--ds-space-hair);
+  border-radius: var(--ds-radius-tile);
 }
 
 .shipped__version {
-  font-family: var(--font-display);
-  font-weight: 500;
-  font-size: 0.7rem;
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 0 var(--ds-space-hair);
+  margin-right: var(--ds-space-xs);
+  border-radius: var(--radius-pill);
+  background: var(--tile);
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
   text-transform: uppercase;
-  letter-spacing: 0.18em;
-  padding: 2px 8px 1px;
-  border: 1px solid var(--rule-soft);
   color: var(--ink-soft);
-  margin-right: 10px;
-  vertical-align: 2px;
-  font-style: normal;
+  vertical-align: 1px;
 }
 
 .shipped-pager {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
-  margin-top: 18px;
-  padding-top: 14px;
-  border-top: 1px solid var(--rule-soft);
-}
-
-.shipped-pager__btn {
-  font-family: var(--font-display);
-  font-weight: 500;
-  font-size: 0.78rem;
-  text-transform: uppercase;
-  letter-spacing: 0.14em;
-  padding: 7px 14px 6px;
-  background: transparent;
-  color: var(--ink);
-  border: 1px solid var(--rule);
-  cursor: url('cursors/hand-pointer.png') 4 1, pointer;
-  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
-}
-
-.shipped-pager__btn:hover:not(:disabled) {
-  background: var(--rule-soft);
-  border-color: var(--ink-soft);
-}
-
-.shipped-pager__btn:disabled {
-  opacity: 0.35;
-  cursor: not-allowed;
+  gap: var(--ds-space-sm);
+  margin-top: var(--ds-space-sm);
+  padding-top: var(--ds-space-sm);
+  border-top: var(--line) solid var(--rule-soft);
 }
 
 .shipped-pager__info {
-  font-family: var(--font-body);
-  font-style: italic;
   color: var(--ink-soft);
-  font-size: 0.95rem;
+  font-size: var(--ds-text-md);
+  font-variant-numeric: tabular-nums;
 }
 
-/* ---------- Architects (leaderboard) ---------- */
+/* ---------- Architects (leaderboard): ledger rows ---------- */
 
 .leader {
   list-style: none;
@@ -728,20 +743,18 @@ main {
 .leader li:not(.empty) {
   display: flex;
   align-items: center;
-  gap: 14px;
-  padding: 12px 0;
+  gap: var(--ds-space-sm);
+  padding: var(--ds-space-xs) 0;
   counter-increment: leader;
-  border-bottom: 1px solid var(--rule-soft);
+  border-bottom: var(--line) solid var(--rule-soft);
 }
 
 .leader li:not(.empty)::before {
-  content: counter(leader, upper-roman);
-  font-family: var(--font-display);
-  font-weight: 700;
-  font-size: 1.15rem;
-  letter-spacing: 0.04em;
-  color: var(--rule);
-  width: 42px;
+  content: counter(leader);
+  font-family: var(--font-mono);
+  font-size: var(--ds-text-sm);
+  color: var(--ink-faint);
+  width: 24px;
   text-align: right;
   flex-shrink: 0;
   font-variant-numeric: tabular-nums;
@@ -752,55 +765,45 @@ main {
 .leader__avatar {
   width: 36px;
   height: 36px;
-  border-radius: 0;
-  background: var(--bg-deep);
-  border: 1px solid var(--rule-soft);
+  border-radius: 50%;
+  background: var(--tile);
   flex-shrink: 0;
-  filter: sepia(0.25) saturate(0.85);
 }
 
 .leader__name {
   flex-grow: 1;
-  font-family: var(--font-display);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-size: var(--ds-text-xl);
   font-weight: 500;
-  font-size: 1rem;
-  letter-spacing: 0.06em;
   color: var(--ink);
 }
 
 .leader__login {
-  font-family: var(--font-body);
-  font-style: italic;
-  letter-spacing: 0;
-  color: var(--ink-soft);
-  font-size: 0.92rem;
-  margin-left: 8px;
+  font-size: var(--ds-text-md);
   font-weight: 400;
-  text-transform: none;
+  color: var(--ink-soft);
+  margin-left: var(--ds-space-hair);
 }
 
 .leader__credits {
   font-family: var(--font-display);
+  font-size: var(--ds-text-xl);
+  font-weight: 500;
+  color: var(--ink);
   font-variant-numeric: tabular-nums;
-  color: var(--accent-deep);
-  font-weight: 700;
-  font-size: 1.05rem;
-  letter-spacing: 0.04em;
+  white-space: nowrap;
 }
 
 .leader__credits-unit {
-  font-family: var(--font-body);
-  font-style: italic;
+  font-size: var(--ds-text-sm);
   font-weight: 400;
-  font-size: 0.85rem;
   color: var(--ink-soft);
   margin-left: 4px;
-  letter-spacing: 0;
 }
 
-/* The roles under each builder's name (task 1004437): one small tag per role
-   the builder has earned in, the main one a step stronger, as the hall's
-   roster and the approved mock draw them, on this page's own palette. */
+/* The roles under each builder's name (task 1004437): one small tag per role,
+   the main one a step stronger, as the hall's roster draws them. */
 .leader__roles {
   display: flex;
   flex-wrap: wrap;
@@ -811,181 +814,94 @@ main {
   display: inline-flex;
   align-items: center;
   min-height: 22px;
-  padding: 0 8px;
-  border: 1px solid var(--rule-soft);
-  font-family: var(--font-body);
-  font-size: 0.78rem;
+  padding: 0 var(--ds-space-hair);
+  border-radius: var(--radius-pill);
+  background: var(--tile);
+  font-size: var(--ds-text-xs);
   font-weight: 400;
-  letter-spacing: 0;
   color: var(--ink-soft);
-  text-transform: none;
 }
-.leader__role--lead { color: var(--ink); border-color: var(--rule); }
+.leader__role--lead { color: var(--ink); background: var(--glass-strong); }
 
-/* Inline laurels next to each architect's name. Slightly dimmed so the
-   name still leads the row; emoji glyphs would otherwise punch above the
-   marble palette. PMS-V2 #54 */
 .leader__achievements {
   display: inline-flex;
   gap: 4px;
-  margin-left: 10px;
+  margin-left: var(--ds-space-xs);
   vertical-align: 1px;
   line-height: 1;
 }
 .leader__ach {
-  font-size: 0.95rem;
+  font-size: var(--ds-text-lg);
   line-height: 1;
-  filter: saturate(0.8);
   cursor: help;
 }
 
 /* ---------- Footer ---------- */
 
 .foot {
-  text-align: center;
-  padding: 24px 24px 56px;
-  color: var(--ink-soft);
-  font-size: 0.95rem;
-  font-style: italic;
-  max-width: 640px;
+  max-width: var(--content-max);
   margin: 0 auto;
+  padding: var(--ds-space-lg) var(--ds-space-gutter-narrow) var(--ds-space-xl);
+  border-top: var(--line) solid var(--rule-soft);
+  color: var(--ink-soft);
+  font-size: var(--ds-text-md);
 }
 
-.foot p { margin: 6px 0; line-height: 1.55; }
-
-.foot strong {
-  font-family: var(--font-display);
-  font-weight: 500;
-  font-style: normal;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  font-size: 0.85rem;
-  color: var(--ink);
-}
+.foot p { margin: var(--ds-space-hair) 0; line-height: 1.55; }
+.foot a { display: inline-flex; align-items: center; min-height: 24px; }
+.foot strong { font-weight: 500; color: var(--ink); }
 
 .foot__seal {
-  font-family: var(--font-display);
-  font-style: normal;
-  font-weight: 500;
-  letter-spacing: 0.22em;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
   text-transform: uppercase;
-  font-size: 0.78rem;
-  color: var(--rule);
-  margin: 6px 0 14px !important;
-}
-
-/* ---------- Mobile ---------- */
-
-@media (max-width: 540px) {
-  body { font-size: 17px; }
-  .herm { padding: 44px 18px 22px; }
-  .herm h1 {
-    font-size: clamp(1.9rem, 8vw, 2.4rem);
-    letter-spacing: 0.06em;
-  }
-  .herm__sigil { width: 60px; height: 60px; }
-  .tablet { padding: 22px 18px 24px; }
-  .tablet__head { gap: 12px; flex-wrap: wrap; }
-  .tablet h2 { font-size: 1.15rem; letter-spacing: 0.08em; }
-  .tablet__icon { width: 28px; height: 28px; }
-  /* GDS #191: on narrow viewports, push the filter onto its own row beneath
-     the heading so the subtitle doesn't get squeezed to a single column. */
-  .tablet__filter { width: 100%; justify-content: flex-end; margin-top: 2px; }
-  .stat__num { font-size: 1.5rem; }
-  .stat__label { font-size: 0.82rem; }
-  .version-row__name { font-size: 0.95rem; letter-spacing: 0.04em; }
-  .leader li:not(.empty) { gap: 10px; }
-  .leader li:not(.empty)::before { width: 32px; font-size: 1rem; }
-  .leader__name { font-size: 0.92rem; letter-spacing: 0.04em; }
-  .leader__login { display: block; margin-left: 0; margin-top: 2px; }
-  main { padding: 16px 16px 40px; gap: 22px; }
-
-  .world-snapshot img { max-width: 100%; }
-  .world-timeline__thumb { width: 96px; height: auto; }
+  color: var(--ink-faint);
+  margin: 0 0 var(--ds-space-sm) !important;
 }
 
 /* ---------- World snapshot ---------- */
 
-/* The world section breaks out of main's 800px column on wide screens so
-   the snapshot can render near its native 960px width — sprites are
-   recognizable at full size, lost in the sand texture below ~750px. On
-   narrow screens we just stay inside the column. */
-@media (min-width: 1080px) {
-  .tablet.tablet--wide {
-    margin-left: -140px;
-    margin-right: -140px;
-  }
-}
-
-.world-snapshot {
-  text-align: center;
-  margin-bottom: 20px;
-}
+.world-snapshot { margin-bottom: var(--ds-space-md); }
 
 .world-snapshot img {
   display: block;
   margin: 0 auto;
   width: 960px;
   max-width: 100%;
-  /* Preserve native 960×576 (5:3) aspect when CSS scales width on narrow
-     screens. Without height:auto the HTML height attribute is honored and
-     the image stretches vertically. */
+  /* keep the native 960x576 (5:3) aspect when CSS scales the width */
   height: auto;
   aspect-ratio: 5 / 3;
   /* pixel-art rendering: crisp upscaling, no anti-alias blur */
   image-rendering: pixelated;
   image-rendering: crisp-edges;
-  border: 1px solid var(--rule-soft);
-  box-shadow: 0 2px 12px -4px rgba(60, 40, 10, 0.40);
+  border-radius: var(--ds-radius-tile);
 }
 
 .world-snapshot__caption {
-  font-family: var(--font-body);
-  font-style: italic;
-  font-size: 0.95rem;
+  font-size: var(--ds-text-md);
   color: var(--ink-soft);
-  margin: 12px 0 0;
-}
-
-.world-snapshot__caption strong {
-  font-style: normal;
-  font-weight: 600;
-  color: var(--ink);
-  font-family: var(--font-display);
-  font-size: 0.85em;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin-right: 2px;
+  margin: var(--ds-space-xs) 0 0;
 }
+.world-snapshot__caption strong { font-weight: 500; color: var(--ink); margin-right: 2px; }
 
 .world-snapshot__sha {
-  font-family: ui-monospace, "SF Mono", Menlo, monospace;
-  font-size: 0.78rem;
-  font-style: normal;
+  font-family: var(--font-mono);
+  font-size: var(--ds-text-xs);
   color: var(--ink-faint);
-  letter-spacing: 0.04em;
 }
 
 /* Horizontal scroll strip of thumbnails */
 .world-timeline {
   display: flex;
-  gap: 10px;
+  gap: var(--ds-space-xs);
   overflow-x: auto;
-  padding-bottom: 8px;
+  padding-bottom: var(--ds-space-hair);
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
-  /* custom scrollbar to match the aged-parchment aesthetic */
   scrollbar-width: thin;
-  scrollbar-color: var(--rule-soft) transparent;
+  scrollbar-color: var(--rule) transparent;
 }
-
-.world-timeline::-webkit-scrollbar { height: 5px; }
-.world-timeline::-webkit-scrollbar-track { background: transparent; }
-.world-timeline::-webkit-scrollbar-thumb {
-  background: var(--rule-soft);
-  border-radius: 3px;
-}
-
 .world-timeline:empty { display: none; }
 
 .world-timeline__item {
@@ -994,21 +910,14 @@ main {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 5px;
-  cursor: url('cursors/hand-pointer.png') 4 1, pointer;
+  gap: 4px;
+  cursor: pointer;
   opacity: 0.72;
-  transition: opacity 180ms;
+  transition: opacity var(--ds-dur-fast) var(--ds-ease);
 }
-
 .world-timeline__item:hover,
-.world-timeline__item[aria-current="true"] {
-  opacity: 1;
-}
-
-.world-timeline__item[aria-current="true"] .world-timeline__thumb {
-  border-color: var(--rule);
-  box-shadow: 0 0 0 1px var(--rule);
-}
+.world-timeline__item[aria-current="true"] { opacity: 1; }
+.world-timeline__item[aria-current="true"] .world-timeline__thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
 
 .world-timeline__thumb {
   display: block;
@@ -1017,286 +926,184 @@ main {
   aspect-ratio: 5 / 3;
   image-rendering: pixelated;
   image-rendering: crisp-edges;
-  border: 1px solid var(--rule-soft);
+  border-radius: var(--ds-radius-tile);
 }
 
 .world-timeline__date {
-  font-family: var(--font-body);
-  font-size: 0.75rem;
+  font-size: var(--ds-text-xs);
   color: var(--ink-soft);
-  letter-spacing: 0.02em;
 }
 
 .world-note {
-  font-family: var(--font-body);
-  font-style: italic;
-  font-size: 0.88rem;
-  color: var(--ink-faint);
-  margin: 12px 0 0;
-  text-align: right;
+  font-size: var(--ds-text-md);
+  color: var(--ink-soft);
+  margin: var(--ds-space-xs) 0 0;
 }
 
-/* --- Sticky status nav (#409) ----------------------------------------------
-   Same design language as the hall's chip strip in public-builders/style.css
-   (.hall-nav__*). Independently styled here because the two surfaces don't
-   share a stylesheet; this duplication is intentional and per the task spec
-   to keep parallel-safety with anyone editing the hall. Visual rhythm is
-   identical: Cinzel-uppercase carved labels, terracotta active underline,
-   parchment background with hairline bottom rule. */
-
-.status-nav {
-  position: sticky;
-  top: 0;
-  z-index: 50;
-  background: rgba(243, 230, 198, 0.96);
-  backdrop-filter: blur(2px);
-  border-bottom: 1px solid var(--rule);
-  box-shadow: inset 0 -1px 0 var(--rule-soft);
-  padding: 6px 0 4px;
-  margin: 0;
-}
-.status-nav__inner {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 0 22px;
+/* --- Snapshot history collapsed toggle (#409) ----------------------------- */
+.world-history {
+  margin-top: var(--ds-space-sm);
+  border-top: var(--line) solid var(--rule-soft);
 }
-.status-nav__list {
+.world-history__summary {
   display: flex;
-  flex-wrap: wrap;
-  gap: 2px 12px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  align-items: baseline;
-}
-.status-nav__chip {
-  font-family: var(--font-display);
-  font-size: 0.74rem;
-  font-weight: 700;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
+  align-items: center;
+  min-height: 44px;
+  cursor: pointer;
+  font-size: var(--ds-text-md);
   color: var(--ink-soft);
-  text-decoration: none;
-  background: transparent;
-  border: none;
-  border-bottom: 2px solid transparent;
-  padding: 6px 2px 4px;
-  cursor: url('cursors/hand-pointer.png') 4 1, pointer;
-  transition: color 150ms, border-color 150ms;
-  white-space: nowrap;
-}
-.status-nav__chip:hover {
-  color: var(--ink);
-  border-bottom-color: var(--rule-soft);
-}
-.status-nav__chip:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-.status-nav__chip--active {
-  color: var(--terracotta);
-  border-bottom-color: var(--terracotta);
-}
-
-@media (max-width: 640px) {
-  .status-nav { padding: 4px 0 2px; }
-  .status-nav__inner { padding: 0 12px; }
-  .status-nav__list {
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    gap: 0 12px;
-    padding-bottom: 2px;
-    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
-    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
-  }
-  .status-nav__chip {
-    flex-shrink: 0;
-    font-size: 0.72rem;
-    letter-spacing: 0.12em;
-  }
-  /* Tablets need a touch less clearance under the smaller mobile nav. */
-  .tablet { scroll-margin-top: 56px; }
+  list-style: none;
+  user-select: none;
 }
+.world-history__summary::-webkit-details-marker { display: none; }
+.world-history__summary::before {
+  content: "";
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-right: var(--ds-space-xs);
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: rotate(-45deg);
+  transition: transform var(--ds-dur-fast) var(--ds-ease);
+}
+.world-history[open] > .world-history__summary::before { transform: rotate(45deg); }
+.world-history__summary:hover { color: var(--ink); }
 
-/* --- Headline strip (#409) -------------------------------------------------
-   Above-the-fold answer to three common visitor questions (shipped, spend,
-   quality). Uses the existing .stat block from the cost summary for visual
-   rhythm — no new card vocabulary invented. */
-
-.tablet--headline {
-  padding: 22px 32px 24px;
-}
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
+/* --- Headline strip (#409): the same stat tiles ---------------------------- */
 .headline-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 14px;
-}
-.headline-stat {
-  text-align: center;
-  position: relative;
-}
-.headline-stat .stat__num {
-  font-size: 1.55rem;
-  letter-spacing: 0.04em;
-}
-.headline-stat .stat__label {
-  font-size: 0.84rem;
-  margin-top: 6px;
+  gap: var(--ds-space-xs);
 }
+.headline-stat { position: relative; }
 .headline-bar {
-  margin: 10px auto 0;
-  width: 80%;
-  height: 5px;
-  background: var(--bg-card);
-  border: 1px solid var(--rule-soft);
+  margin: var(--ds-space-xs) 0 0;
+  height: 6px;
+  background: var(--glass-strong);
+  border-radius: var(--radius-pill);
+  overflow: hidden;
 }
+/* Spend against the year's purse is a state, so the status vocabulary paints it:
+   on course, near the line, over it. */
 .headline-bar__fill {
   display: block;
   height: 100%;
-  background: var(--accent);
-  transition: width 400ms ease;
-}
-.headline-bar__fill--warn { background: #a86a2a; }
-.headline-bar__fill--over { background: var(--terracotta); }
-
-@media (max-width: 480px) {
-  .headline-grid { grid-template-columns: 1fr; }
+  background: var(--info);
+  transition: width var(--ds-dur-slower) var(--ds-ease);
 }
-
-/* --- Snapshot history collapsed toggle (#409) ----------------------------- */
-
-.world-history {
-  margin-top: 16px;
-}
-.world-history__summary {
-  cursor: url('cursors/hand-pointer.png') 4 1, pointer;
-  font-family: var(--font-display);
-  font-size: 0.78rem;
-  font-weight: 500;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--ink-soft);
-  padding: 8px 0;
-  border-top: 1px dashed var(--rule-soft);
-  list-style: none;
-  user-select: none;
-}
-.world-history__summary::-webkit-details-marker { display: none; }
-.world-history__summary::before {
-  content: "▸ ";
-  display: inline-block;
-  margin-right: 6px;
-  transition: transform 150ms;
-}
-.world-history[open] > .world-history__summary::before {
-  content: "▾ ";
-}
-.world-history__summary:hover { color: var(--ink); }
+.headline-bar__fill--warn { background: var(--warn); }
+.headline-bar__fill--over { background: var(--danger); }
 
 /* ---- The Foundry — ecosystem dev curve (#291, C5) ---------------------- */
 .foundry__charts {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 0.8rem;
-  margin: 0.8rem 0;
+  gap: var(--ds-space-xs);
+  margin: var(--ds-space-sm) 0;
 }
 .foundry__chart {
-  background: var(--bg-deep);
-  border: 1px solid var(--rule-soft);
-  border-radius: 6px;
-  padding: 0.6rem 0.7rem 0.5rem;
+  background: var(--tile);
+  border-radius: var(--ds-radius-tile);
+  padding: var(--ds-space-xs) var(--ds-space-sm);
 }
 .foundry__chart-title {
-  font-size: 0.82rem;
-  font-weight: 600;
+  font-size: var(--ds-text-sm);
+  font-weight: 500;
   color: var(--ink-soft);
-  margin-bottom: 0.4rem;
+  margin-bottom: var(--ds-space-hair);
 }
-.foundry-spark { display: block; width: 100%; height: 54px; }
-.foundry-spark__area { opacity: 0.16; }
-.foundry-spark__line { stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
-.foundry__kinds { margin-top: 0.4rem; }
+.foundry-spark { display: block; width: 100%; height: 54px; color: var(--info); }
+.foundry-spark--ink { color: var(--ink); }
+.foundry-spark__area { fill: currentColor; opacity: 0.16; }
+.foundry-spark__line { fill: none; stroke: currentColor; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
+.foundry__kinds { margin-top: var(--ds-space-hair); }
 .foundry__kind {
   display: grid;
   grid-template-columns: 8rem 1fr 2rem;
   align-items: center;
-  gap: 0.5rem;
-  margin: 0.25rem 0;
+  gap: var(--ds-space-hair);
+  margin: 4px 0;
 }
-.foundry__kind-label { font-size: 0.82rem; color: var(--ink); text-transform: capitalize; }
-.foundry__kind-bar { background: var(--bg-frame); border-radius: 3px; height: 0.7rem; overflow: hidden; }
-.foundry__kind-fill { display: block; height: 100%; background: var(--accent); }
-.foundry__kind-n { font-size: 0.8rem; color: var(--ink-soft); text-align: right; }
+.foundry__kind-label { font-size: var(--ds-text-sm); color: var(--ink); }
+.foundry__kind-bar { background: var(--glass-strong); border-radius: var(--radius-pill); height: 8px; overflow: hidden; }
+.foundry__kind-fill { display: block; height: 100%; background: var(--info); }
+.foundry__kind-n { font-size: var(--ds-text-sm); color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
 
-/* Deep-link card (#654): the minimal task/idea/blocker resolver overlay. */
+/* Deep-link card (#654): the minimal task/idea/blocker resolver overlay. It
+   floats over a scrim, so it is the one thing on the page with a shadow. */
 .deeplink {
-  position: fixed; inset: 0; z-index: 200;
-  display: flex; align-items: center; justify-content: center;
-  background: rgba(42, 33, 16, 0.55); backdrop-filter: blur(2px); padding: 1.5rem;
+  position: fixed;
+  inset: 0;
+  z-index: var(--ds-z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ds-space-md);
+  background: var(--scrim);
 }
 .deeplink__panel {
-  position: relative; max-width: 30rem; width: 100%;
-  background: var(--bg-card); border: 2px solid var(--rule); border-radius: 5px;
-  padding: 1.4rem 1.6rem; box-shadow: 0 10px 40px rgba(42, 33, 16, 0.35);
+  position: relative;
+  max-width: 30rem;
+  width: 100%;
+  background: var(--bg-card);
+  border: var(--line) solid var(--rule-soft);
+  border-radius: var(--ds-radius-panel);
+  padding: var(--ds-space-md) var(--ds-space-gutter);
+  box-shadow: var(--ds-shadow-pop);
 }
 .deeplink__close {
-  position: absolute; top: 0.4rem; right: 0.6rem;
-  background: none; border: none; cursor: pointer;
-  font-size: 1.5rem; line-height: 1; color: var(--ink-soft);
+  position: absolute;
+  top: var(--ds-space-hair);
+  right: var(--ds-space-hair);
+  min-width: 40px;
+  min-height: 40px;
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: none;
+  cursor: pointer;
+  font-size: var(--ds-text-4xl);
+  line-height: 1;
+  color: var(--ink-soft);
 }
-.deeplink__close:hover { color: var(--ink); }
+.deeplink__close:hover { color: var(--ink); background: var(--glass); }
 .deeplink__kind {
-  font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.18em;
-  color: var(--rule); margin: 0 0 0.3rem;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  color: var(--ink-faint);
+  margin: 0 0 var(--ds-space-hair);
 }
-.deeplink__title { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); margin: 0 0 0.4rem; }
-.deeplink__meta { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 0.6rem; }
-.deeplink__note { font-size: 0.85rem; color: var(--ink-faint); font-style: italic; margin: 0 0 0.6rem; }
-.deeplink__link { display: inline-block; color: var(--sea); font-weight: 600; text-decoration: none; }
-.deeplink__link:hover { text-decoration: underline; }
+.deeplink__title { font-size: var(--ds-text-3xl); font-weight: 500; color: var(--ink); margin: 0 0 var(--ds-space-hair); }
+.deeplink__meta { font-size: var(--ds-text-md); color: var(--ink-soft); margin: 0 0 var(--ds-space-xs); }
+.deeplink__note { font-size: var(--ds-text-md); color: var(--ink-soft); margin: 0 0 var(--ds-space-xs); }
+.deeplink__link { display: inline-flex; align-items: center; min-height: 24px; font-weight: 500; }
 
-/* task 1475 (idea 280): the fixed accessibility zoom control, styled to the
-   ledger (tablet face + gold rule). Always reachable, top-right. */
-.ledger-zoom {
-  position: fixed;
-  top: 12px;
-  right: 12px;
-  z-index: 200;
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  min-width: 38px;
-  height: 38px;
-  padding: 0 10px;
-  border: 1px solid var(--rule);
-  border-radius: 8px;
-  background: var(--bg-card);
-  color: var(--ink-soft);
-  cursor: pointer;
-  box-shadow: 0 1px 4px rgba(42, 33, 16, 0.18);
+/* ---------- Narrow screens ---------- */
+@media (max-width: 640px) {
+  .status-nav__list {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    gap: 0 var(--ds-space-sm);
+    scrollbar-width: none;
+  }
+  .status-nav__chip { flex-shrink: 0; }
+  .tablet { padding: var(--ds-space-md) var(--ds-space-sm); scroll-margin-top: 52px; }
+  .tablet__head { flex-wrap: wrap; }
+  /* GDS #191: the filter takes its own row beneath the heading */
+  .tablet__filter { width: 100%; }
+  .leader li:not(.empty) { gap: var(--ds-space-xs); }
+  .leader__login { display: block; margin-left: 0; margin-top: 2px; }
+  main { padding: var(--ds-space-sm) var(--ds-space-sm) var(--ds-space-lg); gap: var(--ds-space-sm); }
+  .herm { padding: var(--ds-space-lg) var(--ds-space-sm) var(--ds-space-md); }
+  .topbar__inner, .status-nav__inner { padding: 0 var(--ds-space-sm); }
+  .world-timeline__thumb { width: 96px; }
+  .foundry__kind { grid-template-columns: 6rem 1fr 2rem; }
 }
-.ledger-zoom:hover { color: var(--ink); background: var(--bg-deep); }
-.ledger-zoom svg { width: 18px; height: 18px; }
-.ledger-zoom--on { color: var(--terracotta); border-color: var(--terracotta); }
-.ledger-zoom__pct {
-  font-family: var(--font-body);
-  font-size: 13px;
-  font-weight: 700;
-  font-variant-numeric: tabular-nums;
-  line-height: 1;
+@media (max-width: 480px) {
+  .headline-grid { grid-template-columns: 1fr; }
 }
 
 /* ---------- The Kill Switch (task 1005053) ----------