/* Element defaults, resets and the shared layout primitives. */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cloud);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: none;
  background: none;
  color: inherit;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

blockquote {
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Numerals that don't jump width while animating. */
.stat-font {
  font-family: var(--font-ui);
}

/* ---------- layout primitives ---------- */

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 640px) {
  .wrap {
    padding: 0 32px;
  }
}

section {
  padding: 72px 0;
}

@media (min-width: 640px) {
  section {
    padding: 100px 0;
  }
}

/* Compact dark banner used as the masthead of every interior page.

   Padding is deliberately lopsided. The banner sits directly under the header
   and shares its ink background, so an equal 64px above read as one oversized
   empty navy block rather than as a masthead — there is no edge for the top
   padding to separate the title from. Below the title the space still does
   work, holding the banner apart from the page body it butts against. */
.section-banner {
  padding: 34px 0 58px;
}

@media (min-width: 640px) {
  .section-banner {
    padding: 40px 0 64px;
  }
}

.section-mist {
  background: var(--mist);
}

.section-ink {
  background: var(--ink);
  color: #fff;
}

.section-royal {
  background: var(--royal);
  color: #fff;
}

/* ---------- routed pages ----------
   Every page ships in the same document; the router adds .active to
   exactly one of them. */

.page {
  display: none;
}

.page.active {
  display: block;
}

/* ---------- shared type ---------- */

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--royal-light);
}

.eyebrow.on-dark {
  color: var(--gold);
}

.eyebrow.pill {
  display: inline-flex;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  background: rgba(var(--gold-rgb), 0.1);
}

.head-center {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

h2.display {
  margin-top: 12px;
  font-size: 32px;
  font-weight: 800;
}

@media (min-width: 640px) {
  h2.display {
    font-size: 44px;
  }
}

.page-title {
  color: #fff;
}

.lede {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-60);
}

.lede.on-royal {
  color: rgba(255, 255, 255, 0.75);
}

.lede.on-ink {
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- motion ---------- */

.fade-up {
  animation: fade-up 0.7s var(--ease-out-expo) both;
}

.delay1 {
  animation-delay: 0.15s;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- utilities ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Court-line flourish between sections. */
.court-divider {
  line-height: 0;
}

.court-divider svg {
  display: block;
  width: 100%;
  height: 40px;
}