/* JARN experience: native galleries, one lightbox, visible-first motion.
   Every font, photo and script is served by this site. */
:root{--jarn-ease:cubic-bezier(.22,1,.36,1);--jarn-gold:#C4A165}
html{scroll-padding-top:100px;scrollbar-gutter:stable}
@supports(overflow:clip){html,body{overflow-x:clip}}

/* One footer signature, using the original asset's intrinsic proportions. */
footer .j5-foot-mark{display:none!important}
footer .ft-logo>img,footer img.foot-brand-img{
  display:block!important;width:136px!important;height:auto!important;
  max-width:100%;max-height:none!important;aspect-ratio:321/200;
  object-fit:contain!important;object-position:left center;flex:none;
  transform:none!important;filter:none!important;opacity:1!important;
  margin:0 0 22px!important;
}
footer{position:relative}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(196,161,101,.38),transparent);pointer-events:none}

/* The browser owns touch movement, inertia and pinch gestures. */
.gallery,.boutique-grid,.ch-gal,.wi-grid{touch-action:auto;overscroll-behavior-x:contain}
.gallery-item,.ch-gal figure{-webkit-tap-highlight-color:transparent}
.gallery-item:focus-visible,.ch-gal figure:focus-visible{outline:2px solid var(--jarn-gold);outline-offset:5px}
.gallery-item img,.ch-gal img{-webkit-user-drag:none}
@media(max-width:899px){
  .gallery,.boutique-grid,.ch-gal{
    display:flex!important;grid-template-columns:none!important;gap:12px!important;
    overflow-x:auto!important;overflow-y:hidden!important;
    scroll-snap-type:x mandatory;scroll-snap-stop:normal;
    scroll-padding-inline:22px;scroll-behavior:auto;
    -webkit-overflow-scrolling:touch;direction:ltr;
    margin-inline:-22px!important;padding:4px 22px 17px!important;
    max-width:none!important;width:calc(100% + 44px)!important;
    scrollbar-width:thin;scrollbar-color:rgba(196,161,101,.55) transparent;
    contain:layout style;
  }
  .gallery::-webkit-scrollbar,.boutique-grid::-webkit-scrollbar,.ch-gal::-webkit-scrollbar{height:3px}
  .gallery::-webkit-scrollbar-thumb,.boutique-grid::-webkit-scrollbar-thumb,.ch-gal::-webkit-scrollbar-thumb{background:rgba(196,161,101,.55);border-radius:3px}
  .gallery>.gallery-item,.boutique-grid>.gallery-item,.ch-gal>figure{
    display:block!important;position:relative;flex:0 0 89%;width:89%!important;
    min-width:0;max-width:none;grid-area:auto!important;
    aspect-ratio:4/5!important;height:auto!important;margin:0!important;
    scroll-snap-align:start;scroll-snap-stop:normal;
    border-radius:3px!important;transform:none!important;
    box-shadow:0 10px 26px -18px rgba(15,12,8,.45);
    isolation:isolate;overflow:hidden;
  }
  .gallery-item img,.boutique-grid img,.ch-gal img{
    width:100%!important;height:100%!important;object-fit:cover;
    transform:none!important;transition:none!important;animation:none!important;
    will-change:auto!important;
  }
  .gallery-item::before,.gallery-item::after{display:none!important}
  .gallery-item-tag{opacity:1!important;transform:none!important}
  .wi-grid{scroll-snap-stop:normal;scroll-behavior:auto}
  .wi-card{scroll-snap-align:center;scroll-snap-stop:normal}
}
body.lang-ar .gallery-item-tag,body.lang-ar .ch-gal figcaption{direction:rtl;text-align:right}

/* Keep the current hero and its copy; make its existing photos swipeable. */
@media(max-width:900px){
  #hero .h-slides{
    display:flex;position:absolute;inset:0;width:100%;height:100%;
    overflow-x:auto;overflow-y:hidden;direction:ltr;
    scroll-snap-type:x mandatory;scroll-snap-stop:normal;
    scroll-behavior:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;touch-action:auto;scrollbar-width:none;
    transform:none!important;will-change:auto;
  }
  #hero .h-slides::-webkit-scrollbar{display:none}
  #hero .h-slide,#hero .h-slide:nth-child(2){
    display:block!important;position:relative;inset:auto;flex:0 0 100%;
    width:100%;height:100%;opacity:1!important;z-index:auto;
    scroll-snap-align:start;transition:none!important;
  }
  #hero .h-slide img{animation:none!important;transform:none!important}
  #hero .h-veil,#hero .h-body{pointer-events:none}
  #hero .h-body a,#hero .h-body button,#hero .h5-prog{pointer-events:auto}
  #hero .h5-bar,#hero .h5-bar:nth-child(2){display:block!important}
}
@media(min-width:901px){
  #hero .h-slide:not(.on) img{animation:none!important}
  .cs3d-visual{position:sticky!important;top:0;align-self:flex-start;height:100vh;height:100svh}
  .cs3d-visual-inner{position:relative!important;inset:auto!important;width:100%!important;height:100%!important;transform:none!important}
  .cs3d-frame{transform:perspective(1800px) rotateX(var(--jarn-rx,0deg)) rotateY(var(--jarn-ry,0deg));transition:transform .55s var(--jarn-ease);will-change:auto}
  .cs3d-img{transition:opacity .8s var(--jarn-ease),transform 1s var(--jarn-ease)!important;filter:none!important;clip-path:none!important;will-change:auto}
  .cs3d-img.active{opacity:1;transform:none}
  .cs3d-img.past,.cs3d-img.future{opacity:0;transform:scale(1.035)}
}

/* The legacy dialog shells and their existing controls are retained. */
#lb.jarn-lightbox,#chlb.jarn-lightbox{
  position:fixed;inset:0;z-index:10020;display:none!important;
  width:100%;height:100%;height:100dvh;
  overflow:hidden;background:#0B0A08!important;
  opacity:1!important;visibility:hidden;touch-action:auto!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  transition:none!important;overscroll-behavior:contain;
}
#lb.jarn-lightbox.is-open,#chlb.jarn-lightbox.is-open{display:block!important;visibility:visible;animation:jarnDialogIn .18s ease-out}
@keyframes jarnDialogIn{from{opacity:.65}to{opacity:1}}
.jarn-lightbox .lb-stage{position:static!important;padding:0!important;width:100%;height:100%;cursor:default!important}
.jarn-lightbox .lb-zones,.jarn-lightbox>#lb-bg,.jarn-lightbox#chlb>img{display:none!important}
.jarn-lightbox .jarn-lb-track{
  display:flex!important;position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;overflow-x:auto!important;overflow-y:hidden!important;
  direction:ltr!important;scroll-snap-type:x mandatory;scroll-snap-stop:normal;
  scroll-padding:0;scroll-behavior:auto;-webkit-overflow-scrolling:touch;
  touch-action:auto!important;overscroll-behavior-x:contain;
  transform:none!important;transition:none!important;will-change:auto!important;
  scrollbar-width:none;contain:layout style;
}
.jarn-lb-track::-webkit-scrollbar{display:none}
.jarn-lightbox .jarn-lb-slide{
  display:flex!important;align-items:center;justify-content:center;
  position:relative!important;inset:auto!important;box-sizing:border-box;
  flex:0 0 100%;width:100%;min-width:0;height:100%;
  padding:calc(70px + env(safe-area-inset-top,0px)) 24px calc(65px + env(safe-area-inset-bottom,0px));
  scroll-snap-align:center;scroll-snap-stop:normal;
  transform:none!important;transition:none!important;touch-action:auto!important;
}
.jarn-lb-slide picture{display:flex!important;align-items:center;justify-content:center;width:100%;height:100%;pointer-events:none}
.jarn-lightbox .jarn-lb-slide img{
  position:static!important;display:block!important;flex:none;
  width:auto!important;height:auto!important;min-width:0;min-height:0;
  max-width:100%!important;max-height:100%!important;object-fit:contain!important;
  transform:none!important;animation:none!important;transition:none!important;
  pointer-events:auto!important;touch-action:auto!important;
  border-radius:2px;box-shadow:0 24px 70px rgba(0,0,0,.3);
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;
}
.jarn-lightbox .jarn-lb-control{
  position:absolute!important;z-index:4!important;display:flex!important;
  align-items:center;justify-content:center;box-sizing:border-box;
  width:46px!important;height:46px!important;padding:0!important;
  border:1px solid rgba(255,255,255,.24)!important;border-radius:50%!important;
  background:rgba(28,25,20,.82)!important;color:#fff!important;
  cursor:pointer;opacity:1!important;line-height:1;font-size:22px;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background .2s,border-color .2s,opacity .2s!important;
}
.jarn-lightbox .jarn-lb-control:hover{background:rgba(90,74,51,.9)!important;border-color:rgba(196,161,101,.8)!important}
.jarn-lightbox .jarn-lb-control:focus-visible{outline:2px solid var(--jarn-gold);outline-offset:5px}
.jarn-lightbox .jarn-lb-control:disabled{opacity:.24!important;cursor:default;pointer-events:none}
.jarn-lightbox .jarn-lb-close{right:max(18px,env(safe-area-inset-right,0px))!important;top:calc(18px + env(safe-area-inset-top,0px))!important;left:auto!important;bottom:auto!important;transform:none!important}
.jarn-lightbox .jarn-lb-prev{left:max(18px,env(safe-area-inset-left,0px))!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translateY(-50%)!important}
.jarn-lightbox .jarn-lb-next{right:max(18px,env(safe-area-inset-right,0px))!important;top:50%!important;left:auto!important;bottom:auto!important;transform:translateY(-50%)!important}
.jarn-lightbox .jarn-lb-counter{
  position:absolute!important;left:50%!important;top:calc(25px + env(safe-area-inset-top,0px))!important;bottom:auto!important;right:auto!important;
  width:auto!important;max-width:calc(100% - 150px);margin:0!important;z-index:4;
  transform:translateX(-50%)!important;background:transparent!important;
  color:rgba(255,255,255,.82);font-size:12px;letter-spacing:.18em;line-height:1.5;
  padding:5px 0!important;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
  text-align:center;direction:ltr;pointer-events:none;backdrop-filter:none!important;
}
#chlb.jarn-lightbox .jarn-lb-counter{top:auto!important;bottom:calc(22px + env(safe-area-inset-bottom,0px))!important;max-width:calc(100% - 40px)}
body.jarn-dialog-open{position:fixed!important;inset-inline:0!important;width:100%!important;overflow:hidden!important}
html.jarn-dialog-open{overflow:hidden!important}
body.jarn-dialog-open .jchap-capsule{opacity:0!important;pointer-events:none!important}
@media(max-width:768px){
  .jarn-lightbox .jarn-lb-slide{padding-inline:8px}
  .jarn-lightbox .jarn-lb-prev,.jarn-lightbox .jarn-lb-next{top:auto!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;width:40px!important;height:40px!important;transform:none!important}
  #chlb.jarn-lightbox .jarn-lb-counter{max-width:calc(100% - 130px);font-size:11px;letter-spacing:.06em}
}

/* A bounded, event-driven depth layer. No scroll smoothing takeover. */
.jarn-depth-image{transform:translate3d(0,var(--jarn-parallax,0px),0) scale(1.035)!important;animation:none!important;will-change:auto!important}
.jarn-tilt{transform:perspective(1200px) rotateX(var(--jarn-rx,0deg)) rotateY(var(--jarn-ry,0deg));transform-origin:center;transition:transform .65s var(--jarn-ease),box-shadow .65s var(--jarn-ease)}
@media(hover:hover) and (pointer:fine){
  .jarn-tilt:hover{box-shadow:0 25px 65px -38px rgba(15,12,8,.45)}
  .studio-card,.gallery-item,.ch-gal figure{isolation:isolate}
}
@media(pointer:coarse){
  body::after{display:none!important}
  .cs3d-m-slide{transform-origin:50% 5%;transition:transform .65s var(--jarn-ease)}
  .cs3d-m-slide.is-under{transform:scale(.988)}
  .jarn-tilt{transform:none!important}
}
html.jarn-lite .jarn-depth-image{transform:none!important}
html.jarn-lite .cs3d-m-slide.is-under{transform:none!important}
html.jarn-lite .ch-hero picture img,html.jarn-lite .h-slide img,html.jarn-lite .cs3d-img img,html.jarn-lite .cs3d-bg-glow{animation:none!important}
html.jarn-lite body::after{display:none!important}
a,button{-webkit-tap-highlight-color:transparent}
.nav-cta,.btn-fill,.btn-primary,.btn-airbnb,.ch-actions .btn{min-height:44px}
.jchap-capsule{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
body.jarn-at-footer .jchap-capsule,body.jarn-at-footer .jchap-rail{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .jarn-depth-image,.jarn-tilt,.cs3d-m-slide.is-under,.cs3d-frame{transform:none!important}
  body::after{display:none!important}
}
