Hero: clip the bleed at the header, never overflow the document

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

hero.js

@@ -28,10 +28,13 @@ const COUNT = 47;
 const BLEED = `${((OVERSCAN - 1) / 2) * -100}%`;
 
 const STYLE_TEXT = `
-/* The field bleeds 25% past the hero piece on every side; clip the
-   document sideways (clip, not hidden: no scroll container) so the
-   bleed can never cause horizontal scrolling. */
-html { overflow-x: clip; }
+/* The field bleeds 25% past the hero piece on every side. Sideways
+   it is clipped at the header box (clip, not hidden: no scroll
+   container, and overflow-y stays visible) - an element wider than
+   the viewport, even unscrollable, makes phones re-size the layout
+   viewport when it appears, which read as the page jumping as the
+   input loaded. Vertically it may run into the copy below. */
+.hero-module { overflow-x: clip; overflow-y: visible; }
 .redoal-paths {
   position: absolute;
   inset: ${BLEED};