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

:root { --red:#c9482d; --red-deep:#9d3222; --cream:#f3ebd8; --paper:#e6dcc4; --ink:#191816; --blue:#3f7271; --yellow:#f5bd44; --line:rgba(25,24,22,.18); --display:'Anton', Impact, sans-serif; --body:'Space Grotesk', Arial, sans-serif; --mono:'DM Mono', monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:var(--body); overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
::selection { color:var(--cream); background:var(--red); }
.skip-link { position:fixed; z-index:100; top:12px; left:12px; padding:10px 14px; color:var(--cream); background:var(--ink); transform:translateY(-140%); transition:transform .2s; }
.skip-link:focus { transform:none; }
.grain { position:fixed; z-index:20; inset:0; pointer-events:none; opacity:.12; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.site-header { position:fixed; z-index:50; top:0; right:0; left:0; display:flex; align-items:center; justify-content:space-between; height:74px; padding:0 clamp(20px,5vw,72px); border-bottom:1px solid transparent; transition:.25s; }
.site-header.scrolled { color:var(--cream); background:rgba(25,24,22,.92); border-color:rgba(243,235,216,.18); backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; gap:10px; font:500 12px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.brand i { color:var(--red); font-style:normal; }
.scrolled .brand i { color:var(--yellow); }
.brand-stamp { display:grid; place-items:center; width:30px; height:30px; color:var(--cream); background:var(--red); border-radius:50%; font:500 11px var(--mono); }
.site-nav { display:flex; align-items:center; gap:30px; font:500 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.site-nav a { opacity:.7; transition:opacity .2s,color .2s; }
.site-nav a:hover { color:var(--red); opacity:1; }
.scrolled .site-nav a:hover { color:var(--yellow); }
.site-nav .studio-link { color:var(--red); opacity:1; }
.site-nav .studio-link span { margin-left:4px; }
.site-nav .nav-cta { padding:10px 14px; color:var(--cream); background:var(--red); opacity:1; }
.site-nav .nav-cta span { margin-left:7px; }
.nav-toggle { display:none; border:0; background:none; padding:8px; cursor:pointer; }
.nav-toggle span { display:block; width:24px; height:2px; margin:5px; background:currentColor; }
.hero { position:relative; display:grid; grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr); align-items:center; gap:clamp(32px,6vw,100px); min-height:100svh; padding:120px clamp(20px,7vw,108px) 100px; overflow:hidden; background:var(--cream); }
.hero::before { content:''; position:absolute; top:0; right:8%; width:20vw; height:100%; border-left:1px solid var(--line); border-right:1px solid var(--line); transform:skewX(-13deg); opacity:.6; }
.hero-copy,.hero-art-wrap { position:relative; z-index:2; }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 20px; color:var(--cream); font:500 10px var(--mono); letter-spacing:.13em; text-transform:uppercase; }
.eyebrow span { display:block; width:31px; height:2px; background:var(--yellow); }
.eyebrow.dark { color:var(--red-deep); }
.eyebrow.dark span { background:var(--red); }
.hero-stamp { display:inline-block; margin:0 0 18px; padding:8px 10px 6px; color:var(--cream); background:var(--red); font:500 10px/1 var(--mono); letter-spacing:.13em; transform:rotate(-3deg); }
h1,h2,h3 { margin:0; font-family:var(--display); font-weight:400; line-height:.84; text-transform:uppercase; }
h1 { max-width:680px; font-size:clamp(86px,13vw,210px); letter-spacing:-.035em; }
h1 em,h2 em { color:var(--red); font-style:normal; }
.hero-lede { max-width:470px; margin:28px 0 0; color:#4d4941; font-size:15px; line-height:1.65; }
.hero-actions { display:flex; align-items:center; gap:22px; margin-top:30px; }
.button { display:inline-flex; align-items:center; gap:22px; padding:14px 17px 14px 20px; font:500 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.button span { font-size:17px; line-height:10px; }
.button-dark { color:var(--cream); background:var(--ink); transition:background .2s,transform .2s; }
.button-dark:hover { background:var(--red); transform:translateY(-2px); }
.text-link { padding-bottom:5px; border-bottom:1px solid var(--ink); font:500 10px var(--mono); text-transform:uppercase; }
.text-link span { margin-left:7px; color:var(--red); }
.hero-meta { display:flex; align-items:center; gap:12px; margin-top:48px; color:#777064; font:500 9px var(--mono); letter-spacing:.08em; }
.hero-meta b { width:4px; height:4px; border-radius:50%; background:var(--red); }
.hero-art-wrap { justify-self:end; width:min(100%,650px); }
.hero-art { position:relative; padding:15px; background:var(--red); transform:rotate(2deg); box-shadow:14px 14px 0 var(--ink); }
.hero-art::before { content:''; position:absolute; z-index:1; inset:15px; border:1px solid rgba(243,235,216,.55); pointer-events:none; }
.hero-art img { width:100%; aspect-ratio:1.16/1; object-fit:cover; object-position:center; filter:sepia(.1) saturate(.9); }
.hero-art-note { position:absolute; z-index:3; top:-18px; right:18px; padding:11px 13px 9px; color:var(--ink); background:var(--yellow); font:500 9px/1.25 var(--mono); letter-spacing:.06em; transform:rotate(-5deg); }
.hero-art-note i { color:var(--red-deep); font-style:normal; }
.hero-art-caption { display:flex; justify-content:space-between; margin-top:25px; color:#756f63; font:500 9px var(--mono); letter-spacing:.1em; }
.hero-scribble { position:absolute; z-index:3; bottom:-27px; left:-34px; color:var(--red); font:400 clamp(24px,3vw,44px)/.8 var(--display); transform:rotate(-11deg); }
.hero-bottom { position:absolute; z-index:3; right:0; bottom:0; left:0; display:flex; justify-content:space-around; padding:14px 0; color:var(--cream); background:var(--ink); font:500 9px var(--mono); letter-spacing:.18em; }
.hero-bottom span:nth-child(2n) { color:var(--yellow); }
.songs-section { padding:clamp(90px,12vw,170px) clamp(20px,7vw,108px); background:var(--paper); }
.section-top { display:grid; grid-template-columns:1.15fr .85fr; align-items:end; gap:50px; margin-bottom:70px; }
h2 { font-size:clamp(64px,9.3vw,142px); letter-spacing:-.025em; }
h2 em { color:transparent; -webkit-text-stroke:1.5px var(--red); }
.section-intro { max-width:350px; margin:0 0 5px; color:#605a50; font-size:14px; line-height:1.7; }
.song-list { border-top:1px solid var(--line); }
.song-card { display:grid; grid-template-columns:50px 180px minmax(220px,1fr) auto; align-items:center; gap:32px; min-height:230px; padding:28px 0; border-bottom:1px solid var(--line); }
.song-number { align-self:start; padding-top:7px; color:var(--red); font:500 11px var(--mono); }
.song-art { position:relative; aspect-ratio:1; min-height:0; overflow:hidden; background:var(--ink); transform:rotate(-2deg); }
.song-art::after { content:''; position:absolute; inset:10px; z-index:1; border:1px solid rgba(243,235,216,.55); pointer-events:none; }
.song-art img { width:100%; height:100%; min-height:0; object-fit:cover; transition:transform .5s ease, filter .3s ease; }
.song-card:hover .song-art img { transform:scale(1.035); filter:saturate(1.08); }
.art-fingers { background:var(--red); }
.art-paint { background:var(--blue); transform:rotate(2deg); }
.art-lunch { color:var(--ink); background:var(--yellow); transform:rotate(-1deg); }
.art-lunch::after { border-color:rgba(25,24,22,.5); }
.song-copy { max-width:510px; }
.song-kicker { margin:0 0 10px; color:var(--red); font:500 9px var(--mono); letter-spacing:.11em; text-transform:uppercase; }
.song-copy h3 { font-size:clamp(30px,3.4vw,52px); letter-spacing:-.015em; }
.song-copy > p:not(.song-kicker) { max-width:380px; margin:14px 0 12px; color:#666055; font-size:13px; line-height:1.55; }
.song-tags { display:flex; gap:8px; flex-wrap:wrap; }
.song-tags span { padding:5px 7px 4px; border:1px solid var(--line); color:#81796c; font:500 8px var(--mono); letter-spacing:.08em; }
.song-play { align-self:end; padding-bottom:5px; border-bottom:1px solid var(--red); color:var(--red); font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.song-play b { margin-left:10px; font-size:15px; }
.song-play:hover { color:var(--ink); border-color:var(--ink); }
.listen-section { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:80px; padding:clamp(100px,13vw,180px) clamp(20px,7vw,108px); overflow:hidden; color:var(--cream); background:var(--red-deep); }
.listen-section .eyebrow span { background:var(--yellow); }
.listen-copy { position:relative; z-index:1; }
.listen-copy h2 { color:var(--cream); }
.listen-copy h2 em { color:transparent; -webkit-text-stroke:1.5px var(--yellow); }
.listen-copy > p:last-child { max-width:390px; margin:29px 0 0; color:#e6cbb7; font-size:14px; line-height:1.7; }
.listen-radiowave { position:absolute; display:flex; align-items:center; gap:6px; margin-left:-20px; opacity:.15; transform:rotate(-16deg) scale(2.6); }
.listen-radiowave span { color:var(--yellow); font:400 100px var(--display); }
.platforms { position:relative; z-index:1; border-top:1px solid rgba(243,235,216,.35); }
.platforms a { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:13px; padding:20px 0; border-bottom:1px solid rgba(243,235,216,.35); font:500 12px var(--mono); text-transform:uppercase; transition:padding .2s,color .2s; }
.platforms a:hover { padding-left:10px; color:var(--yellow); }
.platform-icon { display:grid; place-items:center; width:30px; height:30px; border:1px solid rgba(243,235,216,.65); border-radius:50%; font-size:15px; }
.platforms b { color:var(--yellow); font-size:17px; font-weight:400; }
.about-section { display:grid; grid-template-columns:150px 1fr 220px; gap:clamp(35px,7vw,120px); padding:clamp(100px,12vw,160px) clamp(20px,7vw,108px); background:var(--cream); }
.about-label { display:flex; flex-direction:column; justify-content:space-between; min-height:240px; padding:9px 0; border-top:2px solid var(--red); color:var(--red); font:500 10px var(--mono); letter-spacing:.1em; }
.about-label a { color:var(--red); }
.about-label a:hover { color:var(--ink); }
.about-label b { font:400 68px var(--display); line-height:1; }
.about-copy { max-width:650px; }
.about-copy h2 { margin-bottom:35px; }
.about-copy > p:not(.eyebrow) { max-width:560px; margin:0 0 20px; color:#5b554b; font-size:15px; line-height:1.75; }
.about-copy > p i { color:var(--red-deep); }
.about-aside { align-self:end; padding:20px; border:1px solid var(--line); background:var(--paper); transform:rotate(3deg); }
.about-aside .check { display:grid; place-items:center; width:34px; height:34px; margin-bottom:20px; color:var(--cream); background:var(--red); border-radius:50%; font-size:20px; }
.about-aside strong { display:block; font:400 31px/.85 var(--display); }
.about-aside span { display:block; margin-top:18px; color:#70695c; font:500 10px/1.5 var(--mono); }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:26px clamp(20px,7vw,108px); color:var(--cream); background:var(--ink); font:500 10px var(--mono); letter-spacing:.04em; }
.site-footer p { margin:0; color:#9a958a; }
.site-footer > a:last-child, .footer-axysyn-link { color:var(--yellow); }
[data-reveal] { opacity:0; transform:translateY(20px); transition:opacity .7s ease,transform .7s ease; }
[data-reveal].visible { opacity:1; transform:none; }
@media (max-width:900px) { .hero { grid-template-columns:1fr; padding-top:135px; } .hero-art-wrap { justify-self:stretch; width:min(100%,630px); margin:10px auto 0; } .hero-copy { max-width:650px; } .section-top { grid-template-columns:1fr; gap:24px; } .song-card { grid-template-columns:42px 150px minmax(0,1fr) auto; gap:22px; } .song-art { min-height:0; } .song-art strong { font-size:31px; } .about-section { grid-template-columns:100px 1fr; } .about-aside { grid-column:2; justify-self:start; max-width:220px; } }
@media (max-width:640px) { .site-header { height:64px; } .site-nav { position:absolute; top:64px; right:14px; left:14px; display:grid; gap:0; padding:8px; color:var(--cream); background:var(--ink); opacity:0; pointer-events:none; transform:translateY(-8px); transition:.2s; } .site-nav.open { opacity:1; pointer-events:auto; transform:none; } .site-nav a { padding:15px; border-bottom:1px solid rgba(243,235,216,.15); } .site-nav .nav-cta { margin-top:8px; border:0; text-align:center; } .nav-toggle { display:block; } .hero { min-height:auto; padding:110px 20px 82px; } h1 { font-size:clamp(78px,24vw,132px); } .hero-lede { font-size:14px; } .hero-actions { align-items:flex-start; flex-direction:column; gap:20px; } .hero-meta { flex-wrap:wrap; margin-top:34px; line-height:1.4; } .hero-art-wrap { margin-top:48px; } .hero-art { padding:9px; box-shadow:8px 8px 0 var(--ink); } .hero-art::before { inset:9px; } .hero-art-note { top:-22px; right:5px; } .hero-scribble { left:-3px; bottom:-30px; } .hero-bottom { gap:18px; justify-content:flex-start; padding-left:20px; white-space:nowrap; overflow:hidden; } .hero-bottom span:nth-child(n+4) { display:none; } .songs-section,.listen-section,.about-section { padding-right:20px; padding-left:20px; } h2 { font-size:clamp(61px,18vw,92px); } .section-top { margin-bottom:48px; } .song-card { grid-template-columns:33px 1fr; gap:17px; padding:26px 0 30px; } .song-art { grid-column:2; grid-row:1; width:100%; min-height:0; } .song-number { grid-column:1; grid-row:1; } .song-copy { grid-column:2; grid-row:2; } .song-play { grid-column:2; grid-row:3; justify-self:start; margin-top:10px; } .song-copy h3 { font-size:40px; } .listen-section { position:relative; grid-template-columns:1fr; gap:55px; } .listen-radiowave { right:-80px; top:110px; } .about-section { grid-template-columns:1fr; gap:42px; } .about-label { min-height:auto; flex-direction:row; align-items:center; } .about-label b { font-size:50px; } .about-aside { grid-column:auto; margin-top:5px; } .site-footer { align-items:flex-start; flex-direction:column; } }