/* ============================================================
   KAL VISTA — shared spine
   Parent shell: warm, cinematic, unhurried.
   Each world page overrides the --w-* tokens to reskin the
   shared skeleton (nav, booking dock, footer) in its own vibe.
   ============================================================ */

:root{
  /* parent brand */
  --kv-ink:      #17140f;   /* warm near-black */
  --kv-ink-soft: #38322a;
  --kv-cream:    #f5f1e8;
  --kv-gold:     #b5a582;   /* brass-olive, from the wordmark */
  --kv-mute:     #8a8272;

  /* world tokens — worlds override these */
  --w-bg:      var(--kv-cream);
  --w-surface: #fffdf8;
  --w-ink:     var(--kv-ink);
  --w-ink-soft:var(--kv-ink-soft);
  --w-mute:    var(--kv-mute);
  --w-accent:  var(--kv-gold);
  --w-accent-2:#7a6f52;
  --w-line:    rgba(23,20,15,.16);

  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;

  /* z scale */
  --z-nav:50; --z-transport:80; --z-toast:90;

  --ease-out:cubic-bezier(.16,1,.3,1);       /* expo-ish out */
  --ease-swift:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Lenis drives scroll per-frame; CSS smooth-behavior would animate every one
   of those writes and the page lags then leaps. Lenis pages must be instant. */
html.kv-smooth{scroll-behavior:auto}
html,body{background:var(--w-bg);color:var(--w-ink)}
body{
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
::selection{background:var(--w-ink);color:var(--w-bg)}

h1,h2,h3{text-wrap:balance}

/* ---------- NAV (shared skeleton, world-tinted) ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(20px,4vw,44px);
  color:var(--nav-ink, var(--kv-cream));
  transition:color .45s var(--ease-swift), background .45s var(--ease-swift),
             border-color .45s var(--ease-swift), padding .45s var(--ease-swift);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:color-mix(in srgb, var(--w-bg) 88%, transparent);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  color:var(--w-ink);
  border-color:var(--w-line);
  padding-top:14px;padding-bottom:14px;
}
.nav .brand{display:flex;align-items:center;gap:13px}
.brand-mark{
  width:33px;height:33px;border:1px solid currentColor;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:16px;font-style:italic;
  flex:none;
}
.brand-name{
  font-family:var(--font-display);font-size:19px;letter-spacing:.3em;
  font-weight:400;white-space:nowrap;
}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  position:relative;padding:6px 0;
}
.nav-links a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:currentColor;transition:right .4s var(--ease-out);
}
.nav-links a:hover::after{right:0}
.nav-cta{
  border:1px solid currentColor;border-radius:999px;padding:10px 22px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  transition:background .3s,color .3s;
}
.nav-cta:hover{background:currentColor}
.nav-cta:hover span{color:var(--w-bg)}

/* ---------- BOOKING DOCK (world-tinted) ---------- */
.book-dock{
  background:color-mix(in srgb, var(--w-surface) 96%, transparent);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:6px;padding:10px;
  display:grid;grid-template-columns:repeat(3,minmax(150px,1fr)) auto;
  color:var(--w-ink);
  box-shadow:0 30px 80px rgba(0,0,0,.28);
}
.book-field{
  padding:14px 22px;display:flex;flex-direction:column;gap:4px;
  border-right:1px solid var(--w-line);cursor:pointer;
  transition:background .2s;
}
.book-field:hover{background:rgba(0,0,0,.04)}
.book-field label{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--w-mute);font-weight:500;
}
.book-field .val{font-family:var(--font-display);font-size:17px}
.book-btn{
  background:var(--w-ink);color:var(--w-bg);border:0;border-radius:3px;
  padding:0 30px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  transition:background .3s;
}
.book-btn:hover{background:var(--w-accent)}
.book-btn .arrow{margin-left:10px;display:inline-block;transition:transform .3s}
.book-btn:hover .arrow{transform:translateX(4px)}

/* ---------- HOSTFULLY LIVE BOOKING ---------- */
.hostfully-booking{
  position:relative;max-width:900px;margin:0 auto;text-align:left;
  background:var(--w-surface);color:var(--w-ink);border-radius:6px;
  box-shadow:0 30px 80px rgba(0,0,0,.28);overflow:visible;
}
.booking-status{
  margin:0;padding:30px;text-align:center;font-family:var(--font-body);
  font-size:13px;line-height:1.6;letter-spacing:.04em;color:var(--w-mute);
}
.booking-status a{color:var(--w-ink);text-decoration:underline;text-underline-offset:3px}
.hostfully-booking.is-ready .hostfully-booking-mount{min-height:0}
.hostfully-booking.is-unavailable{box-shadow:none;border:1px solid var(--w-line)}

.hostfully-booking .leadWidget > form.orbirental-capture-widget-form{
  display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;
  width:100%!important;padding:12px!important;border:0!important;border-radius:6px;
  background:var(--w-surface)!important;color:var(--w-ink)!important;
  font-family:var(--font-body)!important;font-size:14px!important;
}
.hostfully-booking .leadWidget > form.orbirental-capture-widget-form > *{
  grid-column:1/-1;box-sizing:border-box!important;margin:0!important;padding:0!important;
}
.hostfully-booking .leadWidget > form.orbirental-capture-widget-form > .orbirental-capture-checkin,
.hostfully-booking .leadWidget > form.orbirental-capture-widget-form > .orbirental-capture-checkout{
  grid-column:span 3;
}
.hostfully-booking .leadWidget > form.orbirental-capture-widget-form > .orbirental-capture-guests,
.hostfully-booking .leadWidget > form.orbirental-capture-widget-form > div:has(> input[name="email"]),
.hostfully-booking .leadWidget > form.orbirental-capture-widget-form > div:has(> input[name="name"]){
  grid-column:span 2;
}
.hostfully-booking .leadWidget input,
.hostfully-booking .leadWidget select,
.hostfully-booking .leadWidget textarea{
  width:100%!important;height:52px!important;padding:0 16px!important;margin:0!important;
  border:1px solid var(--w-line)!important;border-radius:3px!important;
  background:color-mix(in srgb,var(--w-surface) 92%,var(--w-ink) 8%)!important;
  color:var(--w-ink)!important;font:500 14px/1 var(--font-body)!important;
  box-shadow:none!important;outline:none;transition:border-color .2s,background .2s;
}
.hostfully-booking .leadWidget input:focus,
.hostfully-booking .leadWidget select:focus,
.hostfully-booking .leadWidget textarea:focus{
  border-color:var(--w-accent)!important;background:var(--w-surface)!important;
}
.hostfully-booking .leadWidget input::placeholder{color:var(--w-mute);opacity:1}
.hostfully-booking .leadWidget .orbirental-capture-widget-price-option,
.hostfully-booking .leadWidget .orbirental-capture-widget-totalnights,
.hostfully-booking .leadWidget .orbirental-capture-widget-minstay-option{
  padding:3px 4px!important;color:var(--w-mute);text-align:left!important;
}
.hostfully-booking .leadWidget .orbirental-capture-widget-price{color:var(--w-ink)}
.hostfully-booking .leadWidget > form.orbirental-capture-widget-form > button{
  min-height:54px!important;padding:0 26px!important;border:0!important;border-radius:3px!important;
  background:var(--w-ink)!important;color:var(--w-bg)!important;
  font:600 11px/1 var(--font-body)!important;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;transition:background .3s,transform .3s;
}
.hostfully-booking .leadWidget > form.orbirental-capture-widget-form > button:hover{
  background:var(--w-accent)!important;transform:translateY(-1px);
}
.hostfully-booking .leadWidget .orbirental-capture-widget-details-link{
  color:var(--w-ink)!important;font-size:12px;text-underline-offset:3px;
}
.hostfully-booking .leadWidget p.orbirental-capture-widget-error-dates,
.hostfully-booking .leadWidget p.orbirental-capture-widget-error-guests,
.hostfully-booking .leadWidget p.orbirental-capture-widget-error-coupon{
  color:#9d2f24!important;font-size:13px;line-height:1.45;
}
.hostfully-booking .pika-single{font-family:var(--font-body);color:#17140f}
/* price-details breakdown (Rent / Taxes / Fees / Total) — the widget ships it
   nearly invisible on our cream surface; force full-contrast ink */
.hostfully-booking table,
.hostfully-booking table th,
.hostfully-booking table td,
.hostfully-booking .orbirental-capture-widget-quote,
.hostfully-booking .orbirental-capture-widget-quote *{
  color:var(--w-ink)!important;opacity:1!important;
}
.hostfully-booking table th,
.hostfully-booking table td{
  background:transparent!important;font-size:14px!important;
  border-color:var(--w-line)!important;padding:9px 6px!important;
}
/* center the quote block (Hide/Show details + price table) inside the card.
   The widget wraps it in a <p>, so page paragraph styles (max-width/margins)
   leak in and pin it left — neutralize them first. */
.hostfully-booking p.orbirental-capture-widget-wrapper{
  max-width:none!important;width:100%!important;justify-self:stretch;
}
.hostfully-booking a.orbirental-capture-widget-details-link{
  display:block!important;width:max-content!important;margin:0 auto!important;
  text-align:center!important;float:none!important;
}
.hostfully-booking .orbirental-capture-widget-quote{
  float:none!important;display:block;width:min(100%,560px)!important;
  margin:8px auto 0!important;text-align:center;
}
.hostfully-booking .orbirental-capture-widget-quote table{width:100%!important;margin:0 auto!important;text-align:left}

/* ---------- FOOTER (stays Kal Vista ink everywhere) ---------- */
.foot{
  background:var(--kv-ink);color:var(--kv-cream);
  padding:clamp(70px,9vw,120px) clamp(20px,4vw,44px) 56px;
  position:relative;overflow:hidden;
}
.foot-big{
  font-family:var(--font-display);font-weight:300;font-style:italic;
  font-size:clamp(56px,9vw,96px);line-height:.9;letter-spacing:-.03em;
  max-width:1500px;margin:0 auto;
}
.foot-big em{font-style:normal;color:var(--kv-gold)}
.foot-grid{
  max-width:1500px;margin:clamp(50px,7vw,90px) auto 0;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:50px;
  border-top:1px solid rgba(245,241,232,.16);padding-top:52px;
}
.foot-col h5{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--kv-gold);margin-bottom:22px;font-weight:500;
}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:11px}
.foot-col a{font-size:14px;opacity:.86;transition:opacity .3s}
.foot-col a:hover{opacity:1}
.foot-mark{font-family:var(--font-display);font-size:24px;letter-spacing:.28em;margin-bottom:22px}
.foot-sub{
  font-family:var(--font-display);font-style:italic;font-weight:300;
  font-size:17px;line-height:1.55;max-width:36ch;opacity:.85;
}
.foot-legal{
  max-width:1500px;margin:70px auto 0;display:flex;justify-content:space-between;
  align-items:center;gap:20px;padding-top:26px;
  border-top:1px solid rgba(245,241,232,.12);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;
}

/* ---------- TRANSPORT VEIL (portal → world transition) ---------- */
.transport-veil{
  position:fixed;inset:0;z-index:var(--z-transport);pointer-events:none;
  background:var(--veil,#17140f);
  clip-path:circle(0% at var(--vx,50%) var(--vy,50%));
}
.transport-veil.go{
  transition:clip-path .72s var(--ease-swift);
  clip-path:circle(150% at var(--vx,50%) var(--vy,50%));
  pointer-events:auto;
}

/* ---------- IMAGE DIVE (portal → world: enter through the photograph) ---------- */
.dive-layer{
  position:fixed;inset:0;z-index:var(--z-transport);
  pointer-events:none;visibility:hidden;overflow:hidden;background:transparent;
}
.dive-layer.go{visibility:visible;pointer-events:auto}
.dive-layer img{
  position:absolute;object-fit:cover;
  will-change:left,top,width,height,transform,filter;
}
.dive-layer .dive-shade{
  position:absolute;inset:0;background:var(--veil,#17140f);opacity:0;
}

/* arriving on a world page: veil starts open, irises away */
.arrive-veil{
  position:fixed;inset:0;z-index:var(--z-transport);pointer-events:none;
  background:var(--veil,#17140f);
  animation:arrive-open 1s var(--ease-swift) .1s forwards;
}
@keyframes arrive-open{to{opacity:0;visibility:hidden}}

/* dive arrival: the hero settles out of the zoom the visitor entered through */
body.dive-arrive .arrive-veil{display:none}

/* ---------- LIVE PHOTO (video upgrade over a still) ---------- */
.live-photo{position:relative;overflow:hidden}
.live-photo video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1s;border-radius:inherit;
}
.live-photo video.ready{opacity:1}

/* ---------- MPA cross-document transitions where supported ---------- */
@view-transition{navigation:auto}

/* ---------- SHARED RESPONSIVE ---------- */
@media (max-width:1000px){
  .nav-links{display:none}
  .book-dock{grid-template-columns:1fr 1fr}
  .book-btn{grid-column:span 2;padding:16px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:38px}
}

@media (max-width:600px){
  .brand-name{font-size:15px !important;letter-spacing:.18em !important}
  .nav-cta{padding:8px 14px;font-size:10px;letter-spacing:.14em;white-space:nowrap}
  .hostfully-booking .leadWidget > form.orbirental-capture-widget-form{
    grid-template-columns:1fr;gap:9px;padding:10px!important;
  }
  .hostfully-booking .leadWidget > form.orbirental-capture-widget-form > *,
  .hostfully-booking .leadWidget > form.orbirental-capture-widget-form > .orbirental-capture-checkin,
  .hostfully-booking .leadWidget > form.orbirental-capture-widget-form > .orbirental-capture-checkout,
  .hostfully-booking .leadWidget > form.orbirental-capture-widget-form > .orbirental-capture-guests,
  .hostfully-booking .leadWidget > form.orbirental-capture-widget-form > div:has(> input[name="email"]),
  .hostfully-booking .leadWidget > form.orbirental-capture-widget-form > div:has(> input[name="name"]){grid-column:1}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .transport-veil,.arrive-veil{display:none}
  video[autoplay]{display:none}
}