Fix mobile

src/components/Header.astro

@@ -56,7 +56,7 @@ const isCurrent = (href: string) => href.split('#')[0] === path && !href.include
     pointer-events: none;
   }
   .header__shell {
-    padding-block: var(--space-3);
+    padding-block: calc(var(--space-3) + var(--safe-top)) var(--space-3);
     transition:
       max-width var(--dur-slow) var(--ease),
       padding var(--dur-slow) var(--ease);
@@ -68,8 +68,11 @@ const isCurrent = (href: string) => href.split('#')[0] === path && !href.include
     max-width: 100%;
     padding: 0;
   }
+  /* Docked, the glass also fills the status-bar strip, so scrolled content never shows behind the
+     clock; the bar's contents stay below it. */
   .header[data-scrolled] .header__bar {
-    min-height: var(--header-height);
+    min-height: var(--header-offset);
+    padding-top: var(--safe-top);
     border-width: 0 0 var(--line);
   }
   .header[data-scrolled] .header__bar::after { content: none; }

src/components/home/Hero.astro

@@ -48,7 +48,7 @@ const ui = t(lang);
     align-items: flex-end;
     /* Runs up under the floating header so the glass bar sits on the image, fills the screen,
        and is never less than the headline needs. */
-    margin-top: calc(-1 * var(--header-height));
+    margin-top: calc(-1 * var(--header-offset));
     min-height: max(28rem, 100svh);
     overflow: hidden;
   }

src/components/home/Stages.astro

@@ -35,7 +35,7 @@ const objects = ['sphere', 'cube', 'plane', 'wave'] as const;
     gap: var(--space-6);
     padding: var(--space-6) var(--space-6) var(--space-7);
     background: var(--paper-deep);
-    scroll-margin-top: calc(var(--header-height) + var(--space-5));
+    scroll-margin-top: calc(var(--header-offset) + var(--space-5));
   }
   .stages__title {
     font-size: var(--step-title);

src/components/team/Research.astro

@@ -216,7 +216,7 @@ const fieldStyle = (paper: (typeof papers)[number]) =>
     gap: var(--space-4);
   }
 
-  .research__list { margin-top: var(--space-6); scroll-margin-top: calc(var(--header-height) + var(--space-5)); }
+  .research__list { margin-top: var(--space-6); scroll-margin-top: calc(var(--header-offset) + var(--space-5)); }
   .research__item[hidden] { display: none; }
 
   .paper__meta {

src/components/verifier/SoonHero.astro

@@ -98,7 +98,7 @@ const ridges = Array.from({ length: rows }, (_, r) => {
   .shero {
     position: relative;
     /* Runs up under the floating header, as the home hero does, so the bar takes the night tone. */
-    margin-top: calc(-1 * var(--header-height));
+    margin-top: calc(-1 * var(--header-offset));
     overflow: hidden;
   }
   .shero__media { position: absolute; inset: 0; animation: shero-settle var(--dur-hero) var(--ease) both; transform-origin: 60% 50%; }
@@ -121,7 +121,7 @@ const ridges = Array.from({ length: rows }, (_, r) => {
     position: relative;
     display: grid;
     gap: var(--space-8);
-    padding-top: calc(var(--header-height) + var(--space-7));
+    padding-top: calc(var(--header-offset) + var(--space-7));
     min-height: 100svh;
     align-content: end;
   }

src/layouts/Base.astro

@@ -28,12 +28,14 @@ const altDe = new URL(switchLang(Astro.url, 'de'), Astro.site);
 <html lang={lang}>
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <title>{fullTitle}</title>
     <meta name="description" content={description} />
     {noindex && <meta name="robots" content="noindex" />}
     <meta name="color-scheme" content="light" />
-    <meta name="theme-color" content="#E9E5DF" />
+    <!-- Tints the browser chrome (the iOS status bar) to match the surface the page opens on:
+         --night for a dark hero, --paper otherwise. -->
+    <meta name="theme-color" content={tone === 'night' ? '#0E100F' : '#E9E5DF'} />
     <link rel="canonical" href={canonical} />
     <link rel="alternate" hreflang="en" href={altEn} />
     <link rel="alternate" hreflang="de" href={altDe} />

src/styles/base.css

@@ -43,7 +43,7 @@ html {
   -webkit-text-size-adjust: 100%;
   scroll-behavior: smooth;
 }
-[id] { scroll-margin-top: var(--header-height); }
+[id] { scroll-margin-top: var(--header-offset); }
 body {
   min-height: 100dvh;
   background: var(--paper);
@@ -146,7 +146,8 @@ p { overflow-wrap: break-word; }
   width: 100%;
   max-width: var(--container);
   margin-inline: auto;
-  padding-inline: var(--gutter);
+  padding-left: max(var(--gutter), var(--safe-left));
+  padding-right: max(var(--gutter), var(--safe-right));
 }
 .grid {
   display: grid;

src/styles/tokens.css

@@ -137,6 +137,13 @@
 
   /* Chrome */
   --header-height: 4.5rem;
+  /* With viewport-fit=cover the page runs under the iOS status bar and notch; these are the
+     strips the system keeps for itself (zero everywhere else). */
+  --safe-top:   env(safe-area-inset-top, 0px);
+  --safe-left:  env(safe-area-inset-left, 0px);
+  --safe-right: env(safe-area-inset-right, 0px);
+  /* What a full-bleed hero pulls up under: the header plus the status bar above it. */
+  --header-offset: calc(var(--header-height) + var(--safe-top));
 
   /* HUD frame (menu bar): one line width and colour for every line, borders and crosses alike. */
   --hud-line-width: 1px;