df

src/components/Header.astro

@@ -58,6 +58,14 @@ const isCurrent = (href: string) => href.split('#')[0] === path && !href.include
   }
   .header__shell {
     padding-block: var(--space-3);
+    transition:
+      max-width var(--dur-slow) var(--ease),
+      padding-inline var(--dur-slow) var(--ease);
+  }
+  /* Once the page scrolls, the bar widens from the content column to the viewport. */
+  .header[data-scrolled] .header__shell {
+    max-width: 100%;
+    padding-inline: var(--header-inset-scrolled);
   }
   .header__bar {
     pointer-events: auto;
@@ -204,6 +212,18 @@ const isCurrent = (href: string) => href.split('#')[0] === path && !href.include
     nav.addEventListener('click', (e) => { if ((e.target as HTMLElement).closest('a')) set(false); });
   }
 
+  /* Scrolled: a one-pixel marker at the very top of the document; once it leaves the viewport
+     the page has scrolled. An IntersectionObserver, so nothing runs on scroll. */
+  if (header && 'IntersectionObserver' in window) {
+    const marker = document.createElement('div');
+    marker.setAttribute('aria-hidden', 'true');
+    marker.style.cssText = 'position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none;';
+    document.body.prepend(marker);
+    new IntersectionObserver(([entry]) => {
+      header.toggleAttribute('data-scrolled', !entry.isIntersecting);
+    }).observe(marker);
+  }
+
   /* Tone: watch a one-pixel line through the middle of the bar and switch to night while a
      .night section crosses it. An IntersectionObserver, so nothing runs on scroll. */
   const sections = document.querySelectorAll<HTMLElement>('.night');