/* /listen/<slug>/ pages. Generated markup: scripts/build_listen.py. Behaviour:
   assets/js/listen-page.js. One era accent (magenta); every other colour comes
   from the cover itself through the blurred backdrop. */

:root{
  --ink:#0b1022;
  --ink-2:#121a36;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --text:#f4f5fb;
  --text-2:rgba(244,245,251,.72);
  --text-3:rgba(244,245,251,.5);
  --accent:#E91E8C;
  --accent-soft:#ff5fb0;
  --ease:cubic-bezier(.16,1,.3,1);
  --radius:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink)}
/* No body background: the ambient layers sit at negative z-index and would paint under it. */
body{font-family:'Lato',system-ui,sans-serif;color:var(--text);min-height:100vh;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px;border-radius:6px}

/* ---- Ambient backdrop: the cover, blurred into the page ---- */
.ambient{position:fixed;inset:-12%;z-index:-3;background:var(--glow) center/cover no-repeat;filter:blur(36px) saturate(1.4);
  opacity:.78;transform:scale(1.08);will-change:transform;animation:drift 32s ease-in-out infinite alternate}
.veil{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(130% 80% at 30% 0%,rgba(11,16,34,0) 0%,rgba(11,16,34,.35) 55%,rgba(11,16,34,.85) 100%),
    linear-gradient(180deg,rgba(11,16,34,.2) 0%,rgba(11,16,34,.62) 62%,rgba(11,16,34,.94) 100%)}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift{
  0%{transform:scale(1.08) translate3d(0,0,0)}
  50%{transform:scale(1.16) translate3d(-2%,1.5%,0)}
  100%{transform:scale(1.1) translate3d(2%,-1%,0)}
}

/* ---- Frame ---- */
.page{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,40px) calc(40px + env(safe-area-inset-bottom))}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;height:68px;padding-top:env(safe-area-inset-top)}
.mark{display:inline-flex;align-items:center;height:68px}
.mark{flex-shrink:0}
.mark img{height:clamp(14px,4.6vw,18px);width:auto;opacity:.9;transition:opacity .2s}
.mark:hover img{opacity:1}
.top nav{display:flex;gap:4px}
.top nav a{color:var(--text-2);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:10px 12px;border-radius:999px;line-height:1;transition:color .2s,background-color .2s}
.top nav a:hover{color:#fff;background:rgba(255,255,255,.07)}

.hero{--w:min(66vw,330px);--peek:27%;padding:8px 0 0}
.body-col{min-width:0}

/* ---- The record: sleeve + disc sliding out ---- */
.record{position:relative;width:var(--w);aspect-ratio:1;perspective:1400px}
.record-tilt{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s var(--ease);will-change:transform}
.sleeve{position:absolute;inset:0;z-index:2;border-radius:6px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 40px 80px -24px rgba(0,0,0,.75),0 18px 36px -18px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07)}
.sleeve img{width:100%;height:100%;object-fit:cover}
.sheen{position:absolute;inset:0;z-index:3;border-radius:6px;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.22) 46%,rgba(255,255,255,0) 60%);
  background-size:260% 100%;background-position:120% 0;mix-blend-mode:soft-light;animation:sheen 2.4s var(--ease) .35s both}
.sheen::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(60% 60% at var(--mx,30%) var(--my,20%),rgba(255,255,255,.16),rgba(255,255,255,0) 70%);
  opacity:var(--glare,0);transition:opacity .4s}
@keyframes sheen{from{background-position:120% 0}to{background-position:-60% 0}}

/* The same record on every page: the Inevitable pressing, white wax with blue marble (photo cut-out). */
.disc{position:absolute;z-index:1;top:3%;left:3%;width:94%;height:94%;border-radius:50%;
  box-shadow:0 26px 50px -14px rgba(0,0,0,.72),0 8px 18px -8px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.18);
  animation:disc-out 1.5s var(--ease) .55s both}
.disc-spin{position:absolute;inset:0;border-radius:50%;animation:spin 14s linear 1.2s infinite;
  background:url("/assets/listen/disc/inevitable-lp-960.webp") center/cover no-repeat;
  background-image:-webkit-image-set(url("/assets/listen/disc/inevitable-lp-480.webp") 1x,url("/assets/listen/disc/inevitable-lp-960.webp") 2x);
  background-image:image-set(url("/assets/listen/disc/inevitable-lp-480.webp") 1x,url("/assets/listen/disc/inevitable-lp-960.webp") 2x)}
.disc::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle closest-side,rgba(255,255,255,0) 0 96%,rgba(255,255,255,.55) 98.5%,rgba(255,255,255,0) 100%),
    conic-gradient(from 210deg,rgba(255,255,255,0) 0 6%,rgba(255,255,255,.4) 12%,rgba(255,255,255,0) 20% 30%,rgba(12,22,54,.1) 38%,rgba(255,255,255,0) 46% 50%,
      rgba(255,255,255,.3) 57%,rgba(255,255,255,0) 66% 78%,rgba(12,22,54,.09) 88%,rgba(255,255,255,0) 96%);
  -webkit-mask:radial-gradient(circle closest-side,transparent 0 34%,#000 35.5%);mask:radial-gradient(circle closest-side,transparent 0 34%,#000 35.5%)}
@keyframes disc-out{from{transform:translateX(0) rotate(-40deg)}to{transform:translateX(var(--peek)) rotate(0)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Title block ---- */
.overline{font-size:clamp(.66rem,3.15vw,.8rem);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-soft);font-weight:700;margin-bottom:12px}
h1{font-size:clamp(2.5rem,9vw,4.6rem);font-weight:900;letter-spacing:-.04em;line-height:.95;margin-bottom:14px;
  text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.88rem;color:var(--text-2);margin-bottom:14px}
.meta span+span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--text-3);vertical-align:middle;margin-right:10px}
.lede{font-size:1.05rem;line-height:1.5;color:rgba(244,245,251,.86);margin-bottom:26px;max-width:36ch;text-wrap:pretty}

/* ---- Services: one glass panel, hairline rows ---- */
.services{position:relative;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid var(--line);backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 40px 90px -40px rgba(0,0,0,.85)}
.svc{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:66px;padding:11px 12px 11px 12px;
  color:var(--text);transition:background-color .25s}
.svc+.svc{border-top:1px solid var(--line)}
.svc-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.07);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;transition:transform .35s var(--ease),background-color .25s}
.svc-ico img{width:24px;height:24px}
.svc-name{font-size:1.02rem;font-weight:700;letter-spacing:.005em;min-width:0}
.svc-name small{display:block;font-size:.74rem;font-weight:400;color:var(--text-3);letter-spacing:.02em;margin-top:1px}
.svc-cta{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px 0 13px;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);transition:background-color .25s,border-color .25s,box-shadow .25s,transform .35s var(--ease)}
.svc-cta svg{width:10px;height:10px;fill:currentColor}
.svc:hover{background:rgba(255,255,255,.05)}
.svc:hover .svc-ico{transform:scale(1.06);background:rgba(255,255,255,.12)}
.svc:hover .svc-cta,.svc:focus-visible .svc-cta{background:var(--accent);border-color:var(--accent);box-shadow:0 10px 26px -10px rgba(233,30,140,.9)}
.svc:active .svc-cta{transform:scale(.96)}
.svc--primary{background:linear-gradient(100deg,rgba(233,30,140,.22),rgba(233,30,140,.05) 70%)}
.svc--primary:hover{background:linear-gradient(100deg,rgba(233,30,140,.3),rgba(233,30,140,.08) 70%)}
.svc--primary .svc-cta{background:var(--accent);border-color:var(--accent);box-shadow:0 10px 26px -10px rgba(233,30,140,.9)}
.svc--primary::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.14) 50%,rgba(255,255,255,0) 65%);
  background-size:300% 100%;background-position:140% 0;animation:sweep 1.8s var(--ease) 1.4s both}
@keyframes sweep{from{background-position:140% 0}to{background-position:-40% 0}}

/* ---- Follow: the quiet second ask, never as loud as Play ---- */
.follow{margin-top:22px}
.follow-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.follow-row a{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border-radius:14px;
  font-size:.95rem;font-weight:700;color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--line-2);
  transition:background-color .25s,border-color .25s}
.follow-row a:hover,.follow-row a:focus-visible{background:rgba(233,30,140,.18);border-color:rgba(233,30,140,.5)}
.follow-row img{width:20px;height:20px}

/* ---- Sections below the services ---- */
.block{margin-top:30px}
.label{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);font-weight:700;margin-bottom:12px}

.pull{position:relative;margin:0;padding:38px 24px 22px 26px;border-radius:var(--radius);
  background:rgba(255,255,255,.035);border:1px solid var(--line)}
.pull::before{content:"\201C";position:absolute;top:-6px;left:18px;font-size:5.4rem;line-height:1;font-weight:900;color:var(--accent);opacity:.9}
.pull p{position:relative;font-size:1.14rem;line-height:1.5;font-style:italic;color:rgba(244,245,251,.92);text-wrap:pretty}
.pull cite{display:block;margin-top:14px;font-style:normal;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--text-3)}
.pull cite a{color:var(--text-2);border-bottom:1px solid rgba(255,255,255,.18);transition:color .2s,border-color .2s}
.pull cite a:hover{color:#fff;border-color:var(--accent-soft)}
.quotes{display:grid;gap:12px;margin-top:12px}
.quotes .pull{padding:30px 20px 18px 22px}
.quotes .pull::before{font-size:3.6rem;top:-4px;left:14px}
.quotes .pull p{font-size:.98rem}

.video{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000;border:0;cursor:pointer;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85),0 0 0 1px var(--line)}
.video img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .4s;filter:saturate(1.05) brightness(.82)}
.video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.6))}
.video:hover img{transform:scale(1.045);filter:saturate(1.1) brightness(.95)}
.video-play{position:absolute;z-index:1;top:50%;left:50%;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .4s var(--ease),background-color .25s,border-color .25s}
.video-play svg{width:22px;height:22px;fill:#fff;margin-left:4px}
.video:hover .video-play{transform:scale(1.08);background:var(--accent);border-color:var(--accent)}
.video-cap{position:absolute;z-index:1;left:18px;bottom:14px;right:18px;text-align:left;color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.02em}
.video-cap small{display:block;font-weight:400;color:rgba(255,255,255,.7);font-size:.74rem;letter-spacing:.04em}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.album-card{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 16px 12px 12px;border-radius:var(--radius);
  background:rgba(255,255,255,.04);border:1px solid var(--line);transition:background-color .25s,transform .4s var(--ease),border-color .25s}
.album-card img{width:64px;height:64px;border-radius:8px;box-shadow:0 10px 24px -10px rgba(0,0,0,.8)}
.album-card strong{display:block;font-size:1.02rem;font-weight:900;letter-spacing:-.01em}
.album-card span{display:block;font-size:.8rem;color:var(--text-2)}
.album-card .k{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-soft);font-weight:700;margin-bottom:2px}
.album-card:hover{background:rgba(255,255,255,.07);border-color:var(--line-2);transform:translateY(-2px)}
.chev{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;opacity:.5;transition:transform .35s var(--ease),opacity .2s}
.album-card:hover .chev,.shop:hover .chev{transform:translateX(3px);opacity:.9}

.tracks{list-style:none;border-radius:var(--radius);overflow:hidden;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.tracks li+li{border-top:1px solid var(--line)}
.trk{display:grid;grid-template-columns:2.1em minmax(0,1fr) auto auto;gap:12px;align-items:center;min-height:52px;padding:0 16px;color:var(--text)}
.trk .n{font-size:.74rem;font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.trk .t{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trk .tag{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-soft);font-weight:700}
.trk .d{font-size:.82rem;color:var(--text-3);font-variant-numeric:tabular-nums;min-width:2.6em;text-align:right}
a.trk{transition:background-color .2s}
a.trk:hover{background:rgba(255,255,255,.05)}
a.trk:hover .t{color:#fff}
.credits{margin-top:12px;font-size:.8rem;line-height:1.6;color:var(--text-3)}
.credits a{color:var(--text-2);border-bottom:1px solid rgba(255,255,255,.18)}
.credits a:hover{color:#fff;border-color:var(--accent-soft)}

.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.shop{position:relative;display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:rgba(255,255,255,.04);border:1px solid var(--line);
  transition:transform .45s var(--ease),border-color .25s,box-shadow .45s var(--ease)}
.shop picture{display:block;aspect-ratio:1;overflow:hidden;background:#0e1430}
.shop img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.shop-tx{display:flex;flex-direction:column;gap:2px;padding:12px 14px 14px}
.shop-tx strong{font-size:.95rem;font-weight:900;letter-spacing:-.005em;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.shop-tx strong em{font-style:normal;color:var(--accent-soft);font-weight:900}
.shop-tx span{font-size:.76rem;line-height:1.4;color:var(--text-2)}
.shop:hover{transform:translateY(-3px);border-color:rgba(233,30,140,.45);box-shadow:0 26px 60px -28px rgba(233,30,140,.55)}
.shop:hover img{transform:scale(1.05)}

.esp{position:relative;margin-top:30px;padding:28px 22px 24px;border-radius:var(--radius);text-align:center;overflow:hidden;
  background:linear-gradient(180deg,rgba(233,30,140,.13),rgba(233,30,140,.04));border:1px solid rgba(233,30,140,.32)}
.esp::before{content:"";position:absolute;left:50%;top:-60%;width:120%;height:120%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(233,30,140,.25),rgba(233,30,140,0))}
.esp>*{position:relative}
.esp .fc-overline{margin-bottom:6px}
.esp h2{font-size:1.35rem;font-weight:900;letter-spacing:-.015em;margin-bottom:6px}
.esp-lede{font-size:.9rem;color:var(--text-2);margin:0 auto 16px;max-width:34ch;line-height:1.45}
.esp .fc-form input[type="email"]{border-radius:999px;padding:0 18px;background:rgba(11,16,34,.55);border-color:rgba(255,255,255,.18)}
.esp .fc-form button{border-radius:999px;padding:0 22px;box-shadow:0 12px 28px -12px rgba(233,30,140,.9)}

.foot{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.foot img{height:12px;width:auto;opacity:.6}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 4px}
.foot nav a{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--text-3);padding:8px 10px;border-radius:999px;transition:color .2s}
.foot nav a:hover{color:#fff}
.foot p{font-size:.72rem;color:rgba(244,245,251,.35)}

/* ---- Entrance: staggered rise, then scroll reveals (JS adds .js / .in) ---- */
.rv{animation:rise .9s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms + 120ms)}
@keyframes rise{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
.js .reveal{opacity:0;transform:translate3d(0,24px,0);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* ---- Layout: centred stack on phones, editorial two-column on desktop ----
   One shop block in the markup (inside .art-col). Phones dissolve both columns
   into a single flex stack so the block falls back between the page blocks and
   the mailing list; desktop keeps it under the record. */
@media (max-width:899px){
  .hero{display:flex;flex-direction:column;max-width:480px;margin:0 auto}
  .art-col,.body-col{display:contents}
  .record{order:-1;align-self:center;margin:0 min(17vw,84px) 28px 0}
  .shop-block{order:1}
  .esp{order:2}
  .body-col{text-align:center}
  .meta{justify-content:center}
  .lede{margin-left:auto;margin-right:auto}
  .services,.block,.follow{text-align:left}
  .follow-row a{justify-content:center}
}
@media (min-width:900px){
  .page{padding-top:8px}
  .mark img{height:22px}
  .overline{font-size:.9rem;letter-spacing:.22em}
  .hero{--w:clamp(320px,33vw,440px);--peek:33%;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
    gap:clamp(40px,5vw,80px);align-items:start;padding-top:clamp(24px,4vh,56px)}
  .art-col{display:flex;flex-direction:column;align-items:flex-start}
  .shop-block{width:100%;max-width:calc(var(--w) * 1.31);margin-top:clamp(40px,6vh,64px)}
  .body-col{max-width:470px;padding-top:6px}
  .shop-tx span{font-size:.78rem}
}
/* Record and shop stay in view together only when the viewport is tall enough to hold both. */
@media (min-width:900px) and (min-height:960px){
  .art-col{position:sticky;top:clamp(24px,4vh,48px)}
}
@media (min-width:1200px){
  .art-col{padding-left:8px}
}
@media (max-width:359px){
  .shop-grid{grid-template-columns:1fr}
  .svc-cta{padding:0 12px}
}
@media (hover:none){
  .svc:hover .svc-cta{background:rgba(255,255,255,.03);border-color:var(--line-2);box-shadow:none}
  .svc--primary:hover .svc-cta{background:var(--accent);border-color:var(--accent)}
}
@media (prefers-reduced-motion:reduce){
  .ambient,.disc,.disc-spin,.sheen,.svc--primary::after,.rv{animation:none}
  .disc{transform:translateX(var(--peek))}
  .js .reveal{opacity:1;transform:none;transition:none}
  .record-tilt,.svc-ico,.svc-cta,.album-card,.shop,.shop img,.video img,.video-play,.follow-row a{transition:none}
}