@half-built/css 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Curt Henrichs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,11 @@
+# @half-built/css
+
+Design tokens, base styles, patterns, and prose CSS for the half-built
+design system.
+
+## Provenance
+
+Extracted from the private `half-built-robots-blog` repository, where
+this CSS was built and used in production. The extraction review that
+checked it for blog-specific assumptions before the move is the design
+record for this package.

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@half-built/css",
+  "version": "0.1.0",
+  "description": "Design tokens, base, patterns, and prose CSS for the half-built design system.",
+  "license": "MIT",
+  "type": "module",
+  "files": ["src"],
+  "dependencies": {
+    "@fontsource/roboto-mono": "^5.3.0"
+  },
+  "exports": {
+    ".": "./src/global.css",
+    "./layers": "./src/layers.css",
+    "./tokens": "./src/tokens.css",
+    "./*": "./src/*"
+  },
+  "publishConfig": { "access": "public" }
+}

package/src/base/link-tip.css

@@ -0,0 +1,35 @@
+/* Layer: base. The link tooltip: one island-owned singleton element
+   (scripts/link-tip.ts) revealing an external link's href or an
+   internal link's build-time data-tooltip, in the boxed grammar the
+   live theme used (same visual language as the search flyout). JS
+   measures and places it position: fixed; this file carries only the
+   look. pointer-events: none so the box never steals the hover that
+   opened it. */
+@layer base {
+  .link-tip {
+    position: fixed;
+    background: var(--surface);
+    border: var(--stroke) solid;
+    color: var(--ink);
+    padding: 5px;
+    font-size: 0.85rem;
+    line-height: 1.3;
+    /* A URL is one unbroken word; capped and wrapped it folds into a
+       few short lines instead of a spear off the viewport edge. UI
+       label, not prose: the no-cap rule does not apply. */
+    max-width: calc(100vw - 40px);
+    width: max-content;
+    overflow-wrap: anywhere;
+    box-sizing: border-box;
+    pointer-events: none;
+    opacity: 0;
+    transition: var(--transition);
+    transition-property: opacity;
+    z-index: var(--z-tooltip);
+  }
+  .link-tip.is-open { opacity: 1; }
+  /* Backstop only: the island already mounts inert under (hover: none). */
+  @media (hover: none) {
+    .link-tip { display: none; }
+  }
+}

package/src/base/reset.css

@@ -0,0 +1,61 @@
+/* Layer: base. Element defaults and accessibility utilities: the part of
+   the base layer any site keeps. Page containers are in shell.css.
+   See docs/css-architecture.md. */
+@layer base {
+  * { box-sizing: border-box; }
+
+  html { scroll-behavior: smooth; }
+
+  body {
+    margin: 0;
+    color: var(--ink);
+    background: var(--surface);
+    font-size: 1rem;
+    line-height: 1.5;
+    font-family: var(--font-body);
+
+    /* The layout stops trying to shrink below the narrowest mainstream
+       phone width; under it the viewport scrolls horizontally as one
+       intact unit instead of clipping card heroes and text (owner call
+       2026-08-20, found squeezing devtools toward 222px). An overridable
+       house default, not a system constant (step 11.1). */
+    min-width: 360px;
+  }
+
+  a { color: var(--ink); }
+
+  /* Keyboard focus, one answer for the whole site (owner call
+     2026-08-26): a 2px amber ring held 2px off the element, on
+     :focus-visible only, so a mouse click never leaves a ring behind and
+     focus never looks like hover. Components keep their own hover looks;
+     the only local focus rules left are the joined field's inset rings,
+     which keep its fused box intact, and two offsets where a container's
+     overflow would clip an outside ring. */
+  :focus-visible {
+    outline: 2px solid var(--focus-ring);
+    outline-offset: 2px;
+  }
+
+  .skip-link {
+    position: absolute;
+    left: -9999px;
+    top: 0;
+    background: var(--surface);
+    border: var(--stroke) solid var(--rule);
+    padding: 8px 14px;
+    z-index: var(--z-skip-link);
+  }
+  .skip-link:focus { left: 10px; }
+
+  .screen-reader-text {
+    position: absolute;
+    left: -9999px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    * { animation: none !important; transition: none !important; }
+  }
+}

package/src/base/scroll-top.css

@@ -0,0 +1,35 @@
+/* Layer: base. Floating scroll-to-top, matching the live button: fixed
+   bottom-right, 40x40, hidden until the header scrolls out of the
+   viewport. The JS half (the .show toggle) lives in Base.astro. */
+@layer base {
+  a.scroll-top {
+    position: fixed;
+    bottom: 53px;
+    right: 30px;
+    height: 40px;
+    width: 40px;
+    opacity: 0;
+    visibility: hidden;
+    z-index: var(--z-scroll-top);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    color: var(--ink);
+    background-color: var(--surface);
+    border: 1px solid var(--rule);
+    transition: var(--transition);
+  }
+  a.scroll-top:hover { outline: var(--stroke) solid var(--rule); }
+  a.scroll-top:hover,
+  a.scroll-top:focus-visible { transform: translateY(-10px); }
+  a.scroll-top.show {
+    opacity: 1;
+    visibility: visible;
+  }
+  /* Phones flick-scroll and tap the status bar; the pinned button only
+     ate column pixels there (owner call 2026-08-20). */
+  @media (--bp-phone) {
+    a.scroll-top { display: none; }
+  }
+}

package/src/base/shell.css

@@ -0,0 +1,31 @@
+/* Layer: base. The page shell (handoff section 5.3): sticky-footer frame,
+   the 1380px wrapper, the two-column row, the content column, and the
+   sidebar width with its collapse. The grid is defined here and nowhere
+   else. See docs/css-architecture.md. */
+@layer base {
+  /* Sticky footer: the page shell fills the viewport and the content region
+     absorbs the slack, so short pages (404, search, thin archives) keep the
+     footer at the bottom edge. dvh tracks mobile browser chrome; the vh
+     line is the fallback for engines without it. */
+  .site {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    min-height: 100dvh;
+  }
+  .primary-site-content { flex: 1 0 auto; }
+  .shell { max-width: var(--shell-max); margin-inline: auto; padding-inline: var(--shell-pad); }
+  .two-column { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--column-gap); }
+  /* The content column beside the sidebar: takes the remaining width and
+     may shrink below its content's intrinsic width (long code lines). */
+  .site-main { flex: 1; min-width: 0; }
+
+  /* Content sits below the header: live theme used 50px; bumped by owner preference. */
+  .site-content { margin-top: var(--header-clear); }
+
+  /* Sidebar: not sticky (owner ruling 2026-07-26), it sits in normal flow
+     and scrolls away with the page like the main column does. Width is
+     30% less half the column gap; below 991px it stacks full width. */
+  .sidebar { width: calc(30% - var(--column-gap) / 2); flex-shrink: 0; }
+  @media (--bp-sidebar) { .sidebar { width: 100%; position: static; } }
+}

package/src/code.css

@@ -0,0 +1,51 @@
+/* Layer: components (code island stylesheet).
+   See docs/css-architecture.md. */
+@layer components {
+/* Terminal island (spec section 5): the one deliberate dark surface on the
+   light page, in the parent theme's own palette. */
+.prose pre.astro-code {
+  border: var(--stroke) solid var(--rule);
+  padding: 12px 14px;
+  margin: 20px 0;
+  overflow-x: auto;
+  font-size: var(--font-size-sm);
+  line-height: 1.7;
+}
+/* Inline code in running text (spec 2026-07-28, toned down same day by
+   owner request: the dark chip read too loud in prose). Muted gray ground
+   with a hairline border; the body font is already mono, so the box alone
+   marks backticked names. Excludes code inside pre, which the island owns. */
+.prose :not(pre) > code {
+  background: var(--band);
+  border: 1px solid var(--hairline);
+  padding: 1px 5px;
+  font-size: 0.9em;
+}
+.code-island-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: var(--stroke) solid var(--rule);
+  border-bottom: 1px solid var(--code-line);
+  background: var(--code-bg);
+  color: var(--accent-1);
+  font-size: var(--font-size-xs);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 6px 10px;
+  margin: 20px 0 0;
+}
+.code-island-bar + pre.astro-code { margin-top: 0; border-top: 0; }
+.code-copy {
+  border: 1px solid currentColor;
+  background: none;
+  color: inherit;
+  font-family: var(--font-body);
+  font-size: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  padding: 2px 8px;
+  cursor: pointer;
+}
+.code-copy:hover { outline: 1px solid currentColor; }
+}

package/src/global.css

@@ -0,0 +1,10 @@
+/* Layer: base. Entry point Base.astro imports; the rules live under
+   base/ in the order they had in this file (same-layer ties resolve by
+   source order). reset: element defaults and a11y utilities. shell: the
+   page grid. link-tip and scroll-top: site chrome with JS halves,
+   kept in base so the patterns layer outranks them.
+   See docs/css-architecture.md. */
+@import "./base/reset.css";
+@import "./base/shell.css";
+@import "./base/link-tip.css";
+@import "./base/scroll-top.css";

package/src/layers.css

@@ -0,0 +1,10 @@
+/* Cascade order for the whole site, declared once and imported first.
+   Later layers win; Astro's scoped component styles are unlayered and
+   therefore always win over every layer (the intended override point).
+   The plate-modal family is three sublayers of components so the shared
+   plate chrome loses to the lightbox and the player by layer order, not
+   by stylesheet import order. site is the blog's own layer (step 11.1):
+   rules that never enter the package (Henry, WP-artifact prose
+   overrides) and must outrank whatever the package layers say. See
+   docs/css-architecture.md. */
+@layer tokens, base, patterns, components, components.plate, components.lightbox, components.player, site;

package/src/lightbox.css

@@ -0,0 +1,170 @@
+/* Layer: components. Image lightbox chrome (spec
+   docs/superpowers/specs/2026-07-30-image-lightbox-design.md). The plate
+   reuses .bracket-frame, badges reuse .boxed-label, buttons reuse
+   .icon-box; only offsets and modal-specific layout live here. */
+@layer components.lightbox {
+  /* Build-time anchors around content images. Positioned so a corner
+     badge (CornerBadges.astro) pins to the image's corner. */
+  .lightbox-link { display: block; position: relative; line-height: 0; cursor: zoom-in; }
+
+  .lb-main { display: flex; align-items: center; gap: 16px; }
+
+  /* Arrows: ink on filled white squares (mockup v3 decision). .icon-box
+     supplies the 30x30 bordered square and the button reset. */
+  .lb-arrow { font-size: var(--font-size-md); }
+
+  /* Desktop: bar and foot are pass-throughs; their children straddle the
+     plate rules as boxed labels (counter top-left, close top-right, dims
+     bottom-left, readout bottom-right). */
+  .lb-bar,
+  .lb-foot { display: contents; }
+
+  /* Normalized viewbox: constant viewport-derived size; fine-grid mat
+     centered behind the image (also the ground under transparent
+     PNG/SVG). touch-action off: the script owns pan/pinch. */
+  .lb-viewbox {
+    position: relative;
+    overflow: hidden;
+    border: var(--stroke) solid var(--rule);
+    width: min(70vw, 990px);
+    height: min(66vh, 740px);
+    background-image:
+      linear-gradient(to right, var(--mat-line) 1px, transparent 1px),
+      linear-gradient(to bottom, var(--mat-line) 1px, transparent 1px);
+    background-size: 12px 12px;
+    background-position: center center;
+    touch-action: none;
+  }
+  .lb-img {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    max-width: none;
+    border: 0;
+    cursor: grab;
+  }
+
+  /* Generous air after the caption before the bottom rule (owner request
+     in the mockup session). */
+  .lb-caption {
+    font-size: var(--font-size-xs);
+    text-align: center;
+    color: var(--ink);
+    margin: 12px 0 14px;
+
+    /* A long caption must not size the dialog: zero intrinsic width,
+       then stretch to the width the viewbox establishes, wrapping
+       there. Found 2026-08-20 when a meme grew a two-sentence
+       caption and the whole window opened caption-wide. */
+    width: 0;
+    min-width: 100%;
+  }
+
+  /* HOME: appears inside the viewbox when the view is dragged far out
+     of whack; snaps back to the fit view. */
+  .lb-home {
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    /* .boxed-label gives border, ink, and surface; .micro-label the type;
+       a <button> still needs the family reset. */
+    font: inherit;
+    padding: 2px 10px;
+    cursor: pointer;
+    z-index: 1;
+  }
+
+  /* The strip scrolls instead of wrapping: swiping it is the scroll
+     gesture, tapping selects, and goTo keeps the active thumb in view.
+     "safe center" keeps short strips centered without clipping the
+     start of long ones. */
+  .lb-thumbs {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    max-width: 100%;
+    gap: 8px;
+    justify-content: safe center;
+    /* A scrolling strip clips on every side, so the active and focus
+       rings (2px, offset 2px) need 4px of room all round; the top margin
+       gives up the same 4px so the thumbs do not move (owner report
+       2026-08-26: the ring read as a U). */
+    margin-top: 12px;
+    padding: 4px;
+  }
+  .lb-thumb {
+    flex: 0 0 auto;
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    border: var(--stroke) solid var(--on-ink);
+    background: none;
+    cursor: pointer;
+    opacity: 0.65;
+  }
+  .lb-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    border: 0;
+  }
+  .lb-thumb.active {
+    opacity: 1;
+    outline: 2px solid var(--accent-1);
+    outline-offset: 2px;
+  }
+
+  /* Solo opens set [hidden] on the arrows, counter, and thumb strip, but
+     .icon-box and .lb-thumbs both set their own display: flex, which beats
+     the UA [hidden] rule at equal specificity. Two simple selectors outrank
+     one, so this wins without !important and stays scoped to the dialog. */
+  .lb-dialog [hidden] { display: none; }
+
+  /* Mobile (the gallery two-column breakpoint): no arrows, the counter
+     takes a header row inside the plate, dims and readout collapse to one
+     hairline-ruled instrument bar (mockup mobile-x decision B). The
+     close box stays on the top-right corner of the plate, straddling the
+     rule at the player's phone offsets (plate-modal.css); decision B had
+     parked it in the header row and the owner asked for the corner back
+     after launch (2026-08-27). */
+  @media (--bp-phone) {
+    .lb-arrow { display: none; }
+    /* The box caps against the plate: 86vw plus the plate and zone
+       padding (72px) only fits above 514px, and below that the plate
+       clamped and the box overflowed its right padding, reading as a mat
+       shifted right by about a scrollbar (owner report 2026-08-30). The
+       zone and plate fill the width explicitly because nothing in the
+       lightbox has an intrinsic width for the 100% to resolve against
+       (the caption is width: 0 on purpose): without these two, min()
+       collapsed the box to 186px. The player gets the same width from
+       its track canvas by accident. Above 514px the box is narrower
+       than the plate it now fills, so it centers itself. */
+    .lb-zone,
+    .lb-plate { width: 100%; }
+    .lb-viewbox { width: min(86vw, 100%); height: 52vh; margin-inline: auto; }
+    .lb-bar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+    }
+    /* In flow on phones, no longer sharing the bottom rule: the label
+       cap (plate-modal.css) does not apply. */
+    .lb-dialog .lb-counter { position: static; border: 0; padding: 0; max-width: none; }
+    .lb-foot {
+      display: flex;
+      justify-content: space-between;
+      gap: 14px;
+      border-top: 1px solid var(--hairline);
+      padding-top: 6px;
+      font-size: var(--font-size-xs);
+      letter-spacing: 0.1em;
+    }
+    /* In flow on phones, no longer sharing the bottom rule: the label
+       cap (plate-modal.css) does not apply. */
+    .lb-dialog .lb-dims,
+    .lb-dialog .lb-readout { position: static; border: 0; padding: 0; font-weight: 400; max-width: none; }
+  }
+}

package/src/path-player.css

@@ -0,0 +1,138 @@
+/* Layer: components. Path-player content inside a plate-modal (spec
+   2026-08-22). Values echo the lightbox family; colors from tokens
+   only. Imported by FluidPathPlayer.astro so it ships only on pages
+   that embed a player. */
+@layer components.player {
+  /* Desktop: the plate is a wide instrument panel, not a sleeve around
+     the window (owner call 2026-08-26). The square window centers in it
+     and the track strip, caption, and labels take the full width, which
+     also keeps the centered transport clear of the source label at
+     short viewports, where the window shrinks. Phones keep the triage's
+     flow layout below 768px. */
+  @media (--bp-phone-up) {
+    .pp-plate { width: min(88vw, 1100px); }
+  }
+  /* Square (owner call 2026-08-25). The 55vh term keeps the square plus
+     the plate's ~260px of chrome inside any window 580px or taller. */
+  .pp-viewbox {
+    position: relative;
+    width: min(72vw, 55vh, 640px);
+    margin-inline: auto;
+    aspect-ratio: 1;
+    border: var(--stroke) solid var(--rule);
+    background-image:
+      linear-gradient(to right, var(--mat-line) 1px, transparent 1px),
+      linear-gradient(to bottom, var(--mat-line) 1px, transparent 1px);
+    background-size: 12px 12px;
+    background-position: center center;
+  }
+  .pp-viewbox canvas {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+  /* Type from .micro-label; only the centering is here. */
+  .pp-fallback {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Transport straddles the plate's bottom edge, centered, in the
+     manner of the boxed labels and the close box (owner call
+     2026-08-23). */
+  .pp-transport {
+    position: absolute;
+    bottom: -17px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 10px;
+    z-index: 1;
+  }
+  /* Transport buttons are .icon-box; only the glyph size is here. */
+  .pp-play,
+  .pp-restart { font-size: var(--font-size-md); }
+  /* The rotate glyph's circle fills its viewBox denser than the play
+     and pause marks; pulled in a step so the pair reads even. */
+  .pp-restart svg { width: 0.85em; height: 0.85em; }
+  /* Press feedback comes from .press-box; a disabled button never
+     reaches :active. */
+  .pp-play:disabled, .pp-restart:disabled { opacity: 0.4; cursor: default; }
+  /* Air between the square window and the track strip, so the two read
+     as separate instruments instead of one tall panel (owner call
+     2026-08-26; at 14px the window read taller than square). */
+  .pp-timeline { position: relative; margin-top: 24px; }
+  .pp-tracks { width: 100%; display: block; }
+
+  /* Same zero-intrinsic-width trick as the lightbox caption: a long
+     line wraps at the viewbox width instead of sizing the plate. */
+  .pp-caption {
+    font-size: var(--font-size-xs);
+    line-height: 1.6;
+    text-align: center;
+    color: var(--ink);
+    margin: 14px 0 0;
+    width: 0;
+    min-width: 100%;
+  }
+  /* The caption toggle exists for phones only; see the media block. */
+  .pp-caption-toggle { display: none; }
+
+  @media (--bp-phone) {
+    /* Still square; 45vh keeps it plus ~350px of chrome inside a 664px
+       viewport (299px there, the 86vw cap of 335px on taller phones).
+       min() against 100% caps against the plate so viewbox + chrome
+       can never outgrow the visible width (86vw alone overflowed at
+       390px). */
+    .pp-viewbox { width: min(86vw, 100%, 45vh); }
+    /* Narrow plates: the straddling transport and readout would collide
+       with the bottom-left source label, so both join the plate flow:
+       controls centered under the caption, the time under the controls
+       (owner call 2026-08-23). The plate goes flex-column so the two
+       static pieces can order after the caption; the absolutely
+       positioned labels (title, source, close) ignore flex and keep
+       straddling. */
+    .pp-plate { display: flex; flex-direction: column; }
+    .pp-transport {
+      position: static;
+      transform: none;
+      justify-content: center;
+      margin-top: 12px;
+      order: 1;
+    }
+    /* In flow on phones, no longer sharing the bottom rule: the label
+       cap (plate-modal.css) does not apply. */
+    .pp-plate .pp-readout {
+      position: static;
+      order: 2;
+      margin: 8px auto 0;
+      max-width: none;
+    }
+    /* With the readout in flow, the bottom rule has one label, and it
+       reads better centered (owner call 2026-08-25). Two classes so it
+       beats .pm-label-bl regardless of stylesheet order. */
+    .pp-plate .pp-source {
+      left: 50%;
+      translate: -50% 0;
+      max-width: calc(100% - 50px);
+    }
+    /* Caption toggle: box, type, and press feedback come from
+       .boxed-label, .micro-label, and .press-box; placement and the
+       open state (held inverted, like a pressed transport button) are
+       here. */
+    .pp-caption-toggle {
+      display: block;
+      margin: 14px auto 0;
+      padding: 2px 10px;
+    }
+    .pp-caption-toggle[aria-expanded="true"] {
+      background-color: var(--ink);
+      color: var(--on-ink);
+    }
+  }
+}

package/src/patterns.css

@@ -0,0 +1,270 @@
+/* Layer: patterns. The theme's visual grammar, each pattern defined exactly
+   once. Components apply the class and add only contextual offsets/margins
+   in their scoped styles. See docs/css-architecture.md for the full grammar
+   description; these classes mirror the live site's look and are pinned by
+   the fidelity tests. */
+@layer patterns {
+  /* Bracket frame: 2px top/bottom rules, 2px edge verticals fading through
+     the middle. The site's signature enclosure (header, latest-posts wrap,
+     articles, pages, 404, search results). */
+  .bracket-frame {
+    position: relative;
+    border: var(--stroke) solid var(--rule);
+    border-width: var(--stroke) 0;
+    padding: var(--frame-pad);
+  }
+  .bracket-frame::before,
+  .bracket-frame::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    width: var(--stroke);
+    height: 100%;
+    background: linear-gradient(
+      to bottom,
+      var(--rule) 0%,
+      rgba(0, 0, 0, 0) 35%,
+      rgba(0, 0, 0, 0) 65%,
+      var(--rule) 100%
+    );
+  }
+  .bracket-frame::before { left: 0; }
+  .bracket-frame::after { right: 0; }
+
+  /* Boxed label: bordered box on the page background, typically straddling
+     a frame rule (date box, Latest Posts title). Padding and straddle
+     offsets are contextual and stay in the component. */
+  .boxed-label {
+    margin: 0;
+    color: var(--ink);
+    border: var(--stroke) solid var(--rule);
+    background-color: var(--surface);
+  }
+
+  /* Icon box: 30x30 bordered interactive square (social icons, magnifier). */
+  .icon-box {
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--ink);
+    border: var(--stroke) solid var(--rule);
+    background-color: var(--surface);
+    text-decoration: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    transition: var(--transition);
+  }
+  /* Hover ring in the box's own ink; keyboard focus is the site-wide
+     amber ring (base/reset.css), which is why this is :hover alone (a
+     mouse click must never leave a ring behind, review 2026-08-23, R3). */
+  .icon-box:hover { outline: 2px solid currentColor; }
+
+  /* Pressable box: a bordered light box that inverts to ink while held,
+     the house press language (2026-07-30). Nav links, pagination cells,
+     the fluid CTA, and the player transport share it; hover and focus
+     treatments differ per site and stay local. */
+  .press-box {
+    color: var(--ink);
+    background-color: var(--surface);
+    border: var(--stroke) solid var(--rule);
+    text-decoration: none;
+    font: inherit;
+    cursor: pointer;
+  }
+  .press-box:active { color: var(--on-ink); background-color: var(--ink); }
+
+  /* Accent press box (owner rule 2026-08-26): the callout's combination
+     worn by a button. Accent line, the accent's legible ink for the
+     text, and the same faint tint of the accent as its ground (the
+     callout tints at 6%), in both themes; held, it fills solid in the
+     accent with the on-accent text, the press-box inversion. Knobs pick
+     the accent; the default is the second accent, which the demo
+     launcher wears. */
+  .press-box-accent {
+    --press-accent: var(--accent-2);
+    --press-accent-ink: var(--accent-2-ink);
+    --press-on-accent: var(--on-accent-2);
+
+    color: var(--press-accent-ink);
+    background-color: color-mix(in srgb, var(--press-accent) 6%, var(--surface));
+    border-color: var(--press-accent);
+  }
+  .press-box-accent:hover {
+    background-color: color-mix(in srgb, var(--press-accent) 14%, var(--surface));
+  }
+  .press-box-accent:active {
+    color: var(--press-on-accent);
+    background-color: var(--press-accent);
+  }
+  /* Which accent: the brand amber (--accent-1) or the second, cyan
+     (--accent-2, also the default above). The Button component renders
+     these as its variants. */
+  .press-box-accent-1 {
+    --press-accent: var(--accent-1);
+    --press-accent-ink: var(--accent-1-ink);
+    --press-on-accent: var(--on-accent-1);
+  }
+  .press-box-accent-2 {
+    --press-accent: var(--accent-2);
+    --press-accent-ink: var(--accent-2-ink);
+    --press-on-accent: var(--on-accent-2);
+  }
+  /* Shaded press box (owner request 2026-08-26): the plain box on a
+     ground tinted with ink at the nav's current-item strength (the
+     tint overlay at 0.2), for a second, non-accent button beside a
+     plain one. Held, it inverts like any press box. */
+  .press-box-shaded {
+    background-color: color-mix(in srgb, var(--ink) 20%, var(--surface));
+  }
+
+  /* Button row: a run of buttons side by side with air between them,
+     wrapping onto a second line when the column runs out (the style
+     guide's variant rows). The gap is the row's only spacing; the
+     buttons carry none of their own. */
+  .button-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 10px;
+  }
+
+  /* Tint overlay: fills the element with ink at low opacity without
+     introducing a second color (current nav item 0.2, footer bar 0.1).
+     Knobs: --tint-opacity, and --tint-color for a caller whose line is
+     not ink (the callout's typed line color). */
+  .tint-overlay { position: relative; }
+  .tint-overlay::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-color: var(--tint-color, var(--ink));
+    opacity: var(--tint-opacity, 0.1);
+  }
+
+  /* Back link: the deterministic return-to-parent nav under posts (to the
+     archive page holding the post) and pages (to parent, or home). One
+     definition; both layouts render <nav class="back-link">. */
+  .back-link { margin-top: 20px; font-size: var(--font-size-sm); }
+  .back-link a { color: var(--ink); }
+
+  /* Chip: filled primary label with white text (reading-time chip,
+     category-card label). */
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 5px 7px;
+    color: var(--on-ink);
+    background-color: var(--ink);
+    font-size: var(--font-size-xs);
+    font-weight: bold;
+    line-height: 1;
+  }
+
+  /* Draft stamp: the amber DRAFT overlay on a post's hero and its
+     archive card. Reaches a page only in SHOW_DRAFTS=1 preview builds
+     (deploy builds exclude drafts entirely). Size and stacking are
+     contextual. */
+  .draft-stamp {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    pointer-events: none;
+    color: var(--accent-1);
+    font-weight: 700;
+    letter-spacing: 0.2em;
+    text-shadow: 0 2px 10px rgb(0 0 0 / 65%);
+  }
+
+  /* Rule box: the plain bordered prose container at frame padding
+     (Group, and Callout's box under its tint and label). Margins are
+     contextual and stay in the component. */
+  .rule-box {
+    border: var(--stroke) solid var(--rule);
+    padding: var(--frame-pad);
+  }
+
+  /* Caption: the quiet small line under an image, beside media text, or
+     after a quote. Alignment and spacing are contextual. */
+  .caption { font-size: var(--font-size-xs); opacity: 0.75; }
+
+  /* Micro label: the small bold tracked line on plate labels, the
+     lightbox HOME box, the player fallback, and the stasis tag. Case is
+     the caller's. */
+  .micro-label { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.08em; }
+
+  /* Joined field: a text entry and its action button fused in one
+     2px-bordered box (subscribe form, search page form). House rule
+     settled 2026-07-30 after trying inset and side-by-side variants.
+     Anatomy: borderless transparent input, then the submit button,
+     which IS the house button: every .field-join-button also carries
+     .press-box and .press-box-shaded (owner call 2026-08-26: the style
+     guide's shaded Button, ink text on the nav's current-item gray,
+     filling with the ink while held), and this class adds only the
+     fused geometry (no radius, the
+     box's own border replaced by a 2px rule where it meets the input,
+     the button's type and padding). Square focus rings, inset (the UA
+     auto ring is rounded and garbles the box, and an outside ring would
+     cut across the fused box).
+     Color knobs, each defaulting to the theme's own ink and surface:
+     --field-ink (box border and the rule), --field-text (input text),
+     --field-well (the ground behind the input), --field-ring (the
+     input's highlight when clicked into; a keyboard focus always shows
+     the site ring instead, told apart by the root's data-focus stamp,
+     which comes from the packaged focus-mode island's mountFocusMode
+     (step 11.2)). The subscribe panel sets them from its
+     --panel-* roles; the button takes no knob, so it reads the same on
+     the panel as anywhere else. */
+  .field-join {
+    display: flex;
+    flex-wrap: wrap;
+    border: var(--stroke) solid var(--field-ink, var(--rule));
+    /* The well behind the input: the theme's --well (white by day, one
+       step up from the black by night so the field reads as recessed
+       and the button separates from it, owner report 2026-08-26);
+       --field-well overrides it for a panel with its own ground. */
+    background: var(--field-well, var(--well));
+  }
+  .field-join-input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    border-radius: 0;
+    padding: 10px 12px;
+    background: transparent;
+    color: var(--field-text, var(--field-ink, var(--ink)));
+    font-family: var(--font-body);
+    font-size: var(--font-size-sm);
+  }
+  /* Inset, not the site-wide outside ring: an outside ring around the
+     input alone would cut across the fused box. */
+  .field-join-input:focus-visible {
+    outline: 2px solid var(--field-ring, var(--focus-ring));
+    outline-offset: -2px;
+  }
+  :root[data-focus="keyboard"] .field-join-input:focus-visible {
+    outline-color: var(--focus-ring);
+  }
+  .field-join-button {
+    border-width: 0 0 0 var(--stroke);
+    border-color: var(--field-ink, var(--rule));
+    border-radius: 0;
+    padding: 10px 18px;
+    font-family: var(--font-body);
+    font-size: var(--font-size-sm);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    cursor: pointer;
+    position: relative;
+    z-index: 1;
+  }
+  .field-join-button:focus-visible {
+    outline: 2px solid var(--focus-ring);
+    outline-offset: -4px;
+  }
+}

package/src/plate-modal.css

@@ -0,0 +1,109 @@
+/* Layer: components.plate. Shared plate-window chrome (spec
+   docs/superpowers/specs/2026-08-22-fluid-path-player-design.md).
+   Consumers add their own content rules in components.lightbox and
+   components.player, which sit above this sublayer (layers.css), so the
+   import order of the three files does not matter. The lightbox's
+   elements carry both pm-* and lb-* names. */
+@layer components.plate {
+  /* Percentages, not vw/vh: a top-layer dialog's containing block is
+     the initial containing block, which excludes the page scrollbar;
+     100vw includes it and leaked a horizontal scrollbar on narrow
+     viewports (found 2026-08-23). overflow: auto is the UA default made
+     explicit; overscroll-behavior keeps a touch scroll that reaches the
+     dialog's end from chaining to the page (phone report 2026-08-25). */
+  .pm-dialog {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+  /* No align-items: center here. A zone taller than the phone would be
+     centered with its top above y=0, and a scroll container cannot
+     scroll into negative space, so the close box was unreachable
+     (measured 2026-08-25: zone 766px in a 664px viewport, close at
+     y=-50). The zone's auto margins center it when there is room and
+     collapse to zero when there is not, and then the dialog scrolls. */
+  .pm-dialog[open] {
+    display: flex;
+    justify-content: center;
+  }
+  .pm-dialog::backdrop {
+    background: var(--veil);
+    backdrop-filter: blur(7px);
+  }
+  /* The page must not scroll under an open modal; plate-modal.ts sets
+     the class on <html> at open and clears it on close. */
+  html.pm-open,
+  html.pm-open body { overflow: hidden; }
+  /* Classic-scrollbar desktops: keep the gutter so the page does not
+     shift 17px when the scrollbar goes. */
+  html.pm-open { scrollbar-gutter: stable; }
+
+  .pm-zone {
+    position: relative;
+    margin: auto;
+    padding: 26px 30px;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+  .pm-corner {
+    position: absolute;
+    width: 22px;
+    height: 22px;
+    border: 0 solid var(--accent-1);
+  }
+  .pm-c-tl { top: 0; left: 0; border-top-width: var(--stroke); border-left-width: var(--stroke); }
+  .pm-c-tr { top: 0; right: 0; border-top-width: var(--stroke); border-right-width: var(--stroke); }
+  .pm-c-bl { bottom: 0; left: 0; border-bottom-width: var(--stroke); border-left-width: var(--stroke); }
+  .pm-c-br { bottom: 0; right: 0; border-bottom-width: var(--stroke); border-right-width: var(--stroke); }
+
+  .pm-plate {
+    background: var(--surface);
+    box-shadow: var(--shadow);
+    line-height: 1.5;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+
+  /* Labels are .boxed-label (border, ink, surface) plus .micro-label
+     (type); placement is here. Every label is one line and truncates
+     with an ellipsis rather than wrapping or crowding the close box
+     (owner call 2026-08-25, a standard for all plate modals). max-width
+     is content-box, so the 8px padding and 2px border sit outside it. */
+  .pm-label {
+    position: absolute;
+    padding: 2px 8px;
+    z-index: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  /* Top-left leaves the close box's corner free; the bottom pair share
+     the bottom rule, so each gets half less its inset and a gap. */
+  .pm-label-tl { top: -12px; left: 25px; max-width: calc(100% - 25px - 70px); }
+  .pm-label-bl,
+  .pm-label-br { max-width: calc(50% - 25px - 8px); }
+  .pm-label-bl { bottom: -12px; left: 25px; }
+  .pm-label-br { bottom: -12px; right: 25px; }
+
+  /* The close box is an .icon-box; only its straddle offset is here. */
+  .pm-close {
+    position: absolute;
+    top: -17px;
+    right: -17px;
+    z-index: 1;
+  }
+  /* Phone: the corner framing device crowds the edges (owner call
+     2026-08-20, mirrored from the lightbox). */
+  @media (--bp-phone) {
+    .pm-zone { padding: 16px 9px; }
+    .pm-corner { display: none; }
+    .pm-close { right: 16px; }
+  }
+}

package/src/prose.css

@@ -0,0 +1,89 @@
+/* Layer: components (content-domain stylesheet for .prose).
+   See docs/css-architecture.md. */
+@layer components {
+/* Prose rhythm for .prose. Lists verified to 3+ depths (7 live posts
+   nest, 3 go 3+ deep). Table treatment: boxed ledger (spec section 5). */
+.prose { margin-top: 0; }
+/* p margin fidelity-corrected to the live 1.5em (handoff 5.5); heading
+   sizes/margins are kept on our fluid type scale rather than reverted to
+   bare browser defaults, recorded as a deliberate deviation in the handoff. */
+.prose p { margin: 0 0 1.5em; }
+.prose h2 { font-size: var(--font-size-md); margin: 1.6em 0 0.6em; }
+.prose h3 { font-size: var(--font-size-base); margin: 1.4em 0 0.5em; }
+.prose h4 { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.5px; margin: 1.4em 0 0.5em; }
+
+/* List indentation: outside-positioned markers with enough padding that
+   the marker sits right of the content edge and wrapped lines align under
+   the text. Owner-approved divergence from live (2026-07-28, kept
+   2026-09-02 after the inline-block links it originally worked around
+   were retired): outside-positioned markers with wrapped lines aligned
+   under the text. Disc (not square) at the top level, 15px
+   rhythm. Nested alpha/roman numbering is a kept editorial enhancement
+   (live has no nested-list override at all). */
+.prose ul, .prose ol { margin: 0 0 15px 15px; padding-left: 1.2em; list-style-position: outside; }
+/* Longhand on purpose: the list-style shorthand would also reset
+   list-style-position (owner bug report 2026-07-28; carryovers test pins
+   this). */
+.prose ul { list-style-type: disc; }
+.prose ul ul { list-style-type: circle; }
+.prose ul ul ul { list-style-type: square; }
+.prose ol { list-style-type: decimal; }
+.prose ol ol { list-style-type: lower-alpha; }
+.prose ol ol ol { list-style-type: lower-roman; }
+.prose li { padding: 5px 0; }
+.prose li > ul, .prose li > ol { margin: 4px 0 0 15px; }
+
+/* Blockquote: boxed on the muted gray pattern (owner request 2026-08-14,
+   spec docs/superpowers/specs/2026-08-14-boxed-blockquotes-design.md), a
+   deliberate deviation from live, which ships only the indent (handoff 5.5).
+   Full column width; the box, not indentation, is the signal. Nested quotes
+   get no special treatment: this rule cascades, so an inner quote sits on
+   the same gray ground with only its own hairline marking it. */
+.prose blockquote {
+  background: var(--band);
+  border: 1px solid var(--hairline);
+  padding: 12px 16px;
+  margin: 20px 0;
+}
+/* Paragraphs carry 1.5em bottom margin; without this the box ends in a
+   dead gray band. */
+.prose blockquote > :last-child { margin-bottom: 0; }
+/* The small attribution line (Quote component) sits close under the quote
+   text: whatever element precedes it sheds most of its 1.5em margin. */
+.prose blockquote > :has(+ .quote-attribution) { margin-bottom: 0.5em; }
+
+.prose hr {
+  border: 0;
+  border-top: var(--stroke) solid var(--rule);
+  margin: 30px 0;
+}
+
+/* Boxed ledger table */
+.prose .table-scroll { overflow-x: auto; margin: 20px 0; }
+.prose table {
+  border-collapse: collapse;
+  width: 100%;
+  border: var(--stroke) solid var(--rule);
+  font-size: var(--font-size-sm);
+}
+.prose thead tr {
+  background: var(--band);
+  border-bottom: 3px solid var(--rule);
+}
+.prose th {
+  text-align: left;
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  padding: 7px 12px;
+}
+.prose td { padding: 7px 12px; }
+.prose tbody tr:not(:last-child) { border-bottom: 1px solid var(--hairline); }
+/* Legacy tolerance: a header faked as a bold first body row still reads fine
+   because rows carry only faint hairlines. */
+/* Every content image carries the signature 2px outline BY DEFAULT
+   (owner ruling 2026-07-26): the standard is baked into rendering, not
+   opted into per component. Framed plates keep the line on the frame
+   and zero it on the inner img (see GalleryImage). */
+.prose img { max-width: 100%; height: auto; border: var(--stroke) solid var(--rule); }
+}

package/src/tokens/breakpoints.css

@@ -0,0 +1,12 @@
+/* The system breakpoints, defined once (step 11.1; the step 1 plan's
+   deferred slice). Three names, per the extraction review: phone is
+   where the top header band retires and footer groups collapse;
+   sidebar is where the two-column row stacks; tablet is the wide-image
+   step. Component-intrinsic queries (a gallery's own 480, a step's own
+   800) stay literal in their components on purpose.
+   The JS mirror is src/scripts/core/breakpoints.ts; a test pins the
+   two files equal. */
+@custom-media --bp-phone (max-width: 768px);
+@custom-media --bp-phone-up (min-width: 769px);
+@custom-media --bp-sidebar (max-width: 991px);
+@custom-media --bp-tablet (max-width: 1024px);

package/src/tokens/primitives.css

@@ -0,0 +1,102 @@
+/* Layer: tokens. Primitives: the raw palette and structural scales. No
+   component reads these directly; the roles in theme-light.css and
+   theme-dark.css do. Hex is permitted under tokens/ only
+   (stylelint-enforced). See docs/css-architecture.md. */
+@layer tokens {
+  :root {
+    /* Neutrals (live-resolved Legacy Blog palette, handoff section 5.1) */
+    --white: #ffffff;
+    --gray-075: #ececec;
+    --gray-100: #efefef;
+    --gray-200: #d9d9d9;
+    --gray-300: #cccccc;
+    --gray-600: #555555;
+    --gray-700: #404040;
+    --black-a10: rgba(0, 0, 0, 0.1);
+    --graphite-a55: rgba(48, 48, 48, 0.55);
+
+    /* Warm darks: the parent theme's dark palette, shared with BEADZ
+       (ink-900 is BEADZ --line, ink-800 is BEADZ --monitor-line). */
+    --ink-950: #110d08;
+    --ink-900: #1b140c;
+    --ink-850: #2a2016;
+    --ink-800: #3b2e1e;
+    --ink-700: #5a4630;
+    --parchment: #e8d9c3;
+    --parchment-dim: #b09a7c;
+    --white-a10: rgba(255, 255, 255, 0.1);
+    --black-a60: rgba(0, 0, 0, 0.6);
+
+    /* Neutral darks: the dark theme's ground. black-900 is Henry's amber
+       colorway ground (henry-mascot, the terminal aesthetic), so the
+       page and the mascot share one black. */
+    --black-900: #111111;
+    --black-850: #1a1a1a;
+    --gray-800: #2a2a2a;
+    --gray-750: #3a3a3a;
+    --gray-400: #9a9a9a;
+
+    /* Accents. amber-500 is the shared accent across the ecosystem;
+       amber-700 is its legible kin for text, tuned here for this site
+       the way cyan-700 was: the amber hue at full saturation, taken
+       down until it clears WCAG AA (4.5:1) as body text on the white
+       surface (4.84) and on the accent's 6% tint (4.66). It replaced
+       #b5680c, a value borrowed from BEADZ that sat at 4.24:1 on white
+       (owner call 2026-09-03; BEADZ is not a source of values). */
+    --amber-500: #ffaa3c;
+    --amber-700: #a36300;
+    /* Second accent, the cyan family (owner request 2026-08-26): chosen
+       to sit where the amber sits, cyan-500 matches amber-500's contrast
+       on both grounds (line and fill, not text on white) and cyan-700
+       is its legible kin for text on the light ground. */
+    --cyan-300: #8ee6f2;
+    --cyan-500: #3cc7dd;
+    --cyan-700: #1a7f90;
+    --red-800: #7a1f16;
+    --red-300: #ff8a7a;
+    --ochre-600: #d98a1f;
+    --violet-600: #7a5aa0;
+    --violet-300: #b39ad6;
+
+    /* Strokes, spacing, elevation, motion */
+    --stroke-1: 1px;
+    --stroke-2: 2px;
+    --stroke-3: 3px;
+    --frame-pad: 25px;
+    --column-gap: 30px;
+    /* The shell (step 11.1): --shell-max is the ONLY width authority on
+       the page column (the never-cap-prose rule's positive statement);
+       --shell-pad its gutter; --header-clear the content offset under
+       the header (live theme used 50px; bumped by owner preference). */
+    --shell-max: 1380px;
+    --shell-pad: 15px;
+    --header-clear: 65px;
+    --shadow: 0 3px 12px -1px rgb(7 10 25 / 20%), 0 22px 27px -20px rgb(7 10 25 / 20%);
+    --transition: all 0.1s ease;
+
+    /* z ladder. Skip link above content, scroll-to-top above the
+       header's search flyout would be wrong, so the flyout tops the
+       ladder; loose Henry's rungs sit under the flyout but over
+       everything else, with his teleport hole one step under him, both
+       defined blog-side in henry-loose.css (step 11.1). */
+    --z-raised: 1;
+    --z-skip-link: 10;
+    --z-scroll-top: 17;
+    --z-tooltip: 20;
+    /* 49 and 50 belong to loose Henry, defined blog-side in
+       henry-loose.css (step 11.1). */
+    --z-search-flyout: 99;
+
+    /* Fluid type scale (handoff section 5.2, verbatim) */
+    --font-size-xs: clamp(0.7rem, 0.17vw + 0.76rem, 0.79rem);
+    --font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
+    --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
+    --font-size-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
+    --font-size-lg: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
+    --font-size-xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
+    --font-size-xxl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
+    --font-size-xxxl: clamp(2.95rem, 3.54vw + 2.17rem, 5rem);
+
+    --font-body: "Roboto Mono", ui-monospace, monospace;
+  }
+}

package/src/tokens/theme-dark.css

@@ -0,0 +1,60 @@
+/* Layer: tokens. Dark roles, applied through data-theme="dark" on <html>
+   (the toggle and the head stamp in Base.astro set it; nothing in CSS
+   reads the media query). The ground is Henry's amber-colorway black
+   (owner call 2026-08-26: the warm ink-900 read too brown as a page
+   ground), with neutral bands and hairlines; the ink stays parchment and
+   the accent amber, so the type reads as the terminal aesthetic the
+   mascot already uses. The code island keeps its warm block, the same
+   one it has by day. Every value is a primitive. */
+@layer tokens {
+  :root[data-theme="dark"] {
+    color-scheme: dark;
+    --surface: var(--black-900);
+    --ink: var(--parchment);
+    --rule: var(--parchment);
+    --on-ink: var(--black-900);
+    --ink-muted: var(--gray-400);
+    --band: var(--black-850);
+    --hairline: var(--gray-800);
+    --divider-faint: var(--white-a10);
+    --input-border: var(--gray-750);
+    /* One step up from the page so a field reads as a field, not a hole. */
+    --well: var(--black-850);
+
+    /* The bright amber is legible as text on the dark ground, so the
+       accent and its ink form collapse to one value here. */
+    --accent-1: var(--amber-500);
+    --accent-1-ink: var(--amber-500);
+    --accent-2: var(--cyan-500);
+    --accent-2-ink: var(--cyan-300);
+    --on-accent-1: var(--black-900);
+    --on-accent-2: var(--black-900);
+    --error-ink: var(--red-300);
+
+    /* Code island: the same warm block as in the light theme, so a code
+       sample reads identically in both. */
+    --code-bg: var(--ink-900);
+    --code-fg: var(--parchment);
+    --code-line: var(--ink-800);
+
+    --veil: var(--black-a60);
+    --mat-line: var(--gray-800);
+    /* Keyboard ring: the second accent by night, the first by day
+       (owner call 2026-08-26). */
+    --focus-ring: var(--cyan-500);
+
+    --track-x: var(--amber-500);
+    --track-y: var(--cyan-300);
+    --track-z: var(--violet-300);
+
+    /* The subscribe panel inverts by night: a dark panel with an amber
+       double rule and an amber button, so the call to action is the
+       brightest thing in the block in both themes (owner call
+       2026-08-26). */
+    --panel-bg: var(--black-850);
+    --panel-ink: var(--parchment);
+    --panel-rule: var(--amber-500);
+    --panel-error: var(--red-300);
+    --panel-ring: var(--amber-500);
+  }
+}

package/src/tokens/theme-light.css

@@ -0,0 +1,74 @@
+/* Layer: tokens. The light theme's roles, the only names components
+   read. The theme is monochrome: ink and rule share one value, which is
+   why one "primary color" used to do both jobs; they are separate roles
+   so a second theme (or BEADZ, which separates them) can differ.
+   Components read these names and never a primitive; test/tokens.test.ts
+   fails the build on any retired name. */
+@layer tokens {
+  :root {
+    --surface: var(--white);
+    --ink: var(--gray-700);
+    --rule: var(--gray-700);
+    --on-ink: var(--white);
+    --ink-muted: var(--gray-600);
+    --band: var(--gray-100);
+    --hairline: var(--gray-200);
+    --divider-faint: var(--black-a10);
+    --input-border: var(--gray-300);
+    /* The ground inside a text field (the joined field's well). */
+    --well: var(--white);
+
+    /* Amber survives inside the code island and as a line or fill
+       color; --accent-1-ink is its legible kin for any text on the
+       surface (the tagline's box, Callout tip and warning types). */
+    --accent-1: var(--amber-500);
+    --accent-1-ink: var(--amber-700);
+    /* Second accent (cyan), the amber's complement. Same split: the
+       bright value is a line or fill, the dark one is text. No component
+       reads it yet; its jobs are an owner decision (2026-08-26). */
+    --accent-2: var(--cyan-500);
+    --accent-2-ink: var(--cyan-700);
+    /* Text on an accent fill (a hovered or pressed accent button). */
+    --on-accent-1: var(--ink-900);
+    --on-accent-2: var(--ink-900);
+    --error-ink: var(--red-800);
+
+    /* Code island (parent-theme dark palette, deliberate exception) */
+    --code-bg: var(--ink-900);
+    --code-fg: var(--parchment);
+    --code-line: var(--ink-800);
+
+    /* Plate-modal chrome (spec 2026-07-30): veil over the blurred page,
+       and the viewbox mat one step lighter than --hairline. Values
+       validated in the owner mockup session. */
+    --veil: var(--graphite-a55);
+    --mat-line: var(--gray-075);
+
+    /* Path-player timeline series (spec 2026-08-22, owner question 1). */
+    --track-x: var(--ochre-600);
+    /* The second data track is the second accent (owner call 2026-08-26). */
+    --track-y: var(--cyan-500);
+    --track-z: var(--violet-600);
+
+    /* The subscribe panel, the amber block that bridges every property
+       back to the blog. By day: amber ground, warm-dark ink and rule, a
+       dark button with white text. By night the panel inverts (see
+       theme-dark.css) so the button stays the brightest thing in it. */
+    --panel-bg: var(--amber-500);
+    --panel-ink: var(--ink-900);
+    --panel-rule: var(--ink-900);
+    --panel-error: var(--red-800);
+    /* The email box's click highlight in the panel: ink on the amber by
+       day, amber by night. Not the keyboard ring, which is the site's. */
+    --panel-ring: var(--ink-900);
+
+    /* Keyboard focus: one ring for the whole site (base/reset.css), amber
+       so it reads on both grounds and never means the same as hover. */
+    /* Keyboard ring: the first accent by day, the second by night
+       (owner call 2026-08-26). */
+    --focus-ring: var(--amber-500);
+
+    /* The signature stroke: 2px here, 3px on BEADZ. */
+    --stroke: var(--stroke-2);
+  }
+}

package/src/tokens.css

@@ -0,0 +1,10 @@
+/* Layer: tokens. Entry point Base.astro imports; the values live under
+   tokens/ (primitives, then the light roles, then the opt-in dark roles).
+   Custom properties only, no selectors or element styles. Hex is
+   permitted under tokens/ alone (stylelint-enforced).
+   See docs/css-architecture.md. */
+@import "@fontsource/roboto-mono/400.css";
+@import "@fontsource/roboto-mono/700.css";
+@import "./tokens/primitives.css";
+@import "./tokens/theme-light.css";
+@import "./tokens/theme-dark.css";