/* ============ FONTS ============ */
@font-face{ font-family:'Playfair Display'; src:url('fonts/PlayfairDisplay.ttf'); font-weight:400 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Playfair Display'; src:url('fonts/PlayfairDisplay-Italic.ttf'); font-weight:400 900; font-style:italic; font-display:swap; }
@font-face{ font-family:'Jost'; src:url('fonts/Jost.ttf'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Cormorant Garamond'; src:url('fonts/CormorantGaramond.ttf'); font-weight:300 700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Cormorant Garamond'; src:url('fonts/CormorantGaramond-Italic.ttf'); font-weight:300 700; font-style:italic; font-display:swap; }

/* ============ TOKENS ============ */
:root{
  --forest:#16321C;
  --forest-deep:#0B1E10;
  --olive:#6E9B33;
  --olive-light:#9CC155;
  --terracotta:#A6462B;
  --cream:#FAF6EC;
  --cream-warm:#F1EADA;
  --gold:#B8924A;
  --ink:#1B2230;
  --serif:'Playfair Display', serif;
  --sans:'Jost', sans-serif;
  --accent-serif:'Cormorant Garamond', serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.025; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow{
  font-family:var(--accent-serif); font-style:italic; font-weight:500;
  color:var(--terracotta); letter-spacing:.06em; font-size:clamp(1rem,1.6vw,1.15rem);
  margin-bottom:.6em;
}
h1,h2,h3,h4{ font-family:var(--serif); color:var(--forest); font-weight:600; line-height:1.08; }
.body{ font-size:clamp(.95rem,1.1vw,1.05rem); line-height:1.75; color:#3d4636; font-weight:300; max-width:46ch; }
.light{ color:var(--cream) !important; }
.light-body{ color:#dfe4d2 !important; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95em 2em; border-radius:2px; font-size:.85rem; letter-spacing:.08em;
  text-transform:uppercase; font-weight:500; transition:transform .35s ease, background .35s ease, color .35s ease, box-shadow .35s ease;
}
.btn-primary{ background:var(--olive); color:#fff; box-shadow:0 8px 24px rgba(110,155,51,.35); }
.btn-primary:hover{ background:var(--olive-light); transform:translateY(-2px); }
.btn-ghost{ border:1px solid rgba(255,255,255,.55); color:#fff; }
.btn-ghost:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }

section, footer{ position:relative; }

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 5vw; transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
}
.nav.scrolled{ background:rgba(11,30,16,.88); backdrop-filter:blur(10px); padding:14px 5vw; box-shadow:0 6px 24px rgba(0,0,0,.15); }
.nav-logo{ height:44px; transition:height .4s ease; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.nav.scrolled .nav-logo{ height:36px; }
.nav-links{ display:flex; align-items:center; gap:2.2rem; }
.nav-links a{
  color:#fff; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  position:relative; padding-bottom:4px;
}
.nav-links a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--olive-light);
  transition:width .3s ease;
}
.nav-links a:not(.nav-cta):hover::after{ width:100%; }
.nav-cta{
  background:var(--olive); padding:.6em 1.4em; border-radius:2px; box-shadow:0 6px 18px rgba(110,155,51,.35);
}
.nav-cta:hover{ background:var(--olive-light); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; z-index:210; }
.nav-toggle span{ width:26px; height:2px; background:#fff; display:block; transition:.3s; transform-origin:center; }
.nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============ HERO ============ */
.hero{ height:100vh; min-height:640px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center 32%;
  transform:scale(1.08);
  animation:heroZoom 18s ease-out forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,25,15,.35) 0%, rgba(11,25,15,.15) 35%, rgba(11,25,15,.4) 70%, rgba(11,25,15,.72) 100%);
}
.hero-rays{ position:absolute; width:min(70vw,720px); height:min(70vw,720px); top:8%; left:50%; transform:translateX(-50%); opacity:.5; pointer-events:none; }
.hero-content{ position:relative; z-index:2; text-align:center; max-width:900px; padding:0 6vw; }
.hero-title{
  font-size:clamp(3rem,9vw,6.2rem); color:#fff; margin-top:.2em;
  text-shadow:0 6px 30px rgba(0,0,0,.35);
}
.hero-title span{
  display:block; font-family:var(--accent-serif); font-style:italic; font-weight:500;
  color:var(--olive-light); font-size:.32em; margin-top:.35em; letter-spacing:.03em;
}
.hero-sub{
  color:#eef1e6; max-width:640px; margin:1.6em auto 0; font-weight:300; font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.7;
}
.hero-actions{ margin-top:2.6em; display:flex; gap:1.1em; justify-content:center; flex-wrap:wrap; }
.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:2;
  width:26px; height:42px; border:1.5px solid rgba(255,255,255,.6); border-radius:20px;
}
.scroll-cue span{
  position:absolute; top:8px; left:50%; width:4px; height:4px; margin-left:-2px;
  background:#fff; border-radius:50%; animation:scrollCue 1.8s ease infinite;
}
@keyframes scrollCue{ 0%{ opacity:1; top:8px;} 70%{opacity:0;} 100%{ top:24px; opacity:0;} }

/* ============ WELCOME ============ */
.welcome{ padding:9rem 6vw 5rem; max-width:1360px; margin:0 auto; }
.welcome-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:5vw; align-items:center; }
.welcome-copy h2{ font-size:clamp(2rem,3.4vw,2.8rem); margin-bottom:.5em; }
.welcome-copy .body{ max-width:52ch; margin-bottom:1.2em; }
.welcome-photo img{ border-radius:4px; box-shadow:0 30px 60px -20px rgba(22,50,28,.35); }
.stats{
  margin-top:6rem; display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:var(--forest); border-radius:4px; overflow:hidden;
}
.stat{ padding:2.6rem 1.8rem; color:var(--cream); }
.stat-num{ display:block; font-family:var(--serif); font-size:clamp(2rem,3.2vw,2.6rem); color:var(--olive-light); font-weight:700; }
.stat-label{ display:block; margin-top:.5em; font-size:.85rem; color:#c9d3ba; line-height:1.5; max-width:20ch; }

/* ============ SECTION HEAD (shared) ============ */
.section-head{ max-width:680px; margin:0 auto 3.5rem; text-align:center; padding:0 6vw; }
.section-head h2{ font-size:clamp(2rem,3.4vw,2.8rem); margin-bottom:.4em; }
.section-head .body{ margin:0 auto; }
.light-head h2, .light-head .eyebrow{ color:inherit; }

/* ============ STAY ============ */
.stay{ padding:7rem 6vw; max-width:1360px; margin:0 auto; }
.stay-photos{ display:grid; grid-template-columns:1.4fr 1fr; gap:1.4rem; margin-bottom:4rem; }
.stay-photos img{ width:100%; height:340px; object-fit:cover; border-radius:4px; }
.room-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.4rem 2rem; }
.room-card{ border-top:2px solid var(--olive); padding-top:1rem; }
.room-card h3{ font-size:1.15rem; margin-bottom:.4em; }
.room-card p{ font-size:.88rem; line-height:1.6; color:#4a5240; font-weight:300; }

/* ============ DINE ============ */
.dine{ min-height:100vh; display:flex; align-items:center; }
.dine-bg{ position:absolute; inset:0; background-size:cover; background-position:center 25%; }
.dine-scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,25,15,.95) 0%, rgba(11,25,15,.86) 40%, rgba(11,25,15,.35) 68%, rgba(11,25,15,.05) 100%); }
.dine-inner{ position:relative; z-index:2; width:100%; display:grid; grid-template-columns:1.2fr .8fr; gap:4vw; padding:8rem 6vw; align-items:center; }
.dine-copy h2{ font-size:clamp(2.2rem,3.8vw,3.2rem); }
.dine-feats{ margin-top:2.2rem; display:grid; grid-template-columns:1fr 1fr; gap:1.6rem 2rem; }
.dine-feats h4{ color:var(--olive-light); font-size:1.02rem; margin-bottom:.25em; }
.dine-feats p{ color:#d7ddc7; font-size:.85rem; font-weight:300; }
.dine-gallery{ display:flex; flex-direction:column; gap:1.4rem; }
.dine-card{ background:var(--cream); padding:10px; border-radius:3px; box-shadow:0 20px 45px rgba(0,0,0,.35); }
.dine-card img{ width:100%; height:170px; object-fit:cover; border-radius:2px; }
.dine-card span{ display:block; text-align:center; font-family:var(--accent-serif); font-style:italic; color:var(--forest); padding-top:.6em; font-size:.95rem; }

/* ============ POOLS ============ */
.pools{ padding:7rem 6vw; max-width:1360px; margin:0 auto; }
.pool-grid{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:1.2rem; height:680px; }
.pool-card{ position:relative; border-radius:4px; overflow:hidden; }
.pool-card img{ width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.pool-card:hover img{ transform:scale(1.06); }
.pool-card figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem;
  background:linear-gradient(0deg, rgba(11,25,15,.8), transparent);
  color:#fff; font-size:.92rem; letter-spacing:.02em;
}

/* ============ CELEBRATE ============ */
.celebrate{ padding:7rem 6vw 0; max-width:1360px; margin:0 auto; }
.celebrate-photo{ float:right; width:46%; margin-left:4vw; margin-bottom:2rem; shape-outside:none; }
.celebrate-photo img{ border-radius:4px; height:460px; object-fit:cover; }
.celebrate-copy{ max-width:640px; }
.celebrate-copy h2{ font-size:clamp(2rem,3.4vw,2.8rem); }
.tick-list{ margin-top:1.6rem; display:grid; gap:.7rem; }
.tick-list li{ padding-left:1.6em; position:relative; color:#3d4636; font-size:.95rem; }
.tick-list li::before{ content:"—"; position:absolute; left:0; color:var(--terracotta); }
.celebrate-strip{ clear:both; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:4rem; padding-bottom:7rem; }
.celebrate-strip img{ height:260px; width:100%; object-fit:cover; border-radius:4px; }

/* ============ PLAY ============ */
.play{ background:var(--forest); padding:7rem 6vw; }
.play .section-head{ margin-bottom:4rem; }
.play-grid{ max-width:1360px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.play-card{ position:relative; border-radius:4px; overflow:hidden; }
.play-card img{ width:100%; height:360px; object-fit:cover; transition:transform .8s ease; }
.play-card:hover img{ transform:scale(1.06); }
.play-card span{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem;
  background:linear-gradient(0deg, rgba(11,25,15,.85), transparent);
  color:#fff; font-family:var(--serif); font-size:1.05rem;
}

/* ============ RESIDENTS ============ */
.residents{ min-height:100vh; display:flex; align-items:flex-end; }
.residents-bg{ position:absolute; inset:0; background-size:cover; background-position:center 35%; }
.residents-scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(11,25,15,.9) 0%, rgba(11,25,15,.35) 45%, rgba(11,25,15,.05) 70%); }
.residents-inner{ position:relative; z-index:2; max-width:640px; padding:0 6vw 6rem; }
.residents-inner h2{ font-size:clamp(2.2rem,3.8vw,3rem); }
.residents-inset{
  position:absolute; z-index:2; top:7rem; right:6vw; width:min(280px,26vw);
  background:var(--cream); padding:10px; border-radius:3px; box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.residents-inset img{ width:100%; height:220px; object-fit:cover; border-radius:2px; }
.residents-inset figcaption{ text-align:center; font-family:var(--accent-serif); font-style:italic; color:var(--forest); padding-top:.6em; font-size:.9rem; }

/* ============ GATHER ============ */
.gather{ padding:7rem 6vw; max-width:1360px; margin:0 auto; }
.gather-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:auto; gap:1.2rem; }
.gather-big{ grid-row:1/3; }
.gather-list{ grid-row:1/3; }
.gather-grid img{ width:100%; height:100%; object-fit:cover; border-radius:4px; min-height:180px; }
.gather-big img{ min-height:376px; }
.gather-list{ background:var(--forest); color:var(--cream); border-radius:4px; padding:2rem 1.8rem; }
.gather-list h4{ color:var(--olive-light); font-size:1.1rem; margin-bottom:.8em; }
.gather-list li{ padding:.35em 0; font-size:.9rem; font-weight:300; padding-left:1.3em; position:relative; }
.gather-list li::before{ content:"—"; position:absolute; left:0; color:var(--gold); }

/* ============ EXPLORE ============ */
.explore{ padding:7rem 6vw 8rem; max-width:1360px; margin:0 auto; }
.explore-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
.explore-card{ border:1px solid #ddd4bc; border-radius:4px; padding:1.8rem 1.5rem; transition:box-shadow .3s ease, transform .3s ease; }
.explore-card:hover{ box-shadow:0 20px 40px -20px rgba(22,50,28,.25); transform:translateY(-4px); }
.explore-tag{ font-family:var(--accent-serif); font-style:italic; color:var(--terracotta); font-size:.95rem; }
.explore-card h4{ font-size:1.1rem; margin:.4em 0 .5em; }
.explore-card p{ font-size:.86rem; color:#4a5240; font-weight:300; line-height:1.6; }

/* ============ CONTACT / FOOTER ============ */
.contact{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; overflow:hidden; }
.contact-bg{ position:absolute; inset:0; background-size:cover; background-position:center 45%; }
.contact-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,25,15,.55) 0%, rgba(11,25,15,.35) 40%, rgba(11,25,15,.75) 100%); }
.contact-inner{ position:relative; z-index:2; padding:6rem 6vw 3rem; }
.contact-logo{ width:130px; margin:0 auto 1.4rem; filter:drop-shadow(0 4px 14px rgba(0,0,0,.4)); }
.contact-inner h2{ font-size:clamp(2.2rem,4vw,3.2rem); }
.contact-row{ margin-top:2.4rem; display:flex; gap:2.6rem; flex-wrap:wrap; justify-content:center; color:#eef1e6; font-size:.92rem; }
.contact-row div{ text-align:left; }
.contact-row .k{ display:block; color:var(--olive-light); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.35em; }
.contact-inner .btn{ margin-top:2.6rem; }
.contact-bottom{
  position:relative; z-index:2; width:100%; padding:1.6rem 6vw; display:flex; justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.15); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:#c9d3ba;
}

/* ============ SCROLL REVEAL BASE ============ */
.reveal, .reveal-up, .reveal-img{ opacity:0; }
.reveal{ transform:translateY(28px); }
.reveal-up{ transform:translateY(22px); }
.reveal-img{ transform:scale(.96); }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .welcome-grid{ grid-template-columns:1fr; }
  .welcome-photo{ order:-1; }
  .room-grid{ grid-template-columns:repeat(2,1fr); }
  .dine-inner{ grid-template-columns:1fr; }
  .dine-gallery{ flex-direction:row; }
  .pool-grid{ grid-template-columns:1fr 1fr; height:auto; grid-template-rows:repeat(2,220px); }
  .celebrate-photo{ float:none; width:100%; margin:0 0 2rem; }
  .celebrate-strip{ grid-template-columns:1fr 1fr; }
  .play-grid{ grid-template-columns:1fr; }
  .gather-grid{ grid-template-columns:1fr 1fr; }
  .gather-big{ grid-column:1/3; grid-row:1; }
  .gather-list{ grid-column:1/3; grid-row:auto; }
  .explore-grid{ grid-template-columns:1fr 1fr; }
  .residents-inset{ width:200px; top:auto; bottom:2rem; right:4vw; }
}
@media (max-width: 700px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:78vw; height:100vh;
    background:var(--forest-deep); flex-direction:column; justify-content:center; align-items:flex-start;
    padding:2rem 8vw; gap:2rem; transform:translateX(100%); transition:transform .45s ease;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{ display:flex; }
  .stay-photos{ grid-template-columns:1fr; }
  .room-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .celebrate-strip{ grid-template-columns:1fr; }
  .gather-grid{ grid-template-columns:1fr; }
  .gather-big{ grid-column:1; grid-row:auto; }
  .gather-list{ grid-column:1; }
  .explore-grid{ grid-template-columns:1fr; }
  .contact-row{ gap:1.6rem; }
}

@media (max-width: 520px){
  .dine-feats{ grid-template-columns:1fr; }
  .hero-title{ font-size:clamp(2.4rem,13vw,3.6rem); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
