/* Cross-browser layout stabilizers. Kept separate so responsive rules override
   the original visual styles without depending on browser-specific blending. */
html {
  width: 100%;
  min-width: 320px;
  overflow-x: hidden;
}

body {
  width: 100%;
  min-width: 320px;
  overflow-x: hidden;
}

*, *::before, *::after { box-sizing: border-box; }

.hero {
  height: min(720px, calc(100svh - 76px));
  min-height: 570px;
  background: #183d5c;
  isolation: isolate;
}

/* Explicit stacking avoids blend-mode colour shifts and negative-z bugs. */
.hero::before {
  z-index: 0;
  opacity: .78;
  mix-blend-mode: normal;
  filter: saturate(.9) contrast(1.05);
}

.hero::after { z-index: 1; }
.hero-grid { z-index: 2; }
.orb { z-index: 3; mix-blend-mode: normal; opacity: .5; }
.hero-content, .hero-side-note { z-index: 4; }
.ticker { z-index: 5; }

.intro-layout,
.how-heading,
.steps,
.how-detail,
.program-guide,
.projects-head,
.project-grid,
.faq {
  max-width: 1420px;
  margin-left: auto;
  margin-right: auto;
}

.intro-layout { max-width: 1300px; }

.steps > *,
.project-grid > *,
.intro-layout > *,
.rsvp-section > *,
.faq > *,
.program-guide > *,
.program-guide li > * {
  min-width: 0;
}

.rsvp-section {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
}

@media (max-width: 1060px) {
  .hero { height: min(680px, calc(100svh - 70px)); }
  .rsvp-section { grid-template-columns: minmax(0, 1fr) minmax(330px, .75fr); }
}

@media (max-width: 800px) {
  .hero { height: 620px; min-height: 0; }
  .hero-content { top: 47%; }
  .rsvp-section { grid-template-columns: 1fr; }
  .rsvp-button { width: 100%; }
  .program-guide li { grid-template-columns: 130px minmax(0, 1fr); }
}

@media (max-width: 580px) {
  .hero { height: 600px; }
  .hero::before { background-position: 57% center; opacity: .68; }
  .hero-content { top: 48%; }
  .hero h1 { max-width: 100%; overflow-wrap: anywhere; }
  .ticker span { animation-duration: 30s; }
  .program-guide li { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .topbar { padding-inline: 4vw; }
  .mini-cta { padding: .5rem .55rem; font-size: .58rem; }
  .hero h1 { font-size: 3.55rem; }
  .rsvp-button { font-size: 3.35rem; }
}