*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: radial-gradient(120% 90% at 50% 8%, #3d1a75 0%, #240d52 40%, #14062e 78%, #0b0320 100%) fixed, #14062e; overflow-x: hidden; }
a { color: #d8bcff; text-decoration: none; }
a:hover { color: #fff3b0; }

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes ap-twinkle { 0%, 100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes ap-fly1 { from { transform: translate(-25vw, 85vh) rotate(-25deg); } to { transform: translate(115vw, -25vh) rotate(340deg); } }
@keyframes ap-fly2 { from { transform: translate(118vw, 92vh) rotate(30deg); } to { transform: translate(-28vw, -18vh) rotate(-320deg); } }
@keyframes ap-fly3 { from { transform: translate(12vw, 118vh) rotate(0deg); } to { transform: translate(88vw, -28vh) rotate(400deg); } }
@keyframes ap-fly4 { from { transform: translate(112vw, -18vh) rotate(15deg); } to { transform: translate(-25vw, 108vh) rotate(-380deg); } }
@keyframes ap-bob { 0%, 100% { transform: translateY(-14px) rotate(-8deg); } 50% { transform: translateY(14px) rotate(8deg); } }
@keyframes ap-pulse { 0%, 100% { transform: scale(1) rotate(-1.2deg); filter: drop-shadow(0 0 26px rgba(185,140,255,.85)); } 50% { transform: scale(1.045) rotate(1.2deg); filter: drop-shadow(0 0 60px rgba(255,225,120,.75)); } }
@keyframes ap-halo { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ap-breathe { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.14); } }
@keyframes ap-drift { from { transform: translate(-4%, -4%) rotate(0deg); } to { transform: translate(-4%, -4%) rotate(360deg); } }

/* ── Background ─────────────────────────────────────────────────── */
.bg-drift {
  position: fixed;
  inset: -30%;
  pointer-events: none;
  opacity: .34;
  mix-blend-mode: screen;
  background: conic-gradient(from 0deg, rgba(185,140,255,.55), rgba(47,158,143,.35), rgba(255,225,120,.3), rgba(212,105,30,.35), rgba(185,140,255,.55));
  filter: blur(90px);
  animation: ap-drift 48s linear infinite;
}

.cosmos {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* ── Page layout ─────────────────────────────────────────────────── */
.page {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  background: none;
  font-family: 'Poppins', system-ui, sans-serif;
  color: #fff;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  padding: 46px 24px 60px;
  max-width: 1180px;
  margin: 0 auto;
}

/* ── Wordmark ────────────────────────────────────────────────────── */
.wordmark {
  margin: 0;
  width: min(88vw, 760px);
}
.wordmark img { width: 100%; height: auto; display: block; }

/* ── Badge ───────────────────────────────────────────────────────── */
.badge-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: min(78vw, 460px);
  aspect-ratio: 1;
}
.badge-breathe {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,225,120,.34) 0%, rgba(185,140,255,.26) 45%, rgba(185,140,255,0) 72%);
  animation: ap-breathe 5.2s ease-in-out infinite;
}
.badge-halo-outer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(216,188,255,.45);
  animation: ap-halo 26s linear infinite;
}
.badge-halo-inner {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  border: 1px solid rgba(255,225,120,.28);
  animation: ap-halo 17s linear reverse infinite;
}
.badge-img {
  position: relative;
  width: 84%;
  height: auto;
  animation: ap-pulse 4.6s ease-in-out infinite;
}

/* ── Location pill ───────────────────────────────────────────────── */
.location-pill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid rgba(216,188,255,.35);
  background: rgba(20,6,46,.55);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 44px rgba(185,140,255,.28) inset;
}
.location-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  color: #b98cff;
}
.location-address {
  font-style: italic;
  font-weight: 800;
  font-size: clamp(26px, 5.4vw, 42px);
  line-height: 1;
  letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 0 22px rgba(185,140,255,.9);
}
.location-sub {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  color: rgba(255,255,255,.62);
  text-align: center;
}

/* ── Event cards ─────────────────────────────────────────────────── */
.events {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
  width: 100%;
  margin-top: 6px;
}
.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px 24px;
  border-radius: 22px;
  border: 1px solid rgba(216,188,255,.28);
  background: linear-gradient(160deg, rgba(61,26,117,.72), rgba(20,6,46,.72));
  box-shadow: 0 18px 60px rgba(0,0,0,.4);
  overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.event-card:hover {
  border-color: rgba(255,225,120,.7);
  transform: translateY(-4px);
}
.event-glow {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185,140,255,.4), transparent 70%);
}
.event-when {
  position: relative;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  color: #ffe98c;
}
.event-title {
  position: relative;
  margin: 0;
  font-style: italic;
  font-weight: 800;
  font-size: 25px;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 0 20px rgba(185,140,255,.75);
}
.event-blurb {
  position: relative;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.72);
}
.event-loc {
  position: relative;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #b98cff;
}

/* ── CTAs ────────────────────────────────────────────────────────── */
.ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 4px;
}
.btn-instagram {
  display: flex;
  align-items: center;
  padding: 16px 30px;
  border-radius: 999px;
  background: linear-gradient(100deg, #b98cff, #ff9ad5 55%, #ffe98c);
  color: #1b0740;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .02em;
  box-shadow: 0 0 40px rgba(185,140,255,.55);
  transition: filter .2s, transform .2s;
}
.btn-instagram:hover { filter: brightness(1.08); transform: translateY(-2px); color: #1b0740; }
.btn-spotify {
  display: flex;
  align-items: center;
  padding: 16px 28px;
  border-radius: 999px;
  border: 1px solid rgba(216,188,255,.3);
  color: rgba(255,255,255,.6);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
}