/*
  Единая визуальная система трёх страниц.
  Меняйте этот файл для глобальных правок цвета, шрифтов, шапки,
  кнопок, вертикального ритма и мобильной версии.
*/
:root{
  --paper:#fff;
  --ink:#222;
  --blue:#1d2e4f;
  --amber:#1d2e4f;
  --dark-signal:#8d929b;
  --soft:#f2f2f2;
  --card:#f1f1f1;
  --line:rgba(34,34,34,.18);
  --serif:Georgia,"Times New Roman",serif;
  --sans:Arial,Helvetica,sans-serif;
  --content:1540px;
  --page-x:4.2vw;
  --section-y:120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
a:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px}

.skip{position:fixed;z-index:100;left:8px;top:8px;padding:10px 14px;background:var(--ink);color:var(--paper);transform:translateY(-160%)}
.skip:focus{transform:none}

.header{position:sticky;z-index:50;top:0;height:72px;min-height:72px;padding:0 var(--page-x);background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.header-inner{width:100%;max-width:var(--content);height:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand,.brand-line,.header nav,.nav-links{display:flex;align-items:center}
.brand{gap:18px;min-width:0}
.brand-line{gap:18px}
.brand .parent,.brand strong,.brand span,.header .nav-links a,.nav-cta{font-family:var(--sans);font-size:9px;line-height:1.2;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.brand .parent{padding-right:18px;border-right:1px solid var(--line);white-space:nowrap;color:rgba(34,34,34,.72)}
.brand strong{white-space:nowrap}
.brand span{padding-left:18px;border-left:1px solid var(--line);white-space:nowrap}
.header nav{gap:28px}.nav-links{gap:22px}

.nav-cta,.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:38px;padding:0 14px;background:var(--blue);border:1px solid var(--blue);color:var(--paper);font-size:9px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;transition:transform .25s,background .25s}
.button{min-height:50px;padding:15px 19px;background:var(--ink);border-color:var(--ink);font-size:10px}
.nav-cta i{color:rgba(255,255,255,.7);font-style:normal}
.nav-cta:hover,.button:hover{background:var(--ink);border-color:var(--ink);transform:translateY(-2px)}

.section{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.section-head h2,.result-copy h2,.contact h2{font-family:var(--serif);font-weight:400;letter-spacing:-.045em}
.quote-author img{object-fit:cover;filter:grayscale(1)}
.contact,footer{background:var(--ink);color:var(--paper)}

@media(max-width:1100px){.brand span{display:none}}
@media(max-width:720px){
  :root{--page-x:20px;--section-y:72px}
  .header{height:64px;min-height:64px;padding:0 var(--page-x)}
  .header-inner{gap:16px}.brand .parent{display:none}.brand-line{gap:0}
  .brand strong,.nav-cta{font-size:8px;letter-spacing:.1em}
  /* Меню на телефоне было display:none — внутренние страницы становились
     недостижимы. Переносим во вторую строку шапки. Кегль, цвет и регистр
     остаются прежними, меняется только видимость и высота тач-цели. */
  .header{height:auto;min-height:0;padding-top:9px;padding-bottom:7px}
  .header-inner{flex-wrap:wrap;height:auto;row-gap:2px}
  .brand{width:100%}
  .header nav{width:100%;justify-content:space-between;gap:12px}
  .nav-links{display:flex;flex:1;min-width:0;gap:16px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .nav-links::-webkit-scrollbar{display:none}
  .header .nav-links a{white-space:nowrap;min-height:44px;display:flex;align-items:center}
  .nav-cta{min-height:44px;padding:0 11px}.nav-cta i{display:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ============================================================================
   ТИПОГРАФИЧЕСКАЯ ШКАЛА
   На трёх страницах было 73 разных значения font-size (42 фиксированных
   и 29 clamp). Один и тот же h3 набирался пятью кеглями, а служебные
   подписи — семью, от 7px до 11px. Ниже роли сведены к десяти ступеням.
   Гарнитуры и цвета не меняются — только размер и его смысл.

   ступень        было            роль
   --fs-label     7,8,9,10,11     надзаголовки, номера, метки капсом
   --fs-caption   11,12,13        подписи, сноски, пояснения
   --fs-body      13,14,15        текст карточек, списков, пунктов
   --fs-lead      16,17           подзаголовок секции, вводный абзац
   --fs-lead-lg   19,20,21,22     крупный вводный, подзаголовок аккордеона
   --fs-title-sm  23,24,25,26,27  заголовок карточки
   --fs-title     28,29,31        заголовок блока
   --fs-title-lg  35,36,37,38,40  заголовок крупного блока
   ============================================================================ */
:root{
  --fs-label:11px;
  --fs-caption:13px;
  --fs-body:15px;
  --fs-lead:17px;
  --fs-lead-lg:clamp(18px,1.6vw,20px);
  --fs-title-sm:clamp(21px,2vw,25px);
  --fs-title:clamp(24px,2.4vw,31px);
  --fs-title-lg:clamp(28px,3vw,38px);
}

/* --- Метки капсом: было 7-10px, стало 11px --------------------------------- */
.brand .parent,.brand span,
.eyebrow,.kicker,.logo-band>p,.cover .cover-sign,.section-index,
.pubs a,.pubs article>span,.session-grid article>span,
.situations article>span,.dilemmas article>span,.dilemmas summary>span,
.topics .idx,.contact-list a i,.footer-links a,.limits strong,
.chips small,.steps small,.result-copy>a,.theory-section a,.page-sessions .situations a,
.quote-band cite{font-size:var(--fs-label);line-height:1.35}
/* Заголовки-ссылки в «Чем я занимаюсь» должны быть того же кегля,
   что и соседние заголовки без ссылок. */
.situations h3 a{font-size:inherit;line-height:inherit;letter-spacing:inherit}
/* Имя автора в шапке было 8-9px — мельче служебных меток рядом. */
.brand strong{font-size:13px;line-height:1.3;letter-spacing:.09em}

/* --- Подписи: было 11-13px, стало 13px ------------------------------------ */
.hero-actions p,.quote-caption,.signature,.footer-note,.small-note,
.steps-note,.contact-main>small,.dil-hint,.topics summary em,
.clusters summary em,.dilemmas summary em{font-size:var(--fs-caption);line-height:1.55}

/* --- Основной текст: было 13-15px, стало 15px ----------------------------- */
.situations p,.iconlist p,.east p,.learn li,.pubs p,.session-grid p,
.stats span,.topics details>p,.clusters li,.dilemmas details>p,
.dilemmas article p,.limits p,.price li,.price p,.contact-list a,
.theory-section p,.statement p:last-child,.steps article p,
.learn section ul li{font-size:var(--fs-body);line-height:1.6}

/* --- Вводные: было 16-17px, стало 17px ------------------------------------ */
.section-head>p,.section-head>div+p,.contact-main>p,.cover .lead-light,
.east-section>.east-inner>p,.result-copy>p:not(.section-index),
.topics summary i,.clusters summary i,.dilemmas summary i{font-size:var(--fs-lead);line-height:1.6}

/* --- Крупные вводные и подзаголовки аккордеонов ---------------------------- */
.lead{font-size:var(--fs-lead-lg);line-height:1.5}

/* --- Заголовки карточек: было 23-27px ------------------------------------- */
.situations h3,.iconlist h3,.pubs h3,.dilemmas article h3{font-size:var(--fs-title-sm);line-height:1.25}

/* --- Заголовки блоков: было 28-31px --------------------------------------- */
.east h3,.learn h3,.session-grid h3,.price h3,
.topics summary strong,.clusters summary strong,.dilemmas summary strong{font-size:var(--fs-title);line-height:1.2}

/* --- Крупные заголовки блоков: было 35-40px ------------------------------- */
.steps h3{font-size:var(--fs-title-lg);line-height:1.15}

/* --- Заголовки секций -------------------------------------------------------
   Один структурный уровень h2 набирался пятью кеглями: 56, 58, 63, 79 и 101px
   (обычный заголовок, «single», контакты, тёмная секция, обложка). Сводим
   к одной ступени — уровень один, значит и размер один.
   -------------------------------------------------------------------------- */
:root{
  --fs-h2:clamp(38px,4.4vw,64px);
  --fs-statement:clamp(30px,3.4vw,48px);
}
.section-head h2,.section-head.single h2,.contact h2,
.east-section h2,.cover h2,.result-copy h2,
.dilemmas-section .section-head h2{font-size:var(--fs-h2);line-height:1.08}

/* Крупные реплики-утверждения внутри секций */
.cover p.statement-line,.statement p:first-child,
.result-statement>p,.theory-section h3{font-size:var(--fs-statement);line-height:1.15}

@media(max-width:720px){
  :root{--fs-lead:16px;--fs-body:15px}
}

/* ============================================================================
   РАЗНООБРАЗИЕ ПОДАЧИ
   Почти все секции были одинаковыми таблицами со сплошными рамками.
   Ниже часть блоков переведена в другую подачу — при том же тексте,
   том же порядке, тех же шрифтах и цветах.
   ============================================================================ */

/* --- Публикации: была таблица 3×1, стали карточки с иллюстрациями ---------- */
.pubs{grid-template-columns:repeat(3,1fr);gap:28px;border:0;margin-top:56px}
.pubs article{min-height:0;padding:0;border:0;background:var(--paper);overflow:hidden}
.pubs .pub-cover{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  border:1px solid var(--line);
  filter:grayscale(.55) contrast(1.03);
  transition:filter .35s ease,transform .35s ease}
.pubs article:hover .pub-cover{filter:grayscale(0) contrast(1);transform:scale(1.012)}
.pubs span{display:block;margin-top:20px;color:var(--blue)}
.pubs h3{margin:10px 0 12px}
.pubs p{margin:0 0 18px}
.pubs a{align-self:flex-start;margin-top:auto}

@media(max-width:900px){
  .pubs{grid-template-columns:1fr;gap:34px}
  .pubs .pub-cover{aspect-ratio:16/9}
}

/* ============================================================================
   ЦИТАТЫ НА СВЕТЛОМ ФОНЕ (главная и обучение)
   На странице сессий цитаты уже сделаны как надо — тёмное поле, портрет 52px,
   крупная кавычка. Здесь те же приёмы переносятся на светлый фон:
   портрет крупнее, кавычка выразительнее, поле с синей линией слева.
   Тёмные цитаты сессий этот блок не трогает.
   ============================================================================ */
.quote-band{
  margin:60px 6vw;
  padding:52px 56px 48px;
  background:var(--card);
  border-left:4px solid var(--blue);
}
.quote-shell{
  max-width:1080px;
  grid-template-columns:56px minmax(0,1fr);
  column-gap:26px;
  align-items:start;
}
.quote-mark{font-size:72px;line-height:.72;color:var(--blue);opacity:.35}
.quote-band blockquote{
  max-width:900px;
  font-size:clamp(22px,2.4vw,34px);
  line-height:1.28;
  letter-spacing:-.022em;
}

/* Портрет: было 34px — почти незаметная точка. Стало 56px с синим кольцом. */
/* Блок автора описан только в home.css: на других страницах он не получал
   ни display:flex, ни привязки к колонке и падал в узкую колонку кавычки. */
.quote-author{grid-column:2;display:flex;margin-top:30px;gap:16px;align-items:center}
.quote-author img{
  width:56px;height:56px;
  border:2px solid var(--blue);
  box-shadow:0 0 0 4px var(--paper);
}
.quote-band cite{
  max-width:520px;
  font-size:var(--fs-caption);
  line-height:1.5;
  letter-spacing:.02em;
  text-transform:none;
  color:rgba(34,34,34,.62);
}

@media(max-width:720px){
  .quote-band{margin:40px 20px;padding:32px 24px 30px;border-left-width:3px}
  .quote-shell{grid-template-columns:34px minmax(0,1fr);column-gap:14px}
  .quote-mark{font-size:46px}
  .quote-author img{width:46px;height:46px}
}

/* --- Цифры: была таблица с рамками, стали открытые показатели -------------- */
.stats{border:0;margin-top:64px;column-gap:40px;row-gap:44px}
.stats div{min-height:0;padding:24px 0 0;border:0;border-top:3px solid var(--blue);
  display:flex;flex-direction:column;gap:16px}
.stats b{margin:0}
.stats span{margin:0}

/* --- Целевые аудитории: белые карточки на сером, иконка крупнее ------------ */
.iconlist{border:0;margin-top:64px;gap:24px}
.iconlist article{min-height:0;padding:34px 32px 36px;border:0;background:var(--paper);
  transition:transform .25s ease,box-shadow .25s ease}
.iconlist article:hover{transform:translateY(-4px);background:var(--paper);box-shadow:0 12px 28px rgba(34,34,34,.09)}
.iconlist img{width:56px;height:56px;opacity:.75}
.iconlist h3{margin:22px 0 12px}

@media(max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr)!important;column-gap:28px;row-gap:36px}
  .iconlist{grid-template-columns:1fr!important}
}
@media(max-width:560px){
  .stats{grid-template-columns:1fr!important}
}

/* --- Плашки отраслей: были 11px в общей группе меток ----------------------- */
.tags{gap:12px}
.tags span{font-size:19px;line-height:1.2;padding:14px 22px;letter-spacing:0;text-transform:none}

/* --- Обложки статей: 16/10 срезал логотип издания внизу -------------------- */
.pubs .pub-cover{aspect-ratio:1/1}
@media(max-width:900px){.pubs .pub-cover{aspect-ratio:1/1}}

/* --- Выступления и работа с топ-командами: два входа на внутренние страницы -- */
.gateways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:64px;
  border:1px solid var(--blue);background:var(--blue)}
.gateways article{display:flex;flex-direction:column;padding:38px 36px 40px;background:var(--paper)}
.gateways img{width:44px;height:44px;object-fit:contain;filter:grayscale(1);opacity:.55}
.gateways h3{margin:22px 0 14px;font-family:var(--serif);font-weight:400;font-size:var(--fs-title);line-height:1.15}
.gateways>article>p{margin:0 0 24px;font-size:var(--fs-body);line-height:1.6;color:rgba(34,34,34,.68)}
.gateways ul{list-style:none;margin:0 0 30px;padding:0;border-top:1px solid var(--line)}
.gateways li{padding:13px 0;border-bottom:1px solid var(--line);font-size:var(--fs-body);line-height:1.5;color:rgba(34,34,34,.68)}
.gateways li:last-child{border-bottom:0}
.gateways .button{align-self:flex-start;margin-top:auto}

@media(max-width:900px){
  .gateways{grid-template-columns:1fr}
  .gateways article{padding:30px 24px 32px}
  .tags span{font-size:16px;padding:11px 16px}
}

/* --- Кнопки на тёмных фонах ------------------------------------------------
   .button и .nav-cta залиты var(--ink) — на тёмных секциях (обложки, «Опыт
   Востока», контакты, подвал) чёрная кнопка на чёрном фоне не читалась.
   На таких фонах кнопка становится светлой, в ховере — прозрачной с рамкой.
   -------------------------------------------------------------------------- */
.cover .button,.east-section .button,.contact .button,footer .button,
.cover .nav-cta,.east-section .nav-cta,.contact .nav-cta,
.quote-band .button,.hero-map .button{
  background:var(--paper);border-color:var(--paper);color:var(--ink)}
.cover .button:hover,.east-section .button:hover,.contact .button:hover,
footer .button:hover,.contact .nav-cta:hover,.quote-band .button:hover{
  background:transparent;border-color:var(--paper);color:var(--paper)}

/* --- Логотипы -------------------------------------------------------------
   На десктопе — сетка с переносом, как было. На телефоне 20 логотипов
   занимали пол-экрана по высоте, поэтому там дорожка едет по кругу.
   Бесшовность даёт клон набора: сдвиг на -50% возвращает в ту же точку.
   -------------------------------------------------------------------------- */
.logos-track{display:flex;flex-wrap:wrap;align-items:center;gap:34px 40px}
.logos-track>[aria-hidden="true"]{display:none}

@media(max-width:720px){
  .logo-band{padding:30px 0 34px}
  .logo-band>p{padding:0 20px}
  .logos{overflow:hidden;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
  .logos-track{flex-wrap:nowrap;width:max-content;gap:0;animation:logos-scroll 46s linear infinite}
  .logos-track>[aria-hidden="true"]{display:block}
  .logos-track img{flex:0 0 auto;margin-right:36px}
}
@keyframes logos-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media(prefers-reduced-motion:reduce){
  .logos-track{animation:none!important}
  @media(max-width:720px){
    .logos{overflow-x:auto;scrollbar-width:none}
    .logos::-webkit-scrollbar{display:none}
  }
}

/* ============================================================================
   АККОРДЕОНЫ — единый вид для «Направлений», «Тем» и «Дилемм»
   Было: плюс набирался текстовым глифом «+» в Georgia — он оптически не
   попадал в центр круга и имел разную толщину штрихов. Рамки рисовались
   зазором 1px на синей подложке, из-за чего линии двоились. Открытая
   карточка красилась в #f2f4f7 — голубой цвет вне палитры.
   Стало: плюс из двух линий, честные рамки, открытая карточка в сером
   из палитры, переходы вдвое короче.
   ============================================================================ */
.topics summary i,.clusters summary i,.dilemmas summary i{
  position:relative;justify-self:end;
  width:42px;height:42px;border:1px solid var(--line);border-radius:50%;
  font-size:0;background:transparent;
  transition:transform .18s ease,border-color .18s ease,background-color .18s ease}
.topics summary i::before,.clusters summary i::before,.dilemmas summary i::before,
.topics summary i::after,.clusters summary i::after,.dilemmas summary i::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--blue);
  transform:translate(-50%,-50%)}
.topics summary i::before,.clusters summary i::before,.dilemmas summary i::before{width:13px;height:1px}
.topics summary i::after,.clusters summary i::after,.dilemmas summary i::after{width:1px;height:13px}

.topics summary:hover i,.clusters summary:hover i,.dilemmas summary:hover i{
  border-color:var(--blue);background-color:var(--paper)}
.topics details[open] summary i,.clusters details[open] summary i,
.dilemmas details[open] summary i{transform:rotate(45deg);border-color:var(--blue)}

/* Открытая карточка: серый из палитры вместо голубоватого #f2f4f7 */
.topics details,.clusters details{transition:background-color .18s ease}
.topics details[open],.clusters details[open]{background:var(--soft)}

/* Рамки: одна честная линия вместо зазора на подложке */
.clusters{border:1px solid var(--line);background:var(--line);gap:1px}
.clusters details{background:var(--paper)}
.clusters summary{min-height:104px;align-items:center}
.clusters details[open] summary{min-height:104px}

/* Круг для плюса в «Дилеммах» не помещался в колонку 30px */
.dilemmas summary{grid-template-columns:60px minmax(0,1fr) 42px}

@media(max-width:720px){
  .topics summary i,.clusters summary i,.dilemmas summary i{width:36px;height:36px}
  .clusters summary,.clusters details[open] summary{min-height:0}
}

/* --- Подвал: один вид на всех страницах ------------------------------------
   Было три разных: на главной только копирайт, на обучении две ссылки внутри
   фразы (причём страница сессий называлась «Практика»), на сессиях — строка
   из четырёх ссылок. Теперь везде ссылки плюс копирайт.
   -------------------------------------------------------------------------- */
footer{padding:54px 6vw 58px;background:var(--ink);color:var(--paper);border-top:1px solid rgba(255,255,255,.18)}
footer .footer-links{max-width:var(--content);margin:0 auto;display:flex;flex-wrap:wrap;gap:16px 38px}
footer .footer-links a{font-size:var(--fs-body);line-height:1.5;color:rgba(255,255,255,.72);
  padding-bottom:3px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
footer .footer-links a:hover{color:var(--paper);border-bottom-color:rgba(255,255,255,.45)}
footer .footer-note{max-width:var(--content);margin:34px auto 0;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:var(--fs-caption);line-height:1.6;color:rgba(255,255,255,.5)}
@media(max-width:720px){
  footer{padding:38px 20px 42px}
  footer .footer-links{gap:12px 24px}
  footer .footer-note{margin-top:26px;padding-top:20px}
}

/* --- Подписи цитат: разбор двух дефектов ------------------------------------
   1. Ссылка внутри подписи имела border-bottom и padding-bottom. У строчного
      элемента рамка рисуется под КАЖДОЙ строкой, поэтому на телефоне, где
      подпись переносится на три строки, линия проходила по тексту снизу —
      это и выглядело как «наползает сама на себя». Меняем на подчёркивание
      текста, которое переносы обрабатывает корректно.
   2. Подпись стояла в строку рядом с портретом и получала колонку 220px:
      на телефоне выходило по одному слову в строке. Ниже 720px портрет
      и подпись становятся друг под другом на всю ширину.
   Текст подписей не меняется — только набор.
   -------------------------------------------------------------------------- */
.quote-band cite{text-transform:none;letter-spacing:.01em}
.quote-band cite a{
  border-bottom:0!important;padding-bottom:0!important;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(34,34,34,.32);color:inherit}
.quote-band cite a:hover{text-decoration-color:var(--blue);color:var(--blue)}

@media(max-width:720px){
  .quote-author{flex-direction:column;align-items:flex-start;gap:12px}
  .quote-band cite{max-width:none;width:100%}
}

/* --- Шапка и кнопки: было 9px, читалось хуже соседних меток ---------------- */
.header .nav-links a{font-size:13px;line-height:1.2;letter-spacing:.11em}
.nav-cta,.button{font-size:12px;letter-spacing:.1em;min-height:44px;padding:0 18px}
.button{min-height:50px;padding:15px 22px}
@media(max-width:720px){
  .header .nav-links a{font-size:12px}
  .nav-cta{font-size:11px;padding:0 13px}
}

/* --- Свои иконки ------------------------------------------------------------
   Прежние иконки Tilda были серой тонкой линией и глушились фильтром
   grayscale + opacity. Новые нарисованы в синем из палитры, поэтому фильтр
   для них снимаем — иначе синий превратится обратно в серый.
   -------------------------------------------------------------------------- */
.iconlist img,.gateways img,.learn img{filter:none;opacity:1;width:56px;height:56px}
@media(max-width:720px){
  .iconlist img,.gateways img,.learn img{width:48px;height:48px}
}