/* Клуб «Баланс» — прототип. Все размеры лотоса заданы в «дизайн-единицах»
   исходного макета 1920×1080 и умножаются на --u, поэтому сцена масштабируется целиком. */

:root {
  --c-ink: #3a2452;
  --c-violet-900: #4f327a;
  --c-violet-700: #6f4c97;
  --c-violet-500: #9366ae;
  --c-pink: #cf72ad;
  --c-rim: #f7cdb9;
  --c-paper: #fbf6fc;
  --font: "Montserrat", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --bg-lotus:
    radial-gradient(60% 70% at 50% 52%, rgba(214, 160, 215, .55), transparent 70%),
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(60, 30, 100, .45) 100%),
    linear-gradient(120deg, #7a559f 0%, #a377b6 45%, #9467ad 70%, #7b56a0 100%);
}

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

body {
  margin: 0;
  font-family: var(--font);
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ───────────── Главная: лотос ───────────── */
/* Цветок один на всех экранах: девять подписанных лепестков вокруг медальона.
   На телефоне он вписан в ширину экрана: касание лепестка показывает описание раздела в центре,
   второе касание (или кнопка «Перейти») открывает раздел. На десктопе — псевдо-3D от движения мыши. */

.hero {
  --u: min(100vw / 1200, .55px);
  --mx: 0;
  --my: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  padding-bottom: 36px;
  color: #fff;
  background: var(--bg-lotus);
}

.pill-btn {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s;
}
.pill-btn:hover,
.pill-btn:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .28); }
.pill-btn[aria-current="page"] { color: var(--c-violet-900); background: #fff; }

/* На телефоне вместо кнопок «О клубе» и «Контакты» — меню-бургер (см. «Мобильное меню») */
.hero__nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 60px;
  padding: 8px var(--gutter);
  pointer-events: none;
}
.hero__links { display: none; }
.hero__nav .pill-btn,
.hero__nav .menu { pointer-events: auto; }

.hero__decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__decor--front { z-index: 2; }

/* Сцена начинается от самого верха (шапка с бургером закреплена поверх неё) и забирает всю свободную высоту
   экрана; цветок стоит посередине, но не выше, чем позволяет верхний лепесток (--top — центр цветка в самом верхнем положении) */
.hero__stage {
  --top: calc(12px + 662 * var(--u));
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  min-height: calc(var(--top) + 800 * var(--u));
}

.lotus {
  position: absolute;
  left: 50%;
  top: max(var(--top), 50% - 69 * var(--u));
  width: 0;
  height: 0;
}

.lotus__back {
  position: absolute;
  left: calc(-850 * var(--u));
  top: calc(-850 * var(--u));
  width: calc(1700 * var(--u));
  height: calc(1700 * var(--u));
  overflow: visible;
  pointer-events: none;
}

.lotus__center {
  position: absolute;
  left: calc(-330 * var(--u));
  top: calc(-330 * var(--u));
  z-index: 10;
  width: calc(660 * var(--u));
  height: calc(660 * var(--u));
  text-align: center;
  /* Блок квадратный, а медальон круглый: углы не должны перехватывать касание у лепестков */
  pointer-events: none;
}
.center__hit { pointer-events: auto; }

.center__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(60, 20, 90, .35));
}

.center__logo {
  position: absolute;
  left: 50%;
  top: calc(118 * var(--u));
  width: calc(236 * var(--u));
  height: calc(236 * var(--u));
  margin-left: calc(-118 * var(--u));
  transition: opacity .3s;
}

.center__title {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(384 * var(--u));
  margin: 0;
  font-size: max(17px, calc(62 * var(--u)));
  font-weight: 300;
  line-height: 1;
  text-shadow: 0 1px 10px rgba(80, 20, 90, .3);
  transition: opacity .3s, transform .3s;
}
.center__title strong { display: block; margin-top: calc(6 * var(--u)); font-weight: 700; }

/* Описание раздела в центре: на десктопе — при наведении, на телефоне — после касания лепестка */
.center__info {
  position: absolute;
  left: 50%;
  top: calc(372 * var(--u));
  width: calc(440 * var(--u));
  margin-left: calc(-220 * var(--u));
  opacity: 0;
  transform: translateY(calc(10 * var(--u)));
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.center__info-name { margin: 0; font-size: max(15px, calc(38 * var(--u))); font-weight: 700; line-height: 1.05; }
/* Длинные описания («Ведическая астрология, нумерология, хиромантия») переносятся на 2–3 ровные строки
   и не доходят до края медальона */
.center__info-desc { max-width: calc(360 * var(--u)); margin: calc(12 * var(--u)) auto 0; font-size: max(12px, calc(24 * var(--u))); line-height: 1.2; opacity: .92; text-wrap: balance; }
.center__go { display: none; }
.lotus__center.is-info .center__title { opacity: 0; transform: translateY(calc(-10 * var(--u))); }
.lotus__center.is-info .center__info { opacity: 1; transform: none; }

/* Выбранный касанием лепесток: логотип уступает место описанию и кнопке перехода */
.lotus__center.is-picked .center__logo { opacity: 0; }
.lotus__center.is-picked .center__info {
  top: 50%;
  width: calc(500 * var(--u));
  margin-left: calc(-250 * var(--u));
  transform: translateY(-50%);
}
.lotus__center.is-picked .center__info-desc { max-width: calc(410 * var(--u)); }
.lotus__center.is-picked .center__go {
  display: inline-block;
  margin-top: max(8px, calc(18 * var(--u)));
  padding: 5px 14px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  background: rgba(79, 50, 122, .35);
  pointer-events: auto;
}

/* Лепестки. Кликабельна только форма лепестка (.petal__hit), а не прямоугольник ссылки.
   Порядок наложения при наведении не меняется, иначе соседние лепестки
   начинают перехватывать курсор друг у друга. */
.lotus__petals {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.petal {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: var(--z);
  transform: rotate(var(--r));
  pointer-events: none;
}
/* Выбранный касанием или с клавиатуры лепесток выходит вперёд целиком (но остаётся под медальоном) */
.petal:has(:focus-visible),
.petal:has(.is-picked) { z-index: 9; }

.petal__link {
  position: absolute;
  left: calc(-230 * var(--u));
  top: calc(-700 * var(--u));
  width: calc(460 * var(--u));
  height: calc(700 * var(--u));
  color: #fff;
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Зона касания неподвижна: она не увеличивается и не качается вместе с лепестком */
.petal__hitbox {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.petal__hit { fill: transparent; pointer-events: all; cursor: pointer; }

.petal__move {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: 50% 100%;
  /* --tw и --ty каждый кадр выставляет lotus.js (только на десктопе) */
  transform: rotate(var(--tw, 0deg)) translateY(calc(var(--ty, 0) * var(--u)));
}

.petal__body {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: 50% 100%;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

.petal__shape {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 calc(12 * var(--u)) rgba(70, 20, 100, .38));
  transition: filter .35s;
}
.petal__vein { fill: none; stroke: #fff; stroke-width: 2; opacity: .13; }

.petal__label {
  position: absolute;
  left: 50%;
  top: calc(262 * var(--u));
  display: block;
  width: calc(360 * var(--u));
  text-align: center;
  line-height: 1;
  text-shadow: 0 1px 8px rgba(80, 20, 90, .45);
  transform: translate(-50%, -50%) rotate(calc(var(--r) * -1));
}
.petal__num { display: block; font-size: max(18px, calc(62 * var(--u))); font-weight: 500; }
.petal__name { display: block; margin-top: calc(2 * var(--u)); font-size: max(12px, calc(33 * var(--u))); font-weight: 600; line-height: 1.04; }

.petal__link:focus-visible .petal__body,
.petal__link.is-picked .petal__body { transform: scale(1.08); }
.petal__link:focus-visible .petal__shape,
.petal__link.is-picked .petal__shape {
  filter: drop-shadow(0 0 calc(26 * var(--u)) rgba(255, 205, 235, .9)) brightness(1.1) saturate(1.12);
}
.petal__link:focus-visible .petal__rim,
.petal__link.is-picked .petal__rim { stroke: #fff; stroke-width: 7; }
.lotus__petals:has(.is-picked) .petal__link:not(.is-picked) .petal__shape {
  filter: drop-shadow(0 0 calc(12 * var(--u)) rgba(70, 20, 100, .38)) brightness(.9) saturate(.85);
}

/* Наведение — только там, где есть мышь: на телефоне «залипшее» после касания увеличение сбивает с толку */
@media (hover: hover) {
  .petal__link:hover .petal__body { transform: scale(1.06); }
  .petal__link:hover .petal__shape {
    filter: drop-shadow(0 0 calc(26 * var(--u)) rgba(255, 205, 235, .9)) brightness(1.1) saturate(1.12);
  }
  .lotus__petals:has(.petal__link:hover) .petal__link:not(:hover) .petal__shape {
    filter: drop-shadow(0 0 calc(12 * var(--u)) rgba(70, 20, 100, .38)) brightness(.95) saturate(.9);
  }
}

/* Подсказка для сенсорных экранов: без неё не догадаться, что первое касание лепестка его только выбирает */
.hero__hint {
  position: relative;
  z-index: 3;
  display: none;
  margin: 0 20px 20px;
  font-size: 14px;
  font-style: italic;
  text-align: center;
  opacity: .8;
}
@media (hover: none) and (max-width: 899px) { .hero__hint { display: block; } }

.hero__aside {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 22px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 8px 20px 0;
  pointer-events: none;
}
.resources__list a { pointer-events: auto; }

.resources__title { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.resources__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.resources__list a {
  display: block;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  transition: background .2s;
}
.resources__list a:hover,
.resources__list a:focus-visible { background: rgba(255, 255, 255, .2); }

/* На телефоне ресурсы и цитата стоят по центру под цветком. Чипы одной ширины, по три в ряд:
   пять ресурсов ложатся ровно 3 + 2, а не 4 + 1. То же в мобильном меню */
.hero__aside { text-align: center; }
.hero__aside .resources__list,
.menu .resources__list { justify-content: center; max-width: 360px; margin: 0 auto; }
.hero__aside .resources__list li,
.menu .resources__list li { flex: 0 0 calc((100% - 16px) / 3); }
.hero__aside .resources__list a,
.menu .resources__list a { text-align: center; }

.hero__quote { margin: 0; font-size: 19px; font-style: italic; font-weight: 300; line-height: 1.2; }
.hero__quote::before { content: "„"; margin-right: .15em; font-weight: 700; }
.hero__quote::after { content: "“"; margin-left: .1em; font-weight: 700; }

/* Летящие лепестки */
.float {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--s) * var(--u));
  transform: translate3d(calc(var(--mx) * var(--d) * 1px), calc(var(--my) * var(--d) * 1px), 0);
}
.float svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  opacity: var(--o, .9);
  filter: blur(calc(var(--blur, 0) * 1px));
  transform: rotate(var(--rot, 0deg));
}

/* ───────────── Главная: десктоп — один экран, цветок наклоняется к курсору ───────────── */

@media (min-width: 900px) {
  /* Главная на десктопе — ровно один экран: сцена сжимается вместе с окном */
  .hero {
    --u: min(100vw / 1920, 100vh / 1080);
    display: block;
    height: 100vh;
    padding: 0;
  }
  @supports (height: 100svh) {
    .hero {
      --u: min(100vw / 1920, 100svh / 1080);
      height: 100svh;
    }
  }

  .hero__nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: calc(36 * var(--u)) calc(44 * var(--u));
  }
  .hero__links { display: flex; flex: 1; justify-content: space-between; }
  .hero__links .pill-btn {
    padding: max(8px, calc(14 * var(--u))) max(18px, calc(36 * var(--u)));
    font-size: max(14px, calc(26 * var(--u)));
  }

  .hero__stage {
    position: absolute;
    inset: 0;
    min-height: 0;
    margin: 0;
    perspective: calc(1500 * var(--u));
    perspective-origin: 50% 51.5%;
  }

  /* Весь цветок наклоняется «лицом» к курсору; слои разнесены по глубине */
  .lotus {
    top: 51.5%;
    transform-style: preserve-3d;
    transform:
      translate3d(calc(var(--mx) * 14 * var(--u)), calc(var(--my) * 10 * var(--u)), 0)
      rotateX(calc(var(--my) * -6deg))
      rotateY(calc(var(--mx) * 6deg));
    will-change: transform;
  }
  .lotus__back { transform: translateZ(calc(-140 * var(--u))) scale(1.093); }
  .lotus__center { transform: translateZ(calc(110 * var(--u))) scale(.927); }
  .lotus__petals { transform: translateZ(0); }

  .petal__label { width: calc(330 * var(--u)); text-shadow: 0 1px 8px rgba(80, 20, 90, .35); }
  .petal__name { line-height: 1.02; }

  .hero__aside { position: static; display: block; max-width: none; margin: 0; padding: 0; text-align: left; }
  .hero__aside .resources__list { justify-content: flex-start; max-width: none; }
  .hero__aside .resources__list li { flex: none; }
  .hero__resources {
    position: absolute;
    z-index: 3;
    left: calc(44 * var(--u));
    bottom: calc(40 * var(--u));
  }
  .resources__title { font-size: max(13px, calc(24 * var(--u))); }
  .hero__quote {
    position: absolute;
    z-index: 3;
    right: calc(70 * var(--u));
    bottom: calc(44 * var(--u));
    width: calc(470 * var(--u));
    font-size: max(15px, calc(37 * var(--u)));
    line-height: 1.08;
  }
}

/* ───────────── Движение ───────────── */

@media (prefers-reduced-motion: no-preference) {
  .float svg { animation: drift var(--t, 14s) ease-in-out infinite alternate; }
  .petal__body { animation: bloom .9s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 70ms + 150ms); }
  .lotus__back { animation: fade 1.4s ease-out backwards; }

  /* Без мыши цветок не следит за курсором — вместо этого лепестки медленно «дышат» */
  @media (hover: none) {
    .petal__move { animation: breathe 4.5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.1s); }
  }
}

@keyframes drift {
  from { transform: rotate(var(--rot, 0deg)) translate3d(0, 0, 0); }
  to { transform: rotate(calc(var(--rot, 0deg) + 10deg)) translate3d(calc(16 * var(--u)), calc(-20 * var(--u)), 0); }
}
@keyframes bloom { from { opacity: 0; transform: scale(.55); } }
@keyframes fade { from { opacity: 0; } }
@keyframes breathe {
  from { transform: rotate(-.6deg) translateY(0); }
  to { transform: rotate(.6deg) translateY(calc(-8 * var(--u))); }
}

/* ───────────── Внутренние страницы: сетка ───────────── */
/* Рассчитано на обычные десктопы: контейнер до 1280 px — основная колонка (~830 px) и боковая (320 px).
   Уже 900 px — одна колонка, боковые карточки уходят под контент. */

:root { --container: 1280px; --gutter: 20px; }
@media (min-width: 900px) { :root { --gutter: 32px; } }

.page { max-width: var(--container); margin: 0 auto; padding: 40px var(--gutter) 72px; }
@media (min-width: 900px) {
  .page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    align-items: start;
    padding-top: 56px;
    padding-bottom: 88px;
  }
}

.content { min-width: 0; font-size: 18px; line-height: 1.6; }
.content > :first-child { margin-top: 0; }
.content h2 { margin: 0 0 16px; color: var(--c-violet-900); font-size: clamp(26px, 3.2vw, 34px); line-height: 1.15; }
.content p { margin: 0 0 1em; }
.content a { color: var(--c-violet-700); }
.content .resources__list { padding-left: 0; }
.content .resources__list a { border-color: var(--c-violet-500); font-size: 15px; }
.content .resources__list a:hover,
.content .resources__list a:focus-visible { background: #f0e2f4; }
.content * + h2 { margin-top: 48px; }
.content h2[id] { scroll-margin-top: 24px; }
.content h3 { margin: 28px 0 8px; color: var(--c-violet-900); font-size: 20px; line-height: 1.25; }
.content ol,
.content ul { margin: 0 0 1em; padding-left: 1.3em; }
.content li { margin-bottom: .35em; }

.lead { font-size: 20px; line-height: 1.55; }

.btn,
.content .btn,
.card .btn {
  display: inline-block;
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(100deg, #b8509c, #8a5fb0);
  cursor: pointer;
  transition: filter .2s;
}
.btn:hover,
.btn:focus-visible { filter: brightness(1.1); }

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin: 32px 0 0;
  padding: 20px 22px;
  border-radius: 18px;
  background: linear-gradient(120deg, #f6e6f3, #efe3f7);
}
.content .cta__note { margin: 0; font-size: 16px; }

/* Боковая колонка с карточками */
.aside { display: grid; gap: 16px; margin-top: 48px; }
@media (min-width: 900px) { .aside { margin-top: 0; } }
@media (min-width: 900px) and (min-height: 720px) { .aside { position: sticky; top: 24px; } }

.card {
  padding: 22px 22px 24px;
  border: 1px solid #ead9f0;
  border-radius: 20px;
  font-size: 16px;
  line-height: 1.5;
  background: #fff;
  box-shadow: 0 10px 30px rgba(79, 50, 122, .08);
}
.card--accent { border-color: transparent; background: linear-gradient(140deg, #f6e6f3, #ece1f7); }
.card h2 { margin: 0 0 12px; color: var(--c-violet-900); font-size: 20px; line-height: 1.25; }
.card p { margin: 0 0 10px; }
.card p:last-child { margin-bottom: 0; }
.card a { color: var(--c-violet-700); }
.card .btn { display: block; margin: 4px 0 14px; }
.card__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.card__links { display: flex; gap: 8px; }
.card .card__links a {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--c-violet-500);
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background .2s;
}
.card .card__links a:hover,
.card .card__links a:focus-visible { background: #f0e2f4; }

/* Навигация по странице: текущий раздел выделен и не выглядит ссылкой */
.toc .card__list a { transition: color .2s; }
.toc .card__list a[aria-current="location"] {
  color: var(--c-violet-900);
  font-weight: 700;
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}

/* Кнопка «Наверх» — появляется ниже первого экрана */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(140deg, #8a5fb0, #b8509c);
  box-shadow: 0 8px 24px rgba(79, 50, 122, .35);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s, transform .25s, visibility 0s .25s, filter .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s, filter .2s; }
.to-top:hover,
.to-top:focus-visible { filter: brightness(1.12); }
.to-top:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.to-top svg { width: 24px; height: 24px; transform: rotate(90deg); }
@media (max-width: 899px) { .to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; } }
.card__label { display: block; color: #7b6890; font-size: 13px; }

/* Карусель — по ширине основной колонки */
.carousel { position: relative; margin: 20px 0 8px; }
.content .carousel__track {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0 0 12px;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.content .carousel__slide { flex: none; margin: 0; scroll-snap-align: start; }
.carousel__slide img { display: block; width: auto; height: 260px; border-radius: 14px; background: #eadcef; }
.carousel__btn {
  position: absolute;
  top: calc(50% - 6px);
  display: none;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  color: var(--c-violet-900);
  font-size: 30px;
  line-height: 1;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 14px rgba(60, 20, 90, .25);
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity .2s;
}
.carousel__btn--prev { left: 12px; }
.carousel__btn--next { right: 12px; }
.carousel__btn:disabled { opacity: 0; pointer-events: none; }
@media (min-width: 900px) {
  .carousel__slide img { height: 400px; }
  .carousel__btn { display: block; }
}

.content .directions li { break-inside: avoid; }
@media (min-width: 600px) {
  .directions { columns: 2; column-gap: 32px; }
}

.map { position: relative; overflow: hidden; height: 420px; margin: 20px 0; border-radius: 16px; background: #eadcef; }
.map iframe { position: relative; display: block; width: 100%; height: 100%; border: 0; }
.content .map__credit { position: absolute; top: 0; left: 0; z-index: 1; color: #eee; font-size: 12px; }
.content .map__credit--2 { top: 14px; }

.form { display: grid; gap: 14px; margin: 0; }
.form__field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--c-violet-900); }
.form__field input,
.form__field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #d6c2df;
  border-radius: 12px;
  color: var(--c-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  background: #fff;
}
.form__field input:focus-visible,
.form__field textarea:focus-visible { border-color: var(--c-violet-500); outline: 2px solid rgba(147, 102, 174, .35); }
.form__field textarea { resize: vertical; }
.form__consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; }
.form__consent input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--c-violet-700); }
.form .btn { width: 100%; margin: 0; }
.form__status { min-height: 1.4em; margin: 0; font-size: 14px; color: var(--c-violet-700); }

.figure { margin: 28px 0; }
.figure img,
.gallery img { display: block; width: 100%; height: auto; border-radius: 16px; background: #eadcef; }
.figure figcaption { margin-top: 8px; color: #6b5a7d; font-size: 14px; }
/* Вырезанный на прозрачном фоне предмет: без подложки и скруглений, по центру */
.figure--cutout { text-align: center; }
.figure--cutout img { max-width: 640px; margin: 0 auto; border-radius: 0; background: none; }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 28px 0; }

/* Девиз — заметная плашка в цветах лотоса */
.motto {
  margin: 32px 0 8px;
  padding: 28px 28px 24px;
  border-radius: 20px;
  color: #fff;
  text-align: center;
  background: linear-gradient(120deg, #6f4c97, #b8509c);
  box-shadow: 0 12px 30px rgba(111, 76, 151, .25);
}
.motto blockquote { margin: 0; }
.content .motto p { margin: 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; line-height: 1.2; }
.content .motto p::before { content: "«"; }
.content .motto p::after { content: "»"; }
.motto figcaption { margin-top: 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }

/* Книги: серия обложек, книга крупно, каталог по темам, цифры, отзывы */
.content .covers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 20px 0 14px; padding: 0; list-style: none; }
.content .covers li { margin: 0; color: #6b5a7d; font-size: 14px; line-height: 1.3; text-align: center; }
.covers a { display: block; margin-bottom: 8px; transition: transform .25s; }
.covers a:hover,
.covers a:focus-visible { transform: translateY(-4px); }
.covers img { display: block; width: 100%; height: auto; aspect-ratio: 7 / 10; object-fit: cover; border-radius: 6px; box-shadow: 0 10px 22px rgba(58, 36, 82, .22); }
@media (max-width: 599px) { .content .covers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }

.book { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: center; clear: both; margin: 36px 0; }
.book__cover { display: block; width: 100%; height: auto; border-radius: 6px; filter: drop-shadow(0 12px 18px rgba(58, 36, 82, .22)); }
.content .book h3 { margin-top: 0; }
.content .book__text p:last-child { margin-bottom: 0; }
@media (max-width: 599px) {
  .book { grid-template-columns: 1fr; gap: 16px; }
  .book__cover { max-width: 200px; }
}

.content .booklist { padding-left: 0; list-style: none; }
.content .booklist li { position: relative; margin: 0; padding: 9px 0 9px 22px; border-bottom: 1px solid #f0e4f3; }
.content .booklist li:last-child { border-bottom: 0; }
.booklist li::before { content: ""; position: absolute; top: 1.05em; left: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-pink); }
.booklist cite { color: var(--c-violet-900); font-style: normal; font-weight: 700; }
.booklist a { text-decoration-color: rgba(111, 76, 151, .45); }
.booklist a:hover cite { color: var(--c-violet-700); }
.badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  vertical-align: 2px;
  background: linear-gradient(100deg, #b8509c, #8a5fb0);
}

.content .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0; padding: 0; list-style: none; }
.content .stats li { margin: 0; padding: 18px 6px; border-radius: 18px; color: #6b5a7d; font-size: 15px; line-height: 1.3; text-align: center; background: linear-gradient(140deg, #f6e6f3, #ece1f7); }
.stats strong { display: block; color: var(--c-violet-900); font-size: clamp(22px, 3vw, 36px); line-height: 1.15; }

.portrait { float: right; width: 230px; margin: 0 0 12px 28px; }
.portrait img { display: block; width: 100%; height: auto; }
@media (max-width: 599px) { .portrait { float: none; width: 200px; margin: 0 auto 16px; } }

.reviews { display: grid; gap: 16px; margin: 20px 0; }
@media (min-width: 700px) { .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.review { position: relative; margin: 0; padding: 50px 22px 20px; border: 1px solid #ead9f0; border-radius: 20px; background: #fff; box-shadow: 0 10px 30px rgba(79, 50, 122, .06); }
.review::before { content: "“"; position: absolute; top: 10px; left: 20px; color: var(--c-pink); font-family: Georgia, "Times New Roman", serif; font-size: 64px; font-weight: 700; line-height: 1; }
.review blockquote { margin: 0; }
.content .review p { margin: 0; font-size: 16px; font-style: italic; line-height: 1.55; }
.review figcaption { margin-top: 12px; color: #6b5a7d; font-size: 14px; font-weight: 600; }

/* Карта библиотечной программы: контур — картинка, книжки — метки в процентах поверх неё.
   Увеличение при наведении — через ширину (--k), а не transform, чтобы подсказка не масштабировалась. */
.libmap { margin: 24px 0 12px; }
.libmap__canvas { position: relative; }
.libmap__canvas img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 24px rgba(79, 50, 122, .25)); }
.libmap__pt {
  --w: 14px;
  --k: 1;
  position: absolute;
  width: calc(var(--w) * var(--k));
  height: calc(var(--w) * var(--k) * .84);
  margin: calc(var(--w) * var(--k) * -.42) 0 0 calc(var(--w) * var(--k) / -2);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M12 4.2C9.3 2.3 5.7 1.7 1.5 2.6v14.6c4.2-.9 7.8-.3 10.5 1.6 2.7-1.9 6.3-2.5 10.5-1.6V2.6C18.3 1.7 14.7 2.3 12 4.2z' fill='%23f59ccd' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 4.6v13.8' stroke='%23fff' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(40, 10, 60, .45));
  cursor: pointer;
  transition: width .2s, height .2s, margin .2s;
}
.libmap__pt--m { --w: 18px; }
.libmap__pt--l { --w: 24px; }
.libmap__pt:hover,
.libmap__pt.is-open { --k: 1.5; z-index: 3; }
@media (max-width: 599px) {
  .libmap__pt { --w: 10px; }
  .libmap__pt--m { --w: 13px; }
  .libmap__pt--l { --w: 17px; }
  .libmap__pt::after { max-width: 180px; font-size: 12px; }
}
/* Прячет книжки только скрипт (класс is-armed): без JS и при «уменьшить движение» они видны сразу */
.libmap.is-armed .libmap__pt { opacity: 0; }
.libmap.is-armed.is-visible .libmap__pt { animation: libmap-drop .45s cubic-bezier(.2, 1.4, .4, 1) var(--d, 0ms) both; }
@keyframes libmap-drop {
  from { opacity: 0; transform: translateY(-14px) scale(.4); }
  to { opacity: 1; transform: none; }
}

/* Подсказка с городом; у краёв карты прижимается внутрь */
.libmap__pt::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  width: max-content;
  max-width: 230px;
  padding: 6px 10px;
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  background: var(--c-violet-900);
  box-shadow: 0 6px 16px rgba(40, 10, 60, .3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity .15s;
}
.libmap__pt--east::after { left: auto; right: 0; transform: none; }
.libmap__pt--west::after { left: 0; transform: none; }
.libmap__pt:hover::after,
.libmap__pt.is-open::after { opacity: 1; visibility: visible; }

.libmap__legend { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: #6b5a7d; font-size: 14px; line-height: 1.4; }
.libmap__key { flex: none; width: 22px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M12 4.2C9.3 2.3 5.7 1.7 1.5 2.6v14.6c4.2-.9 7.8-.3 10.5 1.6 2.7-1.9 6.3-2.5 10.5-1.6V2.6C18.3 1.7 14.7 2.3 12 4.2z' fill='%23f59ccd' stroke='%236f4c97' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M12 4.6v13.8' stroke='%236f4c97' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat; }

.libmap__list { margin: 0 0 8px; border: 1px solid #ead9f0; border-radius: 16px; background: #fff; }
.libmap__list summary { padding: 14px 18px; color: var(--c-violet-900); font-weight: 700; cursor: pointer; }
.content .libmap__list ul { margin: 0; padding: 0 18px 16px 36px; font-size: 15px; line-height: 1.5; }

/* ───────────── Радио Гималаи ───────────── */
.radio-hero,
.radio-final {
  position: relative;
  overflow: hidden;
  padding: 34px 28px 30px;
  border-radius: 24px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .16), transparent 60%),
    linear-gradient(165deg, #2a1c44 0%, #4f327a 55%, #8a5fb0 100%);
  box-shadow: 0 16px 36px rgba(58, 36, 82, .3);
}

/* Первый блок: слева крупная кнопка-медальон, справа слоган и «Сейчас в эфире».
   Подпись «Слушать» висит под медальоном и не входит в высоту кнопки — поэтому текст встаёт ровно
   по центру медальона, а нижний отступ блока больше верхнего ровно на эту подпись. */
.radio-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px 40px;
  align-items: center;
  padding: 40px 44px 72px;
  text-align: left;
  background:
    radial-gradient(60% 90% at 14% 40%, rgba(227, 162, 199, .35), transparent 70%),
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .14), transparent 60%),
    linear-gradient(165deg, #2a1c44 0%, #4f327a 55%, #8a5fb0 100%);
}
.content .radio-hero__kicker { margin: 0 0 12px; color: #f6c3dc; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.radio-hero__kicker span { white-space: nowrap; }
.content .radio-hero__slogan { margin: 0; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: .03em; line-height: 1.22; }
/* .content p задаёт абзацам свои отступы — поэтому селектор с .content */
.content .radio-now { margin: 18px 0 0; color: #f4d9ee; font-size: 14px; line-height: 1.5; }
.radio-now span { color: #fff; font-weight: 600; }
@media (max-width: 599px) {
  .radio-hero { grid-template-columns: 1fr; justify-items: center; padding: 32px 22px 36px; text-align: center; }
}

/* Кнопка-медальон. Сам медальон — отдельный слой (::before): в эфире он вращается, а значок внутри стоит ровно */
.radio-big {
  --d: 150px;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
  color: #fff;
  font: inherit;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.radio-big:focus-visible { outline: none; }
.radio-big__disc {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  filter: drop-shadow(0 14px 26px rgba(20, 8, 40, .5));
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.radio-big__disc::before,
.radio-big__disc::after { content: ""; position: absolute; }
.radio-big__disc::before {
  inset: 0;
  background: linear-gradient(145deg, #fff 0%, #fbe3f1 45%, #e9b0d2 100%);
  -webkit-mask: var(--medal) center / contain no-repeat;
  mask: var(--medal) center / contain no-repeat;
}
/* тонкое внутреннее кольцо, как у медальона в центре лотоса */
.radio-big__disc::after { inset: 15%; border: 2px solid rgba(165, 70, 140, .22); border-radius: 50%; }
.radio-big:hover .radio-big__disc { transform: scale(1.05); }
.radio-big:active .radio-big__disc { transform: scale(.97); }
.radio-big:focus-visible .radio-big__disc { outline: 3px solid #fff; outline-offset: 8px; }

.radio-big__play,
.radio-big__pause,
.radio-big__eq { position: relative; z-index: 1; }
.radio-big__play {
  width: 0;
  height: 0;
  margin-left: 10px;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  border-left: 38px solid #8a4f9e;
}
.radio-big__pause {
  display: none;
  width: 34px;
  height: 44px;
  background: linear-gradient(90deg, #8a4f9e 0 34%, transparent 34% 66%, #8a4f9e 66%);
  border-radius: 4px;
}
.radio-big__eq { display: none; gap: 5px; align-items: center; height: 52px; }
.radio-big__eq i { width: 6px; height: 100%; border-radius: 3px; background: linear-gradient(#c0559e, #6f4c97); transform: scaleY(.3); }
.radio-big.is-playing .radio-big__play,
.radio-big.is-loading .radio-big__play { display: none; }
.radio-big.is-playing .radio-big__eq,
.radio-big.is-loading .radio-big__eq { display: flex; }
@media (hover: hover) {
  .radio-big.is-playing:hover .radio-big__eq { display: none; }
  .radio-big.is-playing:hover .radio-big__pause { display: block; }
}
.radio-big__label { font-size: 15px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
@media (min-width: 600px) {
  .radio-big__label { position: absolute; top: calc(var(--d) + 14px); left: 50%; transform: translateX(-50%); }
}

/* Радиоволны вокруг медальона */
.radio-big__waves { position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); pointer-events: none; }
.radio-big__waves i { position: absolute; inset: 4%; border: 2px solid rgba(255, 214, 236, .6); border-radius: 50%; opacity: 0; }

@media (max-width: 599px) { .radio-big { --d: 128px; } }

@media (prefers-reduced-motion: no-preference) {
  /* В покое кнопка мягко «зовёт»: одна волна раз в несколько секунд */
  .radio-big:not(.is-playing):not(.is-loading) .radio-big__waves i:first-child { animation: radio-invite 2.8s ease-out infinite; }
  .radio-big.is-loading .radio-big__disc { animation: radio-pulse 1s ease-in-out infinite; }
  /* В эфире медальон медленно вращается, волны расходятся одна за другой, эквалайзер «танцует» */
  .radio-big.is-playing .radio-big__disc::before { animation: radio-spin 24s linear infinite; }
  .radio-big.is-playing .radio-big__waves i { animation: radio-wave 2.7s ease-out infinite; }
  .radio-big.is-playing .radio-big__waves i:nth-child(2) { animation-delay: .9s; }
  .radio-big.is-playing .radio-big__waves i:nth-child(3) { animation-delay: 1.8s; }
  .radio-big__eq i { animation: radio-dance 1.1s ease-in-out infinite; }
  .radio-big__eq i:nth-child(1) { animation-duration: 1.05s; animation-delay: -.2s; }
  .radio-big__eq i:nth-child(2) { animation-duration: .85s; animation-delay: -.55s; }
  .radio-big__eq i:nth-child(3) { animation-duration: 1.25s; animation-delay: -.1s; }
  .radio-big__eq i:nth-child(4) { animation-duration: .75s; animation-delay: -.7s; }
  .radio-big__eq i:nth-child(5) { animation-duration: 1.15s; animation-delay: -.4s; }
  .radio-big__eq i:nth-child(6) { animation-duration: .95s; animation-delay: -.85s; }
  .radio-big__eq i:nth-child(7) { animation-duration: 1.35s; animation-delay: -.3s; }
  .radio-big.is-loading .radio-big__eq i { animation-duration: .45s; }
}
@keyframes radio-pulse { 50% { transform: scale(.92); opacity: .8; } }
@keyframes radio-spin { to { transform: rotate(360deg); } }
@keyframes radio-invite { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes radio-wave { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.85); } }
@keyframes radio-dance {
  0%, 100% { transform: scaleY(.28); }
  20% { transform: scaleY(.9); }
  40% { transform: scaleY(.45); }
  60% { transform: scaleY(1); }
  80% { transform: scaleY(.6); }
}
@keyframes radio-eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

.radio-intro { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: center; margin: 32px 0 8px; }
.radio-intro__img { margin: 0; }
.radio-intro__img img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 12px 28px rgba(58, 36, 82, .25); }
.content .radio-intro .lead { margin: 0; }
@media (max-width: 699px) {
  .radio-intro { grid-template-columns: 1fr; }
  .radio-intro__img { max-width: 360px; }
}

.content .radio-list { padding-left: 0; list-style: none; font-size: 19px; }
.content .radio-list li { position: relative; margin-bottom: .45em; padding-left: 26px; }
.radio-list li::before { content: "–"; position: absolute; left: 4px; color: var(--c-pink); font-weight: 700; }

.price-table.radio-schedule { min-width: 0; }
.radio-schedule th { width: 96px; font-variant-numeric: tabular-nums; }


.radio-final { margin-top: 40px; }
.content .radio-final__text { max-width: 600px; margin: 0 auto 20px; font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; line-height: 1.3; }
.radio-channels { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.content .radio-channel,
.card .radio-channel {
  padding: 9px 20px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s;
}
.content .radio-channel:hover,
.content .radio-channel:focus-visible { background: rgba(255, 255, 255, .16); }

/* Карточка радио в боковой колонке */
.radio-card .btn { margin: 0 0 14px; }
.radio-channels--card { justify-content: flex-start; margin: 0 0 14px; gap: 8px; }
.card .radio-channels--card .radio-channel { padding: 7px 14px; border-color: var(--c-violet-500); color: var(--c-violet-700); font-size: 14px; }
.card .radio-channels--card .radio-channel:hover,
.card .radio-channels--card .radio-channel:focus-visible { background: #f0e2f4; }

/* Йога разума: карточки мужской и женской групп */
.groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0 8px; }
@media (max-width: 599px) { .groups { grid-template-columns: 1fr; } }
.group-card { padding: 22px; border: 1px solid #ead9f0; border-radius: 20px; background: #fff; box-shadow: 0 10px 30px rgba(79, 50, 122, .06); }
.group-card__head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.content .group-card h3 { margin: 0 0 2px; }
.content .group-card__admin { margin: 0; color: #6b5a7d; font-size: 15px; }
/* Контакты — кнопками с иконками вместо строки подчёркнутых ссылок */
.content .group-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.content .group-card__actions li { margin: 0; }

/* Благодарственные письма: превью открывают письмо целиком */
.letters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 20px 0 28px; }
@media (max-width: 699px) { .letters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.letter { margin: 0; }
.letter a { display: block; overflow: hidden; border: 1px solid #ead9f0; border-radius: 10px; background: #fff; box-shadow: 0 8px 20px rgba(79, 50, 122, .12); transition: transform .25s; }
.letter a:hover,
.letter a:focus-visible { transform: translateY(-4px); }
.letter img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.letter figcaption { margin-top: 8px; color: #6b5a7d; font-size: 13px; line-height: 1.35; }

/* Цитата из писаний и встроенное видео */
.content .quote { margin: 20px 0; padding: 18px 22px; border-left: 4px solid var(--c-pink); border-radius: 0 16px 16px 0; color: var(--c-violet-900); background: #f4e8f6; }
.content .quote p { margin: 0; font-size: 17px; font-style: italic; line-height: 1.6; }
.content .quote blockquote { margin: 0; }
.content .quote figcaption { margin-top: 10px; color: #6b5a7d; font-size: 14px; }

.video { position: relative; overflow: hidden; margin: 20px 0 8px; border-radius: 16px; background: #1d1028; aspect-ratio: 16 / 9; }
.video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Таблица тарифов: на узком экране прокручивается внутри своей рамки */
.table-wrap { margin: 16px 0 20px; overflow-x: auto; }
.price-table {
  width: 100%;
  min-width: 520px;
  overflow: hidden;
  border: 1px solid #ead9f0;
  border-radius: 16px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
  background: #fff;
}
.price-table th,
.price-table td { padding: 12px 16px; border-bottom: 1px solid #f0e4f3; text-align: left; }
.price-table thead th { color: #7b6890; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; background: #faf3fb; }
.price-table tbody th { color: var(--c-violet-900); }
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom: 0; }
/* На телефоне широкая таблица прокручивается на всю ширину экрана, без рамки-контейнера:
   в начале её левый край стоит по тексту, а правая часть уходит за край экрана;
   в конце прокрутки правый край встаёт на тот же отступ от края. Таблица, которая помещается,
   просто тянется на ширину текста. */
@media (max-width: 899px) {
  .table-wrap {
    display: flex;
    margin-inline: calc(-1 * var(--gutter));
    padding-left: var(--gutter);
    scrollbar-width: none;
  }
  .table-wrap::-webkit-scrollbar { display: none; }
  .table-wrap::after { content: ""; flex: none; width: var(--gutter); }
  .table-wrap > table { flex: 1 0 auto; width: auto; }
}

.contacts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0; }
.contacts dt { font-weight: 700; color: var(--c-violet-900); }
.contacts dd { margin: 0; }

.stub { padding: 12px 16px; border-left: 3px solid var(--c-pink); background: #f4e8f6; font-size: 15px; }

.footer { padding: 28px 20px; color: #fff; font-size: 14px; text-align: center; background: var(--c-violet-900); }

/* ───────────── Внутренние страницы: шапка с фрагментом лотоса ───────────── */
/* Тот же лотос, что на главной, но крупно и обрезанно: видны медальон и три лепестка,
   текущий раздел смотрит на заголовок. Остальные лепестки докручиваются кнопками.
   --dir — куда смотрит текущий лепесток, --cur — его номер, --spin — сколько шагов прокрутили. */

.top { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: var(--bg-lotus); }

.top__bar {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  min-height: 60px;
  padding: 8px var(--gutter);
  border-bottom: 1px solid rgba(247, 205, 185, .35);
  background: rgba(79, 50, 122, .86);
}
.top__home { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 17px; font-weight: 600; text-decoration: none; }
.top__home svg { width: 40px; height: 40px; }
.top__links { display: flex; gap: 8px; }

.top__hero {
  --u: calc(100vw / 1150);
  --dir: 180deg;
  --cx: 50%;
  --cy: calc(345 * var(--u));
  position: relative;
}
.wheel {
  /* --drag — поворот вслед за пальцем во время свайпа (js/wheel.js) */
  --rot: calc(var(--dir) - var(--cur, 0) * 40deg + var(--spin, 0) * 40deg + var(--drag, 0deg));
  position: relative;
  height: calc(1040 * var(--u));
}

.wheel__disc {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: 0;
  height: 0;
  transform: rotate(var(--rot));
  transition: transform .7s cubic-bezier(.3, .7, .2, 1);
}
.wheel__back {
  position: absolute;
  left: calc(-850 * var(--u));
  top: calc(-850 * var(--u));
  width: calc(1700 * var(--u));
  height: calc(1700 * var(--u));
  overflow: visible;
  pointer-events: none;
}
.wheel__petals { position: absolute; left: 0; top: 0; width: 0; height: 0; margin: 0; padding: 0; list-style: none; }

.wpetal {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: var(--z);
  transform: rotate(var(--r));
  pointer-events: none;
}
.wpetal:has(:focus-visible) { z-index: 20; }

.wpetal__link {
  position: absolute;
  left: calc(-230 * var(--u));
  top: calc(-700 * var(--u));
  width: calc(460 * var(--u));
  height: calc(700 * var(--u));
  color: #fff;
  text-decoration: none;
  outline: none;
}
.wpetal__hitbox { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wpetal__hit { fill: transparent; pointer-events: all; cursor: pointer; }
.wpetal__body {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.wpetal__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 calc(12 * var(--u)) rgba(70, 20, 100, .38));
  transition: filter .35s;
}
.wpetal__vein { fill: none; stroke: #fff; stroke-width: 2; opacity: .13; }
.wpetal__label {
  position: absolute;
  left: 50%;
  top: calc(262 * var(--u));
  width: calc(340 * var(--u));
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 8px rgba(80, 20, 90, .35);
  /* подпись всегда стоит ровно, как бы ни был повёрнут лепесток и весь цветок */
  transform: translate(-50%, -50%) rotate(calc(-1 * (var(--r) + var(--rot))));
  opacity: 0;
  transition: transform .7s cubic-bezier(.3, .7, .2, 1), opacity .4s;
}
/* Подписаны только три передних лепестка — остальные остаются частью цветка */
.wpetal.is-near .wpetal__label,
.wpetal__link:focus-visible .wpetal__label { opacity: 1; }
.wpetal__num { display: block; font-size: max(18px, calc(62 * var(--u))); font-weight: 500; }
.wpetal__name { display: block; margin-top: calc(2 * var(--u)); font-size: max(12px, calc(33 * var(--u))); font-weight: 600; line-height: 1.05; }

.wpetal__link:hover .wpetal__body,
.wpetal__link:focus-visible .wpetal__body { transform: scale(1.06); }
.wpetal__link:hover .wpetal__shape,
.wpetal__link:focus-visible .wpetal__shape {
  filter: drop-shadow(0 0 calc(26 * var(--u)) rgba(255, 205, 235, .9)) brightness(1.1) saturate(1.12);
}
.wpetal__link[aria-current="page"] .wpetal__shape {
  filter: drop-shadow(0 0 calc(24 * var(--u)) rgba(255, 225, 240, .8)) brightness(1.14) saturate(1.1);
}
.wpetal__link[aria-current="page"] .wpetal__rim,
.wpetal__link:focus-visible .wpetal__rim { stroke: #fff; stroke-width: 7; }

.wheel__center {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  z-index: 2;
  width: calc(660 * var(--u));
  height: calc(660 * var(--u));
  margin: calc(-330 * var(--u)) 0 0 calc(-330 * var(--u));
  border-radius: 50%;
  /* Нажимается только сам медальон (.wheel__hit — его контур), а не квадрат вокруг:
     иначе касание лепестка рядом с центром уводило на главную */
  pointer-events: none;
}
.wheel__hit { pointer-events: auto; cursor: pointer; }
.wheel__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(60, 20, 90, .35));
}
.wheel__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(300 * var(--u));
  height: calc(300 * var(--u));
  color: #fff;
  transform: translate(-50%, -50%);
  transition: transform .4s;
}
.wheel__center:hover .wheel__logo,
.wheel__center:focus-visible .wheel__logo { transform: translate(-50%, -50%) scale(1.06); }
.wheel__center:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* На телефоне центр цветка поднят выше шапки: от медальона виден только нижний край,
   торчат три лепестка — текущий по центру и два соседних. Шапка обрезает цветок по своим краям,
   чтобы он не просвечивал сквозь полупрозрачную верхнюю панель. */
@media (max-width: 899px) {
  .top__hero { --cy: calc(-185 * var(--u)); overflow: hidden; }
  /* Цветок крутится свайпом по горизонтали; вертикальная прокрутка страницы остаётся браузеру */
  .wheel { height: calc(540 * var(--u)); touch-action: pan-y; }
  /* Торчащий край медальона на главную не ведёт: в него легко попасть, целясь в лепесток */
  .wheel__hit { pointer-events: none; }
}

.top__inner { position: relative; z-index: 2; }
.top__title { padding: 8px var(--gutter) 36px; }
.crumbs { margin: 0 0 8px; font-size: 14px; opacity: .85; }
.crumbs a { color: inherit; }
.top__title h1 { margin: 0; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.08; }

@media (min-width: 900px) {
  /* На десктопе цветок прижат к правому краю, текущий лепесток смотрит влево — на заголовок */
  .top__hero {
    --u: clamp(.46px, 100vw / 2600, .6px);
    --dir: 270deg;
    --cx: calc(100% - 300 * var(--u));
    --cy: 50%;
    height: calc(720 * var(--u));
  }
  .wheel { position: absolute; inset: 0; height: auto; }

  .top__inner {
    display: flex;
    align-items: center;
    max-width: var(--container);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--gutter);
    pointer-events: none;
  }
  .top__title {
    width: calc(100vw - 1040 * var(--u) - max(var(--gutter), (100vw - var(--container)) / 2 + var(--gutter)));
    max-width: 760px;
    padding: 0;
    pointer-events: auto;
  }
}

/* Фоновое фото раздела (tools/make_header_photos.py) уже окрашено в фиолетовую гамму;
   здесь — полупрозрачность и растворение в сторону лотоса: на телефоне вверх, к лепесткам,
   на десктопе вправо, к цветку. Лежит под цветком и заголовком. */
.top__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 25%, transparent 90%);
  mask-image: linear-gradient(to top, #000 25%, transparent 90%);
}
@media (min-width: 900px) {
  .top__photo {
    width: calc(100% - 1000 * var(--u));
    -webkit-mask-image: linear-gradient(to right, #000 35%, transparent);
    mask-image: linear-gradient(to right, #000 35%, transparent);
  }
}

/* Возврат «Назад» из кэша: цветок встаёт на место мгновенно */
.wheel.is-instant .wheel__disc,
.wheel.is-instant .wpetal__label,
.wheel.is-dragging .wheel__disc,
.wheel.is-dragging .wpetal__label { transition: none; }

/* Переход между страницами разделов: цветок уже повёрнут к нужному лепестку, поэтому шапка
   до и после перехода совпадает и при общем затухании стоит на месте, а заголовок и текст
   плавно сменяются (Chrome, Edge, Safari 18.2+; в остальных — обычный переход).
   Отдельный view-transition-name цветку не даём: такой слой рисуется поверх страницы
   без обрезки краем шапки, и лепестки на мгновение просвечивают сквозь текст. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .3s; }

@media (prefers-reduced-motion: reduce) {
  .petal__body, .wpetal__body, .wheel__disc, .wpetal__label, .center__title, .center__info { transition: none; }
}

/* ───────────── Мобильное меню ───────────── */
/* Бургер на экранах уже 900 px: девять направлений отдельным списком, ниже — «О клубе» и «Контакты»,
   в самом низу — наши ресурсы. Сделано на <details>: открывается и закрывается без JS,
   site.js добавляет закрытие по Esc. На десктопе вместо бургера — кнопки «О клубе» и «Контакты». */

.menu { --num: 34px; flex: none; }
.menu__btn {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
  color: #fff;
  background: rgba(79, 50, 122, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.menu__btn::-webkit-details-marker { display: none; }
.menu__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.menu__icon,
.menu__icon::before,
.menu__icon::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s, background-color .2s;
}
.menu__icon { position: relative; }
.menu__icon::before,
.menu__icon::after { content: ""; position: absolute; left: 0; }
.menu__icon::before { top: -6px; }
.menu__icon::after { top: 6px; }
.menu[open] .menu__icon { background-color: transparent; }
.menu[open] .menu__icon::before { transform: translateY(6px) rotate(45deg); }
.menu[open] .menu__icon::after { transform: translateY(-6px) rotate(-45deg); }

/* Открытый бургер становится кнопкой «Закрыть» на том же месте, даже если страницу успели прокрутить */
.menu[open] .menu__btn { position: fixed; top: 8px; right: var(--gutter); }

.menu__panel {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px var(--gutter) 36px;
  color: #fff;
  background:
    radial-gradient(90% 60% at 80% 0%, rgba(214, 160, 215, .35), transparent 70%),
    linear-gradient(165deg, #5b3b86 0%, #7a559f 55%, #9467ad 100%);
}

.menu__home {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-right: 56px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}
.menu__home svg { width: 40px; height: 40px; }

.menu__title { margin: 26px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.menu__title--center { margin-top: 30px; text-align: center; }

/* «О клубе» и «Контакты» — сверху, двумя крупными кнопками на всю ширину: это страницы о самом клубе,
   а не направления, поэтому они выделены и стоят отдельно от списка */
.menu__club { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.menu__club a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--c-violet-900);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  background: #fff;
  box-shadow: 0 6px 18px rgba(40, 10, 70, .25);
}
.menu__club svg { flex: none; width: 22px; height: 22px; color: var(--c-pink); }
.menu__club a[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.menu__club a[aria-current="page"] svg { color: #fff; }

/* Направления: строки во всю ширину с разделителями и стрелкой справа.
   --num — колонка с номером; на неё же отступает заголовок, чтобы он стоял ровно над названиями */
.menu__title--sections { padding-left: var(--num); }
.menu__sections { margin: 0; padding: 0; list-style: none; }
.menu__sections a {
  display: flex;
  align-items: baseline;
  padding: 12px 4px 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}
.menu__sections a::after {
  content: "";
  flex: none;
  align-self: center;
  width: 8px;
  height: 8px;
  margin: 0 6px 0 auto;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  opacity: .75;
  transform: rotate(45deg);
}
.menu__num { flex: none; width: var(--num); color: #f6c3dc; font-size: 15px; font-weight: 500; }
.menu__sections a[aria-current="page"] { color: #ffd9ea; }

@media (min-width: 900px) { .menu { display: none; } }

@media (max-width: 899px) {
  .top__links { display: none; }
  /* Пока меню открыто, страница под ним не прокручивается, а шапка с меню лежит поверх всего */
  :root:has(.menu[open]) { overflow: hidden; }
  .top:has(.menu[open]),
  .hero:has(.menu[open]) { z-index: 100; }
  .top__bar:has(.menu[open]),
  .hero__nav:has(.menu[open]) { z-index: 50; }
}

/* ───────────── Шапка на телефоне ───────────── */
/* Шапка закреплена сверху: при прокрутке вниз уезжает, при прокрутке вверх возвращается целиком —
   логотип, «Клуб «Баланс»» и бургер (классы is-hidden и is-pinned ставит js/site.js).
   Прячем сдвигом top, а не transform: transform сделал бы шапку контейнером для position: fixed,
   и открытое меню перестало бы занимать весь экран. */
.hero__brand { display: none; }

@media (max-width: 899px) {
  .top { z-index: 40; padding-top: 60px; }
  .top__bar,
  .hero__nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: top .3s ease, background-color .3s, box-shadow .3s;
  }
  .top__bar.is-hidden,
  .hero__nav.is-hidden { top: -80px; }
  .top__bar.is-pinned { background: rgba(79, 50, 122, .96); box-shadow: 0 6px 20px rgba(40, 10, 70, .25); }

  /* На главной вверху страницы шапка прозрачная — над цветком только бургер; вернувшись, она такая же, как на внутренних */
  .hero__nav { justify-content: space-between; border-bottom: 1px solid transparent; }
  .hero__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s, visibility .3s;
  }
  .hero__brand svg { width: 40px; height: 40px; }
  .hero__nav.is-pinned {
    border-bottom-color: rgba(247, 205, 185, .35);
    background: rgba(79, 50, 122, .96);
    box-shadow: 0 6px 20px rgba(40, 10, 70, .25);
    pointer-events: auto;
  }
  .hero__nav.is-pinned .hero__brand { visibility: visible; opacity: 1; }

  /* Переход по якорю вверх возвращает шапку — заголовок не должен уйти под неё */
  .content h2[id] { scroll-margin-top: 76px; }
}

@media (prefers-reduced-motion: no-preference) {
  .menu[open] .menu__panel { animation: menu-in .25s ease-out; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-10px); } }

/* ───────────── Логотипы проектов Вячеслава Рузова (страница книг) ───────────── */
/* Белые знаки с ruzov.info на фирменном фиолетовом: свои разделы ведут на страницы сайта, остальные — наружу */
.content .projects {
  --cols: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 24px 0 32px;
  padding: 18px;
  border-radius: 20px;
  list-style: none;
  background:
    radial-gradient(80% 90% at 50% 0%, rgba(214, 160, 215, .4), transparent 70%),
    linear-gradient(135deg, #4f327a 0%, #7a559f 60%, #9467ad 100%);
  box-shadow: 0 10px 28px rgba(60, 20, 90, .18);
}
.content .projects li { flex: 0 0 calc((100% - (var(--cols) - 1) * 6px) / var(--cols)); margin: 0; }
@media (max-width: 899px) { .content .projects { --cols: 3; } }
.content .projects a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 124px;
  padding: 16px;
  border-radius: 14px;
  transition: background .2s;
}
.content .projects a:hover,
.content .projects a:focus-visible { background: rgba(255, 255, 255, .12); }
.content .projects img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; }
@media (max-width: 599px) {
  .content .projects { --cols: 2; padding: 10px; }
  .content .projects a { height: 100px; padding: 12px; }
}

/* ───────────── Инфографика: медальоны, карточки, факты, частые вопросы ───────────── */
/* Иконки и номера стоят на медальоне — той же волнистой форме, что в центре лотоса (tools/blocks.py). */

:root { --medal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23de8fc3'/%3E%3Cstop offset='.55' stop-color='%23b56cb3'/%3E%3Cstop offset='1' stop-color='%237f5bb8'/%3E%3C/linearGradient%3E%3Cpath id='m' d='M50 0.6C52.1 0.6 54.3 1.6 56.2 2.7C58.1 3.8 59.8 5.9 61.5 7.2C63.1 8.5 64.5 9.9 66.3 10.6C68.1 11.4 70 11.4 72.1 11.6C74.3 11.9 76.9 11.6 79 12.2C81.2 12.7 83.5 13.6 84.9 15.1C86.4 16.5 87.3 18.8 87.8 21C88.4 23.1 88.1 25.7 88.4 27.8C88.6 30 88.6 31.9 89.4 33.7C90.1 35.5 91.5 36.9 92.8 38.5C94.1 40.2 96.2 41.9 97.3 43.8C98.4 45.7 99.4 47.9 99.4 50C99.4 52.1 98.4 54.3 97.3 56.2C96.2 58.1 94.1 59.8 92.8 61.5C91.5 63.1 90.1 64.5 89.4 66.3C88.6 68.1 88.6 70 88.4 72.1C88.1 74.3 88.4 76.9 87.8 79C87.3 81.2 86.4 83.5 84.9 84.9C83.5 86.4 81.2 87.3 79 87.8C76.9 88.4 74.3 88.1 72.1 88.4C70 88.6 68.1 88.6 66.3 89.4C64.5 90.1 63.1 91.5 61.5 92.8C59.8 94.1 58.1 96.2 56.2 97.3C54.3 98.4 52.1 99.4 50 99.4C47.9 99.4 45.7 98.4 43.8 97.3C41.9 96.2 40.2 94.1 38.5 92.8C36.9 91.5 35.5 90.1 33.7 89.4C31.9 88.6 30 88.6 27.9 88.4C25.7 88.1 23.1 88.4 21 87.8C18.8 87.3 16.5 86.4 15.1 84.9C13.6 83.5 12.7 81.2 12.2 79C11.6 76.9 11.9 74.3 11.6 72.2C11.4 70 11.4 68.1 10.6 66.3C9.9 64.5 8.5 63.1 7.2 61.5C5.9 59.8 3.8 58.1 2.7 56.2C1.6 54.3 0.6 52.1 0.6 50C0.6 47.9 1.6 45.7 2.7 43.8C3.8 41.9 5.9 40.2 7.2 38.5C8.5 36.9 9.9 35.5 10.6 33.7C11.4 31.9 11.4 30 11.6 27.8C11.9 25.7 11.6 23.1 12.2 21C12.7 18.8 13.6 16.5 15.1 15.1C16.5 13.6 18.8 12.7 21 12.2C23.1 11.6 25.7 11.9 27.8 11.6C30 11.4 31.9 11.4 33.7 10.6C35.5 9.9 36.9 8.5 38.5 7.2C40.2 5.9 41.9 3.8 43.8 2.7C45.7 1.6 47.9 0.6 50 0.6Z'/%3E%3C/defs%3E%3Cuse href='%23m' fill='url(%23g)'/%3E%3Cuse href='%23m' fill='none' stroke='%23fff' stroke-opacity='.55' stroke-width='2.6' transform='translate(50 50) scale(.84) translate(-50 -50)'/%3E%3C/svg%3E"); }

.ico { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.medal {
  --s: 52px;
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--s);
  height: var(--s);
  color: #fff;
  background: var(--medal) center / contain no-repeat;
  filter: drop-shadow(0 6px 10px rgba(111, 76, 151, .26));
}
.medal .ico { width: 50%; height: 50%; stroke-width: 2; }
/* Номер пункта — маленький белый кружок на краю медальона */
.medal__num {
  position: absolute;
  top: -3px;
  right: -5px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--c-violet-900);
  font-size: 13px;
  font-weight: 800;
  background: #fff;
  box-shadow: 0 2px 6px rgba(79, 50, 122, .3);
}

/* Нумерованные списки: цифра — в медальоне */
.content ol { padding-left: 0; list-style: none; counter-reset: step; }
.content ol > li { position: relative; min-height: 38px; margin-bottom: .9em; padding: 6px 0 0 54px; counter-increment: step; }
.content ol > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  background: var(--medal) center / contain no-repeat;
  filter: drop-shadow(0 4px 8px rgba(111, 76, 151, .25));
}

/* Карточки в ряд: медальон сверху, заголовок, текст. На узком экране — строкой: иконка слева */
.content .features { display: grid; gap: 14px; margin: 20px 0 26px; padding: 0; list-style: none; }
.features--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.features--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content .feature {
  margin: 0;
  padding: 22px 20px 20px;
  border: 1px solid #ead9f0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(79, 50, 122, .06);
}
.feature .medal { margin-bottom: 14px; }
.content .feature__title { margin: 0 0 6px; color: var(--c-violet-900); font-size: 18px; font-weight: 700; line-height: 1.25; }
.content .feature__value { margin: 0 0 2px; color: var(--c-pink); font-size: 28px; font-weight: 800; line-height: 1.1; }
.content .feature p:last-child { margin: 0; font-size: 16px; line-height: 1.5; }
.content .feature code { overflow-wrap: anywhere; }
@media (max-width: 759px) {
  .features--3 { grid-template-columns: 1fr; }
  .content .feature { display: flex; gap: 16px; align-items: flex-start; padding: 18px; }
  .feature .medal { --s: 48px; margin: 0; }
}
@media (max-width: 599px) { .features--2 { grid-template-columns: 1fr; } }

/* Пункты с крупной иконкой слева: иконка, заголовок и текст выровнены по верхнему краю */
.content .ilist { display: grid; gap: 14px; margin: 20px 0 26px; padding: 0; list-style: none; }
@media (min-width: 760px) { .content .ilist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.content .ilist > li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid #ead9f0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(79, 50, 122, .06);
}
.ilist .medal { --s: 64px; }
.content .ilist__title { margin: 0 0 4px; color: var(--c-violet-900); font-size: 19px; line-height: 1.25; }
.content .ilist__body p { margin: 0; font-size: 16px; line-height: 1.5; }
/* На телефоне текст длинный, а колонка узкая: иконка встаёт рядом с заголовком, текст — под ними во всю ширину */
@media (max-width: 599px) {
  .content .ilist > li { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; padding: 16px; }
  .ilist__body { display: contents; }
  .content .ilist__title { align-self: center; margin: 0; }
  .content .ilist__body p { grid-column: 1 / -1; }
  .ilist .medal { --s: 52px; }
}

/* Полоса коротких фактов */
.content .facts { display: grid; gap: 10px; margin: 18px 0 22px; padding: 0; list-style: none; }
.facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.facts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.content .fact { display: flex; gap: 12px; align-items: center; margin: 0; padding: 14px; border-radius: 18px; background: #f4e8f6; }
.fact .medal { --s: 44px; }
.content .fact p { margin: 0; line-height: 1.25; }
.fact strong { display: block; color: var(--c-violet-900); font-size: 17px; }
.fact p > span { display: block; margin-top: 2px; color: #6b5a7d; font-size: 14px; }
@media (max-width: 899px) { .facts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .facts--3 { grid-template-columns: 1fr; }
  .content .fact { padding: 12px; }
}

/* Вопрос-зацепка в начале раздела: крупнее текста, с розовой чертой слева */
.content .hook {
  margin: 0 0 14px;
  padding: 2px 0 2px 18px;
  border-left: 4px solid var(--c-pink);
  color: var(--c-violet-900);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
}

/* Плашки-темы: маленький медальон и подпись, переносятся по строкам */
.content .topics { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 22px; padding: 0; list-style: none; }
.content .topic {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 6px 18px 6px 6px;
  border: 1px solid #ead9f0;
  border-radius: 999px;
  color: var(--c-violet-900);
  font-weight: 700;
  line-height: 1.25;
  background: #fff;
  box-shadow: 0 6px 18px rgba(79, 50, 122, .06);
}
.topic .medal { --s: 38px; }
@media (max-width: 599px) {
  .content .hook { font-size: 18px; }
  .content .topic { font-size: 15px; }
}
@media (max-width: 399px) { .facts--4 { grid-template-columns: 1fr; } }

/* Тема каталога книг: медальон с иконкой перед названием */
.content h3.theme { display: flex; gap: 14px; align-items: center; margin-top: 32px; }
.theme .medal { --s: 46px; }

/* Частые вопросы: вопрос — плашка, ответ раскрывается по нажатию */
.faq-list { display: grid; gap: 10px; margin: 18px 0 30px; }
.content .faq {
  border: 1px solid #ead9f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(79, 50, 122, .05);
  transition: border-color .2s, box-shadow .2s;
}
.content .faq[open] { border-color: #dcc0e6; box-shadow: 0 10px 28px rgba(79, 50, 122, .1); }
.faq summary {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-radius: 18px;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 3px solid var(--c-violet-500); outline-offset: 2px; }
.content .faq h3 { flex: 1; margin: 0; font-size: 18px; line-height: 1.35; }
/* Значок «+», который в открытом вопросе становится «−» */
.faq summary::after {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) center / 12px 2px no-repeat,
    linear-gradient(#fff, #fff) center / 2px 12px no-repeat,
    linear-gradient(135deg, #d27fb8, #8a63bd);
  transition: transform .3s;
}
.faq[open] summary::after {
  background:
    linear-gradient(#fff, #fff) center / 12px 2px no-repeat,
    linear-gradient(135deg, #d27fb8, #8a63bd);
  transform: rotate(180deg);
}
.faq__a { padding: 0 20px 18px; }
.content .faq__a p { margin: 0; }
@media (max-width: 599px) {
  .faq summary { padding: 14px 16px; }
  .faq__a { padding: 0 16px 16px; }
  .content .faq h3 { font-size: 17px; }
}
/* Плавное раскрытие — там, где браузер умеет анимировать высоту до auto */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq::details-content { height: 0; overflow: clip; transition: height .3s ease, content-visibility .3s allow-discrete; }
  .faq[open]::details-content { height: auto; }
}

/* Кнопка-чип с иконкой (контакты групп) */
.content .chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--c-violet-900);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  background: #f4e8f6;
  transition: background .2s;
}
.content .chip:hover,
.content .chip:focus-visible { background: #ead3f1; }
.chip .ico { width: 18px; height: 18px; color: var(--c-pink); }
.chip small { color: #8a7a9b; font-size: 12px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
  .faq::details-content { transition: none; }
}

/* ───────────── Кнопка радио в шапке и в мобильном меню ───────────── */
/* Есть всегда (js/radio.js): в покое — иконка радио и «плей», в эфире — «прыгающий» эквалайзер,
   при наведении в эфире — «пауза». Нажатие включает эфир или ставит его на паузу. */
.radio-live {
  display: inline-flex;
  flex: none;
  gap: 7px;
  align-items: center;
  height: 44px;
  margin-left: auto;
  padding: 0 14px 0 12px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  color: #fff;
  font: inherit;
  background: rgba(79, 50, 122, .55);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s, border-color .2s;
}
.radio-live:hover,
.radio-live:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .24); }
.radio-live:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.radio-live.is-playing,
.radio-live.is-loading { border-color: #f6c3dc; background: rgba(198, 101, 165, .45); }
.radio-live .radio-live__icon { width: 22px; height: 22px; }
.radio-live .rstate { color: #f6c3dc; }

/* Значок состояния: «плей», эквалайзер или «пауза» в одной ячейке */
.rstate { display: grid; place-items: center; width: 16px; height: 16px; }
.rstate > * { grid-area: 1 / 1; }
.rstate .ico { width: 15px; height: 15px; fill: currentColor; }
.rstate__pause,
.rstate__eq { display: none; }
.rstate__eq { gap: 2px; align-items: flex-end; width: 13px; height: 16px; }
.rstate__eq i { flex: 1; height: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; transform: scaleY(.45); }
.is-playing .rstate__play,
.is-loading .rstate__play { display: none; }
.is-playing .rstate__eq,
.is-loading .rstate__eq { display: flex; }
@media (hover: hover) {
  .is-playing:hover .rstate__eq,
  .is-playing:focus-visible .rstate__eq { display: none; }
  .is-playing:hover .rstate__pause,
  .is-playing:focus-visible .rstate__pause { display: block; }
}

.hero__nav { gap: 10px; }
@media (min-width: 900px) {
  .radio-live { height: 36px; }
  .hero__nav .radio-live { height: max(38px, calc(66 * var(--u))); padding-inline: max(12px, calc(22 * var(--u))); }
}

/* Плашка радио в мобильном меню: крупная кнопка эфира с названием передачи */
.menu__radio {
  display: flex;
  gap: 14px;
  align-items: center;
  width: 100%;
  margin: 12px 0 0;
  padding: 10px 16px 10px 10px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 16px;
  color: #fff;
  font: inherit;
  text-align: left;
  background: rgba(255, 255, 255, .1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu__radio.is-playing,
.menu__radio.is-loading { border-color: #f6c3dc; background: rgba(198, 101, 165, .35); }
.menu__radio-icon { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--c-violet-700); background: #fff; }
.menu__radio-icon .rstate { width: 20px; height: 20px; }
.menu__radio-icon .rstate .ico { width: 18px; height: 18px; }
.menu__radio-icon .rstate__eq { width: 16px; height: 18px; }
.menu__radio-text { min-width: 0; }
.menu__radio-text strong { display: block; font-size: 16px; }
.menu__radio-note {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  opacity: .85;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (prefers-reduced-motion: no-preference) {
  .rstate__eq i { animation: radio-eq .8s ease-in-out infinite alternate; }
  .rstate__eq i:nth-child(2) { animation-delay: -.35s; }
  .rstate__eq i:nth-child(3) { animation-delay: -.6s; }
  .is-loading .rstate__eq i { animation-duration: .35s; }
}

/* После перехода без перезагрузки фокус стоит на заголовке страницы — рамка там не нужна */
h1[tabindex="-1"]:focus { outline: none; }

/* Текст только для читалок экрана */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ───────────── Видеоархив ───────────── */
/* Страница без боковой колонки: всё место под видео. Абзацы — прежней ширины, чтобы строки читались */
@media (min-width: 900px) { .page--wide { display: block; } }
.va-intro,
.content .va-hint,
.page--wide .faq-list { max-width: 880px; }
.content .va-hint { margin: -4px 0 18px; color: #6b5a7d; }
/* На узком телефоне факты — 2 × 2, медальон над текстом: плеер ближе к началу страницы */
@media (max-width: 399px) {
  .page--wide .facts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page--wide .content .fact { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* Лента плейлистов над плеером: обложка «стопкой», число видео, название */
.carousel--shelf { margin: 0 0 18px; }
.content .carousel--shelf .carousel__track { gap: 16px; padding: 12px 2px 14px; }
.carousel--shelf .carousel__slide { width: 220px; }
.carousel--shelf .carousel__slide img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; background: none; }
.carousel--shelf .carousel__btn { top: 42%; }
@media (min-width: 900px) { .carousel--shelf .carousel__slide { width: 264px; } }
.shelf {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  color: var(--c-violet-900);
  font: inherit;
  text-align: left;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shelf__cover {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden; /* иначе высокая картинка растягивает рамку 16:9 */
  border-radius: 14px;
  background: #2a1c44;
  /* края «стопки» видео над обложкой */
  box-shadow: 0 -5px 0 -2px #d9c6ea, 0 -10px 0 -5px #ece0f4, 0 8px 20px rgba(79, 50, 122, .18);
  outline: 3px solid transparent;
  outline-offset: 3px;
  transition: transform .2s, outline-color .2s;
}
.shelf:hover .shelf__cover { transform: translateY(-2px); }
.shelf:focus-visible { outline: none; }
.shelf:focus-visible .shelf__cover,
.shelf[aria-pressed="true"] .shelf__cover { outline-color: var(--c-pink); }
.shelf__badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  background: rgba(20, 8, 40, .78);
}
.shelf__title {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.shelf[aria-pressed="true"] .shelf__title { color: #a3428a; }
.shelf__all {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  height: 100%;
  border-radius: inherit;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #4f327a, #b8509c);
}
.shelf__all .medal { --s: 40px; margin-bottom: 4px; }
.shelf__all strong { font-size: 30px; line-height: 1; }
.shelf__all > span:last-child { font-size: 13px; opacity: .9; }

/* Плеер и список: тёмная панель, как зал кинотеатра */
.va {
  display: grid;
  gap: 16px;
  margin: 0 0 8px;
  padding: 14px;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(70% 60% at 0% 0%, rgba(184, 80, 156, .28), transparent 70%),
    linear-gradient(165deg, #1d1230 0%, #2f1f4d 60%, #4f327a 100%);
  box-shadow: 0 18px 40px rgba(42, 28, 68, .3);
  scroll-margin-top: 90px;
}
@media (min-width: 900px) {
  .va { grid-template-columns: minmax(0, 1fr) 380px; padding: 18px; }
  /* высоту строки задаёт плеер, список справа прокручивается внутри неё */
  .va__side { contain: size; }
}
.va__screen { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 16px; background: #000; }
.va__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.va__facade { position: absolute; inset: 0; display: block; padding: 0; border: 0; background: #000; cursor: pointer; }
.va__facade img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .2s; }
.va__facade:hover img,
.va__facade:focus-visible img { opacity: 1; }
.va__facade:focus-visible { outline: 3px solid #f6c3dc; outline-offset: -3px; }
.va__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  background: var(--medal) center / contain no-repeat;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .45));
  transform: translate(-50%, -50%);
  transition: transform .2s;
}
.va__play::after { content: ""; margin-left: 8px; border-top: 17px solid transparent; border-bottom: 17px solid transparent; border-left: 27px solid #fff; }
.va__facade:hover .va__play { transform: translate(-50%, -50%) scale(1.07); }
.va__now { padding: 12px 4px 2px; }
.content .va__now-title { margin: 0 0 4px; font-size: 20px; font-weight: 700; line-height: 1.3; }
.content .va__now-meta { margin: 0; color: #d9c6ea; font-size: 14px; }
.content .va__now-meta a,
.content .va__pl a,
.content .va__chapters a { color: #f6c3dc; }

.va__side { display: flex; flex-direction: column; min-height: 0; }
.va__head { padding: 2px 2px 10px; }
.va__search {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  transition: border-color .2s;
}
.va__search:focus-within { border-color: #f6c3dc; }
.va__search .ico { flex: none; width: 18px; height: 18px; opacity: .8; }
.va__search input { flex: 1; min-width: 0; height: 42px; border: 0; color: #fff; font: inherit; font-size: 16px; background: none; outline: none; }
.va__search input::placeholder { color: rgba(255, 255, 255, .65); }
.content .va__pl { margin: 12px 0 0; color: #d9c6ea; font-size: 13px; line-height: 1.4; }
.va__pl strong { display: block; color: #fff; font-size: 17px; }
.va__chapters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.va__chapters[hidden] { display: none; }
.va__chip {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  background: none;
  cursor: pointer;
}
.va__chip:hover { border-color: #fff; }
.va__chip[aria-pressed="true"] { border-color: #fff; color: var(--c-violet-900); background: #fff; }
.content .va__yt { font-size: 13px; }

.content .va__list {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0 4px 0 0;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
  scrollbar-color: rgba(255, 255, 255, .35) transparent;
  scrollbar-width: thin;
}
.content .va__list li { margin: 0; }
.content .va-item {
  display: flex;
  gap: 10px;
  padding: 6px;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  transition: background .15s;
}
.content .va-item:hover,
.content .va-item:focus-visible { background: rgba(255, 255, 255, .09); outline: none; }
.content .va-item[aria-current] { background: rgba(246, 195, 220, .2); box-shadow: inset 3px 0 0 #f6c3dc; }
.va-item__thumb { position: relative; flex: none; overflow: hidden; width: 128px; aspect-ratio: 16 / 9; border-radius: 8px; background: #3a2a55; }
.va-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.va-item__dur { position: absolute; right: 4px; bottom: 4px; padding: 1px 5px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1.4; background: rgba(0, 0, 0, .78); }
.va-item__body { min-width: 0; }
.va-item__title { display: -webkit-box; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.va-item__date { display: block; margin-top: 3px; color: #c9b5e0; font-size: 12px; }
@media (max-width: 899px) {
  .content .va__list { max-height: 440px; }
  .va { margin-inline: calc(-1 * var(--gutter) + 8px); }
}
@media (max-width: 599px) {
  .va-item__thumb { width: 112px; }
  .va__play { width: 76px; height: 76px; }
  .va__play::after { margin-left: 6px; border-top-width: 13px; border-bottom-width: 13px; border-left-width: 21px; }
  .content .va__now-title { font-size: 17px; }
}

/* Эксклюзивный контент Boosty: тёмная панель, карточки подборок с замком */
.excl {
  padding: 28px;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(246, 195, 220, .22), transparent 65%),
    linear-gradient(160deg, #1d1230 0%, #3a2357 60%, #5b3a86 100%);
  box-shadow: 0 18px 40px rgba(42, 28, 68, .3);
}
.content .excl__kicker {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
  color: #f6c3dc;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.excl__kicker .ico { width: 18px; height: 18px; }
.content .excl__lead { max-width: 880px; margin: 0; color: #efe3f6; font-size: 17px; }
.content .excl__grid { display: grid; gap: 16px; margin: 24px 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .content .excl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .content .excl__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.content .excl-card { margin: 0; }
.content .excl-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, .07);
  transition: transform .2s, border-color .2s;
}
.content .excl-card a:hover,
.content .excl-card a:focus-visible { border-color: #f6c3dc; outline: none; transform: translateY(-3px); }
.excl-card__cover { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; background: #2a1c44; }
.excl-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.excl-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  color: #ffd9ec;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(20, 8, 40, .8);
}
.excl-card__badge .ico { width: 14px; height: 14px; stroke-width: 2.2; }
.excl-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 16px 16px 18px; }
.excl-card__title { font-size: 18px; font-weight: 800; line-height: 1.25; }
.excl-card__text { color: #e6d8ef; font-size: 14px; line-height: 1.45; }
.excl-card__meta { margin-top: auto; padding-top: 6px; color: #f6c3dc; font-size: 13px; font-weight: 700; }
.content .excl__cta { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin: 0; }
.content .excl__cta .btn { margin: 0; }
.excl__cta span { color: #d9c6ea; font-size: 14px; }
@media (max-width: 599px) { .excl { margin-inline: calc(-1 * var(--gutter) + 8px); padding: 22px 16px; } }

/* Другие площадки */
.content .platforms { display: grid; gap: 14px; margin: 18px 0 8px; padding: 0; list-style: none; }
@media (min-width: 760px) { .content .platforms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.content .platform {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 0;
  padding: 20px;
  border: 1px solid #ead9f0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(79, 50, 122, .06);
}
.content .platform__name { margin: 0 0 4px; color: var(--c-violet-900); font-size: 19px; }
.content .platform p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.content .platform a { font-size: 15px; font-weight: 700; }

/* Плашка Boosty на страницах разделов (blocks.boosty_panel): та же тёмная «эксклюзивная» панель, что в видеоархиве */
.excl--panel { margin: 20px 0 8px; padding: 28px; }
.content .excl--panel .excl__body > * { margin: 0; }
.content .excl--panel .excl__body > * + * { margin-top: 18px; }
.content .excl--panel .excl__body > .excl__cta { margin-top: 24px; }
.excl--split { display: grid; gap: 24px; align-items: center; }
@media (min-width: 600px) { .excl--split { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); } }
.excl__media { display: block; overflow: hidden; aspect-ratio: 3 / 2; border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px; }
.excl__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.excl__media:hover img { transform: scale(1.04); }
.content .excl__points { display: grid; gap: 12px; padding: 0; list-style: none; }
@media (min-width: 760px) { .content .excl__points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.content .excl__points li { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; background: rgba(255, 255, 255, .07); }
.excl__points .medal { --s: 42px; }
.content .excl__points p { margin: 0; color: #e6d8ef; font-size: 15px; line-height: 1.45; }
.excl__points strong { display: block; margin-bottom: 2px; color: #fff; font-size: 16px; }
@media (max-width: 599px) { .excl--panel { margin-inline: 0; padding: 20px 16px; } }