/* ============================================================================ THE PODCAST — the arm's own components Small, like the Studio's. This arm shifts no colour token; `data-arm="podcast"` exists so the arm bar's scroll-margin rule in site.css applies, and so the platform links can be switched on in one place. Everything else is reused: the guest page is `.facts` and `.faq`, the leave-behind link is `.dl`, the honest empty states are `.pending`. Depends on assets/css/site.css. Load it after. ========================================================================== */ /* ---------------------------------------------------------------- feed */ /* The follow button and platform badges are written into the markup now and hidden until there is a feed behind them, because a follow button leading to an empty feed is a small lie and the page says so out loud. TO SWITCH ON: change data-feed="off" to data-feed="live" on , and put the real URLs into the hrefs. That is the whole change. */ [data-feed="off"] .when-live{display:none !important} [data-feed="live"] .until-live{display:none !important} .platforms{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .platforms a{ display:inline-flex;align-items:center;gap:.6em;text-decoration:none; border:1px solid var(--line);padding:.62em 1em;color:var(--ink-soft); font-size:.9rem;transition:border-color .2s,color .2s,background-color .2s } .platforms a:hover{border-color:var(--gold-line);color:var(--ink);background:var(--gold-wash)} .platforms svg{width:17px;height:17px;flex:none;color:var(--gold)} /* ---------------------------------------------------------------- episodes */ /* An index of conversations. Deliberately closer to a contents page than a media grid — the transcript is the artifact here, not the audio. */ .episodes{border-top:1px solid var(--line)} .ep{ display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto; gap:clamp(16px,2.6vw,32px);align-items:start; padding:clamp(22px,3vw,30px) 0;border-bottom:1px solid var(--line-soft); text-decoration:none;color:inherit;transition:background-color .25s } .ep:hover{background:var(--paper-2)} .band-alt .ep:hover{background:var(--paper)} .ep .no{ font-family:var(--f-body);font-weight:600;font-size:.66rem;letter-spacing:.18em; text-transform:uppercase;color:var(--gold);padding-top:.42em;white-space:nowrap } .ep .who{font-family:var(--f-display);font-weight:600;font-size:1.4rem;line-height:1.15;margin:0 0 .28em} .ep .said{color:var(--ink-soft);font-size:.97rem;margin:0;max-width:62ch} .ep .said em{font-style:italic;color:var(--ink)} .ep .meta{ display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right; font-family:var(--f-body);font-weight:600;font-size:.64rem;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-faint);white-space:nowrap } @media (max-width:820px){ .ep{grid-template-columns:1fr;gap:10px} .ep .meta{align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap;gap:14px} } /* ---------------------------------------------------------------- episode */ /* One conversation. A document with audio attached, not a player with notes underneath: the transcript is what survives, what gets indexed, and what serves the majority who will never listen for ninety minutes. */ .guest-head{ display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:clamp(20px,3vw,38px);align-items:center } .guest-head .portrait{ width:clamp(120px,15vw,180px);aspect-ratio:1;flex:none; border:1px solid var(--line);background:var(--paper-2);object-fit:cover } .guest-head .role{ font-family:var(--f-body);font-weight:600;font-size:.66rem;letter-spacing:.18em; text-transform:uppercase;color:var(--gold);margin:0 0 .6em } @media (max-width:620px){.guest-head{grid-template-columns:1fr}} /* The line worth screenshotting — this is the unit a guest shares. */ .pullquote{ border-left:2px solid var(--gold-line);padding:clamp(16px,2.4vw,24px) 0 clamp(16px,2.4vw,24px) clamp(20px,3vw,34px); margin:clamp(28px,4vw,44px) 0 } .pullquote p{ font-family:var(--f-display);font-style:italic;font-weight:400; font-size:clamp(1.4rem,1.1rem + 1.6vw,2.15rem);line-height:1.32; letter-spacing:-.012em;color:var(--ink);margin:0;max-width:26ch } .pullquote .attr{ font-family:var(--f-body);font-style:normal;font-weight:600;font-size:.66rem; letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint); display:block;margin-top:1.1em } /* The transcript, sectioned by the three questions rather than run as a wall. */ .transcript{max-width:74ch} .transcript h2{ font-size:clamp(1.3rem,1.1rem + .9vw,1.85rem); margin:clamp(34px,4.5vw,52px) 0 .1em } .transcript h2 .q{ display:block;font-family:var(--f-body);font-weight:600;font-size:.64rem; letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:.7em } .transcript .turn{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:clamp(12px,2vw,22px);padding:11px 0} .transcript .turn .spk{ font-family:var(--f-body);font-weight:600;font-size:.64rem;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-faint);padding-top:.4em } .transcript .turn p{margin:0 0 .7em;color:var(--ink-soft)} .transcript .turn p:last-child{margin-bottom:0} .transcript .turn.host p{color:var(--ink-faint);font-style:italic} @media (max-width:600px){ .transcript .turn{grid-template-columns:1fr;gap:4px;padding:9px 0} } /* The player sits above the transcript when audio exists, and is simply absent before that — never a dead control. */ .player{ border:1px solid var(--line);background:var(--paper-2); padding:clamp(16px,2.2vw,22px) } .band-alt .player{background:var(--paper)} .player audio{width:100%;display:block}