/* ================= "WHERE DO YOU LISTEN?" STREAMING POPUP (v23) =================
   Self-contained: works with the live style.css + theme-plum.css (uses theme-plum's foil
   variables, with fallbacks) and does NOT need buttons-block.css. Same design language:
   clipped corners, chrome-silver foil faces, 3-layer grey/black stack, Anton caps, plum accents.
   Load AFTER theme-plum.css. Markup is created by js/main.js. */
.lm{--lm-ink:#140812;--lm-champ:#fff3dc;--lm-pk:142,58,126;
 --lm-cut:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
 position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px}
.lm[hidden]{display:none}
html.lm-lock,html.lm-lock body{overflow:hidden}
.lm-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse 90% 70% at 50% 35%,rgba(58,12,53,.6),rgba(0,0,0,.9) 70%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:lmFade .25s ease}
/* panel: dark aubergine, clipped corners, plum-chrome rim (incl. the diagonal cuts) */
.lm-box{--c:18px;position:relative;width:min(100%,780px);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;
 padding:30px 26px 22px;text-align:center;border:1.5px solid transparent;
 clip-path:var(--lm-cut);
 background:
  linear-gradient(to bottom right,transparent 50%,#d9a6cc 50%,#d9a6cc calc(50% + 1.6px),transparent calc(50% + 1.6px)) 0 0/var(--c) var(--c) no-repeat border-box,
  linear-gradient(to top left,transparent 50%,#7e3170 50%,#7e3170 calc(50% + 1.6px),transparent calc(50% + 1.6px)) 100% 100%/var(--c) var(--c) no-repeat border-box,
  radial-gradient(ellipse 80% 50% at 50% 0,rgba(var(--lm-pk),.22),transparent 70%) padding-box,
  linear-gradient(165deg,#170816,#080308 62%) padding-box,
  linear-gradient(160deg,#f0d2e8 0%,#a0458f 22%,#4a1243 50%,#c58ab6 72%,#5e1a55 100%) border-box;
 animation:lmIn .32s cubic-bezier(.2,.8,.2,1);outline:none}
.lm-box:focus-visible{box-shadow:inset 0 0 0 2px var(--lm-champ)}
@keyframes lmFade{from{opacity:0}}
@keyframes lmIn{from{opacity:0;transform:translateY(14px) scale(.985)}}
.lm-x{position:absolute;top:12px;right:14px;width:38px;height:38px;display:grid;place-items:center;background:none;border:0;color:#efe2ec;cursor:pointer;transition:color .2s,transform .2s}
.lm-x svg{width:18px;height:18px}
.lm-x:hover{color:#d58cc4;transform:rotate(90deg)}
.lm-x:focus-visible{outline:2px solid var(--lm-champ);outline-offset:2px}
.lm-logo{display:block;height:38px;width:auto;margin:0 auto 6px;filter:drop-shadow(0 0 10px rgba(var(--lm-pk),.35))}
.lm-eyebrow{font-family:var(--cond,'Archivo Narrow',sans-serif);font-weight:700;font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:#c47ab3;margin:4px 0 6px}
.lm-title{font-family:var(--disp,Anton,Impact,sans-serif);font-weight:400;font-size:clamp(1.75rem,6.4vw,2.7rem);line-height:.95;letter-spacing:.03em;text-transform:uppercase;color:#f7eff5;text-shadow:0 0 24px rgba(var(--lm-pk),.35)}
.lm-sub{color:#b8aab4;font-size:.9rem;line-height:1.45;max-width:54ch;margin:10px auto 0}
.lm-sub::after{content:"";display:block;width:64px;height:2px;margin:16px auto 0;background:linear-gradient(90deg,#a0458f,#c06a7a)}
.lm-note{font-size:.7rem;color:#8b7d88;letter-spacing:.04em;margin-top:16px}
/* grid: 2 per row on phones (7th centred), 4 + 3 centred on desktop */
.lm-grid{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:16px 16px;margin:22px 0 0;padding:0 6px 6px 0}
.lm-grid li{flex:0 0 calc(50% - 8px);min-width:0}
@media(min-width:700px){.lm-grid li{flex-basis:calc(25% - 12px)}.lm-box{padding:34px 34px 24px}}
/* platform tile: chrome face (::before) + solid grey + near-black steps (drop-shadow copies of the clipped shape) */
.lm-btn{--c:9px;--step:3px;--push:0px;--shine:100%;
 --l2:#8e8692;--l3:#0a060a;--rim:#b862a6;
 --face:var(--t-silver,linear-gradient(135deg,#d9d6dc,#f7f6f8 45%,#a9a3ad));--edge:var(--t-edge,linear-gradient(160deg,#fff,#c9c3cf 24%,#fff 46%,#6b5f70 74%,#e7e2ea));
 --bevel:var(--t-bevel,linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 50%,rgba(25,10,30,.3)));--sheen:var(--t-sheen,none);--diag:rgba(255,255,255,.9);
 position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
 height:88px;padding:10px 8px 8px;color:var(--lm-ink);text-decoration:none;
 font-family:var(--disp,Anton,Impact,sans-serif);font-weight:400;font-size:.84rem;line-height:1;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
 text-shadow:0 1px 0 rgba(255,255,255,.55);
 filter:drop-shadow(calc(var(--step) - var(--push)) calc(var(--step) - var(--push)) 0 var(--l2)) drop-shadow(var(--step) var(--step) 0 var(--l3)) drop-shadow(1.1px 1.1px 0 var(--rim)) drop-shadow(0 4px 6px rgba(0,0,0,.55));
 transform:translate(var(--push),var(--push));
 transition:transform .18s cubic-bezier(.3,.7,.3,1),filter .18s cubic-bezier(.3,.7,.3,1)}
.lm-btn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border:1.5px solid transparent;clip-path:var(--lm-cut);
 background-image:linear-gradient(to bottom right,transparent 50%,var(--diag) 50%,var(--diag) calc(50% + 1.4px),transparent calc(50% + 1.4px)),
  linear-gradient(to top left,transparent 50%,rgba(40,10,35,.75) 50%,rgba(40,10,35,.75) calc(50% + 1.4px),transparent calc(50% + 1.4px)),
  linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 48%,#fff 50%,rgba(255,255,255,.55) 52%,transparent 60%),
  var(--sheen),var(--bevel),var(--face),var(--edge);
 background-size:var(--c) var(--c),var(--c) var(--c),300% 100%,100% 100%,100% 100%,256px 256px,100% 100%;
 background-position:0 0,100% 100%,var(--shine) 0,0 0,0 0,var(--fx,0) var(--fy,0),0 0;
 background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat,no-repeat;
 background-origin:border-box,border-box,padding-box,padding-box,padding-box,padding-box,border-box;
 background-clip:border-box,border-box,padding-box,padding-box,padding-box,padding-box,border-box;
 transition:background-position .45s cubic-bezier(.3,.6,.3,1)}
.lm-grid li:nth-child(1) .lm-btn{--fx:-37px;--fy:-81px}.lm-grid li:nth-child(2) .lm-btn{--fx:-141px;--fy:-23px}.lm-grid li:nth-child(3) .lm-btn{--fx:-63px;--fy:-170px}
.lm-grid li:nth-child(4) .lm-btn{--fx:-205px;--fy:-112px}.lm-grid li:nth-child(5) .lm-btn{--fx:-12px;--fy:-205px}.lm-grid li:nth-child(6) .lm-btn{--fx:-176px;--fy:-58px}.lm-grid li:nth-child(7) .lm-btn{--fx:-98px;--fy:-139px}
.lm-ic{width:26px;height:26px;flex:none;fill:currentColor;filter:drop-shadow(0 1px 0 rgba(255,255,255,.7))}
.lm-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.lm-go{position:absolute;top:8px;right:10px;width:11px;height:11px;transition:transform .18s cubic-bezier(.3,.7,.3,1)}
.lm-go svg{width:100%;height:100%;display:block}
.lm-soon{font-family:var(--cond,'Archivo Narrow',sans-serif);font-weight:700;font-size:.58rem;letter-spacing:.22em;color:#2a1626;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.lm-tag{position:absolute;top:7px;left:12px;font-family:var(--cond,'Archivo Narrow',sans-serif);font-weight:700;font-size:.52rem;letter-spacing:.2em;color:var(--lm-champ);opacity:.9}
/* hover / focus: face slides onto the grey step, chrome shine sweeps, arrow nudges; press seats it */
a.lm-btn:hover,a.lm-btn:focus-visible{--push:1.5px;--shine:0%;outline:none}
a.lm-btn:hover .lm-go,a.lm-btn:focus-visible .lm-go{transform:translate(2px,-2px)}
a.lm-btn:active{--push:var(--step)}
a.lm-btn:focus-visible::after{content:"";position:absolute;inset:-6px -9px -9px -6px;border:2px solid var(--lm-champ);pointer-events:none;clip-path:none}
/* remembered choice: plum candy face, champagne type, plum glow (same grey/black steps) */
a.lm-btn.on{--face:var(--t-pink,linear-gradient(180deg,#8e3a7e,#5e1a55 50%,#2e0a2a));--edge:var(--t-edge-pk,linear-gradient(160deg,#f3dcec,#9a4a8a 26%,#fbeef7 46%,#2e0a2a 74%,#c58ab6));
 --bevel:linear-gradient(180deg,rgba(240,215,235,.42) 0%,rgba(255,255,255,.06) 32%,rgba(0,0,0,0) 55%,rgba(20,3,18,.45) 100%);
 --sheen:linear-gradient(115deg,transparent 30%,rgba(240,220,236,.2) 45%,transparent 60%);--diag:#f6dcef;
 color:var(--lm-champ);text-shadow:0 -1px 0 rgba(15,2,13,.8),0 1px 2px rgba(15,2,13,.6);
 filter:drop-shadow(calc(var(--step) - var(--push)) calc(var(--step) - var(--push)) 0 var(--l2)) drop-shadow(var(--step) var(--step) 0 var(--l3)) drop-shadow(1.1px 1.1px 0 var(--rim)) drop-shadow(0 0 9px rgba(var(--lm-pk),.65))}
a.lm-btn.on .lm-ic{filter:drop-shadow(0 -1px 0 rgba(15,2,13,.7))}
/* coming soon: dimmed, flat, inert */
.lm-btn.soon{cursor:not-allowed;opacity:.55;--l2:#4a444d;--l3:#050305;--rim:#3a2335;
 filter:saturate(.35) brightness(.82) drop-shadow(var(--step) var(--step) 0 var(--l2)) drop-shadow(var(--step) var(--step) 0 var(--l3)) drop-shadow(1px 1px 0 var(--rim))}
@media(max-width:420px){.lm{padding:10px}.lm-box{--c:14px;padding:26px 16px 18px}.lm-grid{gap:14px 13px}.lm-grid li{flex-basis:calc(50% - 7px)}
 .lm-btn{height:80px;font-size:.78rem;letter-spacing:.1em;gap:6px}.lm-ic{width:24px;height:24px}.lm-logo{height:32px}}
@media(max-width:350px){.lm-btn{font-size:.7rem;letter-spacing:.06em}}
@media(prefers-reduced-motion:reduce){.lm-backdrop,.lm-box{animation:none}
 .lm-btn,.lm-btn::before,.lm-go,.lm-x{transition:none}
 a.lm-btn:hover,a.lm-btn:focus-visible,a.lm-btn:active{--push:0px;--shine:100%}a.lm-btn:hover .lm-go{transform:none}.lm-x:hover{transform:none}}