/* ============================================================
   СТРАНИЦА «О ПРОЕКТЕ» timesavervfx.com/about/
   Встраиваемый фрагмент. Токены наследуются из .tsv-root
   (design/tokens.css) — внутри ничего глобального не объявляем.
   Все селекторы заскоуплены под .tsv-about, включая ресет и медиа.

   Структура: герой → кто ведёт курсы → работа до курсов (дорожка,
   единственное прерывание фона) → как принято работать → что есть
   в проекте → куда дальше.

   Заголовок первого уровня стилизован ПО КЛАССУ .tsv-about-h1,
   а не по тегу h1: если тема хоста начнёт выводить свой <h1>,
   наш понижается до <h2> одной правкой разметки — стили не поедут.

   Кнопка на странице ровно одна — в финальном блоке. Всё
   остальное — тихие текстовые ссылки. Микроразметка Person
   в фрагменте не живёт: визуальный редактор WordPress вырезает
   ld+json из контента, поэтому она ставится плагином в шапке страницы.
   ============================================================ */

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

.tsv-about {
    position: relative;
    /* обёртка несёт свой фон и цвет: страница-хост может быть светлой */
    background: var(--tsv-bg);
    color: var(--tsv-fg);
    font-family: var(--tsv-sans);
    font-size: 16px;
    line-height: 1.6;
}

.tsv-about h1,
.tsv-about h2,
.tsv-about h3,
.tsv-about p,
.tsv-about figure { margin: 0; }
.tsv-about ul { margin: 0; padding: 0; list-style: none; }
.tsv-about img { display: block; max-width: 100%; }
.tsv-about a { color: inherit; }

/* Фокус с клавиатуры — одинаковый на всех ссылках, без анимации */
.tsv-about a:focus-visible {
    outline: 2px solid var(--tsv-accent-bright);
    outline-offset: 3px;
}

/* ---------- Общая типографика ---------- */
.tsv-about .tsv-about-kicker {
    display: block;
    margin: 0 0 10px;
    font-family: var(--tsv-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--tsv-accent-bright);
}
.tsv-about h2 {
    font-size: var(--fs-2xl);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--tsv-fg);   /* градиентного <em> в h2 нет ни в одной секции */
}
.tsv-about .tsv-about-lead-sec {
    max-width: 620px;
    margin: 12px 0 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--tsv-fg-dim);
}

/* ---------- Секции и одна full-bleed полоса ---------- */
.tsv-about .tsv-about-section { padding: 48px 24px; }
.tsv-about .tsv-about-inner {
    max-width: 1040px;
    margin: 0 auto;
}
.tsv-about .tsv-about-head { margin: 0 0 24px; }

/* Ленивый рендер: браузер не считает то, что ниже экрана.
   На герое content-visibility НЕ ставим — это первый экран. */
.tsv-about .tsv-about-section,
.tsv-about .tsv-about-band      { content-visibility: auto; }
.tsv-about .tsv-about-s-people  { contain-intrinsic-size: auto 720px; }
.tsv-about .tsv-about-s-works   { contain-intrinsic-size: auto 300px; }
.tsv-about .tsv-about-s-how     { contain-intrinsic-size: auto 560px; }
.tsv-about .tsv-about-s-live    { contain-intrinsic-size: auto 640px; }
.tsv-about .tsv-about-s-final   { contain-intrinsic-size: auto 280px; }

/* ---------- Кадр 16:9 и подпись под ним ---------- */
.tsv-about .tsv-about-shot {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--tsv-radius);
    border: 1px solid var(--tsv-border-soft);
    background: #0e0b12;
    box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.55);
}
.tsv-about .tsv-about-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* грейд трёх сгенерированных кадров; портретов это не касается */
    filter: saturate(0.78) brightness(0.88);
}
.tsv-about .tsv-about-shot::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 6, 18, 0) 55%, rgba(10, 6, 18, 0.55) 100%);
}
/* Подпись стоит под каждым сгенерированным кадром: рядом лежат два
   настоящих портрета, поэтому иллюстрацию важно явно обозначить. */
.tsv-about .tsv-about-cap {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--tsv-fg-mute);
}

/* ============================================================
   1. ГЕРОЙ — content-visibility НЕ ставим, это первый экран.
   Кадр без лица: имена и лица начинаются секцией ниже, и герой
   не должен отдавать первенство одному из двух авторов.
   ============================================================ */
.tsv-about .tsv-about-hero { padding: 56px 48px 40px; }
.tsv-about .tsv-about-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    max-width: 1040px;
    margin: 0 auto;
}
.tsv-about .tsv-about-h1 {
    font-size: clamp(30px, 4.4vw, 44px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.14;
}
/* Градиентный <em> используется на всей странице ровно один раз — здесь */
.tsv-about .tsv-about-h1 em {
    font-style: normal;
    background: linear-gradient(135deg, var(--tsv-accent-bright), #e9d4ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.tsv-about .tsv-about-lead {
    max-width: 560px;
    margin: 14px 0 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--tsv-fg-dim);
}
.tsv-about .tsv-about-facts {
    margin: 18px 0 0;
    font-family: var(--tsv-mono);
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: var(--tsv-fg-mute);
}
/* Место под строку «Проект существует с ____ года» — 13px, --tsv-fg-mute.
   Пока владелец не дал год, строки на странице нет. */
/* Растёт псевдоэлемент, а не сам span: наблюдаемый элемент со scaleX(0)
   имеет нулевую площадь, и IntersectionObserver с порогом 0.4 на нём
   не срабатывает никогда. Внешняя оболочка остаётся во всю ширину. */
.tsv-about .tsv-about-ruler {
    display: block;
    height: 2px;
    max-width: 1040px;
    margin: 32px auto 0;
}
.tsv-about .tsv-about-ruler::after {
    content: "";
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--tsv-accent), transparent);
    transform-origin: left center;
}

/* ============================================================
   2. КТО ВЕДЁТ КУРСЫ — ядро страницы.
   Карточка НЕ является одной большой ссылкой: внутри разные адреса.
   ============================================================ */
.tsv-about .tsv-about-people {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}
.tsv-about .tsv-about-person {
    display: flex;
    flex-direction: column;
    padding: 28px 26px 24px;
    background: var(--tsv-bg-elev);
    border: 1px solid var(--tsv-border);
    border-radius: var(--tsv-radius-lg);
    box-shadow: 0 10px 28px -16px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color var(--dur-base) var(--ease-out);
}
.tsv-about .tsv-about-person-head {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
}
/* Круглая маска обязательна: исходники — круглые вырезки, по углам
   после кропа остаются тёмные дуги. CSS-фильтра здесь нет: грейд
   уже запечён в файлах, второй слой затемнения утопит лица. */
.tsv-about .tsv-about-portrait {
    flex: 0 0 auto;
    display: block;
    width: 168px;
    height: 168px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid var(--tsv-border-soft);
    background: #0e0b12;
}
.tsv-about .tsv-about-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}
.tsv-about .tsv-about-person h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
/* Микро-роль набрана одинаково у обоих — это и есть носитель симметрии */
.tsv-about .tsv-about-role {
    display: block;
    margin-top: 8px;
    font-family: var(--tsv-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--tsv-accent-bright);
}
.tsv-about .tsv-about-person-text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--tsv-fg-dim);
}
.tsv-about .tsv-about-skills {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--tsv-fg-dim);
}
.tsv-about .tsv-about-skills li {
    position: relative;
    padding-left: 14px;
}
.tsv-about .tsv-about-skills li + li { margin-top: 6px; }
.tsv-about .tsv-about-skills li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--tsv-accent-dim);
}
.tsv-about .tsv-about-cred {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--tsv-border-soft);
    font-size: 14px;
    line-height: 1.55;
    color: var(--tsv-fg);
}
.tsv-about .tsv-about-teaches {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--tsv-fg-dim);
}
/* Названия курсов — текстовые ссылки, без рамок и кнопок */
.tsv-about .tsv-about-teaches a {
    color: var(--tsv-accent-bright);
    text-decoration: underline;
    text-decoration-color: var(--tsv-accent-soft);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--dur-base) var(--ease-out);
}
.tsv-about .tsv-about-person-foot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--tsv-border);
}
.tsv-about .tsv-about-person-foot a {
    font-size: 13px;
    color: var(--tsv-accent-bright);
    text-decoration: underline;
    text-decoration-color: var(--tsv-accent-soft);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--dur-base) var(--ease-out);
}
.tsv-about .tsv-about-why {
    max-width: 720px;
    margin: 24px auto 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--tsv-fg-dim);
}

/* ============================================================
   3. РАБОТА ДО КУРСОВ — единственное прерывание фона на странице.
   Названия набраны как клипы на монтажной дорожке: приём чисто
   типографический, логотипов нет ни одного.
   ============================================================ */
.tsv-about .tsv-about-band {
    position: relative;
    /* Полоса идёт во всю ширину фрагмента, а не экрана. Через 100vw нельзя:
       фрагмент встраивается в чужую страницу и вылез бы из её колонки,
       а на десктопе 100vw ещё и включает ширину скроллбара. */
    margin-inline: 0;
    padding: 44px 24px;
    border-block: 1px solid var(--tsv-border-soft);
    background:
        linear-gradient(180deg, rgba(154, 122, 232, 0.05), rgba(154, 122, 232, 0.02)),
        var(--tsv-bg);
}
.tsv-about .tsv-about-band-lead {
    max-width: 620px;
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--tsv-fg-dim);
}
.tsv-about .tsv-about-track-wrap {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 24px;
}
.tsv-about .tsv-about-track-label {
    flex: 0 0 auto;
    font-family: var(--tsv-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--tsv-fg-mute);
}
.tsv-about .tsv-about-track-body {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 1040px;
}
/* Шкала с засечками — без цифр: цифры означали бы даты
   или длительности, которых у нас нет */
.tsv-about .tsv-about-scale {
    height: 10px;
    margin-bottom: 6px;
    opacity: 0.5;
    background: repeating-linear-gradient(90deg,
        rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 8px);
}
.tsv-about .tsv-about-track {
    display: flex;
    /* Клипы набраны nowrap: без переноса их суммарная минимальная ширина
       (~700px) распирала дорожку на планшетных ширинах и выталкивала
       горизонтальную прокрутку всей странице-хосту. На десктопе ряд
       по-прежнему один — переносить нечего. */
    flex-wrap: wrap;
    gap: 3px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tsv-border);
    border-radius: var(--tsv-radius-sm);
}
/* ---------- Список работ внутри карточки автора ---------- */
.tsv-about .tsv-about-works {
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--tsv-border-soft);
}
.tsv-about .tsv-about-works-label {
    display: block;
    margin-bottom: 10px;
    font-family: var(--tsv-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--tsv-fg-mute);
}
.tsv-about .tsv-about-works-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tsv-about .tsv-about-works-note {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--tsv-fg-mute);
}
/* В карточке клипы компактнее полосы: это перечисление, а не дорожка */
.tsv-about .tsv-about-works .tsv-about-clip {
    flex: 0 0 auto;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    font-size: 13px;
}

.tsv-about .tsv-about-clip {
    /* ширины разные — по длине названия, иерархии мы не изобретаем */
    flex: 1 1 auto;
    height: 48px;
    line-height: 48px;
    padding: 0 16px;
    white-space: nowrap;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(154, 122, 232, 0.16), rgba(154, 122, 232, 0.07));
    border-left: 2px solid var(--tsv-accent-dim);   /* «голова клипа» */
    font-size: 14px;
    font-weight: var(--fw-medium);
    color: var(--tsv-fg);
    transition: background var(--dur-base) var(--ease-out),
                border-left-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}
/* «И другие» — хвост списка, а не компания */
.tsv-about .tsv-about-clip--tail {
    flex: 0 1 auto;
    background: none;
    border-left: 0;
    color: var(--tsv-fg-mute);
}
.tsv-about .tsv-about-band-note {
    max-width: 720px;
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--tsv-fg-mute);
}
.tsv-about .tsv-about-band-note + .tsv-about-band-note { margin-top: 8px; }

/* ============================================================
   4 и 5. СПЛИТЫ: кадр слева, текст справа
   ============================================================ */
.tsv-about .tsv-about-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px;
    align-items: start;
}

/* ---------- Как здесь принято работать ---------- */
/* Ни иконок, ни галочек, ни нумерации: галочки превращают факты
   в «преимущества», а преимущества никто не читает */
.tsv-about .tsv-about-hair {
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--tsv-fg-dim);
}
.tsv-about .tsv-about-hair li {
    padding: 14px 0;
    border-top: 1px solid var(--tsv-border-soft);
}
.tsv-about .tsv-about-hair a,
.tsv-about .tsv-about-tail a {
    color: var(--tsv-accent-bright);
    text-decoration: underline;
    text-decoration-color: var(--tsv-accent-soft);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--dur-base) var(--ease-out);
}

/* ---------- Что есть в проекте: опись, а не витрина ---------- */
.tsv-about .tsv-about-index {
    margin-top: 18px;
    /* контейнер описи изолирован: внутри живёт единственная
       повторяющаяся анимация страницы */
    contain: layout style paint;
}
.tsv-about .tsv-about-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 4px 14px;
    align-items: baseline;
    min-height: 56px;
    padding: 14px 0;
    border-top: 1px solid var(--tsv-border);
    transition: border-top-color var(--dur-base) var(--ease-out);
}
.tsv-about .tsv-about-num {
    font-family: var(--tsv-mono);
    font-size: 12px;
    color: var(--tsv-fg-mute);
    transition: color var(--dur-base) var(--ease-out);
}
.tsv-about .tsv-about-row-text {
    font-size: 16px;
    line-height: 1.5;
    color: var(--tsv-fg);
}
.tsv-about .tsv-about-row-note {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tsv-fg-dim);
}
.tsv-about .tsv-about-row-text a {
    color: var(--tsv-accent-bright);
    text-decoration: underline;
    text-decoration-color: var(--tsv-accent-soft);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--dur-base) var(--ease-out);
}
/* Метка «живого» — без слов «регулярно обновляем» и без дат: даты протухают */
.tsv-about .tsv-about-flag {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--tsv-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--tsv-fg-mute);
    white-space: nowrap;
}
.tsv-about .tsv-about-dot {
    position: relative;
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tsv-ok);
}
/* Ореол — псевдоэлементом, а не тенью: тени только с отрицательным spread */
.tsv-about .tsv-about-dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: rgba(87, 194, 144, 0.10);
}
.tsv-about .tsv-about-tail {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--tsv-border-soft);
    font-size: 14px;
    line-height: 1.6;
    color: var(--tsv-fg-dim);
}

/* ============================================================
   6. КУДА ДАЛЬШЕ — framed-карточка без фоновой картинки и без сетки
   ============================================================ */
.tsv-about .tsv-about-final {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 32px;
    text-align: center;
    background: var(--tsv-bg-elev);
    border: 1px solid var(--tsv-border-soft);
    border-radius: var(--tsv-radius-lg);
}
.tsv-about .tsv-about-final-text {
    max-width: 560px;
    margin: 12px auto 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--tsv-fg-dim);
}
/* Кнопка на всей странице ровно одна, и она здесь. Без иконок и стрелок */
.tsv-about .tsv-about-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    padding: 13px 28px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, #a884ec 0%, #7a54cf 100%);
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 26px -14px rgba(122, 84, 207, 0.85);
    transition: background var(--dur-base) var(--ease-out);
}
.tsv-about .tsv-about-quiet {
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--tsv-fg-mute);
}
.tsv-about .tsv-about-quiet + .tsv-about-quiet { margin-top: 6px; }
/* Контакты в конце страницы; без отдельного лендинга и формы. */
.tsv-about .tsv-about-s-contacts { content-visibility: visible; }
.tsv-about .tsv-about-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 24px; }
.tsv-about .tsv-about-contact-card { display: flex; flex-direction: column; min-width: 0; padding: 28px; border: 1px solid var(--tsv-border-soft); border-radius: var(--tsv-radius-lg); background: var(--tsv-bg-elev); }
.tsv-about .tsv-about-contact-card--fx { background: linear-gradient(135deg, color-mix(in srgb, var(--tsv-tone-teal) 9%, var(--tsv-bg-elev)), var(--tsv-bg-elev)); }
.tsv-about .tsv-about-contact-title { margin: 0 0 10px; font-size: 20px; line-height: 1.3; }
.tsv-about .tsv-about-contact-text { margin: 0 0 24px; color: var(--tsv-fg-dim); font-size: 15px; line-height: 1.6; }
.tsv-about .tsv-about-contact-link { display: flex; align-items: center; gap: 12px; min-height: 52px; margin-top: auto; padding: 12px 16px; border: 1px solid var(--tsv-accent-dim); border-radius: var(--tsv-radius-sm); color: var(--tsv-accent-bright); background: var(--tsv-accent-soft); text-decoration: none; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.tsv-about .tsv-about-contact-link > span { min-width: 0; }
.tsv-about .tsv-about-contact-link svg { flex: 0 0 auto; }
.tsv-about .tsv-about-contact-link:hover { border-color: var(--tsv-accent-bright); }
.tsv-about .tsv-about-contact-link:focus-visible { outline: 3px solid var(--tsv-accent-bright); outline-offset: 4px; }
.tsv-about .tsv-about-contact-hint { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--tsv-fg-dim); }
@media (max-width: 699px) {
    .tsv-about .tsv-about-contact-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .tsv-about .tsv-about-contact-card { padding: 22px 18px; }
    .tsv-about .tsv-about-contact-link { font-size: 15px; padding: 12px; }
}
.tsv-about .tsv-about-quiet a {
    color: var(--tsv-fg-dim);
    text-decoration: underline;
    text-decoration-color: var(--tsv-accent-soft);
    text-underline-offset: 3px;
    transition: color var(--dur-base) var(--ease-out);
}

/* ============================================================
   Наведение — только там, где есть настоящий курсор
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
    /* Карточка автора не поднимается: люди не кнопки */
    .tsv-about .tsv-about-person:hover { border-color: var(--tsv-border-soft); }
    .tsv-about .tsv-about-person:hover .tsv-about-portrait img { transform: scale(1.02); }

    .tsv-about .tsv-about-clip:hover {
        background: linear-gradient(180deg, rgba(154, 122, 232, 0.22), rgba(154, 122, 232, 0.13));
        border-left-color: var(--tsv-accent-bright);
        transform: translateY(-1px);
    }
    /* хвост списка не клип — и ведёт себя как текст */
    .tsv-about .tsv-about-clip--tail:hover {
        background: none;
        transform: none;
    }

    .tsv-about .tsv-about-row:hover { border-top-color: var(--tsv-border-soft); }
    .tsv-about .tsv-about-row:hover .tsv-about-num { color: var(--tsv-accent-bright); }
    .tsv-about .tsv-about-row:hover .tsv-about-row-text a { text-decoration-color: var(--tsv-accent-bright); }

    .tsv-about .tsv-about-teaches a:hover,
    .tsv-about .tsv-about-person-foot a:hover,
    .tsv-about .tsv-about-hair a:hover,
    .tsv-about .tsv-about-tail a:hover,
    .tsv-about .tsv-about-row-text a:hover { text-decoration-color: var(--tsv-accent-bright); }

    .tsv-about .tsv-about-quiet a:hover { color: var(--tsv-accent-bright); }

    /* осветление градиента, без сдвига */
    .tsv-about .tsv-about-btn:hover {
        background: linear-gradient(135deg, #b596f0 0%, #8a63dd 100%);
    }
}

/* ============================================================
   Движение. Скрытое состояние линейки живёт только под классом,
   который вешает JS — без JS и при reduce она видна сразу.
   ============================================================ */
.tsv-about.tsv-about--anim .tsv-about-ruler::after {
    transform: scaleX(0);
    transition: transform 700ms var(--ease-out);
}
.tsv-about.tsv-about--anim .tsv-about-ruler.is-in::after { transform: scaleX(1); }

@media (prefers-reduced-motion: no-preference) {
    .tsv-about .tsv-about-dot { animation: tsv-about-pulse 2.4s var(--ease-in-out) infinite; }
    /* пульсация не крутится, пока опись вне экрана */
    .tsv-about .tsv-about-index.is-paused .tsv-about-dot { animation-play-state: paused; }
}

@keyframes tsv-about-pulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .tsv-about *,
    .tsv-about *::before,
    .tsv-about *::after {
        animation: none !important;
        transition: none !important;
    }
    .tsv-about .tsv-about-ruler::after { transform: none !important; }   /* сразу в конечном состоянии */
    .tsv-about .tsv-about-dot { opacity: 1; transform: none !important; }
    .tsv-about .tsv-about-portrait img { transform: none !important; }
}

/* ============================================================
   Брейкпоинты
   ============================================================ */
@media (max-width: 1000px) {
    /* имени автора нужно место рядом с портретом */
    .tsv-about .tsv-about-portrait { width: 120px; height: 120px; }
    .tsv-about .tsv-about-person h3 { font-size: 21px; }
}
@media (max-width: 899px) {
    /* Герой: кадр уходит под текстовый блок */
    .tsv-about .tsv-about-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .tsv-about .tsv-about-lead { max-width: none; }
    /* Карточки авторов — стопкой */
    .tsv-about .tsv-about-people { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .tsv-about .tsv-about-portrait { width: 168px; height: 168px; }
    .tsv-about .tsv-about-person h3 { font-size: 24px; }
}
@media (max-width: 760px) {
    /* Сплиты: кадр сверху во всю ширину, текст под ним */
    .tsv-about .tsv-about-split { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 699px) {
    .tsv-about .tsv-about-section { padding: 36px 16px; }
    .tsv-about .tsv-about-hero { padding: 36px 20px 28px; }
    .tsv-about .tsv-about-band { padding: 36px 16px; }

    /* Мобильные интринсики держим в медиа-выборке, иначе прыгает скроллбар */
    .tsv-about .tsv-about-s-people { contain-intrinsic-size: auto 1180px; }
    .tsv-about .tsv-about-s-works  { contain-intrinsic-size: auto 520px; }
    .tsv-about .tsv-about-s-how    { contain-intrinsic-size: auto 720px; }
    .tsv-about .tsv-about-s-live   { contain-intrinsic-size: auto 1080px; }
    .tsv-about .tsv-about-s-final  { contain-intrinsic-size: auto 340px; }

    .tsv-about .tsv-about-h1 { font-size: 32px; }
    .tsv-about .tsv-about-lead { font-size: 15px; }
    .tsv-about .tsv-about-facts { text-wrap: balance; }
    .tsv-about h2 { font-size: 26px; }
    .tsv-about .tsv-about-lead-sec { font-size: 16px; }

    /* Шапка карточки остаётся горизонтальной: портрет 88px слева */
    .tsv-about .tsv-about-portrait { width: 88px; height: 88px; }
    .tsv-about .tsv-about-person { padding: 22px 18px 20px; }
    .tsv-about .tsv-about-person h3 { font-size: 20px; }

    /* Дорожка компаний: стопкой, без горизонтального скролла —
       в узком контейнере он превратил бы приём в бегущую строку.
       Метка «РАБОТЫ» становится обычным кикером над стопкой. */
    .tsv-about .tsv-about-track-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .tsv-about .tsv-about-scale { display: none; }   /* вертикально шкала бессмысленна */
    .tsv-about .tsv-about-track { flex-direction: column; }
    .tsv-about .tsv-about-clip {
        flex: 0 0 auto;
        height: 44px;
        line-height: 44px;
        border-left-width: 3px;
    }
    .tsv-about .tsv-about-clip--tail { height: auto; line-height: 1.5; padding: 8px 16px; }

    /* Опись: номер и название в первой строке, приписка во второй,
       метка «обновляется» отдельной строкой под ними */
    .tsv-about .tsv-about-row {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 6px;
    }
    .tsv-about .tsv-about-flag {
        grid-column: 1 / -1;
        min-height: 24px;
    }

    /* Финал: кнопка на всю ширину */
    .tsv-about .tsv-about-final { padding: 32px 20px; }
    .tsv-about .tsv-about-btn { display: flex; width: 100%; }
}

/* Индивидуальные студийные портреты: весь кадр, без круглой обрезки. */
.tsv-about .tsv-about-person-head { flex-direction: column; align-items: stretch; }
.tsv-about .tsv-about-portrait { width: 100%; height: auto; aspect-ratio: 1; border-radius: 16px; }
.tsv-about .tsv-about-copy { max-width: 900px; }