@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap');

:root { color-scheme: dark; --ink: #080808; --paper: #e6e5e3; --dim: #858482; --line: rgba(230,229,227,.2); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: 'DM Sans', Arial, sans-serif; }
body::after { content: ""; position: fixed; inset: -50%; z-index: 5; pointer-events: none; opacity: .13; 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='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E"); animation: grain 220ms steps(2) infinite; }
a { color: inherit; text-decoration: none; }
.hero { min-height: 100svh; position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at center, #111 0%, #090909 43%, #050505 100%); }
.hero-content { text-align: center; transform: translateY(-2.5vh); animation: arrive 1.2s cubic-bezier(.2,.7,.2,1) both; }
.eyebrow { display: inline-block; border: 1px solid rgba(230,229,227,.72); padding: 7px 11px 6px; font: 700 13px/1 'Barlow Condensed', sans-serif; letter-spacing: .06em; }
h1 { margin: 25px 20px 0; font: 800 clamp(4.2rem, 12vw, 11rem)/.82 'Barlow Condensed', Impact, sans-serif; letter-spacing: -.025em; white-space: nowrap; text-shadow: 0 0 24px rgba(255,255,255,.06); }
.music-links { display: flex; align-items: center; gap: 24px; position: absolute; left: 50%; bottom: 8.5%; transform: translateX(-50%); animation: icons-arrive 1.4s .15s both; }
.music-links a { flex: 0 0 auto; height: 32px; display: flex; align-items: center; justify-content: center; color: #d9d8d6; opacity: .9; transition: opacity .25s, transform .25s; }
.music-links a:nth-child(1) { width: 25px; }
.music-links a:nth-child(2) { width: 23px; }
.music-links a:nth-child(3) { width: 30px; }
.music-links a:nth-child(4) { width: 27px; }
.music-links a:nth-child(5) { width: 21px; }
.music-links a:hover { opacity: 1; transform: translateY(-4px); }
.music-links svg { display: block; width: 32px; height: 32px; fill: currentColor; }
.music-links a:nth-child(2) svg { transform: scale(1.55); }
.music-links a:nth-child(3) svg { width: 30px; height: 30px; }
.music-links a:nth-child(5) svg { width: 30px; height: 30px; transform: scale(.9); }

.scroll-cue { position: absolute; bottom: 3%; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; color: #666; font: 9px 'DM Mono', monospace; letter-spacing: .18em; opacity: .75; }
.scroll-cue span { width: 25px; height: 1px; background: currentColor; }
.content-section { min-height: 78vh; padding: 12vh 10vw; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 4vw; align-items: center; }
.section-index,.kicker,.text-link,.footer-links,.copyright { font: 10px 'DM Mono', monospace; letter-spacing: .14em; }
.section-index { align-self: start; color: var(--dim); }
.section-copy { max-width: 490px; }
.kicker { color: var(--dim); margin-bottom: 24px; }
.section-copy h2 { margin: 0 0 20px; font: 600 clamp(2.7rem,6vw,5.5rem)/.95 'Barlow Condensed', sans-serif; letter-spacing: -.015em; }
.muted { color: #aaa9a6; font-size: 14px; line-height: 1.8; max-width: 370px; }
.text-link { display: inline-flex; gap: 20px; margin-top: 28px; padding-bottom: 8px; border-bottom: 1px solid var(--line); transition: gap .2s; }
.text-link:hover { gap: 27px; }
.release-art { justify-self: end; display: block; width: min(27vw,300px); aspect-ratio: 1; object-fit: cover; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 16px 70px #000; }
.release .section-copy h2 { white-space: nowrap; font-size: clamp(2.7rem,4vw,4.2rem); }
.release { position: relative; padding-left: 7vw; padding-right: 8vw; grid-template-columns: minmax(230px,.75fr) minmax(420px,1.45fr) minmax(260px,.9fr); gap: 3vw; }
.release > .section-index { position: absolute; top: 10vh; left: 7vw; margin: 0; }
.cover-stack { position: relative; justify-self: center; width: min(19vw,260px); aspect-ratio: 1; transform: translateY(12px); }
.cover-stack img { position: absolute; width: 78%; height: 78%; object-fit: cover; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 18px 40px rgba(0,0,0,.55); }
.cover-stack img:nth-child(1) { left: 6%; top: 15%; z-index: 3; transform: rotate(-2deg) scale(1.02); box-shadow: 0 22px 48px rgba(0,0,0,.68); }
.cover-stack img:nth-child(2) { left: 16%; top: 0; z-index: 2; transform: rotate(12deg); }
.cover-stack img:nth-child(3) { left: -7%; top: 0; z-index: 1; transform: rotate(-14deg); }
.release-media { justify-self: end; display: flex; flex-direction: column; align-items: stretch; gap: 18px; width: min(27vw,300px); }
.release-art { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 16px 70px #000; }
.release-player { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; background: #111; }
.release-art span { font: 800 60px 'Barlow Condensed', sans-serif; color: rgba(255,255,255,.15); }
.about { min-height: 62vh; grid-template-columns: .25fr .75fr 1.7fr; }
.artist-photo { display: block; width: min(100%, 320px); aspect-ratio: 1; object-fit: cover; border: 1px solid rgba(255,255,255,.12); }
.about .section-copy { max-width: 900px; }
 .about .section-copy h2 { max-width: none; font-size: clamp(2.7rem,5vw,4.8rem); white-space: nowrap; }
.site-footer { border-top: 1px solid var(--line); padding: 30px 10vw; display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 100px; }
.footer-name { font: 700 17px 'Barlow Condensed', sans-serif; letter-spacing: .08em; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; color: #aaa9a6; font-size: 9px; }
.footer-links a:hover { color: white; }
.copyright { color: #777; font-size: 9px; white-space: nowrap; }
@keyframes arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(-2.5vh); } }
@keyframes icons-arrive { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes grain { 0% { transform: translate(0,0); } 25% { transform: translate(2%,-1%); } 50% { transform: translate(-1%,2%); } 75% { transform: translate(1%,1%); } 100% { transform: translate(-2%,-1%); } }
.music-links { gap: 24px; } .music-links a { height: 28px; } .music-links a:nth-child(1) { width: 22px; } .music-links a:nth-child(2) { width: 20px; } .music-links a:nth-child(3) { width: 26px; } .music-links a:nth-child(4) { width: 23px; } .music-links a:nth-child(5) { width: 19px; } .music-links svg { width: 28px; height: 28px; } .music-links a:nth-child(3) svg { width: 26px; height: 26px; } .music-links a:nth-child(5) svg { width: 28px; height: 28px; transform: scale(.9); }
@media (max-width: 720px) { .about .section-copy h2 { font-size: clamp(2rem,8vw,3.2rem); } h1 { font-size: clamp(3.2rem, 13vw, 6rem); margin-top: 22px; } .content-section { min-height: auto; padding: 90px 8vw; grid-template-columns: 1fr; gap: 40px; } .section-index { margin: 0; } .release-art { justify-self: start; width: min(70vw,280px); grid-row: 2; } .release > .section-index { top: 36px; left: 8vw; } .cover-stack { justify-self: center; width: min(68vw,260px); grid-row: 4; margin-top: 10px; } .release-media { justify-self: start; width: min(100%,300px); grid-row: 3; } .release-player { width: 100%; height: 152px; } .release .section-copy { grid-row: 2; } .about { min-height: 60vh; } .site-footer { padding: 28px 8vw; align-items: flex-start; flex-direction: column; } .footer-links { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }