/* Tonebreak one-page design — ported from facelift-preview.html */
/* self-hosted fonts — identical rendering on every device, no network dependency */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Anton-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/IBMPlexMono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/IBMPlexMono-500.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/InstrumentSans-400i.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/InstrumentSans-400.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/InstrumentSans-500.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/InstrumentSans-600.woff2') format('woff2')}

/* ============================================================
   TONEBREAK FACELIFT — design tokens
   Same brand DNA (black / cream / gold / teal), elevated.
   ============================================================ */
:root{
  --bg:#050504;
  --bg-alt:#0c0c0a;
  --cream:#FEFDF1;
  --gold:#FAAE2B;
  --gold-deep:#FB9E00;
  --teal:#228785;
  --teal-deep:#00473e;
  --mint:#c7fff8;
  --ember:#EE4D0E;
  --line:rgba(254,253,241,.07);
  --font-display:'Anton',Impact,sans-serif;
  --font-body:'Instrument Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --beat:344.8ms; /* one beat at 174 BPM */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:rgba(254,253,241,.16) transparent;
  font-size:clamp(16px,.55vw + 9px,21px)}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(254,253,241,.13);border-radius:99px;
  border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(250,174,43,.45);background-clip:content-box}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:#050504}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- atmosphere layers ---------- */
#grain{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")}
#scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--ember),var(--gold));box-shadow:0 0 12px rgba(238,77,14,.45);
  opacity:0;transition:opacity .45s}
#scroll-progress.show{opacity:1}

/* scroll-shifting gradient backdrop — static layers, zero animation cost */
#bg{position:fixed;inset:0;z-index:0;pointer-events:none}
#bg i{position:absolute;inset:0}
#bg .bg-a{background:
  radial-gradient(120% 95% at 50% -20%,rgba(34,135,133,.20),transparent 68%),
  radial-gradient(70% 50% at 50% 8%,rgba(199,255,248,.045),transparent 72%)}
#bg .bg-b{background:
  radial-gradient(120% 95% at 50% 120%,rgba(238,77,14,.09),transparent 68%),
  radial-gradient(80% 60% at 8% -8%,rgba(34,135,133,.10),transparent 65%);opacity:0}

/* ---------- layout primitives ---------- */
.container{width:min(max(1180px,72vw),100% - clamp(2.5rem,6vw,5rem));margin-inline:auto}
.label{font-family:var(--font-mono);font-size:clamp(11px,.75vw,15px);letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.label-muted{font-family:var(--font-mono);font-size:clamp(10px,.7vw,14px);letter-spacing:.32em;text-transform:uppercase;color:rgba(254,253,241,.38)}
.section{position:relative;
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2.5rem,5vh,4rem) 0}
.section::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(900px,calc(100% - 5rem));height:1px;
  background:linear-gradient(90deg,transparent,rgba(254,253,241,.05) 22%,rgba(254,253,241,.05) 78%,transparent)}
.featured.section::before{display:none}
.section>.container{width:min(max(1180px,72vw),100% - clamp(2.5rem,6vw,5rem))}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.5em;overflow:hidden;
  font-family:var(--font-mono);font-size:clamp(11px,.7vw,14px);letter-spacing:.22em;text-transform:uppercase;
  padding:.95em 1.8em;transition:color .35s var(--ease-out),border-color .35s}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold);z-index:-1;
  transform:translateY(101%);transition:transform .45s var(--ease-out)}
.btn:hover::before{transform:translateY(0)}
.btn-primary{background:var(--gold);color:#0a0a0a;font-weight:600}
.btn-primary::before{background:var(--cream)}
.btn-outline{border:1px solid rgba(254,253,241,.25);color:var(--cream)}
.btn-outline:hover{color:#0a0a0a;border-color:var(--gold)}



/* ============================================================
   HEADER
   ============================================================ */
#dot-nav{position:fixed;right:clamp(14px,2.4vw,30px);top:50%;transform:translateY(-50%);
  z-index:120;display:flex;flex-direction:column;gap:16px}
#dot-nav a{position:relative;display:block;width:9px;height:9px;border-radius:50%;
  background:rgba(254,253,241,.22);transition:background .35s,transform .35s var(--ease-out)}
#dot-nav a:hover{background:rgba(254,253,241,.6);transform:scale(1.25)}
#dot-nav a.active{background:var(--gold);transform:scale(1.35);box-shadow:0 0 10px rgba(250,174,43,.55)}
#dot-nav a span{position:absolute;right:22px;top:50%;transform:translateY(-50%) translateX(4px);
  font-family:var(--font-mono);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(254,253,241,.75);white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s var(--ease-out)}
#dot-nav a:hover span,#dot-nav a.active span{opacity:1;transform:translateY(-50%)}
#dot-nav a.active span{color:var(--gold)}
@media(max-width:560px){#dot-nav{gap:13px}#dot-nav a{width:8px;height:8px}#dot-nav a span{display:none}}
/* top chrome bar — both controls live on the content column's edges */
#top-chrome{position:fixed;top:0;left:0;right:0;z-index:130;pointer-events:none}
.chrome-inner{display:flex;justify-content:space-between;align-items:center;
  padding-top:clamp(.9rem,2.2vh,1.5rem)}
.chrome-inner>*{pointer-events:auto}
.account-wrap{position:relative}
.account-btn{display:flex;align-items:center;gap:.5em;height:2.5rem;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  padding:0 1.6em;border:1px solid rgba(254,253,241,.14);border-radius:999px;
  color:rgba(254,253,241,.6);background:rgba(254,253,241,.025);
  transition:border-color .3s,box-shadow .3s,color .3s,background .3s}
.account-btn:hover{border-color:var(--gold);color:var(--cream);
  background:rgba(254,253,241,.04);box-shadow:0 0 14px rgba(250,174,43,.12)}
.account-btn .chev-sm{font-size:.7em;opacity:.7}
.account-dd{position:absolute;right:0;top:calc(100% + .75rem);width:17.5rem;
  border:1px solid rgba(254,253,241,.1);background:rgba(8,8,7,.97);backdrop-filter:blur(20px);
  box-shadow:0 24px 70px rgba(0,0,0,.65);opacity:0;pointer-events:none;
  transform:translateY(-8px);transition:all .35s var(--ease-out)}
.account-wrap.open .account-dd{opacity:1;pointer-events:auto;transform:translateY(0)}
.account-dd .dd-head{padding:1rem 1.2rem;border-bottom:1px solid var(--line)}
.account-dd .dd-head b{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(254,253,241,.45);font-weight:400}
.account-dd .dd-head p{font-size:.85rem;color:rgba(254,253,241,.75);margin-top:.4rem;line-height:1.5}
.account-dd .dd-link{display:flex;justify-content:space-between;padding:1rem 1.2rem;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);font-weight:500;transition:background .25s}
.account-dd .dd-link:hover{background:rgba(254,253,241,.04)}
.account-dd .dd-foot{padding:.9rem 1.2rem;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(254,253,241,.38)}

/* ============================================================
   ONE-PAGE FLOW
   ============================================================ */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
main{position:relative;z-index:1}
html{scroll-padding-top:0}

/* scroll reveals */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;overflow:hidden;min-height:100svh;
  display:flex;align-items:center;justify-content:center}
.hero::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:min(900px,calc(100% - 5rem));height:1px;
  background:linear-gradient(90deg,transparent,rgba(254,253,241,.05) 22%,rgba(254,253,241,.05) 78%,transparent)}
.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:0;padding:2.2rem 0 2.6rem}
.bpm-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);
  margin-right:.8em;vertical-align:1px;animation:pulse 3.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 6px rgba(250,174,43,.4)}
  50%{opacity:.45;box-shadow:0 0 2px rgba(250,174,43,.1)}}
.hero-logo{width:clamp(150px,min(22vw,30vh),440px);margin:clamp(1.4rem,3vh,2.4rem) auto 0;color:rgba(254,253,241,.87);
  opacity:0;animation:logoIn 1.1s var(--ease-out) .15s both;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}
.hero-logo .tb-mark{width:100%;height:auto;display:block}
@keyframes logoIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}
.hero-sub{margin-top:2.2rem;max-width:34rem;font-size:clamp(16px,1.05vw,22px);
  margin-inline:auto;opacity:0;animation:fadeIn 1s .7s forwards}
.hero-sub b{display:block;color:rgba(254,253,241,.92);font-weight:600;letter-spacing:.01em}
.hero-sub span{display:block;margin-top:.3rem;color:rgba(254,253,241,.55);font-weight:300;font-size:.92rem}
@keyframes fadeIn{to{opacity:1}}

/* now playing — top-left icon in the chrome bar, slide-out panel, auto-hides */
.np-wrap{display:flex;align-items:center}
.np-btn{position:relative;display:flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;border-radius:50%;cursor:pointer;
  border:1px solid rgba(254,253,241,.14);color:rgba(254,253,241,.65);
  background:rgba(254,253,241,.025);
  transition:border-color .3s,color .3s,box-shadow .3s,background .3s}
.np-btn svg{display:block;width:1.15rem;height:1.15rem}
.np-btn:hover,.np-wrap.open .np-btn{border-color:var(--gold);color:var(--cream);
  background:rgba(254,253,241,.04);box-shadow:0 0 14px rgba(250,174,43,.12)}
.np-btn .np-dot{position:absolute;top:1px;right:1px;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--ember);border:1.5px solid var(--bg);animation:pulse 3.2s ease-in-out infinite}
.np-panel{display:flex;align-items:center;overflow:hidden;
  max-width:0;opacity:0;transform:translateX(-12px);
  transition:max-width .65s var(--ease-out),opacity .45s,transform .65s var(--ease-out)}
.np-wrap.open .np-panel{max-width:min(52rem,calc(100vw - 10rem));opacity:1;transform:none}
/* grid readout: alignment comes from the tracks, never from content width.
   columns — eq | text lane | progress | time. np-art is absolute → no track. */
.np-panel-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;column-gap:.9rem;white-space:nowrap;
  width:min(30rem,calc(100vw - 11rem));height:2.9rem;margin-left:.65rem;padding:0 1.5rem 0 1.4rem;border-radius:999px;
  border:1px solid rgba(254,253,241,.12);background:rgba(8,8,7,.92);backdrop-filter:blur(16px)}
.np-lane{display:grid;align-content:center;justify-items:start;row-gap:.38rem;
  min-width:0;overflow:hidden;text-align:left;
  /* optical: label has no leading above, track carries all its leading below
     the baseline — nudge the block down so the visual mass sits centred */
  padding-top:.14rem}
.np-lane .src{font-family:var(--font-mono);font-size:.48rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--np-accent,var(--mint));line-height:1;
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
.np-track{display:block;max-width:100%;overflow:hidden;line-height:1.05}
.np-track.marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.np-track-inner{display:inline-flex;align-items:baseline;gap:.5em;will-change:transform}
.np-track.marquee .np-track-inner{animation:np-mq var(--mq-dur,9s) linear 1.4s infinite alternate}
@keyframes np-mq{from{transform:translateX(0)}to{transform:translateX(var(--mq-dist,-60px))}}
.np-panel-inner .artist{font-weight:600;font-size:.78rem;letter-spacing:.02em;color:rgba(254,253,241,.92)}
.np-panel-inner .np-dash{font-size:.7rem;color:rgba(254,253,241,.3)}
.np-panel-inner .title{font-size:.75rem;color:rgba(254,253,241,.6)}
.np-panel-inner .np-prog{width:5.5rem;height:2px;flex-shrink:0;border-radius:2px;
  background:rgba(254,253,241,.12);overflow:hidden}
.np-panel-inner .np-prog i{display:block;height:100%;width:38%;
  background:linear-gradient(90deg,var(--ember),var(--gold))}
.np-panel-inner .np-time{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.12em;
  color:rgba(254,253,241,.5);font-variant-numeric:tabular-nums;flex-shrink:0}
.eq{display:flex;align-items:flex-end;gap:2px;height:.7rem}
.eq i{width:.16rem;background:var(--gold);border-radius:1px;transform-origin:bottom;
  animation:eq 2.6s ease-in-out infinite}
.eq i:nth-child(1){height:50%;animation-delay:0s}
.eq i:nth-child(2){height:90%;animation-delay:.4s}
.eq i:nth-child(3){height:65%;animation-delay:.8s}
.eq i:nth-child(4){height:100%;animation-delay:.25s}
.eq i:nth-child(5){height:40%;animation-delay:.6s}
.eq i:nth-child(6){height:75%;animation-delay:1s}
@keyframes eq{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@media(max-width:560px){
  .np-panel-inner .np-prog,.np-panel-inner .np-time{display:none}
  .np-panel-inner{width:min(16rem,calc(100vw - 9rem));grid-template-columns:auto minmax(0,1fr)}
  .np-wrap.open .np-panel{max-width:18rem}}

/* hero social row — bare icons embedded between fading hairlines */
.social-row{display:flex;align-items:center;justify-content:center;
  gap:clamp(1.3rem,1.5vw,2.1rem);margin-top:2.8rem;
  opacity:0;animation:fadeIn 1s 1s forwards}
.social-row::before,.social-row::after{content:"";height:1px;flex-shrink:0;
  width:clamp(36px,6vw,110px)}
.social-row::before{background:linear-gradient(90deg,transparent,rgba(254,253,241,.14) 45%,rgba(254,253,241,.14));margin-right:.5rem}
.social-row::after{background:linear-gradient(90deg,rgba(254,253,241,.14),rgba(254,253,241,.14) 55%,transparent);margin-left:.5rem}
.social-row a{display:flex;color:rgba(254,253,241,.4);
  transition:color .35s,transform .35s var(--ease-out)}
.social-row a:hover{color:var(--gold);transform:translateY(-2px)}
.social-row a span{display:none}
.social-row svg{display:block;width:clamp(17px,1.15vw,24px);height:auto}
@media(max-width:560px){.social-row{gap:1.1rem}
  .social-row::before,.social-row::after{width:26px}}

/* ============================================================
   FEATURED RELEASE
   ============================================================ */

.featured-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.8rem}
.featured .player{width:min(max(30rem,30vw),100%);margin-inline:auto}
.featured-cover{margin-inline:auto}
.featured-cover{width:clamp(200px,15vw,320px);aspect-ratio:1;height:auto;flex-shrink:0;position:relative;overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.55)}
.featured-cover img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.featured-cover:hover img{transform:scale(1.06)}
.featured-cover::after{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 20%,rgba(254,253,241,.06) 50%,transparent 80%);
  transform:translateX(-110%);transition:transform 2.4s ease}
.featured-cover:hover::after{transform:translateX(110%)}
.featured-cover .spin-ring{position:absolute;inset:-1px;border:1px solid rgba(250,174,43,.0);transition:border-color .4s}
.featured-cover:hover .spin-ring{border-color:rgba(250,174,43,.55)}
.featured h2{font-size:clamp(26px,2.4vw,46px);font-weight:700;letter-spacing:-.01em;
  line-height:1.12;margin-top:1.1rem;max-width:24ch;margin-inline:auto}
.featured .meta{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(254,253,241,.42);margin-top:1rem}
.featured .meta .cat{color:rgba(199,255,248,.55)}

/* audio player — bare row, no plate, sits straight on the page */
.player{flex:1;max-width:32rem}
.player-row{display:flex;align-items:center;gap:1.2rem}
.play-btn{width:2.9rem;height:2.9rem;border-radius:50%;border:1px solid rgba(254,253,241,.18);
  display:flex;align-items:center;justify-content:center;color:rgba(254,253,241,.75);flex-shrink:0;
  background:rgba(254,253,241,.025);transition:all .35s var(--ease-out);position:relative}
.play-btn:hover{background:var(--gold);border-color:var(--gold);color:#0a0a0a;
  box-shadow:0 0 24px rgba(250,174,43,.28)}
.play-btn svg{width:.9rem;height:.9rem;margin-left:2px}
.play-btn.playing svg.tri{display:none}
.play-btn:not(.playing) svg.pause{display:none}
.player-wave{flex:1;display:flex;align-items:center;justify-content:space-between;gap:3px;height:2.9rem}
.player-wave i{flex:1;max-width:3px;background:rgba(254,253,241,.14);border-radius:99px;
  min-width:2px;min-height:3px;transition:background .3s}
.player-wave i.played{background:var(--gold)}
.player.playing .player-wave i.played:last-of-type{animation:eq 2.6s ease-in-out infinite}
.player-time{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;
  color:rgba(254,253,241,.5);font-variant-numeric:tabular-nums;flex-shrink:0}

/* ============================================================
   JOURNAL TEASER + LIST + MODAL
   ============================================================ */
.journal-teaser{padding:3rem 0}
.journal-teaser h2{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(26px,4vw,44px);letter-spacing:.01em;line-height:1.05;
  transition:color .4s;display:inline-block;position:relative}
.journal-teaser a:hover h2{color:var(--gold)}
.journal-teaser p{margin-top:1.2rem;color:rgba(254,253,241,.6);max-width:36rem}
.read-cue{display:inline-flex;align-items:center;gap:.6em;margin-top:1.4rem;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:rgba(254,253,241,.45);
  transition:color .3s,gap .3s var(--ease-out)}
a:hover .read-cue{color:var(--gold);gap:1em}

.post-list{border:1px solid var(--line);background:rgba(254,253,241,.015);
  max-width:min(max(44rem,42vw),58rem);margin-inline:auto}
.post-item{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:1.2rem;
  padding:1.25rem 1.5rem;cursor:pointer;transition:background .3s}
.post-item + .post-item{border-top:1px solid var(--line)}
.post-item:hover{background:rgba(254,253,241,.03)}
.post-item h3{font-size:1.02rem;font-weight:600;letter-spacing:.01em;transition:color .3s}
.post-item:hover h3{color:var(--gold)}
.post-item .excerpt{margin-top:.35rem;color:rgba(254,253,241,.5);font-size:.86rem}
.post-item time{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.22em;color:rgba(254,253,241,.4)}

/* modal */
.modal{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;
  padding:1.5rem;opacity:0;pointer-events:none;transition:opacity .4s}
.modal.open{opacity:1;pointer-events:auto}
.modal-backdrop{position:absolute;inset:0;background:rgba(3,3,2,.82);backdrop-filter:blur(8px)}
.modal-panel{position:relative;width:min(680px,100%);max-height:84vh;overflow-y:auto;
  background:var(--bg-alt);border:1px solid rgba(250,174,43,.2);padding:clamp(1.8rem,4vw,3.2rem);
  transform:translateY(30px) scale(.98);transition:transform .45s var(--ease-out)}
.modal.open .modal-panel{transform:none}
.modal-close{position:absolute;top:1rem;right:1.1rem;font-size:1.5rem;color:rgba(254,253,241,.5);
  transition:color .3s,transform .4s var(--ease-out)}
.modal-close:hover{color:var(--gold);transform:rotate(90deg)}
.modal-panel h2{font-size:clamp(19px,2.6vw,25px);font-weight:600;line-height:1.35;margin-top:.4rem}
.modal-panel .prose{margin-top:1.6rem;color:rgba(254,253,241,.72);font-size:.97rem}
.modal-panel .prose p{margin-bottom:1em}
.modal-panel .prose a{color:var(--mint);border-bottom:1px solid rgba(199,255,248,.3)}

/* ============================================================
   RELEASE GRID
   ============================================================ */
.grid-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2.2rem}
.grid-head h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(24px,3.4vw,38px);letter-spacing:.01em}
.release-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.9rem,2vw,1.4rem)}
@media(min-width:768px){.release-grid{grid-template-columns:repeat(4,1fr)}}
.release-card{display:block;position:relative}
.release-card .cover{position:relative;aspect-ratio:1;overflow:hidden;
  transition:box-shadow .5s var(--ease-out)}
.release-card .cover::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border:1px solid var(--line);transition:border-color .5s var(--ease-out)}
.release-card:hover .cover{box-shadow:0 14px 40px rgba(0,0,0,.45)}
.release-card:hover .cover::before{border-color:rgba(250,174,43,.4)}
.release-card .cover img{width:100%;height:100%;object-fit:cover;
  transform:translate3d(0,0,0);will-change:transform;backface-visibility:hidden;
  transition:transform 1.4s var(--ease-out),filter .5s}
.release-card:hover .cover img{transform:scale3d(1.018,1.018,1)}
.release-card .cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(254,253,241,.07),rgba(254,253,241,.02) 34%,transparent 55%)}
.release-card .meta{margin-top:.85rem}
.release-card .t2{font-size:clamp(14px,.85vw,17px);font-weight:600;letter-spacing:.01em;line-height:1.35;
  transition:color .3s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.release-card:hover .t2{color:var(--gold)}
.release-card .date{margin-top:.35rem;font-family:var(--font-mono);font-size:clamp(9.5px,.6vw,12px);
  letter-spacing:.28em;text-transform:uppercase;color:rgba(254,253,241,.4)}
.release-card .date.future{color:var(--gold)}
.new-dot{position:absolute;top:.7rem;right:.7rem;width:8px;height:8px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 10px rgba(250,174,43,.8);
  animation:pulse 3.2s ease-in-out infinite}

/* ============================================================
   MAILING LIST
   ============================================================ */
.mailing{overflow:hidden;position:relative}
.mailing-inner{position:relative;z-index:2;max-width:min(max(30rem,30vw),42rem);margin-inline:auto;text-align:center}
.mailing h2{font-size:clamp(19px,2.5vw,26px);font-weight:600;letter-spacing:.01em}
.mailing p{margin-top:1rem;color:rgba(254,253,241,.55);font-size:.92rem}
.mailing form{margin-top:2.2rem;display:flex;gap:.6rem}
.mailing input{flex:1;background:transparent;border:1px solid rgba(254,253,241,.2);
  padding:.95em 1.2em;color:var(--cream);font:inherit;font-size:.9rem;letter-spacing:.04em;
  transition:border-color .3s,box-shadow .3s;min-width:0}
.mailing input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 24px rgba(250,174,43,.12)}
.mailing input::placeholder{color:rgba(254,253,241,.3)}
@media(max-width:480px){.mailing form{flex-direction:column}}

/* ============================================================
   PAGE HEADS (Music / Updates / Presave / Leaderboard)
   ============================================================ */
.sec-head2{text-align:center;padding-bottom:clamp(1.8rem,3.5vh,2.6rem)}
.sec-head2 .label{display:inline-flex;align-items:center;gap:.75em}
.sec-head2 .label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ember);
  box-shadow:0 0 8px rgba(238,77,14,.5)}
.sec-head2 h2{margin-top:1.2rem;font-size:clamp(19px,1.75vw,34px);font-weight:600;letter-spacing:.01em}
.sec-head2 .dim{margin-top:.5rem;color:rgba(254,253,241,.5);font-size:clamp(14px,.95vw,19px);font-weight:300;
  max-width:34rem;margin-inline:auto}
.sec-head2 .dim b{color:var(--gold);font-weight:600}

/* empty state */
.empty{border:1px solid var(--line);background:rgba(254,253,241,.015);
  padding:2.6rem 2rem;text-align:center;max-width:min(max(30rem,30vw),42rem);margin-inline:auto}
.empty h3{font-size:1.1rem;font-weight:600;margin-top:.9rem}
.empty p{color:rgba(254,253,241,.55);margin-top:.5rem;font-size:.92rem}

/* leaderboard */
.lb-wrap{border:1px solid var(--line);background:rgba(254,253,241,.015);
  max-width:min(max(40rem,38vw),54rem);margin-inline:auto}
.lb-row{display:flex;align-items:center;gap:clamp(1rem,3vw,1.8rem);padding:1.25rem 1.5rem;transition:background .3s}
.lb-row:hover{background:rgba(254,253,241,.03)}
.lb-rank{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--gold)}
.lb-avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--teal-deep),var(--teal));
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex-shrink:0;
  border:1px solid rgba(199,255,248,.25)}
.lb-name{font-weight:600;font-size:1.02rem;letter-spacing:.01em}
.lb-handle{font-family:var(--font-mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(254,253,241,.4);margin-top:.25rem}
.lb-saves{margin-left:auto;text-align:right}
.lb-saves b{font-size:1.3rem;font-weight:700;color:var(--gold)}
.lb-saves span{display:block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(254,253,241,.4)}

/* ============================================================
   FOOTER + ticker
   ============================================================ */
footer{position:relative;z-index:1;background:var(--bg)}
footer::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(900px,calc(100% - 5rem));height:1px;
  background:linear-gradient(90deg,transparent,rgba(254,253,241,.05) 22%,rgba(254,253,241,.05) 78%,transparent)}
.footer-inner{display:flex;flex-direction:column;gap:1.3rem;padding:2.4rem 0;align-items:center;text-align:center}
@media(min-width:768px){.footer-inner{flex-direction:row;align-items:center;justify-content:space-between;text-align:left}}
.footer-inner .f-logo{font-family:var(--font-display);letter-spacing:.18em;color:rgba(254,253,241,.7)}
.footer-inner .f-social{display:flex;gap:1.6rem;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase}
.footer-inner .f-social a{color:rgba(254,253,241,.5);transition:color .3s}
.footer-inner .f-social a:hover{color:var(--gold)}
.footer-inner .f-copy{font-family:var(--font-mono);font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(254,253,241,.3)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* ---------- real audio-player partial, restyled to the bare-row look ---------- */
.featured .audio-player{flex:1;width:min(max(30rem,30vw),100%);margin-inline:auto;padding:0;background:transparent;border:none}
.featured .audio-player .play-btn{width:2.9rem;height:2.9rem;border-radius:50%;
  border:1px solid rgba(254,253,241,.18);background:rgba(254,253,241,.025);
  color:rgba(254,253,241,.75);font-size:.8rem;
  display:flex;align-items:center;justify-content:center;
  transition:all .35s var(--ease-out)}
.featured .audio-player .play-btn:hover{background:var(--gold);border-color:var(--gold);color:#0a0a0a;
  box-shadow:0 0 24px rgba(250,174,43,.28)}
.featured .audio-player .waveform{height:2.9rem;width:100%;display:block;cursor:pointer}
.featured .audio-player .time{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;
  color:rgba(254,253,241,.5)!important;font-variant-numeric:tabular-nums}
.featured .audio-player .listen-link,.featured .audio-player .buy-link{font-family:var(--font-mono);
  font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)!important;transition:color .3s}
.featured .audio-player .listen-link:hover,.featured .audio-player .buy-link:hover{color:var(--cream)!important}


/* ---------- chrome extras (fan account, flash messages) ---------- */
.acc-unread{width:.5rem;height:.5rem;border-radius:50%;background:var(--ember);flex-shrink:0}
.dd-signout{width:100%;text-align:left;border-top:1px solid var(--line);color:rgba(254,253,241,.55)!important;cursor:pointer}
.dd-signout:hover{color:var(--cream)!important}
.account-dd form{margin:0}
.flash{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  margin-bottom:1.2rem;padding:.8em 1.2em;border:1px solid var(--line)}
.flash-success{color:var(--mint);border-color:rgba(199,255,248,.25)}
.flash-error{color:var(--ember);border-color:rgba(238,77,14,.35)}
.lb-row{text-decoration:none;color:inherit}
.lb-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}


/* ---------- standalone compat (built.css is NOT loaded on the one-pager) ---------- */
body.is-loading{opacity:0;overflow:hidden}
body{transition:opacity .4s ease}

/* cover image fade-in (release-cover partial) */
.cover-img{opacity:0;transition:opacity .6s ease}
.cover-img.is-loaded{opacity:1}
.cover-shimmer{position:absolute;inset:0;background:rgba(254,253,241,.03)}

/* missing-cover placeholder (release-cover partial fallback div) */
.release-card .cover>div,.featured-cover>div{position:absolute;inset:0;
  background:linear-gradient(135deg,#00473e,#050504 55%,rgba(250,174,43,.35))}

/* audio-player partial structural layout (replaces its Tailwind utilities) */
.featured .audio-player>div:first-of-type{display:flex;align-items:center;gap:1.2rem}
.featured .audio-player>div:first-of-type>div{flex:1;min-width:0}
.featured .audio-player .play-btn{flex-shrink:0}
.featured .audio-player>div:last-of-type{display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;margin-top:.7rem;margin-left:calc(2.9rem + 1.2rem)}
.featured .audio-player>div:last-of-type>div{display:flex;align-items:center;gap:1.2rem;min-width:0}
.featured .audio-player .listen-link{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.featured .audio-player .buy-link{display:inline-flex;align-items:center;gap:.4em;flex-shrink:0}


/* ---------- now-playing pill: faint album-art backdrop ---------- */
.np-panel-inner{position:relative;overflow:hidden}
.np-panel-inner>*{position:relative;z-index:1}
.np-panel-inner>.np-art{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity .6s ease}
.np-panel-inner.has-art>.np-art{opacity:.2}
.np-panel-inner>.np-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,8,7,.8),rgba(8,8,7,.35) 45%,rgba(8,8,7,.8))}