:root{
  /* tier 1: raw */
  --raw-umber:#2A1A12; --raw-ivory:#F4E7CF; --raw-sand:#EAD6AE; --raw-ochre:#C99F6B;
  --raw-rose:#C3708A; --raw-violet:#4B3F78; --raw-night:#070A1C; --raw-copper:#C2693F;
  /* tier 2: roles */
  --ink-day:var(--raw-umber); --ink-night:var(--raw-ivory);
  --mute-day:rgba(42,26,18,.72); --mute-night:rgba(244,231,207,.74);
  --line-day:rgba(42,26,18,.24); --line-night:rgba(244,231,207,.24);
  --accent:var(--raw-copper); --bg:var(--raw-night);
  --serif:"Cormorant Garamond","Iowan Old Style",Georgia,serif; --sdir:90deg;
  --sc:"Cormorant SC","Cormorant Garamond",Georgia,serif;
  --gut:clamp(20px,4.2vw,64px); --nav:76px; --ease:cubic-bezier(.2,.8,.2,1);
}
@media (max-width:760px){ :root{ --nav:62px } }
*{ box-sizing:border-box; margin:0; padding:0 }
html{ background:var(--bg); font-family:var(--serif); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
html.lenis, html.lenis body{ height:auto } .lenis.lenis-smooth{ scroll-behavior:auto!important } .lenis.lenis-stopped{ overflow:hidden }
body{ background:var(--bg); color:var(--ink-night); overflow-x:hidden; font-size:19px; line-height:1.5 }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent }
ol,ul{ list-style:none }
em{ font-style:italic }
:focus-visible{ outline:1px solid var(--accent); outline-offset:4px }
.tone-day{ --ink:var(--ink-day); --mute:var(--mute-day); --line:var(--line-day) }
.tone-night{ --ink:var(--ink-night); --mute:var(--mute-night); --line:var(--line-night) }
.sc{ font-family:var(--sc); font-weight:600; font-size:12.5px; letter-spacing:.34em; text-transform:uppercase; line-height:1.5 }
.display{ font-weight:300; line-height:.96; letter-spacing:-.012em }
.display em{ font-weight:300 }
.skip{ position:fixed; inset-inline-start:12px; top:-60px; z-index:30; background:var(--raw-ivory); color:var(--raw-umber); padding:10px 16px }
.skip:focus{ top:12px }

/* ---------- the world: fixed stage, camera moves the layers ---------- */
#world{ position:fixed; inset:0; z-index:0; overflow:hidden; background:#EAD6AE; contain:strict }
#world canvas{ position:absolute; left:0; top:0; width:100%; height:100% }
#strata{ position:absolute; inset:0 }
.lyr,.decor{ position:absolute; left:0; top:0; pointer-events:none; will-change:transform }
.decor{ will-change:auto }
.lyr img{ position:absolute; max-width:none; display:block; user-select:none; -webkit-user-drag:none }
.tent{ position:absolute; pointer-events:none }
.tent svg{ width:100%; height:100%; display:block; overflow:visible }
.tent .flap{ transform-origin:100px 120px; animation:breathe 6.5s ease-in-out infinite }
@keyframes breathe{ 0%,100%{ transform:scaleX(1) } 50%{ transform:scaleX(.985) } }
.fire{ position:absolute; width:26px; height:38px; margin:-36px 0 0 -13px; pointer-events:none; opacity:var(--fireA,0) }
.fire svg{ width:100%; height:100%; overflow:visible; animation:flame .55s steps(1) infinite alternate }
.fire::before{ content:""; position:absolute; left:50%; top:60%; width:230px; height:230px; margin:-115px 0 0 -115px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,170,80,.55) 0, rgba(255,120,60,.18) 38%, transparent 68%); animation:glow 2.3s ease-in-out infinite alternate }
@keyframes flame{ from{ transform:scale(1,1) skewX(0) } to{ transform:scale(.92,1.08) skewX(3deg) } }
@keyframes glow{ from{ opacity:.82; transform:scale(.96) } to{ opacity:1; transform:scale(1.04) } }
#dome{ position:absolute; left:60%; top:47%; width:var(--ds,900px); height:var(--ds,900px); margin:calc(var(--ds,900px)/-2) 0 0 calc(var(--ds,900px)/-2);
  opacity:0; visibility:hidden; will-change:transform,opacity; pointer-events:none; transform-origin:50% 50% }
#dome canvas{ border-radius:50% }
#dome svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
#dome .cl{ fill:none; stroke:rgba(244,231,207,.55); stroke-width:1.1; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1 }
#dome .cn{ fill:rgba(244,231,207,.92); stroke:none }
#dome text{ font-family:var(--sc); font-weight:600; font-size:var(--lf,15px); letter-spacing:.32em; fill:rgba(244,231,207,.82); text-transform:uppercase }
#dome .nm{ opacity:0; transition:opacity 1s var(--ease) }
#dome .nm.on{ opacity:1 }

/* ---------- interior: the tent the camera pushes into ---------- */
#interior{ position:fixed; inset:0; z-index:1; overflow:hidden; visibility:hidden; background:#1B1009 }
.i-inner{ position:absolute; inset:0; will-change:transform; transform-origin:50% 50% }
.i-bg{ position:absolute; inset:0; background:radial-gradient(ellipse 80% 70% at 50% 38%, #8A5A30 0, #5A3820 38%, #2D1A0F 72%, #170C06 100%) }
.i-l{ position:absolute; top:0; left:0; height:100%; will-change:transform }
.i-wall{ background:
  repeating-linear-gradient(90deg, transparent 0 168px, rgba(20,8,2,.34) 168px 170px, rgba(255,226,170,.05) 170px 172px),
  repeating-linear-gradient(0deg, rgba(255,226,170,.028) 0 2px, transparent 2px 5px) }
.i-swag{ height:118px; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='118' viewBox='0 0 240 118'><path d='M0 0H240V62Q216 108 120 108Q24 108 0 62Z' fill='%236B4528'/><path d='M0 0H240V62Q216 108 120 108Q24 108 0 62Z' fill='none' stroke='%23C99F6B' stroke-opacity='.5'/><path d='M0 34Q24 72 120 72Q216 72 240 34' fill='none' stroke='%23F4E7CF' stroke-opacity='.18'/></svg>") repeat-x 0 0/240px 118px }
.i-rug{ top:auto; bottom:0; height:15%; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='120' viewBox='0 0 160 120'><rect width='160' height='120' fill='%232B1510'/><path d='M80 8L148 60L80 112L12 60Z' fill='none' stroke='%23C99F6B' stroke-opacity='.45'/><path d='M80 28L124 60L80 92L36 60Z' fill='none' stroke='%23C2693F' stroke-opacity='.6'/><path d='M0 0H160' stroke='%23C99F6B' stroke-opacity='.5'/></svg>") repeat-x 0 0/160px 100% }
.lant{ position:absolute; top:0; width:0; transform-origin:50% 0; animation:sway 7s ease-in-out infinite alternate }
.lant i{ position:absolute; left:0; top:0; width:1px; background:rgba(244,231,207,.35) }
.lant b{ position:absolute; left:-16px; width:32px; height:52px }
.lant b svg{ width:100%; height:100%; overflow:visible }
.lant b::before{ content:""; position:absolute; left:50%; top:55%; width:300px; height:300px; margin:-150px 0 0 -150px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,184,96,.42) 0, rgba(255,150,70,.12) 40%, transparent 70%); animation:flick 3.1s ease-in-out infinite alternate }
@keyframes sway{ from{ transform:rotate(-1.6deg) } to{ transform:rotate(1.6deg) } }
@keyframes flick{ 0%{ opacity:.8 } 40%{ opacity:1 } 70%{ opacity:.88 } 100%{ opacity:.97 } }
.i-pool{ position:absolute; left:0; top:0; width:760px; height:760px; margin:-380px 0 0 -380px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,196,120,.17) 0, transparent 62%); will-change:transform }

/* ---------- finish: grain + vignette ---------- */
#finish{ position:fixed; inset:0; z-index:2; pointer-events:none }
#finish .grain{ position:absolute; inset:0; opacity:.14; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .4  0 0 0 1.1 -.42'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>") }
#finish .vig{ position:absolute; inset:0; background:radial-gradient(ellipse 125% 100% at 50% 46%, transparent 52%, rgba(30,12,10,.34) 100%) }
#fx{ position:fixed; inset:0; width:100%; height:100%; z-index:2; pointer-events:none }

/* ---------- nav: the sundial ---------- */
.nav{ position:fixed; inset-inline:0; top:0; z-index:20; height:var(--nav); padding:0 var(--gut); display:flex; align-items:center; justify-content:space-between; gap:24px;
  color:var(--ink-night); transition:color .6s var(--ease) }
.nav.dark{ color:var(--ink-day) }
.nav .mark{ font-family:var(--sc); font-weight:600; font-size:14px; letter-spacing:.46em; white-space:nowrap }
.sundial{ display:flex; align-items:center; gap:22px; flex:1; max-width:560px; justify-content:center }
.sundial .clock{ font-family:var(--serif); font-weight:400; font-size:22px; font-variant-numeric:lining-nums tabular-nums; min-width:3.1ch; text-align:end; letter-spacing:.02em }
.dial{ position:relative; flex:1; height:36px }
.dial .rail{ position:absolute; inset-inline:0; top:14px; height:1px; background:currentColor; opacity:.34 }
.dial .sun{ position:absolute; top:10px; inset-inline-start:0; width:9px; height:9px; margin-inline-start:-4.5px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(194,105,63,.2) }
.dial .tick{ position:absolute; top:0; height:36px; width:60px; margin-inline-start:-30px; display:flex; flex-direction:column; align-items:center; font-family:var(--sc); font-weight:600; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; opacity:.78; transition:opacity .3s }
.dial .tick::before{ content:""; width:1px; height:9px; background:currentColor; margin-top:10px; opacity:.6 }
.dial .tick span{ margin-top:5px; white-space:nowrap; opacity:.0; transform:translateY(-3px); transition:opacity .3s, transform .3s var(--ease) }
.dial .tick.on, .dial .tick:hover{ opacity:1 } .dial .tick.on span, .dial .tick:hover span{ opacity:1; transform:none }
.navcta{ font-family:var(--sc); font-weight:600; font-size:12.5px; letter-spacing:.34em; text-transform:uppercase; padding:8px 0; border-bottom:1px solid currentColor; white-space:nowrap }
.menu-btn{ display:none; font-family:var(--sc); font-weight:600; font-size:12.5px; letter-spacing:.3em; text-transform:uppercase; padding:10px 0 }
#sheet{ position:fixed; inset:0; z-index:40; background:rgba(7,10,28,.96); color:var(--ink-night); display:flex; flex-direction:column; justify-content:center; padding:0 var(--gut);
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s }
#sheet.on{ opacity:1; visibility:visible }
#sheet a{ display:block; font-weight:300; font-size:44px; line-height:1.25; padding:6px 0 }
#sheet a small{ font-family:var(--sc); font-weight:600; font-size:12px; letter-spacing:.3em; color:var(--accent); margin-inline-end:14px; vertical-align:middle }
#sheet .x{ position:absolute; inset-inline-end:var(--gut); top:20px; font-family:var(--sc); font-weight:600; font-size:12.5px; letter-spacing:.3em; text-transform:uppercase; padding:10px 0 }

/* ---------- sections ---------- */
main{ position:relative; z-index:3 }
.chap{ position:relative }
.pin{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden }
#hero{ height:140vh } #push{ height:250vh }
#push,#suites,#evenings,#night{ margin-top:-100vh; margin-top:-100svh }
#suites{ height:calc(100vh + (var(--n,5) - 1) * 90vh + 50vh) }
#evenings{ height:420vh } #night{ height:380vh }
.btn{ position:relative; display:inline-flex; align-items:center; gap:14px; padding:17px 30px; border:1px solid currentColor; overflow:hidden; isolation:isolate;
  font-family:var(--sc); font-weight:600; font-size:12.5px; letter-spacing:.34em; text-transform:uppercase; transition:color .5s var(--ease) }
.btn::before{ content:""; position:absolute; left:-10%; right:-10%; top:100%; height:240%; border-radius:50%; background:var(--ink); transform:translateY(0); transition:transform .7s var(--ease); z-index:-1 }
.btn:hover::before,.btn:focus-visible::before{ transform:translateY(-64%) }
.btn:hover,.btn:focus-visible{ color:var(--btn-on,var(--bg)) }
.btn:active{ transform:scale(.985) }
.btn .ring{ position:absolute; border-radius:50%; border:1px solid var(--accent); pointer-events:none; width:10px; height:10px; margin:-5px 0 0 -5px; animation:ripple .9s var(--ease) forwards }
@keyframes ripple{ to{ transform:scale(14); opacity:0 } }
.tone-day .btn{ --btn-on:var(--raw-ivory) } .tone-night .btn{ --btn-on:var(--raw-night) }

/* split headings */
.w{ display:inline-block; overflow:hidden; vertical-align:top; padding:0 .04em .14em 0; margin-bottom:-.14em }
.w>span{ display:inline-block; transform:translateY(112%); opacity:0; filter:blur(6px);
  transition:transform 1.4s var(--ease) calc(var(--i)*80ms + var(--d,0ms)), opacity 1s ease calc(var(--i)*80ms + var(--d,0ms)), filter 1.2s ease calc(var(--i)*80ms + var(--d,0ms)) }
.in .w>span,.in.w>span{ transform:none; opacity:1; filter:none }
.rv{ opacity:0; transform:translateY(18px); transition:opacity 1.1s var(--ease) var(--d,0ms), transform 1.2s var(--ease) var(--d,0ms) }
.in .rv,.rv.in{ opacity:1; transform:none }
.sc.rv{ letter-spacing:.6em } .in .sc.rv,.sc.rv.in{ letter-spacing:.34em; transition:opacity 1.1s var(--ease) var(--d,0ms), transform 1.2s var(--ease) var(--d,0ms), letter-spacing 1.6s var(--ease) var(--d,0ms) }

/* hero */
.hero-in{ position:absolute; inset:0; padding:calc(var(--nav) + 7vh) var(--gut) 0; color:var(--ink) }
.hero-in .eyebrow{ color:var(--mute) }
.hero-in h1{ font-size:clamp(46px,8.1vw,136px); margin:2.8vh 0 3.2vh }
.hero-in h1 .it{ color:var(--accent) }
.lede{ font-size:clamp(19px,1.5vw,23px); line-height:1.5; max-width:34ch; color:var(--mute) }
.hero-in .lede{ color:var(--ink) }
.cta-row{ margin-top:4.2vh; display:flex; align-items:center; gap:30px; flex-wrap:wrap }
.cue{ position:absolute; inset-inline-start:var(--gut); bottom:30px; display:flex; align-items:center; gap:16px; color:var(--ink) }
.cue i{ display:block; width:1px; height:44px; background:currentColor; opacity:.5; transform-origin:top; animation:cue 2.6s var(--ease) infinite }
@keyframes cue{ 0%{ transform:scaleY(0) } 55%{ transform:scaleY(1) } 100%{ transform:scaleY(1); opacity:0 } }
.coord{ position:absolute; inset-inline-end:var(--gut); bottom:34px; color:var(--ink); text-align:end }

/* push-in caption */
.cap{ position:absolute; inset-inline-start:var(--gut); top:calc(var(--nav) + 12vh); max-width:520px; color:var(--ink) }
.cap p.line{ font-weight:300; font-style:italic; font-size:clamp(30px,3.4vw,56px); line-height:1.08; margin-top:2vh }
.cap .sc{ color:var(--mute) }

/* suites: the lateral track inside the tent */
.track{ position:absolute; inset-inline-start:0; top:0; height:100%; width:calc(var(--n,5) * 100%); display:flex; will-change:transform }
.panel{ flex:0 0 calc(100% / var(--n,5)); width:calc(100% / var(--n,5)); height:100%; position:relative; padding:calc(var(--nav) + 5vh) var(--gut) 9vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:5vw; align-items:center; color:var(--ink-night); will-change:transform }
.panel .p-text{ max-width:560px }
.panel .kicker{ color:var(--accent); display:flex; gap:14px; align-items:center }
.panel .kicker i{ display:inline-block; width:34px; height:1px; background:currentColor }
.panel h2,.panel h3{ font-size:clamp(46px,6.3vw,108px); margin:2.4vh 0 2.6vh }
.panel p.body{ color:var(--mute-night); max-width:38ch; font-size:clamp(18px,1.35vw,21px) }
.specs{ margin-top:3.6vh; display:grid; grid-template-columns:1fr 1fr; gap:0 34px; max-width:480px }
.specs div{ border-top:1px solid var(--line-night); padding:11px 0 12px; display:flex; justify-content:space-between; align-items:baseline; gap:12px }
.specs dt{ font-family:var(--sc); font-weight:600; font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--mute-night) }
.specs dd{ font-size:22px; font-weight:400; font-variant-numeric:lining-nums tabular-nums }
.arch{ justify-self:center; position:relative; width:min(32vw,calc(min(64vh,600px)*.74)); display:flex; flex-direction:column; align-items:center }
.arch .frame{ position:relative; width:100%; aspect-ratio:.74; border-radius:999px 999px 6px 6px; overflow:hidden; background:radial-gradient(ellipse 90% 70% at 50% 34%, #B77842 0, #7A4A26 46%, #2D1A0F 100%);
  box-shadow:0 0 0 1px rgba(244,231,207,.55), 0 0 0 9px #2D1A0F, 0 0 0 10px rgba(244,231,207,.28), 0 30px 80px rgba(0,0,0,.5) }
.arch .frame img{ position:absolute; top:0; inset-inline-start:-14%; width:128%; height:100%; display:block; will-change:transform; object-fit:cover; object-position:50% 100% }
.arch .frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,8,2,.28) 0, transparent 28%, transparent 74%, rgba(20,8,2,.3) 100%); pointer-events:none }
.arch figcaption{ margin-top:30px; color:var(--mute-night); text-align:center }
.dialsvg{ width:44px; height:44px; flex:none }
.panel.intro{ grid-template-columns:minmax(0,1fr) minmax(0,.5fr) }
.panel.intro h2{ max-width:11ch }
.lat-hint{ margin-top:5vh; display:flex; align-items:center; gap:16px; color:var(--mute-night) }
.lat-hint i{ display:block; width:64px; height:1px; background:currentColor; transform-origin:left; animation:hint 2.6s var(--ease) infinite }
@keyframes hint{ 0%{ transform:scaleX(.1) } 60%{ transform:scaleX(1) } 100%{ transform:scaleX(1); opacity:0 } }
.lat-prog{ position:absolute; inset-inline:var(--gut); bottom:28px; display:flex; gap:18px; align-items:center; z-index:2; color:var(--ink-night) }
.lat-prog span{ font-family:var(--sc); font-weight:600; font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; opacity:.5; transition:opacity .4s; padding-bottom:6px; border-bottom:1px solid transparent }
.lat-prog span.on{ opacity:1; border-color:var(--accent) }

/* evenings */
#evenings .scrim{ position:absolute; inset:0; background:linear-gradient(var(--sdir), rgba(22,12,38,.62) 0, rgba(22,12,38,.34) 38%, transparent 66%); pointer-events:none }
.eve{ position:absolute; inset-inline-start:var(--gut); bottom:7vh; width:min(520px,calc(100% - 2*var(--gut))); color:var(--ink-night); opacity:0; transition:opacity .9s var(--ease) }
.eve.in,.eve-clock.in{ opacity:1 }
.eve h2{ font-size:clamp(38px,4.5vw,76px); margin:1.6vh 0 3vh }
.rituals li{ position:relative; display:grid; grid-template-columns:78px 1fr; gap:0 10px; padding:13px 0 14px; border-top:1px solid var(--line-night); opacity:.42; transition:opacity .7s var(--ease) }
.rituals li:last-child{ border-bottom:1px solid var(--line-night) }
.rituals li.on{ opacity:1 }
.rituals .time{ font-family:var(--serif); font-size:20px; font-variant-numeric:lining-nums tabular-nums; padding-top:3px; color:var(--mute-night) }
.rituals li.on .time{ color:var(--accent) }
.rituals h3{ font-weight:400; font-size:25px; line-height:1.15 }
.rituals p{ grid-column:2; color:var(--mute-night); font-size:17px; line-height:1.4; max-height:0; overflow:hidden; opacity:0; transition:max-height .8s var(--ease), opacity .6s var(--ease), margin .6s }
.rituals li.on p{ max-height:96px; opacity:1; margin-top:6px }
.eve-clock{ position:absolute; inset-inline-end:var(--gut); top:calc(var(--nav) + 6vh); text-align:end; color:var(--ink-night); opacity:0; transition:opacity .9s var(--ease) }
.eve-clock .num{ font-weight:300; font-size:clamp(64px,8vw,132px); line-height:.9; font-variant-numeric:lining-nums tabular-nums; letter-spacing:-.02em }
.eve-clock .sc{ color:var(--mute-night); margin-top:8px }

/* night */
.night-scrim{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(var(--sdir), rgba(7,10,28,.66) 0, rgba(7,10,28,.3) 42%, transparent 66%) }
.night-copy{ position:absolute; inset-inline-start:var(--gut); bottom:9vh; width:min(540px,calc(100% - 2*var(--gut))); color:var(--ink-night) }
.night-copy h2{ font-size:clamp(42px,5.4vw,92px); margin:2vh 0 3vh }
.night-copy .facts{ margin-top:4vh; display:flex; gap:34px; flex-wrap:wrap }
.night-copy .facts div{ border-top:1px solid var(--line-night); padding-top:10px; min-width:96px }
.night-copy .facts b{ display:block; font-weight:300; font-size:36px; line-height:1; font-variant-numeric:lining-nums }
.night-copy .facts span{ color:var(--mute-night) }
.night-aside{ position:absolute; inset-inline-end:var(--gut); bottom:9vh; text-align:end; color:var(--mute-night); max-width:260px }

/* reserve */
#reserve{ position:relative; min-height:100vh; padding:16vh var(--gut) 14vh; background:linear-gradient(180deg, rgba(7,10,28,0) 0, rgba(7,10,28,.74) 24%, rgba(7,10,28,.82) 100%); color:var(--ink-night); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:7vw; align-items:start }
#reserve h2{ font-size:clamp(42px,5.4vw,92px); margin:2vh 0 3vh }
.res-copy .facts{ margin-top:5vh; display:grid; gap:0; max-width:420px }
.res-copy .facts div{ display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line-night); padding:12px 0 }
.res-copy .facts dt{ font-family:var(--sc); font-weight:600; font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--mute-night); padding-top:4px }
.res-copy .facts dd{ font-size:20px; text-align:end }
form.book{ background:rgba(8,10,30,.7); border:1px solid var(--line-night); padding:clamp(22px,3vw,44px); display:grid; gap:24px }
.fld{ display:grid; gap:6px; position:relative }
.fld label,.fld legend{ font-family:var(--sc); font-weight:600; font-size:11.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--mute-night) }
.fld input,.fld select{ font:inherit; font-size:20px; color:var(--ink-night); background:transparent; border:0; border-bottom:1px solid var(--line-night); padding:8px 0 9px; border-radius:0; width:100%; color-scheme:dark; transition:border-color .3s }
.fld select option{ color:#111; background:#F4E7CF }
.fld input:focus,.fld select:focus{ outline:none; border-color:var(--accent) }
.fld .err{ color:#E9A58A; font-size:15px; min-height:0; max-height:0; overflow:hidden; transition:max-height .3s }
.fld.bad .err{ max-height:40px } .fld.bad input,.fld.bad select{ border-color:#E9A58A }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:24px }
fieldset.fld{ border:0; padding:0; min-width:0 }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px }
.chips label{ position:relative; cursor:pointer; font-family:var(--serif); text-transform:none; letter-spacing:0; font-size:19px; color:var(--ink-night); font-weight:400 }
.chips input{ position:absolute; opacity:0; inset:0; width:100%; height:100% }
.chips span{ display:block; padding:9px 16px; border:1px solid var(--line-night); transition:background .4s var(--ease), color .4s var(--ease), border-color .4s }
.chips input:checked+span{ background:var(--raw-ivory); color:var(--raw-night); border-color:var(--raw-ivory) }
.chips input:focus-visible+span{ outline:1px solid var(--accent); outline-offset:3px }
.est{ display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--line-night); padding-top:16px }
.est output{ font-size:32px; font-weight:300; font-variant-numeric:lining-nums tabular-nums }
.est small{ color:var(--mute-night); font-size:16px }
.form-note{ color:var(--mute-night); font-size:16px; min-height:1.5em }
form.book .btn{ justify-self:start; --btn-on:var(--raw-night); color:var(--ink-night) }
form.book .btn[disabled]{ opacity:.5; pointer-events:none }

/* footer */
footer{ position:relative; padding:14vh var(--gut) 150px; color:var(--ink-night); background:linear-gradient(180deg, rgba(7,10,28,0) 0, rgba(7,10,28,.88) 18%, #070A1C 42%) ; overflow:hidden }
footer .big{ font-weight:300; font-size:clamp(70px,16vw,260px); line-height:.82; letter-spacing:-.02em; color:rgba(244,231,207,.06); margin-bottom:5vh; white-space:nowrap }
.f-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1.3fr; gap:5vw; align-items:start }
.f-grid h4{ font-family:var(--sc); font-weight:600; font-size:11.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); margin-bottom:16px }
.f-grid li,.f-grid p{ color:var(--mute-night); font-size:18px; line-height:1.55 }
.f-grid a:hover{ color:var(--ink-night) }
details{ border-top:1px solid var(--line-night); padding:11px 0 }
details:last-child{ border-bottom:1px solid var(--line-night) }
summary{ cursor:pointer; list-style:none; font-size:19px; display:flex; justify-content:space-between; gap:14px; color:var(--ink-night) }
summary::-webkit-details-marker{ display:none }
summary::after{ content:"+"; color:var(--accent); font-family:var(--sc); transition:transform .4s var(--ease) }
details[open] summary::after{ transform:rotate(45deg) }
details p{ padding-top:8px; font-size:17px }
.f-base{ margin-top:9vh; padding-top:22px; border-top:1px solid var(--line-night); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; color:var(--mute-night) }
.f-base a{ text-decoration:underline; text-underline-offset:4px; margin-inline-start:18px }
.f-dunes{ position:absolute; inset-inline-start:0; bottom:0; width:100%; height:130px; object-fit:cover; object-position:50% 100%; pointer-events:none }
dialog{ margin:auto; max-width:560px; width:calc(100% - 40px); background:#0B0E26; color:var(--ink-night); border:1px solid var(--line-night); padding:34px }
dialog::backdrop{ background:rgba(4,5,16,.72) }
dialog h3{ font-weight:300; font-size:34px; margin-bottom:12px }
dialog p{ color:var(--mute-night); font-size:18px; margin-bottom:14px }
dialog button{ font-family:var(--sc); font-weight:600; font-size:12px; letter-spacing:.3em; text-transform:uppercase; border-bottom:1px solid currentColor; padding:6px 0 }
#banner{ position:fixed; left:12px; bottom:12px; z-index:50; background:#2A1A12; color:#F4E7CF; font:14px/1.4 system-ui,sans-serif; padding:10px 14px; display:none; max-width:360px }

/* phone: a designed variant */
@media (max-width:760px){
  body{ font-size:18px }
  .sundial .dial{ display:none } .sundial{ justify-content:flex-start; flex:none } .navcta{ display:none } .menu-btn{ display:block }
  .nav .mark{ letter-spacing:.34em; font-size:13px }
  .sundial{ margin-left:auto; margin-right:6px } .sundial .clock{ font-size:20px }
  .hero-in{ padding-top:calc(var(--nav) + 6vh) }
  .hero-in h1{ font-size:clamp(44px,12.4vw,72px) }
  .cta-row{ gap:18px } .coord{ display:none }
  .cap{ right:var(--gut); top:calc(var(--nav) + 9vh) }
  .panel{ grid-template-columns:1fr; grid-template-rows:auto auto; align-content:start; gap:22px; padding-top:calc(var(--nav) + 3vh); padding-bottom:70px }
  .panel .arch{ order:-1; width:min(48vw,calc(33vh*.74)) }
  .arch figcaption{ margin-top:18px; font-size:11px }
  .panel h2,.panel h3{ font-size:clamp(42px,12.6vw,60px); margin:1vh 0 1.4vh }
  .panel p.body{ font-size:18px }
  .specs{ margin-top:2vh; gap:0 18px } .specs dd{ font-size:20px } .specs dt{ font-size:11px; letter-spacing:.2em }
  .panel.intro{ grid-template-columns:1fr } .panel.intro .arch{ display:none }
  .lat-prog{ gap:12px; bottom:22px } .lat-prog span{ font-size:10.5px; letter-spacing:.18em }
  .night-scrim{ background:linear-gradient(0deg, rgba(7,10,28,.88) 0, rgba(7,10,28,.62) 46%, transparent 74%) }
  #evenings .scrim{ background:linear-gradient(0deg, rgba(22,12,38,.8) 0, rgba(22,12,38,.55) 52%, transparent 78%) }
  .eve{ bottom:4vh } .eve h2{ margin:1vh 0 1.8vh; font-size:36px } .rituals li{ grid-template-columns:62px 1fr; padding:9px 0 10px } .rituals h3{ font-size:22px } .rituals p{ font-size:16px }
  .rituals li.on p{ max-height:80px }
  .eve-clock{ top:calc(var(--nav) + 4vh) } .eve-clock .num{ font-size:60px }
  .night-copy{ bottom:6vh } .night-copy h2{ font-size:42px } .night-copy .facts{ gap:22px } .night-aside{ display:none }
  #reserve{ grid-template-columns:1fr; padding-top:12vh; gap:40px }
  .row2{ grid-template-columns:1fr; gap:24px }
  .f-grid{ grid-template-columns:1fr; gap:34px }
  footer .big{ font-size:21vw }
}
@media (max-width:760px) and (max-height:700px){ .rituals p{ display:none } }

/* reduced motion: cuts, not moves; all content stays complete */
@media (prefers-reduced-motion:reduce){
  .chap{ height:auto!important; margin-top:0!important }
  .pin{ position:relative; height:auto; min-height:100svh; overflow:visible }
  .hero-in,.cap,.eve,.night-copy,.eve-clock,.night-aside{ position:relative; inset:auto; left:auto; right:auto; top:auto; bottom:auto; padding-top:calc(var(--nav) + 8vh); padding-bottom:10vh; width:auto; max-width:none }
  .eve-clock,.night-aside{ display:none }
  .track{ position:relative; display:block; height:auto; width:100%; transform:none!important }
  .panel{ width:100%; height:auto; min-height:100svh; transform:none!important }
  .lat-prog{ display:none }
  .w>span,.rv{ transition:none!important; opacity:1!important; transform:none!important; filter:none!important }
  .tent .flap,.fire svg,.fire::before,.lant,.lant b::before,.cue i,.lat-hint i{ animation:none!important }
  .rituals li{ opacity:1 } .rituals p{ max-height:none; opacity:1; margin-top:6px }
  #dome .cl{ stroke-dashoffset:0!important } #dome .nm{ opacity:1 }
}

/* ---------- additions for Conquest of the East ---------- */
.navr{ display:flex; align-items:center; gap:22px }
.langlink{ font-family:var(--sc); font-weight:600; font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; padding:8px 14px; border:1px solid currentColor; border-radius:999px; white-space:nowrap }
.langlink:hover{ background:var(--ink); color:var(--bg) }
.f-base a{ color:var(--mute-night) }
.f-grid a{ display:inline-block; padding:4px 0 }
.noscript{ position:relative; z-index:5; max-width:640px; margin:0 auto; padding:120px 24px; color:var(--ink-day) }
.noscript h1{ font-weight:300; font-size:44px; margin-bottom:12px }
.noscript a{ text-decoration:underline }

/* ---------- right-to-left: Arabic type, the mirrored world, mirrored scrims ---------- */
html[dir="rtl"]{ --serif:"Amiri","IBM Plex Sans Arabic",Georgia,serif; --sc:"IBM Plex Sans Arabic",system-ui,sans-serif; --sdir:270deg }
html[dir="rtl"] body{ font-size:21px; line-height:1.75 }
html[dir="rtl"] .sc{ letter-spacing:0; text-transform:none; font-size:14px; font-weight:600; line-height:1.6 }
html[dir="rtl"] .sc.rv, html[dir="rtl"] .in .sc.rv, html[dir="rtl"] .sc.rv.in{ letter-spacing:0 }
html[dir="rtl"] .display{ font-weight:400; line-height:1.28; letter-spacing:0 }
html[dir="rtl"] .display em{ font-weight:400 }
html[dir="rtl"] .hero-in h1{ line-height:1.22 }
html[dir="rtl"] .nav .mark{ letter-spacing:0; font-size:20px; font-weight:600 }
html[dir="rtl"] .navcta, html[dir="rtl"] .menu-btn, html[dir="rtl"] .btn, html[dir="rtl"] .langlink, html[dir="rtl"] #sheet .x, html[dir="rtl"] #sheet a small, html[dir="rtl"] .f-grid h4,
html[dir="rtl"] .specs dt, html[dir="rtl"] .fld label, html[dir="rtl"] .fld legend, html[dir="rtl"] .res-copy .facts dt, html[dir="rtl"] .lat-prog span, html[dir="rtl"] .dial .tick{ letter-spacing:0; font-size:14px; text-transform:none }
html[dir="rtl"] .navcta, html[dir="rtl"] .btn{ font-size:15px }
html[dir="rtl"] .dial .tick{ font-size:12px }
html[dir="rtl"] .langlink{ font-family:var(--serif); font-size:15px }
html[dir="rtl"] footer .big{ letter-spacing:0; line-height:1.1 }
html[dir="rtl"] #dome text{ letter-spacing:0; transform:scaleX(-1); transform-box:fill-box; transform-origin:center }
html[dir="rtl"] .rituals h3{ font-size:27px }
html[dir="rtl"] .track{ inset-inline-start:auto; right:0; left:auto }
html[dir="rtl"] #world, html[dir="rtl"] #interior, html[dir="rtl"] #fx{ transform:scaleX(-1) }
html[dir="rtl"] .lat-hint i, html[dir="rtl"] .cue i{ transform-origin:top right }
@media (max-width:760px){ .navr .langlink{ padding:6px 10px } html[dir="rtl"] body{ font-size:20px } }
@media (prefers-reduced-motion:reduce){ html[dir="rtl"] #world, html[dir="rtl"] #interior, html[dir="rtl"] #fx{ transform:scaleX(-1) } }