/* Site styles — extends colors_and_type.css */

* { box-sizing: border-box; }
/* overflow-x: clip (NOT hidden) — hidden turns body into a scroll container,
   which silently breaks position:sticky (the ZoomHero stage). clip gives the
   same horizontal-bleed protection without creating a scroller. */
html, body { margin: 0; padding: 0; overflow-x: clip; }
.page-shell { overflow-x: clip; }
body {
  background: var(--color-bone);
  color: var(--color-ink);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
img { display: block; max-width: 100%; }

/* --- Keyboard focus ring (WCAG 2.4.7) — champagne, the sanctioned hairline
   gold (never pennant-yellow). Only shows for keyboard/AT users, not mouse. --- */
:focus-visible {
  outline: 2px solid var(--color-champagne);
  outline-offset: 3px;
  border-radius: 2px;
}
/* brighter ring where the backdrop is dark (satin, hero, light-on-photo header) */
.surface-satin :focus-visible,
.site-footer :focus-visible,
.zoom-copy :focus-visible,
.page-hero :focus-visible,
.full-bleed-quote :focus-visible,
.splash-root :focus-visible,
.site-header.is-light :focus-visible {
  outline-color: var(--color-champagne-bright);
}

/* --- Reveal-on-scroll — clean fly-in (rise + fade, no zoom/blur) --- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms var(--ease-club),
              transform 1100ms var(--ease-club);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Page transitions --- */
.page-shell {
  animation: pageFade 700ms var(--ease-club);
}
@keyframes pageFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Eyebrow rule (pennant accent) --- */
.eyebrow-rule {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-muted);
}
.eyebrow-rule::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--color-champagne);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: var(--type-button);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-button);
  transition: background 280ms var(--ease-club),
              color 280ms var(--ease-club),
              border-color 280ms var(--ease-club),
              transform 280ms var(--ease-club),
              box-shadow 280ms var(--ease-club);
  border: 1px solid transparent;
  padding: 16px 32px;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 120ms; }
.btn img { transition: transform 320ms var(--ease-club); }
.btn:hover img { transform: translateX(4px); }
.btn-primary {
  background: var(--color-club-navy);
  color: var(--color-bone);
}
.btn-primary:hover {
  background: var(--color-ink);
  box-shadow: 0 12px 28px -12px rgba(15, 25, 40, 0.55);
}
.btn-ghost {
  background: transparent;
  color: var(--color-club-navy);
  border-color: var(--color-club-navy);
}
.btn-ghost:hover {
  border-color: var(--color-pennant-yellow);
  color: var(--color-club-navy);
  box-shadow: 0 8px 24px -12px rgba(15, 25, 40, 0.35);
}
.btn-ghost-light {
  background: transparent;
  color: var(--color-bone);
  border-color: rgba(245,241,232,0.5);
}
.btn-ghost-light:hover {
  border-color: var(--color-pennant-yellow);
  color: var(--color-pennant-yellow);
  box-shadow: 0 8px 24px -12px rgba(232, 218, 112, 0.35);
}

/* --- Arrow link --- */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: var(--type-button);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  padding-bottom: 8px;
  border-bottom: 1px solid currentColor;
  transition: gap 280ms var(--ease-club), color 280ms var(--ease-club);
}
.arrow-link img {
  height: 9px;
  transition: transform 320ms var(--ease-club);
}
.arrow-link:hover { gap: 18px; }
.arrow-link:hover img { transform: translateX(4px); }

/* Landing arrow — a gentle, living horizontal nudge (per meeting: animate
   directional arrows on the landing page). Pauses on hover; off for reduced-motion. */
.arrow-link-bob img { animation: arrowBob 2.4s var(--ease-club) infinite; }
.arrow-link-bob:hover img { animation: none; }
@keyframes arrowBob {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .arrow-link-bob img { animation: none; }
}

/* --- Section spacing --- */
.section { padding: var(--space-section) var(--gutter); }
.section-tight { padding: 80px var(--gutter); }
.container { max-width: var(--max-content); margin: 0 auto; }
.container-narrow { max-width: 880px; margin: 0 auto; }

/* Surface — each exposes --frame-color so painted photo edges blend into it */
.surface-bone { background: var(--color-bone); color: var(--color-ink); --frame-color: var(--color-bone); }
.surface-white { background: var(--color-white); color: var(--color-ink); --frame-color: var(--color-white); }
.surface-navy {
  background: var(--color-club-navy);
  color: var(--color-bone);
  --fg: var(--color-bone);
  --fg-muted: rgba(245,241,232,0.72);
  --border: rgba(245,241,232,0.16);
  --frame-color: var(--color-club-navy);
}
.surface-bone-95 { background: var(--color-bone-95); color: var(--color-ink); --frame-color: var(--color-bone-95); }

/* ============================================================
   Satin & Sunlight — the jewel-box dark chapter. Pure-CSS navy satin:
   a 115° fold gradient + a specular bloom, so the surface reads as
   silk, never flat navy. Use sparingly (membership / closing moments).
   ============================================================ */
/* THE satin itself is painted ONCE, on a viewport-fixed sheet behind the
   whole site (body::before). Satin sections and the footer are transparent
   windows onto that one sheet, so adjacent satin chapters and the footer
   can never show a seam — on any browser, desktop or mobile. (This replaces
   the old per-element gradients + background-attachment:fixed approach,
   which Safari drops and which restarted per element on mobile.) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 72% 8%, rgba(98, 134, 176, 0.20), transparent 60%),
    linear-gradient(115deg,
      var(--color-vault) 0%,
      var(--color-satin-mid) 38%,
      var(--color-satin-ridge) 50%,
      #142639 62%,
      #060F1B 100%);
}
.surface-satin {
  position: relative;
  overflow: hidden;
  background: transparent; /* window onto the body::before satin sheet */
  color: var(--color-bone);
  --fg: var(--color-bone);
  --fg-muted: rgba(245, 241, 232, 0.74);
  --border: rgba(201, 165, 92, 0.25);
  --frame-color: var(--color-vault);
}

/* ============================================================
   ZoomHero — cinematic dolly-in. Two modes:
   auto  — a normal 100dvh hero; the clip plays itself, then the
           scrim fades up and the copy staggers in.
   scrub — a 280vh track pins the stage while scroll drives the
           video playhead; words arrive over the last 15%.
   ============================================================ */
.zoom-hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--color-ink); /* behind frame cross-fades */
}
.zoom-track { position: relative; height: 280vh; }
.zoom-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--color-ink);
}
@media (prefers-reduced-motion: reduce) {
  .zoom-track { height: auto; }
  .zoom-stage { position: relative; }
}
.zoom-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: opacity, transform;
}
/* Crisp settle still — fades in over the video when the dolly comes to rest,
   so the read-state is sharp rather than a compression-soft paused frame. */
.zoom-settle {
  z-index: 1;
  opacity: 0;
  transition: opacity 420ms var(--ease-club);
}
.zoom-settle.is-on { opacity: 1; }
.zoom-scrim {
  z-index: 2;
  opacity: 0;
  transition: opacity 700ms var(--ease-club);
}
.zoom-scrim.is-on { opacity: 1; }
.zoom-copy {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  padding: var(--header-height) var(--gutter) 96px;
  color: var(--color-bone);
  animation: fadeIn 520ms var(--ease-club);
}
@media (max-width: 600px) {
  .zoom-copy { padding: var(--header-height) var(--gutter) 64px; }
}
/* The Sheen — a diagonal band of light that drifts over the satin as you
   scroll (wrap in <Parallax> for the scroll-linked travel). The vertical
   mask keeps the lit band away from the element's edges, so it can never
   be sliced off at a section/footer boundary (the old seam line). */
.satin-sheen {
  position: absolute;
  inset: -30% 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 42%,
    rgba(120, 150, 185, 0.14) 50%,
    transparent 58%);
  -webkit-mask-image: linear-gradient(180deg, transparent 28%, #000 42% 58%, transparent 72%);
          mask-image: linear-gradient(180deg, transparent 28%, #000 42% 58%, transparent 72%);
}
.surface-satin > .container,
.surface-satin > .satin-content { position: relative; z-index: 2; }

/* Foil-framed photos on satin: double champagne frame, like an object
   set in a vitrine. */
.surface-satin .callout-img-lg {
  border: 1px solid rgba(201, 165, 92, 0.55);
}
.surface-satin .callout-img-lg::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(201, 165, 92, 0.35);
  z-index: 3;
  pointer-events: none;
}

/* ============================================================
   Chapter folio — "No. II — The Course" section marker with a
   trailing champagne hairline. The editorial spine of the page.
   ============================================================ */
.folio {
  display: flex;
  align-items: center;
  gap: 20px;
  font: 500 11px/1 var(--font-body);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin-bottom: 56px;
}
.folio::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 165, 92, 0.5), transparent);
}
.surface-satin .folio { color: var(--color-champagne-bright); }

/* Centered champagne hairline — under centered headlines (satin CTA) */
.champagne-rule {
  display: block;
  width: 96px;
  height: 1px;
  margin: 36px auto 0;
  background: linear-gradient(90deg, transparent, var(--color-champagne) 25% 75%, transparent);
}

/* Primary CTA on satin — the one sanctioned pennant-yellow moment per page */
.btn-gold {
  background: transparent;
  color: var(--color-pennant-yellow);
  border-color: rgba(232, 218, 112, 0.6);
}
.btn-gold:hover {
  background: rgba(232, 218, 112, 0.08);
  border-color: var(--color-pennant-yellow);
  color: var(--color-pennant-yellow);
}

/* Display — Satin & Sunlight scale: lighter and smaller than v1 (client
   note: sizes felt too large); quiet serif does the talking. */
.display-xl { font: 500 clamp(48px, 6vw, 92px)/1.04 var(--font-display); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.display-lg { font: 500 clamp(36px, 4.2vw, 60px)/1.08 var(--font-display); letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.display-md { font: 500 clamp(30px, 3vw, 46px)/1.12 var(--font-display); letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.display-sm { font: 500 clamp(24px, 2vw, 32px)/1.2 var(--font-display); letter-spacing: -0.01em; margin: 0; text-wrap: balance; }

.lede { font: 400 clamp(18px, 1.4vw, 22px)/1.55 var(--font-body); color: var(--fg-muted); max-width: 62ch; margin: 0; text-wrap: pretty; }
.body-text { font: 400 17px/1.7 var(--font-body); color: var(--fg-muted); margin: 0; max-width: 60ch; text-wrap: pretty; }

/* Hero sub-paragraph — shared so the phone type ramp can reach it
   (page heroes previously hard-coded font inline, bypassing responsive sizing) */
.hero-sub { font: 400 22px/1.5 var(--font-body); }
.hero-sub--home { font-size: 20px; }

.eyebrow {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-muted);
  margin: 0;
}

/* --- Photo hover --- */
.photo-frame {
  overflow: hidden;
  border-radius: var(--radius-card);
  position: relative;
}
.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease-club), filter 600ms var(--ease-club);
}
.photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,25,40,0) 60%, rgba(15,25,40,0.18));
  opacity: 0;
  transition: opacity 480ms var(--ease-club);
  pointer-events: none;
}
.photo-frame:hover img { filter: saturate(1.05); }
.photo-frame:hover::after { opacity: 1; }

/* ============================================================
   Brand motif — recolorable SVG silhouette (grass / pipe-plant).
   Used as the soft "artsy" graphic layered BEHIND photo callouts,
   the way the reference site uses its brush stroke.
   Set --motif to the svg url; color drives the tint.
   ============================================================ */
.motif {
  background-color: currentColor;
  -webkit-mask-image: var(--motif);
          mask-image: var(--motif);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
          mask-position: center bottom;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* ============================================================
   Layered photo callout — the signature module.
   Big photo + a smaller photo offset over its corner in a white
   matte, with the brand motif behind. On scroll-in (.is-in) the
   small photo slides up, an accent rule draws, and the motif rises.
   .flipped mirrors it so consecutive sections never repeat.
   ============================================================ */
.callout { position: relative; padding: 32px 0; }
.callout-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 88px;
  align-items: center;
  max-width: var(--max-content);
  margin: 0 auto;
}
.callout.flipped .callout-inner { grid-template-columns: 0.92fr 1.08fr; }
.callout-media { order: 1; }
.callout-text  { order: 2; }
.callout.flipped .callout-media { order: 2; }
.callout.flipped .callout-text  { order: 1; }

/* Directional reveal — media slides in from the photo side, text from the
   opposite side, on scroll-in. Composes with the photo's parallax drift
   (that lives on a child wrapper, so transforms don't collide). */
.callout-media, .callout-text {
  opacity: 0;
  transition: opacity 1000ms var(--ease-club), transform 1100ms var(--ease-club);
  will-change: opacity, transform;
}
.callout-media { transform: translateX(-46px); }
.callout-text  { transform: translateX(46px); }
.callout.flipped .callout-media { transform: translateX(46px); }
.callout.flipped .callout-text  { transform: translateX(-46px); }
.callout.is-in .callout-media,
.callout.is-in .callout-text { opacity: 1; transform: none; }
.callout-text { transition-delay: 120ms; } /* text follows the image in */
@media (prefers-reduced-motion: reduce) {
  .callout-media, .callout-text { opacity: 1; transform: none; transition: none; }
}

/* Media: large image + offset small matted image */
.callout-media { position: relative; }
.callout-img-lg {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 4 / 3;
}
/* scroll-linked depth: the photo drifts a few px within its frame as the
   callout passes through the viewport. Overscanned so an edge never shows. */
.callout-img-drift,
.img-drift {
  position: absolute;
  left: 0; right: 0;
  top: -8%;
  height: 116%;
}
/* generic drift wrapper inside any .photo-frame (pillars, three-panel, news) */
.img-drift img { width: 100%; height: 100%; object-fit: cover; }
.callout-img-lg img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.callout-img-sm {
  position: absolute;
  z-index: 3;
  right: -40px; bottom: -52px;
  width: 50%;
  aspect-ratio: 1 / 1;
  padding: 12px;                 /* white matte border */
  background: var(--color-white);
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
  opacity: 0;
  transform: translateY(52px);
  transition: transform 1100ms var(--ease-club) 150ms, opacity 900ms var(--ease-club) 150ms;
}
.callout.flipped .callout-img-sm { right: auto; left: -40px; }
/* bare variant — no white matte (club 6/15: drop the white border) */
.callout-img-sm--bare { padding: 0; background: transparent; }
.callout-img-sm img { width: 100%; height: 100%; object-fit: cover; display: block; }
.callout.is-in .callout-img-sm { opacity: 1; transform: translateY(0); }

/* (Ornament layers removed per client direction 6/9: plant graphics —
   corner flower / vines / motif backdrops — and all brush strokes
   (heading accents, dividers, footer flourish). Assets remain in
   /assets for possible revival.) */
.site-footer { position: relative; overflow: hidden; }
.site-footer .container { position: relative; z-index: 1; }

/* Brand motif behind the TEXT column (not the photo) — default callout
   has text on the right, so the motif sits on the right half; flipped
   callouts have text on the left, so the motif moves to the left half. */
.callout-bg {
  position: absolute;
  z-index: 0;
  left: 48%; right: -6%; top: 5%; bottom: -8%;
  color: rgba(27, 47, 68, 0.14);
  pointer-events: none;
  opacity: 0;
  transform: translateY(46px);
  transition: opacity 1500ms var(--ease-club), transform 1600ms var(--ease-club);
}
.callout.flipped .callout-bg {
  left: -6%; right: 48%;
}
/* Pipe motif sits centered behind the text column */
.callout-bg.motif-pipe {
  -webkit-mask-position: center;
          mask-position: center;
}
/* Grass reeds: drop them to the very bottom of the section (extend past the
   callout into the section's lower padding) and keep them faint */
.callout-bg.motif-grass {
  top: auto;
  bottom: -96px;
  height: 320px;
  -webkit-mask-position: center bottom;
          mask-position: center bottom;
  color: rgba(27, 47, 68, 0.08);
}
.surface-navy .callout-bg { color: rgba(245, 241, 232, 0.12); }
.surface-navy .callout-bg.motif-grass { color: rgba(245, 241, 232, 0.07); }
.callout.is-in .callout-bg { opacity: 1; transform: translateY(0); }
/* Grass fades in to a lower max opacity than pipe */
.callout.is-in .callout-bg.motif-grass { opacity: 0.65; }

/* Text column: an accent rule that draws on scroll-in.
   Light sections only (club 6/11): the vertical line is the beige-section
   differentiator — dark satin chapters go without it. */
.callout-rule {
  width: 1px;
  height: 0;
  background: var(--color-champagne);
  margin-bottom: 28px;
  transition: height 1300ms var(--ease-club) 250ms;
}
.callout.is-in .callout-rule { height: 64px; }
.surface-satin .callout-rule { display: none; }

@media (max-width: 960px) {
  .callout-inner,
  .callout.flipped .callout-inner { grid-template-columns: 1fr; gap: 24px; }
  /* Stacked layout: reveal vertically, not from the side. The horizontal
     translateX slide left a bone gap beside the image as it animated in
     (the "white border on the sides of an image" from the 6/15 review). */
  .callout-media, .callout-text,
  .callout.flipped .callout-media, .callout.flipped .callout-text { order: 0; transform: translateY(24px); }
  .callout-img-sm { width: 56%; right: 12px; bottom: -36px; }
  .callout.flipped .callout-img-sm { left: auto; right: 12px; }
  .callout-text { padding-top: 56px; }
  /* motif sat behind the text column on desktop; on stacked layouts pull it
     fully inside so it can't bleed past the viewport (overflow backstop) */
  .callout-bg, .callout.flipped .callout-bg { left: 0; right: 0; top: 0; bottom: 0; }
  /* Membership pillars motif: push right + fade so it stays decorative behind copy */
  .section-tight .callout-bg.motif { inset: 0 -20% 0 75%; opacity: 0.28; }
}
@media (prefers-reduced-motion: reduce) {
  .callout-img-sm, .callout-bg { opacity: 1; transform: none; transition: none; }
  .callout-rule { height: 64px; transition: none; }
}

/* --- Photo scrim --- */
.photo-scrim {
  position: absolute;
  inset: 0;
  background: var(--photo-scrim);
  pointer-events: none;
}

/* ============================================================
   West Palm Beach golden-hour wash — a slow sunset gradient that
   drifts across a full-bleed photo via soft-light, evoking dusk
   over the Intracoastal. Subtle; sits over the photo, under the scrim.
   ============================================================ */
.wpb-sunset {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(118deg,
      rgba(236, 190, 110, 0.55) 0%,
      rgba(214, 120, 86, 0.42) 30%,
      rgba(126, 156, 184, 0.28) 60%,
      rgba(27, 47, 68, 0.5) 100%);
  background-size: 220% 220%;
  mix-blend-mode: soft-light;
  animation: wpbSunsetDrift 28s ease-in-out infinite alternate;
}
@keyframes wpbSunsetDrift {
  from { background-position: 0% 20%; }
  to   { background-position: 100% 80%; }
}
@media (prefers-reduced-motion: reduce) {
  .wpb-sunset { animation: none; }
}

/* --- Hero (page top) --- */
.page-hero {
  position: relative;
  min-height: 100vh;
  background-position: center;
  background-size: cover;
  color: var(--color-bone);
  display: flex;
  align-items: flex-end;
  padding: var(--header-height) var(--gutter) 96px;
}
.page-hero { min-height: 100dvh; } /* iOS toolbar-safe; vh above is the fallback */
.page-hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
}
.page-hero-short {
  min-height: 72vh;
  min-height: 72dvh;
}

/* --- Stat strip --- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-mist);
  border-bottom: 1px solid var(--color-mist);
}
/* 3-up variant (Racquets court counts) — responsive, no inline grid lock */
.stat-row-3 { grid-template-columns: repeat(3, 1fr); }
.stat-cell {
  padding: 56px 32px;
  border-right: 1px solid var(--color-mist);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.stat-cell:last-child { border-right: 0; }
.stat-num {
  font: 500 clamp(48px, 5vw, 72px)/1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--color-club-navy);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat-label {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-navy-70);
}

/* --- Editorial block grid --- */
.editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: center;
}
.editorial-reverse { direction: rtl; }
.editorial-reverse > * { direction: ltr; }

/* --- Tier columns --- */
.tier-row {
  display: grid;
  grid-template-columns: repeat(var(--tier-cols, 5), 1fr);
  /* Five shared rows — folio, name, rule, body, audience. Each column is a
     subgrid of them, so the body block is the same height in every column and
     the italic audience lines all start on one line (club 7/31). */
  grid-template-rows: auto auto auto 1fr auto;
  gap: 0;
}
.tier-col {
  padding: 48px 32px;
  border-right: 1px solid var(--color-mist);
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  row-gap: 20px;
  min-height: 480px;
}
.tier-col:last-child { border-right: 0; }
.tier-col h3 {
  font: 500 26px/1.15 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--color-club-navy);
  margin: 0;
  text-wrap: balance;
}
.tier-col p {
  font: 400 15px/1.65 var(--font-body);
  color: var(--color-navy-70);
  margin: 0;
}

/* ============================================================
   Tier accordion — membership categories (club 6/11): expandable
   rows for longer verbiage; champagne hairline separators; smooth
   CSS collapse via the grid-rows technique.
   ============================================================ */
.accordion { border-top: 1px solid rgba(201, 165, 92, 0.35); }
.acc-item { border-bottom: 1px solid rgba(201, 165, 92, 0.35); }
.acc-head {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 28px;
  padding: 30px 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.acc-num {
  font: 500 11px/1 var(--font-body);
  letter-spacing: 0.22em;
  color: var(--color-navy-40);
  min-width: 64px;
}
.acc-name {
  font: 500 28px/1.15 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--color-club-navy);
  flex: 1;
  text-wrap: balance;
}
.acc-tag {
  font: 500 11px/1 var(--font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-champagne);
}
.acc-chevron {
  font: 400 22px/1 var(--font-display);
  color: var(--color-champagne);
  transition: transform 420ms var(--ease-club);
}
.acc-item.open .acc-chevron { transform: rotate(45deg); }
.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 560ms var(--ease-club);
}
.acc-item.open .acc-panel { grid-template-rows: 1fr; }
.acc-panel-inner { overflow: hidden; min-height: 0; }
.acc-body {
  /* left edge matches the category title exactly: head padding + num + gap
     (club 7/31: "make the body text left aligned with the titles") */
  padding: 0 8px 34px calc(8px + 64px + 28px);
  max-width: 720px;
}
.acc-body p {
  font: 400 16px/1.7 var(--font-body);
  color: var(--color-navy-70);
  margin: 0;
}
.acc-body .acc-audience {
  margin-top: 14px;
  font: 400 13px/1.5 var(--font-body);
  font-style: italic;
  color: var(--color-navy-70);
}
@media (max-width: 600px) {
  /* knock the membership type sizes down on phones (club 6/15) */
  .acc-head { gap: 14px; padding: 22px 4px; }
  .acc-num { min-width: 32px; font-size: 10px; }
  .acc-name { font-size: 19px; }
  .acc-tag { display: none; }
  .acc-body { padding-left: calc(32px + 14px); }
  .acc-body p { font-size: 15px; }
  .acc-chevron { font-size: 18px; }
}

/* ============================================================
   RevealGallery — Hideaway-style triptych (club 6/11, Golf page):
   Act I — a centered SQUARE window opens from its own center
   (clip-path only, nothing scales). Act II — the two side panels
   glide in toward the square. Then the triptych sifts through the
   image set with slow offset cross-fades.
   ============================================================ */
.reveal-gallery {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  /* square is sized from height; cap by width too so portrait viewports
     (e.g. iPad Pro portrait, >960px wide) don't starve the wings to slivers */
  height: min(62vh, 46vw);
  min-height: 400px;
}
.rg-panel { position: relative; overflow: hidden; }
.rg-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1200ms var(--ease-club);
}
.rg-panel img.active { opacity: 1; }
/* Act I — the square opens from its center */
.rg-square {
  height: 100%;
  aspect-ratio: 1 / 1;
  clip-path: inset(50%);
  transition: clip-path 1300ms var(--ease-club);
}
.reveal-gallery.is-open .rg-square { clip-path: inset(0); }
/* Act II — the wings glide in toward the square */
.rg-side {
  opacity: 0;
  transition: opacity 900ms var(--ease-club) 750ms,
              transform 1100ms var(--ease-club) 750ms;
}
.rg-left  { transform: translateX(-48px); }
.rg-right { transform: translateX(48px); }
.reveal-gallery.is-open .rg-side { opacity: 1; transform: translateX(0); }

/* Continuous mode — three contiguous windows onto ONE image: equal thirds, no
   gap, each <img> sized to the full gallery and offset by a third, so once the
   pieces assemble they form a single picture spanning the section. */
.reveal-gallery.is-continuous { grid-template-columns: 1fr 1fr 1fr; gap: 0; }
.reveal-gallery.is-continuous .rg-square { aspect-ratio: auto; height: 100%; width: auto; }
.reveal-gallery.is-continuous .rg-panel img { inset: 0 auto 0 0; width: 300%; }
.reveal-gallery.is-continuous .rg-left   img { left: 0; }
.reveal-gallery.is-continuous .rg-square img { left: -100%; }
.reveal-gallery.is-continuous .rg-right  img { left: -200%; }

@media (max-width: 960px) {
  .reveal-gallery { height: 46vmin; min-height: 320px; gap: 10px; }
  .reveal-gallery.is-continuous { gap: 0; }
}
@media (max-width: 600px) {
  /* phones: the square IS the gallery — no room for wings */
  .reveal-gallery { display: block; height: auto; min-height: 0; }
  .rg-side { display: none; }
  .rg-square { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  /* continuous on phones: one full image (no slicing) */
  .reveal-gallery.is-continuous .rg-square { aspect-ratio: 16 / 10; height: auto; width: 100%; }
  .reveal-gallery.is-continuous .rg-square img { left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .rg-square { clip-path: none; transition: none; }
  .rg-side { opacity: 1; transform: none; transition: none; }
  .rg-panel img { transition: none; }
}

/* ============================================================
   Admin "In the News" editor — responsive story card
   ============================================================ */
.admin-card {
  border: 1px solid var(--color-mist);
  background: var(--color-white);
  padding: 28px;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 28px;
  align-items: start;
}
.admin-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) {
  /* stack the photo over the fields, and the tag/date pair into one column */
  .admin-card { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .admin-field-row { grid-template-columns: 1fr; }
}

/* ============================================================
   PhotoGrid — grid of smaller thumbnails (club 6/15 "like the mock")
   ============================================================ */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.photo-grid-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 2px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 800ms var(--ease-club), transform 900ms var(--ease-club);
}
.photo-grid-cell.is-in { opacity: 1; transform: none; }
.photo-grid-cell img { width: 100%; height: 100%; object-fit: cover; transition: opacity 300ms var(--ease-club); }
.photo-grid-cell:hover img { opacity: 0.88; }
@media (max-width: 960px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .photo-grid-cell { opacity: 1; transform: none; transition: none; }
}

/* --- Pull quote / full bleed --- */
.full-bleed-quote {
  position: relative;
  min-height: 80vh;
  min-height: 80dvh;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px var(--gutter);
  color: var(--color-bone);
}

/* Header */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  /* The bar is filled from the first paint (club 8/3): club navy at the top of
     the page, easing to the bone bar once scrolled — never transparent. */
  background: var(--color-club-navy);
  border-bottom: 1px solid transparent;
  transition: background 420ms var(--ease-club),
              border-color 420ms var(--ease-club),
              backdrop-filter 320ms var(--ease-club),
              height 360ms var(--ease-club),
              transform 460ms var(--ease-club);
}
.site-header.is-scrolled {
  background: rgba(245,241,232,0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-mist);
  height: 64px;                 /* slim once scrolled */
}
/* hide on scroll-down, reveal on scroll-up */
.site-header.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .site-header.is-hidden { transform: none; }
}
.site-header.is-light { color: var(--color-bone); }
.site-header.is-scrolled.is-light,
.site-header.is-scrolled { color: var(--color-club-navy); }

/* Nav menu */
.nav-link {
  font: var(--type-nav);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
  padding: 6px 0;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right 280ms var(--ease-club);
}
.nav-link:hover::after,
.nav-link.is-active::after { right: 0; }
.nav-link.is-active { color: inherit; }

/* Footer */
.site-footer {
  /* Satin carried through the footer — a transparent window onto the same
     body::before sheet the satin sections show, so a satin chapter above
     flows into the footer as one uninterrupted fabric (no seam line). */
  background: transparent;
  color: rgba(245,241,232,0.78);
  padding: 72px var(--gutter) 48px;
}

/* Form fields */
.field-label {
  display: block;
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-navy-70);
  margin-bottom: 10px;
}
/* Wrap input + animated underline. The visible bottom-border is on .field-input;
   .field-input::after isn't possible on inputs, so we use a label-level pseudo
   accent via a wrapping label.field-wrap when present, and otherwise rely on
   the input's own border. */
.field-input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--color-mist);
  background: transparent;
  font: 400 17px/1.5 var(--font-body);
  color: var(--color-ink);
  padding: 12px 0;
  outline: none;
  border-radius: 0;
  transition: border-color 200ms var(--ease-club);
  position: relative;
}
.field-input:focus { border-bottom-color: var(--color-club-navy); }
.field-input::placeholder {
  color: var(--color-navy-40);
  transition: opacity 240ms var(--ease-club), transform 240ms var(--ease-club);
}
.field-input:focus::placeholder { opacity: 0.4; transform: translateX(2px); }

/* A label wrapping a field can host an animated underline that grows from center
   on focus-within. Pages keep using <label><span class="field-label" /><input/></label>
   so applying focus-within styles works without markup changes. */
label:has(.field-input) { position: relative; display: block; }
label:has(.field-input)::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 0;
  height: 1px;
  background: var(--color-club-navy);
  transition: left 320ms var(--ease-club), right 320ms var(--ease-club);
  pointer-events: none;
}
label:has(.field-input:focus)::after { left: 0; right: 0; }

/* ============================================================
   Header — desktop nav vs. mobile hamburger
   ============================================================ */
.site-header-nav-desktop { display: flex; align-items: center; gap: 40px; }
.site-header-toggle { display: none; }

/* --- Intermediate widths (incl. browser zoom, which shrinks the effective
   viewport) — the nav used to wrap onto 2-3 lines and squash the wordmark
   (club 7/31: "fix the display when zoomed in"). Brand never shrinks, labels
   never break, and the nav tightens before it runs out of room; below 1100px
   it hands off to the hamburger. --- */
.site-header-brand { flex-shrink: 0; }
.site-header-logo, .site-header-wordmark { flex: none; }
.nav-link { white-space: nowrap; }

/* Secondary destinations (club 8/3): same single row as the primary links, but
   set quieter and separated by a champagne hairline, so the eye reads two
   groups rather than seven equal items. Reads as hierarchy, not as a stack. */
.nav-secondary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-left: 22px;
  position: relative;
}
.nav-secondary::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 15px;
  background: var(--color-champagne);
  opacity: 0.55;
}
.nav-secondary .nav-link {
  font-size: 11px;
  letter-spacing: 0.16em;
  opacity: 0.7;
  transition: opacity 260ms var(--ease-club);
}
.nav-secondary .nav-link:hover,
.nav-secondary .nav-link.is-active { opacity: 1; }

@media (max-width: 1340px) {
  .site-header-nav-desktop { gap: 26px; }
  .nav-link { letter-spacing: 0.1em; }
  .nav-secondary { gap: 16px; padding-left: 18px; }
}
/* Hand off to the hamburger while the row still has real breathing room —
   below this the wordmark and nav start crowding each other. Kept in its own
   query (not the 960 layout block) so page layout doesn't shift with it. */
@media (max-width: 1240px) {
  .site-header-nav-desktop { display: none; }
  .site-header-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    width: 44px;
    height: 44px;
    padding: 0;
    position: relative;
    z-index: 61;  /* keep the hamburger/X toggle clickable above the raised menu */
  }
}

.hamburger-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22px; height: 16px;
}
.hamburger-icon span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  transition: transform 280ms var(--ease-club), opacity 200ms var(--ease-club);
  transform-origin: center;
}
.hamburger-icon.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-icon.is-open span:nth-child(2) { opacity: 0; }
.hamburger-icon.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu overlay */
.site-header-menu {
  position: fixed;
  inset: 0;
  z-index: 60;  /* above the fixed header (50) so the dim backdrop covers the top strip */
  background: rgba(15, 25, 40, 0.55);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: flex-end;
  animation: fadeIn 220ms var(--ease-club);
}
.site-header-menu-inner {
  width: min(420px, 100%);
  height: 100%;
  /* mobile drawer wears the same satin, same 115° fold as everywhere else */
  background:
    radial-gradient(110% 70% at 72% 8%, rgba(98, 134, 176, 0.18), transparent 60%),
    linear-gradient(115deg,
      var(--color-vault) 0%,
      var(--color-satin-mid) 38%,
      var(--color-satin-ridge) 50%,
      #142639 62%,
      #060F1B 100%);
  color: var(--color-bone);
  padding: calc(var(--header-height) + 24px) 32px 48px;
  overflow-y: auto;
  animation: slideInRight 320ms var(--ease-club);
}
@keyframes slideInRight {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.mobile-nav-link {
  font: 500 24px/1.2 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--color-bone);
  text-decoration: none;
  cursor: pointer;
  padding: 8px 0;
  border-bottom: 1px solid rgba(245,241,232,0.12);
  display: block;
}
.mobile-nav-link.is-active { color: var(--color-champagne-bright); }
.mobile-nav-login {
  margin-top: 24px;
  font: 500 13px/1 var(--font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid rgba(245,241,232,0.5);
  border-bottom: 1px solid rgba(245,241,232,0.5);
  border-radius: 2px;
  padding: 16px 24px;
  text-align: center;
}

/* ============================================================
   Footer — explicit grid class so mobile rules can override
   ============================================================ */
.site-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 64px;
  align-items: flex-start;
}
.site-footer-bottom {
  margin-top: 80px;
  padding-top: 28px;
  border-top: 1px solid rgba(245,241,232,0.16);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 400 12px/1.4 var(--font-body);
  color: rgba(245,241,232,0.7); /* was 0.45 — lift small legal text to ~4.5:1 on satin */
  letter-spacing: 0.04em;
  flex-wrap: wrap;
  gap: 16px;
}

/* ============================================================
   Membership inquiry form — class hooks so mobile can override
   ============================================================ */
.inquiry-form {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr 1fr;
}
.inquiry-form .span-2 { grid-column: 1 / -1; }
/* the appearance:none select strips its native chevron — restore a champagne one */
.inquiry-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A55C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 12px;
  padding-right: 24px;
}
.inquiry-page-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 96px;
  align-items: flex-start;
}
.lede-page-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 96px;
  align-items: flex-start;
}
.three-up {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.three-up-tight { gap: 64px; }
.four-up-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-mist);
  border-bottom: 1px solid var(--color-mist);
}
.four-up-cell {
  padding: 48px 28px;
  border-right: 1px solid var(--color-mist);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.four-up-cell:last-child { border-right: 0; }

/* ============================================================
   Three-panel slideshow (Location)
   ============================================================ */
.threepanel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.tp-cell {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 2px;
}
.tp-cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: tpFade 800ms var(--ease-club);
}
@keyframes tpFade { from { opacity: 0; } to { opacity: 1; } }
.tp-caption {
  position: absolute;
  left: 16px; right: 16px; bottom: 14px;
  font: 500 11px/1.2 var(--font-body);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-bone);
  text-shadow: 0 1px 8px rgba(15,25,40,0.6);
}
.threepanel-nav {
  display: flex; gap: 12px; justify-content: flex-end;
  margin-top: 20px;
}
.threepanel-nav button {
  width: 46px; height: 46px;
  border: 1px solid var(--color-mist);
  background: transparent;
  color: var(--color-club-navy);
  border-radius: 999px;
  cursor: pointer;
  font-size: 16px;
  transition: all 240ms var(--ease-club);
}
.threepanel-nav button:hover { border-color: var(--color-club-navy); background: var(--color-club-navy); color: var(--color-bone); }

/* ============================================================
   Instagram strip (homepage widget placeholder)
   ============================================================ */
.ig-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 16px; margin-bottom: 28px;
}
.ig-handle {
  font: 500 13px/1 var(--font-body);
  letter-spacing: 0.12em;
  color: var(--color-club-navy);
  text-decoration: none;
}
.ig-handle:hover { color: var(--color-navy-70); }
.ig-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.ig-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 2px;
  display: block;
}
.ig-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 800ms var(--ease-club), opacity 240ms var(--ease-club);
}
.ig-tile:hover img { opacity: 0.85; }

/* ============================================================
   Splash — staged fade-in (logo fades first, per meeting)
   ============================================================ */
.splash-stage > * {
  opacity: 0;
  animation: splashRise 900ms var(--ease-club) forwards;
}
.splash-stage > *:nth-child(1) { animation-delay: 120ms; animation-duration: 1100ms; }
.splash-stage > *:nth-child(2) { animation-delay: 360ms; }
.splash-stage > *:nth-child(3) { animation-delay: 480ms; }
.splash-stage > *:nth-child(4) { animation-delay: 600ms; }
.splash-stage > *:nth-child(5) { animation-delay: 760ms; }
@keyframes splashRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .splash-stage > * { opacity: 1; animation: none; }
}

/* ============================================================
   Responsive — tablet
   ============================================================ */
@media (max-width: 960px) {
  :root { --gutter: 24px; }
  .editorial { grid-template-columns: 1fr; gap: 40px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(2) { border-right: 0; }
  /* stacked: drop the shared subgrid rows and go back to a simple column */
  .tier-row { grid-template-columns: 1fr; grid-template-rows: none; }
  .tier-col {
    border-right: 0; border-bottom: 1px solid var(--color-mist);
    min-height: auto; padding: 36px 24px;
    display: flex; flex-direction: column; grid-row: auto;
  }
  .tier-col:last-child { border-bottom: 0; }
  .section { padding: 80px var(--gutter); }
  .display-xl { font-size: 56px; }
  .tagline-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* (header nav -> hamburger now switches at 1100px, in its own query above) */

  .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .site-footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }

  .inquiry-form { grid-template-columns: 1fr; gap: 24px; }
  .inquiry-page-grid { grid-template-columns: 1fr; gap: 48px; }
  .lede-page-grid { grid-template-columns: 1fr; gap: 24px; }

  .three-up { grid-template-columns: 1fr; gap: 56px; }
  .three-up-tight { gap: 56px; }
  .four-up-strip { grid-template-columns: repeat(2, 1fr); }
  .four-up-cell:nth-child(odd) { border-right: 1px solid var(--color-mist); }
  .four-up-cell:nth-child(2n) { border-right: 0; }
  .four-up-cell:nth-child(-n+2) { border-bottom: 1px solid var(--color-mist); }
  .four-up-cell { padding: 32px 20px; }

  /* ThreePanel slideshow: 3 -> 2 across at tablet */
  .threepanel { grid-template-columns: repeat(2, 1fr); }
  /* Instagram strip: 6 -> 3 across (was stuck at 6 through the whole tablet band) */
  .ig-grid { grid-template-columns: repeat(3, 1fr); }

  /* Touch tap targets: arrow links + IG handle were ~22px tall */
  .arrow-link { padding-top: 14px; min-height: 44px; align-items: center; }
  .ig-handle { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ============================================================
   Splash gate — staggered intro + exit
   ============================================================ */
.splash-root { transition: opacity 600ms var(--ease-club); min-height: 100dvh; }
.splash-root.is-leaving { opacity: 0; pointer-events: none; }

.splash-intro > * {
  opacity: 0;
  transform: translateY(14px);
  animation: splashRise 900ms var(--ease-club) forwards;
}
.splash-intro > :nth-child(1) { animation-delay:  120ms; }
.splash-intro > :nth-child(2) { animation-delay:  320ms; }
.splash-intro > :nth-child(3) { animation-delay:  500ms; }
.splash-intro > :nth-child(4) { animation-delay:  720ms; }
.splash-intro > :nth-child(5) { animation-delay:  920ms; }
@keyframes splashRise {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Hero copy stagger — applies to hero text columns
   ============================================================ */
.hero-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  animation: heroRise 900ms var(--ease-club) forwards;
}
.hero-stagger > :nth-child(1) { animation-delay: 100ms; }
.hero-stagger > :nth-child(2) { animation-delay: 240ms; }
.hero-stagger > :nth-child(3) { animation-delay: 400ms; }
.hero-stagger > :nth-child(4) { animation-delay: 560ms; }
.hero-stagger > :nth-child(5) { animation-delay: 720ms; }
@keyframes heroRise {
  to { opacity: 1; transform: translateY(0); }
}
/* Zoom hero only: the words ease in gently once the zoom settles — slower and
   smoother than a pop, each line drifting up just after the last. */
.zoom-copy .hero-stagger > * { animation-duration: 760ms; transform: translateY(16px); }
.zoom-copy .hero-stagger > :nth-child(1) { animation-delay: 80ms; }
.zoom-copy .hero-stagger > :nth-child(2) { animation-delay: 240ms; }
.zoom-copy .hero-stagger > :nth-child(3) { animation-delay: 380ms; }
.zoom-copy .hero-stagger > :nth-child(4) { animation-delay: 520ms; }
.zoom-copy .hero-stagger > :nth-child(5) { animation-delay: 660ms; }

/* ============================================================
   Scroll indicator — gentle vertical breath
   ============================================================ */
.scroll-indicator {
  animation: scrollBreath 2400ms var(--ease-club) infinite;
}
@keyframes scrollBreath {
  0%, 100% { transform: rotate(180deg) translateY(0); opacity: 0.55; }
  50%      { transform: rotate(180deg) translateY(6px); opacity: 0.9; }
}

/* ============================================================
   Footer links — underline grow from left on hover
   ============================================================ */
.footer-link {
  position: relative;
  display: inline-block;
  transition: color 240ms var(--ease-club);
}
.footer-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -4px;
  height: 1px;
  background: var(--color-champagne);
  transition: right 320ms var(--ease-club);
}
.footer-link:hover { color: var(--color-bone) !important; }
.footer-link:hover::after { right: 0; }

/* ============================================================
   Hamburger / Login close button — refined rotation feel
   ============================================================ */
.icon-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: transform 280ms var(--ease-club), color 240ms var(--ease-club);
}
.icon-btn:hover { transform: rotate(90deg); color: var(--color-champagne-bright); }

/* ============================================================
   Mobile menu — stagger nav links in
   ============================================================ */
.site-header-menu-inner nav > * {
  opacity: 0;
  transform: translateX(20px);
  animation: mobileNavIn 420ms var(--ease-club) forwards;
}
.site-header-menu-inner nav > :nth-child(1) { animation-delay: 120ms; }
.site-header-menu-inner nav > :nth-child(2) { animation-delay: 180ms; }
.site-header-menu-inner nav > :nth-child(3) { animation-delay: 240ms; }
.site-header-menu-inner nav > :nth-child(4) { animation-delay: 300ms; }
.site-header-menu-inner nav > :nth-child(5) { animation-delay: 360ms; }
.site-header-menu-inner nav > :nth-child(6) { animation-delay: 420ms; }
.site-header-menu-inner nav > :nth-child(7) { animation-delay: 480ms; }
@keyframes mobileNavIn {
  to { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   Stat numerals — subtle slide+fade on reveal
   ============================================================ */
.reveal .stat-num { transition: transform 900ms var(--ease-club) 80ms; transform: translateY(10px); }
.reveal.is-visible .stat-num { transform: translateY(0); }

/* ============================================================
   Page hero — slow drift on backgrounds (works with cover sizing)
   ============================================================ */
.page-hero {
  background-repeat: no-repeat;
  animation: heroDrift 28s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { background-position: 50% 52%; }
  to   { background-position: 50% 46%; }
}

/* ============================================================
   Reduced motion — opt out of anything beyond a quick fade
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .splash-intro > *,
  .hero-stagger > *,
  .site-header-menu-inner nav > * { opacity: 1 !important; transform: none !important; }
  .page-hero { animation: none !important; background-size: cover !important; }
  .scroll-indicator { animation: none !important; }
}

/* ============================================================
   Responsive — phone
   ============================================================ */
@media (max-width: 600px) {
  :root { --gutter: 20px; --header-height: 64px; }
  .section { padding: 64px var(--gutter); }
  .section-tight { padding: 56px var(--gutter); }
  .page-hero { padding: var(--header-height) var(--gutter) 64px; }
  .full-bleed-quote { padding: 64px var(--gutter); }

  /* Tighter type ramp for narrow phones */
  .display-xl { font-size: 44px; line-height: 1.05; }
  .display-lg { font-size: 38px; }
  .display-md { font-size: 30px; }
  .display-sm { font-size: 24px; }
  .lede { font-size: 16px; }
  .body-text { font: 400 15px/1.65 var(--font-body); }
  .hero-sub, .hero-sub--home { font-size: 17px; line-height: 1.55; }

  /* Stat strip: 2-col stays but smaller numerals */
  .stat-cell { padding: 36px 20px; gap: 12px; }
  .stat-num { font-size: 44px !important; }

  /* 3-up stat strip (Racquets): single column with horizontal dividers */
  .stat-row-3 { grid-template-columns: 1fr; }
  .stat-row-3 .stat-cell { border-right: 0; border-bottom: 1px solid var(--color-mist); }
  .stat-row-3 .stat-cell:last-child { border-bottom: 0; }

  /* LayeredCallout: reflow the offset matte photo to sit BELOW the big photo
     (no room for the absolute overlap at 375px). Keep .callout-media
     positioned so the corner flower stays anchored to the photo. */
  .callout-img-sm,
  .callout.flipped .callout-img-sm {
    position: static; right: auto; left: auto; bottom: auto;
    width: 64%; margin: -28px 0 0 auto;
    transform: none; opacity: 1; aspect-ratio: 4 / 3;
  }
  .callout-text { padding-top: 24px; }
  /* Drop the champagne vertical accent line on phones (6/15 review: remove the
     stray vertical line). It stays on tablet/desktop as the section marker. */
  .callout-rule { display: none; }

  /* ThreePanel slideshow: single column on phones */
  .threepanel { grid-template-columns: 1fr; gap: 14px; }
  .tp-cell { aspect-ratio: 4 / 3; }

  /* Home pillars force 4/5 inline; shorten so the stacked column isn't a marathon scroll */
  .three-up .photo-frame { aspect-ratio: 4 / 3 !important; }

  /* Footer collapses to single column on phones */
  .site-footer { padding: 64px var(--gutter) 32px; }
  .site-footer-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Header logo: drop wordmark, keep emblem only */
  .site-header-wordmark { display: none; }
  .site-header-logo { height: 36px !important; }

  /* Splash gate sizing + comfortable Enter tap target */
  .splash-root { padding: 40px 20px !important; }
  .splash-logo { height: 88px !important; margin-bottom: 36px !important; }
  .splash-tagline { font-size: 16px !important; }
  .splash-root .btn-ghost-light { padding: 18px 40px !important; min-height: 52px; }

  /* Scroll indicator is desktop ornamentation — hide on phones */
  .scroll-indicator { display: none; }

  /* Instagram grid: 6 → 3 across on phones */
  .ig-grid { grid-template-columns: repeat(3, 1fr); }
}