:root {
  --bg: #fbf7f0; --surface: #fff; --ink: #2b2622; --muted: #6b6159; --line: #e5dccd;
  --accent: #8a3f16; --accent-ink: #fff; --live: #b3261e;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1d1916; --surface: #28221e; --ink: #f1e9de; --muted: #b3a798; --line: #3d342d; --accent: #e8a672; --accent-ink: #1d1916; --live: #ff8a80; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.6 var(--font); }
h1, h2, h3 { font-family: var(--serif); line-height: 1.25; }
h1 { font-size: 1.9rem; margin: .4em 0; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
main, .site-header, .site-footer { max-width: 46rem; margin: 0 auto; padding: 0 1rem; }
main { padding-bottom: 2rem; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: 1rem; background: var(--surface); padding: .5rem; z-index: 10; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.branding { flex: 1 0 100%; text-align: center; }
.logo img { display: block; width: auto; max-width: 100%; height: auto; max-height: 200px; margin: 0 auto .75rem; }
.brand { font: 700 1.25rem var(--serif); color: var(--ink); text-decoration: none; }
.tagline { margin: .25rem 0 0; color: var(--muted); }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
nav a { color: var(--ink); text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; }
nav a[aria-current], nav a:hover { border-bottom-color: var(--accent); }
.install, .player button.play { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px; cursor: pointer; font: inherit; }
.install { padding: .35rem .9rem; }
.hero { background: var(--surface); border: 1px solid var(--line); border-radius: .75rem; padding: 1.25rem; margin: 1.25rem 0; }
.hero h1, .hero h2 { margin-top: 0; }
.hero h1 a { color: inherit; text-decoration: none; }
.hero.is-live { border-color: var(--live); }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--muted); margin: 0; }
.meta { color: var(--muted); margin: .25rem 0 .75rem; }
.banner { margin: 1rem 0; padding: .6rem .9rem; border-radius: .5rem; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--accent); }
.banner.is-live { border-left-color: var(--live); }
.blurb a { color: inherit; text-decoration: none; }
.blurb a:hover .more, .blurb a:focus-visible .more { text-decoration: underline; }
.blurb .more { color: var(--accent); white-space: nowrap; }
.card { padding: .9rem 0; border-bottom: 1px solid var(--line); }
.card h3 { margin: 0; font-size: 1.15rem; } .card p { margin: .2rem 0; }
.subscribe { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.subscribe a { display: inline-block; padding: .45rem .9rem; border: 1px solid var(--accent); border-radius: 999px; text-decoration: none; }
.subscribe a:hover { background: var(--accent); color: var(--accent-ink); }
.player { margin-top: 1rem; }
.player-main { display: flex; align-items: center; gap: .9rem; }
.player button.play { width: 3.5rem; height: 3.5rem; flex: none; display: grid; place-items: center; }
.player button.play svg { width: 1.75rem; height: 1.75rem; fill: currentColor; }
.seek { flex: 1; min-width: 0; }
.seek input { width: 100%; accent-color: var(--accent); margin: 0; }
.times { display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.speeds { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.speeds button { background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: .4rem; padding: .25rem .6rem; font: inherit; font-size: .85rem; cursor: pointer; }
.speeds button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chapters { padding-left: 1.2rem; } .chapters li { margin: .25rem 0; }
.linklike { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-variant-numeric: tabular-nums; text-decoration: underline; cursor: pointer; }
.stream { width: 100%; margin: .75rem 0; }
.notes img { max-width: 100%; height: auto; }
.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; padding-top: 1rem; padding-bottom: 2rem; }
@media (min-width: 40rem) { h1 { font-size: 2.4rem; } main { padding-top: .5rem; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }