Feature request: shared content-width tokens (align section widths)

Review the width classes in resume-biography-3, portfolio, content-collection, markdown, the citation/date-title-summary/article-grid views, and the navbar/footer. First resolve the token names, values, and whether width is configurable or fixed CSS variables. Done means the listed containers use consistent page or reading widths and their horizontal padding aligns across sections.

Prerequisites

• I have searched for duplicate or closed feature requests
• I am mindful of the project scope

Proposal

Introduce two shared content-width tokens — a page width and a reading width — and use
them consistently across blocks, views, and the site chrome, instead of each block/view hardcoding
its own max-w-*. Ideally expose the choice as a small design knob, e.g. design.width: wide | reading.

Concretely:

1. Define two tokens (CSS custom properties or a tiny map), e.g.
   • --hb-width-page → max-w-7xl (80rem) — full-bleed sections (hero, portfolio grids, wide galleries)
   • --hb-width-reading → one value (e.g. max-w-3xl, 48rem) — text/list content
2. Resolve every section container to one of the two, including the sub-fixes below.

Current state — the widths hardcoded today (verified against main):

So a single collection section renders its title (~65ch), its rows (48rem), and its
"See all" button (64rem) at three different widths, and stacking different blocks steps the
content edge in and out down the page.

Sub-fixes to fold in:

• The "See all" button is wider than the list it belongs to (max-w-screen-lg vs the rows'
  max-w-3xl).
• The collection title (max-w-prose) doesn't match its own rows.
• Related: inconsistent horizontal padding — the hero uses a flat px-4 while portfolio
  uses px-4 sm:px-6 lg:px-8, so side gutters don't line up either. (Happy to include this in the
  same effort.)

Happy to implement once there's agreement on the token names/values and whether it should be a
config knob vs. fixed CSS variables.

Motivation and context

On any page that combines sections, the content edges don't line up — they step inward section by
section — and even within one collection section the title, rows, and "See all" button sit at
three different widths. This reads as visual "jitter" and makes the theme harder to customise
(every width is a separate magic value in a different file). Two shared tokens make the vertical
rhythm consistent, make full-width vs. reading-width an intentional choice, and give site owners a
single place to adjust content width instead of overriding multiple blocks/views.

This came out of a migration where aligning these by hand meant overriding
portfolio, content-collection, markdown, resume-biography-3, several view --start
fragments, and the navbar/footer. A shared token would remove the need for this.