/* Секции: по одному блоку на секцию, в порядке карты из docs/design-system.md. Блок начинается с комментария «NN id».
   Мобильные правила – в конце блока секции: @media (max-width: 768px) и (max-width: 500px). */

/* Чат Visito (внешний виджет, fixed внутри своего shadow DOM): на телефоне до первой прокрутки скрыт – иначе
   кнопка лежит на переключателе сезона в hero. visibility наследуется в shadow DOM. is-scrolled ставит main.js */
@media (max-width: 768px) {
  [data-visito-webchat-widget] { transition: opacity var(--dur-300) var(--ease-out), visibility var(--dur-300); }
  html:not(.is-scrolled) [data-visito-webchat-widget] { opacity: 0; visibility: hidden; }
}

/* 00 шапка и меню – каркас страницы, не секция карты.
   Шапка sticky; меню – fixed-слой под шапкой (служебный оверлей, исключение записано в базе). */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: var(--color-bg-page); color: var(--color-fg);
  border-bottom: var(--line) solid var(--color-line);
}
.site-header__start { padding-inline: var(--page-margin); display: flex; align-items: center; }
.menu-toggle__close, .menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: inline; }
.site-header__logo { align-self: start; margin-top: var(--space-12); margin-bottom: calc(var(--logo-overhang) * -1); }
.site-header__logo img { height: var(--logo-h); width: auto; }
.site-header__end { justify-self: end; align-self: stretch; display: flex; align-items: center; gap: var(--space-24); }
.site-header__book {
  align-self: stretch; display: flex; align-items: center;
  padding-inline: var(--space-48);
  background: var(--color-accent); color: var(--color-on-accent); font-weight: var(--fw-strong);
  transition: padding var(--dur-300) var(--ease-out);
}
.site-header__book:hover { padding-inline: var(--space-64); }

.menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-menu);
  overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--color-bg-page); color: var(--color-fg);
  clip-path: inset(0 0 100% 0); visibility: hidden;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.has-motion .menu { transition: clip-path var(--dur-900) var(--ease-sharp), visibility 0s linear var(--dur-900); }
.has-motion .menu.is-open { transition: clip-path var(--dur-900) var(--ease-sharp), visibility 0s; }
.menu__nav {
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-16);
  padding: calc(var(--logo-overhang) + var(--space-48)) var(--space-64) var(--space-48);
  color: var(--color-accent);
}
.menu__nav a { display: inline-flex; align-items: baseline; gap: var(--space-16); }
.menu__nav a::before { content: "\203A"; transition: transform var(--dur-300) var(--ease-out); }
.menu__nav a:hover::before { transform: translateX(var(--arrow-shift)); }
.menu__cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: var(--line) solid var(--color-line); }
.menu__cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-16);
  padding: var(--space-24); text-align: center;
  border-bottom: var(--line) solid var(--color-line);
}
.menu__cell:nth-child(odd) { border-right: var(--line) solid var(--color-line); }
.menu__cell:nth-last-child(-n + 2) { border-bottom: 0; }
.menu__cell p { max-width: var(--measure-cell); }
.menu__cell a { color: var(--color-accent); }
.menu__cell--start { align-items: flex-start; text-align: left; }
.menu__weather { display: flex; align-items: baseline; gap: var(--space-12); }
.menu__legal { display: flex; flex-direction: column; gap: var(--space-8); }

@media (max-width: 1100px) {
  .menu { grid-template-columns: minmax(0, 1fr); }
  .menu__cells { border-left: 0; border-top: var(--line) solid var(--color-line); }
}
@media (max-width: 768px) {
  .site-header { height: var(--header-h-mobile); }
  .site-header__logo { margin-top: var(--space-8); margin-bottom: calc(var(--logo-overhang-mobile) * -1); }
  .site-header__logo img { height: var(--logo-h-mobile); }
  .site-header__end { gap: var(--space-12); }
  .site-header__book, .site-header__book:hover { padding-inline: var(--space-16); }
  .menu { inset: var(--header-h-mobile) 0 0 0; }
  .menu__nav { padding: calc(var(--logo-overhang-mobile) + var(--space-32)) var(--page-margin-mobile) var(--space-32); }
  .menu__cells { grid-template-columns: minmax(0, 1fr); }
  .menu__cell, .menu__cell:nth-child(odd) { border-right: 0; }
  .menu__cell:nth-last-child(2) { border-bottom: var(--line) solid var(--color-line); }
}

/* 01 hero – десктоп: сверху H1 «лесенкой» по центру, ниже фото сезона на весь оставшийся экран, переключатель сезона
   в нижнем левом углу фото. Мобильный (≤ 768): фото на весь экран, H1 обычным абзацем светлым поверх низа кадра на
   тёмной подложке, над переключателем (концепт J, выбран 2026-10-05). Кадры сменяются приёмом season */
.hero {
  height: calc(100svh - var(--header-h)); min-height: var(--hero-min-h);
  display: flex; flex-direction: column; gap: var(--space-32);
  padding: calc(var(--logo-overhang) + var(--space-24)) var(--page-margin) var(--page-margin);
}
.hero__top { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); column-gap: var(--gutter); }
/* H1 «лесенка» (концепт C, выбран 2026-10-04): три строки ступенькой по сетке, смыслы – плотным весом, связки – тонким */
/* Блок «лесенки» шириной по самой длинной строке и стоит по центру; ступеньки – отступы в em, растут вместе с кеглем */
.hero__title {
  grid-column: 1 / -1; justify-self: center; width: fit-content; max-width: 100%;
  display: flex; flex-direction: column; font-weight: var(--fw-hero-light); line-height: var(--lh-hero);
}
.hero__title b { font-weight: var(--fw-hero-accent); }
.hero__row { display: block; }
.hero__row--2 { padding-left: var(--hero-step-2); }
.hero__row--3 { padding-left: var(--hero-step-3); }

.hero__stage { flex: 1; min-height: 0; display: grid; overflow: hidden; }
.hero__stage > * { grid-area: 1 / 1; min-height: 0; }
.hero__frame { display: grid; min-height: 0; }
.hero__frame > * { grid-area: 1 / 1; min-height: 0; }
.hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus); }
.hero__frame figcaption {
  align-self: start; justify-self: end; margin: var(--space-24); max-width: var(--measure-caption);
  padding: var(--space-8) var(--space-12); border-radius: var(--radius-s);
  background: var(--color-caption-bg); color: var(--color-fg);
}
.hero__frame--placeholder { background: linear-gradient(to bottom, var(--ph-winter-sky) 0 48%, var(--ph-winter-lake) 48% 72%, var(--ph-winter-shore) 72%); }

.hero__pick { z-index: 2; align-self: end; justify-self: start; margin: var(--space-24); display: flex; flex-direction: column; align-items: start; gap: var(--space-8); }
.hero__seasons {
  display: inline-flex; gap: var(--space-4); padding: var(--space-4);
  background: var(--color-caption-bg); border-radius: var(--radius-pill);
}
.hero__seasons a { padding: var(--space-4) var(--space-16); border-radius: var(--radius-pill); color: var(--color-fg); }
.hero__seasons a[aria-current="page"] { background: var(--color-fg); color: var(--color-bg-page); }
.hero__seasons a:not([aria-current]):hover { background: var(--color-bg-sheet); }
.has-motion .hero__seasons a { transition: background-color var(--dur-300) var(--ease-out), color var(--dur-300) var(--ease-out); }

/* Переход между сезонными страницами (season, docs/motion.md): шапка и переключатель стоят, H1 перетекает,
   кадр новой страницы открывается шторкой снизу вверх поверх старого */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.hero__title { view-transition-name: hero-title; }
.hero__stage { view-transition-name: hero-stage; }
.hero__seasons { view-transition-name: hero-seasons; }
/* Карточка сезонов (season-card): при наведении или фокусе на переключатель над ним – что даёт каждый сезон;
   строка наведённого сезона яркая, остальные приглушены; без наведения выделен сезон страницы. Только с мышью */
.season-card {
  width: var(--season-card-w); padding: var(--space-24); border-radius: var(--radius-m);
  background: var(--color-bg-page); color: var(--color-fg);
  display: flex; flex-direction: column; gap: var(--space-16);
  opacity: 0; visibility: hidden; transform: translateY(var(--space-8)); pointer-events: none;
  transition: opacity var(--dur-300) var(--ease-out), transform var(--dur-300) var(--ease-out), visibility 0s var(--dur-300);
}
.season-card__row { display: flex; flex-direction: column; gap: var(--space-4); opacity: var(--season-dim); transition: opacity var(--dur-300) var(--ease-out); }
.season-card__row b { font-weight: var(--fw-title); }
html[data-season="summer"] .season-card__row[data-row="summer"],
html[data-season="fall"] .season-card__row[data-row="fall"],
html[data-season="winter"] .season-card__row[data-row="winter"] { opacity: 1; }
.hero__pick:has([data-key]:hover) .season-card__row { opacity: var(--season-dim); }
.hero__pick:has([data-key="summer"]:hover) [data-row="summer"],
.hero__pick:has([data-key="fall"]:hover) [data-row="fall"],
.hero__pick:has([data-key="winter"]:hover) [data-row="winter"] { opacity: 1; }
@media (hover: hover) {
  .hero__pick:has(.hero__seasons:hover, .hero__seasons:focus-within) .season-card,
  .hero__pick:has(.season-card:hover) .season-card {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    transition: opacity var(--dur-300) var(--ease-out), transform var(--dur-300) var(--ease-out), visibility 0s;
  }
}
::view-transition-group(*) { animation-duration: var(--dur-600); animation-timing-function: var(--ease-out); }
::view-transition-group(hero-stage) { animation-duration: var(--dur-900); }
::view-transition-old(hero-stage) { animation: none; }
::view-transition-new(hero-stage) { animation: season-curtain var(--dur-900) var(--ease-sharp) both; }
@keyframes season-curtain { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

@media (max-width: 768px) {
  .hero { display: grid; height: calc(100svh - var(--header-h-mobile)); min-height: 0; gap: 0; padding: 0; }
  .hero > * { grid-area: 1 / 1; min-height: 0; }
  .hero__top {
    z-index: 3; align-self: end; display: block; pointer-events: none;
    padding: 0 var(--page-margin-mobile) var(--hero-text-bottom-mobile); color: var(--color-fg-on-dark);
  }
  .hero__title { display: block; width: auto; justify-self: stretch; line-height: var(--lh-hero-mobile); text-wrap: balance; }
  .hero__row, .hero__row--2, .hero__row--3 { display: inline; padding-left: 0; }
  .hero__frame::after { content: ""; grid-area: 1 / 1; background: linear-gradient(to top, var(--color-scrim) 0, var(--color-scrim-mid) 35%, var(--color-scrim-clear) 65%); }
  .hero__pick { margin: var(--page-margin-mobile); }
  .season-card { display: none; }
  .hero__frame figcaption { margin: var(--space-12); }
}

/* 01b grounds – здания отеля после hero: мотель, ресторан, коттеджи. Не три одинаковые карточки: заголовок слева 1–4,
   мотель большим кадром 5–12; ниже ресторан 1–7 и коттеджи вертикальным кадром 9–12, опущены лесенкой – как обход
   территории. Подпись – название и одна строка под кадром. Телефон: мотель и ресторан во всю ширину, коттеджи 2/3 */
.grounds { row-gap: var(--space-64); align-items: start; }
.grounds__head { grid-column: 1 / span 4; align-self: end; display: flex; flex-direction: column; gap: var(--space-24); }
.grounds__head h2 { font-weight: var(--fw-hero-light); }
.grounds__head h2 b { font-weight: var(--fw-title); }
.grounds__head p { max-width: var(--measure-caption); }
.bldg { display: flex; flex-direction: column; gap: var(--space-16); }
.bldg__text { display: flex; flex-direction: column; gap: var(--space-8); }
.bldg__text p { max-width: var(--measure-caption); }
.bldg--motel { grid-column: 5 / -1; }
.bldg--motel .frame { aspect-ratio: var(--ratio-pano); }
.bldg--restaurant { grid-column: 1 / span 7; }
.bldg--restaurant .frame { aspect-ratio: var(--ratio-landscape); }
.bldg--cottages { grid-column: 9 / -1; margin-top: var(--space-128); }
.bldg--cottages .frame { aspect-ratio: var(--ratio-portrait); }

@media (max-width: 768px) {
  .grounds { row-gap: var(--space-48); }
  .grounds__head, .bldg--motel, .bldg--restaurant { grid-column: 1 / -1; }
  /* Телефон: коттеджи горизонтальным кадром во всю ширину (заказчик, 2026-10-19) – <picture> отдаёт горизонтальный вырез */
  .bldg--cottages { grid-column: 1 / -1; margin-top: 0; }
  .bldg--cottages .frame { aspect-ratio: var(--ratio-landscape); }
}

/* 02 nearby – карта мест рядом: карта 1–8, справа 9–12 вертикальный список мест высотой с карту (dest-expand).
   Все места видны строками «имя – время в пути»; выбранное раскрывается (фото и заметка) и рисует маршрут (route-draw).
   Список прокручивается внутри себя, стрелки ↑ ↓ и счётчик внизу.
   На мобильном карта и список вместе не выше экрана: карта тянется, в раскрытом месте миниатюра рядом с заметкой.
   Без JS (нет .is-live) – места списком целиком, стрелок нет; без Leaflet карта скрывается (explore--no-map) */
.nearby__title { grid-column: 1 / span 9; margin-bottom: var(--space-64); }
.explore { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); column-gap: var(--gutter); }
.explore__map { grid-column: 1 / span 8; height: var(--map-h); background: var(--color-bg-sheet); overflow: hidden; }
.explore__canvas { width: 100%; height: 100%; }
.explore__panel { grid-column: 9 / -1; display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.explore.is-live .explore__panel { height: var(--map-h); }
.explore--no-map .explore__map { display: none; }
.explore--no-map .explore__panel { grid-column: 1 / -1; height: auto; }

.explore__viewport { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--color-line) transparent; }
.explore__track { display: flex; flex-direction: column; border-top: var(--line) solid var(--color-line); }
.dest {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--space-16);
  border-bottom: var(--line) solid var(--color-line);
}
.dest__name { grid-column: 1; color: var(--color-fg); transition: color var(--dur-300) var(--ease-out); }
.dest__head { display: block; width: 100%; padding-block: var(--space-16); text-align: left; color: inherit; font: inherit; }
.explore.is-live .dest { cursor: pointer; }
.dest.is-active .dest__name, .explore:not(.is-live) .dest__name { color: var(--color-accent); }
.dest__stats { grid-column: 2; display: flex; gap: var(--space-16); }
.dest__stats div { display: flex; gap: var(--space-4); align-items: baseline; }
.dest__stats dd { font-weight: var(--fw-strong); }
/* Раскрытие: строка сетки 0fr → 1fr, внутренний блок режет содержимое */
.dest__detail { grid-column: 1 / -1; display: grid; grid-template-rows: 1fr; }
.explore.is-live .dest__detail { grid-template-rows: 0fr; }
.explore.is-live .dest.is-active .dest__detail { grid-template-rows: 1fr; }
.has-motion .explore.is-live .dest__detail { transition: grid-template-rows var(--dur-600) var(--ease-out); }
.dest__inner { min-height: 0; overflow: hidden; display: grid; gap: var(--space-12); align-content: start; }
.dest__inner > :last-child { margin-bottom: var(--space-24); }
.dest__photo { aspect-ratio: var(--ratio-photo); overflow: hidden; }
.dest__photo img { width: 100%; height: 100%; object-fit: cover; }
.dest__photo .placeholder { height: 100%; padding: var(--space-16); }
@media (hover: hover) {
  .explore.is-live .dest:not(.is-active):hover .dest__name { color: var(--color-accent); }
}

.explore__nav { display: none; align-items: center; justify-content: space-between; gap: var(--space-16); }
.explore.is-live .explore__nav { display: flex; }
.explore__arrow {
  width: var(--nav-btn); height: var(--nav-btn); display: grid; place-items: center;
  border: var(--line) solid var(--color-fg); border-radius: var(--radius-pill); color: var(--color-fg);
  transition: background-color var(--dur-300) var(--ease-out), color var(--dur-300) var(--ease-out);
}
.explore__arrow svg { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: var(--stroke-route); stroke-linecap: round; stroke-linejoin: round; }
.explore__arrow:hover:not(:disabled) { background: var(--color-fg); color: var(--color-bg-page); }
.explore__arrow:disabled { opacity: 0.32; cursor: default; }

/* Leaflet: тонированная подложка, точки и подписи в стиле сайта – линия вместо тени */
.explore .leaflet-container { background: var(--color-bg-sheet); }
.explore .leaflet-tile-pane { filter: var(--map-tint); }
.explore .leaflet-control-zoom { border: var(--line) solid var(--color-line); border-radius: 0; }
.explore .leaflet-control-zoom a { background: var(--color-bg-page); color: var(--color-fg); border-radius: 0; }
/* Подпись данных карты обязательна (условия Esri, лицензия OSM): мелко и приглушённо, в цветах сайта */
.explore .leaflet-control-attribution { background: none; color: var(--color-fg-muted); padding: var(--space-4) var(--space-8); opacity: 0.7; }
.explore .leaflet-control-attribution a { color: inherit; text-decoration: none; }
.pin {
  width: var(--pin); height: var(--pin); border-radius: var(--radius-pill);
  background: var(--color-bg-page); border: var(--stroke-route) solid var(--color-accent);
  transition: transform var(--dur-300) var(--ease-out), background-color var(--dur-300) var(--ease-out);
}
.pin.is-hover { transform: scale(calc((1 + var(--scale-marker)) / 2)); }
.pin.is-active { background: var(--color-accent); border-color: var(--color-bg-page); transform: scale(var(--scale-marker)); }
.explore .leaflet-marker-pane .pin-logo img { width: var(--pin-logo); height: auto; }
.explore .pin-tip {
  background: var(--color-bg-page); color: var(--color-fg); font: inherit;
  border: var(--line) solid var(--color-line); border-radius: 0; box-shadow: none; padding: var(--space-4) var(--space-8);
}
.explore .pin-tip::before { display: none; }
/* Плашка маршрута на карте: время и мили выбранного места, ссылка на Google Maps */
.explore .route-chip { padding: 0; background: var(--color-bg-page); border: var(--line) solid var(--color-accent); border-radius: var(--radius-pill); box-shadow: none; }
.explore .route-chip::before { display: none; }
.explore .route-chip a { display: block; padding: var(--space-4) var(--space-12); color: var(--color-accent); white-space: nowrap; }
.explore .route-chip a:hover { background: var(--color-accent); color: var(--color-on-accent); border-radius: var(--radius-pill); }
/* С живой картой в строке места остаётся только время в пути (мили – в плашке на маршруте); подписи и мили – для экранных читалок */
.explore.is-live:not(.explore--no-map) .dest__stats div:first-child,
.explore.is-live:not(.explore--no-map) .dest__stats dt {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.explore.is-live:not(.explore--no-map) .dest__stats dd { font-weight: inherit; color: var(--color-fg-muted); }

@media (max-width: 1100px) {
  .explore__map { grid-column: 1 / span 7; }
  .explore__panel { grid-column: 8 / -1; }
}
@media (max-width: 768px) {
  .nearby__title { grid-column: 1 / -1; margin-bottom: var(--space-32); }
  .explore { display: flex; flex-direction: column; gap: var(--space-16); }
  .explore.is-live { height: calc(100svh - var(--header-h-mobile) - var(--space-32)); }
  .explore__map { height: auto; flex: 1 1 0; min-height: var(--map-min-mobile); }
  .explore--no-map .explore__map { display: none; }
  .explore .leaflet-control-zoom { display: none; }
  .explore.is-live .explore__panel { height: auto; flex: 0 1 var(--list-h-mobile); min-height: 0; gap: var(--space-12); }
  .dest__head { padding-block: var(--space-12); }
  .dest__inner { grid-template-columns: var(--thumb) minmax(0, 1fr); align-items: start; }
  .dest__inner > * { margin-bottom: var(--space-12); }
  .dest__photo { aspect-ratio: var(--ratio-square); }
  .dest__photo .placeholder { padding: 0; }
  .dest__photo .placeholder p { display: none; }
}

/* 02b nearby – вариант «Stage and strip» (выбран 2026-10-08): большой кадр выбранного места во всю ширину, карта
   с маршрутом лежит на нём справа внизу полупрозрачной, под ними лента миниатюр всех мест (тот же список .dest, js/explore.js).
   Телефон: секция в экран – карта сверху, фото-карточки листаются свайпом, свайп выбирает место. Правила с #nearby
   перекрывают базовый список выше; почистить базовый блок 02 – ручная доводка */
#nearby .explore { grid-template-rows: var(--stage-h) auto; row-gap: var(--gutter); }
#nearby .stage { grid-column: 1 / -1; grid-row: 1; display: grid; overflow: hidden; border-radius: var(--radius-photo); background: var(--color-bg-sheet); color: var(--color-fg-on-dark); }
#nearby .stage > * { grid-area: 1 / 1; min-height: 0; }
#nearby .stage__img { width: 100%; height: 100%; object-fit: cover; }
#nearby .stage::after { content: ""; grid-area: 1 / 1; background: linear-gradient(to top, var(--color-scrim) 0, var(--color-scrim-mid) 45%, var(--color-scrim-clear) 80%); }
#nearby .stage__cap { z-index: var(--z-content); align-self: end; display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-48); max-width: var(--measure-text); }
#nearby .stage__name { font-weight: var(--fw-hero-light); }
#nearby .stage__time { align-self: start; padding: var(--space-4) var(--space-12); border: var(--line) solid var(--color-glass-line); border-radius: var(--radius-pill); }
#nearby .stage__credit { z-index: var(--z-content); align-self: start; justify-self: end; margin: var(--space-16); opacity: 0.7; }
#nearby .stage.is-soon .stage__credit { display: none; }
.has-motion #nearby .stage.is-swap .stage__img { animation: stage-in var(--dur-900) var(--ease-sharp) both; }
@keyframes stage-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }

/* Карта лежит на большом кадре справа внизу, полупрозрачная; при наведении – плотная */
#nearby .explore__map { grid-column: 9 / -1; grid-row: 1; align-self: end; z-index: var(--z-content);
  height: var(--map-overlay-h); margin: 0 var(--space-24) var(--space-24) 0; border-radius: var(--radius-m);
  opacity: var(--map-overlay-op); border: var(--line) solid var(--color-glass-line); transition: opacity var(--dur-300) var(--ease-out); }
@media (hover: hover) { #nearby .explore__map:hover { opacity: 1; } }
#nearby .explore.is-live .explore__panel, #nearby .explore__panel { grid-column: 1 / -1; grid-row: 2; height: auto; flex-direction: row; align-items: end; gap: var(--space-24); }
#nearby .explore__viewport { overflow: visible; flex: 1; }
#nearby .explore__track { flex-direction: row; gap: var(--gutter); border: 0; }
#nearby .dest { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-8); border: 0; }
#nearby .dest__thumb { display: grid; aspect-ratio: var(--strip-thumb); overflow: hidden; border-radius: var(--radius-photo); background: var(--color-bg-sheet); outline: var(--stroke-route) solid transparent; outline-offset: var(--space-4); transition: outline-color var(--dur-300) var(--ease-out); }
#nearby .dest__thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: transform var(--dur-900) var(--ease-out), filter var(--dur-300) var(--ease-out); }
#nearby .dest__thumb--soon { place-items: center; }
#nearby .dest__thumb--soon .illus { --illus-h: var(--thumb); width: 100%; }
#nearby .stage.is-soon { background: var(--color-bg-sheet); }
#nearby .dest.is-active .dest__thumb { outline-color: var(--color-accent); }
#nearby .dest.is-active .dest__thumb img { filter: none; }
@media (hover: hover) { #nearby .dest:hover .dest__thumb img { transform: scale(var(--scale-zoom)); filter: none; } }
#nearby .dest__head { padding: 0; }
#nearby .dest__head { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
#nearby .dest__stats, #nearby .dest__detail { display: none; }
#nearby .dest__line { display: contents; }
#nearby .explore.is-live .explore__nav { display: none; }

/* Телефон (вариант A): секция ровно в экран – карта сверху, под ней фото-карточки мест листаются свайпом со snap,
   справа видна следующая карточка. Свайп выбирает место (маршрут на карте), тап по точке – прокручивает к карточке.
   Большой кадр десктопа на телефоне не нужен – карточка и есть кадр */
@media (max-width: 768px) {
  #nearby .explore.is-live { display: flex; flex-direction: column; gap: var(--space-12); height: calc(100svh - var(--header-h-mobile) - var(--space-32)); }
  #nearby .stage { display: none; }
  #nearby .explore__map { flex: 0 0 var(--map-share-mobile); align-self: stretch; height: auto; min-height: var(--map-min-mobile); margin: 0; opacity: 1; border-radius: var(--radius-m); }
  #nearby .explore.is-live .explore__panel { flex: 1 1 0; min-height: 0; height: auto; flex-direction: column; align-items: stretch; gap: var(--space-8); }
  /* Вертикальный свайп по карточкам должен листать страницу: contain от десктопного списка глушил передачу прокрутки
     странице (заказчик, 2026-10-19) – по вертикали auto, по горизонтали лента не тянет страницу */
  #nearby .explore__viewport { flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
    overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; }
  #nearby .explore__track { height: 100%; gap: var(--space-12); padding-right: var(--card-peek); }
  #nearby .dest { flex: 0 0 var(--card-w); height: 100%; scroll-snap-align: start; gap: var(--space-8); }
  #nearby .dest__thumb { flex: 1 1 0; min-height: 0; aspect-ratio: auto; outline: 0; }
  #nearby .dest__thumb img { filter: none; }
  #nearby .dest__line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); }
  #nearby .dest__name { color: var(--color-fg); }
  #nearby .dest.is-active .dest__name { color: var(--color-accent); }
  #nearby .dest__stats { display: flex; flex: none; }
  #nearby .explore.is-live .explore__nav { display: flex; }
  #nearby .explore__nav .explore__arrow { display: none; }
  #nearby .explore__nav { justify-content: center; }
}

/* 03 rooms – вход на страницу номеров (концепт D «Gate», по блоку Room & Suite у relaisrossar.it, замер 2026-10-07).
   Три кадра 4/4/4 на одной высоте --gate-h; в средней колонке кадр 75% ширины (338:468) прижат к верху, заголовок – к низу,
   его нижняя строка на линии низа боковых кадров. Вся секция – одна ссылка. Кадры – clip, заголовок – chars-blur,
   левый кадр – drift, наведение – photo-zoom. На мобильном два кадра рядом, под ними заголовок и ссылка */
.gate { display: block; color: inherit; }
.gate__grid { height: var(--gate-h); }
.gate__col { grid-column: span 4; min-height: 0; }
.gate__frame { overflow: hidden; border-radius: var(--radius-photo); background: var(--color-bg-sheet); }
.gate__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-900) var(--ease-out); }
.gate__col > .gate__frame { height: 100%; }
.gate__mid { display: flex; flex-direction: column; justify-content: space-between; }
.gate__mid .gate__frame { width: var(--gate-mid-w); height: auto; aspect-ratio: var(--ratio-gate-mid); flex: none; }
.gate__title { font-weight: var(--fw-hero-light); }
.gate__title b { font-weight: var(--fw-title); }
.gate__cta { display: none; }
@media (hover: hover) {
  .gate:hover .gate__frame img { transform: scale(var(--scale-zoom)); }
}
.has-motion .gate__frame--drift img { animation: drift var(--dur-drift) var(--ease-out) infinite alternate; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(var(--drift-scale)); } }

@media (max-width: 768px) {
  .gate__grid { height: auto; row-gap: var(--space-32); align-items: end; }
  /* Кадр с камнями на телефоне мелкий и нечитаемый (заказчик, 2026-10-19) – скрыт, номер во всю ширину */
  .gate__col:first-child { grid-column: 1 / -1; aspect-ratio: var(--ratio-gate-mid); }
  .gate__col:last-child { display: none; }
  .gate__mid { grid-column: 1 / -1; order: 1; gap: var(--space-16); }
  .gate__mid .gate__frame { display: none; }
  .gate__cta { display: inline-block; align-self: start; color: var(--color-accent); }
}

/* 04 breakfast и on-site – «Breakfast is on us» (мозаика: текст и факты, панель с гравюрой вафли, два кадра) и
   активности «Thirty steps from your door»: у каждой строки своя раскладка – симметрия, пара, панорама, лесенка, кино
   (по блоку «Corner» relaisrossar.it). Кадры – clip, названия – chars-blur. data-seasons у строк – для сезонных наборов */
.acts__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); text-align: center; margin-bottom: var(--space-96); }
.acts__head h2, .act__title { font-weight: var(--fw-hero-light); }
.acts__head h2 b, .act__title b { font-weight: var(--fw-title); }
.acts__head p { max-width: var(--measure-caption); }
.acts { display: flex; flex-direction: column; gap: var(--act-gap); }

.frame { overflow: hidden; border-radius: var(--radius-photo); background: var(--color-bg-sheet); }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-900) var(--ease-out); }
.frame picture { display: contents; }
@media (hover: hover) { .frame:hover img { transform: scale(var(--scale-zoom)); } }
.act__text { display: flex; flex-direction: column; gap: var(--space-24); }
.act__text p { max-width: var(--measure-caption); }
.act__top { display: flex; flex-direction: column; gap: var(--space-24); }

/* 1 Симметрия */
.act--sym { align-items: stretch; }
.act--sym .frame { aspect-ratio: var(--ratio-act-wide); }
.act--sym .frame:first-child { grid-column: 1 / span 3; }
.act--sym .frame:last-child { grid-column: 10 / span 3; }
.act--sym .act__text { grid-column: 5 / span 4; align-items: center; justify-content: space-between; text-align: center; padding-block: var(--space-32) var(--space-16); }

/* 1b Мозаика (завтрак за наш счёт): текст и факты слева, справа панель с гравюрой вафли и два кадра в столбик */
.act--kitchen { align-items: stretch; }
.act--kitchen .act__text { grid-column: 1 / span 4; justify-content: space-between; padding-block: var(--space-32) 0; }
.mosaic { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.mosaic .frame:first-child { grid-column: 1 / span 4; grid-row: 1 / span 2; aspect-ratio: var(--ratio-act); }
.mosaic .frame:not(:first-child) { grid-column: 5 / -1; min-height: 0; contain: size; }
.perk-facts { display: flex; flex-direction: column; border-top: var(--line) solid var(--color-line); }
.perk-facts div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-16); padding-block: var(--space-12); border-bottom: var(--line) solid var(--color-line); }
.perk-facts dt { color: var(--color-fg-muted); }
.perk-facts dd { font-weight: var(--fw-strong); }

/* 2 Пара */
.act--pair .frame { aspect-ratio: var(--ratio-act); }
.act--pair .frame:nth-child(1) { grid-column: 1 / span 3; }
.act--pair .frame:nth-child(2) { grid-column: 4 / span 3; }
.act--pair .act__text { grid-column: 8 / span 4; justify-content: space-between; padding-block: var(--space-32) var(--space-16); }

/* 3 Панорама: узкая колонка слева, большой кадр справа; малый кадр над названием */
.act--pano { align-items: end; }
.act--pano .act__text { grid-column: 1 / span 3; }
.act--pano .act__text .frame { aspect-ratio: var(--ratio-portrait); }
.act--pano > .frame { grid-column: 5 / -1; aspect-ratio: var(--ratio-wide); }
/* 3a Диптих (каяки): вертикальный кадр 5 колонок задаёт высоту строки; справа горизонтальный 16:9 сверху, текст прижат к низу.
   Телефон: вертикальный, текст, горизонтальный – текст разделяет два кадра */
.act--diptych { grid-template-rows: auto minmax(0, 1fr); align-items: start; }
.act--diptych .frame:nth-of-type(1) { grid-column: 1 / span 5; grid-row: 1 / span 2; aspect-ratio: var(--ratio-portrait); }
.act--diptych .frame:nth-of-type(2) { grid-column: 6 / -1; grid-row: 1; aspect-ratio: var(--ratio-wide); }
.act--diptych .act__text { grid-column: 6 / span 5; grid-row: 2; align-self: end; }

/* 3a' Панорама шире (снегоходы): текстовая колонка 4 – длинное «Snowmobile» не рвётся */
.act--snow .act__text { grid-column: 1 / span 4; }
/* Кнопка карты трасс снегоходов (зимняя страница): кнопка по ширине текста, размер файла – тише рядом */
/* .btn не переносит строку (nowrap) – в узкой колонке кнопка вылезала за край и давала горизонтальный скролл на телефоне */
/* Кнопки снегоходов (winter): бронь – основная, карта трасс – второстепенная; в узкой колонке переносятся */
.act__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.act__download { align-self: start; gap: var(--space-8); max-width: 100%; white-space: normal; flex-wrap: wrap; justify-content: start; text-align: left; }
.act__download .body-s { opacity: 0.8; font-weight: var(--fw-title); }
@media (max-width: 500px) { .act__download .body-s { display: none; } }
/* Малый кадр ночного снегохода – 2/3 колонки (исходник 292×365, во всю колонку мылился и вытягивал строку на 835 px);
   большой кадр 4:3 вместо 16:9 – по высоте сходится с колонкой текста, над ним нет пустоты */
.act--snow .act__text .frame { width: 66%; }
.act--snow > .frame { grid-column: 6 / -1; aspect-ratio: var(--ratio-landscape); }

/* 3b Панорама зеркально (Captain's Quarters): большой кадр слева, текст справа, прижат к низу */
.act--flip > .frame { grid-column: 1 / span 8; grid-row: 1; }
.act--flip .act__text { grid-column: 10 / -1; grid-row: 1; }

/* 4b Витрина (лавка): текст слева сверху, вертикальный кадр, горизонтальный опущен к низу */
.act--shop { align-items: start; }
.act--shop .act__text { grid-column: 1 / span 4; padding-top: var(--space-32); }
.act--shop .frame:nth-of-type(1) { grid-column: 6 / span 3; aspect-ratio: var(--ratio-portrait); }
.act--shop .frame:nth-of-type(2) { grid-column: 9 / -1; align-self: end; aspect-ratio: var(--ratio-landscape); }

/* 4 Лесенка: текст сверху слева, второй кадр опущен */
.act--stair { align-items: start; }
.act--stair .act__text { grid-column: 1 / span 5; align-self: end; }
.act--stair { align-items: start; grid-auto-rows: auto; }
.act--stair .frame { aspect-ratio: var(--ratio-act); }
.act--stair .frame:nth-of-type(1) { grid-column: 7 / span 3; }
.act--stair .frame:nth-of-type(2) { grid-column: 10 / span 3; margin-top: var(--stair-drop); }

/* 5 Кино: закат во всю ширину с затемнением сверху; текст слева сверху на нём; кадр костра лежит внутри кадра справа,
   по центру по высоте, с паспарту в цвет бумаги – ничего не выходит за границы строки. Наложение – одной строкой сетки */
.act--cinema { align-items: center; }
/* Строка грида – minmax(0, 1fr): иначе она растягивалась по высоте картинки, кадр показывал только верх (одно небо),
   а object-position не работал. Горизонт заката – по центру кадра, небо и пляж поровну (заказчик, 2026-10-21) */
.frame--cinema { grid-column: 1 / -1; grid-row: 1; aspect-ratio: var(--ratio-cinema); display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.frame--cinema img, .frame--cinema::after { grid-area: 1 / 1; min-height: 0; }
.frame--cinema img { object-position: center 50%; }
.frame--cinema::after { content: ""; background: linear-gradient(to bottom, var(--color-scrim), var(--color-scrim-clear) 55%); }
.act--cinema .act__text { grid-column: 1 / span 6; grid-row: 1; align-self: start; z-index: var(--z-content); padding: var(--space-48); color: var(--color-fg-on-dark); }
.frame--side { grid-column: 10 / span 2; grid-row: 1; aspect-ratio: var(--ratio-act); z-index: var(--z-content);
  border: var(--space-8) solid var(--color-bg-page); }

@media (max-width: 768px) {
  .acts { gap: var(--space-96); }
  .act { row-gap: var(--space-16); }
  .act > .frame, .act--sym .frame:first-child, .act--sym .frame:last-child, .act--pair .frame:nth-child(n),
  .act--stair .frame:nth-of-type(n) { grid-column: span 6; margin-top: 0; }
  .act--pano > .frame { grid-column: 1 / -1; order: -1; }
  .act--flip > .frame, .act--flip .act__text { grid-row: auto; }
  .act--snow .act__text { grid-column: 1 / -1; }
  .act--diptych { grid-template-rows: auto; }
  .act--diptych .frame:nth-of-type(1), .act--diptych .frame:nth-of-type(2), .act--diptych .act__text { grid-column: 1 / -1; grid-row: auto; }
  .act--diptych .frame:nth-of-type(1) { order: -1; }
  .act.act--diptych .act__text { order: 1; }
  .act--diptych .frame:nth-of-type(2) { order: 2; }
  /* Оба кадра магазина вертикальные: 4:3 с растяжкой по высоте ряда раздувал второй кадр шире колонки – горизонтальный скролл на 390 */
  .act--shop .frame:nth-of-type(1), .act--shop .frame:nth-of-type(2) { grid-column: span 6; align-self: start; aspect-ratio: var(--ratio-portrait); min-width: 0; }
  .mosaic { grid-column: 1 / -1; order: -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaic .frame:first-child { grid-column: 1; }
  .mosaic .frame:not(:first-child) { grid-column: 2; }
  .act--kitchen .act__text { padding: 0; }
  .act .act__text, .act--sym .act__text { grid-column: 1 / -1; order: 1; padding: 0; align-items: start; text-align: left; }
  /* Телефон: в панорамах (снегоходы, Captain's Club) только один широкий кадр – малый у текста скрыт (заказчик, 2026-10-19) */
  .act--pano .act__text .frame { display: none; }
  .act--cinema .frame--cinema { grid-column: 1 / -1; grid-row: 1; aspect-ratio: var(--ratio-portrait); }
  .act--cinema .act__text { grid-column: 1 / -1; grid-row: 1; padding: var(--space-24); }
  .frame--side { display: none; }
}

/* 04b partners – туры партнёров «Cards» (выбран 2026-10-20 из concepts/partners-panels|mosaic|cards): пять вертикальных
   карточек 4:5 в ряд, все видны на 1440; на кадре плашка «откуда и сколько ехать», под кадром название, строка и два факта.
   Телефон – лента со свайпом, видна следующая карточка. Ссылок и цен нет – подробности на ресепшене. На зимней странице секции нет */
.pt__head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-48); margin-bottom: var(--space-48); }
.pt__head h2 { font-weight: var(--fw-hero-light); max-width: 16ch; }
.pt__head h2 b, .pt-title b { font-weight: var(--fw-title); }
.pt__aside { display: flex; flex-direction: column; gap: var(--space-16); max-width: var(--measure-caption); }
.pt__note { padding-left: var(--space-16); border-left: var(--space-4) solid var(--color-accent); }
.pt-name { color: var(--color-fg-muted); }
.pt-title { font-weight: var(--fw-hero-light); }
.pt-chip { display: inline-flex; align-self: start; padding: var(--space-4) var(--space-12); border-radius: var(--radius-pill); background: var(--color-caption-bg); color: var(--color-fg); }
@media (max-width: 768px) {
  .pt__head { flex-direction: column; align-items: start; gap: var(--space-16); margin-bottom: var(--space-32); }
  .pt__head h2 { max-width: none; }
}

.cds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gutter); }
.cd { display: flex; flex-direction: column; gap: var(--space-8); }
.cd__photo { display: grid; aspect-ratio: var(--ratio-portrait); margin-bottom: var(--space-8); }
.cd__photo > * { grid-area: 1 / 1; }
.cd__photo .pt-chip { z-index: var(--z-content); align-self: start; justify-self: start; margin: var(--space-12); }
.cd__facts { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-8); border-top: var(--line) solid var(--color-line); }
.cd__facts div { display: flex; justify-content: space-between; gap: var(--space-12); }
.cd__facts dt { color: var(--color-fg-muted); }
.cd__facts dd { text-align: right; }
/* Плашка «откуда и сколько ехать» – она же ссылка на маршрут в Google Maps от отеля (заказчик, 2026-10-21) */
.cd__chip { gap: var(--space-4); transition: background-color var(--dur-300) var(--ease-out), color var(--dur-300) var(--ease-out); }
.cd__chip:hover, .cd__chip:focus-visible { background: var(--color-accent); color: var(--color-on-accent); }
@media (hover: hover) { .cd:hover .cd__photo img { transform: scale(var(--scale-zoom)); } }
@media (max-width: 768px) {
  .cds { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(var(--page-margin-mobile) * -1); padding-inline: var(--page-margin-mobile); scroll-padding-inline: var(--page-margin-mobile); }
  .cd { flex: 0 0 78%; scroll-snap-align: start; }
}

/* 05 location – аэрофото во всю ширину, отъезжает по scrub; карточка на тёмной подложке на границе кадра */
.location { display: grid; padding-block: 0; background: var(--color-bg-dark); color: var(--color-fg-on-dark); overflow: hidden; }
.location > * { grid-area: 1 / 1; }
.location__photo { height: var(--location-h); overflow: hidden; }
.location__photo img { width: 100%; height: 100%; object-fit: cover;
  transform: scale(calc(var(--scale-location) - (var(--scale-location) - 1) * var(--p, 1))); }
.location__card {
  align-self: end; justify-self: start; z-index: var(--z-content);
  display: flex; flex-direction: column; gap: var(--space-24);
  width: min(100% - var(--page-margin) * 2, var(--measure-text) + var(--space-64));
  margin: 0 0 var(--page-margin) var(--page-margin); padding: var(--space-32);
  background: var(--color-bg-elevated);
}
.location__facts { display: grid; grid-template-columns: auto 1fr; gap: var(--space-8) var(--space-24);
  padding-top: var(--space-16); border-top: var(--line) solid var(--color-line-on-dark); }
.location__facts dt { color: var(--color-fg-muted-on-dark); }

/* 06 proof – цитата гостя крупно (words), под ней два числа: рейтинг Google и Facebook */
.proof__quote { grid-column: 1 / span 10; display: flex; flex-direction: column; gap: var(--space-24); margin-bottom: var(--space-96); }
.proof__stat { grid-column: span 4; display: flex; flex-direction: column; gap: var(--space-12);
  padding-top: var(--space-16); border-top: var(--line) solid var(--color-line); }
.proof__stat a { color: var(--color-accent); align-self: flex-start; }

/* 07 newsletter – гравюра маяка 1–4, текст и форма 6–11 */
.newsletter { align-items: center; }
.newsletter .illus { grid-column: 1 / span 4; height: var(--illus-h-l); }
.newsletter__body { grid-column: 6 / span 6; display: flex; flex-direction: column; gap: var(--space-24); }
.newsletter__links { display: flex; flex-wrap: wrap; gap: var(--space-16) var(--space-32); font-weight: var(--fw-strong); }

/* 08 footer – закрытие продажи (Book, консьерж, часы), три колонки по смыслу (где мы, что здесь, связь),
   внизу строка © */
.site-footer { background: var(--color-bg-dark); color: var(--color-fg-on-dark); overflow: hidden; }
.footer { row-gap: var(--space-64); }
.footer__cta { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; row-gap: var(--space-32);
  padding-bottom: var(--space-64); border-bottom: var(--line) solid var(--color-line-on-dark); }
.footer__cta h2 { grid-column: 1 / span 7; }
.footer__cta-side { grid-column: 9 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); }
.footer .btn--primary { box-shadow: inset 0 0 0 var(--line) var(--color-line-on-dark); }
.footer__col { grid-column: span 4; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.footer__col a { color: var(--color-fg-muted-on-dark); }
.footer__label { color: var(--color-fg-muted-on-dark); }
.footer__bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--space-16);
  padding-top: var(--space-24); border-top: var(--line) solid var(--color-line-on-dark); color: var(--color-fg-muted-on-dark); }

@media (max-width: 1100px) {
  .footer__col { grid-column: span 6; }
  .footer__col:last-of-type { grid-column: 1 / -1; }
  .footer__cta h2, .footer__cta-side { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .location__photo { height: auto; aspect-ratio: var(--ratio-landscape); }
  .location > * { grid-area: auto; }
  .location__card { width: auto; margin: 0; padding: var(--space-32) var(--page-margin-mobile); }
  .proof__quote { grid-column: 1 / -1; margin-bottom: var(--space-48); }
  .proof__stat { grid-column: 1 / -1; }
  .proof__stat + .proof__stat { margin-top: var(--space-24); }
  .newsletter .illus { grid-column: 1 / -1; height: var(--illus-h-l-mobile); }
  .newsletter__body { grid-column: 1 / -1; margin-top: var(--space-32); }
  .footer__col, .footer__col:last-of-type { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; }
}