Fix mobile

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;