feat(home): swap in the higher-fidelity hero artwork

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>

nextjs-app/app/globals.css

@@ -193,13 +193,17 @@
        drawn SVG, so its colours are in the file, not here. What is left is the
        ground the artwork sits on and fades into.
 
-       --hero-ground is sampled from the artwork's own copy area (#FDF9F3),
-       not from Sand. The artwork reserves an empty cream region on the left
-       for the headline, and the scrim that guarantees text contrast fades from
-       this colour into it — a scrim in Sand (#F5EFE6, eight to thirteen points
-       darker per channel) leaves a visible seam straight down the hero. */
-    --hero-ground: #FDF9F3;
-    --hero-ground-rgb: 253, 249, 243;
+       --hero-ground is sampled from the artwork's own copy area, not from
+       Sand — a scrim in Sand (#F5EFE6) is far enough off to leave a visible
+       seam straight down the hero.
+
+       The artwork's copy area is not one flat colour: it runs from a peach
+       #FEE8D2 at the top to a cream #FDF3E7 around 43% height, and below ~48%
+       the left edge is foliage rather than cream. This value is sampled from
+       the middle of that pale run, where the headline and search actually sit;
+       the scrim is what covers the foliage further down. */
+    --hero-ground: #FEF2E1;
+    --hero-ground-rgb: 254, 242, 225;
 
     /* ── Geometry & motion ──────────────────────────────────────────────
        "Soft shapes, rounded corners" — the guideline's geometry is markedly

nextjs-app/components/HomeView.module.css

@@ -323,15 +323,21 @@
     padding: 1.75rem 1.5rem 1.75rem;
     max-width: none;
   }
+  /* 13rem, not 11: at 860px an 11rem band is 4.5:1, and squeezing the 3.2:1
+     crop into that throws away enough height to cut the flag off the roof and
+     the base off the building. 13rem holds it at about 3.8:1, where the
+     building stays whole. */
   .heroArt {
     position: static;
     order: -1;
-    height: 11rem;
+    height: 13rem;
   }
-  /* The band crop centres the schoolhouse at about 65% across, so squeezing
-     toward 4.9:1 crops the empty sides rather than the subject. */
+  /* The band crop puts the schoolhouse at 73% across — reported by
+     scripts/build-hero-images.js, which derives it from the crop box rather
+     than leaving the two to drift. Squeezing narrower then crops the emptier
+     left side rather than the subject. */
   .heroArt img {
-    object-position: 65% center;
+    object-position: 73% center;
   }
   /* The scrim exists to protect text sitting on the artwork. Nothing sits on
      it here, and leaving it would wash the band out. */
@@ -372,8 +378,12 @@
     font-size: 1.75rem;
     margin-bottom: 0.5rem;
   }
+  /* 10rem, not 8.5: the band is widest-per-height right at this breakpoint —
+     at 640px an 8.5rem band is 4.2:1, worse than anything above it, because
+     the height steps down here while the width does not. 10rem keeps it near
+     3.6:1, in line with the rest of the range. */
   .heroArt {
-    height: 8.5rem;
+    height: 10rem;
   }
 }
 

nextjs-app/components/Illustration.tsx

@@ -40,8 +40,8 @@
 const SIZES = '(min-width: 1400px) 1352px, (min-width: 769px) calc(100vw - 3rem), calc(100vw - 2rem)';
 
 /** Intrinsic size of the wide crop — the aspect hint that prevents reflow. */
-const WIDE_W = 1672;
-const WIDE_H = 941;
+const WIDE_W = 2000;
+const WIDE_H = 1125;
 
 export function HeroIllustration() {
   return (
@@ -51,13 +51,13 @@ export function HeroIllustration() {
       <source
         media="(max-width: 860px)"
         type="image/avif"
-        srcSet="/brand/hero-band-500.avif 500w, /brand/hero-band-700.avif 700w, /brand/hero-band-972.avif 972w"
+        srcSet="/brand/hero-band-600.avif 600w, /brand/hero-band-900.avif 900w, /brand/hero-band-1344.avif 1344w"
         sizes={SIZES}
       />
       <source
         media="(max-width: 860px)"
         type="image/webp"
-        srcSet="/brand/hero-band-500.webp 500w, /brand/hero-band-700.webp 700w, /brand/hero-band-972.webp 972w"
+        srcSet="/brand/hero-band-600.webp 600w, /brand/hero-band-900.webp 900w, /brand/hero-band-1344.webp 1344w"
         sizes={SIZES}
       />
       {/*
@@ -71,15 +71,15 @@ export function HeroIllustration() {
         media query does, and it sits after the modern formats so they still
         win where supported.
       */}
-      <source media="(max-width: 860px)" srcSet="/brand/hero-band-700.jpg" />
+      <source media="(max-width: 860px)" srcSet="/brand/hero-band-900.jpg" />
       <source
         type="image/avif"
-        srcSet="/brand/hero-wide-900.avif 900w, /brand/hero-wide-1200.avif 1200w, /brand/hero-wide-1672.avif 1672w"
+        srcSet="/brand/hero-wide-1000.avif 1000w, /brand/hero-wide-1400.avif 1400w, /brand/hero-wide-2000.avif 2000w"
         sizes={SIZES}
       />
       <source
         type="image/webp"
-        srcSet="/brand/hero-wide-900.webp 900w, /brand/hero-wide-1200.webp 1200w, /brand/hero-wide-1672.webp 1672w"
+        srcSet="/brand/hero-wide-1000.webp 1000w, /brand/hero-wide-1400.webp 1400w, /brand/hero-wide-2000.webp 2000w"
         sizes={SIZES}
       />
       {/*
@@ -90,7 +90,7 @@ export function HeroIllustration() {
       */}
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
-        src="/brand/hero-wide-1200.jpg"
+        src="/brand/hero-wide-1400.jpg"
         alt=""
         aria-hidden="true"
         width={WIDE_W}

nextjs-app/public/brand/CREDITS.md

@@ -24,7 +24,7 @@ The landing hero illustration: a path climbing through hills to a schoolhouse,
 with an empty cream area on the left reserved for the headline.
 
 - **Source:** supplied by the project owner
-- **Master:** `nextjs-app/assets/hero-source.png` (1672×941 PNG), committed so
+- **Master:** `nextjs-app/assets/hero-source.png` (2000×1125 PNG), committed so
   the derivatives can be regenerated
 - **Derivatives:** `node scripts/build-hero-images.js` — never hand-edit these
 - **Licence:** **to be confirmed by the project owner**

nextjs-app/scripts/build-hero-images.js

@@ -45,14 +45,24 @@ const SRC = path.join(__dirname, '..', 'assets', 'hero-source.png');
 const OUT = path.join(__dirname, '..', 'public', 'brand');
 
 /*
- * Band crop, in source pixels. The schoolhouse occupies roughly x 1180–1540,
- * y 300–520, so this keeps it whole with headroom above the flag and enough
- * hillside below to read as landscape rather than as a cutout.
+ * Band crop, in source pixels, measured against the artwork rather than
+ * guessed: the schoolhouse spans roughly x 1420–1860, y 420–660, with its flag
+ * up at y 330.
+ *
+ * The crop is flush to the right edge because it has to be. The school sits at
+ * about 82% across the frame, so there is only ~140px of artwork to its right
+ * — not enough to centre it. Anchoring right and taking 1050px back puts the
+ * school at ~66% across the crop, which is what BAND_FOCUS_X below reports to
+ * the CSS so the narrowest band crops the empty left side rather than the
+ * subject.
  */
-const BAND = { left: 700, top: 260, width: 972, height: 380 };
+const BAND = { left: 656, top: 300, width: 1344, height: 420 };
 
-const WIDE_WIDTHS = [1672, 1200, 900];
-const BAND_WIDTHS = [972, 700, 500];
+/** Where the schoolhouse lands in the band crop, for CSS object-position. */
+const BAND_FOCUS_X = Math.round(((1420 + 1860) / 2 - BAND.left) / BAND.width * 100);
+
+const WIDE_WIDTHS = [2000, 1400, 1000];
+const BAND_WIDTHS = [1344, 900, 600];
 
 async function emit(pipeline, name, width) {
   const base = pipeline.clone().resize({ width, withoutEnlargement: true });
@@ -67,25 +77,26 @@ async function main() {
 
   const meta = await sharp(SRC).metadata();
   console.log(`source ${meta.width}×${meta.height}`);
+  console.log(`band focus x: ${BAND_FOCUS_X}% (keep .heroArt object-position in step)`);
 
   const wide = sharp(SRC);
   for (const w of WIDE_WIDTHS) await emit(wide, 'hero-wide', w);
   // Fallback for the <img> itself. Flattened onto the artwork's own cream so a
   // JPEG (no alpha) can never composite against black.
   await sharp(SRC)
-    .resize({ width: 1200 })
-    .flatten({ background: '#FDF9F3' })
+    .resize({ width: 1400 })
+    .flatten({ background: '#FEF2E1' })
     .jpeg({ quality: 82, mozjpeg: true })
-    .toFile(path.join(OUT, 'hero-wide-1200.jpg'));
+    .toFile(path.join(OUT, 'hero-wide-1400.jpg'));
 
   const band = sharp(SRC).extract(BAND);
   for (const w of BAND_WIDTHS) await emit(band, 'hero-band', w);
   await sharp(SRC)
     .extract(BAND)
-    .resize({ width: 700 })
-    .flatten({ background: '#FDF9F3' })
+    .resize({ width: 900 })
+    .flatten({ background: '#FEF2E1' })
     .jpeg({ quality: 82, mozjpeg: true })
-    .toFile(path.join(OUT, 'hero-band-700.jpg'));
+    .toFile(path.join(OUT, 'hero-band-900.jpg'));
 
   const files = fs.readdirSync(OUT).filter(f => f.startsWith('hero-')).sort();
   let total = 0;