diff --git a/api/derive.ts b/api/derive.ts
index 53e4864..5e6a0f1 100644
--- a/api/derive.ts
+++ b/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.