@view-transition { navigation: auto; }

/* ==========================================================================
   Tashkent with Javlon - one design system, three worlds
   Every page loads this file. A page declares its world on <html data-world>.
   Adding a world = one palette block below + one word on the hub.
   ========================================================================== */

/* ---------- 1. Brand constants (never change between worlds) ---------- */
:root{
  --f-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --f-voice:"Instrument Serif",Georgia,serif;

  /* the one colour that is the brand, in every world */
  --accent:#D9441F;
  --accent-deep:#A8381C;
  --accent-soft:rgba(217,68,31,.10);
  --accent-line:rgba(217,68,31,.32);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.45,0,.2,1);
  --slow:1200ms;
  --mid:700ms;
  --quick:350ms;

  --gutter:clamp(18px,5vw,72px);
  --maxw:1380px;
  --bar-h:58px;
}

/* ---------- 2. The worlds ---------- */
/* air = page background, ink = text, second = the world's own colour,
   haze = veil over photography, so every world grades its images the same way */
[data-world="brand"]{
  --air:#FFFFFF; --air-2:#F2F1EF; --ink:#141414; --ink-2:#54504B;
  --second:#8A4B2A; --haze:rgba(16,12,8,.30);
}
[data-world="city"]{
  --air:#FFFFFF; --air-2:#F2F1EF; --ink:#141414; --ink-2:#55514C;
  --second:#1C8B90; --haze:rgba(16,12,8,.30);
}
[data-world="mountains"]{
  --air:#FFFFFF; --air-2:#F1F1EE; --ink:#131614; --ink-2:#535853;
  --second:#2C8580; --haze:rgba(14,19,17,.30);
}
[data-world="stay"]{
  --air:#F5F0E7; --air-2:#ECE3D4; --ink:#1A1512; --ink-2:#5B4F42;
  --second:#9A6A33; --haze:rgba(26,21,18,.24);
}

/* ---------- 3. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h) + 12px);
  background:var(--air);
}
body{
  margin:0;overflow-x:hidden;overflow-x:clip;
  background:var(--air);color:var(--ink);
  font:400 1.0625rem/1.55 var(--f-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background-color 900ms linear;
}
img,video,canvas,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:120;background:var(--accent);color:#fff;padding:12px 18px;border-radius:2px;font-weight:600;text-decoration:none}
.skip:focus{top:16px}
.wrap{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto}
main{display:block;position:relative}
main:focus{outline:none}
@media (min-width:860px){body{font-size:1.125rem}:root{--bar-h:66px}}

/* ---------- 4. Typography ---------- */
.d1{font:800 clamp(2.9rem,11.5vw,8.5rem)/.92 var(--f-display);letter-spacing:-.045em;text-wrap:balance}
.d2{font:800 clamp(2.1rem,6.4vw,4.8rem)/.98 var(--f-display);letter-spacing:-.04em;text-wrap:balance}
.d3{font:800 clamp(1.6rem,4.2vw,2.9rem)/1.04 var(--f-display);letter-spacing:-.035em}
.lede{font-size:clamp(1.0625rem,.5vw + .95rem,1.3rem);line-height:1.5;color:var(--ink-2);max-width:46ch}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 .72rem/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor}
.voice{font:400 clamp(1.2rem,2.3vw,1.85rem)/1.35 var(--f-voice);font-style:italic;color:var(--ink);text-wrap:balance}
.num{font:800 clamp(3.4rem,13vw,11rem)/.8 var(--f-display);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.meta{font:600 .74rem/1.4 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}

/* ---------- 5. The bar ---------- */
.bar{
  position:fixed;inset:0 0 auto 0;z-index:90;display:flex;align-items:center;gap:14px;
  height:calc(var(--bar-h) + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) var(--gutter) 0;
  background:color-mix(in srgb,var(--air) 86%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid transparent;transition:border-color var(--mid) var(--ease);
}
.bar.lifted{border-bottom-color:color-mix(in srgb,var(--ink) 12%,transparent)}
.mark{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font:800 1rem/1 var(--f-display);letter-spacing:-.03em;white-space:nowrap;flex:none}
.mark svg{width:20px;height:20px;color:var(--accent);flex:none}
.mark b{font-weight:800}
.mark span{display:none}
@media (min-width:620px){.mark span{display:inline}}
.worlds{display:none;margin-inline:auto;gap:4px}
.worlds a{
  position:relative;padding:9px 14px;border-radius:999px;text-decoration:none;
  font:600 .8rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  transition:color var(--quick) var(--ease),background-color var(--quick) var(--ease);
}
.worlds a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.worlds a[aria-current]{color:var(--accent);background:var(--accent-soft)}
@media (min-width:860px){.worlds{display:flex}}
.bar-end{display:flex;align-items:center;gap:8px;margin-left:auto}
@media (min-width:860px){.bar-end{margin-left:0}}
.lang{
  display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 9px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);text-decoration:none;
  font:600 .72rem/1 var(--f-body);letter-spacing:.1em;color:var(--ink-2);
  transition:border-color var(--quick) var(--ease),color var(--quick) var(--ease);
}
.lang:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- 6. Buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:0 26px;border:1.5px solid transparent;border-radius:999px;
  font:600 1.0625rem/1 var(--f-body);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform var(--mid) var(--ease),background-color var(--quick) var(--ease),border-color var(--quick) var(--ease),color var(--quick) var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-solid{background:var(--accent);color:#fff}
.btn-solid:hover{background:var(--accent-deep)}
.btn-line{border-color:color-mix(in srgb,var(--ink) 26%,transparent);color:var(--ink)}
.btn-line:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{min-height:42px;padding:0 17px;font-size:.92rem}
.btn svg{width:18px;height:18px;flex:none}
.link{
  display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;
  transition:gap var(--quick) var(--ease),color var(--quick) var(--ease);
}
.link:hover{gap:13px;color:var(--accent-deep)}
.link svg{width:15px;height:15px;flex:none}

/* ==========================================================================
   7. MOTION PRIMITIVES
   One easing curve, three speeds, transform and opacity only.
   ========================================================================== */

/* "Разрез" - a headline is uncovered by a moving mask, never a fade.
   A mask is used rather than clip-path on purpose: clip-path collapses the
   element's area, and then IntersectionObserver never sees it come into view. */
.js [data-reveal]{
  -webkit-mask-image:linear-gradient(180deg,#000 0 50%,transparent 50%);
  mask-image:linear-gradient(180deg,#000 0 50%,transparent 50%);
  -webkit-mask-size:100% 200%;mask-size:100% 200%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0 100%;mask-position:0 100%;
  transition:-webkit-mask-position var(--slow) var(--ease),mask-position var(--slow) var(--ease);
  transition-delay:calc(var(--d,0) * 110ms);
}
.js [data-reveal].seen{-webkit-mask-position:0 0;mask-position:0 0}
/* a quieter rise for supporting copy */
.js [data-rise]{opacity:0;transform:translate3d(0,22px,0);transition:opacity var(--mid) var(--ease),transform var(--slow) var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.js [data-rise].seen{opacity:1;transform:none}
/* "Чернила" - an SVG line draws itself along scroll */
.ink-path{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0))}
.ink-ghost{fill:none;stroke:color-mix(in srgb,var(--ink) 14%,transparent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   8. STAGES - the three storytelling mechanics
   One markup for phone and desktop. A stage is a tall section holding one
   sticky screen; core.js writes --p (0..1), --i (step) and --local onto it.
   ========================================================================== */
.stage{position:relative;height:calc((var(--steps,4) + .85) * 100svh)}
.stage-screen{position:sticky;top:0;height:100svh;overflow:hidden}
.steps{position:absolute;inset:0;margin:0}
.step{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 620ms var(--ease-soft)}
.step.on{opacity:1;pointer-events:auto}
.step-media{position:absolute;inset:0;overflow:hidden;background:var(--air-2);will-change:transform}
.step-media img{width:100%;height:100%;object-fit:cover}
.step-media::after{content:"";position:absolute;inset:0;background:var(--haze)}
.step-copy{
  position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;
  padding-bottom:clamp(74px,13vh,122px);padding-top:clamp(60px,14vh,160px);
  background:linear-gradient(180deg,rgba(16,11,7,0),rgba(16,11,7,.66) 44%,rgba(16,11,7,.88));
}
.step-copy>div{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto}
.step-num{display:block;color:rgba(255,255,255,.34);margin-bottom:-.04em}
.step-title{font:800 clamp(1.9rem,5.2vw,3.6rem)/1.02 var(--f-display);letter-spacing:-.04em;color:#fff;max-width:18ch}
.step-note{margin-top:12px;max-width:42ch;color:rgba(255,255,255,.86);font-size:1rem;line-height:1.5}
.step-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;max-width:54ch}
.step-tags li{padding:6px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.32);font:500 .78rem/1.3 var(--f-body);color:rgba(255,255,255,.92)}
.step-dur{margin-top:14px;font:600 .76rem/1.4 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.step-dur b{color:#fff;font-weight:600}
/* placeholder frame, used where real photography is not in yet */
.ph{position:absolute;inset:0;display:grid;place-items:center;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 16px,transparent 16px 32px),var(--second)}
.ph span{font:600 .7rem/1.6 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.9);
  border:1px dashed rgba(255,255,255,.5);padding:14px 20px;text-align:center;max-width:74%}

/* --- 8a. "ПРОЕЗД" - City. Photographs pass sideways, like a car window --- */
[data-stage="pass"] .step-media{transform:translate3d(var(--x,0),0,0) scale(1.06);transition:transform 1000ms var(--ease-soft)}
[data-stage="pass"] .step.prev .step-media{--x:-20%}
[data-stage="pass"] .step.next .step-media{--x:20%}
[data-stage="pass"] .step.on .step-media{--x:0%;transform:translate3d(0,0,0) scale(1.03)}

/* --- 8b. "ПОДЪЁМ" - Mountains. The frame rises and grows, you gain height --- */
[data-stage="ascend"] .step-media{transform:translate3d(0,var(--y,0),0) scale(var(--s,1));transition:transform 1100ms var(--ease-soft)}
[data-stage="ascend"] .step.prev .step-media{--y:-16%;--s:1.16}
[data-stage="ascend"] .step.next .step-media{--y:18%;--s:1}
[data-stage="ascend"] .step.on .step-media{--y:0%;--s:1.08}

/* --- 8c. "ВДОХ" - Stay. Nothing travels. The room simply breathes in --- */
[data-stage="breathe"] .step-media{transform:scale(calc(1.02 + var(--local,0) * .07))}
[data-stage="breathe"] .step-media::after{background:rgba(26,21,18,.3)}
[data-stage="breathe"] .step-copy .step-note,[data-stage="breathe"] .step-copy .step-tags{opacity:calc(.2 + var(--local,0) * 2.6)}

/* --- the rail: route line (city) / altitude line (mountains) --- */
.rail{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(16px,3.4vh,34px);z-index:3;height:44px;pointer-events:none}
.rail svg{width:100%;height:44px;overflow:visible}
.rail .ink-ghost{stroke:rgba(255,255,255,.28);stroke-width:2}
.rail .ink-path{stroke:var(--accent);stroke-width:3}
.rail .bead{fill:var(--accent)}
.rail .tick{fill:rgba(255,255,255,.5)}
.rail .tick.done{fill:#fff}
.rail-label{position:absolute;right:0;bottom:46px;font:600 .68rem/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72)}

/* ==========================================================================
   9. HUB - three words, three worlds, one screen
   ========================================================================== */
.hub{position:relative;height:100svh;min-height:580px;display:flex;flex-direction:column;overflow:hidden}
.hub-bg{position:absolute;inset:0;z-index:0;background:var(--air-2)}
.hub-shot{position:absolute;inset:0;opacity:0;transition:opacity 760ms var(--ease-soft),transform 1400ms var(--ease-soft);transform:scale(1.08) translate3d(var(--from,0),0,0)}
.hub-shot img,.hub-shot video{width:100%;height:100%;object-fit:cover}
.hub-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,13,9,.52),rgba(18,13,9,.26) 36%,rgba(18,13,9,.72))}
.hub.lit .hub-shot.on{opacity:1;transform:scale(1.02) translate3d(0,0,0)}
.hub-inner{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;padding-top:calc(var(--bar-h) + env(safe-area-inset-top,0px))}
.hub-head{padding-block:clamp(18px,4vh,42px)}
.hub-kicker{color:var(--ink-2);transition:color var(--mid) var(--ease)}
.hub.lit .hub-kicker{color:rgba(255,255,255,.8)}
.doors{flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(2px,.4vh,10px)}
.door{position:relative;display:block;text-decoration:none;padding-block:clamp(2px,.6vh,8px)}
.door-word{
  display:block;font:800 clamp(2.6rem,9vw,7.4rem)/.9 var(--f-display);letter-spacing:-.05em;
  color:var(--ink);transition:color var(--mid) var(--ease),transform var(--slow) var(--ease),opacity var(--mid) var(--ease);
  transform-origin:left center;
}
.hub.lit .door-word{color:rgba(255,255,255,.26)}
.hub.lit .door.on .door-word{color:#fff;transform:translate3d(clamp(6px,1.2vw,22px),0,0)}
.door-sub{
  display:block;max-width:34ch;margin-top:4px;
  font:500 clamp(.92rem,1.3vw,1.08rem)/1.45 var(--f-body);color:var(--ink-2);
  opacity:0;max-height:0;overflow:hidden;
  transition:opacity var(--mid) var(--ease),max-height var(--mid) var(--ease),color var(--mid) var(--ease);
}
.hub.lit .door.on .door-sub{opacity:1;max-height:6em;color:rgba(255,255,255,.88)}
.door-go{position:absolute;right:0;top:50%;translate:0 -50%;opacity:0;transition:opacity var(--mid) var(--ease),translate var(--mid) var(--ease);color:#fff}
.door-go svg{width:clamp(28px,4vw,54px);height:clamp(28px,4vw,54px)}
.hub.lit .door.on .door-go{opacity:1;translate:0 -50%}
.hub-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;padding-block:clamp(14px,3vh,32px)}
.hub-voice{max-width:30ch;transition:color var(--mid) var(--ease)}
.hub.lit .hub-voice{color:#fff}
.hub-proof{display:flex;align-items:center;gap:10px;font:600 .78rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);transition:color var(--mid) var(--ease)}
.hub.lit .hub-proof{color:rgba(255,255,255,.85)}
.hub-proof svg{width:14px;height:14px;color:var(--accent)}

/* ==========================================================================
   10. Page furniture
   ========================================================================== */
.sec{padding-block:clamp(64px,9vw,140px);position:relative}
.sec-head{margin-bottom:clamp(28px,5vw,64px)}
.sec-head .d2{margin-top:14px}
.sec-head .lede{margin-top:16px}
.band{background:var(--air-2)}
.ink-band{background:var(--ink);color:var(--air)}
.ink-band .lede,.ink-band .meta{color:color-mix(in srgb,var(--air) 70%,transparent)}
.ink-band .d2,.ink-band .d3{color:var(--air)}

/* opener - the first screen of an experience */
.opener{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;padding-top:calc(var(--bar-h) + env(safe-area-inset-top,0px))}
.opener-media{position:absolute;inset:0;z-index:0;background:var(--air-2)}
.opener-media img,.opener-media video{width:100%;height:100%;object-fit:cover}
.opener-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,13,9,.46),rgba(18,13,9,.16) 34%,rgba(18,13,9,.86))}
.opener-inner{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(26px,6vh,70px);color:#fff}
body.cookie-open .opener-inner{padding-bottom:clamp(116px,16vh,150px)}
body.cookie-open .rail{bottom:clamp(104px,15vh,136px)}
body.cookie-open .step-copy{padding-bottom:clamp(150px,22vh,200px)}
.opener .d1{color:#fff}
.opener .lede{color:rgba(255,255,255,.86)}
.opener .eyebrow{color:#fff}
.opener-offer{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(20px,4vh,34px)}
.price-tag{display:flex;align-items:baseline;gap:10px}
.price-tag b{font:800 clamp(2.6rem,7vw,4rem)/.9 var(--f-display);letter-spacing:-.05em;color:#fff}
.price-tag b .cur{font-size:.46em;vertical-align:.62em;margin-right:.02em}
.price-tag span{font:500 1rem/1.3 var(--f-body);color:rgba(255,255,255,.84);text-wrap:balance}
.price-ask{font:600 .8rem/1.4 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}

/* photography that breaks the grid */
.spread{display:grid;gap:clamp(12px,2vw,26px)}
.spread img{width:100%;height:100%;object-fit:cover}
.spread figure{position:relative;margin:0;overflow:hidden;background:var(--air-2)}
.spread figcaption{position:absolute;left:12px;bottom:12px;padding:6px 11px;border-radius:999px;background:rgba(18,13,9,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font:600 .66rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:#fff}
.spread .tall{aspect-ratio:3/4}
.spread .wide{aspect-ratio:4/3}
.spread .sq{aspect-ratio:1/1}
@media (min-width:760px){
  .spread-3{grid-template-columns:repeat(12,1fr);align-items:center}
  .spread-3 figure:nth-child(1){grid-column:1/6}
  .spread-3 figure:nth-child(2){grid-column:7/13;transform:translateY(clamp(20px,5vw,64px))}
  .spread-3 figure:nth-child(3){grid-column:3/10;transform:translateY(clamp(-10px,-2vw,-30px))}
}

/* the personal chapter */
.voice-block{display:grid;gap:clamp(22px,4vw,56px);align-items:center}
@media (min-width:860px){.voice-block{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}}
.voice-portrait{position:relative;margin:0}
.voice-portrait img{width:100%;aspect-ratio:4/5;object-fit:cover}
.voice-sign{margin-top:18px;font:600 .78rem/1.4 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}

/* quotes */
.quotes{display:grid;gap:clamp(30px,6vw,76px)}
.quote{position:relative;padding-top:clamp(18px,3vw,30px);border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.quote blockquote{font:400 clamp(1.3rem,3.1vw,2.3rem)/1.32 var(--f-voice);font-style:italic;letter-spacing:-.01em;max-width:30ch}
.quote-by{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:18px}
.quote-by .meta{color:var(--ink-2)}
.quote-stars{display:inline-flex;gap:2px;color:var(--accent)}
.quote-stars svg{width:14px;height:14px}
.quote-orig{background:none;border:0;padding:0;cursor:pointer;color:var(--accent);font:600 .78rem/1.4 var(--f-body);letter-spacing:.12em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px}
@media (min-width:900px){.quotes{grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,90px)}.quote:nth-child(even){transform:translateY(clamp(26px,5vw,70px))}}

/* the bridge between worlds */
.bridge{position:relative;display:block;text-decoration:none;padding-block:clamp(48px,8vw,110px);overflow:hidden}
.bridge-inner{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.bridge .d2{max-width:16ch}
.bridge-art{position:absolute;inset:0;z-index:0;opacity:.2;transition:opacity var(--slow) var(--ease),transform 1600ms var(--ease)}
.bridge-art img{width:100%;height:100%;object-fit:cover}
.bridge:hover .bridge-art{opacity:.32;transform:scale(1.04)}

/* price / booking */
.ticket{display:grid;gap:clamp(24px,4vw,56px);align-items:start}
@media (min-width:900px){.ticket{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.incl{margin-top:26px}
.incl li{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent);font-size:1.0625rem}
.incl li i{font-style:normal;font:600 .76rem/1.6 var(--f-body);color:var(--accent);letter-spacing:.06em}
.money{display:flex;align-items:baseline;gap:4px;font:800 clamp(4rem,11vw,7rem)/.86 var(--f-display);letter-spacing:-.06em;color:var(--accent)}
.money .cur{font-size:.4em;vertical-align:.7em}
.money-for{margin-top:10px;font:800 1.2rem/1.2 var(--f-display);letter-spacing:-.03em}
.split{margin-top:22px;border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.split div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.split dt{font:600 .76rem/1.4 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.split dd{font-weight:600;font-variant-numeric:tabular-nums}

/* rooms */
.room-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.room-facts li{padding:7px 13px;border:1px solid rgba(255,255,255,.3);border-radius:999px;font:500 .82rem/1.3 var(--f-body);color:#fff}
.amen{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:color-mix(in srgb,var(--ink) 12%,transparent);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
@media (min-width:700px){.amen{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1040px){.amen{grid-template-columns:repeat(6,1fr)}}
.amen li{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 10px;background:var(--air);text-align:center}
.amen svg{width:26px;height:26px;color:var(--accent);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.amen span{font:600 .78rem/1.3 var(--f-body);letter-spacing:.08em;text-transform:uppercase}

/* FAQ */
.faq-item{border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.faq-item:first-child{border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.faq-q{display:flex;width:100%;align-items:center;justify-content:space-between;gap:18px;padding:20px 0;border:0;background:none;text-align:left;font:600 1.06rem/1.4 var(--f-body);letter-spacing:-.01em;cursor:pointer}
.faq-ic{position:relative;flex:none;width:26px;height:26px}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:var(--accent);transition:transform var(--mid) var(--ease)}
.faq-ic::after{transform:rotate(90deg)}
.faq-item.open .faq-ic::after{transform:rotate(0)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--mid) var(--ease)}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 40px 22px 0;color:var(--ink-2);max-width:62ch}
.faq-item.open .faq-a{grid-template-rows:1fr}
@media (min-width:860px){.faq-q{font-size:1.14rem;padding:24px 0}}

/* footer */
.foot{background:var(--ink);color:var(--air);padding:clamp(48px,7vw,92px) 0 calc(36px + env(safe-area-inset-bottom,0px))}
.foot-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:26px}
.foot .mark{color:var(--air)}
.foot-worlds{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px}
.foot-worlds a{text-decoration:none;font:600 .8rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--air) 66%,transparent)}
.foot-worlds a:hover{color:var(--air)}
.foot-links{display:flex;flex-wrap:wrap;gap:9px}
.foot .btn-line{border-color:color-mix(in srgb,var(--air) 26%,transparent);color:var(--air)}
.foot .btn-line:hover{border-color:var(--accent);color:#fff}
.foot-privacy{margin-top:30px;padding-top:22px;border-top:1px solid color-mix(in srgb,var(--air) 16%,transparent);max-width:76ch;font-size:.9rem;line-height:1.6;color:color-mix(in srgb,var(--air) 60%,transparent)}
.foot-cookies{padding:0;border:0;background:none;color:color-mix(in srgb,var(--air) 82%,transparent);font:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.foot-bottom{margin-top:20px;font:600 .7rem/1.5 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--air) 48%,transparent)}
.foot-bottom a{color:color-mix(in srgb,var(--air) 72%,transparent)}

/* the dock, phones only */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;align-items:center;justify-content:space-between;gap:12px;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--air) 95%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  transform:translateY(130%);transition:transform var(--mid) var(--ease);
}
body.dock-on .dock{transform:none}
body.cookie-open .dock{transform:translateY(130%)}
.dock-price{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.dock-price b{font:800 1.4rem/1 var(--f-display);letter-spacing:-.04em;color:var(--accent)}
.dock-price b .cur{font-size:.56em;vertical-align:.5em}
.dock-price small{margin-top:3px;font-size:.74rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock>.btn:only-child{flex:1;justify-content:center;min-height:48px}
@media (max-width:900px){.dock{display:flex}.foot{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}}

/* cookie bar - unchanged behaviour, new skin */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:100;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px;
  padding:14px var(--gutter) calc(14px + env(safe-area-inset-bottom,0px));
  background:var(--air);border-top:1px solid color-mix(in srgb,var(--ink) 18%,transparent);
  box-shadow:0 -20px 50px -30px rgba(20,14,8,.5);
}
.cookie[hidden]{display:none}
.js .cookie{animation:cookieIn 520ms var(--ease)}
@keyframes cookieIn{from{opacity:0;transform:translate3d(0,100%,0)}}
.cookie p{max-width:62ch;font-size:.9rem;line-height:1.45;color:var(--ink-2)}
.cookie div{display:flex;gap:9px;flex:none}
@media (max-width:560px){.cookie{justify-content:stretch}.cookie p{font-size:.8rem;line-height:1.4}.cookie div{width:100%}.cookie div .btn{flex:1 1 0;min-height:42px;font-size:.9rem}}

/* dialogs */
dialog{max-width:min(94vw,1180px);max-height:92vh;padding:0;border:0;background:var(--air);color:var(--ink);box-shadow:0 60px 120px -30px rgba(20,14,8,.5)}
dialog::backdrop{background:rgba(20,14,8,.76);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog[open]{animation:dlgIn 420ms var(--ease)}
@keyframes dlgIn{from{opacity:0;transform:scale(.97)}}
.lb img{max-width:min(94vw,1180px);max-height:82vh;width:auto;height:auto;margin:0 auto}
.lb figcaption{padding:14px 18px;color:var(--ink-2);font-size:.94rem}
.dlg-close{position:absolute;right:-10px;top:-10px;width:44px;height:44px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);background:var(--air);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.dlg-close svg{width:16px;height:16px}
.card{max-width:min(94vw,440px);padding:clamp(24px,5vw,34px);overflow:visible}
.card-val{margin-top:12px;font:600 clamp(1.1rem,4.6vw,1.4rem)/1.35 var(--f-body);word-break:break-word;-webkit-user-select:all;user-select:all}
.card-acts{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.card-acts .btn{width:100%}
.card-note{margin-top:16px;font-size:.92rem;line-height:1.5;color:var(--ink-2)}
@media (min-width:481px){.card-acts{flex-direction:row;flex-wrap:wrap}.card-acts .btn{width:auto;flex:1 1 auto}}

/* ==========================================================================
   11. MOBILE - the stage unsticks, every step becomes its own screen
   ========================================================================== */
@media (max-width:900px){
  .stage{height:auto}
  .stage-screen{position:relative;height:auto;overflow:visible}
  .steps{position:relative;inset:auto}
  .step{position:relative;inset:auto;min-height:100svh;opacity:1;pointer-events:auto;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
  .step .step-media{transform:none!important;transition:none}
  .step-copy{position:relative;left:auto;right:auto;bottom:auto;padding-bottom:clamp(86px,14vh,120px);padding-top:clamp(40px,10vh,90px)}
  .step-copy>div{padding-left:26px}
  .rail{display:none}
  /* one continuous hand-drawn rail down the left edge of the whole stage */
  .stage::before{content:"";position:absolute;left:calc(var(--gutter) + 3px);top:0;bottom:0;width:2px;
    background:linear-gradient(to bottom,transparent,rgba(255,255,255,.34) 4%,rgba(255,255,255,.34) 96%,transparent);z-index:4;pointer-events:none}
  .step::after{content:"";position:absolute;left:var(--gutter);bottom:clamp(86px,14vh,120px);width:8px;height:8px;border-radius:50%;background:var(--accent);z-index:5;
    box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 28%,transparent)}
  [data-stage="breathe"] .step-copy .step-note,[data-stage="breathe"] .step-copy .step-tags{opacity:1}
}

body.cookie-open .hub-inner{padding-bottom:104px}

/* --- the hub on a phone: three bands, each its own world --- */
@media (max-width:900px){
  .hub{height:auto;min-height:0;overflow:visible}
  .hub-bg{display:none}
  .hub-inner{display:block;padding-top:0}
  .hub-head{padding-top:calc(var(--bar-h) + env(safe-area-inset-top,0px) + 22px);padding-bottom:22px}
  .hub .hub-kicker,.hub.lit .hub-kicker{color:var(--ink-2)}
  .doors{display:block}
  .door{
    position:relative;display:flex;flex-direction:column;justify-content:flex-end;
    min-height:58svh;margin-inline:calc(-1 * var(--gutter));padding:30px var(--gutter) 28px;overflow:hidden;
  }
  .door::before{content:"";position:absolute;inset:0;z-index:0;background:var(--second);background-image:var(--shot);background-size:cover;background-position:center}
  .door::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,13,9,.26),rgba(18,13,9,.78))}
  .door>*{position:relative;z-index:2}
  .door-word,.hub.lit .door-word,.hub.lit .door.on .door-word{color:#fff;transform:none;font-size:clamp(2.6rem,13.5vw,4.6rem)}
  .door-sub,.hub.lit .door.on .door-sub{opacity:1;max-height:none;color:rgba(255,255,255,.92);margin-top:8px}
  .door-go{display:none}
  .hub-foot,.hub.lit .hub-foot{padding-block:28px 10px}
  .hub .hub-voice,.hub.lit .hub-voice{color:var(--ink)}
  .hub .hub-proof,.hub.lit .hub-proof{color:var(--ink-2)}
}

/* ---------- 12. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .js [data-reveal]{-webkit-mask-image:none;mask-image:none}
  .js [data-rise]{opacity:1;transform:none}
  .stage-slide{transform:none!important}
  .hub-shot.on{opacity:1}
  .ink-path{stroke-dashoffset:0}
}

/* ---------- 13. Booking panel (city) ---------- */
.book-panel{display:grid;grid-template-columns:1fr;border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);background:var(--air)}
@media (min-width:820px){.book-panel{grid-template-columns:1fr 1fr}}
.cal{padding:clamp(18px,3vw,30px);border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
@media (min-width:820px){.cal{border-bottom:0;border-right:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-label{font:800 1.15rem/1 var(--f-display);letter-spacing:-.03em}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-dow{padding:6px 0 8px;text-align:center;font:600 .64rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.day{position:relative;display:grid;place-items:center;aspect-ratio:1/1;min-height:40px;border:0;border-radius:2px;background:none;font:500 .95rem/1 var(--f-body);color:var(--ink);cursor:pointer;isolation:isolate}
.day::before{content:"";position:absolute;inset:2px;z-index:-1;background:var(--accent-soft);opacity:0;transition:opacity var(--quick) var(--ease)}
.day:hover::before{opacity:1}
.day:disabled{color:color-mix(in srgb,var(--ink) 28%,transparent);cursor:not-allowed}
.day:disabled::before{display:none}
.day.today{color:var(--accent);font-weight:700}
.day[aria-pressed="true"]{color:#fff;font-weight:700}
.day[aria-pressed="true"]::before{background:var(--accent);opacity:1}
.icon-btn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);background:none;color:var(--ink);cursor:pointer;transition:border-color var(--quick) var(--ease),color var(--quick) var(--ease)}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn:disabled{opacity:.32;cursor:default}
.icon-btn svg{width:17px;height:17px}
.steps-panel{padding:clamp(18px,3vw,30px);display:flex;flex-direction:column;gap:22px}
.how{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.how li{display:flex;align-items:baseline;gap:13px;color:var(--ink-2)}
.how-n{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--accent-line);font:600 .74rem/1 var(--f-body);color:var(--accent);transform:translateY(-2px)}
.guest-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.guest{min-height:52px;border:1.5px solid color-mix(in srgb,var(--ink) 20%,transparent);background:none;font:800 1.15rem/1 var(--f-display);color:var(--ink);cursor:pointer;border-radius:2px;transition:border-color var(--quick) var(--ease),background-color var(--quick) var(--ease),color var(--quick) var(--ease)}
.guest:hover{border-color:var(--accent)}
.guest[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.reveal{animation:revealIn 600ms var(--ease)}
@keyframes revealIn{from{opacity:0;transform:translate3d(0,10px,0)}}
.book-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}
@media (min-width:560px){.book-actions{flex-direction:row;flex-wrap:wrap}}
.micro{margin-top:12px;font-size:.86rem;color:var(--ink-2)}
.contact-row{margin-top:clamp(28px,5vw,52px);text-align:center}
.contact-row .lede{margin-inline:auto}
.contact-links{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:16px}
.faq-list{max-width:900px}

/* ---------- 14. Room thumbnails inside a stage step ---------- */
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.thumb{width:84px;height:58px;padding:0;border:1px solid rgba(255,255,255,.4);background:none;cursor:zoom-in;overflow:hidden;transition:transform var(--quick) var(--ease),border-color var(--quick) var(--ease)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb:hover{transform:translateY(-2px);border-color:#fff}
@media (min-width:860px){.thumb{width:104px;height:70px}}

/* ==========================================================================
   15. THE LANDING
   Phone first. A fast cut of the real city, then a quiet introduction, the
   guests in their own words, the turn, three experiences, one trip.
   Everything here is scoped to body.home, so the experience pages never see it.
   ========================================================================== */
/* no label on the landing is smaller than 12.5px */
.home .eyebrow{font-size:.8rem;line-height:1.3}
.home{--night:#0E0E0E;--hair:color-mix(in srgb,var(--ink) 12%,transparent);--ease-in-out:cubic-bezier(.45,0,.55,1)}

/* --- the bar floats over the opening, then settles on white --- */
.home .bar{transition:background-color 420ms var(--ease),border-color var(--mid) var(--ease),color 420ms var(--ease)}
.home .bar.over{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent;color:#fff}
.home .bar.over .worlds a{color:rgba(255,255,255,.88)}
.home .bar.over .worlds a:hover{color:#fff;background:rgba(255,255,255,.14)}
.home .bar.over .lang{border-color:rgba(255,255,255,.45);color:#fff}

/* ==========================================================================
   15a. The opening
   ========================================================================== */
.lead{position:relative;height:150svh}
.lead-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;background:var(--night);color:#fff}
.lead-fx{position:absolute;inset:0;transform-origin:50% 38%;will-change:transform,opacity}

.mont{position:absolute;inset:0;overflow:hidden;background:var(--night)}
.mont-poster,.mont-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mont-bed{position:absolute;inset:0;z-index:1;isolation:isolate}
.mont-bed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:transform,opacity;
  animation:kb0 2600ms cubic-bezier(.2,.65,.25,1) both}
.mont-bed img[data-kb="1"]{animation-name:kb1}
.mont-bed img[data-kb="2"]{animation-name:kb2}
.mont-bed img[data-kb="3"]{animation-name:kb3}
@keyframes kb0{from{transform:scale(1.15)}to{transform:scale(1.04)}}
@keyframes kb1{from{transform:scale(1.12) translate3d(-2.4%,0,0)}to{transform:scale(1.05) translate3d(.8%,0,0)}}
@keyframes kb2{from{transform:scale(1.03)}to{transform:scale(1.11)}}
@keyframes kb3{from{transform:scale(1.12) translate3d(1.8%,1.2%,0)}to{transform:scale(1.04) translate3d(0,0,0)}}

/* the printed photographs laid on top: a white mat, a slight tilt, nothing else */
.mont-card{position:absolute;z-index:2;isolation:isolate;display:none;background:#fff;border-radius:14px;
  box-shadow:0 30px 60px -22px rgba(0,0,0,.72),0 0 0 1px rgba(0,0,0,.06);
  opacity:0;transform:translate3d(0,28px,0) rotate(var(--r,0deg)) scale(.95);
  transition:opacity 700ms var(--ease),transform 1200ms var(--ease)}
.mont-card.show{opacity:1;transform:translate3d(0,0,0) rotate(var(--r,0deg))}
.mont-card img{position:absolute;left:4px;top:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:cover;border-radius:10px;opacity:0}
/* on a phone the opening is one picture: the printed cards appear on a computer only */

/* one steady veil: dark where the words sit, clear where the pictures speak */
.lead-veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:
  linear-gradient(180deg,rgba(8,6,4,.5) 0%,rgba(8,6,4,0) 20%,rgba(8,6,4,0) 40%,rgba(8,6,4,.5) 64%,rgba(8,6,4,.88) 100%)}

.lead-copy{position:relative;z-index:3;width:100%;padding:0 var(--gutter) calc(34px + env(safe-area-inset-bottom,0px));will-change:transform,opacity}
.lead-kicker{display:flex;align-items:center;gap:12px;margin-bottom:16px;font:600 .8rem/1 var(--f-body);letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.lead-kicker::before{content:"";width:28px;height:2px;background:var(--accent)}
.lead-title{font:800 clamp(3.05rem,15.2vw,5.6rem)/.86 var(--f-display);letter-spacing:-.05em;text-transform:uppercase;color:#fff}
.lead-title .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.lead-title .ln>*{display:block;animation:lineUp 1150ms var(--ease) both}
.lead-title .ln:nth-child(2)>*{animation-delay:90ms}
.lead-title .ln:nth-child(3)>*{animation-delay:190ms}
.lead-title em{font-style:normal;font-size:.56em;letter-spacing:-.035em;color:var(--accent);padding-top:.16em}
@keyframes lineUp{from{transform:translate3d(0,108%,0)}to{transform:none}}
.lead-kicker,.lead-sub{animation:fadeUp 900ms var(--ease) both}
.lead-sub{animation-delay:380ms}
@keyframes fadeUp{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
.lead-sub{margin-top:18px;max-width:29ch;font-size:1.06rem;line-height:1.45;color:rgba(255,255,255,.92)}

/* the cue: a thin line with light running down it */
.lead-cue{position:absolute;z-index:3;right:var(--gutter);bottom:calc(38px + env(safe-area-inset-bottom,0px));width:2px;height:54px;border-radius:2px;background:rgba(255,255,255,.22);overflow:hidden;pointer-events:none}
.lead-cue i{position:absolute;left:0;top:0;width:100%;height:42%;border-radius:2px;background:#fff;animation:cueRun 1.9s var(--ease-in-out) infinite}
@keyframes cueRun{0%{transform:translate3d(0,-100%,0)}70%,100%{transform:translate3d(0,240%,0)}}
body.cookie-open .lead-copy{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
body.cookie-open .lead-cue{opacity:0}

/* short landscape phones: the words shrink so they never run under the bar */
@media (max-height:520px) and (max-width:1100px){
  .lead-title{font-size:clamp(2.2rem,8.4vh + 1rem,3.4rem)}
  .lead-sub{margin-top:10px}
  .mc-people{display:none}
  body.cookie-open .lead-copy{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}

/* the computer: the words sit in the middle, two photographs either side */
@media (min-width:900px){
  .lead-stage{justify-content:center;align-items:center}
  .lead-copy{padding:0 var(--gutter);margin-top:5vh;text-align:center}
  .lead-kicker{justify-content:center}
  .lead-kicker::after{content:"";width:28px;height:2px;background:var(--accent)}
  .lead-title{font-size:clamp(4.2rem,7.1vw,8.2rem);line-height:.88}
  .lead-title .ln{display:inline-block;vertical-align:top}
  .lead-title .ln-em{display:block}
  .lead-sub{margin:22px auto 0;max-width:44ch;font-size:1.18rem}
  .lead-veil{background:
    radial-gradient(62% 44% at 50% 56%,rgba(8,6,4,.62) 0%,rgba(8,6,4,.34) 58%,rgba(8,6,4,0) 100%),
    linear-gradient(180deg,rgba(8,6,4,.5) 0%,rgba(8,6,4,.08) 24%,rgba(8,6,4,.12) 70%,rgba(8,6,4,.6) 100%)}
  .mc-people{display:block;left:clamp(24px,4.6vw,96px);bottom:7vh;width:min(14vw,30vh,300px);aspect-ratio:3/4;--r:-2.6deg}
  .mc-detail{display:block;right:clamp(24px,4.6vw,96px);top:calc(var(--bar-h) + 3vh);width:min(19vw,36vh,400px);aspect-ratio:4/3;--r:2.2deg}
  .lead-cue{right:auto;left:50%;margin-left:-1px;bottom:26px;height:46px}
  body.cookie-open .lead-copy{padding-bottom:0}
}

/* ==========================================================================
   15b. Your guide: a sheet that slides over the opening
   ========================================================================== */
.guide{position:relative;z-index:2;margin-top:-50svh;background:var(--air);border-radius:26px 26px 0 0;
  box-shadow:0 -24px 60px -34px rgba(0,0,0,.55);padding:clamp(46px,8vw,124px) 0 clamp(30px,5vw,70px)}
.guide-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "pics" "text"}
.guide-grid>*{min-width:0}
.guide-head{grid-area:head}
.guide-title{margin-top:14px;font:800 clamp(3.3rem,16.4vw,7.8rem)/.88 var(--f-display);letter-spacing:-.055em}
.guide-pics{grid-area:pics;position:relative;margin-top:28px;aspect-ratio:1/1.02}
.gp{position:absolute;margin:0;padding:clamp(6px,.75vw,10px);background:#fff;border-radius:clamp(16px,1.9vw,26px);
  box-shadow:0 30px 60px -28px rgba(20,14,8,.5),0 0 0 1px rgba(20,14,8,.06);
  transform:translate3d(0,var(--dy,0px),0) rotate(var(--r,0deg));will-change:transform}
.gp img{width:100%;height:100%;object-fit:cover;border-radius:clamp(11px,1.3vw,18px);background:var(--air-2)}
.gp-main{left:0;top:0;width:63%;aspect-ratio:4/5;--r:-2deg;z-index:1}
.gp-side{right:0;top:31%;width:49%;aspect-ratio:4/5;--r:3deg;z-index:2}
.gp-third{display:none}
.guide-text{grid-area:text;margin-top:30px}
.guide-line{font:700 clamp(1.7rem,7.6vw,2.7rem)/1.06 var(--f-display);letter-spacing:-.04em;text-wrap:balance;max-width:15ch}
.guide-body{margin-top:14px;max-width:min(40ch,100%);font-size:1.08rem;line-height:1.55;color:var(--ink-2);overflow-wrap:break-word}
.guide-stats{display:grid;grid-template-columns:1fr 1fr;margin-top:28px;border-top:1px solid var(--hair)}
.guide-stats>div{padding-top:18px;min-width:0}
.guide-stats>div+div{padding-left:18px;border-left:1px solid var(--hair)}
.guide-stats dt{font:600 .78rem/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.guide-stats dd{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:10px 0 0}
.guide-stats b{font:800 clamp(2.7rem,12.4vw,4.4rem)/.86 var(--f-display);letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.guide-stats dd span{font-size:.95rem;line-height:1.3;color:var(--ink-2)}
.gs-stars{display:flex;gap:2px;color:var(--accent)}
.gs-stars svg{width:15px;height:15px}
@media (min-width:900px){
  .guide-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"pics head" "pics text";
    grid-template-rows:auto 1fr;column-gap:clamp(48px,7vw,130px)}
  .guide-head{align-self:end;padding-top:clamp(20px,4vw,60px)}
  .guide-pics{margin-top:0;aspect-ratio:1/1.06}
  .gp-main{top:7%;width:57%}
  .gp-side{top:44%;right:1%;width:45%}
  .gp-third{display:block;right:7%;top:0;width:33%;aspect-ratio:1/1;--r:-3deg;z-index:0}
  .guide-text{margin-top:26px}
}

/* ==========================================================================
   15c. Reviews: a swipe on the phone, three columns on a computer
   ========================================================================== */
.voices{position:relative;z-index:2;background:var(--air);padding:clamp(18px,3vw,40px) 0 clamp(60px,9vw,130px)}
.voices-head{padding-top:26px;border-top:1px solid var(--hair)}
.voices-head .eyebrow{line-height:1.35}
.voices-hint{display:inline-flex;align-items:center;gap:8px;flex:none;font:600 .78rem/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.voices-hint svg{width:16px;height:16px;animation:hintNudge 2.4s var(--ease-in-out) infinite}
@keyframes hintNudge{0%,60%,100%{transform:none}30%{transform:translate3d(5px,0,0)}}
.voices-track{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
  padding:20px var(--gutter) 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.voices-track::-webkit-scrollbar{display:none}
.voices-track:focus-visible{outline-offset:-3px}
.voice{flex:0 0 min(82vw,360px);scroll-snap-align:start;display:flex;flex-direction:column;margin:0;padding:22px 22px 20px;
  border:1px solid var(--hair);border-radius:22px;background:#fff;box-shadow:0 24px 44px -34px rgba(20,14,8,.4)}
.voice-q{display:block;height:.42em;font:800 4.4rem/.8 var(--f-display);color:var(--accent)}
.voice blockquote{flex:1;margin:18px 0 0}
.voice p{font:500 1.1rem/1.45 var(--f-display);letter-spacing:-.012em;color:var(--ink)}
.voice.is-short p{font-size:1.5rem;line-height:1.24;letter-spacing:-.025em}
.voice figcaption{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-top:22px;padding-top:16px;border-top:1px solid var(--hair)}
.voice .st{display:inline-flex;gap:2px;color:var(--accent)}
.voice .st svg{width:14px;height:14px}
.voice cite{font:600 .78rem/1.3 var(--f-body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.voices-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.voices-dots{display:flex;gap:6px}
.voices-dots i{width:16px;height:3px;border-radius:3px;background:color-mix(in srgb,var(--ink) 16%,transparent);transition:width 400ms var(--ease),background-color 400ms var(--ease)}
.voices-dots i.on{width:30px;background:var(--ink)}
@media (min-width:900px){
  .voices-foot{display:none}
  .voices-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);overflow:visible;
    width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto;padding:30px 0 0}
  .voice{padding:30px 28px 26px}
  .voice:nth-child(2){transform:translateY(26px)}
  .voice p{font-size:1.18rem}
}

/* ==========================================================================
   15d. The turn: three ways, as an index you can tap
   ========================================================================== */
.ways{position:relative;z-index:2;background:var(--night);color:#fff;padding:clamp(64px,11vw,160px) 0 clamp(52px,8vw,120px)}
.ways-title{font:800 clamp(2.35rem,10.6vw,6.8rem)/.9 var(--f-display);letter-spacing:-.052em;text-transform:uppercase;text-wrap:balance}
.ways-title span{display:block}
.ways-title span:first-child{color:rgba(255,255,255,.46)}
.ways-list{margin-top:clamp(32px,6vw,72px);border-top:1px solid rgba(255,255,255,.16)}
.ways-list li{border-bottom:1px solid rgba(255,255,255,.16)}
.ways-list a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:78px;padding:10px 0;color:#fff;text-decoration:none}
.w-n{align-self:center;font:700 .78rem/1 var(--f-display);letter-spacing:.06em;color:var(--accent)}
.w-word{font:800 clamp(2.1rem,9.6vw,6.6rem)/1 var(--f-display);letter-spacing:-.05em;text-transform:uppercase;transition:transform 700ms var(--ease),color 400ms var(--ease)}
.w-pic{display:block;width:clamp(74px,21vw,190px);aspect-ratio:3/2;overflow:hidden;border-radius:999px;background:#222}
.w-pic img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
.w-go{display:none;width:24px;height:24px;color:rgba(255,255,255,.55);transition:transform 600ms var(--ease),color 400ms var(--ease)}
.ways-list a:hover .w-word{color:var(--accent);transform:translate3d(10px,0,0)}
.ways-list a:hover .w-pic img{transform:scale(1.1)}
.ways-list a:hover .w-go{color:#fff;transform:translate3d(0,4px,0)}
.ways-sub{margin-top:clamp(24px,4vw,44px);max-width:26ch;font:600 clamp(1.25rem,5vw,1.9rem)/1.2 var(--f-display);letter-spacing:-.03em;color:rgba(255,255,255,.82)}
@media (min-width:900px){
  .ways-list a{grid-template-columns:70px minmax(0,1fr) auto auto;gap:24px;min-height:clamp(110px,10vw,150px)}
  .w-go{display:block}
}

/* ==========================================================================
   15e. The three experiences. One system, three characters:
   City cuts fast, Mountains moves slower than the page, Stay breathes.
   ========================================================================== */
.xp{position:relative;z-index:2;background:var(--air)}
.xp-head{display:flex;align-items:center;gap:12px;font:600 .8rem/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.xp-n{font:800 .95rem/1 var(--f-display);letter-spacing:0;color:var(--accent)}
.xp-rule{flex:0 0 34px;height:1px;background:currentColor;opacity:.45}
.xp-title{font:800 clamp(4.6rem,25vw,12rem)/.8 var(--f-display);letter-spacing:-.065em;text-transform:uppercase}
/* a longer word (the Russian ones are) may never push the page sideways */
.xp-grid{grid-template-columns:minmax(0,1fr)}
.xp-grid>*,.mt-over>*{min-width:0}
.xp-line{max-width:34ch;font-size:1.1rem;line-height:1.5;color:var(--ink-2)}
.xp-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-width:min(100%,250px);min-height:58px;padding:0 22px 0 26px;
  border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font:700 .86rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;
  transition:background-color 350ms var(--ease),color 350ms var(--ease),transform 700ms var(--ease)}
.xp-cta svg{width:19px;height:19px;flex:none;transition:transform 600ms var(--ease)}
.xp-cta:hover{background:var(--accent)}
.xp-cta:hover svg{transform:translate3d(5px,0,0)}
.xp-cta.on-dark{background:#fff;color:var(--ink)}
.xp-cta.on-dark:hover{background:var(--accent);color:#fff}

/* a changing frame: pictures cross over one another and drift a little */
.xp-media img,.mt-frames img,.xp-pair img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:transform,opacity;
  animation:kbs0 3400ms cubic-bezier(.25,.6,.3,1) both}
.xp-media img[data-kb="1"],.mt-frames img[data-kb="1"]{animation-name:kbs1}
@keyframes kbs0{from{transform:scale(1.1)}to{transform:scale(1.02)}}
@keyframes kbs1{from{transform:scale(1.02)}to{transform:scale(1.09)}}
.xp-pair img{animation:breathe 4200ms var(--ease-in-out) both}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.06)}}

/* --- City: the photograph runs off the right edge; the name is cut into its corner --- */
.xp-city{padding:clamp(64px,10vw,150px) 0 clamp(44px,7vw,110px)}
.xp-city .xp-grid{display:grid;grid-template-areas:"head" "media" "body"}
.xp-city .xp-head{grid-area:head;margin-bottom:18px}
.xp-media{grid-area:media;position:relative;z-index:0;isolation:isolate;display:block;overflow:hidden;aspect-ratio:4/5;margin-right:calc((min(100vw - 2 * var(--gutter),var(--maxw)) - 100vw) / 2);
  border-radius:24px 0 0 24px;background:var(--air-2)}
.xp-city .xp-body{grid-area:body;position:relative;z-index:1}
.xp-city .xp-title{display:inline-flex;align-items:flex-end;gap:.16em;margin-top:-.5em;padding:.1em .14em 0 0;
  background:var(--air);border-top-right-radius:24px}
.xp-title small{display:block;margin-bottom:.32em;font:700 .8rem/1 var(--f-body);letter-spacing:.24em;color:var(--accent);
  writing-mode:vertical-rl;transform:rotate(180deg)}
.xp-city .xp-line{margin-top:16px}
.xp-city .xp-cta{margin-top:24px}

/* --- Mountains: one wide moment --- */
.xp-mt{background:var(--night)}
.mt-stage{position:relative;display:flex;align-items:flex-end;min-height:clamp(540px,84svh,760px);overflow:hidden;isolation:isolate;color:#fff}
.mt-bg{position:absolute;left:0;right:0;top:-12%;bottom:-12%;z-index:-2;will-change:transform}
.mt-frames{position:absolute;inset:0;background:#1d2622;isolation:isolate}
.mt-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,10,8,.42) 0%,rgba(6,10,8,0) 26%,rgba(6,10,8,.1) 46%,rgba(6,10,8,.84) 100%)}
.mt-over{padding:clamp(80px,14vw,140px) 0 clamp(32px,6vw,76px)}
.xp-mt .xp-head{color:rgba(255,255,255,.86)}
.xp-mt .xp-n{color:#fff}
.xp-mt .xp-rule{background:var(--accent);opacity:1}
.xp-mt .xp-title{margin-top:16px;font-size:clamp(3.3rem,16.4vw,13.5rem);color:#fff}
.route{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 0;margin-top:18px;font:600 clamp(1.05rem,4.6vw,1.35rem)/1.2 var(--f-display);letter-spacing:-.015em}
.route li{display:inline-flex;align-items:baseline;white-space:nowrap}
.route li+li::before{content:"";flex:none;align-self:center;width:clamp(18px,4vw,40px);height:2px;margin:0 .55em;border-radius:2px;background:var(--accent)}
.xp-mt .xp-cta{margin-top:28px}

/* --- Stay: a pair of frames that take turns --- */
.xp-stay{padding:clamp(76px,11vw,170px) 0 clamp(64px,10vw,150px)}
.xp-stay .xp-grid{display:grid;grid-template-areas:"head" "pair" "body"}
.xp-stay .xp-head{grid-area:head}
.xp-pair{grid-area:pair;display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);align-items:start;gap:12px;margin-top:20px}
.xp-pair>span{position:relative;isolation:isolate;display:block;overflow:hidden;border-radius:22px;background:var(--air-2)}
.pa{aspect-ratio:4/5}
.pb{aspect-ratio:3/4;margin-top:34%}
.xp-stay .xp-body{grid-area:body;margin-top:26px}
.xp-stay .xp-line{margin-top:16px}
.xp-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.xp-facts li{padding:9px 15px;border:1px solid var(--hair);border-radius:999px;font:600 .8rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.xp-stay .xp-cta{margin-top:26px}

@media (min-width:900px){
  .xp-city .xp-grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto;column-gap:clamp(16px,1.8vw,28px);grid-template-areas:none}
  .xp-city .xp-head{grid-area:1/1/2/6;margin:0;align-self:start}
  .xp-media{grid-area:1/6/4/13;aspect-ratio:3/2;border-radius:30px 0 0 30px}
  .xp-city .xp-body{grid-area:3/1/4/6;align-self:end}
  .xp-city .xp-title{margin:0;padding:.08em .18em 0 0;font-size:clamp(6.4rem,14vw,15rem);border-top-right-radius:30px}
  .xp-city .xp-line{margin-top:20px}

  .mt-stage{min-height:min(90vh,840px)}
  .mt-over{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head head" "title title" "route cta";align-items:end;column-gap:40px}
  .xp-mt .xp-head{grid-area:head}
  .xp-mt .xp-title{grid-area:title}
  .route{grid-area:route;margin-top:26px}
  .xp-mt .xp-cta{grid-area:cta;margin-top:0}

  .xp-stay .xp-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto 1fr;grid-template-areas:"pair head" "pair body";column-gap:clamp(40px,6vw,110px)}
  .xp-stay .xp-head{align-self:start;padding-top:8px}
  .xp-pair{margin-top:0;gap:clamp(14px,1.6vw,22px)}
  .xp-stay .xp-body{align-self:end;margin-top:0}
  .xp-stay .xp-title{font-size:clamp(7rem,13vw,13rem)}
}

@media (min-width:1200px){
  .xp-media{grid-area:1/4/4/13}
  .xp-city .xp-body{grid-area:3/1/4/4}
}

@media (max-width:899px){
  .xp-media{margin-right:0;border-radius:24px}
}

@media (min-width:600px) and (max-width:899px){
  .guide-pics{width:min(100%,560px);aspect-ratio:1/1.02}
  .guide-text{max-width:560px}
  .xp-media{aspect-ratio:4/3}
  .xp-pair{max-width:620px}
  .mt-stage{min-height:min(76svh,720px)}
  .voice{flex-basis:min(62vw,400px)}
}

/* ==========================================================================
   15f. One trip
   ========================================================================== */
.trip{position:relative;z-index:2;overflow:hidden;background:var(--accent);color:#fff;padding:clamp(72px,12vw,170px) 0 clamp(64px,10vw,150px)}
.trip-star{position:absolute;right:-24vw;top:-14vw;width:86vw;height:86vw;max-width:900px;max-height:900px;color:rgba(255,255,255,.09);pointer-events:none}
.trip-in{position:relative}
.trip-title{font:800 clamp(3.7rem,18vw,12.5rem)/.84 var(--f-display);letter-spacing:-.06em;text-transform:uppercase}
.trip-title span{display:block}
.trip-title span:last-child{color:var(--night)}
.trip-mix{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:24px;font:700 .8rem/1 var(--f-body);letter-spacing:.22em;text-transform:uppercase}
.trip-mix i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7}
.trip-copy{margin-top:clamp(30px,5vw,48px);max-width:27rem}
.trip-ask{font:700 clamp(1.5rem,6vw,2.2rem)/1.12 var(--f-display);letter-spacing:-.035em}
.trip-body{margin-top:12px;font-size:1.14rem;line-height:1.5;color:#fff}
.trip-btn{display:flex;align-items:center;gap:14px;width:100%;max-width:440px;min-height:66px;margin-top:30px;padding:0 24px;border-radius:999px;
  background:#fff;color:var(--night);text-decoration:none;font:700 1rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 24px 50px -24px rgba(70,18,4,.7);transition:transform 700ms var(--ease),background-color 350ms var(--ease),color 350ms var(--ease)}
.trip-btn span{flex:1}
.tb-wa{width:26px;height:26px;flex:none;color:#1FA855}
.tb-go{width:22px;height:22px;flex:none;transition:transform 600ms var(--ease)}
.trip-btn:hover{background:var(--night);color:#fff;transform:translate3d(0,-2px,0)}
.trip-btn:hover .tb-go{transform:translate3d(5px,0,0)}
@media (min-width:900px){
  .trip-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"title title" "mix copy" ". btn";column-gap:clamp(40px,6vw,110px);align-items:start}
  .trip-title{grid-area:title;font-size:clamp(6rem,11.6vw,13rem)}
  .trip-mix{grid-area:mix;margin-top:clamp(40px,4vw,60px)}
  .trip-copy{grid-area:copy;margin-top:clamp(34px,3.4vw,52px);max-width:30rem}
  .trip-btn{grid-area:btn}
}

/* ==========================================================================
   15g. Footer: the contacts, nothing else to read
   ========================================================================== */
.foot-home{padding:clamp(48px,7vw,96px) 0 calc(30px + env(safe-area-inset-bottom,0px))}
.fh-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 24px}
.foot-home .foot-worlds{margin-top:0}
.fh-contacts{display:grid;grid-template-columns:1fr;margin-top:clamp(28px,4vw,48px);border-top:1px solid color-mix(in srgb,var(--air) 15%,transparent)}
.fh-contacts a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;border-bottom:1px solid color-mix(in srgb,var(--air) 15%,transparent);
  color:var(--air);text-decoration:none;font:700 clamp(1.35rem,5.8vw,1.9rem)/1 var(--f-display);letter-spacing:-.03em;transition:color 300ms var(--ease)}
.fh-contacts svg{width:20px;height:20px;flex:none;color:color-mix(in srgb,var(--air) 45%,transparent);transition:transform 500ms var(--ease),color 300ms var(--ease)}
.fh-contacts a:hover{color:var(--accent)}
.fh-contacts a:hover svg{color:var(--accent);transform:translate3d(3px,-3px,0)}
@media (min-width:700px){.fh-contacts{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px}}
@media (min-width:1100px){.fh-contacts{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:28px}}
.foot-home .foot-privacy{margin-top:26px;border-top:0;padding-top:0}

/* ---------- reduced motion on the landing ---------- */
@media (prefers-reduced-motion:reduce){
  .lead{height:auto}
  .lead-stage{position:relative}
  .guide{margin-top:0;border-radius:0}
  .mont-bed img,.xp-media img,.mt-frames img,.xp-pair img{animation:none}
  .mont-card{opacity:1;transform:rotate(var(--r,0deg))}
  .gp,.mt-bg{transform:none!important}
  .lead-title .ln>*,.lead-kicker,.lead-sub{animation:none}
}

/* ==========================================================================
   16. THE CITY PAGE
   The next chapter of the landing: same type, same white, same terracotta,
   but its own shapes. The old city is an arch, the imperial city a wide frame,
   the Soviet city a porthole. Phone first; everything is scoped to .cityp.
   ========================================================================== */
.cityp{
  --hair:color-mix(in srgb,var(--ink) 12%,transparent);
  --night:#0E0F12;
  --imp:#C4622D; --sov:#7C97E8; --old:#1C8B90;
  --arch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V34C0 15 24 6 50 0C76 6 100 15 100 34V100Z'/%3E%3C/svg%3E");
  --ease-in-out:cubic-bezier(.45,0,.55,1);
}
.cityp .is-arch{-webkit-mask:var(--arch) center/100% 100% no-repeat;mask:var(--arch) center/100% 100% no-repeat}
.cityp .is-circle{border-radius:50%}

.c-kicker{display:flex;align-items:center;gap:10px;font:600 .8rem/1.3 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.c-kicker::before{content:"";flex:none;width:22px;height:2px;background:currentColor}
.c-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-width:min(100%,240px);min-height:58px;padding:0 22px 0 26px;
  border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font:700 .86rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;
  transition:background-color 350ms var(--ease),color 350ms var(--ease),transform 700ms var(--ease)}
.c-btn svg{width:19px;height:19px;flex:none;transition:transform 600ms var(--ease)}
.c-btn:hover{background:var(--accent);color:#fff}
.c-btn:hover svg:last-child{transform:translate3d(4px,0,0)}
.c-btn-light{background:#fff;color:var(--ink)}
.c-btn-light:hover{background:var(--accent);color:#fff}

/* ==========================================================================
   16a. Tashkent, up close
   ========================================================================== */
.c-hero{position:relative;overflow:hidden;background:var(--air);
  padding:calc(var(--bar-h) + env(safe-area-inset-top,0px) + 16px) 0 26px}
.c-hero-facts{display:flex;align-items:center;flex-wrap:wrap;gap:8px 11px;padding:0 var(--gutter);
  font:600 .78rem/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);animation:fadeUp 800ms var(--ease) both}
.c-hero-facts i{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.c-hero-stage{--fs:clamp(3.2rem,16.2vw,6.2rem);--top:.98;--bot:.42;
  position:relative;height:clamp(400px,calc(100svh - 300px),690px);margin-top:16px}
.c-hero-title{position:absolute;inset:0 var(--gutter);z-index:3;display:flex;flex-direction:column;justify-content:space-between;
  font:800 var(--fs)/.84 var(--f-display);letter-spacing:-.055em;text-transform:uppercase;color:var(--ink);pointer-events:none}
.c-hero-title .ln{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
.c-hero-title .ln>span{display:block;animation:lineUp 1150ms var(--ease) both}
.c-hero-title .ln-2{text-align:right}
.c-hero-title .ln-2>span{animation-delay:130ms}
.c-arch{position:absolute;left:var(--gutter);right:var(--gutter);top:calc(var(--fs) * var(--top));bottom:calc(var(--fs) * var(--bot));z-index:2;
  -webkit-mask:var(--arch) center/100% 100% no-repeat;mask:var(--arch) center/100% 100% no-repeat;background:#2a2622;
  animation:archIn 1400ms var(--ease) both}
@keyframes archIn{from{opacity:0;transform:translate3d(0,26px,0) scale(.97)}to{opacity:1;transform:none}}
.c-arch-pics{position:absolute;inset:0;isolation:isolate}
.c-arch-pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:transform,opacity;
  animation:archKb 5200ms cubic-bezier(.25,.6,.3,1) both}
.c-arch-pics img:first-child{opacity:1}
@keyframes archKb{from{transform:scale(1.16)}to{transform:scale(1.03)}}
.c-arch::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,8,6,.42) 0%,rgba(10,8,6,0) 30%,rgba(10,8,6,0) 64%,rgba(10,8,6,.5) 100%)}
/* the white copy of the headline lives inside the arch; JS lines it up with the dark one */
.c-hero-ghost{display:none;inset:auto;left:calc(-1 * var(--ax,0px));top:calc(-1 * var(--ay,0px));width:var(--aw,100%);height:var(--ah,100%);color:#fff;z-index:3}
.c-hero.aligned .c-hero-ghost{display:flex}
.c-hero.aligned .c-hero-title:not(.c-hero-ghost){z-index:1}
.c-hero-foot{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:0 var(--gutter);margin-top:20px}
.c-hero-sub{max-width:31ch;font-size:1.08rem;line-height:1.45;color:var(--ink-2);animation:fadeUp 900ms var(--ease) 380ms both}
.c-hero-foot .c-btn{animation:fadeUp 900ms var(--ease) 480ms both}
.c-hero-foot .c-btn svg{animation:hintDown 2.2s var(--ease-in-out) infinite}
@keyframes hintDown{0%,60%,100%{transform:none}30%{transform:translate3d(0,4px,0)}}
body.cookie-open .c-hero{padding-bottom:150px}

@media (min-width:900px){
  .c-hero{padding:calc(var(--bar-h) + 22px) 0 34px}
  .c-hero-stage{--fs:clamp(6rem,12.6vw,15.5rem);--top:0;--bot:0;height:calc(100vh - var(--bar-h) - 190px);min-height:520px;margin-top:20px}
  .c-hero-title{justify-content:space-between}
  .c-arch{--aw2:min(31vw,calc((100vh - var(--bar-h) - 190px) * .66));left:calc(50% - var(--aw2) / 2);right:auto;top:0;bottom:0;width:var(--aw2)}
  .c-hero-foot{flex-direction:row;align-items:flex-end;justify-content:space-between;margin-top:26px}
  .c-hero-sub{font-size:1.2rem;max-width:34ch}
  body.cookie-open .c-hero{padding-bottom:34px}
}

/* ==========================================================================
   16b. Three sides of Tashkent
   ========================================================================== */
.c-sides{position:relative;overflow-x:clip;background:var(--air);padding:clamp(70px,12vw,170px) 0 clamp(64px,10vw,150px)}
.c-sides-title{font:800 clamp(2.7rem,12.6vw,8rem)/.88 var(--f-display);letter-spacing:-.055em;text-transform:uppercase}
.c-sides-title span{color:color-mix(in srgb,var(--ink) 38%,transparent)}
.c-sides-lede{margin-top:20px;max-width:38ch;font-size:1.08rem;line-height:1.5;color:var(--ink-2)}
.c-sides-list{display:grid;gap:clamp(48px,8vw,110px);margin-top:clamp(44px,7vw,100px)}
.c-side{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:end;gap:18px}
.c-side-pic{position:relative;margin:0;overflow:hidden;background:var(--air-2);transform:translate3d(0,var(--dy,0px),0)}
.c-side-pic img{width:100%;height:100%;object-fit:cover;transition:transform 1400ms var(--ease)}
.c-side:hover .c-side-pic img{transform:scale(1.05)}
.c-side-name{font:800 clamp(2.5rem,11.6vw,8.4rem)/.86 var(--f-display);letter-spacing:-.055em;text-transform:uppercase}
.c-side-places{margin-top:14px;font:700 .8rem/1.45 var(--f-body);letter-spacing:.14em;text-transform:uppercase}
.c-side.is-old .c-side-pic{aspect-ratio:3/4.3}
.c-side.is-old .c-side-places{color:var(--old)}
.c-side.is-old .c-side-name{max-width:5ch}
/* imperial: a wide frame across the whole screen, the name printed on it */
.c-side.is-imperial{grid-template-columns:minmax(0,1fr);grid-template-areas:"pic" "name" "places";align-items:stretch;gap:0}
.c-side.is-imperial .c-side-pic{grid-area:pic;aspect-ratio:16/10;margin-inline:calc(-1 * var(--gutter))}
.c-side.is-imperial .c-side-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,6,0) 34%,rgba(10,8,6,.6));opacity:0}
.c-side.is-imperial .c-side-txt{display:contents}
.c-side.is-imperial .c-side-name{grid-area:name;margin-top:20px;overflow-wrap:break-word}
.c-side.is-imperial .c-side-places{grid-area:places;margin-top:18px;color:var(--imp)}
/* soviet: the porthole sits right and runs off the edge */
.c-side.is-soviet{grid-template-columns:minmax(0,1fr)}
.c-side.is-soviet .c-side-txt{order:-1;position:relative;z-index:2}
.c-side.is-soviet .c-side-pic{aspect-ratio:1;width:72%;margin:-8px calc(-1 * var(--gutter)) 0 auto}
.c-side.is-soviet .c-side-places{color:#4D67C9}
@media (min-width:900px){
  .c-sides-head{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:end;column-gap:60px}
  .c-sides-title{font-size:clamp(4rem,7.2vw,8rem)}
  .c-side-name br{display:none}
  .c-side.is-old .c-side-name{max-width:none}
  .c-side.is-soviet .c-side-name br{display:inline}
  .c-side-name{font-size:clamp(4.4rem,9vw,9.6rem)}
  .c-sides-lede{margin:0 0 .5em;justify-self:end}
  .c-side{grid-template-columns:minmax(0,24vw) minmax(0,1fr);gap:clamp(30px,4vw,70px)}
  .c-side.is-old .c-side-pic{max-height:72vh}
  .c-side.is-old .c-side-txt{padding-bottom:2vw}
  .c-side.is-imperial{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"pic pic"}
  .c-side.is-imperial .c-side-pic::after{opacity:1}
  .c-side.is-imperial .c-side-pic{grid-column:1/-1;aspect-ratio:21/8;margin-inline:0;border-radius:4px}
  .c-side.is-imperial .c-side-name{grid-area:1/1;align-self:end;position:relative;z-index:2;margin:0;padding:0 0 .06em .3em;color:#fff}
  .c-side.is-imperial .c-side-places{grid-area:1/2;align-self:end;position:relative;z-index:2;margin:0 1.6rem 1.6rem 0;color:#fff;font-size:.82rem;text-align:right}
  .c-side.is-soviet{grid-template-columns:minmax(0,1fr) minmax(0,24vw)}
  .c-side.is-soviet .c-side-pic{margin:0}
  .c-side.is-soviet .c-side-txt{text-align:right}
  .c-side.is-soviet .c-side-pic{margin-right:0;width:100%}
}

/* ==========================================================================
   16c. The route. The section changes its light as the city changes its age:
   daylight for the empire, the dark of the metro for the Soviet city,
   daylight again for the old town.
   ========================================================================== */
.c-route{position:relative;background:var(--air);color:var(--ink);--era-c:var(--accent);--line:var(--hair);--sub:var(--ink-2);
  padding:clamp(70px,11vw,160px) 0 clamp(30px,6vw,90px);transition:background-color 800ms var(--ease),color 800ms var(--ease)}
.c-route[data-era="imperial"]{--era-c:var(--imp)}
.c-route[data-era="old"],.c-route[data-era="end"]{--era-c:var(--old)}
.c-route[data-era="soviet"]{background:var(--night);color:#F1F2F5;--era-c:var(--sov);--line:rgba(255,255,255,.14);--sub:rgba(241,242,245,.66)}
.c-route-title{margin-top:16px;max-width:15ch;font:800 clamp(2.2rem,9.6vw,6rem)/.94 var(--f-display);letter-spacing:-.05em;text-wrap:balance}
.c-route-note{margin-top:16px;max-width:40ch;font-size:1.06rem;line-height:1.5;color:var(--sub);transition:color 800ms var(--ease)}
.c-route-grid{margin-top:clamp(30px,6vw,70px)}

/* a stop, on a phone: where you are, what it is, how long, what comes next */
.c-stop{position:relative;padding:30px 0 46px;border-top:1px solid var(--line);transition:border-color 800ms var(--ease)}
.c-stop-n{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font:800 1.15rem/1 var(--f-display);letter-spacing:-.01em}
.c-stop-n i{font-style:normal;color:var(--sub);font-weight:600;margin-left:.2em}
.c-stop-era{font:700 .76rem/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--era-c)}
.c-stop[data-era="imperial"]{--era-c:var(--imp)}
.c-stop[data-era="soviet"]{--era-c:var(--sov)}
.c-stop[data-era="old"]{--era-c:var(--old)}
.c-stop-title{margin-top:14px;font:800 clamp(2.15rem,10.4vw,4.4rem)/.92 var(--f-display);letter-spacing:-.045em;text-transform:uppercase;text-wrap:balance}
.c-stop-pic{position:relative;margin:20px calc(-1 * var(--gutter)) 0;aspect-ratio:4/5;overflow:hidden;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.c-stop-pic img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1600ms var(--ease)}
.c-stop.is-on .c-stop-pic img{transform:scale(1)}
.c-stop-note{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:18px;font:600 1.08rem/1.35 var(--f-body)}
.c-stop-min{flex:none;font:800 1.15rem/1 var(--f-display);text-transform:uppercase;color:var(--era-c)}
.c-stop-next{display:flex;align-items:baseline;gap:10px;margin-top:10px;font-size:.98rem;color:var(--sub)}
.c-stop-next span{flex:none;font:700 .74rem/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--era-c)}
.c-stop-next span::after{content:" →"}
.c-stop.is-edge .c-stop-title{font-size:clamp(1.9rem,8.6vw,3.6rem)}
.c-stop.is-edge .c-stop-pic{aspect-ratio:5/4}

/* an age of the city opening: its name, its shape, one line about it */
.c-era{position:relative;padding:clamp(64px,14vw,120px) 0 clamp(54px,10vw,90px);border-top:1px solid var(--line)}
.c-era-part{font:700 .78rem/1 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--era-c)}
.c-era[data-era="imperial"]{--era-c:var(--imp)}
.c-era[data-era="soviet"]{--era-c:var(--sov)}
.c-era[data-era="old"]{--era-c:var(--old)}
.c-era-name{margin-top:14px;font:800 clamp(3rem,15vw,9rem)/.84 var(--f-display);letter-spacing:-.06em;text-transform:uppercase;text-wrap:balance}
.c-era-pic{margin:26px 0 0;overflow:hidden;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.c-era-pic img{width:100%;height:100%;object-fit:cover}
.c-era-pic.is-arch{width:62%;aspect-ratio:3/4.2}
.c-era-pic.is-circle{width:72%;aspect-ratio:1;margin-left:auto}
.c-era-pic.is-rect{aspect-ratio:2/1;margin-inline:calc(-1 * var(--gutter))}
.c-era-desc{margin-top:22px;max-width:34ch;font:500 clamp(1.15rem,4.8vw,1.5rem)/1.35 var(--f-display);letter-spacing:-.015em;color:var(--sub)}

/* the thin bar that keeps count on a phone */
.c-prog{position:fixed;left:0;right:0;top:calc(var(--bar-h) + env(safe-area-inset-top,0px));z-index:70;display:flex;flex-direction:column;gap:7px;
  padding:9px var(--gutter) 10px;background:color-mix(in srgb,var(--air) 94%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);opacity:0;transform:translate3d(0,-120%,0);transition:transform 450ms var(--ease),opacity 300ms var(--ease),background-color 800ms var(--ease),color 800ms var(--ease);pointer-events:none}
.c-route.prog-on .c-prog{transform:none;opacity:1}
.c-route[data-era="soviet"] .c-prog{background:rgba(14,15,18,.92);border-bottom-color:rgba(255,255,255,.1)}
.c-prog-txt{display:flex;align-items:baseline;gap:10px;min-width:0;font:600 .9rem/1.2 var(--f-body)}
.c-prog-n{flex:none;font:800 .95rem/1 var(--f-display);color:var(--era-c)}
.c-prog-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-prog-bar{display:grid;grid-template-columns:repeat(9,1fr);gap:3px}
.c-prog-bar i{height:3px;border-radius:2px;background:color-mix(in srgb,currentColor 18%,transparent);transition:background-color 400ms var(--ease)}
.c-prog-bar i.done[data-era="imperial"]{background:var(--imp)}
.c-prog-bar i.done[data-era="soviet"]{background:var(--sov)}
.c-prog-bar i.done[data-era="old"]{background:var(--old)}
.c-panel{display:none}

/* the computer: the list on the left, one photograph that changes on the right */
@media (min-width:1000px){
  .c-prog{display:none}
  .c-route-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(40px,5vw,96px);align-items:start}
  .c-track{position:relative;padding-left:58px}
  .c-track::before{content:"";position:absolute;left:14px;top:0;bottom:0;width:2px;background:var(--line);transition:background-color 800ms var(--ease)}
  .c-track::after{content:"";position:absolute;left:14px;top:0;bottom:0;width:2px;background:var(--era-c);transform-origin:50% 0;transform:scaleY(var(--prog,0));
    transition:transform 700ms var(--ease),background-color 800ms var(--ease)}
  .c-stop,.c-era{min-height:58vh;display:flex;flex-direction:column;justify-content:center;border:0;padding:24px 0;opacity:.26;transition:opacity 600ms var(--ease)}
  .c-stop.is-on,.c-era.is-on{opacity:1}
  .c-stop::before,.c-era::before{content:"";position:absolute;left:-51px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;
    background:var(--air);border:2px solid var(--line);transition:background-color 500ms var(--ease),border-color 500ms var(--ease),transform 500ms var(--ease)}
  .c-route[data-era="soviet"] .c-stop::before,.c-route[data-era="soviet"] .c-era::before{background:var(--night)}
  .c-stop.is-past::before,.c-stop.is-on::before,.c-era.is-past::before,.c-era.is-on::before{background:var(--era-c);border-color:var(--era-c)}
  .c-stop.is-on::before,.c-era.is-on::before{transform:scale(1.5)}
  .c-stop-pic,.c-era-pic{display:none}
  .c-stop-title{font-size:clamp(2.4rem,3.7vw,4.2rem)}
  .c-stop-note{justify-content:flex-start;gap:22px}
  .c-era-name{font-size:clamp(3.6rem,6.4vw,7.4rem)}
  .c-panel{display:block;position:sticky;top:calc(var(--bar-h) + 4vh);height:calc(100vh - var(--bar-h) - 8vh);overflow:hidden;border-radius:26px;background:#1b1a19;color:#fff;isolation:isolate}
  .c-panel-pics{position:absolute;inset:0;z-index:-1}
  .c-panel-pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:transform,opacity;animation:archKb 6000ms cubic-bezier(.25,.6,.3,1) both}
  .c-panel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,6,4,.48) 0%,rgba(8,6,4,0) 26%,rgba(8,6,4,0) 64%,rgba(8,6,4,.62) 100%)}
  .c-panel-n{position:absolute;left:28px;top:24px;display:flex;align-items:baseline;gap:10px;font:800 clamp(3.2rem,5vw,5.6rem)/1 var(--f-display);letter-spacing:-.05em}
  .c-panel-n span{font-size:.34em;letter-spacing:0;opacity:.7}
  .c-panel-era{position:absolute;right:24px;top:30px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    font:700 .74rem/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase}
  .c-panel-era:empty{display:none}
  .c-panel-next{position:absolute;left:28px;right:28px;bottom:26px;display:flex;align-items:baseline;gap:12px;font:600 1.05rem/1.3 var(--f-body)}
  .c-panel-next span{font:700 .74rem/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;opacity:.75}
  .c-panel-next span::after{content:" →"}
  .c-panel-next b:empty{display:none}
  .c-panel-next:has(b:empty){display:none}
}

@media (min-width:600px) and (max-width:999px){
  .c-stop-pic,.c-era-pic.is-rect{margin-inline:0;max-width:600px;border-radius:6px}
  .c-stop-pic{aspect-ratio:5/4}
  .c-era-pic.is-arch{width:min(62%,380px)}
  .c-era-pic.is-circle{width:min(72%,420px)}
  .c-hero-stage{height:clamp(480px,calc(100svh - 330px),760px)}
  .c-arch{--aw2:min(68vw,560px);left:calc(50% - var(--aw2) / 2);right:auto;width:var(--aw2)}
  .c-guide-pic{width:min(86%,520px)}
}

/* ==========================================================================
   16d. Photo story: a strip you swipe on the phone, and that the page
   carries sideways on a computer
   ========================================================================== */
.c-story{position:relative;background:var(--air);padding:clamp(70px,10vw,140px) 0 clamp(44px,8vw,100px)}
.c-story-title{margin-top:14px;font:800 clamp(2.4rem,10.4vw,6.4rem)/.9 var(--f-display);letter-spacing:-.05em;text-transform:uppercase;max-width:14ch}
.c-story-track{display:flex;align-items:center;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
  padding:28px var(--gutter) 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.c-story-track::-webkit-scrollbar{display:none}
.c-shot{flex:none;margin:0;scroll-snap-align:start}
.c-shot img{display:block;width:100%;height:auto;background:var(--air-2);border-radius:3px}
.c-shot.is-t{width:min(72vw,420px)}
.c-shot.is-s{width:min(80vw,460px)}
.c-shot.is-w{width:min(88vw,620px)}
.c-shot figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:12px;font-size:.95rem;line-height:1.35;color:var(--ink-2)}
.c-shot figcaption b{font:700 .72rem/1.3 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
@media (min-width:1000px){
  .c-story.pinned{padding:0}
  .c-story.pinned .c-story-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-top:var(--bar-h)}
  .c-story.pinned .c-story-track{overflow:visible;scroll-snap-type:none;padding-top:clamp(20px,3vh,36px);gap:clamp(18px,2vw,32px);will-change:transform}
  .c-story.pinned .c-shot{width:auto}
  .c-story.pinned .c-shot img{height:min(56vh,600px);width:auto}
  .c-story.pinned .c-shot.is-t img{height:min(62vh,660px)}
  .c-story.pinned .c-shot.is-s img{height:min(48vh,520px)}
}

/* ==========================================================================
   16e. Reviews
   ========================================================================== */
.c-revs{background:var(--air);padding:clamp(60px,9vw,140px) 0 clamp(64px,10vw,150px);border-top:1px solid var(--hair)}
.c-score-big{margin-top:10px;font:800 clamp(7rem,40vw,17rem)/.8 var(--f-display);letter-spacing:-.07em}
.c-score-st{display:flex;align-items:center;gap:12px;margin-top:12px;font:700 .82rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase}
.c-score-st .st,.c-rev .st{display:inline-flex;gap:2px;color:var(--accent)}
.c-score-st .st svg{width:17px;height:17px}
.c-score-note{margin-top:14px;max-width:34ch;font-size:.98rem;line-height:1.5;color:var(--ink-2)}
.c-revs-track{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
  margin:30px calc(-1 * var(--gutter)) 0;padding:0 var(--gutter) 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.c-revs-track::-webkit-scrollbar{display:none}
.c-rev{flex:0 0 min(80vw,380px);scroll-snap-align:start;margin:0;padding-top:18px;border-top:2px solid var(--ink)}
.c-rev .st svg{width:13px;height:13px}
.c-rev blockquote{position:relative;margin:14px 0 0}
.c-rev p{font:500 1.08rem/1.48 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.c-rev.is-long blockquote{max-height:8.9em;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}
.c-rev.is-open blockquote{max-height:none;-webkit-mask-image:none;mask-image:none}
.c-rev-more{margin-top:8px;padding:8px 0;border:0;background:none;font:700 .76rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);cursor:pointer}
.c-rev figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:16px;font-size:.88rem;color:var(--ink-2)}
.c-rev cite{font:700 .76rem/1.3 var(--f-body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.c-rev-orig{flex-basis:100%;justify-self:start;text-align:left;margin-top:4px;padding:6px 0;border:0;background:none;font:600 .86rem/1.2 var(--f-body);
  color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;cursor:zoom-in}
@media (min-width:1000px){
  .c-revs-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(40px,6vw,110px);align-items:start}
  .c-score{position:sticky;top:calc(var(--bar-h) + 8vh)}
  .c-score-big{font-size:clamp(9rem,15vw,17rem)}
  .c-revs-track{display:block;columns:2;column-gap:clamp(28px,3vw,48px);overflow:visible;margin:0;padding:0}
  .c-rev{display:inline-block;width:100%;break-inside:avoid;margin:0 0 clamp(30px,3vw,46px)}
}

/* ==========================================================================
   16f. Made for your afternoon
   ========================================================================== */
.c-who{background:var(--air);padding:clamp(60px,9vw,140px) 0 clamp(64px,10vw,150px);border-top:1px solid var(--hair)}
.c-who-title{max-width:12ch;font:800 clamp(2.6rem,12vw,7.6rem)/.88 var(--f-display);letter-spacing:-.055em;text-transform:uppercase}
.c-who-list{margin-top:clamp(30px,6vw,70px);border-bottom:1px solid var(--hair)}
.c-who-list>div{display:grid;gap:8px;padding:20px 0 22px;border-top:1px solid var(--hair)}
.c-who-list dt{font:800 clamp(1.8rem,8.2vw,4.4rem)/.95 var(--f-display);letter-spacing:-.045em;text-transform:uppercase;transition:color 400ms var(--ease),transform 700ms var(--ease)}
.c-who-list dt i{font-style:normal;color:var(--accent)}
.c-who-list dd{margin:0;max-width:40ch;font-size:1.06rem;line-height:1.5;color:var(--ink-2)}
@media (min-width:900px){
  .c-who-list>div{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;column-gap:40px;padding:26px 0}
  .c-who-list>div:hover dt{color:var(--accent);transform:translate3d(10px,0,0)}
}

/* ==========================================================================
   16g. The price
   ========================================================================== */
.c-price{position:relative;overflow:hidden;background:var(--night);color:#fff;padding:clamp(72px,11vw,170px) 0 clamp(70px,10vw,150px)}
.c-price .c-kicker{color:var(--accent)}
.c-price-big{margin-top:10px;font:800 clamp(9.5rem,54vw,27rem)/.78 var(--f-display);letter-spacing:-.075em}
.c-price-big .cur{font-size:.34em;vertical-align:1.06em;margin-right:.04em;color:var(--accent)}
.c-stamp{display:inline-block;margin-top:-.2em;padding:11px 16px 10px;border-radius:6px;background:var(--accent);color:#fff;
  font:800 clamp(1rem,4.4vw,1.4rem)/1 var(--f-display);letter-spacing:.01em;text-transform:uppercase;transform:rotate(-4deg);box-shadow:0 20px 40px -18px rgba(217,68,31,.7)}
.c-price-lines{display:flex;flex-direction:column;margin-top:28px;font:800 clamp(1.8rem,8vw,3.4rem)/1 var(--f-display);letter-spacing:-.045em;text-transform:uppercase}
.c-split{margin-top:clamp(28px,4vw,40px);border-top:1px solid rgba(255,255,255,.18)}
.c-split>div{display:grid;grid-template-columns:5.4rem minmax(0,1fr) 7.6rem;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.c-split>div::before{content:"";grid-column:2;grid-row:1;height:6px;border-radius:6px;
  background:linear-gradient(90deg,var(--accent) calc(var(--w) * 100%),rgba(255,255,255,.1) calc(var(--w) * 100%))}
.c-split dt{grid-column:1;grid-row:1;font:700 .8rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.c-split dd{grid-column:3;grid-row:1;margin:0;text-align:right;font:800 1.35rem/1 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.c-split dd small{font:600 .76rem/1 var(--f-body);letter-spacing:.06em;color:rgba(255,255,255,.6)}
.c-pay{margin-top:18px;font-size:1.04rem;line-height:1.5;color:rgba(255,255,255,.82)}
.c-incl{display:grid;gap:11px;margin-top:26px}
.c-incl li{display:flex;align-items:baseline;gap:12px;font-size:1.02rem;line-height:1.4;color:rgba(255,255,255,.9)}
.c-incl svg{flex:none;width:16px;height:16px;color:var(--accent);transform:translateY(2px)}
.c-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.c-facts span{padding:10px 15px;border:1px solid rgba(255,255,255,.24);border-radius:999px;font:600 .78rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase}
.c-price .c-btn{margin-top:30px}
@media (min-width:1000px){
  .c-price-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(40px,6vw,110px);align-items:end}
  .c-price-big{font-size:clamp(14rem,24vw,27rem)}
  .c-price-side{padding-bottom:.6rem}
  .c-incl{grid-template-columns:1fr 1fr;column-gap:24px}
}

/* ==========================================================================
   16h. Book: the existing calendar and WhatsApp flow, in the new clothes
   ========================================================================== */
.c-book{background:var(--air);padding:clamp(64px,10vw,150px) 0 clamp(60px,9vw,130px)}
.c-book-title{margin-top:14px;font:800 clamp(2.7rem,12.4vw,7.6rem)/.88 var(--f-display);letter-spacing:-.055em;text-transform:uppercase}
.c-book-lede{margin-top:16px;max-width:42ch;font-size:1.06rem;line-height:1.5;color:var(--ink-2)}
.cityp .book-panel{margin-top:clamp(26px,5vw,48px);border:0;border-radius:22px;background:#F4F3F1;overflow:hidden}
.cityp .cal{border-color:rgba(20,20,20,.08)}
.cityp .day::before{inset:3px;border-radius:50%}
.cityp .day{border-radius:50%}
.cityp .guest{border-radius:999px;background:#fff}
.cityp .icon-btn{background:#fff}
.cityp .steps-panel .meta{font-size:.8rem}
.c-ask{margin-top:clamp(28px,5vw,48px)}
.c-ask p{font-size:1.04rem;color:var(--ink-2)}
.c-ask .contact-links{justify-content:flex-start;margin-top:14px}
.c-ask .btn{min-height:46px}

/* ==========================================================================
   16i. One city. One guide.
   ========================================================================== */
.c-guide{background:var(--air);padding:clamp(60px,9vw,140px) 0 clamp(70px,10vw,150px);border-top:1px solid var(--hair)}
.c-guide-grid{display:grid;gap:30px}
.c-guide-pic{margin:0;width:86%;aspect-ratio:4/5;overflow:hidden;border-radius:18px;background:var(--air-2)}
.c-guide-pic img{width:100%;height:100%;object-fit:cover}
.c-guide-title{font:800 clamp(3rem,15vw,8.4rem)/.86 var(--f-display);letter-spacing:-.06em;text-transform:uppercase}
.c-guide-title span{color:var(--accent)}
.c-guide-lede{margin-top:20px;max-width:22ch;font:700 clamp(1.4rem,6.2vw,2.3rem)/1.14 var(--f-display);letter-spacing:-.035em}
.c-guide-body{margin-top:14px;max-width:40ch;font-size:1.06rem;line-height:1.55;color:var(--ink-2)}
.c-guide-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px;border-top:1px solid var(--hair)}
.c-guide-stats>div{padding:16px 0 0}
.c-guide-stats>div+div{padding-left:14px;border-left:1px solid var(--hair)}
.c-guide-stats dt{font:700 .72rem/1.2 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.c-guide-stats dd{margin:8px 0 0;font:800 clamp(2.2rem,10vw,3.6rem)/.9 var(--f-display);letter-spacing:-.05em}
.c-why{margin-top:28px;border-bottom:1px solid var(--hair)}
.c-why li{padding:13px 0;border-top:1px solid var(--hair);font-size:1rem;line-height:1.45;color:var(--ink-2)}
.c-why b{font-weight:600;color:var(--ink)}
@media (min-width:900px){
  .c-guide-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(40px,6vw,110px);align-items:center}
  .c-guide-pic{width:100%}
}

/* ==========================================================================
   16j. See Tashkent with me
   ========================================================================== */
.c-final{position:relative;display:flex;align-items:flex-end;min-height:clamp(580px,94svh,880px);overflow:hidden;isolation:isolate;color:#fff;background:#1a1714}
.c-final-bg,.c-final-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.c-final::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,6,4,.3) 0%,rgba(8,6,4,.08) 30%,rgba(8,6,4,.55) 62%,rgba(8,6,4,.9) 100%)}
.c-final-in{padding:clamp(120px,20vw,200px) 0 calc(clamp(44px,7vw,90px) + env(safe-area-inset-bottom,0px))}
.c-final-title{font:800 clamp(3.4rem,17vw,13rem)/.84 var(--f-display);letter-spacing:-.06em;text-transform:uppercase}
.c-final-words{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:22px;font:700 clamp(1.4rem,6.2vw,2.4rem)/1.1 var(--f-display);letter-spacing:-.03em}
.c-final-words span:nth-child(2){color:var(--accent)}
.c-final-facts{margin-top:14px;font:700 .8rem/1.4 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.84)}
.c-btn-big{width:100%;max-width:440px;min-height:66px;margin-top:28px;font-size:.95rem}
.c-btn .c-wa{width:24px;height:24px;color:#1FA855}
.c-btn-big span{flex:1}
@media (min-width:900px){
  .c-final-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-areas:"title title" "words btn" "facts btn";align-items:end;column-gap:60px}
  .c-final-title{grid-area:title}
  .c-final-words{grid-area:words}
  .c-final-facts{grid-area:facts}
  .c-final-in .c-btn-big{grid-area:btn;justify-self:end;margin-top:0}
}

/* ==========================================================================
   16k. FAQ, and where to go next
   ========================================================================== */
.c-faq{background:var(--air);padding:clamp(60px,9vw,140px) 0 clamp(54px,8vw,120px)}
.c-faq-title{font:800 clamp(2.5rem,11vw,6.4rem)/.88 var(--f-display);letter-spacing:-.055em;text-transform:uppercase}
.c-faq-ask{margin-top:14px;font-size:1.02rem;color:var(--ink-2)}
.c-faq-ask a{color:var(--accent);font-weight:600;text-underline-offset:4px}
.cityp .faq-list{max-width:none;margin-top:clamp(24px,4vw,40px)}
.cityp .faq-q{min-height:62px;font-size:1.06rem}
@media (min-width:1000px){
  .c-faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(40px,6vw,110px);align-items:start}
  .c-faq-grid>header{position:sticky;top:calc(var(--bar-h) + 6vh)}
  .cityp .faq-list{margin-top:0}
}
.c-next{background:var(--air);border-top:1px solid var(--hair);padding:clamp(30px,5vw,60px) 0 clamp(44px,7vw,90px)}
.c-next-in{display:grid;gap:0}
.c-next .c-kicker{margin-bottom:10px}
.c-next a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;padding:16px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--ink)}
.c-next a span{font:800 clamp(2rem,9vw,4.4rem)/1 var(--f-display);letter-spacing:-.05em;text-transform:uppercase;transition:color 400ms var(--ease)}
.c-next a small{grid-column:1;font-size:.98rem;color:var(--ink-2);margin-top:4px}
.c-next a svg{grid-column:2;grid-row:1/3;width:28px;height:28px;transition:transform 600ms var(--ease)}
.c-next a:hover span{color:var(--accent)}
.c-next a:hover svg{transform:translate3d(6px,0,0)}
@media (min-width:900px){
  .c-next-in{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);column-gap:clamp(30px,4vw,70px);align-items:end}
  .c-next .c-kicker{margin:0 0 22px}
}

/* the dock on the City page leads to the calendar, and steps aside near it */
.cityp .dock{background:color-mix(in srgb,var(--air) 96%,transparent)}
body.dock-hold .dock{transform:translateY(130%)}
@media (max-width:900px){.cityp .foot-home{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}}

@media (prefers-reduced-motion:reduce){
  .c-arch,.c-arch-pics img,.c-panel-pics img{animation:none}
  .c-hero-title .ln>span,.c-hero-facts,.c-hero-sub,.c-hero-foot .c-btn{animation:none}
  .c-side-pic{transform:none!important}
}

/* ==========================================================================
   16l. Film, and the road on a phone
   ========================================================================== */
/* the film inside the arch: the poster is its first frame, so nothing jumps when it starts */
.c-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#2a2622}

/* the sunset film closes the photo strip; sound only when asked for */
.c-shot.is-v{width:min(64vw,360px)}
.c-shot-film{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:3px;background:#1a1714}
.c-shot-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c-sound{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:0;border-radius:999px;
  background:rgba(14,12,10,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;
  font:700 .76rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.c-sound-off,.c-sound[aria-pressed="true"] .c-sound-on{display:none}
.c-sound[aria-pressed="true"] .c-sound-off{display:inline}
@media (min-width:1000px){.c-story.pinned .c-shot.is-v{width:calc(min(62vh,660px) * 9 / 16)}}

/* --- the road: a line the page draws down the left edge as you scroll, with
       the car at its tip. Each stop wakes up as the car reaches it. --- */
.c-track-wrap{position:relative}
.c-rail{position:absolute;left:0;top:0;width:44px;height:100%;overflow:visible;pointer-events:none;z-index:1}
.c-rail-ghost{fill:none;stroke:currentColor;stroke-opacity:.2;stroke-width:2;stroke-dasharray:1 7;stroke-linecap:round}
.c-rail-ink{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.c-rail stop.k-start{stop-color:var(--accent)}
.c-rail stop.k-imperial{stop-color:var(--imp)}
.c-rail stop.k-soviet{stop-color:var(--sov)}
.c-rail stop.k-old{stop-color:var(--old)}
.c-rail-nodes circle{fill:var(--air);stroke:currentColor;stroke-opacity:.3;stroke-width:2;transition:fill 400ms var(--ease),stroke 400ms var(--ease),stroke-opacity 400ms var(--ease)}
.c-route[data-era="soviet"] .c-rail-nodes circle{fill:var(--night)}
.c-rail-nodes circle.done{stroke-opacity:1}
.c-rail-nodes circle.done.k-start{fill:var(--accent);stroke:var(--accent)}
.c-rail-nodes circle.done.k-imperial{fill:var(--imp);stroke:var(--imp)}
.c-rail-nodes circle.done.k-soviet{fill:var(--sov);stroke:var(--sov)}
.c-rail-nodes circle.done.k-old,.c-rail-nodes circle.done.k-end{fill:var(--old);stroke:var(--old)}
.c-rail-nodes circle.era{stroke-dasharray:3 3}
.c-car{transition:opacity 300ms}
.c-car-halo{fill:var(--era-c);opacity:.22;transform-origin:0 0;animation:carPulse 1.8s var(--ease-in-out) infinite}
@keyframes carPulse{0%,100%{transform:scale(.7);opacity:.28}50%{transform:scale(1.15);opacity:.08}}
.c-car-body{fill:var(--era-c);stroke:var(--air);stroke-width:2}
.c-route[data-era="soviet"] .c-car-body{stroke:var(--night)}
.c-car-win{fill:var(--air);opacity:.9}
.c-route[data-era="soviet"] .c-car-win{fill:var(--night)}

@media (max-width:999px){
  .c-track{padding-left:46px}
  .c-stop,.c-era{border-top:0}
  .c-stop{padding:22px 0 38px}
  .c-era{padding:56px 0 50px}
  /* smaller frames that sit beside the road instead of filling the screen */
  .c-stop-pic{margin:16px 0 0;aspect-ratio:5/4;border-radius:10px}
  .c-stop.is-edge .c-stop-pic{aspect-ratio:16/10}
  .c-stop .c-stop-pic img,.c-stop.is-on .c-stop-pic img{transform:translate3d(var(--pan,0%),0,0) scale(1.14);transition:none}
  .c-era-pic.is-rect{margin-inline:0;border-radius:10px}
  .c-stop-title{font-size:clamp(1.95rem,9.2vw,3.6rem)}
  .c-era-name{font-size:clamp(2.7rem,13.4vw,6rem)}

  /* a stop wakes up: the number, then the name slides in off the road, then the
     picture unrolls from the side the car is on */
  .js .c-stop>*,.js .c-era>*{transition:opacity 700ms var(--ease),transform 900ms var(--ease)}
  .js .c-stop:not(.is-seen)>*:not(.c-stop-pic),.js .c-era:not(.is-seen)>*:not(.c-era-pic){opacity:0;transform:translate3d(-22px,0,0)}
  .js .c-stop>:nth-child(2),.js .c-era>:nth-child(2){transition-delay:80ms}
  .js .c-stop>:nth-child(4),.js .c-era>:nth-child(4){transition-delay:260ms}
  .js .c-stop>:nth-child(5){transition-delay:320ms}
  .js .c-stop-pic,.js .c-era-pic{transition:clip-path 1100ms var(--ease) 140ms,-webkit-clip-path 1100ms var(--ease) 140ms}
  .js .c-stop:not(.is-seen) .c-stop-pic{-webkit-clip-path:inset(0 100% 0 0 round 10px);clip-path:inset(0 100% 0 0 round 10px)}
  .js .c-stop.is-seen .c-stop-pic{-webkit-clip-path:inset(0 0 0 0 round 10px);clip-path:inset(0 0 0 0 round 10px)}
  .js .c-era:not(.is-seen) .c-era-pic{opacity:0;transform:scale(.86)}
  .js .c-era .c-era-pic{transition:opacity 900ms var(--ease) 160ms,transform 1200ms var(--ease) 160ms}
}
@media (min-width:1000px){.c-rail{display:none}}
@media (prefers-reduced-motion:reduce){
  .c-car-halo{animation:none}
  .js .c-stop>*,.js .c-era>*,.js .c-stop-pic,.js .c-era-pic{opacity:1!important;transform:none!important;-webkit-clip-path:none!important;clip-path:none!important}
}

/* ==========================================================================
   17. THE MOUNTAINS PAGE
   Same type, same white, same terracotta as the rest of the brand, but its own
   light: the dark of the hills, the gold of autumn grass, the teal of Charvak.
   Its motion is about leaving: strips that pull sideways, a dot climbing a
   ridge line, a panorama that turns as you scroll. Scoped to .mtp.
   ========================================================================== */
.mtp{--hair:color-mix(in srgb,var(--ink) 12%,transparent);--night:#0E1311;--gold:#D2A24C;--teal:#2C8580;--ease-in-out:cubic-bezier(.45,0,.55,1)}
.mtp .bar{transition:background-color 420ms var(--ease),border-color var(--mid) var(--ease),color 420ms var(--ease)}
.mtp .bar.over{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent;color:#fff}
.mtp .bar.over .worlds a{color:rgba(255,255,255,.88)}
.mtp .bar.over .worlds a[aria-current]{color:#fff;background:rgba(255,255,255,.16)}
.mtp .bar.over .lang{border-color:rgba(255,255,255,.45);color:#fff}

/* --- 17a. Out of the city --- */
.m-hero{position:relative;display:flex;min-height:100svh;overflow:hidden;isolation:isolate;background:var(--night);color:#fff}
.m-hero-media{position:absolute;left:0;right:0;top:-4%;height:112%;z-index:-2;will-change:transform}
.m-hero-media picture,.m-hero-media img{display:block;width:100%;height:100%;object-fit:cover}
.m-hero-media img{animation:mtPush 10s cubic-bezier(.2,.6,.3,1) both}
@keyframes mtPush{from{transform:scale(1.14)}to{transform:scale(1.02)}}
.m-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,12,10,.55) 0%,rgba(8,12,10,0) 22%,rgba(8,12,10,0) 42%,rgba(8,12,10,.6) 70%,rgba(8,12,10,.9) 100%)}
.m-hero-in{display:flex;flex-direction:column;width:min(100% - 2 * var(--gutter),var(--maxw));min-height:100svh;
  padding:calc(var(--bar-h) + env(safe-area-inset-top,0px) + 18px) 0 calc(30px + env(safe-area-inset-bottom,0px))}
.m-facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 11px;margin-bottom:auto;font:700 .78rem/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.92);animation:fadeUp 800ms var(--ease) both}
.m-facts i{width:5px;height:5px;border-radius:50%;background:var(--gold)}
.m-hero-title{margin-top:30px;font:800 clamp(3.2rem,16.6vw,12rem)/.84 var(--f-display);letter-spacing:-.06em;text-transform:uppercase}
.m-hero-title .ln{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
.m-hero-title .ln>span{display:block;animation:lineUp 1150ms var(--ease) both}
.m-hero-title .ln:nth-child(2)>span{animation-delay:110ms}
.m-hero-title .ln:nth-child(3)>span{animation-delay:200ms}
.m-hero-title .ln-a>span{margin-bottom:.12em;font-size:.44em;letter-spacing:-.035em;color:rgba(255,255,255,.84)}
.m-trail{display:flex;flex-wrap:wrap;align-items:center;row-gap:8px;margin-top:22px;font:700 .78rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;animation:fadeUp 900ms var(--ease) 380ms both}
.m-trail li{display:inline-flex;align-items:center}
.m-trail li+li::before{content:"";width:clamp(14px,4vw,40px);height:2px;margin:0 9px;border-radius:2px;background:var(--gold)}
.m-hero-in .c-btn{align-self:flex-start;margin-top:24px;animation:fadeUp 900ms var(--ease) 480ms both}
.m-hero-in .c-btn svg{animation:hintDown 2.2s var(--ease-in-out) infinite}
body.cookie-open .m-hero-in{padding-bottom:150px}
@media (min-width:900px){
  .m-hero-in{padding-bottom:56px}
  .m-hero-title{font-size:clamp(5rem,11.4vw,12.5rem)}
  .m-hero-title .ln-a>span{font-size:.36em}
  body.cookie-open .m-hero-in{padding-bottom:56px}
}

/* --- 17b. Three places, one day: strips the page pulls sideways --- */
.m-places{background:var(--night);color:#fff;overflow:hidden;padding:clamp(70px,11vw,160px) 0 clamp(70px,10vw,150px)}
.m-places-title{font:800 clamp(2.8rem,13.4vw,8.6rem)/.88 var(--f-display);letter-spacing:-.06em;text-transform:uppercase}
.m-places-title span{color:var(--gold)}
.m-place-list{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(48px,7vw,96px);margin-top:clamp(40px,7vw,90px)}
.m-place{min-width:0}
.m-place-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:14px}
.m-place-n{font:800 .95rem/1 var(--f-display);color:var(--gold)}
.m-place-name{font:800 clamp(3.2rem,16vw,10.5rem)/.84 var(--f-display);letter-spacing:-.065em;text-transform:uppercase}
.m-place-what{grid-column:1/-1;margin-top:12px;font:700 .78rem/1.5 var(--f-body);letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.m-band{margin-top:20px;overflow:hidden}
.m-band-in{display:flex;gap:10px;width:max-content;padding-left:var(--gutter);transform:translate3d(var(--bx,0px),0,0);will-change:transform}
.m-band img{display:block;width:auto;height:clamp(170px,46vw,360px);aspect-ratio:4/5;object-fit:cover;border-radius:6px;background:#1c2420}
@media (min-width:900px){
  .m-place-head{grid-template-columns:auto auto minmax(0,1fr);column-gap:28px;align-items:end}
  .m-place-what{grid-column:auto;margin:0 0 .9em;justify-self:end;text-align:right;max-width:30ch}
}

/* --- 17c. The day: a ridge line with a dot climbing it --- */
.m-day{position:relative;background:var(--air);padding:clamp(70px,11vw,160px) 0 clamp(30px,6vw,80px)}
.m-day-title{margin-top:16px;max-width:12ch;font:800 clamp(2.5rem,11.6vw,7.4rem)/.88 var(--f-display);letter-spacing:-.06em;text-transform:uppercase}
.m-day-note{margin-top:14px;font-size:1.06rem;color:var(--ink-2)}
.m-day-body{position:relative;margin-top:clamp(24px,4vw,50px)}
.m-prof-bar{position:sticky;top:calc(var(--bar-h) + env(safe-area-inset-top,0px));z-index:6;padding:10px 0 6px;
  background:color-mix(in srgb,var(--air) 94%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.m-prof-now{display:flex;align-items:baseline;gap:10px;min-width:0;font:600 1rem/1.2 var(--f-body)}
.m-prof-n{flex:none;font:800 1rem/1 var(--f-display);color:var(--accent)}
.m-prof-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:800 1.05rem/1.2 var(--f-display);text-transform:uppercase;letter-spacing:-.01em}
.m-prof-dur{flex:none;margin-left:auto;font:700 .74rem/1 var(--f-body);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.m-profile{display:block;width:100%;height:auto;margin-top:6px;overflow:visible}
.m-ridge-fill{fill:color-mix(in srgb,var(--ink) 5%,transparent)}
.m-ridge{fill:none;stroke:color-mix(in srgb,var(--ink) 24%,transparent);stroke-width:4;stroke-linejoin:round}
.m-ridge-ink{fill:none;stroke:var(--gold);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0))}
.m-node{fill:var(--air);stroke:color-mix(in srgb,var(--ink) 30%,transparent);stroke-width:4;transition:fill 400ms var(--ease),stroke 400ms var(--ease)}
.m-node.done{fill:var(--gold);stroke:var(--gold)}
.m-marker{fill:var(--accent);stroke:var(--air);stroke-width:5}
.m-node-label{display:none;font:700 15px var(--f-body);letter-spacing:.08em;text-transform:uppercase;fill:var(--ink-2)}
.m-stops{display:block}
.m-stop{padding:34px 0 40px;border-bottom:1px solid var(--hair)}
.m-stop:last-child{border-bottom:0}
.m-stop-n{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.m-stop-n b{font:800 1.15rem/1 var(--f-display);color:var(--accent)}
.m-stop-n span{font:700 .78rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.m-stop-name{margin-top:12px;font:800 clamp(2.3rem,11vw,5.4rem)/.9 var(--f-display);letter-spacing:-.05em;text-transform:uppercase;text-wrap:balance}
.m-stop-pic{position:relative;margin:18px 0 0;aspect-ratio:4/5;overflow:hidden;border-radius:6px;background:var(--air-2)}
.m-stop-pic img{width:100%;height:100%;object-fit:cover;transition:transform 1600ms var(--ease)}
.m-stop-text{margin-top:16px;max-width:36ch;font:500 1.12rem/1.42 var(--f-display);letter-spacing:-.01em}
.m-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.m-tags li{padding:8px 12px;border:1px solid var(--hair);border-radius:999px;font:600 .78rem/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.m-stop[data-k="cable"] .m-tags li{border-color:var(--accent);color:var(--accent)}
.m-stop-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:8px;font:700 .8rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.m-stop-link svg{width:16px;height:16px}
/* a stop rises into view from below, like the hills coming up over the road */
.js .m-stop:not(.is-seen) .m-stop-pic{-webkit-clip-path:inset(100% 0 0 0 round 6px);clip-path:inset(100% 0 0 0 round 6px)}
.js .m-stop .m-stop-pic{transition:clip-path 1200ms var(--ease),-webkit-clip-path 1200ms var(--ease)}
.js .m-stop:not(.is-seen) .m-stop-pic img{transform:scale(1.18)}
.js .m-stop:not(.is-seen)>:not(.m-stop-pic){opacity:0;transform:translate3d(0,18px,0)}
.js .m-stop>:not(.m-stop-pic){transition:opacity 700ms var(--ease),transform 900ms var(--ease)}
@media (min-width:700px){.m-node-label{display:block}.m-prof-now{display:none}.m-prof-bar{padding:14px 0 8px}}
@media (min-width:1000px){
  .m-stops{padding-top:20px}
  .m-stop{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto auto 1fr auto auto;column-gap:clamp(40px,6vw,110px);align-items:start;padding:clamp(50px,6vw,90px) 0}
  .m-stop-pic{grid-column:1;grid-row:1/-1;margin:0}
  .m-stop>:not(.m-stop-pic){grid-column:2}
  .m-stop:nth-child(even) .m-stop-pic{grid-column:2}
  .m-stop:nth-child(even)>:not(.m-stop-pic){grid-column:1}
  .m-stop-n{padding-top:clamp(20px,4vw,60px)}
  .m-stop-name{font-size:clamp(3rem,5.6vw,6.4rem)}
  .m-stop-text{font-size:1.3rem}
}

/* --- 17d. Amirsoy cable car: the film and the ticket board --- */
.m-cable{background:var(--night);color:#fff;padding:clamp(70px,11vw,160px) 0 clamp(70px,10vw,150px)}
.m-cable-grid{display:grid;gap:clamp(34px,5vw,80px)}
.m-film{position:relative;margin:0 auto;width:min(100%,calc(78svh * 9 / 16),460px);aspect-ratio:9/16;overflow:hidden;border-radius:14px;background:#1a211d}
.m-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.m-film figcaption{position:absolute;left:14px;right:14px;bottom:12px;font:600 .72rem/1.3 var(--f-body);letter-spacing:.08em;color:rgba(255,255,255,.78);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.m-cable-title{margin-top:14px;font:800 clamp(3.2rem,16vw,9rem)/.84 var(--f-display);letter-spacing:-.065em;text-transform:uppercase}
.m-opt{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:18px;font:600 1rem/1.3 var(--f-body);color:rgba(255,255,255,.86)}
.m-opt span{display:inline-block;padding:9px 13px 8px;border-radius:6px;background:var(--gold);color:#16130c;font:800 .86rem/1 var(--f-display);letter-spacing:.02em;text-transform:uppercase;transform:rotate(-3deg)}
.m-cable-lede{margin-top:16px;max-width:40ch;font-size:1.04rem;line-height:1.5;color:rgba(255,255,255,.76)}
.m-fare{margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16)}
.m-fare-big{display:flex;align-items:baseline;gap:.08em;font:800 clamp(3.6rem,19vw,7.4rem)/.86 var(--f-display);letter-spacing:-.06em;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.m-fare-approx{font-size:.5em;letter-spacing:0;opacity:.85}
.m-fare-for{margin-top:12px;font:700 .82rem/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:#fff}
.m-fare-note{margin-top:12px;max-width:40ch;font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.66)}
.m-tix{margin-top:28px}
.m-tix-days{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.09)}
.m-day-btn{min-height:48px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.78);font:700 .8rem/1.15 var(--f-body);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background-color 300ms var(--ease),color 300ms var(--ease)}
.m-day-btn[aria-pressed="true"]{background:#fff;color:#131614}
.m-tix-table{width:100%;margin-top:18px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.m-tix-table thead th{padding:0 0 10px 8px;text-align:right;vertical-align:bottom;font:700 .72rem/1.25 var(--f-body);letter-spacing:.03em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.m-tix-table thead th small{display:block;font-weight:500;letter-spacing:.04em}
.m-tix-table tbody th{padding:14px 10px 14px 0;text-align:left;vertical-align:middle;border-top:1px solid rgba(255,255,255,.13)}
.m-tix-table tbody th b{display:block;font:700 .98rem/1.2 var(--f-display);letter-spacing:-.01em}
.m-tix-table tbody th small{display:block;margin-top:3px;font:600 .74rem/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.m-tix-table td{padding:14px 0 14px 8px;text-align:right;border-top:1px solid rgba(255,255,255,.13);font:800 1.06rem/1 var(--f-display);letter-spacing:-.01em;white-space:nowrap}
.m-tix-table td span{display:inline-block;transition:opacity 220ms var(--ease),transform 300ms var(--ease)}
.m-tix-table.swap td span{opacity:0;transform:translate3d(0,6px,0)}
.m-tix-table tbody tr:first-child td{color:var(--gold)}
.m-tix-note{margin-top:14px;font-size:.86rem;line-height:1.45;color:rgba(255,255,255,.6)}
@media (min-width:1000px){
  .m-cable-grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:center}
  .m-film{width:100%;max-width:440px}
  .m-tix-table td{font-size:1.3rem}
  .m-tix-table tbody th b{font-size:1.1rem}
}

/* --- 17e. Optional experiences --- */
.m-extras{background:var(--air);padding:clamp(70px,11vw,160px) 0 clamp(60px,9vw,130px)}
.m-extras-title{margin-top:14px;font:800 clamp(2.7rem,12.6vw,7.8rem)/.88 var(--f-display);letter-spacing:-.06em;text-transform:uppercase}
.m-not{display:flex;align-items:flex-start;gap:10px;max-width:46ch;margin-top:18px;padding:14px 16px;border-radius:10px;
  background:color-mix(in srgb,var(--accent) 9%,#fff);color:var(--accent-deep);font:600 1rem/1.42 var(--f-body)}
.m-not svg{flex:none;width:20px;height:20px;margin-top:1px}
.m-x-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px;margin-top:clamp(28px,5vw,56px)}
.m-x{position:relative;min-width:0}
.m-x-pic{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:10px;background:var(--air-2)}
.m-x-pic img{width:100%;height:100%;object-fit:cover;transition:transform 1200ms var(--ease)}
.m-x:hover .m-x-pic img{transform:scale(1.05)}
.m-x-badge{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:4px;padding:7px 10px 6px;border-radius:999px;background:#fff;color:var(--accent);
  font:800 .72rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;box-shadow:0 6px 18px -8px rgba(0,0,0,.4)}
.m-x-badge svg{width:12px;height:12px}
.m-x-badge.is-soon{background:var(--ink);color:#fff}
.m-x-name{margin-top:12px;font:800 clamp(1.35rem,6vw,2.3rem)/1 var(--f-display);letter-spacing:-.04em;text-transform:uppercase;overflow-wrap:break-word}
.m-x-line{margin-top:5px;font-size:.94rem;line-height:1.35;color:var(--ink-2)}
.m-x-price{margin-top:8px;font:700 .74rem/1.3 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.m-x-type{display:flex;align-items:flex-end;height:100%;padding:16px;background:var(--teal);color:#fff;font:800 clamp(2.6rem,13vw,6rem)/.8 var(--f-display);letter-spacing:-.06em;text-transform:uppercase}
.m-x-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;padding:16px;text-align:center;
  border:1.5px dashed color-mix(in srgb,var(--ink) 22%,transparent);border-radius:10px;color:var(--ink-2);font:700 .78rem/1.3 var(--f-body);letter-spacing:.12em;text-transform:uppercase}
.m-x-soon svg{width:34px;height:34px;color:var(--gold)}
@media (min-width:1000px){.m-x-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.m-x:nth-child(even){margin-top:60px}}

/* --- 17f. Chimgan: real mountains, passing over their own name --- */
.m-story{position:relative;background:var(--air);padding:clamp(70px,11vw,160px) 0 clamp(80px,12vw,170px);border-top:1px solid var(--hair)}
.m-story-word{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.m-story-word span{position:sticky;top:calc(50vh - .5em);display:block;text-align:center;font:800 clamp(4rem,22.5vw,24rem)/1 var(--f-display);letter-spacing:-.07em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 7%,transparent)}
.m-story-in{position:relative;z-index:1}
.m-story-title{font:800 clamp(2.7rem,12.6vw,7.8rem)/.88 var(--f-display);letter-spacing:-.06em;text-transform:uppercase}
.m-story-note{margin-top:12px;font-size:1.04rem;color:var(--ink-2)}
.m-shot{width:84%;margin:clamp(40px,7vw,90px) 0 0;transform:translate3d(0,var(--dy,0px),0);will-change:transform}
.m-shot:nth-of-type(even){margin-left:auto}
.m-shot img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;background:var(--air-2);box-shadow:0 30px 60px -36px rgba(14,19,17,.6)}
.m-shot figcaption{margin-top:10px;font:700 .76rem/1.3 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
@media (min-width:1000px){
  .m-story-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .m-story-head{grid-column:1/-1}
  .m-shot{width:auto;grid-column:2/7}
  .m-shot:nth-of-type(even){grid-column:7/12;margin-top:clamp(120px,14vw,220px)}
  .m-shot:nth-of-type(n+3){margin-top:clamp(-60px,-4vw,-30px)}
  .m-shot:nth-of-type(even):nth-of-type(n+3){margin-top:clamp(60px,8vw,140px)}
}

/* --- 17g. Charvak: the panorama turns as you scroll --- */
.m-charvak{position:relative;background:var(--night)}
.m-charvak.pinned{height:230svh}
.m-charvak-pin{position:relative;height:100svh;min-height:520px;overflow:hidden;color:#fff;isolation:isolate}
.m-charvak.pinned .m-charvak-pin{position:sticky;top:0}
.m-charvak-pan{position:absolute;top:0;left:0;height:100%;z-index:-2;will-change:transform}
.m-charvak-pan img{display:block;height:100%;width:auto;max-width:none}
.m-charvak-pin::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,12,10,.4) 0%,rgba(8,12,10,0) 26%,rgba(8,12,10,0) 52%,rgba(8,12,10,.78) 100%)}
.m-charvak-txt{position:absolute;left:0;right:0;bottom:calc(clamp(34px,6vw,80px) + env(safe-area-inset-bottom,0px))}
.m-charvak-txt .c-kicker{color:#fff}
.m-charvak-title{max-width:7ch;margin-top:14px;font:800 clamp(2.6rem,11.4vw,10rem)/.86 var(--f-display);letter-spacing:-.06em;text-transform:uppercase}
.m-charvak-line{margin-top:14px;font:700 clamp(1.4rem,6vw,2.6rem)/1.1 var(--f-display);letter-spacing:-.03em;color:var(--gold)}

/* --- 17h. What's included --- */
.m-incl{background:var(--air);padding:clamp(70px,11vw,160px) 0 clamp(60px,9vw,130px)}
.m-incl-title{font:800 clamp(2.7rem,12.6vw,7.8rem)/.88 var(--f-display);letter-spacing:-.06em;text-transform:uppercase}
.m-incl-lede{margin-top:14px;font:700 clamp(1.25rem,5.4vw,2rem)/1.15 var(--f-display);letter-spacing:-.03em;color:var(--accent)}
.m-in-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(28px,5vw,56px);border-top:1px solid var(--hair)}
.m-in-list li{min-width:0;padding:20px 14px 22px 0;border-bottom:1px solid var(--hair)}
.m-in-list li:nth-child(even){padding:20px 0 22px 14px;border-left:1px solid var(--hair)}
.m-in-list li:last-child:nth-child(odd){grid-column:1/-1}
.m-in-ic{width:36px;height:36px;color:var(--accent)}
.m-in-list h3{margin-top:12px;font:800 1.16rem/1.1 var(--f-display);letter-spacing:-.02em}
.m-in-list p{margin-top:6px;font-size:.93rem;line-height:1.42;color:var(--ink-2)}
@media (min-width:1000px){
  .m-incl .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(40px,6vw,110px);align-items:start}
  .m-incl-head{position:sticky;top:calc(var(--bar-h) + 8vh)}
  .m-incl-title{font-size:clamp(3.2rem,5.4vw,6.2rem)}
  .m-in-list{margin-top:0}
  .m-in-list li{padding:28px 24px 30px 0}
  .m-in-list li:nth-child(even){padding:28px 0 30px 24px}
  .m-in-list h3{font-size:1.4rem}
}

/* --- 17i. The price: what is in, and what is extra --- */
.m-price{background:var(--night);color:#fff;padding:clamp(72px,11vw,170px) 0 clamp(70px,10vw,150px);overflow:hidden}
.m-price-big{margin-top:10px;font:800 clamp(8rem,45vw,24rem)/.78 var(--f-display);letter-spacing:-.075em}
.m-price-big .cur{font-size:.34em;vertical-align:1.06em;margin-right:.04em;color:var(--gold)}
.m-price-for{margin-top:14px;font:800 clamp(1.5rem,6.8vw,3rem)/1 var(--f-display);letter-spacing:-.04em;text-transform:uppercase}
.m-price-words{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.m-price-words span,.m-guide-words span,.m-book-facts span{padding:10px 15px;border:1px solid rgba(255,255,255,.26);border-radius:999px;font:700 .78rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase}
.m-split{display:grid;gap:12px;margin-top:clamp(30px,5vw,50px)}
.m-split h3{font:800 1.3rem/1 var(--f-display);letter-spacing:-.02em;text-transform:uppercase}
.m-split li{display:flex;align-items:baseline;gap:10px;padding:9px 0;font-size:1.04rem;line-height:1.3}
.m-split li svg{flex:none;width:17px;height:17px;transform:translateY(3px)}
.m-split-in{padding:22px 22px 16px;border-radius:14px;background:#fff;color:var(--ink)}
.m-split-in ul{margin-top:10px}
.m-split-in li+li{border-top:1px solid var(--hair)}
.m-split-in li svg{color:var(--accent);width:20px;height:20px;transform:translateY(4px)}
.m-split-ex{padding:22px;border-radius:14px;border:1.5px dashed rgba(255,255,255,.34)}
.m-split-ex h3{color:var(--gold)}
.m-split-ex ul{margin-top:10px}
.m-split-ex li svg{color:var(--gold)}
.m-split-ex li small{margin-left:auto;padding-left:10px;font-size:.78rem;color:rgba(255,255,255,.6);white-space:nowrap}
.m-split-ex p{margin-top:12px;font:700 .76rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.m-price-cta{margin-top:30px}
@media (min-width:1000px){
  .m-price-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:clamp(40px,6vw,110px);align-items:end}
  .m-split{grid-template-columns:1fr 1fr;margin-top:0}
  .m-price-cta{grid-column:2;justify-self:start}
}

/* --- 17j. With a local --- */
.m-guide{background:var(--air);padding:clamp(70px,10vw,150px) 0}
.m-guide-grid{display:grid;gap:28px}
.m-guide-pic{margin:0;width:72%;aspect-ratio:4/5;overflow:hidden;border-radius:16px;transform:rotate(-2deg);box-shadow:0 30px 60px -34px rgba(14,19,17,.55)}
.m-guide-pic img{width:100%;height:100%;object-fit:cover}
.m-guide-title{font:800 clamp(2.1rem,9.6vw,5.4rem)/.92 var(--f-display);letter-spacing:-.05em;text-transform:uppercase}
.m-guide-title span{display:block;margin-top:.18em;font-size:.56em;line-height:1.02;letter-spacing:-.035em;color:var(--teal)}
.m-guide-words{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.m-guide-words span{border-color:var(--hair);color:var(--ink)}
.m-guide-stats{display:grid;grid-template-columns:1fr 1fr;margin-top:24px;border-top:1px solid var(--hair)}
.m-guide-stats>div{padding-top:14px}
.m-guide-stats>div+div{padding-left:16px;border-left:1px solid var(--hair)}
.m-guide-stats dt{font:700 .74rem/1.2 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.m-guide-stats dd{display:flex;align-items:center;gap:10px;margin:8px 0 0;font:800 clamp(2.4rem,11vw,3.8rem)/.9 var(--f-display);letter-spacing:-.05em}
.m-guide-stats .st{display:inline-flex;gap:1px;color:var(--accent)}
.m-guide-stats .st svg{width:13px;height:13px}
@media (min-width:900px){.m-guide-grid{grid-template-columns:minmax(0,4fr) minmax(0,6fr);column-gap:clamp(40px,6vw,110px);align-items:center}.m-guide-pic{width:100%}}

/* --- 17k. Book: a date, a group, WhatsApp --- */
.m-book{position:relative;color:#fff;padding:clamp(72px,11vw,170px) 0 clamp(64px,10vw,150px);
  background:var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1.4'%3E%3Cpath d='M300 120c90 0 170 60 175 150s-60 190-170 195S110 410 112 300 210 120 300 120z'/%3E%3Cpath d='M300 165c70 0 128 46 132 112s-48 142-128 146-152-56-150-130 76-128 146-128z'/%3E%3Cpath d='M298 210c50 0 90 34 92 80s-34 98-90 100-104-38-102-90 50-90 100-90z'/%3E%3Cpath d='M296 255c30 0 52 20 54 46s-22 54-52 55-58-22-56-50 24-51 54-51z'/%3E%3Cpath d='M300 70c120 0 220 80 228 196s-80 250-226 258S54 446 58 300 180 70 300 70z'/%3E%3Cpath d='M300 22c150 0 270 100 280 244s-100 310-282 318S8 470 12 300 150 22 300 22z'/%3E%3C/g%3E%3C/svg%3E") right -120px top -80px/680px no-repeat}
.m-book-title{font:800 clamp(2.8rem,13.4vw,8.4rem)/.86 var(--f-display);letter-spacing:-.06em;text-transform:uppercase;max-width:11ch}
.m-book-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.m-book-facts span:nth-child(2){border-color:var(--accent);background:var(--accent)}
.m-form{display:grid;gap:18px;margin-top:30px;padding:20px;border-radius:16px;background:#fff;color:var(--ink)}
.m-field{display:block;min-width:0;margin:0;padding:0;border:0}
.m-field>span,.m-field legend{display:block;padding:0;font:700 .78rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.m-field input{display:block;width:100%;min-height:54px;margin-top:9px;padding:0 14px;border:1.5px solid color-mix(in srgb,var(--ink) 18%,transparent);border-radius:10px;
  background:#fff;color:var(--ink);font:600 1.06rem/1 var(--f-body);-webkit-appearance:none;appearance:none}
.m-field input:focus{outline:2px solid var(--accent);outline-offset:1px}
.m-guests div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:9px}
.m-guests button{min-height:54px;border:1.5px solid color-mix(in srgb,var(--ink) 18%,transparent);border-radius:999px;background:#fff;color:var(--ink);font:800 1.25rem/1 var(--f-display);cursor:pointer;transition:background-color 250ms var(--ease),color 250ms var(--ease),border-color 250ms var(--ease)}
.m-guests button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.m-send{width:100%;max-width:none;margin-top:4px;background:var(--accent);color:#fff}
.m-send:hover{background:var(--accent-deep)}
.m-send .c-wa{color:#fff}
.m-form-note{font-size:.88rem;line-height:1.45;color:var(--ink-2)}
.m-ask{margin-top:30px}
.m-ask p{font-size:1.02rem;color:rgba(255,255,255,.8)}
.m-ask .contact-links{justify-content:flex-start;margin-top:14px}
.m-ask .btn-line{border-color:rgba(255,255,255,.3);color:#fff;min-height:46px}
.m-ask .btn-line:hover{border-color:var(--accent);color:#fff}
@media (min-width:1000px){
  .m-book-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(40px,6vw,110px);align-items:start}
  .m-form{margin-top:0;padding:28px}
  .m-book-title{font-size:clamp(3.6rem,6.2vw,7.4rem)}
  .m-ask{grid-column:1/-1}
}

/* --- FAQ and the dock on this page --- */
.mtp .faq-list{max-width:none;margin-top:clamp(24px,4vw,40px)}
.mtp .faq-q{min-height:62px;font-size:1.06rem}
@media (min-width:1000px){.mtp .faq-list{margin-top:0}}
.mtp .dock{background:color-mix(in srgb,var(--air) 96%,transparent)}
@media (max-width:900px){.mtp .foot-home{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}}

@media (prefers-reduced-motion:reduce){
  .m-hero-media img,.m-hero-title .ln>span,.m-facts,.m-trail,.m-hero-in .c-btn{animation:none}
  .m-band-in,.m-shot,.m-hero-media{transform:none!important}
  .js .m-stop .m-stop-pic,.js .m-stop>*{-webkit-clip-path:none!important;clip-path:none!important;opacity:1!important;transform:none!important}
}

/* ---------- Russian runs longer: a few display sizes step down so no word breaks ---------- */
html[lang="ru"] .m-charvak-title{max-width:none;font-size:clamp(2.3rem,10.2vw,9rem)}
html[lang="ru"] .m-stop-name{font-size:clamp(2rem,9.6vw,5rem)}
html[lang="ru"] .trip-title{font-size:clamp(3rem,13.6vw,10rem)}
html[lang="ru"] .c-side-name{font-size:clamp(2.3rem,10.4vw,8rem)}
@media (min-width:900px){html[lang="ru"] .c-side.is-imperial .c-side-name{max-width:9ch}}
html[lang="ru"] .m-x-name{font-size:clamp(1.05rem,4.9vw,2.3rem)}
@media (min-width:1000px){html[lang="ru"] .m-stop-name{font-size:clamp(2.6rem,4.4vw,5.6rem)}html[lang="ru"] .trip-title{font-size:clamp(5rem,10.4vw,12rem)}}

/* 2026-10-05, the mobile round: long words keep inside their columns on narrow phones */
@media (max-width:899px){
  .c-guide-stats{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr)}
}
@media (max-width:400px){
  .c-guide-stats dt{letter-spacing:.08em}
}
@media (max-width:999px){
  html[lang="ru"] .c-era-name{font-size:clamp(2.3rem,11.4vw,6rem)}
}
@media (max-width:359px){
  .w-word{font-size:1.75rem}
}
@media (max-width:359px){
  html[lang="ru"] .c-stop-title{font-size:1.7rem}
}

/* ==========================================================================
   18. THE STAY PAGE
   A collection, not a hotel website: places I'd recommend, each built from
   the same parts. Warm, calm, slower than the other two pages.
   ========================================================================== */
.stp{--hair:color-mix(in srgb,var(--ink) 13%,transparent);--paper:#FFFCF7;--espresso:#1D1712;--lamp:#E3B77A;--ease-in-out:cubic-bezier(.45,0,.55,1)}
.s-title{margin-top:14px;font:700 clamp(2.6rem,12vw,6.6rem)/.92 var(--f-display);letter-spacing:-.05em;text-wrap:balance}
.s-sub{font:700 .8rem/1.2 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--second)}

/* --- 18a. Stay in Tashkent: a window onto the rooms --- */
.s-hero{position:relative;padding:calc(var(--bar-h) + env(safe-area-inset-top,0px) + 26px) 0 clamp(44px,7vw,90px);
  background:radial-gradient(90% 55% at 88% 0%,rgba(255,251,243,.95),rgba(255,251,243,0) 70%),var(--air)}
.s-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "win" "foot";gap:22px}
.s-hero-head{grid-area:head;min-width:0}
.s-hero-title{margin-top:14px;font:700 clamp(3.3rem,16vw,9.6rem)/.88 var(--f-display);letter-spacing:-.055em}
.s-hero-title .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.s-hero-title .ln>span{display:block;animation:lineUp 1150ms var(--ease) both}
.s-hero-title .ln+.ln>span{animation-delay:110ms;color:var(--second)}
.s-window{grid-area:win;position:relative;margin:0;aspect-ratio:4/3;border-radius:24px;overflow:hidden;isolation:isolate;background:var(--air-2);
  box-shadow:0 34px 60px -38px rgba(46,30,16,.55)}
.s-window-pics{position:absolute;inset:0}
.s-window-pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:transform,opacity;animation:sDrift 9000ms linear both}
.s-window-pics img:first-child{opacity:1}
@keyframes sDrift{from{transform:scale(1.08)}to{transform:scale(1)}}
.s-window::after{content:"";position:absolute;inset:10px;z-index:3;border:1px solid rgba(255,255,255,.62);border-radius:16px;pointer-events:none}
/* the curtains: drawn aside once, when the page opens */
.s-curtain{position:absolute;top:0;bottom:0;z-index:2;width:50.5%;
  background:repeating-linear-gradient(90deg,rgba(90,62,36,.10) 0,rgba(255,255,255,.28) 22px,rgba(90,62,36,.08) 44px),#E7DCCB;
  animation:1800ms var(--ease) 420ms both}
.s-curtain-l{left:0;transform-origin:0 50%;animation-name:sCurtL}
.s-curtain-r{right:0;transform-origin:100% 50%;animation-name:sCurtR}
@keyframes sCurtL{from{transform:scaleX(1)}to{transform:scaleX(.06)}}
@keyframes sCurtR{from{transform:scaleX(1)}to{transform:scaleX(.06)}}
.s-hero-foot{grid-area:foot;display:grid;justify-items:start;gap:20px;animation:fadeUp 900ms var(--ease) 500ms both}
.s-hero-sub{max-width:28ch;font:500 clamp(1.18rem,5vw,1.6rem)/1.32 var(--f-display);letter-spacing:-.015em}
body.cookie-open .s-hero{padding-bottom:150px}

/* --- 18b. The idea --- */
.s-intro{padding:clamp(70px,11vw,170px) 0 clamp(50px,8vw,120px)}
.s-intro-body{display:grid;gap:14px;margin-top:22px;max-width:36ch}
.s-intro-body p{font-size:1.1rem;line-height:1.55;color:var(--ink-2)}
.s-intro-body p:first-child{font:500 clamp(1.3rem,5.6vw,1.9rem)/1.3 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.s-sign{display:flex;align-items:center;gap:12px;margin-top:10px}
.s-sign img{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 28%}
.s-sign span{display:flex;flex-direction:column;font-size:.92rem;line-height:1.35;color:var(--ink-2)}
.s-sign b{font:700 1.05rem/1.2 var(--f-display);color:var(--ink)}

/* --- 18c. The collection: an index of places --- */
.s-collection{padding:0 0 clamp(50px,8vw,110px)}
.s-index{margin-top:clamp(24px,4vw,44px);border-top:1px solid var(--hair)}
.s-index a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"n name pic" "n meta pic";align-items:center;column-gap:14px;row-gap:8px;
  padding:18px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--ink)}
.s-ix-n{grid-area:n;align-self:start;padding-top:.45em;font:800 .95rem/1 var(--f-display);color:var(--accent)}
.s-ix-name{grid-area:name;min-width:0;font:700 clamp(1.9rem,8.6vw,4.6rem)/.95 var(--f-display);letter-spacing:-.045em;transition:color 400ms var(--ease)}
.s-ix-name small{display:block;margin-top:5px;font:600 clamp(.98rem,3.9vw,1.4rem)/1.2 var(--f-display);letter-spacing:-.01em;color:var(--ink-2)}
.s-ix-meta{grid-area:meta;font:600 .74rem/1.3 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--second)}
.s-ix-pic{grid-area:pic;width:clamp(84px,25vw,220px);aspect-ratio:3/2;border-radius:999px;overflow:hidden;background:var(--air-2)}
.s-ix-pic img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
.s-ix-go{display:none;width:26px;height:26px}
.s-index a:hover .s-ix-name{color:var(--accent)}
.s-index a:hover .s-ix-pic img{transform:scale(1.08)}

/* --- 18d. A place: the same parts for every one of them --- */
.s-place{padding:clamp(56px,9vw,130px) 0 clamp(64px,10vw,140px);border-top:1px solid var(--hair)}
.s-place-head{display:grid;gap:10px}
.s-place-n{font:800 1.05rem/1 var(--f-display);color:var(--accent)}
.s-place-name{font:800 clamp(3.4rem,17vw,11.5rem)/.84 var(--f-display);letter-spacing:-.065em;text-transform:uppercase;overflow-wrap:break-word}
.s-place-name span{display:block;margin-top:.24em;font:600 clamp(1.15rem,5vw,2.4rem)/1.1 var(--f-display);letter-spacing:-.02em;text-transform:none;color:var(--ink-2)}
.s-place-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.s-place-meta li{padding:9px 14px 8px;border:1px solid var(--hair);border-radius:999px;background:var(--paper);font:600 .76rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase}
.s-place-media{position:relative;margin-top:clamp(28px,5vw,56px);padding-bottom:clamp(64px,17vw,150px)}
.s-lead{margin:0;aspect-ratio:3/2;border-radius:22px;overflow:hidden;background:var(--air-2)}
.s-lead img{width:100%;height:100%;object-fit:cover}
.js .s-lead{-webkit-clip-path:inset(9% 7% 9% 7% round 22px);clip-path:inset(9% 7% 9% 7% round 22px);transition:clip-path 1500ms var(--ease),-webkit-clip-path 1500ms var(--ease)}
.js .s-lead img{transform:scale(1.12);transition:transform 2000ms var(--ease)}
.js .s-lead.seen{-webkit-clip-path:inset(0 round 22px);clip-path:inset(0 round 22px)}
.js .s-lead.seen img{transform:none}
.s-inset{position:absolute;right:clamp(10px,4vw,60px);bottom:0;width:clamp(124px,36%,330px);aspect-ratio:4/5;margin:0;padding:6px;border-radius:18px;background:var(--paper);
  box-shadow:0 26px 50px -28px rgba(46,30,16,.55);transform:translate3d(0,var(--dy,0px),0)}
.s-inset img{width:100%;height:100%;object-fit:cover;border-radius:13px}
.s-place-body{display:grid;gap:clamp(34px,6vw,60px);margin-top:clamp(24px,4vw,40px)}
.s-place-lede{max-width:30ch;font:500 clamp(1.3rem,5.6vw,2rem)/1.3 var(--f-display);letter-spacing:-.02em}
.s-times{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.s-times>div{min-width:0;padding:18px 0 20px}
.s-times>div+div{padding-left:18px;border-left:1px solid var(--hair)}
.s-times dt{font:600 .74rem/1.25 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.s-times dd{margin:10px 0 0;font:800 clamp(2.6rem,12.4vw,4.6rem)/.86 var(--f-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.s-amen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.s-amen li{display:flex;align-items:center;gap:12px;min-width:0;padding:15px 14px;border-radius:14px;background:var(--paper);font:600 .98rem/1.2 var(--f-body)}
.s-amen svg{flex:none;width:26px;height:26px;color:var(--accent)}

/* the rooms: one at a time, chosen with the buttons; photos swipe */
.s-rooms{margin-top:clamp(56px,9vw,120px)}
/* choosing a room: its own dark panel, so it reads as the one control on the page */
.s-rooms-head{position:relative;display:grid;gap:10px;padding:20px 14px 16px;border-radius:24px;background:var(--espresso);color:#F6EFE4;
  box-shadow:0 34px 60px -42px rgba(29,23,18,.8)}
.s-rooms-head .s-sub{padding-inline:4px;font-size:.84rem;color:var(--lamp)}
.s-rooms-hint{display:flex;align-items:center;gap:8px;padding-inline:4px;font-size:.96rem;line-height:1.35;color:rgba(246,239,228,.78)}
.s-rooms-hint svg{flex:none;width:17px;height:17px;color:var(--lamp);animation:hintDown 2.2s var(--ease-in-out) infinite}
.s-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px}
.s-tabs:empty{display:none}
.s-tab{position:relative;display:grid;align-content:center;gap:5px;min-width:0;min-height:68px;padding:12px 14px;border:1.5px solid rgba(255,255,255,.16);border-radius:16px;
  background:rgba(255,255,255,.06);color:#F6EFE4;text-align:left;cursor:pointer;
  transition:background-color 300ms var(--ease),color 300ms var(--ease),border-color 300ms var(--ease),transform 300ms var(--ease)}
.s-tab b{font:700 1.02rem/1.15 var(--f-display);letter-spacing:-.01em}
.s-tab small{font:600 .76rem/1.2 var(--f-body);color:rgba(246,239,228,.66);font-variant-numeric:tabular-nums}
.s-tab:hover{border-color:rgba(255,255,255,.5)}
.s-tab:active{transform:scale(.98)}
.s-tab:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
.s-tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 14px 26px -14px rgba(217,68,31,.9)}
.s-tab[aria-selected="true"] small{color:rgba(255,255,255,.9)}
.s-room{display:grid;gap:22px;margin-top:22px}
.s-room+.s-room{padding-top:34px;border-top:1px solid var(--hair)}
.js .s-room.is-tab{padding-top:0;border-top:0}
.s-room[hidden]{display:none}
.s-room.is-in{animation:sRoomIn 700ms var(--ease) both}
@keyframes sRoomIn{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
.s-gal{position:relative;min-width:0}
.s-gal-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
.s-gal-track::-webkit-scrollbar{display:none}
.s-gal-track:focus-visible{outline-offset:-3px}
.s-shot{position:relative;flex:0 0 88%;scroll-snap-align:start;margin:0;aspect-ratio:3/2;border-radius:16px;overflow:hidden;background:var(--air-2)}
.s-shot img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease),filter 900ms var(--ease)}
.js .s-shot:not(.is-on) img{transform:scale(1.05);filter:brightness(.92) saturate(.9)}
.s-shot figcaption{position:absolute;left:12px;bottom:12px;padding:7px 11px 6px;border-radius:999px;background:rgba(255,252,247,.92);
  font:700 .7rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.s-gal-bar{display:flex;align-items:center;gap:10px;margin-top:12px}
.s-gal-thumbs{display:flex;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none}
.s-gal-thumbs::-webkit-scrollbar{display:none}
.s-thumb{flex:none;width:48px;aspect-ratio:3/2;padding:0;border:0;border-radius:7px;overflow:hidden;background:var(--air-2);opacity:.5;cursor:pointer;
  outline:2px solid transparent;outline-offset:2px;transition:opacity 300ms var(--ease),outline-color 300ms var(--ease)}
.s-thumb[aria-current="true"]{opacity:1;outline-color:var(--accent)}
.s-thumb img{width:100%;height:100%;object-fit:cover}
.s-gal-count{flex:none;margin-left:auto;font:700 .86rem/1 var(--f-body);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.s-gal-nav{display:none;place-items:center;width:44px;height:44px;flex:none;border:1.5px solid var(--hair);border-radius:50%;background:var(--paper);cursor:pointer;
  transition:border-color 300ms var(--ease),opacity 300ms var(--ease)}
.s-gal-nav:hover{border-color:var(--ink)}
.s-gal-nav:disabled{opacity:.35;cursor:default}
.s-gal-nav svg{width:18px;height:18px}
.s-gal-nav.prev svg{transform:rotate(180deg)}
.s-room-info{display:grid;gap:12px;align-content:start;min-width:0}
.s-room-name{font:700 clamp(2.1rem,9.6vw,3.8rem)/.95 var(--f-display);letter-spacing:-.045em}
.s-room-line{max-width:34ch;font-size:1.06rem;line-height:1.5;color:var(--ink-2)}
.s-size{display:flex;align-items:baseline;gap:6px;margin-top:6px;color:var(--second)}
.s-size b{font:800 clamp(3.2rem,15vw,5.2rem)/.8 var(--f-display);letter-spacing:-.06em}
.s-size span{font:700 1.25rem/1 var(--f-display)}
.s-feat{display:flex;flex-wrap:wrap;gap:8px}
.s-feat li{padding:10px 14px 9px;border:1px solid var(--hair);border-radius:999px;background:var(--paper);font:600 .92rem/1.15 var(--f-body)}
.s-price{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding:14px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  font:700 1.08rem/1.2 var(--f-display)}
.s-price>span{font:600 .74rem/1.25 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
/* one price for the room: dollars, and the som the hotel asks underneath */
.s-price b{display:grid;justify-items:end;font:800 clamp(1.8rem,7.6vw,2.4rem)/1 var(--f-display);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.s-price b small{margin-top:5px;font:600 .72rem/1.2 var(--f-body);letter-spacing:0;color:var(--ink-2);white-space:nowrap}
.s-room-cta{width:100%;max-width:440px;margin-top:6px}
.s-room-cta span,.s-place-cta span,.s-send span{flex:1}

/* where it is: the place's own map pin, no distances guessed */
.s-where{display:grid;gap:26px;margin-top:clamp(56px,9vw,120px);padding:clamp(24px,5vw,56px);border-radius:24px;background:var(--paper)}
.s-where-city{margin-top:14px;font:700 clamp(2rem,9vw,3.6rem)/.95 var(--f-display);letter-spacing:-.045em}
.s-where-line{margin-top:12px;max-width:38ch;font-size:1.04rem;line-height:1.5;color:var(--ink-2)}
.s-map-link{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:18px;padding:0 18px;border:1.5px solid var(--hair);border-radius:999px;
  font:600 .98rem/1 var(--f-body);text-decoration:none;transition:border-color 300ms var(--ease),color 300ms var(--ease)}
.s-map-link svg{width:16px;height:16px}
.s-map-link:hover{border-color:var(--accent);color:var(--accent)}
.s-locator{position:relative;justify-self:center;width:min(100%,280px);aspect-ratio:1}
.s-locator svg{width:100%;height:100%;overflow:visible}
.s-loc-ring{fill:none;stroke:var(--second);stroke-opacity:.34;stroke-width:1}
.s-loc-axis{fill:none;stroke:var(--second);stroke-opacity:.22;stroke-width:1;stroke-dasharray:3 6}
.s-loc-dot{fill:var(--accent);stroke:var(--paper);stroke-width:3}
.s-loc-pulse{fill:var(--accent);transform-box:fill-box;transform-origin:center;animation:sPulse 2.8s var(--ease-in-out) infinite}
@keyframes sPulse{0%,100%{transform:scale(.7);opacity:.3}60%{transform:scale(2.4);opacity:0}}
.s-loc-name{position:absolute;left:50%;top:calc(50% + 18px);transform:translateX(-50%);font:700 .95rem/1 var(--f-display);white-space:nowrap}
.s-loc-geo{position:absolute;left:0;right:0;bottom:0;text-align:center;font:600 .68rem/1 var(--f-body);letter-spacing:.14em;color:var(--ink-2);font-variant-numeric:tabular-nums}
.s-place-end{display:flex;justify-content:center;margin-top:clamp(36px,6vw,64px)}
.s-place-cta,.s-send{width:100%;max-width:440px;background:var(--accent);color:#fff}
.s-place-cta:hover,.s-send:hover{background:var(--accent-deep)}
.s-place-cta .c-wa,.s-send .c-wa{color:#fff}
.s-place-cta{margin-top:0}

/* --- 18e. Stay here. Explore more. The evening, with a lamp on --- */
.s-more{position:relative;overflow:hidden;background:var(--espresso);color:#F6EFE4;padding:clamp(72px,11vw,160px) 0}
.s-more::before{content:"";position:absolute;right:-30vw;top:-40vw;width:100vw;height:100vw;max-width:1100px;max-height:1100px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(227,183,122,.2),rgba(227,183,122,0));pointer-events:none}
.s-more .wrap{position:relative}
.s-more-title{font:700 clamp(2.8rem,13vw,8rem)/.9 var(--f-display);letter-spacing:-.055em}
.s-more-title span{color:var(--lamp)}
.s-day{margin-top:clamp(30px,5vw,60px);border-top:1px solid rgba(255,255,255,.14)}
.s-day a,.s-day li>div{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"when pic" "what pic" "line line";column-gap:16px;row-gap:6px;
  padding:22px 0;border-bottom:1px solid rgba(255,255,255,.14);text-decoration:none;color:inherit}
.s-day-when{grid-area:when;font:600 .74rem/1.2 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--lamp)}
.s-day-what{grid-area:what;font:800 clamp(2rem,9.6vw,4.4rem)/.95 var(--f-display);letter-spacing:-.05em;text-transform:uppercase;transition:color 400ms var(--ease)}
.s-day-line{grid-area:line;max-width:40ch;margin-top:4px;font-size:1rem;line-height:1.45;color:rgba(246,239,228,.72)}
.s-day-pic{grid-area:pic;align-self:center;width:clamp(86px,25vw,200px);aspect-ratio:3/2;border-radius:999px;overflow:hidden;background:#2a221b}
.s-day-pic img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
.s-day-go{display:none;width:26px;height:26px}
.s-day a:hover .s-day-what{color:var(--lamp)}
.s-day a:hover .s-day-pic img{transform:scale(1.08)}
.s-day .is-here .s-day-what{color:var(--lamp)}

/* --- 18f. Ask: the dates and the guests go to WhatsApp, nothing is booked here --- */
.s-ask{padding:clamp(72px,11vw,160px) 0 clamp(64px,10vw,140px)}
.s-ask-grid{display:grid;gap:28px}
.s-ask-lede{margin-top:16px;max-width:38ch;font-size:1.1rem;line-height:1.5;color:var(--ink-2)}
.s-form{display:grid;gap:20px;min-width:0;padding:20px;border-radius:20px;background:var(--paper);box-shadow:0 30px 60px -40px rgba(46,30,16,.45)}
.s-field{display:block;min-width:0;margin:0;padding:0;border:0}
.s-field>span,.s-field legend{display:block;padding:0;font:700 .76rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.s-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.s-chips button{min-height:44px;padding:0 15px;border:1.5px solid var(--hair);border-radius:999px;background:transparent;font:600 .94rem/1 var(--f-body);cursor:pointer;
  transition:background-color 250ms var(--ease),color 250ms var(--ease),border-color 250ms var(--ease)}
.s-chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.s-dates{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.s-field input{display:block;width:100%;min-width:0;min-height:54px;margin-top:9px;padding:0 12px;border:1.5px solid var(--hair);border-radius:12px;background:#fff;
  font:600 1rem/1 var(--f-body);color:var(--ink);-webkit-appearance:none;appearance:none}
.s-field input:focus{outline:2px solid var(--accent);outline-offset:1px}
.s-step{display:flex;align-items:center;gap:6px;width:max-content;margin-top:9px;padding:5px;border:1.5px solid var(--hair);border-radius:999px;background:#fff}
.s-step button{display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:var(--air);cursor:pointer}
.s-step button:disabled{opacity:.35;cursor:default}
.s-step button svg{width:18px;height:18px}
.s-step output{min-width:44px;text-align:center;font:800 1.5rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.s-send{max-width:none;margin-top:4px}
.s-form-note{font-size:.88rem;line-height:1.45;color:var(--ink-2)}
.s-contact p{font-size:1.02rem;color:var(--ink-2)}
.s-contact .contact-links{justify-content:flex-start;margin-top:14px}

@media (min-width:600px){
  .s-amen{grid-template-columns:repeat(3,minmax(0,1fr))}
  .s-shot{flex-basis:78%}
}
@media (min-width:900px){
  .s-hero{display:flex;align-items:center;min-height:min(100svh,940px)}
  .s-hero>.wrap{width:min(100% - 2*var(--gutter),var(--maxw))}
  .s-hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"head win" "foot win";column-gap:clamp(40px,5vw,90px);row-gap:30px;align-items:end}
  .s-hero-foot{align-self:start}
  .s-hero-title{font-size:clamp(4.6rem,8.2vw,9.6rem)}
  .s-intro-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(40px,6vw,120px);align-items:end}
  .s-intro-body{margin-top:0}
  .s-index a{grid-template-columns:70px minmax(0,1fr) auto auto auto;grid-template-areas:"n name meta pic go";column-gap:clamp(20px,2.4vw,36px);padding:26px 0}
  .s-ix-n{align-self:center;padding-top:0}
  .s-ix-go{display:block;grid-area:go}
  .s-place-head{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:40px}
  .s-place-n{grid-column:1/-1}
  .s-place-meta{justify-content:flex-end;margin:0 0 .6em}
  .s-place-media{padding-bottom:0;padding-right:clamp(80px,12vw,220px)}
  .s-inset{right:0;bottom:-8%;width:clamp(180px,22vw,330px)}
  .s-place-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,6vw,110px);row-gap:44px;margin-top:clamp(50px,6vw,90px)}
  .s-amen-wrap{grid-column:1/-1}
  .s-amen{grid-template-columns:repeat(6,minmax(0,1fr))}
  .s-amen li{flex-direction:column;align-items:flex-start;padding:20px 18px}
  .s-rooms-head{padding:26px 24px 22px}
  .s-tabs{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
  .s-tab{min-height:76px;padding:14px 18px}
  .s-tab b{font-size:1.12rem}
  .s-room{grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:clamp(30px,4vw,70px);align-items:start;margin-top:30px}
  .s-gal-track{margin-inline:0;padding-inline:0;scroll-padding-inline:0;border-radius:18px}
  .s-shot{flex-basis:100%;border-radius:18px}
  .s-thumb{width:72px}
  .s-gal-nav{display:grid}
  .s-room-info{padding-top:8px}
  .s-where{grid-template-columns:minmax(0,1fr) minmax(0,300px);align-items:center;column-gap:60px}
  .s-day a,.s-day li>div{grid-template-columns:170px minmax(0,1fr) minmax(0,1.2fr) auto 40px;grid-template-areas:"when what line pic go";align-items:center;column-gap:clamp(20px,2.4vw,40px);padding:28px 0}
  .s-day-line{margin-top:0}
  .s-day-go{display:block;grid-area:go}
  .s-ask-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"head form" "contact form";column-gap:clamp(40px,6vw,110px);align-items:start}
  .s-ask-head{grid-area:head}
  .s-form{grid-area:form;padding:28px}
  .s-contact{grid-area:contact}
}
@media (prefers-reduced-motion:reduce){
  .s-curtain{animation:none;transform:scaleX(.06)}
  .s-window-pics img,.s-hero-title .ln>span,.s-hero-foot{animation:none}
  .js .s-lead,.js .s-lead img{-webkit-clip-path:none;clip-path:none;transform:none;transition:none}
  .s-loc-pulse{animation:none;opacity:0}
  .s-room.is-in{animation:none}
}
.s-send,.s-place-cta{letter-spacing:.08em}
@media (min-width:900px){.s-day-what{font-size:clamp(2rem,3.9vw,4rem)}}
@media (max-width:359px){.s-amen li{flex-direction:column;align-items:flex-start;gap:8px}}
html[lang="ru"] .s-send,html[lang="ru"] .s-place-cta,html[lang="ru"] .s-room-cta{gap:12px;padding:0 18px 0 20px;letter-spacing:.02em}

/* the calendar inside the Mountains and Stay forms: the City calendar, in a card */
.m-form .cal,.s-form .cal{margin-top:9px;padding:12px 10px 12px;border:1.5px solid color-mix(in srgb,var(--ink) 14%,transparent);border-radius:14px;background:#fff}
.m-form .cal-head,.s-form .cal-head{margin-bottom:8px}
.m-form .cal-label,.s-form .cal-label{font-size:1.05rem}
.m-form .cal-grid,.s-form .cal-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
.mtp .day,.stp .day{border-radius:50%;aspect-ratio:auto;min-height:0;height:clamp(34px,10.4vw,44px)}
.mtp .day::before,.stp .day::before{inset:3px;border-radius:50%}
.cal-note{margin-top:10px;padding-top:11px;border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);font:600 .92rem/1.35 var(--f-body);color:var(--ink-2)}
.cal.has-date .cal-note{color:var(--ink)}
.stp .day.in-range{color:var(--ink)}
.stp .day.in-range::before{opacity:1;inset:3px 0;border-radius:0;background:color-mix(in srgb,var(--accent) 14%,transparent)}
.stp .day.is-start::after,.stp .day.is-end::after{content:"";position:absolute;top:3px;bottom:3px;z-index:-2;background:color-mix(in srgb,var(--accent) 14%,transparent)}
.stp .day.is-start::after{left:50%;right:0}
.stp .day.is-end::after{left:0;right:50%}

/* --- 18g. Parts a place can add: its score, its spaces, room prices, notes.
       First used by The Elements; any later place can use them the same way --- */
.s-score{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:18px;row-gap:6px;padding:18px 20px;border-radius:18px;background:var(--paper)}
.s-score-num{grid-row:span 2;display:flex;align-items:center;gap:7px;font:800 clamp(2.8rem,13vw,4.2rem)/.85 var(--f-display);letter-spacing:-.05em}
.s-score-num svg{width:.42em;height:.42em;color:var(--accent)}
.s-score-src{font:700 .74rem/1.25 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.s-score-line{font-size:1rem;line-height:1.45}

.s-spaces{margin-top:clamp(56px,9vw,120px)}
.s-spaces-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense;gap:10px;margin-top:16px}
.s-space{position:relative;margin:0;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--air-2)}
.s-space img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
.s-space:hover img{transform:scale(1.05)}
.s-space-tall{grid-row:span 2;aspect-ratio:auto}
.s-space-wide{grid-column:span 2;aspect-ratio:16/9}
.s-space figcaption{position:absolute;left:8px;bottom:8px;display:grid;gap:3px;max-width:calc(100% - 16px);padding:8px 11px;border-radius:12px;background:rgba(255,252,247,.94)}
.s-space b{font:700 .88rem/1.15 var(--f-display);letter-spacing:-.01em}
.s-space figcaption span{font:600 .72rem/1.2 var(--f-body);color:var(--ink-2);font-variant-numeric:tabular-nums}

/* a room's price: two seasons, one guest or two; the season we are in is marked */
.s-rate-t{width:100%;margin-top:6px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.s-rate-t caption{caption-side:top;padding-bottom:10px;text-align:left;font:600 .74rem/1.25 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.s-rate-t thead th{padding:0 0 8px 10px;text-align:right;font:600 .8rem/1.2 var(--f-body);color:var(--ink-2)}
.s-rate-t tbody th,.s-rate-t tbody td{padding:13px 0;border-top:1px solid var(--hair);vertical-align:top}
.s-rate-t tbody tr:last-child>*{border-bottom:1px solid var(--hair)}
.s-rate-t tbody th{text-align:left;font:700 1rem/1.2 var(--f-display)}
.s-rate-t th small{display:block;margin-top:5px;font:600 .74rem/1.25 var(--f-body);color:var(--ink-2)}
.s-rate-t tbody td{padding-left:10px;text-align:right;white-space:nowrap}
.s-rate-t td b{display:block;font:800 clamp(1.55rem,6.6vw,2.1rem)/1 var(--f-display);letter-spacing:-.035em;transition:color 300ms var(--ease)}
.s-rate-t td small{display:block;margin-top:5px;font:600 .7rem/1.2 var(--f-body);color:var(--ink-2)}
.s-now{display:none}
.s-rate-t tr.is-now .s-now{display:inline-block;margin-left:7px;padding:4px 7px 3px;border-radius:999px;background:var(--accent);color:#fff;
  font:700 .6rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;vertical-align:3px}
.s-rate-t.has-now tr:not(.is-now) td b{color:color-mix(in srgb,var(--ink) 52%,transparent)}
.s-rate-note{max-width:62ch;margin-top:26px;font-size:.9rem;line-height:1.5;color:var(--ink-2)}

.s-know{margin-top:clamp(56px,9vw,120px)}
.s-notes{display:grid;margin-top:16px;border-top:1px solid var(--hair)}
.s-notes>div{display:grid;gap:6px;min-width:0;padding:17px 0;border-bottom:1px solid var(--hair)}
.s-notes dt{font:700 1.08rem/1.2 var(--f-display);letter-spacing:-.01em}
.s-notes dd{margin:0;max-width:52ch;font-size:1rem;line-height:1.5;color:var(--ink-2)}
.s-chips button[hidden]{display:none}

@media (min-width:600px){
  .s-spaces-grid{gap:12px}
}
@media (min-width:900px){
  .s-place-body:has(.s-score) .s-place-lede{grid-row:span 2}
  .s-score{align-self:start;padding:22px 26px}
  .s-spaces-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .s-space-wide{aspect-ratio:auto}
  .s-space figcaption{left:12px;bottom:12px;padding:10px 14px}
  .s-space b{font-size:1rem}
  .s-space figcaption span{font-size:.78rem}
  .s-notes{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(30px,4vw,70px)}
  .s-notes>div{grid-template-columns:minmax(0,180px) minmax(0,1fr);column-gap:20px;align-items:baseline}
}
html[lang="ru"] .s-rate-t tbody th{font-size:.94rem}

/* --- 18h. Stay is a chooser now: one card per place, all the same size, and
       every place has its own page in /stay/ --- */
.s-window-pics.is-fast img{animation:sPop 1200ms var(--ease) both}
@keyframes sPop{from{transform:scale(1.06)}to{transform:scale(1)}}

.s-cards{display:grid;gap:clamp(40px,6vw,44px) clamp(20px,3vw,40px);margin-top:clamp(26px,4vw,48px)}
.s-card a{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:14px;height:100%;text-decoration:none;color:var(--ink)}
.s-card-pic{position:relative;display:block;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:var(--air-2);box-shadow:0 30px 54px -40px rgba(46,30,16,.55)}
.s-card-pic img{width:100%;height:100%;object-fit:cover;transition:transform 1400ms var(--ease)}
.s-card a:hover .s-card-pic img{transform:scale(1.05)}
.s-card-name{display:block;margin-top:6px;font:800 clamp(2.5rem,11.5vw,4.6rem)/.88 var(--f-display);letter-spacing:-.055em;text-transform:uppercase;transition:color 400ms var(--ease)}
.s-card-name small{display:block;margin-top:.32em;font:600 clamp(1.02rem,4.3vw,1.4rem)/1.15 var(--f-display);letter-spacing:-.01em;text-transform:none;color:var(--ink-2)}
.s-card a:hover .s-card-name{color:var(--accent)}
.s-card-chips{display:flex;flex-wrap:wrap;gap:8px}
.s-card-chips span{padding:9px 13px 8px;border:1px solid var(--hair);border-radius:999px;background:var(--paper);font:600 .74rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase}
.s-card-line{max-width:40ch;font-size:1.04rem;line-height:1.5;color:var(--ink-2)}
.s-card-go{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;justify-self:start;align-self:end;min-width:min(100%,240px);min-height:56px;margin-top:4px;padding:0 22px 0 24px;
  border-radius:999px;background:var(--ink);color:#fff;font:700 .84rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;transition:background-color 350ms var(--ease)}
.s-card-go svg{width:19px;height:19px;transition:transform 600ms var(--ease)}
.s-card a:hover .s-card-go{background:var(--accent)}
.s-card a:hover .s-card-go svg{transform:translateX(4px)}

/* a place's own page: the way back sits above the name */
.s-place.s-place-page{padding-top:calc(var(--bar-h) + env(safe-area-inset-top,0px) + 22px);border-top:0}
.s-crumb{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:clamp(14px,3vw,34px);font:600 .9rem/1.2 var(--f-body)}
.s-crumb a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 12px;border:1.5px solid var(--hair);border-radius:999px;background:var(--paper);
  text-decoration:none;color:var(--ink);transition:border-color 300ms var(--ease)}
.s-crumb a:hover{border-color:var(--ink)}
.s-crumb a svg{width:17px;height:17px;transform:rotate(180deg)}
.s-crumb-here{color:var(--ink-2)}
.s-crumb-here::before{content:"/";margin-right:12px;color:var(--hair)}
.s-also{padding:clamp(64px,10vw,140px) 0;border-top:1px solid var(--hair)}
.s-all{margin-top:clamp(30px,5vw,48px)}

/* a real map: the place, the city centre and the way between them */
.s-map{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:18px;overflow:hidden;background:var(--air-2);isolation:isolate;
  text-decoration:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.s-map img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover}
.s-map-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.s-map-line line{stroke:var(--ink);stroke-width:2.5;stroke-dasharray:1 8;stroke-linecap:round;vector-effect:non-scaling-stroke}
.s-pin{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.s-pin::before{content:"";position:absolute;left:-11px;top:-11px;width:22px;height:22px;border:3px solid #fff;border-radius:50%;background:var(--accent);
  box-shadow:0 6px 16px rgba(40,20,10,.4)}
.s-pin-place::after{content:"";position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;background:var(--accent);z-index:-1;animation:sPulse 2.8s var(--ease-in-out) infinite}
.s-pin b{position:absolute;left:18px;top:0;transform:translateY(-50%);padding:8px 12px 7px;border-radius:999px;background:var(--ink);color:#fff;white-space:nowrap;
  font:700 .84rem/1 var(--f-display);box-shadow:0 6px 16px rgba(40,20,10,.28)}
.s-pin-l b{left:auto;right:18px}
/* when two pins sit side by side, their names go above and below instead */
.s-pin-up b{left:0;top:-17px;transform:translate(-50%,-100%)}
.s-pin-down b{left:0;top:15px;transform:translate(-50%,0)}
.s-pin-centre::before{left:-8px;top:-8px;width:16px;height:16px;border-width:3px;background:var(--ink)}
.s-pin-centre b{background:var(--paper);color:var(--ink)}
.s-map-km{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);padding:7px 11px 6px;border-radius:999px;background:var(--accent);color:#fff;
  font:800 .86rem/1 var(--f-display);font-variant-numeric:tabular-nums;box-shadow:0 6px 16px rgba(40,20,10,.28)}
.s-map-credit{position:absolute;right:6px;bottom:6px;padding:3px 7px;border-radius:6px;background:rgba(255,252,247,.88);font:500 .62rem/1.25 var(--f-body);color:var(--ink-2)}
.s-rate-fx{margin-top:-2px;font-size:.78rem;line-height:1.4;color:var(--ink-2)}

@media (min-width:900px){
  .s-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-where{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .s-map{max-width:560px;justify-self:end}
}
@media (prefers-reduced-motion:reduce){
  .s-pin-place::after{animation:none;opacity:0}
  .s-rooms-hint svg{animation:none}
}