poster rung at 448, for the density-capped hero

The hero declares a sizes well under its real width on phones so the browser stops multiplying by the
pixel ratio and asks for roughly one image pixel per screen pixel. 448 is the rung that lands on a
412-wide phone once that cap applies; without it the nearest was 512.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

api/derive.ts

@@ -118,16 +118,19 @@ export const SQUARE_LADDER = [256, 384, 480, 640, 960] as const;
  *
  * A hero is full-bleed, so the widths are viewport widths times the density behind them:
  *
- *   412 x 1.75  =  721  ->  768      (the emulated phone, and most of the real ones)
- *   412 x 3     = 1236  -> 1280      (a dense phone, from the full-size poster)
+ *   412 x 1     =  412  ->  448      (a phone, at the density the hero is CAPPED to — see below)
  *   768 x 1     =  768  ->  768      (a tablet)
  *   1280 x 1    = 1280  -> 1280      (a desktop)
  *
+ * The hero declares a `sizes` well under its real width on phones, deliberately, so the browser stops
+ * multiplying by the device pixel ratio and asks for roughly one image pixel per screen pixel. 448 is
+ * the rung that lands on a 412-wide phone once that cap is applied. Without it the nearest was 512.
+ *
  * `poster.webp` keeps its name and stays the widest rung. Everything already refers to it — the
  * placeholder is cut from it, the site falls back to it, and a directory built before this has only
  * that one.
  */
-export const POSTER_LADDER = [384, 512, 768, 1024] as const;
+export const POSTER_LADDER = [448, 512, 768, 1024] as const;
 
 /**
  * WebP quality, by rung.