/* Base for pages copied from the design prototype (see tools/import-prototype.mjs).
   The prototype relies on browser defaults plus its own inline styles, so this file adds nothing
   that would change how its markup looks: fonts, the desktop/phone switch, and site controls. */
@font-face{font-family:'Old Standard TT';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/old-standard-tt-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Old Standard TT';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/old-standard-tt-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Old Standard TT';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/old-standard-tt-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Old Standard TT';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/old-standard-tt-cyrillic-ext-400-normal.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Old Standard TT';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/old-standard-tt-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Desktop design at 768px and wider, phone design below */
@media (max-width:767px){.pv-d{display:none!important}}
@media (min-width:768px){.pv-m{display:none!important}}
/* Content width. The design centres its content in 1280px, which is the full width minus 80px a side at 1440px.
   Wider screens keep that proportion (side margins 1/18 of the width each) instead of growing empty margins;
   at 1440px and narrower it is exactly the design. Used by the page gutters as var(--cw). */
:root{--cw:max(1280px, calc(100% * 8 / 9))}

[hidden]{display:none!important}
html.i18n-wait body{visibility:hidden} /* while the Russian or Uzbek text loads (i18n.js) */
.skip{position:absolute;left:-999px;top:12px;z-index:1000;padding:10px 16px;border-radius:999px;background:#5B5A3D;color:#EEE6DB;font:500 13px/1.2 'Helvetica Neue',Helvetica,Arial,sans-serif}
.skip:focus{left:12px}
:focus-visible{outline:2px solid #5B5A3D;outline-offset:3px}
/* page veil for the fade between pages */
.veil{position:fixed;inset:0;z-index:200;background:#EEE6DB;pointer-events:none;opacity:0;transition:opacity .45s cubic-bezier(.2,.7,.2,1)}
.js-anim body.is-leaving .veil{opacity:1}
/* The desktop header hides its links below 1080px (as designed); this button opens the menu there */
.nav-burger{display:none;width:44px;height:44px;margin-left:-8px;padding:0;border:0;background:none;color:inherit;cursor:pointer;align-items:center;justify-content:center}
@media (max-width:1080px){.nav-burger{display:inline-flex}}
/* longer languages (Russian, Uzbek): when the header's links don't fit, site.js first tightens them (.nav-tight),
   then folds them into the menu button (.nav-fold), as the design does below 1080px */
header.nav-tight .nav-c{gap:18px!important;letter-spacing:.04em!important}
header.nav-fold .nav-c{display:none!important}
header.nav-fold .nav-burger{display:inline-flex}
/* the header links never break onto two lines; on narrower desktops the Home link (not in the design) gives way to
   the logo, which also goes home */
.nav-c a,.sh-book{white-space:nowrap}
@media (max-width:1280px){.nav-c a[data-i18n="nav.home"]{display:none}}
/* The site header (the one with the home logo), on every page: more compact than the design's 99px and without its
   bottom line, the same at the top of the page and in the bar that returns when scrolling up (the user's choice). */
header.site-hdr{border-bottom-color:transparent!important}
.sh-book{height:40px!important;padding:0 20px!important} /* the header's Book button: 46px in the design, a little shorter (the user's choice) */
.pv-d header.site-hdr,.topbar header.site-hdr{padding-top:12px!important;padding-bottom:12px!important}
.pv-d header.site-hdr > a img,.topbar header.site-hdr > a img{height:42px!important}
/* booking fields: the native picker sits invisibly over the designed field */
[data-bw] label{-webkit-tap-highlight-color:transparent}
body.menu-open{overflow:hidden}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* The design draws each hero at exactly one screen (desktop up to 900px tall, phone up to 844px).
   On desktop the hero fills the whole first screen on taller windows too (the design stops at 900px and
   lets the next section show below it). Where its content is taller than the screen (tablets, short
   windows) the hero grows instead of cutting the content off; at the designed sizes nothing changes. */
.pv-d .hero{height:auto;min-height:max(680px,calc(100 * var(--vh, 1vh)));max-height:none}
.pv-m .mhero{height:auto;min-height:clamp(640px,100svh,844px);max-height:none}

/* Scrolling as on the Velaa site (the user's reference): free, smooth scrolling (Lenis in site.js, lerp 0.1) with no
   snapping — the design's own proximity snap is switched off. Sections fill tall windows the way the hero does (the
   design caps them at 900px, which would leave the next one peeking in); at the design's 1440×900 nothing changes. */
html{scroll-snap-type:none!important}
@media (min-width:768px){
  .pv-d :is(.slide,.slide-row,.page > section:not(.hero)){min-height:max(680px,calc(100 * var(--vh, 1vh)))}
  .pv-d .first{min-height:calc(max(680px,calc(100 * var(--vh, 1vh))) - 66px)}
}

/* Index rows ("01 Chalets …"): the design lights the hovered row with a pale band, which the user disliked; the row
   only shifts a little and its arrow moves */
.pv .idx:hover{background:transparent!important;padding-left:8px!important}

/* Booking calendars: every day from check-in to check-out is the same olive as the two end days (the design tints the
   days between with a cream that barely differs from the background), so the stay reads as one band. */
[data-dc^="booking"] button[style*="height: 44px; border: 0; background: #F6F1EA"],
[data-dc^="booking"] button.day[style*="height: 42px; border: 0; background: #EEE6DB"],
.bwp .day.in{background:#5B5A3D!important;color:#EEE6DB!important}

/* Booking bar fields: no down arrow (the user's choice). The pop-up opens above or below the field depending on the
   room on the screen, so an arrow either way would sometimes be wrong; the field's own icon and caption show it opens. */
[data-bw] [data-field] > svg:last-child{display:none}

/* Booking bar pop-ups (assets/js/bookingbar.js): hover like the booking page calendar */
.bwp .day{transition:background-color .15s ease}
.bwp .day:hover{background:#EEE6DB!important}
.bwp .day.in:hover{background:#5B5A3D!important} /* a day inside the chosen range stays olive under the mouse */
.bwp-opt{transition:background-color .15s ease}
.bwp-opt:hover,.bwp-opt:focus-visible{background:#EEE6DB!important}
.bwp [data-m]:not([disabled]):hover{border-color:#5B5A3D!important}