/* ==========================================================================
   Little Beats Dayclub
   Mobile-first. Base styles target the phone; min-width queries add up from
   there. Nothing below 1024px depends on a desktop rule being overridden.

    1. Fonts            7. Sections (shared)
    2. Tokens           8. Homepage sections
    3. Reset            9. FAQ
    4. Buttons         10. Contact pages
    5. Nav             11. Legal pages
    6. Hero            12. Footer
                       13. Reduced motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   Self-hosted woff2 — no Google Fonts request, no layout shift.
   Drop the files into /assets/fonts/ and uncomment. The stack below degrades
   to the platform geometric sans until then, so the site ships either way.
   -------------------------------------------------------------------------- */
/*
@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/SpaceGrotesk-Variable.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-Variable.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
}
*/

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surface */
  --bg: #0a0a0c;
  --surface: #121215;
  --surface-2: #18181e;
  --line: rgba(244, 244, 240, 0.1);
  --fg: #f4f4f0;
  --fg-soft: rgba(244, 244, 240, 0.8);
  --fg-muted: #8a8a93;

  /* Neon. Contrast on --bg: cyan 13.1:1, magenta 5.75:1 — both pass AA. */
  --accent-1: #22e7ff; /* highlights, headings, focus, glow */
  --accent-2: #ff2e9a; /* glow */

  /* Type */
  --font-display:
    "Space Grotesk", "Bahnschrift", "DIN Alternate",
    "Segoe UI Variable Display", system-ui, sans-serif;
  --font-body:
    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;

  /* Rhythm */
  --gutter: 1.25rem;
  --measure: 1200px;
  --section-y: 4.5rem;
  --radius: 18px;
  --radius-sm: 12px;
  --nav-h: 68px;
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* In-page anchors land below the fixed nav, not under it */
  scroll-padding-top: var(--nav-h);
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--accent-1);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.container {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left))
    max(var(--gutter), env(safe-area-inset-right));
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0 1.75rem;
  border: 0;
  border-radius: 999px;
  /* Purple into pink, matching the parking tile and the magenta accent. The
     pink end is a shade deeper than --accent-2 so white text holds 4.5:1
     across the whole gradient. Every button on the site uses it. */
  background: linear-gradient(120deg, #9333ea, #db2777);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 28px -6px rgba(219, 39, 119, 0.85);
  cursor: pointer;
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.btn--sm {
  min-height: 44px;
  padding: 0 1.125rem;
  font-size: 0.875rem;
}

@media (hover: hover) {
  .btn:hover {
    background: linear-gradient(120deg, #a345f5, #e8388a);
    box-shadow: 0 0 36px -2px rgba(219, 39, 119, 0.9);
  }
}

.btn:active {
  transform: translateY(1px);
}

/* --------------------------------------------------------------------------
   5. Nav
   Fixed at every width. Over the hero it is transparent; main.js adds
   .is-solid once the hero leaves. Pages without a hero ship it solid.
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top);
  background: linear-gradient(rgba(10, 10, 12, 0.7), rgba(10, 10, 12, 0));
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.nav.is-solid {
  background: rgba(10, 10, 12, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}

/* Three columns with equal outer tracks, so the logo is truly centred no
   matter how wide the date or the button run. */
/* Phones: logo | date centred in the gap | button.
   Desktop (1024px+): the date joins the logo behind a divider instead. */
.nav__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  height: var(--nav-h);
}

.nav__when {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-family: var(--font-display);
  text-align: center;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}

.nav__where {
  color: var(--accent-1);
}

.nav__logo {
  display: block;
}

/* Stacked lockup (848×623). Below ~44px "DAYCLUB" stops reading. */
.nav__logo img {
  width: auto;
  height: 48px;
}

.nav__cta {
  justify-self: end;
}

/* --------------------------------------------------------------------------
   6. Hero — full-screen looping video, headline over it
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  overflow: hidden;
  background: #000;
}

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

/* Scrim: dark at the bottom where the headline sits, lighter up top so the
   stage lights still read. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 10, 12, 0.96) 0%,
    rgba(10, 10, 12, 0.55) 38%,
    rgba(10, 10, 12, 0.15) 70%,
    rgba(10, 10, 12, 0.35) 100%
  );
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-bottom: max(4.5rem, calc(env(safe-area-inset-bottom) + 3.5rem));
}

.hero__title {
  max-width: 22ch;
  margin: 0 auto;
  font-size: clamp(1.75rem, 6.5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-align: center;
}

/* "and their cool parents" — the wink, set in the partner neon */
.hero__title em {
  font-style: normal;
  color: var(--accent-1);
}

/* Pause control — motion over 5s needs one (WCAG 2.2.2) */
.hero__motion {
  position: absolute;
  z-index: 2;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(244, 244, 240, 0.25);
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

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

.hero__motion .icon-play {
  display: none;
}
.hero__motion[aria-pressed="true"] .icon-play {
  display: block;
}
.hero__motion[aria-pressed="true"] .icon-pause {
  display: none;
}

/* --------------------------------------------------------------------------
   7. Sections (shared)
   -------------------------------------------------------------------------- */
.section {
  position: relative;
  padding-block: var(--section-y);
}

.section + .section {
  border-top: 1px solid var(--line);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 1rem;
  color: var(--accent-1);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Section type scale: the title always clearly outranks the body copy —
   roughly 2.5x on phones, 4x on desktop. */
.section__title {
  margin: 0 0 1.25rem;
  font-size: clamp(2.25rem, 9vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* Tickets copy — same size as the "Pick your window." intro above it */
.section__lead {
  max-width: 36ch;
  margin: 0;
  color: var(--fg-soft);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4.5vw, 2rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* Every section opens the same way: the section name as the big title, then
   one statement line at about half its size ("Built for families…", "Pick
   your window.", the About paragraph). Body copy under that is 15px. */
.section__intro {
  max-width: 36ch;
  margin: 0;
  color: var(--fg-soft);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4.5vw, 2rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Scoped to .section so it outranks the margin shorthands on whatever
   follows (address, lead, grid). */
.section .section__intro + * {
  margin-top: 1.75rem;
}

/* Highlight a phrase in the hero's cyan */
.accent {
  color: var(--accent-1);
  white-space: nowrap; /* keeps "9am–5pm" from splitting at the dash */
}

/* Card surface — no outline, the fill does the separating */
.panel {
  position: relative;
  border-radius: var(--radius);
  background: var(--surface);
}

/* Soft neon glow behind a section — decoration only */
.glow {
  position: absolute;
  z-index: -1;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.16;
  pointer-events: none;
}
.glow--cyan {
  background: radial-gradient(circle, var(--accent-1), transparent 65%);
}
.glow--magenta {
  background: radial-gradient(circle, var(--accent-2), transparent 65%);
}
.glow--purple {
  background: radial-gradient(circle, #9333ea, transparent 65%);
}
/* Secondary spot in a section — fainter, so pairs never stack into a blotch */
.glow--soft {
  opacity: 0.1;
}

main {
  position: relative;
  z-index: 0;
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   8. Homepage sections
   -------------------------------------------------------------------------- */

/* --- Little Beats Dayclub (intro) ---------------------------------------- */
/* --- The Vibe ------------------------------------------------------------- */
.vibe__grid {
  display: grid;
  gap: 3rem 2rem;
  margin-top: 2.5rem;
}

/* Text sits straight on the page, picture below it. The picture is pushed
   to the bottom so pictures line up across a row even when one card's text
   runs longer. */
.card {
  display: flex;
  flex-direction: column;
}

.card__body {
  padding: 0 0 1.5rem;
}

.card .photo,
.card .card__media {
  margin-top: auto;
  border-radius: var(--radius);
  overflow: hidden;
}

/* Same pairing as the section openers — big title, then a statement line in
   the display face (.section__intro) — at a scale that fits a third-width
   card. The title stays about 2x the text, as it does in the sections. */
.card__title {
  margin: 0 0 0.75rem;
  font-size: clamp(2.25rem, 8vw, 2.75rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.card__text {
  margin: 0;
  color: var(--fg-soft);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 4vw, 1.375rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* Photo slot. Holds an <img> once media lands; until then the label names
   the shot that belongs here, so a placeholder can't ship unnoticed. */
.photo {
  position: relative;
  /* The photos' own 16:9 — nothing cropped; the Food & Drinks shot runs
     the kids right to both edges. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(34, 231, 255, 0.28),
      transparent 60%
    ),
    radial-gradient(
      circle at 75% 75%,
      rgba(255, 46, 154, 0.3),
      transparent 60%
    ),
    var(--surface-2);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo[data-placeholder]::after {
  content: attr(data-placeholder);
  position: absolute;
  inset: auto 0.75rem 0.75rem;
  padding: 0.375rem 0.625rem;
  border: 1px dashed rgba(244, 244, 240, 0.35);
  border-radius: 8px;
  color: var(--fg-muted);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Free Amenities (fourth Vibe card) ----------------------------------- */

/* The supplied 2x2 icon grid, in the same 16:9 box as the photos so the
   titles line up across each row. */
.card__media {
  position: relative;
  aspect-ratio: 16 / 9;
}

/* Icon edges line up with the top and bottom of the photo beside it.
   amenities_grid.png is 800px with the tiles at 41–783px, so the image is
   scaled to 800/742 of the box and nudged up by 41/742 to push its
   transparent margin outside the box. */
.card__grid {
  position: absolute;
  top: -5.53%;
  left: 50%;
  width: auto;
  height: 107.82%;
  max-width: none;
  transform: translateX(-50%);
}

/* --- Location ------------------------------------------------------------- */
.location__grid {
  display: grid;
  gap: 2rem;
}

/* Venue and address read as one two-line intro, same size (.section__intro) */
.section .location__address {
  margin: 0.25rem 0 3rem;
  font-style: normal;
}

.getting-there {
  display: grid;
  gap: 2.5rem;
  margin: 0 0 2.5rem;
}

/* "Driving" / "Public Transit" at the Vibe card-title size */
.getting-there dt {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 8vw, 2.75rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* Same size as the Vibe card text under "Experience" etc. */
.getting-there dd {
  max-width: 44ch;
  margin: 0.5rem 0 0;
  color: var(--fg-soft);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 4vw, 1.375rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.map {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  min-height: 280px;
}

/* Google's embed has no dark theme. Inverting and rotating the hue back
   gives a dark map with roads and water still in the right colours. */
.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  filter: invert(0.9) hue-rotate(180deg) saturate(0.8);
}

/* --- Tickets -------------------------------------------------------------- */
.slots {
  display: grid;
  gap: 1rem;
  margin: 2.5rem 0 2rem;
  padding: 0;
  list-style: none;
}

.slot {
  padding: 1.5rem 1.5rem 1.625rem;
}

/* Same size and face as the Tickets body copy above the boxes */
.slot__name {
  margin: 0 0 0.5rem;
  color: var(--fg-soft);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4.5vw, 2rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.slot__time {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.slot__time span {
  color: var(--accent-1);
}

.tickets__note {
  max-width: 36ch;
  margin: 0 0 2rem;
  color: var(--fg-soft);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4.5vw, 2rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* --- Parent Ambassadors --------------------------------------------------- */
.ambassadors__text {
  max-width: 44ch;
  margin: 0 0 2rem;
  color: var(--fg-soft);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 4vw, 1.375rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   9. FAQ — native <details>, so it opens without JS and is announced
   correctly by screen readers
   -------------------------------------------------------------------------- */
.page {
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top));
}

.page__head {
  padding-block: 3rem 1rem;
}

.page__title {
  margin: 0;
  font-size: clamp(2.25rem, 9vw, 4rem);
}

.faq-group {
  padding-block: 2rem;
}

/* Group headings match the homepage card titles ("Experience") */
.faq-group__title {
  margin: 0 0 1.25rem;
  color: var(--accent-1);
  font-size: clamp(2.25rem, 8vw, 2.75rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.faq {
  border-bottom: 1px solid var(--line);
}

.faq:first-of-type {
  border-top: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
  padding: 1rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 4vw, 1.375rem);
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

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

/* Plus that turns into a minus */
.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) center / 2px 100% no-repeat;
  color: var(--accent-1);
  transition: transform 0.2s ease;
}

.faq[open] summary::after {
  background: linear-gradient(currentColor 0 0) center / 100% 2px no-repeat;
}

@media (hover: hover) {
  .faq summary:hover {
    color: var(--accent-1);
  }
}

/* Answers use the homepage card text style (under "Experience" etc.) */
.faq__answer {
  max-width: 52ch;
  padding: 0 0 1.5rem;
  color: var(--fg-soft);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 4vw, 1.375rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.faq__answer p {
  margin: 0 0 0.75rem;
}

.faq__answer p:last-child,
.faq__answer ul:last-child {
  margin-bottom: 0;
}

.faq__answer ul {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
}

.faq__answer a {
  color: var(--accent-1);
}

.faq-cta {
  padding-block: 2rem 4rem;
}

/* --------------------------------------------------------------------------
   10. Contact pages — the nav, the form, the footer. Nothing else.
   -------------------------------------------------------------------------- */
.formpage__intro {
  max-width: 56ch;
  margin: 1rem 0 0;
  color: var(--fg-soft);
}

.formpage__frame {
  margin-block: 2rem 4rem;
  padding: 6px;
  background: var(--surface-2);
}

.formFrame {
  position: relative;
  height: min(78dvh, 720px);
  min-height: 480px;
  border-radius: calc(var(--radius) - 6px);
  overflow: hidden;
  background: var(--surface);
}

.formFrame > div,
.formFrame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.formFrame__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--fg-muted);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.formFrame__loading[hidden] {
  display: none;
}

/* Shown when a form id isn't set yet, or the embed fails to load */
.form-fallback {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 100%;
  padding: 2rem 1.5rem;
  text-align: center;
}

.form-fallback[data-visible="true"] {
  display: flex;
}

.form-fallback p {
  max-width: 32ch;
  margin: 0;
  color: var(--fg-soft);
}

/* An email address is case-sensitive to read and too long for a phone-width
   pill, so it drops the button's uppercase and may wrap. */
.form-fallback .btn {
  max-width: 100%;
  padding: 0 1.25rem;
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  overflow-wrap: break-word;
}

/* No form to hold — don't reserve a form-sized empty box */
.formFrame:has(.form-fallback[data-visible="true"]) {
  height: auto;
  min-height: 260px;
}

/* --- Ticket checkout pop-over (built by main.js) ------------------------- */

/* Full screen on phones, per TicketSpice's own behaviour; 800px centred
   above that. TicketSpice's page is light, so the frame sits on white and
   the loading state doesn't flash dark-to-light. */
.tickets-modal {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #fff;
  color: #1a1a1f;
  overflow: hidden;
}

.tickets-modal::backdrop {
  background: rgba(10, 10, 12, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.tickets-modal__frame {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tickets-modal.is-loaded .tickets-modal__frame {
  opacity: 1;
}

.tickets-modal__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: #6b6b75;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tickets-modal__close {
  position: absolute;
  z-index: 1;
  top: max(0.5rem, env(safe-area-inset-top));
  right: max(0.5rem, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: #1a1a1f;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.tickets-modal__close svg {
  width: 20px;
  height: 20px;
}

/* The page behind doesn't scroll while checkout is open */
.is-modal-open,
.is-modal-open body {
  overflow: hidden;
}

@media (min-width: 840px) {
  .tickets-modal {
    width: 800px;
    height: min(90dvh, 900px);
    margin: auto;
    border-radius: var(--radius);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  }

  .tickets-modal__close {
    top: 0.75rem;
    right: 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   11. Legal pages
   -------------------------------------------------------------------------- */
.doc {
  max-width: calc(68ch + 2 * var(--gutter));
  padding-block: 2.5rem 4rem;
}

.doc__effective {
  margin: 0.75rem 0 2.5rem;
  color: var(--fg-muted);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.doc__preamble {
  margin: 0 0 2.5rem;
  color: var(--fg-soft);
}

.doc section + section {
  margin-top: 2.5rem;
}

.doc h2 {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 4.5vw, 1.875rem);
  letter-spacing: -0.02em;
}

.doc h2 .num {
  flex: none;
  color: var(--accent-1);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}

/* Scoped to sections so the header lines above (eyebrow, effective date,
   preamble) keep their own spacing. */
.doc section p,
.doc section ul {
  margin: 0 0 1rem;
  color: var(--fg-soft);
  font-size: 0.9375rem;
}

.doc ul {
  padding-left: 1.25rem;
}

.doc li {
  margin-bottom: 0.5rem;
}

.doc section p:last-child,
.doc section ul:last-child {
  margin-bottom: 0;
}

.doc a {
  color: var(--accent-1);
}

.doc strong {
  color: var(--fg);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.footer {
  padding-block: 3.5rem max(1.5rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.25rem 1.5rem;
  margin-bottom: 3rem;
}

.footer__brand {
  grid-column: 1 / -1;
}

.footer__brand img {
  width: auto;
  height: 64px;
}

/* Footer column headings — cyan, in the title face, clearly above the links */
.footer__heading {
  margin: 0 0 0.75rem;
  color: var(--accent-1);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  text-decoration: none;
  transition: color 0.16s ease;
}

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

@media (hover: hover) {
  .footer__links a:hover {
    color: var(--accent-1);
  }
}

/* Text ships verbatim, pipes included — they are real characters, not
   pseudo-elements, so the line survives a copy-paste. */
.footer__legal {
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--fg-muted);
  font-size: 0.8125rem;
  line-height: 2;
  text-wrap: balance;
}

.footer__legal a {
  color: var(--fg-muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 138, 147, 0.35);
}

@media (hover: hover) {
  .footer__legal a:hover {
    color: var(--accent-1);
    border-bottom-color: var(--accent-1);
  }
}

.footer__legal .sep {
  opacity: 0.45;
}

/* --------------------------------------------------------------------------
   Larger screens
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  :root {
    --gutter: 2rem;
    --section-y: 6rem;
  }

  .nav__when {
    font-size: 0.8125rem;
  }

  /* Experience, Food & Drinks / Activities, Free Amenities — 2x2 from
     here up, including desktop. */
  .vibe__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .slots {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 2.5rem;
    --section-y: 8rem;
    --radius: 22px;
    --nav-h: 84px;
  }

  .nav__logo img {
    height: 60px;
  }

  .nav__inner {
    grid-template-columns: auto auto 1fr;
    gap: 1.125rem;
  }

  .nav__when {
    align-items: flex-start;
    padding-left: 1.125rem;
    border-left: 1px solid rgba(244, 244, 240, 0.25);
    font-size: 0.875rem;
    text-align: left;
  }

  .btn--sm {
    min-height: 48px;
    padding: 0 1.5rem;
    font-size: 0.9375rem;
  }

  .hero__content {
    padding-bottom: 6rem;
  }

  .location__grid {
    grid-template-columns: 5fr 7fr;
    align-items: center;
    gap: 4rem;
  }

  .map {
    aspect-ratio: auto;
    height: 460px;
  }

  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .footer__brand {
    grid-column: auto;
  }
}

/* Very narrow phones — the three nav columns have ~320px to share */
@media (max-width: 374px) {
  .nav__when {
    font-size: 0.6875rem;
  }
  .nav__logo img {
    height: 40px;
  }
  .btn--sm {
    padding: 0 0.875rem;
    font-size: 0.8125rem;
  }
}

/* --------------------------------------------------------------------------
   13. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}