/* St Ives (Hunts) Golf Club, explora direction.
   After explorajourneys.com (the world journey page): a calm page on a sand ground. A header that shrinks from the
   stacked crest and name to the name alone, with a mega panel; a centred headline over dotted lines (here the holes
   themselves); an inset film with a turning stamp; a hairline row of numbers; dividers in italic and capitals; the
   route map (here the eighteen holes from OpenStreetMap) moved through hole by hole; ways to play behind a toggle;
   tabs; an image strip; a wide film; a bordered box; a membership panel; an FAQ; a call band; boxed footer links; a
   jump pill on desktop pointers. Warm Stone ground, white panels, Club Navy, Fairway Gold for the stamp, rules and
   bunkers. Proxima Nova Light display, Italic for the divider words, capitals for labels. Transform and opacity only. */

:root {
  --navy: var(--sti-navy); --gold: var(--sti-gold); --sky: var(--sti-sky); --gold-l: var(--sti-gold-light);
  --stone: var(--sti-stone); --white: #fff; --body: var(--sti-body); --ink: var(--sti-ink); --rule: var(--sti-rule);
  --font: var(--sti-font);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --expo: cubic-bezier(.16, 1, .3, 1);
  --g: 60px; --hd: 96px; --hdc: 62px;
}
@media (max-width: 1099px) { :root { --g: 36px; --hd: 64px; --hdc: 64px; } }
@media (max-width: 699px) { :root { --g: 18px; } }

* { box-sizing: border-box; }
html { background: var(--stone); color: var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; font: 400 1rem/1.6 var(--font); background: var(--stone); overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--navy); color: var(--white); }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.map :focus-visible, .call :focus-visible, .ft :focus-visible { outline-color: var(--gold-l); }
html.locked, html.locked body { overflow: hidden; }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--g); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 600; background: var(--navy); color: var(--white); padding: 12px 18px; min-height: 44px; }
.skip:focus { top: 12px; }
.lbl { font: 600 .75rem/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.h2 { font: 300 clamp(1.9rem, 1.3rem + 1.6vw, 2.75rem)/1.12 var(--font); letter-spacing: -.012em; color: var(--navy); }
.h3 { font: 400 1.5rem/1.25 var(--font); color: var(--navy); }
.divider { text-align: center; color: var(--navy); margin-bottom: 40px; font-size: 1.5rem; }
.divider em { font-style: italic; font-weight: 300; }
.divider b { font: 700 .875rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; margin-left: .5em; vertical-align: .2em; }
.link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--sky); text-decoration: underline; text-underline-offset: 4px; }
.link:hover { color: var(--navy); }
/* a phone number inside a sentence: the inline link, its tap area grown to 44 px by ::after without moving a line */
.tel { position: relative; color: var(--sky); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.tel::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.tel:hover { color: var(--navy); }
.tel[href^="mailto:"] { white-space: normal; overflow-wrap: anywhere; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 4px; background: var(--navy); border: 1px solid var(--navy); color: var(--white); font: 600 .75rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.btn:hover { background: var(--sky); border-color: var(--sky); }
.btn--line { background: transparent; color: var(--navy); }
.btn--line:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.btn--light { background: var(--white); border-color: var(--white); color: var(--navy); }
.btn--light:hover { background: var(--gold-l); border-color: var(--gold-l); color: var(--navy); }
.btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .7); color: var(--white); text-transform: none; letter-spacing: 0; font-size: .9375rem; font-weight: 400; }
.btn--ghost:hover { background: var(--white); color: var(--navy); }

/* Reveals (script only), once */
.js .rise { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .75s var(--expo); transition-delay: var(--d, 0s); }
.js.hero-in .rise { opacity: 1; transform: none; }

/* ---------- Header: 96 px with the crest and the name; slides 34 px up to the name alone ---------- */
.hd { position: fixed; top: 0; left: 0; right: 0; z-index: 200; pointer-events: none; }   /* the box keeps its 96 px when the bar slides up: only the bar and the panel take clicks, not the empty strip under the compact bar */
.hd__bar, .mega { pointer-events: auto; }
.hd__bar { position: relative; z-index: 2; height: var(--hd); padding: 0 var(--g); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; background: var(--stone); box-shadow: 0 1px 0 rgba(161, 123, 44, .35); color: var(--navy); transition: transform .45s var(--expo); }
.hd.is-compact .hd__bar { transform: translateY(calc(var(--hdc) - var(--hd))); }
.hd__brand { display: flex; align-items: center; gap: 14px; min-height: 44px; justify-self: start; }
.hd__plate { --sti-crest-plate: 64px; transition: opacity .3s var(--ease), transform .45s var(--expo); }
.hd.is-compact .hd__plate { opacity: 0; transform: scale(.6); }
.hd__words { display: flex; flex-direction: column; transition: transform .45s var(--expo); }
.hd.is-compact .hd__words { transform: translate(-78px, 17px); }
.hd__name { font: 300 1.5rem/1 var(--font); letter-spacing: -.01em; }
.hd__sub { font: 600 .625rem/1.2 var(--font); letter-spacing: .16em; text-transform: uppercase; margin-top: 4px; }
.hd__nav { display: flex; align-items: center; gap: 4px; align-self: end; height: var(--hdc); }
.hd__nav a, .hd__more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; font: 600 .8125rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; background-image: linear-gradient(var(--gold), var(--gold)); background-size: 0 1px; background-position: 12px calc(100% - 10px); background-repeat: no-repeat; transition: background-size .35s var(--ease); }
.hd__nav a:hover, .hd__more:hover, .hd__more[aria-expanded="true"] { background-size: calc(100% - 24px) 1px; }
.hd__more svg { width: 10px; height: 8px; transition: transform .3s var(--ease); }
.hd__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.hd__right { display: flex; justify-content: flex-end; align-items: center; gap: 10px; align-self: end; height: var(--hdc); }
.hd__short { display: none; }
.hd__menu { display: none; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 10px; font: 600 .75rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.hd__menu i { position: relative; width: 18px; height: 10px; }
.hd__menu i::before, .hd__menu i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; }
.hd__menu i::before { top: 0; } .hd__menu i::after { bottom: 0; }
@media (max-width: 1099px), (hover: none) {
  .hd__bar { grid-template-columns: 1fr auto; height: var(--hdc); }
  .hd.is-compact .hd__bar { transform: none; }
  .hd__nav, .hd__contact { display: none; }
  .hd__plate { display: none; }
  .hd.is-compact .hd__words { transform: none; }
  .hd__menu { display: inline-flex; }
  .hd__right, .hd__nav { align-self: center; height: auto; }
}
@media (max-width: 699px) { .hd__long { display: none; } .hd__short { display: inline; } .hd__book { padding: 0 14px; } .hd__menu span { display: none; } .hd__name { font-size: 1.25rem; } }

/* Mega panel */
.mega { position: relative; z-index: 1; background: var(--stone); border-top: 1px solid rgba(161, 123, 44, .35); transform: translateY(-12px); opacity: 0; transition: transform .45s var(--expo), opacity .3s var(--ease); }
.mega[hidden] { display: none; }
.mega.is-open { transform: none; opacity: 1; }
.hd.is-compact .mega { margin-top: calc(var(--hdc) - var(--hd)); }
.mega__inner { max-width: 1440px; margin: 0 auto; padding: 36px var(--g) 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 40px; }
.mega__col .lbl { color: var(--navy); margin-bottom: 12px; }
.mega__col a { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy); font-size: 1.0625rem; }
.mega__col a:hover { color: var(--sky); }
.mega__card { display: block; color: var(--navy); }
.mega__card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 12px; }
.mega__line { display: block; font: 300 1.25rem/1.3 var(--font); margin-top: 6px; }
.mega__card:hover .mega__line { color: var(--sky); }
.shade { position: fixed; inset: 0; z-index: 150; background: rgba(34, 34, 34, .55); opacity: 0; transition: opacity .3s var(--ease); }
.shade[hidden] { display: none; }
.shade.is-on { opacity: 1; }

/* Drawer (touch and narrow) */
.drawer { position: fixed; z-index: 300; top: 0; left: 0; bottom: 0; width: min(420px, 92vw); background: var(--stone); color: var(--navy); overflow-y: auto; overscroll-behavior: contain; transform: translateX(-100%); transition: transform .5s var(--expo); }
.drawer[hidden] { display: none; }
.drawer.is-open { transform: none; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; height: var(--hdc); padding: 0 var(--g); border-bottom: 1px solid rgba(161, 123, 44, .35); }
.drawer__name { font: 600 .6875rem/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.drawer__close { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--navy); border-radius: 4px; font: 600 .75rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.drawer__close svg { width: 12px; height: 12px; }
.drawer__group { padding: 22px var(--g) 6px; }
.drawer__group .lbl { margin-bottom: 6px; color: var(--body); }
.drawer__group a { display: flex; align-items: center; min-height: 46px; font: 300 1.5rem/1.15 var(--font); border-bottom: 1px solid var(--rule); }
.drawer__call { padding: 24px var(--g) 40px; }
.drawer__call a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sky); text-decoration: underline; text-underline-offset: 4px; font-size: 1.125rem; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: calc(var(--hd) + 56px) var(--g) 0; overflow: hidden; text-align: center; }
/* the course plan: St Ives as an architect's plan from OpenStreetMap, quiet behind the heading (faded at its centre) */
.hero__plan { position: absolute; left: 50%; top: 0; width: min(1560px, 108vw); height: auto; transform: translateX(-50%); pointer-events: none; opacity: .9;
  -webkit-mask-image: radial-gradient(ellipse 38% 26% at 50% 33%, rgba(0, 0, 0, .2), #000 75%); mask-image: radial-gradient(ellipse 38% 26% at 50% 33%, rgba(0, 0, 0, .2), #000 75%); }
.cp-bound path { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 1 5; stroke-linecap: round; opacity: .55; }
.cp-fair path { fill: rgba(161, 123, 44, .05); stroke: var(--gold); stroke-width: 1.3; stroke-dasharray: 1 4; stroke-linecap: round; opacity: .75; }
.cp-water path { fill: rgba(46, 109, 180, .10); stroke: var(--sky); stroke-width: 1; stroke-dasharray: 1 3; stroke-linecap: round; opacity: .6; }
.cp-path path { fill: none; stroke: var(--gold); stroke-width: 1; stroke-dasharray: 3 6; opacity: .35; }
.cp-tee path { fill: rgba(161, 123, 44, .12); stroke: var(--gold); stroke-width: 1; opacity: .7; }
.cp-green path { fill: rgba(161, 123, 44, .14); stroke: var(--gold); stroke-width: 1.5; opacity: .9; }
.cp-bunker path { fill: rgba(161, 123, 44, .3); stroke: none; }
.cp-hole path { fill: none; stroke: var(--navy); stroke-width: 1; stroke-dasharray: 5 6; opacity: .28; }
.cp-num text { font: 600 13px/1 var(--font); fill: var(--navy); opacity: .55; text-anchor: middle; }
@media (max-width: 699px) { .hero__plan { width: 210vw; } }
.hero__text { position: relative; max-width: 860px; margin: 0 auto; }
.hero__text .lbl { color: var(--navy); margin-bottom: 18px; }
.hero__title { font: 300 clamp(2.25rem, 1.3rem + 3vw, 4rem)/1.08 var(--font); letter-spacing: -.02em; color: var(--navy); }
.hero__sub { max-width: 34em; margin: 18px auto 0; font-size: 1.0625rem; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.hero__film { position: relative; max-width: 1240px; margin: 56px auto 0; }
.hero__film video { position: relative; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* The film's poster is a still from the 4K source under the video, so it takes a srcset (a poster attribute cannot):
   the video is transparent until its first frame, and stays a poster without script or with reduced motion. */
.hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--navy); }
.stamp { position: absolute; right: -36px; top: -40px; width: 116px; height: 116px; }
.stamp__disc { fill: var(--white); }
.stamp__dot { fill: var(--gold); }
.stamp__t { font: 600 9px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; fill: var(--navy); }
.js:not(.rm) .stamp { animation: turn 22s linear infinite; }
.js:not(.rm) .is-paused .stamp { animation-play-state: paused; }
@keyframes turn { to { transform: rotate(360deg); } }
.film-btn { position: absolute; right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--navy); transition: background-color .3s var(--ease); }
.film-btn:hover { background: var(--gold-l); }
.film-btn svg { width: 12px; height: 12px; }
.film-btn .i-play { display: none; }
.film-btn[aria-pressed="true"] .i-play { display: block; }
.film-btn[aria-pressed="true"] .i-pause { display: none; }
/* Without script the films stay posters (A19): Chrome would draw its native control bar on every video then, and the
   pause button could do nothing, so neither shows */
html:not(.js) .film-btn { display: none; }
html:not(.js) video::-webkit-media-controls { display: none !important; }
@media (max-width: 699px) { .hero { padding-top: calc(var(--hdc) + 36px); } .hero__film { margin-top: 40px; margin-left: calc(-1 * var(--g)); margin-right: calc(-1 * var(--g)); } .stamp { right: 10px; top: -48px; width: 92px; height: 92px; } }

/* ---------- Numbers ---------- */
.nums { padding: 72px var(--g); }
/* three by two and centred, so the right column ends clear of the concierge launcher and greeting (bottom-right
   300 x 120 at 1440; James, 24 Oct) */
.nums__row { max-width: clamp(560px, calc(100vw - 620px), 820px); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(34, 34, 34, .2); border-bottom: 1px solid rgba(34, 34, 34, .2); }
.nums__row li { padding: 26px 16px; text-align: center; border-right: 1px solid rgba(34, 34, 34, .2); }
.nums__row li:last-child, .nums__row li:nth-child(3) { border-right: 0; }
.nums__row li:nth-child(-n+3) { border-bottom: 1px solid rgba(34, 34, 34, .2); }
.nums__row b { display: block; font: 300 2.25rem/1 var(--font); color: var(--navy); letter-spacing: -.02em; }
.nums__row span { display: block; margin-top: 8px; font: 600 .6875rem/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 899px) { .nums__row { max-width: none; } }
@media (max-width: 499px) { .nums__row { grid-template-columns: 1fr 1fr; } .nums__row li { border-right: 1px solid rgba(34, 34, 34, .2) !important; border-bottom: 1px solid rgba(34, 34, 34, .2); } .nums__row li:nth-child(even) { border-right: 0 !important; } }

/* ---------- The route: the OpenStreetMap course, hole by hole ---------- */
.route { padding: 72px var(--g) 110px; }
.route__head { max-width: 1320px; margin: 0 auto 36px; }
.route__grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px 64px; align-items: start; }
.map { position: relative; background: var(--navy); border-radius: 6px; overflow: hidden; }
.map__zoom { transform-origin: 0 0; transition: transform 1s var(--expo); will-change: transform; }
.map__svg { width: 100%; height: auto; aspect-ratio: 1000 / 1447; }
/* from 1024 up the map is a window the height of the screen, held beside the card, fitted to the whole course and
   zoomed to each hole, so the hole in play is always on screen (James, 24 Oct: at 1100 to 1280 the map had run off) */
@media (min-width: 1024px) {
  .map { position: sticky; top: calc(var(--hdc) + 24px); height: clamp(420px, calc(100svh - var(--hdc) - 48px), 980px); }
  .map .map__credit { top: 0; bottom: auto; border-bottom-left-radius: 6px; }   /* the foot of the window is where the jump pill floats */
}
@media (min-width: 1024px) and (max-width: 1279px) { .route__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; } }
.m-course { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .25); stroke-width: 1.5; }
.m-water { fill: rgba(32, 96, 158, .7); }
.m-fairway { fill: rgba(255, 255, 255, .14); }
.m-path { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.2; }
.m-tee { fill: rgba(255, 255, 255, .36); }
.m-green { fill: rgba(255, 255, 255, .55); }
.m-bunker { fill: var(--gold-l); }
.hole__line { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; transition: stroke .4s var(--ease); }
.hole__tee { fill: rgba(255, 255, 255, .8); }
.hole__pin { fill: var(--gold-l); transition: transform .5s var(--expo); transform-box: fill-box; transform-origin: center; }
.hole__n { font: 700 13px/1 var(--font); fill: var(--navy); text-anchor: middle; }
.hole { transition: opacity .4s var(--ease); }
/* hover, focus and tap targets on the map: an invisible wide stroke along each hole and a disc round its pin */
.hole__hit { fill: none; stroke: transparent; stroke-width: 30px; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: stroke; }
.hole__hitpin { fill: transparent; pointer-events: all; }
.js .hole { cursor: pointer; }
.hole:focus { outline: none; }
.hole__ring { fill: none; stroke: var(--white); stroke-width: 2.5px; vector-effect: non-scaling-stroke; opacity: 0; pointer-events: none; }
.hole:focus-visible .hole__ring { opacity: 1; }
.holes.has-on .hole { opacity: .28; }
.holes.has-on .hole.is-on { opacity: 1; }
.hole.is-on .hole__line { stroke: var(--gold-l); stroke-dasharray: none; stroke-width: 3; }
.hole.is-on .hole__pin { transform: scale(1.35); }
.map__credit { position: absolute; right: 0; bottom: 0; padding: 0 10px; background: rgba(13, 48, 111, .9); color: var(--white); font-size: .75rem; }
.map__credit a { display: inline-flex; align-items: center; min-height: 44px; color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.route__side { position: sticky; top: calc(var(--hdc) + 24px); }
.route__title { font: 300 clamp(1.9rem, 1.3rem + 1.6vw, 2.75rem)/1.12 var(--font); color: var(--navy); letter-spacing: -.012em; margin-bottom: 14px; }
.route__lead { margin-bottom: 28px; max-width: 36em; }
.card { position: relative; background: var(--white); border-top: 3px solid var(--gold); padding: 26px 28px; }
.card__go { position: absolute; top: 14px; right: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--navy); border-radius: 4px; color: var(--navy); font: 600 .6875rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.card__go[hidden] { display: none; }
.card__go svg { width: 14px; height: 14px; }
.card__go:hover { background: var(--navy); color: var(--white); }
.card__k { color: var(--body); }
.card__n { font: 300 3.25rem/1 var(--font); color: var(--navy); letter-spacing: -.02em; margin: 8px 0 6px; }
.card__m { font-size: 1.0625rem; color: var(--navy); margin-bottom: 18px; }
.card__yds { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); }
.card__yds > div { padding: 12px 8px 0 0; display: flex; flex-direction: column-reverse; gap: 4px; }
.card__yds dt { font: 600 .6875rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.card__yds dd { font: 300 1.5rem/1 var(--font); color: var(--navy); font-variant-numeric: tabular-nums; }
.js .card.is-swap > * { animation: swap .5s var(--expo); }
@keyframes swap { from { opacity: 0; transform: translateY(8px); } }
.route__ctrl { display: flex; gap: 10px; align-items: center; margin: 20px 0 18px; }
.rb { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--navy); color: var(--navy); transition: background-color .3s var(--ease), color .3s var(--ease); }
.rb:hover { background: var(--navy); color: var(--white); }
.rb svg { width: 16px; height: 16px; }
.route__all { margin-left: auto; }
.picker { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.pk { width: 100%; min-height: 44px; min-width: 44px; border: 1px solid rgba(34, 34, 34, .2); background: var(--white); color: var(--navy); font: 600 .9375rem/1 var(--font); font-variant-numeric: tabular-nums; transition: background-color .3s var(--ease), color .3s var(--ease); }
.pk:hover { border-color: var(--navy); }
.pk[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pk.is-peek { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }   /* the hole pointed at on the map */
/* narrow screens: the map is a window held under the header, fitted to the whole course and zoomed to each hole, so it
   stays in view while the card and the picker scroll beneath it */
@media (max-width: 1023px) { .route__grid { grid-template-columns: 1fr; gap: 28px; } .route__side { position: static; } .map { position: sticky; top: calc(var(--hdc) + 8px); z-index: 2; height: min(54svh, 560px); box-shadow: 0 10px 24px rgba(34, 34, 34, .18); } }
@media (max-width: 699px) { .route { padding: 56px var(--g) 80px; } .picker { grid-template-columns: repeat(6, minmax(0, 1fr)); } .card { padding: 22px 18px; } }
/* The scorecard by tee (A15): a disclosure row in the FAQ's manner under the picker, the tee switch in the toggle's
   manner, a hairline table in the card's figures. Script shows one tee's yards; without it all four show. */
.sc { margin-top: 28px; border-top: 1px solid rgba(34, 34, 34, .2); border-bottom: 1px solid rgba(34, 34, 34, .2); }
.sc__sum { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 64px; cursor: pointer; list-style: none; font: 300 1.375rem/1.25 var(--font); color: var(--navy); }
.sc__sum::-webkit-details-marker { display: none; }
.sc__sum svg { width: 16px; height: 16px; flex: none; transition: transform .4s var(--expo); }
.sc[open] .sc__sum svg { transform: rotate(45deg); }
.sc__body { padding: 4px 0 24px; }
.sc[open] .sc__body { animation: swap .5s var(--expo) both; }
.sc__tees { display: none; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.js .sc__tees { display: flex; }
.sc__tees .lbl { flex: 0 0 100%; color: var(--body); margin-bottom: 4px; }
.sc__tees button { min-height: 44px; min-width: 52px; padding: 0 12px; border: 1px solid var(--navy); border-radius: 4px; font: 600 .875rem/1 var(--font); font-variant-numeric: tabular-nums; color: var(--navy); transition: background-color .3s var(--ease), color .3s var(--ease); }
.sc__tees button:hover { background: var(--white); }
.sc__tees button[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.sc__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; color: var(--navy); }
.sc__table th, .sc__table td { padding: 7px 6px; text-align: right; border-top: 1px solid var(--rule); font-weight: 400; }
.sc__table th:first-child { text-align: left; padding-left: 0; }
.sc__table thead th { font: 600 .6875rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--body); border-top: 0; }
.sc__table abbr { text-decoration: none; }
.sc__sum-row th, .sc__sum-row td { font-weight: 600; border-top-color: rgba(34, 34, 34, .35); }
.js .sc__table .ty { display: none; }
.js .sc__table[data-tee="67"] .t67, .js .sc__table[data-tee="65"] .t65, .js .sc__table[data-tee="61"] .t61, .js .sc__table[data-tee="56"] .t56 { display: table-cell; }
@media (max-width: 699px) { .sc__table th, .sc__table td { padding: 7px 4px; font-size: .9375rem; } }

/* phones: the map and the hole card held together under the bar, the map sized so the card and the picker below it
   both stay on screen (explora-1); the picker and the arrows scroll up beneath the card */
@media (max-width: 699px) {
  .route { --maph: clamp(200px, calc(100svh - 470px), 45svh); }
  .map { height: var(--maph); }
  .card { position: sticky; top: calc(var(--hdc) + 16px + var(--maph)); z-index: 1; box-shadow: 0 10px 24px rgba(34, 34, 34, .18); }   /* under the map as it leaves, over the picker */
}

/* ---------- Ways to play: a toggle ---------- */
.ways { padding-top: 40px; padding-bottom: 110px; }
.ways__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.toggle { display: inline-flex; border: 1px solid var(--navy); border-radius: 4px; padding: 3px; }
.toggle button { min-height: 44px; min-width: 88px; padding: 0 18px; border-radius: 2px; font: 600 .75rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); transition: background-color .3s var(--ease), color .3s var(--ease); }
.toggle button[aria-selected="true"] { background: var(--navy); color: var(--white); }
.pane[hidden] { display: none; }
.js .pane.is-in .fare { animation: swap .6s var(--expo) both; }
.js .pane.is-in .fare:nth-child(2) { animation-delay: .06s; } .js .pane.is-in .fare:nth-child(3) { animation-delay: .12s; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px; }
.fare { background: var(--white); padding: 30px 28px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.fare .lbl { color: var(--navy); font-size: .8125rem; border-bottom: 1px solid var(--gold); padding-bottom: 6px; }
.fare h3 { font: 300 1.75rem/1.1 var(--font); color: var(--navy); }
.fare p:not(.lbl) { flex: 1; }
/* Pick a day (A18): a date and 18 holes or the Back 9, in the scorecard tee switch's style; script only, it rewrites the card's Book */
.pick { display: none; flex-wrap: wrap; align-items: center; gap: 6px; }
.js .pick { display: flex; }
.fare .pick .lbl { flex: 0 0 100%; color: var(--body); font-size: .75rem; border: 0; padding: 0; margin-bottom: 2px; }
.pick__date { min-height: 44px; padding: 0 10px; border: 1px solid var(--navy); border-radius: 4px; background: var(--white); font: 400 .9375rem/1 var(--font); font-variant-numeric: tabular-nums; color: var(--navy); }
.pick__holes { display: inline-flex; gap: 6px; }
.pick button { min-height: 44px; padding: 0 12px; border: 1px solid var(--navy); border-radius: 4px; font: 600 .875rem/1 var(--font); color: var(--navy); transition: background-color .3s var(--ease), color .3s var(--ease); }
.pick button:hover { background: var(--stone); }
.pick button[aria-pressed="true"] { background: var(--navy); color: var(--white); }
@media (max-width: 899px) { .cards { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- Around the club: tabs ---------- */
.tabs { padding-bottom: 110px; }
.tabs .h2 { margin-bottom: 32px; }
.tabs__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 40px; }
.tabs__list { display: flex; flex-direction: column; border-top: 1px solid rgba(34, 34, 34, .2); }
.tabs__list button { text-align: left; min-height: 56px; padding: 0 4px; border-bottom: 1px solid rgba(34, 34, 34, .2); font: 300 1.375rem/1.2 var(--font); color: var(--body); transition: color .3s var(--ease); }
.tabs__list button[aria-selected="true"] { color: var(--navy); font-weight: 400; box-shadow: inset 3px 0 0 var(--gold); padding-left: 16px; }
.tabs__list button:hover { color: var(--navy); }
.tp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px; align-items: start; }
.tp[hidden] { display: none; }
.tp p { font-size: 1.0625rem; margin-bottom: 12px; }
.tp img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.js .tp.is-in > * { animation: swap .6s var(--expo) both; }
@media (max-width: 899px) { .tabs__grid { grid-template-columns: 1fr; } .tabs__list { flex-direction: row; overflow-x: auto; scrollbar-width: none; border-top: 0; } .tabs__list button { flex: none; padding: 0 16px; font-size: 1.125rem; } .tabs__list button[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--gold); padding-left: 16px; } .tp { grid-template-columns: 1fr; } .tp img { order: -1; } }

/* ---------- Strip ---------- */
.strip { padding-bottom: 110px; }
.strip__row { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.strip__row::-webkit-scrollbar { display: none; }
.strip__row li { flex: 0 0 auto; height: 300px; scroll-snap-align: start; }
.strip__row img { height: 100%; width: auto; object-fit: cover; }
@media (min-width: 1100px) { .strip__row { overflow: hidden; } .strip__row li { flex: 1 1 0; min-width: 0; } .strip__row img { width: 100%; } }
@media (max-width: 699px) { .strip__row li { height: 220px; } }

/* Gentle photo parallax (James, 24 Oct): the photo drifts slower than its frame (each strip li clips its photo, which
   changes nothing visible as the photo fills it); translate and scale are the individual transform properties. */
.strip__row li { overflow: hidden; }
.px { scale: 1.08; translate: 0 var(--px, 0px); }
@media (prefers-reduced-motion: reduce) { .px { scale: none; translate: none; } }
html.rm .px { scale: none; translate: none; }

/* ---------- Wide film ---------- */
.wide { padding-bottom: 110px; }
.wide__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: 32px; }
.wide__head p { max-width: 34em; }
.wide__film { position: relative; }
.wide__film video { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; background: var(--navy); }
html:not(.js) .wide__film video { background: var(--navy) url(../assets/film/sunset-clubhouse-poster.jpg) center / cover no-repeat; }   /* its poster is set by script after load (A17) */
@media (max-width: 899px) { .wide__head { grid-template-columns: 1fr; } .wide__film video { aspect-ratio: 16 / 10; } }

/* ---------- In their words: the numbers' hairline row, two quotes ---------- */
.words { padding-bottom: 110px; }
.words__row { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(34, 34, 34, .2); border-bottom: 1px solid rgba(34, 34, 34, .2); }
.words__row li { padding: 36px 40px; border-right: 1px solid rgba(34, 34, 34, .2); }
.words__row li:last-child { border-right: 0; }
.words blockquote { margin: 0; }
.words blockquote p { font: 300 1.625rem/1.3 var(--font); letter-spacing: -.01em; color: var(--navy); }
.words figcaption { margin-top: 18px; color: var(--body); }
@media (max-width: 899px) { .words__row { grid-template-columns: 1fr; } .words__row li { padding: 28px 4px; border-right: 0; } .words__row li + li { border-top: 1px solid rgba(34, 34, 34, .2); } .words blockquote p { font-size: 1.375rem; } }

/* ---------- Good to know ---------- */
.know { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: stretch; padding-bottom: 110px; }
.know__box { border: 1px solid rgba(34, 34, 34, .25); padding: 40px; background: var(--white); }
.know__box .h3 { margin-bottom: 18px; }
.know__list li { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--rule); }
.know__list b { font: 600 .75rem/1.6 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.know__img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) { .know { grid-template-columns: 1fr; } .know__box { padding: 26px 20px; } .know__list li { grid-template-columns: 1fr; gap: 4px; } .know__img { aspect-ratio: 4 / 3; height: auto; } }

/* ---------- Membership panel ---------- */
.panel { padding-bottom: 110px; }
.panel__inner { background: var(--white); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 48px; align-items: center; }
.panel__text .lbl { color: var(--navy); margin-bottom: 12px; font-size: .8125rem; }
.panel__text .h2 { margin-bottom: 16px; }
.panel__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.panel__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; }
.panel__pics img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.panel__pics img:last-child { aspect-ratio: 3 / 3.4; margin-bottom: 40px; }
@media (max-width: 899px) { .panel__inner { grid-template-columns: 1fr; padding: 28px 20px; } }

/* ---------- FAQ ---------- */
.faq { padding-bottom: 110px; max-width: 1000px; }
.faq .h2 { margin-bottom: 28px; }
.faq__item { border-top: 1px solid rgba(34, 34, 34, .2); }
.faq__item:last-child { border-bottom: 1px solid rgba(34, 34, 34, .2); }
.faq__item h3 { font: inherit; }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: 100%; min-height: 64px; text-align: left; font: 300 1.375rem/1.25 var(--font); color: var(--navy); }
.faq__q svg { width: 16px; height: 16px; flex: none; transition: transform .4s var(--expo); }
.faq__q[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq__a { padding: 0 40px 22px 0; }
.faq__a.is-open p { animation: swap .5s var(--expo) both; }
.faq__a a { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Call band ---------- */
.call { background: var(--navy); color: var(--white); }
.call__inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 36px; padding-bottom: 36px; }
.call .h3 { color: var(--white); margin-right: auto; font-weight: 300; font-size: 1.75rem; }

/* ---------- Jump pill and floating Book: desktop pointers only, never over the hero ---------- */
.float { display: none; }
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .float { display: flex; flex-direction: column; align-items: center; gap: 10px; position: fixed; left: 50%; bottom: 20px; z-index: 120; transform: translate(-50%, 140%); opacity: 0; pointer-events: none; transition: transform .5s var(--expo), opacity .3s var(--ease); }
  .float.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
  .float__pill { display: flex; background: var(--white); border-radius: 4px; box-shadow: 0 6px 24px rgba(34, 34, 34, .14); padding: 0 8px; }
  .float__pill a { display: inline-flex; gap: 6px; min-height: 46px; align-items: center; padding: 0 16px; font: 600 .6875rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
  .float__pill a em { font: italic 300 1rem/1 var(--font); letter-spacing: 0; text-transform: none; }
  .float__pill a:hover { color: var(--sky); }
}

/* ---------- Footer: four columns of boxed links ---------- */
.ft { background: var(--navy); color: rgba(255, 255, 255, .86); padding: 80px 0 140px; }
.ft__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.ft__plate { --sti-crest-plate: 96px; margin-bottom: 18px; }
.ft__tag { margin-top: 10px; color: var(--white); }
.ft__tag span { font-size: .875rem; color: rgba(255, 255, 255, .86); }
.ft .lbl { color: var(--gold-l); margin-bottom: 12px; }
.ft nav li + li { margin-top: 8px; }
.ft nav a { display: flex; align-items: center; min-height: 46px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 4px; color: var(--white); transition: background-color .3s var(--ease), color .3s var(--ease); }
.ft nav a:hover { background: var(--white); color: var(--navy); }
.ft__base { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: .875rem; }
@media (max-width: 1099px), (hover: none) { .ft { padding-bottom: 48px; } }
@media (max-width: 899px) { .ft__grid { grid-template-columns: 1fr 1fr; } .ft__brand { grid-column: 1 / -1; } }
@media (max-width: 499px) { .ft__grid { grid-template-columns: 1fr; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}
html.rm .stamp { animation: none !important; }