From 6e4862ffc6596f4fb354fbde7bf952ae6e074071 Mon Sep 17 00:00:00 2001
From: Robert Wagner <rwwagner90@gmail.com>
Date: Wed, 24 Jun 2026 08:38:42 -0400
Subject: [PATCH] Add video support

---
 .impeccable/briefs/reshape-sticky-rail.md     | 157 ++++++++
 .impeccable/design.json                       | 196 ++++++++++
 .impeccable/live/config.json                  |   6 +
 DESIGN.md                                     | 342 ++++++++++++++++++
 PRODUCT.md                                    |  97 +++++
 package.json                                  |   2 +
 pnpm-lock.yaml                                |  11 +
 src/components/EpisodeCta.tsx                 | 132 +++++++
 src/components/EpisodeList.astro              |   2 +
 src/components/FullPlayButton.tsx             |   2 +
 src/components/MobileNav.tsx                  | 262 ++++++++++++++
 src/components/Player.tsx                     | 200 ++++++++--
 src/components/player/ForwardButton/index.tsx |   2 +-
 src/components/player/PlayButton.tsx          |   2 +-
 src/components/player/PlaybackRateButton.tsx  |   2 +-
 src/components/player/RewindButton/index.tsx  |   2 +-
 src/components/player/Slider/index.tsx        |   2 +-
 src/components/state.ts                       |  13 +-
 src/layouts/Layout.astro                      |  74 +++-
 src/lib/cta.ts                                |  30 ++
 src/lib/navLinks.ts                           |  20 +
 src/lib/rss.ts                                |  72 +++-
 src/pages/[episode].astro                     | 103 ++++--
 src/styles/global.css                         |  58 +++
 src/utils/config.ts                           |  16 +
 tests/unit/Player.test.tsx                    |  68 +++-
 26 files changed, 1802 insertions(+), 71 deletions(-)
 create mode 100644 .impeccable/briefs/reshape-sticky-rail.md
 create mode 100644 .impeccable/design.json
 create mode 100644 .impeccable/live/config.json
 create mode 100644 DESIGN.md
 create mode 100644 PRODUCT.md
 create mode 100644 src/components/EpisodeCta.tsx
 create mode 100644 src/components/MobileNav.tsx
 create mode 100644 src/lib/cta.ts
 create mode 100644 src/lib/navLinks.ts

diff --git a/.impeccable/briefs/reshape-sticky-rail.md b/.impeccable/briefs/reshape-sticky-rail.md
new file mode 100644
index 00000000..01e2ba05
--- /dev/null
+++ b/.impeccable/briefs/reshape-sticky-rail.md
@@ -0,0 +1,157 @@
+# Design Brief — Starpod Reshape: "Sticky Rail + Mobile App-Bar"
+
+> Status: awaiting confirmation. Scope: full-site restructure. Register: brand.
+> Anchors: PRODUCT.md ("The Quiet Stage"), DESIGN.md (OKLCH, Iris/Aqua rationed,
+> Inter, tonal-first, refined-but-playful). Selected from a 4-direction
+> multi-agent comparison (this direction ranked #1, 7.3 avg).
+
+## 1. Feature Summary
+
+A full-site restructure of the Starpod podcast template that keeps the brand,
+OKLCH tokens, and component vocabulary intact but reworks layout and navigation
+so that: (a) video is co-equal with audio with native controls in an intentional
+spot, (b) mobile navigation is reachable without scrolling past episodes, (c) a
+configurable CTA is a first-class affordance, and (d) episode artwork appears on
+the episode page. It serves both first-time visitors (find + play in seconds, on
+any device) and the podcasters who adopt the template (clean, adaptable defaults).
+
+## 2. Primary User Action
+
+**Start an episode — listening or watching — within seconds, from any device,
+without hunting.** Navigation, subscribing (CTA), and search are always one tap
+away; they support that action, never compete with it.
+
+## 3. Design Direction
+
+- **Color strategy:** Restrained (project default). One rationed accent — Iris
+  (light) / Aqua (dark) — appears only on interaction and on the single CTA pill.
+  The show's artwork stays the most saturated element ("Artwork-Is-Loudest").
+- **Scene sentence:** A listener on their phone, half-distracted on a couch or
+  commute, glancing at a podcast someone just shared — they should see what the
+  show is, hit play, and optionally watch, without thinking. (Forces: calm,
+  content-first, dark-mode co-equal, zero-friction.)
+- **Anchor references:** the current whiskey.fm rail identity (preserve its
+  artwork-forward calm); Apple Podcasts / Pocket Casts (familiar, native media
+  affordances); a frosted sticky mobile app-bar as in well-built reading apps
+  (always-reachable chrome). Not a reference: SaaS marketing landing pages.
+- **Winning direction vs others:** chosen over Featured-Hero (its hero risks the
+  rejected SaaS-landing pattern and demotes identity), Top Bar + Stage and
+  Watch/Listen Dual Shell (both retire the always-on artwork rail and bet on
+  unproven cross-island video relocation). This direction refines rather than
+  reimagines, so it preserves brand presence and minimizes regression risk.
+
+## 4. Scope
+
+- **Fidelity:** production-ready (explore → then build).
+- **Breadth:** whole surface — shell/nav (desktop rail + mobile app-bar), home,
+  episode page, and the persistent player.
+- **Interactivity:** shipped-quality components (focus-trapped slide-over, native
+  video theater, expandable dock).
+- **Time intent:** polish until it ships.
+
+## 5. Layout Strategy
+
+**Desktop** — preserve the two-column composition, but promote the left rail from
+a passive identity panel to a **sticky navigation spine** with a deliberate
+vertical order:
+
+1. Sticky utility row (never scrolls away inside the rail): search trigger +
+   configurable CTA pill.
+2. Show artwork (Atropos tilt retained) — loudest element.
+3. Show title + blurb.
+4. Listen platform links.
+5. Primary nav links (About / Contact / Store / Sponsor) — promoted out of the
+   buried footer.
+6. Hosts.
+
+The right content well is unchanged in spirit (gradient + Dots wash, episode list
+on home, episode body on detail). **Nothing moves to a footer anymore** — that's
+the core structural fix. The CTA pill is the one persistent accented element in
+the chrome (justified: a single rationed action, not a fill).
+
+**Mobile** — the rail does not collapse into a footer. It becomes a **compact
+frosted sticky top app-bar** (uses the sanctioned player-bar blur), always visible
+at first paint and pinned on scroll: `[artwork chip + show title] [search] [CTA] [≡]`.
+The `≡` opens a right-side **slide-over** containing the full rail content (larger
+artwork, blurb, Listen links, nav links, Hosts) in the same vertical order as
+desktop. An optional compact identity strip (artwork + title + blurb) shows once
+at the top of the content for first-paint context, then the episode list, then the
+full-width docked player.
+
+## 6. Key States
+
+- **Home / default:** rail or app-bar + "Latest Episodes" list.
+- **Episode page:** breadcrumbs → episode artwork block → date → H1 → description →
+  (video episodes) inline theater OR (audio) FullPlayButton → guests → sponsors →
+  show notes → transcript.
+- **Audio-only episode:** episode art renders as a tilt-enabled cover; no video
+  theater, **no audio/video toggle shown** (omit, don't disable — a greyed tab
+  reads as broken).
+- **Video episode:** episode art is the **poster**; on play it becomes the inline
+  16:9 native-controls theater.
+- **Empty (no episodes):** existing UFO illustration empty state, preserved.
+- **Mobile menu open:** focus-trapped, scrim-backed slide-over; Escape + scrim
+  dismiss; focus restored to `≡` on close.
+- **Player expanded (video):** centered aspect-correct theater pinned above the
+  player bar (replaces the crude `w-44` box).
+- **CTA unconfigured:** falls back to "Subscribe" → primary platform link / RSS.
+- **Reduced motion:** slide-over opens instantly; artwork tilt and any reveal
+  motion fall back to fade/none.
+
+## 7. Interaction Model
+
+- **Video (co-equal, native):** use native HTML5 `controls` on the `<video>` —
+  click-to-play/pause, scrub, volume, captions, PiP, fullscreen all come free
+  (Native-and-Familiar principle; no custom video chrome). Starting playback in
+  the inline theater adopts the episode into the shared signals
+  (`currentEpisode`, `mediaMode='video'`), keeping one source of truth.
+- **Single-video architecture (locked technical approach):** keep the existing
+  single persistent `<video>` and signals. **Do NOT reparent the node between the
+  inline theater and the dock.** Instead, keep the element docked and render the
+  inline theater as a **sized container the docked video visually fills**
+  (evaluate this first — it sidesteps `transition:persist` / scroll-flicker risk,
+  the bug class from commit `a42412c`). Reconcile the custom rAF transport
+  (Slider/PlayButton/Rewind/Forward/Rate) with native events by having the slider
+  listen to `timeupdate`/`play`/`pause` and suppressing whichever control surface
+  isn't the active context.
+- **CTA:** single gradient-ring (`.btn`) pill; config-driven `{ label, href,
+  behavior }`; persists in rail + app-bar on every route; carries focus-visible
+  ring (AA).
+- **Mobile nav:** app-bar actions reachable with zero scroll; secondary links one
+  tap into the slide-over.
+- **Nav links:** existing animated growing-underline (Iris/Aqua).
+
+## 8. Content Requirements
+
+- **CTA copy:** default label "Subscribe"; podcaster-configurable label/href/behavior.
+- **"Latest Episodes"** section label (existing `section-heading` utility — the
+  one sanctioned small tracked label; not an eyebrow on every section).
+- **Episode artwork:** `episode.episodeImage`, falling back to `show.image` (as
+  list thumbnails already do). Add `episodeImage` to the `currentEpisode` signal.
+- **Slide-over:** accessible name ("Menu"), labelled close control.
+- **Media:** episode artwork (real content) doubles as video poster; no new
+  illustrations needed beyond the existing UFO empty state.
+
+## 9. Recommended References (for build)
+
+- `layout.md` — rail-to-app-bar restructure, spatial rhythm.
+- `adapt.md` — the desktop-rail ↔ mobile-app-bar responsive transform.
+- `interaction-design.md` / `harden.md` — focus-trapped slide-over, AA dialog
+  semantics, reduced-motion, safe-area insets.
+- `animate.md` — slide-over + theater transitions with reduced-motion fallbacks.
+
+## 10. Open Questions (with proposed defaults)
+
+1. **Config validation:** `defineStarpodConfig` is currently an identity function
+   (no Valibot), despite CLAUDE.md. **Default:** keep the identity-function pattern
+   for the new `cta` field; don't introduce Valibot in this pass.
+2. **Hard-coded Store link:** `InfoCard.astro` hard-codes `whiskey.fund`.
+   **DECIDED (user):** defer — keep nav links hard-coded this pass; revisit
+   config-driven nav later. Nav links centralized in a shared module to make the
+   future migration trivial.
+3. **Video element host:** **Default:** option (b) — docked element fills a sized
+   theater container; only fall back to relocation if (b) proves visually
+   impossible.
+4. **Mobile above-the-fold:** the win is nav reachability, not "first episode above
+   the fold." **Default:** keep a compact identity strip; ensure the first Play
+   affordance is reachable with minimal scroll.
diff --git a/.impeccable/design.json b/.impeccable/design.json
new file mode 100644
index 00000000..7cb3d2e7
--- /dev/null
+++ b/.impeccable/design.json
@@ -0,0 +1,196 @@
+{
+  "schemaVersion": 2,
+  "generatedAt": "2026-06-23T00:00:00Z",
+  "title": "Design System: Starpod",
+  "extensions": {
+    "colorMeta": {
+      "iris-accent": {
+        "role": "primary",
+        "displayName": "Iris",
+        "canonical": "oklch(60.5% 0.213 293)",
+        "tonalRamp": [
+          "oklch(25% 0.12 293)",
+          "oklch(35% 0.16 293)",
+          "oklch(45% 0.19 293)",
+          "oklch(55% 0.21 293)",
+          "oklch(63% 0.21 293)",
+          "oklch(73% 0.16 293)",
+          "oklch(85% 0.09 293)",
+          "oklch(95% 0.03 293)"
+        ]
+      },
+      "aqua-accent": {
+        "role": "primary",
+        "displayName": "Aqua",
+        "canonical": "oklch(76.5% 0.122 223)",
+        "tonalRamp": [
+          "oklch(25% 0.06 223)",
+          "oklch(35% 0.08 223)",
+          "oklch(45% 0.1 223)",
+          "oklch(55% 0.12 223)",
+          "oklch(66% 0.13 223)",
+          "oklch(76% 0.12 223)",
+          "oklch(86% 0.08 223)",
+          "oklch(95% 0.03 223)"
+        ]
+      },
+      "light-text-heading": {
+        "role": "neutral",
+        "displayName": "Deep Indigo Ink",
+        "canonical": "oklch(30.55% 0.052 292.57)",
+        "tonalRamp": [
+          "oklch(20% 0.05 292)",
+          "oklch(30.55% 0.052 292.57)",
+          "oklch(40% 0.045 292)",
+          "oklch(50% 0.035 292)",
+          "oklch(60% 0.025 292)",
+          "oklch(72% 0.018 292)",
+          "oklch(85% 0.01 292)",
+          "oklch(95% 0.005 292)"
+        ]
+      },
+      "light-card": {
+        "role": "neutral",
+        "displayName": "Off-White Card",
+        "canonical": "oklch(97.65% 0.005 274.97)",
+        "tonalRamp": [
+          "oklch(20% 0.02 275)",
+          "oklch(35% 0.02 275)",
+          "oklch(50% 0.015 275)",
+          "oklch(65% 0.01 275)",
+          "oklch(80% 0.008 275)",
+          "oklch(90% 0.006 275)",
+          "oklch(97.65% 0.005 274.97)",
+          "oklch(100% 0 0)"
+        ]
+      },
+      "dark-background": {
+        "role": "neutral",
+        "displayName": "Midnight Slate",
+        "canonical": "oklch(13.85% 0.025 273.24)",
+        "tonalRamp": [
+          "oklch(13.85% 0.025 273.24)",
+          "oklch(18.74% 0.024 280.08)",
+          "oklch(22.61% 0.035 280.78)",
+          "oklch(28% 0.045 281)",
+          "oklch(40% 0.05 281)",
+          "oklch(55% 0.04 281)",
+          "oklch(72% 0.025 281)",
+          "oklch(90% 0.01 281)"
+        ]
+      }
+    },
+    "typographyMeta": {
+      "display": { "displayName": "Display", "purpose": "Episode-page H1; the single largest type on a page." },
+      "headline": { "displayName": "Headline", "purpose": "Show title in the identity rail." },
+      "title": { "displayName": "Title", "purpose": "Episode titles in the list; primary scannable link." },
+      "body": { "displayName": "Body", "purpose": "Descriptions, show notes, transcripts. Cap at 65-75ch." },
+      "label": { "displayName": "Label", "purpose": "Button text and inline actions." },
+      "section-label": { "displayName": "Section Label", "purpose": "Sanctioned small tracked label for section headings only." }
+    },
+    "shadows": [
+      { "name": "button-lift-light", "value": "0 1px 2px 0 oklch(91% 0.015 248 / 0.9)", "purpose": "Resting lift on pill buttons in light mode." },
+      { "name": "button-lift-dark", "value": "0 4px 6px -1px oklch(0% 0 0 / 0.25)", "purpose": "Resting lift on pill buttons in dark mode." },
+      { "name": "player-lift", "value": "0 10px 15px -3px oklch(0% 0 0 / 0.1)", "purpose": "Bottom player bar and expanded video pane; floats above page content." }
+    ],
+    "motion": [
+      { "name": "ring-sweep", "value": "--complete 500ms linear(0, 0.5982 55%, 0.875 75%, 1 100%)", "purpose": "Conic-gradient progress ring filling on button hover/focus." },
+      { "name": "play-grow", "value": "all 300ms", "purpose": "Round play button grows and gains the accent gradient on hover." },
+      { "name": "underline-grow", "value": "width 500ms ease-in-out", "purpose": "Nav-link bottom border growing left-to-right on hover." },
+      { "name": "icon-tint", "value": "--gradient-start 300ms, --gradient-stop 300ms", "purpose": "Platform icon gradient tinting to the accent on hover." }
+    ],
+    "breakpoints": [
+      { "name": "sm", "value": "640px" },
+      { "name": "md", "value": "768px" },
+      { "name": "lg", "value": "1024px" },
+      { "name": "xl", "value": "1280px" }
+    ]
+  },
+  "components": [
+    {
+      "name": "Primary Button",
+      "kind": "button",
+      "refersTo": "button-primary",
+      "description": "Pill button with an animated gradient ring that sweeps in on hover/focus.",
+      "html": "<button class=\"ds-btn\"><span class=\"ds-btn-label\">Show notes</span></button>",
+      "css": ".ds-btn { position: relative; display: inline-flex; padding: 1px; border: 1px solid transparent; border-radius: 9999px; background: oklch(100% 0 0); box-shadow: 0 1px 2px 0 oklch(91% 0.015 248 / 0.9); cursor: pointer; } .ds-btn::after { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, oklch(86% 0.073 293), oklch(60.5% 0.213 293)); opacity: 0; transition: opacity 400ms; } .ds-btn:hover::after, .ds-btn:focus-visible::after { opacity: 1; } .ds-btn-label { display: inline-flex; padding: 0.5rem 1rem; font: 700 0.875rem/1.5 Inter, system-ui, sans-serif; color: oklch(30.55% 0.052 292.57); border-radius: 9999px; }"
+    },
+    {
+      "name": "Round Play Button",
+      "kind": "button",
+      "refersTo": "play-button",
+      "description": "Circular play control that grows and gains the accent gradient on hover.",
+      "html": "<button class=\"ds-play\" aria-label=\"Play\"><svg viewBox=\"0 0 11 14\" width=\"16\" height=\"16\" fill=\"none\"><path d=\"m.367882.443158c0-.065142.07026-.106046.126866-.073861l11.541952 6.562623c.0573.03256.0573.11515 0 .14772l-11.541949 6.56266c-.056606.0321-.126865-.0088-.126865-.0739z\" fill=\"currentColor\"/></svg></button>",
+      "css": ".ds-play { display: inline-flex; align-items: center; justify-content: center; height: 3.5rem; width: 3.5rem; border: none; border-radius: 9999px; background: oklch(30.55% 0.052 292.57); color: oklch(100% 0 0); cursor: pointer; transition: all 300ms; } .ds-play:hover { height: 4rem; width: 4rem; background: linear-gradient(90deg, oklch(86% 0.073 293), oklch(60.5% 0.213 293)); }"
+    },
+    {
+      "name": "Full Play Button",
+      "kind": "button",
+      "refersTo": "full-play-button",
+      "description": "Primary episode CTA: a pill with a circular icon badge and a label.",
+      "html": "<button class=\"ds-fullplay\"><span class=\"ds-fullplay-badge\"><svg viewBox=\"0 0 11 14\" width=\"12\" height=\"12\" fill=\"none\"><path d=\"m.367882.443158c0-.065142.07026-.106046.126866-.073861l11.541952 6.562623c.0573.03256.0573.11515 0 .14772l-11.541949 6.56266c-.056606.0321-.126865-.0088-.126865-.0739z\" fill=\"currentColor\"/></svg></span>Play Episode</button>",
+      "css": ".ds-fullplay { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem 0.5rem 0.5rem; border: 1px solid transparent; border-radius: 9999px; background: oklch(100% 0 0); box-shadow: 0 1px 2px 0 oklch(91% 0.015 248 / 0.9); font: 700 0.875rem/1.5 Inter, system-ui, sans-serif; color: oklch(30.55% 0.052 292.57); cursor: pointer; } .ds-fullplay-badge { display: inline-flex; align-items: center; justify-content: center; height: 1.75rem; width: 1.75rem; border-radius: 9999px; background: oklch(30.55% 0.052 292.57); color: oklch(100% 0 0); }"
+    },
+    {
+      "name": "Text Input",
+      "kind": "input",
+      "refersTo": "input",
+      "description": "Bordered field whose only focus signal is a border-color shift (default ring suppressed).",
+      "html": "<input class=\"ds-input\" type=\"text\" placeholder=\"Search episodes\" />",
+      "css": ".ds-input { width: 100%; padding: 1rem; border: 1px solid oklch(88.09% 0.018 234.53); border-radius: 0.25rem; background: oklch(100% 0 0); color: oklch(45% 0.017 285.89); font: 400 1rem/1.6 Inter, system-ui, sans-serif; outline: none; transition: border-color 200ms; } .ds-input::placeholder { color: oklch(59.68% 0.017 285.89); } .ds-input:focus { border-color: oklch(57.79% 0.03 234.37); }"
+    },
+    {
+      "name": "Nav Link",
+      "kind": "nav",
+      "refersTo": "nav-link",
+      "description": "Text link with an underline that grows left-to-right in the accent on hover.",
+      "html": "<a class=\"ds-nav\" href=\"#\">About</a>",
+      "css": ".ds-nav { display: inline-block; padding: 1.25rem 0; font: 400 1rem/1.6 Inter, system-ui, sans-serif; color: oklch(30.55% 0.052 292.57); text-decoration: none; } .ds-nav::after { content: ''; display: block; height: 1px; width: 0; margin-top: 1.25rem; background: linear-gradient(90deg, oklch(80% 0.105 293), oklch(61% 0.21 293)); transition: width 500ms ease-in-out; } .ds-nav:hover::after { width: 100%; }"
+    },
+    {
+      "name": "Episode Card",
+      "kind": "card",
+      "refersTo": "card",
+      "description": "Flat content surface lifted off the page by tone, not shadow.",
+      "html": "<article class=\"ds-card\"><div class=\"ds-card-art\"></div><div><p class=\"ds-card-date\">June 23, 2026</p><h2 class=\"ds-card-title\">142: The Quiet Stage</h2><p class=\"ds-card-desc\">A neutral foundation that lets every show take center stage.</p></div></article>",
+      "css": ".ds-card { display: flex; gap: 1.5rem; padding: 1.5rem; border-radius: 0.5rem; background: oklch(97.65% 0.005 274.97); } .ds-card-art { height: 80px; width: 80px; border-radius: 0.5rem; flex: none; background: oklch(60.5% 0.213 293); } .ds-card-date { font: 400 0.875rem/1.5 Inter, system-ui, sans-serif; color: oklch(59.68% 0.017 285.89); margin: 0 0 0.5rem; } .ds-card-title { font: 700 1.125rem/1.4 Inter, system-ui, sans-serif; color: oklch(30.55% 0.052 292.57); margin: 0 0 0.5rem; } .ds-card-desc { font: 400 1rem/1.6 Inter, system-ui, sans-serif; color: oklch(59.68% 0.017 285.89); margin: 0; }"
+    }
+  ],
+  "narrative": {
+    "northStar": "The Quiet Stage",
+    "overview": "Starpod is a stage, not a performer. The interface provides the lighting, the structure, and the seating; the podcast itself is the act. Every surface is built so a show's own artwork, voice, and episodes take center stage while the UI holds the wings. Because Starpod is a template adopted by many shows, neutrality is a feature: a near-monochrome low-chroma foundation with a single adaptive accent that shifts from violet by day to cyan by night, in a calm two-part layout of fixed identity rail plus scrollable content and a persistent bottom player.",
+    "keyCharacteristics": [
+      "Content-first: artwork and the play action outrank all chrome.",
+      "Adaptive single accent: Iris (violet) in light mode, Aqua (cyan) in dark mode.",
+      "Calm, low-chroma neutral surfaces with tonal layering instead of heavy shadow.",
+      "Refined-but-playful motion: gradient rings, a tilting cover, a growing play button.",
+      "Native and familiar interactions over invented ones.",
+      "Dark mode is a first-class, co-equal theme (not an afterthought)."
+    ],
+    "rules": [
+      { "name": "The Rationed Accent Rule", "body": "Iris/Aqua appear on interaction states and active indicators only, never as a section background or large fill. If a screen reads as purple or cyan at rest, the accent has been overused.", "section": "colors" },
+      { "name": "The Artwork-Is-Loudest Rule", "body": "On any view, the show's cover art should be the most saturated element; the chrome stays low-chroma so nothing competes with the content.", "section": "colors" },
+      { "name": "The One-Family Rule", "body": "Inter only. Character belongs to each adopting show via its content and artwork, not via Starpod's font choices.", "section": "typography" },
+      { "name": "The Lightness-Before-Shadow Rule", "body": "To separate two surfaces, move them a step on the tonal ramp before reaching for a shadow. Shadows mean 'this floats,' not 'this is a box.'", "section": "elevation" }
+    ],
+    "dos": [
+      "Do keep the show's cover art the most saturated element on screen.",
+      "Do ration Iris/Aqua to interaction and active states; keep resting surfaces low-chroma.",
+      "Do separate surfaces by stepping the tonal ramp before adding a shadow.",
+      "Do use Inter across the whole system, varying weight and size for hierarchy.",
+      "Do treat dark mode as co-equal: every accent and component has a defined dark-mode counterpart.",
+      "Do keep motion refined and purposeful and provide a prefers-reduced-motion alternative for each.",
+      "Do lean on native, familiar media affordances (click-to-play, fullscreen, standard controls)."
+    ],
+    "donts": [
+      "Don't make the UI look like a generic SaaS landing page: no cream/sand backgrounds, no tracked-uppercase eyebrow over every section, no identical icon-heading-text card grids, no hero-metric template.",
+      "Don't ship the dated podcast-directory look: tiny artwork, undifferentiated link-soup of platform buttons, or an afterthought player.",
+      "Don't hard-code one show's personality, palette, or copy into component structure.",
+      "Don't let a screen read as 'purple' or 'cyan' at rest; that means the accent is overused.",
+      "Don't add a second typeface for 'character.'",
+      "Don't use blur or shadow decoratively; the only sanctioned blur is the functional frosted player bar.",
+      "Don't remove focus visibility: inputs suppress the default ring, so keep an AA-contrast focus signal.",
+      "Don't use border-left/border-right greater than 1px as a colored accent stripe, and never use gradient-filled text."
+    ]
+  }
+}
diff --git a/.impeccable/live/config.json b/.impeccable/live/config.json
new file mode 100644
index 00000000..b331ce14
--- /dev/null
+++ b/.impeccable/live/config.json
@@ -0,0 +1,6 @@
+{
+  "files": ["src/layouts/Layout.astro"],
+  "insertBefore": "</body>",
+  "commentSyntax": "html",
+  "cspChecked": true
+}
diff --git a/DESIGN.md b/DESIGN.md
new file mode 100644
index 00000000..a7582fad
--- /dev/null
+++ b/DESIGN.md
@@ -0,0 +1,342 @@
+---
+name: Starpod
+description: An adaptable, content-first podcast website template.
+colors:
+  iris-accent: "oklch(60.5% 0.213 293)"
+  iris-accent-soft: "oklch(86% 0.073 293)"
+  aqua-accent: "oklch(76.5% 0.122 223)"
+  aqua-accent-soft: "oklch(91% 0.05 220)"
+  white: "oklch(100% 0 0)"
+  light-card: "oklch(97.65% 0.005 274.97)"
+  light-player: "oklch(95.94% 0.009 279.69)"
+  light-text-heading: "oklch(30.55% 0.052 292.57)"
+  light-text-body: "oklch(59.68% 0.017 285.89)"
+  light-icon: "oklch(67.65% 0.043 285.21)"
+  light-input-border: "oklch(88.09% 0.018 234.53)"
+  light-input-border-focused: "oklch(57.79% 0.03 234.37)"
+  dark-background: "oklch(13.85% 0.025 273.24)"
+  dark-card: "oklch(18.74% 0.024 280.08)"
+  dark-player: "oklch(22.61% 0.035 280.78)"
+  dark-button: "oklch(21.57% 0.029 280.68)"
+  dark-border: "oklch(23.8% 0.04 266.76)"
+  dark-text-body: "oklch(61.91% 0.019 264.42)"
+  dark-icon: "oklch(71.44% 0.019 264.45)"
+  dark-input-bg: "oklch(21.63% 0.031 280.68)"
+  dark-input-border: "oklch(28.08% 0.048 281.19)"
+  dark-input-border-focused: "oklch(45.84% 0.078 281.04)"
+typography:
+  display:
+    fontFamily: "Inter, system-ui, sans-serif"
+    fontSize: "clamp(1.5rem, 4vw, 3rem)"
+    fontWeight: 700
+    lineHeight: 1.1
+    letterSpacing: "-0.02em"
+  headline:
+    fontFamily: "Inter, system-ui, sans-serif"
+    fontSize: "1.5rem"
+    fontWeight: 700
+    lineHeight: 1.2
+    letterSpacing: "-0.01em"
+  title:
+    fontFamily: "Inter, system-ui, sans-serif"
+    fontSize: "1.125rem"
+    fontWeight: 700
+    lineHeight: 1.4
+    letterSpacing: "normal"
+  body:
+    fontFamily: "Inter, system-ui, sans-serif"
+    fontSize: "1rem"
+    fontWeight: 400
+    lineHeight: 1.6
+    letterSpacing: "normal"
+  label:
+    fontFamily: "Inter, system-ui, sans-serif"
+    fontSize: "0.875rem"
+    fontWeight: 700
+    lineHeight: 1.5
+    letterSpacing: "normal"
+  section-label:
+    fontFamily: "Inter, system-ui, sans-serif"
+    fontSize: "0.75rem"
+    fontWeight: 700
+    lineHeight: 1.5
+    letterSpacing: "0.05em"
+rounded:
+  sm: "0.25rem"
+  md: "0.5rem"
+  xl: "0.75rem"
+  2xl: "1rem"
+  full: "9999px"
+spacing:
+  xs: "0.5rem"
+  sm: "1rem"
+  md: "1.5rem"
+  lg: "3rem"
+  xl: "4rem"
+components:
+  button-primary:
+    backgroundColor: "{colors.white}"
+    textColor: "{colors.light-text-heading}"
+    typography: "{typography.label}"
+    rounded: "{rounded.full}"
+    padding: "0.5rem 1rem 0.5rem 0.5rem"
+  play-button:
+    backgroundColor: "{colors.light-text-heading}"
+    textColor: "{colors.white}"
+    rounded: "{rounded.full}"
+    height: "3.5rem"
+    width: "3.5rem"
+  play-button-hover:
+    backgroundColor: "{colors.iris-accent}"
+    textColor: "{colors.white}"
+    rounded: "{rounded.full}"
+    height: "4rem"
+    width: "4rem"
+  input:
+    backgroundColor: "{colors.white}"
+    textColor: "{colors.light-text-body}"
+    rounded: "{rounded.sm}"
+    padding: "1rem"
+  input-focus:
+    backgroundColor: "{colors.white}"
+    textColor: "{colors.light-text-body}"
+    rounded: "{rounded.sm}"
+    padding: "1rem"
+  card:
+    backgroundColor: "{colors.light-card}"
+    textColor: "{colors.light-text-body}"
+    rounded: "{rounded.md}"
+    padding: "1rem"
+  nav-link:
+    textColor: "{colors.light-text-heading}"
+    typography: "{typography.body}"
+    padding: "1.25rem 0"
+---
+
+# Design System: Starpod
+
+## 1. Overview
+
+**Creative North Star: "The Quiet Stage"**
+
+Starpod is a stage, not a performer. The interface provides the lighting, the
+structure, and the seating; the podcast itself is the act. Every surface is built
+so a show's own artwork, voice, and episodes take center stage while the UI holds
+the wings. When a design decision is unclear, the test is always: *is the UI
+getting out of the show's way?*
+
+Because Starpod is a **template adopted by many shows**, neutrality is a feature,
+not a limitation. The system leans on a near-monochrome, low-chroma foundation
+(soft off-white cards in light mode, deep indigo-slate surfaces in dark mode)
+with a single adaptive accent that shifts from violet by day to cyan by night.
+Color is rationed; the show's cover art is usually the most saturated thing on
+screen, and that is intentional. The layout is a calm two-part composition: a
+fixed identity rail (artwork, title, listen links, hosts) on the left, and a
+scrollable content column on the right, with a persistent media player anchored
+to the bottom.
+
+This system explicitly rejects the generic-SaaS-landing look (no cream
+backgrounds, no tracked-uppercase eyebrows over every section, no identical
+icon-card grids, no hero-metric template), it rejects the dated podcast-directory
+look (tiny artwork, link-soup, afterthought players), and it rejects clutter.
+It is also deliberately *not* locked to any one show's personality — the
+reference deployment (Whiskey Web and Whatnot) supplies the demo copy, never the
+brand rules.
+
+**Key Characteristics:**
+- Content-first: artwork and the play action outrank all chrome.
+- Adaptive single accent: Iris (violet) in light mode, Aqua (cyan) in dark mode.
+- Calm, low-chroma neutral surfaces with tonal layering instead of heavy shadow.
+- Refined-but-playful motion: gradient rings, a tilting cover, a growing play button.
+- Native and familiar interactions over invented ones.
+- Dark mode is a first-class, co-equal theme (not an afterthought).
+
+## 2. Colors
+
+A near-monochrome violet-leaning neutral system with one adaptive accent; the
+palette stays quiet so the show's artwork carries the saturation.
+
+### Primary
+- **Iris** (`oklch(60.5% 0.213 293)`, soft stop `oklch(86% 0.073 293)`): The
+  light-mode accent. Appears only on interaction — the play button's hover
+  gradient, the button progress ring, the growing-underline on nav links, and
+  platform-icon hover. Rationed, never a background fill.
+- **Aqua** (`oklch(76.5% 0.122 223)`, soft stop `oklch(91% 0.05 220)`): The
+  dark-mode counterpart to Iris.
+  The accent role swaps to Aqua under `prefers-color-scheme: dark` so the same
+  interactions read correctly on a dark surface.
+
+### Neutral — Light Mode
+- **Deep Indigo Ink** (`oklch(30.55% 0.052 292.57)`): Headings and high-emphasis
+  text; also the resting fill of the round play button.
+- **Muted Slate Body** (`oklch(59.68% 0.017 285.89)`): Body copy and secondary
+  text.
+- **Off-White Card** (`oklch(97.65% 0.005 274.97)`): The primary surface — the
+  content panel and identity rail sit on it, lifted just off pure white.
+- **Player Mist** (`oklch(95.94% 0.009 279.69)`): The translucent backdrop of the
+  bottom player bar (used at ~90% with a backdrop blur).
+- **Cool Hairline** (`oklch(88.09% 0.018 234.53)`): Input borders and dividers;
+  shifts to `oklch(57.79% 0.03 234.37)` on focus.
+
+### Neutral — Dark Mode
+- **Midnight Slate** (`oklch(13.85% 0.025 273.24)`): The body background.
+- **Raised Slate Card** (`oklch(18.74% 0.024 280.08)`): Surfaces lifted off the
+  background by lightness, not shadow.
+- **Player Slate** (`oklch(22.61% 0.035 280.78)`) / **Button Slate**
+  (`oklch(21.57% 0.029 280.68)`): The player bar and resting button fills.
+- **Dim Body** (`oklch(61.91% 0.019 264.42)`): Dark-mode body copy; headings go
+  to pure white (`oklch(100% 0 0)`).
+
+### Named Rules
+**The Rationed Accent Rule.** Iris/Aqua appear on interaction states and active
+indicators only — never as a section background or a large fill. The accent's
+rarity is what makes a play or a hover feel alive. If a screen reads as "purple"
+or "cyan" at rest, the accent has been overused.
+
+**The Artwork-Is-Loudest Rule.** On any given view, the show's cover art should be
+the most saturated element. The chrome stays low-chroma so nothing competes with
+the content.
+
+## 3. Typography
+
+**Display / Body / Label Font:** Inter (with `system-ui, sans-serif` fallback),
+loaded via Astro's font pipeline as `--astro-font-inter`.
+
+**Character:** One family, worked across weights and sizes. Inter is neutral,
+highly legible, and brand-agnostic — exactly right for a template that must wear
+many shows' identities. Hierarchy comes from weight (400 vs 700) and scale, not
+from a second typeface. Display sizes pull letter-spacing slightly negative for a
+modern, set-tight feel; body stays at default tracking for readability.
+
+### Hierarchy
+- **Display** (700, `clamp(1.5rem, 4vw, 3rem)` — `text-2xl` → `lg:text-5xl`,
+  line-height ~1.1): The episode-page H1. The single largest type on a page.
+- **Headline** (700, `1.5rem` / `text-2xl`): The show title in the identity rail.
+- **Title** (700, `1.125rem` / `text-lg`): Episode titles in the list; the
+  primary scannable link.
+- **Body** (400, `1rem`, line-height ~1.6): Descriptions, show notes, transcripts.
+  Cap measure at 65–75ch in prose blocks.
+- **Label** (700, `0.875rem` / `text-sm`): Button text and inline actions
+  ("Show notes", "Play Episode").
+- **Section Label** (700, `0.75rem` / `text-xs`, tracking `0.05em`): The
+  `section-heading` utility — small, slightly tracked, used for "Listen", "Show
+  Notes", "Episode Transcript". This is the *one* sanctioned small-caps-ish label
+  and is deliberate, not an eyebrow on every section.
+
+### Named Rules
+**The One-Family Rule.** Inter only. Do not introduce a second typeface to add
+"character"; character belongs to each adopting show, expressed through its
+content and artwork, not through Starpod's font choices.
+
+## 4. Elevation
+
+This is a **tonal-first, flat-by-default** system. Depth is conveyed primarily by
+lightness layering — in dark mode the background, card, player, and button are
+four steps up the same low-chroma indigo ramp, so surfaces separate without a
+single shadow. Shadows are reserved for elements that genuinely float above the
+page: interactive buttons and the media player.
+
+### Shadow Vocabulary
+- **Button lift** (light: `box-shadow: 0 1px 2px 0 oklch(91% 0.015 248 / 0.9)`
+  via `shadow-sm`; dark: `shadow-md` at `oklch(0% 0 0 / 0.25)`): The resting lift
+  on pill buttons.
+- **Player / video lift** (`shadow-lg`): The bottom player bar and the expanded
+  video pane, which sit above all page content.
+- **Backdrop blur** (`backdrop-blur-xs` over a ~90% player surface): The player
+  bar reads as frosted glass over scrolling content — the one sanctioned use of
+  blur, because it is functional (legibility over moving content), not decorative.
+
+### Named Rules
+**The Lightness-Before-Shadow Rule.** To separate two surfaces, move them a step
+on the tonal ramp before reaching for a shadow. Shadows mean "this floats," not
+"this is a box."
+
+## 5. Components
+
+The component feel is **refined and playful**: a polished, quiet base with small,
+tasteful moments of motion that reward interaction. Motion is a feature here, used
+sparingly.
+
+### Buttons
+- **Shape:** Fully rounded pills (`rounded-full`).
+- **Primary (`.btn`):** White fill in light mode, Button Slate in dark mode, with
+  Label type. Its signature is an **animated conic-gradient ring**: on hover/focus
+  a 1px gradient border sweeps in (`--complete` 0→100 over 500ms with a custom
+  ease), Iris in light mode, Aqua in dark. Carries the Button-lift shadow at rest.
+- **Hover / Focus:** The progress ring completes; transition uses a long
+  decelerating `linear()` curve. Focus-visible triggers the same ring as hover.
+
+### Play Buttons (signature)
+- **Round play button:** A `3.5rem` circle, Deep Indigo Ink fill (white icon) in
+  light mode / white fill (slate icon) in dark mode. On hover it **grows to `4rem`
+  and the fill becomes the Iris→Aqua gradient** over 300ms. Used in the episode
+  list and the episode-page header.
+- **Full play button:** A pill combining a circular icon badge with a "Play
+  Episode" / "Pause Episode" label; toggles icon and copy from shared player
+  signals. Used as the primary CTA on episode pages and list rows.
+
+### Inputs / Fields
+- **Style (`.input`):** White (light) / Input Slate (dark) fill, Cool Hairline
+  border, `rounded-sm`, `1rem` padding.
+- **Focus:** Border color shifts to the focused hairline tone; **ring and outline
+  are explicitly suppressed** (`!ring-0`, `!outline-none`) — the border shift is
+  the entire focus signal. Maintain a visible, AA-contrast focus indicator when
+  adapting this.
+
+### Cards / Containers
+- **Corner Style:** `rounded-md` (`0.5rem`); the show artwork steps up to
+  `rounded-2xl` at large sizes.
+- **Background:** Off-White Card (light) / Raised Slate Card (dark), set off the
+  page by lightness.
+- **Border:** Hairline dividers between episode rows; otherwise borderless.
+- **Shadow Strategy:** None at rest — see Elevation. Cards are flat.
+
+### Navigation
+- **Identity rail:** A fixed left column (`28rem`/`lg`, `30rem`/`xl`) holding
+  artwork, title, blurb, listen links, and hosts. On mobile it collapses; rail
+  content (hosts, info) moves into the footer.
+- **Nav links (`.animated-bottom-border`):** Body type with an **underline that
+  grows from left to right on hover** (gradient: Iris in light, Aqua in dark,
+  500ms ease).
+- **Platform icons (`.gradient-icon`):** Masked SVGs filled with a vertical
+  neutral gradient that **animates to the accent on hover** (`@property`-driven
+  color transition, 300ms).
+
+### Show Artwork (signature)
+The cover art uses **Atropos** for a subtle 3D parallax tilt that tracks the
+pointer — the single most physical interaction in the system. It is decorative
+delight applied to the one element that should command attention.
+
+## 6. Do's and Don'ts
+
+### Do:
+- **Do** keep the show's cover art the most saturated element on screen.
+- **Do** ration Iris/Aqua to interaction and active states; keep resting surfaces
+  low-chroma.
+- **Do** separate surfaces by stepping the tonal ramp before adding a shadow.
+- **Do** use Inter across the whole system, varying weight and size for hierarchy.
+- **Do** treat dark mode as co-equal: every accent and component has a defined
+  dark-mode counterpart (Aqua, slate fills, lighter shadows).
+- **Do** keep motion refined and purposeful (gradient ring, artwork tilt, growing
+  play button) and provide a `prefers-reduced-motion` alternative for each.
+- **Do** lean on native, familiar media affordances (click-to-play, fullscreen,
+  standard controls).
+
+### Don't:
+- **Don't** make the UI look like a generic SaaS landing page: no cream/sand
+  backgrounds, no tracked-uppercase eyebrow over every section, no identical
+  icon-heading-text card grids, no hero-metric template.
+- **Don't** ship the dated podcast-directory look: tiny artwork, undifferentiated
+  link-soup of platform buttons, or an afterthought player.
+- **Don't** hard-code one show's personality, palette, or copy into component
+  structure — brand-specific values belong in config and tokens so the template
+  re-skins cleanly.
+- **Don't** let a screen read as "purple" or "cyan" at rest; that means the accent
+  is overused.
+- **Don't** add a second typeface for "character."
+- **Don't** use blur or shadow decoratively — the only sanctioned blur is the
+  functional frosted player bar.
+- **Don't** remove focus visibility: the inputs suppress the default ring, so any
+  adaptation must keep an AA-contrast focus signal.
+- **Don't** use `border-left`/`border-right` greater than 1px as a colored accent
+  stripe, and never use gradient-filled text.
diff --git a/PRODUCT.md b/PRODUCT.md
new file mode 100644
index 00000000..fee3cc49
--- /dev/null
+++ b/PRODUCT.md
@@ -0,0 +1,97 @@
+# Product
+
+## Register
+
+brand
+
+## Users
+
+Two distinct audiences, in order of design priority:
+
+- **Listeners / viewers** — people who land on a podcast site built with Starpod,
+  usually from a social share, search result, or platform link. Their context is
+  casual and often mobile: they want to find an episode, start playing (audio or
+  video) within seconds, decide whether to subscribe, and maybe read show notes
+  or a transcript. They did not come to read about software; the content is the
+  product.
+- **Podcasters / operators** — the people who adopt Starpod to run their show's
+  website. They clone the template, set `starpod.config.ts` and an RSS feed, and
+  expect a polished site in minutes. They are the ones who benefit from clean,
+  adaptable defaults; they should be able to drop in their own brand without
+  fighting the template or rewriting components.
+
+The job to be done: turn an RSS feed into a fast, beautiful, on-brand podcast
+home where discovering and playing an episode is effortless.
+
+## Product Purpose
+
+Starpod is an open-source Astro template that generates a complete podcast
+website from an RSS feed and a config file. It exists so any podcaster can have a
+professional, fast, accessible site — with an on-site audio/video player, episode
+pages, transcripts, search, and platform links — without designing or building it
+themselves.
+
+Success looks like: a podcaster ships a site that looks intentionally designed
+for *their* show (not "a template"), and a first-time visitor can find and play
+an episode within seconds on any device. The reference deployment is
+[whiskey.fm](https://whiskey.fm) (Whiskey Web and Whatnot), but Starpod's own
+identity is the neutral, adaptable foundation underneath — not that show's voice.
+
+## Brand Personality
+
+**Clean, approachable, adaptable.** Starpod itself is a calm, content-first
+foundation that gets out of the way and lets each podcast's own brand come
+through. The voice in the reference deployment (irreverent, confident,
+whiskey-fueled) belongs to Whiskey Web and Whatnot, *not* to Starpod — the
+template must never hard-code that personality so deeply that another show can't
+adopt it cleanly.
+
+Emotional goals for a visitor: "this is easy," "this is fast," "I can tell what
+this show is and start listening immediately." Emotional goals for an adopter:
+"this already looks great, and I can make it mine."
+
+## Anti-references
+
+- **Generic SaaS landing pages.** No cream/sand body backgrounds, no tracked
+  uppercase eyebrow above every section, no identical icon-heading-text card
+  grids, no hero-metric template. This is a content site, not a pricing page.
+- **Locked-in branding.** Don't hard-code one podcast's personality, palette, or
+  copy so heavily that the template can't be re-skinned. Brand-specific values
+  belong in config and tokens, not baked into component structure.
+- **Dated podcast-directory sites.** No tiny artwork, no link-soup of platform
+  buttons with no hierarchy, no afterthought players. The player and the artwork
+  are first-class.
+- **Cluttered / busy layouts.** Keep it calm and content-first. Whitespace and
+  clear hierarchy over density and decoration.
+
+## Design Principles
+
+1. **Content first, chrome second.** The episode, its artwork, and the play
+   action are the point. Navigation, branding, and metadata support them — they
+   never compete with them.
+2. **Playable in one tap, on any device.** Starting an episode (audio or video)
+   should never require scrolling, hunting, or a page change. Mobile is a
+   first-class layout, not a shrink of desktop.
+3. **Adaptable, not opinionated.** Every visual decision should survive being
+   re-skinned for a different show. Prefer tokens and config over hard-coded
+   brand values. A good test: would this still look right for a true-crime show
+   and a kids' show?
+4. **Fast and quiet.** Static-first, lazy where it helps, motion that's
+   purposeful and respects reduced-motion. Speed is part of the brand.
+5. **Native and familiar.** Lean on conventions people already know — standard
+   media controls, fullscreen, click-to-play — instead of inventing novel
+   interactions that need to be learned.
+
+## Accessibility & Inclusion
+
+Target **WCAG 2.2 AA** as the template's baseline, since others ship production
+sites on top of it:
+
+- Body text ≥ 4.5:1 contrast; large/bold text ≥ 3:1; placeholders meet 4.5:1.
+- Full keyboard operability for the player, search, and navigation; visible
+  focus states.
+- Media controls have accessible names; the player exposes standard semantics.
+- Every animation has a `prefers-reduced-motion: reduce` alternative (the 3D
+  artwork tilt, view transitions, and player motion included).
+- Semantic structure and landmarks so screen-reader users can navigate episodes
+  and show notes.
diff --git a/package.json b/package.json
index da229ce7..e4120433 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,8 @@
     "astro-seo-schema": "^5.2.0",
     "atropos": "^2.0.2",
     "drizzle-orm": "^0.45.2",
+    "fast-xml-parser": "4.5.4",
+    "hls.js": "^1.6.16",
     "preact": "^10.29.2",
     "rss-to-json": "^2.1.1",
     "schema-dts": "^1.1.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 389b06ca..04d1b5f3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,12 @@ importers:
       drizzle-orm:
         specifier: ^0.45.2
         version: 0.45.2(@libsql/client@0.17.3)
+      fast-xml-parser:
+        specifier: 4.5.4
+        version: 4.5.4
+      hls.js:
+        specifier: ^1.6.16
+        version: 1.6.16
       preact:
         specifier: ^10.29.2
         version: 10.29.2
@@ -2771,6 +2777,9 @@ packages:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
+  hls.js@1.6.16:
+    resolution: {integrity: sha512-VSIRpLfRwlAAdGL4wiTucx2ScRipo0ed1FBatWkyt832jC4CReKstga6yIhYVwGu9LOBjuX9wzmRMeQdBJtzEA==}
+
   html-encoding-sniffer@6.0.0:
     resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
@@ -7038,6 +7047,8 @@ snapshots:
 
   he@1.2.0: {}
 
+  hls.js@1.6.16: {}
+
   html-encoding-sniffer@6.0.0:
     dependencies:
       '@exodus/bytes': 1.15.1
diff --git a/src/components/EpisodeCta.tsx b/src/components/EpisodeCta.tsx
new file mode 100644
index 00000000..0a26fbcf
--- /dev/null
+++ b/src/components/EpisodeCta.tsx
@@ -0,0 +1,132 @@
+import type { JSX } from 'preact/jsx-runtime';
+
+import { currentEpisode, isPlaying, isTheaterOpen, mediaMode } from './state';
+
+type Props = {
+  episode: (typeof currentEpisode)['value'];
+  /**
+   * Which stream to start. 'video' opens the theater; 'audio' plays in the
+   * docked player.
+   */
+  mode: 'audio' | 'video';
+  /**
+   * Visible label for the labeled (pill) variant. Ignored when `round`.
+   */
+  label: string;
+  /**
+   * Render an icon-only circular button (used as the overlay on episode art).
+   */
+  round?: boolean;
+};
+
+const PlayIcon = (
+  <svg
+    class="h-4 w-4"
+    fill="none"
+    viewBox="0 0 11 14"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      clip-rule="evenodd"
+      d="m.367882.443158c0-.065142.07026-.106046.126866-.073861l11.541952 6.562623c.0573.03256.0573.11515 0 .14772l-11.541949 6.56266c-.056606.0321-.126865-.0088-.126865-.0739z"
+      fill="currentColor"
+      fill-rule="evenodd"
+    />
+  </svg>
+);
+
+const PauseIcon = (
+  <svg
+    class="h-4 w-4"
+    fill="none"
+    viewBox="0 0 14 18"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g fill="currentColor">
+      <rect height="16.8" rx="1.07692" width="5.6" y=".799805" />
+      <rect height="16.8" rx="1.07692" width="5.6" x="8.40039" y=".799805" />
+    </g>
+  </svg>
+);
+
+const WatchIcon = (
+  <svg
+    class="h-5 w-5"
+    fill="none"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      x="2"
+      y="5"
+      width="20"
+      height="14"
+      rx="2"
+      stroke="currentColor"
+      stroke-width="2"
+    />
+    <path d="M10 9.5v5l4-2.5z" fill="currentColor" />
+  </svg>
+);
+
+export default function EpisodeCta({ episode, mode, label, round }: Props) {
+  if (!episode) {
+    return null;
+  }
+
+  const isCurrent = episode.id === currentEpisode.value?.id;
+  const isVideo = mode === 'video';
+  const showPause = isCurrent && isPlaying.value && mediaMode.value === mode;
+
+  function start() {
+    if (!episode) {
+      return;
+    }
+    const becomingCurrent =
+      !isCurrent || mediaMode.value !== mode || !isPlaying.value;
+
+    currentEpisode.value = {
+      audio: episode.audio,
+      video: episode.video,
+      episodeImage: episode.episodeImage,
+      episodeNumber: episode.episodeNumber,
+      id: episode.id,
+      title: episode.title
+    };
+    mediaMode.value = mode;
+    isPlaying.value = becomingCurrent ? true : false;
+
+    if (isVideo) {
+      isTheaterOpen.value = true;
+    }
+  }
+
+  if (round) {
+    return (
+      <button
+        type="button"
+        onClick={start}
+        aria-label={showPause ? 'Pause episode' : label}
+        class="play-affordance flex h-16 w-16 items-center justify-center rounded-full shadow-lg transition-all duration-300 hover:h-[4.5rem] hover:w-[4.5rem]"
+      >
+        <span key={showPause ? 'pause' : 'play'}>
+          {(showPause ? PauseIcon : isVideo ? WatchIcon : PlayIcon) as JSX.Element}
+        </span>
+      </button>
+    );
+  }
+
+  return (
+    <button class="btn" type="button" onClick={start}>
+      <span class="text-light-text-heading flex w-full items-center rounded-full p-2 pr-4 dark:text-white">
+        <span class="bg-light-text-heading dark:text-dark-button mr-3 flex h-7 w-7 items-center justify-center rounded-full text-white dark:bg-white">
+          {showPause ? PauseIcon : (isVideo ? WatchIcon : PlayIcon)}
+        </span>
+        {showPause ? 'Pause' : label}
+      </span>
+    </button>
+  );
+}
diff --git a/src/components/EpisodeList.astro b/src/components/EpisodeList.astro
index c49a3dcb..7526e633 100644
--- a/src/components/EpisodeList.astro
+++ b/src/components/EpisodeList.astro
@@ -62,6 +62,8 @@ const { episodes, show } = Astro.props;
                     client:visible
                     episode={{
                       audio: episode.audio,
+                      video: episode.video,
+                      episodeImage: episode.episodeImage,
                       episodeNumber: episode.episodeNumber,
                       id: episode.id,
                       title: episode.title
diff --git a/src/components/FullPlayButton.tsx b/src/components/FullPlayButton.tsx
index 1a5076ae..dca58567 100644
--- a/src/components/FullPlayButton.tsx
+++ b/src/components/FullPlayButton.tsx
@@ -58,6 +58,8 @@ export default function FullPlayButton({ episode }: Props) {
       onClick={() => {
         currentEpisode.value = {
           audio: episode.audio,
+          video: episode.video,
+          episodeImage: episode.episodeImage,
           episodeNumber: episode.episodeNumber,
           id: episode.id,
           title: episode.title
diff --git a/src/components/MobileNav.tsx b/src/components/MobileNav.tsx
new file mode 100644
index 00000000..cf45382f
--- /dev/null
+++ b/src/components/MobileNav.tsx
@@ -0,0 +1,262 @@
+import { useEffect, useRef } from 'preact/hooks';
+
+import { isMenuOpen, isSearchOpen } from './state';
+
+type LinkItem = {
+  label: string;
+  href: string;
+};
+
+type Props = {
+  showTitle: string;
+  showImage: string;
+  blurb: string;
+  navLinks: Array<LinkItem>;
+  platformLinks: Array<LinkItem>;
+  hosts: Array<string>;
+  cta: LinkItem;
+};
+
+const FOCUSABLE =
+  'a[href], button:not([disabled]), input, [tabindex]:not([tabindex="-1"])';
+
+function SearchIcon() {
+  return <span class="search-icon h-4 w-4" aria-hidden="true" />;
+}
+
+function MenuIcon() {
+  return (
+    <svg
+      class="h-5 w-5"
+      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>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg
+      class="h-5 w-5"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      aria-hidden="true"
+    >
+      <line x1="6" y1="6" x2="18" y2="18" />
+      <line x1="18" y1="6" x2="6" y2="18" />
+    </svg>
+  );
+}
+
+export default function MobileNav({
+  showTitle,
+  showImage,
+  blurb,
+  navLinks,
+  platformLinks,
+  hosts,
+  cta
+}: Props) {
+  const open = isMenuOpen.value;
+  const panelRef = useRef<HTMLDivElement | null>(null);
+  const closeRef = useRef<HTMLButtonElement | null>(null);
+
+  // Manage the slide-over as an accessible dialog: focus trap, Escape to
+  // close, body-scroll lock, and focus restoration to the trigger on close.
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const previouslyFocused = document.activeElement as HTMLElement | null;
+    const panel = panelRef.current;
+
+    closeRef.current?.focus();
+
+    const { overflow } = document.body.style;
+    document.body.style.overflow = 'hidden';
+
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        isMenuOpen.value = false;
+        return;
+      }
+      if (event.key !== 'Tab' || !panel) {
+        return;
+      }
+      const focusables = Array.from(
+        panel.querySelectorAll<HTMLElement>(FOCUSABLE)
+      ).filter((el) => el.offsetParent !== null);
+      if (focusables.length === 0) {
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+
+    document.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+      document.body.style.overflow = overflow;
+      previouslyFocused?.focus?.();
+    };
+  }, [open]);
+
+  return (
+    <div class="lg:hidden">
+      <header
+        class="bg-light-player/90 dark:bg-dark-player/90 sticky top-0 z-40 flex items-center gap-3 border-b border-light-input-border/60 px-4 py-3 backdrop-blur-xs dark:border-dark-border/60"
+        style={{ paddingTop: 'max(0.75rem, env(safe-area-inset-top))' }}
+      >
+        <a href="/" class="flex min-w-0 flex-1 items-center gap-3" aria-label="Homepage">
+          <img
+            src={showImage}
+            alt=""
+            width={36}
+            height={36}
+            class="h-9 w-9 flex-none rounded-md"
+          />
+          <span class="text-light-text-heading truncate text-sm font-bold dark:text-white">
+            {showTitle}
+          </span>
+        </a>
+
+        <button
+          type="button"
+          class="text-light-text-heading flex h-11 w-11 items-center justify-center rounded-full dark:text-white"
+          aria-label="Search episodes"
+          onClick={() => (isSearchOpen.value = true)}
+        >
+          <SearchIcon />
+        </button>
+
+        <a class="btn flex-none" href={cta.href}>
+          <span class="text-light-text-heading flex items-center rounded-full px-3 py-2 text-sm font-bold dark:text-white">
+            {cta.label}
+          </span>
+        </a>
+
+        <button
+          type="button"
+          class="text-light-text-heading flex h-11 w-11 items-center justify-center rounded-full dark:text-white"
+          aria-label="Open menu"
+          aria-haspopup="dialog"
+          aria-expanded={open}
+          onClick={() => (isMenuOpen.value = true)}
+        >
+          <MenuIcon />
+        </button>
+      </header>
+
+      {open && (
+        <div class="fixed inset-0 z-50">
+          <button
+            type="button"
+            class="menu-scrim absolute inset-0 bg-black/50"
+            aria-label="Close menu"
+            tabIndex={-1}
+            onClick={() => (isMenuOpen.value = false)}
+          />
+          <div
+            ref={panelRef}
+            class="menu-panel bg-light-card dark:bg-dark-card absolute inset-y-0 right-0 flex w-[85%] max-w-sm flex-col overflow-y-auto p-6 shadow-lg"
+            role="dialog"
+            aria-modal="true"
+            aria-label="Site menu"
+            style={{ paddingTop: 'max(1.5rem, env(safe-area-inset-top))' }}
+          >
+            <div class="mb-6 flex items-center justify-between">
+              <span class="section-heading">Menu</span>
+              <button
+                ref={closeRef}
+                type="button"
+                class="text-light-text-heading flex h-11 w-11 items-center justify-center rounded-full dark:text-white"
+                aria-label="Close menu"
+                onClick={() => (isMenuOpen.value = false)}
+              >
+                <CloseIcon />
+              </button>
+            </div>
+
+            <img
+              src={showImage}
+              alt=""
+              width={120}
+              height={120}
+              class="mb-4 h-28 w-28 rounded-xl"
+            />
+            <p class="text-light-text-heading text-lg font-bold dark:text-white">
+              {showTitle}
+            </p>
+            <p class="mt-1 mb-6 text-sm">{blurb}</p>
+
+            <a class="btn mb-8 self-start" href={cta.href}>
+              <span class="text-light-text-heading flex items-center rounded-full px-5 py-2.5 text-sm font-bold dark:text-white">
+                {cta.label}
+              </span>
+            </a>
+
+            <h3 class="section-heading pb-3">Listen</h3>
+            <ul class="mb-8 flex flex-col">
+              {platformLinks.map((link) => (
+                <li key={link.href}>
+                  <a
+                    class="text-light-text-heading block py-2 font-bold dark:text-white"
+                    href={link.href}
+                  >
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+
+            <nav aria-label="Site">
+              <ul class="mb-8 flex flex-col">
+                {navLinks.map((link) => (
+                  <li key={link.href}>
+                    <a
+                      class="text-light-text-heading block py-2 font-bold dark:text-white"
+                      href={link.href}
+                    >
+                      {link.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+
+            {hosts.length > 0 && (
+              <>
+                <h3 class="section-heading pb-3">Hosted by</h3>
+                <ul class="flex flex-col gap-1">
+                  {hosts.map((name) => (
+                    <li key={name}>{name}</li>
+                  ))}
+                </ul>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Player.tsx b/src/components/Player.tsx
index 84f74ef7..fe34aad8 100644
--- a/src/components/Player.tsx
+++ b/src/components/Player.tsx
@@ -1,6 +1,13 @@
 import { useEffect, useState, useRef } from 'preact/hooks';
+import type Hls from 'hls.js';
 
-import { currentEpisode, isMuted, isPlaying } from '../components/state';
+import {
+  currentEpisode,
+  isMuted,
+  isPlaying,
+  isTheaterOpen,
+  mediaMode
+} from '../components/state';
 import MuteButton from './player/MuteButton';
 import PlayButton from './player/PlayButton';
 import PlaybackRateButton from './player/PlaybackRateButton';
@@ -9,7 +16,12 @@ import RewindButton from './player/RewindButton';
 import Slider from './player/Slider';
 
 export default function Player() {
-  const audioPlayer = useRef<HTMLAudioElement | null>(null);
+  // A single <video> element backs both audio and video episodes (a <video>
+  // plays audio-only sources fine), which keeps the cross-page-transition
+  // persistence identical to the audio-only player.
+  const mediaPlayer = useRef<HTMLVideoElement | null>(null);
+  const hlsRef = useRef<Hls | null>(null);
+  const prevEpisodeIdRef = useRef<string | null>(null);
   const progressRef = useRef<number | null>(null);
   const [currentTime, setCurrentTime] = useState(0);
 
@@ -17,12 +29,17 @@ export default function Player() {
     return;
   }
 
-  const { audio, episodeNumber, title } = currentEpisode.value;
+  const { audio, video, episodeImage, episodeNumber, id, title } =
+    currentEpisode.value;
+  const hasVideo = !!video;
+  const useVideo = hasVideo && mediaMode.value === 'video';
+  const theaterOpen = useVideo && isTheaterOpen.value;
+  const activeSrc = useVideo ? video!.src : audio.src;
 
   function whilePlaying() {
-    if (audioPlayer.current?.duration) {
-      const time = audioPlayer.current.currentTime;
-      const percentage = (time / audioPlayer.current.duration) * 100;
+    if (mediaPlayer.current?.duration) {
+      const time = mediaPlayer.current.currentTime;
+      const percentage = (time / mediaPlayer.current.duration) * 100;
       setCurrentTime(time);
 
       const slider = document.querySelector('.slider');
@@ -46,26 +63,114 @@ export default function Player() {
     progressRef.current = requestAnimationFrame(whilePlaying);
   }
 
+  // Load the active source whenever the episode or the audio/video mode
+  // changes. Episode changes restart from 0; toggling audio<->video on the same
+  // episode preserves the current position.
   useEffect(() => {
-    if (audioPlayer.current) {
-      audioPlayer.current.src = audio.src;
-      audioPlayer.current.currentTime = 0;
-      audioPlayer.current.play();
+    const el = mediaPlayer.current;
+    if (!el) {
+      return;
     }
-  }, [audio]);
+
+    const sameEpisode = prevEpisodeIdRef.current === id;
+    const resumeAt = sameEpisode ? el.currentTime : 0;
+    prevEpisodeIdRef.current = id;
+
+    let cancelled = false;
+
+    const restore = () => {
+      if (cancelled) {
+        return;
+      }
+      if (resumeAt > 0) {
+        try {
+          el.currentTime = resumeAt;
+        } catch {
+          // seek requested before the stream is seekable; ignore
+        }
+      }
+      if (isPlaying.value) {
+        void el.play();
+      }
+    };
+
+    // Tear down any previous hls.js instance before loading a new source.
+    hlsRef.current?.destroy();
+    hlsRef.current = null;
+
+    const canPlayNativeHls =
+      el.canPlayType('application/vnd.apple.mpegurl') !== '';
+
+    if (useVideo && video && !canPlayNativeHls) {
+      // Chrome/Firefox can't play HLS natively — lazy-load hls.js only here.
+      import('hls.js').then(({ default: HlsLib }) => {
+        if (cancelled || mediaPlayer.current !== el) {
+          return;
+        }
+        if (HlsLib.isSupported()) {
+          const hls = new HlsLib();
+          hls.loadSource(video.src);
+          hls.attachMedia(el);
+          hls.on(HlsLib.Events.MANIFEST_PARSED, restore);
+          hlsRef.current = hls;
+        } else {
+          el.src = video.src;
+          el.addEventListener('loadedmetadata', restore, { once: true });
+        }
+      });
+    } else {
+      // Audio mode, audio-only episodes, or Safari (native HLS).
+      el.src = activeSrc;
+      el.addEventListener('loadedmetadata', restore, { once: true });
+    }
+
+    return () => {
+      cancelled = true;
+    };
+  }, [activeSrc]);
+
+  // Destroy any hls.js instance when the player unmounts.
+  useEffect(() => () => hlsRef.current?.destroy(), []);
+
+  // Keep the shared signals in sync when the user drives playback through the
+  // native HTML5 video controls (theater), so the custom transport in the bar
+  // doesn't desync from the element.
+  useEffect(() => {
+    const el = mediaPlayer.current;
+    if (!el) {
+      return;
+    }
+    const onPlay = () => {
+      isPlaying.value = true;
+    };
+    const onPause = () => {
+      isPlaying.value = false;
+    };
+    const onTimeUpdate = () => setCurrentTime(el.currentTime);
+
+    el.addEventListener('play', onPlay);
+    el.addEventListener('pause', onPause);
+    el.addEventListener('timeupdate', onTimeUpdate);
+
+    return () => {
+      el.removeEventListener('play', onPlay);
+      el.removeEventListener('pause', onPause);
+      el.removeEventListener('timeupdate', onTimeUpdate);
+    };
+  }, []);
 
   useEffect(() => {
     if (isPlaying.value) {
-      audioPlayer.current?.play();
+      mediaPlayer.current?.play();
       progressRef.current = requestAnimationFrame(whilePlaying);
     } else {
-      audioPlayer.current?.pause();
+      mediaPlayer.current?.pause();
       cancelAnimationFrame(progressRef.current as number);
     }
   }, [isPlaying.value]);
 
   useEffect(() => {
-    const duration = audioPlayer.current?.duration ?? 0;
+    const duration = mediaPlayer.current?.duration ?? 0;
     if (duration > 0 && currentTime >= duration - 0.01) {
       isPlaying.value = false;
       setCurrentTime(0);
@@ -73,7 +178,34 @@ export default function Player() {
   }, [currentTime]);
 
   return (
-    <div class="player fixed inset-x-0 bottom-0 z-50 lg:left-112 xl:left-120">
+    <div class="player fixed inset-x-0 bottom-0 z-50 flex flex-col lg:left-112 xl:left-120">
+      {/*
+        The <video> stays mounted at all times so playback and position survive
+        toggling to audio-only or minimizing the theater; the theater container
+        is simply hidden (display:none) when closed — the element keeps playing
+        audio either way.
+      */}
+      <div class={`flex justify-center px-4 md:px-6 ${theaterOpen ? '' : 'hidden'}`}>
+        <div class="relative w-full max-w-3xl overflow-hidden rounded-t-lg bg-black shadow-lg">
+          <video
+            ref={mediaPlayer}
+            muted={isMuted.value}
+            playsInline
+            controls={theaterOpen}
+            poster={episodeImage}
+            class="aspect-video w-full bg-black object-contain"
+          />
+          <button
+            type="button"
+            onClick={() => (isTheaterOpen.value = false)}
+            class="absolute top-2 right-2 rounded bg-black/60 px-2 py-1 text-xs font-bold text-white"
+            aria-label="Minimize video"
+          >
+            Minimize
+          </button>
+        </div>
+      </div>
+
       <div
         class="flex items-center gap-6 bg-light-player/90 px-4 py-4 backdrop-blur-xs md:px-6 dark:bg-dark-player/90"
         role="region"
@@ -97,26 +229,48 @@ export default function Player() {
               <MuteButton />
             </div>
             <div class="flex flex-none items-center gap-4">
-              <RewindButton audioPlayer={audioPlayer} />
+              <RewindButton audioPlayer={mediaPlayer} />
               <div class="md:hidden">
                 <PlayButton />
               </div>
-              <ForwardButton audioPlayer={audioPlayer} />
+              <ForwardButton audioPlayer={mediaPlayer} />
             </div>
-            <Slider audioPlayer={audioPlayer} currentTime={currentTime} />
+            <Slider audioPlayer={mediaPlayer} currentTime={currentTime} />
             <div class="flex items-center gap-4">
+              {hasVideo && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    const toVideo = !useVideo;
+                    mediaMode.value = toVideo ? 'video' : 'audio';
+                    isTheaterOpen.value = toVideo;
+                  }}
+                  class="rounded-full border border-current px-2 py-[2px] text-[10px] font-bold uppercase"
+                  aria-label={
+                    useVideo ? 'Switch to audio only' : 'Switch to video'
+                  }
+                >
+                  {useVideo ? 'Audio' : 'Video'}
+                </button>
+              )}
+              {hasVideo && useVideo && !isTheaterOpen.value && (
+                <button
+                  type="button"
+                  onClick={() => (isTheaterOpen.value = true)}
+                  class="rounded-full border border-current px-2 py-[2px] text-[10px] font-bold uppercase"
+                  aria-label="Expand video"
+                >
+                  Watch
+                </button>
+              )}
               <div class="flex items-center">
-                <PlaybackRateButton audioPlayer={audioPlayer} />
+                <PlaybackRateButton audioPlayer={mediaPlayer} />
               </div>
               <div class="hidden items-center md:flex">
                 <MuteButton />
               </div>
             </div>
           </div>
-
-          <div class="hidden">
-            <audio muted={isMuted} ref={audioPlayer} />
-          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/player/ForwardButton/index.tsx b/src/components/player/ForwardButton/index.tsx
index 7d540e8c..69b7ccf1 100644
--- a/src/components/player/ForwardButton/index.tsx
+++ b/src/components/player/ForwardButton/index.tsx
@@ -2,7 +2,7 @@ import type { MutableRef } from 'preact/hooks';
 import './styles.css';
 
 type Props = {
-  audioPlayer: MutableRef<HTMLAudioElement | null>;
+  audioPlayer: MutableRef<HTMLMediaElement | null>;
 };
 
 export default function ForwardButton({ audioPlayer }: Props) {
diff --git a/src/components/player/PlayButton.tsx b/src/components/player/PlayButton.tsx
index 1dd41fcd..24786344 100644
--- a/src/components/player/PlayButton.tsx
+++ b/src/components/player/PlayButton.tsx
@@ -46,7 +46,7 @@ export default function PlayButton({ episode }: Props) {
   return (
     <div class="flex h-16 w-16 items-center justify-center">
       <button
-        class="bg-light-text-heading flex h-14 w-14 items-center justify-center rounded-full text-white transition-all duration-300 hover:h-16 hover:w-16 hover:bg-linear-to-r hover:from-[#D8CCFF] hover:to-[#8A63FF] dark:bg-white dark:text-[#24263D] dark:hover:from-[#42C8F3] dark:hover:to-[#B6EDFF]"
+        class="play-affordance flex h-14 w-14 items-center justify-center rounded-full transition-all duration-300 hover:h-16 hover:w-16"
         type="button"
         onClick={() => {
           if (episode) {
diff --git a/src/components/player/PlaybackRateButton.tsx b/src/components/player/PlaybackRateButton.tsx
index 38d65e65..1520a96c 100644
--- a/src/components/player/PlaybackRateButton.tsx
+++ b/src/components/player/PlaybackRateButton.tsx
@@ -1,7 +1,7 @@
 import { useState, type MutableRef } from 'preact/hooks';
 
 type Props = {
-  audioPlayer: MutableRef<HTMLAudioElement | null>;
+  audioPlayer: MutableRef<HTMLMediaElement | null>;
 };
 
 const playbackRates = [1, 1.2, 1.5, 2];
diff --git a/src/components/player/RewindButton/index.tsx b/src/components/player/RewindButton/index.tsx
index 5ecbf516..027946a8 100644
--- a/src/components/player/RewindButton/index.tsx
+++ b/src/components/player/RewindButton/index.tsx
@@ -2,7 +2,7 @@ import type { MutableRef } from 'preact/hooks';
 import './styles.css';
 
 type Props = {
-  audioPlayer: MutableRef<HTMLAudioElement | null>;
+  audioPlayer: MutableRef<HTMLMediaElement | null>;
 };
 
 export default function RewindButton({ audioPlayer }: Props) {
diff --git a/src/components/player/Slider/index.tsx b/src/components/player/Slider/index.tsx
index ecc6ed65..e796eb26 100644
--- a/src/components/player/Slider/index.tsx
+++ b/src/components/player/Slider/index.tsx
@@ -2,7 +2,7 @@ import type { MutableRef } from 'preact/hooks';
 import './styles.css';
 
 type Props = {
-  audioPlayer: MutableRef<HTMLAudioElement | null>;
+  audioPlayer: MutableRef<HTMLMediaElement | null>;
   currentTime: number;
 };
 
diff --git a/src/components/state.ts b/src/components/state.ts
index bbd2212c..13c76ca4 100644
--- a/src/components/state.ts
+++ b/src/components/state.ts
@@ -3,10 +3,21 @@ import type { Episode } from '../lib/rss';
 
 export const currentEpisode = signal<Pick<
   Episode,
-  'audio' | 'episodeNumber' | 'id' | 'title'
+  'audio' | 'video' | 'episodeImage' | 'episodeNumber' | 'id' | 'title'
 > | null>(null);
 export const isPlaying = signal(false);
 export const isMuted = signal(false);
 
+// When the current episode has video, whether to play the video stream or fall
+// back to audio-only. Defaults to video; ignored for audio-only episodes.
+export const mediaMode = signal<'video' | 'audio'>('video');
+
+// Whether the expanded video theater (large, native-controls surface above the
+// docked player bar) is open. Toggled from the player and the episode page.
+export const isTheaterOpen = signal(false);
+
+// Mobile slide-over navigation menu open/closed.
+export const isMenuOpen = signal(false);
+
 // Search state
 export const isSearchOpen = signal(false);
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index fd7057e5..51f877bf 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -8,13 +8,15 @@ import SpeedInsights from '@vercel/speed-insights/astro';
 import Breadcrumbs from '../components/Breadcrumbs.astro';
 import Dots from '../components/Dots.astro';
 import Hosts from '../components/Hosts.astro';
-import InfoCard from '../components/InfoCard.astro';
+import MobileNav from '../components/MobileNav';
 import Platforms from '../components/Platforms.astro';
 import Player from '../components/Player';
 import SearchButton from '../components/SearchButton';
 import SearchDialog from '../components/SearchDialog';
 import ShowArtwork from '../components/ShowArtwork.astro';
 
+import { resolveCta } from '../lib/cta';
+import { navLinks } from '../lib/navLinks';
 import { getShowInfo } from '../lib/rss';
 import starpodConfig from 'starpod.config';
 
@@ -22,6 +24,22 @@ import '../styles/global.css';
 
 const show = await getShowInfo();
 
+const cta = resolveCta(starpodConfig);
+
+const { platforms } = starpodConfig;
+const platformLinks = [
+  platforms.spotify && { label: 'Spotify', href: platforms.spotify },
+  platforms.apple && { label: 'Apple Podcasts', href: platforms.apple },
+  platforms.overcast && { label: 'Overcast', href: platforms.overcast },
+  platforms.pocketCasts && {
+    label: 'Pocket Casts',
+    href: platforms.pocketCasts
+  },
+  platforms.youtube && { label: 'YouTube', href: platforms.youtube }
+].filter((link): link is { label: string; href: string } => Boolean(link));
+
+const hostNames = starpodConfig.hosts.map((host) => host.name);
+
 export interface Props {
   /**
    * If defined, this will override the default canonical URL.
@@ -128,14 +146,38 @@ const description = Astro.props.description ?? starpodConfig.description;
   <body
     class="font-inter text-light-text-body dark:bg-dark-background dark:text-dark-text-body antialiased"
   >
+    <MobileNav
+      client:load
+      transition:persist="mobilenav"
+      showTitle={show.title}
+      showImage={show.image}
+      blurb={starpodConfig.blurb}
+      navLinks={navLinks}
+      platformLinks={platformLinks}
+      hosts={hostNames}
+      cta={cta}
+    />
     <header
       class="custom-scrollbar lg:fixed lg:inset-y-0 lg:left-0 lg:flex lg:w-112 lg:items-start lg:overflow-y-auto xl:w-120"
       transition:persist="sidenav"
     >
       <div class="relative z-10 mx-auto lg:min-h-full lg:flex-auto">
         <div
-          class="bg-light-card dark:bg-dark-card m-2 rounded-lg pt-10 pb-4 lg:pt-16 lg:pb-12"
+          class="bg-light-card dark:bg-dark-card m-2 rounded-lg pt-10 pb-4 lg:pt-4 lg:pb-12"
         >
+          <div
+            class="bg-light-card/90 dark:bg-dark-card/90 sticky top-0 z-20 mb-4 hidden items-center justify-between gap-3 py-3 backdrop-blur-xs lg:flex lg:px-16"
+          >
+            <SearchButton client:load />
+            <a class="btn flex-none" href={cta.href}>
+              <span
+                class="text-light-text-heading flex items-center rounded-full px-4 py-2 text-sm font-bold dark:text-white"
+              >
+                {cta.label}
+              </span>
+            </a>
+          </div>
+
           <ShowArtwork image={show.image} />
 
           <div class="px-4 sm:px-6 md:px-4 lg:px-16">
@@ -153,22 +195,32 @@ const description = Astro.props.description ?? starpodConfig.description;
           <div class="px-4 sm:px-6 md:px-4 lg:px-16">
             <Platforms />
           </div>
+
+          <nav
+            class="hidden px-4 sm:px-6 md:px-4 lg:block lg:px-16"
+            aria-label="Site"
+          >
+            {
+              navLinks.map((link) => (
+                <a
+                  class="animated-bottom-border block pt-5 after:mt-5"
+                  href={link.href}
+                >
+                  {link.label}
+                </a>
+              ))
+            }
+          </nav>
+
           <div class="hidden lg:block">
             <Hosts />
           </div>
         </div>
-
-        <div class="hidden lg:block">
-          <InfoCard />
-        </div>
       </div>
     </header>
     <main
       class="bg-light-card dark:bg-dark-card mx-2 mb-2 rounded-lg lg:relative lg:ml-112 lg:min-h-screen xl:ml-120"
     >
-      <div class="absolute top-4 right-4 z-30">
-        <SearchButton client:load />
-      </div>
       <div class="relative mt-2 pt-16">
         <div
           class="bg-gradient-light dark:bg-gradient-dark absolute top-0 right-0 left-0 z-0 h-80 w-full opacity-30"
@@ -193,10 +245,6 @@ const description = Astro.props.description ?? starpodConfig.description;
         </div>
       </div>
     </main>
-    <footer class="block lg:hidden">
-      <Hosts />
-      <InfoCard />
-    </footer>
     <div id="audio-player">
       <Player client:only="preact" transition:persist="player" />
     </div>
diff --git a/src/lib/cta.ts b/src/lib/cta.ts
new file mode 100644
index 00000000..8e0fd25b
--- /dev/null
+++ b/src/lib/cta.ts
@@ -0,0 +1,30 @@
+import type { StarpodConfig } from '../utils/config';
+
+export type ResolvedCta = {
+  label: string;
+  href: string;
+};
+
+/**
+ * Resolve the single, rationed call-to-action shown in the rail and mobile
+ * app-bar. Podcasters configure it via the optional `cta` field in
+ * `starpod.config.ts`; when unset it falls back to the most useful "Subscribe"
+ * target available (a primary platform link, else the RSS feed) so an adopter
+ * who sets nothing still ships a sensible CTA.
+ */
+export function resolveCta(config: StarpodConfig): ResolvedCta {
+  const { cta, platforms, rssFeed } = config;
+
+  const fallbackHref =
+    platforms.spotify ??
+    platforms.apple ??
+    platforms.youtube ??
+    platforms.overcast ??
+    platforms.pocketCasts ??
+    rssFeed;
+
+  return {
+    label: cta?.label ?? 'Subscribe',
+    href: cta?.href ?? fallbackHref
+  };
+}
diff --git a/src/lib/navLinks.ts b/src/lib/navLinks.ts
new file mode 100644
index 00000000..90581059
--- /dev/null
+++ b/src/lib/navLinks.ts
@@ -0,0 +1,20 @@
+/**
+ * Primary site navigation links, surfaced in the desktop rail and the mobile
+ * slide-over menu.
+ *
+ * NOTE: These are intentionally hard-coded for now. When nav becomes
+ * config-driven (see `.impeccable/briefs/reshape-sticky-rail.md`, open
+ * question #2), move this array into `starpod.config.ts` and resolve it through
+ * `defineStarpodConfig`. Centralizing it here keeps that migration trivial.
+ */
+export type NavLink = {
+  label: string;
+  href: string;
+};
+
+export const navLinks: Array<NavLink> = [
+  { label: 'About', href: '/about' },
+  { label: 'Contact', href: '/contact' },
+  { label: 'Store', href: 'https://whiskey.fund/' },
+  { label: 'Become a sponsor', href: '/sponsor' }
+];
diff --git a/src/lib/rss.ts b/src/lib/rss.ts
index c5ffa719..8a9e34a9 100644
--- a/src/lib/rss.ts
+++ b/src/lib/rss.ts
@@ -1,3 +1,4 @@
+import { XMLParser } from 'fast-xml-parser';
 import { htmlToText } from 'html-to-text';
 import parseFeed from 'rss-to-json';
 import { array, number, object, optional, parse, string } from 'valibot';
@@ -29,6 +30,14 @@ export interface Episode {
     src: string;
     type: string;
   };
+  /**
+   * HLS video stream, when the feed provides a `<podcast:alternateEnclosure>`
+   * with a `application/x-mpegURL` source. Absent for audio-only episodes.
+   */
+  video?: {
+    src: string;
+    type: string;
+  };
 }
 
 let showInfoCache: Show | null = null;
@@ -49,6 +58,64 @@ export async function getShowInfo() {
   return showInfo;
 }
 
+const HLS_TYPE = 'application/x-mpegURL';
+
+let videoMapCache: Map<string, Episode['video']> | null = null;
+
+/**
+ * `rss-to-json` only surfaces a hardcoded allowlist of fields and drops
+ * `<podcast:alternateEnclosure>` entirely, so we parse the raw feed XML once to
+ * pull the HLS video stream for each episode, keyed by guid.
+ */
+async function getEpisodeVideos() {
+  if (videoMapCache) {
+    return videoMapCache;
+  }
+
+  const map = new Map<string, Episode['video']>();
+
+  const res = await fetch(starpodConfig.rssFeed);
+  const xml = await res.text();
+  const parsed = new XMLParser({ ignoreAttributes: false }).parse(xml);
+
+  const channel = parsed?.rss?.channel ?? parsed?.feed;
+  let items = channel?.item ?? [];
+  if (!Array.isArray(items)) {
+    items = [items];
+  }
+
+  for (const item of items) {
+    const guid =
+      typeof item?.guid === 'object' ? item.guid['#text'] : item?.guid;
+    if (!guid) {
+      continue;
+    }
+
+    let alternates = item['podcast:alternateEnclosure'];
+    if (!alternates) {
+      continue;
+    }
+    if (!Array.isArray(alternates)) {
+      alternates = [alternates];
+    }
+
+    const hls = alternates.find(
+      (alt: Record<string, unknown>) => alt['@_type'] === HLS_TYPE
+    );
+    const source = hls?.['podcast:source'];
+    const uri = Array.isArray(source)
+      ? source[0]?.['@_uri']
+      : source?.['@_uri'];
+
+    if (uri) {
+      map.set(String(guid), { src: uri, type: HLS_TYPE });
+    }
+  }
+
+  videoMapCache = map;
+  return map;
+}
+
 let episodesCache: Array<Episode> | null = null;
 
 export async function getAllEpisodes() {
@@ -81,6 +148,8 @@ export async function getAllEpisodes() {
   let feed = (await parseFeed.parse(starpodConfig.rssFeed)) as Show;
   let items = parse(FeedSchema, feed).items;
 
+  const videoMap = await getEpisodeVideos();
+
   let episodes: Array<Episode> = await Promise.all(
     items
       .filter((item) => item.itunes_episodeType !== 'trailer')
@@ -116,7 +185,8 @@ export async function getAllEpisodes() {
             audio: enclosures.map((enclosure) => ({
               src: enclosure.url,
               type: enclosure.type
-            }))[0]
+            }))[0],
+            video: videoMap.get(id)
           };
         }
       )
diff --git a/src/pages/[episode].astro b/src/pages/[episode].astro
index ab634278..a921331d 100644
--- a/src/pages/[episode].astro
+++ b/src/pages/[episode].astro
@@ -16,8 +16,7 @@ import { Schema } from 'astro-seo-schema';
 import FormattedDate from '../components/FormattedDate';
 import CreatorsAndGuests from '../components/episode/CreatorsAndGuests.astro';
 import Sponsors from '../components/episode/Sponsors.astro';
-import PlayButton from '../components/player/PlayButton';
-import FullPlayButton from '../components/FullPlayButton';
+import EpisodeCta from '../components/EpisodeCta';
 import UFOIllustration from '../components/illustrations/UFOIllustration.astro';
 import { generateDocumentLinkTag } from '@bryanguffey/astro-standard-site';
 
@@ -152,17 +151,38 @@ const documentLinkTag =
   }
 
   <div class="relative z-10 px-8 lg:px-18">
-    <div class="block lg:flex">
-      <div class="mt-4 mr-11 hidden h-14 w-14 shrink-0 lg:block">
-        <PlayButton
-          client:only="preact"
-          episode={{
-            audio: episode.audio,
-            episodeNumber: episode.episodeNumber,
-            id: episode.id,
-            title: episode.title
-          }}
-        />
+    <div class="block lg:flex lg:gap-11">
+      <div class="mb-8 shrink-0 lg:mb-0 lg:mt-4 lg:w-56">
+        <div
+          class="relative mx-auto w-48 overflow-hidden rounded-2xl sm:w-64 lg:w-full"
+        >
+          <img
+            class="block w-full"
+            src={episode.episodeImage ?? show.image}
+            alt={`${episode.title} cover art`}
+            height={640}
+            width={640}
+            loading="eager"
+          />
+          <div
+            class="absolute inset-0 flex items-center justify-center bg-black/0 transition-colors hover:bg-black/10"
+          >
+            <EpisodeCta
+              client:only="preact"
+              round
+              mode={episode.video ? 'video' : 'audio'}
+              label={episode.video ? 'Watch episode' : 'Play episode'}
+              episode={{
+                audio: episode.audio,
+                video: episode.video,
+                episodeImage: episode.episodeImage,
+                episodeNumber: episode.episodeNumber,
+                id: episode.id,
+                title: episode.title
+              }}
+            />
+          </div>
+        </div>
       </div>
 
       <div class="overflow-hidden break-words">
@@ -179,16 +199,53 @@ const documentLinkTag =
           {episode.description}
         </p>
 
-        <div class="mb-8 block lg:hidden">
-          <FullPlayButton
-            client:only="preact"
-            episode={{
-              audio: episode.audio,
-              episodeNumber: episode.episodeNumber,
-              id: episode.id,
-              title: episode.title
-            }}
-          />
+        <div class="mb-8 flex flex-wrap items-center gap-4">
+          {
+            episode.video ? (
+              <>
+                <EpisodeCta
+                  client:only="preact"
+                  mode="video"
+                  label="Watch Episode"
+                  episode={{
+                    audio: episode.audio,
+                    video: episode.video,
+                    episodeImage: episode.episodeImage,
+                    episodeNumber: episode.episodeNumber,
+                    id: episode.id,
+                    title: episode.title
+                  }}
+                />
+                <EpisodeCta
+                  client:only="preact"
+                  mode="audio"
+                  label="Listen"
+                  episode={{
+                    audio: episode.audio,
+                    video: episode.video,
+                    episodeImage: episode.episodeImage,
+                    episodeNumber: episode.episodeNumber,
+                    id: episode.id,
+                    title: episode.title
+                  }}
+                />
+              </>
+            ) : (
+              <EpisodeCta
+                client:only="preact"
+                mode="audio"
+                label="Play Episode"
+                episode={{
+                  audio: episode.audio,
+                  video: episode.video,
+                  episodeImage: episode.episodeImage,
+                  episodeNumber: episode.episodeNumber,
+                  id: episode.id,
+                  title: episode.title
+                }}
+              />
+            )
+          }
         </div>
 
         {
diff --git a/src/styles/global.css b/src/styles/global.css
index 0c4fb1b4..d948fdde 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -61,6 +61,64 @@ footer:has(+ #audio-player .player) {
   }
 }
 
+/*
+  The circular play/watch affordance: indigo-ink at rest, sweeping to the
+  rationed Iris (light) / Aqua (dark) accent gradient on hover. Colors are
+  OKLCH; size/transition stay as utility classes on the element.
+*/
+.play-affordance {
+  background-color: var(--color-light-text-heading);
+  color: oklch(100% 0 0);
+
+  &:hover {
+    background-image: linear-gradient(
+      to right,
+      oklch(86% 0.073 293),
+      oklch(60.5% 0.213 293)
+    );
+  }
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(100% 0 0);
+    color: var(--color-dark-button);
+
+    &:hover {
+      background-image: linear-gradient(
+        to right,
+        oklch(76.5% 0.122 223),
+        oklch(91% 0.05 220)
+      );
+    }
+  }
+}
+
+.menu-panel {
+  animation: menu-panel-in 300ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.menu-scrim {
+  animation: menu-scrim-in 300ms ease-out;
+}
+
+@keyframes menu-panel-in {
+  from {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes menu-scrim-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .menu-panel,
+  .menu-scrim {
+    animation: none;
+  }
+}
+
 .animated-bottom-border {
   @apply dark:border-dark-border border-b after:block after:h-[1px] after:w-0 after:bg-gradient-to-r after:from-[#C6B2FF] after:to-[#8D67FF] after:transition-all after:duration-500 after:ease-in-out hover:after:w-full dark:after:from-[#43C9F5] dark:after:to-[#B4EDFF];
 }
diff --git a/src/utils/config.ts b/src/utils/config.ts
index c24c53d0..44804bc8 100644
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -53,6 +53,22 @@ export type StarpodConfig = {
    * The url to the RSS feed where your podcast is hosted.
    */
   rssFeed: string;
+  /**
+   * Optional call-to-action shown in the nav rail and mobile app-bar. When
+   * omitted, Starpod renders a "Subscribe" button pointing at your primary
+   * platform link (or RSS feed). Repoint it at anything you like — newsletter,
+   * Patreon, live-show tickets, a Discord invite, etc.
+   */
+  cta?: {
+    /**
+     * The button label. Defaults to "Subscribe".
+     */
+    label?: string;
+    /**
+     * Where the button links. Defaults to your first platform link, then RSS.
+     */
+    href?: string;
+  };
 };
 
 export const defineStarpodConfig = (config: StarpodConfig) => config;
diff --git a/tests/unit/Player.test.tsx b/tests/unit/Player.test.tsx
index 9b822119..41caa754 100644
--- a/tests/unit/Player.test.tsx
+++ b/tests/unit/Player.test.tsx
@@ -1,7 +1,13 @@
 import { render, screen } from '@testing-library/preact';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import Player from '../../src/components/Player';
-import { currentEpisode, isPlaying, isMuted } from '../../src/components/state';
+import {
+  currentEpisode,
+  isPlaying,
+  isMuted,
+  isTheaterOpen,
+  mediaMode
+} from '../../src/components/state';
 
 const mockEpisode = {
   id: 'test-episode-1',
@@ -10,6 +16,12 @@ const mockEpisode = {
   episodeNumber: '1'
 };
 
+const mockVideoEpisode = {
+  ...mockEpisode,
+  id: 'test-episode-video',
+  video: { src: 'test.m3u8', type: 'application/x-mpegURL' }
+};
+
 // Mock audio element
 class MockAudio {
   src = '';
@@ -64,6 +76,8 @@ describe('Player', () => {
     currentEpisode.value = null;
     isPlaying.value = false;
     isMuted.value = false;
+    mediaMode.value = 'video';
+    isTheaterOpen.value = false;
     vi.clearAllMocks();
 
     // Mock HTMLAudioElement
@@ -134,14 +148,58 @@ describe('Player', () => {
     expect(slider).toHaveAttribute('aria-label', 'audio timeline');
   });
 
-  it('renders audio element', () => {
+  it('renders media element', () => {
+    currentEpisode.value = mockEpisode;
+
+    const { container } = render(<Player />);
+
+    // A single <video> element backs both audio and video playback
+    const mediaElement = container.querySelector('video');
+    expect(mediaElement).toBeTruthy();
+  });
+
+  it('shows the audio/video toggle only for episodes with video', () => {
+    mediaMode.value = 'video';
     currentEpisode.value = mockEpisode;
+    const { rerender } = render(<Player />);
+
+    // Audio-only episode: no toggle.
+    expect(
+      screen.queryByRole('button', { name: /switch to (audio|video)/i })
+    ).toBeNull();
+
+    // Video episode (default video mode): toggle offers switching to audio.
+    currentEpisode.value = mockVideoEpisode;
+    rerender(<Player />);
+    expect(
+      screen.getByRole('button', { name: /switch to audio only/i })
+    ).toBeInTheDocument();
+  });
+
+  it('exposes native video controls when the theater is open', () => {
+    mediaMode.value = 'video';
+    isTheaterOpen.value = true;
+    currentEpisode.value = mockVideoEpisode;
 
     const { container } = render(<Player />);
 
-    // Audio element should exist in the component tree
-    const audioElement = container.querySelector('audio');
-    expect(audioElement).toBeTruthy();
+    const video = container.querySelector('video');
+    expect(video).toHaveAttribute('controls');
+    expect(
+      screen.getByRole('button', { name: /minimize video/i })
+    ).toBeInTheDocument();
+  });
+
+  it('offers a Watch affordance for video episodes when the theater is closed', () => {
+    mediaMode.value = 'video';
+    isTheaterOpen.value = false;
+    currentEpisode.value = mockVideoEpisode;
+
+    render(<Player />);
+
+    expect(
+      screen.getByRole('button', { name: /expand video/i })
+    ).toBeInTheDocument();
   });
 
   it('applies view transition name for animations', () => {