/* /podcast/ and /en/podcast/ in the split stage (2026-11-01). Loads on top of home-split.css, which is the
   world (tokens, the seam, the split layout, type, controls); everything here is this page only.
   One table cut by the seam: what was written sits on paper (date, title, description), what is read aloud
   sits on ink (length, player). Months are row groups. Phones: each row is a paper block with an ink bar. */

/* ------------------------------------------------------------------------------ the page's scale -- */
.page-pod main{
  --t-title:1.125rem;
  --t-small:clamp(.9375rem,.9rem + .15vw,1.0625rem);
  --t-micro:.875rem;
  --lh-small:1.55;
  --edge:3rem;                         /* the air between any content and the seam, on both sides */
}
.page-pod ::selection{background:rgba(37,99,235,.2)}
.page-pod .side--ink ::selection,.page-pod .pd-play ::selection,.page-pod .pd-len::selection{background:rgba(96,165,250,.38);color:#fff}
.page-pod :focus-visible{outline:2px solid var(--paper-accent);outline-offset:3px;border-radius:2px}
.page-pod .side--ink :focus-visible,.page-pod .pd-play :focus-visible{outline-color:var(--ink-accent)}
.pd-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the flowing sections paint above the ink ground */
.pd-hero,.pd-list{position:relative;z-index:1}

/* ------------------------------------------------------------------------------------- the hero -- */
.pd-hero{grid-template-areas:"h1 h1" "paper ink";align-items:start;
  padding-top:0;padding-bottom:clamp(2.2rem,5.5vh,3.75rem)}
.pd-hero .hero-h1{grid-area:h1;display:grid;grid-template-columns:1fr 1fr;column-gap:calc(var(--edge) * 2);
  align-items:end;margin:0;padding:clamp(1.6rem,4.2vh,3rem) var(--gut) 0;font-size:var(--t-display);
  font-weight:800;line-height:1.04;letter-spacing:-.032em;text-wrap:balance;max-width:none}
.pd-hero .h1-a{justify-self:end;text-align:right;color:var(--paper-text)}
.pd-hero .h1-b{color:var(--ink-text)}
.pd-hero .side--paper{grid-area:paper}
.pd-hero .side--ink{grid-area:ink}
.pd-hero .side-body{padding-top:clamp(1.1rem,2.6vh,1.75rem)}
/* both halves hug the seam, as the two halves of the headline do */
.pd-intro{margin-left:auto;margin-right:calc(var(--edge) - var(--gut));max-width:34rem}
.pd-sub{margin-left:calc(var(--edge) - var(--gut));max-width:34rem}
.pd-intro>*+*,.pd-sub>*+*{margin-top:.85rem}
.pd-intro .sh-lede{font-size:var(--t-body)}
.pd-facts{font-size:var(--t-small);line-height:var(--lh-small);font-weight:600;color:var(--paper-text);
  font-variant-numeric:tabular-nums}
.pd-intro .sh-note a{color:var(--paper-accent);text-underline-offset:.18em}
.pd-intro .sh-note a:hover{color:var(--paper-accent-hover)}

.pd-sub h2{font-size:clamp(1.3rem,1rem + .7vw,1.6rem);line-height:1.2;letter-spacing:-.02em;color:var(--ink-text)}
.pd-sub>p.sh-note{color:var(--ink-soft)}
.pd-feed{display:flex;flex-wrap:wrap;gap:.6rem;align-items:stretch;margin-top:.7rem!important}
.pd-url{flex:1 1 21rem;min-width:0;font:500 var(--t-small)/1.2 var(--sc-font-text);color:var(--ink-text);
  background:var(--ink-surface);border:1px solid var(--hair-ink);border-radius:var(--r-s);
  padding:.8rem .9rem;text-overflow:ellipsis}
.pd-url:focus-visible{outline:2px solid var(--ink-accent);outline-offset:2px}
.pd-copy{flex:none;cursor:pointer}
.pd-copy:active{transform:translateY(1px)}
.pd-status{min-height:1.4em;margin-top:.45rem!important;font:600 var(--t-micro)/1.4 var(--sc-font-text);color:var(--ink-accent)}
.pd-status:empty{margin-top:0!important}

/* ---------------------------------------------------------------------------------- the table -- */
/* home-split.css zeroes the block padding of plain sections; the list keeps a foot before the ink footer */
.page-pod main>.pd-list{padding-top:0;padding-bottom:clamp(3rem,8vh,5rem)}
/* site.css dresses every table as a card (white fill, grey header cells, row rules): none of that here,
   the two grounds behind the table are the design */
.pd-table{width:100%;border-collapse:collapse;table-layout:fixed;background:transparent;font-size:inherit}
.pd-col-ep{width:50%}
.pd-col-len{width:calc(var(--edge) + 4.5rem)}
.pd-table th,.pd-table td{padding:0;text-align:left;vertical-align:top;background:transparent;border:0}
.pd-table th{font-weight:inherit;font-size:inherit}     /* td keeps its own class fonts (.pd-len, .pd-mt) */

/* the paper cell: its content box ends --edge before the seam, like the hero text above it */
.pd-ep{padding-left:var(--gut)!important;padding-right:var(--edge)!important}
.pd-ep>span,.pd-ep-in{display:block;max-width:34rem;margin-left:auto}
.pd-len{padding-left:var(--edge)!important;padding-right:1rem!important}
.pd-play{padding-right:var(--gut)!important}

.pd-table thead th{padding-top:.2rem!important;padding-bottom:.7rem!important;
  font:600 var(--t-micro)/1.3 var(--sc-font-text);letter-spacing:0}
.pd-table thead .pd-ep{color:var(--paper-soft)}
.pd-table thead .pd-len,.pd-table thead .pd-play{color:var(--ink-soft)}

/* a month: its name on paper, its count and listening time on ink */
.pd-month th,.pd-month td{padding-top:clamp(2rem,4.5vh,2.75rem)!important;padding-bottom:.85rem!important}
.pd-month th span{font:800 clamp(1.25rem,1.05rem + .5vw,1.5rem)/1.2 var(--sc-font-display);letter-spacing:-.018em;
  color:var(--paper-text)}
.pd-mt{padding-left:var(--edge)!important;font:600 var(--t-small)/1.9 var(--sc-font-text);color:var(--ink-soft);
  font-variant-numeric:tabular-nums}
thead+tbody .pd-month th,thead+tbody .pd-month td{padding-top:1rem!important}

/* an episode */
.pd-table tbody tr:not(.pd-month)>*{padding-top:1.25rem;padding-bottom:1.35rem}
.pd-table tbody tr:not(.pd-month)>.pd-ep{border-top:1px solid var(--hair-paper)}
.pd-table tbody tr:not(.pd-month)>:is(.pd-len,.pd-play){border-top:1px solid var(--hair-ink)}
.pd-ep-in time{display:block;font:500 var(--t-micro)/1.3 var(--sc-font-text);color:var(--paper-soft);
  font-variant-numeric:tabular-nums}
.pd-ep-in h3{margin-top:.35rem;font-size:var(--t-title);line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
.pd-ep-in h3 a{color:var(--paper-text);text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size 220ms var(--sc-ease-out)}
.pd-ep-in h3 a:hover{color:var(--paper-accent);background-size:100% 1.5px}
.pd-ep-in p{margin-top:.4rem;font-size:var(--t-small);line-height:var(--lh-small);color:var(--paper-soft);
  max-width:34rem;text-wrap:pretty}

/* the ink side of a row: the length, set level with the player */
.pd-len{font:700 var(--t-title)/40px var(--sc-font-text);color:var(--ink-text);font-variant-numeric:tabular-nums;
  padding-top:calc(1.25rem + 1.2rem)!important}
.pd-play{padding-top:calc(1.25rem + 1.2rem)!important}
.pd-play audio{display:block;width:100%;max-width:30rem;height:40px;color-scheme:dark;border-radius:var(--r-s)}
.pd-play audio::-webkit-media-controls-enclosure{border-radius:var(--r-s);background:var(--ink-surface)}
.pd-play audio::-webkit-media-controls-panel{background:var(--ink-surface)}

/* playing: the row's title and length take the accent of their ground */
.pd-table tr.is-playing .pd-ep-in h3 a{color:var(--paper-accent)}
.pd-table tr.is-playing .pd-len{color:var(--ink-accent)}

/* dark theme: the paper half is the lighter dark; the player panel follows it */
html[data-theme="dark"] .pd-url{background:var(--ink-surface)}

/* ----------------------------------------------------------------- laptops: a little less air -- */
@media (min-width:761px) and (max-width:1100px){
  .page-pod main{--edge:2rem}
  .pd-col-len{width:calc(var(--edge) + 4rem)}
}

/* ================================================== phone: paper rows, each with an ink bar ==
   The ground is gone below 761px (home-split.css): the page is paper, the subscribe block an ink block
   with the hand-drawn edge, and every episode a paper block whose length and player sit on an ink bar. */
@media (max-width:760px){
  .page-pod main{--edge:0px}
  .pd-hero{display:block;padding-bottom:0;background:var(--paper)}
  .pd-hero .hero-h1{display:block;padding:1.4rem var(--gut) 0;font-size:1.75rem}
  .pd-hero .h1-a,.pd-hero .h1-b{display:inline;text-align:left;color:var(--paper-text)}
  .pd-hero .side--paper .side-body{padding:.9rem 0 1.6rem}
  .pd-intro,.pd-sub{margin:0;max-width:none}
  .pd-hero .side--ink .side-body{padding:2.4rem 0 1.9rem}
  .pd-feed{flex-wrap:wrap}
  .pd-url{flex-basis:100%}
  .pd-copy{flex:1}

  .pd-table,.pd-table tbody{display:block}
  .pd-table thead,.pd-table colgroup{display:none}
  .pd-table tr{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ep ep" "len play";
    padding-inline:var(--gut)}
  .pd-table tr>*{display:block}
  .pd-ep{grid-area:ep;padding-inline:0!important}
  .pd-ep>span,.pd-ep-in{max-width:none;margin:0}
  .pd-table tbody tr:not(.pd-month)>*{padding-top:0;padding-bottom:0}
  .pd-table tbody tr:not(.pd-month){padding-bottom:1.35rem}
  .pd-table tbody tr:not(.pd-month)>.pd-ep{padding-top:1.15rem;padding-bottom:.8rem;border-top:1px solid var(--hair-paper)}
  /* the bar takes the player's own panel colour, so length and controls read as one ink object */
  .pd-table tbody tr:not(.pd-month)>:is(.pd-len,.pd-play){border-top:0;background:var(--ink-surface)}
  .pd-len{grid-area:len;padding:.35rem .25rem .35rem .85rem!important;border-radius:var(--r-m) 0 0 var(--r-m);
    font-size:1rem;line-height:40px}
  .pd-play{grid-area:play;padding:.35rem .4rem .35rem .5rem!important;border-radius:0 var(--r-m) var(--r-m) 0}
  .pd-play audio{max-width:none}
  .pd-ep-in p{max-width:none}

  .pd-month{display:flex!important;align-items:baseline;justify-content:space-between}
  .pd-month th,.pd-month td{padding:2.1rem 0 .75rem!important}
  .pd-month{flex-wrap:wrap;column-gap:1rem;row-gap:0}
  .pd-month th span{font-size:1.125rem}
  .pd-month th,.pd-month td{white-space:nowrap}
  .pd-mt{font-size:.875rem}
  .pd-mt{color:var(--paper-soft);text-align:right;line-height:1.3}
  .pd-table tbody:first-of-type .pd-month th,.pd-table tbody:first-of-type .pd-month td{padding-top:1.6rem!important}
}