/* =========================================================================
   ДИЗАЙН-ТОКЕНЫ — монохром zinc · Noto Serif + Noto Sans
   (источник правды: design-system.html)
   ========================================================================= */
:root {
  /* --- Цвета (тёплая палитра: терракота · жёлтый · крем · олива) --- */
  --bg:            #FFFFFF;
  --panel:         #FFFFFF;
  --white:         #FFFFFF; /* чистый белый — текст/бордеры/фон на тёмном и в кнопках */
  --ink:           #202020; /* основной текст */
  --ink-max:       #1A1A1A; /* заголовки / максконтраст */
  --muted:         #6E6656; /* тёплый серо-коричневый — 5.68:1 на белом, 4.99:1 на креме */
  --line:          #EAE2CF; /* тёплая светлая линия */
  --line-strong:   #DAD0B8; /* тёплый контур (инпуты, аватары) */
  --on-dark:       #FFF7EC; /* тёпло-белый текст на терракоте */
  --on-dark-muted: #FFE9D5; /* вторичный текст на терракоте (мелкий — с font-weight:500) */
  --on-dark-line:  rgba(255, 247, 236, 0.45); /* контуры на терракоте */

  /* --- Акценты --- */
  --accent:        #2d7985; /* бирюза: кнопки, тёмные секции, акценты */
  --accent-rgb:    45, 121, 133; /* тот же #2d7985 в RGB — для rgba(var(--accent-rgb), α) */
  --accent-strong: #1f5e6b; /* тёмная бирюза для мелкого текста/ссылок — 7.4:1 */
  --accent-2:      #FEE372; /* жёлтый акцент: выделение текста, бейдж, кнопка */
  --olive:         #6A6E54; /* олива — структурные элементы (намеренно выбивается) */
  --olive-soft:    rgba(106, 110, 84, 0.35); /* приглушённая олива для частых тонких линий */
  --bg-warm:       #fffbf2; /* кремовый фон секций */

  /* --- Типографика --- */
  --font-display: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --font-serif:   'Noto Serif', Georgia, serif;
  --font-body:    'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  /* Одноколоночный hero (мобайл/планшет до 1100px) — слово на всю ширину колонки */
  --fs-display: clamp(2.25rem, 9vw, 7rem);
  --fs-h2:      clamp(2.25rem, 5vw, 3.75rem);
  --fs-h3:      clamp(1.5rem, 3vw, 2.25rem);
  --fs-lead:    clamp(1.25rem, 2vw, 1.625rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight:   1.0;
  --lh-snug:    1.1;
  --lh-lead:    1.45;
  --lh-normal:  1.6;

  --tracking-caps:    0.005em;
  --tracking-eyebrow: 0.28em;
  --tracking-tight:  -0.02em;

  /* --- Отступы (база 4px) --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --gutter:  clamp(1.25rem, 4vw, 2.5rem);

  --container-lg:  32rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-5xl: 64rem;
  --container-6xl: 75rem;
  --measure:       var(--container-2xl);

  --radius-none: 0;
  --radius-sm:   0.125rem;
  --radius-md:   0.25rem;
  --radius-full: 9999px;

  /* Кнопки — размеры и скругление адаптивны по ширине вьюпорта.
     --btn-height — выше на десктопе, компактнее на мобильных
     --btn-pad-x  — горизонтальный «воздух» (ширина кнопки)
     --btn-radius — небольшое скругление, мягче на крупных экранах */
  --btn-height: clamp(54px, 1.5rem + 3.4vw, 64px);
  --btn-pad-x:  clamp(1.75rem, 1rem + 3.2vw, 2.75rem);
  --btn-radius: clamp(8px, 0.4rem + 0.8vw, 16px);

  /* Эффект «приподнятой панели» поверх hero:
     --lift        — насколько секция наезжает на hero (и высота просвета фона снизу hero)
     --lift-radius — скругление углов панелей-секций: на десктопе упирается в
     потолок 52px, на планшетах/мобилках намеренно крупнее, чем давала бы
     линейная пропорция (поднятый floor 26px + более крутой коэффициент vw) */
  --lift:        clamp(20px, 4vw, 56px);
  --lift-radius: clamp(26px, 5.5vw, 52px);

  --rule-thin:  1px;
  --rule-med:   2px;
  --rule-thick: 4px;

  /* Толщина «рамки-обводки» вокруг медиа (видео, карта) — адаптивна по ширине:
     тоньше на мобильных, массивнее на десктопе. */
  --frame-border: clamp(5px, 1.4vw, 12px);
  /* Скругление углов обрамлённых медиа-блоков (фото в hero, видео, карта) —
     идёт в паре с --frame-border, сжимается на узких экранах. Имя без привязки
     к hero: переменную используют и видео-секция, и карта вне hero. */
  --frame-radius: clamp(12px, 3.2vw, 32px);

  --shadow-sm: 0 1px 2px rgba(32, 32, 32, 0.06);
  --shadow-md: 0 8px 30px rgba(32, 32, 32, 0.08);
  --shadow-fab: 0 2px 8px rgba(0, 0, 0, 0.15); /* плавающая кнопка-телефон и её номера */

  --dur-fast:  140ms;
  --dur:       240ms;
  --dur-slow:  520ms;
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================================
   БАЗА
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* Тонкая зернистость — editorial-текстура поверх монохрома */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--accent-2); color: var(--ink-max); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-caps);
}

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

/* =========================================================================
   УТИЛИТЫ РАСКЛАДКИ
   ========================================================================= */
.wrap { width: 100%; padding: 0 var(--gutter); position: relative; z-index: 2; }
.measure { max-width: var(--measure); }
.mono  { font-family: var(--font-mono); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--muted);
}

.section { padding: var(--space-24) 0; position: relative; z-index: 2; background: var(--bg); }
.section + .section { padding-top: 0; }
.section--warm { background: var(--bg-warm); }
/* Кремовая секция визуально отличается от предыдущей белой — восстанавливаем верхний отступ */
.section + .section--warm { padding-top: var(--space-24); }
.section--dark { background: var(--accent); color: var(--on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--on-dark); }
.section--dark .eyebrow,
.section--dark .section__head p,
.section--dark .section__num { color: var(--on-dark-muted); }

.section__head { margin-bottom: var(--space-16); }
.section__num {
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--muted); display: block; margin-bottom: var(--space-4);
}
.section__head h2 { font-size: var(--fs-h2); }
.section__head p { color: var(--muted); max-width: var(--container-2xl); margin-top: var(--space-4); font-size: var(--fs-body); line-height: var(--lh-normal); }
.section__head--center { text-align: center; }
.section__head--center p { margin-left: auto; margin-right: auto; }

/* =========================================================================
   HERO / ОБЛОЖКА
   ========================================================================= */
.hero {
  position: relative;
  /* Доп. запас снизу (= --lift): создаёт полосу фона, на которую «ложится» панель */
  padding: var(--space-24) 0 calc(var(--space-16) + var(--lift));
  /* Закреплённый фон: картинка прибита к вьюпорту, контент прокручивается поверх */
  background: url("../images/backgrounds/bg-hero.jpg") center center / cover no-repeat fixed;
}
/* Градиентный оверлей поверх обложки: затемняет сторону с текстом.
   Mobile-first — текст сверху, поэтому затенение идёт сверху вниз. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.45) 35%,
    rgba(0, 0, 0, 0) 72%
  );
}
/* Контент hero — поверх оверлея */
.hero .wrap { position: relative; z-index: 1; }
/* На мобильных fixed-фон глючит (iOS Safari масштабирует/дёргает) — крепим к потоку */
@media (max-width: 767px) {
  .hero { background-attachment: scroll; }
}
.hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-12); align-items: center; }
@media (min-width: 1100px) {
  .hero { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; padding: var(--space-16) 0 calc(var(--space-16) + var(--lift)); }
  .hero .wrap { width: 100%; }
  /* Одноколоночный центрированный layout (видео вынесено в отдельную секцию):
     сетка остаётся 1fr (базовое правило), увеличиваем только межблочный gap.
     Размер заголовка для широкого экрана задаётся ниже, ПОСЛЕ базового
     правила .hero h1 (иначе оно перебивает медиазапрос по порядку в каскаде). */
  .hero__grid { gap: var(--space-16); }
  /* Контент центрирован по вертикали (hero = 100vh, flex align center), поэтому
     боковой градиент заменяем на вертикальный скрим с тёмной серединой — он
     держит читаемость лида/плашки/кнопок над ярким центром обложки и плавно
     гаснет к низу (там белая секция «наезжает» скруглением). */
  .hero::before {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.5) 28%,
      rgba(0, 0, 0, 0.5) 68%,
      rgba(0, 0, 0, 0) 92%
    );
  }
}
.hero__eyebrow { margin-bottom: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 7vw, 3.75rem);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-caps);
  margin-bottom: var(--space-6);
}
/* Двухколоночный режим (≥1100px): заголовок двустрочный («Первый ретрит» /
   «СибАНАНДЫ»), самая широкая строка ≈ 7.2×font-size. Начало — 60px (сшито
   с мобильным капом 3.75rem), кеп 7rem. Правило идёт ПОСЛЕ базового .hero h1. */
@media (min-width: 1100px) {
  .hero h1 { font-size: clamp(3.75rem, calc(6.3vw - 9px), 7rem); }
}
.hero__date {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--ink);
  margin-bottom: var(--space-8);
}
.hero__lead {
  font-size: var(--fs-lead); color: var(--ink);
  max-width: var(--container-2xl); line-height: var(--lh-lead);
  margin-bottom: var(--space-3);
}
.hero__place {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.32em 0.85em 0.32em 0.65em;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  margin-bottom: var(--space-8);
}
.hero__place svg { flex-shrink: 0; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Центрированный layout первого экрана (видео вынесено в отдельную секцию).
   Размеры/шрифты не меняются — только выключка по центру. */
.hero__grid { text-align: center; }          /* h1, дата, лид, плашка-место — по центру */
.hero__eyebrow { justify-content: center; }  /* eyebrow — flex, центрируем явно */
.hero__cta { justify-content: center; }      /* кнопки CTA — flex, центрируем явно */
.hero__lead { margin-inline: auto; }         /* лид имеет max-width — центрируем сам блок */

/* Все тексты hero — белые поверх затемнённой обложки, отличаются прозрачностью */
.hero h1 { color: var(--white); }
.hero__eyebrow { color: rgba(255, 255, 255, 0.82); }
.hero__date { color: rgba(255, 255, 255, 0.95); }
.hero__lead { color: rgba(255, 255, 255, 0.9); }
.hero__place { color: rgba(255, 255, 255, 0.82); }

.hero__media { position: relative; }
.hero__media-frame {
  border: var(--frame-border) solid var(--white);
  background: var(--white);
  border-radius: var(--frame-radius);
  overflow: hidden;
}
.hero__media video {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: filter var(--dur-slow) var(--ease);
}
.hero__media:hover video, .hero__media:focus-within video { filter: grayscale(0) contrast(1); }
/* Адаптивный плеер Бумстрим */
.hero__media [data-boomstream-code] {
  display: block; position: relative; width: 100%; aspect-ratio: 848 / 464;
  background-color: var(--white); /* белый фон, пока плеер не подгрузился */
}
/* Спиннер загрузки по центру блока. После загрузки iframe плеера перекрывает его. */
.hero__media [data-boomstream-code]::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border: 3px solid #e3e1dd;
  border-top-color: #b9b5ad;
  border-radius: 50%;
  animation: hero-player-spin 0.8s linear infinite;
}
.hero__media [data-boomstream-code] iframe {
  display: block; width: 100%; height: 100%; border: 0;
  position: relative; z-index: 1; /* поверх спиннера */
}
@keyframes hero-player-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__media [data-boomstream-code]::before { animation: none; }
}
/* Таблетка-подпись СОЕДИНЕНА с низом видео-рамки (продолжает её белым фоном),
   ширина по содержимому, по центру; скругление только снизу.
   Все отступы текста = толщине бордера рамки (--frame-border). Сверху собственный padding
   нулевой — его роль уже играет бордер рамки между видео и текстом; снизу и по бокам
   задаём ровно --frame-border. Итог: текст симметрично отстоит на толщину бордера со всех
   сторон, и это масштабируется вместе с адаптивным бордером. */
.hero__media figcaption {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--white);
  padding: 0 var(--frame-border) calc(var(--frame-border) - 3px);
  border-radius: 0 0 var(--space-3) var(--space-3);
}
/* Вогнутые сопряжения (negative radius) в стыках боковых граней таблетки с нижней
   кромкой рамки: белый «филлет» через radial-gradient — прозрачная четверть круга
   обращена к фону hero, остальное белым продолжает рамку и таблетку без резкого угла. */
.hero__media figcaption::before,
.hero__media figcaption::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--space-3); height: var(--space-3);
}
.hero__media figcaption::before {
  right: 100%;
  background: radial-gradient(circle at bottom left, transparent var(--space-3), var(--white) calc(var(--space-3) + 0.5px));
}
.hero__media figcaption::after {
  left: 100%;
  background: radial-gradient(circle at bottom right, transparent var(--space-3), var(--white) calc(var(--space-3) + 0.5px));
}
/* На мобильных приподнимаем таблетку на 1px, чтобы она слегка наезжала на нижний
   бордер видео-рамки (без смещения layout — через transform). */
@media (max-width: 767px) {
  .hero__media figcaption { transform: translateY(-1px); }
}

/* =========================================================================
   ВИДЕООБРАЩЕНИЕ — самостоятельный блок (между «О ретрите» и «Наставниками»)
   Та же конструкция, что у .hero__media, но рамка/лейбл в бренд-акценте,
   чтобы видео читалось на белом фоне секции.
   ========================================================================= */
.video-intro__media {
  position: relative;
  max-width: var(--container-5xl);   /* центрированная ширина, ~64rem; не на всю секцию */
  margin-inline: auto;
}
/* Рамка в бренд-акценте (в hero была белой) */
.video-intro__frame {
  border: var(--frame-border) solid var(--accent);
  background: var(--accent);
  border-radius: var(--frame-radius);
  overflow: hidden;
}
/* Адаптивный плеер Бумстрим — те же размеры/спиннер, что и в hero */
.video-intro__media [data-boomstream-code] {
  display: block; position: relative; width: 100%; aspect-ratio: 848 / 464;
  background-color: var(--accent); /* фон до загрузки — в тон рамке */
}
.video-intro__media [data-boomstream-code]::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border: 3px solid rgba(255, 255, 255, 0.45);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: hero-player-spin 0.8s linear infinite; /* keyframes общий, объявлен выше */
}
.video-intro__media [data-boomstream-code] iframe {
  display: block; width: 100%; height: 100%; border: 0;
  position: relative; z-index: 1; /* поверх спиннера */
}
@media (prefers-reduced-motion: reduce) {
  .video-intro__media [data-boomstream-code]::before { animation: none; }
}
/* Таблетка-подпись — продолжает рамку, но в акценте; текст светлый для контраста */
.video-intro__media figcaption {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--on-dark);
  background: var(--accent);
  padding: 0 var(--frame-border) calc(var(--frame-border) - 3px);
  border-radius: 0 0 var(--space-3) var(--space-3);
}
/* Вогнутые сопряжения (филлеты) — акцентным цветом вместо белого */
.video-intro__media figcaption::before,
.video-intro__media figcaption::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--space-3); height: var(--space-3);
}
.video-intro__media figcaption::before {
  right: 100%;
  background: radial-gradient(circle at bottom left, transparent var(--space-3), var(--accent) calc(var(--space-3) + 0.5px));
}
.video-intro__media figcaption::after {
  left: 100%;
  background: radial-gradient(circle at bottom right, transparent var(--space-3), var(--accent) calc(var(--space-3) + 0.5px));
}
@media (max-width: 767px) {
  .video-intro__media figcaption { transform: translateY(-1px); }
}

/* =========================================================================
   НАВИГАЦИЯ — меню в шапке (hero). Не липкое: живёт только поверх обложки,
   уезжает вместе с hero при скролле. Десктоп — ссылки в ряд, мобайл — бургер
   слева + выезжающая слева панель (телефонная FAB на мобайле — справа сверху).
   ========================================================================= */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4) var(--gutter);
}
/* Лёгкий верхний scrim — поднимает контраст светлых ссылок над обложкой
   (на десктопе правый край градиента hero светлее). */
.nav::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 140px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0));
}

/* --- Ссылки в ряд (база — десктоп/планшет ≥768px) --- */
.nav__menu {
  position: relative;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-6); list-style: none;
}
.nav__link {
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.9); text-decoration: none;
  letter-spacing: 0.01em; white-space: nowrap;
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--white); }
.nav__link:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: 2px; }

/* «Регистрация» — кнопка-акцент */
.nav__link--cta {
  display: inline-flex; align-items: center;
  padding: 0.5em 1.15em; border-radius: var(--radius-full);
  background: var(--accent); color: var(--white);
  box-shadow: var(--shadow-md);
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.nav__link--cta:hover, .nav__link--cta:focus-visible { background: var(--accent-strong); color: var(--white); }
.nav__link--cta:active { transform: scale(0.97); }

/* --- Бургер и scrim: на десктопе скрыты --- */
.nav__burger { display: none; }
.nav__scrim { display: none; }

/* --- Мобайл (≤767px): бургер слева + выезжающая слева панель --- */
@media (max-width: 767px) {
  .nav {
    /* выше FAB-телефона (49) и sticky-CTA (50): весь стек-контекст панели
       с её scrim перекрывает плавающие кнопки */
    z-index: 60;
    top: calc(var(--space-2) + env(safe-area-inset-top, 0px));
    left: calc(var(--space-2) + env(safe-area-inset-left, 0px));
    right: auto;
  }
  .nav::before { display: none; }

  /* Кнопка-бургер */
  .nav__burger {
    position: relative; z-index: 61;
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 48px; height: 48px; padding: 0 12px;
    border: none; border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.32); cursor: pointer;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  .nav__burger:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
  .nav__burger-line {
    display: block; height: 2px; width: 100%; border-radius: 2px;
    background: var(--white);
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  /* При открытии бургер становится крестиком и уезжает в правый верхний
     угол выезжающей панели (на белом фоне — тёмные линии), чтобы не
     накрывать пункты меню. */
  .nav.is-open .nav__burger {
    position: fixed; right: auto;
    top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
    left: calc(min(80vw, 320px) - 48px - var(--space-3));
    background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .nav.is-open .nav__burger-line { background: var(--ink); }
  .nav.is-open .nav__burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav__burger-line:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Панель-drawer */
  .nav__menu {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: min(80vw, 320px);
    flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    gap: var(--space-2);
    padding: calc(var(--space-16) + env(safe-area-inset-top, 0px)) var(--space-6) var(--space-8);
    background: var(--bg); box-shadow: var(--shadow-md);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease);
  }
  .nav.is-open .nav__menu { transform: none; }

  .nav__link {
    display: block;
    color: var(--ink); font-size: var(--fs-body);
    padding: var(--space-3) 0;
  }
  .nav__link:hover, .nav__link:focus-visible { color: var(--accent-strong); }
  /* CTA в панели — на всю ширину */
  .nav__link--cta {
    display: flex; justify-content: center; margin-top: var(--space-4);
    padding: var(--space-3) var(--space-6);
    color: var(--white);
  }

  /* Затемнение фона под панелью */
  .nav__scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur);
  }
  .nav.is-open .nav__scrim { opacity: 1; visibility: visible; }
}

/* Блокировка прокрутки страницы, пока открыта панель */
body.nav-open { overflow: hidden; }

/* Уважение к prefers-reduced-motion — без выезда, мгновенно */
@media (prefers-reduced-motion: reduce) {
  .nav__menu, .nav__burger-line, .nav__scrim { transition: none; }
}

/* =========================================================================
   ПРИПОДНЯТАЯ ПАНЕЛЬ — секция сразу за hero «лежит» поверх первого экрана
   ========================================================================= */
.hero + .section {
  position: relative;
  z-index: 2;                         /* поверх фона hero, в зоне наезда */
  margin-top: calc(-1 * var(--lift)); /* приподнимаем на величину просвета */
  background: var(--bg);              /* непрозрачный белый перекрывает фон */
  border-top-left-radius: var(--lift-radius);
  border-top-right-radius: var(--lift-radius);
  /* мягкая тень вверх + лёгкое свечение по бокам — ощущение объёма */
  box-shadow: 0 -18px 48px -12px rgba(32, 32, 32, 0.18);
  /* компенсируем наезд, чтобы контент не подскочил к верхней кромке */
  padding-top: calc(var(--space-24) + var(--lift));
}
/* у первой секции нет верхней разделительной линии — её заменяет скругление */
.hero + .section { border-top: 0; }

/* Кликабельная подсказка-стрелка на выпирающей полосе панели.
   Занимает всю верхнюю пустую зону (= padding-top), стрелка статична,
   при наведении затеняется только эта верхняя область. */
.hero + .section .scroll-cue {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--lift);          /* высота выпирающей полоски над hero */
  z-index: 3;
  display: flex;
  align-items: center;          /* текст ровно по центру белой выпирающей полоски */
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-top-left-radius: var(--lift-radius);
  border-top-right-radius: var(--lift-radius);
  -webkit-tap-highlight-color: transparent;
  /* надпись капсом тем же лёгким серым, что eyebrow/нумерация секций */
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}
.hero + .section .scroll-cue span { position: relative; z-index: 1; }
.hero + .section .scroll-cue:hover { color: var(--accent); }
/* лёгкое затенение верхней области панели при наведении — стрелка не двигается */
.hero + .section .scroll-cue::before {
  content: "";
  position: absolute; inset: 0;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background: linear-gradient(to bottom, rgba(32, 32, 32, 0.06), rgba(32, 32, 32, 0) 78%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.hero + .section .scroll-cue:hover::before,
.hero + .section .scroll-cue:focus-visible::before { opacity: 1; }
.hero + .section .scroll-cue:focus-visible { outline: none; }

/* =========================================================================
   ТЕКСТОВЫЕ КЛАССЫ
   ========================================================================= */
.t-serif { font-family: var(--font-serif); font-weight: 500; font-style: italic; line-height: 1.3; }

.prose { max-width: var(--container-3xl); margin-inline: auto; }
.prose p { font-size: var(--fs-body); line-height: var(--lh-normal); }
.prose p + p { margin-top: var(--space-6); }

/* =========================================================================
   НАСТАВНИКИ
   ========================================================================= */
.mentors {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-12) var(--space-8);
  max-width: 84rem;
}
@media (min-width: 1000px) { .mentors { grid-template-columns: repeat(4, 1fr); } }
.mentor { text-align: center; }
.mentor__name { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; }
.mentor__org  { font-size: var(--fs-small); color: var(--muted); margin-top: 2px; }

/* Фото наставника — портрет 3:4 со скруглёнными углами и масштабом при наведении */
.mentor__photo {
  display: block;
  margin: 0 auto var(--space-4);
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
  text-decoration: none;
}
@media (min-width: 600px)  { .mentor__photo { border-radius: 14px; } }
@media (min-width: 1000px) { .mentor__photo { border-radius: 18px; } }
.mentor__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.45s var(--ease-out);
}
.mentor__photo:hover img,
.mentor__photo:focus-visible img { transform: scale(1.06); }


/* =========================================================================
   ПОЛОСА-ИЗОБРАЖЕНИЕ (full-bleed)
   ========================================================================= */
.band {
  margin: 0; position: relative; z-index: 1; overflow: hidden;
  height: clamp(260px, 48vh, 560px);
  /* закреплённый цветной фон — как обложка hero (парится при скролле) */
  background: url("../images/backgrounds/bg-aksenovo-lake.jpg") center center / cover no-repeat fixed;
}
/* на мобильных fixed-фон дёргается (iOS Safari) — крепим к потоку */
@media (max-width: 767px) { .band { background-attachment: scroll; } }
/* Подпись по центру полосы — текст в стиле цитаты (.t-serif, размер h3),
   белый с лёгкой тенью для читаемости поверх фото */
.band figcaption {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: var(--gutter);
}
.band figcaption .t-serif {
  font-size: var(--fs-h3); color: var(--white); margin: 0;
  max-width: var(--container-3xl);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.band::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.55) 100%);
}

/* Соседние секции «наезжают» на фото-полосу скруглёнными кромками — тот же
   эффект приподнятой панели, что у hero+панель и Стоимость+регистрация.
   Сама полоса остаётся прямоугольной; округляются только её соседи. */

/* Секция перед полосой («Наставники») наезжает на фото скруглёнными нижними углами */
.section:has(+ .band) {
  position: relative;
  z-index: 2;                            /* поверх фона .band */
  margin-bottom: calc(-1 * var(--lift)); /* опускаемся на картинку */
  background: var(--bg);                 /* непрозрачный фон клипает radius */
  border-bottom-left-radius: var(--lift-radius);
  border-bottom-right-radius: var(--lift-radius);
  /* без box-shadow: блок «Наставники» должен быть чисто белым, без тёмной кромки
     над фото-полосой (по требованию — никаких теней у этого блока) */
  /* компенсируем наезд снизу, чтобы сетка наставников не уперлась в кромку */
  padding-bottom: calc(var(--space-24) + var(--lift));
}

/* Секция после полосы («Программа») «лежит» поверх фото скруглёнными верхними углами */
.band + .section {
  position: relative;
  z-index: 2;                          /* поверх фона .band */
  margin-top: calc(-1 * var(--lift));  /* приподнимаем на величину наезда */
  background: var(--bg);
  border-top-left-radius: var(--lift-radius);
  border-top-right-radius: var(--lift-radius);
  box-shadow: 0 -18px 48px -12px rgba(32, 32, 32, 0.18);
  /* компенсируем наезд сверху, чтобы заголовок не подскочил к кромке */
  padding-top: calc(var(--space-24) + var(--lift));
}

/* =========================================================================
   ПРОГРАММА
   ========================================================================= */
.program { display: grid; grid-template-columns: 1fr; gap: var(--space-12); }
@media (min-width: 768px) { .program { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } }
.day__head { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: var(--rule-med) solid var(--olive); }
.day__date { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); }
.day__sub  { font-size: var(--fs-small); color: var(--muted); margin-top: 2px; }

.schedule { list-style: none; }
.schedule li { display: flex; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--rule-thin) solid var(--olive-soft); align-items: baseline; }
.schedule li:last-child { border-bottom: 0; }
.schedule time { font-family: var(--font-mono); font-weight: 600; color: var(--ink); width: 56px; flex-shrink: 0; font-variant-numeric: tabular-nums; font-size: var(--fs-small); }
.schedule span { font-size: var(--fs-body); }

/* =========================================================================
   ПРОЖИВАНИЕ И ПИТАНИЕ
   ========================================================================= */
.stay { display: grid; grid-template-columns: 1fr; gap: var(--space-12); max-width: var(--container-5xl); margin-bottom: var(--space-16); }
@media (min-width: 768px) { .stay { grid-template-columns: 1fr 1fr; gap: var(--space-16); } }
.stay h3 { font-size: var(--fs-h3); margin-bottom: var(--space-6); }
/* Второй заголовок в колонке (напр. «Как добраться» под текстом «Питания») — воздух сверху */
.stay h3:not(:first-child) { margin-top: var(--space-12); }
.stay__label { display: block; margin: var(--space-6) 0 var(--space-3); }
.stay__label:first-of-type { margin-top: 0; }
.stay ul { list-style: none; }
.stay li { position: relative; padding-left: var(--space-6); margin-bottom: var(--space-3); line-height: var(--lh-normal); }
.stay li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 10px; height: var(--rule-med); background: var(--olive); }
.stay p { color: var(--ink); font-size: var(--fs-body); line-height: var(--lh-normal); }
/* Карта 2ГИС в колонке «Питание» — массивная чёрная обводка (как у видео,
   но цветом основного текста), адаптивная по толщине и скруглению. */
.stay .map { margin: 0; }
.stay .map .ya-map {
  position: relative;
  width: 100%; height: 340px;
  border: var(--frame-border) solid var(--accent);
  border-radius: var(--frame-radius);
  overflow: hidden;            /* обрезаем тайлы карты по скруглённым углам */
  background: var(--panel);
}
/* Кастомная метка-«пин» в фирменной терракоте; остриё указывает на точку.
   Сдвиг делает внутренний элемент — внешнюю обёртку двигает само API. */
.map-pin {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -100%);
  width: 34px; height: 44px;
  color: var(--accent);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
  cursor: pointer;
  transition: transform var(--dur) var(--ease);
}
.map-pin:hover, .map-pin:focus-visible { transform: translate(-50%, -100%) scale(1.08); outline: none; }
.map-pin svg { display: block; width: 100%; height: 100%; }
.stay .map figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-eyebrow); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}

/* =========================================================================
   STICKY-SPLIT — секция «О ретрите»
   ========================================================================= */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--gutter) * 2);
  align-items: stretch;
}
/* .about__left — грид-ячейка, растягивается до высоты галереи */
/* .about__sticky — sticky внутри ячейки, высота = текст, держится до конца ячейки */
.about__sticky {
  position: sticky;
  top: clamp(1.5rem, 4vw, 3rem);
}
.about__sticky .prose { margin-inline: 0; }
.about__gallery .gallery { margin-top: var(--space-4); }
@media (min-width: 900px)  { .about__gallery .gallery { columns: 2; } }
@media (max-width: 899px)  {
  .about__grid    { grid-template-columns: 1fr; }
  .about__sticky  { position: static; }
}

/* =========================================================================
   ГАЛЕРЕЯ (секции #about и #stay)
   CSS multi-column раскладка. Не masonry: у всех плиток фиксированный
   aspect-ratio 4/3 (см. .gallery__link img), поэтому высоты равны и колонки
   дают ровную сетку без ступенчатого смещения.
   ========================================================================= */
.gallery {
  columns: 2;
  column-gap: var(--space-3);
  margin-top: var(--space-16);
}
@media (min-width: 600px)  { .gallery { columns: 3; } }
@media (min-width: 1000px) { .gallery { columns: 4; } }

.gallery__link {
  display: block;
  break-inside: avoid;
  margin-bottom: var(--space-3);
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
}
@media (min-width: 600px)  { .gallery__link { border-radius: 14px; } }
@media (min-width: 1000px) { .gallery__link { border-radius: 18px; } }

.gallery__link img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  transition: transform 0.45s var(--ease-out);
}
.gallery__link:hover img,
.gallery__link:focus-visible img { transform: scale(1.06); }

/* =========================================================================
   СТОИМОСТЬ (тёмная секция)
   ========================================================================= */
.price { text-align: center; max-width: var(--container-2xl); margin: 0 auto; }
.price__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-display); line-height: var(--lh-tight);
  color: var(--ink-max); margin: var(--space-8) 0;
  font-variant-numeric: tabular-nums;
}
.price p { color: var(--muted); font-weight: 500; font-size: var(--fs-body); line-height: var(--lh-normal); margin-bottom: var(--space-8); }

.badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-none);
  background: var(--accent); color: var(--on-dark);
}
.badge--outline { background: transparent; border: var(--rule-thin) solid var(--line-strong); color: var(--ink); }
.badge--on-dark { background: transparent; border: var(--rule-thin) solid var(--on-dark-line); color: var(--on-dark); }
.badge--warm { background: var(--accent-2); color: var(--ink-max); border-radius: 0.75rem; }

/* =========================================================================
   КНОПКИ
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0 var(--btn-pad-x); height: var(--btn-height);
  border-radius: var(--btn-radius);
  border: none;
  cursor: pointer; text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: var(--rule-med) solid var(--accent); outline-offset: 3px; }
/* Кнопки без бордера — состояния различаются только заливкой и цветом текста. */
.btn--primary { background: var(--accent); color: var(--white); }
.btn--primary:hover { background: var(--white); color: var(--accent-strong); }
.btn--secondary { background: var(--panel); color: var(--accent-strong); }
.btn--secondary:hover { background: var(--accent); color: var(--white); }
/* Акцентная жёлтая кнопка (фирменный --accent-2) — тёмный текст для контраста.
   На hover — инверсия в тёмную заливку с жёлтым текстом. */
.btn--highlight { background: var(--accent-2); color: var(--ink-max); }
.btn--highlight:hover { background: var(--ink-max); color: var(--accent-2); }
.btn--highlight:focus-visible { outline-color: var(--accent-2); }
.btn--block { width: 100%; }

/* Кнопка «Подробнее» в hero — дублёр скрытой полосы-подсказки.
   Показывается только на узких экранах, где hero одноколоночный (< 900px). */
.hero__more { display: none; }
@media (max-width: 899px) {
  .hero__more { display: inline-flex; }
  /* белая полоса-подсказка на узких экранах неразличима — прячем её */
  .hero + .section .scroll-cue { display: none; }
}

/* Full-width CTA на узких экранах */
@media (max-width: 560px) {
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
}

/* Липкая кнопка регистрации (только мобайл) */
.cta-sticky {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: var(--space-4);
  z-index: 50; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.cta-sticky.is-visible { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 768px) { .cta-sticky { display: none; } }

/* =========================================================================
   ФОРМА
   ========================================================================= */
.form { max-width: var(--container-lg); margin: 0 auto; }
.field { margin-bottom: var(--space-6); }
.field label { display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: var(--space-3); }
.field input {
  width: 100%; height: 52px; padding: 0 var(--space-4);
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--ink);
  background: var(--panel); border: var(--rule-thin) solid var(--line-strong);
  border-radius: var(--radius-none);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input::placeholder { color: var(--muted); }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 -2px 0 0 var(--accent); }

/* =========================================================================
   ОБЪЕДИНЁННЫЙ ЭКРАН: РЕГИСТРАЦИЯ + ЦИТАТА (фон-картинка как hero)
   ========================================================================= */
.join {
  position: relative;
  z-index: 1;                          /* фон-картинка под наезжающей «Предоплатой» */
  /* та же закреплённая обложка, что и в hero — играет роль фона (как сам hero) */
  background: url("../images/backgrounds/bg-hero.jpg") center center / cover no-repeat fixed;
  /* запас сверху (= --lift): зона, на которую наезжает блок «Предоплата»;
     контент не должен подскочить под её скруглённую кромку */
  padding-top: calc(var(--space-24) + var(--lift));
}
/* .section + .section обнуляет padding-top у любой .section, следующей за .section.
   Специфичность (0,2,0) побеждает .join (0,1,0). Восстанавливаем через (0,2,0)+каскад. */
.section.join { padding-top: calc(var(--space-24) + var(--lift)); }
/* Затемняющий оверлей — mobile-first: форма сверху, затенение сверху вниз */
.join::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.74) 0%,
    rgba(0, 0, 0, 0.5) 32%,
    rgba(0, 0, 0, 0.32) 100%
  );
}
.join .wrap { position: relative; z-index: 1; }
/* На мобильных fixed-фон дёргается (iOS Safari) — крепим к потоку */
@media (max-width: 767px) { .join { background-attachment: scroll; } }
/* Блок «Предоплата» наезжает вниз на картинку-фон регистрации
   скруглёнными нижними углами — зеркальная аналогия эффекта hero+панель */
.section:has(+ .join) {
  position: relative;
  z-index: 2;                              /* поверх фона .join */
  margin-bottom: calc(-1 * var(--lift));   /* опускаемся на картинку */
  background: var(--bg);                   /* нужен явный фон, иначе border-radius нечего клипать */
  border-bottom-left-radius: var(--lift-radius);
  border-bottom-right-radius: var(--lift-radius);
  /* мягкая тень вниз — ощущение, что панель лежит поверх фото */
  box-shadow: 0 18px 48px -12px rgba(32, 32, 32, 0.28);
  /* Нижние --lift px — полоса наезда поверх фото. Чтобы текст стоял по центру
     всей терракотовой массы, дублируем эту прибавку и сверху — отступы симметричны */
  padding-top: calc(var(--space-24) + var(--lift));
  padding-bottom: calc(var(--space-24) + var(--lift));
}

.join__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-12); }
@media (min-width: 900px) {
  /* На десктопе блок занимает минимум всю высоту вьюпорта, контент по центру */
  .join { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; }
  .join .wrap { width: 100%; }
  /* Колонки 50/50 */
  .join__grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
  /* двухколоночный layout — форма слева, поэтому затенение слева направо */
  .join::before {
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.76) 0%,
      rgba(0, 0, 0, 0.45) 52%,
      rgba(0, 0, 0, 0.22) 100%
    );
  }
}

/* Левая колонка — регистрация прямо на фоне, белый текст (как hero) */
.join__form { text-align: center; }
.join__form .section__head { margin-bottom: var(--space-12); }
.join__form .section__num { color: rgba(255, 255, 255, 0.7); }
.join__form h2 { color: var(--white); }
.join__form .section__head p { color: rgba(255, 255, 255, 0.85); max-width: none; }
/* Форма заполняет бо́льшую часть колонки — поля и кнопка широкие, по центру */
.join .form { max-width: 32rem; margin: 0 auto; }
/* поле: вертикальная укладка (лейбл над инпутом), выровнено влево */
.join .field { margin-bottom: var(--space-4); }
.join .field label {
  text-align: left;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}
.join .form .btn--block { margin-top: var(--space-4); }
.join .field input {
  flex: 1;
  height: 60px;
  background: var(--white);
  border-color: transparent;
  border-radius: 10px;
  color: var(--ink);
  box-shadow: var(--shadow-fab);
}
.join .field input::placeholder { color: #aaa; }
.join .field input:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-fab), 0 0 0 3px rgba(var(--accent-rgb), 0.3);
  background: var(--white);
}

/* Статус отправки заявки — показывается под кнопкой после submit */
.form__status {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: 10px;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}
.form__status--ok {
  background: rgba(255, 255, 255, 0.95);
  color: #1f5a64;
}
.form__status--error {
  background: rgba(178, 34, 34, 0.92);
  color: var(--white);
}

/* Правая колонка — цитата на белой скруглённой подложке (аналогия hero) */
.join__quote {
  margin: 0;
  display: flex; align-items: center;
  background: var(--white);
  border-radius: clamp(16px, 3vw, 28px);
  box-shadow: var(--shadow-md);
  padding: clamp(var(--space-8), 5vw, var(--space-16));
}
.join__quote .t-serif {
  font-size: var(--fs-h3); color: var(--ink); margin: 0;
}

/* =========================================================================
   ФУТЕР
   ========================================================================= */
/* Футер — приподнятая панель: «наезжает» вверх на фото секции регистрации
   скруглёнными верхними углами. Та же механика, что у секции за hero
   (.hero + .section), но в конце страницы. z-index: 2 обязателен — .join
   позиционирована с z-index: 1, без этого футер ушёл бы ПОД её фон. */
footer {
  padding: var(--space-16) 0;
  background: var(--bg);              /* непрозрачный фон клипает radius и кроет фото */
  color: var(--muted);
  font-size: var(--fs-small);
  position: relative;
  z-index: 2;                         /* поверх фона .join (z-index: 1) */
  margin-top: calc(-1 * var(--lift)); /* приподнимаем на просвет — наезд на фото */
  border-top-left-radius: var(--lift-radius);
  border-top-right-radius: var(--lift-radius);
  box-shadow: 0 -18px 48px -12px rgba(32, 32, 32, 0.18); /* мягкая тень вверх */
  /* компенсируем наезд, чтобы контент не подскочил к верхней кромке */
  padding-top: calc(var(--space-16) + var(--lift));
}
/* Запас под .cta-sticky футеру НЕ нужен: кнопка прячется, как только футер
   попадает в зону видимости (см. initStickyCta), поэтому она физически не
   может наехать на контакты. Раньше здесь был увеличенный padding-bottom —
   он давал ~150px мёртвого кремового поля под номером на мобиле. */
.footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 640px) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-12); }
  /* Первая колонка — по левому краю; остальные (Когда/Где/Контакты) — по правому,
     чтобы «Контакты» прижались к правому отступу .wrap */
  .footer__grid .col:not(:first-child) { text-align: right; }
}
footer .brand { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: var(--tracking-caps); color: var(--ink); margin-bottom: var(--space-3); }
footer .col-label { display: block; margin-bottom: var(--space-3); }
footer .col p { color: var(--ink); }
footer .col p.muted { color: var(--muted); }
/* Телефоны в футере: обычный кликабельный текст без ховер-эффекта (курсор pointer от ссылки) */
.footer__phone { color: var(--ink); text-decoration: none; }

/* =========================================================================
   STAGGERED REVEAL
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); animation: reveal var(--dur-slow) var(--ease-out) forwards; }
  .reveal:nth-child(1) { animation-delay: 0.05s; }
  .reveal:nth-child(2) { animation-delay: 0.14s; }
  .reveal:nth-child(3) { animation-delay: 0.23s; }
  .reveal:nth-child(4) { animation-delay: 0.32s; }
  @keyframes reveal { to { opacity: 1; transform: none; } }
}

/* -------------------------------------------------------------------------
   REVEAL-ПРИ-СКРОЛЛЕ — спокойное появление блоков и элементов ниже hero.
   Тот же язык движения, что и .reveal (fade + подъём 18px, @keyframes reveal),
   но scroll-driven: класс .is-in ставит JS при первом входе группы в кадр.
   .js-reveal на <html> ставится синхронно в <head> только при наличии IO —
   без JS контент виден сразу (фолбэк), скрытого «залипшего» состояния не будет.
   ВАЖНО: список селекторов держать синхронным с константой SEL в index.html.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal-group] :is(
    .section__num, .section__head h2, .section__head p,
    .prose p, .mentor, .gallery__link,
    .day__head, .schedule li,
    .stay h3, .stay .eyebrow, .stay ul, .stay p, .map,
    .price__num, .price p, .badge,
    .join__form .section__head > *, .field, .btn--block, .join__quote,
    .footer__grid .col
  ) { opacity: 0; transform: translateY(18px); }

  .js-reveal [data-reveal-group] .is-in {
    animation: reveal var(--dur-slow) var(--ease-out) forwards;
    animation-delay: var(--reveal-delay, 0s);
  }
}

/* =========================================================================
   ПЛАВАЮЩАЯ КНОПКА-ТЕЛЕФОН (FAB)
   z-index: 49 — строго ниже .cta-sticky (50), выше секций (макс. 3) и noise (1).
   Десктоп/планшет (≥768px): правый нижний угол, раскрытие вверх.
   Мобайл (<768px): правый верхний угол, раскрытие вниз (внизу висит .cta-sticky).
   ========================================================================= */
.fab-call {
  position: fixed; z-index: 49;
  right: var(--gutter); bottom: var(--gutter);
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3);
  pointer-events: none;   /* клики ловят только дочерние интерактивные элементы */
}
.fab-call__toggle, .fab-call__item { pointer-events: auto; }

/* Круглая кнопка */
.fab-call__toggle {
  position: relative;
  width: 60px; height: 60px; border: none; border-radius: var(--radius-full);
  background: var(--accent); color: var(--white); cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.fab-call__toggle:hover  { background: var(--accent-strong); }
.fab-call__toggle:active { transform: scale(0.96); }
.fab-call__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Иконки телефона/крестика в одной ячейке — crossfade по .is-open */
.fab-call__icon {
  grid-area: 1 / 1; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fab-call__icon--close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.fab-call.is-open .fab-call__icon--phone { opacity: 0; transform: rotate(90deg) scale(0.6); }
.fab-call.is-open .fab-call__icon--close { opacity: 1; transform: none; }

/* Список номеров */
.fab-call__list { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }

/* Пилюли-номера (скрыты, пока меню закрыто) */
.fab-call__item {
  display: inline-flex; align-items: center;
  padding: 0 var(--space-6); height: 48px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-full);
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small);
  letter-spacing: 0.02em; text-decoration: none; white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(8px) scale(0.96); pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.fab-call__item:hover { background: var(--accent); color: var(--white); border-color: var(--accent); }
.fab-call.is-open .fab-call__item { opacity: 1; transform: none; pointer-events: auto; }
.fab-call.is-open .fab-call__item:nth-child(2) { transition-delay: 60ms; }

/* Мобайл: правый верх, раскрытие вниз */
@media (max-width: 767px) {
  .fab-call {
    top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
    bottom: auto;
    right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
    flex-direction: column-reverse;
  }
  /* список выстраивается сверху вниз; ближняя к кнопке пилюля выезжает первой */
  .fab-call.is-open .fab-call__item:nth-child(1) { transition-delay: 60ms; }
  .fab-call.is-open .fab-call__item:nth-child(2) { transition-delay: 0ms; }
}

/* Эффект мерцания — расходящееся кольцо; гаснет при открытии и при reduce-motion */
@media (prefers-reduced-motion: no-preference) {
  .fab-call__toggle::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    animation: fab-pulse 2.4s var(--ease) infinite;
  }
  .fab-call.is-open .fab-call__toggle::after { animation: none; }
  @keyframes fab-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.45); }
    70%  { box-shadow: 0 0 0 16px rgba(var(--accent-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
  }
}

/* =========================================================================
   УТИЛИТЫ
   ========================================================================= */
.u-center-x { margin-inline: auto; }   /* горизонтальное центрирование блока с max-width */
.title-sep  { margin-inline: 0.25em; } /* воздух вокруг символа-разделителя × в заголовке */