layout: measure the header nav rather than collapsing it at a breakpoint

[stasadev]

The Issue

Follow-up to the review on #704. The header nav and the blog post title both switched to their narrow layouts at lg (1024px). Browser zoom shrinks the viewport in CSS pixels, so at 110-125% a 1200px window falls under that and
the nav collapsed wholesale under the menu button.

w-2/3 on the nav's right-hand wrapper capped its contents at two thirds of the container, which is why the threshold had to be that high.

The menu behind that button was a div only the script could reveal, so with JavaScript off there was no way to reach the nav links below 1024px at all.

The byline's edit link was anchored to the full 72rem site-container instead of the text, landing about 26rem past the end of it on posts with no feature image.

How This PR Solves The Issue

• Nav links come from one array rendered into both the bar and the menu. A script measures them and drops links from the end until the rest fit, moving each one into the menu. The button shows only when something is hidden.
  Without the script the markup still falls back to hidden lg:flex.
• The menu is a details/summary, so it opens with JavaScript off and the script keeps no open/close code of its own. The separate close button is gone; the summary toggles.
• Nothing in the bar may shrink, or the measurements come back compressed and report room that isn't there. The menu's width stays reserved while it's hidden, so the result can't oscillate.
• .title-grid puts the blog title beside its feature image from 52rem, with the image column at clamp(16rem, 36%, 25rem) so it shrinks instead of stacking.
• The byline row is capped at --reading-measure.

Manual Testing Instructions

Preview: https://pr-706.ddev-com-fork-previews.pages.dev/

1. Drag the window from 1400px to 320px: links should leave the bar one at a time and appear in the menu, with the logo never compressed.
2. At 1200px, zoom to 110%, 125% and 150%: as many links as fit at each.
3. Compare /blog/release-v1-25-3/ against a post with no feature image, at 1400px, 900px and 700px.
4. With JavaScript off: all links above 1024px, and below it the button opens the menu.

Release/Deployment Notes

None.

🤖 Developed with assistance from Claude Code

[github-actions]

🌐 Fork Preview for PR #706

https://pr-706.ddev-com-fork-previews.pages.dev

This preview updates automatically when you push changes to your fork.

[rfay]

This looks fantastic on all the ones I spot-checked, thank you!

[github-actions]

PR closed. The Cloudflare Pages preview is no longer updated.