/*
==============================================================================
  AVAVA | Radio Station HTML Template
  podcasts.css — styles of the Podcasts page (loaded after style.css)
==============================================================================

  TABLE OF CONTENTS

  01. Series — the rack of series and the open series (the intro lives in style.css)
  02. Latest episode — spine, cover, letters, records, chapters, player bar
  03. All episodes — continue listening, search, chips, the ledger by months
  04. Continue — where you left off, saved for later
  05. Transcript — the ladder of chapters and the typed lines
  06. Guests — the word cloud, the selected topic, recurring guests
  07. Subscribe — feed + QR, platforms, cities, the file, three ways to be told
  08. Pitch — the idea form, pipeline, votes, production queue, listeners' chat
  09. Responsive

==============================================================================
*/

:root {
  --pd-ember7: rgba(201, 80, 42, .07);
  --pd-ember8: rgba(201, 80, 42, .08);
  --pd-ember10: rgba(201, 80, 42, .1);
  --pd-ember14: rgba(201, 80, 42, .14);
  --pd-ember16: rgba(201, 80, 42, .16);
  --pd-ember50: rgba(201, 80, 42, .5);
  --pd-ember55: rgba(201, 80, 42, .55);
}


/* shared on this page: sheets, section heads, stripes */
.pa-sheet .ar-totals .orb { font-size: clamp(16px, 1.7vw, 24px); }
.pe-sheet, .pa-sheet, .pz-sheet, .pu-sheet, .pf-sheet, .pi-sheet { border: 1px solid var(--i12); background: var(--card); }
.pu-sheet { background: var(--paper); }
.pa-sheet, .pz-sheet, .pu-sheet { padding: clamp(26px, 2.8vw, 42px) clamp(20px, 2.4vw, 40px); }
.pi-sheet { padding: clamp(24px, 2.6vw, 38px) clamp(20px, 2.4vw, 40px); }

/* ============================================================================
   01. Series
   ========================================================================= */
.sec--series { background: var(--card); padding-top: 40px; }
.ps-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 18px; margin-bottom: clamp(16px, 2vw, 26px); }
.ps-head h2 { font-size: clamp(22px, 2.4vw, 36px); line-height: 1; letter-spacing: -.04em; }
.ps-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); gap: clamp(18px, 2.4vw, 40px); align-items: stretch; }
.ps-rack { min-width: 0; display: flex; flex-direction: column; }
.ps-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-bottom: 12px; }
.ps-chip { padding: 7px 12px; border: 1px solid var(--i2); color: var(--i65); font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .12em; white-space: nowrap; }
.ps-chip.is-on, .pa-chip.is-on { border-color: var(--accent); background: var(--pd-ember14); color: var(--accent); }
.ps-chip:hover, .pa-chip:hover { border-color: var(--accent); color: var(--accent); }
.ps-th, .ps-row { display: grid; grid-template-columns: 3px 44px minmax(0, 1.6fr) 64px 52px 18px; gap: 10px; }
.ps-th { padding-bottom: 8px; border-bottom: 2px solid var(--accent); }
.ps-th .mono { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-th .r, .ps-row .cnt, .ps-row .arr { text-align: right; }
.ps-rows { display: flex; flex-direction: column; flex: 1; }
.ps-row { flex: 1; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--i14); cursor: pointer; min-width: 0; }
.ps-row:hover { background: var(--hover); }
.ps-row.is-on { background: var(--pd-ember10); }
.ps-stripe { align-self: stretch; background: var(--i18); }
.ps-row.is-on .ps-stripe { background: var(--accent); }
.ps-row .no, .ps-row .arr { color: var(--i45); }
.ps-row.is-on .no, .ps-row.is-on .arr { color: var(--accent); }
.ps-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ps-tt { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ps-tt .n { font: 600 15px / 1.25 Archivo, sans-serif; color: var(--ink); }
.ps-row.is-on .ps-tt .n { color: var(--accent); }
.ps-spark { display: flex; align-items: flex-end; gap: 2px; height: 18px; min-width: 0; }
.ps-spark > span { flex: 1; min-width: 0; background: var(--i28); }
.ps-row.is-on .ps-spark > span { background: rgba(201, 80, 42, .75); }
.ps-lead { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: clamp(16px, 1.8vw, 24px); border: 1px solid var(--pd-ember55); background: var(--pd-ember7); }
.ps-cover { display: grid; grid-template-columns: 28px minmax(0, 1fr); min-width: 0; }
.ps-spine, .pe-spine { display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.ps-fig { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--i10); }
.ps-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-disc { position: absolute; right: 12px; bottom: 12px; width: 64px; height: 64px; }
.ps-notch { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(245, 244, 241, .55) 0deg .7deg, transparent .7deg 7.5deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px)); }
.ps-play, .pe-play, .pa-cplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 58%; height: 58%; border-radius: 50%; background: var(--accent); color: #fff; font-size: 14px; display: grid; place-items: center; }
.ps-play:hover, .pe-play:hover, .pa-cplay:hover { background: #E0663D; }
:root:not([data-theme="dark"]) .ps-play:hover, :root:not([data-theme="dark"]) .pe-play:hover, :root:not([data-theme="dark"]) .pa-cplay:hover { background: #141110; }
.ps-lead h3 { font-size: clamp(19px, 2vw, 26px); line-height: 1.1; letter-spacing: -.03em; }
.ps-with { font-size: clamp(16px, 1.6vw, 20px); line-height: 1; color: var(--accent); }
.ps-lead p { font: 400 14px / 1.55 Archivo, sans-serif; color: var(--i7); text-wrap: pretty; }
.ps-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px 0; border-top: 1px solid var(--i16); border-bottom: 1px solid var(--i16); }
.ps-stats li { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ps-stats .orb { font-size: clamp(15px, 1.5vw, 21px); line-height: 1; white-space: nowrap; }
.ps-eps { display: flex; flex-direction: column; }
.ps-eps li { display: flex; flex-direction: column; gap: 6px; padding: 9px 0; border-bottom: 1px solid var(--i12); min-width: 0; cursor: pointer; }
.ps-eps li:hover { border-bottom-color: var(--accent); }
.ps-el { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.ps-el .no { flex: none; color: var(--i45); }
.ps-el .n { font: 400 14px / 1.3 Archivo, sans-serif; color: var(--i84); }
.ps-el .mono:last-child { margin-left: auto; flex: none; }
.ps-eps li.is-on .no, .ps-eps li.is-on .n { color: var(--accent); }
.ps-next { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.ps-nl { display: flex; align-items: center; gap: 10px; }
.ps-next .btn-ember { align-self: flex-start; }

/* ============================================================================
   02. Latest episode
   ========================================================================= */
.sec--latest { background: var(--paper); }
.pe-top { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 14px clamp(20px, 2.4vw, 40px); border-bottom: 1px solid var(--i12); }
.pe-grid { display: grid; grid-template-columns: 30px clamp(200px, 22vw, 300px) minmax(0, 1fr) clamp(260px, 26vw, 360px); align-items: stretch; }
.pe-side { display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 2.2vw, 30px) clamp(12px, 1.4vw, 20px); border-right: 1px solid var(--i12); min-width: 0; }
.pe-cover { position: relative; flex: 1; width: 100%; min-height: 220px; overflow: hidden; background: var(--i10); }
.pe-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pe-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(201, 80, 42, .3), transparent 62%); }
.pe-cover figcaption { position: absolute; left: 9px; bottom: 9px; z-index: 1; color: #f5f4f1; }
.pe-specs { display: flex; flex-direction: column; gap: 12px; }
.pe-specs li, .pf-facts li { display: flex; align-items: baseline; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid var(--i14); min-width: 0; }
.pe-specs .v, .pf-facts .v { margin-left: auto; color: var(--i78); white-space: nowrap; }
.pe-specs .v.accent, .pf-facts .v.accent { color: var(--accent); }
.pe-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: auto; }
.pe-acts .link-d { color: var(--i55); }
.pa-cacts .link-d, .pa-queue .link-d { color: var(--i6); }
.pe-acts .link-d:hover, .pa-cacts .link-d:hover, .pa-queue .link-d:hover { color: var(--accent); }
.pe-main { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 18px); padding: clamp(18px, 2.2vw, 30px) clamp(18px, 2.2vw, 34px); min-width: 0; }
.pe-main h2 { font-size: clamp(24px, 3.1vw, 50px); line-height: .95; letter-spacing: -.045em; }
.pe-with { font-size: clamp(18px, 1.9vw, 26px); line-height: 1; color: var(--accent); }
.pe-main > p { font: 400 clamp(15px, 1.3vw, 19px) / 1.55 Archivo, sans-serif; color: var(--i78); text-wrap: pretty; }
.pe-letters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(12px, 1.6vw, 24px); padding-top: 8px; }
.pe-letters li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pe-letters .mono { color: var(--i45); }
.pe-letters .t { font-size: 15px; line-height: 1.35; color: var(--i82); text-wrap: pretty; }
.pe-letters li.is-on .mono { color: var(--accent); }
.pe-letters li.is-on .t { color: var(--ink); }
.pe-records { margin-top: auto; display: flex; flex-direction: column; gap: 9px; padding-top: clamp(14px, 1.6vw, 22px); border-top: 1px solid var(--i16); }
.pe-records ol { display: flex; flex-direction: column; gap: 9px; }
.pe-records li { display: flex; align-items: baseline; gap: 11px; padding: 7px 0; border-bottom: 1px solid var(--i12); min-width: 0; cursor: pointer; }
.pe-records li:hover { border-bottom-color: var(--accent); }
.pe-records .tm { flex: none; color: var(--i45); }
.pe-records .n { font: 400 14px / 1.35 Archivo, sans-serif; color: var(--i84); }
.pe-records .tg { margin-left: auto; flex: none; color: var(--i4); }
.pe-records li.is-on .tm, .pe-records li.is-on .n, .pe-records li.is-on .tg { color: var(--accent); }
.pe-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 2px; }
.pe-tag, .pi-ship, .pz-fmt { padding: 6px 11px; border: 1px solid var(--i22); font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; color: var(--i7); white-space: nowrap; }
.pe-tag:hover, .pi-ship:hover, .pz-fmt:hover { border-color: var(--accent); color: var(--accent); }
.pe-chaps { display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 2.2vw, 30px) clamp(18px, 2vw, 26px); border-left: 1px solid var(--i16); min-width: 0; }
.pe-chaps ol { display: flex; flex-direction: column; gap: 8px; }
.pe-chaps li { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--i12); min-width: 0; cursor: pointer; }
.pe-chaps li:hover { border-bottom-color: var(--accent); }
.pe-cl { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.pe-cl .n { font: 600 14px / 1.25 Archivo, sans-serif; color: var(--ink); }
.pe-cl .tm { margin-left: auto; flex: none; color: var(--i45); }
.pe-cb { display: flex; align-items: center; gap: 8px; }
.pe-cb .abar { flex: 1; }
.pe-chaps li.is-on .n, .pe-chaps li.is-on .tm { color: var(--accent); }
.pe-quote { margin-top: auto; display: flex; flex-direction: column; gap: 9px; padding-top: 12px; }
.pe-quote blockquote { margin: 0; font-size: clamp(15px, 1.5vw, 19px); line-height: 1.35; color: var(--i82); text-wrap: pretty; }
.pe-bar { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(10px, 1.4vw, 20px); padding: 14px clamp(20px, 2.4vw, 40px); border-top: 2px solid var(--accent); background: var(--pd-ember7); }
.pe-play { position: static; transform: none; width: 52px; height: 52px; font-size: 15px; flex: none; }
.pe-wave { position: relative; flex: 1 1 240px; min-width: 0; height: 44px; cursor: pointer; }
.pe-wave:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* the row whose episode is open in the sheet above, and the one sounding */
.pa-row.is-open .pa-tt .n, .ps-eps li.is-playing .n { color: var(--accent); }
.pa-row.is-playing { background: var(--pd-ember8); }
.pe-played { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--i10); }
.pe-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.pe-bars > span { flex: 1; min-width: 0; background: var(--i2); }
.pe-bars > span.p { background: var(--accent); }
.pe-head { position: absolute; left: 0; top: -4px; bottom: 0; width: 2px; background: var(--accent); box-shadow: 0 0 12px rgba(201, 80, 42, .6); }

/* ============================================================================
   03. All episodes
   ========================================================================= */
.sec--episodes { background: var(--paper); }
.pa-cont { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(14px, 1.8vw, 26px); padding: clamp(14px, 1.6vw, 20px); margin-bottom: clamp(14px, 1.6vw, 22px); border: 1px solid var(--pd-ember50); background: var(--pd-ember8); }
.pa-cthumb { position: relative; flex: none; width: 72px; height: 72px; }
.pa-cplay { width: 36px; height: 36px; font-size: 12px; }
.pa-ct { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pa-cl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.pa-ct .n { font: 600 clamp(16px, 1.6vw, 21px) / 1.2 Archivo, sans-serif; color: var(--ink); }
.pa-cp { display: flex; align-items: center; gap: 12px; }
.pa-cp .abar { flex: 1; background: var(--i14); }
.pa-cp .abar > span { background: var(--accent); }
.pa-cacts { display: flex; align-items: center; gap: 12px; flex: none; }
.pa-find { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--i16); }
.pa-glass { flex: none; font: 400 16px / 1 'DM Mono', ui-monospace, monospace; color: var(--accent); }
.pa-q { flex: 1 1 240px; padding: 6px 0; border-bottom: 0; font-size: clamp(16px, 1.6vw, 22px); }
.pa-q::-webkit-search-decoration, .pa-q::-webkit-search-cancel-button { -webkit-appearance: none; }
.pa-sorts { display: flex; align-items: center; border: 1px solid var(--i22); flex: none; }
.pa-sorts button { padding: 8px 12px; color: var(--i6); text-transform: none; white-space: nowrap; }
.pa-sorts button.is-on { background: var(--i12); color: var(--ink); }
.pa-sorts button:hover { color: var(--accent); }
.pa-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding: 12px 0; }
.pa-th, .pa-row { display: grid; grid-template-columns: 3px 62px 44px minmax(0, 2fr) minmax(0, .8fr) 114px 62px 84px; gap: 10px; }
.pa-th { padding-bottom: 9px; border-bottom: 2px solid var(--accent); }
.pa-th button { display: flex; align-items: baseline; gap: 5px; min-width: 0; white-space: nowrap; color: var(--i5); }
.pa-th button.c { justify-content: center; }
.pa-th button.r { justify-content: flex-end; }
.pa-th button.is-on, .pa-th button:hover { color: var(--accent); }
.pa-th button > span { opacity: .9; }
.pa-row { align-items: center; padding: 11px 0; border-bottom: 1px solid var(--i12); cursor: pointer; min-width: 0; }
.pa-row:hover { background: var(--hover); }
.pa-row.is-new { background: var(--pd-ember8); }
.pa-stripe { align-self: stretch; }
.pa-row .date { color: var(--i6); white-space: nowrap; }
.pa-row.is-new .date { color: var(--accent); }
.pa-thumb { position: relative; width: 44px; height: 44px; display: block; }
.pa-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--i14); }
.pa-prog > span { display: block; height: 3px; background: var(--accent); }
.pa-ep { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pa-tt { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pa-tt .no { flex: none; color: var(--i42); }
.pa-tt .n { font: 600 15px / 1.25 Archivo, sans-serif; color: var(--ink); }
.pa-row.is-new .pa-tt .no, .pa-row.is-new .pa-tt .n { color: var(--accent); }
.pa-meta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pa-meta .mono { flex: none; white-space: nowrap; }
.pa-guest { padding: 2px 7px; border: 1px solid var(--i2); color: var(--i6); }
.pa-ticks { flex: 1; display: flex; align-items: center; gap: 3px; min-width: 0; }
.pa-tk { display: block; min-width: 0; height: 4px; background: var(--i16); }
.pa-tk.is-on { background: var(--accent); }
.pa-tk--1 { flex: 1; }
.pa-tk--2 { flex: 2; }
.pa-tk--3 { flex: 3; }
.pa-row .hst { font-size: 15px; line-height: 1.2; color: var(--i78); }
.pa-state { min-width: 0; padding: 5px 9px; color: var(--i4); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-state.is-part { background: var(--pd-ember16); color: var(--accent); }
.pa-state.is-done { color: var(--i6); }
.pa-row .dur { text-align: right; }
.pa-acts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.pa-acts button:not(.ar-btn):hover, .pa-acts .pa-dl:hover { color: var(--accent); }
/* the list is redrawn from podcasts.json: rows, chips and the foot hide and
   come back with the search, so hidden has to win over their display */
.ps-row[hidden], .js-pa-more[hidden], .pa-year[hidden], .pe-new[hidden], .pa-cont[hidden], .pa-queue[hidden], .pk-none[hidden], .js-pk-all[hidden] { display: none; }
/* what comes from the listener's own memory: queued, saved, nothing yet */
.pa-acts .pa-add.is-on, .pe-acts .link-d.is-on { color: var(--accent); }
.pk-empty { flex: 1 1 360px; max-width: 520px; font: 400 15px / 1.55 Archivo, sans-serif; color: var(--i6); text-wrap: pretty; }
.pk-empty[hidden] { display: none; }
.pk-items:empty { display: none; }
.pk-none { letter-spacing: .08em; }
.pa-queue { margin-left: auto; }
.ps-pick { min-width: 0; text-align: left; }
.pa-row .date small { display: block; margin-top: 3px; font-size: 12px; color: var(--i45); }
.pa-thc { align-self: baseline; text-align: center; white-space: nowrap; }
.pa-year { gap: 8px; }
.pa-sheet .ar-empty { padding: 28px 0; font-size: 15px; line-height: 1.6; color: var(--i6); }
.pa-queue { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border: 1px solid var(--pd-ember50); background: var(--pd-ember8); }
.pa-queue .mono:first-child { white-space: nowrap; }

/* ============================================================================
   04. Continue
   ========================================================================= */
.sec--continue { background: var(--paper); }
.pk-grid { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(18px, 2.2vw, 36px); }
.pk-hl { display: flex; flex-direction: column; gap: 8px; flex: none; }
.pk-hl h2 { font-size: clamp(19px, 2vw, 28px); line-height: 1; letter-spacing: -.035em; }
.pk-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(12px, 1.4vw, 22px); flex: 1 1 460px; min-width: 0; }
.pk-items li { display: grid; grid-template-columns: 52px minmax(0, 1fr) 34px; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--i16); background: var(--card); cursor: pointer; }
.pk-items li:hover { border-color: var(--accent); }
.pk-items li.is-on { border-color: var(--pd-ember55); background: rgba(201, 80, 42, .06); }
.pk-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pk-t .n { font: 600 14px / 1.25 Archivo, sans-serif; color: var(--ink); }
.pk-m { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.pk-m .clip { color: var(--i55); }
.pk-items li.is-on .pk-m .clip { color: var(--accent); }
.pk-m .mono:last-child { flex: none; margin-left: auto; white-space: nowrap; }
.pk-t .abar { height: 3px; background: var(--i16); }
.pk-t .abar > span { background: var(--i55); }
.pk-items .ar-btn { width: 32px; height: 32px; justify-self: end; }
.pk-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: clamp(14px, 1.6vw, 22px); padding-top: 12px; border-top: 1px solid var(--i16); }
.pk-saved { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid var(--i22); color: var(--i7); white-space: nowrap; }
.pk-saved .d { opacity: .55; }
.pk-saved:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================================
   05. Transcript
   ========================================================================= */
.sec--transcript { background: var(--panel); }
.pz-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: clamp(16px, 2vw, 26px); }
.pz-head h2 { font-size: clamp(22px, 2.8vw, 44px); line-height: .96; letter-spacing: -.045em; }
.pz-grid { display: grid; grid-template-columns: minmax(230px, .8fr) minmax(0, 1.6fr); gap: clamp(18px, 2.4vw, 40px); align-items: stretch; }
.pz-ladder { min-width: 0; display: flex; flex-direction: column; }
.pz-ladder li { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 12px 14px; margin-bottom: 2px; border-left: 3px solid var(--i18); cursor: pointer; min-width: 0; }
.pz-ladder li:hover { background: var(--hover); }
.pz-ladder li.is-on { background: var(--pd-ember10); border-left-color: var(--accent); }
.pz-cl { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.pz-cl .tm { flex: none; color: var(--i45); }
.pz-cl .n { font: 600 14px / 1.25 Archivo, sans-serif; color: var(--ink); }
.pz-ladder li.is-on .tm, .pz-ladder li.is-on .n { color: var(--accent); }
.pz-cb { display: flex; align-items: center; gap: 10px; }
.pz-cb .abar { flex: 1; }
.pz-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pz-now { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 11px 14px; margin-bottom: 10px; background: var(--pd-ember10); border: 1px solid var(--pd-ember50); }
.pz-now .btn-ember { margin-left: auto; }
.pz-lines { display: flex; flex-direction: column; gap: 2px; }
.pz-lines li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--i10); min-width: 0; }
.pz-lines li.is-letter { padding: 12px 14px; margin: 6px 0; border-left: 2px solid var(--accent); background: var(--pd-ember7); }
.pz-lines .tm { color: var(--i45); }
.pz-lt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pz-lt .sp { color: var(--i5); }
.pz-lt p { font: 400 14px / 1.6 Archivo, sans-serif; color: var(--i82); text-wrap: pretty; }
.pz-lines li.is-letter .tm, .pz-lines li.is-letter .sp { color: var(--accent); }
.pz-lines li.is-letter p { font: italic 400 15px / 1.55 'Instrument Serif', serif; color: var(--ink); }
.pz-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 14px; }
.pz-fmt { padding: 5px 9px; border-color: var(--i2); color: var(--i65); }

/* ============================================================================
   06. Guests
   ========================================================================= */
.sec--guests { background: var(--card); }
.pu-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 18px; margin-bottom: clamp(16px, 2vw, 26px); }
.pu-head h2 { font-size: clamp(20px, 2.2vw, 32px); line-height: 1; letter-spacing: -.04em; }
.pu-cloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; }
.pu-cloud a { display: inline-flex; align-items: baseline; gap: 6px; color: var(--i5); }
.pu-cloud a:hover { color: var(--accent); }
.pu-cloud .is-mid a { color: var(--ink); }
.pu-cloud .is-top a { color: var(--accent); }
.pu-cloud .c { color: var(--i4); }
.pu-cloud .is-top .c { color: var(--accent); }
.pu-w { line-height: .95; letter-spacing: -.04em; }
.pu-w--19 { font-size: 19px; } .pu-w--21 { font-size: 21px; } .pu-w--23 { font-size: 23px; } .pu-w--25 { font-size: 25px; }
.pu-w--26 { font-size: 26px; } .pu-w--28 { font-size: 28px; } .pu-w--33 { font-size: 33px; } .pu-w--35 { font-size: 35px; }
.pu-w--39 { font-size: 39px; } .pu-w--42 { font-size: 42px; } .pu-w--51 { font-size: 51px; } .pu-w--56 { font-size: 56px; }
.pu-topic .btn-ember { letter-spacing: .18em; }
.pu-topic { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(14px, 1.8vw, 28px); margin-top: clamp(18px, 2vw, 28px); padding: clamp(14px, 1.6vw, 20px); border: 1px solid var(--pd-ember50); background: var(--pd-ember8); }
.pu-tl { display: flex; flex-direction: column; gap: 6px; flex: none; }
.pu-tl .grot { font-size: clamp(18px, 1.9vw, 26px); line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.pu-teps { flex: 1 1 300px; min-width: 0; display: flex; gap: 10px; }
.pu-teps li { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px; border: 1px solid var(--i16); cursor: pointer; }
.pu-teps li:hover { border-color: var(--accent); }
.pu-tt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pu-tt .n { font: 600 13px / 1.2 Archivo, sans-serif; color: var(--ink); }
.pu-teps li.is-on .n { color: var(--accent); }
.pu-tt .mono { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pu-rh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; margin-top: clamp(20px, 2.2vw, 30px); padding-top: 16px; border-top: 2px solid var(--accent); }
.pu-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(10px, 1.4vw, 18px); padding-top: 12px; }
.pu-cards li { display: flex; flex-direction: column; gap: 9px; padding: 13px; border: 1px solid var(--i14); cursor: pointer; min-width: 0; }
.pu-cards li:hover { border-color: var(--accent); }
.pu-cards li.is-on { border-color: var(--pd-ember55); background: var(--pd-ember8); }
.pu-gh { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pu-ava { flex: none; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block; }
.pu-ava--m { display: grid; place-items: center; background: var(--i10); color: var(--i7); letter-spacing: 0; }
.pu-gn { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pu-gn .n { font: 600 14px / 1.2 Archivo, sans-serif; color: var(--ink); }
.pu-cards li.is-on .pu-gn .n { color: var(--accent); }
.pu-gb { display: flex; align-items: center; gap: 9px; }
.pu-gb .abar { flex: 1; height: 3px; }
.pu-gb .mono { flex: none; white-space: nowrap; }

/* ============================================================================
   07. Subscribe
   ========================================================================= */
.sec--subscribe { background: var(--paper); }
.pf-top { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 14px clamp(20px, 2.4vw, 40px); border-bottom: 1px solid var(--i12); }
.pf-growth { display: flex; align-items: flex-end; gap: 2px; height: 18px; }
.pf-growth > span { width: 5px; background: var(--i28); }
.pf-growth > span:nth-child(n+10) { background: var(--accent); }
.pf-hl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 20px; padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 40px) clamp(14px, 1.6vw, 20px); }
.pf-hl h2 { font-size: clamp(24px, 2.8vw, 42px); line-height: 1; letter-spacing: -.04em; }
.pf-hl .serif { font-size: clamp(18px, 1.9vw, 26px); line-height: 1.1; color: var(--i7); }
.pf-grid { display: grid; grid-template-columns: minmax(240px, .85fr) minmax(0, 1.2fr) minmax(220px, .75fr); border-top: 2px solid var(--accent); }
.pf-feed, .pf-apps, .pf-file { display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 30px); min-width: 0; }
.pf-feed, .pf-apps { border-right: 1px solid var(--i14); }
.pf-feed { gap: 14px; }
.pf-url { display: flex; align-items: flex-start; gap: 14px; }
.pf-url .u { flex: 1; min-width: 0; font-size: 13px; letter-spacing: .02em; line-height: 1.5; color: var(--ink); word-break: break-all; }
.pf-qr { flex: none; width: 84px; height: 84px; padding: 6px; background: #fff; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; }   /* the QR paper stays white in both themes */
.pf-qr > i { display: block; width: 100%; aspect-ratio: 1; }
.pf-qr > i.on { background: #141110; }
.pf-fa { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pf-fa .btn-ember { padding: 12px 18px; letter-spacing: .16em; }
.pf-opml { padding: 12px 14px; border: 1px solid var(--i28); color: var(--i7); }
.pf-opml:hover { border-color: var(--accent); color: var(--accent); }
.pf-facts { margin-top: auto; display: flex; flex-direction: column; gap: 9px; padding-top: 12px; border-top: 1px solid var(--i14); }
.pf-facts--top { margin-top: 0; padding-top: 0; border-top: 0; }
.pf-feed .pf-facts .v { color: var(--i75); }
.pf-facts li { padding-bottom: 0; border-bottom: 0; }
.pf-facts--top li { padding-bottom: 7px; border-bottom: 1px solid var(--i14); }
.pf-rank { display: flex; flex-direction: column; gap: 12px; }
.pf-rank li { display: flex; flex-direction: column; gap: 6px; min-width: 0; cursor: pointer; }
.pf-rank li:hover { opacity: .85; }
.pf-al { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.pf-al .no { flex: none; color: var(--i4); }
.pf-al .nm { font-size: 13px; color: var(--ink); }
.pf-al .push { flex: none; font-size: 12px; }
.pf-al .g { flex: none; color: var(--i45); }
.pf-rank li.is-on .no, .pf-rank li.is-on .nm, .pf-rank li.is-on .g { color: var(--accent); }
.pf-cities { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--i14); }
.pf-cities ul { display: flex; flex-direction: column; gap: 8px; }
.pf-cities li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pf-cities .cn { flex: none; width: 88px; color: var(--i6); }
.pf-cities li.is-on .cn { color: var(--accent); }
.pf-cities .abar { flex: 1; }
.pf-af { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 10px; border-top: 1px solid var(--i14); }
.pf-dl { margin-top: auto; justify-content: space-between; padding: 14px 18px; letter-spacing: .16em; }
.pf-perks { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px clamp(20px, 2.4vw, 40px); border-top: 1px solid var(--i14); }
.pf-perks .mono { white-space: nowrap; }
.pf-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(12px, 1.6vw, 22px); padding: clamp(14px, 1.6vw, 20px) clamp(20px, 2.4vw, 40px) clamp(18px, 2vw, 26px); border-top: 2px solid var(--accent); }
.pf-ways li { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--i16); min-width: 0; }
.pf-ways li.is-on { border-color: var(--pd-ember55); background: var(--pd-ember8); }
.pf-wh { display: flex; align-items: center; gap: 10px; }
.pf-wh > .mono { color: var(--i7); }
.pf-ways li.is-on .pf-wh > .mono { color: var(--accent); }
.pf-ways p { line-height: 1.5; text-wrap: pretty; }
.pf-wf { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.pf-in { flex: 1; min-width: 0; padding: 5px 0; border: 0; border-bottom: 1px solid var(--i28); background: none; border-radius: 0; color: var(--ink); letter-spacing: 0; }
.pf-in::placeholder { color: var(--i45); }
.pf-in:focus { outline: none; border-bottom-color: var(--accent); }
.pf-cta { flex: none; padding: 9px 14px; background: var(--i12); color: var(--i82); }
.pf-ways li.is-on .pf-cta { background: var(--accent); color: #fff; }
.pf-cta:hover { background: #E0663D; color: #fff; }
:root:not([data-theme="dark"]) .pf-cta:hover { background: #141110; }

/* ============================================================================
   08. Pitch
   ========================================================================= */
.sec--pitch { background: var(--paper); padding-bottom: 60px; }
.pi-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 1fr); gap: clamp(20px, 2.6vw, 44px); align-items: stretch; }
.pi-main { min-width: 0; display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 18px); }
.pi-main h2 { font-size: clamp(24px, 3.2vw, 50px); line-height: .95; letter-spacing: -.045em; }
.pi-form { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.pi-idea { flex: 1 1 240px; min-width: 0; padding: 8px 0; border: 0; border-bottom: 2px solid var(--i28); background: none; border-radius: 0; font: 400 clamp(17px, 1.8vw, 24px) / 1.2 Archivo, sans-serif; color: var(--ink); }
.pi-idea::placeholder { color: var(--i45); }
.pi-idea:focus { outline: none; border-bottom-color: var(--accent); }
.pi-form .btn-ember { padding: 15px 22px; }
.pi-pipe { display: flex; gap: 2px; padding-top: 6px; }
.pi-pipe li { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.pi-pipe .abar > .fill { width: 100%; background: var(--i2); }
.pi-pipe .mono { color: var(--i5); }
.pi-pipe .orb { font-size: clamp(15px, 1.5vw, 20px); line-height: 1; color: var(--ink); }
.pi-pipe li.is-on .abar > .fill { background: var(--accent); }
.pi-pipe li.is-on .mono, .pi-pipe li.is-on .orb { color: var(--accent); }
.pi-block { display: flex; flex-direction: column; gap: 9px; padding-top: 10px; border-top: 1px solid var(--i16); }
.pi-votes { display: flex; flex-direction: column; gap: 9px; }
.pi-votes li { display: flex; align-items: center; gap: 12px; min-width: 0; cursor: pointer; }
.pi-votes li:hover { opacity: .85; }
.pi-votes .n { flex: 1 1 auto; font: 600 14px / 1.25 Archivo, sans-serif; color: var(--ink); }
.pi-votes .abar { flex: 0 0 120px; }
.pi-votes .c { flex: none; width: 44px; text-align: right; }
.pi-back { flex: none; padding: 6px 10px; border: 1px solid var(--i22); color: var(--i65); }
.pi-back:hover { border-color: var(--accent); color: var(--accent); }
.pi-votes li.is-on .n { color: var(--accent); }
.pi-votes li.is-on .pi-back { border-color: var(--accent); color: var(--accent); }
.pi-queue { display: flex; flex-direction: column; gap: 8px; }
.pi-queue li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 104px 96px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--i12); min-width: 0; cursor: pointer; }
.pi-queue li:hover { border-bottom-color: var(--accent); }
.pi-queue .no { color: var(--i4); }
.pi-qt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pi-qt .n { font: 600 14px / 1.25 Archivo, sans-serif; color: var(--ink); }
.pi-stage { min-width: 0; padding: 5px 8px; background: var(--i10); color: var(--i6); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-queue .eta { text-align: right; white-space: nowrap; }
.pi-queue li.is-on .no, .pi-queue li.is-on .n { color: var(--accent); }
.pi-queue li.is-on .pi-stage { background: var(--accent); color: #fff; }
.pi-shipped, .pi-contacts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 12px; border-top: 1px solid var(--i16); }
.pi-ship { border-color: var(--i2); }
.pi-contacts { gap: 14px; margin-top: auto; border-top: 0; }
.pi-contacts .link-d { color: var(--i55); white-space: nowrap; }
.pi-contacts .link-d:hover { color: var(--accent); }
/* the right-hand column: what listeners asked for, on its way and already out */
.pi-side .pi-queue li { grid-template-columns: 24px minmax(0, 1fr) 96px; row-gap: 5px; }
.pi-side .pi-queue .no, .pi-side .pi-qt { grid-row: 1 / span 2; }
.pi-side .pi-stage { grid-column: 3; grid-row: 1; }
.pi-side .pi-queue .eta { grid-column: 3; grid-row: 2; text-align: center; }
.pi-side { min-width: 0; display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 18px); padding-left: clamp(16px, 2vw, 30px); border-left: 1px solid var(--i16); }
.pi-note { letter-spacing: .08em; }
.pi-note.is-err { color: var(--accent); }
.pi-note.is-ok { color: var(--accent); }
.pi-back.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pf-app { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: inherit; }
.pf-in--ro { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--i6); }
.pf-ways li.is-done .pf-wh > .mono:first-child { color: var(--accent); }
.pf-in.is-err { border-bottom-color: var(--accent); }
.pf-opml { cursor: pointer; }

/* ============================================================================
   09. Responsive
   ========================================================================= */
@media (max-width: 900px) {
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
  .pf-feed, .pf-apps { border-right: 0; border-bottom: 1px solid var(--i14); }
  .pf-facts, .pf-cities { margin-top: 0; }
  .pe-grid { grid-template-columns: 30px minmax(0, 1fr); }
  .pe-spine { grid-row: 1 / span 3; }
  .pe-side { border-right: 0; border-bottom: 1px solid var(--i12); }
  .pe-cover { flex: none; height: 240px; min-height: 0; }
  .pe-chaps { border-left: 0; border-top: 1px solid var(--i16); }
  .ps-grid, .pz-grid, .pi-grid { grid-template-columns: minmax(0, 1fr); }
  .pi-side { padding-left: 0; border-left: 0; padding-top: 16px; border-top: 1px solid var(--i16); }
  .pa-th { display: none; }
  .pa-row { grid-template-columns: 3px 44px minmax(0, 1fr) 34px; grid-template-areas: "s th ep b" "s th host b" "s th state b" "s th date b"; row-gap: 6px; }
  .pa-stripe { grid-area: s; }
  .pa-row .date { grid-area: date; }
  .pa-thumb { grid-area: th; align-self: start; }
  .pa-ep { grid-area: ep; }
  .pa-row .hst { grid-area: host; }
  .pa-state { grid-area: state; justify-self: start; }
  .pa-row .dur { display: none; }
  .pa-acts { grid-area: b; align-self: center; flex-direction: column; }
  .pa-acts button:not(.ar-btn), .pa-acts .pa-dl { display: none; }
}

@media (max-width: 760px) {
  .sec--series { padding-top: 24px; }
  .ps-th, .ps-row { grid-template-columns: 3px 36px minmax(0, 1fr) 40px 18px; }
  .ps-spark, .ps-th .mono:nth-child(4) { display: none; }
  .pe-top { padding-left: 18px; padding-right: 18px; }
  .pe-grid { grid-template-columns: minmax(0, 1fr); }
  .pe-spine { grid-row: auto; writing-mode: horizontal-tb; transform: none; padding: 8px 18px; justify-content: flex-start; }
  .pe-side, .pe-main, .pe-chaps { padding-left: 18px; padding-right: 18px; }
  .pe-bar { padding-left: 18px; padding-right: 18px; }
  .pa-sheet, .pz-sheet, .pu-sheet, .pi-sheet { padding-left: 18px; padding-right: 18px; }
  .ar-totals, .ar-totals ul { flex-wrap: wrap; row-gap: 14px; }
  .ar-totals { width: 100%; }
  .ar-totals .mono { white-space: normal; }
  .pa-row { grid-template-columns: 3px minmax(0, 1fr) 34px; grid-template-areas: "s ep b" "s host b" "s state b" "s date b"; }
  .pa-thumb, .pa-ticks { display: none; }
  .pa-cacts, .pa-sorts { flex-wrap: wrap; }
  .ar-foot .ar-more { width: 100%; justify-content: center; }
  .pu-teps { flex-wrap: wrap; }
  .pu-teps li { flex: 1 1 100%; }
  .pu-w--51, .pu-w--56 { font-size: 34px; }
  .pu-w--42, .pu-w--39 { font-size: 28px; }
  .pf-top, .pf-hl, .pf-perks, .pf-ways { padding-left: 18px; padding-right: 18px; }
  .pf-feed, .pf-apps, .pf-file { padding-left: 18px; padding-right: 18px; }
  .pi-ship, .pk-saved, .pe-tag { white-space: normal; text-align: left; }
  .pa-queue { flex-wrap: wrap; width: 100%; }
  .pa-queue .mono:first-child { white-space: normal; }
  .pu-tl { flex: 1 1 100%; min-width: 0; }
  .pu-tl .mono { white-space: normal; }
  .pf-perks .mono { white-space: normal; }
  .pa-cl .mono, .pa-cp .mono { white-space: normal; }
  .pi-votes li { flex-wrap: wrap; }
  .pi-votes .n { flex-basis: 100%; }
  .pi-queue li { grid-template-columns: 28px minmax(0, 1fr); }
  .pi-stage, .pi-queue .eta { grid-column: 2; justify-self: start; text-align: left; }
}

/* ============================================================================
   05–06, live: the transcript follows the player, the cloud chooses a topic
   ========================================================================= */
.pz-pick, .pu-g { display: flex; flex-direction: column; gap: 7px; width: 100%; min-width: 0; text-align: left; }
.pu-g { gap: 9px; }
.pz-lines li { cursor: pointer; }
.pz-lines li:hover .tm { color: var(--accent); }
.pz-lines li.is-now { background: var(--pd-ember7); }
.pz-lines li.is-now .tm, .pz-lines li.is-now .sp { color: var(--accent); }
.pz-lines .pz-chh { display: block; padding: 14px 0 6px; border-bottom: 1px solid var(--i16); cursor: default; }
.pz-lines .pz-chh:hover .tm { color: inherit; }
.pz-fmt { cursor: pointer; }
.pu-cloud a[aria-current="true"] .pu-w { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.pu-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.pu-cards li[hidden] { display: none; }