/* ================================================================
   SHANIKAS CARRUM DOWNS — shared design system (index + menu pages)
   ================================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --ink:#0d0d0d; --char:#1a1815; --bone:#f4f0e9; --cream:#ece5d8;
  --sand:#cbb79a; --gold:#b08d57; --gold-lt:#d8be93; --grey:#9a948a;
  --line:rgba(176,141,87,.28);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --slow:cubic-bezier(.77,0,.175,1);
  --maxw:1280px;
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body{ font-family:var(--sans); background:var(--ink); color:var(--bone);
  line-height:1.65; overflow-x:hidden; cursor:none; }
@media (max-width:900px){ body{ cursor:auto; } }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:none; border:none; background:none; }
@media (max-width:900px){ button{ cursor:pointer; } }
::selection{ background:var(--gold); color:var(--ink); }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.05; }
.wrap{ width:90%; max-width:var(--maxw); margin-inline:auto; }
.eyebrow{ font-family:var(--sans); font-weight:500; font-size:.72rem; letter-spacing:.42em;
  text-transform:uppercase; color:var(--gold); display:inline-block; position:relative; padding-left:54px; }
.eyebrow::before{ content:""; position:absolute; left:0; top:50%; width:40px; height:1px; background:var(--gold); opacity:.7; }
.eyebrow.center{ padding-left:0; } .eyebrow.center::before{ display:none; }

/* ---------- 3. CUSTOM CURSOR ---------- */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; border-radius:50%; pointer-events:none;
  z-index:9999; transform:translate(-50%,-50%); mix-blend-mode:difference; }
.cursor-dot{ width:7px; height:7px; background:var(--bone); }
.cursor-ring{ width:38px; height:38px; border:1px solid var(--bone);
  transition:width .35s var(--ease),height .35s var(--ease),background .35s var(--ease); }
.cursor-ring.grow{ width:74px; height:74px; background:rgba(244,240,233,.12); }
@media (max-width:900px){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---------- 4. PAGE-TRANSITION SHUTTER (the signature transition) ---------- */
/* Five vertical bars. The reveal (intro) is a PURE-CSS animation so the page
   is never trapped behind the curtain even if JS is slow or fails. JS only
   adds .down to play the exit before navigating to another page. */
.curtain{ position:fixed; inset:0; z-index:9500; display:grid;
  grid-template-columns:repeat(5,1fr); pointer-events:none; }
/* Bars start covering, then lift AFTER the logo has appeared (delay ~.6s). */
.curtain b{ background:var(--ink); transform-origin:top; border-right:1px solid rgba(176,141,87,.06);
  animation:curtIntro .8s var(--slow) both; }
.curtain b:nth-child(1){ animation-delay:.60s } .curtain b:nth-child(2){ animation-delay:.67s }
.curtain b:nth-child(3){ animation-delay:.74s } .curtain b:nth-child(4){ animation-delay:.81s }
.curtain b:nth-child(5){ animation-delay:.88s }
@keyframes curtIntro{ from{ transform:scaleY(1); } to{ transform:scaleY(0); } }
/* leaving the page — bars drop back down to cover */
.curtain.down b{ transform-origin:bottom; animation:curtOut .55s var(--slow) forwards; }
.curtain.down b:nth-child(1){ animation-delay:.00s } .curtain.down b:nth-child(2){ animation-delay:.05s }
.curtain.down b:nth-child(3){ animation-delay:.10s } .curtain.down b:nth-child(4){ animation-delay:.15s }
.curtain.down b:nth-child(5){ animation-delay:.20s }
@keyframes curtOut{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }

/* Centred brand logo, shown over the curtain during EVERY page transition.
   - first / direct load  -> clCycle (fades in, holds, fades out as bars lift)
   - arrived via a link    -> clArrive (already visible from the exit, fades out) = seamless
   - clicking a link (exit) -> clLeave (pops in while bars drop to cover) */
.curtain-logo{ position:fixed; inset:0; z-index:9501; display:grid; place-items:center; pointer-events:none; }
.curtain-logo img{ width:clamp(150px,24vw,240px); opacity:0; }
html:not(.sk-arrive) .curtain-logo img{ animation:clCycle 1.3s var(--ease) forwards; }
html.sk-arrive .curtain-logo img{ opacity:1; animation:clArrive 1.05s var(--ease) forwards; }
.curtain-logo.leaving img{ animation:clLeave .5s var(--ease) forwards; }
@keyframes clCycle{ 0%{ opacity:0; transform:translateY(16px) scale(.94); }
  30%{ opacity:1; transform:none; } 60%{ opacity:1; transform:none; }
  100%{ opacity:0; transform:translateY(-14px) scale(1.02); } }
@keyframes clArrive{ 0%{ opacity:1; transform:none; } 45%{ opacity:1; transform:none; }
  100%{ opacity:0; transform:translateY(-14px) scale(1.02); } }
@keyframes clLeave{ from{ opacity:0; transform:translateY(14px) scale(.92); } to{ opacity:1; transform:none; } }

/* ---------- 5. SCROLL PROGRESS ---------- */
.scroll-progress{ position:fixed; top:0; left:0; height:2px; width:0; z-index:1100;
  background:linear-gradient(90deg,var(--gold),var(--gold-lt)); }

/* ---------- 6. NAV (shared) ---------- */
header.nav{ position:fixed; top:0; left:0; width:100%; z-index:1000; display:flex; align-items:center;
  justify-content:space-between; padding:20px 5%; transition:padding .5s var(--ease),
  background .5s var(--ease),backdrop-filter .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent; }
header.nav.scrolled{ padding:10px 5%; background:rgba(13,13,13,.72);
  backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--line); }
.brand-logo{ display:flex; align-items:center; }
.brand-logo img{ height:62px; width:auto; transition:height .5s var(--ease),filter .4s var(--ease); }
header.nav.scrolled .brand-logo img{ height:46px; }
.brand-logo:hover img{ filter:drop-shadow(0 0 14px rgba(216,190,147,.45)); }
.nav-links{ display:flex; gap:38px; align-items:center; list-style:none; }
/* generic nav links — exclude the .btn-book so it keeps its own padding/colour and gets no underline */
.nav-links a:not(.btn-book){ font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bone);
  position:relative; padding:6px 0; opacity:.85; transition:opacity .3s var(--ease); }
.nav-links a:not(.btn-book)::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold); transition:width .4s var(--ease); }
.nav-links a:not(.btn-book):hover{ opacity:1; } .nav-links a:not(.btn-book):hover::after{ width:100%; }
.nav-links a.current{ color:var(--gold-lt); opacity:1; } .nav-links a.current::after{ width:100%; }

/* ---------- 7. BUTTONS ---------- */
.btn-book{ display:inline-block; position:relative; padding:13px 26px; font-size:.7rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink); background:var(--gold); overflow:hidden; isolation:isolate;
  transition:color .5s var(--ease); }
.btn-book::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--bone);
  transform:translateY(101%); transition:transform .5s var(--ease); }
.btn-book:hover::before{ transform:translateY(0); }
.btn-ghost{ display:inline-block; position:relative; padding:16px 34px; font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--bone); border:1px solid var(--line); overflow:hidden; isolation:isolate;
  transition:color .5s var(--ease),border-color .5s var(--ease); }
.btn-ghost::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.btn-ghost:hover{ color:var(--ink); border-color:var(--gold); }
.btn-ghost:hover::before{ transform:scaleX(1); }

.burger{ display:none; flex-direction:column; gap:6px; width:30px; }
.burger span{ height:1.5px; width:100%; background:var(--bone); transition:.4s var(--ease); }
.burger.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
@media (max-width:900px){
  .nav-links{ position:fixed; inset:0; z-index:1000; flex-direction:column; justify-content:center;
    background:rgba(13,13,13,.98); gap:32px; overflow-y:auto; padding:88px 24px;
    transform:translateX(100%); transition:transform .6s var(--slow); }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-size:1.05rem; }
  .nav-links .btn-book{ margin-top:6px; padding:16px 44px; font-size:.8rem; }  /* show CTA inside the menu */
  .burger{ display:flex; z-index:1001; }
  .brand-logo img{ height:48px; }
  /* CRITICAL: while the mobile menu is open, drop the header's backdrop-filter &
     background. A filtered/blurred ancestor becomes the containing block for the
     fixed overlay, which (after scrolling adds .scrolled) collapsed the menu into
     the nav bar. Removing it lets the overlay fill the viewport again. */
  body.menu-open header.nav{ background:transparent!important; border-color:transparent!important;
    -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
  body.menu-open .scroll-progress{ opacity:0; }
  body.menu-open{ overflow:hidden; }        /* lock page scroll behind the menu */
  /* iOS Safari mishandles background-attachment:fixed — use scroll on touch screens */
  .reserve, .menu-teaser{ background-attachment:scroll; }
}
.sticky-book{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(120%); z-index:900;
  padding:15px 34px; background:var(--gold); color:var(--ink); font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; box-shadow:0 14px 40px rgba(0,0,0,.5); transition:transform .6s var(--ease); border-radius:2px; }
.sticky-book.show{ transform:translateX(-50%) translateY(0); }
@media (min-width:901px){ .sticky-book{ display:none; } }

/* ---------- 8. SECTION SCAFFOLD + REVEAL ---------- */
.section{ padding:130px 0; }
.section-head{ max-width:640px; margin-bottom:64px; }
.section-head h2{ font-size:clamp(2.4rem,5vw,4.2rem); margin:20px 0 18px; }
.section-head p{ color:var(--grey); font-weight:300; }
.center-head{ margin-inline:auto; text-align:center; }
[data-reveal]{ transition:opacity 1s var(--ease),transform 1s var(--ease); }
.js [data-reveal]{ opacity:0; transform:translateY(46px); }   /* hidden only when JS can reveal them */
[data-reveal].in{ opacity:1; transform:none; }
.d1{ transition-delay:.12s; } .d2{ transition-delay:.24s; } .d3{ transition-delay:.36s; }

/* ---------- 9. FOOTER (shared) ---------- */
footer{ background:var(--ink); padding:80px 0 40px; border-top:1px solid var(--line); }
.foot-top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:40px; }
.foot-brand img{ height:96px; width:auto; }
.foot-brand p{ color:var(--grey); font-weight:300; max-width:34ch; margin-top:16px; font-size:.92rem; }
.foot-cols{ display:flex; gap:70px; flex-wrap:wrap; }
.foot-col h5{ font-family:var(--sans); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; }
.foot-col a,.foot-col p{ display:block; color:var(--grey); font-size:.9rem; font-weight:300; margin-bottom:10px; transition:color .3s; }
.foot-col a:hover{ color:var(--bone); }
.foot-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:60px; padding-top:30px;
  border-top:1px solid var(--line); font-size:.74rem; color:var(--grey); letter-spacing:.06em; }
.foot-bottom a:hover{ color:var(--gold); }

/* ================================================================
   INDEX (LANDING) — Hero + About + Experience + Reserve + Contact
   ================================================================ */
.hero{ height:100vh; min-height:640px; display:flex; align-items:center; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:-2;
  background:linear-gradient(180deg,rgba(13,13,13,.55) 0%,rgba(13,13,13,.34) 40%,rgba(13,13,13,.92) 100%),
  url("assets/hero.jpg") center/cover no-repeat;
  transform:scale(1.12); animation:heroZoom 12s var(--ease) forwards; }
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(circle at 50% 40%,transparent 40%,rgba(0,0,0,.55) 100%); }
.hero-watermark{ position:absolute; right:-4%; top:50%; transform:translateY(-50%); width:min(48vw,640px);
  opacity:.05; z-index:-1; pointer-events:none; animation:wmFloat 14s ease-in-out infinite alternate; }
@keyframes wmFloat{ to{ transform:translateY(-54%) rotate(2deg); } }
.hero-inner{ width:90%; max-width:var(--maxw); margin-inline:auto; }
.hero h1{ font-size:clamp(3rem,9vw,8.5rem); letter-spacing:.01em; max-width:13ch; margin:22px 0 26px; }
.hero h1 .reveal-line{ display:block; overflow:hidden; }
.hero h1 .reveal-line span{ display:block; }
.hero p.lead{ max-width:46ch; font-weight:300; font-size:1.05rem; color:var(--cream); opacity:.92; }
.hero-cta{ display:flex; gap:18px; flex-wrap:wrap; margin-top:38px; align-items:center; }
/* hero entrance — pure CSS, only armed when JS is present (.js). Delays clear the curtain.
   Without JS the content simply shows immediately (no hidden state). */
.js .hero h1 .reveal-line span{ transform:translateY(110%); }
.js .hero-eyebrow,.js .hero .lead,.js .hero-cta,.js .scroll-hint{ opacity:0; }
.js .hero-eyebrow{ animation:rise 1s var(--ease) 1.15s forwards; }
.js .hero h1 .reveal-line:nth-child(1) span{ animation:riseUp 1.1s var(--ease) 1.3s forwards; }
.js .hero h1 .reveal-line:nth-child(2) span{ animation:riseUp 1.1s var(--ease) 1.45s forwards; }
.js .hero .lead{ animation:rise 1s var(--ease) 1.8s forwards; }
.js .hero .hero-cta{ animation:rise 1s var(--ease) 2.0s forwards; }
.js .scroll-hint{ animation:rise 1s ease 2.4s forwards; }
@keyframes riseUp{ from{ transform:translateY(110%); } to{ transform:translateY(0); } }
@keyframes rise{ to{ opacity:1; transform:none; } }
.scroll-hint{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%); display:flex;
  flex-direction:column; align-items:center; gap:10px; font-size:.6rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--grey); }
.scroll-hint .bar{ width:1px; height:46px; background:linear-gradient(var(--gold),transparent); position:relative; overflow:hidden; }
.scroll-hint .bar::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--bone); animation:scrollDrop 2s var(--ease) infinite; }
@keyframes scrollDrop{ to{ top:120%; } }

.marquee{ background:var(--char); border-block:1px solid var(--line); overflow:hidden; padding:18px 0; white-space:nowrap; }
.marquee-track{ display:inline-flex; gap:60px; animation:scroll 28s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee span{ font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--sand); }
.marquee span b{ color:var(--gold); font-style:normal; margin-right:60px; }
@keyframes scroll{ to{ transform:translateX(-50%); } }

.about{ background:var(--ink); }
.about-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:80px; align-items:center; }
.about-media{ position:relative; }
.about-media .frame{ position:relative; overflow:hidden; aspect-ratio:4/5; border:1px solid var(--line); }
.about-media .frame img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 1.4s var(--ease); filter:grayscale(.2) contrast(1.02); }
.about-media:hover .frame img{ transform:scale(1); }
.about-media .badge{ position:absolute; bottom:-32px; right:-22px; background:var(--gold); color:var(--ink);
  width:170px; height:170px; border-radius:50%; display:grid; place-items:center; text-align:center;
  font-family:var(--serif); transform:rotate(-8deg); box-shadow:0 20px 50px rgba(0,0,0,.5); }
.about-media .badge b{ font-size:2.6rem; display:block; line-height:1; }
.about-media .badge small{ font-family:var(--sans); font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; }
.about-copy h2{ font-size:clamp(2.2rem,4.4vw,3.6rem); margin:18px 0 26px; }
.about-copy p{ color:var(--cream); font-weight:300; margin-bottom:20px; opacity:.9; }
.about-copy p.intro{ font-family:var(--serif); font-size:1.5rem; font-style:italic; color:var(--bone); line-height:1.4; }
.signature{ font-family:var(--serif); font-style:italic; font-size:1.7rem; color:var(--gold); margin-top:28px; }
.about-stats{ display:flex; gap:46px; margin-top:40px; border-top:1px solid var(--line); padding-top:30px; }
.about-stats div b{ font-family:var(--serif); font-size:2.6rem; color:var(--gold); display:block; line-height:1; }
.about-stats div small{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--grey); }
.about-cta{ margin-top:38px; }
@media (max-width:900px){
  .about-grid{ grid-template-columns:1fr; gap:80px; }
  .about-media .badge{ width:130px; height:130px; right:8px; } .about-media .badge b{ font-size:2rem; }
}

/* menu teaser band on landing */
.menu-teaser{ position:relative; background:linear-gradient(rgba(13,13,13,.82),rgba(13,13,13,.88)),
  url("assets/ambience.jpg") center/cover fixed; border-block:1px solid var(--line); text-align:center; }
.menu-teaser h2{ font-size:clamp(2.6rem,6vw,5rem); margin:18px 0 24px; }
.menu-teaser p{ max-width:46ch; margin:0 auto 36px; color:var(--cream); font-weight:300; }

.exp{ background:var(--ink); }
.exp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.exp-card{ position:relative; overflow:hidden; aspect-ratio:3/4; border:1px solid var(--line); }
.exp-card img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform 1.2s var(--ease); filter:brightness(.78); }
.exp-card:hover img{ transform:scale(1.14); filter:brightness(.9); }
.exp-card .cap{ position:absolute; left:24px; bottom:22px; right:24px; transform:translateY(14px); opacity:0; transition:.5s var(--ease); }
.exp-card:hover .cap{ transform:none; opacity:1; }
.exp-card .cap h4{ font-size:1.6rem; } .exp-card .cap small{ font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
@media (max-width:780px){ .exp-grid{ grid-template-columns:1fr 1fr; } }

.reserve{ background:linear-gradient(rgba(13,13,13,.86),rgba(13,13,13,.92)),
  url("assets/reserve.jpg") center/cover fixed; border-top:1px solid var(--line); }
.reserve-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:80px; align-items:center; }
.reserve-copy h2{ font-size:clamp(2.4rem,5vw,4rem); margin:18px 0 22px; }
.reserve-copy p{ color:var(--cream); font-weight:300; opacity:.9; max-width:42ch; }
.reserve-copy .phone-line{ margin-top:34px; }
.reserve-copy .phone-line small{ font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--grey); display:block; margin-bottom:6px; }
.reserve-copy .phone-line a{ font-family:var(--serif); font-size:2rem; color:var(--gold-lt); transition:color .3s; }
.reserve-copy .phone-line a:hover{ color:var(--bone); }
.reserve-form{ background:rgba(244,240,233,.04); border:1px solid var(--line); backdrop-filter:blur(6px); padding:46px; border-radius:4px; }
.field{ margin-bottom:24px; position:relative; }
.field label{ display:block; font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.field input,.field select{ width:100%; background:transparent; border:none; border-bottom:1px solid var(--line);
  color:var(--bone); font-family:var(--sans); font-size:1rem; padding:10px 0; transition:border-color .4s var(--ease); }
.field input:focus,.field select:focus{ outline:none; border-color:var(--gold); }
.field select option{ background:var(--char); color:var(--bone); }
.field input::-webkit-calendar-picker-indicator{ filter:invert(.8) sepia(1) hue-rotate(5deg); cursor:pointer; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.btn-submit{ width:100%; margin-top:14px; padding:18px; background:var(--gold); color:var(--ink); font-size:.74rem;
  letter-spacing:.26em; text-transform:uppercase; position:relative; overflow:hidden; isolation:isolate; transition:color .5s var(--ease); }
.btn-submit::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--bone); transform:translateY(101%); transition:transform .5s var(--ease); }
.btn-submit:hover::before{ transform:translateY(0); }
.form-msg{ text-align:center; margin-top:18px; font-size:1rem; color:var(--gold-lt); font-family:var(--serif); font-style:italic; min-height:24px; }
/* WowApps booking panel (replaces the demo form) */
.reserve-form.book{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:18px; padding:56px 46px; }
.reserve-form.book .rb-eyebrow{ font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); }
.reserve-form.book h3{ font-size:clamp(1.9rem,3.2vw,2.6rem); color:var(--bone); }
.reserve-form.book p{ color:var(--cream); font-weight:300; max-width:38ch; }
.reserve-form.book .btn-book{ padding:18px 42px; font-size:.78rem; margin-top:6px; }
.reserve-form.book .rb-alt{ font-size:.86rem; color:var(--grey); margin-top:8px; }
.reserve-form.book .rb-alt a{ color:var(--gold-lt); border-bottom:1px solid transparent; transition:border-color .3s; }
.reserve-form.book .rb-alt a:hover{ border-color:var(--gold); }
@media (max-width:900px){ .reserve-grid{ grid-template-columns:1fr; gap:50px; } .reserve-form{ padding:32px; } }

.contact{ background:var(--char); border-top:1px solid var(--line); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.contact-info{ padding:90px 7% 90px 0; }
.contact-info h2{ font-size:clamp(2.2rem,4.4vw,3.4rem); margin:18px 0 36px; }
.info-block{ margin-bottom:34px; padding-bottom:34px; border-bottom:1px solid var(--line); }
.info-block:last-child{ border-bottom:none; }
.info-block h4{ font-family:var(--sans); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.info-block p{ font-size:1.05rem; color:var(--cream); font-weight:300; }
.info-block a{ color:var(--cream); border-bottom:1px solid transparent; transition:border-color .3s; }
.info-block a:hover{ border-color:var(--gold); }
.hours-row{ display:flex; justify-content:space-between; padding:7px 0; max-width:380px; border-bottom:1px dashed var(--line); }
.hours-row:last-child{ border-bottom:none; }
.hours-row span:first-child{ color:var(--cream); } .hours-row span:last-child{ color:var(--grey); font-size:.92rem; }
.contact-map{ position:relative; min-height:520px; border-left:1px solid var(--line); filter:grayscale(.4) contrast(1.05); }
.contact-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; } .contact-info{ padding:80px 0; }
  .contact-map{ min-height:360px; border-left:none; border-top:1px solid var(--line); }
}

/* ================================================================
   MENU PAGE — deliberately a different, editorial "menu card" layout
   ================================================================ */
.menu-page{ background:
  radial-gradient(120vw 80vh at 80% -10%, rgba(176,141,87,.10), transparent 60%),
  radial-gradient(90vw 70vh at 0% 110%, rgba(176,141,87,.07), transparent 55%), var(--ink); }
.menu-hero{ padding:170px 0 40px; text-align:center; position:relative; }
.menu-hero .eyebrow{ margin-bottom:18px; }
.menu-hero h1{ font-size:clamp(3rem,8vw,6.5rem); letter-spacing:.01em; }
.menu-hero p{ color:var(--grey); font-weight:300; margin-top:16px; }
/* faint Shanikas logo watermark behind the menu content (static — same on every tab) */
.menu-watermark{ position:fixed; left:50%; top:54%; transform:translate(-50%,-50%); z-index:0; pointer-events:none;
  width:min(64vw,620px); opacity:.05; }

/* sticky tab bar */
.menu-tabbar{ position:sticky; top:66px; z-index:500; display:flex; justify-content:center; gap:0; flex-wrap:wrap;
  background:rgba(13,13,13,.78); backdrop-filter:blur(14px); border-block:1px solid var(--line); margin-top:30px; }
@media (max-width:720px){
  .menu-tabbar{ top:60px; flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .menu-tabbar::-webkit-scrollbar{ display:none; }
  .menu-tabbar .mtab{ flex:0 0 auto; }
}
.mtab{ position:relative; padding:24px 40px; font-family:var(--serif); font-size:1.5rem; color:var(--grey);
  background:transparent; transition:color .4s var(--ease); }
.mtab:hover{ color:var(--bone); }
.mtab.active{ color:var(--gold-lt); }
.mtab .mtab-sub{ display:block; font-family:var(--sans); font-size:.56rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); margin-top:4px; opacity:.7; }
/* sliding underline indicator */
.mtab-ind{ position:absolute; bottom:-1px; left:0; height:2px; width:0; background:var(--gold);
  transition:left .5s var(--slow), width .5s var(--slow); }
@media (max-width:720px){ .mtab{ padding:16px 20px; font-size:1.1rem; } }

/* menu content card */
.menu-card{ width:92%; max-width:880px; margin:0 auto; padding:80px 0 120px; position:relative; z-index:1; }
.menu-pane{ display:none; }
.menu-pane.active{ display:block; }
.mgroup{ margin-bottom:70px; }
.mgroup-head{ text-align:center; margin-bottom:40px; }
.mgroup-head h2{ font-size:clamp(2rem,4.4vw,3rem); color:var(--bone); display:inline-flex; align-items:center; gap:22px; }
.mgroup-head h2::before,.mgroup-head h2::after{ content:""; width:46px; height:1px; background:var(--gold); opacity:.7; }
.mgroup-head .gnote{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--grey); margin-top:12px; }

/* classic dotted-leader menu item */
.mitem{ padding:16px 0; border-bottom:1px solid rgba(176,141,87,.12); }
.js .mitem{ opacity:0; transform:translateY(26px); }      /* hidden only when JS will reveal */
.mitem.show{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
.mitem-top{ display:flex; align-items:baseline; gap:14px; }
.mitem .nm{ font-family:var(--serif); font-size:1.5rem; color:var(--bone); font-weight:600; white-space:nowrap; }
.mitem .nm .tag{ font-family:var(--sans); font-size:.52rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  border:1px solid var(--line); padding:2px 7px; margin-left:8px; vertical-align:middle; border-radius:20px; }
.mitem .ld{ flex:1 1 auto; border-bottom:1px dotted rgba(176,141,87,.4); transform:translateY(-5px); min-width:24px; }
.mitem .pr{ font-family:var(--serif); font-size:1.4rem; color:var(--gold-lt); white-space:nowrap; }
.mitem .ds{ font-size:.9rem; color:var(--grey); font-weight:300; margin-top:5px; max-width:62ch; }
.mitem.center .mitem-top{ justify-content:center; } .mitem.center .ds{ text-align:center; margin-inline:auto; }

/* package / set-menu card */
.mset{ border:1px solid var(--line); background:rgba(244,240,233,.025); padding:34px 36px; margin-bottom:26px; }
.js .mset{ opacity:0; transform:translateY(26px); }
.mset.show{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
.mset h3{ font-size:1.8rem; color:var(--gold-lt); display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; }
.mset h3 .price{ font-size:1.3rem; color:var(--bone); }
.mset .sub{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--grey); margin:6px 0 18px; }
.mset .course{ margin-bottom:14px; }
.mset .course b{ display:block; font-family:var(--sans); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.mset .course p{ color:var(--cream); font-weight:300; font-size:.96rem; }
.mset .course p span{ color:var(--grey); }
.mnote{ text-align:center; font-family:var(--serif); font-style:italic; color:var(--grey); margin-top:24px; font-size:.95rem; }
.menu-foot-cta{ text-align:center; margin-top:30px; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .curtain,.curtain-logo{ display:none!important; }
}