/* =====================================================================
   SYCU Podcasts v2: Kids Ministry Answers / Youth Ministry Answers
   Built on the SYCU Design System ("Daybreak"). Direction: "You ask. We answer."
   The page is question-first: a dark stage hero with the listener question in a speech bubble,
   then a white episode card holding the player.
   One system for both shows. Per-show accent comes from body[data-show] (KMA pink / YMA lime).
   ===================================================================== */
:root {
  --disc:#F0893C; --teach:#E84E4E; --env:#E4D353; --evt:#BED65A; --vol:#82D1DD; --fam:#F27A9E; --lead:#434A50;
  --disc-ink:#A94F0C; --teach-ink:#B41818; --env-ink:#635910; --evt-ink:#515E17; --vol-ink:#1D616C; --fam-ink:#AE1140; --lead-ink:#434A50;
  --disc-soft:#FDEEE3; --teach-soft:#FCE7E7; --env-soft:#FBF7DA; --evt-soft:#F2F8DF; --vol-soft:#E5F6F8; --fam-soft:#FDE9F0; --lead-soft:#ECEEF0;
  --ink:#1F2328; --ink-2:#454C55; --ink-3:#5F6873;
  --bg:#F6F7F9; --surface:#FFFFFF; --line:#E4E7EB; --line-2:#D3D8DE;
  --char:#434A50; --char-2:#2F3439; --char-3:#23272B; --hl:#DCEBA4;
  --on-dark:#D4D8DC; --on-dark-2:#C3C8CD; --dark-line:rgba(255,255,255,.12);
  /* UI accent: Grow green (Kenny 2026-10-01; source grow-dashboard-v2/site/base.css). Replaces the old Daybreak accent tokens. */
  --acc:#BFE478; --acc-hover:#B2DB61; --acc-on:var(--ink); --acc-ink:#4B6D0B; --acc-ring:#5E8117;
  --acc-soft:#F5F8E9; --acc-lip:rgba(77,116,4,.32); --acc-glow:rgba(136,192,26,.32); --acc-edge:#6D941E;
  --font:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-sm:12px; --r:18px; --r-lg:26px; --r-pill:999px;
  --shadow:0 1px 2px rgba(31,35,40,.05), 0 8px 24px rgba(31,35,40,.06);
  --shadow-lg:0 2px 4px rgba(31,35,40,.05), 0 18px 48px rgba(31,35,40,.10);
  --max:80rem; --gut:24px; --hd:64px;
  --stripe:linear-gradient(90deg, var(--disc) 0 16.667%, var(--teach) 0 33.333%, var(--env) 0 50%,
           var(--evt) 0 66.667%, var(--vol) 0 83.333%, var(--fam) 0 100%);
  /* per-show accent (overridden below) */
  --show:#F27A9E; --show-ink:#AE1140; --show-soft:#FDE9F0; --show-glow:rgba(242,122,158,.20);
  --focus:var(--show-ink);
}
body[data-show="kma"] { --show:#F27A9E; --show-ink:#AE1140; --show-soft:#FDE9F0; --show-glow:rgba(242,122,158,.22); }
body[data-show="yma"] { --show:#BED65A; --show-ink:#515E17; --show-soft:#F2F8DF; --show-glow:rgba(190,214,90,.17); }
/* custom properties resolve where declared: re-derive the focus colour on body so it follows the per-show accent */
body { --focus:var(--show-ink); }
[data-theme="disc"]  { --a:var(--disc);  --a-ink:var(--disc-ink);  --a-soft:var(--disc-soft); }
[data-theme="teach"] { --a:var(--teach); --a-ink:var(--teach-ink); --a-soft:var(--teach-soft); }
[data-theme="env"]   { --a:var(--env);   --a-ink:var(--env-ink);   --a-soft:var(--env-soft); }
[data-theme="evt"]   { --a:var(--evt);   --a-ink:var(--evt-ink);   --a-soft:var(--evt-soft); }
[data-theme="vol"]   { --a:var(--vol);   --a-ink:var(--vol-ink);   --a-soft:var(--vol-soft); }
[data-theme="fam"]   { --a:var(--fam);   --a-ink:var(--fam-ink);   --a-soft:var(--fam-soft); }
[data-theme="lead"]  { --a:var(--lead);  --a-ink:var(--lead-ink);  --a-soft:var(--lead-soft); }

/* ---------- base ---------- */
*,*::before,*::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hd) + 16px); }
body { margin:0; background:#fff; color:var(--ink); font:400 17px/1.6 var(--font); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--show-ink); text-underline-offset:3px; }
b, strong { font-weight:700; }
button, input { font:inherit; color:inherit; }
button { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:8px; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 var(--gut); }
.sr-only { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link { position:absolute; left:12px; top:-60px; z-index:100; background:var(--char-3); color:#fff; padding:10px 16px; border-radius:var(--r-pill); font-weight:800; font-size:14px; text-decoration:none; transition:top .15s; }
.skip-link:focus { top:10px; }
section { position:relative; }
svg { flex:none; }
.stripe { height:6px; background:var(--stripe); }
.sec { padding:104px 0; } .sec.tint { background:var(--bg); }
.eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--show-ink); }
.eyebrow::before { content:""; width:10px; height:10px; border-radius:3px; background:var(--show); }
.h2 { font-size:clamp(32px,4.4vw,54px); line-height:1.06; letter-spacing:-.04em; font-weight:800; margin:14px 0 16px; text-wrap:balance; }
.lede { font-size:clamp(17px,1.6vw,20px); color:var(--ink-2); max-width:40rem; margin:0; line-height:1.55; text-wrap:pretty; }
.hl { background:linear-gradient(transparent 56%, var(--hl) 56%, var(--hl) 86%, transparent 86%); padding:0 .06em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.head { max-width:46rem; margin-bottom:40px; }
.cta-note { font-size:14.5px; color:var(--ink-3); font-weight:600; }
.chip { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; line-height:1.3; padding:3px 10px; border-radius:var(--r-pill); background:var(--a-soft, var(--bg)); color:var(--a-ink, var(--ink-2)); white-space:nowrap; }
.chip::before { content:""; width:7px; height:7px; border-radius:2px; background:var(--a, var(--ink-3)); }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; cursor:pointer; text-decoration:none; white-space:nowrap;
  font-weight:800; font-size:15px; letter-spacing:-.005em; line-height:1.2; padding:13px 22px; border-radius:var(--r-pill); transition:transform .15s, box-shadow .15s, background .15s, color .15s; }
.btn-primary { background:var(--acc); color:var(--acc-on); box-shadow:inset 0 0 0 1.5px var(--acc-edge), 0 2px 0 var(--acc-lip); }
.btn-primary:hover { background:var(--acc-hover); transform:translateY(-1px); box-shadow:inset 0 0 0 1.5px var(--acc-edge), 0 6px 16px var(--acc-glow); }
.btn-dark { background:var(--char-3); color:#fff; } .btn-dark:hover { background:#000; }
.btn-ghost { background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1.5px #AEB5BD; }
.btn-ghost:hover { box-shadow:inset 0 0 0 1.5px var(--ink-3); }
.btn-light { background:rgba(255,255,255,.1); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4); }
.btn-light:hover { background:rgba(255,255,255,.18); }
.btn-lg { padding:16px 28px; font-size:17px; }
.btn-sm { padding:10px 16px; min-height:44px; font-size:14.5px; }
.btn svg { width:16px; height:16px; }
.btn .arr, .btn .chev { transition:transform .15s; }
.btn:hover .arr { transform:translateX(3px); }
[aria-expanded="true"] > .chev { transform:rotate(180deg); }

/* ---------- header ---------- */
.hd { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid var(--line); }
.hd-bar { display:flex; align-items:center; gap:18px; height:var(--hd); max-width:var(--max); margin:0 auto; padding:0 var(--gut); }
.lockup { display:inline-flex; align-items:center; gap:14px; min-height:44px; color:var(--ink); text-decoration:none; flex:none; border-radius:8px; }
.lockup img { height:24px; width:auto; }
.lockup .rule { width:2px; height:32px; border-radius:1px; background:#8C8C8C; }
.lockup .word { font-weight:700; font-size:20px; line-height:1; letter-spacing:-.02em; }
.hd-nav { display:flex; gap:2px; margin-left:auto; }
.hd-nav a { color:var(--ink-2); text-decoration:none; font-weight:600; font-size:14.5px; padding:9px 13px; border-radius:var(--r-pill); white-space:nowrap; }
.hd-nav a:hover { background:var(--bg); color:var(--ink); }
.hd-subs { flex:none; }
.hd-menu { display:none; width:44px; height:44px; border-radius:12px; border:0; background:var(--bg); cursor:pointer; align-items:center; justify-content:center; flex:none; color:var(--ink); }
.hd-menu svg { width:20px; height:20px; }
.hd-menu[aria-expanded="true"] { background:var(--char-3); color:#fff; }

/* popovers (subscribe / more apps) */
.pop { position:relative; }
.pop-panel { position:absolute; right:0; top:calc(100% + 10px); z-index:70; min-width:250px; background:#fff; color:var(--ink); border-radius:18px; padding:8px;
  box-shadow:0 2px 6px rgba(31,35,40,.08), 0 24px 60px -12px rgba(31,35,40,.28), inset 0 0 0 1px var(--line); animation:popIn .16s ease-out; }
@keyframes popIn { from { opacity:0; transform:translateY(-6px); } }
.pop-h { margin:6px 10px 6px; font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.app-row { display:flex; align-items:center; gap:12px; padding:9px 12px; min-height:44px; border-radius:12px; color:var(--ink); text-decoration:none; font-weight:700; font-size:15px; }
.app-row:hover { background:var(--bg); }
.app-row svg { width:24px; height:24px; }

/* mobile menu sheet */
.menu-sheet { position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 24px 48px -16px rgba(31,35,40,.25); max-height:calc(100dvh - var(--hd)); overflow-y:auto; animation:popIn .18s ease-out; }
.menu-in { max-width:var(--max); margin:0 auto; padding:10px var(--gut) 20px; }
.menu-in .pop-h { margin:16px 4px 6px; }
.menu-shows { display:grid; gap:6px; }
.menu-show { display:flex; align-items:center; gap:12px; padding:8px; border-radius:14px; color:var(--ink); text-decoration:none; font-weight:800; font-size:16px; box-shadow:inset 0 0 0 1.5px var(--line); }
.menu-show img { width:40px; height:40px; border-radius:10px; }
.menu-show[aria-current="page"] { box-shadow:inset 0 0 0 2px var(--ink); }
.menu-links { display:grid; }
.menu-links a { padding:12px 6px; font-weight:700; font-size:16.5px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.menu-apps { display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; }

/* ---------- show switch (Kids ⇄ Youth), first thing on the stage ---------- */
.switch { display:inline-flex; max-width:100%; gap:6px; padding:6px; margin:0 0 clamp(28px,3.4vw,44px); border-radius:18px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.13); }
.switch a { display:inline-flex; align-items:center; gap:12px; min-height:44px; padding:6px 18px 6px 6px; border-radius:13px; color:var(--on-dark); text-decoration:none;
  font-weight:700; font-size:14.5px; letter-spacing:-.005em; line-height:1.2; white-space:nowrap; transition:background .15s, color .15s; }
.switch img.sw-art { width:44px; height:44px; border-radius:9px; object-fit:contain; flex:none; display:block; opacity:.6; transition:opacity .2s; }
.switch a:hover img.sw-art, .switch a[aria-current="page"] img.sw-art { opacity:1; }
.switch a { flex:none; }
.switch a:hover { background:rgba(255,255,255,.09); color:#fff; }
.switch a[aria-current="page"] { background:#fff; color:var(--ink); font-weight:800; --focus:var(--show); }
.switch a:focus-visible { border-radius:13px; }

/* ---------- stage (hero) ---------- */
.stage { background:var(--char-3); color:#fff; overflow:hidden; --focus:var(--show); }
.stage-glow { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(640px 420px at 88% 8%, var(--show-glow), transparent 70%),
             radial-gradient(520px 380px at 4% 104%, rgba(130,209,221,.09), transparent 70%); }
.stage-grid { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,580px); grid-template-areas:"copy convo" "meta convo";
  column-gap:clamp(40px,6vw,96px); row-gap:36px; padding-top:clamp(40px,4.4vw,60px); padding-bottom:clamp(48px,5vw,72px); }
.stage-copy { grid-area:copy; align-self:start; }
.convo { grid-area:convo; align-self:center; }
.stage-meta { grid-area:meta; align-self:end; display:grid; gap:24px; }

.display { margin:0; font-size:clamp(46px,7vw,104px); line-height:.92; letter-spacing:-.055em; font-weight:800; text-wrap:balance; }
.display > span { display:block; }
.display .aud { color:var(--show); }
.tagline { margin:26px 0 0; max-width:30rem; font-size:clamp(18px,1.7vw,22px); line-height:1.45; font-weight:500; color:var(--on-dark); text-wrap:balance; }

.hosted { display:flex; align-items:center; gap:14px; margin:0; font-size:15px; font-weight:600; color:var(--on-dark); line-height:1.45; }
.hosted b { color:#fff; font-weight:700; }
.hosted .cad { display:block; font-size:14px; color:var(--on-dark-2); font-weight:600; }
.faces { display:flex; flex:none; }
.faces img { width:44px; height:44px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px var(--char-3); background:var(--char-2); }
.faces img + img { margin-left:-12px; }
.listen { display:grid; gap:10px; }
.listen-h { font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--on-dark-2); }
.listen-apps { display:flex; flex-wrap:wrap; gap:8px; }
.app { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 15px 8px 10px; border-radius:var(--r-pill); text-decoration:none; font-weight:700; font-size:14.5px; line-height:1.2; border:0; cursor:pointer; white-space:nowrap; transition:background .15s, box-shadow .15s, transform .15s; }
.app svg { width:22px; height:22px; }
.app-dark { background:rgba(255,255,255,.07); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16); }
.app-dark:hover { background:rgba(255,255,255,.13); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34); }
.app-more { padding:8px 14px 8px 16px; }
.app-more .chev { width:14px; height:14px; transition:transform .15s; }
.listen .pop-panel { left:0; right:auto; }

/* the conversation: listener question (bubble) → the answer (episode card) */
.bubble { margin:0 0 30px; width:fit-content; max-width:min(100%, 540px); position:relative; background:var(--show); color:var(--ink);
  border-radius:28px 28px 28px 10px; padding:22px 28px 26px; box-shadow:0 20px 40px -24px rgba(0,0,0,.6); }
.bubble::after { content:""; position:absolute; left:0; bottom:-15px; width:30px; height:18px; background:inherit; clip-path:polygon(0 0, 100% 0, 0 100%); }
.bubble figcaption { font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; line-height:1.3; }
.bubble .who { letter-spacing:.02em; text-transform:none; font-weight:700; }
.bubble blockquote { margin:8px 0 0; }
.bubble blockquote p { margin:0; font-size:clamp(22px,2.2vw,30px); line-height:1.22; letter-spacing:-.025em; font-weight:700; text-wrap:balance; }
.now { --focus:var(--show-ink); margin-left:auto; width:min(100%, 556px); background:#fff; color:var(--ink); border-radius:var(--r-lg); padding:22px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 34px 70px -24px rgba(0,0,0,.7); position:relative; }
.now-top { display:grid; grid-template-columns:116px minmax(0,1fr); gap:20px; align-items:center; }
.now-art { padding:0; border:0; cursor:pointer; background:var(--bg); border-radius:16px; overflow:hidden; aspect-ratio:1; display:block; width:100%; }
.now-art img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.now-art:hover img { transform:scale(1.05); }
.now-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:0; font-size:13px; font-weight:700; color:var(--ink-3); line-height:1.3; }
.flag { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--show-ink); }
.flag::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--show); box-shadow:0 0 0 3px var(--show-soft); }
.now-title { margin:7px 0 8px; font-size:clamp(21px,1.9vw,26px); line-height:1.14; letter-spacing:-.03em; font-weight:800; text-wrap:balance; }
.now-sub { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0; font-size:13.5px; font-weight:700; color:var(--ink-3); line-height:1.3; }

/* ---------- player ---------- */
.player { display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:center; margin-top:18px; }
.pp { position:relative; width:64px; height:64px; border-radius:50%; border:0; cursor:pointer; background:var(--acc); color:var(--acc-on); display:grid; place-items:center; flex:none;
  box-shadow:inset 0 0 0 1.5px var(--acc-edge), 0 3px 0 var(--acc-lip); transition:transform .15s, background .15s, box-shadow .15s; }
.pp:hover { background:var(--acc-hover); transform:translateY(-1px); box-shadow:inset 0 0 0 1.5px var(--acc-edge), 0 5px 0 var(--acc-lip), 0 10px 24px var(--acc-glow); }
.pp:active { transform:translateY(1px); box-shadow:inset 0 0 0 1.5px var(--acc-edge), 0 1px 0 var(--acc-lip); }
.pp svg { width:26px; height:26px; grid-area:1/1; }
.pp .i-play { margin-left:3px; }
.pp .i-pause, .pp .i-spin, .ep-play .i-pause, .ep-play .i-spin { display:none; }
.is-playing .i-play, .is-loading .i-play { display:none; }
.is-playing .i-pause { display:block; }
.is-loading .i-pause { display:none; }
.is-loading .i-spin { display:block; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.track { min-width:0; }
.scrub { -webkit-appearance:none; appearance:none; display:block; width:100%; height:44px; margin:-8px 0; background:transparent; cursor:pointer; --p:0%; touch-action:none; }
.scrub::-webkit-slider-runnable-track { height:6px; border-radius:99px; background:linear-gradient(90deg, var(--ink) 0 var(--p), var(--line) var(--p) 100%); }
.scrub::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; margin-top:-6px; border-radius:50%; background:var(--ink); border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35); transition:transform .15s; }
.scrub:hover::-webkit-slider-thumb { transform:scale(1.15); }
.scrub::-moz-range-track { height:6px; border-radius:99px; background:var(--line); }
.scrub::-moz-range-progress { height:6px; border-radius:99px; background:var(--ink); }
.scrub::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--ink); border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35); }
.scrub:focus-visible { outline-offset:0; }
.times { display:flex; justify-content:space-between; margin-top:2px; font-size:12.5px; font-weight:700; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.ctl { display:flex; align-items:center; gap:4px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.skip { position:relative; width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:var(--ink); cursor:pointer; display:grid; place-items:center; transition:background .15s; }
.skip:hover { background:var(--bg); }
.skip svg { width:28px; height:28px; grid-area:1/1; }
.skip span { grid-area:1/1; font-size:9.5px; font-weight:800; letter-spacing:-.02em; margin-top:3px; }
.rate { min-width:52px; height:44px; border:0; border-radius:var(--r-pill); background:var(--bg); color:var(--ink); font-size:13.5px; font-weight:800; cursor:pointer; font-variant-numeric:tabular-nums; margin-left:4px; transition:background .15s; }
.rate:hover { background:var(--line); }
.notes { margin-left:auto; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:8px 12px 8px 14px; border:0; border-radius:var(--r-pill); background:transparent; color:var(--ink); font-size:14.5px; font-weight:800; cursor:pointer; transition:background .15s; white-space:nowrap; }
.notes:hover { background:var(--bg); }
.notes .arr { width:15px; height:15px; transition:transform .15s; }
.notes:hover .arr { transform:translateX(3px); }
.stripe-hero { height:10px; }

/* ---------- sticky mini player (clears the growdev switcher at bottom-left) ---------- */
.mini { position:fixed; z-index:60; bottom:16px; left:max(200px, calc(50% - 340px)); right:max(16px, calc(50% - 340px));
  display:grid; grid-template-columns:minmax(0,1fr) auto auto auto auto; align-items:center; gap:2px; padding:8px 8px 8px 8px;
  background:var(--char-3); color:#fff; border-radius:20px; box-shadow:0 18px 44px -12px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08);
  --focus:var(--show); animation:miniIn .3s cubic-bezier(.2,.8,.25,1); }
@keyframes miniIn { from { transform:translateY(24px); opacity:0; } }
.mini-bar { position:absolute; left:18px; right:18px; top:0; height:3px; border-radius:0 0 3px 3px; background:rgba(255,255,255,.12); overflow:hidden; }
.mini-bar i { display:block; height:100%; width:var(--p,0%); background:var(--show); }
.mini-open { display:flex; align-items:center; gap:12px; min-width:0; padding:0; border:0; background:none; color:inherit; cursor:pointer; text-align:left; border-radius:12px; }
.mini-open img { width:48px; height:48px; border-radius:12px; object-fit:cover; flex:none; }
.mini-t { display:grid; min-width:0; line-height:1.25; }
.mini-t b { font-size:14.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-t span { font-size:12.5px; font-weight:700; color:var(--on-dark-2); font-variant-numeric:tabular-nums; }
.mini .pp { width:48px; height:48px; box-shadow:none; }
.mini .pp svg { width:20px; height:20px; }
.mini .skip { color:#fff; }
.mini .skip:hover { background:rgba(255,255,255,.1); }
.mini-x { width:40px; height:40px; border:0; border-radius:50%; background:none; color:var(--on-dark-2); cursor:pointer; display:grid; place-items:center; }
.mini-x:hover { background:rgba(255,255,255,.1); color:#fff; }
.mini-x svg { width:16px; height:16px; }
body.has-mini { padding-bottom:88px; }

/* toast */
.toast { position:fixed; z-index:80; left:50%; bottom:96px; transform:translateX(-50%); background:var(--char-3); color:#fff; padding:11px 18px; border-radius:var(--r-pill);
  font-size:14.5px; font-weight:700; box-shadow:0 12px 30px -8px rgba(0,0,0,.45); animation:miniIn .25s ease-out; white-space:nowrap; }

/* ---------- responsive: header + stage ---------- */
@media (max-width:1320px) {
  .stage-grid { grid-template-columns:minmax(0,1fr) minmax(0,500px); column-gap:56px; }
  .now { width:100%; }
  .bubble { max-width:100%; }
}
@media (max-width:1180px) {
  .stage-grid { grid-template-columns:minmax(0,1fr) minmax(0,460px); column-gap:48px; }
  .sw-long { display:none; }
  .bubble blockquote p { font-size:clamp(21px,2.1vw,25px); }
}
@media (max-width:980px) {
  .hd-nav { display:none; }
  .hd-subs { margin-left:auto; }
  .hd-menu { display:inline-flex; }
  .stage-grid { grid-template-columns:minmax(0,1fr); grid-template-areas:"copy" "convo" "meta"; row-gap:40px; }
  .convo { width:100%; max-width:620px; }
  .now { margin-left:0; width:100%; }
  .bubble { max-width:100%; }
  .display { font-size:clamp(46px,10vw,92px); }
  .display > span { display:inline; }
  .display .aud::after { content:"\A"; white-space:pre; }
}
@media (max-width:640px) {
  :root { --gut:18px; --hd:58px; }
  .lockup { gap:10px; } .lockup img { height:19px; } .lockup .rule { height:26px; } .lockup .word { font-size:17px; }
  .hd-subs { display:none; }
  .hd-menu { margin-left:auto; }
  .switch { margin-bottom:24px; }
  .switch a { padding-right:14px; gap:8px; font-size:14px; }
  .switch img.sw-art { width:40px; height:40px; }
  .switch a { padding:5px 16px 5px 5px; }
  .sw-long { display:none; }
  .stage-grid { padding-top:22px; padding-bottom:36px; row-gap:28px; }
  .display { font-size:clamp(40px,12.4vw,64px); line-height:.95; }
  .tagline { margin-top:14px; font-size:17px; }
  .bubble { padding:16px 20px 18px; border-radius:22px 22px 22px 8px; margin-bottom:24px; }
  .bubble blockquote p { font-size:19px; }
  .now { padding:16px; border-radius:22px; }
  .now-top { grid-template-columns:76px minmax(0,1fr); gap:14px; }
  .now-art { border-radius:12px; }
  .now-title { font-size:19px; margin:5px 0 6px; }
  .now-sub .chip { display:none; }
  .player { gap:14px; margin-top:14px; }
  .pp { width:58px; height:58px; }
  .ctl { margin-top:10px; padding-top:8px; }
  .notes { padding:8px 8px 8px 10px; font-size:14px; }
  .faces img { width:38px; height:38px; }
  .hosted { font-size:14.5px; }
  .hosted .cad { font-size:13.5px; }
  .mini { left:58px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); border-radius:18px; padding:6px; grid-template-columns:minmax(0,1fr) auto auto; }
  .mini-skip { display:none; }
  .mini-open img { width:44px; height:44px; border-radius:10px; }
  .mini-t b { font-size:14px; }
  .mini .pp { width:44px; height:44px; }
  body.has-mini { padding-bottom:80px; }
}
@media (max-width:380px) {
  .lockup img { height:17px; } .lockup .word { font-size:16px; }
  .display { font-size:40px; }
  .now-top { grid-template-columns:64px minmax(0,1fr); gap:12px; }
  .rate { min-width:46px; }
  .notes span, .notes { font-size:13.5px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .is-loading .i-spin { animation:spin 2.4s linear infinite !important; }
}

/* =====================================================================
   Find your answer: search + topic navigator + question-first rows
   ===================================================================== */
.browse { background:var(--bg); padding:clamp(64px,8vw,112px) 0 clamp(56px,6vw,88px); }
.browse-head { max-width:46rem; margin-bottom:clamp(28px,3.4vw,48px); }
.browse-head .h2 { margin-bottom:14px; }
.browse-grid { display:grid; grid-template-columns:272px minmax(0,1fr); gap:clamp(32px,4.4vw,64px); align-items:start; }
.browse-side { position:sticky; top:calc(var(--hd) + 24px); display:grid; gap:10px; min-width:0; }
.browse-main { min-width:0; }

/* search */
.search { position:relative; margin:0; }
.search > svg { position:absolute; left:16px; top:50%; transform:translateY(-50%); width:19px; height:19px; color:var(--ink-3); pointer-events:none; }
.search input { width:100%; height:52px; border:0; border-radius:var(--r-pill); background:#fff; color:var(--ink); padding:0 48px 0 46px;
  font-size:16px; font-weight:600; box-shadow:inset 0 0 0 1.5px var(--line-2), 0 1px 2px rgba(31,35,40,.04); -webkit-appearance:none; appearance:none; transition:box-shadow .15s; }
.search input::placeholder { color:var(--ink-3); opacity:1; }
.search input:hover { box-shadow:inset 0 0 0 1.5px #AEB5BD; }
.search input:focus { outline:none; box-shadow:inset 0 0 0 2px var(--ink), 0 0 0 4px var(--show-soft); }
.search input::-webkit-search-cancel-button { -webkit-appearance:none; display:none; }
.search-kbd { position:absolute; right:14px; top:50%; transform:translateY(-50%); min-width:24px; height:24px; display:grid; place-items:center; border-radius:6px;
  font:700 12.5px/1 var(--font); color:var(--ink-3); background:var(--bg); box-shadow:inset 0 0 0 1px var(--line-2); pointer-events:none; }
.search input:focus ~ .search-kbd, .search input:not(:placeholder-shown) ~ .search-kbd { display:none; }
@media (hover:none) { .search-kbd { display:none; } }
.search-x { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:40px; height:40px; border:0; border-radius:50%; background:transparent; color:var(--ink-2); cursor:pointer; display:grid; place-items:center; }
.search-x:hover { background:var(--bg); color:var(--ink); }
.search-x svg { width:16px; height:16px; }

/* topic navigator */
.side-h { margin:18px 4px 2px; font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.topics { display:grid; gap:2px; }
.topic { position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:8px 12px 8px 14px; border:0; border-radius:14px; background:transparent; cursor:pointer;
  color:var(--ink-2); font-size:15.5px; font-weight:700; text-align:left; line-height:1.25; transition:background .15s, color .15s; }
.topic i { width:12px; height:12px; border-radius:4px; background:var(--a, var(--ink)); flex:none; }
.topic[data-filter="all"] i { background:var(--stripe); }
.topic > span { flex:1; min-width:0; }
.topic small { font-size:13px; font-weight:700; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.topic small b { font-weight:700; }
.topic:hover { background:rgba(31,35,40,.05); color:var(--ink); }
.topic[aria-pressed="true"] { background:#fff; color:var(--ink); font-weight:800; box-shadow:0 1px 2px rgba(31,35,40,.06), 0 6px 16px -6px rgba(31,35,40,.14), inset 3px 0 0 var(--a, var(--ink)); }
.topic[data-filter="all"][aria-pressed="true"] { box-shadow:0 1px 2px rgba(31,35,40,.06), 0 6px 16px -6px rgba(31,35,40,.14); }
.topic[aria-pressed="true"] small { color:var(--ink); }
.side-ask { margin-top:16px; display:grid; gap:2px; padding:16px 18px; border-radius:var(--r); background:#fff; box-shadow:inset 0 0 0 1px var(--line); color:var(--ink-2); text-decoration:none; font-size:14.5px; font-weight:600; line-height:1.35; transition:box-shadow .15s; }
.side-ask b { display:inline-flex; align-items:center; gap:6px; color:var(--ink); font-size:15.5px; font-weight:800; }
.side-ask .arr { width:15px; height:15px; transition:transform .15s; }
.side-ask:hover { box-shadow:inset 0 0 0 1.5px var(--ink-3); }
.side-ask:hover .arr { transform:translateX(3px); }

/* status line */
.ep-status { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:40px; margin:0 0 12px; }
.ep-status p { margin:0; font-size:14.5px; font-weight:600; color:var(--ink-3); }
.ep-status b { color:var(--ink); font-weight:800; }
.ep-clear { flex:none; min-height:40px; padding:6px 14px; border:0; border-radius:var(--r-pill); background:#fff; color:var(--ink); font-size:14px; font-weight:800; cursor:pointer; box-shadow:inset 0 0 0 1.5px var(--line-2); }
.ep-clear:hover { box-shadow:inset 0 0 0 1.5px var(--ink-3); }

/* rows: the question leads, the art is a thumbnail */
.ep-list { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
html.js .ep-list.is-collapsed > .ep:nth-child(n+11) { display:none; }
.ep { position:relative; display:grid; grid-template-columns:104px minmax(0,1fr); gap:22px; align-items:start; padding:18px 22px 18px 18px; background:#fff; border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(31,35,40,.05), inset 0 0 0 1px rgba(31,35,40,.05); transition:box-shadow .2s, transform .2s; }
.ep:hover { box-shadow:0 2px 4px rgba(31,35,40,.05), 0 14px 34px -14px rgba(31,35,40,.22), inset 0 0 0 1px rgba(31,35,40,.06); }
.ep-art { position:relative; aspect-ratio:1; border-radius:16px; overflow:hidden; background:var(--bg); }
.ep-art img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.ep:hover .ep-art img { transform:scale(1.04); }
.ep-main { min-width:0; display:grid; gap:6px; align-content:start; }
.ep-lead { margin:0; font-size:clamp(18px,1.55vw,20.5px); line-height:1.28; letter-spacing:-.022em; font-weight:800; text-wrap:balance; }
.ep-lead a { color:var(--ink); text-decoration:none; border-radius:6px; }
.ep-lead a::after { content:""; position:absolute; inset:0; border-radius:var(--r-lg); z-index:0; }
.ep-lead a:focus-visible { outline:none; }
.ep-lead a:focus-visible::after { outline:3px solid var(--focus); outline-offset:2px; }
.ep-lead a:hover .t { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; text-decoration-color:var(--a); }
.ep:not(.is-q) .ep-lead { letter-spacing:-.025em; }
.ep-sub { margin:0; font-size:15px; line-height:1.45; color:var(--ink-2); font-weight:500; text-wrap:pretty; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ep.is-q .ep-sub .t { font-weight:700; color:var(--ink); }
.ep-who { color:var(--ink-3); font-weight:600; }
.ep-foot { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:8px; }
.ep-play { position:relative; z-index:1; display:inline-flex; align-items:center; gap:9px; min-height:40px; padding:4px 14px 4px 4px; border:0; border-radius:var(--r-pill);
  background:var(--bg); color:var(--ink); font-size:14px; font-weight:800; cursor:pointer; white-space:nowrap; font-variant-numeric:tabular-nums; transition:background .15s, color .15s; }
.ep-play .ic { width:32px; height:32px; border-radius:50%; background:var(--acc); color:var(--acc-on); box-shadow:inset 0 0 0 1.5px var(--acc-edge); display:grid; place-items:center; flex:none; transition:transform .15s; }
.ep-play svg { width:14px; height:14px; grid-area:1/1; }
.ep-play .i-play { margin-left:2px; }
.ep-play:hover { background:var(--line); }
.ep-play:hover .ic { transform:scale(1.06); }
.ep-foot .chip { position:relative; z-index:1; }
.ep-when { font-size:13.5px; font-weight:700; color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums; }
mark { background:var(--hl); color:inherit; border-radius:3px; padding:0 1px; }

/* now playing / in progress */
.prog { position:absolute; left:8px; right:8px; bottom:8px; height:4px; border-radius:4px; background:rgba(255,255,255,.55); overflow:hidden; opacity:0; transition:opacity .2s; }
.prog i { display:block; height:100%; width:0; background:var(--acc); border-radius:4px; }
.ep.is-started .prog, .ep.is-current .prog { opacity:1; }
.eq { position:absolute; inset:0; display:none; align-items:flex-end; justify-content:center; gap:4px; padding-bottom:30%; background:rgba(35,39,43,.5); }
.eq i { width:5px; height:28%; border-radius:3px; background:#fff; animation:eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay:-.35s; } .eq i:nth-child(3) { animation-delay:-.7s; }
@keyframes eq { 0%,100% { height:18%; } 50% { height:46%; } }
.ep.is-on .eq { display:flex; }
.ep.is-current { box-shadow:0 2px 4px rgba(31,35,40,.05), 0 14px 34px -14px rgba(31,35,40,.22), inset 0 0 0 2px var(--ink); }
.ep.is-current .ep-play { background:var(--char-3); color:#fff; }

.ep-more { margin-top:24px; text-align:center; }
.ep-more .btn { min-height:48px; }
.ep-more .chev { width:16px; height:16px; }

/* empty state */
.ep-empty { padding:clamp(32px,4vw,48px); border-radius:var(--r-lg); background:#fff; box-shadow:inset 0 0 0 1px var(--line); text-align:center; }
.ep-empty-h { margin:0 0 8px; font-size:clamp(20px,2vw,24px); font-weight:800; letter-spacing:-.025em; line-height:1.25; text-wrap:balance; overflow-wrap:anywhere; }
.ep-empty-p { margin:0 auto 22px; max-width:30rem; color:var(--ink-2); font-size:16px; line-height:1.5; }
.ep-empty-btns { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }

/* =====================================================================
   Episode sheet (right side ≥ 761px, full screen on phones)
   ===================================================================== */
html.sheet-lock { overflow:hidden; }
dialog.sheet { position:fixed; inset:0 0 0 auto; margin:0; padding:0; border:0; width:min(620px, 100vw); max-width:100vw; height:100dvh; max-height:100dvh;
  background:#fff; color:var(--ink); display:flex; flex-direction:column; overflow:hidden; box-shadow:-30px 0 80px -20px rgba(0,0,0,.45); --focus:var(--show-ink); }
dialog.sheet:not([open]) { display:none; }
dialog.sheet[open] { animation:sheetIn .28s cubic-bezier(.2,.8,.25,1); }
@keyframes sheetIn { from { transform:translateX(40px); opacity:0; } }
dialog.sheet::backdrop { background:rgba(20,23,26,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.sh-top { position:relative; flex:none; display:flex; align-items:center; gap:4px; padding:10px 12px 10px 24px; background:var(--char-3); color:var(--on-dark); --focus:var(--show); }
.sh-top::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:4px; background:var(--stripe); z-index:1; }
.sh-crumb { flex:1; min-width:0; margin:0; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sh-crumb b { color:#fff; font-weight:800; }
.sh-btn { width:44px; height:44px; flex:none; border:0; border-radius:50%; background:transparent; color:#fff; cursor:pointer; display:grid; place-items:center; transition:background .15s; }
.sh-btn:hover { background:rgba(255,255,255,.12); }
.sh-btn svg { width:19px; height:19px; }
.sh-body { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:34px clamp(20px,4vw,40px) calc(40px + env(safe-area-inset-bottom)); }
.sh-head { display:grid; grid-template-columns:112px minmax(0,1fr); gap:20px; align-items:start; }
.sh-art { width:112px; height:112px; border-radius:18px; object-fit:cover; background:var(--bg); }
.sh-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0 0 8px; font-size:13.5px; font-weight:700; color:var(--ink-3); }
.sh-title { margin:0; font-size:clamp(24px,3vw,31px); line-height:1.12; letter-spacing:-.035em; font-weight:800; text-wrap:balance; }
.sh-title:focus { outline:none; }
.sh-player { display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px; align-items:center; margin-top:24px; padding:16px 18px 10px; border-radius:var(--r); background:var(--bg); }
.sh-player .pp { width:56px; height:56px; }
.sh-player .pp svg { width:22px; height:22px; }
.sh-ctl { grid-column:1 / -1; display:flex; align-items:center; gap:2px; margin:2px -6px 0; }
.sh-ctl .skip:hover { background:#fff; }
.sh-ctl .rate { background:#fff; }
.sh-q { margin:28px 0 0; padding:20px 24px 22px; border-radius:22px 22px 22px 8px; background:var(--a-soft); position:relative; }
.sh-q figcaption { font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--a-ink); }
.sh-q figcaption span { letter-spacing:.02em; text-transform:none; font-weight:700; }
.sh-q blockquote { margin:6px 0 0; }
.sh-q p { margin:0; font-size:clamp(19px,2vw,22px); line-height:1.35; font-weight:700; letter-spacing:-.015em; text-wrap:pretty; }
.sh-intro { margin:22px 0 0; font-size:17px; line-height:1.65; color:var(--ink-2); }
.sh-h { margin:30px 0 12px; font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.sh-points { margin:0; padding:0; list-style:none; display:grid; gap:12px; counter-reset:pt; }
.sh-points li { counter-increment:pt; display:grid; grid-template-columns:30px minmax(0,1fr); gap:14px; font-size:16.5px; line-height:1.5; }
.sh-points li::before { content:counter(pt); width:30px; height:30px; border-radius:50%; background:var(--a); color:var(--ink); display:grid; place-items:center; font-weight:800; font-size:14px; line-height:1; margin-top:-2px; }
[data-theme="lead"] .sh-points li::before { color:#fff; }
.sh-res { margin:0; padding:0; list-style:none; display:grid; gap:2px; }
.sh-res a { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:6px 0; color:var(--ink); font-weight:700; font-size:16px; text-decoration:underline; text-decoration-color:var(--line-2); text-decoration-thickness:2px; text-underline-offset:5px; }
.sh-res a:hover { text-decoration-color:var(--ink); }
.sh-res .ext { width:14px; height:14px; color:var(--ink-3); }
.sh-apps-row { display:flex; flex-wrap:wrap; gap:8px; }
.app-light { background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line-2); }
.app-light:hover { box-shadow:inset 0 0 0 1.5px var(--ink-3); }
.sh-nav { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:34px; padding-top:24px; border-top:1px solid var(--line); }
.sh-step { display:grid; gap:4px; align-content:start; padding:14px 16px; border:0; border-radius:var(--r); background:var(--bg); color:var(--ink); cursor:pointer; text-align:left; font-size:15px; font-weight:800; line-height:1.3; letter-spacing:-.01em; transition:background .15s; }
.sh-step small { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.sh-step:hover { background:var(--line); }
.sh-older { text-align:right; }
.sh-ask { margin:24px 0 0; font-size:15px; color:var(--ink-3); font-weight:600; }
.sh-ask a { color:var(--show-ink); font-weight:800; }

@media (max-width:980px) {
  .browse-grid { grid-template-columns:minmax(0,1fr); gap:0; }
  .browse-side { position:static; display:block; min-width:0; }
  .side-h, .side-ask { display:none; }
  .search { max-width:560px; margin-bottom:14px; }
  .topics { position:relative; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 calc(var(--gut) * -1) 10px; padding:4px var(--gut) 6px; scroll-padding:0 var(--gut); }
  .topics::-webkit-scrollbar { display:none; }
  .topic { flex:none; width:auto; min-height:44px; padding:8px 16px 8px 14px; border-radius:var(--r-pill); background:#fff; box-shadow:inset 0 0 0 1.5px var(--line); gap:9px; font-size:15px; }
  .topic i { width:10px; height:10px; border-radius:3px; }
  .topic:hover { background:#fff; box-shadow:inset 0 0 0 1.5px var(--ink-3); }
  .topic[aria-pressed="true"], .topic[data-filter="all"][aria-pressed="true"] { background:var(--char-3); color:#fff; box-shadow:none; }
  .topic[aria-pressed="true"] small { color:var(--on-dark-2); }
}
@media (max-width:760px) {
  dialog.sheet { inset:0; width:100vw; box-shadow:none; }
  dialog.sheet[open] { animation:sheetUp .3s cubic-bezier(.2,.8,.25,1); }
  @keyframes sheetUp { from { transform:translateY(32px); opacity:0; } }
  .sh-top { padding:calc(8px + env(safe-area-inset-top)) 8px 8px 18px; }
  .sh-head { grid-template-columns:84px minmax(0,1fr); gap:16px; }
  .sh-art { width:84px; height:84px; border-radius:14px; }
  .sh-nav { grid-template-columns:1fr; }
  .sh-older { text-align:left; }
}
@media (max-width:600px) {
  .ep { grid-template-columns:72px minmax(0,1fr); gap:14px; padding:14px 14px 14px 14px; border-radius:20px; }
  .ep-art { border-radius:12px; }
  .ep-lead { font-size:17px; line-height:1.3; }
  .ep-sub { font-size:14.5px; -webkit-line-clamp:2; }
  .ep-foot { margin-top:6px; gap:8px 10px; }
  .ep-when { display:none; }
  .prog { left:5px; right:5px; bottom:5px; height:3px; }
  .eq { padding-bottom:26%; gap:3px; } .eq i { width:4px; }
}
@media (max-width:380px) {
  .ep { grid-template-columns:minmax(0,1fr); }
  .ep-art { position:absolute; top:14px; right:14px; width:52px; }
  .ep-main { padding-right:66px; }
  .ep-foot { margin-right:-66px; }
  .ep-sub { -webkit-line-clamp:3; }
}

/* =====================================================================
   Ask the show: one CTA, with real answered questions as proof
   ===================================================================== */
.ask { background:#fff; padding:clamp(64px,7.5vw,112px) 0; }
.ask-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px); gap:clamp(40px,6vw,96px); align-items:start; }
.ask-grid.solo { grid-template-columns:minmax(0,46rem); }
.ask-copy .lede { margin-bottom:30px; }
.ask-cta { display:grid; justify-items:start; gap:16px; }
.ask-alt { margin:0; font-size:15px; font-weight:600; color:var(--ink-3); line-height:1.5; }
.ask-alt a { color:var(--ink); font-weight:800; text-decoration-color:var(--line-2); text-decoration-thickness:2px; text-underline-offset:4px; }
.ask-alt a:hover { text-decoration-color:var(--ink); }
.thread { position:relative; }
.thread-h { margin:0 0 16px; font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.thread-list { list-style:none; margin:0; padding:0; display:grid; gap:24px; }
.thread-list li { display:grid; gap:10px; justify-items:start; }
.thread-list .ta { margin-left:28px; width:calc(100% - 28px); }
.ta-t { flex:1; }
.tq { margin:0; width:100%; padding:16px 20px 15px; border-radius:22px 22px 22px 8px; background:var(--show-soft); position:relative; }
.tq p { margin:0; font-size:clamp(16.5px,1.4vw,18px); line-height:1.4; font-weight:700; letter-spacing:-.012em; color:var(--ink); text-wrap:pretty; }
.tq footer { margin-top:6px; font-size:13px; font-weight:700; color:var(--show-ink); }
.ta { display:inline-flex; align-items:center; gap:12px; max-width:100%; min-height:48px; padding:7px 16px 7px 7px; border-radius:22px; background:#fff; color:var(--ink); text-decoration:none;
  box-shadow:inset 0 0 0 1.5px var(--line-2); transition:box-shadow .15s; }
.ta img { width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none; }
.ta-t { display:grid; min-width:0; line-height:1.25; gap:1px; }
.ta-t b { font-size:14px; font-weight:800; }
.ta-t small { font-size:13px; font-weight:600; color:var(--ink-3); text-wrap:pretty; }
.ta .arr { width:15px; height:15px; color:var(--ink); flex:none; transition:transform .15s; }
.ta:hover { box-shadow:inset 0 0 0 1.5px var(--ink-3); }
.ta:hover .arr { transform:translateX(3px); }
.ta:focus-visible { outline:3px solid var(--focus); outline-offset:3px; border-radius:22px; }

/* =====================================================================
   About + hosts: real names, photos, credit, and facts computed from the feed
   ===================================================================== */
.about { background:var(--bg); padding:clamp(64px,7.5vw,112px) 0 clamp(48px,5vw,72px); }
.about-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); grid-template-areas:"copy hosts" "facts facts"; gap:clamp(36px,5vw,64px) clamp(32px,6vw,96px); align-items:start; }
.about-copy { grid-area:copy; }
.about-copy .lede { margin-bottom:0; }
.hosts { grid-area:hosts; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(14px,2vw,24px); }
.host { display:grid; gap:4px; }
.host img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-lg); background:var(--line); margin-bottom:12px; filter:grayscale(1) contrast(1.03); }
.host b { font-size:clamp(18px,1.6vw,21px); font-weight:800; letter-spacing:-.022em; line-height:1.2; }
.host span { font-size:14.5px; font-weight:700; color:var(--ink-3); }
.crew { display:flex; align-items:center; gap:12px; margin:26px 0 0; font-size:15px; font-weight:600; color:var(--ink-3); }
.crew img { width:40px; height:40px; border-radius:50%; object-fit:cover; filter:grayscale(1); flex:none; }
.crew b { color:var(--ink); font-weight:800; }
.facts { grid-area:facts; margin:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px clamp(20px,3vw,40px); padding-top:32px; border-top:1px solid var(--line-2); }
.facts dt { font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.facts dd { margin:6px 0 0; font-size:clamp(20px,2.1vw,28px); font-weight:800; letter-spacing:-.03em; line-height:1.15; color:var(--ink); font-variant-numeric:tabular-nums; }

/* =====================================================================
   Sister show: one slim band, one link
   ===================================================================== */
.sister { background:var(--bg); padding:0 0 clamp(48px,5vw,72px); }
.sis { display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:24px; align-items:center; padding:16px 22px 16px 16px; border-radius:var(--r-lg); background:var(--char-3); color:#fff; text-decoration:none; position:relative; overflow:hidden; transition:background .2s; }
.sis[data-o="kma"] { --o:#F27A9E; }
.sis[data-o="yma"] { --o:#BED65A; }
.sis img { position:relative; width:96px; height:96px; border-radius:18px; object-fit:cover; }
.sis-copy { position:relative; display:grid; gap:4px; min-width:0; }
.sis-k { font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--o); }
.sis-h { font-size:clamp(19px,2vw,24px); font-weight:800; letter-spacing:-.028em; line-height:1.2; text-wrap:balance; }
.sis-p { font-size:14.5px; font-weight:600; color:var(--on-dark-2); line-height:1.4; }
.sis-go { position:relative; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--o); color:var(--ink); transition:transform .2s; }
.sis-go .arr { width:20px; height:20px; }
.sis:hover { background:#1B1E21; }
.sis:hover .sis-go { transform:translateX(4px); }
.sis:focus-visible { outline:3px solid var(--focus); outline-offset:3px; border-radius:var(--r-lg); }

/* =====================================================================
   Footer: follow again, signup PLACEHOLDER (not wired), SYCU links
   ===================================================================== */
.foot { background:var(--char-3); color:var(--on-dark); --focus:var(--show); }
.foot .stripe { height:8px; }
.foot-top { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(36px,6vw,96px); align-items:start; padding-top:clamp(64px,8vw,104px); padding-bottom:clamp(48px,6vw,72px); }
.foot-h { margin:0 0 12px; color:#fff; font-size:clamp(34px,4.6vw,56px); line-height:1.04; letter-spacing:-.045em; font-weight:800; text-wrap:balance; }
.foot-sub > p { margin:0 0 26px; font-size:clamp(16.5px,1.5vw,18.5px); color:var(--on-dark-2); max-width:34rem; }
.foot-apps { display:grid; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:8px; max-width:560px; }
.foot-apps .app { justify-content:flex-start; }
.signup { padding:24px; border-radius:var(--r-lg); background:rgba(255,255,255,.035); border:1.5px dashed rgba(255,255,255,.28); }
.signup-h { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.signup-h b { color:#fff; font-size:17px; font-weight:800; letter-spacing:-.01em; }
.ph-tag { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:var(--r-pill); color:var(--ink); background:#E4D353; }
.signup-p { margin:6px 0 16px; font-size:15px; color:var(--on-dark-2); }
.signup-row { display:flex; gap:8px; }
.signup input { flex:1; min-width:0; height:48px; border:0; border-radius:var(--r-pill); padding:0 20px; font-size:16px; font-weight:600; background:rgba(255,255,255,.08); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22); }
.signup input::placeholder { color:#9BA3AB; opacity:1; }
.signup input:focus { outline:3px solid var(--show); outline-offset:2px; }
.signup .btn { min-height:48px; background:rgba(255,255,255,.1); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28); }
.signup .btn:hover { background:rgba(255,255,255,.16); }
.signup-note { margin:12px 0 0; font-size:13.5px; font-weight:600; color:var(--on-dark-2); line-height:1.45; }
.foot-links { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px 64px; padding-top:40px; padding-bottom:36px; }
.foot-lockup { display:inline-flex; align-items:center; gap:14px; min-height:44px; color:#fff; text-decoration:none; }
.foot-lockup img { height:24px; width:auto; }
.foot-lockup .rule { width:2px; height:30px; border-radius:1px; background:rgba(255,255,255,.4); }
.foot-lockup .word { font-size:17px; font-weight:700; letter-spacing:-.01em; }
.foot-brand p { margin:10px 0 0; font-size:13.5px; color:var(--on-dark-2); }
.foot-cols { display:grid; grid-template-columns:repeat(3, auto); gap:24px 56px; }
.foot-cols div { display:grid; align-content:start; gap:0; }
.foot-cols b { color:#fff; font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; margin-bottom:2px; }
.foot-cols a { display:inline-flex; align-items:center; min-height:40px; color:var(--on-dark); text-decoration:none; font-size:14.5px; font-weight:600; }
.foot-cols a:hover { color:#fff; text-decoration:underline; text-underline-offset:3px; }
.foot-fine { position:relative; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:22px; padding-bottom:calc(28px + env(safe-area-inset-bottom)); }
.foot-links::before, .foot-fine::before { content:""; position:absolute; top:0; left:var(--gut); right:var(--gut); height:1px; background:var(--dark-line); }
.foot-fine p { margin:0; font-size:13px; color:var(--on-dark-2); }
.draft-tag { display:inline-block; background:#fff; color:var(--ink-2); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:var(--r-pill); }

/* reveal on scroll (JS adds .in; without JS or with reduced motion everything is visible) */
html.js .rv { opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease; }
html.js .rv.in { opacity:1; transform:none; }

@media (max-width:980px) {
  .ask-grid { grid-template-columns:minmax(0,1fr); }
  .thread { max-width:620px; }

  .facts { grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:24px; }
  .foot-top { grid-template-columns:minmax(0,1fr); }
  .signup { max-width:560px; }
  .foot-links { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:600px) {
  .tq { max-width:100%; padding:14px 16px 13px; }
  .thread-list .ta { margin-left:16px; width:calc(100% - 16px); }
  .ta-t { flex:1; }
  .hosts { gap:12px; }
  .host img { border-radius:20px; margin-bottom:10px; }

  .sis { grid-template-columns:64px minmax(0,1fr); gap:16px; padding:14px; }
  .sis img { width:64px; height:64px; border-radius:14px; }
  .sis-go { display:none; }
  .sis-hosts { display:none; }
  .signup { padding:20px; }
  .signup-row { flex-direction:column; }
  .signup input { flex:none; width:100%; }
  .signup .btn { width:100%; }
  .h2 { letter-spacing:-.034em; }
  .foot-cols { grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 16px; }
  .foot-fine { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion:reduce) { html.js .rv { opacity:1; transform:none; } }
.nw { white-space:nowrap; }
.ep-who { white-space:nowrap; }
@media (max-width:640px) { .cad-pre { display:none; } }

/* ---------- polish pass (phase 4) ---------- */
/* mobile topic rail: fade the trailing edge so it reads as scrollable */
@media (max-width:980px) {
  .browse-side { position:relative; top:auto; }
  .browse-side::after { content:""; position:absolute; right:calc(var(--gut) * -1); bottom:10px; width:56px; height:54px; pointer-events:none;
    background:linear-gradient(90deg, rgba(246,247,249,0), var(--bg) 70%); }
}
/* sister band sits closer to the section above; keep its bottom gap equal to the top gap of the footer */
.sister { padding-top:0; }

@media (max-width:900px) {
  .about-grid { grid-template-columns:minmax(0,1fr); grid-template-areas:"copy" "hosts" "facts"; }
  .hosts { max-width:520px; }
}
@media (max-width:600px) {
  .foot-apps { display:flex; flex-wrap:wrap; }
}
@media (max-width:600px) {
  .facts { grid-template-columns:minmax(0,1fr); gap:0; padding-top:0; }
  .facts > div { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:15px 0; border-bottom:1px solid var(--line); }
  .facts dd { margin:0; font-size:18px; text-align:right; }
}
@media (max-width:1180px) and (min-width:981px) {
  .listen-apps { gap:6px; }
  .listen-apps .app { padding:8px 13px 8px 9px; gap:7px; font-size:14px; }
}