fix: tint Safari 26's bottom bar with the footer's colour

src/layouts/Base.astro

@@ -150,6 +150,7 @@ const jsonLd = {
   </head>
   <body>
     <slot />
+    <div class="edge" aria-hidden="true"></div>
     <script>
       // Reveal each block once, as it enters the viewport.
       const observer = new IntersectionObserver(

src/styles/global.css

@@ -117,6 +117,24 @@ html.at-end {
   background: var(--closing);
 }
 
+/* Safari 26 on iPhone ignores both for its bottom bar: it takes the colour of
+   a fixed element touching the bottom edge. Shown only once the footer is on
+   screen, this strip lies over the footer, in its colour, so it never shows
+   itself; it only gives Safari the footer's green. */
+.edge {
+  display: none;
+  position: fixed;
+  inset-inline: 0;
+  bottom: -8px;
+  height: 12px;
+  background: var(--closing);
+  pointer-events: none;
+}
+
+html.at-end .edge {
+  display: block;
+}
+
 body {
   font-family: var(--font-body);
   color: var(--text);

tests/site.spec.ts

@@ -251,6 +251,14 @@ test("paints past the page's edges in the theme's colour, then the footer's", as
   await page.locator('footer').scrollIntoViewIfNeeded();
   await expect(html).toHaveClass(/at-end/);
   await expect(html).toHaveCSS('background-color', await background('footer'));
+
+  // And Safari 26, which reads a fixed element at the bottom edge instead, finds
+  // one in the footer's colour there, and only there.
+  const edge = page.locator('.edge');
+  await expect(edge).toHaveCSS('background-color', await background('footer'));
+  await expect(edge).toHaveCSS('position', 'fixed');
+  await page.locator('#top').scrollIntoViewIfNeeded();
+  await expect(edge).toBeHidden();
 });
 
 test('counts the visit, and the CV, the thesis, an email and a link out', async ({ page }) => {