/* Блок «Для кого эти занятия»: прилипающая сцена из пяти глав. Крупные строки заголовка выезжают из-под маски, снимки открываются шторой и слегка растут при прокрутке. Шрифты Noto Sans, цвета – чёрный, белый и серый. */
.adv, .adv *, .adv *::before, .adv *::after { box-sizing: border-box; }
/* шрифт и цвет – у самого блока, чтобы он выглядел одинаково на любой странице */
.adv { font-family: 'Noto Sans', Arial, sans-serif; color: #fff; -webkit-font-smoothing: antialiased; }


/* ––– блок: длинная секция, внутри сцена «прилипает» к экрану ––– */
.adv { --n: 5; position: relative; height: calc(100vh + var(--n) * 140vh); height: calc(100svh + var(--n) * 140svh); }
.adv__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: #000;
}

.adv__label {
  position: absolute; top: 4svh; z-index: 5;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #9a9a9a;
}
.adv__label { left: 5vw; }

.adv__dots {
  position: absolute; right: 2.2vw; top: 50%; transform: translateY(-50%); z-index: 5;
  margin: 0; padding: 0; list-style: none; display: grid; gap: 14px;
}
.adv__dots li { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.28); transition: background .3s, transform .3s; }
.adv__dots li.is-on { background: #fff; transform: scale(1.5); }

/* ––– глава: фото, заголовок, текст ––– */
.ch { position: absolute; inset: 0; visibility: hidden; --fs: 8vw; }
.ch--1 { --fs: 9vw; }
.ch--2 { --fs: 10.4vw; }
.ch--3 { --fs: 5.8vw; }
.ch--4 { --fs: 12vw; }
.ch--5 { --fs: 9.6vw; }

.ch__photo {
  position: absolute; top: 11svh; height: 78svh;
  width: min(36vw, 58svh);
  overflow: hidden;
  background: #111;
  will-change: transform, clip-path;
}
.ch--odd .ch__photo { right: 9vw; }
.ch--even .ch__photo { left: 9vw; }
.ch__img {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 132%;
  object-fit: cover; display: block;
  will-change: transform;
}

.ch__mini {
  position: absolute; top: 69svh;
  width: min(10.5vw, 150px); aspect-ratio: 4 / 5;
  overflow: hidden; background: #111; z-index: 2;
  will-change: transform, opacity;
}
.ch--odd .ch__mini { left: 38vw; }
.ch--even .ch__mini { right: 38vw; }
.ch__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ch__num {
  position: absolute; top: 11svh; z-index: 4;
  font-size: 12px; letter-spacing: .2em; color: #9a9a9a;
}
.ch--odd .ch__num { left: 5vw; }
.ch--even .ch__num { right: 5vw; }

.ch__title {
  position: absolute; top: 50%; transform: translateY(-50%);
  margin: 0; z-index: 3;
  font-size: var(--fs); line-height: .98; font-weight: 300;
  letter-spacing: .01em; text-transform: uppercase;
  color: #f0ece6; mix-blend-mode: difference;
}
.ch--odd .ch__title { left: 5vw; text-align: left; }
.ch--even .ch__title { right: 5vw; text-align: right; }
.ln { display: block; overflow: hidden; padding: .07em 0; }
.ln > span { display: block; will-change: transform; }

.ch__text {
  position: absolute; bottom: 9svh; z-index: 4; margin: 0;
  width: min(25vw, 340px);
  font-size: 13.5px; line-height: 1.7; font-weight: 300; color: #d4d4d4;
  will-change: transform, opacity;
}
.ch--odd .ch__text { left: 5vw; }
.ch--even .ch__text { right: 5vw; text-align: right; }

/* ––– телефон ––– */
@media (max-width: 767px), (max-width: 1199px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  .ch--1 { --fs: 14.6vw; }
  .ch--2 { --fs: 15.4vw; }
  .ch--3 { --fs: 9.4vw; }
  .ch--4 { --fs: 20vw; }
  .ch--5 { --fs: 15vw; }
  .ch__photo { left: 5vw !important; right: auto !important; top: 9svh; height: 42svh; width: 90vw; }
  .ch__mini { display: none; }
  .ch__num { top: 9svh; left: 7vw !important; right: auto !important; color: #fff; mix-blend-mode: difference; }
  .ch__title {
    left: 5vw !important; right: auto !important; text-align: left !important;
    top: 55svh; transform: none;
  }
  .ch__text { left: 5vw !important; right: auto !important; text-align: left !important; width: 90vw; bottom: 5svh; font-size: 13px; }
  .adv__dots { display: none; }
  .adv__label { top: 3svh; }
}

/* без анимации: просто по очереди, без прилипания */
.adv--static { height: auto; }
.adv--static .adv__stage { position: relative; height: auto; overflow: visible; }
.adv--static .ch { position: relative; visibility: visible; height: 100svh; }
.adv--static .adv__dots { display: none; }

/* ––– последний экран: без фото, по центру, с кнопкой ––– */
.ch--end { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4svh; padding: 0 5vw; text-align: center; }
.ch--end .ch__num { left: 50%; right: auto; transform: translateX(-50%); top: 12svh; }
.ch--end .ch__title { position: static; transform: none; text-align: center; mix-blend-mode: normal; }
.ch--end .ch__text { position: static; width: min(560px, 88vw); text-align: center; font-size: 15px; }
.ch--end .ch__text p { margin: 0 0 14px; }
.ch--end .ch__loc { color: #8f8f8f; font-size: 12.5px; letter-spacing: .02em; }
.ch--end .kl-mbtn { margin: 26px auto 0 !important; }
@media (max-width: 767px), (max-width: 1199px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  .ch--end .ch__num { top: 10svh; left: 50% !important; }
  .ch--end .ch__text { font-size: 14px; bottom: auto; width: 90vw; text-align: center !important; left: auto !important; }
}

/* ролик в блоке «Для кого эти занятия» ведёт себя как фотография */
.ch__video { object-fit: cover; background: #111; }
/* Все кадры показываем в одной рамке: снимки с айфона приходят в двух
   пропорциях (3:4 и 9:16), и раньше размер скакал от кадра к кадру.
   Теперь рамка одна, 3:4, а снимок заполняет её по центру. */
/* Глава «Подготовка к выступлению»: широкий кадр слева, вертикальный
   справа, между ними чёрный промежуток. Текст ложится на широкий кадр
   с выворотом – тем же приёмом, что и крупные буквы. */
@media (min-width: 1200px) and (min-height: 501px), (min-width: 768px) and (orientation: landscape) and (min-height: 501px) {
  .adv .ch--3 .ch__photo--wide { left: 5vw; right: auto; top: 30svh;
    width: 47vw; aspect-ratio: 4 / 3; max-height: none; }
  /* Правый снимок показываем целиком, в его собственных пропорциях:
     без рамки, которая увеличивала и обрезала кадр. */
  .adv .ch--3 .ch__photo2 { position: absolute; right: 5vw; top: 16svh;
    width: 24vw; aspect-ratio: 941 / 1672; overflow: hidden; background: #000; z-index: 2; margin: 0;
    will-change: transform, clip-path; }
  .adv .ch--3 .ch__photo2 img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    object-fit: cover; display: block; will-change: transform; }
  .adv .ch--3 { --fs: 8.6vw; }
  /* «Подготовка» ложится на границу чёрного поля и снимка, «к выступлению»
     уходит на сам снимок – наложение сильное, как просил Михаил. */
  .adv .ch--3 .ch__title { top: 32%; transform: translateY(-50%); }
  .adv .ch--3 .ch__text { top: 62%; left: 9vw; width: min(36vw, 440px);
    mix-blend-mode: difference; color: #f0ece6; text-shadow: none; }
}
/* «В разное время обучались» – две ленты: верхняя едет влево,
   нижняя вправо, обе одновременно. */
#klAlumni .kl-row { overflow: hidden; }
#klAlumni .kl-row--bottom { margin-top: 26px; }
#klAlumni .kl-row--bottom .kl-projects__track { animation-direction: reverse !important; }
#klAlumni .kl-row .kl-projects__track { animation-duration: 54s !important; }
/* Первая глава: фраза «Мои ученицы…» – под словом «слышно», на чёрном
   поле, вплотную к снимку, но не заходя на него. */
@media (min-width: 1200px) and (min-height: 501px), (min-width: 768px) and (orientation: landscape) and (min-height: 501px) {
  .adv .ch--1 .ch__text { left: 5vw !important; right: calc(9vw + min(41vw, 64svh) + 28px);
    top: calc(76% + 46px); width: auto; mix-blend-mode: normal; color: #fff; }
}
/* Вторая глава: мелкий текст справа, под словом «себя», с отступом
   вниз – чтобы не наезжать ни на заголовок, ни на снимок. */
@media (min-width: 1200px) and (min-height: 501px), (min-width: 768px) and (orientation: landscape) and (min-height: 501px) {
  .adv .ch--2 .ch__text { left: auto !important; right: 5vw !important;
    top: calc(50% + 10.4vw + 96px); width: min(30vw, 400px); text-align: right;
    mix-blend-mode: normal; color: #fff; }
}
/* Кадры в блоке сменяются по кругу: следующий открывается шторой снизу
   вверх поверх текущего, рамка плавно подстраивается под его формат. */
.adv .ch__photo .ch__cycle { clip-path: inset(100% 0 0 0); z-index: 1; }
.adv .ch__photo .ch__cycle.is-cur { clip-path: inset(0 0 0 0); z-index: 2; }
.adv .ch__photo .ch__cycle.is-in { clip-path: inset(0 0 0 0); z-index: 3;
  transition: clip-path 1.15s cubic-bezier(.22,.61,.36,1); }
.adv .ch__photo.is-resizing { transition: height 1.15s cubic-bezier(.22,.61,.36,1); }
/* по нажатию на снимок сразу открывается следующий (for-whom-1.js) */
.adv .ch__photo.is-clickable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* крупный заголовок главы на компьютере лежит поверх снимка – пропускаем
   нажатия сквозь него к фото (ссылок в заголовках нет) */
.adv .ch__title { pointer-events: none; }
.adv .ch__photo.is-clickable:focus-visible { outline: 2px solid #e00000; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .adv .ch__photo .ch__cycle.is-in { transition: none; } }
/* телефон: кадры сменяются раз в 2 с, штора спокойная – 1,2 с, мягкий разгон
   и мягкая остановка (for-whom-1.js ставит is-snap) */
.adv .ch__photo.is-snap .ch__cycle.is-in { transition: clip-path 1.2s cubic-bezier(.45,.05,.25,1); }
@media (prefers-reduced-motion: reduce) { .adv .ch__photo.is-snap .ch__cycle.is-in { transition: none; } }
/* Углы у всех снимков скруглены так же, как у плашек с ценами – 5 точек */
.adv .ch__photo, .adv .ch__photo2 { border-radius: 5px; }
/* номер главы слева убран по просьбе Михаила */
.adv .ch__num { display: none !important; }
.adv .ch__photo { background: #000; aspect-ratio: 3 / 4; height: auto; top: 9svh;
  width: min(41vw, 64svh); }
@media (max-width: 767px), (max-width: 1199px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  /* на телефоне кадр крупный, но в той же рамке 3:4 */
  .adv .ch__photo { width: min(72vw, 40svh) !important; height: auto !important; top: 8svh; max-height: 46svh; }
}
.adv .ch__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Заголовок из трёх строк наезжал на текст внизу. Поднимаем заголовок
   и чуть уменьшаем его в первой главе, а текст опускаем ниже. */
@media (min-width: 1200px) and (min-height: 501px), (min-width: 768px) and (orientation: landscape) and (min-height: 501px) {
  /* Текст заходит краем на фотографию: так блок читается цельно, а не
     двумя отдельными колонками. Чтобы буквы не терялись на светлых
     местах снимка, под ними мягкая тень. */
  /* Маленький текст заходит на снимок так же, как заголовок: не «поверх
     с тенью», а со смешением – на тёмном он светлый, на светлом
     выворачивается. Приём тот же, что у крупных букв. */
  .adv .ch__text { z-index: 6; width: min(34vw, 430px); top: 64%; bottom: auto;
    color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.8); }
  /* маленький снимок крупнее: крупные буквы заезжают на него при прокрутке */
  .adv .ch__mini { width: min(17vw, 250px); top: 60svh; z-index: 2; }
  .adv .ch--odd .ch__text { left: 38vw; }
  .adv .ch--even .ch__text { right: 38vw; }
  .adv .ch--1 .ch__text, .adv .ch--3 .ch__text { bottom: auto; }
}
/* Финальная глава: рассказ о себе слева, ролик справа. */
@media (min-width: 1200px) and (min-height: 501px), (min-width: 768px) and (orientation: landscape) and (min-height: 501px) {
  .ch--me { display: block; text-align: left; padding: 0; }
  .ch--me .ch__photo { display: block; right: 9vw; left: auto; }
  .ch--me .ch__num { left: 5vw; right: auto; transform: none; top: 11svh; }
  /* заголовок здесь короче и стоит выше, чтобы рассказ под ним помещался целиком */
  .ch--me .ch__title { position: absolute; left: 5vw; top: 18%; transform: none; text-align: left;
    font-size: clamp(38px, 6.4vw, 96px); }
  .ch--me .ch__text { position: absolute; left: 5vw; top: 46%; width: min(460px, 38vw); text-align: left; }
  .ch--me .kl-mbtn { margin: 22px 0 0 !important; }
}

/* Кнопка «Записаться на урок» в последней главе блока: на 20% меньше
   (на телефоне остаётся общий размер кнопок), при наведении круг
   заливается красным, текст и стрелка – чёрные. */
@media (min-width: 1200px) and (min-height: 501px), (min-width: 768px) and (orientation: landscape) and (min-height: 501px) {
  .adv .ch--5 .kl-mbtn { --k: .8; }
}
.adv .ch--5 .kl-mbtn.is-on .kl-mbtn__circle,
.adv .ch--5 .kl-mbtn:hover .kl-mbtn__circle { background: #e00000; }
.adv .ch--5 .kl-mbtn.is-on .kl-mbtn__text,
.adv .ch--5 .kl-mbtn:hover .kl-mbtn__text { color: #000 !important; }

/* Тексты глав проявляются по словам, одно за другим, – спокойно, чтобы
   взгляд успевал читать. Слово выходит из лёгкого размытия и чуть
   поднимается. Разбивку на слова делает for-whom-1.js. */
.adv .ch__sent { display: inline; }
.adv .ch__sent--block { display: block; }
.adv .ch__w { display: inline-block; opacity: 0; filter: blur(3px); transform: translateY(5px);
  transition: opacity .7s ease, filter .7s ease, transform .7s ease; }
.adv .ch__w.is-in { opacity: 1; filter: none; transform: none; }
@media (prefers-reduced-motion: reduce) { .adv .ch__w { opacity: 1; filter: none; transform: none; transition: none; } }
/* на компьютере текст глав крупнее и плотнее – было плохо видно */
@media (min-width: 1200px) and (min-height: 501px), (min-width: 768px) and (orientation: landscape) and (min-height: 501px) {
  .adv .ch__text { font-size: 15.5px !important; font-weight: 400 !important; }
}

/* Тексты всех глав – широкой строкой, как в «Красоте, которую слышно»:
   от края заголовка до снимка, белые, на чёрном поле. */
@media (min-width: 1200px) and (min-height: 501px), (min-width: 768px) and (orientation: landscape) and (min-height: 501px) {
  .adv .ch--2 .ch__text { left: calc(9vw + min(41vw, 64svh) + 28px) !important; right: 5vw !important;
    width: auto; text-align: right; }
  .adv .ch--3 .ch__text { left: 5vw !important; right: calc(5vw + 24vw + 28px) !important; width: auto;
    top: calc(30svh + 47vw * .75 + 26px); mix-blend-mode: normal; color: #fff; text-align: left; }
  .adv .ch--4 .ch__text { left: calc(9vw + min(41vw, 64svh) + 28px) !important; right: 5vw !important;
    width: auto; top: 68%; bottom: auto; text-align: right; mix-blend-mode: normal; color: #fff; }
  .adv .ch--5 .ch__text { left: 5vw !important; right: calc(9vw + min(41vw, 64svh) + 28px) !important;
    width: auto; }
}

/* Глава «Михаил Касымов»: сначала обложка – снимок Михаила, через три
   секунды она плавно растворяется и начинается ролик. Рамка – в формате
   обложки 4:5, чтобы снимок был виден целиком. */
.adv .ch__photo--cover { aspect-ratio: 4 / 5; }
.adv .ch__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; z-index: 3; opacity: 1; transition: opacity 1.3s ease; will-change: opacity, transform; }
.adv .ch__cover.is-off { opacity: 0; }
/* кнопка-динамик поверх обложки и ролика; нажатие на ролик тоже включает звук */
.adv .ch__photo.has-sound { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.adv .ch__photo .ch__sound { z-index: 4; }

/* ––– Телефон: лента глав –––
   На телефоне сцена не прилипает: главы идут одна под другой, как обычная
   лента. Снимок – на всю ширину и целиком, под ним заголовок и текст.
   Каждая глава появляется, когда до неё долистали: снимок открывается
   шторой, строки заголовка выезжают, текст пишется по словам. Так
   прокрутка остаётся лёгкой – телефону не нужно пересчитывать сцену
   на каждом движении пальца. */
@media (max-width: 767px), (max-width: 1199px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  .adv { height: auto !important; }
  .adv__stage { position: static !important; height: auto !important; overflow: visible !important; }
  .adv__dots, .adv .ch__num { display: none !important; }
  .adv .ch { position: relative !important; inset: auto !important; visibility: visible !important;
    display: flex !important; flex-direction: column; align-items: stretch; padding: 0 5vw 13svh !important;
    gap: 2.4svh; text-align: left; }
  .adv .ch > .ch__photo, .adv .ch > .ch__title, .adv .ch > .ch__text {
    position: relative !important; inset: auto !important; left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important; margin: 0 !important; transform: none !important; }
  /* снимок – на всю ширину, все кадры в одной рамке 9:16 */
  .adv .ch > .ch__photo { width: 100% !important; height: auto !important; max-height: none !important;
    aspect-ratio: 9 / 16 !important;
    clip-path: inset(100% 0 0 0) !important; transition: clip-path 1.1s cubic-bezier(.22,.61,.36,1); }
  .adv .ch.is-seen > .ch__photo { clip-path: inset(0 0 0 0) !important; }
  .adv .ch > .ch__photo .ch__img { transform: none !important; }
  .adv .ch > .ch__photo .ch__cycle { object-fit: contain; }
  .adv .ch--3 > .ch__photo--wide { aspect-ratio: 9 / 16 !important; }
  .adv .ch--3 > .ch__photo2 { display: none !important; }
  /* последняя глава: рамка под ролик 9:16, обложка видна целиком внутри */
  .adv .ch--5 > .ch__photo--cover { aspect-ratio: 9 / 16 !important; }
  .adv .ch--5 .ch__cover { object-fit: contain; background: #000; transform: none !important; }
  /* заголовок: строки выезжают снизу одна за другой */
  .adv .ch > .ch__title { width: 100%; text-align: left !important; mix-blend-mode: normal !important;
    font-size: clamp(34px, 11vw, 52px) !important; line-height: 1 !important; }
  .adv .ch > .ch__title .ln:nth-child(2) { font-size: 1em; }
  /* Первая глава на телефоне: «Красота,» – отдельной строкой во всю ширину
     экрана, «которую слышно» – второй строкой целиком и помельче. */
  .adv .ch--1 > .ch__title { letter-spacing: 0 !important; margin-right: -3vw !important; }
  .adv .ch--1 > .ch__title .ln:nth-child(1) { font-size: 1.85em; }
  /* на телефоне после «Красота» запятой нет – у края экрана она смотрится некрасиво */
  .adv .ch--1 .ch__comma { display: none; }
  .adv .ch--1 > .ch__title .ln:nth-child(2),
  .adv .ch--1 > .ch__title .ln:nth-child(3) { display: inline-block; vertical-align: top; font-size: .85em; }
  /* Главы «Петь для себя», «Подготовка к выступлению» и «Артист» – тем же
     приёмом: первое слово крупно отдельной строкой, продолжение ниже.
     «Петь» и «Артист» – того же размера, что «Красота»; «Подготовка»
     длиннее и крупно заполняет ширину экрана, «к выступлению» – чуть мельче. */
  .adv .ch--2 > .ch__title, .adv .ch--3 > .ch__title, .adv .ch--4 > .ch__title {
    letter-spacing: 0 !important; margin-right: -3vw !important; }
  .adv .ch--2 > .ch__title .ln:nth-child(1), .adv .ch--4 > .ch__title .ln:nth-child(1) { font-size: 1.85em; }
  .adv .ch--2 > .ch__title .ln:nth-child(2) { font-size: .85em; }
  .adv .ch--3 > .ch__title .ln:nth-child(1) { font-size: 1.24em; }
  .adv .ch--3 > .ch__title .ln:nth-child(2) { font-size: .96em; }
  .adv .ch > .ch__title .ln > span { transform: translate3d(0, 110%, 0) !important;
    transition: transform .9s cubic-bezier(.22,.61,.36,1); }
  .adv .ch.is-seen > .ch__title .ln > span { transform: none !important; }
  .adv .ch.is-seen > .ch__title .ln:nth-child(2) > span { transition-delay: .08s; }
  .adv .ch.is-seen > .ch__title .ln:nth-child(3) > span { transition-delay: .16s; }
  /* текст: 17.10.2026 его просьба «убери анимацию, пусть сразу текст будет» – на телефоне слова видны сразу, без проявления (на компьютере анимация осталась) */
  .adv .ch > .ch__text { width: 100% !important; text-align: left !important; font-size: 15px !important;
    line-height: 1.55 !important; mix-blend-mode: normal !important; color: #fff !important; opacity: 1 !important; }
  .adv .ch__w { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
  .adv .ch--5 > .ch__text p { margin: 0 0 10px; }
  .adv .ch--5 .kl-mbtn { margin: 14px 0 0 !important; }
}

/* Планшет в вертикальном положении и телефон, повёрнутый набок, получают ту же
   ленту глав, что и телефон: сцена рассчитана на широкий невысокий экран и на
   высоком планшете занимала только верхнюю половину, а на низком экране
   повёрнутого телефона текст уходил за нижний край. Чтобы снимок целиком
   помещался на экране, рамка ограничена по высоте, а пропорции снимка
   остаются своими. На обычном телефоне ничего не меняется. */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  .adv .ch > .ch__photo { width: min(100%, 46svh) !important; }
  .adv .ch--3 > .ch__photo--wide { width: min(100%, 46svh) !important; }
  .adv .ch--5 > .ch__photo--cover { width: min(100%, 46svh) !important; }
}

/* «Подготовка к выступлению» на компьютере: текст – справа от снимка,
   в чёрном поле под заголовком, столбиком: каждое предложение с новой
   строки (просьба Михаила – раньше текст ложился на сам снимок). */
@media (min-width: 1200px) and (min-height: 501px), (min-width: 768px) and (orientation: landscape) and (min-height: 501px) {
  .adv .ch--3 .ch__text { left: calc(52vw + 48px) !important; right: auto !important;
    width: min(26vw, 360px) !important; top: 58% !important; text-align: left; }
  .adv .ch--3 .ch__sent { display: block; }
  .adv .ch--3 .ch__sent + .ch__sent { margin-top: 12px; }
}

/* Тексты глав – на матовой серой подложке (по его просьбе), чтобы лучше
   читались поверх фото: полупрозрачный серый фон с размытием того, что под
   ним, – как у матовой панели меню. */
.adv .ch__text {
  box-sizing: border-box;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(28, 28, 28, .55);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
}
.adv .ch--end .ch__text { padding: 18px 22px; }
/* Компьютер: подложки нет (27.09.2026 он попросил убрать её совсем) –
   только тонкая красная линия сбоку у текста, которая медленно загорается
   и почти гаснет, как черта у цитат на страницах проектов (pkQuoteLine).
   Линия – с той стороны, где начинается текст. */
@media (min-width: 1200px) and (min-height: 501px), (min-width: 768px) and (orientation: landscape) and (min-height: 501px) {
  .adv .ch__text, .adv .ch--end .ch__text { padding: 4px 0 4px 20px; border: 0; border-radius: 0; background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  .adv .ch__text::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
    background: #e00000; animation: advTextLine 5s ease-in-out infinite; }
  .adv .ch--even .ch__text { padding: 4px 20px 4px 0; }
  .adv .ch--even .ch__text::before { left: auto; right: 0; }
}
@keyframes advTextLine { 0%, 100% { opacity: .18; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .adv .ch__text::before { animation: none; opacity: .85; } }
/* На телефоне подложки нет (27.09.2026 он попросил убрать её с телефона,
   на компьютере оставить). */
@media (max-width: 767px), (max-width: 1199px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  .adv .ch__text, .adv .ch--end .ch__text { padding: 0; border-radius: 0; background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* 22.10.2026 (его просьба «красные полосы как в десктопе добавить в мобильную версию»): тонкая красная линия слева у текста глав, медленно мигает, как на компьютере */
  .adv .ch > .ch__text, .adv .ch--end > .ch__text { padding: 3px 0 3px 14px !important; }
  .adv .ch > .ch__text::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
    background: #e00000; animation: advTextLine 5s ease-in-out infinite; }
}

/* Кнопка «Записаться на урок» в последней главе на телефоне – белая с
   чёрной надписью, без кружка со стрелкой (как кнопки страницы Дубая). */
@media (max-width: 767px), (max-width: 1199px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  .adv .ch--5 .kl-mbtn { width: auto !important; height: 48px !important; padding: 0 26px !important;
    display: inline-flex !important; align-items: center; justify-content: center; align-self: flex-end; /* 05.10.2026: у правого края, «Узнать подробнее» → /vokal/ */
    border: 0 !important; border-radius: 6px !important; background: #fff !important;
    transition: background .2s ease; }
  .adv .ch--5 .kl-mbtn .kl-mbtn__circle, .adv .ch--5 .kl-mbtn .kl-mbtn__icon { display: none !important; }
  .adv .ch--5 .kl-mbtn .kl-mbtn__text { position: static !important; transform: none !important;
    padding: 0 !important; margin: 0 !important; color: #000 !important; font-size: 15px !important;
    font-weight: 600 !important; letter-spacing: 0 !important; white-space: nowrap; }
  .adv .ch--5 .kl-mbtn:active { background: #e6e6e6 !important; }
  /* до правого края экрана (05.10.2026, его просьба) */
  .adv .ch--5 .kl-mbtn { display: flex !important; width: max-content !important; max-width: 100%; margin-left: auto !important; margin-right: 0 !important; }
  /* 01.10.2026, его просьба: кнопка проявляется мягко, когда мелкий текст
     над ней уже написан целиком (класс kl-mbtn--wait ставит for-whom-1.js) */
  .adv .ch--5 .kl-mbtn { transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.22,.61,.36,1), background .2s ease; }
  .adv .ch--5 .kl-mbtn.kl-mbtn--wait { opacity: 0; transform: translateY(10px) !important; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .adv .ch--5 .kl-mbtn { transition: none !important; } }

/* «Подготовка к выступлению», компьютер (27.09.2026, просьба Михаила):
   снимки не обрезаем – каждый целиком, в своих пропорциях (3:2, 4:3, 16:9),
   прижат к верхнему левому углу, по бокам и снизу – чёрное поле сцены.
   Рамка шире – до буквы «И» в «к выступлению»; по высоте не выходит за
   экран. Текст – справа от снимка. Углы снимка не скругляем. */
@media (min-width: 1200px) and (min-height: 501px), (min-width: 768px) and (orientation: landscape) and (min-height: 501px) {
  .adv .ch--3 { --w: min(66vw, 106svh); }
  .adv .ch--3 .ch__photo--wide { left: 5vw !important; right: auto !important; top: 14svh !important;
    width: var(--w) !important; aspect-ratio: 4 / 3 !important; height: auto !important; max-height: none !important;
    border-radius: 0; background: transparent; }
  .adv .ch--3 .ch__photo--wide .ch__img { object-fit: contain; object-position: left top; }
  .adv .ch--3 .ch__text { left: calc(5vw + var(--w) + 32px) !important; right: 4vw !important; width: auto !important; }
}

/* 07.10.2026, его просьба: фразы-подписи во всех пяти главах (начиная с «90 процентов моих учеников…») – заглавными буквами */
.adv .ch__sent { text-transform: uppercase; letter-spacing: .04em; }

/* Кнопка «Записаться на урок» в главе «Михаил Касымов» на компьютере (12.10.2026, его выбор – вариант 4 «Эхо» из 12 кнопок без подложки,
   «вместо этой кнопки поставь вариант 4»): без рамки, кружка и стрелки – одна надпись заглавными, от неё расходятся и тают её копии.
   На телефоне кнопка прежняя (белая «Узнать подробнее» → /vokal/). */
@media (min-width: 1200px) and (min-height: 501px), (min-width: 768px) and (orientation: landscape) and (min-height: 501px) {
  .adv .ch--5 .kl-mbtn.kl-mbtn--echo { display: inline-block !important; width: auto !important; height: auto !important; padding: 16px 0 !important;
    border: 0 !important; border-radius: 0 !important; overflow: visible !important; }
  .adv .ch--5 .kl-mbtn.kl-mbtn--echo .kl-mbtn__circle,
  .adv .ch--5 .kl-mbtn.kl-mbtn--echo .kl-mbtn__icon { display: none !important; }
  .adv .ch--5 .kl-mbtn.kl-mbtn--echo .kl-mbtn__text,
  .adv .ch--5 .kl-mbtn.kl-mbtn--echo:hover .kl-mbtn__text,
  .adv .ch--5 .kl-mbtn.kl-mbtn--echo.is-on .kl-mbtn__text { position: relative; top: auto; left: auto; margin: 0; display: inline-block; transform: none;
    color: #fff !important; font-size: 16px; font-weight: 600; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }
  /* 21.10.2026, его слово «удали» (картинка с расходящимися копиями надписи): «эхо» – бледные копии, расходящиеся от надписи, – убрано; остаётся одна белая надпись-ссылка */
}
/* 16.10.2026, его слова «именно это сделай белым цветом»: первая фраза главы «Михаил Касымов» – чисто белая (остальной текст глав #d4d4d4) */
.adv .ch__sent--lead, .adv .ch__sent--lead .ch__w { color: #ffffff; }
/* 16.10.2026: цвет слов меняется плавно (прожектор, chapter-spotlight-1.js); остальные переходы те же */
@media (hover: hover) and (pointer: fine) { .adv .ch__w { transition: opacity .7s ease, filter .7s ease, transform .7s ease, color .18s linear; } }


/* 22.10.2026, его слова «сделай эти тексты в блоках сразу яркими, полоску красную не мигающую, а статичную, и шрифт чуть более жирным» (снимок с компьютера):
   на компьютере тексты глав видны сразу (без проявления по словам) и белые, красная линия сбоку горит ровно, шрифт 500 вместо 400.
   «Прожектор» (chapter-spotlight-1.js) отключён в index.html – он приглушал слова под мышкой. Телефон не менялся. */
@media (min-width: 1200px) and (min-height: 501px), (min-width: 768px) and (orientation: landscape) and (min-height: 501px) {
  .adv .ch__text { font-weight: 500 !important; color: #fff !important; }
  .adv .ch__w { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; color: #fff !important; }
  .adv .ch__text::before { animation: none !important; opacity: 1 !important; }
}

/* 22.10.2026, его слова: под первой фразой главы «Михаил Касымов» – «Артисты, которых вы слышите по радио, доверяют мне свой голос. Доверьте и вы.»,
   справа – небольшая кнопка-надпись «Подробнее о Михаиле» в стиле прежней «Ваш голос в надёжных руках» (белая, заглавные, без рамки и кружка) → /vokal/ */
.adv .ch--5 .ch__sent--lead + .ch__sent { margin-top: 14px; }
.adv .ch--5 .ch__more { margin-top: 18px; text-align: left; }   /* 22.10.2026: слева, у красной линии (было справа) */
@media (min-width: 1200px) and (min-height: 501px), (min-width: 768px) and (orientation: landscape) and (min-height: 501px) {
  /* 22.10.2026 вечером, его выбор – вариант 3 «Одна форма» (по мотивам @twoclipping): в покое – белая надпись; при наведении вокруг неё
     с пружинкой вырастает тонкая белая капсула и появляется черта-стрелка. Красная черта снизу снята. */
  .adv .ch--5 .ch__more .kl-mbtn--more { position: relative !important; display: inline-flex !important; align-items: center; margin: 0 !important; padding: 13px 26px !important;
    transition: padding .5s cubic-bezier(.34,1.4,.64,1); }
  .adv .ch--5 .ch__more .kl-mbtn--more .kl-mbtn__text { font-size: 15px !important; letter-spacing: .12em; padding: 0; border: 0; }
  .adv .ch--5 .ch__more .kl-mbtn--more .mm-cap { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; transform: none; pointer-events: none;
    transition: border-color .5s cubic-bezier(.34,1.4,.64,1), transform .5s cubic-bezier(.34,1.4,.64,1); }
  .adv .ch--5 .ch__more .kl-mbtn--more .mm-dash { display: inline-block; width: 22px; height: 1px; margin-left: 14px; background: #fff; transition: width .45s cubic-bezier(.22,1,.36,1), margin .45s; }
  .adv .ch--5 .ch__more .kl-mbtn--more:hover, .adv .ch--5 .ch__more .kl-mbtn--more:focus-visible { padding: 13px 26px !important; }
  .adv .ch--5 .ch__more .kl-mbtn--more:hover .mm-cap, .adv .ch--5 .ch__more .kl-mbtn--more:focus-visible .mm-cap { border-color: rgba(255,255,255,.55); transform: none; }
  .adv .ch--5 .ch__more .kl-mbtn--more:hover .mm-dash, .adv .ch--5 .ch__more .kl-mbtn--more:focus-visible .mm-dash { width: 22px; margin-left: 14px; }
}
@media (max-width: 767px), (max-width: 1199px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  /* телефон: наведения нет – кнопка сразу в раскрытом виде (тонкая белая капсула и черта-стрелка), слева */
  .adv .ch--5 .ch__more .kl-mbtn--more { position: relative !important; display: inline-flex !important; align-items: center; width: auto !important; height: auto !important;
    margin: 0 auto 0 0 !important; padding: 13px 24px !important; background: transparent !important; border: 0 !important; border-radius: 999px !important; }
  .adv .ch--5 .ch__more .kl-mbtn--more .kl-mbtn__text { position: static !important; transform: none !important; color: #fff !important; font: 600 13px/1 'Noto Sans', Arial, sans-serif !important; letter-spacing: .12em !important; text-transform: uppercase !important; }
  .adv .ch--5 .ch__more .kl-mbtn--more .kl-mbtn__circle, .adv .ch--5 .ch__more .kl-mbtn--more .kl-mbtn__icon { display: none !important; }
  .adv .ch--5 .ch__more .kl-mbtn--more .mm-cap { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; pointer-events: none; }
  .adv .ch--5 .ch__more .kl-mbtn--more .mm-dash { display: inline-block; width: 20px; height: 1px; margin-left: 12px; background: #fff; }
}
@media (prefers-reduced-motion: reduce) { .adv .ch--5 .ch__more .kl-mbtn--more, .adv .ch--5 .ch__more .kl-mbtn--more * { transition: none !important; } }
/* 23.10.2026 (его слова «кнопку «Подробнее о Михаиле» сразу сделай такой» к снимку с наведением): на компьютере капсула и черта видны сразу, не только при наведении; при наведении капсула чуть ярче */
@media (min-width: 1200px) and (min-height: 501px), (min-width: 768px) and (orientation: landscape) and (min-height: 501px) {
  .adv .ch--5 .ch__more .kl-mbtn--more:hover .mm-cap, .adv .ch--5 .ch__more .kl-mbtn--more:focus-visible .mm-cap { border-color: #fff; }
}