/* ============================================================
   Warujojo Safari Lodge — design system
   Palette derived from the property's own photography:
   ink (roasted wood/shadow), cream & thatch (straw, plaster),
   ochre gold (mustard walls, lantern light) as the rationed accent.
   Type: Marcellus (display serif), Mulish (body), Caveat (script).
   ============================================================ */

@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/marcellus-400.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/mulish-300.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/mulish-500.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/mulish-600.woff2') format('woff2');}
@font-face{font-family:'Tangerine';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/tangerine-400.woff2') format('woff2');}
@font-face{font-family:'Tangerine';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/tangerine-700.woff2') format('woff2');}

:root{
  /* colour */
  --ink:#2E2D28;
  --ink-70:#57554D;
  --ink-50:#8A867C;
  --cream:#FBFAF5;
  --sand:#ECE5D5;
  --sand-deep:#DDD3BC;
  --gold:#C9A227;
  --gold-bright:#D9B84A;
  --white:#FFFFFF;
  --line:rgba(46,45,40,.15);
  --glass-light:rgba(255,255,255,.12);
  --glass-dark:rgba(46,45,40,.06);
  /* radius */
  --r-pill:9999px;
  --r-60:60px;
  --r-img:0px;
  /* spacing */
  --s-2:16px;--s-3:24px;--s-4:40px;--s-5:64px;--s-6:96px;
  --pad-section:clamp(56px,9vw,140px);
  --pad-x:clamp(20px,4.5vw,48px);
  /* type */
  --f-display:'Marcellus',Georgia,serif;
  --f-body:'Mulish','Segoe UI',system-ui,sans-serif;
  --f-script:'Tangerine',cursive;
  --ease-soft:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--cream);color:var(--ink);
  font-family:var(--f-body);font-weight:300;
  font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--gold);color:#fff}

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad-x)}
.wrap--narrow{max-width:880px}

/* ---------- typography ---------- */
.eyebrow{
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-50);font-weight:600;display:block;margin-bottom:18px;
}
.eyebrow--light{color:rgba(255,255,255,.72)}
h1,h2,h3,.display{
  font-family:var(--f-display);font-weight:400;
  line-height:1.08;color:var(--ink);
}
h1{font-size:clamp(38px,6vw,74px);letter-spacing:.02em;line-height:1.02}
h2{font-size:clamp(28px,3.6vw,46px);letter-spacing:.01em}
h3{font-size:clamp(19px,1.9vw,23px);letter-spacing:0}
.script{
  font-family:var(--f-script);text-transform:none;color:var(--gold);
  letter-spacing:0;font-weight:700;line-height:.9;
  /* Tangerine has a small x-height, so it needs a larger em to match the display type */
  font-size:2.5em;display:inline-block;transform:rotate(-2deg);vertical-align:baseline;
}
.lead{font-size:clamp(17px,1.6vw,20px);max-width:58ch;color:var(--ink-70)}
p{color:var(--ink-70);max-width:62ch}
.on-dark h1,.on-dark h2,.on-dark h3{color:#fff}
.on-dark p,.on-dark .lead{color:rgba(255,251,242,.82)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;border:0;cursor:pointer;
  text-decoration:none;font-family:var(--f-body);
  transition:transform .35s var(--ease-soft),background .35s,filter .35s;
}
.btn--sand{
  background:var(--sand-deep);color:var(--ink);border-radius:var(--r-pill);
  padding:13px 26px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}
.btn--sand:hover{filter:brightness(.95);transform:translateY(-1px)}
.btn--glass,.btn--glass-dark{
  border-radius:var(--r-60);padding:10px 12px 10px 26px;font-size:16px;
}
.btn--glass{
  background:var(--glass-light);color:#fff;
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.btn--glass-dark{
  background:var(--glass-dark);color:var(--ink);
  border:1px solid rgba(46,45,40,.14);
}
.btn .arrow{
  width:36px;height:36px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-size:15px;
  background:rgba(255,255,255,.9);color:var(--ink);
  transition:transform .35s var(--ease-soft);
}
.btn--glass-dark .arrow{background:var(--ink);color:#fff}
.btn:hover .arrow{transform:translateX(4px)}
.btn:focus-visible,a:focus-visible,button:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;
}

/* in-body discovery text-link (tier-3 CTA) */
.link{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--f-body);
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  color:var(--ink);text-decoration:none;
  transition:color .3s,gap .3s;
}
.link:hover{color:var(--gold);gap:14px}
.link--on-dark{color:#fff}
.link--on-dark:hover{color:var(--gold)}
.link svg{width:14px;height:14px;flex:none}

/* ---------- floating glass nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad-x);
  pointer-events:none;
}
.nav>*{pointer-events:auto}
.nav__pill{
  display:flex;align-items:center;gap:8px;
  background:var(--glass-light);
  border:1px solid rgba(255,255,255,.3);border-radius:var(--r-60);
  padding:7px 7px 7px 18px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.nav__burger{
  display:flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;
  padding:10px 8px;
}
.nav__burger i{width:22px;height:1.6px;background:#fff;display:block;transition:.3s}
.nav__enquire{
  background:var(--sand-deep);color:var(--ink);border-radius:var(--r-pill);
  padding:10px 20px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;text-decoration:none;white-space:nowrap;
}
.nav__pill--right{padding:7px}
.nav__book{
  background:var(--gold);color:var(--ink);border:0;cursor:pointer;
  border-radius:var(--r-pill);padding:10px 20px;font-family:var(--f-body);
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;white-space:nowrap;line-height:1.7;
}
.nav__enquire{line-height:1.7}
.nav__logo{position:absolute;left:50%;transform:translateX(-50%);top:10px}
.nav__logo img{height:66px;width:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.nav--solid .nav__pill{background:rgba(46,45,40,.5);border-color:rgba(255,255,255,.18)}
.nav__logo{transition:opacity .45s var(--ease-soft),transform .45s var(--ease-soft)}
/* logo hides while scrolling down, returns on scroll up (JS toggles this) */
.nav--hidelogo .nav__logo{opacity:0;transform:translateX(-50%) translateY(-10px);pointer-events:none}
@media(max-width:640px){
  .nav{padding:12px 14px}
  .nav__logo img{height:52px}
  .nav__enquire{padding:9px 15px;font-size:11px}
  .nav__book{padding:9px 13px;font-size:11px}
  .nav__pill{padding:5px 5px 5px 12px}
  .nav__pill--right{padding:5px}
}
@media(max-width:400px){
  .nav__enquire{display:none} /* Book Now supersedes; Enquire stays in the menu panel */
}

/* menu panel */
.menu{
  position:fixed;top:12px;left:12px;z-index:70;
  width:min(360px,calc(100vw - 24px));
  background:rgba(30,29,26,.72);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px 16px 60px 16px;
  padding:22px 28px 42px;color:#fff;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .4s var(--ease-soft),transform .4s var(--ease-soft),visibility .4s;
}
.menu.open{opacity:1;visibility:visible;transform:none}
.menu__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.menu__close{background:none;border:0;color:#fff;font-size:22px;cursor:pointer;padding:6px 10px;line-height:1}
.menu__primary a{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--f-display);text-transform:uppercase;letter-spacing:.08em;
  font-size:21px;color:#fff;text-decoration:none;padding:10px 0;
  transition:color .3s;
}
.menu__primary a:hover,.menu__primary a[aria-current='page']{color:var(--gold-bright)}
.menu hr{border:0;border-top:1px solid rgba(255,255,255,.22);margin:16px 0}
.menu__secondary a{
  display:block;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.08em;
  font-size:15px;color:#e9e2d4;text-decoration:none;padding:7px 0;transition:color .3s;
}
.menu__secondary a:hover,.menu__secondary a[aria-current='page']{color:var(--gold-bright)}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;color:#fff;
}
.hero--short{min-height:64vh;min-height:64svh}
.hero__media{position:absolute;inset:0}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  filter:blur(18px) brightness(.85);transform:scale(1.08);
  transition:filter 1.5s var(--ease-soft),transform 1.5s var(--ease-soft);
}
.hero.is-focused .hero__media img{filter:blur(0) brightness(1);transform:scale(1)}
.hero__media::after{
  content:'';position:absolute;inset:0;
  /* darker top + bottom so hero text (and the top eyebrow) stays legible over bright images */
  background:linear-gradient(180deg,rgba(28,27,24,.48) 0%,rgba(28,27,24,.22) 38%,rgba(28,27,24,.74) 100%);
}
/* centre-aligned heroes put text in the middle band, so tint that zone a touch more */
.hero--center .hero__media::after{
  background:linear-gradient(180deg,rgba(28,27,24,.42) 0%,rgba(28,27,24,.40) 45%,rgba(28,27,24,.62) 100%);
}
.hero__content{
  position:relative;z-index:2;width:100%;
  padding:0 var(--pad-x) clamp(48px,8vh,96px);
  max-width:1240px;margin:0 auto;
}
.hero__content h1{color:#fff}
.hero__sub{margin-top:18px;max-width:52ch;color:rgba(255,251,242,.88);font-size:clamp(16px,1.5vw,19px)}
.hero__cta{margin-top:30px;display:flex;gap:16px;flex-wrap:wrap}
.hero--center{align-items:center;text-align:center}
.hero--center .hero__content{padding-bottom:0}
.hero--center .hero__sub{margin-left:auto;margin-right:auto}
.hero--center .hero__cta{justify-content:center}

/* ghosted headline fade-up */
.ghost{opacity:0;transform:translateY(26px);transition:opacity 1.4s var(--ease-soft),transform 1.4s var(--ease-soft)}
.is-focused .ghost{opacity:1;transform:none}
.ghost--d1{transition-delay:.25s}
.ghost--d2{transition-delay:.45s}
.ghost--d3{transition-delay:.65s}

/* ---------- sections ---------- */
.section{padding:var(--pad-section) 0}
.section--band{background:var(--sand)}
.section--ink{background:var(--ink)}
.section--tight{padding:calc(var(--pad-section)*.62) 0}

/* statement */
.statement{text-align:center}
.statement h2{max-width:22ch;margin:0 auto}
.statement .lead{margin:26px auto 0}

/* 50/50 rows — every row is the same fixed height; the image bleeds full-width
   to the viewport edge on its side, the text sits centred in the column beside
   it (the row breaks out of .wrap to reach the edge) */
.row{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  align-items:stretch;
  min-height:clamp(420px,54vh,460px);
  width:100vw;margin-left:calc(50% - 50vw);
}
.row+.row{margin-top:var(--pad-section)}
.row__media{overflow:hidden;position:relative}
.row__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-soft)}
.row__media:hover img{transform:scale(1.05)}
.row__text{
  align-self:center;
  padding:clamp(18px,3vw,32px) max(var(--pad-x),calc(50vw - 620px + var(--pad-x))) clamp(18px,3vw,32px) clamp(28px,5vw,64px);
}
.row__text .btn{margin-top:22px}
.row__text h2{margin-bottom:18px}
/* activity summaries: tucked under the paragraph, markers inside the text column */
.row__text ul{margin:16px 0 0;padding-left:3.25em;list-style-position:outside;color:var(--ink-70)}
.row__text li{margin-top:6px}
.row--flip .row__media{order:2}
.row--flip .row__text{order:1;
  padding:clamp(18px,3vw,32px) clamp(28px,5vw,64px) clamp(18px,3vw,32px) max(var(--pad-x),calc(50vw - 620px + var(--pad-x)));
}
@media(max-width:840px){
  /* stacked: image band bleeds to one edge only (matching its desktop side),
     a small margin on the other; text below */
  .row,.row--flip{grid-template-columns:1fr;align-items:stretch;min-height:0}
  .row--flip .row__text{order:1}
  .row+.row{margin-top:64px}
  .row__media{aspect-ratio:16/10;width:88%;justify-self:start;order:0}
  .row--flip .row__media{order:0;justify-self:end}
  .row__text,.row--flip .row__text{padding:clamp(24px,6vw,34px) var(--pad-x)}
}

/* ---------- image cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
.cards--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:840px){.cards,.cards--2{grid-template-columns:1fr}}
/* "Find your way around" (index): two cards on one row, a shorter full-width card below */
@media(max-width:840px){
  .cards.cards--wayfind{grid-template-columns:1fr 1fr}
  .cards--wayfind .card:nth-child(3){grid-column:1 / -1}
  .cards--wayfind .card:nth-child(3) img{aspect-ratio:16/9}
}
.card{
  display:block;text-decoration:none;color:var(--ink);
}
.card picture{display:block;overflow:hidden;border-radius:var(--r-img)}
.card img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.2s var(--ease-soft)}
.card--wide img{aspect-ratio:4/3}
.card:hover img,.card:focus-visible img{transform:scale(1.06)}
.card__label{
  display:block;padding-top:18px;
}
.card__label .t{
  font-family:var(--f-display);text-transform:uppercase;letter-spacing:.1em;
  font-size:clamp(17px,1.7vw,21px);display:block;
}
.card__label .s{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-50);font-weight:600;display:block;margin-bottom:6px;
}

/* ---------- room feature list ---------- */
.features{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;margin-top:26px}
.features li{
  font-size:14px;letter-spacing:.04em;color:var(--ink-70);
  padding-left:22px;position:relative;
}
.features li::before{
  content:'';position:absolute;left:0;top:.62em;width:10px;height:1.5px;background:var(--gold);
}
@media(max-width:520px){.features{grid-template-columns:1fr}}

/* ---------- gallery ---------- */
.filterbar{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 40px}
.filterbar button{
  border:1px solid var(--line);background:transparent;color:var(--ink-70);
  border-radius:var(--r-pill);padding:9px 20px;cursor:pointer;
  font-family:var(--f-body);font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  transition:background .3s,color .3s;
}
.filterbar button:hover{background:var(--glass-dark)}
.filterbar button.active{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.masonry{columns:3;column-gap:20px}
@media(max-width:1000px){.masonry{columns:2}}
@media(max-width:600px){.masonry{columns:1}}
/* room-page variant: smaller tiles — 4 across on desktop, 2 on mobile */
.masonry--room{columns:4;column-gap:16px}
.masonry--room figure{margin-bottom:16px}
@media(max-width:1000px){.masonry--room{columns:3}}
@media(max-width:700px){.masonry--room{columns:2;column-gap:12px}.masonry--room figure{margin-bottom:12px}}
.masonry figure{
  break-inside:avoid;margin:0 0 20px;border-radius:var(--r-img);overflow:hidden;
  position:relative;cursor:zoom-in;
}
.masonry figure img{width:100%;transition:transform 1.2s var(--ease-soft)}
.masonry figure:hover img{transform:scale(1.04)}
.masonry figure.hidden{display:none}
.lightbox{
  border:0;padding:0;background:rgba(28,27,24,.92);
  max-width:100vw;max-height:100vh;width:100vw;height:100vh;
  display:none;align-items:center;justify-content:center;
}
.lightbox[open]{display:flex}
.lightbox img{max-width:92vw;max-height:86vh;border-radius:0;object-fit:contain}
.lightbox__close{
  position:fixed;top:20px;right:24px;background:none;border:0;color:#fff;
  font-size:30px;cursor:pointer;padding:8px 12px;
}
.lightbox__prev,.lightbox__next{
  position:fixed;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12);color:#fff;font-size:22px;line-height:1;
  cursor:pointer;display:grid;place-items:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .3s;
}
.lightbox__prev:hover,.lightbox__next:hover{background:rgba(255,255,255,.28)}
.lightbox__prev{left:18px}
.lightbox__next{right:18px}
@media(max-width:600px){
  .lightbox__prev,.lightbox__next{width:40px;height:40px;font-size:18px}
  .lightbox__prev{left:8px}
  .lightbox__next{right:8px}
}
.lightbox::backdrop{background:transparent}

/* ---------- contact ---------- */
.contact-band{
  background:var(--ink);color:#fff;border-radius:20px;
  padding:clamp(28px,4vw,48px);display:flex;gap:clamp(24px,5vw,72px);flex-wrap:wrap;
}
.contact-band a{color:#fff;text-decoration:none;font-size:clamp(16px,1.6vw,19px)}
.contact-band a:hover{color:var(--gold-bright)}
.contact-band .lbl{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-bright);font-weight:600;display:block;margin-bottom:8px}
.contact-band .note{font-size:12px;color:rgba(255,251,242,.55);width:100%;margin:4px 0 0}

.form label{
  display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);font-weight:600;margin:0 0 8px;
}
.form input,.form textarea,.form select{
  width:100%;background:#EFE7D7;border:0;border-radius:10px;
  padding:15px 18px;font-family:var(--f-body);font-size:15px;color:var(--ink);
  margin-bottom:22px;
}
.form input::placeholder,.form textarea::placeholder{
  color:#A99C89;letter-spacing:.08em;font-size:12px;text-transform:uppercase;
}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--gold)}

/* ---------- booking modal + elephant-foot calendar ---------- */
html.modal-open,html.modal-open body{overflow:hidden}
.booking{
  border:0;padding:0;background:transparent;
  max-width:none;max-height:none;overflow:visible;
}
.booking[open]{
  position:fixed;inset:0;width:100%;height:100%;
  display:grid;place-items:center;
}
.booking::backdrop{background:rgba(28,27,24,.6);backdrop-filter:blur(6px)}
.booking__inner{
  background:var(--cream);border-radius:20px;position:relative;
  width:min(560px,94vw);max-height:86vh;max-height:86dvh;
  overflow:hidden;display:flex; /* clip the scrollbar inside the rounded card */
}
.booking__scroll{
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:clamp(22px,4vw,40px);width:100%;
  scrollbar-width:thin;scrollbar-color:var(--sand-deep) transparent;
}
.booking__scroll::-webkit-scrollbar{width:8px}
.booking__scroll::-webkit-scrollbar-track{background:transparent;margin:14px 0}
.booking__scroll::-webkit-scrollbar-thumb{background:var(--sand-deep);border-radius:8px}
.booking__head{margin-bottom:22px}
.booking__head h3{font-size:clamp(20px,2.4vw,26px);margin-top:4px}
.booking__close{
  position:sticky;top:0;float:right;background:none;border:0;
  font-size:26px;color:var(--ink-50);cursor:pointer;padding:2px 8px;line-height:1;
  margin:-6px -6px 0 0;z-index:5;
}
/* tappable date fields */
.booking__date{
  display:block;width:100%;text-align:left;border:0;cursor:pointer;
  background:#EFE7D7;border-radius:10px;padding:11px 16px 12px;
  font-family:var(--f-body);transition:background .3s;
}
.booking__date:hover{background:#EAE0CC}
.booking__date .lbl{
  display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-50);font-weight:600;margin-bottom:3px;
}
.booking__date output{font-size:14.5px;color:var(--ink);pointer-events:none}
.booking__date output:empty::before{content:'Choose date'}
/* collapsible calendar */
.booking__cal{display:none;margin-bottom:22px;padding:16px;background:#F2EBDD;border-radius:14px}
.booking__cal.cal--open{display:block;animation:calin .4s var(--ease-soft)}
@keyframes calin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.booking__cal.cal--open{animation:none}}

.cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal__month{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.1em;font-size:15px}
.cal__nav{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--ink);cursor:pointer;font-size:18px;line-height:1;
  display:grid;place-items:center;transition:background .3s;
}
.cal__nav:hover:not(:disabled){background:var(--glass-dark)}
.cal__nav:disabled{opacity:.3;cursor:default}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal__dow{
  text-align:center;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-50);font-weight:600;padding:6px 0;
}
.cal__day{
  aspect-ratio:1;border:0;background:none;border-radius:12px;position:relative;
  font-family:var(--f-body);font-size:14px;color:var(--ink-70);cursor:pointer;
  display:grid;place-items:center;
}
.cal__day:hover:not(:disabled){background:var(--glass-dark)}
.cal__day:disabled{opacity:.25;cursor:default}
.cal__day em{font-style:normal;position:relative;z-index:2}
/* the elephant foot replaces the usual selection circle */
.cal__day::after{
  content:'';position:absolute;inset:6%;z-index:1;opacity:0;pointer-events:none;
  background:url('../images/brand/elephant-foot.png') center/contain no-repeat;
}
.cal__day.is-in::after,.cal__day.is-out::after{
  opacity:1;animation:stamp .5s var(--ease-soft) both;
}
.cal__day.is-in em,.cal__day.is-out em{color:var(--cream);font-weight:600}
.cal__day.is-between::after{
  opacity:.3;transform:scale(.72) rotate(var(--wob,10deg));
  animation:stamp-soft .45s var(--ease-soft) both;animation-delay:var(--d,0s);
}
.cal__day.is-between:nth-child(odd)::after{--wob:-9deg}
@keyframes stamp{
  0%{transform:scale(2.2) rotate(-20deg);opacity:0}
  55%{transform:scale(.9) rotate(2deg);opacity:1}
  78%{transform:scale(1.06) rotate(0)}
  100%{transform:scale(1)}
}
@keyframes stamp-soft{
  0%{transform:scale(1.6) rotate(var(--wob,10deg));opacity:0}
  100%{transform:scale(.72) rotate(var(--wob,10deg));opacity:.3}
}
@media(prefers-reduced-motion:reduce){
  .cal__day.is-in::after,.cal__day.is-out::after,.cal__day.is-between::after{animation:none}
}
.cal__hint{font-size:12.5px;color:var(--ink-50);margin-top:12px;letter-spacing:.04em}
.cal__hint--warn{color:#9C4A26;font-weight:600}

.booking__dates{display:flex;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.booking__dates>.booking__date{flex:1;min-width:130px}
.booking__note{font-size:12.5px;color:var(--ink-50);margin-top:16px}

/* ---------- animated submit (collapse → progress → circle → check) ---------- */
.submit-anim{position:relative;height:56px;margin-top:6px}
.submit-anim .btn{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:100%;justify-content:center;height:48px;
  transition:height .65s var(--ease-soft),background .65s,color .3s,opacity .3s,padding .65s;
}
.submit-anim.s1 .btn{
  height:8px;padding-top:0;padding-bottom:0;overflow:hidden;
  background:var(--ink);color:transparent;
}
.submit-anim.s3 .btn{opacity:0;pointer-events:none}
.submit-anim.busy .btn{pointer-events:none;cursor:default}
.submit-anim__bar{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:8px;width:0;background:var(--gold);border-radius:var(--r-pill);
  transition:width 1.45s linear;pointer-events:none;
}
.submit-anim.s2 .submit-anim__bar{width:100%}
.submit-anim.s3 .submit-anim__bar{
  left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;
  transition:all .55s var(--ease-soft);
}
.submit-anim__svg{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:22px;height:26px;z-index:2;pointer-events:none;
}
.submit-anim__check{
  fill:none;stroke:var(--cream);stroke-width:4;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:36;stroke-dashoffset:36;
  transition:stroke-dashoffset .35s ease-in-out .12s;
}
.submit-anim.s4 .submit-anim__check{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){
  .submit-anim .btn,.submit-anim__bar,.submit-anim__check{transition:none}
}

/* ---------- footer ----------
   Logo → gold eyebrow → short brand line → contact actions
   between hairlines → address → explore links → copyright band. */
.footer{
  background:var(--ink);color:#fff;text-align:center;
  padding:var(--pad-section) 0 0;position:relative;overflow:hidden;
}
.footer .eyebrow{color:var(--gold-bright);margin-top:38px}
.footer__logo{display:block;margin:0 auto;height:88px;width:auto;opacity:.95}
.footer__tag{
  margin:0 auto;max-width:50ch;font-style:italic;
  font-size:clamp(15px,1.6vw,18px);line-height:1.75;color:rgba(255,251,242,.82);
}
.footer__rule{width:min(420px,74%);height:1px;background:rgba(255,255,255,.16);margin:36px auto}
.footer__actions{
  display:flex;justify-content:center;align-items:center;
  gap:clamp(18px,4vw,38px);flex-wrap:wrap;
}
.footer__actions a{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:#EDE5D4;text-decoration:none;transition:color .3s;
}
.footer__actions a:hover{color:var(--gold-bright)}
.footer__actions svg{width:15px;height:15px;flex:none}
.footer__sep{width:1px;height:22px;background:rgba(255,255,255,.22)}
.footer__social{
  display:flex;justify-content:center;align-items:center;gap:26px;margin:-6px 0 34px;
}
.footer__social a{
  color:#C9BFA9;display:inline-flex;padding:4px;
  transition:color .3s,transform .3s;
}
.footer__social a:hover{color:var(--gold-bright);transform:translateY(-2px)}
.footer__social svg{width:20px;height:20px}
.footer__addr{
  font-style:normal;font-size:13.5px;letter-spacing:.05em;line-height:2.1;color:#C9BFA9;
}
.footer__addr a{color:inherit;text-decoration:none;transition:color .3s}
.footer__addr a:hover{color:var(--gold-bright)}
.footer__links{
  display:flex;gap:14px 30px;justify-content:center;flex-wrap:wrap;
  margin:42px 0 52px;
}
.footer__links a{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#C9BFA9;
  text-decoration:none;font-weight:500;transition:color .3s;
}
.footer__links a:hover{color:var(--gold-bright)}
.footer__base{
  border-top:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.26);
  padding:18px var(--pad-x);font-size:12px;letter-spacing:.08em;color:#8D8171;
}
@media(max-width:560px){.footer__sep{display:none}}

/* ---------- scrollytelling reveal (Amali post-hero sequence) ----------
   Stage A: centred statement + floating photos drifting past at depth.
   Stage B: a small centred image grows to full-bleed as you scroll.
   Stage C: a dark glass caption panel rises over the full image.
   Default markup is static (no-JS / reduced-motion); JS adds .scrolly--on. */
.scrolly{position:relative;background:var(--cream)}
.scrolly--band{background:var(--sand)}
.on-dark .scrolly,.scrolly--ink{background:var(--ink)}
.scrolly--ink .scrolly__statement h2{color:#fff}
.scrolly__panel .btn{margin-top:18px}
.scrolly__sticky{padding:var(--pad-section) 0}
.scrolly__statement{text-align:center;position:relative;z-index:2;padding:0 var(--pad-x)}
.scrolly__statement h2{max-width:22ch;margin:0 auto}
.scrolly__float{display:none}
.scrolly__zoom{
  position:relative;width:min(1240px,calc(100% - 2*var(--pad-x)));
  margin:56px auto 0;border-radius:var(--r-img);overflow:hidden;
  aspect-ratio:16/9;
}
.scrolly__zoom picture,.scrolly__zoom img{width:100%;height:100%;object-fit:cover;display:block}
.scrolly__zoom::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,27,24,.08) 0%,rgba(28,27,24,.12) 42%,rgba(28,27,24,.66) 100%)}
.scrolly__panel{
  position:absolute;left:clamp(16px,4vw,56px);bottom:clamp(16px,4vw,48px);
  width:min(470px,calc(100% - 32px));
  background:rgba(30,29,26,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;padding:clamp(20px,3vw,34px);color:#fff;
}
.scrolly__panel h3{color:#fff;margin-bottom:12px;font-size:clamp(17px,1.8vw,22px)}
.scrolly__panel p{color:rgba(255,251,242,.85);font-size:15px;max-width:none}

.scrolly--on{height:340vh}
.scrolly--on .scrolly__sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;padding:0;
  display:grid;place-items:center;
}
.scrolly--on .scrolly__statement{will-change:transform,opacity}
.scrolly--on .scrolly__float{
  display:block;position:absolute;z-index:1;border-radius:0;overflow:hidden;
  will-change:transform,opacity;
}
.scrolly--on .scrolly__float img{width:100%;height:100%;object-fit:cover;display:block}
.scrolly__float--a{top:6%;right:6%;width:clamp(150px,19vw,320px);aspect-ratio:4/3}
.scrolly__float--d{top:8%;left:6%;width:clamp(170px,21vw,360px);aspect-ratio:4/3.3}
.scrolly__float--e{top:10%;left:41%;width:clamp(170px,13vw,260px);aspect-ratio:3/2}
.scrolly__float--g{bottom:8%;right:6%;width:clamp(140px,18vw,300px);aspect-ratio:4/3.2}
.scrolly--on .scrolly__zoom{
  /* starts life as the bottom-left collage image, then grows to full-bleed */
  position:absolute;inset:auto;margin:0;z-index:1;
  left:6vw;bottom:4vh;width:26vw;height:24vh;
  opacity:1;aspect-ratio:auto;border-radius:0;
  will-change:width,height,left,bottom,transform;
}
.scrolly--on .scrolly__panel{opacity:0;transform:translateY(36px);will-change:transform,opacity}
@media(max-width:700px){
  .scrolly--on{height:300vh}
  .scrolly__float--a{width:34vw;right:5%;top:6%}
  .scrolly__float--d{width:46vw;left:5%;top:8%}
  .scrolly__float--e{width:30vw;right:5%;left:auto;top:26%;aspect-ratio:4/3}
  .scrolly__float--g{width:34vw;right:5%;left:auto;bottom:7%;aspect-ratio:4/3.2}
}

/* ---------- horizontal menu scrollytelling (dine) ----------
   Vertical scroll drives the track sideways through editorial
   "chapters" (photo + text card), ending on a full-bleed finale.
   Static stacked fallback when JS/motion is unavailable. */
.hscroll{position:relative;background:var(--cream)}
.hscroll--on{height:500vh}
.hscroll--on .hscroll__sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.hscroll__track{display:flex;flex-direction:column}
.hscroll--on .hscroll__track{flex-direction:row;height:100vh;width:max-content;will-change:transform}
.hpanel{
  position:relative;display:flex;align-items:center;justify-content:center;
  gap:clamp(28px,5vw,80px);padding:var(--pad-section) var(--pad-x);
}
/* JS-on: each chapter is a full-height two-column frame — image edge-to-edge
   from top to bottom on one half, text vertically centred on the other
   (matches the mockup's hs__media{height:100%}). */
.hscroll--on .hpanel{
  width:100vw;height:100vh;flex:none;
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0;padding:0;
}
.hscroll--on .hpanel--intro,.hscroll--on .hpanel--finale{grid-template-columns:1fr;place-items:center;padding:0 clamp(20px,6vw,90px)}
.hscroll--on .hpanel__media{width:auto;height:100%;flex:none;border-radius:0}
.hscroll--on .hpanel__media img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.hscroll--on .hpanel__card{align-self:center;padding:0 clamp(28px,6vw,96px)}
.hpanel--ink{background:var(--ink)}
.hpanel--ink h2,.hpanel--ink h3{color:#fff}
.hpanel--ink p,.hpanel--ink li{color:rgba(255,251,242,.82)}
.hpanel__media{
  border-radius:var(--r-img);overflow:hidden;flex:none;
  width:min(44vw,680px);will-change:transform;
}
.hpanel__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;display:block}
.hpanel__card{max-width:46ch;will-change:transform}
.hpanel__rule{width:64px;height:3px;background:var(--gold);margin-bottom:20px}
.hpanel__card h3{font-size:clamp(22px,2.6vw,34px);margin-bottom:16px}
.hpanel__card .chap{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);font-weight:600;display:block;margin-bottom:14px;
}
.hpanel__dishes{list-style:none;margin-top:22px}
.hpanel__dishes li{
  font-size:15px;color:var(--ink-70);padding:9px 0 9px 24px;position:relative;
  border-bottom:1px solid var(--line);max-width:44ch;
}
.hpanel--ink .hpanel__dishes li{border-color:rgba(255,255,255,.14);color:rgba(255,251,242,.92)}
.hpanel__dishes li::before{
  content:'';position:absolute;left:0;top:1.35em;width:12px;height:1.5px;background:var(--gold);
}
.hpanel__dishes strong{font-weight:600;color:var(--ink)}
.hpanel--ink .hpanel__dishes strong{color:#fff}
/* intro + finale */
.hpanel--intro .hpanel__card{max-width:56ch;text-align:center}
.hpanel__hint{
  margin:34px auto 0;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-50);font-weight:600;
}
.hpanel--finale{padding:0}
.hscroll--on .hpanel--finale{padding:0}
.hpanel__bg{position:absolute;inset:0}
.hpanel__bg img{width:100%;height:100%;object-fit:cover}
.hpanel__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,27,24,.3),rgba(28,27,24,.62));
}
.hpanel--finale .hpanel__card{
  position:relative;z-index:2;text-align:center;max-width:none;color:#fff;
}
.hpanel__ghost{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(52px,9.5vw,170px);letter-spacing:.14em;line-height:1;
  color:rgba(255,251,242,.92);display:block;
}
.btn--big{padding:20px 46px;font-size:14px;letter-spacing:.16em}
.hscroll__progress{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:5;
  display:none;align-items:center;gap:14px;
  width:max-content;max-width:calc(100vw - 24px);white-space:nowrap;
  background:var(--glass-light);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:var(--r-pill);padding:10px 20px;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:#fff;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.4);
  transition:color .35s ease,background .35s ease,border-color .35s ease,text-shadow .35s ease;
}
/* over a light (cream) panel, flip to dark ink so the label stays legible */
.hscroll__progress--onlight{
  background:rgba(46,45,40,.06);border-color:rgba(46,45,40,.16);
  color:var(--ink);text-shadow:none;
}
.hscroll--on .hscroll__progress{display:flex}
.hscroll__meter{width:120px;height:2px;background:rgba(255,255,255,.3);border-radius:2px;overflow:hidden;transition:background .35s ease}
.hscroll__progress--onlight .hscroll__meter{background:rgba(46,45,40,.18)}
.hscroll__bar{display:block;height:100%;width:0;background:var(--gold-bright)}
@media(max-width:700px){
  .hscroll--on{height:440vh}
  /* space the chapters apart so they read as separate panels, not one attached strip */
  .hscroll--on .hscroll__track{gap:18px}
  /* single column: a fixed-height image band on top, text below. Every chapter's
     image fills the same band regardless of how much copy sits under it, so the
     images no longer each take their own height. */
  .hscroll--on .hpanel{grid-template-columns:1fr;grid-template-rows:42% 1fr;align-items:stretch;gap:0;padding:0}
  .hscroll--on .hpanel--intro,.hscroll--on .hpanel--finale{grid-template-columns:1fr;grid-template-rows:1fr;place-items:center;padding:0 20px}
  .hscroll--on .hpanel__media{width:auto;height:100%}
  .hscroll--on .hpanel__card{align-self:start;padding:26px 20px 0}
  /* intro chapters have no image band — centre their card in the screen */
  .hscroll--on .hpanel--intro .hpanel__card{align-self:center;padding:0}
  .hpanel__card h3{font-size:20px}
  .hpanel__dishes li{font-size:14px;padding:7px 0 7px 20px}
  .hscroll__meter{width:80px}
}
@media(prefers-reduced-motion:reduce){
  .hpanel__media,.hpanel__card{transform:none!important}
}

/* ---------- dine: à la carte prologue + signatures ----------
   Prologue is a dark statement window; the carte below pages through
   course chapters (filterbar tabs) with staggered dish reveals.
   Without JS all three chapters render stacked as a static menu. */
.carte-intro{text-align:center}
.carte-intro h2{max-width:22ch;margin:0 auto}
.carte-intro .lead{margin:24px auto 0;max-width:52ch}
.carte-intro__hint{
  margin:38px auto 0;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,251,242,.55);font-weight:600;
}
.carte .eyebrow,.carte h2{text-align:center}
.carte__tabs{justify-content:center;margin-bottom:46px}
.carte__stage{max-width:820px;margin:0 auto}
.carte__list{list-style:none;margin:0;padding:0}
.carte__list+.carte__list{margin-top:46px}
.carte--js .carte__list+.carte__list{margin-top:0}
.carte--js .carte__list[hidden]{display:none}
.carte__sub{padding:38px 0 12px}
.carte__sub:first-child{padding-top:0}
.carte__sub h4{
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);font-weight:600;font-family:var(--f-body);
}
.carte__foot{padding:16px 0 4px;font-size:13px;font-style:italic;color:var(--ink-50);max-width:58ch}
.carte__dish{padding:24px 0;border-bottom:1px solid var(--line)}
.carte__row{display:flex;align-items:baseline;gap:14px}
.carte__row h3{font-size:clamp(18px,2vw,24px);letter-spacing:.02em}
.carte__dots{flex:1;border-bottom:1.5px dotted rgba(46,45,40,.32);transform:translateY(-4px);min-width:30px}
.carte__price{font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--gold);white-space:nowrap}
.carte__dish p{margin-top:8px;font-size:14.5px;font-style:italic;color:var(--ink-70);max-width:56ch}
.carte__note{margin:42px auto 0;text-align:center;font-size:13.5px;color:var(--ink-50);max-width:64ch}
.carte__note a{color:var(--gold);font-weight:600}
.carte__cta{text-align:center;margin-top:30px}
.hpanel--finale .hpanel__hint{color:rgba(255,251,242,.7)}
.carte--js .carte__list li{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s var(--ease-soft)}
.carte--js .carte__list.on li{opacity:1;transform:none}
.carte--js .carte__list li:nth-child(2){transition-delay:.06s}
.carte--js .carte__list li:nth-child(3){transition-delay:.12s}
.carte--js .carte__list li:nth-child(4){transition-delay:.18s}
.carte--js .carte__list li:nth-child(5){transition-delay:.24s}
.carte--js .carte__list li:nth-child(6){transition-delay:.3s}
.carte--js .carte__list li:nth-child(7){transition-delay:.36s}
.carte--js .carte__list li:nth-child(n+8){transition-delay:.42s}
@media(max-width:700px){
  /* once scrolled past, the chapter tabs ride just under the fixed nav —
     laid out two per row so the bar stays shallow. Chapter numbers are
     hidden here and columns are clamped so labels can never blow out. */
  .carte__tabs{
    position:sticky;top:66px;z-index:40;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
    background:rgba(247,241,230,.92);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    padding:10px;margin:0 -10px 36px;border-radius:18px;
  }
  .carte__tabs button{
    padding:8px 6px;font-size:10.5px;letter-spacing:.05em;
    text-align:center;white-space:normal;line-height:1.35;
  }
  .carte__tabs .carte__num{display:none}
}
@media(max-width:560px){
  .carte__row{flex-wrap:wrap;gap:6px 14px}
  .carte__dots{display:none}
  .carte__price{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){
  .carte--js .carte__list li{opacity:1;transform:none;transition:none}
}

/* ---------- reveal motion ---------- */
.reveal{opacity:0;transform:translateY(36px);transition:opacity 1s ease,transform 1s var(--ease-soft)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero__media img{filter:none;transform:none;transition:none}
  .ghost{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- page header (quiet, for gallery etc.) ---------- */
.pagehead{padding:calc(var(--pad-section) + 70px) 0 calc(var(--pad-section)*.5)}
.pagehead h1{font-size:clamp(34px,4.6vw,58px)}
.pagehead .lead{margin-top:20px}

/* ---------- room page ---------- */
.room-nav{display:flex;justify-content:space-between;align-items:center;gap:16px}
@media(max-width:640px){
  .room-nav{gap:8px}
  .room-nav .btn{padding:8px 10px 8px 16px;font-size:14px;gap:8px;white-space:nowrap}
  .room-nav .arrow{width:28px;height:28px;font-size:13px}
  .room-nav__full{display:none}
}

/* concept disclosure chip (kept for future use on concept renders) */
.chip-note{
  display:inline-block;background:var(--glass-dark);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:6px 16px;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);font-weight:600;
}