@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --cream:#f2eee5; --ink:#131215; --pink:#ef6382; --yellow:#ffc83d; --muted:#9e99a0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--cream); background:var(--ink); font-family:'Space Grotesk',sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
.site-header { position:absolute; z-index:5; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:25px clamp(22px,5vw,72px); }
.mini-brand { font-family:'DM Mono',monospace; font-size:.72rem; letter-spacing:.13em; }
nav { display:flex; gap:25px; color:rgba(242,238,229,.75); font-family:'DM Mono',monospace; font-size:.7rem; text-transform:uppercase; }
nav a:hover { color:var(--yellow); }
.hero { position:relative; min-height:780px; display:grid; place-items:center; overflow:hidden; }
.hero-image { position:absolute; inset:0; background:url('/assets/hero.jpg') center/cover; filter:saturate(.8); transform:scale(1.03); }
.hero-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(19,18,21,.52),rgba(19,18,21,.2) 35%,rgba(19,18,21,.94)),linear-gradient(90deg,rgba(19,18,21,.7),transparent 65%); }
.hero-content { position:relative; z-index:1; width:min(900px,88vw); padding-top:95px; }
.hero-logo { display:block; width:min(560px,84vw); max-height:260px; object-fit:contain; object-position:left center; filter:drop-shadow(0 18px 25px rgba(0,0,0,.35)); }
.tagline { margin:25px 0 35px; color:var(--cream); font-size:clamp(1.35rem,3vw,2.1rem); line-height:1.15; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.button { display:inline-flex; gap:12px; align-items:center; padding:13px 19px; border:1px solid var(--cream); font-family:'DM Mono',monospace; font-size:.7rem; text-transform:uppercase; transition:all .2s ease; }
.button-bright { color:var(--ink); border-color:var(--yellow); background:var(--yellow); }
.button-bright:hover { background:var(--pink); border-color:var(--pink); }
.button-quiet:hover { color:var(--ink); background:var(--cream); }
.music-section { width:min(1180px,88vw); margin:auto; padding:125px 0; }
.section-intro { display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:end; margin-bottom:65px; }
.eyebrow, .footer-label { margin:0 0 18px; color:var(--pink); font-family:'DM Mono',monospace; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; }
.section-intro h1 { margin:0; font-size:clamp(2.6rem,6vw,6rem); line-height:.92; letter-spacing:-.065em; }
.section-intro h1 em { color:var(--yellow); font-style:normal; }
.section-intro > p:last-child { max-width:350px; margin:0 0 7px; color:var(--muted); font-size:1rem; }
.release-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.release-card { display:block; }
.release-card img { display:block; width:100%; aspect-ratio:1; object-fit:cover; filter:saturate(.8); transition:filter .2s ease,transform .2s ease; }
.release-card span { display:block; padding-top:12px; color:var(--cream); font-size:.9rem; }
.release-card:hover img { filter:saturate(1.3); transform:translateY(-5px); }
.release-card:hover span { color:var(--yellow); }
.lyrics-section { padding:115px 6vw; text-align:center; background:var(--pink); color:var(--ink); }
.lyrics-section .eyebrow { color:var(--ink); }
.lyrics-section h2 { margin:0 0 30px; font-size:clamp(3rem,8vw,8rem); line-height:.9; letter-spacing:-.08em; }
.text-link { display:inline-block; padding-bottom:5px; border-bottom:1px solid var(--ink); font-family:'DM Mono',monospace; font-size:.78rem; text-transform:uppercase; }
.text-link span { margin-left:9px; }
.site-footer { display:flex; justify-content:space-between; gap:30px; width:min(1180px,88vw); margin:auto; padding:75px 0 45px; }
.social-links { display:flex; flex-wrap:wrap; gap:10px 20px; color:var(--cream); font-family:'DM Mono',monospace; font-size:.76rem; text-transform:uppercase; }
.social-links a:hover { color:var(--yellow); }
.copyright { align-self:end; color:var(--muted); font-family:'DM Mono',monospace; font-size:.68rem; }
@media (max-width:760px) { .site-header { padding:20px; } nav { gap:13px; font-size:.62rem; } .hero { min-height:680px; } .hero-content { padding-top:80px; } .section-intro { display:block; } .section-intro > p:last-child { margin-top:28px; } .release-grid { grid-template-columns:repeat(2,1fr); gap:26px 14px; } .site-footer { display:block; } .copyright { display:block; margin-top:45px; } }
@media (max-width:430px) { nav a:nth-child(2) { display:none; } .release-grid { gap:24px 10px; } .release-card span { font-size:.78rem; } }