/* ============================================================
   BASILICO — направление A «Театр огня»
   Токены: css/tokens.css (генерируется из DESIGN.md)
   Семантика: только --color-* переменные, сырые hex запрещены
   ============================================================ */

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

:root {
  /* Типографика: решения этапа арт-дирекшна (направление A).
     Cormorant — заголовки (характер антиквы вывески, кириллица);
     Cinzel — только словомарка (траяновская капитель, латиница);
     Manrope — текст и UI. */
  --font-display: "Cormorant", "Georgia", serif;
  --font-brand: "Cinzel", "Cormorant", "Georgia", serif;
  --font-text: "Manrope", "Arial", sans-serif;
  --size-hero: clamp(2.6rem, 7.2vw, 6.2rem);
  --size-h2: clamp(1.9rem, 4.4vw, 3.6rem);
  --size-body: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  --track-kicker: 0.18em;
  --leading-display: 1.04;
  /* Свет сцены: янтарь живёт ТОЛЬКО в фото/плейсхолдерах — это подписи к будущим фотографиям */
  --ph-warm: color-mix(in srgb, var(--color-copper) 55%, var(--color-graphite));
  --ph-warm-2: color-mix(in srgb, var(--color-terracotta) 45%, var(--color-graphite));
  --ph-day: color-mix(in srgb, var(--color-straw) 38%, var(--color-ivory));
  /* Тёплый графит: в него гаснет низ hero и с него начинается акт II — свет фото
     остывает, не обрываясь (исключение утверждено, см. design-plans/2026-08-25-act2-glow-from-hero.md) */
  --warm-dusk: color-mix(in srgb, var(--color-copper) 12%, var(--color-graphite));
  --space-act: clamp(5rem, 12vh, 9rem);
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 72rem;
  /* Сцена первого экрана (герой + шапка) чуть шире текстовой колонки —
     решение заказчика 25.08.2026: 72rem для баннера тесновато */
  --maxw-hero: 80rem;
}

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

/* Нативный скроллбар скрыт решением заказчика 25.08.2026 — позицию показывает
   индикатор .topbar__progress под шапкой (см. main.js). Прокрутка не тронута. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }

/* Обязательный CSS-контраст Lenis: при активном смусе нативная CSS-плавность
   должна быть выключена, иначе каждая покадровая запись позиции анимируется
   браузером и скролл ломается. Классы ставит сам Lenis. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--size-body);
  line-height: 1.6;
  color: var(--color-text-on-day);
  background: var(--color-surface-evening);
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- Доступность ---------- */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: 0.6rem 1rem; background: var(--color-action); color: var(--color-ivory);
  border-radius: 4px; text-decoration: none; transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--color-action-hover-evening); outline-offset: 3px; }
.act-day :focus-visible { outline-color: var(--color-action); }

/* ---------- Акты: вечер / день ---------- */
.act-evening { background: var(--color-surface-evening); color: var(--color-text-on-evening); }
.act-day { background: var(--color-surface-day); color: var(--color-text-on-day); }

/* ---------- Шапка ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  /* Фон — во всю ширину, контент — в колонке --maxw-hero (та же кромка, что у героя) */
  padding: 0.9rem max(var(--gutter), calc((100% - var(--maxw-hero)) / 2));
  color: var(--color-text-on-evening);
  background: color-mix(in srgb, var(--color-surface-evening) 55%, transparent);
  backdrop-filter: blur(10px);
  transition: background 0.45s ease;
}
.topbar.is-solid { background: color-mix(in srgb, var(--color-surface-evening) 92%, transparent); }
/* Индикатор прочитанного — латунная нить по нижней кромке шапки (роль: отклик).
   Заполнение — scaleX из main.js: только transform, без перераскладки. */
.topbar__progress {
  position: absolute; inset: auto 0 0 0; height: 2px;
  background: color-mix(in srgb, var(--color-border-warm) 22%, transparent);
}
.topbar__progress-fill {
  height: 100%; background: var(--color-accent-brand-up);
  transform-origin: left; transform: scaleX(0); will-change: transform;
}
/* ---------- Словомарка (типографская замена эмблемы до получения вектора) ---------- */
.wordmark { text-decoration: none; display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.wordmark__name {
  font-family: var(--font-brand); font-weight: 500; font-size: 1.02rem;
  letter-spacing: 0.24em; text-indent: 0.24em; white-space: nowrap;
}
.wordmark__sub {
  margin-top: 0.35em;
  font-family: var(--font-brand); font-weight: 400; font-size: 0.5rem;
  letter-spacing: 0.42em; text-indent: 0.42em; text-transform: uppercase;
  color: var(--color-border-warm); white-space: nowrap;
}
.wm-i { position: relative; display: inline-block; }
.wm-leaf {
  position: absolute; left: 50%; top: -0.34em;
  width: 0.3em; height: 0.3em;
  border-radius: 50% 0 50% 50%;
  transform: translateX(-50%) rotate(-45deg);
}
.wm-leaf--basil { background: var(--color-basil); }
.wm-leaf--rasp { background: var(--color-accent-spice); }
.wordmark--footer { margin-bottom: 1.3rem; }
.wordmark--footer .wordmark__name { font-size: 2rem; }
.wordmark--footer .wordmark__sub { font-size: 0.74rem; }
.topbar__nav { display: flex; gap: 1.8rem; margin-left: auto; }
.topbar__nav a {
  position: relative;
  text-decoration: none; font-size: 1.02rem; font-weight: 600;
  letter-spacing: 0.05em; opacity: 0.85; transition: opacity 0.25s ease;
}
/* Ховер: просто смена цвета текста на светлый базилик */
.topbar__nav a { transition: color 0.2s ease, opacity 0.2s ease; }
.topbar__nav a:hover,
.topbar__nav a:focus-visible { opacity: 1; color: var(--color-action-hover-evening); }
@media (max-width: 860px) {
  .topbar__nav { display: none; }
  .topbar__cta { margin-left: auto; }
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-block; padding: 0.95rem 1.7rem; border-radius: 6px;
  /* font/border/cursor заданы явно: .btn живёт и на <a>, и на <button> */
  font: inherit; border: 0; cursor: pointer;
  font-weight: 600; font-size: 0.95rem; text-decoration: none; line-height: 1.2;
  /* Отклик только поверхностью: ховер светлее, нажатие глубже. Без transform —
     масштабирование дрожит текстом при перерастеризации */
  transition: background-color 0.16s ease, border-color 0.16s ease;
}
.btn--primary { background: var(--color-action); color: var(--color-ivory); }
.btn--primary:hover { background: color-mix(in srgb, var(--color-action) 84%, var(--color-ivory)); }
.btn--primary:active { background: color-mix(in srgb, var(--color-action) 86%, var(--color-graphite)); }
/* background задан явно: на <button> иначе проступает серый UA-фон */
.btn--ghost { background: transparent; border: 1px solid color-mix(in srgb, var(--color-text-on-evening) 45%, transparent); color: var(--color-text-on-evening); }
.btn--ghost:hover { border-color: var(--color-text-on-evening); background: color-mix(in srgb, var(--color-text-on-evening) 10%, transparent); }
.btn--ghost:active { background: color-mix(in srgb, var(--color-text-on-evening) 17%, transparent); }
.btn--ghost-dark { border-color: color-mix(in srgb, var(--color-text-on-day) 40%, transparent); color: var(--color-text-on-day); }
.btn--ghost-dark:hover { border-color: var(--color-text-on-day); background: color-mix(in srgb, var(--color-text-on-day) 8%, transparent); }
.btn--ghost-dark:active { background: color-mix(in srgb, var(--color-text-on-day) 14%, transparent); }
.btn--lg { padding: 1.15rem 2.2rem; font-size: 1.05rem; }

/* ---------- Типографика ---------- */
.kicker {
  font-size: 0.8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--track-kicker); margin: 0 0 1.2rem;
  /* Вечер — шампань-латунь (свет печи, не действие), день — чистая малина логотипа */
  color: var(--color-accent-brand-up);
}
.h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--size-h2); line-height: var(--leading-display);
  margin: 0 0 1.5rem; text-wrap: balance;
}

/* Кованая линия-разделитель под киккером */
.kicker::after {
  content: ""; display: block; width: 3.2rem; height: 1px;
  margin-top: 0.7rem; background: var(--color-accent-brand-up); opacity: 0.7;
}
.act-day .kicker { color: var(--color-accent-brand); }
.act-day .kicker::after { background: var(--color-accent-brand); }

/* ---------- Фото-слоты ---------- */
.ph {
  position: relative; overflow: hidden; border-radius: 4px;
  background: var(--ph-warm-2); min-height: 14rem;
  display: flex; align-items: flex-end;
}
/* Реальные кадры Basilico (Яндекс Карты, веб-разрешение) — провенанс в комментарии index.html */
.ph__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* ---------- АКТ I · HERO ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; }
.hero__scene { position: absolute; inset: 0; overflow: hidden; }
.ph--hero { position: absolute; inset: 0; border-radius: 0; background: var(--ph-warm-2); min-height: 0; }
/* Скрим под текст: жанровое временное фото не обязано иметь тёмный левый край,
   как требует список кадров §7.3, — гарантируем читаемость растяжкой. Гасим
   в --warm-dusk, не в чистый графит: низ hero обязан совпасть с верхом акта II */
.ph--hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--warm-dusk) 90%, transparent) 0%,
      color-mix(in srgb, var(--warm-dusk) 62%, transparent) 34%,
      transparent 66%),
    linear-gradient(0deg,
      var(--warm-dusk) 0%,
      color-mix(in srgb, var(--warm-dusk) 72%, transparent) 18%,
      transparent 46%);
}
/* Свет печи: тёплое пятно справа — режиссура света, не градиент-декорация */
.hero__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 55% at 74% 62%, color-mix(in srgb, var(--color-copper) 34%, transparent) 0%, transparent 70%),
    linear-gradient(100deg, color-mix(in srgb, var(--warm-dusk) 88%, transparent) 34%, transparent 75%);
}
/* Контент героя живёт в колонке --maxw-hero: не прижат к кромке вьюпорта,
   но сцена шире текстовой колонки секций. Ширину текста держат hero__sub/title. */
.hero__content {
  position: relative; z-index: 2;
  margin: auto; padding: clamp(6rem, 16vh, 9rem) var(--gutter) 2rem;
  width: 100%; max-width: calc(var(--maxw-hero) + 2 * var(--gutter));
}
.hero__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--size-hero); line-height: var(--leading-display);
  margin: 0 0 1.4rem; text-wrap: balance;
}
.hero__sub { max-width: 34rem; margin: 0 0 2rem; opacity: 0.92; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero__meta { margin: 1.6rem 0 0; font-size: 0.85rem; opacity: 0.75; }
.hero__meta a { text-decoration: none; }

/* Акт II «О месте» удалён решением заказчика 25.08.2026 — hero теперь встык
   с «Руками и огнём»; остывание света печи (бывший .place::after) перенесено
   на .fire::before, чтобы инвариант стыка с hero сохранился. */

/* ---------- АКТ III · СЦЕНА «РУКИ И ОГОНЬ» ---------- */
.fire { position: relative; }
/* Инвариант стыка: верхняя кромка (медь 12% над графитом) в точности равна
   цвету низа hero (--warm-dusk) — шов невозможен, яркость убывает монотонно. */
.fire::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: min(42vh, 24rem);
  pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-copper) 12%, transparent) 0%,
    color-mix(in srgb, var(--color-copper) 4%, transparent) 55%,
    transparent 100%);
}
/* max-width учитывает боковые паддинги (border-box): без добавки 2×gutter
   контент съезжал вправо относительно соседних актов */
.fire__pin { position: relative; z-index: 1; padding: calc(var(--space-act) * 0.65) var(--gutter) var(--space-act); max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; }
.fire__head { max-width: 40rem; }
.fire__frames {
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: grid; gap: 2.5rem;
}
.fire__frame { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem 2.5rem; align-items: center; }
.fire__frame:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.fire__frame:nth-child(even) .ph { order: 2; }
.ph--frame { aspect-ratio: 4 / 3; min-height: 0; }
.ph--dough { background: color-mix(in srgb, var(--color-straw) 45%, var(--color-graphite)); }
.ph--hands { background: var(--ph-warm-2); }
.ph--flame { background: var(--ph-warm); }
.ph--crust { background: color-mix(in srgb, var(--color-copper) 40%, var(--color-graphite)); }
.fire__num {
  display: block; font-family: var(--font-display); font-style: italic;
  font-size: 2.4rem; line-height: 1; color: var(--color-accent-brand-up);
  margin-bottom: 0.8rem;
}
.fire__caption h3 { font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; margin: 0 0 0.6rem; }
.fire__caption p { margin: 0; opacity: 0.9; max-width: 30rem; }
.fire__foot { margin-top: 3.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: baseline; }
@media (max-width: 860px) {
  .fire__frame, .fire__frame:nth-child(even) { grid-template-columns: 1fr; }
  .fire__frame:nth-child(even) .ph { order: 0; }
}
.menu__note { font-size: 0.85rem; opacity: 0.7; margin: 0.8rem 0 0.4rem; }
.menu__note::before {
  content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.5em;
  border-radius: 50% 0 50% 50%; transform: rotate(-45deg); background: var(--color-basil);
}

/* Пин-сцена (.fire--pinned, шторки clip-path, прогресс-рейл) удалена
   решением заказчика 25.08.2026 — секция «Руки и огонь» на всех экранах
   вертикальная лента из четырёх шагов, как на планшете. См. main.js. */

.quote { margin: 0; max-width: 34rem; }
.quote p { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.45; font-style: italic; margin: 0 0 0.7rem; }
.quote cite { font-style: normal; font-size: 0.82rem; opacity: 0.75; }

/* ---------- АКТ IV · МЕНЮ ---------- */
.menu { padding: var(--space-act) var(--gutter); }
.menu__inner { max-width: 52rem; margin: 0 auto; }
.menu__lead { max-width: 38rem; margin-bottom: 3rem; }
/* Заголовок категории — ступень ниже h2 на любом вьюпорте (флюидный кегль,
   иначе на узких экранах перерастал сам h2), линейка-хвост до правого края */
.menu__cat {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.7rem);
  margin: 3.2rem 0 1.1rem;
  display: flex; align-items: center; gap: 1.2rem;
}
.menu__cat::after {
  content: ""; flex: 1; height: 1px;
  background: color-mix(in srgb, var(--color-border-warm) 45%, transparent);
}
.menu__cat:first-of-type { margin-top: 1rem; }

/* Хиты кухни */
.hits {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.hit {
  position: relative; padding: 1.3rem 1.4rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--color-border-warm) 55%, transparent);
  border-radius: 4px;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.hit__badge {
  position: absolute; top: -0.6rem; right: 1rem;
  padding: 0.15rem 0.55rem; border-radius: 3px;
  background: var(--color-accent-spice); color: var(--color-ivory);
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
}
.hit__name { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; line-height: 1.15; margin: 0; }
.hit__desc { margin: 0; font-size: 0.85rem; opacity: 0.7; flex: 1; }
.hit__meta { margin: 0; font-size: 0.85rem; opacity: 0.85; }
.hit__meta strong { font-variant-numeric: tabular-nums; font-size: 1rem; }
/* Планшет: карточки хитов в две колонки (стопка во всю ширину читалась анкетой);
   телефон ≤700 переключает хиты на типографский прейскурант — см. мобильный блок */
@media (max-width: 860px) { .hits { grid-template-columns: repeat(2, 1fr); } }
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list li {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border-warm) 45%, transparent);
}
.menu__dish { max-width: 34rem; }
.menu__dish em { display: block; font-style: normal; font-size: 0.82rem; opacity: 0.65; margin-top: 0.15rem; }
.menu__dots { flex: 1; border-bottom: 1px dotted color-mix(in srgb, var(--color-text-on-day) 30%, transparent); transform: translateY(-0.35em); min-width: 1.5rem; }
.menu__price { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
/* Закрытые разделы — указатель меню, а не ещё четыре заголовка: строки текстовым
   шрифтом с числом блюд и вилкой цен; дисплейный вес остаётся открытым категориям */
.menu__more { border-bottom: 1px solid color-mix(in srgb, var(--color-border-warm) 45%, transparent); }
.menu__more:first-of-type {
  margin-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--color-border-warm) 45%, transparent);
}
.menu__more summary {
  cursor: pointer; padding: 1.05rem 0.1rem;
  display: flex; align-items: baseline; gap: 0.7rem;
  font-family: var(--font-text); font-size: 1rem; font-weight: 600;
  list-style: none;
}
.menu__more summary::-webkit-details-marker { display: none; }
.menu__more-meta {
  margin-left: auto; font-size: 0.8rem; font-weight: 500; opacity: 0.65;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.menu__more summary::after {
  content: "+"; align-self: center;
  font-size: 1.2rem; line-height: 1; opacity: 0.6;
  transition: transform 0.3s ease;
}
.menu__more[open] summary::after { transform: rotate(45deg); }
@media (max-width: 600px) { .menu__more-count { display: none; } }
.menu__more .menu__list { padding-bottom: 1rem; }
.menu__more .menu__list li:last-child { border-bottom: none; }

/* Пунктуация аккордеона: плавная высота (Chromium; прочие браузеры — мгновенно, как раньше),
   каскад строк при открытии, вежливый ховер строки. Тихая версия — без движения. */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  .menu__more::details-content {
    height: 0; overflow: clip;
    transition: height 0.42s cubic-bezier(0.33, 1, 0.68, 1), content-visibility 0.42s allow-discrete;
  }
  .menu__more[open]::details-content { height: auto; }
  .menu__more .menu__list li { opacity: 0; translate: 0 7px; transition: opacity 0.25s ease, translate 0.25s ease; }
  .menu__more[open] .menu__list li {
    opacity: 1; translate: 0 0;
    transition-delay: calc(90ms + var(--i, 0) * 22ms);
  }
  .menu__more summary::after { transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.2s ease; }
}
.menu__more summary { transition: color 0.2s ease; }
.menu__more summary:hover { color: var(--color-basil); }
.menu__more summary:hover::after { opacity: 1; }
.menu__list li { border-radius: 3px; padding-inline: 0.45rem; margin-inline: -0.45rem; transition: background-color 0.18s ease; }
.menu__list li:hover { background: color-mix(in srgb, var(--color-straw) 18%, transparent); }
.menu__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 3rem; }

/* ---------- АКТ V · ОБЕДЫ ---------- */
.lunch { padding: var(--space-act) var(--gutter); border-top: 1px solid color-mix(in srgb, var(--color-border-warm) 50%, transparent); }
.lunch__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 3rem; align-items: center; }
.lunch__text .btn { margin-top: 1.2rem; }
.ph--lunch { background: var(--ph-day); aspect-ratio: 4 / 3; }
@media (max-width: 860px) { .lunch__inner { grid-template-columns: 1fr; } }

/* ---------- АКТ VI · БАР И СОБЫТИЯ ---------- */
.bar { padding: var(--space-act) var(--gutter); }
.bar__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem; align-items: center; }
.ph--bar { aspect-ratio: 3 / 4; max-height: 28rem; }
@media (max-width: 860px) { .bar__inner { grid-template-columns: 1fr; } .ph--bar { aspect-ratio: 4 / 3; } }

.events { padding: var(--space-act) 0 var(--space-act); text-align: left; }
.events__kicker, .events__h, .events__body { padding-inline: var(--gutter); max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; }
.events__body p { margin: 0 0 1rem; max-width: 40rem; }
.events__note { max-width: 40rem; }
.events__note { font-size: 0.9rem; opacity: 0.75; }
.events__body .btn { margin-top: 0.6rem; }

/* Афиша прошедших недель: статичная колонка у правого края (движение убрано 25.08.2026) */
.events .events__h { margin-bottom: 2.6rem; }
.events__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 3rem; }
.events__list {
  list-style: none; margin: 0.3rem 0 0; padding: 0;
  justify-self: end; min-width: 16rem; max-width: 22rem; width: 100%;
  font-family: var(--font-display); font-style: italic; font-size: 1.5rem;
  color: color-mix(in srgb, var(--color-text-on-evening) 90%, transparent);
  text-align: right;
}
/* Первая строка афиши сидит на одной строке с первой строкой абзаца слева;
   форму держат линейки между строками и закрытие снизу */
.events__list { margin-top: 0; }
.events__list li { padding: 0.7rem 0; border-bottom: 1px solid color-mix(in srgb, var(--color-border-warm) 32%, transparent); }
.events__list li:first-child { padding-top: 0; }
@media (max-width: 860px) {
  .events__body { grid-template-columns: 1fr; }
  .events__list { justify-self: start; text-align: left; max-width: none; }
}

/* ---------- АКТ VII · ИНТЕРЬЕР ---------- */
.interior { padding: var(--space-act) var(--gutter); }
.interior__inner { max-width: var(--maxw); margin: 0 auto; }
.interior__lead { max-width: 38rem; margin-bottom: 2.5rem; }
.interior__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem;
}
.ph--int { min-height: 19rem; background: var(--ph-day); }
.ph--int-a { min-height: 28rem; }
.ph--int-a { grid-column: span 4; background: var(--ph-warm-2); }
.ph--int-b { grid-column: span 2; background: color-mix(in srgb, var(--color-basil) 30%, var(--color-ivory)); }
.ph--int-c { grid-column: span 2; }
.ph--int-d { grid-column: span 2; background: color-mix(in srgb, var(--color-terracotta) 30%, var(--color-ivory)); }
.ph--int-e { grid-column: span 2; background: var(--ph-warm); }
/* Телефон: мозаика становится свайп-лентой (роль: поток — бюджет MOTION.md §2
   «интерьер: поток (галерея/просмотр)»). Чистый CSS scroll-snap: жест гостя,
   не автодвижение — тихой версии не противоречит. Лента выходит за правую
   кромку экрана, следующий кадр виден краем — подсказка листания без стрелок. */
@media (max-width: 700px) {
  .interior__grid {
    display: flex; gap: 0.8rem;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .interior__grid::-webkit-scrollbar { display: none; }
  .interior__grid .ph {
    flex: 0 0 74vw; min-height: 0; aspect-ratio: 4 / 5;
    scroll-snap-align: start;
  }
}

/* ---------- АКТ VIII · ОТЗЫВЫ ---------- */
.reviews { padding: var(--space-act) var(--gutter); border-top: 1px solid color-mix(in srgb, var(--color-border-warm) 50%, transparent); }
.reviews__inner { max-width: var(--maxw); margin: 0 auto; }
.reviews__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; }
.quote--card {
  max-width: none; padding: 1.8rem;
  background: color-mix(in srgb, var(--color-straw) 16%, var(--color-ivory));
  border-left: 2px solid var(--color-accent-spice);
  border-radius: 0 4px 4px 0;
}
.quote--card p { font-size: 1.05rem; }
@media (max-width: 860px) { .reviews__grid { grid-template-columns: 1fr; } }

/* ---------- АКТ IX · ПРАЗДНИКИ ---------- */
.party { padding: var(--space-act) var(--gutter); border-top: 1px solid color-mix(in srgb, var(--color-border-warm) 50%, transparent); }
.party__inner { max-width: 44rem; margin: 0 auto; }
.party__inner p { max-width: 38rem; }
.party__inner .btn { margin-top: 1.2rem; }

/* ---------- АКТ X · КОНТАКТЫ И ФИНАЛ ---------- */
/* Нижний отступ держал скрытый финальный CTA — после его скрытия контакты
   прижимались к футеру; возвращаем акту полноценное дыхание снизу */
.contacts { padding: var(--space-act) var(--gutter) calc(var(--space-act) * 1.15); }
.contacts__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 3rem; }
/* Редакционная иерархия вместо анкеты «лейбл: значение»: адрес и телефон —
   крупные самоописательные строки (телефон — главное действие после скрытия
   финального CTA), служебное — тише ниже */
.contacts__addr { margin: 0 0 0.35rem; font-size: 1.22rem; font-weight: 600; }
.contacts__phone {
  display: inline-block; margin: 0 0 1.4rem;
  font-size: clamp(1.7rem, 2.4vw, 2.2rem); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
  color: var(--color-action-hover-evening); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-action-hover-evening) 40%, transparent);
  transition: border-color 0.16s ease;
}
.contacts__phone:hover { border-bottom-color: var(--color-action-hover-evening); }
/* Служебное — одной тихой строкой, не столбиком: меньше «стены текста» слева */
.contacts__meta { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; opacity: 0.85; }
.contacts__meta li:not(:last-child)::after { content: "·"; margin-left: 0.6rem; opacity: 0.6; }
.contacts__meta a { color: var(--color-action-hover-evening); text-decoration: none; }
.contacts__meta a:hover { text-decoration: underline; }
.contacts__note { opacity: 0.85; max-width: 32rem; }
/* Факты сервиса живут под картой: левая колонка остаётся адресу и брони */
.contacts__side { display: grid; gap: 0.9rem; align-content: start; }
.contacts__facts { font-size: 0.85rem; opacity: 0.65; max-width: 32rem; margin: 0; }
.ph--map { background: var(--ph-warm-2); min-height: 20rem; }
.contacts__final {
  max-width: var(--maxw); margin: var(--space-act) auto 0;
  padding: var(--space-act) 0;
  border-top: 1px solid color-mix(in srgb, var(--color-border-warm) 35%, transparent);
  text-align: center;
}
.final__title { font-family: var(--font-display); font-weight: 500; font-size: var(--size-h2); margin: 0 0 0.8rem; }
.contacts__final p { opacity: 0.9; margin: 0 0 1.8rem; }
.contacts__final .hero__actions { justify-content: center; }
@media (max-width: 860px) { .contacts__inner { grid-template-columns: 1fr; } }

/* ---------- Футер ---------- */
.footer {
  padding: 2rem var(--gutter) 2.5rem; text-align: center;
  background: var(--color-surface-evening); color: var(--color-text-on-evening);
  font-size: 0.78rem;
}
.footer p { margin: 0.3rem 0; opacity: 0.7; }
.footer__nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.6rem;
  margin: 0.4rem 0 1.2rem;
}
.footer__nav a {
  text-decoration: none; font-weight: 600; opacity: 0.75;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.footer__nav a:hover,
.footer__nav a:focus-visible { opacity: 1; color: var(--color-action-hover-evening); }
.footer__links a { text-decoration: none; transition: color 0.2s ease; }
.footer__links a:hover { color: var(--color-action-hover-evening); }
.footer__legal { font-size: 0.75rem; }

/* ---------- БРОНЬ · запись с календарём (ревизия 3) ----------
   Прогрессивное улучшение поверх tel:-ссылок (без JS диалога нет — кнопки звонят).
   Календарь + слоты времени + телефон и комментарий; заявка уходит одной
   кнопкой в POST /api/book (server/app.py) и живёт в админ-панели /admin.
   Приём выключен или сервера нет — честный экран «позвоните/напишите».
   Движение: роль «отклик» — одно появление панели; закрытие мгновенно.
   Цвет: зелёный отвечает только за выбор — выбранный день и слот залиты basil,
   тем же, что у кнопки «Отправить заявку». Всё остальное остаётся вечерним
   графитом с латунью, как в других тёмных актах (правка заказчика 26.08.2026). */
.book {
  width: min(46rem, calc(100vw - 2rem));
  /* Высота — по содержимому; overflow ниже остаётся страховкой для низких окон */
  max-height: calc(100svh - 2rem);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-border-warm) 35%, transparent);
  border-radius: 6px;
  background: var(--color-surface-evening); color: var(--color-text-on-evening);
  color-scheme: dark; /* нативные календарь/список селекта — в тёмной схеме */
  overflow: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-border-warm) 40%, transparent) transparent;
}
/* Затемнение зала: тёплый графит hero (--warm-dusk), не чёрный фон */
.book::backdrop { background: color-mix(in srgb, var(--warm-dusk) 76%, transparent); }
html.book-open { overflow: hidden; }

/* padding-right у шапки — чтобы статус не заезжал под крестик */
.book__inner { position: relative; padding: 1.7rem 1.9rem 1.5rem; }
.book__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.2rem 1.4rem;
  padding-right: 2.4rem; margin-bottom: 1rem;
}
.book__close {
  position: absolute; top: 0.7rem; right: 0.7rem;
  width: 2.4rem; height: 2.4rem; border: 0; border-radius: 4px;
  background: transparent; color: inherit; opacity: 0.65;
  font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: opacity 0.16s ease, color 0.16s ease;
}
.book__close:hover { opacity: 1; color: var(--color-action-hover-evening); }
.book__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.75rem; line-height: 1.1; margin: 0;
}
.book__title::after {
  content: ""; display: block; width: 3.2rem; height: 1px;
  margin-top: 0.6rem; background: var(--color-accent-brand-up); opacity: 0.7;
}
/* Статус — честный: лист базилика зелёный, пока администратор у телефона */
.book__status { margin: 0; font-size: 0.85rem; opacity: 0.9; }
.book__status::before {
  content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.5em;
  border-radius: 50% 0 50% 50%; transform: rotate(-45deg);
  background: var(--color-basil-light);
}
.book.is-closed .book__status::before { background: var(--color-straw); }

.book__field { border: 0; padding: 0; margin: 0 0 0.7rem; min-width: 0; }
.book__legend {
  padding: 0; margin: 0 0 0.55rem;
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; opacity: 0.65;
}
/* Календарь и слоты — две колонки на десктопе, столбик на узких */
.book__cols { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: 1.2rem; }
.cal {
  border: 1px solid color-mix(in srgb, var(--color-text-on-evening) 18%, transparent);
  border-radius: 4px; padding: 0.7rem;
}
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.55rem; }
.cal__title { font-size: 0.88rem; font-weight: 600; }
.cal__nav {
  width: 1.9rem; height: 1.9rem; border: 1px solid color-mix(in srgb, var(--color-text-on-evening) 30%, transparent);
  border-radius: 4px; background: transparent; color: inherit;
  font: inherit; font-size: 1.05rem; line-height: 1; cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, opacity 0.16s ease;
}
.cal__nav:hover:not(:disabled) { border-color: var(--color-text-on-evening); background: color-mix(in srgb, var(--color-text-on-evening) 10%, transparent); }
.cal__nav:disabled { opacity: 0.25; cursor: default; }
.cal__week {
  display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
  font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  opacity: 0.5; margin-bottom: 0.3rem;
}
.cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__day {
  aspect-ratio: 1; border: 1px solid transparent; border-radius: 3px;
  background: transparent; color: inherit;
  font: inherit; font-size: 0.85rem; font-variant-numeric: tabular-nums;
  line-height: 1; cursor: pointer; padding: 0;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.cal__day:hover:not(:disabled) { border-color: color-mix(in srgb, var(--color-text-on-evening) 45%, transparent); }
.cal__day:disabled { opacity: 0.22; cursor: default; }
.cal__day.is-today { text-decoration: underline; text-underline-offset: 3px; }
/* Выбранное — залито действием: тот же basil, что у кнопки «Отправить заявку» */
.cal__day.is-selected {
  color: var(--color-ivory);
  border-color: var(--color-basil);
  background: var(--color-basil);
}
.cal__day.is-selected:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--color-basil) 86%, var(--color-ivory));
  background: color-mix(in srgb, var(--color-basil) 86%, var(--color-ivory));
}
/* Слоты добирают высоту колонки календаря — правая колонка читается блоком */
.book__cols > .book__field:last-child { display: grid; grid-template-rows: minmax(0, 1fr); }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; align-content: stretch; }
.slot {
  padding: 0.45rem 0; text-align: center;
  border: 1px solid color-mix(in srgb, var(--color-text-on-evening) 30%, transparent);
  border-radius: 4px; background: transparent; color: inherit;
  font: inherit; font-size: 0.84rem; font-weight: 600; font-variant-numeric: tabular-nums;
  line-height: 1.1; cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.slot:hover:not(:disabled) { border-color: color-mix(in srgb, var(--color-text-on-evening) 60%, transparent); }
.slot:disabled { opacity: 0.22; cursor: default; }
.slot.is-selected {
  color: var(--color-ivory);
  border-color: var(--color-basil);
  background: var(--color-basil);
}
.slot.is-selected:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--color-basil) 86%, var(--color-ivory));
  background: color-mix(in srgb, var(--color-basil) 86%, var(--color-ivory));
}
.book__row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.2rem; align-items: end; }
/* Поля: телефон, имя, комментарий */
.book__input {
  width: 100%; padding: 0.55rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--color-text-on-evening) 30%, transparent);
  border-radius: 4px; background: transparent; color: inherit;
  font: inherit; font-size: 0.95rem;
}
.book__input::placeholder { color: color-mix(in srgb, var(--color-text-on-evening) 38%, transparent); }
.book__textarea { resize: vertical; min-height: 2.7rem; }
.book__stepper { display: flex; align-items: stretch; gap: 0.4rem; }
.book__step {
  width: 2.45rem; border: 1px solid color-mix(in srgb, var(--color-text-on-evening) 30%, transparent);
  border-radius: 4px; background: transparent; color: inherit;
  font: inherit; font-size: 1.05rem; line-height: 1; cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}
.book__step:hover { border-color: var(--color-text-on-evening); background: color-mix(in srgb, var(--color-text-on-evening) 10%, transparent); }
.book__step:disabled {
  opacity: 0.3; cursor: default; background: transparent;
  border-color: color-mix(in srgb, var(--color-text-on-evening) 30%, transparent);
}
.book__num {
  width: 3rem; padding: 0.55rem 0; text-align: center;
  border: 0; background: transparent; color: inherit;
  font: inherit; font-size: 1.02rem; font-weight: 700; font-variant-numeric: tabular-nums;
  appearance: textfield; -moz-appearance: textfield;
}
.book__num::-webkit-outer-spin-button,
.book__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Живая фраза — запрос словами, голосом цитат (Cormorant italic) */
.book__send {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 1.2rem;
}
.book__sentence {
  margin: 0; min-height: 1.45em;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.25rem; line-height: 1.35; opacity: 0.95;
  text-wrap: balance;
}
.book__error { margin: 0 0 0.55rem; font-size: 0.86rem; color: var(--color-raspberry-light); }
.book__submit { text-align: center; white-space: nowrap; }
.book__alt { margin: 0.75rem 0 0; font-size: 0.8rem; opacity: 0.75; }
.book__alt a { color: var(--color-action-hover-evening); text-decoration: none; }
.book__alt a:hover { text-decoration: underline; }
/* ---------- Финальные экраны панели: «заявка принята» / «приём приостановлен».
   Панель в этот момент — не форма, а точка вечера: шапку формы прячет класс
   is-finale (ставит booking.js), композиция по центру, листок — печатью:
   базилик у «принята» (роль basil-light по DESIGN.md), солома у паузы. ---------- */
.book.is-finale .book__head { display: none; }
/* Панель на финале сужается до карточки: широкая колонка формы вокруг
   короткого текста читалась пустым полем. Мобильная шторка (≤560) остаётся
   во всю ширину — там правило ниже возвращает 100%. */
.book.is-finale { width: min(34rem, calc(100vw - 2rem)); }
.book__done, .book__paused {
  display: grid; justify-items: center; text-align: center;
  max-width: 27rem; margin-inline: auto;
  padding: 2.4rem 0 1.2rem;
}
.book__done[hidden], .book__paused[hidden] { display: none; }
.book__done-title, .book__paused-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.9rem; line-height: 1.15; margin: 0 0 0.9rem;
}
.book__done-title::before, .book__paused-title::before {
  content: ""; display: block; width: 1.05rem; height: 1.05rem;
  margin: 0 auto 1.15rem;
  border-radius: 50% 0 50% 50%; transform: rotate(-45deg);
  background: var(--color-basil-light);
}
.book__paused-title::before { background: var(--color-straw); }
/* Приёмная фраза — словами гостя, голосом цитат */
.book__done-lead {
  margin: 0 0 0.8rem;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.35rem; line-height: 1.4; text-wrap: balance;
}
.book__done-text, .book__paused-text {
  margin: 0 0 1.7rem; font-size: 0.95rem; opacity: 0.8; max-width: 24rem;
  text-wrap: pretty; /* без висячего последнего слова */
}
.book__done-btn { min-width: 10rem; text-align: center; }
.book__actions { display: grid; gap: 0.7rem; width: 100%; max-width: 21rem; }
.book__actions .btn { text-align: center; font-variant-numeric: tabular-nums; }
.book__note { margin: 0.65rem 0 0; font-size: 0.78rem; line-height: 1.5; opacity: 0.6; }
@media (max-height: 820px) and (min-width: 561px) {
  .book__inner { padding: 1.3rem 1.6rem 1.15rem; }
  .book__head { margin-bottom: 0.85rem; }
  .book__title { font-size: 1.5rem; }
  .book__field { margin-bottom: 0.6rem; }
  .cal { padding: 0.5rem; }
  .book__cols { grid-template-columns: minmax(0, 14.5rem) minmax(0, 1fr); }
  /* Клетка перестаёт быть квадратом — месяц занимает на треть меньше высоты */
  .cal__day { aspect-ratio: auto; height: 1.5rem; }
  .book__sentence { font-size: 1.1rem; }
  .book__note { font-size: 0.74rem; margin-top: 0.55rem; }
}
/* Телефон: панель брони становится нижней шторкой (тач-паттерн; роль движения
   прежняя — «отклик», одно появление). Радиусы только сверху, ручка-полоска
   латунью, нижняя кромка учитывает вырез корпуса. */
@media (max-width: 560px) {
  .book, .book.is-finale {
    width: 100%; max-width: 100%;
    margin: auto 0 0;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-border-warm) 35%, transparent);
    border-radius: 14px 14px 0 0;
    max-height: calc(100svh - 2.2rem);
  }
  .book__inner { padding: 1.75rem 1.25rem calc(1.3rem + env(safe-area-inset-bottom, 0px)); }
  .book__inner::before {
    content: ""; position: absolute; top: 0.6rem; left: 50%;
    width: 2.6rem; height: 3px; border-radius: 999px;
    transform: translateX(-50%);
    background: color-mix(in srgb, var(--color-border-warm) 45%, transparent);
  }
  .book__head { padding-right: 2rem; margin-bottom: 0.9rem; }
  .book__title { font-size: 1.55rem; }
  .book__cols { grid-template-columns: 1fr; }
  .slots { grid-template-columns: repeat(4, 1fr); }
  /* Клетка календаря ниже квадрата — месяц компактнее, форма короче */
  .cal__day { aspect-ratio: auto; height: 2.2rem; }
  /* Телефон уходит на свою строку — подпись длинная */
  .book__row { grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem 0.8rem; }
  .book__row > *:last-child { grid-column: 1 / -1; }
  /* Отправка прилипает к нижней кромке шторки: живая фраза-«чек» и кнопка
     видны всегда, даже пока форма прокручивается */
  .book__send {
    position: sticky; bottom: 0; z-index: 2;
    grid-template-columns: 1fr; gap: 0.7rem;
    margin-inline: -1.25rem;
    padding: 0.8rem 1.25rem calc(0.9rem + env(safe-area-inset-bottom, 0px) * 0.5);
    background: color-mix(in srgb, var(--color-surface-evening) 96%, var(--color-straw));
    border-top: 1px solid color-mix(in srgb, var(--color-border-warm) 28%, transparent);
  }
  .book__submit { width: 100%; }
  .book__alt { text-align: center; }
  /* Финал в шторке: чуть плотнее, чем на десктопе */
  .book__done, .book__paused { padding: 1.7rem 0 0.9rem; }
  .book__done-title, .book__paused-title { font-size: 1.7rem; }
  .book__done-lead { font-size: 1.25rem; }
}
/* Появление панели (роль: отклик). Тихая версия — мгновенно, без движения. */
@media (prefers-reduced-motion: no-preference) {
  .book[open] { transition: opacity 0.3s ease, translate 0.38s cubic-bezier(0.33, 1, 0.68, 1); }
  .book[open]::backdrop { transition: background-color 0.3s ease; }
  @starting-style {
    .book[open] { opacity: 0; translate: 0 0.7rem; }
    .book[open]::backdrop { background: transparent; }
  }
  /* Финальный экран продолжает то же появление: один короткий подъём */
  .book__done:not([hidden]), .book__paused:not([hidden]) {
    animation: book-finale 0.5s cubic-bezier(0.33, 1, 0.68, 1) both;
  }
  @keyframes book-finale {
    from { opacity: 0; translate: 0 10px; }
  }
}

/* ---------- Движение: скрытие делает только GSAP точечно (ниже вьюпорта).
   Без JS и в тихой версии контент видим всегда. ---------- */

@media (prefers-reduced-motion: reduce) {
  .btn, .topbar { transition: none; }
  .topbar__nav a { transition: none; }
  .book__close, .book__step, .cal__nav, .cal__day, .slot { transition: none; }
}

/* ============================================================
   МОБИЛЬНАЯ СЦЕНА (≤700px) — арт-дирекшн мобильной версии:
   «занавес во всю ширину». Фото играют от кромки до кромки, латунные
   номера шагов ложатся полунадвигом на кадры и чередуют сторону
   (асимметрия ленты), кадр «Огонь» — единственный портретный (момент
   секции), хиты меню — типографский прейскурант вместо стопки карточек,
   интерьер — свайп-лента (см. блок секции), бронь — нижняя шторка.
   Нового движения нет: работают только существующие появления системы.
   ============================================================ */
@media (max-width: 700px) {
  :root {
    /* Ритм актов плотнее: паузы десктопа на телефоне читались пустыми полосами */
    --space-act: clamp(3.8rem, 10vh, 5.5rem);
    /* Крупнее по правке заказчика 27.08.2026: заголовок держит экран;
       нижняя граница — «начинается» не переносится до ширины 320 */
    --size-hero: clamp(3.3rem, 15.4vw, 4.3rem);
  }

  /* Шапка: компактнее, CTA всегда в одну строку */
  .topbar { gap: 0.9rem; padding-block: 0.62rem; }
  .topbar .wordmark__name { font-size: 0.92rem; }
  .topbar .wordmark__sub { font-size: 0.46rem; }
  .topbar__cta { white-space: nowrap; padding: 0.72rem 1.05rem; font-size: 0.88rem; }

  /* Hero: текст к нижней кромке (фото дышит сверху), скрим вертикальный,
     кроп смещён к пламени — «Италия начинается с огня» с буквальным огнём */
  .hero__content { margin: auto 0 0; padding: 6.5rem var(--gutter) max(1.7rem, calc(env(safe-area-inset-bottom, 0px) + 1.3rem)); }
  .hero__sub { margin-bottom: 1.7rem; }
  .hero__actions { flex-direction: column; gap: 0.7rem; }
  .hero__actions .btn { width: 100%; text-align: center; padding-block: 1.05rem; }
  .hero__meta { margin-top: 1.4rem; font-size: 0.9rem; }
  .ph--hero .ph__img { object-position: 28% 50%; }
  .ph--hero::after {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--warm-dusk) 62%, transparent) 0%,
        transparent 24%),
      linear-gradient(0deg,
        var(--warm-dusk) 0%,
        color-mix(in srgb, var(--warm-dusk) 80%, transparent) 30%,
        transparent 64%);
  }
  .hero__glow {
    background:
      radial-gradient(72% 38% at 30% 40%, color-mix(in srgb, var(--color-copper) 30%, transparent) 0%, transparent 70%);
  }

  /* «Руки и огонь»: кадры во всю ширину, латунный номер полунадвигом на фото,
     чётные шаги — номер справа (асимметрия); «Огонь» — портретный кадр */
  .fire__frames { gap: 3.1rem; margin-top: 2.4rem; }
  .fire__frame { gap: 0; }
  .fire .ph--frame { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; }
  .fire__frame:nth-child(3) .ph--frame { aspect-ratio: 3 / 4; }
  .fire__num {
    position: relative; margin: -0.62em 0 0.55rem; font-size: 3.4rem;
    text-shadow: 0 1px 18px color-mix(in srgb, var(--color-graphite) 60%, transparent);
  }
  .fire__frame:nth-child(even) .fire__num { text-align: right; }
  .fire__caption h3 { font-size: 1.55rem; margin-bottom: 0.45rem; }
  .fire__caption p { font-size: 0.97rem; }
  .fire__foot { margin-top: 2.6rem; }

  /* Меню: хиты — плотный типографский прейскурант, рамки уходят */
  .hits {
    grid-template-columns: 1fr; gap: 0; margin-bottom: 2rem;
    border-top: 1px solid color-mix(in srgb, var(--color-border-warm) 55%, transparent);
  }
  .hit {
    border: 0; border-radius: 0; padding: 0.95rem 0 0.9rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border-warm) 55%, transparent);
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "badge badge" "name meta" "desc desc";
    align-items: baseline; gap: 0.2rem 1rem;
  }
  .hit__badge { position: static; grid-area: badge; justify-self: start; margin-bottom: 0.25rem; }
  .hit__name { grid-area: name; font-size: 1.3rem; }
  .hit__meta { grid-area: meta; }
  .hit__desc { grid-area: desc; }
  .menu__cta { margin-top: 2.2rem; }
  .menu__cta .btn { width: 100%; text-align: center; }

  /* Крупные фото секций — тоже от кромки до кромки */
  .ph--lunch, .ph--bar, .ph--map { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; }
  .ph--map { aspect-ratio: 4 / 3; min-height: 0; }
  .lunch__text .btn { width: 100%; text-align: center; }
  .events__body .btn { width: 100%; text-align: center; }

  /* Контакты: служебные строки столбиком, без висячих разделителей */
  .contacts__meta { display: block; }
  .contacts__meta li { padding: 0.12rem 0; }
  .contacts__meta li:not(:last-child)::after { content: none; }
  .contacts__phone { font-size: clamp(1.8rem, 8vw, 2.1rem); }
}

/* Совсем узкие корпуса: шапке хватает места без переноса */
@media (max-width: 350px) {
  .topbar .wordmark__sub { display: none; }
  .topbar__cta { font-size: 0.8rem; padding-inline: 0.8rem; }
}

/* Шторка брони приезжает снизу — то же единственное появление, чуть длиннее путь */
@media (prefers-reduced-motion: no-preference) and (max-width: 560px) {
  @starting-style {
    .book[open] { translate: 0 3rem; }
  }
}