:root { --accent:#b3434f; --rgb:179,67,79; --void:#050505; --ink:#e4e0d7; --ash:#aaa69d; --dim:#85817b; --line:#302f2c; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; background:var(--void); color:var(--ink); font:400 16px/1.6 'DM Sans',system-ui,sans-serif; overflow-x:hidden; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
[hidden] { display:none!important; }

.scene { position:fixed; inset:0; z-index:-2; background:#0a0a0a center/cover no-repeat; transform:scale(1.04); animation:breathe 16s ease-in-out infinite alternate; }
.scene:before { content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(5,5,5,.94),rgba(5,5,5,.62) 46%,rgba(5,5,5,.28) 75%),linear-gradient(0deg,rgba(5,5,5,.96),transparent 55%); }
.scene:after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.014) 3px 4px); opacity:.3; }
@keyframes breathe { to { transform:scale(1.075) translateX(-.6%); } }

.shell { min-height:100svh; display:grid; grid-template-rows:auto 1fr auto auto; gap:14px; padding:20px clamp(18px,4vw,64px) max(20px,env(safe-area-inset-bottom)); }
header { display:flex; justify-content:space-between; align-items:center; gap:18px; }
header a { color:var(--ink); text-decoration:none; font:600 .67rem/1.2 'DM Sans',sans-serif; letter-spacing:.18em; text-transform:uppercase; }
header a:hover { color:var(--accent); }
header b { color:var(--ash); font:600 .67rem/1.2 'DM Sans',sans-serif; letter-spacing:.24em; text-transform:uppercase; }

main { width:min(1180px,100%); margin:auto; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,5vw,72px); align-items:center; padding:4vh 0; }
.identity { max-width:780px; }
.eyebrow { margin:0 0 1.1rem; color:var(--accent); font:600 .68rem/1.2 'DM Sans',sans-serif; letter-spacing:.28em; text-transform:uppercase; }
h1 { margin:0; font:500 clamp(3.2rem,6vw,6.5rem)/.95 'Cormorant Garamond',Georgia,serif; letter-spacing:-.03em; text-shadow:0 8px 45px #000; }
.tagline { max-width:600px; margin:1.5rem 0 0; color:var(--ash); font-size:.92rem; line-height:1.9; text-shadow:0 2px 18px #000; }
.telemetry { display:flex; flex-wrap:wrap; gap:9px; margin-top:1.8rem; }
.telemetry span { padding:.55rem .7rem; border:1px solid rgba(var(--rgb),.4); background:#0008; color:var(--accent); font:600 .62rem/1.2 'DM Sans',sans-serif; letter-spacing:.14em; text-transform:uppercase; }

.switcher { width:min(1180px,100%); margin:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); border:1px solid rgba(255,255,255,.12); background:rgba(5,5,5,.78); backdrop-filter:blur(16px); }
.switcher a { display:flex; justify-content:space-between; gap:10px; padding:.75rem .9rem; border-right:1px solid rgba(255,255,255,.1); color:var(--ink); text-decoration:none; font:600 .66rem/1.2 'DM Sans',sans-serif; letter-spacing:.1em; text-transform:uppercase; opacity:.6; }
.switcher a:last-child { border-right:0; }
.switcher a.active, .switcher a:hover { color:var(--accent); opacity:1; background:rgba(var(--rgb),.1); }
.switcher b { font-weight:400; opacity:.65; }

.player { width:min(1180px,100%); margin:auto; display:flex; align-items:center; gap:15px; padding:.9rem 1rem; border:1px solid rgba(var(--rgb),.4); background:rgba(8,7,7,.92); box-shadow:0 20px 70px #0009,0 0 30px rgba(var(--rgb),.08); backdrop-filter:blur(18px); }
.cover { width:58px; height:58px; flex:0 0 58px; object-fit:cover; border:1px solid rgba(var(--rgb),.5); }
.controls { display:flex; align-items:center; gap:8px; }
.controls button { display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:transparent; color:var(--ink); cursor:pointer; }
.controls .play { width:42px; height:42px; border-color:var(--accent); color:var(--accent); }
.controls button:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.controls button:disabled { opacity:.35; cursor:wait; }
.track-meta { flex:0 1 220px; min-width:130px; }
.track-meta small { display:block; color:var(--accent); font:600 .58rem/1.2 'DM Sans',sans-serif; letter-spacing:.18em; text-transform:uppercase; }
.track-meta strong { display:block; margin-top:3px; font:500 1.2rem/1.05 'Cormorant Garamond',Georgia,serif; }
.track-meta span { display:block; margin-top:4px; color:var(--dim); font-size:.75rem; }
.timeline { flex:1; min-width:120px; }
.seek-row { display:flex; align-items:center; gap:9px; }
.seek-row time { min-width:34px; color:var(--dim); font-size:.62rem; }
.seek-row time:last-child { text-align:right; }
.timeline input { width:100%; height:20px; accent-color:var(--accent); cursor:pointer; }
.timeline input:disabled { cursor:wait; }
.timeline p { min-height:1em; margin:2px 43px 0; color:var(--accent); font-size:.6rem; letter-spacing:.06em; text-align:center; }
.action { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:.5rem .7rem; border:1px solid rgba(var(--rgb),.4); background:transparent; color:var(--ink); cursor:pointer; text-decoration:none; font:600 .62rem/1.2 'DM Sans',sans-serif; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.action:hover { color:var(--accent); background:rgba(var(--rgb),.1); }

.lyrics { position:fixed; inset:0 0 0 auto; z-index:10; width:min(520px,100%); padding:22px clamp(20px,4vw,42px) 60px; overflow:auto; background:rgba(5,5,5,.98); border-left:1px solid rgba(var(--rgb),.35); box-shadow:-30px 0 80px #0008; transform:translateX(100%); transition:transform .38s; }
.lyrics.open { transform:none; }
.lyrics > button { float:right; border:0; background:none; color:var(--ink); font-size:24px; cursor:pointer; }
.lyrics h2 { margin:45px 0 3px; font:500 2.1rem/1.05 'Cormorant Garamond',Georgia,serif; }
.lyrics > p { margin:0 0 28px; color:var(--accent); font:600 .62rem/1.2 'DM Sans',sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.lyrics pre { white-space:pre-wrap; color:var(--ash); font:400 .95rem/1.8 'Cormorant Garamond',Georgia,serif; }

#ytHost { position:fixed; width:1px; height:1px; left:-10px; top:-10px; opacity:0; pointer-events:none; overflow:hidden; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
button:focus-visible, a:focus-visible, input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

@media(max-width:900px) {
  .player { flex-wrap:wrap; }
  .timeline { order:5; flex-basis:100%; }
  .track-meta { flex:1; }
  .action { margin-left:auto; }
  .timeline p { margin-inline:43px; }
}
@media(max-width:560px) {
  .shell { padding:16px 14px 16px; }
  header b { font-size:.6rem; letter-spacing:.12em; text-align:right; }
  main { padding:4vh 0; }
  h1 { font-size:clamp(3rem,16vw,5rem); }
  .tagline { margin-top:1.1rem; font-size:.82rem; }
  .telemetry { margin-top:1.2rem; }
  .switcher a { padding:.6rem .5rem; font-size:.58rem; }
  .player { gap:9px; padding:.6rem; }
  .cover { width:44px; height:44px; flex-basis:44px; }
  .controls { gap:5px; }
  .controls button { width:30px; height:30px; }
  .controls .play { width:38px; height:38px; }
  .track-meta { min-width:95px; }
  .track-meta strong { font-size:1.05rem; }
  .track-meta span { font-size:.68rem; }
  .action { min-height:34px; padding:.45rem .5rem; font-size:.58rem; }
}
@media(max-height:620px) {
  body { overflow:auto; }
  .shell { min-height:620px; }
  main { padding:28px 0; }
  h1 { font-size:clamp(2.6rem,12vw,5rem); }
}
@media(prefers-reduced-motion:reduce) {
  .scene { animation:none; transform:none; }
  .lyrics { transition:none; }
}

/* Framed, uncropped artwork beside the single; the scene stays atmospheric. */
.art-stage { min-width:0; width:100%; max-width:480px; justify-self:end; margin:0; padding:12px; border:1px solid rgba(var(--rgb),.45); background:rgba(8,7,7,.86); box-shadow:0 28px 80px #000b,0 0 40px rgba(var(--rgb),.08); }
.art-stage a { display:block; }
.art-stage img { display:block; width:100%; height:auto; object-fit:contain; }
@media(max-width:760px) { main { grid-template-columns:1fr; gap:28px; } .art-stage { justify-self:center; max-width:440px; } }