/* ==========================================================================
   HYPE HOOPS — Design System
   Palette: OG kit — the club gradient #79B9E8 → #425FAA → #5E13AA
   (see HYPE Hoops OG Design System/readme.md). Tokens imported below are
   consumed as-is; this file only aliases the site's existing component
   variable names onto them so every page re-themes without markup changes.
   ========================================================================== */

@import url("hype/fonts.css");
@import url("hype/colors.css");
@import url("hype/typography.css");
@import url("hype/spacing.css");
@import url("hype/effects.css");
@import url("hype/base.css");

:root {
  /* Brand — legacy names aliased onto real OG tokens (no invented colors).
     Violet = CTA/badge/headline emphasis, Sky = links & dark-surface accent —
     matches the club's finalized primary/secondary accent roles. */
  --purple: var(--hype-violet);
  --purple-bright: var(--hype-iris);
  --blue: var(--hype-sky);

  /* Derived — gradient transition stops */
  --mid: var(--hype-cobalt);
  --deep: var(--court-charcoal);
  --ink: var(--court-black);

  /* Neutrals */
  --paper: var(--court-bone);
  --paper-raised: var(--court-white);
  --line-light: rgba(11, 11, 11, 0.12);
  --line-dark: rgba(255, 255, 255, 0.14);

  /* Text on light surfaces */
  --text: var(--court-black);
  --text-soft: rgba(11, 11, 11, 0.72);
  --text-faint: rgba(11, 11, 11, 0.52);

  /* Text on dark surfaces */
  --text-on-dark: var(--court-white);
  --text-on-dark-soft: rgba(255, 255, 255, 0.72);
  --text-on-dark-faint: rgba(255, 255, 255, 0.52);

  /* Semantic */
  --success: var(--status-win);

  /* Layout */
  --container: var(--max-width);
  --radius-sm: var(--radius-xs); /* controls: 2px, hard-edged kit */
  /* --radius-md / --radius-lg come from effects.css (8px / 14px) unchanged */
}

/* ---- Reset ---- */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  background: var(--ink);
}
/* Firefox-only fallback (flat color, no image thumbs supported there).
   Scoped so it doesn't win over ::-webkit-scrollbar-thumb in Chrome/Edge,
   which now prioritizes scrollbar-color when both are set on the page. */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: var(--purple) var(--court-charcoal);
    scrollbar-width: thin;
  }
}
::-webkit-scrollbar {
  width: 26px;
  height: 26px;
}
::-webkit-scrollbar-track {
  background: var(--court-charcoal);
}
::-webkit-scrollbar-thumb {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.5262 17.4999C18.4887 22.7611 11.7612 24.5637 6.49994 21.5262C1.23873 18.4886 -0.563901 11.7611 2.47367 6.49988C5.51123 1.23866 12.2387 -0.563962 17.4999 2.4736C22.7612 5.51117 24.5638 12.2387 21.5262 17.4999ZM5.84382 7.87995C5.25279 7.64272 4.74291 7.45257 4.3292 7.30543C5.59153 5.24057 7.56267 3.85898 9.74648 3.29362C9.77176 3.62621 9.82851 4.00289 9.93722 4.40861C10.3269 5.86297 11.3579 7.58777 13.75 8.96886C14.0666 9.15165 14.3765 9.31079 14.6793 9.44842C14.4757 10.219 14.1794 11.0351 13.7614 11.8848C13.3566 11.6365 12.936 11.3857 12.5 11.1339C9.85449 9.60655 7.52076 8.55305 5.84382 7.87995ZM12.7587 13.6161C12.3555 13.3682 11.9358 13.1176 11.5 12.866C8.94938 11.3934 6.70297 10.3799 5.09882 9.73602C4.44209 9.47241 3.89359 9.27099 3.47664 9.12556C2.8887 10.8629 2.86217 12.7007 3.33339 14.4015C3.63406 14.2571 3.98864 14.1179 4.39435 14.0092C5.84872 13.6195 7.85792 13.65 10.25 15.0311C10.5667 15.2139 10.8594 15.4027 11.13 15.5961C11.6875 15.0424 12.2384 14.3885 12.7587 13.6161ZM12.6204 16.9341C13.4037 17.8315 13.839 18.756 14.0628 19.5913C14.1715 19.997 14.2283 20.3736 14.2536 20.7061C15.962 20.2638 17.5403 19.3219 18.7509 17.9441C18.4164 17.6557 17.9678 17.2815 17.4112 16.8446C16.6284 16.2301 15.633 15.4925 14.4426 14.6962C13.8639 15.5605 13.2482 16.3006 12.6204 16.9341ZM9.52737 16.9296C9.43788 16.8737 9.34548 16.8182 9.25005 16.7631C7.31205 15.6442 5.84818 15.6902 4.91199 15.9411C4.58 16.03 4.30141 16.1484 4.0805 16.2639C4.53358 17.1073 5.12461 17.8846 5.84359 18.5583C5.87614 18.5513 5.90977 18.5439 5.94444 18.5361C6.44532 18.4223 7.15871 18.2112 7.97658 17.8245C8.4626 17.5947 8.98712 17.3022 9.52737 16.9296ZM7.92672 20.018C8.21347 19.909 8.51642 19.7815 8.83145 19.6326C9.54844 19.2936 10.3256 18.8442 11.1145 18.2503C11.6989 18.9202 11.9873 19.5728 12.131 20.109C12.2199 20.4409 12.2567 20.7413 12.2672 20.9903C10.8031 21.0352 9.31171 20.7231 7.92672 20.018ZM18.6461 15.2714C17.8061 14.612 16.7364 13.8204 15.4558 12.968C15.9672 11.9634 16.3317 10.9922 16.5833 10.0701C17.7521 10.2998 18.7704 10.2145 19.6057 9.99072C20.0114 9.88202 20.3659 9.74284 20.6666 9.59846C21.2688 11.7723 21.0579 14.1701 19.9008 16.2957C19.5666 16.011 19.147 15.6645 18.6461 15.2714ZM16.9702 8.10789C17.8425 8.27902 18.5519 8.20254 19.0881 8.05887C19.42 7.96992 19.6986 7.85154 19.9195 7.73607C19.2263 6.44565 18.2102 5.3101 16.907 4.46319C16.956 4.76614 16.9971 5.09234 17.0257 5.43977C17.0906 6.23015 17.09 7.1278 16.9702 8.10789ZM15.0328 7.39372C15.0854 6.73963 15.0764 6.13922 15.0324 5.60348C14.9583 4.70183 14.7845 3.97847 14.6326 3.4878C14.622 3.45374 14.6116 3.42082 14.6013 3.38905C13.6584 3.10331 12.6898 2.9801 11.7329 3.00943C11.7433 3.2585 11.7801 3.55897 11.8691 3.89097C12.1199 4.82716 12.812 6.11791 14.75 7.23681C14.8454 7.2919 14.9397 7.34416 15.0328 7.39372Z' fill='%2379B9E8'/%3E %3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 21px 21px;
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.5262 17.4999C18.4887 22.7611 11.7612 24.5637 6.49994 21.5262C1.23873 18.4886 -0.563901 11.7611 2.47367 6.49988C5.51123 1.23866 12.2387 -0.563962 17.4999 2.4736C22.7612 5.51117 24.5638 12.2387 21.5262 17.4999ZM5.84382 7.87995C5.25279 7.64272 4.74291 7.45257 4.3292 7.30543C5.59153 5.24057 7.56267 3.85898 9.74648 3.29362C9.77176 3.62621 9.82851 4.00289 9.93722 4.40861C10.3269 5.86297 11.3579 7.58777 13.75 8.96886C14.0666 9.15165 14.3765 9.31079 14.6793 9.44842C14.4757 10.219 14.1794 11.0351 13.7614 11.8848C13.3566 11.6365 12.936 11.3857 12.5 11.1339C9.85449 9.60655 7.52076 8.55305 5.84382 7.87995ZM12.7587 13.6161C12.3555 13.3682 11.9358 13.1176 11.5 12.866C8.94938 11.3934 6.70297 10.3799 5.09882 9.73602C4.44209 9.47241 3.89359 9.27099 3.47664 9.12556C2.8887 10.8629 2.86217 12.7007 3.33339 14.4015C3.63406 14.2571 3.98864 14.1179 4.39435 14.0092C5.84872 13.6195 7.85792 13.65 10.25 15.0311C10.5667 15.2139 10.8594 15.4027 11.13 15.5961C11.6875 15.0424 12.2384 14.3885 12.7587 13.6161ZM12.6204 16.9341C13.4037 17.8315 13.839 18.756 14.0628 19.5913C14.1715 19.997 14.2283 20.3736 14.2536 20.7061C15.962 20.2638 17.5403 19.3219 18.7509 17.9441C18.4164 17.6557 17.9678 17.2815 17.4112 16.8446C16.6284 16.2301 15.633 15.4925 14.4426 14.6962C13.8639 15.5605 13.2482 16.3006 12.6204 16.9341ZM9.52737 16.9296C9.43788 16.8737 9.34548 16.8182 9.25005 16.7631C7.31205 15.6442 5.84818 15.6902 4.91199 15.9411C4.58 16.03 4.30141 16.1484 4.0805 16.2639C4.53358 17.1073 5.12461 17.8846 5.84359 18.5583C5.87614 18.5513 5.90977 18.5439 5.94444 18.5361C6.44532 18.4223 7.15871 18.2112 7.97658 17.8245C8.4626 17.5947 8.98712 17.3022 9.52737 16.9296ZM7.92672 20.018C8.21347 19.909 8.51642 19.7815 8.83145 19.6326C9.54844 19.2936 10.3256 18.8442 11.1145 18.2503C11.6989 18.9202 11.9873 19.5728 12.131 20.109C12.2199 20.4409 12.2567 20.7413 12.2672 20.9903C10.8031 21.0352 9.31171 20.7231 7.92672 20.018ZM18.6461 15.2714C17.8061 14.612 16.7364 13.8204 15.4558 12.968C15.9672 11.9634 16.3317 10.9922 16.5833 10.0701C17.7521 10.2998 18.7704 10.2145 19.6057 9.99072C20.0114 9.88202 20.3659 9.74284 20.6666 9.59846C21.2688 11.7723 21.0579 14.1701 19.9008 16.2957C19.5666 16.011 19.147 15.6645 18.6461 15.2714ZM16.9702 8.10789C17.8425 8.27902 18.5519 8.20254 19.0881 8.05887C19.42 7.96992 19.6986 7.85154 19.9195 7.73607C19.2263 6.44565 18.2102 5.3101 16.907 4.46319C16.956 4.76614 16.9971 5.09234 17.0257 5.43977C17.0906 6.23015 17.09 7.1278 16.9702 8.10789ZM15.0328 7.39372C15.0854 6.73963 15.0764 6.13922 15.0324 5.60348C14.9583 4.70183 14.7845 3.97847 14.6326 3.4878C14.622 3.45374 14.6116 3.42082 14.6013 3.38905C13.6584 3.10331 12.6898 2.9801 11.7329 3.00943C11.7433 3.2585 11.7801 3.55897 11.8691 3.89097C12.1199 4.82716 12.812 6.11791 14.75 7.23681C14.8454 7.2919 14.9397 7.34416 15.0328 7.39372Z' fill='%235E13AA'/%3E %3C/svg%3E");
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
button {
  font: inherit;
  cursor: pointer;
}
:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Type scale ---- */
.eyebrow {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--purple);
}
.eyebrow.on-dark {
  color: var(--blue);
}

/* ---- Hero cutout (dribbling player photo, right of hero text) ---- */
.hero-cutout {
  flex: 0 0 auto;
  position: relative;
  /* Text is a fixed 720px column inside a container that caps at 1200px, so past
     that cap there's real gutter outside the container we can bleed into. This
     computes the actual space between the text and the true viewport edge (not
     just the container edge) at any width, so growth is real available room,
     never a guess that can run off-screen. */
  width: clamp(250px, calc((50vw + min(50vw, 600px) - 800px) * 0.85), 490px);
  /* Purely visual nudge toward the text — transform doesn't participate in
     flex layout, so it can't disturb the text column's spacing. */
  transform: translateX(-48px);
}
.hero-cutout-photo {
  width: 100%;
  display: block;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5));
}
@media (max-width: 1080px) {
  .hero-cutout {
    display: none;
  }
}

/* ---- Verified badge, floating top-right of the hero photo ---- */
.hero-verified-badge {
  position: absolute;
  top: -36px;
  right: -12px;
  width: clamp(96px, 11vw, 148px);
  z-index: 2;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.55));
  /* Counteracts .hero-cutout's translateX so the badge stays put in the
     hero's top-right corner while the photo underneath shifts left. */
  transform: translateX(48px);
}

/* ---- Trust row ---- */
.trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  background: rgba(11, 11, 11, 0.55);
  border-radius: var(--radius-md);
  padding: 24px 28px;
}
.trust-row--2up {
  grid-template-columns: repeat(2, 1fr);
  max-width: 560px;
}
@media (max-width: 720px) {
  .trust-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.trust-mark {
  flex-shrink: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-mark--image {
  width: auto;
  border-radius: var(--radius-sm);
}
.trust-mark--text {
  padding: 0 16px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line-dark);
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--blue);
  white-space: nowrap;
}
.trust-label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-on-dark-soft);
}

h1,
.h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-mega);
  line-height: 0.95;
  font-size: clamp(44px, 7vw, 92px);
  text-wrap: balance;
}
h2,
.h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-mega);
  line-height: 0.98;
  font-size: clamp(32px, 4.6vw, 56px);
  text-wrap: balance;
}
h3,
.h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(22px, 2.6vw, 30px);
  text-wrap: balance;
}
.lede {
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--text-soft);
  max-width: 56ch;
  line-height: 1.55;
}
p {
  max-width: 68ch;
}
.on-dark p,
.on-dark .lede {
  color: var(--text-on-dark-soft);
}
.stat-number {
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---- Layout ---- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.section {
  padding: 96px 0;
}
.section--tight {
  padding: 64px 0;
}
@media (max-width: 720px) {
  .section {
    padding: 64px 0;
  }
  .section--tight {
    padding: 48px 0;
  }
}
.on-dark {
  color: var(--text-on-dark);
}
:is(.section, .section--tight).on-dark {
  background: linear-gradient(165deg, var(--ink) 0%, var(--deep) 100%);
}

/* Hero (always the first section in <main>) carries the club's signature
   topographic texture — one textured region per view, per the Sunset kit. */
main > section.on-dark:first-child {
  position: relative;
  overflow: hidden;
}
main > section.on-dark:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--topo-light);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.11;
  pointer-events: none;
}
/* Experiment: flat black hero + purple-to-blue topo lines instead of the
   gradient background (homepage hero only, for now — see index.html).
   The line art is used as a mask so the color gradient is defined in the
   rendered viewport, not cropped inside the SVG's own coordinate space. */
main > section.on-dark.hero-experiment::before {
  background-image: none;
  background: linear-gradient(120deg, var(--purple) 0%, var(--blue) 100%);
  -webkit-mask-image: var(--topo-light);
  mask-image: var(--topo-light);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0.42;
}
main > section.on-dark:first-child > .container {
  position: relative;
  z-index: 1;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.section-head .heading-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.grid {
  display: grid;
  gap: 28px;
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: var(--radius-sm);
  border: none;
  transition: transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: scale(var(--press-scale));
}
.btn-primary {
  background: var(--purple);
  color: var(--text-on-deep);
}
.btn-primary:hover {
  background: var(--purple-bright);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: var(--border-w) solid var(--line-light);
}
.btn-ghost:hover {
  border-color: var(--purple);
  color: var(--purple);
}
.on-dark .btn-ghost {
  color: var(--text-on-dark);
  border-color: var(--line-dark);
}
.on-dark .btn-ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(255, 255, 255, 0.08);
}
.btn-sm {
  padding: 11px 20px;
  font-size: 11.5px;
}
.btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
.btn[aria-disabled="true"]:hover {
  transform: none;
}

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: var(--fw-black);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  background: rgba(94, 19, 170, 0.1);
  color: var(--purple);
}
.on-dark .badge {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-on-dark);
}
.badge.badge-hot {
  background: var(--purple);
  color: var(--text-on-deep);
}
.badge.badge-fall {
  /* Sunset ramp tangerine stop, matching .card-topo--fall */
  background: #F0A139;
  color: var(--ink);
}

/* ---- Ticker banner ---- */
.ticker-banner {
  background: var(--purple);
  color: var(--text-on-deep);
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track {
  display: inline-flex;
  width: max-content;
  padding: 9px 0;
  animation: ticker-scroll 50s linear infinite;
}
.ticker-group {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: var(--fw-black);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track {
    animation: none;
  }
}

/* ---- Nav ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line-dark);
}
/* Always-on blur layer — never toggled, so the browser never has to
   lazily allocate the backdrop-filter surface mid-scroll (that first-time
   allocation is what causes a stray blank/white frame in some browsers). */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(11, 11, 11, 0.86);
  backdrop-filter: blur(var(--blur-panel));
  -webkit-backdrop-filter: blur(var(--blur-panel));
}
/* Opaque cover, on top of the blur layer, hiding it until scrolled — only
   a plain solid-color fade animates here, nothing filter-related. */
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  opacity: 1;
  transition: opacity var(--dur-med) var(--ease-out);
}
.site-header.scrolled::after {
  opacity: 0;
}
.site-header.scrolled::before {
  opacity: 1;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 76px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--text-on-dark);
}
.brand img {
  height: 34px;
  width: 34px;
  object-fit: contain;
}
.brand-word {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-style: italic;
  font-size: 20px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav-links a {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--blue);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-on-dark);
  padding: 6px;
}
.nav-toggle svg {
  width: 26px;
  height: 26px;
}

@media (max-width: 900px) {
  .nav-links {
    position: fixed;
    inset: 76px 0 0 0;
    background: var(--ink);
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 24px;
    gap: 26px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }
  .nav-links.open {
    transform: translateX(0);
  }
  .nav-links a {
    font-size: 16px;
  }
  .nav-toggle {
    display: block;
  }
  .nav-actions .btn-primary {
    display: none;
  }
}

/* ---- Footer ---- */
.site-footer {
  position: relative;
  background: var(--ink);
  color: var(--text-on-dark-soft);
  padding: 72px 0 32px;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--hype-gradient-x);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line-dark);
}
@media (max-width: 780px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}
.footer-col h4 {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: var(--fw-black);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  margin-bottom: 16px;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.footer-col a:hover {
  color: var(--blue);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.footer-brand img {
  height: 30px;
  width: 30px;
}
.footer-brand span {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-style: italic;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--text-on-dark);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 28px;
  font-size: 12.5px;
}
.footer-social {
  display: flex;
  gap: 16px;
}
.footer-social a {
  color: var(--text-on-dark-soft);
}
.footer-social a:hover {
  color: var(--blue);
}

/* ---- Cards ---- */
.card {
  background: var(--paper-raised);
  border-radius: var(--radius-md);
  border: 1px solid var(--line-light);
  padding: 32px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.card:is(a):hover {
  border-color: var(--purple);
}
.card-dark {
  background: var(--court-charcoal);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-md);
  padding: 32px;
}

/* ---- Topo card: dark card carrying the hero's colored topo-line mask ---- */
.card-topo {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-md);
  padding: 32px;
}
.card-topo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--purple) 0%, var(--blue) 100%);
  -webkit-mask-image: var(--topo-light);
  mask-image: var(--topo-light);
  -webkit-mask-size: 320%;
  mask-size: 320%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0.42;
  pointer-events: none;
}
.card-topo.card-topo--muted::before {
  background: linear-gradient(120deg, var(--court-slate) 0%, var(--court-gray) 100%);
}
.card-topo.card-topo--fall::before {
  /* Sunset ramp (--sunset-gradient-diag), sampled from the club's sunset jersey mockup */
  background: linear-gradient(135deg, #ED6099 0%, #F0A139 55%, #DFEDCA 100%);
}
.card-topo > * {
  position: relative;
  z-index: 1;
}

/* ---- Placeholder media (no real photography yet) ---- */
.media-placeholder {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(155deg, var(--ink) 0%, var(--deep) 55%, var(--purple) 130%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
.media-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--topo-light);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.08;
  pointer-events: none;
}
.media-placeholder::after {
  content: attr(data-label);
  position: relative;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: var(--fw-black);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 246, 250, 0.55);
  border: 1px solid rgba(245, 246, 250, 0.28);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(11, 11, 11, 0.35);
}
.media-placeholder img.watermark {
  position: relative;
  height: 34%;
  opacity: 0.14;
}

/* ---- Real photo frame (replaces .media-placeholder once photography lands) ---- */
.media-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
}
.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Sponsor tiles ---- */
.sponsor-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: 16px 20px;
  background: var(--paper-raised);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md);
}
.sponsor-tile img {
  max-height: 96px;
  width: auto;
  object-fit: contain;
}
.sponsor-tile--empty {
  border-style: dashed;
  color: var(--text-faint);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: var(--fw-black);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

/* ---- Utility ---- */
.text-center {
  text-align: center;
}
.mt-0 {
  margin-top: 0;
}
.flow > * + * {
  margin-top: 16px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}