/* =============================================================================
   PAGES
============================================================================= */

/* ======================= EDITORIAL HOME MOCKUP ============================ */
.club-home {
  background: var(--club-stone);
  color: var(--club-night);
  overflow: clip;
}

.home-page .nav {
  background: color-mix(in srgb, var(--club-stone) 90%, transparent);
}
.home-page .nav__link { letter-spacing: 0; text-transform: none; font-size: 0.84rem; }
.home-page .nav__link::after { background: var(--club-acid-2); height: 2px; }
.home-page .brand__sub { color: #4B6120; letter-spacing: 0.13em; }
.home-page .nav__cta {
  --btn-bg: var(--club-night);
  --btn-bd: var(--club-night);
  --btn-fg: #fff;
  border-radius: var(--r-pill);
  text-transform: none;
  letter-spacing: 0;
  padding-inline: 1.15rem;
}
.home-page .nav__cta:hover {
  --btn-bg: var(--club-acid);
  --btn-bd: var(--club-acid);
  --btn-fg: var(--club-night);
}
.home-page .footer__nav a:hover,
.home-page .footer__nav a:focus-visible { color: var(--club-acid); }

.hc-kicker {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.75rem;
  line-height: 1.35;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hc-kicker__mark { color: var(--club-acid-2); font-size: 0.95rem; }
.hc-kicker--center { justify-content: center; }

.hc-hero {
  padding: clamp(2.25rem, 5vw, 5rem) 0 clamp(3.8rem, 8vw, 7rem);
  background: var(--club-stone);
}
.hc-hero__head { text-align: center; }
.hc-hero__head .hc-kicker { justify-content: center; color: #4C514B; }
.hc-hero__title {
  max-width: 1180px;
  margin: clamp(1.4rem, 3vw, 2.6rem) auto 1.4rem;
  font-size: clamp(3.75rem, 10.8vw, 9.4rem);
  line-height: 0.78;
  letter-spacing: -0.072em;
  font-weight: 900;
  text-transform: none;
}
.hc-hero__title .wipe { padding: 0 0.08em 0.09em; }
.hc-title-dot { color: var(--club-acid-2); font-style: normal; }
.hc-hero__intro {
  width: min(100%, 760px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
}
.hc-hero__intro > p { margin: 0; color: #515650; font-size: 1rem; }
.hc-hero__actions,
.hc-final__actions { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.hc-button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 0.35rem 0.45rem 0.35rem 1.15rem;
  border-radius: var(--r-pill);
  font-size: 0.87rem;
  font-weight: 750;
  transition: transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease);
}
.hc-button:hover { transform: translateY(-2px); }
.hc-button--dark { background: var(--club-night); color: #fff; }
.hc-button--light { background: #fff; color: var(--club-night); }
.hc-button__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: var(--club-acid);
  color: var(--club-night);
  font-size: 1.05rem;
}
.hc-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  font-size: 0.86rem;
  font-weight: 760;
  border-bottom: 1px solid currentColor;
}
.hc-text-link span { transition: transform var(--dur-2) var(--ease-out); }
.hc-text-link:hover span { transform: translateX(4px); }

.hc-hero__stage { margin-top: clamp(2.8rem, 5vw, 4.7rem); }
.hc-hero__visual {
  position: relative;
  width: 100%;
  height: clamp(390px, 52vw, 650px);
  margin: 0;
  border-radius: var(--club-radius-lg);
  overflow: hidden;
  box-shadow: var(--club-shadow);
  isolation: isolate;
}
.hc-hero__movie,
.hc-hero__shade { position: absolute; inset: 0; }
.hc-hero__movie video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.04);
}
.hc-hero__shade {
  z-index: 1;
  background: linear-gradient(180deg, rgba(6, 12, 8, 0.03) 35%, rgba(6, 12, 8, 0.78) 100%);
}
.hc-hero__caption {
  position: absolute;
  z-index: 2;
  left: clamp(1.25rem, 4vw, 3rem);
  bottom: clamp(1.35rem, 4vw, 3rem);
  display: grid;
  max-width: 30rem;
  color: #fff;
}
.hc-hero__caption strong {
  margin: 0.65rem 0 0.3rem;
  font-size: clamp(1.8rem, 4vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.hc-hero__caption > span:last-child { font-size: 0.86rem; color: rgba(255,255,255,.75); }
.hc-chip {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.25rem 0.65rem;
  background: var(--club-acid);
  color: var(--club-night);
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hc-float {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.94);
  color: var(--club-night);
  border-radius: 18px;
  box-shadow: 0 20px 60px -30px rgba(0,0,0,.6);
  backdrop-filter: blur(12px);
}
.hc-float--players { top: 1.5rem; left: 1.5rem; gap: 0.8rem; padding: 0.8rem 1rem; }
.hc-float--players strong { font-size: 1.8rem; line-height: 1; letter-spacing: -0.05em; }
.hc-float--players span {
  white-space: pre-line;
  font-size: 0.68rem;
  line-height: 1.25;
  font-weight: 750;
  text-transform: uppercase;
}
.hc-float--live { right: 1.5rem; bottom: 1.5rem; gap: 0.75rem; padding: 0.7rem 1rem 0.7rem 0.7rem; }
.hc-float--live > span:last-child { display: grid; }
.hc-float--live strong { font-size: 0.85rem; }
.hc-float--live small { font-size: 0.67rem; color: #646964; }
.hc-float__check {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--club-acid);
  font-weight: 900;
}

.hc-linkdeck {
  position: relative;
  z-index: 5;
  margin-top: -3.25rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.7rem;
  background: #fff;
  border-radius: var(--club-radius);
  box-shadow: 0 24px 70px -38px rgba(16,20,15,.5);
}
.hc-linkcard {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  padding: 1rem;
  border-radius: 17px;
  transition: background var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.hc-linkcard + .hc-linkcard { border-left: 1px solid var(--line); border-radius: 0 17px 17px 0; }
.hc-linkcard:hover { background: var(--club-stone); transform: translateY(-2px); }
.hc-linkcard__no {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--club-night);
  color: #fff;
  font-weight: 850;
  letter-spacing: -0.04em;
}
.hc-linkcard:nth-child(2) .hc-linkcard__no { background: var(--club-acid); color: var(--club-night); }
.hc-linkcard__copy { display: grid; min-width: 0; }
.hc-linkcard__copy strong { font-size: 0.86rem; }
.hc-linkcard__copy small { margin-top: 0.18rem; color: #6A6F69; font-size: 0.7rem; line-height: 1.4; }
.hc-linkcard__go { font-size: 1rem; }

.hc-manifesto {
  padding: clamp(7rem, 14vw, 13rem) 0 clamp(6rem, 12vw, 11rem);
  text-align: center;
}
.hc-manifesto h2,
.hc-section-head h2,
.hc-final h2 {
  text-transform: none;
  font-size: clamp(3rem, 7.5vw, 7.2rem);
  line-height: 0.88;
  letter-spacing: -0.066em;
}
.hc-manifesto h2 { margin: 1.5rem auto; max-width: 930px; }
.hc-manifesto > .wrap > p {
  width: min(100%, 720px);
  margin: 0 auto;
  color: #5B605A;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.65;
}
.hc-manifesto__meta {
  margin-top: 2.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hc-manifesto__meta i { width: 5px; height: 5px; border-radius: 50%; background: var(--club-acid-2); }

.hc-weekend,
.hc-teams { padding: clamp(5rem, 10vw, 9rem) 0; }
.hc-weekend { background: #fff; border-radius: var(--club-radius-lg) var(--club-radius-lg) 0 0; }
.hc-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2rem, 5vw, 4.5rem);
}
.hc-section-head h2 {
  max-width: 900px;
  margin-top: 1rem;
  font-size: clamp(2.8rem, 6.5vw, 6.4rem);
}
.hc-section-head > p { max-width: 34ch; margin: 0; color: #5F645E; }
.hc-bento {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  grid-template-rows: minmax(390px, 1.15fr) minmax(250px, .75fr);
  gap: 1.1rem;
}
.hc-bento > * { border-radius: var(--club-radius); overflow: hidden; position: relative; }
.hc-bento__course { grid-row: 1 / span 2; color: #fff; isolation: isolate; }
.hc-bento__course img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out);
}
.hc-bento__course:hover img { transform: scale(1.035); }
.hc-bento__course-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 28%, rgba(6,10,7,.82) 100%);
}
.hc-bento__course-copy { position: absolute; z-index: 2; inset: auto 1.5rem 1.5rem; display: grid; }
.hc-bento__course-copy strong {
  margin: 0.65rem 0 0.35rem;
  font-size: clamp(1.8rem, 3.8vw, 3.8rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
}
.hc-bento__course-copy > span:last-child { font-size: 0.8rem; color: rgba(255,255,255,.72); }
.hc-roundel {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--club-night);
  font-weight: 800;
}
.hc-bento__course > .hc-roundel { position: absolute; z-index: 3; right: 1.5rem; top: 1.5rem; }
.hc-bento__format {
  padding: clamp(1.6rem, 3vw, 2.6rem);
  background: var(--club-night);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hc-bento__index { color: var(--club-acid); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; }
.hc-bento__format > strong {
  white-space: pre-line;
  margin: auto 0 0.8rem;
  font-size: clamp(2rem, 3.6vw, 3.7rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
}
.hc-bento__format p {
  margin: 0 0 1.5rem;
  color: rgba(255,255,255,.64);
  font-size: 0.88rem;
  line-height: 1.55;
  max-width: 38ch;
}
.hc-bento__format .hc-button { margin-top: auto; }
.hc-bento__score {
  background: var(--club-acid);
  color: var(--club-night);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.hc-bento__score-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
.hc-bento__score-main {
  margin: auto 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 0.8rem;
}
.hc-bento__score-main > div { display: grid; }
.hc-bento__score-main > div:last-child { text-align: right; }
.hc-bento__score-main small { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.hc-bento__score-main strong { font-size: clamp(3.5rem, 7vw, 6rem); line-height: 0.8; letter-spacing: -0.08em; }
.hc-bento__score-main > span { font-size: 1.5rem; line-height: 1; }
.hc-bento__score-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.72rem;
  font-weight: 700;
}
.hc-roundel--dark { background: var(--club-night); color: #fff; }
.hc-bento__daytwo { background: var(--club-stone); padding: 1.5rem; display: flex; flex-direction: column; }
.hc-bento__daytwo > span:first-child {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.hc-bento__daytwo strong {
  margin: auto 0 0.4rem;
  font-size: clamp(1.5rem, 2.8vw, 2.7rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.hc-bento__daytwo small { color: #626761; font-size: 0.75rem; }
.hc-daytwo__line {
  display: block;
  width: 100%;
  height: 7px;
  margin-top: 1.4rem;
  background: linear-gradient(90deg, var(--club-night) 0 62%, var(--club-acid-2) 62%);
  border-radius: 99px;
}

.hc-teams { background: var(--club-stone); }
.hc-teams__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.hc-team {
  min-height: clamp(430px, 46vw, 620px);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
  display: flex;
  overflow: hidden;
  border-radius: var(--club-radius);
  isolation: isolate;
}
.hc-team--impala { background: var(--impala); color: var(--club-night); }
.hc-team--eland { background: var(--eland); color: #fff; }
.hc-team { --team-card-fade: rgba(200, 255, 61, .97); }
.hc-team--eland { --team-card-fade: rgba(16, 20, 15, .97); }
.hc-team::before {
  content: '';
  position: absolute;
  inset: auto -16% -34%;
  height: 76%;
  border-radius: 50% 50% 0 0;
  background: rgba(255,255,255,.16);
  z-index: -1;
}
.hc-team::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 48%;
  background: linear-gradient(180deg, transparent, var(--team-card-fade) 72%);
  pointer-events: none;
}
.hc-team__number { position: absolute; z-index: 3; left: 1.5rem; top: 1.5rem; font-size: 0.75rem; font-weight: 800; }
.hc-team__crest {
  position: absolute;
  z-index: 2;
  top: 8%;
  left: 25%;
  width: min(36%, 220px);
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.22));
  transition: transform 650ms var(--ease-out);
}
.hc-team:hover .hc-team__crest { transform: translateX(-50%) translateY(-8px) rotate(-2deg); }
.hc-team img[src$="/impala-crest.png"] {
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.22));
}
.hc-team img[src$="/eland-crest.png"] {
  filter: grayscale(1) contrast(1.08) drop-shadow(0 18px 24px rgba(0,0,0,.22));
}
.hc-team__captain {
  position: absolute;
  z-index: 0;
  right: clamp(-5.5rem, -4vw, -2rem);
  bottom: -8%;
  width: auto;
  max-width: none;
  height: 98%;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
  filter: drop-shadow(0 24px 28px rgba(0,0,0,.25));
  transition: transform 650ms var(--ease-out);
}
.hc-team:hover .hc-team__captain { transform: translateY(-7px) scale(1.018); }
.hc-team__copy { position: relative; z-index: 2; align-self: flex-end; }
.hc-team__copy small { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; opacity: .66; }
.hc-team__copy h3 {
  margin: 0.55rem 0;
  font-size: clamp(2.5rem, 5vw, 5.5rem);
  text-transform: none;
  letter-spacing: -0.06em;
}
.hc-team__copy p { margin: 0; font-size: 0.86rem; opacity: .72; }
.hc-team > .hc-roundel { position: absolute; z-index: 3; right: 1.5rem; top: 1.5rem; }
.hc-team--impala > .hc-roundel { background: var(--club-night); color: #fff; }
.hc-team--eland > .hc-roundel { background: #fff; color: var(--eland); }

.hc-final { padding: 0 0 clamp(5rem, 10vw, 9rem); background: var(--club-stone); }
.hc-final__card {
  min-height: clamp(260px, 24vw, 360px);
  padding: clamp(2rem, 6vw, 5.5rem);
  position: relative;
  overflow: hidden;
  border-radius: var(--club-radius-lg);
  background: var(--club-acid);
  display: flex;
  align-items: center;
}
.hc-final__copy { position: relative; z-index: 2; width: min(100%, 740px); }
.hc-final h2 { margin: 1.2rem 0 1.5rem; }
.hc-final__copy > p { width: min(100%, 520px); margin: 0 0 1.8rem; color: #37402A; }
@media (max-width: 900px) {
  .hc-hero__intro { flex-direction: column; text-align: center; }
  .hc-linkdeck { grid-template-columns: 1fr; margin-top: -2rem; }
  .hc-linkcard + .hc-linkcard { border-left: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .hc-bento { grid-template-columns: 1fr; grid-template-rows: none; }
  .hc-bento__course { grid-row: auto; min-height: 520px; }
  .hc-bento__format { min-height: 380px; }
  .hc-bento__score,
  .hc-bento__daytwo { min-height: 250px; }
  .hc-section-head { align-items: flex-start; flex-direction: column; }
  .hc-section-head > p { max-width: 54ch; }
}

@media (max-width: 680px) {
  .hc-hero { padding-top: 2rem; }
  .hc-hero__title { font-size: clamp(3.25rem, 18vw, 5.8rem); line-height: .82; }
  .hc-hero__intro > p { max-width: 26ch; }
  .hc-hero__stage { padding-inline: 0.7rem; }
  .hc-hero__visual { height: 500px; border-radius: 24px; }
  .hc-hero__movie video { object-position: 62% center; }
  .hc-hero__caption { left: 1.25rem; bottom: 1.35rem; padding-right: 1rem; }
  .hc-hero__caption strong { max-width: 8ch; }
  .hc-float--players { display: none; }
  .hc-float--live { right: 1rem; top: 1rem; bottom: auto; }
  .hc-linkdeck { margin-inline: 0.7rem; }
  .hc-linkcard { padding: .85rem .75rem; }
  .hc-linkcard__no { width: 46px; height: 46px; }
  .hc-manifesto h2,
  .hc-section-head h2,
  .hc-final h2 { font-size: clamp(2.8rem, 14vw, 4.5rem); }
  .hc-bento__course { min-height: 450px; }
  .hc-teams__grid { grid-template-columns: 1fr; }
  .hc-team { min-height: 480px; }
  .hc-team__captain { right: -4rem; height: 95%; }
  .hc-team__crest { top: 7%; left: 27%; width: min(39%, 230px); }
  .hc-final__card { padding-bottom: clamp(2.5rem, 8vw, 4rem); align-items: flex-start; }
  .hc-final__copy { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-bento__course img,
  .hc-team__crest,
  .hc-team__captain { transition: none; }
}

/* =============================== HERO ===================================== */
.hero {
  position: relative;
  min-height: min(92svh, 860px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--night);
  color: var(--paper);
  overflow: hidden;
  padding-block: var(--s-8) var(--s-6);
  margin-top: calc(var(--nav-h) * -1);
  padding-top: calc(var(--nav-h) + var(--s-8));
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video, .hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.72) contrast(1.05);
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.86) 0%, rgba(10,10,10,0.42) 34%, rgba(10,10,10,0.90) 76%, rgba(10,10,10,0.98) 100%),
    linear-gradient(90deg, rgba(10,10,10,0.80) 0%, rgba(10,10,10,0.24) 58%, transparent 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__title {
  font-size: var(--t-hero);
  line-height: 0.84;
  font-weight: 900;
  font-stretch: 82%;
  letter-spacing: -0.045em;
  margin-block: var(--s-4) var(--s-5);
}
.hero__title .gold { color: var(--gold-2); }
.hero__title .outline {
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(245, 241, 231, 0.55);
}

.hero__lede { max-width: 46ch; color: rgba(255, 255, 255, 0.86); font-size: clamp(0.98rem, 1.5vw, 1.15rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

.hero__scroll {
  display: none;
  position: absolute;
  right: var(--gutter);
  bottom: var(--s-6);
  z-index: 2;
  writing-mode: vertical-rl;
  font-size: var(--t-micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-4);
  align-items: center;
  gap: 0.8rem;
}
.hero__scroll::after {
  content: ''; width: 1px; height: 48px;
  background: linear-gradient(var(--gold), transparent);
}
@media (min-width: 1060px) { .hero__scroll { display: flex; } }

/* Sound / motion toggle for the hero video */
.hero__vidbtn {
  position: absolute;
  z-index: 3;
  right: var(--gutter);
  top: calc(var(--nav-h) + var(--s-4));
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  color: var(--paper);
  background: rgba(10,10,10,.4);
  backdrop-filter: blur(6px);
  transition: background var(--dur-1), border-color var(--dur-1);
}
.hero__vidbtn:hover { background: rgba(10,10,10,.75); border-color: var(--gold); }

/* =============================== TICKER =================================== */
.ticker {
  background: var(--night-2);
  color: var(--paper);
  border-block: 1px solid var(--line-dark);
  overflow: hidden;
  padding-block: 0.7rem;
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.ticker__tag {
  flex: none;
  padding-left: var(--gutter);
  font-size: var(--t-nano);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--live);
  display: flex; align-items: center; gap: 0.45rem;
}
.ticker__track { display: flex; gap: 2.5rem; white-space: nowrap; animation: ticker-run 42s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { font-size: var(--t-small); display: inline-flex; align-items: center; gap: 0.55rem; }
.ticker__item b { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; }
@keyframes ticker-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================ TROPHY BAR ================================== */
/* -----------------------------------------------------------------------------
   THE TROPHY BAND
   Hartbeespoort behind the score. The photo is a backdrop, not a picture: a
   dark scrim carries it so the crests, the score and the caption keep their
   contrast, and the band matches the dark sections elsewhere on the site.
   The gradient is darkest in the middle, where the score sits.
----------------------------------------------------------------------------- */
.trophy {
  position: relative;
  isolation: isolate;
  overflow: hidden;                   /* the team names run under the crests */
  border-block: 1px solid var(--line);
  background-color: #0E1311;          /* shows through before the photo loads */
  background-image:
    linear-gradient(180deg, rgba(8, 12, 11, 0.62) 0%, rgba(8, 12, 11, 0.82) 55%, rgba(8, 12, 11, 0.92) 100%),
    url('/assets/img/harties-trophy-bg.jpg');
  background-size: cover, cover;
  background-position: center 42%, center 42%;
  background-repeat: no-repeat, no-repeat;
  color: var(--paper);
}

/* On dark, the text-on-white team colours are unreadable (the green measures
   2.5:1 there), so the band uses the on-dark pair. */
.trophy .trophy__score--impala { color: var(--impala-2); }
.trophy .trophy__score--eland  { color: var(--eland-on-dark); }
.trophy .trophy__divider,
.trophy .trophy__meta,
.trophy .trophy__legend { color: rgba(255, 255, 255, 0.82); }
.trophy .trophy__bar { background: rgba(255, 255, 255, 0.22); }
.trophy .trophy__target { background: rgba(255, 255, 255, 0.55); }

/* The crests are dark artwork, so they get a soft lift off the photo. */
.trophy img[src$="/impala-crest.png"] {
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.55));
}
.trophy img[src$="/eland-crest.png"] {
  filter: grayscale(1) contrast(1.08) drop-shadow(0 3px 10px rgba(0, 0, 0, 0.55));
}
/* Phones: crests and names sit above the score so nothing is squeezed. */
/* Crest, score, crest — one row at every width. It used to stack on a phone
   because the names and captain lines needed their own line; without them it
   fits across. */
.trophy__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-5);
}

.trophy__team {
  position: relative;
  display: flex; align-items: center; justify-content: flex-end; min-width: 0;
}
.trophy__team--b { justify-content: flex-start; }

/* THE TEAM NAME, BEHIND THE CREST
   Anchored to its own outside edge and allowed to run inward under the crest,
   which is why it never pushes the layout about: it is out of flow and grows
   towards the middle, never past the edge of the band. Quiet enough that the
   score still wins the page, big enough to read before you have focused. */
.trophy__word {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 10vw, 6.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.16);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.trophy__word--impala { left: 0; }
.trophy__word--eland { right: 0; }
/* On a phone the crest fills its whole column, so the word would sit entirely
   behind it and read as a smudge rather than a name. The crest carries the
   team name in its own artwork there. */
@media (max-width: 760px) { .trophy__word { display: none; } }
.trophy__meta { overflow-wrap: anywhere; }
/* With the names gone the crests are the identity, so they take the room the
   text used to. They sit hard against the score on each side. */
.trophy__crest { position: relative; z-index: 1; width: clamp(78px, 23vw, 132px); height: auto; flex: none; }
.trophy__name {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 3.2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
}
/* A captain is a NAME, not a label. Set in caps at 0.1em tracking it wrapped
   onto two lines and read as shouting; sentence case fits on one. */
.trophy__meta {
  font-size: var(--t-micro);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  font-weight: 500;
  margin-top: 5px;
}
.trophy__score {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 11vw, 5rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.trophy__score--impala { color: var(--impala-ink); }
.trophy__score--eland { color: var(--eland); }
.trophy__vs { text-align: center; padding-inline: var(--s-2); }
.trophy__divider { font-size: var(--t-micro); letter-spacing: 0.2em; color: var(--ink-3); font-weight: 800; }
.trophy__scores { display: flex; align-items: baseline; gap: clamp(0.5rem, 2vw, 1.2rem); justify-content: center; }

/* Progress toward the 11 points needed */
.trophy__bar {
  position: relative;
  height: 6px;
  background: var(--paper-4);
  border-radius: var(--r-pill);
  overflow: hidden;
  display: flex;
}
.trophy__bar i { display: block; height: 100%; transition: width 700ms var(--ease-out); }
.trophy__bar .a { background: var(--impala); }
.trophy__bar .b { background: var(--eland); margin-left: auto; }
.trophy__target {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 2px;
  background: var(--ink);
  left: 50%;
}
/* These are SENTENCES. Uppercase belongs on short labels; a sentence set in
   caps wraps to two lines each and turns the calmest part of the page into
   four lines of shouting. */
.trophy__legend {
  display: flex; justify-content: flex-end; gap: var(--s-4);
  font-size: var(--t-micro); letter-spacing: 0; text-transform: none;
  color: var(--ink-3); font-weight: 500; margin-top: 0.7rem;
}

/* ============================ TEAM SPLIT ================================== */
.split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }

.split__panel {
  position: relative;
  padding: var(--s-7) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  overflow: hidden;
  isolation: isolate;
}
/* colours come from .team-fill--* */
.split__panel::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: -14%;
  bottom: -18%;
  width: 66%;
  aspect-ratio: 1;
  background: currentColor;
  opacity: 0.09;
  -webkit-mask: var(--mark) center / contain no-repeat;
          mask: var(--mark) center / contain no-repeat;
}
.split__crest {
  width: clamp(84px, 20vw, 140px);
  height: auto;
  /* A soft drop shadow lifts the monochrome crest off a coloured panel without
     flattening the illustration to a silhouette. */
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.28));
}
.split__name { font-size: var(--t-d2); }
.split__quote { font-size: 1.05rem; font-style: italic; color: var(--team-dim); max-width: 34ch; }
.split__stats { display: flex; gap: var(--s-6); margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--team-rule); }
.split__stat b { display: block; font-family: var(--font-display); font-size: var(--t-d3); font-weight: 900; line-height: 1; }
.split__stat span { font-size: var(--t-nano); letter-spacing: 0.14em; text-transform: uppercase; color: var(--team-dim); font-weight: 700; }

/* ============================ COUNTDOWN =================================== */
.countdown { display: flex; gap: clamp(0.6rem, 2.4vw, 1.6rem); }
.cd { text-align: center; min-width: 3.2rem; }
.cd b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 6.5vw, 3rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.cd span { font-size: var(--t-nano); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4); font-weight: 700; }
.cd + .cd { border-left: 1px solid var(--line); padding-left: clamp(0.6rem, 2.4vw, 1.6rem); }
.on-dark .cd + .cd { border-left-color: var(--line-dark); }

/* ============================ LIVE BOARD ================================== */
.board__filters {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  margin-bottom: var(--s-4);
  -webkit-overflow-scrolling: touch;
}
/* -----------------------------------------------------------------------------
   FILTER CHIPS
   These were 44px-tall pills in 800-weight uppercase at 0.12em: the loudest
   thing on a page whose job is showing scores. They are now a quiet 32px
   control -- but the TOUCH target is still 44px, extended invisibly above and
   below with a pseudo-element, so refinement does not cost the AAA target size.
----------------------------------------------------------------------------- */
.chip {
  position: relative;
  flex: none;
  padding: 0.34rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-nano);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  background: transparent;
  transition: color var(--dur-1), border-color var(--dur-1), background var(--dur-1);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
/* The invisible half of the target: 32px visible, 44px touchable. */
.chip::after {
  content: '';
  position: absolute;
  inset: -6px 0;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }

.board__list { display: grid; gap: var(--s-3); }
@media (min-width: 1100px) { .board__list { grid-template-columns: 1fr 1fr; gap: var(--s-4); } }

/* Expanded hole-by-hole strip inside a match */
.holes-strip { display: flex; gap: 2px; padding: var(--s-3) var(--s-4) var(--s-4); }
.holes-strip i,
.holes-strip button {
  flex: 1;
  height: 24px;
  border-radius: 2px;
  background: var(--paper-3);
  display: grid;
  place-items: center;
  font-size: var(--t-nano);
  font-weight: 800;
  color: var(--ink-3);
  font-style: normal;
}
.holes-strip .a { background: var(--impala); color: var(--ink); }
.holes-strip .b { background: var(--eland); color: #fff; }
.holes-strip .h { background: var(--paper-4); color: var(--ink-2); }

/* ============================== SCORING =================================== */
.scoring { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6rem); }

.score-head {
  font-size: var(--t-d3);
  margin: 0.5rem 0 0.3rem;
}
.score-head__sub {
  font-size: var(--t-small);
  color: var(--ink-3);
  margin: 0;
}

.hole-nav {
  position: sticky;
  top: var(--nav-h);
  z-index: 500;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-3);
}
.hole-nav__row { display: flex; align-items: center; gap: var(--s-3); }
.hole-nav__btn {
  width: var(--tap); height: var(--tap);
  flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  transition: all var(--dur-1);
}
.hole-nav__btn:hover:not([disabled]) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.hole-nav__btn[disabled] { opacity: 0.3; }
.hole-nav__main { flex: 1; text-align: center; min-width: 0; }
.hole-nav__hole {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}
.hole-nav__meta { font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-top: 4px; }

.hole-dots { display: flex; gap: 3px; margin-top: var(--s-3); }
/* Each dot is a jump-to-hole control, so it gets a real hit area via a
   transparent pseudo-element rather than a taller visible bar. */
.hole-dots i {
  position: relative;
  flex: 1; height: 5px; border-radius: 2px; background: var(--paper-4);
  transition: background var(--dur-2);
}
.hole-dots i::after {
  content: '';
  position: absolute;
  inset: -14px -1px;
}
.hole-dots i:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 3px; }
.hole-dots i.done { background: var(--ink-3); }
.hole-dots i.cur { background: var(--gold); }

.score-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}

/* Very small phones: a full name and a stepper will not share a line, so the
   stepper drops below rather than squeezing the name into three lines. */
@media (max-width: 359px) {
  .score-row { grid-template-columns: 1fr; gap: var(--s-3); }
  .score-row .stepper { justify-content: flex-end; }
}
.score-row__who { min-width: 0; display: flex; align-items: center; gap: 0.6rem; }
.score-row__name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.12;
  overflow-wrap: break-word;
  hyphens: auto;
}
.score-row__meta {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 700;
  margin-top: 3px;
  line-height: 1.35;
}
@media (min-width: 420px) {
  .score-row__name { font-size: 1.02rem; }
  .score-row__meta { font-size: var(--t-micro); letter-spacing: 0.1em; }
  .stepper { gap: 0.5rem; }
  .stepper__btn { width: 44px; }
  .stepper__value { width: 62px; }
}
.score-row--me .score-row__name { color: var(--gold-ink); }

.stepper { display: flex; align-items: center; gap: 0.35rem; flex: none; }
.stepper__btn {
  width: 42px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: 1.3rem;
  font-weight: 700;
  transition: all var(--dur-1);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.stepper__btn:active { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: scale(0.94); }
.stepper__value {
  position: relative;
  width: 54px; height: 52px;
  display: grid; place-items: center;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  background: var(--paper);
}
.stepper__value--empty { border-style: dashed; border-color: var(--line-2); color: var(--ink-5); font-weight: 700; }
.stepper__value--birdie { border-color: var(--live); color: var(--live); }
.stepper__value--eagle { border-color: var(--live); color: #fff; background: var(--live); }
.stepper__value--ace { border-color: var(--gold); background: var(--gold); color: #fff; }
.stepper__pts {
  position: absolute;
  right: -7px; top: -9px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--t-nano);
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: var(--r-pill);
  min-width: 18px;
  text-align: center;
}

/* The running match state, pinned to the bottom of the scoring screen. */
.score-status {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 600;
  background: var(--night);
  color: var(--paper);
  border-top: 1px solid var(--line-dark);
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.score-status__label {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.score-status__label--impala { color: var(--impala-2); }
.score-status__label--eland { color: var(--eland-2); }
.score-status__meta { font-size: var(--t-nano); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.72); font-weight: 700; }

/* Who took the hole — the answer you want standing on the green. */
.hole-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background: var(--paper-2);
}
.hole-result__label {
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hole-result__score {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: none;
}
.hole-result--impala { border-left-color: var(--impala); color: var(--impala-ink); background: var(--impala-soft); }
.hole-result--eland  { border-left-color: var(--eland);  color: var(--eland);      background: var(--eland-soft); }
.hole-result--halved { border-left-color: var(--ink-4);  color: var(--ink-3); }
.hole-result--pending { border-left-color: var(--line-2); color: var(--ink-4); }

/* A hole taken below the stableford floor needs a sentence, or "0 – 0" beside
   a winner reads as a fault. It takes its own line under the scoreline. */
.hole-result__why {
  flex-basis: 100%;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.88;
}

/* ---- reading the card --------------------------------------------------------
   Two different facts, two different marks: the ring round a number says what
   it was against par, the tint behind it says it won the hole.
------------------------------------------------------------------------------*/
.card-table td.sc-won--impala { background: var(--impala-soft); box-shadow: inset 0 -2.5px 0 var(--impala); }
.card-table td.sc-won--eland  { background: var(--eland-soft);  box-shadow: inset 0 -2.5px 0 var(--eland); }
.card-table td.sc-won .sc { font-weight: 900; }

.card-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-bottom: 0.55rem;
  font-size: var(--t-nano);
  color: var(--ink-4);
  font-weight: 600;
}
.card-legend b { font-weight: 800; color: var(--ink-3); }
.card-legend__swatch {
  display: inline-block;
  width: 0.85rem; height: 0.85rem;
  border-radius: 3px;
  margin-right: 0.3rem;
  vertical-align: -2px;
}
.card-legend__swatch--impala { background: var(--impala-soft); box-shadow: inset 0 -2.5px 0 var(--impala); }
.card-legend__swatch--eland  { background: var(--eland-soft);  box-shadow: inset 0 -2.5px 0 var(--eland); }

/* ============================== COURSES =================================== */
.course-hero {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--night);
  color: var(--paper);
  padding: var(--s-6) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 210px;
  justify-content: flex-end;
}
/* Two class names deep on purpose. `.course-hero > *` below carries the same
   weight as a bare `.course-hero__bg` and comes later, so it was winning and
   putting the backdrop back into the flow -- which collapsed it to nothing the
   moment its contents became absolute. */
.course-hero .course-hero__bg { position: absolute; inset: 0; opacity: 0.28; overflow: hidden; }
.course-hero__bg img, .course-hero__bg video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* A YouTube frame cannot be object-fit: cover, so it keeps its own 16:9 across
   the full width and sits in the middle. Where the hero is taller than that,
   the photograph behind it fills the band rather than a black edge -- which is
   why the still is always in the markup and not just a fallback. */
.course-hero__film {
  position: absolute;
  top: 50%; left: 50%;
  /* Overscaled and clipped by the parent. YouTube paints its own watermark in
     the bottom right and its player chrome along the bottom edge, and neither can be
     turned off from an embed -- pushing them outside the frame is the only way
     a YouTube film reads as a background rather than as an embedded player. */
  transform: translate(-50%, -50%) scale(1.4);
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  pointer-events: none;     /* decoration: it must not swallow a scroll or a tap */
}
.course-hero > * { position: relative; z-index: 1; }
.course-hero__name { font-size: var(--t-d2); }
.course-hero__stats { display: flex; flex-wrap: wrap; gap: var(--s-5); }

.tee-pick { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tee-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font-size: var(--t-nano); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  min-height: 44px;
  transition: all var(--dur-1);
}
.tee-chip i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); flex: none; }
.tee-chip[aria-pressed='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* =============================== TEAMS ==================================== */
.roster { display: grid; gap: var(--s-2); }
.roster__row {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  transition: border-color var(--dur-1), transform var(--dur-1);
}
.roster__row:hover { border-color: var(--ink-4); transform: translateX(2px); }
.roster__row--photo { grid-template-columns: 1.6rem auto 1fr auto; gap: var(--s-3); }
.roster__no { font-family: var(--font-display); font-size: 0.85rem; color: var(--ink-4); font-weight: 800; }
.roster__name { font-family: var(--font-display); font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.015em; line-height: 1.15; }
.roster__hi { font-size: var(--t-nano); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 800; }

/* =============================== PROFILE ================================== */
.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-4);
}
.profile__photo .avatar { border-width: 3px; box-shadow: var(--shadow-2); }
.profile__body { width: 100%; }
.profile__body .row { justify-content: center; }

@media (min-width: 620px) {
  .profile { flex-direction: row; align-items: center; text-align: left; gap: var(--s-5); }
  .profile__body .row { justify-content: flex-start; }
}

/* =============================== ADMIN ==================================== */
.admin { padding-bottom: var(--s-9); }
.admin__tabs {
  display: flex; gap: 0.3rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-5);
  -webkit-overflow-scrolling: touch;
}
.admin__tab {
  flex: none;
  padding: 0.9rem 1rem;
  min-height: 48px;
  font-size: var(--t-nano);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-1), border-color var(--dur-1);
}
.admin__tab[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--gold); }

.issue {
  display: flex; gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background: var(--paper);
}
.issue--warn   { border-left-color: var(--gold); }
.issue--danger { border-left-color: var(--live); }
.issue--info   { border-left-color: var(--ink-4); }
.issue__title { font-weight: 800; font-size: 0.92rem; margin-bottom: 2px; }
.issue__detail { font-size: var(--t-small); color: var(--ink-2); }

.draw-match {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  display: grid;
  gap: var(--s-3);
  background: var(--paper);
}
.draw-match__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 720px) { .draw-match__grid { grid-template-columns: 1fr auto 1fr; align-items: center; } }
.draw-match__vs { font-family: var(--font-display); font-weight: 900; color: var(--ink-5); text-align: center; }

/* The tee time is derived from the running order, so it is shown as a fact
   rather than offered as an input the organiser has to keep in step. */
.draw-match__tee {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .02em;
  padding: .18rem .5rem;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  color: var(--gold-ink);
  white-space: nowrap;
}

/* Sticky footer for the draw: how full it is, and the one button that saves it. */
.draw-save {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .06);
}
.draw-save .btn { min-height: 44px; }

.draw-status {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .7rem;
  align-items: baseline;
  font-size: var(--t-small);
  min-width: 0;
}
.draw-status__ok { color: var(--good-ink, var(--gold-ink)); font-weight: 800; }
.draw-status__warn { color: var(--warn-ink, var(--gold-ink)); font-weight: 800; }


.code-cell {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.16em;
  background: var(--paper-2);
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}

/* ============================== HONOURS =================================== */
.honour {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
.honour__year {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  font-weight: 900;
  color: var(--gold-ink);
  letter-spacing: -0.04em;
  line-height: 1;
  min-width: 3.4rem;
}
.honour__team { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: -0.015em; }
.honour__captain {
  font-size: var(--t-small);
  color: var(--ink-3);
  font-weight: 700;
  margin-top: 2px;
}
.honour__note {
  font-size: var(--t-nano);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 700;
  margin-top: 3px;
}

/* ============================== LOGIN ===================================== */
.login {
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  place-items: center;
  padding: var(--s-6) var(--gutter) var(--s-9);
  position: relative;
  background: var(--night);
  color: var(--paper);
  overflow: hidden;
}
.login__card {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-3);
}
.login__title { font-size: var(--t-d3); margin-bottom: var(--s-2); }

/* ============================ CAPTAIN'S WORD ==============================
   The captain stands in front of his own team's watermark. The mark is masked
   out of the team PNG so it tints with the panel instead of sitting on top of
   it as a grey picture, and the cut-out layers above it.
========================================================================== */
.captain {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--s-7) 0;
}

.captain__mark {
  position: absolute;
  z-index: 0;
  right: 50%;
  bottom: -6%;
  transform: translateX(50%);
  width: min(620px, 105%);
  aspect-ratio: 1;
  background: currentColor;
  opacity: 0.13;
  pointer-events: none;
  -webkit-mask: var(--mark) center / contain no-repeat;
          mask: var(--mark) center / contain no-repeat;
}

.captain__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}

.captain__figure { flex: none; display: block; }
.captain__photo {
  display: block;
  width: auto;
  height: clamp(260px, 48vw, 340px);
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.32));
}

.captain__words { width: 100%; max-width: 62ch; padding-bottom: var(--s-7); }
.captain__name { font-size: var(--t-d2); margin: 0.5rem 0 0.2rem; }
.captain__role {
  font-size: var(--t-nano);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: var(--s-4);
}

/* A captain's own title for his team talk, when he gives one. Sized between
   his name and the speech so it reads as a headline, not another paragraph. */
.captain__title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  font-weight: 800;
  font-stretch: 92%;
  line-height: 1.18;
  margin: var(--s-4) 0 0.7rem;
}

.captain__speech {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.62;
}
.captain__speech p { margin: 0 0 0.9em; }
.captain__speech p:last-child { margin-bottom: 0; }

/* The chant, given the weight it is delivered with. */
.captain__cry {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 5.2vw, 2.1rem);
  font-weight: 900;
  font-stretch: 88%;
  letter-spacing: -0.02em;
  line-height: 1.04;
  text-transform: uppercase;
  margin: var(--s-5) 0 0.4rem;
}
.captain__signoff {
  font-size: var(--t-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  margin: 0;
}
.captain__pending {
  font-size: clamp(1rem, 1.5vw, 1.08rem);
  line-height: 1.6;
  padding: var(--s-4);
  border: 1px dashed var(--team-rule);
  border-radius: var(--r-md);
  margin: 0;
}

@media (min-width: 900px) {
  .captain__inner {
    flex-direction: row;
    align-items: flex-end;
    gap: var(--s-7);
  }
  .captain__photo { height: clamp(360px, 40vw, 470px); }
  .captain__words { padding-bottom: var(--s-8); }
  .captain__mark { right: auto; left: 2%; transform: none; bottom: -10%; width: min(560px, 46%); }
}

/* ---- the captain on the home split panels ----------------------------------
   Sized so the frame crops around the waist: the captain reads as a portrait
   rather than a small full-length figure lost in the corner. The panel already
   clips, so the legs simply run off the bottom edge. */
.split__panel .captain__figure {
  position: absolute;
  right: 4%;
  top: 5%;
  bottom: auto;
  /* Roughly twice the panel height, so the frame lands just above the waist
     and the captain reads as a portrait rather than a full-length figure. */
  height: 202%;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
}
.split__panel .captain__photo {
  height: 100%;
  width: auto;
  filter: drop-shadow(-8px 10px 26px rgba(0, 0, 0, 0.28));
}
/* Below this the panel text needs the full width, so the figure steps aside. */
@media (max-width: 860px) {
  .split__panel .captain__figure { display: none; }
}
@media (min-width: 861px) {
  /* Room reserved on the right so the captain never sits behind the copy. */
  .split__panel { padding-right: clamp(11rem, 36%, 21rem); }
}
@media (min-width: 1400px) {
  .split__panel .captain__figure { right: 6%; height: 196%; }
}

/* ---- how shots are being worked out in this match --------------------------
   A player on a handicap of 9 showing "no shot" looks like a bug unless you
   are told he is the lowest in the match and therefore the datum. */
.shots-note {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--line-2);
  background: var(--paper-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.shots-note__line {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-3);
  line-height: 1.5;
}
.shots-note__line b { color: var(--ink); }
.shots-note__warn {
  margin: 0.5rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--live-ink);
  line-height: 1.5;
}
.score-row__flag { color: var(--live-ink); }

/* Scored, but played after the match was already won — not a halved hole. */
.holes-strip .dead {
  background: transparent;
  border: 1px dashed var(--line-2);
  color: var(--ink-5);
}

/* =============================================================================
   SIGNING THE CARD
   A finished match is signed by one player from each side. Sized for a thumb on
   a phone in a car park after 18 holes: a big pad, two big buttons, no fiddling.
============================================================================= */
.signoff {
  margin: var(--s-5) 0 var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-2);
}
.signoff--done { background: var(--paper); border-style: dashed; }

.signoff__title {
  font-family: var(--font-display);
  font-size: var(--t-d3);
  font-weight: 900;
  line-height: 1.05;
  margin: 0.35rem 0 0.4rem;
}
.signoff__lede { font-size: 0.92rem; color: var(--ink-3); margin: 0 0 var(--s-4); }
.signoff__note { font-size: 0.9rem; color: var(--ink-3); margin: var(--s-3) 0 0; }
.signoff__you  { font-size: 0.92rem; margin: var(--s-4) 0 0.5rem; }

.signoff__status {
  display: grid;
  gap: 0.4rem;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.signoff__line { display: flex; gap: 0.6rem; align-items: baseline; justify-content: space-between; }
.signoff__team {
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink-3);
}
.signoff__who  { font-size: 0.9rem; color: var(--ink); }
.signoff__wait { font-size: 0.9rem; color: var(--ink-4); }
.signoff__line.is-signed .signoff__team { color: var(--gold-ink); }

/* The pad is gone: signing is a deliberate tap now, and the server records who
   and when, which is the part that carries any weight. */
.signoff__actions {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--s-4);
}
.signoff__actions .btn { min-height: 48px; }
.signoff__submit { flex: 1; }
@media (min-width: 560px) { .signoff__submit { flex: 0 0 auto; } }

/* -----------------------------------------------------------------------------
   NARROW-SCREEN TABLE
   Eight columns do not fit a phone. The ones that answer "who is playing well"
   stay; the working detail returns when there is room for it. Hidden rather
   than side-scrolled, because a table you have to drag is a table nobody reads.
----------------------------------------------------------------------------- */
@media (max-width: 639px) {
  .table .col-wide { display: none; }
}

/* On a phone the team pill is gone, so the name carries the side instead.
   This board sits on near-black, so it needs the on-dark team colours: the
   text-on-white ones measured 3.07:1 and 1.80:1 here, which is invisible. */
.on-dark .ind-name--impala { color: var(--impala-2); }
.on-dark .ind-name--eland  { color: var(--eland-on-dark); }
@media (min-width: 640px) {
  /* The pill is back, so the name stops doing two jobs at once. */
  .on-dark .ind-name--impala,
  .on-dark .ind-name--eland { color: inherit; }
}

/* =============================================================================
   LIVE BOARD CONTROL BAR
   Filters left, day carousel and live pill right, on ONE line at 375px. That
   is the constraint everything here is sized against: four labels, two arrows
   and a pill inside 343px of usable width.
============================================================================= */
.board__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  min-width: 0;
}
/* ---- segmented filter control ---------------------------------------------
   One outline around the set, hairlines between the segments. Four separate
   bordered chips cost 8px of border and 9px of gap that the row did not have.
--------------------------------------------------------------------------- */
.seg {
  display: flex;
  min-width: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  overflow: hidden;
  flex: 0 1 auto;
}
.seg__btn {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  padding: 0.34rem 0.34rem;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  min-height: 28px;
  transition: background var(--dur-1), color var(--dur-1);
}
.seg__btn:first-child { border-left: 0; }

/* Small Androids (360px) are the tightest case the row has to survive. */
@media (max-width: 374px) {
  .seg__btn { padding: 0.34rem 0.26rem; letter-spacing: 0; }
  .daynav__btn { width: 24px; }
  .board__bar { gap: 0.3rem; }
}
/* Visually 28px, touchable 44px — the same inset trick as the chips. */
.seg__btn::after { content: ''; position: absolute; inset: -8px 0; }
.seg__btn:hover { color: var(--ink); }
.seg__btn[aria-pressed='true'] { background: var(--ink); color: var(--paper); }

/* Everything in this row grows at ONE breakpoint. Staggering it meant the
   arrows grew first and squeezed the segments below their content width. */
@media (min-width: 480px) {
  .seg__btn { padding: 0.36rem 0.62rem; font-size: var(--t-nano); letter-spacing: var(--track-label); }
}
.board__right {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
}

/* Compact filters. The 44px touch target is kept by the .chip::after inset. */


/* ---- day carousel ---------------------------------------------------------
   Arrows either side of the day name. Wraps around rather than disabling at
   the ends: with two days, "next" from Day 2 obviously means Day 1.
--------------------------------------------------------------------------- */
.daynav {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex: none;
}
.daynav__btn {
  width: 26px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-3);
  font-size: 15px;
  line-height: 1;
  position: relative;
  transition: color var(--dur-1), border-color var(--dur-1);
}
/* Visually 26x28, touchable 44 high — same trick as the chips. */
.daynav__btn::after { content: ''; position: absolute; inset: -8px -4px; }
.daynav__btn:hover:not([disabled]) { color: var(--ink); border-color: var(--ink); }
.daynav__btn[disabled] { opacity: 0.3; pointer-events: none; }
.daynav__label {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  padding-inline: 0.22rem;
  white-space: nowrap;
}
/* "D1" on phones, "Day 1" only once there is genuinely room. These are two
   separate steps on purpose: growing the segments AND spelling out the day at
   the same 400px breakpoint overflowed the row between 400 and 460. */
.daynav__label .daynav__word { display: none; }
@media (min-width: 480px) {
  .daynav__btn { width: 30px; height: 30px; }
  .daynav__label { font-size: var(--t-nano); letter-spacing: var(--track-label); padding-inline: 0.4rem; }
  .daynav__label .daynav__word { display: inline; }
  .daynav__label .daynav__abbr { display: none; }
}

@media (max-width: 399px) {
  .board__right .pill { padding: 0.26rem 0.5rem; gap: 0.3rem; }
}

/* Four numbers across on a phone, which is what a stat row wants to be: the
   old flex row wrapped into a ragged two-and-two. */
.statgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4) var(--s-3);
}
@media (min-width: 480px) { .statgrid { grid-template-columns: repeat(4, 1fr); } }

/* =============================================================================
   PREMIUM CLUB SYSTEM — route-specific compositions
============================================================================= */

/* Editorial page introductions share the landing page's scale and whitespace. */
body:not(.home-page) h1,
body:not(.home-page) h2,
body:not(.home-page) h3 {
  text-transform: none;
  letter-spacing: -.045em;
  font-stretch: 92%;
}

body[data-route='teams'] .page > .section:first-child,
body[data-route='schedule'] .page > .section:first-child,
body[data-route='history'] .page > .section:first-child,
body[data-route='courses'] .page > div > .section:first-child,
body[data-route='profile'] .page > div > .section:first-child,
body[data-route='admin'] .page > .admin > .wrap {
  padding-top: clamp(3.5rem, 8vw, 7rem);
}

body[data-route='teams'] .sec-head__title,
body[data-route='courses'] .sec-head__title,
body[data-route='schedule'] .sec-head__title,
body[data-route='history'] .sec-head__title {
  max-width: 980px;
  font-size: clamp(3.8rem, 9vw, 8rem);
  line-height: 0.82;
  letter-spacing: -0.07em;
  text-transform: none;
}

body[data-route='profile'] .sec-head__title,
body[data-route='admin'] .sec-head__title,
body[data-route='score'] .sec-head__title {
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 0.88;
  letter-spacing: -0.06em;
  text-transform: none;
}

body:not(.home-page) .eyebrow {
  color: #51584F;
  letter-spacing: 0.075em;
}
body:not(.home-page) .eyebrow::before { width: 1rem; height: 5px; border-radius: 50%; background: var(--club-acid-2); }
body:not(.home-page) .sec-head { gap: 1rem; }
body:not(.home-page) .sec-head .lede { color: #596058; }

/* Live board: the score is the hero, with controls immediately beneath it. */
body[data-route='live'] .page > div { padding-top: clamp(1rem, 3vw, 2rem); background: var(--club-stone); }
body[data-route='live'] .trophy {
  width: calc(min(100%, var(--maxw)) - var(--gutter) - var(--gutter));
  margin-inline: auto;
  border: 0;
  border-radius: var(--club-radius-lg);
  overflow: hidden;
  box-shadow: var(--club-shadow);
}
body[data-route='live'] .trophy > .wrap { padding-inline: clamp(1.25rem, 4vw, 3rem); }
body[data-route='live'] .trophy__grid { min-height: clamp(190px, 18vw, 250px); }
body[data-route='live'] .trophy__score { font-size: clamp(3.2rem, 8vw, 6.5rem); }
body[data-route='live'] .trophy__bar { height: 8px; }
body[data-route='live'] .board__bar {
  padding: 0.75rem;
  background: #fff;
  border: 1px solid rgba(16,20,15,.08);
  border-radius: 18px;
  box-shadow: 0 18px 46px -40px rgba(16,20,15,.7);
}
body[data-route='live'] .seg { border-radius: var(--r-pill); background: var(--club-stone); padding: 3px; border: 0; }
body[data-route='live'] .seg__btn { border: 0; border-radius: var(--r-pill); text-transform: none; letter-spacing: 0; }
body[data-route='live'] .seg__btn[aria-pressed='true'] { background: var(--club-night); color: #fff; }
body[data-route='live'] .daynav__btn { border-radius: 50%; }
body[data-route='live'] .section.on-dark {
  margin-top: clamp(4rem, 8vw, 7rem);
  border-radius: var(--club-radius-lg) var(--club-radius-lg) 0 0;
  background: var(--club-night);
}
body[data-route='live'] .section.on-dark .sec-head__title { text-transform: none; font-size: clamp(2.8rem, 6vw, 5.8rem); }

/* Course films now behave like the generous media panels on the homepage. */
body[data-route='courses'] .course-hero {
  min-height: clamp(400px, 48vw, 610px);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border-radius: var(--club-radius-lg);
  border: 0;
  isolation: isolate;
  box-shadow: var(--club-shadow);
}
body[data-route='courses'] .course-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(6,12,8,.06) 20%, rgba(6,12,8,.86) 100%);
}
body[data-route='courses'] .course-hero__bg { opacity: .78; }
body[data-route='courses'] .course-hero__name {
  max-width: 12ch;
  font-size: clamp(2.8rem, 6.5vw, 6.5rem);
  line-height: .86;
  letter-spacing: -.065em;
  text-transform: none;
}
body[data-route='courses'] .course-hero__stats {
  margin-top: 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,.22);
}
body[data-route='courses'] .tee-pick { padding: .45rem; border-radius: var(--r-pill); background: #fff; }
body[data-route='courses'] .tee-chip { border: 0; text-transform: none; letter-spacing: 0; }
body[data-route='courses'] .tee-chip[aria-pressed='true'] { background: var(--club-night); }

/* Squads: quiet roster cards, followed by full-bleed captain editorials. */
body[data-route='teams'] .page > section:nth-child(2) { padding-bottom: clamp(5rem, 10vw, 9rem); }
body[data-route='teams'] .card.team-fill {
  border: 0;
  border-radius: var(--club-radius);
  padding: 1.4rem !important;
  box-shadow: none;
}
body[data-route='teams'] .roster { gap: .6rem; }
body[data-route='teams'] .roster__row {
  padding: .85rem 1rem;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 14px 35px -34px rgba(16,20,15,.8);
}
body[data-route='teams'] .roster__row:hover { transform: translateX(4px); box-shadow: 0 20px 45px -36px rgba(16,20,15,.75); }
body[data-route='teams'] .roster__name { text-transform: none; letter-spacing: -.015em; }
body[data-route='teams'] .captain {
  margin: clamp(1rem, 3vw, 2.5rem) var(--gutter);
  border-radius: var(--club-radius-lg);
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}
body[data-route='teams'] .captain__name {
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: .86;
  letter-spacing: -.065em;
  text-transform: none;
}
body[data-route='teams'] .captain__title { font-size: clamp(1.35rem, 2.6vw, 2.15rem); }
body[data-route='teams'] .captain__speech { max-width: 58ch; }
body[data-route='teams'] .page > .section:last-child .card { min-height: 250px; padding: 1.6rem; }

/* Itinerary: each day reads as a premium event card rather than a plain table. */
body[data-route='schedule'] .page > section.section--tight:not(:first-child) { padding-top: 0; }
body[data-route='schedule'] .page > section.section--tight .card {
  border: 0;
  border-radius: var(--club-radius);
  box-shadow: var(--club-shadow);
}
body[data-route='schedule'] .page > section.section--tight .team-fill {
  padding: clamp(1.5rem, 4vw, 3rem) !important;
}
body[data-route='schedule'] .page > section.section--tight .team-fill h2 {
  text-transform: none;
  letter-spacing: -.05em;
}
body[data-route='schedule'] .section.on-dark {
  margin: 0 var(--gutter) clamp(5rem, 10vw, 8rem);
  border-radius: var(--club-radius-lg);
  background: var(--club-night);
  box-shadow: var(--club-shadow);
}
body[data-route='schedule'] .section.on-dark h2 { text-transform: none; font-size: clamp(2.8rem, 6vw, 5.8rem) !important; }
body[data-route='schedule'] .section.on-dark .stat__value[style] { color: var(--club-acid) !important; }

/* Honours becomes a modern editorial roll of winners. */
body[data-route='history'] .page > section:nth-child(2) .card { border: 0; padding: 1.5rem; box-shadow: none; }
body[data-route='history'] .page > section:nth-child(3) .wrap { display: grid; gap: .75rem; }
body[data-route='history'] .honour {
  min-height: 112px;
  padding: 1.1rem 1.35rem;
  background: #fff;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 18px 40px -38px rgba(16,20,15,.7);
}
body[data-route='history'] .honour__year { color: #526B14; font-size: clamp(2rem, 5vw, 3.7rem); }
body[data-route='history'] .honour__team { text-transform: none; font-size: 1.15rem; }

/* Profile and organiser views use the same system at a practical density. */
body[data-route='profile'] .wrap--text { max-width: 980px; }
body[data-route='profile'] .profile {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--club-night);
  color: #fff;
  border: 0;
}
body[data-route='profile'] .profile .muted { color: rgba(255,255,255,.67); }
body[data-route='profile'] .profile__body h2 { text-transform: none; letter-spacing: -.045em; }
body[data-route='profile'] .profile__photo .avatar { box-shadow: 0 0 0 7px var(--club-acid); }
body[data-route='profile'] .card:not(.profile) { padding: 1.5rem; }

body[data-route='admin'] .admin__tabs {
  gap: .25rem;
  padding: .35rem;
  border: 0;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: 0 18px 46px -40px rgba(16,20,15,.7);
}
body[data-route='admin'] .admin__tab {
  min-height: 42px;
  padding: .6rem .9rem;
  border: 0;
  border-radius: var(--r-pill);
  text-transform: none;
  letter-spacing: 0;
}
body[data-route='admin'] .admin__tab[aria-selected='true'] { background: var(--club-night); color: #fff; }
body[data-route='admin'] .issue,
body[data-route='admin'] .draw-match,
body[data-route='admin'] .draw-save { border-radius: 16px; }
body[data-route='admin'] .draw-save { background: color-mix(in srgb, #fff 92%, transparent); backdrop-filter: blur(14px); }
body[data-route='admin'] dialog { border-radius: var(--club-radius); }

/* Sign-in: one centred card on the club's stone ground. */
body[data-route='login'] .login,
body[data-route='admin'] .login {
  background: var(--club-stone);
  color: var(--club-night);
  justify-items: center;
  isolation: isolate;
}
body[data-route='login'] .login::before,
body[data-route='admin'] .login::before {
  content: '';
  position: absolute;
  z-index: 0;
  width: min(62vw, 760px);
  aspect-ratio: 1;
  right: -10%;
  bottom: -36%;
  border-radius: 50%;
  background: var(--club-acid);
}
body[data-route='login'] .login__card,
body[data-route='admin'] .login__card {
  width: min(100%, 500px);
  margin-inline: auto;
  padding: clamp(1.7rem, 4vw, 3rem);
  border: 1px solid rgba(16,20,15,.08);
  border-radius: var(--club-radius-lg);
  box-shadow: var(--club-shadow);
}
body[data-route='login'] .login__title,
body[data-route='admin'] .login__title {
  font-size: clamp(2.7rem, 5vw, 4.6rem);
  line-height: .88;
  letter-spacing: -.06em;
  text-transform: none;
}

/* On-course scoring keeps every thumb target, now grouped into clear surfaces. */
body[data-route='score'] .scoring { background: var(--club-stone); }
body[data-route='score'] .scoring > .wrap:first-child {
  margin-top: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1.5rem, 4vw, 2.7rem);
  border-radius: var(--club-radius);
  background: var(--club-night);
  color: #fff;
  box-shadow: var(--club-shadow);
}
body[data-route='score'] .scoring > .wrap:first-child .eyebrow,
body[data-route='score'] .scoring > .wrap:first-child .score-head__sub { color: rgba(255,255,255,.68); }
body[data-route='score'] .score-head {
  margin-top: .75rem;
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  line-height: .85;
  letter-spacing: -.065em;
  text-transform: none;
}
body[data-route='score'] .board__filters { padding: .5rem; background: #fff; border-radius: var(--r-pill); }
body[data-route='score'] .chip { border: 0; border-radius: var(--r-pill); text-transform: none; letter-spacing: 0; }
body[data-route='score'] .chip[aria-pressed='true'] { background: var(--club-night); }
body[data-route='score'] .hole-nav {
  top: var(--nav-h);
  padding-block: .55rem;
  background: color-mix(in srgb, var(--club-stone) 93%, transparent);
  border: 0;
  backdrop-filter: blur(14px);
}
body[data-route='score'] .hole-nav__btn { background: #fff; border: 0; box-shadow: 0 8px 24px -18px rgba(16,20,15,.8); }
body[data-route='score'] .hole-nav__btn:hover:not([disabled]) { background: var(--club-night); }
body[data-route='score'] .hole-dots i { height: 6px; border-radius: var(--r-pill); }
body[data-route='score'] .hole-dots i.cur { background: var(--club-acid-2); }
body[data-route='score'] .score-sheet {
  margin-top: 1rem;
  padding: 0 1.1rem !important;
  background: #fff;
  border-radius: var(--club-radius);
  box-shadow: 0 18px 46px -42px rgba(16,20,15,.65);
}
body[data-route='score'] .score-row:last-child { border-bottom: 0; }
body[data-route='score'] .score-row__name { text-transform: none; letter-spacing: -.02em; }
body[data-route='score'] .stepper__btn,
body[data-route='score'] .stepper__value { border-radius: 13px; }
body[data-route='score'] .stepper__value { background: var(--club-stone); border-color: rgba(16,20,15,.35); }
body[data-route='score'] .stepper__value--ace { color: var(--club-night); background: var(--impala); border-color: var(--impala); }
body[data-route='score'] .score-sheet__footer .card-table { box-shadow: 0 18px 46px -42px rgba(16,20,15,.65); }
body[data-route='score'] .hole-result,
body[data-route='score'] .signoff { border-radius: 16px; }
body[data-route='score'] .score-status {
  left: var(--gutter);
  right: var(--gutter);
  bottom: max(.6rem, env(safe-area-inset-bottom, 0px));
  border: 0;
  border-radius: 18px;
  background: color-mix(in srgb, var(--club-night) 96%, transparent);
  box-shadow: 0 20px 60px -28px rgba(0,0,0,.65);
}

@media (max-width: 760px) {
  body[data-route='live'] .trophy,
  body[data-route='teams'] .captain,
  body[data-route='schedule'] .section.on-dark { margin-inline: .7rem; }
  body[data-route='live'] .trophy { width: auto; }
  body[data-route='live'] .trophy__grid { min-height: 175px; }
  body[data-route='courses'] .course-hero { min-height: 500px; }
  body[data-route='courses'] .course-hero__stats { display: grid; grid-template-columns: 1fr 1fr; }
  body[data-route='login'] .login,
  body[data-route='admin'] .login { align-content: start; padding-top: 2rem; }
  body[data-route='login'] .login::before,
  body[data-route='admin'] .login::before { width: 100vw; right: -42%; bottom: -18%; opacity: .65; }
  body[data-route='score'] .score-status { left: .65rem; right: .65rem; }
}

/* A player who has chosen their own password: the access code still exists for
   the organiser's records, but it no longer signs anybody in, so showing it in
   the same place as an active code would be misleading. */
.claimed {
  font-size: var(--t-nano);
  font-weight: 650;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-ink);
  white-space: nowrap;
}

/* The match state under the headline, on the dark scoring panel. */
.score-head__state { display: block; font-weight: 700; color: rgba(255,255,255,.9); }
.score-head__team--impala { color: var(--impala-2); }
.score-head__team--eland { color: var(--eland-2); }

/* =============================================================================
   STATS — three category cards
   Each card answers one question. The leaders are always visible; the whole
   field is one disclosure away, and scrolls sideways inside its own card so the
   page never does.
============================================================================= */
/* minmax(0, 1fr), not the implicit auto track: a wide table inside a card
   otherwise sizes the whole column to the table, and the page scrolls sideways
   on a phone instead of the table scrolling in its own box. */
.statcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }


.statcard {
  border: 1px solid var(--line);
  border-radius: var(--club-radius);
  background: var(--paper);
  padding: var(--s-5);
}
.statcard__head { margin-bottom: var(--s-4); }
.statcard__title {
  font-size: var(--t-h1);
  letter-spacing: -.035em;
  margin: 0;
}
.statcard__blurb {
  margin: .25rem 0 0;
  font-size: .86rem;
  color: var(--ink-3);
  max-width: 46ch;
}

/* The leaders. A list, not a table: five rows do not need column rules. */
.podium { display: grid; }
.podium__row {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  align-items: center;
  gap: .7rem;
  padding: .6rem 0;
  border-top: 1px solid var(--line);
}
.podium__row:first-child { border-top: 0; }
.podium__pos {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--ink-4);
  font-size: .9rem;
}
.podium__who { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.podium__name {
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.podium__lead {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.statcard__more { margin-top: var(--s-4); }
.statcard__more > summary {
  cursor: pointer;
  font-size: .84rem;
  font-weight: 700;
  color: var(--ink-3);
  padding: .35rem 0;
}
.statcard__more > summary:hover { color: var(--ink); }
.statcard__more[open] > summary { margin-bottom: var(--s-3); }

/* Team as a word, carrying its colour. Never colour alone. */
.teamtag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--t-nano);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .16rem .5rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.teamtag--impala { background: var(--impala-soft); color: var(--impala-ink); }
.teamtag--eland  { background: var(--eland-soft);  color: var(--eland-ink); }

/* Holes won against holes lost. Green up, red down, grey level -- and the sign
   is always drawn, so a nought reads as a nought and not as a failure. */
.diff { font-variant-numeric: tabular-nums; font-weight: 800; }
.diff--up { color: var(--win); }
.diff--down { color: var(--live-ink); }
.diff--level { color: var(--ink-4); }

.statrow__who { display: inline-flex; align-items: center; gap: .55rem; }
.statrow__name { font-weight: 650; }

/* -----------------------------------------------------------------------------
   ONE PLAYER, OPENED OUT, and his scoring spread
   Both live on a player's own profile now. They were written for the stats
   page's expandable rows; that page is three cards instead, but the profile
   still shows a man his own detail.
----------------------------------------------------------------------------- */
.pdetail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-4) var(--s-5);
  white-space: normal;
}
@media (min-width: 620px) { .pdetail { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .pdetail { grid-template-columns: repeat(4, 1fr); } }
.pdetail__head {
  font-size: var(--t-nano);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink-4);
  margin-bottom: .5rem;
}
.pdetail__line {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .35rem .6rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--line);
}
.pdetail__line:last-child { border-bottom: 0; }
.pdetail__k { font-size: var(--t-small); }
.pdetail__v { font-weight: 800; font-variant-numeric: tabular-nums; }
.pdetail__n {
  grid-column: 1 / -1;
  font-size: var(--t-nano);
  color: var(--ink-4);
}

/* The field's scoring spread, as a row of counts. */
.scorebar {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.scorebar__pip {
  font-size: var(--t-nano);
  padding: .28rem .55rem;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  color: var(--ink-2);
  white-space: nowrap;
}
.scorebar__pip strong { font-variant-numeric: tabular-nums; }
.scorebar__pip--aces,
.scorebar__pip--albatrosses,
.scorebar__pip--eagles { background: var(--club-acid); color: var(--club-night); font-weight: 700; }
.scorebar__pip--birdies { background: color-mix(in srgb, var(--club-acid) 42%, var(--paper-2)); color: var(--club-night); }

/* The strip is one button: tapping it opens the card underneath. */
.holes-toggle {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: 0 var(--s-4) 0 0;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.holes-toggle .holes-strip { flex: 1; min-width: 0; }
.holes-toggle:hover .holes-strip i { filter: brightness(1.04); }
.holes-toggle:focus-visible { outline: 2px solid var(--ink-2); outline-offset: -2px; border-radius: var(--r-sm); }
.holes-toggle__hint {
  flex: none;
  font-size: var(--t-nano);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.holes-toggle__hint::after { content: " \25be"; }
.holes-toggle[aria-expanded="true"] .holes-toggle__hint::after { content: " \25b4"; }

/* The card itself, inside a match on the board. */
.holepop {
  margin: 0 var(--s-4) var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
}
.holepop .card-table { font-size: var(--t-nano); }

/* Five filters on singles day: the filters get a full line, the carousel and
   the live pill sit under them on the right. Four or fewer keep the one line. */
.board__bar--wrap { flex-wrap: wrap; row-gap: var(--s-2); }
.board__bar--wrap .seg { flex: 1 1 100%; }
.board__bar--wrap .seg__btn { flex: 1 1 auto; }
.board__bar--wrap .board__right { margin-left: auto; }

/* =============================================================================
   HOLE GUIDE — the 3D map, full-bleed under the header, with the hole's panels
   floating over it. The panels are night glass whatever the site's theme: they
   sit on satellite imagery, which is never light enough for dark text.
============================================================================= */
.hg { position: relative; }
.hg__loading { padding: var(--s-7) var(--s-5); text-align: center; color: var(--ink-3); }
.hg__stage {
  position: relative;
  height: calc(100svh - var(--nav-h));
  min-height: 520px;
  overflow: hidden;
  background: #0b0f0a;
  color: #fff;
}
.hg__map { position: absolute; inset: 0; }
.hg__status {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  padding: .7rem 1rem; border-radius: 10px; max-width: min(90%, 30rem); text-align: center;
  background: rgba(16, 20, 15, .86); font-size: .9rem; z-index: 3;
}
.hg__status--error { color: #FFB4A8; }
.hg__panel {
  background: rgba(16, 20, 15, .78);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: .75rem .9rem;
}
.hg__top {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  pointer-events: none;
}
.hg__left, .hg__right { display: flex; flex-direction: column; gap: 10px; pointer-events: auto; }
.hg__left { width: min(290px, 100%); }
.hg__right { width: 230px; }
.hg__bottom {
  position: absolute; left: 12px; right: 12px; bottom: 58px; z-index: 2;
  display: flex; align-items: flex-end; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  pointer-events: none;
}
/* The hole card is its own thing on the stage: bottom left on a wide screen,
   top centre on a phone (between the two map buttons). */
.hg__hole {
  position: absolute; left: 12px; bottom: 58px; z-index: 2;
  max-width: min(520px, calc(100% - 24px));
}
.hg__bottom > * { pointer-events: auto; }
.hg__kicker { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: rgba(255,255,255,.7); }
.hg__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; line-height: 1.15; margin-top: .2rem; }
.hg__sub { font-size: .78rem; color: rgba(255,255,255,.72); margin-top: .15rem; letter-spacing: .04em; }
.hg__elevhead { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.hg__slope { font-size: .8rem; font-weight: 800; color: var(--club-acid); }
.hg__svg { display: block; width: 100%; height: auto; margin-top: .35rem; }
.hg__ends { display: flex; justify-content: space-between; font-size: .68rem; color: rgba(255,255,255,.6); }
.hg__row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .28rem 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .85rem; }
.hg__row:last-of-type { border-bottom: 0; }
.hg__rowlabel { color: rgba(255,255,255,.75); }
.hg__rowval b { font-variant-numeric: tabular-nums; font-size: .95rem; }
.hg__like { color: var(--club-acid); font-size: .75rem; font-weight: 700; }
.hg__hint { margin-top: .4rem; font-size: .7rem; color: rgba(255,255,255,.55); }
.hg__holerow { display: flex; gap: 1.1rem; }
.hg__backlink {
  display: inline-block; margin-bottom: .45rem; font-size: .78rem; font-weight: 800;
  color: var(--club-acid); text-decoration: none;
}
.hg__backlink:hover { text-decoration: underline; }
.hg__stat { display: flex; flex-direction: column; }
.hg__stat span { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); font-weight: 800; }
.hg__stat b { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.hg__stat:first-child b { color: var(--club-acid); }
.hg__tees { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .55rem; max-width: 26rem; }
.hg__tee, .hg__btn, .hg__tab {
  font: inherit; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
}
.hg__tee { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; font-size: .75rem; font-weight: 700; }
.hg__tee.is-on { background: var(--club-acid); color: var(--club-night); border-color: var(--club-acid); }
.hg__dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); }
.hg__tools { display: flex; gap: 6px; flex-wrap: wrap; }
.hg__btn { padding: .5rem .85rem; font-size: .8rem; font-weight: 800; background: rgba(16,20,15,.82); }
.hg__btn:hover, .hg__tab:hover { border-color: var(--club-acid); }
.hg__btn.is-active { background: #E3C05C; border-color: #E3C05C; color: var(--club-night); }
.hg__btn--save { background: var(--club-acid); border-color: var(--club-acid); color: var(--club-night); }
.hg__btn:disabled { cursor: not-allowed; opacity: .42; }
.hg__tee:focus-visible, .hg__btn:focus-visible, .hg__tab:focus-visible { outline: 2px solid var(--club-acid); outline-offset: 2px; }
.hg__editor { width: min(320px, calc(100vw - 24px)); border-color: rgba(227,192,92,.55); }
.hg__edithead { margin-top: .2rem; font-family: var(--font-display); font-size: 1rem; font-weight: 800; }
.hg__editcopy { margin-top: .35rem; font-size: .75rem; line-height: 1.4; color: rgba(255,255,255,.76); }
.hg__editdistance { margin-top: .4rem; font-size: .76rem; font-weight: 800; color: #E3C05C; }
.hg__editerror { margin-top: .4rem; color: #FFB4A8; font-size: .75rem; line-height: 1.35; }
.hg__editactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .6rem; }
.hg__editactions .hg__btn { padding: .4rem .65rem; font-size: .72rem; }
.hg__rules { width: min(380px, calc(100vw - 24px)); border-color: rgba(87,211,255,.55); }
.hg__ruletitle { margin-top: .22rem; font: 800 1rem/1.2 var(--font-display); }
.hg__ruleanswer { margin: .42rem 0 0; color: rgba(255,255,255,.9); font-size: .8rem; line-height: 1.45; }
.hg__ruleapplied { margin-top: .55rem; padding: .55rem .65rem; border-radius: 8px; background: rgba(87,211,255,.1); }
.hg__ruleapplied strong { display: block; color: #8FE4FF; font-size: .76rem; }
.hg__ruleapplied blockquote { margin: .3rem 0 0; color: #fff; font-size: .76rem; line-height: 1.4; }
.hg__rulewarning { margin: .5rem 0 0; color: #FFD69A; font-size: .74rem; line-height: 1.4; }
.hg__ruleapprox { margin: .45rem 0 0; color: rgba(255,255,255,.62); font-size: .68rem; line-height: 1.35; }
.hg__rulecoords { margin-top: .45rem; color: #8FE4FF; font: 700 .7rem/1.2 ui-monospace, monospace; }
.hg__rulesources { display: flex; flex-direction: column; gap: .2rem; margin-top: .5rem; }
.hg__rulesources a { color: #8FE4FF; font-size: .68rem; text-decoration: underline; }
.hg__rules a.hg__btn { display: inline-flex; align-items: center; text-decoration: none; }
.hg__tabs {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(to top, rgba(11,15,10,.92), rgba(11,15,10,0));
}
.hg__tabs::-webkit-scrollbar { display: none; }
.hg__tab { flex: none; padding: .35rem .75rem; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.hg__tab.is-on { background: var(--club-acid); color: var(--club-night); border-color: var(--club-acid); }
.hg__credit { margin-top: .35rem; font-size: .6rem; color: rgba(255,255,255,.45); }

/* The phone's fold-away buttons and each panel's close button: hidden on a
   wide screen, where the panels simply stay open. */
.hg__fab, .hg__close { display: none; }
.hg__fab {
  position: absolute; top: 12px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  align-items: center; justify-content: center; gap: 1px;
  color: #fff; background: rgba(16, 20, 15, .82); border: 1px solid rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 800 .62rem/1 var(--font-body); cursor: pointer;
}
.hg__fab--dist { left: 12px; flex-direction: column; }
.hg__fab--elev { right: 12px; }
.hg__fab--tools { top: auto; bottom: 62px; right: 12px; }
.hg__fab--holes { top: auto; bottom: 62px; left: 12px; width: auto; height: 44px; padding: 0 .55rem 0 .85rem; gap: .3rem; flex-direction: row; }
.hg__fablabel { font-family: var(--font-display); font-size: .82rem; font-weight: 800; letter-spacing: .01em; }
.hg__fab[aria-expanded="true"] { background: var(--club-acid); color: var(--club-night); border-color: var(--club-acid); }
/* Following the player: the menu button keeps a live ring while the GPS runs. */
.hg__fab.is-live { border-color: var(--club-acid); box-shadow: 0 0 0 2px rgba(200, 255, 61, .35); }
.hg__fab:focus-visible, .hg__close:focus-visible { outline: 2px solid var(--club-acid); outline-offset: 2px; }
.hg__close {
  position: absolute; top: 6px; right: 6px; width: 32px; height: 32px;
  align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff;
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}

/* A phone: the course card and elevation stack at the top, distances drop
   under them, and the hole card sits over the tabs. */
@media (max-width: 719px) {
  .hg__top { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  .hg__left, .hg__right { width: auto; }
  .hg__course { display: none; }
  .hg__panel { padding: .55rem .7rem; }
  /* Folded away until their button is pressed; one open at a time. */
  .hg__fab:not([hidden]) { display: inline-flex; }
  .hg__close { display: inline-flex; }
  .hg__dist, .hg__elev { display: none; position: relative; padding-right: 2.6rem; }
  .hg__dist.is-open, .hg__elev.is-open:not([hidden]) { display: block; }
  /* Distances two to a row, so the open panel is short and the map shows. */
  .hg__distbody { display: grid; grid-template-columns: 1fr 1fr; column-gap: .9rem; }
  .hg__distbody .hg__kicker, .hg__distbody .hg__hint, .hg__distbody .hg__credit { grid-column: 1 / -1; }
  .hg__row { font-size: .78rem; padding: .2rem 0; }
  .hg__bottom { bottom: 54px; }
  .hg__holerow { gap: .8rem; }
  .hg__stat b { font-size: 1.1rem; }
  /* The hole itself sits at the top, between the two map buttons, where it is
     read at a glance; the panels open below it. */
  .hg__hole {
    top: 10px; bottom: auto; left: 64px; right: 64px; z-index: 3;
    max-width: none; padding: .4rem .6rem;
  }
  .hg__holerow { gap: .7rem; overflow-x: auto; scrollbar-width: none; }
  .hg__holerow::-webkit-scrollbar { display: none; }
  .hg__hole .hg__stat span { font-size: .5rem; letter-spacing: .1em; }
  .hg__hole .hg__stat b { font-size: 1rem; }
  .hg__hole .hg__tees { margin-top: .3rem; }
  .hg__hole .hg__tee { padding: .18rem .45rem; font-size: .66rem; }
  .hg__top { top: 104px; }
  /* Tees scroll sideways on one line rather than stacking. */
  .hg__tees { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .hg__tees::-webkit-scrollbar { display: none; }
  .hg__tee { flex: none; }
  /* The hole card leaves room for the menu button beside it. */
  .hg__hole { max-width: calc(100vw - 88px); min-width: 0; }
  /* The camera buttons: a column above the menu button, shown when it is open. */
  .hg__tools {
    position: absolute; right: 0; bottom: 58px; z-index: 4;
    display: none; flex-direction: column; align-items: flex-end; gap: 6px;
  }
  .hg__tools.is-open { display: flex; }
  /* The holes: a drop-up panel above their button, four to a row. */
  .hg__tabs {
    position: absolute; left: 12px; right: 12px; bottom: 66px; z-index: 4;
    display: none; grid-template-columns: repeat(4, 1fr); gap: 6px;
    padding: 10px; border-radius: 14px;
    background: rgba(16, 20, 15, .92); border: 1px solid rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .hg__tabs.is-open { display: grid; }
  .hg__tab { width: 100%; padding: .45rem .2rem; text-align: center; }
  .hg__fab--holes, .hg__fab--tools { bottom: 12px; }
  .hg__btn { padding: .55rem .9rem; font-size: .8rem; }
  .hg__rules { max-height: min(58svh, 430px); overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) { .hg__tabs { scroll-behavior: auto; } }

/* =============================================================================
   PRIVATE PRACTICE CARD
============================================================================= */
.practice { max-width: 1180px; }
.practice__hero {
  padding: clamp(1.4rem, 4vw, 2.5rem); border-radius: var(--radius-lg);
  color: #fff; overflow: hidden; position: relative;
  background:
    radial-gradient(circle at 88% 12%, rgba(196, 240, 82, .19), transparent 28rem),
    linear-gradient(145deg, #17231a, #0d0e0b 70%);
}
.practice__hero .sec-head__title { color: #fff; margin-top: .45rem; }
.practice__hero .lede { color: rgba(255,255,255,.72); }
.practice__identity, .practice__summary {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.practice__identity { margin-top: 1.4rem; max-width: 680px; }
.practice__summary { margin: 14px 0; }
.practice__stat {
  display: flex; flex-direction: column; gap: .25rem; min-width: 0;
  padding: .9rem 1rem; border-radius: var(--radius-md);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
}
.practice__summary .practice__stat { background: var(--surface); border-color: var(--line); color: var(--ink); }
.practice__stat span { font-size: .68rem; text-transform: uppercase; letter-spacing: .11em; opacity: .64; font-weight: 800; }
.practice__stat strong { font: 800 clamp(1.1rem, 3vw, 1.55rem)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.practice__privacy { margin-top: 1rem; font-size: .78rem; color: rgba(255,255,255,.58); }
.practice__holes {
  display: grid; grid-template-columns: repeat(18, minmax(42px, 1fr)); gap: 6px;
  overflow-x: auto; padding: 2px 0 10px; scrollbar-width: thin;
}
.practice__hole {
  min-height: 50px; padding: .35rem .25rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); cursor: pointer; font: 800 .8rem/1 var(--font-body);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .28rem;
}
.practice__hole b { color: var(--club-green); font-size: .72rem; }
.practice__hole.is-scored { border-color: rgba(29,92,74,.38); background: rgba(29,92,74,.07); }
.practice__hole.is-on { background: var(--club-green); color: #fff; border-color: var(--club-green); }
.practice__hole.is-on b { color: var(--club-acid); }
.practice__scorer { padding: clamp(1rem, 3vw, 1.5rem); }
.practice__scorerhead { display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.practice__scorerhead h2 { margin: .2rem 0 0; font-family: var(--font-display); }
.practice__distance { font: 800 clamp(1.4rem, 4vw, 2rem)/1 var(--font-display); color: var(--club-green); }
.practice__shots { margin: .8rem 0; color: var(--muted); font-size: .9rem; }
.practice__scorebuttons { display: grid; grid-template-columns: repeat(11, minmax(42px, 1fr)); gap: 7px; }
.practice__score {
  min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font: 800 1rem/1 var(--font-display); cursor: pointer;
}
.practice__score:hover, .practice__score:focus-visible { border-color: var(--club-green); outline: none; }
.practice__score.is-on { background: var(--club-green); border-color: var(--club-green); color: #fff; }
.practice__score--clear { font: 800 .72rem/1 var(--font-body); }
.practice__score:disabled { cursor: not-allowed; opacity: .45; }
.practice__actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 1rem; }
.practice__guide-note { font-size: .75rem; color: var(--muted); text-align: center; }
.practice__card { margin-top: 14px; }
.practice__tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.practice__table { width: 100%; min-width: 950px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.practice__table th, .practice__table td { padding: .62rem .48rem; text-align: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.practice__table tr:last-child > * { border-bottom: 0; }
.practice__table tr > *:last-child { border-right: 0; }
.practice__table thead th, .practice__table tbody th { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.practice__table tbody th { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--surface); }
.practice__table tbody tr:nth-child(3) td { font-weight: 800; color: var(--club-green); }
.practice__unavailable { max-width: 680px; margin: 10vh auto; padding: clamp(1.4rem, 4vw, 2.5rem); }

@media (max-width: 719px) {
  .practice__identity, .practice__summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .practice__stat { padding: .72rem .55rem; }
  .practice__stat span { font-size: .56rem; }
  .practice__scorebuttons { grid-template-columns: repeat(6, minmax(42px, 1fr)); }
  .practice__actions { flex-wrap: wrap; }
  .practice__actions .btn--gold { order: -1; width: 100%; }
  .practice__guide-note { order: -1; width: 100%; }
}

/* =============================================================================
   LOCAL AI RULES OFFICIAL
============================================================================= */
.rules { max-width: 980px; }
.rules__hero {
  position: relative; overflow: hidden; padding: clamp(1.5rem, 5vw, 3rem);
  border-radius: var(--radius-lg); color: #fff;
  background:
    radial-gradient(circle at 90% 5%, rgba(87,211,255,.2), transparent 26rem),
    linear-gradient(145deg, #17231a, #0d0e0b 70%);
}
.rules__hero .sec-head__title { color: #fff; margin-top: .45rem; }
.rules__hero .lede { color: rgba(255,255,255,.76); max-width: 62ch; }
.rules__notice { margin: 1rem 0 0; max-width: 74ch; font-size: .78rem; color: rgba(255,255,255,.58); }
.rules__chat { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.rules__empty { padding: 1.2rem; }
.rules__empty p { margin: .35rem 0 0; color: var(--muted); }
.rules__message { max-width: 86%; padding: 1rem 1.1rem; border-radius: var(--radius-md); }
.rules__message p { margin: .35rem 0 0; line-height: 1.55; }
.rules__message--user { align-self: flex-end; color: #fff; background: var(--club-green); border-bottom-right-radius: 4px; }
.rules__message--official { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.rules__who { font-size: .65rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; opacity: .62; }
.rules__answer { font-size: 1rem; }
.rules__applied { margin-top: .9rem; padding: .8rem .9rem; border-radius: var(--radius-sm); background: rgba(29,92,74,.08); border-left: 3px solid var(--club-green); }
.rules__applied strong { display: block; color: var(--club-green); font-size: .78rem; }
.rules__quote { margin: .4rem 0 0; font-size: .9rem; color: var(--ink-2); }
.rules__warning { color: #8a5b14; font-size: .82rem; }
.rules__sources { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; margin-top: .75rem; font-size: .72rem; color: var(--muted); }
.rules__sources a { color: var(--club-green); font-weight: 750; }
.rules__maprequest { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.rules__maprequest p { color: var(--muted); font-size: .85rem; }
.rules__mapfields { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 7px; margin: .7rem 0; }
.rules__select, .rules__input {
  width: 100%; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink); font: inherit;
}
.rules__select { min-height: 42px; padding: .55rem .65rem; font-size: .82rem; }
.rules__form { position: sticky; bottom: 10px; z-index: 2; padding: 10px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-md); backdrop-filter: blur(8px); }
.rules__input { resize: vertical; min-height: 76px; padding: .8rem .9rem; line-height: 1.45; }
.rules__input:focus, .rules__select:focus { outline: 2px solid var(--club-green); outline-offset: 1px; }
.rules__formrow { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
.rules__voice.is-listening { color: #fff; background: #b43d32; border-color: #b43d32; }
.rules__formstatus { min-height: 1.2em; margin-top: .45rem; color: var(--muted); font-size: .75rem; }
.rules__unavailable { max-width: 720px; margin: 7vh auto; padding: clamp(1.4rem, 5vw, 2.5rem); }
.rules__setup { margin: 1rem 0; padding: 1rem; border-radius: var(--radius-sm); background: var(--paper-2); }
.rules__setup p { margin: .25rem 0; color: var(--muted); }
.rules__setup code { display: block; overflow-x: auto; padding: .65rem; color: var(--club-green); }
.rules__keyform { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 1rem 0; }
.rules__keyinput {
  min-width: 0; min-height: 46px; padding: .7rem .8rem; border: 1px solid var(--line);
  border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit;
}
.rules__keyinput:focus { outline: 2px solid var(--club-green); outline-offset: 1px; }
.rules__keyform .rules__formstatus { grid-column: 1 / -1; }

@media (max-width: 600px) {
  .rules__message { max-width: 94%; }
  .rules__mapfields { grid-template-columns: 1fr; }
  .rules__formrow .btn { flex: 1; }
  .rules__keyform { grid-template-columns: 1fr; }
  .rules__keyform .rules__formstatus { grid-column: auto; }
}

/* =============================================================================
   THE PROGRAMME — Friday and Saturday's side games, as the poster lists them
============================================================================= */
.prog__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5);
}
.prog__day {
  font-family: var(--font-display); font-size: var(--t-d2); font-weight: 900; line-height: 1;
}
.prog__count {
  font-size: var(--t-nano); letter-spacing: .18em; text-transform: uppercase; font-weight: 800;
}
.prog__list { list-style: none; margin: 0; padding: var(--s-4) var(--s-5) var(--s-5); }
.prog__item {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--line);
}
.prog__item:last-child { border-bottom: 0; padding-bottom: 0; }
.prog__num {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gold); color: var(--gold-ink);
  font-family: var(--font-display); font-size: .92rem; font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.prog__body { flex: 1 1 auto; min-width: 0; }
.prog__title {
  font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .01em;
}
/* The pink ball is the pink ball: the one item the poster colours in. */
.prog__title--pink { color: #D6459B; }
.prog__detail { font-size: .88rem; color: var(--ink-2); margin-top: .2rem; }
.prog__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.prog__minus { border-color: var(--live); color: var(--live-ink); }

@media (max-width: 719px) {
  .prog__title { font-size: .95rem; }
}

/* ---- the weekend's running order, on the schedule -------------------------- */
.run__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
}
.run__day { font-family: var(--font-display); font-size: var(--t-d3); font-weight: 900; line-height: 1; }
.run__from { font-size: var(--t-nano); letter-spacing: .18em; text-transform: uppercase; font-weight: 800; }
.run__list { list-style: none; margin: 0; padding: var(--s-4) var(--s-5) var(--s-5); }
.run__item {
  display: flex; gap: var(--s-4); align-items: baseline;
  padding: .5rem 0; border-bottom: 1px solid var(--line);
}
.run__item:last-child { border-bottom: 0; padding-bottom: 0; }
.run__time {
  flex: none; width: 3.4rem;
  font-family: var(--font-display); font-weight: 900; font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.run__what { font-weight: 700; font-size: .95rem; line-height: 1.25; }
.run__note { font-size: .82rem; color: var(--ink-2); margin-top: .1rem; }
/* The two that hold everyone else up are called out, as on the poster. */
.run__item--flag .run__time, .run__item--flag .run__what { color: var(--gold-ink); }
.run__item--flag .run__what { text-transform: uppercase; letter-spacing: .01em; }

/* =============================== ORDER OF MERIT ============================ */
/* The season table is wide by nature -- a column per month -- so it scrolls
   sideways in its own container rather than making the page do it. */
.merit { font-variant-numeric: tabular-nums; }
.merit th.merit__month {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 5.5rem;
}
.merit__pos { font-weight: 700; white-space: nowrap; }
.merit__who { white-space: nowrap; font-weight: 600; }
.merit__total { font-weight: 700; }
/* Struck rather than hidden: "why is my 28 not in my total" is the first
   question anybody asks, and the answer should be on the row. line-through on
   the number itself, so the rule is exactly as wide as the digits. */
.merit__dropped {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.45;
}
.merit__absent { opacity: 0.3; }
.merit__row:hover td { background: var(--paper-2, #f2f2f2); }

.merit__month-card { display: grid; gap: var(--s-3); }
.merit__month-card.is-off { opacity: 0.6; }
.merit__honour { display: grid; gap: 0.1rem; }

/* =============================================================================
   THE CLUB HOME, AND THE TOUR SECTION
   -----------------------------------------------------------------------------
   The front door stopped being the tour when the club started playing a round
   a month. These are the pieces that carry the season on the home page, plus
   the bar and the cards that put the tour behind its own year.

   Every selector here is single-class and scoped to its own block. The course
   hero taught us what happens when a later rule of equal specificity lands on
   a shared child selector: it won, silently, and collapsed the element.
============================================================================= */

/* ---- the drawer's groups -------------------------------------------------- */
.drawer__group {
  margin-top: var(--s-5);
  padding-bottom: 0.35rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.drawer__link--sub {
  font-size: clamp(1.05rem, 4vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  padding-block: 0.7rem;
}

/* ---- last time out ------------------------------------------------------- */
.club-last { display: grid; gap: var(--s-5); }
.club-last__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.club-last__venue {
  margin: 0.3rem 0 0.2rem;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.club-last__honours {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.club-honour { display: grid; gap: 0.15rem; min-width: 0; }
.club-honour strong { font-size: 0.95rem; line-height: 1.3; }

/* ---- the top five -------------------------------------------------------- */
.club-top { width: 100%; }
.club-top .merit__who { white-space: normal; }

/* ---- the season, one line a month ---------------------------------------- */
.club-months { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.club-month {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: center;
  gap: var(--s-4);
  padding: 0.85rem var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
}
.club-month + .club-month { border-top: 0; }
.club-month[data-off='true'] { background: var(--paper-2); }
.club-month__no {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--ink-5);
}
.club-month__venue { display: grid; gap: 0.1rem; min-width: 0; }
.club-month__venue strong { letter-spacing: -0.01em; }
.club-month__win { font-size: 0.9rem; color: var(--ink-3); min-width: 0; }

@media (max-width: 640px) {
  .club-month { grid-template-columns: 2.1rem minmax(0, 1fr); row-gap: 0.3rem; }
  .club-month__win,
  .club-month .pill { grid-column: 2; font-size: 0.82rem; }
}

/* ---- the tour panel on the home page ------------------------------------- */
.club-tour__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-6);
  padding: clamp(1.6rem, 4vw, 2.8rem);
  border-radius: var(--club-radius-lg);
  background: var(--club-night);
  color: #fff;
}
.club-tour__inner .hc-kicker { color: var(--club-acid); }
.club-tour__title {
  margin: 0.7rem 0 0.8rem;
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.club-tour__inner .lede { color: rgba(255, 255, 255, 0.72); margin: 0; }
.club-tour__score { display: grid; gap: var(--s-4); justify-items: start; }
.club-tour__line {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.club-tour__line strong { font-size: clamp(1.8rem, 5vw, 2.6rem); letter-spacing: -0.04em; }
.club-tour__line span { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.club-tour__v { color: var(--club-acid); }
.club-tour__score .tiny { color: rgba(255, 255, 255, 0.6); }

@media (max-width: 820px) {
  .club-tour__inner { grid-template-columns: 1fr; }
}

/* ---- the bar above every tour page ------------------------------------------
   The tour is its own world, so the one thing that must never be more than a
   tap away is the way out of it. */
.tour-bar { background: var(--club-night); color: #fff; }
.tour-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  padding-block: 0.55rem;
}
.tour-bar__back {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
}
.tour-bar__back strong { font-weight: 800; letter-spacing: -0.01em; }
.tour-bar__back-sub {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.tour-bar__back:hover { color: var(--club-acid); }
.tour-bar__back:hover .tour-bar__back-sub { color: var(--club-acid); }
.tour-bar__here {
  margin-right: auto;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.tour-bar__up {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--club-acid);
}
.tour-bar__years { display: flex; gap: 0.3rem; margin-right: auto; }
.tour-bar__year {
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.7);
}
.tour-bar__year:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.tour-bar__year.is-on { background: var(--club-acid); color: var(--club-night); }

/* ---- the year index ------------------------------------------------------ */
.tour-card { display: grid; gap: var(--s-4); align-content: start; }
.tour-card__year {
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 0.9;
  font-weight: 900;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.tour-card__name { font-size: 1.05rem; letter-spacing: -0.01em; }
.tour-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

.tour-record { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.tour-record__row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-4);
  padding: 0.75rem var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
}
.tour-record__row + .tour-record__row { border-top: 0; }
.tour-record__year { font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .tour-record__row { grid-template-columns: 3.4rem minmax(0, 1fr); row-gap: 0.2rem; }
  .tour-record__row .tiny { grid-column: 2; }
}

/* =============================================================================
   FACES
   -----------------------------------------------------------------------------
   Half this field never played the tour, so about a third of them have no photo
   and will not get one. Every rule below has to look deliberate with a
   monogram in it, not like a hole where a picture should be -- which is why the
   avatar keeps its ring and its ground either way, and nothing is sized to a
   photograph's crop.
============================================================================= */

/* ---- the player cell in the season table --------------------------------- */
.merit__player { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.merit__name { white-space: nowrap; }

/* The podium, marked on the row rather than by colouring the number: at a
   glance it is the first three rows that matter, not three numerals. */
.merit__row[data-rank] td:first-child { position: relative; }
.merit__row[data-rank] td:first-child::before {
  content: '';
  position: absolute;
  inset: 12% auto 12% 0;
  width: 3px;
  border-radius: 3px;
  background: var(--paper-4);
}
.merit__row[data-rank='1'] td:first-child::before { background: var(--gold); }
.merit__row[data-rank='2'] td:first-child::before { background: var(--ink-5); }
.merit__row[data-rank='3'] td:first-child::before { background: #C08A4E; }

/* ---- an honour, as a person ---------------------------------------------- */
.merit__honour {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}
.merit__honour-text { display: grid; gap: 0.05rem; min-width: 0; }
.merit__honour-text strong { font-size: 0.92rem; line-height: 1.25; }
.merit__month-no {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-5);
  margin-bottom: 0.2rem;
}

.club-honour { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.club-honour__text { display: grid; gap: 0.05rem; min-width: 0; }

/* ---- the top five on the club home --------------------------------------- */
.club-ranks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.club-rank {
  display: grid;
  grid-template-columns: 1.6rem auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  padding: 0.7rem 1rem 0.7rem 0.8rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--club-radius);
}
.club-rank__pos {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--ink-5);
  text-align: center;
}
.club-rank__who { display: grid; gap: 0.05rem; min-width: 0; }
.club-rank__who strong { letter-spacing: -0.015em; }
.club-rank__pts { display: flex; align-items: baseline; gap: 0.3rem; }
.club-rank__pts strong {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* The leader is the one row that is allowed to shout. Second and third get a
   marker and nothing else -- three loud rows is no hierarchy at all. */
.club-rank[data-rank='1'] {
  background: var(--club-night);
  border-color: var(--club-night);
  color: #fff;
}
.club-rank[data-rank='1'] .club-rank__pos { color: var(--club-acid); }
.club-rank[data-rank='1'] .tiny { color: rgba(255, 255, 255, 0.62); }
.club-rank[data-rank='2'] { border-left: 3px solid var(--ink-5); }
.club-rank[data-rank='3'] { border-left: 3px solid #C08A4E; }

@media (max-width: 560px) {
  .club-rank { grid-template-columns: 1.3rem auto minmax(0, 1fr) auto; gap: 0.7rem; padding-inline: 0.7rem; }
  .club-rank__pts strong { font-size: 1.2rem; }
}

/* ---- the winner's face in the season strip ------------------------------- */
.club-month__win { display: flex; align-items: center; gap: 0.5rem; }

/* ---- the club hero ---------------------------------------------------------
   The tour's hero type is set for "Where mates / become rivals." -- eleven and
   fourteen characters. "A round a month. / A score all year." is sixteen on
   both lines and ran off the side of the page at that size. Its own scale
   rather than a shorter headline: the sentence is the thing worth keeping. */
.club-hero__title { font-size: clamp(2.45rem, 7.1vw, 6.1rem); letter-spacing: -0.055em; }
.club-hero .hc-hero__intro { gap: 2rem; }
.club-hero .hc-hero__actions { flex: none; }
.club-hero .hc-button { white-space: nowrap; }

@media (max-width: 760px) {
  .club-hero .hc-hero__intro { flex-direction: column; align-items: flex-start; }
}

/* =============================================================================
   ONE MONTH
============================================================================= */
.round-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-4);
  padding: var(--s-5) 0 0;
  border-top: 1px solid var(--line);
}
.round-fact { display: grid; gap: 0.1rem; }
.round-fact strong { font-size: 0.95rem; }

.round-honours {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border-radius: var(--club-radius);
  background: var(--paper);
  border: 1px solid var(--line);
}
.round-honours__win { display: flex; align-items: center; gap: var(--s-4); }
.round-honours__name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.round-honours__rest {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

/* ---- the field ----------------------------------------------------------- */
.field-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.field-row {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--club-radius);
  overflow: hidden;
}
.field-row[data-me='true'] { border-color: var(--club-acid-2); box-shadow: 0 0 0 1px var(--club-acid-2); }
.field-row__head {
  display: grid;
  grid-template-columns: 2.6rem auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  padding: 0.65rem 1rem;
}
.field-row__pos {
  font-family: var(--font-display);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--ink-4);
}
.field-row__who { display: grid; gap: 0.05rem; min-width: 0; }
.field-row__who strong { display: flex; align-items: center; gap: 0.45rem; letter-spacing: -0.015em; }
.field-row__pts { display: flex; align-items: baseline; gap: 0.3rem; }
.field-row__pts strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* The fold-out card. The marker is removed because the whole head is the
   control, and a disclosure triangle next to a 40px face reads as clutter. */
.field-row__fold > summary { cursor: pointer; list-style: none; }
.field-row__fold > summary::-webkit-details-marker { display: none; }
.field-row__fold > summary:hover { background: var(--paper-2); }
.field-row__fold[open] > summary { border-bottom: 1px solid var(--line); }
.field-card { display: grid; gap: var(--s-4); padding: var(--s-4) 1rem 1rem; }
.field-card__nine { width: 100%; font-variant-numeric: tabular-nums; }
.field-card__nine th, .field-card__nine td { padding: 0.3rem 0.35rem; text-align: center; }
.field-card__nine .lab { text-align: left; white-space: nowrap; }
.field-card__pts td { font-weight: 700; }
.field-card td[data-score='birdie'],
.field-card td[data-score='eagle'],
.field-card td[data-score='albatross'],
.field-card td[data-score='ace'] {
  background: var(--gold-soft);
  border-radius: 6px;
  font-weight: 800;
}

.field-away { margin-top: var(--s-6); }
.field-away > summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; }
.field-away__list {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem;
}
.field-away__list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.pill--sm { font-size: 0.6rem; padding: 0.1rem 0.4rem; }

@media (max-width: 560px) {
  .field-row__head { grid-template-columns: 2rem auto minmax(0, 1fr) auto; gap: 0.6rem; padding-inline: 0.7rem; }
  .field-row__pts strong { font-size: 1.15rem; }
}

/* =============================================================================
   ENTERING A CARD FOR A MONTH
   -----------------------------------------------------------------------------
   One thumb, in sunlight, possibly wearing a glove. Every key is at least 44px
   and the points for a tap are printed on the key, because stableford is the
   one format where a man wants to know whether the next one is worth anything
   before he writes it down.
============================================================================= */
.score-holebar {
  position: sticky;
  top: var(--nav-h);
  z-index: 5;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.score-holebar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: 0.6rem;
}
.score-holebar__par { font-size: 1.05rem; font-weight: 750; letter-spacing: -0.02em; }
.score-holebar__shots {
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-size: 0.72rem;
  font-weight: 800;
}

.merit-pad { display: grid; gap: var(--s-4); padding-top: var(--s-5); }
.merit-pad__value { display: grid; place-items: center; }
.merit-pad__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}
.merit-pad__key {
  display: grid;
  place-items: center;
  gap: 0.1rem;
  min-height: 62px;
  padding: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  font-variant-numeric: tabular-nums;
}
.merit-pad__key strong { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.03em; }
.merit-pad__key small { font-size: 0.62rem; color: var(--ink-4); }
.merit-pad__key:hover { border-color: var(--ink-5); }
.merit-pad__key.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.merit-pad__key.is-on small { color: rgba(255, 255, 255, 0.7); }
.merit-pad__key[data-score='birdie'] strong { color: var(--gold-ink); }
.merit-pad__key[data-score='eagle'] strong,
.merit-pad__key[data-score='albatross'] strong,
.merit-pad__key[data-score='ace'] strong { color: var(--gold-ink); }
.merit-pad__key[data-score='birdie'],
.merit-pad__key[data-score='eagle'],
.merit-pad__key[data-score='albatross'],
.merit-pad__key[data-score='ace'] { background: var(--gold-3); border-color: var(--gold-2); }
.merit-pad__key.is-on[data-score] { background: var(--ink); border-color: var(--ink); }
.merit-pad__key.is-on[data-score] strong { color: var(--gold); }

.merit-pad__pickup {
  min-height: 48px;
  border: 1px dashed var(--line-2);
  border-radius: 16px;
  background: transparent;
  color: var(--ink-3);
  font-size: 0.86rem;
  font-weight: 650;
}
.merit-pad__pickup:hover { border-style: solid; color: var(--ink); }

.merit-card { display: grid; gap: var(--s-4); }
.merit-card__nine { width: 100%; font-variant-numeric: tabular-nums; font-size: 0.8rem; }
.merit-card__nine th, .merit-card__nine td { padding: 0.3rem 0.35rem; text-align: center; }
.merit-card__nine .lab { text-align: left; white-space: nowrap; }
.merit-card__pts td { font-weight: 750; }
.merit-card td[data-on='true'] { outline: 2px solid var(--gold); border-radius: 6px; }
.merit-card td[data-score='birdie'],
.merit-card td[data-score='eagle'],
.merit-card td[data-score='albatross'],
.merit-card td[data-score='ace'] { background: var(--gold-soft); border-radius: 6px; font-weight: 800; }

@media (min-width: 560px) {
  .merit-pad__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}