/* =========================================================================
   AltStar Expo + Awards 2026 — Stylesheet
   Aesthetic: vintage Vegas neon + zine / street-art. Dark, gritty, alt.
   ========================================================================= */

/* ---------- Reset & tokens ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }

:root {
  --ink: #08070b;
  --ink-2: #11101a;
  --ink-3: #1a1924;
  --paper: #f3eee4;
  --paper-dim: rgba(243, 238, 228, 0.74);
  --paper-faint: rgba(243, 238, 228, 0.42);

  --neon-pink: #ff2e88;
  --neon-magenta: #d6008c;
  --neon-cyan: #00e5ff;
  --neon-yellow: #ffe300;
  --neon-red: #ff2a4a;

  --border: rgba(243, 238, 228, 0.14);
  --border-2: rgba(243, 238, 228, 0.22);

  --font-display: "Bebas Neue", "Anton", Impact, "Arial Black", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --max: 1180px;
  --gutter: clamp(1rem, 3vw, 2rem);
}

body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--paper);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  /* Subtle film-grain + halftone backdrop */
  background-image:
    radial-gradient(ellipse 60% 40% at 12% 8%, rgba(255, 46, 136, 0.18), transparent 70%),
    radial-gradient(ellipse 50% 35% at 90% 6%, rgba(0, 229, 255, 0.14), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255, 42, 74, 0.12), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-attachment: fixed, fixed, fixed, fixed;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: auto, auto, auto, 180px 180px;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--neon-cyan); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
:focus-visible {
  outline: 2px solid var(--neon-yellow);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Typography ---------- */
.display {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 0.95;
  font-weight: 400;
}

h1, h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  line-height: 1;
  font-weight: 400;
}

h1 { font-size: clamp(2.4rem, 7vw, 5.2rem); }
h2 { font-size: clamp(1.9rem, 4.6vw, 3.4rem); }
h3 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); }
p  { font-size: 1.02rem; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--neon-cyan);
}

.text-pink   { color: var(--neon-pink); }
.text-cyan   { color: var(--neon-cyan); }
.text-yellow { color: var(--neon-yellow); }
.text-dim    { color: var(--paper-dim); }

/* ---------- Header / sticky nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(8, 7, 11, 0.78);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.7rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand__mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-magenta));
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.5rem;
  border-radius: 6px;
  transform: rotate(-3deg);
  box-shadow: 0 0 0 2px var(--ink), 0 0 18px rgba(255, 46, 136, 0.6);
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--paper);
}
.brand__name span { color: var(--neon-pink); }

.nav {
  margin-left: auto;
  display: flex;
  gap: 1.2rem;
  align-items: center;
}
.nav__links {
  display: flex;
  gap: 1.1rem;
  list-style: none;
}
.nav__links a {
  color: var(--paper-dim);
  font-size: 0.82rem;
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav__links a:hover { color: var(--neon-yellow); text-decoration: none; }

.nav__cta {
  display: flex;
  gap: 0.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  border-radius: 4px;
  border: 2px solid currentColor;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  color: var(--paper);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.btn:hover, .btn:focus {
  transform: translateY(-1px);
  text-decoration: none;
}
.btn--pink {
  background: var(--neon-pink);
  border-color: var(--neon-pink);
  color: var(--ink);
  box-shadow: 0 0 0 0 rgba(255, 46, 136, 0.5);
}
.btn--pink:hover { box-shadow: 0 0 24px rgba(255, 46, 136, 0.55); }
.btn--cyan {
  background: var(--neon-cyan);
  border-color: var(--neon-cyan);
  color: var(--ink);
}
.btn--cyan:hover { box-shadow: 0 0 24px rgba(0, 229, 255, 0.55); }
.btn--yellow {
  background: var(--neon-yellow);
  border-color: var(--neon-yellow);
  color: var(--ink);
}
.btn--yellow:hover { box-shadow: 0 0 24px rgba(255, 227, 0, 0.6); }
.btn--ghost {
  border-color: var(--paper);
  color: var(--paper);
}
.btn--ghost:hover { background: var(--paper); color: var(--ink); }
.btn--sm { padding: 0.45rem 0.8rem; font-size: 0.85rem; }
.btn--lg { padding: 0.9rem 1.6rem; font-size: 1.15rem; }

/* Hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-2);
  border-radius: 4px;
  color: var(--paper);
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  margin-left: auto;
}

/* ---------- Urgency bar ---------- */
.urgency {
  background: repeating-linear-gradient(
    -45deg,
    var(--neon-yellow) 0 14px,
    var(--ink) 14px 28px
  );
  color: var(--ink);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}
.urgency__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.45rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 0.95rem;
  text-align: center;
  background: var(--neon-yellow);
}
.urgency__link {
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.15s ease;
}
.urgency__link:hover,
.urgency__link:focus-visible { opacity: 0.78; text-decoration: none; }
.urgency__close {
  margin-left: auto;
  background: transparent;
  border: 0;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--ink);
  padding: 0 0.3rem;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(2.5rem, 7vw, 5rem) var(--gutter) clamp(3rem, 7vw, 5rem);
  overflow: hidden;
  isolation: isolate;
  /* Sunburst: faint conic rays over a pink/red burst glow on the dark base
     (ported from the original AltStar build, recolored to the new palette). */
  background:
    repeating-conic-gradient(from 0deg at 50% 20%,
      rgba(255, 255, 255, 0.06) 0deg 2.2deg,
      rgba(255, 255, 255, 0)    2.2deg 8deg),
    radial-gradient(circle at 50% 20%,
      rgba(255, 46, 136, 0.30) 0%,
      rgba(255, 42, 74, 0.17) 30%,
      rgba(90, 12, 45, 0.12) 52%,
      var(--ink) 80%);
}
.hero::before {
  /* Marquee bulb-edge frame */
  content: "";
  position: absolute;
  /* Mirror the site's content width on desktop (capped at --max), and hug the
     screen edge on phones — never stretch out toward the full viewport. */
  top: clamp(0.5rem, 3vw, 1.5rem);
  bottom: clamp(0.5rem, 3vw, 1.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(100% - clamp(1rem, 6vw, 3rem), calc(var(--max) - 1rem));  /* ~24px gap each side beyond the content band (desktop) */
  border: 2px dashed rgba(255, 46, 136, 0.55);
  border-radius: 14px;
  pointer-events: none;
  z-index: -1;
}
.hero__inner {
  /* Match the section content band: other sections cap at --max and pad the
     gutter INSIDE, so their content tops out at --max - 2 gutters (~1116). */
  max-width: calc(var(--max) - 4rem);
  margin: 0 auto;
  display: grid;
  gap: 1.5rem;
  /* Anchor for the absolutely-positioned schedule promo tile so it sits
     inside the content band (i.e. inside the marquee border) instead of
     against the hero's outer edge. */
  position: relative;
}
.hero__sticker {
  display: inline-block;
  font-family: var(--font-display);
  background: var(--neon-red);
  color: var(--paper);
  padding: 0.35rem 0.8rem;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  transform: rotate(-2deg);
  align-self: start;
  border-radius: 2px;
  box-shadow: 3px 3px 0 var(--ink-3);
}
.hero__title {
  font-size: clamp(2.6rem, 9vw, 6rem);
  color: var(--paper);
  text-shadow:
    0 0 10px rgba(255, 46, 136, 0.35),
    3px 3px 0 var(--neon-magenta);
}
.hero__title em {
  font-style: normal;
  color: var(--neon-cyan);
  text-shadow:
    0 0 10px rgba(0, 229, 255, 0.5),
    3px 3px 0 var(--neon-magenta);
}
.hero__subhead {
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  color: var(--paper);
  font-weight: 500;
  max-width: 62ch;
  line-height: 1.35;
  margin-top: -0.2rem;
}
.hero__lede {
  font-size: clamp(0.96rem, 1.6vw, 1.05rem);
  color: var(--paper-dim);
  max-width: 64ch;
  line-height: 1.55;
  margin-top: 0.2rem;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.hero__meta strong { color: var(--paper); font-weight: 600; }
.hero__present { color: var(--neon-pink); }
.hero__age {
  background: var(--neon-yellow);
  color: var(--ink);
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  font-weight: 700;
}

.countdown {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}
.countdown__cell {
  background: var(--ink-2);
  border: 1px solid var(--border-2);
  padding: 0.7rem 1rem;
  border-radius: 6px;
  min-width: 78px;
  text-align: center;
  position: relative;
}
.countdown__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 46, 136, 0.18);
}
.countdown__num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--neon-pink);
  line-height: 1;
}
.countdown__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-top: 0.2rem;
}
.countdown__caption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--paper-faint);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.5rem;
}

/* Schedule promo tile in the lower-right of the hero's content band. Anchored
   to .hero__inner (not .hero) so it sits inside the dashed marquee on wide
   screens, roughly level with the CTA buttons. Links to the Schedule section.
   On narrow screens it collapses into the normal flow so it doesn't overlap
   the CTAs. */
.hero__schedule-link {
  position: absolute;
  right: 0;
  bottom: 0;
  /* Cap at the image's intrinsic width (350px) so we never upscale -- that
     would soften the JPG. Re-export the source at higher resolution to go
     bigger. */
  width: clamp(180px, 28vw, 350px);
  z-index: 2;
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero__schedule-link img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.hero__schedule-link:hover { transform: scale(1.04); }
.hero__schedule-link:hover img { box-shadow: 0 10px 30px rgba(255, 46, 136, 0.4); }
.hero__schedule-link:focus-visible img {
  outline: 2px solid var(--neon-yellow);
  outline-offset: 4px;
}

@media (max-width: 720px) {
  /* On narrow screens, drop into the normal flow under the CTA buttons so it
     doesn't overlap them. Sit roughly centered with the hero content. */
  .hero__schedule-link {
    position: static;
    margin: 0.4rem auto 0;
    width: clamp(180px, 60vw, 280px);
  }
}

/* ---------- Generic section ---------- */
.section {
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}
.section--accent {
  background: linear-gradient(180deg, rgba(255, 46, 136, 0.06), transparent 80%);
  max-width: none;
}
.section--accent > .section__inner {
  max-width: var(--max);
  margin: 0 auto;
}
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1rem 1.5rem;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}
.section__head h2 {
  color: var(--paper);
}
.section__head h2 .accent { color: var(--neon-pink); }
.section__lede {
  max-width: 56ch;
  color: var(--paper-dim);
}

/* ---------- Hotel ---------- */
.hotel-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  align-items: stretch;
  background: var(--ink-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  position: relative;
}
.hotel-card::before {
  content: "ROOM BLOCK";
  position: absolute;
  top: -14px;
  left: 1.4rem;
  background: var(--neon-pink);
  color: var(--ink);
  padding: 0.15rem 0.7rem;
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  border-radius: 3px;
}
.hotel-card h3 { color: var(--paper); }
.hotel-card ul {
  list-style: none;
  margin: 0.8rem 0 1.2rem;
  display: grid;
  gap: 0.45rem;
}
.hotel-card li {
  padding-left: 1.4rem;
  position: relative;
  font-size: 0.97rem;
}
.hotel-card li::before {
  content: "▶";
  position: absolute;
  left: 0;
  color: var(--neon-pink);
  font-size: 0.7rem;
  top: 0.35rem;
}
.hotel-card__aside {
  background: var(--ink-3);
  border-left: 3px solid var(--neon-yellow);
  padding: 1rem 1.2rem;
  border-radius: 4px;
  font-size: 0.92rem;
  color: var(--paper-dim);
}
.hotel-card__aside strong { color: var(--paper); }

/* ---------- Tickets ---------- */
.tickets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
}
.ticket {
  background: var(--ink-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
  overflow: hidden;
}
.ticket::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 10px;
  background: linear-gradient(135deg, transparent 40%, rgba(255, 46, 136, 0.3) 50%, transparent 60%);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.ticket:hover::before { opacity: 1; }
.ticket__kicker {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  color: var(--neon-cyan);
}
.ticket h3 { color: var(--paper); }
.ticket p { color: var(--paper-dim); font-size: 0.95rem; }
.ticket ul { list-style: none; padding: 0; margin: 0.3rem 0; }
.ticket li {
  font-size: 0.9rem;
  color: var(--paper-dim);
  padding-left: 1.1rem;
  position: relative;
  margin-bottom: 0.25rem;
}
.ticket li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--neon-yellow);
}
.ticket .btn { margin-top: auto; align-self: start; }

.tickets-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1.3rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tickets-meta .pill {
  background: var(--ink-3);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
}
.tickets-meta .pill--age { background: var(--neon-yellow); color: var(--ink); border-color: transparent; }
.tickets-meta .pill--price { background: var(--neon-pink); color: var(--ink); border-color: transparent; }

/* ---------- Guests grid ---------- */
/* ---------- Photo carousel (two opposing marquee rows) ---------- */
.carousel-section {
  padding: clamp(1.5rem, 4vw, 2.5rem) 0;
  background: var(--ink);
  overflow: hidden;
}
.carousel { display: flex; flex-direction: column; gap: 12px; }
.carousel__row { display: flex; gap: 12px; width: max-content; will-change: transform; }
.carousel__row--left  { animation: carouselLeft  60s linear infinite; }
.carousel__row--right { animation: carouselRight 60s linear infinite; }
.carousel__row:hover { animation-play-state: paused; }   /* hovering a row stops only that row */
.carousel__row img {
  height: clamp(130px, 17vw, 185px);
  width: auto;
  flex: none;
  border-radius: 8px;
  display: block;
  position: relative;
  user-select: none;
  background: var(--ink-2);
  transition: transform 0.25s ease;
}
.carousel__row img:hover { transform: scale(1.12); z-index: 2; }   /* slight zoom on the hovered photo */
@keyframes carouselLeft  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes carouselRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.guests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}
.guest-card {
  background: var(--ink-2);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.guest-card:hover {
  transform: translateY(-3px);
  border-color: var(--neon-pink);
  text-decoration: none;
}
.guest-card__media {
  aspect-ratio: 3 / 4;
  background:
    repeating-linear-gradient(45deg, rgba(255, 46, 136, 0.1), rgba(255, 46, 136, 0.1) 6px, transparent 6px, transparent 12px),
    linear-gradient(135deg, var(--ink-3), var(--ink-2));
  display: grid;
  place-items: center;
  position: relative;
}
.guest-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.guest-card__placeholder {
  font-family: var(--font-display);
  font-size: 3rem;
  color: rgba(243, 238, 228, 0.18);
  letter-spacing: 0.08em;
}
.guest-card__body {
  padding: 0.8rem 0.9rem 1rem;
  display: grid;
  gap: 0.2rem;
}
.guest-card__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--paper);
  letter-spacing: 0.03em;
}
.guest-card__role {
  font-size: 0.82rem;
  color: var(--paper-faint);
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.guest-card__day {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  background: var(--ink);
  color: var(--neon-yellow);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  border: 1px solid var(--border-2);
}
.guest-card.is-tba .guest-card__name { color: var(--paper-dim); }
.guests-more {
  margin-top: 1.4rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--neon-cyan);
  letter-spacing: 0.08em;
}

/* ---------- Schedule ---------- */
.day-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--border);
}
.day-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  padding: 0.55rem 1rem;
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  font-size: 1rem;
  color: var(--paper-dim);
  cursor: pointer;
  text-transform: uppercase;
}
.day-tab:hover { color: var(--paper); }
.day-tab.is-active {
  background: var(--ink-2);
  color: var(--neon-pink);
  border-color: var(--border-2);
  border-bottom-color: var(--ink-2);
  position: relative;
  top: 1px;
}

.day-panel { display: none; }
.day-panel.is-active { display: block; }
.day-panel__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 1rem;
}
.day-panel__meta .audience { color: var(--neon-yellow); }

.schedule-list {
  list-style: none;
  display: grid;
  gap: 0.4rem;
}
.schedule-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 0.7rem 0.9rem;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--neon-pink);
  border-radius: 4px;
}
.schedule-row__time {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  color: var(--neon-cyan);
  font-size: 1.1rem;
}
.schedule-row__title { color: var(--paper); font-weight: 600; font-size: 0.98rem; }
.schedule-row__note { color: var(--paper-faint); font-size: 0.86rem; margin-top: 0.15rem; }

/* Optional "Getting in:" / arrival instructions block under the venue line. */
.day-panel__entry {
  margin: 0 0 1.1rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.92rem;
  color: var(--paper-dim);
  line-height: 1.55;
  background: rgba(0, 229, 255, 0.05);
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-left: 3px solid var(--neon-cyan);
  border-radius: 4px;
}
.day-panel__entry-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  margin-right: 0.25rem;
  font-weight: 700;
}

/* Optional sponsor/end-of-day image at the bottom of a day-panel. Capped
   at the image's natural width (694px) so it never upscales. */
.day-panel__end-image {
  margin: 1.5rem auto 0;
  max-width: min(100%, 694px);
  text-align: center;
}
.day-panel__end-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* ---------- Awards / voting ---------- */
.awards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
.awards-card {
  background: var(--ink-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.awards-card h3 { color: var(--paper); }
.awards-card p { color: var(--paper-dim); font-size: 0.95rem; }
.awards-card .btn { align-self: start; margin-top: auto; }
.awards-card--vote { border-color: rgba(255, 46, 136, 0.5); }
.awards-card--frames { border-color: rgba(0, 229, 255, 0.5); }
.heritage {
  margin-top: 1.4rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
.heritage span { color: var(--neon-yellow); }

/* ---------- Getting around / sponsors ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
.venue-card {
  background: var(--ink-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 1.3rem 1.4rem;
}
.venue-card h3 { color: var(--paper); }
.venue-card address {
  font-style: normal;
  color: var(--paper-dim);
  font-size: 0.94rem;
  margin: 0.4rem 0 0.6rem;
}
.venue-card p { color: var(--paper-dim); font-size: 0.93rem; }
.transit-note {
  margin-top: 1rem;
  background: var(--ink-3);
  border-left: 3px solid var(--neon-cyan);
  padding: 0.9rem 1.1rem;
  border-radius: 4px;
  color: var(--paper-dim);
  font-size: 0.93rem;
}

.sponsors-wall {
  background: var(--ink-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 1.6rem;
  text-align: center;
  max-width: 780px;
  margin-inline: auto;
}
.sponsor-map {
  position: relative;
  width: 100%;
  max-width: 720px;       /* a little under the art's native 1200px */
  margin: 0 auto;
}
.sponsor-map__img {
  display: block;
  width: 100%;
  height: auto;
}
/* Percentage-positioned hotspots scale with the image at any size.
   Invisible but clickable; a keyboard-focus outline keeps them accessible. */
.sponsor-map__hot {
  position: absolute;
  display: block;
  cursor: pointer;
}
.sponsor-map__hot:focus-visible {
  outline: 2px solid #00e5ff;
  outline-offset: 2px;
  border-radius: 6px;
}
.sponsors-wall__line {
  margin-top: 1rem;
  font-size: 0.92rem;
  color: var(--paper-dim);
}

/* ---------- FAQ ---------- */
.faq-list {
  display: grid;
  gap: 0.5rem;
}
.faq-item {
  background: var(--ink-2);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  overflow: hidden;
}
.faq-q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  background: none;
  border: 0;
  color: var(--paper);
  padding: 0.95rem 1.1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.faq-q::after {
  content: "+";
  font-family: var(--font-display);
  color: var(--neon-pink);
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}
.faq-item.is-open .faq-q::after { content: "−"; }
.faq-a {
  padding: 0 1.1rem 1.1rem;
  color: var(--paper-dim);
  font-size: 0.95rem;
  display: none;
}
.faq-item.is-open .faq-a { display: block; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--ink-2);
  margin-top: 3rem;
  padding: 2.5rem var(--gutter) 2rem;
}
.site-footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 2rem;
}
.site-footer h4 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 0.6rem;
  font-weight: 600;
}
.site-footer__brand {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: var(--paper);
}
.site-footer__brand span { color: var(--neon-pink); }
.site-footer ul { list-style: none; display: grid; gap: 0.35rem; }
.site-footer a {
  color: var(--paper-dim);
  font-size: 0.93rem;
}
.site-footer a:hover { color: var(--neon-yellow); }
.footer-ctas {
  margin-top: 1.2rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.colophon {
  max-width: var(--max);
  margin: 1.6rem auto 0;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  font-size: 0.82rem;
  color: var(--paper-faint);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* ---------- Helpers ---------- */
.divider {
  height: 6px;
  background: repeating-linear-gradient(
    -45deg,
    var(--neon-pink) 0 14px,
    var(--ink) 14px 28px
  );
  margin: 0;
}
.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 ---------- */
@media (max-width: 900px) {
  .hotel-card { grid-template-columns: 1fr; }
  .awards { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink-2);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 0.8rem var(--gutter);
    gap: 0.6rem;
  }
  .nav__links.is-open { display: flex; }
  .nav-toggle { display: inline-flex; }
  .site-header__inner { position: relative; }
  .nav { margin-left: 0; }
  .nav__cta .btn { padding: 0.5rem 0.7rem; font-size: 0.85rem; }
  .schedule-row { grid-template-columns: 1fr; gap: 0.2rem; padding: 0.7rem 0.85rem; }
  .schedule-row__time { font-size: 1rem; }
  .site-footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .countdown__cell { min-width: 64px; padding: 0.55rem 0.7rem; }
  .countdown__num { font-size: 1.8rem; }
  .hero__title { letter-spacing: 0.01em; }
  /* tighten the card padding so the sponsor graphic fills more of the box */
  .sponsors-wall { padding: 0.8rem; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}