/* =====================================================================
   ui.css — ZLLC carousel system, editorial section patterns and motion.
   Layered on top of brand.css + site.css. Everything here is driven by
   the wireframes: edge-bleed rails, full-bleed sliders, story cards,
   watercolour bands and the slow, cinematic motion language.
   ===================================================================== */

:root{
  /* distance from the viewport edge to the content column — the exact
     amount a bleeding element must pull out by to reach the screen edge */
  --edge: calc((100vw - min(100vw - 56px, var(--maxw) - 56px)) / 2);
}
@media(max-width:760px){ :root{ --edge: calc((100vw - min(100vw - 40px, var(--maxw) - 40px)) / 2); } }

/* =====================================================================
   1 · RAIL — the edge-bleed carousel
   Cards run past the right edge of the container so the next one is
   always half-visible, exactly as drawn in the wireframes.
   ===================================================================== */
.rail{ position:relative; }

.rail__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:30px; margin-bottom:38px;
}
.rail__head .sechead{ margin-bottom:0; }

.rail__view{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab;
  /* bleed to the viewport edge, keep the first card on the grid */
  margin-right:calc(-1 * var(--edge));
  padding-bottom:4px;
}
.rail__view::-webkit-scrollbar{ display:none; }
.rail__view.is-drag{ cursor:grabbing; scroll-snap-type:none; }
.rail__view.is-drag *{ pointer-events:none; }

.rail__track{
  display:flex; gap:var(--rail-gap,26px); align-items:stretch;
  padding-right:var(--edge);
}
.rail__item{
  flex:0 0 var(--rail-w,340px); scroll-snap-align:start;
  min-width:0;
}

/* full-bleed variant: rail bleeds off BOTH edges */
.rail--bleed .rail__view{
  margin-left:calc(-1 * var(--edge));
  margin-right:calc(-1 * var(--edge));
}
.rail--bleed .rail__track{
  padding-left:var(--edge);
}

/* ---- controls ---- */
.rail__nav{ display:flex; gap:10px; flex-shrink:0; }
.rail__btn{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line-strong);
  background:transparent; color:var(--ink); display:grid; place-items:center;
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .35s var(--ease);
}
.rail__btn svg{ width:15px; height:15px; }
.rail__btn:hover{ background:var(--gold); border-color:var(--gold); color:var(--paper); }
.rail__btn:active{ transform:scale(.94); }
.rail__btn[disabled]{ opacity:.28; pointer-events:none; }
.section--ink .rail__btn,.section--olive .rail__btn,.rail--light .rail__btn{
  border-color:rgba(251,248,243,.35); color:var(--paper);
}
.section--ink .rail__btn:hover,.rail--light .rail__btn:hover{ background:var(--gold); border-color:var(--gold); }

/* ---- the thin gold progress rail under the cards (from the wireframe) ---- */
.rail__progress{
  position:relative; height:1px; background:var(--line);
  margin-top:40px; overflow:visible;
}
.rail__progress::before,.rail__progress::after{
  content:""; position:absolute; top:-4px; width:1px; height:9px; background:var(--line-strong);
}
.rail__progress::before{ left:0 } .rail__progress::after{ right:0 }
.rail__bar{
  position:absolute; left:0; top:-1px; height:3px; background:var(--gold);
  width:32%; transition:transform .45s var(--ease), width .45s var(--ease);
  transform-origin:left center;
}
.section--ink .rail__progress,.rail--light .rail__progress{ background:rgba(251,248,243,.2); }
.section--ink .rail__progress::before,.section--ink .rail__progress::after,
.rail--light .rail__progress::before,.rail--light .rail__progress::after{ background:rgba(251,248,243,.35); }

/* ---- dot pager ---- */
.rail__dots{ display:flex; gap:9px; justify-content:center; margin-top:30px; }
.rail__dots button{
  width:7px; height:7px; padding:0; border:0; border-radius:50%;
  background:var(--line-strong); transition:all .35s var(--ease);
}
.rail__dots button.on{ background:var(--gold); transform:scale(1.5); }
.slider__dots button{ background:rgba(255,255,255,.45); }
.slider__dots button.on{ background:var(--paper); }

@media(max-width:760px){
  .rail__head{ flex-direction:column; align-items:flex-start; gap:22px; }
  .rail__nav{ order:2; }
}

/* =====================================================================
   2 · RAIL CARD FLAVOURS
   ===================================================================== */

/* — lodge card (homepage collection carousel) — */
.lodgetile{ display:block; }
.lodgetile .ph{
  aspect-ratio:4/5; overflow:hidden; position:relative;
  background:var(--sand);
}
.lodgetile .ph img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease), filter 1.1s var(--ease); }
.lodgetile:hover .ph img{ transform:scale(1.06); }
.lodgetile .meta{ padding:22px 2px 0; }
.lodgetile .loc{ font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-400); margin:0 0 9px; font-weight:600; }
.lodgetile h3{ font-size:clamp(19px,1.7vw,23px); letter-spacing:.09em; margin:0 0 3px; }
.lodgetile .script{ font-size:26px; color:var(--gold); display:block; line-height:1.1; margin-bottom:14px; }
.lodgetile .factline{ font-size:12.5px; line-height:1.6; color:var(--ink-soft);
  border-top:1px solid var(--line); padding-top:14px; margin:0; }
.section--ink .lodgetile h3{ color:var(--paper); }
.section--ink .lodgetile .factline{ color:rgba(251,248,243,.7); border-color:rgba(251,248,243,.18); }

/* — story card (the dark band carousel on the lodge pages) — */
.storycard{
  background:var(--paper); display:flex; flex-direction:column; height:100%;
  transition:transform .6s var(--ease);
}
.storycard:hover{ transform:translateY(-6px); }
.storycard__cap{
  padding:22px 20px; text-align:center; background:var(--paper);
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.07em; font-size:14px; line-height:1.45; color:var(--ink);
}
.storycard__cap--script{ font-family:var(--font-script); font-size:30px;
  text-transform:none; letter-spacing:0; color:var(--gold); }
.storycard__ph{ aspect-ratio:1/1; overflow:hidden; }
.storycard__ph img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease); }
.storycard:hover .storycard__ph img{ transform:scale(1.07); }
.storycard--plain .storycard__ph{ aspect-ratio:3/4.35; }
.storycard--mark{ display:grid; place-items:center; padding:16px; }
.storycard--mark svg{ width:44px; height:auto; }

/* — experience card (4-up rail: image, title, copy, link) — */
.expcard{ display:flex; flex-direction:column; height:100%; }
.expcard .ph{ aspect-ratio:1/1; overflow:hidden; background:var(--sand); }
.expcard .ph img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease); }
.expcard:hover .ph img{ transform:scale(1.06); }
.expcard h3{ font-size:13px; letter-spacing:.2em; margin:22px 0 14px; font-family:var(--font-body);
  font-weight:600; color:var(--ink); }
.expcard p{ font-size:13.5px; line-height:1.75; margin:0 0 18px; flex:1; }
.expcard .btn--ghost{ font-size:11px; align-self:flex-start; }
.section--ink .expcard h3{ color:var(--paper); }
.section--ink .expcard p{ color:rgba(251,248,243,.72); }

/* — plain photo card (prime safari country / gallery rails) — */
.photocard{ overflow:hidden; position:relative; }
.photocard img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.2s var(--ease); }
.photocard:hover img{ transform:scale(1.05); }
.photocard--tall{ aspect-ratio:3/4; }
.photocard--wide{ aspect-ratio:16/10; }
.photocard--sq{ aspect-ratio:1/1; }
.photocard__cap{
  position:absolute; left:0; right:0; bottom:0; padding:22px 20px;
  background:linear-gradient(to top,rgba(20,16,12,.86),rgba(20,16,12,.42) 52%,rgba(20,16,12,0));
  color:var(--paper); z-index:2;
  text-shadow:0 1px 12px rgba(0,0,0,.4);
}
.photocard__cap strong{ display:block; font-family:var(--font-display); font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; font-size:14px; }
.photocard__cap em{ font-style:normal; font-family:var(--font-script); font-size:22px;
  color:var(--gold-300); }

/* — room card (rooms overview rail) — */
.roomcard{ display:flex; flex-direction:column; height:100%; }
.roomcard .ph{ aspect-ratio:3/4; overflow:hidden; background:var(--sand); }
.roomcard .ph img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.roomcard:hover .ph img{ transform:scale(1.06); }
.roomcard h3{ margin:24px 0 8px; font-size:19px; letter-spacing:.07em; }
.roomcard .avail{ font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin:0 0 14px; font-weight:600; }
.roomcard .spec{ font-size:13.5px; line-height:1.7; color:var(--ink-soft); margin:0 0 18px; flex:1; }

/* =====================================================================
   3 · SLIDER — full-bleed cinematic slider (EXPLORE THE GLORY OF THE ZAMBEZI)
   ===================================================================== */
.slider{ position:relative; min-height:min(88svh,880px); display:flex; align-items:center;
  overflow:hidden; color:var(--paper); }
.slider__stage{ position:absolute; inset:0; z-index:0; }
.slider__slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.5s var(--ease); }
.slider__slide img{ width:100%; height:100%; object-fit:cover; }
.slider__slide.on{ opacity:1; }
.slider__slide.on img{ animation:kenburns 11s var(--ease) forwards; }
@keyframes kenburns{ from{ transform:scale(1.001) } to{ transform:scale(1.09) } }
.slider__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom,rgba(26,22,18,.5),rgba(26,22,18,.12) 42%,rgba(26,22,18,.62)); }
.slider__inner{ position:relative; z-index:3; width:100%; text-align:center;
  padding:clamp(90px,13vh,150px) 0; }
.slider__inner .eyebrow{ color:var(--gold-300); }
.slider h2{ color:var(--paper); font-size:clamp(34px,5.4vw,72px); letter-spacing:.055em; line-height:1.1; }
.slider__foot{ position:absolute; right:var(--edge); bottom:clamp(70px,10vh,110px);
  z-index:4; max-width:400px; text-align:left; }
.slider__foot p{ color:rgba(251,248,243,.9); font-size:14px; line-height:1.75; }
.slider__dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:34px; z-index:4; margin:0; }
@media(max-width:900px){
  .slider__foot{ position:static; margin:34px auto 0; text-align:center; padding:0 22px; }
  .slider{ min-height:auto; }
  .slider__inner{ padding:clamp(110px,20vh,150px) 0 90px; }
}

/* =====================================================================
   4 · SECTION PATTERNS from the wireframes
   ===================================================================== */

/* — paper / stucco textured background —
   The four texture URLs are CSS variables so the admin can repoint them at
   any picture in the media library (see includes/head.php). --tex-* is set
   there; the values below are the fallbacks if it ever is not. */
.section--paperTex{ background:var(--paper) var(--tex-paper,url('/assets/img/tex/paper-wide.jpg')) center/cover; }
.section--stucco{ background:#F4F2EE var(--tex-stucco,url('/assets/img/tex/stucco.jpg')) center/cover; }
.section--wash{ position:relative; background:#EFECE6; overflow:hidden; }
.section--wash::before{
  content:""; position:absolute; inset:-10% -5%; z-index:0; opacity:var(--tex-wash-opacity,.5);
  background:var(--tex-wash,url('/assets/img/tex/wash-wide.jpg')) center/cover no-repeat;
  mix-blend-mode:multiply; pointer-events:none;
}
.section--wash>*{ position:relative; z-index:1; }
.section--bone{ background:#F2F0EB; }
.section--dark{ background:#0E0C0A; color:var(--paper); }
.section--dark h1,.section--dark h2,.section--dark h3{ color:var(--paper); }
.section--dark p{ color:rgba(251,248,243,.74); }

/* leaf-shadow ambience over pale sections */
.leafshade{ position:relative; overflow:hidden; }
.leafshade::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--tex-leaf,url('/assets/img/tex/leaf-shadow.jpg')) left top/70% auto no-repeat;
  opacity:var(--tex-leaf-opacity,.16); mix-blend-mode:multiply;
  animation:leafdrift 26s ease-in-out infinite alternate;
}
/* setting the leaf overlay to "none" in the admin removes it cleanly */
.leafshade.no-leaf::after{ display:none; }
.leafshade>*{ position:relative; z-index:1; }
@keyframes leafdrift{ from{ transform:translate3d(0,0,0) scale(1) } to{ transform:translate3d(18px,10px,0) scale(1.04) } }

/* — brand statement band — */
.statement-band{ text-align:center; padding:clamp(58px,7vw,96px) 0; }
.statement-band .script{ font-size:clamp(30px,3.8vw,46px); color:var(--gold-300); display:block; margin-bottom:20px; }
.statement-band h2{ font-size:clamp(20px,2.4vw,30px); letter-spacing:.08em; line-height:1.5; font-weight:500; }
.statement-band .sig{ margin-top:26px; font-size:9.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); font-weight:600; }

/* — feature strip: image left, editorial right (CHICHELE PRESIDENTIAL) — */
.featstrip{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(34px,5vw,74px); align-items:center; }
.featstrip__ph{ overflow:hidden; aspect-ratio:4/3.1; }
.featstrip__ph img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.featstrip:hover .featstrip__ph img{ transform:scale(1.04); }
.featstrip h2{ color:var(--gold-600); font-size:clamp(28px,3.6vw,44px); line-height:1.12; letter-spacing:.055em; }
.featstrip .place{ font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-400); margin:16px 0 26px; font-weight:600; }
.featstrip .statline{ display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:26px;
  font-size:13.5px; color:var(--ink); align-items:center; }
.featstrip .statline b{ font-weight:700; }
.featstrip .statline i{ font-style:normal; color:var(--line-strong); }
.featstrip--bleedL{ margin-left:calc(-1 * var(--edge)); }
.featstrip--bleedL .featstrip__ph{ aspect-ratio:auto; height:100%; min-height:420px; }
@media(max-width:860px){
  .featstrip{ grid-template-columns:1fr; }
  .featstrip--bleedL{ margin-left:0; }
  .featstrip--bleedL .featstrip__ph{ min-height:0; aspect-ratio:4/3; }
}

/* — script + three-photo strip (Where presidents once rested) — */
.scriptstrip{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,2fr);
  gap:clamp(26px,4vw,56px); align-items:center; }
.scriptstrip .script{ font-size:clamp(28px,3.4vw,44px); line-height:1.35; display:block; }
.scriptstrip__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.scriptstrip__row .photocard{ aspect-ratio:4/3; }
@media(max-width:860px){ .scriptstrip{ grid-template-columns:1fr; } }

/* — overlay panel split (DISCOVER WILD LUXURY) — */
.overlaysplit{ position:relative; min-height:min(84svh,820px); display:flex; align-items:center; overflow:hidden; }
.overlaysplit__bg{ position:absolute; inset:0; z-index:0; }
.overlaysplit__bg img{ width:100%; height:100%; object-fit:cover; }
.overlaysplit__panel{
  position:relative; z-index:2; background:rgba(150,137,121,.93);
  backdrop-filter:blur(2px); color:var(--paper);
  padding:clamp(38px,4.4vw,60px); max-width:520px;
  margin:clamp(50px,7vw,90px) 0;
}
.overlaysplit__panel h2{ color:var(--paper); margin-bottom:24px; }
.overlaysplit__panel p{ color:rgba(251,248,243,.88); font-size:14px; line-height:1.85; }
.overlaysplit__panel .script{ color:#fff; display:block; margin-top:26px; font-size:34px; }

/* — philosophy split with monochrome image — */
.philo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(34px,5.5vw,84px); align-items:center; }
.philo__ph{ overflow:hidden; aspect-ratio:5/4; margin-left:calc(-1 * var(--edge)); }
.philo__ph img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06);
  transition:transform 1.4s var(--ease), filter 1.2s var(--ease); }
.philo:hover .philo__ph img{ transform:scale(1.05); filter:grayscale(.4) contrast(1.02); }
.philo .script{ display:block; font-size:clamp(30px,3.6vw,44px); line-height:1.3; margin:12px 0 22px; }
@media(max-width:860px){
  .philo{ grid-template-columns:1fr; }
  .philo__ph{ margin-left:0; }
}

/* — fact rail (Private / Lunga / Founding / Low) — */
.factrail{ list-style:none; margin:0; padding:0; max-width:560px; }
.factrail li{ display:flex; align-items:baseline; gap:20px; padding:14px 0;
  border-bottom:1px solid rgba(42,37,32,.16); }
.factrail .v{ font-family:var(--font-display); font-weight:600; font-size:19px;
  letter-spacing:.06em; color:var(--gold-600); min-width:120px; text-transform:capitalize; }
.factrail .l{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); }

/* — stat strip (14 Guests | 13km River frontage | 30,000 ha) — */
.statstrip{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:28px 0 0;
  font-size:14.5px; color:var(--ink); }
.statstrip b{ font-weight:700; }
.statstrip i{ font-style:normal; color:var(--line-strong); }
.section--ink .statstrip,.section--dark .statstrip{ color:var(--paper); }

/* — pill fact row (From US$403/night · 14 Guests · River View) — */
.pillrow{ display:flex; flex-wrap:wrap; gap:12px 38px; list-style:none; margin:0 0 8px; padding:0 0 22px;
  border-bottom:1px solid var(--line); }
.pillrow li{ font-size:13px; letter-spacing:.05em; color:var(--taupe); }

/* — amenity grid — */
.amenities{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px; list-style:none; margin:0; padding:0; }
.amenities li{ padding:16px 0; border-bottom:1px solid var(--line);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.amenities li small{ display:block; font-size:9.5px; letter-spacing:.12em; color:var(--ink-faint); margin-top:5px; }
@media(max-width:600px){ .amenities{ grid-template-columns:1fr; } }

/* — image mosaic (suite pages) — */
.mosaic{ display:grid; gap:10px; grid-template-columns:repeat(6,1fr); }
.mosaic .photocard{ aspect-ratio:auto; height:100%; min-height:190px; }
.mosaic .m-4{ grid-column:span 4 } .mosaic .m-3{ grid-column:span 3 }
.mosaic .m-2{ grid-column:span 2 } .mosaic .m-6{ grid-column:span 6 }
@media(max-width:860px){
  .mosaic{ grid-template-columns:repeat(2,1fr); }
  .mosaic .m-4,.mosaic .m-3,.mosaic .m-2,.mosaic .m-6{ grid-column:span 1; }
  .mosaic .photocard{ min-height:150px; }
}

/* — night band (A NIGHT OF INTIMATE WONDER) — */
.nightband{ position:relative; overflow:hidden; background:#0B0A12; color:var(--paper); }
.nightband__bg{ position:absolute; inset:0; z-index:0; }
.nightband__bg img{ width:100%; height:100%; object-fit:cover; opacity:.62; }
.nightband__grid{ position:relative; z-index:2; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(34px,5vw,80px); align-items:center; }
.nightband .script{ color:#fff; font-size:clamp(30px,3.7vw,46px); line-height:1.35; display:block; }
.nightband h2{ color:var(--paper); }
.nightband p{ color:rgba(251,248,243,.78); font-size:13.5px; line-height:1.85; }
@media(max-width:860px){ .nightband__grid{ grid-template-columns:1fr; } }

/* — access cards — */
.accesscards{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.accesscard{ border:1px solid rgba(251,248,243,.16); padding:30px 28px; }
.accesscard h3{ font-size:14px; letter-spacing:.2em; color:var(--gold-300); margin-bottom:14px; }
.accesscard p{ font-size:13.5px; line-height:1.8; margin:0; }
@media(max-width:700px){ .accesscards{ grid-template-columns:1fr; } }

/* — watercolour crest intro — */
.crestintro{ text-align:center; max-width:900px; margin:0 auto; }
.crestintro__mark{ margin:0 auto 26px; width:74px; color:var(--espresso); }
.crestintro h2{ font-weight:500; text-transform:none; font-size:clamp(24px,3vw,36px);
  letter-spacing:.02em; margin-bottom:22px; }
.crestintro p{ font-size:14px; line-height:1.9; }
.crestintro__word{ margin-top:44px; }
.crestintro__word b{ display:block; font-family:var(--font-display); font-weight:500;
  font-size:clamp(28px,3.6vw,44px); letter-spacing:.22em; text-transform:uppercase; color:var(--ink); }
.crestintro__word span{ display:block; font-family:var(--font-display); font-size:clamp(13px,1.5vw,17px);
  letter-spacing:.42em; text-transform:uppercase; color:var(--taupe); margin-top:8px; }

/* =====================================================================
   5 · MOTION LAYER
   ===================================================================== */

/* line-by-line heading reveal — hidden only once ui.js has taken over */
.rise{ display:block; overflow:hidden; }
.anim .rise>span{ display:block; transform:translateY(110%); opacity:0;
  transition:transform 1s var(--ease), opacity 1s var(--ease); }
.anim .in .rise>span,.anim .rise.in>span{ transform:none; opacity:1; }
.anim .rise:nth-child(2)>span{ transition-delay:.09s }
.anim .rise:nth-child(3)>span{ transition-delay:.18s }

/* photo curtain reveal */
.anim .curtain{ clip-path:inset(0 0 100% 0); transition:clip-path 1.25s var(--ease); }
.anim .curtain.in{ clip-path:inset(0 0 0 0); }
.anim .curtain img{ transform:scale(1.12); transition:transform 1.6s var(--ease); }
.anim .curtain.in img{ transform:scale(1); }

/* gold rule draw-in */
.drawline{ position:relative; height:1px; background:var(--line); overflow:hidden; }
.drawline::after{ content:""; position:absolute; inset:0; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease); }
.anim .drawline.in::after,html:not(.anim) .drawline::after{ transform:scaleX(1); }

/* soft float for hero eyebrow/script */
.float-slow,.float-mid{ will-change:transform; }

/* scroll parallax hooks (JS writes --py) */
[data-parallax]{ will-change:transform; }

/* number count-up */
.countup{ font-variant-numeric:tabular-nums; }

/* Page-load veil.

   This MUST clear itself without JavaScript. It is a full-screen opaque
   panel, so if it ever depended on a script running, any hiccup — a file
   that did not upload, a stale cache, a page that failed before the footer
   emitted the script tag — would leave the visitor looking at a blank
   screen. So it is a pure CSS animation that always ends hidden; the
   script only tidies the element away afterwards. */
.veil{
  position:fixed; inset:0; z-index:9999; background:var(--ink); pointer-events:none;
  animation:veil-lift .85s var(--ease) .05s forwards;
}
@keyframes veil-lift{ to{ opacity:0; visibility:hidden; } }
.veil.gone{ opacity:0; visibility:hidden; }
/* belt and braces: if animations are unavailable entirely, never show it */
@media (prefers-reduced-motion:reduce){ .veil{ display:none; } }
.no-js .veil{ display:none; }

/* hover lift for links inside rails */
.rail a{ -webkit-tap-highlight-color:transparent; }

@media (prefers-reduced-motion:reduce){
  .rise>span{ transform:none; opacity:1; }
  .curtain{ clip-path:none; } .curtain img{ transform:none; }
  .drawline::after{ transform:scaleX(1); }
  .slider__slide.on img{ animation:none; }
  .leafshade::after{ animation:none; }
}

/* =====================================================================
   NO-JAVASCRIPT SAFETY NET
   Every animated element starts hidden so it can reveal on scroll. If the
   script that reveals them never runs, the page must still be readable —
   so without JS they are simply shown.
   ===================================================================== */
.no-js .rail__view{ scroll-snap-type:none; }
.no-js .slider__slide{ opacity:1; position:relative; }
.no-js .slider__stage{ position:relative; height:70svh; }
.no-js .slider__slide:not(.on){ display:none; }

/* =====================================================================
   6 · MEGA MENU — preserved, enlarged, with staggered reveal
   ===================================================================== */
.mega{
  width:min(860px,94vw); padding:22px; gap:14px;
  grid-template-columns:repeat(4,1fr);
  background:rgba(252,250,246,.98);
}
.mega a{ flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden;
  opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.mainnav__has[data-open] .mega a{ opacity:1; transform:none; }
.mainnav__has[data-open] .mega a:nth-child(1){ transition-delay:.05s }
.mainnav__has[data-open] .mega a:nth-child(2){ transition-delay:.11s }
.mainnav__has[data-open] .mega a:nth-child(3){ transition-delay:.17s }
.mainnav__has[data-open] .mega a:nth-child(4){ transition-delay:.23s }
.mega a:hover{ background:transparent; }
.mega__figure{ display:block; overflow:hidden; margin-bottom:14px; }
.mega__thumb{
  display:block; width:100%; height:150px; border-radius:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transition:transform 1s var(--ease), filter .6s var(--ease);
  filter:saturate(.92);
}
.mega a:hover .mega__thumb{ transform:scale(1.05); filter:saturate(1.05); }
.mega__txt{ padding:0 2px 6px; }
.mega__txt strong{ font-size:14px; letter-spacing:.12em; transition:color .3s var(--ease); }
.mega a:hover .mega__txt strong{ color:var(--gold); }
.mega__txt em{ font-size:10.5px; letter-spacing:.06em; margin-top:5px; }
.mega__all{ margin-top:10px; padding-top:16px; }

/* =====================================================================
   7 · MISC PAGE FURNITURE
   ===================================================================== */
.hero--tall{ min-height:100svh; }
.hero__inner{ max-width:1080px; }
.hero h1 .rise>span{ white-space:nowrap; }
@media(max-width:640px){ .hero h1 .rise>span{ white-space:normal; } }
.hero__slide img{ width:100%; height:100%; object-fit:cover; }

/* lodge sub-nav restyled dark (matches wireframe) */
.lodgenav{ background:rgba(60,51,42,.97); border-bottom:0; }
.lodgenav__name{ color:var(--paper); }
.lodgenav__links a{ color:rgba(251,248,243,.82); }
.lodgenav__links a:hover,.lodgenav__links a.on{ color:var(--gold-300); }

/* eyebrow + rule head used on inner sections */
.minihead .eyebrow{ margin-bottom:12px; }
.minihead h2{ margin-bottom:18px; }

/* two-column editorial */
.edit2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,4.6vw,70px); }
@media(max-width:860px){ .edit2{ grid-template-columns:1fr; } }

/* offset photo pair (WHERE NATURE IS OUR PRIMARY FEATURE) */
.offsetpair{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(20px,2.6vw,38px); align-items:end; }
.offsetpair__col--a{ display:flex; flex-direction:column; gap:clamp(24px,3vw,44px); }
.offsetpair .photocard{ aspect-ratio:16/11; }
.offsetpair__tall{ aspect-ratio:3/3.7 !important; }
@media(max-width:860px){ .offsetpair{ grid-template-columns:1fr; } }

/* big centred display heading */
.display-c{ text-align:center; max-width:900px; margin:0 auto clamp(40px,5vw,64px); }
.display-c h2{ font-size:clamp(24px,3.2vw,40px); line-height:1.25; }

/* rail width presets */
.rail--w4{ --rail-w:calc((min(100vw,var(--maxw)) - 56px - 3*26px)/3.35); }
.rail--w3{ --rail-w:calc((min(100vw,var(--maxw)) - 56px - 2*26px)/2.45); }
.rail--w5{ --rail-w:calc((min(100vw,var(--maxw)) - 56px - 4*20px)/4.4); --rail-gap:20px; }
@media(max-width:1024px){
  .rail--w4,.rail--w5{ --rail-w:44vw; }
  .rail--w3{ --rail-w:62vw; }
}
@media(max-width:640px){
  .rail--w4,.rail--w5{ --rail-w:74vw; }
  .rail--w3{ --rail-w:82vw; }
}

/* =====================================================================
   8 · STORY BAND — the dark carousel band from the lodge wireframes
   ===================================================================== */
.storyband{
  background:var(--espresso) var(--tex-storyband,none) center/cover;
  padding:clamp(46px,6vw,84px) 0;
  position:relative; overflow:hidden;
}
.storyband::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 100% at 50% 0%, rgba(174,142,80,.10), transparent 65%);
  pointer-events:none;
}
.storyband .wrap{ position:relative; z-index:1; }
.rail--story .rail__item{ height:clamp(360px,42vw,470px); }
.rail--story .storycard{ height:100%; }
.rail--story .storycard__ph{ flex:1; aspect-ratio:auto; min-height:0; }
.rail--story .storycard__cap{ flex:0 0 auto; }
.rail--story .storycard__cap--script{ line-height:1.15; padding:26px 20px; }

/* headings inside rise blocks wrap naturally and stay balanced */
.rise>span{ text-wrap:balance; }
h2 .rise{ display:block; }

/* =====================================================================
   9 · FIXES & REFINEMENTS
   ===================================================================== */

/* inner heroes carry copy over bright photography — deepen the scrim */
.hero--lodge .hero__scrim{
  background:linear-gradient(to bottom,rgba(18,15,12,.62),rgba(18,15,12,.30) 38%,rgba(18,15,12,.78));
}
.hero--lodge .hero__inner .eyebrow,
.hero--lodge .hero__inner h1,
.hero--lodge .hero__inner .hero__sub{ text-shadow:0 2px 22px rgba(0,0,0,.55); }
.hero__sub-name{ color:var(--gold-300); }

/* a rail with nothing to scroll hides its controls */
.rail.is-static .rail__nav,
.rail.is-static .rail__progress,
.rail.is-static .rail__dots{ opacity:0; pointer-events:none; }

/* mosaic tiles fill their grid cell rather than keeping a card ratio */
.mosaic{ grid-auto-rows:clamp(150px,17vw,230px); }
.mosaic .photocard,
.mosaic .photocard--wide,
.mosaic .photocard--sq,
.mosaic .photocard--tall{ aspect-ratio:auto; height:100%; min-height:0; }
.mosaic>div{ min-height:0; }

/* suite page: keep the amenity column from touching the copy on small screens */
@media(max-width:860px){
  .edit2>div[style*="border-left"]{ border-left:0 !important; padding-left:0 !important; }
}
.photocard--fill{ aspect-ratio:auto; height:100%; }

/* =====================================================================
   10 · RESPONSIVE HEADER
   Below 860px the primary nav and the header CTA give way to the burger
   and the slide-in drawer. (The burger had no breakpoint before this.)
   ===================================================================== */
@media(max-width:860px){
  .mainnav{ display:none; }
  .site-head__cta{ display:none; }
  .burger{ display:flex; }
  .site-head{ padding:12px 0; }
  .site-head__row{ gap:14px; }
  .brandlogo--row{ height:46px; }
  .site-head.scrolled .brandlogo--row{ height:38px; }
}
@media(max-width:420px){
  .brandlogo--row{ height:38px; }
}

/* drawer polish */
.drawer{ padding-top:104px; }
.drawer nav>a,.drawer__toggle{ font-size:15px; }
.drawer__sub a{ letter-spacing:.04em; }

/* the drawer sits above the header so the burger stays reachable */
.site-head{ z-index:200; }
.drawer{ z-index:195; }

/* =====================================================================
   11 · OFFSET BLEED RAIL
   The wireframes show these rails resting with a card already cut by the
   left edge. Pulling the track out by part of a card gives that at rest;
   scroll-snap then can't undo it, because there is nothing to scroll back to.
   ===================================================================== */
.rail--bleed[data-offset] .rail__track{
  margin-left:calc(-0.42 * var(--rail-w, 340px));
}
@media(max-width:700px){
  .rail--bleed[data-offset] .rail__track{ margin-left:calc(-0.18 * var(--rail-w, 340px)); }
}

/* footer admin key — small, quiet, but findable */
.site-foot__cog{
  display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%;
  color:rgba(251,248,243,.32); border:1px solid rgba(251,248,243,.14);
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.site-foot__cog:hover{ color:var(--gold-300); border-color:var(--gold); background:rgba(174,142,80,.12); }
.site-foot__cog svg{ display:block; }