/* ===== Зерно · сквозные хедер и футер =====
   Макеты: Header 63:257, Footer 171:595.
   Подключение на любой странице:
     <link rel="stylesheet" href="assets/chrome.css">
     <script src="assets/chrome.js" defer></script>
   Разметку вставляет chrome.js — в HTML страницы ничего писать не нужно.

   Токены берутся со страницы; значения в var(...) вторым аргументом — фолбэк,
   чтобы компоненты не разъезжались на странице без :root-токенов. */

/* ===== ХЕДЕР ===== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:linear-gradient(180deg, var(--sand-50, #FDFAF1) 0%, #FFFFFF 100%);
  border-bottom:1px solid var(--sand-300, #E4D8BD);
  /* 16 + 56 логотип + 16 + 1 обводка = 89px — на 1px больше макета (там обводка INSIDE,
     входит в те же 88px). Срезаем 1px с нижнего паддинга, чтобы высота осталась 88px:
     от неё зависит .sk-pin в блоке кухни */
  padding:16px 0 15px;
}
/* режим главной: хедер выезжает сверху после первого экрана */
.site-header--reveal{
  transform:translateY(-100%);
  transition:transform .45s cubic-bezier(.22,.61,.21,1);
}
.site-header--reveal.show{ transform:none }
/* внутренние страницы: «родная» шапка вверху страницы — absolute вместо fixed,
   поэтому уезжает вместе с контентом; место под ней держит паддинг самой страницы.
   Стики-двойник (z-index 100) при выезде накрывает её без мерцания на стыке. */
.site-header--flow{ position:absolute; z-index:99 }

/* ===== ПРОГРЕСС ПРОКРУТКИ (макет 187:441) =====
   Самостоятельный элемент, а не часть шапки: висит поверх неё и живёт своей жизнью —
   появляется с началом прокрутки независимо от того, выехала шапка или нет.
   Заполняем через scaleX, а не width: transform не заставляет пересчитывать раскладку. */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; z-index:101; /* шапка — 100, полоса всегда над ней */
  height:4px;
  background:var(--gold-100, #FAEACF); overflow:clip;
  opacity:0; transition:opacity .25s ease;
  pointer-events:none; /* 4px поверх шапки не должны перехватывать клики по логотипу */
}
.scroll-progress.show{ opacity:1 }
.scroll-progress i{
  display:block; height:100%;
  background:var(--gold-500, #CB9C3F);
  transform:scaleX(0); transform-origin:left center; will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  .scroll-progress{ transition:none }
}

.hd__in{
  width:var(--cw, min(100vw - 320px, 1600px)); margin-inline:auto;
  display:flex; align-items:center; gap:32px;
}
/* Меню строго по центру контейнера (макет 63:257). Приём тот же, что в макете: боковые
   блоки равны по ширине, и меню оказывается ровно посередине. В Figma это сделано фиксированной
   шириной 234px у header-contacts (примерно как знак); в CSS берём flex:1 1 0 — обе стороны получают
   поровну независимо от длины номера, поэтому центр не съедет, если телефон когда-нибудь изменится */
.hd__brand{ flex:1 1 0 }   /* колонка «знак + подпись»; flex:1 — тот самый приём центровки меню */
.hd__logo{ display:block; line-height:0 }
.hd__logo img{ width:269px; height:48px; display:block }

.hd__nav{ display:flex; align-items:center; gap:32px; flex:none }
.hd__right{ display:flex; align-items:center; gap:32px; flex:1 1 0; justify-content:flex-end }
/* макет 63:257: меню и телефон набраны Body/Base Medium 18/160 — без капса и разрядки,
   какими они были раньше (UI/Label 16). Medium = 500, чуть плотнее обычного текста */
.hd__nav a, .hd__nav span,
.hd__right a, .hd__right span{
  font:500 18px/1.6 var(--font-body, 'Onest', system-ui, sans-serif);
  color:var(--text-primary, #474134);
  white-space:nowrap; text-decoration:none;
}
/* Наведение — пункт становится золотым (стиль Link/Default). Именно gold/700:
   он и читается на фоне шапки (5.3:1), и заметно отличается от текста (1.8:1).
   Более тёмные золотые формально контрастнее к фону, но сливаются с текстом — проверено */
/* Ссылки подсвечиваются только под курсором: пункт текущей страницы в макете ничем не
   выделен, поэтому aria-current остался лишь подсказкой скринридеру, без оформления. */
.hd__nav a:hover, .hd__right a:hover{ color:var(--link-default, #896100) }
.hd__nav a:focus-visible, .hd__right a:focus-visible, .hd__logo:focus-visible{
  outline:2px solid var(--gold-600, #A97C19); outline-offset:4px; border-radius:2px;
}

/* ===== ПОДПИСЬ ПОД ЗНАКОМ (макеты 456:1932 шапка, 430:1451 футер) =====
   Юридическое требование: знак «Зерно» не используется без подписи. Типографика вне шкалы
   проекта (8px), поэтому размеры заданы вручную. Геометрия: ширина 159 и сдвиг 69 ставят
   строку ровно под словом «ЗЕРНО» (колос занимает первые 30.4% знака шириной 228),
   а -12px у знака поднимают её в пустое поле под словом.
   Подпись временно скрыта (правка 27.08.2026): пока текстовая часть логотипа не может
   называться «Зерно» (название не запатентовано), знак идёт временно без строки под ним —
   заказчик убрал её и в самом макете. Разметку не удаляем: вернуть подпись значит убрать
   display:none ниже и восстановить отрицательный отступ у знака. */
.hd__brand, .ft__brand{ display:flex; flex-direction:column; align-items:flex-start }
.hd__tagline, .ft__tagline{
  display:none;
  width:159px; margin-left:69px; text-align:center; white-space:nowrap;
  font:400 8px/1.52 var(--font-body, 'Onest', system-ui, sans-serif);
  letter-spacing:.1em; text-transform:uppercase;
}
.hd__tagline{ color:var(--graphite-600, #5F5A52) }        /* Text/Secondary — на светлой шапке */
.ft__tagline{ color:var(--text-secondary-dark, #BDB194) } /* Text/Secondary (on dark) — в футере */

/* ===== ХЕДЕР · вариант 2 (макет 430:1292) =====
   На второй главной шапки две: «2 (on dark)» лежит на видео первого экрана и уезжает
   вместе с ним, «2» — стики, выезжает сверху, когда первый экран прокручен. Разметку
   обеих вставляет chrome.js в режиме data-header="v2". */

/* Стики-шапка: механика та же (.site-header--reveal), отличается раскладкой — логотип,
   меню и контакты разнесены по краям, поля 32px вместо сетки контейнера */
.site-header--v2 .hd__in{ width:auto; margin-inline:32px; justify-content:space-between }
.site-header--v2 .hd__brand, .site-header--v2 .hd__right{ flex:none }

/* Кнопка брони — Button M 44 из макета (компонент 47:86). Она компактнее кнопок страницы
   (те L 56), поэтому описана здесь, а не общим классом .btn */
.hd__btn{
  display:inline-flex; align-items:center; flex:none; height:44px; padding:0 24px;
  border:0; border-radius:8px; corner-shape:squircle; cursor:pointer;
  /* Цвета те же, что у Primary L (компонент 47:86). Раньше M начинался на ступень
     темнее — gold-700/800/900; в Figma это выровняли, здесь догоняем */
  background:var(--gold-600, #A97C19); color:var(--button-primary-label, #FFFFFF);
  font:600 16px/1.1 var(--font-body, 'Onest', system-ui, sans-serif);
  letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  transition:background .2s ease;
}
.hd__btn:hover{ background:var(--gold-700, #896100) }
.hd__btn:active{ background:var(--gold-800, #674800) }
.hd__btn:focus-visible{ outline:2px solid var(--gold-600, #A97C19); outline-offset:3px }

/* Шапка первого экрана: прозрачная, поверх видео. Не fixed и не sticky — обычный элемент
   в потоке страницы, поэтому просто уезжает вверх вместе с первым экраном */
.hero-header{
  position:absolute; top:0; left:0; right:0; z-index:90;
  display:flex; align-items:center; gap:64px; /* макет 430:1358: боковых полей нет, между группами 64 */
  padding:24px 0;
}
/* Знак посередине, по бокам две равные группы — меню и контакты. Содержимое каждой
   группы стоит по центру своей половины, поэтому знак остаётся строго в центре страницы. */
.hero-header__nav{ flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:32px }
.hero-header__brand{
  flex:none; display:flex; flex-direction:column; align-items:center; gap:12px;
  text-decoration:none;
}
.hero-header__contacts{ flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:32px }
/* На первом экране знак теперь без надписи — один колос 72×90 (макет 430:1360):
   название пока не может стоять в знаке, см. комментарий к подписи выше */
.hero-header__logo--vert{ width:72px; height:90px; display:block }
/* горизонтальный знак лежит в разметке рядом и включается с 1024 (см. секцию адаптива) */
.hero-header__logo--hor{ display:none }
/* та же обязательная подпись, но под вертикальным знаком — крупнее и по центру (макет 430:1656).
   Временно скрыта той же правкой 27.08.2026, что и hd__tagline/ft__tagline — у hero-header__brand
   между знаком и подписью стоит gap:12px, для display:none он сам схлопывается без доп. правок. */
.hero-header__tagline{
  display:none;
  font:400 10px/1.52 var(--font-body, 'Onest', system-ui, sans-serif);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-secondary-dark, #BDB194); white-space:nowrap;
}
/* Меню и контакты набраны одним цветом — Text/Primary (on dark), в том числе текущая
   страница: в макете она ничем не выделена. aria-current в разметке остаётся — это
   подсказка скринридеру, а не оформление. */
.hero-header__nav a{
  font:500 18px/1.6 var(--font-body, 'Onest', system-ui, sans-serif);
  color:var(--text-inverse, #F9F3E4); text-decoration:none; white-space:nowrap;
}
/* на тёмном наведение светлеет до Link/Hover (on dark) — то же правило, что и в футере */
.hero-header__nav a:hover{ color:var(--link-hover-dark, #E2BF7E) }
.hero-header__contacts a, .hero-header__contacts span{
  font:500 18px/1.6 var(--font-body, 'Onest', system-ui, sans-serif);
  color:var(--text-inverse, #F9F3E4); text-decoration:none; white-space:nowrap;
}
.hero-header__contacts a:hover{ color:var(--link-hover-dark, #E2BF7E) }
.hero-header a:focus-visible{
  outline:2px solid var(--gold-400, #D3A856); outline-offset:4px; border-radius:2px;
}

/* ===== ВЫПАДАЮЩИЙ СПИСОК В МЕНЮ (макет Dropdown 613:886) =====
   «События» раскрываются по наведению: карточка 224px, строки по 52 с полем 20 (Dropdown option).
   Между пунктом и карточкой 12px, и этот зазор перекрывает прозрачный мостик ::after —
   иначе курсор по дороге вниз теряет наведение и список успевает закрыться.
   Раскрытие висит и на :focus-within (клавиатура), и на классе .is-open (тач, где ховера нет). */
.nav-sub{ position:relative; display:inline-flex }
.nav-sub::after{ content:''; position:absolute; top:100%; left:0; right:0; height:12px }
.nav-sub__list{
  position:absolute; top:calc(100% + 12px); left:0; z-index:10;
  /* Ширина по содержимому, как в макете (613:886 обхватывает пункты): раньше здесь
     стояли фиксированные 224px под «Афишу мероприятий», после сокращения до «Афиши»
     карточка была бы вдвое шире своих строк */
  width:max-content; padding:8px 0; display:flex; flex-direction:column;
  background:var(--input-bg, #FFFFFF);
  border-radius:8px; corner-shape:squircle;
  /* обводка внутренней тенью, а не border: в макете рамка не добавляет высоты,
     и карточка ровно 120 (8 + 52 + 52 + 8), а не 122 */
  box-shadow:0 8px 24px rgba(28,26,18,.14), inset 0 0 0 1px var(--input-border, #D3C6A9);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-sub:hover .nav-sub__list,
.nav-sub:focus-within .nav-sub__list,
.nav-sub.is-open .nav-sub__list{ opacity:1; visibility:visible; transform:none }
/* Строки набраны Body/Base обычного начертания, не Medium как сам пункт меню.
   Оба селектора нужны, чтобы перебить цвет ссылок в шапке на тёмном — там текст светлый. */
.hd__nav .nav-sub__list a, .hero-header__nav .nav-sub__list a{
  display:flex; align-items:center; height:52px; padding:0 20px;
  font:400 18px/1.6 var(--font-body, 'Onest', system-ui, sans-serif);
  color:var(--text-primary, #474134); text-decoration:none; white-space:nowrap;
  transition:background-color .15s ease;
}
.hd__nav .nav-sub__list a:hover, .hero-header__nav .nav-sub__list a:hover{
  background:var(--surface-hover, #F0E6CE); color:var(--text-primary, #474134);
}
@media (prefers-reduced-motion: reduce){
  .nav-sub__list{ transition:none }
}

/* ===== ЗНАК ЗАКАЗЧИКА (макеты 744:2929 шапка, 744:3174 футер) =====
   Второй вариант знака: включается атрибутом data-brand="client" на <html>, его ставит
   chrome.js по своей константе BRAND. Размеры вынесены сюда, потому что у знака заказчика
   совсем другие пропорции: в стики-шапке горизонтальный знак «колос + Музей зерна»
   171×41, на первом экране — один колос 72×90 (обе шапки: макет 744:2929),
   а в футере — вертикальный знак с надписью 132×148.
   Правила нашего варианта выше не тронуты — переключение возвращает его целиком. */
[data-brand="client"] .hd__logo img{ width:171px; height:41px }
/* на первом экране размер колоса тот же, что у нашего варианта (72×90) — своей строки не нужно */
[data-brand="client"] .ft__logo img{ width:132px; height:148px }
/* Первый экран: знак выше прежнего, поэтому шапке хватает воздуха без лишних полей.
   Только на широких экранах — ниже 1280 у шапки свои поля, и селектор с атрибутом
   перебивал бы их специфичностью, оставляя знак вплотную к краю */
@media (min-width:1280px){
  [data-brand="client"] .hero-header{ padding:24px 0 }
}

/* ===== ФУТЕР ===== */
.site-footer{
  /* тёмный футер (макет 257:383): вертикальный градиент graphite-900 → sand-900 к середине */
  background:linear-gradient(180deg, var(--graphite-900, #1D1911) 0%, var(--sand-900, #3D372A) 50%);
  border-top:2px solid var(--gold-500, #CB9C3F); /* макет 171:595: обводка сверху 2px, gold-500 */
}
.ft__in{
  width:var(--cw, min(100vw - 320px, 1600px)); margin-inline:auto;
  display:flex; align-items:flex-start; justify-content:space-between; gap:48px;
  padding:32px 0 48px;
}
.ft__brand{ flex:none }
.ft__logo{ display:block; line-height:0 }
.ft__logo img{ width:269px; height:48px; display:block } /* тот же размер, что в шапке */

.ft__col{
  flex:none; display:flex; flex-direction:column; gap:8px;
  /* 12px ставит первые строки колонок на базовую линию слова «ЗЕРНО» (макет 171:595) */
  padding-top:12px;
}
.ft__col a, .ft__col span{
  font:500 18px/1.6 var(--font-body, 'Onest', system-ui, sans-serif); /* макет 171:595: Body/Base Medium 18/160 */
  color:var(--text-inverse, #F9F3E4); /* Text/Primary (on dark) */
  white-space:nowrap; text-decoration:none;
}
/* правая колонка (политика, копирайт, разработчик) — Text/Secondary (on dark).
   Контраст 5.6:1 на светлом конце градиента футера — проходит AA для основного текста */
.ft__col--secondary a, .ft__col--secondary span{ color:var(--text-secondary-dark, #BDB194) }
/* Здесь самые длинные строки футера («Политика обработки персональных данных»), а колонки
   стоят в nowrap и flex:none — вчетвером они переставали помещаться уже на 1280 и растягивали
   страницу вбок. Поэтому ряд переносится: колонка не сжимается, и как только перестаёт
   помещаться — целиком уходит под остальные, где встаёт в одну строку. Порог получается сам,
   привязывать его к брейкпоинту не нужно.
   Растягивать колонку на остаток строки нельзя: она съедала бы всё свободное место, и
   четыре колонки сбивались бы влево вместо того, чтобы разойтись по ширине футера.
   max-width — страховка для очень узкого футера: там строки переносятся по словам. */
.ft__in{ flex-wrap:wrap }
.ft__col--secondary{ max-width:100%; min-width:0 }
.ft__col--secondary a, .ft__col--secondary span{ white-space:normal }
/* Наведение на тёмном — стиль Link/Hover (on dark), gold/300. Не gold/highlight:
   тот стоит на тоне 48°, тогда как вся золотая шкала бренда — 38-41°, и на глаз он
   читается жёлтым, а не золотым. gold/300 втрое насыщеннее песочного цвета ссылки,
   поэтому переход виден, хотя формальный контраст по яркости всего 1.2 */
.ft__col a:hover{ color:var(--link-hover-dark, #E2BF7E) }
.ft__col a:focus-visible, .ft__logo:focus-visible{
  outline:2px solid var(--gold-600, #A97C19); outline-offset:4px; border-radius:2px;
}
/* Время работы в футере временно скрыто: режим музея ещё не утверждён (правка 25.08.2026).
   Разметка на месте — чтобы вернуть строку, достаточно убрать это правило */
.ft__hours{ display:none }
/* Почта скрыта там же и так же (правка 28.08.2026): вернуть — убрать правило */
.ft__email{ display:none }

.ft__soc{ display:flex; gap:8px }   /* макет: шаг 40 при кнопке 32 */
/* Кнопка-иконка соцсети (макет Icon button 352:474). Плашка намеренно тихая:
   золото у нас — цвет главного действия, и на сплошной заливке 32×32 оно перетягивало
   внимание с контактов. Золото включается на наведении — как отклик, а не как фон */
/* Селектор с .ft__col не для красоты: правило .ft__col a выше по специфичности и
   перекрашивало иконку — на наведении она становилась золотой на золотом фоне и пропадала */
.ft__col .ft__soc-btn{
  width:32px; height:32px; flex:none;
  display:grid; place-items:center;
  border-radius:8px; corner-shape:squircle;      /* как у всех кнопок, см. РЕШЕНИЯ.md */
  background:var(--dark-surface-raised, #474134);
  color:var(--button-primary-label, #FFFFFF);    /* иконка наследует через currentColor */
  transition:background .2s ease;
}
/* меняется только фон — иконка остаётся белой в обоих состояниях */
.ft__col .ft__soc-btn:hover{
  background:var(--button-primary-bg, #A97C19);
  color:var(--button-primary-label, #FFFFFF);
}
.ft__soc-btn svg{ width:24px; height:24px; display:block; fill:currentColor }
.ft__soc-btn:focus-visible{
  outline:2px solid var(--gold-400, #D3A856); outline-offset:3px;
}

/* ===== адаптив: макет десктопный, ниже — чтобы ничего не разъезжалось ===== */
/* Шапки варианта 2 свёрстаны на 1920: меню, логотип и контакты занимают там 1360px
   (стики с кнопкой брони — 1587px). На узких экранах убираем правую часть по очереди,
   начиная с адреса: он повторён и в блоке контактов, и в футере. */
@media (max-width:1599px){
  .site-header--v2 .hd__right span{ display:none }
}
@media (max-width:1439px){
  .hero-header__contacts span{ display:none }
}
@media (max-width:1365px){
  .site-header--v2 .hd__right a{ display:none } /* остаётся одна кнопка брони */
}
@media (max-width:1279px){
  .hd__in{ gap:24px }
  .hd__nav, .hd__right{ gap:24px }
  .ft__in{ gap:32px }
  .site-header--v2 .hd__in{ margin-inline:24px }
  .site-header--v2 .hd__right{ display:none }        /* кнопка брони уже не встаёт рядом с меню */
  .site-header--v2 .hd__nav{ margin-inline:auto }    /* без правой части меню держится по центру свободного места */
  .hero-header{ padding:24px 32px; gap:24px }
  .hero-header__nav, .hero-header__contacts{ gap:24px }
}
/* ===== 1024 и ниже: меню целиком уезжает в бургер =====
   Дальше сжимать горизонтальное меню некуда: в стики-шапке знак 228 и пять пунктов
   по 18px требуют 789px, и уже на планшете в портрете меню вылезало за правый край.
   Вместе с меню уходят и контакты — они есть в панели, в блоке контактов и в футере. */
@media (max-width:1024px){
  .hd__nav{ display:none }
  .hero-header__nav{ display:none }
  .hero-header__contacts{ display:none }
  .hd__right{ display:none }

  /* Знак первого экрана — горизонтальный, тот же, что в шапке и футере: вертикальный
     на 100px высоты рассчитан на трёхчастную шапку с меню по бокам, а в однострочной
     «знак слева — кнопка справа» он выглядит колонной посреди пустой строки. */
  .hero-header__logo--vert{ display:none }
  /* Раньше здесь стоял margin-bottom:-12px — он поднимал знак, освобождая место под
     подписью снизу. Подпись временно скрыта (правка 27.08.2026, см. .hero-header__tagline
     выше), поэтому без неё знак просто стоит по центру строки — вернуть подпись значит
     вернуть и этот отступ. */
  .hero-header__logo--hor{ display:block; width:269px; height:48px }
  /* у знака заказчика горизонтальный знак у́же нашего — без своего размера колос
     растягивался на 269×48 и сплющивался */
  [data-brand="client"] .hero-header__logo--hor{ width:171px; height:41px }
  .hero-header__brand{ align-items:flex-start; gap:0 }

  .hero-header{ justify-content:space-between; padding:16px 24px; gap:16px }
  .hero-header__brand{ flex:none }
  .hd__brand{ flex:none }
  .hd__in{ justify-content:space-between }

  .ft__in{ row-gap:40px }   /* правый блок футера здесь уже стоит отдельной строкой */
}
@media (max-width:1023px){
  .ft__in{ flex-wrap:wrap; row-gap:40px }
  .ft__brand{ flex:1 0 100% } /* знак с подписью занимает свою строку целиком */
  .ft__col{ padding-top:0 }
}
@media (max-width:767px){
  /* Справа от знака стоят две кнопки (звонок и бургер) — это 92px плюс зазор, плюс поля
     по 16. При жёсткой ширине знака группа кнопок вылезала за правый край уже на 320.
     Поэтому знак резиновый: занимает остаток строки, но не уже 160 и не шире 224.
     Вычитаем 148 = 92 кнопки + 32 поля + 24 зазор (в стики-шапке он шире, чем в hero). height:auto держит пропорцию файла. */
  .hero-header{ padding:12px 16px }
  .site-header--v2 .hd__in{ margin-inline:16px }
  .hero-header__logo--hor, .hd__logo img{
    width:clamp(160px, calc(100vw - 148px), 224px); height:auto;
  }
  /* Знак заказчика здесь тоже резиновый: пропорции 171×41 те же, что у нашего,
     поэтому отдельный размер не нужен — работает clamp выше */
  .ft__in{ flex-direction:column; row-gap:32px; padding-bottom:40px }
  .ft__col a, .ft__col span{ white-space:normal }
  /* знак здесь не уменьшаем: подпись под ним привязана к его ширине (159 и 69 из макета),
     и при другом размере она перестала бы попадать под слово «ЗЕРНО» */
}
@media (prefers-reduced-motion: reduce){
  .site-header--reveal{ transition:none }
}

/* ===== БУРГЕР И МОБИЛЬНОЕ МЕНЮ =====
   На телефоне ни одна из шапок не вмещает пять пунктов, поэтому меню уходит в панель
   на весь экран. Кнопка стоит в каждой шапке, панель одна на страницу (её разметку
   chrome.js кладёт в конец body — так она не наследует ни цвет, ни слой шапки). */
/* Звонок и меню стоят парой в правом углу шапки; видимостью управляет группа целиком */
.nav-actions{ display:none; align-items:center; gap:4px; flex:none }
/* Иконка — Heroicons outline (phone). Штрих 1.5 живёт в самой разметке, цвет берётся
   от шапки через currentColor: на видео светлый, на кремовой стики-шапке тёмный */
.nav-phone{
  width:44px; height:44px; flex:none;
  display:grid; place-items:center;
  color:var(--text-primary, #474134); transition:color .2s ease;
}
.nav-phone svg{ width:24px; height:24px; display:block }
.nav-phone:hover{ color:var(--link-default, #896100) }
.nav-phone:focus-visible{ outline:2px solid var(--gold-600, #A97C19); outline-offset:2px; border-radius:4px }
.hero-header .nav-phone{ color:var(--text-inverse, #F9F3E4) }
.hero-header .nav-phone:hover{ color:var(--link-hover-dark, #E2BF7E) }

.nav-burger{
  display:grid;           /* показывает или прячет её группа .nav-actions */
  width:44px; height:44px; flex:none; padding:0;
  border:0; background:transparent; cursor:pointer;
  place-content:center; gap:6px; grid-auto-flow:row;
  color:var(--text-primary, #474134);
}
.nav-burger span{
  display:block; width:24px; height:2px; background:currentColor; border-radius:1px;
}
.nav-burger:focus-visible{ outline:2px solid var(--gold-600, #A97C19); outline-offset:2px; border-radius:4px }
/* шапка первого экрана лежит на видео — там полоски светлые, как меню и контакты */
.hero-header .nav-burger{ color:var(--text-inverse, #F9F3E4) }

.mnav{
  position:fixed; inset:0; z-index:250;   /* выше информера (200) и шапки (100), ниже окна брони (300) */
  background:rgba(29,25,17,.4);
  opacity:0; transition:opacity .3s cubic-bezier(.22,.61,.21,1);
}
.mnav.is-open{ opacity:1 }
.mnav__sheet{
  position:absolute; inset:0;
  display:flex; flex-direction:column; gap:32px;
  padding:24px 16px 32px;
  background:var(--surface-page, #FDFAF1);
  overflow-y:auto; overscroll-behavior:contain;  /* длинный список листается сам, страница под ним стоит */
  transform:translateY(-16px); transition:transform .3s cubic-bezier(.22,.61,.21,1);
}
.mnav.is-open .mnav__sheet{ transform:none }
.mnav__close{
  align-self:flex-end; flex:none;
  width:44px; height:44px; padding:0; border:0; background:transparent; cursor:pointer;
  display:grid; place-items:center;
  color:var(--text-primary, #474134); transition:color .2s ease;
}
/* 24px, как у бургера и телефона: крестик встаёт на место кнопки меню, и при разной
   величине глифа подмена читалась бы как скачок */
.mnav__close svg{ width:24px; height:24px; display:block; fill:currentColor }
.mnav__close:hover{ color:var(--link-default, #896100) }
.mnav__close:focus-visible{ outline:2px solid var(--gold-600, #A97C19); outline-offset:2px; border-radius:4px }

.mnav__list{ display:flex; flex-direction:column }
.mnav__list a{
  /* 56px в строке — палец попадает без прицеливания; разделители те же, что у шапки */
  display:flex; align-items:center; min-height:56px; padding:8px 8px;
  font:500 22px/1.3 var(--font-body, 'Onest', system-ui, sans-serif);
  color:var(--text-primary, #474134); text-decoration:none;
  border-bottom:1px solid var(--sand-300, #E4D8BD);
}
.mnav__list a:last-child{ border-bottom:0 }
.mnav__list a:active{ color:var(--link-default, #896100) }
.mnav__list a:focus-visible{ outline:2px solid var(--gold-600, #A97C19); outline-offset:-2px }

.mnav__contacts{ display:flex; flex-direction:column; gap:8px; margin-top:auto }
.mnav__contacts a, .mnav__contacts span{
  font:500 18px/1.6 var(--font-body, 'Onest', system-ui, sans-serif);
  color:var(--text-primary, #474134); text-decoration:none;
}
.mnav__contacts span{ color:var(--graphite-600, #5F5A52) }

/* кнопка брони — Button L Primary, но во всю ширину панели */
.mnav__btn{
  flex:none; width:100%; height:56px; padding:0 24px;
  border:0; border-radius:8px; corner-shape:squircle; cursor:pointer;
  background:var(--gold-600, #A97C19); color:var(--button-primary-label, #FFFFFF);
  font:600 18px/1.1 var(--font-body, 'Onest', system-ui, sans-serif);
  letter-spacing:.06em; text-transform:uppercase;
  transition:background .2s ease;
}
.mnav__btn:active{ background:var(--gold-800, #674800) }
.mnav__btn:focus-visible{ outline:2px solid var(--gold-600, #A97C19); outline-offset:3px }

@media (prefers-reduced-motion: reduce){
  .mnav, .mnav__sheet{ transition:none }
  .mnav__sheet{ transform:none }
}

/* Группа появляется ровно там, где из шапок исчезают пункты меню и контакты.
   Правило стоит в конце файла намеренно: выше объявлен .nav-actions{display:none},
   и при равной специфичности выигрывает последнее. */
@media (max-width:1024px){
  .nav-actions{ display:flex }
}