:root {
  --void: #0A0D17;
  --panel: #171A29;
  --raised: #212338;
  --cyan: #38E0EB;
  --magenta: #ED47AD;
  --paper: #F0F5FC;
  --mist: #B8C2DB;
  --edge: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--void);
  color: var(--paper);
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  line-height: 1.5;
}

.dot-rail {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--cyan);
  display: grid;
  place-items: center;
  text-decoration: none;
}
.dot span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
}
.dot.is-on span { background: var(--cyan); }

main { max-width: 980px; margin: 0 auto; padding: 48px var(--edge) 96px; }

.hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  min-height: 70vh;
  justify-content: center;
}
.kicker {
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--magenta);
  margin: 0;
}
.hero-stack h1 {
  font-size: clamp(3rem, 10vw, 5.4rem);
  margin: 0;
  font-weight: 800;
}
.tagline {
  max-width: 34rem;
  color: var(--mist);
  font-size: 1.15rem;
  margin: 0;
}
.hero-art {
  margin: 12px 0 0;
  width: min(100%, 720px);
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(56, 224, 235, 0.25);
}
.hero-art img { display: block; width: 100%; height: auto; }

.band { margin-top: 72px; }
.intro h2 { font-size: 1.85rem; margin: 0 0 8px; }
.intro p { margin: 0; color: var(--mist); max-width: 36rem; }
.intro-left { text-align: left; }
.intro-right { text-align: right; margin-left: auto; }
.intro-right p { margin-left: auto; }

.bento {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
}
.tile {
  background: var(--panel);
  border-radius: 20px;
  padding: 22px;
  border: 1px solid rgba(237, 71, 173, 0.18);
}
.tile-wide { grid-column: 1 / -1; background: linear-gradient(135deg, var(--panel), #10131f); }
.tile-mid { grid-column: 1 / -1; }
.tile h3 { margin: 0 0 8px; color: var(--cyan); font-size: 1.15rem; }
.tile p { margin: 0; color: var(--mist); }

.pair {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: end;
}
.pair figure { margin: 0; }
.pair img {
  width: 100%;
  height: auto;
  border-radius: 28px;
  border: 1px solid rgba(56, 224, 235, 0.2);
  display: block;
}
.pair figcaption {
  text-align: center;
  color: var(--mist);
  font-size: 0.85rem;
  margin-top: 8px;
}

.tabbar { display: flex; gap: 10px; margin: 22px 0 16px; }
.tab {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--cyan);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  font: inherit;
}
.tab.is-on { background: var(--cyan); color: #041016; }
.legal-pane {
  background: var(--raised);
  border-radius: 20px;
  padding: 22px 24px;
}
.legal-pane h3 { margin-top: 0; }
.legal-pane a { color: var(--cyan); }
.legal-pane[hidden] { display: none; }

@media (max-width: 720px) {
  .bento, .pair { grid-template-columns: 1fr; }
  .intro-right { text-align: left; }
  .dot-rail { right: 8px; }
  .tile-wide, .tile-mid { grid-column: auto; }
}