/* ══════════════════════════════════════════════════════════════
   KILIM · Sektionen 01–05
   ══════════════════════════════════════════════════════════════ */

[hidden] {
  display: none !important;
}

/* ── 01 · Termine ────────────────────────────────────────── */

.event-featured {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(600px 220px at 100% 0%, rgba(233, 185, 73, 0.08), transparent 70%),
    linear-gradient(160deg, var(--bg-2), var(--bg-1));
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.event-featured::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--red), var(--gold));
}

.event-dates {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-right: var(--space-4);
}

.event-date {
  display: grid;
  justify-items: center;
  gap: 0.05em;
}

.ed-d {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 750;
  line-height: 1;
  color: var(--ink);
}

.ed-m {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--gold);
}

.event-year {
  align-self: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-mono);
  color: var(--ink-faint);
}

.event-body {
  display: grid;
  gap: var(--space-2);
}

.event-title {
  font-size: var(--fs-lg);
  font-weight: 700;
}

.event-venue,
.event-time {
  color: var(--ink-soft);
}

.event-time {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  text-transform: none;
}

.event-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.event-chips li {
  padding: 0.3em 0.85em;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--hair);
  border-radius: var(--radius-pill);
}

.event-note {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  max-width: 52ch;
}

.event-note strong {
  color: var(--gold);
  font-weight: 600;
}

.event-cta {
  justify-self: end;
}

.event-list {
  margin-top: var(--space-8);
  border-top: 1px solid var(--hair);
}

.event-row {
  display: grid;
  grid-template-columns: 9.5rem 1fr auto 13.5rem;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--hair);
  transition: background-color var(--dur-fast) var(--ease-out), padding var(--dur-fast) var(--ease-out);
}

.event-row:hover {
  background: rgba(255, 255, 255, 0.02);
  padding-inline: var(--space-3);
}

.er-date {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--red-hi);
}

.er-name {
  font-weight: 600;
}

.event-row-note .er-name {
  color: var(--ink-soft);
}

.er-place {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.er-time {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
}

.event-archive {
  margin-top: var(--space-6);
}

.event-archive a {
  font-weight: 600;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.15em;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.event-archive a:hover {
  color: var(--gold-hi);
  border-color: var(--gold-hi);
}
/* ── 02 · Band ───────────────────────────────────────────── */

.band-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: var(--space-5);
}

.band-card {
  position: relative;
  border: 1px solid var(--hair);
  border-radius: var(--radius-md);
  background: var(--bg-2);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  --mx: 50%;
  --my: 50%;
}

.band-card:hover {
  transform: translateY(-6px);
  border-color: var(--hair-strong);
  box-shadow: var(--shadow-card);
}

.band-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(420px 300px at var(--mx) var(--my), rgba(233, 185, 73, 0.08), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
  pointer-events: none;
}

.band-card:hover::after {
  opacity: 1;
}

.band-photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.band-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out), filter var(--dur) var(--ease-out);
  filter: saturate(0.92) contrast(1.04);
}

.band-card:hover .band-photo img {
  transform: scale(1.06);
  filter: saturate(1.05) contrast(1.05);
}

.band-info {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: grid;
  gap: var(--space-2);
}

.band-name {
  font-size: 1.35rem;
  font-weight: 700;
}

.band-role {
  color: var(--gold);
  font-size: var(--fs-xs);
}

.band-bio {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.band-note {
  margin-top: var(--space-8);
  text-align: center;
  color: var(--ink-soft);
}

.band-note strong {
  color: var(--gold);
}

/* ── Statistik ───────────────────────────────────────────── */

.stats {
  border-block: 1px solid var(--hair);
  background:
    radial-gradient(900px 400px at 15% 0%, rgba(225, 75, 44, 0.07), transparent 60%),
    var(--bg-1);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-10);
}

.stat {
  display: grid;
  gap: var(--space-2);
}

.stat-value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 780;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  color: var(--ink-faint);
  font-size: var(--fs-xs);
}
/* ── 03 · Hören / Plattenspieler ─────────────────────────── */

.player-wrap {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.turntable {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(700px 400px at 50% -20%, rgba(47, 168, 143, 0.07), transparent 65%),
    linear-gradient(160deg, var(--bg-2), var(--bg-1));
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.tt-platter {
  position: relative;
  width: min(58vw, 330px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0) 0 3%, rgba(11, 15, 17, 0.9) 4%),
    conic-gradient(from 120deg, #1d242a, #2a323a, #202830, #2c343c, #1d242a);
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.75),
    0 30px 60px -30px rgba(0, 0, 0, 0.8);
}

.tt-vinyl {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #35373d, #0b0c0e 68%);
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.9),
    0 0 60px -18px rgba(225, 75, 44, 0.35);
  transition: transform 0.6s var(--ease-out);
}

.turntable.is-playing .tt-vinyl {
  animation: vinyl-spin 2.6s linear infinite;
}

@keyframes vinyl-spin {
  to { transform: rotate(360deg); }
}

.tt-grooves {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.028) 0 1.5px, transparent 1.5px 7px);
}

.tt-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 20deg, var(--red) 0 12%, var(--gold) 12% 24%, var(--red) 24% 36%, var(--gold) 36% 46%, var(--red) 46% 100%);
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.2em;
  padding: 8%;
}

.tt-label::after {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.tt-label-brand {
  position: relative;
  z-index: 1;
  font-size: 0.55em;
  color: var(--red-deep);
}

.tt-label-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 0.82em;
  line-height: 1;
  color: #1d1508;
}

.tt-label-year {
  position: relative;
  z-index: 1;
  font-size: 0.5em;
  color: var(--red-deep);
}

.tt-spindle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0a0a0b;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
  z-index: 2;
}

/* Tonarm */
.tt-tonearm {
  position: absolute;
  top: 4%;
  right: 11%;
  width: 44%;
  aspect-ratio: 4 / 1;
  transform-origin: 100% 50%;
  transform: rotate(-38deg) translateZ(0);
  transition: transform 0.9s var(--ease-spring);
  z-index: 3;
}

.turntable.is-playing .tt-tonearm {
  transform: rotate(-8deg) translateZ(0);
}

.tt-arm {
  position: relative;
  height: 100%;
  background: linear-gradient(180deg, #3a414a, #171b1f);
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}

.tt-arm::before {
  content: "";
  position: absolute;
  left: 2%;
  top: 50%;
  transform: translateY(-50%);
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e9b949, #8a6414);
}

.tt-arm::after {
  content: "";
  position: absolute;
  right: -3%;
  top: 50%;
  transform: translateY(-50%);
  width: 12%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
/* Controls & Hör-Panel */
.tt-controls {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
}

.tt-play {
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--red);
  color: #140b08;
  display: grid;
  place-items: center;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4), 0 0 40px -8px rgba(225, 75, 44, 0.6);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.tt-play:hover {
  transform: scale(1.06);
  background: var(--red-hi);
}

.tt-play:active {
  transform: scale(0.96);
}

.tt-playicon {
  width: 0;
  height: 0;
  border-left: 13px solid currentColor;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 4px;
}

.turntable.is-playing .tt-playicon {
  width: 12px;
  height: 14px;
  border: 0;
  margin: 0;
  background: currentColor;
  box-shadow: -5px 0 0 currentColor;
}

.tt-meta {
  flex: 1;
  display: grid;
  gap: var(--space-2);
}

.tt-nowplaying {
  color: var(--ink-soft);
  font-size: var(--fs-xs);
}

.tt-eq {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
}

.tt-eq i {
  flex: 1;
  max-width: 5px;
  height: 4px;
  background: var(--teal);
  border-radius: 2px;
  opacity: 0.35;
}

.turntable.is-playing .tt-eq i {
  animation: eq 1.1s ease-in-out infinite;
  opacity: 1;
}

.turntable.is-playing .tt-eq i:nth-child(2n) { animation-delay: -0.3s; }
.turntable.is-playing .tt-eq i:nth-child(3n) { animation-delay: -0.6s; background: var(--gold); }
.turntable.is-playing .tt-eq i:nth-child(4n) { animation-delay: -0.15s; background: var(--red); }

@keyframes eq {
  0%, 100% { transform: scaleY(0.25); }
  50% { transform: scaleY(1); }
}

.tt-progress {
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: var(--hair);
  overflow: hidden;
}

.tt-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--red), var(--gold));
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(233, 185, 73, 0.5);
}

.tt-hint {
  color: var(--ink-faint);
  font-size: var(--fs-xs);
  text-align: center;
}

.listen-panel {
  display: grid;
  gap: var(--space-6);
}

.ep-card {
  padding: var(--space-6);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(500px 220px at 100% 0%, rgba(233, 185, 73, 0.09), transparent 70%),
    var(--bg-1);
  display: grid;
  gap: var(--space-3);
}

.ep-kicker {
  color: var(--red-hi);
  font-size: var(--fs-xs);
}

.ep-title {
  font-size: var(--fs-lg);
  font-weight: 700;
}

.ep-desc {
  color: var(--ink-soft);
}

.ep-desc strong {
  color: var(--gold);
}

.stream-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.listen-facts {
  border-top: 1px solid var(--hair);
}

.listen-facts li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--hair);
  color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease-out), padding var(--dur-fast) var(--ease-out);
}

.listen-facts li:hover {
  color: var(--ink);
}

.listen-facts li span {
  color: var(--red-hi);
}
/* ── 04 · Sehen / Galerie ────────────────────────────────── */

.gallery {
  columns: 3;
  column-gap: var(--space-5);
}

.g-item {
  position: relative;
  break-inside: avoid;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--hair);
  cursor: zoom-in;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.g-item:hover {
  border-color: var(--hair-strong);
  box-shadow: var(--shadow-card);
}

.g-item img {
  width: 100%;
  transition: transform 1.1s var(--ease-out), filter var(--dur) var(--ease-out);
  filter: saturate(0.9);
}

.g-item:hover img {
  transform: scale(1.045);
  filter: saturate(1.05);
}

.g-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--cream);
  background: linear-gradient(180deg, transparent, rgba(8, 10, 12, 0.85));
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease-out);
}

.g-item:hover figcaption {
  transform: translateY(0);
}

.g-tall {
  /* natürliches Seitenverhältnis der Fotos wirkt bereits; g-tall = höheres Bild */
}

.gallery-cta {
  margin-top: var(--space-4);
}

.gallery-cta a {
  font-weight: 600;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.15em;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.gallery-cta a:hover {
  color: var(--gold-hi);
  border-color: var(--gold-hi);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  background: rgba(6, 8, 10, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: var(--space-6);
}

.lightbox[hidden] {
  display: none;
}

.lb-img {
  max-width: min(92vw, 1000px);
  max-height: 76vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  border: 1px solid var(--hair-strong);
  box-shadow: var(--shadow-pop);
  animation: lb-in 0.35s var(--ease-out);
}

@keyframes lb-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.lb-cap {
  margin-top: var(--space-3);
  color: var(--ink-soft);
}

.lb-close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--hair-strong);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.lb-close:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: rotate(90deg);
}
/* ── 05 · Buchen ─────────────────────────────────────────── */

.booking-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.booking-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(500px 260px at 100% 0%, rgba(47, 168, 143, 0.06), transparent 70%),
    var(--bg-2);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.booking-card:hover {
  transform: translateY(-4px);
  border-color: var(--hair-strong);
  box-shadow: var(--shadow-card);
}

.booking-card-accent {
  background:
    radial-gradient(500px 260px at 100% 0%, rgba(233, 185, 73, 0.1), transparent 70%),
    var(--bg-2);
  border-color: rgba(233, 185, 73, 0.45);
}

.booking-card-accent::after {
  content: "";
  position: absolute;
  top: 0;
  right: var(--space-6);
  width: 90px;
  height: 90px;
  border-top: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  opacity: 0.5;
  pointer-events: none;
}

.booking-kicker {
  color: var(--red-hi);
  font-size: var(--fs-xs);
}

.booking-card-accent .booking-kicker {
  color: var(--gold);
}

.booking-title {
  font-size: var(--fs-lg);
  font-weight: 700;
}

.booking-desc {
  color: var(--ink-soft);
}

.booking-steps {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.booking-steps li {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hair);
  color: var(--ink-soft);
}

.booking-steps li strong {
  color: var(--ink);
  font-weight: 600;
}

.step-no {
  color: var(--gold);
  font-size: var(--fs-xs);
}

.tech-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tech-chips li {
  padding: 0.3em 0.85em;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(233, 185, 73, 0.4);
  border-radius: var(--radius-pill);
}

.booking-card > .btn {
  align-self: flex-start;
  margin-top: auto;
}

/* Kontaktleiste */
.contact-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-block: var(--space-6);
  border-block: 1px solid var(--hair);
}

.contact-label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--ink-faint);
  font-size: var(--fs-xs);
}

.contact-value {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
}

a.contact-value {
  transition: color var(--dur-fast) var(--ease-out);
}

a.contact-value:hover {
  color: var(--gold-hi);
}

/* FAQ */
.faq {
  margin-top: var(--space-10);
}

.faq-title {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-5);
}

.faq-item {
  border-bottom: 1px solid var(--hair);
  transition: background-color var(--dur) var(--ease-out);
}

.faq-item[open] {
  background: rgba(255, 255, 255, 0.015);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: 600;
  transition: color var(--dur-fast) var(--ease-out);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--gold-hi);
}

.faq-icon {
  flex: none;
  position: relative;
  width: 22px;
  height: 22px;
  border: 1px solid var(--hair-strong);
  border-radius: 50%;
  transition: transform var(--dur) var(--ease-spring), border-color var(--dur-fast) var(--ease-out);
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--gold);
}

.faq-icon::before {
  width: 9px;
  height: 2px;
}

.faq-icon::after {
  width: 2px;
  height: 9px;
}

.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  border-color: var(--gold);
}

.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease-out);
}

.faq-item[open] .faq-body {
  grid-template-rows: 1fr;
}

.faq-body p {
  overflow: hidden;
  color: var(--ink-soft);
  padding-bottom: var(--space-4);
  max-width: 62ch;
}
/* ── Newsletter ──────────────────────────────────────────── */

.newsletter {
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-top: 1px solid var(--hair);
  background:
    radial-gradient(760px 420px at 15% 10%, rgba(225, 75, 44, 0.1), transparent 65%),
    radial-gradient(700px 400px at 90% 100%, rgba(233, 185, 73, 0.08), transparent 60%),
    var(--bg-1);
}

.newsletter-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.newsletter-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.newsletter-title::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: var(--space-4);
  background: linear-gradient(90deg, var(--red), var(--gold));
  border-radius: 3px;
}

.newsletter-sub {
  color: var(--ink-soft);
}

.newsletter-form label {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--ink-faint);
  font-size: var(--fs-xs);
}

.nl-row {
  display: flex;
  gap: var(--space-3);
}

.nl-row input {
  flex: 1;
  min-width: 0;
  padding: 0.95em 1.1em;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--bg-0);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.nl-row input::placeholder {
  color: var(--ink-faint);
}

.nl-row input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(233, 185, 73, 0.15);
}

.nl-success {
  margin-top: var(--space-3);
  color: var(--lime);
}

.nl-note {
  margin-top: var(--space-3);
  color: var(--ink-faint);
  font-size: var(--fs-xs);
}

/* ── Footer ──────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--hair);
  background: var(--bg-0);
  padding-top: var(--space-10);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
}

.footer-brand p {
  margin-top: var(--space-4);
  color: var(--ink-soft);
  max-width: 34ch;
}

.footer-nav a,
.footer-social a {
  display: block;
  padding-block: var(--space-1);
  color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.footer-nav a:hover,
.footer-social a:hover {
  color: var(--gold-hi);
  transform: translateX(3px);
}

.footer-label {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--ink-faint);
  font-size: var(--fs-xs);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-top: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.legal-links a {
  transition: color var(--dur-fast) var(--ease-out);
}

.legal-links a:hover {
  color: var(--gold);
}

/* ── To-Top ──────────────────────────────────────────────── */

.to-top {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 80;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--hair-strong);
  background: rgba(11, 15, 17, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.to-top:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ═══════════ RESPONSIVE ═══════════ */

@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1fr 360px;
    column-gap: var(--space-8);
  }

  .hero-ticket {
    display: flex;
    position: relative;
    right: 0;
    top: 0;
    transform: none;
    width: min(32vw, 340px);
    justify-self: end;
  }
}

@media (max-width: 899px) {
  .nav-links,
  .nav-cta {
    display: none;
  }

  .nav-burger {
    display: flex;
  }

  .navbar-links-hidden {
    display: none;
  }
}

@media (min-width: 900px) {
  .mobile-menu {
    display: none;
  }
}

@media (max-width: 780px) {
  .section-title {
    font-size: clamp(1.7rem, 6vw, 2.4rem);
  }

  .event-featured {
    grid-template-columns: 1fr;
  }

  .event-cta {
    justify-self: start;
  }

  .event-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .er-time {
    text-align: left;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .player-wrap,
  .booking-grid,
  .newsletter-inner,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .contact-bar {
    grid-template-columns: 1fr;
  }

  .gallery {
    columns: 2;
  }
}

@media (max-width: 460px) {
  .gallery {
    columns: 1;
  }

  .brand-sub {
    display: none;
  }

  .hero-meta {
    gap: var(--space-3);
  }

  .tt-platter {
    width: min(70vw, 300px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }

  .brand-diamond,
  .ticket-ring-track,
  .turntable.is-playing .tt-vinyl {
    animation: none;
  }
}