/* WADR — dusk palette and editorial type, matching the cover art */
:root{
  --bg:#0e0b10; --bg-2:#141016; --panel:#17121a; --panel-2:#1f1922; --line:#2e2530;
  --fg:#f4e9d8; --muted:#b5a79c; --dim:#8a7d75;
  --neon:#e8b866; --gold:#f2cf8e; --hot:#d97a64; --err:#f09a8a;
  --mark:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --body:"Montserrat","Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.65;
  background:radial-gradient(1200px 700px at 85% -10%,rgba(217,122,100,.16),transparent 60%),
             radial-gradient(900px 600px at -10% 30%,rgba(232,184,102,.07),transparent 60%),var(--bg);
  background-attachment:fixed}
a{color:var(--neon)}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:500;font-family:var(--display)}
.wrap{max-width:1160px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-left,0px))}
.top{position:sticky;top:0;z-index:20;background:rgba(14,11,16,.82);backdrop-filter:blur(10px);border-bottom:1px solid rgba(244,233,216,.08)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;flex-wrap:wrap}
.logo{font:600 18px var(--mark);letter-spacing:.55em;margin-right:-.55em;color:var(--fg);text-decoration:none;text-shadow:none}
.logo:hover{color:var(--gold)}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{font:500 12px var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:10px 12px;border-bottom:1px solid transparent}
.nav a:hover{color:var(--fg)}
.nav a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--neon)}
.hero{padding:84px 0 56px;position:relative}
.hero .say{font-family:var(--display);font-weight:500;font-size:clamp(40px,6.4vw,76px);line-height:1.05;letter-spacing:-.01em;color:var(--fg);margin-top:14px;text-transform:none}
.hero .say em{font-style:italic;font-weight:400;color:var(--gold)}
.hero p{max-width:54ch;color:var(--muted);font-size:17px;margin:22px 0 0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-grid > *{min-width:0}
.rule{width:64px;height:1px;background:var(--neon);opacity:.7;margin:26px 0 0}
.stack{position:relative;aspect-ratio:1/1;max-width:460px;margin-left:auto;width:100%}
.stack .back{position:absolute;width:78%;aspect-ratio:1/1;object-fit:cover;box-shadow:0 20px 50px rgba(0,0,0,.6);opacity:.55}
.stack .b1{top:2%;left:0;transform:rotate(-7deg)}
.stack .b2{top:6%;right:0;transform:rotate(6deg)}
.stack .front{position:absolute;left:9%;top:12%;width:82%;box-shadow:0 30px 70px rgba(0,0,0,.7)}
.stack .front .cover{border-radius:2px}
.release-cap{margin-top:18px;text-align:center}
.release-cap .eyebrow{color:var(--neon)}
.release-cap .t{font-family:var(--display);font-style:italic;font-size:20px;margin-top:4px}
.hero-art{margin:0}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.btn{display:inline-block;font:600 12px var(--body);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;padding:16px 26px;border-radius:2px;border:1px solid var(--neon);color:#1a1208;background:var(--neon);cursor:pointer;transition:background .15s,color .15s}
.btn.ghost{background:transparent;color:var(--fg);border-color:rgba(244,233,216,.4)}
.btn:hover{background:var(--gold);border-color:var(--gold);color:#1a1208}
.btn.ghost:hover{background:rgba(244,233,216,.08);color:var(--fg);border-color:var(--fg)}
.btn:focus-visible,.nav a:focus-visible,.chip:focus-visible,.logo:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn[disabled]{opacity:.6;cursor:wait}
section{padding:64px 0}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:32px}
.sec-h h1,.sec-h h2,.h-sec{font-family:var(--display)!important;font-weight:500;font-size:clamp(32px,4.4vw,46px)!important;text-transform:none!important;letter-spacing:-.005em!important;line-height:1.1}
.eyebrow{font:500 11px var(--body);letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
a.eyebrow{text-decoration:none;color:var(--neon)}
a.eyebrow:hover{color:var(--gold)}
.lede{max-width:62ch;color:var(--muted);margin:0 0 32px}
.songs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:28px 24px}
.song{background:transparent;border:none;border-radius:0;overflow:visible;display:flex;flex-direction:column}
.song .art{box-shadow:0 14px 34px rgba(0,0,0,.5);transition:transform .25s ease,box-shadow .25s ease}
.song:hover .art{transform:translateY(-3px);box-shadow:0 22px 44px rgba(0,0,0,.6)}
.cover{aspect-ratio:1/1;width:100%;height:auto;object-fit:cover;background:var(--panel-2)}
.cover.ph{display:grid;place-items:center;text-align:center;padding:24px;background:linear-gradient(160deg,#3a2433,#1a1218)}
.cover.ph span{font-family:var(--display);font-style:italic;font-size:26px;color:var(--gold)}
.song .body{padding:16px 2px 4px;display:flex;flex-direction:column;gap:6px;flex:1}
.song h3{font-family:var(--display);font-weight:500;font-size:22px;line-height:1.2;text-transform:none;letter-spacing:0}
.genre{font:500 10.5px var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--neon)}
.song p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.song .foot{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line)}
.when{font:500 10.5px var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);border:none;padding:0}
.song .lic{font:600 11px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--neon);padding-bottom:2px}
.song .lic:hover{color:var(--gold)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font:500 11px var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:2px;padding:9px 14px;cursor:pointer}
.chip:hover{color:var(--fg);border-color:rgba(244,233,216,.4)}
.chip[aria-pressed="true"]{color:#1a1208;background:var(--neon);border-color:var(--neon)}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.split > *{min-width:0}
.panel{background:rgba(31,25,34,.7);border:1px solid var(--line);border-radius:4px;padding:32px}
.uses{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.uses li{padding-left:24px;position:relative;color:var(--muted)}
.uses li::before{content:"";position:absolute;left:0;top:.75em;width:12px;height:1px;background:var(--neon);border-radius:0;box-shadow:none}
.uses b{color:var(--fg);font-weight:600}
.wform{display:grid;gap:18px}
.fld{display:grid;gap:7px}
.fld label{font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.req{color:var(--hot);margin-left:3px}
.fld input,.fld select,.fld textarea{font:15px var(--body);color:var(--fg);background:rgba(14,11,16,.7);border:1px solid var(--line);border-radius:2px;padding:13px 14px;width:100%}
.fld textarea{min-height:140px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--neon);box-shadow:0 0 0 3px rgba(232,184,102,.15)}
.fld [aria-invalid="true"]{border-color:var(--err)}
.ferr{color:var(--err);font-size:13px;min-height:0;margin:0}
.formerr{color:var(--err);font-size:14px;margin:0}
.thanks{font-family:var(--display);font-style:italic;font-size:22px;color:var(--fg)}
.thanks p{margin:0 0 10px}
.skel{height:220px;border-radius:2px;background:linear-gradient(90deg,var(--panel-2),var(--line),var(--panel-2));background-size:200% 100%;animation:sh 1.4s infinite}
@keyframes sh{to{background-position:-200% 0}}
.signup{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.signup .wform{grid-template-columns:1fr}
#updates{border-top:1px solid var(--line);margin-top:24px}
.prose{max-width:66ch}
.prose p{color:var(--muted);margin:0 0 20px}
.prose p b{color:var(--fg);font-weight:600}
.wrap.prose{max-width:1160px}
.wrap.prose > *{max-width:740px}
.prose h2{font-family:var(--display);font-weight:500;font-size:26px;text-transform:none;letter-spacing:0;margin:40px 0 10px}
.prose li{line-height:1.7;color:var(--muted);margin:6px 0}
.prose li b{color:var(--fg)}
.prose ul{padding-left:20px;margin:8px 0 14px}
.prose a,.form-fine a{color:var(--neon)}
.form-note{margin:0 0 20px;line-height:1.6;color:var(--muted)}
.form-note b{color:var(--fg)}
.form-fine{margin:16px 0 0;font-size:12.5px;color:var(--dim)}
footer{border-top:1px solid var(--line);padding:40px 0 56px;color:var(--dim);font-size:12.5px;letter-spacing:.04em}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
footer .logo{font-size:14px}
.foot-link{color:inherit;text-decoration:underline;text-underline-offset:3px}
.foot-link:hover{color:var(--neon)}
.art{position:relative}
.play{position:absolute;right:12px;top:12px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(244,233,216,.5);background:rgba(14,11,16,.55);backdrop-filter:blur(6px);cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.45);transition:transform .15s ease,background .15s ease}
.play:hover{transform:scale(1.06);background:var(--neon);border-color:var(--neon)}
.play:hover .ic{border-left-color:#1a1208}
.play.on{background:var(--neon);border-color:var(--neon)}
.play:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.play .ic{width:0;height:0;border-left:14px solid var(--fg);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.play.on .ic{width:13px;height:16px;border:none;margin:0;background:linear-gradient(90deg,#1a1208 0 34%,transparent 34% 66%,#1a1208 66%)}
.prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,.35)}
.prog i{display:block;height:100%;width:0;background:var(--neon);transition:width .25s linear}
@media (max-width:860px){
  .split,.signup,.hero-grid{grid-template-columns:1fr}
  .hero{padding-top:56px}
  .stack{margin:8px auto 0;max-width:360px}
}
@media (max-width:520px){
  .logo{letter-spacing:.4em;margin-right:-.4em;font-size:16px}
  .nav a{padding:8px 7px;letter-spacing:.14em;font-size:11px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.skel{animation:none}.song .art{transition:none}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

html,body{overflow-x:clip}
#featured{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){#featured{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}}

.logo span{font-weight:500;font-size:.62em;letter-spacing:.5em;color:var(--muted);margin-left:.9em;vertical-align:.12em}
.logo:hover span{color:var(--gold)}
@media (max-width:520px){.logo span{margin-left:.6em;letter-spacing:.35em}}

.song .foot .presave{font:600 11px var(--body);letter-spacing:.16em;text-transform:uppercase;color:#1a1208;background:var(--neon);text-decoration:none;padding:6px 10px;border-radius:2px;margin-right:auto;margin-left:10px}
.song .foot .presave:hover{background:var(--gold)}
.song .foot .when{color:var(--gold)}
.release-cap .btn{margin-top:14px;padding:12px 20px}