/* The header (with its optional hero) and the footer. */

.site-header { --pride-inset: clamp(20px, 2.6vw, 44px); position: relative; background: var(--navy); color: var(--on-navy); overflow: hidden; }
/* A pride stripe hanging from the top edge, top right, as on the Brats site; repeated on the
   footer's top edge. */
.site-header::before, .site-footer::after {
  content: ""; position: absolute; top: 0; right: var(--pride-inset); z-index: 2; width: clamp(150px, 30vw, 432px); height: 9px;
  background: var(--pride); pointer-events: none;
}
.site-header-stripe { height: 9px; }

.site-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 16px; position: relative; z-index: 1; }

.site-brand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); color: var(--on-navy); text-decoration: none; }
.site-brand:hover { color: var(--on-navy); }
.site-brand span { font-family: var(--font-display); font-weight: 700; font-size: 23px; }

.site-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; }
.site-menu a:not(.btn) {
  display: inline-flex; align-items: center; min-height: var(--tap);
  color: var(--on-navy-body); font-weight: 600; font-size: 15px; text-decoration: none;
}
.site-menu a:not(.btn):hover, .site-menu a[aria-current] { color: var(--on-navy); }
.site-menu a[aria-current]:not(.btn) { box-shadow: inset 0 -2px 0 var(--accent); }

.site-menu-button {
  display: none; width: var(--tap); height: var(--tap); align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-small); background: transparent; color: var(--on-navy); cursor: pointer;
}

@media (max-width: 760px) {
  .site-menu-button { display: inline-flex; }
  .site-menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 12px; }
  .site-menu a:not(.btn) { border-top: 1px solid var(--navy-line); }
  .site-menu .btn { margin-top: 12px; }
  .is-menu-open .site-menu { display: flex; }
}

/* Pitch markings behind the header: try lines, 22s and halfway. */
.site-pitch-lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.08; stroke: var(--on-navy); stroke-width: 3; pointer-events: none; }
.site-pitch-lines .is-dashed { stroke-width: 2; stroke-dasharray: 24 18; }
.site-header > .cut { position: relative; z-index: 1; }

/* A page's title band, under the nav. */
.page-band { position: relative; z-index: 1; padding-block: 40px 40px; }
.page-band h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 800; max-width: 820px; }
.page-band p:not(.eyebrow) { margin-top: 18px; max-width: 640px; font-size: 19px; color: var(--on-navy-body); }
.page-band-center { text-align: center; }
.page-band-center h1, .page-band-center p:not(.eyebrow) { margin-inline: auto; }

.site-footer { position: relative; background: var(--night); color: var(--on-night); padding-block: 56px 40px; font-size: 15px; }
.site-footer-hoops { position: absolute; inset: 0 0 auto; }
.site-footer { --pride-inset: var(--gutter); }
.site-footer a { color: var(--on-night); text-decoration: none; }
.site-footer a:hover { color: var(--on-navy); text-decoration: underline; }
.site-footer-cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
.site-footer-about { max-width: 340px; }
.site-footer-about p + p { margin-top: 10px; }
.site-footer-about a { color: var(--on-navy); }
.site-footer-name { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--on-navy); }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 24px 56px; }
.site-footer-links div { display: grid; align-content: start; gap: 2px; }
.site-footer-links a { display: inline-flex; align-items: center; min-height: 36px; }
.site-footer-head { margin-bottom: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-navy); }
.site-footer-base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  margin-top: 44px; padding-top: 28px; border-top: 1px solid rgb(255 255 255 / 0.1);
}
.site-footer-company { display: inline-flex; align-items: center; min-height: var(--tap); }
.site-footer-company img { width: 122px; height: auto; }
.site-footer-small { font-size: 13px; color: var(--on-night-muted); }
.site-footer-small a { color: var(--on-night); font-weight: 700; }