/* ═══════════════════════════════════════════════════════
   OUR MELODY · style.css  — full rewrite
═══════════════════════════════════════════════════════ */
:root{
  /* Dark backgrounds */
  --bg0:#08080f; --bg1:#0f0f1c; --bg2:#16162a;
  /* Page surfaces – cool white / lavender */
  --pg0:#f4f6ff; --pg1:#eaecf8; --pg2:#f0f2ff; --pg3:#e8eaf6;
  /* Ink */
  --ink:#12131f; --ink2:#2e3047; --ink3:#7b7f9e;
  /* Accents */
  --grn:#1db954; --mnt:#a8e6cf;
  --pnk:#f472b6; --org:#fb923c; --pur:#a78bfa; --blu:#60a5fa;
  /* Font */
  --fp:'Poppins',sans-serif; --fh:'Dancing Script',cursive;
  /* Easing */
  --ease-spring:cubic-bezier(0.34,1.4,0.64,1);
  --ease-smooth:cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--fp);
  background:var(--bg0);
  color:#fff;
  overflow-x:hidden;
  min-height:100vh;
}
.hidden{display:none!important}


/* ══════════════════════════════════════════════
   LANDING
══════════════════════════════════════════════ */
#landing{
  position:relative;
  width:100vw; height:100vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 25% 50%,#1a0a3e 0%,transparent 55%),
    radial-gradient(ellipse at 80% 20%,#0a1840 0%,transparent 50%),
    var(--bg0);
}
.landing-noise{
  position:absolute;inset:0;pointer-events:none;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}

/* Floating notes */
.float-notes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.float-notes span{
  position:absolute;
  left:var(--x); top:var(--y);
  color:var(--c);
  font-size:1.1rem;
  opacity:0;
  animation:floatUp 7s ease-in-out infinite;
  animation-delay:var(--d);
}
@keyframes floatUp{
  0%  {opacity:0;transform:translateY(0) rotate(0deg) scale(.8)}
  20% {opacity:.8}
  80% {opacity:.4}
  100%{opacity:0;transform:translateY(-140px) rotate(25deg) scale(1.1)}
}

/* Vinyl */
.vinyl-wrap{
  position:absolute; right:7%; top:50%; transform:translateY(-50%);
  width:280px; height:280px;
  transition:transform .1s linear;
}
@media(max-width:900px){.vinyl-wrap{display:none}}
.vinyl-disc{
  width:100%;height:100%;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,#222 28%,transparent 28.5%),
    repeating-radial-gradient(circle at 50% 50%,#111 0,#111 1px,#1a1a1a 1px,#1a1a1a 4px);
  box-shadow:0 0 50px rgba(29,185,84,.12),0 0 100px rgba(0,0,0,.5);
  animation:spin 7s linear infinite;
  position:relative; overflow:hidden;
}
.vinyl-grooves{
  position:absolute;inset:0;border-radius:50%;
  background:repeating-radial-gradient(circle at 50%,transparent 0,transparent 9px,rgba(255,255,255,.018) 9px,rgba(255,255,255,.018) 10px);
}
.vinyl-label{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:80px;height:80px;border-radius:50%;
  background:linear-gradient(135deg,#1db954,#0a8032);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.4);
}
.vinyl-label span:first-child{font-size:.42rem;letter-spacing:.15em;color:#fff;font-weight:700}
.vinyl-label span:last-child {font-size:.38rem;color:rgba(255,255,255,.7)}
.vinyl-hole{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:var(--bg0);z-index:3}
@keyframes spin{to{transform:rotate(360deg)}}

/* Cassette */
.cassette-wrap{position:absolute;left:5%;bottom:14%;transition:transform .1s linear}
@media(max-width:900px){.cassette-wrap{display:none}}
.cass-body{
  width:176px;position:relative;
  background:linear-gradient(145deg,#252525,#181818);
  border-radius:8px 8px 12px 12px;
  padding:10px 12px 14px;
  border:1px solid #333;
  box-shadow:0 8px 28px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
  animation:cassRock 5s ease-in-out infinite;
}
@keyframes cassRock{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.cass-screw{position:absolute;width:6px;height:6px;border-radius:50%;background:#1a1a1a;border:1px solid #444}
.cass-screw.tl{top:5px;left:7px} .cass-screw.tr{top:5px;right:7px}
.cass-screw.bl{bottom:7px;left:7px} .cass-screw.br{bottom:7px;right:7px}
.cass-window{background:#0d0d0d;border-radius:4px;height:50px;display:flex;align-items:center;justify-content:space-around;padding:8px;border:1px solid #2a2a2a;margin-bottom:7px;position:relative}
.cass-reel{width:28px;height:28px;border-radius:50%;background:conic-gradient(#2a2a2a 0deg 120deg,#444 120deg 240deg,#2a2a2a 240deg);border:1px solid #444;animation:spin 2.5s linear infinite}
.cass-reel.rr{animation-direction:reverse}
.cass-tape-line{position:absolute;bottom:9px;left:18%;right:18%;height:2px;background:linear-gradient(90deg,transparent,#555,transparent)}
.cass-label{text-align:center}
.cass-label span{display:block;font-family:var(--fp);font-size:.48rem;color:#aaa;letter-spacing:.08em}
.cass-time{color:var(--grn)!important;font-size:.42rem!important;margin-top:2px}
.cass-holes{display:flex;justify-content:center;gap:6px;margin-top:6px}
.cass-holes div{width:8px;height:8px;border-radius:50%;background:#0a0a0a;border:1px solid #333}

/* Cover card */
.cover-card{
  position:relative;z-index:10;
  display:flex;flex-direction:column;align-items:center;gap:2rem;
}
.cover-inner{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  padding:3rem 4rem 2.5rem;
  backdrop-filter:blur(24px);
  max-width:420px;text-align:center;
  box-shadow:0 0 80px rgba(167,139,250,.06),0 40px 100px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);
}
.cover-eyebrow{font-size:.62rem;letter-spacing:.2em;color:var(--grn);font-weight:600;text-transform:uppercase;margin-bottom:.9rem}
.cover-title{font-size:clamp(3rem,7.5vw,5.5rem);font-weight:800;line-height:.95;letter-spacing:-.03em;margin-bottom:.9rem}
.cover-sub{;font-weight:300;font-size:.88rem;color:rgba(255,255,255,.65);line-height:1.7;margin-bottom:1.4rem}
.cover-eq{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:22px;margin-bottom:1.4rem}
.cover-eq span{width:3px;border-radius:2px;background:var(--grn);animation:eqD 1.3s ease-in-out infinite alternate}
.cover-eq span:nth-child(1){height:7px;animation-delay:0s}
.cover-eq span:nth-child(2){height:15px;animation-delay:.12s}
.cover-eq span:nth-child(3){height:20px;animation-delay:.25s}
.cover-eq span:nth-child(4){height:22px;animation-delay:.08s}
.cover-eq span:nth-child(5){height:16px;animation-delay:.3s}
.cover-eq span:nth-child(6){height:10px;animation-delay:.18s}
.cover-eq span:nth-child(7){height:5px;animation-delay:.4s}
@keyframes eqD{from{transform:scaleY(1)}to{transform:scaleY(.25)}}
.cover-names{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-bottom:.5rem}
.cn-a,.cn-b{font-family:var(--fh);font-size:1.7rem;color:#fff}
.cn-amp{color:var(--pnk);font-size:1.1rem;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
.cover-date{font-size:.58rem;color:rgba(255,255,255,.35);letter-spacing:.2em}
.open-btn{
  display:flex;align-items:center;gap:.8rem;
  padding:1rem 2.5rem;
  background:var(--grn);color:var(--bg0);
  border:none;border-radius:100px;cursor:pointer;
  font-family:var(--fp);font-size:.82rem;font-weight:700;letter-spacing:.08em;
  box-shadow:0 0 30px rgba(29,185,84,.35),0 8px 24px rgba(0,0,0,.4);
  transition:transform .25s var(--ease-spring),box-shadow .25s;
}
.open-btn:hover{transform:scale(1.06) translateY(-2px);box-shadow:0 0 50px rgba(29,185,84,.55),0 14px 34px rgba(0,0,0,.5)}
.open-icon{transition:transform .25s var(--ease-spring)}
.open-btn:hover .open-icon{transform:translateX(3px) scale(1.2)}


/* ══════════════════════════════════════════════
   BOOK OVERLAY
══════════════════════════════════════════════ */
.book-overlay{
  position:fixed;inset:0;z-index:100;
  background:radial-gradient(ellipse at center,#0c0c1e 0%,#06060e 100%);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .5s var(--ease-smooth);
}
.book-overlay.visible{opacity:1}

.book-scene{
  position:relative;width:100%;height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16px;
}

/* ── Desktop book ── */
.book-wrap{
  perspective:2400px;
  width:min(940px,96vw);
  flex-shrink:0;
}
.book-body{
  position:relative;
  width:100%; height:min(600px,74vh);
  display:flex;
  transform-style:preserve-3d;
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.85));
  animation:bookIn .8s var(--ease-spring) both;
}
@keyframes bookIn{
  from{opacity:0;transform:perspective(1400px) rotateY(-25deg) scale(.9)}
  to  {opacity:1;transform:perspective(1400px) rotateY(0deg)   scale(1)}
}
.book-spine{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:14px;height:100%;z-index:15;
  background:linear-gradient(90deg,#0e0e1c,#1c1c30,#0e0e1c);
  display:flex;align-items:center;justify-content:center;
}
.book-spine span{
  writing-mode:vertical-rl;font-size:.42rem;
  color:rgba(255,255,255,.25);letter-spacing:.14em;white-space:nowrap;
  font-family:var(--fp);
}
.page-edge{
  position:absolute;top:2px;bottom:2px;
  width:calc(50% - 7px);
}
.left-edge{
  left:0;
  background:repeating-linear-gradient(90deg,#c8cce8 0,#f4f6ff 2px,transparent 2px,transparent 5px);
  border-radius:3px 0 0 3px;
}
.right-edge{
  right:0;
  background:repeating-linear-gradient(-90deg,#c8cce8 0,#f4f6ff 2px,transparent 2px,transparent 5px);
  border-radius:0 3px 3px 0;
}
.bpage{
  position:absolute;top:0;width:calc(50% - 7px);height:100%;
  background:var(--pg0);overflow:hidden;
}
.left-page {left:7px;border-radius:4px 0 0 4px}
.right-page{right:7px;border-radius:0 4px 4px 0}
/* gutter shadows */
.left-page::after{content:'';position:absolute;top:0;right:0;width:28px;height:100%;background:linear-gradient(to left,rgba(0,0,0,.1),transparent);pointer-events:none;z-index:5}
.right-page::before{content:'';position:absolute;top:0;left:0;width:28px;height:100%;background:linear-gradient(to right,rgba(0,0,0,.1),transparent);pointer-events:none;z-index:5}

/* ── Flip layer ── */
.flip-layer{
  position:absolute;top:0;width:calc(50% - 7px);height:100%;
  transform-origin:left center;
  transform-style:preserve-3d;
  z-index:20;pointer-events:none;
  will-change:transform;
}
.flip-front,.flip-back{
  position:absolute;inset:0;
  background:var(--pg0);
  backface-visibility:hidden;
}
.flip-front{border-radius:0 4px 4px 0}
.flip-back {border-radius:4px 0 0 4px;transform:rotateY(180deg)}

/* flip animations — smooth, no jump */
@keyframes flipFwd{
  0%  {transform:rotateY(0deg)}
  100%{transform:rotateY(-180deg)}
}
@keyframes flipBck{
  0%  {transform:rotateY(-180deg)}
  100%{transform:rotateY(0deg)}
}
.flip-layer.going-fwd {animation:flipFwd .65s var(--ease-smooth) forwards}
.flip-layer.going-bck {animation:flipBck .65s var(--ease-smooth) forwards}

/* ── Mobile book ── */
.mobile-book{display:none}
@media(max-width:700px){
  .book-wrap{display:none}
  .mobile-book{
    display:block;
    width:min(380px,92vw);
    flex-shrink:0;
    position:relative;
  }
  .mobile-page{
    width:100%;
    min-height:min(520px,72vh);
    background:var(--pg0);
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.7);
    position:relative;
    /* smooth slide transition */
    transition:transform .45s var(--ease-smooth), opacity .45s var(--ease-smooth);
  }
  .mobile-page.slide-out-left {animation:slideOutLeft .4s var(--ease-smooth) forwards}
  .mobile-page.slide-out-right{animation:slideOutRight .4s var(--ease-smooth) forwards}
  .mobile-page.slide-in-left  {animation:slideInLeft  .4s var(--ease-smooth) forwards}
  .mobile-page.slide-in-right {animation:slideInRight .4s var(--ease-smooth) forwards}
  @keyframes slideOutLeft {to{transform:translateX(-110%);opacity:0}}
  @keyframes slideOutRight{to{transform:translateX(110%);opacity:0}}
  @keyframes slideInLeft  {from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}
  @keyframes slideInRight {from{transform:translateX(-110%);opacity:0}to{transform:translateX(0);opacity:1}}
}
.mobile-slide-hint{
  text-align:center;margin-top:10px;
  font-size:.6rem;color:rgba(255,255,255,.3);letter-spacing:.1em;
  transition:opacity 1s;
}
.mobile-slide-hint.gone{opacity:0;pointer-events:none}

/* ── Nav ── */
.book-nav{
  display:flex;align-items:center;gap:1.2rem;
  margin-top:1.2rem;flex-shrink:0;
}
.nav-btn{
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s var(--ease-spring),border-color .2s;
  flex-shrink:0;
}
.nav-btn:hover:not(:disabled){background:rgba(29,185,84,.2);border-color:var(--grn);transform:scale(1.1)}
.nav-btn:disabled{opacity:.25;cursor:default}
.nav-dots{display:flex;gap:6px;align-items:center}
.nav-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.25);
  transition:background .3s,transform .3s var(--ease-spring);
  cursor:pointer;
}
.nav-dot.active{background:var(--grn);transform:scale(1.4)}
.close-btn{
  position:absolute;top:16px;right:16px;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.6);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.close-btn:hover{background:rgba(255,60,60,.2);color:#fff;border-color:rgba(255,60,60,.4)}


/* ══════════════════════════════════════════════
   PAGE CONTENT SYSTEM
══════════════════════════════════════════════ */
.pc{
  position:absolute;inset:0;
  overflow:hidden;
  padding:18px;
  /* subtle dot grid on every page */
  background-image:radial-gradient(circle,rgba(130,140,200,.07) 1px,transparent 1px);
  background-size:16px 16px;
}

/* ── Page number ── */
.pnum{
  position:absolute;bottom:10px;
  font-size:.52rem;color:var(--ink3);font-weight:500;letter-spacing:.06em;
}
.pnum.l{left:18px} .pnum.r{right:18px}

/* ── Polaroid ── */
.pol{
  background:#fff;
  padding:6px 6px 28px;
  box-shadow:0 6px 20px rgba(0,0,0,.18),0 1px 4px rgba(0,0,0,.1);
  position:absolute;
  display:inline-block;
}
.pol-img{
  width:100%;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
.pol-cap{
  position:absolute;bottom:5px;left:0;right:0;
  text-align:center;font-family:var(--fh);font-size:.8rem;
  color:var(--ink2);font-weight:600;
}

/* ── Photo fill (for grids/film) ── */
.pfill{
  width:100%;height:100%;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  position:relative;
}

/* ── Sticker / emoji decorations ── */
.stk{
  position:absolute;
  pointer-events:none;
  line-height:1;
  animation:stkFloat 4s ease-in-out infinite alternate;
}
@keyframes stkFloat{from{transform:rotate(var(--r,0deg)) scale(1)}to{transform:rotate(var(--r,0deg)) scale(1.08) translateY(-3px)}}
.stk.big  {font-size:1.8rem}
.stk.med  {font-size:1.3rem}
.stk.sm   {font-size:.95rem}
.stk.xs   {font-size:.72rem}

/* ── Tape ── */
.tape{
  position:absolute;height:16px;z-index:10;opacity:.78;border-radius:1px;
}
.tape-y{background:rgba(255,220,80,.72)}
.tape-b{background:rgba(140,200,255,.7)}
.tape-p{background:rgba(200,160,255,.7)}
.tape-g{background:rgba(160,230,190,.7)}
.tape-pk{background:rgba(255,170,200,.7)}

/* ── Sticky note ── */
.snote{
  position:absolute;padding:9px 11px;
  font-family:var(--fh);font-size:.82rem;line-height:1.55;
  color:var(--ink);box-shadow:2px 4px 14px rgba(0,0,0,.14);
  z-index:6;max-width:125px;
}
.snote.y{background:#e0f2ff;border-left:3px solid var(--blu)}
.snote.p{background:#ede8ff;border-left:3px solid var(--pur)}
.snote.g{background:#e0fff2;border-left:3px solid var(--grn)}
.snote.pk{background:#ffe8f4;border-left:3px solid var(--pnk)}
.snote .ns{font-size:.65rem;color:var(--ink3);margin-top:3px;font-family:var(--fp)}

/* ── Paper clip ── */
.pclip{
  position:absolute;width:11px;height:38px;
  border:2px solid #9a9ab0;border-radius:7px 7px 0 0;border-bottom:none;
  z-index:12;
}
.pclip::after{content:'';position:absolute;left:2px;top:4px;width:4px;height:26px;border:2px solid #9a9ab0;border-radius:4px 4px 0 0;border-bottom:none}

/* ── Playlist card ── */
.pl-card{
  position:absolute;
  background:linear-gradient(135deg,#14142a,#0e0e1c);
  border-radius:8px;padding:11px 13px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 20px rgba(0,0,0,.35);
}
.pl-head{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.pl-icon{
  width:20px;height:20px;border-radius:50%;
  background:var(--grn);display:flex;align-items:center;justify-content:center;
  font-size:.5rem;color:var(--bg0);padding-left:1px;flex-shrink:0;
}
.pl-title{font-size:.6rem;font-weight:700;color:#fff;letter-spacing:.05em;text-transform:uppercase}
.pl-tracks{list-style:none;display:flex;flex-direction:column;gap:4px}
.pl-tracks li{display:flex;align-items:center;gap:7px;font-size:.54rem;color:rgba(255,255,255,.65)}
.pl-tracks .tn{color:rgba(255,255,255,.3);width:14px}
.pl-tracks .tt{flex:1}
.pl-tracks .td{color:rgba(255,255,255,.3)}

/* ── Mini equalizer ── */
.eq-mini{display:flex;align-items:flex-end;gap:2px;height:20px}
.eq-mini span{width:3px;background:var(--grn);border-radius:1px;animation:eqD .9s ease-in-out infinite alternate}
.eq-mini span:nth-child(1){height:7px;animation-delay:0s}
.eq-mini span:nth-child(2){height:16px;animation-delay:.1s}
.eq-mini span:nth-child(3){height:12px;animation-delay:.2s}
.eq-mini span:nth-child(4){height:20px;animation-delay:.05s}
.eq-mini span:nth-child(5){height:9px;animation-delay:.3s}
.eq-mini span:nth-child(6){height:15px;animation-delay:.15s}
.eq-mini span:nth-child(7){height:5px;animation-delay:.25s}

/* ── Mini cassette ── */
.m-cass{
  position:absolute;
  width:82px;
  background:linear-gradient(145deg,#252525,#181818);
  border-radius:5px;padding:5px 7px 7px;
  border:1px solid #333;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
  z-index:8;
}
.m-cass-win{background:#0d0d0d;border-radius:3px;height:24px;display:flex;align-items:center;justify-content:space-around;padding:4px;margin-bottom:4px}
.m-reel{width:13px;height:13px;border-radius:50%;background:conic-gradient(#2a2a2a 0deg 120deg,#444 120deg 240deg,#2a2a2a 240deg);border:1px solid #444;animation:spin 2s linear infinite}
.m-cass-lbl{display:block;text-align:center;font-size:.34rem;color:#888;font-family:var(--fp)}

/* ── Film strip ── */
.film{background:#111;border-radius:4px;padding:7px 4px;box-shadow:0 4px 20px rgba(0,0,0,.45)}
.film-perfs{display:flex;gap:7px;padding:0 3px;justify-content:space-between;margin:3px 0}
.film-perfs div{width:9px;height:6px;background:var(--bg0);border-radius:1px}
.film-frames{display:flex;gap:3px}
.film-frame{flex:1;aspect-ratio:2/3;overflow:hidden;border-radius:1px}

/* ── Waveform ── */
.waveform{display:flex;align-items:center;justify-content:center;gap:2px;height:28px}
.waveform span{flex:1;max-width:4px;background:var(--blu);border-radius:1px;opacity:.55;animation:eqD 1.1s ease-in-out infinite alternate}
.waveform span:nth-child(odd){animation-delay:.07s}
.waveform span:nth-child(3n){animation-delay:.15s}

/* ── Vinyl sticker small ── */
.vs{width:40px;height:40px;position:absolute;z-index:7}
.vs-d{
  width:40px;height:40px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,#222 26%,transparent 27%),
    repeating-radial-gradient(circle at 50%,#111 0,#111 1px,#1a1a1a 1px,#1a1a1a 3px);
  animation:spin 4s linear infinite;
  position:relative;
}
.vs-h{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:7px;height:7px;border-radius:50%;background:var(--pg0);z-index:2}

/* ── Mini player controls ── */
.mplayer{display:flex;flex-direction:column;align-items:center;gap:6px;position:absolute}
.mpl-controls{display:flex;align-items:center;gap:12px}
.mpl-btn{font-size:.85rem;color:var(--ink3);cursor:default}
.mpl-play{
  width:28px;height:28px;border-radius:50%;
  background:var(--grn);display:flex;align-items:center;justify-content:center;
  color:var(--bg0);font-size:.6rem;padding-left:2px;
}
.mpl-bar{width:100%;height:3px;background:rgba(0,0,0,.12);border-radius:2px;overflow:hidden}
.mpl-fill{height:100%;background:var(--grn);border-radius:2px;width:58%}
.mpl-info{display:flex;justify-content:space-between;align-items:center;width:100%}
.mpl-title{font-family:var(--fh);font-size:.8rem;color:var(--ink2);font-weight:600}
.mpl-artist{font-size:.42rem;color:var(--ink3)}

/* ── Magazine layout ── */
.mag-wrap{position:absolute;inset:0;display:flex;flex-direction:column;padding:18px 16px;gap:8px}
.mag-head{flex-shrink:0}
.mag-eye{font-size:.46rem;letter-spacing:.22em;color:var(--pnk);font-weight:700;text-transform:uppercase;display:block;margin-bottom:5px}
.mag-ttl{font-size:1.35rem;font-weight:800;line-height:1.1;color:var(--ink);letter-spacing:-.02em}
.mag-sub{font-size:.5rem;color:var(--ink3);font-style:italic;margin-top:3px}
.mag-img{flex:1;overflow:hidden;border-radius:3px;box-shadow:0 4px 16px rgba(0,0,0,.18);min-height:0}
.mag-stars span{font-size:.65rem;color:#f59e0b}

/* ── Stamp (cover-inside) ── */
.stamp-wrap{border:2px solid var(--ink3);padding:15px 22px;text-align:center}
.stamp-inner{border:1px solid rgba(123,127,158,.5);padding:10px 15px}
.stamp-lbl{font-size:.52rem;letter-spacing:.2em;color:var(--ink3);text-transform:uppercase;display:block;margin-bottom:5px;font-weight:600}
.stamp-names{font-family:var(--fh);font-size:1.3rem;color:var(--ink);display:block;margin-bottom:4px;font-weight:700}
.stamp-date{font-size:.5rem;color:var(--ink3);display:block}

/* ── Back cover ── */
.barcode-lines{display:flex;gap:2px;align-items:stretch;height:38px}
.barcode-lines span{background:var(--ink2);width:2px;border-radius:0}
.barcode-lines span:nth-child(even){width:3px;opacity:.6}
.barcode-lines span:nth-child(3n){width:1px;opacity:.8}
.barcode-lines span:nth-child(5n+2){width:4px;opacity:.4}

/* ── Torn paper ── */
.torn{position:absolute;left:0;right:0;height:18px;background:var(--pg1);opacity:.7}
.torn.top{top:0;clip-path:polygon(0 0,100% 0,100% 55%,96% 100%,90% 65%,83% 100%,76% 60%,69% 100%,62% 70%,55% 100%,48% 65%,41% 100%,34% 60%,27% 100%,20% 70%,13% 100%,6% 65%,0 100%)}

/* ── Coffee ring ── */
.coffee{position:absolute;border-radius:50%;pointer-events:none;opacity:.07}
.coffee::after{content:'';position:absolute;inset:3px;border-radius:50%;border:1px solid currentColor}


/* ══════════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════════ */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center}
.lb-bg{position:absolute;inset:0;background:rgba(0,0,0,.9);backdrop-filter:blur(14px);cursor:pointer}
.lb-box{position:relative;z-index:1;animation:lbIn .3s var(--ease-spring)}
@keyframes lbIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
.lb-polaroid{background:#fff;padding:10px 10px 48px;box-shadow:0 30px 80px rgba(0,0,0,.6);max-width:min(500px,88vw)}
.lb-img{width:100%;aspect-ratio:4/3;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
.lb-cap{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-family:var(--fh);font-size:.95rem;color:var(--ink2);font-weight:600}
.lb-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:1.6rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.lb-prev{left:-56px} .lb-next{right:-56px}
.lb-arrow:hover{background:rgba(255,255,255,.22)}
.lb-close{
  position:absolute;top:-48px;right:0;
  background:none;border:none;color:rgba(255,255,255,.6);
  font-size:1.1rem;cursor:pointer;transition:color .2s;
}
.lb-close:hover{color:#fff}
@media(max-width:700px){
  .lb-prev{left:-12px;top:auto;bottom:-52px;transform:none}
  .lb-next{right:-12px;top:auto;bottom:-52px;transform:none}
}


/* ══════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  .vinyl-disc,.cass-reel,.m-reel,.vs-d{animation:none}
  .float-notes span,.stk,.cn-amp{animation:none;opacity:.15}
  .cover-eq span,.eq-mini span,.waveform span{animation:none;height:10px}
  .flip-layer.going-fwd,.flip-layer.going-bck{animation-duration:.01s}
  .mobile-page{transition-duration:.01s}
}