:root {
  --yard-yellow: oklch(91% .2 102);
  --yard-yellow-soft: oklch(26% .07 102);
  --yard-blue: oklch(78% .15 225);
}

.event-club-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 5.5rem;
  margin: -1.5rem 0 3rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: .9rem 1rem;
  text-decoration: none;
  transition: background-color 160ms ease;
}
.event-club-link__mark { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border-radius: .75rem; background: var(--yard-yellow); color: var(--canvas); font-weight: 760; }
.event-club-link small { display: block; margin-bottom: .12rem; color: var(--yard-yellow); font-size: .68rem; font-weight: 600; }
.event-club-link strong { font-size: .95rem; font-weight: 570; }
.event-club-link__count { color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.event-club-link__count i { display: inline-grid; width: 2.35rem; height: 2.35rem; place-items: center; margin-left: .7rem; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-style: normal; }

.club-shell {
  width: min(78rem, calc(100% - 3rem));
  margin: 0 auto;
  padding: max(1.5rem, env(safe-area-inset-top)) 0 max(7rem, env(safe-area-inset-bottom));
}

.club-nav {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(3rem, 7vw, 6rem);
}

.club-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 25rem);
  align-items: end;
  gap: clamp(3rem, 8vw, 8rem);
  margin-bottom: clamp(3.5rem, 8vw, 6rem);
}

.club-kicker {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.25rem;
  color: var(--yard-yellow);
  font-size: .78rem;
  font-weight: 620;
  letter-spacing: .035em;
}

.club-kicker span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: .55rem;
  background: var(--yard-yellow);
  color: var(--canvas);
  font-size: .85rem;
  font-weight: 760;
}

.club-hero h1 {
  max-width: 11ch;
  margin-bottom: 1.5rem;
  font-size: clamp(4rem, 9vw, 8.2rem);
  font-weight: 610;
  letter-spacing: .005em;
  line-height: .82;
}

.club-hero h1 span { color: var(--quiet); }
.club-hero__copy > p:not(.club-kicker) { max-width: 37rem; margin-bottom: 1.25rem; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.17rem); }
.club-freshness { display: flex; align-items: center; gap: .55rem; color: var(--quiet); font-size: .74rem; }
.club-freshness i { width: .48rem; height: .48rem; border-radius: 50%; background: var(--yard-yellow); box-shadow: 0 0 0 .28rem oklch(91% .2 102 / .12); }

.completion-dial {
  display: grid;
  width: min(100%, 24rem);
  aspect-ratio: 1;
  justify-self: end;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--yard-yellow) var(--completion), var(--surface-2) 0);
  box-shadow: 0 0 5rem oklch(91% .2 102 / .08);
}

.completion-dial::before {
  grid-area: 1 / 1;
  width: 78%;
  height: 78%;
  border-radius: inherit;
  background: var(--canvas);
  content: "";
}

.completion-dial > div { z-index: 1; grid-area: 1 / 1; text-align: center; }
.completion-dial strong { display: block; font-size: clamp(3.3rem, 7vw, 6rem); font-variant-numeric: tabular-nums; font-weight: 560; letter-spacing: 0; line-height: .9; }
.completion-dial strong span { color: var(--quiet); font-size: .42em; }
.completion-dial small { display: block; margin-top: .75rem; color: var(--muted); font-size: .75rem; font-weight: 560; }

.club-pulse {
  display: grid;
  grid-template-columns: repeat(3, 1fr) minmax(13rem, 1.35fr);
  margin-bottom: clamp(4rem, 9vw, 7rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.club-pulse > div { min-height: 9rem; border-left: 1px solid var(--line); padding: 1.3rem; }
.club-pulse > div:first-child { border-left: 0; }
.club-pulse span { display: block; margin-bottom: 1.2rem; color: var(--muted); font-size: .72rem; font-weight: 560; }
.club-pulse strong { display: block; color: var(--yard-yellow); font-size: clamp(2.5rem, 5vw, 4rem); font-variant-numeric: tabular-nums; font-weight: 560; letter-spacing: 0; line-height: .9; }
.club-pulse__next { display: grid; grid-template-columns: 1fr auto; align-content: start; column-gap: 1rem; background: linear-gradient(120deg, transparent, oklch(91% .2 102 / .055)); }
.club-pulse__next span { grid-column: 1 / -1; }
.club-pulse__next strong { color: var(--ink); }
.club-pulse__next small { align-self: end; overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }

.club-controls { margin-bottom: clamp(3rem, 6vw, 5rem); }
.club-day-tabs,
.club-status-tabs { display: flex; gap: .45rem; overflow-x: auto; padding: .25rem 0; scrollbar-width: none; }
.club-day-tabs { margin-bottom: 1rem; }
.club-status-tabs { margin-bottom: 1.25rem; }
.club-day-tabs::-webkit-scrollbar,
.club-status-tabs::-webkit-scrollbar { display: none; }
.club-chip,
.club-status-chip { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .78rem; font-weight: 560; text-decoration: none; }
.club-chip { min-width: 4.7rem; min-height: 3.5rem; align-content: center; padding: .55rem 1rem; text-align: center; }
.club-chip span { display: block; color: var(--quiet); font-size: .61rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.club-chip:first-child { min-width: auto; }
.club-status-chip { min-height: 2.75rem; align-content: center; padding: .6rem .9rem; }
.club-status-chip span { margin-left: .3rem; color: var(--quiet); font-variant-numeric: tabular-nums; }
.club-chip.is-active,
.club-status-chip.is-active { border-color: var(--yard-yellow); background: var(--yard-yellow); color: var(--canvas); }
.club-chip.is-active span,
.club-status-chip.is-active span { color: oklch(25% .05 102); }

.club-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  max-width: 40rem;
  border-radius: 999px;
  padding: .25rem .25rem .25rem 1rem;
  background: var(--surface-1);
}
.club-search > span { color: var(--quiet); font-size: 1.4rem; }
.club-search input[type="search"] { min-height: 2.75rem; border: 0; padding: .5rem 0; background: transparent; }
.club-search input[type="submit"] { min-height: 2.75rem; border: 0; border-radius: 999px; padding: .55rem 1.2rem; background: var(--yard-yellow); color: var(--canvas); cursor: pointer; font-size: .78rem; font-weight: 650; }

.club-roster__heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.club-roster__heading p { margin-bottom: .25rem; color: var(--yard-yellow); font-size: .72rem; font-weight: 600; }
.club-roster__heading h2 { margin: 0; font-size: clamp(2.5rem, 5vw, 4.5rem); letter-spacing: .005em; }
.club-roster__heading > span { margin-bottom: .45rem; color: var(--quiet); font-size: .7rem; }
.race-day { margin-bottom: clamp(4rem, 8vw, 6rem); }
.race-day__heading { display: grid; grid-template-columns: minmax(7rem, .5fr) 1fr auto; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--line-strong); padding: 0 1rem 1rem; }
.race-day__heading span { color: var(--yard-yellow); font-size: .75rem; font-weight: 600; }
.race-day__heading strong { font-size: 1.1rem; font-weight: 580; }
.race-day__heading small { color: var(--quiet); font-size: .7rem; }

.race-wave {
  display: grid;
  grid-template-columns: minmax(7rem, .5fr) minmax(0, 1.7fr) minmax(11rem, .8fr);
  gap: 1rem;
  align-items: center;
  min-height: 7.4rem;
  border-bottom: 1px solid var(--line);
  padding: 1rem;
  transition: background-color 160ms ease;
}
.race-wave > time { color: var(--muted); font-size: clamp(1.3rem, 2.3vw, 1.8rem); font-variant-numeric: tabular-nums; font-weight: 540; letter-spacing: 0; }
.race-wave__athletes { min-width: 0; }
.race-wave__athletes h3 { margin-bottom: .35rem; font-size: clamp(1rem, 1.8vw, 1.25rem); font-weight: 570; letter-spacing: -.003em; line-height: 1.25; }
.race-wave__athletes p { margin: 0; color: var(--quiet); font-size: .72rem; }
.race-wave__result { justify-self: stretch; text-align: right; }
.race-wave__result a { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: .8rem; text-decoration: none; }
.race-wave__result a small { grid-column: 1; color: var(--quiet); font-size: .66rem; }
.race-wave__result a strong { grid-column: 1; color: var(--yard-yellow); font-size: clamp(1.35rem, 2.6vw, 2rem); font-variant-numeric: tabular-nums; font-weight: 570; letter-spacing: 0; }
.race-wave__result a span { grid-area: 1 / 2 / 3; display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border-radius: 50%; background: var(--surface-2); }
.race-state { display: inline-flex; align-items: center; gap: .55rem; color: var(--muted); font-size: .75rem; font-weight: 560; }
.race-state i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--quiet); }
.race-wave--racing .race-state { color: var(--yard-yellow); }
.race-wave--racing .race-state i { background: var(--yard-yellow); box-shadow: 0 0 0 .3rem oklch(91% .2 102 / .12); }
.race-wave--upcoming .race-state i { background: var(--yard-blue); }
.race-wave--review .race-state i { background: var(--orange); }

.club-empty { min-height: 24rem; align-content: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.club-empty > span { display: inline-grid; width: 4rem; height: 4rem; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--quiet); font-size: 1.4rem; }
.club-empty h3 { margin: 1.25rem 0 .35rem; font-size: 1.6rem; }
.club-empty p { margin-bottom: 1rem; color: var(--muted); }
.club-empty a { color: var(--yard-yellow); font-size: .8rem; font-weight: 600; }

@media (hover: hover) and (pointer: fine) {
  .event-club-link:hover { background: var(--surface-1); }
  .race-wave:hover { background: var(--surface-1); }
  .race-wave__result a:hover span { background: var(--yard-yellow); color: var(--canvas); }
  .club-chip:hover,
  .club-status-chip:hover { border-color: var(--line-strong); color: var(--ink); }
}

@media (max-width: 56rem) {
  .club-hero { grid-template-columns: 1fr; }
  .completion-dial { width: min(70vw, 22rem); justify-self: start; }
  .club-pulse { grid-template-columns: repeat(2, 1fr); }
  .club-pulse > div:nth-child(odd) { border-left: 0; }
  .club-pulse > div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 42rem) {
  .event-club-link { grid-template-columns: auto minmax(0, 1fr); margin-top: 0; margin-right: -1rem; margin-left: -1rem; }
  .event-club-link__count { grid-column: 2; }
  .event-club-link__count i { display: none; }
  .club-shell { width: min(100% - 2rem, 78rem); padding-top: max(1rem, env(safe-area-inset-top)); }
  .club-nav { margin-bottom: 3.5rem; }
  .club-hero h1 { font-size: clamp(3.65rem, 18vw, 5.4rem); line-height: .86; }
  .completion-dial { width: min(78vw, 19rem); }
  .club-pulse { margin-right: -1rem; margin-left: -1rem; }
  .club-pulse > div { min-height: 7.75rem; padding: 1rem; }
  .club-pulse strong { font-size: 2.75rem; }
  .club-controls { margin-right: -1rem; margin-left: -1rem; }
  .club-day-tabs,
  .club-status-tabs { padding-right: 1rem; padding-left: 1rem; }
  .club-search { margin: 0 1rem; }
  .club-roster__heading { display: block; }
  .club-roster__heading > span { display: block; margin-top: .45rem; }
  .race-day { margin-right: -1rem; margin-left: -1rem; }
  .race-day__heading { grid-template-columns: 1fr auto; padding-right: 1rem; padding-left: 1rem; }
  .race-day__heading span { grid-column: 1; }
  .race-day__heading strong { grid-column: 1; }
  .race-day__heading small { grid-area: 1 / 2 / 3; align-self: center; }
  .race-wave { grid-template-columns: 4.4rem minmax(0, 1fr); gap: .7rem 1rem; min-height: 7.7rem; padding-right: 1rem; padding-left: 1rem; }
  .race-wave > time { grid-row: 1 / 3; align-self: start; padding-top: .1rem; font-size: 1.25rem; }
  .race-wave__result { grid-column: 2; justify-self: start; text-align: left; }
  .race-wave__result a { grid-template-columns: auto 2.35rem; }
  .race-wave__result a small,
  .race-wave__result a strong { text-align: left; }
  .race-wave__result a span { width: 2.35rem; height: 2.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .race-wave { transition: none; }
}