/* =========================================================
   Бутик-отель на Горького — стили
   ========================================================= */

:root{
  --bg:            #eceeef;
  --bg-soft:       #f3f5f6;
  --ink:           #1c2024;
  --ink-2:         #3c4247;
  --muted:         #6d757b;
  --dark:          #23272b;
  --dark-2:        #2c3135;

  /* акцент */
  --accent:        #001824;
  --accent-hover:  #00263a;
  --beige:         #eddfd4;
  --beige-line:    #e0cfc2;
  --white:         #fff;
  --line:          rgba(28,32,36,.12);

  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;
  /* Кадры скругляем чуть слабее плашек под ними (10px), чтобы смягчить
     угол, но не превратить фото в карточку. */
  --r-photo: 8px;

  --container: 1240px;
  --gutter: 24px;
  /* Боковое поле полноэкранных полос: по нему выровнены и сетка номеров,
     и текстовая половина «Тихого адреса» — их левые края стоят на одной
     вертикали. Меняется только здесь, иначе линия разъедется. */
  --edge: clamp(30px, 4.5vw, 76px);

  --header-h: 65px;

  --ease: cubic-bezier(.22,.61,.36,1);

  /* Playfair работает там, где его высокий контраст оправдан — в заголовках */
  --font-display: 'Playfair', 'Playfair Display', Georgia, serif;

  /* золото снято с логотипа: медиана штриха и его светлая часть */
  --gold:       #bea065;
  --gold-light: #e5d58b;
  /* Золото в заливке кнопки — под белый текст, поэтому заметно глубже
     логотипного --gold: на светлом золоте белый нечитаем (2.5:1). Тон взят
     насыщенный, а не просто затемнённый, — иначе капсула уходит в хаки.
     4.67:1 с белым, порог AA для текста 16px — 4.5. */
  --gold-fill:  #9a6b22;
  --gold-fill-h:#8a5e1c;   /* наведение — на тон глубже, белый 5.68:1 */

  /* Liquid Glass */
  --liquid:.95;               /* плотность цветных пятен поверх фото, 0 — выключить */
  --glass-blur:13px;
  --glass-sat:1.5;

  /* Стекло тёмное. Цвет вынесен отдельным токеном: `6 22 32` — тот же
     тёмно-синий, что у карточки контактов и подвала, поэтому все стеклянные
     поверхности сайта звучат в один тон. Поставить `255 255 255` — и вся
     страница вернётся к светлому стеклу, менять больше нечего. */
  --glass-rgb:6 22 32;
  --glass-tint:.52;           /* плотность заливки: больше — глуше подложка */
  --glass-ink:rgba(255,255,255,.95);      /* текст на стекле */
  --glass-ink-2:rgba(255,255,255,.79);    /* подписи на стекле */

  /* Фото-подложка страницы.
     Файл намеренно крошечный (360px по ширине): его всё равно растягивает
     на весь экран и размывает, поэтому крупный оригинал только съел бы
     трафик. Замена фона — одна строка ниже. */
  --bg-image:  url(../img/bg-blur.webp);
  --bg-blur:   30px;
  --bg-scale:  1.08;          /* лёгкий зум, чтобы края блюра ушли за экран */
  --veil:      .5;            /* светлая вуаль: держит контраст тёмного текста */
  --sheen:     .76;            /* сила переливания, 0 — выключить */
}

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

html{ scroll-behavior:smooth; scroll-padding-top:100px; }
html,body{ overflow-x:clip; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  /* Golos Text — гротеск, рисованный под кириллицу: русский текст выглядит
     родным, а не адаптированным, и не спорит с засечками в заголовках */
  font-family:'Golos Text',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:18.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* =========================================================
   Liquid Glass — подложка страницы

   Снизу вверх: размытое фото → два слоя цветных пятен → светлая вуаль.
   Фото даёт цвет и глубину, пятна — движение, вуаль держит контраст
   тёмного текста, который лежит прямо на подложке.

   Пятна медленно проходят друг сквозь друга. Периоды намеренно не кратны
   (46 с и 67 с), поэтому рисунок на глаз не зацикливается. Двигаем только
   transform: слои живут отдельными композиторскими слоями, перерисовки
   нет и скролл не проседает.
   ========================================================= */
.page-bg{
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  overflow:hidden;            /* блюр и дрейф режем по краю экрана */
  contain:strict;
}
.page-bg > *{
  position:absolute;
  /* запас за краями экрана: у размытия край растушёван, а пятна дрейфуют —
     без запаса и то и другое оголяло бы углы */
  inset:-25vmax;
  display:block;
}

/* Фото. Растровый блюр по маленькой картинке дешевле, чем по крупной:
   апскейл 360px уже даёт мягкую основу, фильтр лишь снимает ступеньки.

   contrast ниже единицы поджимает тени к середине: у снимка тёмный левый
   край, и без этого текст поверх него не добирал контраст. saturate
   возвращает цвет, который съедают и осветление, и вуаль сверху. */
.page-bg__photo{
  background:var(--bg-image) center / cover no-repeat;
  filter:blur(var(--bg-blur)) saturate(1.55) contrast(.74) brightness(1.2);
  transform:scale(var(--bg-scale));
}

.page-bg__warm,
.page-bg__cool{
  opacity:var(--liquid);
  mix-blend-mode:soft-light;  /* пятна подкрашивают фото, а не закрывают его */
  will-change:transform;
}

/* Тёплый слой: беж и золото логотипа.
   Прозрачный край задаём тем же цветом с нулевой альфой, а не ключевым
   словом transparent — иначе на переходе проступает серая кайма. */
.page-bg__warm{
  background:
    radial-gradient(42vmax 36vmax at 16% 12%, rgba(190,160,101,.55), rgba(190,160,101,0) 62%),
    radial-gradient(38vmax 34vmax at 82% 28%, rgba(237,223,212,.95), rgba(237,223,212,0) 64%),
    radial-gradient(34vmax 30vmax at 60% 86%, rgba(229,213,139,.52), rgba(229,213,139,0) 62%);
  animation:liquid-warm 26s ease-in-out infinite alternate;
}

/* Холодный слой: разбавленный акцентный синий, он даёт стеклу глубину */
.page-bg__cool{
  background:
    radial-gradient(36vmax 32vmax at 80%  6%, rgba(0,38,58,.26),     rgba(0,38,58,0) 64%),
    radial-gradient(44vmax 38vmax at  6% 60%, rgba(0,55,84,.22),     rgba(0,55,84,0) 66%),
    radial-gradient(30vmax 28vmax at 92% 76%, rgba(190,160,101,.34), rgba(190,160,101,0) 62%);
  animation:liquid-cool 37s ease-in-out infinite alternate;
}

/* Вуаль. Сверху плотнее: под шапкой и заголовками текста больше всего. */
.page-bg__veil{
  background:
    radial-gradient(120% 80% at 50% 0%,
      rgba(255,255,255,calc(var(--veil) * .5)) 0%,
      rgba(255,255,255,0) 70%),
    linear-gradient(180deg,
      rgba(244,243,241,var(--veil)) 0%,
      rgba(236,238,239,calc(var(--veil) * .92)) 100%);
}

/* Переливание.

   Спектральное кольцо поверх вуали: цвета идут по кругу, поэтому при
   повороте слоя любая точка экрана последовательно проходит золото — беж —
   бирюзу — синь — и обратно. Крутится всегда, а при прокрутке доворачивается
   ещё и от скролла (доворот вешает скрипт на сам слой).

   Крутим и размываем ::before, а скролл двигает родителя: два независимых
   поворота на одном элементе не уживаются — анимация перебила бы transform. */
.page-bg__sheen{
  opacity:var(--sheen);
  /* overlay вместо soft-light: тот же приём, но втрое контрастнее —
     soft-light на светлой вуали давал сдвиг цвета в пределах 8%,
     его просто не было видно */
  mix-blend-mode:overlay;
  will-change:transform;
  /* Качание тона живёт здесь, а не на ::before: там лежит blur(60px), и
     анимация фильтра заставляла бы браузер пересчитывать размытие каждый
     кадр. Здесь фильтр ложится на уже готовый растр — это просто цветовая
     матрица на композиторе. С transform от скролла не конфликтует:
     свойства разные. */
  animation:sheen-hue 13s ease-in-out infinite alternate;
}
.page-bg__sheen::before{
  content:''; position:absolute; inset:-30%;
  /* центр смещён с середины экрана: иначе видно «втулку» вертушки */
  background:conic-gradient(from 0deg at 38% 42%,
    rgba(190,160,101,.92)   0deg,
    rgba(237,223,212,.66)  58deg,
    rgba(126,183,190,.72) 128deg,
    rgba(0,55,84,.80)     198deg,
    rgba(198,154,152,.56) 262deg,
    rgba(229,213,139,.74) 318deg,
    rgba(190,160,101,.92) 360deg);
  /* размытие снимает и полосы конического градиента, и его резкий шов */
  filter:blur(60px);
  animation:sheen-spin 20s linear infinite;
}
@keyframes sheen-spin{ to{ transform:rotate(1turn); } }
@keyframes sheen-hue{
  from{ filter:hue-rotate(-26deg); }
  to  { filter:hue-rotate(27deg); }
}

@keyframes liquid-warm{
  0%   { transform:translate3d(0,0,0) scale(1); }
  50%  { transform:translate3d(4vmax,-3vmax,0) scale(1.12); }
  100% { transform:translate3d(-3vmax,2vmax,0) scale(1.05); }
}
@keyframes liquid-cool{
  0%   { transform:translate3d(0,0,0) scale(1.06) rotate(0deg); }
  50%  { transform:translate3d(-5vmax,3vmax,0) scale(1) rotate(-5deg); }
  100% { transform:translate3d(3vmax,-4vmax,0) scale(1.1) rotate(4deg); }
}

@media (prefers-reduced-motion:reduce){
  .page-bg__warm,
  .page-bg__cool,
  .page-bg__sheen,
  .page-bg__sheen::before{ animation:none; }
}

/* =========================================================
   Стеклянная поверхность

   Три вещи вместе дают стекло, а не «полупрозрачную плашку»:
   1) backdrop-filter — размытие фона с подъёмом насыщенности; у тёмного
      стекла фон под ним ещё и приглушается, иначе светлая подложка
      просвечивает грязным пятном;
   2) фаска — светлая кромка сверху и тень снизу: край линзы ловит свет
      с одной стороны и уходит в тень с другой. На тёмном стекле кромка
      тоньше и слабее, чем на светлом, но нужна не меньше — без неё
      плашка выглядит дырой в странице;
   3) блик — диагональный градиент по верхнему углу.
   ========================================================= */
.glass{
  position:relative;
  isolation:isolate;
  background:linear-gradient(150deg,
    rgb(var(--glass-rgb) / var(--glass-tint)) 0%,
    rgb(var(--glass-rgb) / calc(var(--glass-tint) * .82)) 46%,
    rgb(var(--glass-rgb) / calc(var(--glass-tint) * .94)) 100%);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(.66);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(.66);
  border:1px solid rgba(255,255,255,.16);
  color:var(--glass-ink);
  box-shadow:
    0 18px 50px rgba(6,14,20,.28),
    inset  0  1px 0 rgba(255,255,255,.22),
    inset  1px 0 0 rgba(255,255,255,.1),
    inset  0 -1px 0 rgba(255,255,255,.06);
}
/* блик по верхнему углу */
.glass::before{
  content:''; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; pointer-events:none;
  background:linear-gradient(160deg,
    rgba(255,255,255,.14) 0%, rgba(255,255,255,.03) 34%, transparent 60%);
}

/* Плашка под текстом — облегчённая версия того же стекла: мягче тень,
   тоньше кромка. Текст на ней читается одинаково при любой картинке фона,
   поэтому весь мелкий кегль страницы вынесен на плашки, а не на подложку.
   Геометрия у каждой своя и задана по месту. */
.room-card__text,
.lead{
  position:relative;
  background:linear-gradient(150deg,
    rgb(var(--glass-rgb) / var(--glass-tint)) 0%,
    rgb(var(--glass-rgb) / calc(var(--glass-tint) * .82)) 48%,
    rgb(var(--glass-rgb) / calc(var(--glass-tint) * .94)) 100%);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(.66);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(.66);
  box-shadow:
    0 12px 30px rgba(6,14,20,.22),
    inset 0  1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.05);
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

.container{
  width:100%;
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.ic{ width:24px; height:24px; flex:none; }
.ic--18{ width:18px; height:18px; }
.ic--20{ width:20px; height:20px; }
.ic--24{ width:24px; height:24px; }

.center{ text-align:center; }

/* ---------- typography ---------- */

.h2{
  margin:0 0 22px;
  font-family:var(--font-display);
  font-size:clamp(39px,4.4vw,61px);
  line-height:1.1;
  font-weight:400;
  letter-spacing:0;
}

/* крупные заголовки — курсивом (Playfair, настоящее italic-начертание);
   мелкие подписи — карточки номеров и футер — остаются прямыми */
.h2,
.contacts__title{ font-style:italic; }

.lead{
  margin:0;
  padding:26px clamp(24px,2.4vw,34px) 28px;
  border-radius:var(--r-md);
  font-size:clamp(16.5px,1.28vw,18.5px);
  line-height:1.6;
  color:var(--glass-ink);
}

/* ---------- отметка «блок попал в кадр» ---------- */

/* Появления блоков нет: они отрисованы сразу, без прозрачности и сдвига.
   Класс .reveal остался хуком для скрипта — он вешает на такие блоки is-in,
   а уже по нему рисуются золотые линии сетки и запускается их искра
   (см. .grid-line ниже). Убрать класс из разметки — пропадут и линии. */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

/* =========================================================
   Header
   ========================================================= */

.header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.header.is-stuck{
  background:rgba(18,21,24,.74);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}

/* шапка тянется на всю ширину экрана: логотип уходит в левый угол,
   кнопки — в правый; боковой отступ вдвое меньше общего */
.header__inner{
  max-width:none;
  padding:0 calc(var(--gutter) * .65);
  height:var(--header-h);
  display:flex; align-items:center; gap:0;
  color:#fff;
}

.logo-mark{
  position:relative;
  align-self:flex-start;     /* плашка висит от самого верха экрана */
  margin-left:18px;          /* и подвинута вправо, к надписи */
  width:48px; height:53px;
  display:grid; place-items:center;
  border-radius:0 0 5px 5px;
  transition:transform .35s var(--ease);
}

/* Стекло вынесено в отдельный слой: гасим его прозрачностью, а не
   свойством backdrop-filter. Даже blur(0px) оставляет слой размытия
   активным, и он продолжает подмешивать тёмное — из-за этого фон
   плашки не исчезал до конца. */
.logo-mark::before{
  content:''; position:absolute; inset:0;
  border-radius:inherit;
  /* тон один в один как у шапки */
  background-color:rgba(18,21,24,.74);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.08);
  transition:opacity .5s var(--ease);
}
.logo-mark:hover{ transform:translateY(3px); }

/* при собранной шапке стекло растворяется — остаётся только золотая монограмма */
.header.is-stuck .logo-mark::before{ opacity:0; }
/* в покое монограмма белая, при собранной шапке перекрашивается в золото */
.logo-mark img{
  position:relative; z-index:1;   /* монограмма над стеклянным слоем */
  grid-area:1 / 1;
  width:36px; height:auto;
  transition:opacity .55s var(--ease);
}
.logo-mark__gold{ opacity:0; }
.header.is-stuck .logo-mark__gold{ opacity:1; }
.header.is-stuck .logo-mark__white{ opacity:0; }

/* Надпись открывается слева направо, когда шапка собирается при прокрутке.

   Сама надпись — оригинальная картинка из логотипа, поверх неё SVG-маска.
   Маска — один прямоугольник с мягкой правой кромкой, который проезжает по
   слову: буквы проявляются строго по порядку, от «Б» до «Ь».

   Прежде тут был «пишущий» скелет из осевых линий букв, полученный утончением
   по Zhang–Suen. Автоматическая трассировка режет букву на несвязанные куски
   (в «О» их 18), а stroke-dashoffset открывает их в порядке следования в
   path-данных — перо прыгало по букве вместо того, чтобы вести линию. Плавным
   этот скелет не сделать, не перерисовав все 11 букв вручную. */
.header__word{
  position:relative;
  align-self:center;
  margin-left:9px;
  line-height:0;
  opacity:0;
  transition:opacity .3s var(--ease);
}
.header.is-stuck .header__word{ opacity:1; }
/* Раскрытое меню — fixed-слой на весь экран, он накрывает шапку, и надпись
   пропадала под ним даже у собранной шапки. Знак и кнопка звонка подняты над
   меню теми же средствами. Появлением слова это не управляет: оно по-прежнему
   целиком на .is-stuck, то есть в меню видно ровно тогда, когда видно и на
   самой странице. */
.header.is-nav-open .header__word{ z-index:1; }

.header__word-svg{
  display:block;
  height:15px; width:auto;
  overflow:visible;
}

/* В покое кромка стоит левее слова — надпись закрыта целиком. */
.word-wipe{ transform:translateX(0); }
.header.is-stuck .word-wipe{
  animation:word-wipe 1.88s var(--ease) forwards;
}
/* 1150 единиц: ровно столько, чтобы белое поле ушло за правый край «Ь». */
@keyframes word-wipe{ to{ transform:translateX(1150px); } }

/* тёплый блик проходит по буквам следом за пером */
.header__word::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,
    transparent 40%, rgba(255,244,212,.8) 50%, transparent 60%);
  background-size:220% 100%;
  background-repeat:no-repeat;
  background-position:0 0;
  -webkit-mask-image:url(../img/logo-word.webp);
          mask-image:url(../img/logo-word.webp);
  -webkit-mask-size:100% 100%;   mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  opacity:0;
}
.header.is-stuck .header__word::after{
  animation:word-gleam 1.38s var(--ease) 1.81s 1;
}
@keyframes word-gleam{
  0%   { background-position:0 0;    opacity:0; }
  25%  { opacity:1; }
  75%  { opacity:1; }
  100% { background-position:100% 0; opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .header__word{ transition:none; }
  .header.is-stuck .word-wipe{ animation:none; }
  .word-wipe{ transform:translateX(1150px); }
  .header.is-stuck .header__word::after{ animation:none; }
}

.nav{
  margin-left:auto;
  display:flex; align-items:center; gap:27px;
  font-size:15px;
}
.nav > a{ padding:4px 0; opacity:.85; transition:opacity .25s var(--ease); }
.nav > a:hover{ opacity:1; }

/* CTA в шапке */
/* Кнопка не заливается никогда — заливка акцентом тонула в тёмной шапке,
   цвет держит контур. На первом экране он белый, как монограмма рядом; когда
   шапка собирается — перекрашивается в золото вместе с ней. Время перехода
   то же, что у кросс-фейда логотипа (.55s), поэтому обе метки меняют цвет
   одним движением. Подпись белая всегда: читается на любом кадре. */
/* Селектор с двумя классами намеренно: `.nav > a` выше по специфичности,
   чем голый `.nav__cta`, и его `transition:opacity` затирал бы весь список
   переходов ниже — контур и фон переключались бы рывком. */
.nav > .nav__cta{
  position:relative;
  padding:6px 15px !important;
  border-radius:999px;          /* капсула, как у кнопок Apple */
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.6);
  /* Кегль ниже прежнего: капслок с разрядкой сам по себе прибавляет
     капсуле ширину, и на старых 14px кнопка перевешивала пункты меню. */
  font-size:12.5px;
  /* Начертание — как у «Забронировать» в hero: тот же Golos, тот же вес и
     разрядка, капслок. Обе кнопки ведут в одно и то же бронирование и
     теперь читаются одной парой. */
  font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  opacity:1 !important;
  /* цвет кромки и свечения — одним токеном: ниже его перекрашивает шапка */
  --cta-edge:rgba(255,255,255,.98);
  --cta-glow:rgba(255,255,255,.07);
  transition:background-color .45s var(--ease),
             border-color .55s var(--ease),
             box-shadow .55s var(--ease),
             color .55s var(--ease);
}
.header.is-stuck .nav__cta{
  border-color:rgba(229,213,139,.62);
  --cta-edge:var(--gold-light);
  --cta-glow:rgba(190,160,101,.13);
}

/* Наведение: кромка ровно загорается по всей капсуле, фон чуть притемняется,
   вокруг встаёт мягкое свечение — кнопка проявляется, но не превращается
   в плашку. Ничего не едет и не бежит: меняется только цвет.
   Цвет берём по состоянию шапки, иначе кнопка на первом экране уходила бы
   в золото раньше логотипа.
   Своя длительность на самом наведении: свет вспыхивает быстрее (.3s), чем
   гаснет, — на уход курсора работает переход из блока выше. Перекрасу шапки
   он же оставляет прежние .55s, синхронные с кросс-фейдом логотипа. */
.nav > .nav__cta:hover,
.nav > .nav__cta:focus-visible{
  background-color:rgba(0,0,0,.28);
  border-color:var(--cta-edge);
  box-shadow:0 3px 14px var(--cta-glow);
  transition:background-color .3s var(--ease),
             border-color .3s var(--ease),
             box-shadow .3s var(--ease);
}

/* Вариант с золотой заливкой на собранной шапке — вернуть, раскомментировав
   блок целиком:
.header.is-stuck .nav__cta{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--accent);
}
.header.is-stuck .nav__cta:hover{
  background-color:var(--gold-light);
  border-color:var(--gold-light);
}
*/
.nav__mobile-extra{ display:none; }

/* «О нас» и кнопка звонка живут только в мобильной шапке: на десктопе
   в меню и так три пункта, а телефон стоит в подвале и в контактах. */
.nav > .nav__about{ display:none; }
.header__phone{ display:none; }

.header__right{ display:flex; align-items:center; gap:12px; margin-left:12px; }

/* burger */
.burger{
  display:none; width:36px; height:36px; margin-right:-8px;
  background:none; border:0; cursor:pointer; padding:9px 8px;
  flex-direction:column; justify-content:space-between;
}
.burger span{
  display:block; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s;
}
.burger.is-open span:nth-child(1){ transform:translateY(8.25px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-8.25px) rotate(-45deg); }

/* =========================================================
   Hero
   ========================================================= */

/* Первый экран — кадр во всю ширину и высоту окна, без скруглений */
.hero{
  position:relative;
  /* на сколько заголовок приподнят над нижним краем экрана */
  --hero-lift:8svh;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding:calc(var(--header-h) + 40px) 0 calc(clamp(56px,9vh,110px) + var(--hero-lift));
  overflow:hidden;
  isolation:isolate;
}
.hero__media{ position:absolute; inset:0; z-index:-1; }
.hero__media img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 62%;
  transform:scale(1.04);
  transform-origin:center 50%;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(18,20,22,.5) 0%, rgba(18,20,22,.12) 32%,
                            rgba(18,20,22,.34) 62%, rgba(18,20,22,.7) 100%),
    radial-gradient(130% 85% at 50% 20%, rgba(18,20,22,0) 36%, rgba(18,20,22,.32) 100%);
}

.hero__content{
  width:100%;
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;
  padding:0 var(--gutter);
  color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
}

.hero__title{
  margin:0;
  text-align:center;
  font-weight:300;
}
/* Начертание взято из логотипа и перекрашено в белый */
.hero__title-main,
.hero__title-sub{
  display:block; margin-inline:auto; height:auto;
  filter:drop-shadow(0 2px 30px rgba(0,0,0,.45));
}
/* пропорции взяты из логотипа: подпись — 42% ширины заголовка,
   зазор между строками — 5.5% от неё же */
.hero__title-main{ width:clamp(252px,43.2vw,594px); }
.hero__title-sub{ width:clamp(106px,18.2vw,249px); margin-top:clamp(14px,2.3vw,32px); }

/* Текстовая кнопка: читается как кнопка за счёт золотой черты под словом.
   Приём и анимация — те же, что у ссылок на карточках номеров. */
.hero__cta{
  position:relative;
  margin-top:clamp(30px,4.4vh,52px);
  color:#fff;
  font-size:clamp(14px,1.1vw,17px);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-shadow:0 2px 24px rgba(0,0,0,.45);
  transition:color .3s var(--ease);
}
.hero__cta::after{
  content:''; position:absolute;
  left:0; right:0; bottom:-10px; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
  box-shadow:0 2px 16px rgba(190,160,101,.55);
  transform:scaleX(1); transform-origin:right;
}
.hero__cta:hover{ color:var(--gold-light); }
.hero__cta:hover::after,
.hero__cta:focus-visible::after{ animation:link-underline .62s var(--ease); }
.hero__cta:focus-visible{ outline:2px solid var(--gold); outline-offset:10px; }

/* =========================================================
   Sections
   ========================================================= */

.section{ padding:clamp(52px,5.8vw,88px) 0; }

/* Полоса во всю ширину экрана: текст слева, квадратный кадр справа,
   поровну и без полей — зеркало полосы завтраков под ней. Отступы держит
   не секция, а текстовая половина, поэтому кадр упирается в край экрана. */
.about__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
}
/* Ячейки заданы явно: золотая линия — тоже элемент сетки, и при
   автоматической расстановке она сдвинула бы текст с кадром в следующий ряд. */
.about__grid > .about__body{ grid-area:1 / 1; }
.about__grid > .about__media{ grid-area:1 / 2; }

/* Линия стоит ровно на стыке колонок.
   Прежде была отбита от края фото влево, в поле текстовой половины, —
   зеркально завтракам. Вернуть — раскомментировать строку ниже: */
/* .about__grid .grid-line--v{ transform:translateX(calc(clamp(8px,1vw,16px) * -1)); } */
.about__body{
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center;
  padding:var(--edge);
}
.about .h2{ margin-bottom:26px; color:#fff; }
.about .btn{ margin-top:30px; }

/* Кадр здесь — тот же компонент, что в завтраках: квадрат, кроссфейд,
   точки внизу, автосмена. Общая геометрия описана один раз, в блоке
   Breakfast, вместе с .bslide и .bdot. */

/* ---------- buttons ---------- */

.btn{
  display:inline-flex; align-items:center; gap:14px;
  padding:16px 30px;
  border-radius:999px;          /* капсула, как у кнопок Apple */
  background:var(--accent); color:#fff;
  font-size:16px; font-weight:500;
  border:0; cursor:pointer;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.btn:hover{ background:var(--accent-hover); transform:translateY(-2px); }

/* Золотая кнопка — «Тихий адрес». Тёмная капсула вставала прямо под тёмной
   стеклянной плашкой с текстом: два тёмных блока подряд, и действие ничем
   не выделялось. Золото здесь единственный тёплый тон в холодном блоке и
   прямая рифма с логотипом. Модификатор, а не базовый .btn: тем же классом
   покрашена кнопка «На главную» на 404. */
.btn--gold{ background:var(--gold-fill); color:#fff; }
/* На наведении уходим в глубину, а не в свет: светлое золото под белым
   текстом теряет читаемость раньше, чем становится ярче. */
.btn--gold:hover{ background:var(--gold-fill-h); }
.btn .ic{ transition:transform .35s var(--ease); }
.btn:hover .ic{ transform:translate(3px,-3px); }

.circle-btn{
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(28,32,36,.28);
  background:none; cursor:pointer;
  display:grid; place-items:center;
  color:var(--ink);
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), opacity .25s;
}
.circle-btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.circle-btn:disabled{ opacity:.3; cursor:default; background:none; border-color:rgba(28,32,36,.28); color:var(--ink); }
.circle-btn[data-prev] .ic{ transform:scaleX(-1); }

.circle-btn--light{
  border-color:rgba(255,255,255,.45);
  color:#fff;
  background:rgba(16,16,16,.32);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.circle-btn--light:hover{ background:#fff; border-color:#fff; color:var(--ink); }
.circle-btn--light:disabled{ opacity:.5; background:rgba(16,16,16,.32); color:#fff; border-color:rgba(255,255,255,.45); }

/* =========================================================
   Slider (shared)
   ========================================================= */

.slider{ position:relative; }
.slider__viewport{ overflow:hidden; border-radius:var(--r-lg); }
.slider__track{
  display:flex;
  transition:transform .7s var(--ease);
  will-change:transform;
}
.slide{ margin:0; flex:0 0 100%; }
.slide img{
  width:100%; height:clamp(320px,44vw,560px);
  object-fit:cover;
}

.slider__nav{
  display:flex; gap:10px;
  justify-content:flex-end;
  margin-top:14px;
}
.slider__nav--inset{
  position:absolute; right:clamp(20px,5vw,90px); bottom:36px; z-index:3;
  margin:0;
}

/* fade variant */
.slider--fade .slider__viewport{ border-radius:0; height:100%; }
.slider--fade .slider__track{ height:100%; transition:none; }
.slider--fade .slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity .9s var(--ease);
}
.slider--fade .slide.is-active{ opacity:1; }
.slider--fade .slide img{ width:100%; height:100%; }

/* =========================================================
   Rooms — лента карточек: крупный кадр 3:2, следующий выглядывает
   ========================================================= */

/* Нижний отступ держит не пульт ленты, а золотая линия под ним: она
   уходит на 29px в этот отступ. Поэтому потолок скромный — иначе на широком
   экране линия почти упирается в полосу «Тихого адреса» под ней. */
.rooms{ padding-bottom:clamp(44px,3.5vw,50px); }
/* Заголовок стоит на той же вертикали, что и карточки: общий --edge, а не
   колонка сайта. В .container он был бы отбит от края дальше карточек, и
   левый край блока разошёлся бы на две линии. */
.rooms__head{ padding-inline:var(--edge); }
/* отступ до ленты держит сам заголовок — подводки под ним больше нет */
.rooms .h2{ margin-bottom:clamp(34px,3.6vw,52px); color:#fff; }

/* Лента лежит вне .container: колонка сайта (1240px) держала бы карточки уже,
   чем нужно, и их левый край не совпадал бы с «Тихим адресом» под ними —
   тот блок полноэкранный и отбит от края своим полем. Поэтому лента идёт во
   всю ширину, а от края её держит общее --edge. Поля даём треку padding'ом:
   карточка должна доезжать до той же вертикали, что и заголовок, но при этом
   уходить под край экрана при прокрутке. */
.rooms-rail{
  position:relative;
  --col-gap:clamp(10px,1.2vw,18px);
}

/* Прокрутка нативная: на телефоне это обычный жест, на трекпаде — привычный
   горизонтальный свайп, и всё это работает без единой строчки скрипта.
   scroll-padding повторяет поле трека, иначе карточка прилипала бы к самому
   краю экрана, а не к вертикали заголовка. */
.rooms-rail__track{
  display:flex;
  gap:var(--col-gap);
  width:100%;
  padding-inline:var(--edge);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--edge);
  scrollbar-width:none;
}
/* Полосу прокрутки прячем: под лентой стоит свой пульт, а системная полоса
   на десктопе резала бы нижнюю кромку плашки. */
.rooms-rail__track::-webkit-scrollbar{ display:none; }

/* Две трети ширины: карточка крупная, а треть следующей видна — этого хватает,
   чтобы лента читалась как лента, и не нужно ни стрелки искать, ни подсказку
   писать. Процент считается от поля трека, то есть от той же ширины, по
   которой выровнены заголовки. */
.rooms-rail__track > .room-card{
  flex:0 0 66%;
  scroll-snap-align:start;
}

/* ---------- золотые разделители ---------- */

/* Дорожка шире самой линии: внутри неё ::before рисует волосяную линию,
   а ::after — светящаяся заливка поверх неё. В однопиксельном элементе
   свечение обрезалось бы по бокам. */
.grid-line{
  position:relative;
  pointer-events:none;
  overflow:hidden;
}

.grid-line--v{
  grid-area:1 / 1 / auto / -1;
  justify-self:center; align-self:stretch;
  width:30px;
}
.grid-line--h{ width:100%; height:30px; }

/* Лента обрамлена сверху и снизу. Прежде линий было четыре: сетка 2×2
   размечалась ещё и по стыку колонок, и по зазору между рядами. У ленты ни
   того, ни другого нет — остались две, и они держат блок как рамка.
   Позиционируем абсолютом, а не потоком: трек прокручивается, линии стоят. */
.rooms-rail > .grid-line--h{
  position:absolute; z-index:1;
  left:var(--edge); right:var(--edge);
  width:auto;
}
.rooms-rail > .grid-line--top{ top:-29px; }
.rooms-rail > .grid-line--bottom{ bottom:-29px; }

/* волосяная линия */
.grid-line::before{
  content:''; position:absolute;
  background:var(--gold);
}
.grid-line--v::before{
  top:0; bottom:0; left:50%; width:3px; margin-left:-1.5px;
  background:linear-gradient(180deg,
    transparent 0, var(--gold) 10%, var(--gold) 90%, transparent 100%);
  transform:scaleY(0); transform-origin:top;
  transition:transform 1.1s var(--ease) var(--draw, .15s);
}
.grid-line--h::before{
  left:0; right:0; top:50%; height:3px; margin-top:-1.5px;
  background:linear-gradient(90deg,
    transparent 0, var(--gold) 8%, var(--gold) 92%, transparent 100%);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--ease) var(--draw, .5s);
}
.about__grid.is-in .grid-line--v::before,
.breakfast.is-in .grid-line--v::before{ transform:scaleY(1); }
.rooms-rail.is-in .grid-line--h::before,
.breakfast.is-in .grid-line--h::before{ transform:scaleX(1); }

/* светящаяся заливка: повторяет геометрию волосяной линии один в один
   и наливается поверх неё */
.grid-line::after{
  content:''; position:absolute;
  opacity:0;
  box-shadow:0 0 10px 1px rgba(255,240,190,.42);
}
.grid-line--v::after{
  top:0; bottom:0; left:50%; width:3px; margin-left:-1.5px;
  background:linear-gradient(180deg,
    transparent 0, #fff3c8 10%, #fff3c8 90%, transparent 100%);
  transform:scaleY(0); transform-origin:top;
}
.grid-line--h::after{
  left:0; right:0; top:50%; height:3px; margin-top:-1.5px;
  background:linear-gradient(90deg,
    transparent 0, #fff3c8 8%, #fff3c8 92%, transparent 100%);
  transform:scaleX(0); transform-origin:left;
}
.about__grid.is-in .grid-line--v::after,
.breakfast.is-in .grid-line--v::after{ animation:spark-v 5s var(--ease) var(--spark, 1.2s) infinite; }
.rooms-rail.is-in .grid-line--h::after,
.breakfast.is-in .grid-line--h::after{ animation:spark-h 5s var(--ease) var(--spark, 2.6s) infinite; }

/* линия наливается от начала к концу, гаснет целиком, пауза — и заново */
@keyframes spark-v{
  0%   { transform:scaleY(0); opacity:1; }
  45%  { transform:scaleY(1); opacity:1; }
  65%  { transform:scaleY(1); opacity:0; }
  100% { transform:scaleY(0); opacity:0; }
}
@keyframes spark-h{
  0%   { transform:scaleX(0); opacity:1; }
  45%  { transform:scaleX(1); opacity:1; }
  65%  { transform:scaleX(1); opacity:0; }
  100% { transform:scaleX(0); opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .grid-line::before{ transition:none; transform:none !important; }
  .grid-line::after{ animation:none !important; }
}

.room-card{ display:flex; flex-direction:column; height:100%; }

.room-card__frame{ position:relative; }

.room-card__media{
  position:relative; display:block; width:100%;
  aspect-ratio:3 / 2;
  padding:0; border:0; background:none; cursor:pointer;
  border-radius:var(--r-photo);
  overflow:hidden;
}
/* Стопка кадров лежит ровно по рамке. Прежде здесь был слой параллакса,
   выше рамки на 60%: object-fit:cover натягивал фото на эту лишнюю высоту,
   увеличивал его в 1.6 раза и срезал по 19% с каждого бока — от кадра
   оставалось 63% ширины и 63% высоты. Совпадение пропорций рамки и фото
   (обе 3:2) при этом ничего не решало. Слой стоит по inset:0 — фото входит
   в рамку один в один. */
.room-card__shots{
  position:absolute; inset:0;
}
.room-card__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease);
}

/* Кадры номера лежат стопкой и сменяются кросс-фейдом. Селектор из двух
   классов намеренно: у правила выше специфичность выше одиночного класса,
   и без этого оно перебило бы transition обратно на голый transform. */
.room-card__media .room-card__shot{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity .9s var(--ease), transform .8s var(--ease);
}
.room-card__media .room-card__shot.is-active{ opacity:1; }
.room-card__media::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,9,8,.42) 0%, rgba(10,9,8,0) 26%,
                            rgba(10,9,8,0) 52%, rgba(10,9,8,.68) 100%),
    linear-gradient(90deg,  rgba(10,9,8,.38) 0%, rgba(10,9,8,0) 20%,
                            rgba(10,9,8,0) 80%, rgba(10,9,8,.38) 100%);
}
.room-card__media:hover img{ transform:scale(1.06); }
.room-card__media:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }


/* Кружки-переключатели кадров — та же точка, что под завтраками (.bdot),
   только стоят в правом верхнем углу кадра: низ слева занят названием
   номера и «Забронировать», а кадров в галерее до двенадцати, и внизу
   ряд точек налез бы на подписи на узких карточках. */
.room-card__dots{
  position:absolute; z-index:3;
  top:clamp(16px,1.7vw,24px);
  right:clamp(16px,1.8vw,26px);
  display:flex; gap:11px;
}
/* Точки мельче, чем у завтраков, и площадка нажатия у них ровно по шагу
   ряда — иначе у двенадцати точек зоны налезали бы друг на друга. */
.room-card__dots .bdot{ width:8px; height:8px; }
.room-card__dots .bdot::after{ inset:-5px; }

.room-card__overlay{
  position:absolute; z-index:2;
  left:clamp(20px,2.2vw,34px);
  right:clamp(20px,2.2vw,34px);
  bottom:clamp(16px,1.8vw,26px);
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  pointer-events:none;
}
.room-card__link{
  position:relative;
  pointer-events:auto; flex:none;
  color:#fff;
  font-size:clamp(13px,1vw,15px); font-weight:500;
  text-decoration:none;
  text-shadow:0 2px 24px rgba(0,0,0,.45);
  transition:color .3s var(--ease);
}
/* золотая черта — та же, что под кнопкой на первом экране */
.room-card__link::after{
  content:''; position:absolute;
  left:0; right:0; bottom:-6px; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
  box-shadow:0 2px 14px rgba(190,160,101,.5);
  transform:scaleX(1); transform-origin:right;
}
.room-card__link:hover{ color:var(--gold-light); }
.room-card__link:hover::after,
.room-card__link:focus-visible::after{
  animation:link-underline .62s var(--ease);
}
.room-card__link:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; }

/* подчёркивание уезжает вправо и заново прочерчивается слева */
@keyframes link-underline{
  0%   { transform:scaleX(1); transform-origin:right; }
  48%  { transform:scaleX(0); transform-origin:right; }
  49%  { transform:scaleX(0); transform-origin:left; }
  100% { transform:scaleX(1); transform-origin:left; }
}

@media (prefers-reduced-motion:reduce){
  .room-card__link:hover::after,
  .room-card__link:focus-visible::after,
  .hero__cta:hover::after,
  .hero__cta:focus-visible::after{ animation:none; }
}

.room-card__title{
  margin:0;
  color:#fff;
  font-family:var(--font-display);
  /* у Playfair рост строчных ниже, чем у гротеска в ссылке рядом,
     поэтому кегль крупнее — на глаз строки получаются одинаковыми */
  font-size:clamp(17px,1.3vw,19.5px);
  font-weight:500; line-height:1.2; letter-spacing:.02em;
  text-shadow:0 2px 24px rgba(0,0,0,.45);
}
/* Описание номера лежит на стеклянной плашке (рецепт — в блоке Liquid Glass):
   ширина у неё та же, что у кадра, поэтому карточка читается одним предметом —
   фото и стекло под ним. */
.room-card__text{
  margin:18px 0 0;
  padding:18px var(--gutter) 20px;
  border-radius:var(--r-sm);
  font-size:14px; line-height:1.6;
  color:var(--glass-ink);
  flex:1 1 auto;
}
/* ---------- пульт ленты ---------- */

.rooms-rail__nav{
  display:flex; justify-content:center;
  padding-inline:var(--edge);
  margin-top:clamp(20px,2.2vw,30px);
}
/* Стрелки и точки лежат на том же стекле, что и описания номеров: под лентой
   светлая подложка, и белая точка на ней просто пропала бы. Это то же
   правило, по которому весь мелкий кегль страницы вынесен на плашки. */
.rail-nav{
  display:none;                 /* включает скрипт, см. js/main.js */
  align-items:center;
  gap:clamp(14px,1.6vw,20px);
  padding:8px 12px;
  border-radius:999px;
}
.rail-nav.is-ready{ display:inline-flex; }

.rail-nav__arrow{
  width:38px; height:38px; flex:none; padding:0;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.08);
  color:var(--glass-ink);
  display:grid; place-items:center;
  cursor:pointer;
  transition:background-color .25s var(--ease), color .25s var(--ease),
             opacity .25s var(--ease);
}
.rail-nav__arrow:hover{ background:#fff; color:#111; }
.rail-nav__arrow:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
/* На краю ленты стрелка гаснет, но остаётся на месте: исчезни она — пульт
   дёрнулся бы по ширине на каждом пролистывании. */
.rail-nav__arrow:disabled{ opacity:.32; cursor:default; }
.rail-nav__arrow:disabled:hover{ background:rgba(255,255,255,.08); color:var(--glass-ink); }
.rail-nav__arrow--prev .ic{ transform:scaleX(-1); }

.rail-nav__dots{ display:flex; align-items:center; gap:14px; }

/* =========================================================
   Breakfast — квадратное фото слева, текст справа, без боковых полей
   ========================================================= */

/* Полоса завтраков — стеклянная плашка: сквозь неё видно, как под
   страницей ходит подложка. Блик держим на ::before с position:absolute,
   иначе в grid он встал бы третьей ячейкой и сдвинул фото с текстом. */
.breakfast{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  background:linear-gradient(150deg,
    rgb(var(--glass-rgb) / var(--glass-tint)) 0%,
    rgb(var(--glass-rgb) / calc(var(--glass-tint) * .8)) 46%,
    rgb(var(--glass-rgb) / calc(var(--glass-tint) * .92)) 100%);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(.66);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(.66);
  color:var(--glass-ink);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(255,255,255,.06);
}
.breakfast::before{
  content:''; position:absolute; inset:0; z-index:0;
  pointer-events:none;
  background:linear-gradient(160deg,
    rgba(255,255,255,.13) 0%, rgba(255,255,255,.03) 34%, transparent 60%);
}
.breakfast > *{ position:relative; z-index:1; }
/* ячейки заданы явно: золотая линия — тоже элемент сетки и при
   автоматической расстановке сдвинула бы фото с текстом */
.breakfast > .breakfast__media{ grid-area:1 / 1; }
.breakfast > .breakfast__body{ grid-area:1 / 2; }

/* Квадратный кадр с точками. Тот же компонент стоит в «Тихом адресе»,
   поэтому геометрия описана на оба блока сразу. */
.breakfast__media,
.about__media{
  position:relative;
  margin:0;
  aspect-ratio:1 / 1;
  border-radius:var(--r-photo);
  overflow:hidden;
}
.bslide{
  position:absolute; inset:0; margin:0;
  opacity:0;
  transition:opacity .9s var(--ease);
}
.bslide.is-active{ opacity:1; }
.bslide img{
  width:100%; height:100%;
  object-fit:cover;
}

/* точки: в покое прозрачные с тонкой обводкой, активная — золотая */
.bdots{
  position:absolute; z-index:2;
  left:0; right:0; bottom:clamp(18px,2vw,28px);
  display:flex; justify-content:center; gap:16px;
}
.bdot{
  position:relative;
  width:9px; height:9px; padding:0;
  border-radius:50%;
  background:transparent;
  border:1px solid rgba(255,255,255,.7);
  cursor:pointer;
  transition:background-color .4s var(--ease),
             border-color .4s var(--ease),
             transform .4s var(--ease);
}
/* сама точка 9px, но нажимать можно по площадке 29px —
   в такую мелкую цель иначе трудно попасть */
.bdot::after{ content:''; position:absolute; inset:-10px; border-radius:50%; }
.bdot:hover{ transform:scale(1.25); }
.bdot:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.bdot.is-active{
  background:var(--gold);
  border-color:var(--gold);
  transform:scale(1.15);
}

.breakfast__body{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(30px,4.5vw,76px);
}
.breakfast__body .h2{ margin-bottom:24px; }

.breakfast__text{
  margin:0 0 16px;
  font-size:clamp(16.5px,1.28vw,18.5px);
  line-height:1.6;
  color:var(--glass-ink);
  max-width:56ch;
}
.breakfast__text:last-of-type{ margin-bottom:0; }

/* Линия стоит ровно на стыке колонок.
   Прежде была отодвинута от края фото вправо, в поле текстовой половины.
   Вернуть — раскомментировать строку ниже: */
/* .breakfast .grid-line--v{ transform:translateX(clamp(8px,1vw,16px)); } */
.breakfast .grid-line--h{ margin-top:clamp(14px,2vw,26px); }
.breakfast__time{ margin-top:clamp(4px,.8vw,10px); }
.breakfast__time b{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(24px,2.2vw,32px);
  font-weight:400;
  letter-spacing:.01em;
}
.breakfast__time span{
  display:block; margin-top:6px;
  font-size:15.5px; color:var(--glass-ink-2);
}

/* =========================================================
   Contacts
   ========================================================= */

/* Карта — общая подложка под контактами и подвалом,
   поэтому стекло подвала размывает именно её. */
.map-zone{
  position:relative;
  isolation:isolate;
  background:var(--accent);
  overflow:hidden;
}
.map-zone > .contacts__map{ position:absolute; inset:0; z-index:0; }

.contacts{
  position:relative; z-index:1;
  min-height:clamp(405px,37vw,546px);
  display:flex; align-items:center;
  pointer-events:none;          /* мышь проходит насквозь к карте */
}
/* Базовая тёмная карта: инверсия с поворотом тона.
   Подложка темнеет, вода остаётся синей, парки — зелёными. */
.contacts__map iframe{
  width:100%; height:100%; border:0;
  filter:invert(.92) hue-rotate(180deg) saturate(.7) brightness(1.05) contrast(.92);
}
.contacts__map::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,24,36,.2) 0%, rgba(0,24,36,0) 55%, rgba(0,24,36,.12) 100%);
}

/* Зум карты включается кликом. Пока он выключен, поверх iframe лежит
   прозрачная кнопка: колесо и свайп достаются странице, а не карте. */
.map-guard{ position:absolute; inset:0; z-index:2; pointer-events:none; }

/* Отбивка плашки от верхнего края карты. Одна переменная на обе кнопки:
   подсказку и «выключить» — иначе при клике плашка прыгала бы вверх. */
.map-guard{ --guard-top:clamp(64px,6vw,92px); }

.map-guard__on{
  position:absolute; inset:0;
  display:flex; align-items:flex-start; justify-content:flex-end;
  padding:clamp(18px,2.2vw,28px);
  padding-top:var(--guard-top);
  border:0; background:transparent; font:inherit;
  pointer-events:auto; cursor:pointer;
}
.map-guard__off{
  position:absolute;
  top:var(--guard-top); right:clamp(18px,2.2vw,28px);
  display:none; align-items:center; gap:9px;
  border:0; font:inherit;
  pointer-events:auto; cursor:pointer;
}

.map-guard__hint,
.map-guard__off{
  padding:11px 20px;
  border-radius:999px;
  color:#fff;
  font-size:15px; line-height:1.25; text-align:left;
  background:linear-gradient(160deg, rgba(0,28,44,.66) 0%, rgba(0,17,27,.8) 100%);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 16px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.2);
  transition:border-color .25s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}

/* подсказка проявляется под курсором, чтобы не мозолить глаза постоянно */
.map-guard__hint{ opacity:0; transform:translateY(-6px); }
.map-guard__on:hover  .map-guard__hint,
.map-guard__on:focus-visible .map-guard__hint{ opacity:1; transform:none; }
@media (hover:none){ .map-guard__hint{ opacity:1; transform:none; } }

.map-guard__off .ic{ color:var(--gold-light); }
.map-guard__off:hover{ border-color:rgba(255,255,255,.36); }

.contacts__map.is-map-active .map-guard__on{ display:none; }
.contacts__map.is-map-active .map-guard__off{ display:inline-flex; }


.contacts .container{ position:relative; z-index:2; pointer-events:none; }

.contacts__card{
  pointer-events:auto;
  width:min(470px,100%);
  padding:34px 32px 36px;
  border-radius:var(--r-md);
  color:#fff;

  /* то же стекло, что у шапки, только с тёмно-синим оттенком */
  background:linear-gradient(160deg, rgba(0,28,44,.62) 0%, rgba(0,17,27,.78) 100%);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 26px 60px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.2);
}
.contacts__title{
  margin:0 0 26px;
  font-family:var(--font-display);
  font-size:clamp(35px,3.3vw,46px);
  font-weight:400;
  letter-spacing:0;
}
.contacts__list{ list-style:none; margin:0; padding:0; display:grid; gap:22px; }
.contacts__list li{ display:flex; gap:14px; align-items:flex-start; }
.contacts__list .ic{ color:rgba(255,255,255,.72); margin-top:2px; }
.contacts__list b{ font-size:17.5px; font-weight:600; overflow-wrap:anywhere; }
.contacts__list small{ display:block; color:rgba(255,255,255,.6); font-size:14px; margin-top:2px; }
.contacts__list a:hover b{ text-decoration:underline; }

/* =========================================================
   Footer
   ========================================================= */

.footer{
  position:relative; z-index:1;
  background:linear-gradient(160deg, rgba(0,28,44,.62) 0%, rgba(0,17,27,.78) 100%);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border-top:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  color:rgba(255,255,255,.82);
  padding:clamp(40px,4vw,58px) 0 24px;
  font-size:15.5px;
}
.footer__inner{
  display:grid;
  grid-template-columns:1.4fr 1.2fr .9fr;
  gap:40px;
  align-items:start;
}

.footer__logo{ display:block; width:max-content; }
.footer__logo img{ width:clamp(160px,13vw,200px); height:auto; }

/* Заголовки колонок идут на Golos Text, а не на Playfair: тот же шрифт, что
   у «Забронировать» в hero. У Playfair в прямом начертании крупная разница
   штрихов, и на 13px в разрядку она рассыпается — засечки тоньше пикселя. */
.footer__col h4{
  margin:6px 0 20px;
  font-size:13px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.footer__col p{ margin:0 0 12px; }
.footer__col a{ display:inline-flex; align-items:center; gap:9px; transition:color .25s; }
.footer__col a:hover{ color:#fff; }

/* Мессенджеры в подвале — те же три ссылки, что в бургер-меню, и та же
   геометрия кружка, что у .nav__msgr. Отдельным правилом, а не общим с ним:
   .nav__msgr живёт внутри мобильной медиа-выборки, на десктопе его нет.
   Идут после .footer__col a — специфичность у селекторов равная, и цвет
   с рамкой на наведении должны браться отсюда. */
.footer__msgr{ display:flex; gap:10px; margin-top:18px; }
.footer__msgr a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  color:inherit; opacity:.72;
  transition:opacity .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.footer__msgr a:hover{ opacity:1; color:#fff; border-color:rgba(255,255,255,.42); }
.footer__msgr svg{ display:block; width:20px; height:20px; }

.footer__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:clamp(28px,3vw,42px);
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:14px;
  color:rgba(255,255,255,.5);
}
.footer__legal{ display:flex; align-items:center; gap:10px; }
.footer__legal a:hover{ color:#fff; }
.footer__legal i{ font-style:normal; opacity:.5; }

/* =========================================================
   Lightbox
   ========================================================= */

.lightbox{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center; gap:clamp(8px,1.6vw,22px);
  padding:clamp(12px,3vh,30px) clamp(16px,3vw,40px);
  background:rgba(12,12,14,.94);
  opacity:0; transition:opacity .35s var(--ease);
}
.lightbox[hidden]{ display:none; }
.lightbox.is-open{ opacity:1; }

/* Кадр держим настолько крупным, насколько позволяют стрелки по бокам:
   min-width:0 разрешает фигуре сжиматься, поэтому широкий снимок на большом
   экране упирается не в фиксированные 1100px, а в реальное свободное место.
   Высоту считаем не долей экрана, а вычетом: 108px — это верхнее и нижнее
   поле плюс полоса под счётчиком, ниже которой снимок наезжал бы на «1 / 7». */
.lightbox__stage{ margin:0; min-width:0; max-width:min(1600px,100%); }
.lightbox__stage img{
  max-width:100%; max-height:calc(100vh - 108px);
  border-radius:var(--r-md);
  object-fit:contain;
  transition:opacity .3s var(--ease);
}
.lightbox__arrow,
.lightbox__close{
  width:52px; height:52px; flex:none;
  border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:none; color:#fff; cursor:pointer;
  display:grid; place-items:center;
  transition:background .25s, color .25s, border-color .25s;
}
.lightbox__arrow:hover,
.lightbox__close:hover{ background:#fff; color:#111; border-color:#fff; }
.lightbox__arrow--prev .ic{ transform:scaleX(-1); }
.lightbox__close{ position:absolute; top:clamp(14px,3vw,30px); right:clamp(14px,3vw,30px); }
.lightbox__counter{
  position:absolute; bottom:clamp(8px,1.6vh,18px); left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.7); font-size:14px; letter-spacing:.06em;
}

body.is-locked{ overflow:hidden; }

/* =========================================================
   Модуль бронирования Bnovo
   ========================================================= */

/* Выше лайтбокса: из него бронировать нельзя, а вот открыть бронь
   поверх открытой галереи — можно. */
.booking{
  position:fixed; inset:0; z-index:110;
  display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(64px,9vh,96px) clamp(12px,4vw,48px) clamp(16px,4vw,48px);
  overflow-y:auto; overscroll-behavior:contain;
  background:rgba(12,12,14,.94);
  opacity:0; transition:opacity .35s var(--ease);
}
.booking[hidden]{ display:none; }
.booking.is-open{ opacity:1; }

/* Внутри — iframe со своей вёрсткой на белом фоне: нашим CSS его не достать,
   поэтому даём модулю белую подложку с нашим радиусом, иначе он обрывался бы
   на тёмном прямоугольником. Отступ снизу — под плашку Bnovo. */
.booking__stage{
  width:100%; max-width:1100px;
  padding:clamp(14px,2vw,26px);
  border-radius:var(--r-md);
  background:var(--white);
}

/* fixed, а не absolute: модуль высокий, и крестик должен оставаться
   на месте, пока пользователь прокручивает список номеров. */
.booking__close{
  position:fixed; top:clamp(14px,3vw,30px); right:clamp(14px,3vw,30px);
  width:52px; height:52px; flex:none;
  border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:none; color:#fff; cursor:pointer;
  display:grid; place-items:center;
  transition:background .25s, color .25s, border-color .25s;
}
.booking__close:hover{ background:#fff; color:#111; border-color:#fff; }

/* =========================================================
   Страница «Номера» — модуль бронирования на странице

   Виджет живёт в iframe со своей вёрсткой на белом фоне: нашим CSS его
   не достать, поэтому даём модулю белую подложку с нашим радиусом — так же,
   как в модалке на главной.

   Тёмная полоса заголовка нужна не для красоты: шапка на сайте всегда белая
   по фотографии, а здесь под ней светлая подложка страницы — без полосы
   логотип и меню на первом экране не читались бы. Заодно она уводит вниз
   контент из-под фиксированной шапки.
   ========================================================= */
.book{ padding-bottom:clamp(52px,5.8vw,88px); }

.book__head{
  padding:calc(var(--header-h) + clamp(30px,3.6vw,54px)) 0 clamp(32px,3.6vw,50px);
  margin-bottom:clamp(28px,3vw,44px);
  color:#fff;
  background:linear-gradient(160deg, rgba(0,28,44,.62) 0%, rgba(0,17,27,.78) 100%);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.16);
}
.book__eyebrow{
  margin:0 0 14px;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.book__title{ margin:0; color:#fff; }
.book__note{
  max-width:58ch; margin:18px 0 0;
  font-size:clamp(16px,1.2vw,18px); line-height:1.6;
  color:rgba(255,255,255,.8);
}

.book__stage{
  padding:clamp(14px,2vw,26px);
  border-radius:var(--r-md);
  background:var(--white);
  box-shadow:0 18px 50px rgba(6,14,20,.28);
}

/* Запасной текст на месте модуля: показываем, если скрипт виджета не
   поднялся (js/rooms.js) или JavaScript выключен вовсе. */
.book__fallback{
  margin:0; padding:36px 20px; text-align:center;
  color:var(--ink-2); line-height:1.6;
}
.book__fallback a{ color:var(--accent); text-decoration:underline; }

/* Подсказка лежит прямо на подложке страницы, а она светлая — белый текст
   на ней тонет. Поэтому строка едет на такую же стеклянную плашку, что и
   весь мелкий кегль сайта, только капсулой по ширине текста. */
.book__help{
  width:max-content; max-width:100%;
  margin:clamp(20px,2vw,28px) auto 0;
  padding:13px clamp(20px,2vw,28px);
  border-radius:999px;
  text-align:center; font-size:15.5px;
  color:var(--glass-ink-2);
  background:linear-gradient(150deg,
    rgb(var(--glass-rgb) / var(--glass-tint)) 0%,
    rgb(var(--glass-rgb) / calc(var(--glass-tint) * .94)) 100%);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(.66);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(.66);
  box-shadow:
    0 12px 30px rgba(6,14,20,.22),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.book__help a{ color:var(--gold-light); text-decoration:underline; }

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width:1100px){
  .room-card__text{ font-size:13.5px; }
  .footer__inner{ grid-template-columns:1fr 1fr; gap:36px; }
  .footer__logo{ grid-column:1 / -1; justify-items:start; }
}

@media (max-width:900px){
  :root{ --header-h:54px; --gutter:20px; }

  /* Заголовок и кнопку на первом экране поднимаем выше над нижним краем */
  .hero{ --hero-lift:16svh; }

  /* И делаем надпись крупнее: базовый clamp упирается в свой минимум 252px,
     то есть на узком экране заголовок не растёт вовсе. Пропорция подписи
     к заголовку сохранена прежней — 42%. */
  .hero__title-main{ width:min(76vw,330px); }
  .hero__title-sub{  width:min(31.9vw,139px); }

  .burger{ display:flex; }
  .header__right{ margin-left:auto; }

  .logo-mark{ width:44px; height:44px; margin-left:13px; z-index:1; }
  .logo-mark img{ width:32px; }
  .header__word{ margin-left:8px; }
  .header__word-svg{ height:13px; }

  .nav{
    position:fixed; inset:0;
    /* меню раскрывается на весь экран, а не панелью у правого края */
    /* Тот же тёмный тон, что у собранной шапки, но почти без прозрачности.
       Раньше плотность держалась на backdrop-filter: он размывал страницу
       под меню, и оставшихся 8-14% просвета было не видно. В WebKit это
       размытие не применяется, страница просвечивала резко — сквозь меню
       читались карточки номеров, и фона будто не было вовсе. Плотность
       теперь в самом градиенте, а размытие осталось приятным дополнением
       там, где оно работает. */
    background:linear-gradient(160deg, rgba(20,25,29,.985) 0%, rgba(14,17,20,.99) 100%);
    backdrop-filter:blur(22px) saturate(1.4);
    -webkit-backdrop-filter:blur(22px) saturate(1.4);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:26px;
    padding:0 32px;
    font-size:22px;
    transform:translateX(100%);
    transition:transform .45s var(--ease);
  }
  .nav.is-open{ transform:none; }

  /* Меню — position:fixed внутри .header, а у собранной шапки стоит
     backdrop-filter. По спецификации он создаёт containing block для
     fixed-потомков: меню отсчитывало inset:0 не от экрана, а от полоски
     шапки и схлопывалось в её высоту — фон рисовался на 54px, а пункты
     вываливались наружу. Пока открыт любой полноэкранный слой, размытие
     шапке не нужно: она им всё равно закрыта. */
  body.is-locked .header{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .nav > .nav__cta{ font-size:17px; margin-top:8px; }
  .nav__mobile-extra{
    display:block; margin-top:14px;
    padding-top:26px; border-top:1px solid rgba(255,255,255,.14);
    width:100%;
  }
  .nav__phone{ font-size:17px; opacity:.75; }
  .nav > .nav__about{ display:block; }
  .nav__addr{ margin:14px 0 0; font-size:15px; line-height:1.45; opacity:.6; }
  .nav__mail{ display:inline-block; margin-top:8px; font-size:15px; opacity:.6; }

  /* Мессенджеры — ряд под почтой. Кружки 40px, чтобы попадать пальцем;
     иконки монохромные и наследуют цвет меню, а не тянут брендовые
     заливки: в тёмном полноэкранном меню они бы кричали. */
  .nav__msgr{ display:flex; gap:10px; margin-top:18px; }
  .nav__msgr a{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    color:inherit; opacity:.7;
    transition:opacity .25s var(--ease), border-color .25s var(--ease);
  }
  .nav__msgr a:active{ opacity:1; border-color:rgba(255,255,255,.42); }
  .nav__msgr svg{ display:block; width:20px; height:20px; }

  /* Кнопка звонка — справа от бургера, у самого края.
     z-index нужен, чтобы она осталась над раскрытым меню: .nav позиционирован
     и перекрывает обычный поток. Крестик держится сам — его палочки в открытом
     состоянии получают transform, а он поднимает их в тот же слой. */
  .header__phone{
    position:relative; z-index:1;
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px;
    color:inherit;
  }
  .header__phone svg{ display:block; width:22px; height:22px; }

  .header:not(.is-stuck) .header__inner{ color:#fff; }

  .slider__nav--inset{ bottom:22px; right:20px; }

  /* В одну колонку порядок такой: заголовок, под ним кадр, затем текст
     и кнопка. Чтобы кадр встал между заголовком и текстом, .about__body
     распускаем через display:contents — его дети становятся ячейками той же
     сетки, и их можно расставить order'ом. Боковые отступы переезжают с
     контейнера на детей: кадр должен идти от края до края, текст — нет.
     Квадрат на узком экране съедал бы весь экран, поэтому кадр становится
     чуть шире своей высоты. */
  /* Оба блока — «Тихий адрес» и «Завтраки» — собираются на узком экране
     одинаково, поэтому и ритм отступов у них один набор на двоих: иначе
     блоки одинакового устройства выглядят по-разному. Заголовкам гасим
     собственный margin-bottom (26px против 24px в базовых стилях), чтобы
     просвет до кадра задавался только --stack-gap и совпадал в обоих. */
  .about__grid,
  .breakfast{
    --stack-top:clamp(28px,7vw,44px);      /* от предыдущего блока до заголовка */
    --stack-gap:clamp(18px,4vw,26px);      /* заголовок / кадр / текст */
    --stack-bottom:clamp(36px,8vw,52px);   /* до следующего блока */
  }

  .about__grid{ grid-template-columns:1fr; }
  .about__grid > .grid-line--v{ display:none; }
  /* Явная ячейка 1/2 из базовых стилей завела бы вторую колонку — кадр встал
     бы сбоку от заголовка вместо того, чтобы лечь под него. */
  .about__grid > .about__media{ grid-area:auto; }
  .about__body{ display:contents; }
  .about__body > *{ margin-inline:var(--gutter); }
  .about__body > .h2{ order:1; margin-top:var(--stack-top); margin-bottom:0; }
  .about__media{ order:2; aspect-ratio:4 / 3; margin-top:var(--stack-gap); }
  .about__body > .lead{ order:3; margin-top:var(--stack-gap); }
  .about__body > div{ order:4; margin-bottom:var(--stack-bottom); }

  /* В одну колонку «Тихий адрес» отбит от края уже не общим --edge (padding
     у .about__body здесь снят вовсе), а гуттером. Лента переходит на тот же
     гуттер — иначе карточки перестали бы сходиться с заголовком. */
  .rooms-rail__track{
    padding-inline:var(--gutter);
    scroll-padding-inline:var(--gutter);
  }
  .rooms__head{ padding-inline:var(--gutter); }
  .rooms-rail > .grid-line--h{ left:var(--gutter); right:var(--gutter); }
  /* Экран уже — карточка шире: две трети здесь оставили бы кадр мелким. */
  .rooms-rail__track > .room-card{ flex-basis:78%; }

  /* Внутри кадра нет потоковых потомков — .bslide лежит absolute, — поэтому
     своей ширины у блока нет. В одноколоночной сетке Chrome растягивает такой
     элемент по колонке, а WebKit при заданном aspect-ratio этого не делает:
     ширина схлопывалась в 0, за ней по пропорции и высота, и на iPhone кадр
     пропадал вместе с фотографией. Задаём ширину явно — как у
     .room-card__media, который по этой же причине не ломался.
     Только здесь: на десктопе квадрат намеренно подгоняется под высоту
     текстовой колонки, и width:100% растянул бы его сверх меры. */
  .about__media,
  .breakfast__media{ width:100%; }

  /* В одной колонке явная расстановка ячеек ломает блок: `grid-area:1 / 2`
     у текста заводит неявную вторую колонку, текст вылезает из неё и
     ложится поверх фото. Возвращаем автоматическую расстановку. */
  .breakfast{ grid-template-columns:1fr; }
  .breakfast > .breakfast__media{ grid-area:auto; }
  .breakfast > .grid-line--v{ display:none; }

  /* Тот же приём и те же отступы, что в «Тихом адресе». */
  .breakfast__body{ display:contents; }
  .breakfast__body > *{ margin-inline:var(--gutter); }
  .breakfast__body > .h2{ order:1; margin-top:var(--stack-top); margin-bottom:0; }
  .breakfast__media{ order:2; margin-top:var(--stack-gap); }
  .breakfast__body > .breakfast__text{ order:3; }
  /* Просвет между кадром и текстом: у первого абзаца его не было вовсе —
     текст упирался прямо в фотографию. */
  .breakfast__body > .breakfast__text:first-of-type{ margin-top:var(--stack-gap); }
  .breakfast__body > .grid-line--h{ order:4; }
  .breakfast__body > .breakfast__time{ order:5; margin-bottom:var(--stack-bottom); }

  .contacts{ min-height:auto; flex-direction:column; }
  .map-zone > .contacts__map{ position:relative; inset:auto; width:100%; height:282px; }

  /* Заглушка с подсказкой нужна только мыши: она ловит колесо, чтобы страница
     не застревала в зуме. На тач-устройстве колеса нет, зато сама заглушка
     накрывает карту целиком и мешает ей — убираем. */
  .map-guard{ display:none; }
  .footer{
    background:var(--accent);
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  /* Плашка контактов встаёт под картой, а не поверх: на узком экране она
     закрывала половину карты, и оба элемента мешали друг другу. */
  .contacts .container{ padding-block:0 0; margin-top:clamp(20px,5vw,32px); margin-bottom:40px; }
  .contacts__card{ width:100%; }
}

@media (max-width:760px){
  .hero{
    --hero-lift:16svh;
    min-height:100svh;
    padding:calc(var(--header-h) + 28px) 0 calc(clamp(44px,7vh,72px) + var(--hero-lift));
  }

  .slide img{ height:clamp(240px,54vw,360px); }

  /* ---------- номера на узком экране: столбец, а не лента ----------
     Здесь блок остаётся тем же, чем был до карусели: карточки идут одна под
     другой во всю ширину. Горизонтальный свайп на телефоне спорит с
     вертикальной прокруткой страницы, а прятать два номера из трёх за жестом
     на самом узком экране — терять их вовсе. Лента живёт от 761px. */
  .rooms-rail__track{
    display:block;
    overflow:visible;
    scroll-snap-type:none;
  }
  .rooms-rail__track > .room-card{ width:auto; }
  .rooms-rail__track > .room-card + .room-card{ margin-top:44px; }

  /* Пульт с ленты не нужен: листать нечего. */
  .rooms-rail__nav{ display:none; }

  .breakfast .grid-line--v{ display:none; }
  .room-card__overlay{ gap:12px; }

  .footer__inner{ grid-template-columns:1fr; gap:28px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; gap:10px; }

  .lightbox__arrow{ width:44px; height:44px; }

  .booking__close{ width:44px; height:44px; }
  .booking__stage{ padding:10px; }
  .book__stage{ padding:10px; }
  .room-card__dots{ gap:10px; }
}