/* =========================================================================
   TougeNation: Ozarks — home page
   Layered on top of base.css + theme.css (in /home/) and reuses their tokens
   + motion hooks. The LAYOUT here is original to the home page — it does
   NOT reuse the partner-animation-template deck's .cover / .section__head /
   .section__num / .statgrid structures.

   Tokens (from theme.css):
     --c-paper #070B0D · --c-ink #F1F5F9 · --c-red #B6F109 (lime)
     --c-tan #014B43 (teal) · --c-graphite #E5E5E6 · --c-mute #9CA3AF · --c-faint #4B5563
     --f-display (Orbitron) · --f-body (forma-djr-micro/Inter) · --f-mono (JetBrains)
     --s-* · --page-max · --page-gutter · --band-h · --rule-w · --ease-out · --transition
   Motion (from spotlight.js, gated by html.js + prefers-reduced-motion + ?motion=force):
     [data-reveal] / [data-reveal-stagger] scroll fade, [data-count-to] count-up,
     .scroll-progress, .cursor-spotlight, .section__title per-letter hover roll.
   ========================================================================= */

/* ----- Section-local event brand color -----
   Lime green #B6F109 (same as --c-red / the company lime). The previous
   separate --c-orange (#F17D08) was the FallFest event color — countdown
   FEST, kicker labels, day headers, time stamps, the CTA band. That's
   been retired: the page is one lime system now, no separate event
   color. The countdown NUMBERS override this to --c-ink (white) so the
   strip reads as a white-with-lime moment, not an all-lime wall. */
html {
  background: var(--c-paper);
}
:root {
  --c-orange: #B6F109;
}

/* ----- Safety net: prevent any rogue child element from causing horizontal
   scroll on small viewports. The mobile 480px media query handles the named
   overflow sources; this catches anything we miss without hiding real
   content. ----- */
body {
  overflow-x: hidden;
  /* Watermark logomark: a giant, very-faint, fixed-position mark
     centered behind the entire page. The hero photo covers it
     during the hero, then the black sections (countdown, day
     cards, signup, footer) reveal it as the page scrolls.
     background-attachment: fixed keeps the mark in place while
     content scrolls over it.

     Sizing: 80vw wide, auto height, centered both horizontally and
     vertically (background-position: center center). The
     watermark-grey.png is a light-grey fill (~25/255, ~10%
     brightness) on the original mark's alpha mask, so it reads as
     a light-on-dark watermark rather than dark-on-dark. Same
     faintness as before — just inverted in tone. The signup
     section and footer drop their own background-color so the
     body watermark shows through them too. */
  background-image: url("/watermark-grey.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 80vw auto;
  background-attachment: fixed;
}
/* Hide the cursor spotlight effect on the home page. The element is still
   created by spotlight.js, so we can't stop it cheaply — but a display:none
   override stops the green glow from following the cursor around the home
   page. The partner-animation-template deck keeps the effect. */
.cursor-spotlight { display: none; }

/* ----- Shared kicker (mono lime label above section titles) ----- */
.kicker {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin: 0 0 var(--s-3);
}

/* =====================================================================
   Sticky nav — reuses .band (sticky bar, bottom rule, mono) but home-shaped
   ===================================================================== */
.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink);
  text-decoration: none;
}
/* Brand mark (logomark PNG). The .nav--centered modifier makes
   this a solo element in the band, so we can size it up to a
   header presence. 72px reads as a strong brand mark centered in
   the 56px band — the mark overflows the band height slightly,
   which gives it visual weight without competing with the hero
   wordmark below. The "inverse" version of the logomark is
   designed for dark backgrounds and renders as-is. */
.nav__brand-mark {
  width: 72px;
  height: 72px;
}
/* Centered nav — single anchor (just the logomark) instead of the
   three-column brand | meta | cta layout. Override the .band base
   justify-content from space-between to center. */
.nav--centered {
  justify-content: center;
}
.nav__meta {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-graphite);
}
.nav__cta {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-red);
  text-decoration: none;
  transition: transform 0.15s var(--ease-out);
}
.nav__cta::after {
  content: " →";
}
.nav__cta:hover {
  transform: translateX(3px);
}

/* =====================================================================
   Hero — full-bleed poster (centered title over darkened image)
   ===================================================================== */
.hero {
  position: relative;
  /* 100svh = "small viewport height" — uses the visible viewport when
     the mobile address bar is showing, so the centered text stays
     inside the photo on phones. 100vh fallback for browsers without
     svh support (older Safari). dvh is the "dynamic" version that
     grows as the address bar collapses; svh is more stable for
     centered layouts. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  overflow: hidden;
  /* No background fill — the body watermark shows through once the photo
     fades out on scroll. The photo's bottom-edge mask (on .hero__media)
     still blends the photo into whatever is behind it, and the next
     section is also transparent, so no hard-line seam appears. */
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Bottom fade mask lives on the static .hero__media container, NOT
     on the <img>. The image scales via Ken Burns (transform), so a
     mask on the image would zoom along with the photo content — at
     scale 1.12 the visible bottom of the image is the mask's
     aggressive zone, which makes the seam reappear mid-animation.
     Masking the container keeps the fade position fixed regardless
     of where the KB transform takes the photo inside it. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 60%,
    rgba(0, 0, 0, 0.7) 78%,
    rgba(0, 0, 0, 0.25) 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 60%,
    rgba(0, 0, 0, 0.7) 78%,
    rgba(0, 0, 0, 0.25) 92%,
    transparent 100%
  );
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Hero photo is rendered static — no Ken Burns. The new source (yellow
     Evo + mirror + curved road) already has heavy in-frame motion blur
     on the right side, so a CSS zoom would fight the photo and read as
     seasick. Static = the photo's own speed lines do the work. */
}
/* Sponsor-style fade: solid paper on the left (where the title sits) bleeding
   to transparent on the right so the photo reads through, plus a bottom blend
   into the stat strip. Same gradient shape as .cover__photo on the sponsor page. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      #070B0D 0%,
      #070B0D 46%,
      rgba(7, 11, 13, 0) 82%),
    linear-gradient(180deg,
      rgba(7, 11, 13, 0.35) 0%,
      rgba(7, 11, 13, 0) 26%,
      rgba(7, 11, 13, 0) 72%,
      #070B0D 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding: 0 var(--page-gutter);
  max-width: 40rem;
}
.hero__kicker {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-red);
  margin: 0 0 var(--s-5);
}
.hero__kicker .kicker-fest {
  color: var(--c-orange);
}
.hero__kicker .kicker-fall {
  color: var(--c-ink);
}
.hero__title {
  font-family: var(--f-display);
  font-weight: 900;
  /* Floor 2.5rem (40px), 10vw slope, cap 9rem (144px). The base
     rule scales the wordmark smoothly from 144px on a 1440px
     desktop down to 40px on a 320px phone. No breakpoint overrides
     — the breakpoints below only flip white-space to allow wrapping
     if the 10vw scale still overflows on a given viewport. The
     .hero__inner has no max-width cap (set in HomePage.tsx inline
     <style>), so the wordmark spans the full viewport on desktop
     — it's the brand mark, not a headline. */
  font-size: clamp(2.5rem, 10vw, 9rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin: 0;
  /* Keep the wordmark on one line at desktop so it overflows the
     .hero__inner (40rem) and stretches across the full hero. The
     480px media query below drops this to allow wrapping. */
  white-space: nowrap;
}
.hero__tag {
  font-family: var(--f-display);
  font-weight: 700;
  /* Floor 1.15rem (18.4px), 3vw slope, cap 2.5rem (40px). Same
     approach as the wordmark — no breakpoint overrides. Scales
     smoothly from 40px on a 1440px desktop down to 18.4px on a
     320px phone. The 3vw slope is 30% of the wordmark's 10vw
     slope, so the tagline stays a readable proportion below the
     wordmark at every viewport (roughly 1:3 wordmark:tagline). */
  font-size: clamp(1.15rem, 3vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--c-graphite);
  /* margin-top: 0.6em — relative to the tagline's own font-size so
     the gap scales with the wordmark. Was var(--s-5) = 24px fixed,
     which looked tight against the 144px desktop wordmark (17% of
     wordmark height) and loose against the 32px phone wordmark
     (75% of wordmark height). 0.6em keeps the ratio constant. */
  margin: 0.6em 0 0;
  white-space: nowrap;
}
.hero__tag em {
  font-style: normal;
  color: var(--c-red);
  display: inline-block;
  transition: transform 0.15s var(--ease-out);
  transform-origin: left center;
}
.hero__tag em:hover {
  transform: scale(1.06);
}

/* =====================================================================
   Stat strip — slim, unboxed, count-up
   ===================================================================== */
.stats {
  /* The sticky nav is position:fixed (HomePage.tsx overrides .band.nav) and
     floats above the page content. Without top padding, the first 56px of
     the stats strip is permanently clipped by the nav once it becomes
     visible (scrollY > 100). --band-h matches the nav height.
     No top/bottom borders — the page reads as one continuous surface now
     that the hero photo fades into paper and the stats strip sits inside
     the same color field. */
  padding-top: var(--band-h);
}
.stats__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s-6) var(--page-gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.stat {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  justify-content: center;
}
.stat__num {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, var(--t-2xl));
  color: var(--c-orange);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--t-sm);
  letter-spacing: 0.05em;
  color: var(--c-graphite);
}
/* Countdown — replaces the 3/2/1 stats strip with a live D/H/M/S countdown
   to the FallFest kickoff (Oct 2, 2026 6:00 PM CST). The strip is tall
   enough (FALLFEST title + 4-cell countdown + paddings) that when scrolled
   to, the FALLFEST block is well below the sticky nav — so we can cancel
   the .stats nav-offset (var(--band-h) padding-top) on this variant and
   keep the visible top and bottom padding equal at var(--s-7). */
.stats--countdown {
  padding-top: 0;
}
.stats--countdown .stats__inner {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: var(--s-4);
  /* Top padding tuned to 75px. Was calc(--s-7 + --s-9) = 9rem = 144px
     (which mirrored the bottom gap perfectly but felt too airy), then
     100px (still a touch loose). Bottom stays at --s-7 (48px) since
     the glance section's own top padding (--s-9 = 96px) still gives
     the strip ~144px of visible breath below it — only the top half
     of the symmetry is tuned down. */
  padding: 75px var(--page-gutter) var(--s-7);
}
.countdown__event {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 0.05em;
}
.countdown__event + .countdown__rule {
  /* Short hairline between FALLFEST title and the date+countdown block.
     80px wide so it reads as a connector, not a wall. 5px vertical
     breath on each side — the divider is now a tight typographic mark
     tucked right under the title. FALLFEST-bottom → hairline → date-top
     is now 16 (grid gap) + 5 (mt) + 1 (line) + 5 (mb) + 16 (grid gap)
     = 43px ≈ 42. */
  display: block;
  width: 80px;
  height: 1px;
  background: var(--c-faint);
  margin: 5px auto;
  border: 0;
}
.countdown__event-fall {
  color: var(--c-ink);
}
.countdown__event-fest {
  color: var(--c-orange);
}
.countdown__info {
  /* The date + countdown sit together as one info block under the
     hairline. Stacked, centered, with the date above the numbers so
     it reads as the answer to "when" and the numbers as "how long
     until then." */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}
.countdown__event-date {
  font-family: var(--f-mono);
  font-size: var(--t-lg);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-graphite);
  margin: 0;
}
.countdown {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--s-3);
  font-variant-numeric: tabular-nums;
}
.countdown__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4ch;
}
.countdown__num {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--c-orange);
  line-height: 1;
  letter-spacing: -0.02em;
}
.countdown__label {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  color: var(--c-graphite);
  margin-top: 0.4rem;
}
.countdown__sep {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: clamp(1.25rem, 3vw, 2.25rem);
  color: var(--c-faint);
  line-height: 1;
  /* Parent uses align-items:baseline, so the colon's text baseline aligns
     with the cells' first text baseline — which is the digit. No offset
     needed. The separator has no label so it visually sits at the digit row
     while the cell carries its label below. */
}
.countdown__live {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-orange);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.countdown__live-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--c-orange);
  box-shadow: 0 0 0 0 rgba(182, 241, 9, 0.6);
  animation: countdown-pulse 1.6s ease-out infinite;
}
@keyframes countdown-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(182, 241, 9, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(182, 241, 9, 0); }
  100% { box-shadow: 0 0 0 0   rgba(182, 241, 9, 0); }
}

/* =====================================================================
   Home section frame (open rhythm — no deck borders between sections)
   ===================================================================== */
.home-section {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s-9) var(--page-gutter);
  scroll-margin-top: var(--band-h);
}
/* Give the schedule section extra breathing room before the full-bleed teal
   CTA band so the transition into the sign-up block reads as deliberate. */
#schedule {
  padding-bottom: 14rem;
}

/* =====================================================================
   Section banner — full-bleed photo behind a section title, same left→right
   paper fade as the hero/cover. The title sits left on the dark side; the
   section body (highlights, etc.) flows below on the dark page.
   ===================================================================== */
.home-section--glance {
  /* The glance section is two columns of full day blocks (header +
     photo + copy + schedule list). 1200px gives each column ~530px
     of breathing room without the section dominating the page on
     wide desktops.

     Top padding trimmed from --s-7 (48px) to --s-3 (12px) so the
     FRIDAY/SATURDAY headers sit closer to the countdown strip. Bottom
     padding (60px) gives a quiet lead-in to the signup form below. */
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s-3) var(--page-gutter) 3.75rem;
}

/* =====================================================================
   Glance cards — two per-day photo cards (Friday | Saturday)
   Each card is a self-contained photo + scrim + text unit. Side-by-side
   on desktop, stacked on mobile. Replaces the previous single full-bleed
   banner with three highlights.
   ===================================================================== */
/* =====================================================================
   Glance + Schedule — per-day cohesive blocks, side-by-side
   Each .glance__item is one complete day: header, photo, copy, schedule
   list. Two items sit side-by-side on desktop, stack on mobile.
   ===================================================================== */
.glance {
  display: grid;
  /* minmax(0, 1fr) lets each column shrink below its content's intrinsic
     min-width. Without the 0 floor, the wider day header (SATURDAY +
     TICKETS REQUIRED) would force that column to balloon and break the
     side-by-side balance. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-9);
}
.glance__item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.glance__card {
  position: relative;
  /* 16:9 keeps the cards short and wide. With the description now
     living below the photo, the card only carries the kicker + title
     overlay — much less text to fit, so the dark scrim band is short. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border-radius: 4px;
}
.glance__card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.glance__card-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Short dark band at the bottom only — just enough to keep the
     date + title overlay readable. With the description moved below
     the card, the overlay is now small (kicker + 1 line of title)
     so the scrim doesn't need to cover much. */
  background: linear-gradient(180deg,
    rgba(7, 11, 13, 0) 0%,
    rgba(7, 11, 13, 0) 70%,
    rgba(7, 11, 13, 0.5) 88%,
    rgba(7, 11, 13, 0.92) 100%);
}
.glance__card-scrim--saturday {
  background: linear-gradient(180deg,
    rgba(7, 11, 13, 0) 0%,
    rgba(7, 11, 13, 0) 70%,
    rgba(7, 11, 13, 0.5) 88%,
    rgba(7, 11, 13, 0.92) 100%);
}
.glance__card-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s-5) var(--s-5);
  /* Left-aligned. The kicker + title are short labels and read
     naturally bottom-left. With the description below the card,
     there's no need for the right-align/diagonal-scrim trick. */
  align-items: flex-start;
  text-align: left;
}
.glance__card-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin: 0;
}
/* Mobile: stack to single column. Aspect 4:3 gives the photo more
   vertical real estate. Copy sits below the card. */
@media (max-width: 820px) {
  .glance { grid-template-columns: 1fr; gap: var(--s-7); }
  .glance__card { aspect-ratio: 4 / 3; }
  .glance__card-inner { padding: var(--s-5) var(--s-4); }
  .glance__card-title { font-size: 1.5rem; }
  /* Hero wordmark: at ≤820px the desktop font-size is preserved
     (clamp(2.5rem, 10vw, 9rem) scales smoothly down to 10vw). What
     changes here is the wrapping behavior — desktop keeps nowrap so
     the wordmark reads as a single horizon-spanning brand mark, but
     on tablet/phone the wordmark wraps to fit the content area if
     the 10vw scale still overflows. The 640px and 480px breakpoints
     below don't override font-size either, for the same reason. */
  .hero__title {
    white-space: normal;
  }
  .hero__tag {
    white-space: normal;
  }
}

.home-section__head {
  margin-bottom: var(--s-7);
}
.home-section__title {
  /* Per-letter split turns each char into an inline-block, so a long title
     can break mid-word and strand a single trailing letter. nowrap keeps the
     whole title on one line; the clamp below is sized so it fits the section
     width down to mobile. */
  white-space: nowrap;
  font-size: clamp(1.75rem, 4.5vw, 3rem);
}

/* =====================================================================
   Highlights — unboxed editorial 3-column
   ===================================================================== */
.highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7);
}
.hl {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.hl__num {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-orange);
  padding-bottom: var(--s-3);
  border-bottom: var(--rule-w) solid var(--c-orange);
  align-self: start;
}
.hl__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-lg);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin: 0;
  transition: transform 0.15s var(--ease-out);
  transform-origin: left center;
}
.hl__title:hover {
  transform: scale(1.03);
}
.hl__body {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--c-graphite);
  margin: 0;
}

/* =====================================================================
   Schedule — each day is now nested inside its .glance__item. The
   list/head/intro classes are reused; no top-level grid is needed.
   ===================================================================== */
.day__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: var(--rule-w) solid var(--c-ink);
}
.day__name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-lg);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin: 0;
}
.day__date {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  /* matches the faded "October 2–3, 2026 · Springdale, AR" line in the CTA band */
  color: rgba(241, 245, 249, 0.75);
  /* nowrap so 'October 2' stays on one line. The header content (name +
     date + badge) overflows the 354px column slightly on desktop — the
     badge's right edge bleeds past the photo's right edge by a few px.
     Cleaner than wrapping 'October 2' to 'October / 2'. */
  white-space: nowrap;
}
.day__copy {
  /* Combined day description (was: .glance__card-body + .day__intro).
     Single paragraph that sits between the photo and the schedule list.
     Spans the photo's full width with 5px inset, sits at 15px graphite
     so it reads as the "real" description without competing with the
     schedule list rows below. No margin-bottom — the .glance__item
     flex gap (--s-5 = 24px) carries the breath between the copy and
     the list, keeping both spacings consistent with the rest of the
     day block. */
  font-family: var(--f-mono);
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-graphite);
  margin: 0;
  max-width: 100%;
  padding-left: 5px;
  padding-right: 5px;
  min-height: 90px;
}

/* =====================================================================
   Signup section
   Sits between the day cards and the footer. Same dark paper as the
   rest of the page so it reads as a continuation. The form is
   block-centered (margin: auto) so it stays visually centered without
   the section needing to be a fixed height.
   ===================================================================== */
.signup-section {
  /* No background — sits over the body watermark so the logomark
     shows through the signup section. The body is var(--c-paper)
     so the section still reads as dark paper. */
  padding: 0 var(--page-gutter) 3.75rem;
  text-align: center;
}

/* =====================================================================
   Footer
   The signup has been pulled out into its own section above. Footer
   now holds only social + bottom (copyright/links). Sits flush against
   the dark paper of the signup section.
   ===================================================================== */
.site-footer {
  /* No background — sits over the body watermark so the logomark
     shows through the footer. Body is var(--c-paper) so the
     footer still reads as dark paper, and the border-top hairline
     separates it visually from the signup section above. */
  padding: var(--s-5) var(--page-gutter);
  border-top: 1px solid rgba(241, 245, 249, 0.08);
}
.site-footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  gap: var(--s-6);
  justify-items: center;
}
/* Signup sits at the top of the footer, centered, 28rem wide so the
   form has a clear "this is the final action" weight without
   spanning the page. */
.site-footer__signup {
  width: 100%;
  max-width: 28rem;
  margin-bottom: var(--s-3);
}
.site-footer__signup.signup {
  /* .signup is grid display; we want each row (label+field, button,
     note) to take the full 28rem width instead of hugging the field. */
  width: 100%;
}

/* Form (sits on the dark paper band) */
.signup {
  display: grid;
  gap: var(--s-3);
  max-width: 26rem;
  margin: 0 auto;
  text-align: left;
}
.signup__input {
  /* Slight off-white tint so the input reads as a raised field on the
     dark paper band (the old rgba(0,0,0,0.22) only worked against the
     prior orange background). */
  background: rgba(241, 245, 249, 0.06);
  color: var(--c-ink);
  border: var(--rule-w) solid rgba(241, 245, 249, 0.25);
  border-radius: 0;
  padding: var(--s-3) var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-base);
  outline: none;
  transition: border-color var(--transition);
}
.signup__input::placeholder {
  color: rgba(241, 245, 249, 0.4);
}
.signup__input:focus-visible {
  border-color: var(--c-orange);
  outline: 2px solid var(--c-orange);
  outline-offset: 1px;
}
.signup__button {
  /* On the dark paper band the button needs a visible boundary. Paper
     bg with orange text + a 1px orange border keeps the action weight
     without making the band loud again. */
  background: var(--c-paper);
  color: var(--c-orange);
  border: var(--rule-w) solid var(--c-orange);
  border-radius: 0;
  padding: var(--s-3) var(--s-5);
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: var(--t-sm);
  cursor: pointer;
  transition: transform 0.15s var(--ease-out);
}
.signup__button:hover:not(:disabled) {
  /* On hover, invert: orange fills, ink text. The opposite of rest. */
  background: var(--c-orange);
  color: var(--c-ink);
}
.signup__button:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 2px;
}
.signup__button:disabled {
  opacity: 0.5;
  cursor: default;
}
.signup__cta {
  font-family: var(--f-body);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--c-ink);
  margin: 0;
  text-align: center;
}
.signup__status {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  margin: 0;
}
.signup__status.is-success {
  color: var(--c-orange);
}
.signup__status.is-error {
  color: #ff7a7a;
}

.site-footer__social {
  display: flex;
  justify-content: center;
  gap: var(--s-5);
}
.site-footer__social-link {
  display: inline-flex;
  color: var(--c-mute);
  text-decoration: none;
  transition: color var(--transition), transform 0.15s var(--ease-out);
}
.site-footer__social-link:hover {
  color: var(--c-orange);
  transform: scale(1.12);
}
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-2);
}
.site-footer__copy {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--c-mute);
  margin: 0;
}
.site-footer__contact {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--c-mute);
  text-decoration: none;
}
.site-footer__contact:hover {
  color: var(--c-orange);
}

/* ----- Responsive ----- */
/* On small phones the section titles can't fit one line at a readable size.
   Switch the per-letter spans from inline-block back to inline so words can't
   break mid-word (no orphan trailing letter) — breaks happen at spaces only.
   The hover roll is inline-block-only, so it's off on touch sizes (fine). */
@media (max-width: 560px) {
  .home-section__title {
    white-space: normal;
  }
  .home-section__title .title-char {
    display: inline;
  }
}
/* Small-phone-specific fixes (iPhone SE 320, small Androids). Drops the
   hard white-space:nowrap on hero title, tagline, and day badge — these
   force 343–387px wide inline runs that overflow a 320px viewport. Also
   tightens the days grid gap and widens the hero veil so the text has a
   solid dark backdrop instead of sitting on top of the car. */
/* Tablet and phone (≤640px): allow the wordmark and tagline to wrap
   and shrink. The 480px small-phone block below tightens further
   for sub-480px viewports (iPhone SE, small Androids). Without this
   intermediate breakpoint, the desktop wordmark stays at clamp(3rem,
   11vw, 9rem) all the way down to 480px — at 412px (Note S20 Ultra)
   that's still 11vw = 45px and TOUGENATION is too wide to fit
   nowrap, so the T and N spill off the edges. */
@media (max-width: 640px) {
  /* Wordmark font-size: no override. The base rule
     (clamp(2.5rem, 10vw, 9rem)) scales smoothly down from desktop.
     At 640px: 10vw = 64px, which keeps the wordmark on one line
     comfortably. white-space: normal is already set in the 820px
     breakpoint above, so the wordmark will wrap if the 10vw scale
     still overflows at the smallest sizes. */
  .hero__tag {
    white-space: normal;
    /* Tagline font-size: no override. The base rule
       (clamp(1.15rem, 3vw, 2.5rem)) scales smoothly down from
       desktop. At 640px: 3vw = 19.2px, which sits well below the
       wordmark. white-space: normal is set in the 820px breakpoint
       above. */
  }
}
@media (max-width: 480px) {
  /* Wordmark font-size: no override at 480px. The base rule
     (clamp(2.5rem, 10vw, 9rem)) keeps shrinking as the viewport
     shrinks. At 320px: 10vw = 32px, floor 2.5rem = 40px wins, so
     the wordmark is 40px — fits "TOUGENATION" comfortably on a
     single line in a 320px viewport (40px × ~0.55 char-width × 11
     chars ≈ 242px, leaving 78px of margin). */
  .hero__tag {
    white-space: normal;
    /* Tagline font-size: no override at 480px. The base rule
       (clamp(1.15rem, 3vw, 2.5rem)) keeps shrinking as the viewport
       shrinks. At 320px: 3vw = 9.6px, floor 1.15rem = 18.4px wins,
       so the tagline is 18.4px — readable on a small phone. */
  }
  .day__badge {
    white-space: normal;
    max-width: 100%;
  }
  .day__head {
    flex-wrap: wrap;
  }
  .home-section__title {
    font-size: clamp(1.5rem, 8vw, 2.5rem);
  }
  /* .hero__veil: no mobile override. The radial halo set in
     HomePage.tsx inline <style> handles centered text legibility at
     all sizes; the old left-darker band was for the previous
     top-left text layout. */
}
@media (max-width: 820px) {
  /* Hero: keep the photo full-bleed and the text centered as an overlay
     at all viewport widths. The previous restack (text on a paper band,
     photo at 50vh below) was needed when the wordmark sat in the top-
     left corner and crashed into the Evo's body below ~820px. Now that
     the text is centered and the photo is grayscale with the car on the
     left half, there's no collision risk at any width — the centered
     wordmark sits over the empty road/treeline, not the car. Veil stays
     on to give the centered text a soft dark halo. */
  .highlights {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  /* On tablet/phone, contain the signup form so the input/button
     don't bleed to the page gutter. The form stays centered with auto
     margins, so it reads as a card rather than a full-bleed band. */
  .signup {
    max-width: 22rem;
  }
  /* On tablet/phone, shrink the CTA so the line doesn't wrap inside
     the narrower form. 24px fits a desktop 26rem form; 16px keeps
     "Be the first to hear when tickets drop." on one line at 22rem. */
  .signup__cta {
    font-size: var(--t-base);
  }
}
@media (max-width: 640px) {
  .nav__meta {
    display: none;
  }
  .stats__inner {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .stat {
    justify-content: flex-start;
  }
  .site-footer__bottom {
    gap: var(--s-2);
  }
}