/* ============================================================
   CONCERT.KG — таблица стилей лендинга
   Палитра строго из трёх цветов: чёрный (фон #0B0B0C → #000),
   белый (текст; второстепенный — тот же белый с прозрачностью),
   красный #E8181C — единственный акцент (из логотипа).
   Красный держим только на акцентах: кнопки, ссылки, hover,
   активные состояния, eyebrow'ы. Поверхности — нейтральный чёрный.
   Фирменный элемент: плей-треугольник (логотип → луч прожектора
   → буллеты → маркеры шагов → play-overlay на кейсах).

   Структура файла:
     1.  Токены / переменные
     2.  База и сброс
     3.  Общие элементы (мотив, типографика, кнопки)
     4.  Header
     5.  Hero
     6.  Services
     7.  Совместная работа с партнёрами (#process)
     8.  Portfolio (билеты)
     9.  Stats band
     10. Testimonials
     11. Contact + форма
     12. Footer
     13. Утилиты (reveal, skip-link)
     14. Media queries / адаптив
   ============================================================ */

/* ================= 1. ТОКЕНЫ / ПЕРЕМЕННЫЕ ================= */
:root {
  --bg-top: #0b0b0c;
  --bg-bottom: #000000;
  /* поверхности карточек/капсул: почти чёрный, отличается от фона
     на пару пунктов светлоты — граница читается за счёт --line */
  --surface: #101012;
  --surface-2: #17171a;
  --red: #e8181c;
  /* Золото — единственный второй акцент сайта. Заведён ради одной
     кнопки «Заказать артиста» (.btn--book): это главный платный
     сценарий, и он не должен теряться среди красного. Больше нигде
     как заливка не используется — иначе перестанет читаться как
     отдельное действие. */
  --gold: #ffc53d;
  --gold-2: #ff9f0a;
  --gold-ink: #17110a; /* текст на золоте: почти чёрный, контраст >12:1 */
  --white: #ffffff;
  /* второстепенный текст — не отдельный цвет, а приглушённый белый */
  --muted: rgba(255, 255, 255, 0.56);
  --line: rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.08);

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 14px;

  /* Общая ширина карточек форм-секций (#adpartner, #volunteer): обе
     формы берут её отсюда, поэтому всегда одинаковы по ширине.
     На заголовки секций не влияет — у .form-section .section-head
     своя, более узкая колонка. */
  --form-maxw: 760px;

  /* --- карточки: единая база для мероприятий, артистов и галереи ---
     Меняем оформление всех трёх типов разом отсюда (см. секцию 15). */
  --card-radius: 18px;
  --card-gap: clamp(12px, 1.5vw, 22px);
  --card-bg: linear-gradient(168deg, #161618 0%, #101012 54%, #08080a 100%);
  --card-line: var(--line-soft);
  --card-line-hover: rgba(232, 24, 28, 0.5);
  --card-lift: -6px;
  --card-shadow: 0 16px 36px -28px rgba(0, 0, 0, 0.9);
  /* на hover — тень, а не красное зарево: акцент даёт рамка --card-line-hover */
  --card-shadow-hover: 0 34px 64px -24px rgba(0, 0, 0, 0.95);

  /* вертикальный ритм секций (одна сторона; между секциями удваивается) */
  --section-y: clamp(42px, 4.6vw, 68px);
  /* заливка для .section--dark: секции чередуются через одну,
     чтобы граница между ними читалась поверх градиента body */
  --section-bg: #08080a;

  /* Две гарнитуры на весь сайт:
     Unbounded — заголовки, крупные цифры и мелкие метки-лейблы;
     Golos Text — весь читаемый текст. Обе с кириллицей.

     Unbounded заметно шире Bebas Neue, который стоял здесь раньше, и
     имеет строчные. Поэтому по всему файлу у дисплейных блоков:
     line-height не ниже 1 (0.88 обрезал бы выносные элементы),
     letter-spacing в минус (в caps широкий шрифт нужно поджимать),
     размеры примерно на четверть меньше прежних. Веса задаём явно:
     у Bebas было одно начертание, у Unbounded — 300…800. */
  --font-display: "Unbounded", Impact, "Arial Narrow Bold", sans-serif;
  --font-text:
    "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* роль «метки»: eyebrow'ы, теги, чипсы, лейблы полей — тот же
     Unbounded, но мелко, с трекингом и в uppercase */
  --font-mono: "Unbounded", system-ui, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ================= 2. БАЗА И СБРОС ================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--bg-bottom);
}

/* Запрет случайного зума на тач-устройствах: двойной тап больше не
   увеличивает страницу, масштаб всегда 1:1 (см. meta viewport и
   initNoZoom() в js/main.js — там же перехват pinch на iOS).
   manipulation отключает только двойной тап и задержку клика,
   обычный скролл/клики/формы работают как прежде. */
html,
body {
  touch-action: manipulation;
}

body {
  font-family: var(--font-text);
  /* градиент на всю высоту документа: верх чуть светлее, низ — чистый чёрный */
  background: linear-gradient(
    180deg,
    var(--bg-top) 0%,
    #060607 45%,
    var(--bg-bottom) 100%
  );
  color: var(--white);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

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

/* focus visible — акцентный красный на всех интерактивных элементах */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--red);
  color: #fff;
}

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ================= 3. ОБЩИЕ ЭЛЕМЕНТЫ ================= */
/* Плей-треугольник — фирменный мотив */
.play-tri {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.42em 0 0.42em 0.72em;
  border-color: transparent transparent transparent var(--red);
  vertical-align: middle;
}

/* Типографика секций */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-weight: 600;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--red);
}

.section {
  padding: var(--section-y) 0;
  position: relative;
}
/* Чередование фона: вешается на каждую вторую секцию — без заливки
   секция прозрачная и просвечивает градиент body. */
.section--dark {
  background: var(--section-bg);
}
.section-head {
  max-width: 720px;
  margin-bottom: clamp(26px, 3.4vw, 42px);
}
.section-head .eyebrow {
  margin-bottom: 14px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.section-head p {
  margin-top: 14px;
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 60ch;
}

/* Кнопки */
.btn {
  --bg: var(--red);
  --fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.98rem;
  padding: 15px 26px;
  border-radius: 100px;
  border: 2px solid var(--bg);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  transition:
    transform 0.25s var(--ease),
    background 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
  line-height: 1;
  white-space: nowrap;
}
.btn .play-tri {
  border-left-color: currentColor;
  border-width: 0.32em 0 0.32em 0.55em;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -12px rgba(232, 24, 28, 0.55);
}
.btn:active {
  transform: translateY(0);
}
/* вторичная кнопка — чистый контур по белому, красным становится на hover */
.btn--ghost {
  --bg: transparent;
  --fg: #fff;
  border-color: rgba(255, 255, 255, 0.24);
}
.btn--ghost:hover {
  box-shadow: none;
  background: rgba(232, 24, 28, 0.08);
  border-color: var(--red);
}

/* Кнопка «Заказать артиста» — главный платный сценарий сайта, поэтому
   она заметнее обычной .btn: золотой градиент вместо красной заливки,
   свечение под кнопкой, бегущий блик и медленная «дышащая» подсветка в
   покое. Цвет намеренно вынесен из палитры сайта (чёрное + красное):
   рядом с красными кнопками золотая читается как другое, более важное
   действие, а не как ещё один акцент. Стоит в шапке, на первом экране,
   в секции артистов, в полосе перед формами и в подвале — везде одна и
   та же, узнаётся как одно и то же действие.
   Всё движение выключается при prefers-reduced-motion (ниже). */
.btn--book {
  --bg: var(--gold);
  --fg: var(--gold-ink);
  position: relative;
  isolation: isolate; /* блик ::before не вылезает за пределы кнопки */
  overflow: hidden;
  padding: 17px 32px;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-color: transparent;
  background: linear-gradient(
    135deg,
    #ffe08a 0%,
    var(--gold) 46%,
    var(--gold-2) 100%
  );
  box-shadow:
    0 14px 34px -16px rgba(255, 159, 10, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  animation: bookGlow 3.4s var(--ease) infinite;
}
/* фокус с клавиатуры: красная обводка на золотой кнопке выглядит
   ошибкой — подсвечиваем её собственным цветом */
.btn--book:focus-visible {
  outline-color: var(--gold);
}
/* блик: узкая светлая полоса, раз в несколько секунд пробегающая слева направо */
.btn--book::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    105deg,
    transparent 34%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 66%
  );
  transform: translateX(-130%);
  animation: bookShine 5s var(--ease) infinite;
}
.btn--book:hover {
  transform: translateY(-3px);
  box-shadow:
    0 20px 44px -14px rgba(255, 159, 10, 1),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  animation-play-state: paused; /* под курсором «дыхание» мешает, глушим */
}
.btn--book:active {
  transform: translateY(-1px);
}
.btn--book .play-tri {
  transition: transform 0.25s var(--ease);
}
.btn--book:hover .play-tri {
  transform: translateX(3px);
}
/* крупный вариант — для полосы-призыва перед формами */
.btn--book.btn--lg {
  padding: 19px 40px;
  font-size: 1.1rem;
}
@keyframes bookGlow {
  0%,
  100% {
    box-shadow:
      0 14px 34px -16px rgba(255, 159, 10, 0.95),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow:
      0 18px 46px -14px rgba(255, 159, 10, 1),
      0 0 0 6px rgba(255, 197, 61, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
}
@keyframes bookShine {
  0%,
  62% {
    transform: translateX(-130%);
  }
  92%,
  100% {
    transform: translateX(130%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn--book,
  .btn--book::before {
    animation: none;
  }
  .btn--book::before {
    opacity: 0;
  }
}

/* ================= 4. HEADER ================= */
/* Плавающая капсула-навбар: фиксируется сверху с отступами от краёв
   (не на всю ширину). Фон — полупрозрачный чёрный с блюром (стекло),
   акцент и подчёркивание — существующий красный --red. */
header.site {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 16px var(--gutter) 0;
  pointer-events: none; /* кликается только сама капсула, не полоса вокруг */
}
header.site .bar {
  pointer-events: auto;
  position: relative;
  /* края капсулы совпадают с контентной колонкой: .wrap шире на свои
     padding-inline (--gutter), а header.site уже отбит гуттером снаружи —
     поэтому вычитаем гуттер дважды, а не берём --maxw как есть. */
  max-width: calc(var(--maxw) - var(--gutter) * 2);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 63px;
  padding: 0 14px 0 24px;
  background: rgba(14, 14, 16, 0.72); /* чёрное стекло поверх контента */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 22px; /* крупное скругление — капсула */
  box-shadow: 0 18px 46px -22px rgba(0, 0, 0, 0.8);
  transition:
    background 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
/* при скролле капсула чуть плотнее (класс вешает js/main.js) */
header.site.scrolled .bar {
  background: rgba(6, 6, 7, 0.88);
  box-shadow: 0 22px 54px -20px rgba(0, 0, 0, 0.9);
}

.logo {
  display: inline-flex;
  align-items: center;
  color: #fff;
  flex-shrink: 0;
}
/* .logo-img — горизонтальный логотип-лого (assets/logo/logo.png, 430×84) */
.logo .logo-img {
  height: 30px;
  width: auto;
  display: block;
}

/* Навигация — мини-капсула, выезжающая под основной капсулой по кнопке
   «Меню» (на всех ширинах: 10 разделов в строку в шапку не помещаются).
   Панель всегда в DOM — скрыта прозрачностью/сдвигом, чтобы появление и
   скрытие анимировались плавно (display анимировать нельзя). */
nav.main {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  display: grid;
  grid-template-columns: 1fr; /* 5 пунктов + кнопка — одной колонкой */
  min-width: 240px;
  column-gap: 30px;
  align-content: start;
  width: max-content;
  padding: 10px 18px 14px;
  background: rgba(14, 14, 16, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 22px; /* мельче, чем у шапки — капсула-компаньон */
  box-shadow: 0 26px 54px -22px rgba(0, 0, 0, 0.9);
  transform-origin: top right;
  transform: translateY(-12px) scale(0.98);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.28s var(--ease),
    transform 0.28s var(--ease),
    visibility 0s linear 0.28s;
}
nav.main.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.28s var(--ease),
    transform 0.28s var(--ease),
    visibility 0s;
}
/* пункт — строка с разделительной линией снизу */
nav.main a {
  font-size: 0.95rem;
  font-family: var(--font-text);
  letter-spacing: normal;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  padding: 10px 4px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
  /* пункты мягко «подъезжают» друг за другом при открытии */
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.25s var(--ease),
    transform 0.25s var(--ease),
    color 0.15s var(--ease);
}
nav.main a:hover {
  color: #fff;
}
/* активный раздел: цвет + точка-маркер слева.
   Точка вынесена в padding панели, чтобы подсветка не сдвигала строку. */
nav.main a.active {
  position: relative;
  color: var(--red);
}
nav.main a.active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--red);
}
nav.main.open a {
  opacity: 1;
  transform: translateY(0);
}
nav.main.open a:nth-child(1) {
  transition-delay: 0.04s;
}
nav.main.open a:nth-child(2) {
  transition-delay: 0.07s;
}
nav.main.open a:nth-child(3) {
  transition-delay: 0.1s;
}
nav.main.open a:nth-child(4) {
  transition-delay: 0.13s;
}
nav.main.open a:nth-child(5) {
  transition-delay: 0.16s;
}
nav.main.open a:nth-child(6) {
  transition-delay: 0.19s;
}
nav.main.open a:nth-child(7) {
  transition-delay: 0.22s;
}
nav.main.open a:nth-child(8) {
  transition-delay: 0.25s;
}
nav.main.open a:nth-child(9) {
  transition-delay: 0.28s;
}
nav.main.open a:nth-child(10) {
  transition-delay: 0.31s;
}
nav.main.open a:nth-child(11) {
  transition-delay: 0.34s;
}
/* нижняя строка панели — без разделителя (в две колонки это 9-й и 10-й пункт) */
nav.main a:nth-child(n + 9):not(.nav-cta) {
  border-bottom: 0;
}
/* CTA внутри панели меню. «Заказать артиста» (.nav-cta--book) живёт
   только здесь и видна на всех ширинах: в самой полосе шапки её нет —
   там уже стоит «Стать партнёром», и две кнопки рядом спорили бы.
   «Стать партнёром» (.nav-cta--partner) — дубль кнопки шапки, включается
   только когда та скрыта (≤900px, см. секцию 14). */
nav.main a.nav-cta {
  display: none;
  justify-content: center;
  font-size: 0.86rem;
  font-family: var(--font-text);
  letter-spacing: normal;
  border-bottom: 0;
  padding: 11px 16px;
  margin-top: 12px;
}
nav.main a.nav-cta--book {
  display: inline-flex;
}
/* золотая кнопка идёт первой в паре — ей нужен отступ сверху,
   а стоящей под ней «Стать партнёром» хватает 8px */
nav.main a.nav-cta--book + a.nav-cta {
  margin-top: 8px;
}
/* без анимации: панель и пункты появляются сразу, без каскада задержек */
@media (prefers-reduced-motion: reduce) {
  nav.main,
  nav.main a {
    transition-duration: 0.01s;
    transition-delay: 0s;
  }
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
/* CTA-кнопка компактнее по высоте внутри капсулы */
.header-cta .btn {
  padding: 12px 24px;
  font-size: 0.92rem;
}
/* «Стать партнёром» — ровно по высоте с кнопкой меню и переключателем,
   ведёт на форму рекламного партнёрства (#adpartner) */
.header-cta .btn.header-partner {
  height: 40px;
  padding: 0 20px;
  white-space: nowrap;
}

/* Телефон в шапке — кликабельная пилюля рядом с переключателем языков.
   Иконка в красном кружке, номер справа; ≤900px схлопывается в один кружок. */
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 18px 0 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--font-text);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.header-phone:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
}
.header-phone-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}
.header-phone-ic svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Кнопка меню — круглая иконка без подписи (слово «Меню» убрано по
   просьбе заказчика: три полоски и так читаются однозначно, а шапка
   стала свободнее). Название осталось в aria-label кнопки — для
   скринридеров ничего не потерялось. Открывает мини-капсулу навигации,
   при открытии заливается красным, иконка складывается в крестик. */
.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--font-text);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.burger:hover {
  background: rgba(255, 255, 255, 0.13);
}
.burger[aria-expanded="true"] {
  background: var(--red);
  border-color: var(--red);
}
/* иконка: три полоски, позиционируются внутри фиксированного бокса */
.burger-ico {
  position: relative;
  width: 16px;
  height: 12px;
  flex-shrink: 0;
}
.burger-ico span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition:
    transform 0.3s var(--ease),
    opacity 0.2s;
}
.burger-ico span:nth-child(1) {
  top: 0;
}
.burger-ico span:nth-child(2) {
  top: 5px;
}
.burger-ico span:nth-child(3) {
  bottom: 0;
}
.burger[aria-expanded="true"] .burger-ico span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.burger[aria-expanded="true"] .burger-ico span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] .burger-ico span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* ================= 5. HERO =================
   Первый экран — фотография во весь вьюпорт. Снимок реальный (кадр с
   площадки), поэтому вся декоративная бутафория прежнего героя
   (луч .beam, зарево .spot, постер-плеер .player-card, полоса
   выдуманных цифр .hero-stats) удалена вместе со стилями.
   Читаемость текста поверх фото держит .hero-scrim — двойной градиент
   (снизу и слева), а не затемнение всего кадра: фотография остаётся
   яркой там, где текста нет. */

.hero {
  position: relative;
  color: #fff;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: 140px;
  padding-bottom: clamp(56px, 8vh, 104px);
  overflow: hidden;
  isolation: isolate;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  /* кадр тёплый и очень контрастный — слегка приглушаем,
     чтобы белый текст не спорил с бликами лазеров */
  filter: saturate(0.92) contrast(1.02) brightness(0.86);
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.72) 26%,
      rgba(0, 0, 0, 0.24) 58%,
      rgba(0, 0, 0, 0.4) 100%
    ),
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.34) 42%,
      transparent 72%
    );
}
.hero .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero-inner {
  max-width: 62ch;
}
/* Поверх фотографии красный eyebrow не читается — кадр сам тёплый и
   красный. Здесь метка белая, фирменный красный остаётся только на
   штрихе-указателе слева. */
.hero .eyebrow {
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.hero .eyebrow::before {
  background: var(--red);
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 6.4vw, 4.6rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  margin: 18px 0 22px;
  text-wrap: balance;
}
.hero h1 .accent {
  color: var(--red);
}
.hero-sub {
  font-size: clamp(1rem, 1.55vw, 1.19rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.76);
  max-width: 56ch;
  margin-bottom: 30px;
  /* последнее слово абзаца не остаётся одно на строке — перенос
     подбирает браузер, ручных <br> в тексте нет (где pretty не
     поддержан, строки ложатся как раньше) */
  text-wrap: pretty;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}
.hero-scroll-line {
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
}

/* ================= 6. ФОРМАТЫ + ВОЗМОЖНОСТИ =================
   Прежняя сетка из шести одинаковых плиток (.services-grid/.svc)
   заменена иерархией: три формата крупно, остальные три направления —
   строкой возможностей под ними. */

.formats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin-bottom: clamp(28px, 3.4vw, 46px);
}
.fmt {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 34px);
  border: 1px solid var(--card-line);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  transition:
    transform 0.5s var(--ease),
    border-color 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.fmt:hover {
  transform: translateY(var(--card-lift));
  border-color: var(--card-line-hover);
  box-shadow: var(--card-shadow-hover);
}
.fmt-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--red);
  margin-bottom: 18px;
}
.fmt h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.06rem, 1.5vw, 1.32rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.fmt p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 18px;
}
/* Чипы-теги. Раньше их оформление жило внутри .svc и удалилось вместе
   с ним — без него <span>'ы слипаются в одно слово. */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tags span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 6px 11px;
  white-space: nowrap;
}
.fmt .tags {
  margin-top: auto;
  padding-top: 4px;
}

.caps {
  border-top: 1px solid var(--line-soft);
  padding-top: clamp(22px, 2.6vw, 34px);
}
.caps-title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.caps-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 32px);
}
.caps-list > li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.caps-list .play-tri {
  flex: none;
  margin-top: 7px;
}
.caps-list b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}
.caps-list li > span > span {
  display: block;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ================= 7. ВЕРТИКАЛЬ (#process) =================
   Четыре слоя, которые объясняют позиционирование: агентство не только
   проводит событие, но и помогает его собрать. Прежние карточки-ссылки
   на партнёров (.collab*) заменены: логотипы теперь в полосе доверия
   под первым экраном, здесь — роли и объяснения. */

.stack-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  counter-reset: stack;
}
.stack-card {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.2vw, 30px);
  border: 1px solid var(--card-line);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  transition:
    transform 0.5s var(--ease),
    border-color 0.5s var(--ease);
}
.stack-card:hover {
  transform: translateY(-4px);
  border-color: var(--card-line-hover);
}
.stack-num {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.34);
  margin-bottom: 16px;
}
.stack-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.stack-card p {
  color: var(--muted);
  font-size: 0.89rem;
  line-height: 1.58;
  margin-bottom: 18px;
}
.stack-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.stack-link:hover {
  color: var(--red);
}
.stack-link .play-tri {
  transition: transform 0.3s var(--ease);
}
.stack-link:hover .play-tri {
  transform: translateX(3px);
}

/* ================= 10. TESTIMONIALS ================= */
.quotes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.quote {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 30px 28px;
  position: relative;
  border: 1px solid var(--line-soft);
}
.quote .mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.6rem;
  color: var(--red);
  line-height: 0.78;
  height: 26px;
  display: block;
}
.quote blockquote {
  margin: 0;
}
.quote p {
  font-size: 1rem;
  margin: 12px 0 20px;
  color: rgba(255, 255, 255, 0.78);
}
.quote .who {
  display: flex;
  align-items: center;
  gap: 12px;
}
.quote .who .av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
}
.quote .who b {
  display: block;
  font-size: 0.92rem;
  color: #fff;
}
.quote .who span {
  font-size: 0.8rem;
  color: var(--muted);
}

/* ================= 11. ФОРМЫ ================= */

/* Секция «Знаменитости»: слева — заголовок, описание и чипы типов
   мероприятий, справа — форма. Двухколоночная сетка убирает пустые
   поля по бокам узкой карточки. */
.celeb-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: stretch;
}
.celeb-info {
  display: flex;
  flex-direction: column;
}
.celeb-info h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  text-transform: uppercase;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-top: 16px;
  margin-bottom: 18px;
}
.celeb-info p {
  color: var(--muted);
  margin-bottom: 30px;
  max-width: 46ch;
}
/* чипы сразу под текстом, а не прижаты к низу колонки */
.celeb-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0;
}
.celeb-tags li {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.9);
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}

/* форма заявки */
.form-card {
  background: var(--bg-top);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(20px, 3vw, 28px);
}
.field {
  margin-bottom: 13px;
}
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.field label .req {
  color: var(--red);
}
/* «(необязательно)» рядом с подписью — парная пометка к .req:
   без капса и разрядки, чтобы читалась как примечание, а не как метка */
.field label .opt {
  text-transform: none;
  letter-spacing: 0.02em;
  opacity: 0.7;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  background: var(--bg-bottom);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 13px;
  color: #fff;
  font-family: var(--font-text);
  font-size: 0.94rem;
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.field textarea {
  resize: vertical;
  min-height: 74px;
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(255, 255, 255, 0.38);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--red);
  outline: none;
  box-shadow: 0 0 0 3px rgba(232, 24, 28, 0.2);
}
.field.invalid input,
.field.invalid textarea,
.field.invalid select {
  border-color: var(--red);
}
.field .err {
  color: #ff6b6f;
  font-size: 0.76rem;
  margin-top: 5px;
  display: none;
}
.field.invalid .err {
  display: block;
}
/* Все формы — строго в одну колонку: .form-row остался в разметке как
   смысловая группа («имя + фамилия», «e-mail + телефон»), но полей
   справа и слева больше нет. display:block, а не сетка в 1fr, чтобы
   вертикальный ритм задавал только margin-bottom у .field — иначе к нему
   добавлялся бы ещё и gap, и группы стояли бы шире одиночных полей. */
.form-row {
  display: block;
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237C86B8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.form-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}
/* Кнопка отправки — на всю ширину формы: у всех трёх форм (партнёр,
   волонтёр, букинг) она единственный элемент действия, и растянутая
   «пилюля» читается как финальный шаг, а не как ссылка сбоку.
   .btn — inline-flex без justify-content, поэтому при width:100%
   содержимое нужно центрировать явно. */
.form-submit .btn {
  width: 100%;
  justify-content: center;
}
.form-submit .form-note {
  text-align: center;
}
.form-note {
  font-size: 0.76rem;
  color: var(--muted);
}
.btn.is-loading {
  pointer-events: none;
  opacity: 0.85;
}
.btn .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  display: none;
  animation: spin 0.7s linear infinite;
}
.btn.is-loading .spinner {
  display: inline-block;
}
.btn.is-loading .play-tri {
  display: none;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.form-success {
  display: none;
  text-align: center;
  padding: 20px 0;
}
.form-success.show {
  display: block;
}
form.sent .form-body {
  display: none;
}
.form-success .ok {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(232, 24, 28, 0.16);
  color: var(--red);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
}
.form-success .ok svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
}
.form-success h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.form-success p {
  color: var(--muted);
}
.form-success p a {
  color: var(--red);
  font-weight: 700;
}

/* --- Анимация success: «пружинка» кружка + прорисовка галочки --- */
.form-success.show .ok {
  animation: ok-pop 0.45s var(--ease) both;
}
.form-success.show .ok svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: ok-draw 0.5s 0.22s var(--ease) forwards;
}
@keyframes ok-pop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  60% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes ok-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* --- Тосты (уведомления об отправке / ошибке) --- */
.toast-wrap {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(92vw, 420px);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  font-family: var(--font-text);
  font-size: 0.95rem;
  line-height: 1.4;
  color: #fff;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.28s var(--ease),
    transform 0.28s var(--ease);
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}
.toast::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.toast--success {
  border-color: rgba(46, 204, 113, 0.45);
}
.toast--success::before {
  color: #2ecc71;
}
.toast--error {
  border-color: rgba(232, 24, 28, 0.55);
}
.toast--error::before {
  color: var(--red);
}
@media (prefers-reduced-motion: reduce) {
  .form-success.show .ok,
  .form-success.show .ok svg path {
    animation: none;
  }
  .form-success.show .ok svg path {
    stroke-dashoffset: 0;
  }
  .toast {
    transition: opacity 0.2s linear;
    transform: none;
  }
}

/* ================= 11b. БЕГУЩАЯ СТРОКА-БРЕНД ================= */
.brand-marquee {
  overflow: hidden;
  /* отбита от hero сверху — строка стоит заметно ниже первого экрана */
  margin-top: clamp(28px, 5vw, 64px);
  padding: clamp(20px, 3.2vw, 38px) 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.34);
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 9%,
    #000 91%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 9%,
    #000 91%,
    transparent
  );
}
.brand-marquee-track {
  display: flex;
  width: max-content;
  animation: brand-scroll 30s linear infinite;
}
.brand-marquee-track span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 7.2vw, 5.6rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.16);
  white-space: nowrap;
  padding-right: 40px;
}
.brand-marquee-track span:nth-child(even) {
  -webkit-text-stroke: 1.4px rgba(232, 24, 28, 0.45);
}
@keyframes brand-scroll {
  to {
    transform: translateX(-50%);
  }
}
.brand-marquee:hover .brand-marquee-track {
  animation-play-state: paused;
}

/* ================= 12. FOOTER ================= */
footer.site {
  position: relative;
  isolation: isolate;
  background: #050506;
  color: #fff;
  padding: clamp(34px, 4vw, 52px) 0 26px;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
}
/* тонкая сетка + красное свечение как декор */
footer.site::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 80% at 50% 0, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(
    120% 80% at 50% 0,
    #000 30%,
    transparent 78%
  );
}
.foot-glow {
  position: absolute;
  z-index: -1;
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 90%);
  height: 320px;
  background: radial-gradient(
    ellipse at 50% 0,
    rgba(232, 24, 28, 0.28),
    transparent 65%
  );
  filter: blur(20px);
  pointer-events: none;
}

.foot-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 36px;
  padding: 0 0 48px;
  border-bottom: 1px solid var(--line-soft);
}
/* --- Кнопка «Букинг артистов» в подвале ---
   Стоит под логотипом, перед описанием агентства, и на всех страницах
   ведёт на /booking. Базу берёт у .btn--book (градиент, свечение,
   блик) — тот же призыв, что и на главной; здесь только кегль и
   отбивки под подвал, чтобы кнопка не спорила по весу с логотипом. */
.foot-book {
  /* .btn — inline-flex, и рядом с логотипом (тоже строчная ссылка)
     кнопка вставала бы с ним в одну строку. Блочный flex по ширине
     содержимого выносит её на отдельную строку над логотипом. */
  display: flex;
  width: fit-content;
  margin-bottom: 22px;
  padding: 13px 26px;
  font-size: 0.92rem;
}
.foot-brand .logo {
  margin-bottom: 18px;
}
.foot-brand p {
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 34ch;
}
.foot-socials {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.foot-socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  transition:
    background 0.22s var(--ease),
    border-color 0.22s var(--ease),
    transform 0.22s var(--ease);
}
.foot-socials a:hover {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-3px);
}
.foot-socials svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.7;
}
.foot-contacts .foot-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.82);
  padding: 6px 0;
  font-size: 0.95rem;
  width: fit-content;
  transform: none;
  transition:
    color 0.2s,
    transform 0.2s var(--ease);
}
.foot-contacts .foot-ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  transition:
    background 0.22s var(--ease),
    border-color 0.22s var(--ease);
}
.foot-contacts .foot-ic svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.7;
}
.foot-contacts a.foot-contact:hover {
  color: var(--red);
  transform: translateX(4px);
}
.foot-contacts a.foot-contact:hover .foot-ic {
  background: var(--red);
  border-color: var(--red);
}
.foot-contacts .foot-contact--static {
  color: var(--muted);
  cursor: default;
}
.foot-col h5 {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.foot-col a {
  display: block;
  color: rgba(255, 255, 255, 0.82);
  padding: 6px 0;
  font-size: 0.95rem;
  width: fit-content;
  transition:
    color 0.2s,
    transform 0.2s var(--ease);
}
.foot-col a:hover {
  color: var(--red);
  transform: translateX(4px);
}
.foot-col .foot-addr {
  color: var(--muted);
  font-size: 0.9rem;
  display: block;
  padding: 6px 0;
}

.foot-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 0.85rem;
}
.foot-top-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition:
    border-color 0.22s,
    color 0.22s,
    background 0.22s;
}
.foot-top-link svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.22s var(--ease);
}
.foot-top-link:hover {
  color: #fff;
  border-color: var(--red);
  background: rgba(232, 24, 28, 0.12);
}
.foot-top-link:hover svg {
  transform: rotate(-12deg) scale(1.08);
}

/* ================= 13. УТИЛИТЫ ================= */
/* scroll-reveal — класс переключает js/main.js (initScrollReveal) */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal[data-d="1"] {
  transition-delay: 0.08s;
}
.reveal[data-d="2"] {
  transition-delay: 0.16s;
}
.reveal[data-d="3"] {
  transition-delay: 0.24s;
}
.reveal[data-d="4"] {
  transition-delay: 0.32s;
}

/* skip-link для клавиатурной навигации */
.skip {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 200;
  background: var(--red);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  font-weight: 700;
}
.skip:focus {
  left: 0;
}

/* ================= 14. MEDIA QUERIES / АДАПТИВ ================= */

/* планшет — до 900px */
@media (max-width: 900px) {
  /* кнопка «Стать партнёром» уходит из шапки внутрь панели (nav-cta) */
  .header-cta .btn {
    display: none;
  }
  nav.main a.nav-cta--partner {
    display: inline-flex;
  }
  /* телефон схлопывается до кружка-иконки, чтобы не тесниться у бургера */
  .header-phone {
    padding: 0;
    width: 40px;
    justify-content: center;
    gap: 0;
  }
  .header-phone-num {
    display: none;
  }
  nav.main {
    left: 0;
    right: 0;
    width: auto;
    transform-origin: top center;
  }
  .stack-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .quotes-grid {
    grid-template-columns: 1fr;
  }
}

/* первый экран, форматы и «о компании» — до 860px */
@media (max-width: 860px) {
  .hero {
    padding-top: 92px;
    padding-bottom: 52px;
    /* Герой на весь экран и на мобиле (100svh по спеке). Компромисс: на
       вертикальном экране горизонтальный снимок (1600×1066) апскейлится
       сильнее и сверху может остаться тёмная полоса кадра — это цена
       полноэкранного первого экрана. Читаемость держит .hero-scrim. */
    min-height: 100svh;
    /* на телефоне крупный заголовок в столбик заполняет экран — центрируем
       блок по вертикали, чтобы не оставалось пустот сверху и снизу */
    align-items: center;
  }
  /* центр кадра на телефоне — люди и линия света, а не пустые лучи под потолком */
  .hero-photo {
    object-position: 50% 62%;
    /* на мелком экране кадр и так теряет детали — не душим его ещё и яркостью */
    filter: saturate(0.96) contrast(1.08) brightness(0.94);
  }
  /* боковой градиент рассчитан на широкий экран; на узком он ложится на
     весь кадр и делает фото мутным — оставляем только затемнение снизу */
  .hero-scrim {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.66) 30%,
      rgba(0, 0, 0, 0.14) 66%,
      rgba(0, 0, 0, 0.34) 100%
    );
  }
  /* Абзац под заголовком. Десктопные 1.55 интерлиньяжа на телефоне
     разваливают его на 6–7 разрежённых строк — рядом с плотным h1 это
     читается как «растянутый» текст. Здесь кегль течёт по ширине экрана,
     интерлиньяж плотнее, а строка ограничена по длине. Переносы —
     на откуп браузеру (text-wrap: pretty задан в базовом правиле). */
  .hero-sub {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
    font-size: clamp(16px, 4.1vw, 17.5px);
    line-height: 1.45;
    /* на телефоне (≤430px) предел не срабатывает — строку держит сам
       экран; ограничение работает на планшетных ширинах, где иначе
       вышли бы строки по 70+ знаков */
    max-width: 44ch;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 26px;
  }
  /* заголовок по одному слову в строку, крупно — заполняет экран по вертикали */
  .hero h1 {
    font-size: clamp(40px, 12.5vw, 68px);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -1px;
    text-transform: uppercase;
    margin: 14px 0 18px;
    text-wrap: initial;
  }
  .hero h1 .hw {
    display: block;
  }
  .hero h1 .hero-br-desktop {
    display: none;
  }
  .hero h1 .accent {
    color: #e24b4a;
  }
  .hero .eyebrow {
    font-size: 0.58rem;
    letter-spacing: 0.11em;
  }
  .hero-inner {
    max-width: none;
  }
  /* подсказка о прокрутке перекрывалась бы кнопками — убираем */
  .hero-scroll {
    display: none;
  }

  .formats,
  .caps-list {
    grid-template-columns: 1fr;
  }
  /* «о компании» — адаптив живёт рядом с самими стилями (секция 17):
     здесь он был мёртвым, .about-grid ниже по файлу перебивал его. */
}

/* футер: бренд на всю ширину + 2 колонки — до 960px */
@media (max-width: 960px) {
  .foot-top {
    grid-template-columns: 1fr 1fr;
  }
  .foot-brand {
    grid-column: 1/-1;
  }
}

/* одна колонка карточек — до 560px */
@media (max-width: 560px) {
  .stack-grid {
    grid-template-columns: 1fr;
  }
  .fmt {
    padding: 22px 20px 24px;
  }
  /* капсула-шапка ниже на телефонах */
  header.site .bar {
    height: 54px;
  }
  header.site .logo-img {
    height: 22px;
  }
  /* на телефонах кружок чуть меньше — в ряд с логотипом и переключателем */
  .burger {
    width: 38px;
    height: 38px;
  }

  /* ---- HERO под телефон ---- */
  .hero {
    padding-top: 84px;
    padding-bottom: 44px;
    min-height: 100svh;
  }
  .hero .eyebrow {
    font-size: 0.54rem;
    letter-spacing: 0.08em;
    gap: 0.5em;
  }
  .hero .eyebrow::before {
    width: 18px;
  }
  .hero h1 {
    font-size: clamp(40px, 12.5vw, 68px);
    line-height: 0.98;
    letter-spacing: -1px;
  }
  /* кегль и интерлиньяж заданы выше (≤860px) одним fluid-правилом —
     здесь только отбивка под узкий экран */
  .hero-sub {
    margin-bottom: 24px;
  }
  /* кнопки на всю ширину, одинаковые, в столбик */
  .hero-cta {
    flex-direction: column;
    gap: 12px;
  }
  .hero-cta .btn {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
    font-size: 1.02rem;
  }
  .celeb-tags {
    gap: 8px;
    margin: 20px 0 26px;
  }
}

/* футер в столбик — до 480px */
@media (max-width: 480px) {
  .foot-top {
    grid-template-columns: 1fr;
  }
}

/* кнопка букинга в подвале — во всю ширину, как кнопки первых экранов */
@media (max-width: 560px) {
  .foot-book {
    width: 100%;
    justify-content: center;
  }
}

/* уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   14b. ЕДИНАЯ БАЗА КАРТОЧЕК
   Один визуальный язык для трёх типов карточек: мероприятия
   (.event-card), артисты (.artist-card), кадры галереи (.g-item).
   Общее: сетка, фон-градиент, скругление, кромка-блик, подъём и
   красное свечение прожектора на hover, зум медиа, шкала подписей.
   Частное — в секциях 15 / 16 / 18 ниже (они переопределяют базу).

   Строительные блоки: .card-media (медиа-зона), .card-scrim
   (градиентный оверлей), .card-play (play-кружок), .card-label
   (моно-метка), .card-title (крупный заголовок), .card-reveal
   (блок, раскрывающийся на hover / всегда видимый на тач-экране).

   Как добавить новый тип карточки:
     1) на корневой элемент — class="card <тип>-card";
     2) на контейнер — class="cards-grid" + --cols-* (см. ниже);
     3) отличия по контенту дописать отдельным блоком ПОСЛЕ этого.

   Сетка: число колонок задаётся переменными --cols-lg / --cols-md /
   --cols-sm на самом контейнере, брейкпоинты переключают их здесь.
   На мобильном ВСЕГДА 2 колонки (--cols-sm по умолчанию = 2).
   ============================================================ */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, var(--cols-lg, 3)), minmax(0, 1fr));
  gap: var(--card-gap);
}

.card {
  position: relative;
  isolation: isolate;
  /* карточка — контейнер для своей типографики (см. блок «узкая карточка»
     ниже). Меряем ширину карточки, а не экрана: на одном и том же 768px
     карточка концерта 340px (2 колонки), а артиста и кадр галереи — 222px
     (3 колонки), и вьюпортный брейкпоинт поджал бы их одинаково, хотя
     тесно только вторым. Ограничение только по inline-оси — высота
     по-прежнему считается по контенту. */
  container: card / inline-size;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

/* кромка-блик: тонкая световая линия по верхней грани вместо плоской
   рамки. z-index 4 — поверх медиа, pointer-events отключены */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: box-shadow 0.4s var(--ease);
}
.card:hover::before,
.card:focus-within::before {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

/* свет прожектора: поднимается снизу карточки. z-index -1 кладёт его
   над фоном карточки, но под медиа и текстом; overflow: hidden срезает
   яркое ядро эллипса, оставляя мягкую засветку у нижней грани */
.card::after {
  content: "";
  position: absolute;
  inset: auto -20% -45% -20%;
  height: 70%;
  z-index: -1;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(232, 24, 28, 0.32),
    transparent 62%
  );
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition:
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease);
}

.card:hover,
.card:focus-within {
  transform: translateY(var(--card-lift));
  border-color: var(--card-line-hover);
  box-shadow: var(--card-shadow-hover);
}
.card:hover::after,
.card:focus-within::after {
  opacity: 1;
  transform: translateY(0);
}

/* --- медиа-зона (постер / фото / кадр) --- */
.card-media {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #151517, #08080a);
}
/* сам снимок зумится, рамка остаётся на месте */
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}
.card:hover .card-media img,
.card:focus-within .card-media img {
  transform: scale(1.06);
}

/* градиентный оверлей поверх медиа: слабый в покое, плотнее на hover —
   он же подложка для подписей, которые лежат на кадре */
.card-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.34) 42%,
    transparent 72%
  );
  opacity: 0.72;
  transition: opacity 0.4s var(--ease);
}
.card:hover .card-scrim,
.card:focus-within .card-scrim {
  opacity: 1;
}

/* --- play-кружок поверх медиа (фирменный мотив) --- */
.card-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.32s var(--ease);
}
.card-play::before {
  content: "";
  position: absolute;
  width: var(--play-size, 58px);
  height: var(--play-size, 58px);
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 28px rgba(232, 24, 28, 0.4);
  transform: scale(0.82);
  transition: transform 0.32s var(--ease);
}
.card-play .play-tri {
  position: relative;
  z-index: 1;
  border-left-color: #fff;
  border-width: 0.55em 0 0.55em 0.95em;
}
.card:hover .card-play,
.card:focus-within .card-play {
  opacity: 1;
}
.card:hover .card-play::before,
.card:focus-within .card-play::before {
  transform: scale(1);
}

/* --- подписи-метки: Unbounded мелко, с трекингом, красный акцент --- */
.card-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--red);
}
/* заголовок карточки — крупный дисплейный шрифт */
.card-title {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
  /* Длинное слово в узкой карточке рвём, а не срезаем. Особенно нужно
     подписи в галерее: под неё остаётся ~117px (справа зарезервирован
     угол под эквалайзер), и одно слово вроде «Режиссёрский» туда не
     влезает целиком ни при каком разумном кегле. */
  overflow-wrap: break-word;
}

/* --- УЗКАЯ КАРТОЧКА (мобильные) ---
   Размер заголовка каждый тип задаёт своим clamp() от вьюпорта, но на
   телефоне средний член таких clamp вырождается (1.9vw ≈ 7px на 390px),
   и всегда побеждает нижняя граница: 20px в карточке шириной 169px —
   заголовок забивал собой дату, метки и кнопку.

   Условие двойное, и оба члена нужны:
   • @media — держит правило в мобильной полосе. Без него оно лезет на
     десктоп: там карточка артиста в 4 колонки всего ~252px и тоже прошла
     бы по ширине, хотя крупное имя в ней — это замысел макета.
   • @container — внутри полосы выбирает те карточки, которым реально
     тесно: на одном 768px карточка концерта 340px (2 колонки), а артиста
     и кадр галереи — 222px (3 колонки). Вьюпортный брейкпоинт поджал бы
     все три одинаково, cqi же считает от ширины самой карточки — и все
     типы ведут себя единообразно, а новый тип получит это даром.

   Специфичность (0,2,0) — перебиваем .ev-title / .art-name / .g-name,
   объявленные ниже по файлу с тем же весом (0,1,0). */
@media (max-width: 768px) {
  @container card (max-width: 280px) {
    .card .card-title {
      font-size: clamp(0.72rem, 0.52rem + 2.6cqi, 0.96rem);
      line-height: 1.22;
      /* длинное название переносим, но не длиннее двух строк: дальше
         многоточие, иначе заголовок распирает карточку, а с ней и всю
         строку грида (высота ряда — по самой высокой карточке) */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
    }
    .card .card-label {
      font-size: 0.54rem;
      letter-spacing: 0.04em;
    }
  }
}

/* --- блок, раскрывающийся на hover ---
   Место под него зарезервировано всегда: высота ряда в гриде считается
   по самой высокой карточке, поэтому раскрытие «в высоту» дёргало бы
   весь ряд и всё, что под ним. */
.card-reveal {
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.34s var(--ease),
    transform 0.42s var(--ease);
}
.card:hover .card-reveal,
.card:focus-within .card-reveal {
  opacity: 1;
  transform: none;
}

/* --- адаптив сетки: колонки переключаются переменными --- */
@media (max-width: 1000px) {
  .cards-grid {
    --cols: var(--cols-md, 3);
  }
}
@media (max-width: 720px) {
  /* мобильный: все типы карточек — ровно 2 колонки */
  .cards-grid {
    --cols: var(--cols-sm, 2);
  }
}

/* --- тач-устройства: hover не наступает --- */
/* Раскрывающийся контент показываем сразу (иначе он недостижим), а
   вместо hover — отклик на нажатие: карточка слегка «вдавливается». */
@media (hover: none) {
  .card-reveal {
    opacity: 1;
    transform: none;
  }
  .card-play {
    opacity: 1;
    background: none;
  }
  .card-play::before {
    transform: scale(0.78);
  }
  .card:active {
    transform: scale(0.977);
    border-color: var(--card-line-hover);
    box-shadow: var(--card-shadow-hover);
    transition-duration: 0.12s;
  }
  .card:active::after {
    opacity: 1;
    transform: translateY(0);
    transition-duration: 0.12s;
  }
  .card:active .card-scrim {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .card::after,
  .card::before,
  .card-media img,
  .card-scrim,
  .card-reveal {
    transition-duration: 0.01ms;
  }
  .card:hover,
  .card:focus-within {
    transform: none;
  }
  .card:hover .card-media img,
  .card:focus-within .card-media img {
    transform: none;
  }
  .card::after {
    transform: none;
  }
  .card-play {
    display: none;
  }
}

/* ============================================================
   14c. ФИРМЕННЫЕ ГРАДИЕНТЫ-ЗАГЛУШКИ (.grad-1 … .grad-9)
   Одна палитра на карточки без фото: постер мероприятия, аватар артиста.
   Класс выбирается детерминированно по id (js/kassir.js, js/artists.js —
   gradientClass). В галерее теперь настоящий снимок (секция про галерею
   ниже), заглушки ей больше не нужны.
   ============================================================ */
.grad-1 {
  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(232, 24, 28, 0.55),
      transparent 48%
    ),
    radial-gradient(
      circle at 80% 75%,
      rgba(255, 255, 255, 0.07),
      transparent 55%
    ),
    linear-gradient(135deg, #151517, #08080a);
}
.grad-2 {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(232, 24, 28, 0.14) 0 8px,
      transparent 8px 22px
    ),
    linear-gradient(160deg, #1b1b1f, #000);
}
.grad-3 {
  background: conic-gradient(
    from 210deg at 60% 40%,
    #1b1b1f,
    #e8181c,
    #0f0f11,
    #000,
    #1b1b1f
  );
}
.grad-4 {
  background:
    radial-gradient(
      circle at 50% 120%,
      rgba(232, 24, 28, 0.6),
      transparent 62%
    ),
    linear-gradient(180deg, #000, #17171a);
}
.grad-5 {
  background:
    linear-gradient(
      115deg,
      #000 0 40%,
      rgba(232, 24, 28, 0.8) 40% 42%,
      #151517 42%
    ),
    #000;
}
.grad-6 {
  background:
    radial-gradient(ellipse at 50% 0, rgba(232, 24, 28, 0.5), transparent 58%),
    repeating-linear-gradient(
      180deg,
      transparent 0 18px,
      rgba(255, 255, 255, 0.06) 18px 19px
    ),
    #000;
}
.grad-7 {
  background:
    radial-gradient(
      circle at 75% 25%,
      rgba(232, 24, 28, 0.45),
      transparent 52%
    ),
    linear-gradient(160deg, #1b1b1f, #000);
}
.grad-8 {
  background:
    linear-gradient(135deg, #1b1b1f 0%, #000 60%),
    radial-gradient(circle at 25% 20%, rgba(232, 24, 28, 0.4), transparent 50%);
}
.grad-9 {
  background: conic-gradient(
    from 30deg at 40% 60%,
    #000,
    #4a0507,
    #17171a,
    #e8181c,
    #000
  );
}

/* ============================================================
   15. НАШИ МЕРОПРИЯТИЯ (динамика из kassir.kg)
   Карточки-афиши в фирменной палитре: постер (фото или градиент)
   + корпус с городом, названием, датой и кнопкой билетов.
   Разметку генерирует js/kassir.js.
   ============================================================ */

/* --- шапка секции: заголовок + кнопка «Все мероприятия» --- */
.events-head,
.artists-head {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.events-head > div,
.artists-head > div {
  max-width: 640px;
}
.events-all-btn,
.artists-all-btn {
  flex-shrink: 0;
}

/* --- сетка карточек: 3 колонки, на планшете и мобильном — 2 --- */
.events-grid {
  --cols-lg: 3;
  --cols-md: 2;
  --cols-sm: 2;
}

/* --- карточка мероприятия ---
   База — .card (секция 14b). Здесь только специфика афиши. */
.event-card.is-past {
  opacity: 0.92;
  --card-line-hover: var(--line);
  --card-shadow-hover: 0 34px 64px -28px rgba(0, 0, 0, 0.85);
}
.event-card.is-past::after {
  display: none;
}

/* постер: фото или фирменный градиент, если фото нет */
.ev-media {
  aspect-ratio: 16 / 10;
}
.event-card.is-past .ev-media .ev-img {
  filter: grayscale(0.35) brightness(0.85);
}
/* дата-бейдж поверх постера (z-index 3 — над оверлеем и play-кружком) */
.ev-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--red);
  padding: 6px 11px;
  border-radius: 100px;
  box-shadow: 0 6px 16px -8px rgba(232, 24, 28, 0.5);
}
.ev-badge--past {
  background: rgba(0, 0, 0, 0.78);
  color: var(--muted);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: none;
}

/* play-кружок на предстоящих — база .card-play, крупнее обычного */
.ev-play {
  --play-size: 60px;
}

/* корпус карточки */
.ev-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ev-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
/* город — база .card-label */
.ev-city {
  letter-spacing: 0.05em;
}
.ev-city svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  flex-shrink: 0;
}
.ev-time {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* название — база .card-title */
.ev-title {
  font-size: clamp(0.95rem, 1.35vw, 1.15rem);
  margin-bottom: 8px;
}
.ev-date {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 16px;
}
.ev-foot {
  margin-top: auto;
}
.ev-btn {
  padding: 11px 20px;
  font-size: 0.9rem;
}
.ev-done {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 9px 16px;
}

/* --- skeleton (состояние загрузки) --- */
.skel {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  animation: skel-shimmer 1.3s var(--ease) infinite;
}
.event-card.is-skeleton {
  pointer-events: none;
}
.event-card.is-skeleton .ev-media {
  border-radius: 0;
}
.skel-line {
  height: 12px;
  margin-bottom: 12px;
}
.skel-sm {
  width: 40%;
}
.skel-lg {
  width: 85%;
  height: 22px;
}
.skel-md {
  width: 60%;
}
.skel-btn {
  width: 120px;
  height: 40px;
  border-radius: 100px;
  margin-top: 6px;
}
@keyframes skel-shimmer {
  to {
    transform: translateX(100%);
  }
}

/* --- состояния «пусто» / «ошибка» --- */
.events-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: clamp(32px, 5vw, 56px) 20px;
  border: 1px dashed var(--line);
  border-radius: 16px;
}
.events-state .es-ico {
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(232, 24, 28, 0.14);
  display: grid;
  place-items: center;
}
.events-state .es-ico .play-tri {
  border-left-color: var(--red);
  border-width: 0.7em 0 0.7em 1.1em;
}
.events-state h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.events-state p {
  color: var(--muted);
  max-width: 42ch;
  margin: 0 auto 20px;
}

/* --- страница «Все мероприятия» --- */
.events-page-hero {
  position: relative;
  padding-top: 140px;
  padding-bottom: clamp(30px, 5vw, 50px);
  overflow: hidden;
}
.events-page-hero .spot {
  position: absolute;
  top: -30%;
  right: -10%;
  width: min(55vw, 640px);
  height: 150%;
  background: radial-gradient(
    closest-side at 62% 30%,
    rgba(232, 24, 28, 0.35),
    transparent 70%
  );
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}
.events-page-hero .wrap {
  position: relative;
  z-index: 1;
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}
.crumbs a:hover {
  color: var(--red);
}
.events-page-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4.1vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 16px 0 16px;
}
.events-page-sub {
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 60ch;
}
.events-count {
  color: #fff;
  font-weight: 700;
}
.events-list-section {
  padding-top: 0;
}

/* --- Кнопка «Вернуться на сайт» --- */
.events-back-btn {
  margin-top: 28px;
}
.events-back-btn .back-arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
.events-back-btn:hover .back-arrow {
  transform: rotate(45deg) translate(2px, 2px);
}
#events-sentinel {
  height: 1px;
}

/* --- адаптив секции мероприятий ---
   Колонки сетки переключает база (.cards-grid, секция 14b). */
@media (max-width: 900px) {
  .events-head,
  .artists-head {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* Узкая карточка: условие и порог — как в базе (секция 14b, «узкая
   карточка»), там же заголовок и метки. Здесь только специфика афиши. */
@media (max-width: 768px) {
  @container card (max-width: 280px) {
    /* постер тут всего ~167px шириной, и дата-бейдж в полный размер занимал
       почти половину: play-кружок наезжал на него, две красные плашки
       сливались в одно пятно. Уменьшаем бейдж и прижимаем к углу — из-под
       круга он выходит целиком. */
    .ev-badge {
      top: 8px;
      left: 8px;
      font-size: 0.6rem;
      letter-spacing: 0.04em;
      padding: 4px 8px;
    }
    .ev-body {
      padding: 12px 12px 14px;
    }
    .ev-top {
      flex-wrap: wrap;
      gap: 4px 8px;
      margin-bottom: 8px;
    }
    .ev-time {
      font-size: 0.66rem;
    }
    .ev-title {
      margin-bottom: 6px;
    }
    .ev-date {
      font-size: 0.78rem;
      margin-bottom: 12px;
    }
    .ev-btn {
      width: 100%;
      justify-content: center;
      padding: 9px 14px;
      font-size: 0.8rem;
    }
  }
}

/* Телефон: афиша занимает всю ширину.
   Две колонки давали карточку ~169px: постер с датой-бейджем, город,
   время, название, дата и кнопка билетов в такую ширину не влезали —
   всё съезжало в мелкий кегль и переносы. Афиша — главное действие
   секции, поэтому здесь плотность приносим в жертву читаемости.
   Артистам это не нужно: у портретной карточки контента вдвое меньше
   (см. секцию 16), она остаётся в двух колонках. */
@media (max-width: 560px) {
  .events-grid {
    --cols-sm: 1;
  }
  /* карточка теперь шире 280px, container-блок «узкая карточка» на неё
     не действует — возвращаем нормальный ритм корпуса */
  .ev-media {
    aspect-ratio: 16 / 9;
  }
  .ev-body {
    padding: 16px 18px 18px;
  }
  .ev-title {
    font-size: 1.12rem;
  }
  .ev-date {
    font-size: 0.92rem;
    margin-bottom: 14px;
  }
  /* кнопка на всю ширину — крупная цель для пальца */
  .ev-btn,
  .ev-done {
    width: 100%;
    justify-content: center;
    padding: 13px 20px;
    font-size: 0.95rem;
  }
  .ev-done {
    font-size: 0.66rem;
  }
}

/* skeleton-мерцание не бежит при reduced-motion (см. общий блок выше) */
@media (prefers-reduced-motion: reduce) {
  .skel::after {
    display: none;
  }
}

/* ============================================================
   16. АРТИСТЫ (данные — js/artists.js)
   Портретные карточки: фото или градиент-аватар с инициалами
   + имя, жанр, город и теги. База — .card (секция 14b): подъём,
   свет прожектора снизу и раскрытие тегов на hover идут оттуда.
   Здесь — специфика портрета: срез нижней грани фото (эхо
   фирменного плей-треугольника), инициалы, имя, жанр.
   Сетка: 4 колонки, 3 на планшете, 2 на мобильном.
   На странице artists.html добавляются поиск и чипы фильтра по
   жанру. Разметку карточек генерирует js/artists.js.
   ============================================================ */

.artists-grid {
  --cols-lg: 4;
  --cols-md: 3;
  --cols-sm: 2;
}

/* фото / аватар-заглушка
   срезанная нижняя грань — эхо фирменного плей-треугольника;
   через срез видно свет прожектора на hover */
.art-photo {
  aspect-ratio: 4 / 5;
  /* фон не задаём: его даёт .grad-* (секция 14c) — его вешает
     js/artists.js, а запасной вариант есть в .card-media. Своё
     background здесь перебивало бы всю палитру: у правил одинаковая
     специфичность, а этот блок идёт ниже по файлу. */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%);
  /* 4:5 — стартовая пропорция, но фото забирает и весь запас высоты:
     карточки тянутся по самому длинному имени в ряду, и без этого
     под короткими именами оставалась пустая полоса фона */
  flex: 1;
  min-height: 0;
}
/* оверлей на портрете тянем чуть выше — под срезом лежит подпись */
.art-photo .card-scrim {
  opacity: 0.5;
}
.art-initials {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.01em;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  /* приподняты, чтобы срез нижней грани не поджимал инициалы */
  transform: translateY(-6%);
  transition: transform 0.5s var(--ease);
}
.artist-card:hover .art-initials,
.artist-card:focus-within .art-initials {
  transform: translateY(-6%) scale(1.05);
}

.art-body {
  padding: 14px 18px 18px;
  position: relative;
  z-index: 2;
}
/* имя — база .card-title */
.art-name {
  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  margin-bottom: 10px;
}
.art-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.art-genre {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid rgba(232, 24, 28, 0.4);
  border-radius: 100px;
  padding: 4px 10px;
  transition: background 0.3s var(--ease);
}
.artist-card:hover .art-genre,
.artist-card:focus-within .art-genre {
  background: rgba(232, 24, 28, 0.14);
  border-color: rgba(232, 24, 28, 0.75);
}
.art-city {
  font-size: 0.82rem;
  color: var(--muted);
}

/* Теги проявляются по hover — механика в базе (.card-reveal) */
.art-tags > span {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
  font-size: 0.75rem;
  color: var(--muted);
}
.art-tags em {
  font-style: normal;
}
.art-tags em::before {
  content: "#";
  color: rgba(255, 255, 255, 0.38);
}

/* skeleton артиста использует общие .skel из блока событий */
.artist-card.is-skeleton .art-photo {
  border-radius: 0;
}

/* кнопка «Подробнее» под сеткой на лендинге */
/* --- поиск + фильтр по жанрам (страница artists.html) --- */
.artists-filter {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.artists-search {
  position: relative;
  max-width: 460px;
}
.artists-search .as-ico {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 1.8;
  pointer-events: none;
}
.artists-search input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 13px 18px 13px 44px;
  color: #fff;
  font-family: var(--font-text);
  font-size: 1rem;
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.artists-search input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}
.artists-search input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(232, 24, 28, 0.2);
}
.artists-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.genre-chip {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 16px;
  cursor: pointer;
  transition:
    color 0.2s var(--ease),
    background 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.genre-chip:hover {
  color: #fff;
  border-color: var(--red);
}
.genre-chip.is-active {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}

/* --- адаптив секции артистов ---
   Колонки сетки переключает база (.cards-grid, секция 14b).
   Узкая карточка: условие и порог — как в базе (секция 14b, «узкая
   карточка»), там же имя и общие метки. Здесь только специфика артиста. */
@media (max-width: 768px) {
  @container card (max-width: 280px) {
    .art-body {
      padding: 12px 12px 14px;
    }
    .art-initials {
      font-size: 2.4rem;
    }
    /* имя перебивает общий clamp базы: у портретной карточки под подпись
       отведён весь корпус, и её нижняя граница (≈12.7px на 390px экране)
       делала имя артиста мельче города под ним. Специфичность (0,2,0) —
       ровно как у .card .card-title в базе, и правило идёт ниже по файлу */
    .card .art-name {
      font-size: clamp(0.84rem, 0.62rem + 3cqi, 1.06rem);
      margin-bottom: 7px;
    }
    /* жанр и город в 169px не помещаются в строку — ставим друг под друга,
       так обе метки читаются целиком, без переносов внутри слова */
    .art-meta {
      flex-direction: column;
      align-items: flex-start;
      gap: 5px;
    }
    .art-genre {
      font-size: 0.6rem;
      padding: 3px 8px;
      /* длинный жанр («электронная музыка») уводим в многоточие, а не в
         две строки: иначе высота ряда прыгает по самой длинной подписи */
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
    }
    .art-city {
      font-size: 0.72rem;
    }
    /* Теги на телефоне скрыты. На тач-экране .card-reveal показан всегда
       (hover'а нет), и три хэштега в узкой карточке шли в 2–3 строки —
       они дублировали жанр и распирали карточку. Полный набор остаётся
       на десктопе и на странице артиста. */
    .art-tags {
      display: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .artist-card:hover .art-initials,
  .artist-card:focus-within .art-initials {
    transform: translateY(-6%);
  }
}

/* ============================================================
   17. О КОМПАНИИ + МЕЖДУНАРОДНЫЕ ПРОЕКТЫ
   Мозаика из пяти AI-заглушек (.sc-mosaic/.sc-tile) удалена вместе со
   стилями: вместо неё один реальный кадр рядом с текстом. Ниже — полоса
   про туры, тоже на фотографии во всю ширину.
   ============================================================ */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.4vw, 56px);
  align-items: center;
}
.about-grid > * {
  min-width: 0;
}
.about-media {
  position: relative;
  border-radius: var(--card-radius);
  overflow: hidden;
  border: 1px solid var(--card-line);
}
.about-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.about-media:hover img {
  transform: scale(1.03);
}
.about-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.7vw, 2.15rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 14px 0 18px;
  text-wrap: balance;
}
.about-body p {
  color: var(--muted);
  line-height: 1.62;
  margin-bottom: 14px;
  max-width: 54ch;
}
/* Мобильные: блок обязан стоять после базовых правил выше — медиазапрос
   не добавляет специфичности, и вынесенный наверх файла он проигрывал. */
@media (max-width: 860px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .about-media img {
    max-height: 320px;
  }
}
@media (max-width: 560px) {
  .about-media img {
    max-height: 230px;
  }
  .about-body h2 {
    margin: 12px 0 14px;
  }
  /* в одну колонку ограничение по ширине строки уже не нужно */
  .about-body p {
    max-width: none;
  }
}

/* --- полоса про международные проекты --- */
.celeb-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
.celeb-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.celeb-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  filter: grayscale(1) contrast(1.05) brightness(0.6);
}
.celeb-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.82) 42%,
    rgba(0, 0, 0, 0.55) 100%
  );
}
.celeb-inner {
  max-width: 62ch;
}
.celeb-inner h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.9vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 14px 0 18px;
  text-wrap: balance;
}
.celeb-inner > p {
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.62;
  max-width: 58ch;
}
.celeb-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 30px;
}
.celeb-tags li {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.28);
}

/* ============================================================
   18. ГАЛЕРЕЯ + ЛАЙТБОКС
   Ровная сетка кадров с прошлых событий: 9 снимков, 3 × 3 на десктопе
   и 2 колонки на мобильном. База карточки — .card (секция 14b), поэтому
   кадр живёт по тем же правилам, что афиша и портрет артиста.
   Все тайлы одного размера — квадрат (aspect-ratio), снимок обрезается
   по нему (object-fit: cover), так что вертикальные и горизонтальные
   кадры стоят в один рост и ряды смыкаются без дыр.
   Поверх снимка — подпись .g-cap: тип работы + артист.
   В сетке грузится лёгкий превью-файл (*-thumb.jpg), полноразмерный
   лежит в data-src кнопки — оттуда его берёт лайтбокс. Клик по кадру
   открывает полноэкранный просмотр с листанием ← / →. Поведение —
   js/gallery.js.
   ============================================================ */
.gallery {
  background: var(--bg-bottom);
}

/* ровная сетка: 9 кадров → 3 ряда по 3 (на мобильном 2 колонки) */
.gallery-grid {
  --cols-lg: 3;
  --cols-md: 3;
  --cols-sm: 2;
}

/* тайл-кадр = кнопка (доступно с клавиатуры, кликабельно).
   Квадрат — компромисс между вертикальными и горизонтальными
   снимками: ни те, ни другие не обрезаются слишком сильно. */
.g-item {
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  aspect-ratio: 1 / 1;
}

/* медиа-зона кадра — снимок на всю площадь тайла */
.g-media {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1;
}

/* Снимок кадра. В сетке зум на hover и переход берутся у .card-media img
   (секция 14b); здесь — общая раскладка, она же нужна снимку в лайтбоксе,
   который вне .card-media. У каждого кадра свой снимок (assets/gallery),
   квадратный тайл обрезает его по короткой стороне. */
.g-photo {
  width: 100%;
  height: 100%;
  /* .g-media — грид-контейнер (.card-media, place-items: center), а у
     грид-элемента min-height по умолчанию auto: вертикальный снимок
     распирал бокс до собственной высоты и вылезал за тайл, обрезаясь
     по центру, — object-position ниже при этом ничего не решал.
     Обнуляем минимум: высота снимка честно равна высоте тайла. */
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  /* Квадратный тайл режет снимок по длинной стороне, и «интересное» на
     концертных кадрах редко лежит по центру: у вертикальных сцена и люди
     внизу, у горизонтальных — сбоку. Точку кадрирования задаём каждому
     снимку отдельно — в --g-x / --g-y на его кнопке (см. разметку). */
  object-position: var(--g-x, 50%) var(--g-y, 50%);
  display: block;
}
/* эквалайзер-акцент внизу кадра — фирменный мотив.
   Правый нижний угол: слева внизу лежит подпись (.g-cap), с ней
   эквалайзер сталкивался. z-index 2 — над оверлеем (.card-scrim). */
.g-eq {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 28px;
  z-index: 2;
  opacity: 0.85;
  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.g-eq i {
  width: 5px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 2px;
}
.g-eq i:nth-child(1) {
  height: 40%;
}
.g-eq i:nth-child(2) {
  height: 90%;
}
.g-eq i:nth-child(3) {
  height: 60%;
}
.g-eq i:nth-child(4) {
  height: 100%;
}
.g-eq i:nth-child(5) {
  height: 50%;
}

/* подпись поверх кадра: имя артиста («Basta»). Подложка-градиент —
   общий .card-scrim, поэтому здесь только раскладка. Имя чуть
   подъезжает вверх на hover — «кадр оживает». */
.g-cap {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* справа внизу — эквалайзер, держим под него угол свободным */
  padding: 42px 62px 16px 16px;
}
/* имя артиста — база .card-title.
   Кегль меряем в cqi, от ширины самого кадра, а не в vw: тайл галереи
   на том же экране заметно уже афиши (3 колонки против 2), и по vw
   длинное имя рвалось переносом посреди слова. */
.g-name {
  font-size: clamp(0.7rem, 0.68rem + 1.1cqi, 1rem);
  transform: translateY(0);
  transition: transform 0.4s var(--ease);
}
.g-item:hover .g-name,
.g-item:focus-visible .g-name {
  transform: translateY(-2px);
}

/* эквалайзер уезжает, освобождая кадр под play-кружок */
.g-item:hover .g-eq,
.g-item:focus-visible .g-eq {
  opacity: 0;
  transform: translateY(6px);
}

/* play-кружок-«лупа» — база .card-play */
.g-view {
  --play-size: 62px;
}

/* --- лайтбокс (полноэкранный просмотр) --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.lightbox[hidden] {
  display: none;
}
.lightbox.open {
  opacity: 1;
}
/* блокируем прокрутку фона, пока открыт лайтбокс */
body.lb-lock {
  overflow: hidden;
}

/* Кадр вписывается в экран целиком — и по ширине, и по высоте.
   Пропорцию кадра (`3 / 4`, `4 / 3`, …) в `--lb-r` кладёт js/gallery.js
   из data-ratio; отсюда же считается ширина фигуры. Без ограничения по
   высоте вертикальный кадр 3/4 при ширине 900px уезжал за экран на 1200px.
   `--lb-cap-h` — запас под подпись и gap под сценой (2 строки на узком). */
.lb-figure {
  --lb-pad: clamp(16px, 4vw, 48px);
  --lb-cap-h: 124px; /* строка «категория + имя + счётчик» и строка описания */
  --lb-max-h: calc(100svh - 2 * var(--lb-pad) - var(--lb-cap-h));
  margin: 0;
  /* ширина = меньшее из: экран, предел 900px, высота × пропорция */
  width: min(92vw, 900px, var(--lb-max-h) * (var(--lb-r, 3 / 2)));
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: scale(0.96);
  transition: transform 0.3s var(--ease);
}
.lightbox.open .lb-figure {
  transform: scale(1);
}
.lb-stage {
  display: block;
  width: 100%;
  aspect-ratio: var(--lb-r, 3 / 2);
  background: linear-gradient(135deg, #151517, #08080a);
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: hidden;
}
/* в лайтбоксе подписи лежат под «сценой», угол свободен — эквалайзер
   возвращается влево (right сбрасываем, иначе растянется на всю ширину) */
.lb-stage .g-eq {
  left: 24px;
  right: auto;
  bottom: 24px;
  height: 44px;
}
.lb-stage .g-eq i {
  width: 7px;
}
/* под сценой — то же имя, что на кадре, плюс счётчик */
.lb-cap {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  color: #fff;
}
.lb-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.lb-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.05em;
}
/* описание кадра — всегда с новой строки, поэтому занимаем всю ширину
   флекс-ряда (счётчик прижат вправо через margin-left:auto, и без этого
   описание село бы между именем и счётчиком) */
.lb-desc {
  flex: 1 0 100%;
  margin-top: -4px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--muted);
}
.lb-desc[hidden] {
  display: none;
}

/* низкий экран (телефон в альбомной): высоты почти нет, а фигура из-за
   этого узкая — подпись переносилась на 3–4 строки и выдавливала кадр
   за экран. Держим её в одну строку, тогда запас --lb-cap-h честный. */
@media (max-height: 500px) {
  .lb-figure {
    --lb-cap-h: 52px;
  }
  .lb-cap {
    flex-wrap: nowrap;
  }
  /* высоты нет — описание прячем, иначе оно сломает однострочную подпись */
  .lb-desc {
    display: none;
  }
  .lb-count {
    white-space: nowrap;
  }
  .lb-name {
    font-size: 1.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* кнопки лайтбокса — закрыть / назад / вперёд */
.lb-close,
.lb-nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: rgba(20, 29, 82, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  transition:
    background 0.2s var(--ease),
    border-color 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.lb-close:hover,
.lb-nav:hover {
  background: var(--red);
  border-color: var(--red);
}
.lb-close {
  top: clamp(16px, 3vw, 28px);
  right: clamp(16px, 3vw, 28px);
  width: 48px;
  height: 48px;
}
.lb-close svg,
.lb-nav svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lb-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
}
.lb-nav:hover {
  transform: translateY(-50%) scale(1.06);
}
.lb-prev {
  left: clamp(12px, 3vw, 28px);
}
.lb-next {
  right: clamp(12px, 3vw, 28px);
}

/* --- адаптив галереи ---
   Колонки сетки переключает база (.cards-grid, секция 14b). Имя и метку
   на узком кадре поджимает она же — по своему условию (@media +
   @container, секция 14b, «узкая карточка»).

   Коридор под эквалайзер — правый отступ .g-cap — от вьюпорта не зависит
   вовсе, только от ширины самого кадра, поэтому здесь голый @container
   без @media: на мобильном тайл ~160px, и коридор в 62px съедал треть
   строки — длинное имя переставало влезать целиком. */
@container card (max-width: 320px) {
  .g-cap {
    padding: 28px 42px 10px 10px;
  }
  .g-eq {
    right: 10px;
    bottom: 10px;
    height: 18px;
  }
  .g-eq i {
    width: 3px;
  }
}
@media (max-width: 520px) {
  .lb-nav {
    width: 46px;
    height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .g-item:hover .g-name,
  .g-item:focus-visible .g-name {
    transform: none;
  }
  .lightbox,
  .lb-figure {
    transition: none;
  }
}

/* ============ ПОЛОСА ДОВЕРИЯ (#partners) ============
   Заменила прежнюю секцию-стену логотипов (.partners-grid) внизу
   страницы: те же партнёры, но сразу под первым экраном и одной
   компактной строкой. Логотипы приглушены до монохрома, чтобы
   пёстрые исходники не спорили друг с другом; цвет проявляется
   на наведении. */

.trust {
  border-block: 1px solid var(--line-soft);
  background: var(--section-bg);
  padding: clamp(20px, 2.4vw, 30px) 0;
}
.trust-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 30px);
}
.trust-label,
.trust-note {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}
.trust-note {
  color: rgba(255, 255, 255, 0.34);
  margin-left: auto;
}
/* логотипы — отдельным рядом на всю ширину под подписью и примечанием
   и без переноса: все партнёры в одну линию. Высота зависит от ширины
   экрана (--logo-h), поэтому ряд сжимается вместе с окном, а не ломается */
.trust-logos {
  --logo-h: clamp(16px, 2vw, 24px);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: clamp(12px, 1.6vw, 24px);
  flex: 1 0 100%;
  order: 1;
}
.trust-logos img {
  display: block;
  height: var(--logo-h);
  width: auto;
  max-width: 132px;
  object-fit: contain;
  /* исходники пёстрые и разной плотности: часть тёмных SVG на чёрном
     пропадала, поэтому осветляем умеренно и добавляем контраст, а не
     выбеливаем в пятно */
  filter: grayscale(1) brightness(1.35) contrast(1.15);
  opacity: 0.62;
  transition:
    opacity 0.4s var(--ease),
    filter 0.4s var(--ease);
}
/* общая высота рассчитана на широкие логотипы-надписи (3:1 и шире).
   KudaGo почти квадратный, Pillars и Circus Asia — 2:1, поэтому по этой
   высоте они выходили заметно мельче соседей: подтягиваем их отдельно */
.trust-logos img[alt="KudaGo"] {
  height: calc(var(--logo-h) * 1.5);
}
.trust-logos img[alt="Pillars.kg"] {
  height: calc(var(--logo-h) * 1.67);
}
.trust-logos img[alt="Escape Fest"] {
  height: calc(var(--logo-h) * 1.33);
}
.trust-logos img[alt="Circus Asia"] {
  height: calc(var(--logo-h) * 1.83);
}
.trust-logos a:hover img,
.trust-logos a:focus-visible img {
  opacity: 1;
  filter: none;
}

/* до 760px в одну линию не влезает — логотипы переносятся. Медиазапрос
   стоит здесь, а не в общем блоке адаптива выше: там его перебивали
   базовые правила, идущие ниже по файлу */
@media (max-width: 760px) {
  .trust-inner {
    gap: 14px;
  }
  /* примечание о географии перестаёт прижиматься вправо и уходит
     отдельной строкой под логотипы */
  .trust-note {
    margin-left: 0;
    width: 100%;
  }
  .trust-logos {
    --logo-h: 22px;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 18px 24px;
    order: 0;
  }
}

/* ================= 15. ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКОВ ================= */
/* Кнопка в шапке: код текущего языка. По клику открывается модальное
   окно со списком языков в две колонки (без скролла). Пункты — обычные
   <a href>, поэтому переключение работает и без JavaScript. */
.lang {
  position: relative;
  flex-shrink: 0;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1;
  transition:
    background 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.lang-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--muted);
}
.lang-btn:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}
.lang-globe {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}
.lang-code {
  letter-spacing: 0.04em;
}
.lang-caret {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
  transition: transform 0.25s var(--ease);
}
.lang.open .lang-caret {
  transform: rotate(180deg);
}

/* ----- Окно выбора языка: модалка по центру вьюпорта ----- */
/* .lang-modal — слой на весь вьюпорт: затемняет страницу (оверлей ловит
   клики мимо) и центрирует .lang-dialog. Модалка портируется в <body>
   (у шапки backdrop-filter, ломающий position:fixed у потомков). */
.lang-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.lang-modal[hidden] {
  display: none;
}
.lang-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: langOverlayIn 0.2s var(--ease) both;
}
.lang-dialog {
  position: relative; /* над оверлеем */
  width: min(100%, 460px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #121214;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, 0.85);
  padding: 14px;
  animation: langDialogIn 0.22s var(--ease) both;
}
@keyframes langOverlayIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes langDialogIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.lang-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 6px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.lang-menu-head span {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--muted);
}
.lang-menu-close {
  display: inline-flex;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lang-menu-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.lang-menu-close:hover {
  background: rgba(255, 255, 255, 0.12);
}
.lang-menu-close:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}
/* список в две колонки — без вертикального скролла */
.lang-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.lang-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition:
    background 0.15s var(--ease),
    border-color 0.15s var(--ease),
    color 0.15s var(--ease);
}
.lang-item:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--muted);
  color: #fff;
}
.lang-item:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}
.lang-item .lang-native {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lang-item .lang-check {
  opacity: 0;
  color: var(--red);
  font-weight: 700;
  flex-shrink: 0;
}
.lang-item.is-current {
  background: rgba(232, 24, 28, 0.12);
  border-color: rgba(232, 24, 28, 0.5);
  color: #fff;
}
.lang-item.is-current .lang-check {
  opacity: 1;
}

body.lang-lock {
  overflow: hidden;
}

/* мобильный: те же две колонки, компактнее padding и шрифт */
@media (max-width: 600px) {
  /* сама кнопка-переключатель компактнее */
  .lang-btn {
    height: 34px;
    padding: 0 9px;
    gap: 5px;
    font-size: 0.82rem;
  }
  .lang-globe {
    width: 15px;
    height: 15px;
  }
  .lang-caret {
    width: 14px;
    height: 14px;
  }
  .lang-dialog {
    padding: 12px;
  }
  .lang-item {
    padding: 11px 10px;
    font-size: 0.9rem;
    gap: 6px;
  }
}

/* очень узкие экраны: чуть плотнее, чтобы обе колонки помещались */
@media (max-width: 360px) {
  .lang-item {
    padding: 10px 8px;
    font-size: 0.84rem;
  }
}

/* ---- Шапка на узких телефонах ----
   На Mobile M (≤480) три действия справа (телефон, язык, меню) не влезали
   в капсулу и бургер вылезал за её правый край. Поджимаем поля и гэпы,
   у переключателя языка убираем каретку (оставляем глобус + «RU»).
   Блок стоит здесь намеренно — после базовых .lang-btn/.burger (те ниже
   по файлу), иначе при равной специфичности базовые правила перебили бы
   эти по порядку следования. */
@media (max-width: 480px) {
  header.site .bar {
    gap: 10px;
    padding: 0 12px;
  }
  .header-cta {
    gap: 8px;
  }
  .lang-btn {
    gap: 5px;
    padding: 0 10px;
  }
  .lang-caret {
    display: none;
  }
}

/* Mobile S (≤380): места впритык — язык сворачивается в иконку-глобус
   (текущий язык виден в модалке при открытии), а телефон, язык и меню
   становятся одинаковыми кругами 36px. */
@media (max-width: 380px) {
  header.site .bar {
    gap: 8px;
  }
  header.site .logo-img {
    height: 20px;
  }
  .header-cta {
    gap: 6px;
  }
  .header-phone {
    width: 36px;
    height: 36px;
  }
  .lang-code {
    display: none;
  }
  .lang-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
  }
  .burger {
    width: 36px;
    height: 36px;
  }
}

/* уважаем prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .lang-caret {
    transition: none;
  }
  .lang-dialog,
  .lang-overlay {
    animation: none;
  }
}

/* ============================================================
   ФОРМЫ-СЕКЦИИ: «станьте рекламным партнёром» (#adpartner)
   и «стать волонтёром» (#volunteer)

   Обе секции переиспользуют существующие компоненты формы
   (.form-card, .field, .form-row, .form-submit, .form-success),
   поэтому здесь только то, чего в них не хватает:
   узкая карточка по центру, метка-не-<label> и переключатель да/нет.
   ============================================================ */

/* карточка формы во всю ширину секции — держим ширину читаемой.
   Ширина одна на обе формы (--form-maxw), карточка центрируется в
   .wrap; на узких экранах max-width не срабатывает, поэтому вся
   адаптивность полей и колонок остаётся как была. */
.form-card--narrow {
  width: 100%;
  max-width: var(--form-maxw);
  margin: 0 auto;
}

/* --- Текст рядом с формой: слева объяснение, справа поля ---
   Так устроены обе формы-секции, #adpartner и #volunteer. В разметке
   порядок «сначала текст, потом форма»: когда колонки схлопываются на
   планшете и телефоне, посетитель сначала читает, зачем заявка, и
   только потом видит поля. */
@media (min-width: 1025px) {
  .form-split {
    display: grid;
    /* колонка формы шире колонки текста: в ней поля, а не абзац */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(32px, 4.5vw, 64px);
    align-items: center;
  }
  /* в две колонки ширину карточки задаёт сетка: с --form-maxw форма
     упёрлась бы в 760px, а текст остался бы в узкой полоске */
  .form-split .form-card--narrow {
    max-width: none;
  }
  /* текст больше не шапка по центру, а левая колонка */
  .form-section .form-split .section-head {
    max-width: 46ch;
    margin: 0;
    text-align: left;
  }
  .form-section .form-split .section-head p {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Карточка узкая, поэтому добавляем ей воздуха по вертикали, иначе
   при такой ширине она выглядит приплюснутой: чуть больше
   вертикальных отступов, шаг между полями и высота комментария.
   Всё через clamp/em-независимые значения — на мобильных карточка
   растёт в высоту так же плавно, как и раньше. */
.form-section .form-card--narrow {
  padding-block: clamp(26px, 3.4vw, 36px);
}
.form-section .form-card--narrow .field {
  margin-bottom: 16px;
}
.form-section .form-card--narrow .field textarea {
  min-height: 104px;
}

/* Заголовки этих секций — целые предложения, а не одно слово, как в
   остальных .section-head. На базовых 5rem они превращаются в стену
   капса на полэкрана, поэтому здесь шрифт мельче, а блок отцентрован
   по карточке формы под ним. */
.form-section .section-head {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.form-section .section-head h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.06;
}
.form-section .section-head p {
  margin-left: auto;
  margin-right: auto;
}

/* группе радиокнопок нужен <span>, а не <label> — повторяем вид .field label */
.field .field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

/* переключатель «да / нет»: две равные кнопки высотой с обычный input */
.choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* .choice .choice-opt, а не просто .choice-opt: это <label> внутри .field,
   и правило `.field label` (мелкий моно-капс для подписей) иначе перебивает
   по специфичности и шрифт, и выравнивание */
.choice .choice-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  padding: 10px;
  background: var(--bg-bottom);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 0.95rem;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  user-select: none;
  transition:
    border-color 0.2s var(--ease),
    color 0.2s var(--ease),
    background 0.2s var(--ease);
}
/* сам input не прячем через display:none — иначе он выпадет из таба */
.choice .choice-opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.choice .choice-opt:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.choice .choice-opt:has(input:checked) {
  border-color: var(--red);
  background: rgba(232, 24, 28, 0.12);
  color: #fff;
}
.choice .choice-opt:has(input:focus-visible) {
  outline: none;
  box-shadow: 0 0 0 3px rgba(232, 24, 28, 0.2);
}

/* Safari < 15.4 не знает :has() — там подсветка выбранного пропадает,
   но форма остаётся рабочей: активный вариант виден по фокусу. */

/* Код страны и номер — под одной подписью «Телефон»: это одно поле, а не
   два соседних, поэтому правило «форма в один столбик» его не касается.
   В списке только код («+996», без флага и названия страны) — поэтому
   колонка узкая. */
.phone-pair {
  display: grid;
  grid-template-columns: minmax(0, 88px) minmax(0, 1fr);
  gap: 8px;
}

/* код страны рядом с полем номера: в списке — флаг, страна и код,
   сам номер набирают без кода */
.cel-phone-row {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
}
.field select.phone-code {
  padding-right: 38px;
  text-overflow: ellipsis;
}
/* Порядок правил важен: специфичность та же, что у .field
   select.phone-code выше, поэтому узкий вариант для пары «код + номер»
   идёт последним и выигрывает. */
.phone-pair select.phone-code {
  padding-left: 12px;
  padding-right: 22px;
  text-overflow: clip;
}

/* ============================================================
   Плавающая кнопка WhatsApp (фикс. в правом нижнем углу)
   z-index 250 — над контентом и хедером (100), но под
   лайтбоксом/модалками (300) и тостами (3000).
   ============================================================ */
.wa-float {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 250;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow:
    0 10px 28px rgba(37, 211, 102, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.wa-float:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 16px 34px rgba(37, 211, 102, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.35);
}
.wa-float:active {
  transform: translateY(-1px) scale(1.02);
}
.wa-float svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}
/* лёгкая пульсация-ореол для привлечения внимания */
.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25d366;
  z-index: -1;
  animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  70%,
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float::before {
    animation: none;
    display: none;
  }
  .wa-float {
    transition: none;
  }
}
@media (max-width: 560px) {
  .wa-float {
    width: 52px;
    height: 52px;
  }
  .wa-float svg {
    width: 28px;
    height: 28px;
  }
}

/* ============================================================
   СТРАНИЦА УСЛУГИ: БУКИНГ АРТИСТОВ (booking.html)

   Своего визуального языка у страницы нет — она собрана из уже
   существующих блоков: шапка страницы .events-page-hero (как в
   /artists и /events), раскладка .about-grid (как в «о компании»),
   карточки .stack-card (как в #process) и форма-секция
   .form-section > .form-split (как в #adpartner / #volunteer).

   Здесь — только то, чего в них не хватает: пара кнопок под
   заголовком, примечание в тексте, сетка на восемь шагов вместо
   четырёх и три блока со списком работ.
   ============================================================ */

/* --- Кнопки под заголовком страницы ---
   Тот же ряд, что .hero-cta на главной; на телефоне обе кнопки
   растягиваются на ширину и встают в столбик. */
.bk-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

/* --- Примечание в тексте ---
   Оговорка про условия артиста: мельче абзаца и с красной чертой,
   чтобы читалась как сноска, а не как ещё один абзац. */
.bk-note {
  margin-top: 20px;
  padding-left: 14px;
  border-left: 2px solid var(--red);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* --- Восемь шагов процесса ---
   Базу берём у .stack-grid (#process), меняем только число колонок:
   восемь карточек в четыре колонки — это два ровных ряда. Ниже 1080px
   их четыре по две, на телефоне — по одной. Правила идут последними в
   файле, поэтому перебивают брейкпоинты .stack-grid при равной
   специфичности. */
.bk-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* у шагов нет ссылки-подвала, как у карточек #process, — снимаем
   отступ под последним абзацем, иначе внизу карточки висит пустая
   полоса в 18px */
.bk-steps .stack-card p:last-child {
  margin-bottom: 0;
}

/* --- Три блока со списком работ ---
   Двенадцать пунктов разложены 4 / 4 / 4, поэтому колонки выходят
   одинаковой высоты и снизу не остаётся обрубленной третьей. */
.bk-scope {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
.bk-group {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.2vw, 30px);
  border: 1px solid var(--card-line);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  transition:
    transform 0.5s var(--ease),
    border-color 0.5s var(--ease);
}
.bk-group:hover {
  transform: translateY(-4px);
  border-color: var(--card-line-hover);
}
.bk-group-title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
/* пункт списка устроен как в .caps-list на главной:
   треугольник — подпись — пояснение */
.bk-list {
  list-style: none;
  display: grid;
  gap: 18px;
}
.bk-list > li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.bk-list .play-tri {
  flex: none;
  margin-top: 6px;
}
.bk-list b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}
.bk-list li > span > span {
  display: block;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* --- Планшет ---
   Три колонки на 1024px стали бы слишком узкими под текст, поэтому
   блоки разворачиваются на всю ширину, а список внутри каждого встаёт
   в две колонки: 4 пункта = ровные 2 × 2, пустых мест не остаётся. */
@media (max-width: 1080px) {
  .bk-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bk-scope {
    grid-template-columns: minmax(0, 1fr);
  }
  .bk-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px clamp(20px, 3vw, 36px);
  }
}

/* --- Телефон --- */
@media (max-width: 600px) {
  .bk-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .bk-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  /* кнопки под заголовком — как в первом экране главной: во всю
     ширину и в столбик, чтобы не переносились по одному слову */
  .bk-hero-cta {
    flex-direction: column;
    gap: 12px;
  }
  .bk-hero-cta .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- Кадр во вводном блоке ---
   Базовый .about-grid центрирует колонки, и рядом с более высоким
   текстом над фотографией и под ней оставались пустые полосы.
   Здесь кадр тянется на всю высоту строки. Ниже 861px колонки и так
   схлопываются в одну, поэтому правило только для двух колонок. */
@media (min-width: 861px) {
  #booking-intro .about-grid {
    align-items: stretch;
  }
  #booking-intro .about-media img {
    max-height: none;
  }
}

/* --- Список кодов страны в форме ---
   Пара «код + номер» досталась от прежней формы сотрудничества
   (.phone-pair.cel-phone-row), а в списке там флаг, страна и код.
   На узком экране «Kyrgyzstan» в колонку не помещается: базовое
   правило .phone-pair режет строку посреди слова — возвращаем
   многоточие. Селектор с id, чтобы перебить .phone-pair select. */
#form-booking select.phone-code {
  text-overflow: ellipsis;
}

/* --- Длинные слова в заголовках ---
   Немецкие составные слова («Künstleranfrage», «Zusammenarbeit») в
   капсе шире колонки на узком экране: строка не переносится и текст
   вылезает за сетку, добавляя горизонтальную прокрутку. Разрешаем
   перенос внутри слова — только на этой странице, чтобы не трогать
   типографику остальных. */
#booking-page-title,
#booking-intro h2,
#booking-process h2,
#booking-scope h2,
#booking-form h2,
.bk-steps .stack-card h3,
.bk-group-title,
.bk-list b {
  overflow-wrap: break-word;
}

/* --- Заголовок формы ---
   В двухколоночной раскладке (от 1025px) текстовая колонка ~470px, а в
   заголовке формы стоит одно длинное слово: «сотрудничество»,
   «Zusammenarbeit», «collaborazione». На базовом кегле 2.6rem оно шире
   колонки, и правило выше рвёт его посреди слова. Кегль ниже ровно
   настолько, чтобы самое длинное слово вставало целиком — на всех
   тринадцати языках и на всех ширинах от 1025px и выше. */
#booking-form h2 {
  font-size: clamp(1.6rem, 2.7vw, 2.15rem);
}

/* --- Поводы: восемь карточек ---
   Карточка короче .stack-card: иконка, название и одна строка
   пояснения. Восемь штук в четыре колонки — два ровных ряда;
   ниже 1080px их две, на телефоне одна. */
.bk-occ-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
.bk-occ {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid var(--card-line);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  transition:
    transform 0.5s var(--ease),
    border-color 0.5s var(--ease);
}
.bk-occ:hover {
  transform: translateY(-4px);
  border-color: var(--card-line-hover);
}
/* иконка в круге: тот же приём, что у .foot-socials — контурная
   окружность, на hover карточки заливается красным */
.bk-occ-ic {
  width: 44px;
  height: 44px;
  flex: none;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition:
    background 0.4s var(--ease),
    border-color 0.4s var(--ease);
}
.bk-occ-ic svg,
.bk-gen-ic svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bk-occ:hover .bk-occ-ic {
  background: var(--red);
  border-color: var(--red);
}
.bk-occ h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.bk-occ p {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
  margin-top: auto;
}

/* --- Артисты любого жанра ---
   Главное утверждение страницы: кегль между section-head h2 и обычным
   абзацем, красная черта слева — как у .bk-note, только крупнее. */
.bk-gen-lead {
  max-width: 62ch;
  margin: calc(-1 * clamp(6px, 1vw, 14px)) 0 clamp(26px, 3vw, 38px);
  padding-left: clamp(14px, 1.4vw, 20px);
  border-left: 3px solid var(--red);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.bk-gen-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
.bk-gen {
  padding: clamp(22px, 2.2vw, 30px);
  border: 1px solid var(--card-line);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  transition:
    transform 0.5s var(--ease),
    border-color 0.5s var(--ease);
}
.bk-gen:hover {
  transform: translateY(-4px);
  border-color: var(--card-line-hover);
}
.bk-gen-ic {
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition:
    background 0.4s var(--ease),
    border-color 0.4s var(--ease);
}
.bk-gen:hover .bk-gen-ic {
  background: var(--red);
  border-color: var(--red);
}
.bk-gen h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.bk-gen p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}
/* призыв под блоком — тот же ряд, что .bk-hero-cta наверху страницы */
.bk-gen-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(26px, 3vw, 38px);
}

/* --- Планшет --- */
@media (max-width: 1080px) {
  .bk-occ-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Три колонки здесь стали бы уже 280px и рвали заголовки по словам.
     Блоки разворачиваются на всю ширину — как .bk-scope выше, — но
     карточка при этом перестраивается в широкую строку: иконка слева,
     текст справа. Иначе под двумя строками остаётся пустое поле. */
  .bk-gen-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .bk-gen {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 18px;
    align-items: start;
  }
  .bk-gen-ic {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }
  .bk-gen h3 {
    margin-bottom: 6px;
  }
}

/* --- Телефон --- */
@media (max-width: 600px) {
  .bk-occ-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  /* кнопки в столбик во всю ширину — как в первом экране страницы */
  .bk-gen-cta {
    flex-direction: column;
    gap: 12px;
  }
  .bk-gen-cta .btn {
    width: 100%;
    justify-content: center;
  }
}

/* длинные составные слова в названиях поводов (немецкий, польский)
   на узкой колонке шире карточки — разрешаем перенос внутри слова */
.bk-occ h3,
.bk-gen h3,
.bk-gen-lead,
#booking-occ-title,
#booking-gen-title {
  overflow-wrap: break-word;
}

/* ============================================================
   ПОЛОСА-ПРИЗЫВ: БУКИНГ АРТИСТОВ (.book-band)

   Третье (и самое крупное) появление кнопки букинга на главной —
   перед секциями с формами. Отдельного визуального языка не заводит:
   та же чёрная поверхность и та же линия, что у карточек, плюс
   красное свечение из угла, чтобы полоса не читалась как ещё одна
   карточка в череде секций.
   ============================================================ */
.book-band-wrap {
  padding: clamp(20px, 3vw, 40px) 0;
}
.book-band {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  padding: clamp(30px, 5vw, 58px) clamp(22px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
  flex-wrap: wrap;
}
/* золотое свечение по диагонали — держит акцент на кнопке справа
   и повторяет её цвет, а не спорит с ним красным */
.book-band::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: min(560px, 70%);
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    rgba(255, 159, 10, 0.2) 0%,
    rgba(255, 159, 10, 0) 68%
  );
  pointer-events: none;
}
.book-band > * {
  position: relative;
}
.book-band-text {
  max-width: 58ch;
}
.book-band-text .eyebrow {
  margin-bottom: 14px;
}
.book-band-text h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.book-band-text p {
  margin-top: 14px;
  color: var(--muted);
  font-size: 1.05rem;
}
.book-band-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
}
.book-band-note {
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.24);
  text-underline-offset: 4px;
  transition: color 0.25s var(--ease);
}
.book-band-note:hover {
  color: var(--white);
  text-decoration-color: var(--gold);
}

/* Пара кнопок в шапке секции артистов: букинг — основной, «все
   артисты» — вторичный. На узких экранах .artists-head и так встаёт
   в столбик (секция 14), кнопки переносятся вслед за ним. */
.head-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .book-band {
    flex-direction: column;
    align-items: flex-start;
  }
  .book-band-cta {
    width: 100%;
  }
  .book-band-cta .btn {
    width: 100%;
    justify-content: center;
  }
}