/* St Ives (Hunts) Golf Club, Badrutt's direction.
   After badruttspalace.com/en/winter: a Warm Stone opening that gives way to a full-bleed film, a 70px header
   that is clear over the film and a solid bar after it, a navy BOOK block at the right edge, the sun's
   path (dawn and dusk) with its fact beside it, a pinned line the first tiles slide over, full-height tiles in a
   white mount with the word and its fact at the foot, the
   club's numbers in hairline circles, a sign-off with a pill button, a navy footer, and a full-screen menu of
   caps links beside hairline cells. Brand tokens from ../assets/st-ives.css. Motion: transform and opacity. */

:root {
  --hd: 70px;
  --line: rgba(13, 48, 111, .18);           /* navy hairline */
  --line-light: rgba(255, 255, 255, .55);
  --ease: var(--sti-ease-out);
}
@media (max-width: 599px) { :root { --hd: 60px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.menu-open { overflow: hidden; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--sti-white); color: var(--sti-text); font: var(--sti-w-regular) var(--sti-body-size)/var(--sti-body-lh) var(--sti-font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2 { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--sti-focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { white-space: nowrap; }  /* names kept on one line without U+00A0, so innerText reads "Thomas Munt" */
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--sti-navy); color: var(--sti-white); padding: 12px 16px; font-weight: 600; }
.skip:focus { top: 12px; }

/* Caps underlined link: the reference's 12px caps label. Sky Blue on light grounds, white on film, Light Gold on navy. */
.ulink { display: inline-flex; align-items: center; min-height: var(--sti-tap); font: var(--sti-w-semibold) var(--sti-label)/1.2 var(--sti-font); letter-spacing: var(--sti-label-tracking); text-transform: uppercase; color: var(--sti-sky); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color var(--sti-dur-fast) ease; }
.ulink:hover { color: var(--sti-navy); }
.ulink--light { color: var(--sti-white); }
.ulink--light:hover { color: var(--sti-gold-pale); }
.ulink--onnavy { color: var(--sti-white); }
.ulink--onnavy:hover { color: var(--sti-gold-light); }
/* Hit areas of at least 44 x 44 for the shorter footer and menu links and the inline phone links, without moving
   anything: a centred, invisible box behind the link (A6). */
.ft .ulink, .cell .ulink, .tel, .sign__sub a { position: relative; }
.ft .ulink::after, .cell .ulink::after, .tel::after, .sign__sub a::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }

/* ---------- Header ---------- */
.hd { position: fixed; inset: 0 0 auto 0; height: var(--hd); z-index: 100; display: flex; align-items: center; padding-left: clamp(12px, 3.6vw, 52px); color: var(--sti-white); }
.hd::before { content: ""; position: absolute; inset: 0; background: var(--sti-stone); border-bottom: 1px solid var(--line); opacity: 0; transition: opacity .45s var(--ease); }
.hd::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--line-light); transition: opacity .45s var(--ease); }
.hd.is-solid, .menu-open .hd { color: var(--sti-navy); }
.hd.is-solid::before, .menu-open .hd::before { opacity: 1; }
.hd.is-solid::after, .menu-open .hd::after { opacity: 0; }
.is-opening .hd { color: var(--sti-navy); }
.is-opening .hd::after { opacity: 0; }
.hd > * { position: relative; }
.hd { transition: color .45s var(--ease); }

.burger { display: inline-flex; align-items: center; gap: 12px; min-height: var(--sti-tap); min-width: var(--sti-tap); padding: 0 6px; }
.burger__lines { position: relative; width: 28px; height: 14px; }
.burger__lines span { position: absolute; left: 0; width: 28px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease), opacity .25s; }
.burger__lines span:nth-child(1) { top: 0; }
.burger__lines span:nth-child(2) { top: 6px; }
.burger__lines span:nth-child(3) { top: 12px; }
.burger[aria-expanded="true"] .burger__lines span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__lines span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.burger__label { font: var(--sti-w-semibold) var(--sti-label)/1 var(--sti-font); letter-spacing: var(--sti-label-tracking); text-transform: uppercase; }

/* The wordmark appears in the bar once the film has scrolled away (the reference hides its logo over the film). */
.hd__brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; min-height: var(--sti-tap); white-space: nowrap; font: var(--sti-w-semibold) 14px/1 var(--sti-font); letter-spacing: .14em; text-transform: uppercase; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.hd.is-solid .hd__brand, .menu-open .hd__brand { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.hd__member { margin-left: auto; margin-right: clamp(16px, 2.4vw, 36px); display: inline-flex; align-items: center; min-height: var(--sti-tap); font: var(--sti-w-semibold) var(--sti-label)/1 var(--sti-font); letter-spacing: var(--sti-label-tracking); text-transform: uppercase; }
.hd__member:hover { text-decoration: underline; text-underline-offset: 5px; }
.hd__book { display: grid; place-items: center; align-self: stretch; padding: 0 clamp(18px, 2vw, 30px); min-width: 102px; background: var(--sti-navy); color: var(--sti-white); font: var(--sti-w-semibold) var(--sti-label)/1 var(--sti-font); letter-spacing: var(--sti-label-tracking); text-transform: uppercase; transition: background-color var(--sti-dur-fast) ease; }
.hd__book:hover { background: var(--sti-sky); }
.hd__book-short { display: none; }

/* ---------- Menu ---------- */
.menu { position: fixed; inset: var(--hd) 0 0 0; z-index: 90; background: var(--sti-stone); display: grid; grid-template-columns: 1fr 1fr; overflow-y: auto; overscroll-behavior: contain; opacity: 0; transition: opacity .4s var(--ease); }
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__list { padding: clamp(40px, 7vh, 96px) clamp(24px, 4vw, 60px); display: flex; flex-direction: column; justify-content: center; gap: 2px; border-right: 1px solid var(--line); }
.menu__list a { position: relative; display: flex; align-items: center; min-height: 48px; padding-left: 26px; font: var(--sti-w-semibold) clamp(22px, 2.1vw, 30px)/1.2 var(--sti-font); letter-spacing: .03em; text-transform: uppercase; color: var(--sti-navy); opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease), color var(--sti-dur-fast) ease; transition-delay: calc(var(--i, 0) * 35ms + 80ms); }
.menu__list a::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-top: 1.5px solid var(--sti-gold); border-right: 1.5px solid var(--sti-gold); transform: rotate(45deg); }
.menu__list a:hover { color: var(--sti-sky); }
.menu.is-open .menu__list a { opacity: 1; transform: none; }
.menu__cells { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(200px, auto); }
.cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 36px 40px; text-align: center; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.cell:nth-child(2n) { border-right: 0; }
.cell__kicker { font: var(--sti-w-semibold) var(--sti-label)/1.2 var(--sti-font); letter-spacing: var(--sti-label-tracking); text-transform: uppercase; color: var(--sti-body); }
.cell__big { font: var(--sti-w-light) clamp(24px, 2vw, 30px)/1.2 var(--sti-font); color: var(--sti-navy); }
.cell__text { font-size: 16px; line-height: 1.5; color: var(--sti-ink); max-width: 30ch; }
.cell__icon { width: 48px; height: 48px; color: var(--sti-gold); }
.tel { color: var(--sti-sky); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cell--left { align-items: flex-start; text-align: left; }
.cell--links { gap: 0; }
.cell--links .ulink { min-height: 40px; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: var(--sti-stone); }
.hero__media { position: absolute; inset: 0; }
.hero__media picture, .hero__poster, .hero__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__film { opacity: 0; transition: opacity .9s var(--ease); }
.hero__film.is-on { opacity: 1; }
/* The top scrim is deep enough under the header for white MENU and MEMBERSHIP to read at 4.5:1 over the brightest dawn sky. */
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.62) 0, rgba(0,0,0,.6) 50px, rgba(0,0,0,.36) 100px, rgba(0,0,0,.15) 155px, rgba(0,0,0,0) 215px), linear-gradient(0deg, rgba(0,0,0,.42) 0, rgba(0,0,0,0) 46%); }
/* Opening (JavaScript only): Warm Stone, then the film and its words fade in together. */
.is-opening .hero__media, .is-opening .hero::after { opacity: 0; }
.js .hero__media, .js .hero::after { transition: opacity .6s var(--ease); }
.is-opening .hero__copy, .is-opening .sky { opacity: 0; transform: translateY(10px); }
.hero__copy, .sky { transition: opacity .6s var(--ease) .05s, transform .6s var(--ease) .05s; }

.hero__copy { position: absolute; z-index: 2; left: 50%; bottom: clamp(96px, 14vh, 140px); width: min(92vw, 820px); transform: translateX(-50%); text-align: center; color: var(--sti-white); }
.is-opening .hero__copy { transform: translate(-50%, 10px); }
.hero__kicker { font: var(--sti-w-semibold) var(--sti-label)/1.2 var(--sti-font); letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.hero__title { margin: 14px 0 10px; font: var(--sti-w-semibold) clamp(30px, 4.2vw, 56px)/1.08 var(--sti-font); letter-spacing: -.005em; text-shadow: 0 2px 24px rgba(0,0,0,.3); }
.hero__links { display: flex; justify-content: center; gap: 28px; }

/* The sun's path (24 Oct; was the reference's season pill and its speech-bubble card). Bottom right: the fact for the
   chosen light, always shown and divided by a hairline from the switch, Dawn, a dotted arc on a horizon line and Dusk.
   Choosing a light sends the sun along the arc over its top (rotate only) and cross-fades the fact. */
.sky { position: absolute; z-index: 3; right: calc(clamp(16px, 3.6vw, 52px) + 64px); bottom: clamp(20px, 4.6vh, 48px);   /* + 64: Dusk clear of the AI Concierge launcher */
  display: flex; align-items: flex-end; gap: 22px; color: var(--sti-white); }
.sky__facts { display: grid; max-width: 36ch; padding: 2px 22px 4px 0; border-right: 1px solid var(--line-light); text-align: right; font: var(--sti-w-regular) 14px/1.45 var(--sti-font); text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.sky__fact { grid-area: 1 / 1; align-self: end; opacity: 0; transform: translateY(6px); visibility: hidden; transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s .4s; }
.sky__fact strong { display: block; font-weight: var(--sti-w-semibold); letter-spacing: .01em; }
.sky[data-time="dawn"] .sky__fact[data-time="dawn"], .sky[data-time="dusk"] .sky__fact[data-time="dusk"] { opacity: 1; transform: none; visibility: visible; transition: opacity .5s var(--ease) .2s, transform .5s var(--ease) .2s; }
.sky__switch { display: flex; align-items: flex-end; gap: 2px; }
.sky__opt { display: inline-flex; align-items: flex-end; min-height: var(--sti-tap); padding: 0 6px 5px; font: var(--sti-w-semibold) var(--sti-label)/1 var(--sti-font); letter-spacing: var(--sti-label-tracking); text-transform: uppercase; color: var(--sti-white); text-shadow: 0 1px 8px rgba(0,0,0,.5); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 6px; transition: text-decoration-color var(--sti-dur-fast) ease; }
.sky__opt[aria-pressed="true"], .sky__opt:hover { text-decoration-color: currentColor; }
.sky__dial { position: relative; flex: none; width: 80px; height: 42.5px; margin: 0 4px 9px; cursor: pointer; }
.sky__dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sky__dial path { fill: none; stroke: var(--sti-white); stroke-width: 1; stroke-dasharray: 1.5 3.5; stroke-linecap: round; }
.sky__dial::after { content: ""; position: absolute; left: -8px; right: -8px; bottom: 2px; height: 1px; background: var(--sti-white); }
.sky__arm { position: absolute; left: 50%; bottom: 2.5px; width: 0; height: 35px; transform-origin: 50% 100%; transform: rotate(-64deg); transition: transform 1.1s cubic-bezier(.65, 0, .35, 1); }
.sky[data-time="dusk"] .sky__arm { transform: rotate(64deg); }
.sky__sun { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--sti-gold-pale); box-shadow: 0 0 0 3px rgba(255,255,255,.2), 0 0 16px 3px rgba(230,198,121,.75); }

/* ---------- Pinned intro ---------- */
.pinwrap { position: relative; }
.intro { position: sticky; top: var(--hd); z-index: 0; background: var(--sti-white); }
.intro__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: clamp(300px, 38vh, 380px); padding: 56px 24px; text-align: center; transform-origin: 50% 40%; }
.tile-row--first { position: relative; z-index: 1; background: var(--sti-white); }
.rm .intro { position: relative; top: auto; }
.intro__line { max-width: 980px; font: var(--sti-w-semibold) clamp(19px, 1.9vw, 28px)/1.45 var(--sti-font); letter-spacing: .05em; text-transform: uppercase; color: var(--sti-navy); }
.intro__line em { font-style: italic; font-weight: var(--sti-w-regular); font-size: 1.5em; line-height: 1; letter-spacing: -.01em; text-transform: none; color: var(--sti-gold); }
.intro__rule { display: inline-block; width: 48px; height: 1.5px; margin-left: 14px; vertical-align: middle; background: var(--sti-gold); }

/* ---------- Tiles ---------- */
.tiles { position: relative; z-index: 1; background: var(--sti-white); }
/* 24 Oct: the tiles sit in a white mount (the reference's run edge to edge with hairline joins). */
.pinwrap, .tiles { --mount: clamp(8px, 1vw, 14px); }
.tile-row { display: flex; gap: var(--mount); padding: 0 var(--mount); }
.tile-row + .tile-row, .tiles > .tile-row:first-child { margin-top: var(--mount); }
.tile { position: relative; flex: 1 1 0; display: block; height: calc(100vh - var(--hd)); height: calc(100svh - var(--hd)); min-height: 460px; overflow: hidden; background: var(--sti-stone); color: var(--sti-white); }
.tile__media { position: absolute; inset: 0; }
.tile__media img, .tile__media video { width: 100%; height: 100%; object-fit: cover; }
.tile__media picture { display: contents; }
.tile__media video { position: absolute; inset: 0; }
/* Without JavaScript the films never get a source: show their stills, never an empty player (A19). */
html:not(.js) video { display: none; }
.tile__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.16) 42%, rgba(0,0,0,.58)), linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,0) 60%); }
.tile__media img, .tile__media video { transition: transform 1.6s var(--ease); }
.tile:hover .tile__media img, .tile:hover .tile__media video { transform: scale(1.03); }
/* Entrance: the white mount draws back to the right to show the tile (the pair's second a beat later), then the
   word and its fact come in from the left. Transform only. */
.tile::before { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--sti-white); transform-origin: 100% 50%; transform: scaleX(0); pointer-events: none; }
.js .tile::before { transform: scaleX(1); transition: transform 1.05s cubic-bezier(.77, 0, .18, 1) var(--d, 0s); }
.js .tile.is-in::before { transform: scaleX(0); }
.tile-row .tile + .tile { --d: .12s; }
.js .tile__media { transform: scale(1.05); transition: transform 1.8s var(--ease) var(--d, 0s); }
.js .tile.is-in .tile__media { transform: none; }
/* The word and its fact sit at the foot, left: the word upright in Proxima Light, the fact beside a white hairline
   (the reference centres one huge script word). Discover moves to the right, a rule after it that runs on on hover. */
/* The word's foot is at the same height in every tile, so a pair's words line up; the fact hangs below it. */
.tile__word { position: absolute; left: clamp(22px, 3.6vw, 56px); right: clamp(22px, 3.6vw, 56px); bottom: clamp(182px, 23vh, 214px); text-align: left; }
.tile__title { font: var(--sti-w-light) clamp(42px, 5.4vw, 92px)/1 var(--sti-font); letter-spacing: -.025em; text-shadow: 0 2px 28px rgba(0,0,0,.3); }
.tile--full .tile__title { font-size: clamp(48px, 7.2vw, 124px); }
.tile__cap { position: absolute; left: 0; top: 100%; margin-top: 18px; padding-left: 16px; border-left: 1px solid var(--sti-white); max-width: 44ch; font: var(--sti-w-regular) 16px/1.45 var(--sti-font); text-wrap: pretty; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.js .tile__title, .js .tile__cap { opacity: 0; transform: translateX(-20px); transition: opacity .9s var(--ease) calc(var(--d, 0s) + .45s), transform .9s var(--ease) calc(var(--d, 0s) + .45s); }
.js .tile__cap { transition-delay: calc(var(--d, 0s) + .58s); }
.js .tile.is-in .tile__title, .js .tile.is-in .tile__cap { opacity: 1; transform: none; }
.tile__cta { position: absolute; right: clamp(22px, 3.6vw, 56px); bottom: clamp(20px, 4.4vh, 48px); display: inline-flex; align-items: center; gap: 14px; min-height: var(--sti-tap); font: var(--sti-w-semibold) var(--sti-label)/1 var(--sti-font); letter-spacing: var(--sti-label-tracking); text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.tile__cta::after { content: ""; width: 40px; height: 1px; background: currentColor; transform-origin: 0 50%; transition: transform .5s var(--ease); }
.tile:hover .tile__cta::after, .tile:focus-visible .tile__cta::after { transform: scaleX(1.8); }
.tile:hover .tile__cta, .tile:focus-visible .tile__cta { color: var(--sti-gold-pale); }
.tile:focus-visible { outline-offset: -4px; outline-color: var(--sti-white); }

/* ---------- Numbers ---------- */
.numbers { padding: clamp(72px, 9vw, 120px) clamp(20px, 4vw, 60px) clamp(48px, 6vw, 80px); background: var(--sti-white); }
.numbers ul { display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px 24px; max-width: 1180px; margin: 0 auto; }
.numbers li { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.numbers__big { display: flex; align-items: baseline; justify-content: center; padding-top: 40px; width: 112px; height: 112px; border: 1px solid var(--line); border-radius: 50%; font: var(--sti-w-semibold) 26px/1 var(--sti-font); color: var(--sti-navy); letter-spacing: .01em; }
.numbers__big small { font-size: 14px; font-weight: var(--sti-w-regular); margin-left: 2px; }
.numbers__big--word { font-size: 20px; letter-spacing: .08em; padding-top: 44px; }
.numbers__label { font: var(--sti-w-semibold) var(--sti-label)/1.4 var(--sti-font); letter-spacing: .05em; text-transform: uppercase; color: var(--sti-body); max-width: 18ch; }
.js .numbers li { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .numbers.is-in li { opacity: 1; transform: none; }

/* ---------- Sign-off ---------- */
.sign { padding: clamp(40px, 5vw, 64px) 24px clamp(88px, 10vw, 140px); text-align: center; background: var(--sti-white); }
.sign__title { font: italic var(--sti-w-regular) clamp(44px, 5.2vw, 80px)/1.05 var(--sti-font); letter-spacing: -.015em; color: var(--sti-navy); text-wrap: balance; }
.sign__sub { max-width: 52ch; margin: 22px auto 34px; font-size: var(--sti-body-size); color: var(--sti-body); }
.sign__sub a { color: var(--sti-sky); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.pillbtn { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 30px; border: 1px solid var(--sti-navy); border-radius: 40px; font: var(--sti-w-semibold) var(--sti-label)/1 var(--sti-font); letter-spacing: var(--sti-label-tracking); text-transform: uppercase; color: var(--sti-navy); transition: background-color var(--sti-dur-fast) ease, color var(--sti-dur-fast) ease; }
.pillbtn svg { width: 20px; height: 20px; color: var(--sti-gold); }
.pillbtn:hover { background: var(--sti-navy); color: var(--sti-white); }
.pillbtn:hover svg { color: var(--sti-gold-light); }
/* Pick a day (A18): a date and 18 holes or the Back 9, which only rewrite the pill's link. Caps labels and hairlines,
   as the menu cells; shown with JS only, because without it the pill is the plain booking link. */
.pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin: 0 auto 26px; }
html:not(.js) .pick { display: none; }
.pick__day { display: inline-flex; align-items: center; gap: 12px; }
.pick__label, .pick__holes span { font: var(--sti-w-semibold) var(--sti-label)/1 var(--sti-font); letter-spacing: var(--sti-label-tracking); text-transform: uppercase; color: var(--sti-navy); }
.pick__date { min-height: var(--sti-tap); padding: 0 4px; border: 0; border-bottom: 1px solid var(--sti-navy); border-radius: 0; background: transparent; font: var(--sti-w-regular) 16px/1 var(--sti-font); color: var(--sti-navy); }
.pick__holes { display: inline-flex; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 40px; }
.pick__holes label { position: relative; display: inline-flex; align-items: center; min-height: var(--sti-tap); padding: 0 18px; border-radius: 40px; cursor: pointer; }
.pick__holes input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick__holes label:has(input:checked) { background: var(--sti-navy); }
.pick__holes label:has(input:checked) span { color: var(--sti-white); }
.pick__holes label:has(input:focus-visible) { outline: 2px solid var(--sti-focus); outline-offset: 2px; }

/* Before you come (A16): five answers in arrival order, a hairline list with the numbers' circle as the marker. */
.faq { max-width: 680px; margin: clamp(56px, 7vw, 88px) auto 0; text-align: left; }
.faq__title { margin: 0 0 14px; font: var(--sti-w-semibold) var(--sti-label)/1.2 var(--sti-font); letter-spacing: var(--sti-label-tracking); text-transform: uppercase; color: var(--sti-gold); text-align: center; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; padding: 8px 0; list-style: none; cursor: pointer; font: var(--sti-w-semibold) var(--sti-body-size)/1.35 var(--sti-font); color: var(--sti-navy); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__mark { position: relative; flex: none; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; transition: transform var(--sti-dur-fast) ease; }
.faq__mark::before, .faq__mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1px; background: var(--sti-gold); transform: translate(-50%, -50%); }
.faq__mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__mark { transform: rotate(45deg); }
.faq__a { max-width: 60ch; padding: 0 0 22px; color: var(--sti-body); }

/* ---------- Footer (navy, brand rule) ---------- */
.ft { padding: clamp(64px, 8vw, 110px) clamp(20px, 4vw, 60px) 36px; background: var(--sti-navy); color: var(--sti-white); }
.ft__cols { display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: start; max-width: 1320px; margin: 0 auto; }
.ft__links { display: flex; flex-direction: column; align-items: flex-start; }
.ft__links .ulink, .ft__addr .ulink { min-height: 36px; }
.ft__mid { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.ft__crest { --sti-crest-plate: 120px; }
.ft__social { display: flex; gap: 12px; }
.ft__social a { display: grid; place-items: center; width: var(--sti-tap); height: var(--sti-tap); color: var(--sti-white); transition: color var(--sti-dur-fast) ease; }
.ft__social a:hover { color: var(--sti-gold-light); }
.ft__social svg { width: 24px; height: 24px; }
.ft__addr { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: 15px; line-height: 1.6; }
.ft__addr p { margin-bottom: 8px; }
.ft__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; max-width: 1320px; margin: clamp(48px, 6vw, 80px) auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.2); font-size: var(--sti-caption); color: var(--sti-white); }
.ft__legal a { display: inline-flex; align-items: center; min-height: var(--sti-tap); margin: -12px 0; text-decoration: underline; text-underline-offset: 3px; }
.ft__legal a:hover { color: var(--sti-gold-light); }
.ft__legal span { display: inline-flex; align-items: center; }

/* ---------- Tablet: pairs stack, tiles 70% of the screen ---------- */
@media (max-width: 999px) {
  .tile-row { flex-direction: column; }
  .tile { flex: none; height: 70vh; height: 70svh; min-height: 420px; }
  .tile__title { font-size: clamp(42px, 9vw, 88px); }
  .tile--full .tile__title { font-size: clamp(46px, 10vw, 100px); }
  .tile-row .tile + .tile { --d: 0s; }
  .menu { grid-template-columns: 1fr; }
  .menu__list { border-right: 0; border-bottom: 1px solid var(--line); justify-content: flex-start; }
  .numbers ul { grid-template-columns: repeat(3, 1fr); }
  .ft__cols { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .ft__links { align-items: center; order: 2; }
  .ft__mid { order: 1; }
  .ft__addr { align-items: center; text-align: center; order: 3; }
}

/* ---------- Phone ---------- */
@media (max-width: 599px) {
  .burger__label { display: none; }
  .hd__brand { font-size: 12px; letter-spacing: .1em; }
  .hd__member { display: none; }
  .hd__book { min-width: 0; margin-left: auto; padding: 0 18px; }
  .hd__book-long { display: none; }
  .hd__book-short { display: inline; }
  .hero__copy { bottom: 108px; }
  .hero__links { gap: 22px; }
  /* The sun's path centres under the club name: the switch, then the fact's first line (the rest is in the FAQ). */
  .sky { left: 50%; right: auto; bottom: 16px; transform: translateX(-50%); flex-direction: column-reverse; align-items: center; gap: 0; }
  .is-opening .sky { transform: translate(-50%, 10px); }
  .sky__facts { padding: 0; border: 0; max-width: none; text-align: center; white-space: nowrap; font-size: 13px; }
  .sky__more { display: none; }
  .tile__word { bottom: 188px; }
  .tile__cap { font-size: 15px; }
  .intro__rule { display: none; }
  .tile { height: 85vh; height: 85svh; min-height: 0; }
  .menu__cells { grid-template-columns: 1fr; }
  .cell { border-right: 0; padding: 30px 24px; }
  .numbers ul { grid-template-columns: repeat(2, 1fr); gap: 36px 16px; }
  .numbers__big { width: 104px; height: 104px; font-size: 24px; padding-top: 37px; }
  .numbers__big--word { padding-top: 41px; }
}

/* Gentle photo parallax (James, 24 Oct): each tile photograph sits 8% larger than its tile and drifts 3.5% of the
   tile's height either side of centre as the tile crosses the screen, slower than the tile (main.js sets --px on the
   tile). The word and its fact sit on the shade, fixed to the tile, so only the photograph moves. translate and scale
   are the individual transform properties, so they compose with the hover zoom and the entrance. Film stills stay
   still under their films. Off under reduced motion. */
.px { scale: 1.08; translate: 0 var(--px, 0px); }
.rm .px { scale: none; translate: none; }

/* ---------- Reduced motion: calm and complete ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__film, .hero__media, .hero::after, .hero__copy, .hero__kicker, .hero__title, .sky, .sky__fact, .sky__arm, .tile::before, .tile__media, .tile__media img, .tile__media video, .tile__title, .tile__cap, .numbers li, .menu, .menu__list a, .hd, .hd::before, .hd__brand { transition: none !important; }
  .js .tile__media, .js .tile__title, .js .tile__cap, .js .numbers li { opacity: 1; transform: none; }
  .js .tile::before { transform: scaleX(0); }
  .px { scale: none; translate: none; }
}