diff --git a/src/components/Header.astro b/src/components/Header.astro
index 9d1c0e72..a9677875 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -3,54 +3,100 @@
  * Global site header.
  */
 import { GITHUB_URL, DOCUMENTATION_URL } from "../const"
-import {
-  MagnifyingGlassIcon,
-  Bars2Icon,
-  XMarkIcon,
-} from "@heroicons/react/24/solid/index.js"
+import { MagnifyingGlassIcon, Bars2Icon } from "@heroicons/react/24/solid/index.js"
 import SponsorsBanner from "./SponsorsBanner.astro"
 import ThemeToggle from "./ThemeToggle.astro"
+
+// Links leave the bar from the end as it runs out of room, so this is also
+// least-important-last.
+const navItems = [
+  { label: "Get Started", href: "/get-started" },
+  { label: "Download", href: "/download" },
+  { label: "Docs", href: DOCUMENTATION_URL, external: true },
+  { label: "Blog", href: "/blog" },
+  { label: "GitHub", href: GITHUB_URL, external: true },
+  { label: "❤️ Sponsor DDEV", href: "/sponsor" },
+]
 ---
 
 <script>
-  const menuToggle = document.getElementById("mobile-trigger")
-  const menuClose = document.getElementById("mobile-close")
-  const menuContainer = document.getElementById("mobile-menu")
-  let expanded = false
+  const nav = document.getElementById("main-nav")
+  const list = document.getElementById("nav-links")
+  const logo = document.getElementById("nav-logo")
+  const icons = document.getElementById("nav-icons")
+  const menu = document.getElementById("nav-menu") as HTMLDetailsElement | null
 
-  const initListeners = () => {
-    menuToggle.addEventListener("click", () => {
-      toggleMenu()
-    })
+  const HIDDEN = "data-nav-hidden"
 
-    menuClose.addEventListener("click", () => {
-      toggleMenu(true)
-    })
+  // Links leave the bar one at a time as it fills up, instead of all at once at
+  // a breakpoint that can only guess whether they fit. Opening and closing the
+  // menu is the browser's job, so there's none of it here.
+  if (nav && list && logo && icons && menu) {
+    const items = Array.from(list.querySelectorAll<HTMLElement>("[data-nav-item]"))
+    const menuItems = Array.from(menu.querySelectorAll<HTMLElement>("[data-nav-item]"))
 
-    window.addEventListener(
-      "resize",
-      (event) => {
-        let width = document.body.clientWidth
-        if (width > 1024) {
-          toggleMenu(true)
-        }
-      },
-      true
-    )
-  }
+    let itemWidths: number[] = []
+    let gap = 0
 
-  const toggleMenu = (forceClosed?: boolean) => {
-    if (expanded || forceClosed) {
-      menuContainer.classList.remove("open")
-      expanded = false
-    } else {
-      menuContainer.classList.add("open")
-      expanded = true
+    // Nothing here yields, so no paint happens while `elements` are shown.
+    const unhidden = <T,>(elements: HTMLElement[], read: () => T): T => {
+      const hidden = elements.filter((element) => element.hasAttribute(HIDDEN))
+      hidden.forEach((element) => element.removeAttribute(HIDDEN))
+      const value = read()
+      hidden.forEach((element) => element.setAttribute(HIDDEN, ""))
+      return value
     }
-  }
 
-  if (menuToggle && menuClose && menuContainer) {
-    initListeners()
+    // Link widths don't change with the viewport, so they're measured once.
+    const measure = () => {
+      gap = parseFloat(getComputedStyle(list).columnGap) || 0
+      itemWidths = unhidden(items, () =>
+        items.map((item) => item.getBoundingClientRect().width)
+      )
+    }
+
+    const widthOf = (visible: Set<number>) => {
+      if (!visible.size) return 0
+      let width = gap * (visible.size - 1)
+      visible.forEach((index) => {
+        width += itemWidths[index]
+      })
+      return width
+    }
+
+    const fit = () => {
+      const style = getComputedStyle(nav)
+      const inner =
+        nav.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight)
+      // The menu counts as showing even when it isn't, so hiding it can only
+      // free space and this can't oscillate.
+      const reserved =
+        logo.getBoundingClientRect().width +
+        unhidden([menu], () => icons.getBoundingClientRect().width) +
+        gap
+      const available = inner - reserved
+
+      const visible = new Set(items.map((_, index) => index))
+      for (let index = items.length - 1; index >= 0; index--) {
+        if (widthOf(visible) <= available) break
+        visible.delete(index)
+      }
+
+      items.forEach((item, index) => {
+        item.toggleAttribute(HIDDEN, !visible.has(index))
+        menuItems[index].toggleAttribute(HIDDEN, visible.has(index))
+      })
+
+      const complete = visible.size === items.length
+      menu.toggleAttribute(HIDDEN, complete)
+      if (complete) menu.open = false
+    }
+
+    // Takes over from the `lg` fallback in the markup (see global.css).
+    nav.classList.add("nav-measured")
+    measure()
+    fit()
+    new ResizeObserver(fit).observe(nav)
   }
 </script>
 
@@ -60,10 +106,11 @@ import ThemeToggle from "./ThemeToggle.astro"
   <!-- Gutters match the rest of the site's containers, so the logo lines up
        with the page content at every width. -->
   <nav
+    id="main-nav"
     class="flex justify-between items-center content-center site-container site-gutter"
     aria-label="Main"
   >
-    <a href="/" class="relative block cursor-pointer -ml-2">
+    <a href="/" id="nav-logo" class="relative block shrink-0 cursor-pointer -ml-2">
       <span class="sr-only">DDEV logo</span>
       <img
         class="h-8 w-auto sm:h-10 dark:hidden"
@@ -82,113 +129,54 @@ import ThemeToggle from "./ThemeToggle.astro"
         height="69"
       />
     </a>
-    <div class="w-2/3 flex justify-end items-center gap-6">
-      <ul class="hidden lg:flex items-center gap-6">
-        <li>
-          <a
-            class="font-bold whitespace-nowrap dark:text-white"
-            href="/get-started"
-            rel="prefetch">Get Started</a
-          >
-        </li>
-        <li>
-          <a
-            class="font-bold whitespace-nowrap dark:text-white"
-            href="/download"
-            rel="prefetch">Download</a
-          >
-        </li>
-        <li>
-          <a
-            class="font-bold whitespace-nowrap dark:text-white"
-            href={DOCUMENTATION_URL}
-            target="_blank">Docs</a
-          >
-        </li>
-        <li>
-          <a class="font-bold whitespace-nowrap dark:text-white" href="/blog" rel="prefetch"
-            >Blog</a
-          >
-        </li>
-        <li>
-          <a
-            class="font-bold whitespace-nowrap dark:text-white"
-            href={GITHUB_URL}
-            target="_blank">GitHub</a
-          >
-        </li>
-        <li>
-          <a
-            class="font-bold whitespace-nowrap dark:text-white"
-            href="/sponsor"
-            rel="prefetch">❤️ Sponsor DDEV</a
-          >
-        </li>
+    <div class="flex shrink-0 justify-end items-center gap-6">
+      <ul id="nav-links" class="nav-links hidden lg:flex shrink-0 items-center gap-6">
+        {
+          navItems.map((item, index) => (
+            <li class="shrink-0" data-nav-item={index}>
+              <a
+                class="font-bold whitespace-nowrap dark:text-white"
+                href={item.href}
+                target={item.external ? "_blank" : undefined}
+                rel={item.external ? undefined : "prefetch"}
+              >
+                {item.label}
+              </a>
+            </li>
+          ))
+        }
       </ul>
-      <div class="flex items-center gap-3">
+      <div id="nav-icons" class="flex shrink-0 items-center gap-3">
         <a href="/search" class="p-1 dark:text-white">
           <span class="sr-only">Search</span>
           <MagnifyingGlassIcon className="w-6 h-6 " aria-hidden={true} />
         </a>
         <ThemeToggle />
-        <button id="mobile-trigger" class="flex lg:hidden p-1">
-          <span class="sr-only">Menu</span>
-          <Bars2Icon className="w-6 h-6 dark:text-white" />
-        </button>
+        <!-- `details` rather than a button and a script, so the links are still
+             reachable with JavaScript turned off. -->
+        <details id="nav-menu" class="nav-menu lg:hidden">
+          <summary class="nav-summary">
+            <span class="sr-only">Menu</span>
+            <Bars2Icon className="w-6 h-6 dark:text-white" />
+          </summary>
+          <ul class="menu">
+            {
+              navItems.map((item, index) => (
+                <li data-nav-item={index}>
+                  <a
+                    class="font-bold block py-3 px-4 text-lg border-t border-dotted"
+                    href={item.href}
+                    target={item.external ? "_blank" : undefined}
+                    rel={item.external ? undefined : "prefetch"}
+                  >
+                    {item.label}
+                  </a>
+                </li>
+              ))
+            }
+          </ul>
+        </details>
       </div>
     </div>
-    <div id="mobile-menu" class="menu">
-      <div class="flex w-full justify-end mb-2">
-        <button id="mobile-close" class="flex p-2 py-3 -mr-4">
-          <span class="sr-only">Close</span>
-          <XMarkIcon className="w-6 h-6 " />
-        </button>
-      </div>
-
-      <ul>
-        <li>
-          <a
-            class="font-bold block py-3 px-4 text-lg border-t border-dotted"
-            href="/get-started"
-            rel="prefetch">Get Started</a
-          >
-        </li>
-        <li>
-          <a
-            class="font-bold block py-3 px-4 text-lg border-t border-dotted"
-            href="/download"
-            rel="prefetch">Download</a
-          >
-        </li>
-        <li>
-          <a
-            class="font-bold block py-3 px-4 text-lg border-t border-dotted"
-            href={DOCUMENTATION_URL}
-            target="_blank">Docs</a
-          >
-        </li>
-        <li>
-          <a
-            class="font-bold block py-3 px-4 text-lg border-t border-dotted"
-            href="/blog"
-            rel="prefetch">Blog</a
-          >
-        </li>
-        <li>
-          <a
-            class="font-bold block py-3 px-4 text-lg border-t border-dotted"
-            href={GITHUB_URL}
-            target="_blank">GitHub</a
-          >
-        </li>
-        <li>
-          <a
-            class="font-bold block py-3 px-4 text-lg border-t border-dotted"
-            href="/sponsor"
-            rel="prefetch">❤️ Sponsor DDEV</a
-          >
-        </li>
-      </ul>
-    </div>
   </nav>
 </header>
diff --git a/src/components/Heading.astro b/src/components/Heading.astro
index 6c8ad0d0..f26bb1a3 100644
--- a/src/components/Heading.astro
+++ b/src/components/Heading.astro
@@ -34,12 +34,7 @@ const hasByline = Boolean(author || date || readTime || editUrl)
 ---
 
 <div
-  class:list={[
-    "my-24 site-gutter",
-    // Wider than the sidebar below it, and top-aligned so the title starts
-    // where it does on every other page.
-    hasAside && "lg:grid lg:grid-cols-[1fr_25rem] lg:gap-12 lg:items-start",
-  ]}
+  class:list={["my-24 site-gutter", hasAside && "title-grid"]}
 >
   <div>
     <h1 class="font-bold text-4xl dark:text-white">{title}</h1>
@@ -51,7 +46,7 @@ const hasByline = Boolean(author || date || readTime || editUrl)
         carried its margins, pushing those pages' content down. */}
     {
       hasByline && (
-        <div class="md:flex md:flex-wrap md:items-center md:content-center gap-y-2 my-6 font-mono">
+        <div class="md:flex md:flex-wrap md:items-center md:content-center gap-y-2 my-6 max-w-[var(--reading-measure)] font-mono">
           {
         author && (
               <div class="flex items-center content-center mr-2">
@@ -125,7 +120,7 @@ const hasByline = Boolean(author || date || readTime || editUrl)
 
   {
     hasAside && (
-      <div class="mt-8 lg:mt-0">
+      <div class="title-aside">
         <Fragment set:html={aside} />
       </div>
     )
diff --git a/src/styles/global.css b/src/styles/global.css
index 79288f28..e65084eb 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -45,6 +45,28 @@
   @apply mt-16 lg:col-start-3 lg:mt-0 lg:pl-12;
 }
 
+/* A page title with something beside it, such as a blog post's feature image
+ * (see Heading.astro). The image column is fluid, so the two can sit side by
+ * side well before the title has to give up its own width. */
+.title-grid {
+  @apply grid items-start gap-8;
+}
+
+.title-aside {
+  @apply mt-8;
+}
+
+@media (min-width: 52rem) {
+  .title-grid {
+    grid-template-columns: 1fr clamp(16rem, 36%, 25rem);
+    gap: 3rem;
+  }
+
+  .title-aside {
+    margin-top: 0;
+  }
+}
+
 /* A block of links or a small call to action in a page's sidebar column. */
 .sidebar-card {
   @apply rounded-lg border border-gray-200 bg-gray-50 p-5 dark:border-slate-600 dark:bg-slate-800;
@@ -136,14 +158,37 @@ mark {
   @apply dark:bg-[blue];
 }
 
+/* The panel `details` opens, positioned against the page rather than the
+ * summary, so it hangs from the top right corner as it always has. */
 .menu {
-  @apply hidden absolute top-0 right-0 max-w-full bg-white px-8 py-4 z-30 text-center shadow-2xl rounded-lg m-3 dark:bg-slate-800 dark:text-white;
+  @apply absolute top-0 right-0 max-w-full bg-white px-8 py-4 z-30 text-center shadow-2xl rounded-lg m-3 dark:bg-slate-800 dark:text-white;
+}
 
-  &.open {
-    @apply block;
+/* The summary is the menu button, so it loses the disclosure triangle. */
+.nav-summary {
+  @apply flex cursor-pointer p-1;
+  list-style: none;
+
+  &::-webkit-details-marker {
+    display: none;
   }
 }
 
+/* Set once Header.astro's script can measure what fits, replacing the
+ * `hidden lg:flex` fallback in the markup. Two classes beat one, no
+ * `!important` needed. */
+.nav-measured .nav-links {
+  display: flex;
+}
+
+.nav-measured .nav-menu {
+  display: block;
+}
+
+.nav-measured [data-nav-hidden] {
+  display: none;
+}
+
 input[type="radio"]:checked + label {
   @apply font-bold border-blue-300 shadow border;
 }