/* ==========================================================================
   Сайт в спокойных сине-золотых тонах
   Палитра, размеры и все блоки страницы
   ========================================================================== */

:root {
  /* Очень тёмный сине-«брезентовый» фон и золото поверх него */
  --bg:           #050d22;
  --bg-2:         #081431;
  --blue:         #123a7a;
  --blue-deep:    #0d2757;
  --gold:         #e2c07c;
  --gold-bright:  #f2d18b;
  --gold-dim:     #8a7238;

  /* Размеры, названные в сантиметрах */
  /* Линии в шапке: волосяные, а не золотые плиты. Концепции
     переопределяют их под свою палитру. */
  --topbar-line:  rgba(226, 192, 124, .2);
  --topbar-edge:  rgba(226, 192, 124, .5);

  --topbar-h:     5cm;
  --video-h:      15cm;

  /* --- Движение: единая настройка всех анимаций -------------------------
     Раздел 42 и скрипт в index.html читают только эти значения — скрипт
     через getComputedStyle. Поэтому концепция в concepts/*.css меняет
     характер движения, переопределяя токены, а не переписывая правила. */

  /* Общая кривая и длительности */
  --ease-club:     cubic-bezier(.22, .68, .35, 1);
  --dur-reveal:    .8s;
  --dur-stagger:   .75s;
  --stagger-step:  .10s;

  /* Из какого состояния блок выходит при появлении */
  --reveal-from:   translateY(22px);
  --stagger-from:  translateY(24px);
  --reveal-blur:   none;

  /* Свет */
  --glow-color:    rgba(226, 192, 124, .38);
  --glow-radius:   26px;
  --shimmer-color: #fff6e0;
  --shimmer-dur:   1.2s;
  --quill-dur:     1.5s;
  --quill-delay:   .15s;
  --shimmer-delay: .3s;

  /* Первый экран */
  --hero-drift:    8%;    /* насколько снимок отстаёт при прокрутке */
  --lantern-dur:   9s;
  --lantern-low:   .88;   /* нижняя точка «дыхания» фонаря; 1 — ровный свет */

  /* Вензель, разделители, вспышка на кнопке */
  --seal-dur:      1.5s;
  --sheen-delay:   .55s;
  --gleam-color:   rgba(255, 240, 205, .55);
  --spark-color:   rgba(255, 240, 205, .8);
  --spark-size:    240px;
  --spark-dur:     .5s;
}

/* ========================================================================== 
   86. Обновлённый текст «О клубе»
   ========================================================================== */

.about__subtitle {
  margin: 30px 0 16px;
  color: var(--gold-bright);
  font-size: clamp(22px, 1.55vw, 30px);
  letter-spacing: .035em;
}

.about__program {
  display: grid;
  gap: 14px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  color: var(--gold);
  font-size: clamp(18px, 1.17vw, 23px);
  line-height: 1.6;
}

.about__program li {
  position: relative;
  padding-left: 22px;
}

.about__program li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--gold-bright);
}

.about__program strong {
  color: var(--gold-bright);
  font-weight: 700;
}

@media (max-width: 900px) {
  .about__program { font-size: 18px; }
}

@media (max-width: 700px) {
  .about__subtitle {
    margin-top: 24px;
    font-size: 22px;
  }

  .about__program {
    gap: 12px;
    font-size: 17px;
    line-height: 1.55;
  }

  .about__text .text-block__more { clear: both; }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg);
  /* Раньше здесь была диагональная «фактура» из полос толщиной 1 px.
     На экранах она давала муар и цветную кайму по краям линий —
     те самые «зелёные полосы». Заменена на мягкую подсветку сверху,
     без единой тонкой линии. */
  background-image:
    radial-gradient(ellipse 140% 60% at 50% 0%, rgba(18, 48, 97, .28) 0%, transparent 65%);
  background-repeat: no-repeat;
  background-attachment: scroll;
  color: var(--gold);
  font-family: "Georgia", "Times New Roman", "PT Serif", serif;
  font-size: 19px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

/* Ссылки по умолчанию — золотые, а не системные синие */
a { color: var(--gold-bright); }

/* Общий контейнер для текстовых блоков */
.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}


/* ==========================================================================
   1. Верхняя синяя полоса — 4 отдела, разделённых тонкими золотыми линиями
   ========================================================================== */

.topbar {
  min-height: var(--topbar-h);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 100%);
  border-bottom: 1px solid var(--topbar-edge);
}

.topbar__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 18px;
  text-align: center;
}

/* Волосяные разделители между отделами: сплошное золото в два пикселя
   превращало шапку в таблицу с расчерченными графами */
.topbar__cell + .topbar__cell {
  border-left: 1px solid var(--topbar-line);
}

.topbar__label {
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold-dim);
  filter: brightness(1.45);
}

.topbar__value {
  font-size: 20px;
  color: var(--gold-bright);
  line-height: 1.3;
}

/* Телефон без подчёркивания: подчёркнутая ссылка в шапке — примета
   очень старых макетов. Отклик даём цветом. */
.topbar__value a {
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
  transition: color .2s ease;
}

.topbar__value a:hover { color: #fff4d6; }

/* Первый отдел — название организации, выделен крупнее */
.topbar__cell--name .topbar__value {
  font-size: clamp(18px, 1.45vw, 22px);
  letter-spacing: .01em;
  text-wrap: balance;
}


/* ==========================================================================
   2. Главная картинка: замутнение ~20%, затемнение по бокам, 3 строки текста
   ========================================================================== */

.hero {
  position: relative;
  height: min(86vh, 22cm);
  min-height: 380px;
  overflow: hidden;
  /* Заглушка — видна, пока файла images/hero.jpg нет */
  background:
    radial-gradient(circle at 50% 45%, rgba(212, 176, 98, .18) 0%, transparent 60%),
    linear-gradient(160deg, #143163 0%, #0b1e44 55%, #071431 100%);
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Кадрируем так, чтобы дверь и фонарь оставались в кадре */
  object-position: center 88%;
  /* Снимок приглушён примерно на пятую часть: так золотой текст
     уверенно читается поверх него. */
  filter: blur(1.7px) brightness(.86) saturate(.88);
  transform: scale(1.015); /* убирает светлую кромку от blur по краям */
}

/* Приглушение освещения слева и справа (10–15% ширины),
   тёплый свет фонаря сверху и мягкая тень под текстом */
.hero__sides {
  position: absolute;
  inset: 0;
  background:
    /* тёплое свечение фонаря над входом */
    radial-gradient(ellipse 30% 22% at 50% 20%, rgba(224, 182, 106, .20) 0%, transparent 70%),
    /* Мягкая тень, на которой уверенно читается золотой текст. Пятно
       накрывает весь блок целиком — от вензеля до кнопки: прежнее было
       короче текста, и последняя строка с кнопкой выпадали из него на
       пёстрые наличники. Спад длинный, в три остановки, иначе край
       тени читается как тёмная клякса поверх фотографии. */
    radial-gradient(ellipse 74% 52% at 50% 39%,
      rgba(4, 10, 26, .72) 0%,
      rgba(4, 10, 26, .46) 42%,
      rgba(4, 10, 26, .16) 68%,
      transparent 84%),
    /* приглушение по левому и правому краю */
    linear-gradient(
      to right,
      rgba(3, 8, 20, .68) 0%,
      rgba(3, 8, 20, .22) 13%,
      transparent 22%,
      transparent 78%,
      rgba(3, 8, 20, .22) 87%,
      rgba(3, 8, 20, .68) 100%
    ),
    /* Затемнение сверху и снизу. Внизу картинка доводится почти до цвета
       страницы — тогда первый экран не обрывается линией, а перетекает
       в полосу с цифрами. */
    linear-gradient(to bottom,
      rgba(3, 8, 20, .34) 0%,
      transparent 30%,
      rgba(5, 13, 34, .42) 78%,
      rgba(5, 13, 34, .88) 100%);
}

/* Подпись заглушки — прячется, когда фото загрузилось */
.hero__placeholder {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(90%, 640px);
  text-align: center;
  font-size: 13px;
  letter-spacing: .05em;
  color: rgba(212, 176, 98, .55);
}

.hero.has-photo .hero__placeholder { display: none; }

/* Три строки текста — по центру, немного выше середины */
.hero__text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -76%);
  width: min(94%, 1180px);
  text-align: center;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .92), 0 0 60px rgba(0, 0, 0, .8), 0 1px 2px rgba(0, 0, 0, .9);
}

.hero__line-1 {
  margin: 0 0 12px;
  font-size: clamp(34px, 5.2vw, 68px);
  line-height: 1.15;
  letter-spacing: .03em;
  color: var(--gold-bright);
}

.hero__line-2,
.hero__line-3 {
  line-height: 1.35;
  margin: 0 0 14px;
  font-size: clamp(20px, 2.5vw, 31px);
  color: var(--gold);
}

.hero__line-3 { margin-bottom: 0; }


/* ==========================================================================
   3. Текстовые блоки (20 / 20 / 10 строк)
   ========================================================================== */

.text-block {
  background: var(--bg-2);
  border-top: 1px solid rgba(212, 176, 98, .22);
  border-bottom: 1px solid rgba(212, 176, 98, .22);
  padding: 46px 0;
}

.text-block__title {
  margin: 0 0 24px;
  font-size: 34px;
  letter-spacing: .05em;
  color: var(--gold-bright);
  text-align: center;
}

/* Золотая черта под заголовком */
.text-block__title::after {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Одна строка = один абзац; пустая строка не схлопывается */
.line {
  font-size: 19px;
  margin: 0 0 13px;
  min-height: 1.6em;
  color: var(--gold);
}

.line:last-child { margin-bottom: 0; }


/* ==========================================================================
   4. Золотые рамки для видео и трансляции (общий класс)
   ========================================================================== */

.gold-frame {
  position: relative;
  border: 6px solid var(--gold);
  box-shadow:
    inset 0 0 0 2px var(--gold-dim),
    0 0 26px rgba(0, 0, 0, .55);
  background: #000;
  overflow: hidden;
}

.gold-frame iframe,
.gold-frame video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Заставка внутри рамки: видна, пока ролик не запущен */
.facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--gold);
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(20, 49, 99, .95) 0%, rgba(6, 16, 40, .98) 70%),
    linear-gradient(160deg, #123061 0%, #060f26 100%);
}

.facade__play {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: rgba(5, 13, 34, .5);
  transition: background .25s ease, transform .25s ease;
}

/* Треугольник «play» */
.facade__play::before {
  content: "";
  margin-left: 7px;
  border-left: 22px solid var(--gold);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}

.facade:hover .facade__play,
.facade:focus-visible .facade__play {
  background: rgba(212, 176, 98, .16);
  transform: scale(1.06);
}

.facade__title {
  font-size: 23px;
  letter-spacing: .06em;
  color: var(--gold-bright);
}

.facade__note {
  font-size: 14px;
  letter-spacing: .04em;
  color: rgba(212, 176, 98, .55);
}

@media (prefers-reduced-motion: reduce) {
  .facade__play { transition: none; }
}

/* Два видео на всю ширину экрана, поровну */
.videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 40px 18px;
}

.videos .gold-frame {
  height: min(var(--video-h), 52vw);
  min-height: 220px;
}


/* ==========================================================================
   5. Шесть фотографий: 3 в строке, две строки
   ========================================================================== */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 20px 18px 40px;
}

.photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 3px solid var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold-dim);
  /* Заглушка под фото */
  background: linear-gradient(150deg, #12305f 0%, #0a1c40 60%, #071331 100%);
}

.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.photo:hover img { transform: scale(1.05); }

.photo__caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  letter-spacing: .1em;
  color: rgba(212, 176, 98, .6);
  pointer-events: none;
}

.photo.has-photo .photo__caption { display: none; }


/* ==========================================================================
   6. Онлайн-трансляция — одна рамка по центру
   ========================================================================== */

.live {
  padding: 44px 18px 50px;
}

.live__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 22px;
  font-size: 32px;
  letter-spacing: .05em;
  color: var(--gold-bright);
}

.live__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e05a4d;
  box-shadow: 0 0 10px rgba(224, 90, 77, .9);
  animation: live-pulse 1.8s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

.live .gold-frame {
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}

@media (prefers-reduced-motion: reduce) {
  .live__dot { animation: none; }
  .photo img { transition: none; }
}


/* ==========================================================================
   7. Подвал — та же синяя полоса, что и шапка
   ========================================================================== */

.footer {
  background: linear-gradient(180deg, var(--blue-deep) 0%, var(--blue) 100%);
  border-top: 3px solid var(--gold);
  padding: 22px 18px;
  text-align: center;
  color: var(--gold-bright);
  font-size: 17px;
}

.footer span { white-space: nowrap; }

.footer .sep { color: var(--gold-dim); margin: 0 10px; filter: brightness(1.4); }


/* ==========================================================================
   8. Адаптивность
   ========================================================================== */

@media (max-width: 1100px) {
  .topbar__cell--name .topbar__value { font-size: 22px; }
  .topbar__value { font-size: 17px; }
}

@media (max-width: 900px) {
  /* Шапка становится 2×2 */
  .topbar {
    grid-template-columns: 1fr 1fr;
    min-height: auto;
  }
  .topbar__cell + .topbar__cell { border-left: none; }
  .topbar__cell:nth-child(2n) { border-left: 1px solid var(--topbar-line); }
  .topbar__cell:nth-child(n + 3) { border-top: 1px solid var(--topbar-line); }

  /* Видео — одно под другим */
  .videos { grid-template-columns: 1fr; }
  .videos .gold-frame { height: auto; aspect-ratio: 16 / 9; }

  /* Галерея — 2 колонки */
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .gallery { grid-template-columns: 1fr; }
  .text-block { padding: 34px 0; }
  .wrap { padding: 0 18px; }
}


/* ==========================================================================
   9. Дополнительные разделы: программа, расписание, отзывы, вопросы,
      запись на занятие и схема проезда
   ========================================================================== */

.section {
  padding: 54px 0;
}

/* Через один — чуть более светлый фон, чтобы разделы читались отдельно */
.section--alt {
  background: var(--bg-2);
  border-top: 1px solid rgba(212, 176, 98, .22);
  border-bottom: 1px solid rgba(212, 176, 98, .22);
}

.wrap--narrow { max-width: 760px; }

.note {
  margin: 22px 0 0;
  font-size: 17px;
  color: rgba(212, 176, 98, .75);
}

.note--center { text-align: center; margin: 0 0 28px; }


/* --- Что мы даём: шесть карточек ------------------------------------------ */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card,
.rule {
  padding: 30px 26px 28px;
  border: 1px solid rgba(212, 176, 98, .35);
  background: linear-gradient(160deg, rgba(18, 48, 97, .55) 0%, rgba(6, 16, 40, .55) 100%);
  text-align: center;
  transition: border-color .3s ease, transform .3s ease;
}

.card:hover,
.rule:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

/* Римская цифра в золотом круге */
.card__num,
.rule__num {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  font-size: 20px;
  letter-spacing: .05em;
  color: var(--gold-bright);
}

.card__title,
.rule__title {
  margin: 0 0 12px;
  font-size: 23px;
  letter-spacing: .03em;
  color: var(--gold-bright);
}

.card__text,
.rule__note {
  margin: 0;
  font-size: 18px;
  color: rgba(212, 176, 98, .88);
}


/* --- Расписание и стоимость ----------------------------------------------- */

.table-scroll { overflow-x: auto; }

.schedule {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.schedule th,
.schedule td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid rgba(212, 176, 98, .22);
}

.schedule th {
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-dim);
  filter: brightness(1.35);
  border-bottom: 2px solid var(--gold);
}

.schedule td { color: var(--gold); }

.schedule tbody tr:hover td { background: rgba(212, 176, 98, .05); }

.schedule td:last-child { color: var(--gold-bright); white-space: nowrap; }


/* --- Отзывы --------------------------------------------------------------- */

.reviews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.review {
  margin: 0;
  padding: 28px 30px;
  border-left: 3px solid var(--gold);
  background: rgba(18, 48, 97, .28);
}

.review blockquote {
  margin: 0 0 14px;
  font-size: 20px;
  font-style: italic;
  color: var(--gold-bright);
}

/* Открывающая кавычка-украшение */
.review blockquote::before {
  content: "«";
  margin-right: 2px;
  color: var(--gold-dim);
  filter: brightness(1.3);
}

.review blockquote::after {
  content: "»";
  margin-left: 2px;
  color: var(--gold-dim);
  filter: brightness(1.3);
}

.review figcaption {
  font-size: 15px;
  letter-spacing: .05em;
  color: rgba(212, 176, 98, .7);
}


/* --- Вопросы и ответы ----------------------------------------------------- */

.faq {
  border-bottom: 1px solid rgba(212, 176, 98, .22);
}

.faq summary {
  padding: 18px 44px 18px 4px;
  position: relative;
  cursor: pointer;
  font-size: 21px;
  color: var(--gold-bright);
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

/* Золотой плюс, который превращается в минус */
.faq summary::after {
  content: "+";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  line-height: 1;
  color: var(--gold);
}

.faq[open] summary::after { content: "–"; }

.faq summary:hover { color: #f9e0a8; }

.faq p {
  font-size: 18px;
  margin: 0 0 20px;
  padding-right: 44px;
  color: rgba(212, 176, 98, .88);
}


/* --- Форма записи --------------------------------------------------------- */

.form { margin-top: 4px; }

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

.field {
  display: block;
  margin-bottom: 18px;
}

.field--small { max-width: 160px; }

.field__label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-dim);
  filter: brightness(1.35);
}

.field__input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(212, 176, 98, .4);
  background: rgba(4, 10, 26, .6);
  color: var(--gold-bright);
  font-family: inherit;
  font-size: 18px;
  transition: border-color .25s ease, background .25s ease;
}

.field__input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(4, 10, 26, .85);
}

.field__input::placeholder { color: rgba(212, 176, 98, .35); }

textarea.field__input { resize: vertical; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 24px;
  font-size: 16px;
  color: rgba(212, 176, 98, .8);
  cursor: pointer;
}

/* Своя золотая галочка вместо системной */
.consent input {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  margin-top: 3px;
  border: 1px solid var(--gold);
  background: rgba(4, 10, 26, .6);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.consent input:hover { border-color: var(--gold-bright); }

.consent input:checked { background: var(--gold); border-color: var(--gold); }

.consent input:checked::after {
  content: "";
  width: 11px;
  height: 6px;
  margin-top: -3px;
  border-left: 2px solid #071431;
  border-bottom: 2px solid #071431;
  transform: rotate(-45deg);
}

.consent input:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

/* Ссылки на документы внутри согласия — в клубной гамме */
.consent a {
  color: var(--gold-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 209, 139, .45);
  transition: border-color .25s ease, color .25s ease;
}

.consent a:hover {
  color: #f9e0a8;
  border-bottom-color: var(--gold-bright);
}

/* Золотая кнопка */
.btn {
  display: inline-block;
  padding: 15px 34px;
  border: 2px solid var(--gold);
  background: linear-gradient(180deg, rgba(212, 176, 98, .18) 0%, rgba(212, 176, 98, .06) 100%);
  color: var(--gold-bright);
  font-family: inherit;
  font-size: 18px;
  letter-spacing: .05em;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}

.btn:hover {
  background: var(--gold);
  color: #071431;
}

.btn--ghost { padding: 11px 24px; font-size: 15px; }

/* Сообщение под формой */
.form__notice {
  margin: 18px 0 0;
  min-height: 1.6em;
  font-size: 15px;
  color: var(--gold-bright);
}

.form__notice--warn { color: var(--notice-warn, #f0b96a); }


/* --- Как добраться -------------------------------------------------------- */

.map {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.map__frame { min-height: 320px; }

.map__plate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(20, 49, 99, .95) 0%, rgba(6, 16, 40, .98) 70%),
    linear-gradient(160deg, #123061 0%, #060f26 100%);
}

/* Метка на карте */
.map__pin {
  width: 26px;
  height: 26px;
  border: 3px solid var(--gold);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.map__address {
  font-size: 22px;
  color: var(--gold-bright);
  letter-spacing: .03em;
}

.route {
  margin: 0;
  padding: 0;
  list-style: none;
  align-self: center;
}

.route li {
  font-size: 18px;
  position: relative;
  padding: 0 0 16px 26px;
  color: rgba(212, 176, 98, .9);
}

.route li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
}

.route li:last-child { padding-bottom: 0; }




/* --- Мягкое появление блоков при прокрутке -------------------------------- */

/* Класс js ставится скриптом в самом начале страницы.
   Без JavaScript блоки просто видны сразу — текст не пропадёт никогда. */
.js .reveal {
  opacity: 0;
  transform: var(--reveal-from);
  filter: var(--reveal-blur);
  transition: opacity var(--dur-reveal) var(--ease-club),
              transform var(--dur-reveal) var(--ease-club),
              filter var(--dur-reveal) var(--ease-club);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .card { transition: none; }
}


/* --- Адаптивность дополнительных разделов --------------------------------- */

@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: 1fr; }
  .map { grid-template-columns: 1fr; }
  .section { padding: 42px 0; }
}

@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .field--small { max-width: none; }

  .btn { width: 100%; text-align: center; }
}


/* ==========================================================================
   10. Размеры текста на узких экранах — чтобы крупные строки не упирались в края
   ========================================================================== */

@media (max-width: 700px) {
  .hero__text { width: 90%; }
  .hero__line-1 { font-size: 32px; }
  .hero__line-2,
  .hero__line-3 { font-size: 18px; }
  .text-block__title,
  .live__title { font-size: 27px; }
  body { font-size: 17px; }
  .line { font-size: 17px; }
  .faq summary { font-size: 19px; }
  .review blockquote { font-size: 18px; }
}


/* ==========================================================================
   11. Плавные появления и мелкая анимация — в клубном духе:
       медленно, мягко, без резких движений
   ========================================================================== */

/* Варианты появления: снизу, сбоку, лёгкое приближение */
.js .reveal--left  { transform: translateX(-30px); }
.js .reveal--right { transform: translateX(30px); }
.js .reveal--zoom  { transform: scale(.97); }

/* Ступенчатое появление: элементы внутри блока выходят один за другим */
.js .stagger > * {
  opacity: 0;
  transform: var(--stagger-from);
  filter: var(--reveal-blur);
  transition: opacity var(--dur-stagger) var(--ease-club),
              transform var(--dur-stagger) var(--ease-club),
              filter var(--dur-stagger) var(--ease-club);
}

.js .stagger.is-visible > * { opacity: 1; transform: none; filter: none; }

/* Шаг задержки — из токена, чтобы концепция могла сделать очередь
   быстрее или медленнее одной строкой */
.js .stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
.js .stagger.is-visible > *:nth-child(2) { transition-delay: calc(var(--stagger-step) * 1); }
.js .stagger.is-visible > *:nth-child(3) { transition-delay: calc(var(--stagger-step) * 2); }
.js .stagger.is-visible > *:nth-child(4) { transition-delay: calc(var(--stagger-step) * 3); }
.js .stagger.is-visible > *:nth-child(5) { transition-delay: calc(var(--stagger-step) * 4); }
.js .stagger.is-visible > *:nth-child(6) { transition-delay: calc(var(--stagger-step) * 5); }
.js .stagger.is-visible > *:nth-child(7) { transition-delay: calc(var(--stagger-step) * 5.8); }
.js .stagger.is-visible > *:nth-child(8) { transition-delay: calc(var(--stagger-step) * 6.6); }
.js .stagger.is-visible > *:nth-child(9) { transition-delay: calc(var(--stagger-step) * 7.4); }
.js .stagger.is-visible > *:nth-child(n + 10) { transition-delay: calc(var(--stagger-step) * 8); }

/* Золотая черта под заголовком раздела прочерчивается сама */
.js .text-block__title::after { width: 0; transition: width 1s ease .2s; }
.js .text-block__title.is-visible::after { width: 120px; }

/* Главная фотография живёт как уличная съёмка с рук: кадр чуть дрожит и
   слегка уводится в стороны. Раньше здесь было ровное медленное
   приближение — оно читалось слишком гладко, «рекламно».

   Шаги неравной длины и линейная плавность нарочно: у ровного ритма
   движение получается механическим, а перемены направления должны быть
   резковатыми, как у живой руки. Кадр увеличен на 6%, поэтому при
   сдвигах до полупроцента края никогда не открываются. */
@media (prefers-reduced-motion: no-preference) {
  .hero__img {
    /* Масштаб живёт отдельным свойством: transform занят качкой и дрожью,
       а scale складывается с ним независимо — так у кадра появляется ещё
       и медленное дыхание, не мешая остальному движению. */
    animation: hero-handheld 14s linear infinite both,
               hero-breathe 26s ease-in-out infinite alternate both;
  }
}

/* ========================================================================== 
   91. Мобильный аккордеон программы клуба

   На компьютере пять направлений читаются как обычный полный список.
   На телефоне остаются только названия; описание открывается стрелкой,
   причём одновременно раскрыт не более чем один пункт.
   ========================================================================== */

.about__program-toggle {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  pointer-events: none;
}

.about__program-toggle strong::after { content: "."; }
.about__program-arrow { display: none; }
.about__program-copy { display: inline; }

@media (max-width: 700px) {
  .about__program {
    gap: 8px;
    margin-top: 2px;
  }

  .about__program li {
    padding-left: 0;
    border: 1px solid var(--hairline);
    background:
      linear-gradient(145deg, rgba(226, 192, 124, .045), transparent 58%),
      var(--panel);
  }

  .about__program li::before { display: none; }

  .about__program-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    color: var(--title);
    cursor: pointer;
    pointer-events: auto;
  }

  .about__program-toggle strong {
    min-width: 0;
    font-size: 16.5px;
    line-height: 1.3;
  }

  .about__program-toggle strong::after { content: none; }

  .about__program-arrow {
    display: block;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin: -4px 3px 0 0;
    border-right: 1.5px solid var(--gold);
    border-bottom: 1.5px solid var(--gold);
    transform: rotate(45deg);
    transition: transform .22s ease;
  }

  .about__program-copy {
    display: none;
    padding: 0 14px 15px;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--text);
  }

  .about__program li.is-open {
    border-color: var(--gold);
    box-shadow: inset 2px 0 0 var(--gold);
  }

  .about__program li.is-open .about__program-copy { display: block; }
  .about__program li.is-open .about__program-arrow { transform: rotate(-135deg); margin-top: 4px; }

  .about__program-toggle:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 2px;
  }
}

@keyframes hero-breathe {
  from { scale: 1.055; }
  to   { scale: 1.085; }
}

@keyframes hero-handheld {
  0%    { transform: translate(0.32%, 0.294%) rotate(0.066deg); }
  2.5%  { transform: translate(0.151%, 0.332%) rotate(0.104deg); }
  5%    { transform: translate(0.354%, 0.443%) rotate(0.077deg); }
  7.5%  { transform: translate(0.342%, 0.166%) rotate(0.082deg); }
  10%   { transform: translate(0.374%, 0.367%) rotate(0.044deg); }
  12.5% { transform: translate(0.197%, 0.074%) rotate(-0.009deg); }
  15%   { transform: translate(0.251%, 0.051%) rotate(0.039deg); }
  17.5% { transform: translate(0.133%, 0.135%) rotate(-0.041deg); }
  20%   { transform: translate(0.424%, 0.081%) rotate(-0.056deg); }
  22.5% { transform: translate(0.381%, -0.212%) rotate(-0.078deg); }
  25%   { transform: translate(0.393%, -0.138%) rotate(-0.054deg); }
  27.5% { transform: translate(0.346%, -0.175%) rotate(-0.06deg); }
  30%   { transform: translate(0.724%, -0.311%) rotate(-0.058deg); }
  32.5% { transform: translate(0.585%, -0.468%) rotate(-0.133deg); }
  35%   { transform: translate(0.639%, -0.611%) rotate(-0.113deg); }
  37.5% { transform: translate(0.467%, -0.55%) rotate(-0.096deg); }
  40%   { transform: translate(0.407%, -0.567%) rotate(-0.136deg); }
  42.5% { transform: translate(0.42%, -0.58%) rotate(-0.136deg); }
  45%   { transform: translate(0.267%, -0.484%) rotate(-0.077deg); }
  47.5% { transform: translate(-0.069%, -0.279%) rotate(-0.137deg); }
  50%   { transform: translate(-0.017%, -0.376%) rotate(-0.072deg); }
  52.5% { transform: translate(-0.237%, -0.379%) rotate(-0.073deg); }
  55%   { transform: translate(-0.265%, -0.21%) rotate(-0.07deg); }
  57.5% { transform: translate(-0.241%, -0.096%) rotate(-0.044deg); }
  60%   { transform: translate(-0.393%, -0.074%) rotate(-0.064deg); }
  62.5% { transform: translate(-0.171%, -0.012%) rotate(0.005deg); }
  65%   { transform: translate(-0.213%, 0.148%) rotate(-0.035deg); }
  67.5% { transform: translate(-0.169%, 0.247%) rotate(-0.02deg); }
  70%   { transform: translate(-0.417%, 0.077%) rotate(-0.005deg); }
  72.5% { transform: translate(-0.303%, 0.111%) rotate(0.064deg); }
  75%   { transform: translate(-0.433%, 0.322%) rotate(0.043deg); }
  77.5% { transform: translate(-0.386%, 0.325%) rotate(0.118deg); }
  80%   { transform: translate(-0.519%, 0.278%) rotate(0.085deg); }
  82.5% { transform: translate(-0.47%, 0.362%) rotate(0.1deg); }
  85%   { transform: translate(-0.469%, 0.149%) rotate(0.083deg); }
  87.5% { transform: translate(-0.57%, 0.107%) rotate(0.064deg); }
  90%   { transform: translate(-0.413%, 0.249%) rotate(0.14deg); }
  92.5% { transform: translate(-0.429%, 0.191%) rotate(0.119deg); }
  95%   { transform: translate(-0.14%, 0.413%) rotate(0.137deg); }
  97.5% { transform: translate(-0.077%, 0.313%) rotate(0.06deg); }
  100%  { transform: translate(0.32%, 0.294%) rotate(0.066deg); }
}
}

/* Ответ в разделе вопросов проявляется, а не выпрыгивает */
.faq[open] p { animation: faq-in .45s ease both; }

@keyframes faq-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* Кнопки: мягкое золотое свечение вместо резкой смены цвета */
.btn {
  transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .2s ease;
}

.btn:hover {
  box-shadow: 0 0 22px rgba(226, 192, 124, .35);
  transform: translateY(-2px);
}

.btn:active { transform: none; }

/* Карточки чуть подсвечиваются */
.card,
.rule { transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease; }
.card:hover,
.rule:hover { box-shadow: 0 0 26px rgba(0, 0, 0, .45); }


/* ==========================================================================
   12. Кнопки записи в разных местах страницы
   ========================================================================== */

/* На главной фотографии */
.hero__cta { margin: 30px 0 0; }

.btn--onphoto {
  background: rgba(6, 15, 38, .62);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .5);
}

.btn--onphoto:hover { background: var(--gold); }

/* В конце раздела */
.section__cta {
  margin: 36px 0 0;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .js .stagger > * { opacity: 1; transform: none; filter: none; transition: none; }
  .js .text-block__title::after { width: 120px; transition: none; }
  .hero__img { animation: none; }
  .faq[open] p { animation: none; }
  .btn:hover { transform: none; }
}

@media (max-width: 700px) {
  .hero__cta { margin-top: 22px; }
  .hero__cta .btn { padding: 13px 22px; font-size: 16px; }
}


/* ==========================================================================
   13. Шрифты клуба
   ========================================================================== */

body {
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
}

h1, h2, h3,
.topbar__cell--name .topbar__value,
.btn, .nav__cta, .facade__title, .stat__num, .map__address,
.faq summary, .review blockquote, .card__num {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}


/* ==========================================================================
   14. Полоса прокрутки, якорное меню и монограмма
   ========================================================================== */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
}

/* Знак клуба — один файл images/logo.svg, наложенный маской. Цвет даёт
   background: currentColor, поэтому знак красится тем же правилом, что и
   раньше, а заменить рисунок можно подменой одного файла — в разметке
   шести страниц ничего трогать не нужно. */
.monogram {
  display: block;
  width: 100%;
  aspect-ratio: 50.6 / 100;
  background: currentColor;
  -webkit-mask: url("../images/logo.svg") center / contain no-repeat;
          mask: url("../images/logo.svg") center / contain no-repeat;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: rgba(6, 15, 38, .95);
  border-bottom: 1px solid rgba(226, 192, 124, .35);
  transform: translateY(-102%);
  transition: transform .45s ease;
}

.nav.is-shown { transform: none; }

.nav__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 9px 22px;
}

.nav__logo {
  flex: none;
  width: 40px;
  color: var(--gold);
}

.nav__list {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__list a {
  display: inline-block;
  padding: 5px 0;
  border-bottom: 1px solid transparent;
  color: var(--gold);
  font-size: 17px;
  text-decoration: none;
  transition: color .25s ease, border-color .25s ease;
}

.nav__list a:hover,
.nav__list a.is-active {
  color: var(--gold-bright);
  border-bottom-color: var(--gold);
}

.nav__cta {
  flex: none;
  padding: 9px 22px;
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  font-size: 16px;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}

.nav__cta:hover { background: var(--gold); color: #071431; }

/* Чтобы меню не закрывало заголовок при переходе по якорю */
section[id], .text-block[id] { scroll-margin-top: 80px; }

/* Монограмма на фотографии и в подвале */
.hero__mono {
  display: block;
  width: 62px;
  margin: 0 auto 14px;
  color: var(--gold-bright);
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .85));
}

.footer__mono {
  display: block;
  width: 48px;
  margin: 0 auto 16px;
  color: var(--gold);
}


/* ==========================================================================
   15. Строка достижений
   ========================================================================== */

.stats {
  padding: 42px 0;
  background: linear-gradient(180deg, rgba(18, 48, 97, .4) 0%, transparent 100%);
  border-bottom: 1px solid rgba(226, 192, 124, .2);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  text-align: center;
}

.stat + .stat { border-left: 1px solid rgba(226, 192, 124, .25); }

.stat__num {
  display: block;
  font-size: clamp(34px, 3.6vw, 54px);
  line-height: 1.1;
  color: var(--gold-bright);
}

.stat__label {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(226, 192, 124, .72);
}


/* ==========================================================================
   16. Орнаментальный разделитель и буквица
   ========================================================================== */

.ornament {
  position: relative;
  width: min(78%, 620px);
  height: 1px;
  margin: 46px auto;
  background: linear-gradient(90deg, transparent, rgba(226, 192, 124, .5), transparent);
}

/* Тонкий ромб-контур */
.ornament::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(226, 192, 124, .5);
}

/* Золотое ядро ромба */
.ornament::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold);
}

/* Буквица — крупная золотая первая буква первого абзаца раздела */


/* ==========================================================================
   17. Просмотр фотографий во весь экран
   ========================================================================== */

.photo { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 8, 20, .95);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}

.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox img {
  max-width: 92vw;
  max-height: 84vh;
  border: 4px solid var(--gold);
  box-shadow: 0 0 70px rgba(0, 0, 0, .85);
}

.lightbox__caption {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold-bright);
  font-size: 17px;
  letter-spacing: .05em;
}

.lightbox button {
  position: absolute;
  width: 54px;
  height: 54px;
  border: 1px solid var(--gold);
  background: rgba(6, 15, 38, .7);
  color: var(--gold-bright);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}

.lightbox button:hover { background: var(--gold); color: #071431; }

.lightbox__close { top: 24px; right: 24px; }
.lightbox__prev  { left: 24px;  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: 24px; top: 50%; transform: translateY(-50%); }


/* ==========================================================================
   18. Адаптивность новых блоков
   ========================================================================== */

@media (max-width: 900px) {
  .nav__list { gap: 18px; font-size: 16px; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .stat:nth-child(odd) { border-left: 0; }
}

@media (max-width: 700px) {
  .nav__list { display: none; }
  .nav__inner { justify-content: space-between; padding: 8px 14px; }
  .hero__mono { width: 60px; margin-bottom: 14px; }

  /* Расписание превращается в карточки */
  .table-scroll { overflow: visible; }
  .schedule { min-width: 0; }
  .schedule, .schedule tbody, .schedule tr, .schedule td { display: block; width: 100%; }
  .schedule thead { display: none; }

  .schedule tr {
    margin-bottom: 16px;
    padding: 6px 0;
    border: 1px solid rgba(226, 192, 124, .3);
  }

  .schedule td {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 9px 16px;
    border: 0;
    text-align: right;
  }

  .schedule td::before {
    content: attr(data-label);
    color: var(--gold-dim);
    filter: brightness(1.4);
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: left;
  }

  .lightbox button { width: 44px; height: 44px; font-size: 22px; }
  .lightbox__close { top: 14px; right: 14px; }
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
  .lightbox { transition: none; }
}


/* ==========================================================================
   19. Подписи под фотографиями
   ========================================================================== */

.gallery { gap: 30px 20px; }

.shot {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.shot__text { padding: 18px 4px 0; }

.shot__title {
  margin: 0 0 9px;
  font-size: 22px;
  letter-spacing: .02em;
  color: var(--gold-bright);
}

.shot__note {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(226, 192, 124, .82);
}


/* ==========================================================================
   20. Плавающие кнопки: наверх и записаться
   ========================================================================== */

.fab {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
}

.fab.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.fab__up,
.fab__cta {
  border: 2px solid var(--gold);
  background: rgba(7, 20, 49, .94);
  color: var(--gold-bright);
  font-family: "Playfair Display", Georgia, serif;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
  transition: background .25s ease, color .25s ease, transform .2s ease;
}

.fab__up {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: none;
}

/* Стрелка вверх */
.fab__arrow {
  width: 13px;
  height: 13px;
  margin-top: 4px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

.fab__cta {
  padding: 15px 28px;
  font-size: 17px;
  letter-spacing: .03em;
}

.fab__up:hover,
.fab__cta:hover {
  background: var(--gold);
  color: #071431;
  transform: translateY(-2px);
}


/* ==========================================================================
   21. Всплывающая заявка
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 8, 20, .82);
  opacity: 0;
  transition: opacity .35s ease;
}

.modal[hidden] { display: none; }

.modal.is-open { opacity: 1; }

.modal__panel {
  position: relative;
  width: min(100%, 640px);
  max-height: 92vh;
  overflow-y: auto;
  padding: 40px 42px 36px;
  border: 2px solid var(--gold);
  background: linear-gradient(160deg, #0d2148 0%, #060f26 100%);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .75);
  transform: translateY(26px) scale(.98);
  transition: transform .35s ease;
}

.modal.is-open .modal__panel { transform: none; }

.modal__close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 46px;
  height: 46px;
  border: 0;
  background: none;
  color: var(--gold);
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease;
}

.modal__close:hover { color: var(--gold-bright); }

.modal__mono {
  display: block;
  width: 56px;
  margin: 0 auto 14px;
  color: var(--gold);
}

.modal__title {
  margin: 0 0 10px;
  font-size: 28px;
  text-align: center;
  color: var(--gold-bright);
}

.modal__note {
  margin: 0 0 26px;
  font-size: 16px;
  text-align: center;
  color: rgba(226, 192, 124, .8);
}

@media (prefers-reduced-motion: reduce) {
  .fab, .modal, .modal__panel { transition: none; }
}

@media (max-width: 700px) {
  .fab { right: 14px; bottom: 14px; gap: 9px; }
  .fab__up { width: 46px; height: 46px; }
  .fab__cta { padding: 13px 20px; font-size: 16px; }
  .modal { padding: 12px; }
  .modal__panel { padding: 30px 20px 26px; }
  .modal__title { font-size: 24px; }
  .shot__title { font-size: 20px; }
}


/* ==========================================================================
   22. Монограмма в шапке, заголовок «Наши занятия»
   ========================================================================== */

.topbar__mono {
  display: block;
  width: 34px;
  margin-bottom: 2px;
  color: var(--gold);
}

.videos__title {
  grid-column: 1 / -1;
  margin-bottom: 8px;
}


/* ==========================================================================
   23. Буквица, важные строки, крупные цитаты
   ========================================================================== */

/* Первая строка раздела — чуть крупнее, с увеличенной первой буквой.
   Без обтекания: строки остаются ровными. */
.line--lead {
  font-size: 1.08em;
}

.line--lead::first-letter {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.9em;
  line-height: 1;
  padding-right: 2px;
  color: var(--gold-bright);
}

/* Важная строка в тонкой золотой рамке */
.line--accent {
  position: relative;
  margin: 26px 0;
  padding: 18px 26px;
  border: 1px solid var(--gold);
  background: rgba(226, 192, 124, .06);
  color: var(--gold-bright);
  font-size: 1.02em;
  transition: box-shadow .4s ease, background .4s ease;
}

.line--accent:hover {
  background: rgba(226, 192, 124, .1);
  box-shadow: 0 0 26px rgba(226, 192, 124, .22);
}

/* Крупная цитата между абзацами */
.pullquote {
  max-width: 880px;
  margin: 34px auto;
  padding: 26px 20px;
  border-top: 1px solid rgba(226, 192, 124, .35);
  border-bottom: 1px solid rgba(226, 192, 124, .35);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(21px, 2.3vw, 30px);
  font-style: italic;
  line-height: 1.4;
  text-align: center;
  color: var(--gold-bright);
}

.pullquote::before { content: "«"; }
.pullquote::after  { content: "»"; }


/* ==========================================================================
   24. Цитата наставника
   ========================================================================== */

.master {
  padding: 66px 0;
  text-align: center;
  background: linear-gradient(180deg, rgba(18, 48, 97, .32) 0%, transparent 100%);
  border-top: 1px solid rgba(226, 192, 124, .22);
  border-bottom: 1px solid rgba(226, 192, 124, .22);
}

.master__mono {
  display: block;
  width: 54px;
  margin: 0 auto 22px;
  color: var(--gold);
}

.master__text {
  max-width: 900px;
  margin: 0 auto 16px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(23px, 2.9vw, 38px);
  font-style: italic;
  line-height: 1.35;
  color: var(--gold-bright);
}

.master__text::before { content: "«"; }
.master__text::after  { content: "»"; }

.master__who {
  margin: 0;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(226, 192, 124, .65);
}




/* ==========================================================================
   26. Свет на золотых рамках при наведении
   ========================================================================== */

.gold-frame,
.photo {
  transition: box-shadow .45s ease, border-color .45s ease;
}

.gold-frame:hover {
  border-color: var(--gold-bright);
  box-shadow: inset 0 0 0 2px var(--gold-dim), 0 0 38px rgba(226, 192, 124, .32);
}

.photo:hover {
  border-color: var(--gold-bright);
  box-shadow: 0 0 30px rgba(226, 192, 124, .28);
}

/* Блик пробегает по рамке только там, где есть настоящий курсор.
   На сенсорных экранах :hover залипает после касания, поэтому там его нет. */
@media (hover: hover) {
  /* Блик, пробегающий по рамке */
  .gold-frame::after,
  .photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 32%, rgba(255, 243, 214, .16) 46%, transparent 60%);
    transform: translateX(-130%);
    /* Без перехода в покое: иначе при уходе курсора блик едет обратно
       и кажется, что светятся сразу две карточки */
    transition: none;
  }

  .gold-frame:hover::after,
  .photo:hover::after {
    transform: translateX(130%);
    transition: transform .9s ease;
  }
}

/* Тонкая черта над подписью к фотографии */
.shot__title {
  position: relative;
  padding-top: 15px;
}

.shot__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 1px;
  background: var(--gold);
}


@media (prefers-reduced-motion: reduce) {
  .gold-frame::after, .photo::after { display: none; }
  .line--accent { transition: none; }
}

@media (max-width: 900px) {
  .master { padding: 48px 0; }
}

@media (max-width: 600px) {
  .pullquote { margin: 26px auto; padding: 20px 12px; }
  .line--accent { padding: 15px 18px; }
}


/* ==========================================================================
   27. Клубная цитата отдельной полосой между разделами
   ========================================================================== */

.quote-band {
  padding: 62px 0;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 100% at 50% 50%, rgba(18, 48, 97, .38) 0%, transparent 72%),
    linear-gradient(180deg, rgba(8, 20, 49, .5) 0%, transparent 100%);
  border-top: 1px solid rgba(226, 192, 124, .18);
  border-bottom: 1px solid rgba(226, 192, 124, .18);
}

/* Крупная типографская лапка над цитатой */
.quote-band__mark {
  display: block;
  margin-bottom: 6px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 76px;
  line-height: .55;
  color: rgba(226, 192, 124, .38);
}

.quote-band__text {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(21px, 2.6vw, 33px);
  font-style: italic;
  line-height: 1.42;
  color: var(--gold-bright);
}

/* Тонкие золотые усы по бокам */
.quote-band__text::before,
.quote-band__text::after {
  content: "";
  display: block;
  width: 90px;
  height: 1px;
  margin: 24px auto 0;
  background: linear-gradient(90deg, transparent, rgba(226, 192, 124, .6), transparent);
}

.quote-band__text::before { margin: 0 auto 24px; }


/* ==========================================================================
   28. Важная строка с кнопкой записи
   ========================================================================== */

.line--accent--cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  padding: 20px 22px 20px 26px;
}

.line--accent--cta span { flex: 1 1 320px; }

.btn--small {
  flex: none;
  padding: 11px 24px;
  font-size: 16px;
}


/* ==========================================================================
   29. Подписи под фотографиями — по центру, с золотым ромбом
   ========================================================================== */

.shot__text {
  padding: 20px 8px 0;
  text-align: center;
}

.shot__title {
  padding-top: 20px;
  letter-spacing: .04em;
}

/* Ромб вместо черты, по центру */
.shot__title::before {
  top: 0;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: translateX(-50%) rotate(45deg);
}

.shot__note {
  max-width: 36ch;
  margin: 0 auto;
  font-size: 16px;
  color: rgba(226, 192, 124, .76);
}


/* Пояснение под таблицей стоит отдельно от кнопки */
.table-scroll + .note--center { margin: 26px 0 0; }


@media (max-width: 700px) {
  .quote-band { padding: 44px 0; }
  .quote-band__mark { font-size: 60px; }
  .line--accent--cta { justify-content: center; text-align: center; }
  .btn--small { width: 100%; }
}


/* ==========================================================================
   30. Три правила клуба
   ========================================================================== */

.rules { padding: 56px 0; }

.rules__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}


/* ==========================================================================
   31. Как проходит первое занятие
   ========================================================================== */

.steps { padding: 56px 0; }

.steps__list {
  max-width: 840px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  display: flex;
  gap: 24px;
  padding-bottom: 32px;
}

.step:last-child { padding-bottom: 0; }

/* Вертикальная нить между шагами */
.step::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 56px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, rgba(226, 192, 124, .55), rgba(226, 192, 124, .08));
}

.step:last-child::before { display: none; }

.step__num {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--bg);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 21px;
  color: var(--gold-bright);
}

.step__title {
  margin: 6px 0 8px;
  font-size: 22px;
  letter-spacing: .02em;
  color: var(--gold-bright);
}

.step__note {
  margin: 0;
  font-size: 17px;
  color: rgba(226, 192, 124, .85);
}


/* ==========================================================================
   32. Полоса записи между разделами
   ========================================================================== */

.cta-band {
  padding: 42px 0;
  background: linear-gradient(180deg, rgba(18, 48, 97, .42) 0%, transparent 100%);
  border-top: 1px solid rgba(226, 192, 124, .2);
  border-bottom: 1px solid rgba(226, 192, 124, .2);
}

.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.cta-band__text {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(19px, 2vw, 26px);
  color: var(--gold-bright);
}


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

@media (max-width: 700px) {
  .steps, .rules { padding: 42px 0; }
  .step { gap: 16px; padding-bottom: 26px; }
  .step__num { width: 46px; height: 46px; font-size: 18px; }
  .step::before { left: 22px; top: 48px; }
  .cta-band__inner { flex-direction: column; text-align: center; gap: 20px; }
}


/* ==========================================================================
   33. Подвал: юридические ссылки
   ========================================================================== */

.footer__line { margin: 0 0 16px; }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  margin-bottom: 14px;
}

.footer__legal a {
  color: var(--gold-bright);
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 209, 139, .3);
  transition: border-color .25s ease;
}

.footer__legal a:hover { border-bottom-color: var(--gold-bright); }

.footer__copy {
  margin: 0;
  font-size: 14px;
  color: rgba(242, 209, 139, .65);
}


/* ==========================================================================
   34. Уведомление о cookie
   ========================================================================== */

.cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 28;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 16px 24px;
  background: rgba(6, 15, 38, .97);
  border-top: 1px solid var(--gold);
  transform: translateY(102%);
  transition: transform .4s ease;
}

.cookie[hidden] { display: none; }

.cookie.is-shown { transform: none; }

.cookie__text {
  max-width: 760px;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(242, 209, 139, .88);
}

.cookie__text a { color: var(--gold-bright); }

.cookie__btn {
  flex: none;
  padding: 11px 26px;
  border: 1px solid var(--gold);
  background: none;
  color: var(--gold-bright);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 16px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}

.cookie__btn:hover { background: var(--gold); color: #071431; }

/* Пока висит уведомление, плавающие кнопки поднимаются выше */
body.cookie-open .fab { bottom: 116px; }


/* ==========================================================================
   35. Страницы документов (политика, оферта, реквизиты)
   ========================================================================== */

.doc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 26px;
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 100%);
  border-bottom: 3px solid var(--gold);
}

.doc__logo {
  display: block;
  width: 42px;
  color: var(--gold);
}

.doc__back {
  color: var(--gold-bright);
  font-size: 17px;
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 209, 139, .35);
}

.doc__back:hover { border-bottom-color: var(--gold-bright); }

.doc { padding: 54px 0 70px; }

.wrap--doc { max-width: 860px; }

.doc__title {
  margin: 0 0 8px;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.2;
  color: var(--gold-bright);
}

.doc__date {
  margin: 0 0 30px;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(226, 192, 124, .6);
}

/* Заметный блок-предупреждение для заказчика */
.doc__warn {
  margin: 0 0 34px;
  padding: 20px 24px;
  border: 1px solid #e0a04d;
  background: rgba(224, 160, 77, .1);
  font-size: 16px;
  line-height: 1.55;
  color: #f3c98a;
}

.doc h2 {
  margin: 34px 0 14px;
  font-size: 24px;
  color: var(--gold-bright);
}

.doc p { margin: 0 0 14px; }

.doc ul { margin: 0 0 16px; padding-left: 22px; }

.doc li { margin-bottom: 8px; }

.doc a { color: var(--gold-bright); }

.doc__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}

.doc__table th,
.doc__table td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(226, 192, 124, .22);
}

.doc__table th {
  width: 42%;
  font-weight: normal;
  color: rgba(226, 192, 124, .75);
}

.doc__table td { color: var(--gold-bright); }


@media (max-width: 700px) {
  .cookie { gap: 14px; padding: 14px 16px; text-align: center; }
  .cookie__btn { width: 100%; }
  body.cookie-open .fab { bottom: 168px; }
  .footer__legal { gap: 8px 16px; font-size: 14px; }
  .doc { padding: 36px 0 50px; }
  .doc__table th, .doc__table td { display: block; width: 100%; }
  .doc__table th { border-bottom: 0; padding-bottom: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie { transition: none; }
}


/* ==========================================================================
   36. Мобильная версия: делаем страницу короче
       Галерея, карточки, отзывы и правила листаются вбок,
       длинные тексты сворачиваются. На широком экране всё как было.
   ========================================================================== */

.text-block__more { display: none; }

@media (max-width: 700px) {

  /* --- Длинные тексты сворачиваются --- */
  .text-block__lines {
    position: relative;
    max-height: 15em;
    overflow: hidden;
  }

  /* Мягкое затухание у обрыва текста. Уходит в --bg — цвет подложки
     самого раздела; --bg-2 на полтона отличался, и обрыв читался
     серой полосой поперёк текста. */
  .text-block__lines::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5em;
    /* Цвет полосы, а не страницы: раздел стоит на светлом фоне --bg-2,
       и градиент в цвет страницы читался как тёмный прямоугольник */
    background: linear-gradient(180deg, rgb(0 0 0 / 0), var(--bg-2));
    pointer-events: none;
  }

  .text-block.is-open .text-block__lines { max-height: none; }
  .text-block.is-open .text-block__lines::after { display: none; }

  .text-block__more {
    display: block;
    margin: 18px auto 0;
    padding: 11px 26px;
    border: 1px solid var(--gold);
    background: none;
    color: var(--gold-bright);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 16px;
    cursor: pointer;
  }

  /* --- Общее уплотнение --- */
  .section, .rules, .steps { padding: 34px 0; }
  .text-block { padding: 30px 0; }
  .ornament { margin: 26px auto; }
  .quote-band { padding: 34px 0; }
  .master { padding: 38px 0; }
  .stats { padding: 30px 0; }
  .cta-band { padding: 30px 0; }
  .map__frame { min-height: 230px; }
  .live { padding: 30px 18px 34px; }
  .videos { padding: 26px 14px; gap: 14px; }
  .gallery { padding: 14px 18px 20px; }
  .text-block__title, .live__title { margin-bottom: 18px; }
}


/* ==========================================================================
   37. Мобильная версия, часть вторая: расписание, форма, мелочи
   ========================================================================== */

.signup__mobile { display: none; }

@media (max-width: 700px) {

  /* Карточка расписания компактнее: название группы — как заголовок */
  .schedule tr { padding: 12px 0 10px; }

  .schedule td {
    padding: 4px 16px;
    font-size: 16px;
  }

  .schedule td::before { font-size: 12px; }

  .schedule td[data-label="Группа"] {
    margin-bottom: 8px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(226, 192, 124, .22);
    font-size: 20px;
    color: var(--gold-bright);
  }

  .schedule td[data-label="Группа"]::before { display: none; }

  /* Форму заменяет кнопка: та же заявка открывается окном.
     Если JavaScript выключен, показывается обычная форма. */
  .js #signup .form { display: none; }
  .js .signup__mobile { display: block; text-align: center; }
  .js .signup__mobile .btn { width: 100%; }

  /* Мелочи */
  .hero { height: min(76vh, 20cm); }
  .route li { padding-bottom: 12px; font-size: 17px; }
  .map { gap: 16px; }
  .faq summary { padding: 15px 40px 15px 4px; }
  .faq p { margin-bottom: 16px; }
}


/* ==========================================================================
   38. Мобильная версия: шапка, меню, главная фотография, окно заявки
   ========================================================================== */

/* Кнопка меню и точки-индикаторы видны только на телефоне */
.nav__burger,
.quick { display: none; }

@media (max-width: 700px) {

  /* --- Верхняя полоса: сетка 2x2 и вдвое ниже --- */
  .topbar {
    grid-template-columns: 1fr 1fr;
    min-height: 0;
  }

  .topbar__cell {
    gap: 3px;
    padding: 10px 12px;
  }

  .topbar__label { font-size: 11px; letter-spacing: .12em; }
  .topbar__value { font-size: 16px; line-height: 1.25; }
  .topbar__cell--name .topbar__value { font-size: 17px; }
  .topbar__mono { width: 26px; margin-bottom: 0; }

  /* --- Быстрые действия под шапкой --- */
  .quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--gold);
  }

  .quick__btn {
    padding: 13px 10px;
    background: #071431;
    color: var(--gold-bright);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
  }

  .quick__btn:active { background: var(--gold); color: #071431; }

  /* --- Меню-кнопка и выпадающий список разделов --- */
  .nav__inner { gap: 12px; }

  .nav__burger {
    display: grid;
    place-content: center;
    gap: 5px;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--gold);
    background: none;
    cursor: pointer;
  }

  .nav__burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--gold-bright);
    transition: transform .3s ease, opacity .2s ease;
  }

  .nav.is-menu-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-menu-open .nav__burger span:nth-child(2) { opacity: 0; }
  .nav.is-menu-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav__list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: block;
    padding: 6px 18px 14px;
    background: rgba(6, 15, 38, .98);
    border-bottom: 1px solid var(--gold);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .28s ease, transform .28s ease, visibility .28s;
  }

  .nav.is-menu-open .nav__list {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__list li { border-bottom: 1px solid rgba(226, 192, 124, .18); }
  .nav__list li:last-child { border-bottom: 0; }

  .nav__list a {
    display: block;
    padding: 13px 0;
    border-bottom: 0;
    font-size: 18px;
  }

  .nav__cta { padding: 8px 16px; font-size: 15px; }

  /* --- Главная фотография --- */
  /* На телефоне кнопка записи прижата к нижнему краю снимка, поэтому
     высота фотографии решает, видно её или нет. Шапка с кнопками
     «Позвонить/Маршрут» занимает сверху около 310 px, и при прежних
     700 px кнопка уезжала за экран даже на рослых телефонах. */
  .hero {
    /* Высоту задаёт блок с текстом (он ниже переведён в поток), поэтому
       кнопку записи больше не срезает нижним краем снимка. Фотография
       лежит под текстом и растягивается на ту же высоту. */
    height: auto;
    min-height: 0;
  }
  .hero__img { object-position: center 88%; }
  /* Кегли подтянуты: с прежними первый экран не помещался вместе
     с кнопкой записи на телефонах высотой около 700 px */
  .hero__mono { width: 44px; margin-bottom: 10px; }

  .hero__line-1 {
    font-size: clamp(30px, 8.4vw, 40px);
    line-height: 1.12;
    margin-bottom: 10px;
  }

  .hero__line-2,
  .hero__line-3 {
    font-size: clamp(17px, 4.6vw, 20px);
    line-height: 1.4;
    margin-bottom: 12px;
  }

  /* Текст сверху, кнопка прижата к нижнему краю снимка.
     Блок текста растянут на всю фотографию, поэтому они не наезжают друг на друга. */
  .hero__text {
    /* В потоке, а не абсолютом: абсолютный блок не задаёт высоту
       родителю, и кнопка уезжала за нижний край фотографии. */
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    width: auto;
    min-height: min(52vh, 440px);
    transform: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 3.5vh 22px calc(16px + env(safe-area-inset-bottom));
  }

  .hero__cta {
    width: min(92%, 420px);
    margin: auto auto 0;
  }

  .hero__cta .btn { display: block; text-align: center; }

  /* Мягкое затемнение прямо под текстом — буквы не спорят с кирпичом */
  .hero__text::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(ellipse 88% 42% at 50% 26%, rgba(4, 10, 26, .74) 0%, transparent 78%),
      linear-gradient(180deg, rgba(4, 10, 26, .5) 0%, transparent 45%);
  }

  /* --- Плавающие кнопки: стрелка стоит НАД кнопкой записи,
         так они занимают меньше места по ширине --- */
  .fab {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
  }

  .fab__up { width: 46px; height: 46px; }
  .fab__arrow { width: 11px; height: 11px; }
  body.cookie-open .fab { bottom: calc(150px + env(safe-area-inset-bottom)); }

  .cookie { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }

  .footer { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }

  /* --- Окно заявки: помещается даже с открытой клавиатурой --- */
  .modal {
    align-items: flex-start;
    padding: 0;
    height: 100dvh;
    overflow-y: auto;
  }

  .modal__panel {
    width: 100%;
    max-height: none;
    min-height: 100dvh;
    padding: 24px 18px calc(28px + env(safe-area-inset-bottom));
    border-left: 0;
    border-right: 0;
  }

}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .nav__list, .nav__burger span { transition: none; }
}


/* ==========================================================================
   39. Мелкие исправления для узких экранов
   ========================================================================== */

@media (max-width: 900px) {
  /* Пропорция 16:9 вместе с min-height давала рамке ширину 391 px
     и горизонтальную прокрутку на телефоне */
  .videos .gold-frame { min-height: 0; }
}

@media (max-width: 700px) {
  /* Строка контактов в подвале переносится по частям, без разделителей */
  .footer__line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 14px;
  }

  .footer .sep { display: none; }

  .footer__legal { gap: 8px 14px; }
}

@media (max-width: 700px) {
  /* Пока внизу висит уведомление о cookie, кнопка на фотографии поднимается,
     чтобы оно её не закрывало */
  body.cookie-open .hero__text { padding-bottom: 165px; }
}


/* ==========================================================================
   40. Мобильная версия без листания вбок: всё умещается по вертикали,
       но блоки уплотнены, чтобы страница не растянулась
   ========================================================================== */

@media (max-width: 700px) {

  /* Фотографии — в столбец, кадр чуть ниже (3:2 вместо 4:3) */
  .gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 14px 18px 20px;
  }

  .shot .photo { aspect-ratio: 3 / 2; }
  .shot__text { padding: 14px 4px 0; }
  .shot__title { padding-top: 16px; font-size: 19px; }
  .shot__note { max-width: none; font-size: 15px; line-height: 1.5; }

  /* Карточки «Что мы даём» — по две в ряд */
  .cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .card {
    padding: 20px 13px 18px;
  }

  .card__num {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    font-size: 16px;
  }

  .card__title { font-size: 17px; margin-bottom: 8px; }
  .card__text { font-size: 14px; line-height: 1.45; }

  /* Три правила — в столбец, компактно */
  .rules__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .rule { padding: 22px 18px 20px; }
  .rule__num { width: 46px; height: 46px; margin-bottom: 13px; font-size: 17px; }
  .rule__title { font-size: 19px; }
  .rule__note { font-size: 15px; }

  /* Отзывы — в столбец, без лишнего воздуха */
  .reviews {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .review { padding: 17px 18px; }
  .review blockquote { margin-bottom: 8px; font-size: 16px; line-height: 1.45; }
  .review figcaption { font-size: 13px; }

  /* Шаги первого занятия — плотнее */
  .step { padding-bottom: 22px; }
  .step__title { margin: 4px 0 6px; font-size: 19px; }
  .step__note { font-size: 15px; line-height: 1.5; }
}

@media (max-width: 380px) {
  /* На самых узких экранах карточки всё же в один столбец */
  .cards { grid-template-columns: 1fr; }
}




/* ==========================================================================
   41. «Показать все» для фотографий и отзывов на телефоне
   ========================================================================== */

.more-btn { display: none; }

@media (max-width: 700px) {
  .gallery:not(.is-open) > .shot:nth-child(n + 4) { display: none; }
  .reviews:not(.is-open) > .review:nth-child(n + 3) { display: none; }

  .more-btn {
    display: block;
    margin: 20px auto 0;
    padding: 11px 26px;
    border: 1px solid var(--gold);
    background: none;
    color: var(--gold-bright);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 16px;
    cursor: pointer;
  }

  /* Кнопка под галереей стоит отдельным блоком во всю ширину */
  .gallery + .more-btn { margin-bottom: 6px; }
}

/* Общая страховка мобильной ширины для основного сайта и трёх концепций */
@media (max-width: 700px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  .topbar,
  .quick { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .topbar__cell,
  .quick__btn { min-width: 0; }

  .topbar__value {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .hero__line-1,
  .hero__line-2,
  .hero__line-3 { overflow-wrap: anywhere; }

  .cookie {
    flex-wrap: nowrap;
    gap: 12px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    text-align: left;
  }

  .cookie__text { font-size: 13px; line-height: 1.35; }
  .cookie__btn { flex: none; width: auto; padding: 9px 13px; }
  body.cookie-open .fab { bottom: calc(96px + env(safe-area-inset-bottom)); }
  body.cookie-open .hero__text { padding-bottom: 112px; }
}

@media (max-width: 380px) {
  .cookie { align-items: stretch; flex-direction: column; text-align: center; }
  .cookie__btn { width: 100%; }
  body.cookie-open .fab { bottom: calc(138px + env(safe-area-inset-bottom)); }
}


/* ==========================================================================
   42. Движение и «волшебство»

   Всё здесь настраивается токенами из :root, поэтому концепции меняют
   характер движения, не переписывая правила. Ни одного нового слушателя
   прокрутки и ни одного кадра на главном потоке: подъём пыли, дыхание
   фонаря и отставание снимка считает видеокарта, а браузер сам
   останавливает их, когда вкладка не видна.
   ========================================================================== */

/* --- Первый экран: отставание снимка и дыхание фонаря ---------------------
   hero-handheld правит transform, отставание пишется в translate — разные
   свойства, поэтому обе анимации живут на одном элементе.

   Прокруткой управляет сам браузер. Гейт @supports обязателен: без него
   браузер, который не знает animation-timeline, проиграет отставание
   один раз при загрузке как обычную анимацию. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__img {
      animation: hero-handheld 14s linear infinite both,
                 hero-breathe 26s ease-in-out infinite alternate both,
                 hero-drift auto linear both;
      animation-timeline: auto, auto, scroll(root block);
      animation-range: normal, normal, 0 100vh;
    }
  }
}

@keyframes hero-drift {
  from { translate: 0 0; }
  to   { translate: 0 var(--hero-drift); }
}

/* Фонарь над входом чуть дышит — свет живой, а не электрический */
@media (prefers-reduced-motion: no-preference) {
  .hero__sides { animation: lantern var(--lantern-dur) ease-in-out infinite alternate; }
}

@keyframes lantern {
  from { opacity: 1; }
  to   { opacity: var(--lantern-low); }
}


/* --- Вензель прочерчивается сам -------------------------------------------
   Только у героя. Остальные пять вензелей страницы при первой отрисовке
   либо за экраном, либо мельче 34 px — рисовать их все значит превратить
   приём в тик. Длины окружностей при r=46 и r=39 — 289 и 245 единиц. */
@media (prefers-reduced-motion: no-preference) {
  /* Знак — сплошная маска, отдельных фигур внутри нет и прочерчивать
     нечего. Поэтому он просто проступает снизу вверх. */
  .js .hero__mono .monogram {
    animation: seal-fill .8s var(--ease-club) .25s both;
  }
}

@keyframes seal-fill {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: none; }
}


/* --- Золотой проблеск по заголовкам ---------------------------------------
   В покое градиент ровно того же цвета, что и обычный заголовок
   (currentColor), поэтому даже если анимация не запустится, текст
   останется на месте и в своём цвете. Концепциям настраивать нечего:
   currentColor сам берёт их цвет заголовка. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @media (prefers-reduced-motion: no-preference) {
    html.js[data-concept="salon"] .text-block__title.is-visible,
    html.js[data-concept="salon"] .live__title.is-visible {
      background-image: linear-gradient(
        100deg,
        currentColor 0 42%,
        var(--shimmer-color) 50%,
        currentColor 58% 100%
      );
      background-size: 260% 100%;
      background-position: 0% 0;
      background-repeat: no-repeat;
      -webkit-background-clip: text;
              background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gilt-sweep var(--shimmer-dur) var(--ease-club) var(--shimmer-delay) 1 both;
    }

    /* Золотая черта под заголовком заливку текста не наследует */
    html.js[data-concept="salon"] .text-block__title.is-visible::after { -webkit-text-fill-color: initial; }
  }
}

/* Фон шире блока, поэтому 0% показывает его левый край, 100% — правый.
   На обоих концах в блоке ровный currentColor, а светлая полоса
   градиента проходит по тексту где-то посередине. Значения за
   пределами 0–100% уводят фон с блока целиком — текст пропадает. */
@keyframes gilt-sweep {
  from { background-position: 0% 0; }
  to   { background-position: 100% 0; }
}


/* --- Заголовок пишется пером ----------------------------------------------
   Строка проявляется слева направо, а по кромке бежит светящееся остриё —
   как надпись, которая выводится сама. В основном макете и в Regency:
   у Editorial свой приём (изумрудная линия), у Salon — латунный проблеск.

   Маска живёт только в состоянии .is-visible и держится заливкой both.
   Если анимация не запустится, маски нет вовсе и заголовок виден целиком. */
@media (prefers-reduced-motion: no-preference) {
  /* Блок заголовка сжимаем по тексту: иначе маска идёт через всю
     колонку и успевает пройти короткую строку почти мгновенно —
     «письма» не видно. */
  html.js:not([data-concept]) .text-block__title,
  html.js:not([data-concept]) .live__title,
  html.js[data-concept="regency"] .text-block__title,
  html.js[data-concept="regency"] .live__title {
    position: relative;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  html.js:not([data-concept]) .text-block__title.is-visible,
  html.js:not([data-concept]) .live__title.is-visible,
  html.js[data-concept="regency"] .text-block__title.is-visible,
  html.js[data-concept="regency"] .live__title.is-visible {
    -webkit-mask-image: linear-gradient(90deg, #000 44%, rgba(0, 0, 0, .3) 50%, transparent 56%);
            mask-image: linear-gradient(90deg, #000 44%, rgba(0, 0, 0, .3) 50%, transparent 56%);
    -webkit-mask-size: 230% 100%;
            mask-size: 230% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    animation: quill-write var(--quill-dur) var(--ease-club) var(--quill-delay) both;
  }

  html.js:not([data-concept]) .text-block__title.is-visible::before,
  html.js:not([data-concept]) .live__title.is-visible::before,
  html.js[data-concept="regency"] .text-block__title.is-visible::before,
  html.js[data-concept="regency"] .live__title.is-visible::before {
    content: "";
    position: absolute;
    inset: -8px 0;
    pointer-events: none;
    /* Свечение, а не полоса: радиальное пятно, размытое и в режиме
       screen — на тёмном фоне оно светится, а не мажет серым */
    background: radial-gradient(ellipse 46% 58% at 50% 50%, var(--shimmer-color), transparent 72%) no-repeat;
    background-size: 90px 100%;
    filter: blur(3px);
    mix-blend-mode: screen;
    animation: quill-nib var(--quill-dur) var(--ease-club) var(--quill-delay) both;
  }
}

/* Маска шире блока: 100% прячет строку целиком, 0% открывает её всю */
@keyframes quill-write {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
}

@keyframes quill-nib {
  0%   { background-position: -90px 0; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { background-position: calc(100% + 90px) 0; opacity: 0; }
}


/* --- Вспышка печати под вензелем ------------------------------------------
   Круги дорисовались, бабочка проявилась — и знак коротко вспыхивает,
   как оттиск восковой печати. */
.js .hero__mono { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  /* Знак вытянут по вертикали, поэтому вспышку и кольцо задаём квадратом
     от центра — иначе и то и другое получается овалом */
  .js .hero__mono::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 230%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle,
      #fff 0%,
      var(--shimmer-color) 26%,
      rgba(255, 220, 150, .35) 46%,
      transparent 70%);
    opacity: 0;
    pointer-events: none;
    animation: seal-flash 1.25s cubic-bezier(.16, .9, .3, 1) 1.02s both;
  }

  /* Кольцо-ударная волна: расходится от знака следом за вспышкой и
     делает момент появления заметным издалека */
  .js .hero__mono::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 128%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border: 2px solid var(--shimmer-color);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: seal-ring 1.15s cubic-bezier(.2, .8, .3, 1) 1.06s both;
  }

  /* Сам знак коротко «клюёт» в момент вспышки. Масштаб пишем отдельным
     свойством scale — transform занят проявлением, а эти два свойства
     складываются независимо друг от друга. */
  .js .hero__mono .monogram {
    animation: seal-fill .8s var(--ease-club) .25s both,
               seal-pop .55s cubic-bezier(.3, 1.6, .5, 1) 1.02s both;
  }
}

@keyframes seal-flash {
  0%   { opacity: 0;  transform: scale(.28); }
  14%  { opacity: 1;  transform: scale(1.06); }
  100% { opacity: 0;  transform: scale(2.2); }
}

@keyframes seal-ring {
  0%   { opacity: 0;   transform: scale(.3); }
  16%  { opacity: .95; }
  100% { opacity: 0;   transform: scale(2.5); }
}

@keyframes seal-pop {
  0%   { scale: 1; }
  40%  { scale: 1.18; }
  100% { scale: 1; }
}


/* --- Золотая рамка загорается при появлении -------------------------------
   Вместе с бликом по стеклу сама рамка коротко разгорается — металл,
   который вспомнил, что он золотой. */
.js .reveal.is-visible .gold-frame,
.js .stagger.is-visible .gold-frame {
  animation: frame-ignite 1.6s var(--ease-club) .4s 1;
}

@keyframes frame-ignite {
  0% {
    border-color: var(--gold);
    box-shadow: inset 0 0 0 2px var(--gold-dim), 0 0 26px rgba(0, 0, 0, .55);
  }
  35% {
    border-color: var(--gold-bright);
    box-shadow: inset 0 0 0 2px var(--gold-bright), 0 0 64px var(--glow-color);
  }
  100% {
    border-color: var(--gold);
    box-shadow: inset 0 0 0 2px var(--gold-dim), 0 0 26px rgba(0, 0, 0, .55);
  }
}


/* --- Взмах палочки: кольцо расходится от точки нажатия --------------------- */
.btn::after {
  content: "";
  position: absolute;
  left: var(--spark-x, 50%);
  top: var(--spark-y, 50%);
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 2px solid var(--spark-color);
  opacity: 0;
  pointer-events: none;
}

.btn.is-spark::after { animation: btn-ring .62s var(--ease-club) 1; }

@keyframes btn-ring {
  from { opacity: .9; transform: scale(.3); }
  to   { opacity: 0;  transform: scale(11); }
}

/* --- Орнаментальные разделители -------------------------------------------
   Линия расчерчивается от центра к краям, следом доворачивается ромб.
   Растим фон, а не ширину: так не трогается раскладка, а ромбы-
   псевдоэлементы торчат далеко за пределы полоски высотой 1 px и при
   обрезке по блоку были бы срезаны. */
.js .ornament.reveal {
  opacity: 0;
  transform: none;      /* гасим общий сдвиг .reveal: черта не едет снизу */
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 0% 100%;
  transition: background-size 1.1s var(--ease-club), opacity .5s ease;
}

.js .ornament.reveal.is-visible {
  opacity: 1;
  background-size: 100% 100%;
}

.js .ornament.reveal::before,
.js .ornament.reveal::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: opacity .6s ease .5s, transform 1s var(--ease-club) .5s;
}

.js .ornament.reveal.is-visible::before,
.js .ornament.reveal.is-visible::after {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Ромб коротко вспыхивает — один раз, без заливки: шесть вечно
   пульсирующих точек превратили бы страницу в игрушку */
.js .ornament.reveal.is-visible::after {
  animation: gleam 1.5s var(--ease-club) .75s 1;
}

@keyframes gleam {
  0%   { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
  45%  { box-shadow: 0 0 16px 2px var(--gleam-color); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}


/* --- Блик по золотой рамке при появлении ----------------------------------
   Тот же жест, что и при наведении, показанный заранее. Объявление
   псевдоэлемента поднято из @media (hover: hover) — иначе на сенсорных
   экранах блику не по чему бежать. Сам :hover остался там же.

   Заливка намеренно не задана: с ней конечный translateX(130%) навсегда
   перебил бы наведение, и блик по курсору перестал бы работать. */
.gold-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 243, 214, .16) 46%, transparent 60%);
  transform: translateX(-130%);
  transition: none;
}

.js .reveal.is-visible .gold-frame::after,
.js .stagger.is-visible .gold-frame::after {
  animation: frame-sheen .9s var(--ease-club) var(--sheen-delay) 1;
}

@keyframes frame-sheen {
  from { transform: translateX(-130%); }
  to   { transform: translateX(130%); }
}


/* --- Свет на рамках, карточках и кнопках ---------------------------------- */
.gold-frame:hover { box-shadow: inset 0 0 0 2px var(--gold-dim), 0 0 38px var(--glow-color); }
.photo:hover      { box-shadow: 0 0 30px var(--glow-color); }

.btn:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 246, 224, .28),
    0 6px 18px -8px rgba(0, 0, 0, .6),
    0 0 var(--glow-radius) var(--glow-color);
}

.fab__up:hover,
.fab__cta:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, .5), 0 0 20px var(--glow-color); }

.progress { box-shadow: 0 0 10px var(--glow-color); }


/* --- Тёплая вспышка в точке нажатия на кнопку -----------------------------
   Не «круги по воде»: бегущая окружность читается как виджет телефона.
   Здесь вспыхивает и гаснет пятно света — как загоревшаяся спичка.
   Координаты ставит скрипт в index.html. */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: "";
  position: absolute;
  left: var(--spark-x, 50%);
  top: var(--spark-y, 50%);
  width: var(--spark-size);
  height: var(--spark-size);
  margin: calc(var(--spark-size) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, var(--spark-color) 0%, transparent 68%);
  opacity: 0;
  pointer-events: none;
}

.btn.is-spark::before { animation: btn-spark var(--spark-dur) var(--ease-club) 1; }

@keyframes btn-spark {
  from { opacity: .85; transform: scale(0); }
  to   { opacity: 0;   transform: scale(1); }
}


/* --- Выключатель для тех, кто просил меньше движения ----------------------
   Один блок на весь раздел. Концепциям дублировать его не нужно: они
   меняют только токены, а здесь всё гасится напрямую, по селекторам. */
@media (prefers-reduced-motion: reduce) {
  .hero__img { translate: none; }
  .hero__sides { animation: none; }

  .js .hero__mono .monogram { opacity: 1; animation: none; }

  .js .text-block__title.is-visible,
  .js .live__title.is-visible {
    background-image: none;
    -webkit-text-fill-color: currentColor;
    -webkit-mask-image: none;
            mask-image: none;
    animation: none;
  }
  .js .text-block__title.is-visible::before,
  .js .live__title.is-visible::before,
  .js .hero__mono::after,
  .js .hero__mono::before { display: none; }

  .js .reveal.is-visible .gold-frame,
  .js .stagger.is-visible .gold-frame { animation: none; }

  .btn::after { display: none; }

  .js .ornament.reveal {
    opacity: 1;
    background-size: 100% 100%;
    transition: none;
  }
  .js .ornament.reveal::before,
  .js .ornament.reveal::after {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: none;
    animation: none;
  }

  .gold-frame::after { display: none; }
  .btn::before { display: none; }

  /* Пробелы, которые оставались открытыми и раньше */
  html { scroll-behavior: auto; }
  .rule,
  .nav__list a,
  .nav__cta,
  .fab__up,
  .fab__cta,
  .cookie__btn,
  .lightbox button,
  .modal__close,
  .field__input,
  .consent input,
  .consent a,
  .footer__legal a,
  .gold-frame,
  .photo { transition: none; }

  .card:hover,
  .rule:hover,
  .fab__up:hover,
  .fab__cta:hover { transform: none; }
}


/* ==========================================================================
   43. Шапка на телефоне: типографика и размеры

   Прежняя шапка была собрана по-настольному: подписи 10–11 px с разрядкой
   в пятую часть кегля, значения 16 px с широким интерлиньяжем, телефон
   с подчёркиванием. На узком экране это читалось как мелкая рябь, адрес
   рвался посреди слова, а по кнопкам было трудно попасть пальцем.

   Здесь разрядка убрана почти полностью, значения крупнее и плотнее,
   у ячеек и кнопок появилась комфортная высота нажатия.
   ========================================================================== */

@media (max-width: 700px) {

  /* Подписи: та же роль, но без ряби. Разрядка .12em на 11 px давала
     примерно 1.3 px между буквами — на мелком кегле это заметно мешает. */
  .topbar__label {
    font-size: 10.5px;
    letter-spacing: .05em;
    line-height: 1.2;
  }

  /* Значения крупнее и плотнее. text-wrap: balance не даёт адресу
     ломаться посреди «ул.» — строки делятся по смыслу. */
  .topbar__value {
    font-size: 17px;
    line-height: 1.3;
    text-wrap: balance;
    /* Страховочное правило ниже по файлу ставит overflow-wrap: anywhere —
       на узкой ячейке это рвало «джентльменов» посреди слова. Разрешаем
       разрыв только когда слово целиком не помещается. */
    overflow-wrap: break-word;
  }

  .topbar__cell--name .topbar__value {
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: 0;
  }

  /* Телефон: подчёркивание убрано, цифры не переносятся и выровнены
     по ширине — так номер читается одним куском */
  .topbar__value a {
    border-bottom: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  /* Ячейки: ровные отступы и высота, при которой по номеру телефона
     можно попасть пальцем, а не ногтем */
  .topbar__cell {
    gap: 5px;
    padding: 14px 12px;
    min-height: 78px;
    justify-content: center;
  }

  .topbar__mono { width: 28px; margin-bottom: 2px; }

  /* Часы работы: внутри диапазона перенос недопустим — иначе строка
     рвётся по тире и получается «10:00–» / «20:00». Каждый диапазон
     держим целиком, а между ними в разметке стоит <br>. */
  .topbar__cell:nth-child(4) .topbar__value {
    font-size: 16px;
    white-space: nowrap;
  }

  /* Кнопки «Позвонить» и «Маршрут»: высота под палец */
  .quick__btn {
    display: grid;
    place-items: center;
    min-height: 52px;
    padding: 14px 10px;
    font-size: 17px;
    letter-spacing: .01em;
  }
}

/* Очень узкие экраны: значения ещё чуть меньше, чтобы адрес и часы
   помещались в две строки, а не в три */
@media (max-width: 380px) {
  .topbar__value { font-size: 16px; }
  .topbar__cell--name .topbar__value { font-size: 16.5px; }
  /* Часы держим одной строкой, поэтому на самых узких экранах
     им нужен кегль поменьше, иначе строка вылезает за ячейку */
  /* Телефон не переносится, поэтому на узкой ячейке ему тоже нужен
     кегль поменьше — иначе номер упирается в границу */
  .topbar__cell:nth-child(3) .topbar__value { font-size: 15px; }
  .topbar__cell:nth-child(4) .topbar__value { font-size: 13.5px; }
  .topbar__cell { padding: 12px 8px; min-height: 72px; }
}


/* ==========================================================================
   44. Шапка: современная подача четырёх отделов

   Что именно старило шапку и что с этим сделано:

   1. Сериф на подписях и данных. Playfair и PT Serif хороши в крупных
      заголовках, но на 10–11 px превращаются в «корпоративный сайт
      2010 года». Данные — адрес, телефон, часы — переведены на рубленый
      Rubik, он уже лежит в проекте. Серифом остаётся только название
      клуба: именно оно держит тему, а не подписи к телефону.

   2. Всё по центру. Симметрия по центру в каждой ячейке читается как
      надгробная табличка. Содержимое выключено влево — взгляд идёт по
      одной вертикали, а не прыгает от середины к середине.

   3. Разделители во всю высоту. Линия от края до края делает из шапки
      таблицу с графами. Теперь волосяная черта не доходит до верха и
      низа — она разделяет, но не расчерчивает.

   Палитра, вензель и название не тронуты: тема клуба держится на них.
   ========================================================================== */

/* --- Рубленый для данных, сериф для названия --- */
.topbar__label,
.topbar__value {
  font-family: "Rubik", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.topbar__cell--name .topbar__value {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* --- Выключка влево вместо центровки --- */
.topbar__cell {
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 18px 22px;
  text-align: left;
}

.topbar__cell--name { gap: 8px; }
.topbar__mono { margin: 0 0 2px; }

/* --- Иерархия: подпись тише и мельче, значение крупнее и спокойнее --- */
.topbar__label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.2;
  opacity: .78;
  filter: none;
}

.topbar__value {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.topbar__cell--name .topbar__value {
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.2;
  font-variant-numeric: normal;
}

/* --- Разделитель, который не доходит до краёв --- */
.topbar__cell + .topbar__cell {
  border-left: 0;
  /* Черта не обрывается, а гаснет к краям — так она разделяет, но не
     расчерчивает полосу на графы */
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    var(--topbar-line) 32%,
    var(--topbar-line) 68%,
    transparent 100%
  );
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: left center;
}


/* ==========================================================================
   Шапка на телефоне
   ========================================================================== */

@media (max-width: 700px) {
  .topbar__cell {
    align-items: flex-start;
    text-align: left;
    gap: 4px;
    padding: 13px 14px;
    min-height: 0;
  }

  .topbar__cell--name { gap: 6px; }

  .topbar__label {
    font-size: 9.5px;
    letter-spacing: .11em;
    opacity: .72;
  }

  .topbar__value {
    font-size: 16px;
    line-height: 1.3;
  }

  .topbar__cell--name .topbar__value { font-size: 18px; }

  .topbar__mono { width: 26px; margin: 0 0 2px; }

  /* Между столбцами — короткая черта, между строками — обычная
     волосяная: горизонтальную обрезать по краям незачем, она и так
     не режет ячейку пополам */
  .topbar__cell:nth-child(2n) {
    border-left: 0;
    background-image: linear-gradient(
      180deg,
      transparent 0 22%,
      var(--topbar-line) 22% 78%,
      transparent 78% 100%
    );
    background-size: 1px 100%;
    background-repeat: no-repeat;
    background-position: left center;
  }

  .topbar__cell:nth-child(n + 3) { border-top: 1px solid var(--topbar-line); }

  /* Кнопки «Позвонить» и «Маршрут» — тоже рубленым, вровень с шапкой */
  .quick__btn {
    font-family: "Rubik", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .01em;
  }
}

@media (max-width: 380px) {
  .topbar__cell { padding: 12px 11px; }
  .topbar__value { font-size: 15px; }
  .topbar__cell--name .topbar__value { font-size: 16.5px; }
  .topbar__cell:nth-child(4) .topbar__value { font-size: 13.5px; }
}

/* --- Ячейка с названием: знак и название одним блоком -----------------------
   Раньше вензель, подпись «Клуб» и само название лежали тремя строками
   в столбик, а в трёх соседних отделах строк было две. Из-за этого
   подписи и значения не выстраивались в общие линии, и полоса выглядела
   собранной наспех.

   Теперь знак стоит слева, а подпись и название — справа от него, ровно
   на тех же двух линиях, что и в остальных отделах. */
.topbar__cell--name {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "mono label"
    "mono value";
  align-content: center;
  align-items: center;
  column-gap: 13px;
  row-gap: 3px;
}

.topbar__cell--name .topbar__mono {
  grid-area: mono;
  align-self: center;
  width: 36px;
  margin: 0;
}

.topbar__cell--name .topbar__label { grid-area: label; align-self: end; }
.topbar__cell--name .topbar__value { grid-area: value; align-self: start; }

/* Телефон: подчёркивание появляется только при наведении — ссылка
   остаётся ссылкой, но не пестрит в спокойном состоянии */
.topbar__value a {
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.topbar__value a:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .topbar__cell--name {
    column-gap: 10px;
    row-gap: 2px;
  }
  .topbar__cell--name .topbar__mono { width: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar__value a { transition: none; }
}

/* Название клуба в шапке: балансировка переносов делила его на две
   строки даже там, где оно помещается в одну. На узком экране перенос
   нужен, поэтому балансировку оставляем только на телефоне. */
.topbar__cell--name .topbar__value { text-wrap: normal; }

@media (max-width: 700px) {
  .topbar__cell--name .topbar__value { text-wrap: balance; }
}

/* Первому отделу — больше ширины: названию клуба её нужно больше, чем
   слову «Телефон». Отделов по-прежнему четыре, просто они не равны
   механически. На узком экране сетка два на два, там это не действует. */
@media (min-width: 901px) {
  .topbar { grid-template-columns: 1.32fr 1fr 1fr 1fr; }
}

/* Кегли в шапке на компьютере: на широком экране прежние 10 и 17 px
   выглядели мелко — места там достаточно. Телефон и планшет не трогаем,
   там размеры подобраны под узкую ячейку. */
@media (min-width: 901px) {
  .topbar__label { font-size: 12px; letter-spacing: .09em; }
  /* Тянется по ширине экрана: на 1280 при жёстких 20 px адрес
     переносился на вторую строку */
  .topbar__value { font-size: clamp(17px, 1.36vw, 20px); line-height: 1.35; }
  .topbar__cell--name .topbar__value { font-size: clamp(21px, 1.7vw, 26px); }
  .topbar__cell--name .topbar__mono { width: 40px; }
  .topbar__cell { gap: 7px; padding: 18px 24px; }
}


/* ==========================================================================
   45. Единая колонка контента

   Раньше ширина у блоков была разная: текстовые шли в колонке 1100 px,
   а видео, фотографии и трансляция — во всю ширину экрана с полями 18 px.
   На широком мониторе страница разъезжалась по краям.

   Теперь всё живёт в одной колонке 1240 px с полями по 50 px, как на
   d2.wesetup.ru. Фон полос (шапка, цифры, полосы с цитатами) остаётся
   во всю ширину — в колонку убрано только содержимое.
   ========================================================================== */

:root {
  --content: 1240px;
  --content-pad: 50px;
}

.wrap {
  max-width: var(--content);
  padding-inline: var(--content-pad);
}

/* Блоки, которые раньше шли во всю ширину */
.videos,
.gallery,
.live {
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--content-pad);
}

/* Шапка: подложка во всю ширину, четыре отдела — в колонке */
.topbar {
  padding-inline: max(0px, (100% - var(--content)) / 2);
}

/* Текст на первом экране — по той же колонке */
.hero__text {
  width: min(100% - var(--content-pad) * 2, var(--content));
}

@media (max-width: 1100px) {
  :root { --content-pad: 30px; }
}

@media (max-width: 700px) {
  :root { --content-pad: 18px; }

  /* На телефоне шапка занимает всю ширину: колонка там шире экрана */
  .topbar { padding-inline: 0; }

  .hero__text { width: auto; }
}

/* Шапка в колонке 1240 px: места стало меньше, чем было во всю ширину,
   поэтому отделы перераспределены и кегль значений чуть убавлен —
   иначе адрес и название ломались на две строки. Название клуба
   остаётся крупным: оно главное в этой полосе. */
@media (min-width: 901px) {
  .topbar { grid-template-columns: 1.55fr 1fr 1fr 1fr; }
  .topbar__cell { padding: 18px 14px; }
  .topbar__value { font-size: clamp(15.5px, 1.2vw, 17px); }
}

/* ==========================================================================
   46. Форма записи: симметрия

   Поле «Возраст» было ограничено 160 px, поэтому первый ряд выглядел
   рваным: широкое поле слева и короткий огрызок справа. Кнопка отправки
   при этом занимала произвольную ширину и висела слева.

   Теперь оба столбца равны, поля одной высоты, кнопка во всю ширину
   формы — ряды выстроены по одним вертикалям.
   ========================================================================== */

.form .field--small { max-width: none; }

.form__row { gap: 18px 20px; }

.form .field__input {
  min-height: 52px;
  padding: 14px 16px;
}

.form textarea.field__input {
  min-height: 108px;
  padding-top: 12px;
}

/* Стрелки у числового поля ломали ровную сетку и на разных браузерах
   выглядели по-разному */
.form input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.form input[type="number"]::-webkit-outer-spin-button,
.form input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Кнопка отправки — во всю ширину формы, вровень с полями */
.form .btn[type="submit"] {
  display: block;
  width: 100%;
  min-height: 56px;
  text-align: center;
}

.form .consent { margin: 2px 0 22px; }

@media (max-width: 600px) {
  .form__row { grid-template-columns: 1fr; gap: 0; }
}


/* ==========================================================================
   47. Шапка: четыре отдела на общих линиях

   Каждая ячейка центровала своё содержимое по вертикали сама по себе.
   Пока строк в отделах было поровну, линии совпадали случайно; но в
   «часах работы» строк две, а название клуба крупнее соседей — и
   подписи разъехались по высоте: 68, 72, 72 и 60 px от верха полосы.
   Отсюда ощущение, что шапка собрана криво.

   Теперь линии задаёт сама полоса: у неё две строки — одна под подписи,
   другая под значения, — а отделы подключаются к ним через subgrid.
   Подписи стоят на одной линии, значения — на одной базовой линии,
   вторая строка часов свисает вниз и никого не сдвигает.

   Там, где subgrid не поддерживается, ячейки просто выравниваются по
   верху: линии всё равно сходятся, только базовая линия названия
   отличается на пару пикселей.
   ========================================================================== */

:root {
  /* Насколько поднять название клуба, чтобы его базовая линия совпала
     с соседними отделами. Зависит от пары шрифтов, поэтому у каждого
     макета своё значение. */
  --topbar-name-lift: .3em;
}

@media (min-width: 901px) {
  .topbar {
    /* Колонки по содержимому, свободное место поровну между ними:
       при долях 1.55fr 1fr 1fr 1fr три отдела жались друг к другу,
       а у «часов работы» оставалось девяносто пикселей пустоты */
    grid-template-columns: repeat(4, auto);
    grid-template-rows: auto auto;
    align-content: center;
    align-items: stretch;
  }

  .topbar__cell {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
    justify-items: start;
    align-content: start;

    /* Свою долю свободного места отдел делит пополам — по половине
       слева и справа от содержимого. Тогда промежутки между отделами
       равны, разделители стоят ровно посередине промежутка, а от краёв
       колонки первый и последний отступают одинаково. Строки внутри
       отдела при этом остаются выключенными влево. */
    justify-content: center;
  }

  /* Расстояние от подписи до значения задаём отступом, а не gap:
     у subgrid шаг строк общий на всю полосу */
  .topbar__label {
    align-self: start;
    margin-bottom: 9px;
  }

  /* По базовой линии, а не по верху коробки: название набрано крупнее
     соседей, и выравнивание по верху задирало бы его строку */
  .topbar__value { align-self: baseline; }

  /* Отдел с названием: знак слева во всю высоту, подпись и название —
     в тех же двух общих строках */
  /* Обе дорожки по содержимому: при minmax(0, 1fr) вторая забирала всё
     свободное место отдела, и знак с названием прижимались влево, тогда
     как три соседних отдела стояли по середине своих долей */
  .topbar__cell--name {
    grid-template-columns: auto auto;
    grid-template-areas: none;
    column-gap: 14px;
  }

  .topbar__cell--name .topbar__mono {
    grid-column: 1;
    grid-row: span 2;
    align-self: center;
    margin: 0;
  }

  .topbar__cell--name .topbar__label { grid-column: 2; grid-row: 1; }

  /* Название набрано серифом и крупнее соседей, поэтому при общем верхе
     строки его базовая линия уходила вниз на девять пикселей. Подъём
     задан в долях кегля: название тянется по ширине экрана, и постоянный
     сдвиг в пикселях разошёлся бы на узком мониторе. */
  .topbar__cell--name .topbar__value {
    grid-column: 2;
    grid-row: 2;
    margin-top: calc(-1 * var(--topbar-name-lift));
    margin-bottom: var(--topbar-name-lift);
  }
}

@media (max-width: 700px) {

  /* В сетке два на два та же беда: в каждом ряду подпись у отдела с
     двумя строками уезжала вверх, потому что ячейка центровала себя
     сама. Теперь у полосы четыре строки — по паре на ряд, — и отделы
     подключаются к ним так же, как на компьютере. */
  .topbar { grid-template-rows: repeat(4, auto); }

  .topbar__cell {
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
  }

  .topbar__cell:nth-child(-n + 2) { grid-row: 1 / span 2; }
  .topbar__cell:nth-child(n + 3) { grid-row: 3 / span 2; }

  .topbar__label { margin-bottom: 5px; }

  .topbar__cell--name {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: none;
  }

  .topbar__cell--name .topbar__mono {
    grid-column: 1;
    grid-row: span 2;
    align-self: center;
    margin: 0;
  }

  .topbar__cell--name .topbar__label { grid-column: 2; grid-row: 1; }
  .topbar__cell--name .topbar__value { grid-column: 2; grid-row: 2; }
}


/* ==========================================================================
   48. Две колонки: текстовая и широкая

   В ТЗ видео, фотографии и трансляция идут «во весь экран». На мониторе
   2560 это выходит буквально: рамка видео шириной в полтора метра, текст
   строкой на двести знаков — показывать такое заказчику неловко. Но и
   загонять медиа в текстовую колонку 1240 px неверно: пропадает сама
   мысль широких полос.

   Поэтому колонок две. Текст читается в 1240 px — как на d2.wesetup.ru,
   на который ориентировался заказчик. Видео, фотографии и трансляция
   живут в своей колонке, на четверть шире, а подложка под ними тянется
   от края до края экрана. На любом мониторе полоса идёт во всю ширину,
   как и просили, но рамки внутри остаются соразмерны человеку.
   ========================================================================== */

:root {
  --media: 1560px;

  /* Подложка широких полос. Концепции переопределяют её под свою
     палитру — как уже делают с .section--alt */
  --band-bg:   var(--bg-2);
  --band-line: rgba(212, 176, 98, .22);
}

.videos,
.gallery,
.live {
  max-width: none;
  margin-inline: 0;
  /* Проценты считаются от ширины страницы, а не от самой полосы:
     отсюда и получается колонка по центру экрана */
  padding-inline: max(var(--content-pad), (100% - var(--media)) / 2);
  background: var(--band-bg);
  border-top: 1px solid var(--band-line);
  border-bottom: 1px solid var(--band-line);
}

@media (max-width: 1100px) {
  /* На ноутбуке и уже полоса и так во всю ширину — подложка только
     дробила бы страницу лишними линиями */
  .videos,
  .gallery,
  .live {
    background: none;
    border-top: 0;
    border-bottom: 0;
  }
}


/* ==========================================================================
   49. Ширина набора в текстовых разделах

   Колонка здесь 1140 px, а самая длинная фраза в разделе — 900, чаще
   780. Треть строки всегда оставалась пустой: набор прижимался влево,
   заголовок стоял по центру колонки, и блок выглядел съехавшим, хотя
   ничего не съезжало.

   Набору дана своя ширина — ровно под самую длинную фразу, — и он
   встаёт по центру под заголовком. Заодно это лечит и длину строки:
   1140 px при кегле 20 — это больше ста знаков в строке, вдвое выше
   удобного для чтения.
   ========================================================================== */

:root {
  --measure: 920px;
}

.line {
  max-width: var(--measure);
  margin-inline: auto;
}


/* ==========================================================================
   50. Видео и фотографии — во всю ширину экрана

   Заказчик просил в ТЗ прямо: два видео делят экран пополам, шесть
   фотографий идут во всю ширину. Колонка в 1560 px это сглаживала —
   получалось сдержанно, но не так, как он задумывал. Здесь возвращена
   буквальная подача: полосы с видео и фотографиями занимают весь экран,
   от края до края, с узкими полями.

   Трансляция, текст и шапка остаются в своих колонках — их ширину
   трогать не просили.
   ========================================================================== */

.videos,
.gallery {
  padding-inline: 18px;
}

@media (max-width: 700px) {
  .videos,
  .gallery { padding-inline: 14px; }
}


/* ==========================================================================
   51. Текстовый блок прижимается к своему набору

   В разделе 49 набору дали ширину 920 px и поставили по центру колонки.
   Но фразы короче: в «Жизни клуба» самая длинная — 782 px. Блок стоял по
   центру, а вот сам текст внутри него — нет: справа от последней буквы
   оставалось 138 px пустоты, и раздел по-прежнему выглядел сдвинутым
   влево.

   Теперь по центру ставится не колонка набора, а сам набор: блок
   сжимается ровно по самой длинной фразе раздела. Заголовок стоит над
   ним, строки начинаются от одной вертикали, а пустое место делится
   поровну слева и справа.
   ========================================================================== */

.text-block .wrap {
  width: fit-content;
  max-width: min(100%, var(--content));
  margin-inline: auto;
}


/* ==========================================================================
   52. Читаемость мелких подписей

   Приглушённое золото --gold-dim задумано как второстепенный цвет, но на
   очень тёмном фоне мелкий текст им набирать нельзя: шапка таблицы и
   подписи полей формы давали 3.9–4.2:1 при норме 4.5:1 для мелкого
   кегля. Здесь они на полтона светлее — роль второстепенного цвета
   сохраняется, а читаются они уже уверенно.
   ========================================================================== */

.schedule th,
.field__label { color: #b3944b; }


/* ==========================================================================
   53. «Что мы даём»: бенто-сетка

   Приём из каталога vibeprompts.dev, раздел Features / Bento. Шесть
   одинаковых карточек в три колонки читаются как список: глаз скользит,
   ни за что не цепляясь, и все шесть тем выглядят равнозначными.

   В бенто-сетке плитки разного размера. Первая — «Манеры и этикет» —
   занимает вчетверо больше места: это главный предмет клуба, ради него
   детей и приводят. Остальные расставлены так, чтобы сетка сходилась в
   прямоугольник без дыр: две узкие, три широкие.

       ┌───────────┬─────┬─────┐
       │     I     │ II  │ III │
       │           ├─────┴─────┤
       │           │    IV     │
       ├───────────┼───────────┤
       │     V     │    VI     │
       └───────────┴───────────┘

   На планшете и телефоне сетка остаётся прежней: там плиткам разного
   размера негде развернуться.
   ========================================================================== */

@media (min-width: 901px) {
  .cards {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(150px, auto);
  }

  .cards .card:nth-child(1) { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .cards .card:nth-child(2) { grid-column: 3; grid-row: 1; }
  .cards .card:nth-child(3) { grid-column: 4; grid-row: 1; }
  .cards .card:nth-child(4) { grid-column: 3 / span 2; grid-row: 2; }
  .cards .card:nth-child(5) { grid-column: 1 / span 2; grid-row: 3; }
  .cards .card:nth-child(6) { grid-column: 3 / span 2; grid-row: 3; }

  /* Главная плитка: содержимое по центру её высоты и крупнее набор */
  .cards .card:nth-child(1) {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .cards .card:nth-child(1) .card__num {
    width: 72px;
    height: 72px;
    margin-bottom: 22px;
    font-size: 26px;
  }

  .cards .card:nth-child(1) .card__title { font-size: clamp(24px, 1.9vw, 30px); }

  .cards .card:nth-child(1) .card__text {
    max-width: 30em;
    margin-inline: auto;
    font-size: 1.06em;
  }
}


/* ==========================================================================
   54. Форма записи: метка у неверного поля

   Приём из каталога vibeprompts.dev, раздел Contact. Раньше на любую
   ошибку выводилась одна строка внизу формы, и родителю приходилось
   искать, какое из шести полей он пропустил. Теперь ошибка стоит под
   своим полем.

   Цвет метки — отдельный токен: на тёмно-синем фоне нужен мягкий
   коралловый, на светлых макетах — глухой красный, и каждая концепция
   ставит свой.
   ========================================================================== */

:root {
  --field-error: #e8927f;
}

.field--invalid .field__input {
  border-color: var(--field-error);
  background: rgba(232, 146, 127, .06);
}

.field--invalid .field__input:focus {
  border-color: var(--field-error);
  outline-color: var(--field-error);
}

.field__error,
.consent__error {
  display: block;
  font-size: 13.5px;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--field-error);
}

.field__error { margin-top: 7px; }

.consent__error { margin: -14px 0 18px; }

.consent--invalid input { border-color: var(--field-error); }

/* Цвет строки-предупреждения под формой. По умолчанию — янтарь по
   тёмно-синему; светлые макеты ставят свой, иначе янтарь по белому даёт
   контраст 1.6:1 и строку попросту не видно. */
:root { --notice-warn: #f0b96a; }


/* ==========================================================================
   55. Две дороги в полосе призыва

   Приём из каталога vibeprompts.dev, раздел CTA Banners. Раньше в полосе
   стояла одна кнопка «записаться». Но родители делятся надвое: одни
   готовы прийти, другим сначала нужно поговорить. Теперь дороги две, и
   вторая не выглядит отказом от первой — просто она тише.
   ========================================================================== */

.cta-band__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: stretch;
}

.cta-path {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px 28px 28px;
  border: 1px solid var(--hairline);
  background: var(--panel);
}

/* Тихая дорога отличается пунктиром, но подложка у неё та же: при
   прозрачном фоне её текст ложился прямо на цветную полосу, а в светлых
   макетах эта полоса синяя или шампанская — надписи пропадали */
.cta-path--quiet { border-style: dashed; }

.cta-path__title {
  margin: 0;
  font-size: 22px;
  color: var(--title);
}

.cta-path__text {
  margin: 0;
  flex: 1;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
}

.cta-path .btn { margin-top: 6px; }

@media (max-width: 700px) {
  .cta-band__inner { grid-template-columns: 1fr; gap: 14px; }
  .cta-path { padding: 20px 18px 22px; }
  .cta-path__title { font-size: 19px; }
  .cta-path .btn { width: 100%; text-align: center; }
}


/* ==========================================================================
   56. Четыре обещания у кнопки записи

   Приём из каталога, раздел CTA Banners. Крупная просьба смягчается
   короткими ответами на то, из-за чего родители обычно тянут: деньги,
   обязательства, страх оставить ребёнка одного.
   ========================================================================== */

.promises {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 26px;
  max-width: 640px;
  margin: 22px auto 26px;
  padding: 0;
  list-style: none;
}

.promises li {
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--text);
}

/* Галочка рисуется углом рамки — без картинок и шрифтовых значков */
.promises li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .34em;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--title);
  border-bottom: 2px solid var(--title);
  transform: rotate(45deg);
}

@media (max-width: 600px) {
  .promises { grid-template-columns: 1fr; gap: 9px; margin: 18px auto 22px; }
}


/* ==========================================================================
   57. Карточка «перезвоните мне»

   Приём из каталога, раздел Contact. Шесть полей основной формы
   отпугивают тех, кто зашёл с телефона между делами. Здесь путь короче:
   номер и время, когда удобно говорить.
   ========================================================================== */

.callback {
  margin: 34px 0 0;
  padding: 26px 26px 28px;
  border: 1px dashed var(--hairline);
  background: var(--panel);
}

.callback__title {
  margin: 0 0 6px;
  font-size: 21px;
  color: var(--title);
}

.callback__text {
  margin: 0 0 18px;
  font-size: 16px;
  color: var(--text);
}

.callback__form { display: block; }

.slots {
  margin: 16px 0 20px;
  padding: 0;
  border: 0;
}

.slots .field__label { margin-bottom: 10px; }

.slot { display: inline-block; margin: 0 8px 8px 0; }

.slot input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.slot span {
  display: block;
  padding: 9px 18px;
  border: 1px solid var(--hairline);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.slot span:hover { border-color: var(--gold); }

.slot input:checked + span {
  border-color: var(--gold);
  background: var(--gold);
  color: #071431;
}

.slot input:focus-visible + span { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

.callback__form .btn { display: block; width: 100%; min-height: 54px; }

@media (max-width: 600px) {
  .callback { padding: 20px 16px 22px; }
}


/* ==========================================================================
   58. Всплывающее уведомление

   Приём из каталога, раздел Bonus. Короткое сообщение в углу экрана —
   для ответов, ради которых незачем уводить взгляд от того места, где
   человек только что нажал кнопку.
   ========================================================================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 60;
  max-width: min(420px, calc(100vw - 32px));
  padding: 14px 20px;
  border: 1px solid var(--hairline);
  background: var(--toast-bg);
  color: var(--toast-fg);
  font-size: 15.5px;
  line-height: 1.4;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  opacity: 0;
  translate: -50% 16px;
  transition: opacity .35s ease, translate .35s ease;
}

.toast.is-shown {
  opacity: 1;
  translate: -50% 0;
}

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}


/* ==========================================================================
   59. Текущий раздел в шапке

   Приём из каталога, раздел Nav Bars. Страница длинная, и по ней легко
   потерять место. Ссылка того раздела, который сейчас на экране,
   подчёркнута золотом.
   ========================================================================== */

.nav__list a[aria-current="true"] {
  color: var(--gold-bright);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}


/* ==========================================================================
   60. Как рос клуб: вехи по годам

   Приём из каталога vibeprompts.dev, раздел Stats Bars. Одиннадцать лет
   работы — главный довод клуба, но в строке цифр он сжат до числа «11».
   Лента расставляет годы по порядку, и за ними видно живую историю:
   первая группа, первый бал, сотый выпускник.

   Вехи идут в три колонки, а слева у каждой — золотая черта с точкой:
   так ряд читается как единая линия времени, а не как набор карточек.
   ========================================================================== */

.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.milestone {
  position: relative;
  padding: 2px 0 2px 26px;
  border-left: 1px solid var(--hairline);
}

/* Точка на линии времени */
.milestone::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold-dim);
}

.milestone--now::before {
  background: var(--gold-bright);
  box-shadow: 0 0 0 4px rgba(226, 192, 124, .18);
}

.milestone__year {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.milestone__title {
  margin: 0 0 7px;
  font-size: 20px;
  color: var(--title);
}

.milestone__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
}

@media (max-width: 900px) {
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

@media (max-width: 600px) {
  .timeline { grid-template-columns: 1fr; gap: 18px; }
  .milestone__title { font-size: 18px; }
  .milestone__text { font-size: 15px; }
}


/* ==========================================================================
   61. Оценка родителей и её разбивка

   Приём из каталога, раздел Testimonials. Отзывы лежали ровной сеткой —
   их читают, но общего впечатления не складывается. Средняя оценка и
   разбивка по звёздам дают его за секунду, до чтения.
   ========================================================================== */

.rating {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 30px 44px;
  align-items: center;
  max-width: 760px;
  margin: 0 auto 30px;
  padding: 24px 30px;
  border: 1px solid var(--hairline);
  background: var(--panel);
}

.rating__score { text-align: center; }

.rating__num {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 54px;
  line-height: 1;
  color: var(--title);
}

.rating__stars {
  display: block;
  margin: 6px 0 4px;
  font-size: 17px;
  letter-spacing: .16em;
  color: var(--accent, var(--gold));
}

.rating__count {
  display: block;
  font-size: 13.5px;
  color: var(--text-muted);
}

.rating__bars {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rating__bars li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 42px;
  gap: 12px;
  align-items: center;
  margin-bottom: 7px;
}

.rating__bars li:last-child { margin-bottom: 0; }

.rating__label,
.rating__pct {
  font-size: 13.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.rating__pct { text-align: right; }

.rating__bar {
  display: block;
  height: 7px;
  background: var(--hairline);
  overflow: hidden;
}

.rating__bar i {
  display: block;
  height: 100%;
  background: var(--gold);
}

/* Один отзыв крупно */
.review--featured {
  max-width: 900px;
  margin: 0 auto 30px;
  padding: 30px 34px 26px;
  text-align: center;
}

.review--featured blockquote {
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.5;
}

@media (max-width: 700px) {
  .rating {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 18px;
  }
  .rating__num { font-size: 44px; }
  .review--featured { padding: 22px 18px 20px; }
}


/* ==========================================================================
   62. Три возрастные группы карточками

   Приём из каталога, раздел Pricing. Таблица ниже хороша для сравнения,
   но родителю сначала нужно узнать свою группу — и увидеть, что в ней.
   Средняя выделена: она самая ходовая, и в таком наборе взгляду нужна
   точка опоры.
   ========================================================================== */

.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 0 34px;
}

.tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 22px 28px;
  border: 1px solid var(--hairline);
  background: var(--panel);
  text-align: center;
}

.tier--pick {
  border-color: var(--gold);
  background: var(--panel-pick);
}

.tier__flag {
  margin: -14px 0 2px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #071431;
  background: var(--gold);
  padding: 4px 14px;
}

.tier__name {
  margin: 0;
  font-size: 23px;
  color: var(--title);
}

.tier__age {
  margin: 0;
  font-size: 15px;
  color: var(--text-muted);
}

.tier__price {
  margin: 6px 0 4px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 34px;
  line-height: 1;
  color: var(--title);
  font-variant-numeric: tabular-nums;
}

.tier__price span {
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
}

.tier__list {
  margin: 10px 0 18px;
  padding: 0;
  list-style: none;
  flex: 1;
}

.tier__list li {
  margin-bottom: 6px;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--text);
}

.tier .btn { width: 100%; }

@media (max-width: 900px) {
  .tiers { grid-template-columns: 1fr; gap: 14px; margin-bottom: 26px; }
  .tier { padding: 22px 18px 24px; }
  .tier__flag { margin-top: -10px; }
}


/* ==========================================================================
   63. Как устроен клуб: фотография и текст через строку

   Приём из каталога vibeprompts.dev, раздел Features / Bento —
   «alternating showcase». Три блока по двадцать строк подряд читаются
   тяжело: это стена текста. Здесь рассказ идёт рядами, и стороны
   чередуются — фотография то слева, то справа. Двадцать строк по ТЗ
   при этом остаются на своих местах, тронуты не они.
   ========================================================================== */

.showcase {
  display: grid;
  gap: 46px;
}

.showcase__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}

/* Через ряд фотография переезжает направо */
.showcase__row--flip .showcase__media { order: 2; }

.showcase__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 3px solid var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold-dim);
  background: linear-gradient(150deg, #12305f 0%, #0a1c40 60%, #071331 100%);
}

.showcase__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.showcase__row:hover .showcase__media img { transform: scale(1.04); }

.showcase__num {
  display: block;
  margin-bottom: 10px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 15px;
  letter-spacing: .22em;
  color: var(--text-muted);
}

.showcase__title {
  margin: 0 0 12px;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.2;
  color: var(--title);
}

.showcase__note {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
}

@media (max-width: 800px) {
  .showcase { gap: 30px; }
  .showcase__row { grid-template-columns: 1fr; gap: 16px; }
  /* На телефоне фотография всегда сверху: чередование сторон там
     превращается в чередование порядка, и рассказ рвётся */
  .showcase__row--flip .showcase__media { order: 0; }
  .showcase__note { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase__media img,
  .showcase__row:hover .showcase__media img { transition: none; transform: none; }
}


/* ==========================================================================
   64. Группа и время в форме записи

   Приём из каталога, раздел Contact — «demo booking with time slots».
   Раньше форма спрашивала возраст и молчала. Теперь родитель сразу
   видит, в какую группу попадает ребёнок и когда она занимается, —
   заявка перестаёт быть отвлечённой «записью на пробное».
   ========================================================================== */

.slots--groups { margin: 0 0 18px; }

.slots__when {
  width: 100%;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
}

@media (max-width: 600px) {
  .slot { margin-right: 6px; }
  .slot span { padding: 9px 13px; font-size: 14px; }
  .slots__when { font-size: 14px; }
}

/* ==========================================================================
   65. Общие подложки для новых блоков

   Полоса призыва, карточка звонка, оценка, вехи и карточки групп — все
   они стоят на одинаковой подложке с волосяной рамкой. Цвета вынесены в
   два токена, чтобы светлые макеты перекрашивали их одной строкой, а не
   повторяли каждое правило.
   ========================================================================== */

:root {
  --panel:      rgba(4, 10, 26, .3);
  --panel-pick: rgba(18, 58, 122, .3);
  --hairline:   rgba(226, 192, 124, .28);
  --toast-bg:   rgba(6, 15, 38, .97);
}

/* Цвет текста в новых блоках. Золотые токены в светлых макетах — это
   акцент, а не цвет набора: там золото по белому даёт 3:1. Поэтому у
   текста, заголовков и мелких подписей свои токены, и каждый макет
   ставит их под свою подложку. */
:root {
  --title:      var(--gold-bright);
  --text:       var(--gold);
  --text-muted: #b3944b;
  --toast-fg:   var(--gold-bright);
}

/* ==========================================================================
   66. Знак клуба: силуэт вместо вензеля

   Прежний знак был круглым — квадратная картинка 100×100, и все размеры
   на сайте задавались одной стороной. Новый знак вертикальный: фигура
   в цилиндре с тростью, пропорция примерно два к трём. Если оставить
   прежние ширины, знак вырастет в полтора раза по высоте и поедет во
   всех шести местах сразу.

   Поэтому высоту у картинки отпускаем на усмотрение пропорции, а
   ширины собираем здесь в одном месте — так их удобно подгонять, не
   разыскивая по всему файлу.
   ========================================================================== */

.nav__logo     { width: 26px; }
.hero__mono    { width: 42px; }
.footer__mono  { width: 32px; }
.modal__mono   { width: 34px; }
.master__mono  { width: 36px; }
.doc__logo     { width: 28px; }

.topbar__cell--name .topbar__mono { width: 30px; }

@media (max-width: 900px) {
  .topbar__cell--name .topbar__mono { width: 26px; }
  .hero__mono { width: 34px; }
}

@media (max-width: 700px) {
  .topbar__cell--name .topbar__mono { width: 24px; }
  .hero__mono { width: 30px; }
  .footer__mono { width: 28px; }
}


/* ==========================================================================
   67. «О клубе»: текст слева, фотография справа

   Двадцать строк подряд по всей ширине колонки читаются тяжело, а первый
   раздел — тот, где посетитель решает, читать ли дальше. Здесь текст
   занимает левые 58% колонки, а правые 38% отданы фотографии.

   Фотография вертикальная и заметно короче двадцати строк, поэтому она
   не висит вверху, а едет вместе с текстом: position: sticky держит её
   в поле зрения, пока колонка не закончится.

   Заголовок «О клубе» переезжает внутрь текстовой колонки и выключается
   влево — по центру он спорил бы с раскладкой.
   ========================================================================== */

/* Раздел 51 сжимает .wrap по самой длинной строке, а раздел 45 держит
   всё в колонке 1240 px. Здесь не годится ни то, ни другое: заказчик
   просил, чтобы текст занимал 50–60% ЭКРАНА, а фотография 30–40%. */
/* Вес селектора поднят намеренно: у концепций .wrap ограничен колонкой
   правилом с атрибутом, и без третьего класса оно перебивало это. */
.text-block.text-block--split .wrap {
  width: auto;
  max-width: none;
}

.about__grid {
  display: grid;
  grid-template-columns: 58% 36%;
  justify-content: space-between;
  align-items: start;
}

/* На очень широком мониторе 58% экрана — это строка в полтора экрана
   текста, читать её невозможно. Ограничение включается только там, где
   колонка перевалила за 1200 px, то есть примерно с 2100 px ширины. */
.text-block--split .line { max-width: 1200px; }

/* Заголовок стоит над обеими колонками и выключен по центру — как во
   всех остальных разделах страницы */
.text-block--split .text-block__title { margin-top: 0; }

/* Набор выключен влево, без общей центровки */
.text-block--split .line { margin-inline: 0; }

.about__media {
  position: sticky;
  top: 92px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 3px solid var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold-dim);
  background: linear-gradient(150deg, #12305f 0%, #0a1c40 60%, #071331 100%);
}

.about__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.about__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1200px) {
  /* Одна колонка: сначала заголовок с текстом, фотография под ними.
     Порог 1200, а не 800: между ними колонка текста ужимается настолько,
     что почти каждая фраза ломается надвое. */
  .about__grid { grid-template-columns: 1fr; gap: 26px 0; }

  .about__media {
    position: static;
    width: 100%;
    max-width: 380px;
    margin-inline: auto;
  }
}


/* ==========================================================================
   68. Название клуба в полосе: симметричный знак

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

@media (min-width: 901px) {
  .topbar__cell--name {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    grid-row: span 2;
    grid-template-rows: none;
    text-align: center;
  }

  .topbar__cell--name .topbar__mono {
    width: 34px;
    margin: 0 0 2px;
  }

  .topbar__cell--name .topbar__label,
  .topbar__cell--name .topbar__value {
    margin: 0;
    align-self: auto;
    text-align: center;
  }
}

@media (max-width: 900px) {
  .topbar__cell--name {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
  }

  .topbar__cell--name .topbar__mono { margin: 0 0 2px; }

  .topbar__cell--name .topbar__label,
  .topbar__cell--name .topbar__value { margin: 0; text-align: center; }
}


/* ==========================================================================
   69. «О клубе»: строка длиннее

   Фразы в этом разделе короткие, по одной на строку, и при кегле 19 они
   не доставали до края своей колонки — текст казался узким рядом с
   крупной фотографией. Кегль теперь растёт вместе с экраном: на 1440 он
   прежний, а на широком мониторе строка вытягивается и заполняет
   отведённые ей проценты.
   ========================================================================== */

@media (min-width: 901px) {
  .text-block--split .line { font-size: clamp(18px, 1.02vw, 21px); }
  .text-block--split .line--lead { font-size: clamp(19.5px, 1.1vw, 22.7px); }
}


/* ==========================================================================
   70. Полоса: отдел с названием вырос и потянул за собой строки

   Знак встал столбиком, отдел с названием стал вдвое выше соседних — и
   общие строки, на которых держались подписи, растянулись: подпись
   «Адрес» уехала к потолку, а сам адрес остался посередине.

   Общие строки здесь больше не нужны: у трёх отделов со сведениями
   разметка одинаковая, и если дать значению высоту в две строки, все
   три выстроятся сами. Тогда их можно просто поставить по центру
   полосы — рядом с эмблемой это и выглядит ровно.
   ========================================================================== */

@media (min-width: 901px) {
  /* Строка тянется на всю высоту полосы: иначе чёрная плашка первого
     отдела висит посередине, а не делит полосу от края до края */
  .topbar { grid-template-rows: none; align-content: stretch; }

  .topbar__cell:not(.topbar__cell--name) {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    grid-template-rows: none;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
  }

  .topbar__cell:not(.topbar__cell--name) .topbar__label {
    align-self: auto;
    margin: 0 0 9px;
  }

  /* Две строки высотой у всех трёх: у «часов работы» их две по-настоящему,
     и без этого её подпись вставала выше двух соседних */
  .topbar__cell:not(.topbar__cell--name) .topbar__value {
    align-self: auto;
    min-height: 2.7em;
  }

  .topbar__cell--name { grid-row: auto; }
}


/* ==========================================================================
   72. «О клубе»: одна колонка, но читаемой ширины

   По ТЗ здесь двадцать строк одной колонкой — делить их надвое нельзя.
   А беда была не в количестве колонок, а в длине строки: на широком
   мониторе она доходила до ста пятидесяти знаков, и глаз, возвращаясь к
   началу следующей, каждый раз терял место.

   Поэтому ширину набора ограничиваем в долях кегля, а не в пикселях:
   40em — это примерно 75–80 знаков независимо от того, какой кегль
   выбран для текущего экрана. Сам кегль растёт вместе с экраном, и
   вместе с ним растёт колонка — но число знаков в строке остаётся
   прежним. Остаток ширины отдела работает отступом до фотографии.

   Раздел целиком ограничен двумя тысячами пикселей: дальше растягивать
   его нечем, иначе между текстом и фотографией появляется дыра.
   ========================================================================== */

.text-block.text-block--split .wrap {
  max-width: 2000px;
  margin-inline: auto;
}

@media (min-width: 1201px) {
  /* Кегль подобран так, чтобы самая длинная фраза раздела (94 знака)
     как раз укладывалась в отведённую колонку: 1.17vw — это её ширина,
     делённая на число знаков. Тогда остальные фразы, а они короче,
     дают 60–80 знаков в строке — ровно удобный диапазон, — и между
     текстом и фотографией не остаётся дыры. */
  .text-block--split .line {
    max-width: 48em;
    margin-bottom: 11px;
    line-height: 1.6;
    font-size: clamp(18px, 1.17vw, 23px);
  }

  .text-block--split .line--lead { font-size: clamp(19.5px, 1.27vw, 25px); }
}

/* На ноутбучных ширинах отделу с текстом отдаём больше доли: при 58% от
   1366 колонка ужимается до восьмисот пикселей, и длинные фразы начинают
   ломаться каждая. Фотография при этом остаётся крупной. */
@media (min-width: 1201px) and (max-width: 1560px) {
  .about__grid { grid-template-columns: 65% 29%; }
}


/* ==========================================================================
   73. Ролик на первом экране

   Фотография остаётся на месте и работает и запасным вариантом, и
   заставкой: ролик лежит поверх неё прозрачным и проявляется только
   когда действительно пошёл. Поэтому отсутствие файла, запрет
   автозапуска в браузере и отключённое движение в системе выглядят
   одинаково — просто остаётся фотография.

   Обработка кадра та же, что у снимка: то же размытие и приглушение,
   иначе в момент подмены картинка заметно дёрнется.
   ========================================================================== */

.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Кадрирование по центру. Сами сцены собраны так, что люди сидят в
     середине кадра: на широком окне первый экран срезает до четверти
     высоты ролика, и при смещении рамки вверх или вниз кто-нибудь
     обязательно уходил за край — то головы за столом, то ребята у двери */
  object-position: center 50%;
  filter: blur(1.7px) brightness(.86) saturate(.88);
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none;
}

.hero__video.is-playing { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}


/* ==========================================================================
   74. Первый отдел полосы: знак и название клуба

   Раньше здесь была чёрная плашка, сделанная по присланному образцу.
   Заказчик посмотрел её на живом сайте и попросил чёрный убрать: полоса
   стала единой, прозрачно-синей (раздел 81), и знак с названием лежат на
   том же поле, что адрес, телефон и часы.

   Знак вытянут почти во всю высоту полосы, рядом — ДЕНДИ заглавными тем
   же Playfair Display. Кириллица у шрифта есть (fonts.css подключает
   playfairdisplay-600-cyrillic), подмены на Georgia не будет.

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

   Правила ограничены основным макетом: у трёх концепций свой знак и своя
   раскладка первого отдела.
   ========================================================================== */

html:not([data-concept]) .topbar__cell--name {
  position: relative;
}

@media (min-width: 901px) {
  /* Высота знака: полоса минус небольшие поля сверху и снизу.
     Ширину считаем из пропорции знака (50,6 : 100) — так он остаётся
     во всю высоту полосы при любой её высоте. */
  html:not([data-concept]) .topbar__cell--name {
    --mono-h: calc(var(--topbar-h) - 18px);

    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "mono name"
      "mono tag";
    align-content: center;
    justify-content: start;
    column-gap: 18px;
    row-gap: 0;
    padding: 9px 20px 9px 6px;
  }

  html:not([data-concept]) .topbar__cell--name .topbar__mono {
    grid-area: mono;
    align-self: center;
    display: block;
    width: calc(var(--mono-h) * .506);
    height: var(--mono-h);
    margin: 0;
  }

  html:not([data-concept]) .topbar__cell--name .monogram {
    width: 100%;
    height: 100%;
  }

  html:not([data-concept]) .topbar__cell--name .topbar__value {
    grid-area: name;
    margin: 0;
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    /* Кегль подобран так, чтобы надпись вместе с подписью под ней шла
       вровень со знаком */
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    color: #f0d79a;
    background: linear-gradient(180deg, #fbeec4 0%, #edcd85 46%, #c99a36 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Подпись под названием набрана так же, как «Адрес», «Телефон» и
     «Часы работы»: тот же рубленый шрифт, разрядка и тон. Раньше она
     была серифом и прижималась к правому краю слова — читалась как
     отдельная надпись, а не как часть знака. */
  html:not([data-concept]) .topbar__cell--name .topbar__label {
    grid-area: tag;
    display: block;
    margin: 3px 0 0;
    justify-self: start;
    font-family: "Rubik", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-align: left;
    color: #b89a5c;
    opacity: 1;
    filter: none;
  }
}

@media (max-width: 900px) {
  html:not([data-concept]) .topbar__cell--name {
    display: grid;
    grid-template-columns: auto auto;
    /* Свои строки, а не общие для всей полосы: при subgrid название
       попадало в строку подписей, подпись «клуб хороших манер» — в строку
       значений, и между ними зияло 34 px пустоты */
    grid-template-rows: auto auto;
    grid-template-areas:
      "mono name"
      "mono tag";
    align-content: center;
    justify-content: start;
    column-gap: 9px;
    row-gap: 2px;
    padding: 11px 12px 11px 12px;
  }

  html:not([data-concept]) .topbar__cell--name .topbar__mono {
    grid-area: mono;
    align-self: center;
    width: 26px;
    margin: 0;
  }

  /* Знак выше пары строк и растягивает их, поэтому название и подпись
     разъезжались по краям своих строк. Сводим их к общей середине:
     название прижато к низу верхней строки, подпись — к верху нижней */
  html:not([data-concept]) .topbar__cell--name .topbar__value { align-self: end; }
  html:not([data-concept]) .topbar__cell--name .topbar__label { align-self: start; }

  html:not([data-concept]) .topbar__cell--name .topbar__value {
    grid-area: name;
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 20px;
    line-height: 1;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: left;
    color: #f0d79a;
  }

  html:not([data-concept]) .topbar__cell--name .topbar__label {
    grid-area: tag;
    display: block;
    margin: 2px 0 0;
    justify-self: start;
    font-family: "Rubik", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: left;
    color: #b89a5c;
    opacity: 1;
    filter: none;
  }
}


/* ==========================================================================
   75. Полоса: синий приглушён, чтобы не спорить с чёрной плашкой

   Прежний градиент #123a7a → #0d2757 был самым ярким пятном наверху:
   меню под полосой почти чёрное, первый экран тоже тёмный, и рядом
   с чёрной плашкой синий отдел выглядел отдельной яркой коробкой.
   Теперь полоса того же глубокого тона, что и страница: сверху чуть
   светлее, к низу сходит в цвет чередующихся полос (#081431).

   Подписи «Адрес», «Телефон», «Часы работы» заодно подняты по тону.
   Тёмное золото с прозрачностью давало на синем 2,1 : 1 — подпись
   угадывалась, а не читалась. Сейчас 5,4 : 1, и она всё ещё заметно
   тише самих данных (12 : 1), так что иерархия прежняя.
   ========================================================================== */

html:not([data-concept]) .topbar {
  background: linear-gradient(180deg, #0b1a3b 0%, #08132d 100%);
}

html:not([data-concept]) .topbar__cell:not(.topbar__cell--name) .topbar__label {
  /* На прозрачной полосе прежний #a88a4a не дотягивал до нормы */
  color: #b89a5c;
  opacity: 1;
}


/* ==========================================================================
   76. Полоса: ровные поля вместо прилипших надписей

   Замер на 1440 показал три перекоса:

   1. В синих отделах надпись стояла в 14 px от разделителя, а справа
      оставалось 96 px пустоты — текст будто прилип к линии слева.
   2. Знак с названием на чёрной плашке не стоял по центру ни на одной
      ширине: 68 px от края экрана и 167 px до синего на 1440.
   3. На телефоне отделы собраны сеткой с центровкой, и короткие
      надписи съезжали к середине — подписи в одной колонке начинались
      с разных мест (12, 14, 16 и 20 px).

   Плюс золотая черта во всю высоту на стыке чёрного и синего: смену
   цвета и так видно, а черта превращала плашку в наклеенную коробку.
   ========================================================================== */

/* Стык чёрного и синего — без черты: границей служит сам цвет */
html:not([data-concept]) .topbar__cell--name {
  border-right: 0;
}

html:not([data-concept]) .topbar__cell--name + .topbar__cell {
  background-image: none;
  border-left: 0;
}

@media (min-width: 901px) {
  /* Знак с названием — по центру видимого чёрного поля. Содержимое
     встаёт по центру отдела, а сдвиг из раздела 74 (минус половина
     выноса) переносит этот центр в середину поля от края экрана до
     синего. Поля симметричные, иначе центр уезжает на их разницу. */
  html:not([data-concept]) .topbar__cell--name {
    justify-content: center;
    padding-inline: 24px;
  }

  /* Синие отделы: блок подпись + значение стоит по центру отдела,
     а строки внутри блока выключены влево. Так свободное место делится
     поровну на обе стороны, и каждый разделитель оказывается ровно
     посередине между соседними надписями. Сетка, а не flex: во flex
     центровка ставила бы подпись и значение по центру порознь, и их
     левые края разошлись бы. */
  html:not([data-concept]) .topbar__cell:not(.topbar__cell--name) {
    display: grid;
    align-content: center;
    justify-content: center;
    justify-items: start;
    padding-inline: 20px;
  }
}

@media (max-width: 900px) {
  /* Все отделы начинают текст с одной линии */
  html:not([data-concept]) .topbar__cell {
    justify-content: start;
    padding-inline: 16px;
  }
}

@media (max-width: 380px) {
  /* Телефон не переносится, и на 360 px при полях 16 он выходил
     за поле отдела на 4 px */
  html:not([data-concept]) .topbar__cell {
    padding-inline: 12px;
  }
}


/* ==========================================================================
   77. Полоса: нижний край

   Здесь жили растушёвка чёрной плашки и тяжёлая тень под полосой. Оба
   приёма были нужны, пока полоса была плотной и чёрной. Теперь она
   прозрачная (раздел 81): растворять нечего, а тень на прозрачной полосе
   читается как грязь. Осталась только тонкая золотая черта по низу —
   она гаснет к краям экрана и мягко отделяет полосу от фотографии.

   На телефоне под полосой стоят кнопки «Позвонить» и «Маршрут», черта
   легла бы на их золотой фон — поэтому правило только с 701 px.
   ========================================================================== */

@media (min-width: 701px) {
  html:not([data-concept]) .topbar {
    position: relative;
    /* Выше первого экрана; ниже выпадающего меню, у него 30 */
    z-index: 4;
    border-bottom: 0;
  }

  html:not([data-concept]) .topbar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg,
      rgba(226, 192, 124, 0) 0%,
      rgba(226, 192, 124, .35) 25%,
      rgba(226, 192, 124, .35) 75%,
      rgba(226, 192, 124, 0) 100%);
  }
}

@media (max-width: 900px) {
  /* В сетке 2×2 левый столбец начинается от края экрана — разделитель
     слева от «Телефона» ничего не разделял и висел у самой кромки */
  html:not([data-concept]) .topbar__cell:nth-child(odd) {
    background-image: none;
    border-left: 0;
  }
}


/* ==========================================================================
   78. Полоса: три отдела растянуты на всё синее поле

   Сначала отделы жались к названию клуба, потом собрались плотной
   группой посередине — и оба раза по краям оставались разные пустоты.

   Теперь колонки по-прежнему по содержимому, но свободное место делят
   поровну все три отдела, а правое поле полосы отдано сетке. Значит,
   отделы идут от названия до самого края экрана, и все просветы равны:
   слева от «Адреса», справа от «Часов работы» и по обе стороны каждого
   разделителя — одно и то же число (на 1440 это 74 px, на 1920 — 114).

   Ширина первого отдела — 26,4 % колонки. Процент здесь считается от
   колонки вместе с правым полем, поэтому он ограничен той же долей от
   1240 px — на узких экранах работает первое значение, на широких второе.
   ========================================================================== */

@media (min-width: 901px) {
  /* Поле справа больше не обнуляем: пока слева была чёрная плашка,
     уходившая за край экрана, перекос не читался, а на прозрачной
     полосе группа отделов выглядела сдвинутой вправо. Теперь поля
     колонки одинаковые с обеих сторон, подложка по-прежнему во всю
     ширину экрана. */
  html:not([data-concept]) .topbar {
    grid-template-columns:
      min(26.4%, var(--content) * .264)
      repeat(3, auto);
  }

  html:not([data-concept]) .topbar__cell:not(.topbar__cell--name) {
    padding-inline: 20px;
  }
}


/* ==========================================================================
   79. Полоса на телефоне: плитка по центру, подписи по одной линии

   В сетке два на два оставались три огреха:

   1. Переход от чёрного к синему длиной 56 px накрывал «Адрес»: текст
      начинался с 211 px при ширине 390, а чёрное гасло только к 251.
      Здесь переход короче — 32 px.
   2. Знак в чёрной плитке был прижат влево, справа оставалось 41 px
      пустоты, а соседний отдел занят текстом от края до края. Теперь
      знак по центру плитки, как и на компьютере.
   3. На широких телефонах и небольших планшетах отделы растягиваются
      до 350 px, а текст в них короткий — справа оставалось до 146 px
      пустоты. С 520 px содержимое отделов встаёт по центру.

   Ниже 520 px центровка наоборот вредила: подписи вставали на 12, 14
   и 25 px от края, и ровная левая линия рассыпалась. Там всё остаётся
   выключенным влево.

   Пункт 2 отменён вместе с чёрной плиткой: центрировать в ячейке стало
   нечего, а знак с названием вставал на 54 px от края, тогда как
   «Телефон» под ним — на 16. Получалась ступенька. Теперь все четыре
   отдела начинаются с одной линии.
   ========================================================================== */

@media (max-width: 700px) {
  html:not([data-concept]) .topbar__cell--name {
    justify-content: start;
    padding-inline: 16px;
  }
}

@media (max-width: 380px) {
  html:not([data-concept]) .topbar__cell--name { padding-inline: 12px; }
}

@media (min-width: 520px) and (max-width: 700px) {
  html:not([data-concept]) .topbar__cell { justify-content: center; }
}


/* ==========================================================================
   80. Первый экран: крупнее текст и немного оформления

   Заказчик сказал, что слева на первом экране пусто. Причина не в
   раскладке — текст стоит по центру, — а в масштабе: заголовок 68 px
   и строки 31 px терялись на фотографии высотой 774 px, под блоком
   оставалось 294 px пустоты.

   Заголовок теперь до 96 px, строки до 36 px, кнопка крупнее. Строка
   про манеры при 36 px занимает 1211 px из 1240 — больше нельзя, иначе
   она переломится надвое. Блок опущен: при росте вверх (translate
   −76 %) он почти упирался в полосу, теперь стоит в 70 px от неё.

   Добавлены две мелочи: тонкая золотая черта под названием и короткая
   вертикальная черта у нижнего края — подсказка, что страница
   листается. Обе — у свободных псевдоэлементов: у знака на первом
   экране оба заняты вспышкой из раздела 63, её трогать нельзя.

   Телефон и планшет не меняются: там текст и так занимает весь снимок.
   ========================================================================== */

@media (min-width: 901px) {
  html:not([data-concept]) .hero__text { transform: translate(-50%, -64%); }

  html:not([data-concept]) .hero__line-1 {
    font-size: clamp(46px, 4.7vw, 70px);
    line-height: 1.06;
    margin-bottom: 16px;
  }

  /* Нижняя граница 22 px: при 26 px строка про манеры у 901 px
     переламывалась надвое */
  html:not([data-concept]) .hero__line-2,
  html:not([data-concept]) .hero__line-3 {
    font-size: clamp(20px, 1.95vw, 28px);
    line-height: 1.35;
  }

  html:not([data-concept]) .hero__mono { width: 46px; }

  html:not([data-concept]) .hero__cta .btn--onphoto {
    font-size: 18px;
    padding: 17px 40px;
  }

  /* Черта под названием */
  html:not([data-concept]) .hero__line-1::after {
    content: "";
    display: block;
    width: min(300px, 28%);
    height: 1px;
    margin: 22px auto 0;
    background: linear-gradient(90deg,
      rgba(226, 192, 124, 0),
      rgba(226, 192, 124, .85) 35%,
      rgba(226, 192, 124, .85) 65%,
      rgba(226, 192, 124, 0));
  }

  /* Подсказка прокрутки */
  html:not([data-concept]) .hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 26px;
    width: 1px;
    height: 52px;
    background: linear-gradient(180deg, rgba(226, 192, 124, 0), rgba(226, 192, 124, .75));
    pointer-events: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    html:not([data-concept]) .hero::after {
      animation: hero-scroll-hint 2.8s ease-in-out infinite;
      transform-origin: bottom;
    }
  }
}

@keyframes hero-scroll-hint {
  0%, 100% { opacity: .35; scale: 1 .7; }
  50%      { opacity: 1;   scale: 1 1; }
}


/* ==========================================================================
   81. Правки по второму кругу замечаний заказчика

   Заказчик посмотрел сайт целиком и попросил:

   1. Полосу сверху — вдвое ниже и прозрачной, «как кнопка на фотографии».
      Кнопка залита rgba(6,15,38,.62) поверх снимка, тот же приём здесь:
      полоса выходит из потока, ложится на фотографию и просвечивает.
      Высота с 5 см до 2,7 см. На телефоне полоса остаётся в потоке и
      плотной: там она собрана сеткой 2×2 и закрыла бы треть снимка.
   2. Кнопку записи — почти к нижнему краю первого экрана. Текстовый блок
      растянут на всю высоту экрана, строки стоят по центру, кнопку вниз
      уводит автоматический отступ сверху.
   3. Полосу с цифрами — вдвое ниже: страница и так длинная.
   4. «О клубе» на телефоне — фотография справа, текст её обтекает.
      В разметке снимок стоит перед текстом (обтекать можно только то,
      что идёт раньше), а на компьютере порядок задан колонками сетки.

   Знак и название вынесены в раздел 74, нижняя черта полосы — в 77.
   ========================================================================== */

/* Высота полосы: только основной макет, у концепций свои 5 см */
html:not([data-concept]) {
  --topbar-h: 2.2cm;
}

@media (min-width: 901px) {

  /* --- Полоса поверх фотографии -------------------------------------

     Пробовали собрать четыре отдела в колонку по центру — заказчик
     сказал, что панель посреди фотографии смотрится убого. Полоса снова
     идёт от края до края, а «огромной» быть перестала за счёт высоты:
     2,2 см вместо прежних 5. */
  html:not([data-concept]) .topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
    border-bottom: 0;
    /* Плотность подобрана замером: на самом светлом участке фасада под
       полосой подпись «Адрес» давала 3,76 : 1 при норме 4,5 : 1 */
    background: linear-gradient(180deg,
      rgba(6, 15, 38, .72) 0%,
      rgba(6, 15, 38, .64) 55%,
      rgba(6, 15, 38, .76) 100%);
  }

  /* Разделитель между названием и адресом: раньше его роль играл край
     чёрной плашки, теперь нужна обычная волосяная черта, как у прочих */
  html:not([data-concept]) .topbar__cell:not(.topbar__cell--name) {
    padding-block: 12px;
  }

  html:not([data-concept]) .topbar__cell--name + .topbar__cell {
    background-image: linear-gradient(
      180deg,
      transparent 0%,
      var(--topbar-line) 32%,
      var(--topbar-line) 68%,
      transparent 100%
    );
    background-size: 1px 100%;
    background-repeat: no-repeat;
    background-position: left center;
  }

  /* --- Первый экран: кнопка у нижнего края --------------------------- */
  html:not([data-concept]) .hero__text {
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Сверху — место под полосу, чтобы знак не уходил под неё */
    padding-top: calc(var(--topbar-h) + 2.5vh);
    padding-bottom: 6vh;
  }

  /* Два автоматических отступа делят свободное место поровну: строки
     встают по центру экрана, кнопка остаётся у нижнего края. Раньше
     текст жался к полосе сверху и первым бросался в глаза. */
  html:not([data-concept]) .hero__mono {
    margin-top: auto;
  }

  html:not([data-concept]) .hero__cta {
    margin: auto 0 0;
  }

  /* Подсказка прокрутки убрана: кнопка теперь стоит на её месте */
  html:not([data-concept]) .hero::after {
    display: none;
  }
}

/* --- Полоса с цифрами вдвое ниже ------------------------------------- */
html:not([data-concept]) .stats {
  padding: 15px 0;
}

html:not([data-concept]) .stat__num {
  font-size: clamp(24px, 2.2vw, 33px);
}

html:not([data-concept]) .stat__label {
  margin-top: 6px;
  font-size: 12.5px;
}

@media (max-width: 700px) {
  html:not([data-concept]) .stats {
    padding: 16px 0;
  }
}

/* --- «О клубе»: порядок колонок и обтекание --------------------------- */

/* Снимок в разметке идёт первым, поэтому на компьютере колонки
   расставлены явно — вид прежний: текст слева, фотография справа */
@media (min-width: 1201px) {
  .about__text  { grid-column: 1; grid-row: 1; }
  .about__media { grid-column: 2; grid-row: 1; }
}

@media (max-width: 1200px) {
  .about__grid {
    display: block;
  }

  .about__media {
    float: right;
    position: static;
    width: 38%;
    max-width: 240px;
    margin: 4px 0 16px 20px;
  }
}

@media (max-width: 700px) {
  /* Фотография крупнее: на 390 px она была 120 px шириной и читалась как
     приклеенный уголок. Теперь занимает почти половину ширины, и текст
     обтекает её тремя-четырьмя абзацами, как на компьютере. */
  .about__media {
    width: 46%;
    max-width: 186px;
    margin: 4px 0 14px 16px;
  }

  /* Строки рядом с фотографией короткие, поэтому включаем переносы:
     без них в узкой колонке остаются дыры до половины строки */
  .text-block--split .about__text .line {
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* Свёрнутый текст показываем чуть длиннее: иначе рядом с фотографией
     видно всего четыре строки и раздел выглядит обрубленным.

     Обрезка переведена с overflow на clip-path: блок с overflow: hidden
     заводит свой контекст форматирования, перестаёт обтекать фотографию
     и встаёт рядом с ней узкой колонкой. clip-path прячет лишние строки
     так же, но контекста не создаёт. */
  .text-block--split .text-block__lines {
    max-height: 23em;
    overflow: visible;
    clip-path: inset(0);
  }
}

@media (max-width: 380px) {
  /* На самых узких экранах отдаём тексту больше места: рядом с фото
     оставалось около четырнадцати знаков в строке */
  .about__media {
    width: 42%;
    max-width: 162px;
    margin-left: 14px;
  }

}


/* ==========================================================================
   82. Доводка внешнего вида

   1. Рамки видео и прямого эфира стояли пустыми: золотая рама, а внутри
      ровный синий фон и кнопка. Пока настоящих роликов нет, внутрь
      поставлены стоп-кадры из наших же снимков, притемнённые так, чтобы
      золотые надписи поверх читались. Когда появится ролик, он ляжет
      поверх заставки и ничего править не придётся.

   2. Чередующиеся полосы отличались от фона страницы на 1,07 : 1 —
      глазом это неразличимо, и двадцать экранов читались как одно
      полотно. Тон полос поднят: разделы стали различаться.

   3. Мелочи набора: у названия на первом экране появилась небольшая
      разрядка, у подвала — воздух.
   ========================================================================== */

/* --- 1. Заставки в рамках ------------------------------------------- */

/* Обе записи получают спокойную фирменную заставку без фотографии.
   Повышенная специфичность сохраняет синий фон во всех четырёх дизайнах. */
html .videos .facade.facade--brand {
  background:
    radial-gradient(circle at 50% 42%, rgba(44, 82, 145, .5), transparent 34%),
    linear-gradient(145deg, #102d61 0%, #0a204a 58%, #061431 100%);
}

.videos .facade__cover,
.videos .facade__cover-shade {
  position: absolute;
  inset: 0;
}

.videos .facade__cover {
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.videos .facade__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.videos .facade__cover-shade {
  z-index: 1;
  background: linear-gradient(180deg, rgba(4, 12, 31, .44), rgba(4, 12, 31, .72));
}

.videos .facade__logo,
.videos .facade__title,
.videos .facade__note {
  position: relative;
  z-index: 2;
}

.videos .facade__logo {
  display: block;
  width: clamp(40px, 5vw, 66px);
  height: clamp(78px, 10vw, 130px);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .3));
  transition: transform .25s ease, filter .25s ease;
}

.videos .facade__logo .monogram {
  width: 100%;
  height: 100%;
  background: #f2d18b;
}

.videos .facade.facade--brand .facade__title { color: #f2d18b; }
.videos .facade.facade--brand .facade__note { color: rgba(242, 209, 139, .64); }

.videos .facade.facade--brand:hover .facade__logo,
.videos .facade.facade--brand:focus-visible .facade__logo {
  transform: translateY(-2px) scale(1.035);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .36));
}

@media (prefers-reduced-motion: reduce) {
  .videos .facade__logo { transition: none; }
}

html:not([data-concept]) .live .facade {
  background-image:
    linear-gradient(180deg, rgba(4, 10, 26, .58) 0%, rgba(4, 10, 26, .76) 100%),
    url("../images/opt/photo-2-v3.jpg");
  background-size: cover;
  background-position: center 45%;
}

/* --- 2. Чередование полос ------------------------------------------- */

html:not([data-concept]) {
  --bg-2: #0d2154;
}

/* --- 3. Набор -------------------------------------------------------- */

@media (min-width: 901px) {
  html:not([data-concept]) .hero__line-1 {
    letter-spacing: .03em;
  }
}

html:not([data-concept]) .footer {
  padding-block: 44px 34px;
}


/* ==========================================================================
   84. Телефон: снимки во всю ширину и собранные подписи

   На компьютере разделы держат ритм чередованием сторон: фотография то
   слева, то справа. На телефоне чередовать нечего, и всё вытягивается в
   одну длинную колонку — снимок, подпись, текст, и так по кругу.

   Даём снимкам всю ширину экрана, от края до края, а подпись собираем:
   номер встаёт в строку с заголовком, под ними — золотая черта. Тот же
   приём в галерее. Компьютер не трогаем.
   ========================================================================== */

@media (max-width: 700px) {

  /* --- «Как устроен клуб» --------------------------------------------- */

  /* Колонка на телефоне имеет поля 18 px — выносим снимок за них */
  html:not([data-concept]) .showcase__media {
    margin-inline: -18px;
    border-left: 0;
    border-right: 0;
    border-width: 2px;
    aspect-ratio: 5 / 4;
  }

  html:not([data-concept]) .showcase__row { gap: 16px; }
  html:not([data-concept]) .showcase { gap: 36px; }

  html:not([data-concept]) .showcase__text {
    width: 100%;
    max-width: 38ch;
    margin-inline: auto;
    padding: 2px 18px 0;
    text-align: center;
  }

  /* Единая симметричная шапка подписи под каждой фотографией. */
  html:not([data-concept]) .showcase__num {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    letter-spacing: .2em;
    color: var(--gold-dim);
  }

  html:not([data-concept]) .showcase__title {
    display: block;
    max-width: 28ch;
    margin: 0 auto;
    font-size: 22px;
    line-height: 1.25;
  }

  html:not([data-concept]) .showcase__text > .showcase__title::after {
    content: "";
    display: block;
    width: 72px;
    height: 1px;
    margin: 12px auto 15px;
    background: linear-gradient(90deg, rgba(226, 192, 124, 0), var(--gold), rgba(226, 192, 124, 0));
  }

  /* --- Галерея --------------------------------------------------------- */

  html:not([data-concept]) .gallery { padding-inline: 0; gap: 30px; }

  html:not([data-concept]) .shot .photo {
    margin-inline: 0;
    border-left: 0;
    border-right: 0;
    aspect-ratio: 5 / 4;
  }

  html:not([data-concept]) .shot__text { padding: 14px 18px 0; }
}


/* ========================================================================== 
   85. Мобильная доводка: компактная программа, лёгкие рамки и fixed-действия
   ========================================================================== */

@media (max-width: 700px) {

  /* «Что мы даём»: компактная сетка без горизонтального листания. */
  html:not([data-concept]) #program .cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }

  html:not([data-concept]) #program .card {
    min-width: 0;
    min-height: 0;
    padding: 17px 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  html:not([data-concept]) #program .card__num {
    width: 38px;
    height: 38px;
    margin-bottom: 10px;
    font-size: 15px;
    border-width: 1px;
  }

  html:not([data-concept]) #program .card__title {
    font-size: 18px;
    line-height: 1.22;
    margin-bottom: 8px;
  }

  html:not([data-concept]) #program .card__text {
    font-size: 14px;
    line-height: 1.42;
  }

  /* Расписание поднято выше: на телефоне не дублируем его второй раз
     большими тарифными карточками — компактная таблица уже содержит всё. */
  html:not([data-concept]) #schedule .tiers {
    display: none;
  }

  html:not([data-concept]) #schedule .schedule tr {
    margin-bottom: 10px;
  }

  html:not([data-concept]) #schedule .table-scroll + .note--center {
    margin-top: 18px;
  }

  html:not([data-concept]) #schedule .section__cta {
    margin-top: 22px;
  }

  /* На узком экране золото работает как акцент, а не как тяжёлая рама. */
  html:not([data-concept]) .gold-frame {
    border-width: 1px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  }

  html:not([data-concept]) .live .gold-frame {
    border-width: 2px;
  }

  html:not([data-concept]) .photo,
  html:not([data-concept]) .about__media {
    border-width: 1px;
    box-shadow: none;
  }

  html:not([data-concept]) .showcase__media {
    border-top-width: 1px;
    border-bottom-width: 1px;
    box-shadow: none;
  }

  html:not([data-concept]) .btn,
  html:not([data-concept]) .nav__cta {
    border-width: 1px;
  }

  /* После первого экрана появляются крупные прямоугольные быстрые действия. */
  html:not([data-concept]) .fab {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 55;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  html:not([data-concept]) .fab__up,
  html:not([data-concept]) .fab__cta {
    min-height: 52px;
    border: 2px solid var(--gold);
    border-radius: 0;
    background: rgba(7, 20, 49, .96);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .42);
  }

  html:not([data-concept]) .fab__up {
    width: 52px;
    height: 52px;
  }

  html:not([data-concept]) .fab__cta {
    padding: 0 24px;
    font-size: 16px;
    letter-spacing: .04em;
  }

  /* Форма целиком помещается на обычном экране телефона без прокрутки. */
  html:not([data-concept]) .modal {
    padding: 6px;
  }

  html:not([data-concept]) .modal__panel {
    max-height: calc(100dvh - 12px);
    padding: 16px 14px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  html:not([data-concept]) .modal__close {
    top: 2px;
    right: 3px;
    width: 38px;
    height: 38px;
    font-size: 30px;
  }

  html:not([data-concept]) .modal__mono {
    width: 32px;
    margin-bottom: 3px;
  }

  html:not([data-concept]) .modal__title {
    margin-bottom: 5px;
    padding-inline: 26px;
    font-size: 21px;
    line-height: 1.18;
  }

  html:not([data-concept]) .modal__note {
    margin-bottom: 11px;
    font-size: 13px;
    line-height: 1.35;
  }

  html:not([data-concept]) .modal .form {
    margin-top: 0;
  }

  html:not([data-concept]) .modal .form__row {
    grid-template-columns: minmax(0, 1.1fr) minmax(112px, .9fr);
    gap: 10px;
  }

  html:not([data-concept]) .modal .field,
  html:not([data-concept]) .modal .field--small {
    max-width: none;
    margin-bottom: 9px;
  }

  html:not([data-concept]) .modal .field__label {
    margin-bottom: 4px;
    font-size: 11px;
    line-height: 1.25;
    letter-spacing: .075em;
  }

  html:not([data-concept]) .modal .field__input {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 16px;
  }

  html:not([data-concept]) .modal textarea.field__input {
    height: 54px;
    min-height: 54px;
    resize: none;
  }

  html:not([data-concept]) .modal .consent {
    gap: 8px;
    margin: 1px 0 10px;
    font-size: 12px;
    line-height: 1.3;
  }

  html:not([data-concept]) .modal .consent input {
    width: 18px;
    height: 18px;
    margin-top: 1px;
  }

  html:not([data-concept]) .modal .btn {
    min-height: 43px;
    padding: 10px 14px;
    font-size: 14px;
  }

  html:not([data-concept]) .modal .form__notice {
    margin-top: 6px;
    min-height: 0;
    font-size: 12px;
  }

  html:not([data-concept]) .modal .form__notice:empty {
    display: none;
  }

  /* Компактное уведомление, которое не спорит с навигацией и контентом. */
  html:not([data-concept]) .cookie {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 12px;
    border: 1px solid rgba(226, 192, 124, .55);
    border-radius: 8px;
    background: rgba(6, 15, 38, .98);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .48);
    text-align: left;
    transform: translateY(calc(100% + 24px));
  }

  html:not([data-concept]) .cookie.is-shown {
    transform: none;
  }

  html:not([data-concept]) .cookie__text {
    min-width: 0;
    font-size: 12px;
    line-height: 1.35;
  }

  html:not([data-concept]) .cookie__btn {
    width: auto;
    padding: 8px 11px;
    font-size: 13px;
    line-height: 1;
  }

  html:not([data-concept]) body.cookie-open .nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  html:not([data-concept]) body.cookie-open .fab {
    bottom: calc(78px + env(safe-area-inset-bottom));
  }

  html:not([data-concept]) body.cookie-open .fab.is-shown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  html:not([data-concept]) body.cookie-open .hero__text {
    padding-bottom: 84px;
  }

  /* Подвал: контакты и документы больше не слипаются в одну строку. */
  html:not([data-concept]) .footer {
    padding: 36px 22px calc(38px + env(safe-area-inset-bottom));
    text-align: left;
  }

  html:not([data-concept]) .footer__mono {
    margin: 0 auto 20px;
  }

  html:not([data-concept]) .footer__line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 18px;
    width: min(100%, 346px);
    margin: 0 auto 24px;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
  }

  html:not([data-concept]) .footer__line > span {
    min-width: 0;
    white-space: normal;
  }

  html:not([data-concept]) .footer__line > span:nth-child(1),
  html:not([data-concept]) .footer__line > span:nth-child(3) {
    grid-column: 1 / -1;
  }

  html:not([data-concept]) .footer__legal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 18px;
    width: min(100%, 346px);
    margin: 0 auto 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(226, 192, 124, .2);
    justify-content: initial;
    text-align: left;
  }

  html:not([data-concept]) .footer__legal a {
    font-size: 13px;
    line-height: 1.35;
    border-bottom: 0;
  }

  html:not([data-concept]) .footer__legal a:nth-child(-n + 2) {
    grid-column: 1 / -1;
  }

  html:not([data-concept]) .footer__copy {
    width: min(100%, 346px);
    margin: 0 auto;
    text-align: left;
  }
}

/* ========================================================================== 
   87. Первый экран на телефоне: ровный перенос слогана

   Ограничиваем только строку со слоганом, чтобы последнее слово не
   оставалось одно. Сам текст, видео и остальные элементы не меняются.
   ========================================================================== */

@media (max-width: 700px) {
  .hero__line-2 {
    width: min(100%, 300px);
    margin-inline: auto;
  }

  .hero__line-tail { white-space: nowrap; }
}

/* ========================================================================== 
   88. Недельное расписание и новый абонемент

   Таблица повторяет присланную сетку: клуб и английский по группам A–C,
   воскресенье отдано выездным и спортивным активностям. На телефоне
   прокручивается только сама таблица — страница остаётся без листания вбок.
   ========================================================================== */

.schedule__eyebrow {
  margin: -18px 0 24px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
  color: var(--text-muted);
}

#schedule .table-scroll {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--gold) rgba(226, 192, 124, .1);
  -webkit-overflow-scrolling: touch;
}

#schedule .schedule--weekly {
  width: 100%;
  min-width: 1040px;
  table-layout: fixed;
  border: 1px solid var(--hairline);
  background: var(--panel);
}

#schedule .schedule--weekly th,
#schedule .schedule--weekly td {
  height: 96px;
  padding: 14px 10px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  text-align: center;
  vertical-align: middle;
  white-space: normal;
}

#schedule .schedule--weekly tr:last-child > * { border-bottom: 0; }
#schedule .schedule--weekly tr > *:last-child { border-right: 0; }

#schedule .schedule--weekly thead th {
  height: 48px;
  padding-block: 10px;
  background: rgba(226, 192, 124, .09);
  font-size: 13px;
  line-height: 1;
}

#schedule .schedule--weekly thead th:first-child,
#schedule .schedule--weekly tbody th {
  width: 112px;
}

#schedule .schedule--weekly tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--panel-pick);
  font-size: 15px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--title);
}

#schedule .schedule--weekly tbody th abbr {
  border: 0;
  text-decoration: none;
  cursor: help;
}

#schedule .schedule--weekly td {
  color: var(--text);
}

#schedule .schedule--weekly td > span {
  display: block;
  margin-top: 9px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.schedule__group {
  display: inline-block;
  padding: 5px 8px;
  border-radius: 2px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .03em;
  color: #fffaf0;
}

.schedule__group--a { background: #93443c; }
.schedule__group--b { background: #315f99; }
.schedule__group--c { background: #436e4d; }

#schedule .schedule--weekly .schedule__sunday {
  width: 176px;
  padding-inline: 16px;
  background: rgba(226, 192, 124, .055);
  color: var(--title);
}

.schedule__sunday > strong {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.schedule__sunday ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.schedule__sunday li {
  position: relative;
  margin-top: 6px;
  padding-left: 11px;
  font-size: 14px;
  line-height: 1.25;
  text-align: left;
  color: var(--text);
}

.schedule__sunday li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 4px;
  height: 4px;
  background: var(--gold);
  transform: rotate(45deg);
}

.pricing-summary {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.6fr);
  gap: 20px;
  margin-top: 26px;
}

.pricing-summary__price,
.pricing-summary__benefits {
  margin: 0;
  padding: 28px;
  border: 1px solid var(--hairline);
  background: var(--panel);
}

.pricing-summary__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pricing-summary__price > span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pricing-summary__price > strong {
  margin-top: 10px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--title);
}

.pricing-summary__price > small {
  margin-top: 7px;
  font-size: 15px;
  color: var(--text);
}

.pricing-summary__benefits h3 {
  margin: 0 0 18px;
  font-size: 22px;
  color: var(--title);
}

.pricing-summary__benefits ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-summary__benefits li {
  position: relative;
  padding-left: 20px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--text);
}

.pricing-summary__benefits li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: .52em;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
}

#schedule .pricing-summary + .note--center { margin-top: 22px; }

@media (max-width: 700px) {
  #schedule .table-scroll {
    overflow-x: auto;
    margin-inline: 0;
    padding-bottom: 8px;
  }

  #schedule .schedule--weekly {
    display: table;
    width: 960px;
    min-width: 960px;
  }

  #schedule .schedule--weekly thead { display: table-header-group; }
  #schedule .schedule--weekly tbody { display: table-row-group; }
  #schedule .schedule--weekly tr { display: table-row; width: auto; margin: 0; padding: 0; border: 0; }

  #schedule .schedule--weekly th,
  #schedule .schedule--weekly td {
    display: table-cell;
    width: auto;
    padding: 12px 8px;
    font-size: 14px;
    text-align: center;
  }

  #schedule .schedule--weekly td::before { content: none; display: none; }
  #schedule .schedule--weekly thead th:first-child,
  #schedule .schedule--weekly tbody th { width: 102px; }
  #schedule .schedule--weekly .schedule__sunday { width: 170px; }

  .pricing-summary {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 18px;
  }

  .pricing-summary__price,
  .pricing-summary__benefits { padding: 22px 18px; }
  .pricing-summary__benefits h3 { font-size: 20px; }
  .pricing-summary__benefits ul { grid-template-columns: 1fr; gap: 9px; }
  .pricing-summary__benefits li { font-size: 15px; }
}

/* ========================================================================== 
   89. Расписание без горизонтальной прокрутки

   На широком экране остаётся строгая недельная таблица. На ноутбуках,
   планшетах и телефонах она заменяется сеткой дней — вся информация
   помещается по ширине и остаётся в спокойной клубной палитре.
   ========================================================================== */

.schedule-mobile { display: none; }

/* Группы больше не выглядят как разноцветные служебные статусы: единая
   тонкая рамка связывает их с кнопками, формой и остальной графикой сайта. */
#schedule .schedule__group {
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--title);
}

.pricing-summary__price,
.pricing-summary__benefits {
  position: relative;
  background:
    linear-gradient(135deg, rgba(226, 192, 124, .045), transparent 48%),
    var(--panel);
}

.pricing-summary__price::before {
  content: "";
  width: 54px;
  height: 1px;
  margin-bottom: 18px;
  background: var(--gold);
  box-shadow: 0 5px 0 -2px var(--gold);
}

@media (max-width: 1100px) {
  #schedule .table-scroll { display: none; }

  .schedule-mobile {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
  }

  .schedule-day {
    min-width: 0;
    border: 1px solid var(--hairline);
    border-top: 2px solid var(--gold);
    background:
      linear-gradient(145deg, rgba(226, 192, 124, .055), transparent 54%),
      var(--panel);
  }

  .schedule-day__head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 13px;
    border-bottom: 1px solid var(--hairline);
  }

  .schedule-day__head > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 28px;
    border: 1px solid var(--hairline);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .schedule-day__head h3 {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 17px;
    line-height: 1.15;
    color: var(--title);
  }

  .schedule-day__lesson {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 9px;
    padding: 10px 13px;
  }

  .schedule-day__lesson + .schedule-day__lesson {
    border-top: 1px solid var(--hairline);
  }

  .schedule-day__lesson > span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .schedule-day__lesson > strong {
    justify-self: end;
    min-width: 0;
    font-size: 13px;
    line-height: 1.2;
    color: var(--title);
  }

  .schedule-day__lesson > time {
    grid-column: 1 / -1;
    justify-self: end;
    font-size: 14px;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    color: var(--text);
  }

  .schedule-day--sunday { grid-column: 1 / -1; }

  .schedule-day__activities {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 18px;
    margin: 0;
    padding: 15px 16px 17px;
    list-style: none;
  }

  .schedule-day__activities li {
    position: relative;
    min-width: 0;
    padding-left: 14px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--text);
  }

  .schedule-day__activities li::before {
    content: "";
    position: absolute;
    left: 1px;
    top: .55em;
    width: 5px;
    height: 5px;
    background: var(--gold);
    transform: rotate(45deg);
  }
}

@media (max-width: 700px) {
  .schedule-mobile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .schedule-day__head {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    min-height: 44px;
    padding: 9px 10px;
  }

  .schedule-day__head > span {
    width: 30px;
    height: 26px;
    font-size: 11px;
  }

  .schedule-day__head h3 { font-size: 15px; }
  .schedule-day__lesson { padding: 9px 10px; }
  .schedule-day__lesson > strong { font-size: 12.5px; }
  .schedule-day__lesson > time { font-size: 13.5px; }

  .schedule-day__activities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 13px 14px 15px;
  }

  .pricing-summary__price::before { margin-bottom: 14px; }
}

@media (max-width: 359px) {
  .schedule-mobile { grid-template-columns: 1fr; }
  .schedule-day--sunday { grid-column: auto; }
  .schedule-day__activities { grid-template-columns: 1fr; }
}

/* ========================================================================== 
   90. Мобильное сворачивание только по границе абзаца

   Высотная обрезка делила строку и создавала ощущение повреждённого текста.
   Теперь в закрытом состоянии остаётся первый смысловой блок целиком, а
   остальные абзацы и списки раскрываются кнопкой без затемняющего градиента.
   ========================================================================== */

@media (max-width: 700px) {
  [data-mobile-collapsible] .text-block__lines {
    max-height: none !important;
    overflow: visible !important;
    clip-path: none !important;
  }

  [data-mobile-collapsible] .text-block__lines::after {
    content: none !important;
    display: none !important;
  }

  [data-mobile-collapsible]:not(.is-open) .text-block__lines > :not(:first-child) {
    display: none !important;
  }

  [data-mobile-collapsible] .text-block__more {
    clear: both;
    margin-top: 20px;
  }
}


/* ========================================================================== 
   91. Компактная мобильная галерея и портрет внутри текста «О клубе»
   ========================================================================== */

@media (max-width: 700px) {
  /* Шесть кадров видны сразу: две колонки и три коротких ряда вместо
     длинного вертикального списка и дополнительной кнопки раскрытия. */
  html:not([data-concept]) .gallery,
  html[data-concept][data-concept] .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 10px !important;
    padding: 14px 12px 22px !important;
  }

  html:not([data-concept]) .gallery > .shot,
  html[data-concept][data-concept] .gallery > .shot {
    display: flex !important;
    min-width: 0;
  }

  html:not([data-concept]) .gallery .photo,
  html[data-concept][data-concept] .gallery .photo {
    aspect-ratio: 1 / 1 !important;
    margin-inline: 0 !important;
    border-left-width: 1px !important;
    border-right-width: 1px !important;
  }

  html:not([data-concept]) .gallery .shot__text,
  html[data-concept][data-concept] .gallery .shot__text {
    padding: 9px 3px 0 !important;
  }

  html:not([data-concept]) .gallery .shot__title,
  html[data-concept][data-concept] .gallery .shot__title {
    margin: 0 !important;
    padding-top: 12px !important;
    font-size: 15px !important;
    line-height: 1.25;
  }

  html:not([data-concept]) .gallery .shot__title::before,
  html[data-concept][data-concept] .gallery .shot__title::before {
    width: 6px;
    height: 6px;
  }

  .gallery:not(.is-open) > .shot:nth-child(n + 4) {
    display: flex !important;
  }

  .gallery + .more-btn { display: none !important; }

  /* Скрипт переносит единственный портрет после списка программы. */
  .text-block--split .about__text .about__media--inline {
    float: none;
    clear: both;
    position: static;
    width: 72%;
    max-width: 260px;
    margin: 24px auto;
  }
}


/* ========================================================================== 
   92. Современная подача расписания, формы и мобильных карточек
   ========================================================================== */

/* На компьютере используется та же понятная сетка дней, что и на телефоне:
   без тяжёлой таблицы, мелких ячеек и горизонтального ритма «бухгалтерии». */
#schedule .table-scroll { display: none; }

#schedule .schedule__eyebrow {
  display: table;
  margin: -12px auto 28px;
  padding: 7px 14px 6px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(226, 192, 124, .045);
  font-family: "Rubik", "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .18em;
}

#schedule .schedule-mobile {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

#schedule .schedule-day {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(226, 192, 124, .24);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(226, 192, 124, .075), transparent 48%),
    var(--panel);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
  font-family: "Rubik", "Segoe UI", system-ui, sans-serif;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

#schedule .schedule-day::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

@media (hover: hover) and (pointer: fine) {
  #schedule .schedule-day:hover {
    transform: translateY(-3px);
    border-color: rgba(226, 192, 124, .48);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .28);
  }
}

#schedule .schedule-day__head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(226, 192, 124, .18);
  background: rgba(255, 255, 255, .018);
}

#schedule .schedule-day__head > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 32px;
  border: 1px solid rgba(226, 192, 124, .38);
  border-radius: 8px;
  background: rgba(4, 10, 26, .32);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--title);
}

#schedule .schedule-day__head h3 {
  margin: 0;
  overflow-wrap: normal;
  font-family: "Rubik", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--title);
}

#schedule .schedule-day__lesson {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  margin: 8px 9px 0;
  padding: 10px 11px;
  border: 1px solid rgba(226, 192, 124, .12);
  border-radius: 8px;
  background: rgba(3, 10, 26, .24);
}

#schedule .schedule-day__lesson:last-child { margin-bottom: 9px; }
#schedule .schedule-day__lesson + .schedule-day__lesson { border-top: 1px solid rgba(226, 192, 124, .12); }

#schedule .schedule-day__lesson > span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#schedule .schedule-day__lesson > strong {
  justify-self: end;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--title);
}

#schedule .schedule-day__lesson > time {
  grid-column: 1 / -1;
  justify-self: end;
  font-size: 13px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

#schedule .schedule-day--sunday { grid-column: span 2; }

#schedule .schedule-day__activities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  padding: 14px;
  list-style: none;
}

#schedule .schedule-day__activities li {
  position: relative;
  min-width: 0;
  padding: 10px 10px 10px 26px;
  border: 1px solid rgba(226, 192, 124, .12);
  border-radius: 8px;
  background: rgba(3, 10, 26, .24);
  font-size: 13px;
  line-height: 1.3;
  color: var(--text);
}

#schedule .schedule-day__activities li::before {
  left: 12px;
  top: 50%;
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: translateY(-50%) rotate(45deg);
}

#schedule .pricing-summary__price,
#schedule .pricing-summary__benefits {
  overflow: hidden;
  border-color: rgba(226, 192, 124, .24);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

@media (max-width: 1100px) {
  #schedule .schedule-mobile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #schedule .schedule-day--sunday { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  #schedule .schedule-mobile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #schedule .schedule-day__head {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    min-height: 48px;
    padding: 9px 10px;
  }

  #schedule .schedule-day__head > span { width: 32px; height: 28px; }
  #schedule .schedule-day__head h3 { font-size: 13.5px; }
  #schedule .schedule-day__lesson { margin: 7px 7px 0; padding: 9px; }
  #schedule .schedule-day__lesson:last-child { margin-bottom: 7px; }
  #schedule .schedule-day__activities { padding: 10px; }
}

@media (max-width: 359px) {
  #schedule .schedule-mobile { grid-template-columns: 1fr; }
  #schedule .schedule-day--sunday { grid-column: auto; }
}

/* Составной выбор даты: три ясных списка в одной аккуратной рамке. */
.birthday-picker {
  display: grid;
  grid-template-columns: .72fr 1.25fr .9fr;
  gap: 6px;
  width: 100%;
  min-height: 56px;
  padding: 6px;
  border: 1px solid rgba(226, 192, 124, .34);
  border-radius: 10px;
  background: rgba(4, 10, 26, .58);
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.birthday-picker:focus-within {
  border-color: var(--gold);
  background: rgba(4, 10, 26, .82);
  box-shadow: 0 0 0 3px rgba(226, 192, 124, .1);
}

.birthday-picker__select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 8px 25px 8px 9px;
  border: 0;
  border-radius: 7px;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(226, 192, 124, .055);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position:
    calc(100% - 13px) calc(50% - 2px),
    calc(100% - 9px) calc(50% - 2px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  color: var(--title);
  font-family: "Rubik", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  cursor: pointer;
}

.birthday-picker__select:focus { background-color: rgba(226, 192, 124, .1); }
.birthday-picker__select option { background: #081431; color: #f2d18b; }
.field--invalid .birthday-picker { border-color: #d7836f; box-shadow: 0 0 0 3px rgba(215, 131, 111, .1); }

/* Финальная заявка снова видима на телефоне и воспринимается как единая
   карточка, а не набор разрозненных рамок. */
#signup .form {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid rgba(226, 192, 124, .22);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(226, 192, 124, .055), transparent 48%),
    var(--panel);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .2);
}

@media (max-width: 700px) {
  .js #signup .form { display: block !important; }

  #signup .form {
    margin-top: 18px;
    padding: 17px 14px 16px;
    border-radius: 10px;
  }

  #signup .promises {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 12px;
  }

  #signup .promises li { padding-left: 20px; font-size: 13px; }
  #signup .promises li::before { left: 2px; }

  html:not([data-concept]) .modal .form__row,
  html[data-concept][data-concept] .modal .form__row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
}

/* У галереи появляется единая карточная рамка; подпись больше не висит
   отдельно в пустом синем поле. */
@media (max-width: 700px) {
  html:not([data-concept]) .gallery,
  html[data-concept][data-concept] .gallery {
    gap: 12px !important;
    padding-inline: 10px !important;
  }

  html:not([data-concept]) .gallery > .shot,
  html[data-concept][data-concept] .gallery > .shot {
    overflow: hidden;
    padding: 5px 5px 11px;
    border: 1px solid rgba(226, 192, 124, .28);
    border-radius: 10px;
    background:
      linear-gradient(145deg, rgba(226, 192, 124, .055), transparent 55%),
      var(--panel);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
  }

  html:not([data-concept]) .gallery .photo,
  html[data-concept][data-concept] .gallery .photo {
    overflow: hidden;
    border: 0 !important;
    border-radius: 6px;
  }

  html:not([data-concept]) .gallery .shot__text,
  html[data-concept][data-concept] .gallery .shot__text {
    display: grid;
    place-items: center;
    min-height: 48px;
    padding: 10px 5px 0 !important;
    border-top: 1px solid rgba(226, 192, 124, .12);
  }

  html:not([data-concept]) .gallery .shot__title,
  html[data-concept][data-concept] .gallery .shot__title {
    padding: 0 !important;
    font-family: "Rubik", "Segoe UI", system-ui, sans-serif;
    font-size: 13.5px !important;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .01em;
  }

  html:not([data-concept]) .gallery .shot__title::before,
  html[data-concept][data-concept] .gallery .shot__title::before {
    content: none !important;
    display: none !important;
  }
}

/* «В программе клуба»: менее тяжёлый шрифт, больше воздуха и понятное
   состояние раскрытого пункта. */
@media (max-width: 700px) {
  .about__program {
    gap: 9px;
    font-family: "Rubik", "Segoe UI", system-ui, sans-serif;
  }

  .about__program li {
    overflow: hidden;
    border-color: rgba(226, 192, 124, .25);
    border-radius: 10px;
    background:
      linear-gradient(145deg, rgba(226, 192, 124, .05), transparent 58%),
      var(--panel);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .14);
  }

  .about__program-toggle {
    min-height: 58px;
    padding: 13px 12px 13px 15px;
  }

  .about__program-toggle strong {
    font-family: "Rubik", "Segoe UI", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: .01em;
  }

  .about__program-arrow {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    margin: 0;
    border: 1px solid rgba(226, 192, 124, .34);
    border-radius: 50%;
    transform: none;
  }

  .about__program-arrow::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 8px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--gold);
    border-bottom: 1.5px solid var(--gold);
    transform: rotate(45deg);
    transition: transform .22s ease, top .22s ease;
  }

  .about__program li.is-open {
    border-color: rgba(226, 192, 124, .58);
    background:
      linear-gradient(145deg, rgba(226, 192, 124, .09), transparent 58%),
      var(--panel);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
  }

  .about__program li.is-open .about__program-arrow {
    margin: 0;
    transform: none;
  }

  .about__program li.is-open .about__program-arrow::before {
    top: 11px;
    transform: rotate(225deg);
  }

  .about__program-copy {
    padding: 14px 15px 16px;
    border-top: 1px solid rgba(226, 192, 124, .14);
    font-family: "Rubik", "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.58;
    color: var(--text);
  }
}