:root{
  --ink:#02050b; --navy:#06111f; --pink:#ff008c; --pink2:#ff2fa7;
  --shadow:#b00062; --ice:#eaf7ff; --muted:#a9b4c4;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;background:var(--ink);color:#fff;font-family:Inter,Arial,sans-serif}
img{display:block;max-width:100%}
.spur-page{overflow:hidden;background:
 radial-gradient(circle at 20% 10%,rgba(255,0,140,.09),transparent 28rem),
 linear-gradient(180deg,#030711,#010308)}
.section{padding:clamp(36px,4vw,64px) clamp(22px,6vw,96px)}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.28em;text-transform:uppercase}
.pink{color:var(--pink2)}
h1,h2,h3,p{margin-top:0}
h2{margin-bottom:.32em}
h2{font-family:Anton,Impact,sans-serif;font-size:clamp(3rem,7vw,7rem);line-height:.92;letter-spacing:.01em}
.chrome{
  font-family:Anton,Impact,sans-serif;
  color:#eaf7ff;
  text-shadow:0 1px 0 #fff,0 3px 0 #8296a9,0 5px 14px rgba(255,0,140,.65);
  -webkit-text-stroke:1px rgba(255,255,255,.45);
}
.brush{
  font-family:"Permanent Marker",cursive;
  color:var(--pink2);
  font-size:clamp(2rem,5vw,5.4rem);
  line-height:.9;
  transform:rotate(-3deg);
  text-shadow:0 3px 0 var(--shadow),0 0 22px rgba(255,0,140,.45);
}
.hero{height:min(94vh,980px);min-height:680px;position:relative;display:flex;align-items:flex-end}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,3,10,.86) 0%,rgba(0,3,10,.22) 58%,rgba(0,3,10,.42)),linear-gradient(0deg,#02050b 0%,transparent 42%)}
.hero-copy{position:relative;z-index:2;padding:0 clamp(22px,6vw,96px) 7vh;max-width:1050px}
.hero h1{font-size:clamp(5rem,12vw,12rem);line-height:.78;margin:.15em 0 .14em}
.hero .brush{margin-left:clamp(0px,10vw,150px)}
.scroll-cue{position:absolute;z-index:2;right:4vw;bottom:4vh;font-size:.65rem;letter-spacing:.3em;color:#ccd4de}
.scroll-cue span{color:var(--pink);font-size:1rem}
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.8fr);gap:7vw;align-items:center}
.intro h2 span,.auditioned h2 span{color:var(--pink)}
.intro p:not(.eyebrow),.rhythm-copy>p:not(.brush):not(.eyebrow),.audition-copy>p{max-width:720px;color:#c9d1dc;line-height:1.8;font-size:1.05rem}
.intro-art{position:relative}
.intro-art:before{content:"";position:absolute;inset:-10px;border:1px solid rgba(255,0,140,.65);transform:translate(18px,18px);z-index:0}
.intro-art img{position:relative;z-index:1}
.section-head{text-align:center;margin-bottom:24px}
.section-head h2{font-size:clamp(4rem,9vw,9rem);margin:.05em 0}
.section-head .small{font-size:clamp(1.7rem,3vw,3.4rem)}
.section-head .brush{margin-bottom:0}
.intro-copy>p:last-child,.rhythm-copy>p:last-of-type{margin-bottom:0}
.portrait-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.portrait-grid img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .25s ease,filter .25s ease}
.portrait-grid img:hover{transform:scale(1.025);filter:drop-shadow(0 0 18px rgba(255,0,140,.6));z-index:2}
.sound-title{padding:clamp(8px,1.5vw,24px) 6vw clamp(18px,2vw,28px)}
.sound-title h2{margin:0;font-size:clamp(4rem,10vw,10rem)}
.voice-band{height:min(72vw,820px);min-height:540px;position:relative;overflow:hidden}
.voice-band img{width:100%;height:100%;object-fit:cover}
.band-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,4,10,.78),transparent 55%),linear-gradient(0deg,rgba(1,4,10,.62),transparent 50%)}
.reverse .band-overlay{background:linear-gradient(270deg,rgba(1,4,10,.78),transparent 55%),linear-gradient(0deg,rgba(1,4,10,.62),transparent 50%)}
.band-type{position:absolute;left:5vw;bottom:5vw}
.reverse .band-type{left:auto;right:5vw;text-align:right}
.band-type h3{font-size:clamp(5rem,13vw,13rem);line-height:.8;margin:0}
.band-type .brush{margin:20px 0 0 12vw}
.reverse .band-type .brush{margin-left:0;margin-right:8vw}
.rhythm{display:grid;grid-template-columns:minmax(320px,.72fr) 1fr;gap:7vw;align-items:center}
.rhythm-photo img{width:100%;max-height:850px;object-fit:cover}
.rhythm-copy h2{font-size:clamp(4.5rem,9vw,9rem);margin:.1em 0}
.rhythm-copy .brush{margin:-.08em 0 .45em 8vw}
.roles{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #34404e;margin-top:24px}
.roles div{padding:18px 15px 10px 0;border-bottom:1px solid #34404e}
.roles span{display:block;color:var(--pink2);font-size:.68rem;font-weight:800;letter-spacing:.18em}
.roles strong{display:block;font-size:1.5rem;margin-top:7px}
.section-head.left{text-align:left}
.difference{background:linear-gradient(180deg,#06101d,#02050b)}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #3a4655}
.feature-grid article{padding:26px 28px 18px 0;border-right:1px solid #3a4655;margin-right:28px}
.feature-grid article:last-child{border-right:0}
.feature-grid span{color:var(--pink);font-weight:800}
.feature-grid h3{font-family:Anton,Impact,sans-serif;font-size:1.8rem;letter-spacing:.04em;margin:12px 0}
.feature-grid p{color:#aeb8c5;line-height:1.65;margin-bottom:0}
.auditioned{display:grid;grid-template-columns:1fr .8fr;gap:6vw;align-items:center}
.audition-photo img{width:100%;height:660px;object-fit:cover}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:28px}
.stats div{border-top:2px solid var(--pink);padding-top:12px}
.stats strong{display:block;font-family:Anton,Impact,sans-serif;font-size:1.8rem}
.stats span{font-size:.62rem;letter-spacing:.15em;color:#9da8b7}
.closing{padding:clamp(48px,6vw,96px) 0;display:grid;place-items:center;position:relative;background:#02050b}
.closing-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 65%,rgba(255,0,140,.22),transparent 38%),linear-gradient(135deg,transparent 46%,rgba(255,0,140,.22) 46.2%,transparent 46.6%)}
.closing-copy{text-align:center;position:relative;padding:25px}
.closing h2{font-size:clamp(5rem,13vw,13rem);margin:.12em 0}
.closing .brush{margin:0}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){
  .intro,.rhythm,.auditioned{grid-template-columns:1fr}
  .portrait-grid{grid-template-columns:repeat(3,1fr)}
  .feature-grid{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .voice-band{height:70vh}
  .audition-photo{order:-1}
  .audition-photo img{height:auto}
}
@media(max-width:600px){
  .hero{min-height:650px;height:88vh}
  .hero-photo{object-position:52% center}
  .hero h1{font-size:clamp(4.2rem,22vw,7rem)}
  .hero .brush{font-size:2.1rem;margin-left:0}
  .portrait-grid{grid-template-columns:repeat(2,1fr);gap:4px}
  .feature-grid{grid-template-columns:1fr}
  .feature-grid article{border-right:0;margin-right:0;padding:18px 0 10px}
  .voice-band{min-height:480px;height:64vh}
  .band-type h3{font-size:20vw}
  .band-type .brush,.reverse .band-type .brush{margin-left:0;margin-right:0}
  .roles{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}


/* v2: section titles live outside photographs so no singer is obscured */
.voice-feature{
  position:relative;
  background:#02050b;
  padding-bottom:clamp(14px,2vw,28px);
}
.voice-photo{
  width:100%;
  background:#02050b;
}
.voice-photo img{
  width:100%;
  height:auto;
  object-fit:contain;
}
.voice-caption{
  position:relative;
  display:flex;
  align-items:flex-end;
  gap:clamp(18px,4vw,60px);
  padding:clamp(12px,1.8vw,24px) clamp(22px,6vw,96px) 0;
  z-index:2;
}
.voice-caption h3{
  font-size:clamp(4.5rem,11vw,11rem);
  line-height:.82;
  margin:0;
  white-space:nowrap;
}
.voice-caption .brush{
  margin:0 0 .08em;
  font-size:clamp(2.2rem,5vw,5.5rem);
}
.voice-feature.reverse .voice-caption{
  justify-content:flex-end;
  text-align:right;
}
@media(max-width:700px){
  .voice-caption,
  .voice-feature.reverse .voice-caption{
    display:block;
    text-align:left;
  }
  .voice-caption h3{
    font-size:clamp(3.8rem,18vw,7rem);
    white-space:normal;
  }
  .voice-caption .brush{margin-top:12px}
}

/* Site integration: page footer below the shared nav/header */
.footer{padding:28px 24px;text-align:center;color:#a9b4c4;font-size:.85rem;border-top:1px solid rgba(255,255,255,.08);background:var(--ink)}