/* =========================================================
   SailStory — общие стили (главная + страница маршрута)
   Перенос утверждённого прототипа studio/reference/prototype.
   Все цвета и размеры — в :root. Палитру не менять без клиента.
   ========================================================= */

:root {
  /* --- Палитра прототипа --- */
  --navy: #0B2545;          /* основной тёмно-синий: текст, тёмные секции, плейсхолдеры */
  --navy-raised: #13325A;   /* карточка формы на тёмном */
  --navy-deep: #071A33;     /* подвал */
  --orange: #FF8800;        /* главный акцент, кнопки */
  --orange-hover: #FF9A26;
  --orange-soft: #FFB866;   /* акцент-текст на тёмном */
  --brown: #A35200;         /* акцентный коричневый: надзаголовки, ссылки */
  --brown-on-sand: #9E4F00; /* только на песке (--sand): 4,6:1 вместо 4,4:1 у #A35200. Решение клиента 17.10 */
  --cream: #FFF8F0;         /* фон страницы */
  --sand: #F2E3C6;          /* песочный: секция капитанов, теги */
  --sand-ph: #E9D7B4;       /* песочный плейсхолдер */
  --warm-tint: #FFF1DE;     /* плашка «осталось мест» */
  --white: #FFFFFF;

  --ink: var(--navy);
  --ink-2: #23395B;         /* основной текст абзацев */
  --ink-3: #3C5675;         /* вторичный текст */
  --on-dark: #FFF8F0;
  --on-dark-2: #D8E0EA;
  --on-dark-3: #9FB0C4;

  --line: #EADBC0;          /* линия шапки, вкладок */
  --line-soft: #EFE3CC;     /* разделители в карточках, FAQ */
  --field-border: #958562;  /* рамки полей и неактивные точки карусели: тёмный тон песка, 3,6:1 к белому и 3,4:1 к крему (решение клиента 17–18; было #C9B996 — 1,9:1) */
  --line-dark: #2B4466;     /* рамки карточек на тёмном */
  --line-dark-2: #3C5675;   /* поля на тёмном */
  --line-footer: #1E3657;

  --error-on-dark: #FFA48F; /* сообщения об ошибке формы (не из прототипа — служебный) */

  /* --- Шрифты --- */
  --font-sans: 'Manrope', 'Manrope Fallback', 'Manrope Fallback Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-story: 'Lora', 'Lora Fallback', Georgia, serif;

  /* --- Шкала размеров текста (из прототипа, px) --- */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-s: 14px;
  --fs-ui: 15px;
  --fs-base: 16px;
  --fs-md: 17px;
  --fs-faq: 18px;
  --fs-lead: 19px;
  --fs-price: 20px;
  --fs-sub: 22px;
  --fs-card-title: 23px;
  --fs-h3: 24px;
  --fs-h3-lg: 26px;
  --fs-stat: 28px;
  --fs-price-lg: 34px;
  --fs-h2: 44px;
  --fs-h1-route: 52px;
  --fs-h1: 60px;

  /* --- Радиусы --- */
  --r-field: 12px;
  --r-tile: 18px;
  --r-card: 20px;
  --r-panel: 22px;
  --r-block: 24px;
  --r-aside: 26px;
  --r-hero: 28px;
  --r-pill: 999px;

  /* --- Тени --- */
  --shadow-card: 0 1px 0 rgba(11, 37, 69, .06), 0 10px 30px rgba(11, 37, 69, .07);
  --shadow-finder: 0 10px 30px rgba(11, 37, 69, .08);
  --shadow-float: 0 12px 30px rgba(11, 37, 69, .18);
  --shadow-aside: 0 14px 40px rgba(11, 37, 69, .12);
  --shadow-bar: 0 -8px 24px rgba(11, 37, 69, .12);

  /* --- Сетка и ритм --- */
  --wrap-max: 1240px;
  --gutter: 32px;
  --section-y: 80px;
  --header-h: 84px;
  --header-h-compact: 64px;  /* липкая шапка после прокрутки */
  --header-shift: calc((var(--header-h) - var(--header-h-compact)) / 2);
  --logo-compact: .77;       /* логотип 52 → 40px */
  --actions-compact: .9;     /* кнопки шапки 52/48 → 47/43px */
  /* Индикатор прокрутки «яхта» (решение клиента 22, ≥ 601px) */
  --yacht-size: 28px;
  --voyage-axis: 16px;       /* ось линии от правого края окна */
  --route-ahead: #8A7A5C;    /* пунктир «впереди» на светлом: тёмный песочный, 4,0:1 к крему */
  --route-ahead-on-dark: #6E85A3; /* пунктир на navy: 4,1:1 */
  --btn-h: 52px;
  --field-h: 48px;
  --mbar-h: 70px;

  /* --- Движение (Аниматор, studio/reviews/02-motion.md) ---
     Сайт спокойный: движение только в ответ на действие, коротко.
     JS читает эти же переменные, чтобы тайминги были в одном месте. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);     /* появление, отклик на нажатие */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* перемещение по экрану (карточки, высота) */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);  /* нижняя панель, как шторка iOS */
  --ease-color: ease;                              /* смена цвета на hover */
  --dur-press: 120ms;   /* нажатие */
  --dur-fast: 160ms;    /* цвет, hover, иконки */
  --dur-base: 200ms;    /* меню, смена вкладки и дня, сообщения формы */
  --dur-move: 260ms;    /* перестановка карточек, высота FAQ, вход панели */
  --dur-exit: 150ms;    /* уход — быстрее входа */
  --dur-intro: 520ms;   /* единственное появление на первом экране */
  --stagger: 40ms;      /* шаг между карточками при фильтре */
  --press-scale: .97;
}

/* ---------- Шрифты (свои файлы, assets/fonts; те же Manrope и Lora Italic, что были с Google) ----------
   Подмножества и unicode-range — как у Google Fonts: браузер качает только нужные файлы.
   display: swap — текст виден сразу; скачок при подмене гасят запасные шрифты ниже. */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/manrope-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/manrope-latin.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: 'Lora'; font-style: italic; font-weight: 500 600; font-display: swap;
  src: url('../fonts/lora-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 500 600; font-display: swap;
  src: url('../fonts/lora-italic-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 500 600; font-display: swap;
  src: url('../fonts/lora-italic-latin.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; }

/* ---------- Запасные шрифты под метрики Manrope и Lora ----------
   Пока веб-шрифт не пришёл (display=swap), текст набран системным шрифтом.
   Чтобы при подмене строки не перескакивали (H1 главной был 5 строк вместо 4,
   первый экран сдвигался на ~70px), системный шрифт подогнан под ширину и
   высоту строки веб-шрифта: size-adjust — по замеру ширины русского текста
   сайта в Chromium для каждого начертания, ascent/descent — из метрик
   Manrope (1066/300 на em) и Lora (1006/274), делённых на size-adjust.
   Начертание 800 подогнано по H1 главной (самый крупный текст, сдвиг заметнее
   всего): чуть уже среднего, чтобы строка «где каждый день —» не переносилась.
   Arial — Windows, macOS, iOS; Roboto — Android. Нет локального файла —
   правило пропускается, берётся следующий шрифт из --font-sans. */
@font-face { font-family: 'Manrope Fallback'; font-weight: 400; src: local('Arial'), local('ArialMT');
  size-adjust: 101.27%; ascent-override: 105.26%; descent-override: 29.62%; line-gap-override: 0%; }
@font-face { font-family: 'Manrope Fallback'; font-weight: 500; src: local('Arial'), local('ArialMT');
  size-adjust: 102.95%; ascent-override: 103.55%; descent-override: 29.14%; line-gap-override: 0%; }
@font-face { font-family: 'Manrope Fallback'; font-weight: 600; src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 97.67%; ascent-override: 109.14%; descent-override: 30.72%; line-gap-override: 0%; }
@font-face { font-family: 'Manrope Fallback'; font-weight: 700; src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 99.74%; ascent-override: 106.88%; descent-override: 30.08%; line-gap-override: 0%; }
@font-face { font-family: 'Manrope Fallback'; font-weight: 800; src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 98.20%; ascent-override: 108.55%; descent-override: 30.55%; line-gap-override: 0%; }
@font-face { font-family: 'Manrope Fallback Roboto'; font-weight: 400; src: local('Roboto'), local('Roboto-Regular');
  size-adjust: 101.22%; ascent-override: 105.32%; descent-override: 29.64%; line-gap-override: 0%; }
@font-face { font-family: 'Manrope Fallback Roboto'; font-weight: 500; src: local('Roboto'), local('Roboto-Regular');
  size-adjust: 102.90%; ascent-override: 103.60%; descent-override: 29.15%; line-gap-override: 0%; }
@font-face { font-family: 'Manrope Fallback Roboto'; font-weight: 600; src: local('Roboto Bold'), local('Roboto-Bold');
  size-adjust: 102.71%; ascent-override: 103.79%; descent-override: 29.21%; line-gap-override: 0%; }
@font-face { font-family: 'Manrope Fallback Roboto'; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold');
  size-adjust: 104.88%; ascent-override: 101.64%; descent-override: 28.60%; line-gap-override: 0%; }
@font-face { font-family: 'Manrope Fallback Roboto'; font-weight: 800; src: local('Roboto Bold'), local('Roboto-Bold');
  size-adjust: 106.04%; ascent-override: 100.53%; descent-override: 28.29%; line-gap-override: 0%; }
@font-face { font-family: 'Lora Fallback'; font-style: italic; font-weight: 500; src: local('Georgia Italic'), local('Georgia-Italic');
  size-adjust: 100.58%; ascent-override: 100.02%; descent-override: 27.24%; line-gap-override: 0%; }
@font-face { font-family: 'Lora Fallback'; font-style: italic; font-weight: 600; src: local('Georgia Italic'), local('Georgia-Italic');
  size-adjust: 101.33%; ascent-override: 99.28%; descent-override: 27.04%; line-gap-override: 0%; }

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Якоря встают под компактную липкую шапку (её видимая часть + граница 1px).
   Секции начинаются ровно под шапкой: у них свой отступ сверху, тёмные не показывают
   полоску предыдущей секции. Поля формы получают ещё запас под подпись (см. .field). */
html { scroll-padding-top: calc(var(--header-h-compact) + 1px); }
/* Системная полоса прокрутки скрыта: её роль играет «яхта» справа (≥ 601px).
   Колесо, тачпад и клавиатура прокручивают как обычно. На телефоне — системная. */
@media (min-width: 601px) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
}
/* Уменьшенное движение: без сдвигов, масштаба и поворотов.
   Короткие смены прозрачности и цвета оставлены — они помогают понять смену состояния.
   Конкретные правила — в конце файла, блок «Уменьшенное движение». */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; }
/* h2 без класса — заголовки во вкладках страниц маршрутов (были h3, но после h1 шли без h2) */
h2, h3 { line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
/* составные названия (Бока-Которская, Пханг-Нга) не рвутся на дефисе */
.nowrap { white-space: nowrap; }

a {
  color: var(--brown);
  text-decoration-thickness: 1.5px;
  text-underline-offset: .2em;
  transition: color var(--dur-fast) var(--ease-color);
}
a:hover { color: var(--navy); }

::selection { background: var(--orange); color: var(--navy); }

/* Фокус — контуром, а не тенью: outline повторяет скругление элемента сам,
   поэтому не нужно переписывать border-radius на фокусе. */
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.dark :focus-visible, .section-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--orange); }
button, .btn, .chip, .icon-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--navy); color: var(--on-dark); padding: 12px 18px; border-radius: var(--r-field);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }
.skip-link:hover, .skip-link:focus { color: var(--on-dark); } /* глобальный a:hover красил текст в navy на navy */

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

.story { font-family: var(--font-story); font-style: italic; font-weight: 500; }

/* Все капс-подписи (надзаголовки, «Глава N», даты, роли) — один трекинг .1em.
   В прототипе было три значения (.14 / .1 / .08) для одного и того же приёма. */
.eyebrow {
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brown);
}
.eyebrow-on-dark { color: var(--orange); }
.section-sand .eyebrow { color: var(--brown-on-sand); } /* «Кто вас поведёт»: мелкий текст на песке */

/* Заголовок заявки получает фокус программно (тач, «Узнать первым») — без рамки: это не элемент управления */
.h2[tabindex="-1"]:focus { outline: none; }

.h2 {
  font-size: var(--fs-h2);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-top: 12px;
  color: var(--ink);
  text-wrap: balance;
}
.section-dark .h2 { color: var(--on-dark); }


/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h);
  padding: 0 26px;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  font-family: inherit; font-weight: 700; font-size: var(--fs-base);
  line-height: 1.2; text-align: center;
  text-decoration: none; cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-color),
    color var(--dur-fast) var(--ease-color),
    border-color var(--dur-fast) var(--ease-color),
    transform var(--dur-press) var(--ease-out);
}
/* Нажатие: кнопка чуть «проседает» — интерфейс услышал палец.
   Отпускание по той же короткой кривой, без пружины. */
.btn:active, .icon-btn:active, .chip:active { transform: scale(var(--press-scale)); }
.btn-block:active { transform: scale(.985); } /* широкая кнопка: те же ~5px по краям, а не 12 */
.btn-primary { background: var(--orange); color: var(--navy); }
/* hover только там, где есть курсор: на телефоне цвет после тапа «залипал» */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--orange-hover); color: var(--navy); }
  .btn-ghost:hover { background: var(--navy); color: var(--cream); }
}
/* нажатие: из светлого hover возвращаемся в основной тон — палец «чувствует» кнопку */
.btn-primary:active { background: var(--orange); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-ghost:active { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--cream); }
.btn-sm { min-height: 46px; padding: 0 18px; font-size: var(--fs-ui); }
.btn-block { width: 100%; }

.icon-btn {
  width: 48px; height: 48px; flex: none;
  border-radius: var(--r-pill);
  border: 2px solid var(--navy);
  background: none; color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-color),
    color var(--dur-fast) var(--ease-color),
    border-color var(--dur-fast) var(--ease-color),
    transform var(--dur-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover { background: var(--navy); color: var(--cream); }
}
.icon-btn:active { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--cream); }
/* Меню: бургер ↔ крестик по aria-expanded.
   Обе иконки лежат в одной ячейке сетки и меняются поворотом на четверть оборота
   с прозрачностью: видно, что это одна кнопка, которая сменила смысл. */
.menu-toggle svg {
  grid-area: 1 / 1;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.menu-toggle .i-close { opacity: 0; transform: rotate(-90deg) scale(.8); }
.menu-toggle[aria-expanded="true"] .i-open { opacity: 0; transform: rotate(90deg) scale(.8); }
.menu-toggle[aria-expanded="true"] .i-close { opacity: 1; transform: none; }
.menu-toggle[aria-expanded="true"] { background: var(--navy); color: var(--cream); }

/* Иконки: одна видимая толщина линии (~1.9px) при любом размере.
   Атрибут stroke-width="2" на 32px давал 2.7px, на 20px — 1.7px. */
.why svg { stroke-width: 1.5; }
.chapter-icon svg { stroke-width: 1.8; }
.book-left svg { stroke-width: 2.2; }

/* ---------- Плейсхолдеры фото ---------- */
.ph {
  position: relative;
  display: flex; align-items: flex-end;
  padding: 16px;
  /* Ровная заливка, как в прототипе. Градиент-«блик» читался как
     стоковая заглушка и спорил с будущими фото. */
  background: var(--navy);
  color: var(--on-dark-2);
  font-size: var(--fs-sm); font-weight: 600;
  overflow: hidden;
}
.ph-cap {
  position: relative;
  display: inline-flex; align-items: flex-start; gap: 8px;
  max-width: 100%;
  line-height: 1.4;
}
.ph-cap::before {
  content: "";
  flex: none; width: 16px; height: 16px;
  margin-top: .1em; /* иконка по первой строке, когда подпись в две строки */
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ph-sand { background: var(--sand-ph); color: var(--navy); }
.ph-round {
  width: 88px; height: 88px; flex: none;
  border-radius: var(--r-pill);
  padding: 0; justify-content: center; align-items: center;
}

/* ---------- Поля форм ---------- */
.field label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em;
  color: var(--navy);
}
.field select, .field input, .field textarea {
  width: 100%;
  min-height: var(--field-h);
  padding: 0 14px;
  border-radius: var(--r-field);
  border: 1.5px solid var(--field-border);
  background: var(--white);
  color: var(--navy);
  font: inherit; font-size: var(--fs-base);
}
.field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230B2545' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.field textarea { padding: 12px 14px; min-height: 96px; resize: vertical; }
/* Фокус на поле (в том числе на первом ошибочном) прокручивает так, чтобы над полем
   была видна его подпись (20px + 6px) и ещё воздух — а не поле вплотную к шапке. */
.field select, .field input, .field textarea { scroll-margin-top: 40px; }
.consent input { scroll-margin-top: 24px; }
.field input::placeholder, .field textarea::placeholder { color: #62738B; } /* 4,8:1 на белом (было #7A8BA3 — 3,5:1) */
.field select, .field input, .field textarea { transition: border-color var(--dur-fast) var(--ease-color); }
@media (hover: hover) and (pointer: fine) {
  .field select:hover, .field input:hover, .field textarea:hover { border-color: var(--ink-3); }
}
/* поле в фокусе: рамка темнеет, контур садится ближе — не «плывёт» в 3px от поля */
.field select:focus-visible, .field input:focus-visible, .field textarea:focus-visible {
  border-color: var(--navy); outline-offset: 1px;
}

.dark .field label { color: var(--on-dark); }
.dark .field input, .dark .field select, .dark .field textarea { border-color: var(--line-dark-2); }
@media (hover: hover) and (pointer: fine) {
  .dark .field input:hover, .dark .field select:hover, .dark .field textarea:hover { border-color: var(--on-dark-3); }
}
.dark .field input[aria-invalid="true"] { border-color: var(--error-on-dark); }

.field-error {
  margin-top: 6px;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.4;
  color: var(--error-on-dark);
}
.field-error:empty { display: none; }

/* =========================================================
   ШАПКА
   ========================================================= */
/* Липкая шапка (решение клиента 21).
   Высота коробки шапки не меняется никогда, поэтому контент под ней не прыгает.
   Залипает с отрицательным top: верхние (--header-h − --header-h-compact) пикселей
   уезжают за край вместе со страницей, видна нижняя, компактная часть.
   Компактное состояние (.is-compact, ставит script.js по IntersectionObserver)
   только сдвигает и уменьшает содержимое transform-ом. Тень снизу — opacity. */
.site-header {
  position: sticky;
  top: calc(var(--header-h-compact) - var(--header-h));
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  z-index: 20;
}
.site-header::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%;
  height: 14px; pointer-events: none;
  background: linear-gradient(rgba(11, 37, 69, .07), rgba(11, 37, 69, 0));
  opacity: 0;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: var(--header-h);
}
.header-ready .logo, .header-ready .header-actions { transition: transform var(--dur-base) var(--ease-out); }
.header-ready.site-header::after { transition: opacity var(--dur-base) var(--ease-out); }
.logo { transform-origin: left center; }
.header-actions { transform-origin: right center; }
.is-compact .logo { transform: translateY(var(--header-shift)) scale(var(--logo-compact)); }
.is-compact .header-actions { transform: translateY(var(--header-shift)) scale(var(--actions-compact)); }
.is-compact.site-header::after { opacity: 1; }
@media (min-width: 1152px) {
  .header-ready .nav-links { transition: transform var(--dur-base) var(--ease-out); }
  .is-compact .nav-links { transform: translateY(var(--header-shift)); }
}
.logo { display: flex; align-items: center; min-height: 44px; border-radius: 8px; flex-shrink: 0; }
/* логотип никогда не сжимается флексом (Глаз, раунд 2, № 1: было 175 → 68px на 901) */
.logo img { height: 52px; width: auto; flex-shrink: 0; max-width: none; }

.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  color: var(--navy); text-decoration: none;
  font-weight: 600; font-size: var(--fs-ui);
  padding: 8px 0;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--brown); }
}

/* «Маршруты»: выпадающий быстрый переход — направление и месяц (решение клиента 25.10).
   На компьютере открывается наведением и кнопкой-стрелкой (клавиатура, планшет с касанием);
   закрывается с задержкой 120ms, чтобы курсор успел дойти до панели. В бургере — раскрывающийся блок. */
.nav-item { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-drop-toggle {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--navy); cursor: pointer;
}
.nav-drop-toggle svg { transition: transform var(--dur-base) var(--ease-out); }
.has-drop.is-open .nav-drop-toggle svg { transform: rotate(180deg); }
.nav-drop-h {
  margin: 0 0 6px;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brown);
}
.nav-drop ul { list-style: none; margin: 0; padding: 0; }
.nav-links .nav-drop a { display: block; padding: 7px 10px; margin: 0 -10px; border-radius: 10px; white-space: nowrap; }
.nav-drop-label { display: block; }
.nav-drop-hint { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-3); }

@media (min-width: 1152px) {
  .nav-drop {
    position: absolute; top: 100%; left: -24px; z-index: 5;
    padding-top: 14px; /* мостик: курсор идёт от пункта к панели, не выходя из .nav-item */
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition:
      opacity var(--dur-exit) var(--ease-out) 120ms,
      transform var(--dur-exit) var(--ease-out) 120ms,
      visibility 0s linear calc(var(--dur-exit) + 120ms);
  }
  .has-drop.is-open .nav-drop {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s;
  }
  .nav-drop-panel {
    display: grid; grid-template-columns: repeat(2, auto); gap: 0 40px;
    padding: 20px 28px 16px;
    background: var(--white);
    border: 1px solid var(--line); border-radius: var(--r-tile);
    box-shadow: var(--shadow-aside);
  }
  .nav-drop-col { min-width: 120px; }
}
@media (min-width: 1152px) and (hover: hover) and (pointer: fine) {
  .has-drop:not(.is-dismissed):hover .nav-drop {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s;
  }
  .has-drop:not(.is-dismissed):hover .nav-drop-toggle svg { transform: rotate(180deg); }
  .nav-links .nav-drop a:hover { background: var(--warm-tint); color: var(--navy); }
  .nav-links .nav-drop a:hover .nav-drop-label { color: var(--brown); }
  .nav-drop-toggle:hover { background: var(--warm-tint); }
}

.header-actions { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.header-actions .btn { white-space: nowrap; }
.menu-toggle { display: none; }

/* =========================================================
   ГЛАВНАЯ — ПЕРВЫЙ ЭКРАН
   ========================================================= */
.hero { padding: 56px 0 40px; }
.hero-grid { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.hero-text { flex: 1 1 480px; min-width: 0; }
.hero-media { flex: 1 1 520px; min-width: 0; position: relative; }

.h1 {
  font-size: var(--fs-h1);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-top: 16px;
  text-wrap: balance;
}
.h1 .story { color: var(--brown); font-weight: 600; letter-spacing: -.015em; }

.hero-lead {
  max-width: 560px;
  margin-top: 24px;
  font-size: var(--fs-lead); line-height: 1.6;
  color: var(--ink-2);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.hero-stats { display: flex; flex-wrap: wrap; gap: 28px; margin: 40px 0 0; }
.hero-stats dd { margin: 0; }
.stat-num { font-size: var(--fs-stat); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.stat-label { margin-top: 2px; font-size: var(--fs-s); color: var(--ink-3); }

.hero-photo { height: 560px; border-radius: var(--r-hero); }

.chapter-note {
  position: absolute; left: -24px; bottom: 40px;
  max-width: 300px;
  display: flex; gap: 14px; align-items: center;
  padding: 16px 20px;
  background: var(--white);
  border-radius: var(--r-tile);
  box-shadow: var(--shadow-float);
  /* Единственное появление на сайте: «закладка» ложится на фото чуть позже кадра —
     читается как страница из истории поверх картинки. Один раз, при загрузке,
     только на десктопе и планшете (на телефоне плашки нет). */
  animation: note-in var(--dur-intro) var(--ease-out) 250ms both;
}
@keyframes note-in {
  from { opacity: 0; transform: translateY(12px); }
}
.chapter-note-icon {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--r-field);
  background: var(--orange); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.chapter-note-label {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.3;
  color: var(--brown);
}
.chapter-note-text { font-weight: 700; font-size: var(--fs-ui); line-height: 1.35; margin-top: 4px; text-wrap: balance; }

.gift-badge {
  position: absolute; right: 20px; top: 20px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--orange); color: var(--navy);
  font-weight: 800; font-size: var(--fs-s); line-height: 1.2;
}

/* Быстрый подбор */
.finder-wrap { margin-top: 48px; }
.finder {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
  padding: 24px;
  background: var(--white);
  border-radius: var(--r-block);
  box-shadow: var(--shadow-finder);
  scroll-margin-top: 24px;
}
.finder-dest { flex: 1 1 220px; }
.finder-month { flex: 1 1 200px; }
.finder-who { flex: 1 1 180px; }
.finder-submit { flex: 0 0 auto; }

/* =========================================================
   СЕКЦИИ — общее
   ========================================================= */
.section { padding: var(--section-y) 0; }
.section-dark { background: var(--navy); color: var(--on-dark); }
.section-sand { background: var(--sand); }
.section-white { background: var(--white); }
section[id] { scroll-margin-top: 0; }

.section-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px;
}

/* ---------- Маршруты ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  min-height: 44px; padding: 0 20px;
  border-radius: var(--r-pill);
  border: 2px solid var(--navy);
  background: transparent; color: var(--navy);
  font-family: inherit; font-weight: 700; font-size: var(--fs-ui);
  cursor: pointer; white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-color),
    color var(--dur-fast) var(--ease-color),
    transform var(--dur-press) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover { background: rgba(11, 37, 69, .06); }
}
.chip:active { background: rgba(11, 37, 69, .12); }
.chip[aria-pressed="true"]:active { transform: none; } /* выбранный чип не нажимается — не делаем вид */
.chip[aria-pressed="true"] { background: var(--navy); color: var(--cream); cursor: default; }

.filter-status {
  margin-top: 20px;
  font-size: var(--fs-ui); color: var(--ink-3);
}
.filter-status:empty { display: none; }

.trip-grid {
  display: grid;
  /* auto-fill, а не auto-fit: при фильтре одна карточка остаётся шириной в колонку,
     а не растягивается на 1176px — иначе смена набора выглядит как скачок ширины.
     При всех четырёх маршрутах раскладка та же, что в прототипе. */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 36px;
}
.filter-status:not(:empty) + .trip-grid { margin-top: 16px; }

/* Десктоп: шесть маршрутов стоят 3 + 3 (п. 50, 19.10); если их пять — 3 + 2 (решение клиента 17.10).
   Шесть дорожек: обычная карточка занимает две (треть ряда, те же 376px при 1240),
   а если в последнем ряду после фильтра остаются две карточки — по три (половина ряда).
   «of …» считает только видимые карточки, поэтому правило работает и после фильтра:
   «Острова и экзотика» — две половины; одна карточка остаётся шириной в треть, как у Аниматора.
   Браузер без «of» просто ставит все карточки в треть ряда. */
@media (min-width: 960px) {
  .trip-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .trip { grid-column: span 2; }
  .trip:nth-child(3n + 1 of .trip:not([hidden])):nth-last-child(2 of .trip:not([hidden])),
  .trip:nth-child(3n + 1 of .trip:not([hidden])):nth-last-child(2 of .trip:not([hidden])) ~ .trip { grid-column: span 3; }
}

.card {
  display: flex; flex-direction: column;
  background: var(--white);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.trip-photo { height: 220px; }
.trip-badge {
  position: absolute; top: 14px; left: 14px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--orange); color: var(--navy);
  font-size: var(--fs-sm); font-weight: 800; line-height: 1.2;
}
/* Ритм: дата прижата к заголовку, курсив — к заголовку, теги отделены,
   низ карточки — отдельный уровень. Было: везде одинаковые 12px. */
.trip-body {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 22px 22px 22px;
}
.trip-when {
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.3;
  color: var(--brown);
}
.trip-title { margin-top: 8px; font-size: var(--fs-card-title); line-height: 1.15; font-weight: 800; letter-spacing: -.015em; }
.trip-story { margin-top: 6px; font-size: var(--fs-md); color: var(--ink-2); line-height: 1.4; text-wrap: pretty; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 16px 0 20px; padding: 0; }
.tags li {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--sand);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.3;
}
.trip-foot {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
/* «Узнать первым» не рвётся на две строки. Если цене и кнопке тесно (карточка в треть
   ряда на 960–1100px, «Узнать первым» на планшете) — кнопка целиком уходит под цену. */
.trip-foot { flex-wrap: wrap; column-gap: 8px; row-gap: 14px; }
.trip-foot .btn { flex: none; white-space: nowrap; padding: 0 16px; }
/* Перенос кнопки зависит только от ширины карточки, а не от длины надписи:
   в одном ряду у всех карточек низ устроен одинаково (на 768 «Узнать первым»
   уходило под цену, а соседнее «Подробнее» оставалось справа). */
/* Контейнер — сам низ карточки, а не .trip: у контейнера отключается subgrid (ниже).
   Низ уже карточки на поля 2 × 22px: 327px здесь — те же 371px карточки.
   Цена на всю ширину — кнопка уходит на строку ниже, к левому краю. */
@media (min-width: 601px) {
  .trip-foot { container-type: inline-size; }
  @container (max-width: 327px) {
    .trip-foot > div { flex-basis: 100%; }
  }
}
/* Карточки одного ряда на общих строках (subgrid): фото, шапка (дата, заголовок, описание), теги, низ.
   Описание разной длины больше не сдвигает теги — они стоят на одном уровне у всех карточек ряда
   (просьба клиента 25.10). На телефоне лента без тегов — там не нужно. */
@media (min-width: 601px) {
  @supports (grid-template-rows: subgrid) {
    .trip { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .trip-body { grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 0; }
    .tags { align-self: start; }
    .trip-foot { grid-row: 3; }
  }
}
.trip-boat { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.3; }
.trip-price { margin-top: 2px; font-size: var(--fs-price); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; }
.trip-price span { font-size: var(--fs-s); font-weight: 600; letter-spacing: 0; color: var(--ink-3); }

.trips-note { margin-top: 28px; font-size: var(--fs-ui); color: var(--ink-3); }
.trips-note a { font-weight: 700; }
/* «для пары в одной каюте» — второй строкой под «от N ₽ / место» (LEGAL-RULES п. 2) */
.trip-price .trip-price-note { display: block; margin-top: 2px; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; white-space: normal; }
/* общая оговорка под карточками: перед абзацем «Не нашли свои даты?» */
.trips-extra { margin-top: 24px; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-3); }
.trips-extra + .trips-note { margin-top: 8px; }
/* Точки карусели — только на телефоне, где карточки листаются вбок.
   Кнопка 28 × 32 (удобно попасть пальцем), точка внутри — 8px.
   Активная — оранжевая и вытянута в «пилюлю»: состояние видно не только цветом.
   Переход сдержанный: цвет и ширина точки, --dur-base / --ease-out. */
.trip-dots { display: none; }
.trip-dot {
  position: relative;
  width: 32px; height: 44px; padding: 0;
  background: none; border: 0; border-radius: var(--r-pill);
  cursor: pointer;
}
.trip-dot::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--field-border);
  transform: translate(-50%, -50%);
  transition:
    width var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}
.trip-dot[aria-current="true"]::before { width: 20px; background: var(--orange); }
/* неактивные точки — --field-border: 3,4:1 к крему (решение клиента 18) */
.trip-dot:focus-visible { outline-offset: 0; }

/* ---------- Один день — одна глава ---------- */
.h2-day { max-width: 760px; }
.chapters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 44px;
}
.chapter {
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 14px;
  align-content: start;
  padding: 28px;
  border: 1.5px solid var(--line-dark);
  border-radius: var(--r-panel);
}
.chapter-icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--orange); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.chapter-time { align-self: center; font-size: var(--fs-ui); font-weight: 700; line-height: 1.3; color: var(--orange-soft); }
.chapter-title { grid-column: 1 / -1; font-size: var(--fs-h3); margin: 22px 0 8px; }
.chapter-text { grid-column: 1 / -1; font-size: var(--fs-base); line-height: 1.6; color: var(--on-dark-2); }

/* ---------- Почему с нами спокойно ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.why { padding: 26px; background: var(--white); border-radius: var(--r-card); }
.why svg { color: var(--brown); }
.why svg { display: block; }
.why h3 { font-size: var(--fs-lead); margin: 18px 0 8px; }
.why p { line-height: 1.55; color: var(--ink-3); }

/* ---------- Капитаны ---------- */
.captains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 32px;
  margin-top: 40px;
}
.captain {
  display: flex; flex-wrap: wrap;
  /* Фото над текстом (узкая карточка, 960–1100): строки не растягиваются под высоту
     соседней карточки, иначе фото выходили разной высоты и имена стояли вразнобой (№ 9) */
  align-content: flex-start;
  background: var(--cream);
  border-radius: var(--r-block);
  overflow: hidden;
}
/* Фото и текст в одном ряду (карточка ≥ 480px = 220 + 260 базы): ряд тянется на всю
   высоту карточки, иначе у карточки с коротким био под фото оставался пустой фон,
   когда соседняя карточка длиннее (14-eye, № 1). Ширина карточки = (сетка − 32) / 2,
   поэтому порог считается от ширины сетки: 2 × 480 + 32 = 992px.
   Когда фото над текстом, остаётся flex-start (см. выше). */
@media (min-width: 601px) {
  .captains { container-type: inline-size; }
  @container (min-width: 992px) {
    .captain { align-content: stretch; }
  }
}
.captain-photo { flex: 1 1 220px; min-height: 300px; }
.captain-body { flex: 1 1 260px; padding: 28px; }
.captain-role {
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.3;
  color: var(--brown);
}
.captain-name { font-size: var(--fs-h3-lg); margin: 6px 0 14px; letter-spacing: -.015em; }
.captain-bio { line-height: 1.6; color: var(--ink-2); }
.captain-qual { margin-top: 14px; font-size: var(--fs-s); color: var(--ink-3); }

/* ---------- Фильмы и отзывы ---------- */
/* Фильмы — лента-карусель (21-films-carousel). Плиток сколько угодно (их число задаёт база).
   Видно --films-per-view плиток целиком и край следующей (--films-peek) — подсказка, что лента листается.
   Если плиток меньше, чем помещается, они растягиваются на всю ширину (flex-grow), листать нечего —
   films.js прячет кнопки. Без JS лента всё равно прокручивается: свайп, тачпад, Shift + колесо,
   стрелки на фокусе. Лента обрезана ровно по краю контейнера (по нему же стоят шапка блока и кнопки).
   --films-pad — запас сверху и снизу под кольцо фокуса ленты; отрицательные поля его возвращают. */
.films {
  --films-per-view: 3;
  --films-gap: 24px;
  --films-peek: 56px;
  --films-pad: 8px;
  display: flex;
  gap: var(--films-gap);
  margin: calc(36px - var(--films-pad)) 0 calc(-1 * var(--films-pad));
  padding: var(--films-pad) 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
/* с JS листают кнопки — системная полоса прокрутки не нужна (как у ленты маршрутов) */
.films.is-ready { scrollbar-width: none; }
.films.is-ready::-webkit-scrollbar { display: none; }
.films:focus-visible { outline-offset: 0; border-radius: var(--r-card); }
/* Плитка в ленте: кольцо снаружи срезала бы граница прокрутки — рисуем его внутри,
   оранжевым, как фокус на тёмном (.section-dark :focus-visible) */
.films > .film:focus-visible { outline-color: var(--orange); outline-offset: -6px; }
.films > .film {
  flex: 1 0 calc((100% - var(--films-per-view) * var(--films-gap) - var(--films-peek)) / var(--films-per-view));
  min-width: 0;
  scroll-snap-align: start;
}
/* Кнопки «назад / вперёд»: под лентой справа, круглые с обводкой navy (.icon-btn, как .btn-ghost).
   Выводятся с hidden; films.js показывает их, только когда есть что листать. */
.films-nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; }
@media (min-width: 601px) { .films-nav:not([hidden]) + .reviews { margin-top: 32px; } } /* кнопки уже дают отступ: 16 + 48 + 32 */
.films-dots { display: none; } /* точки — только на телефоне, вместо кнопок; создаёт films.js */
.films-arrow svg { stroke-width: 2.2; }
.films-arrow:disabled { opacity: .35; cursor: default; }
.films-arrow:disabled:active { transform: none; background: none; border-color: var(--navy); color: var(--navy); }
@media (hover: hover) and (pointer: fine) {
  .films-arrow:disabled:hover { background: none; color: var(--navy); }
}
.film {
  height: 240px;
  border-radius: var(--r-card);
  text-decoration: none; color: var(--on-dark);
}
@media (hover: hover) and (pointer: fine) { .film:hover { color: var(--on-dark); } }
.play {
  position: absolute; left: 50%; top: 50%;
  width: 68px; height: 68px;
  transform: translate(-50%, -50%);
  border-radius: var(--r-pill);
  background: var(--orange); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.play svg { margin-left: 3px; }
/* Плёнка — ссылка на всю площадь: кнопка «плей» отвечает на курсор и на нажатие */
@media (hover: hover) and (pointer: fine) {
  .film:hover .play { transform: translate(-50%, -50%) scale(1.06); }
}
.film:active .play { transform: translate(-50%, -50%) scale(.96); transition-duration: var(--dur-press); }
.film-cap { position: relative; line-height: 1.4; }
/* Фото плитки (п. 73 брифа): кадр из поездки; снизу — затемнение под подпись, чтобы она читалась на любом снимке */
.film.has-photo { background-color: var(--navy); background-size: cover; background-position: center; }
.film.has-photo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11, 37, 69, .82) 0%, rgba(11, 37, 69, .35) 38%, rgba(11, 37, 69, 0) 62%);
}
.film.has-photo .film-cap { text-shadow: 0 1px 2px rgba(11, 37, 69, .5); }

.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.review { margin: 0; padding: 26px; background: var(--white); border-radius: var(--r-card); }
.review blockquote { margin: 0; font-size: var(--fs-lead); line-height: 1.5; }
.review { display: flex; flex-direction: column; }
.review blockquote { text-wrap: pretty; }
.review figcaption { margin-top: auto; padding-top: 18px; font-size: var(--fs-s); font-weight: 700; color: var(--ink-2); }

/* ---------- FAQ ---------- */
.faq-layout { display: flex; flex-wrap: wrap; gap: 48px; }
.faq-intro { flex: 1 1 320px; }
.faq-lead { margin-top: 20px; line-height: 1.6; color: var(--ink-3); }
.faq-intro .btn { margin-top: 24px; }
.faq-list { flex: 2 1 520px; min-width: 0; }

.faq-item { border-bottom: 1.5px solid var(--line-soft); }
.faq-h { font-size: inherit; font-weight: inherit; }
.faq-q {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 44px;
  padding: 22px 0;
  background: none; border: 0;
  font: inherit; font-size: var(--fs-faq); font-weight: 700; line-height: 1.35;
  color: var(--navy); text-align: left;
  cursor: pointer;
}
.faq-q { transition: color var(--dur-fast) var(--ease-color); }
@media (hover: hover) and (pointer: fine) {
  .faq-q:hover { color: var(--brown); }
  .faq-q:hover .faq-sign { background: var(--line); }
}
.faq-sign { transition: background-color var(--dur-fast) var(--ease-color); }
/* Ответ раскрывается высотой (script.js, Web Animations); пока идёт анимация — обрезаем */
.faq-a.is-animating { overflow: hidden; }
.faq-sign {
  position: relative; flex: none;
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  background: var(--sand);
}
/* «+» / «−» нарисованы двумя линиями — крестик поворачивается в минус */
.faq-sign::before, .faq-sign::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 2px; border-radius: 1px;
  background: var(--navy);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-move) var(--ease-out);
}
.faq-sign::after { transform: translate(-50%, -50%) rotate(90deg); }
/* открыто: обе линии доворачиваются до горизонтали вместе — знак «поворачивается» в минус */
.faq-q[aria-expanded="true"] .faq-sign::before { transform: translate(-50%, -50%) rotate(180deg); }
.faq-q[aria-expanded="true"] .faq-sign::after { transform: translate(-50%, -50%) rotate(180deg); }
.faq-a p {
  max-width: 680px;
  margin: 0 0 22px;
  font-size: var(--fs-base); line-height: 1.65;
  color: var(--ink-2);
}

/* ---------- Заявка ---------- */
.booking-layout { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.booking-intro { flex: 1 1 360px; }
.booking-lead { margin-top: 20px; font-size: var(--fs-md); line-height: 1.6; color: var(--on-dark-2); }
.booking-steps {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: flex; flex-direction: column; gap: 14px;
  font-size: var(--fs-base);
}
.booking-steps li { display: flex; gap: 12px; line-height: 1.45; }
.step-n { flex: none; min-width: 1.1em; color: var(--orange); font-weight: 800; font-variant-numeric: tabular-nums; }

.booking-form {
  flex: 1 1 460px;
  display: flex; flex-direction: column; gap: 18px;
  padding: 32px;
  background: var(--navy-raised);
  border-radius: var(--r-block);
}
.form-row { display: flex; flex-wrap: wrap; gap: 16px; }
.form-row > .field { flex: 1 1 200px; }

.consent {
  display: flex; gap: 12px; align-items: flex-start;
  /* Зона нажатия 45px — паддингом, который тут же гасится отрицательным отступом:
     строка занимает в раскладке только высоту текста, и ошибка стоит в 6px под ней,
     как у остальных полей (было min-height 44px — ошибка отрывалась на ~28px). */
  padding: 12px 0; margin: -12px 0;
  font-size: var(--fs-s); line-height: 1.5; color: var(--on-dark-2);
  cursor: pointer;
}
.consent input {
  width: 22px; height: 22px; margin: 0; flex: none;
  accent-color: var(--orange);
  cursor: pointer;
}
.consent a { color: var(--orange-soft); }
@media (hover: hover) and (pointer: fine) { .consent a:hover { color: var(--on-dark); } }
.consent-wrap .field-error { margin-left: 34px; }

.form-status {
  font-size: var(--fs-ui); line-height: 1.5; font-weight: 600;
  color: var(--on-dark);
}
.form-status:empty { display: none; }
/* сообщения формы появляются/уходят высотой и прозрачностью (script.js) */
.field-error.is-animating, .form-status.is-animating { overflow: hidden; }
/* Подтверждение — светлая кремовая плашка на navy-карточке: самый светлый предмет формы,
   читается как «готово», а не как неактивная подложка. Navy-текст 14:1, галочка коричневая
   (#A35200 на #FFF1DE — 5,0:1). Галочка — маска, поэтому ничего не добавляется в разметку;
   анимация высоты/паддингов (script.js) не трогает padding-left и позицию значка. */
.form-status.is-ok {
  position: relative;
  padding: 14px 18px 14px 50px;
  border-radius: var(--r-field);
  background: var(--warm-tint);
  color: var(--navy);
}
.form-status.is-ok::before {
  content: "";
  position: absolute; left: 16px; top: 14px;
  width: 22px; height: 22px;
  background: var(--brown);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (forced-colors: active) {
  .form-status.is-ok { border: 2px solid CanvasText; }
  .form-status.is-ok::before { background: CanvasText; }
}

/* ---------- Подвал ---------- */
.site-footer { background: var(--navy-deep); color: var(--on-dark-2); padding: 56px 0 32px; }
.footer-top { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
.footer-brand { flex: 1 1 300px; }
.footer-brand img { height: 56px; width: auto; }
.footer-brand p { margin-top: 18px; line-height: 1.6; max-width: 340px; }
.footer-nav, .footer-contacts { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.footer-nav { flex: 1 1 180px; }
.footer-contacts { flex: 1 1 220px; }
.footer-nav a { color: var(--on-dark); text-decoration: none; padding: 2px 0; }
.footer-guides { flex-basis: 220px; }
.footer-h { margin: 0; font-size: var(--fs-s); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-3); }
.footer-nav a[aria-current="page"] { color: var(--orange-soft); }
@media (hover: hover) and (pointer: fine) { .footer-nav a:hover { color: var(--orange-soft); } }
.footer-contacts a { color: var(--orange-soft); }
@media (hover: hover) and (pointer: fine) { .footer-contacts a:hover { color: var(--on-dark); } }
/* Телефоны капитанов (п. 27): имя мелко над номером, номер не рвётся на дефисах. Денис — первым. */
.footer-phone { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 44px; color: var(--on-dark); text-decoration: none; }
.footer-phone-name { font-size: var(--fs-sm); font-weight: 500; color: var(--on-dark-3); }
.footer-phone-num { font-weight: 700; font-size: var(--fs-faq); font-variant-numeric: tabular-nums; white-space: nowrap; }
.footer-contacts .footer-phone { color: var(--on-dark); display: flex; align-items: flex-start; }
@media (hover: hover) and (pointer: fine) { .footer-contacts .footer-phone:hover { color: var(--orange-soft); } }
.footer-contacts .footer-phone + .footer-phone { margin-top: 6px; }
.footer-contacts .footer-phone + a:not(.footer-phone) { margin-top: 6px; }
/* Telegram, WhatsApp, почта — значки в ряд под телефонами (п. 31). Значок 22px в цвете
   текста подвала, зона нажатия 44 × 44; −11px слева — глиф стоит по левому краю номеров. */
.footer-social { display: flex; gap: 4px; margin: 4px 0 0 -11px; }
.footer-icon {
  display: inline-grid; place-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--r-field); color: var(--on-dark); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-contacts a.footer-icon { color: var(--on-dark); min-height: 44px; }
@media (hover: hover) and (pointer: fine) {
  .footer-icon:hover, .footer-contacts a.footer-icon:hover { color: var(--orange-soft); }
}
.footer-icon:focus-visible, .footer-contacts a.footer-icon:focus-visible { color: var(--orange-soft); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--line-footer);
  font-size: var(--fs-sm); color: var(--on-dark-3);
}
.footer-bottom a { color: var(--on-dark-3); }
@media (hover: hover) and (pointer: fine) { .footer-bottom a:hover { color: var(--on-dark); } }


/* ---------- Липкая панель (телефон) ---------- */
.mbar { display: none; }

/* =========================================================
   СТРАНИЦА МАРШРУТА
   ========================================================= */
.route-top { padding: 28px 0 0; }
.crumbs { font-size: var(--fs-s); color: var(--ink-3); }
.crumbs [aria-current] { color: var(--navy); font-weight: 600; }
/* Строчные ссылки в мелком тексте: зона нажатия выше строки (вертикальный padding
   у строчного элемента не двигает раскладку) */
.crumbs a, .footer-bottom a, .consent a, .trips-note a { padding: 13px 0; }
.gallery { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.gallery-main { flex: 2 1 560px; height: 460px; border-radius: var(--r-hero); }
.gallery-side { flex: 1 1 280px; display: flex; flex-direction: column; gap: 16px; }
.gallery-small { flex: 1; min-height: 222px; border-radius: var(--r-hero); }
/* Пилюля «+ ещё [N] фото» стоит в потоке справа от подписи, а не поверх неё:
   на планшетах она закрывала конец подписи-плейсхолдера (Глаз, раунд 3, № 2).
   Длинная подпись теперь переносится до пилюли. Угол тот же — 14px от края. */
.gallery-small { gap: 12px; }
.gallery-more {
  flex: none; margin: 0 -2px -2px auto;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--cream); color: var(--navy);
  font-weight: 700; font-size: var(--fs-s);
}

.route-body { padding: 40px 0 var(--section-y); }
.route-layout { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.route-main { flex: 999 1 600px; min-width: 0; }

.h1-route {
  font-size: var(--fs-h1-route);
  line-height: 1.06; letter-spacing: -.03em; font-weight: 800;
  margin-top: 12px;
  text-wrap: balance;
}
.route-sub { margin-top: 14px; font-size: var(--fs-sub); line-height: 1.4; color: var(--ink-2); }

/* Факты: 4 в ряд, если каждой ячейке хватает --fact-min, иначе ровно 2 × 2.
   auto-fit с минимумом 150px давал 3 + 1 с одной «Нагрузкой» во втором ряду (Глаз, раунд 3,
   № 3), а в четыре ячейки по 150–175px не влезала «Grand Marina» (п. 30). --fact-min —
   ширина ячейки, в которую «Grand Marina» входит при текущем кегле (22px; 19px на 601–900).
   Переключатель без медиазапроса — по ширине самой колонки: третий аргумент min()
   огромен, пока колонка уже порога, и отрицателен, когда шире. */
.facts {
  --fact-min: 180px;
  --fact-4: calc(var(--fact-min) * 4 + 36px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(calc((100% - 37px) / 4), min(calc((100% - 13px) / 2), calc((var(--fact-4) - 100%) * 999))), 1fr));
  gap: 12px;
  margin: 32px 0 0;
}
.fact { padding: 18px; background: var(--white); border-radius: var(--r-tile); }
.fact dt { font-size: var(--fs-sm); color: var(--ink-3); }
.fact dt { line-height: 1.3; }
.fact dd { margin: 6px 0 0; font-size: var(--fs-sub); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
/* Узкие ячейки с названиями (марина, место стоянки): длинные склейки тема уже разрешила
   переносить (sailstory_typo_narrow, Глаз 09 № 1). Страховка на случай слова длиннее
   ячейки — перенос внутри слова вместо вылезания за край. min-width: 0 — текстовая колонка
   главы может сжиматься в flex-строке. */
.fact dd, .day-place, .day-detail-title, .book-ticks li { overflow-wrap: break-word; }
.day > span:last-child { min-width: 0; }

.tabs {
  display: flex; flex-wrap: wrap; gap: 28px;
  margin-top: 44px;
  border-bottom: 1.5px solid var(--line);
}
.tab {
  min-height: 48px; padding: 0 4px;
  margin-bottom: -1.5px;
  background: none; border: 0; border-bottom: 3px solid transparent;
  font: inherit; font-weight: 700; font-size: var(--fs-base);
  color: var(--ink-3);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-color), border-color var(--dur-fast) var(--ease-color);
}
@media (hover: hover) and (pointer: fine) {
  .tab:hover { color: var(--navy); }
}
.tab[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--orange); }
/* Оранжевая черта переезжает к выбранной вкладке (script.js добавляет .tab-ink).
   Без JS остаётся обычная граница вкладки. Двигается только transform. */
.tabs { position: relative; }
.tabs.has-ink .tab[aria-selected="true"] { border-bottom-color: transparent; }
.tab-ink {
  position: absolute; left: 0; bottom: -1.5px; /* ровно там, где была граница вкладки */
  width: 1px; height: 3px;
  background: var(--orange);
  transform-origin: 0 0;
  pointer-events: none;
}
.tabs.ink-ready .tab-ink { transition: transform var(--dur-move) var(--ease-in-out); }
.tab-panel { margin-top: 28px; }
.tab-panel:focus-visible { outline-offset: 8px; border-radius: 4px; }

.days-layout { display: flex; flex-wrap: wrap; gap: 24px; }
.days { flex: 1 1 300px; display: flex; flex-direction: column; gap: 10px; }
.day {
  width: 100%;
  display: flex; gap: 18px; align-items: center;
  min-height: 44px;
  padding: 18px 20px;
  background: var(--white);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-tile);
  font: inherit; color: var(--navy); text-align: left;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-color),
    box-shadow var(--dur-fast) var(--ease-color),
    transform var(--dur-press) var(--ease-out);
}
/* hover — только у мыши: (hover: hover) одного мало, на части сенсорных устройств и в эмуляции
   касаний рамка оставалась на соседней главе после касания и прокрутки (Глаз 09 № 4) */
@media (hover: hover) and (pointer: fine) {
  .day:hover { border-color: var(--field-border); }
}
.day:active { border-color: var(--ink-3); transform: scale(.99); } /* строка широкая — нажатие мягче, чем у кнопок */
.day-n { transition: background-color var(--dur-fast) var(--ease-color); }
.day[aria-pressed="true"] .day-n { background: var(--orange); }
.day[aria-pressed="true"] { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 136, 0, .18); }
.day-n {
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--r-field);
  background: var(--sand);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}
.day-label {
  display: block;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.3;
  color: var(--brown);
}
.day-place { display: block; margin-top: 4px; font-weight: 700; font-size: var(--fs-base); line-height: 1.3; }

.day-detail-col { flex: 1 1 340px; min-width: 0; }
.route-map { height: 240px; border-radius: var(--r-panel); }
/* карта маршрута показывается целиком, без обрезки: у картинки 2:1 */
.route-map.is-map { height: auto; aspect-ratio: 2 / 1; background: #FFF8F0; }
.ph.route-map.is-map > img { object-fit: contain; }
.day-detail { margin-top: 16px; padding: 26px; background: var(--white); border-radius: var(--r-panel); scroll-margin-top: 16px; }
.day-detail-title { font-size: var(--fs-h3); margin: 6px 0 14px; }
.day-rows { display: flex; flex-direction: column; gap: 12px; margin: 0; font-size: var(--fs-base); line-height: 1.55; }
.day-rows > div { display: flex; gap: 12px; }
.day-rows dt { flex: none; width: 64px; font-weight: 800; }
.day-rows dd { margin: 0; color: var(--ink-2); }

/* Оговорка о погоде (бриф, п. 33) — под программой, вне карточки дня: её высота
   и анимация смены дня не затрагиваются. Спокойное примечание, а не тревога:
   тонкая песочная рамка на креме, navy-текст, значок (i) 2px как остальные иконки. */
.route-note {
  display: flex; gap: 16px; align-items: flex-start;
  margin-top: 24px;
  padding: 20px 24px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-tile);
  color: var(--navy);
}
.route-note-icon { flex: none; margin-top: 1px; color: var(--brown); }
.route-note-title { margin: 0; font-size: var(--fs-base); line-height: 1.4; }
.route-note-title strong { font-weight: 800; }
.route-note-text {
  margin: 4px 0 0; max-width: 68ch; text-wrap: pretty;
  font-size: var(--fs-ui); line-height: 1.55; color: var(--ink-2);
}

.boat-layout { display: flex; flex-wrap: wrap; gap: 24px; }
.boat-photo { flex: 1 1 300px; height: 300px; border-radius: var(--r-panel); }
.boat-text { flex: 1 1 300px; }
.boat-text h2 { font-size: var(--fs-h3); margin-bottom: 12px; }
.boat-text p { line-height: 1.6; color: var(--ink-2); }
.boat-text ul { margin: 16px 0 0; padding-left: 20px; line-height: 1.8; color: var(--ink-2); }
.boat-text ul + p, .boat-text p + p { margin-top: 14px; }
.boat-text strong { color: var(--navy); font-weight: 800; }
.boat-text li::marker, .incl li::marker { color: var(--brown); }

.incl-layout { display: flex; flex-wrap: wrap; gap: 24px; }
.incl { flex: 1 1 280px; padding: 26px; border-radius: var(--r-panel); }
.incl-yes { background: var(--white); }
.incl-no { background: var(--sand); }
.incl h2 { margin-bottom: 14px; font-size: var(--fs-price); }
.incl ul { margin: 0; padding-left: 20px; line-height: 1.9; }
.incl-more { margin-top: 16px; line-height: 1.5; }
.incl-more a { color: var(--brown-on-sand); font-weight: 600; } /* на песке: #A35200 даёт 4,4:1 */

/* Не больше двух колонок, пустая колонка сохраняется (auto-fill): один капитан занимает ту же
   половину, что и в паре, а не растягивается на всю вкладку (11-eye-prices, П3). Уже 580 px — одна колонка. */
.capt-layout { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(280px, calc((100% - 20px) / 2))), 1fr)); gap: 20px; }
.capt-mini {
  min-width: 0;
  display: flex; gap: 18px; align-items: center;
  padding: 24px;
  background: var(--white);
  border-radius: var(--r-panel);
}
.capt-mini-name { font-weight: 800; font-size: var(--fs-lead); }
.capt-mini-role { margin-top: 4px; color: var(--ink-3); }

/* Бронирование */
.book {
  flex: 1 1 340px;
  padding: 28px;
  background: var(--white);
  border-radius: var(--r-aside);
  box-shadow: var(--shadow-aside);
  scroll-margin-top: 24px;
}
/* Сумма, «−10%» и «за место / за каюту» — одной строкой у всех вариантов (11-eye-prices, П1).
   Ничего не переносится внутри строки; если какой-то вариант не влезает, site.js ставит .is-stacked
   и подпись у всех вариантов уходит под сумму — высота блока при переключении постоянная.
   contain: inline-size — длинная сумма не распирает сайдбар, а честно переполняет строку (это и меряет site.js). */
.book-price { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; contain: inline-size; }
.book-from, .book-per { font-size: var(--fs-s); color: var(--ink-3); }
.book-per { white-space: nowrap; }
.book-sum { font-size: var(--fs-price-lg); font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.book-price-main { display: flex; align-items: baseline; gap: 6px; }
.book-price.is-stacked { flex-direction: column; align-items: flex-start; gap: 0; }
/* «−10%» за каюту целиком (thailand.html, решение клиента п. 20): пилюля как плашка
   «Осталось N мест» — тёплый тинт и коричневый, без нового акцента. #A35200 на #FFF1DE — 5,0:1 */
.book-off {
  align-self: center;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: var(--warm-tint); color: var(--brown);
  font-size: var(--fs-sm); font-weight: 800; line-height: 1.2;
  white-space: nowrap;
}
.book-off[hidden] { display: none; }
/* Оговорка к цене (LEGAL-RULES п. 2, задание бюро 2026-10-22): мелкий вторичный текст, как подписи.
   Вне .book-price — site.js меряет только строку цены, высота при смене варианта не прыгает. */
.book-extra { margin: 6px 0 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-3); }
/* без строки «Даты» (нет настоящих дат) размещение стоит сразу под ценой: отступ как у первого поля */
.book-extra + .book-field-2, .book-left + .book-field-2 { margin-top: 20px; }
.book-left {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding: 12px 14px;
  background: var(--warm-tint);
  border-radius: var(--r-field);
  font-weight: 700; font-size: var(--fs-ui);
}
.book-left svg { color: var(--brown); flex: none; }
.book .field label { letter-spacing: 0; }
.book-field { margin-top: 20px; }
.book-field-2 { margin-top: 14px; }
.book-cta { margin-top: 22px; }
.book-ask { margin-top: 12px; }
.book-ticks {
  list-style: none; padding: 0; margin: 22px 0 0;
  display: flex; flex-direction: column; gap: 10px;
  font-size: var(--fs-s); color: var(--ink-2);
}
.book-ticks li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.book-ticks li::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: .15em;
  background: var(--brown);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================================================
   ИНДИКАТОР ПРОКРУТКИ «ЯХТА» (решение клиента 22, только ≥ 601px)
   Разметку строит script.js. Весь блок aria-hidden и без фокусируемых элементов.
   Линия-маршрут у правого края: выше яхты — сплошной «кильватер», ниже — пунктир.
   Точки-«порты» — главные разделы страницы: пройденные залиты, впереди — кольца.
   На тёмных секциях — та же разметка в тёмной схеме, вырезанная «окном» по границам
   секции: схема меняется ровно на границе фона, а не всей линией сразу.
   Каждый кадр меняются только transform (кильватер, яхта, окна) и класс пройденных портов.
   ========================================================= */
.voyage { display: none; }
@media (min-width: 601px) {
  .voyage {
    display: block;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 48px;
    z-index: 15;            /* под шапкой (20) и её меню */
    pointer-events: none;   /* нажимаются только линия и яхта */
  }
  .voyage[hidden] { display: none; }
}
.voyage-layer, .voyage-window { position: absolute; top: 0; left: 0; right: 0; }
.voyage-window { overflow: hidden; visibility: hidden; }
.voyage-window.is-on { visibility: visible; }

.voyage-track, .voyage-wake {
  position: absolute; top: 0; height: 0;
  right: calc(var(--voyage-axis) - 1px);
  width: 2px;
}
/* пунктир 6/4 с круглыми концами: маска из SVG-плитки, цвет — фоном (меняется по схеме) */
.voyage-track {
  background-color: var(--route-ahead);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='10'%3E%3Cpath d='M1 1v4' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 2px 10px repeat-y;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='10'%3E%3Cpath d='M1 1v4' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 2px 10px repeat-y;
}
.voyage-wake {
  background: var(--navy);
  border-radius: 1px;
  transform-origin: top center;
  transform: scaleY(0);
}
.voyage-port {
  position: absolute; top: 0;
  right: calc(var(--voyage-axis) - 4px);
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid var(--route-ahead);
  background: var(--cream);
  transition: background-color var(--dur-fast) var(--ease-color), border-color var(--dur-fast) var(--ease-color);
}
.voyage-port.is-passed { background: var(--navy); border-color: var(--navy); }
.voyage-port.is-off { display: none; }
.voyage-yacht {
  position: absolute; top: 0;
  right: calc(var(--voyage-axis) - var(--yacht-size) / 2);
  width: var(--yacht-size); height: var(--yacht-size);
  color: var(--navy); fill: var(--cream);
}
.voyage-yacht svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* тёмная схема: #day, #booking, подвал */
.voyage-layer.is-dark .voyage-track { background-color: var(--route-ahead-on-dark); }
.voyage-layer.is-dark .voyage-wake { background: var(--cream); }
.voyage-layer.is-dark .voyage-port { border-color: var(--route-ahead-on-dark); background: var(--navy); }
.voyage-layer.is-dark .voyage-port.is-passed { background: var(--cream); border-color: var(--cream); }
.voyage-layer.is-dark .voyage-yacht { color: var(--cream); fill: var(--navy); }

/* Области нажатия. Линия — полоса 20px (видно 2px), клик ведёт к точке или порту.
   Яхта — 36×44, её можно тащить; на планшете палец не прокручивает страницу. */
.voyage-hit, .voyage-grip { position: absolute; top: 0; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.voyage-hit { right: calc(var(--voyage-axis) - 10px); width: 20px; cursor: pointer; touch-action: manipulation; }
.voyage-grip {
  right: calc(var(--voyage-axis) - 18px);
  width: 36px; height: 44px;
  cursor: grab; touch-action: none;
}
.is-voyaging, .is-voyaging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

/* =========================================================
   АДАПТИВ
   ========================================================= */

/* Мелкий десктоп: плавающая «Глава 3» не выезжает за край экрана */
@media (max-width: 1100px) {
  .chapter-note { left: 16px; }
}

/* Планшет и узкий десктоп: яхта меньше и ближе к краю (01-taste, «Цикл 1») */
@media (min-width: 601px) and (max-width: 1023px) {
  :root { --yacht-size: 24px; --voyage-axis: 14px; }
}
/* Поле 40px на 601–1279: справа в поле идёт линия с яхтой. При 32px яхта на 1024–1251
   стояла в 2px от правого края карточек (на 1280 — тоже 2px), на 768 — в 6px.
   Теперь зазор не меньше 10px. С 1280 поле снова 32px, но запас даёт центрирование .wrap. */
@media (min-width: 601px) and (max-width: 1279px) {
  :root { --gutter: 40px; }
}
/* Сетки из трёх элементов на десктопе — ровно три колонки, а не auto-fit:
   иначе на 960–967 (поле 40px) главы, фильмы и отзывы снова вставали 2 + 1. */
@media (min-width: 960px) {
  .chapters, .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* «Почему спокойно» — сейчас три плитки (20-cards-why), сетка держит и четыре.
   601–899: две колонки; последняя плитка при нечётном числе тянется на всю ширину
   (3 = 2 + 1 широкая, без одинокой половинки). С 900: три в ряд.
   Четыре плитки (:has): 2 × 2 до 1099, дальше 4 в ряд — без 3 + 1. */
@media (min-width: 601px) and (max-width: 899px) {
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-grid > .why:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .why-grid:has(> .why:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .why-grid:has(> .why:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Меню-бургер (≤ 1151, решение клиента 32): полная шапка главной (логотип + 5 пунктов
   + Telegram + кнопка) занимает 1127px и на 1024–1151 стояла впритык. Значок Telegram
   в шапке виден на любой ширине. Кегли заголовков — по-прежнему с 900. */
@media (max-width: 1151px) {
  .menu-toggle { display: inline-grid; place-items: center; }
  /* Меню выпадает из-под шапки: сдвиг 8px вниз + прозрачность.
     Закрытое меню — visibility: hidden (не ловит клики и Tab), выключается
     после того, как ушла прозрачность. Уход быстрее входа. */
  .nav-links {
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transform-origin: top center;
    transition:
      opacity var(--dur-exit) var(--ease-out),
      transform var(--dur-exit) var(--ease-out),
      visibility 0s linear var(--dur-exit);
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 16px;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 30px rgba(11, 37, 69, .10);
  }
  .nav-links.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out),
      visibility 0s;
  }
  .nav-links a {
    min-height: 52px; display: flex; align-items: center;
    font-size: var(--fs-md);
  }
  /* «Маршруты» в бургере: стрелка справа раскрывает быстрый переход «таблетками» */
  .nav-item { flex-wrap: wrap; gap: 0; }
  .nav-item > a { flex: 1; }
  .nav-drop-toggle { width: 44px; height: 44px; border-radius: 12px; }
  .nav-drop { display: none; flex-basis: 100%; padding: 0 0 12px; }
  .has-drop.is-open .nav-drop { display: block; }
  .nav-drop-col + .nav-drop-col { margin-top: 12px; }
  .nav-drop ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .nav-links .nav-drop a {
    min-height: 40px; margin: 0; padding: 8px 14px;
    border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white);
    font-size: var(--fs-ui);
  }
  .nav-drop-hint { display: none; }
}

/* Узкий планшет 601–659: шапка главной (логотип 175 + Telegram + «Подобрать путешествие»
   + бургер) занимала 651px и на 601–610 вылезала за край окна, а до 650 заходила в поле.
   Здесь логотип телефонного размера (40px) и промежутки меньше — всё на месте, поле 40px. */
@media (min-width: 601px) and (max-width: 659px) {
  .logo img { height: 40px; }
  .header-inner { gap: 16px; }
  .header-actions { gap: 8px; }
}

/* Планшет (≤ 900): из прототипа — заголовки меньше (меню-бургер — до 1151, см. выше) */
@media (max-width: 900px) {
  :root {
    --fs-h1: 40px;
    --fs-h1-route: 38px;
    --fs-h2: 32px;
    /* --gutter на 601–900 — не 20px, как в прототипе, а 40px (см. выше): справа в поле
       идёт линия-маршрут с яхтой (решение клиента 22). */
  }
  .hero-photo { height: 460px; }
}

/* Планшет 601–959: сетки «3 в ряд» встают в две колонки, и третий элемент оставался
   один с пустой половиной ряда (Глаз, раунд 1, № 3). Главы — одна колонка строками
   (иконка слева, текст справа — как на телефоне, крупнее). Третий фильм и третий
   отзыв — на всю ширину ряда. «Ближайшие путешествия» 2 + 2 + 1 — решение клиента. */
/* Факты маршрута на планшете: четыре ячейки по ~165px, «Grand Marina» (Таиланд, п. 30)
   в 22px упиралось в край ячейки. Значение факта — 19px (--fs-lead, из шкалы). */
@media (min-width: 601px) and (max-width: 900px) {
  .facts { --fact-min: 160px; }
  .fact dd { font-size: var(--fs-lead); }
}

@media (min-width: 601px) and (max-width: 959px) {
  .chapters { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .chapter {
    grid-template-columns: 52px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 20px;
    padding: 24px;
  }
  .chapter-icon { grid-row: 1 / 4; }
  .chapter-time { grid-column: 2; align-self: start; }
  .chapter-title { grid-column: 2; margin: 4px 0 8px; }
  .chapter-text { grid-column: 2; max-width: 600px; }

  .reviews > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* фильмы: две плитки и край третьей */
  .films { --films-per-view: 2; --films-peek: 48px; }

  /* Галерея маршрута: большое фото на всю ширину и две плитки в ряд под ним
     (было три полноширинных блока ~1000px до названия маршрута, № 4) */
  .gallery-main { flex-basis: 100%; height: 360px; }
  .gallery-side { flex-basis: 100%; flex-direction: row; }
  .gallery-small { min-height: 200px; }
}

/* Телефон (≤ 600): по Mobile.dc.html */
@media (max-width: 600px) {
  :root {
    --fs-h1: 34px;
    --fs-h2: 26px;
    --fs-h1-route: 32px;
    --gutter: 16px;
    --section-y: 44px;
    --header-h: 64px;
    --header-h-compact: 56px; /* вместе с нижней панелью (70) — меньше 15% экрана 844 */
    --logo-compact: .8;       /* 40 → 32px */
    --actions-compact: .92;   /* кнопка меню 48 → 44px: палец всё ещё попадает */
    /* Подписи и бейджи на телефоне — 13px вместо 12px из Mobile.dc (решение клиента 17.10):
       капс-подписи, «Глава N», даты карточек, бейджи, «Фильм — в подарок», подписи фото. */
    --fs-xs: 13px;
  }

  .eyebrow { font-size: var(--fs-xs); }
  .h2 { margin-top: 8px; line-height: 1.15; }

  /* шапка */
  .logo img { height: 40px; }
  .header-inner { gap: 12px; }

  /* кнопки во всю ширину */
  .btn { display: flex; width: 100%; padding: 0 20px; }
  .btn-sm { width: auto; min-height: 44px; padding: 0 16px; font-size: var(--fs-s); }

  /* первый экран: текст → фото → кнопки → цифры */
  .hero { padding: 24px 0 0; }
  .hero-grid { flex-direction: column; align-items: stretch; gap: 0; }
  .hero-text { display: contents; }
  .hero-eyebrow { order: 1; }
  .hero-title { order: 2; margin-top: 12px; line-height: 1.08; letter-spacing: -.02em; }
  .hero-lead { order: 3; margin-top: 14px; font-size: var(--fs-base); line-height: 1.55; }
  .hero-media { order: 4; flex: none; margin-top: 20px; }
  .hero-actions { order: 5; flex-direction: column; gap: 10px; margin-top: 18px; }
  .hero-stats {
    order: 6;
    justify-content: space-between; gap: 12px;
    margin-top: 22px; padding: 16px;
    background: var(--white); border-radius: var(--r-tile);
  }
  .stat-num { font-size: var(--fs-price); }
  .stat-label { font-size: var(--fs-sm); } /* 12 → 13: подпись под цифрой читается с телефона */

  .hero-photo { height: 260px; border-radius: var(--r-panel); padding: 14px; font-size: var(--fs-xs); }
  .chapter-note { display: none; }
  .gift-badge { right: 12px; top: 12px; padding: 8px 12px; font-size: var(--fs-xs); }

  .finder-wrap { margin-top: 28px; }
  .finder { padding: 18px; gap: 14px; border-radius: var(--r-card); }
  .finder > * { flex: 1 1 100%; }

  /* маршруты: фильтр и карточки листаются вбок */
  .section-head { gap: 16px; }
  .section-head > div:not(.chips) { width: 100%; } /* .chips — тоже div: правило перебивало её ширину, ряд обрезался в 16px от края экрана */
  .chips {
    flex: none;
    flex-wrap: nowrap; gap: 8px;
    width: calc(100% + 2 * var(--gutter));
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; min-height: 44px; padding: 0 16px; font-size: var(--fs-s); }

  /* Лента прокручивается вбок, а overflow режет и вертикаль: тень карточек
     (0 10px 30px — до 20px вверх и 40px вниз) обрезалась резкой границей (№ 2).
     Запас под тень — паддингом ленты; сверху он гасится отступом, снизу —
     отрицательным отступом точек, так что расстояния вокруг ленты прежние. */
  .trip-grid {
    display: flex; gap: 14px;
    margin: -2px calc(-1 * var(--gutter)) 0;
    padding: 20px var(--gutter) 40px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .trip-grid::-webkit-scrollbar { display: none; }
  .filter-status:not(:empty) + .trip-grid { margin-top: -8px; }
  /* «Листание»: один свайп — одна карточка, край следующей виден как подсказка */
  .trip { flex: 0 0 min(300px, 82vw); scroll-snap-align: start; scroll-snap-stop: always; }
  .trip-photo { height: 170px; padding: 14px; font-size: var(--fs-xs); }
  .trip-badge { top: 12px; left: 12px; padding: 6px 10px; font-size: var(--fs-xs); }
  .trip-body { padding: 16px; }
  .trip-title { margin-top: 6px; }
  .trip-story { margin-top: 4px; }
  .trip-when { font-size: var(--fs-xs); }
  .trip-title { font-size: var(--fs-lead); }
  .trip-story { font-size: var(--fs-ui); }
  .tags, .trip-boat { display: none; }
  /* Карточка на телефоне 295–300px: цене с подписью и кнопке рядом тесно — цена рвалась на 4 строки
     (20-cards-why). Кнопка уходит под цену, как на планшете: «от N ₽ / место» и «для пары в одной каюте»
     — по одной строке, у всех карточек низ устроен одинаково. */
  .trip-foot { margin-top: auto; padding-top: 14px; border-top: 0; flex-direction: column; align-items: flex-start; row-gap: 12px; }
  .trip-price { font-size: var(--fs-md); }
  /* «/ место» на телефоне остаётся (Глаз, раунд 2, № 2): без него «от 216 000 ₽» читается как цена тура */
  .trip-price span { font-size: var(--fs-xs); }
  .trips-note { margin-top: 16px; font-size: var(--fs-s); }
  .trip-dots { display: flex; justify-content: center; margin-top: -32px; }
  .trip-dots:empty { display: none; }
  .trip-dots:empty + .trips-note { margin-top: -16px; } /* одна карточка — точек нет: 16px от ленты, как и прежде */
  .trips-extra { margin-top: 16px; font-size: var(--fs-xs); }
  .trip-dots:empty + .trips-extra { margin-top: -16px; } /* одна карточка — точек нет */
  .trips-extra + .trips-note { margin-top: 6px; }
  .trip-price .trip-price-note { font-size: var(--fs-xs); white-space: nowrap; }

  /* один день — одна глава: компактные строки */
  .chapters { grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
  .chapter {
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    padding: 16px;
    border-radius: var(--r-tile);
  }
  .chapter-icon { grid-row: 1 / 4; width: 44px; height: 44px; border-radius: var(--r-field); }
  .chapter-icon svg { width: 22px; height: 22px; stroke-width: 2; }
  .chapter-time { grid-column: 2; font-size: var(--fs-sm); align-self: start; }
  .chapter-title { grid-column: 2; margin: 2px 0 4px; font-size: var(--fs-md); }
  .chapter-text { grid-column: 2; font-size: var(--fs-s); line-height: 1.5; }

  .why-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
  .why { padding: 20px; border-radius: var(--r-tile); }
  .why h3 { font-size: var(--fs-md); margin: 12px 0 6px; }
  .why p { font-size: var(--fs-ui); }

  /* капитаны: круглое фото + имя */
  .captains { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
  .captain {
    display: grid;
    grid-template-columns: 72px 1fr;
    column-gap: 14px;
    align-items: center;
    padding: 14px;
    background: var(--white);
    border-radius: var(--r-tile);
  }
  .captain-body { display: contents; }
  .captain-photo { grid-row: 1 / 3; width: 72px; height: 72px; min-height: 0; padding: 0; border-radius: var(--r-pill); }
  .captain-photo .ph-cap { display: none; }
  .captain-role { grid-column: 2; align-self: end; font-size: var(--fs-xs); }
  .captain-name { grid-column: 2; align-self: start; margin: 2px 0 0; font-size: var(--fs-md); }
  .captain-bio { grid-column: 1 / -1; margin-top: 12px; font-size: var(--fs-ui); line-height: 1.55; }
  .captain-qual { grid-column: 1 / -1; margin-top: 8px; font-size: var(--fs-sm); }

  /* фильмы и отзывы */
  .section-head > .btn { order: 2; }
  /* Фильмы: одна плитка и край второй. Лента — от края до края экрана, как лента маршрутов:
     поля страницы становятся её отступами, первая плитка стоит по полю. Листают свайпом,
     кнопки скрыты: под пальцем они дублируют жест и добавляют 64px высоты. */
  .films {
    --films-per-view: 1;
    --films-gap: 12px;
    --films-peek: 36px;
    margin: calc(18px - var(--films-pad)) calc(-1 * var(--gutter)) calc(-1 * var(--films-pad));
    padding: var(--films-pad) var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .films::-webkit-scrollbar { display: none; }
  .films:focus-visible { outline-offset: -3px; } /* лента от края до края экрана: кольцо внутри, в полосе над и под плитками */
  /* scroll-snap-stop: always (как у маршрутов) здесь нельзя: фокус с клавиатуры на дальней плитке
     не мог проехать дальше соседней, плитка в фокусе оставалась за краем экрана */
  .films-nav { display: none; }
  .films-dots:not([hidden]) { display: flex; justify-content: center; margin-top: 2px; }
  .film { height: 200px; padding: 14px; font-size: var(--fs-xs); }
  .play { width: 60px; height: 60px; }
  .play svg { width: 22px; height: 22px; }
  .reviews { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
  .review { padding: 20px; }
  .review blockquote { font-size: var(--fs-md); }

  /* FAQ */
  .faq-layout { gap: 8px; }
  .faq-intro { display: contents; }
  .faq-intro .eyebrow { order: 1; width: 100%; }
  .faq-intro .h2 { order: 2; width: 100%; }
  .faq-list { order: 3; flex-basis: 100%; }
  .faq-lead { order: 4; flex-basis: 100%; margin-top: 16px; font-size: var(--fs-ui); }
  .faq-intro .btn { order: 5; margin-top: 12px; }
  .faq-q { min-height: 60px; padding: 14px 0; font-size: var(--fs-base); gap: 12px; }
  .faq-sign { width: 32px; height: 32px; }
  .faq-a p { margin-bottom: 16px; font-size: var(--fs-ui); line-height: 1.6; }

  /* заявка */
  .booking-layout { gap: 18px; }
  .booking-lead { margin-top: 10px; font-size: var(--fs-ui); line-height: 1.5; }
  .booking-steps { margin-top: 16px; gap: 10px; font-size: var(--fs-ui); }
  .booking-form { padding: 20px 16px; gap: 14px; border-radius: var(--r-card); flex-basis: 100%; }
  .booking-intro { flex-basis: 100%; }

  /* подвал */
  .site-footer { padding: 40px 0 28px; }
  .footer-top { gap: 28px; }
  .footer-brand img { height: 44px; }
  .footer-bottom { margin-top: 28px; flex-direction: column; gap: 10px; }
  /* ссылки подвала — пальцем: строка 44px вместо 24–28px, шаг почти тот же */
  .footer-nav, .footer-contacts { gap: 0; }
  .footer-nav a, .footer-contacts a { min-height: 44px; display: inline-flex; align-items: center; padding: 0; }

  /* липкая нижняя панель */
  /* У подвала панель всегда спрятана (script.js прячет её, как только подвал на экране),
     поэтому запас под неё не нужен — иначе пустой тёмный хвост (Глаз, № 10). Только safe-area. */
  .has-mbar .site-footer { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
  /* Фокус с клавиатуры не уходит под нижнюю панель: браузер подводит элемент выше неё
     (кнопки карточек и вопросы FAQ оказывались под панелью — WCAG 2.4.11) */
  html:has(.has-mbar) { scroll-padding-bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom, 0px)); }
  .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--cream);
    box-shadow: var(--shadow-bar);
  }
  /* Панель уезжает вниз, когда на экране форма заявки, и возвращается оттуда же.
     Уход быстрее возврата. Переходы включаются после первой проверки (.is-ready),
     чтобы при загрузке страницы с #booking панель не «проезжала» на глазах. */
  .mbar.is-ready { transition: transform var(--dur-move) var(--ease-drawer); }
  .mbar.is-ready.is-hidden { transition: transform var(--dur-base) var(--ease-out); }
  .mbar .btn { min-height: 50px; font-size: var(--fs-ui); }
  .mbar .btn-ghost { flex: 1; }
  .mbar .btn-primary { flex: 1.4; }
  /* + запас на тень панели: при 110% её верхний край оставался полоской над низом экрана */
  .mbar.is-hidden { transform: translateY(calc(100% + 40px)); }

  /* страница маршрута */
  .route-top { padding-top: 16px; }
  .crumbs { font-size: var(--fs-sm); }
  .gallery { gap: 10px; margin-top: 14px; }
  .gallery-main { height: 240px; border-radius: var(--r-panel); }
  .gallery-side { flex-direction: row; gap: 10px; }
  .gallery-small { min-height: 120px; border-radius: var(--r-tile); padding: 12px; font-size: var(--fs-xs); }
  .gallery-small .ph-cap { display: none; }
  .gallery-more { padding: 6px 10px; font-size: var(--fs-xs); }
  .route-body { padding-top: 28px; }
  .route-layout { gap: 32px; }
  .route-sub { font-size: var(--fs-md); }
  .facts { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .fact { padding: 14px; }
  .fact dd { font-size: var(--fs-md); }
  .tabs {
    flex-wrap: nowrap; gap: 20px;
    margin: 32px calc(-1 * var(--gutter)) 0;
    padding: 0 var(--gutter);
    overflow-x: auto; scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  /* overflow обрезает отрицательный отступ — линию рисуем внутренней тенью */
  .tabs { border-bottom: 0; box-shadow: inset 0 -1.5px 0 var(--line); }
  .tab { flex: none; margin-bottom: 0; font-size: var(--fs-ui); }
  .tab-ink { bottom: 0; }
  .tab-panel { margin-top: 20px; }
  .days-layout { gap: 16px; }
  .day { padding: 12px 14px; gap: 14px; }
  .day-n { width: 40px; height: 40px; }
  .route-map { height: 200px; }
  .route-map.is-map { height: auto; }
  .day-detail { padding: 20px; }
  .day-detail-title { font-size: var(--fs-price); }
  .day-rows { font-size: var(--fs-ui); }
  .route-note { margin-top: 16px; padding: 16px; gap: 12px; }
  .boat-photo { height: 220px; }
  .incl { padding: 20px; }
  .capt-mini { padding: 16px; }
  .ph-round { width: 72px; height: 72px; font-size: var(--fs-xs); }
  .book { padding: 20px; border-radius: var(--r-panel); }
  .book-sum { font-size: var(--fs-stat); }
}

/* =========================================================
   Видимость по ширине (тексты и кнопки из Mobile.dc.html).
   В конце файла и с !important, чтобы не перебивались .btn и т.п.
   ========================================================= */
.only-phone, .only-phone-flex { display: none !important; }
@media (max-width: 600px) {
  .only-wide, .only-wide-flex, .hide-phone { display: none !important; }
  .only-phone { display: inline !important; }
  p.only-phone { display: block !important; }
  .only-phone-flex { display: flex !important; }
}

/* =========================================================
   Уменьшенное движение (prefers-reduced-motion: reduce)
   Убираем сдвиг, масштаб и поворот. Оставляем короткую смену
   прозрачности и цвета — по ней видно, что состояние сменилось.
   JS (script.js) в этом режиме не анимирует высоту и перестановку.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .icon-btn:active, .chip:active, .btn-block:active, .day:active { transform: none; }
  .film:hover .play, .film:active .play { transform: translate(-50%, -50%); }
  .films { scroll-behavior: auto; } /* кнопки и стрелки листают ленту сразу, без проезда */
  .chapter-note { animation: none; }

  .menu-toggle .i-open, .menu-toggle .i-close,
  .menu-toggle[aria-expanded="true"] .i-open,
  .menu-toggle[aria-expanded="true"] .i-close { transform: none; }

  .faq-sign::before, .faq-sign::after { transition: none; }

  .tabs.ink-ready .tab-ink { transition: none; }

  /* точки карусели: без растяжения, только смена цвета */
  .trip-dot::before { transition: background-color var(--dur-base) linear; }

  /* меню и панель — только прозрачность, без сдвига */
  .nav-links, .nav-links.is-open { transform: none; }
  .nav-drop, .has-drop .nav-drop { transform: none !important; }
  .nav-drop-toggle svg { transition: none; }
  .mbar.is-ready { transition: opacity var(--dur-fast) linear, visibility 0s; }
  .mbar.is-ready.is-hidden { transition: opacity var(--dur-fast) linear, visibility 0s linear var(--dur-fast); }
  .mbar.is-hidden { transform: none; opacity: 0; visibility: hidden; }

  /* липкая шапка: компактное состояние включается сразу, без анимации размера */
  .header-ready .logo, .header-ready .header-actions, .header-ready.site-header::after { transition: none; }
  @media (min-width: 1152px) {
    .header-ready .nav-links { transition: none; }
  }
}