diff --git a/docs/design-context-categorization/README.md b/docs/design-context-categorization/README.md
index 4c60f073e..ecca008c6 100644
--- a/docs/design-context-categorization/README.md
+++ b/docs/design-context-categorization/README.md
@@ -9,6 +9,7 @@ Source examples analyzed (local scratch runs, not tracked in this repo):
 
 ## Documents
 
+- [`WHAT.md`](./WHAT.md) — first draft of what we're building: a visual, browsable rendering of this categorization on the live site.
 - [`CONTENTS.md`](./CONTENTS.md) — what maps where, per category, with gaps and rationale.
 - [`CONTENTS-TABLE.md`](./CONTENTS-TABLE.md) — the same mapping as lean per-category Value / Derived from / Source tables, no prose.
 - [`MISSING.md`](./MISSING.md) — content gaps neither example run produces, regardless of category.
diff --git a/docs/design-context-categorization/WHAT.md b/docs/design-context-categorization/WHAT.md
new file mode 100644
index 000000000..bc624d295
--- /dev/null
+++ b/docs/design-context-categorization/WHAT.md
@@ -0,0 +1,216 @@
+# What We're Building (First Draft)
+
+A visual, browsable rendering of the 8-category design context map — Audience, Product, Brand, Color, Typography, Iconography, Material, Interface — so a user can click through and see, category by category, what `/impeccable` already extracts from a project (and, later, what it's still missing).
+
+This is the **WHAT**, not the how: scope and shape, not component code. Two sources feed it, each responsible for a different half:
+
+- **Interaction mechanics** (the tile-grid landing, the click-to-fullscreen morph, hash routing, responsive collapse) come from the `Puppy Wear Design Context V2.html` prototype — see "Reference architecture" below.
+- **Visual UI** (the "inside" — sidebar, content layout, typography, color, both light and dark) comes from the live [impeccable.style/docs/](https://impeccable.style/docs/) page, i.e. the actual local files that render it in this repo — see "Local reference" below. Content and category definitions come from [`CONTENTS-TABLE.md`](./CONTENTS-TABLE.md).
+
+Nothing here invents a third design language: the shape of the interaction is the prototype's, the skin is the live site's.
+
+---
+
+## Reference architecture — interaction mechanics only
+
+Source: `Puppy Wear Design Context V2.html` (local prototype, not in this repo). What we take from it is behavior and geometry — how the tile grid is arranged, how a click turns into a fullscreen view, how that view is structured into regions and addressed by URL. The prototype's own CSS for what fills those regions (its sidebar/topbar/row styling, its color palette) is **not** carried over — that's replaced wholesale by the live site's actual components, described in "Visual language" below.
+
+- **Landing state** — an 8-tile asymmetric mosaic grid (an 18-column × 12-row grid with hand-placed spans per tile, matching the prototype's exact tile placement) with a circular center badge sitting on the seam between tiles. One tile per category — Audience, Product, Brand, Color, Typography, Iconography, Material, Interface — label only, no content, until opened.
+- **Open transition** — clicking a tile creates a container positioned/sized to start exactly at the clicked tile's on-screen rect, then animates position/size/corner-radius to fullscreen, with the inner content fading/sliding in after a short delay. Closing runs the same transition in reverse, back to the originating tile's rect, then removes the element. (This is the prototype's `.expander` / `.expander.is-full` / `.expander.is-ready` mechanism — same tween, same timing, just filled with the live site's markup instead of the prototype's own.)
+- **Detail shell regions** — once open, the view splits into: a **sidebar** (all 8 categories listed flat, in `CONTENTS-TABLE.md`'s order — Audience, Product, Brand, Color, Typography, Iconography, Material, Interface — active one highlighted, with jump-target sub-links for categories that have sub-content; no thematic clustering, unlike the prototype's own Context/Foundations/System grouping), a **topbar** (current category name + close control), and a **main pane** (that category's content, scrollable). What renders inside each region is the live site's, not the prototype's — see "Visual language."
+- **Hash routing** — the open category is reflected in the URL (`#color`), so it's deep-linkable and back/forward-navigable via `popstate`. `Escape` and the close button both dismiss it.
+- **Responsive fallback** (below ~920px) — the mosaic grid becomes a flex column, one tile per row in a fixed reading order (Product, Audience, Brand, Color, Typography, Iconography, Material, Interface); the sidebar collapses to a horizontal scroll strip.
+
+---
+
+## Local reference — where impeccable.style/docs/ comes from
+
+[impeccable.style/docs/](https://impeccable.style/docs/) is not an external design to imitate from a screenshot — it's this repo, live. The exact files that render it:
+
+| What it renders | File |
+| --- | --- |
+| `/docs` landing page (start rail, command chooser, "Understand the system" list, full reference list) | [`site/pages/docs/index.astro`](../../site/pages/docs/index.astro) |
+| `/docs/:slug` detail pages (one per command/reference topic — closest existing analog to a category detail view) | [`site/pages/docs/[...slug].astro`](../../site/pages/docs/%5B...slug%5D.astro) → [`site/layouts/Doc.astro`](../../site/layouts/Doc.astro) |
+| Shared sidebar (grouped nav, one entry per item, `aria-current` for the active one) | [`site/components/DocsSidebar.astro`](../../site/components/DocsSidebar.astro) |
+| Shared docs/sub-page layout shell (`.skills-layout`, `.skills-sidebar`, `.skills-main`, `.skills-detail`) | [`site/styles/sub-pages.css`](../../site/styles/sub-pages.css) |
+| `/docs`-specific dark-lacquer skin + the `html.light` remap for this section | [`site/styles/docs-kinpaku.css`](../../site/styles/docs-kinpaku.css) |
+| Sitewide brand tokens (colors, type) that everything above consumes | [`site/styles/kinpaku-tokens.css`](../../site/styles/kinpaku-tokens.css), [`site/styles/kinpaku-kit.css`](../../site/styles/kinpaku-kit.css) |
+| Sitewide light-mode override layer | [`site/styles/light-mode.css`](../../site/styles/light-mode.css) |
+| Theme toggle (auto/light/dark, `localStorage`-backed, sets `html.light`/`html.dark`) | [`site/scripts/utils/theme.js`](../../site/scripts/utils/theme.js), wired up in [`site/layouts/Base.astro`](../../site/layouts/Base.astro) (inline pre-paint script + `initThemeToggle()` call) |
+
+We build against these files directly, in both resolved themes (`html.light` and `html.dark`), not a one-off recreation of how the page happens to look in a screenshot.
+
+---
+
+## UI sketch (ASCII)
+
+Proportions are illustrative, not to scale — the point is the asymmetry and the center badge, not exact grid math. Labels like "sidebar" and "topbar" below are generic region names; what actually renders inside them is `DocsSidebar` / `Doc.astro`'s header+prose pattern per "Visual language" above, not the prototype's own chrome.
+
+**Landing — 8-tile mosaic, nothing open:**
+
+```
+┌─────────────┬──────────────┬───────────────────┬─────────────┐
+│             │              │                    │             │
+│             │    BRAND     │                    │  TYPOGRAPHY │
+│             │              │      AUDIENCE       │             │
+│   PRODUCT   ├──────┬───────┤                     ├─────────────┤
+│             │      │ (●)   │                     │             │
+│             │ COLOR│ logo  ├─────────────────────┤   MATERIAL  │
+├─────────────┤      │       │                     │             │
+│ ICONOGRAPHY │      │       │      INTERFACE      │             │
+└─────────────┴──────┴───────┴─────────────────────┴─────────────┘
+```
+
+**A tile mid-click, morphing toward fullscreen (FLIP animation):**
+
+```
+┌──────┬──────┬──────┐        ┌──────┬──────┬──────┐        ┌───────────────────────┐
+│  P   │  B   │  A   │        │  P   │▓▓▓▓▓▓│  A   │        │                       │
+├──────┼──────┼──────┤   →    ├──────┼▓▓▓▓▓▓┼──────┤   →    │      Color (open)     │
+│  Ic  │ [C]★ │  In  │        │  Ic  │▓▓▓▓▓▓│  In  │        │                       │
+└──────┴──────┴──────┘        └──────┴──────┴──────┘        └───────────────────────┘
+    ★ user clicks "Color"      same element grows in place       sidebar + content
+                                (top/left/width/height tween)     fade in ~260ms later
+```
+
+**Expanded — sidebar + topbar + main, "Color" open:**
+
+```
+┌───────────────┬─────────────────────────────────────────────────────────┐
+│ Impeccable    │  Color                                              ✕  │
+├───────────────┼─────────────────────────────────────────────────────────┤
+│  · Audience   │  Color                                                  │
+│  · Product    │  Palette, roles, tints, strategy, tonal ramps.          │
+│  · Brand      │                                                          │
+│  ► Color      │  ┌────────────────────────────────────────────────────┐ │
+│    ↳ Palette  │  │ ░░░░  ▒▒▒▒  ▓▓▓▓  ████  ▓▓▓▓  ▒▒▒▒                 │ │
+│  · Typography │  │        (swatch fan — hover fans out, click copies) │ │
+│  · Iconography│  └────────────────────────────────────────────────────┘ │
+│  · Material   │                                                          │
+│  · Interface  │  ─────────────────────────────────────────────────────  │
+│               │  Palette (hex)          DESIGN.md · colors     Derived  │
+│               │  ─────────────────────────────────────────────────────  │
+│               │  Roles                  DESIGN.md · Colors    In-chat   │
+│               │  ─────────────────────────────────────────────────────  │
+│               │  Strategy               Colors → Named Rules  In-chat   │
+│               │  ─────────────────────────────────────────────────────  │
+│               │  Tints                  colors (opacity)      Derived   │
+│               │  ─────────────────────────────────────────────────────  │
+│               │  Tonal ramps (OKLCH)    colorMeta.tonalRamp    Computed │
+└───────────────┴─────────────────────────────────────────────────────────┘
+```
+
+The sidebar is flat, in `CONTENTS-TABLE.md`'s own category order — no thematic clustering like the prototype's Context/Foundations/System groups. Decided; see "Decisions" at the end.
+
+**Responsive (< ~920px) — grid stacks, sidebar becomes a scroll strip:**
+
+```
+┌─────────────────────────┐        ┌──────────────────────────────────┐
+│ PRODUCT                 │        │[Product][Audience][Brand][►Color]│
+├─────────────────────────┤        │  ...horizontal scroll...       →│
+│ AUDIENCE                │        ├──────────────────────────────────┤
+├─────────────────────────┤        │  Color                       ✕  │
+│ BRAND                   │        │                                  │
+├─────────────────────────┤        │  ░░░ ▒▒▒ ▓▓▓ ███ ▓▓▓ ▒▒▒          │
+│ COLOR                   │  tap → │                                  │
+├─────────────────────────┤        │  Palette (hex)   ...    Derived │
+│ TYPOGRAPHY              │        │  Roles            ...   In-chat │
+├─────────────────────────┤        │  Strategy         ...   In-chat │
+│ ICONOGRAPHY             │        │  ...                             │
+├─────────────────────────┤        │                                  │
+│ MATERIAL                │        │                                  │
+├─────────────────────────┤        │                                  │
+│ INTERFACE               │        │                                  │
+└─────────────────────────┘        └──────────────────────────────────┘
+```
+
+---
+
+## UX flow (ASCII)
+
+```
+                             ┌─────────────────────────┐
+                    ┌───────►│         LANDING          │
+                    │        │   8-tile mosaic grid,    │
+                    │        │     nothing open         │
+                    │        └────────────┬────────────┘
+                    │                     │ click a tile
+                    │                     │ (or page load with #hash)
+                    │                     ▼
+                    │        ┌─────────────────────────┐
+                    │        │     OPEN TRANSITION      │
+                    │        │  tile rect → fullscreen  │
+                    │        │   (FLIP morph, ~500ms)   │
+                    │        └────────────┬────────────┘
+                    │                     │ morph completes
+                    │                     ▼
+                    │        ┌─────────────────────────┐
+                    │   ┌───►│         EXPANDED          │◄───┐
+                    │   │    │ sidebar + topbar + main   │    │
+                    │   │    └────────────┬────────────┘    │
+                    │   │                 │                  │
+                    │   │     ┌───────────┼────────────┐     │
+                    │   │     ▼           ▼            ▼     │
+                    │   │ click a     click a      click a   │
+                    │   │ different   subnav        swatch    │
+                    │   │ category    link          → copy    │
+                    │   │ in sidebar  → scroll to    hex,      │
+                    │   │             that row      "Copied!"  │
+                    │   │     │           │            │       │
+                    │   │     └───────────┴────────────┘       │
+                    │   │   re-render main, update hash,        │
+                    │   └───────────── no re-morph ─────────────┘
+                    │                     │
+                    │                     │ Escape, or click ✕
+                    │                     ▼
+                    │        ┌─────────────────────────┐
+                    │        │     CLOSE TRANSITION      │
+                    └────────┤  fullscreen → tile rect   │
+                             │   (reverse morph)          │
+                             └─────────────────────────┘
+```
+
+Two entry points worth calling out: a direct tile click always starts from the tile's own rect (so the morph has somewhere real to animate from), while a page load with a `#category` hash in the URL skips straight to `EXPANDED` — the prototype does this via a short `setTimeout` rather than an instant snap, so the shell still feels like it "arrived" rather than being static markup.
+
+---
+
+## Visual language — the inside (and the mosaic's skin) is impeccable.style/docs/, not the prototype
+
+The prototype supplies geometry and motion (previous section). Everything you'd actually call "the design" — color, type, borders, the sidebar, how a list of facts is laid out — comes from the live `/docs` implementation listed above, applied in both the regions the prototype defines (mosaic tiles, sidebar, topbar, main pane) and rendered correctly in both themes.
+
+- **Mosaic tiles (landing)** — keep the prototype's asymmetric grid *placement* (which tile sits where, the center badge), but the tile surface itself — border, corner radius, hover/focus treatment, background — pulls from the same surface tokens the rest of the site already uses for card-like elements (`--docs-panel-bg`, `--docs-row-bg`, `--docs-row-hover-bg`, `--docs-accent` from `docs-kinpaku.css`), so a tile reads as a natural extension of the site's existing surfaces, not the prototype's flat white/black `oklch(0% 0 0)` outline treatment. Tile label typography uses the site's existing display font (whatever `docs-kinpaku.css` / `kinpaku-tokens.css` already sets for large display text), not the prototype's Alumni Sans Pinstripe.
+- **Sidebar (inside)** — structurally and visually **`DocsSidebar.astro`**: the `skills-sidebar` / `skills-sidebar-label` / `skills-sidebar-list` / `aria-current` pattern, applied as a single flat `skills-sidebar-list` of all 8 categories in `CONTENTS-TABLE.md`'s own order (Audience, Product, Brand, Color, Typography, Iconography, Material, Interface) — no `skills-sidebar-group` clustering, since there's no thematic grouping to apply. Not the prototype's own `docs-sidebar` / `docs-nav-link` / `docs-subnav` CSS, nor its Context/Foundations/System clusters — those are discarded entirely; only the per-category jump-target sub-links survive as `docs-subnav`-equivalent behavior under the active entry.
+- **Topbar + main pane (inside)** — structurally and visually **`Doc.astro`**'s `.skills-main` / `.skills-detail` pattern: a header (`.sub-page-header` → `.sub-page-title` + `.sub-page-lede`) playing the role of the prototype's topbar-plus-title, followed by a content body (`.skills-detail-body.docs-body.prose`) playing the role of the main pane. Each category's Value / Derived-from / Source rows render as the same label-plus-secondary-line row shape the live `/docs` index already uses for its "Full command reference" list (primary text + a muted description line), not the prototype's bordered `.detail-row` two-column table look.
+- **Color's swatch fan / Typography's type sample / Material's line diagram** — these three specialized blocks have no equivalent on the live site (nothing there needs a color-swatch strip), so they're the one place the prototype's own markup and interaction *do* carry over structurally — but skinned with the site's color tokens, not the prototype's `--care-glow` / `--paw-proof` custom palette.
+- **Theme** — driven entirely by the existing toggle (`theme.js`, `html.light` / `html.dark`, wired in `Base.astro`). Both themes are first-class from the start because we're building against `docs-kinpaku.css`'s existing dark/light rule pairs, not authoring a new palette that then needs a light variant invented after the fact.
+- **Motion** — the tile→fullscreen morph timing/easing and the responsive breakpoint stay as defined in "Reference architecture"; none of that is affected by this section.
+
+---
+
+## Content model
+
+Source of truth: [`CONTENTS-TABLE.md`](./CONTENTS-TABLE.md).
+
+- **Legend** (5 source types: Derived, Questionnaire — In-chat (init), Questionnaire — In-chat (document), Questionnaire — Browser (document), Computed) — surfaced once, not per category (a persistent key, e.g. a footnote strip or an info toggle in the topbar).
+- **8 categories**, each a list of rows: Value / Derived from / Source. Row counts vary today from 1 (Iconography) to 10 (Material).
+- To avoid a second hand-maintained copy of the same data, the first build pass should read `CONTENTS-TABLE.md` directly (parsed into a small structured module at build time) rather than re-typing rows into markup. This doc stays the single source; the page is a renderer, not a fork.
+
+---
+
+## Explicitly out of scope for this first draft
+
+- No live wiring to a real project's `PRODUCT.md` / `DESIGN.md` — this renders the fixed categorization, not a per-user report.
+- No authoring/editing UI — read-only browse experience.
+- Color's swatch-fan block (`.panel-colors`) carries over structurally, but `CONTENTS-TABLE.md` describes color *concepts* ("Palette (hex)", "Tints") rather than literal hex values — so it renders with placeholder/illustrative swatches for this first draft, not real per-project colors. Click-to-copy still works, just copies placeholder values.
+- No new visual theme, font, or motion language beyond what gets set up by the token swap above.
+
+---
+
+## Decisions
+
+1. **Sidebar grouping — flat, `CONTENTS-TABLE.md` order.** No thematic clusters (the prototype's Context/Foundations/System is dropped). All 8 categories sit at one level, in the exact order `CONTENTS-TABLE.md`'s own "Categories" list uses: Audience, Product, Brand, Color, Typography, Iconography, Material, Interface.
+2. **Verification pass — confirmed.** Once built, screenshot-compare against the real `/docs` and `/docs/:slug` pages in both `html.light` and `html.dark`, same as any other `docs-kinpaku.css`-consuming page — not eyeballed once in whichever theme happens to be active during development.
+
+## Deferred
+
+- **Where this lives** (a page under `/docs`, e.g. filling the existing unused `Design Context` → `/docs/context` stub in `manualTopics` in [`site/pages/docs/index.astro`](../../site/pages/docs/index.astro), vs. its own standalone route) is not being decided as part of this draft. Revisit once the build is closer.
diff --git a/docs/design-context-categorization/design-context.html b/docs/design-context-categorization/design-context.html
new file mode 100644
index 000000000..f2616ed71
--- /dev/null
+++ b/docs/design-context-categorization/design-context.html
@@ -0,0 +1,2447 @@
+<!doctype html>
+<html lang="en" class="dark" data-theme-pref="auto">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Design Context — Hanazono Atelier</title>
+<meta name="description" content="The 8-category design context map, rendered with real data from the Hanazono Atelier example project.">
+<meta name="robots" content="noindex">
+
+<!-- FOUC guard: resolve theme before first paint. Mirrors the site's theme.js. -->
+<script>
+(function () {
+  var pref = localStorage.getItem('impeccable-theme');
+  if (pref !== 'light' && pref !== 'dark') pref = 'auto';
+  var resolved = pref === 'auto'
+    ? (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark')
+    : pref;
+  document.documentElement.classList.remove('light', 'dark');
+  document.documentElement.classList.add(resolved);
+  document.documentElement.setAttribute('data-theme-pref', pref);
+})();
+</script>
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@300;400;500;600;700&family=Alumni+Sans:wght@100;300;400;500;600;700&family=Shippori+Mincho:wght@400;500&family=Source+Sans+3:wght@400;600&display=swap" rel="stylesheet">
+
+<style>
+/* ============================================================
+   Tokens — copied from the site's kinpaku-tokens.css so this file
+   stands alone. Dark is the default; html.light remaps.
+   ============================================================ */
+:root {
+  --ks-kinpaku:        oklch(84% 0.19 80.46);
+  --ks-kinpaku-pale:   oklch(86% 0.07 84);
+  --ks-kinpaku-rich:   oklch(77% 0.13 82);
+  --ks-kinpaku-deep:   oklch(61% 0.085 78);
+  --ks-patina:         oklch(70% 0.12 188);
+  --ks-patina-deep:    oklch(49% 0.08 188);
+
+  --ks-lacquer:        oklch(7% 0.006 95);
+  --ks-lacquer-deep:   oklch(4% 0.004 95);
+  --ks-lacquer-raised: oklch(11% 0.006 95);
+  --ks-graphite:       oklch(15% 0.008 95);
+  --ks-graphite-2:     oklch(19% 0.008 95);
+
+  --ks-champagne:      oklch(91% 0 0);
+  --ks-text:           oklch(88% 0 0);
+  --ks-text-muted:     oklch(72% 0 0);
+  --ks-text-faint:     oklch(62% 0 0);
+  --ks-rule:           oklch(78% 0 0 / 0.16);
+
+  --ks-code-fg:        oklch(91% 0 0);
+  --ks-code-bg:        var(--ks-graphite-2);
+
+  --ks-font-display:   "Alumni Sans", "Albert Sans", Arial, sans-serif;
+  --ks-font:           "Albert Sans", "Avenir Next", "Helvetica Neue", Arial, system-ui, sans-serif;
+  --ks-mono:           "SFMono-Regular", "Roboto Mono", "JetBrains Mono", Consolas, monospace;
+  --ks-ease:           cubic-bezier(0.2, 0.8, 0.2, 1);
+
+  /* Section accent (mirrors docs-kinpaku's --docs-* vars). */
+  --accent:        var(--ks-kinpaku);
+  --accent-hover:  var(--ks-kinpaku-pale);
+  --accent-wash:   oklch(78% 0.12 82 / 0.1);
+  --accent-line:   oklch(78% 0.12 82 / 0.32);
+  --panel-bg:        oklch(11% 0.006 95);
+  --shadow-color:    oklch(0% 0 0 / 0.4);
+
+  /* Viz vignettes inside mosaic tiles. */
+  --viz-ink:    var(--ks-text);
+  --viz-mist:   oklch(78% 0 0 / 0.3);
+  --viz-accent: var(--ks-kinpaku);
+}
+
+html.dark { color-scheme: dark; }
+
+html.light {
+  color-scheme: light;
+
+  --ks-lacquer:        oklch(97% 0.012 95);
+  --ks-lacquer-deep:   oklch(94% 0.014 95);
+  --ks-lacquer-raised: oklch(99% 0.008 95);
+  --ks-graphite:       oklch(91% 0.012 95);
+  --ks-graphite-2:     oklch(88% 0.014 95);
+
+  --ks-champagne:      oklch(18% 0.02 95);
+  --ks-text:           oklch(25% 0.018 95);
+  --ks-text-muted:     oklch(45% 0.015 95);
+  --ks-text-faint:     oklch(55% 0.012 95);
+  --ks-rule:           oklch(25% 0.02 95 / 0.12);
+
+  --ks-code-fg:        oklch(28% 0.02 95);
+  --ks-code-bg:        var(--ks-graphite);
+
+  --ks-nav-active: var(--ks-patina-deep);
+
+  --accent:        var(--ks-patina-deep);
+  --accent-hover:  var(--ks-patina);
+  --accent-wash:   oklch(49% 0.08 188 / 0.08);
+  --accent-line:   oklch(49% 0.08 188 / 0.3);
+  --panel-bg:        oklch(99% 0.008 95);
+  --shadow-color:    oklch(25% 0.02 95 / 0.16);
+
+  --viz-ink:    oklch(25% 0.018 95);
+  --viz-mist:   oklch(25% 0.02 95 / 0.24);
+  --viz-accent: var(--ks-patina-deep);
+}
+
+/* ============================================================
+   Base
+   ============================================================ */
+* { box-sizing: border-box; }
+
+html, body { margin: 0; padding: 0; }
+
+body {
+  font-family: var(--ks-font);
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--ks-text);
+  background: linear-gradient(180deg, var(--ks-lacquer), var(--ks-lacquer-deep));
+  min-height: 100svh;
+  -webkit-font-smoothing: antialiased;
+}
+
+body.is-locked { overflow: hidden; }
+
+.visually-hidden {
+  position: absolute;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+code {
+  font-family: var(--ks-mono);
+  font-size: 0.82em;
+  color: var(--ks-code-fg);
+  background: var(--ks-code-bg);
+  border-radius: 3px;
+  padding: 0.14em 0.4em;
+  white-space: nowrap;
+}
+
+/* ============================================================
+   Header — kinpaku chrome, every link opens the live site
+   ============================================================ */
+/* Exact port of the site's header: sub-pages.css base + kinpaku-kit.css
+   `.kinpaku-chrome` chrome + light-mode.css overrides, with the site's
+   markup (Header.astro). Selectors kept 1:1 so both themes match. */
+
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 28px clamp(22px, 4vw, 56px);
+  background: linear-gradient(180deg, oklch(5% 0.004 95 / 0.92), oklch(5% 0.004 95 / 0.68));
+  border-bottom: 1px solid oklch(78% 0.12 82 / 0.18);
+  -webkit-backdrop-filter: blur(18px) saturate(1.25);
+  backdrop-filter: blur(18px) saturate(1.25);
+}
+
+html.light .site-header {
+  background: linear-gradient(180deg, oklch(99% 0.008 95 / 0.96), oklch(97% 0.012 95 / 0.88));
+  border-bottom-color: var(--ks-rule);
+}
+
+.site-header a,
+.site-header a:hover {
+  text-decoration: none;
+}
+
+.site-header-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--ks-kinpaku);
+  font-family: var(--ks-font);
+  flex-shrink: 0;
+}
+
+html.light .site-header-brand,
+html.light .site-header-brand-logo,
+html.light .site-header-brand-name {
+  color: var(--ks-champagne);
+}
+
+.site-header-brand-logo {
+  width: 38px;
+  height: 38px;
+  display: grid;
+  place-items: center;
+  color: var(--ks-kinpaku);
+  flex-shrink: 0;
+}
+
+.site-header-brand-logo svg {
+  width: 32px;
+  height: 32px;
+  display: block;
+  fill: currentColor;
+}
+
+.site-header-brand-name {
+  display: inline-block;
+  color: var(--ks-kinpaku);
+  font-family: var(--ks-font-display);
+  font-weight: 400;
+  font-size: 1.3rem;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  line-height: 1;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
+.site-header-right {
+  display: flex;
+  align-items: center;
+  gap: clamp(12px, 2vw, 24px);
+  min-width: 0;
+}
+
+.site-header-nav {
+  display: flex;
+  align-items: center;
+  gap: clamp(22px, 3vw, 48px);
+  font-family: var(--ks-font);
+  font-size: 0.95rem;
+  font-weight: 400;
+  min-width: 0;
+}
+
+.site-header-nav a {
+  position: relative;
+  display: inline-block;
+  white-space: nowrap;
+  color: var(--ks-champagne);
+  padding: 4px 0;
+  transition: color 160ms var(--ks-ease);
+}
+
+.site-header-nav a:hover {
+  color: var(--ks-kinpaku);
+}
+
+html.light .site-header-nav a:hover {
+  color: var(--ks-nav-active);
+}
+
+/* Theme toggle — hairline chip, icon keyed on data-theme-pref. */
+.theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  min-height: 36px;
+  padding: 0;
+  border-radius: 999px;
+  border: 1px solid oklch(78% 0.12 82 / 0.28);
+  background: transparent;
+  color: var(--ks-champagne);
+  cursor: pointer;
+  flex: none;
+  box-sizing: border-box;
+  transition: color 160ms var(--ks-ease), border-color 160ms var(--ks-ease), background 160ms var(--ks-ease);
+}
+
+.theme-toggle:hover {
+  color: var(--ks-kinpaku);
+  border-color: var(--ks-kinpaku-deep);
+  background: oklch(77% 0.13 82 / 0.08);
+}
+
+html.light .theme-toggle {
+  border-color: var(--ks-rule);
+  color: var(--ks-text-muted);
+}
+
+html.light .theme-toggle:hover {
+  color: var(--ks-kinpaku);
+  border-color: var(--ks-kinpaku-deep);
+  background: oklch(77% 0.13 82 / 0.10);
+}
+
+.theme-toggle svg {
+  width: 18px;
+  height: 18px;
+  display: block;
+}
+
+.theme-toggle .theme-toggle-icon--dark {
+  transform: translate(-1.5px, 1.5px);
+}
+
+.theme-toggle .theme-toggle-icon--auto,
+.theme-toggle .theme-toggle-icon--light,
+.theme-toggle .theme-toggle-icon--dark {
+  display: none;
+}
+
+html[data-theme-pref="auto"] .theme-toggle .theme-toggle-icon--auto,
+html[data-theme-pref="light"] .theme-toggle .theme-toggle-icon--light,
+html[data-theme-pref="dark"] .theme-toggle .theme-toggle-icon--dark {
+  display: block;
+}
+
+/* Hamburger toggle — hidden on desktop, shown on mobile. */
+.site-header-menu {
+  display: none;
+  width: 36px;
+  height: 36px;
+  background: transparent;
+  border: 1px solid oklch(78% 0.12 82 / 0.32);
+  border-radius: 4px;
+  padding: 0;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 6px;
+  flex: none;
+  margin-left: auto;
+  transition: border-color 160ms ease, background 160ms ease;
+}
+
+.site-header-menu:hover {
+  border-color: oklch(78% 0.12 82 / 0.55);
+  background: oklch(78% 0.12 82 / 0.06);
+}
+
+html.light .site-header-menu {
+  border-color: var(--ks-rule);
+  color: var(--ks-text);
+}
+
+html.light .site-header-menu:hover {
+  border-color: var(--ks-kinpaku-deep);
+  background: oklch(77% 0.13 82 / 0.08);
+}
+
+.site-header-menu-line {
+  display: block;
+  width: 16px;
+  height: 1.5px;
+  background: var(--ks-kinpaku);
+  transition: transform 200ms ease, opacity 200ms ease;
+}
+
+html.light .site-header-menu-line {
+  background: var(--ks-text);
+}
+
+[data-site-header][data-nav-open="true"] .site-header-menu-line:nth-child(1) {
+  transform: translateY(3.75px) rotate(45deg);
+}
+
+[data-site-header][data-nav-open="true"] .site-header-menu-line:nth-child(2) {
+  transform: translateY(-3.75px) rotate(-45deg);
+}
+
+/* Mobile nav drawer: the right cluster collapses below the header. */
+@media (max-width: 760px) {
+  .site-header {
+    flex-wrap: wrap;
+    padding: 16px clamp(16px, 4vw, 24px);
+    row-gap: 12px;
+  }
+
+  .site-header-menu {
+    display: inline-flex;
+  }
+
+  [data-site-header] .site-header-right {
+    order: 3;
+    flex-basis: 100%;
+    display: none;
+    grid-template-columns: max-content 1fr;
+    column-gap: 10px;
+    flex-direction: column;
+    align-items: stretch;
+    row-gap: 0;
+    margin: 12px 0 -16px;
+    padding: 6px;
+    background: oklch(4% 0.004 95);
+    border-radius: 4px;
+    border-top: 1px solid oklch(78% 0.12 82 / 0.18);
+  }
+
+  html.light [data-site-header] .site-header-right {
+    background: var(--ks-lacquer-raised);
+    border-top-color: var(--ks-rule);
+  }
+
+  [data-site-header][data-nav-open="true"] .site-header-right {
+    display: grid;
+  }
+
+  .site-header-nav {
+    grid-column: 1 / -1;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+    font-size: 1rem;
+    overflow: visible;
+  }
+
+  [data-site-header] .site-header-nav a {
+    display: block;
+    padding: 14px clamp(16px, 4vw, 24px);
+    border-bottom: 1px solid oklch(78% 0.12 82 / 0.06);
+  }
+
+  html.light [data-site-header] .site-header-nav a {
+    border-bottom-color: var(--ks-rule);
+  }
+
+  [data-site-header] .site-header-nav a:last-child {
+    border-bottom: 0;
+  }
+
+  .theme-toggle {
+    grid-column: 1;
+    margin: 12px 0 6px;
+  }
+}
+
+@media (max-width: 480px) {
+  .site-header-brand-name {
+    display: none;
+  }
+}
+
+/* ============================================================
+   Mosaic landing
+   ============================================================ */
+.dcx-shell {
+  --dcx-gap: clamp(10px, 0.9vw, 14px);
+  padding: var(--dcx-gap) clamp(14px, 2vw, 26px) clamp(16px, 2.2vw, 28px);
+}
+
+.dcx-grid {
+  position: relative;
+  height: calc(100svh - 130px);
+  min-height: 560px;
+  display: grid;
+  grid-template-columns: repeat(18, minmax(0, 1fr));
+  grid-template-rows: repeat(12, minmax(0, 1fr));
+  gap: var(--dcx-gap);
+}
+
+.dcx-tile--product     { grid-column: 1 / 5;   grid-row: 1 / 7;   --vz-delay: -1.1s; }
+.dcx-tile--brand       { grid-column: 5 / 11;  grid-row: 1 / 6;   --vz-delay: -1.9s; }
+.dcx-tile--audience    { grid-column: 11 / 15; grid-row: 1 / 7;   --vz-delay: -0.4s; }
+.dcx-tile--typography  { grid-column: 15 / 19; grid-row: 1 / 6;   --vz-delay: -2.6s; }
+.dcx-tile--color       { grid-column: 5 / 10;  grid-row: 6 / 13;  --vz-delay: -0.7s; }
+.dcx-tile--iconography { grid-column: 1 / 5;   grid-row: 7 / 13;  --vz-delay: -1.3s; }
+.dcx-tile--interface   { grid-column: 10 / 15; grid-row: 7 / 13;  --vz-delay: -1.6s; }
+.dcx-tile--material    { grid-column: 15 / 19; grid-row: 6 / 13;  --vz-delay: -3.2s; }
+
+.dcx-tile {
+  position: relative;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: clamp(12px, 1.6vw, 24px);
+  min-width: 0;
+  min-height: 0;
+  padding: clamp(18px, 2.2vw, 36px);
+  background: var(--panel-bg);
+  border: 1px solid var(--ks-rule);
+  border-radius: 8px;
+  overflow: hidden;
+  color: var(--ks-champagne);
+  cursor: pointer;
+  text-align: left;
+  isolation: isolate;
+  container-type: inline-size;
+  font-family: inherit;
+  transition:
+    transform 220ms var(--ks-ease),
+    border-color 220ms var(--ks-ease),
+    background 220ms var(--ks-ease);
+}
+
+/* Hover follows the kit's pagination treatment: the surface stays put,
+   only the border (and title) take the accent. */
+.dcx-tile:hover,
+.dcx-tile:focus-visible {
+  transform: translateY(-2px);
+  border-color: var(--accent);
+  outline: none;
+}
+
+.dcx-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+
+/* Staggered reveal on load — the homepage foundation-grid treatment. */
+.dcx-tile[data-reveal],
+.dcx-badge[data-reveal] {
+  opacity: 0;
+  transform: translateY(30px);
+  transition:
+    opacity 0.8s var(--ks-ease),
+    transform 0.8s var(--ks-ease);
+  transition-delay: var(--reveal-delay, 0s);
+}
+
+.dcx-badge[data-reveal] { transform: translateY(0) scale(0.6); }
+
+.dcx-tile[data-reveal].revealed {
+  opacity: 1;
+  transform: translateY(0);
+  /* Hand hover transforms back to the fast transition once revealed. */
+  transition:
+    transform 220ms var(--ks-ease),
+    border-color 220ms var(--ks-ease),
+    background 220ms var(--ks-ease),
+    opacity 0.8s var(--ks-ease);
+  transition-delay: 0s;
+}
+
+.dcx-badge[data-reveal].revealed {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.dcx-tile-title {
+  position: relative;
+  z-index: 2;
+  margin: 0;
+  font-family: var(--ks-font-display);
+  font-size: clamp(2.3rem, 4.8vw, 4.4rem);
+  font-weight: 100;
+  line-height: 1.02;
+  letter-spacing: 0.01em;
+  color: inherit;
+  text-wrap: balance;
+  transition: color 220ms var(--ks-ease);
+}
+
+.dcx-tile:hover .dcx-tile-title,
+.dcx-tile:focus-visible .dcx-tile-title { color: var(--accent); }
+
+.dcx-tile--typography .dcx-tile-title,
+.dcx-tile--iconography .dcx-tile-title {
+  font-size: min(clamp(2.3rem, 4.8vw, 4.4rem), 20cqw);
+}
+
+/* Center mark on the gutter seam — the bare glyph in kinpaku gold,
+   inset by the same gap the mosaic tiles use. The padding ring is
+   painted page-background so it reads as seam, not as a frame. */
+.dcx-badge {
+  position: relative;
+  z-index: 0;
+  grid-column: 10 / 11;
+  grid-row: 6 / 7;
+  width: clamp(82px, 7vw, 118px);
+  height: clamp(82px, 7vw, 118px);
+  display: grid;
+  place-items: center;
+  align-self: center;
+  justify-self: center;
+  padding: var(--dcx-gap);
+  background: var(--ks-lacquer);
+  /* glyph corner radius (~9% of the box) plus the gap, so the ring hugs the mark */
+  border-radius: calc(9% + var(--dcx-gap));
+  color: var(--ks-kinpaku);
+  pointer-events: none;
+}
+
+.dcx-badge svg { width: 100%; height: 100%; display: block; fill: currentColor; }
+
+/* ============================================================
+   Tile vignettes — foundation-card animation system.
+   The title renders first; the vignette sits below it and scales
+   to fill whatever space the tile has left.
+   ============================================================ */
+.dcx-tile-title { order: 1; }
+
+.dcx-tile-viz {
+  order: 2;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--viz-ink);
+}
+
+.dcx-viz-svg {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+/* Every vignette stroke uses vector-effect: non-scaling-stroke, so the
+   line weight is a fixed pixel value no matter how large the tile lets
+   the SVG scale. One thinness across all eight tiles. */
+.dcx-viz-svg .vz-stroke { stroke-width: 3.5px; }
+.dcx-viz-svg .vz-ghost  { stroke-width: 2.5px; }
+
+@media (max-width: 920px) {
+  .dcx-viz-svg .vz-stroke { stroke-width: 1.5px; }
+  .dcx-viz-svg .vz-ghost  { stroke-width: 1px; }
+}
+
+/* Draw (Typography, Material, Brand, Audience figure).
+   Same draw-breathe / draw-in choreography as the impeccable homepage.
+   The homepage uses stroke-dasharray: 100 in user units, but with
+   vector-effect: non-scaling-stroke Chromium measures dashes in screen
+   pixels, so a fixed 100 chops scaled-up paths into segments. A script
+   sets --pl on each vignette SVG to "100 user units in screen px" and
+   the dash keyframes work from that, giving the exact site animation
+   at any tile size. */
+.anim-draw {
+  stroke-dasharray: var(--pl, 999px);
+  stroke-dashoffset: var(--pl, 999px);
+  animation: draw-breathe 4s ease-in-out var(--vz-delay, 0s) infinite;
+}
+.dcx-tile:hover .anim-draw { animation: draw-in 0.8s var(--ks-ease) forwards; }
+.anim-draw-delay {
+  stroke-dasharray: var(--pl, 999px);
+  stroke-dashoffset: var(--pl, 999px);
+}
+.dcx-tile:hover .anim-draw-delay { animation: draw-in 1s var(--ks-ease) 0.2s forwards; }
+@keyframes draw-breathe {
+  0%, 100% { stroke-dashoffset: var(--pl, 999px); }
+  50% { stroke-dashoffset: calc(var(--pl, 999px) * 0.4); }
+}
+@keyframes draw-in {
+  from { stroke-dashoffset: var(--pl, 999px); }
+  to   { stroke-dashoffset: 0px; }
+}
+
+/* Color venn (breathing pulse, spread on hover) */
+.anim-move-x { animation: pulse-x 3s ease-in-out var(--vz-delay, 0s) infinite; }
+.dcx-tile:hover .anim-move-x { animation: spread-x 0.6s ease-in-out forwards; }
+.anim-move-x-opp { animation: pulse-x-opp 3s ease-in-out var(--vz-delay, 0s) infinite; }
+.dcx-tile:hover .anim-move-x-opp { animation: spread-x-opp 0.6s ease-in-out forwards; }
+.anim-fade-in { opacity: 0; transition: opacity 0.6s ease-in-out; }
+.dcx-tile:hover .anim-fade-in { opacity: 1; }
+@keyframes pulse-x { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.5px); } }
+@keyframes pulse-x-opp { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-1.5px); } }
+@keyframes spread-x { from { transform: translateX(0); } to { transform: translateX(4px); } }
+@keyframes spread-x-opp { from { transform: translateX(0); } to { transform: translateX(-4px); } }
+
+/* Interface toggle (gentle drift, full snap on hover) */
+.anim-toggle-move { animation: toggle-drift 3s ease-in-out var(--vz-delay, 0s) infinite; }
+.dcx-tile:hover .anim-toggle-move { animation: toggle-snap 0.35s ease-in-out forwards; }
+@keyframes toggle-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
+@keyframes toggle-snap {
+  from { transform: translateX(0); fill: var(--viz-mist); }
+  to   { transform: translateX(8px); fill: var(--viz-accent); }
+}
+
+/* Product pitch lines (cursor always blinks) */
+.anim-blink { animation: blink-key 1s step-end var(--vz-delay, 0s) infinite; }
+@keyframes blink-key { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
+
+/* Iconography glyph grid. At rest the four glyphs brighten one by one on
+   a shared 4.8s cycle (1.2s apart). Opacity only — scaling the glyphs
+   blurs the strokes into a halo and makes them balloon. Hovering kills
+   the cycle and lights all four with a small stagger. */
+.anim-pop {
+  opacity: 0.35;
+  transition: opacity 0.35s var(--ks-ease);
+  animation: pop-glow 4.8s ease-in-out infinite;
+}
+.anim-pop-1 { transition-delay: 0s;    animation-delay: calc(var(--vz-delay, 0s) + 0s); }
+.anim-pop-2 { transition-delay: 0.07s; animation-delay: calc(var(--vz-delay, 0s) + 1.2s); }
+.anim-pop-3 { transition-delay: 0.14s; animation-delay: calc(var(--vz-delay, 0s) + 2.4s); }
+.anim-pop-4 { transition-delay: 0.21s; animation-delay: calc(var(--vz-delay, 0s) + 3.6s); }
+.dcx-tile:hover .anim-pop { animation: none; opacity: 1; }
+@keyframes pop-glow {
+  0%, 25%, 100% { opacity: 0.35; }
+  10% { opacity: 1; }
+}
+
+/* Audience second figure joins on hover */
+.anim-join { opacity: 0.25; transition: opacity 0.5s var(--ks-ease); }
+.dcx-tile:hover .anim-join { opacity: 1; }
+
+/* ============================================================
+   Expander — tile-to-fullscreen morph
+   ============================================================ */
+.dcx-expander {
+  position: fixed;
+  z-index: 500;
+  overflow: hidden;
+  border-radius: 8px;
+  background: var(--ks-lacquer);
+  color: var(--ks-text);
+  box-shadow: 0 18px 46px var(--shadow-color);
+  transition:
+    top 520ms var(--ks-ease),
+    left 520ms var(--ks-ease),
+    width 520ms var(--ks-ease),
+    height 520ms var(--ks-ease),
+    border-radius 520ms var(--ks-ease);
+}
+
+.dcx-expander.is-full {
+  top: 0 !important;
+  left: 0 !important;
+  width: 100vw !important;
+  height: 100svh !important;
+  border-radius: 0;
+}
+
+.dcx-expander-inner {
+  width: 100%;
+  height: 100svh;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: 264px minmax(0, 1fr);
+  opacity: 0;
+  transform: translateY(44px);
+  transition: opacity 420ms var(--ks-ease), transform 520ms var(--ks-ease);
+  transition-delay: 260ms;
+}
+
+.dcx-expander.is-ready .dcx-expander-inner { opacity: 1; transform: translateY(0); }
+
+/* ============================================================
+   Expander sidebar — DocsSidebar visual language
+   ============================================================ */
+.dcx-sidebar {
+  min-height: 0;
+  overflow: hidden auto;
+  padding: 26px 22px 32px;
+  border-right: 1px solid var(--ks-rule);
+  background: var(--ks-lacquer-deep);
+  scrollbar-width: thin;
+  scrollbar-color: var(--ks-rule) transparent;
+}
+
+.dcx-sidebar-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin: 2px 0 28px;
+  color: var(--ks-kinpaku);
+  text-decoration: none;
+}
+
+html.light .dcx-sidebar-brand { color: var(--ks-champagne); }
+
+.dcx-sidebar-brand svg { width: 26px; height: 26px; fill: currentColor; flex-shrink: 0; }
+
+.dcx-sidebar-brand-name {
+  font-family: var(--ks-font-display);
+  font-weight: 400;
+  font-size: 1.02rem;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  line-height: 1;
+  -webkit-font-smoothing: auto;
+}
+
+.dcx-nav-label {
+  display: block;
+  font-size: 0.72rem;
+  font-weight: 650;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 10px;
+  padding-left: 14px;
+}
+
+.dcx-nav-list { list-style: none; padding: 0; margin: 0; }
+.dcx-nav-list li { margin: 0; }
+
+.dcx-nav-link {
+  display: block;
+  width: 100%;
+  padding: 5px 0 5px 12px;
+  border: 0;
+  border-left: 2px solid transparent;
+  background: transparent;
+  font-family: var(--ks-font);
+  font-size: 0.94rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--ks-text);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 160ms var(--ks-ease), border-color 160ms var(--ks-ease);
+}
+
+.dcx-nav-link:hover,
+.dcx-nav-link:focus-visible { color: var(--accent-hover); outline: none; }
+
+.dcx-nav-link[aria-current="page"] {
+  color: var(--accent);
+  font-weight: 600;
+  border-left-color: var(--accent);
+}
+
+.dcx-subnav { display: none; padding: 2px 0 8px 24px; }
+
+.dcx-nav-list li.is-active .dcx-subnav {
+  display: grid;
+  gap: 2px;
+  animation: subnav-in 180ms var(--ks-ease) both;
+}
+
+@keyframes subnav-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.dcx-sub-link {
+  display: block;
+  width: 100%;
+  padding: 3px 0;
+  border: 0;
+  background: transparent;
+  font-family: var(--ks-font);
+  font-size: 0.85rem;
+  color: var(--ks-text-muted);
+  text-align: left;
+  cursor: pointer;
+  transition: color 160ms var(--ks-ease);
+}
+
+.dcx-sub-link:hover,
+.dcx-sub-link:focus-visible { color: var(--accent-hover); outline: none; }
+
+/* ============================================================
+   Expander topbar + main
+   ============================================================ */
+.dcx-panel {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: 64px minmax(0, 1fr);
+}
+
+.dcx-topbar {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 0 clamp(22px, 4vw, 48px);
+  border-bottom: 1px solid var(--ks-rule);
+}
+
+.dcx-current {
+  min-width: 0;
+  font-family: var(--ks-mono);
+  font-size: 0.7rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--ks-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dcx-close {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--ks-rule);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--ks-text);
+  cursor: pointer;
+  transition:
+    color 160ms var(--ks-ease),
+    border-color 160ms var(--ks-ease),
+    transform 220ms var(--ks-ease);
+}
+
+.dcx-close:hover,
+.dcx-close:focus-visible {
+  color: var(--accent);
+  border-color: var(--accent-line);
+  transform: rotate(90deg);
+  outline: none;
+}
+
+.dcx-close::before,
+.dcx-close::after {
+  content: "";
+  grid-area: 1 / 1;
+  width: 16px;
+  height: 1.5px;
+  background: currentColor;
+}
+
+.dcx-close::before { transform: rotate(45deg); }
+.dcx-close::after  { transform: rotate(-45deg); }
+
+.dcx-main {
+  min-height: 0;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ks-rule) transparent;
+}
+
+.dcx-main:focus { outline: none; }
+
+/* ============================================================
+   Article
+   ============================================================ */
+.dcx-article {
+  max-width: 880px;
+  margin: 0 auto;
+  padding: clamp(36px, 5vw, 64px) clamp(22px, 4vw, 56px) 110px;
+}
+
+.dcx-eyebrow {
+  display: block;
+  font-family: var(--ks-mono);
+  font-size: 0.7rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 16px;
+}
+
+.dcx-title {
+  margin: 0 0 18px;
+  font-family: var(--ks-font-display);
+  font-weight: 100;
+  font-size: clamp(3rem, 6vw, 5.2rem);
+  line-height: 1.02;
+  letter-spacing: -0.01em;
+  color: var(--ks-kinpaku);
+  text-wrap: balance;
+}
+
+html.light .dcx-title { color: var(--ks-champagne); }
+
+.dcx-lede {
+  margin: 0;
+  max-width: 56ch;
+  font-size: 1.08rem;
+  line-height: 1.65;
+  color: var(--ks-text);
+}
+
+.dcx-block { margin-top: clamp(34px, 5vw, 52px); }
+
+.dcx-block-label {
+  display: block;
+  font-family: var(--ks-mono);
+  font-size: 0.68rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--ks-text-faint);
+  margin-bottom: 14px;
+}
+
+/* Definition rows: term + description. */
+.dcx-defs { border-top: 1px solid var(--ks-rule); }
+
+.dcx-def {
+  display: grid;
+  grid-template-columns: minmax(180px, 0.44fr) minmax(0, 1fr);
+  gap: 6px 26px;
+  align-items: baseline;
+  padding: 15px 0;
+  border-bottom: 1px solid var(--ks-rule);
+}
+
+.dcx-def dt {
+  margin: 0;
+  font-size: 0.98rem;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--ks-champagne);
+}
+
+.dcx-def dd {
+  margin: 0;
+  font-size: 0.92rem;
+  line-height: 1.55;
+  color: var(--ks-text-muted);
+}
+
+/* Chips. */
+.dcx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
+
+.dcx-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 13px;
+  border: 1px solid var(--accent-line);
+  border-radius: 999px;
+  background: var(--accent-wash);
+  color: var(--accent-hover);
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+
+html.light .dcx-chip { color: var(--ks-patina-deep); }
+
+.dcx-chip--muted {
+  border-color: var(--ks-rule);
+  background: transparent;
+  color: var(--ks-text-muted);
+}
+
+/* Callout card (north star, named rules). */
+.dcx-callout {
+  padding: clamp(20px, 3vw, 30px);
+  border: 1px solid var(--ks-rule);
+  border-radius: 10px;
+  background: var(--panel-bg);
+}
+
+.dcx-callout + .dcx-callout { margin-top: 12px; }
+
+.dcx-callout-name {
+  margin: 0 0 8px;
+  font-size: 1.02rem;
+  font-weight: 600;
+  color: var(--ks-champagne);
+}
+
+.dcx-callout p:not(.dcx-callout-name) {
+  margin: 0;
+  font-size: 0.92rem;
+  line-height: 1.6;
+  color: var(--ks-text-muted);
+}
+
+.dcx-callout--accent { border-color: var(--accent-line); background: var(--accent-wash); }
+
+/* Numbered principle list. */
+.dcx-principles {
+  list-style: none;
+  counter-reset: principle;
+  margin: 0;
+  padding: 0;
+  border-top: 1px solid var(--ks-rule);
+}
+
+.dcx-principles li {
+  counter-increment: principle;
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr);
+  gap: 20px;
+  align-items: baseline;
+  padding: 14px 0;
+  border-bottom: 1px solid var(--ks-rule);
+  font-size: 0.94rem;
+  line-height: 1.55;
+  color: var(--ks-text-muted);
+}
+
+.dcx-principles li::before {
+  content: counter(principle, decimal-leading-zero);
+  font-family: var(--ks-mono);
+  font-size: 0.78rem;
+  color: var(--accent);
+}
+
+.dcx-principles strong { color: var(--ks-champagne); font-weight: 600; }
+
+/* Plain bullet list. */
+.dcx-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 9px;
+}
+
+.dcx-list li {
+  position: relative;
+  padding-left: 20px;
+  font-size: 0.94rem;
+  line-height: 1.55;
+  color: var(--ks-text-muted);
+}
+
+.dcx-list li::before {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 0.62em;
+  width: 7px;
+  height: 1.5px;
+  background: var(--accent);
+}
+
+.dcx-list strong { color: var(--ks-champagne); font-weight: 600; }
+
+/* Swatch fan (Color) — hover fans up, click copies. */
+.dcx-fan {
+  position: relative;
+  height: clamp(150px, 16vw, 195px);
+  overflow: hidden;
+  isolation: isolate;
+  border-radius: 10px 10px 0 0;
+}
+
+.dcx-fan::after {
+  content: "";
+  position: absolute;
+  left: 0; right: 0; bottom: 0;
+  z-index: 30;
+  height: 1px;
+  background: var(--ks-rule);
+  pointer-events: none;
+}
+
+.dcx-fan-panel {
+  position: absolute;
+  inset-block: 0;
+  left: var(--panel-left);
+  z-index: var(--panel-z);
+  width: var(--panel-width, 40%);
+  border: 0;
+  border-radius: 22px 22px 0 0;
+  padding: 0;
+  background: var(--panel-swatch);
+  box-shadow: inset 0 0 0 1px oklch(78% 0 0 / 0.14);
+  color: var(--panel-ink);
+  cursor: copy;
+  text-align: left;
+  transform: translate3d(0, 58%, 0);
+  transform-origin: 50% 100%;
+  transition:
+    transform 740ms cubic-bezier(0.16, 1, 0.3, 1),
+    filter 460ms cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform;
+  backface-visibility: hidden;
+}
+
+.dcx-fan.is-engaged .dcx-fan-panel { transform: translate3d(0, 54%, 0); }
+.dcx-fan.is-engaged .dcx-fan-panel.is-neighbor { transform: translate3d(0, 48%, 0); }
+
+.dcx-fan.is-engaged .dcx-fan-panel.is-active,
+.dcx-fan-panel:focus-visible,
+.dcx-fan-panel.is-copied {
+  outline: none;
+  filter: saturate(1.04);
+  transform: translate3d(0, 10%, 0) rotate(-0.48deg);
+}
+
+.dcx-fan-info {
+  position: absolute;
+  top: clamp(20px, 2.6vw, 34px);
+  left: clamp(20px, 2.6vw, 34px);
+  right: clamp(20px, 2.6vw, 34px);
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 14px;
+  opacity: 0;
+  transform: translateY(10px);
+  transition: opacity 320ms var(--ks-ease), transform 420ms var(--ks-ease);
+  pointer-events: none;
+}
+
+.dcx-fan-panel.is-active .dcx-fan-info,
+.dcx-fan-panel:focus-visible .dcx-fan-info,
+.dcx-fan-panel.is-copied .dcx-fan-info { opacity: 1; transform: translateY(0); }
+
+.dcx-fan-name {
+  margin: 0;
+  font-family: var(--ks-font);
+  font-size: clamp(0.95rem, 1.6vw, 1.3rem);
+  font-weight: 700;
+  line-height: 1.1;
+  white-space: nowrap;
+}
+
+.dcx-fan-value {
+  margin: 0;
+  flex: 0 0 auto;
+  font-family: var(--ks-mono);
+  font-size: clamp(0.6rem, 1vw, 0.72rem);
+  letter-spacing: 0.04em;
+  opacity: 0.82;
+}
+
+.dcx-fan-note {
+  margin: 10px 0 0;
+  font-size: 0.8rem;
+  color: var(--ks-text-faint);
+}
+
+/* Type specimen (Typography) — set in the project's real faces. */
+.dcx-specimen {
+  display: grid;
+  gap: 18px;
+  padding: clamp(24px, 3.4vw, 40px);
+  border: 1px solid var(--ks-rule);
+  border-radius: 10px;
+  background: var(--panel-bg);
+}
+
+.dcx-specimen-display {
+  margin: 0;
+  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
+  font-weight: 400;
+  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
+  line-height: 1.15;
+  color: var(--ks-champagne);
+  text-wrap: balance;
+}
+
+.dcx-specimen-body {
+  margin: 0;
+  max-width: 62ch;
+  font-family: "Source Sans 3", system-ui, sans-serif;
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--ks-text-muted);
+}
+
+.dcx-specimen-label {
+  margin: 0;
+  font-family: "Source Sans 3", system-ui, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--ks-text-faint);
+}
+
+/* Radius samples (Material). */
+.dcx-radius-row { display: flex; flex-wrap: wrap; gap: 18px; }
+
+.dcx-radius-sample { display: grid; gap: 8px; justify-items: center; }
+
+.dcx-radius-box {
+  width: 76px;
+  height: 76px;
+  border: 1.5px solid var(--accent-line);
+  background: var(--accent-wash);
+}
+
+.dcx-radius-caption {
+  font-family: var(--ks-mono);
+  font-size: 0.68rem;
+  color: var(--ks-text-muted);
+}
+
+/* Spacing scale bars (Material). */
+.dcx-space-rows { display: grid; gap: 8px; }
+
+.dcx-space-row {
+  display: grid;
+  grid-template-columns: 74px minmax(0, 1fr) 84px;
+  align-items: center;
+  gap: 14px;
+}
+
+.dcx-space-name,
+.dcx-space-value {
+  font-family: var(--ks-mono);
+  font-size: 0.7rem;
+  color: var(--ks-text-muted);
+}
+
+.dcx-space-value { text-align: right; color: var(--ks-text-faint); }
+
+.dcx-space-bar {
+  height: 12px;
+  width: var(--bar, 20%);
+  min-width: 6px;
+  border-radius: 3px;
+  background: var(--accent-wash);
+  border: 1px solid var(--accent-line);
+}
+
+/* Empty state (Iconography). */
+.dcx-empty {
+  padding: clamp(26px, 4vw, 40px);
+  border: 1px dashed var(--ks-rule);
+  border-radius: 10px;
+  text-align: left;
+}
+
+.dcx-empty-title {
+  margin: 0 0 8px;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--ks-champagne);
+}
+
+.dcx-empty p:not(.dcx-empty-title) {
+  margin: 0;
+  font-size: 0.92rem;
+  line-height: 1.6;
+  color: var(--ks-text-muted);
+}
+
+/* ============================================================
+   Responsive fallback
+   ============================================================ */
+@media (max-width: 920px) {
+  .dcx-shell { padding: 10px; }
+
+  .dcx-grid {
+    height: auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .dcx-tile {
+    grid-column: auto;
+    grid-row: auto;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-rows: auto;
+    align-items: center;
+    align-content: center;
+    gap: 16px;
+    min-height: clamp(72px, 9svh, 104px);
+    padding: 16px 20px;
+  }
+
+  /* Compact row: title left, small vignette right. */
+  .dcx-tile-viz { width: 44px; height: 44px; }
+
+  .dcx-tile-title,
+  .dcx-tile--typography .dcx-tile-title,
+  .dcx-tile--iconography .dcx-tile-title {
+    font-size: clamp(1.9rem, 8vw, 2.6rem);
+  }
+
+  .dcx-tile--product     { order: 1; }
+  .dcx-tile--audience    { order: 2; }
+  .dcx-tile--brand       { order: 3; }
+  .dcx-tile--color       { order: 4; }
+  .dcx-tile--typography  { order: 5; }
+  .dcx-tile--iconography { order: 6; }
+  .dcx-tile--material    { order: 7; }
+  .dcx-tile--interface   { order: 8; }
+
+  .dcx-badge { display: none; }
+
+  .dcx-expander-inner {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+
+  .dcx-sidebar {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+    gap: 12px;
+    padding: 10px 12px;
+    border-right: 0;
+    border-bottom: 1px solid var(--ks-rule);
+    overflow: hidden;
+  }
+
+  .dcx-sidebar-brand { margin: 0; }
+  .dcx-sidebar-brand-name { display: none; }
+  .dcx-nav-label { display: none; }
+
+  .dcx-nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
+  .dcx-nav::-webkit-scrollbar { display: none; }
+  .dcx-nav-list { display: flex; gap: 4px; }
+
+  .dcx-nav-link {
+    width: auto;
+    padding: 8px 10px;
+    border-left: 0;
+    border-bottom: 2px solid transparent;
+    white-space: nowrap;
+  }
+
+  .dcx-nav-link[aria-current="page"] {
+    border-left-color: transparent;
+    border-bottom-color: var(--accent);
+  }
+
+  .dcx-nav-list li.is-active .dcx-subnav { display: none; }
+
+  .dcx-panel { grid-template-rows: 56px minmax(0, 1fr); }
+  .dcx-topbar { padding: 0 16px; }
+  .dcx-article { padding: 30px 18px 84px; }
+
+  .dcx-def { grid-template-columns: 1fr; gap: 4px; }
+
+  .dcx-fan { height: 210px; }
+
+  .dcx-fan-info {
+    top: 18px; left: 16px; right: 16px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  .dcx-space-row { grid-template-columns: 58px minmax(0, 1fr) 70px; }
+}
+
+/* ============================================================
+   Reduced motion
+   ============================================================ */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    transition-delay: 0ms !important;
+  }
+
+  .dcx-tile[data-reveal],
+  .dcx-badge[data-reveal] {
+    opacity: 1;
+    transform: none;
+  }
+}
+</style>
+</head>
+<body>
+
+<header class="site-header" data-site-header data-nav-open="false">
+  <a href="https://impeccable.style/" class="site-header-brand" target="_blank" rel="noopener" aria-label="Impeccable home (opens the live site)">
+    <span class="site-header-brand-logo" aria-hidden="true">
+      <svg viewBox="0 0 24 24" fill="currentColor">
+        <path d="M5 2.5 L13.5 2.5 L5.5 21.5 L5 21.5 Q2.5 21.5 2.5 19 L2.5 5 Q2.5 2.5 5 2.5 Z"/>
+        <path d="M16.5 2.5 L19 2.5 Q21.5 2.5 21.5 5 L21.5 19 Q21.5 21.5 19 21.5 L8.5 21.5 Z"/>
+      </svg>
+    </span>
+    <span class="site-header-brand-name">Impeccable</span>
+  </a>
+  <button
+    type="button"
+    class="site-header-menu"
+    aria-label="Toggle navigation"
+    aria-expanded="false"
+    aria-controls="site-header-nav-panel"
+    data-site-header-menu
+  >
+    <span class="site-header-menu-line" aria-hidden="true"></span>
+    <span class="site-header-menu-line" aria-hidden="true"></span>
+  </button>
+  <div class="site-header-right" id="site-header-nav-panel">
+    <nav class="site-header-nav" aria-label="Primary">
+      <a href="https://impeccable.style/designing" data-nav="designing" target="_blank" rel="noopener">Designing</a>
+      <a href="https://impeccable.style/docs" data-nav="docs" target="_blank" rel="noopener">Docs</a>
+      <a href="https://impeccable.style/slop" data-nav="slop" target="_blank" rel="noopener">Slop</a>
+      <a href="https://impeccable.style/live-mode" data-nav="live" target="_blank" rel="noopener">Live</a>
+    </nav>
+    <button
+      type="button"
+      class="theme-toggle"
+      data-theme-toggle
+      aria-label="Theme: auto, matching your system. Click to switch to light mode."
+      title="Theme: auto (matches system)"
+    >
+      <svg class="theme-toggle-icon--auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
+        <circle cx="12" cy="12" r="9"/>
+        <path d="M12 3a9 9 0 0 1 0 18z" fill="currentColor" stroke="none"/>
+      </svg>
+      <svg class="theme-toggle-icon--light" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
+        <circle cx="12" cy="12" r="4.5"/>
+        <path d="M12 2v2M12 20v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M2 12h2M20 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
+      </svg>
+      <svg class="theme-toggle-icon--dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
+        <path d="M21 14.5A8.5 8.5 0 0 1 9.5 3a7 7 0 1 0 11.5 11.5z"/>
+      </svg>
+    </button>
+  </div>
+</header>
+
+<main>
+  <h1 class="visually-hidden">Design context — Hanazono Atelier</h1>
+
+  <section class="dcx-shell" aria-label="Design context categories">
+    <div class="dcx-grid">
+
+      <div class="dcx-badge" data-reveal style="--reveal-delay: 0.45s" aria-hidden="true">
+        <svg viewBox="0 0 24 24" focusable="false">
+          <path d="M5 2.5 L13.5 2.5 L5.5 21.5 L5 21.5 Q2.5 21.5 2.5 19 L2.5 5 Q2.5 2.5 5 2.5 Z"/>
+          <path d="M16.5 2.5 L19 2.5 Q21.5 2.5 21.5 5 L21.5 19 Q21.5 21.5 19 21.5 L8.5 21.5 Z"/>
+        </svg>
+      </div>
+
+      <button class="dcx-tile dcx-tile--audience" type="button" data-category="audience" data-name="Audience" data-reveal style="--reveal-delay: 0s" aria-label="Open Audience">
+        <span class="dcx-tile-viz" aria-hidden="true">
+          <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="dcx-viz-svg">
+            <circle cx="15" cy="14" r="4" stroke="var(--viz-ink)" class="vz-stroke" vector-effect="non-scaling-stroke"/>
+            <path d="M7 30c0-5 3.6-8 8-8s8 3 8 8" stroke="var(--viz-ink)" stroke-linecap="round" class="vz-stroke" vector-effect="non-scaling-stroke"/>
+            <g class="anim-join">
+              <circle cx="28" cy="16" r="3.4" stroke="var(--viz-accent)" class="vz-stroke" vector-effect="non-scaling-stroke"/>
+              <path d="M21.5 30c0-4.4 3-7 6.5-7s6.5 2.6 6.5 7" stroke="var(--viz-accent)" stroke-linecap="round" class="anim-draw vz-stroke" vector-effect="non-scaling-stroke"/>
+            </g>
+          </svg>
+        </span>
+        <h2 class="dcx-tile-title">Audience</h2>
+      </button>
+
+      <button class="dcx-tile dcx-tile--product" type="button" data-category="product" data-name="Product" data-reveal style="--reveal-delay: 0.05s" aria-label="Open Product">
+        <span class="dcx-tile-viz" aria-hidden="true">
+          <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="dcx-viz-svg">
+            <line x1="8" y1="13" x2="26" y2="13" stroke="var(--viz-ink)" stroke-linecap="round" class="vz-stroke" vector-effect="non-scaling-stroke"/>
+            <line x1="8" y1="19" x2="30" y2="19" stroke="var(--viz-mist)" stroke-linecap="round" class="vz-stroke" vector-effect="non-scaling-stroke"/>
+            <line x1="8" y1="25" x2="22" y2="25" stroke="var(--viz-accent)" stroke-linecap="round" class="vz-stroke" vector-effect="non-scaling-stroke"/>
+            <line x1="26" y1="23" x2="26" y2="27" stroke="var(--viz-accent)" class="anim-blink vz-stroke" vector-effect="non-scaling-stroke"/>
+          </svg>
+        </span>
+        <h2 class="dcx-tile-title">Product</h2>
+      </button>
+
+      <button class="dcx-tile dcx-tile--brand" type="button" data-category="brand" data-name="Brand" data-reveal style="--reveal-delay: 0.1s" aria-label="Open Brand">
+        <span class="dcx-tile-viz" aria-hidden="true">
+          <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="dcx-viz-svg">
+            <path d="M6 17 L34 17" stroke="var(--viz-mist)" class="vz-ghost" vector-effect="non-scaling-stroke"/>
+            <path d="M12 10 L16 17 L20 33 M28 10 L24 17 L20 33" stroke="var(--viz-mist)" stroke-linejoin="round" class="vz-ghost" vector-effect="non-scaling-stroke"/>
+            <path d="M12 10 L28 10 L34 17 L20 33 L6 17 Z" stroke="var(--viz-accent)" stroke-linejoin="round" class="anim-draw vz-stroke" vector-effect="non-scaling-stroke"/>
+            <circle cx="20" cy="13.5" r="1.4" fill="var(--viz-accent)" class="anim-fade-in"/>
+          </svg>
+        </span>
+        <h2 class="dcx-tile-title">Brand</h2>
+      </button>
+
+      <button class="dcx-tile dcx-tile--color" type="button" data-category="color" data-name="Color" data-reveal style="--reveal-delay: 0.15s" aria-label="Open Color">
+        <span class="dcx-tile-viz" aria-hidden="true">
+          <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="dcx-viz-svg">
+            <circle cx="16" cy="20" r="8" stroke="var(--viz-ink)" class="anim-move-x vz-stroke" vector-effect="non-scaling-stroke"/>
+            <circle cx="24" cy="20" r="8" stroke="var(--viz-accent)" class="anim-move-x-opp anim-join vz-stroke" vector-effect="non-scaling-stroke"/>
+            <path d="M20 14.5C21.5 16 22.5 18 22.5 20C22.5 22 21.5 24 20 25.5C18.5 24 17.5 22 17.5 20C17.5 18 18.5 16 20 14.5Z" fill="var(--viz-accent)" class="anim-fade-in"/>
+          </svg>
+        </span>
+        <h2 class="dcx-tile-title">Color</h2>
+      </button>
+
+      <button class="dcx-tile dcx-tile--typography" type="button" data-category="typography" data-name="Typography" data-reveal style="--reveal-delay: 0.2s" aria-label="Open Typography">
+        <span class="dcx-tile-viz" aria-hidden="true">
+          <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="dcx-viz-svg">
+            <path d="M10 30L20 10L30 30" stroke="var(--viz-mist)" stroke-linecap="round" stroke-linejoin="round" class="vz-ghost" vector-effect="non-scaling-stroke"/>
+            <path d="M10 30L20 10L30 30" stroke="var(--viz-accent)" stroke-linecap="round" stroke-linejoin="round" class="anim-draw vz-stroke" vector-effect="non-scaling-stroke"/>
+            <path d="M15 22H25" stroke="var(--viz-accent)" stroke-linecap="round" class="anim-draw-delay vz-stroke" vector-effect="non-scaling-stroke"/>
+          </svg>
+        </span>
+        <h2 class="dcx-tile-title">Typography</h2>
+      </button>
+
+      <button class="dcx-tile dcx-tile--iconography" type="button" data-category="iconography" data-name="Iconography" data-reveal style="--reveal-delay: 0.25s" aria-label="Open Iconography">
+        <span class="dcx-tile-viz" aria-hidden="true">
+          <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="dcx-viz-svg">
+            <circle cx="14" cy="14" r="4.5" stroke="var(--viz-ink)" class="anim-pop anim-pop-1 vz-stroke" vector-effect="non-scaling-stroke"/>
+            <rect x="22" y="9.5" width="9" height="9" rx="1.5" stroke="var(--viz-ink)" class="anim-pop anim-pop-2 vz-stroke" vector-effect="non-scaling-stroke"/>
+            <path d="M14 22.5L18.5 30.5H9.5L14 22.5Z" stroke="var(--viz-ink)" stroke-linejoin="round" class="anim-pop anim-pop-3 vz-stroke" vector-effect="non-scaling-stroke"/>
+            <path d="M26.5 22.5V30.5M22.5 26.5H30.5" stroke="var(--viz-accent)" stroke-linecap="round" class="anim-pop anim-pop-4 vz-stroke" vector-effect="non-scaling-stroke"/>
+          </svg>
+        </span>
+        <h2 class="dcx-tile-title">Iconography</h2>
+      </button>
+
+      <button class="dcx-tile dcx-tile--material" type="button" data-category="material" data-name="Material" data-reveal style="--reveal-delay: 0.3s" aria-label="Open Material">
+        <span class="dcx-tile-viz" aria-hidden="true">
+          <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="dcx-viz-svg">
+            <rect x="5" y="10" width="30" height="18.5" stroke="var(--viz-mist)" class="vz-ghost" vector-effect="non-scaling-stroke"/>
+            <line x1="23.5" y1="10" x2="23.5" y2="28.5" stroke="var(--viz-mist)" class="vz-ghost" vector-effect="non-scaling-stroke"/>
+            <line x1="23.5" y1="21.5" x2="35" y2="21.5" stroke="var(--viz-mist)" class="vz-ghost" vector-effect="non-scaling-stroke"/>
+            <path d="M5 28.5C5 18.28 13.28 10 23.5 10C29.85 10 35 15.15 35 21.5C35 25.42 31.82 28.5 27.9 28.5" fill="none" stroke="var(--viz-accent)" stroke-linecap="round" class="anim-draw vz-stroke" vector-effect="non-scaling-stroke"/>
+          </svg>
+        </span>
+        <h2 class="dcx-tile-title">Material</h2>
+      </button>
+
+      <button class="dcx-tile dcx-tile--interface" type="button" data-category="interface" data-name="Interface" data-reveal style="--reveal-delay: 0.35s" aria-label="Open Interface">
+        <span class="dcx-tile-viz" aria-hidden="true">
+          <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="dcx-viz-svg">
+            <rect x="10" y="14" width="20" height="12" rx="6" stroke="var(--viz-ink)" class="vz-stroke" vector-effect="non-scaling-stroke"/>
+            <circle cx="16" cy="20" r="4" fill="var(--viz-mist)" class="anim-toggle-move"/>
+          </svg>
+        </span>
+        <h2 class="dcx-tile-title">Interface</h2>
+      </button>
+
+    </div>
+  </section>
+</main>
+
+<!-- ==========================================================
+     Category articles — real data from the Hanazono Atelier
+     example project (PRODUCT.md + DESIGN.md), structured by the
+     per-category section lists in CONTENTS.md.
+     ========================================================== -->
+
+<template id="dcx-detail-audience">
+  <article class="dcx-article">
+    <header>
+      <span class="dcx-eyebrow">Design context &middot; 01 / 08 &middot; Hanazono Atelier</span>
+      <h2 class="dcx-title">Audience</h2>
+      <p class="dcx-lede">Who it is for, emotional state, needs, trust triggers.</p>
+    </header>
+
+    <div class="dcx-block" data-label="Who they are">
+      <span class="dcx-block-label">Who they are</span>
+      <dl class="dcx-defs">
+        <div class="dcx-def">
+          <dt>Primary (next 6 months)</dt>
+          <dd>Wedding planners sourcing ceremony florals for discerning clients. They arrive with a brief already formed and need proof of craft, a clear seasonal point of view, and a fast path to book a consultation before their client meeting.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>Secondary</dt>
+          <dd>Couples commissioning ceremony florals directly; corporate hospitality teams and office managers evaluating gifting or subscription programs.</dd>
+        </div>
+      </dl>
+    </div>
+
+    <div class="dcx-block" data-label="Emotional state">
+      <span class="dcx-block-label">Emotional state</span>
+      <div class="dcx-callout dcx-callout--accent">
+        <p class="dcx-callout-name">Quiet authority</p>
+        <p>All commissioners arrive with intent, not casual browsing. The landing experience should read as calm proof of craft rather than persuasion: one hero arrangement per viewport, copy that doesn't oversell.</p>
+      </div>
+    </div>
+
+    <div class="dcx-block" data-label="Needs">
+      <span class="dcx-block-label">Needs</span>
+      <ul class="dcx-list">
+        <li><strong>Proof of craft</strong> before they will put the atelier in front of a client.</li>
+        <li><strong>A clear seasonal point of view</strong> that distinguishes the atelier from directory florists.</li>
+        <li><strong>A fast path to book a consultation</strong>, often before their own client meeting.</li>
+      </ul>
+    </div>
+
+    <div class="dcx-block" data-label="Trust triggers">
+      <span class="dcx-block-label">Trust triggers</span>
+      <ul class="dcx-list">
+        <li><strong>Partner quotes</strong> from planners and past commissions.</li>
+        <li><strong>Seasonal POV</strong> expressed as a disciplined editorial stance, not a portfolio dump.</li>
+        <li><strong>Studio story</strong> that establishes the Tokyo atelier credential in person-referral conversations.</li>
+      </ul>
+    </div>
+  </article>
+</template>
+
+<template id="dcx-detail-product">
+  <article class="dcx-article">
+    <header>
+      <span class="dcx-eyebrow">Design context &middot; 02 / 08 &middot; Hanazono Atelier</span>
+      <h2 class="dcx-title">Product</h2>
+      <p class="dcx-lede">Purpose, differentiator, proof points, use cases, what must be clear first.</p>
+    </header>
+
+    <div class="dcx-block" data-label="Purpose">
+      <span class="dcx-block-label">Purpose</span>
+      <div class="dcx-callout">
+        <p class="dcx-callout-name">Hanazono Atelier <span class="dcx-chip dcx-chip--muted" style="margin-left:10px; font-size:0.72rem; padding:3px 10px;">register: brand</span></p>
+        <p>Marketing site for a boutique Tokyo flower atelier. Communicate craft, seasonal restraint, and three commission lanes. The visual experience sells the atelier.</p>
+      </div>
+    </div>
+
+    <div class="dcx-block" data-label="Conversion">
+      <span class="dcx-block-label">Conversion</span>
+      <dl class="dcx-defs">
+        <div class="dcx-def">
+          <dt>Primary conversion</dt>
+          <dd>Book a consultation. The booking path stays obvious without urgency gimmicks, price grids, or package upsell scaffolding.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>Success definition</dt>
+          <dd>8&ndash;12 qualified consultation requests per month from planners and corporate buyers combined; at least half convert to a paid commission within 90 days. Brand credibility for in-person referrals matters as much as direct bookings.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>What must be clear first</dt>
+          <dd>Proof before pitch: planners need credible signals (partner quotes, seasonal POV, studio story) before they will book.</dd>
+        </div>
+      </dl>
+    </div>
+
+    <div class="dcx-block" data-label="Use cases">
+      <span class="dcx-block-label">Use cases</span>
+      <dl class="dcx-defs">
+        <div class="dcx-def">
+          <dt>Weddings</dt>
+          <dd>Ceremony florals commissioned through planners or directly by couples; the flagship lane.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>Corporate gifting</dt>
+          <dd>Hospitality teams and office managers commissioning seasonal gifting programs.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>Subscriptions</dt>
+          <dd>Recurring arrangements for offices and hospitality spaces, evaluated by the same corporate buyers.</dd>
+        </div>
+      </dl>
+    </div>
+  </article>
+</template>
+
+<template id="dcx-detail-brand">
+  <article class="dcx-article">
+    <header>
+      <span class="dcx-eyebrow">Design context &middot; 03 / 08 &middot; Hanazono Atelier</span>
+      <h2 class="dcx-title">Brand</h2>
+      <p class="dcx-lede">Identity, voice, tone, cues, taste boundaries, anti-references.</p>
+    </header>
+
+    <div class="dcx-block" data-label="Creative North Star">
+      <span class="dcx-block-label">Creative North Star</span>
+      <div class="dcx-callout dcx-callout--accent">
+        <p class="dcx-callout-name">&ldquo;The Specimen Gallery&rdquo;</p>
+        <p>A commission-first visual system that treats each page like a museum craft gallery: one object per viewport, bilingual hierarchy, specimen metadata in mono, and captions that never compete with the work. Warm mechanical opinion shows up as disciplined spacing and label codes, not decoration.</p>
+      </div>
+    </div>
+
+    <div class="dcx-block" data-label="Personality &amp; voice">
+      <span class="dcx-block-label">Personality &amp; voice</span>
+      <div class="dcx-chips" style="margin-bottom:14px;">
+        <span class="dcx-chip">Warm</span>
+        <span class="dcx-chip">Mechanical</span>
+        <span class="dcx-chip">Opinionated</span>
+      </div>
+      <p style="margin:0; font-size:0.94rem; line-height:1.6; color:var(--ks-text-muted);">Seasonal craft with editorial restraint. Tokyo atelier, not Pinterest floristry.</p>
+    </div>
+
+    <div class="dcx-block" data-label="References">
+      <span class="dcx-block-label">References (specific steals)</span>
+      <dl class="dcx-defs">
+        <div class="dcx-def">
+          <dt>Studio Mondine</dt>
+          <dd>Commission-gallery pacing: one hero arrangement per viewport, no thumbnail clutter.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>Aesop</dt>
+          <dd>Product-page restraint: generous whitespace, one focal image, copy that doesn't oversell.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>Ikenobo Tokyo exhibitions</dt>
+          <dd>Seasonal asymmetry and disciplined negative space; not Instagram-perfect symmetry.</dd>
+        </div>
+      </dl>
+    </div>
+
+    <div class="dcx-block" data-label="Anti-references">
+      <span class="dcx-block-label">Anti-references</span>
+      <ul class="dcx-list">
+        <li><strong>The Knot / WeddingWire directory style</strong>: stock rose photos, price tables, &ldquo;packages from $X&rdquo; grids.</li>
+        <li><strong>Canva wedding mood-board aesthetic</strong>: blush-to-gold gradients, script fonts on every heading, floating petal PNG overlays.</li>
+        <li><strong>Squarespace &ldquo;Flora&rdquo; theme family</strong>: identical three-column service cards with leaf icons.</li>
+        <li><strong>Pinterest-pastel monoculture</strong>: identical card grids with icon + heading + blurb; italic display serif + mono labels on every section.</li>
+      </ul>
+    </div>
+
+    <div class="dcx-block" data-label="Design principles">
+      <span class="dcx-block-label">Design principles</span>
+      <ol class="dcx-principles">
+        <li><strong>One focal point per viewport</strong> &mdash; gallery pacing over thumbnail clutter; let a single arrangement or proof moment carry the screen.</li>
+        <li><strong>Restraint is the sell</strong> &mdash; generous whitespace, copy that doesn't oversell; Aesop-level discipline on every lane page.</li>
+        <li><strong>Seasonal asymmetry, not Instagram symmetry</strong> &mdash; compose like an exhibition, not a mood board; negative space is part of the craft.</li>
+        <li><strong>Proof before pitch</strong> &mdash; planners need credible signals before they will book.</li>
+        <li><strong>Earn the consultation</strong> &mdash; make the booking path obvious without urgency gimmicks.</li>
+      </ol>
+    </div>
+  </article>
+</template>
+
+<template id="dcx-detail-color">
+  <article class="dcx-article">
+    <header>
+      <span class="dcx-eyebrow">Design context &middot; 04 / 08 &middot; Hanazono Atelier</span>
+      <h2 class="dcx-title">Color</h2>
+      <p class="dcx-lede">Palette, roles, tints, strategy, copyable values.</p>
+    </header>
+
+    <div class="dcx-block" data-label="Palette">
+      <span class="dcx-block-label">Palette</span>
+      <div class="dcx-fan" role="group" aria-label="Hanazono palette, click a panel to copy its value">
+        <button class="dcx-fan-panel" type="button" data-copy-color="#faf6f0" data-color-name="Warm Cream"
+          style="--panel-left:0%; --panel-z:1; --panel-swatch:#faf6f0; --panel-ink:#2a2118;" aria-label="Copy Warm Cream #faf6f0">
+          <span class="dcx-fan-info"><span class="dcx-fan-name">Warm Cream</span><span class="dcx-fan-value">#faf6f0</span></span>
+        </button>
+        <button class="dcx-fan-panel" type="button" data-copy-color="#a66b88" data-color-name="Plum Muted"
+          style="--panel-left:20%; --panel-z:2; --panel-swatch:#a66b88; --panel-ink:#faf6f0;" aria-label="Copy Plum Muted #a66b88">
+          <span class="dcx-fan-info"><span class="dcx-fan-name">Plum Muted</span><span class="dcx-fan-value">#a66b88</span></span>
+        </button>
+        <button class="dcx-fan-panel" type="button" data-copy-color="#8b4a6b" data-color-name="Muted Plum"
+          style="--panel-left:40%; --panel-z:3; --panel-swatch:#8b4a6b; --panel-ink:#faf6f0;" aria-label="Copy Muted Plum #8b4a6b">
+          <span class="dcx-fan-info"><span class="dcx-fan-name">Muted Plum</span><span class="dcx-fan-value">#8b4a6b</span></span>
+        </button>
+        <button class="dcx-fan-panel" type="button" data-copy-color="#2a2118" data-color-name="Umber Ink"
+          style="--panel-left:60%; --panel-z:4; --panel-swatch:#2a2118; --panel-ink:#faf6f0;" aria-label="Copy Umber Ink #2a2118">
+          <span class="dcx-fan-info"><span class="dcx-fan-name">Umber Ink</span><span class="dcx-fan-value">#2a2118</span></span>
+        </button>
+      </div>
+      <p class="dcx-fan-note">From the <code>colors:</code> frontmatter of DESIGN.md. Hover to fan; click to copy the hex.</p>
+    </div>
+
+    <div class="dcx-block" data-label="Roles">
+      <span class="dcx-block-label">Roles</span>
+      <dl class="dcx-defs">
+        <div class="dcx-def">
+          <dt>Muted Plum <code>#8b4a6b</code></dt>
+          <dd>CTA fills, primary links, consultation path emphasis. Must pass 4.5:1 on cream for labels; darker hover state required.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>Deep Umber Ink <code>#2a2118</code></dt>
+          <dd>Headlines, primary body text, filled primary button ground. The authoritative voice, not pure black.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>Seasonal Moss</dt>
+          <dd>Lane labels, season codes, commission metadata accents. Marks the seasonal point of view without becoming a second CTA color. Exact token to be resolved during implementation.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>Warm Cream Ground <code>#faf6f0</code></dt>
+          <dd>Page background, exhibition hall surface. Not Pinterest-pastel; a true warm ground with controlled chroma.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>Caption Charcoal</dt>
+          <dd>Figcaptions, secondary metadata, mono label text. Subordinate to umber ink; never competes with display headlines.</dd>
+        </div>
+      </dl>
+    </div>
+
+    <div class="dcx-block" data-label="Named rules">
+      <span class="dcx-block-label">Named rules</span>
+      <div class="dcx-callout">
+        <p class="dcx-callout-name">The No-Wash Rule</p>
+        <p>Backgrounds stay flat cream or tonal ink fills. Gradient washes, blush-to-gold transitions, and floating PNG petal overlays are prohibited.</p>
+      </div>
+      <div class="dcx-callout">
+        <p class="dcx-callout-name">The Accent Rarity Rule</p>
+        <p>Plum is for conversion and proof-path emphasis, not eyebrow decoration on every section. Moss is for seasonal lane identity, not a second hero accent.</p>
+      </div>
+    </div>
+  </article>
+</template>
+
+<template id="dcx-detail-typography">
+  <article class="dcx-article">
+    <header>
+      <span class="dcx-eyebrow">Design context &middot; 05 / 08 &middot; Hanazono Atelier</span>
+      <h2 class="dcx-title">Typography</h2>
+      <p class="dcx-lede">Font families, hierarchy, font scale, readability rules.</p>
+    </header>
+
+    <div class="dcx-block" data-label="Type sample">
+      <span class="dcx-block-label">Type sample</span>
+      <div class="dcx-specimen">
+        <p class="dcx-specimen-display">花園アトリエ &mdash; seasonal craft, quiet authority.</p>
+        <p class="dcx-specimen-body">Shippori Mincho carries the display voice: editorial warmth and Japanese headline authority, never faux-bolded. Source Sans 3 carries English body clarity at sixteen pixels and above, with captions that defer to the object.</p>
+        <p class="dcx-specimen-label">SPECIMEN 04 &middot; SEASON CODE SPRING</p>
+      </div>
+    </div>
+
+    <div class="dcx-block" data-label="Families">
+      <span class="dcx-block-label">Families</span>
+      <dl class="dcx-defs">
+        <div class="dcx-def">
+          <dt>Display</dt>
+          <dd>Shippori Mincho (fallbacks: Hiragino Mincho ProN, Yu Mincho, Georgia). Tokyo craft gallery meets specimen ledger.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>Body</dt>
+          <dd>Source Sans 3 (system-ui fallback). EN body clarity at &ge;16px.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>Label / mono</dt>
+          <dd>Narrow mono for specimen labels, season codes, commission metadata only; never UI chrome.</dd>
+        </div>
+      </dl>
+    </div>
+
+    <div class="dcx-block" data-label="Hierarchy">
+      <span class="dcx-block-label">Hierarchy</span>
+      <dl class="dcx-defs">
+        <div class="dcx-def">
+          <dt>Display</dt>
+          <dd><code>clamp(2.75rem, 3.5vw + 1.25rem, 4.5rem)</code> &middot; weight 400 &middot; line-height 1.15. Hero headlines, one per viewport; max width ~16ch with <code>text-wrap: balance</code>.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>Body</dt>
+          <dd><code>16px</code> &middot; weight 400 &middot; line-height 1.6. Max line length 65&ndash;75ch; <code>text-wrap: pretty</code> on long prose.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>Label</dt>
+          <dd><code>14px</code> &middot; weight 600 &middot; line-height 1.35. Season codes, kickers; uppercase only where the plum accent applies.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>Caption</dt>
+          <dd><code>12px</code> &middot; weight 400 &middot; line-height 1.6. Charcoal tone with generous leading, museum-signage style.</dd>
+        </div>
+      </dl>
+    </div>
+
+    <div class="dcx-block" data-label="Named rules">
+      <span class="dcx-block-label">Named rules</span>
+      <div class="dcx-callout">
+        <p class="dcx-callout-name">The Mono-Is-Metadata Rule</p>
+        <p>Mono appears on specimen labels, season codes, and commission metadata. Never on navigation chrome, never on every section eyebrow.</p>
+      </div>
+      <div class="dcx-callout">
+        <p class="dcx-callout-name">The Bilingual Hierarchy Rule</p>
+        <p>Japanese display lines use mincho; English body uses Source Sans 3. Both scripts read at &ge;16px body minimum. No faux-bold on mincho.</p>
+      </div>
+    </div>
+  </article>
+</template>
+
+<template id="dcx-detail-iconography">
+  <article class="dcx-article">
+    <header>
+      <span class="dcx-eyebrow">Design context &middot; 06 / 08 &middot; Hanazono Atelier</span>
+      <h2 class="dcx-title">Iconography</h2>
+      <p class="dcx-lede">Icon style, stroke weight, metaphor rules, allowed and forbidden icon types.</p>
+    </header>
+
+    <div class="dcx-block" data-label="Status">
+      <span class="dcx-block-label">Status</span>
+      <div class="dcx-empty">
+        <p class="dcx-empty-title">Nothing captured yet</p>
+        <p>Zero iconography mentions in PRODUCT.md, DESIGN.md, or the design.json sidecar for this project. Closest adjacent decision is a taste boundary, not an icon rule: no decorative floral motifs in UI chrome.</p>
+      </div>
+    </div>
+
+    <div class="dcx-block" data-label="Planned">
+      <span class="dcx-block-label">Planned (visual document seed)</span>
+      <p style="margin:0 0 14px; font-size:0.94rem; line-height:1.6; color:var(--ks-text-muted);">The upcoming seed flow asks the icon-library question directly, with named options:</p>
+      <div class="dcx-chips">
+        <span class="dcx-chip dcx-chip--muted">Lucide</span>
+        <span class="dcx-chip dcx-chip--muted">Tabler Icons</span>
+        <span class="dcx-chip dcx-chip--muted">Hugeicons</span>
+      </div>
+      <p class="dcx-fan-note">Library choice covers icon style only; stroke weight, metaphor rules, and icon-button behavior remain open fields.</p>
+    </div>
+  </article>
+</template>
+
+<template id="dcx-detail-material">
+  <article class="dcx-article">
+    <header>
+      <span class="dcx-eyebrow">Design context &middot; 07 / 08 &middot; Hanazono Atelier</span>
+      <h2 class="dcx-title">Material</h2>
+      <p class="dcx-lede">Radius, borders, shadows, elevation, surfaces, texture, motion feel.</p>
+    </header>
+
+    <div class="dcx-block" data-label="Radius">
+      <span class="dcx-block-label">Radius</span>
+      <div class="dcx-radius-row">
+        <div class="dcx-radius-sample">
+          <div class="dcx-radius-box" style="border-radius: 4px;"></div>
+          <span class="dcx-radius-caption">sm &middot; 4px</span>
+        </div>
+        <div class="dcx-radius-sample">
+          <div class="dcx-radius-box" style="border-radius: 8px;"></div>
+          <span class="dcx-radius-caption">md &middot; 8px</span>
+        </div>
+        <div class="dcx-radius-sample">
+          <div class="dcx-radius-box" style="border-radius: 16px;"></div>
+          <span class="dcx-radius-caption">lg &middot; 16px</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="dcx-block" data-label="Spacing scale">
+      <span class="dcx-block-label">Spacing scale</span>
+      <div class="dcx-space-rows">
+        <div class="dcx-space-row"><span class="dcx-space-name">2xs</span><span class="dcx-space-bar" style="--bar: 4%;"></span><span class="dcx-space-value">0.25rem</span></div>
+        <div class="dcx-space-row"><span class="dcx-space-name">xs</span><span class="dcx-space-bar" style="--bar: 8%;"></span><span class="dcx-space-value">0.5rem</span></div>
+        <div class="dcx-space-row"><span class="dcx-space-name">sm</span><span class="dcx-space-bar" style="--bar: 12%;"></span><span class="dcx-space-value">0.75rem</span></div>
+        <div class="dcx-space-row"><span class="dcx-space-name">md</span><span class="dcx-space-bar" style="--bar: 16%;"></span><span class="dcx-space-value">1rem</span></div>
+        <div class="dcx-space-row"><span class="dcx-space-name">lg</span><span class="dcx-space-bar" style="--bar: 24%;"></span><span class="dcx-space-value">1.5rem</span></div>
+        <div class="dcx-space-row"><span class="dcx-space-name">xl</span><span class="dcx-space-bar" style="--bar: 32%;"></span><span class="dcx-space-value">2rem</span></div>
+        <div class="dcx-space-row"><span class="dcx-space-name">2xl</span><span class="dcx-space-bar" style="--bar: 48%;"></span><span class="dcx-space-value">3rem</span></div>
+        <div class="dcx-space-row"><span class="dcx-space-name">3xl</span><span class="dcx-space-bar" style="--bar: 64%;"></span><span class="dcx-space-value">4rem</span></div>
+        <div class="dcx-space-row"><span class="dcx-space-name">gutter</span><span class="dcx-space-bar" style="--bar: 56%;"></span><span class="dcx-space-value">clamp(1.25&ndash;3.5rem)</span></div>
+        <div class="dcx-space-row"><span class="dcx-space-name">section</span><span class="dcx-space-bar" style="--bar: 88%;"></span><span class="dcx-space-value">clamp(3&ndash;5.5rem)</span></div>
+      </div>
+    </div>
+
+    <div class="dcx-block" data-label="Elevation &amp; surfaces">
+      <span class="dcx-block-label">Elevation &amp; surfaces</span>
+      <div class="dcx-callout">
+        <p class="dcx-callout-name">The Flat Exhibition Rule</p>
+        <p>Flat by default. Depth comes from tonal layering: cream ground, umber ink hierarchy, hairline rules at 8&ndash;12% opacity. Shadows are not part of the vocabulary; section separation uses spacing rhythm and 1px rules, not cards with drop shadows.</p>
+      </div>
+    </div>
+
+    <div class="dcx-block" data-label="Motion feel">
+      <span class="dcx-block-label">Motion feel</span>
+      <ul class="dcx-list">
+        <li><strong>Responsive motion only</strong>: hover and focus feedback; no scroll choreography, no auto-playing reveals.</li>
+        <li><strong>Subtle opacity shifts</strong> on hover/focus; no lift-and-glow card elevation.</li>
+        <li><strong><code>prefers-reduced-motion</code></strong> collapses transitions to instant state changes.</li>
+      </ul>
+    </div>
+  </article>
+</template>
+
+<template id="dcx-detail-interface">
+  <article class="dcx-article">
+    <header>
+      <span class="dcx-eyebrow">Design context &middot; 08 / 08 &middot; Hanazono Atelier</span>
+      <h2 class="dcx-title">Interface</h2>
+      <p class="dcx-lede">Buttons, inputs, cards, component states, interaction patterns, accessibility.</p>
+    </header>
+
+    <div class="dcx-block" data-label="Components">
+      <span class="dcx-block-label">Components</span>
+      <div class="dcx-empty" style="margin-bottom:18px;">
+        <p class="dcx-empty-title">No component library seeded yet</p>
+        <p>Components are documented on the first scan pass, once there's code to capture actual tokens and states from.</p>
+      </div>
+      <dl class="dcx-defs">
+        <div class="dcx-def">
+          <dt>Commission Lane</dt>
+          <dd>Signature component: a lane page hero pairing one arrangement with the seasonal POV and the booking path.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>Consultation Form</dt>
+          <dd>The conversion surface. Labels, error states, and focus order are screen-reader priorities.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>Gallery Grid</dt>
+          <dd>Exhibition pacing: one object per viewport, no thumbnail clutter grids.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>Proof Quote</dt>
+          <dd>Partner quotes with clear attribution order; the proof-before-pitch signal.</dd>
+        </div>
+      </dl>
+    </div>
+
+    <div class="dcx-block" data-label="Interaction states">
+      <span class="dcx-block-label">Interaction states</span>
+      <ul class="dcx-list">
+        <li><strong>Hover/focus feedback</strong> on every interactive element; instant state changes under reduced motion.</li>
+        <li><strong>Plum CTA hover</strong> requires a darker state that still passes 4.5:1 on cream.</li>
+        <li><strong>No decorative borders</strong>, glassmorphism, or side-stripe accents on cards or callouts.</li>
+      </ul>
+    </div>
+
+    <div class="dcx-block" data-label="Accessibility &amp; inclusion">
+      <span class="dcx-block-label">Accessibility &amp; inclusion</span>
+      <dl class="dcx-defs">
+        <div class="dcx-def">
+          <dt>Target</dt>
+          <dd>WCAG 2.2 AA on all public pages.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>Bilingual type</dt>
+          <dd>Japanese and English both at &ge;16px body; display mincho for JP headings, Source Sans 3 for EN body; no faux-bold on mincho.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>Contrast</dt>
+          <dd>Plum accent <code>#8b4a6b</code> must pass 4.5:1 on cream for links and CTA labels, with a darker hover state.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>Reduced motion</dt>
+          <dd>Respect <code>prefers-reduced-motion</code>; no auto-playing scroll reveals.</dd>
+        </div>
+        <div class="dcx-def">
+          <dt>Screen reader priority</dt>
+          <dd>Consultation form labels, error states, and proof-quote attribution order.</dd>
+        </div>
+      </dl>
+    </div>
+  </article>
+</template>
+
+<!-- Expander shell: sidebar + topbar + main, cloned per open. -->
+<template id="dcx-shell-template">
+  <div class="dcx-expander-inner">
+    <aside class="dcx-sidebar">
+      <a class="dcx-sidebar-brand" href="https://impeccable.style/" target="_blank" rel="noopener" aria-label="Impeccable home (opens the live site)">
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M5 2.5 L13.5 2.5 L5.5 21.5 L5 21.5 Q2.5 21.5 2.5 19 L2.5 5 Q2.5 2.5 5 2.5 Z"/>
+          <path d="M16.5 2.5 L19 2.5 Q21.5 2.5 21.5 5 L21.5 19 Q21.5 21.5 19 21.5 L8.5 21.5 Z"/>
+        </svg>
+        <span class="dcx-sidebar-brand-name">Impeccable</span>
+      </a>
+      <nav class="dcx-nav" aria-label="Design context categories">
+        <span class="dcx-nav-label">Design context</span>
+        <ul class="dcx-nav-list">
+          <li data-category="audience"><a class="dcx-nav-link" href="#audience" data-dcx-nav="audience">Audience</a><div class="dcx-subnav"></div></li>
+          <li data-category="product"><a class="dcx-nav-link" href="#product" data-dcx-nav="product">Product</a><div class="dcx-subnav"></div></li>
+          <li data-category="brand"><a class="dcx-nav-link" href="#brand" data-dcx-nav="brand">Brand</a><div class="dcx-subnav"></div></li>
+          <li data-category="color"><a class="dcx-nav-link" href="#color" data-dcx-nav="color">Color</a><div class="dcx-subnav"></div></li>
+          <li data-category="typography"><a class="dcx-nav-link" href="#typography" data-dcx-nav="typography">Typography</a><div class="dcx-subnav"></div></li>
+          <li data-category="iconography"><a class="dcx-nav-link" href="#iconography" data-dcx-nav="iconography">Iconography</a><div class="dcx-subnav"></div></li>
+          <li data-category="material"><a class="dcx-nav-link" href="#material" data-dcx-nav="material">Material</a><div class="dcx-subnav"></div></li>
+          <li data-category="interface"><a class="dcx-nav-link" href="#interface" data-dcx-nav="interface">Interface</a><div class="dcx-subnav"></div></li>
+        </ul>
+      </nav>
+    </aside>
+    <div class="dcx-panel">
+      <header class="dcx-topbar">
+        <div class="dcx-current"></div>
+        <button class="dcx-close" type="button" aria-label="Close"></button>
+      </header>
+      <div class="dcx-main" tabindex="-1"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+(function () {
+  'use strict';
+
+  /* ---------- Theme toggle (mirrors the site's theme.js) ---------- */
+  var STORAGE_KEY = 'impeccable-theme';
+  var LABELS = {
+    auto: 'Theme: auto, matching your system. Click to switch to light mode.',
+    light: 'Theme: light. Click to switch to dark mode.',
+    dark: 'Theme: dark. Click to switch back to auto.'
+  };
+  var TITLES = { auto: 'Theme: auto (matches system)', light: 'Theme: light', dark: 'Theme: dark' };
+
+  function getStoredPref() {
+    var v = localStorage.getItem(STORAGE_KEY);
+    return v === 'light' || v === 'dark' ? v : 'auto';
+  }
+  function setStoredPref(pref) {
+    if (pref === 'auto') localStorage.removeItem(STORAGE_KEY);
+    else localStorage.setItem(STORAGE_KEY, pref);
+  }
+  function systemTheme() {
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+  }
+  function applyTheme(pref) {
+    var html = document.documentElement;
+    var resolved = pref === 'auto' ? systemTheme() : pref;
+    html.classList.remove('light', 'dark');
+    html.classList.add(resolved);
+    html.setAttribute('data-theme-pref', pref);
+    document.querySelectorAll('[data-theme-toggle]').forEach(function (btn) {
+      btn.setAttribute('aria-label', LABELS[pref]);
+      btn.setAttribute('title', TITLES[pref]);
+    });
+  }
+  function nextPref(pref) {
+    return pref === 'auto' ? 'light' : pref === 'light' ? 'dark' : 'auto';
+  }
+
+  applyTheme(getStoredPref());
+  if (window.matchMedia) {
+    var mq = window.matchMedia('(prefers-color-scheme: light)');
+    var onChange = function () { if (getStoredPref() === 'auto') applyTheme('auto'); };
+    if (mq.addEventListener) mq.addEventListener('change', onChange);
+    else if (mq.addListener) mq.addListener(onChange);
+  }
+  document.querySelectorAll('[data-theme-toggle]').forEach(function (btn) {
+    btn.addEventListener('click', function () {
+      var next = nextPref(getStoredPref());
+      setStoredPref(next);
+      applyTheme(next);
+    });
+  });
+
+  /* ---------- Mobile nav drawer (mirrors Header.astro's inline script) ---------- */
+  (function () {
+    var header = document.querySelector('[data-site-header]');
+    var btn = document.querySelector('[data-site-header-menu]');
+    if (!header || !btn) return;
+    btn.addEventListener('click', function () {
+      var open = header.getAttribute('data-nav-open') === 'true';
+      header.setAttribute('data-nav-open', String(!open));
+      btn.setAttribute('aria-expanded', String(!open));
+    });
+  })();
+
+  /* ---------- Staggered reveal on load ---------- */
+  requestAnimationFrame(function () {
+    requestAnimationFrame(function () {
+      document.querySelectorAll('[data-reveal]').forEach(function (el) {
+        el.classList.add('revealed');
+      });
+    });
+  });
+
+  /* ---------- Expander ---------- */
+  var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  var MORPH_MS = reduceMotion ? 0 : 540;
+  var READY_MS = reduceMotion ? 0 : 260;
+
+  var tiles = Array.prototype.slice.call(document.querySelectorAll('.dcx-tile'));
+  var names = {};
+  tiles.forEach(function (t) { names[t.dataset.category] = t.dataset.name; });
+  var shellTemplate = document.getElementById('dcx-shell-template');
+
+  var current = null;
+
+  function copyText(value) {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      return navigator.clipboard.writeText(value).catch(function () { fallbackCopy(value); });
+    }
+    fallbackCopy(value);
+    return Promise.resolve();
+  }
+
+  function fallbackCopy(value) {
+    var field = document.createElement('textarea');
+    field.value = value;
+    field.setAttribute('readonly', '');
+    field.style.position = 'fixed';
+    field.style.opacity = '0';
+    document.body.appendChild(field);
+    field.select();
+    document.execCommand('copy');
+    field.remove();
+  }
+
+  function initFan(root) {
+    root.querySelectorAll('.dcx-fan').forEach(function (fan) {
+      var panels = Array.prototype.slice.call(fan.querySelectorAll('.dcx-fan-panel'));
+      if (!panels.length) return;
+
+      function setActive(index) {
+        fan.classList.add('is-engaged');
+        panels.forEach(function (panel, i) {
+          panel.classList.toggle('is-active', i === index);
+          panel.classList.toggle('is-neighbor', Math.abs(i - index) === 1);
+        });
+      }
+
+      function clearActive() {
+        fan.classList.remove('is-engaged');
+        panels.forEach(function (panel) { panel.classList.remove('is-active', 'is-neighbor'); });
+      }
+
+      fan.addEventListener('mousemove', function (event) {
+        var rect = fan.getBoundingClientRect();
+        var progress = Math.min(0.999, Math.max(0, (event.clientX - rect.left) / rect.width));
+        var active = 0;
+        panels.forEach(function (panel, i) {
+          var left = parseFloat(panel.style.getPropertyValue('--panel-left')) / 100;
+          if (progress >= left) active = i;
+        });
+        setActive(active);
+      });
+      fan.addEventListener('mouseleave', clearActive);
+
+      panels.forEach(function (panel, i) {
+        panel.addEventListener('focus', function () { setActive(i); });
+        panel.addEventListener('blur', function () {
+          if (!fan.matches(':focus-within')) clearActive();
+        });
+        panel.addEventListener('click', function () {
+          var value = panel.dataset.copyColor;
+          if (!value) return;
+          copyText(value);
+          var label = panel.querySelector('.dcx-fan-name');
+          var original = panel.dataset.colorName || 'Color';
+          panel.classList.add('is-copied');
+          if (label) label.textContent = 'Copied!';
+          window.clearTimeout(panel._copyTimer);
+          panel._copyTimer = window.setTimeout(function () {
+            panel.classList.remove('is-copied');
+            if (label) label.textContent = original;
+          }, 900);
+        });
+      });
+    });
+  }
+
+  function buildSubnav(expander, activeId) {
+    expander.querySelectorAll('.dcx-nav-list li').forEach(function (li) {
+      var isActive = li.dataset.category === activeId;
+      li.classList.toggle('is-active', isActive);
+      var subnav = li.querySelector('.dcx-subnav');
+      if (!subnav) return;
+      subnav.innerHTML = '';
+      if (!isActive) return;
+      expander.querySelectorAll('.dcx-main .dcx-block[data-label]').forEach(function (block, i) {
+        var btn = document.createElement('button');
+        btn.className = 'dcx-sub-link';
+        btn.type = 'button';
+        btn.textContent = block.dataset.label.replace(/&amp;/g, '&');
+        btn.setAttribute('data-dcx-subsection', String(i));
+        subnav.appendChild(btn);
+      });
+    });
+    expander.querySelectorAll('.dcx-nav-link').forEach(function (link) {
+      if (link.dataset.dcxNav === activeId) link.setAttribute('aria-current', 'page');
+      else link.removeAttribute('aria-current');
+    });
+  }
+
+  function scrollToBlock(expander, index) {
+    var blocks = expander.querySelectorAll('.dcx-main .dcx-block[data-label]');
+    var target = blocks[Number(index)];
+    if (!target) return;
+    var main = expander.querySelector('.dcx-main');
+    var top = target.getBoundingClientRect().top - main.getBoundingClientRect().top + main.scrollTop - 18;
+    main.scrollTo({ top: Math.max(0, top), behavior: reduceMotion ? 'auto' : 'smooth' });
+  }
+
+  function renderCategory(id, expander, updateHash) {
+    var template = document.getElementById('dcx-detail-' + id);
+    if (!template) return;
+
+    expander.querySelector('.dcx-current').textContent = names[id] || id;
+
+    var main = expander.querySelector('.dcx-main');
+    main.innerHTML = '';
+    main.appendChild(template.content.cloneNode(true));
+    main.scrollTop = 0;
+    initFan(main);
+
+    if (current) {
+      var tile = document.querySelector('.dcx-tile--' + id);
+      current.id = id;
+      current.tile = tile;
+      current.rect = tile.getBoundingClientRect();
+    }
+
+    buildSubnav(expander, id);
+    if (updateHash) history.pushState({ category: id }, '', '#' + id);
+  }
+
+  function openCategory(id, updateHash) {
+    if (!(id in names)) return;
+    if (current && current.id === id) return;
+    closeCategory(false);
+
+    var tile = document.querySelector('.dcx-tile--' + id);
+    if (!tile) return;
+
+    var rect = tile.getBoundingClientRect();
+    var expander = document.createElement('section');
+    expander.className = 'dcx-expander';
+    expander.setAttribute('role', 'dialog');
+    expander.setAttribute('aria-modal', 'true');
+    expander.setAttribute('aria-label', names[id] + ' details');
+    expander.style.top = rect.top + 'px';
+    expander.style.left = rect.left + 'px';
+    expander.style.width = rect.width + 'px';
+    expander.style.height = rect.height + 'px';
+
+    expander.appendChild(shellTemplate.content.cloneNode(true));
+    document.body.appendChild(expander);
+    document.body.classList.add('is-locked');
+    current = { id: null, expander: expander, tile: tile, rect: rect, opener: tile };
+    renderCategory(id, expander, false);
+    current.id = id;
+
+    requestAnimationFrame(function () {
+      expander.classList.add('is-full');
+      window.setTimeout(function () {
+        expander.classList.add('is-ready');
+        var close = expander.querySelector('.dcx-close');
+        if (close) close.focus({ preventScroll: true });
+      }, READY_MS);
+    });
+
+    expander.querySelector('.dcx-close').addEventListener('click', function () { closeCategory(true); });
+
+    expander.querySelector('.dcx-nav').addEventListener('click', function (event) {
+      var subLink = event.target.closest('[data-dcx-subsection]');
+      if (subLink) {
+        scrollToBlock(expander, subLink.getAttribute('data-dcx-subsection'));
+        return;
+      }
+      var navLink = event.target.closest('[data-dcx-nav]');
+      if (!navLink) return;
+      event.preventDefault();
+      if (current && navLink.dataset.dcxNav === current.id) return;
+      renderCategory(navLink.dataset.dcxNav, expander, true);
+    });
+
+    if (updateHash) history.pushState({ category: id }, '', '#' + id);
+  }
+
+  function closeCategory(updateHash) {
+    if (!current) return;
+    var expander = current.expander;
+    var rect = current.rect;
+    var opener = current.opener;
+    expander.classList.remove('is-ready', 'is-full');
+    expander.style.top = rect.top + 'px';
+    expander.style.left = rect.left + 'px';
+    expander.style.width = rect.width + 'px';
+    expander.style.height = rect.height + 'px';
+    window.setTimeout(function () {
+      expander.remove();
+      document.body.classList.remove('is-locked');
+    }, MORPH_MS);
+    current = null;
+    if (opener) opener.focus({ preventScroll: true });
+    if (updateHash && location.hash) history.pushState(null, '', location.pathname + location.search);
+  }
+
+  tiles.forEach(function (tile) {
+    tile.addEventListener('click', function () { openCategory(tile.dataset.category, true); });
+  });
+
+  /* Vignette draw animations use the homepage's stroke-dasharray: 100
+     (user units), but non-scaling-stroke makes Chromium measure dashes in
+     screen pixels. Translate: --pl = 100 viewBox units at the rendered
+     scale, refreshed on resize. */
+  function sizeDrawStrokes() {
+    document.querySelectorAll('.dcx-viz-svg').forEach(function (svg) {
+      var paths = svg.querySelectorAll('.anim-draw, .anim-draw-delay');
+      if (!paths.length) return;
+      var rect = svg.getBoundingClientRect();
+      if (!rect.width || !rect.height) return;
+      var scale = Math.min(rect.width, rect.height) / 40;
+      paths.forEach(function (path) {
+        /* The homepage icons fit inside dasharray 100; custom paths longer
+           than 60 units (breathe shows the first 60% of the dash) get a
+           proportionally larger dash so they still finish drawing. */
+        var units = Math.max(100, path.getTotalLength() / 0.6);
+        path.style.setProperty('--pl', (units * scale).toFixed(1) + 'px');
+      });
+    });
+  }
+  sizeDrawStrokes();
+  var drawResizeTimer;
+  window.addEventListener('resize', function () {
+    window.clearTimeout(drawResizeTimer);
+    drawResizeTimer = window.setTimeout(sizeDrawStrokes, 150);
+  });
+
+  document.addEventListener('keydown', function (event) {
+    if (event.key === 'Escape') closeCategory(true);
+  });
+
+  window.addEventListener('popstate', function () {
+    var id = location.hash.replace('#', '');
+    if (id && id in names) {
+      if (current) renderCategory(id, current.expander, false);
+      else openCategory(id, false);
+    } else {
+      closeCategory(false);
+    }
+  });
+
+  var initial = location.hash.replace('#', '');
+  if (initial && initial in names) {
+    window.setTimeout(function () { openCategory(initial, false); }, 120);
+  }
+})();
+</script>
+</body>
+</html>