/* ============================================================
   HOME — hero + condensed teaser sections that link out to the
   full pages (About / Conference / Delegates / Lineup / Schedule)
   ============================================================ */
.hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--nav-h);
  position: relative;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 14% 22%, rgba(23,16,13,.07), transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(23,16,13,.05), transparent 40%);
}
.hero-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(23,16,13,.1) 1px, transparent 1.4px);
  background-size: 16px 16px;
}

.hero-inner {
  /* .hero is a column flex container; a flex item with auto inline
     margins (from .container) shrink-wraps to content instead of
     stretching, so this needs an explicit width to actually fill
     the container box like every other section does. */
  width: 100%;
  position: relative; z-index: 2;
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  padding-block: var(--space-xl);
}
.hero-visual { display: flex; justify-content: center; order: -1; }

/* Poster-style outlined lettering — flat fill alone doesn't have enough
   contrast against the yellow hero bg (brass-on-brass is invisible,
   flame-on-brass is ~2:1), so every line gets a solid ink outline,
   same trick the key visual itself uses. */
.hero-title .line {
  display: block;
  color: var(--color-paper);
  font-size: clamp(2.6rem, 12vw, 8rem);
  -webkit-text-stroke: 3px var(--color-ink);
  paint-order: stroke fill;
  text-shadow:
    -2px -2px 0 var(--color-ink), 2px -2px 0 var(--color-ink),
    -2px  2px 0 var(--color-ink), 2px  2px 0 var(--color-ink);
}
.hero-title .line--accent { color: var(--color-flame); font-size: clamp(2.9rem, 14vw, 9.2rem); }
.hero-title .line--brass { color: var(--color-brass); }

.hero-sub {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--color-muted-on-yellow);
  max-width: 44ch;
  margin-top: var(--space-md);
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }

.scroll-cue {
  display: none;
  position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  z-index: 2; flex-direction: column; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-muted-on-yellow);
}
.scroll-cue::after {
  content: ""; width: 1px; height: 26px;
  background: linear-gradient(var(--color-ink), transparent);
  animation: scrollCue 1.6s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollCue {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  80%  { transform: scaleY(1) translateY(10px); opacity: 0; }
  100% { transform: scaleY(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue::after { animation: none; }
}

/* Hero badge sits directly on the yellow bg — the ring's default
   brass stroke and the circular text's default paper fill (tuned for
   the dark nav/footer badge) would both wash out here. */
.hero .badge-ring { stroke: var(--color-ink); }
.hero .badge-text { fill: var(--color-ink); }

@media (min-width: 768px) {
  .hero-inner { grid-template-columns: 1.3fr .7fr; padding-block: var(--space-2xl); }
  .hero-visual { order: 0; }
  .scroll-cue { display: flex; }
}

/* -- Teaser sections -- */
.teaser-cta { margin-top: var(--space-lg); }

/* .section-head itself carries no bottom margin (see components/section.css) -
   every section is expected to put the gap on its own next block instead.
   This one was missing it entirely, so the body copy sat flush against the
   "About Us" heading with no breathing room. */
.about-copy { margin-top: var(--space-md); }

/* The shared .section-head h2 rule caps headings at 16ch (good for short
   punchy titles elsewhere) and uses a larger clamp - together they forced
   this longer, count-driven line ("37+ Artists. One City's Sound.") to
   wrap awkwardly. Uncapped width + a smaller size keeps it on one line
   at normal desktop widths regardless of how many digits the count grows to. */
.lineup-heading {
  max-width: none;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .lineup-heading { white-space: normal; }
}

.about-teaser-grid {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  align-items: start;
}
@media (min-width: 768px) {
  .about-teaser-grid { grid-template-columns: 1.3fr 1fr; }
}
.about-teaser-grid p { font-size: 1.05rem; line-height: 1.75; }

.connect-copy { max-width: 52ch; margin-top: var(--space-sm); font-size: 1.02rem; }
.connect-actions { margin-top: var(--space-lg); display: flex; }

/* -- Video teaser -- */
.video-teaser .container { text-align: center; }
.video-teaser .eyebrow { justify-content: center; }
.video-teaser .section-head { margin-inline: auto; }
.video-embed {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  margin: var(--space-lg) auto 0;
  background: var(--color-ink);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}