# UI Kit — Home

A high-fidelity recreation of the **joshbairstow.com** home page: a minimal hub
that *fuses* its three jobs into one composition rather than stacking three
sections.

- **Interactive hero** (`HeroZone.jsx`) — the reserved zone, shown as a
  constrained placeholder: a **rounded** cut-out panel of warm chiaroscuro whose
  light source drifts toward the pointer (the one signature motion moment),
  with the **rings watermark** and a ring-dots accent. A **Zone spec** toggle
  reveals the safe area (9% pad, 1:1.25) so any future element inherits the
  frame. Respects `prefers-reduced-motion`.
- **Latest-writing line** (`LatestLine.jsx`) — the newest post as *one*
  typographic line; bait, not a billboard. Arrow drifts on hover.
- **Subdomain index** (`SubdomainIndex.jsx`) — navigation as a refined index;
  tolerates a growing/uneven set; a not-yet-live item shows a quiet `soon`
  badge, never looks broken. Hover indents the row + draws an ochre tick.
- **Wordmark** (`Wordmark.jsx`) — Bodoni lockup; the only color event is a
  single ochre period.
- **Light / dark** — **dark is the default** (deep warm ink ground); the header
  toggle swaps to the bone alternate. Grain, the rings watermark, and simple
  accent marks (rings/dots/pipes) sprinkled loosely carry through both.

## Run
Open `index.html`. React + Babel load from CDN; components are separate
`.jsx` files exported to `window`. Tokens come from `../../colors_and_type.css`;
marks/texture from `../../assets/`.

## Files
| File | Component |
|---|---|
| `index.html` | App shell, theming, layout grid |
| `Wordmark.jsx` | Name lockup |
| `HeroZone.jsx` | Interactive hero placeholder |
| `LatestLine.jsx` | Latest-post line |
| `SubdomainIndex.jsx` | Refined subdomain index nav |

## Notes
This is a **cosmetic recreation** for prototyping — interactions are faked
(links are inert). The hero's interactive element is a deliberate placeholder
per the brief; drop the real piece into the same clipped frame + safe area.