/* ============================================================
   WNY Winter Stoke Sessions — brand system
   Palette: warm cream + deep forest + burnt sun + dusty rose
   Type: Zodiak (display serif, character), General Sans (body),
         Monoton (small psychedelic accent)
   ============================================================ */

:root {
  /* palette */
  --cream:      #F1E7D2;   /* warm paper */
  --cream-2:    #E9DBC0;   /* slightly darker paper */
  --ink:        #14201C;   /* deep forest ink */
  --forest:     #1E3A32;   /* forest green */
  --forest-2:   #2A5044;
  --sun:        #D46A1F;   /* burnt orange */
  --sun-2:      #B4531A;
  --rose:       #C97A6E;   /* dusty rose */
  --gold:       #E4A94A;   /* soft gold */
  --red:        #C42B25;   /* 716 red (Dead-poster crimson) */
  --red-2:      #E24A3E;
  --smoke:      rgba(20,32,28,.7);

  /* type */
  --f-display: "Zodiak", ui-serif, Georgia, serif;
  --f-body:    "General Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono-y:  "Monoton", "General Sans", sans-serif;
  --f-716:     "Anton", "Impact", "Bebas Neue", sans-serif;

  --t-xs:   clamp(11px, 0.72vw + 9px, 13px);
  --t-sm:   clamp(13px, 0.5vw + 12px, 15px);
  --t-base: clamp(15px, 0.4vw + 14px, 17px);
  --t-lg:   clamp(18px, 0.6vw + 17px, 21px);
  --t-xl:   clamp(22px, 1.2vw + 18px, 32px);
  --t-2xl:  clamp(32px, 3vw + 22px, 56px);
  --t-hero: clamp(56px, 9vw + 20px, 168px);

  /* spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;

  --shadow-1: 0 1px 2px rgba(20,32,28,.06), 0 4px 12px rgba(20,32,28,.06);
  --shadow-2: 0 8px 30px rgba(20,32,28,.18);
}

html, body { background: var(--cream); color: var(--ink); }
body {
  font-family: var(--f-body);
  font-size: var(--t-base);
  font-feature-settings: "ss01","ss02","cv11";
  /* subtle paper texture */
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(20,32,28,.03) 1px, transparent 0),
    radial-gradient(1px 1px at 70% 60%, rgba(20,32,28,.025) 1px, transparent 0),
    radial-gradient(1px 1px at 40% 80%, rgba(20,32,28,.02) 1px, transparent 0);
  background-size: 220px 220px, 300px 300px, 400px 400px;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) clamp(var(--space-4), 4vw, var(--space-12));
  background: color-mix(in oklab, var(--cream) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(20,32,28,.08);
  transition: transform .3s ease, background .3s ease;
}
.site-header.is-hidden { transform: translateY(-100%); }

.brand { display: flex; align-items: center; color: var(--ink); text-decoration: none; }
.brand-logo {
  display: block;
  height: clamp(44px, 6vw, 64px);
  width: auto;
  object-fit: contain;
}

.site-nav { display: flex; align-items: center; gap: clamp(var(--space-3), 1.5vw, var(--space-6)); }
.site-nav a {
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  position: relative;
  padding: 6px 2px;
}
.site-nav a:not(.cta)::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px;
  height: 1px; background: var(--sun); transform-origin: left;
  transform: scaleX(0); transition: transform .35s ease;
}
.site-nav a:not(.cta):hover::after { transform: scaleX(1); }
@media (max-width: 740px) {
  .site-nav a:not(.cta) { display: none; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--cream) !important;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  border-radius: 999px;
  transition: transform .2s ease, background .2s ease, color .2s ease;
  border: 1px solid var(--ink);
  white-space: nowrap;
  line-height: 1;
}
.cta:hover { transform: translateY(-1px); background: var(--sun); border-color: var(--sun); color: var(--cream) !important; }
.cta--sm { padding: 10px 18px; font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; }

.cta--ghost {
  background: transparent;
  color: var(--cream);
  border-color: rgba(241,231,210,.6);
}
.cta--ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.cta--dark {
  background: transparent;
  color: var(--ink) !important;
  border-color: rgba(20,32,28,.5);
}
.cta--dark:hover { background: var(--ink); color: var(--cream) !important; border-color: var(--ink); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 92vh;
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(90deg, rgba(9,13,25,.65), rgba(9,13,25,.08) 80%),
    linear-gradient(180deg,
      rgba(20,32,28,.35) 0%,
      rgba(20,32,28,.15) 30%,
      rgba(20,32,28,.55) 70%,
      rgba(20,32,28,.95) 100%);
}

.hero-content {
  padding: clamp(var(--space-8), 6vw, var(--space-24)) clamp(var(--space-4), 5vw, var(--space-16));
  max-width: 1200px;
}

.eyebrow {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-weight: 600;
  color: var(--sun);
  margin-bottom: var(--space-6);
}
.hero .eyebrow {
  display: inline-block;
  background: rgba(20,32,28,.55);
  color: var(--gold);
  padding: 8px 14px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(228,169,74,.3);
  position: relative;
  z-index: 3;             /* keep above hero 716 numeral */
}

/* --- Hero: quiet lockup --- */
.hero-content--quiet { max-width: 900px; }
.hero-film-title { margin: 0 0 24px; max-width: 490px; }
.hero-film-title img { width: 100%; height: auto; }
.hero-film-note { font-size: var(--t-base); margin-bottom: 24px; color: var(--cream); }
.hero-media img { object-position: 60% center; }
.film-description { max-width: 76ch; margin-top: 20px; line-height: 1.7; }
.media-credit { font-size: 12px; line-height: 1.6; margin-top: 20px; }
.photo-credit { position: absolute; bottom: 16px; left: 16px; color: white; font: 12px/1.5 var(--f-body); background: rgba(0,0,0,.65); padding: 6px 10px; }
.media-attribution { line-height: 1.7; }
@media (max-width: 640px) {
  .hero-film-title { max-width: 340px; }
  .hero-media img { object-position: 58% center; }
  .video-caption { letter-spacing: .02em; left: 10px; right: 10px; font-size: 12px; }
}
.hero-tag {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(26px, 2.6vw + 12px, 44px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0 0 var(--space-8) 0;
  max-width: 22ch;
  text-shadow: 0 2px 16px rgba(20,32,28,.5);
}
.hero-dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  margin: 0 0 var(--space-10) 0;
  padding: var(--space-6) 0;
  border-top: 1px solid rgba(241,231,210,.2);
  border-bottom: 1px solid rgba(241,231,210,.2);
}
.hero-dates li { display: flex; flex-direction: column; gap: 4px; }
.hero-date {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: var(--t-lg);
  color: var(--cream);
  letter-spacing: 0.01em;
}
.hero-place {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: rgba(241,231,210,.7);
}
@media (max-width: 640px) {
  .hero-dates { grid-template-columns: 1fr; gap: var(--space-4); }
}

.tagline {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--cream);
  opacity: .85;
  margin-bottom: var(--space-6);
  font-weight: 500;
}

.lede {
  max-width: 52ch;
  font-size: var(--t-lg);
  line-height: 1.55;
  color: rgba(241,231,210,.9);
  margin-bottom: var(--space-8);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-10); }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  font-size: var(--t-sm);
  color: rgba(241,231,210,.85);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(241,231,210,.15);
  max-width: 720px;
}
.hero-meta li { display: flex; align-items: center; gap: 10px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--sun)); box-shadow: 0 0 10px var(--dot, var(--sun)); }

@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(241,231,210,.1);
  border-bottom: 1px solid rgba(241,231,210,.1);
}
.marquee-track {
  display: inline-flex; gap: var(--space-8); white-space: nowrap;
  animation: slide 38s linear infinite;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 32px);
  padding-left: var(--space-8);
}
.marquee-track .sep { color: var(--sun); font-style: normal; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
  padding: clamp(var(--space-16), 10vw, var(--space-32)) clamp(var(--space-4), 5vw, var(--space-16));
  max-width: 1360px;
  margin: 0 auto;
}
.section-head {
  max-width: 780px;
  margin-bottom: var(--space-16);
}
.section-head .eyebrow { color: var(--sun-2); }
.h-display {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--ink);
  margin-bottom: var(--space-4);
}
.h-display em, .h-display i { font-style: italic; color: var(--sun); font-weight: 500; }
.dek {
  font-size: var(--t-lg);
  color: color-mix(in oklab, var(--ink) 75%, transparent);
  max-width: 60ch;
  line-height: 1.55;
}

/* ============ FILM ============ */
.film-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 900px) { .film-grid { grid-template-columns: 1fr; } }

.video {
  position: relative; display: block;
  aspect-ratio: 16/9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-2);
  cursor: pointer;
}
.video img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.video:hover img { transform: scale(1.03); }
.video .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--sun); color: var(--cream);
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(212,106,31,.55);
  transition: transform .25s ease;
  border: 0;
  cursor: pointer;
}
.video:hover .play { transform: translate(-50%,-50%) scale(1.08); }
.video-caption {
  position: absolute; left: var(--space-4); bottom: var(--space-4);
  color: var(--cream); font-size: var(--t-xs); letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 600;
  background: rgba(20,32,28,.6); padding: 6px 10px; border-radius: 4px;
  backdrop-filter: blur(4px);
}

.film-facts {
  background: var(--cream-2);
  border-radius: var(--r-md);
  padding: var(--space-8);
  border: 1px solid rgba(20,32,28,.08);
}
.film-facts dl { display: grid; gap: var(--space-6); }
.film-facts dt {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--smoke); font-weight: 600; margin-bottom: 4px;
}
.film-facts dd {
  font-family: var(--f-display); font-size: var(--t-lg); font-weight: 500;
  color: var(--ink); letter-spacing: -0.01em;
}
.fact-note {
  margin-top: var(--space-6); padding-top: var(--space-6);
  border-top: 1px solid rgba(20,32,28,.12);
  font-size: var(--t-sm); color: var(--smoke); line-height: 1.55;
}

/* ============ EVENTS ============ */
.events { padding-top: var(--space-16); }
.events-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
@media (max-width: 820px) { .events-grid { grid-template-columns: 1fr; } }

.event {
  position: relative;
  background: var(--cream-2);
  border: 1px solid rgba(20,32,28,.08);
  border-radius: var(--r-md);
  padding: clamp(var(--space-8), 4vw, var(--space-16));
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}
.event:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.event::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, var(--sun), var(--rose));
}
.event--02::before { background: linear-gradient(90deg, var(--forest-2), var(--gold)); }

.event-tag {
  font-size: var(--t-xs); letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--smoke); font-weight: 600; margin-bottom: var(--space-6);
}
.event-date {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: var(--space-4);
}
.event-weekday {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--smoke);
  margin-bottom: var(--space-2);
}
.event-month {
  font-family: var(--f-display); font-style: italic; font-weight: 500;
  font-size: clamp(28px, 3vw, 40px); color: var(--sun);
}
.event-day {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(64px, 8vw, 120px); line-height: 1;
  color: var(--ink); letter-spacing: -0.04em;
}
.event-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--t-xl); letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}
.event-sub { color: var(--smoke); max-width: 42ch; margin-bottom: var(--space-8); }

.event-details { display: grid; gap: 10px; margin-bottom: var(--space-8); }
.event-details li {
  display: grid; grid-template-columns: 90px 1fr; gap: var(--space-4);
  font-size: var(--t-sm);
  padding: 10px 0; border-top: 1px solid rgba(20,32,28,.1);
}
.event-details li:last-child { border-bottom: 1px solid rgba(20,32,28,.1); }
.event-details span {
  text-transform: uppercase; letter-spacing: 0.18em; font-size: var(--t-xs);
  color: var(--smoke); font-weight: 600; align-self: center;
}
.event-details b { color: var(--ink); font-weight: 500; }
.event-details em { color: var(--smoke); font-style: italic; font-size: 0.9em; }
.event-note {
  color: var(--red);
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-6) 0;
}

/* ============ SPLIT ============ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  background: var(--forest);
  color: var(--cream);
  overflow: hidden;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.split-image {
  height: 100%;
  min-height: 520px;
  position: relative;
  background: var(--forest-2);
}
.split-image img {
  width: 100%; height: 100%; object-fit: cover;
  min-height: 520px;
}

.split-copy {
  padding: clamp(var(--space-12), 6vw, var(--space-24)) clamp(var(--space-6), 5vw, var(--space-16));
  max-width: 640px;
}
.split-copy .eyebrow { color: var(--gold); }
.split-copy .h-display { color: var(--cream); }
.split-copy .h-display em { color: var(--sun); }
.split-copy p {
  color: rgba(241,231,210,.85);
  font-size: var(--t-lg);
  line-height: 1.55;
  margin-top: var(--space-4);
}

.tick-list { margin-top: var(--space-8); display: grid; gap: var(--space-3); }
.tick-list li {
  padding-left: var(--space-8);
  position: relative;
  color: var(--cream);
  font-size: var(--t-base);
}
.tick-list li::before {
  content: "✺";
  position: absolute; left: 0; top: 0;
  color: var(--sun); font-size: 1.2em;
}

/* ============ EXPERIENCE ============ */
.experience { padding-top: var(--space-24); }
.experience-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
@media (max-width: 900px) { .experience-grid { grid-template-columns: 1fr; gap: var(--space-8); } }

.exp-photos {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}
.exp-photo { position: relative; margin: 0; }
.exp-photo img {
  display: block;
  width: 100%; border-radius: var(--r-md);
  aspect-ratio: 16/9; object-fit: cover;
  height: auto;
  box-shadow: var(--shadow-2);
}

/* ============ SPONSORS ============ */
.sponsors { background: var(--cream); }
.sponsor-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-16);
}
@media (max-width: 780px) { .sponsor-wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sponsor-wall { grid-template-columns: 1fr; } }

.sw {
  padding: var(--space-8);
  border-radius: var(--r-md);
  min-height: 140px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .3s ease;
}
.sw:hover { transform: translateY(-2px); }
.sw-role {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.28em;
  font-weight: 600;
}
.sw-name {
  font-family: var(--f-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.sw--gold { background: var(--ink); color: var(--cream); }
.sw--gold .sw-role { color: var(--gold); }
.sw--open {
  background: transparent; color: var(--smoke);
  border: 1.5px dashed rgba(20,32,28,.28);
}
.sw--open .sw-role { color: var(--sun-2); }
.sw--open .sw-name { color: var(--smoke); font-style: italic; }

.sponsor-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-10) clamp(var(--space-6), 4vw, var(--space-12));
  background: var(--sun);
  color: var(--ink);
  border-radius: var(--r-lg);
}
@media (max-width: 780px) { .sponsor-cta { grid-template-columns: 1fr; } }
.sponsor-cta .eyebrow { color: var(--ink); opacity: .75; }
.sponsor-cta h3 {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--t-xl); letter-spacing: -0.02em; max-width: 40ch;
  color: var(--ink);
}
.sponsor-cta .cta { background: var(--ink); color: var(--cream) !important; border-color: var(--ink); }
.sponsor-cta .cta:hover { background: var(--cream); color: var(--ink) !important; border-color: var(--cream); }

/* ============ CAUSE ============ */
.cause {
  background: var(--ink);
  color: var(--cream);
  max-width: none;
  padding: clamp(var(--space-20), 10vw, var(--space-32)) clamp(var(--space-4), 5vw, var(--space-16));
  position: relative;
  overflow: hidden;
}
.cause::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 30%, rgba(212,106,31,.15), transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(201,122,110,.1), transparent 40%);
  pointer-events: none;
}
.cause-inner { position: relative; max-width: 780px; margin: 0 auto; text-align: center; }
.cause-logo {
  display: block;
  width: fit-content;
  margin: var(--space-6) auto var(--space-8);
  padding: 16px;
  background: #fff;
  border-radius: var(--r-md);
}
.cause-logo img {
  display: block;
  width: 192px;
  max-width: 100%;
  height: auto;
}
.cause-logo:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
.cause .eyebrow { color: var(--gold); font-size: var(--t-xs); }
.cause .h-display { color: var(--cream); }
.cause p {
  color: rgba(241,231,210,.85);
  font-size: var(--t-lg);
  line-height: 1.6;
  margin-top: var(--space-6);
}

/* ============ TICKETS ============ */
.tickets { padding-top: var(--space-20); padding-bottom: var(--space-24); }
.tickets-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.tickets .eyebrow { color: var(--sun-2); }
.tickets .dek { margin: var(--space-6) auto var(--space-10); }
.ticket-purchase {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-8);
  border: 1px solid rgba(20,32,28,.12);
  border-radius: var(--r-lg);
  background: var(--cream-2);
}
.ticket-purchase-copy { max-width: 320px; }
.ticket-checkout-note {
  margin-top: var(--space-4);
  font-size: var(--t-sm);
  color: var(--smoke);
}
.ticket-qr { flex-shrink: 0; text-decoration: none; color: var(--ink); }
.ticket-qr img { display: block; width: 164px; height: 164px; margin: 0 auto 8px; }
.ticket-qr span { font-size: var(--t-xs); font-weight: 600; }
.ticket-upcoming {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(20,32,28,.15);
}
.ticket-upcoming h3 { font-size: var(--t-lg); margin-bottom: var(--space-3); }
.ticket-upcoming p { color: var(--smoke); line-height: 1.7; }
.ticket-upcoming a { text-decoration: underline; text-underline-offset: 3px; }
.event-sale-status { font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--space-4); }
@media (max-width: 600px) {
  .ticket-purchase { flex-direction: column; gap: var(--space-6); padding: var(--space-6); }
}

.ticket-form { max-width: 560px; margin: 0 auto; }
.form-fields {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: var(--space-3);
  background: var(--cream-2);
  padding: var(--space-3);
  border-radius: 999px;
  border: 1px solid rgba(20,32,28,.1);
  text-align: left;
}
@media (max-width: 720px) {
  .form-fields { grid-template-columns: 1fr; border-radius: var(--r-md); }
}
.field { display: flex; flex-direction: column; padding: 4px 14px; }
.field span {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.24em;
  color: var(--smoke); font-weight: 600; margin-bottom: 2px;
}
.field input, .field select {
  background: transparent; border: 0; outline: none;
  font-size: var(--t-base); color: var(--ink); font-weight: 500;
  padding: 0; width: 100%;
}
.form-success {
  padding: var(--space-6);
  background: var(--forest);
  color: var(--cream);
  border-radius: var(--r-md);
  font-size: var(--t-base);
}

/* ============ FOOTER ============ */
.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding: var(--space-16) clamp(var(--space-4), 5vw, var(--space-16)) var(--space-8);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-10);
  max-width: 1200px; margin: 0 auto;
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(241,231,210,.15);
}
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.foot-tag { color: rgba(241,231,210,.7); max-width: 30ch; font-size: var(--t-sm); }
.foot-h {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.28em;
  color: var(--gold); font-weight: 600; margin-bottom: var(--space-4);
}
.site-footer p { font-size: var(--t-sm); line-height: 1.7; color: rgba(241,231,210,.8); }
.site-footer a { color: var(--cream); text-decoration: none; border-bottom: 1px solid rgba(241,231,210,.25); }
.site-footer a:hover { color: var(--sun); border-color: var(--sun); }
.foot-fine {
  max-width: 1200px; margin: var(--space-8) auto 0;
  font-size: var(--t-xs); color: rgba(241,231,210,.4); letter-spacing: 0.06em;
}

/* ============ REVEAL ============ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-in { opacity: 1; transform: translateY(0); }
/* If JS hasn't run yet, fall back to visible after 1.5s so screenshots and no-JS users still see content */
@media (prefers-reduced-motion: no-preference) {
  html.no-js .reveal { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  .hero-scroll { animation: none; }
}

/* ============ SPONSOR MAJOR (real logos) ============ */
.sponsor-major {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 780px) { .sponsor-major { grid-template-columns: 1fr; } }
.maj { list-style: none; }
.maj a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-8);
  background: color-mix(in oklab, var(--cream-2) 55%, transparent);
  border: 1px solid rgba(20,32,28,.10);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--ink);
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
  min-height: 260px;
}
.maj a:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  background: var(--cream);
}
.maj-logo {
  display: flex; align-items: center; justify-content: center;
  height: 140px;
  width: 100%;
}
/* Matching display areas balance the wide HV mark and taller City Garage lockup
   without stretching, clipping, or changing either sponsor's supplied artwork. */
.maj-logo img {
  width: 256px;
  height: 128px;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}
.maj-role {
  font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: 0.32em; font-weight: 600;
  color: var(--sun-2);
}
.maj-url {
  font-size: var(--t-sm); color: var(--smoke);
  font-family: var(--f-body); letter-spacing: 0.04em;
}

/* ============ CTA LIGHT (for dark backgrounds) ============ */
.cta--light {
  color: var(--cream) !important;
  border-color: rgba(241,231,210,.5);
  background: transparent;
  margin-top: var(--space-6);
}
.cta--light:hover {
  background: var(--cream);
  color: var(--ink) !important;
  border-color: var(--cream);
}
.cause-inner .cta--light { display: inline-flex; align-items: center; }

/* ============ CAUSE INLINE LINK ============ */
.cause a:not(.cta) {
  color: var(--gold);
  border-bottom: 1px solid rgba(228,169,74,.4);
  text-decoration: none;
}
.cause a:not(.cta):hover { color: var(--sun); border-color: var(--sun); }

/* ============================================================
   INTRO OVERLAY — simple logo reveal
   ============================================================ */

.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse 130% 100% at 50% 50%, #1a1815 0%, #0d0c0a 60%, #050403 100%);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 600ms cubic-bezier(0.25, 0.1, 0.25, 1),
              visibility 0s linear 600ms;
}
.intro.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 600ms cubic-bezier(0.25, 0.1, 0.25, 1),
              visibility 0s linear 0s;
}

.intro-stage {
  display: grid;
  place-items: center;
  padding: var(--space-8);
}

.intro-logo {
  display: block;
  width: min(680px, 84vw);
  height: auto;
  filter: drop-shadow(0 30px 80px rgba(0,0,0,0.7));

  /* Reveal: fade + subtle scale up. Smooth, no bounce. */
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 1400ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.intro.is-active .intro-logo {
  opacity: 1;
  transform: scale(1);
}

/* Exit: overlay fades out, logo drifts up slightly */
.intro.is-leaving {
  opacity: 0;
  transition: opacity 1100ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 1100ms;
}
.intro.is-leaving .intro-logo {
  opacity: 0;
  transform: scale(1.02) translateY(-6px);
  transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 1100ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Skip button */
.intro-skip {
  position: absolute;
  top: clamp(var(--space-4), 3vw, var(--space-8));
  right: clamp(var(--space-4), 3vw, var(--space-8));
  background: transparent;
  border: 1px solid rgba(241,231,210,.2);
  color: rgba(241,231,210,.55);
  font: 500 11px/1 var(--f-body);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 500ms ease-out 400ms,
              color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  z-index: 5;
}
.intro.is-active .intro-skip { opacity: 1; }
.intro.is-leaving .intro-skip { opacity: 0; transition: opacity 300ms ease-out; }
.intro-skip:hover {
  color: var(--cream);
  border-color: rgba(241,231,210,.5);
  background: rgba(241,231,210,0.04);
}

body.intro-active { overflow: hidden; }

/* Site fades in smoothly behind the intro as the intro leaves */
body.intro-active #main,
body.intro-active .site-header {
  opacity: 0;
  transform: translateY(8px);
}
body.site-reveal #main,
body.site-reveal .site-header {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 1100ms cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 1100ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
  body.intro-active #main,
  body.intro-active .site-header { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   FOOTER LOGO
   ============================================================ */
.foot-logo {
  display: block;
  width: clamp(200px, 24vw, 280px);
  height: auto;
  margin: 0 0 var(--space-6) 0;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5));
}