Merge nucleic/rustic-north-robin-niry into main

Mirrored from corpo c7630b2.

src/pages/404.astro

@@ -59,7 +59,17 @@ const description = 'The page you requested does not exist.';
 
   html {
     min-width: 320px;
-    background: var(--paper);
+    /* Longhand, matching index: background-color is the value Safari reads for its
+       chrome and overscroll fills, and the shorthand is how it silently vanishes. */
+    background-color: var(--paper);
+  }
+
+  /* Same as index: no scroll on desktop, so the bounce only exists to expose
+     chrome-side fills the page cannot colour. */
+  @media (min-width: 721px) {
+    html {
+      overscroll-behavior: none;
+    }
   }
 
   body {
@@ -67,7 +77,7 @@ const description = 'The page you requested does not exist.';
     min-width: 320px;
     min-height: 100svh;
     color: var(--ink);
-    background: var(--paper);
+    background-color: var(--paper);
     font-family: 'Archivo', system-ui, sans-serif;
     -webkit-font-smoothing: antialiased;
   }

src/pages/index.astro

@@ -153,7 +153,23 @@ const canonical = new URL('/', Astro.site);
 
   html {
     min-width: 320px;
-    background: var(--paper);
+    /* Longhand on purpose, here and on body: the background-color value is the one
+       thing Safari reads for its fills, and the shorthand form is how it silently
+       goes missing (background: resets background-color when edited carelessly). */
+    background-color: var(--paper);
+  }
+
+  /* Desktop only: the page fits the viewport there, so the rubber band is pure
+     decoration — and macOS Safari fills parts of that bounce from chrome-side
+     surfaces the page cannot colour (the render-time tint sample, the refresh
+     spinner well), which is where the band still leaked through after every
+     page-side colour was right. No bounce, no surface to mis-fill. Phones keep
+     the native feel: the page actually scrolls there, iOS honours body's
+     background-color for the gap, and none would also cost pull-to-refresh. */
+  @media (min-width: 721px) {
+    html {
+      overscroll-behavior: none;
+    }
   }
 
   body {