/* Layout: album cover as hero; a grid of ten square song tiles; vertical Short tiles; one shared in-page player. Single dark world lit by the covers' sunset. */
:root{color-scheme:dark;--bg:#0b0908;--rock:#16110e;--seam:#2e231c;--ash:#a2968b;--bone:#efe8df;--ember:#f08a2c;--glow:#ffc46b;--shade:rgba(0,0,0,.78);
--display:"Cinzel","Trajan Pro",Georgia,serif;--body:"Barlow","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--bg);color:var(--bone);font:400 17px/1.6 var(--body)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
.stagebar{background:var(--rock);color:var(--ash);font-size:12px;letter-spacing:.08em;text-align:center;padding:6px 16px}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
header{display:flex;justify-content:space-between;align-items:center;gap:14px 20px;padding-block:18px;flex-wrap:wrap}
.name{font:600 20px var(--display);letter-spacing:.42em;text-decoration:none}
nav{display:flex;gap:10px 20px;flex-wrap:wrap;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
nav a{text-decoration:none;color:var(--ash)} nav a:hover{color:var(--glow)}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:44px;align-items:center;padding-block:24px 64px}
.hero img{display:block;width:100%;height:auto;box-shadow:0 30px 80px -30px var(--ember)}
.eyebrow{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--ember);margin:0}
h1{font:400 clamp(30px,5vw,52px)/1.12 var(--display);letter-spacing:.14em;text-transform:uppercase;margin:12px 0 18px;text-wrap:balance}
.lede{color:var(--ash);max-width:46ch;margin:0 0 26px}
.btns,.sp-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 22px;font:600 13px var(--body);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border:1px solid var(--ember);background:var(--ember);color:var(--bg);cursor:pointer}
.btn.ghost{background:none;color:var(--bone);border-color:var(--seam)}
.btn:hover{background:var(--glow);border-color:var(--glow);color:var(--bg)}
h2{font:400 22px var(--display);letter-spacing:.3em;text-transform:uppercase;margin:0 0 6px}
.sub{color:var(--ash);margin:0 0 24px;font-size:15px}
main>section{padding-block:40px;border-top:1px solid var(--seam)}
.prose{display:grid;gap:12px;max-width:62ch}
.prose p{margin:0;color:var(--ash)} .prose .ded{font:400 20px var(--display);letter-spacing:.16em;color:var(--bone)}
.num{font:400 13px var(--display);letter-spacing:.3em;color:var(--ember);font-variant-numeric:tabular-nums}
/* song tiles */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,190px),1fr));gap:26px 16px}
.ltile{display:flex;flex-direction:column;gap:10px;text-decoration:none;min-width:0}
.lthumb{position:relative;display:block;aspect-ratio:1;max-width:100%;overflow:hidden;background:var(--rock)}
.lthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lplay{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--shade);border:1px solid var(--glow)}
.lplay::after{content:"";position:absolute;left:22px;top:17px;border-left:16px solid var(--glow);border-top:11px solid transparent;border-bottom:11px solid transparent}
.ldur{position:absolute;right:8px;bottom:8px;background:var(--shade);color:var(--bone);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px}
.lcap{display:flex;flex-direction:column;gap:2px;min-width:0}
.ltitle{font:400 16px/1.3 var(--display);letter-spacing:.1em;text-transform:uppercase}
.lmeta{font-size:14px;color:var(--ash);font-style:italic}
.ltile:hover .ltitle{color:var(--glow)}
/* Short tiles */
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(30%,170px),1fr));gap:8px}
.stile{position:relative;display:block;aspect-ratio:9/16;max-width:100%;overflow:hidden;background:var(--rock);isolation:isolate;text-decoration:none}
.stile img{position:absolute;top:0;left:0;width:100%;height:130%;max-width:none;object-fit:cover}
.stile::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,var(--shade));z-index:1}
.stop{position:absolute;top:8px;left:8px;right:8px;z-index:2}
.sbadge{display:inline-block;background:var(--ember);color:var(--bg);font-size:11px;font-weight:600;letter-spacing:.08em;padding:2px 8px}
.scap{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;color:var(--bone);font:400 13px/1.3 var(--display);letter-spacing:.08em;text-transform:uppercase}
.stile.soon img{opacity:.3;filter:grayscale(1)} .stile.soon .scap{color:var(--ash)}
/* song page */
.vpage{padding-block:16px 48px;display:grid;gap:22px}
.vpage h1{margin:0}
.player{position:relative;display:flex;align-items:flex-end;aspect-ratio:16/9;width:100%;max-width:100%;overflow:hidden;background:var(--rock);text-decoration:none}
.player img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player .ptxt{position:relative;z-index:2;width:100%;padding:18px;background:linear-gradient(transparent,var(--shade));font:400 15px var(--display);letter-spacing:.24em;text-transform:uppercase}
.player .play{position:absolute;z-index:2;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--shade);border:1px solid var(--glow)}
.player .play::after{content:"";position:absolute;left:30px;top:23px;border-left:22px solid var(--glow);border-top:15px solid transparent;border-bottom:15px solid transparent}
.player.soon img{opacity:.45}
.player.live iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wall{color:var(--ash);font-style:italic;font-size:19px;margin:0}
.inner h2{font-size:17px;margin-bottom:14px}
.pn{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;letter-spacing:.14em;text-transform:uppercase;border-top:1px solid var(--seam);padding-top:18px}
.pn a{text-decoration:none;color:var(--ash)} .pn a:hover{color:var(--glow)}
/* in-page player */
.splayer{padding:0;border:0;background:transparent;color:var(--bone);max-width:100vw;max-height:100vh;width:100%;height:100%;margin:0}
.splayer::backdrop{background:rgba(0,0,0,.97)}
.sp-in{position:relative;height:100%;display:grid;grid-template-columns:auto min(420px,calc(100vw - 32px)) auto;grid-template-rows:1fr auto;align-items:center;justify-content:center;column-gap:18px;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px))}
.sp-frame{grid-column:2;position:relative;aspect-ratio:9/16;height:min(calc(100vh - 220px),747px);max-width:100%;justify-self:center;overflow:hidden;background:#000}
.sp-poster,.sp-embed,.sp-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.sp-note{display:none;position:absolute;left:12px;right:12px;bottom:12px;margin:0;padding:10px 12px;background:var(--shade);font-size:13px;color:var(--ash)}
.splayer.is-staging .sp-note{display:block}
.sp-meta{grid-column:2;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:14px}
.sp-title{font:400 17px var(--display);letter-spacing:.1em;text-transform:uppercase;margin:0}
.sp-row .btn{padding:9px 14px;font-size:11px}
.sp-x,.sp-nav{width:46px;height:46px;border-radius:50%;border:1px solid var(--seam);background:var(--rock);color:var(--bone);font-size:26px;line-height:1;cursor:pointer}
.sp-x{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:14px;z-index:3}
.sp-prev{grid-column:1} .sp-next{grid-column:3}
.splayer.wide .sp-in{grid-template-columns:auto min(960px,calc(100vw - 160px)) auto}
.splayer.wide .sp-frame{aspect-ratio:16/9;width:100%;height:auto;max-height:calc(100vh - 220px)}
footer{padding-block:32px 48px;border-top:1px solid var(--seam);color:var(--ash);font-size:13px;letter-spacing:.12em;text-transform:uppercase;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer .disc{flex-basis:100%}
@media(max-width:720px){.hero{grid-template-columns:1fr;gap:26px}
.sp-in,.splayer.wide .sp-in{grid-template-columns:1fr}.sp-frame{grid-column:1;width:100%;height:auto;max-height:calc(100vh - 260px)}.sp-meta{grid-column:1}
.sp-nav{position:absolute;top:45%;z-index:2}.sp-prev{left:6px}.sp-next{right:6px}}
/* fixes: solid player ground (some viewers do not paint ::backdrop), whole square cover visible in 16:9 frames, content centred on phones */
.splayer{background:var(--bg)}
.splayer.wide .sp-poster{object-fit:contain}
.player img{object-fit:contain}
.player{background:#000}
@media(max-width:720px){.sp-in,.splayer.wide .sp-in{grid-template-rows:auto auto;align-content:center}
.splayer.wide .sp-frame{aspect-ratio:1;max-height:calc(100vh - 300px)}
.splayer.wide:not(.is-staging) .sp-frame{aspect-ratio:16/9}}

/* Short tiles: real 9:16 cover in a frame, title underneath */
.stile{aspect-ratio:auto;overflow:visible;background:none;display:flex;flex-direction:column;gap:8px}
.stile::after{display:none}
.sthumb{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:var(--rock)}
.stile .sthumb img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;object-fit:cover}
.stile .scap{position:static;font-size:12px}
.stile:hover .scap{color:var(--glow)}

.answer{margin:0;max-width:62ch;color:var(--bone)}
.lyric{margin:0;padding-left:16px;border-left:2px solid var(--ember);font:400 18px/1.5 var(--display);letter-spacing:.06em;color:var(--bone)}
.sthumb .ldur{letter-spacing:0;text-transform:none;font-size:12px;font-variant-numeric:tabular-nums}
/* Short tiles read as separate frames: wider gap and a visible edge, so dark-edged covers do not merge */
.sgrid{gap:22px 18px;grid-template-columns:repeat(auto-fill,minmax(min(29%,180px),1fr))}
.sthumb{outline:1px solid var(--seam);outline-offset:0;box-shadow:0 0 0 1px var(--seam)}
a.stile:hover .sthumb{box-shadow:0 0 0 1px var(--ember)}
@media(max-width:720px){.sgrid{gap:16px 10px}}

/* song page: prev / all / next at the top as well as the bottom */
.pn.top{border-top:0;border-bottom:1px solid var(--seam);padding:0 0 14px}
.pn a{padding:6px 0}
/* player: close button sits in the content column (not under a host toolbar); frame and controls stay together */
.sp-in,.splayer.wide .sp-in{grid-template-rows:auto auto auto;align-content:center;row-gap:0}
.sp-x{position:static;grid-column:2;grid-row:1;justify-self:end;margin-bottom:10px;border-color:var(--ember);color:var(--glow)}
.sp-frame{grid-row:2}.sp-meta{grid-row:3}
.sp-prev,.sp-next{grid-row:2;border-color:var(--ember);color:var(--glow)}
@media(max-width:720px){.sp-x{grid-column:1}}