/* ============================================================
   КЛЕВОЕ МЕСТО — база отдыха, с. Жанашар
   Бежевая бумага, крупные фотографии, простая вертикальная прокрутка.
   Горизонтальных лент нет: они уводили страницу вбок.
   Референсы: silavetra.com/glamping и hyggecamp.ru (плотные списки фактов),
   OpenTable (строка брони), KOBU (карточки размещения).
   Шрифты: Unbounded (заголовки) + Onest (текст) — оба с кириллицей и ₸.
   ============================================================ */

:root{
  --bg:#F3EEE5;
  --bg-2:#EAE3D5;
  --ink:#17150F;
  --ink-2:#6B6357;
  --ink-3:#8E867A;
  --line:rgba(23,21,15,.14);
  --line-2:rgba(23,21,15,.07);
  --lamp:#C9761F;
  --dark:#14161A;

  --f-disp:'Unbounded','Onest','Segoe UI',system-ui,sans-serif;
  --f-text:'Onest','Golos Text','Segoe UI',system-ui,sans-serif;

  --pad:clamp(16px,4vw,48px);
  --wrapw:1180px;

  --wipe:.32;
  --zoom:1;
}

*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.55 var(--f-text);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--lamp);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--lamp);color:#fff;padding:14px 22px;font-weight:700}
.skip:focus{left:16px;top:16px}
.wrap{width:100%;max-width:var(--wrapw);margin-inline:auto;padding-inline:var(--pad)}

/* ── типографика ─────────────────────────────────────────── */
.h-big{font:700 clamp(30px,4.6vw,58px)/1.04 var(--f-disp);letter-spacing:-.03em;text-wrap:balance}
.h-light{color:#F6F2EA}
.eyebrow{margin-bottom:14px;font:500 12px/1 var(--f-text);letter-spacing:.2em;
  text-transform:uppercase;color:var(--lamp)}
.eyebrow-light{color:#E9A863}
.lead{margin-top:18px;max-width:62ch;font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:var(--ink-2)}
.lead-light{color:rgba(246,242,234,.82)}
.note{margin-top:22px;max-width:76ch;font-size:13.5px;line-height:1.6;color:var(--ink-3)}
.col-h{font:700 17px/1.2 var(--f-text);letter-spacing:-.01em;margin-bottom:14px}

/* ── кнопки ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 26px;border-radius:999px;
  font:600 15px/1 var(--f-text);border:1px solid transparent;
  transition:background .25s,color .25s,border-color .25s,transform .25s}
.btn-solid{background:var(--lamp);color:#fff}
.btn-solid:hover{background:var(--ink);transform:translateY(-2px)}
.btn-line{border-color:var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--ink);background:rgba(23,21,15,.05)}
.btn-ghost{border-color:rgba(246,242,234,.34);color:#F6F2EA}
.btn-ghost:hover{background:#F6F2EA;color:var(--ink)}

/* ── шапка, боковая вкладка, пилюля ──────────────────────── */
.topbar{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding:14px var(--pad);
  background:rgba(243,238,229,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-2)}
.brand{font:700 15px/1 var(--f-disp);letter-spacing:-.01em}
.topnav{display:flex;gap:22px;font-size:14px}
.topnav a{color:var(--ink-2);transition:color .2s}
.topnav a:hover{color:var(--ink)}
.tel{font-size:14px;font-weight:500}

.side-tab{position:fixed;right:0;top:50%;z-index:39;
  transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  display:flex;align-items:center;gap:10px;padding:16px 10px;
  background:var(--ink);color:var(--bg);font:600 13px/1 var(--f-text);letter-spacing:.06em;
  border-radius:0 0 6px 6px;transition:background .25s}
.side-tab span{font-size:11px;opacity:.6}
.side-tab:hover{background:var(--lamp)}

.wa-fab{position:fixed;right:var(--pad);bottom:22px;z-index:41;
  display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 16px;
  border-radius:999px;background:var(--lamp);color:#fff;font-weight:600;font-size:15px;
  box-shadow:0 10px 28px rgba(23,21,15,.25);transition:transform .25s,background .25s}
.wa-fab:hover{transform:translateY(-2px);background:var(--ink)}
.wa-fab svg{width:22px;height:22px;fill:currentColor}

/* ── общий кадр на всю ширину ────────────────────────────── */
.bleed{position:absolute;inset:0;margin:0;overflow:hidden}
.bleed>img{width:100%;height:100%;object-fit:cover}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,22,26,.5) 0%,rgba(20,22,26,0) 26%,
    rgba(20,22,26,.28) 52%,rgba(20,22,26,.82) 100%)}
.scrim-soft{background:linear-gradient(180deg,rgba(20,22,26,.45) 0%,rgba(20,22,26,0) 28%,
    rgba(20,22,26,.55) 66%,rgba(20,22,26,.9) 100%)}
.scrim-hard{background:linear-gradient(180deg,rgba(20,22,26,.68) 0%,rgba(20,22,26,.5) 40%,
    rgba(20,22,26,.93) 100%)}

/* ── герой ───────────────────────────────────────────────── */
.hero-sec{position:relative;height:100svh;min-height:520px;overflow:hidden;
  display:flex;align-items:flex-end}
.hero-sec .bleed>img{transform:scale(var(--zoom));transform-origin:52% 46%;will-change:transform}
.hero{position:relative;z-index:2;width:100%;padding:0 var(--pad) clamp(28px,6vh,64px)}
.hero-kicker{font:500 12px/1.5 var(--f-text);letter-spacing:.18em;text-transform:uppercase;
  color:#E9A863;margin-bottom:clamp(10px,2vh,18px)}
.hero-title{font:900 clamp(40px,11.5vw,164px)/.86 var(--f-disp);letter-spacing:-.045em;
  text-transform:uppercase;color:#F6F2EA}
.hero-title span{display:block}
.hero-title span+span{margin-top:-.04em}
.hero-sub{margin-top:clamp(14px,2.4vh,26px);max-width:44ch;
  font-size:clamp(15px,1.4vw,20px);line-height:1.45;color:rgba(246,242,234,.9)}

/* ── строка брони ────────────────────────────────────────── */
.book-sec{position:relative;z-index:5;margin-top:-38px}
.book{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:12px;align-items:end;
  padding:18px;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 46px rgba(23,21,15,.13)}
.bf{display:flex;flex-direction:column;gap:6px;min-width:0}
.bf span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.bf input,.bf select{height:50px;padding:0 12px;border-radius:9px;background:var(--bg);
  color:var(--ink);border:1px solid var(--line);font:400 15px/1 var(--f-text);
  appearance:none;-webkit-appearance:none;width:100%}
.bf input:focus,.bf select:focus{border-color:var(--lamp);outline:none}
.book-btn{min-height:50px;white-space:nowrap}
.book-out{display:block;margin-top:14px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.book-out b{display:block;font-weight:600;color:var(--ink)}

/* ── секции ──────────────────────────────────────────────── */
.sec{padding-block:clamp(56px,9vh,110px)}
.sec-alt{background:var(--bg-2)}

/* домики */
.units{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,34px);margin-top:38px}
.unit{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden}
.unit figure{margin:0;overflow:hidden;background:var(--bg-2)}
.unit img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,1,.36,1)}
.unit:hover img{transform:scale(1.04)}
.unit-b{padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;flex:1}
.unit h3{font:700 clamp(22px,2.4vw,30px)/1.1 var(--f-disp);letter-spacing:-.03em}
.cap{margin-top:6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--lamp)}
.txt{margin-top:12px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.rate{margin-top:16px;border-top:1px solid var(--line-2)}
.rate div{display:flex;justify-content:space-between;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line-2)}
.rate dt{font-size:14px;color:var(--ink-2)}
.rate dd{font:700 19px/1 var(--f-text);font-variant-numeric:lining-nums tabular-nums}
.unit-b .btn{margin-top:auto;align-self:flex-start;margin-top:18px}

/* три колонки списков */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:38px}
.ticks li{position:relative;padding:10px 0 10px 26px;border-bottom:1px solid var(--line-2);
  font-size:15px;line-height:1.45}
.ticks li::before{content:'';position:absolute;left:2px;top:17px;width:9px;height:9px;
  border-radius:50%;background:var(--lamp)}
.ticks-q li::before{background:none;border:1.5px solid var(--ink-3);width:8px;height:8px;top:18px}

/* чем заняться */
.acts{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(24px,4vw,64px);margin-top:38px;align-items:start}
.act-list li{display:grid;grid-template-columns:56px 1fr;gap:14px 16px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line-2)}
.act-list img{width:56px;height:auto;grid-row:span 2;align-self:center;opacity:.85}
.act-list b{font:600 17px/1.2 var(--f-text);align-self:end}
.act-list span{font-size:14px;line-height:1.45;color:var(--ink-2);align-self:start}

/* полоса фото */
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:clamp(28px,4vh,48px)}
.strip figure{margin:0}
.strip img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;
  transition:transform .7s cubic-bezier(.22,1,.36,1)}
.strip figure:hover img{transform:scale(1.05)}
.strip figcaption{margin-top:8px;font-size:12.5px;color:var(--ink-3)}

/* ── сцена день/ночь ─────────────────────────────────────── */
.scene{position:relative;height:calc(100svh + 900px);background:var(--dark)}
.scene-stick{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.wipe>img{position:absolute;inset:0}
.w-night{object-position:50% 56%}
.w-day{object-position:50% 60%;clip-path:inset(0 calc((1 - var(--wipe)) * 100%) 0 0)}
.w-edge{position:absolute;top:0;bottom:0;left:calc(var(--wipe) * 100%);width:2px;z-index:2;
  background:linear-gradient(180deg,transparent,var(--lamp) 18%,var(--lamp) 82%,transparent)}
.stamp{position:absolute;top:calc(var(--pad) + 46px);z-index:3;padding:7px 15px;border-radius:999px;
  border:1px solid rgba(246,242,234,.3);background:rgba(20,22,26,.4);backdrop-filter:blur(6px);
  color:#F6F2EA;font:600 13px/1 var(--f-text);letter-spacing:.06em}
.stamp-l{left:var(--pad)}
.stamp-r{right:var(--pad)}
.pool-copy{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(28px,6vh,60px);
  z-index:3;max-width:640px}

/* ── альбом ──────────────────────────────────────────────── */
/* ровная сетка, а не колоночная кладка: у ленивых картинок нет размеров
   до загрузки, и кладка схлопывала секцию в ноль */
.grid{margin-top:32px;display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.grid button{display:block;width:100%;padding:0;border:0;background:var(--bg);cursor:pointer;
  border-radius:8px;overflow:hidden;aspect-ratio:1/1}
.grid img{width:100%;height:100%;object-fit:cover;border-radius:8px;
  transition:transform .6s cubic-bezier(.22,1,.36,1),filter .3s}
.grid button:hover img{transform:scale(1.04);filter:brightness(1.06)}

.more{margin-top:26px}
.lbox[hidden]{display:none}
.lbox{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:rgba(16,15,12,.94);padding:clamp(12px,4vw,56px)}
.lbox img{max-width:100%;max-height:86svh;width:auto;height:auto;border-radius:6px}
.lb-close,.lb-prev,.lb-next{position:absolute;z-index:2;width:52px;height:52px;border:0;
  border-radius:50%;background:rgba(246,242,234,.12);color:#F6F2EA;font-size:26px;
  cursor:pointer;display:grid;place-items:center;transition:background .2s}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(246,242,234,.26)}
.lb-close{top:20px;right:20px;font-size:20px}
.lb-prev{left:14px;top:50%;transform:translateY(-50%)}
.lb-next{right:14px;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;bottom:18px;left:0;right:0;text-align:center;
  color:rgba(246,242,234,.6);font-size:13px}

/* ── журнал ──────────────────────────────────────────────── */
.jr-lede{margin-top:30px;max-width:66ch}
.jr-lede p{font-size:16px;line-height:1.5;color:var(--ink-2)}
.jr-lede p b{color:var(--ink)}
.jr-lede p+p{margin-top:8px;font-size:14.5px}
.jr{margin-top:32px;overflow-x:auto;scrollbar-width:none}
.jr::-webkit-scrollbar{display:none}
.jr-rows{display:grid;gap:5px;min-width:max-content}
.jr-row{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:14px}
.jr-name{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:right}
.jr-cells{display:flex;gap:3px}
.jr-c{width:18px;height:18px;border:1px solid var(--line-2);border-radius:3px;flex:0 0 auto;
  transition:background .3s,opacity .35s,transform .35s}
.jr-c.on{background:var(--ink);border-color:var(--ink)}
.jr-c.hide{opacity:0;transform:scale(.4)}
.jr-axis{display:flex;align-items:center;gap:14px;margin-top:12px;padding-left:106px;
  font-size:11px;color:var(--ink-3);min-width:max-content}
.jr-axis i{flex:1;height:1px;background:var(--line-2);min-width:60px}
.bignums{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,44px);margin-top:40px}
.bignums div{border-top:1px solid var(--line);padding-top:14px}
.bignums dt{font:700 clamp(34px,5vw,66px)/1 var(--f-disp);letter-spacing:-.04em;
  font-variant-numeric:lining-nums tabular-nums}
.bignums dd{margin-top:8px;font-size:14px;line-height:1.35;color:var(--ink-2)}

/* ── вопросы ─────────────────────────────────────────────── */
.qs{margin-top:30px;display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(20px,4vw,56px)}
.qs li{position:relative;padding:14px 0 14px 30px;border-bottom:1px solid var(--line-2);
  font-size:16px;line-height:1.45}
.qs li::before{content:'?';position:absolute;left:0;top:14px;
  font:700 15px/1.45 var(--f-text);color:var(--lamp)}
.sec .qs+.btn{margin-top:30px}

/* ── подвал ──────────────────────────────────────────────── */
.end{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding-block:clamp(60px,12vh,130px) clamp(26px,5vh,52px);overflow:hidden;background:var(--dark)}
.end-bleed>img{object-position:50% 42%}
.end-in{position:relative;z-index:2}
.funnel{margin-top:12px;font-size:clamp(14px,1.3vw,17px);color:rgba(246,242,234,.75)}
.facts{margin-top:30px;max-width:680px;border-top:1px solid rgba(246,242,234,.2)}
.facts div{display:flex;gap:20px;padding:11px 0;border-bottom:1px solid rgba(246,242,234,.12)}
.facts dt{flex:0 0 clamp(104px,13vw,168px);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(246,242,234,.5);padding-top:2px}
.facts dd{flex:1;font-size:15px;color:#F6F2EA}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.end-micro{margin-top:32px;font-size:12px;line-height:1.7;color:rgba(246,242,234,.5)}

/* ── появление ───────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}

/* ── мобильный ───────────────────────────────────────────── */
@media (max-width:900px){
  body{font-size:16px}
  .topnav{display:none}
  .tel{font-size:13px}
  .side-tab{padding:12px 8px;font-size:12px}
  .side-tab span{display:none}
  .wa-fab span{display:none}
  .wa-fab{width:52px;padding:0;justify-content:center;bottom:16px}

  .hero-sub{font-size:15px}
  .book-sec{margin-top:-24px}
  .book{grid-template-columns:1fr 1fr;padding:14px;gap:10px}
  .book-btn{grid-column:1/-1;width:100%}
  .bf input,.bf select{height:46px}

  .units{grid-template-columns:1fr;gap:18px}
  .cols3{grid-template-columns:1fr;gap:28px}
  .acts{grid-template-columns:1fr;gap:28px}
  .act-list img{width:44px}
  .strip{grid-template-columns:repeat(3,1fr);gap:8px}
  .strip figcaption{font-size:11.5px}

  .scene{height:calc(100svh + 620px)}
  .stamp{top:calc(var(--pad) + 44px);font-size:12px;padding:6px 12px}
  .pool-copy{max-width:none}

  .grid{grid-template-columns:repeat(3,1fr);gap:6px}
  .lb-prev,.lb-next{width:44px;height:44px}

  .jr-row{grid-template-columns:1fr;gap:3px}
  .jr-name{text-align:left}
  .jr-c{width:14px;height:14px}
  .jr-axis{padding-left:0}
  .bignums{grid-template-columns:1fr;gap:18px}
  .qs{grid-template-columns:1fr}
  .cta .btn{width:100%}
}
@media (max-width:1100px) and (min-width:901px){
  .grid{grid-template-columns:repeat(5,1fr)}
  .strip{grid-template-columns:repeat(3,1fr)}
}

/* ── движение выключено ──────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  :root{--zoom:1;--wipe:.5}
  .scene{height:auto}
  .scene-stick{position:static;height:auto;min-height:100svh}
  .rv{opacity:1;transform:none;transition:none}
  .jr-c.hide{opacity:1;transform:none}
  *{transition-duration:.001s!important}
}