diff --git a/docs/superpowers/plans/2026-04-28-mobile-navigation.md b/docs/superpowers/plans/2026-04-28-mobile-navigation.md
new file mode 100644
index 0000000..ae18d55
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-28-mobile-navigation.md
@@ -0,0 +1,256 @@
+# Mobile Navigation Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add a responsive hamburger menu that collapses the navigation into a popover card below 36rem viewport width, fixing mobile overflow.
+
+**Architecture:** HTML `popover` API for zero-JS toggle. Single `<nav>` with a popover wrapper `<div>` that becomes `display: contents` at desktop. Media query at 36rem breakpoint controls visibility of button vs inline nav.
+
+**Tech Stack:** Hono JSX (TSX), CSS (layers, custom properties, logical properties), HTML popover API.
+
+---
+
+### Task 1: Update Header Component HTML
+
+**Files:**
+- Modify: `src/design/components/header/index.tsx`
+
+- [ ] **Step 1: Add hamburger button and popover wrapper to header**
+
+Replace the entire content of `src/design/components/header/index.tsx` with:
+
+```tsx
+import { Link } from '../link'
+import { url } from '../../../build/config'
+import type { SiteConfig } from '../../../build/config'
+
+export function Header({ config }: { config: SiteConfig }) {
+  return (
+    <header class="site-header">
+      <a href={url('/', config.basePath)} class="site-brand">
+        <img
+          src={url('/assets/flexion_tornado.svg', config.basePath)}
+          alt=""
+          class="site-brand__logo"
+          width="38"
+          height="38"
+        />
+        <span>Flexion Labs</span>
+      </a>
+      <button
+        class="mobile-nav-toggle"
+        popovertarget="mobile-nav"
+        aria-label="Menu"
+      >
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+          <line x1="3" y1="6" x2="21" y2="6" />
+          <line x1="3" y1="12" x2="21" y2="12" />
+          <line x1="3" y1="18" x2="21" y2="18" />
+        </svg>
+      </button>
+      <nav aria-label="Primary">
+        <div id="mobile-nav" popover>
+          <ul>
+            <li>
+              <a href={url('/work/', config.basePath)}>Work</a>
+            </li>
+            <li>
+              <a href={url('/commitment/', config.basePath)}>Commitment</a>
+            </li>
+            <li>
+              <a href={url('/about/', config.basePath)}>About</a>
+            </li>
+            <li>
+              <Link href="https://github.com/flexion" external>
+                GitHub
+              </Link>
+            </li>
+          </ul>
+        </div>
+      </nav>
+    </header>
+  )
+}
+```
+
+- [ ] **Step 2: Run tests to verify no build breakage**
+
+Run: `bun test --filter smoke`
+Expected: PASS — the build still produces valid HTML pages.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/design/components/header/index.tsx
+git commit -m "feat(header): add hamburger button and popover wrapper for mobile nav"
+```
+
+---
+
+### Task 2: Add Mobile/Desktop Media Queries to Layout CSS
+
+**Files:**
+- Modify: `src/design/layout.css`
+
+- [ ] **Step 1: Add responsive nav rules to layout.css**
+
+At the end of the `@layer layout { ... }` block (before the closing `}`), add:
+
+```css
+  /* ---- Responsive navigation ---- */
+  @media (min-width: 36rem) {
+    .mobile-nav-toggle {
+      display: none;
+    }
+    #mobile-nav {
+      display: contents;
+    }
+  }
+  @media (max-width: 36rem) {
+    .site-header nav ul {
+      flex-direction: column;
+      gap: var(--space-3);
+    }
+    #mobile-nav {
+      position: absolute;
+      inset-block-start: 100%;
+      inset-inline-end: var(--space-5);
+      margin: 0;
+      padding: var(--space-4);
+      background: var(--color-surface);
+      border: 1px solid var(--color-surface-alt);
+      border-radius: var(--radius-md);
+      box-shadow: var(--shadow-card);
+    }
+  }
+```
+
+Note: The `position: absolute` on `#mobile-nav` positions the popover card relative to the header. The `.site-header` needs `position: relative` added so the popover anchors correctly.
+
+- [ ] **Step 2: Add position relative to .site-header**
+
+In `layout.css`, inside the existing `.site-header` rule block, add `position: relative;`:
+
+Change:
+```css
+  .site-header {
+    inline-size: var(--measure-wide);
+    margin-inline: auto;
+    padding: var(--space-4) var(--space-5);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-5);
+    border-block-end: 1px solid var(--color-surface-alt);
+  }
+```
+
+To:
+```css
+  .site-header {
+    position: relative;
+    inline-size: var(--measure-wide);
+    margin-inline: auto;
+    padding: var(--space-4) var(--space-5);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-5);
+    border-block-end: 1px solid var(--color-surface-alt);
+  }
+```
+
+- [ ] **Step 3: Run tests**
+
+Run: `bun test --filter smoke`
+Expected: PASS
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/design/layout.css
+git commit -m "feat(layout): add responsive nav media queries at 36rem breakpoint"
+```
+
+---
+
+### Task 3: Style the Hamburger Button
+
+**Files:**
+- Modify: `src/design/components/header/styles.css`
+
+- [ ] **Step 1: Add mobile-nav-toggle styles**
+
+Append to `src/design/components/header/styles.css`:
+
+```css
+.mobile-nav-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: var(--space-2);
+  cursor: pointer;
+  color: var(--color-ink);
+  border-radius: var(--radius-sm);
+}
+.mobile-nav-toggle:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+```
+
+Note: The `display: none` at desktop is handled by the media query in `layout.css`. These styles define appearance when visible.
+
+- [ ] **Step 2: Run tests**
+
+Run: `bun test --filter smoke`
+Expected: PASS
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/design/components/header/styles.css
+git commit -m "feat(header): style hamburger menu toggle button"
+```
+
+---
+
+### Task 4: Visual Verification
+
+**Files:** None (testing only)
+
+- [ ] **Step 1: Build the site**
+
+Run: `bun run build`
+
+- [ ] **Step 2: Serve and verify in browser**
+
+Run: `bunx serve dist` (or equivalent static server)
+
+Verify at mobile width (375px in DevTools):
+1. Hamburger button appears, nav links are hidden.
+2. Tapping hamburger opens popover card with stacked links.
+3. Pressing Escape or clicking outside closes the popover.
+4. "Flexion Labs" brand stays on one line.
+5. Page does not overflow the viewport horizontally.
+
+Verify at desktop width (>576px):
+1. Hamburger button is hidden.
+2. Nav links display horizontally as before.
+3. No visual regression from the popover wrapper.
+
+- [ ] **Step 3: Run full test suite**
+
+Run: `bun test`
+Expected: 67 pass (the a11y test may still fail due to needing a fresh build — that's pre-existing).
+
+- [ ] **Step 4: Commit any fixes if needed, then final commit**
+
+If all looks good:
+```bash
+git log --oneline worktree-mobile-menu ^main
+```
+
+Expected: 3 commits (header HTML, layout CSS, button styles).
diff --git a/docs/superpowers/specs/2026-04-28-mobile-navigation-design.md b/docs/superpowers/specs/2026-04-28-mobile-navigation-design.md
new file mode 100644
index 0000000..1073b53
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-28-mobile-navigation-design.md
@@ -0,0 +1,168 @@
+# Mobile Navigation Design
+
+## Problem
+
+On iPhone-sized viewports (~375px), the site header's horizontal nav (Work, Commitment, About, GitHub) plus the "Flexion Labs" brand exceed the viewport width, causing:
+
+1. Page width overflows the viewport on first load (requires zoom-out to fit).
+2. Nav items overlap the brand text.
+3. "Flexion Labs" wraps to two lines.
+
+Root cause: the header is a flex row with `justify-content: space-between` and no collapse behavior. No media queries handle narrow viewports.
+
+## Solution
+
+A responsive hamburger menu using the HTML `popover` API at narrow viewports (below 36rem / 576px). Zero JavaScript required.
+
+## Breakpoint
+
+- **Below 36rem:** Hamburger button visible, nav links inside a popover card.
+- **Above 36rem:** Current horizontal nav bar, unchanged.
+
+This uses a `@media` query (not a container query) since the header width tracks the viewport, not a container.
+
+## HTML Structure
+
+```tsx
+<header class="site-header">
+  <a href="/" class="site-brand">
+    <img src="/assets/flexion_tornado.svg" alt="" class="site-brand__logo" width="38" height="38" />
+    <span>Flexion Labs</span>
+  </a>
+  <button
+    class="mobile-nav-toggle"
+    popovertarget="mobile-nav"
+    aria-label="Menu"
+  >
+    {/* inline SVG: 3-line hamburger icon */}
+  </button>
+  <nav aria-label="Primary">
+    <div id="mobile-nav" popover>
+      <ul>
+        <li><a href="/work/">Work</a></li>
+        <li><a href="/commitment/">Commitment</a></li>
+        <li><a href="/about/">About</a></li>
+        <li><a href="https://github.com/flexion">GitHub</a></li>
+      </ul>
+    </div>
+  </nav>
+</header>
+```
+
+Key structural decisions:
+
+- The `<button>` sits between the brand and `<nav>` in DOM order.
+- The `<ul>` is wrapped in a `<div id="mobile-nav" popover>` inside the existing `<nav>`.
+- At desktop, the popover wrapper uses `display: contents` so it's invisible to layout and the `<ul>` flows as a direct flex child.
+- At mobile, the wrapper acts as the popover surface (card).
+
+## CSS
+
+All styles go in the `layout` layer, inside `layout.css`.
+
+### Desktop (above 36rem)
+
+```css
+@media (min-width: 36rem) {
+  .mobile-nav-toggle {
+    display: none;
+  }
+}
+```
+
+**Popover at desktop:** The browser UA stylesheet applies `[popover]:not(:popover-open) { display: none }` in the UA origin. Author-origin styles always win over UA-origin for normal declarations, so we override it:
+
+```css
+@media (min-width: 36rem) {
+  #mobile-nav {
+    display: contents;
+  }
+}
+```
+
+This makes the popover wrapper invisible to layout at desktop — the `<ul>` flows as a direct flex child of the header nav.
+
+### Mobile (below 36rem)
+
+```css
+@media (max-width: 36rem) {
+  .mobile-nav-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    padding: var(--space-2);
+    cursor: pointer;
+    color: var(--color-ink);
+  }
+
+  .site-header nav ul {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  #mobile-nav {
+    position: absolute;
+    inset-block-start: anchor(end, var(--space-4));
+    inset-inline-end: var(--space-5);
+    margin: 0;
+    padding: var(--space-4);
+    background: var(--color-surface);
+    border: 1px solid var(--color-surface-alt);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-card);
+  }
+}
+```
+
+Note: The `popover` attribute handles showing/hiding. The CSS above styles its appearance when open. If anchor positioning isn't supported, the popover will use its default positioning (centered), so we include a fallback with `position: absolute` + `inset-block-start` / `inset-inline-end` relative to the header.
+
+### Hamburger Icon
+
+Inline SVG in the button, `1.5rem` square:
+
+```svg
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+  <line x1="3" y1="6" x2="21" y2="6" />
+  <line x1="3" y1="12" x2="21" y2="12" />
+  <line x1="3" y1="18" x2="21" y2="18" />
+</svg>
+```
+
+## Accessibility
+
+- **Popover API** provides: focus management, Escape to dismiss, light-dismiss (click outside).
+- **Button** has `aria-label="Menu"`. The popover API auto-manages `aria-expanded` on the invoking button.
+- **Nav** retains `aria-label="Primary"`.
+- **Focus order** is logical: brand → menu button → (when open) nav links.
+
+## Visual Spec
+
+| Property | Value |
+|----------|-------|
+| Popover background | `var(--color-surface)` (white) |
+| Popover border | `1px solid var(--color-surface-alt)` |
+| Popover radius | `var(--radius-md)` (0.5rem) |
+| Popover shadow | `var(--shadow-card)` |
+| Popover padding | `var(--space-4)` (1rem) |
+| Link gap (stacked) | `var(--space-3)` (0.75rem) |
+| Link font size | `var(--step-0)` (default) |
+| Button size | `1.5rem` icon, `var(--space-2)` padding |
+| Breakpoint | `36rem` (576px) |
+
+## Files to Modify
+
+1. `src/design/components/header/index.tsx` — add button + popover wrapper
+2. `src/design/layout.css` — add media queries for mobile/desktop behavior
+3. `src/design/components/header/styles.css` — hamburger button styles (optional, could go in layout.css)
+
+## Out of Scope
+
+- Animation/transitions on popover open/close (can add later).
+- Changing nav items or adding sub-menus.
+- Dark mode considerations (tokens already handle this if added later).
diff --git a/src/design/components/header/index.tsx b/src/design/components/header/index.tsx
index 944326c..82fc808 100644
--- a/src/design/components/header/index.tsx
+++ b/src/design/components/header/index.tsx
@@ -15,7 +15,18 @@ export function Header({ config }: { config: SiteConfig }) {
         />
         <span>Flexion Labs</span>
       </a>
-      <nav aria-label="Primary">
+      <button
+        class="mobile-nav-toggle"
+        popovertarget="primary-nav"
+        aria-label="Menu"
+      >
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+          <line x1="3" y1="6" x2="21" y2="6" />
+          <line x1="3" y1="12" x2="21" y2="12" />
+          <line x1="3" y1="18" x2="21" y2="18" />
+        </svg>
+      </button>
+      <nav aria-label="Primary" id="primary-nav" popover="auto">
         <ul>
           <li>
             <a href={url('/work/', config.basePath)}>Work</a>
diff --git a/src/design/components/header/styles.css b/src/design/components/header/styles.css
index 0a8d093..ef3e5a9 100644
--- a/src/design/components/header/styles.css
+++ b/src/design/components/header/styles.css
@@ -12,3 +12,18 @@
   inline-size: auto;
   display: block;
 }
+.mobile-nav-toggle {
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: var(--space-2);
+  cursor: pointer;
+  color: var(--color-ink);
+  border-radius: var(--radius-sm);
+  margin-inline-start: auto;
+}
+.mobile-nav-toggle:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
diff --git a/src/design/layout.css b/src/design/layout.css
index 56c2a67..8a6f7e2 100644
--- a/src/design/layout.css
+++ b/src/design/layout.css
@@ -93,4 +93,49 @@
       grid-column: 2;
     }
   }
+  /* ---- Responsive navigation ---- */
+  .mobile-nav-toggle {
+    display: none;
+  }
+  @media (min-width: 36rem) {
+    #primary-nav:not(:popover-open) {
+      display: block;
+      position: static;
+      inset: auto;
+      width: auto;
+      height: auto;
+      margin: 0;
+      padding: 0;
+      border: none;
+      background: none;
+      overflow: visible;
+    }
+  }
+  @media (max-width: 36rem) {
+    .mobile-nav-toggle {
+      display: inline-flex;
+    }
+  }
+  #primary-nav:popover-open {
+    position: fixed;
+    inset: auto;
+    top: 4rem;
+    right: var(--space-5);
+    width: auto;
+    height: auto;
+    margin: 0;
+    padding: var(--space-4);
+    background: var(--color-surface);
+    border: 1px solid var(--color-surface-alt);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-card);
+  }
+  #primary-nav:popover-open ul {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
 }