Update arch-docs theme to match brand guidelines (#16)

* Update theme to match Supermodel brand guidelines

- Replace Inter/JetBrains Mono with Public Sans/Martian Mono
- Update :root CSS variables to brand palette (pure black bg, teal accent, muted secondary colors)
- Fix hardcoded colors in CTA gradient, hero button hovers, and source code block

Closes #15 (arch-docs portion)

* Update chart/graph colors and fonts to match brand palette

- Remap all hardcoded D3 chart colors from indigo/bright to brand teal/muted palette
- Update background, border, and text colors in JS to match CSS variables
- Replace Inter font references with Public Sans in SVG text elements
- Add clipPath to homepage treemap to prevent text overflow
- Set --text to #FFFFFF, --radius to 0px to match supermodel.com
- Align font fallback stacks with supermodel.com

* Switch treemap to vertical slice layout on narrow screens

Below 600px width, use d3.treemapSlice instead of squarify so each
taxonomy gets a full-width horizontal bar. Prevents text overflow
and keeps all labels readable on mobile.

* Revert "Switch treemap to vertical slice layout on narrow screens"

This reverts commit 474a83b.

* Update typography to match brand guide type scale

- Body: font-weight 300 (Public Sans Light)
- H1/hero: font-weight 200 (Extralight), letter-spacing -0.04em
- H2/section titles: font-weight 300-400, letter-spacing -0.02em
- Nav links: Martian Mono, uppercase, 0.68rem (matching supermodel.com)
- Overline labels: Lexend Peta 10px uppercase (brand accent typeface)
- Pills: Martian Mono (data/details font)
- Add Lexend Peta to Google Fonts import

* Replace treemap with horizontal bar list on mobile (<600px)

Below 600px, the codebase composition switches from a squarified
treemap to a simple stacked bar list — full-width colored bars with
labels and counts. Treemap stays unchanged on desktop.

* Make homepage treemap responsive with resize listener

Extracts treemap/bar rendering into a function that re-renders on
window resize (debounced 150ms). Switches between treemap (>=600px)
and horizontal bar list (<600px) live as the viewport changes.

* Allow hero stats to wrap at any viewport width

Move flex-wrap to the base rule so stats wrap naturally before
overflowing. Tighten gap on mobile for compact rows.

* Replace SVG treemap with HTML flexbox composition

Codebase composition now uses flex-wrap divs instead of D3 treemap.
Each taxonomy is a flex item sized by flex-grow proportional to count,
with min-width ensuring text is always visible. Reflows naturally at
any viewport width — no breakpoints or resize listeners needed.

* Use percentage flex-basis for proportional composition boxes

Each box now gets flex-basis as a percentage of total count (min 10%)
with no grow/shrink, so smaller items like File Extensions stay small
even when they wrap to a new row.

* Compact composition boxes to match treemap proportions

Fixed container height at 200px, items stretch to fill, labels
anchored to bottom. Tighter gap and padding for denser feel.

* Two-row composition layout for area-proportional boxes

Split taxonomies at ~65% cumulative value: large items in a tall top
row (140px), small items in a short bottom row (60px). Width is
proportional within each row. Visual area now reflects data magnitude.

* Revert "Two-row composition layout for area-proportional boxes"

This reverts commit 4133cc1.

* Make force graphs resize with viewport

Both the architecture overview and entity force graphs now resize
their SVG width and re-center the simulation on window resize
(debounced 150ms). Nodes reflow to fill the new canvas.

* Hide empty chart panel on hub pages with no distribution data

When a taxonomy hub page has null/empty distributions and no top
entities, hide the chart panel container instead of showing an
empty rectangle.

* Revert "Hide empty chart panel on hub pages with no distribution data"

This reverts commit 2fadd03.

* Fix WCAG contrast issues flagged by CodeRabbit

- Use black text on accent-filled controls (skip-link, cta-button,
  pagination current, letter-active) for AA contrast on #71B9BC
- Bump chart label gray from #505050 to #808080 for AA contrast on black

Author: jonathanpopham

templates/_head.html

@@ -5,4 +5,4 @@
 <link rel="manifest" href="/manifest.json">
 <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=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@200;300;400;500;600;700&family=Martian+Mono:wght@300;400;500&family=Lexend+Peta:wght@400&display=swap" rel="stylesheet">