## 1. Navigation + Responsive Shell

- [x] 1.1 Identify the current header/nav implementation and decide the mobile breakpoint for collapsing navigation
- [x] 1.2 Implement hamburger toggle UI (button + icon) with correct ARIA (`aria-controls`, `aria-expanded`, accessible label)
- [x] 1.3 Implement the mobile menu panel styles + mild open/close animation (and close-on-route navigation)
- [x] 1.4 Add keyboard behavior: `Escape` closes menu and focus returns to toggle; ensure tab order remains sane
- [x] 1.5 Add reduced-motion fallback: disable/reduce menu animations when `prefers-reduced-motion: reduce`
- [x] 1.6 Ensure desktop navigation links remain clickable/accessible (no `inert`/`aria-hidden` desktop regression)

## 2. WCAG 2.2 AA Baseline

- [x] 2.1 Add/standardize global `:focus-visible` styles for links/buttons (high-contrast, consistent, not clipped)
- [x] 2.2 Ensure interactive elements meet minimum hit target expectations where feasible (spacing/padding for nav + key buttons)
- [x] 2.3 Add skip-to-content link and verify it is visible on focus and works across pages/layouts
- [x] 2.4 Audit and fix obvious contrast issues for primary text and focus outlines against the background

## 3. Background + Typography Polish

- [x] 3.1 Fix large-resolution background gradient cutoffs (move to a scaled, oversized background layer/pseudo-element)
- [x] 3.2 Introduce a display-friendly font (webfont) and apply consistently across the site; ensure sensible type scale/line-height
- [x] 3.3 Verify responsive behavior on key pages (`/`, `/videos`, `/podcast`, `/blog`, `/about`) at common breakpoints

## 4. Verification

- [x] 4.1 Add/update tests to ensure hamburger toggle ARIA attributes exist and update correctly
- [x] 4.2 Add/update tests or checks for focus-visible styling presence and reduced-motion rules
- [x] 4.3 Build the site and perform a keyboard-only smoke test (nav, cards, blog category nav, menu open/close)