/* ═══════════════════════════════════════════════════════════════════════════
   Ein Gedi · homepage sketch
   Reference lock (Refero): INVERSA "wilderness at dusk" is the primary: the image
   is the page, headlines sit low and quiet, the nav floats, surfaces are flat and
   sharp, and ONE vivid colour exists only for the booking action. Borrowed, and only
   these: San Rita's monospace field notes (time, coordinates, facts) and Exo Ape's
   monumental numerals (the time stamp that opens each chapter).
   Here the vivid colour is the oasis: the only saturated thing in a desert palette.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Anomalia";src:url(../fonts/anomalia-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Anomalia";src:url(../fonts/anomalia-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Discovery";src:url(../fonts/Discovery_Fs-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Discovery";src:url(../fonts/Discovery_Fs-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Discovery";src:url(../fonts/Discovery_Fs-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0021-007E,U+00B0,U+00B7,U+2010-2014,U+2032-2033,U+2190-21FF}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-500.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0021-007E,U+00B0,U+00B7,U+2010-2014,U+2032-2033,U+2190-21FF}

:root{
  /* canvas + ink (INVERSA roles) */
  --ink:#12140F;            /* deep forest: dark surfaces, text on light */
  --paper:#F4F2EA;          /* creme paper: text on dark, light surfaces */
  --oasis:#DCF56C;          /* the ONLY saturated colour: booking actions and focus, plus the few live marks
                               (the sun on the dial, the menu's clock, the baobab's growth line). Never a surface. */
  /* type */
  --f-disp:"Anomalia","Discovery",system-ui,sans-serif;
  --f-body:"Discovery",system-ui,sans-serif;
  --f-mono:"JetBrains Mono","Discovery",ui-monospace,monospace;
  --t-display:clamp(46px,7.4vw,118px);
  --t-h2:clamp(38px,5vw,76px);
  --t-h3:clamp(26px,2.4vw,36px);
  --t-stamp:clamp(84px,13vw,208px);
  --t-lead:clamp(19px,1.55vw,23px);
  --t-body:clamp(17px,1.2vw,19px);
  --t-mono:13px;
  /* shape + rhythm */
  --r-btn:3.6px;            /* INVERSA: radius on buttons only, everything else is sharp */
  --gut:clamp(20px,4vw,72px);
  --max:1560px;
  --text:34em;
  --barH:64px;
  /* sky, rewritten every frame by app.js; these are the pre-dawn values */
  --sky-a:#0B1026; --sky-b:#2B2D4F; --sky-c:#7A4E3F; --night:1;
}
@media (max-width:899px){:root{--barH:56px;--t-mono:12px}}

[data-tone="dark"]{--fg:var(--paper);--fg2:rgba(244,242,234,.78);--rule:rgba(244,242,234,.2)}
[data-tone="light"]{--fg:var(--ink);--fg2:rgba(18,20,15,.74);--rule:rgba(18,20,15,.16)}

*,*::before,*::after{box-sizing:border-box}
html{background:#0B1026;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--barH) + 8px)}
body{margin:0;font-family:var(--f-body);font-size:var(--t-body);line-height:1.6;color:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
img{height:auto}
figure{margin:0}
a{color:inherit}
h1,h2,h3,p,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block;font:inherit}
.mono{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.01em;line-height:1.45;font-weight:400;
  font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--oasis);outline-offset:3px}
[data-tone="light"] :focus-visible,[data-tone="light"]:focus-visible{outline-color:var(--ink)}
.skip{position:fixed;inset-inline-start:12px;top:-60px;z-index:100;background:var(--oasis);color:var(--ink);
  padding:10px 16px;border-radius:var(--r-btn);font-weight:500;text-decoration:none}
.skip:focus{top:12px}

/* ── the sky: one fixed layer whose colour is the time of day ── */
.sky{position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--sky-a) 0%,var(--sky-b) 58%,var(--sky-c) 100%)}
.stars{position:absolute;inset:0;width:100%;height:100%;opacity:var(--night);transition:opacity .2s linear}

/* ── layout ── */
main>section{position:relative;color:var(--fg)}
main [data-tone]{color:var(--fg)}
.wrap{width:min(100% - 2*var(--gut),var(--max));margin-inline:auto}

/* ── type ── */
.display{font-family:var(--f-disp);font-weight:400;font-size:var(--t-display);line-height:.95;letter-spacing:-.012em;
  text-wrap:balance}
.display>span{display:block}
.h2{font-family:var(--f-disp);font-weight:400;font-size:var(--t-h2);line-height:1;letter-spacing:-.01em;text-wrap:balance}
.h3{font-family:var(--f-disp);font-weight:400;font-size:var(--t-h3);line-height:1.1}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--fg2);max-width:32em;text-wrap:pretty}
.body{font-size:var(--t-body);line-height:1.72;color:var(--fg2);max-width:var(--text);text-wrap:pretty}
.body+.body{margin-top:1em}
.kicker{color:var(--fg2);display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.aside{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);font-size:16px;line-height:1.65;color:var(--fg2);max-width:var(--text)}

/* the monumental time stamp that opens each chapter (Exo Ape scale) */
.stamp{display:flex;align-items:flex-end;gap:18px;margin-bottom:clamp(28px,4vw,56px)}
.stamp__t{font-family:var(--f-disp);font-weight:400;font-size:var(--t-stamp);line-height:.8;letter-spacing:-.03em;
  direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;color:var(--fg)}
.stamp__l{color:var(--fg);padding-bottom:.55em;border-bottom:1px solid var(--rule)}

/* ── buttons: the oasis colour is the booking action and nothing else ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;
  border-radius:var(--r-btn);font:500 16px/1 var(--f-body);text-decoration:none;cursor:pointer;border:0;
  transition:transform .15s ease,background-color .15s ease,color .15s ease}
.btn:active{transform:translateY(1px)}
.btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.btn--oasis{background:var(--oasis);color:var(--ink)}
.btn--oasis:hover{background:#E8FA8E}
[data-tone="light"] .btn--oasis{background:var(--ink);color:var(--oasis)}
[data-tone="light"] .btn--oasis:hover{background:#252a20}
.btn--ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--rule)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.btn--sm{min-height:40px;padding:0 16px;font-size:15px}
.more{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font-size:16px;font-weight:500;color:var(--fg);
  text-decoration:none;padding-bottom:4px;border-bottom:1px solid var(--rule);transition:border-color .15s}
.more::after{content:"←";font-family:var(--f-mono);transition:transform .2s}
.more:hover{border-color:var(--fg)}
.more:hover::after{transform:translateX(-4px)}

/* ── the bar ── */
.bar{position:fixed;inset:0 0 auto;z-index:40;height:var(--barH);display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;padding-inline:var(--gut);color:var(--fg);transition:background-color .3s ease,backdrop-filter .3s}
.bar.is-solid{background:color-mix(in srgb,var(--sky-a) 78%,transparent);backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2)}
.bar__logo{justify-self:start;display:block;line-height:0}
.bar__logo img{height:38px;width:auto}
.bar[data-tone="dark"] .bar__logo img,.foot__logo{filter:brightness(0) invert(1)}
.bar__clock{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:13px;color:var(--fg)}
.bar__time{font-variant-numeric:tabular-nums;direction:ltr;min-width:5ch;text-align:center}
.bar__label{color:var(--fg2);font-family:var(--f-body);font-size:13px;min-width:7em}
.dial{overflow:visible}
.dial__arc{fill:none;stroke:currentColor;stroke-width:1;opacity:.45;stroke-dasharray:2 3}
.dial__hz{stroke:currentColor;stroke-width:1;opacity:.45}
.dial__sun{fill:var(--oasis);stroke:var(--ink);stroke-width:.8}
.bar__act{justify-self:end;display:flex;align-items:center;gap:8px}
.bar__menu{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;color:inherit;cursor:pointer;
  border-radius:var(--r-btn)}
.bar__menu svg{fill:none;stroke:currentColor;stroke-width:1.6}
.bar__menu .i-x,.bar__menu[aria-expanded="true"] .i-menu{display:none}
.bar__menu[aria-expanded="true"] .i-x{display:block}
@media (max-width:899px){
  .bar__label{display:none}
  .bar__logo img{height:32px}
  .bar__clock{gap:6px;font-size:12px}
  .bar .btn--sm{min-height:36px;padding:0 12px;font-size:14px}
}
@media (max-width:899px){.bar{grid-template-columns:auto 1fr auto;column-gap:10px}.bar__clock{justify-self:center}}
@media (max-width:400px){.bar__clock .dial{display:none}.bar__act{gap:4px}.bar .btn--sm{padding:0 10px}}

/* ── menu: the day as a table of contents ── */
.menu{position:fixed;inset:0;z-index:35;background:var(--ink);color:var(--paper);overflow:auto;
  padding:calc(var(--barH) + 32px) var(--gut) 48px}
.menu[hidden]{display:none}
.menu__in{width:min(100%,var(--max));margin-inline:auto;display:grid;gap:48px}
@media (min-width:900px){.menu__in{grid-template-columns:1.3fr 1fr;gap:96px;align-items:start}}
.menu__k{color:rgba(244,242,234,.62);margin-bottom:18px}
.menu__timeline li{border-top:1px solid rgba(244,242,234,.16)}
.menu__timeline a{display:flex;align-items:baseline;gap:18px;padding:14px 0;text-decoration:none;
  font-family:var(--f-disp);font-size:clamp(24px,2.6vw,34px);line-height:1.1}
.menu__timeline .mono{min-width:5ch;color:var(--oasis);direction:ltr;text-align:start}
.menu__timeline a:hover{color:var(--oasis)}
.menu__site li a{display:block;padding:8px 0;font-size:19px;text-decoration:none;color:rgba(244,242,234,.86)}
.menu__site li a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:4px}
.menu__lang{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px;color:rgba(244,242,234,.62)}
.menu__lang a{text-decoration:none}

/* ── horizon reveal: every picture opens like the horizon at first light ── */
/* never hides content: at most 14% trimmed top and bottom, so most of the picture is there the moment it enters */
.hz{--p:1;clip-path:inset(calc((1 - var(--p))*14%) 0 calc((1 - var(--p))*14%) 0);will-change:clip-path}
.hz img,.hz video{transform:scale(calc(1.06 - var(--p)*.06));transform-origin:50% 50%}

/* ═════════ HERO ═════════ */
.hero{height:100svh;min-height:600px;display:flex;flex-direction:column;justify-content:flex-end;color:var(--paper);
  overflow:hidden;background:#0B1026}
.hero__media{position:absolute;inset:0}
.hero__media img,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__video{opacity:0;transition:opacity .9s ease}
.hero__video.is-on{opacity:1}
.hero__scrim{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(9,11,24,.5) 0%,rgba(9,11,24,0) 20%,rgba(9,11,24,0) 42%,rgba(9,11,24,.78) 100%)}
.hero__in{position:relative;z-index:3;width:min(100% - 2*var(--gut),var(--max));margin-inline:auto;
  padding-bottom:clamp(40px,9vh,104px)}
.hero .display{margin-top:22px;max-width:12em}
@media (prefers-reduced-motion:no-preference){
  .hero .display>span{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
  .hero .display>span:nth-child(2){animation-delay:.14s}
  .hero .kicker,.hero .lead,.hero__cta,.live{animation:fade 1.2s .45s ease both}
}
@keyframes rise{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.hero .lead{margin-top:22px;color:rgba(244,242,234,.86)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.live{position:absolute;z-index:3;inset-inline-end:var(--gut);bottom:clamp(40px,9vh,104px);display:grid;gap:14px;
  color:var(--paper)}
.live>div{display:grid;gap:2px;padding-top:10px;border-top:1px solid rgba(244,242,234,.24);min-width:15ch}
.live dt{color:rgba(244,242,234,.66)}
.live dd{font-size:15px}
@media (max-width:899px){
  .hero{min-height:560px}
  .hero .display{margin-top:16px}
  .hero .lead{font-size:17px;margin-top:16px}
  .hero__cta{margin-top:24px}
  .hero__cta .btn{min-height:48px;padding:0 18px}
  .hero__in{padding-bottom:22px}
  .live{position:relative;inset:auto;width:min(100% - 2*var(--gut),var(--max));margin:0 auto 26px;
    grid-template-columns:1fr 1fr;gap:16px}
  .live .live__geo{display:none}
}

/* ═════════ INTRO ═════════ */
.intro{padding-block:clamp(120px,22vh,220px) clamp(80px,14vh,160px);text-align:center}
.intro .h2{font-size:clamp(44px,6vw,92px)}
.intro .lead{margin:22px auto 0;color:var(--fg)}

/* ═════════ CHAPTERS ═════════ */
.ch{padding-top:clamp(96px,14vh,176px)}
.ch:last-of-type{padding-bottom:clamp(96px,14vh,176px)}
.split{display:grid;gap:clamp(32px,5vw,80px);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .split--rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .split--rev .split__text{order:2}
}
.split__text .h2{margin-bottom:24px}
.h2--wide{margin-bottom:clamp(28px,4vw,56px)}
@media (max-width:899px){.h2--wide>span{display:block}}
.split__media{overflow:hidden}
.split__media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.split__media img.sq{aspect-ratio:1/1}
.split__media img.port{aspect-ratio:4/5}
.split__media figcaption,.strip figcaption{margin-top:12px;color:var(--fg2)}

.facts{display:grid;gap:0;margin-top:30px;max-width:var(--text)}
.facts>div{display:grid;grid-template-columns:minmax(9ch,auto) 1fr;gap:18px;padding:12px 0;border-top:1px solid var(--rule)}
.facts>div:last-child{border-bottom:1px solid var(--rule)}
.facts dt{color:var(--fg2)}
.facts dd{font-family:var(--f-body);font-size:16px;line-height:1.45;color:var(--fg)}
.facts--grid{max-width:none;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));column-gap:32px}
.facts--grid>div:last-child{border-bottom:0}
.facts--grid>div{border-bottom:0}

/* full-bleed moving picture */
.bleed{position:relative;margin-top:clamp(64px,10vh,120px);height:min(100svh,62vw);min-height:520px;overflow:hidden;
  background:#1b1d18}
.bleed img,.bleed video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.bleed video{opacity:0;transition:opacity .8s ease}
.bleed video.is-on{opacity:1}
.bleed__cap{position:absolute;z-index:2;inset-inline-start:var(--gut);bottom:18px;color:var(--paper);
  text-shadow:0 1px 12px rgba(0,0,0,.5)}
.bleed__ctl{position:absolute;z-index:3;inset-inline-end:var(--gut);bottom:14px;width:44px;height:44px;display:grid;place-items:center;
  border:0;border-radius:50%;background:rgba(18,20,15,.55);color:var(--paper);cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.bleed__ctl svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.bleed__ctl .i-play{fill:currentColor;display:none}
.bleed__ctl[aria-pressed="true"] .i-pause{display:none}
.bleed__ctl[aria-pressed="true"] .i-play{display:block}
.bleed__ctl[hidden]{display:none}
.bleed::after{content:"";position:absolute;inset:auto 0 0;height:30%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(9,11,14,.42))}
@media (max-width:899px){.bleed{height:78svh;min-height:460px}}

/* nahal: a wide real panorama under the text */
.cols{display:grid;gap:clamp(24px,5vw,80px)}
@media (min-width:900px){.cols{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}}
.cols .h2{margin-bottom:24px}
.cols .facts{margin-top:0}
.strip{margin-top:clamp(40px,6vw,72px);overflow:hidden}
.strip img{width:100%;aspect-ratio:1600/417;object-fit:cover}
@media (max-width:899px){.strip img{aspect-ratio:16/9}}

/* ── rooms: a ruled list, not cards; a picture follows the pointer ── */
.rooms{position:relative;margin-top:clamp(80px,12vh,140px)}
.rooms .h3{margin-bottom:22px}
.rooms__list li{border-top:1px solid var(--rule)}
.rooms__list li:last-child{border-bottom:1px solid var(--rule)}
.room{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:22px 0;text-decoration:none;position:relative}
.room__name{font-family:var(--f-disp);font-size:clamp(26px,2.6vw,38px);line-height:1.05;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.room__line{color:var(--fg2);font-size:16px;line-height:1.5}
.room__meta{color:var(--fg2)}
.room__thumb{display:none}
.room::after{content:"←";position:absolute;inset-inline-end:0;top:50%;translate:0 -50%;font-family:var(--f-mono);
  font-size:18px;opacity:.5;transition:transform .25s,opacity .25s}
.room:hover::after,.room:focus-visible::after{opacity:1;transform:translateX(-6px)}
.room:hover .room__name,.room:focus-visible .room__name{transform:translateX(-14px)}
@media (min-width:900px){
  .room{grid-template-columns:minmax(0,1.15fr) minmax(0,1.3fr) minmax(0,.8fr) 40px;align-items:baseline;gap:32px;padding:26px 0}
}
.rooms__peek{position:fixed;z-index:30;top:-400px;left:-400px;width:300px;aspect-ratio:4/3;pointer-events:none;overflow:hidden;
  opacity:0;transform:translate(-50%,-50%) scale(.92);transition:opacity .2s ease,transform .25s ease}
.rooms__peek.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.rooms__peek img{width:100%;height:100%;object-fit:cover}
@media (max-width:899px),(hover:none){
  .rooms__peek{display:none}
  .room{grid-template-columns:96px minmax(0,1fr);column-gap:16px;align-items:start;padding:18px 0}
  .room__thumb{display:block;grid-row:1 / span 3;width:96px;aspect-ratio:4/3;object-fit:cover}
  .room::after{display:none}
  .room__name{font-size:24px}
  .room__line{font-size:15px}
}

/* ── garden: the herbarium strip ── */
.ch--garden .display{margin-bottom:clamp(40px,6vw,72px);max-width:11em}
.herb{position:relative;margin-top:clamp(72px,11vh,130px)}
.herb__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:26px}
.herb__hint{color:var(--fg2)}
.herb__track{display:flex;gap:clamp(20px,2.4vw,40px);padding-inline:var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gut);scrollbar-width:none;padding-bottom:8px}
.herb__track::-webkit-scrollbar{display:none}
@media (hover:hover){.herb__track{scrollbar-width:thin}.herb__track::-webkit-scrollbar{display:block;height:6px}
  .herb__track::-webkit-scrollbar-thumb{background:var(--rule)}.herb__hint{display:none}}
.sheet{flex:0 0 clamp(236px,21vw,320px);scroll-snap-align:start}
.sheet img{width:100%;aspect-ratio:640/877;object-fit:cover;box-shadow:0 18px 40px -26px rgba(40,34,20,.55)}
.sheet__he{font-family:var(--f-disp);font-size:26px;line-height:1.1;margin-top:16px}
.sheet__la{color:var(--fg2);font-style:italic;margin-top:2px;text-align:right}
.sheet__t{font-size:15.5px;line-height:1.55;color:var(--fg2);margin-top:8px}
/* desktop: the section pins and the specimens travel past, driven by scroll */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .herb.is-pinned .herb__sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:safe center;
    padding-top:var(--barH);overflow:hidden}
  .herb.is-pinned .sheet img{max-height:calc(100svh - var(--barH) - 240px);width:auto;max-width:100%;margin-inline:auto}
  .herb.is-pinned .herb__track{overflow:visible;scroll-snap-type:none;will-change:transform}
  .herb.is-pinned .herb__hint{display:none}
}

/* ── spa: three real photographs around the text ── */
.spa{display:grid;gap:clamp(20px,2.4vw,32px)}
@media (min-width:900px){
  .spa{grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr) minmax(0,.8fr);grid-template-rows:auto auto;align-items:start}
  .spa__text{grid-column:1;grid-row:1 / span 2;padding-inline-end:clamp(0px,2vw,32px)}
  .spa__a{grid-column:2;grid-row:1 / span 2}
  .spa__b{grid-column:3;grid-row:1}
  .spa__c{grid-column:3;grid-row:2}
}
.spa .h2{margin-bottom:24px}
.spa figure{overflow:hidden}
.spa__a img{aspect-ratio:3/4;width:100%;object-fit:cover}
.spa__b img{aspect-ratio:1/1;width:100%;object-fit:cover}
.spa__c img{aspect-ratio:4/5;width:100%;object-fit:cover;object-position:50% 30%}
@media (max-width:899px){
  .spa{grid-template-columns:1fr 1fr}
  .spa__text{grid-column:1 / -1}
  .spa__a{grid-column:1 / -1}
}

/* ── baobar ── */
.plates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);margin-top:clamp(40px,6vw,72px)}
.plates li{overflow:hidden}
.plates img{width:100%;aspect-ratio:3/4;object-fit:cover}
@media (max-width:899px){.plates{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}

/* ── night ── */
.night{display:grid;gap:28px;align-items:center}
@media (min-width:900px){.night{grid-template-columns:auto minmax(0,1fr);gap:48px}}
.night .h2{margin-bottom:20px}
.moon{filter:drop-shadow(0 0 22px rgba(244,242,234,.28))}
.moon__dark{fill:rgba(244,242,234,.07);stroke:rgba(244,242,234,.3);stroke-width:1}
.moon__lit{fill:#F1EEDF}

/* ── story ── */
.ch--story{padding-bottom:clamp(96px,14vh,176px)}
.story{display:grid;gap:clamp(40px,6vw,96px);align-items:center}
@media (min-width:900px){.story{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}}
.story .display{margin:22px 0 30px;font-size:clamp(44px,6.4vw,104px)}
.grow{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:stretch}
.grow img{width:100%;aspect-ratio:640/877;object-fit:cover;opacity:.94}
.grow__rule{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  padding-inline-start:12px;border-inline-start:1px solid var(--rule)}
.grow__fill{position:absolute;inset-inline-start:-1px;bottom:0;width:2px;height:calc(var(--grow,1)*100%);background:var(--oasis)}
.grow__top,.grow__bot{white-space:nowrap;color:var(--fg2)}

/* ═════════ BOOK: the next dawn ═════════ */
.book{padding-block:clamp(110px,16vh,190px) clamp(80px,12vh,140px)}
.book .display{margin-bottom:clamp(36px,5vw,60px);max-width:12em}
.bk{display:grid;gap:18px;align-items:end;max-width:980px}
@media (min-width:900px){.bk{grid-template-columns:1.4fr .8fr .8fr auto;gap:28px}}
.bk__f{display:grid;gap:8px}
.bk__f .mono{color:var(--fg2)}
.bk__f input,.bk__f select{appearance:none;-webkit-appearance:none;width:100%;min-height:48px;background:transparent;border:0;
  border-bottom:1px solid var(--fg);border-radius:0;color:var(--fg);font:400 20px/1.2 var(--f-body);padding:6px 0;
  color-scheme:dark}
.bk__f select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:left 6px center,left 12px center;background-size:6px 6px;background-repeat:no-repeat;padding-left:26px}
.bk__f select option{color:var(--ink);background:var(--paper)}
.bk__go{min-height:52px}
.bk__f input::-webkit-date-and-time-value{text-align:start}
.bk__note{margin-top:22px;color:var(--fg2);font-size:16px;line-height:1.6;max-width:44em}
.bk__note a{color:var(--fg);text-underline-offset:3px}
.book .facts{margin-top:clamp(56px,8vw,96px)}
@media (max-width:899px){.bk{grid-template-columns:1fr 1fr}label.bk__f:first-of-type,.bk__go{grid-column:1 / -1}}

/* ── footer ── */
.foot{color:var(--paper);background:#0B1026;padding:48px 0 56px;border-top:1px solid rgba(244,242,234,.14)}
.foot__in{display:grid;gap:24px;align-items:start}
@media (min-width:900px){.foot__in{grid-template-columns:auto 1fr 1.4fr;gap:48px}}
.foot__logo{height:40px;width:auto}
.foot__addr{font-style:normal;color:rgba(244,242,234,.8);font-size:15px;line-height:1.7}
.foot__addr a{text-decoration:none}
.foot__note{color:rgba(244,242,234,.56);line-height:1.7}

/* ═════════ OPEN NAV (desktop) · the clock moves to the left of it ═════════ */
.bar__nav{display:none}
@media (min-width:1180px){
  .bar{grid-template-columns:auto 1fr auto auto;column-gap:clamp(20px,2vw,36px)}
  .bar__nav{display:block;justify-self:center}
  .bar__nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(14px,1.5vw,28px)}
  .bar__nav a{position:relative;display:block;padding:12px 1px;font:400 15.5px/1 var(--f-body);color:var(--fg);text-decoration:none;white-space:nowrap}
  .bar__nav a::after{content:"";position:absolute;inset-inline:1px;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transition:transform .2s}
  .bar__nav a:hover::after{transform:scaleX(1)}
  .bar__clock{justify-self:end}
  .bar__menu{display:none}
}
@media (min-width:1180px) and (max-width:1379px){.bar__label{display:none}}

/* ═════════ OPEN SEARCH in the hero · sharp glass, the one lime button ═════════ */
.hs{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) auto;align-items:stretch;margin-top:34px;
  width:min(760px,62vw);padding:6px;background:rgba(9,11,24,.42);border:1px solid rgba(244,242,234,.24);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
.hs__f{display:grid;gap:4px;align-content:center;min-width:0;padding:8px 18px;border-inline-start:1px solid rgba(244,242,234,.16)}
.hs__f:first-of-type{border-inline-start:0}
.hs__f .mono{color:rgba(244,242,234,.7)}
.hs__f input,.hs__f select{appearance:none;-webkit-appearance:none;width:100%;min-height:30px;padding:0;background:transparent;border:0;border-radius:0;
  color:var(--paper);font:400 19px/1.2 var(--f-body);color-scheme:dark;cursor:pointer}
.hs__f select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:left 2px center,left 8px center;background-size:6px 6px;background-repeat:no-repeat;padding-left:22px}
.hs__f select option{color:var(--ink);background:var(--paper)}
.hs__f input::-webkit-date-and-time-value{text-align:start}
.hs__f:focus-within{background:rgba(244,242,234,.07)}
.hs__f input:focus-visible,.hs__f select:focus-visible{outline:none}
.hs__f:has(:focus-visible){outline:2px solid var(--oasis);outline-offset:-2px}
.hs__go{min-height:58px;padding:0 28px}
.hs__day{display:inline-block;margin-top:14px;color:rgba(244,242,234,.78);text-decoration:none;padding:6px 0}
.hs__day:hover{color:var(--paper)}
@media (max-width:899px){
  .hs{grid-template-columns:1fr 1fr;width:100%;margin-top:22px;padding:4px}
  .hs__f{padding:8px 14px}
  .hs__f:first-of-type{grid-column:1 / -1;border-bottom:1px solid rgba(244,242,234,.16)}
  .hs__f:nth-of-type(2){border-inline-start:0}
  .hs__go{grid-column:1 / -1;min-height:52px;margin-top:4px}
  .hs__day{margin-top:8px}
}
@media (prefers-reduced-motion:no-preference){.hs,.hs__day{animation:fade 1.2s .45s ease both}}

/* ═════════ FOOTER (shared with the homepage v2) ═════════ */
.ftr{position:relative;z-index:1;padding:clamp(56px,6vw,88px) 0 28px;background:#EAE2D0;color:#1D1F1B;font-size:16px}
.ftr__grid{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:40px}
@media (max-width:1099px){.ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ftr__brand{grid-column:1/-1}}
.ftr__logo{width:132px;height:auto;aspect-ratio:90/35;margin-bottom:18px;color:#1D1F1B}
.ftr address{font-style:normal;line-height:1.85;color:#4A4C45}
.ftr address a{font-weight:700;color:#1D1F1B;text-decoration:none}
.ftr__h{margin:0 0 14px;font:700 17px/1.3 var(--f-body);color:#1D1F1B}
.ftr__col ul{list-style:none;display:grid;gap:4px;margin:0;padding:0}
.ftr__col a{display:inline-block;padding:4px 0;color:#4A4C45;text-decoration:none}
.ftr__col a:hover{color:#1D1F1B;text-decoration:underline;text-underline-offset:3px}
.social{list-style:none;display:flex;gap:8px;margin:18px 0 0;padding:0}
.social a{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(29,31,27,.22);border-radius:50%;color:#1D1F1B}
.social a:hover{background:#1D1F1B;color:#FBF9F4}
.social svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ftr__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 40px;margin-top:44px;padding-top:22px;border-top:1px solid rgba(29,31,27,.16);font-size:14px;color:#4A4C45}
.ftr__lang{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0}
.ftr__lang a{display:inline-block;padding-block:6px;text-decoration:none;color:#1D1F1B;font-weight:500}
.ftr__note{max-width:84ch;margin:0}
.ftr :focus-visible{outline-color:#2F5A27}

/* ── motion off ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .hz{--p:1!important}
}