:root {
  --green-900: #232b16;
  --green-800: #2b331a;
  --green-700: #3d4526;
  --green-600: #4e5b31;
  --green-400: #6f7d4a;
  --cream: #f5f2e6;
  --cream-2: #efeadb;
  --ink: #23271a;
  --muted: #6b6f5d;
  --line: #d9d4c2;
  --gold: #b08d3d;
  --white: #fffef8;
}

* { box-sizing: border-box; }
/* Every in-page nav link landed with the section's eyebrow hidden behind the
   fixed bar, so you arrived somewhere without being told where. */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: "Georgia", "Times New Roman", serif;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.sans { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---- Top nav ----
   A translucent layer the page runs underneath, rather than an opaque strip that
   hides it. The blur is what separates chrome from content, so the bar no longer
   needs to shrink to signal that the page has moved — and the padding is now
   constant, which keeps a layout property off the scroll path. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 28px;
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
.nav.scrolled {
  background: rgba(43, 51, 26, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 1px 12px rgba(0,0,0,0.22);
}
/* Without the blur the same alpha is just a washed-out bar, so fall back to solid. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.scrolled { background: var(--green-800); }
}
@media (prefers-reduced-transparency: reduce) {
  .nav.scrolled { background: var(--green-800); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.nav .mark { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; color: var(--cream); }
.nav .mark img { width: 40px; height: 40px; }
.nav .mark b { font-family: -apple-system, sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.4px; white-space: nowrap; }
@media (max-width: 400px) { .nav .mark b { font-size: 13px; } .nav .mark img { width: 34px; height: 34px; } }
.nav a.link {
  font-family: -apple-system, sans-serif; font-size: 13px; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--cream); text-decoration: none; opacity: 0.85;
}
.nav a.link:hover { opacity: 1; }
.nav a.cta {
  font-family: -apple-system, sans-serif; font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--green-800); background: var(--cream); padding: 8px 16px; border-radius: 999px; text-decoration: none;
}
.nav a.cta:hover { background: #fff; }
.nav .links { display: flex; align-items: center; gap: 20px; }
.nav-toggle { display: none; background: none; border: none; color: var(--cream); font-size: 24px; line-height: 1; cursor: pointer; padding: 6px 8px; -webkit-appearance: none; appearance: none; }
@media (max-width: 720px) {
  .nav { padding: 12px 16px; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav .links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--green-800); padding: 6px 0; box-shadow: 0 12px 26px rgba(0,0,0,0.35);
    display: none;
  }
  .nav.open .links { display: flex; }
  .nav .links a.link, .nav .links a.cta {
    display: block; padding: 14px 22px; margin: 0; border-radius: 0;
    background: none; color: var(--cream); text-align: left; opacity: 1; font-size: 15px;
  }
  .nav .links a.cta { color: #e6c977; font-weight: 700; }
  .nav .links a.link:hover, .nav .links a.cta:hover { background: rgba(255,255,255,0.08); }
}

/* ---- Hero ---- */
.hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--cream); overflow: hidden;
  background: #232b16;
}
.hero .hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%; z-index: 0;
  animation: kenburns 24s ease-in-out infinite alternate; will-change: transform;
}
@keyframes kenburns { from { transform: scale(1.06); } to { transform: scale(1.2) translateY(-2%); } }
/* Hero video (replaces the still bg on the homepage): no Ken Burns — the clip has
   its own motion — and centered so the vertical clip fills the frame cleanly. */
.hero video.hero-bg { animation: none; object-position: center; background: #232b16; }
.hero .scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(30,37,18,0.62) 0%, rgba(30,37,18,0.38) 38%, rgba(30,37,18,0.88) 100%);
}
.hero .hills { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: auto; opacity: 0.5; z-index: 1; }
.hero-inner { position: relative; z-index: 2; padding: 90px 20px; animation: rise 1.2s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.hero .crest { width: 128px; height: 128px; margin: 0 auto 22px; filter: drop-shadow(0 4px 18px rgba(0,0,0,0.35)); }
.hero .eyebrow {
  font-family: -apple-system, sans-serif; text-transform: uppercase; letter-spacing: 4px;
  font-size: 12px; color: #d9d3bd; margin: 0 0 14px;
}
/* At 4px tracking this line runs wider than a phone and orphans "2026" on its own row. */
@media (max-width: 560px) {
  .hero .eyebrow { letter-spacing: 2px; font-size: 11px; }
}
/* Tracking is in em, not px, because this line ranges from 42px to 84px and a
   fixed px value is proportionally largest exactly where type wants to be
   tightest. Large text reads as too loosely spaced at its natural tracking, so
   it goes negative as it grows — the opposite of the small caps below. */
.hero h1 { font-size: clamp(42px, 8vw, 84px); margin: 0; font-weight: 400; letter-spacing: -0.015em; line-height: 1.02; }
.hero .sub { font-size: clamp(15px, 2.4vw, 20px); color: #e7e2cf; margin: 16px 0 14px; font-style: italic; }
.hero .hero-desc {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px; line-height: 1.65; color: #e7e2cf; max-width: 560px; margin: 0 auto 30px;
  text-align: center;
}
/* Launch announcement plaque. Sits over moving video, so it carries its own darkened
   ground for legibility rather than relying on the hero scrim alone. */
.hero .hero-launch {
  display: inline-flex; align-items: baseline; justify-content: center; gap: 10px;
  flex-wrap: wrap; max-width: 560px; margin: 4px auto 20px; padding: 11px 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-align: center; border: 1px solid rgba(245, 242, 230, 0.34); border-radius: 4px;
  background: rgba(28, 35, 17, 0.62); backdrop-filter: blur(5px);
}
.hero .hl-when {
  font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: #e6c977; white-space: nowrap;
}
.hero .hl-what { font-size: 14px; line-height: 1.5; color: #f5f2e6; }
@media (max-width: 560px) {
  .hero .hero-launch { display: flex; gap: 4px; padding: 12px 16px; }
}
.hero .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero .scrollcue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2;
  font-family: -apple-system, sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: #cfc9b2; animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,7px); } }

.btn {
  font-family: -apple-system, sans-serif; font-size: 14px; letter-spacing: 0.4px; font-weight: 600;
  padding: 13px 24px; border-radius: 999px; text-decoration: none; cursor: pointer;
  border: 1px solid var(--cream); display: inline-flex; align-items: center; gap: 8px;
  /* Named rather than `all`: `all` animates whatever happens to change, including
     layout properties, and puts them on the compositor's critical path. */
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.btn.solid { background: var(--cream); color: var(--green-800); }
.btn.solid:hover { background: #fff; transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--cream); }
.btn.ghost:hover { background: rgba(255,255,255,0.12); }
.btn.green { background: var(--green-600); color: var(--cream); border-color: var(--green-700); }
.btn.green:hover { background: var(--green-700); }

/* Course reviews — "What players are saying" (config/reviews), on the dark
   #course band: white cards, gold stars, top 3 with expand-to-all. */
.reviews { max-width: 1000px; margin: 34px auto 0; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
@media (max-width: 860px) { .review-grid { grid-template-columns: 1fr; } }
.review-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin: 0;
  display: flex; flex-direction: column; gap: 10px; text-align: left; }
.review-card.rv-extra { display: none; }
.review-grid.show-all .review-card.rv-extra { display: flex; }
.rv-stars { color: var(--gold); font-size: 15px; letter-spacing: 2px; line-height: 1; }
.rv-stars-off { color: var(--line); }
.rv-text { margin: 0; font-family: "Georgia", serif; font-size: 16px; line-height: 1.55; color: var(--green-800); }
.rv-meta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-family: -apple-system, sans-serif; font-size: 13px; color: var(--muted); }
.rv-who { font-weight: 700; color: var(--green-700); }
.rv-dot { opacity: .5; }
.reviews-toggle { margin-top: 20px; background: transparent; border: 1px solid var(--green-600); color: var(--cream);
  border-radius: 999px; padding: 10px 22px; font-family: -apple-system, sans-serif; font-weight: 600; font-size: 14px;
  cursor: pointer; -webkit-appearance: none; appearance: none; }
.reviews-toggle:hover { background: rgba(255,255,255,0.1); }
.reviews-udisc { display: block; margin-top: 12px; font-family: -apple-system, sans-serif; font-size: 13px;
  color: var(--gold); text-decoration: none; }
.reviews-udisc:hover { text-decoration: underline; }

/* Featured video testimonial — poster still + play button that links to the reel. */
.video-review { display: flex; align-items: center; justify-content: center; gap: 26px; max-width: 720px; margin: 26px auto 6px; text-align: left; }
@media (max-width: 640px) { .video-review { flex-direction: column; text-align: center; gap: 16px; } }
.vr-thumb { position: relative; flex: 0 0 auto; width: 200px; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden;
  display: block; box-shadow: 0 10px 30px rgba(0,0,0,.42); }
.vr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vr-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.34)); }
.vr-play { position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); width: 56px; height: 56px;
  border-radius: 50%; background: rgba(200,30,30,.92); box-shadow: 0 2px 12px rgba(0,0,0,.5); transition: transform .15s ease; }
.vr-play::before { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 9px 0 9px 16px; border-color: transparent transparent transparent #fff; }
.vr-thumb:hover .vr-play { transform: translate(-50%, -50%) scale(1.09); }
.vr-body { margin: 0; max-width: 380px; }
.vr-quote { margin: 0; font-family: "Georgia", serif; font-size: 19px; line-height: 1.5; color: var(--cream); }
.vr-cite { margin: 12px 0 0; font-family: -apple-system, sans-serif; font-size: 14px; color: #cfc9b2; }
.vr-cite b { color: #fff; }
.vr-link { color: var(--gold); text-decoration: none; margin-left: 8px; white-space: nowrap; }
.vr-link:hover { text-decoration: underline; }

/* 50-State Challenge — progress toward a player from every US state (cream stats section) */
.states-challenge { max-width: 560px; margin: 22px auto 4px; }
.sc-count { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.sc-n { font-family: "Georgia", serif; font-size: 64px; line-height: 1; color: var(--green-800); }
.sc-of { font-family: -apple-system, sans-serif; font-size: 20px; font-weight: 600; color: var(--muted); }
.sc-bar { height: 12px; border-radius: 999px; background: var(--cream-2); border: 1px solid var(--line); overflow: hidden; margin: 16px 0 12px; }
.sc-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green-600), var(--gold)); transition: width .7s ease; }
.sc-sub { font-family: -apple-system, sans-serif; font-size: 15px; color: var(--ink); line-height: 1.6; margin: 0; }
.sc-sub b { color: var(--green-800); }
.states-map-label { font-family: -apple-system, sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--muted); font-weight: 700; margin: 34px 0 10px; }

/* Button groups: wrap with even spacing (horizontal AND vertical) on narrow
   screens, while following the parent's text-align (centered on mobile panes,
   left on desktop). Uniform button margins + a negative container margin that
   cancels the outer edge so the row still lines up with the text above it. */
.btn-row { margin-left: -6px; margin-right: -6px; margin-bottom: -6px; }
.btn-row > .btn { margin: 6px; }

/* ---- Sections ---- */
.section { max-width: 1080px; margin: 0 auto; padding: 92px 24px; text-align: center; }
.section.tight { padding: 64px 24px; }
.eyebrow-dark { font-family: -apple-system, sans-serif; text-transform: uppercase; letter-spacing: 3px; font-size: 12px; color: var(--gold); margin: 0 0 10px; }
/* Leading tightens as size grows: at 44px the body's default line-height leaves
   a two-line heading floating apart. */
.h2 { font-size: clamp(28px, 4.5vw, 44px); margin: 0 0 8px; font-weight: 400; color: var(--green-800); line-height: 1.12; letter-spacing: -0.012em; }
.lead { color: var(--muted); font-size: 17px; max-width: 640px; line-height: 1.7; margin-left: auto; margin-right: auto; }
/* Secondary lead, for the small print that follows a section's main copy (calendar
   subscribe note, ace-report note). One named step below .lead so those captions stay
   consistent and still move when the type scale changes. */
.lead.lead-sm { font-size: 14px; }
.band { background: var(--green-800); color: var(--cream); }
.band .h2 { color: var(--cream); }
.band .lead { color: #d9d3bd; }
.center { text-align: center; }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
/* Every section below the hero starts at opacity:0 and is revealed by an observer. If that
   never runs the page renders blank, so the reveal is treated as an enhancement: a no-JS
   fallback and a reduced-motion opt-out both force the visible state. A timed failsafe in
   index.html covers the remaining case, a script that loads but stalls. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Standings / records ---- */
.rowlist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; margin-top: 26px; }
@media (max-width: 680px) { .rowlist { grid-template-columns: 1fr; } }
.trow { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(217,211,189,0.22); }
a.trow { text-decoration: none; color: inherit; transition: opacity 0.15s ease; }
a.trow:hover { opacity: 0.72; }
.band .trow { border-color: rgba(217,211,189,0.18); }
.trow .rank { font-family: -apple-system, sans-serif; font-weight: 700; width: 30px; font-size: 16px; color: var(--gold); }
.trow .who { flex: 1; font-family: -apple-system, sans-serif; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow .meta { font-family: -apple-system, sans-serif; font-size: 13px; opacity: 0.7; }
.trow.top .rank { color: #e6c977; }

/* Layout leaderboard cards */
.layouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
@media (max-width: 820px) { .layouts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .layouts { grid-template-columns: 1fr; } }
.lcard {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; color: var(--ink); transition: border-color 0.15s ease, transform 0.15s ease;
}
.lcard:hover { border-color: var(--green-400); transform: translateY(-2px); }
.lc-name { font-family: -apple-system, sans-serif; font-weight: 600; font-size: 16px; color: var(--green-800); }
.lc-badge { font-family: -apple-system, sans-serif; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; padding: 2px 7px; border-radius: 999px; vertical-align: middle; }
.lc-badge.easy { background: #e7efd6; color: #3b6d11; }
.lc-badge.hard { background: #f2e2da; color: #99451f; }
.lc-meta { font-family: -apple-system, sans-serif; font-size: 13px; color: var(--muted); }
.lcard .rec { font-family: -apple-system, sans-serif; font-size: 14px; color: var(--ink); margin-top: 4px; }
.lcard .rec .star { color: var(--gold); }
.lcard .rec.none { color: var(--muted); font-style: italic; }

/* Per-layout leaderboard page rows */
.lb-table { max-width: 640px; margin: 30px auto 0; text-align: left; }
.lb-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; }
.lb-row.top { border-color: var(--green-400); }
.lb-rank { font-family: -apple-system, sans-serif; font-weight: 700; color: var(--gold); width: 26px; flex: 0 0 auto; font-size: 16px; }
.lb-player { flex: 1; min-width: 0; font-family: -apple-system, sans-serif; font-weight: 600; color: var(--green-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-date { font-family: -apple-system, sans-serif; font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.lb-score { font-family: -apple-system, sans-serif; font-weight: 700; color: var(--green-800); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.lb-score em { font-style: normal; font-weight: 500; color: var(--muted); font-size: 13px; }
@media (max-width: 480px) { .lb-date { display: none; } }
.lc-link { font-family: -apple-system, sans-serif; font-size: 13px; font-weight: 600; color: var(--green-600); margin-top: auto; padding-top: 6px; }

.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 30px 0; }
@media (max-width: 620px) { .statgrid { grid-template-columns: repeat(2, 1fr); } }
/* Single-stat variant (UDisc rating only): center one comfortable card. */
.statgrid.one { grid-template-columns: minmax(240px, 320px); justify-content: center; }
@media (max-width: 620px) { .statgrid.one { grid-template-columns: minmax(220px, 320px); } }
.statgrid.one .stat { padding: 28px 8px; }
.statgrid.one .stat .n { font-size: 52px; }
.stat { text-align: center; padding: 20px 8px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.band .stat { background: rgba(255,255,255,0.05); border-color: rgba(217,211,189,0.2); }
.stat .n { font-size: 38px; color: var(--green-700); line-height: 1; }
.band .stat .n { color: #e6c977; }
.stat .l { font-family: -apple-system, sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-top: 8px; }
.band .stat .l { color: #cfc9b2; }
.stat .sub { font-family: -apple-system, sans-serif; font-size: 12px; color: var(--muted); margin-top: 4px; }
.band .stat .sub { color: #b7bfa0; }

/* ---- Hole table ---- */
.holewrap { overflow-x: auto; margin-top: 26px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
table.holes { border-collapse: collapse; width: 100%; font-family: -apple-system, sans-serif; font-size: 14px; min-width: 620px; color: var(--ink); }
table.holes th, table.holes td { padding: 10px 12px; text-align: center; border-bottom: 1px solid var(--line); color: var(--ink); }
table.holes th { background: var(--cream-2); color: var(--green-800); font-weight: 700; }
table.holes td.lbl { text-align: left; font-weight: 600; color: var(--green-700); background: var(--cream-2); position: sticky; left: 0; white-space: nowrap; }
table.holes tr.tee-red td.lbl { color: #a3402d; }
table.holes tr:last-child td { border-bottom: none; }

/* ---- Split feature (Route 88) ---- */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; align-items: stretch; }
@media (max-width: 780px) { .split { grid-template-columns: 1fr; } }
.split .pane { padding: 60px 44px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.split .art { background: #3d4526; position: relative; min-height: 320px; overflow: hidden; }
.split .art .art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.split .art .glow { position: absolute; inset: 0; z-index: 1; background: radial-gradient(70% 70% at 30% 30%, rgba(230,201,119,0.18), rgba(35,43,22,0.35)); animation: pulse 6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ---- Gallery ---- */
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
@media (max-width: 680px) { .gal { grid-template-columns: repeat(2, 1fr); } }
.gal .tile {
  position: relative; aspect-ratio: 3/4; border-radius: 12px; overflow: hidden;
  background: var(--cream-2); border: 1px solid var(--line);
}
.gal .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.gal .tile:hover img { transform: scale(1.06); }
.gal .tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 12px 10px;
  font-family: -apple-system, sans-serif; font-size: 13px; font-weight: 600; color: #fff; text-align: left;
  background: linear-gradient(transparent, rgba(20,25,12,0.82));
}
.gal .tile.tall { grid-row: span 1; }
.gal-feature { aspect-ratio: 16/9; }

/* ---- Photo carousel ---- */
.carousel { position: relative; margin-top: 26px; border-radius: 14px; overflow: hidden; background: #232b16; }
/* No transition here: the track's transform is driven frame by frame from JS so
   it can be grabbed mid-slide. A CSS transition on the same property would fight
   every one of those writes. */
.car-track { display: flex; }
.car-slide { position: relative; flex: 0 0 100%; margin: 0; }
.car-slide img { width: 100%; height: clamp(280px, 56vw, 560px); object-fit: cover; display: block; }
.car-slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px;
  font-family: -apple-system, sans-serif; font-size: 14px; font-weight: 600; color: #fff;
  background: linear-gradient(transparent, rgba(20,25,12,0.8));
}
.car-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(245,242,230,0.9); color: var(--green-800); font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s ease;
}
.car-btn:hover { background: #fff; }
.car-btn.prev { left: 14px; }
.car-btn.next { right: 14px; }
.car-dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2; display: flex; gap: 7px; justify-content: center; }
.car-dot { width: 8px; height: 8px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,0.45); padding: 0; }
.car-dot.on { background: #fff; }

/* ---- Hole strip ---- */
.holestrip { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; margin-top: 16px; }
@media (max-width: 720px) { .holestrip { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 420px) { .holestrip { grid-template-columns: repeat(3, 1fr); } }
.hchip {
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none;
  padding: 12px 6px; border-radius: 10px; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(217,211,189,0.2); transition: background 0.15s ease, transform 0.15s ease;
}
.hchip:hover { background: rgba(255,255,255,0.14); transform: translateY(-2px); }
.hchip-n { font-family: -apple-system, sans-serif; font-size: 20px; font-weight: 700; color: #e6c977; }
.hchip-p { font-family: -apple-system, sans-serif; font-size: 11px; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.hp-b { color: #8fb4e6; }
.hp-r { color: #e69a8f; }

/* Native buttons styled as .btn (menu trigger) */
button.btn { appearance: none; -webkit-appearance: none; font: inherit; }

/* Route 88 menu modal */
.menu-modal[hidden] { display: none; }
.menu-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.menu-backdrop { position: absolute; inset: 0; background: rgba(20,25,12,0.72); }
.menu-dialog { position: relative; z-index: 1; background: var(--white); border-radius: 16px; max-width: 460px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,0.45); }
.menu-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255,255,255,0.92); color: var(--green-800); font-size: 15px; cursor: pointer; box-shadow: 0 1px 6px rgba(0,0,0,0.2); }
.menu-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.menu-scroll img { width: 100%; display: block; }
.menu-pdf { margin: 12px; justify-content: center; }

/* ---- Hole page ---- */
.hole-hero { position: relative; min-height: 64vh; display: flex; align-items: flex-end; overflow: hidden; background: #232b16; }
.hole-hero .hole-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 24s ease-in-out infinite alternate; }
.hole-hero .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,37,18,0.32) 0%, rgba(30,37,18,0.5) 55%, rgba(30,37,18,0.9) 100%); }
.hole-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px 44px; color: var(--cream); text-align: center; }
.hole-hero .eyebrow { font-family: -apple-system, sans-serif; text-transform: uppercase; letter-spacing: 3px; font-size: 12px; color: #d9d3bd; margin: 0 0 6px; }
.hole-hero h1 { font-size: clamp(44px, 10vw, 92px); margin: 0; font-weight: 400; line-height: 1; letter-spacing: -0.02em; }
.hole-hero .sub { font-family: -apple-system, sans-serif; font-size: clamp(15px, 2.2vw, 19px); color: #e7e2cf; margin: 12px 0 0; }

.tee-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
@media (max-width: 520px) { .tee-cards { grid-template-columns: 1fr; } }
.tee-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.tee-card.blue { border-top: 3px solid #3f6fb0; }
.tee-card.red { border-top: 3px solid #b0453f; }
.tee-card .t { font-family: -apple-system, sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin: 0 0 8px; }
.tee-card .big { font-size: 34px; color: var(--green-800); }
.tee-card .big span { font-size: 15px; color: var(--muted); }
/* Scoring block (per-hole UDisc averages) */
.hole-scoring { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 12px; padding: 20px 22px; margin-top: 18px; }
.hole-scoring .hs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.hole-scoring .t { font-family: -apple-system, sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin: 0; }
.hs-src { font-family: -apple-system, sans-serif; font-size: 11px; letter-spacing: 0.5px; color: var(--gold); }
.hs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hs-stat { text-align: center; }
.hs-n { font-size: 30px; color: var(--green-800); line-height: 1.1; }
.hs-l { font-family: -apple-system, sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-top: 4px; }
.hs-diff { height: 8px; border-radius: 999px; background: var(--cream-2); margin: 18px 0 12px; overflow: hidden; }
.hs-bar { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green-400), var(--gold)); transition: width 0.5s ease; }
.hs-note { font-size: 15px; color: var(--ink); margin: 0; }
@media (max-width: 520px) { .hs-n { font-size: 25px; } }

/* Two-basket layout (Blue → Blue and Red → Red) */
.hs-baskets { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .hs-baskets { grid-template-columns: 1fr; } }
.hs-basket { background: var(--cream-2); border-radius: 10px; padding: 16px 16px 14px; border-top: 3px solid var(--line); }
.hs-basket.blue { border-top-color: #3f6fb0; }
.hs-basket.red { border-top-color: #b0453f; }
.hs-b-head { font-family: -apple-system, sans-serif; font-size: 13px; font-weight: 600; color: var(--green-800); margin-bottom: 12px; }
.hs-basket .hs-n { font-size: 26px; }
.hs-basket .hs-diff { margin: 16px 0 10px; }
.hs-basket .hs-note { font-size: 13px; line-height: 1.5; margin-top: 12px; }
.hs-basket .hs-note.muted { color: var(--muted); }
@media (max-width: 520px) { .hs-basket .hs-n { font-size: 24px; } }

/* Metric rows inside a basket panel: Difficulty / Course rank / Average score */
.hs-metric { margin-top: 15px; }
.hs-metric:first-of-type { margin-top: 2px; }
.hs-ml { font-family: -apple-system, sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.hs-mv { font-size: 22px; color: var(--green-800); line-height: 1.25; margin-top: 3px; }
.hs-mv.muted { color: var(--muted); }
.hs-of { font-size: 14px; color: var(--muted); }
.hs-topar { font-size: 16px; color: var(--muted); }
.hs-sub { font-family: -apple-system, sans-serif; font-size: 12px; color: var(--muted); margin-top: 3px; }
.stars { letter-spacing: 2px; font-size: 15px; white-space: nowrap; }
.stars .on { color: var(--gold); }
.stars .off { color: var(--line); }

/* Hole fly-through video */
.hole-flythrough { margin-top: 26px; }
.flythrough-wrap { border-radius: 14px; overflow: hidden; background: #232b16; box-shadow: 0 10px 30px rgba(30,37,18,0.18); }
.flythrough-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #232b16; }

/* Per-hole photo carousel */
.hole-gallery { margin-top: 22px; }
.hg-title { font-family: -apple-system, sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin: 0 0 12px; }
.hole-gallery .carousel { margin-top: 0; }

.hole-notes { background: var(--cream-2); border-radius: 12px; padding: 16px 18px; margin-top: 18px; font-size: 16px; color: var(--ink); }
.hole-notes b { font-family: -apple-system, sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 4px; }
.hole-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 30px; gap: 12px; }
.hole-picker { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 30px 0 0; }
.hole-picker a {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: -apple-system, sans-serif; font-weight: 600; text-decoration: none;
  color: var(--green-700); border: 1px solid var(--line);
}
.hole-picker a.cur { background: var(--green-600); color: var(--cream); border-color: var(--green-600); }
.hole-picker a:hover { border-color: var(--green-400); }

/* ---- Footer ---- */
.foot { background: var(--green-900); color: #cfc9b2; }
/* Centered footer: the three columns sit as a centered group and everything
   inside them is center-aligned (brand, blurb, and link lists). */
.foot .inner { max-width: 1180px; margin: 0 auto; padding: 56px 24px; display: grid; grid-template-columns: repeat(3, auto); justify-content: center; column-gap: 80px; row-gap: 32px; align-items: start; text-align: center; }
@media (max-width: 680px) {
  .foot .inner { grid-template-columns: 1fr; }
}
/* Desktop only: place the brand block in the MIDDLE column (Play · brand ·
   Oglebay). DOM order stays brand-first so mobile stacks brand on top; `order`
   just changes the visual columns here. Scoped above the 680px breakpoint so it
   never applies to the single-column mobile layout. */
@media (min-width: 681px) {
  .foot .inner .foot-play { order: 1; }
  .foot .inner .foot-brand { order: 2; }
  .foot .inner .foot-oglebay { order: 3; }
}
.foot h4 { font-family: -apple-system, sans-serif; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #8f9377; margin: 0 0 14px; }
.foot a { display: block; color: #e7e2cf; text-decoration: none; font-family: -apple-system, sans-serif; font-size: 14px; padding: 5px 0; }
.foot a:hover { color: #fff; }
.foot p { margin-left: auto; margin-right: auto; }
.foot .brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; }
.foot .brand img { width: 52px; height: 52px; }
.foot .fineprint { border-top: 1px solid rgba(255,255,255,0.08); text-align: center; font-family: -apple-system, sans-serif; font-size: 12px; color: #7f8368; padding: 18px; }

/* Holder avatars in the standings list */
.trow .avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
  background: var(--green-400); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: -apple-system, sans-serif; font-size: 12px; font-weight: 600;
}
.trow .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hall of aces (hole-in-ones) */
/* Flex rather than a fixed 2-column grid so a lone ace sits centred instead of
   stranded in the left column; two or more still lay out side by side. */
.aces { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }
.aces .ace-card { flex: 1 1 400px; max-width: 560px; }
@media (max-width: 720px) { .aces .ace-card { flex-basis: 100%; } }
/* Every proof photo on the report, not just the first. */
.ace-proofs { display: flex; gap: 8px; flex: 0 0 auto; }
.ace-proof-link { display: block; line-height: 0; cursor: zoom-in; }
.ace-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 18px;
}
.ace-num { text-align: center; flex: 0 0 auto; min-width: 42px; }
.ace-num span { display: block; font-family: -apple-system, sans-serif; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.ace-num b { font-size: 30px; color: var(--green-700); line-height: 1; }
.ace-info { flex: 1; min-width: 0; }
.ace-name { font-family: -apple-system, sans-serif; font-weight: 600; font-size: 17px; color: var(--green-800); }
.ace-meta { font-family: -apple-system, sans-serif; font-size: 13px; color: var(--muted); margin-top: 2px; }
.ace-tag {
  font-family: -apple-system, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 1px;
  color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 4px 10px; flex: 0 0 auto;
}
.ace-empty {
  grid-column: 1 / -1; background: var(--white); border: 1px dashed var(--line);
  border-radius: 12px; padding: 30px 24px; text-align: center; color: var(--muted); font-size: 16px;
}

/* Proof photo on a homepage ace card */
.ace-card .ace-proof { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; border: 1px solid var(--line); }

/* By-the-numbers: lifetime stats + tourism travel bars */
.statgrid.four .stat .n { font-size: 30px; }
@media (max-width: 620px) { .statgrid.four .stat .n { font-size: 26px; } }
.travel { max-width: 560px; margin: 44px auto 0; text-align: left; }
/* Tighten the gap between "By the Numbers" (ends on the travel bars) and the
   gallery — the two stacked section paddings left too much dead space. */
#stats { padding-bottom: 32px; }
#gallery { padding-top: 40px; }
.travel-title { font-family: -apple-system, sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin: 0 0 16px; text-align: center; }
.tbar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tbar-label { font-family: -apple-system, sans-serif; font-size: 13px; color: var(--green-800); width: 78px; flex: 0 0 auto; text-align: right; }
.tbar-track { flex: 1; height: 22px; background: var(--cream-2); border-radius: 6px; overflow: hidden; }
.tbar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--green-400), var(--green-600)); border-radius: 6px; transition: width 0.6s ease; }
.tbar-val { font-family: -apple-system, sans-serif; font-size: 13px; font-weight: 700; color: var(--green-800); width: 26px; flex: 0 0 auto; }

/* By the Numbers — larger heading + tourism states map */
.stats-title { font-size: clamp(38px, 6.5vw, 66px); }
.stats-sub { font-family: "Georgia", "Times New Roman", serif; font-weight: 400; font-size: 24px; color: var(--green-800); margin: 0 0 4px; }
.us-map-wrap { position: relative; max-width: 680px; margin: 22px auto 0; }
.us-map { width: 100%; height: auto; display: block; }
.us-map path { transition: fill 0.2s ease; }
.us-tip {
  position: absolute; z-index: 5; transform: translateX(-50%);
  background: var(--green-800); color: var(--cream); font-family: -apple-system, sans-serif;
  font-size: 12px; padding: 5px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.states-rank { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 20px auto 0; max-width: 560px; }
.state-pill { font-family: -apple-system, sans-serif; font-size: 13px; color: var(--muted); background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; }
.state-pill b { color: var(--green-800); font-weight: 600; }

/* Growth story — Impact Report new players + rankings, month over month */
.growth { max-width: 760px; margin: 26px auto 0; }
.growth-controls { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.gc { font-family: -apple-system, sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; text-align: left; }
.gc.off { opacity: 0.55; }
.gc select {
  font-family: -apple-system, sans-serif; font-size: 15px; text-transform: none; letter-spacing: 0;
  color: var(--green-800); background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 14px; min-width: 158px; cursor: pointer;
}
.gc select:disabled { cursor: default; }

.growth-hero { text-align: center; margin-bottom: 34px; }
.gh-num { font-family: "Georgia", "Times New Roman", serif; font-size: clamp(66px, 13vw, 128px); line-height: 0.9; color: var(--green-700); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.gh-cap { font-family: -apple-system, sans-serif; font-size: 17px; color: var(--muted); max-width: 460px; margin: 14px auto 0; line-height: 1.55; }
.gh-cmp { font-family: -apple-system, sans-serif; font-size: 13px; color: var(--gold); margin-top: 10px; letter-spacing: 0.5px; }

/* Course rank cards (Impact Report rankings) */
.rank-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 auto; max-width: 720px; }
@media (max-width: 620px) { .rank-cards { grid-template-columns: 1fr; } }
.rank-card { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 12px; padding: 20px 12px; }
.rank-n { font-size: clamp(30px, 5vw, 44px); color: var(--green-700); line-height: 1; }
.rank-l { font-family: -apple-system, sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-top: 8px; }
.delta { display: inline-block; margin-top: 12px; font-family: -apple-system, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; padding: 3px 10px; border-radius: 999px; }
.delta.up { color: #2f6b34; background: #e5f0e0; }
.delta.down { color: #9a3b2f; background: #f2e2df; }
.delta.flat { color: var(--muted); background: var(--cream-2); }
.rank-note { color: var(--muted); font-size: 15px; margin: 20px auto 0; max-width: 580px; }

/* Upcoming events (config/events, synced from UDisc) — accordion */
.events-list { max-width: 680px; margin: 26px auto 0; display: grid; gap: 10px; }
/* No gold left-tab here. It was decoration rather than a signal — the tee-colour
   bands on the hole pages earn their weight because blue and red match the signs
   on the course; a stripe that means nothing just competes with the date badge,
   which is what actually tells the rows apart. */
.ev-item { background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ev-head { display: flex; align-items: center; gap: 18px; width: 100%; text-align: left; background: none; border: 0; padding: 16px 20px; cursor: pointer; font: inherit; color: inherit; transition: background 0.15s ease; }
.ev-head:hover { background: var(--cream-2); }
.ev-head:focus-visible { outline: 2px solid var(--green-400); outline-offset: -2px; }
.ev-date { flex: 0 0 auto; width: 56px; text-align: center; line-height: 1; }
.ev-date-tba { display: flex; align-items: center; justify-content: center; }
.ev-mon { display: block; font-family: -apple-system, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--gold); }
.ev-day { display: block; font-size: 30px; color: var(--green-800); margin: 2px 0; }
.ev-wd { display: block; font-family: -apple-system, sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.ev-head-main { flex: 1; min-width: 0; }
.ev-name { font-family: "Georgia", "Times New Roman", serif; font-size: 19px; color: var(--green-800); }
.ev-meta { font-family: -apple-system, sans-serif; font-size: 13px; color: var(--muted); margin-top: 3px; }
.ev-chev { flex: 0 0 auto; font-size: 14px; color: var(--muted); transition: transform 0.25s ease; }
.ev-item.open .ev-chev { transform: rotate(180deg); }
/* Panel animates open via grid-template-rows (0fr → 1fr) so no fixed height is needed */
.ev-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
.ev-item.open .ev-panel { grid-template-rows: 1fr; }
.ev-panel-inner { overflow: hidden; min-height: 0; }
/* The single row expands to a list of compact per-event sub-rows */
.ev-sublist { padding: 2px 20px 12px; }
.ev-sub { padding: 12px 0; border-top: 1px solid var(--line); }
.ev-sub-when { font-family: -apple-system, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--gold); }
.ev-sub-name { font-family: "Georgia", "Times New Roman", serif; font-size: 17px; color: var(--green-800); margin-top: 2px; }
.ev-sub-range { font-family: -apple-system, sans-serif; font-size: 13px; color: var(--muted); margin-top: 3px; }
.ev-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ev-sublist .ev-actions { margin-top: 8px; }
.ev-cal { font-family: -apple-system, sans-serif; font-size: 13px; font-weight: 600; color: var(--green-700); background: var(--cream-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.ev-cal:hover { background: var(--white); border-color: var(--green-400); }
.ev-link { font-family: -apple-system, sans-serif; font-size: 13px; font-weight: 600; color: var(--green-600); text-decoration: none; white-space: nowrap; }
.ev-link:hover { color: var(--green-800); }
@media (prefers-reduced-motion: reduce) { .ev-panel, .ev-chev { transition: none; } }
@media (max-width: 520px) { .ev-head { gap: 14px; padding: 14px 16px; } .ev-sublist { padding: 2px 16px 12px; } }

/* Bag tag product photo */
.bagtag-photo { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto 30px; border-radius: 16px; }

/* Report-your-ace CTA box — the box stays a light card even when the Aces
   section sits on a green band, so keep its inner copy dark. */
.ace-report-box { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; max-width: 560px; margin: 30px auto 0; }
.band .ace-report-box .lead { color: var(--muted); }

/* Pro shop — Innova authorized-dealer badge + custom disc, framed side by side */
.innova-card { display: inline-block; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 22px 28px; margin: 28px auto 0; }
.innova-badge { display: block; width: 100%; max-width: 300px; height: auto; }
.proshop-cards { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; align-items: stretch; margin-top: 28px; }
.proshop-cards .innova-card { margin: 0; display: flex; flex-direction: column; justify-content: center; }
.proshop-disc { text-align: center; }
.proshop-disc img { display: block; width: 100%; max-width: 240px; height: auto; border-radius: 10px; margin: 0 auto; }
.proshop-disc figcaption { margin: 14px auto 0; max-width: 260px; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* Learn page — Innova discs for sale at the range */
.range-discs { margin: 26px auto 0; max-width: 640px; }
.range-discs img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(43,51,26,0.12); }

/* Events empty state */
.ev-empty { background: var(--white); border: 1px dashed var(--line); border-radius: 14px; padding: 28px 24px; color: var(--muted); font-size: 16px; max-width: 560px; margin: 0 auto; line-height: 1.6; }

/* "Call to Order" (Route 88) is phone-only — hidden on desktop. On mobile, all
   four Route 88 buttons stack full-width and uniform instead of wrapping as a
   ragged mix of sizes. */
.call-order { display: none; }
@media (max-width: 680px) {
  .call-order { display: inline-flex; }
  #visit .btn-row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 0; }
  #visit .btn-row > .btn { width: 100%; margin: 0; justify-content: center; }
}

/* ---- Touch targets --------------------------------------------------------
   A finger needs roughly 44px of hittable area, and several controls here draw
   far smaller than that: the carousel dots are 8px, the mobile menu button 37px.
   Where growing the box would move the layout, the target is enlarged with an
   invisible overlay instead, so hit area increases and nothing shifts visually. */
.car-dot { position: relative; }
.car-dot::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  /* 15px is the dot pitch (8px dot + 7px gap), so neighbouring targets meet edge
     to edge and never overlap onto each other. */
  width: 15px; height: 44px;
}
@media (pointer: coarse) {
  .nav-toggle { min-width: 44px; min-height: 44px; justify-content: center; }
  .nav .mark { min-height: 44px; }
  /* 14px each side clears 44px around the 16px line box; 12px lands at 40. */
  .foot a { padding: 14px 0; }
  .ev-cal, .reviews-toggle, .gc select { min-height: 44px; }
  .reviews-udisc { padding: 12px 0; }
  /* Inline links sit inside running text, so they cannot grow their own box
     without opening gaps in the paragraph. They get an overlay too. */
  .ev-link, .vr-link { position: relative; }
  .ev-link::after, .vr-link::after { content: ""; position: absolute; inset: -13px -8px; }
}

/* Discreet way in to the admin tools. It is safe in plain sight: the page itself
   shows a "denied" panel to non-admins, and the Firestore rules reject their
   writes regardless, so nothing here depends on the link being hidden. */
.foot .fineprint .admin-link { text-decoration: underline; text-underline-offset: 2px; opacity: 0.8; }
.foot .fineprint .admin-link:hover { opacity: 1; }

/* Image lightbox — shared by the flight chart, inline learn images, and the
   ace proof photos on the homepage. Moved here from learn.css so pages that
   load only home.css can use it too. */
/* Chart-image lightbox (popup) — opens the full-size flight chart in place. */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(10,12,6,.93); display: none; }
.lightbox.open { display: flex; flex-direction: column; }
.lightbox-stage { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; display: flex; padding: 16px; }
.lightbox-img { margin: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5); cursor: zoom-in; }
.lightbox-img.zoomed { max-width: none; max-height: none; width: auto; height: auto; cursor: zoom-out; }
.lightbox-close { position: absolute; top: 12px; right: 14px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.16); color: #fff; font-size: 26px; line-height: 44px; text-align: center;
  cursor: pointer; -webkit-appearance: none; appearance: none; }
.lightbox-close:hover { background: rgba(255,255,255,.3); }
.lightbox-hint { text-align: center; color: rgba(255,255,255,.72); font-family: -apple-system, sans-serif;
  font-size: 13px; margin: 0; padding: 6px 16px 14px; }
.chart-fig a { cursor: zoom-in; }

/* Inline text link that opens an image in the lightbox (e.g. "right-handed backhand throw"). */
.imglink { color: #e6c977; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; cursor: zoom-in; }
.imglink:hover { color: #f0d98e; }

/* ---- Hall of Aces ---------------------------------------------------------
   A clubhouse hole-in-one board, built from type rather than from wood grain and
   brass: the format is what reads as "engraved plate" (letterspaced caps, a
   hairline rule, tight plate proportions), so it can live in the site's own
   greens and creams instead of costuming as mahogany. */
.hoa { background: var(--green-900); color: var(--cream); min-height: 100vh; padding: 120px 20px 0; }
.hoa-head { text-align: center; max-width: 720px; margin: 0 auto 34px; }
.hoa-eyebrow {
  font-family: -apple-system, sans-serif; font-size: 11px; letter-spacing: 4px;
  text-transform: uppercase; color: var(--gold); margin: 0 0 14px;
}
.hoa-head h1 {
  font-size: clamp(34px, 6vw, 60px); font-weight: 400; margin: 0;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.1;
}
.hoa-sub {
  font-family: -apple-system, sans-serif; font-size: 15px; line-height: 1.6;
  color: #cfc9b2; margin: 16px auto 0; max-width: 520px;
}

.hoa-wall {
  max-width: 1060px; margin: 0 auto; padding: 30px 22px 34px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(245, 242, 230, 0.14);
  border-radius: 6px;
}
.hoa-plates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hoa-loading { grid-column: 1 / -1; text-align: center; color: #cfc9b2; font-family: -apple-system, sans-serif; font-size: 14px; }

.plate {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  min-height: 74px; padding: 12px 14px; text-align: center; text-decoration: none;
  background: linear-gradient(180deg, #39421f 0%, #2f3819 100%);
  border: 1px solid rgba(230, 201, 119, 0.42);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(245, 242, 230, 0.09), 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.plate:hover { border-color: rgba(230, 201, 119, 0.95); transform: translateY(-1px); }
.plate:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.plate-name {
  font-family: -apple-system, sans-serif; font-size: 12.5px; font-weight: 700;
  letter-spacing: 1.1px; text-transform: uppercase; color: #f2ead2; line-height: 1.25;
}
.plate-meta {
  font-family: -apple-system, sans-serif; font-size: 10px; letter-spacing: 1.1px;
  color: #b3ab8c; line-height: 1.3;
}
/* Empty slots: the board reads as one waiting to be filled rather than as a
   short list. Deliberately quiet — they must never compete with a real name. */
.plate-blank {
  background: rgba(0, 0, 0, 0.10);
  border: 1px dashed rgba(245, 242, 230, 0.07);
  box-shadow: none;
}
.plate-blank:hover { transform: none; border-color: rgba(245, 242, 230, 0.12); }

.hoa-cta { max-width: 620px; margin: 0 auto; padding: 46px 20px 70px; text-align: center; }
.hoa-cta h2 { font-size: clamp(24px, 4vw, 34px); font-weight: 400; margin: 0 0 12px; }
.hoa-cta p { font-family: -apple-system, sans-serif; font-size: 15px; line-height: 1.65; color: #cfc9b2; margin: 0 0 22px; }

@media (max-width: 900px) { .hoa-plates { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) {
  .hoa { padding-top: 96px; }
  .hoa-plates { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hoa-wall { padding: 18px 14px 22px; }
}

/* ---- One ace's plaque (/a/<id>) -------------------------------------------
   A framed piece rather than a stack of photos: outer frame, a gold fillet line,
   then the mat. The first photo leads at full width and anything else sits in a
   supporting column, so the page has a hierarchy instead of three equal tiles. */
.acepage { background: var(--green-900); color: var(--cream); min-height: 100vh; padding: 104px 20px 64px; }
.ace-back {
  display: block; max-width: 900px; margin: 0 auto 18px;
  font-family: -apple-system, sans-serif; font-size: 13px; letter-spacing: .4px;
  color: #b3ab8c; text-decoration: none;
}
.ace-back:hover { color: var(--cream); }

.shadowbox {
  max-width: 900px; margin: 0 auto; padding: 10px;
  background: linear-gradient(180deg, #1a1e10 0%, #101408 100%);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(245,242,230,.06);
}
/* The thin bright line a real frame carries between moulding and mat. */
.sb-mat {
  background: #313d1c;
  border: 1px solid rgba(230, 201, 119, .35);
  padding: 30px;
  display: grid; gap: 26px;
}
.sb-gallery { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; align-items: start; }
.sb-gallery-solo { grid-template-columns: 1fr; }
.sb-thumbs { display: grid; gap: 14px; }

/* Photos are matted individually, the way pieces in a shadowbox are. */
.sb-hero, .sb-thumb {
  display: block; position: relative; line-height: 0; cursor: zoom-in; text-decoration: none;
  background: #0d1006; padding: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
/* Never crop a proof photo: a scorecard loses its rows and a basket shot loses
   the disc. The image is shown whole and letterboxed against the mat — which is
   what a real mat does anyway — with a max-height so one tall portrait cannot
   run away with the layout. */
.sb-hero img { width: 100%; height: auto; max-height: 540px; object-fit: contain; display: block; background: #0d1006; }
.sb-thumb img { width: 100%; height: auto; max-height: 250px; object-fit: contain; display: block; background: #0d1006; }
.shot-cap {
  display: block; padding: 8px 2px 2px;
  font-family: -apple-system, sans-serif; font-size: 9.5px; letter-spacing: 1.6px;
  text-transform: uppercase; color: #b3ab8c; line-height: 1.4; text-align: center;
}

/* The engraved plate. Crest, then the name, then the facts, in that order —
   the same reading order a real plaque uses. */
.sb-plate {
  background: linear-gradient(180deg, #171b0d 0%, #0f1207 100%);
  border: 1px solid rgba(230,201,119,.55);
  padding: 26px 24px 24px; text-align: center;
  box-shadow: inset 0 1px 0 rgba(245,242,230,.07);
}
.sb-plate-crest { width: 54px; height: 54px; margin: 0 auto 14px; opacity: .92; }
.sb-plate-kicker {
  font-family: -apple-system, sans-serif; font-size: 10px; letter-spacing: 5px;
  text-transform: uppercase; color: var(--gold); margin: 0 0 10px;
}
.sb-plate-name {
  font-size: clamp(28px, 5vw, 42px); font-weight: 400; margin: 0;
  color: #f7f4e8; letter-spacing: -0.005em; line-height: 1.12;
}
.sb-plate-rule { width: 54px; height: 1px; background: rgba(230,201,119,.55); margin: 16px auto; }
.sb-plate-lines {
  font-family: -apple-system, sans-serif; font-size: 13.5px; line-height: 1.9;
  color: #d5cfb6; margin: 0; display: flex; flex-direction: column;
}
.sb-plate-date {
  font-family: -apple-system, sans-serif; font-size: 10.5px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--gold); margin: 18px 0 0;
}

.ace-actions { max-width: 900px; margin: 26px auto 0; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ace-missing { max-width: 560px; margin: 0 auto; text-align: center; }
.ace-missing h1 { font-size: 30px; font-weight: 400; margin: 0 0 10px; }
.ace-missing p { font-family: -apple-system, sans-serif; color: #cfc9b2; margin: 0 0 22px; }

@media (max-width: 720px) {
  .acepage { padding-top: 92px; }
  .shadowbox { padding: 7px; }
  .sb-mat { padding: 16px; gap: 18px; }
  /* One column on a phone: the hero keeps its prominence and the extras become a
     row of small prints beneath it rather than a tall stack. */
  .sb-gallery { grid-template-columns: 1fr; gap: 12px; }
  .sb-thumbs { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; }
  .sb-hero img { max-height: 330px; }
  .sb-thumb img { max-height: 150px; }
  .sb-plate { padding: 22px 16px; }
  .sb-plate-crest { width: 46px; height: 46px; }
}

/* Course crest at the head of the wall, in place of a text eyebrow. */
.hoa-crest { width: 82px; height: 82px; margin: 0 auto 18px; opacity: .95; }
@media (max-width: 620px) { .hoa-crest { width: 66px; height: 66px; margin-bottom: 14px; } }

/* Homepage teaser for the Hall of Aces — a count and the way through, nothing
   more. The plate treatment lives on /aces, where it has room to be the subject. */
.ace-teaser { margin: 26px auto 0; text-align: center; }
.ace-teaser-count {
  font-family: -apple-system, sans-serif; font-size: 13px; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--gold); margin: 0;
}

/* Generated scorecard on the plaque — the player's own row, drawn from the
   imported league round rather than cropped out of a screenshot of everyone. */
.sb-scorecard {
  background: linear-gradient(180deg, #171b0d 0%, #0f1207 100%);
  border: 1px solid rgba(230,201,119,.35); padding: 18px 16px 14px; text-align: center;
}
.sc-head {
  font-family: -apple-system, sans-serif; font-size: 10px; letter-spacing: 3.4px;
  text-transform: uppercase; color: var(--gold); margin: 0 0 14px;
}
.sc-table { width: 100%; border-collapse: collapse; margin: 0 auto; }
.sc-lbl {
  font-family: -apple-system, sans-serif; font-size: 9.5px; letter-spacing: 1.4px;
  text-transform: uppercase; color: #8f8b73; text-align: left; font-weight: 400; padding-right: 8px;
}
.sc-dim { font-family: -apple-system, sans-serif; font-size: 12px; color: #93907a; text-align: center; padding: 5px 0; }
.sc-score {
  font-family: -apple-system, sans-serif; font-size: 13.5px; color: #d5cfb6;
  text-align: center; padding: 6px 0;
}
.sc-under { color: #f2ead2; font-weight: 600; }
/* An ace is a 1, so it needs no separate flag — it marks itself. */
.sc-ace { background: var(--gold); color: #1b2010; font-weight: 700; border-radius: 3px; }
.sc-loop {
  font-family: -apple-system, sans-serif; font-size: 9px; letter-spacing: 1.8px;
  text-transform: uppercase; color: #6f6c59; margin: 4px 0 14px;
}
.sc-foot {
  font-family: -apple-system, sans-serif; font-size: 9.5px; letter-spacing: 2px;
  text-transform: uppercase; color: #8f8b73; margin: 8px 0 0;
}
@media (max-width: 620px) {
  .sb-scorecard { padding: 14px 10px 10px; }
  .sc-score { font-size: 12px; }
  .sc-dim { font-size: 10.5px; }
}

/* ---- Press feedback -------------------------------------------------------
   Everything above this point reacts to :hover, which does not exist on a phone
   — and a phone at the course is where most of this site gets read. Pressed
   state is the touch equivalent, and it has to land on finger-down rather than
   on the result: a control that only responds once a page has navigated reads as
   broken, however fast the navigation is.

   Press is fast in and gentle out. The short duration here applies only while
   held; on release each element falls back to its own transition above, so the
   control springs down instantly and eases back. The native tap highlight is
   suppressed because a designed press replaces it — never remove one without
   the other. */
* { -webkit-tap-highlight-color: transparent; }

.btn:active,
.reviews-toggle:active,
.ev-cal:active,
.lcard:active,
.plate:active,
.menu-close:active,
.hchip:active {
  transform: scale(0.965);
  transition-duration: 60ms;
}
/* Elements that already carry a transform have to compose the press into it,
   or pressing would knock them out of position. */
.car-btn:active { transform: translateY(-50%) scale(0.9); background: #fff; transition-duration: 60ms; }
.lightbox-close:active { transform: scale(0.9); background: rgba(255,255,255,.34); transition-duration: 60ms; }
.vr-thumb:active .vr-play { transform: translate(-50%, -50%) scale(0.9); transition-duration: 60ms; }

/* Photos and rows: pressing a whole card should read as pressing paper, not as
   a button popping. A small scale plus a dim is enough. */
.gal .tile:active img,
.vr-thumb:active,
.sb-hero:active,
.sb-thumb:active { transform: scale(0.99); transition-duration: 80ms; }
/* Deliberately no press state on a carousel slide: it is dragged, and content
   under a finger has to track it exactly. Shrinking it mid-drag would break the
   one thing the gesture depends on. */

/* Text links and rows have no box to squash, so they dim instead. */
a.trow:active,
.foot a:active,
.ev-link:active,
.vr-link:active,
.reviews-udisc:active,
.imglink:active,
.ace-back:active,
.nav .link:active,
.nav .mark:active { opacity: 0.55; transition-duration: 60ms; }

.ev-head:active { background: var(--cream-2); transition-duration: 60ms; }
.car-dot:active { background: #fff; transform: scale(1.35); }
.nav-toggle:active { opacity: 0.55; }
.plate-blank:active { transform: none; }
.car-btn:disabled { opacity: 0.32; cursor: default; }
.car-btn:disabled:active { transform: translateY(-50%); background: rgba(245,242,230,0.9); }

/* ---- Carousel gestures ----------------------------------------------------
   The track is dragged in JS, so it must not also carry a CSS transition — the
   two would fight over the same transform. pan-y keeps vertical page scrolling
   with the browser while the horizontal axis belongs to the carousel. */
.car-track { touch-action: pan-y; will-change: transform; }
.car-slide img { -webkit-user-drag: none; user-select: none; }

/* ---- Lightbox presentation ------------------------------------------------
   The old version went from display:none to display:flex, which slammed the
   screen to near-black in a single frame. It now fades, while the photo itself
   flies out of the thumbnail that was tapped (see js/lightbox.js). */
.lightbox { opacity: 0; transition: opacity 0.22s ease; }
.lightbox.shown { opacity: 1; }
.lightbox-img { will-change: transform; }
/* At fit size the image belongs to the dismiss gesture; zoomed, it belongs to
   the stage's own panning. */
.lightbox-img:not(.zoomed) { touch-action: none; -webkit-user-drag: none; }

/* ---- Reduced motion -------------------------------------------------------
   Not "no feedback" — the presses above stay, because a 3% squash under a finger
   is direct manipulation rather than something the interface does at you. What
   goes is the motion that moves on its own: the full-viewport hero pan, the
   looping glow, the bobbing cue, and page-length smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .hero-bg,
  .hole-hero .hole-bg { animation: none; }
  .hero-inner { animation: none; }
  .hero .scrollcue { animation: none; }
  .split .art .glow { animation: none; opacity: 0.72; }
  .car-track { transition: none; }
  .gal .tile img { transition: transform 0.2s ease; }
  .lightbox { transition: opacity 0.15s ease; }
}

/* ---- Accessible gold ------------------------------------------------------
   --gold #b08d3d is a good ink on paper and a poor one on a screen: measured, it
   reaches only 2.60:1 on --cream-2, 2.79:1 on --cream and 3.09:1 on --white,
   against the 4.5:1 AA needs. Two of those fail even the relaxed large-text bar.
   It carries most of this site's wayfinding, on pages read outdoors in sunlight.

   So the accent splits by job rather than being abandoned: --gold keeps every
   decorative fill, border, bar and rule exactly as it was, and text gets a value
   that passes on the ground it actually sits on. --gold-on-dark matches the gold
   already used in the generated ace card, so the page and the share image agree. */
:root {
  --gold-ink: #7a5f22;    /* 5.37:1 on cream · 5.01 on cream-2 · 5.96 on white */
  --gold-on-dark: #c9a961; /* 5.86:1 on green-800 · 6.53 on green-900 */
}

.eyebrow-dark,
.ev-mon,
.ev-sub-when,
.gh-cmp,
.hs-src,
.hole-notes b,
.lb-rank,
.rv-stars,
.lcard .rec .star { color: var(--gold-ink); }

/* The same eyebrow runs on both grounds, so the dark bands take it back. */
.band .eyebrow-dark,
.hole-hero .eyebrow,
.trow .rank,
.vr-link,
.reviews-udisc,
.ace-teaser-count,
.hoa-eyebrow,
.sb-plate-kicker,
.sb-plate-date,
.sc-head,
.imglink { color: var(--gold-on-dark); }

/* 3.74:1 before — the smallest type on the site, in the least contrast. */
.foot .fineprint { color: #9ba189; }

/* ---- Focus ----------------------------------------------------------------
   Two authored focus rules existed across three stylesheets. The browser default
   still fired, so the site was never focus-invisible — but an orange UA ring is
   not this design system, and on the dark greens it was the only marker. Touch
   got a designed press state earlier; this is the keyboard's half of that. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--green-400);
  outline-offset: 2px;
  border-radius: 3px;
}
/* On dark grounds the green ring disappears into the background. */
.band :where(a, button, summary, [tabindex]):focus-visible,
.nav :where(a, button):focus-visible,
.hero :where(a, button):focus-visible,
.hole-hero :where(a, button):focus-visible,
.foot :where(a, button):focus-visible,
.hoa :where(a, button):focus-visible,
.acepage :where(a, button):focus-visible { outline-color: var(--cream); }