/* ============================================================================
   Wumbuilding · лендинг · визуальная система «Белый лист»
   Палитра выбрана владельцем 16.08.2026 из трёх вариантов (site/palette-choice/).
   Все контрасты посчитаны, не назначены на глаз — таблица в плане §3.1.
   ========================================================================= */

@font-face{
  font-family:"Tenor Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/fonts/tenor-sans-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Tenor Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/fonts/tenor-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+2000-206F,U+2122,U+2191,U+2193,U+2212;
}
@font-face{
  font-family:"Onest"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("assets/fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Onest"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("assets/fonts/onest-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+2000-206F,U+2122,U+2191,U+2193,U+2212;
}

:root{
  /* цвет — HEX источник истины */
  --paper:#FBFAF8;
  --paper-deep:#F1EEE9;
  --surface:#FFFFFF;
  --pine:#1E2A2E;
  --pine-soft:#55636A;
  --terra:#A83E1E;
  --terra-deep:#8E3318;
  --rule:#8F8478;
  --rule-soft:#DCD6CE;
  --moss:#3F6B4A;

  --head:"Tenor Sans",Georgia,serif;
  --body:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --gap:clamp(56px,9vw,116px);   /* вертикальный ритм между секциями */
  --pad:clamp(20px,5vw,40px);    /* боковые поля */
  --maxw:1140px;
  --readw:34rem;                 /* колонка чтения */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0; background:var(--paper); color:var(--pine);
  font:400 clamp(1rem,2.4vw,1.075rem)/1.62 var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }

h1,h2,h3{ font-family:var(--head); font-weight:400; letter-spacing:-.015em; line-height:1.12; margin:0; }
h1{ font-size:clamp(2.15rem,7vw,4rem); }
h2{ font-size:clamp(1.6rem,4vw,2.5rem); line-height:1.16; }
h3{ font-size:clamp(1.05rem,2.2vw,1.2rem); line-height:1.3; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

/* строка 58–72 знака только от 768px — на 390px это физически недостижимо */
.read{ max-width:var(--readw); }
@media (min-width:768px){ .read{ max-width:66ch; } }

a{ color:var(--terra); text-underline-offset:.18em; }
a:hover{ color:var(--terra-deep); }

:focus-visible{
  outline:2px solid var(--terra-deep);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }

section{ padding-block:var(--gap); }
section.tint{ background:var(--paper-deep); }
section + section:not(.tint):not(.hero-s){ border-top:1px solid var(--rule-soft); }

.eyebrow{
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pine-soft); margin:0 0 1.1em;
}

/* ─────────────────────────── кнопка ─────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:15px 30px;
  background:var(--terra); color:#fff; text-decoration:none;
  font:600 1rem/1.2 var(--body); letter-spacing:.005em;
  border:none; border-radius:4px; cursor:pointer;
  transition:background .16s ease;
}
.btn:hover,.btn:focus-visible{ background:var(--terra-deep); color:#fff; }
.btn--ghost{
  background:transparent; color:var(--pine); border:1px solid var(--rule);
}
.btn--ghost:hover,.btn--ghost:focus-visible{ background:var(--surface); color:var(--pine); border-color:var(--pine); }

.under{ font-size:.875rem; color:var(--pine-soft); margin-top:14px; }

/* ─────────────────────── S1 первый экран ─────────────────────── */

.hero-s{ padding-block:clamp(28px,6vw,72px) 0; }
.hero{ display:grid; gap:clamp(26px,4vw,54px); }
.hero__text{ display:flex; flex-direction:column; }
.hero h1{ margin-bottom:.5em; }
.hero__sub{ color:var(--pine-soft); max-width:32rem; margin-bottom:1.6em; }
.hero__cta{ align-self:flex-start; }
.hero__trust{
  font-size:.85rem; color:var(--pine-soft);
  margin-top:26px; padding-top:18px; border-top:1px solid var(--rule-soft);
}
.hero__photo{ margin-inline:calc(var(--pad) * -1); }
.hero__photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 20%; }

@media (min-width:900px){
  .hero{ grid-template-columns:1.08fr .92fr; align-items:center; }
  .hero__photo{ margin-inline:0; }
  .hero__photo img{ aspect-ratio:3/4; border-radius:3px; }
  .hero__trust{ max-width:30rem; }
}

/* ─────────────────────── S2 узнавание ─────────────────────── */

.cards{ display:grid; gap:18px; margin-top:clamp(28px,4vw,44px); }
.card{
  background:var(--surface); border:1px solid var(--rule-soft);
  border-left:2px solid var(--rule);
  padding:clamp(20px,3vw,28px); border-radius:3px;
}
.card p{ margin:0; color:var(--pine); }
@media (min-width:820px){ .cards{ grid-template-columns:repeat(3,1fr); gap:22px; } }

.closing{ margin-top:clamp(26px,3.5vw,38px); font-size:1.06em; }

/* ─────────────────────── S3 таймлайн ─────────────────────── */

/* на мобильном — обычный вертикальный список, все пять шагов видны целиком.
   горизонтальный скролл для обязательной информации не используется нигде */
.timeline{ margin-top:clamp(28px,4vw,44px); display:grid; gap:0; }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:0 20px;
  padding:22px 0; border-top:1px solid var(--rule-soft);
}
.step:last-child{ border-bottom:1px solid var(--rule-soft); }
.step__time{
  font-family:var(--head); font-size:.95rem; color:var(--terra);
  padding-top:.18em; white-space:nowrap; min-width:4.4em;
}
.step__body h3{ margin-bottom:.4em; }
.step__body p{ margin:0; color:var(--pine-soft); }
@media (min-width:768px){
  .step{ grid-template-columns:6.5em 1fr; gap:0 34px; padding:26px 0; }
}

.rule-note{
  margin-top:30px; padding:18px 22px;
  border:1px solid var(--rule); border-radius:3px;
  font-size:.95rem;
}

/* ─────────────────────── S4 границы ─────────────────────── */

.bounds{ display:grid; gap:26px; margin-top:clamp(28px,4vw,44px); }
.bound{ padding-top:18px; border-top:1px solid var(--rule); }
.bound b{ display:block; font-family:var(--head); font-weight:400; font-size:1.16rem; margin-bottom:.45em; }
.bound p{ margin:0; color:var(--pine-soft); }
@media (min-width:820px){ .bounds{ grid-template-columns:1fr 1fr; gap:30px 44px; } }

/* ─────────────────────── S5 кто ведёт ─────────────────────── */

.author{ display:grid; gap:clamp(24px,4vw,50px); }
.author__photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 26%; border-radius:3px; }
.author__text{ display:flex; flex-direction:column; justify-content:center; }
.author__text h2{ margin-bottom:.55em; }
.author__facts{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:10px; }
.author__facts li{
  font-size:.9rem; color:var(--pine-soft);
  padding-left:16px; position:relative;
}
.author__facts li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:1px; background:var(--terra);
}
@media (min-width:900px){
  .author{ grid-template-columns:.85fr 1.15fr; align-items:center; }
}

/* ─────────────────────── S6 что можно проверить ─────────────────────── */

.checks{ display:grid; gap:0; margin-top:clamp(28px,4vw,44px); }
.check{ padding:20px 0; border-top:1px solid var(--rule-soft); display:grid; gap:6px 30px; }
.check:last-child{ border-bottom:1px solid var(--rule-soft); }
.check b{ font-weight:600; font-size:.94rem; }
.check span{ color:var(--pine-soft); }
@media (min-width:768px){ .check{ grid-template-columns:15em 1fr; align-items:baseline; } }

/* ─────────────────────── S7 круг ─────────────────────── */

.circle{ max-width:38rem; margin-inline:auto; text-align:left; }
.circle h2{ margin-bottom:.7em; }
.circle p{ color:var(--pine-soft); }
.circle p:first-of-type{ color:var(--pine); font-size:1.06em; }

/* ─────────────────────── S8 лестница ─────────────────────── */

.ladder{ margin-top:clamp(28px,4vw,44px); display:grid; gap:0; }
.rung{
  display:grid; gap:6px 30px; padding:24px 0;
  border-top:1px solid var(--rule-soft);
}
.rung:last-child{ border-bottom:1px solid var(--rule-soft); }
.rung--first{ border-top:2px solid var(--terra); }
.rung__name{ font-family:var(--head); font-size:1.16rem; }
.rung__what{ color:var(--pine-soft); font-size:.95rem; }
.rung__price{ font-weight:600; white-space:nowrap; }
@media (min-width:820px){
  .rung{ grid-template-columns:12em 1fr 12em; align-items:baseline; }
  .rung__price{ text-align:right; }
}

/* ─────────────────────── S9 расписание и заявка ─────────────────────── */

.booking{ display:grid; gap:clamp(30px,4vw,56px); margin-top:clamp(28px,4vw,44px); }
@media (min-width:940px){ .booking{ grid-template-columns:1fr 1fr; align-items:start; } }

.dates{ display:grid; gap:12px; }
.date{
  background:var(--surface); border:1px solid var(--rule-soft); border-radius:3px;
  padding:18px 20px; display:flex; flex-wrap:wrap; gap:10px 16px;
  align-items:center; justify-content:space-between;
}
.date--soon{ border-color:var(--terra); }
.date__when b{ font-family:var(--head); font-weight:400; font-size:1.16rem; display:block; }
.date__when span{ font-size:.85rem; color:var(--pine-soft); }
.date__pick{ min-height:44px; padding:10px 18px; font-size:.9rem; }
/* Неподтверждённая дата приглушается фоном и рамкой, но НЕ прозрачностью:
   opacity умножает цвет и молча ломает посчитанный контраст —
   при .72 проверенные 6,21:1 превращались в 3,36:1 и проваливали AA. */
.date--tbd{ background:var(--paper); border-style:dashed; }
.date--tbd .date__when b{ color:var(--pine-soft); }
.date--tbd .date__pick{ display:none; }
.date__tbd{ font-size:.85rem; color:var(--pine-soft); }

.seats-note{ margin-top:14px; font-size:.85rem; color:var(--pine-soft); }

.facts{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:0; }
.facts li{ padding:13px 0; border-top:1px solid var(--rule-soft); display:grid; gap:2px 22px; }
.facts li:last-child{ border-bottom:1px solid var(--rule-soft); }
.facts b{ font-weight:600; font-size:.86rem; }
.facts span{ color:var(--pine-soft); font-size:.94rem; }
@media (min-width:600px){ .facts li{ grid-template-columns:12em 1fr; align-items:baseline; } }

.form{
  background:var(--surface); border:1px solid var(--rule-soft);
  border-radius:3px; padding:clamp(22px,3.5vw,32px);
}
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.86rem; font-weight:600; margin-bottom:7px; }
.field input,.field select{
  width:100%; min-height:50px; padding:12px 14px;
  font:400 1rem/1.4 var(--body); color:var(--pine);
  background:var(--paper); border:1px solid var(--rule); border-radius:3px;
}
.field input:focus-visible,.field select:focus-visible{ border-color:var(--terra-deep); }
.field .err{ display:none; margin-top:6px; font-size:.84rem; color:var(--terra-deep); }
.field[data-invalid] input{ border-color:var(--terra-deep); border-width:2px; }
.field[data-invalid] .err{ display:block; }

/* цель нажатия: сам чекбокс 24x24 (минимум WCAG 2.2), а кликабельная
   область — весь ряд с подписью, она заведомо выше 44px */
.consent{ display:grid; grid-template-columns:auto 1fr; gap:10px 12px;
          margin-bottom:16px; padding:6px 0; }
.consent input{ width:24px; height:24px; margin:2px 0 0; accent-color:var(--terra); flex:none; }
.consent label{ font-size:.84rem; line-height:1.5; color:var(--pine-soft);
                display:block; min-height:44px; padding-top:4px; cursor:pointer; }

.form .btn{ width:100%; }
.form__note{ margin-top:16px; font-size:.8rem; line-height:1.55; color:var(--pine-soft); }

.success{
  display:none; padding:20px 22px; border-left:2px solid var(--moss);
  background:var(--paper-deep); border-radius:3px; font-size:.95rem;
}
.form--sent .success{ display:block; }
.form--sent .form__inner{ display:none; }

.tg-block{ margin-top:26px; padding-top:22px; border-top:1px solid var(--rule-soft); }
.tg-block h3{ margin-bottom:.5em; }
.tg-block p{ color:var(--pine-soft); font-size:.94rem; }

/* ─────────────────────── S11 вопросы ─────────────────────── */

.faq{ margin-top:clamp(28px,4vw,44px); max-width:50rem; }
.qa{ border-top:1px solid var(--rule-soft); }
.qa:last-child{ border-bottom:1px solid var(--rule-soft); }
.qa__q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font:400 1.06rem/1.4 var(--head); color:var(--pine);
  padding:20px 40px 20px 0; position:relative; min-height:56px;
}
.qa__q::after{
  content:""; position:absolute; right:6px; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  transform:rotate(45deg); transition:transform .18s ease;
}
.qa__q[aria-expanded="true"]::after{ transform:rotate(225deg); margin-top:-3px; }
.qa__a{ padding:0 0 22px; color:var(--pine-soft); max-width:44rem; }
.qa__a[hidden]{ display:none; }

/* ─────────────────────── S12 финал ─────────────────────── */

.final{ text-align:center; }
.final h2{ margin-bottom:.5em; }
.final p{ color:var(--pine-soft); max-width:30rem; margin-inline:auto; margin-bottom:1.7em; }

/* ─────────────────────── футер ─────────────────────── */

footer{
  padding-block:clamp(40px,6vw,64px);
  border-top:1px solid var(--rule);
  font-size:.84rem; color:var(--pine-soft);
}
footer p{ margin-bottom:.7em; }
footer .legal-links{ display:flex; flex-wrap:wrap; gap:8px 22px; margin:16px 0; }
footer .disclaimer{ margin-top:18px; padding-top:16px; border-top:1px solid var(--rule-soft); }

/* ─────────────────────── липкая кнопка на мобильном ─────────────────────── */

.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--rule-soft);
  transform:translateY(110%); transition:transform .2s ease;
}
.sticky .btn{ width:100%; }
.sticky[data-shown]{ transform:translateY(0); }
@media (min-width:900px){ .sticky{ display:none; } }
body{ padding-bottom:0; }
@media (max-width:899px){ body{ padding-bottom:86px; } }

/* ─────────────────────── движение ─────────────────────── */

/* Контент прячется ТОЛЬКО когда скрипт объявил, что умеет его показать:
   атрибут data-anim ставится на <html> после проверки IntersectionObserver.
   Нет JS, старый браузер, reduced-motion, печать — блоки видны сразу. */
[data-anim] .reveal{ opacity:0; transform:translateY(12px); transition:opacity .5s ease,transform .5s ease; }
[data-anim] .reveal[data-in]{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  [data-anim] .reveal{ opacity:1; transform:none; }
}

@media print{
  .sticky{ display:none; }
  [data-anim] .reveal{ opacity:1; transform:none; }
}