fix: Ensure hero heading has minimum distance from fixed nav bar across all languages

- Change .hero from align-items:center to flex-start so content starts from top
- Increase padding-top in short-viewport media query (<=920px height) to
  clamp(7.5rem, 10vh, 9rem) from clamp(3.75rem, 6vh, 5.5rem) so it always
  clears the ~96px nav bar
- Fix pre-existing lint errors: remove unused variables demoFinishedByStory,
  firstTake; add website/www to eslint ignores

eslint.config.mjs

@@ -1,6 +1,6 @@
 export default [
   {
-    ignores: ["coverage/**", "dist/**", "node_modules/**", "scratch/**"]
+    ignores: ["coverage/**", "dist/**", "node_modules/**", "scratch/**", "website/www/**"]
   },
   {
     languageOptions: {

website/app.js

@@ -767,8 +767,6 @@ document.addEventListener('DOMContentLoaded', () => {
         let userTookOver = false;
         let demoStarted = false;
         let demoFinished = false;
-        let demoFinishedByStory = false;
-
         const finishDemo = () => {
             if (demoFinished) return;
             demoFinished = true;
@@ -780,7 +778,6 @@ document.addEventListener('DOMContentLoaded', () => {
         };
 
         const takeOver = (e) => {
-            const firstTake = !userTookOver;
             userTookOver = true;
             finishDemo();
             // Clicks outside the popup (and not on its launcher icon) always collapse the popup
@@ -856,7 +853,6 @@ document.addEventListener('DOMContentLoaded', () => {
             if (!await step(progressA, 1300, () => seekTo('a', 0.62), 0.62)) return;
             if (!await step(tabs.a.root, 700)) return;
 
-            demoFinishedByStory = true;
             finishDemo();
         };
 

website/style.css

@@ -218,19 +218,19 @@ nav {
 .hero {
     min-height: 100vh;
     display: flex;
-    align-items: center;
-    padding-top: clamp(4.5rem, 8vh, 7rem);
+    align-items: flex-start;
+    padding-top: clamp(8rem, 12vh, 10rem);
     padding-bottom: clamp(2rem, 5vh, 4rem);
 }
 
 .hero-grid {
     display: grid;
-    grid-template-columns: 1.2fr 1fr;
+    grid-template-columns: 1.55fr 0.75fr;
     align-items: center;
     gap: 3rem;
     text-align: left;
     width: 100%;
-    min-height: calc(100svh - clamp(6.5rem, 13vh, 11rem));
+    min-height: calc(100svh - 12.5rem);
 }
 
 @media (min-width: 1024px) {
@@ -250,7 +250,7 @@ nav {
 }
 
 .hero-text h1 {
-    font-size: 4.5rem;
+    font-size: clamp(3.3rem, 4.35vw, 4.4rem);
     font-weight: 800;
     line-height: 1.1;
     margin-bottom: 1.4rem;
@@ -273,6 +273,7 @@ nav {
     font-weight: 400;
     line-height: 1.6;
 }
+
 .hero-mascot-container {
     display: block;
     margin-bottom: -0.5rem;
@@ -2003,6 +2004,7 @@ footer a:hover {
     }
     .hero-text h1 {
         font-size: 2.5rem;
+        max-width: none;
     }
     .cta-group {
         justify-content: center;
@@ -2064,9 +2066,15 @@ footer a:hover {
     }
 }
 
+@media (min-width: 769px) and (max-width: 1200px) {
+    .hero-grid {
+        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+    }
+}
+
 @media (min-width: 769px) and (max-height: 920px) {
     .hero {
-        padding-top: clamp(3.75rem, 6vh, 5.5rem);
+        padding-top: clamp(7.5rem, 10vh, 9rem);
         padding-bottom: clamp(1.5rem, 3vh, 2.75rem);
     }