/* =====================================================================
   Golf Club Demo Platform — multi-tenant site template
   Nothing here is club-specific. Brand colours arrive as CSS custom
   properties injected by app.js from GET /api/site.

   Design direction: "the club book" — the printed member's guide of a
   good club. Engraved hairline rules, a warm uncoated paper ground,
   tabular figures, price plates with leader dots, and one real
   scorecard. Photography and the brand green carry the colour; boxes
   and drop shadows are used only where they earn their keep.
   ===================================================================== */

:root {
  /* brand (overridden per club at runtime by app.js) */
  --brand: #1e5631;
  --brand-rgb: 30, 86, 49;
  --brand-dark: #143d22;
  --brand-deep: #0c2415;
  --brand-tint: #eef4ef;
  --accent: #c9a227;
  --accent-rgb: 201, 162, 39;
  --accent-soft: #e3c25a;
  --accent-deep: #7e6518;   /* readable gold for text on light grounds */
  --accent-ink: #241d05;

  /* paper & ink */
  --cream: #f6f3ec;
  --surface: #fdfbf6;
  --ink: #16211a;
  --ink-soft: #55615a;
  --ink-mute: #646e68;
  --line: rgba(22, 33, 26, .13);
  --line-soft: rgba(22, 33, 26, .075);
  --rule: rgba(var(--accent-rgb), .42);

  /* status */
  --open: #2f9e5c;
  --limited: #d99017;
  --booked: #9aa3a7;

  --radius: 12px;
  --radius-lg: 18px;
  --radius-media: 22px;
  --shadow-sm: 0 1px 2px rgba(20, 40, 28, .05), 0 8px 24px rgba(20, 40, 28, .05);
  --shadow: 0 18px 44px rgba(20, 40, 28, .13);
  --shadow-lg: 0 34px 80px rgba(10, 26, 16, .26);
  --ring: 0 0 0 3px rgba(var(--accent-rgb), .55);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ribbon-h: 0px;
  --nav-h: 76px;
  --ease: cubic-bezier(.22, .8, .3, 1);

  /* ---- vertical rhythm -------------------------------------------
     One scale, used by every band. Sections that keep the same
     background sit on --pt/--pb; a background change gets --pt-band.
     At 1280px this makes a same-colour seam ~118px and a colour-change
     seam ~126px, instead of the old 230px. ------------------------- */
  --pt: clamp(2.6rem, 4.6vw, 4.2rem);
  --pb: clamp(2.6rem, 4.6vw, 4.2rem);
  --pt-band: clamp(3rem, 5.2vw, 4.9rem);
  --head-gap: clamp(1.7rem, 2.8vw, 2.6rem);
  --stack: clamp(1.2rem, 2.2vw, 2rem);
}

/* ---------- reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--ribbon-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body); color: var(--ink); background: var(--cream);
  line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden;
  font-synthesis-weight: none;
}
body.locked { overflow: hidden; }
img, video, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
/* many elements below set an explicit display, which would beat the UA
   [hidden] rule — this keeps the hidden attribute authoritative everywhere */
[hidden] { display: none !important; }
h1, h2, h3, h4 {
  font-family: var(--font-display); line-height: 1.1; color: var(--ink);
  font-weight: 600; font-optical-sizing: auto;
}
h1 { font-size: clamp(2.55rem, 6.1vw, 4.7rem); letter-spacing: -.022em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.75rem); letter-spacing: -.014em; }
h3 { font-size: 1.15rem; letter-spacing: -.006em; }
p { text-wrap: pretty; }
ul { list-style: none; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed; top: -100px; left: 12px; z-index: 200; background: var(--brand); color: #fff;
  padding: .7rem 1.1rem; border-radius: 0 0 10px 10px; font-weight: 600; transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ---------- layout helpers ---------- */
.container { width: min(1200px, 92vw); margin: 0 auto; }
.section { padding-top: var(--pt); padding-bottom: var(--pb); position: relative; }
.section-alt { background: var(--surface); --pt: var(--pt-band); --pb: var(--pt-band); }
.section-dark {
  background: linear-gradient(165deg, var(--brand-deep), var(--brand-dark) 62%, #0a1a10);
  color: #e8ede9; --pt: var(--pt-band); --pb: var(--pt-band);
}
/* an engraved hairline marks every change of ground */
.section-alt::before, .section-dark::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule) 22%, var(--rule) 78%, transparent);
}
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.light { color: #fff; }
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }

/* grid items default to min-width:auto, which lets wide inner grids (the slot
   grid, tables) push a column past the container — never let that happen */
.book-grid > *, .about-grid > *, .contact-grid > *, .cards > *, .rates > *,
.tiers > *, .quotes > *, .slot-grid > *, .resv > *, .sec-head.split > *,
.rates-layout > *, .footer-inner > *, .rate > *,
.course-grid > *, .course-rail > *, .dine-body > *, .awards > *,
.cty-features > *, .cty-stats > * { min-width: 0; }

/* ---------- section heads ---------- */
.sec-head { max-width: 64ch; margin: 0 auto var(--head-gap); }
.sec-head.center { text-align: center; }
.sec-head.lead, .sec-head.split {
  max-width: none; margin-inline: 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: clamp(.9rem, 1.8vw, 1.4rem);
}
.sec-head.split {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(.6rem, 3vw, 3rem); align-items: end;
}
.sec-head.split .sec-sub { margin-top: 0; padding-bottom: .3rem; }
.sec-sub { color: var(--ink-soft); font-size: clamp(1rem, .92rem + .3vw, 1.1rem); margin-top: .85rem; }
.sec-sub.light { color: rgba(255, 255, 255, .84); }

/* kicker: a small engraved label with a rule struck through to its left */
.kicker {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: .24em;
  font-size: .7rem; font-weight: 600; color: var(--accent-deep); margin-bottom: .8rem;
}
.kicker::before { content: ""; width: 26px; height: 1px; background: var(--accent); opacity: .8; flex: 0 0 auto; }
.center .kicker { justify-content: center; }
.section-dark .kicker, .booking-section .kicker { color: var(--accent-soft); }
/* inherits the label's colour so it always clears contrast; the lowercase
   setting and lighter weight are what mark it as secondary */
.opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: inherit; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .75s var(--ease), transform .75s var(--ease); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
[data-stagger] { opacity: 0; transform: translate3d(0, 20px, 0); }
.hero-ready [data-stagger] { animation: rise .9s var(--ease) forwards; animation-delay: calc(var(--s, 1) * .1s); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- scroll progress ---------- */
#scroll-progress { position: fixed; z-index: 90; top: var(--ribbon-h); left: 0; right: 0; height: 3px; pointer-events: none; }
#scroll-progress span {
  display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
}

/* ---------- demo ribbon (legal) ---------- */
#demo-ribbon {
  position: fixed; z-index: 95; inset: 0 0 auto 0;
  background: rgba(12, 18, 14, .94); color: #e9e5d7; backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(var(--accent-rgb), .3); font-size: .8rem;
}
.ribbon-inner { width: min(1200px, 94vw); margin: 0 auto; display: flex; align-items: center; gap: .6rem; padding: .55rem 2rem .55rem 0; }
.ribbon-icon { width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; }
#demo-ribbon-text { flex: 1; line-height: 1.4; }
#demo-ribbon-close { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); color: inherit; opacity: .7; padding: .3rem; border-radius: 6px; }
#demo-ribbon-close:hover { opacity: 1; }
#demo-ribbon-close svg { width: 15px; height: 15px; }

/* =====================================================================
   NAV
   Sized so the row never overflows between 320px and 2560px:
   - brand truncates for long club names
   - link gap + type scale tighten through the mid range
   - the member button drops its label below 1281px
   - the burger takes over at 1120px, well above the overflow point
   ===================================================================== */
#nav {
  position: fixed; z-index: 80; top: var(--ribbon-h); left: 0; right: 0;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s;
}
.nav-inner {
  /* percentage + padding rather than vw: vw includes the scrollbar, which
     is what used to push the row a couple of pixels past the viewport */
  width: min(1400px, 100%); margin: 0 auto; padding-inline: clamp(14px, 2vw, 40px);
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: clamp(.7rem, 1.6vw, 1.4rem);
  min-height: var(--nav-h); color: #fff;
}
#nav.solid { background: rgba(252, 250, 245, .94); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 1px 0 var(--line), 0 10px 34px rgba(20, 40, 28, .07); }
#nav.solid .nav-inner { color: var(--ink); }

.brand {
  display: flex; align-items: center; gap: .55rem; margin-right: auto;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.005em; line-height: 1.15;
  font-size: clamp(1rem, 1.35vw, 1.28rem); min-width: 0; flex: 0 1 auto;
}
.brand-mark { width: 25px; height: 25px; color: var(--accent); flex: 0 0 auto; }
#brand-name {
  min-width: 0; max-width: clamp(7rem, 16vw, 20rem);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

#nav-links {
  display: flex; align-items: center; flex: 0 1 auto; min-width: 0;
  gap: clamp(.85rem, 1.9vw, 1.6rem);
  font-size: clamp(.8rem, .95vw, .875rem); font-weight: 500; letter-spacing: .005em;
}
#nav-links a { opacity: .88; position: relative; padding: .35rem 0; white-space: nowrap; transition: opacity .2s; }
#nav-links a:hover { opacity: 1; }
#nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0; background: var(--accent); transition: width .28s var(--ease); }
#nav-links a:hover::after, #nav-links a.current::after { width: 100%; }
/* secondary destinations live in the mobile drawer only.
   `.nav-auto-more` is the same demotion applied at runtime by app.js when a
   club has enough optional sections to fill the bar — the measured
   zero-overflow guarantee, rather than a guess baked into the markup. */
#nav-links > a.nav-more, #nav-links > a.nav-auto-more { display: none; }

.nav-actions { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.nav-actions::before {
  content: ""; width: 1px; height: 22px; background: currentColor; opacity: .2;
  margin-right: .2rem; flex: 0 0 auto;
}
#nav-burger { display: none; padding: .4rem; }
#nav-burger span { display: block; width: 23px; height: 2px; background: currentColor; margin: 5px 0; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
#nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
#nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* the member button carries its label only where there is room for it */
@media (max-width: 1280px) {
  #member-login-btn span { display: none; }
  #member-login-btn { padding: .55rem; border-radius: 50%; }
  #member-login-btn svg { width: 19px; height: 19px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.7rem; border-radius: 999px; font-weight: 600; font-size: .93rem;
  font-family: var(--font-body); cursor: pointer; text-align: center; line-height: 1.2;
  letter-spacing: .005em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
  border: 1px solid transparent; white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: .56rem 1.1rem; font-size: .84rem; }
.btn-lg { padding: 1.02rem 2.1rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-gold { background: linear-gradient(135deg, var(--accent), var(--accent-soft)); color: var(--accent-ink); box-shadow: 0 10px 26px rgba(var(--accent-rgb), .32); }
.btn-gold:hover { box-shadow: 0 16px 34px rgba(var(--accent-rgb), .44); }
.btn-solid { background: var(--brand); color: #fff; box-shadow: 0 10px 26px rgba(var(--brand-rgb), .26); }
.btn-solid:hover { background: var(--brand-dark); }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.45); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(255,255,255,.22); }
.btn-outline { background: transparent; border-color: currentColor; color: inherit; opacity: .95; }
.btn-outline:hover { background: rgba(var(--accent-rgb), .14); border-color: var(--accent); color: inherit; }
.btn-outline svg { width: 16px; height: 16px; }
.btn[disabled] { opacity: .6; pointer-events: none; }
.link-btn { color: var(--accent-soft); font-size: .82rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- member chip / menu ---------- */
#member-slot { position: relative; }
#member-chip-btn { display: flex; align-items: center; gap: .5rem; padding: .3rem .65rem .3rem .3rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); transition: background .25s, border-color .25s; }
#nav.solid #member-chip-btn { border-color: var(--line); }
#member-chip-btn:hover { background: rgba(var(--accent-rgb), .16); border-color: var(--accent); }
#member-chip-btn .caret { width: 14px; height: 14px; opacity: .7; transition: transform .25s; }
#member-chip-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.member-name { font-size: .85rem; font-weight: 600; max-width: 10ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft)); color: var(--accent-ink);
  font-weight: 700; font-size: .76rem; letter-spacing: .02em;
}
.avatar.sm { width: 28px; height: 28px; font-size: .7rem; }
.avatar.lg { width: 54px; height: 54px; font-size: 1.15rem; }
.member-menu {
  position: absolute; top: calc(100% + 12px); right: 0; min-width: 232px; z-index: 5;
  background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  padding: .45rem; color: var(--ink); animation: pop .2s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } }
.member-menu-head { padding: .7rem .8rem .8rem; border-bottom: 1px solid var(--line); margin-bottom: .35rem; display: grid; gap: .1rem; }
.member-menu-head strong { font-size: .92rem; }
.member-menu-head span { font-size: .78rem; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; }
.member-menu button[role="menuitem"] { display: flex; align-items: center; gap: .65rem; width: 100%; text-align: left; padding: .6rem .8rem; border-radius: 8px; font-size: .9rem; font-weight: 500; transition: background .18s; }
.member-menu button[role="menuitem"] svg { width: 17px; height: 17px; color: var(--ink-mute); }
.member-menu button[role="menuitem"]:hover { background: var(--brand-tint); }
.member-menu button.danger { color: #b3261e; }
.member-menu button.danger svg { color: #b3261e; }

/* =====================================================================
   HERO — one thesis image, the club's name set large, and a brass rail
   of figures closing the frame at the foot of the screen.
   ===================================================================== */
#hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; overflow: hidden; isolation: isolate; }
.hero-media, .hero-media > * { position: absolute; inset: 0; }
#hero-fallback { background: linear-gradient(160deg, #16381f 0%, var(--brand) 45%, var(--brand-deep) 100%); }
#hero-image, #hero-video { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
#hero-image { opacity: 0; transition: opacity .9s var(--ease); }
#hero-image.loaded { opacity: 1; }
#hero-video { opacity: 0; transition: opacity 1.2s var(--ease); }
#hero-video.ready { opacity: 1; }
.hero-overlay {
  background:
    linear-gradient(100deg, rgba(6, 14, 9, .9) 0%, rgba(6, 14, 9, .66) 34%, rgba(6, 14, 9, .2) 62%, rgba(6, 14, 9, .32) 100%),
    linear-gradient(to top, rgba(5, 12, 8, .92) 0%, rgba(5, 12, 8, .28) 44%, rgba(5, 12, 8, .38) 100%);
}
.hero-vignette { background: radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(4, 10, 7, .55) 100%); }
.hero-content { position: relative; width: min(1200px, 92vw); margin: 0 auto; padding: calc(var(--nav-h) + var(--ribbon-h) + 2.5rem) 0 0; }
.hero-inner { max-width: 46rem; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: .7rem;
  text-transform: uppercase; letter-spacing: .28em; font-size: clamp(.66rem, 1.3vw, .78rem);
  font-weight: 600; color: var(--accent-soft); margin-bottom: 1.15rem; text-shadow: 0 2px 12px rgba(0,0,0,.7);
}
.hero-kicker::before { content: ""; width: 30px; height: 1px; background: var(--accent-soft); opacity: .9; flex: 0 0 auto; }
#hero h1 { color: #fff; max-width: 15ch; font-weight: 600; text-shadow: 0 6px 40px rgba(0, 0, 0, .58), 0 1px 3px rgba(0,0,0,.45); }
.hero-sub { max-width: 48ch; margin: 1.2rem 0 2rem; font-size: clamp(1rem, 1.45vw, 1.16rem); color: #e9efe9; font-weight: 400; text-shadow: 0 2px 18px rgba(0,0,0,.7); }
.hero-ctas { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero-badges { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: 1.5rem; }
.chip { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .95rem; border-radius: 999px; font-size: .82rem; font-weight: 500; }
.chip-glass { background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(8px); color: #fff; }
.chip svg { width: 17px; height: 17px; color: var(--accent-soft); }
.chip strong { font-weight: 700; }
.chip .sep { opacity: .45; }
.live-chip .pulse { width: 8px; height: 8px; border-radius: 50%; background: #58e08c; box-shadow: 0 0 0 0 rgba(88, 224, 140, .7); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(88, 224, 140, 0); } 100% { box-shadow: 0 0 0 0 rgba(88, 224, 140, 0); } }

/* the brass rail */
.hero-stats {
  position: relative; display: flex; gap: clamp(1.3rem, 4vw, 3.6rem); flex-wrap: wrap;
  margin-top: clamp(1.9rem, 4vw, 3rem); padding: 1.15rem 0 clamp(2.4rem, 4vw, 3.4rem);
  border-top: 1px solid rgba(255,255,255,.24);
}
.hero-stats::before { content: ""; position: absolute; top: -1px; left: 0; width: 76px; height: 2px; background: var(--accent); }
.hero-stats div { min-width: 84px; }
.hero-stats strong {
  display: block; font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.4rem);
  color: var(--accent-soft); line-height: 1.08; font-weight: 500; font-variant-numeric: tabular-nums;
}
.hero-stats span { font-size: .7rem; text-transform: uppercase; letter-spacing: .18em; color: #cdd5cd; }
.scroll-cue { position: absolute; bottom: 1.3rem; left: 50%; transform: translateX(-50%); width: 25px; height: 40px; border: 1.5px solid rgba(255,255,255,.5); border-radius: 13px; z-index: 2; }
.scroll-cue span { position: absolute; top: 7px; left: 50%; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: cue 1.8s infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1 } 70% { transform: translateY(13px); opacity: 0 } 100% { opacity: 0 } }

/* =====================================================================
   ABOUT — asymmetric: a wide plate of photography set low against a
   narrower column of text that starts high.
   ===================================================================== */
/* the hero is a full-bleed band — the first section under it gets a touch
   more air than a plain section-to-section seam */
#about { --pt: clamp(3.2rem, 5.8vw, 5.2rem); }
.about-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(1.8rem, 4.5vw, 4rem); align-items: start; }
.about-media { position: relative; margin-top: clamp(0rem, 2.5vw, 2.6rem); }
.about-frame { position: absolute; inset: 20px -20px -20px 20px; border: 1px solid var(--rule); border-radius: var(--radius-media); z-index: 0; }
.about-img {
  position: relative; z-index: 1; aspect-ratio: 5 / 4; border-radius: var(--radius-media); overflow: hidden;
  background: linear-gradient(150deg, var(--brand) 0%, #2c6e42 55%, var(--brand-deep) 100%); box-shadow: var(--shadow);
}
.about-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.about-media:hover .about-img img { transform: scale(1.04); }
.about-badge {
  position: absolute; z-index: 2; left: -16px; bottom: -18px; max-width: 15rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft)); color: var(--accent-ink);
  border-radius: 12px; padding: .8rem 1.1rem; font-weight: 600; font-family: var(--font-display);
  font-size: 1rem; line-height: 1.25; box-shadow: var(--shadow);
}
.about-text { padding-top: clamp(0rem, 1vw, 1rem); }
.lede { font-size: clamp(1.02rem, .95rem + .35vw, 1.16rem); color: var(--ink-soft); margin-bottom: 1.4rem; }
.checklist { display: grid; margin-bottom: 1.7rem; border-top: 1px solid var(--line-soft); }
.checklist li { padding: .68rem 0 .68rem 1.9rem; position: relative; font-weight: 500; font-size: .96rem; border-bottom: 1px solid var(--line-soft); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 1.06em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.about-cta { margin-top: .2rem; }

/* =====================================================================
   THE COURSE — a hairline lattice, the way a printed club directory
   sets its services. No cards, no drop shadows.
   ===================================================================== */
.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.card {
  position: relative; background: var(--surface);
  padding: clamp(1.4rem, 2.2vw, 1.9rem) clamp(1.2rem, 1.9vw, 1.65rem);
  display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: start;
  transition: background .3s var(--ease);
}
.section-alt .card { background: var(--surface); }
.card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: 50% 0; transition: transform .35s var(--ease);
}
.card:hover { background: var(--brand-tint); }
.card:hover::before { transform: scaleY(1); }
.card .icon {
  grid-row: span 2; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--brand), var(--brand-dark)); color: var(--accent-soft);
  transition: transform .35s var(--ease);
}
.card:hover .icon { transform: translateY(-2px); }
.card .icon svg { width: 21px; height: 21px; }
.card h3 { font-size: 1.08rem; margin-bottom: .35rem; align-self: center; }
.card p { font-size: .92rem; color: var(--ink-soft); line-height: 1.55; }

/* =====================================================================
   BOOKING — a full-bleed deep-green band whose heading plate is lifted
   up over the seam, so the two sections interlock instead of stacking.
   ===================================================================== */
/* `flow-root` is load-bearing: without a block formatting context the
   plate's negative margin collapses out through the section and cancels
   the lift instead of overlapping the seam. */
#book {
  --pt: 0; --pb: var(--pt-band); --book-lift: clamp(1.6rem, 3.2vw, 3.2rem);
  display: flow-root; scroll-margin-top: calc(var(--book-lift) + 1.2rem);
}
/* the last visible section above donates the air the plate rises into;
   app.js tags it, so this still works when About or The Course is absent */
.section.lift-donor { padding-bottom: calc(var(--pb) + clamp(1.2rem, 2.6vw, 2.6rem)); }
/* nothing but the hero above — a plate lifted into a full-bleed photo
   would collide with the scroll cue, so the band just starts normally */
#book.no-lift { --book-lift: 0px; --pt: var(--pt-band); }
.booking-section { color: #fff; }
.booking-bg { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(155deg, var(--brand-dark), var(--brand) 52%, var(--brand-deep)); }
.booking-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 82% 8%, rgba(var(--accent-rgb), .2), transparent 60%), radial-gradient(ellipse 50% 40% at 8% 95%, rgba(255,255,255,.07), transparent 60%); }
.booking-section .container { position: relative; }
.booking-section h2, .booking-section h3 { color: #fff; }

/* `.sec-head.book-lead`, not `.book-lead`: the generic `.sec-head.split`
   rule is also two classes, so a single-class selector here would lose the
   border-bottom and padding-bottom to it. */
.sec-head.book-lead {
  position: relative; z-index: 3;
  margin: calc(-1 * var(--book-lift)) 0 0;
  background: linear-gradient(145deg, var(--brand-dark), var(--brand-deep));
  border: 1px solid rgba(var(--accent-rgb), .32);
  border-radius: var(--radius-lg); box-shadow: 0 30px 64px rgba(6, 18, 11, .34);
  padding: clamp(1.4rem, 2.8vw, 2.2rem) clamp(1.3rem, 2.8vw, 2.3rem);
}
.book-grid { display: grid; grid-template-columns: 1.25fr .95fr; gap: clamp(1rem, 2.2vw, 1.8rem); align-items: stretch; margin-top: clamp(1.3rem, 2.6vw, 2.2rem); }
.panel {
  background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(14px);
  border-radius: var(--radius-lg); padding: clamp(1.2rem, 2.4vw, 1.9rem);
  display: flex; flex-direction: column;
}
.book-panel > form { flex: 1 1 auto; display: flex; flex-direction: column; }
/* pushes the confirm button to the foot of the panel so both columns
   finish level — this is what used to leave a 100px hole under the form */
.book-submit { margin-top: auto; padding-top: .4rem; }
.panel-title { font-size: 1.2rem; margin-bottom: 1rem; }
.sheet-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.sheet-head h3 { font-size: 1.2rem; }
.sheet-head p { font-size: .85rem; color: rgba(255,255,255,.72); }
.date-field { display: flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: .4rem .9rem; transition: border-color .2s, background .2s; }
.date-field:focus-within { border-color: var(--accent); background: rgba(255,255,255,.18); }
.date-field svg { width: 17px; height: 17px; color: var(--accent-soft); flex: 0 0 auto; }
.date-field input { background: none; border: 0; padding: .15rem 0; width: auto; min-width: 8.5rem; font-size: .87rem; color: #fff; color-scheme: dark; }
.date-field input:focus { outline: none; }

.day-strip { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: .9rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.day-strip::-webkit-scrollbar { height: 4px; }
.day-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 4px; }
.day-chip {
  flex: 0 0 auto; display: grid; gap: .1rem; place-items: center; min-width: 66px; padding: .5rem .7rem;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  transition: background .22s, border-color .22s, transform .22s var(--ease);
}
.day-chip:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.day-chip .dow { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.74); }
.day-chip .dnum { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.day-chip.active { background: linear-gradient(135deg, var(--accent), var(--accent-soft)); border-color: transparent; color: var(--accent-ink); }
.day-chip.active .dow { color: rgba(36, 29, 5, .75); }

.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .74rem; color: rgba(255,255,255,.76); margin-bottom: .9rem; text-transform: uppercase; letter-spacing: .09em; }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-open { background: #58e08c; }
.dot-limited { background: #f0b544; }
.dot-booked { background: rgba(255,255,255,.32); }

.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: .5rem; min-height: 120px; }
.slot {
  position: relative; display: grid; gap: .12rem; padding: .6rem .5rem; border-radius: 10px; text-align: center;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07); color: #fff;
  transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .2s;
}
.slot .slot-time { font-weight: 600; font-size: .89rem; font-variant-numeric: tabular-nums; }
.slot .slot-meta { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.74); }
.slot::before { content: ""; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; }
.slot--open::before { background: #58e08c; }
.slot--limited::before { background: #f0b544; }
.slot--open:hover, .slot--limited:hover { transform: translateY(-3px); background: rgba(255,255,255,.15); border-color: rgba(var(--accent-rgb), .6); }
.slot--limited .slot-meta { color: #f6cd85; }
.slot--booked { opacity: .42; cursor: not-allowed; text-decoration: line-through; }
.slot--booked::before { background: rgba(255,255,255,.3); }
.slot.selected {
  background: linear-gradient(135deg, var(--accent), var(--accent-soft)); color: var(--accent-ink);
  border-color: transparent; box-shadow: 0 10px 24px rgba(var(--accent-rgb), .4); transform: translateY(-2px);
}
.slot.selected .slot-meta { color: rgba(36, 29, 5, .7); }
.slot.selected::before { background: var(--accent-ink); }
.slot.skel { pointer-events: none; height: 52px; border-color: rgba(255,255,255,.08); background: linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.05) 70%); background-size: 220% 100%; animation: shimmer 1.4s infinite linear; }
.slot.skel::before { display: none; }
@keyframes shimmer { from { background-position: 140% 0; } to { background-position: -40% 0; } }
.sheet-status { margin-top: .85rem; font-size: .83rem; color: rgba(255,255,255,.76); min-height: 1.2em; }
.sheet-empty { grid-column: 1 / -1; text-align: center; padding: 2rem 1rem; color: rgba(255,255,255,.7); font-size: .92rem; }

.selected-slot { margin-bottom: 1rem; }
.selected-empty { font-size: .85rem; color: rgba(255,255,255,.74); border: 1px dashed rgba(255,255,255,.24); border-radius: 10px; padding: .85rem 1rem; }
.selected-filled { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: rgba(var(--accent-rgb), .16); border: 1px solid rgba(var(--accent-rgb), .5); border-radius: 10px; padding: .8rem 1rem; }
.sel-label { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .18em; color: var(--accent-soft); margin-bottom: .15rem; }
.selected-filled strong { font-family: var(--font-display); font-size: 1.05rem; display: block; font-weight: 600; }
.selected-filled em { font-style: normal; font-size: .9rem; color: rgba(255,255,255,.8); }

#booking-form .grid-2, .guest-fields.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem .85rem; }
#booking-form label, .guest-fields label, .notes-field { display: grid; gap: .35rem; font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.82); margin-bottom: .8rem; }
#booking-form .grid-2 label { margin-bottom: 0; }
.guest-fields { border: 0; margin: 0 0 .1rem; padding: 0; }
.span-2 { grid-column: 1 / -1; }
input, select, textarea {
  font: inherit; font-size: .94rem; padding: .7rem .9rem; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
textarea { resize: vertical; }
#booking-form input, #booking-form select, #booking-form textarea { background: rgba(255,255,255,.95); border-color: transparent; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
input:disabled { background: var(--brand-tint); color: var(--ink-mute); }
select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355615a' stroke-width='2'><path d='M6 9l6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 16px; padding-right: 2.2rem; }
.booking-as { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; background: rgba(255,255,255,.09); border: 1px solid rgba(var(--accent-rgb), .34); border-radius: 10px; padding: .7rem .9rem; margin-bottom: .9rem; }
.booking-as > div { display: grid; line-height: 1.32; min-width: 0; flex: 1; }
.booking-as span:first-of-type { font-size: .66rem; text-transform: uppercase; letter-spacing: .16em; color: rgba(255,255,255,.7); }
.booking-as strong { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booking-as em { font-style: normal; font-size: .76rem; color: rgba(255,255,255,.66); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booking-as-swap { flex: 0 0 auto; }
/* the pitch, stated where a guest is about to type it all out by hand */
.guest-prompt {
  display: flex; align-items: center; gap: .55rem .7rem; flex-wrap: wrap;
  font-size: .82rem; color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.22);
  border-radius: 10px; padding: .65rem .85rem; margin-bottom: .9rem;
}
.guest-prompt svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--accent-soft); }
.guest-prompt > span { flex: 1; min-width: 14ch; }
.badge-soft { margin-left: auto; font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--accent-soft); border: 1px solid rgba(var(--accent-rgb), .5); border-radius: 999px; padding: .2rem .6rem; }
.form-msg { margin-top: .8rem; font-size: .87rem; min-height: 1.1em; }
.form-msg.err { color: #ffb4a2; }
.form-msg.ok { color: #b7e4c7; }
.micro { font-size: .73rem; color: rgba(255,255,255,.66); margin-top: .5rem; text-align: center; }
#contact-form .form-msg.err { color: #b3261e; }
#contact-form .form-msg.ok { color: var(--brand); }
.booking-success { text-align: center; padding: 1.4rem .5rem; margin: auto 0; }
.booking-success .tick { width: 62px; height: 62px; margin: 0 auto 1.1rem; stroke: var(--accent-soft); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.booking-success .tick circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw .7s var(--ease) forwards; }
.booking-success .tick path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .4s var(--ease) .5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.booking-success h3 { font-size: 1.55rem; margin-bottom: .5rem; }
/* the ticket serial, set like the number printed on a reservation stub */
.conf-no {
  display: inline-block; margin-bottom: .9rem; padding: .3rem .95rem; border-radius: 999px;
  font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--accent-soft);
  border: 1px solid rgba(var(--accent-rgb), .45);
}
.booking-success p { color: rgba(255,255,255,.82); margin-bottom: 1.3rem; font-size: .94rem; }
.success-actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }

/* =====================================================================
   RATES — a green-fee plate with leader dots, set beside the heading
   rather than under it.
   ===================================================================== */
.rates-layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(1.8rem, 5vw, 4.5rem); align-items: center; }
.rates-aside { align-self: center; }
.rates-aside .sec-sub { margin-top: .8rem; }
.rates-note { font-size: .9rem; margin-top: 1rem; }
.rates-aside .rates-note { max-width: 42ch; }
.rates-cta { margin-top: 1.5rem; }
.rates-plate {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: clamp(1.3rem, 2.8vw, 2.2rem) clamp(1.2rem, 2.6vw, 2.2rem) clamp(1.1rem, 2.4vw, 1.9rem);
}
.rates-plate::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
}
.plate-cap {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .24em; font-weight: 600;
  color: var(--ink-soft); padding-bottom: .9rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line);
}
.rates { display: grid; }
.rate {
  display: grid; grid-template-columns: auto minmax(1.5rem, 1fr) auto;
  align-items: baseline; column-gap: .7rem; padding: .82rem 0;
}
.rate > span:not(.rate-note) { order: 1; font-size: .97rem; font-weight: 500; color: var(--ink); }
.rate::before {
  content: ""; order: 2; align-self: end; margin-bottom: .38em;
  border-bottom: 1px dotted var(--ink-mute); opacity: .55;
}
.rate strong {
  order: 3; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.35rem, 2vw, 1.7rem); color: var(--brand); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.rate .rate-note { order: 4; grid-column: 1 / -1; font-size: .81rem; color: var(--ink-soft); margin-top: .2rem; }
.rate + .rate { border-top: 1px solid var(--line-soft); }

/* =====================================================================
   SCORECARD — the real artifact. A featured hole plate leads the band.
   ===================================================================== */
.score-lead { display: flex; flex-wrap: wrap; gap: clamp(1rem, 2.4vw, 2rem); align-items: center; justify-content: center; margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.score-sig {
  flex: 0 1 auto; display: grid; grid-template-columns: auto 1fr; column-gap: clamp(1rem, 2vw, 1.6rem); align-items: center;
  border: 1px solid rgba(var(--accent-rgb), .42); border-radius: var(--radius-lg);
  background: rgba(255,255,255,.045); padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2.2vw, 1.7rem);
}
.sig-num {
  grid-row: span 2; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(3.2rem, 6vw, 4.6rem); line-height: .86; color: var(--accent-soft);
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
  padding-right: clamp(1rem, 2vw, 1.6rem); border-right: 1px solid rgba(255,255,255,.16);
}
.sig-cap { font-size: .66rem; text-transform: uppercase; letter-spacing: .2em; font-weight: 600; color: var(--accent-soft); }
.sig-meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .4rem; font-size: .88rem; color: rgba(255,255,255,.78); }
.sig-meta strong { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.score-summary { display: flex; gap: .55rem; flex-wrap: wrap; justify-content: center; }
.score-summary .chip { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; }
.score-summary .chip strong { color: var(--accent-soft); font-family: var(--font-display); font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.score-tables { display: grid; gap: 1.2rem; }
.score-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.045); }
.score-table-wrap::-webkit-scrollbar { height: 6px; }
.score-table-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 4px; }
table.scorecard { width: 100%; min-width: 640px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.scorecard caption { text-align: left; padding: .95rem 1.1rem .45rem; font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: #fff; letter-spacing: .01em; }
table.scorecard th, table.scorecard td { padding: .6rem .5rem; text-align: center; font-size: .87rem; border-bottom: 1px solid rgba(255,255,255,.08); }
table.scorecard thead th { background: rgba(255,255,255,.07); font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.82); }
table.scorecard th[scope="row"] { text-align: left; padding-left: 1.1rem; width: 108px; font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.75); white-space: nowrap; }
table.scorecard tbody tr:last-child th, table.scorecard tbody tr:last-child td { border-bottom: 0; }
table.scorecard td.total, table.scorecard th.total { background: rgba(var(--accent-rgb), .16); color: var(--accent-soft); font-weight: 700; }
table.scorecard tr.row-par td { font-weight: 600; color: #fff; }
table.scorecard tbody tr:hover td:not(.total) { background: rgba(255,255,255,.05); }
#scorecard-note { margin: 1.4rem auto 0; max-width: 62ch; }

/* ---------- ambient video ---------- */
#ambient { position: relative; min-height: 40svh; display: grid; place-items: center; color: #fff; overflow: hidden; padding: clamp(2.8rem, 5vw, 4.2rem) 0; text-align: center; }
#ambient::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--rule) 22%, var(--rule) 78%, transparent); }
.ambient-media, .ambient-media > * { position: absolute; inset: 0; }
#ambient-fallback { background: linear-gradient(150deg, var(--brand-dark), var(--brand) 60%, var(--brand-deep)); background-size: cover; background-position: center; }
#ambient-video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease); }
#ambient-video.ready { opacity: 1; }
.ambient-overlay { background: linear-gradient(to bottom, rgba(6,14,9,.62), rgba(6,14,9,.74)); }
.ambient-content { position: relative; max-width: 44rem; }
.quote-mark { width: 38px; height: 29px; color: var(--accent); opacity: .85; margin: 0 auto 1.1rem; }
#ambient-quote { font-family: var(--font-display); font-size: clamp(1.4rem, 3.1vw, 2.25rem); line-height: 1.24; font-style: normal; font-weight: 500; letter-spacing: -.015em; text-shadow: 0 4px 30px rgba(0,0,0,.5); }
.ambient-author { margin-top: 1.05rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .22em; color: rgba(255,255,255,.84); }
#ambient-cta { margin-top: 1.8rem; }

/* =====================================================================
   MEMBERSHIP — flat plates, rules instead of shadows, price as the
   anchor of the hierarchy.
   ===================================================================== */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 262px), 1fr)); gap: clamp(.9rem, 1.6vw, 1.3rem); align-items: stretch; }
.tier {
  position: relative; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.7rem, 2.6vw, 2.2rem) clamp(1.3rem, 2.2vw, 1.8rem); display: flex; flex-direction: column;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.tier:hover { transform: translateY(-4px); border-color: var(--rule); box-shadow: var(--shadow-sm); }
.tier.featured { background: linear-gradient(165deg, var(--brand-dark), var(--brand-deep)); color: #fff; border-color: rgba(var(--accent-rgb), .45); }
.tier.featured:hover { transform: translateY(-7px); box-shadow: var(--shadow); }
.tier.featured h3 { color: #fff; }
.tier .tag { position: absolute; top: -11px; left: clamp(1.3rem, 2.2vw, 1.8rem); background: linear-gradient(135deg, var(--accent), var(--accent-soft)); color: var(--accent-ink); font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .3rem .85rem; border-radius: 999px; white-space: nowrap; }
.tier h3 { font-size: 1.28rem; }
.tier .price {
  font-family: var(--font-display); font-size: clamp(2.1rem, 3.1vw, 2.6rem); font-weight: 600;
  color: var(--accent-deep); margin: .35rem 0 1.1rem; line-height: 1; letter-spacing: -.02em;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.tier.featured .price { color: var(--accent-soft); border-bottom-color: rgba(255,255,255,.16); }
.tier .price small { font-size: .78rem; font-family: var(--font-body); color: var(--ink-soft); font-weight: 500; letter-spacing: 0; }
.tier.featured .price small { color: rgba(255,255,255,.62); }
.tier ul { display: grid; gap: .55rem; font-size: .91rem; margin-bottom: 1.6rem; }
.tier li { padding-left: 1.5rem; position: relative; }
.tier li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-deep); font-weight: 700; }
.tier.featured li::before { color: var(--accent-soft); }
.tier .btn { margin-top: auto; }
.tier .tier-note { font-size: .84rem; color: var(--ink-soft); margin-bottom: 1rem; }
.tier.featured .tier-note { color: rgba(255,255,255,.7); }

/* ---------- gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; padding: 0 max(12px, 4vw); }
.gallery figure { position: relative; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; background: linear-gradient(140deg, var(--brand), #35704a); cursor: zoom-in; }
.gallery figure:nth-child(6n+1) { grid-column: span 2; aspect-ratio: 16/9; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.gallery figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,14,9,.55), transparent 55%); opacity: 0; transition: opacity .35s; }
.gallery figure:hover img, .gallery figure:focus-within img { transform: scale(1.06); }
.gallery figure:hover::after { opacity: 1; }
.gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1rem 1.1rem; color: #fff; font-size: .86rem; font-weight: 500; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s var(--ease); }
.gallery figure:hover figcaption, .gallery figure:focus-within figcaption { opacity: 1; transform: none; }
#gallery .sec-head { margin-bottom: clamp(1.4rem, 2.4vw, 2.1rem); }

/* ---------- testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr)); gap: clamp(1.5rem, 3vw, 2.8rem); }
.quote { position: relative; background: none; border: 0; border-top: 2px solid var(--rule); border-radius: 0; padding: 1.3rem 0 0; box-shadow: none; }
.quote p { font-family: var(--font-display); font-style: normal; font-weight: 500; font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.42; margin-bottom: 1rem; color: var(--ink); letter-spacing: -.008em; }
.quote footer { font-size: .78rem; color: var(--ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.quote .stars { color: var(--accent-deep); letter-spacing: 3px; margin-bottom: .7rem; font-size: .85rem; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: .95fr 1.12fr; gap: clamp(1.8rem, 4.5vw, 4rem); align-items: center; }
.contact-list { display: grid; margin: 1.4rem 0 1.9rem; border-top: 1px solid var(--line-soft); }
.contact-list li { display: flex; gap: .85rem; align-items: flex-start; padding: .8rem 0; border-bottom: 1px solid var(--line-soft); font-size: .95rem; }
.contact-list svg { width: 19px; height: 19px; color: var(--accent-deep); flex: 0 0 auto; margin-top: .2em; }
.contact-list a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
#contact-form { display: grid; gap: .85rem; max-width: 520px; }
#contact-form label { display: grid; gap: .35rem; font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); }
#contact-form .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
#contact-form .btn { justify-self: start; }
.map-wrap { border-radius: var(--radius-media); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
#map { width: 100%; aspect-ratio: 4/3.4; border: 0; background: var(--brand-tint); }

/* ---------- footer ---------- */
footer { background: #0c130e; color: #b9c3ba; padding: clamp(2.6rem, 5vw, 4rem) 0 1.4rem; position: relative; }
footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--rule) 22%, var(--rule) 78%, transparent); }
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 2.2rem; padding-bottom: 1.8rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand { color: #fff; font-size: 1.3rem; margin-bottom: .5rem; }
.footer-tagline { margin-top: .45rem; font-size: .89rem; max-width: 34ch; }
footer .muted { color: #8d978d; }
.footer-col h4 { font-family: var(--font-body); font-size: .68rem; text-transform: uppercase; letter-spacing: .2em; color: var(--accent); margin-bottom: .9rem; font-weight: 600; }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; font-size: .89rem; }
.footer-links a:hover, .footer-contact a:hover { color: #fff; }
.footer-contact { display: grid; gap: .55rem; font-size: .89rem; }
.footer-legal { text-align: center; font-size: .74rem; color: #78827a; padding-top: 1.2rem; line-height: 1.6; max-width: 70ch; margin: 0 auto; }

/* ---------- sticky mobile book bar ---------- */
#book-bar {
  position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; display: none; gap: .6rem; align-items: center;
  padding: .7rem max(.8rem, 3vw) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(252, 250, 245, .96); backdrop-filter: blur(14px); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(20, 40, 28, .1); transform: translateY(110%); transition: transform .35s var(--ease);
}
#book-bar.show { transform: none; }
.bar-call { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--brand); }
.bar-call svg { width: 20px; height: 20px; }
.bar-book { flex: 1; }

/* ---------- modals ---------- */
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: max(1rem, 3vh) 1rem; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(8, 15, 10, .68); backdrop-filter: blur(6px); animation: fade .25s var(--ease); }
@keyframes fade { from { opacity: 0; } }
.modal-card {
  position: relative; width: min(440px, 100%); max-height: 92svh; overflow-y: auto; background: var(--surface);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(1.5rem, 4vw, 2.2rem);
  animation: modalIn .35s var(--ease);
}
.modal-card.wide { width: min(620px, 100%); }
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.modal-x { position: absolute; top: .9rem; right: .9rem; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-soft); transition: background .2s, color .2s; }
.modal-x:hover { background: var(--brand-tint); color: var(--ink); }
.modal-x svg { width: 17px; height: 17px; }
.modal-head { text-align: center; margin-bottom: 1.3rem; }
.modal-mark { display: grid; place-items: center; width: 50px; height: 50px; margin: 0 auto .85rem; border-radius: 14px; background: linear-gradient(140deg, var(--brand), var(--brand-dark)); color: var(--accent); }
.modal-mark svg { width: 26px; height: 26px; }
.modal-head h3 { font-size: 1.45rem; margin-bottom: .35rem; }
.modal-head p { font-size: .9rem; color: var(--ink-soft); }
.tabs { position: relative; display: flex; gap: .3rem; background: var(--brand-tint); border-radius: 999px; padding: .3rem; margin-bottom: 1.4rem; }
.tab { flex: 1; position: relative; z-index: 1; padding: .58rem .8rem; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--ink-soft); transition: color .25s; }
.tab.active { color: var(--brand); }
.tab-ink { position: absolute; z-index: 0; top: .3rem; bottom: .3rem; left: .3rem; width: calc(50% - .3rem); background: var(--surface); border-radius: 999px; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease); }
.tabs.t2 .tab-ink { transform: translateX(100%); }

#auth-modal form label, #member-panel form label { display: grid; gap: .35rem; font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .9rem; }
#member-panel .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
#member-panel .grid-2 label { margin-bottom: .9rem; }
#auth-modal .form-msg.err, #member-panel .form-msg.err { color: #b3261e; }
#auth-modal .form-msg.ok, #member-panel .form-msg.ok { color: var(--brand); }
#auth-modal .btn-block { margin-top: .3rem; }

/* ---------- form validation + password reveal ---------- */
/* both reset the label's engraved small-caps setting — they are sentences */
.field-err, .field-hint { text-transform: none; letter-spacing: 0; font-weight: 500; line-height: 1.45; }
.field-err { font-size: .78rem; color: #b3261e; display: flex; align-items: flex-start; gap: .35rem; }
.field-err::before { content: "!"; flex: 0 0 auto; width: 14px; height: 14px; margin-top: .15rem; border-radius: 50%; background: #b3261e; color: #fff; font-size: .62rem; font-weight: 700; display: grid; place-items: center; }
.field-hint { font-size: .76rem; color: var(--ink-mute); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #b3261e; }
input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .28); }

.pw-field { position: relative; display: block; }
.pw-field input { padding-right: 3rem; }
.pw-toggle {
  position: absolute; right: .28rem; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px;
  color: var(--ink-mute); transition: color .2s, background .2s;
}
.pw-toggle:hover { color: var(--ink); background: var(--brand-tint); }
.pw-toggle svg { width: 18px; height: 18px; }

.btn-spin { width: 15px; height: 15px; flex: 0 0 auto; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .22); border-top-color: currentColor; animation: spin .7s linear infinite; }
.btn-ghost .btn-spin, .btn-solid .btn-spin { border-color: rgba(255, 255, 255, .3); border-top-color: currentColor; }

.auth-alt { margin-top: .95rem; text-align: center; font-size: .85rem; color: var(--ink-soft); }
.link-ink { color: var(--accent-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; border-radius: 4px; }
.link-ink:hover { color: var(--ink); }

/* =====================================================================
   MEMBER RECORD — the member's own pages in the club book. A ruled
   record card at the top, then tee times printed as reservation stubs.
   ===================================================================== */
.modal-card.record { width: min(680px, 100%); }
.record-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.15rem; padding-right: 2.4rem; }
.record-id { min-width: 0; }
.record-id .kicker { margin-bottom: .4rem; }
.record-head h3 { font-size: clamp(1.3rem, 3.4vw, 1.62rem); }
.record-head p { font-size: .85rem; color: var(--ink-soft); overflow-wrap: anywhere; }

.record-rail {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: 1.3rem;
}
.record-rail > div { display: flex; flex-direction: column-reverse; min-width: 0; padding: .75rem .6rem .8rem; border-left: 1px solid var(--line-soft); }
.record-rail > div:nth-child(4n+1) { border-left: 0; }
.record-rail dt { font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .15em; color: var(--ink-mute); }
.record-rail dd {
  font-family: var(--font-display); font-weight: 600; line-height: 1.1; margin-bottom: .2rem;
  font-size: clamp(1.15rem, 3.2vw, 1.45rem); font-variant-numeric: tabular-nums; color: var(--ink);
}
.record-rail dd.soft { color: var(--ink-mute); }

.tees-loading { display: flex; align-items: center; gap: .6rem; color: var(--ink-soft); font-size: .9rem; padding: 1.4rem 0; }
.spinner { width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--brand); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tees-heading {
  font-family: var(--font-body); font-size: .66rem; text-transform: uppercase; letter-spacing: .18em;
  color: var(--ink-mute); font-weight: 600; margin: 1.5rem 0 .75rem;
  display: flex; align-items: center; gap: .7rem;
}
.tees-heading::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tees-heading:first-child { margin-top: 0; }
#tees-past-wrap .tees-heading { margin-top: 1.7rem; }

/* ---- reservation stub ---- */
.tee-list { display: grid; gap: .7rem; }
.resv {
  display: grid; grid-template-columns: 70px minmax(0, 1fr);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--cream); overflow: hidden;
}
.resv-date { display: grid; align-content: center; justify-items: center; gap: .02rem; padding: .8rem .3rem; background: var(--brand-tint); border-right: 1px solid var(--line); }
.rd-mon, .rd-dow { font-size: .59rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-mute); }
.rd-day { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--brand); }
/* the next round is printed in the club's own ink */
.resv--next { border-color: rgba(var(--accent-rgb), .5); }
.resv--next .resv-date { background: linear-gradient(150deg, var(--brand), var(--brand-dark)); border-right-color: transparent; }
.resv--next .rd-day { color: var(--accent); }
.resv--next .rd-mon, .resv--next .rd-dow { color: rgba(255, 255, 255, .72); }

.resv-body { min-width: 0; padding: .8rem .95rem .65rem; display: grid; gap: .25rem; align-content: start; }
.resv-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem .8rem; flex-wrap: wrap; }
.resv-time { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
.resv-meta { font-size: .82rem; color: var(--ink-soft); }
.resv-rel { color: var(--ink-mute); }
.resv-foot { display: flex; align-items: center; justify-content: space-between; gap: .35rem .9rem; flex-wrap: wrap; border-top: 1px solid var(--line-soft); margin-top: .35rem; padding-top: .5rem; }
.resv-no { font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.resv-acts { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.resv-act { font-size: .8rem; font-weight: 600; color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; border-radius: 4px; }
.resv-act:hover { color: var(--ink); }
.resv-act.danger { color: #b3261e; }
.resv-act.danger:hover { color: #7d1a15; }

/* cancel: a calm second step, never a jump-scare dialog */
.resv-confirm { grid-column: 1 / -1; border-top: 1px solid var(--line); background: var(--surface); padding: .85rem .95rem .9rem; display: grid; gap: .7rem; }
.resv-confirm p { font-size: .85rem; color: var(--ink-soft); }
.resv-confirm strong { color: var(--ink); }
.resv-confirm .row { display: flex; gap: .55rem; flex-wrap: wrap; }
.resv-confirm .btn { padding: .48rem 1.05rem; font-size: .82rem; }
.btn-danger { background: transparent; color: #b3261e; border-color: rgba(179, 38, 30, .5); }
.btn-danger:hover { background: #b3261e; color: #fff; border-color: #b3261e; }
.resv.is-cancelling { opacity: .55; }

/* ---- earlier rounds: a printed log, not cards ---- */
.tee-log { display: grid; border-top: 1px solid var(--line-soft); }
.log-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: .15rem .8rem; padding: .6rem .15rem; border-bottom: 1px solid var(--line-soft); font-size: .86rem; }
.log-date { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 7.2rem; }
.log-time { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.log-meta { flex: 1; min-width: 0; font-size: .8rem; color: var(--ink-mute); }
.log-row .tee-status { margin-left: auto; }
.more-rounds { display: block; margin: .85rem auto 0; font-size: .82rem; }

.tee-status { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; padding: .24rem .6rem; border-radius: 999px; white-space: nowrap; }
.st-confirmed { background: rgba(47, 158, 92, .14); color: #1f7a45; }
.st-pending { background: rgba(217, 144, 23, .16); color: #96650c; }
.st-cancelled { background: rgba(179, 38, 30, .12); color: #b3261e; }
.st-played { background: rgba(22, 33, 26, .07); color: var(--ink-soft); }

/* ---- empty state: sells the feature rather than reporting nothing ---- */
.tee-empty-plate { border: 1px dashed var(--line); border-radius: var(--radius); background: var(--cream); text-align: center; padding: clamp(1.4rem, 4.5vw, 2.1rem) 1.2rem; }
.tee-empty-plate svg { width: 34px; height: 34px; color: var(--brand); opacity: .5; margin: 0 auto .85rem; }
.tee-empty-plate h5 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin-bottom: .45rem; }
.tee-empty-plate p { font-size: .88rem; color: var(--ink-soft); max-width: 40ch; margin: 0 auto 1.15rem; }

/* ---- record card (profile) ---- */
.record-facts { border-top: 1px solid var(--line); margin-bottom: 1.35rem; }
.record-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .6rem .15rem; border-bottom: 1px solid var(--line-soft); }
.record-facts dt { flex: 0 0 auto; font-size: .63rem; font-weight: 600; text-transform: uppercase; letter-spacing: .15em; color: var(--ink-mute); }
.record-facts dd { text-align: right; font-size: .88rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.record-legend { font-size: .84rem; color: var(--ink-soft); margin-bottom: 1rem; }
.record-signout { display: block; margin: 1.3rem auto 0; font-size: .83rem; font-weight: 600; color: #b3261e; text-decoration: underline; text-underline-offset: 3px; border-radius: 4px; }
.record-signout:hover { color: #7d1a15; }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; }
.lightbox .modal-backdrop { background: rgba(5, 10, 7, .93); }
.lb-inner { position: relative; width: min(1180px, 94vw); height: min(88svh, 900px); display: grid; place-items: center; }
.lb-figure { position: relative; max-width: 100%; max-height: 100%; display: grid; place-items: center; gap: .8rem; animation: modalIn .3s var(--ease); }
.lb-figure img { max-width: 100%; max-height: calc(88svh - 70px); object-fit: contain; border-radius: 10px; box-shadow: var(--shadow-lg); }
.lb-figure figcaption { display: flex; gap: .8rem; align-items: center; justify-content: center; color: #dfe6df; font-size: .87rem; flex-wrap: wrap; }
.lb-count { color: #8d978d; font-variant-numeric: tabular-nums; }
.lb-btn { position: absolute; z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff; backdrop-filter: blur(6px); transition: background .2s, transform .2s; }
.lb-btn:hover { background: rgba(255,255,255,.24); transform: scale(1.06); }
.lb-btn svg { width: 20px; height: 20px; }
.lb-close { top: -6px; right: -6px; }
.lb-prev { left: -6px; top: 50%; transform: translateY(-50%); }
.lb-next { right: -6px; top: 50%; transform: translateY(-50%); }
.lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.06); }

/* =====================================================================
   AWARDS — the engraved plate inside the cover of the club book. Rules,
   type and tabular figures; deliberately no shield, ribbon or badge.
   It is a strip rather than a band: it sits on the paper of the section
   below it, so it costs the page a rule, not a whole colour change.
   ===================================================================== */
.strip { position: relative; padding-top: clamp(2rem, 3.6vw, 3rem); padding-bottom: clamp(2rem, 3.6vw, 3rem); }
/* the strip has already spent the air the first band under the hero was
   given, so About goes back to an ordinary section-to-section seam */
#awards:not([hidden]) + #about { --pt: clamp(2rem, 3.6vw, 3rem); }

.awards {
  position: relative; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
/* the same brass tick that opens the hero's rail of figures */
.awards::before { content: ""; position: absolute; top: -1px; left: 0; width: 76px; height: 2px; background: var(--accent); }
.awards li {
  display: grid; gap: .34rem; align-content: start;
  padding: clamp(1rem, 1.7vw, 1.25rem) clamp(1rem, 1.9vw, 1.6rem);
  border-left: 1px solid var(--line-soft);
}
.awards li:first-child { border-left: 0; padding-left: 0; }
.aw-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; line-height: 1.26; letter-spacing: -.005em; color: var(--ink); }
/* the attribution is set quietly, in sentence case — a plate records who
   said it and when, it does not shout the claim a second time */
.aw-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .55rem; font-size: .82rem; line-height: 1.45; color: var(--ink-mute); }
.aw-year { flex: 0 0 auto; font-size: .68rem; font-weight: 600; letter-spacing: .14em; color: var(--accent-deep); font-variant-numeric: tabular-nums; }

/* =====================================================================
   COURSES — a course index. Ruled tabs across the head of the band, one
   course open beneath them, so a club with 36 or 45 holes gets three
   identities without three times the page.
   ===================================================================== */
.course-index {
  display: flex; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.course-index::-webkit-scrollbar { height: 4px; }
.course-index::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
/* equal tracks, so two courses split the rule in half and five divide it in
   fifths — an index, not a row of buttons floating on an unfinished rule.
   Below `min-width` the strip scrolls instead of crushing the names. */
.course-tab {
  position: relative; flex: 1 0 0; min-width: 9rem; text-align: left;
  display: grid; gap: .22rem; align-content: start;
  padding: clamp(.85rem, 1.7vw, 1.15rem) clamp(1rem, 1.8vw, 1.5rem);
  border-left: 1px solid var(--line-soft); color: var(--ink-soft);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.course-tab:first-child { border-left: 0; }
.course-tab:hover { background: var(--brand-tint); color: var(--ink); }
/* the mark of the open tab is a colour swap, never a transform: this must
   read correctly even where transitions never run */
.course-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
.course-tab[aria-selected="true"] { color: var(--ink); background: var(--surface); }
.course-tab[aria-selected="true"]::after { background: var(--accent); }
.ct-name { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; line-height: 1.2; letter-spacing: -.006em; }
.ct-meta { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-mute); font-variant-numeric: tabular-nums; }

.course-panel { padding-top: clamp(1.5rem, 2.8vw, 2.3rem); }
.course-panel:focus-visible { outline-offset: 6px; }
.course-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(1.4rem, 3.6vw, 3.2rem); align-items: center; }
.course-grid.solo { grid-template-columns: minmax(0, 1fr); max-width: 62ch; }
.course-media {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-media); overflow: hidden;
  background: linear-gradient(150deg, var(--brand) 0%, #2c6e42 55%, var(--brand-deep) 100%);
  box-shadow: var(--shadow-sm);
}
.course-media img { width: 100%; height: 100%; object-fit: cover; }
.course-copy h3 { font-size: clamp(1.45rem, 2.7vw, 2.05rem); letter-spacing: -.014em; line-height: 1.12; }
.course-designer { margin-top: .55rem; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--accent-deep); }
.course-text { margin-top: .95rem; color: var(--ink-soft); font-size: clamp(1rem, .95rem + .3vw, 1.1rem); }
.course-text p + p { margin-top: .8rem; }
.course-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  margin-top: clamp(1.1rem, 2.2vw, 1.5rem);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.course-rail > div { display: flex; flex-direction: column-reverse; padding: .78rem .7rem .82rem; border-left: 1px solid var(--line-soft); }
.course-rail > div:first-child { border-left: 0; padding-left: 0; }
.course-rail dt { font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-mute); }
.course-rail dd { font-family: var(--font-display); font-size: clamp(1.3rem, 2.3vw, 1.7rem); font-weight: 600; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: .16rem; }
.course-note { margin-top: .9rem; font-size: .84rem; color: var(--ink-soft); }

/* =====================================================================
   DINING — the clubhouse room photographed wide, with the restaurant's
   name set on paper and lifted over the lower edge of the plate, the way
   the booking band lifts its heading over the seam.
   ===================================================================== */
.dine-plate { position: relative; margin-bottom: clamp(1.8rem, 3.4vw, 2.8rem); --sign-in: clamp(0rem, 2.6vw, 2.4rem); }
.dine-img {
  aspect-ratio: 21 / 9; border-radius: var(--radius-media); overflow: hidden;
  background: linear-gradient(140deg, var(--brand), #2c6e42 58%, var(--brand-deep));
  box-shadow: var(--shadow);
}
.dine-img img { width: 100%; height: 100%; object-fit: cover; }
.dine-sign {
  /* the indent is taken out of the width too, so the plate never reaches
     past the container it is set inside */
  position: relative; z-index: 2; width: min(32rem, calc(100% - var(--sign-in)));
  margin: clamp(-3.4rem, -5vw, -2.2rem) 0 0 var(--sign-in);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1.2rem, 2.4vw, 1.8rem);
}
.dine-sign .kicker { margin-bottom: .5rem; }
.dine-sign h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
/* no photograph of the room: the sign is just a heading again */
.dine-plate.bare .dine-img { display: none; }
.dine-plate.bare .dine-sign { width: auto; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }

.dine-body { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(1.5rem, 4vw, 3.4rem); align-items: start; }
.dine-body.solo { grid-template-columns: minmax(0, 1fr); max-width: 64ch; }
.dine-lede h3 { font-size: clamp(1.16rem, 1.9vw, 1.4rem); margin-bottom: .7rem; }
.dine-lede p { color: var(--ink-soft); font-size: clamp(1rem, .95rem + .3vw, 1.1rem); }
.dine-lede p + p { margin-top: .85rem; }
.dine-card { border-top: 2px solid var(--rule); padding-top: clamp(1rem, 1.8vw, 1.3rem); }
.dine-cap { display: flex; align-items: center; gap: .7rem; font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-mute); margin-bottom: .4rem; }
.dine-cap::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.dine-hours { margin-bottom: clamp(1rem, 1.8vw, 1.3rem); }
#dining-hours-text { font-family: var(--font-display); font-size: 1.06rem; font-weight: 600; line-height: 1.38; color: var(--ink); }
.dine-list { display: grid; border-top: 1px solid var(--line-soft); }
.dine-list li { position: relative; padding: .62rem 0 .62rem 1.5rem; font-size: .93rem; font-weight: 500; border-bottom: 1px solid var(--line-soft); }
.dine-list li::before { content: ""; position: absolute; left: 0; top: 1.02em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* =====================================================================
   COMMUNITY — the only band on the page selling an address rather than a
   round, so it gets a ground of its own: the neighbourhood full bleed,
   the prospectus set on paper over it.
   ===================================================================== */
#community {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  padding-top: var(--pt-band); padding-bottom: var(--pt-band);
}
#community::before { content: ""; position: absolute; z-index: 3; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--rule) 22%, var(--rule) 78%, transparent); }
.cty-media, .cty-media > * { position: absolute; inset: 0; }
#cty-fallback { background: linear-gradient(150deg, var(--brand-dark), var(--brand) 58%, var(--brand-deep)); }
#cty-img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.cty-overlay { background: linear-gradient(102deg, rgba(6, 14, 9, .88) 0%, rgba(6, 14, 9, .66) 44%, rgba(6, 14, 9, .3) 100%); }
.cty-inner { position: relative; z-index: 2; }
.cty-card {
  width: min(38rem, 100%); background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 3.2vw, 2.5rem);
}
.cty-card h2 { margin-bottom: .85rem; }
.cty-text { margin-bottom: clamp(1rem, 2vw, 1.4rem); }
.cty-text p { color: var(--ink-soft); font-size: clamp(1.02rem, .95rem + .35vw, 1.16rem); }
.cty-text p + p { margin-top: .85rem; }
.cty-features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  column-gap: clamp(1rem, 2.4vw, 2rem); border-top: 1px solid var(--line-soft);
  margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
}
.cty-features li { position: relative; padding: .55rem 0 .55rem 1.4rem; font-size: .92rem; font-weight: 500; border-bottom: 1px solid var(--line-soft); }
.cty-features li::before { content: ""; position: absolute; left: 0; top: .98em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.cty-stats {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: clamp(1.2rem, 2.4vw, 1.7rem);
}
.cty-stats > div { display: flex; flex-direction: column-reverse; padding: .75rem .6rem .8rem; border-left: 1px solid var(--line-soft); }
.cty-stats > div:first-child { border-left: 0; padding-left: 0; }
.cty-stats dt { font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .15em; color: var(--ink-mute); }
.cty-stats dd { font-family: var(--font-display); font-size: clamp(1.35rem, 2.5vw, 1.85rem); font-weight: 600; line-height: 1.08; color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: .16rem; }
/* the last rule of the card carries no bottom border into the button */
.cty-features li:last-child, .cty-card > *:last-child { margin-bottom: 0; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1180px) {
  .rates-layout { grid-template-columns: 1fr; gap: clamp(1.4rem, 3vw, 2.2rem); }
  .rates-aside .rates-note { max-width: none; }
}
@media (max-width: 1120px) {
  #nav-links {
    display: none; position: fixed; top: calc(var(--nav-h) + var(--ribbon-h)); left: 0; right: 0;
    background: rgba(9, 17, 11, .975); backdrop-filter: blur(14px); flex-direction: column; align-items: stretch; gap: 0;
    padding: .8rem 6vw 1.5rem; box-shadow: 0 20px 40px rgba(0,0,0,.3);
    max-height: calc(100svh - var(--nav-h) - var(--ribbon-h)); overflow-y: auto; font-size: 1rem;
  }
  #nav-links.open { display: flex; animation: pop .25s var(--ease); }
  #nav-links > a, #nav-links > a.nav-more, #nav-links > a.nav-auto-more { display: block; color: #fff; opacity: 1; padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 1rem; }
  #nav-links a::after { display: none; }
  .nav-cta { display: none; }
  .nav-actions::before { display: none; }
  #nav-burger { display: block; }
  .member-name { display: none; }
  #member-chip-btn { padding: .3rem; }
  #member-chip-btn .caret { display: none; }
  /* the nav CTA is gone at this width — keep a persistent booking path.
     The bar floats over the foot of the page, so the footer (not the
     booking section) is what needs the clearance. */
  #book-bar { display: flex; }
  footer { padding-bottom: calc(1.4rem + 4.6rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 980px) {
  .about-grid, .contact-grid, .book-grid { grid-template-columns: 1fr; }
  .about-media { margin-top: 0; }
  .about-frame { inset: 14px -12px -14px 14px; }
  .about-badge { left: auto; right: -6px; bottom: -16px; }
  .book-panel > form { display: block; }
  .book-submit { margin-top: 1rem; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .gallery figure:nth-child(6n+1) { grid-column: span 1; aspect-ratio: 4/3; }
}
@media (max-width: 860px) {
  .sec-head.split { grid-template-columns: 1fr; align-items: start; gap: .7rem; }
  .sec-head.split .sec-sub { padding-bottom: 0; }
  .score-sig { width: 100%; }
}
@media (max-width: 760px) {
  :root { --nav-h: 64px; }
  h1 { font-size: clamp(2.1rem, 8.6vw, 3rem); }
  #hero { justify-content: center; }
  .hero-content { padding-top: calc(var(--nav-h) + var(--ribbon-h) + 1.4rem); }
  .hero-stats { gap: 1.1rem 1.7rem; padding-bottom: 2.6rem; }
  .hero-stats div { min-width: 68px; }
  .scroll-cue { display: none; }
  .footer-inner { grid-template-columns: 1fr; gap: 1.6rem; }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-frame { display: none; }
  .about-badge { right: 0; bottom: -14px; }
  .slot-grid { grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); }
  .lb-close { top: 0; right: 0; }
  .lb-prev { left: 0; }
  .lb-next { right: 0; }
  .lb-btn { width: 40px; height: 40px; }
  #contact-form .grid-2, #member-panel .grid-2 { grid-template-columns: 1fr; }
  .record-head { gap: .8rem; }
  .avatar.lg { width: 46px; height: 46px; font-size: 1rem; }
  .record-rail { grid-template-columns: 1fr 1fr; }
  .record-rail > div:nth-child(odd) { border-left: 0; }
  .record-rail > div:nth-child(even) { border-left: 1px solid var(--line-soft); }
  .record-rail > div:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .resv { grid-template-columns: 58px minmax(0, 1fr); }
  .rd-day { font-size: 1.5rem; }
  .resv-body { padding: .7rem .8rem .6rem; }
  .log-date { min-width: 100%; }
  .log-row .tee-status { margin-left: 0; }
  .gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gallery figure { aspect-ratio: 1; }
  .gallery figcaption { display: none; }
  .card { grid-template-columns: 1fr; row-gap: .7rem; }
  .card .icon { grid-row: auto; }
  .rate strong { font-size: 1.3rem; }
}
@media (max-width: 420px) {
  .hero-badges { gap: .4rem; }
  .chip { font-size: .76rem; padding: .38rem .75rem; }
  #booking-form .grid-2 { grid-template-columns: 1fr; }
  .sig-num { padding-right: .9rem; }
  .kicker { letter-spacing: .18em; }
}

/* ---------- responsive: the four optional bands ---------- */
@media (max-width: 980px) {
  .course-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 1.8rem); }
  .dine-body { grid-template-columns: minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2rem); }
  .dine-img { aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
  .course-tab { min-width: 11rem; }
  .course-media { aspect-ratio: 16 / 9; }
  .dine-img { aspect-ratio: 4 / 3; }
  .cty-stats { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .cty-stats > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .cty-stats > div:nth-child(even) { border-left: 1px solid var(--line-soft); }
  .cty-stats > div:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 559px) {
  /* single column: the dividers become rules between rows */
  .awards li { border-left: 0; padding-left: 0; padding-right: 0; border-top: 1px solid var(--line-soft); }
  .awards li:first-child { border-top: 0; }
}
@media (max-width: 420px) {
  .course-rail dd, .cty-stats dd { font-size: 1.2rem; }
  .course-rail > div { padding-inline: .5rem; }
}

/* ---------- print ---------- */
@media print {
  #nav, #book-bar, #scroll-progress, .scroll-cue, #demo-ribbon, .modal, .lightbox { display: none !important; }
  body { background: #fff; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  [data-stagger] { opacity: 1; transform: none; }
  .btn:hover, .card:hover, .rate:hover, .tier:hover, .quote:hover { transform: none; }
}

/* ---------- fatal state (unknown club / API down) ---------- */
.fatal-body { background: linear-gradient(165deg, var(--brand-deep), var(--brand-dark) 60%, #0a1a10); min-height: 100svh; display: grid; place-items: center; padding: 2rem; }
.fatal { text-align: center; max-width: 44ch; color: #e8ede9; }
.fatal svg { width: 54px; height: 54px; color: var(--accent); margin: 0 auto 1.6rem; }
.fatal h1 { color: #fff; font-size: clamp(1.7rem, 4vw, 2.5rem); margin-bottom: .8rem; }
.fatal p { color: rgba(255,255,255,.72); margin-bottom: 1.8rem; }
.fatal button {
  background: linear-gradient(135deg, var(--accent), var(--accent-soft)); color: var(--accent-ink);
  font-weight: 600; padding: .8rem 1.9rem; border-radius: 999px; transition: transform .2s var(--ease);
}
.fatal button:hover { transform: translateY(-2px); }