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

[Vidminas]

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):

Block / view / chrome	Container width	Tailwind size
resume-biography-3 (hero)	max-w-7xl	80rem
portfolio	max-w-7xl	80rem
content-collection — title	max-w-prose	~65ch
content-collection — "See all"	max-w-screen-lg	64rem
views/citation (rows)	max-w-3xl	48rem
views/date-title-summary (rows)	max-w-3xl	48rem
views/article-grid	max-w-screen-lg	64rem
markdown block	max-w-prose	~65ch
navbar / footer	container / own width	full-bleed-ish

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.