/* =====================================================================
   SYCU Podcasts (Kids Ministry Answers / Youth Ministry Answers) draft
   Built to Projects/SYCU Design System.md ("Daybreak"): starter kit §10,
   podcast page starter §8, editorial + content-index recipes §7.
   Accent: `lead` charcoal + rainbow stripe (§4.3). Topic chips use area colours.
   ===================================================================== */
: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;
  --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;
  --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%);
}
[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); }

*,*::before,*::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px; }
body { margin:0; background:#fff; color:var(--ink); font:400 17px/1.6 var(--font); -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--a-ink, var(--disc-ink)); text-underline-offset:3px; }
b, strong { font-weight:700; }
button, input { font:inherit; color:inherit; }
:focus-visible { outline:3px solid var(--disc); outline-offset:2px; border-radius:6px; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 24px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
section { position:relative; }
.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(--a-ink, var(--disc-ink)); }
.eyebrow::before { content:""; width:10px; height:10px; border-radius:3px; background:var(--a, var(--disc)); }
.h2 { font-size:clamp(32px,4.4vw,52px); line-height:1.1; letter-spacing:-.038em; 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; }

/* ---------- 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; padding:13px 22px; border-radius:var(--r-pill); transition:transform .15s, box-shadow .15s, background .15s; }
.btn-primary { background:var(--disc); color:var(--ink); box-shadow:0 2px 0 rgba(169,79,12,.35); }
.btn-primary:hover { background:#F5994F; transform:translateY(-1px); box-shadow:0 6px 16px rgba(240,137,60,.35); }
.btn-dark { background:var(--char-3); color:#fff; } .btn-dark:hover { background:#000; transform:translateY(-1px); }
.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 .arr { transition:transform .15s; } .btn:hover .arr { transform:translateX(3px); }
.btn svg { width:16px; height:16px; flex:none; }

/* ---------- header ---------- */
.gc-header { position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line); }
.gc-header .bar { display:flex; align-items:center; gap:22px; height:68px; max-width:var(--max); margin:0 auto; padding:0 24px; }
.gc-logo { display:inline-flex; align-items:center; gap:14px; color:#1F2328; text-decoration:none; flex:none; }
.gc-logo img { height:26px; width:auto; }
.gc-logo .rule { width:2px; height:36px; border-radius:1px; background:#8C8C8C; }
.gc-logo .word { font-weight:700; font-size:21px; line-height:1; letter-spacing:-.02em; }
.gc-nav { display:flex; gap:4px; margin-left:auto; align-items:center; }
.gc-nav a { color:var(--ink-2); text-decoration:none; font-weight:600; font-size:14.5px; padding:8px 12px; border-radius:var(--r-pill); white-space:nowrap; }
.gc-nav a:hover { background:var(--bg); color:var(--ink); }
.gc-nav a[aria-current="page"] { background:var(--lead-soft); color:var(--ink); }
.gc-header .btn { padding:10px 18px; font-size:14.5px; }
.gc-menu { display:none; }
@media (max-width:1060px) {
  .gc-header .bar { gap:10px; height:60px; padding:0 16px; }
  .gc-logo { gap:10px; } .gc-logo img { height:21px; } .gc-logo .rule { height:29px; } .gc-logo .word { font-size:18px; }
  .gc-nav { display:none; }
  .gc-header .btn { margin-left:auto; padding:9px 15px; font-size:14px; }
  .gc-menu { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; border:0; background:var(--bg); cursor:pointer; flex:none; }
  .gc-menu svg { width:20px; height:20px; }
  .gc-header.open .gc-nav { display:flex; flex-direction:column; align-items:stretch; position:absolute; left:0; right:0; top:60px;
    background:#fff; border-bottom:1px solid var(--line); padding:10px 16px 16px; box-shadow:var(--shadow); }
  .gc-header.open .gc-nav a { padding:12px 14px; font-size:16px; }
}
@media (max-width:400px) {
  .gc-logo img { height:17px; } .gc-logo .rule { height:24px; } .gc-logo .word { font-size:15.5px; }
  .gc-header .btn { padding:8px 12px; font-size:13px; }
}

/* ---------- show switch (Kids | Youth) ---------- */
.age-switch { display:inline-flex; background:var(--bg); border-radius:var(--r-pill); padding:4px; gap:2px; }
.age-switch a { color:var(--ink-2); font-weight:700; font-size:14.5px; padding:8px 16px; border-radius:var(--r-pill); text-decoration:none; white-space:nowrap; transition:background .15s, color .15s; }
.age-switch a:hover { color:var(--ink); }
.age-switch a[aria-current="page"] { background:var(--char-3); color:#fff; }

/* ---------- hero (split): promise left, latest episode in a dark panel right ---------- */
.hero { overflow:hidden; background:#fff; padding:56px 0 0; }
.hero-blob { position:absolute; border-radius:50%; pointer-events:none; }
.hero-blob.b1 { width:640px; height:640px; right:-160px; top:-260px; background:radial-gradient(circle, var(--vol-soft) 0%, rgba(255,255,255,0) 70%); }
.hero-blob.b2 { width:560px; height:560px; left:-220px; top:180px; background:radial-gradient(circle, var(--fam-soft) 0%, rgba(255,255,255,0) 70%); }
.hero .wrap { position:relative; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:56px; align-items:center; margin-top:34px; }
.hero-title { font-size:clamp(42px,5.6vw,80px); line-height:1.02; letter-spacing:-.05em; font-weight:800; margin:18px 0 26px; text-wrap:balance; position:relative; z-index:0; }
.hero-title .ul { position:relative; white-space:nowrap; display:inline-block; }
.hero-title .ul::after { content:""; position:absolute; left:1%; right:0; bottom:-.16em; height:.12em; border-radius:999px; background:var(--stripe); transform:rotate(-1.2deg); z-index:-1; }
.hero-sub { font-size:clamp(18px,1.9vw,21px); line-height:1.55; color:var(--ink-2); max-width:36rem; margin:0 0 30px; font-weight:500; text-wrap:pretty; }
.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }
.listen { margin-top:30px; }
.listen-label { font-size:13px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:10px; }
.apps { display:flex; flex-wrap:wrap; gap:8px; }
.app { display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 10px; border-radius:var(--r-pill); background:#fff; box-shadow:inset 0 0 0 1.5px var(--line); color:var(--ink); text-decoration:none; font-weight:700; font-size:14px; transition:box-shadow .15s, transform .15s; }
.app:hover { box-shadow:inset 0 0 0 1.5px var(--ink-3); transform:translateY(-1px); }
.app svg { width:20px; height:20px; flex:none; }
.hero-stripe { height:10px; background:var(--stripe); margin-top:88px; }

.latest { background:var(--char-3); color:#fff; border-radius:28px; padding:26px; box-shadow:0 40px 80px -30px rgba(31,35,40,.5); position:relative; }
.latest-label { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; font-size:13px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#C3C8CD; }
.latest-label .new { background:var(--evt); color:var(--ink); padding:3px 10px; border-radius:var(--r-pill); letter-spacing:.06em; font-size:12px; }
.latest-top { display:grid; grid-template-columns:132px minmax(0,1fr); gap:18px 22px; align-items:center; }
.latest-art { border-radius:16px; overflow:hidden; aspect-ratio:1; background:#33383D; }
.latest-art img { width:100%; height:100%; object-fit:cover; }
.latest .meta { font-size:13.5px; font-weight:700; color:#C3C8CD; }
.latest h2 { font-size:clamp(22px,2.2vw,28px); line-height:1.18; letter-spacing:-.025em; margin:6px 0 12px; font-weight:800; text-wrap:balance; }
.latest .q { grid-column:1 / -1; margin:2px 0 0; padding:14px 16px; background:rgba(255,255,255,.06); border-left:3px solid var(--env); border-radius:10px; font-size:15.5px; line-height:1.5; color:#D4D8DC; font-style:italic; }
.latest .q::before { content:"Question: "; font-style:normal; font-weight:800; color:var(--env); }
.latest .more { margin-top:16px; display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:0; cursor:pointer; color:#fff; font-weight:700; font-size:14.5px; text-decoration:underline; text-decoration-color:var(--disc); text-decoration-thickness:2px; text-underline-offset:4px; }

/* ---------- audio player ---------- */
.player { margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center; }
.pp { width:58px; height:58px; border-radius:50%; border:0; cursor:pointer; background:var(--disc); color:var(--ink); display:grid; place-items:center; box-shadow:0 2px 0 rgba(169,79,12,.45); transition:transform .15s, background .15s; flex:none; }
.pp:hover { background:#F5994F; transform:scale(1.04); }
.pp svg { width:22px; height:22px; }
.pp .i-pause { display:none; } .is-playing .pp .i-play { display:none; } .is-playing .pp .i-pause { display:block; }
.track { display:flex; flex-direction:column; gap:6px; min-width:0; }
.scrub { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px; cursor:pointer; margin:0;
  background:linear-gradient(90deg, var(--disc) 0 var(--p,0%), rgba(255,255,255,.18) var(--p,0%) 100%); }
.scrub::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#fff; border:0; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.scrub::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:#fff; border:0; }
.times { display:flex; justify-content:space-between; font-size:12.5px; font-weight:700; color:#C3C8CD; font-variant-numeric:tabular-nums; }
.pctl { display:flex; gap:6px; }
.pctl button { border:0; cursor:pointer; background:rgba(255,255,255,.1); color:#fff; font-weight:800; font-size:13px; border-radius:var(--r-pill); padding:8px 11px; min-width:44px; }
.pctl button:hover { background:rgba(255,255,255,.2); }

/* ---------- facts strip ---------- */
.facts { display:grid; grid-template-columns:repeat(4,1fr); padding-top:44px; padding-bottom:44px; }
.facts div { padding:0 28px; border-left:1px solid var(--line); }
.facts div:first-child { border-left:0; padding-left:0; }
.facts b { display:block; font-size:clamp(30px,3.6vw,46px); line-height:1; letter-spacing:-.045em; font-weight:800; }
.facts span { display:block; margin-top:8px; font-size:14.5px; font-weight:600; color:var(--ink-3); line-height:1.35; }

/* ---------- episode index ---------- */
.idx-top { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:28px; }
.idx-top .head { margin-bottom:0; }
.search { position:relative; width:min(100%, 320px); }
.search input { width:100%; border:0; background:#fff; box-shadow:inset 0 0 0 1.5px var(--line-2); border-radius:var(--r-pill); padding:12px 18px 12px 44px; font-size:15.5px; font-weight:600; }
.search input:focus { outline:none; box-shadow:inset 0 0 0 2px var(--ink); }
.search svg { position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--ink-3); }
.filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.filters button { border:0; cursor:pointer; display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:var(--r-pill); background:#fff; box-shadow:inset 0 0 0 1.5px var(--line); font-weight:700; font-size:14.5px; color:var(--ink-2); transition:background .15s, color .15s, box-shadow .15s; }
.filters button i { width:10px; height:10px; border-radius:3px; background:var(--a, var(--ink)); flex:none; }
.filters button small { font-size:12.5px; color:var(--ink-3); font-weight:700; }
.filters button:hover { color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink-3); }
.filters button[aria-pressed="true"] { background:var(--char-3); color:#fff; box-shadow:none; }
.filters button[aria-pressed="true"] small { color:#C3C8CD; }
.ep-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
.ep { background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; position:relative; transition:transform .2s, box-shadow .2s; animation:tileIn .45s cubic-bezier(.2,.8,.25,1) both; }
@keyframes tileIn { from { opacity:0; transform:translateY(10px); } }
.ep:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.ep .art { aspect-ratio:1; background:var(--bg); overflow:hidden; }
.ep .art img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.ep:hover .art img { transform:scale(1.04); }
.ep .body { padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.ep .row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.chip { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:var(--r-pill); background:var(--a-soft); color:var(--a-ink); white-space:nowrap; }
.ep .meta { font-size:13px; font-weight:700; color:var(--ink-3); white-space:nowrap; }
.ep h3 { margin:2px 0 0; font-size:18px; line-height:1.25; letter-spacing:-.02em; font-weight:800; text-wrap:balance; }
.ep h3 button { all:unset; cursor:pointer; }
.ep h3 button::after { content:""; position:absolute; inset:0; border-radius:var(--r-lg); }
.ep h3 button:focus-visible::after { outline:3px solid var(--disc); outline-offset:-3px; }
.ep p { margin:0; font-size:14.5px; line-height:1.5; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ep .play { position:relative; z-index:1; margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer; background:var(--bg); color:var(--ink); font-weight:800; font-size:14px; padding:8px 14px 8px 10px; border-radius:var(--r-pill); transition:background .15s; }
.ep .play:hover { background:var(--line); }
.ep .play span.ic { width:26px; height:26px; border-radius:50%; background:var(--disc); display:grid; place-items:center; }
.ep .play svg { width:11px; height:11px; }
.ep.now .play { background:var(--char-3); color:#fff; }
.ep-more { text-align:center; margin-top:36px; }
.ep-empty { text-align:center; padding:48px 0; color:var(--ink-3); font-weight:600; }

/* ---------- ask a question ---------- */
.ask { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; }
.ask .steps { list-style:none; margin:28px 0 34px; padding:0; display:grid; gap:14px; }
.ask .steps li { display:grid; grid-template-columns:36px 1fr; gap:14px; align-items:start; font-size:17px; color:var(--ink-2); }
.ask .steps b.n { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--c); color:var(--ink); font-weight:800; font-size:15px; }
.ask .steps strong { color:var(--ink); }
.qwall { background:var(--char-3); border-radius:30px; padding:30px; box-shadow:0 40px 80px -30px rgba(31,35,40,.5); color:#fff; position:relative; overflow:hidden; }
.qwall::before { content:""; position:absolute; left:0; right:0; top:0; height:6px; background:var(--stripe); }
.qwall h3 { margin:6px 0 18px; font-size:14px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#C3C8CD; }
.qwall ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.qwall li button { all:unset; cursor:pointer; display:grid; grid-template-columns:12px 1fr; gap:14px; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.06); width:100%; box-sizing:border-box; transition:background .15s; }
.qwall li button:hover { background:rgba(255,255,255,.12); }
.qwall li button:focus-visible { outline:3px solid var(--env); outline-offset:2px; }
.qwall li i { width:12px; height:12px; border-radius:3px; margin-top:6px; background:var(--a); }
.qwall li span { font-size:16.5px; line-height:1.4; font-weight:600; color:#fff; }
.qwall li small { display:block; margin-top:4px; font-size:13px; font-weight:700; color:#C3C8CD; }

/* ---------- hosts (founders pattern) ---------- */
.hosts { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center; }
.host-list { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; margin-top:32px; }
.host { background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow); padding:24px; display:flex; align-items:center; gap:16px; position:relative; overflow:hidden; }
.host::before { content:""; position:absolute; left:0; right:0; top:0; height:6px; background:var(--a); }
.host img { width:76px; height:76px; border-radius:50%; object-fit:cover; flex:none; background:var(--bg); }
.host b { display:block; font-size:19px; letter-spacing:-.02em; line-height:1.2; }
.host span { font-size:14.5px; font-weight:600; color:var(--ink-3); }
.credit { margin-top:18px; font-size:14.5px; color:var(--ink-3); font-weight:600; }
.made { background:var(--char-3); color:#fff; border-radius:30px; padding:36px; position:relative; overflow:hidden; }
.made::after { content:""; position:absolute; right:-80px; bottom:-80px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.06); pointer-events:none; }
.made > * { position:relative; z-index:1; }
.made h3 { margin:0 0 18px; font-size:22px; letter-spacing:-.02em; }
.made ul { list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.made li { display:grid; grid-template-columns:12px 1fr; gap:14px; color:#D4D8DC; font-size:16px; }
.made li::before { content:""; width:12px; height:12px; border-radius:3px; margin-top:6px; background:var(--c); }
.made li b { color:#fff; }

/* ---------- sister show ---------- */
.sister { display:grid; grid-template-columns:200px minmax(0,1fr) auto; gap:32px; align-items:center; background:#fff; border-radius:30px; box-shadow:var(--shadow); padding:28px; }
.sister img { border-radius:18px; aspect-ratio:1; object-fit:cover; width:200px; }
.sister h2 { font-size:clamp(26px,3vw,36px); letter-spacing:-.035em; line-height:1.12; margin:10px 0 10px; font-weight:800; text-wrap:balance; }
.sister p { margin:0; color:var(--ink-2); max-width:38rem; }
.sister p b { color:var(--ink); }

/* ---------- final CTA / footer ---------- */
.final { background:var(--char-3); color:#D4D8DC; position:relative; }
.final::before { content:""; position:absolute; left:0; right:0; top:0; height:8px; background:var(--stripe); }
.final .in { max-width:var(--max); margin:0 auto; padding:96px 24px 44px; }
.final .cta { text-align:center; max-width:48rem; margin:0 auto; padding-bottom:72px; border-bottom:1px solid rgba(255,255,255,.12); }
.final h2 { color:#fff; font-size:clamp(36px,5vw,60px); line-height:1.1; letter-spacing:-.04em; margin:0 0 16px; font-weight:800; text-wrap:balance; }
.final .cta > p { margin:0 auto; font-size:19px; color:#C4C9CE; max-width:36rem; }
.signup { display:flex; gap:10px; max-width:30rem; margin:34px auto 0; }
.signup input { flex:1; min-width:0; border:0; border-radius:var(--r-pill); padding:15px 22px; font-size:16px; font-weight:600; background:#fff; color:var(--ink); }
.signup input:focus { outline:3px solid var(--disc); outline-offset:2px; }
.final .btn-primary { color:#fff; }
.final .apps { justify-content:center; margin-top:26px; }
.final .app { background:rgba(255,255,255,.08); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2); }
.final .app:hover { box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55); }
.final .cta-note { color:#C3C8CD; display:block; margin-top:14px; }
.foot { display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-top:40px; font-size:14.5px; }
.foot .cols { display:flex; gap:48px; flex-wrap:wrap; }
.foot .cols div { display:flex; flex-direction:column; gap:8px; }
.foot .cols b { color:#fff; font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; }
.foot a { color:#D4D8DC; text-decoration:none; }
.foot a:hover { color:#fff; text-decoration:underline; }
.foot .gc-logo { color:#fff; }
.foot .gc-logo .rule { background:rgba(255,255,255,.45); }
.fine { margin-top:30px; font-size:13px; color:#C3C8CD; }
.draft-tag { display:inline-block; margin-left:8px; 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); vertical-align:middle; }

/* ---------- episode dialog ---------- */
dialog.sd { display:block; border:0; padding:0; width:min(860px, calc(100vw - 32px)); max-height:calc(100dvh - 40px); border-radius:26px; background:#fff; color:var(--ink); box-shadow:0 40px 100px -20px rgba(0,0,0,.5); overflow:hidden; }
dialog.sd:not([open]) { display:none; }
dialog.sd[open] { animation:dlgIn .28s cubic-bezier(.2,.8,.25,1); }
@keyframes dlgIn { from { opacity:0; transform:translateY(16px) scale(.98); } }
dialog.sd::backdrop { background:rgba(20,23,26,.6); }
.sd-top { background:var(--char-3); color:#E4E7EB; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px 12px 22px; font-size:13.5px; font-weight:700; position:relative; }
.sd-top::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:4px; background:var(--stripe); }
.sd-close { width:40px; height:40px; border-radius:50%; border:0; background:rgba(255,255,255,.1); color:#fff; cursor:pointer; display:grid; place-items:center; flex:none; }
.sd-close:hover { background:rgba(255,255,255,.2); }
.sd-close svg { width:16px; height:16px; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
.sd-body { display:block; max-height:calc(100dvh - 104px); overflow-y:auto; padding:30px; -webkit-overflow-scrolling:touch; }
.sd-head { display:grid; grid-template-columns:180px minmax(0,1fr); gap:24px; align-items:start; }
.sd-head img { border-radius:16px; aspect-ratio:1; object-fit:cover; width:180px; height:auto; }
.sd-head h2 { font-size:clamp(24px,3vw,32px); line-height:1.15; letter-spacing:-.03em; margin:10px 0 8px; font-weight:800; text-wrap:balance; }
.sd-head .meta { font-size:14px; font-weight:700; color:var(--ink-3); }
.sd-head .btn { margin-top:16px; }
.sd-q { margin:28px 0 0; padding:22px 24px; border-radius:var(--r); background:var(--a-soft); font-size:19px; line-height:1.45; font-weight:700; letter-spacing:-.01em; }
.sd-q small { display:block; font-size:12.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--a-ink); margin-bottom:6px; }
.sd-intro { margin:22px 0 0; color:var(--ink-2); font-size:17px; line-height:1.65; }
.sd h4 { margin:26px 0 10px; font-size:13px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.sd ol, .sd ul.res { margin:0; padding:0; list-style:none; display:grid; gap:10px; counter-reset:pt; }
.sd ol li { counter-increment:pt; display:grid; grid-template-columns:30px 1fr; gap:12px; font-size:16.5px; line-height:1.5; }
.sd ol 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; }
.sd ul.res a { display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--disc-ink); }
.sd-foot { margin-top:28px; padding-top:20px; border-top:1px solid var(--line); display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- sticky mini player ---------- */
.mini { position:fixed; left:50%; bottom:14px; z-index:60; width:min(640px, calc(100vw - 24px)); transform:translate(-50%, 160%); visibility:hidden; opacity:0; transition:transform .3s ease, opacity .3s ease, visibility 0s linear .3s;
  background:var(--char-3); color:#fff; border-radius:20px; padding:10px 12px 10px 10px; box-shadow:0 18px 40px -12px rgba(0,0,0,.5);
  display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:12px; align-items:center; }
.mini.show { transform:translate(-50%, 0); visibility:visible; opacity:1; transition:transform .3s ease, opacity .3s ease; }
.mini img { width:48px; height:48px; border-radius:10px; object-fit:cover; }
.mini .t { min-width:0; }
.mini .t b { display:block; font-size:14.5px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini .t span { font-size:12.5px; font-weight:700; color:#C3C8CD; font-variant-numeric:tabular-nums; }
.mini .bar { position:absolute; left:18px; right:18px; bottom:4px; height:3px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden; }
.mini .bar i { display:block; height:100%; width:var(--p,0%); background:var(--disc); }
.mini .pp { width:44px; height:44px; } .mini .pp svg { width:18px; height:18px; }
body.has-mini .final .in { padding-bottom:120px; }

/* reveal on scroll */
.rv { opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.rv.in { opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width:1180px) { .ep-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:1000px) {
  .hero-grid, .ask, .hosts { grid-template-columns:1fr; gap:44px; }
  .hero-stripe { margin-top:64px; }
  .sister { grid-template-columns:140px minmax(0,1fr); }
  .sister img { width:140px; }
  .sister .btn { grid-column:1 / -1; justify-self:start; }
}
@media (max-width:900px) {
  .sec { padding:76px 0; }
  .facts { grid-template-columns:1fr 1fr; gap:28px 0; }
  .facts div:nth-child(3) { border-left:0; padding-left:0; }
  .ep-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
}
@media (max-width:600px) {
  .wrap { padding:0 18px; }
  .sec { padding:64px 0; }
  .hero { padding-top:28px; }
  .hero-grid { margin-top:24px; }
  .hero-ctas .btn { width:100%; }
  .latest { padding:18px; border-radius:24px; }
  .latest-top { grid-template-columns:96px minmax(0,1fr); gap:14px; }
  .latest h2 { font-size:19px; margin-bottom:0; }
  .latest .q { grid-column:1 / -1; }
  .player { grid-template-columns:auto minmax(0,1fr); }
  .pctl { grid-column:1 / -1; justify-content:flex-end; }
  .facts div { padding:0 14px; }
  .facts span { font-size:13.5px; }
  .search { width:100%; }
  .filters { flex-wrap:nowrap; overflow-x:auto; margin-left:-18px; margin-right:-18px; padding:0 18px 4px; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg, #000 88%, transparent); mask-image:linear-gradient(90deg, #000 88%, transparent); }
  .filters::-webkit-scrollbar { display:none; }
  .filters button { flex:none; }
  .ep .body { padding:14px 14px 16px; }
  .ep h3 { font-size:16px; }
  .ep p { display:none; }
  .ep .row { flex-wrap:wrap; }
  .ep .play { font-size:13px; }
  .host-list { grid-template-columns:1fr; }
  .made, .qwall { padding:26px 22px; }
  .sister { grid-template-columns:1fr; padding:22px; }
  .sister img { width:120px; }
  .signup { flex-direction:column; }
  .signup .btn { width:100%; }
  .final .in { padding-top:76px; }
  .sd-body { padding:22px 18px; }
  .sd-head { grid-template-columns:1fr; }
  .sd-head img { width:120px; }
  .h2 { letter-spacing:-.03em; }
}
@media (max-width:360px) {
  .ep-grid { grid-template-columns:1fr; }
  .age-switch a { padding:7px 11px; font-size:13.5px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } .rv { opacity:1; transform:none; } }

/* listener attribution */
.latest .q cite, .sd-q cite { display:block; margin-top:6px; font-style:normal; font-weight:700; font-size:.82em; }
.latest .q cite { color:#C3C8CD; }
.sd-q cite { color:var(--ink-2); }


/* show switcher: short labels on small phones */
@media (max-width:460px) { .age-switch .lg { display:none; } .age-switch a { padding:8px 18px; font-size:14px; } }

/* QA pass: mobile rhythm + footer */
.sister { box-shadow:var(--shadow), inset 0 0 0 1px var(--line); }
@media (max-width:760px) {
  .facts { padding-top:36px; padding-bottom:36px; }
  .foot .cols { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px 16px; width:100%; }
  .foot .cols a { font-size:13.5px; }
}