/* ============================================================
   ЛАЗЕЙКА / рюмочная
   Токены и стили по брендбуку «Лазейка - Глобальный проект», goodburo 2024.
   Одна тема на страницу: светлая кремовая основа, красный как акцент,
   в тёмной схеме те же роли инвертированы. Радиус скругления: 0 везде.
   ============================================================ */

/* ---------- 1. Шрифты ---------- */
@font-face {
  font-family: "Pobeda";
  src: url("../fonts/pobeda-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vela Sans";
  src: url("../fonts/vela-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vela Sans";
  src: url("../fonts/vela-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vela Sans";
  src: url("../fonts/vela-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Токены ---------- */
:root {
  /* Палитра брендбука */
  --paper:      #FFE4CD;   /* основной цвет */
  --paper-2:    #FFD2AB;   /* доп основной */
  --tan:        #ED9F5A;   /* доп основной 2 */
  --red:        #DA1114;   /* акцентный */
  --red-deep:   #CA0C0F;   /* доп акцентный */
  --ink:        #2B2824;   /* текст web */

  /* Роли */
  --bg:         var(--paper);
  --bg-2:       var(--paper-2);
  --fg:         var(--ink);
  /* Проценты подобраны так, чтобы даже самый тихий текст держал
     контраст 4.5 на обоих фонах раздела. Ниже этого его переставали
     различать на солнце и на плохих экранах. */
  --fg-soft:    color-mix(in srgb, var(--ink) 78%, transparent);
  --fg-faint:   color-mix(in srgb, var(--ink) 70%, transparent);
  --accent:     var(--red);        /* заливки и крупный дисплейный текст */
  /* Мелкий акцентный текст чуть темнее фирменного красного: на
     приглушённом фоне сам --red-deep давал 4.22 и не дотягивал
     до порога. Плашки и заливки при этом остаются прежними. */
  --accent-txt: #BE0B0E;
  --accent-head: var(--red);   /* на светлом фоне хватает фирменного */
  --on-accent:  #FFF3E8;           /* текст поверх красного, AA */
  --line:       color-mix(in srgb, var(--ink) 18%, transparent);
  --line-soft:  color-mix(in srgb, var(--ink) 10%, transparent);
  --field:      #FFF3E8;
  --shadow:     0 18px 48px -24px color-mix(in srgb, var(--ink) 45%, transparent);

  /* Логотип всегда в версии для светлого фона: красный знак, песочный
     дескриптор. Цвета взяты из файла «Лого светлый фон» брендкита и
     намеренно не переопределяются в тёмной схеме. */
  --logo-word:  #DA1114;
  --logo-desc:  #EB954A;

  /* Ритм */
  --shell:      1360px;
  --gut:        clamp(20px, 5vw, 64px);
  --sec:        clamp(72px, 11vw, 152px);
  --nav-h:      68px;

  /* Типографика */
  --font-display: "Pobeda", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Vela Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light dark;
}

/* Тёмная схема: те же роли, инвертированные значения.
   Красный на тёмном не добирает 4.5:1 в мелком тексте, поэтому
   мелкий акцентный текст уходит в песочный, а красный остаётся заливкой. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         #1E1A17;
    --bg-2:       #2B2824;
    --fg:         #FFE4CD;
    --fg-soft:    color-mix(in srgb, #FFE4CD 80%, transparent);
    --fg-faint:   color-mix(in srgb, #FFE4CD 58%, transparent);
    --accent:     #DA1114;
    --accent-txt: #ED9F5A;
  --accent-head: #EE4245;   /* крупные заголовки на тёмном */
    --on-accent:  #FFF3E8;
    --line:       color-mix(in srgb, #FFE4CD 20%, transparent);
    --line-soft:  color-mix(in srgb, #FFE4CD 11%, transparent);
    --field:      #2B2824;
    --shadow:     0 18px 48px -24px #000;
  }
}
:root[data-theme="dark"] {
  --bg:         #1E1A17;
  --bg-2:       #2B2824;
  --fg:         #FFE4CD;
  --fg-soft:    color-mix(in srgb, #FFE4CD 80%, transparent);
  --fg-faint:   color-mix(in srgb, #FFE4CD 58%, transparent);
  --accent:     #DA1114;
  --accent-txt: #ED9F5A;
  --accent-head: #EE4245;   /* крупные заголовки на тёмном */
  --on-accent:  #FFF3E8;
  --line:       color-mix(in srgb, #FFE4CD 20%, transparent);
  --line-soft:  color-mix(in srgb, #FFE4CD 11%, transparent);
  --field:      #2B2824;
  --shadow:     0 18px 48px -24px #000;
}

/* ---------- 3. База ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Атрибут hidden должен побеждать всегда. Браузер прячет им элементы
   правилом нулевой силы, и любое наше display у того же элемента его
   отменяет: так однажды обе страницы меню показались разом, а стрелки
   просмотра не убрались при единственном кадре. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--accent-txt);
  outline-offset: 3px;
}
.manifest :focus-visible,
.union :focus-visible { outline-color: #FFF3E8; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Ссылка «к меню» для клавиатуры: прячется, пока не получит фокус. */
.skip:focus-visible {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 60;
  width: auto; height: auto;
  margin: 0; padding: 0 22px;
  overflow: visible;
  clip-path: none;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ic {
  width: 1em; height: 1em; flex: none;
  fill: currentColor;
}

/* ---------- 4. Типографика ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.02em;
  hyphens: none;
}

.s-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(30px, 5.2vw, 62px);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--accent-head);
  max-width: 18ch;
}

.s-lead {
  margin-top: 20px;
  max-width: 56ch;
  font-size: clamp(16px, 1.35vw, 19px);
  color: var(--fg-soft);
}

.section { padding-block: var(--sec); }

/* ---------- Логотип ----------
   Знак и дескриптор вырезаны из фирменного лока в два файла с общим
   viewBox, поэтому при наложении встают ровно как в оригинале.
   Подключены масками, чтобы каждая часть красилась своей переменной темы
   и логотип не приходилось дублировать двумя картинками. */
.logo__mark,
.logo__descriptor {
  display: block;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Компактный знак для шапки: дескриптор в таком размере всё равно нечитаем. */
.logo__mark {
  width: 108px;
  aspect-ratio: 1803 / 436;
  background-color: var(--logo-word);
  -webkit-mask-image: url("../img/logo-wordmark.svg");
  mask-image: url("../img/logo-wordmark.svg");
  -webkit-mask-position: left center;
  mask-position: left center;
}

/* Полный лок: две части в общей системе координат, одна поверх другой. */
.logo--full {
  position: relative;
  aspect-ratio: 1803 / 907;
}
.logo--full .logo__mark,
.logo--full .logo__descriptor {
  position: absolute;
  inset: 0;
  width: 100%;
  aspect-ratio: auto;
  -webkit-mask-position: center;
  mask-position: center;
}
.logo--full .logo__mark {
  -webkit-mask-image: url("../img/logo-word.svg");
  mask-image: url("../img/logo-word.svg");
}
.logo__descriptor {
  background-color: var(--logo-desc);
  -webkit-mask-image: url("../img/logo-desc.svg");
  mask-image: url("../img/logo-desc.svg");
}

/* Если браузер не умеет маски, знак не исчезает: показываем название текстом. */
@supports not (mask-image: url("#a")) {
  .logo__mark, .logo__descriptor { display: none; }
  .logo-fallback { display: block; }
}
.nav__fallback { font-size: 24px; }

.logo-fallback {
  display: none;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--logo-word);
}

/* Переключатель светлой и тёмной схемы. */
.theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  order: 3;
  margin-inline-start: 14px;
  border: 2px solid var(--line);
  background: transparent;
  font-size: 20px;
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease),
              color 0.25s var(--ease);
}
.theme:hover { border-color: var(--fg); background: var(--bg-2); }
.theme:active { transform: translateY(1px); }
.theme .ic--moon { display: none; }
.theme[aria-pressed="true"] .ic--sun { display: none; }
.theme[aria-pressed="true"] .ic--moon { display: block; }

/* Поля, которые бару нужно заполнить своими данными. */
.todo {
  border-bottom: 2px dashed var(--accent-txt);
  color: var(--accent-txt);
}

/* ---------- 5. Кнопки ---------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  --btn-bd: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 2px solid var(--btn-bd);
  border-radius: 0;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: clamp(14px, 1.05vw, 17px);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.12s var(--ease);
}
.btn .ic { font-size: 1.15em; }
.btn:hover { --btn-bg: var(--red-deep); --btn-bd: var(--red-deep); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-bd: var(--fg);
}
.btn--ghost:hover { --btn-bg: var(--fg); --btn-fg: var(--bg); --btn-bd: var(--fg); }

.btn--on-red {
  --btn-bg: var(--on-accent);
  --btn-fg: var(--red-deep);
  --btn-bd: var(--on-accent);
}
/* Раньше фон становился прозрачным, и кнопка исчезала в красном разделе.
   Теперь уходит в тёмный: контраст с красным очевиден в обеих схемах. */
.btn--on-red:hover {
  --btn-bg: var(--ink);
  --btn-fg: var(--on-accent);
  --btn-bd: var(--ink);
}

.btn--wide { width: 100%; }

/* ---------- 6. Шапка ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--line-soft);
}
@supports not (backdrop-filter: blur(2px)) { .nav { background: var(--bg); } }

.nav__row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.nav__brand {
  display: flex;
  align-items: center;
  order: 1;
  flex: none;
  text-decoration: none;
}

.nav__links {
  display: flex;
  align-items: center;
  order: 2;
  gap: clamp(14px, 2vw, 30px);
  margin-inline-start: auto;
  font-size: 15px;
}
.nav__link {
  position: relative;
  padding-block: 6px;
  text-decoration: none;
  color: var(--fg-soft);
  transition: color 0.2s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover { color: var(--fg); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__cta { min-height: 40px; padding-inline: 18px; letter-spacing: 0.07em; }

.nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  order: 4;
  width: 44px; height: 44px;
  margin-inline-start: 10px;
  border: 2px solid var(--fg);
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}
.nav__burger .ic--close { display: none; }
.nav__burger[aria-expanded="true"] .ic--open { display: none; }
.nav__burger[aria-expanded="true"] .ic--close { display: block; }

@media (max-width: 900px) {
  .nav__burger { display: inline-flex; }
  .theme { margin-inline-start: auto; }
  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px var(--gut) 26px;
    background: var(--bg);
    border-bottom: 2px solid var(--accent);
    font-size: 19px;
  }
  .nav__links[hidden] { display: none; }
  .nav__link { padding-block: 15px; border-bottom: 1px solid var(--line-soft); }
  .nav__link::after { display: none; }
  .nav__cta { margin-top: 20px; min-height: 52px; }
}

/* ---------- 7. Первый экран ---------- */
.hero {
  position: relative;
  min-height: calc(100dvh - var(--nav-h));
  display: grid;
  align-items: center;
  padding-block: clamp(28px, 4vw, 64px) clamp(32px, 4vw, 72px);
  /* Ширина левой колонки. Логотип и карточка берут её из одного места,
     поэтому их края совпадают: буква «А» в логотипе заканчивается ровно
     там же, где ссылки на карты и время работы. Ограничение по высоте
     окна нужно, чтобы на низком экране логотип не съедал место. */
  --hero-w: min(100%, clamp(280px, 46vw, 660px), 56vh);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(28px, 5vw, 76px);
  min-height: 0;
}

.hero__logo {
  width: var(--hero-w);
  margin: 0;
}
.hero__logo .logo-fallback { font-size: clamp(54px, 12vw, 150px); line-height: 0.92; }

.hero__figure {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-2);
}
.hero__figure img { width: 100%; height: 100%; object-fit: cover; }
/* На широком, но низком окне портретный кадр не помещается в экран
   целиком. Подрезать его нельзя, поэтому ограничиваем ширину так,
   чтобы высота при пропорции 4:5 укладывалась в остаток экрана.
   На нормальных окнах ограничение не срабатывает: ширину колонки
   оно не превышает. */
@media (min-width: 961px) {
  .hero__figure {
    width: min(100%, calc((100dvh - var(--nav-h) - 120px) * 0.8));
    margin-inline-start: auto;
  }
}

/* Плашка-«вывеска» поверх фото: цитирует световой короб на фасаде. */
.hero__plate {
  position: absolute;
  left: clamp(-18px, -1.6vw, -8px);
  bottom: clamp(20px, 4vw, 46px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: clamp(12px, 1vw, 15px);
  box-shadow: var(--shadow);
}
.hero__plate .ic { font-size: 1.3em; }

/* Лента внизу первого экрана. Разделители те же, что у вкладок меню
   и у страниц: тонкая сетка из линий, без рамок и заливок. */
/* Карточка заведения под логотипом. Без рамок и без вложенных заливок:
   один фон на весь блок, а порядок держит сетка. Слева подпись, дальше
   главное значение, справа то, что к нему прилагается: ссылки на карты,
   время, соцсети. Все три строки выровнены по одной правой границе. */
.card-info {
  margin: clamp(26px, 3vw, 40px) 0 0;
  width: var(--hero-w);
  /* Совсем узкой карточке подписи и значения уже не помещаются рядом,
     поэтому ниже этого она не опускается даже в ущерб выравниванию. */
  min-width: min(100%, 330px);
}
.card-info__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 5px 16px;
  padding-block: clamp(10px, 1.1vw, 15px);
}
.card-info__row:first-child { padding-top: 0; }
.card-info__row:last-child { padding-bottom: 0; }

.card-info dt {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;
  line-height: 2;
  color: var(--fg-faint);
}
.card-info dd { margin: 0; }

/* Главное слева, приложенное справа. */
.card-info__pair {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
}
.card-info__pair--mid { align-items: center; }

/* Адрес. Крупно и Победой: на вывеске он и читается первым. */
.card-info__value {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.15;
}
.card-info__note {
  margin-top: 6px;
  font-size: 16px;
  color: var(--fg-soft);
}

/* Ссылки на карты стоят столбиком у правого края, под одной границей
   со временем работы и знаками соцсетей. */
.card-info__links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin-inline-start: auto;
}
.card-info__links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  color: var(--accent-txt);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
}
.card-info__links a:hover { border-bottom-color: currentColor; }
.card-info__links .ic { font-size: 14px; }

/* Часы. Слева тихая подпись дней, справа само время Победой:
   цифры в ней держат строку и читаются с расстояния.

   Обе строки лежат в одной сетке, а не двумя отдельными абзацами:
   иначе длинная подпись переносила своё время на следующую строку,
   а короткая оставляла рядом, и блок выглядел рассыпавшимся. */
.card-info__hours {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 9px 14px;
}
.card-info__hours span { font-size: 15.5px; color: var(--fg-soft); }
.card-info__hours b {
  justify-self: end;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.card-info__phone {
  font-family: var(--font-display);
  font-size: clamp(21px, 1.9vw, 27px);
  letter-spacing: 0.03em;
  color: var(--accent-txt);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.card-info__phone:hover { border-bottom-color: currentColor; }

/* Соцсети тоже без рамок: на одном фоне квадраты выглядели бы
   заплатками. Остаются только знаки. */
.card-info__social { display: flex; gap: 16px; margin-inline-start: auto; }
.card-info__social a {
  display: grid;
  place-items: center;
  font-size: 24px;
  color: var(--fg-soft);
  transition: color 0.2s var(--ease);
}
.card-info__social a:hover { color: var(--accent-txt); }

/* На телефоне ссылки на карты рядом с адресом не помещаются и уезжают
   на свою строку, повисая в пустоте. Там им место под адресом и по
   левому краю: тогда весь блок «Где» читается одной колонкой. Время
   работы остаётся справа, оно живёт в своей сетке из двух колонок. */
@media (max-width: 700px) {
  /* Колонка подписей уже: на телефоне каждый десяток точек слева
     отбирается у значений справа. */
  .card-info__row {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 4px 12px;
  }
  .card-info__pair { display: block; }
  .card-info__pair--mid { display: flex; }
  /* На телефоне столбик справа висел бы в пустоте, поэтому здесь
     ссылки идут строкой под адресом, по левому краю. */
  .card-info__links {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 18px;
    margin-inline-start: 0;
    margin-top: 10px;
  }
}

/* Совсем узкий экран, вроде айфона с увеличенным дисплеем: колонка
   подписей ужимается, иначе значениям не остаётся места и строки
   рассыпаются на переносы. */
@media (max-width: 400px) {
  .card-info__row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 4px 10px;
  }
  .card-info dt { font-size: 11.5px; letter-spacing: 0.07em; }
  .card-info__phone { font-size: 20px; }
  .card-info__social { gap: 13px; }
  .card-info__social a { font-size: 22px; }
}

/* На узких экранах портретный кадр уходит в горизонтальный,
   иначе он вытягивает первый экран на две прокрутки. */
@media (max-width: 960px) {
  /* Колонка на телефоне одна, логотип и карточка занимают её целиком
     и так же совпадают краями. */
  .hero { min-height: 0; --hero-w: 100%; }
  .hero__grid { grid-template-columns: 1fr; gap: 34px; }
  .hero__figure { aspect-ratio: 4 / 3; }
  .hero__figure img { object-position: center 22%; }

}

/* ---------- 8. Манифест ---------- */
.manifest {
  background: var(--accent);
  color: var(--on-accent);
  position: relative;
  overflow: hidden;
}
/* Фирменный паттерн: крупная скважина, как на обложке брендбука. */
.manifest__mark {
  position: absolute;
  top: -8%;
  right: -5%;
  width: min(38vw, 470px);
  fill: var(--red-deep);
  opacity: 0.55;
  pointer-events: none;
}
.manifest__inner { position: relative; }

.manifest__title { color: var(--on-accent); max-width: 14ch; }
.manifest__lead {
  margin-top: 22px;
  max-width: 48ch;
  font-size: clamp(17px, 1.6vw, 23px);
  line-height: 1.45;
  color: var(--on-accent);
}

/* Четыре тезиса: сетка 4 / 2 / 1, ни одной пустой ячейки в ряду. */
.tenets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(44px, 6vw, 84px);
  border-top: 2px solid color-mix(in srgb, var(--on-accent) 45%, transparent);
}
@media (max-width: 1080px) { .tenets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .tenets { grid-template-columns: 1fr; } }

.tenet {
  padding: 30px clamp(18px, 2.2vw, 32px) 34px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--on-accent) 28%, transparent);
}
.tenet__head {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.15;
}
.tenet__text {
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--on-accent);
}

/* ---------- 9. Меню ---------- */
.menu__head {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(30px, 4vw, 48px);
}

.tabs__bar {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-block: 2px solid var(--fg);
  margin-bottom: clamp(26px, 3vw, 40px);
}
.tabs__bar::-webkit-scrollbar { display: none; }

.tabs__btn {
  flex: none;
  padding: 15px clamp(16px, 2vw, 30px);
  border: 0;
  border-inline-end: 1px solid var(--line);
  background: transparent;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.1vw, 18px);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-soft);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.tabs__btn:last-child { border-inline-end: 0; }
.tabs__btn:hover { color: var(--fg); background: var(--bg-2); }
.tabs__btn[aria-selected="true"] {
  background: var(--accent);
  color: var(--on-accent);
}

.tabs__lead {
  max-width: 52ch;
  margin-bottom: clamp(26px, 3vw, 38px);
  color: var(--fg-soft);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(20px, 2.2vw, 34px) clamp(18px, 2vw, 28px);
}


.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  margin-bottom: 16px;
  overflow: hidden;
  background: var(--bg-2);
}
/* Снимок блюда это кнопка: она открывает просмотр во весь экран.
   Кнопка не должна приносить своих отступов и рамок, всё оформление
   берут на себя обёртка и сама картинка. */
.card__zoom {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.card:hover .card__img { transform: scale(1.045); }

/* Пустой слот: фирменная скважина с буквой позиции.
   Заменяется фотографией, как только файл лежит в assets/img/menu/. */
.card__stub {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--tan) 30%, transparent) 0 2px,
      transparent 2px 11px
    ),
    var(--bg-2);
}
.card__keyhole { width: 42%; height: auto; fill: var(--accent); }
/* Каждая третья заглушка инвертируется, чтобы ряд не читался
   как одна повторяющаяся плитка. */
.card:nth-child(3n + 2) .card__stub {
  background:
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, #000 10%, transparent) 0 2px,
      transparent 2px 11px
    ),
    var(--accent);
}
.card:nth-child(3n + 2) .card__keyhole { fill: var(--on-accent); }

.card__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
}
.card__sostav {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--fg-soft);
}
.card__price {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: 0.04em;
  color: var(--accent-txt);
}
.card__price span { margin-inline-end: 2px; }

/* Страницы раздела меню. Кнопки в один ряд, как вкладки сверху,
   чтобы раздел читался одним целым. */
.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: clamp(26px, 3vw, 38px);
  border: 2px solid var(--fg);
  width: fit-content;
}
.pager__btn {
  min-width: 48px;
  min-height: 48px;
  padding: 10px 14px;
  border: 0;
  border-inline-end: 2px solid var(--fg);
  background: var(--bg);
  color: var(--fg-soft);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.pager__btn:last-child { border-inline-end: 0; }
.pager__btn:hover { color: var(--fg); background: var(--bg-2); }
.pager__btn[aria-current="true"] {
  background: var(--accent);
  color: var(--on-accent);
}

/* Без JS кнопки не работают, поэтому прячем их и показываем все
   страницы подряд. */
.no-js .pager { display: none; }
.no-js .cards[hidden] { display: grid !important; }
.no-js .cards + .cards { margin-top: clamp(20px, 2.2vw, 34px); }

.menu__note {
  margin-top: clamp(44px, 5vw, 62px);
  font-size: 14.5px;
  color: var(--fg-faint);
  max-width: 62ch;
}

/* ---------- 10. Доставка ---------- */
.delivery {
  background: var(--bg-2);
  border-block: 2px solid var(--fg);
}
.delivery__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}
.delivery__title { color: var(--fg); max-width: 16ch; }
.delivery__lead { margin-top: 16px; max-width: 46ch; color: var(--fg-soft); }
.delivery__actions { display: grid; gap: 14px; min-width: min(100%, 320px); }
.delivery__actions .btn { justify-content: space-between; min-height: 62px; }
@media (max-width: 860px) {
  .delivery__grid { grid-template-columns: 1fr; }
}

/* ---------- 12. Мероприятия ---------- */
/* Фоны соседних разделов чередуются, иначе блоки сливаются в одно полотно.
   Порядок на странице: доставка, меню, фото, отзывы. */
/* Фон чередуется через раздел, чтобы соседи не сливались в одну
   полосу. После перестановки Доставка встала перед Фото, поэтому
   светлый фон ушёл сюда, а приглушённый к Отзывам. */
.events { background: var(--bg); overflow: hidden; }
.events__head { margin-bottom: clamp(26px, 3vw, 38px); }

.events__picker { margin-bottom: clamp(24px, 3vw, 36px); }
.events__label {
  display: block;
  margin-bottom: 8px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--fg-faint);
}
/* Ширину задаём здесь, а не на кнопке: проценты внутри кнопки считались бы
   от неё самой. Список берёт ширину отсюда и всегда совпадает с кнопкой. */
.events__wrap {
  position: relative;
  display: block;
  width: fit-content;
  min-width: min(100%, 320px);
  max-width: 100%;
}

.events__select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 56px;
  padding: 12px 18px;
  border: 2px solid var(--fg);
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.4vw, 20px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s var(--ease);
}
.events__select:hover { background: var(--bg-2); }
.events__select .ic {
  flex: none;
  font-size: 20px;
  color: var(--accent-txt);
  transition: transform 0.25s var(--ease);
}
.events__select[aria-expanded="true"] .ic { transform: rotate(180deg); }

/* Список раскрывается поверх ленты, поэтому лежит выше неё по слоям. */
.events__list {
  position: absolute;
  z-index: 20;
  top: calc(100% - 2px);
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 2px solid var(--fg);
  background: var(--bg);
  box-shadow: var(--shadow);
  max-height: min(60vh, 420px);
  overflow-y: auto;
}
.events__list[hidden] { display: none; }

.events__option {
  padding: 13px 18px;
  user-select: none;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.3vw, 18px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg);
  cursor: pointer;
}
.events__option + .events__option { border-top: 1px solid var(--line-soft); }
.events__option:hover,
.events__option.is-active { background: var(--bg-2); }
.events__option[aria-selected="true"] {
  background: var(--accent);
  color: var(--on-accent);
}

.event[hidden] { display: none; }

.event + .event { margin-top: clamp(44px, 5vw, 76px); }

.event__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.event__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: clamp(19px, 2.2vw, 30px);
  line-height: 1.05;
  color: var(--fg);
}
.event__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 8px;
  font-size: 14px;
  color: var(--fg-faint);
}

.event__arrows { display: flex; gap: 8px; flex: none; }
.event__arrow {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 2px solid var(--line);
  background: transparent;
  font-size: 20px;
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease),
              color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.event__arrow:hover { border-color: var(--fg); background: var(--bg); }
.event__arrow:active { transform: translateY(1px); }
.event__arrow[disabled] { opacity: 0.3; pointer-events: none; }
/* На тач-экранах ленту листают пальцем, стрелки только занимают место. */
@media (hover: none) { .event__arrows { display: none; } }

/* Лента упирается в край экрана: так видно, что она продолжается. */
.event__strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-inline: var(--gut);
  /* Без этого прилипание отсчитывается от края ленты и на старте
     съедает отступ: первый кадр уезжает под край экрана. */
  scroll-padding-inline: var(--gut);
  padding-bottom: 18px;
  overscroll-behavior-x: contain;
  /* Полоса прокрутки под лентой тоже часть оформления: системную серую
     заменяем на фирменную, без скруглений, как всё остальное на сайте. */
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--strip-track);
}
.event__strip::-webkit-scrollbar { height: 8px; }
.event__strip::-webkit-scrollbar-track {
  background: var(--strip-track);
}
.event__strip::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 0;
}
.event__strip::-webkit-scrollbar-thumb:hover { background: var(--red-deep); }
/* Дорожку задаём отдельным цветом: --line-soft для неё слишком тихий,
   и полоса читалась как красная черта, висящая сама по себе. */
.event__strip { --strip-track: color-mix(in srgb, var(--fg) 18%, transparent); }
.event__item { flex: none; scroll-snap-align: start; }

/* Маячок в хвосте ленты: невидимый, но попадает в поле зрения раньше
   самого конца и этим запускает досоздание следующей порции кадров. */
.event__sentinel { flex: none; width: 1px; align-self: stretch; }

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

.shot {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  cursor: zoom-in;
  overflow: hidden;
}
.shot img {
  width: clamp(180px, 20vw, 264px);
  aspect-ratio: 2 / 3;
  object-fit: cover;
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}
.shot:hover img { transform: scale(1.05); opacity: 0.88; }

.events__empty {
  color: var(--fg-faint);
  max-width: 52ch;
}

/* ---------- 12.1 Просмотр фотографии ---------- */
.lb {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  /* Затемнение вешаем на само окно, а не только на ::backdrop:
     так подложка гарантированно есть во всех браузерах. */
  background: rgb(20 17 15 / 0.95);
  color: #FFF3E8;
  overflow: hidden;
}
.lb::backdrop { background: rgb(20 17 15 / 0.95); }
.lb:not([open]) { display: none; }

/* Колонка из фотографии и подписи: фотография занимает всё,
   что осталось, и вписывается в него целиком. */
.lb__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  height: 100%;
  margin: 0;
  padding: clamp(58px, 8vh, 84px) clamp(12px, 8vw, 92px) 18px;
}
.lb__img {
  flex: 1 1 auto;
  min-height: 0;
  max-width: 100%;
  object-fit: contain;
}
.lb__cap {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  font-size: 14px;
  color: rgb(255 243 232 / 0.72);
}

.lb__btn {
  position: fixed;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border: 2px solid rgb(255 243 232 / 0.4);
  background: rgb(20 17 15 / 0.6);
  color: #FFF3E8;
  font-size: 22px;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lb__btn:hover { background: var(--red); border-color: var(--red); }
.lb__btn[disabled] { opacity: 0.25; pointer-events: none; }
.lb__close { top: 16px; right: 16px; }
.lb__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb__next { right: 16px; top: 50%; transform: translateY(-50%); }
.lb__btn:focus-visible { outline: 3px solid #FFF3E8; outline-offset: 3px; }

@media (max-width: 640px) {
  .lb__prev { left: 12px; }
  .lb__next { right: 12px; }
  .lb__btn { width: 46px; height: 46px; }
}

/* ---------- 12.2 Отзывы ---------- */
.reviews { background: var(--bg-2); }
.reviews__head { margin-bottom: clamp(30px, 4vw, 48px); }

.reviews__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

/* Карточка целиком ссылка: гость нажимает куда угодно и попадает
   на оригинал отзыва, чтобы проверить его подлинность. */
.review {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.2vw, 28px);
  background: var(--bg);
  border: 2px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.review:hover { border-color: var(--accent); transform: translateY(-2px); }
.review:active { transform: translateY(0); }

.review__stars {
  display: flex;
  gap: 3px;
  color: var(--accent-txt);
  font-size: 15px;
  letter-spacing: 0.08em;
}

.review__text {
  flex: 1;
  font-size: 15.5px;
  line-height: 1.55;
  white-space: pre-line;
}
.review__more { color: var(--accent-txt); }

.review__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.review__name { font-weight: 600; }
.review__date { color: var(--fg-faint); }

.reviews__empty {
  grid-column: 1 / -1;
  padding: 24px 0;
  color: var(--fg-soft);
}
.reviews__empty a { color: var(--accent-txt); }

/* Две кнопки в ряд, на узком экране одна под другой. */
.reviews__all {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(26px, 3vw, 36px);
}

/* ---------- 13. Профсоюз ---------- */
/* Красные блоки не следуют светлой или тёмной схеме: они всегда красные,
   поэтому содержимое внутри них берёт свою пару цветов. */
.manifest, .union {
  --on-red-ink:   #2B2824;   /* тёмный текст на кремовых плашках внутри */
  --on-red-paper: #FFF3E8;   /* кремовая плашка на красном */
}
.union { background: var(--accent); color: var(--on-accent); }
.union__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 80px);
  align-items: start;
}
.union__title { color: var(--on-accent); }
.union__lead { margin-top: 18px; max-width: 42ch; color: var(--on-accent); }

.perks { display: grid; gap: 0; margin-top: 30px; }
.perk {
  display: flex;
  gap: 14px;
  padding-block: 15px;
  border-top: 1px solid color-mix(in srgb, var(--on-accent) 30%, transparent);
  font-size: 15.5px;
}
.perk:last-child { border-bottom: 1px solid color-mix(in srgb, var(--on-accent) 30%, transparent); }
.perk .ic { font-size: 1.35em; margin-top: 2px; }

/* Карточка-предпросмотр: профсоюзный билет */
.ticket {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 2.6vw, 30px);
  background: var(--on-red-paper);
  color: var(--on-red-ink);
  border: 2px solid var(--on-red-ink);
  box-shadow: var(--shadow);
}
/* Скважина стоит так же, как в манифесте: сверху справа, слегка выходя
   за край. Размер в процентах от билета, чтобы держать ту же пропорцию
   на любом экране. Заливка бледнее: фон здесь светлый, а не красный. */
.ticket__mark {
  position: absolute;
  top: -8%;
  right: -5%;
  width: 38%;
  fill: color-mix(in srgb, var(--red) 12%, transparent);
  pointer-events: none;
}
.ticket__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--on-red-ink);
}
.ticket__org {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 13px;
  line-height: 1.3;
  color: var(--red-deep);
}
.ticket__logo {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--red-deep);
}
.ticket__body { position: relative; display: grid; gap: 16px; margin-top: 20px; }
.ticket__row { display: grid; gap: 3px; }
.ticket__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--on-red-ink) 70%, transparent);
}
.ticket__value {
  font-weight: 600;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.2;
  word-break: break-word;
}
.ticket__value--num {
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--red-deep);
}
.ticket__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Адрес почты длиннее остальных значений, поэтому набирается мельче
   и переносится по символам: иначе он рвал бы строку билета. */
.ticket__value--mail {
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.ticket__foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px dashed color-mix(in srgb, var(--on-red-ink) 40%, transparent);
  font-size: 12px;
  color: color-mix(in srgb, var(--on-red-ink) 72%, transparent);
}
.ticket__discount {
  padding: 5px 12px;
  background: var(--red);
  color: var(--on-accent);
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  font-size: 13px;
}

/* Форма */
.form { display: grid; gap: 18px; margin-top: 28px; }
.field { display: grid; gap: 7px; }
.field__label {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  /* Без приглушения: на красном фоне даже 82% опускали контраст
     ниже порога, а запаса у этой пары почти нет. */
  color: var(--on-accent);
}
.field__input,
.field__select {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 2px solid var(--on-red-ink);
  border-radius: 0;
  background: var(--on-red-paper);
  color: var(--on-red-ink);
  font: inherit;
  appearance: none;
}
.field__input::placeholder { color: color-mix(in srgb, var(--on-red-ink) 62%, transparent); }
.field__select {
  background-image: none;
  padding-inline-end: 44px;
}
.field__wrap { position: relative; }
.field__wrap .ic {
  position: absolute;
  right: 15px; top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--on-red-ink);
  pointer-events: none;
}
.field__hint {
  font-size: 12.5px;
  color: var(--on-accent);
}
.field__error {
  font-size: 13px;
  font-weight: 600;
  color: #2B2824;
  background: #FFD2AB;
  padding: 5px 10px;
}
.field__error[hidden] { display: none; }
.field__input[aria-invalid="true"],
.field__select[aria-invalid="true"] { box-shadow: inset 0 0 0 3px #ED9F5A; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.check {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--on-accent);
}
.check input {
  width: 24px; height: 24px;
  margin: 0;
  accent-color: var(--on-red-ink);
  border-radius: 0;
}
.check a { color: var(--on-accent); }

.form__status { min-height: 0; }
.form__status[hidden] { display: none; }
.form__done {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--on-red-paper);
  color: var(--on-red-ink);
  border: 2px solid var(--on-red-ink);
  font-weight: 600;
}
.form__done .ic { font-size: 22px; color: var(--red-deep); }

.btn[data-busy="true"] { pointer-events: none; opacity: 0.72; }

@media (max-width: 900px) {
  .union__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
}

/* ---------- 14. Подвал ---------- */
.foot {
  background: var(--bg-2);
  border-top: 2px solid var(--fg);
  padding-block: clamp(48px, 6vw, 84px) 34px;
}
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 44px);
}
.foot__logo { width: min(100%, 300px); margin: 0; }
.foot__col h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;
  color: var(--fg-faint);
  margin-bottom: 12px;
}
.foot__col p, .foot__col li { font-size: 15.5px; line-height: 1.7; }
.foot__col p .ic {
  display: inline-block;
  vertical-align: -0.14em;
  margin-inline-end: 7px;
  font-size: 1.05em;
  color: var(--accent-txt);
}
.foot__col a { text-decoration: none; border-bottom: 1px solid var(--line); }
.foot__col a:hover { color: var(--accent-txt); border-bottom-color: currentColor; }

/* Две ссылки на карты в строку, чтобы не выглядели списком. */
.foot__maps { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.foot__maps a { font-size: 14.5px; color: var(--accent-txt); border-bottom-color: var(--accent-txt); }
.foot__social { display: flex; gap: 12px; margin-top: 14px; }
.foot__social a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 2px solid var(--fg);
  font-size: 20px;
  text-decoration: none;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.foot__social a:hover { background: var(--fg); color: var(--bg); }
.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
  margin-top: clamp(40px, 5vw, 66px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--fg-faint);
}
@media (max-width: 900px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand-col { grid-column: span 2; }
}
@media (max-width: 560px) {
  .foot__grid { grid-template-columns: 1fr; }
  .foot__brand-col { grid-column: span 1; }
}

/* ---------- 15. Появление при скролле ---------- */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js) .rise {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  html:not(.no-js) .rise.is-in { opacity: 1; transform: none; }
  .cards .card {
    opacity: 0;
    transform: translateY(18px);
    animation: card-in 0.55s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 45ms);
  }
  @keyframes card-in { to { opacity: 1; transform: none; } }

  .hero__grid > * {
    opacity: 0;
    animation: hero-in 0.85s var(--ease) forwards;
  }
  .hero__grid > *:nth-child(2) { animation-delay: 0.12s; }
  @keyframes hero-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
}

/* ---------- 16. Работа без JavaScript ---------- */
.tabs__title {
  display: none;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--accent);
  margin-bottom: 10px;
}
.no-js .tabs__bar { display: none; }
.no-js .tabs__title { display: block; }
.no-js .tabs__panel[hidden] { display: block; }
.no-js .tabs__panel + .tabs__panel { margin-top: clamp(44px, 5vw, 72px); }
.no-js .nav__burger { display: none; }
/* Без JS переключатель не работает, поэтому мёртвую кнопку не показываем:
   тема в этом случае просто следует за системной настройкой. */
.no-js .theme { display: none; }

/* Без JS свой список не работает: прячем его и показываем все съёмки. */
.no-js .events__picker { display: none; }
.no-js .event[hidden] { display: block !important; }
.no-js .event + .event { margin-top: clamp(44px, 5vw, 76px); }
@media (max-width: 900px) {
  .no-js .nav__links { display: none; }
}

/* Печать: чистое меню без интерфейса */
@media print {
  .nav, .hero__figure, .delivery__actions, .form, .events, .theme { display: none; }
  body { background: #fff; color: #000; }
  .tabs__panel[hidden] { display: block !important; }
}