Swaps in the higher-fidelity artwork. Same 16:9 frame, but not a drop-in replacement — the composition, palette and copy area all moved, and each one drove a change here.
The copy area is no longer flat, and no longer full-height
The old artwork was a flat #FDF9F3 down its entire left side. This one:
runs peach #FEE8D2 at the top to cream #FDF3E7 around 43% height
and below ~48% the left edge is foliage, not cream at all
--hero-ground is resampled to #FEF2E1 — the middle of the pale run, where the headline and search actually sit. The scrim covers the foliage further down.
Measured on rendered pixels with the text hidden, against the real glyph runs (via Range, not element boxes) plus a 120px growth margin:
title
body
byline
light
13.61:1
5.74:1
6.66:1
dark
9.49:1
5.45:1
8.35:1
Body drops from 6.52:1 to 5.74:1 as the foliage comes closer — still clear.
A measurement note, because it nearly sent me the wrong way: the byline first read 3.78:1 FAIL. That was its display: flex container, which spans the content width while the glyphs stop 383px earlier. Measuring the box instead of the text would have had me strengthening a scrim that was already fine.
The band crop had to be rebuilt
The schoolhouse moved to ~82% across the frame, leaving only ~140px of artwork to its right — not enough to centre it. The crop is now anchored to the right edge, taking 1344px back, which puts the school at 73%. The build script derives and prints that figure so it can't silently drift from the CSS object-position.
The crop is also 3.2:1 rather than matching the phone. The band isn't one ratio — it runs 2.4:1 on a phone to ~3.8:1 under the one-column breakpoint. Cropping at the narrow end means the wide end throws away height, which is what cut the flag off the roof and the base off the building. Sitting above the middle costs a little width on phones (cheap — the crop's left is hillside) and keeps the building whole where it matters.
A breakpoint bug this exposed
Band heights are now 13rem (641–860px) and 10rem (≤640px). The band was widest-per-height at exactly 640px, where an 8.5rem band measured 4.2:1 — worse than any wider viewport, because the height steps down at that breakpoint while the width does not.
viewport
390
480
640
700
860
band ratio
2.04
2.61
3.61
3.06
3.83
No more spike. The search still lands at 442px on a 667px viewport.
Weight
Source is 3.1MB; a browser fetches exactly one file — 29–59kB desktop, 10–14kB phone. Widths re-cut for the larger master: 2000/1400/1000 wide, 1344/900/600 band.
Verification
0 AA failures across both themes at 1440 / 860 / 390. Every srcset entry checked present on disk with no orphans (the re-cut changed every filename). tsc clean, 159/159 unit tests, build green, 42 e2e journeys parse.
Swaps in the higher-fidelity artwork. Same 16:9 frame, but **not a drop-in replacement** — the composition, palette and copy area all moved, and each one drove a change here.
## The copy area is no longer flat, and no longer full-height
The old artwork was a flat `#FDF9F3` down its entire left side. This one:
- runs **peach `#FEE8D2`** at the top to **cream `#FDF3E7`** around 43% height
- and below **~48%** the left edge is **foliage**, not cream at all
`--hero-ground` is resampled to `#FEF2E1` — the middle of the pale run, where the headline and search actually sit. The scrim covers the foliage further down.
Measured on rendered pixels with the text hidden, against the real glyph runs (via `Range`, not element boxes) plus a 120px growth margin:
| | title | body | byline |
|---|---|---|---|
| light | 13.61:1 | 5.74:1 | 6.66:1 |
| dark | 9.49:1 | 5.45:1 | 8.35:1 |
Body drops from 6.52:1 to 5.74:1 as the foliage comes closer — still clear.
> A measurement note, because it nearly sent me the wrong way: the byline first read **3.78:1 FAIL**. That was its `display: flex` container, which spans the content width while the glyphs stop 383px earlier. Measuring the box instead of the text would have had me strengthening a scrim that was already fine.
## The band crop had to be rebuilt
The schoolhouse moved to **~82% across the frame**, leaving only ~140px of artwork to its right — not enough to centre it. The crop is now anchored to the right edge, taking 1344px back, which puts the school at **73%**. The build script derives and prints that figure so it can't silently drift from the CSS `object-position`.
The crop is also **3.2:1 rather than matching the phone**. The band isn't one ratio — it runs 2.4:1 on a phone to ~3.8:1 under the one-column breakpoint. Cropping at the narrow end means the wide end throws away height, which is what **cut the flag off the roof and the base off the building**. Sitting above the middle costs a little width on phones (cheap — the crop's left is hillside) and keeps the building whole where it matters.
## A breakpoint bug this exposed
Band heights are now 13rem (641–860px) and 10rem (≤640px). The band was **widest-per-height at exactly 640px**, where an 8.5rem band measured **4.2:1 — worse than any wider viewport**, because the height steps down at that breakpoint while the width does not.
| viewport | 390 | 480 | 640 | 700 | 860 |
|---|---|---|---|---|---|
| band ratio | 2.04 | 2.61 | 3.61 | 3.06 | 3.83 |
No more spike. The search still lands at **442px on a 667px viewport**.
## Weight
Source is 3.1MB; a browser fetches exactly one file — **29–59kB desktop, 10–14kB phone**. Widths re-cut for the larger master: 2000/1400/1000 wide, 1344/900/600 band.
## Verification
0 AA failures across both themes at 1440 / 860 / 390. Every `srcset` entry checked present on disk with no orphans (the re-cut changed every filename). `tsc` clean, 159/159 unit tests, build green, 42 e2e journeys parse.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Same 16:9 frame, but not a drop-in replacement — the composition, palette and
copy area all moved, and each one drives a change here.
COPY AREA
The old artwork was a flat #FDF9F3 down its whole left side. This one runs
peach #FEE8D2 at the top to cream #FDF3E7 around 43% height, and below ~48%
the left edge is foliage rather than cream at all. --hero-ground is resampled
to #FEF2E1, the middle of the pale run where the headline and search actually
sit; the scrim covers the foliage further down.
Measured on rendered pixels with the text hidden, sampling the real glyph runs
(via Range, not the element boxes) plus a 120px growth margin:
title body byline
light 13.61:1 5.74:1 6.66:1
dark 9.49:1 5.45:1 8.35:1
Body drops from 6.52:1 to 5.74:1 as the foliage comes closer, still clear.
BAND CROP
The schoolhouse moved to ~82% across the frame, leaving only ~140px of artwork
to its right, so the band crop is anchored to the right edge and takes 1344px
back — putting the school at 73%, which the build script now derives and
prints rather than leaving it to drift from the CSS.
The crop is also 3.2:1 rather than matching the phone. The band is not one
ratio: it runs 2.4:1 on a phone to about 3.8:1 under the one-column
breakpoint. Cropping at the narrow end means the wide end throws away height,
which cut the flag off the roof and the base off the building. Sitting above
the middle costs a little width on phones — where the crop's left is hillside —
and keeps the building whole where it matters.
BAND HEIGHTS
Raised to 13rem (861–860px) and 10rem (≤640px). The band was widest-per-height
at exactly 640px, where an 8.5rem band measured 4.2:1 — worse than any wider
viewport, because the height steps down at that breakpoint while the width does
not. Ratios across the range are now 2.0 / 2.6 / 3.6 / 3.1 / 3.8 rather than
spiking. The search still lands at 442px on a 667px viewport.
WEIGHT
Source is 3.1MB; a browser fetches one file — 29–59kB on desktop, 10–14kB on a
phone. Widths re-cut for the larger master: 2000/1400/1000 wide, 1344/900/600
band.
Verified: 0 AA failures across both themes at 1440 / 860 / 390, every srcset
entry present on disk with no orphans, tsc clean, 159/159, build green.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This PR reworks the hero image pipeline: it re-derives the band crop from measured source coordinates, resizes derivatives (band and wide widths), updates the ground/scrim color to match the actual artwork sample, and regenerates all derivative image files accordingly. The code changes are internally consistent — CSS, script, and JSX all reference the same new filenames and dimensions.
✅ No issues found.
## 🤖 AI Code Review (Claude Code)
This PR reworks the hero image pipeline: it re-derives the band crop from measured source coordinates, resizes derivatives (band and wide widths), updates the ground/scrim color to match the actual artwork sample, and regenerates all derivative image files accordingly. The code changes are internally consistent — CSS, script, and JSX all reference the same new filenames and dimensions.
✅ No issues found.
tudor
merged commit c7e0c2eac7 into main2026-08-15 08:56:33 +00:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Swaps in the higher-fidelity artwork. Same 16:9 frame, but not a drop-in replacement — the composition, palette and copy area all moved, and each one drove a change here.
The copy area is no longer flat, and no longer full-height
The old artwork was a flat
#FDF9F3down its entire left side. This one:#FEE8D2at the top to cream#FDF3E7around 43% height--hero-groundis resampled to#FEF2E1— the middle of the pale run, where the headline and search actually sit. The scrim covers the foliage further down.Measured on rendered pixels with the text hidden, against the real glyph runs (via
Range, not element boxes) plus a 120px growth margin:Body drops from 6.52:1 to 5.74:1 as the foliage comes closer — still clear.
The band crop had to be rebuilt
The schoolhouse moved to ~82% across the frame, leaving only ~140px of artwork to its right — not enough to centre it. The crop is now anchored to the right edge, taking 1344px back, which puts the school at 73%. The build script derives and prints that figure so it can't silently drift from the CSS
object-position.The crop is also 3.2:1 rather than matching the phone. The band isn't one ratio — it runs 2.4:1 on a phone to ~3.8:1 under the one-column breakpoint. Cropping at the narrow end means the wide end throws away height, which is what cut the flag off the roof and the base off the building. Sitting above the middle costs a little width on phones (cheap — the crop's left is hillside) and keeps the building whole where it matters.
A breakpoint bug this exposed
Band heights are now 13rem (641–860px) and 10rem (≤640px). The band was widest-per-height at exactly 640px, where an 8.5rem band measured 4.2:1 — worse than any wider viewport, because the height steps down at that breakpoint while the width does not.
No more spike. The search still lands at 442px on a 667px viewport.
Weight
Source is 3.1MB; a browser fetches exactly one file — 29–59kB desktop, 10–14kB phone. Widths re-cut for the larger master: 2000/1400/1000 wide, 1344/900/600 band.
Verification
0 AA failures across both themes at 1440 / 860 / 390. Every
srcsetentry checked present on disk with no orphans (the re-cut changed every filename).tscclean, 159/159 unit tests, build green, 42 e2e journeys parse.🤖 Generated with Claude Code
Same 16:9 frame, but not a drop-in replacement — the composition, palette and copy area all moved, and each one drives a change here. COPY AREA The old artwork was a flat #FDF9F3 down its whole left side. This one runs peach #FEE8D2 at the top to cream #FDF3E7 around 43% height, and below ~48% the left edge is foliage rather than cream at all. --hero-ground is resampled to #FEF2E1, the middle of the pale run where the headline and search actually sit; the scrim covers the foliage further down. Measured on rendered pixels with the text hidden, sampling the real glyph runs (via Range, not the element boxes) plus a 120px growth margin: title body byline light 13.61:1 5.74:1 6.66:1 dark 9.49:1 5.45:1 8.35:1 Body drops from 6.52:1 to 5.74:1 as the foliage comes closer, still clear. BAND CROP The schoolhouse moved to ~82% across the frame, leaving only ~140px of artwork to its right, so the band crop is anchored to the right edge and takes 1344px back — putting the school at 73%, which the build script now derives and prints rather than leaving it to drift from the CSS. The crop is also 3.2:1 rather than matching the phone. The band is not one ratio: it runs 2.4:1 on a phone to about 3.8:1 under the one-column breakpoint. Cropping at the narrow end means the wide end throws away height, which cut the flag off the roof and the base off the building. Sitting above the middle costs a little width on phones — where the crop's left is hillside — and keeps the building whole where it matters. BAND HEIGHTS Raised to 13rem (861–860px) and 10rem (≤640px). The band was widest-per-height at exactly 640px, where an 8.5rem band measured 4.2:1 — worse than any wider viewport, because the height steps down at that breakpoint while the width does not. Ratios across the range are now 2.0 / 2.6 / 3.6 / 3.1 / 3.8 rather than spiking. The search still lands at 442px on a 667px viewport. WEIGHT Source is 3.1MB; a browser fetches one file — 29–59kB on desktop, 10–14kB on a phone. Widths re-cut for the larger master: 2000/1400/1000 wide, 1344/900/600 band. Verified: 0 AA failures across both themes at 1440 / 860 / 390, every srcset entry present on disk with no orphans, tsc clean, 159/159, build green. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>🤖 AI Code Review (Claude Code)
This PR reworks the hero image pipeline: it re-derives the band crop from measured source coordinates, resizes derivatives (band and wide widths), updates the ground/scrim color to match the actual artwork sample, and regenerates all derivative image files accordingly. The code changes are internally consistent — CSS, script, and JSX all reference the same new filenames and dimensions.
✅ No issues found.