/* Whitley Bay Golf Club, Explora direction (2 Nov 2026), from the St Ives explora page
   (st-ives/homepage-directions/explora; after explorajourneys.com): a calm page on a stone ground. A header that shrinks
   from the stacked crest and name to the name alone, with a mega panel; a centred headline over the course itself, drawn
   from OpenStreetMap; one framed photograph with a stamp; a hairline row of numbers; dividers in italic and capitals; the
   route map (the eighteen holes from OpenStreetMap) moved through hole by hole, with the club's flyover of each; ways to
   play behind a toggle; tabs; an image strip; the club's history in a timeline; quotes; a bordered box; a membership
   panel; an FAQ; a call band; boxed footer links; a jump pill on desktop pointers.
   Whitley Bay tokens (brand.css): navy from the club's entrance sign, Sand for rules, bunkers and the stamp (never text),
   Noto Sans (the club's web font), Light for display, Italic for the divider words, capitals for labels.
   Changed from St Ives for the club's photographs (none over 1,600 px): no hero film and no wide film; the hero photo is
   framed at 720 px; the flyover frame at 480 px. Transform and opacity only. */

:root {
  --navy: var(--wb-navy); --gold: var(--wb-gold); --sky: var(--wb-sky); --gold-l: var(--wb-gold-light);
  --stone: var(--wb-stone); --white: #fff; --body: var(--wb-body); --ink: var(--wb-ink); --rule: var(--wb-rule);
  --font: var(--wb-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(179, 137, 74, .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 { --wb-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(179, 137, 74, .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(179, 137, 74, .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(179, 137, 74, .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(179, 137, 74, .12); stroke: var(--gold); stroke-width: 1; opacity: .7; }
.cp-green path { fill: rgba(179, 137, 74, .14); stroke: var(--gold); stroke-width: 1.5; opacity: .9; }
.cp-bunker path { fill: rgba(179, 137, 74, .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: 720px; margin: 56px auto 0; }   /* the club's photos are 1,280 px at most */
.hero__photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 6px solid var(--white); box-shadow: 0 18px 40px rgba(34, 34, 34, .14); }
/* 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); }
.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 set inline from the map's own frame */
/* 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(31, 56, 112, .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(5, 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.375rem/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="white"] .t-white, .js .sc__table[data-tee="yellow"] .t-yellow, .js .sc__table[data-tee="orange"] .t-orange, .js .sc__table[data-tee="purple"] .t-purple, .js .sc__table[data-tee="red"] .t-red { 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 */
}

/* The club's flyover of the chosen hole (Whitley Bay): its own YouTube upload, 854 x 480 with the club's crest, hole
   title and an older yardage box burned in, so the frame stays at 480 px. On the whole course it waits on hole 1's
   frame with a prompt; a hole plays muted while on screen, with a pause button. */
.fly { position: relative; max-width: 480px; margin-top: 24px; aspect-ratio: 16 / 9; background: var(--navy); border: 5px solid var(--white); box-shadow: 0 10px 24px rgba(34, 34, 34, .12); }
.fly video, .fly img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fly__cue { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; background: rgba(31, 56, 112, .88); color: var(--white); font: 600 .6875rem/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.fly.is-hole .fly__cue { display: none; }
.fly .film-btn { right: 10px; bottom: 10px; }
.fly:not(.is-hole) .film-btn { display: none; }
.fly__note { max-width: 480px; margin-top: 8px; font-size: .8125rem; line-height: 1.45; color: var(--body); }
html:not(.js) .fly video { display: none; }
@media (max-width: 699px) { .fly { max-width: none; } }

/* ---------- 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; }
@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; }

/* ---------- Since 1890: the club's history as a timeline (in place of St Ives's wide film) ---------- */
.hist { padding-bottom: 110px; }
.hist__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: 36px; }
.hist__head p { max-width: 34em; }
.hist__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(34, 34, 34, .2); }
.hist__list li { padding: 26px 28px 30px 0; border-bottom: 1px solid rgba(34, 34, 34, .2); }
.hist__list b { display: block; font: 300 2.25rem/1 var(--font); color: var(--navy); letter-spacing: -.02em; margin-bottom: 10px; }
.hist__list span { display: block; max-width: 30em; }
@media (max-width: 899px) { .hist__head { grid-template-columns: 1fr; } .hist__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .hist__list { grid-template-columns: 1fr; } .hist__list li { padding-right: 0; } }

/* ---------- 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: start; 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%; aspect-ratio: 4 / 3; object-fit: cover; }   /* the club's sign is 997 px: a 4:3 frame, not the box's full height */
@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 { --wb-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; }

/* The Concierge widget's own teaser ("Want to chat about ...") sat over the footer and the drawer on a phone
   (2 Nov 2026). Its launcher stays in the corner. */
#cc-proactive-wrap, #cc-proactive { display: none !important; }