/* episode.css , the Episode page, r2 finish pass (2026-09-29). Linked ONLY by /podcast/<slug>/ pages (templates/design/episode.mjs).
 * Every selector starts with .ep2- (or is scoped to body[data-design="episode"], or sets the shared signup section
 * inside .ep2-offer). Colors come ONLY from the kit's semantic tokens (kit/gab-kit-v2.css THEME CONTRACT):
 *   --bg --surface --surface-soft --ink --ink-soft --heading --accent --line --on-accent --band --on-band --shadow-rgb
 * plus --btn / --btn-glow / --btn-glow-hover (the button blend). No hex, no rgba literal, no raw palette name.
 * TYPE reads the kit's one scale (--t-display --t-h2 --t-h3 --t-lede --t-body --t-small --t-eyebrow, and --lh-*).
 * SPACE reads the spacer scale (--s1 16 .. --s8 128). Sections are separated by space, never by a line.
 * TEXT COLORS, five: --heading (titles), --ink (reading text), --ink-soft (labels and meta), --accent (a moment's
 * kicker, links inside the notes, the hover), --on-band (on the dark band). Button labels are --on-accent.
 * HOVER: cards, chips, tags and the list use the HOVER SYSTEM in design.css (.k-hov .k-hov-ph .k-hov-t .k-hov-lift);
 * buttons (.ep2-btn, .ep2-play) take theirs from the BUTTON SYSTEM in design.css. */

body[data-design="episode"]{background:var(--bg);color:var(--ink)}
.ep2-top [hidden],.ep2-head [hidden],.ep2-mini[hidden]{display:none}
.ep2-top :focus-visible,.ep2-head :focus-visible,.ep2-body :focus-visible,.ep2-rel :focus-visible,.ep2-mini :focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* one page width: content and nav share the same side line */
.ep2-wrap{padding-left:max(44px,calc((100% - var(--container)) / 2));padding-right:max(44px,calc((100% - var(--container)) / 2))}

/* ---- sticky nav + thin reading-progress bar ---- */
.ep2-top{position:sticky;top:0;z-index:60;background:var(--bg)}
/* THE RULE (design.css BACKGROUND SECTIONS): the sticky bar's ground and shadow run to the screen edges, the nav stays on its line */
.ep2-top::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--bg);z-index:-1;transition:box-shadow .25s ease}
.ep2-top.is-stuck::before{box-shadow:0 8px 26px rgba(var(--shadow-rgb),.08)}
.ep2-top .hx-nav{padding:14px max(44px,calc((100% - var(--container)) / 2))}
.ep2-rbar{position:fixed;left:0;right:0;top:var(--ep2-top,68px);height:3px;z-index:61;pointer-events:none}
.ep2-rbar i{display:block;height:100%;width:100%;background:var(--btn);transform:scaleX(0);transform-origin:0 50%;transition:transform .1s linear}
.ep2-head[id],.ep2-body [id],.ep2-rel[id]{scroll-margin-top:calc(var(--ep2-top,68px) + var(--s2))}

/* ---- the type roles, all from the kit scale ---- */
.ep2-h1{font:400 var(--t-display)/var(--lh-display) var(--display);color:var(--heading);margin:0;text-wrap:balance;letter-spacing:-.005em}
.ep2-h2{font:400 var(--t-h2)/var(--lh-h2) var(--display);color:var(--heading);margin:0;text-wrap:balance}
.ep2-label,.ep2-kicker,.ep2-kick{margin:0;font:700 var(--t-eyebrow)/var(--lh-eyebrow) var(--body);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--ink-soft)}
.ep2-kick{color:var(--accent)}
.ep2-lede{margin:0;font-size:var(--t-lede);line-height:var(--lh-lede);color:var(--ink)}
.ep2-sub{margin:0;font-size:var(--t-small);line-height:var(--lh-small);color:var(--ink-soft)}
.ep2-who{margin:0;display:flex;flex-direction:column;gap:2px;min-width:0;font-size:var(--t-small);line-height:1.35}
.ep2-who b{color:var(--ink)}
.ep2-who span{color:var(--ink-soft)}

/* ---- buttons: the kit's blend. Hover, focus and press come from the BUTTON SYSTEM in design.css ---- */
.ep2-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background-image:var(--btn);color:var(--on-accent);font:700 var(--t-small)/1 var(--body);padding:16px 26px;min-height:48px;border-radius:999px;border:0;text-decoration:none;cursor:pointer}
.ep2-btn .ep2-ico{width:14px;height:14px}
.ep2-ico{width:16px;height:16px;fill:currentColor;flex:none}
.ep2-ico-pause{display:none}
body[data-ep2="playing"] .ep2-play .ep2-ico-play{display:none}
body[data-ep2="playing"] .ep2-play .ep2-ico-pause{display:block}
.ep2-play{width:64px;height:64px;border-radius:50%;background-image:var(--btn);color:var(--on-accent);border:0;display:grid;place-items:center;flex:none;cursor:pointer}
.ep2-play .ep2-ico{width:20px;height:20px}
.ep2-play .ep2-ico-play{margin-left:3px}
.ep2-arr,.ep2-chev{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---- hero: editorial, on the page ground; one action, play ---- */
.ep2-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);column-gap:var(--s6);align-items:center;padding-top:var(--s4);padding-bottom:var(--s7)}
.ep2-htx{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);min-width:0}
.ep2-kicker{display:flex;flex-wrap:wrap;align-items:center;row-gap:6px}
.ep2-kicker>*+*::before{content:"\00B7";margin:0 10px}
.ep2-kicker a{color:var(--heading);text-decoration:none}
.ep2-kicker a::before{content:"\2190";margin-right:8px}
.ep2-byline{display:flex;align-items:center;gap:var(--s1);min-width:0}
.ep2-byline>img,.ep2-byline>.k-face{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
.ep2-byline p{margin:0;display:flex;flex-direction:column;gap:2px;min-width:0;font-size:var(--t-small);line-height:1.4;color:var(--ink-soft)}
.ep2-byline b{font-size:var(--t-body);color:var(--ink)}
.ep2-byline b a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent);text-decoration-thickness:1.5px;text-underline-offset:4px}
.ep2-hph img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}

/* the player */
.ep2-listenbox{display:flex;flex-direction:column;gap:var(--s1);width:100%;max-width:560px;margin-top:var(--s1)}
.ep2-player{display:flex;align-items:center;gap:var(--s1);width:100%;background:var(--surface);border-radius:999px;padding:10px 30px 10px 10px;box-shadow:0 12px 32px rgba(var(--shadow-rgb),.08)}
.ep2-pmid{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.ep2-pline{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:var(--t-small);line-height:1.2}
.ep2-ptitle{font-weight:700;color:var(--heading)}
.ep2-times{font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.ep2-seek{position:relative;height:6px;border-radius:999px;background:var(--bg);cursor:pointer}
.ep2-seek::after{content:"";position:absolute;left:0;right:0;top:-14px;bottom:-14px}
.ep2-seek i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:var(--btn)}
.ep2-resume b{font-variant-numeric:tabular-nums}
.ep2-perr{margin:0;font-size:var(--t-small);color:var(--ink-soft)}
.ep2-htx audio{width:100%}
.ep2-listen{display:flex;flex-wrap:wrap;gap:4px 0;margin:0 0 0 24px;font:700 var(--t-small)/1.4 var(--body)}
.ep2-listen a{color:var(--ink-soft);text-decoration:none;transition:color .25s ease}
.ep2-listen a+a::before{content:"\00B7";margin:0 10px;color:var(--ink-soft)}
.ep2-listen a:hover{color:var(--accent)}

/* ---- the article and its rail ---- */
.ep2-body{display:grid;grid-template-columns:minmax(0,800px) minmax(0,1fr);column-gap:var(--s6);align-items:start}
.ep2-main{display:flex;flex-direction:column;gap:var(--s7);min-width:0}
.ep2-sec{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.ep2-shead{display:flex;flex-direction:column;gap:var(--s1)}

/* the quick answer */
.ep2-points{display:flex;flex-direction:column;gap:var(--s1)}
.ep2-points ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s1)}
.ep2-points li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--s1);align-items:start;font-size:var(--t-body);line-height:1.5;color:var(--ink)}
.ep2-points li>span:last-child{padding-top:2px}
.ep2-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--surface)}
.ep2-ic svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* moments */
.ep2-moments{display:flex;flex-direction:column;gap:var(--s2)}
.ep2-moment{background:var(--surface);border-radius:var(--r);padding:var(--s4) var(--s4) var(--s3);display:flex;flex-direction:column;gap:var(--s2);transition:box-shadow .3s ease}
.ep2-moment.is-now{box-shadow:0 0 0 2px var(--accent)}
.ep2-moment blockquote,.ep2-band blockquote{margin:0}
.ep2-moment blockquote p{margin:0;font:400 var(--t-h3)/var(--lh-title) var(--display);color:var(--heading)}
.ep2-mfoot{display:flex;align-items:center;gap:var(--s1);flex-wrap:wrap}
.ep2-mfoot>img,.ep2-mfoot>.k-face,.ep2-band figcaption>img,.ep2-band figcaption>.k-face{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.ep2-chip{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--surface-soft);color:var(--heading);font:700 var(--t-small)/1 var(--body);font-variant-numeric:tabular-nums;text-decoration:none}
.ep2-chip>span{display:inline-flex;align-items:center;gap:8px}
.ep2-chip .ep2-ico{width:12px;height:12px}

/* the pull quote: the dark band */
.ep2-band{margin:var(--s2) 0 0;background:var(--band);color:var(--on-band);border-radius:var(--r);padding:var(--s6) var(--s5) var(--s4);position:relative;overflow:hidden;transition:box-shadow .3s ease}
.ep2-band.is-now{box-shadow:0 0 0 2px var(--accent)}
.ep2-band::before{content:"";position:absolute;right:-18%;top:-45%;width:min(640px,90%);aspect-ratio:1;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 50%,transparent),transparent);pointer-events:none}
.ep2-band blockquote{position:relative}
.ep2-band blockquote p{margin:0;font:400 var(--t-h2)/var(--lh-h2) var(--display);color:var(--on-band);text-wrap:balance}
.ep2-band figcaption{position:relative;display:flex;align-items:center;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s4)}
.ep2-band .ep2-who b,.ep2-band .ep2-who span{color:var(--on-band)}
.ep2-band .ep2-who span{font-variant-numeric:tabular-nums}
.ep2-wave{display:flex;align-items:center;gap:2px;height:22px;flex:0 1 140px;min-width:0}
.ep2-wave i{flex:1;border-radius:2px;background:var(--on-band);opacity:.32}
.ep2-wave i.h{opacity:.95}
.ep2-band .ep2-btn{margin-left:auto}

/* the free mini book, once: the shared signup section, set as a soft card inside the article */
.ep2-offer .su-a{background:var(--surface-soft);border-radius:var(--r);padding:var(--s6) var(--s4)}
.ep2-offer .su-a .k-h1{font-size:var(--t-h2);line-height:var(--lh-h2)}

/* show notes: the model's html (paragraphs, several one-item lists, links, a legal line) */
.ep2-prose{max-width:var(--measure);font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink)}
.ep2-prose>*{margin:0}
.ep2-prose>*+*{margin-top:var(--s2)}
.ep2-prose ul{padding-left:24px}
.ep2-prose>ul+ul,.ep2-prose li+li{margin-top:calc(var(--s1) / 2)}
.ep2-prose a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.ep2-prose>h2,.ep2-prose>h3,.ep2-prose>h4{font:400 var(--t-h3)/var(--lh-h3) var(--display);color:var(--heading);margin-top:var(--s4);text-wrap:balance}
.ep2-prose>h2 :is(strong,b),.ep2-prose>h3 :is(strong,b),.ep2-prose>h4 :is(strong,b){font-weight:inherit}
.ep2-prose>:first-child{margin-top:0}
.ep2-fold{max-width:var(--measure)}
.ep2-fold>summary{list-style:none;display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;background:var(--surface);color:var(--heading);font:700 var(--t-small)/1 var(--body);cursor:pointer}
.ep2-fold>summary::-webkit-details-marker{display:none}
.ep2-fold>summary>span{display:inline-flex;align-items:center;gap:10px}
.ep2-fold .ep2-chev{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ep2-fold[open] .ep2-chev{transform:rotate(180deg)}
.ep2-fold-close,.ep2-fold[open] .ep2-fold-open{display:none}
.ep2-fold[open] .ep2-fold-close{display:inline}
.ep2-fold>.ep2-prose{margin-top:var(--s3)}

/* the guest (or the host): one card to their page */
.ep2-pc{display:grid;grid-template-columns:180px minmax(0,1fr);gap:var(--s4);align-items:center;background:var(--surface);border-radius:var(--r);padding:var(--s2);text-decoration:none;color:inherit}
.ep2-pc:not(:has(.ep2-pc-ph)){grid-template-columns:minmax(0,1fr);padding:var(--s4)}
.ep2-pc-ph{border-radius:var(--r-sm)}
.ep2-pc-ph img,.ep2-rc-ph img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.ep2-pc-tx{display:flex;flex-direction:column;gap:12px;min-width:0}
.ep2-pc-name{font:400 var(--t-h3)/var(--lh-h3) var(--display);color:var(--heading);text-wrap:balance}
.ep2-pc-line{font-size:var(--t-small);line-height:var(--lh-small);color:var(--ink-soft)}
.ep2-more{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font:700 var(--t-small)/1.3 var(--body);color:var(--heading)}

/* keep listening */
.ep2-rel{padding-top:var(--s7);padding-bottom:var(--s7)}
/* the article ends the page when there is no "Keep listening" below it: give it that section's bottom air, so its last
   block (the show notes button, the guest card) never sits on the footer edge */
.ep2-body:has(+ footer){padding-bottom:var(--s7)}
.ep2-relgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.ep2-rc{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--s2);align-items:center;background:var(--surface);border-radius:var(--r);padding:var(--s1);text-decoration:none;color:inherit}
.ep2-rc-ph{border-radius:var(--r-sm)}
.ep2-rc-tx{display:flex;flex-direction:column;gap:8px;min-width:0}
.ep2-rc-t{font:400 var(--t-lede)/var(--lh-title) var(--display);color:var(--heading);text-wrap:balance}
.ep2-topics{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.ep2-topics .ep2-label{margin-right:8px}
.ep2-tag{display:inline-block;padding:12px 16px;border-radius:999px;background:var(--surface);color:var(--heading);font:700 var(--t-small)/1 var(--body);text-decoration:none}

/* the rail: the page's one "On this page" list */
.ep2-rail{position:sticky;top:calc(var(--ep2-top,68px) + var(--s4));display:flex;flex-direction:column;gap:12px;width:min(100%,280px)}
.ep2-toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ep2-toc a{position:relative;display:block;padding:10px 0 10px 22px;font-size:var(--t-small);line-height:1.35;color:var(--ink-soft);text-decoration:none}
.ep2-toc a::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--line);transition:background .25s ease}
.ep2-toc a.on{color:var(--heading);font-weight:700}
.ep2-toc a.on::before{background:var(--accent)}
.ep2-toc a.done::before{background:color-mix(in srgb,var(--accent) 40%,transparent)}

/* ---- the slim mini player, once the hero player has scrolled away (and the footer is not in view). On wide screens
   it sits under the rail, clear of the reading column; on phones it spans the bottom. ---- */
.ep2-mini{position:fixed;right:max(44px,calc((100% - var(--container)) / 2));bottom:24px;z-index:70;width:400px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;background:var(--band);color:var(--on-band);border-radius:999px;padding:8px 24px 8px 8px;overflow:hidden;box-shadow:0 14px 40px rgba(var(--shadow-rgb),.3)}
.ep2-play-sm{width:44px;height:44px}
.ep2-play-sm .ep2-ico{width:16px;height:16px}
.ep2-mtitle,.ep2-mtime{font:700 var(--t-small)/1.25 var(--body)}
.ep2-mtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep2-mtime{font-variant-numeric:tabular-nums}
.ep2-mbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:color-mix(in srgb,var(--on-band) 18%,transparent)}
.ep2-mbar b{display:block;height:100%;width:0;background:var(--btn)}

/* ---- tablets and phones: one column, no rail; the portrait follows the play action ---- */
@media (max-width:1000px){
  .ep2-wrap{padding-left:20px;padding-right:20px}
  .ep2-top .hx-nav{padding:10px 20px}
  .ep2-head{grid-template-columns:minmax(0,1fr);row-gap:var(--s4);padding-top:var(--s2);padding-bottom:var(--s5)}
  .ep2-htx{gap:var(--s2)}
  .ep2-hph img{aspect-ratio:1/1}
  .ep2-body{grid-template-columns:minmax(0,1fr)}
  .ep2-rail{display:none}
  .ep2-main{gap:var(--s5)}
  .ep2-sec{gap:var(--s2)}
  .ep2-moment{padding:var(--s2)}
  .ep2-band{padding:var(--s4) var(--s2) var(--s3)}
  .ep2-wave{display:none}
  .ep2-band .ep2-btn{margin-left:0;width:100%}
  .ep2-offer .su-a{padding:var(--s5) var(--s2)}
  .ep2-pc{grid-template-columns:112px minmax(0,1fr);gap:var(--s2);padding:var(--s1)}
  .ep2-pc:not(:has(.ep2-pc-ph)){padding:var(--s2)}
  .ep2-rel{padding-top:var(--s5);padding-bottom:var(--s5)}
  .ep2-body:has(+ footer){padding-bottom:var(--s5)}
  .ep2-relgrid{grid-template-columns:minmax(0,1fr)}
  .ep2-rc{grid-template-columns:88px minmax(0,1fr)}
  .ep2-player{padding:8px 20px 8px 8px}
  .ep2-play{width:56px;height:56px}
  .ep2-listen{margin-left:0}
  .ep2-kicker a{flex-basis:100%;margin-bottom:6px}
  .ep2-kicker a+span::before{display:none}
  .ep2-mini{left:12px;right:12px;bottom:12px;width:auto}
}
@media (prefers-reduced-motion:reduce){
  .ep2-rbar i,.ep2-fold .ep2-chev{transition:none}
}