+
+ Content adapts to parent width via container queries.
+
+```
+
+### Data-Attribute Vocabulary (for OpenCD consideration)
+
+| Attribute | Purpose |
+|-----------|---------|
+| `data-role` | Command-box, timeline, status-card, diff, log-entry |
+| `data-wikilink` | Wiki-style internal links `[[Note Name]]` |
+| `data-task` | Task list states: todo / done / blocked |
+| `data-status` | Status indicators: awake / sleeping / blocked |
+| `data-callout` | Callout boxes: note / warning / error / tip |
+| `data-session` | Session metadata display |
+| `data-tag` | Tag display with # prefix |
+| `data-tooltip` | CSS-only tooltips (no JS) |
+| `data-subnav` | Sub-navigation with / separators |
+| `data-diff` | Diff viewer with +/- lines |
+| `data-redacted` | Privacy redaction (bar / reveal / label variants) |
+| `data-theme` | Light/dark theme toggle |
+| `data-nav-links` | Nav link container for Flexbox push-right |
+| `data-nav-toggle` | Mobile hamburger toggle |
+
+### Token System (ASW → Open Props Mapping)
+
+ASW's token layer (`01-tokens.css`) uses Open Props as a foundation and adds:
+- **Surface tokens:** `--surface`, `--surface-1`, `--surface-2`, `--surface-3`, `--surface-card`, `--surface-hover` — all `oklch()` with `--palette-hue` tinting
+- **Text tokens:** `--text`, `--text-2`, `--text-3`, `--text-dim`
+- **Accent tokens:** `--accent`, `--accent-hover`, `--on-accent`, `--accent-subtle`
+- **Fixed-hue accents:** `--accent-blue` (250°), `--accent-red` (25°), `--accent-orange` (80°)
+- **State colors:** `--ok` (green 145°), `--warn` (amber 80°), `--error` (red 25°), `--info` (blue 250°)
+- **Gap fills:** `--space-3` (0.75rem), `--space-5a` (1.25rem) — values missing from Open Props
+- **Text scale gap:** `--text-sm` (0.875rem) — missing from Open Props (`--font-size-0` is 0.75rem, `--font-size-1` is 1rem)
+- **Radius gap:** `--radius-md` (4px) — between OP `--radius-1` (2px) and `--radius-2` (5px)
+- **Layout widths:** `--width-sm` (510px) through `--width-2xl` (1450px)
+- **Content widths:** `--width-prose` (65ch), `--width-report` (72ch)
+- **Fonts:** `--font-heading` = `var(--font-neo-grotesque)`, `--font-ui` = `var(--font-neo-grotesque)`
+
+**Key insight for OpenCD:** The ASW approach of using Open Props for the backbone + semantic aliases for the project-specific tokens is exactly the right pattern. OpenCD should define `--cd-*` tokens as semantic aliases on top of Open Props, with fallback values.
+
+---
+
+## Q4: CD Packaging Design References
+
+### Parental Advisory Label (Source for Human Advisory Badge)
+
+**Verified from:** Wikimedia Commons SVG + Wikipedia
+
+| Specification | Value |
+|---------------|-------|
+| **Aspect ratio** | 523×327px ≈ 1.6:1 |
+| **Typography** | Impact / Arial Black (heavy sans-serif, tightly tracked) |
+| **Layout** | 3 rows: "PARENTAL ADVISORY" / "EXPLICIT CONTENT" (on black), white text, all-caps |
+| **Designer** | Deborah Norcross (Warner Bros) — 1990 |
+| **Current text** | "PARENTAL ADVISORY: EXPLICIT CONTENT" (since 1996) |
+| **Construction** | Two black bars (top 40%, bottom 40%), white text centered |
+
+### Human Advisory Badge (Local Implementation)
+
+**Files at:** `~/releases/human-advisory/` and `~/releases/parental-advisory/`
+
+The existing `.human-advisory` implementation uses:
+- Container: `300px × var(--ha-size)` wide, `border: 3px solid #000`, `background: #000`
+- Font: `Impact, 'Arial Black', 'Helvetica Neue', sans-serif`
+- Three rows: "HUMAN" (white on black), "ADVISORY" (black on white), "EXPLICIT AI CODE" (white on black)
+- Scalable via `--ha-size` CSS custom property
+
+**For OpenCD's `.human-advisory` module:** The DESIGN.md already specifies `--cd-advisory-red` from `--red-6`, which is the correct approach. Consider supporting both:
+- Classic PA-style: black/white bars
+- OpenCD variant: red/black with white text
+
+### Visible Grid Aesthetic — Key References
+
+**1. trentuna.com paper-card grid:**
+```css
+.paper-card {
+ background-image: repeating-linear-gradient(
+ 0deg,
+ transparent 0 31px,
+ oklch(40% .02 55/.025) 31px 32px
+ ), var(--grain);
+}
+```
+Uses 31px spacing between horizontal lines, 1px rule. Very subtle.
+
+**2. CD tray paper (physical):**
+- Typical grid: fine dots or thin parallel lines at ~1mm spacing (≈4px at web scale with grid repeat)
+- Texture: matte-finish paper, slight grain
+- Color: silver/gray or clear translucent
+
+**3. Recommended grid for OpenCD:**
+```css
+/* Default: fine horizontal lines (tray paper aesthetic) */
+--cd-grid-color: var(--gray-3);
+--cd-grid-size: 8px; /* line interval */
+background-image: repeating-linear-gradient(
+ 0deg,
+ transparent 0 calc(var(--cd-grid-size) * 1 - 1px),
+ var(--cd-grid-color) calc(var(--cd-grid-size) * 1 - 1px) var(--cd-grid-size)
+);
+```
+
+### 5 Distinctive CD Packaging Examples (for Visual Direction)
+
+1. **Aphex Twin — Selected Ambient Works 85-92** (R&S): Minimal jewel case, black on white, solid sans-serif typography. The CD itself has a subtle reflective design.
+2. **Boards of Canada — Music Has The Right To Children** (Warp/Wax): Dark jewel case with visible disc through transparent front, minimal tracklist layout on back.
+3. **Radiohead — Kid A** (Parlophone): Special edition with clear plastic case, hidden booklet art, minimalist typography.
+4. **Depeche Mode — Violator** (Mute): Iconic red rose on black. Simple, bold, high contrast.
+5. **The Postal Service — Give Up** (Sub Pop): Transparent jewel case, dual-layer art (front insert + back tray paper visible through clear case).
+
+---
+
+## Q5: trentuna.com Design Aesthetic
+
+**Url:** https://trentuna.com — Live catalog page
+**Stylesheet verified:** Custom Tailwind CSS v4 build, warm vintage aesthetic
+
+### Typefaces
+| Role | Font | Stack |
+|------|------|-------|
+| **Display / Headings** | Fraunces | `"Fraunces", "EB Garamond", Georgia, serif` |
+| **Body** | EB Garamond | `"EB Garamond", "Iowan Old Style", Georgia, serif` |
+| **Monospace** | JetBrains Mono | `"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace` |
+
+### Color Palette (Oklch)
+
+| Token | Value | Purpose |
+|-------|-------|---------|
+| `--paper` | oklch(95.5% .018 85) | Warm cream background |
+| `--paper-deep` | oklch(92% .025 80) | Slightly darker paper |
+| `--ink` | oklch(18% .015 50) | Dark warm text |
+| `--ink-soft` | oklch(36% .018 55) | Secondary text |
+| `--ink-faint` | oklch(55% .02 60) | Subtle text |
+| `--rule` | oklch(32% .02 55) | Border/rule color |
+| `--accent` | oklch(55% .18 32) | Warm red accent |
+| `--stamp` | oklch(45% .16 28) | Darker stamp color |
+
+### Grid Approach
+
+trentuna.com uses a **visible paper-lined grid** — the structure IS the decoration:
+- `repeating-linear-gradient(0deg, transparent 0 31px, rule-color 31px 32px)` for horizontal notebook lines
+- `radial-gradient` grain texture (8 layers, varying dot sizes from 7px to 31px)
+- `radial-gradient` vignette effect
+
+This directly inspires OpenCD's CD tray paper grid.
+
+### Content Structure (from live page)
+```
+trentuna / catalog
+TNT-000 · MMXXV
+"IMPRINT FOR OPEN AI SYSTEMS"
+"We release software, notes, traces, and unfinished but useful machinery."
+[Human Advisory — Explicit AI Code badge]
+```
+
+### Key Lessons for OpenCD
+
+1. **Warm paper tones** work for backgrounds — consider `--cd-tray-bg` with slight warm tint
+2. **Serif body + sans navigation** is a readable combination
+3. **Visible grid-as-decoration** creates tactile feel with minimal CSS
+4. **Monospace for metadata** (catalog numbers, labels, timestamps)
+5. **Bold accent color** for interactive elements (the red accent against warm paper)
+6. **Grain texture** adds depth without images
+
+---
+
+## Cross-Reference: DIRECT.md Mapping Corrections
+
+### What's Right
+- Most Open Props token mappings are correct
+- CD physical dimensions are accurate (ISO 15727)
+- The 2× scale is a reasonable default
+
+### What Needs Corrections
+1. **`--surface-1` through `--surface-4` are NOT Open Props out-of-the-box.** They need to be defined as custom variables. The DESIGN.md already does this correctly (`--cd-tray-bg: var(--surface-1)`) but assumes `--surface-1` exists from Open Props. **Define them explicitly** in `_variables.css`.
+
+2. **`--grid-*` tokens don't exist in Open Props.** The `--grid-1`/`--grid-2` references in DESIGN.md need to be custom `--cd-grid-color` / `--cd-grid-color-alt` definitions using gray-3/gray-2 shades from Open Props.
+
+3. **ASW's `--space-3` (0.75rem)** and **`--text-sm` (0.875rem)** fill gaps in Open Props that OpenCD should also define if needed.
+
+4. **Font selection:** The DESIGN.md uses `var(--font-sans)` for CD spine labels. Consider `var(--font-neo-grotesque)` which has a cleaner, more label-appropriate appearance (Inter/Roboto).
+
+---
+
+## Intelligence Summary
+
+| Area | Confidence | Risk | Notes |
+|------|-----------|------|-------|
+| Open Props tokens | ✅ Verified | Low | All source-confirmed |
+| CD dimensions | ✅ Verified (ISO) | Low | Global standard, no region variance |
+| ASW patterns | ✅ Local source | Low | Full source access at ~/releases/asw/ |
+| Human Advisory | ✅ Local source | Low | Working implementation exists |
+| trentuna.com | ✅ Live site + stylesheet | Low | Tailwind v4 custom build, warm paper aesthetic |
+| Surface/Grid tokens | ⚠️ Correction needed | Medium | DESIGN.md assumes OP has surface/grid tokens |
+| CD scale factor | ⚠️ Recommendation | Low | Implement --cd-scale; keep 2× as default=1 |
+
+**Bottom line:** Green light for implementation. Surface and grid tokens need custom definitions (noted above), everything else maps correctly. The ASW token pattern (oklch with palette-hue) is a proven approach that OpenCD should adopt for its CD tray paper colors.
+
+---
+
+*"I've never left a room without what I came for. Sometimes I leave with more."*
+— Lieutenant Templeton Peck