/* ============================================================
   ABOVE ELEVEN — cinematic rooftop experience
   ============================================================ */
:root{
  --ink:#05060a;        /* night black            */
  --ink-2:#0a0d16;      /* panel black            */
  --night:#0c1226;      /* deep navy              */
  --purple:#5b46b8;     /* bokeh purple           */
  --purple-soft:#8d77ff;
  --gold:#d8a657;       /* warm amber accent      */
  --gold-soft:#ecca8c;
  --teal:#37b6ad;       /* uniform teal           */
  --orange:#e2622b;     /* uniform orange         */
  --cream:#f3ede2;
  --muted:rgba(243,237,226,.62);
  --faint:rgba(243,237,226,.34);
  --line:rgba(243,237,226,.12);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans); background:var(--ink); color:var(--cream);
  font-weight:300; line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.lock{ overflow:hidden; height:100vh; }
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
canvas{display:block}
::selection{background:var(--gold);color:var(--ink)}

/* ambient constellation field — fixed background layer (must not affect flow) */
#fx{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:.6}
.content{position:relative;z-index:1}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ---------- typography helpers ---------- */
.eyebrow{
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); font-weight:500;
}
.eyebrow.center{display:block;text-align:center}
.section-title{
  font-family:var(--serif); font-weight:500; line-height:1.02;
  font-size:clamp(2.4rem,6vw,4.8rem); letter-spacing:-.01em;
}
.section-title.center{text-align:center}
.section-lead{
  max-width:46ch; color:var(--muted); font-size:1.02rem; margin-top:1.1rem;
}
.section-lead.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em; cursor:pointer;
  font-family:var(--sans); font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  padding:1.05em 1.9em; border-radius:100px; border:1px solid transparent;
  transition:.5s var(--ease); font-weight:500; white-space:nowrap;
}
.btn--sm{padding:.85em 1.4em;font-size:.72rem}
.btn--solid{ background:var(--gold); color:#1a1206; }
.btn--solid:hover{ background:var(--gold-soft); transform:translateY(-2px); box-shadow:0 14px 40px -12px rgba(216,166,87,.6) }
.btn--ghost{ border-color:var(--line); color:var(--cream); backdrop-filter:blur(6px) }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold) }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{position:fixed;inset:0;z-index:200;background:var(--ink);
  display:flex;align-items:center;justify-content:center;transition:opacity .8s,visibility .8s}
.preloader.done{opacity:0;visibility:hidden}
.preloader__inner{text-align:center;width:min(280px,70vw)}
.preloader__mark{font-family:var(--serif);font-size:3rem;letter-spacing:.05em;color:var(--cream)}
.preloader__mark span{color:var(--gold)}
.preloader__bar{height:1px;background:var(--line);margin:1.4rem 0 .8rem;overflow:hidden}
.preloader__bar i{display:block;height:100%;width:0;background:var(--gold)}
.preloader__pct{font-size:.7rem;letter-spacing:.3em;color:var(--faint)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.5rem clamp(1.2rem,4vw,3rem);
  transition:padding .5s var(--ease),background .5s,backdrop-filter .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding-top:.9rem;padding-bottom:.9rem;
  background:rgba(5,6,10,.72);backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:var(--line);
}
.nav__brand{display:flex;flex-direction:column;line-height:.86;font-family:var(--serif)}
.nav__brand-top{font-size:.78rem;letter-spacing:.5em;color:var(--muted);text-indent:.5em}
.nav__brand-bot{font-size:1.5rem;letter-spacing:.14em}
.nav__links{display:flex;gap:2.2rem}
.nav__links a{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);position:relative;padding:.3em 0;transition:color .4s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .45s var(--ease)}
.nav__links a:hover{color:var(--cream)}
.nav__links a:hover::after{width:100%}
.nav__cta{border:1px solid var(--line);padding:.7em 1.4em;border-radius:100px;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;transition:.45s var(--ease)}
.nav__cta:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.nav__burger{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:8px}
.nav__burger span{width:26px;height:1.5px;background:var(--cream);transition:.4s}

/* (legacy v1 hero + .reveal util removed — the live hero is .scrollhero below.
   scrolldot keyframe kept: it's reused by the scroll hint.) */
@keyframes scrolldot{0%{top:-50%}60%,100%{top:120%}}

/* ============================================================
   SCROLL-SCRUB HERO (Earth → cocktail, pinned canvas)
   ============================================================ */
.scrollhero{position:relative;height:440vh;background:var(--ink)}
.scrollhero__stage{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.scrollhero__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.scrollhero__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:none}
.scrollhero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(5,6,10,.72) 0%,rgba(5,6,10,.34) 34%,transparent 62%),
  radial-gradient(130% 95% at 50% 38%,transparent 46%,rgba(5,6,10,.26) 84%,rgba(5,6,10,.66) 100%),
  linear-gradient(180deg,rgba(5,6,10,.46) 0%,transparent 26%,transparent 58%,rgba(5,6,10,.86) 100%)}
.scrollhero__grain{position:absolute;inset:0;z-index:1;opacity:.05;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* staged captions */
.hcaps{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 clamp(1.4rem,5vw,4rem);pointer-events:none}
.hcap{position:absolute;left:clamp(1.4rem,5vw,4rem);right:clamp(1.4rem,5vw,4rem);top:50%;
  opacity:0;transform:translateY(34px);transition:opacity .7s var(--ease),transform .7s var(--ease);
  will-change:opacity,transform}
.hcap.is-on{opacity:1;transform:translateY(-50%)}
.hcap .eyebrow{margin-bottom:1.1rem}
.hcap__title{font-family:var(--serif);font-weight:500;line-height:.82;letter-spacing:-.02em;
  font-size:clamp(4.2rem,15vw,12rem);text-transform:none}
.hcap__title span{display:block}
.hcap__title em{display:block;color:var(--gold);font-style:italic;margin-left:.08em}
.hcap__line{font-family:var(--serif);font-weight:500;line-height:1.02;letter-spacing:-.01em;
  font-size:clamp(2.4rem,6.4vw,5.4rem);text-shadow:0 3px 30px rgba(5,6,10,.7),0 1px 4px rgba(5,6,10,.5)}
.hcap__line em{color:var(--gold);font-style:italic}
.hcap__title{text-shadow:0 4px 40px rgba(5,6,10,.6)}
.hcap__sub{max-width:42ch;margin-top:1.6rem;color:rgba(243,237,226,.86);
  font-size:clamp(1rem,1.5vw,1.2rem);text-shadow:0 2px 18px rgba(0,0,0,.6)}
.hcap__actions{display:flex;gap:1rem;margin-top:2.2rem;flex-wrap:wrap;pointer-events:auto}

/* film chrome */
.scrollhero__corner{position:absolute;bottom:2.2rem;z-index:3;font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faint)}
.scrollhero__corner--l{left:clamp(1.4rem,5vw,4rem)}
.scrollhero__corner--r{right:clamp(1.4rem,5vw,4rem)}
.scrollhero__hint{position:absolute;left:50%;bottom:1.8rem;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.55rem;color:var(--faint);
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;transition:opacity .5s}
.scrollhero__hint i{width:1px;height:42px;background:linear-gradient(var(--gold),transparent);position:relative;overflow:hidden}
.scrollhero__hint i::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;
  background:var(--gold);animation:scrolldot 2s var(--ease) infinite}
.scrollhero__hint.hide{opacity:0}
.scrollhero__counter{position:absolute;top:6.2rem;right:clamp(1.4rem,5vw,4rem);z-index:3;
  font-size:.66rem;letter-spacing:.34em;color:var(--gold);opacity:.7;font-variant-numeric:tabular-nums}

@media (max-width:820px){
  .scrollhero{height:100svh}
  .scrollhero__stage{position:relative}
  .scrollhero__canvas{display:none}
  .scrollhero__fallback{display:block}
  .hcap{position:relative;top:auto;opacity:1!important;transform:none!important;margin-bottom:0}
  .hcap:not(.is-on){display:none}
  .scrollhero__counter,.scrollhero__hint{display:none}
}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{position:relative;padding:clamp(8rem,18vw,16rem) 0;overflow:hidden;background:var(--ink)}
.manifesto__bg{position:absolute;inset:-12% 0;background:url("assets/img/skyline-bokeh.jpg") center/cover;
  opacity:.16;filter:saturate(1.1)}
.manifesto::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 50%,transparent,var(--ink))}
.manifesto__wrap{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:0 clamp(1.4rem,5vw,3rem)}
.manifesto__line{font-family:var(--serif);font-weight:400;text-align:center;margin-top:1.6rem;
  font-size:clamp(1.9rem,4.6vw,3.7rem);line-height:1.25;letter-spacing:-.005em}
.manifesto__line .w{display:inline-block;opacity:.14;transition:opacity .5s var(--ease)}
.manifesto__line .w.lit{opacity:1}
.manifesto__line .w.gold{color:var(--gold);font-style:italic}

/* ============================================================
   GLOBE
   ============================================================ */
.globe{position:relative;padding:clamp(5rem,10vw,9rem) 0 clamp(4rem,8vw,7rem);
  /* soft navy pool behind the globe; transparent edges reveal the interactive #fx sky */
  background:radial-gradient(70% 65% at 50% 52%,rgba(13,20,46,.92) 0%,rgba(10,14,30,.5) 45%,transparent 78%)}
.globe__head{max-width:var(--maxw);margin:0 auto 1rem;padding:0 clamp(1.4rem,5vw,3rem)}
.globe__head .section-lead{margin-top:1rem}
.globe__stage{position:relative;height:min(82vh,820px);min-height:560px;width:100%;margin-top:1rem}
.globe__canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
.globe__canvas:active{cursor:grabbing}
.globe__labels{position:absolute;inset:0;pointer-events:none;z-index:4}
.glabel{position:absolute;pointer-events:none;transition:opacity .35s;text-align:center;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:var(--gold);
  background:rgba(5,6,10,.66);backdrop-filter:blur(6px);border:1px solid rgba(216,166,87,.35);
  border-radius:100px;padding:.4rem .85rem;box-shadow:0 8px 24px -10px rgba(0,0,0,.8)}
.glabel b{display:block;font-family:var(--serif);font-size:1.05rem;letter-spacing:.04em;
  text-transform:none;color:var(--cream)}

/* city selector */
.globe__cities{position:absolute;left:clamp(3rem,5vw,4.5rem);top:50%;transform:translateY(-50%);
  z-index:6;display:flex;flex-direction:column;gap:.5rem;width:min(260px,38vw)}
.city{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left;
  background:rgba(10,13,22,.5);border:1px solid var(--line);border-radius:14px;
  padding:.85rem 1.1rem;cursor:pointer;color:var(--cream);transition:.45s var(--ease);
  backdrop-filter:blur(10px);position:relative;overflow:hidden}
.city:hover{border-color:rgba(216,166,87,.5);transform:translateX(4px)}
.city.active{border-color:var(--gold);background:rgba(216,166,87,.1)}
.city__dot{width:8px;height:8px;border-radius:50%;background:var(--gold);position:absolute;right:1rem;top:1rem;
  box-shadow:0 0 0 0 rgba(216,166,87,.6);animation:none}
.city.active .city__dot{animation:ping 1.8s var(--ease) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(216,166,87,.55)}100%{box-shadow:0 0 0 12px rgba(216,166,87,0)}}
.city__name{font-family:var(--serif);font-size:1.5rem;line-height:1}
.city__meta{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* detail panel */
.locpanel{position:absolute;right:clamp(1rem,4vw,3rem);top:50%;transform:translateY(-50%) translateX(40px);
  z-index:7;width:min(380px,42vw);background:rgba(8,10,18,.82);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;backdrop-filter:blur(20px);opacity:0;visibility:hidden;
  transition:opacity .6s var(--ease),transform .6s var(--ease);box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.locpanel.open{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
.locpanel__close{position:absolute;right:.6rem;top:.4rem;z-index:3;background:rgba(0,0,0,.4);border:0;
  color:var(--cream);width:34px;height:34px;border-radius:50%;font-size:1.4rem;cursor:pointer;line-height:1;transition:.3s}
.locpanel__close:hover{background:var(--gold);color:var(--ink)}
.locpanel__media{height:190px;overflow:hidden;position:relative}
.locpanel__media::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(8,10,18,.95))}
.locpanel__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.locpanel__body{padding:1.3rem 1.5rem 1.5rem;margin-top:-2.2rem;position:relative;z-index:2}
.locpanel__body h3{font-family:var(--serif);font-size:2.4rem;font-weight:500;line-height:1;margin:.2rem 0}
.locpanel__addr{font-size:.78rem;color:var(--muted);margin-bottom:.7rem}
.locpanel__desc{font-size:.92rem;color:rgba(243,237,226,.8);margin-bottom:1rem}
.locpanel__facts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem;margin-bottom:1.2rem}
.locpanel__facts li{font-size:.8rem;border-top:1px solid var(--line);padding-top:.4rem}
.locpanel__facts li b{display:block;font-weight:400;color:var(--faint);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.1rem}
.locpanel__actions{display:flex;gap:.6rem}
.globe__hint{position:absolute;left:50%;bottom:.5rem;transform:translateX(-50%);z-index:5;
  font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--faint)}

/* (legacy VENUE + CUISINE/dishes sections removed — replaced by .garden and the
   per-city .menu flip-book. .stats/.stat live in the garden block below.) */

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{padding:clamp(4rem,9vw,8rem) clamp(1.4rem,5vw,4rem);max-width:var(--maxw);margin:0 auto}
.gallery__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.gallery__head .section-title{font-size:clamp(2rem,4vw,3.2rem)}
.gallery__ig{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid transparent;transition:.4s var(--ease);padding-bottom:.2rem}
.gallery__ig:hover{border-color:var(--gold)}
.gallery__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:1rem}
.g{overflow:hidden;border-radius:14px;position:relative;background:var(--ink-2)}
.g img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),opacity .6s var(--ease);filter:saturate(1.05)}
.g:hover img{transform:scale(1.08)}
.g--wide{grid-column:span 2}

/* ---- location bar (now-exploring switcher; mirrors the globe selection) ---- */
.locbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:1.2rem;flex-wrap:wrap;
  max-width:var(--maxw);margin:0 auto;padding:1.6rem clamp(1.4rem,5vw,4rem) .2rem}
.locbar__label{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}
.locbar__cities{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.locchip{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:100px;padding:.62em 1.25em;
  cursor:pointer;transition:.4s var(--ease)}
.locchip:hover{color:var(--cream);border-color:rgba(216,166,87,.5)}
.locchip.active{background:var(--gold);color:#1a1206;border-color:var(--gold)}
/* gold italic city name woven into the section headings */
.city-token{color:var(--gold);font-style:italic}

/* ============================================================
   VISIT
   ============================================================ */
.visit{padding:clamp(5rem,11vw,9rem) clamp(1.4rem,5vw,4rem);max-width:var(--maxw);margin:0 auto;text-align:center}
.visit__head .section-lead{margin-top:1rem}
.visit__panel{display:grid;grid-template-columns:1.05fr .95fr;gap:1.6rem;margin:3rem 0 1.5rem;text-align:left;align-items:stretch}
/* the selected-city postcard */
.visit__focus{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);box-shadow:0 60px 120px -60px rgba(0,0,0,.9)}
.visit__media{position:relative;aspect-ratio:16/10;overflow:hidden}
.visit__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.visit__focus:hover .visit__media img{transform:scale(1.05)}
.visit__media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,10,18,.55),transparent 45%)}
.visit__info{padding:clamp(1.4rem,2.6vw,2rem);display:flex;flex-direction:column;flex:1}
.visit__info .vcity-country{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.visit__info h3{font-family:var(--serif);font-size:clamp(2rem,3.5vw,2.8rem);font-weight:500;line-height:1;margin:.3rem 0 .5rem}
.visit__addr{color:var(--muted);font-size:.88rem;margin-bottom:1rem}
.visit__facts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.2rem;margin-bottom:1.2rem}
.visit__facts li{font-size:.82rem;border-top:1px solid var(--line);padding-top:.45rem}
.visit__facts li b{display:block;font-weight:400;color:var(--faint);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.12rem}
.visit__links{display:flex;gap:.6rem;margin-top:auto}
/* the matching reservation form */
.resform{color-scheme:dark;display:flex;flex-direction:column;border:1px solid rgba(216,166,87,.28);border-radius:22px;
  padding:clamp(1.6rem,3vw,2.4rem);background:linear-gradient(180deg,rgba(216,166,87,.07),rgba(10,13,22,.45))}
.resform__title{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:500;margin-bottom:1.4rem}
.resform__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field span{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.field input,.field select{font-family:var(--sans);font-size:.92rem;color:var(--cream);background:rgba(5,6,10,.5);
  border:1px solid var(--line);border-radius:10px;padding:.8em .9em;width:100%;cursor:pointer;transition:.35s var(--ease)}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold);background:rgba(5,6,10,.78)}
.field select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23d8a657'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9em center;padding-right:2.2em}
.resform__submit{margin-top:1.6rem;width:100%;justify-content:center}
.resform__fine{font-size:.72rem;color:var(--muted);margin-top:.9rem;text-align:center;min-height:1.1em}
.visit__note{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:1rem}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{position:relative;z-index:1;border-top:1px solid var(--line);padding:clamp(3rem,6vw,5rem) clamp(1.4rem,5vw,4rem) 2.5rem;
  max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.3fr 1.7fr;gap:2rem;align-items:start}
/* opaque, full-bleed backdrop so the cursor-reactive constellation field doesn't show / animate behind the footer */
.footer::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);
  background:var(--ink);z-index:-1;pointer-events:none}
.footer__mark{font-family:var(--serif);font-size:1.7rem;letter-spacing:.14em}
.footer__brand p{color:var(--muted);margin-top:.8rem;max-width:34ch;font-size:.88rem}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.footer__cols h4{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.footer__cols a{display:block;color:var(--muted);font-size:.9rem;padding:.25rem 0;transition:color .3s}
.footer__cols a:hover{color:var(--cream)}
.footer__base{grid-column:1/-1;border-top:1px solid var(--line);margin-top:1.5rem;padding-top:1.5rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.74rem;color:var(--faint);letter-spacing:.08em}

/* ============================================================
   THE ASCENT / SECRET GARDEN
   ============================================================ */
.garden{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,5rem);
  align-items:center;max-width:var(--maxw);margin:0 auto;padding:clamp(5rem,12vw,10rem) clamp(1.4rem,5vw,4rem)}
.garden__media{position:relative;border-radius:22px;aspect-ratio:4/3;
  box-shadow:0 60px 120px -50px rgba(0,0,0,.95)}
/* inner frame clips the zoomed image (clip-path reveal + zoom settle happen on this) */
.garden__frame{position:absolute;inset:0;border-radius:22px;overflow:hidden}
.garden__frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);will-change:transform}
.garden__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(120deg,transparent 55%,rgba(5,6,10,.45))}
/* one-time diagonal light sweep across the image as it enters view */
.garden__sheen{position:absolute;top:-30%;bottom:-30%;left:0;width:55%;z-index:2;pointer-events:none;
  opacity:0;transform:translateX(-160%) skewX(-18deg);mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,rgba(255,238,200,.35),rgba(255,238,200,.55),transparent)}
.garden__copy p{color:var(--muted);margin-top:1.4rem;max-width:48ch}
.garden__copy .section-title{margin-top:1rem}
.stats{display:flex;gap:2.5rem;margin-top:2.6rem}
.stat b{font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.4rem);color:var(--gold);display:block;line-height:1}
.stat span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   MENU — book covers + flip-book overlay (the REAL PDF menus)
   ============================================================ */
.menu{position:relative;padding:clamp(5rem,11vw,9rem) clamp(1.4rem,5vw,4rem);max-width:var(--maxw);margin:0 auto;text-align:center}
.menu__head .section-lead{margin:1rem auto 0}
.menu__covers{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;
  gap:clamp(1.4rem,4vw,3.2rem);margin-top:3.2rem;perspective:1700px}
.cover{position:relative;width:clamp(190px,22vw,250px);aspect-ratio:3/4.2;cursor:pointer;border:0;background:none;
  transform:rotateY(0);transition:transform .6s var(--ease);transform-style:preserve-3d}
.cover:hover{transform:rotateY(-16deg) translateY(-6px)}
.cover__spine{position:absolute;left:0;top:0;bottom:0;width:14px;border-radius:6px 2px 2px 6px;
  background:linear-gradient(90deg,#7a5b27,#b9863f 60%,#8c6730);box-shadow:inset -2px 0 4px rgba(0,0,0,.45)}
.cover__face{position:absolute;inset:0 0 0 8px;border-radius:4px 10px 10px 4px;
  background:linear-gradient(155deg,#14182a,#0b0f1e 55%,#080b16);border:1px solid rgba(216,166,87,.35);
  box-shadow:0 44px 80px -36px rgba(0,0,0,.95),inset 0 0 60px rgba(216,166,87,.05);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.6rem 1.2rem}
.cover__rule{width:30px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.cover__brand{font-family:var(--serif);font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft)}
.cover__city{font-family:var(--serif);font-size:1.9rem;font-style:italic;line-height:1;color:var(--cream)}
.cover__kind{font-size:.64rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.cover__open{position:absolute;bottom:1.1rem;left:0;right:0;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);opacity:0;transition:opacity .4s var(--ease)}
.cover:hover .cover__open{opacity:1}

/* ---- flip-book overlay ---- */
.book{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center}
.book.open{display:flex}
.book__scrim{position:absolute;inset:0;background:rgba(3,4,8,.86);backdrop-filter:blur(8px)}
.book__shell{position:relative;z-index:1;width:min(96vw,1120px);height:min(92vh,860px);
  display:flex;flex-direction:column;padding:.8rem clamp(.6rem,2vw,1.4rem) 1rem}
.book__bar{position:relative;display:flex;align-items:center;justify-content:center;gap:1rem;padding:.4rem 0 1rem}
.book__title{position:absolute;left:0;font-family:var(--serif);font-size:1.05rem;color:var(--cream);
  white-space:nowrap;max-width:34%;overflow:hidden;text-overflow:ellipsis}
.book__tabs{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.book__tab{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:100px;padding:.5em 1.1em;cursor:pointer;transition:.4s var(--ease)}
.book__tab:hover{color:var(--cream);border-color:rgba(216,166,87,.5)}
.book__tab.active{background:var(--gold);color:#1a1206;border-color:var(--gold)}
.book__close{position:absolute;right:0;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:rgba(0,0,0,.4);color:var(--cream);font-size:1.4rem;line-height:1;cursor:pointer;transition:.3s var(--ease)}
.book__close:hover{background:var(--gold);color:var(--ink)}
.book__stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.book__stage:active{cursor:grabbing}
.book__leaf img,.book__flip img{user-select:none;-webkit-user-drag:none;pointer-events:none}
.book__spread{position:relative;height:100%;display:flex;align-items:stretch;justify-content:center;
  perspective:2600px;filter:drop-shadow(0 40px 70px rgba(0,0,0,.7))}
.book__leaf{position:relative;height:100%;width:min(44vw,500px);background:#fbf7ef;overflow:hidden;display:flex}
.book__leaf--l{border-radius:6px 0 0 6px;box-shadow:inset -18px 0 30px -18px rgba(0,0,0,.35)}
.book__leaf--r{border-radius:0 6px 6px 0;box-shadow:inset 18px 0 30px -18px rgba(0,0,0,.35)}
.book__leaf img{width:100%;height:100%;object-fit:contain;margin:auto}
.book__spread--single .book__leaf--r{display:none}
.book__spread--single .book__leaf--l{width:min(92vw,620px);border-radius:6px}
/* the turning leaf */
.book__flip{position:absolute;top:0;height:100%;width:min(44vw,500px);display:none;transform-style:preserve-3d;z-index:5}
.book__flip.is-right{left:50%;transform-origin:left center}
.book__flip.is-left{right:50%;transform-origin:right center}
.book__spread--single .book__flip{left:50%;right:auto;transform:translateX(-50%);width:min(92vw,620px)}
.book__flip-front,.book__flip-back{position:absolute;inset:0;backface-visibility:hidden;background:#fbf7ef;overflow:hidden;display:flex}
.book__flip-front img,.book__flip-back img{width:100%;height:100%;object-fit:contain;margin:auto}
.book__flip-back{transform:rotateY(180deg)}
/* shading that the JS fades in as the page lifts (darkest toward the spine edge) */
.book__shade{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.12) 42%,transparent 78%)}
.book__flip.is-left .book__flip-front .book__shade,
.book__flip.is-right .book__flip-back .book__shade{background:linear-gradient(270deg,rgba(0,0,0,.55),rgba(0,0,0,.12) 42%,transparent 78%)}
/* center gutter shadow — the seam of an open book */
.book__gutter{position:absolute;left:50%;top:0;bottom:0;width:46px;transform:translateX(-50%);z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.32) 48%,rgba(0,0,0,.32) 52%,transparent)}
.book__spread--single .book__gutter{display:none}
.book__loader{position:absolute;display:none;gap:.5rem;z-index:6}
.book__loader.on{display:flex}
.book__loader span{width:9px;height:9px;border-radius:50%;background:var(--gold);animation:bookdot 1s var(--ease) infinite}
.book__loader span:nth-child(2){animation-delay:.15s}
.book__loader span:nth-child(3){animation-delay:.3s}
@keyframes bookdot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-6px)}}
.book__nav{display:flex;align-items:center;justify-content:center;gap:1.6rem;padding-top:1rem}
.book__arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--cream);font-size:1.5rem;line-height:1;cursor:pointer;transition:.3s var(--ease)}
.book__arrow:hover:not(:disabled){background:var(--gold);color:var(--ink);border-color:var(--gold)}
.book__arrow:disabled{opacity:.3;cursor:default}
.book__count{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);min-width:90px;text-align:center}

/* ============================================================
   NIGHTS & EVENTS
   ============================================================ */
.nights{position:relative;padding:clamp(5rem,11vw,9rem) clamp(1.4rem,5vw,4rem);overflow:hidden}
.nights__bg{position:absolute;inset:-12% 0;background:url("assets/img/terrace-crowd.jpg") center/cover;opacity:.18}
.nights::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--ink),rgba(5,6,10,.6) 40%,var(--ink))}
.nights__head,.nights__grid{position:relative;z-index:2;max-width:var(--maxw);margin-left:auto;margin-right:auto}
.nights__head .section-lead{margin-top:1rem}
.nights__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}
.night{background:rgba(10,13,22,.55);border:1px solid var(--line);border-radius:18px;padding:2rem;
  backdrop-filter:blur(10px);transition:.5s var(--ease)}
.night:hover{transform:translateY(-6px);border-color:rgba(216,166,87,.45)}
.night--feature{background:linear-gradient(180deg,rgba(216,166,87,.12),rgba(10,13,22,.55));border-color:rgba(216,166,87,.4)}
.night__day{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.night h3{font-family:var(--serif);font-size:2rem;font-weight:500;margin:.6rem 0 .7rem}
.night p{color:var(--muted);font-size:.9rem}

/* ============================================================
   THE COCKTAIL (animated video moment)
   ============================================================ */
.cocktail{position:relative;height:100vh;min-height:600px;overflow:hidden;display:flex;align-items:flex-end}
.cocktail__media{position:absolute;inset:0;z-index:0}
.cocktail__video{width:100%;height:100%;object-fit:cover;background:var(--ink);will-change:transform}
.cocktail__scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(5,6,10,.88) 0%,rgba(5,6,10,.45) 38%,transparent 70%),
  linear-gradient(0deg,rgba(5,6,10,.8) 0%,transparent 45%),
  radial-gradient(120% 100% at 30% 60%,transparent 50%,rgba(5,6,10,.5))}
.cocktail__copy{position:relative;z-index:2;max-width:var(--maxw);width:100%;margin:0 auto;
  padding:0 clamp(1.4rem,5vw,4rem) clamp(4rem,11vh,7.5rem)}
.cocktail__copy .section-title{margin-top:1rem}
.cocktail__copy p{max-width:40ch;color:rgba(243,237,226,.86);margin-top:1.4rem;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.cocktail__cta{margin-top:2.2rem}
.cocktail__tag{position:absolute;z-index:2;right:clamp(1rem,3vw,2.5rem);top:50%;
  transform:translateY(-50%) rotate(90deg);transform-origin:right center;
  font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);opacity:.8}

/* ============================================================
   SCROLL SPINE — top progress + left section rail
   ============================================================ */
.scrollprog{position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  box-shadow:0 0 12px rgba(216,166,87,.55);transition:width .12s linear}

.rail{position:fixed;left:clamp(1rem,2.4vw,2.4rem);top:50%;transform:translateY(-50%);
  z-index:85;display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start;width:10px}
.rail__track{position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:var(--line)}
.rail__fill{position:absolute;left:0;top:0;width:100%;height:0;
  background:linear-gradient(var(--gold),var(--gold-soft));box-shadow:0 0 8px rgba(216,166,87,.5)}
/* node = just the dot (10px) so its invisible label never blocks clicks on content */
.rail__node{position:relative;display:block;width:10px;height:10px;cursor:pointer;flex:0 0 auto}
.rail__node b{position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;
  background:transparent;border:1px solid rgba(243,237,226,.35);
  transition:.45s var(--ease);box-sizing:border-box}
.rail__node span{position:absolute;left:20px;top:50%;transform:translateY(-50%) translateX(-6px);
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;
  opacity:0;pointer-events:none;color:var(--cream);
  transition:opacity .4s var(--ease),transform .4s var(--ease);text-shadow:0 1px 8px rgba(0,0,0,.7)}
.rail__node:hover span{opacity:.85;transform:translateY(-50%) translateX(0)}
.rail__node:hover b{border-color:var(--gold);transform:scale(1.1)}
/* every dot you've scrolled past fills gold (cumulative) */
.rail__node.passed b{background:var(--gold);border-color:var(--gold)}
.rail__node.active b{background:var(--gold);border-color:var(--gold);
  transform:scale(1.35);box-shadow:0 0 0 4px rgba(216,166,87,.16)}
.rail__node.active span{color:var(--gold)}      /* name still appears on hover, not persistently */

/* flat dev mode (?flat) — disable scroll animations for clean section screenshots */
body.flat .manifesto__line .w{opacity:1!important}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .rail{display:none}
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  .nav.open .nav__links{display:flex;position:fixed;inset:0;background:rgba(5,6,10,.97);
    flex-direction:column;align-items:center;justify-content:center;gap:2rem;z-index:80}
  .nav.open .nav__links a{font-size:1.4rem}
  .garden{grid-template-columns:1fr}
  .garden__media{aspect-ratio:16/10}
  .visit__panel{grid-template-columns:1fr}
  .book__title{display:none}
  .nights__grid{grid-template-columns:1fr}
  .cocktail__tag{display:none}
  .footer{grid-template-columns:1fr}
  .globe__cities{flex-direction:row;left:0;right:0;top:auto;bottom:.5rem;transform:none;width:auto;
    justify-content:center;padding:0 1rem;flex-wrap:wrap}
  .city{width:auto;flex-direction:row;align-items:center;gap:.5rem;padding:.6rem .9rem}
  .city__dot{position:static}
  .city__name{font-size:1.05rem}
  .city__meta{display:none}
  .locpanel{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;transform:translateY(110%);
    border-radius:20px 20px 0 0;max-height:78vh;overflow:auto}
  .locpanel.open{transform:translateY(0)}
  .globe__hint{display:none}
  .gallery__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .footer__base{flex-direction:column}
}
@media (max-width:600px){
  .stats{flex-wrap:wrap;gap:1.5rem 2rem}
  .globe__stage{height:78svh}
  .gallery__grid{grid-auto-rows:140px}
  .g--wide{grid-column:span 2}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.1ms!important}
}