Everything on the shared names — the copy-paste is gone

The ported markup was written a page at a time, so the same thing was said several ways. Counted before
touching anything: nine variants of the page gutter, seven max-widths, six link styles, two definitions of
an input, and one stray shadow.

Now: `container` (which already centres and pads), `measure`/`measure-wide`, `link`/`link-plain`/
`link-on-dark`, one `field`, `photo`, `page-head`. Nothing in a template writes `bg-white rounded-…
shadow-…` or `underline underline-offset-4` any more — 119 uses of `panel`, 82 of `label`, 52 of
`panel-lift`, 17 of `link`.

TWO REAL FIXES FELL OUT OF IT, not just tidying:

- Every section said `container mx-auto px-4`: `mx-auto` twice, and a px-4 that beat the responsive
  padding inside `container`. The gutter was 16px at every width, including on a 27-inch screen. Removing
  the copy-paste restores sm:px-6 lg:px-8, which is most of why the pages now breathe.
- The public form and the admin had grown two different inputs — cream vs white, ring-2 vs ring-1, py-2.5
  vs py-2, and different text sizes. There is one `field` now, and the same focus ring as everything else.

The admin uses the same names where they are the same thing (`link`, `field`, `h4`, `--radius-*`) and
keeps its own denser buttons, because it is a tool and not a shop front.

53 tests green. Every class used across all nine pages resolves in the compiled stylesheet — that check is
what makes a sweep this size safe to do with a script.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>

README.md

@@ -38,8 +38,22 @@ wordmark's 0.01em letter-spacing so a heading sits on the same rhythm as the log
 read a paragraph of. None of the type classes set a colour — the same heading appears in sage on cream and
 cream on sage.
 
-Write those class names in templates rather than the utilities behind them: a button is `pill-sage`, and
-the four colourways exist because the site puts buttons on cream *and* on sage.
+Write those class names in templates rather than the utilities behind them. The full vocabulary:
+
+| | |
+|---|---|
+| surfaces | `panel`, `panel-lift`, `panel-head`, `panel-mark`, `photo` |
+| buttons | `pill-sage`, `pill-cream`, `pill-outline`, `pill-ghost`, `chip`/`chip-on` |
+| links | `link`, `link-plain`, `link-on-dark` |
+| type | `h1`–`h4`, `price`, `eyebrow`, `label`, `lede`, `wordmark` |
+| layout | `container`, `measure`, `measure-wide`, `section`, `band`, `page-head` |
+| forms | `field` — one input for the public form and the admin |
+
+Four colourways of one button exist because the site puts buttons on cream *and* on sage. Corners come
+from `--radius-panel` (12px) and `--radius-field` (8px), so "how round is a card" is one decision.
+
+If you find yourself writing `bg-white rounded-… shadow-…` or `underline underline-offset-4` in a
+template, there is already a name for it.
 
 ### Why server-rendered