fix(website): stop hero headline overlapping the film frame (#899)

Reserve headline space and slightly scale down the hero title and film on wide layouts.

Co-authored-by: Ricardo Cabral <me@ricardocabral.io>

Author: Ferryx349

.changeset/website-hero-overlap.md

@@ -0,0 +1,5 @@
+---
+'nostream-website': patch
+---
+
+Prevent the home hero headline from overlapping the hero film on wide viewports by slightly reducing headline and film scale and reserving space above the frame.

website/site/src/components/home/Hero.astro

@@ -25,7 +25,9 @@ import { VERSION } from '../../data/site'
   .stage {
     --pad-y: clamp(18px, 3.5vh, 44px);
     --pad-x: clamp(14px, 3.5vw, 56px);
-    --film-h: calc(100svh - 68px - 2 * var(--pad-y) - 36px);
+    /* Headline band keeps the film from creeping under the h1 on wide layouts. */
+    --hero-headline-band: clamp(72px, 11vh, 96px);
+    --film-h: calc(100svh - 68px - 2 * var(--pad-y) - 36px - var(--hero-headline-band));
 
     position: relative;
     z-index: 0;
@@ -45,10 +47,10 @@ import { VERSION } from '../../data/site'
     position: absolute;
     z-index: 3;
     left: var(--pad-x);
-    top: clamp(12px, 2.2vh, 26px);
-    max-width: min(560px, calc(100% - 2 * var(--pad-x)));
+    top: clamp(12px, 2.2vh, 22px);
+    max-width: min(520px, calc(100% - 2 * var(--pad-x)));
     margin: 0;
-    font-size: clamp(24px, 3vw, 38px);
+    font-size: clamp(22px, 2.65vw, 34px);
     line-height: 1.12;
     letter-spacing: -0.02em;
     pointer-events: none;
@@ -86,12 +88,12 @@ import { VERSION } from '../../data/site'
   .stage :global(.hero-film) {
     position: absolute;
     z-index: 2;
-    top: 50%;
+    top: calc(50% + var(--hero-headline-band) * 0.22);
     right: var(--pad-x);
     transform: translateY(-50%);
-    width: min(1320px, 86vw, calc(var(--film-h) * 16 / 9));
+    width: min(1180px, 80vw, calc(var(--film-h) * 16 / 9));
     max-width: calc(100% - 2 * var(--pad-x));
-    max-height: calc(var(--film-h) + 36px);
+    max-height: var(--film-h);
   }
 
   .stage :global(.hero-film .film-crisp.screen) {