/* ============ TOKENS ============ */
:root {
  --yellow: #FFD60A;
  --yellow-deep: #F5C400;
  --black: #0A0A0A;
  --ink: #111111;
  --ink-2: #1a1a1a;
  --gray-100: #F5F4EE;
  --gray-200: #E8E6DD;
  --gray-500: #6B6B66;
  --white: #FFFFFF;

  --radius: 18px;
  --radius-lg: 28px;

  --container: 1240px;
  --container-narrow: 820px;

  --shadow-sm: 0 4px 14px rgba(0,0,0,.08);
  --shadow-md: 0 14px 40px rgba(0,0,0,.18);

  --display: "Archivo Black", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

/* ============ LAYOUT HELPERS ============ */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.container--narrow { max-width: var(--container-narrow); }
.text-center { text-align: center; }

.kicker {
  display: inline-block;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--yellow);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.kicker--yellow { background: var(--yellow); color: var(--black); }

.h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(28px, 4.5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 28px;
  text-transform: uppercase;
}
.h2--light { color: var(--white); }

.lede {
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--ink-2);
  max-width: 640px;
  margin: 0 auto 32px;
}

/* ============ NAV ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 24px;
  background: rgba(10,10,10,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: var(--display);
  letter-spacing: 0.04em;
}
.brand-mark {
  display: block;
  height: 32px;
  width: auto;
}
.brand-mark--lg { height: 60px; }
.brand-divider {
  width: 1px; height: 18px;
  background: rgba(255,255,255,.25);
}
.brand-event {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* "THE BLEND · MIAMI" wrapped to three lines on a phone and pushed the bar
   to ~125px tall. Tighten it instead of letting it wrap. */
@media (max-width: 480px) {
  .brand-event { font-size: 11px; letter-spacing: 0.1em; }
  .brand-mark { height: 26px; }
  .nav__brand { gap: 8px; }
}
/* Below ~400px the label collides with the waitlist pill. The OTT mark and
   the hero title both already name the event, so drop it rather than clip it. */
@media (max-width: 400px) {
  .brand-divider, .brand-event { display: none; }
}
.nav__links {
  display: none;
  gap: 22px;
  margin-left: auto;
}
.nav__links a {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  text-decoration: none;
}
.nav__links a:hover { color: var(--yellow); }
.nav .btn { margin-left: auto; }
/* The nav CTA is wrapped in .rsvp-trigger for the SweatPals overlay, so the
   auto margin has to move to the wrapper or the pill sticks to the logo. */
.nav .rsvp-trigger { margin-left: auto; }
.nav .rsvp-trigger .btn { margin-left: 0; }
@media (min-width: 880px) {
  .nav__links { display: flex; }
  .nav .btn { margin-left: 0; }
}
/* Mobile: drop sticky + z-index so the parent Webflow hamburger dropdown
   can render over our nav without a stacking-context fight. */
@media (max-width: 879px) {
  .nav { position: static; z-index: auto; }
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 18px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--small { padding: 9px 14px; font-size: 12px; }
.btn--lg { padding: 16px 26px; font-size: 14px; }
.btn--yellow { background: var(--yellow); color: var(--black); }
.btn--yellow:hover { background: var(--yellow-deep); }
.btn--black { background: var(--black); color: var(--white); }
.btn--black:hover { background: var(--ink-2); }
.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.6); }
.btn--ghost:hover { background: rgba(255,255,255,.1); }
.btn--ghost-dark { background: transparent; color: var(--black); border-color: var(--black); }
.btn--ghost-dark:hover { background: rgba(0,0,0,.06); }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--white);
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255,214,10,.18), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.85) 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 120px 24px 80px;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  padding: 9px 14px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  margin-bottom: 24px;
}
.hero__eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--yellow);
  box-shadow: 0 0 0 4px rgba(255,214,10,.25);
}
.hero__title {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(56px, 12vw, 180px);
  line-height: 0.88;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
}
.hero__title .line { display: block; }
.hero__title .line--yellow { color: var(--yellow); }
.hero__title .line--small {
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: 0.34em;
  font-weight: 900;
  margin-top: 14px;
  color: rgba(255,255,255,.85);
}
.hero__sub {
  max-width: 620px;
  font-size: clamp(15px, 1.5vw, 18px);
  color: rgba(255,255,255,.85);
  margin: 0 0 32px;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 48px;
}
.hero__ctas .btn--lg,
.hero__ctas .rsvp-trigger { min-width: 260px; }
.hero__ctas .rsvp-trigger .btn--lg { width: 100%; min-width: 0; }
.hero__partners {
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 22px;
}
.hero__partners-label {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  display: block;
  margin-bottom: 12px;
}
.hero__partners-label--social { margin-top: 28px; }
.logo-marquee {
  width: 100%;
  max-width: 980px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.logo-row {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logo-scroll 36s linear infinite;
}
.logo-row:hover { animation-play-state: paused; }
.logo-row--alt { animation-duration: 30s; }
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-33.333%); }
}
.logo-row img {
  height: 38px;
  width: auto;
  max-width: 130px;
  margin-right: 48px;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: center;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
@media (max-width: 480px) {
  .logo-row img { height: 32px; max-width: 110px; margin-right: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-row,
  .partner-track { animation: none; }
}
.hero__scroll {
  position: absolute;
  z-index: 2;
  bottom: 22px;
  right: 24px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
}

/* ============ BANDS ============ */
.band {
  padding: 96px 0;
  background: var(--white);
}
.band--yellow { background: var(--yellow); }
.band--cream { background: var(--gray-100); }
.band--dark { background: var(--black); color: var(--white); }
.band--dark .h2 { color: var(--white); }

@media (max-width: 720px) {
  .band { padding: 72px 0; }
}

/* ============ VISION ============ */
.vision__grid {
  display: grid;
  gap: 48px;
}
.vision__copy p { font-size: clamp(15px, 1.4vw, 17px); margin: 0 0 14px; color: var(--ink-2); }
.vision__copy strong { background: rgba(0,0,0,.08); padding: 1px 6px; border-radius: 4px; }
.vision__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.stat {
  background: var(--black);
  color: var(--white);
  padding: 22px 20px;
  border-radius: var(--radius);
}
.stat__num {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  color: var(--yellow);
  margin-bottom: 6px;
}
.stat__label {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
@media (min-width: 900px) {
  .vision__grid { grid-template-columns: 1.3fr 1fr; align-items: start; gap: 72px; }
  .vision__stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============ SCHEDULE ============ */
.ros-phase-label {
  display: inline-block;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--yellow);
  padding: 7px 14px;
  border-radius: 999px;
  margin: 28px 0 6px;
}
.ros-phase-label:first-of-type { margin-top: 8px; }

/* ============ OPERATIONAL ASKS ============ */
.ops-simple {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 820px;
}
.ops-simple li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid var(--gray-200);
}
.ops-simple li:first-child { border-top: none; padding-top: 4px; }
.ops-simple h4 {
  font-family: var(--display);
  font-size: clamp(18px, 2vw, 22px);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
  color: var(--ink);
}
.ops-simple p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--gray-500);
}
.ops-status {
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 10px;
  background: var(--gray-500);
  box-shadow: 0 0 0 3px rgba(0,0,0,.04);
}
.ops-status.is-confirmed { background: #34C759; }
.ops-status.is-pending { background: var(--yellow); }
.ops-status.is-open { background: #FF453A; }

/* ============ VENUE / SITE MAP ============ */
.venue-map {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-md);
}
.venue-map img {
  width: 100%;
  height: auto;
  display: block;
}
.venue-map figcaption {
  font-family: var(--body);
  font-size: 13px;
  color: var(--gray-500);
  text-align: center;
  padding: 14px 16px;
  background: var(--white);
  letter-spacing: 0.04em;
}
.venue-cta {
  text-align: center;
  margin-top: 28px;
}

.schedule {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.schedule li {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  gap: 16px;
}
.schedule li:last-child { border-bottom: none; }
.schedule__time {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--yellow);
  text-transform: uppercase;
}
.schedule__title {
  font-family: var(--display);
  font-size: clamp(18px, 2vw, 24px);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  display: block;
}
.schedule__sub {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,.65);
  margin-top: 4px;
  grid-column: 2;
}
@media (min-width: 720px) {
  .schedule li { grid-template-columns: 160px 1fr; }
}

/* ============ PROGRAMMING GRID ============ */
.prog-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
.card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
/* Portrait shots: anchor crop to top so the subject's face is visible */
.card__img[src*="dj-sets"],
.card__img[src*="singalong"] { object-position: center top; }
.card__body {
  position: relative;
  padding: 22px 22px 24px;
}
.card__partner {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--yellow);
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.card__title {
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.05;
  margin: 0 0 6px;
  text-transform: uppercase;
}
.card__sub {
  font-size: 14px;
  color: var(--gray-500);
  margin: 0;
}
.card__expand {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, margin .35s ease;
}
.card__expand p {
  margin: 16px 0 0;
  font-size: 15px;
  color: var(--ink-2);
}
.card.is-open .card__expand { max-height: 320px; }
.card__toggle {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--black);
  color: var(--yellow);
  border: none;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease;
}
.card.is-open .card__toggle { transform: rotate(45deg); background: var(--yellow); color: var(--black); }
.card--feature {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.card--feature .card__title { color: var(--white); }
.card--feature .card__sub { color: rgba(255,255,255,.7); }
.card--feature .card__expand p { color: rgba(255,255,255,.85); }
.card--feature .card__toggle { background: var(--yellow); color: var(--black); }

@media (min-width: 700px) {
  .prog-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1080px) {
  .prog-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Mobile: swipeable horizontal carousel instead of a long vertical stack */
@media (max-width: 699px) {
  .prog-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding-bottom: 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .prog-grid::-webkit-scrollbar { display: none; }
  .prog-grid > .card {
    flex: 0 0 86%;
    scroll-snap-align: start;
    align-self: flex-start;
  }
}

/* ============ RAIL (contained scroll carousel with arrows) ============ */
.rail {
  position: relative;
  margin-top: 12px;
}
.rail__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5%, #000 97.5%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 2.5%, #000 97.5%, transparent);
  padding: 8px 0 16px;
}
.rail__viewport::-webkit-scrollbar { display: none; }
.rail__track {
  display: flex;
  gap: 16px;
  width: max-content;
}
.rail__track > .card--rail {
  flex: 0 0 320px;
  scroll-snap-align: start;
  align-self: flex-start;
}
@media (max-width: 720px) {
  .rail__track > .card--rail { flex: 0 0 260px; }
}

.rail__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--black);
  color: var(--yellow);
  border: none;
  cursor: pointer;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  transition: transform .15s ease, background .15s ease, opacity .2s ease;
  padding: 0;
}
.rail__nav:hover { transform: translateY(-50%) scale(1.08); background: var(--ink-2); }
.rail__nav--prev { left: -22px; }
.rail__nav--next { right: -22px; }
.band--dark .rail__nav { background: var(--yellow); color: var(--black); }
.band--dark .rail__nav:hover { background: var(--yellow-deep); }
@media (max-width: 880px) {
  .rail__nav--prev { left: -10px; }
  .rail__nav--next { right: -10px; }
}
@media (max-width: 720px) {
  .rail__nav { display: none; }
}

/* ============ CARD MARQUEE (legacy, kept for reference) ============ */
.card-marquee {
  overflow: hidden;
  position: relative;
  margin: 32px 0 0;
  padding: 8px 0 16px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.card-track {
  display: flex;
  gap: 16px;
  width: max-content;
  padding: 0 24px;
  animation: card-scroll 80s linear infinite;
  will-change: transform;
}
.card-track--alt { animation-duration: 70s; }
.card-track:hover { animation-play-state: paused; }
.card-track.is-paused { animation-play-state: paused; }
@keyframes card-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .card-track { animation: none; }
}
.card-track > .card--rail {
  flex: 0 0 320px;
  align-self: flex-start;
}
@media (max-width: 720px) {
  .card-track > .card--rail { flex: 0 0 280px; }
}

/* Dark band card variant (VIP section) */
.card--dark {
  background: var(--ink-2);
  border-color: rgba(255,255,255,.08);
  color: var(--white);
}
.card--dark .card__title { color: var(--white); }
.card--dark .card__sub { color: rgba(255,255,255,.7); }
.card--dark .card__attr { color: rgba(255,255,255,.55); }
.card--dark .card__expand p { color: rgba(255,255,255,.85); }
.card--dark .card__toggle { background: var(--yellow); color: var(--black); }

/* DJ card variant: portrait crop, no toggle */
.card--dj .card__img { object-position: center top; }
.card--dj .card__toggle { display: none; }

/* Touch devices: swap the auto-marquee for a native swipeable rail */
@media (hover: none) and (pointer: coarse) {
  .card-marquee {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .card-marquee::-webkit-scrollbar { display: none; }
  .card-track { animation: none; }
  .card-track > .card--rail { scroll-snap-align: start; }
  .card-track > [aria-hidden="true"] { display: none; }
}

/* ============ ACCESS BADGES (free vs paid) ============ */
.access-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}
.access {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
}
.access--free { background: #1F8A3A; color: #fff; }
.access--cash { background: var(--yellow); color: var(--black); }
.access--vip  { background: var(--black); color: var(--yellow); }

.card__access-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.card__access {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  display: inline-block;
}
.card__access--free { background: #1F8A3A; color: #fff; }
.card__access--cash { background: var(--yellow); color: var(--black); }
.card__access--vip  { background: var(--black); color: var(--yellow); }
.card__attr {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
}

/* ============ DJ LINEUP ============ */
.dj-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-top: 16px;
}
.dj {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--ink-2);
  isolation: isolate;
}
.dj__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.dj:hover .dj__img { transform: scale(1.04); }
.dj__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  color: var(--white);
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.85) 100%);
}
.dj__name {
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 26px);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin: 0;
  line-height: 1.05;
}
.dj__role {
  font-size: 12px;
  color: rgba(255,255,255,.75);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 6px 0 0;
}
@media (min-width: 600px) {
  .dj-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .dj-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; }
}

/* ============ PARTNERS ============ */
.presenting {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin: 16px 0 12px;
}
.presenting__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
}
.presenting__logo img {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  object-fit: contain;
}
.presenting__label {
  display: inline-block;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--yellow);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.presenting__copy p {
  margin: 0;
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--ink-2);
  line-height: 1.5;
}
@media (min-width: 720px) {
  .presenting { grid-template-columns: 280px 1fr; gap: 36px; padding: 32px 36px; }
}
.presenting--logo-only {
  grid-template-columns: 1fr !important;
  justify-items: center;
  padding: 28px;
}
.presenting--logo-only .presenting__logo {
  max-width: 360px;
  width: 100%;
}

/* Two partners side by side: logo + label only, no body copy, so the
   gallery below sits higher on the page. */
.partner-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 16px 0 8px;
}
.partner-pair__item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.partner-pair__item { justify-content: space-between; }
/* Fixed box height keeps the two logos, and the labels under them,
   on the same baseline even though one is an image and one is text. */
.partner-pair .presenting__logo { width: 100%; height: 108px; }
.partner-pair .presenting__label { margin-bottom: 0; }
.partner-pair__wordmark {
  font-family: var(--display);
  font-size: clamp(15px, 1.7vw, 19px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
}
@media (min-width: 720px) {
  .partner-pair { grid-template-columns: 1fr 1fr; gap: 20px; }
}

.vendor-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin: 14px 0 0;
}
.vendor {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.vendor:hover { transform: translateY(-2px); border-color: var(--black); }
.vendor__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.vendor__img--text {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  color: var(--yellow);
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  padding: 24px;
}
.vendor__body { padding: 18px 22px 22px; }
.vendor__name {
  font-family: var(--display);
  font-size: clamp(18px, 2vw, 22px);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 6px;
}
.vendor__role {
  margin: 0;
  font-size: 14px;
  color: var(--gray-500);
  line-height: 1.45;
}
@media (min-width: 720px) {
  .vendor-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============ PARTNERS (legacy marquee) ============ */
.partners-subhead {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 40px 0 14px;
}
.partners-subhead:first-of-type { margin-top: 24px; }
.partner-marquee {
  overflow: hidden;
  margin-top: 12px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.partner-track {
  display: flex;
  width: max-content;
  animation: logo-scroll 55s linear infinite;
}
.partner-track:hover { animation-play-state: paused; }
.partner-track--alt { animation-duration: 46s; }
.partner {
  flex: 0 0 196px;
  margin-right: 12px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 24px 20px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  text-align: left;
  transition: transform .2s ease, border-color .2s ease;
}
.partner:hover { transform: translateY(-2px); border-color: var(--black); }
.partner__logo {
  font-family: var(--display);
  font-size: clamp(18px, 2.6vw, 28px);
  letter-spacing: 0.04em;
}
.partner__img {
  display: block;
  height: 44px;
  width: 100%;
  max-width: 160px;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0);
  opacity: 0.9;
}
.partner__role {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: 16px;
  line-height: 1.45;
}
.partner--tba {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.partner--tba .partner__role { color: rgba(255,255,255,.6); }

.partners-cta {
  margin: 32px 0 0;
  font-size: 15px;
  color: var(--ink-2);
}
.partners-cta a { font-weight: 600; text-decoration: underline; }

@media (max-width: 480px) {
  .partner { flex-basis: 172px; }
}

/* ============ AUDIENCE ============ */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 12px 0 36px;
}
.aud {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 24px 20px;
}
.aud__num {
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 42px);
  color: var(--yellow);
  line-height: 1;
  margin-bottom: 8px;
}
.aud__label { font-size: 14px; color: rgba(255,255,255,.75); }

.audience-reach {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 12px;
  background: var(--ink);
  border-radius: var(--radius);
  padding: 22px;
}
.reach__num {
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 32px);
  color: var(--white);
  line-height: 1;
}
.reach__label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-top: 6px;
}

@media (min-width: 720px) {
  .audience-grid { grid-template-columns: repeat(3, 1fr); }
  .audience-reach { grid-template-columns: repeat(4, 1fr); }
}

/* ============ GALLERY ============ */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-top: 32px;
}
.gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
@media (min-width: 720px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1080px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1400px) {
  .gallery { grid-template-columns: repeat(5, 1fr); }
}

/* ============ REGISTER ============ */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ============ FOOTER ============ */
.footer {
  background: var(--black);
  color: rgba(255,255,255,.78);
  padding: 72px 0 32px;
}
.footer a { color: var(--yellow); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.footer__brand p {
  margin: 16px 0 0;
  max-width: 420px;
  font-size: 14px;
  color: rgba(255,255,255,.65);
}
.footer__col h4 {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 0 12px;
}
.footer__col p { margin: 0; font-size: 14px; line-height: 1.7; }
.footer__legal {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 48px;
  padding-top: 24px;
  font-size: 12px;
  text-align: center;
  color: rgba(255,255,255,.45);
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 720px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* ============ RSVP FRAME (Sweatpals waitlist iframe button) ============ */
/* The iframe renders the Sweatpals button; clicks open the waitlist popup
   provided by the script tag loaded at the bottom of the body. */
.rsvp-frame {
  display: inline-block;
  vertical-align: middle;
  border: 0;
  width: 100%;
}
.rsvp-frame--sm {
  max-width: 160px;
  height: 44px;
}
.rsvp-frame--lg {
  max-width: 280px;
  height: 56px;
}
@media (max-width: 480px) {
  .rsvp-frame--lg { max-width: 100%; }
}

/* ============ SWEATPALS EMBED (legacy, unused) ============ */
/* Sweatpals injects its own button at the script tag location. Wrapper sets
   minimum sizing so the layout reserves space and the injected button matches
   our scale. The Sweatpals modal handles the waitlist signup popup. */
.sweatpals-embed {
  display: inline-block;
  vertical-align: middle;
}
.sweatpals-embed--sm { min-width: 130px; }
.sweatpals-embed--lg { min-width: 220px; }
.sweatpals-embed button,
.sweatpals-embed > button {
  font-family: var(--display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-radius: 999px !important;
}

/* ============ RSVP MODAL (Sweatpals waitlist iframe) ============ */
.rsvp-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.rsvp-modal.is-open { display: flex; }
.rsvp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.78);
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.rsvp-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(96vw, 560px);
  height: min(94vh, 780px);
  background: var(--black);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.rsvp-modal__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--black);
}
.rsvp-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: 0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .15s ease;
}
.rsvp-modal__close:hover { background: rgba(0,0,0,.85); transform: scale(1.05); }
body.is-rsvp-open { overflow: hidden; }

/* ============ SWEATPALS WIDGET (script-paired iframe button) ============ */
/* Renders the Sweatpals checkout button directly. The script in <head>
   handles the popup overlay when the iframe button is clicked. */
.sweatpals-widget {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}
.sweatpals-widget iframe {
  border: 0;
  display: block;
  width: 100%;
  background: transparent;
}
.sweatpals-widget--sm { width: 160px; }
.sweatpals-widget--sm iframe { height: 44px; }
.sweatpals-widget--lg { width: 280px; }
.sweatpals-widget--lg iframe { height: 56px; }
@media (max-width: 480px) {
  .sweatpals-widget--lg { width: 100%; max-width: 360px; }
}

/* ============ PRE-REGISTER MODAL (custom waitlist form) ============ */
.rsvp-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.rsvp-modal.is-open { display: flex; }
body.is-rsvp-open { overflow: hidden; }

.rsvp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.78);
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.rsvp-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(96vw, 460px);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--black);
  color: var(--white);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  padding: 32px 28px 28px;
  font-family: var(--body);
}
.rsvp-modal__dialog--frame {
  width: min(96vw, 560px);
  height: min(94vh, 800px);
  max-height: 94vh;
  padding: 0;
  overflow: hidden;
}
.rsvp-modal__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--black);
}
.rsvp-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: var(--white);
  border: 0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .15s ease;
}
.rsvp-modal__close:hover { background: rgba(255,255,255,.2); transform: scale(1.05); }
.rsvp-modal__title {
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: 0;
  text-transform: none;
  margin: 4px 0 8px;
  text-align: center;
}
.rsvp-modal__lede {
  margin: 0 0 22px;
  text-align: center;
  color: rgba(255,255,255,.75);
  font-size: 15px;
  line-height: 1.5;
}
.rsvp-form { display: flex; flex-direction: column; gap: 12px; }
.rsvp-field { display: block; }
.rsvp-field__label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 6px;
}
.rsvp-field__input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  color: var(--white);
  font-family: var(--body);
  font-size: 16px;
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.rsvp-field__input:focus {
  border-color: var(--yellow);
  background: rgba(255,255,255,.12);
}
.rsvp-field__input::placeholder { color: rgba(255,255,255,.35); }

.rsvp-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,.6);
  margin: 6px 0 8px;
}
.rsvp-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--yellow);
  cursor: pointer;
}

.rsvp-form__submit {
  width: 100%;
  margin-top: 6px;
  border-radius: 999px;
}
.rsvp-form__submit:disabled {
  opacity: 0.6;
  cursor: progress;
}
.rsvp-form__error {
  margin: 4px 0 0;
  font-size: 13px;
  color: #ff8a80;
  text-align: center;
}

.rsvp-modal__success { text-align: center; }
.rsvp-modal__success .btn { display: inline-block; margin-top: 12px; }

/* ============ SWEATPALS HIDDEN HOST ============ */
/* Renders the auto-embed widget off-screen so Sweatpals's script and its
   click-to-popup handler are loaded, but no widget content is visible.
   Our Pre-Register buttons trigger the popup by .click()-ing the widget's
   internal trigger element. */
#sweatpals-host {
  position: fixed;
  left: -10000px;
  top: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ============ RSVP AUTO-EMBED (Sweatpals auto-injected button) ============ */
/* With enableAutoEmbed=true Sweatpals injects its own styled button next to
   the script tag. The wrapper just reserves layout space and sets sizing. */
.rsvp-autoembed {
  display: inline-block;
  vertical-align: middle;
}
.rsvp-autoembed--sm { min-width: 130px; }
.rsvp-autoembed--lg { min-width: 240px; }

/* ============ RSVP TRIGGER (Sweatpals iframe overlay) ============ */
/* Visible OTT-styled pill button sits behind; the Sweatpals iframe
   sits absolutely on top with opacity 0. Clicks land on the iframe's
   Sweatpals button, which the checkout script (at end of body)
   intercepts to open the registration modal inline.
   Pattern from SF Fit Fest (PR #52). */
.rsvp-trigger {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.rsvp-trigger .btn { line-height: 1.55; }
/* Wide variant for the standalone CTA band, so the pill keeps the same
   footprint as a plain .btn--lg sitting next to it. */
.rsvp-trigger--lg { min-width: 260px; }
.rsvp-trigger--lg .btn--lg { width: 100%; min-width: 0; }
.cta-row .rsvp-trigger { display: inline-block; }
.rsvp-trigger__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

/* Pre-Register modal: loads the Sweatpals "Join waitlist" early-access form. */
.sp-modal {
  border: 0;
  padding: 0;
  border-radius: 18px;
  width: min(480px, 92vw);
  max-height: 90vh;
  background: var(--white);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.sp-modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.sp-modal__bar {
  display: flex;
  justify-content: flex-end;
  padding: 8px 10px 0;
}
.sp-modal__close {
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  width: 38px;
  height: 38px;
  border-radius: 999px;
}
.sp-modal__close:hover {
  background: var(--gray-100);
}
.sp-modal__frame {
  display: block;
  width: 100%;
  height: 620px;
  max-height: calc(90vh - 46px);
  border: 0;
}