refactor: clarify mobile hero geometry

tests/mobile-homepage.spec.js

@@ -21,16 +21,25 @@ test("mobile header preserves its layout and uses the designed hamburger", async
     await page.goto(homepage);
 
     const header = await getBox(page.locator(".site-header"));
-    const toggle = page.locator(".nav-main__toggle");
+    const logo = await getBox(page.locator(".site-header__logo"));
+    const toggle = page.locator(".nav-main__toggle").first();
     const toggleBox = await getBox(toggle);
+    const hamburgerIcon = toggle.locator(".nav-toggle-hamburger svg");
+    const closeIcon = toggle.locator(".nav-toggle-x svg");
 
     expectNear(header.height, 70, 2);
+    expectNear(logo.x, 16, 2);
+    expectNear(logo.width, 116, 2);
+    expectNear(logo.height, 36, 2);
     expectNear(toggleBox.width, 72, 2);
     expectNear(toggleBox.height, 45, 2);
     await expect(toggle).toHaveCSS(
         "background-color",
         "oklch(0.6353 0.1751 29.61)",
     );
+    await expect(toggle).toHaveCSS("border-radius", "22.4px 5.6px");
+    await expect(hamburgerIcon).toHaveCSS("fill", "oklch(1 0 0)");
+    await expect(closeIcon).toHaveCSS("stroke", "oklch(1 0 0)");
 });
 
 test("mobile hero matches the 402px reference composition", async ({

views/blocks/homepage-hero/homepage-hero.css

@@ -58,19 +58,24 @@
 @media (max-width: 767px) {
     .homepage-hero {
         --hgtHero: clamp(37.5rem, 187vw, 47rem);
+        --hero-content-inset: clamp(1.25rem, 8vw, 2rem);
+        /* Preserve the 402px crop, then grow the linework to the 767px edge. */
+        --hero-vector-inline-start: max(-8vw, calc(63.8vw - 18.04rem));
+        --hero-vector-width: calc(100vw + 22.875rem);
 
         min-height: var(--hgtHero);
     }
 
-    .homepage-hero .content-wrapper {
-        padding-inline: clamp(1.25rem, 8vw, 2rem) !important;
-    }
-
     .homepage-hero .content-wrapper > div {
-        margin-left: clamp(1.25rem, 8vw, 2rem);
+        margin-left: var(--hero-content-inset);
-        max-width: 21.25rem;
         padding-top: clamp(3rem, 14vw, 3.75rem);
         text-align: left;
+        width: min(
+            21.25rem,
+            calc(
+                100vw - var(--hero-content-inset) - var(--hero-content-inset)
+            )
+        );
     }
 
     .homepage-hero .intro h1 {
@@ -112,9 +117,9 @@
 
     .homepage-hero .heroVector .vector {
         bottom: 6.25rem;
-        left: max(-8vw, calc(63.8vw - 18.04rem));
+        left: var(--hero-vector-inline-start);
         transform: translateX(-50%);
-        width: calc(100vw + 22.875rem);
+        width: var(--hero-vector-width);
     }
 
     .homepage-hero .heroMedia img,