/* SailStory в WordPress: то, чего нет в статике (site.css — перенос styles.css без изменений).
   1) Форма Fluent Forms — оформлена как утверждённая форма заявки (.booking-form .field …).
   2) Фото вместо плейсхолдеров (.ph.has-img).
   3) Панель администратора над липкой шапкой.
   4) Обычные страницы (политика, оферта).
   5) Telegram: канал новостей в подвале, в «Фильмах» и после заявки.
   6) Плашка о cookie и Яндекс.Метрике. */

/* ---------- 1. Форма заявки (Fluent Forms) ---------- */
.ss-ff .fluentform, .ss-ff form, .ss-ff fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ss-ff fieldset { display: flex; flex-direction: column; gap: 18px; }
.ss-ff .ff_screen_reader_title, .ss-ff legend {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ss-ff .ff-t-container { display: flex; flex-wrap: wrap; gap: 16px; }
.ss-ff .ff-t-cell { flex: 1 1 200px !important; min-width: 0; }
.ss-ff .ff-el-group { margin: 0; }

/* подпись и поле — как .field label / .field input */
.ss-ff .ff-el-input--label { margin: 0; }
.ss-ff .ff-el-input--label label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em;
  color: var(--on-dark);
}
.ss-ff .ff-el-input--label.asterisk-right label::after,
.ss-ff .ff-el-is-required label::after { content: none !important; }
.ss-ff .ff-el-form-control {
  display: block;
  width: 100%;
  min-height: var(--field-h);
  padding: 0 14px;
  border-radius: var(--r-field);
  border: 1.5px solid var(--line-dark-2);
  background: var(--white);
  color: var(--navy);
  font: inherit; font-size: var(--fs-base);
  scroll-margin-top: 40px;
  transition: border-color var(--dur-fast) var(--ease-color);
}
.ss-ff select.ff-el-form-control {
  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;
}
/* в статике textarea строчный (inline-block): под ним полоса под выносные, поле занимает 128px — повторяем */
.ss-ff textarea.ff-el-form-control { display: inline-block; vertical-align: baseline; padding: 12px 14px; height: 96px; min-height: 96px; resize: vertical; }
@media (max-width: 600px) {
  .ss-ff fieldset { gap: 14px; } /* как .booking-form на телефоне */
}
.ss-ff .ff-el-form-control::placeholder { color: #62738B; }
@media (hover: hover) and (pointer: fine) {
  .ss-ff .ff-el-form-control:hover { border-color: var(--on-dark-3); }
}
.ss-ff .ff-el-form-control:focus-visible { border-color: var(--navy); outline-offset: 1px; }

/* ошибки — как .field-error */
.ss-ff .ff-el-is-error .ff-el-form-control { border-color: var(--error-on-dark); }
.ss-ff .error, .ss-ff .text-danger {
  margin-top: 6px;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.4;
  color: var(--error-on-dark);
}
.ss-ff .ff-errors-in-stack:empty { display: none; }
.ss-ff .ff-errors-in-stack { color: var(--error-on-dark); font-size: var(--fs-sm); font-weight: 600; }

/* согласие — как .consent */
.ss-ff .ff-el-form-check { margin: 0; }
.ss-ff .ff-el-form-check-label {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; margin: -12px 0;
  font-size: var(--fs-s); line-height: 1.5; color: var(--on-dark-2);
  cursor: pointer;
}
/* Fluent заворачивает галочку в строчный span — без этого строка выше на ~5px */
.ss-ff .ff_tc_checkbox { display: flex; flex: none; }
.ss-ff .ff_t_c { min-width: 0; }
.ss-ff .ff-el-form-check-input {
  width: 22px; height: 22px; margin: 0; flex: none;
  accent-color: var(--orange);
  cursor: pointer;
  scroll-margin-top: 24px;
}
.ss-ff .ff-el-form-check-label a { color: var(--orange-soft); padding: 13px 0; }
@media (hover: hover) and (pointer: fine) { .ss-ff .ff-el-form-check-label a:hover { color: var(--on-dark); } }
.ss-ff .ff_gdpr_field .error, .ss-ff .consent-wrap .error { margin-left: 34px; }

/* кнопка — .btn .btn-primary .btn-block (классы заданы в форме); Fluent добавляет свои цвета */
.ss-ff .ff_submit_btn_wrapper { margin: 0; }
.ss-ff .ff-btn-submit {
  background-color: var(--orange) !important;
  color: var(--navy) !important;
  border: 0 !important;
}
.ss-ff .ff-btn-submit.disabled, .ss-ff .ff-working .ff-btn-submit { opacity: .7; cursor: progress; }
.ss-ff .ff-loading { display: none; }

/* подтверждение — как .form-status.is-ok */
.ss-ff .ff-message-success {
  position: relative;
  margin-top: 18px;
  padding: 14px 18px 14px 50px;
  border-radius: var(--r-field);
  background: var(--warm-tint);
  color: var(--navy);
  font-size: var(--fs-ui); line-height: 1.5; font-weight: 600;
  box-shadow: none; border: 0;
}
.ss-ff .ff-message-success::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;
}
.ss-ff .ff-message-success p { margin: 0; }
@media (forced-colors: active) {
  .ss-ff .ff-message-success { border: 2px solid CanvasText; }
  .ss-ff .ff-message-success::before { background: CanvasText; }
}

/* Главная: промежутки между секциями на 40% меньше (решение клиента 18.10.2026).
   Было 80px сверху и снизу секции (между секциями 160px), на телефоне 44px (88px). */
body.home { --section-y: 48px; }
@media (max-width: 600px) {
  body.home { --section-y: 26px; }
}

/* Цифры первого экрана: в статике это <dd>, и «.hero-stats dd { margin: 0 }» гасит отступ подписи */
.hero-stats .stat-label { margin-top: 0; }

/* Карточка путешествия: цена слева, кнопка справа в одной строке и с настоящей ценой
   («от 160 000 ₽ / место» + «Узнать первым» в карточку не помещаются). Кнопка больше не уходит
   под цену — если тесно, на вторую строку переносится только «/ место».
   Узкие карточки (≤ 371px на планшете), где цена и кнопка стоят столбиком по решению Перфекциониста, — как были. */
.trip-foot > div:first-child { min-width: 0; }
.trip-price { white-space: normal; }
.trip-price span { white-space: nowrap; }
@media (max-width: 600px) {
  .trip-foot { flex-wrap: nowrap; }
}
@media (min-width: 601px) {
  @container (min-width: 372px) {
    .trip-foot { flex-wrap: nowrap; }
  }
}

/* Страница маршрута: блок бронирования (цена, даты, кнопки) стоит на месте, пока листается
   программа слева (решение клиента 18.10.2026). На любой ширине: когда блок стоит под программой
   (планшет, телефон), закрепление ни на что не влияет — блок последний в колонке.
   Помещается в экран — стоит под шапкой. Не помещается (низкий экран) — доезжает до низа
   экрана и стоит там: отрицательный top, кнопки всегда видны. --book-h ставит wp.js. */
.route-layout .book {
  --book-top: calc(var(--header-h-compact) + 20px);
  position: sticky;
  top: min(var(--book-top), calc(100vh - var(--book-h, 0px) - 20px));
}
.admin-bar .route-layout .book { --book-top: calc(var(--header-h-compact) + 52px); }

/* ---------- 2. Фото вместо плейсхолдеров ---------- */
.ph.has-img { padding: 0; }
.ph.has-img > img, .ph > figure, .ph > figure img, .ph > .wp-block-image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; margin: 0;
  object-fit: cover;
}
.ph.has-img .trip-badge, .ph.has-img .gallery-more { position: absolute; }

/* Вкладка «Лодка»: ещё 1–9 фото под основным (салон, каюта, схема) — решения клиента 18.10 и 02.11.2026.
   Плитки под основным фото, в той же колонке; подпись — пилюлей, как «+ ещё N фото»
   в галерее. Нажатие открывает фото крупно. Без доп. фото вёрстка вкладки — как в статике.
   Сетка — по три в ряд (6 колонок, плитка занимает 2). Неполный последний ряд не оставляет
   одну плитку сиротой: 4 → 2 + 2, 5 → 3 + 2, 7 → 3 + 2 + 2, 8 → 3 + 3 + 2 (плитки по половине).
   1–3, 6 и 9 фото — ровно по трети, как раньше. */
.boat-media { flex: 1 1 300px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.boat-media .boat-photo { flex: none; }
.boat-more {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px;
  margin: 0; padding: 0; list-style: none;
}
.boat-more > li { grid-column: span 2; min-width: 0; }
.boat-more > li:first-child:nth-last-child(4),
.boat-more > li:first-child:nth-last-child(3n+4) ~ li:nth-last-child(-n+4),
.boat-more > li:first-child:nth-last-child(3n+5) ~ li:nth-last-child(-n+2) { grid-column: span 3; }
.boat-thumb { height: 120px; border-radius: var(--r-tile); padding: 12px; font-size: var(--fs-xs); }
.boat-thumb.has-img { padding: 8px; }
.boat-thumb .ph-cap::before { display: none; }
.boat-thumb-cap {
  position: relative; z-index: 1;
  max-width: 100%;
  /* не больше двух строк: на узкой плитке длинная подпись кончается многоточием, а не облаком
     в четыре строки на пол-фото; полностью она звучит в aria-label и видна в окне просмотра */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; overflow-wrap: break-word;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--cream); color: var(--navy);
  font-weight: 700; font-size: var(--fs-xs); line-height: 1.3;
}
a.ph.has-img { cursor: zoom-in; text-decoration: none; }
/* плашка над описанием дня: у дня нет фото и общего нет — синяя, без ссылки */
.route-map.is-empty { pointer-events: none; cursor: default; }
.route-map.is-empty > img { display: none; }
a.ph.has-img > img { transition: transform var(--dur-move) var(--ease-out); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  a.ph.has-img:hover > img { transform: scale(1.03); }
}
@media (max-width: 600px) {
  .boat-media, .boat-more { gap: 10px; }
  .boat-thumb { height: 100px; padding: 10px; }
}

/* Просмотр фото крупно (wp.js) */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(7, 26, 51, .97); color: var(--cream);
}
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; animation: lb-in var(--dur-base) var(--ease-out); }
@keyframes lb-in { from { opacity: 0; } }
/* строгая рамка: фото любой формы целиком помещается между кнопками и подписью, без прокрутки (клиент 24.10) */
.lightbox-fig { margin: 0; min-height: 0; height: 100%; box-sizing: border-box; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 72px 80px 0; }
.lightbox-fig img {
  width: auto; height: auto; min-width: 0; min-height: 0;
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: var(--r-field); background: var(--white);
}
.lightbox-cap {
  min-height: 64px; padding: 16px 80px 24px; text-align: center; font-weight: 600; font-size: var(--fs-base);
  /* длинная подпись не отнимает место у фото: не больше двух строк */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.lightbox .icon-btn { position: absolute; border-color: var(--cream); color: var(--cream); }
@media (hover: hover) and (pointer: fine) {
  .lightbox .icon-btn:hover { background: var(--cream); color: var(--navy); }
}
.lightbox .icon-btn:focus-visible { outline-color: var(--orange); }
.lightbox-close { top: 16px; right: 16px; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-prev:active, .lightbox-next:active { transform: translateY(-50%) scale(var(--press-scale)); }
@media (max-width: 600px) {
  .lightbox-fig { padding: 72px 12px 0; }
  .lightbox-cap { padding: 12px 72px 20px; font-size: var(--fs-s); }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 12px; transform: none; }
  .lightbox-prev:active, .lightbox-next:active { transform: scale(var(--press-scale)); }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox[open] { animation: none; }
}

/* ---------- 3. Панель администратора ---------- */
.admin-bar .site-header { top: calc(var(--header-h-compact) - var(--header-h) + 32px); }
html:has(body.admin-bar) { scroll-padding-top: calc(var(--header-h-compact) + 33px); }
@media (max-width: 782px) {
  .admin-bar .site-header { top: calc(var(--header-h-compact) - var(--header-h) + 46px); }
  html:has(body.admin-bar) { scroll-padding-top: calc(var(--header-h-compact) + 47px); }
}
@media (max-width: 600px) {
  /* на телефоне панель администратора уезжает при прокрутке — шапка садится к верху,
     и якоря встают под шапку без запаса под панель (как у посетителя; отчёт 28) */
  .admin-bar .site-header { top: calc(var(--header-h-compact) - var(--header-h)); }
  html:has(body.admin-bar) { scroll-padding-top: calc(var(--header-h-compact) + 1px); }
}

/* ---------- 4. Обычные страницы ---------- */
.page-plain .h2 { margin-bottom: 24px; }
.page-content { max-width: 760px; font-size: var(--fs-base); line-height: 1.65; }
.page-content > * + * { margin-top: 1em; }
.page-content h2, .page-content h3 { margin-top: 1.6em; }
.page-content a { color: var(--brown); }
.page-content ul, .page-content ol { padding-left: 1.3em; }
/* Длинные «слова» без пробелов (линии подписи ____/____/, номера счетов) переносятся,
   а не распирают колонку: иначе на 768 и 390 уезжает вся страница (отчёт 16, п. 1). */
.page-content { overflow-wrap: anywhere; }
/* Таблицы договора: стили блоков WP отключены, поэтому оформление здесь.
   UA-отступ figure (40px по бокам) убран — таблица встаёт в колонку текста. */
.page-content figure.wp-block-table { margin-left: 0; margin-right: 0; max-width: 100%; overflow-x: auto; }
.page-content table { width: 100%; max-width: 100%; border-collapse: collapse; }
.page-content td, .page-content th {
  padding: 8px 16px 8px 0; vertical-align: top; text-align: left;
  border-bottom: 1px solid var(--line-soft);
  overflow-wrap: anywhere;
}
.page-content td:last-child, .page-content th:last-child { padding-right: 0; }
@media (max-width: 600px) {
  /* fixed: колонки делят ширину поровну, а не по самому длинному «слову» —
     20-значный номер счёта помещается в строку, линии подписи переносятся */
  .page-content table { table-layout: fixed; font-size: var(--fs-s); line-height: 1.5; }
  .page-content td, .page-content th { padding-right: 8px; overflow-wrap: break-word; hyphens: auto; }
}

/* ---------- 5. Telegram: канал новостей (п. 62) ----------
   Подписка — отдельное действие, а не «написать», поэтому это не четвёртый значок в ряду (п. 31),
   а спокойная кнопка-пилюля под значками: контур в тон линий подвала, значок — оранжевый. */
.footer-contacts a.footer-channel {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin-top: 10px; padding: 0 20px 0 16px;
  border: 1.5px solid var(--line-dark-2); border-radius: var(--r-pill);
  color: var(--on-dark); font-weight: 700; font-size: var(--fs-s); line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-color), border-color var(--dur-fast) var(--ease-color), transform var(--dur-press) var(--ease-out);
}
.footer-channel svg { flex: none; color: var(--orange-soft); }
@media (hover: hover) and (pointer: fine) {
  .footer-contacts a.footer-channel:hover { color: var(--orange-soft); border-color: var(--orange-soft); }
}
.footer-contacts a.footer-channel:active { transform: scale(var(--press-scale)); }

/* «Фильмы»: кнопки YouTube и Дзена и под ними строка про канал — справа в шапке блока, как была кнопка */
/* рядом с заголовком (≥ 1100px) — по правому краю; когда шапка блока переносится — по левому */
.films-links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.films-btns { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 1100px) { .films-links { align-items: flex-end; } .films-btns { justify-content: flex-end; } }
.films-channel {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-size: var(--fs-s); font-weight: 600; line-height: 1.35;
  color: var(--brown); text-decoration: none;
}
.films-channel > span:not(.sr-only) { text-wrap: balance; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.films-channel svg { flex: none; }
@media (hover: hover) and (pointer: fine) { .films-channel:hover { color: var(--navy); } }
.films-links-solo { margin-top: 12px; align-items: flex-start; }
@media (max-width: 600px) {
  .section-head > .films-links { order: 2; align-items: stretch; }
  .films-btns { flex-direction: column; }
}

/* Сообщение после заявки: строка про канал под «Спасибо! Заявка отправлена…» */
.ss-ff .ff-message-success .ff-channel-note { margin-top: 6px; font-weight: 500; }
.ss-ff .ff-channel-link { color: var(--brown); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .ss-ff .ff-channel-link:hover { color: var(--navy); } }

/* ---------- 6. Плашка о cookie и Яндекс.Метрике (п. 64) ----------
   Компактная карточка в цвет подвала, внизу слева (справа — «яхта»-индикатор прокрутки).
   «Принять» и «Отказаться» — одного размера, обе с клавиатуры. На телефоне — над нижней
   панелью; когда панель уезжает (у формы и подвала), плашка опускается следом. */
.cookie-bar {
  position: fixed; z-index: 35;
  left: 24px; bottom: 24px;
  width: min(440px, calc(100vw - 48px));
  padding: 18px 20px 20px;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-panel);
  background: var(--navy); color: var(--on-dark-2);
  box-shadow: var(--shadow-float);
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur-move) var(--ease-out), transform var(--dur-move) var(--ease-out);
}
.cookie-bar.is-shown { opacity: 1; transform: none; }
.cookie-bar.is-leaving { transition-duration: var(--dur-exit); }
.cookie-text { font-size: var(--fs-s); line-height: 1.55; }
.cookie-text a { color: var(--orange-soft); }
@media (hover: hover) and (pointer: fine) { .cookie-text a:hover { color: var(--on-dark); } }
.cookie-actions { display: flex; gap: 10px; margin-top: 14px; }
.cookie-actions .btn { flex: 1 1 0; min-width: 0; padding: 0 16px; }
.cookie-bar .btn-ghost { color: var(--on-dark); border-color: var(--on-dark-3); }
@media (hover: hover) and (pointer: fine) {
  .cookie-bar .btn-ghost:hover { background: var(--cream); border-color: var(--cream); color: var(--navy); }
}
.cookie-bar .btn-ghost:active { background: var(--navy-deep); border-color: var(--on-dark-3); color: var(--on-dark); }
.cookie-bar :focus-visible { outline-color: var(--orange); }
/* фокус уходит к началу содержимого после выбора (consent.js) — без рамки вокруг всей страницы */
#main[tabindex="-1"]:focus { outline: none; }
/* Пока выбор не сделан, плашка висит над низом экрана. Подвалу — запас на её высоту
   (--cookie-h ставит consent.js, пересчитывает при ресайзе) + отступ плашки 24 + зазор 16,
   чтобы до строки © и ссылок можно было докрутить (13-eye, П1). Фокус с клавиатуры
   тоже не уходит под плашку. После выбора класс снимается — запас исчезает. */
html.cookie-open { scroll-padding-bottom: calc(var(--cookie-h, 0px) + 40px); }
html.cookie-open .site-footer { padding-bottom: calc(var(--cookie-h, 0px) + 40px); }
@media (max-width: 600px) {
  .cookie-bar {
    left: 12px; right: 12px; width: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 14px 16px 16px;
    border-radius: var(--r-card);
  }
  .cookie-text { font-size: var(--fs-sm); line-height: 1.5; }
  .cookie-actions { margin-top: 12px; }
  .cookie-actions .btn { width: auto; }
  .has-mbar .cookie-bar {
    bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom, 0px) + 10px);
    transition: opacity var(--dur-move) var(--ease-out), transform var(--dur-move) var(--ease-drawer);
  }
  .has-mbar .cookie-bar.is-leaving { transition-duration: var(--dur-exit); }
  .has-mbar:has(.mbar.is-hidden) .cookie-bar.is-shown { transform: translateY(var(--mbar-h)); }
  /* у подвала нижняя панель спрятана и плашка опущена к низу экрана (12 + safe-area) */
  html.cookie-open .site-footer { padding-bottom: calc(var(--cookie-h, 0px) + 28px + env(safe-area-inset-bottom, 0px)); }
  /* посреди страницы фокус не должен уходить ни под панель, ни под плашку над ней */
  html.cookie-open:has(.has-mbar) { scroll-padding-bottom: calc(var(--cookie-h, 0px) + var(--mbar-h) + 28px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-bar, .cookie-bar.is-shown, .has-mbar:has(.mbar.is-hidden) .cookie-bar.is-shown { transform: none; }
  .cookie-bar, .has-mbar .cookie-bar { transition: opacity var(--dur-fast) linear; }
  .footer-contacts a.footer-channel:active { transform: none; }
}
/* без движения плашка не опускается вслед за панелью — остаётся над её местом */
@media (prefers-reduced-motion: reduce) and (max-width: 600px) {
  html.cookie-open:has(.has-mbar) .site-footer { padding-bottom: calc(var(--cookie-h, 0px) + var(--mbar-h) + 28px + env(safe-area-inset-bottom, 0px)); }
}
@media (forced-colors: active) {
  .cookie-bar { border: 2px solid CanvasText; }
}
@media print {
  .cookie-bar { display: none !important; }
}

/* Главы маршрута по дням: все — в HTML (задание бюро, аудит п. 2). Заголовок главы — h3:
   «Глава 2 · воскресенье» + место, вид прежний. С JS видна одна глава (site.js ставит hidden),
   до запуска скрипта — только первая, без мигания. Без JS главы идут подряд. */
.day-head { margin: 0; }
.day-head .day-detail-title { display: block; }
.js .day-detail:not(.is-ready) .day-panel ~ .day-panel { display: none; }
html:not(.js) .day-panel + .day-panel { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
/* Нет фото дня и общего фото маршрута — плашки нет, карточка дня встаёт вровень со списком дней */
.day-detail-col > .day-detail:first-child { margin-top: 0; }

/* «Обновлено: 22 октября 2026» — один компонент для маршрутов и гидов (задания бюро 2026-10-22):
   мелкий вторичный текст, дата цен и программы. На маршруте — под строкой «Перелёт… — отдельно». */
.updated { margin: 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-3); }
.updated time { white-space: nowrap; }
.book-updated { margin-top: 4px; }
.book-updated + .book-field-2, .book-updated + .book-other + .book-field-2 { margin-top: 20px; }
/* «Другой заезд: 21–28 августа 2027» — у маршрутов-двойников (Черногория июнь / август) */
.book-other { margin: 10px 0 0; font-size: var(--fs-s); line-height: 1.4; color: var(--ink-3); }
.book-other a { white-space: nowrap; display: inline-block; padding: 3px 0; }
.book-other + .book-field-2 { margin-top: 16px; }

/* ---------- Шаблон «Гид» (page-guide.php, задание бюро 2026-10-22-guide-template) ----------
   Длинный текст для чтения с телефона: колонка ~720px по центру .wrap, ступени заголовков
   из шкалы сайта — H1 как у маршрута (52/38/32), H2 28/24/22, H3 20/18/18, текст 17/16/16. */
.guide { padding: 28px 0 var(--section-y); }
.guide-col { max-width: 720px; margin-left: auto; margin-right: auto; }
.guide-title { margin-top: 14px; }
.guide-meta { margin-top: 14px; font-size: var(--fs-s); }
.guide-body { margin-top: 28px; font-size: var(--fs-md); line-height: 1.6; color: var(--ink-2); overflow-wrap: break-word; }
.guide-body > * + * { margin-top: 16px; }
.guide-body > p:first-child { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); }
.guide-body h2, .guide-trips-h { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--navy); }
.guide-body h3 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; color: var(--navy); }
.guide-body > h2, .guide-body > section { margin-top: 48px; }
.guide-body > h3 { margin-top: 28px; }
.guide-body > h2 + *, .guide-body > h3 + * { margin-top: 12px; }
/* Таблица — часть своего раздела, а не новый раздел (Перфекционист 28.10, отчёт 26): после текста — 24px,
   сразу после заголовка — как любой текст после него. Было 48px: перебивало h2 + * — заголовок «отрывался». */
.guide-body > .table-scroll { margin-top: 24px; }
.guide-body > h2 + .table-scroll, .guide-body > h3 + .table-scroll { margin-top: 12px; }
.guide-body h2, .guide-body h3 { scroll-margin-top: 16px; }
.guide-body ul, .guide-body ol { padding-left: 1.3em; }
.guide-body li + li { margin-top: 6px; }
.guide-body li::marker { color: var(--brown); }
.guide-body strong { color: var(--navy); }
.guide-body a { color: var(--brown); }

/* «Коротко» — песочная панель; подписи пунктов navy 700, текст в той же строке */
.guide-short { padding: 26px 28px; background: var(--sand); border-radius: var(--r-panel); }
.guide-body > .guide-short { margin-top: 32px; }
.guide-short h2 { font-size: var(--fs-price); }
.guide-short ul { margin: 14px 0 0; padding-left: 1.1em; font-size: var(--fs-base); line-height: 1.55; }
.guide-short li + li { margin-top: 10px; }
.guide-short strong { font-weight: 700; }
.guide-short a { color: var(--brown-on-sand); } /* на песке #A35200 даёт 4,4:1 — ниже AA */

/* Оглавление: свёрнуто, раскрывается без JS (details) */
.guide-toc { border: 1.5px solid var(--line); border-radius: var(--r-tile); background: var(--white); }
.guide-body > .guide-toc { margin-top: 24px; }
.guide-toc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 0 20px; cursor: pointer; list-style: none;
  font-weight: 800; font-size: var(--fs-base); color: var(--navy);
}
.guide-toc summary::-webkit-details-marker { display: none; }
.guide-toc summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-top: -4px;
  border-right: 2px solid var(--brown); border-bottom: 2px solid var(--brown); transform: rotate(45deg);
}
.guide-toc details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.guide-toc ol { margin: 0; padding: 0 20px 18px 2.4em; font-size: var(--fs-ui); line-height: 1.45; }
.guide-toc li + li { margin-top: 8px; }
.guide-toc li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.guide-toc a { color: var(--navy); text-decoration-color: var(--line); }

/* Таблицы: листаются вбок внутри блока, страница — нет; подпись и первая колонка стоят на месте.
   Тень у правого края, пока есть что листать, — фон с background-attachment: local, без JS. */
.table-scroll {
  max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
  background:
    linear-gradient(to left, var(--cream) 40%, rgba(255, 248, 240, 0)) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, rgba(11, 37, 69, .16), rgba(11, 37, 69, 0)) right center / 14px 100% no-repeat scroll;
}
.table-scroll:focus-visible { outline-offset: 2px; border-radius: 4px; }
.table-scroll table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-ui); line-height: 1.45; font-variant-numeric: tabular-nums; }
.table-scroll caption {
  position: sticky; left: 0; caption-side: top; text-align: left;
  padding: 0 0 10px; font-weight: 700; font-size: var(--fs-base); color: var(--navy);
  /* подпись шириной в видимую часть, а не во всю таблицу: иначе на телефоне уходит за край */
  max-width: min(720px, calc(100vw - 2 * var(--gutter)));
}
.table-scroll th, .table-scroll td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); min-width: 140px; }
.table-scroll thead th { background: var(--sand); color: var(--navy); font-weight: 800; }
.table-scroll thead th:first-child { border-top-left-radius: 12px; }
.table-scroll thead th:last-child { border-top-right-radius: 12px; }
.table-scroll tbody th { font-weight: 700; color: var(--navy); }
.table-scroll th:first-child {
  position: sticky; left: 0; z-index: 1; min-width: 120px; width: 120px;
  background: var(--cream); box-shadow: inset -1.5px 0 0 var(--line);
}
.table-scroll thead th:first-child { background: var(--sand); }
.table-scroll td a, .table-scroll th a { display: inline-block; padding: 2px 0; }

/* FAQ — тот же аккордеон, что на главной (site.js: [data-accordion]); без JS все ответы открыты */
.guide-faq .faq-list { margin-top: 12px; }
.guide-faq .faq-h { font-size: inherit; letter-spacing: 0; }
.faq-a-in > * + * { margin-top: 10px; }
.faq-a-in { padding-bottom: 18px; }
.faq-a-in ul { padding-left: 1.3em; }

/* «Подходящие маршруты» и призыв */
.guide-trips { margin-top: 56px; }
.guide-trips .trip-grid { margin-top: 20px; }
.guide-trips .trips-extra { margin-top: 16px; }
.guide-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

@media (max-width: 900px) {
  .guide-body h2, .guide-trips-h { font-size: 24px; }
  .guide-body h3 { font-size: 18px; }
  .guide-body { font-size: var(--fs-base); }
}
@media (max-width: 600px) {
  .guide { padding-top: 16px; }
  .guide-body h2, .guide-trips-h { font-size: 22px; }
  .guide-body > h2, .guide-body > section { margin-top: 36px; }
  .guide-body > p:first-child { font-size: var(--fs-md); }
  .guide-short { padding: 20px 18px; }
  .guide-short h2 { font-size: var(--fs-md); }
  .guide-toc summary { padding: 0 16px; }
  .guide-toc ol { padding: 0 16px 16px 2.2em; }
  .table-scroll th:first-child { min-width: 110px; width: 110px; }
  .table-scroll th, .table-scroll td { padding: 10px 12px; }
  .guide-trips { margin-top: 40px; }
  .guide-cta { flex-direction: column; margin-top: 32px; }
}

/* Фоновые фото секций главной: телефону — уменьшенная копия, компьютеру — крупная (inc/perf.php, аудит п. 9) */
.ss-bg { background-image: var(--bg-s); }
@media (min-width: 769px) { .ss-bg { background-image: var(--bg-m); } }
@media (min-width: 1441px) { .ss-bg { background-image: var(--bg-l); } }

/* «Другие маршруты» внизу страницы маршрута: карточки как на главной; отступ сверху уже даёт .route-body */
.route-more { padding-top: 0; }
.route-more .trip-grid { margin-top: 28px; }
@media (max-width: 600px) { .route-more .trip-grid { margin-top: 4px; } }

/* ---------- «Яхта для компании» (page-group.php, задание бюро 2026-10-27-group-boat-page) ----------
   Текст, таблица, FAQ и маршруты — компоненты «Гида» выше. Блок формы #zayavka — тёмная секция
   «Заявка» главной (.section-dark + .booking-layout + .booking-form), поля — как в форме 3 (.ss-ff).
   Новых цветов и шрифтов нет: только раскладка вариантов выбора и подсказок. */
.group-form { margin-top: 56px; }
.group-faq, .group-cta { margin-top: 0; } /* отступ сверху даёт сам раздел (h2 / .guide-faq — 48px) */
.group-cta + .guide-cta { margin-top: 24px; }

/* Таблица сразу после h2 — общее правило гидов выше (отчёт 26; локальная правка отчёта 24 снята). */
/* «Как это устроено» — шаги: номер жирный, как цифры шагов в «Заявке» главной; шаги длинные — воздух между ними */
.group .guide-body > ol > li::marker { font-weight: 800; font-variant-numeric: tabular-nums; }
.group .guide-body > ol > li + li { margin-top: 12px; }

/* Слева от длинной формы на компьютере была пустая колонка: заголовок блока уезжал вверх,
   а форма продолжалась. Заголовок с подводкой стоит под шапкой, пока листается форма.
   Только когда колонки стоят рядом: .booking-layout переносит форму под заголовок, пока поле уже
   360 + 48 + 460 = 868px (с полями 40px — до 947px). На 901–947 заголовок «лип» поверх формы (отчёт 26). */
@media (min-width: 960px) {
  .group-form .booking-intro { position: sticky; top: calc(var(--header-h-compact) + 32px); }
  .admin-bar .group-form .booking-intro { top: calc(var(--header-h-compact) + 64px); }
}

/* «Форму видят только редакторы» — служебная плашка ступенью темнее карточки, а не серая строка */
.group-form-note {
  margin: 0; padding: 12px 16px;
  border-radius: var(--r-field);
  background: var(--navy-deep);
  font-size: var(--fs-s); line-height: 1.5; color: var(--on-dark-2);
}

/* После отправки форма прячется, «Спасибо» встаёт на её место: промежуток до пометки даёт сама
   карточка (gap 18px), без своего отступа — иначе у посетителя сверху 50px, снизу 32px */
#ss-group .ff-message-success { margin-top: 0; }

/* Два согласия (LEGAL п. 8): зона нажатия подписи выходит на 12px вверх и вниз (padding + отрицательный
   margin, как .consent), а промежуток полей 18px (на телефоне 14px) — зоны заходили друг на друга
   на 6–10px, и тап по низу первого текста мог отметить рассылку. Промежуток между ними — 24px:
   зоны встык, без перекрытия, каждая по-прежнему не ниже 44px. */
#ss-group .consent-wrap + .consent-wrap { margin-top: 6px; }
@media (max-width: 600px) { #ss-group .consent-wrap + .consent-wrap { margin-top: 10px; } }

/* условные поля Fluent («Месяц», подсказки): его стили отключены — повторяем правило показа */
.ss-ff .has-conditions { display: none; }
.ss-ff .has-conditions.ff_cond_v { display: block; }

/* Подсказка под выбором («меньше 6», «больше 8», «дети») — плашка ступенью темнее карточки,
   вплотную к вариантам: читается как ответ на выбор, а не как ещё одно поле. Ссылка — как в согласии. */
.ss-ff .ss-hint {
  margin-top: -8px; padding: 12px 16px;
  border-radius: var(--r-field);
  background: var(--navy);
  font-size: var(--fs-s); line-height: 1.5; color: var(--on-dark);
}
.ss-ff .ss-hint:focus { outline: none; } /* Fluent ставит подсказке tabindex="-1" */
.ss-ff .ss-hint p { margin: 0; }
.ss-ff .ss-hint a { color: var(--orange-soft); }
@media (hover: hover) and (pointer: fine) { .ss-ff .ss-hint a:hover { color: var(--on-dark); } }

/* «Сколько вас», «Куда», «Когда», «Дети»: варианты — чипами, как фильтр маршрутов на главной (.chip):
   пилюля 44px, жирная подпись; выбранный — залит (на тёмном — кремом, текст navy).
   Кружки и квадраты браузера (вид Fluent по умолчанию) прячем, но поле остаётся настоящим:
   клавиатура, диктор, проверка Fluent работают как раньше. Браузер без :has — прежние кружки. */
.ss-ff .ss-choices .ff-el-input--label label { margin-bottom: 8px; }
.ss-ff .ss-choices .ff-el-input--content { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-ff .ss-choices .ff-el-form-check { margin: 0; min-width: 0; }
.ss-ff .ss-choices .ff-el-form-check-label {
  margin: 0; padding: 8px 0; min-height: 40px; align-items: center; gap: 10px;
  font-size: var(--fs-base); color: var(--on-dark);
}
.ss-ff .ss-choices .error { flex-basis: 100%; margin-top: 2px; }

@supports selector(:has(*)) {
  .ss-ff .ss-choices .ff-el-form-check-label {
    position: relative;
    justify-content: center;
    min-width: 44px; min-height: 44px; padding: 9px 18px;
    border: 2px solid var(--on-dark-3); border-radius: var(--r-pill);
    font-weight: 700; font-size: var(--fs-ui); line-height: 1.3; text-align: center;
    transition:
      background-color var(--dur-fast) var(--ease-color),
      border-color var(--dur-fast) var(--ease-color),
      color var(--dur-fast) var(--ease-color),
      transform var(--dur-press) var(--ease-out);
  }
  .ss-ff .ss-choices .ff-el-form-check-input {
    position: absolute; inset: 0;
    width: 100%; height: 100%; margin: 0;
    opacity: 0; cursor: pointer;
  }
  @media (hover: hover) and (pointer: fine) {
    .ss-ff .ss-choices .ff-el-form-check-label:hover { border-color: var(--on-dark); }
  }
  .ss-ff .ss-choices .ff-el-form-check-label:active { transform: scale(var(--press-scale)); }
  .ss-ff .ss-choices .ff-el-form-check-label:has(:checked) {
    background: var(--cream); border-color: var(--cream); color: var(--navy);
  }
  .ss-ff .ss-choices .ff-el-form-check-label:has(:focus-visible) { outline: 3px solid var(--orange); outline-offset: 3px; }
  .ss-ff .ss-choices.ff-el-is-error .ff-el-form-check-label { border-color: var(--error-on-dark); }
}
@media (forced-colors: active) {
  .ss-ff .ss-choices .ff-el-form-check-label { border-color: ButtonText; }
  .ss-ff .ss-choices .ff-el-form-check-label:has(:checked) { background: Highlight; border-color: Highlight; color: HighlightText; forced-color-adjust: none; }
  .group-form-note, .ss-ff .ss-hint { border: 2px solid CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-ff .ss-choices .ff-el-form-check-label:active { transform: none; }
}

/* Аниматор 27.10 (отчёт 25). Подсказки и «Месяц» раскрываются высотой (wp.js): пока идёт — обрезаем. */
#ss-group .has-conditions.is-sliding { overflow: hidden; }
/* «Спасибо»: встаёт под липкую шапку с запасом (wp.js) и проявляется с коротким подъёмом —
   один раз за визит, --dur-move / --ease-out. При уменьшенном движении — только прозрачность.
   Фокус ставится программно (кнопка отправки скрыта) — рамка фокуса здесь не нужна. */
#ss-group .ff-message-success {
  scroll-margin-top: 40px;
  animation: ss-thanks-in var(--dur-move) var(--ease-out) both;
}
#ss-group .ff-message-success:focus { outline: none; }
@keyframes ss-thanks-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes ss-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #ss-group .ff-message-success { animation-name: ss-fade-in; animation-duration: var(--dur-base); }
}

@media (max-width: 600px) {
  .group-form { margin-top: 40px; }
  .ss-ff .ss-choices .ff-el-form-check-label { padding-left: 14px; padding-right: 14px; }
}

/* ---------- Задания бюро 28.10 (README-2026-10, п. 20 и 22), отчёт студии 29 ---------- */
/* Шапка: шестой пункт «Новичкам». Полная шапка главной (логотип + 6 пунктов + Telegram + «Подобрать путешествие»)
   при промежутках 28 / 24 занимала 1178px — на 2px больше поля 1176 (кнопка заходила в правое поле от 1280),
   а при 16 / 16 на 1152–1181 — на 30px (Перфекционист, отчёт 31). Решение без смены состава:
   – от 1152: минимальный промежуток между группами 16px — на всех страницах его всё равно раздаёт space-between
     (на главной выходит 23px, на остальных 56–170px); между пунктами меню от 1200 — прежние 28px;
   – 1152–1279: пункты 14px вместо 15 и кнопка поуже (поля 20px, 15px) — тогда промежутки между пунктами
     не 16, а 20px на 1152–1199 и 28px на 1200–1279, как на 1280+. Бургер (≤ 1151) не меняется. */
@media (min-width: 1152px) {
  .header-inner { gap: 16px; }
}
@media (min-width: 1152px) and (max-width: 1279px) {
  .nav-links > a, .nav-links > .nav-item > a { font-size: var(--fs-s); }
  .header-actions .btn { padding: 0 20px; font-size: var(--fs-ui); }
}
@media (min-width: 1152px) and (max-width: 1199px) {
  .nav-links { gap: 20px; }
}

/* Текущий раздел в шапке и бургере: на гиде-хабе «Новичкам» — aria-current="page", на остальных гидах
   хаба — aria-current="true" (раздел из крошек; inc/menus.php). Цвет — как наведение, плюс черта под словом:
   одним цветом состояние не передаётся. */
.nav-links a[aria-current] {
  color: var(--brown);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}

/* «Полезно перед поездкой» на маршруте: три текстовые ссылки на гиды. Рамка — как у «Маршрут может меняться»,
   заголовок — ступень заголовков вкладки «Что включено», ссылки — как «Подробно: что входит в цену…». */
/* Отчёт 31: радиус — как у «Маршрут может меняться» (r-tile, было r-panel 22px); зона нажатия ссылки 44px
   (строка 24 + 10 + 10) встык, без перекрытия; видимые отступы до заголовка (16) и до рамки (28) прежние —
   их держат margin списка 6 / −6. На телефоне поля 16px, как у оговорки, и 32px до соседей сверху и снизу. */
.route-guides { margin-top: 40px; padding: 24px; border: 1.5px solid var(--line); border-radius: var(--r-tile); }
.route-guides-h { font-size: var(--fs-price); }
.route-guides-list { margin: 6px 0 -6px; padding: 0; list-style: none; line-height: 1.5; }
.route-guides-list a { display: inline-block; padding: 10px 0; color: var(--brown-on-sand); font-weight: 600; }
/* Отчёт 32, п. 1: наведение — как у текстовых ссылок темы (a:hover → --navy; переход цвета --dur-fast / --ease-color
   берётся из общего правила a). Только смена цвета, без сдвига — при уменьшенном движении остаётся как есть.
   Черта и фокус (общий :focus-visible) не меняются. */
@media (hover: hover) and (pointer: fine) { .route-guides-list a:hover { color: var(--navy); } }
@media (max-width: 600px) {
  .route-guides { margin-top: 32px; padding: 16px; }
}

/* H3 в гидах (п. 22, Ш-7) — 20 / 18px по шкале гида. В тексте гидов H3 — только вопросы «Частых вопросов»:
   раньше они наследовали размер текста (17 / 16). Тот же компонент — на «Яхте для компании» (.guide-faq). */
.guide-faq .faq-h { font-size: 20px; letter-spacing: -.01em; }
.guide-faq .faq-q { font-size: inherit; }
@media (max-width: 900px) {
  .guide-faq .faq-h { font-size: 18px; }
}

/* Крошки в 3 уровня (152/153) на телефоне: текущая страница переносится целиком, а не обрывком
   («Сколько стоит / неделя на яхте» → вторая строка «Сколько стоит неделя на яхте»). Длинное название
   всё равно переносится внутри — inline-block не шире строки. Отчёт 31. */
.crumbs [aria-current] { display: inline-block; max-width: 100%; }

/* Ответ FAQ гидов: снизу складывались отступ абзаца (22 / 16px) и поле .faq-a-in (18px) — 40 / 34px под ответом
   при 22 / 14px над ним. Последний элемент без отступа, поле 24 / 20px: под ответом чуть больше, чем над ним,
   и ответ держится своего вопроса. Тот же компонент на «Яхте для компании». Отчёт 31. */
.guide-faq .faq-a-in > :last-child { margin-bottom: 0; }
.guide-faq .faq-a-in { padding-bottom: 24px; }
@media (max-width: 600px) { .guide-faq .faq-a-in { padding-bottom: 20px; } }

/* ---------- 29.10: форма 3, текущий раздел на маршрутах, «Подробно: что входит в цену…» (отчёт 34) ---------- */
/* Форма 3 (#ss-booking) теперь без стилей Fluent (inc/fluentforms.php) — у кнопки снова наведение темы,
   как у .btn-primary. Фон в разделе 1 задан с !important (перебивал синий Fluent), поэтому и здесь он;
   форма 4 (#ss-group, со стилями Fluent) не меняется. */
@media (hover: hover) and (pointer: fine) {
  #ss-booking .ff-btn-submit:hover { background-color: var(--orange-hover) !important; }
}
#ss-booking .ff-btn-submit:active { background-color: var(--orange) !important; }

/* «Подробно: что входит в цену…» (site.css, .incl-more a) — свой цвет перебивал общий a:hover (отчёт 33).
   Наведение — как у «Полезно перед поездкой»: только цвет --navy, переход из общего правила a. */
@media (hover: hover) and (pointer: fine) { .incl-more a:hover { color: var(--navy); } }

/* Форма 3: ошибки и подпись согласия без висячего последнего слова (отчёт 35, п. 1 — на 1440 / 1152
   «заявку.» уходило на вторую строку одно). Браузеры без text-wrap: pretty просто переносят как раньше.
   Форма 4 (#ss-group) не меняется. */
#ss-booking .error, #ss-booking .text-danger, #ss-booking .ff_t_c { text-wrap: pretty; }

/* ---------- 08.11: страница «Капитаны» (page-captains.php, inc/captains.php; отчёт 43) ----------
   Компоненты «Гида». Новое: карточка капитана (компонент .captain с главной, раскладка как у телефонной
   карточки главной — круг + роль и имя, под ними факты), цитаты Lora Italic, служебные пометки [ЮРОТДЕЛ…].
   Цвета — только из палитры темы. */
.captains-page .guide-body > p.guide-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); }
.captains-page .guide-body > p.ph-note {
  padding: 12px 16px; border: 1.5px dashed var(--field-border); border-radius: var(--r-field);
  font-size: var(--fs-s); line-height: 1.5; color: var(--ink-3);
}

/* Карточка капитана. Портрет — при включённых фото (LEGAL п. 7, 11.2), иначе на месте фото — инициалы на песке */
.guide-body > h2 + .captain-page { margin-top: 20px; }
.captain-page {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 20px; align-items: center;
  padding: 24px; background: var(--white); border-radius: var(--r-panel);
}
.captain-page .captain-body { display: contents; }
.captain-page .captain-photo {
  grid-row: 1 / 3; width: 88px; height: 88px; min-height: 0; padding: 0;
  border-radius: var(--r-pill); overflow: hidden;
}
/* 09.11: портрет (опция sailstory_captains_photos) — круг того же размера, кадр как на главной */
.captain-portrait { background: var(--sand); }
.captain-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.captain-mono {
  display: grid; place-items: center; background: var(--sand); color: var(--brown-on-sand);
  font-family: var(--font-story); font-style: italic; font-weight: 600; font-size: 32px; line-height: 1;
}
.captain-page .captain-role { grid-column: 2; align-self: end; margin: 0; }
.captain-page .captain-name {
  grid-column: 2; align-self: start; margin: 4px 0 0;
  font-size: var(--fs-h3); font-weight: 800; line-height: 1.2; letter-spacing: -.015em; color: var(--navy);
}
.captain-facts {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px;
  margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line-soft);
}
.captain-facts dt { font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-3); }
.captain-facts dd { margin: 2px 0 0; font-size: var(--fs-base); font-weight: 700; line-height: 1.4; color: var(--navy); text-wrap: pretty; }
/* 09.11: текст бюро без подписей «Капитан:», «Мили:» — факты = выделенные начала пунктов, без подписи сверху */
.captain-page .captain-facts-leads { list-style: none; padding-left: 0; }
.captain-page .captain-facts-leads li { margin: 0; font-size: var(--fs-base); font-weight: 700; line-height: 1.4; color: var(--navy); text-wrap: pretty; }

/* Цитаты капитанов — Lora Italic темы (.story), линия слева — акцентный коричневый.
   figure.quote: у <figure> по умолчанию поля 40px слева и справа — цитата уезжала от колонки текста (отчёт 44) */
.captains-page .guide-body blockquote,
.captains-page .guide-body .quote { margin: 0; }
.captains-page .guide-body > blockquote,
.captains-page .guide-body > .quote { margin-top: 24px; padding: 2px 0 2px 24px; border-left: 2px solid var(--brown); }
.captains-page .guide-body > h3 + blockquote,
.captains-page .guide-body > h3 + .quote { margin-top: 16px; }
.captains-page .guide-body blockquote p {
  font-family: var(--font-story); font-style: italic; font-weight: 500;
  font-size: var(--fs-lead); line-height: 1.55; color: var(--navy); text-wrap: pretty;
}
.captains-page .quote-by { margin-top: 12px; font-size: var(--fs-s); font-weight: 700; color: var(--ink-3); }

/* «Напишите капитану» после «Подходящих маршрутов»: отступ сверху даёт сам h2 (48px) */
.captains-cta { margin-top: 0; }
.captains-cta + .guide-cta { margin-top: 24px; }

@media (max-width: 600px) {
  .captains-page .guide-body > p.guide-lead { font-size: var(--fs-md); }
  .captain-page { grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; padding: 20px; border-radius: var(--r-tile); }
  .captain-page .captain-photo { width: 64px; height: 64px; }
  .captain-mono { font-size: 24px; }
  .captain-page .captain-name { font-size: var(--fs-lead); }
  .captain-facts { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; padding-top: 16px; }
  .captain-facts dd, .captain-page .captain-facts-leads li { font-size: var(--fs-ui); }
  .captains-page .guide-body > blockquote,
  .captains-page .guide-body > .quote { padding-left: 16px; }
  .captains-page .guide-body blockquote p { font-size: var(--fs-md); }
}
@media (forced-colors: active) {
  .captain-page, .captains-page .guide-body > p.ph-note { border: 1px solid CanvasText; }
}

/* ---------- 09.11: «Капитаны» опубликованы (отчёт 48) ----------
   Главная, «Кто вас поведёт»: ссылка «Подробнее о капитанах» — абзац .trips-note (как «Не нашли свои даты?…»),
   на песке ссылка темнее: #A35200 даёт 4,4:1, --brown-on-sand — 4,6:1. */
.section-sand .trips-note a { color: var(--brown-on-sand); }
.section-sand .trips-note a:hover { color: var(--navy); }
/* Круг 72 px карточки капитана на телефоне: кадр по лицу того же снимка (perf.php, --bg-face), если он есть.
   Кадр квадратный — в квадратном круге cover показывает его целиком, точка кадра из style не мешает */
@media (max-width: 600px) {
  .captain-photo.ss-bg[style*="--bg-face"] { background-image: var(--bg-face); }
}