Hero becomes a content-owned module; site asset proxy; gesture growth fix

site.yaml's hero is now plain | module, where module names a
JavaScript file the content repo ships (mount(container) -> handle
with stop()). Portal serves content assets same-origin at
/site/<path> (Gitea raw sends no CORS headers), starts the module at
HTML parse time, adopts it on hydration, mounts fresh via the inline
script's __mountHero on client-side navigation, and stops it on
leave. The YES canvas (yes.js) and the gesture hero mode leave the
engine - uhhm/questions ships YES as its hero.js, redoal/questions
ships a sine-swings band. Gesture form canvas no longer balloons after
a stroke: the wrap's aspect-ratio reservation is scoped to :empty
(pre-mount) so it can't turn echo-strip height into width inside the
flex field.

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

style/main.css

@@ -51,7 +51,7 @@
   --ink-dim: #9a9a9a;
   --line: #2a2a2a;
 
-  /* Cards float over the sticky YES canvas - translucent so the piece
+  /* Cards float over a sticky hero piece - translucent so the piece
      reads faintly through them (paired with backdrop-filter on
      .alt-card), shadowed so their edge against the animated backdrop
      is a soft lift rather than a hard contrast line. */
@@ -78,8 +78,9 @@
 /* Light theme: the same muted-press idea on white stock - warm paper,
    near-black ink, and the accent deepened from dusty cyan to a teal
    ink that actually carries as text on light paper (the dark theme's
-   #8ec2c0 washes out there). yes.js mirrors this palette on its own
-   (matchMedia in setupTheme) since canvas paint can't read CSS vars. */
+   #8ec2c0 washes out there). Canvas-drawing modules (gesture.js, and
+   content-shipped hero modules) mirror this palette on their own,
+   since canvas paint can't read CSS vars. */
 @media (prefers-color-scheme: light) {
   :root {
     --accent: #47807e;
@@ -105,12 +106,6 @@
     filter: invert(0.92);
   }
 
-  /* overlay against near-white paper resolves to ~white and the
-     raster ghost vanishes; multiply lets the light theme's gray YES
-     (see rasterizeText's themed repaint in yes.js) show as ink. */
-  .hero-canvas #rasterCanvas {
-    mix-blend-mode: multiply;
-  }
 }
 
 * {
@@ -200,98 +195,17 @@ main.not-found {
   max-width: 46ch;
 }
 
-/* the actual "YES - Rasterized Lines" piece live at uhhm.no (see
-   public/yes.js) - landing page only. Full-viewport so it's a real
-   moment, not a thumbnail; hero-copy overlays near the bottom rather
-   than interrupting the canvas. */
-
-.hero-yes {
-  /* Sticky at the viewport top for the whole scroll (its containing
-     block is the page itself), so the piece stays animating behind
-     everything that follows - the translucent cards scroll over it
-     and it shows through them and in the gaps around them. z-index 0
-     so positioned content below can stack above with z-index 1. */
-  position: sticky;
-  top: 0;
-  z-index: 0;
-  max-width: none;
-  width: 100%;
-  /* svh here is only the pre-JS/no-JS fallback (and first paint before
-     yes.js's constructor runs). Once yes.js mounts, it overwrites this
-     with an inline `height: <px>` frozen from a single measurement -
-     see setupCanvas()'s comment in yes.js for why: on real mobile
-     Safari, content bottom-aligned inside this box kept sliding down
-     as the address bar collapsed even with a spec'd-stable viewport
-     unit here, so the box's actual height can't be trusted to stay
-     put on that unit alone. An inline style set from JS always wins
-     the cascade over this rule, so that frozen number is what
-     actually governs once the page is interactive.
-     Plain-vh fallback declared first - an engine without svh support
-     ignores the invalid second line rather than falling through to
-     auto height, which would collapse this to the height of its
-     in-flow content and clip the canvas via overflow:hidden below. */
-  height: 100vh;
-  height: 100svh;
-  padding: 0;
-  justify-content: flex-end;
-  overflow: hidden;
-}
-
-.hero-canvas {
-  position: absolute;
-  inset: 0;
-}
-
-.hero-canvas canvas {
-  position: absolute;
-  top: 0;
-  left: 0;
-  cursor: pointer;
-}
-
-.hero-canvas #rasterCanvas {
-  mix-blend-mode: overlay;
-  opacity: 0.5;
-}
-
-.hero-yes .hero-copy {
-  position: relative;
-  z-index: 1;
-  padding: 0 1.5rem 3.5rem;
-  gap: 0.6rem;
-  text-shadow: 0 0.12em 1.4em var(--hero-glow);
-}
-
-/* The gesture hero (site.yaml hero.kind: gesture - redoal.com's
-   landing): a tall drawing surface where the visitor's stroke and
-   ambient echoes from the relay share the stage. Not sticky like the
-   YES piece - drawing and scrolling fight over the same finger. */
-.hero-gesture .hero-draw {
+/* A content-shipped hero module (site.yaml hero.kind: module) draws
+   into .hero-piece; the module owns its look (it may restyle .hero
+   itself). Portal only reserves the box so the copy doesn't jump when
+   the module mounts - plain-vh fallback first, as everywhere. */
+.hero-module .hero-piece {
   position: relative;
   width: 100%;
-  max-width: 46rem;
-  /* Same jump-avoidance as .gesture-wrap: the canvas (55svh tall)
-     only exists after hydration, so hold its height open from the
-     first paint. Plain-vh fallback first, like the canvas itself. */
   min-height: 55vh;
   min-height: 55svh;
 }
 
-.hero-gesture .gesture-canvas {
-  aspect-ratio: auto;
-  /* Plain-vh fallback first, same reasoning as .hero-yes's height. */
-  height: 55vh;
-  height: 55svh;
-  border: none;
-  background: transparent;
-}
-
-.hero-gesture .gesture-status {
-  top: auto;
-  bottom: 0.55rem;
-  right: 0.55rem;
-}
-
 /* alternatives */
 
 /* position + z-index on these three: everything that scrolls over the
@@ -564,10 +478,16 @@ textarea:focus {
    custom properties - so palette changes go there AND here. */
 .gesture-wrap {
   position: relative;
-  /* The canvas is created by JS only after wasm hydration - reserve
-     its 3/2 box now so content below doesn't jump when it appears.
-     aspect-ratio is a preferred size, so the box still grows when the
-     echo thumbnail strip shows up under the canvas. */
+  width: 100%;
+}
+
+/* The canvas is created by JS only after wasm hydration - reserve its
+   3/2 box until then so content below doesn't jump. Scoped to :empty
+   on purpose: on the mounted wrap (a stretched item inside the flex
+   .field) the same aspect-ratio turned the echo strip's extra height
+   into extra WIDTH and the whole card ballooned past the viewport
+   after the first stroke. */
+.gesture-wrap:empty {
   aspect-ratio: 3 / 2;
 }