/* Frequency episode pages (podcast/build.py): the legal pages' chrome on ink,
   plus the home page's player, chapters, questions, the video and the transcript. */
:root{--line-soft:rgba(198,162,83,.16)}
.ep .eyebrow a{color:inherit}
.ep .eyebrow a:hover{color:var(--gold-200)}
.ep h1{font-size:clamp(30px,6vw,44px);line-height:1.16}
.by{margin:18px 0 0;font-size:15px;line-height:1.7;color:var(--text-muted)}
.draft{position:sticky;top:0;z-index:6;padding:7px 16px;background:#3b2c12;color:var(--gold-200);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;text-align:center}

/* The player: the home page's ring and line; it rides the top of the page while it plays */
.player{display:flex;align-items:center;gap:16px;margin-top:40px;text-align:left}
.player.on{position:sticky;top:0;z-index:4;margin-left:-26px;margin-right:-26px;padding:12px 26px;background:rgba(11,9,8,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft)}
.pring{flex:none;width:52px;height:52px;border:1px solid var(--gold-300);border-radius:50%;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .2s var(--ease-out)}
.pring:hover{background:rgba(232,205,139,.08)}
.pring i{display:block;width:0;height:0;border-left:10px solid var(--gold-300);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.pring.playing i{width:10px;height:12px;border:0;border-left:3px solid var(--gold-300);border-right:3px solid var(--gold-300);margin-left:0}
.pmeta{flex:1;min-width:0}
.pk{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-300)}
.pbar{display:flex;align-items:center;gap:10px;margin-top:10px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:var(--text-faint)}
.pline{flex:1;position:relative;height:13px;cursor:pointer}
.pline::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--line-soft)}
.pline i{position:absolute;left:0;top:6px;height:1px;width:0;background:var(--gold-300)}
.pmsg{margin:14px 0 0;font-size:15px;color:var(--text-muted)}
.plinks{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:26px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.plinks a{color:var(--text-muted)}
.plinks a:hover{color:var(--gold-300)}

/* Sections */
.sec{margin-top:72px}
.k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-300)}
.ts{flex:none;background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:var(--gold-300);text-align:left;transition:color .2s var(--ease-out)}
.ts:hover{color:var(--gold-200)}
.chap{list-style:none;margin:18px 0 0;padding:0}
.chap li{display:flex;align-items:baseline;gap:18px;padding:11px 0;border-top:1px solid var(--line-soft);font-size:15.5px;line-height:1.55;color:var(--text)}
.chap li:last-child{border-bottom:1px solid var(--line-soft)}
.chap .ts{min-width:48px}
.qa{margin-top:40px}
.qa h2{margin:0;font-family:var(--fd2);font-weight:400;font-size:22px;line-height:1.35;letter-spacing:.02em;color:var(--text-strong)}
.qa blockquote{margin:16px 0 0;padding:0 0 0 20px;border-left:1px solid var(--gold-a32);font-size:15.5px;line-height:1.9;color:var(--text)}
.qa blockquote p{margin:0}
.qa .at{margin:10px 0 0 20px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}

/* The video loads only on a click */
.yt{position:relative;margin-top:18px;aspect-ratio:16/9;background:#000;border:1px solid var(--line-soft);overflow:hidden}
.yt a,.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.8;transition:opacity .3s var(--ease-out)}
.yt a:hover img{opacity:.95}
.ytp{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border:1px solid var(--gold-300);border-radius:50%;background:rgba(11,9,8,.55)}
.ytp::after{content:"";position:absolute;left:50%;top:50%;margin:-8px 0 0 -4px;border-left:13px solid var(--gold-300);border-top:8px solid transparent;border-bottom:8px solid transparent}

/* The transcript: in the page's own text, folded */
.tr{margin-top:18px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.tr summary{display:flex;align-items:center;gap:12px;padding:16px 0;cursor:pointer;list-style:none;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-muted)}
.tr summary::-webkit-details-marker{display:none}
.tr summary::before{content:"+";font-size:14px;color:var(--gold-300);width:12px}
.tr[open] summary::before{content:"–"}
.tr summary:hover{color:var(--gold-300)}
.tp{padding:8px 0 20px}
.tp p{display:grid;grid-template-columns:52px 1fr;gap:0 14px;margin:0 0 18px;font-size:15.5px;line-height:1.85;color:var(--text)}
.tp .ts{align-self:start;padding-top:5px}

/* Episode lists */
.eps{list-style:none;margin:18px 0 0;padding:0}
.eps li a{display:block;padding:24px 0;border-top:1px solid var(--line-soft);color:var(--text)}
.eps li:last-child a{border-bottom:1px solid var(--line-soft)}
.eps .m{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
.eps .t{display:block;margin-top:10px;font-family:var(--fd2);font-size:22px;line-height:1.3;letter-spacing:.02em;color:var(--text-strong);transition:color .2s var(--ease-out)}
.eps .s{display:block;margin-top:8px;font-size:15.5px;line-height:1.7;color:var(--text-muted)}
.eps li a:hover .t{color:var(--gold-200)}

@media (max-width:600px){.tp p{grid-template-columns:1fr}.tp .ts{padding:0}}
@media (min-width:601px){.player.on{margin-left:-48px;margin-right:-48px;padding:14px 48px}}
.draft ~ #cc .player.on{top:29px}

/* The weathered look on these pages (Michael, October 4, 2026: the ground, the gold and the cover, no circuit):
   the Frequency cover's plaster in the leather's place and the gold in the empty places (assets/paper.css and
   assets/paper.js, the landing pages' files, copied unchanged), the show's cover at the head. */
.pod .leather{background-image:none}
.pcover{display:block;width:min(100%,340px);height:auto;margin:0 0 44px;border:1px solid var(--gold-a32)}
.pcover.sm{width:148px;margin-bottom:34px}
@media (min-width:601px){.pcover{width:420px;margin-bottom:56px}.pcover.sm{width:180px;margin-bottom:44px}}

/* The played part of the player's line, drawn as a path that moves while the episode plays (assets/podcast.js;
   Michael chose this line on October 5, 2026). .wv is added to the line by the script; the 17px height holds the
   wave so nothing moves when playback starts. */
.pline.wv{height:17px}
.pline.wv::before{top:8px}
.pline.wv i{display:none}
.pwave{position:absolute;left:0;top:0;width:100%;height:17px;overflow:visible;pointer-events:none}
.pwave path{fill:none;stroke:var(--gold-300);stroke-width:1;stroke-linejoin:round;stroke-linecap:round}
