User Story

As a visitor evaluating ApexYard, I want a dedicated Architecture page on the marketing site that shows the 5-layer model (governance / capability / framework defaults / customisation / per-project data) + the optional split-portfolio sibling repo at a glance, so I can decide whether the framework's shape fits my needs without reading the README first.

Context

A keynote-shaped SVG of the architecture exists at /Users/ahmed/Desktop/D/apexyard-A-keynote.html (operator-authored). It captures the canonical mental model but uses an Apple/SF Pro aesthetic — pastel layer fills, drop shadows, rounded corners, SF Pro typeface — which clashes with the site's terminal-native brutalism (JetBrains Mono, warm cream paper, single accent red, sharp corners, no shadows).

The architecture page should preserve the diagram's information (5 layers, override arrows, sibling-repo coupling) but be recolored + restyled to feel native to the site.

Acceptance Criteria

• New page at site/architecture.html with the same titlebar + sticky-nav pattern as site/skills.html
• Breadcrumb reads ~/apexyard · architecture
• SVG diagram translated to the site palette:
  • Layer fills use --paper-2 / --paper-3 cream tones (no pastels)
  • Borders use --rule (ink) — solid for static layers, dashed for optional/sibling-repo
  • Override arrows use --accent (warning-red) — preserves the "override" semantic
  • Drop shadows removed
  • Rounded corners removed (sharp, brutalist)
  • All text in JetBrains Mono via --mono
• Stale counts in the keynote updated to current reality:
  • "24 shell gates" → "26 hooks" (or current count via ls .claude/hooks/*.sh | wc -l)
  • "43+ slash commands" → "48 skills"
  • Verify rules count + bump if needed
• Nav link architecture added to both site/index.html and site/skills.html titlebars (next to skills)
• Mobile-responsive — SVG scales via viewBox + CSS max-width: 100%; titlebar collapses links per existing @media (max-width: ...) pattern
• Open Graph / Twitter meta tags present (mirror skills.html shape)
• Page passes a quick visual review against the homepage — same paper / ink / accent palette, same titlebar shape, same footer convention if any
• Glossary in PR body covers: layer model, customisation overlay, sibling private repo, split-portfolio v2

Design Notes

• Information preservation over fidelity. The keynote's pastel layer encoding doesn't translate to the site's monochrome-cream aesthetic. Use tonal contrast (paper-2 vs paper-3) + border treatment (solid vs dashed) to retain the 5-layer grouping. Layer labels stay above each row to anchor the reader.
• Single accent. The site uses red (#C8321A) as a stamp, not a fill. Use it only on the customisation-override arrows (their semantic IS the override). Everything else in cream + ink.
• No new typeface. JetBrains Mono only — including in the SVG (set font-family="var(--mono)" via inline style or matching font-stack string).
• Footer hint. Tiny line at the bottom: "Right-click the diagram → Save Image As → drop into a slide" — same shareability the keynote offers.
• Out of scope for v1: dark-mode palette swap for the SVG itself (the site already does prefers-color-scheme: dark for CSS; the SVG can stay light for v1 and inherit if values are CSS-driven). Capture as a follow-up.

Glossary