/* Podcasts list (from the podcast showcase): artwork, show, the episodes we worked on, a hairline player. Scoped to .pods. */
.pods{--bg:var(--cream);--line:#dccfb4;--brass-2:#c9a15a}
.pods .list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:40px 32px}
.pods .item{min-width:0}
.pods .art{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:4px;overflow:hidden;background:#000;border:0;padding:0;cursor:pointer;
  box-shadow:0 18px 30px -22px rgba(31,21,17,.6);transition:box-shadow .25s,transform .25s}
.pods .art img{width:100%;height:100%;object-fit:cover;display:block}
.pods .art:hover{transform:translateY(-2px)}
.pods .art:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.pods .item.on .art{box-shadow:0 0 0 2px var(--brass-2),0 18px 30px -22px rgba(31,21,17,.6)}
.pods .show{font-family:var(--head);font-weight:400;font-size:1.35rem;line-height:1.15;margin:18px 0 4px;text-wrap:balance}
.pods .ep{margin:0;color:var(--muted);font-size:.95rem}
.pods .player{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.pods .play{width:38px;height:38px;border-radius:50%;border:1px solid var(--ink);background:transparent;cursor:pointer;padding:0;color:var(--ink);display:grid;place-items:center}
.pods .play svg{width:14px;height:14px;fill:currentColor}
.pods .play .pause{display:none}
.pods .item.on .play .pause{display:block}
.pods .item.on .play .tri{display:none}
.pods .item.on .play{background:var(--ink);color:var(--bg)}
.pods .play:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.pods .bar{position:relative;height:20px;cursor:pointer;min-width:0}
.pods .bar::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.pods .bar i{position:absolute;left:0;top:50%;height:2px;margin-top:-1px;width:var(--p,0%);background:var(--brass)}
.pods .time{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.pods .links{display:flex;gap:14px;margin-top:10px;font-size:.85rem}
.pods .links a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.pods .links a:hover{color:var(--ink);border-color:var(--ink)}
.pods .eps-more{margin-top:12px;background:none;border:0;padding:0;font:inherit;font-size:.88rem;color:var(--ink);cursor:pointer;border-bottom:1px solid var(--line)}
.pods .eps-more:hover{border-color:var(--ink)}
.pods .eps-more::after{content:" \2193";color:var(--muted)}
.pods .eps-more[aria-expanded="true"]::after{content:" \2191"}
.pods .eps[hidden]{display:none}
.pods .eps{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line)}
.pods .eps li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.pods .eps .mini{width:26px;height:26px;border-radius:50%;border:1px solid var(--muted);background:transparent;color:var(--ink);cursor:pointer;padding:0;display:grid;place-items:center}
.pods .eps .mini svg{width:10px;height:10px;fill:currentColor}
.pods .eps li.on .mini{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pods .eps li.on .t{color:var(--ink);font-weight:500}
.pods .eps .t{color:var(--muted);min-width:0}
.pods .art.video{aspect-ratio:16/9;cursor:default}
.pods .art.video:hover{transform:none}
.pods .art iframe{width:100%;height:100%;border:0;display:block}
.pods .eps a{color:var(--muted);font-size:.82rem;text-decoration:none;border-bottom:1px solid var(--line);white-space:nowrap}
.pods .watch{color:var(--muted)}
.pods .msg{font-size:.82rem;color:var(--muted);margin:8px 0 0}
@media (max-width:560px){.pods .list{grid-template-columns:1fr;gap:28px}
.pods .item{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto 1fr;gap:0 16px;align-items:start}
.pods .show{margin-top:0;font-size:1.15rem}
.pods .player,.pods .eps,.pods .eps-more,.pods .links,.pods .msg{grid-column:1 / -1;justify-self:start}
.pods .player,.pods .eps{justify-self:stretch}
.pods .item .art{grid-row:span 2}
.pods .eps li{padding:10px 0}}
.pods .list{margin-top:28px}
/* line the cards up across a row: every card shares the same row tracks (artwork, title, episode, player, links,
   episode list), so titles, players and links sit level whatever their length */
@media (min-width:561px){
  .pods .list{row-gap:0}
  .pods .item{display:grid;grid-template-rows:subgrid;grid-row:span 7;padding-bottom:44px;align-content:start}
  .pods .art{grid-row:1}.pods .show{grid-row:2;align-self:end}.pods .ep{grid-row:3}.pods .player{grid-row:4;align-self:start}
  .pods .links{grid-row:5;align-self:start}.pods .eps-more{grid-row:6;justify-self:start;align-self:start}.pods .eps{grid-row:7}.pods .msg{grid-row:7}
}
.home-pods{margin-top:44px}
.home-pods .list{margin-top:18px}