/* BONAHORA — gritty rock design system */

:root {
  --bg: #0a0a0a;
  --bg-elev: #141414;
  --ink: #f5f1ea;
  --ink-dim: #b7b1a7;
  --ink-faint: #6b6660;
  --line: #2a2723;
  --fire: #c81d25;
  --fire-deep: #8f0f15;
  --ember: #e2424a;
  --steel: #c9c4bd;
  --violet: #5a3a78;
  --maxw: 1200px;
  --r-sm: 4px;
  --r-md: 8px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Grain overlay — applied to body for subtle texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='1'/></svg>");
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--fire); }

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: 'Anton', 'Bebas Neue', 'Inter', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 0.95;
  margin: 0 0 0.4em;
}

h1 { font-size: clamp(3rem, 9vw, 7.5rem); }
h2 { font-size: clamp(2.2rem, 5vw, 4rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }

p { margin: 0 0 1rem; color: var(--ink-dim); }

.eyebrow {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fire);
  margin: 0 0 1rem;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== NAV ===== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0));
  transition: background 0.3s ease;
}

.nav.scrolled {
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.nav__logo {
  height: 20px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}

.nav__links {
  display: flex;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  padding: 4px 0;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--fire);
  transition: width 0.25s ease;
}

.nav__links a:hover::after,
.nav__links a.active::after { width: 100%; }

.nav__toggle {
  display: none;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  padding: 8px;
}

.nav__toggle svg { width: 28px; height: 28px; }

@media (max-width: 720px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(10, 10, 10, 0.97);
    padding: 24px;
    gap: 20px;
    border-bottom: 1px solid var(--line);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
  }
  .nav__links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* ===== HERO (video bg) ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.75) 70%, rgba(0,0,0,0.92) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 30%, rgba(10,10,10,0.95) 100%);
  z-index: -1;
}

.hero__content {
  text-align: center;
  padding: 140px 24px 80px;
  max-width: 720px;
}

.hero__logo {
  width: clamp(220px, 38vw, 420px);
  margin: 0 auto 36px;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.8));
}

.hero__tagline {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 18px;
  color: var(--ink);
  line-height: 1.05;
}

.hero__tagline span {
  color: var(--fire);
  font-style: italic;
}

.hero__sub {
  font-size: 1.05rem;
  color: var(--ink-dim);
  max-width: 540px;
  margin: 0 auto 36px;
}

.hero__scroll {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ink-faint);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  animation: bob 2.4s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.5; }
  50% { transform: translate(-50%, 8px); opacity: 1; }
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: var(--r-sm);
  position: relative;
  overflow: hidden;
}

.btn--primary {
  background: var(--fire);
  color: #fff;
  box-shadow: 0 8px 32px -8px rgba(200, 29, 37, 0.6);
}

.btn--primary:hover {
  background: var(--fire-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px -8px rgba(200, 29, 37, 0.8);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--steel);
}

.btn--ghost:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* ===== NEWSLETTER ===== */
.newsletter {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 40px 32px;
  max-width: 540px;
  margin: 0 auto;
  position: relative;
}

.newsletter::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, var(--fire), transparent 35%, transparent 65%, var(--fire-deep));
  border-radius: var(--r-md);
  z-index: -1;
  opacity: 0.4;
}

.newsletter--lg {
  padding: 48px 40px;
}

.newsletter__title {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  margin: 0 0 8px;
  letter-spacing: 0.04em;
}

.newsletter__sub {
  color: var(--ink-dim);
  margin: 0 0 24px;
  font-size: 0.95rem;
}

.newsletter__form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.newsletter__form input {
  flex: 1 1 220px;
  min-width: 0;
  background: var(--bg);
  border: 1.5px solid var(--line);
  color: var(--ink);
  padding: 16px 18px;
  font-family: inherit;
  font-size: 0.95rem;
  border-radius: var(--r-sm);
  transition: border-color 0.2s ease;
}

.newsletter__form input::placeholder { color: var(--ink-faint); }
.newsletter__form input:focus {
  outline: none;
  border-color: var(--fire);
}

.newsletter__form .btn { flex: 0 0 auto; }

.newsletter__success {
  display: none;
  background: rgba(200, 29, 37, 0.08);
  border: 1px solid var(--fire);
  border-radius: var(--r-sm);
  padding: 16px;
  color: var(--ink);
  text-align: center;
  font-size: 0.95rem;
}

.newsletter__success.show { display: block; }
.newsletter__form.hide { display: none; }

.newsletter__fineprint {
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin: 14px 0 0;
  text-align: center;
}

/* ===== SECTIONS ===== */
.section {
  padding: 100px 0;
  position: relative;
}

.section--alt { background: var(--bg-elev); }

.section__head { text-align: center; margin-bottom: 56px; }

.section__head h2 { margin-bottom: 16px; }

.section__head p {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.05rem;
}

/* Divider line with center mark */
.divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 64px 0;
  color: var(--ink-faint);
}

.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ===== SINGLES GRID ===== */
.singles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}

.single {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.single:hover {
  transform: translateY(-4px);
  border-color: var(--fire);
  box-shadow: 0 20px 60px -20px rgba(200, 29, 37, 0.4);
}

.single__art {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.single__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.single:hover .single__art img { transform: scale(1.04); }

.single__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.6));
  pointer-events: none;
}

.single__body {
  padding: 24px 28px 28px;
}

.single__body .eyebrow { margin-bottom: 8px; }

.single__title {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}

.single__feat {
  color: var(--ink-dim);
  font-size: 0.9rem;
  margin: 0 0 18px;
  font-style: italic;
}

.single__links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.single__embed {
  margin-top: 18px;
  border-radius: var(--r-sm);
  overflow: hidden;
}

/* ===== ABOUT ===== */
.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

@media (min-width: 880px) {
  .about { grid-template-columns: 1fr 1fr; gap: 80px; }
}

.about__art {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-elev);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
}

.about__art video, .about__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__copy h2 { margin-bottom: 24px; }
.about__copy p { font-size: 1.05rem; }

.pullquote {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1.1;
  letter-spacing: 0.03em;
  border-left: 4px solid var(--fire);
  padding: 8px 0 8px 24px;
  margin: 32px 0;
  color: var(--ink);
}

/* ===== SOCIALS ===== */
.socials {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--ink);
  transition: all 0.2s ease;
}

.social:hover {
  border-color: var(--fire);
  color: var(--fire);
  transform: translateY(-2px);
}

.social svg { width: 18px; height: 18px; }

/* ===== FOOTER ===== */
.footer {
  background: #050505;
  border-top: 1px solid var(--line);
  padding: 64px 0 32px;
  text-align: center;
}

.footer__logo {
  width: 200px;
  margin: 0 auto 24px;
  opacity: 0.85;
}

.footer__socials { margin-bottom: 32px; }

.footer__legal {
  color: var(--ink-faint);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer__legal a { color: var(--ink-dim); }

/* ===== SUBPAGE HERO ===== */
.subhero {
  padding: 180px 0 80px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(200, 29, 37, 0.18), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}

.subhero h1 {
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  margin-bottom: 16px;
}

.subhero p {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.1rem;
}

/* ===== HOME (full-screen video stage) =====
   The stage is the scroll container. It fills the viewport and only
   scrolls when its content genuinely exceeds it (small screens /
   short windows) — on desktop it stays a locked single screen. */
.home, html:has(.home) { height: 100%; }
.home body { height: 100%; }

.stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  isolation: isolate;
}

/* Video + overlay stay pinned to the viewport while content scrolls */
.stage__video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.stage::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.9) 100%);
}

.stage--dim::before {
  position: fixed;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 70%, rgba(0,0,0,0.95) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.7) 100%);
}

.stage__video--soft { opacity: 0.55; filter: contrast(0.95) brightness(0.85); }

/* Nav: current page indicator */
.stage__nav a.is-active {
  color: #fff;
}
.stage__nav a.is-active::after {
  width: 100%;
  background: var(--fire);
}

/* ===== MUSIC STAGE ===== */
.stage__music {
  width: 100%;
  max-width: 920px;
  text-align: center;
}

.stage__heading {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  color: #fff;
  margin: 0 0 8px;
  text-shadow: 0 4px 24px rgba(0,0,0,0.7);
  line-height: 0.95;
}

.stage__eyebrow {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--fire);
  margin: 0 0 14px;
}

.stage__lead {
  color: rgba(255,255,255,0.78);
  font-size: 1rem;
  margin: 0 auto 40px;
  max-width: 480px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

.tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}

.track {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.track__art {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  margin-bottom: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.track__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.track:hover .track__art {
  transform: translateY(-4px);
  border-color: var(--fire);
  box-shadow: 0 20px 60px -20px rgba(200, 29, 37, 0.6);
}

.track:hover .track__art img { transform: scale(1.04); }

.track__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  background: rgba(0,0,0,0.4);
}

.track__art:hover .track__play { opacity: 1; }

.track__play svg {
  width: 60px;
  height: 60px;
  color: #fff;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.6));
}

.track__meta { padding: 0 4px; }

.track__title {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.5rem;
  color: #fff;
  margin: 0 0 4px;
  line-height: 1;
}

.track__feat {
  color: rgba(255,255,255,0.7);
  font-size: 0.88rem;
  margin: 0 0 12px;
  font-style: italic;
}

.track__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--fire);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.track__cta:hover {
  color: var(--fire);
  border-color: var(--fire);
}

@media (max-width: 720px) {
  .tracks { grid-template-columns: 1fr; gap: 22px; }
  .stage__music { max-width: 360px; }
}

/* ===== ABOUT STAGE ===== */
.stage__about {
  width: 100%;
  max-width: 680px;
  text-align: center;
}

.stage__logo {
  height: clamp(28px, 5vw, 44px);
  width: auto;
  margin: 0 auto 14px;
  display: block;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.8));
}

.about-copy {
  text-align: left;
  color: rgba(255,255,255,0.88);
}

.about-copy p {
  color: rgba(255,255,255,0.85);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0 0 16px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.about-copy .dropcap {
  float: left;
  width: 64px;
  height: 92px;
  margin: 4px 8px 0 0;
  background-image: url('../img/drop-b-white.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top left;
  shape-outside: margin-box;
}

.about-copy .dropcap-letter {
  /* Hide the literal B; the image replaces it */
  display: inline-block;
  width: 0;
  overflow: hidden;
  opacity: 0;
}

.about-copy .lede {
  font-size: 1.14rem;
  color: #fff;
  font-weight: 500;
  margin-bottom: 18px;
}

.about-copy::after {
  content: "";
  display: block;
  clear: both;
}

.about__cta {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.text-link {
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.text-link:hover {
  color: var(--fire);
  border-color: var(--fire);
}

/* ===== HOMEPAGE COUNTDOWN CLOCK ===== */
.countdown {
  margin: 0 0 26px;
}

.countdown__label {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.66rem;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  margin: 0 0 14px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.85);
  text-align: center;
  line-height: 1.7;
  text-wrap: balance;
}

/* Inline dot travels with the first word so it never orphans on wrap */
.countdown__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fire);
  margin-right: 9px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(200, 29, 37, 0.7); }
  50% { opacity: 0.75; box-shadow: 0 0 0 6px rgba(200, 29, 37, 0); }
}

.countdown__clock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 66px;
  padding: 12px 8px 10px;
  background: rgba(10, 10, 10, 0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-sm);
}

.countdown__num {
  font-family: 'Anton', 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1;
  color: #fff;
  letter-spacing: 0.02em;
}

.countdown__cap {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.56rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
}

.countdown__sep {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  line-height: 1;
  color: rgba(255,255,255,0.28);
  padding-top: 12px;
}

/* Released state */
.countdown.is-released .countdown__clock { display: none; }
.countdown.is-released .countdown__label {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: #fff;
}

@media (max-width: 560px) {
  .countdown__unit { min-width: 0; flex: 1; padding: 10px 4px 8px; }
  .countdown__sep { display: none; }
  .countdown__clock { gap: 6px; }
}

/* ===== RELEASE / COUNTDOWN ===== */

/* Homepage announcement strip (top-left, mirrors nav) */
.stage__announce {
  position: absolute;
  top: 0;
  left: 0;
  padding: 28px 36px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.stage__announce:hover .announce__title { color: var(--fire); }

.announce__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fire);
  flex: 0 0 auto;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(200, 29, 37, 0.7); }
  50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(200, 29, 37, 0); }
}

.announce__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.announce__label {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
}

.announce__title {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.76rem;
  font-weight: 700;
  color: #fff;
  transition: color 0.2s ease;
}

.announce__count {
  font-variant-numeric: tabular-nums;
  color: var(--fire);
  letter-spacing: 0.1em;
}

@media (max-width: 900px) {
  .stage__announce { padding: 20px 22px; }
  .announce__label { display: none; }
}

@media (max-width: 560px) {
  .stage__announce { display: none; }
}

/* Featured upcoming release tile */
.track--upcoming .track__art {
  border-color: rgba(200, 29, 37, 0.5);
}

.track__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: var(--fire);
  color: #fff;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 3px;
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.8);
}

.track__countdown {
  display: block;
  font-family: 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  margin: 0 0 10px;
}

.track__countdown strong {
  color: var(--fire);
  font-weight: 700;
}

/* Three-up track grid */
.tracks--three { grid-template-columns: repeat(3, 1fr); gap: 24px; }

@media (max-width: 900px) {
  .tracks--three { grid-template-columns: 1fr 1fr; }
  .tracks--three .track--upcoming { grid-column: 1 / -1; max-width: 340px; margin: 0 auto; }
}

@media (max-width: 720px) {
  .tracks--three { grid-template-columns: 1fr; }
  .tracks--three .track--upcoming { grid-column: auto; max-width: none; }
}

/* Four-up track grid — unannounced teaser + three releases */
.tracks--four { grid-template-columns: repeat(4, 1fr); gap: 20px; }

@media (max-width: 1100px) {
  .tracks--four { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .tracks--four { grid-template-columns: 1fr; }
}

/* ── Unannounced release teaser tile ──────────────────────────
   No cover art exists yet, so the tile is built from the brand
   mark instead of a placeholder image. Reads as an intentional
   tease rather than a missing asset. */
.track__art--teaser {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(200, 29, 37, 0.16), transparent 62%),
    linear-gradient(160deg, #16100f 0%, #0b0908 55%, #120c0c 100%);
  border-color: rgba(255, 255, 255, 0.14);
  border-style: dashed;
  cursor: default;
}

.track--teaser:hover .track__art--teaser {
  transform: translateY(-4px);
  border-color: rgba(200, 29, 37, 0.55);
  box-shadow: 0 20px 60px -24px rgba(0, 0, 0, 0.9);
}

.teaser__mark {
  width: 46%;
  height: 46%;
  background-image: url('../img/drop-b-white.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.17;
  transition: opacity 0.4s ease;
}

.track--teaser:hover .teaser__mark { opacity: 0.28; }

.track__badge--soon {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: rgba(255, 255, 255, 0.82);
}


/* Release CTA row */
.track__ctas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.track__cta--muted {
  color: rgba(255,255,255,0.6);
}

.track__cta--muted:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.6);
}

/* ===== CONTACT STAGE ===== */
.stage__contact {
  width: 100%;
  max-width: 520px;
  text-align: center;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
  text-align: left;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  border-radius: var(--r-sm);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(255,255,255,0.5); font-weight: 400; }

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--fire);
  background: rgba(15, 15, 15, 0.85);
}

.contact-form textarea {
  min-height: 110px;
  resize: vertical;
  font-family: inherit;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.subject-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  background: rgba(10, 10, 10, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-sm);
}

.subject-toggle input { position: absolute; opacity: 0; pointer-events: none; }

.subject-toggle label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.subject-toggle input:checked + label {
  background: var(--fire);
  color: #fff;
  box-shadow: 0 4px 16px -4px rgba(200, 29, 37, 0.6);
}

.subject-toggle label:hover { color: #fff; }

.contact-form__submit {
  background: var(--fire);
  color: #fff;
  border: none;
  padding: 14px 28px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  box-shadow: 0 6px 24px -6px rgba(200, 29, 37, 0.7);
  margin-top: 4px;
}

.contact-form__submit:hover {
  background: var(--fire-deep);
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .contact-form__row { grid-template-columns: 1fr; }
  .subject-toggle { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .about-copy .dropcap { width: 50px; height: 72px; margin-right: 6px; }
}

/* About — two-column layout with photo */
.stage__about {
  max-width: 920px;
}

.about-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
  text-align: left;
}

.about-photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.7);
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.02);
}

@media (max-width: 820px) {
  .about-layout {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 460px;
    margin: 0 auto;
  }
  .about-photo { aspect-ratio: 16 / 10; }
}

/* Bottom-left brand stamp */
.stage__brand {
  position: absolute;
  left: 36px;
  bottom: 32px;
  z-index: 3;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  pointer-events: none;
}

@media (max-width: 720px) {
  .stage__brand { left: 50%; transform: translateX(-50%); bottom: 70px; }
}

.stage__nav {
  position: fixed;
  top: 0;
  right: 0;
  padding: 28px 36px;
  display: flex;
  gap: 32px;
  z-index: 3;
}

.stage__nav a {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.74rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  position: relative;
  padding: 6px 0;
  transition: color 0.2s ease;
}

.stage__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.25s ease;
}

.stage__nav a:hover {
  color: #fff;
}

.stage__nav a:hover::after { width: 100%; }

/* ── Language selector ────────────────────────────────────────
   One link, showing only the language you'd switch TO. On the
   English site it reads "ES"; on the Spanish site, "EN". No
   divider and no slash — in a nav that's otherwise just clean
   letterspaced words, that chrome was the thing making it look
   bolted on. The globe carries the meaning instead. */
.stage__nav a.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.55);
}

.stage__nav a.lang-switch:hover { color: #fff; }

.lang-switch__globe {
  flex: 0 0 auto;
  opacity: 0.8;
  transform: translateY(-0.5px);
  transition: opacity 0.2s ease;
}

.stage__nav a.lang-switch:hover .lang-switch__globe { opacity: 1; }

/* The underline animation tracks the label only, not the globe */
.stage__nav a.lang-switch::after { display: none; }

.stage__nav a.lang-switch span {
  position: relative;
  padding-bottom: 2px;
}

.stage__nav a.lang-switch span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.25s ease;
}

.stage__nav a.lang-switch:hover span::after { width: 100%; }

/* Below ~560px the four page links plus the language link no longer fit
   on one line at the desktop type size, so the nav tightens up. Without
   this the nav runs off the left edge (it's pinned right). */
@media (max-width: 560px) {
  .stage__nav { padding: 18px 16px; gap: 14px; }
  .stage__nav a { font-size: 0.62rem; letter-spacing: 0.1em; }
  .stage__nav a.lang-switch { font-size: 0.6rem; letter-spacing: 0.08em; gap: 5px; }
  .lang-switch__globe { width: 12px; height: 12px; }
}

@media (max-width: 400px) {
  .stage__nav { padding: 16px 12px; gap: 11px; }
  .stage__nav a { font-size: 0.57rem; letter-spacing: 0.05em; }
  .stage__nav a.lang-switch { font-size: 0.56rem; letter-spacing: 0.04em; gap: 4px; }
  .lang-switch__globe { width: 11px; height: 11px; }
}

.stage__center {
  position: relative;
  min-height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 90px 36px 96px;
  z-index: 2;
  /* Don't block clicks on nav/socials underneath — only the inner content captures pointer events */
  pointer-events: none;
}

.stage__center > * { pointer-events: auto; }

/* Music + About stages centre their content */
.stage--dim .stage__center {
  align-items: center;
  padding: 100px 36px 96px;
}

.signup {
  width: 100%;
  max-width: 680px;
  text-align: center;
}

.signup__head {
  margin-bottom: 16px;
}

.signup__title {
  font-family: 'Anton', 'Inter', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  color: #fff;
  margin: 0 0 6px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.85);
}

.signup__sub {
  color: rgba(255,255,255,0.78);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.85);
}

.signup__form {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 8px;
  align-items: stretch;
}

.signup__form input {
  width: 100%;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  border-radius: var(--r-sm);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.signup__form input::placeholder { color: rgba(255,255,255,0.5); font-weight: 400; }
.signup__form input:focus {
  outline: none;
  border-color: var(--fire);
  background: rgba(15, 15, 15, 0.85);
}

.signup__form button {
  background: var(--fire);
  color: #fff;
  border: none;
  width: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  box-shadow: 0 6px 24px -6px rgba(200, 29, 37, 0.7);
}

.signup__form button svg { width: 20px; height: 20px; }

.signup__form button:hover {
  background: var(--fire-deep);
  transform: translateY(-1px);
}

.signup__success {
  display: none;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 18px 20px;
  border-radius: var(--r-sm);
  color: #fff;
  font-size: 0.95rem;
  text-align: center;
  letter-spacing: 0.02em;
}

.signup__success.show { display: block; }
.signup__form.hide { display: none; }

@media (max-width: 720px) {
  .signup { max-width: 460px; }
  .signup__form {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "email email"
      "city submit";
  }
  .signup__form input[name="email"] { grid-area: email; }
  .signup__form input[name="city"] { grid-area: city; }
  .signup__form button { grid-area: submit; }
}

/* Discreet copyright, bottom-left — mirrors the socials */
.stage__copyright {
  position: fixed;
  left: 36px;
  bottom: 34px;
  z-index: 3;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}

.stage__socials {
  position: fixed;
  right: 36px;
  bottom: 32px;
  z-index: 3;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 18px;
  align-items: center;
}

.stage__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.75);
  transition: color 0.2s ease, transform 0.2s ease;
}

.stage__socials a:hover {
  color: #fff;
  transform: translateY(-2px);
}

.stage__socials svg { width: 20px; height: 20px; }

@media (max-width: 720px) {
  .stage__nav { padding: 20px 22px; gap: 22px; }
  .stage__center { padding: 100px 22px 124px; }
  /* stack: socials above, copyright centred beneath */
  .stage__socials { right: 50%; transform: translateX(50%); bottom: 42px; }
  .stage__copyright {
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;
    font-size: 0.56rem;
    white-space: nowrap;
  }
}

/* ===== Newsletter — extended (city + country) ===== */
.newsletter__form--stacked {
  flex-direction: column;
  gap: 10px;
}

.newsletter__form--stacked input,
.newsletter__form--stacked .btn { width: 100%; }

.newsletter__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.newsletter__row input {
  flex: 1 1 auto;
  min-width: 0;
}

/* ===== Footer (minimal socials) ===== */
.footer__socials-min {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  gap: 22px;
  justify-content: center;
}

.footer__socials-min a {
  display: inline-flex;
  color: var(--ink-dim);
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer__socials-min a:hover {
  color: var(--fire);
  transform: translateY(-2px);
}

.footer__socials-min svg { width: 22px; height: 22px; }

/* ===== About extras ===== */
.lede {
  font-size: 1.2rem;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 20px;
  line-height: 1.5;
}

.about__cta {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* ===== UTILITIES ===== */
.center { text-align: center; }
.mt-lg { margin-top: 48px; }
.flex-center { display: flex; justify-content: center; }

@media (max-width: 600px) {
  .section { padding: 72px 0; }
  .newsletter, .newsletter--lg { padding: 28px 22px; }
  .hero__content { padding-top: 110px; }
}