/* =========================================================
   SUGARCANE — Restaurant & Sports Club
   Nail Bay, Virgin Gorda, BVI
   ========================================================= */

:root{
  /* Brand — taken from the logo (crimson), the stamp (blue) and the
     printed menus (teal headings on sand paper). */
  --wine:        #9E1B2F;
  --wine-deep:   #7C1424;
  --ink:         #16120F;
  --ink-soft:    #2A241E;
  --cream:       #F6F0E4;
  --cream-2:     #EFE6D5;
  --sand:        #E2D4BC;
  --gold:        #C19A4B;   /* on ink and on photographs */
  --gold-light:  #E0B45F;   /* on teal, where the darker gold falls under 4.5:1 */
  --blue:        #3E6AA8;   /* the stamp */
  --teal:        #004B4D;
  --white:       #FFFFFF;

  --bg:          var(--cream);
  --text:        var(--ink);
  --muted:       #5F564B;   /* 5.2:1 on cream-2, 5.6:1 on cream */
  --on-dark:     rgba(246,240,228,.86);

  --serif: "Canela Deck", Georgia, "Times New Roman", serif;
  --sans:  "GTAmerica", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type — one scale, used everywhere. Tracking tightens as size grows,
     line-height opens as size shrinks. */
  --t-display: clamp(3rem, 1.6rem + 6.2vw, 7rem);
  --t-h1:      clamp(2.3rem, 1.5rem + 3.4vw, 4.4rem);
  --t-h2:      clamp(1.9rem, 1.35rem + 2.4vw, 3.3rem);
  --t-h3:      clamp(1.3rem, 1.18rem + .6vw, 1.7rem);
  --t-lead:    clamp(1.06rem, 1rem + .4vw, 1.3rem);
  --t-body:    clamp(1rem, .97rem + .16vw, 1.075rem);
  --t-small:   .9rem;
  --t-label:   .72rem;

  --lh-display: .93;
  --lh-head:    1.06;
  --lh-body:    1.62;

  /* Space — a single rhythm, so sections do not each invent their own. */
  --gut:       clamp(20px, 5vw, 100px);
  --section-y: clamp(68px, 9vw, 132px);
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 14px; --sp-4: 22px;
  --sp-5: 34px; --sp-6: 52px; --sp-7: 76px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --header-h: 96px;
}

/* Brand fonts, self-hosted. */
@font-face{
  font-family:"Canela Deck";
  src:url("../fonts/CanelaDeck-Regular.woff2") format("woff2"),
      url("../fonts/CanelaDeck-Regular.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Canela Deck";
  src:url("../fonts/CanelaDeck-RegularItalic.woff2") format("woff2"),
      url("../fonts/CanelaDeck-RegularItalic.woff") format("woff");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Canela Deck";
  src:url("../fonts/CanelaDeck-Medium.woff2") format("woff2"),
      url("../fonts/CanelaDeck-Medium.woff") format("woff");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"GTAmerica";
  src:url("../fonts/GTAmerica-Regular.woff2") format("woff2"),
      url("../fonts/GTAmerica-Regular.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"GTAmerica";
  src:url("../fonts/GTAmerica-Medium.woff2") format("woff2"),
      url("../fonts/GTAmerica-Medium.woff") format("woff");
  font-weight:500; font-style:normal; font-display:swap;
}

/* =========================================================
   BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* Anchored sections must not land under the fixed header. */
  scroll-padding-top:calc(var(--header-h) + 12px);
}

body{
  margin:0;
  width:100%;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.nav-open{ overflow:hidden; }

/* The thin cream rule that frames the page over photography. */
body::before{
  content:""; position:fixed; inset:14px; z-index:900;
  border:1px solid rgba(246,240,228,.16);
  pointer-events:none;
}
@media (max-width:560px){ body::before{ inset:8px; } }

img,video,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
:target{ scroll-margin-top:calc(var(--header-h) + 12px); }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  margin:0;
  color:var(--teal);
  text-wrap:balance;
}
h1{ font-size:var(--t-h1); line-height:var(--lh-head); letter-spacing:-.025em; }
h2{ font-size:var(--t-h2); line-height:var(--lh-head); letter-spacing:-.02em; }
h3{ font-size:var(--t-h3); line-height:1.2;            letter-spacing:-.01em; }
h4{ font-size:1.4rem;      line-height:1.25; }
p{ text-wrap:pretty; }

/* Headings on photographs and dark grounds keep the cream. */
.hero__title,.hero__claim,
.island__overlay h2,
.sports__text h2,
.visit__intro h2,
.info-card h4{ color:var(--cream); }

::selection{ background:var(--wine); color:var(--cream); }

/* Keyboard users get the same care as everyone else. */
:focus-visible{
  outline:2px solid var(--wine);
  outline-offset:3px;
  border-radius:2px;
}
.hero :focus-visible,
.island :focus-visible,
.visit :focus-visible,
.sports :focus-visible,
.site-header :focus-visible,
.mobile-menu :focus-visible,
.site-footer :focus-visible{ outline-color:var(--gold-light); }

.skip-link{
  position:fixed; top:10px; left:10px; z-index:2000;
  transform:translateY(-160%);
  background:var(--wine); color:var(--cream);
  padding:.85em 1.4em;
  font-size:var(--t-label); letter-spacing:.2em; text-transform:uppercase;
  transition:transform .25s var(--ease-out);
}
.skip-link:focus{ transform:none; }

/* ===== Icons — one grid, one weight ===== */
.ic{
  width:1.15em; height:1.15em;
  flex:none;
  vertical-align:middle;
}
.ic--brand{ width:1.05em; height:1.05em; }

/* ===== Shared bits ===== */
.eyebrow{
  font-family:var(--sans);
  font-size:var(--t-label);
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--wine);
  margin:0 0 var(--sp-3);
  display:inline-flex;
  align-items:center;
  gap:.9em;
}
.eyebrow::before{
  content:"";
  width:42px; height:1px;
  background:currentColor;
  opacity:.55;
}
.eyebrow--light{ color:var(--gold-light); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.7em;
  min-height:44px;
  font-family:var(--sans);
  font-size:var(--t-label);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:1em 2.1em;
  border-radius:100px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease), transform .4s var(--ease);
}
.btn .ic{ width:1em; height:1em; transition:transform .4s var(--ease); }
.btn:hover .ic{ transform:translate(2px,-2px); }
.btn:active{ transform:translateY(1px); }

.btn--solid{ background:var(--wine); color:var(--cream); }
.btn--solid:hover{ background:var(--wine-deep); }

.btn--line{
  border-color:currentColor;
  background:transparent;
  color:var(--ink);
}
.btn--line:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

.btn--ghost{
  border:1px solid rgba(255,255,255,.55);
  color:var(--cream);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }

/* =========================================================
   MOTION
   Content is visible by default. These rules only apply once the
   page has said it wants motion, and .will-reveal is only ever put
   on an element that is below the fold and being observed.
   ========================================================= */
.has-motion .will-reveal{
  opacity:0;
  transform:translateY(20px);
}
.has-motion .will-reveal.is-in{
  opacity:1;
  transform:none;
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:var(--d,0ms);
}
/* Members of a row arrive one after another, not all at once. */
.why__grid > *:nth-child(2),
.experience > *:nth-child(2),
.stats > *:nth-child(2),
.footer__cols > *:nth-child(2){ --d:90ms; }
.why__grid > *:nth-child(3),
.experience > *:nth-child(3),
.stats > *:nth-child(3){ --d:180ms; }
.why__grid > *:nth-child(4),
.stats > *:nth-child(4){ --d:270ms; }

@keyframes sc-rise{ from{ opacity:0; transform:translateY(26px); } }
@keyframes sc-line{ from{ transform:translateY(105%); } }
@keyframes sc-fade{ from{ opacity:0; } }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  transition:transform .5s var(--ease), background .4s var(--ease);
}
.nav-wrap{
  padding:clamp(8px,1.2vw,16px) var(--gut);
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
}
.brand{ display:block; }
.brand__logo{
  height:clamp(64px,7.2vw,92px);
  width:auto;
  filter:brightness(0) invert(1) drop-shadow(0 2px 14px rgba(0,0,0,.35));
  transition:height .5s var(--ease), filter .5s var(--ease);
}
.nav-desktop{ display:flex; gap:clamp(18px,2.2vw,38px); }
.nav-desktop a{
  position:relative;
  font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream);
  text-shadow:0 1px 12px rgba(0,0,0,.45);
  padding:.6em 0;
}
.nav-desktop a::after{
  content:""; position:absolute; left:0; bottom:.2em;
  width:0; height:1px; background:var(--gold-light);
  transition:width .4s var(--ease);
}
.nav-desktop a:hover{ color:var(--gold-light); }
.nav-desktop a:hover::after,
.nav-desktop a[aria-current]::after{ width:100%; }
.nav-desktop a[aria-current]{ color:var(--gold-light); }

.nav-actions{ display:flex; align-items:center; gap:clamp(12px,1.4vw,22px); }

.nav-social{ display:flex; align-items:center; gap:6px; }
.nav-social a{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--cream);
  border:1px solid rgba(255,255,255,.3);
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .35s var(--ease);
}
.nav-social a .ic{ width:17px; height:17px; }
.nav-social a:hover{ background:var(--cream); color:var(--wine); border-color:var(--cream); transform:translateY(-2px); }

/* scrolled state — the header lands on paper */
.site-header.scrolled{
  background:rgba(246,240,228,.94);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 rgba(22,18,15,.08);
}
.site-header.scrolled .brand__logo{ filter:none; height:clamp(52px,5.4vw,68px); }
.site-header.scrolled .nav-desktop a{ color:var(--ink); text-shadow:none; }
.site-header.scrolled .nav-desktop a:hover,
.site-header.scrolled .nav-desktop a[aria-current]{ color:var(--wine); }
.site-header.scrolled .nav-desktop a::after{ background:var(--wine); }
.site-header.scrolled .btn--reserve{ border-color:var(--wine); color:var(--wine); background:transparent; }
.site-header.scrolled .btn--reserve:hover{ background:var(--wine); color:var(--cream); }
.site-header.scrolled .burger span{ background:var(--ink); box-shadow:none; }
.site-header.scrolled .nav-social a{ color:var(--ink); border-color:rgba(22,18,15,.22); }
.site-header.scrolled .nav-social a:hover{ background:var(--wine); color:var(--cream); border-color:var(--wine); }

.site-header.hide{ transform:translateY(-110%); }

.burger{
  display:none;
  width:44px; height:44px;
  background:none; border:none; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:flex-end; gap:6px;
  padding:0;
}
.burger span{
  display:block; height:1.5px; width:26px;
  background:var(--cream);
  box-shadow:0 1px 6px rgba(0,0,0,.3);
  transition:.4s var(--ease);
}
.burger span:nth-child(2){ width:20px; }
.burger[aria-expanded="true"] span:nth-child(2){ width:26px; }

/* =========================================================
   MOBILE MENU
   ========================================================= */
.mobile-menu{
  position:fixed; inset:0; z-index:1100;
  background:linear-gradient(160deg,var(--ink) 0%, #241712 60%, var(--wine-deep) 140%);
  color:var(--cream);
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px,8vw,70px);
  opacity:0;
  transition:opacity .35s var(--ease);
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu.open{ opacity:1; }
.mobile-menu__close{
  position:absolute; top:20px; right:var(--gut);
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.2);
  color:var(--cream); cursor:pointer;
  display:grid; place-items:center;
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.mobile-menu__close .ic{ width:24px; height:24px; }
.mobile-menu__close:hover{ background:var(--wine); transform:rotate(90deg); }

.mobile-menu__nav{ display:flex; flex-direction:column; gap:.06em; }
.mobile-menu__nav a{
  font-family:var(--serif);
  font-size:clamp(2.2rem,10vw,3.6rem);
  line-height:1.12;
  letter-spacing:-.02em;
  opacity:0; transform:translateY(22px);
  transition:color .3s var(--ease);
}
.mobile-menu.open .mobile-menu__nav a{
  opacity:1; transform:none;
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s var(--ease);
}
.mobile-menu.open .mobile-menu__nav a:nth-child(1){ transition-delay:.06s; }
.mobile-menu.open .mobile-menu__nav a:nth-child(2){ transition-delay:.11s; }
.mobile-menu.open .mobile-menu__nav a:nth-child(3){ transition-delay:.16s; }
.mobile-menu.open .mobile-menu__nav a:nth-child(4){ transition-delay:.21s; }
.mobile-menu.open .mobile-menu__nav a:nth-child(5){ transition-delay:.26s; }
.mobile-menu.open .mobile-menu__nav a:nth-child(6){ transition-delay:.31s; }
.mobile-menu.open .mobile-menu__nav a:nth-child(7){ transition-delay:.36s; }
.mobile-menu__nav a:hover{ color:var(--gold-light); }

.mobile-menu__foot{
  margin-top:auto; padding-top:7vh;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap;
}
.mobile-menu__social{ display:flex; gap:8px; }
.mobile-menu__social a{
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  display:grid; place-items:center;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.mobile-menu__social a .ic{ width:20px; height:20px; }
.mobile-menu__social a:hover{ background:var(--gold-light); color:var(--ink); }

/* =========================================================
   HERO
   The entrance is pure CSS: it cannot be left half-played by a
   script that did not arrive, and it starts from a state the
   guest can already read.
   ========================================================= */
.hero{
  position:relative;
  height:100svh; min-height:600px;
  display:flex; align-items:flex-end;
  overflow:hidden;
  color:var(--cream);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__video{
  width:100%; height:100%;
  object-fit:cover;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,7,5,.5) 0%, rgba(10,7,5,0) 28%),
    linear-gradient(0deg, rgba(10,7,5,.85) 0%, rgba(10,7,5,.18) 50%, rgba(10,7,5,0) 72%);
}
.hero__content{
  position:relative; z-index:2;
  width:100%;
  padding:0 var(--gut) clamp(84px,10vh,128px);
}
.hero__eyebrow{
  font-size:var(--t-label); letter-spacing:.32em; text-transform:uppercase;
  margin:0 0 var(--sp-4); color:var(--cream);
}
.hero__title{
  font-size:var(--t-display);
  line-height:var(--lh-display);
  letter-spacing:-.03em;
  margin:0 0 .18em;
  max-width:13ch;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:block; }
.hero__title .line--accent > span{ font-style:italic; color:var(--gold-light); }
.hero__claim{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.4rem,2.6vw,2.3rem);
  line-height:1.22;
  letter-spacing:-.01em;
  max-width:26ch;
  margin:0 0 var(--sp-5);
  color:var(--cream);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }

.hero__scroll{
  position:absolute; z-index:2; bottom:26px; right:var(--gut);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--cream); opacity:.85;
}
.hero__scroll .ic{ width:18px; height:18px; }

.has-motion .hero__eyebrow{ animation:sc-rise .9s var(--ease-out) .15s both; }
.has-motion .hero__title .line > span{ animation:sc-line 1.1s var(--ease-out) both; }
.has-motion .hero__title .line:nth-child(1) > span{ animation-delay:.28s; }
.has-motion .hero__title .line:nth-child(2) > span{ animation-delay:.4s; }
.has-motion .hero__title .line:nth-child(3) > span{ animation-delay:.52s; }
.has-motion .hero__title .line:nth-child(4) > span{ animation-delay:.64s; }
.has-motion .hero__claim{ animation:sc-rise 1s var(--ease-out) .78s both; }
.has-motion .hero__cta{ animation:sc-fade .9s var(--ease-out) 1s both; }
.has-motion .hero__scroll{ animation:sc-fade 1s var(--ease-out) 1.25s both; }
.has-motion .hero__scroll .ic{ animation:sc-bob 2s var(--ease) 2s infinite; }
@keyframes sc-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }

/* =========================================================
   WHY / MENUS BAND
   ========================================================= */
.why{
  background:var(--cream-2);
  padding:var(--section-y) var(--gut);
  border-top:1px solid rgba(22,18,15,.06);
}
.why__head{ text-align:center; margin-bottom:var(--sp-7); }
.why__head .eyebrow{ margin-bottom:var(--sp-4); }
.why__head p{ max-width:62ch; margin-inline:auto; color:var(--muted); }
.why__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(24px,2.6vw,44px);
}
.why__item .ic{
  width:34px; height:34px;
  color:var(--wine);
  margin-bottom:var(--sp-3);
}
.why__item h3{ margin:0 0 var(--sp-2); }
.why__item p{ color:var(--muted); margin:0; font-size:var(--t-small); }
.why__item .btn{ margin-top:var(--sp-3); }
@media (min-width:861px){
  .why__item{ padding-left:clamp(16px,1.6vw,28px); border-left:1px solid rgba(22,18,15,.12); }
  .why__item:first-child{ padding-left:0; border-left:none; }
}
.menus-band .why__item p em{ font-family:var(--serif); font-size:1.05em; }

/* =========================================================
   STORY
   ========================================================= */
.story{ padding:var(--section-y) var(--gut); }
.story__grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(40px,6vw,100px);
  align-items:center;
}
.story__media{ position:relative; }
.story__media img:first-child{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:4px;
  box-shadow:0 40px 80px -44px rgba(22,18,15,.55);
}
/* The stamp is the one piece of the identity nobody else has —
   it is pressed onto the photograph, not floated beside it. */
.story__stamp{
  position:absolute;
  width:clamp(104px,14vw,172px);
  bottom:-34px; right:-24px;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.28));
  transform:rotate(-6deg);
  aspect-ratio:1/1;
  object-fit:contain;
}
.story__text h2{ margin:0 0 var(--sp-4); max-width:17ch; }
.story__text p{ color:var(--muted); margin:0 0 var(--sp-4); max-width:56ch; }
.story__text .btn{ margin-top:var(--sp-2); }

/* =========================================================
   EXPERIENCE
   ========================================================= */
.experience{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2vw,30px);
  padding:0 var(--gut) var(--section-y);
}
.exp-card{
  background:var(--white);
  border-radius:6px; overflow:hidden;
  box-shadow:0 24px 60px -46px rgba(22,18,15,.6);
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.exp-card:hover{ transform:translateY(-6px); box-shadow:0 40px 80px -42px rgba(22,18,15,.5); }
.exp-card__img{ overflow:hidden; aspect-ratio:5/4; }
.exp-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.exp-card:hover .exp-card__img img{ transform:scale(1.06); }
.exp-card__body{ padding:clamp(24px,2.4vw,36px); }
.exp-card__body .ic{ width:26px; height:26px; color:var(--wine); margin-bottom:var(--sp-3); }
.exp-card__body h3{ margin:0 0 var(--sp-2); }
.exp-card__body p{ color:var(--muted); margin:0; font-size:var(--t-small); }

/* =========================================================
   OUR ISLAND
   ========================================================= */
.island{
  position:relative;
  height:clamp(520px,84vh,840px);
  overflow:hidden;
  display:flex; align-items:flex-end;
  color:var(--cream);
}
.island__media{ position:absolute; inset:-8% 0; z-index:0; will-change:transform; }
.island__media img{ width:100%; height:100%; object-fit:cover; }
.island::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(10,7,5,.88), rgba(10,7,5,.12) 58%, rgba(10,7,5,.32));
}
.island__overlay{
  position:relative; z-index:2; width:100%;
  padding:0 var(--gut) clamp(50px,8vw,104px);
}
.island__overlay h2{ font-size:clamp(2.4rem,6vw,5rem); margin:0 0 var(--sp-4); }
.island__overlay p{ max-width:48ch; color:var(--on-dark); }

/* =========================================================
   STATS
   ========================================================= */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,3vw,50px);
  padding:var(--section-y) var(--gut);
  text-align:center;
}
.stat{ border-left:1px solid var(--sand); padding:0 clamp(10px,1.6vw,28px); }
.stat:first-child{ border-left:none; }
.stat__num{
  display:block; font-family:var(--serif);
  font-size:clamp(2.4rem,5vw,4.2rem);
  line-height:1; letter-spacing:-.02em;
  color:var(--wine);
}
.stat__label{ display:block; margin-top:var(--sp-3); font-size:var(--t-small); color:var(--muted); }

/* =========================================================
   SPORTS CLUB
   ========================================================= */
.sports{
  background:var(--teal); color:var(--cream);
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:clamp(36px,5vw,80px);
  padding:var(--section-y) var(--gut);
}
.sports__text{ max-width:560px; margin-left:auto; padding-right:clamp(0px,4vw,60px); }
.sports__text h2{ margin:0 0 var(--sp-4); }
.sports__text > p{ color:var(--on-dark); margin:0 0 var(--sp-5); max-width:52ch; }
.sports__list{ display:grid; gap:var(--sp-3); margin:0 0 var(--sp-6); }
.sports__list li{ display:flex; align-items:center; gap:.9em; }
.sports__list .ic{ width:22px; height:22px; color:var(--gold-light); }
.sports__media{ border-radius:6px; overflow:hidden; box-shadow:0 40px 90px -44px rgba(0,0,0,.7); }
.sports__media img{ width:100%; aspect-ratio:1/1; object-fit:cover; }

/* =========================================================
   GALLERY
   ========================================================= */
.gallery{ padding:var(--section-y) var(--gut); }
.gallery__head{ text-align:center; margin-bottom:var(--sp-7); }
.gallery__head .eyebrow{ margin-bottom:var(--sp-4); }
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:240px;
  gap:clamp(12px,1.4vw,20px);
}
.g-item{ margin:0; overflow:hidden; border-radius:4px; }
.g-item img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.g-item:hover img{ transform:scale(1.06); }
.g-item--tall{ grid-row:span 2; }
.g-item--wide{ grid-column:span 2; }

/* =========================================================
   INSTAGRAM FEED
   ========================================================= */
.feed{ padding:0 var(--gut) var(--section-y); }
.feed__head{
  text-align:center; display:flex; flex-direction:column; align-items:center;
  gap:var(--sp-4); margin-bottom:var(--sp-6);
}
.feed__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(8px,1vw,14px); }
.feed__item{ position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:3px; }
.feed__item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.feed__item .ic{
  position:absolute; inset:0; margin:auto;
  width:30px; height:30px; color:#fff;
  opacity:0; transform:scale(.7);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.feed__item::after{
  content:""; position:absolute; inset:0;
  background:rgba(158,27,47,0); transition:background .35s var(--ease);
}
.feed__item:hover img,
.feed__item:focus-visible img{ transform:scale(1.07); }
.feed__item:hover::after,
.feed__item:focus-visible::after{ background:rgba(158,27,47,.45); }
.feed__item:hover .ic,
.feed__item:focus-visible .ic{ opacity:1; transform:scale(1); }

/* =========================================================
   VISIT
   ========================================================= */
.visit{
  position:relative;
  background:
    linear-gradient(rgba(22,18,15,.82), rgba(22,18,15,.9)),
    url("../hp-hero.jpg") center/cover no-repeat;
  color:var(--cream);
}
.visit__inner{
  padding:var(--section-y) var(--gut);
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(40px,6vw,90px);
  align-items:center;
}
.visit__intro h2{ margin:0 0 var(--sp-4); }
.visit__intro > p{ color:var(--on-dark); max-width:44ch; margin:0 0 var(--sp-5); }
.visit__cards{ display:grid; gap:clamp(16px,2vw,24px); }
.info-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  padding:clamp(26px,3vw,38px);
}
.info-card .ic{ width:26px; height:26px; color:var(--gold); margin-bottom:var(--sp-3); }
.info-card h4{ margin:0 0 var(--sp-3); }
.info-card p{ margin:0 0 var(--sp-2); color:var(--on-dark); }
.info-card__hours{ display:grid; grid-template-columns:auto 1fr; gap:2px 1.4em; }
.info-card__hours dt{ color:rgba(246,240,228,.62); font-size:var(--t-small); letter-spacing:.1em; text-transform:uppercase; }
.info-card__hours dd{ margin:0; }
.info-card__note{ font-size:var(--t-small); color:var(--gold) !important; margin-top:var(--sp-3); }
.info-card__link{
  display:inline-flex; align-items:center; gap:.5em; color:var(--gold);
  font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase;
  margin-top:var(--sp-3);
}
.info-card__link .ic{ width:15px; height:15px; margin:0; color:inherit; }
.info-card__link:hover{ color:var(--gold-light); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--ink); color:var(--cream); padding:clamp(60px,8vw,100px) var(--gut) 28px; }
.footer__top{
  display:grid; grid-template-columns:1.2fr 2fr; gap:clamp(40px,6vw,90px);
  padding-bottom:var(--sp-7);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer__logo{ height:60px; width:auto; filter:brightness(0) invert(1); margin-bottom:var(--sp-4); }
.footer__brand p{
  color:rgba(246,240,228,.72); max-width:34ch;
  font-style:italic; font-family:var(--serif); font-size:1.15rem; line-height:1.45;
}
.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.footer__col h2{
  font-family:var(--sans); font-size:var(--t-label); letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin:0 0 var(--sp-4); font-weight:500;
}
.footer__col a{
  display:flex; align-items:center; gap:.6em;
  color:rgba(246,240,228,.74); padding:.36em 0;
  transition:color .3s var(--ease), transform .3s var(--ease);
}
.footer__col a:hover{ color:var(--cream); transform:translateX(4px); }
.footer__col--social .ic{ color:var(--gold); }
.footer__bottom{
  margin-top:26px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:var(--t-small); color:rgba(246,240,228,.62);
}
.footer__bottom p{ margin:0; }
.footer__legal{ display:flex; gap:20px; flex-wrap:wrap; }
.footer__legal a:hover{ color:var(--cream); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .story__grid{ grid-template-columns:1fr; }
  .story__media{ max-width:520px; }
  .visit__inner{ grid-template-columns:1fr; }
  .feed__grid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:860px){
  :root{ --header-h:74px; }
  .nav-desktop,
  .nav-social,
  .btn--reserve{ display:none; }
  .burger{ display:flex; }
  .experience{ grid-template-columns:1fr; }
  .sports{ grid-template-columns:1fr; }
  .sports__text{ margin:0; padding:0; }
  .sports__media{ order:-1; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:36px 20px; }
  .stat:nth-child(3){ border-left:none; }
  .gallery__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
  .why__grid{ grid-template-columns:repeat(2,1fr); gap:38px 28px; }
  .footer__top{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  :root{ --gut:22px; }
  .hero{ min-height:560px; }
  .hero__title{ font-size:clamp(2.9rem,15vw,4.4rem); }
  .hero__claim{ font-size:1.25rem; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__scroll{ display:none; }
  .stats{ grid-template-columns:1fr; }
  .stat{ border-left:none; border-top:1px solid var(--sand); padding:22px 0 0; }
  .stat:first-child{ border-top:none; padding-top:0; }
  .gallery__grid{ grid-template-columns:1fr; grid-auto-rows:230px; }
  .g-item--wide,.g-item--tall{ grid-column:auto; grid-row:auto; }
  .feed__grid{ grid-template-columns:repeat(2,1fr); }
  .why__grid{ grid-template-columns:1fr; gap:32px; }
  .footer__cols{ grid-template-columns:1fr 1fr; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .story__stamp{ right:-6px; bottom:-26px; }
}

/* =========================================================
   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;
  }
  .will-reveal{ opacity:1 !important; transform:none !important; }
  .island__media{ transform:none !important; }
}