/* Episode preview: three vertical shorts shown as a stained-glass triptych. The clip that is
   playing sits in the lit centre window; the other two hang either side like the hinged wings
   of an altarpiece. Used by the home page (only while Ep. 45 is the newest episode) and by
   the Ep. 45 page. Behaviour is in shorts.js; the page supplies the colour and font tokens. */

@property --glow{syntax:"<color>";inherits:true;initial-value:#f5a524}

.pv{--glow:var(--saffron);position:relative;isolation:isolate;overflow:hidden;transition:--glow 1.1s ease}
.pv::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 42% 62% at 73% 52%,color-mix(in srgb,var(--glow) 17%,transparent),transparent 72%)}
.pv-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,6vw,96px);align-items:center}
.pv-head h2{margin:16px 0 18px;max-width:15ch;font-size:clamp(2.2rem,3.6vw,3.4rem)}
.pv-head .lede{max-width:46ch}

/* the three clips, as a list beside the windows */
.pv-list{list-style:none;margin:36px 0 0;border-top:1px solid var(--line)}
.pv-list li{position:relative;border-bottom:1px solid var(--line)}
.pv-pick{display:grid;grid-template-columns:46px 1fr auto;gap:4px 14px;align-items:baseline;width:100%;padding:18px 4px 4px;text-align:left}
.pv-n{font-family:var(--serif);font-size:1.45rem;line-height:1;color:var(--dim);transition:color .3s}
.pv-t b{display:block;font-family:var(--serif);font-weight:400;font-size:1.3rem;line-height:1.2;letter-spacing:-.01em;color:var(--muted);transition:color .3s}
.pv-t q{display:block;margin-top:5px;color:var(--dim);font-size:.93rem;line-height:1.45;quotes:"\201C" "\201D";transition:color .3s}
.pv-d{font-family:var(--mono);font-size:.76rem;color:var(--dim)}
.pv-pick:hover .pv-t b,.pv-list li.is-on .pv-t b{color:var(--text)}
.pv-pick:hover .pv-n,.pv-list li.is-on .pv-n{color:var(--c)}
.pv-list li.is-on .pv-t q{color:var(--muted)}
.pv-jump{display:inline-flex;align-items:center;gap:8px;margin:8px 0 16px 64px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--dim);transition:color .2s}
.pv-jump svg{width:13px;height:13px;flex:none}
.pv-jump:hover,.pv-list li.is-on .pv-jump{color:var(--turq)}
.pv-jump:hover{text-decoration:underline;text-underline-offset:3px}
.pv-p{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}
.pv-p i{display:block;height:100%;background:var(--c);transform:scaleX(0);transform-origin:0 50%}
.pv-cta{margin-top:30px}

/* the triptych */
.pv-side{display:flex;flex-direction:column;align-items:center;gap:20px}
.pv-stage{--A:min(338px,27vw,44vh);--W:calc(var(--A) * .55);--g:18px;
  position:relative;display:grid;grid-template-columns:var(--W) var(--A) var(--W);gap:var(--g);align-items:center;
  height:calc(var(--A) * 16 / 9);perspective:1400px;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.pv-stage::before{content:"";position:absolute;left:50%;top:50%;width:calc(var(--A) * 1.9);height:calc(var(--A) * 2.4);transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--glow) 34%,transparent),transparent)}

/* wings: the clips before and after, tinted like coloured glass and hinged towards you */
.pv-wing{--c:var(--saffron);position:relative;height:84%;border-radius:999px 999px 6px 6px;overflow:hidden;background:var(--ink3);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 50%,transparent),0 30px 60px -28px rgba(0,0,0,.9);
  transition:transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.pv-wing.l{transform-origin:100% 50%;transform:rotateY(24deg)}
.pv-wing.r{transform-origin:0 50%;transform:rotateY(-24deg)}
.pv-wing:hover,.pv-wing:focus-visible{transform:rotateY(0);box-shadow:0 0 0 1px var(--c),0 0 50px -12px var(--c),0 30px 60px -28px rgba(0,0,0,.9)}
.pv-wing img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(.8);transition:filter .4s}
.pv-wing:hover img{filter:grayscale(.5) contrast(1.05) brightness(.9)}
.pv-wing::before{content:"";position:absolute;inset:0;z-index:1;background:var(--c);mix-blend-mode:multiply;opacity:.92}
.pv-wing::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,12,26,0) 30%,rgba(18,12,26,.7))}
.pv-wing .num{position:absolute;z-index:2;top:13%;left:0;right:0;text-align:center;font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.9rem);line-height:1;color:#fff8ea;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.pv-wing .spine{position:absolute;z-index:2;left:50%;bottom:22px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;white-space:nowrap;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#fff8ea}
.pv-wing.swap img{animation:pv-swap .6s ease}
@keyframes pv-swap{from{opacity:0;transform:scale(1.08)}}

/* the centre window: a 9:16 arch, so the top is an exact half circle */
.pv-center{position:relative;height:100%;border-radius:50% 50% 16px 16px/28.125% 28.125% 16px 16px;overflow:hidden;background:#000;isolation:isolate;transform:translateZ(0);
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 0 110px -14px color-mix(in srgb,var(--glow) 60%,transparent),0 40px 90px -30px rgba(0,0,0,.9)}
.pv-center video,.pv-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pv-poster,.pv-hit,.pv-snd,.pv-big{display:none}
.js .pv-poster{display:block;z-index:1;transition:opacity .45s}
.js .pv-center.is-live .pv-poster{opacity:0}
.js .pv-center.swap .pv-poster{animation:pv-swap .5s ease}
.pv-arch{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;filter:drop-shadow(0 0 4px var(--glow))}
.pv-arch path{fill:none;stroke-width:.9;stroke-linecap:round}
.pv-arch .trk{stroke:rgba(245,236,220,.2)}
.pv-arch .run{stroke:var(--glow)}
.js .pv-hit{display:block;position:absolute;inset:0;z-index:3;width:100%;height:100%;cursor:pointer;border-radius:inherit}
.pv-hit:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--turq)}
.js .pv-big{display:grid;position:absolute;z-index:3;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--saffron);color:#1b1103;place-items:center;
  pointer-events:none;opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s;box-shadow:0 12px 40px -10px rgba(0,0,0,.7)}
.pv-big svg{width:28px;height:28px;margin-left:4px}
.pv.is-paused .pv-big{opacity:1;transform:none}

/* sound: a "tap for sound" pill until someone taps, then a small mute button */
.js .pv-snd{display:inline-flex;position:absolute;z-index:4;left:50%;bottom:18px;transform:translateX(-50%);align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px 0 12px;border-radius:999px;
  background:rgba(18,12,26,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(245,236,220,.24);color:var(--text);font-size:.84rem;font-weight:600;white-space:nowrap;
  transition:border-color .2s,background .2s;animation:pv-nudge 2.6s ease-out infinite}
.pv-snd svg{width:18px;height:18px;flex:none}
.pv-snd:hover{border-color:var(--glow);background:rgba(18,12,26,.88)}
.pv-snd .on{display:none}
.pv:not(.is-muted) .pv-snd .on{display:block}
.pv:not(.is-muted) .pv-snd .off{display:none}
.js .pv.is-user .pv-snd{left:auto;right:14px;transform:none;width:40px;padding:0;animation:none}
.pv.is-user .pv-snd span{display:none}
.js .pv.is-paused:not(.is-user) .pv-snd{display:none}
@keyframes pv-nudge{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--glow) 55%,transparent)}70%,100%{box-shadow:0 0 0 14px transparent}}

/* what's playing, under the windows */
.pv-now{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:4px 12px;margin:0;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:center}
.pv-now .n{font-family:var(--serif);font-size:1.1rem;letter-spacing:0;color:var(--glow)}
.pv-now b{font-weight:500;color:var(--text)}

/* the end card, after the third clip */
.pv-end{position:absolute;inset:-14px;z-index:6;display:grid;place-items:center;padding:24px;text-align:center;border-radius:28px;
  background:radial-gradient(ellipse at 50% 38%,rgba(42,27,64,.9),rgba(18,12,26,.96) 75%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.pv.is-done .pv-end{opacity:1;visibility:visible;transition:opacity .5s}
.pv-rose{display:block;width:64px;height:64px;margin:0 auto 20px;animation:pv-spin 60s linear infinite}
@keyframes pv-spin{to{transform:rotate(360deg)}}
.pv-end h3{font-size:clamp(1.7rem,2.6vw,2.3rem);margin:12px 0 10px}
.pv-end p{color:var(--muted);font-size:.95rem;margin:0 auto;max-width:30ch}
.pv-end .ctas{justify-content:center;margin-top:24px}

/* "watch the preview" link in the hero */
.pv-cue{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:6px 16px 6px 8px;border-radius:999px;border:1px solid var(--line);background:rgba(18,12,26,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-decoration:none;font-size:.92rem;font-weight:600;color:var(--text);transition:border-color .2s,transform .2s}
.pv-cue:hover{border-color:var(--saffron);transform:translateY(-2px)}
.pv-cue .arches{display:flex;flex:none}
.pv-cue .arches img{width:24px;height:32px;object-fit:cover;border-radius:999px 999px 3px 3px;box-shadow:0 0 0 2px var(--ink2);margin-left:-6px}
.pv-cue .arches img:first-child{margin-left:0}
.pv-cue small{font-family:var(--mono);font-size:.72rem;font-weight:400;color:var(--dim)}
.now .pv-cue{grid-column:1/-1;justify-self:start;margin-top:0;background:rgba(18,12,26,.4)}
/* on the Ep. 45 page the hero runs past the fold, so on wide screens the link sits up top,
   level with the breadcrumbs, in the empty backdrop beside Rob */
@media (min-width:1200px){
  .ep-hero .pv-cue{position:absolute;top:128px;right:max(16px,calc((100% - 1240px) / 2));margin:0;width:176px;padding:16px 14px 14px;flex-direction:column;gap:10px;border-radius:24px;text-align:center;line-height:1.25;background:rgba(18,12,26,.82);box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
  .ep-hero .pv-cue .arches img{width:44px;height:60px;margin-left:-10px}
}

@media (max-width:1080px){
  .pv-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .pv-copy{display:contents}
  .pv-head{order:1}
  .pv-side{order:2;margin-top:44px}
  .pv-list{order:3;margin-top:44px;width:100%;max-width:720px;align-self:center}
  .pv-cta{order:4;align-self:center}
  .pv-head h2{max-width:none}
  .pv-stage{--A:min(338px,40vw,46vh)}
}
@media (max-width:640px){
  .pv-stage{--g:8px;--A:min(62vw,300px,58vh);--W:calc((100vw - 32px - var(--A) - 2 * var(--g)) / 2)}
  .pv-wing.l{transform:rotateY(16deg)}
  .pv-wing.r{transform:rotateY(-16deg)}
  .pv-wing .spine{font-size:.6rem;letter-spacing:.14em;bottom:14px}
  .js .pv-snd{bottom:12px;height:36px;font-size:.78rem}
  .js .pv.is-user .pv-snd{width:36px;right:10px}
  .js .pv-big{width:64px;height:64px;margin:-32px 0 0 -32px}
  .pv-pick{grid-template-columns:34px 1fr auto;gap:4px 10px}
  .pv-t b{font-size:1.15rem}
  .pv-jump{margin-left:44px;font-size:.64rem;letter-spacing:.05em}
  .pv-end{inset:-8px;padding:16px}
  .pv-rose{width:48px;height:48px;margin-bottom:14px}
  .pv-end .btn{padding:.75em 1.15em;font-size:.92rem}
}