/* Podcast 页（/podcast/…）专用样式：原型与预览/窗边有光_内页结构稿_Podcast_v15.html 第三个 <style>，原样。
   视频模式（玻璃转横屏、全屏播放器）已挪到 /css/hero-video.css，首页和 Podcast 页共用。
   原来的说明：视频画面（.pv-pic）原型里内嵌的示例图，换成 --pv-d / --pv-n（白天 / 夜晚）：
   后台的视频封面 → YouTube 缩略图 → 都没有时用窗外的风景（和原型的示例图是同一张）。 */
/* Podcast: the room from the homepage is the listening room (full screen); everything below plays through its wall player. */
@media (min-width:861px){ #hero{ height:100svh; } }
#app{ padding-top:0; }
.ep-page{ padding-top:0; }

/* one play button for every episode: filled ink circle, pause while it plays */
.pbtn{ flex:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--ink); background:none; color:var(--ink); display:grid; place-items:center; padding:0; cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .2s ease; }
.pbtn svg{ width:15px; height:15px; fill:currentColor; grid-area:1 / 1; }
.pbtn .i-pa{ display:none; }
.pbtn.on .i-pl{ display:none; } .pbtn.on .i-pa{ display:block; }
.pbtn:hover, .pbtn.on{ background:var(--ink); color:var(--cream); }
.pbtn:active{ transform:scale(.96); }
.pbtn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.pbtn.big{ width:56px; height:56px; } .pbtn.big svg{ width:18px; height:18px; }

/* the playing bars */
.eq{ display:none; align-items:flex-end; gap:2px; height:14px; }
.eq i{ width:2px; height:100%; background:var(--wood); border-radius:1px; transform-origin:50% 100%; animation:eq 1s ease-in-out infinite; }
.eq i:nth-child(2){ animation-delay:-.35s; } .eq i:nth-child(3){ animation-delay:-.7s; }
@keyframes eq{ 0%, 100%{ transform:scaleY(.3); } 50%{ transform:scaleY(1); } }
.is-on > .eq, .is-on .listen .eq, .ep-page.is-on .listen .eq{ display:flex; }
@media (prefers-reduced-motion: reduce){ .eq i{ animation:none; transform:scaleY(.7); } }

/* ---------- list ---------- */
.sea-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:1.6rem; align-items:center; padding-block:0 3rem; border-bottom:var(--hair) solid var(--rule); }
.sea-t .k{ display:block; font-family:var(--serif-en); font-style:italic; font-size:.86rem; color:var(--wood); }
.sea-t b{ display:block; margin-top:.35rem; font-family:var(--read-zh); font-weight:600; font-size:1.55rem; letter-spacing:.06em; transition:color .2s ease; }
.sea-t span:last-child{ display:block; margin-top:.5rem; max-width:34em; font-family:var(--sans); font-weight:300; font-size:.9rem; line-height:1.85; color:var(--ink-soft); }
.sea-t:hover b{ color:var(--hover); }
.eps{ padding-bottom:5rem; }
.ep-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:1.6rem; align-items:start; padding-block:2.1rem; border-bottom:var(--hair) solid var(--rule); }
.ep-row:last-child{ border-bottom:0; }
.ep-row .pbtn{ margin-top:.25rem; }
.ep-main{ display:block; min-width:0; }
.ep-no{ display:flex; gap:.9rem; font-family:var(--sans); font-size:.74rem; letter-spacing:.16em; color:var(--faint); font-variant-numeric:tabular-nums; }
.ep-no span{ font-family:var(--read-zh); color:var(--label); letter-spacing:.14em; }
.ep-t{ display:block; margin-top:.5rem; font-family:var(--read-zh); font-weight:600; font-size:1.38rem; line-height:1.5; letter-spacing:.03em; transition:color .2s ease; }
.ep-t small{ display:block; margin-top:.15rem; font-family:var(--read-zh); font-weight:400; font-size:.92rem; letter-spacing:.06em; color:var(--ink-soft); }
.ep-s{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:.6rem; max-width:36em; font-family:var(--sans); font-weight:300; font-size:.88rem; line-height:1.85; color:var(--ink-soft); }
.ep-main:hover .ep-t{ color:var(--hover); }
.ep-main:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; }
.ep-m{ grid-column:3; display:flex; flex-direction:column; align-items:flex-end; gap:.35rem; padding-top:.2rem; white-space:nowrap; font-family:var(--sans); font-size:.78rem; letter-spacing:.08em; color:var(--faint); font-variant-numeric:tabular-nums; }
.ep-m span:first-child{ font-size:.86rem; }
.ep-row > .eq, .sea-row > .eq{ position:absolute; }
.ep-row, .sea-row{ position:relative; }
.ep-row > .eq{ left:14px; top:calc(2.1rem + 56px); }
.sea-row > .eq{ right:0; top:6px; }
.ep-row.is-cur .ep-t{ color:var(--ink); }
@media (max-width:720px){
  .ep-row{ grid-template-columns:auto minmax(0,1fr); column-gap:1rem; }
  .ep-m{ grid-column:2; flex-direction:row; align-items:center; gap:.8rem; padding-top:.7rem; }
  .ep-t{ font-size:1.18rem; }
  .ep-row > .eq{ left:15px; }
  .sea-row{ grid-template-columns:auto minmax(0,1fr); gap:1.1rem; }
}

/* ---------- an episode ---------- */
.ep-sub{ margin-top:1.2rem; font-family:var(--read-zh); font-size:1.05rem; letter-spacing:.1em; color:var(--ink-soft); }
.listen{ position:relative; display:inline-grid; grid-template-columns:auto auto; gap:1rem; align-items:center; margin-top:2.6rem; text-align:left; }
.listen .pbtn{ width:60px; height:60px; background:var(--ink); color:var(--cream); }
.listen .pbtn svg{ width:19px; height:19px; }
.listen .pbtn:hover{ background:var(--hover); border-color:var(--hover); }
.lt b{ display:block; font-family:var(--read-zh); font-weight:600; font-size:1rem; letter-spacing:.1em; }
.lt span{ display:block; margin-top:.2rem; font-family:var(--sans); font-size:.78rem; letter-spacing:.08em; color:var(--ink-soft); }
.listen .eq{ position:absolute; left:calc(100% + .9rem); top:50%; translate:0 -50%; }
.plats{ display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem; margin-top:2rem; }
.plats a{ padding:.42rem .95rem; border-radius:99px; border:var(--hair) solid var(--rule); font-family:var(--sans); font-size:.76rem; letter-spacing:.06em; color:var(--ink-soft); transition:color .2s, border-color .2s; }
.plats a:hover{ color:var(--ink); border-color:var(--ink); }
.ep-page .tools{ margin-top:1.6rem; }

.chap{ list-style:none; border-top:var(--hair) solid var(--rule); }
.chap li{ border-bottom:var(--hair) solid var(--rule); }
.chap button{ display:grid; grid-template-columns:4.2rem 1fr; width:100%; padding:.9rem 0; border:0; background:none; text-align:left; cursor:pointer; color:var(--ink);
  font-family:var(--read-zh); font-size:1rem; letter-spacing:.04em; transition:color .2s ease; }
.chap button span{ font-family:var(--sans); font-size:.82rem; color:var(--wood); font-variant-numeric:tabular-nums; padding-top:.1em; }
.chap button:hover{ color:var(--hover); }
.chap button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.refs{ padding-left:1.2em; }
.refs li{ font-family:var(--read-zh); font-size:1rem; line-height:2; letter-spacing:.04em; }
.refs li::marker{ color:var(--wood); }
.ts{ border-block:var(--hair) solid var(--rule); }
.ts summary{ display:flex; justify-content:space-between; align-items:baseline; padding-block:1rem; cursor:pointer; list-style:none; font-family:var(--sans); font-size:.84rem; letter-spacing:.2em; color:var(--ink); }
.ts summary::-webkit-details-marker{ display:none; }
.ts summary small{ font-size:.74rem; letter-spacing:.1em; color:var(--faint); }
.ts[open] summary span::after{ content:"（收起）"; color:var(--faint); }
.ts p{ display:grid; grid-template-columns:4.2rem 1fr; margin-top:0 !important; padding-bottom:1.1rem; }
.ts p b{ font-weight:600; }
.ts .t{ align-self:start; justify-self:start; margin-top:.35em; border:0; background:none; padding:0; cursor:pointer; font-family:var(--sans); font-size:.78rem; color:var(--wood); font-variant-numeric:tabular-nums; }
.ts .t:hover{ color:var(--hover); }
.ts .ts-more{ display:block; padding-bottom:1.4rem; font-family:var(--sans); font-size:.8rem; color:var(--faint); }

.rel{ display:block; max-width:var(--measure); margin:0 auto 0; padding:2rem 2.2rem; background:color-mix(in srgb, var(--beige) 70%, transparent); transition:background .2s ease; }
.rel small{ display:block; font-family:var(--sans); font-size:.72rem; letter-spacing:.26em; color:var(--faint); }
.rel b{ display:block; margin-top:.6rem; font-family:var(--read-zh); font-weight:600; font-size:1.2rem; letter-spacing:.04em; }
.rel span{ display:inline-block; margin-top:.9rem; font-family:var(--sans); font-size:.78rem; letter-spacing:.1em; border-bottom:1px solid currentColor; }
.rel:hover b, .rel:hover span{ color:var(--hover); }
.rel + .bio{ margin-top:3rem; }
.ep-page .body{ padding-bottom:4rem; }
.chap button.now{ color:var(--hover); }
.chap button.now span{ color:var(--hover); }

/* ---------- v2 ---------- */
/* the mini player: previous, play, next; the track takes clicks and drags */
.mini{ width:min(720px, calc(100% - 32px)); grid-template-columns:auto auto auto minmax(0,1fr) minmax(80px, 180px) auto auto; gap:.6rem; padding:.55rem .8rem .55rem .7rem; }
.mini-sm{ width:34px; height:34px; border:0; border-radius:50%; background:none; color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:background .2s; }
.mini-sm svg{ width:15px; height:15px; fill:currentColor; }
.mini-sm:hover{ background:color-mix(in srgb, var(--ink) 8%, transparent); }
.mini-meta{ margin-left:.4rem; }
.mini-track{ position:relative; height:20px; display:flex; align-items:center; cursor:pointer; background:none; overflow:visible; touch-action:none; }
.mini-track::before{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; translate:0 -50%; background:var(--rule); border-radius:2px; }
.mini-track i{ position:absolute; left:0; right:0; top:50%; height:2px; translate:0 -50%; border-radius:2px; }
.mini-track:hover::before, .mini-track:hover i{ height:4px; }
.mini-track:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }
.mini :is(.mini-sm, .mini-play, .mini-x):focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:560px){ .mini{ grid-template-columns:auto auto auto minmax(0,1fr) auto; } .mini-track, .mini-time{ display:none; } .mini-meta{ margin-left:.2rem; } }

/* an episode: the dark column at the left holds this episode's sections */
.ep-wrap .main{ padding:0 var(--edge) 0 clamp(2rem, 4vw, 4rem); }
.ep-wrap .ar{ padding:0; --measure:36rem; }
.ep-wrap .ar-head{ padding-top:5rem; }
.panel .back{ display:inline-block; font-family:var(--read-zh); font-size:.9rem; letter-spacing:.12em; color:var(--panel-soft); transition:color .2s ease; }
.panel .back:hover{ color:var(--panel-ink); }
.panel .back + h4{ margin-top:3rem; }
.ptoc{ list-style:none; margin-top:1.3rem; border-top:1px solid var(--panel-rule); }
.ptoc li{ border-bottom:1px solid var(--panel-rule); }
.ptoc a{ display:grid; grid-template-columns:2.2rem 1fr; padding-block:1rem; font-family:var(--read-zh); font-size:.95rem; line-height:1.6; letter-spacing:.06em; color:var(--panel-soft); transition:color .2s ease; }
.ptoc a span{ font-family:var(--sans); font-size:.74rem; padding-top:.2em; }
.ptoc a:hover, .ptoc a.on{ color:var(--panel-ink); }
.ptoc a.on span{ color:var(--panel-hi); }
@media (max-width:900px){
  .ep-wrap .panel{ display:none; }
  .ep-wrap .main{ padding:0 var(--edge); }
  .ep-wrap .toc-m{ display:block; }
  .ep-wrap .ar-head{ padding-top:3.4rem; }
}
@media (min-width:901px){ .ep-wrap .toc-m{ display:none; } }

/* ---------- v3 ---------- */
/* the summary reads as a plain lead, no large first character */
.lead-p{ font-family:var(--read-zh); font-size:1.12rem !important; line-height:2 !important; color:var(--ink-soft) !important; }
/* one section at a time */
.sec h2{ margin-top:3.2rem !important; }
.sec[hidden]{ display:none !important; }
.ptoc button{ display:grid; grid-template-columns:2.2rem 1fr; width:100%; padding-block:1rem; border:0; background:none; text-align:left; cursor:pointer;
  font-family:var(--read-zh); font-size:.95rem; line-height:1.6; letter-spacing:.06em; color:var(--panel-soft); transition:color .2s ease; }
.ptoc button span{ font-family:var(--sans); font-size:.74rem; padding-top:.2em; }
.ptoc button:hover, .ptoc button.on{ color:var(--panel-ink); }
.ptoc button.on span{ color:var(--panel-hi); }
.ptoc button.on::after{ content:""; }
.ptoc button:focus-visible{ outline:2px solid var(--panel-hi); outline-offset:2px; }
.tabs-m{ display:none; }
@media (max-width:900px){
  .tabs-m{ display:flex; gap:1.6rem; margin-top:2.4rem !important; border-bottom:var(--hair) solid var(--rule); overflow-x:auto; scrollbar-width:none; }
  .tabs-m::-webkit-scrollbar{ display:none; }
  .tabs-m button{ flex:none; display:flex; gap:.4rem; align-items:baseline; padding:.8rem 0; border:0; background:none; cursor:pointer; font-family:var(--read-zh); font-size:.95rem; letter-spacing:.06em; color:var(--ink-soft); }
  .tabs-m button span{ font-family:var(--sans); font-size:.72rem; color:var(--faint); }
  .tabs-m button.on{ color:var(--ink); box-shadow:inset 0 -2px 0 var(--ink); }
  .sec h2{ margin-top:2rem !important; }
}
/* the transcript reads in full */
.ts{ border:0; }
.ts p{ display:grid; grid-template-columns:4.2rem 1fr; margin-top:0 !important; padding-bottom:1.2rem; text-align:left; }
.ts p span b{ font-weight:600; }
.ts .ts-more{ display:block; padding-top:.6rem; }

/* the mini player: a bigger play button, and a track that follows the finger */
.mini{ padding:.6rem .9rem .6rem .7rem; gap:.7rem; }
.mini-play{ width:50px; height:50px; }
.mini-play svg{ width:19px; height:19px; stroke-width:2.2; }
.mini-sm{ width:38px; height:38px; }
.mini-sm svg{ width:17px; height:17px; }
.mini-track{ height:28px; }
.mini-track i{ transition:transform .25s linear; }
.mini-track.drag i{ transition:none; }
.mini-track::after{ content:""; position:absolute; top:50%; left:calc(var(--f, 0) * 100%); width:12px; height:12px; border-radius:50%; background:var(--ink);
  translate:-50% -50%; scale:0; transition:scale .15s ease, left .25s linear; }
.mini-track:hover::after, .mini-track.drag::after, .mini-track:focus-visible::after{ scale:1; }
.mini-track.drag::after{ transition:scale .15s ease; scale:1.15; }

/* more room between the content and the footer, on every inner page */
.main{ padding-bottom:9rem !important; }
.ep-wrap .pn{ padding-bottom:0; }
.sec > * + *{ margin-top:1.6rem; }
.sec > h2 + *{ margin-top:1.8rem; }
@media (max-width:900px){ .list-page .eps{ padding-bottom:7rem; } .ep-wrap .main{ padding-bottom:7rem !important; } }

/* ---------- v4 ---------- */
/* quieter lines everywhere */
:root{ --rule:rgba(46,38,32,.14); --panel-rule:rgba(243,236,223,.09); }
@media (min-resolution:2dppx){ :root{ --rule:rgba(46,38,32,.2); } }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --rule:rgba(243,236,223,.12); --panel-rule:rgba(243,236,223,.07); } }
:root[data-theme="dark"]{ --rule:rgba(243,236,223,.12); --panel-rule:rgba(243,236,223,.07); }

/* a row: the play button on the title's line; date · host · length on the description's last line */
.ep-row{ grid-template-columns:46px minmax(0,1fr) auto; grid-template-areas:". no ." "btn title ." "eq sub ." ". sum meta"; column-gap:1.4rem; row-gap:0; align-items:start; }
.ep-row .ep-main{ display:contents; }
.ep-row .pbtn{ grid-area:btn; align-self:center; margin:0; width:46px; height:46px; }
.pbtn svg{ width:18px; height:18px; }
.ep-row .ep-no{ grid-area:no; margin-bottom:.45rem; }
.ep-row .ep-t{ grid-area:title; align-self:center; margin:0; }
.ep-row .ep-sub2{ grid-area:sub; margin-top:.15rem; font-family:var(--read-zh); font-size:.92rem; letter-spacing:.06em; color:var(--ink-soft); }
.ep-row .ep-s{ grid-area:sum; margin-top:.7rem; }
.ep-row .ep-m{ grid-area:meta; grid-column:3; align-self:end; flex-direction:row; align-items:baseline; gap:0; padding:0 0 .1rem; line-height:1.85; }
.ep-row .ep-m span:first-child{ font-size:.78rem; }
.ep-row .ep-m span + span::before{ content:"·"; margin:0 .55em; }
.ep-row > .eq{ position:static; grid-area:eq; justify-self:center; margin-top:.5rem; }
.ep-row:hover .ep-t{ color:var(--hover); }
.ep-row .ep-t, .ep-row .ep-s, .ep-row .ep-sub2, .ep-row .ep-no{ cursor:pointer; }
.vtag{ font-style:normal; font-size:.62rem; letter-spacing:.14em; padding:.08rem .45rem; border-radius:99px; border:1px solid var(--wood); color:var(--wood); }
@media (max-width:720px){
  .ep-row{ grid-template-columns:46px minmax(0,1fr); grid-template-areas:". no" "btn title" "eq sub" ". sum" ". meta"; }
  .ep-row .ep-m{ grid-column:2; justify-self:start; padding-top:.5rem; }
}
.sea-row{ align-items:center; }

/* chapters: no lines */
.chap, .chap li{ border:0 !important; }
.chap button{ padding:.6rem 0; }

/* video episodes */
.alt{ margin-top:1rem !important; }
.alt-a{ border:0; background:none; padding:0; cursor:pointer; font-family:var(--sans); font-size:.8rem; letter-spacing:.1em; color:var(--ink-soft); border-bottom:1px solid currentColor; }
.alt-a:hover{ color:var(--hover); }


/* 窗边的海: the same play button as every episode, on the same lines */
.sea-row{ grid-template-columns:46px minmax(0,1fr); grid-template-areas:". k" "btn t" "eq s"; column-gap:1.4rem; row-gap:0; align-items:start; }
.sea-row .sea-t{ display:contents; }
.sea-row .pbtn{ grid-area:btn; align-self:center; }
.sea-row .sea-t .k{ grid-area:k; margin-bottom:.45rem; }
.sea-row .sea-t b{ grid-area:t; align-self:center; margin:0; font-size:1.38rem; line-height:1.5; letter-spacing:.03em; }
.sea-row .sea-t span:last-child{ grid-area:s; margin-top:.7rem; }
.sea-row > .eq{ position:static; grid-area:eq; justify-self:center; margin-top:.9rem; }
.sea-row:hover .sea-t b{ color:var(--hover); }
.sea-row .pbtn{ width:46px; height:46px; }