/* ============================================
   Spiritgust Festival — Local Revamp Stylesheet
   Dark, high-contrast, psychedelic atmosphere
   WCAG AA compliant, prefers-reduced-motion aware
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Palette */
  --bg-darkest: #050010;
  --bg-dark: #0a0118;
  --bg-card: #14092a;
  --bg-card-hover: #1c0f3d;
  --accent-purple: #8b00ff;
  --accent-magenta: #d4145a;
  --accent-cyan: #00d4ff;
  --accent-green: #00ff9d;
  --brand-lime: #d1d22f;  /* sampled from the SPIRITGUST wordmark; 12.6:1 on #050010, 11.8:1 on #14092a */
  --text-primary: #f0e6ff;
  --text-secondary: #b8a8d8;
  --text-muted: #9685b8;  /* 6.26:1 on #050010, 6.16:1 on #0a0118, 5.76:1 on #14092a, 5.35:1 on #1c0f3d — all pass AA */
  /* Text-safe variants of the saturated accents. The saturated tokens above stay
     for borders, backgrounds and gradients; these two are the only ones used as
     small-text colours, because #d4145a (3.67:1) and #8b00ff (3.21:1) fail AA on --bg-card. */
  --accent-magenta-text: #ff5c8a;  /* 7.05:1 on #050010, 6.49:1 on #14092a — passes AA */
  --accent-purple-text: #b06bff;   /* 6.31:1 on #050010, 5.39:1 on #1c0f3d — passes AA */
  --border-subtle: rgba(139, 0, 255, 0.2);
  --border-active: rgba(0, 212, 255, 0.5);
  --glow-purple: rgba(139, 0, 255, 0.4);
  --glow-cyan: rgba(0, 212, 255, 0.3);
  --font-heading: 'Anton', 'Oswald', 'Impact', 'Helvetica Neue', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
  --max-width: 1200px;
  --header-height: 64px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  font-family: var(--font-body);
  background: var(--bg-darkest);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

/* --- Screen-reader-only --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Skip Link --- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--accent-cyan);
  color: var(--bg-darkest);
  padding: 12px 24px;
  font-weight: 700;
  text-decoration: none;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  top: 0;
}

/* --- Focus Styles (Accessibility) --- */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--accent-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Layout --- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 3rem);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
  color: var(--accent-cyan);
  text-align: center;
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  text-align: center;
}

/* --- Header --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: rgba(5, 0, 16, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 100;
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.logo img {
  display: block;
  width: auto;
  height: 40px;
  max-width: 160px;
  object-fit: contain;
}

.nav-desktop ul {
  display: flex;
  list-style: none;
  gap: 28px;
}

.nav-desktop a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-desktop a:hover {
  color: var(--accent-cyan);
}

.btn-tickets-header {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-magenta));
  color: white;
  padding: 8px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-tickets-header:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--glow-purple);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}
.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-mobile {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 99;
}
.nav-mobile ul {
  list-style: none;
  padding: 16px 24px;
}
.nav-mobile li {
  margin-bottom: 8px;
}
.nav-mobile a {
  display: block;
  color: var(--text-primary);
  text-decoration: none;
  padding: 12px 0;
  font-size: 1.1rem;
  border-bottom: 1px solid var(--border-subtle);
}
.btn-tickets-mobile {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-magenta));
  color: white !important;
  text-align: center;
  border-radius: 6px;
  border: none !important;
  margin-top: 8px;
}

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--header-height);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(5, 0, 16, 0.55) 0%,
    rgba(5, 0, 16, 0.3) 35%,
    rgba(5, 0, 16, 0.85) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* One centred stack: wordmark, then the date and location, then the CTA.
     .hero already centres this block in the viewport. */
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
  max-width: var(--max-width);
  width: 100%;
}

.hero-logo {
  width: clamp(280px, 52vw, 620px);
  height: auto;
  filter: drop-shadow(0 6px 24px rgba(5, 0, 16, 0.9));
  animation:
    hero-logo-in 1100ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both,
    hero-logo-glow 7s ease-in-out 1400ms infinite;
}

/* The wordmark is the first thing in the frame, so it arrives rather than
   appears — a slow settle that reads as intentional, not as a page still
   loading. Runs once; `both` holds the from-state before the delay elapses so
   there is no flash of the final position first. */
@keyframes hero-logo-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* A slow bloom behind the letterforms. 7s and a small radius delta on purpose:
   it should register as atmosphere, not as a blinking element competing with
   the Get Tickets button below it. */
@keyframes hero-logo-glow {
  0%, 100% {
    filter: drop-shadow(0 6px 24px rgba(5, 0, 16, 0.9))
            drop-shadow(0 0 18px rgba(139, 0, 255, 0.28));
  }
  50% {
    filter: drop-shadow(0 6px 24px rgba(5, 0, 16, 0.9))
            drop-shadow(0 0 34px rgba(139, 0, 255, 0.5));
  }
}

.hero-meta {
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--brand-lime);
  text-align: center;
  text-shadow: 0 2px 12px rgba(5, 0, 16, 0.95);
}

/* --- Poster, in the About section --- */
.about-poster {
  margin: 0;
}
.about-poster img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 12px 48px rgba(5, 0, 16, 0.7);
}
.about-poster figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}


/* --- Buttons --- */
.btn-primary {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-magenta));
  color: white;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(139, 0, 255, 0.3);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(139, 0, 255, 0.5);
}

.btn-hero {
  font-size: 1.1rem;
  padding: 16px 40px;
}

}

/* --- About --- */
.about {
  padding: 80px 0;
  background: var(--bg-dark);
}
.about-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  grid-template-rows: auto 1fr;
  gap: 1.25rem 2rem;
  align-items: stretch;
}
.about-copy {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}
.about-poster {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 100%;
  max-width: 340px;
  justify-self: end;
  align-self: start;
}
.about-lead {
  font-size: 1.25rem;
  color: var(--accent-cyan);
  margin-bottom: 0;
  line-height: 1.5;
}
.about-copy p,
.about-text p {
  margin-bottom: 0;
  color: var(--text-secondary);
}
/* Facts sit under the story, sharing the poster’s height so the left column
   does not leave a hole beside the artwork. */
.about-facts {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  align-self: end;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow: hidden;
}
.about-facts > div {
  background: var(--bg-card);
  padding: 16px 14px;
  text-align: center;
}
.about-highlights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 1.25rem;
}
.about-facts dt {
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.about-facts dd {
  margin: 6px 0 0;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  letter-spacing: 1px;
  color: var(--brand-lime);
}
.about-facts dd small {
  display: block;
  font-family: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}
.about-highlight img {
  width: 100%;
  /* Fixed 4:3 box: the four source derivatives range from 480x270 to 278x360,
     so a shared aspect-ratio keeps the grid rows even and reserves space before load. */
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
}

/* --- Lineup --- */
.lineup {
  padding: 80px 0;
  background: var(--bg-darkest);
}
.lineup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 2rem;
}
.artist-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}
.artist-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-cyan);
  box-shadow: 0 8px 24px var(--glow-purple);
}
.artist-card-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.artist-card-body {
  padding: 12px;
  text-align: center;
}
.artist-card-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.artist-card-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}
/* Stand-in tile for acts that have not been announced. Drawn in CSS so it sits
   in the dark palette instead of punching a white square into the grid. */
.artist-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(139, 0, 255, 0.32), transparent 68%),
    linear-gradient(135deg, var(--bg-card), var(--bg-card-hover));
  border-bottom: 1px solid var(--border-subtle);
}
.artist-card-placeholder span {
  font-family: var(--font-heading);
  font-size: 3.25rem;
  line-height: 1;
  color: var(--brand-lime);
  opacity: 0.85;
  text-shadow: 0 0 18px rgba(209, 210, 47, 0.35);
}
.lineup-disclaimer {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  padding: 12px;
  border-top: 1px solid var(--border-subtle);
}

/* --- Tickets --- */
.tickets {
  padding: 80px 0;
  background: var(--bg-dark);
}
/* Sub-headings inside the Tickets section. Deliberately smaller and lime rather
   than another cyan section-heading, so the two groups read as parts of one
   section instead of as two new sections. */
.ticket-group-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--brand-lime);
  text-align: center;
  margin: 0 0 1.25rem;
}

/* The second group needs air between it and the grid above it. */
.tickets-grid + .ticket-group-heading {
  margin-top: 3rem;
}

.tickets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 2rem;
}
.ticket-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.3s, transform 0.3s;
}
.ticket-card:hover {
  border-color: var(--accent-cyan);
  transform: translateY(-2px);
}
.ticket-card.coming-soon {
  opacity: 0.7;
  border-style: dashed;
}
/* Every line inside a ticket card starts on the same left edge — the status badge,
   the name, the price, the bullets and the button. The name used to be centred
   while everything under it was flush left, which read as a layout bug. */
.ticket-name {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text-primary);
  text-align: left;
}
.ticket-price {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--accent-cyan);
}
.ticket-price small {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}
.ticket-fee {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.ticket-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  flex: 1;
}
/* The tick and the warning sit in a shared 20px gutter, so both blocks start on the
   card's left edge and their wrapped lines hang under the text rather than under
   the marker. Before this, the tick line alone was indented 20px. */
.ticket-includes,
.ticket-excludes {
  position: relative;
  font-size: 0.85rem;
  line-height: 1.5;
  padding-left: 20px;
}
.ticket-includes::before,
.ticket-excludes::before {
  position: absolute;
  left: 0;
  top: 0;
}
.ticket-includes {
  color: var(--accent-green);
}
.ticket-includes::before {
  content: '\2714';
}
.ticket-excludes {
  color: var(--accent-magenta-text);
}
.ticket-excludes::before {
  content: '\26A0';
}
/* Ticket-level caveat note and the data-load failure message. Both are small
   text, so they use the AA-safe magenta rather than the saturated brand token. */
.ticket-note {
  font-size: 0.85rem;
  color: var(--accent-magenta-text);
}
.load-error {
  color: var(--accent-magenta-text);
  padding: 1rem;
}
.ticket-status {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.ticket-status.on-sale {
  background: var(--accent-green);
  color: var(--bg-darkest);
}
.ticket-status.coming-soon {
  background: var(--text-muted);
  color: var(--bg-darkest);
}
/* Enquiry-only stays: real and bookable, just not through the cart, so this reads
   as live rather than greyed out like coming-soon. */
.ticket-status.on-request {
  background: var(--accent-cyan);
  color: var(--bg-darkest);
}
.ticket-status.sold-out {
  background: #9b1b1b;
  color: #fff;
}
.ticket-cta {
  margin-top: auto;
}
.ticket-cta a {
  display: block;
  text-align: center;
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-magenta));
  color: white;
  padding: 12px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  min-height: 44px;
  line-height: 20px;
}
.ticket-cta-disabled {
  display: block;
  text-align: center;
  background: var(--bg-card-hover);
  color: var(--text-muted);
  padding: 12px;
  border-radius: 6px;
  font-weight: 700;
  min-height: 44px;
  line-height: 20px;
  border: 1px dashed var(--text-muted);
}
.tickets-note {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

/* --- Accommodation --- */
.accommodation {
  padding: 80px 0;
  background: var(--bg-darkest);
}
.accommodation-intro {
  max-width: 64ch;
  margin-bottom: 2rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
/* The stay window is a fact people scan for, not prose — it gets a pill so it
   survives being skimmed past. */
.stay-period {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 12px;
  border: 1px solid var(--border-active);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-cyan);
  white-space: nowrap;
}
/* The home page carries accommodation as two summary blocks rather than every
   option, so the two categories sit side by side and the detail lives on the
   stay page behind one button. */
.stay-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.stay-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  min-width: 0;
  height: 100%;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.stay-summary:hover {
  border-color: var(--accent-cyan);
  transform: translateY(-2px);
}
/* Both summary boxes share one set of rows, so the heading, the blurb, the price
   and the tick list start at the same height in each. Browsers without subgrid
   keep the plain flex column above. */
@supports (grid-template-rows: subgrid) {
  .stay-summary-grid {
    grid-template-rows: auto;
  }
  .stay-summary {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 10px;
  }
}
.stay-summary-name {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--brand-lime);
  text-align: center;
}
/* Everything in the box is centred on one axis rather than a centred heading over
   flush-left prose. The tick list centres as a block but keeps its text left, so
   the ticks themselves stay in a column. */
.stay-summary-blurb {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: center;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}
#accommodation .currency-switch {
  margin: 0 0 20px;
}
.stay-summary-price {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--accent-cyan);
  text-align: center;
}
.stay-summary-price small {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
}
.stay-summary-features {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  margin: 4px auto 0;
  width: fit-content;
  max-width: 100%;
}
.stay-summary-features li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.stay-summary-features li::before {
  content: '✔';
  position: absolute;
  left: 0;
  color: var(--accent-green);
}
.stay-summary .fx-note {
  margin-top: auto;
  padding-top: 12px;
  text-align: center;
}
.accommodation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.stay-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  transition: border-color 0.3s, transform 0.3s;
}
.stay-card:hover {
  border-color: var(--accent-cyan);
  transform: translateY(-2px);
}
/* Status pill and luxury tier share one line, so the tier reads as a property of
   the card rather than as another section heading above it. */
.stay-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.stay-tier-label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-lime);
}
.stay-card.coming-soon {
  opacity: 0.75;
  border-style: dashed;
}
.stay-name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-primary);
  text-align: center;
}
.stay-tagline {
  font-size: 0.95rem;
  color: var(--accent-purple-text);
}
.stay-price {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--accent-cyan);
}
.stay-price small {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
}
.stay-price-tba {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-muted);
}
.stay-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.stay-features {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
}
.stay-features li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.stay-features li::before {
  content: '✔';
  position: absolute;
  left: 0;
  color: var(--accent-green);
}
/* A tick would be a promise on an option that isn't bookable yet. */
.stay-card.coming-soon .stay-features li::before {
  content: '•';
  color: var(--text-muted);
}
/* Pushed to the card foot so the buttons line up across cards of unequal height. */
.stay-cta {
  margin-top: auto;
  align-self: flex-start;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 26px;
  background: transparent;
  border: 1px solid var(--border-active);
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-cyan);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}
.btn-ghost:hover {
  background: rgba(0, 212, 255, 0.1);
  border-color: var(--accent-cyan);
}
.accommodation-note {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.accommodation-more {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
/* Section headings are left-aligned, so a centred subtitle under one reads as a
   mistake. Only the accommodation page pairs the two. */
#stay-packages .section-subtitle {
  max-width: 68ch;
  text-align: left;
}
/* Single outbound CTA per ticket card now that checkout is entirely on Wix. */
.ticket-cta-btn {
  text-align: center;
}

/* --- Gallery --- */
.gallery {
  padding: 80px 0;
  background: var(--bg-darkest);
}
.gallery-editions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.gallery-edition {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  transition: transform 0.3s, border-color 0.3s;
}
.gallery-edition:hover {
  border-color: var(--accent-cyan);
  transform: translateY(-4px);
}
.gallery-cover {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  cursor: pointer;
}
.gallery-info {
  padding: 16px;
}
.gallery-title {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.gallery-location {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.gallery-year {
  font-size: 0.85rem;
  color: var(--accent-cyan);
}
/* Native dialog-based gallery modal — keyboard accessible */
dialog.gallery-modal {
  border: none;
  background: rgba(0, 0, 0, 0.92);
  padding: 20px;
  /* inset:0 rather than 100vw/100vh: 100vw includes the scrollbar gutter and can
     push a horizontal scrollbar onto the page while the dialog is open. */
  inset: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  color: var(--text-primary);
}
dialog.gallery-modal::backdrop {
  background: rgba(0, 0, 0, 0.85);
}
.gallery-modal-content {
  max-width: 800px;
  width: 100%;
  text-align: center;
  margin: auto;
}
.gallery-modal-content img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  aspect-ratio: auto;
}
.gallery-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-modal-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}
.gallery-modal-nav button {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
  min-height: 44px;
}

/* --- Practical Info --- */
.practical-info {
  padding: 80px 0;
  background: var(--bg-dark);
}
.practical-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: stretch;
}
.practical-col {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--border-subtle);
}
.practical-col.confirmed {
  background: rgba(0, 255, 157, 0.05);
  border-color: rgba(0, 255, 157, 0.2);
}
.practical-col.coming-soon {
  background: rgba(122, 107, 154, 0.05);
  border-color: rgba(122, 107, 154, 0.2);
}
.practical-col h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.practical-col.confirmed h3 { color: var(--accent-green); }
.practical-col.coming-soon h3 { color: var(--text-muted); }
.practical-col ul {
  list-style: none;
  flex: 1;
}
.practical-col li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.practical-col li:last-child {
  border-bottom: none;
}

/* --- FAQ --- */
.faq {
  padding: 80px 0;
  background: var(--bg-darkest);
}
.faq-list {
  max-width: 800px;
  margin: 0 auto;
}
.faq-item {
  margin-bottom: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-card);
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  color: var(--text-primary);
  padding: 18px 24px;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  gap: 12px;
}
.faq-question:hover {
  background: var(--bg-card-hover);
}
.faq-question .faq-icon {
  flex-shrink: 0;
  font-size: 1.5rem;
  color: var(--accent-cyan);
  transition: transform 0.3s;
}
.faq-item.open .faq-question .faq-icon {
  transform: rotate(45deg);
}
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
  padding: 0 24px;
}
.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}
.faq-answer > p {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 0.95rem;
  padding-bottom: 0;
}
.faq-item.open .faq-answer > p {
  padding-bottom: 18px;
}

/* --- Contact --- */
.contact {
  padding: 64px 0;
  background: var(--bg-darkest);
}
.contact-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--bg-card);
  overflow: hidden;
  max-width: 920px;
  margin: 0 auto;
}
.contact-grid {
  margin-bottom: 0;
  padding: 24px;
}
.contact-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  min-width: 0;
  min-height: 120px;
  height: 100%;
  padding: 16px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-darkest);
}
.contact-item h3 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0;
  color: var(--accent-cyan);
}
.contact-item a {
  color: var(--text-primary);
  text-decoration: none;
  font-size: 1rem;
  word-break: break-word;
}
.contact-item a:hover {
  color: var(--accent-cyan);
}
.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.social-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 8px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  min-height: 44px;
  transition: border-color 0.3s, color 0.3s;
}
.social-link:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}
.social-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.contact-cta {
  text-align: center;
  padding: 20px 24px 24px;
  border: 0;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
}
.contact-cta-text {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

/* --- Footer --- */
.site-footer {
  background: var(--bg-darkest);
  border-top: 1px solid var(--border-subtle);
  padding: 40px 0 20px;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.footer-brand {
  flex: 0 1 auto;
  min-width: 0;
}
.footer-name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  letter-spacing: 2px;
  margin-bottom: 4px;
  color: var(--brand-lime);
}
#contact-heading {
  color: var(--brand-lime);
}
.footer-tagline {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.footer-links {
  display: flex;
  gap: 16px 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-links a,
.footer-links .footer-here {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
}
.footer-links a:hover {
  color: var(--accent-cyan);
}
.footer-social {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.social-icon-sm {
  color: var(--text-secondary);
  transition: color 0.3s;
}
.social-icon-sm:hover {
  color: var(--accent-cyan);
}
.footer-bottom {
  border-top: 1px solid var(--border-subtle);
  padding-top: 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.footer-bottom a {
  color: var(--accent-cyan);
}

/* --- Mobile CTA Bar --- */
.mobile-cta-bar {
  position: fixed;
  display: none;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: rgba(5, 0, 16, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-subtle);
  z-index: 90;
}
.btn-sticky {
  display: block;
  text-align: center;
  width: 100%;
}

/* --- Responsive Breakpoints --- */

/* Tablet landscape (1024px) */
@media (max-width: 1024px) {
  .hero-content {
    gap: 2rem;
  }
}

/* Tablet portrait (768px) */
@media (max-width: 768px) {
  .nav-desktop { display: none; }
  .btn-tickets-header { display: none; }
  .nav-toggle { display: flex; }
  .mobile-cta-bar:not([hidden]) { display: block; }

  .hero-content {
    gap: 1.5rem;
  }
  .hero-logo {
    width: min(78vw, 460px);
  }

  .about-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .about-copy,
  .about-poster,
  .about-facts {
    grid-column: 1;
    grid-row: auto;
  }
  .about-poster {
    justify-self: center;
  }
  .about-highlights {
    grid-template-columns: 1fr 1fr;
  }

  .practical-grid {
    grid-template-columns: 1fr;
  }

  .stay-summary-grid {
    grid-template-columns: 1fr;
  }

  .contact-info {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .contact-panel {
    max-width: none;
  }

  .lineup-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }
}

/* Mobile (375px) */
@media (max-width: 480px) {
  .container { padding: 0 16px; }

  .hero-logo { width: 84vw; }

  .section-heading { font-size: 1.5rem; }

  .lineup-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .artist-card-image { height: 140px; }
  .artist-card { min-height: 180px; }

  .tickets-grid {
    grid-template-columns: 1fr;
  }

  .gallery-editions {
    grid-template-columns: 1fr;
  }

  .about-highlights {
    grid-template-columns: 1fr;
  }

  .footer-links {
    justify-content: center;
  }
}

/* Landscape phone risk */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: 120vh;
    padding-top: calc(var(--header-height) + 20px);
  }
  .hero-content {
    gap: 1rem;
  }
  .hero-logo {
    width: 320px;
  }
}

/* --- Reduced Motion --- */
/* Targeted overrides: only disable the specific animations that move, not all transitions globally */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-logo {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .faq-answer { transition: none; }
  .faq-icon { transition: none; }
  .artist-card,
  .ticket-card,
  .stay-card,
  .gallery-edition,
  .btn-primary,
  .btn-tickets-header {
    transition: none;
  }
  .artist-card:hover,
  .ticket-card:hover,
  .stay-card:hover,
  .gallery-edition:hover,
  .btn-primary:hover,
  .btn-tickets-header:hover {
    transform: none;
  }
}

/* ============================================
   Cart
   Ticket selections are collected here and then handed off to the Wix Events
   checkout. Quantities do not survive the handoff — see .cart-note in the panel.
   ============================================ */

/* --- Per-ticket quantity + add control --- */
.ticket-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qty-stepper {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 2px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  overflow: hidden;
}
.qty-stepper button {
  width: 44px;
  min-height: 44px;
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.qty-stepper button:hover:not(:disabled) {
  background: var(--brand-lime);
  color: var(--bg-darkest);
}
.qty-stepper button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.qty-value {
  min-width: 40px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.btn-add-cart {
  display: block;
  width: 100%;
  background: var(--brand-lime);
  color: var(--bg-darkest);
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  min-height: 44px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-add-cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(209, 210, 47, 0.35);
}
.btn-add-cart.added {
  background: var(--accent-green);
}
.ticket-buy-link {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-decoration: underline;
}
.ticket-buy-link:hover { color: var(--brand-lime); }

/* --- Header cart button --- */
.cart-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.cart-toggle:hover,
.cart-toggle.has-items {
  color: var(--brand-lime);
  border-color: var(--brand-lime);
}
.cart-toggle svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--brand-lime);
  color: var(--bg-darkest);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- Panel --- */
.cart-backdrop {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(5, 0, 16, 0.75);
}
.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  width: min(400px, 100vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
  border-left: 1px solid var(--border-subtle);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
}
.cart-panel[hidden],
.cart-backdrop[hidden] { display: none; }

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-subtle);
}
.cart-head h2 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-lime);
}
.cart-close {
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.cart-close:hover { color: var(--brand-lime); }

.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 24px;
}
.cart-empty {
  padding: 3rem 0;
  text-align: center;
  color: var(--text-muted);
}
.cart-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.cart-line-name {
  font-weight: 700;
  color: var(--text-primary);
}
.cart-line-unit {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.cart-line-total {
  grid-column: 2;
  grid-row: 1;
  font-weight: 700;
  color: var(--brand-lime);
  font-variant-numeric: tabular-nums;
}
.cart-line-controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.cart-remove {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent-magenta-text);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

.cart-foot {
  padding: 20px 24px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-darkest);
}
.cart-foot[hidden] { display: none; }
.cart-totals {
  margin-bottom: 16px;
}
.cart-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.cart-totals dd { font-variant-numeric: tabular-nums; }
.cart-grand {
  margin-top: 8px;
  padding-top: 12px !important;
  border-top: 1px solid var(--border-subtle);
  font-size: 1.15rem !important;
  font-weight: 700;
  color: var(--text-primary) !important;
}
.cart-grand dd { color: var(--brand-lime); }

.cart-checkout {
  display: block;
  width: 100%;
  text-align: center;
}
.cart-note {
  margin-top: 12px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .cart-panel { width: 100vw; }
}


/* ============================================
   Lineup preview + full lineup page
   The homepage carries a curated preview; the whole bill lives on lineup.html.
   ============================================ */
.lineup-more {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
.lineup-count {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Compact banner for interior pages — the homepage hero would dwarf them. */
.page-hero {
  position: relative;
  padding: calc(var(--header-height) + 56px) 0 56px;
  background: var(--bg-darkest);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0.35;
}
.page-hero .container {
  position: relative;
  z-index: 1;
  text-align: center;
}
.page-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 6vw, 4rem);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin: 0;
}
.page-hero p {
  margin: 12px auto 0;
  max-width: 60ch;
  color: var(--text-secondary);
}
.back-link {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
}
.back-link:hover { color: var(--brand-lime); }

/* --- Ticket card: Add to Cart and Buy Now, side by side --- */
.ticket-btn-row {
  display: flex;
  gap: 10px;
}
.ticket-btn-row > * {
  flex: 1 1 0;
  min-width: 0;
}
.btn-buy-now {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-magenta));
  color: #fff;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  min-height: 44px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-buy-now:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(139, 0, 255, 0.45);
}

@media (max-width: 380px) {
  .ticket-btn-row { flex-direction: column; }
}

/* Current page in the footer link row — present but not a link. */
.footer-here {
  color: var(--text-muted);
  cursor: default;
}

/* The preview grid is fixed-column so eight cards always fill whole rows —
   auto-fill leaves a ragged last row at some widths. The full lineup page
   keeps the flexible auto-fill grid. */
#lineup-grid[data-preview] {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 640px) {
  #lineup-grid[data-preview] { grid-template-columns: repeat(2, 1fr); }
}

/* On the full lineup page the banner already introduces the grid, so drop the
   spacing a section heading would otherwise occupy. */
.page-hero + .lineup { padding-top: 48px; }
.page-hero + .lineup .lineup-grid { margin-top: 0; }


/* About, narrow: text over poster, photos two-up. */
@media (max-width: 900px) {
  .about-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .about-copy,
  .about-poster,
  .about-facts {
    grid-column: 1;
    grid-row: auto;
  }
  .about-poster { max-width: 340px; margin-inline: auto; justify-self: center; }
  .about-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-highlights { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   Gust Beach Front Stays — stays grid, detail
   pages, room cards, currency switch, lightbox
   ============================================ */

/* --- Currency switch --- */
.currency-switch {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 20px 0 28px;
  flex-wrap: wrap;
}
.currency-switch-inline {
  justify-content: flex-start;
  margin: 12px 0;
}
.currency-btn {
  min-height: 36px;
  padding: 6px 16px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.currency-btn[aria-pressed="true"] {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: rgba(0, 212, 255, 0.08);
}
.currency-btn:hover {
  border-color: var(--accent-cyan);
}

/* --- FX note --- */
.fx-note {
  margin-top: 16px;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

/* --- Stays grid (accommodation page) --- */
.stays-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 28px;
  align-items: stretch;
}
.stay-property {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  overflow: hidden;
  min-width: 0;
  box-shadow: 0 10px 28px rgba(5, 0, 16, 0.35);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.stay-property:hover {
  border-color: rgba(209, 210, 47, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(5, 0, 16, 0.5);
}
.stay-property-image {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #0a0118;
}
.stay-property-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.stay-property:hover .stay-property-image img {
  transform: scale(1.04);
}
.stay-property-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: 22px 22px 22px;
  text-align: center;
}
.stay-property-code {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  letter-spacing: 1px;
  color: var(--brand-lime);
  text-align: center;
  margin: 0;
  padding: 0;
}
.stay-star-label {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: inline-block;
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(10, 1, 24, 0.82);
  border: 1px solid rgba(232, 196, 104, 0.45);
  color: #e8c468;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: none;
  text-align: left;
}
.stay-hero-stars {
  color: #e8c468;
  letter-spacing: 0.12em;
}
.stay-blurb {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-secondary);
  padding: 0;
  margin: 0;
  display: block;
  overflow: visible;
  text-align: center;
}
.stay-spec-line {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-muted);
  padding: 0;
  margin: 0;
  text-align: center;
}
.stay-property-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}
.stay-property .stay-price {
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--accent-cyan);
  text-align: center;
}
.stay-property .stay-price small {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stay-view-btn {
  margin: 0;
  align-self: stretch;
  text-align: center;
  padding: 12px 18px;
  font-size: 0.9rem;
}

#stay-types-heading,
#beach-front-heading {
  color: var(--brand-lime);
}
#accommodation .accommodation-intro,
#beach-front .section-subtitle {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}
#stay-packages-grid .ticket-card {
  text-align: left;
}

/* --- Stay detail page --- */
.stay-detail-content {
  padding: 40px 0 80px;
  background: var(--bg-darkest);
}
.stay-detail-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.stay-block {
  padding: 28px 28px 32px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  text-align: center;
}
.stay-block-heading {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-primary);
  text-align: center;
  margin: 0 0 1.15rem;
}
.stay-detail-heading {
  margin: 40px 0 20px;
}
.stay-detail-blurb {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
}
.stay-block .facility-chips {
  justify-content: center;
}

/* --- Overview block: blurb, three facts, amenity cloud --- */
/* The blurb and the essentials used to be two separate blocks, with amenities as
   one of three equal columns. The chip list ran long and left the two short cards
   beside it three-quarters empty. Facts are now a compact three-up row of equal
   cards, and the chips get the full width underneath. */
.stay-overview .stay-detail-blurb {
  margin-bottom: 26px;
}
.stay-essentials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.stay-essential-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 20px 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-darkest);
}
/* Check-in and check-out as a label/value pair, so the third card carries the same
   visual weight as the two prose cards next to it. */
.stay-fact-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}
.stay-fact-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.88rem;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(139, 0, 255, 0.08);
}
.stay-fact-row > span:first-child {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  white-space: nowrap;
}
.stay-fact-row > span:last-child {
  color: var(--text-primary);
  font-weight: 700;
  text-align: right;
}
.stay-amenities {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border-subtle);
}
.stay-amenities-heading {
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--brand-lime);
  margin: 0 0 14px;
  text-align: center;
}
.stay-essential-card h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--brand-lime);
  margin: 0;
  text-align: center;
}
.stay-essential-lead {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
}
.stay-essential-card > p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.55;
  text-align: center;
}
.stay-essential-card .facility-chips {
  margin-top: 4px;
}
@media (max-width: 900px) {
  .stay-essentials-grid {
    grid-template-columns: 1fr;
  }
}
/* Room cards are centred end to end — name, specs, price, chips and button — so
   nothing inside the box sits on a different edge to the line above it. */
.stay-block .room-card {
  text-align: center;
  align-items: center;
}
.stay-block .room-card-header {
  justify-content: center;
  width: 100%;
}
.stay-block .room-amenities-list,
.stay-block .facility-chips {
  justify-content: center;
}
.stay-block .room-perk,
.stay-block .room-amenities-toggle {
  align-self: center;
}

/* --- Gallery grid --- */
.stay-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 0;
}
.stay-gallery-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  transition: border-color 0.2s, transform 0.2s;
}
.stay-gallery-thumb:hover,
.stay-gallery-thumb:focus-visible {
  border-color: var(--accent-cyan);
  transform: scale(1.02);
  outline: none;
}

/* --- Facility chips --- */
.facility-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
}
.facility-chip {
  padding: 6px 14px;
  background: rgba(139, 0, 255, 0.1);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* --- Room cards --- */
.room-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 8px 0 0;
  align-items: stretch;
}
.room-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--bg-darkest);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  min-width: 0;
  height: 100%;
}
.room-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
/* The room category is the heading of its card, so it carries the same yellow the
   stay codes and section headings use elsewhere. */
.room-name {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  letter-spacing: 1px;
  color: var(--brand-lime);
  margin: 0;
  text-align: center;
}
.room-spec {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.room-perk {
  font-size: 0.9rem;
  color: var(--brand-lime);
  font-weight: 700;
  padding: 6px 12px;
  background: rgba(209, 210, 47, 0.08);
  border-radius: 6px;
}
.room-price {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--accent-cyan);
  text-align: center;
}
.room-price small {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
}
.room-amenities-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
}
.amenity-chip {
  padding: 4px 10px;
  background: rgba(0, 212, 255, 0.06);
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: 16px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.amenity-hidden {
  display: none;
}
.amenity-hidden.amenity-revealed {
  display: inline-block;
}
.room-amenities-toggle {
  align-self: flex-start;
  min-height: 32px;
  padding: 4px 12px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--accent-purple-text);
  cursor: pointer;
  transition: border-color 0.2s;
}
.room-amenities-toggle:hover {
  border-color: var(--accent-cyan);
}
.room-enquire-btn,
.room-sold-out-banner {
  margin-top: auto;
  align-self: stretch;
  text-align: center;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.room-sold-out-banner {
  padding: 12px 18px;
  border-radius: 8px;
  background: #9b1b1b;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
}
/* A room that sold out before we had its specifications has nothing to print
   between its name and its badge. The note fills that gap honestly and the minimum
   height keeps the card the same size as the bookable ones beside it. */
.room-card-sold-out {
  min-height: 260px;
  border-style: dashed;
}
.room-sold-out-note {
  margin: 0 auto;
  max-width: 30ch;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.stay-block .currency-switch {
  margin: 0 0 20px;
}
.stay-block .stay-check-in-out {
  margin: 0;
}
.stay-block .fx-note {
  margin-top: 16px;
}

/* --- Check-in / check-out --- */
.stay-check-in-out {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin: 24px 0;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}
.stay-check-in-out p {
  font-size: 0.95rem;
  color: var(--text-secondary);
}
.stay-check-in-out strong {
  color: var(--text-primary);
}

/* --- Stay detail CTA --- */
.stay-detail-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
}

/* --- Gallery lightbox --- */
.stay-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(5, 0, 16, 0.95);
  align-items: center;
  justify-content: center;
}
.stay-lightbox-open {
  display: flex;
}
.stay-lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
}
.stay-lightbox-close,
.stay-lightbox-prev,
.stay-lightbox-next {
  position: absolute;
  background: transparent;
  border: 1px solid var(--border-active);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--accent-cyan);
  cursor: pointer;
  transition: background 0.2s;
}
.stay-lightbox-close:hover,
.stay-lightbox-prev:hover,
.stay-lightbox-next:hover {
  background: rgba(0, 212, 255, 0.1);
}
.stay-lightbox-close {
  top: 24px;
  right: 24px;
}
.stay-lightbox-prev {
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
}
.stay-lightbox-next {
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

/* --- Responsive: stays grid --- */
@media (max-width: 900px) {
  .stays-grid {
    grid-template-columns: 1fr;
  }
  .room-cards-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .stays-grid {
    grid-template-columns: 1fr;
  }
  .room-cards-grid {
    grid-template-columns: 1fr;
  }
  .stay-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
@media (max-width: 520px) {
  .stays-grid {
    grid-template-columns: 1fr;
  }
  .stay-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stay-detail-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .stay-detail-cta .btn-primary,
  .stay-detail-cta .btn-ghost {
    text-align: center;
  }
}