fix(web): one header instead of two beige bands, and furniture that fits

[YunyueLi]

Diagnosis of why the horizontal strips at the top of the page looked wrong, and the fixes it pointed to.

What was actually wrong

Three strips shared one type treatment. The top bar, all six section rules and the section-summary row computed to a byte-identical 11px / 400 / letter-spacing: 1.98px / uppercase / rgb(107,103,91). So the version number, the plate caption, the section counter and four product claims all carried the same visual weight — nothing said which to read first.

Every strip was a space-between row with a hole in it. The top bar's two clusters were 586px apart; each section rule had two holes of 302 and 303px. And the caption in the middle was not centred: its centre sat 26px left of the band's at 1150, and somewhere else at every other width.

The top bar was a second header, not a utility rail. Same background, same width, same type, one hairline between them — 124px of beige reading as one block. Three of its four items already appeared within two rows: the wordmark (the nav's own brand mark), v0.1.0-dev and Alpha (one fact twice, and again in the footer), Apache-2.0 / Python 3.11+ (also the brand meta, also the footer).

What changed

• The bar goes; the language switcher moves into the header. It was the only thing on the strip that existed nowhere else. One band fewer above the fold, 39px less before the headline.
• Room for it: the brand's second line (227px, the widest thing in the header) said "evidence-anchored graphs", which is the hero label 120px below it — it goes. The repository pill stands down below 1240 as it already did below 1080. Below 1080 the header is a three-area grid so each row has one job.
• The switcher was 241px for 99px of text — the previous pass had replaced its interpuncts with pairs of non-breaking spaces, and in an inline-flex row those become flex items, so it paid for two separators at once.
• Section rules centre their caption from 700px up, via a three-column grid. Below 700 the caption is wider than a third of the band, the outer tracks collapse and the counter prints over "THE MET" — so the export's space-between stays there. There is no centre to find on a phone.
• The section-summary row fits its content. It sat inside the left grid column, whose 495px is exactly its three children's minimum, so all three were crushed: the claims wrapped to two ragged lines and "One rule / ≥ 95%" was squeezed into 57px, three words over five lines.

Two corrections to the previous pass

• The nav's section links were never given nowrap, so above 1280 — where the brand's second line reappeared and took the room — they broke inside the word: "Reading / room", "Quick / start". Labels don't wrap.
• .nav-links a .num should never have gone into the 11px type floor. It is an absolutely-positioned tick mark whose top: -7px; right: -16px offsets are drawn around a 9px glyph; at 11px it grew past them and printed into the neighbouring link. The floor is for text a reader has to read.

Verified

320 / 360 / 390 / 430 / 600 / 699 / 700 / 768 / 900 / 1024 / 1080 / 1081 / 1240 / 1241 / 1440 / 1920, and all four languages plus both credits pages at 390 / 768 / 1440: no horizontal scroll, nothing clipped, no overlapping glyph ink, caption centred to the pixel from 700 up, switcher in the header with the right language marked on every page. ruff format --check and ruff check clean, 103 unit tests pass.

The ink-overlap scan is the check that matters here: an earlier version of the grid change passed the overflow and clipping checks while printing the counter straight over the caption at 390. Overflow and overlap are different measurements.

🤖 Generated with Claude Code

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	loregraph	1a261a8	Commit Preview URL Branch Preview URL	Jul 29 2026, 03:22 PM