/* =========================================================
   Спецпроект «Силуэт каждого века»

   ДВА РЕЖИМА (выбираются автоматически, см. <head> в index.html):
   • embed   — шапка на сайте журнала (во iframe). Холст 1440 × 790,
               тянется по ширине, пропорция всегда как в макете.
   • landing — отдельный лендинг. Заполняет окно браузера любого
               размера; фото растягиваются на весь экран, а кнопки,
               тексты и отступы масштабируются так, чтобы всё влезало.

   Размеры пишем как calc(N * var(--px)), где N — значение
   из Figma-макета 1440. (Лендинг 1920 × 1080 в Figma — это тот же
   макет ×4/3, поэтому отдельные цифры для него не нужны.)

   Элементы привязаны к краям экрана (сверху / снизу / слева /
   справа / от центра), а не к координатам холста — поэтому
   на любых пропорциях окна ничего не съезжает.
   ========================================================= */

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

html, body { background: #0e0d0c; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* =========================================================
   МАСШТАБ И РЕЖИМЫ
   ========================================================= */

/* --- embed (по умолчанию) --- */
.sp {
  container-type: inline-size;
  width: 100%;
}

.stage {
  --px: calc(100cqw / 1440);
  --line: max(1px, calc(1 * var(--px)));

  --cream: rgba(237, 230, 218, 1);
  --ink:   rgba(14, 13, 12, 1);

  position: relative;
  width: 100%;
  height: calc(790 * var(--px));
  overflow: hidden;
  font-family: 'Onest', system-ui, sans-serif;
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
}

/* --- landing: на всё окно браузера ---
   Масштаб берётся по ширине или по высоте — что «теснее».
   1440 × 810 — это 1920 × 1080 из Figma в единицах макета 1440. */
html[data-mode="landing"],
html[data-mode="landing"] body {
  height: 100%;
  overflow: hidden;
}
html[data-mode="landing"] .sp {
  container-type: size;
  height: 100vh;
  height: 100dvh;
}
html[data-mode="landing"] .stage {
  --px: min(100cqw / 1440, 100cqh / 810);
  height: 100%;
}

/* =========================================================
   ОБЩЕЕ
   ========================================================= */

.screen,
.menu {
  position: absolute;
  inset: 0;
}

/* Экраны (первый экран, силуэт) переключаются плавным затуханием */
.screen {
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.screen.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease, visibility 0s;
}

/* Кнопка «Карта силуэтов» — общая для всех экранов */
.map-btn {
  position: absolute;
  z-index: 5;
  top:   calc(32 * var(--px));
  right: calc(40 * var(--px));
  width:  calc(219 * var(--px));
  height: calc(48 * var(--px));
  padding: 0 calc(20 * var(--px)) 0 calc(24 * var(--px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--px));

  border-radius: 999px;
  border: var(--line) solid rgba(237, 230, 218, 0.2);
  background: rgba(14, 13, 12, 0.88);
  -webkit-backdrop-filter: blur(calc(16 * var(--px)));
          backdrop-filter: blur(calc(16 * var(--px)));

  font-size: calc(15 * var(--px));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap;
  transition: background .25s ease;
}
.map-btn:hover { background: rgba(14, 13, 12, 1); }

.map-btn__burger {
  flex: none;
  width:  calc(20 * var(--px));
  height: calc(14.5 * var(--px));
  fill: currentColor;
}

/* Стеклянные плашки («Grazia · Спецпроект», «A · Практика»…) */
.glass {
  position: absolute;
  height: calc(35 * var(--px));
  padding: 0 calc(14 * var(--px));
  display: flex;
  align-items: center;

  border-radius: 999px;
  border: var(--line) solid rgba(255, 255, 255, 0.16);
  background: rgba(14, 13, 12, 0.32);
  -webkit-backdrop-filter: blur(calc(10 * var(--px)));
          backdrop-filter: blur(calc(10 * var(--px)));

  font-size: calc(12 * var(--px));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

/* Нижняя тёмная панель (первый экран и экраны силуэтов) */
.bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(88 * var(--px));
  padding: 0 calc(40 * var(--px));
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* центр всегда ровно посередине */
  align-items: center;
  background: rgba(14, 13, 12, 0.9);
}
.bar__left,
.bar__center {
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap;
}
.bar__left   { font-size: calc(13 * var(--px)); justify-self: start; }
.bar__center { font-size: calc(14 * var(--px)); justify-self: center; }

/* Светлая кнопка-«пилюля» («Начать ↓», «Следующий силуэт →») */
.pill {
  justify-self: end;
  height: calc(48 * var(--px));
  padding: 0 calc(24 * var(--px)) 0 calc(28 * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--cream);
  font-size: calc(15 * var(--px));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: background .25s ease;
}
.pill:hover { background: #fff; }

/* =========================================================
   ПЕРВЫЙ ЭКРАН
   ========================================================= */

.hero__bg {
  position: absolute;
  inset: 0;
  background: #5e5646 url('img/hero.jpg') center / cover no-repeat;
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.hero__badge {
  top:  calc(38 * var(--px));
  left: calc(40 * var(--px));
  -webkit-backdrop-filter: blur(calc(20 * var(--px)));
          backdrop-filter: blur(calc(20 * var(--px)));
}

/* Заголовок и подписи привязаны к низу: при высоком окне
   лишнее место уходит наверх, на фото */
.hero__kicker {
  position: absolute;
  left:   calc(40 * var(--px));
  bottom: calc(445 * var(--px));
  font-size: calc(11 * var(--px));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(237, 230, 218, 0.75);
  white-space: nowrap;
}

.hero__title {
  position: absolute;
  left:   calc(34 * var(--px));
  bottom: calc(144 * var(--px));
  font-size: calc(150 * var(--px));
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--cream);
}
.hero__title span { display: block; white-space: nowrap; }

.hero__lead {
  position: absolute;
  right:  calc(54 * var(--px));
  bottom: calc(349 * var(--px));
  width:  calc(603 * var(--px));
  font-size: calc(16 * var(--px));
  font-weight: 400;
  line-height: 1.56;
  color: rgba(237, 230, 218, 0.9);
}

/* =========================================================
   ЭКРАН СИЛУЭТА
   ========================================================= */

.chapter { background: #0E0D0C; }

.chapter__half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  transition: opacity .35s ease;
}
.chapter__half--a { left: 0;   background-color: #2a2724; width: calc(50% + 1px); } /* +1px — без шва между половинами */
.chapter__half--b { left: 50%; background-color: #33100E; }

/* --- Фото --- */
.chapter__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  transition: filter .7s ease, transform .9s ease;
}

/* Видео вместо фото: та же раскладка «cover», кадр — через object-position */
.chapter__video {
  object-fit: cover;
  background: transparent;
}
.chapter__video[hidden] { display: none; }

/* --- Затемнение поверх фото (в макете rgba(14,13,12,.55)) --- */
.chapter__veil {
  position: absolute;
  inset: 0;
  background: rgba(14, 13, 12, 0.55);
  opacity: 0;
  transition: opacity .6s ease;
}

/* --- Текст --- */
.chapter__text {
  position: absolute;
  top:  calc(192 * var(--px));
  left: calc(90 * var(--px));
  width: calc(540 * var(--px));
  opacity: 0;
  transform: translateY(calc(16 * var(--px)));
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}

.chapter__kicker {
  font-size: calc(10.5 * var(--px));
  font-weight: 500;
  line-height: calc(15 * var(--px));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(237, 230, 218, 0.75);
}

.chapter__title {
  margin-top: calc(12 * var(--px));
  font-size: calc(87 * var(--px));
  font-weight: 500;
  line-height: calc(81 * var(--px));
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--cream);
}

.chapter__body {
  margin-top: calc(33 * var(--px));
  width: calc(492 * var(--px));
  display: flex;
  flex-direction: column;
  gap: calc(21 * var(--px));
  font-size: calc(15 * var(--px));
  font-weight: 400;
  line-height: calc(24 * var(--px));
  color: rgba(237, 230, 218, 0.9);
}

.chapter__fact {
  margin-top: calc(33 * var(--px));
  display: flex;
  gap: calc(12 * var(--px));
  font-size: calc(10.5 * var(--px));
  font-weight: 500;
  line-height: calc(15 * var(--px));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
}
.chapter__fact-label { color: rgba(237, 230, 218, 0.6); white-space: nowrap; }

.chapter__body.is-strong { font-weight: 500; }

/* --- Истории: свои цвета и размер заголовка (макет «История 05») --- */
.chapter--story .chapter__half--a { background-color: #C8BFAF; }
.chapter--story .chapter__half--b { background-color: #BAB1A3; }

.chapter--story .chapter__title {
  font-size: calc(75 * var(--px));
  line-height: calc(72 * var(--px));
}

.chapter--story .bar { background: rgba(255, 253, 250, 0.7); }
.chapter--story .bar__left   { color: rgba(14, 13, 12, 0.7); }
.chapter--story .bar__center { color: #0E0D0C; }
.chapter--story .pill        { background: #0E0D0C; color: #E8DECC; }
.chapter--story .pill:hover  { background: #000; }

.bar, .bar__left, .bar__center, .pill {
  transition: background .35s ease, color .35s ease, opacity .35s ease;
}

/* --- Наведение: фото уходит в блюр, проявляется текст --- */
.chapter__half.is-open .chapter__img {
  filter: blur(calc(16 * var(--px)));
  transform: scale(1.08);           /* чтобы размытые края не «светились» */
}
.chapter__half.is-open .chapter__veil { opacity: 1; }
.chapter__half.is-open .chapter__text {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease .15s, transform .6s ease .15s;
}

.chapter__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--line);
  background: rgba(237, 230, 218, 0.35);
  display: none;          /* линия-разделитель из макета выключена; вернуть — удалить эту строку */
  transition: opacity .35s ease;
}
.chapter.is-switching .chapter__divider { opacity: 0; }   /* если вернуть — гаснет вместе с видео */

.chapter__tag    { top: calc(38 * var(--px)); }
.chapter__tag--a { left: calc(40 * var(--px)); }
.chapter__tag--b { left: calc(50% + 40 * var(--px)); }

/* при смене силуэта картинки и подписи коротко гаснут */
.chapter .bar__left,
.chapter .bar__center { transition: opacity .35s ease; }

.chapter.is-switching .chapter__half,
.chapter.is-switching .bar__left,
.chapter.is-switching .bar__center { opacity: 0; }

/* Курсор-кружок с номером силуэта.
   Системный курсор на экранах силуэтов прячем, вместо него — кружок. */
.stage.has-cursor .chapter,
.stage.has-cursor .chapter *,
.stage.has-cursor .map-btn { cursor: none; }

.cursor {                         /* точка под мышью — двигается */
  position: absolute;
  z-index: 20;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;            /* не мешает кликам */
  opacity: 0;
  will-change: transform;
  transition: opacity .25s ease;
}
.cursor.is-visible { opacity: 1; }

.cursor__dot {                    /* сам кружок — центрирован на точке */
  position: absolute;
  left: calc(-16 * var(--px));
  top:  calc(-16 * var(--px));
  width:  calc(32 * var(--px));
  height: calc(32 * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: max(1px, calc(2 * var(--px))) solid var(--cream);
  background: rgba(237, 230, 218, 0.4);
  font-size: calc(11 * var(--px));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
  transition: transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.cursor.is-hover .cursor__dot { transform: scale(1.35); }   /* над кнопками чуть больше */
.cursor.is-on-light .cursor__dot {                           /* над светлыми кнопками — тёмный */
  border-color: var(--ink);
  background: rgba(14, 13, 12, 0.25);
  color: var(--ink);
}

/* =========================================================
   МЕНЮ «КАРТА СИЛУЭТОВ»
   ========================================================= */

.menu {
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease, visibility 0s;
}

/* --- Фон --- */
.menu__veil {
  position: absolute;
  inset: 0;
  background: rgba(14, 13, 12, 0.62);
  -webkit-backdrop-filter: blur(calc(15 * var(--px)));
          backdrop-filter: blur(calc(15 * var(--px)));
}

.menu__bgs {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.menu__bg {
  position: absolute;
  inset: calc(-20 * var(--px));      /* запас, чтобы размытые края не светились */
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(calc(6 * var(--px)));
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .6s ease, transform 1.2s ease;
}
.menu__bg.is-active {
  opacity: 1;
  transform: scale(1);
}

.menu__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(278.86deg, rgba(102, 102, 102, 0) 23.15%, rgba(0, 0, 0, 0.69) 92.98%);
  pointer-events: none;
}

/* --- Шапка главы (привязана к верху) --- */
.menu__head { transition: opacity .2s ease; }
.menu__head.is-switching { opacity: 0; }

.menu__kicker {
  position: absolute;
  top:  calc(33 * var(--px));
  left: calc(39 * var(--px));
  font-size: calc(11 * var(--px));
  font-weight: 500;
  line-height: calc(14 * var(--px));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(237, 230, 218, 0.75);
  white-space: nowrap;
}

.menu__title {
  position: absolute;
  top:  calc(75 * var(--px));
  left: calc(36 * var(--px));
  font-size: calc(63 * var(--px));
  font-weight: 500;
  line-height: calc(60 * var(--px));
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap;
}

.menu__desc {
  position: absolute;
  top:  calc(153 * var(--px));
  left: calc(39 * var(--px));
  width: calc(459 * var(--px));
  font-size: calc(15 * var(--px));
  font-weight: 400;
  line-height: calc(24 * var(--px));
  color: rgba(237, 230, 218, 0.8);
}

/* --- Кнопка «Закрыть» --- */
.menu__close {
  position: absolute;
  top:   calc(32 * var(--px));
  right: calc(40 * var(--px));
  height: calc(48 * var(--px));
  padding: 0 calc(20 * var(--px)) 0 calc(24 * var(--px));
  display: flex;
  align-items: center;
  gap: calc(12 * var(--px));

  border-radius: 999px;
  border: var(--line) solid rgba(237, 230, 218, 0.2);
  background: rgba(14, 13, 12, 0.88);
  -webkit-backdrop-filter: blur(calc(8 * var(--px)));
          backdrop-filter: blur(calc(8 * var(--px)));

  font-size: calc(15 * var(--px));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap;
  transition: background .25s ease;
}
.menu__close:hover { background: rgba(14, 13, 12, 1); }

/* --- Карточки: 7 в ряд (силуэты · подводка · истории), привязаны к низу --- */
.menu__picker {
  position: absolute;
  left:   calc(39 * var(--px));
  right:  calc(39 * var(--px));
  bottom: calc(156 * var(--px));
  display: flex;
  justify-content: space-between;
  gap: calc(24 * var(--px));
}

.menu__slot {
  display: flex;
  flex-direction: column;
  gap: calc(9 * var(--px));
}

.menu__label {
  min-height: calc(15 * var(--px));     /* у карточек без подписи — пустое место той же высоты */
  font-size: calc(10.5 * var(--px));
  font-weight: 500;
  line-height: calc(15 * var(--px));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap;
}

.card {
  position: relative;
  flex: none;
  width:  calc(174 * var(--px));
  height: calc(261 * var(--px));
  padding: 0 calc(15 * var(--px)) calc(15 * var(--px));
  display: flex;
  align-items: flex-end;
  overflow: hidden;

  border: max(1px, calc(2.25 * var(--px))) solid rgba(237, 230, 218, 0.4);
  border-radius: calc(3 * var(--px));
  background: #2a2724 center / cover no-repeat;
  background-clip: padding-box;     /* фото не заходит под полупрозрачную рамку — рамка одинаковая со всех сторон */
  text-align: left;
  transition: border-color .3s ease;
}

.card::before {                     /* затемнение неактивных карточек */
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  transition: background .3s ease;
}
.card:hover::before { background: rgba(0, 0, 0, 0.2); }

/* карточка без картинки (подводка) — стеклянная */
.card--empty {
  background: rgba(20, 20, 20, 0.55);
  -webkit-backdrop-filter: blur(calc(9 * var(--px)));
          backdrop-filter: blur(calc(9 * var(--px)));
}
.card--empty::before { display: none; }

.card__label {
  position: relative;
  font-size: calc(10.5 * var(--px));
  font-weight: 500;
  line-height: calc(15 * var(--px));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(237, 230, 218, 0.8);   /* длинные названия переносятся на 2 строки */
  margin-right: calc(-3 * var(--px)); /* запас, чтобы «03 · Героиновый шик» влезал в строку, как в макете */
  transition: color .3s ease;
}

.card.is-active { border-color: var(--cream); }
.card.is-active::before { background: rgba(0, 0, 0, 0); }
.card.is-active .card__label { color: var(--cream); }

.card:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

/* --- Нижняя панель меню --- */
.menu__bar {
  position: absolute;
  left:   calc(39 * var(--px));
  right:  calc(39 * var(--px));
  bottom: calc(21 * var(--px));
  height: calc(48 * var(--px));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.icon-btn {
  flex: none;
  width:  calc(48 * var(--px));
  height: calc(48 * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: var(--line) solid rgba(237, 230, 218, 0.4);
  background: rgba(14, 13, 12, 0.4);
  font-size: calc(16 * var(--px));
  font-weight: 500;
  line-height: 1;
  color: var(--cream);
  transition: background .25s ease, opacity .25s ease;
}
button.icon-btn:hover,
.menu__back:hover .icon-btn { background: rgba(14, 13, 12, 0.8); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.icon-btn:disabled:hover { background: rgba(14, 13, 12, 0.4); }

.menu__caption {
  font-size: calc(11 * var(--px));
  font-weight: 500;
  line-height: calc(14 * var(--px));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(237, 230, 218, 0.75);
  white-space: nowrap;
}

.menu__back {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--px));
}

.menu__pager {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--px));
}

.menu__go {
  justify-self: center;
  width:  calc(142 * var(--px));
  height: calc(48 * var(--px));
  padding: 0 calc(24 * var(--px)) 0 calc(28 * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #FFFAF1;
  font-size: calc(15 * var(--px));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: background .25s ease, opacity .25s ease;
}
.menu__go:hover { background: #fff; }
.menu__go:disabled { opacity: 0.45; cursor: default; }
.menu__go:disabled:hover { background: #FFFAF1; }

@media (prefers-reduced-motion: reduce) {
  .screen, .menu, .menu__bg, .menu__head, .card, .card::before,
  .chapter__half, .chapter__img, .chapter__veil, .chapter__text, .cursor, .cursor__dot { transition: none !important; }
}

/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ (экран уже 768px)
   Макет Figma 390 × 664. Размеры — calc(N * var(--m)),
   N — значение из Figma. Масштаб считается от ширины экрана
   (и от высоты, если телефон «короткий»), поэтому на любом
   телефоне пропорции как в макете.
   ========================================================= */

.m { display: none; }

@media (max-width: 767px) {
  .stage { display: none; }
  .m     { display: block; }
}

.m {
  --cream: rgba(237, 230, 218, 1);
  --ink:   rgba(14, 13, 12, 1);
  --m: min(100cqw / 390, 100cqh / 664);
  --mline: max(1px, calc(1 * var(--m)));

  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  container-type: size;
  overflow: hidden;
  background: #0E0D0C;
  font-family: 'Onest', system-ui, sans-serif;
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Лента: свайп = один слайд ---------- */
.m-feed {
  position: absolute;
  inset: 0;
  overflow: hidden;                        /* листание — свайпом (mobile.js), по одному экрану */
  overscroll-behavior: none;
  scrollbar-width: none;
}
.m-feed { transition: opacity .38s ease; }
.m-feed.is-jumping { opacity: 0; }        /* переход «в начало» */
.m-feed::-webkit-scrollbar { display: none; }


.m-slide {
  position: relative;
  height: 100cqh;
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--m));
  padding: calc(12 * var(--m)) calc(16 * var(--m)) calc(20 * var(--m));
  overflow: hidden;
  isolation: isolate;
  background: #0E0D0C;
}
.m-slide > * { position: relative; z-index: 1; flex: none; }
.m-slide > .m-bg,
.m-slide > .m-shade,
.m-slide > .m-media__half,
.m-slide > .m-ep__intro { position: absolute; z-index: 0; }

.m-spacer { flex: 1 1 0 !important; }

/* ---------- Фоны ---------- */
.m-bg {
  inset: 0;
  background-color: #2a2724;
  background-size: cover;
  background-repeat: no-repeat;
}
.m-bg.is-blur {
  inset: calc(-30 * var(--m));             /* запас, чтобы размытые края не светились */
  filter: blur(calc(12 * var(--m)));
}
.m-bg.is-blur--strong { filter: blur(calc(16 * var(--m))); }

.m-shade { inset: 0; pointer-events: none; }
.m-shade--hero  { background: rgba(14, 13, 12, 0.3); }
.m-shade--cover { background: rgba(14, 13, 12, 0.45); }
.m-shade--text  { background: rgba(14, 13, 12, 0.62); }
.m-shade--media {                            /* лёгкое затемнение сверху и снизу — под подписи */
  background: linear-gradient(to bottom,
    rgba(14, 13, 12, 0.35) 0%, rgba(14, 13, 12, 0) 16%,
    rgba(14, 13, 12, 0) 72%, rgba(14, 13, 12, 0.55) 100%);
}

/* ---------- Общая шапка: плашка + бургер (не свайпается) ---------- */
.m-topbar {
  position: absolute;
  z-index: 10;                           /* над лентой, под меню */
  top: calc(12 * var(--m));
  left: calc(16 * var(--m));
  right: calc(16 * var(--m));
  height: calc(44 * var(--m));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(12 * var(--m));
  pointer-events: none;                  /* свайпы проходят сквозь пустое место шапки */
}
.m-topbar > * { pointer-events: auto; }
.m-topbar .m-glass { transition: opacity .22s ease, margin-top .4s ease; }
.m-topbar.is-home .m-glass { margin-top: calc(6 * var(--m)); }   /* на главной плашка по центру строки, как в макете */

/* в самих кадрах на месте шапки — пустая строка той же высоты */
.m-top-space { height: calc(44 * var(--m)); }

.m-glass {
  height: calc(32 * var(--m));
  min-width: 0;
  padding: 0 calc(12 * var(--m));
  display: flex;
  align-items: center;
  border-radius: 999px;
  border: var(--mline) solid rgba(255, 255, 255, 0.16);
  background: rgba(14, 13, 12, 0.32);
  -webkit-backdrop-filter: blur(calc(10 * var(--m)));
          backdrop-filter: blur(calc(10 * var(--m)));
  font-size: calc(11 * var(--m));
  font-weight: 500;
  line-height: calc(14 * var(--m));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-burger {
  flex: none;
  width:  calc(44 * var(--m));
  height: calc(44 * var(--m));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(5 * var(--m));
  border-radius: 50%;
  border: var(--mline) solid rgba(237, 230, 218, 0.2);
  background: rgba(14, 13, 12, 0.88);
}
.m-burger i {
  display: block;
  width: calc(18 * var(--m));
  height: max(1px, calc(1.5 * var(--m)));
  background: var(--cream);
}

/* ---------- Подсказка «листайте» ---------- */
.m-hint {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--m));
}
.m-hint__line {
  width: 1px;
  height: calc(24 * var(--m));
  background: rgba(237, 230, 218, 0.7);
  transform-origin: top;
  animation: m-hint-line 2.4s ease-in-out infinite;
}
@keyframes m-hint-line {
  0%   { transform: scaleY(0);  opacity: 0; }
  35%  { transform: scaleY(1);  opacity: 1; }
  70%  { transform: scaleY(1);  opacity: 0.6; }
  100% { transform: scaleY(1);  opacity: 0; }
}
.m-hint__text {
  font-size: calc(11 * var(--m));
  font-weight: 500;
  line-height: calc(14 * var(--m));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(237, 230, 218, 0.75);
}

.m-arrow {
  width:  calc(44 * var(--m));
  height: calc(44 * var(--m));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: var(--mline) solid rgba(237, 230, 218, 0.35);
  background: rgba(14, 13, 12, 0.45);
  -webkit-backdrop-filter: blur(calc(8 * var(--m)));
          backdrop-filter: blur(calc(8 * var(--m)));
  animation: m-arrow 2.4s ease-in-out infinite;
}
.m-arrow svg {
  width: calc(16 * var(--m));
  height: calc(16 * var(--m));
  fill: none;
  stroke: var(--cream);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes m-arrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(4 * var(--m))); }
}

/* ---------- Главная ---------- */
.m-hero__bg {
  inset: 0;
  background: #5e5646 url('img/hero.jpg') center / cover no-repeat;
}
.m-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}
.m-hero__content {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--m));
}
.m-hero__title {
  font-size: calc(42 * var(--m));
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--cream);
}
.m-hero__lead {
  font-size: calc(15 * var(--m));
  font-weight: 400;
  line-height: 1.5;
  color: rgba(237, 230, 218, 0.9);
}

/* ---------- Видео / фото: A сверху, B снизу ---------- */
.m-media__half {
  left: 0;
  right: 0;
  overflow: hidden;
  background: #2a2724;
}
.m-media__half--a { top: 0;   height: 50%; }
.m-media__half--b { top: 50%; bottom: 0; background: #33100E; }

.m-video,
.m-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ---------- Эпизод главы ----------
   .m-ep = два экрана: кадр с видео (прилипает к верху) + панель текста,
   которая при свайпе наезжает на него снизу. */
.m-ep { position: relative; }

.m-slide.m-ep__stage {
  position: sticky;                      /* кадр с видео стоит на месте, текст наезжает на него */
  top: 0;
  z-index: 0;
}

/* заголовок поверх размытых видео → через пару секунд блюр рассеивается */
.m-ep__intro {
  inset: 0;
  pointer-events: none;
  background-color: rgba(14, 13, 12, 0.45);
  -webkit-backdrop-filter: blur(calc(12 * var(--m)));
          backdrop-filter: blur(calc(12 * var(--m)));
  transition: background-color 1.4s ease, -webkit-backdrop-filter 1.4s ease, backdrop-filter 1.4s ease, opacity 1.4s ease;
}
.m-ep.is-revealed .m-ep__intro {
  background-color: rgba(14, 13, 12, 0);
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
  opacity: 0;
}

.m-slide > .m-ep__title {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(16 * var(--m));
  font-size: calc(46 * var(--m));
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cream);
  transition: opacity .9s ease, transform 1.4s ease;
}
.m-ep.is-revealed .m-ep__title {
  opacity: 0;
  transform: scale(0.97);
}

/* подсказка «листайте — текст» появляется вместе с видео */
.m-ep__stage .m-hint {
  opacity: 0;
  transform: translateY(calc(8 * var(--m)));
  pointer-events: none;
  transition: opacity .6s ease .6s, transform .6s ease .6s;
}
.m-ep.is-revealed .m-ep__stage .m-hint {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.m-glass.is-fading { opacity: 0; }

/* панель текста: наезжает на видео и размывает их под собой */
.m-slide.m-ep__panel {
  z-index: 2;
  background: rgba(14, 13, 12, 0.62);
  -webkit-backdrop-filter: blur(calc(16 * var(--m)));
          backdrop-filter: blur(calc(16 * var(--m)));
}

/* ---------- Текст главы ----------
   Слайд всегда ровно в экран. Если текст длиннее — он прокручивается
   внутри, а когда дочитан, следующий свайп листает ленту дальше. */
.m-text__body {
  flex: 1 1 0 !important;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: auto;              /* дочитали — свайп переходит к ленте */
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--m));
  padding: calc(24 * var(--m)) 0 calc(8 * var(--m));
}
.m-text__body::-webkit-scrollbar { display: none; }
.m-text__body > * { flex: none; }
/* если текст не влезает — мягко растворяем край, чтобы было видно, что есть продолжение */
.m-text__body.is-scrollable {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40 * var(--m)), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 40 * var(--m)), transparent);
}
.m-text__body.is-scrollable.is-end { -webkit-mask-image: none; mask-image: none; }
.m-kicker,
.m-label,
.m-fact {
  font-size: calc(11 * var(--m));
  font-weight: 500;
  line-height: calc(14 * var(--m));
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.m-kicker { color: rgba(237, 230, 218, 0.75); }
.m-label  { color: rgba(237, 230, 218, 0.55); }
.m-text__title {
  font-size: calc(32 * var(--m));
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--cream);
}
.m-p {
  font-size: calc(15 * var(--m));
  font-weight: 400;
  line-height: 1.56;
  color: rgba(237, 230, 218, 0.9);
}
.m-p.is-strong { font-weight: 500; }
.m-fact {
  display: flex;
  gap: calc(12 * var(--m));
  color: var(--cream);
}
.m-fact__label { color: rgba(237, 230, 218, 0.6); white-space: nowrap; }

/* ---------- Меню: шторка сверху ---------- */
.m-menu {
  position: absolute;
  inset: 0;
  z-index: 20;
  visibility: hidden;
  transition: visibility 0s linear .45s;
}
.m-menu.is-open {
  visibility: visible;
  transition: visibility 0s;
}
.m-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 13, 12, 0.55);
  -webkit-backdrop-filter: blur(calc(6 * var(--m)));
          backdrop-filter: blur(calc(6 * var(--m)));
  opacity: 0;
  transition: opacity .35s ease;
}
.m-menu.is-open .m-menu__backdrop { opacity: 1; }

.m-menu__sheet {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-height: calc(100% - 24 * var(--m));
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--m));
  padding: calc(12 * var(--m)) calc(16 * var(--m)) calc(20 * var(--m));
  border-radius: 0 0 calc(24 * var(--m)) calc(24 * var(--m));
  background: rgba(23, 22, 20, 0.97);
  transform: translateY(-100%);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.m-menu.is-open .m-menu__sheet { transform: none; }

.m-menu__head {
  flex: none;
  height: calc(44 * var(--m));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.m-menu__title {
  font-size: calc(11 * var(--m));
  font-weight: 500;
  line-height: calc(14 * var(--m));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(237, 230, 218, 0.6);
}
.m-close {
  width:  calc(44 * var(--m));
  height: calc(44 * var(--m));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: var(--mline) solid rgba(237, 230, 218, 0.25);
  background: rgba(14, 13, 12, 0.6);
  font-size: calc(16 * var(--m));
  font-weight: 500;
  line-height: 1;
  color: var(--cream);
}

.m-menu__list {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--m));
}
.m-group {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--m));
}
.m-group__label {
  font-size: calc(11 * var(--m));
  font-weight: 500;
  line-height: calc(14 * var(--m));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(237, 230, 218, 0.5);
}

.m-row {
  width: 100%;
  height: calc(62 * var(--m));
  display: flex;
  align-items: center;
  gap: calc(12 * var(--m));
  text-align: left;
}
.m-thumb {
  position: relative;
  flex: none;
  width:  calc(49.6 * var(--m));
  height: calc(62 * var(--m));
  border-radius: calc(4.96 * var(--m));
  background: #2a2724 center / cover no-repeat;
  background-clip: padding-box;
  overflow: hidden;
}
.m-thumb::after {                            /* затемнение неактивных */
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
}
.m-thumb.is-empty { background: #5C574F; }
.m-thumb.is-empty::after { display: none; }

.m-row__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--m));
}
.m-row__num {
  font-size: calc(11 * var(--m));
  font-weight: 500;
  line-height: calc(14 * var(--m));
  letter-spacing: 0.08em;
  color: rgba(237, 230, 218, 0.55);
}
.m-row__title {
  font-size: calc(16 * var(--m));
  font-weight: 500;
  line-height: calc(20 * var(--m));
  color: rgba(237, 230, 218, 0.85);
}

/* текущая глава */
.m-row.is-active .m-thumb {
  border: max(1px, calc(1.86 * var(--m))) solid var(--cream);
}
.m-row.is-active .m-thumb::after { display: none; }
.m-row.is-active .m-row__num,
.m-row.is-active .m-row__title { color: var(--cream); }
.m-row.is-active .m-row__num::before { content: '• '; }

@media (prefers-reduced-motion: reduce) {
  .m-hint__line, .m-arrow { animation: none; }
  .m-ep__intro, .m-ep__title, .m-ep__stage .m-hint { transition-duration: .01s; transition-delay: 0s; }
  .m-menu, .m-menu__sheet, .m-menu__backdrop { transition: none; }
}