[juliantellez]

What. Rebuilds the layout mobile first and adds a shared Section component so page rhythm is
decided once.

Why. The site was unusable on a phone and it was my fault in two specific ways.

I redefined Tailwind's --spacing from 4px to 8px in @theme, trying to encode the 8 point grid.
That doubles every spacing utility on every element at once, so mt-12 became 96px and gap-5
became 40px. The grid is now kept by using even steps instead, so px-4 is 16px.

The header was unconditional: a wordmark, two text links and a button need roughly 438px, and the
narrowest phone in common use is 320. It scrolled sideways. The text links now appear at the small
breakpoint and above, and the call to action stays visible at every width.

The whole site also shipped with exactly one breakpoint, min-width: 48rem, because md: was the
only prefix used anywhere. Padding and type now move at three.

Tests. 37, up from 33. Four of them guard this specifically: the navigation is hidden below the
small breakpoint, the call to action never is, --spacing is not redefined, and the stylesheet has
more than two breakpoints. Two were mutation checked, by unhiding the navigation and by putting the
spacing override back.

What I cannot check. I have no browser here, so I read markup and stylesheets rather than
looking at the page. If it still reads wrong after this, tell me what specifically and I will treat
that as the fault rather than what I can measure.

Part of #2.