/* dapsoul.com styles. Shared by home, radio/NN/ and press/. */
:root{
  --navy:#0E1320; --cream:#F5F2E8; --gold:#F2A341; --teal:#117F86; --red:#E4462B;
  --ink-soft:rgba(14,19,32,.62); --ink-grey:rgba(14,19,32,.55); --rule:rgba(14,19,32,.28); --rule-c:rgba(245,242,232,.2);
  --display:"Archivo","Arial Narrow",sans-serif;
  --mono:"Space Mono","Courier New",monospace;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px; --s8:64px; --s12:96px;
  /* statement size: the lab's "set big" size times --stmt-k (S1 .70 / S2 .55 / S3 .40) */
  --stmt-k:.55;
  --torn-a: polygon(0.0% 3.2px,2.3% 6.5px,4.5% 3.6px,6.8% 1.3px,9.0% 4.4px,11.8% 0.7px,13.6% 0.6px,16.5% 4.9px,17.7% 6.9px,20.9% 4.6px,23.3% 1.1px,24.5% 3.7px,25.9% 1.3px,27.5% 0.2px,29.7% 3.1px,32.6% 3.6px,35.0% 3.5px,37.6% 3.2px,39.3% 7.0px,42.5% 5.9px,45.1% 2.2px,46.8% 2.0px,48.1% 5.4px,50.1% 5.9px,52.1% 6.7px,55.0% 0.0px,56.6% 6.4px,58.7% 6.9px,60.7% 0.5px,63.2% 5.4px,64.9% 0.6px,66.8% 6.7px,69.5% 0.8px,71.2% 0.7px,72.5% 5.6px,74.1% 3.9px,76.2% 1.3px,78.8% 0.9px,81.3% 0.8px,83.4% 1.5px,85.1% 6.8px,87.9% 2.1px,90.9% 1.5px,92.9% 6.0px,95.4% 0.7px,98.5% 1.5px,100% 5.4px,100.0% calc(100% - 2.3px),98.2% calc(100% - 0.5px),96.8% calc(100% - 4.1px),95.1% calc(100% - 4.2px),93.2% calc(100% - 3.2px),90.1% calc(100% - 3.4px),87.7% calc(100% - 6.1px),86.2% calc(100% - 1.1px),83.1% calc(100% - 5.7px),81.4% calc(100% - 1.3px),78.8% calc(100% - 6.6px),77.2% calc(100% - 6.7px),74.2% calc(100% - 4.2px),72.2% calc(100% - 0.7px),70.9% calc(100% - 6.7px),69.2% calc(100% - 4.9px),67.5% calc(100% - 5.8px),65.1% calc(100% - 2.1px),63.6% calc(100% - 5.0px),62.2% calc(100% - 1.6px),59.9% calc(100% - 6.0px),57.5% calc(100% - 2.0px),54.4% calc(100% - 1.4px),53.2% calc(100% - 1.9px),51.1% calc(100% - 0.4px),49.6% calc(100% - 2.6px),47.2% calc(100% - 0.9px),45.3% calc(100% - 6.2px),42.1% calc(100% - 4.6px),39.5% calc(100% - 4.1px),38.1% calc(100% - 0.2px),36.8% calc(100% - 6.4px),34.2% calc(100% - 6.7px),33.0% calc(100% - 4.5px),30.8% calc(100% - 5.1px),29.0% calc(100% - 7.0px),27.6% calc(100% - 3.8px),25.0% calc(100% - 6.3px),22.3% calc(100% - 4.9px),19.5% calc(100% - 6.4px),17.6% calc(100% - 4.8px),14.6% calc(100% - 6.1px),12.6% calc(100% - 5.5px),9.6% calc(100% - 4.0px),7.2% calc(100% - 2.7px),4.8% calc(100% - 4.3px),3.5% calc(100% - 4.5px),0.3% calc(100% - 6.2px),0 calc(100% - 2.7px));
  --torn-b: polygon(0.0% 5.5px,3.1% 5.4px,4.5% 3.6px,6.5% 3.2px,8.0% 1.2px,10.1% 1.3px,12.2% 0.1px,13.5% 4.3px,15.6% 3.1px,18.3% 2.2px,19.6% 4.7px,21.9% 3.9px,24.4% 5.8px,26.3% 4.6px,28.3% 3.4px,30.8% 1.9px,32.1% 2.8px,34.8% 3.5px,36.9% 3.9px,38.4% 1.1px,40.3% 4.9px,41.9% 0.7px,43.3% 0.2px,45.0% 3.4px,47.9% 2.0px,49.8% 1.7px,51.6% 4.7px,53.9% 1.6px,55.3% 4.7px,57.9% 5.0px,59.6% 3.3px,62.7% 3.6px,65.7% 1.0px,68.9% 0.3px,70.9% 0.1px,73.7% 4.1px,76.9% 4.8px,80.0% 3.2px,83.2% 4.5px,85.1% 5.8px,87.0% 1.2px,88.4% 2.8px,90.0% 5.6px,93.1% 1.3px,94.5% 3.2px,96.0% 3.3px,98.8% 1.5px,100% 5.4px,100.0% calc(100% - 2.7px),98.1% calc(100% - 5.4px),95.3% calc(100% - 5.4px),92.7% calc(100% - 2.5px),90.1% calc(100% - 5.0px),87.6% calc(100% - 1.4px),85.9% calc(100% - 2.5px),83.1% calc(100% - 3.3px),80.8% calc(100% - 5.0px),79.4% calc(100% - 3.8px),77.5% calc(100% - 3.4px),74.7% calc(100% - 1.5px),71.6% calc(100% - 0.5px),69.2% calc(100% - 3.3px),67.6% calc(100% - 3.4px),65.4% calc(100% - 2.7px),62.8% calc(100% - 0.0px),60.8% calc(100% - 4.7px),59.3% calc(100% - 5.2px),57.7% calc(100% - 4.1px),56.2% calc(100% - 2.7px),54.1% calc(100% - 0.5px),51.5% calc(100% - 2.9px),49.0% calc(100% - 3.2px),46.7% calc(100% - 3.2px),44.9% calc(100% - 5.4px),43.5% calc(100% - 5.3px),40.6% calc(100% - 3.0px),37.8% calc(100% - 4.0px),35.4% calc(100% - 1.7px),33.6% calc(100% - 2.1px),31.8% calc(100% - 5.8px),29.9% calc(100% - 2.3px),27.8% calc(100% - 4.9px),25.7% calc(100% - 3.3px),24.0% calc(100% - 1.7px),22.6% calc(100% - 1.3px),20.9% calc(100% - 5.1px),18.7% calc(100% - 0.7px),16.5% calc(100% - 0.7px),14.2% calc(100% - 2.7px),11.3% calc(100% - 1.6px),8.4% calc(100% - 1.5px),5.2% calc(100% - 3.8px),3.9% calc(100% - 4.8px),2.2% calc(100% - 2.2px),0.7% calc(100% - 5.0px),0 calc(100% - 4.4px));
  --torn-c: polygon(0.0% 5.5px,1.4% 4.9px,4.3% 6.7px,6.5% 5.0px,8.4% 4.2px,9.9% 5.5px,12.3% 2.3px,14.2% 5.9px,16.3% 7.7px,19.4% 6.7px,20.8% 0.6px,22.6% 2.9px,25.2% 6.6px,27.5% 5.1px,29.9% 0.3px,32.1% 1.7px,34.2% 0.1px,36.7% 7.3px,38.0% 4.6px,39.3% 2.8px,40.8% 6.9px,43.4% 7.2px,45.1% 5.8px,47.7% 4.1px,50.7% 5.0px,52.5% 5.7px,54.6% 1.7px,57.1% 0.4px,59.2% 4.5px,60.4% 5.2px,61.7% 5.2px,63.6% 0.2px,66.8% 0.5px,68.3% 4.0px,70.0% 4.2px,72.2% 4.6px,74.5% 2.4px,76.1% 5.6px,78.1% 4.2px,81.2% 0.1px,82.9% 4.5px,84.2% 6.0px,86.2% 2.5px,87.8% 7.7px,89.1% 6.6px,91.7% 7.2px,94.3% 2.8px,96.6% 7.4px,97.9% 6.8px,100% 1.6px,100.0% calc(100% - 7.7px),98.2% calc(100% - 0.0px),96.5% calc(100% - 4.1px),95.2% calc(100% - 4.7px),93.1% calc(100% - 2.7px),90.4% calc(100% - 4.9px),87.3% calc(100% - 7.0px),84.4% calc(100% - 7.5px),81.5% calc(100% - 3.9px),80.1% calc(100% - 3.6px),77.7% calc(100% - 7.8px),75.2% calc(100% - 4.6px),73.8% calc(100% - 5.2px),72.5% calc(100% - 1.1px),71.2% calc(100% - 5.9px),68.2% calc(100% - 4.8px),66.8% calc(100% - 5.9px),65.2% calc(100% - 5.7px),62.7% calc(100% - 7.6px),61.2% calc(100% - 1.9px),59.3% calc(100% - 0.6px),56.2% calc(100% - 5.0px),54.8% calc(100% - 3.8px),53.4% calc(100% - 7.7px),51.5% calc(100% - 0.0px),48.8% calc(100% - 2.6px),46.3% calc(100% - 6.3px),45.0% calc(100% - 4.4px),41.9% calc(100% - 1.8px),40.2% calc(100% - 5.4px),38.8% calc(100% - 6.6px),36.0% calc(100% - 7.6px),33.2% calc(100% - 4.6px),31.1% calc(100% - 4.3px),28.6% calc(100% - 7.8px),27.1% calc(100% - 4.0px),25.0% calc(100% - 2.0px),23.5% calc(100% - 6.3px),21.1% calc(100% - 5.5px),19.4% calc(100% - 3.8px),17.9% calc(100% - 1.2px),16.4% calc(100% - 5.2px),13.5% calc(100% - 4.6px),10.7% calc(100% - 0.6px),8.5% calc(100% - 1.1px),6.2% calc(100% - 2.0px),4.5% calc(100% - 7.3px),2.2% calc(100% - 1.9px),0.1% calc(100% - 2.3px),0 calc(100% - 3.2px));
  --torn-d: polygon(0.0% 3.0px,1.7% 1.3px,4.7% 4.6px,7.3% 4.4px,9.2% 5.9px,11.6% 6.2px,14.1% 6.7px,16.2% 1.2px,17.7% 5.8px,19.2% 5.2px,21.7% 0.5px,24.4% 0.3px,27.4% 6.7px,29.0% 5.8px,31.7% 1.0px,34.2% 1.0px,37.2% 5.5px,40.4% 0.4px,42.2% 5.0px,44.6% 1.5px,47.6% 6.8px,49.4% 1.2px,52.0% 3.3px,54.5% 3.9px,56.5% 0.2px,57.9% 3.7px,60.6% 3.4px,63.3% 4.3px,66.3% 5.2px,68.1% 1.1px,69.4% 0.3px,72.4% 7.0px,75.1% 0.9px,77.6% 1.0px,80.6% 5.2px,83.3% 4.9px,85.3% 6.8px,88.4% 1.9px,90.5% 5.9px,93.0% 3.3px,95.1% 7.7px,96.9% 1.7px,99.5% 2.2px,100% 2.6px,100% 100%,0 100%);
}
html[data-stmt="S1"]{--stmt-k:.70}
html[data-stmt="S3"]{--stmt-k:.40}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--navy);-webkit-text-size-adjust:100%;overflow-x:clip}   /* viewport-level only: nothing inside the page clips the hero */
body{background:var(--navy);color:var(--cream);font:15px/1.5 var(--mono);padding:var(--s2) var(--s2) var(--s8)}
a{color:inherit}
img,video{display:block;max-width:100%}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wall{max-width:1180px;margin:0 auto}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.label{font:700 13px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.typed{font:700 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.wide{font-family:var(--display);font-variation-settings:"wdth" 125;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:.86}
.mis{color:var(--navy);text-shadow:max(1px,.08em) max(1px,.06em) 0 var(--teal)}

/* ---------- paper (v1: flat cream, grey tape, no shadows, torn edges) ---------- */
.paper{background:var(--cream);color:var(--navy)}
.pin{position:relative}
.tape{position:absolute;z-index:4;width:84px;height:24px;background:rgba(245,242,232,.62);pointer-events:none;
  clip-path:polygon(3% 0,97% 6%,100% 40%,96% 100%,2% 92%,0 55%)}

/* ---------- 1. opening flyer ----------
   The torn sheet is drawn by ::before, so the flyer itself clips nothing: the raised hand can rise past any edge. */
.flyer{position:relative;isolation:isolate;transform:rotate(-.6deg);padding:var(--s2) var(--s2) var(--s4);color:var(--navy);
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"strip" "logo" "line" "stage" "player"}
.flyer::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cream);clip-path:var(--torn-a)}
.pin.open .tape.a{top:-10px;left:18px;transform:rotate(-6deg)}
.pin.open .tape.b{top:-9px;right:22px;transform:rotate(5deg)}

/* top strip: v1, quieter */
.strip{grid-area:strip;display:flex;align-items:baseline;gap:12px;color:var(--ink-grey);
  border-bottom:3px solid var(--ink-grey);padding-bottom:var(--s1)}

/* logo: v1 full artboard */
.logo{grid-area:logo;position:relative;margin:18px -4px 6px;aspect-ratio:2700/1233}
.logo svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.logo .reg{fill:var(--gold);transform:translate(3px,2px)}
.logo .ink{fill:var(--navy);mix-blend-mode:multiply}

/* statement: his line in the v1 display type, size set by --stmt-k */
.statement{grid-area:line;min-width:0}
.largeline{font-size:calc(clamp(24px,7.6vw,56px) * var(--stmt-k));line-height:1;margin:14px 0 4px;text-wrap:balance}
.largeline span{white-space:nowrap}

/* hero: torn frame, the arm breaks out over the torn top edge */
.heroarea{grid-area:stage;position:relative;z-index:1;min-width:0}
.stage{position:relative;aspect-ratio:1600/2000;--ft:26%;--fb:14%;margin:var(--stage-top,-4%) 0 -17.5%}
.stage{
  --torn-room:polygon(0% calc(var(--ft) + 4px),3.7% calc(var(--ft) + 2.0px),4.7% calc(var(--ft) + 4.6px),5.8% calc(var(--ft) + 4.2px),6.0% calc(var(--ft) + 7.0px),6.3% calc(var(--ft) + 5.8px),7.0% calc(var(--ft) + 2.3px),7.2% calc(var(--ft) + 7.8px),9.1% calc(var(--ft) + 0.9px),11.8% calc(var(--ft) + 3.3px),12.4% calc(var(--ft) + 6.1px),14.4% calc(var(--ft) + 1.2px),15.1% calc(var(--ft) + 3.9px),18.1% calc(var(--ft) + 0.3px),20.6% calc(var(--ft) + 5.3px),22.3% calc(var(--ft) + 6.1px),29.0% calc(var(--ft) + 4.6px),30.0% calc(var(--ft) + 7.0px),30.8% calc(var(--ft) + 2.5px),31.4% calc(var(--ft) + 5.6px),32.4% calc(var(--ft) + 4.8px),36.6% calc(var(--ft) + 4.6px),37.2% calc(var(--ft) + 3.6px),39.7% calc(var(--ft) + 6.7px),42.5% calc(var(--ft) + 7.6px),42.8% calc(var(--ft) + 3.8px),43.4% calc(var(--ft) + 5.3px),45.3% calc(var(--ft) + 0.5px),50.7% calc(var(--ft) + 5.6px),53.6% calc(var(--ft) + 5.2px),54.8% calc(var(--ft) + 7.9px),57.7% calc(var(--ft) + 6.6px),58.2% calc(var(--ft) + 2.3px),58.6% calc(var(--ft) + 3.1px),62.7% calc(var(--ft) + 5.3px),63.9% calc(var(--ft) + 0.2px),65.1% calc(var(--ft) + 3.7px),68.0% calc(var(--ft) + 1.3px),69.9% calc(var(--ft) + 0.9px),79.4% calc(var(--ft) + 0.5px),81.6% calc(var(--ft) + 6.1px),82.7% calc(var(--ft) + 1.0px),85.8% calc(var(--ft) + 2.0px),94.8% calc(var(--ft) + 3.1px),97.6% calc(var(--ft) + 7.0px),100% calc(var(--ft) + 3px),100% calc(100% - var(--fb) - 5px),95.8% calc(100% - var(--fb) - 5.9px),95.3% calc(100% - var(--fb) - 6.5px),90.0% calc(100% - var(--fb) - 6.4px),88.4% calc(100% - var(--fb) - 6.8px),88.3% calc(100% - var(--fb) - 7.9px),87.5% calc(100% - var(--fb) - 6.5px),86.4% calc(100% - var(--fb) - 1.8px),81.9% calc(100% - var(--fb) - 2.6px),79.8% calc(100% - var(--fb) - 6.2px),78.0% calc(100% - var(--fb) - 4.3px),69.0% calc(100% - var(--fb) - 6.2px),67.6% calc(100% - var(--fb) - 1.3px),63.4% calc(100% - var(--fb) - 2.9px),61.8% calc(100% - var(--fb) - 2.1px),58.9% calc(100% - var(--fb) - 5.6px),56.6% calc(100% - var(--fb) - 6.9px),54.9% calc(100% - var(--fb) - 7.8px),51.5% calc(100% - var(--fb) - 4.2px),48.5% calc(100% - var(--fb) - 0.2px),44.9% calc(100% - var(--fb) - 4.3px),41.9% calc(100% - var(--fb) - 1.2px),41.5% calc(100% - var(--fb) - 4.2px),39.9% calc(100% - var(--fb) - 7.6px),39.2% calc(100% - var(--fb) - 0.2px),36.9% calc(100% - var(--fb) - 1.3px),35.9% calc(100% - var(--fb) - 6.6px),34.0% calc(100% - var(--fb) - 2.1px),27.8% calc(100% - var(--fb) - 2.7px),26.3% calc(100% - var(--fb) - 0.8px),23.3% calc(100% - var(--fb) - 0.7px),23.2% calc(100% - var(--fb) - 3.9px),20.9% calc(100% - var(--fb) - 3.7px),17.6% calc(100% - var(--fb) - 7.9px),16.2% calc(100% - var(--fb) - 6.8px),15.1% calc(100% - var(--fb) - 1.0px),15.1% calc(100% - var(--fb) - 2.9px),10.4% calc(100% - var(--fb) - 2.8px),8.1% calc(100% - var(--fb) - 2.0px),6.7% calc(100% - var(--fb) - 1.2px),6.2% calc(100% - var(--fb) - 4.9px),5.4% calc(100% - var(--fb) - 7.0px),5.3% calc(100% - var(--fb) - 0.2px),0.4% calc(100% - var(--fb) - 2.9px),0.0% calc(100% - var(--fb) - 0.8px),0% calc(100% - var(--fb) - 3px));
  --torn-cut:polygon(0 0,100% 0,100% calc(100% - var(--fb) - 5px),95.8% calc(100% - var(--fb) - 5.9px),95.3% calc(100% - var(--fb) - 6.5px),90.0% calc(100% - var(--fb) - 6.4px),88.4% calc(100% - var(--fb) - 6.8px),88.3% calc(100% - var(--fb) - 7.9px),87.5% calc(100% - var(--fb) - 6.5px),86.4% calc(100% - var(--fb) - 1.8px),81.9% calc(100% - var(--fb) - 2.6px),79.8% calc(100% - var(--fb) - 6.2px),78.0% calc(100% - var(--fb) - 4.3px),69.0% calc(100% - var(--fb) - 6.2px),67.6% calc(100% - var(--fb) - 1.3px),63.4% calc(100% - var(--fb) - 2.9px),61.8% calc(100% - var(--fb) - 2.1px),58.9% calc(100% - var(--fb) - 5.6px),56.6% calc(100% - var(--fb) - 6.9px),54.9% calc(100% - var(--fb) - 7.8px),51.5% calc(100% - var(--fb) - 4.2px),48.5% calc(100% - var(--fb) - 0.2px),44.9% calc(100% - var(--fb) - 4.3px),41.9% calc(100% - var(--fb) - 1.2px),41.5% calc(100% - var(--fb) - 4.2px),39.9% calc(100% - var(--fb) - 7.6px),39.2% calc(100% - var(--fb) - 0.2px),36.9% calc(100% - var(--fb) - 1.3px),35.9% calc(100% - var(--fb) - 6.6px),34.0% calc(100% - var(--fb) - 2.1px),27.8% calc(100% - var(--fb) - 2.7px),26.3% calc(100% - var(--fb) - 0.8px),23.3% calc(100% - var(--fb) - 0.7px),23.2% calc(100% - var(--fb) - 3.9px),20.9% calc(100% - var(--fb) - 3.7px),17.6% calc(100% - var(--fb) - 7.9px),16.2% calc(100% - var(--fb) - 6.8px),15.1% calc(100% - var(--fb) - 1.0px),15.1% calc(100% - var(--fb) - 2.9px),10.4% calc(100% - var(--fb) - 2.8px),8.1% calc(100% - var(--fb) - 2.0px),6.7% calc(100% - var(--fb) - 1.2px),6.2% calc(100% - var(--fb) - 4.9px),5.4% calc(100% - var(--fb) - 7.0px),5.3% calc(100% - var(--fb) - 0.2px),0.4% calc(100% - var(--fb) - 2.9px),0.0% calc(100% - var(--fb) - 0.8px),0% calc(100% - var(--fb) - 3px));
}
.stage img{position:absolute;inset:0;width:100%;height:100%}
.stage .room{clip-path:var(--torn-room)}
.stage .cut{clip-path:var(--torn-cut)}   /* trims only the bottom torn edge; the top of the image is never cut */
.stage .tape.tl{top:calc(var(--ft) - 4px);left:-10px;transform:rotate(-38deg);z-index:3}
.stage .tape.tr{top:calc(var(--ft) - 2px);right:-12px;transform:rotate(36deg);z-index:0}

/* ---------- 2. the listening area (v2 player) ---------- */
.player{grid-area:player;position:relative;z-index:2;background:var(--navy);color:var(--cream);
  margin:-32px -4px 0;padding:var(--s2);display:grid;column-gap:var(--s2);row-gap:var(--s1);
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"btn meta" "bar bar" "time time" "cover cover" "said said"}
.pl-meta{grid-area:meta;align-self:center;min-width:0;transition:opacity .25s ease}
.pl-kick{display:flex;gap:var(--s1);align-items:center;color:var(--gold)}
.pl-kick .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);opacity:0;transition:opacity .3s}
.player[data-state="playing"] .pl-kick .dot{opacity:1}
.pl-ep{font-size:13px;letter-spacing:.04em;opacity:.8}
.pl-title{font-family:var(--display);font-variation-settings:"wdth" 125;font-weight:900;text-transform:uppercase;
  font-size:22px;line-height:1;letter-spacing:-.005em;margin-top:2px;overflow-wrap:anywhere}
.pl-title .dur{font:400 13px/1 var(--mono);letter-spacing:.02em;margin-left:var(--s1);vertical-align:2px;opacity:.8}
.pl-btn{grid-area:btn;align-self:center;position:relative;width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;
  background:var(--gold);color:var(--navy);box-shadow:0 4px 0 #9a5f1c;transition:transform .08s ease, box-shadow .08s ease}
.pl-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #9a5f1c}
.pl-btn svg{position:absolute;inset:0;margin:auto;width:26px;height:26px;fill:currentColor}
.pl-btn .i-pause,.pl-btn .i-wait{display:none}
.player[data-state="playing"] .pl-btn .i-play{display:none}
.player[data-state="playing"] .pl-btn .i-pause{display:block}
.player[data-state="loading"] .pl-btn{background:transparent;box-shadow:inset 0 0 0 2px rgba(242,163,65,.55);color:var(--gold);cursor:progress}
.player[data-state="loading"] .pl-btn .i-play{display:none}
.player[data-state="loading"] .pl-btn .i-wait{display:block}
.i-wait circle{animation:wait 1.2s ease-in-out infinite}
.i-wait circle:nth-child(2){animation-delay:.2s}.i-wait circle:nth-child(3){animation-delay:.4s}
@keyframes wait{0%,100%{opacity:.25}50%{opacity:1}}
.pl-bar{grid-area:bar;position:relative;height:24px;cursor:pointer;touch-action:none;margin-top:var(--s1)}
.pl-bar::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;background:var(--rule-c)}
.pl-fill{position:absolute;left:0;top:10px;height:4px;width:0;background:var(--gold)}
.pl-knob{position:absolute;top:6px;left:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--cream)}
.player[data-state="loading"] .pl-knob{opacity:.3}
.pl-time{grid-area:time;display:flex;justify-content:space-between;font-size:13px;opacity:.8;font-variant-numeric:tabular-nums}
.pl-cover{grid-area:cover;margin-top:var(--s1);transition:opacity .25s ease}
.pl-cover img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.pl-cover[hidden]{display:none}
.player.swap .pl-cover,.player.swap .pl-meta{opacity:.15}
.said{grid-area:said;font-size:13px;line-height:1.5;opacity:.85;margin-top:var(--s1)}
.said[hidden]{display:none}
.pl-fail{grid-area:bar;display:none;margin-top:var(--s1)}
.pl-fail a{display:inline-block;font:700 15px/1 var(--mono);color:var(--navy);background:var(--gold);padding:12px var(--s2);text-decoration:none}
.pl-fail a:hover,.pl-fail a:focus-visible{background:var(--cream)}
.player[data-state="error"] .pl-btn,.player[data-state="error"] .pl-bar,.player[data-state="error"] .pl-time{display:none}
.player[data-state="error"] .pl-fail{display:block}
.player[data-state="error"]{grid-template-areas:"meta meta" "bar bar" "cover cover" "said said"}
.sc{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;border:0;pointer-events:none}

/* ---------- 3. photo: one and done (the room, alone) ---------- */
.photos{margin:var(--s12) 0 0}
.cap{font-size:13px;letter-spacing:.02em;color:rgba(245,242,232,.7)}
.mcap{font:400 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ph1 img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%}
.ph1 .cap{margin-top:var(--s1);text-align:right}

/* ---------- 3b. motion: four concepts, one shown (?motion=1..4). Silent, on screen only, still with reduced motion ---------- */
html:not([data-motion="1"]) .mo1, html:not([data-motion="2"]) .mo2,
html:not([data-motion="3"]) .mo3, html:not([data-motion="4"]) .mo4{display:none!important}
.motion{margin:var(--s12) 0 0;min-width:0}
.motion video{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:var(--navy)}
/* M1 slow dissolve: one print, six stills crossfading */
.mo1{display:flex;justify-content:flex-end;padding-right:4%}
.dis{position:relative;width:84%;max-width:440px;background:var(--cream);padding:8px;transform:rotate(.8deg)}
.dis .tape{top:-11px;left:50%;margin-left:-42px;transform:rotate(-3deg)}
.dis .win{position:relative;aspect-ratio:4/5;background:var(--navy);overflow:hidden}
.dis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.dis img.on{opacity:1}
/* M2 moving strip: the filmstrip moves in here and drifts (see script) */
.motion .filmsec{margin:0}
.filmsec.drift .filmscroll{scroll-snap-type:none;scrollbar-width:none}
.filmsec.drift .filmscroll::-webkit-scrollbar{display:none}
.filmsec.drift .film .tape{display:none}
/* M3 booth reel: one phone video, printed */
.mo3{display:flex;justify-content:center}
.reel{position:relative;width:min(66%,300px);background:var(--cream);color:var(--navy);padding:10px 10px 40px;transform:rotate(-1.2deg)}
.reel .tape{top:-11px;left:50%;margin-left:-42px;transform:rotate(4deg)}
.reel .mcap{position:absolute;left:10px;right:10px;bottom:13px;color:var(--ink-soft)}
/* M4 live photos: three short loops on one sheet */
.mo4 .sheet{background:var(--cream);color:var(--navy);padding:10px 10px 12px;transform:rotate(-.4deg)}
.mo4 ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mo4 .mcap{margin-top:6px;font-size:10px;color:var(--ink-soft)}

/* ---------- 4. archive ---------- */
.archive{margin:var(--s12) 0 0;display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s8)}
.hd{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s2);padding-bottom:var(--s1)}
.hd h2{font-family:var(--display);font-variation-settings:"wdth" 125;font-weight:900;text-transform:uppercase;font-size:clamp(26px,8vw,40px);line-height:.95;letter-spacing:-.01em}
.hd h2 a{text-decoration:none}
.hd h2 a:hover,.hd h2 a:focus-visible{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--gold);text-underline-offset:5px}
.hd .ext{font:700 .45em/1 var(--mono);color:var(--teal);vertical-align:.9em;margin-left:.15em}
.hd .label{opacity:.7;font-weight:400}
.mixes,.rooms{background:var(--cream);color:var(--navy);padding:34px 20px 30px}
.mixes{clip-path:var(--torn-b);transform:rotate(.5deg)}
.rooms{clip-path:var(--torn-c);transform:rotate(-.4deg);align-self:start}
.mixes .hd,.rooms h2{border-bottom:3px double var(--navy)}
.tracks{list-style:none}
.tracks .row{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;column-gap:var(--s1);align-items:baseline;
  text-decoration:none;padding:var(--s1) 0 var(--s1);min-height:44px}
.tracks .n{font-size:13px;opacity:.7}
.tracks .t{font:700 15px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.tracks .go{font-size:13px;opacity:.7;font-variant-numeric:tabular-nums}
.tracks .g{grid-column:2/4;font-size:13px;letter-spacing:.02em;text-transform:lowercase;opacity:.6}
.tracks .new{font:700 13px/1 var(--mono);color:var(--navy);background:var(--gold);padding:1px 5px;margin-left:var(--s1);vertical-align:1px;text-transform:lowercase}
.tracks .row:hover .t,.tracks .row:focus-visible .t{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.tracks .row::before{content:"";position:absolute;left:-10px;top:var(--s1);bottom:var(--s1);width:3px;background:var(--gold);transform:scaleY(0);transition:transform .2s ease}
.tracks .row[aria-current="true"]::before{transform:scaleY(1)}
.tracks .row[aria-current="true"] .n{color:var(--navy);opacity:1;font-weight:700}
.tracks .row.playing::before{animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.35}}
details{margin-top:var(--s2)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s2);padding:var(--s1) 0;border-bottom:1px dashed rgba(14,19,32,.45);font-size:13px;letter-spacing:.04em}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:700;color:var(--navy)}
details[open] summary::after{content:"\2013"}
.allsc{display:inline-block;margin-top:var(--s2);font-size:13px}
.rooms h2{font:700 13px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding-bottom:var(--s1)}
.roomlist{list-style:none}
.roomlist li{font:700 15px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:var(--s1) 0;border-bottom:1px dashed rgba(14,19,32,.45)}

/* ---------- 5. filmstrip (v1, no date) ---------- */
.filmsec{margin:var(--s12) 0 0;min-width:0}
.filmsec .sheet1{position:relative;clip-path:var(--torn-b);transform:rotate(.35deg);padding:30px 20px 26px}
.filmsec .fh{font:700 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.staple{position:absolute;z-index:3;top:9px;width:26px;height:4px;background:var(--navy);
  box-shadow:0 1px 0 rgba(245,242,232,.5), inset 0 1px 0 rgba(245,242,232,.35);border-radius:1px}
.staple::before,.staple::after{content:"";position:absolute;top:-2px;width:3px;height:6px;background:var(--navy)}
.staple::before{left:0}.staple::after{right:0}
.filmscroll{margin:0 -20px;padding:14px 20px 16px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding:0 20px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--navy) transparent}
.film{position:relative;width:max-content;background:var(--navy);padding:36px 14px;transform:rotate(-.5deg);
  --holes:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12'%3E%3Crect x='6' y='1' width='10' height='10' rx='2.2' fill='%23F5F2E8'/%3E%3C/svg%3E")}
.film::before,.film::after{content:"";position:absolute;left:4px;right:4px;height:12px;background:var(--holes) repeat-x 0 0/22px 12px}
.film::before{top:8px}.film::after{bottom:8px}
.frames1{display:flex;gap:10px;list-style:none}
.fm{position:relative;flex:0 0 124px;scroll-snap-align:start}
.fm img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;filter:saturate(.85) contrast(1.04)}
.fn1{position:absolute;left:2px;right:2px;bottom:-16px;display:flex;justify-content:space-between;font:700 9px/1 var(--mono);letter-spacing:.08em;color:var(--gold)}
.fn1 b{font-weight:700;opacity:.8}
.film .tape{width:40px;height:80px;top:50%;margin-top:-40px}
.film .fe1{left:-12px;transform:rotate(-4deg)}
.film .fe2{right:-12px;transform:rotate(5deg)}

/* ---------- 6. close: tear-off tabs (v2) ---------- */
.close{margin:var(--s12) auto 0;max-width:640px}
.tear{clip-path:var(--torn-d);transform:rotate(.3deg);padding:var(--s4) 0 0}
.pin.close .tape.a{top:-8px;left:30px;transform:rotate(-4deg)}
.tear-hd{padding:0 var(--s2) var(--s2);display:flex;justify-content:space-between;align-items:baseline}
.tear-hd .label{font-weight:400;color:var(--ink-soft)}
.tabs{display:flex;justify-content:center;border-top:1.5px dashed var(--navy);list-style:none}
.tabs li{flex:0 0 52px;border-right:1.5px dashed var(--navy);min-width:0;transition:transform .18s ease;background:var(--cream)}
.tabs li:first-child{border-left:1.5px dashed var(--navy)}
.tabs li.gone{flex:0 0 44px;background:var(--navy);border-right:0;position:relative}
.tabs li.gone::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:var(--cream);
  clip-path:polygon(0 0,100% 0,100% 55%,86% 90%,70% 50%,52% 100%,34% 60%,16% 95%,0 55%)}
.tabs li.gone + li{border-left:1.5px dashed var(--navy)}
.tabs li:hover,.tabs li:focus-within{transform:translateY(-4px)}
.tab{width:100%;display:flex;align-items:center;justify-content:center;min-height:184px;padding:var(--s2) 2px;text-decoration:none;
  writing-mode:vertical-rl;transform:rotate(180deg);font:700 15px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.tab:focus-visible{outline:2px solid var(--navy);outline-offset:-4px}
.tabs li.email{flex-basis:60px;background:var(--gold)}
.tabs li.email .tab{font-size:17px}
.foot{text-align:center;margin:var(--s3) 0 0;font:italic 15px/1.4 var(--mono);color:rgba(245,242,232,.75)}

/* ---------- mid widths ---------- */
@media (min-width:600px) and (max-width:899px){.pin.open{max-width:560px;margin:0 auto}}
@media (min-width:700px){
  .mo4 .sheet{max-width:760px;margin:0 auto;padding:var(--s3) var(--s3) var(--s2)}
  .mo4 ul{gap:var(--s3)}
  .mo4 .mcap{font-size:11px}
}
/* ---------- desktop ---------- */
@media (min-width:900px){
  body{padding:var(--s5) var(--s4) var(--s12)}
  .flyer{padding:var(--s3) var(--s5) var(--s6);column-gap:var(--s5);
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;
    grid-template-areas:"strip strip" "logo stage" "line stage" ". stage" "player stage"}
  .largeline{font-size:calc(50px * var(--stmt-k));margin-top:var(--s3)}
  .stage{--ft:24%;--fb:5%;margin:var(--stage-top-d,-1%) 0 -6.25%;align-self:start}
  .player{align-self:end;margin:var(--s4) calc(-1 * var(--s12)) var(--s5) 0;padding:var(--s3);column-gap:var(--s3);
    grid-template-columns:200px minmax(0,1fr) auto;grid-template-areas:"cover meta btn" "bar bar bar" "time time time" "said said said"}
  .player[data-state="error"]{grid-template-areas:"cover meta meta" "bar bar bar" "said said said"}
  .pl-cover{margin:0;align-self:center}
  .pl-btn{width:76px;height:76px}
  .pl-btn svg{width:30px;height:30px}
  .pl-title{font-size:26px}
  .ph1 img{aspect-ratio:4/3;object-position:50% 58%}
  .mo1{padding-right:12%}
  .dis{padding:10px}
  .reel{padding:12px 12px 44px}
  .archive{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s8)}
  .mixes,.rooms{padding:40px 36px 36px}
  .filmsec .sheet1{padding:34px 36px 30px}
  .filmscroll{margin:0 -36px;padding:14px 36px 16px;overflow:visible}
  .film{width:100%}
  .fm{flex:1 1 0;min-width:0}
  .filmsec.drift .filmscroll{overflow-x:auto}
  .filmsec.drift .film{width:max-content}
  .filmsec.drift .fm{flex:0 0 150px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .tabs li:hover,.tabs li:focus-within{transform:none}
}

/* =====================================================================
   v4: the listening room. Everything below is new in v4.
   ?fx=1|2|3 sets how much the flyer moves (1 quiet / 2 default / 3 loud). Reduced motion flattens all of it.
   ===================================================================== */

/* ---------- archive rows: the row plays here, SC ↗ is the optional way out ---------- */
.tracks li{display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:stretch;border-bottom:1px dashed rgba(14,19,32,.45);transition:opacity .25s ease}
.tracks .scx{display:flex;align-items:center;justify-content:flex-end;min-height:44px;font:700 11px/1 var(--mono);letter-spacing:.06em;
  text-decoration:none;opacity:.5}
.tracks .scx:hover,.tracks .scx:focus-visible{opacity:1;color:var(--teal)}

/* ---------- player links line + resume ---------- */
.pl-links{grid-area:links;display:flex;flex-wrap:wrap;column-gap:var(--s3);row-gap:0;font-size:13px;letter-spacing:.02em}
.pl-links a,.pl-links button{display:inline-flex;align-items:center;min-height:44px;color:inherit;opacity:.85;text-decoration:underline;
  text-decoration-color:rgba(245,242,232,.35);text-underline-offset:4px;background:none;border:0;font:inherit;cursor:pointer;padding:0}
.pl-links a:hover,.pl-links a:focus-visible,.pl-links button:hover,.pl-links button:focus-visible{opacity:1;text-decoration-color:var(--gold)}
.pl-links [hidden]{display:none}
.player{grid-template-areas:"btn meta" "bar bar" "time time" "links links" "cover cover" "said said"}
.player[data-state="error"]{grid-template-areas:"meta meta" "bar bar" "links links" "cover cover" "said said"}
.pl-route{color:var(--gold)}

/* ---------- ON AIR lamp (top strip) ---------- */
.strip .onair{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 7px 3px;border:1.5px solid currentColor;
  font:700 10px/1 var(--mono);letter-spacing:.16em;color:var(--ink-grey);transition:color .5s ease,background-color .5s ease,border-color .5s ease,box-shadow .7s ease}
.onair i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.45;transition:opacity .5s ease}
html[data-air="on"] .onair{color:var(--cream);background:var(--red);border-color:var(--red)}
html[data-air="on"] .onair i{opacity:1}
html[data-fx="2"][data-air="on"] .onair,html[data-fx="3"][data-air="on"] .onair{box-shadow:0 0 12px 1px rgba(228,70,43,.55);animation:warmup .9s linear 1}
html[data-fx="3"][data-air="on"] .onair{animation:warmup .9s linear 1, glow 2.4s ease-in-out .9s infinite}
@keyframes warmup{0%{background:transparent;color:var(--ink-grey)}8%{background:var(--red);color:var(--cream)}14%{background:transparent;color:var(--ink-grey)}
  26%{background:var(--red);color:var(--cream)}31%{background:rgba(228,70,43,.4)}40%,100%{background:var(--red);color:var(--cream)}}
@keyframes glow{50%{box-shadow:0 0 22px 4px rgba(228,70,43,.7)}}
.strip .next{color:var(--navy);font-weight:700}
.strip .next[hidden]{display:none}

/* ---------- the play button as hardware ---------- */
html[data-fx="2"] .pl-btn,html[data-fx="3"] .pl-btn{box-shadow:0 6px 0 #9a5f1c,0 9px 14px rgba(0,0,0,.35);
  transition:transform .16s cubic-bezier(.3,1.8,.5,1),box-shadow .16s ease}
html[data-fx="2"] .pl-btn:active,html[data-fx="3"] .pl-btn:active{transform:translateY(6px);box-shadow:0 0 0 #9a5f1c,0 2px 3px rgba(0,0,0,.4);transition-duration:.05s}
/* latched while playing, like a switch that stays down */
html[data-fx="2"] .player[data-state="playing"] .pl-btn,html[data-fx="3"] .player[data-state="playing"] .pl-btn{transform:translateY(3px);box-shadow:0 3px 0 #9a5f1c,0 5px 8px rgba(0,0,0,.35)}

/* ---------- VU needle (fx 3 only). Driven by play state, not real levels: the audio is SoundCloud's, out of reach ---------- */
.vu{display:none;width:44px;height:24px;margin-left:var(--s1)}
html[data-fx="3"] .vu{display:inline-block}
html[data-fx="3"] .pl-kick .dot{display:none}
.vu .arc{fill:none;stroke:rgba(242,163,65,.5);stroke-width:1.5}
.vu .ndl{stroke:var(--gold);stroke-width:2;stroke-linecap:round;transform-origin:22px 22px;transform:rotate(-50deg);transition:transform .6s ease}
.player[data-state="playing"] .vu .ndl{animation:needle 2.3s ease-in-out infinite}
@keyframes needle{0%{transform:rotate(-8deg)}13%{transform:rotate(22deg)}21%{transform:rotate(4deg)}34%{transform:rotate(30deg)}
  47%{transform:rotate(-2deg)}58%{transform:rotate(18deg)}66%{transform:rotate(9deg)}79%{transform:rotate(34deg)}90%{transform:rotate(-4deg)}100%{transform:rotate(-8deg)}}

/* ---------- tear-off tabs: lift + tilt, tear on press, grow back ---------- */
html[data-fx="2"] .tabs li,html[data-fx="3"] .tabs li{transform-origin:50% 0}
html[data-fx="2"] .tabs li:nth-child(odd):hover,html[data-fx="2"] .tabs li:nth-child(odd):focus-within,
html[data-fx="3"] .tabs li:nth-child(odd):hover,html[data-fx="3"] .tabs li:nth-child(odd):focus-within{transform:translateY(-6px) rotate(-2deg)}
html[data-fx="2"] .tabs li:nth-child(even):hover,html[data-fx="2"] .tabs li:nth-child(even):focus-within,
html[data-fx="3"] .tabs li:nth-child(even):hover,html[data-fx="3"] .tabs li:nth-child(even):focus-within{transform:translateY(-6px) rotate(2deg)}
.tabs li.torn{animation:tear .5s cubic-bezier(.5,0,.9,.6) forwards;pointer-events:none}
@keyframes tear{0%{transform:none}25%{transform:translateY(-8px) rotate(-4deg)}100%{transform:translateY(70px) rotate(16deg);opacity:0}}
.tabs li.regrow{animation:regrow .5s ease-out}
@keyframes regrow{from{opacity:0;transform:translateY(-10px)}}
/* fx 3: the tape lifts at a corner when you hover the sheet it holds */
html[data-fx="3"] .pin > .tape{transition:translate .3s ease,rotate .3s ease}
html[data-fx="3"] .pin:hover > .tape{translate:0 -3px;rotate:4deg}

/* ---------- Pick your mood ---------- */
.moods{margin:var(--s2) 0 var(--s3)}
.moods .typed{color:var(--ink-soft);margin-bottom:var(--s1)}
.moodtabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style:none}
.moodtabs button{width:100%;min-height:48px;padding:10px 8px;border:1.5px dashed var(--navy);background:transparent;color:var(--navy);cursor:pointer;
  font:700 13px/1.15 var(--mono);letter-spacing:.06em;text-transform:uppercase;transition:transform .15s ease,background-color .2s ease,color .2s ease}
.moodtabs button:hover,.moodtabs button:focus-visible{transform:translateY(-2px)}
.moodtabs button[aria-pressed="true"]{background:var(--navy);color:var(--cream);border-style:solid}
.moodnote{font-size:13px;margin-top:var(--s1);color:var(--ink-soft)}
.moodnote:empty{display:none}
.mixes.routed .tracks li:not(.inroute){opacity:.4}
.tracks li.inroute .n{font-weight:700;opacity:1}
.tracks li .rk{display:none}
.mixes.routed .tracks li.inroute .rk{display:inline;color:var(--teal);font-weight:700;margin-left:2px}
@media (min-width:600px){.moodtabs{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- the slim player that follows you ---------- */
.mini{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--navy);color:var(--cream);border-top:1px solid var(--rule-c);
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));display:grid;grid-template-columns:48px minmax(0,1fr) auto 52px;column-gap:12px;align-items:center;
  transform:translateY(110%);visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s}
.mini.show{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s}
.mini-bar{position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--rule-c)}
.mini-fill{height:100%;width:0;background:var(--gold)}
.mini-cover{width:48px;height:48px;object-fit:cover;background:#1b2233}
.mini-go{min-width:0;min-height:44px;text-align:left;background:none;border:0;color:inherit;cursor:pointer;padding:2px 0}
.mini-ep{display:block;font:400 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-name{display:block;font-family:var(--display);font-variation-settings:"wdth" 125;font-weight:900;text-transform:uppercase;font-size:17px;line-height:1.05;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-book{display:flex;align-items:center;min-height:40px;padding:0 10px;background:var(--cream);color:var(--navy);text-decoration:none;
  font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.mini-book:hover,.mini-book:focus-visible{background:var(--gold)}
.mini-btn{position:relative;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;background:var(--gold);color:var(--navy);box-shadow:0 3px 0 #9a5f1c;
  transition:transform .08s ease,box-shadow .08s ease}
.mini-btn:active{transform:translateY(3px);box-shadow:0 0 0 #9a5f1c}
.mini-btn svg{position:absolute;inset:0;margin:auto;width:20px;height:20px;fill:currentColor}
.mini-btn .i-pause{display:none}
.mini[data-state="playing"] .mini-btn .i-play{display:none}
.mini[data-state="playing"] .mini-btn .i-pause{display:block}
html.has-mini body{padding-bottom:calc(var(--s8) + 72px)}
@media (min-width:900px){
  .mini{left:50%;right:auto;bottom:16px;width:min(560px,calc(100vw - 32px));transform:translate(-50%,140%);padding:8px 12px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
  .mini.show{transform:translate(-50%,0)}
  .player{grid-template-areas:"cover meta btn" "bar bar bar" "time time time" "links links links" "said said said"}
  .player[data-state="error"]{grid-template-areas:"cover meta meta" "bar bar bar" "links links links" "said said said"}
}

/* ---------- episode pages (radio/NN/) ---------- */
.ephead{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding-bottom:var(--s3)}
.ephead .home{display:block;width:132px;aspect-ratio:2700/1233;color:var(--cream)}
.ephead .home svg{width:100%;height:100%;fill:currentColor}
.ephead .typed{color:rgba(245,242,232,.6)}
.epgrid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s6)}
.player.solo{margin:0;border:1px solid var(--rule-c);
  grid-template-areas:"cover cover" "btn meta" "bar bar" "time time" "links links" "said said"}
.player.solo[data-state="error"]{grid-template-areas:"cover cover" "meta meta" "bar bar" "links links" "said said"}
.player.solo .pl-cover{margin:0 0 var(--s1)}
.tl{background:var(--cream);color:var(--navy);padding:34px 20px 30px;clip-path:var(--torn-c);transform:rotate(-.3deg)}
.tl h2{font:700 13px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding-bottom:var(--s1);border-bottom:3px double var(--navy);
  display:flex;justify-content:space-between;gap:var(--s2)}
.tl h2 span{font-weight:400;opacity:.7;text-transform:none;letter-spacing:.02em}
.tl ol{list-style:none}
.tl li{display:grid;grid-template-columns:62px minmax(0,1fr) auto;column-gap:var(--s1);align-items:baseline;border-bottom:1px dashed rgba(14,19,32,.45);padding:2px 0}
.tl li.untimed{grid-template-columns:34px minmax(0,1fr) auto}
.tl .at{min-height:44px;background:none;border:0;color:var(--teal);cursor:pointer;text-align:left;font:700 13px/1 var(--mono);font-variant-numeric:tabular-nums;padding:0}
.tl .at:hover,.tl .at:focus-visible{text-decoration:underline;text-underline-offset:4px}
.tl .ix{font-size:13px;opacity:.6;padding:12px 0}
.tl .ti{padding:12px 0;font-size:14px;line-height:1.35}
.tl .ti b{font-weight:700}
.tl .find{font:400 11px/1 var(--mono);letter-spacing:.06em;opacity:.55;text-decoration:none;white-space:nowrap;padding:12px 0 12px 8px}
.tl .find:hover,.tl .find:focus-visible{opacity:1;color:var(--teal)}
.tl li.now .ti{background:linear-gradient(transparent 55%,rgba(242,163,65,.55) 55%)}
.tl li.now .at::before{content:"\25B8 ";color:var(--red)}
.tl .none{padding:var(--s2) 0;font-size:14px}
.epnote{font-size:13px;color:rgba(245,242,232,.7);margin-top:var(--s2)}
@media (min-width:900px){
  .epgrid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--s8);align-items:start}
  .epgrid > :first-child{position:sticky;top:var(--s4)}
  .ephead .home{width:170px}
  .tl{padding:40px 36px 36px}
}

@media (prefers-reduced-motion:reduce){
  .tabs li.torn{opacity:.4}
  .mini{transition:none!important}
  .moodtabs button:hover,.moodtabs button:focus-visible{transform:none}
  .pl-btn,.player[data-state] .pl-btn{transform:none!important}
}