Revert canvas sizing to window.innerWidth/innerHeight, gate resize on width change

The container-rect-based sizing (getBoundingClientRect on the parent
element) broke on real mobile Safari - the hero stopped rendering
entirely, most likely a layout-timing dependency window.innerWidth/
innerHeight never had. Revert to the simple, reliable measurement.

For the actual jump: mobile browsers only change window.innerHeight
(not width) as the address bar hides/shows during scroll, firing
`resize` with no real layout change to react to. Genuine resizes
(orientation change, desktop window drag) always change the width
too, so gate the redraw on that instead of reacting to every resize
event or trying to debounce/detect the toolbar animation itself.

yes.js

@@ -54,22 +54,12 @@ export class RasterizedYES {
         if (this._resizeHandler) {
             window.removeEventListener('resize', this._resizeHandler);
         }
-        clearTimeout(this._resizeDebounce);
     }
 
     setupCanvas() {
         const pixelRatio = window.devicePixelRatio || 1;
-        // Sized from the containing .hero-canvas box (CSS-driven by
+        const width = window.innerWidth;
-        // .hero-yes's 100svh), not window.innerWidth/innerHeight
+        const height = window.innerHeight;
-        // directly - mobile Safari fires `resize` continuously as the
-        // address bar hides/shows while scrolling, and innerHeight
-        // tracks that dynamic viewport. Reading the container's own
-        // rendered size instead means a toolbar-only resize recomputes
-        // to the same stable numbers (a no-op redraw) instead of
-        // visibly rescaling the rasterized "YES" text mid-scroll.
-        const rect = this.rasterCanvas.parentElement.getBoundingClientRect();
-        const width = rect.width;
-        const height = rect.height;
 
         this.rasterCanvas.style.width = width + 'px';
         this.rasterCanvas.style.height = height + 'px';
@@ -89,23 +79,16 @@ export class RasterizedYES {
         this.pixelRatio = pixelRatio;
 
         if (!this._resizeHandler) {
-            // Debounced, and a no-op if the size didn't actually
+            // Mobile browsers change window.innerHeight (not width) as
-            // change: assigning canvas.width/height clears the canvas
+            // the address bar hides/shows during scroll, firing a
-            // even when set to its current value, and mobile Safari
+            // `resize` with no real layout change to react to.
-            // fires `resize` repeatedly *during* the address-bar
+            // Genuine resizes (orientation change, desktop window
-            // hide/show animation (not once at the end), so an
+            // drag) always change the width too, so gate the redraw
-            // un-debounced handler was still clearing+redrawing on
+            // on that instead of reacting to every resize event.
-            // every one of those events even after the dimensions
-            // themselves became stable (see setupCanvas above).
             this._resizeHandler = () => {
-                clearTimeout(this._resizeDebounce);
+                if (window.innerWidth === this.displayWidth) return;
-                this._resizeDebounce = setTimeout(() => {
+                this.setupCanvas();
-                    if (this.destroyed) return;
+                this.rasterizeText();
-                    const rect = this.rasterCanvas.parentElement.getBoundingClientRect();
-                    if (rect.width === this.displayWidth && rect.height === this.displayHeight) return;
-                    this.setupCanvas();
-                    this.rasterizeText();
-                }, 150);
             };
             window.addEventListener('resize', this._resizeHandler);
         }