/* ==========================================================================
   CRIER DESIGN SYSTEM — Web Translation
   Brutalist event listing aesthetic: dark, punk, concert poster, grunge
   Source: mobile/src/theme.ts, EventCard.tsx, MenuModal.tsx
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS
   - Archivo Black: Display/headlines. ALL CAPS. Event names, menu items, hero text.
   - IBM Plex Mono: Everything else. Labels, dates, times, body, badges, meta.
     400 weight = secondary/muted text (venue names, captions)
     700 weight = primary data text (dates, times, CTAs, badge labels)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;700&display=swap');

/* --------------------------------------------------------------------------
   CSS CUSTOM PROPERTIES (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* Primary palette */
  --color-primary: #FF6262;          /* Coral red — main accent, error states, sold-out badges */
  --color-secondary: #35C2CA;        /* Cyan — secondary accent, free badges, partner venues, success */

  /* Backgrounds */
  --color-bg: #000000;               /* Pure black page background */
  --color-surface: #111111;          /* Card surface / elevated panels */
  --color-surface-alt: #1a1a1a;      /* Alternate surface (hover states, nested panels) */

  /* Borders */
  --color-border: #333333;           /* Default border */
  --color-border-light: #444444;     /* Lighter border for subtle dividers */
  --color-border-card: rgba(255, 255, 255, 0.5);  /* Card border — semi-transparent white */

  /* Text hierarchy */
  --color-text: #ffffff;             /* Primary text — event names, headings */
  --color-text-secondary: #999999;   /* Secondary text — less important info */
  --color-text-muted: #666666;       /* Muted text — timestamps, error details */
  --color-text-50: rgba(255, 255, 255, 0.5);  /* 50% white — venue names, labels, captions */

  /* Status / semantic colors */
  --color-free: #DEF161;             /* FREE badge background (lime green) */
  --color-promoted: #FF9500;         /* PROMOTED badge (orange) */
  --color-boost: #DEF161;            /* BOOSTED badge (lime green) */
  --color-sold-out: #f22647;         /* SOLD OUT badge (hot red) */
  --color-low-tix: #9146FF;          /* LOW TIX badge (purple) */
  --color-age-18: #C4A1FF;           /* 18+ badge (lavender) */
  --color-age-21: #70CDDE;           /* 21+ badge (light teal) */

  /* Typography — scale derived from mobile fontSizes (scaled up for desktop) */
  --font-display: 'Archivo Black', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --fs-xs: 11px;       /* Badge text, micro labels */
  --fs-sm: 12px;       /* Date/time in card footer, filter chips, footer links */
  --fs-md: 14px;       /* Body text, venue names on cards */
  --fs-lg: 16px;       /* Larger body, venue name on detail pages */
  --fs-xl: 22px;       /* Section headings, card event titles on web */
  --fs-xxl: 28px;      /* Page headings, "HOW IT WORKS" */
  --fs-hero: 34px;     /* Event card titles (matches mobile BASE_TITLE_SIZE) */
  --fs-display: 64px;  /* Marquee text, splash displays */
  --fs-menu: 32px;     /* Menu item text (Archivo Black) */

  /* Spacing — consistent with mobile spacing tokens */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-xxl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;

  /* Shadows — brutalist: hard offset, no blur */
  --shadow-sm: 3px 3px 0 #ffffff;
  --shadow-md: 4px 4px 0 #ffffff;
  --shadow-lg: 6px 6px 0 #ffffff;
  --shadow-primary: 3px 3px 0 rgba(255, 98, 98, 0.5);
  --shadow-secondary: 3px 3px 0 rgba(53, 194, 202, 0.5);

  /* Card dimensions — bold, generous sizing */
  --card-min-height: 320px;
  --card-image-size: 140px;
  --card-padding: 20px;
  --card-gap: 24px;
  --card-border-width: 1.5px;

  /* Layout */
  --content-max-width: 720px;        /* Single-column feed, phone-blown-up feel */
  --content-padding: 22px;           /* Matches mobile paddingHorizontal */
  --header-height: 80px;
}


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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.5px;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* --------------------------------------------------------------------------
   TYPOGRAPHY HIERARCHY

   Archivo Black: ALWAYS uppercase, tight letter-spacing, used for:
     - Event titles (h1, h2)
     - Menu items
     - Hero/display text
     - Section headings

   IBM Plex Mono 700: ALWAYS uppercase, wide letter-spacing, used for:
     - Dates, times (data text)
     - CTAs ("GET TICKETS", "BACK TO TOP")
     - Badge labels ("PROMOTED", "SOLD OUT")
     - Filter chips

   IBM Plex Mono 400: ALWAYS uppercase, used for:
     - Venue names
     - Captions
     - Footer links
     - Secondary labels ("TODAY", "TOMORROW")
   -------------------------------------------------------------------------- */

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 400; /* Archivo Black only has one weight */
  line-height: 0.92;     /* Tight: 92% like mobile TITLE_LINE_HEIGHT_MULTIPLIER */
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-text);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xxl);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text);
}

h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text);
}

/* Body text — IBM Plex Mono 400 */
p, .body-text {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
}

/* Labels — venue names, captions, meta */
.label, .venue-name, .caption {
  font-family: var(--font-mono);
  font-size: 15px;  /* Matches mobile BASE_VENUE_SIZE */
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-50);
  line-height: 1.2;
}

/* Data text — dates, times, CTAs */
.data-text, .date-time, .cta-text {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text);
}

/* Micro text — badge labels */
.micro-text {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   PAGE LAYOUT
   -------------------------------------------------------------------------- */
.page-wrapper {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--content-padding);
  min-height: 100vh;
}


/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.site-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--content-padding);
  background-color: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--color-border);
}

.site-header__logo {
  font-family: var(--font-display);
  font-size: var(--fs-xxl);
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-text);
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.site-header__nav-link {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-50);
  transition: color 0.15s;
  cursor: pointer;
}

.site-header__nav-link:hover {
  color: var(--color-text);
}


/* --------------------------------------------------------------------------
   FEATURED CAROUSEL
   White/light background, dark text — the "inverted" card style
   -------------------------------------------------------------------------- */
.featured-carousel {
  margin-bottom: var(--space-xl);
  position: relative;
  overflow: hidden;
}

.featured-card {
  position: relative;
  min-height: 300px;
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* White grunge texture background */
  background-color: #e8e4df;
  background-image: url('/assets/grunge/white-grunge.jpg');
  background-size: cover;
  background-blend-mode: multiply;
  cursor: pointer;
  transition: opacity 0.15s;
}

.featured-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

.featured-card > * {
  position: relative;
  z-index: 1;
}

.featured-card:hover {
  opacity: 0.95;
}

.featured-card__top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-xs);
}

.featured-card__venue {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: var(--space-sm);
  line-height: 1.2;
}

.featured-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 0.92;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #000000;
  margin-bottom: var(--space-md);
  padding-right: 48px; /* Room for save star */
}

.featured-card__tag-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.featured-card__date-label {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
}

.featured-card__bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
}

.featured-card__datetime {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #000000;
  flex: 1;
}

.featured-card__datetime--center {
  text-align: center;
}

.featured-card__tickets {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #000000;
  cursor: pointer;
}


/* --------------------------------------------------------------------------
   EVENT CARD — The core component
   Dark grunge background, white text, brutalist borders

   Structure:
   +--------------------------------------------------+
   | [BADGES]                               [STAR]    |  <- top row (optional)
   |                                                   |
   | VENUE NAME (50% white, mono 400, 15px)            |  <- venue row
   | EVENT TITLE                                       |  <- Archivo Black, 34px
   | IN ALL CAPS                                       |
   |                                                   |
   | TODAY                              FREE . 21+     |  <- tag row (optional)
   | FRI MAY 23     8:00 PM       GET TICKETS ->       |  <- bottom row
   +--------------------------------------------------+

   Height: ~320px on desktop (276px on mobile, scaled up)
   No border-radius (brutalist, sharp corners)
   Border: 1.5px rgba(255,255,255,0.5)
   -------------------------------------------------------------------------- */
.event-card {
  position: relative;
  min-height: var(--card-min-height);
  margin-bottom: var(--card-gap);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.1s;
  /* No border-radius — brutalist sharp corners */
  border-radius: 0;
}

.event-card:active,
.event-card:hover {
  transform: scale(0.995);
}

/* Card border — overlaid for clean edges over texture */
.event-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--card-border-width) solid var(--color-border-card);
  pointer-events: none;
  z-index: 2;
}

/* Grunge texture background layer */
.event-card__bg {
  position: absolute;
  inset: 0;
  background-color: var(--color-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.7;
}

/* Dark overlay on top of texture */
.event-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

/* Card content — padded, stacked vertically with space-between */
.event-card__content {
  position: relative;
  z-index: 1;
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: var(--card-min-height);
}

/* Top row: badges + save button */
.event-card__top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-xs);
}

/* Badge row */
.event-card__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Middle group: venue + title, vertically centered */
.event-card__middle {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.event-card__middle--no-badges {
  justify-content: flex-start;
  padding-top: var(--space-sm);
}

/* Venue name row */
.event-card__venue-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-sm);
}

.event-card__venue {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-50);
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Partner venue — cyan pill badge */
.event-card__venue--partner {
  background-color: var(--color-secondary);
  color: #000000;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

/* Event title — the dominant element */
.event-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 0.92;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-md);
  padding-right: 48px; /* Clear the save star */
  /* Clamp to 4 lines */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* Tag row: TODAY/TOMORROW + FREE/21+/ALL AGES */
.event-card__tag-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.event-card__date-label {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-50);
}

.event-card__info-tags {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-50);
  margin-left: auto;
}

/* Bottom row: date / time / GET TICKETS */
.event-card__bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
}

.event-card__datetime {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text);
  flex: 1;
  white-space: nowrap;
}

.event-card__datetime--center {
  text-align: center;
}

.event-card__tickets {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
  transition: opacity 0.15s;
}

.event-card__tickets:hover {
  opacity: 0.7;
}

.event-card__tickets-arrow {
  width: 22px;
  height: 22px;
  filter: invert(1); /* White arrow on dark bg */
}

/* Save star — absolute positioned top-right when no badges */
.event-card__save {
  font-size: 24px;
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s;
  line-height: 1;
}

.event-card__save:hover {
  transform: scale(1.15);
}

.event-card__save--absolute {
  position: absolute;
  top: var(--card-padding);
  right: var(--card-padding);
  z-index: 3;
}

/* Pin icon next to venue name */
.event-card__pin {
  color: var(--color-text-50);
  font-size: 14px;
}


/* --------------------------------------------------------------------------
   EVENT CARD — BOOST variant (white border glow)
   -------------------------------------------------------------------------- */
.event-card--boost::before {
  border-width: 2px;
  border-color: #ffffff;
}

.event-card--boost {
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}


/* --------------------------------------------------------------------------
   EVENT CARD — PROMOTED/SPOTLIGHT variant (inverted colors)
   White background, dark text, same structure
   -------------------------------------------------------------------------- */
.event-card--promoted .event-card__bg {
  opacity: 1;
  background-color: transparent;
}

.event-card--promoted .event-card__overlay {
  background: rgba(255, 255, 255, 0.5);
}

.event-card--promoted .event-card__venue {
  color: rgba(0, 0, 0, 0.5);
}

.event-card--promoted .event-card__title {
  color: #000000;
}

.event-card--promoted .event-card__date-label {
  color: rgba(0, 0, 0, 0.5);
}

.event-card--promoted .event-card__info-tags {
  color: rgba(0, 0, 0, 0.5);
}

.event-card--promoted .event-card__datetime {
  color: #000000;
}

.event-card--promoted .event-card__tickets {
  color: #000000;
}

.event-card--promoted .event-card__tickets-arrow {
  filter: none; /* Dark arrow on light bg */
}

.event-card--promoted .event-card__save {
  color: #000000;
}

.event-card--promoted::before {
  border-color: rgba(0, 0, 0, 0.5);
  border-width: 0.5px;
}


/* --------------------------------------------------------------------------
   EVENT CARD — SOLD OUT state (dimmed text)
   -------------------------------------------------------------------------- */
.event-card--sold-out .event-card__title,
.event-card--sold-out .event-card__datetime,
.event-card--sold-out .event-card__tickets,
.event-card--sold-out .event-card__save {
  opacity: 0.3;
}

.event-card--sold-out.event-card--promoted .event-card__title,
.event-card--sold-out.event-card--promoted .event-card__datetime,
.event-card--sold-out.event-card--promoted .event-card__tickets {
  color: rgba(0, 0, 0, 0.3);
}


/* --------------------------------------------------------------------------
   BADGES — Pill-shaped status indicators
   All: border-radius 999px, px 8px, py 2px, IBM Plex Mono 700, 11px
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--promoted {
  background-color: var(--color-promoted);
  color: #ffffff;
}

.badge--boost {
  background-color: var(--color-boost);
  color: #000000;
}

.badge--sold-out {
  background-color: var(--color-sold-out);
  color: #ffffff;
}

.badge--low-tix {
  background-color: var(--color-low-tix);
  color: #ffffff;
}

.badge--free {
  background-color: var(--color-free);
  color: #000000;
}

.badge--age-18 {
  background-color: var(--color-age-18);
  color: #000000;
}

.badge--age-21 {
  background-color: var(--color-age-21);
  color: #000000;
}


/* --------------------------------------------------------------------------
   BUTTONS & CTAs
   -------------------------------------------------------------------------- */

/* Primary button — pill shape, white border, dark bg */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 10px 16px;
  border-radius: 100px;
  border: 0.5px solid var(--color-border-card);
  background-color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-50);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  user-select: none;
}

.btn:hover {
  background-color: var(--color-surface-alt);
  color: var(--color-text);
}

/* Inverted button — white bg, dark text (like date filter chip) */
.btn--inverted {
  background-color: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.btn--inverted:hover {
  background-color: #e0e0e0;
  color: var(--color-bg);
}

/* CTA link-style button (like GET TICKETS) */
.btn--link {
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  color: var(--color-text);
  letter-spacing: 0.5px;
}

.btn--link:hover {
  background: none;
  opacity: 0.7;
}

/* Back to top floating button */
.btn--scroll-top {
  position: fixed;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.btn--scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}


/* --------------------------------------------------------------------------
   FILTER CHIPS — Date/category filters
   -------------------------------------------------------------------------- */
.filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 0.5px solid var(--color-text);
  border-radius: 100px;
  background-color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-bg);
  cursor: pointer;
  position: relative;
}

.filter-chip__close {
  position: absolute;
  right: 16px;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-chip__close::before,
.filter-chip__close::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 1.5px;
  background-color: var(--color-bg);
}

.filter-chip__close::before {
  transform: rotate(45deg);
}

.filter-chip__close::after {
  transform: rotate(-45deg);
}


/* --------------------------------------------------------------------------
   DOTTED LINE SEPARATOR
   The signature Crier divider: evenly spaced 2px dots across the full width
   -------------------------------------------------------------------------- */
.dotted-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  padding: 0;
}

.dotted-line__dot {
  width: 2px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-text-50);
  flex-shrink: 0;
}

/* CSS-only alternative using border */
.dotted-line--border {
  border: none;
  border-top: 2px dotted var(--color-text-50);
  margin-bottom: var(--space-lg);
}


/* --------------------------------------------------------------------------
   MARQUEE — Scrolling stats ticker
   Archivo Black, 26px, white text, full-bleed
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  height: 40px;
  margin: var(--space-md) calc(-1 * var(--content-padding));
  position: relative;
}

.marquee__track {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  animation: marquee-scroll 30s linear infinite;
  white-space: nowrap;
}

.marquee__text {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 40px;
  color: var(--color-text);
  text-transform: uppercase;
  white-space: nowrap;
  padding-right: 0;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


/* --------------------------------------------------------------------------
   MENU OVERLAY
   Full-screen black overlay with staggered slide-in menu items
   -------------------------------------------------------------------------- */
.menu-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--color-bg);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--header-height) + 135px); /* header + spacer from mobile */
}

.menu-items {
  flex: 1;
  padding: var(--space-xl);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: 12px 0;
  cursor: pointer;
  transition: opacity 0.15s;
}

.menu-item:hover {
  opacity: 0.7;
}

.menu-item__label {
  font-family: var(--font-display);
  font-size: var(--fs-menu);
  text-transform: uppercase;
  color: var(--color-text);
}

.menu-item__soon {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-50);
}


/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  padding: var(--space-xl);
}

.site-footer__links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.site-footer__link {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-50);
  cursor: pointer;
  transition: color 0.15s;
}

.site-footer__link:hover {
  color: var(--color-text);
}


/* --------------------------------------------------------------------------
   HOW IT WORKS MODAL
   -------------------------------------------------------------------------- */
.how-it-works {
  width: 88%;
  max-width: 480px;
  background-color: var(--color-bg);
  border: 0.5px solid var(--color-border-card);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.how-it-works__title {
  font-family: var(--font-display);
  font-size: var(--fs-xxl);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-text);
  text-align: center;
}

.how-it-works__step {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.how-it-works__number {
  font-family: var(--font-display);
  font-size: 40px;
  color: var(--color-text);
}

.how-it-works__text {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text);
}

.how-it-works__subtext {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   EMPTY / ERROR STATES
   -------------------------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px var(--space-xl);
  text-align: center;
}

.empty-state__title {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text);
}

.empty-state__subtitle {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-xl);
  text-align: center;
}

.error-state__title {
  font-family: var(--font-display);
  font-size: var(--fs-xxl);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text);
}

.error-state__subtitle {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--color-text-muted);
  margin-top: var(--space-md);
}


/* --------------------------------------------------------------------------
   LOADING / REFRESH STATES
   -------------------------------------------------------------------------- */
.loading-text {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-lg) 0;
}


/* --------------------------------------------------------------------------
   UTILITY CLASSES
   -------------------------------------------------------------------------- */
.text-uppercase { text-transform: uppercase; }
.text-center { text-align: center; }
.text-mono { font-family: var(--font-mono); }
.text-display { font-family: var(--font-display); }
.text-bold { font-weight: 700; }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-50 { color: var(--color-text-50); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* --------------------------------------------------------------------------
   RESPONSIVE BREAKPOINTS — Mobile-first

   Mobile (<480px): Single column, slightly reduced title sizes
   Tablet (480-768px): Full card width, default sizes
   Desktop (768px+): Centered max-width container, generous spacing
   -------------------------------------------------------------------------- */

/* Mobile: tighten up for small screens */
@media (max-width: 479px) {
  :root {
    --fs-hero: 28px;
    --fs-menu: 26px;
    --fs-xxl: 24px;
    --card-min-height: 280px;
    --card-padding: 16px;
    --card-gap: 20px;
    --content-padding: 16px;
  }

  .featured-card {
    min-height: 260px;
    padding: var(--space-lg);
  }

  .featured-card__title {
    font-size: 28px;
  }

  .marquee__text {
    font-size: 22px;
    line-height: 34px;
  }

  .marquee {
    height: 34px;
  }
}

/* Tablet: comfortable reading */
@media (min-width: 480px) and (max-width: 767px) {
  :root {
    --card-min-height: 300px;
  }
}

/* Desktop: centered, luxurious spacing */
@media (min-width: 768px) {
  :root {
    --card-min-height: 340px;
    --card-padding: 24px;
    --card-gap: 28px;
    --content-padding: 0;
  }

  .page-wrapper {
    padding: 0 var(--space-3xl);
  }

  .featured-card {
    min-height: 340px;
  }

  .event-card__title {
    font-size: 38px;
  }

  .featured-card__title {
    font-size: 38px;
  }

  .marquee__text {
    font-size: 30px;
    line-height: 44px;
  }

  .marquee {
    height: 44px;
  }
}

/* Large desktop: max comfort */
@media (min-width: 1024px) {
  :root {
    --content-max-width: 800px;
    --card-min-height: 360px;
  }

  .event-card__title {
    font-size: 42px;
  }

  .featured-card__title {
    font-size: 42px;
  }
}