Homepage: size chapter titles to the intro beside them

[ngnijland]

What

Where a homepage chapter's title and intro sit side by side (768px and up), the title now takes the font size that sets it closest to the intro's height, so the two start and end level.

• The size stays between 32px and title-1's 64px, so titles only ever shrink from today's size.
• The fit picks the closest height, even when that means slightly taller. A short title like "Captures worth sharing." jumps from one line (58px) to two (119px), so matching a 110px intro means overshooting by 8px rather than falling 52px short.
• It refits whenever the intro changes height (a ResizeObserver on the intro).
• Stacked on phones, the title keeps the type scale's clamp() size.

The search is a DOM-free helper, src/lib/utils/fitFontSize.ts, with unit tests in tests/fit-font-size.test.js.

Results (title / intro height)

Width	Result
1280px	Most chapters 52px font, 110 / 110. Captures 118 / 110, Network 110 / 138
1000px	Within about 8–22px on every chapter
800px	Mostly exact (165 / 165). Network 210 / 193, Teams 110 / 138
767px (stacked)	Unchanged

Worth a look

• On desktop most titles now land around 52px instead of 64px.
• Titles render at 64px first and refit once the script runs. The chapters sit below the full-screen hero, so this happens before they scroll into view.

Checks

npm run lint, format:check, typecheck, build, knip and npm test all pass.

🤖 Generated with Claude Code