:root{--bg:#0f0e0b;--bg2:#1a1813;--ink:#efe5d0;--mute:#a99f8c;--teal:#e8603e;--sky:#f2a065;--cream:#e9dcc2;--red:#e0583a;--spot:#1ed760;--line:rgba(255,255,255,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--teal)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header.top{position:sticky;top:0;z-index:5;background:rgba(15,14,11,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.85rem;color:var(--ink);text-decoration:none}
.brand img{width:26px;height:26px}
nav a{color:var(--mute);text-decoration:none;font-size:.9rem;margin-left:18px}nav a:hover{color:var(--ink)}
@media(max-width:520px){nav a:not(.cta){display:none}}
.hero{position:relative;overflow:hidden;text-align:center;padding:72px 0 64px}
.hero:before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 50% 40%,rgba(242,160,101,.18),transparent 40%),repeating-radial-gradient(circle at 50% 40%,rgba(232,96,62,.07) 0 1px,transparent 1px 34px);pointer-events:none}
.iris{position:relative;width:148px;height:148px;margin:0 auto 28px;border-radius:50%;background:conic-gradient(from 0deg,#5eead4,#38bdf8,#f2a065,#e8603e,#c2462a,#5eead4);box-shadow:0 0 60px rgba(242,160,101,.35)}
.iris:before{content:"";position:absolute;inset:14px;border-radius:50%;background:repeating-conic-gradient(rgba(15,14,11,.35) 0 3deg,transparent 3deg 9deg)}
.iris:after{content:"";position:absolute;inset:46px;border-radius:50%;background:#0a0907;box-shadow:inset -10px -10px 0 -6px rgba(255,255,255,.0),18px -14px 0 -22px #fff;animation:pupil 7s ease-in-out infinite}
@keyframes pupil{0%,100%{inset:46px}50%{inset:38px}}
@media(prefers-reduced-motion:reduce){.iris:after{animation:none}}
.kicker{color:var(--teal);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:.78rem;margin:0 0 10px}
h1{font-size:clamp(2.3rem,8vw,4.6rem);line-height:1.02;margin:0 0 16px;letter-spacing:-.02em;font-weight:900}
h1 span{background:linear-gradient(90deg,var(--teal),var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{max-width:620px;margin:0 auto 28px;color:var(--mute);font-size:1.12rem}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--spot);color:#04140a;font-weight:800;text-decoration:none;padding:14px 26px;border-radius:999px;font-size:1.05rem;box-shadow:0 8px 28px rgba(30,215,96,.25);transition:transform .15s}
.btn:hover{transform:translateY(-2px)}.btn svg{width:22px;height:22px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none;margin-left:8px}
section{padding:56px 0;border-top:1px solid var(--line)}
h2{font-size:clamp(1.5rem,4vw,2.1rem);margin:0 0 18px;letter-spacing:-.01em}
.about{display:grid;gap:28px}
@media(min-width:820px){.about{grid-template-columns:1.2fr 1fr;align-items:start}}
.about p{color:#d8ccb4;margin:0 0 14px}
.chart{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:26px;text-align:center;font-family:Georgia,"Times New Roman",serif;font-weight:700;color:#efe5d0;letter-spacing:.2em;line-height:1.35}
.chart div:nth-child(1){font-size:3rem}.chart div:nth-child(2){font-size:2rem}.chart div:nth-child(3){font-size:1.4rem}.chart div:nth-child(4){font-size:1rem}.chart div:nth-child(5){font-size:.75rem;color:var(--mute)}
.chart small{display:block;font-family:system-ui,sans-serif;letter-spacing:0;font-weight:500;color:var(--mute);margin-top:12px;font-size:.85rem}
.embed{border-radius:14px;overflow:hidden;background:var(--bg2)}
.embed iframe{display:block;width:100%;height:452px;border:0}
.songs{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:620px){.songs{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.songs{grid-template-columns:repeat(4,1fr)}}
.song{background:var(--bg2);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .15s,border-color .15s}
.song:hover{transform:translateY(-3px);border-color:rgba(232,96,62,.35)}
.song{display:flex;flex-direction:column}
.song .play{all:unset;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.song .play:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.song .art{position:relative;display:block}
.song img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#24211a}
.song .pi{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border-radius:50%;background:rgba(15,14,11,.72);border:1px solid rgba(232,96,62,.55);display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.4);transition:transform .15s,background .15s}
.song .pi svg{width:20px;height:20px;fill:var(--teal)}
.song .i-pause{display:none}
.song.is-playing .i-play{display:none}.song.is-playing .i-pause{display:block}
.song .play:hover .pi{transform:scale(1.08);background:rgba(15,14,11,.9)}
.song.playing{border-color:rgba(232,96,62,.7)}
.song.playing .play .pi,.song.playing .play:hover .pi{background:var(--teal)}.song.playing .pi svg{fill:#04140a}
.song .t{display:block;padding:10px 12px 4px;font-size:.92rem;font-weight:600;line-height:1.3}
#player{position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(26,24,19,.97);backdrop-filter:blur(12px);border-top:1px solid rgba(232,96,62,.25);box-shadow:0 -10px 30px rgba(0,0,0,.45);transform:translateY(110%);transition:transform .25s;padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
#player.on{transform:none}
#player .wrap{display:flex;align-items:center;gap:12px}
#player .frame{flex:1;min-width:0;height:80px;border-radius:12px;overflow:hidden;background:#24211a}
#player .frame iframe,#player .frame>div{display:block;width:100%;height:80px;border:0}
#player .side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#psp{font-size:.8rem;font-weight:700;color:var(--spot);text-decoration:none;white-space:nowrap}
#pclose{background:none;border:0;color:var(--mute);font-size:1.5rem;line-height:1;cursor:pointer;padding:2px 4px}
@media(max-width:520px){#player .wrap{padding:0 10px;gap:8px}#psp{font-size:.72rem}}
body.has-player footer{padding-bottom:140px}
.song a.play{color:inherit;text-decoration:none}
.song .links{margin-top:auto}
.song .lyr summary{list-style:none;cursor:pointer;display:inline-block;margin:0 12px 12px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;font-size:.78rem;font-weight:700;color:var(--teal)}
.song .lyr summary::-webkit-details-marker{display:none}
.song .lyr summary:hover,.song .lyr[open] summary{border-color:rgba(232,96,62,.55);background:rgba(232,96,62,.08)}
.song .lyr[open] summary:after{content:" \2715";font-size:.7rem}
.lyrics{color:#d8ccb4;font-size:.95rem;line-height:1.55}
.lyrics p{margin:0 0 1em}
.song .lyrics{padding:4px 16px 18px;columns:2 260px;column-gap:36px}
.song .lyrics p{break-inside:avoid}
.song.lyr-open{grid-column:1/-1;display:grid;grid-template-columns:220px 1fr;grid-template-rows:auto auto auto 1fr;column-gap:8px;transform:none}
.song.lyr-open .play{grid-column:1;grid-row:1/3}.song.lyr-open .links{grid-column:1;grid-row:3}
.song.lyr-open .lyr{grid-column:2;grid-row:1/5;padding-top:12px}
.song.lyr-open .lyr summary{margin-left:16px}
#lyrdlg{border:1px solid rgba(232,96,62,.3);border-radius:16px;background:var(--bg2);color:var(--ink);padding:0;width:min(640px,92vw);max-height:80vh}
#lyrdlg::backdrop{background:rgba(8,7,5,.6)}
#lyrdlg header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;background:var(--bg2);border-bottom:1px solid var(--line)}
#lyrdlg h3{margin:0;font-size:1.05rem}
#lyrdlg .x{background:none;border:0;color:var(--mute);font-size:1.5rem;cursor:pointer;line-height:1}
#lyrdlg .lyrics{padding:16px 18px 6px}
#plyr{flex:none;background:none;border:1px solid var(--line);color:var(--teal);font-weight:700;font-size:.78rem;border-radius:999px;padding:4px 12px;cursor:pointer}
#plyr[hidden]{display:none}
@media(max-width:620px){#lyrdlg{position:fixed;inset:auto 0 0 0;width:100%;max-width:100%;max-height:85vh;margin:0;border-radius:16px 16px 0 0}}
.song .sp{display:block;margin-top:auto;padding:2px 12px 12px;font-size:.78rem;color:var(--mute);text-decoration:none}
.song .sp:hover{color:var(--spot)}
.soon{margin-top:22px;color:var(--mute);text-align:center}
.contact{text-align:center}
.contact p{color:#d8ccb4}
.mail{font-size:1.15rem;font-weight:700}
footer{border-top:1px solid var(--line);padding:28px 0 40px;color:var(--mute);font-size:.88rem;text-align:center}

/* ===== preview v2 ===== */
:root{--display:Oswald,"Arial Narrow","Roboto Condensed",Impact,sans-serif;--grain: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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:radial-gradient(1100px 600px at 100% 0%,rgba(224,88,58,.08),transparent 60%),radial-gradient(900px 500px at 0% 60%,rgba(233,220,194,.04),transparent 60%),var(--bg);background-attachment:fixed}
body:after{content:"";position:fixed;inset:0;background:var(--grain);pointer-events:none;z-index:50;mix-blend-mode:overlay}
::selection{background:var(--red);color:#0f0e0b}
h2,h3,.brand{font-family:var(--display)}
.brand{letter-spacing:.12em;font-weight:700;font-size:.95rem}
nav a{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:.82rem}
nav a.cta{color:var(--red)}
/* brand: tiny eyes that roll up as you scroll / on hover */
.brand .eyes{display:inline-flex;gap:3px}
.brand .eye{width:13px;height:13px;border-radius:50%;background:var(--cream);position:relative;overflow:hidden}
.brand .eye:after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:radial-gradient(circle,#0a0907 0 32%,var(--red) 35%);transform:translateY(calc(var(--roll,0) * -5px));transition:transform .35s cubic-bezier(.5,1.6,.5,1)}
.brand:hover .eye:after{transform:translateY(-6px)}
/* split poster hero */
.hero{padding:56px 0 64px;text-align:left}
.hero:before{inset:0;background:radial-gradient(circle at 26% 50%,rgba(224,88,58,.16),transparent 42%),repeating-radial-gradient(circle at 26% 50%,rgba(233,220,194,.045) 0 1px,transparent 1px 30px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;max-width:1180px}
.iris{display:none}
.poster{position:relative;margin:0;transform:rotate(-1.6deg);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.poster img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:4px;box-shadow:0 0 0 1px rgba(233,220,194,.12),0 30px 70px rgba(0,0,0,.65),0 0 90px rgba(224,88,58,.18)}
.poster:before,.poster:after{content:"";position:absolute;width:84px;height:24px;background:rgba(233,220,194,.72);top:2px;z-index:1;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.poster:before{left:-26px;transform:rotate(-42deg)}.poster:after{right:-26px;transform:rotate(42deg)}
.poster:hover{transform:rotate(0) scale(1.012)}
.hero .copy{max-width:520px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kicker{color:var(--red);font-family:var(--display);font-weight:500;letter-spacing:.28em;font-size:.82rem;margin-bottom:18px;display:flex;align-items:center;gap:12px}
.kicker:before{content:"";width:34px;height:2px;background:var(--red)}
.lede{margin:0 0 30px;color:var(--mute);font-size:1.12rem;max-width:none}
.lede .tag{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--cream);font-size:clamp(2.3rem,4.6vw,3.7rem);line-height:.98;letter-spacing:.005em;margin-bottom:18px}
.lede .tag .aside{display:block;margin-top:8px;font:500 .74rem/1 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:lowercase;color:var(--red);opacity:.85}
.btn{font-family:Inter,system-ui,sans-serif;transition:transform .15s,box-shadow .2s}.btn:hover{box-shadow:0 10px 36px rgba(30,215,96,.35)}
.btn.ghost{border-color:rgba(233,220,194,.28);color:var(--cream)}
.btn.ghost:hover{border-color:var(--red);color:var(--red)}
.hero .meta{margin-top:28px;display:flex;gap:22px;flex-wrap:wrap;font:500 .78rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.hero .meta span:before{content:"\25CF";color:var(--red);margin-right:8px}
@media(max-width:899px){.hero{padding:22px 0 44px;text-align:center}.hero .wrap{grid-template-columns:1fr;gap:30px}
 .poster{max-width:560px;margin:8px auto 0;transform:rotate(-1deg)}.hero .copy{margin:0 auto}.kicker{justify-content:center}.kicker:before{display:none}.hero .meta{justify-content:center}.btn.ghost{margin:10px 0 0}}
/* ticker */
.ticker{overflow:hidden;border-block:1px solid rgba(233,220,194,.12);background:var(--red);white-space:nowrap;font:700 .9rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:#14110c}
.ticker div{display:inline-block;padding:13px 0;animation:tick 70s linear infinite}
.ticker b{margin:0 18px;opacity:.6}
@keyframes tick{to{transform:translateX(-50%)}}
/* sections */
section{border-top:0;position:relative}
section h2{display:flex;align-items:baseline;gap:14px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.8rem,4.4vw,2.6rem)}
section h2:after{content:"";flex:1;height:2px;background:linear-gradient(90deg,rgba(233,220,194,.25),transparent);transform:translateY(-10px)}
.chart{background:var(--cream);background-image:var(--grain);color:#14110c;border:0;border-radius:6px;box-shadow:0 22px 60px rgba(0,0,0,.55);transform:rotate(1.4deg);transition:transform .3s}
.chart:hover{transform:rotate(0) scale(1.02)}
.chart div:nth-child(1){color:var(--red)}.chart div:nth-child(5){color:#6b6252}.chart small{color:#4a4338}
.embed{box-shadow:0 0 0 1px var(--line),0 24px 60px rgba(0,0,0,.45)}
.song{border-radius:8px;transition:transform .2s,border-color .2s,box-shadow .2s}
.song:hover{box-shadow:0 14px 34px rgba(0,0,0,.5)}
.song .art{overflow:hidden}.song img{transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .3s}
.song .play:hover img{transform:scale(1.05)}
.song .lyr summary{border-radius:3px;text-transform:uppercase;letter-spacing:.1em;font-size:.7rem}
.contact{max-width:640px;margin:0 auto;padding:36px 26px;border-radius:8px;background:var(--bg2);border:1px solid rgba(233,220,194,.14);box-shadow:inset 0 3px 0 var(--red)}
.contact h2{justify-content:center}.contact h2:after{display:none}
.mail a{font-family:var(--display);font-size:1.6rem;letter-spacing:.02em;color:var(--cream);text-decoration:none;border-bottom:2px solid var(--red)}
.mail a:hover{color:var(--red)}
footer a{color:var(--red)}
.chartposter{margin:0 auto;width:100%;max-width:380px;text-align:center;justify-self:center}
.chartposter img{display:block;width:100%;height:auto;aspect-ratio:4/5;border-radius:3px;transform:rotate(2deg);box-shadow:0 0 0 1px rgba(233,220,194,.1),0 26px 60px rgba(0,0,0,.6),0 0 70px rgba(224,88,58,.12);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.chartposter:hover img{transform:rotate(0) scale(1.015)}
.chartposter figcaption{margin-top:18px;font:500 .8rem/1 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
@media(min-width:820px){.about{grid-template-columns:1.25fr 1fr;align-items:center;gap:56px}}
@media(max-width:819px){.chartposter{max-width:300px;margin-top:8px}}
@media(prefers-reduced-motion:reduce){.chartposter img{transition:none}}
/* reveal on scroll */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.ticker div{animation:none!important}.poster,.rv{transition:none!important}.rv{opacity:1;transform:none}}
/* share (Oct 19) */
.btn.share-btn{margin-left:8px;padding:14px 20px}
.btn.share-btn svg{width:18px;height:18px}
.song .links{display:flex;align-items:center;justify-content:space-between;gap:6px;padding-right:8px}
.song .links .sp{padding-bottom:12px}
.song .share{flex:none;display:grid;place-items:center;width:30px;height:30px;margin:0 0 10px;border-radius:50%;border:1px solid rgba(233,220,194,.18);background:transparent;color:var(--mute);cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.song .share svg{width:15px;height:15px}
.song .share:hover,.song .share:focus-visible{color:var(--red);border-color:var(--red);background:rgba(224,88,58,.08);outline:none}
#sharepop{position:absolute;z-index:40;width:236px;padding:12px;background:#1a1813;border:1px solid rgba(233,220,194,.16);border-radius:8px;box-shadow:inset 0 3px 0 var(--red),0 18px 44px rgba(0,0,0,.6);color:var(--cream)}
#sharepop[hidden]{display:none}
#sharepop .sh-t{font:700 .78rem/1.25 var(--display);letter-spacing:.12em;text-transform:uppercase;margin:2px 26px 10px 2px;color:var(--cream)}
#sharepop .sh-x{position:absolute;top:6px;right:8px;background:none;border:0;color:var(--mute);font-size:1.2rem;cursor:pointer;line-height:1}
#sharepop .sh-copy{display:block;width:100%;margin-bottom:8px;padding:9px 10px;border-radius:4px;border:0;background:var(--red);color:#14110c;font:700 .82rem/1 Inter,system-ui,sans-serif;cursor:pointer}
#sharepop .sh-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#sharepop .sh-grid a{display:block;padding:8px 6px;border:1px solid rgba(233,220,194,.16);border-radius:4px;text-align:center;font:600 .78rem/1 Inter,system-ui,sans-serif;color:var(--cream);text-decoration:none}
#sharepop .sh-grid a:hover{border-color:var(--red);color:var(--red)}

/* ===== additions: start here, filters, other apps, sign-up, song pages ===== */
.alsoon{margin:16px 0 0;font-size:.86rem;color:var(--mute)}
.alsoon a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(233,220,194,.25);margin-left:12px;white-space:nowrap}
.alsoon a:hover{color:var(--red);border-color:var(--red)}
@media(max-width:899px){.alsoon{text-align:center}}
.song a.t{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(233,220,194,.22);text-underline-offset:3px}
.song a.t:hover{color:var(--red);text-decoration-color:var(--red)}
.song.lyr-open .play{grid-row:1}.song.lyr-open a.t{grid-column:1;grid-row:2}
.song[hidden]{display:none}
#start .sub{color:var(--mute);margin:-6px 0 22px}
.feat{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;counter-reset:f}
.fs{position:relative;display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--line);border-radius:8px;overflow:hidden;counter-increment:f;transition:border-color .2s,box-shadow .2s}
.fs:hover{box-shadow:0 14px 34px rgba(0,0,0,.5)}
.fs:before{content:counter(f);position:absolute;z-index:2;top:8px;left:8px;width:28px;height:28px;border-radius:50%;background:var(--red);color:#14110c;font:700 .95rem/28px var(--display);text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.4)}
.fplay{all:unset;display:block;position:relative;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent}
.fplay:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.fplay img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#24211a;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fplay:hover img{transform:scale(1.05)}
.fs .pi{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border-radius:50%;background:rgba(15,14,11,.72);border:1px solid rgba(232,96,62,.55);display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.fs .pi svg{width:20px;height:20px;fill:var(--teal)}
.fs .i-pause{display:none}.fs.is-playing .i-play{display:none}.fs.is-playing .i-pause{display:block}
.fs.playing{border-color:rgba(232,96,62,.7)}.fs.playing .pi{background:var(--teal)}.fs.playing .pi svg{fill:#04140a}
.fbody{padding:12px 14px 16px}
.ft{display:block;margin-bottom:6px;font-weight:700;line-height:1.25;color:var(--ink);text-decoration:none}
.ft:hover{color:var(--red)}
.fbody p{margin:0;font-size:.86rem;line-height:1.45;color:var(--mute)}
@media(max-width:899px){.feat{grid-template-columns:1fr;gap:12px}.fs{flex-direction:row;align-items:center}.fplay{flex:none;width:112px}
 .fs:before{top:6px;left:6px;width:24px;height:24px;font-size:.8rem;line-height:24px}.fs .pi{right:6px;bottom:6px;width:34px;height:34px}.fs .pi svg{width:16px;height:16px}.fbody{padding:10px 14px}}
.aud{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 22px}
.aud button{padding:9px 14px;border:1px solid rgba(233,220,194,.2);border-radius:999px;background:transparent;color:var(--cream);font:600 .82rem/1 Inter,system-ui,sans-serif;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.aud button span{margin-left:5px;font-weight:500;color:var(--mute)}
.aud button:hover{border-color:var(--red);color:var(--red)}
.aud button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#14110c}.aud button[aria-pressed="true"] span{color:#14110c;opacity:.7}
@media(max-width:620px){.aud{flex-wrap:nowrap;overflow-x:auto;margin:-4px -20px 20px;padding:0 20px 4px;scrollbar-width:none}.aud::-webkit-scrollbar{display:none}.aud button{flex:none}}
.hero .btn.iconbtn{width:52px;height:52px;margin:0 0 0 8px;padding:0;justify-content:center;vertical-align:middle}
.hero .btn.iconbtn svg{width:20px;height:20px}
@media(max-width:520px){.hero{padding:12px 0 36px}.hero .wrap{gap:16px}.poster{max-width:236px}.poster:before,.poster:after{width:60px;height:18px}
 .kicker{margin-bottom:8px;font-size:.7rem}.lede{margin-bottom:18px;font-size:1rem;line-height:1.5}.lede .tag{font-size:2.05rem;margin-bottom:10px}}
#about{overflow-x:clip}   /* the photo's corner tape may poke past the window edge */
.collage{position:relative;width:100%;max-width:460px;margin:0 auto;justify-self:center}
.collage .c-chart{display:block;width:66%;height:auto;margin-left:auto;aspect-ratio:4/5;border-radius:3px;transform:rotate(3deg);box-shadow:0 0 0 1px rgba(233,220,194,.1),0 26px 60px rgba(0,0,0,.6),0 0 70px rgba(224,88,58,.12);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.collage .c-photo{position:relative;z-index:1;width:52%;margin-top:-6%;transform:rotate(-3deg);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.collage .c-photo img{display:block;width:100%;height:auto;aspect-ratio:1200/1016;object-fit:cover;border:6px solid #efe5d0;border-bottom-width:18px;border-radius:2px;background:#24211a;box-shadow:0 24px 50px rgba(0,0,0,.65)}
.collage .c-photo:before,.collage .c-photo:after{content:"";position:absolute;top:-8px;z-index:1;width:74px;height:22px}
.collage .c-photo:before{left:-16px;transform:rotate(-38deg)}.collage .c-photo:after{right:-16px;transform:rotate(41deg)}
.collage:hover .c-chart{transform:rotate(1.5deg)}.collage:hover .c-photo{transform:rotate(-1deg) translateY(-3px)}
/* tape that looks like tape: torn uneven ends, a little see-through, faint texture and a crease
   (also restyles the tape on the hero poster) */
.poster:before,.poster:after,.collage .c-photo:before,.collage .c-photo:after{
 background:var(--grain),linear-gradient(103deg,transparent 44%,rgba(0,0,0,.07) 46.5%,rgba(255,255,255,.22) 48.5%,transparent 51%),linear-gradient(90deg,rgba(255,255,255,.2),transparent 28%,transparent 72%,rgba(255,255,255,.14)),linear-gradient(180deg,rgba(248,241,224,.8),rgba(229,216,189,.74) 55%,rgba(204,189,158,.82));
 box-shadow:none;opacity:.93;
 clip-path:polygon(.5% 0,95% 0,99% 7%,96% 15%,100% 24%,97% 31%,99% 42%,95.5% 50%,98.5% 61%,96% 70%,100% 79%,96.5% 88%,98% 100%,3% 100%,0 91%,3.5% 82%,1% 73%,4% 64%,.5% 55%,3% 46%,0 37%,4.5% 27%,1.5% 18%,3.5% 9%)}
.poster:before,.poster:after{width:92px;height:26px}
.poster:after{transform:rotate(45deg)}
@media(max-width:520px){.poster:before,.poster:after{width:64px;height:20px}}
.collage figcaption{margin-top:22px;text-align:center;font:500 .8rem/1.5 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
@media(max-width:819px){.collage{max-width:400px;margin-top:8px}}
@media(prefers-reduced-motion:reduce){.collage .c-chart,.collage .c-photo{transition:none}}
.song .sp{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.8rem;color:var(--cream)}
.song .sp svg{flex:none;width:16px;height:16px}
.song .sp:hover{color:var(--spot)}
.signup{max-width:640px;margin:0 auto;padding:36px 26px;border-radius:8px;background:var(--bg2);border:1px solid rgba(233,220,194,.14);box-shadow:inset 0 3px 0 var(--red);text-align:center}
.signup h2{justify-content:center}.signup h2:after{display:none}
.signup p{color:#d8ccb4;margin:0 0 6px}
.subform{display:flex;gap:10px;max-width:470px;margin:18px auto 4px}
.subform input[type=email]{flex:1;min-width:0;padding:13px 18px;border:1px solid rgba(233,220,194,.25);border-radius:999px;background:var(--bg);color:var(--ink);font:500 1rem Inter,system-ui,sans-serif}
.subform input[type=email]:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(224,88,58,.18)}
.subbtn{flex:none;padding:13px 22px;border:0;border-radius:999px;background:var(--red);color:#14110c;font:800 1rem Inter,system-ui,sans-serif;cursor:pointer;transition:transform .15s}
.subbtn:hover{transform:translateY(-2px)}.subbtn:disabled{opacity:.6;transform:none;cursor:default}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.formmsg{min-height:1.5em;margin:8px 0 0!important;font-weight:600}
.formmsg.ok{color:var(--spot)}.formmsg.err{color:var(--sky)}
.signup .fine{margin-top:6px!important;font-size:.86rem;color:var(--mute)}
@media(max-width:520px){.subform{flex-direction:column}}
#signup-sec{padding-bottom:0}
/* now-playing bars on the card that's playing */
.eq{position:absolute;left:10px;bottom:12px;z-index:1;display:none;align-items:flex-end;gap:3px;height:16px;padding:7px 8px;border-radius:6px;background:rgba(15,14,11,.75);box-shadow:0 4px 12px rgba(0,0,0,.4);box-sizing:content-box}
.eq i{display:block;width:3px;height:100%;border-radius:2px;background:var(--red);transform-origin:bottom;animation:eqb .9s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.35s;animation-duration:.8s}.eq i:nth-child(3){animation-delay:-.6s;animation-duration:1.05s}
@keyframes eqb{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.song.is-playing .eq,.fs.is-playing .eq{display:flex}
@media(max-width:899px){.fs .eq{left:6px;bottom:6px;height:12px;padding:5px 6px}}
@media(prefers-reduced-motion:reduce){.eq i{animation:none;transform:scaleY(.7)}}
/* sign-up + contact side by side */
.connect{display:grid;gap:22px;align-items:stretch}
@media(min-width:860px){.connect{grid-template-columns:1fr 1fr}}
.connect .signup,.connect .contact{display:flex;flex-direction:column;justify-content:center;max-width:none;width:100%;margin:0}
.connect .mail a{font-size:clamp(1.15rem,2.3vw,1.6rem);overflow-wrap:anywhere}
.connect .subform{flex-wrap:wrap}
/* footer */
footer.sitefoot{padding:46px 0 34px;text-align:left;font-size:.9rem}
.sitefoot .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px 40px}
.sitefoot .ft-brand p{max-width:380px;margin:12px 0 0;line-height:1.55;color:var(--mute)}
.sitefoot h3{margin:0 0 10px;font-size:.78rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--cream)}
.sitefoot .ft-col a{display:block;margin:0 0 7px;color:var(--mute);text-decoration:none}
.sitefoot .ft-col a:hover{color:var(--red)}
.sitefoot .ft-legal{grid-column:1/-1;margin:6px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:.8rem;color:var(--mute)}
@media(max-width:620px){.sitefoot .wrap{grid-template-columns:1fr 1fr}.sitefoot .ft-brand{grid-column:1/-1}}
/* small touches */
header.top{box-shadow:0 10px 30px rgba(0,0,0,calc(var(--roll,0) * .5))}
.fs{transition:transform .2s,border-color .2s,box-shadow .2s}.fs:hover{transform:translateY(-3px);border-color:rgba(232,96,62,.35)}
.ticker:hover div{animation-play-state:paused}
html{scrollbar-color:#3d382f #0f0e0b}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:6px;background:var(--red);color:#14110c;font-weight:700;text-decoration:none}
.skip:focus{top:10px}
/* "Overheard in the clinic" prescription pad */
#overheard{padding:26px 0 56px}
.rx{position:relative;max-width:780px;margin:0 auto;padding:24px 34px 22px 96px;border-radius:6px;color:#1d1912;background-color:var(--cream);background-image:var(--grain),repeating-linear-gradient(180deg,transparent 0 39px,rgba(29,25,18,.09) 39px 40px);box-shadow:0 24px 60px rgba(0,0,0,.55);transform:rotate(-1deg)}
.rx:before{content:"\211E";position:absolute;left:26px;top:14px;font:700 3.6rem/1 Georgia,"Times New Roman",serif;color:var(--red)}
.rx-head{display:flex;justify-content:space-between;gap:12px;margin:0 0 16px;padding-bottom:10px;border-bottom:2px solid rgba(29,25,18,.22);font:500 .72rem/1.3 var(--display);letter-spacing:.2em;text-transform:uppercase;color:#6b6252}
.ovh{display:grid;margin:0;padding:0;list-style:none}
.ovh li{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .6s,transform .6s,visibility .6s}
.ovh li.on{opacity:1;visibility:visible;transform:none}
.ovh blockquote{margin:0;font:italic 700 clamp(1.45rem,3.6vw,2.3rem)/1.22 Georgia,"Times New Roman",serif;color:#1d1912}
.ovh a{display:inline-block;margin-top:12px;font:500 .78rem/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:#b8442a;text-decoration:none}
.ovh a:before{content:"\2014\00a0"}
.ovh a:hover{text-decoration:underline}
.rx-dots{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.rx-dots button{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:rgba(29,25,18,.2);cursor:pointer}
.rx-dots button[aria-current="true"]{background:var(--red)}
@media(max-width:620px){.rx{padding:20px 20px 18px 72px;transform:rotate(-.6deg)}.rx:before{left:16px;top:12px;font-size:2.7rem}.rx-head{flex-direction:column;gap:2px}}
@media(prefers-reduced-motion:reduce){.ovh li{transition:none}}
/* song-card caption on hover (desktop) */
.song .cap{position:absolute;left:0;right:0;top:0;z-index:1;padding:12px 12px 30px;font-size:.82rem;line-height:1.38;color:var(--cream);background:linear-gradient(rgba(15,14,11,.9),rgba(15,14,11,.72) 65%,transparent);opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s;pointer-events:none}
@media(hover:hover){.song .play:hover .cap,.song .play:focus-visible .cap{opacity:1;transform:none}}
@media(hover:none){.song .cap{display:none}}
/* the logo's eyes blink now and then */
.brand .eye{animation:blink 6.5s infinite}
@keyframes blink{0%,95%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.08)}}
@media(prefers-reduced-motion:reduce){.brand .eye{animation:none}}

/* ===== song pages + 404 ===== */
.songpage{position:relative;isolation:isolate;overflow-x:clip;padding:26px 0 30px}
.songpage:before{content:"";position:absolute;left:-10%;right:-10%;top:-60px;z-index:-1;height:780px;background:var(--cover) center 35%/cover no-repeat;filter:blur(60px) saturate(1.6);opacity:.5;pointer-events:none;-webkit-mask-image:linear-gradient(#000 25%,transparent);mask-image:linear-gradient(#000 25%,transparent)}
.crumb{margin:0 0 22px}
.crumb a{color:var(--mute);text-decoration:none;font:500 .82rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase}
.crumb a:hover{color:var(--red)}
.sp-grid{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:48px;align-items:center}
.sp-cover{margin:0;transform:rotate(-1.4deg)}
.sp-cover img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:4px;background:#24211a;box-shadow:0 0 0 1px rgba(233,220,194,.12),0 30px 70px rgba(0,0,0,.65),0 0 90px rgba(224,88,58,.16)}
.sp-info h1{margin:0 0 16px;font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--cream);font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.02;letter-spacing:.005em}
.sp-about{margin:0 0 16px;font-size:1.12rem;color:#d8ccb4}
.sp-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.sp-tags a{padding:6px 12px;border:1px solid rgba(233,220,194,.2);border-radius:999px;color:var(--cream);font:600 .78rem/1 Inter,system-ui,sans-serif;text-decoration:none}
.sp-tags a:hover{border-color:var(--red);color:var(--red)}
.sp-listen{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sp-listen .btn.ghost{margin:0}
.sp-meta{margin:20px 0 0;font:500 .76rem/1.5 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.sp-embed{margin:44px 0 0}.sp-embed iframe{display:block;width:100%;height:152px;border:0}
section.sp-lyrics{padding:52px 0 0}
.sp-lyrics .lyrics{columns:2 300px;column-gap:48px;font-size:1rem}
.sp-lyrics .lyrics p{break-inside:avoid}
.sp-nav{display:flex;justify-content:space-between;gap:16px;margin:44px 0 52px;padding-top:22px;border-top:1px solid var(--line)}
.sp-nav a{max-width:48%;color:var(--cream);font-weight:600;text-decoration:none}
.sp-nav a:last-child{text-align:right;margin-left:auto}
.sp-nav a:hover{color:var(--red)}
.sp-nav small{display:block;margin-bottom:6px;font:500 .72rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
@media(max-width:819px){.sp-grid{grid-template-columns:1fr;gap:28px}.sp-cover{width:100%;max-width:420px;margin:0 auto}.sp-info{text-align:center}
 .sp-info .kicker{justify-content:center}.sp-info .kicker:before{display:none}.sp-tags,.sp-listen{justify-content:center}}
.nf{max-width:620px;margin:0 auto;padding:70px 0 90px;text-align:center}
.nf .nfchart{display:block;width:220px;height:auto;margin:0 auto 34px;border-radius:3px;transform:rotate(2deg);box-shadow:0 0 0 1px rgba(233,220,194,.1),0 22px 50px rgba(0,0,0,.6)}
.nf h1{margin:0 0 12px;font-family:var(--display);text-transform:uppercase;color:var(--cream);font-size:clamp(2rem,6vw,3rem);line-height:1.05}
.nf p{margin:0 0 28px;color:var(--mute);font-size:1.1rem}
.nf .btn.ghost{margin-left:8px}
@media(max-width:520px){.nf .btn.ghost{margin:10px 0 0}}