:root{
  --ink:#1a120c;
  --night:#0d1224;
  --dune:#d3a158;
  --dune-deep:#9b6a2e;
  --sand:#ead9b5;
  --sand-lt:#f4ecda;
  --display:'Marcellus','Iowan Old Style',Georgia,serif;
  --body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --pad:clamp(1.25rem,5vw,5rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:400 1.05rem/1.7 var(--body);color:var(--ink);background:var(--sand-lt);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--dune);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:-.01em}
h2{font-size:clamp(2rem,4.4vw,3.7rem)}
p{max-width:62ch}

/* film grain: keeps photos from feeling digital-flat */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* sand layer */
#sand{position:fixed;inset:0;width:100%;height:100%;z-index:45;pointer-events:none}

/* reveal: text emerges out of blown sand */
.js .sandin{opacity:0;filter:blur(14px);transform:translateY(22px);transition:opacity 1.1s ease,filter 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.js .sandin.in{opacity:1;filter:none;transform:none}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:1rem var(--pad);color:var(--sand-lt);transition:background .5s,padding .5s,backdrop-filter .5s}
.nav.solid{background:rgba(13,18,36,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:.55rem;padding-bottom:.55rem}
.brand{display:block;text-decoration:none}
.brand img{height:clamp(46px,6.2vw,62px);width:auto;transition:height .5s}
.nav.solid .brand img{height:clamp(38px,4.6vw,46px)}
.links{display:flex;gap:1.8rem;align-items:center;list-style:none}
.links a{text-decoration:none;font-size:.95rem;opacity:.9}
.links a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
.links a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--dune)}
.btn{display:inline-block;text-decoration:none;padding:.85rem 1.6rem;border:1px solid currentColor;font-weight:500;font-size:.98rem;transition:background .3s,color .3s,border-color .3s;background:none;text-align:center}
.btn.solid{background:var(--dune);border-color:var(--dune);color:var(--ink)}
.btn.solid:hover{background:var(--sand-lt);border-color:var(--sand-lt)}
.btn.ghost:hover{background:var(--sand-lt);color:var(--ink);border-color:var(--sand-lt)}
.btn.dark{color:var(--ink)}
.btn.dark:hover{background:var(--ink);color:var(--sand-lt)}
.menu{display:none;background:none;border:1px solid rgba(244,236,218,.5);padding:.45rem .9rem}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;color:var(--sand-lt);overflow:hidden;
  background:linear-gradient(180deg,#2b2347 0%,#a8603f 52%,#e0b36e 100%)}
.hero-media{position:absolute;inset:-7% 0;will-change:transform}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,18,36,.55) 0%,rgba(13,18,36,.08) 36%,rgba(20,13,8,.84) 100%)}
.hero-copy{position:relative;z-index:2;padding:7rem var(--pad) 0;max-width:64rem}
.hero h1{font-size:clamp(2.7rem,7.4vw,6.6rem);margin-bottom:1.1rem}
.hero .lede{font-size:clamp(1.05rem,1.5vw,1.3rem);max-width:42ch;opacity:.95}
.proof{position:relative;z-index:2;display:flex;flex-wrap:wrap;margin:1.8rem var(--pad) 1.1rem;gap:.4rem 0}
.proof div{padding-right:1.6rem;margin-right:1.6rem;border-right:1px solid rgba(244,236,218,.28);line-height:1.2}
.proof div:last-child{border:0;margin:0;padding:0}
.proof strong{font:400 1.5rem var(--display)}
.proof small{display:block;font-size:.8rem;opacity:.8}

/* booking bar in the header */
.book{position:relative;z-index:3;margin:0 var(--pad) clamp(1.2rem,3.5vh,2.2rem);display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:0;
  background:rgba(244,236,218,.95);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.book label{display:grid;gap:.1rem;padding:.8rem 1.1rem;border-right:1px solid rgba(26,18,12,.18);font-size:.78rem;color:rgba(26,18,12,.7)}
.book input,.book select{font:500 1.02rem var(--body);color:var(--ink);background:none;border:0;padding:.1rem 0;width:100%;border-radius:0;color-scheme:light}
.book input:focus,.book select:focus{outline:none}
.book label:focus-within{background:#fff}
.book button{border:0;background:var(--dune);color:var(--ink);font-weight:600;padding:0 2.2rem;font-size:1rem;transition:background .3s}
.book button:hover{background:var(--ink);color:var(--sand-lt)}
.book-note{max-width:none;position:relative;z-index:3;margin:-.8rem var(--pad) 1.3rem;font-size:.85rem;opacity:.85}
.book-note a{text-decoration:underline;text-underline-offset:3px}

/* about */
.about{position:relative;padding:clamp(5rem,12vw,10rem) var(--pad) clamp(3rem,6vw,5rem);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2.5rem,7vw,7rem);align-items:start;overflow:hidden}
.about::before{content:"";position:absolute;right:-6vw;top:2rem;width:min(46vw,640px);aspect-ratio:584/326;background:url(../images/emblem-black.png) center/contain no-repeat;opacity:.045;pointer-events:none}
.about>*{position:relative}
.about h2{margin-bottom:1.8rem;max-width:16ch}
.about p+p{margin-top:1.1rem}
.facts{border-top:1px solid rgba(26,18,12,.25)}
.facts div{padding:1.15rem 0;border-bottom:1px solid rgba(26,18,12,.25)}
.facts dt{font:400 1.25rem var(--display);margin-bottom:.2rem}
.facts dd{font-size:.98rem;opacity:.85}
.about-photos{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(.7rem,1.6vw,1.4rem);padding:0 var(--pad) clamp(5rem,10vw,8rem);background:var(--sand-lt)}
.about-photos figure{overflow:hidden;background:#d8c9a6;aspect-ratio:4/3}
.about-photos figure:nth-child(2){margin-top:clamp(2rem,8vw,6rem)}
.about-photos img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s ease}
.about-photos figure:hover img{transform:scale(1.04)}

/* journey: scroll drives time of day, light and sand */
.journey{position:relative;height:540vh;background:var(--night);color:var(--sand-lt)}
.stage{position:sticky;top:0;height:100svh;overflow:hidden}
.stage-bg{position:absolute;inset:0;background:linear-gradient(180deg,#2b2347,#c27a4b)}
.tint{position:absolute;inset:0}
#stars{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.stage-copy{position:absolute;left:var(--pad);bottom:clamp(4.5rem,11vh,7.5rem);right:var(--pad);max-width:38rem;z-index:2}
.clock{font:400 clamp(4.5rem,13vw,10.5rem)/.88 var(--display);font-variant-numeric:tabular-nums;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.swap{animation:swapin 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes swapin{from{opacity:0;filter:blur(12px);transform:translateY(16px)}to{opacity:1;filter:none;transform:none}}
.stage-copy h3{font-size:clamp(1.6rem,3vw,2.5rem);margin:1.1rem 0 .6rem}
.stage-copy p{text-shadow:0 1px 18px rgba(0,0,0,.45)}
.stage::after{content:"";position:absolute;inset:auto 0 0 0;height:60%;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);pointer-events:none}
.rail{position:absolute;z-index:3;right:var(--pad);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:1.1rem;list-style:none}
.rail button{background:none;border:0;border-right:2px solid rgba(244,236,218,.3);padding:.2rem .9rem .2rem 0;font-size:.95rem;opacity:.6;text-align:right;font-variant-numeric:tabular-nums;transition:opacity .4s,border-color .4s}
.rail button[aria-current="true"]{opacity:1;border-color:var(--dune)}
.hint{position:absolute;z-index:3;top:6rem;left:var(--pad);font-size:.9rem;opacity:.85}

/* stay */
.stay{background:var(--ink);color:var(--sand-lt);padding:clamp(5rem,11vw,9rem) var(--pad);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.slider{position:relative;aspect-ratio:4/3;overflow:hidden;background:#2b1f16}
.slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);filter:blur(10px) sepia(.4);transition:opacity 1s ease,transform 1.6s ease,filter 1s ease}
.slider img.on{opacity:1;transform:none;filter:none}
.slider-ctl{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;font-size:.95rem;gap:1rem}
.slider-ctl div{display:flex;gap:.6rem}
.slider-ctl button{background:none;border:1px solid rgba(244,236,218,.45);padding:.45rem 1.1rem}
.slider-ctl button:hover{background:var(--sand-lt);color:var(--ink)}
.stay h2{margin-bottom:1.2rem}
.specs{margin-top:2rem;display:grid;grid-template-columns:1fr 1fr;gap:0 2rem;border-top:1px solid rgba(244,236,218,.25)}
.specs div{padding:.9rem 0;border-bottom:1px solid rgba(244,236,218,.2)}
.specs dt{font-size:.82rem;opacity:.7}
.specs dd{font-size:1rem}
.note{margin-top:1.6rem;font-size:.95rem;opacity:.8}

/* experiences: sticky photo changes as you scroll the list */
.exp{padding:clamp(5rem,11vw,9rem) var(--pad);background:var(--sand)}
.exp h2{margin-bottom:3rem;max-width:18ch}
.exp-wrap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.exp-panel{position:sticky;top:6.5rem;aspect-ratio:4/5;max-height:calc(100svh - 8rem);overflow:hidden;background:#cdb88f}
.exp-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.07);filter:blur(12px) sepia(.45);transition:opacity 1s ease,transform 1.6s ease,filter 1s ease}
.exp-panel img.on{opacity:1;transform:none;filter:none}
.exp-panel figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1.2rem .9rem;color:var(--sand-lt);font:400 1.15rem var(--display);background:linear-gradient(0deg,rgba(0,0,0,.6),transparent)}
.rows{border-top:1px solid rgba(26,18,12,.3)}
.row{padding:clamp(1.6rem,4vh,2.6rem) 0;border-bottom:1px solid rgba(26,18,12,.3);transition:opacity .6s}
.row h3{font-size:clamp(1.4rem,2.3vw,2rem);margin-bottom:.5rem}
.row p{opacity:.88}
.row-img{display:none}
.js .rows.has-active .row:not(.on){opacity:.5}

/* gallery teaser on the home page */
.teaser-sec{background:var(--night);color:var(--sand-lt);padding:clamp(5rem,11vw,9rem) var(--pad)}
.teaser-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1.5rem;margin-bottom:2.5rem}
.teaser{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(130px,17vw,250px);gap:.6rem}
.teaser a{display:block;overflow:hidden;background:#1b2038;position:relative}
.teaser a:nth-child(1){grid-column:span 2;grid-row:span 2}
.teaser a:nth-child(6){grid-column:span 2}
.teaser img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease}
.teaser a:hover img{transform:scale(1.05)}

/* reviews */
.rev{padding:clamp(5rem,11vw,9rem) var(--pad);background:var(--sand-lt)}
.rev h2{margin-bottom:3rem}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0;border-top:1px solid rgba(26,18,12,.3)}
.quotes blockquote{padding:2rem 2rem 2rem 0;margin-right:2rem;border-right:1px solid rgba(26,18,12,.2)}
.quotes blockquote:last-child{border-right:0}
.quotes q{display:block;font:400 clamp(1.3rem,2vw,1.7rem)/1.3 var(--display);quotes:none;margin-bottom:1.2rem}
.quotes cite{font-style:normal;font-size:.92rem;opacity:.75}
.scores{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:.5rem 2.5rem;font-size:.98rem}
.scores a{text-decoration:underline;text-underline-offset:4px}


/* google reviews */
.gsum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,5vw,5rem);align-items:center;margin-bottom:3rem}
.gscore{display:grid;gap:.2rem}
.gscore strong{font:400 clamp(5rem,12vw,9rem)/.9 var(--display);color:var(--dune-deep)}
.gscore span{font-size:.95rem;opacity:.8;max-width:14rem}
.gtext h2{margin-bottom:1rem}
.gbtns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.gq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(26,18,12,.3)}
.gq blockquote{padding:1.8rem 1.8rem 1.8rem 0;margin-right:1.8rem;border-bottom:1px solid rgba(26,18,12,.2);border-right:1px solid rgba(26,18,12,.2)}
.gq blockquote:nth-child(3n){border-right:0;margin-right:0;padding-right:0}
.gq .stars{display:block;color:var(--dune-deep);letter-spacing:.15em;font-size:.95rem;margin-bottom:.8rem}
.gq q{display:block;quotes:none;font-size:1.05rem;line-height:1.6;margin-bottom:1rem}
.gq cite{font-style:normal;font-size:.9rem;opacity:.75}
.tahead{font-size:1.5rem;margin:3.5rem 0 1rem}

/* contact */
.contact{background:var(--night);color:var(--sand-lt);padding:clamp(5rem,11vw,9rem) var(--pad)}
.contact h2{margin-bottom:3rem;max-width:14ch}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem)}
.contact h3{font-size:1.5rem;margin:2rem 0 .6rem}
.contact h3:first-child{margin-top:0}
.contact ul{list-style:none}
.contact li{padding:.35rem 0}
.contact a.u{text-decoration:underline;text-underline-offset:4px}
.map{width:100%;aspect-ratio:16/11;border:0;filter:sepia(.35) saturate(.8) contrast(.95);margin-bottom:2rem;background:#1b2038}
form.enq{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-top:1rem}
form.enq label{display:grid;gap:.3rem;font-size:.9rem}
form.enq .full{grid-column:1/-1}
.contact input,.contact select,.contact textarea{font:inherit;color:var(--sand-lt);background:rgba(244,236,218,.07);border:1px solid rgba(244,236,218,.35);padding:.75rem .85rem;width:100%;border-radius:0}
.contact input:focus,.contact textarea:focus,.contact select:focus{border-color:var(--dune);outline:none}
.contact input[type=date]{color-scheme:dark}
.contact select option{color:#111}

footer{background:#080b18;color:rgba(244,236,218,.75);padding:3rem var(--pad) 2.5rem;font-size:.92rem;display:grid;grid-template-columns:auto 1fr auto;gap:2rem 4rem;align-items:center}
footer img{height:clamp(86px,10vw,120px);width:auto}
footer a{text-decoration:underline;text-underline-offset:4px}
footer ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.fine{grid-column:1/-1;opacity:.7;font-size:.85rem;max-width:none;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 2rem;border-top:1px solid rgba(244,236,218,.15);padding-top:1.2rem}

/* gallery page */
.g-head{background:var(--night);color:var(--sand-lt);padding:clamp(8rem,16vw,11rem) var(--pad) 2.5rem}
.g-head h1{font-size:clamp(2.6rem,6vw,5rem);margin-bottom:1rem}
.g-head p{opacity:.85}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.chips button{background:none;border:1px solid rgba(244,236,218,.4);color:var(--sand-lt);padding:.5rem 1.1rem;font-size:.95rem;transition:background .3s,color .3s}
.chips button:hover{background:rgba(244,236,218,.12)}
.chips button[aria-pressed="true"]{background:var(--dune);border-color:var(--dune);color:var(--ink)}
.g-body{display:flow-root;background:var(--night);padding:0 var(--pad) clamp(4rem,9vw,7rem);min-height:60vh}
.g-count{color:rgba(244,236,218,.7);font-size:.92rem;margin:1.2rem 0 1.4rem}
.masonry{columns:3 280px;column-gap:.7rem}
.masonry figure{break-inside:avoid;margin:0 0 .7rem;overflow:hidden;background:#1b2038;min-height:160px;cursor:zoom-in;position:relative}
.masonry img{width:100%;height:auto;transition:transform .9s ease}
.masonry figure:hover img{transform:scale(1.04)}
.masonry figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .9rem .6rem;color:var(--sand-lt);font-size:.88rem;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent);opacity:0;transition:opacity .5s}
.masonry figure:hover figcaption{opacity:1}
.lb{position:fixed;inset:0;z-index:70;background:rgba(8,10,22,.95);display:none;align-items:center;justify-content:center;flex-direction:column;padding:2rem;color:var(--sand-lt)}
.lb.on{display:flex}
.lb img{max-height:80vh;max-width:92vw;object-fit:contain}
.lb p{margin-top:1rem;font-size:.95rem;text-align:center}
.lb button{position:absolute;background:rgba(8,10,22,.6);border:1px solid rgba(244,236,218,.5);color:var(--sand-lt);padding:.5rem 1rem}
.lb .x{top:1.2rem;right:1.2rem}.lb .p{left:1.2rem;top:50%}.lb .n{right:1.2rem;top:50%}

@media (max-width:1000px){
  .book{grid-template-columns:repeat(2,minmax(0,1fr))}
  .book label{border-bottom:1px solid rgba(26,18,12,.18)}
  .book button{grid-column:1/-1;padding:1rem}
}
@media (max-width:900px){
  .links{display:none;position:fixed;inset:0;background:rgba(13,18,36,.97);flex-direction:column;justify-content:center;gap:1.5rem}
  .links a{font:400 1.8rem var(--display)}
  .nav.open .links{display:flex}
  .nav.open{z-index:80}
  .menu{display:block;position:relative;z-index:2}
  .about,.stay,.cgrid{grid-template-columns:1fr}
  .exp-wrap{grid-template-columns:1fr}
  .exp-panel{display:none}
  .row-img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;margin-bottom:1rem;background:#cdb88f}
  .js .rows.has-active .row:not(.on){opacity:1}
  .proof div{padding-right:1rem;margin-right:1rem}
  .rail{display:none}
  .quotes blockquote{border-right:0;border-bottom:1px solid rgba(26,18,12,.2);margin-right:0;padding-right:0}
  .gsum{grid-template-columns:1fr}
  .gq{grid-template-columns:1fr}
  .gq blockquote,.gq blockquote:nth-child(3n){border-right:0;margin-right:0;padding-right:0}
  form.enq{grid-template-columns:1fr}
  .teaser{grid-template-columns:repeat(2,1fr);grid-auto-rows:44vw}
  .teaser a:nth-child(6){grid-column:auto}
  .about-photos{grid-template-columns:1fr}
  .about-photos figure:nth-child(2){margin-top:0}
  footer{grid-template-columns:1fr}
}
@media (max-width:560px){
  .book{margin-left:1rem;margin-right:1rem}
  .book-note{margin-left:1rem;margin-right:1rem}
  .hero-copy{padding-top:6rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .sandin{opacity:1;filter:none;transform:none;transition:none}
  .swap{animation:none}
}