/* ============================================================
   Written blog posts (blog/*.html without the vb-page body class)
   Loaded AFTER /assets/site-v2.css. Replaces the five inline <style>
   copies the posts used to carry (scripts/migrate_posts_v2.py).
   Video posts use /assets/video-blog.css instead.

   Design system v2: white canvas, a 720px reading column, hairlines
   over boxes, one 6px radius, blue for fills and dots only (blue text
   is --link). The page ends on the shared .closing navy band.

   The post, top to bottom:
     .crumbs . .tag-chip (dot eyebrow) . h1 . .post-meta
     .player (YouTube) or .cover-hero (show cover, unboxed; .playable
       swaps in .player / .player-embed on click) . .listen (text links)
     .takeaways (TLDR / key takeaways, a dot list) . .prose
     .guestcard (the 1px card) . .post-back
     .closing.post-close (full-bleed navy band, two doors)
   ============================================================ */

/* the reading column */
.article{max-width:calc(var(--read) + 2 * var(--gutter));margin-inline:auto;padding:var(--s5) var(--gutter) var(--s11)}
.article .crumbs{display:block;line-height:1.6}
.article .crumbs a{display:inline;padding-block:12px}

/* tag chip -> the dot eyebrow */
.tag-chip{display:flex;align-items:center;gap:10px;width:max-content;max-width:100%;margin:var(--s6) 0 var(--s5);
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-cap);line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.tag-chip::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.article h1{font-size:clamp(40px,4.4vw,56px);line-height:1.04}
.post-meta{margin-top:var(--s4);font-size:var(--fs-s);line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.post-meta span + span::before{content:"\00b7";margin-inline:10px}

/* the episode: video embed, or the show cover (unboxed) */
.player{margin-top:var(--s7);aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--panel)}
.player iframe{display:block;width:100%;height:100%;border:0}
.player-embed{margin-top:var(--s7);border-radius:var(--r);overflow:hidden}
.player-embed iframe{display:block;width:100%;border:0;background:transparent}
.cover-hero{display:flex;align-items:center;gap:var(--s5);margin-top:var(--s7)}
.cover-hero .cw{position:relative;flex:none}
.cover-hero img,.cover-hero .ph{width:144px;height:144px;border-radius:var(--r);object-fit:cover}
.cover-hero .ph{display:flex;align-items:center;justify-content:center;background:var(--soft);
  font-family:var(--font-head);font-weight:800;font-size:40px;letter-spacing:-.03em;color:var(--ink)}
.cover-hero .ch-meta{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.cover-hero .ch-meta .s{font-family:var(--font-head);font-weight:700;font-size:var(--fs-cap);line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cover-hero .ch-meta h2{font-size:var(--fs-h4);line-height:1.2}
.cover-hero .ch-meta p{font-size:var(--fs-s);color:var(--muted)}
.cover-hero.playable{cursor:pointer}
/* play: an accent fill with a drawn triangle (the old text glyph renders as an emoji on some phones) */
.cover-hero .play-badge{position:absolute;inset:0;margin:auto;width:48px;height:48px;border-radius:var(--r);background:var(--accent);
  font-size:0;color:var(--accent-ink);transition:background-color var(--ease)}
.cover-hero .play-badge::before,.play-cue::before{content:"";border-style:solid;border-color:transparent transparent transparent currentColor}
.cover-hero .play-badge::before{position:absolute;left:50%;top:50%;margin:-8px 0 0 -5px;border-width:8px 0 8px 13px}
.cover-hero.playable:hover .play-badge{background:var(--accent-hover)}
/* no cover art: the initials keep the centre, the play mark sits in the corner */
.cover-hero .ph + .play-badge{inset:auto 10px 10px auto;width:36px;height:36px}
.cover-hero .ph + .play-badge::before{margin:-6px 0 0 -4px;border-width:6px 0 6px 10px}
.play-cue{display:inline-flex;align-items:center;gap:10px;min-height:32px;margin-top:2px;font-family:var(--font-head);font-weight:700;font-size:var(--fs-b);color:var(--ink);transition:color var(--ease)}
.play-cue::before{border-width:6px 0 6px 10px;border-left-color:var(--accent)}
.cover-hero.playable:hover .play-cue{color:var(--link)}

/* listen: text links */
.listen{display:flex;flex-wrap:wrap;gap:0 var(--s5);margin-top:var(--s3)}
.listen a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-head);font-weight:600;font-size:15px; /* parity with .tlink */
  color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.listen a:hover{color:var(--ink)}
.listen .d{display:none}

/* TLDR / key takeaways: a dot list between hairlines, no box */
.article .takeaways{margin-top:var(--s8);padding-block:var(--s6);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.article .takeaways h2{margin:0 0 var(--s4);font-family:var(--font-head);font-weight:700;font-size:var(--fs-cap);line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.article .takeaways ul{display:grid;gap:var(--s3)}
.article .takeaways li{position:relative;margin:0;padding-left:22px;color:var(--ink);font-size:var(--fs-l);line-height:1.6}
.article .takeaways li::before{content:"";position:absolute;left:2px;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* body copy: site-v2 .prose (dots, deep-blue links, 18px) */
.article .prose{margin-top:var(--s8)}
.article .prose > h2:first-child{margin-top:0}

/* about the guest / show: the 1px card */
.article .guestcard{margin-top:var(--s9);padding:var(--s6);border:1px solid var(--line);border-radius:var(--r);background:#ffffff}
.guestcard .lab{display:block;margin-bottom:var(--s3);font-family:var(--font-head);font-weight:700;font-size:var(--fs-cap);line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.article .guestcard h3{margin:0 0 var(--s3);font-size:var(--fs-h4);line-height:1.2}
.article .guestcard p{margin:0 0 var(--s3);font-size:var(--fs-b);line-height:1.65;color:var(--text)}
.guestcard .links{display:flex;flex-wrap:wrap;gap:0 var(--s5);margin-top:var(--s2)}
.guestcard .links a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-head);font-weight:600;font-size:15px; /* parity with .tlink */
  color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.guestcard .links a:hover{color:var(--ink)}

/* back to the index, then the closing band */
.post-back{margin-top:var(--s8)}
.post-close .btns{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3) var(--s4);margin-top:var(--s2)}
.post-close .btns .btn{margin-top:0}

@media (max-width:560px){
  .article h1{font-size:36px}
  .cover-hero{gap:var(--s4)}
  .cover-hero img,.cover-hero .ph{width:104px;height:104px}
  .cover-hero .ph{font-size:30px}
  .cover-hero .ch-meta h2{font-size:var(--fs-h3)}
  .article .takeaways li{font-size:var(--fs-b)}
  .article .guestcard{padding:var(--s5) 20px}
  .post-close .btns{flex-direction:column;align-items:stretch;width:100%}
}