@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg: #050505;
  --fg: #f4f4f0;
  --muted: #8b8b86;
  --line: rgba(244,244,240,.16);
  --max: 1440px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, Arial, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .035;
  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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 5vw; mix-blend-mode: difference;
}
.brand { font-weight: 900; letter-spacing: -.04em; font-size: 1.05rem; }
.nav { display: flex; gap: 28px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.nav a { opacity: .72; transition: opacity .25s; }
.nav a:hover { opacity: 1; }
.menu-toggle { display:none; background:none; border:0; }
.hero {
  min-height: 100svh; position: relative; display:flex; align-items:center;
  padding: 120px 5vw 70px; border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 75% 45%, rgba(255,255,255,.10), transparent 27%);
}
.hero-content { width: 100%; max-width: var(--max); margin: auto; }
.eyebrow, .section-label, .card-type {
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.hero h1 {
  font-size: clamp(6rem, 17vw, 17rem); line-height: .76; letter-spacing: -.085em;
  font-weight: 900; margin: 30px 0 35px;
}
.hero h1 span, .release-intro h2 span, .contact h2 span, .statement span { color: transparent; -webkit-text-stroke: 1px var(--fg); }
.hero-subtitle { font-size: .8rem; letter-spacing: .25em; }
.circle-link {
  position:absolute; right:8vw; bottom:14vh; width:120px; height:120px;
  border:1px solid var(--fg); border-radius:50%; display:grid; place-items:center;
  text-align:center; font-size:.6rem; letter-spacing:.12em;
  transition: background .3s, color .3s, transform .3s;
}
.circle-link:hover { background:var(--fg); color:var(--bg); transform:rotate(8deg); }
.hero-meta { position:absolute; left:5vw; bottom:30px; display:flex; gap:28px; font-size:.58rem; letter-spacing:.16em; color:var(--muted); }
.section { max-width:var(--max); margin:auto; padding:150px 5vw; border-bottom:1px solid var(--line); }
.section-label { margin-bottom:70px; }
.about-copy { max-width:950px; margin-left:auto; }
.lead { font-size:clamp(2rem,4.3vw,4.5rem); line-height:1.03; letter-spacing:-.045em; margin-bottom:55px; }
.about-copy p:last-child { max-width:620px; margin-left:auto; color:var(--muted); font-size:1rem; }
.music-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.music-card { min-height:390px; padding:32px; background:var(--bg); display:flex; flex-direction:column; justify-content:space-between; transition:transform .35s; }
.music-card:hover { transform:translateY(-6px); }
.card-number { font-size:.65rem; color:var(--muted); }
.music-card h2 { font-size:clamp(2rem,3.4vw,4rem); letter-spacing:-.06em; line-height:.9; margin:14px 0 20px; }
.music-card p:not(.card-type) { color:var(--muted); max-width:300px; font-size:.86rem; }
.text-link { font-size:.62rem; letter-spacing:.14em; border-bottom:1px solid var(--fg); padding-bottom:7px; width:max-content; }
.release-intro h2, .contact h2 {
  font-size:clamp(4rem,10vw,10rem); line-height:.82; letter-spacing:-.08em; font-weight:900;
}
.release-placeholder {
  margin-top:80px; min-height:420px; border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--muted); letter-spacing:.14em; font-size:.65rem; text-align:center;
}
.release-placeholder small { margin-top:15px; letter-spacing:0; font-size:.72rem; max-width:450px; }
.statement { min-height:80vh; display:grid; place-items:center; padding:10vw 5vw; border-bottom:1px solid var(--line); }
.statement p { font-size:clamp(3.5rem,10vw,10rem); line-height:.84; letter-spacing:-.08em; font-weight:900; text-align:center; }
.contact-main { max-width:1000px; margin-left:auto; }
.contact h2 { margin:30px 0 55px; }
.email { font-size:clamp(1.1rem,2vw,1.8rem); border-bottom:1px solid var(--fg); padding-bottom:8px; }
.socials { display:flex; flex-wrap:wrap; gap:25px; margin-top:100px; }
.socials a { font-size:.65rem; letter-spacing:.13em; color:var(--muted); transition:color .2s; }
.socials a:hover { color:var(--fg); }
.footer { max-width:var(--max); margin:auto; padding:25px 5vw; display:flex; justify-content:space-between; color:var(--muted); font-size:.58rem; letter-spacing:.14em; }

@media (max-width: 800px) {
  .nav { display:none; position:absolute; top:70px; right:5vw; flex-direction:column; gap:18px; text-align:right; }
  .nav.open { display:flex; }
  .menu-toggle { display:flex; flex-direction:column; gap:5px; }
  .menu-toggle span { width:25px; height:1px; background:var(--fg); display:block; }
  .hero h1 { font-size:24vw; }
  .circle-link { position:static; margin-top:60px; }
  .hero-meta { display:none; }
  .section { padding:100px 5vw; }
  .section-label { margin-bottom:45px; }
  .about-copy p:last-child { margin-left:0; }
  .music-grid { grid-template-columns:1fr; }
  .music-card { min-height:320px; }
  .release-placeholder { min-height:300px; margin-top:50px; }
  .socials { margin-top:65px; flex-direction:column; }
  .footer { gap:15px; flex-direction:column; }
}