/* ==================================================================
   HEX VALLEY GOLF CLUB — shared styles (every page)
   ------------------------------------------------------------------
   One theme: the valley after sunset. Deep crest-indigo ground, mist
   type, one grape-green accent. Photography and the 3D valley bring
   the daylight.
   Shape rule: interactive controls are pills; everything else is square.
   Mobile first: base = phone, min-width queries layer up.
   ================================================================== */

:root{
  /* ground: the course at night. A green-black, never purple. */
  --night:#0B100E;          /* page */
  --night-2:#111815;        /* raised */
  --night-3:#18211C;        /* panels */
  --crest:#201450;          /* the crest ribbon navy (crest only) */
  /* type: ivory, never pure white */
  --mist:#EEEEE8;
  --mist-2:#B4B9B1;         /* secondary (10:1 on night) */
  --mist-3:#8A9188;         /* captions, labels (6:1) */
  /* accent: the crest's grapes, calmed. Small moments only: the italic word, the current hole, a live state. */
  --grape:#B2D66E;
  --grape-ink:#7CC41F;
  --line:rgba(238,238,232,.11);
  --line-2:rgba(238,238,232,.2);
  --fairway:#5E8F3E; --green:#8CC05A; --sand:#DCCB9E; --water:#2E4E72;

  --f-display:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;   /* one family, display and text (Newsreader dropped 2026-10-16: Rassie wanted cleaner, more modern) */
  --f-body:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gutter:clamp(1rem, .5rem + 2.4vw, 3rem);
  --wrap:1360px;
  --nav-h:64px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  color-scheme:dark;
}
@media (min-width:1024px){ :root{ --nav-h:72px; } }

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--night); }
body{
  margin:0; background:var(--night); color:var(--mist);
  font:400 1.0625rem/1.62 var(--f-body); font-stretch:100%;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:clip; text-rendering:optimizeLegibility;
}
img,video,canvas,svg{ display:block; max-width:100%; }
img,video{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
::selection{ background:var(--mist); color:var(--night); }
:focus-visible{ outline:2px solid var(--grape); outline-offset:3px; border-radius:2px; }
.skip{ position:fixed; left:1rem; top:-4rem; z-index:100; background:var(--mist); color:var(--night); padding:.7rem 1.1rem; border-radius:999px; font-weight:600; transition:top .2s; }
.skip:focus{ top:1rem; }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* film grain: fixed, never on scrolling layers */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- type ---------- */
.display, h1, h2{ font-family:var(--f-display); font-weight:500; letter-spacing:-.035em; }
h1{ font-size:clamp(2.6rem, 1.3rem + 5.6vw, 6.25rem); line-height:1.02; }
h2{ font-size:clamp(2.05rem, 1.25rem + 3.4vw, 4.1rem); line-height:1.06; }
h3{ font-family:var(--f-display); font-weight:500; font-size:clamp(1.35rem, 1.05rem + 1.1vw, 1.9rem); line-height:1.15; letter-spacing:-.02em; }
h1 em, h2 em, h3 em, .display em{ font-style:normal; color:var(--grape); }
.lead{ font-size:clamp(1.12rem, 1rem + .5vw, 1.38rem); line-height:1.5; color:var(--mist-2); max-width:44ch; }
.body{ color:var(--mist-2); max-width:62ch; }
.body p + p{ margin-top:1em; }
.label{ font:500 .72rem/1.3 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--mist-3); }
.num{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.grape{ color:var(--grape); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(4.5rem, 3rem + 7vw, 10rem); position:relative; }
.section.tight{ padding-block:clamp(3rem, 2rem + 4vw, 6rem); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- buttons ----------
   Primary: ivory pill, dark label, a round badge carrying the arrow. On hover a grape fill
   rises from the bottom and the arrow nudges on. Secondary: a hairline pill that fills ivory.
   Buttons without a badge keep symmetric padding. */
.btn{
  --h:54px; position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; gap:1rem; height:var(--h); padding:0 .4rem 0 1.45rem;
  border-radius:999px; font:500 .95rem/1 var(--f-body); letter-spacing:.01em; white-space:nowrap;
  color:var(--mist); border:1px solid var(--line-2); background:rgba(238,238,232,.03);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:color .55s var(--ease-out), border-color .55s var(--ease-out);
}
.btn:not(:has(.bi)){ padding-right:1.45rem; }
.btn::before{ content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; background:var(--mist); transform:translateY(102%); transition:transform .65s var(--ease-out); }
@media (hover:hover){ .btn:hover{ color:var(--night); border-color:var(--mist); } }
@media (hover:hover){ .btn:hover::before{ transform:translateY(0); } }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn .bi{ position:relative; display:grid; place-items:center; width:calc(var(--h) - 12px); height:calc(var(--h) - 12px); flex:none; border-radius:50%; background:rgba(238,238,232,.1); overflow:hidden; transition:background-color .55s var(--ease-out), color .55s var(--ease-out); }
.btn .bi .ico{ width:16px; height:16px; stroke-width:1.9; transition:transform .55s var(--ease-out); }
@media (hover:hover){ .btn:hover .bi{ background:var(--night); color:var(--mist); } }
@media (hover:hover){ .btn:hover .bi .ico{ transform:translateX(3px); } }
@media (hover:hover){ .btn:hover .bi .ico.dn{ transform:translateY(3px); } }
@media (hover:hover){ .btn:hover .bi .ico.ur{ transform:translate(2px,-2px); } }
.btn-primary, .btn-grape{ background:var(--mist); color:var(--night); border-color:var(--mist); -webkit-backdrop-filter:none; backdrop-filter:none; }
.btn-primary::before, .btn-grape::before{ background:var(--grape); }
.btn-primary .bi, .btn-grape .bi{ background:var(--night); color:var(--mist); }
@media (hover:hover){ .btn-primary:hover, .btn-grape:hover{ border-color:var(--grape); } }
/* touch: a press, not a hover that sticks after the tap */
.btn:active, .stepper button:active, .chip:active, .seg button:active{ transform:scale(.97); }
.btn, .stepper button, .chip, .seg button{ -webkit-tap-highlight-color:transparent; }
.btn-sm{ --h:44px; padding-left:1.15rem; font-size:.88rem; gap:.75rem; }
.btn-sm:not(:has(.bi)){ padding-right:1.15rem; }
.btn-sm .bi .ico{ width:14px; height:14px; }
.link{ background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat; padding-bottom:2px; transition:background-size .5s var(--ease-out); }
.link:hover{ background-size:0 1px; background-position:100% 100%; }
.btns{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--nav-h);
  display:flex; align-items:center; gap:1.25rem; padding-inline:var(--gutter);
  transition:background-color .5s var(--ease-out), backdrop-filter .5s, border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.solid{ background:rgba(11,16,14,.78); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); border-bottom-color:var(--line); }
.nav-brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto; }
.nav-brand svg{ width:34px; height:35px; color:var(--mist); flex:none; --crest-knock:var(--night); }
.nav-brand .wm{ font:500 1.12rem/1 var(--f-display); letter-spacing:-.005em; }
.nav-brand .wm small{ display:block; margin-top:.3rem; font:500 .6rem/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--mist); opacity:.82; text-shadow:0 1px 10px rgba(11,16,14,.8), 0 0 2px rgba(11,16,14,.6); }
.nav-brand .wm{ text-shadow:0 1px 10px rgba(11,16,14,.4); }
.nav-links{ display:none; gap:1.6rem; font-size:.94rem; }
.nav-links a{ position:relative; color:var(--mist-2); transition:color .3s; padding-block:.4rem; }
.nav-links a:hover, .nav-links a[aria-current]{ color:var(--mist); }
.nav-links a[aria-current]::after{ content:""; position:absolute; left:50%; bottom:-.35rem; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--grape); }
.nav-book{ display:none; }
.nav-toggle{ display:flex; align-items:center; gap:.65rem; height:42px; padding:0 .4rem 0 1rem; border:1px solid var(--line-2); border-radius:999px; font-size:.88rem; font-weight:500; }
.nav-toggle .bars{ position:relative; width:30px; height:30px; border-radius:50%; background:var(--mist); }
.nav-toggle .bars i{ position:absolute; left:9px; right:9px; height:1.5px; background:var(--night); transition:transform .45s var(--ease-out), top .45s var(--ease-out); }
.nav-toggle .bars i:first-child{ top:12px; } .nav-toggle .bars i:last-child{ top:17px; }
.menu-open .nav-toggle .bars i:first-child{ top:14.5px; transform:rotate(45deg); }
.menu-open .nav-toggle .bars i:last-child{ top:14.5px; transform:rotate(-45deg); }
@media (min-width:1100px){
  .nav-links{ display:flex; }
  .nav-book{ display:inline-flex; }
  .nav-toggle{ display:none; }
}
/* progress: a ball rolls along the nav's lower edge toward the pin */
.nav-progress{ position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none; }
.nav-progress .trk{ position:absolute; left:0; top:0; height:1px; width:100%; transform:scaleX(0); transform-origin:0 0; background:var(--grape); opacity:.75; }
.nav-progress .ball{ position:absolute; top:-3px; left:0; width:7px; height:7px; margin-left:-3.5px; border-radius:50%; background:var(--mist); box-shadow:0 0 0 1px rgba(11,16,14,.6); transition:opacity .3s; opacity:0; }
.nav.solid .nav-progress .ball{ opacity:1; }
.nav-progress .pin{ opacity:0; transition:opacity .4s; } .nav.solid .nav-progress .pin{ opacity:1; }
.nav-progress .pin{ position:absolute; right:var(--gutter); bottom:0; width:1px; height:12px; background:var(--mist-3); }
.nav-progress .pin::after{ content:""; position:absolute; left:1px; top:0; border-left:8px solid var(--grape); border-top:3.5px solid transparent; border-bottom:3.5px solid transparent; }
.nav-progress.holed .ball{ opacity:0; }

/* mobile menu */
.menu{
  position:fixed; inset:0; z-index:45; background:var(--night-2); padding:calc(var(--nav-h) + 2rem) var(--gutter) 2rem;
  display:flex; flex-direction:column; justify-content:space-between; overflow-y:auto; overscroll-behavior:contain;
  clip-path:inset(0 0 100% 0); visibility:hidden; transition:clip-path .8s var(--ease-io), visibility 0s .8s;
}
.menu-open .menu{ clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .8s var(--ease-io), visibility 0s; }
.menu ol{ display:grid; gap:.2rem; }
.menu li a{ display:flex; align-items:baseline; gap:1rem; padding:.35rem 0; font:500 clamp(2.2rem, 1.4rem + 5vw, 3.4rem)/1.05 var(--f-display); }
.menu li a .n{ font:500 .72rem var(--f-mono); color:var(--mist-3); min-width:2ch; }
.menu li a[aria-current]{ color:var(--grape); }
.menu-foot{ display:grid; gap:.75rem; margin-top:2.5rem; }
.menu-open{ overflow:hidden; }

/* ---------- loader (first visit per session) ---------- */
.loader{ position:fixed; inset:0; z-index:90; background:var(--night); display:grid; place-items:center; pointer-events:none; }
.loader svg{ width:min(38vw, 210px); height:auto; color:var(--mist); --crest-knock:var(--night); }
.loader .l-cap{ position:absolute; left:0; right:0; bottom:12vh; text-align:center; }
html.no-loader .loader, .reduce .loader{ display:none; }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100svh; min-height:100dvh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; }
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media img, .hero-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 45%; }
.hero-media video{ opacity:0; transition:opacity 1.2s var(--ease-out); }
.hero-media video.on{ opacity:1; }
@media (min-width:900px){ .hero-media img, .hero-media video{ object-position:50% 45%; } }
/* the home hero photo drifts in slowly (transform only: nothing reflows) */
.hero-media picture img{ object-position:50% 50%; transform-origin:52% 62%; animation:hero-drift 26s cubic-bezier(.22,.61,.36,1) both; }
@keyframes hero-drift{ from{ transform:scale(1.09); } to{ transform:scale(1); } }
@media (prefers-reduced-motion:reduce){ .hero-media picture img{ animation:none; } }
.reduce .hero-media picture img{ animation:none; }
.hero::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,16,14,.55) 0%, rgba(11,16,14,0) 22%, rgba(11,16,14,0) 42%, rgba(11,16,14,.72) 78%, var(--night) 100%); }
.hero-copy{ width:100%; padding-bottom:clamp(2.5rem, 2rem + 4vw, 5.5rem); display:grid; gap:1.5rem; }
.hero h1{ max-width:13ch; }
.hero .lead{ color:#D8DBE6; max-width:36ch; }
@media (min-width:1024px){
  .hero-copy{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:end; column-gap:4rem; }
  .hero-copy .side{ display:grid; gap:1.5rem; justify-items:start; padding-bottom:.6rem; }
}

/* ---------- statement ---------- */
.statement p{ font:460 clamp(1.7rem, 1.1rem + 2.7vw, 3.35rem)/1.2 var(--f-display); letter-spacing:-.025em; max-width:24ch; }
.statement p .w{ opacity:.18; transition:opacity .2s linear; }
.statement p .w.on{ opacity:1; }
.statement .meta{ margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:1rem 2.5rem; align-items:center; }
.reduce .statement p .w{ opacity:1; }
.reduce .story-media .story-card:first-child{ z-index:5; }

/* ---------- phones: a quick-action dock (call, directions, book) ---------- */
.dock{ display:none; }
@media (max-width:767px){
  .dock{ position:fixed; z-index:60; left:50%; bottom:calc(12px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:4px; padding:5px;
    border-radius:999px; background:rgba(17,24,21,.82); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
    border:1px solid var(--line-2); box-shadow:0 12px 40px rgba(0,0,0,.45);
    transform:translate(-50%, calc(100% + 30px)); transition:transform .5s var(--ease-out); }
  .dock.on{ transform:translate(-50%, 0); }
  .dock a{ display:flex; align-items:center; gap:.45rem; height:44px; padding:0 .95rem; border-radius:999px; font-size:.86rem; font-weight:500; color:var(--mist); white-space:nowrap; -webkit-tap-highlight-color:transparent; }
  .dock a .ico{ width:18px; height:18px; color:var(--grape); }
  .dock a:active{ transform:scale(.96); }
  .dock .dock-book{ background:var(--mist); color:var(--night); padding:0 .8rem 0 1.05rem; }
  .dock .dock-book .ico{ color:var(--night); }
  .menu-open .dock, .sc-open .dock{ transform:translate(-50%, calc(100% + 30px)); }
}
@media (max-width:379px){
  .dock a:not(.dock-book) span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .dock a:not(.dock-book){ padding:0 .85rem; }
}
.reduce .dock{ transition:none; }

/* ---------- live "open now" status ---------- */
.status{ display:inline-flex; align-items:center; gap:.5rem; font:500 .74rem/1.3 var(--f-mono); letter-spacing:.03em; color:var(--mist-2); }
.status:empty{ display:none; }
.status::before{ content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--mist-3); }
.status.is-open::before{ background:var(--grape); box-shadow:0 0 0 0 rgba(178,214,110,.5); animation:live 2.4s infinite; }
.status.is-soon::before{ background:#E3B75A; animation:none; }
.reduce .status::before{ animation:none!important; }
.foot .status, .v-card .status, .menu-foot .status{ margin:.2rem 0 .9rem; }

/* ---------- valley (3D stage) ---------- */
.valley{ position:relative; }
/* the stage is as tall as the LARGEST phone viewport, so it never resizes while the URL bar
   slides; the HUD keeps clear of the bar with the difference added to its bottom padding */
.valley-stage{ position:relative; height:100vh; height:100lvh; overflow:hidden; background:radial-gradient(120% 90% at 50% 0%, #1d2b27 0%, var(--night) 70%); }
.valley-stage canvas{ position:absolute; inset:0; width:100%!important; height:100%!important; opacity:0; transition:opacity 1.4s var(--ease-out); }
.valley-stage.gl-ready canvas{ opacity:1; }
.valley-stage .still{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s; }
.valley-stage.no-gl .still{ opacity:1; }
.valley-hud{ position:absolute; inset:0; pointer-events:none; display:grid; grid-template-rows:1fr auto; padding:calc(var(--nav-h) + 1rem) var(--gutter) clamp(1.25rem, 1rem + 2vw, 2.5rem); }
.valley-stage::after{ content:""; position:absolute; inset:auto 0 0 0; height:55%; pointer-events:none; background:linear-gradient(180deg, rgba(11,16,14,0), rgba(11,16,14,.55)); }
.valley-hud{ z-index:2; }
@supports (height:1svh){ .valley-hud{ padding-bottom:calc(clamp(1.25rem, 1rem + 2vw, 2.5rem) + 100lvh - 100svh); } }
.valley-hud .cap{ align-self:end; max-width:30rem; }
.valley-hud .cap h2{ font-size:clamp(1.9rem, 1.2rem + 2.8vw, 3.6rem); text-shadow:0 2px 30px rgba(11,16,14,.55); }
.valley-hud .cap p{ margin-top:.8rem; color:#D6D9E4; text-shadow:0 1px 18px rgba(11,16,14,.8); max-width:36ch; }
.valley-hud .cap-set{ position:relative; min-height:13rem; }
.valley-hud .cap-set > div{ position:absolute; left:0; bottom:0; opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.valley-hud .cap-set > div.on{ opacity:1; transform:none; }
.valley-hud .hud-foot{ display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-top:1.5rem; pointer-events:auto; }
.peak-tag{ position:absolute; z-index:1; left:0; top:0; pointer-events:none; font:500 .68rem/1.25 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mist); white-space:nowrap; transform:translate(-50%,-100%); opacity:0; transition:opacity .5s; text-shadow:0 1px 10px rgba(11,16,14,.9); }
.peak-tag::after{ content:""; display:block; width:1px; height:26px; margin:.35rem auto 0; background:linear-gradient(var(--mist), transparent); }
.peak-tag.on{ opacity:.95; }
.peak-tag b{ display:block; font-weight:500; color:var(--mist-2); }
.hole-tag{ position:absolute; z-index:1; left:0; top:0; transform:translate(-50%,-100%); pointer-events:auto; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--mist); color:var(--night); font:600 .8rem/1 var(--f-mono); opacity:0; transition:opacity .5s, background-color .3s, color .3s, transform .3s var(--ease-out); box-shadow:0 6px 20px rgba(11,16,14,.35); }
.hole-tag.on{ opacity:1; }
.hole-tag.cur{ background:var(--grape); }
@media (hover:hover){ .hole-tag:hover{ background:var(--grape); } }
.hole-tag.cur{ transform:translate(-50%,-100%) scale(1.15); }
.gl-note{ position:absolute; z-index:3; right:var(--gutter); bottom:1rem; font:500 .62rem var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:rgba(236,238,242,.45); pointer-events:none; }

/* ---------- the course film (home): the stage above, with a film that the scroll plays (js/film.js) ----------
   The poster is the film's first frame, sharp from the 4K original; it steps aside once the film is moving. */
.film video, .film .film-poster, .film .film-poster img{ position:absolute; inset:0; width:100%; height:100%; }
.film video, .film .film-poster img{ object-fit:cover; }
.film video{ opacity:0; }
.film .film-ready video{ opacity:1; }
.film .film-poster{ transition:opacity .3s linear; }   /* above the video (later in the page), under the stage's shading */
.film .flying .film-poster{ opacity:0; }
.film-wait{ display:inline-flex; align-items:center; gap:.6rem; font:500 .66rem/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mist); padding:.6rem .85rem; border:0; border-radius:99px; background:rgba(11,16,14,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.film-wait[hidden]{ display:none; }
.film-wait b{ font-weight:500; color:var(--mist-2); min-width:3ch; text-align:left; }
.film-wait.tap{ pointer-events:auto; cursor:pointer; min-height:44px; padding-inline:1.1rem; background:var(--mist); color:var(--night); }
.film-wait.tap b{ display:none; }

/* ---------- facts band ---------- */
.facts{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.facts > div{ padding:1.6rem 0 1.5rem; display:grid; gap:.35rem; }
.facts > div:nth-child(odd){ padding-right:1rem; }
.facts b{ font:500 clamp(2.4rem, 1.6rem + 3vw, 4.2rem)/1 var(--f-display); font-feature-settings:'lnum','tnum'; letter-spacing:-.02em; }
.facts > div > span{ color:var(--mist-3); font-size:.92rem; }
@media (min-width:900px){ .facts{ grid-template-columns:repeat(5, minmax(0,1fr)); } .facts > div{ padding:2.2rem 1.2rem 2rem 0; } .facts > div + div{ border-left:1px solid var(--line); padding-left:1.5rem; } }

/* ---------- story stack (archive photos) ---------- */
.story{ display:grid; gap:3rem; }
.story-media{ position:relative; }
.story-card{ position:relative; background:#e9e4d6; padding:10px 10px 12px; box-shadow:0 30px 60px -20px rgba(0,0,0,.6); }
.story-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; filter:saturate(.9) contrast(1.02); }
.story-card figcaption{ font:500 .68rem/1.3 var(--f-mono); letter-spacing:.08em; color:#4b4a5a; padding-top:.55rem; text-transform:uppercase; }
/* a strip of photographs (course page): drag or swipe sideways */
.strip{ display:flex; gap:1rem; overflow-x:auto; padding:2.2rem var(--gutter) 1.2rem; scroll-snap-type:x proximity; scroll-padding-inline:var(--gutter); overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
.strip.grab{ cursor:grabbing; scroll-snap-type:none; }
@media (hover:hover) and (pointer:fine){ .strip{ cursor:grab; -webkit-user-select:none; user-select:none; } }
.shot{ flex:0 0 min(78vw, 30rem); margin:0; scroll-snap-align:start; cursor:zoom-in; }
.shot img{ display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; pointer-events:none; }
.shot figcaption{ padding-top:.6rem; font:500 .68rem/1.3 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--mist-3); }
.shot:focus-visible{ outline:2px solid var(--grape); outline-offset:4px; }
/* the photographs, large */
.story-card.zoomable{ cursor:zoom-in; }
.story-card.zoomable:focus-visible{ outline:2px solid var(--grape); outline-offset:4px; }
.lightbox{ padding:0; border:0; margin:0; width:100%; height:100%; max-width:100%; max-height:100%; background:rgba(6,9,8,.95); color:var(--mist); display:none; }
.lightbox[open]{ display:grid; place-items:center; animation:sc-in .45s var(--ease-out); }
.lightbox::backdrop{ background:transparent; }
.lb-fig{ margin:0; width:min(90vw, 1080px); background:#e9e4d6; padding:12px 12px 14px; box-shadow:0 40px 120px rgba(0,0,0,.7); touch-action:pan-y; }
.lb-fig img{ display:block; width:100%; height:auto; max-height:74vh; object-fit:contain; filter:saturate(.9) contrast(1.02); -webkit-user-drag:none; user-select:none; }
.lb-fig figcaption{ display:flex; justify-content:space-between; gap:1rem; padding-top:.7rem; font:500 .72rem/1.3 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:#4b4a5a; }
.lightbox.plain .lb-fig{ background:none; padding:0; box-shadow:none; }
.lightbox.plain .lb-fig img{ filter:none; max-height:80vh; }
.lightbox.plain .lb-fig figcaption{ color:var(--mist-2); }
.lb-btn{ position:fixed; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line-2); background:rgba(17,24,21,.72); color:var(--mist); -webkit-tap-highlight-color:transparent; }
.lb-btn .ico{ width:20px; height:20px; }
.lb-prev{ left:max(14px, 3vw); top:50%; translate:0 -50%; } .lb-prev .ico{ transform:rotate(180deg); }
.lb-next{ right:max(14px, 3vw); top:50%; translate:0 -50%; }
.lb-x{ top:max(14px, env(safe-area-inset-top)); right:14px; }
@media (hover:hover){ .lb-btn:hover{ background:var(--mist); color:var(--night); } }
@media (max-width:640px){ .lb-fig{ width:94vw; padding:7px 7px 9px; } .lb-prev, .lb-next{ top:auto; bottom:calc(22px + env(safe-area-inset-bottom)); translate:none; } }
.story-steps{ display:grid; gap:2.5rem; }
.story-steps .yr{ font:500 clamp(2.8rem, 2rem + 3vw, 4.6rem)/1 var(--f-display); color:var(--grape); }
.story-steps p{ margin-top:.6rem; color:var(--mist-2); max-width:40ch; }
@media (min-width:1024px){
  .story{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:5rem; align-items:start; }
  .story-media{ position:sticky; top:calc(var(--nav-h) + 6vh); height:72vh; }
  .story-media .story-card{ position:absolute; inset:0 auto auto 0; width:100%; will-change:transform; }
  .story-steps{ gap:0; }
  .story-steps .step{ min-height:62vh; display:flex; flex-direction:column; justify-content:center; }
}

/* ---------- conditions (live) ---------- */
.cond{ display:grid; gap:2.5rem; }
.cond-card{ border:1px solid var(--line); background:linear-gradient(180deg, var(--night-2), var(--night)); display:grid; }
.cond-row{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
.cond-row > div{ padding:1.4rem 1.4rem 1.3rem; border-bottom:1px solid var(--line); }
.cond-row > div:nth-child(odd){ border-right:1px solid var(--line); }
.cond-val{ font:500 clamp(2rem, 1.5rem + 2vw, 3rem)/1 var(--f-display); margin-top:.6rem; display:flex; align-items:baseline; gap:.35rem; }
.cond-val{ height:1em; }                        /* same height loading or loaded: nothing below it moves */
.cond-wind .cond-note{ min-height:3.1em; }
/* the best time to play: one bar per daylight hour */
.cond-play{ padding:1.3rem 1.4rem 1.4rem; border-top:1px solid var(--line); display:grid; gap:1.1rem; }
.cp-best{ margin-top:.5rem; font:400 1.05rem/1.4 var(--f-body); color:var(--mist); min-height:2.8em; }
.cp-chart{ display:flex; align-items:flex-end; gap:4px; height:78px; padding-bottom:18px; }
.cp-chart i{ position:relative; flex:1; height:calc(var(--s, .1) * 100%); min-height:4px; background:rgba(238,238,232,.14); border-radius:3px 3px 1px 1px; transform-origin:50% 100%; animation:bar-in .9s var(--ease-out) both; }
.cp-chart i.best{ background:var(--grape); }
.cp-chart b{ position:absolute; top:calc(100% + 5px); left:50%; transform:translateX(-50%); font:500 .6rem/1 var(--f-mono); color:var(--mist-3); }
.cp-chart i.best b{ color:var(--grape); }
.cp-chart b.odd{ visibility:hidden; }
@keyframes bar-in{ from{ transform:scaleY(0); } }
.reduce .cp-chart i{ animation:none; }
/* home hero: open now + the weather, above the headline */
.hero-live{ display:grid; gap:.35rem; margin-bottom:.2rem; text-shadow:0 1px 12px rgba(11,16,14,.8); }
.hero-wx{ min-height:1.3em; padding-left:calc(7px + .5rem); font:500 .74rem/1.3 var(--f-mono); letter-spacing:.03em; color:var(--mist-2); }   /* its line is kept from the start: nothing moves when the weather arrives */
.hero-live .status{ color:var(--mist); }
/* play: the best weather, beside the booking form */
.best-hint{ display:flex; gap:.65rem; align-items:flex-start; margin-top:1.4rem; max-width:40ch; min-height:2.9em; font-size:.95rem; line-height:1.45; color:var(--mist-2); }
.best-hint .ico{ width:20px; height:20px; margin-top:.1rem; color:var(--grape); }
.cond-val small{ font:500 .8rem var(--f-mono); color:var(--mist-3); }
.cond-wind{ position:relative; padding:1.4rem; display:grid; grid-template-columns:auto 1fr; gap:1.4rem; align-items:center; }
.compass{ width:128px; height:128px; }
.compass .needle{ transform-origin:64px 64px; transition:transform 1.4s var(--ease-out); }
.cond-note{ color:var(--mist-3); font-size:.88rem; }
.skel{ display:inline-block; min-width:3ch; height:.9em; border-radius:3px; background:linear-gradient(90deg, rgba(236,238,242,.06), rgba(236,238,242,.14), rgba(236,238,242,.06)); background-size:200% 100%; animation:skel 1.4s linear infinite; }
@keyframes skel{ to{ background-position:-200% 0; } }
@media (min-width:1024px){ .cond{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:5rem; align-items:center; } }

/* ---------- split feature (clubhouse) ---------- */
.feature{ display:grid; gap:2.2rem; }
.feature .frame{ position:relative; overflow:hidden; }
.feature .frame img{ width:100%; height:100%; object-fit:cover; }
.feature .frame.tall{ aspect-ratio:4/5; }
.feature .frame.wide{ aspect-ratio:16/10; }
.feature-copy{ display:grid; gap:1.4rem; align-content:start; }
.pair{ display:grid; grid-template-columns:1.25fr 1fr; gap:.75rem; align-items:end; }
@media (min-width:1024px){ .feature{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:5rem; align-items:center; } .feature.flip .feature-copy{ order:-1; } }

/* ---------- paths (visit / join) ---------- */
.paths{ display:grid; gap:1rem; }
.path{ position:relative; display:grid; align-content:end; min-height:30rem; padding:clamp(1.5rem, 1rem + 2vw, 2.6rem); overflow:hidden; isolation:isolate; border:1px solid var(--line); }
.path img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.4s var(--ease-out); }
.path::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(11,16,14,.05), rgba(11,16,14,.88) 72%); }
.path:hover img{ transform:scale(1.04); }
.path .price{ font:500 clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem)/1 var(--f-display); margin:.9rem 0 .4rem; }
.path .price small{ font:500 .8rem var(--f-mono); color:var(--mist-2); margin-left:.35rem; }
.path .blurb{ display:block; color:#D1D4E0; max-width:34ch; }
.path .btn{ margin-top:1.4rem; justify-self:start; }
@media (min-width:900px){ .paths{ grid-template-columns:1fr 1fr; } .path{ min-height:38rem; } }

/* ---------- quotes ---------- */
.quotes{ display:grid; gap:2.5rem; }
.quote blockquote{ font:440 clamp(1.3rem, 1.05rem + 1vw, 1.7rem)/1.35 var(--f-display); }
.quote figcaption{ margin-top:1.1rem; color:var(--mist-3); font-size:.9rem; }
.quote figcaption b{ color:var(--mist); font-weight:600; }
@media (min-width:1024px){ .quotes{ grid-template-columns:1.3fr 1fr 1fr; gap:3.5rem; } .quote:first-child blockquote{ font-size:clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); } }

/* ---------- footer: night over the real ridge line ---------- */
.foot{ --pad:clamp(13rem, 8rem + 17vw, 25rem); --rh:clamp(150px, 17vw, 330px); position:relative; margin-top:clamp(3rem, 2rem + 6vw, 8rem); padding-top:var(--pad); overflow:hidden; isolation:isolate; }
.foot-sky{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, var(--night) 0, #0f1714 calc(var(--pad) - var(--rh) - 60px), #16262b calc(var(--pad) - var(--rh) * .45), #22363a var(--pad), #080C0A calc(var(--pad) + 1px)); }
.foot-sky canvas{ position:absolute; inset:0; width:100%; height:100%; }
/* the club's name in the night sky, the ridge in front of it */
.foot-word{ position:absolute; left:0; right:0; top:calc(var(--pad) - var(--rh) * .3); z-index:-1; pointer-events:none; display:flex; justify-content:center; }
.foot-word span{ display:block; translate:0 -100%; font:500 min(19.5vw, 24rem)/.82 var(--f-display); letter-spacing:-.045em; white-space:nowrap;
  background:linear-gradient(180deg, rgba(238,238,232,.2) 0%, rgba(238,238,232,.09) 55%, rgba(178,214,110,.05) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.foot-ridge{ position:absolute; left:0; right:0; top:calc(var(--pad) - var(--rh) + 1px); width:100%; z-index:-1; }
.foot-ridge path.fill{ fill:#080C0A; }
.foot-ridge{ filter:drop-shadow(0 -1px 0 rgba(236,238,242,.14)); }
.foot-ridge path.edge{ fill:none; stroke:rgba(236,238,242,.4); stroke-width:1.2; vector-effect:non-scaling-stroke; }
.foot-ridge text{ font:500 9px var(--f-mono); letter-spacing:.14em; fill:var(--mist-2); }
.foot-inner{ background:#080C0A; padding-bottom:1.5rem; }
.foot-grid{ display:grid; gap:2.5rem; padding-block:2.5rem 3rem; }
.foot-grid h2{ font:500 .72rem/1.3 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--mist-3); margin-bottom:1rem; }
.foot-grid li + li{ margin-top:.45rem; }
.foot-grid a{ color:var(--mist-2); transition:color .3s; }
.foot-grid a:hover{ color:var(--mist); }
.foot-brand{ display:grid; gap:1.2rem; align-content:start; }
.foot-brand svg{ width:88px; height:auto; color:var(--mist); --crest-knock:#080C0A; }
.foot-brand p{ color:var(--mist-3); max-width:30ch; font-size:.95rem; }
.hours{ display:grid; grid-template-columns:auto 1fr; gap:.3rem 1.2rem; font-size:.95rem; color:var(--mist-2); }
.hours dt{ color:var(--mist-3); }
.hours .today{ color:var(--mist); }
.foot-base{ display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between; padding-top:1.5rem; border-top:1px solid var(--line); color:var(--mist-3); font-size:.85rem; }
.foot-base a:hover{ color:var(--mist); }
@media (min-width:900px){ .foot-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem; } }

/* ---------- page head (inner pages) ---------- */
.page-head{ position:relative; padding-top:calc(var(--nav-h) + clamp(3.5rem, 2rem + 6vw, 8rem)); padding-bottom:clamp(2.5rem, 2rem + 3vw, 5rem); overflow:hidden; isolation:isolate; }
.page-head.has-media{ min-height:78svh; display:flex; align-items:flex-end; }
.page-head .bg{ position:absolute; inset:0; z-index:-2; }
.page-head .bg img, .page-head .bg video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-head .bg video{ opacity:0; transition:opacity 1.2s var(--ease-out); }
.page-head .bg video.on{ opacity:1; }
.page-head.has-media::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(11,16,14,.6), rgba(11,16,14,.15) 35%, rgba(11,16,14,.85) 85%, var(--night)); }
.page-head .lead{ margin-top:1.4rem; }
.page-head h1{ max-width:15ch; }

/* ---------- tables: fees & scorecard ---------- */
.seg{ display:inline-flex; padding:4px; border:1px solid var(--line-2); border-radius:999px; gap:2px; }
.seg button{ height:38px; padding:0 1.1rem; border-radius:999px; font-size:.9rem; font-weight:500; color:var(--mist-2); transition:background-color .3s, color .3s; }
.seg button[aria-pressed="true"]{ background:var(--mist); color:var(--night); }
.fee-grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.fee{ background:var(--night); padding:1.4rem 1.4rem 1.3rem; display:grid; gap:.5rem; align-content:start; }
.fee .who{ font-weight:600; }
.fee .note{ color:var(--mist-3); font-size:.88rem; }
.fee .amt{ font:500 clamp(2rem, 1.6rem + 1.6vw, 2.8rem)/1 var(--f-display); margin-top:.4rem; }
.fee .amt small{ font:500 .72rem var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--mist-3); margin-left:.4rem; }
.fee.hi{ background:var(--night-2); }
.fee.hi .amt{ color:var(--grape); }
@media (min-width:700px){ .fee-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1100px){ .fee-grid.c4{ grid-template-columns:repeat(4, minmax(0,1fr)); } .fee-grid.c3{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

.card-table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.card-table th, .card-table td{ padding:.72rem .5rem; text-align:center; font:400 .95rem/1 var(--f-mono); border-bottom:1px solid var(--line); }
.card-table th{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist-3); font-weight:500; }
.card-table td:first-child, .card-table th:first-child{ text-align:left; }
.card-table tr.tot td{ color:var(--mist); font-weight:600; border-bottom:0; }
.card-table tbody tr{ transition:background-color .25s; cursor:pointer; }
.card-table tbody tr:hover, .card-table tbody tr.cur{ background:rgba(166,217,91,.08); }
.card-table .par5{ color:var(--grape); }
.table-scroll{ overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }

/* ---------- accordion ---------- */
.acc{ border-top:1px solid var(--line); }
.acc details{ border-bottom:1px solid var(--line); }
.acc summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.25rem 0; cursor:pointer; font:500 1.15rem/1.3 var(--f-display); }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary .pm{ position:relative; width:26px; height:26px; border:1px solid var(--line-2); border-radius:50%; flex:none; }
.acc summary .pm::before, .acc summary .pm::after{ content:""; position:absolute; left:7px; right:7px; top:12px; height:1px; background:var(--mist); transition:transform .4s var(--ease-out); }
.acc summary .pm::after{ transform:rotate(90deg); }
.acc details[open] summary .pm::after{ transform:rotate(0); }
.acc .acc-body{ padding:0 0 1.5rem; color:var(--mist-2); max-width:70ch; }
.acc .acc-body li{ padding-left:1.1rem; position:relative; }
.acc .acc-body li + li{ margin-top:.5rem; }
.acc .acc-body li::before{ content:""; position:absolute; left:0; top:.72em; width:5px; height:1px; background:var(--grape); }

/* ---------- forms ---------- */
.form{ display:grid; gap:1.2rem; }
.field{ display:grid; gap:.5rem; }
.field label, .field .lbl{ font-size:.9rem; font-weight:500; color:var(--mist); }
.field .help{ font-size:.82rem; color:var(--mist-3); }
.field input, .field select, .field textarea{
  width:100%; min-height:52px; padding:.85rem 1rem; border-radius:10px; border:1px solid var(--line-2);
  background:var(--night-2); color:var(--mist); font:400 1rem/1.4 var(--f-body); transition:border-color .3s, background-color .3s;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:var(--mist-3); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--grape); background:var(--night-3); }
.field .err{ font-size:.82rem; color:#F2A08D; min-height:1.1em; }
.field.bad input, .field.bad select{ border-color:#F2A08D; }
.row2{ display:grid; gap:1.2rem; }
.field .opt{ font-weight:400; color:var(--mist-3); }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form-problem{ font-size:.9rem; color:#F2A08D; }
.form-problem[hidden]{ display:none; }
.book-form{ position:relative; }
@media (min-width:700px){ .row2{ grid-template-columns:1fr 1fr; } }
/* the "shape rule" bends here on purpose: text inputs are soft rectangles (10px), documented. */

.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{ height:40px; padding:0 1.05rem; border-radius:999px; border:1px solid var(--line-2); font-size:.9rem; font-weight:500; color:var(--mist-2); transition:background-color .35s var(--ease-out), color .35s, border-color .35s; }
@media (hover:hover){ .chip:hover{ border-color:var(--mist-3); color:var(--mist); } }
.chip[aria-pressed="true"]{ background:var(--mist); border-color:var(--mist); color:var(--night); }
.stepper{ display:inline-flex; align-items:center; gap:.2rem; border:1px solid var(--line-2); border-radius:999px; height:46px; padding:0 3px; }
.stepper button{ width:38px; height:38px; border-radius:50%; font-size:1.15rem; color:var(--mist-2); transition:background-color .3s, color .3s; }
@media (hover:hover){ .stepper button:hover{ color:var(--night); background:var(--mist); } }
.stepper output{ min-width:2.2ch; text-align:center; font:500 1.05rem var(--f-mono); }

/* ---------- reveals ---------- */
.rv{ opacity:0; transform:translateY(22px); transition:opacity 1s var(--ease-out), transform 1.2s var(--ease-out); }
.rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.08s; } .rv.d2{ transition-delay:.16s; } .rv.d3{ transition-delay:.24s; }
[data-split] .sl{ padding-bottom:.08em; margin-bottom:-.08em; }   /* italic descenders survive the line masks */
.frame{ overflow:hidden; }
html.no-js .rv{ opacity:1; transform:none; }

/* ---------- icons (Tabler outline, MIT; golf glyphs drawn on the same 24px grid) ---------- */
.ico{ width:1.5rem; height:1.5rem; flex:none; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ico.draw path, .ico.draw circle, .ico.draw line, .ico.draw polyline, .ico.draw rect{ stroke-dasharray:var(--len, 400); stroke-dashoffset:var(--len, 400); transition:stroke-dashoffset 1.6s var(--ease-out); }
.ico.draw.in path, .ico.draw.in circle, .ico.draw.in line, .ico.draw.in polyline, .ico.draw.in rect{ stroke-dashoffset:0; }
.ico-row{ display:grid; gap:1.4rem; }
.ico-item{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; }
.ico-item .ico{ width:2rem; height:2rem; color:var(--grape); }
.ico-item h3{ font-size:1.2rem; }
.ico-item p{ color:var(--mist-2); font-size:.96rem; margin-top:.3rem; }
@media (min-width:900px){ .ico-row{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:2.5rem; } .ico-item{ grid-template-columns:1fr; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .rv{ opacity:1; transform:none; }
  .ico.draw path, .ico.draw circle, .ico.draw line, .ico.draw polyline, .ico.draw rect{ stroke-dashoffset:0; }
}

/* ---------- story stack: mobile grid, desktop pile ---------- */
@media (max-width:1023px){
  .story-media{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
  .story-media .story-card{ padding:6px 6px 8px; }
  .story-media .story-card:nth-child(odd){ transform:rotate(-1.2deg); } .story-media .story-card:nth-child(even){ transform:rotate(1.4deg) translateY(10px); }
  .story-media .story-card figcaption{ font-size:.58rem; }
}

/* ---------- page transitions ---------- */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:.45s var(--ease-io) both vt-out; }
::view-transition-new(root){ animation:.6s var(--ease-out) both vt-in; }
@keyframes vt-out{ to{ opacity:0; } }
@keyframes vt-in{ from{ opacity:0; } }

/* footer ridge keeps its proportions; it is cropped, never squashed */
.foot-ridge{ height:var(--rh); }

/* ---------- the course tour ---------- */
.tour .valley-hud{ grid-template-rows:auto 1fr; gap:1rem; }
.tour-top{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:flex-end; pointer-events:auto; }
.tour-ctl{ display:inline-flex; padding:3px; gap:2px; border-radius:999px; background:rgba(11,16,14,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--line); }
.tour-ctl button{ height:34px; padding:0 .85rem; border-radius:999px; font-size:.82rem; font-weight:500; color:var(--mist-2); transition:background-color .3s, color .3s; }
.tour-ctl button[aria-pressed="true"]{ background:var(--mist); color:var(--night); }
.tour-card{ align-self:end; justify-self:start; width:min(100%, 26rem); pointer-events:auto; padding:1.25rem 1.25rem 1rem; background:rgba(11,16,14,.72); -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1); border:1px solid var(--line); }
.tc-head{ display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:end; }
.tc-n{ font:500 clamp(4.4rem, 3rem + 5vw, 7rem)/.8 var(--f-display); letter-spacing:-.04em; color:var(--grape); min-width:1.1ch; }
.tc-stats{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.55rem 1rem; }
.tc-stats dt{ font:500 .62rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--mist-3); }
.tc-stats dd{ font:500 1.05rem/1.2 var(--f-mono); margin-top:.25rem; }
.tc-note{ margin-top:1rem; color:var(--mist-2); font-size:.95rem; min-height:3em; }
.tc-wind{ display:flex; gap:.6rem; align-items:center; margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--line); font-size:.88rem; line-height:1.4; color:var(--mist); }
.tc-wind[hidden]{ display:none; }
.tc-wind .ico{ width:20px; height:20px; color:var(--grape); stroke-width:1.8; transition:transform 1s var(--ease-out); }
.tour-ctl .live{ display:inline-block; width:6px; height:6px; margin-right:.45rem; border-radius:50%; background:var(--grape); vertical-align:.1em; animation:live 2.2s infinite; }
.tour-ctl .now-t{ margin-left:.4rem; font:500 .72rem var(--f-mono); color:var(--mist-3); }
.tour-ctl button[aria-pressed="true"] .now-t{ color:rgba(11,16,14,.55); }
.tour-ctl button[aria-pressed="true"] .live{ background:#5d8a1f; }
@keyframes live{ 0%{ box-shadow:0 0 0 0 rgba(178,214,110,.55); } 70%{ box-shadow:0 0 0 7px rgba(178,214,110,0); } 100%{ box-shadow:0 0 0 0 rgba(178,214,110,0); } }
.reduce .tour-ctl .live{ animation:none; }
.tc-dots{ display:flex; gap:4px; margin-top:1rem; }
.tc-dots button{ flex:1; height:30px; border-radius:999px; font:500 .72rem var(--f-mono); color:var(--mist-3); border:1px solid var(--line); transition:background-color .3s, color .3s, border-color .3s; }
@media (hover:hover){ .tc-dots button:hover{ color:var(--mist); border-color:var(--line-2); } }
.tc-dots button.on{ background:var(--grape); border-color:var(--grape); color:var(--night); }
.tc-prog{ height:2px; margin-top:.9rem; background:var(--line); overflow:hidden; }
.tc-prog i{ display:block; height:100%; background:var(--grape); transform-origin:0 50%; transform:scaleX(0); }
@media (max-width:767px){
  .tour-top{ justify-content:flex-start; gap:.45rem; }
  .tour-ctl button{ height:32px; padding:0 .72rem; font-size:.78rem; }
  .tour-ctl .now-t{ display:none; }
  .tour-card{ width:100%; padding:.95rem 1rem .8rem; }
  .tc-head{ gap:.9rem; align-items:center; }
  .tc-n{ font-size:3.5rem; }
  .tc-stats{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:.35rem .5rem; }
  .tc-stats dt{ font-size:.58rem; letter-spacing:.1em; }
  .tc-stats dd{ font-size:.9rem; }
  .tc-note{ min-height:0; margin-top:.7rem; font-size:.86rem; line-height:1.45; }
  .tc-wind{ margin-top:.6rem; padding-top:.6rem; font-size:.82rem; }
  .tc-dots{ margin-top:.75rem; }
  .tc-dots button{ height:32px; }
  .tc-prog{ margin-top:.7rem; }
}

/* ---------- the yardage book ---------- */
.yb-head{ display:grid; gap:1.6rem; }
.yb-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem; }
.yb-legend{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; font:500 .72rem/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mist-3); }
.yb-legend span{ display:inline-flex; align-items:center; gap:.45rem; }
.yb-legend i{ width:8px; height:8px; border-radius:50%; }
.yb-legend .k100{ background:var(--grape); } .yb-legend .k150{ background:#7FA6D9; }
.yb-legend .kob{ width:16px; height:0; border-radius:0; border-top:2px dotted rgba(238,238,232,.6); }
@media (min-width:1024px){ .yb-head{ grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:3rem; } .yb-tools{ justify-content:flex-end; } }
.ybook{ display:flex; gap:1rem; overflow-x:auto; padding:2.4rem var(--gutter) 1.4rem; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
.ybook.grab{ cursor:grabbing; scroll-snap-type:none; }
@media (hover:hover) and (pointer:fine){ .ybook{ cursor:grab; -webkit-user-select:none; user-select:none; } }
.yb-card{ flex:0 0 clamp(250px, 72vw, 330px); scroll-snap-align:start; display:flex; flex-direction:column; padding:1rem 1rem 1.1rem; background:var(--night-2); border:1px solid var(--line); transition:border-color .4s; }
.yb-card:hover{ border-color:var(--line-2); }
.yb-top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:.8rem; }
.yb-n{ font:500 2.6rem/.9 var(--f-display); letter-spacing:-.03em; color:var(--grape); }
.yb-n i{ font:500 .72rem var(--f-mono); letter-spacing:.06em; color:var(--mist-3); margin-left:.35rem; font-style:normal; }
.yb-par{ font:500 .72rem var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--mist-2); padding:.4rem .7rem; border:1px solid var(--line-2); border-radius:999px; }
.yb-map{ width:100%; height:auto; aspect-ratio:5 / 8; display:block; }
.yb-map *{ vector-effect:non-scaling-stroke; }
.yb-bg{ fill:#0e1411; }
.yb-fw{ fill:rgba(178,214,110,.13); stroke:rgba(178,214,110,.42); stroke-width:1; }
.yb-gr{ fill:rgba(178,214,110,.42); stroke:#B2D66E; stroke-width:1.2; }
.yb-o{ opacity:.4; }
.yb-bk{ fill:#d6ccb0; }
.yb-wa{ fill:#193036; stroke:rgba(140,190,200,.4); stroke-width:1; }
.yb-bl{ fill:rgba(238,238,232,.1); stroke:rgba(238,238,232,.28); stroke-width:.8; }
.yb-rd{ fill:none; stroke:rgba(238,238,232,.13); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.yb-cp{ fill:none; stroke:rgba(238,238,232,.2); stroke-width:1; stroke-dasharray:2 3; }
.yb-ob{ fill:none; stroke:rgba(238,238,232,.6); stroke-width:1.6; stroke-dasharray:.1 4.5; stroke-linecap:round; }
.yb-tr{ fill:#1b251d; stroke:rgba(178,214,110,.22); stroke-width:.7; }
.yb-te{ fill:rgba(238,238,232,.5); stroke:#EEEEE8; stroke-width:1; }
.yb-pad{ fill:rgba(178,214,110,.2); stroke:rgba(178,214,110,.5); stroke-width:.8; }
.yb-rail{ fill:none; stroke:rgba(238,238,232,.3); stroke-width:2; stroke-dasharray:6 3; }
.yb-print-head{ display:none; }
.yb-ln{ fill:none; stroke:#EEEEE8; stroke-width:1.3; stroke-dasharray:5 4; opacity:.75; }
.yb-tick{ fill:none; stroke:rgba(238,238,232,.55); stroke-width:1; }
.yb-m100{ fill:#B2D66E; } .yb-m150{ fill:#7FA6D9; }
.yb-lab{ fill:#B4B9B1; font-family:var(--f-mono); font-weight:500; }
.yb-pole{ stroke:#EEEEE8; stroke-width:1.3; }
.yb-flag{ fill:#B2D66E; }
.yb-north path{ stroke:#8A9188; stroke-width:1.2; fill:#8A9188; }
.yb-north text{ fill:#8A9188; font-family:var(--f-mono); font-weight:500; }
.yb-d{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.5rem; margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--line); }
.yb-d dt{ font:500 .6rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--mist-3); }
.yb-d dd{ font:500 .92rem/1.2 var(--f-mono); margin-top:.3rem; white-space:nowrap; }
.yb-d dd i{ font-style:normal; color:var(--mist-3); margin:0 .25rem; }
.yb-note{ margin-top:.8rem; font-size:.86rem; line-height:1.5; color:var(--mist-2); flex:1; }
.yb-fly{ align-self:flex-start; display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; height:36px; padding:0 .95rem; border-radius:999px; border:1px solid var(--line-2); font-size:.84rem; font-weight:500; color:var(--mist); transition:background-color .3s, color .3s, border-color .3s; }
.yb-fly .ico{ width:16px; height:16px; }
@media (hover:hover){ .yb-fly:hover{ background:var(--mist); color:var(--night); border-color:var(--mist); } }
.yb-foot{ margin-top:.6rem; }

/* print: the whole book on one landscape page, in ink */
@media print{
  @page{ size:A4 landscape; margin:9mm; }
  html.print-book, html.print-book body{ background:#fff!important; color:#111; color-scheme:light; }
  html.print-book body::after{ display:none!important; }
  html.print-book .yb-print-head{ display:block; font:500 7pt var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:#555; margin-bottom:1.5mm; }
  html.print-book .yb-map{ width:auto; height:53mm; margin:0 auto; }
  html.print-book .yb-top{ margin-bottom:1.5mm; }
  html.print-book body > *:not(main), html.print-book main > *:not(#yardage), html.print-book .yb-tools, html.print-book .yb-fly, html.print-book .yb-note, html.print-book .lead{ display:none!important; }
  html.print-book #yardage{ padding:0; }
  html.print-book #yardage h2{ font-size:16pt; color:#111; }
  html.print-book #yardage h2 em{ color:#111; }
  html.print-book .ybook{ display:grid; grid-template-columns:repeat(5, 1fr); gap:3mm; padding:3mm 0 0; overflow:visible; }
  html.print-book .yb-card{ padding:2mm; background:#fff; border:.25mm solid #bbb; break-inside:avoid; }
  html.print-book .yb-n{ font-size:18pt; color:#111; } html.print-book .yb-n i, html.print-book .yb-par, html.print-book .yb-d dt, html.print-book .yb-d dd i{ color:#555; }
  html.print-book .yb-par{ border-color:#bbb; }
  html.print-book .yb-d{ border-color:#ccc; } html.print-book .yb-d dd{ color:#111; font-size:8pt; }
  html.print-book .yb-bg{ fill:#fff; }
  html.print-book .yb-fw{ fill:#e8f0da; stroke:#7a9a4a; } html.print-book .yb-gr{ fill:#c9e09e; stroke:#5d7f2c; }
  html.print-book .yb-bk{ fill:#efe6cc; stroke:#b9a878; stroke-width:.6; } html.print-book .yb-wa{ fill:#d5e6ec; stroke:#7ea3b0; }
  html.print-book .yb-tr{ fill:#cfd8c9; stroke:#8fa085; } html.print-book .yb-bl{ fill:#eee; stroke:#999; }
  html.print-book .yb-pad{ fill:#dcebc4; stroke:#7a9a4a; } html.print-book .yb-rail{ stroke:#999; }
  html.print-book .yb-rd{ stroke:#ddd; } html.print-book .yb-cp{ stroke:#bbb; } html.print-book .yb-ob{ stroke:#333; }
  html.print-book .yb-te{ fill:#bbb; stroke:#555; } html.print-book .yb-ln, html.print-book .yb-pole{ stroke:#333; } html.print-book .yb-flag{ fill:#5d7f2c; }
  html.print-book .yb-tick{ stroke:#666; } html.print-book .yb-lab, html.print-book .yb-north text{ fill:#333; } html.print-book .yb-north path{ stroke:#333; fill:#333; }
  html.print-book .yb-m100{ fill:#5d7f2c; } html.print-book .yb-m150{ fill:#2f5f9e; }
  html.print-book .yb-foot{ display:block; margin-top:3mm; font-size:7pt; color:#555; }
}

/* ---------- keep score: the card on the phone ---------- */
.sc-cta{ display:grid; gap:.9rem; justify-items:start; margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.sc-cta p{ color:var(--mist-3); font-size:.92rem; max-width:40ch; }
.score{ padding:0; border:0; margin:auto; width:min(100%, 34rem); max-width:100%; height:min(100%, 54rem); max-height:100%; background:var(--night-2); color:var(--mist); display:none; flex-direction:column; box-shadow:0 30px 90px rgba(0,0,0,.6); }
.score[open]{ display:flex; animation:sc-in .5s var(--ease-out); }
.score::backdrop{ background:rgba(6,9,8,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
@keyframes sc-in{ from{ opacity:0; transform:translateY(24px); } }
@media (max-width:640px){ .score{ width:100%; height:100%; margin:0; } }
.sc-wrap{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:1.4rem 1.25rem 1rem; }
.sc-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.sc-head h2{ font-size:2.4rem; margin-top:.4rem; }
.sc-x{ width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line-2); color:var(--mist-2); transition:background-color .3s, color .3s; }
@media (hover:hover){ .sc-x:hover{ background:var(--mist); color:var(--night); } }
.sc-x .ico{ width:20px; height:20px; }
.sc-setup{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin:1.4rem 0 1.2rem; }
.sc-hcp{ display:flex; align-items:center; gap:.8rem; font-size:.9rem; color:var(--mist-2); }
.sc-cols, .sc-holes li{ display:grid; grid-template-columns:3.2rem 2.4rem 2.4rem 1fr 2.6rem; align-items:center; gap:.4rem; }
.sc-cols{ padding:0 .2rem .5rem; border-bottom:1px solid var(--line); font:500 .6rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--mist-3); }
.sc-cols span:nth-child(4){ text-align:center; } .sc-cols span:last-child{ text-align:right; }
.sc-holes li{ min-height:58px; padding:.2rem; border-bottom:1px solid var(--line); font:500 .95rem var(--f-mono); }
.sc-holes li.split{ border-bottom-color:var(--line-2); }
.sc-holes .hn{ font:500 1.5rem/1 var(--f-display); color:var(--mist); }
.sc-holes .si{ color:var(--mist-3); font-size:.82rem; }
.sc-holes .dot{ font-size:.7rem; color:var(--grape); margin-left:.15rem; letter-spacing:-.1em; }
.sc-st{ justify-self:center; display:flex; align-items:center; gap:.35rem; }
.sc-st button{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2); font-size:1.2rem; color:var(--mist-2); transition:background-color .25s, color .25s; }
@media (hover:hover){ .sc-st button:hover{ background:var(--mist); color:var(--night); } }
.sc-st button:active{ background:var(--mist); color:var(--night); }
.sc-st output{ position:relative; display:grid; place-items:center; width:40px; height:40px; font:500 1.15rem var(--f-mono); color:var(--mist); }
.sc-st output:empty::before{ content:"–"; color:var(--mist-3); }
/* the scorecard marks: circles under par, squares over */
.sc-st output.b1::after, .sc-st output.b2::after, .sc-st output.o1::after, .sc-st output.o2::after{ content:""; position:absolute; inset:5px; border:1.5px solid var(--grape); border-radius:50%; }
.sc-st output.b2::after{ box-shadow:0 0 0 3px var(--night-2), 0 0 0 4.5px var(--grape); }
.sc-st output.o1::after, .sc-st output.o2::after{ border-radius:3px; border-color:var(--mist-3); }
.sc-st output.o2::after{ box-shadow:0 0 0 3px var(--night-2), 0 0 0 4.5px var(--mist-3); }
.sc-holes .pts{ text-align:right; color:var(--grape); }
.sc-holes .pts:empty::before{ content:"·"; color:var(--mist-3); }
.sc-note{ margin-top:1rem; font-size:.8rem; line-height:1.5; color:var(--mist-3); }
.sc-sum{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1rem; align-items:end; padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); border-top:1px solid var(--line-2); background:var(--night-3); }
.sc-tot b{ display:block; margin-top:.35rem; font:500 2.4rem/1 var(--f-display); }
.sc-tot small{ font:500 .72rem var(--f-mono); color:var(--mist-3); }
.sc-tot:nth-child(2) b{ color:var(--grape); }
.sc-acts{ grid-column:1 / -1; display:flex; gap:.6rem; }
.sc-open{ overflow:hidden; }

/* scorecard + rules layouts */
.card-wrap, .rules{ display:grid; gap:2.5rem; }
@media (min-width:1024px){ .card-wrap, .rules{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:5rem; align-items:start; } }
.cta-band{ display:grid; gap:2rem; justify-items:start; padding-block:3rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
@media (min-width:1024px){ .cta-band{ grid-template-columns:1fr auto; align-items:center; } }

/* ---------- play: round builder, fee lists, booking ---------- */
.builder{ display:grid; gap:2.5rem; }
.b-panel{ border:1px solid var(--line); background:linear-gradient(180deg, var(--night-2), var(--night)); }
.b-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem 1.5rem; padding:1.05rem 1.3rem; border-bottom:1px solid var(--line); }
.b-row .lbl{ font-weight:500; }
.b-total{ display:grid; gap:1.4rem; padding:1.5rem 1.3rem 1.4rem; }
.b-sum{ font:500 clamp(3rem, 2.2rem + 3vw, 4.6rem)/1 var(--f-display); letter-spacing:-.02em; margin:.5rem 0 .8rem; font-variant-numeric:lining-nums tabular-nums; }
.b-lines{ display:grid; gap:.35rem; color:var(--mist-2); font-size:.93rem; }
.b-lines b{ color:var(--mist); font-weight:600; margin-left:.35rem; }
@media (min-width:1024px){ .builder{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:5rem; align-items:start; } .b-total{ grid-template-columns:1fr auto; align-items:end; } }
.fee-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.5rem 2rem; margin-bottom:1.1rem; }
.fee .amt.sub{ margin-top:0; font-size:clamp(1.35rem, 1.2rem + .6vw, 1.7rem); color:var(--mist-2); }
.fee.hi .amt.sub{ color:var(--mist-2); }
.notice{ display:flex; gap:1rem; align-items:flex-start; margin-top:2.5rem; padding:1.2rem 1.3rem; border:1px solid var(--line); border-left:2px solid var(--grape); color:var(--mist-2); }
.notice .ico{ color:var(--grape); margin-top:.1rem; }
.notice b{ color:var(--mist); }
.book{ display:grid; gap:2.5rem; }
.book-form{ border:1px solid var(--line); padding:clamp(1.2rem, 1rem + 1.5vw, 2rem); background:var(--night-2); }
.form-done{ color:var(--mist-2); font-size:.92rem; border-top:1px solid var(--line); padding-top:1rem; }
@media (min-width:1024px){ .book{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:5rem; align-items:start; } }

/* ---------- shared bits for the inner pages ---------- */
.h3like{ font-family:var(--f-display); font-weight:500; font-size:clamp(1.35rem, 1.05rem + 1.1vw, 1.9rem); line-height:1.15; letter-spacing:-.005em; }
.fee.social{ grid-column:1 / -1; }
@media (min-width:700px){ .fee.social{ grid-template-columns:1fr auto; align-items:center; } .fee.social .amt{ grid-row:1 / 3; grid-column:2; margin:0; } }
.steps{ display:grid; gap:1rem; margin-top:clamp(2rem, 1.5rem + 2vw, 3.5rem); counter-reset:s; }
.steps li{ position:relative; display:grid; gap:.8rem; align-content:start; padding:1.6rem 1.4rem; border:1px solid var(--line); background:var(--night-2); }
.steps li::before{ counter-increment:s; content:counter(s); position:absolute; right:1.2rem; top:.8rem; font:500 3.2rem/1 var(--f-display); color:rgba(236,238,242,.1); }
.steps .ico{ width:2rem; height:2rem; color:var(--grape); }
.steps p{ color:var(--mist-2); }
.steps .btn{ justify-self:start; margin-top:.4rem; }
@media (min-width:900px){ .steps{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

/* clubhouse */
.fn-hero{ aspect-ratio:16/9; margin-bottom:clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.fn-hero img{ width:100%; height:100%; object-fit:cover; }
.fn-grid{ display:grid; gap:2.5rem; }
@media (min-width:1024px){ .fn-grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:5rem; align-items:start; } }
.season{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(15rem, 1fr); gap:1px; margin-top:2.5rem; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; background:var(--line); border:1px solid var(--line); scrollbar-width:thin; }
.season li{ scroll-snap-align:start; background:var(--night); padding:1.4rem 1.3rem 1.6rem; display:grid; gap:.55rem; align-content:start; }
.season .mo{ font:500 .7rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--grape); }
.season h3{ font-size:1.3rem; }
.season p{ color:var(--mist-2); font-size:.94rem; }
@media (min-width:1100px){ .season{ grid-auto-flow:row; grid-template-columns:repeat(6, minmax(0,1fr)); overflow:visible; } }

/* story */
.story-head .sh-grid{ display:grid; gap:2.5rem; align-items:center; }
.sh-photo{ transform:rotate(1.6deg); max-width:40rem; }
@media (min-width:1024px){ .story-head .sh-grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:4rem; } }
.chapter{ position:relative; padding-block:clamp(3.5rem, 2.5rem + 5vw, 8rem); overflow:hidden; }
.chapter + .chapter{ border-top:1px solid var(--line); }
.ch-grid{ position:relative; display:grid; gap:2.2rem; align-items:center; }
/* phones: the year heads the chapter, the headline tucked over its foot; desktop: a ghost drifting behind */
.ch-yr{ display:block; margin:0 0 -.5em -.04em; font:500 clamp(6.5rem, 4rem + 14vw, 17rem)/1 var(--f-display); letter-spacing:-.04em; color:rgba(236,238,242,.07); pointer-events:none; z-index:0; }
.ch-body, .ch-photo{ position:relative; z-index:1; }
.ch-body .body{ margin-top:1.3rem; }
.ch-photo{ max-width:34rem; }
.ch-grid .ch-yr + .ch-body{ margin-top:-2.2rem; }            /* cancels the grid gap under the year */
@media (min-width:1024px){
  .ch-yr{ position:absolute; right:var(--gutter); top:50%; margin:-.5em 0 0; color:rgba(236,238,242,.05); }
  .ch-grid .ch-yr + .ch-body{ margin-top:0; }
  .ch-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:5rem; }
  .ch-grid.flip .ch-photo{ order:-1; justify-self:end; }
  .ch-grid.flip .ch-yr{ right:auto; left:var(--gutter); }
}
.archive{ display:flex; gap:1.2rem; overflow-x:auto; padding:2.5rem var(--gutter) 1.5rem; scroll-snap-type:x proximity; overscroll-behavior-x:contain; cursor:grab; scrollbar-width:thin; -webkit-user-select:none; user-select:none; }
.archive.grab{ cursor:grabbing; scroll-snap-type:none; }
.archive .story-card{ flex:0 0 min(78vw, 30rem); scroll-snap-align:start; }
.archive .story-card:nth-child(odd){ transform:rotate(-1deg); } .archive .story-card:nth-child(even){ transform:rotate(1.2deg) translateY(8px); }
.archive img{ pointer-events:none; }

/* visit */
.vmap{ position:relative; aspect-ratio:16/10; overflow:hidden; border:1px solid var(--line); background:var(--night-2); }
.vmap img, .vmap svg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vmap .m-n1{ fill:none; stroke:#ECEEF2; stroke-width:3; opacity:.85; }
.vmap .m-rail{ fill:none; stroke:#8A9188; stroke-width:2; stroke-dasharray:10 6; }
.vmap .m-river{ fill:none; stroke:#7fa6b8; stroke-width:2; opacity:.9; }
.vmap .m-club circle{ fill:var(--grape); }
.vmap .m-club .halo{ fill:rgba(166,217,91,.18); stroke:var(--grape); stroke-width:1; animation:halo 2.8s var(--ease-out) infinite; transform-origin:center; transform-box:fill-box; }
@keyframes halo{ 0%{ transform:scale(.4); opacity:1; } 100%{ transform:scale(1.4); opacity:0; } }
.vmap .m-peak path{ fill:var(--mist); }
.vmap .m-lbl{ font:500 15px var(--f-mono); letter-spacing:.14em; fill:var(--mist-2); paint-order:stroke; stroke:rgba(11,16,14,.7); stroke-width:4px; }
.vmap .m-lbl.strong{ fill:var(--mist); font-size:17px; }
.vmap .m-lbl.dir{ fill:var(--mist-3); font-size:14px; }
.vmap-key{ position:absolute; left:1rem; bottom:1rem; right:1rem; display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; font:500 .66rem/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mist-2); }
.vmap-key i{ display:inline-block; width:18px; height:2px; margin-right:.5rem; vertical-align:middle; }
.vmap-key .k-n1{ background:#ECEEF2; } .vmap-key .k-rail{ background:repeating-linear-gradient(90deg, #8A9188 0 5px, transparent 5px 8px); } .vmap-key .k-river{ background:#7fa6b8; }
.vmap-key .src{ margin-left:auto; color:var(--mist-3); text-transform:none; letter-spacing:.04em; }
@media (max-width:767px){ .vmap{ aspect-ratio:4/5; } .vmap-key .src{ margin-left:0; } }
.visit-grid{ display:grid; gap:1rem; margin-top:1rem; }
.v-card{ display:grid; gap:.9rem; align-content:start; padding:1.5rem 1.4rem; border:1px solid var(--line); background:var(--night-2); }
.v-card .ico{ width:2rem; height:2rem; color:var(--grape); }
.v-card p{ color:var(--mist-2); }
.v-card .btn{ justify-self:start; }
@media (min-width:900px){ .visit-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

/* privacy + 404 */
.prose h2{ margin:2.2rem 0 .6rem; color:var(--mist); }
.prose h2:first-child{ margin-top:0; }
.lost{ min-height:100svh; display:grid; align-items:center; padding-top:var(--nav-h); }
.lost-ball{ width:min(60vw, 280px); margin-bottom:1.5rem; }
.lost-ball .water{ fill:rgba(111,143,201,.25); }
.lost-ball .ball circle{ fill:var(--mist); }
.lost-ball .ball{ animation:plop 2.6s var(--ease-io) infinite; }
.lost-ball .rings ellipse{ fill:none; stroke:rgba(236,238,242,.5); stroke-width:1.2; opacity:0; animation:ring 2.6s linear infinite; transform-origin:100px 98px; }
.lost-ball .rings ellipse:nth-child(2){ animation-delay:.18s; } .lost-ball .rings ellipse:nth-child(3){ animation-delay:.36s; }
@keyframes plop{ 0%{ transform:translate(-60px,-30px); opacity:1; } 45%{ transform:translate(0,58px); opacity:1; } 50%,100%{ transform:translate(0,58px); opacity:0; } }
@keyframes ring{ 0%,45%{ opacity:0; transform:scale(.3); } 50%{ opacity:1; } 100%{ opacity:0; transform:scale(1.3); } }

@media (max-width:767px){ .gl-note{ display:none; } }
.foot-credit{ flex-basis:100%; font-size:.75rem; color:var(--mist-3); opacity:.8; }