:root { --bg:#101010; --paper:#f1eee5; --mut:#86837d; --line:#393939; --accent:#d24d29; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; background:var(--bg); color:var(--paper); font-family:"Zen Kaku Gothic New",sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.25; background-image:radial-gradient(rgba(255,255,255,.3) .38px,transparent .7px); background-size:5px 5px; }
header,main,footer { position:relative; z-index:1; }
header { display:flex; justify-content:space-between; padding:29px 4vw; }
a { color:inherit; text-decoration:none; }
.brand { font:700 15px/1 "Archivo Black",sans-serif; letter-spacing:.08em; }
.brand span { color:var(--accent); font-size:9px; vertical-align:top; }
.back { color:#d4d1cb; font-size:10px; letter-spacing:.2em; }
main { width:min(1120px,85vw); margin:9vh auto 14vh; }
.track-hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); align-items:end; gap:7vw; }
.number { margin:0; color:var(--accent); font:700 clamp(60px,14vw,170px)/.8 "Archivo Black",sans-serif; letter-spacing:-.05em; }
.eyebrow { margin:8vh 0 0; color:var(--mut); font-size:10px; letter-spacing:.18em; }
h1 { margin:16px 0 0; max-width:900px; font-size:clamp(38px,8.4vw,116px); font-weight:500; line-height:1.05; letter-spacing:.12em; }
.duration { margin:23px 0 0; color:var(--mut); font-size:10px; letter-spacing:.17em; }
.tagline { margin:5vh 0 0; max-width:480px; color:#cbc8c1; font-size:12px; font-weight:300; line-height:2; letter-spacing:.12em; }
.cover { position:relative; margin:0; overflow:hidden; isolation:isolate; }
.cover img { display:block; width:100%; aspect-ratio:1; object-fit:cover; background:#202020; transition:filter .5s ease, transform .5s ease; }
.cover::before { content:""; position:absolute; z-index:1; inset:-28%; border:1px solid rgba(210,77,41,.75); border-radius:48% 52% 42% 58%; opacity:0; pointer-events:none; }
.cover::after { content:""; position:absolute; z-index:1; inset:0; opacity:0; pointer-events:none; background:linear-gradient(115deg,transparent 35%,rgba(210,77,41,.28) 49%,transparent 62%); transform:translateX(-115%); }
.cover.is-playing::before { opacity:1; animation:orbit 6s linear infinite; }
.cover.is-playing::after { opacity:1; animation:scan 3.2s ease-in-out infinite; }
.cover.is-playing img { filter:contrast(1.12) saturate(1.12); animation:jacket-breathe 2.8s ease-in-out infinite; }
.play-visual { position:absolute; z-index:2; right:15px; bottom:15px; display:flex; align-items:center; gap:4px; height:30px; opacity:0; transition:opacity .35s ease; }
.play-visual span { width:2px; height:6px; background:var(--accent); box-shadow:0 0 12px rgba(210,77,41,.9); transform-origin:center; }
.cover.is-playing .play-visual { opacity:1; }
.cover.is-playing .play-visual span { animation:equalize .8s ease-in-out infinite alternate; }
.cover.is-playing .play-visual span:nth-child(2) { animation-delay:-.35s; }
.cover.is-playing .play-visual span:nth-child(3) { animation-delay:-.12s; }
.cover.is-playing .play-visual span:nth-child(4) { animation-delay:-.56s; }
.cover.is-playing .play-visual span:nth-child(5) { animation-delay:-.24s; }
.cover figcaption { margin-top:10px; color:var(--mut); font-size:8px; letter-spacing:.16em; text-align:right; }
.bar { width:100%; height:1px; margin:8vh 0; background:var(--line); }
.intro { display:grid; grid-template-columns:minmax(140px,1fr) minmax(0,2.1fr); gap:7vw; }
.label { margin:0; color:var(--accent); font-size:10px; font-weight:500; letter-spacing:.18em; }
.intro > p:last-child { margin:0; max-width:590px; font-size:clamp(16px,1.8vw,23px); font-weight:300; line-height:2.15; letter-spacing:.1em; }
.listen { margin-top:15vh; padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.listen audio { display:block; width:100%; margin-top:28px; accent-color:var(--accent); }
.actions { display:flex; align-items:center; margin-top:22px; }
.actions span { color:var(--mut); font-size:9px; letter-spacing:.14em; }
.lyrics-panel { display:none; margin-top:22px; padding:32px 0 8px; border-top:1px solid var(--line); animation:lyrics-reveal .6s ease both; }
.lyrics-panel.is-visible { display:block; }
.lyrics-head { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.lyrics-head span { color:var(--accent); font-size:9px; letter-spacing:.17em; }
.lyrics-body { margin-top:30px; max-width:720px; }
.lyric-block + .lyric-block { margin-top:42px; padding-top:23px; border-top:1px solid rgba(57,57,57,.65); }
.lyric-text { margin:0; color:#d6d1c8; white-space:pre-wrap; font:300 15px/2.15 "Zen Kaku Gothic New",sans-serif; letter-spacing:.08em; }
@keyframes jacket-breathe { 50% { transform:scale(1.045); } }
@keyframes orbit { to { transform:rotate(360deg); } }
@keyframes scan { 50% { transform:translateX(115%); } 100% { transform:translateX(115%); } }
@keyframes equalize { to { height:27px; } }
@keyframes lyrics-reveal { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .cover.is-playing::before, .cover.is-playing::after, .cover.is-playing img, .cover.is-playing .play-visual span { animation:none; } }
footer { display:flex; justify-content:space-between; padding:28px 4vw; border-top:1px solid var(--line); color:var(--mut); font-size:9px; letter-spacing:.17em; }
footer a { color:var(--paper); }
@media(max-width:650px) { header{padding:21px 7vw} main{width:86vw;margin:9vh auto 12vh}.track-hero{grid-template-columns:1fr;gap:9vh}.eyebrow{margin-top:11vh}.cover{max-width:480px}.intro{grid-template-columns:1fr;gap:18px}.listen{margin-top:11vh}.lyric-block + .lyric-block{margin-top:32px}.lyric-text{font-size:14px;line-height:2}.actions{align-items:flex-start;flex-direction:column}footer{padding:24px 7vw;gap:16px;flex-direction:column} }