:root{
  --red:#e10600; --red-dark:#9e0400; --gold:#d4af37; --black:#0b0b0b;
  --grey:#1a1a1a; --text:#f2f2f2; --muted:#a8a8a8;
  --display:'Anton',Impact,'Arial Narrow Bold',sans-serif;
  --body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--text);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold)}
.wrap{max-width:1100px;margin:0 auto;padding:0 1.25rem}

/* Top bar */
.topbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;
  padding:.8rem 1.25rem;background:rgba(11,11,11,.85);backdrop-filter:blur(8px);border-bottom:2px solid var(--red)}
.logo{font-family:var(--display);font-size:1.4rem;letter-spacing:.06em;color:var(--text);text-decoration:none}
.topbar nav a{color:var(--text);text-decoration:none;font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;margin-left:1rem}
.topbar nav a:hover{color:var(--red)}

/* Type */
h1,h2{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.95;letter-spacing:.01em}
h2{font-size:clamp(2.6rem,9vw,5rem);margin-bottom:1.25rem}
.kicker{font-weight:800;text-transform:uppercase;letter-spacing:.25em;font-size:.75rem;color:var(--red);margin-bottom:.75rem}
.gold{color:var(--gold)}
.lead{color:var(--muted);max-width:60ch;margin-bottom:1.5rem}

/* Buttons */
.btn{display:inline-block;padding:.95rem 1.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.9rem;
  text-decoration:none;border-radius:2px;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 8px 30px rgba(225,6,0,.35)}
.btn-red:hover{background:var(--red-dark)}
.btn-gold{border:2px solid var(--gold);color:var(--gold)}
.btn-gold:hover{background:var(--gold);color:var(--black)}

/* Hero */
.hero{position:relative;overflow:hidden;padding:2.5rem 0 0}
.hero-bg{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(11,11,11,.55) 0%,rgba(11,11,11,.8) 60%,var(--black) 100%),
  url(images/wet-industrial-hall.webp) center/cover no-repeat;filter:saturate(.6)}
.hero-inner{position:relative;max-width:1100px;margin:0 auto;padding:0 1.25rem;display:flex;flex-direction:column;gap:2rem}
.hero-text{text-align:center}
.hero h1{font-size:clamp(3.6rem,19vw,8rem);margin:1.75rem 0 1.5rem;white-space:nowrap}
.headband{display:inline-block;background:var(--red);color:#fff;padding:.08em .22em .02em;transform:rotate(-2deg);
  box-shadow:0 10px 40px rgba(225,6,0,.4)}
.tagline{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.4rem,5.5vw,2.2rem);letter-spacing:.04em;margin-bottom:1.75rem}
.hero-portrait{max-width:440px;margin:0 auto;width:100%}
.hero-portrait img{border-bottom:6px solid var(--red);
  -webkit-mask-image:linear-gradient(180deg,#000 75%,transparent 100%);mask-image:linear-gradient(180deg,#000 75%,transparent 100%)}

/* Music */
.music{padding:4.5rem 0;background:linear-gradient(180deg,var(--black),var(--grey));border-top:1px solid #222}
.lyric{border-left:5px solid var(--red);padding:.25rem 0 .25rem 1rem;margin:0 0 1.5rem}
.lyric p{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.5rem,5vw,2.2rem);line-height:1.15;color:var(--gold)}
.music .btn-gold{margin-bottom:2rem}
.embed{margin:0 0 1.5rem;border-radius:12px;overflow:hidden;max-width:700px;background:#282828;min-height:352px}
.embed iframe{display:block;border:0}

/* Bio */
.bio{padding:4.5rem 0;background:var(--black)}
.bio p{color:#d6d6d6;margin-bottom:1rem;max-width:62ch}
.bio em{color:var(--gold);font-style:normal;font-weight:600}
.bio-grid{display:grid;gap:2rem}
.bio-img img{border:2px solid var(--red);filter:contrast(1.05)}

/* Follow */
.follow{padding:4.5rem 0;background:var(--red);color:#fff;text-align:center}
.follow .kicker{color:var(--black)}
.socials{list-style:none;display:grid;gap:.75rem;max-width:720px;margin:0 auto 2rem}
.socials a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.4rem;background:var(--black);color:#fff;
  text-decoration:none;font-family:var(--display);font-size:1.6rem;text-transform:uppercase;letter-spacing:.03em;border:2px solid var(--black);transition:background .15s}
.socials a span{font-family:var(--body);font-size:.85rem;font-weight:600;color:var(--gold);text-transform:none;letter-spacing:0}
.socials a:hover{background:transparent}
.contact{font-weight:600}
.contact a{color:#fff;font-weight:800}

/* Footer */
.footer{padding:2.5rem 1.25rem;text-align:center;font-size:.85rem;color:var(--muted);border-top:3px solid var(--gold);background:var(--black)}
.footer strong{color:var(--text)}
.footer p+p{margin-top:.5rem}

/* Desktop */
@media (min-width:860px){
  .hero{padding-top:3rem}
  .hero-inner{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .hero-text{text-align:left;flex:1;padding-bottom:5rem}
  .hero-portrait{flex:0 0 440px;margin:0}
  .bio-grid{grid-template-columns:1.2fr 1fr;align-items:center}
  .music-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
  .music-grid .embed{margin-bottom:0}
  .music .btn-gold{margin-bottom:0}
  .socials{grid-template-columns:repeat(3,1fr)}
  .socials a{flex-direction:column;justify-content:center}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}