trykeyline 0.1.0 → 0.1.2

package/plugins/keyline/skills/keyline/glass/motion/sound.md

@@ -74,73 +74,20 @@ export const playClick = () => tok(900, 0.14, 0.13);
 
 Hover is higher, shorter and **2.6× quieter**: you cross dozens of links moving around a page, and hover at click volume is intolerable within seconds. Click, a completed action, is louder and lower, since lower pitch reads as more consequential. Roughly a fourth apart, they sound pleasant when a click follows a hover.
 
-## The autoplay policy
+## Wiring
 
-An `AudioContext` starts `suspended` and resumes only from a user gesture, so hover sounds stay silent until the reader's first real interaction unlocks it, permanently.
+The rules — arm on every activation gesture, mouse-only and deduplicated hover, a dense-surface opt-out, a persisted mute checked at playback — are `domains/motion/patterns.md`, sound. Glass's values for them:
 
 ```ts
-export function unlockAudio(): void {
-  const c = getCtx();
-  if (c && c.state === "suspended") void c.resume();
-}
+const UNLOCK_EVENTS = ["pointerdown", "keydown", "touchstart"] as const;  // resume() is idempotent
+const SELECTOR = "a, button, [role='button'], summary";                  // one delegated listener set
+if (el && !el.closest("[data-quiet-hover]")) playHover();                 // image wall, filmstrip
 ```
 
-Every playback path checks state rather than assuming:
-
-```ts
-if (!c || c.state !== "running") return;
-```
-
-That's a feature, not a workaround: a page you've merely scrolled past makes no sound. Fail silently; never surface an error for this.
-
-### Arm it on every activation gesture
-
-```ts
-const UNLOCK_EVENTS = ["pointerdown", "keydown", "touchstart"] as const;
-
-/* Idempotent — resume() on a running context is a no-op, which is cheaper
-   than the bookkeeping to detach these after the first one lands. */
-const onUnlock = () => unlockAudio();
-for (const type of UNLOCK_EVENTS) {
-  document.addEventListener(type, onUnlock, { passive: true });
-}
-```
-
-The reference implementation shipped `pointerdown` alone for months. A reader who only moved the mouse across the dock heard nothing — *the hover was the interaction* — which hid because testers click something within seconds; and keyboard-only readers never heard the site. `keydown` is the fix that matters most: the affected group is the one least able to work around it.
-
-## Delegation, not per-element wiring
-
-One set of document listeners covers every link and button on the site.
-
-```ts
-const SELECTOR = "a, button, [role='button'], summary";
-
-const onOver = (e: PointerEvent) => {
-  // Mouse only — touch has no hover, and we don't want a tick on tap.
-  if (e.pointerType && e.pointerType !== "mouse") return;
-  const el = (e.target as Element | null)?.closest?.(SELECTOR) ?? null;
-  if (el === lastHover) return;   // don't re-fire while moving within one element
-  lastHover = el;
-  if (el) playHover();
-};
-
-document.addEventListener("pointerover", onOver);
-document.addEventListener("click", onClick);
-```
-
-- **`pointerType !== "mouse"` bails out**, or every tap plays both sounds 15ms apart, like a stutter.
-- **`lastHover` deduplication.** `pointerover` fires for descendants too, so an icon *inside* a button would re-trigger without the identity check.
-- **`closest(SELECTOR)`** covers anything interactive, including elements added later, with no per-component wiring. `summary` is in it because a `<details>` disclosure is a real control that should feel like one.
-
-### Dense surfaces opt out of the hover tick
-
-```ts
-// Surfaces of a hundred small targets (an image wall, a filmstrip) opt out with
-// data-quiet-hover: a tick per tile is a machine gun. Clicks still tick.
-if (el && !el.closest("[data-quiet-hover]")) playHover();
-```
-
-One attribute on the container quiets the subtree on hover while clicks stay audible. It's a rate limit, not "this surface is unimportant".
+- Every playback path checks `c.state !== "running"` and fails silently, so a page merely scrolled past makes no sound.
+- The site shipped `pointerdown` alone for months; mouse-only readers and keyboard readers heard nothing, and testers, who click within seconds, never noticed.
+- `summary` is in the selector because a `<details>` disclosure is a real control.
+- Mute persists as `localStorage["ui-sound"] = "off" | "on"`, from an `aria-pressed` control in the nav's settings box beside the theme toggle.
 
 ## Sound as a phrase
 
@@ -166,27 +113,10 @@ export const playLanding = () => tok(587, 0.26, 0.16);
 
 It's still a set piece, not a texture — once a session. See §14 of `glass/motion/guide.md`.
 
-## Mute, and persistence
-
-```ts
-let muted = localStorage.getItem("ui-sound") === "off";
-
-export function setMuted(value: boolean): void {
-  muted = value;
-  try { localStorage.setItem("ui-sound", value ? "off" : "on"); } catch {}
-}
-```
-
-The mute control sits in the nav's settings box beside the theme toggle, with an `aria-pressed` state and a label.
-
 ## Should the default be on?
 
 Arguable. On a personal site where sound is part of the character, on is defensible — the only way most people will discover it, and it's quiet, short and muteable. On anything the user didn't choose to visit (a tool, an app, a client site), default to off. If it's on, the mute control must be *findable within seconds*; that's the price.
 
 ## What's deliberately absent
 
-**Haptics.** `navigator.vibrate()` isn't implemented: Safari on iOS lacks it, so it would fire only on Android, and a feedback channel on one platform is worse than none. If you add it, keep it under 10ms and tie it to the same mute preference.
-
-**Sounds for anything but hover, click and the one greeting phrase** — no navigation, reveal or error sounds. The riffle earns its place by playing once per tab.
-
-**Pitch variation** by element type or position. It turns an ambient texture into something the user starts trying to interpret.
+**Haptics**: `navigator.vibrate()` would fire only on Android, and a feedback channel on one platform is worse than none. **Pitch variation** by element type or position, which turns an ambient texture into something the user tries to interpret. And no sound beyond hover, click and the one greeting phrase.

package/plugins/keyline/skills/keyline/glass/type/assets/prose.tsx

@@ -1,33 +1,12 @@
 /**
  * Long-form prose renderer — the reading half of the type system.
  *
- * The reading column is TWO SIZES: 16px for headings, 14px for everything a
- * reader reads. Which means size does no work below the headings, and the
- * blocks sharing 14px have to separate on other axes — each on a different
- * one, or they collide:
+ * Two sizes: 16px headings, 14px for everything read, so the 14px blocks
+ * each separate on a different axis (the table in glass/type/long-form-prose.md).
  *
- *   lead     leading, 1.9 against the body's 1.75
- *   keyline  weight 500, and 36px of air on both sides
- *   body     1.75 — the baseline the others are read against
- *   quote    a 3px rounded bar and a 16px indent
- *   note     13px, the faint tier, and a 1px rule
- *
- * The rule that produced this: A TIER MUST NEVER OUTRANK THE HEADING IT SITS
- * UNDER. An earlier pass ran the keyline at 17px, above the 16px heading it
- * belonged to, and the page read as though the paragraphs were shouting over
- * the titles. Pulling everything to one size removes any chance of that
- * returning.
- *
- * Spacing is deliberately asymmetric around headings: 40px above, 12px below,
- * so a heading belongs to the paragraph that follows it rather than floating
- * between two sections. The keyline is the one symmetric block, because it
- * belongs to neither neighbour.
- *
- * Colour comes from the Glass colour guide (`glass/color/guide.md`): `gray-1000`/`gray-900` for
- * the two upper text tiers, and the `muted`/`quiet`/`faint` tokens below them
- * (which are deliberately NOT ramp steps — 500–800 are border values and fail
- * as text in a light theme). `gray-500` stays on decorative marks, which carry
- * no text. `reveal` comes from glass/motion.
+ * Spacing: 40px above a heading, 12px below; the keyline is the one
+ * symmetric block (glass/type/long-form-prose.md). Text tiers come from
+ * glass/color/guide.md; `reveal` from glass/motion.
  */
 
 import { Fragment, type ReactNode } from "react";
@@ -188,23 +167,9 @@ export function Prose({ blocks }: { blocks: Block[] }) {
 }
 
 /**
- * Inline markdown for **strong**, *em* and [links](/there), mapped onto the
- * system's two axes instead of bold and italic:
- *
- *   **strong** → weight 500 + primary colour   (advances)
- *   *em*       → muted colour, no slant        (recedes)
- *
- * This gives genuinely two-directional emphasis, which a bold-only system
- * can't express. The semantic tags stay — screen readers still announce them.
- *
- * One caution specific to a two-size reading column: <strong> and the keyline
- * are now the same weight at the same size, so a paragraph with a long bolded
- * clause reads as a keyline that failed to get its own line. Keep strong
- * emphasis to a few words; anything longer wants to BE a keyline.
- *
- * Links are here because the strongest sentences often live in data rather
- * than JSX, and a claim that can't carry a link to its own evidence is just an
- * assertion. One link treatment everywhere prose carries one.
+ * Inline markdown for **strong** (500 + primary), *em* (muted, no slant) and
+ * [links](/there) — §5 of glass/type/guide.md. Keep strong to a few words:
+ * at this size it is the keyline's weight.
  */
 const TOKENS = /(\*\*[^*]+\*\*|\*[^*]+\*|\[[^\]]+\]\([^)\s]+\))/g;
 const LINK = /^\[([^\]]+)\]\(([^)\s]+)\)$/;

package/plugins/keyline/skills/keyline/glass/type/assets/type-tokens.css

@@ -1,24 +1,16 @@
 /* ─────────────────────────────────────────────────────────────────────────
    Typographic system — tokens
-   Drop-in for Tailwind v4 (@theme) or any CSS setup (the :root block).
-   Swap "Archivo" for your family; keep the ladder.
-
-   The ladder tops out at 18px on purpose. See glass/type/scale.md — a low
-   ceiling is what forces every template onto one scale, and it's the single
-   most consequential choice in this system.
+   Tailwind v4 @theme tokens; outside Tailwind, put the same custom
+   properties on :root. Swap "Archivo" for your family; keep the ladder,
+   which tops out at 18px on purpose (glass/type/scale.md).
    ───────────────────────────────────────────────────────────────────────── */
 
 @theme {
-  /* Self-hosted, with a metric-matched fallback generated by the loader
-     (next/font, fontaine, or a hand-tuned @font-face with size-adjust). The
-     system faces after it are belt and braces for a request that never lands.
-     A bare `display: swap` without metric matching is a reflow under the
-     reader's eye — see §7 of glass/type/guide.md. */
+  /* Self-hosted with a loader-generated metric-matched fallback (§7 of
+     glass/type/guide.md). */
   --font-sans: var(--font-archivo), system-ui, -apple-system, "Helvetica Neue", sans-serif;
 
-  /* Code, commands and paths. System stack on purpose — a second webfont for
-     a handful of monospace runs isn't worth the request. A second family
-     earns a download only if it's carrying reading copy. */
+  /* Code, commands and paths: a system stack on purpose. */
   --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
 
   /* ── Size ladder ──────────────────────────────────────────────────────
@@ -33,14 +25,10 @@
   --text-micro: 12px;      /* tags · micro-labels */
   --text-tip: 11px;        /* tooltips · initials */
   --text-mark: 8.5px;      /* lettermarks — recognised, not read */
-  --text-card: 7.5px;      /* card lettering — the one place 600 is allowed */
-
-  /* ── Leading: three curves, one per job ───────────────────────────────
-     Display tightens as size grows. Reading opens as passages lengthen.
-     UI collapses to 1 so fixed-height boxes centre exactly.
+  --text-card: 7.5px;      /* card lettering */
 
-     With the size ladder this short, leading is a ROLE SIGNAL, not a
-     refinement: lead / body / dek are the same size and differ only here. */
+  /* ── Leading: three curves, one per job (§3 of the guide). With a ladder
+     this short, leading is a role signal: lead / body / dek differ only here. */
   --leading-page: 1.25;
   --leading-title: 1.3;    /* a detail-page title, which wraps to two lines */
   --leading-heading: 1.2;  /* a section heading, which doesn't */
@@ -52,9 +40,7 @@
   --leading-tight: 1.4;
   --leading-none: 1;
 
-  /* ── Tracking: a large-size correction ────────────────────────────────
-     Two values, 2px apart, because there are only two sizes above 14px.
-     A system tracking six steps has a scale doing too much work. */
+  /* ── Tracking (§4 of the guide) ───────────────────────────────────── */
   --tracking-page: -0.02em;     /* 18px */
   --tracking-heading: -0.015em; /* 16px */
   --tracking-card: -0.01em;     /* 7.5px, set solid */
@@ -63,24 +49,11 @@
   /* ── Weight: two, and only two ─────────────────────────────────────── */
   --font-weight-normal: 400;   /* all body, all prose, all quiet UI */
   --font-weight-medium: 500;   /* headings, <strong>, active state, marks */
-  /* The one exception, and it lives below the readable floor: at 7.5px a 500
-     doesn't survive rasterisation, so the choice is 600 or nothing. One
-     instance of this in a codebase is the right number. */
+  /* The one exception: §2 of the guide. */
   --font-weight-card: 600;
 }
 
-/* Text colour tiers live in the Glass colour guide (`glass/color/guide.md`). The roles below
-   reference them by name:
-     primary   → --color-gray-1000   17.93:1
-     secondary → --color-gray-900     8.45:1
-     muted     → --color-muted        6.48:1
-     quiet     → --color-quiet        5.49:1
-     faint     → --color-faint        4.61:1
-
-   Only the top two are ramp steps. muted/quiet/faint are their OWN tokens,
-   because a border needs 3:1 against its surface and text needs 4.5:1 — one
-   step can't serve both. Reusing mid-ramp greys (500-800) for text fails in
-   a light theme while looking perfectly fine in dark. */
+/* Text tiers (primary → faint) and their contrast: glass/color/guide.md. */
 
 @layer base {
   body {
@@ -89,18 +62,14 @@
     font-size: var(--text-copy);
     line-height: var(--leading-body);
 
-    /* Tabular by default. In a text-heavy interface most numbers sit in a
-       column that should align — dates, timestamps, read times, clocks.
-       A live-updating number is unreadable without this. */
+    /* Tabular by default (§6 of the guide). */
     font-variant-numeric: tabular-nums;
 
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
   }
 
-  /* Emphasis is re-mapped onto weight and colour. A separate italic file
-     fights geometric letterforms, and a 700 bold blots open prose. Keep the
-     semantic tags — only the visual mapping changed. */
+  /* Emphasis maps onto weight and colour (§5 of the guide). */
   em,
   i {
     font-style: normal;
@@ -115,11 +84,7 @@
 /* ─────────────────────────────────────────────────────────────────────────
    Role classes — optional. Use these, or apply the tokens inline through
    Tailwind arbitrary values (text-[14px] leading-[1.65]) as the reference
-   implementation does. Either way the numbers come from one place.
-
-   Note how many of these share --text-copy. That's the system working: once
-   the ladder is short, a role is a (size, leading, weight, rule) tuple and
-   size is usually the part that doesn't vary.
+   implementation does.
    ───────────────────────────────────────────────────────────────────────── */
 
 @layer components {
@@ -260,27 +225,26 @@
 }
 
 /* ─────────────────────────────────────────────────────────────────────────
-   Imported prose — a rendered Markdown document, a CMS field, a README.
-   It arrives as an HTML string, so it can't carry utility classes. Style it
-   by element inside one scoped class, and map it onto the roles above rather
-   than letting it invent a second ladder.
+   Imported prose — rendered Markdown that can't carry utility classes,
+   styled by element in one scoped class on the ladder above (§8 of the
+   guide). `.skill-prose` is the class the reference site uses.
    ───────────────────────────────────────────────────────────────────────── */
 
 @layer components {
-  .prose-imported {
+  .skill-prose {
     font-size: var(--text-copy);
     line-height: var(--leading-read);
     color: var(--color-muted);
   }
   /* The document starts with whatever it starts with; a leading <h2> would
      otherwise push 44px of nothing above itself. */
-  .prose-imported > :first-child {
+  .skill-prose > :first-child {
     margin-top: 0;
   }
 
   /* Three levels, not two — an imported document nests deeper than authored
      prose, so h4 gets a real role instead of a browser default. */
-  .prose-imported h2 {
+  .skill-prose h2 {
     margin: 44px 0 12px;
     font-size: var(--text-section);
     font-weight: var(--font-weight-medium);
@@ -288,14 +252,14 @@
     letter-spacing: var(--tracking-heading);
     color: var(--color-gray-1000);
   }
-  .prose-imported h3 {
+  .skill-prose h3 {
     margin: 32px 0 10px;
     font-size: var(--text-copy);
     font-weight: var(--font-weight-medium);
     line-height: var(--leading-tight);
     color: var(--color-gray-1000);
   }
-  .prose-imported h4 {
+  .skill-prose h4 {
     margin: 24px 0 8px;
     font-size: var(--text-dense);
     font-weight: var(--font-weight-medium);
@@ -303,23 +267,22 @@
     color: var(--color-gray-900);
   }
 
-  .prose-imported p,
-  .prose-imported ul,
-  .prose-imported ol,
-  .prose-imported blockquote {
+  .skill-prose p,
+  .skill-prose ul,
+  .skill-prose ol,
+  .skill-prose blockquote {
     margin: 12px 0;
   }
 
-  /* A UA disc at 14px is far too heavy for this system. Same 3px dot as the
-     hand-rolled bullets everywhere else. */
-  .prose-imported ul {
+  /* The 3px dot of the hand-rolled bullets (glass/type/long-form-prose.md). */
+  .skill-prose ul {
     list-style: none;
     padding-left: 18px;
   }
-  .prose-imported ul > li {
+  .skill-prose ul > li {
     position: relative;
   }
-  .prose-imported ul > li::before {
+  .skill-prose ul > li::before {
     content: "";
     position: absolute;
     left: -14px;
@@ -329,22 +292,22 @@
     border-radius: 999px;
     background: var(--color-gray-500);
   }
-  .prose-imported ol {
+  .skill-prose ol {
     list-style: decimal;
     padding-left: 18px;
   }
   /* Tabular, so a run past 9 doesn't shift its text. */
-  .prose-imported li::marker {
+  .skill-prose li::marker {
     color: var(--color-faint);
     font-variant-numeric: tabular-nums;
   }
 
-  .prose-imported strong {
+  .skill-prose strong {
     font-weight: var(--font-weight-medium);
     color: var(--color-gray-1000);
   }
 
-  .prose-imported code {
+  .skill-prose code {
     font-family: var(--font-mono);
     font-size: 0.87em;
     background: var(--color-gray-100);
@@ -353,10 +316,8 @@
     color: var(--color-gray-1000);
   }
 
-  /* Code blocks and tables are the two things a Markdown document has that a
-     designed page doesn't, and both are unbounded. Each scrolls inside its
-     own box — the page body must never scroll sideways. */
-  .prose-imported pre {
+  /* Code blocks and tables scroll inside their own box, never the page. */
+  .skill-prose pre {
     margin: 16px 0;
     padding: 14px 16px;
     background: var(--color-background-200);
@@ -364,7 +325,7 @@
     border-radius: 12px;
     overflow-x: auto;
   }
-  .prose-imported pre code {
+  .skill-prose pre code {
     background: none;
     padding: 0;
     font-size: var(--text-code);
@@ -373,40 +334,42 @@
   }
 
   /* Wrap each <table> in a div with this class at render time. */
-  .prose-imported .table-scroll {
+  .skill-prose .table-scroll {
     margin: 16px 0;
     overflow-x: auto;
   }
-  .prose-imported table {
+  .skill-prose table {
     width: 100%;
     border-collapse: collapse;
     font-size: var(--text-dense);
     line-height: 1.5;
   }
-  .prose-imported th,
-  .prose-imported td {
+  .skill-prose th,
+  .skill-prose td {
     padding: 8px 12px 8px 0;
     text-align: left;
     vertical-align: top;
     border-bottom: 1px solid var(--color-gray-alpha-300);
   }
-  .prose-imported th {
+  .skill-prose th {
     font-weight: var(--font-weight-medium);
     color: var(--color-gray-1000);
     white-space: nowrap;
   }
 
-  .prose-imported blockquote {
-    padding-left: 14px;
+  /* Imported Markdown can't take the authored pull quote's 3px rounded bar
+     (glass/type/assets/prose.tsx), so it keeps a plain 2px rule. */
+  .skill-prose blockquote {
+    padding-left: 15px;
     border-left: 2px solid var(--color-gray-alpha-300);
     color: var(--color-faint);
   }
-  .prose-imported hr {
+  .skill-prose hr {
     margin: 32px 0;
     border: 0;
     border-top: 1px solid var(--color-gray-alpha-300);
   }
-  .prose-imported img {
+  .skill-prose img {
     max-width: 100%;
     height: auto;
     border-radius: 12px;

package/plugins/keyline/skills/keyline/glass/type/guide.md

@@ -33,7 +33,7 @@ Each role gets a size in steps of 1–2px, as densely as the roles demand (domai
 
 Text tiers (`primary` → `quiet`) come from the Glass colour guide (`glass/color/guide.md`). Only the top two are grey-ramp steps (`gray-1000`, `gray-900`); `muted` / `quiet` / `faint` are separate tokens picked for contrast (colour law 2).
 
-**Eighteen is the ceiling, and it's lower than you think.** An earlier ladder topped out at 30px, with a 19px prose heading, a 17px dek and a 16px prose body. Case studies and articles opened at 30px and every other page at 18px, so a case study felt like a different site (domain law 2). The rest of the site ran on **two sizes**, 16 for headings and 14 for everything read; the detail templates came down to those, and the four sizes were deleted, not replaced. One element likewise takes one role on every page, and sibling controls match (domain law 2).
+**Eighteen is the ceiling, and it's lower than you think.** The site runs on **two sizes**, 16 for headings and 14 for everything read; the detail templates that once opened two steps above every other page came down to those (domain law 2; the deleted sizes are in `glass/type/scale.md`). One element likewise takes one role on every page, and sibling controls match (domain law 2).
 
 ### When size stops doing the work
 
@@ -50,7 +50,7 @@ At one size, the 17px keyline that once shouted over a 16px heading can't return
 
 The cost is a flatter page: titles and section headings are both 16px, separated by position and spacing. It's the right flat, because the home page already worked that way and the detail pages were the outlier.
 
-**Nothing in this ladder resizes.** The old step, a 30px title dropping to 26px below `sm`, went with the size that needed it (the domain's responsive-sizes dial).
+**Nothing in this ladder resizes** (the domain's responsive-sizes dial).
 
 → Full derivation, including how to add a role without bloating the ladder: `glass/type/scale.md`
 
@@ -67,7 +67,7 @@ Quiet or lifted is set by what the line is doing there, one lift per group, one
 
 A contents rail's active row takes `font-medium` *and* primary colour, so state is never on colour alone; no state greys a title (domain laws 3 and 5).
 
-→ Weight and tracking in depth, including when 300 is legitimate: `glass/type/weight-and-tracking.md`
+→ Weight and tracking in depth: `glass/type/weight-and-tracking.md`
 
 ## 3. Leading runs inverse to size
 
@@ -108,7 +108,7 @@ Archivo's true italic is a separate file whose slant fights its geometric letter
 ```tsx
 // From the inline markdown renderer
 if (bold) return <strong className="font-medium text-gray-1000">{text}</strong>;
-if (em)   return <em className="text-gray-800">{text}</em>;
+if (em)   return <em className="text-muted">{text}</em>;
 ```
 
 Why the mapping works, and the semantic tags it keeps: domain law 9 and `domains/type/prose-and-emphasis.md`.
@@ -184,9 +184,7 @@ Glass's two systems (domain law 8):
 
 The ranges overlap, so leading and measure carry the distinction. Reading leading on a UI row is the usual symptom here: it grows, and the dock loses its rhythm.
 
-**UI copy is sentence case, generated labels included.** Buttons, column heads, field names, dialog titles, toasts, and anything a template builds from a key: first word and proper nouns capitalised, acronyms and third-party names as written. Labels generated from code drift into Title Case unnoticed, and a second case is a second voice.
-
-**Icons beside text** follow domain law 13: 13px text takes a 13–14px icon with a 4–6px gap. It is the mass problem `glass/color/guide.md` solves for colour, by resting icons a tier below, solved here for size.
+**Labels are sentence case, generated ones included** (patterns law 1), and **icons beside text** follow domain law 13: 13px text, a 13–14px icon, a 4–6px gap.
 
 → How prose blocks are set — headings, quotes, lists, spacing: `glass/type/long-form-prose.md`
 

package/plugins/keyline/skills/keyline/glass/type/long-form-prose.md

@@ -10,7 +10,7 @@ How Glass sets the reading half: looser leading and spacing than anything else o
 
 Prose body is 14/1.75: a UI paragraph's size, noticeably more open (1.75 vs 1.55).
 
-Why 1.75: a 576px text column at 14px holds roughly 85–95 characters a line, past comfortable, and long lines need more leading for the eye to find the next line's start. A shorter measure could pull it back toward 1.6.
+Why 1.75: the ~90-character measure (`glass/layout/measure-and-rhythm.md`). A shorter measure could pull it back toward 1.6.
 
 ## The reading column is two sizes
 
@@ -24,25 +24,9 @@ Why 1.75: a 576px text column at 14px holds roughly 85–95 characters a line, p
 | Pull quote | 14 | a 3px rounded bar and a 16px indent |
 | Note | 13 | a 1px rule, the faint tier, and a step down in size |
 
-## Keyline and note
+## The blocks, in code
 
-Both came from one diagnosis: a body of writing that was 114 paragraphs and almost nothing else. What each is for, and the build check that keeps them honest: `domains/type/prose-and-emphasis.md`, **Two block types worth having**.
-
-**`keyline`** — body size, weight 500, `my-9`.
-
-```tsx
-case "keyline":
-  return <p className="reveal my-9 text-[14px] font-medium leading-[1.6] text-gray-1000">…</p>;
-```
-
-**`note`** — 13px, faint tier, a 1px left rule and 16px of indent.
-
-```tsx
-case "note":
-  return <p className="reveal my-7 border-l border-gray-alpha-300 pl-4 text-[13px] leading-[1.6] text-faint">…</p>;
-```
-
-The note's rule is 1px and the quote's 3px, with the type inside four steps apart, so the two indented rules can't be mistaken for each other.
+Every block's classes — lead, body, keyline, note, h2, quote, figure, lists — are in `glass/type/assets/prose.tsx`, with the reason for each beside it. Keyline and note both came from one diagnosis, a body of writing that was 114 paragraphs and almost nothing else; what each is for, and the build check that keeps them honest: `domains/type/prose-and-emphasis.md`, **Two block types worth having**.
 
 ## Block spacing
 
@@ -59,61 +43,12 @@ The note's rule is 1px and the quote's 3px, with the type inside four steps apar
 
 The heading's 40 above and 12 below, ~3.3:1, is the domain's asymmetric heading space; the keyline is its symmetric exception.
 
-## Headings inside prose
-
-```tsx
-<h2 className="mt-10 mb-3 text-[16px] font-medium leading-[1.2] tracking-[-0.015em]">
-```
-
-16px against 14px body is one step; the weight (500), the tight leading (1.2) and the 40px above do the real work.
-
-It matches a page-level section heading and the detail page's own `<h1>`: three levels at one size, separated by position and spacing. Flatter than most article templates, and deliberate — the alternative was an in-body heading larger than the page title.
-
-## Quotes
-
-```tsx
-<blockquote className="my-9 flex gap-4">
-  <span aria-hidden className="w-[3px] shrink-0 rounded-full bg-gray-500" />
-  <div className="text-[14px] leading-[1.75] text-gray-1000">…</div>
-</blockquote>
-```
-
-The type matches the body around it, so the bar is the entire signal: the 2px `gray-alpha-300` border it replaced is domain law 4's example of auditing what's left after a signal goes. Why a flex child with no vertical margin: `domains/type/prose-and-emphasis.md`, **Quotes**.
-
-- **`bg-gray-500`, from the grey ramp, not the alpha ramp.** It's a decorative mark on an opaque surface — see the Glass colour guide (`glass/color/guide.md`) on why decorative marks stay on the solid ramp.
-
-Still absent: italic (globally disabled), quotation marks, background, colour step. Stepping the quote *down* to secondary, as earlier versions did, at body size just makes a de-emphasised paragraph.
-
-The citation goes quieter and explicitly kills the browser's italic (domain law 9):
-
-```tsx
-<cite className="mt-2 block text-[13px] not-italic text-quiet">— {cite}</cite>
-```
-
-## Figures
-
-```tsx
-<figure className="reveal my-9">
-  <div className="overflow-hidden rounded-[10px] bg-gray-100 ring-1 ring-gray-alpha-300">
-    <div style={{ aspectRatio: b.aspect ?? "16 / 9" }}>
-      <img src={b.src} alt={b.alt} loading="lazy" decoding="async" className="h-full w-full object-cover" />
-    </div>
-  </div>
-  <figcaption className="mt-2.5 text-[13px] leading-[1.55] text-faint">{caption}</figcaption>
-</figure>
-```
-
-The aspect ratio sits on a wrapper so the box is reserved before the image loads. `ring-1` rather than a border, so the outline stays out of the box model and the corner radius stays exact.
-
-**The caption is the point of the figure, not a label on it**: what the thing was for, and which constraint shaped it. It sits at the note/meta tier (13px, faint).
-
-## Lists
-
-```tsx
-<ul className="mb-6 list-disc space-y-2 pl-5 marker:text-gray-500">
-```
+## What the code doesn't say
 
-The `marker:` variant puts the domain's quiet marker (`domains/type/prose-and-emphasis.md`, **Lists**) on `gray-500`; the same goes for `list-decimal`.
+- **Prose headings** match a page-level section heading and the detail page's own `<h1>`: three levels at 16px, separated by position and spacing. The alternative was an in-body heading larger than the page title.
+- **The pull quote's bar is the entire signal**, since its type matches the body: the 2px `gray-alpha-300` border it replaced is domain law 4's example of auditing what's left after a signal goes. `bg-gray-500` is from the solid ramp, a decorative mark on an opaque surface (`glass/color/guide.md`). Still absent: italic, quotation marks, background, a colour step.
+- **A figure's caption is the point of the figure**, not a label on it: what the thing was for, and which constraint shaped it.
+- **Authored lists keep the UA marker** (`list-disc` / `list-decimal`) on `gray-500`, the domain's quiet marker; imported Markdown uses the 3px dot instead (§8 of `glass/type/guide.md`). Both are what the site ships.
 
 ## Hand-rolled bullets in UI context
 
@@ -144,7 +79,7 @@ Every block carries `reveal`, so paragraphs fade up one by one as they enter the
 <p className="mt-2 text-[14px] leading-[1.55] text-muted">{dek}</p>
 ```
 
-Body size, muted, tighter leading. It was 17px, the ladder's one odd number, sitting between a 30px title and 16px prose; with both gone it separates on colour and leading alone: 1.55, against the body's 1.75 and the lead's 1.9. Dek and lead are the domain's tightest pairing; check them first.
+Body size, muted, tighter leading: it separates on colour and leading alone, 1.55 against the body's 1.75 and the lead's 1.9. Dek and lead are the domain's tightest pairing; check them first.
 
 ## Cover art and the measure