/* Podcast — a normal scrolling document, like every other page on the site.
   There are no inner scroll containers: the page scrolls, nothing else does.

   No cards, no photograph, no glass. Per DESIGN.md the structuring is hairline
   rules and whitespace: no boxes-as-cards, no shadows, no rounded corners,
   nothing floating on a fill. Type carries the page. Tokens all come from
   styles.css; nothing here introduces a colour, a font or a radius. */

body.t-podcast{background:var(--paper);color:var(--ink2);overflow-x:hidden}
/* styles.css paints a fixed photograph and a scrim on every page. Not here. */
body.t-podcast::before,body.t-podcast::after{content:none;display:none}
/* the shared buttons pick up the glass layer's fill and shadow — flatten them */
body.t-podcast .btn.ghost{background:transparent;border-color:var(--line);}
body.t-podcast .btn.ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
body.t-podcast .btn.solid{}
body.t-podcast .btn.solid:hover{transform:none;background:var(--accent)}

.pod-wrap{max-width:var(--max);margin:0 auto}
.mono{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase}
.eyebrow{display:block;color:var(--accent);margin-bottom:20px}

/* ---- top bar ---- */
.pod-top{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:16px;
  padding:0 var(--pad);height:62px;background:var(--paper);border-bottom:1px solid var(--line)}
.pod-top .home{font-family:var(--serif);font-size:1.5rem;color:var(--ink);letter-spacing:-.02em;line-height:1}
.pod-top .sep{width:1px;height:18px;background:var(--line)}
.pod-top .show{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--ink)}
.pod-top .grow{flex:1}
.pod-top .dim{color:var(--mut)}
.pod-top a.dim:hover,.pod-nav a:hover{color:var(--accent)}
.pod-nav{display:flex;gap:22px;color:var(--mut)}
@media(max-width:820px){.pod-nav{display:none}}

/* ---- hero ---- */
.pod-hero{max-width:var(--max);margin:0 auto;padding:clamp(56px,9vw,132px) var(--pad) clamp(40px,6vw,76px)}
.pod-hero h1{font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(2.6rem,7vw,5.6rem);line-height:1;letter-spacing:-.024em}
.pod-hero h1 em{font-style:italic}
.pod-hero .lede{margin-top:26px;color:var(--ink2);font-size:clamp(1.02rem,1.5vw,1.18rem);
  line-height:1.6;max-width:56ch}
.pod-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.btn .yt{width:15px;height:15px;fill:currentColor;flex:none}

/* ---- sections ---- */
.pod-sec{padding:clamp(48px,7vw,96px) var(--pad);border-top:1px solid var(--line);scroll-margin-top:62px}
.pod-sec h2{font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.04;letter-spacing:-.02em;max-width:18ch}
.pod-sec h2 em{font-style:italic}
.pod-sec .lede{margin-top:24px;color:var(--ink2);font-size:clamp(1rem,1.35vw,1.12rem);
  line-height:1.62;max-width:60ch}
.pod-sec .para{margin-top:22px;color:var(--mut);font-size:.98rem;line-height:1.68;max-width:66ch}
/* the sentence that carries season one into season two */
.pod-sec .bridge{margin-top:34px;padding-top:28px;border-top:1px solid var(--line);
  font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.26;
  color:var(--ink);max-width:44ch}
.pod-sec .bridge em{font-style:italic;color:var(--accent)}

.pod-stats{display:flex;flex-wrap:wrap;gap:clamp(28px,6vw,86px);margin-top:40px;padding:26px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pod-stats .v{display:block;font-family:var(--serif);font-size:clamp(2rem,4vw,3.2rem);
  color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.pod-stats .k{display:block;margin-top:10px;color:var(--faint)}

.pod-topics{list-style:none;margin-top:44px;border-top:1px solid var(--line)}
.pod-topics li{display:grid;grid-template-columns:minmax(0,18ch) minmax(0,1fr);gap:clamp(16px,3vw,52px);
  padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.pod-topics .t{font-size:1rem;font-weight:500;color:var(--ink)}
.pod-topics .d{font-size:.97rem;color:var(--mut);line-height:1.6;max-width:62ch}
@media(max-width:640px){.pod-topics li{grid-template-columns:1fr;gap:6px}}

/* ---- the guest marquee ----
   The track holds two identical copies of the strip and slides by exactly half its
   width, so the loop has no seam. It travels left to right, which is why the
   animation runs from -50% to 0 rather than the other way round. */
.pod-marq{overflow:hidden;padding:26px 0 30px;border-top:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.pod-marq-track{display:flex;gap:clamp(18px,2.4vw,38px);width:max-content;
  animation:pod-marq 78s linear infinite}
@keyframes pod-marq{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.pod-marq:hover .pod-marq-track,.pod-marq:focus-within .pod-marq-track{animation-play-state:paused}

.pod-tile{flex:none;width:168px;display:block}
.pod-tile .ph{position:relative;display:block;overflow:hidden;background:var(--surface2)}
.pod-tile .ph img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  filter:grayscale(1) contrast(1.04);opacity:.72;
  transition:filter .3s var(--e),opacity .3s var(--e)}
.pod-tile:hover .ph img{filter:none;opacity:1}
/* the headshot, where the old site had one, tucked into the corner of the still */
.pod-tile .ph img.face{position:absolute;left:6px;bottom:6px;width:30px;height:30px;
  aspect-ratio:1;border-radius:50%;filter:none;opacity:1}
.pod-tile .nm{display:block;margin-top:10px;font-size:.86rem;font-weight:500;color:var(--ink2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.pod-tile .co{display:block;margin-top:2px;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pod-tile:hover .nm{color:var(--accent)}

/* ---- the archive ---- */
.pod-head .pod-chips{display:flex;flex-wrap:wrap;gap:18px 22px;margin-top:32px}
/* plain text, underlined when live — a row of pills is a row of cards */
.pod-chip{cursor:pointer;background:none;border:0;padding:2px 0;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s}
.pod-chip:hover{color:var(--ink2)}
.pod-chip.on{color:var(--ink);border-bottom-color:var(--accent)}

.pod-eps{margin-top:clamp(34px,5vw,60px);border-top:1px solid var(--line)}
.ep{display:grid;grid-template-columns:66px 240px minmax(0,1fr) auto;gap:clamp(18px,2.6vw,40px);
  align-items:start;padding:26px 0;border-bottom:1px solid var(--line);
  scroll-margin-top:82px;transition:background .4s var(--e)}
.ep .ep-n{color:var(--faint);padding-top:3px;transition:color .2s}
.ep-still{position:relative;display:block;overflow:hidden;background:var(--surface2)}
.ep-still img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  filter:grayscale(1);opacity:.8;transition:filter .3s var(--e),opacity .3s var(--e)}
.ep-still .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);
  width:44px;height:44px;border-radius:50%;background:var(--paper);display:grid;place-items:center;
  opacity:0;transition:opacity .25s var(--e),transform .25s var(--e)}
.ep-still .play svg{width:18px;height:18px;fill:var(--ink);margin-left:2px}
.ep:hover .ep-still img{filter:none;opacity:1}
.ep:hover .ep-still .play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.ep:hover .ep-n{color:var(--accent)}
.ep-t{display:block;font-family:var(--serif);font-size:clamp(1.3rem,2.1vw,1.85rem);
  line-height:1.14;letter-spacing:-.012em;color:var(--ink);transition:color .2s}
.ep:hover .ep-t{color:var(--accent)}
.ep-g{display:flex;align-items:center;gap:9px;margin-top:11px;font-size:.9rem;color:var(--ink2)}
.ep-g img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
.ep-d{display:block;margin-top:12px;font-size:.93rem;line-height:1.6;color:var(--mut);max-width:62ch}
.ep-meta{color:var(--faint);text-align:right;line-height:2;white-space:nowrap;padding-top:4px}
/* the row Play something landed on, briefly */
.ep.lit{background:var(--surface)}

@media(max-width:1040px){
  .ep{grid-template-columns:56px 190px minmax(0,1fr);gap:22px}
  .ep-meta{grid-column:2 / -1;text-align:left;line-height:1.9;margin-top:-6px}
}
@media(max-width:680px){
  .ep{grid-template-columns:1fr;gap:14px;padding:24px 0}
  .ep .ep-n{padding-top:0}
  .ep-still{max-width:320px}
  .ep-meta{grid-column:auto;margin-top:0}
  .ep-d{display:none}
}

/* ---- about: ruled columns, not cards ---- */
.pod-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;
  border-top:1px solid var(--line)}
.pod-cols .col{padding:30px clamp(22px,2.6vw,38px);border-left:1px solid var(--line)}
.pod-cols .col:first-child{border-left:0;padding-left:0}
.pod-cols .col h3{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:1.6rem;margin-bottom:13px}
.pod-cols .col p{color:var(--mut);font-size:.96rem;line-height:1.62}
@media(max-width:860px){
  .pod-cols{grid-template-columns:1fr}
  .pod-cols .col{border-left:0;border-bottom:1px solid var(--line);padding-left:0;padding-right:0}
}
.pod-pitch{margin-top:clamp(38px,5vw,64px);padding-top:30px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.pod-pitch p{font-family:var(--serif);font-style:italic;color:var(--ink);
  font-size:clamp(1.25rem,2.6vw,1.9rem);line-height:1.22;max-width:34ch}

/* ---- footer ---- */
.pod-foot{border-top:1px solid var(--line);padding:30px var(--pad) 40px}
.pod-foot .pod-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.pod-foot .home{font-family:var(--serif);font-size:1.4rem;color:var(--ink);letter-spacing:-.02em}
.pod-foot .grow{flex:1}
.pod-foot nav{display:flex;gap:22px;color:var(--mut)}
.pod-foot nav a:hover{color:var(--accent)}
.pod-foot .dim{color:var(--faint)}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .pod-marq{overflow-x:auto}
}