/* ============================================================
   IPPS / МППО — общий стилевой файл сайта
   Подключается один раз на весь сайт.
   Это полный и единственный файл стилей: ничего дописывать
   к нему сбоку не нужно.

   АРХИТЕКТУРА
   ------------------------------------------------------------
   Базовые правила обёрнуты в :where() — у них нулевой вес,
   поэтому их можно переопределить любым классом, не повышая
   специфичность и не прибегая к !important.

   Все остальные правила пишутся как .ipps-page .ipps-имя —
   одинаковый вес 0-2-0, правила не спорят друг с другом.

   Селекторов с идентификаторами (#allrecords) здесь нет,
   поэтому контейнерам можно задавать раскладку.

   Горизонтальных линеек на сайте четыре: под открытой панелью
   меню, над подвалом, рамка основной кнопки и подчёркивание
   слова «Меню». Разделы отделяются воздухом и акцентным
   надзаголовком. Если понадобится добавить линейку — сначала
   проверьте, несёт ли она сведения, которых нет в отступе.

   СОДЕРЖАНИЕ
   ------------------------------------------------------------
    0. Шрифты
    1. Переменные
    2. База
    3. Контейнеры
    4. Типографика
    5. Ссылки и фокус
    6. Шапка
    7. Панель меню
    8. Разделы страницы
    9. Нумерованный перечень
   10. Подвал
   11. Действия
   12. Строки-ссылки
   13. Ссылка «читать дальше»
   14. Персоналии: супервизоры (крупный портрет)
   15. Персоналии: список членов (миниатюра)
   16. Изображение в шапке страницы
   17. Цитата
   18. Внутренние страницы: перечни и определения
   19. Контакты на странице и карта
   20. Раскрывающийся раздел
   21. Изображение документа
   22. Каталог Tilda: список персоналий
   23. Новости: настраиваемый CMS-поток
   24. Печать
   ============================================================ */


/* ------------------------------------------------------------
   0. Шрифты

   Пока подключаются через link в head (см. файл 01-head).
   После подготовки woff2-файлов раскомментируйте блок ниже,
   подставьте адреса файлов и удалите link из head.
   Имена семейств те же, поэтому больше ничего менять не нужно.
   ------------------------------------------------------------ */

/*
@font-face {
  font-family: 'PT Serif';
  src: url('ПУТЬ/pt-serif-cyrillic-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PT Serif';
  src: url('ПУТЬ/pt-serif-cyrillic-400italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Golos Text';
  src: url('ПУТЬ/golos-text-cyrillic-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Golos Text';
  src: url('ПУТЬ/golos-text-cyrillic-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Golos Text';
  src: url('ПУТЬ/golos-text-cyrillic-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
*/


/* ------------------------------------------------------------
   1. Переменные
   Единственное место, где меняются цвета, шрифты и размеры.
   ------------------------------------------------------------ */

:root {
  /* Цвета. Никогда не чистый белый и не чистый чёрный. */
  --ipps-paper:        #F6F4EF;  /* фон страницы, «бумага» */
  --ipps-ink:          #1A1A1C;  /* основной текст */
  --ipps-ink-soft:     #54514B;  /* второстепенный текст */
  --ipps-rule:         #DDD7CA;  /* волосная линейка, применяется редко */
  --ipps-wash:         #EDE9E0;  /* подсветка активной строки */
  --ipps-accent:       #6F2B33;  /* акцент — ссылки */
  --ipps-accent-deep:  #4A1B22;  /* акцент при наведении */

  /* Шрифты. Обязательна полноценная кириллица. */
  --ipps-serif: 'PT Serif', Georgia, 'Times New Roman', serif;
  --ipps-sans:  'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Типографическая шкала */
  --ipps-fs-display: clamp(28px, 3.2vw, 40px);
  --ipps-fs-h2:      clamp(23px, 2.2vw, 30px);
  --ipps-fs-h3:      clamp(19px, 1.5vw, 22px);
  --ipps-fs-lead:    clamp(18px, 1.4vw, 21px);
  --ipps-fs-body:    18px;
  --ipps-fs-small:   15px;
  --ipps-fs-label:   12px;

  /* Отступы */
  --ipps-gap-section: clamp(72px, 9vw, 130px);
  --ipps-gap-inner:   clamp(28px, 3vw, 40px);
  --ipps-gap-para:    22px;
  --ipps-gutter:      clamp(20px, 5vw, 40px);

  /* Ширины */
  --ipps-max-page: 1120px;  /* шапка, подвал, широкие блоки */
  --ipps-max-read:  700px;  /* колонка текста, около 70 знаков */

  /* Сторона миниатюры в списке членов.

     Исходные фотографии — около 100–200 пикселей, снятые
     на телефон и заметно размытые. Показывать их крупно
     нельзя: браузер растянет файл, и размытие станет видно.
     При 72 пикселях файл не растягивается ни на обычном
     экране, ни на экране с удвоенной плотностью, и снимок
     выглядит резче, чем на старом сайте.

     Это единственное место, где меняется размер миниатюр
     на всём сайте. */
  --ipps-thumb: 72px;

  /* Сторона портрета у супервизоров и тренинг-аналитиков.
     Заметно больше обычной миниатюры, но не настолько,
     чтобы исходник в сотню точек пришлось растягивать.
     Меняется здесь, в одном месте. */
  --ipps-thumb-lead: 160px;
}

@media (max-width: 480px) {
  :root {
    --ipps-fs-body:  17px;
    --ipps-fs-small: 14px;
  }
}


/* ------------------------------------------------------------
   2. База

   overflow-x: hidden здесь намеренно НЕ используется:
   он ломает position: sticky у всех потомков и прячет
   настоящие ошибки вёрстки вместо того, чтобы их показать.
   ------------------------------------------------------------ */

:where(.ipps-page),
:where(.ipps-page *),
:where(.ipps-page *::before),
:where(.ipps-page *::after) {
  box-sizing: border-box;
}

.ipps-page {
  background-color: var(--ipps-paper);
  color: var(--ipps-ink);
  font-family: var(--ipps-sans);
  font-weight: 400;
  font-size: var(--ipps-fs-body);
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Переносов по слогам нет: слово никогда не разрывается
     чёрточкой посередине. Строки получаются неровнее,
     зато «психоаналитическое» всегда читается целиком.

     overflow-wrap оставлен как страховка: он срабатывает
     только тогда, когда слово физически шире колонки,
     и не даёт вёрстке разъехаться на узком экране. */
  overflow-wrap: break-word;
}

:where(.ipps-page p),
:where(.ipps-page ul),
:where(.ipps-page ol),
:where(.ipps-page h1),
:where(.ipps-page h2),
:where(.ipps-page h3),
:where(.ipps-page h4),
:where(.ipps-page figure),
:where(.ipps-page details),
:where(.ipps-page summary) {
  margin: 0;
}

:where(.ipps-page ul),
:where(.ipps-page ol) {
  padding: 0;
  list-style: none;
}

:where(.ipps-page img),
:where(.ipps-page svg) {
  display: block;
  max-width: 100%;
}

/* Курсив и полужирный в тексте — реальные начертания,
   а не синтетические. Поэтому веса подгружены. */
:where(.ipps-page strong),
:where(.ipps-page b) {
  font-weight: 600;
}

/* Якоря не должны упираться в самый край экрана */
.ipps-page [id] {
  scroll-margin-top: 28px;
}

/* Ссылка «к содержанию» для клавиатуры и скринридеров */
.ipps-page .ipps-skip {
  position: fixed;
  left: -9999px;
  top: 0;
  padding: 12px 18px;
  background: var(--ipps-paper);
  border: 1px solid var(--ipps-ink);
  font-size: var(--ipps-fs-small);
  text-decoration: none;
  color: var(--ipps-ink);
  z-index: 10000;
}

.ipps-page .ipps-skip:focus {
  left: 12px;
  top: 12px;
}


/* ------------------------------------------------------------
   3. Контейнеры
   ------------------------------------------------------------ */

.ipps-page .ipps-wrap {
  width: 100%;
  max-width: var(--ipps-max-page);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ipps-gutter);
  padding-right: var(--ipps-gutter);
}

.ipps-page .ipps-read {
  width: 100%;
  max-width: var(--ipps-max-read);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ipps-gutter);
  padding-right: var(--ipps-gutter);
}


/* ------------------------------------------------------------
   4. Типографика
   Иерархия строится размером и воздухом, а не насыщенностью.
   В заголовочном шрифте только вес 400 — жирного нет.
   ------------------------------------------------------------ */

.ipps-page h1,
.ipps-page h2,
.ipps-page h3 {
  font-family: var(--ipps-serif);
  font-weight: 400;
  color: var(--ipps-ink);
}

.ipps-page h1 {
  font-size: var(--ipps-fs-display);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.ipps-page h2 {
  font-size: var(--ipps-fs-h2);
  line-height: 1.24;
  text-wrap: balance;
}

.ipps-page h3 {
  font-size: var(--ipps-fs-h3);
  line-height: 1.35;
}

.ipps-page .ipps-lead {
  font-size: var(--ipps-fs-lead);
  line-height: 1.6;
  color: var(--ipps-ink-soft);
  text-wrap: pretty;
}

/* Надзаголовок: мелкие прописные с разрядкой.
   Прописные не переносятся — иначе разрядка рвёт слово. */
.ipps-page .ipps-label {
  display: block;
  font-family: var(--ipps-sans);
  font-weight: 500;
  font-size: var(--ipps-fs-label);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ipps-ink-soft);
}

/* Надзаголовок раздела набран акцентным цветом.
   Именно он, а не линейка, отмечает начало нового раздела. */
.ipps-page .ipps-section-label {
  color: var(--ipps-accent);
}

.ipps-page .ipps-prose p {
  margin-bottom: var(--ipps-gap-para);
}

.ipps-page .ipps-prose p:last-child {
  margin-bottom: 0;
}

/* Термин в начале абзаца, например ПСИХОАНАЛИЗ */
.ipps-page .ipps-term {
  font-weight: 500;
  letter-spacing: 0.03em;
}


/* ------------------------------------------------------------
   5. Ссылки и фокус
   ------------------------------------------------------------ */

/* Подчёркиваний на сайте нет. Ссылку отличает акцентный
   цвет, а в списках и строках — подсветка при наведении.

   Единственное исключение — ссылка внутри сплошного текста:
   там цвет сам по себе слишком слабый признак, особенно
   для людей, плохо различающих оттенки. Такие ссылки
   подчёркнуты (см. правило ниже). Сейчас их на сайте нет,
   правило заготовлено на будущее. */
.ipps-page a {
  color: var(--ipps-accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

.ipps-page .ipps-prose a,
.ipps-page .ipps-person-bio a,
.ipps-page .ipps-member-bio a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: auto;
}

.ipps-page a:hover {
  color: var(--ipps-accent-deep);
}

.ipps-page a:focus-visible,
.ipps-page summary:focus-visible {
  outline: 2px solid var(--ipps-accent);
  outline-offset: 3px;
  border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .ipps-page *,
  .ipps-page *::before,
  .ipps-page *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ------------------------------------------------------------
   6. Шапка

   Логотип — обычная ссылка и сосед details, а не его часть.
   Благодаря этому он кликабельный и стоит первым в порядке
   обхода с клавиатуры.

   Панель меню позиционируется абсолютно относительно шапки:
   она накрывает страницу сверху, а не раздвигает её.
   Содержимое под шапкой не прыгает при открытии.
   ------------------------------------------------------------ */

.ipps-page .ipps-header {
  position: relative;
  z-index: 9000;
  background-color: var(--ipps-paper);
}

.ipps-page .ipps-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  max-width: var(--ipps-max-page);
  margin-left: auto;
  margin-right: auto;
  padding: 16px var(--ipps-gutter);
}

/* --- Логотип --- */

/* Логотип — чистый шрифтовой знак. Рамки нет намеренно:
   четыре её грани были самым «линейчатым» объектом в шапке,
   а слово IPPS повторялось дважды подряд. */
.ipps-page .ipps-logo {
  display: block;
  min-width: 0;
  text-decoration: none;
  color: var(--ipps-ink);
}

.ipps-page .ipps-logo-name {
  display: block;
  font-family: var(--ipps-serif);
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.15;
  letter-spacing: 0.06em;
}

/* Косая черта — единственное место акцентного цвета в шапке */
.ipps-page .ipps-logo-sep {
  padding: 0 0.32em;
  color: var(--ipps-accent);
}

.ipps-page .ipps-logo-full {
  display: block;
  margin-top: 6px;
  font-family: var(--ipps-sans);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ipps-ink-soft);
}

.ipps-page .ipps-logo:hover .ipps-logo-name {
  color: var(--ipps-accent);
}

/* На узких экранах длинное название прячем — остаётся монограмма */
@media (max-width: 760px) {
  .ipps-page .ipps-logo-full {
    display: none;
  }
}

/* --- Кнопка меню --- */

.ipps-page .ipps-menu {
  flex: 0 0 auto;
}

.ipps-page .ipps-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* 44px по вертикали — минимальная удобная цель для пальца */
  min-height: 44px;
  padding: 0 2px;
  cursor: pointer;
  font-family: var(--ipps-sans);
  font-weight: 500;
  font-size: var(--ipps-fs-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ipps-ink);
  white-space: nowrap;
  list-style: none;
  transition: color 0.15s ease;
}

.ipps-page .ipps-menu-btn::-webkit-details-marker {
  display: none;
}

.ipps-page .ipps-menu-btn::marker {
  content: '';
  font-size: 0;
}

.ipps-page .ipps-menu-btn:hover {
  color: var(--ipps-accent);
}

/* Слово «Меню» ничем не подчёркнуто: рядом стоит значок,
   и этого достаточно, чтобы понять, что на него нажимают. */
.ipps-page .ipps-menu-word {
  padding-bottom: 3px;
}

/* Две черты / крестик. Только границы, без псевдоэлементов. */
.ipps-page .ipps-menu-icon {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 12px;
}

.ipps-page .ipps-menu-icon span {
  position: absolute;
  left: 0;
  width: 16px;
  height: 1px;
  background: currentColor;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.ipps-page .ipps-menu-icon span:first-child {
  top: 2px;
}

.ipps-page .ipps-menu-icon span:last-child {
  top: 9px;
}

.ipps-page .ipps-menu[open] .ipps-menu-icon span:first-child {
  transform: translateY(3px) rotate(45deg);
}

.ipps-page .ipps-menu[open] .ipps-menu-icon span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

.ipps-page .ipps-menu-close {
  display: none;
}

.ipps-page .ipps-menu[open] .ipps-menu-open {
  display: none;
}

.ipps-page .ipps-menu[open] .ipps-menu-close {
  display: inline;
}


/* ------------------------------------------------------------
   7. Панель меню
   ------------------------------------------------------------ */

.ipps-page .ipps-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* 100vh на телефоне не учитывает панель браузера, 100dvh учитывает.
     Первая строка — запасная для старых браузеров. */
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 30px;
  padding-bottom: 44px;
  background-color: var(--ipps-paper);
  /* Единственная линейка в шапке: нижняя граница открытой
     панели. Без неё панель сливается с текстом под ней. */
  border-bottom: 1px solid var(--ipps-rule);
}

.ipps-page .ipps-nav-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 44px;
}

.ipps-page .ipps-nav-group {
  flex: 1 1 210px;
  min-width: 0;
}

.ipps-page .ipps-nav-title {
  display: block;
  margin-bottom: 16px;
  font-family: var(--ipps-sans);
  font-weight: 500;
  font-size: var(--ipps-fs-label);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ipps-ink-soft);
}

.ipps-page .ipps-nav-list li {
  margin-bottom: 2px;
}

.ipps-page .ipps-nav-list a {
  display: block;
  padding: 7px 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ipps-ink);
  text-decoration: none;
}

.ipps-page .ipps-nav-list a:hover {
  color: var(--ipps-accent);
}

/* Текущая страница отмечается приглушённым цветом */
.ipps-page .ipps-nav-list a[aria-current='page'] {
  color: var(--ipps-ink-soft);
}

/* Вложенный список в меню.
   Сейчас в разметке его нет — разделы персоналий убраны
   из меню и живут в оглавлении самой страницы. Правило
   оставлено на случай, если вложенность понадобится снова. */
.ipps-page .ipps-nav-sub {
  margin: 2px 0 10px;
  padding-left: 16px;
}

.ipps-page .ipps-nav-sub a {
  padding: 5px 0;
  font-size: var(--ipps-fs-small);
  color: var(--ipps-ink-soft);
}


/* ------------------------------------------------------------
   8. Разделы страницы
   ------------------------------------------------------------ */

/* Разделы разделяются воздухом и акцентным надзаголовком.
   Сплошных линеек между разделами больше нет. */
.ipps-page .ipps-section {
  padding-top: var(--ipps-gap-section);
}

/* Продолжение раздела в следующем блоке Tilda.

   У блока T123 есть предел объёма кода, поэтому длинные
   страницы приходится резать на несколько блоков. Разрыв
   может прийтись на середину раздела: тогда во втором блоке
   заголовка нет, и отступ сверху не нужен — иначе на месте
   склейки образуется двойной провал.

   Нижнего отступа у последнего раздела намеренно нет:
   при разрезанной странице он сработал бы в каждом блоке.
   Расстояние до подвала задаёт сам подвал. */
.ipps-page .ipps-section-cont {
  padding-top: 0;
}

.ipps-page .ipps-section-cont .ipps-members,
.ipps-page .ipps-section-cont .ipps-people {
  margin-top: 0;
}

.ipps-page .ipps-hero {
  padding-top: clamp(26px, 3vw, 40px);
  padding-bottom: var(--ipps-gap-section);
}

.ipps-page .ipps-hero h1 {
  margin-bottom: var(--ipps-gap-inner);
}

/* Отступ надзаголовка задан здесь, цвет — в разделе типографики */
.ipps-page .ipps-section-label {
  margin-bottom: 12px;
}

.ipps-page .ipps-section h2 {
  margin-bottom: var(--ipps-gap-inner);
}


/* --- Оглавление страницы --- */

/* Оглавление в одну строку. Было четыре линейки — стало ни одной. */
.ipps-page .ipps-toc {
  margin-top: clamp(36px, 4vw, 52px);
}

.ipps-page .ipps-toc-title {
  margin-bottom: 12px;
}

.ipps-page .ipps-toc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
}

.ipps-page .ipps-toc-list a {
  display: inline-block;
  padding: 4px 0;
  font-size: var(--ipps-fs-small);
  color: var(--ipps-accent);
  text-decoration: none;
}

.ipps-page .ipps-toc-list a:hover {
  color: var(--ipps-accent-deep);
}


/* ------------------------------------------------------------
   9. Нумерованный перечень
   Пункты разделены воздухом; роль разделителя играет номер.
   ------------------------------------------------------------ */

.ipps-page .ipps-list {
  margin-top: var(--ipps-gap-inner);
}

.ipps-page .ipps-list li {
  margin-bottom: clamp(28px, 3vw, 38px);
}

.ipps-page .ipps-list li:last-child {
  margin-bottom: 0;
}

.ipps-page .ipps-list-num {
  display: block;
  margin-bottom: 6px;
  font-family: var(--ipps-sans);
  font-weight: 500;
  font-size: var(--ipps-fs-label);
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--ipps-accent);
}

/* Заключительная фраза раздела */
.ipps-page .ipps-closing {
  margin-top: clamp(48px, 6vw, 76px);
  font-family: var(--ipps-serif);
  font-size: var(--ipps-fs-h3);
  line-height: 1.5;
  text-wrap: pretty;
}


/* ------------------------------------------------------------
   10. Подвал
   ------------------------------------------------------------ */

/* Единственная линейка в подвале — верхняя.
   Она отделяет служебный слой от содержания страницы. */
.ipps-page .ipps-footer {
  margin-top: var(--ipps-gap-section);
  border-top: 1px solid var(--ipps-rule);
  padding-top: clamp(36px, 4vw, 52px);
  padding-bottom: clamp(36px, 4vw, 52px);
  background-color: var(--ipps-paper);
}

.ipps-page .ipps-foot-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 34px 44px;
}

.ipps-page .ipps-foot-col {
  flex: 1 1 210px;
  min-width: 0;
}

.ipps-page .ipps-foot-title {
  display: block;
  margin-bottom: 16px;
  font-family: var(--ipps-sans);
  font-weight: 500;
  font-size: var(--ipps-fs-label);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ipps-ink-soft);
}

.ipps-page .ipps-foot-list a {
  display: block;
  padding: 5px 0;
  font-size: var(--ipps-fs-small);
  line-height: 1.5;
  color: var(--ipps-ink);
  text-decoration: none;
}

.ipps-page .ipps-foot-list a:hover {
  color: var(--ipps-accent);
}

/* Контакт: должность, имя, телефон */
.ipps-page .ipps-contact {
  margin-bottom: 16px;
}

.ipps-page .ipps-contact:last-child {
  margin-bottom: 0;
}

.ipps-page .ipps-contact-role {
  display: block;
  font-size: var(--ipps-fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--ipps-ink-soft);
}

.ipps-page .ipps-contact-name {
  display: block;
  font-size: var(--ipps-fs-small);
  line-height: 1.5;
  color: var(--ipps-ink);
}

/* Телефон и почта подчёркиваются только при наведении */
.ipps-page .ipps-contact a {
  display: inline-block;
  padding: 3px 0;
  font-size: var(--ipps-fs-small);
  line-height: 1.5;
  color: var(--ipps-ink);
  text-decoration: none;
}

.ipps-page .ipps-contact a:hover {
  color: var(--ipps-accent);
}

.ipps-page .ipps-foot-bottom {
  padding-top: clamp(34px, 4vw, 48px);
  font-size: var(--ipps-fs-small);
  line-height: 1.6;
  color: var(--ipps-ink-soft);
}


/* ------------------------------------------------------------
   11. Действия

   Единственное место на сайте, где есть заливка. Так и задумано:
   на странице из одних линеек залитый прямоугольник читается
   как действие с первого взгляда. Углы прямые — как у всего
   остального.
   ------------------------------------------------------------ */

.ipps-page .ipps-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--ipps-gap-inner);
}

.ipps-page .ipps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 22px;
  font-family: var(--ipps-sans);
  font-weight: 500;
  font-size: var(--ipps-fs-small);
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--ipps-accent);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ipps-page .ipps-btn-primary {
  background-color: var(--ipps-accent);
  color: var(--ipps-paper);
}

.ipps-page .ipps-btn-primary:hover {
  background-color: var(--ipps-accent-deep);
  border-color: var(--ipps-accent-deep);
  color: var(--ipps-paper);
}

/* Второе действие — не вторая рамка, а ссылка.
   Две одинаковые коробки рядом не дают иерархии. */
.ipps-page .ipps-btn-ghost {
  min-height: 48px;
  padding: 11px 4px;
  background-color: transparent;
  border-color: transparent;
  color: var(--ipps-accent);
}

.ipps-page .ipps-btn-ghost:hover {
  background-color: transparent;
  border-color: transparent;
  color: var(--ipps-accent-deep);
}

/* На узком экране кнопки во всю ширину, одна под другой */
@media (max-width: 520px) {
  .ipps-page .ipps-actions {
    display: block;
  }

  .ipps-page .ipps-btn {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
  }

  .ipps-page .ipps-btn-ghost {
    justify-content: flex-start;
  }

  .ipps-page .ipps-btn:last-child {
    margin-bottom: 0;
  }
}


/* ------------------------------------------------------------
   12. Строки-ссылки

   Кликается строка целиком. Разделительных линеек нет:
   при наведении строка подсвечивается тёплой заливкой,
   а это более понятный признак кликабельности, чем линия,
   и в покое он ничего не весит.
   ------------------------------------------------------------ */

.ipps-page .ipps-rows {
  margin-top: var(--ipps-gap-inner);
}

.ipps-page .ipps-rows li {
  margin-bottom: 6px;
}

.ipps-page .ipps-rows li:last-child {
  margin-bottom: 0;
}

/* Отрицательные поля дают заливке выйти в поля колонки,
   чтобы подсветка не выглядела обрезанной по тексту. */
.ipps-page .ipps-row {
  display: block;
  padding: 20px 18px;
  margin-left: -18px;
  margin-right: -18px;
  color: var(--ipps-ink);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.ipps-page .ipps-row:hover {
  background-color: var(--ipps-wash);
}

.ipps-page .ipps-row-title {
  display: block;
  margin-bottom: 7px;
  font-family: var(--ipps-serif);
  font-size: var(--ipps-fs-h3);
  line-height: 1.3;
  color: var(--ipps-ink);
  transition: color 0.15s ease;
}

/* Стрелка отделена неразрывным пробелом на стороне разметки,
   поэтому никогда не остаётся одна на новой строке. */
.ipps-page .ipps-row-arrow {
  color: var(--ipps-accent);
}

.ipps-page .ipps-row-text {
  display: block;
  font-size: var(--ipps-fs-small);
  line-height: 1.6;
  color: var(--ipps-ink-soft);
}

.ipps-page .ipps-row:hover .ipps-row-title {
  color: var(--ipps-accent);
}

.ipps-page .ipps-row:focus-visible {
  outline: 2px solid var(--ipps-accent);
  outline-offset: 4px;
}


/* ------------------------------------------------------------
   13. Ссылка «читать дальше»
   ------------------------------------------------------------ */

.ipps-page .ipps-more {
  display: inline-block;
  margin-top: var(--ipps-gap-inner);
  padding: 6px 0;
  font-family: var(--ipps-sans);
  font-weight: 500;
  font-size: var(--ipps-fs-small);
  color: var(--ipps-accent);
}

.ipps-page .ipps-more:hover {
  color: var(--ipps-accent-deep);
}


/* ------------------------------------------------------------
   14. Персоналии: супервизоры (крупный портрет)

   Трое: их выбирают для личного анализа и супервизии,
   поэтому портрет крупнее, а биография открыта сразу.
   ------------------------------------------------------------ */

/* Колонка шире основной: нужно место под портрет */
.ipps-page .ipps-read-wide {
  width: 100%;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ipps-gutter);
  padding-right: var(--ipps-gutter);
}

.ipps-page .ipps-people {
  margin-top: var(--ipps-gap-inner);
}

.ipps-page .ipps-person {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 34px);
  margin-bottom: clamp(44px, 5vw, 64px);
}

.ipps-page .ipps-person:last-child {
  margin-bottom: 0;
}

/* Инициалы лежат под фотографией и закрывают три случая:
   фотографии нет, файл не загрузился, ссылка устарела.
   Во всех трёх строка сохраняет размер.

   Ширина ограничена 210 пикселями: растягивать снимок выше
   его собственного разрешения нельзя. */
.ipps-page .ipps-person-photo {
  position: relative;
  flex: 0 0 clamp(112px, 20vw, 210px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--ipps-wash);
}

.ipps-page .ipps-person-initials {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--ipps-serif);
  font-size: clamp(20px, 2.8vw, 30px);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--ipps-ink-soft);
}

/* Фотография вставлена фоном, а не тегом img.

   У фонового изображения нет состояния «не загрузилось»:
   если файла нет, слой просто прозрачный и сквозь него
   видны инициалы. Тег img в такой ситуации рисует значок
   битой картинки, а обойти это надёжно не удаётся —
   Tilda вырезает обработчик onerror при сохранении блока.

   Заодно снимается вопрос с атрибутом alt: имя человека
   стоит рядом обычным текстом, и читалке экрана незачем
   произносить его дважды. */
.ipps-page .ipps-person-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

.ipps-page .ipps-person-body {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 2px;
}

.ipps-page .ipps-person-name {
  font-family: var(--ipps-serif);
  font-weight: 400;
  font-size: var(--ipps-fs-h3);
  line-height: 1.25;
  color: var(--ipps-ink);
  text-wrap: balance;
}

.ipps-page .ipps-person-role {
  margin-top: 7px;
  font-size: var(--ipps-fs-small);
  line-height: 1.5;
  color: var(--ipps-ink-soft);
}

/* Страна словом, а не флажком: шестнадцать пикселей флага
   не разглядеть, а слово «Швейцария» читается сразу. */
.ipps-page .ipps-person-place {
  margin-top: 9px;
  font-family: var(--ipps-sans);
  font-weight: 500;
  font-size: var(--ipps-fs-label);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ipps-ink-soft);
}

.ipps-page .ipps-person-bio {
  margin-top: 14px;
  font-size: var(--ipps-fs-small);
  line-height: 1.7;
  color: var(--ipps-ink-soft);
}

/* Продолжение биографии супервизора.

   Первый абзац виден всегда, остальные — под раскрытием.
   У кого биография в один абзац, этого блока в разметке нет
   вовсе: кнопка над тремя строками текста бессмысленна.
   Разворачивать нужно только длинные справки — иначе начало
   страницы превращается в сплошной текст.

   Механизм тот же, что у меню и у списка членов: тег details,
   без единой строки скриптов. */
.ipps-page .ipps-person-more {
  margin-top: 12px;
}

.ipps-page .ipps-person-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  cursor: pointer;
  font-family: var(--ipps-sans);
  font-weight: 500;
  font-size: var(--ipps-fs-small);
  color: var(--ipps-accent);
  list-style: none;
}

.ipps-page .ipps-person-toggle::-webkit-details-marker {
  display: none;
}

.ipps-page .ipps-person-toggle::marker {
  content: '';
  font-size: 0;
}

.ipps-page .ipps-person-toggle:hover {
  color: var(--ipps-accent-deep);
}

.ipps-page .ipps-person-less-label {
  display: none;
}

.ipps-page .ipps-person-more[open] .ipps-person-more-label {
  display: none;
}

.ipps-page .ipps-person-more[open] .ipps-person-less-label {
  display: inline;
}

.ipps-page .ipps-person-rest {
  padding-top: 4px;
  padding-bottom: 4px;
}


/* ------------------------------------------------------------
   15. Персоналии: список членов (миниатюра)

   Миниатюра видна сразу, биография раскрывается по клику
   на строку. Отдельной ссылки «Подробнее» нет: она занимала бы
   ещё строку на каждого из шестидесяти человек и давала бы
   цель для пальца меньше самой строки.

   Почему миниатюра маленькая
   ------------------------------------------------------------
   Исходники сняты на телефон и имеют около 100–200 пикселей
   по стороне. Крупный кадр браузер растягивает, и размытие
   становится заметным. При 72 пикселях растяжения нет даже
   на экране с удвоенной плотностью, и снимок выглядит резче,
   чем на старом сайте, где его растягивали.

   Обработки цвета нет
   ------------------------------------------------------------
   Фотографии показываются как есть. Общее обесцвечивание
   пробовалось и было убрано: снимки выглядели почти
   чёрно-белыми, а возврат цвета при наведении читался
   как поломка, а не как приём.

   Разнобой в исходниках приводится к единому виду
   кадрированием — одинаковый квадрат, лицо в одном месте
   кадра. Это работает лучше фильтра и ничего не портит.

   Если однажды понадобится общая тональность, её место —
   здесь, в свойстве filter. Но по умолчанию её нет.
   ------------------------------------------------------------ */

.ipps-page .ipps-members {
  margin-top: var(--ipps-gap-inner);
}

.ipps-page .ipps-member {
  margin-bottom: 2px;
}

.ipps-page .ipps-member-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  margin-left: -16px;
  margin-right: -16px;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s ease;
}

.ipps-page .ipps-member-head::-webkit-details-marker {
  display: none;
}

.ipps-page .ipps-member-head::marker {
  content: '';
  font-size: 0;
}

.ipps-page .ipps-member-head:hover {
  background-color: var(--ipps-wash);
}

.ipps-page .ipps-member[open] .ipps-member-head {
  background-color: var(--ipps-wash);
}


/* --- Миниатюра --- */

.ipps-page .ipps-member-thumb {
  position: relative;
  flex: 0 0 var(--ipps-thumb);
  width: var(--ipps-thumb);
  height: var(--ipps-thumb);
  overflow: hidden;
  background-color: var(--ipps-wash);
}

/* Тот же приём, что и у крупного портрета: фон вместо img.
   Нет фотографии — нет и значка битой картинки, видны
   только инициалы. Строку с фотографией удалять не нужно:
   можно оставить её на месте и однажды подставить адрес. */
.ipps-page .ipps-member-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Инициалы под фотографией: видны, когда снимка нет
   или когда ссылка перестала работать */
.ipps-page .ipps-member-initials {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--ipps-serif);
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--ipps-ink-soft);
}


/* --- Текст строки --- */

.ipps-page .ipps-member-text {
  flex: 1 1 auto;
  min-width: 0;
}

.ipps-page .ipps-member-name {
  display: block;
  font-family: var(--ipps-serif);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.25;
  color: var(--ipps-ink);
}

/* Должность и страна одной строкой, разделены точкой */
.ipps-page .ipps-member-meta {
  display: block;
  margin-top: 4px;
  font-size: var(--ipps-fs-small);
  line-height: 1.45;
  color: var(--ipps-ink-soft);
}

/* Плюс превращается в минус. Никаких иконочных шрифтов
   и картинок — обычные текстовые знаки. */
.ipps-page .ipps-member-mark {
  flex: 0 0 auto;
  width: 16px;
  text-align: center;
  font-size: 19px;
  line-height: 1;
  color: var(--ipps-accent);
}

.ipps-page .ipps-member-less {
  display: none;
}

.ipps-page .ipps-member[open] .ipps-member-more {
  display: none;
}

.ipps-page .ipps-member[open] .ipps-member-less {
  display: inline;
}


/* --- Раскрытая биография --------------------------------------

   Текст сдвинут вправо на ширину миниатюры, чтобы его левый
   край совпадал с именем над ним. На узком экране сдвиг
   снимается: там он съедал бы половину строки.
   -------------------------------------------------------------- */

.ipps-page .ipps-member-bio {
  padding: 14px 0 24px calc(var(--ipps-thumb) + 16px);
  font-size: var(--ipps-fs-small);
  line-height: 1.7;
  color: var(--ipps-ink-soft);
}

@media (max-width: 620px) {
  .ipps-page .ipps-member-bio {
    padding-left: 0;
  }
}

.ipps-page .ipps-member-bio p {
  margin-bottom: 12px;
}

.ipps-page .ipps-member-bio p:last-child {
  margin-bottom: 0;
}

/* Запись без биографии: та же строка, но без раскрытия.
   Пустой «плюс», за которым ничего нет, вводит в заблуждение. */
.ipps-page .ipps-member-static .ipps-member-head {
  cursor: default;
}

.ipps-page .ipps-member-static .ipps-member-head:hover {
  background-color: transparent;
}


/* --- Общее для биографий обоих видов --- */

/* Подзаголовок внутри биографии, например «Образование».
   Отдельный абзац, а не начало следующего: после заголовка
   нередко идёт перечень, и заголовок должен стоять над ним. */
.ipps-page .ipps-bio-head {
  margin-top: 18px;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--ipps-ink);
}

.ipps-page .ipps-bio-head:first-child {
  margin-top: 0;
}

/* Перечни внутри биографии. Маркер — короткое тире. */
.ipps-page .ipps-bio-list {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.ipps-page .ipps-bio-list li {
  position: relative;
  margin-bottom: 6px;
  padding-left: 17px;
}

.ipps-page .ipps-bio-list li:last-child {
  margin-bottom: 0;
}

.ipps-page .ipps-bio-list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--ipps-ink-soft);
}

.ipps-page .ipps-person-bio p {
  margin-bottom: 12px;
}

.ipps-page .ipps-person-bio p:last-child {
  margin-bottom: 0;
}


/* ------------------------------------------------------------
   16. Изображение в шапке страницы

   Одна широкая полоса под шапкой сайта. Не на каждой странице,
   а только на главной: повторяющийся баннер перестают замечать
   к третьей странице, а грузится он на каждой.

   Пропорции разные на широком и узком экране. Полоса 3:1
   на телефоне превратилась бы в щель высотой сорок пикселей,
   поэтому там кадр становится выше и уже. Изображение
   вписывается по площади, середина кадра остаётся в середине.
   ------------------------------------------------------------ */

/* Отступы сверху и снизу одинаковые.

   Раньше снизу было больше, чем сверху, и полоса читалась
   как часть шапки, а не как начало страницы. Нижний отступ
   задаёт первый экран (padding-top у ipps-hero), поэтому
   здесь снизу ноль. */
.ipps-page .ipps-banner {
  margin-top: clamp(26px, 3vw, 40px);
  margin-bottom: 0;
}

/* Полоса шире текста — и это намеренно.

   Колонка текста узкая, около семисот точек: на такой ширине
   строка читается удобнее всего. Изображение выходит за её
   пределы на всю ширину страницы, до тех же полей, по которым
   выровнены логотип и подвал. Страница перестаёт быть одним
   ровным столбцом, у неё появляется ритм.

   Соотношение 9:2 (то есть 4,5:1).

   Высота здесь важнее ширины: на ноутбуке окно браузера бывает
   всего около шестисот точек, и полоса вместе с заголовком
   должна помещаться целиком. При 1040 точках ширины полоса
   выходит 231 точку высотой — этого хватает, чтобы название
   общества осталось на первом экране.

   Файл имеет пропорции 3:1, поэтому часть высоты обрезается.
   Точка привязки смещена вверх (20%): срезается низ, где
   только фон, а не верх, где головы фигур. */
.ipps-page .ipps-banner-img {
  width: 100%;
  aspect-ratio: 9 / 2;
  background-position: center 20%;
  background-size: cover;
  background-repeat: no-repeat;
}

/* На телефоне картинка показывается целиком и без обрезки.

   Соотношение здесь 3:1 — ровно как у файла, поэтому
   изображение встаёт в рамку без остатка: ничего не срезано
   с боков, ничего не срезано сверху и снизу.

   Полоса получается невысокой, около сотни точек. Так и надо:
   на телефоне важно быстрее добраться до названия общества
   и до текста, а не разглядывать фреску. */
@media (max-width: 720px) {
  .ipps-page .ipps-banner-img {
    aspect-ratio: 3 / 1;
    background-size: contain;
  }
}

/* --- Полоса во всю ширину экрана ---------------------------

   Второй вариант оформления: изображение идёт от края до края,
   без полей. Включается классом ipps-banner-full.

   Высота задана не пропорцией, а прямо в точках. Это важно:
   у полосы во всю ширину пропорция означала бы, что на широком
   мониторе она вырастет вдвое. Здесь высота меняется в узких
   пределах — от 170 до 250 точек, — а изображение подрезается
   по бокам, где только фон.

   Разметка для этого варианта отличается одним: блок лежит
   прямо в section, без обёртки ipps-wrap.
   ------------------------------------------------------------ */

.ipps-page .ipps-banner-full {
  width: 100%;
  height: clamp(170px, 11vw, 250px);
  aspect-ratio: auto;
  background-position: center 45%;
  background-size: cover;
}

/* На телефоне полоса во всю ширину не нужна: там и так нет
   полей. Показывается обычный файл 3:1 целиком. */
@media (max-width: 720px) {
  .ipps-page .ipps-banner-full {
    height: auto;
    aspect-ratio: 3 / 1;
    background-size: contain;
  }
}


/* Отдельный кадр для телефона.

   В разметке лежат два блока: широкий с классом
   ipps-banner-wide и узкий с классом ipps-banner-narrow.
   На большом экране виден первый, на маленьком — второй.

   Скрытый блок браузер не загружает, поэтому лишний файл
   не тратит трафик.

   На телефоне показывается файл 3:1 целиком: пропорции рамки
   совпадают с пропорциями файла, и подгонка идёт по площади,
   а не обрезкой. Ничего не срезано ни с боков, ни сверху.

   Полоса при этом занимает всю ширину экрана и получается
   невысокой — около 130 точек. Так и надо: на телефоне важно
   быстрее дойти до названия общества и до текста. */
.ipps-page .ipps-banner-narrow {
  display: none;
}

@media (max-width: 720px) {
  .ipps-page .ipps-banner-wide {
    display: none;
  }

  .ipps-page .ipps-banner-narrow {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1944 / 809;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
}

/* Подпись под изображением. Мелко, приглушённо, без рамок.
   Указание автора — не формальность: это Микеланджело,
   и на сайте профессионального общества источник называют. */
.ipps-page .ipps-banner-caption {
  margin-top: 10px;
  font-size: var(--ipps-fs-label);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ipps-ink-soft);
}


/* ------------------------------------------------------------
   17. Цитата

   Фраза со старого сайта: «Психоанализ — паззл без рисунка
   на коробке…». Набрана крупно и служит смысловой паузой
   между разделами.

   Текст остаётся текстом: его можно выделить, найти поиском
   и прочитать программой чтения экрана — в отличие от той же
   фразы, впечатанной в картинку, как было раньше.
   ------------------------------------------------------------ */

.ipps-page .ipps-quote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 4vw, 46px);
  margin: 0;
}

.ipps-page .ipps-quote-text {
  flex: 1 1 320px;
  min-width: 0;
  font-family: var(--ipps-serif);
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--ipps-ink);
  text-wrap: balance;
}

/* Изображение рядом с цитатой — необязательное.
   Если убрать этот блок из разметки, цитата займёт
   всю ширину и ничего не сломается. */
/* Изображение рядом с цитатой.

   Фон самого файла совпадает с цветом бумаги (#F6F4EF),
   поэтому рамка, подложка и тень не нужны — фрагмент
   лежит прямо на странице.

   Блок необязательный: если удалить его из разметки,
   цитата займёт всю ширину и ничего не сломается. */
.ipps-page .ipps-quote-figure {
  flex: 0 0 clamp(170px, 26vw, 300px);
  aspect-ratio: 1 / 1;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* На узком экране картинка встаёт над цитатой.
   По центру она выглядела потерянной среди пустых полей,
   поэтому прижата к левому краю — к той же линии,
   по которой выровнен весь текст страницы. */
/* На узком экране картинка встаёт над цитатой и занимает
   всю ширину колонки.

   Прижатая к левому краю, она выглядела сдвинутой: сам
   фрагмент симметричен, и глазу не за что зацепиться слева.
   Во всю ширину он оказывается посередине сам собой,
   а поля вокруг него — того же цвета, что и страница,
   поэтому их не видно. */
@media (max-width: 620px) {
  .ipps-page .ipps-quote {
    gap: 14px;
  }

  .ipps-page .ipps-quote-figure {
    flex: 0 0 100%;
    max-width: 420px;
  }
}


/* ------------------------------------------------------------
   18. Внутренние страницы: перечни и определения

   Всё, что нужно текстовым страницам вроде «Членства»:
   заголовок внутри пункта перечня и маркированный список.
   Отдельных приёмов оформления не вводится — берутся те же
   линейки-которых-нет, тот же воздух и тот же акцентный цвет.
   ------------------------------------------------------------ */

/* Заголовок уровня внутри нумерованного перечня */
.ipps-page .ipps-list h3 {
  margin-bottom: 8px;
}

.ipps-page .ipps-list p {
  margin-bottom: 12px;
}

.ipps-page .ipps-list p:last-child {
  margin-bottom: 0;
}

/* Перечень требований. Маркер — короткое тире: точки и кружки
   на странице из одних линеек выглядят чужеродно. */
.ipps-page .ipps-ul {
  margin: 0 0 var(--ipps-gap-para);
  padding: 0;
  list-style: none;
}

.ipps-page .ipps-ul li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 20px;
}

.ipps-page .ipps-ul li:last-child {
  margin-bottom: 0;
}

.ipps-page .ipps-ul li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--ipps-ink-soft);
}

/* Пункт с заголовком и требованиями под ним */
.ipps-page .ipps-terms {
  margin-top: var(--ipps-gap-inner);
}

.ipps-page .ipps-terms > li {
  margin-bottom: clamp(32px, 4vw, 46px);
}

.ipps-page .ipps-terms > li:last-child {
  margin-bottom: 0;
}

.ipps-page .ipps-terms h3 {
  margin-bottom: 10px;
}

.ipps-page .ipps-terms p {
  margin-bottom: 12px;
}


/* ------------------------------------------------------------
   19. Контакты на странице и карта

   Не путать с контактами в подвале (раздел 10): там они мелкие
   и служебные, здесь — основное содержание страницы, поэтому
   крупнее и с большим воздухом.
   ------------------------------------------------------------ */

.ipps-page .ipps-cards {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 48px);
  margin-top: var(--ipps-gap-inner);
}

.ipps-page .ipps-card {
  flex: 1 1 250px;
  min-width: 0;
}

.ipps-page .ipps-card-role {
  display: block;
  margin-bottom: 8px;
  font-family: var(--ipps-sans);
  font-weight: 500;
  font-size: var(--ipps-fs-label);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ipps-accent);
}

.ipps-page .ipps-card-name {
  display: block;
  margin-bottom: 10px;
  font-family: var(--ipps-serif);
  font-size: var(--ipps-fs-h3);
  line-height: 1.3;
  color: var(--ipps-ink);
}

/* Телефон и почта — крупная цель для пальца.
   Подчёркивания нет, как и везде на сайте: ссылку
   отличает акцентный цвет. */
.ipps-page .ipps-card a {
  display: inline-block;
  min-height: 40px;
  padding: 6px 0;
  font-size: var(--ipps-fs-body);
  line-height: 1.5;
  color: var(--ipps-accent);
  text-decoration: none;
  white-space: nowrap;
}

.ipps-page .ipps-card a:hover {
  color: var(--ipps-accent-deep);
}

.ipps-page .ipps-card p {
  font-size: var(--ipps-fs-body);
  line-height: 1.6;
  color: var(--ipps-ink);
}


/* --- Карта ---------------------------------------------------

   Карта вставляется через iframe с Яндекс.Карт. Обёртка задаёт
   пропорции, iframe растягивается по ней: без этого карта
   на телефоне либо сплющивается, либо занимает пол-экрана.
   ------------------------------------------------------------ */

.ipps-page .ipps-map {
  position: relative;
  margin-top: var(--ipps-gap-inner);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--ipps-wash);
}

@media (max-width: 620px) {
  .ipps-page .ipps-map {
    aspect-ratio: 4 / 3;
  }
}

.ipps-page .ipps-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ------------------------------------------------------------
   20. Раскрывающийся раздел

   Для длинных справочных кусков вроде учебной программы.
   Программа курса — это несколько десятков пунктов; если
   оставить их раскрытыми, всё практическое (кому звонить,
   как записаться) уедет вниз и его никто не найдёт.

   Механизм тот же, что у меню и у списка персоналий: тег
   details, без единой строки скриптов.
   ------------------------------------------------------------ */

.ipps-page .ipps-details {
  margin-top: var(--ipps-gap-inner);
}

.ipps-page .ipps-details-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--ipps-sans);
  font-weight: 500;
  font-size: var(--ipps-fs-small);
  color: var(--ipps-accent);
  list-style: none;
}

.ipps-page .ipps-details-toggle::-webkit-details-marker {
  display: none;
}

.ipps-page .ipps-details-toggle::marker {
  content: '';
  font-size: 0;
}

.ipps-page .ipps-details-toggle:hover {
  color: var(--ipps-accent-deep);
}

/* Плюс превращается в минус — обычные текстовые знаки */
.ipps-page .ipps-details-mark {
  font-size: 19px;
  line-height: 1;
}

.ipps-page .ipps-details-less {
  display: none;
}

.ipps-page .ipps-details[open] .ipps-details-more {
  display: none;
}

.ipps-page .ipps-details[open] .ipps-details-less {
  display: inline;
}

.ipps-page .ipps-details-body {
  padding-top: 18px;
  padding-bottom: 4px;
}

.ipps-page .ipps-details-body p {
  margin-bottom: 14px;
}

.ipps-page .ipps-details-body p:last-child {
  margin-bottom: 0;
}


/* ------------------------------------------------------------
   21. Изображение документа

   Для образца сертификата и подобных сканов.

   Фон рамки — цвет бумаги, а не подложка: если файл не
   загрузился или ссылка ещё не подставлена, на странице
   не появится ни серого прямоугольника, ни значка битой
   картинки — просто ничего.

   Тонкая линейка вокруг нужна: у самого сертификата белые
   поля, и без рамки он растворился бы в фоне страницы.
   Это одно из немногих мест на сайте, где линия несёт
   сведения — она показывает край листа.
   ------------------------------------------------------------ */

.ipps-page .ipps-doc {
  width: 100%;
  aspect-ratio: 3 / 2;
  margin-top: var(--ipps-gap-inner);
  border: 1px solid var(--ipps-rule);
  background-color: var(--ipps-paper);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.ipps-page .ipps-doc-caption {
  margin-top: 10px;
  font-size: var(--ipps-fs-label);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ipps-ink-soft);
}


/* ------------------------------------------------------------
   22. Каталог Tilda: список персоналий

   ЭТОТ РАЗДЕЛ УСТРОЕН ИНАЧЕ, ЧЕМ ВСЕ ОСТАЛЬНЫЕ.

   Здесь мы не пишем свою разметку, а переопределяем чужую:
   блок «Каталог товаров» (ST330) собирает карточки сам, своими
   классами вида t-store__card. Поэтому селекторы начинаются
   не с .ipps-page, а с .t-store.

   Задача — превратить сетку карточек в тот же компактный
   список, что был на странице «Персоналии»: миниатюра слева,
   фамилия серифом, должность под ней, подсветка при наведении,
   никаких линеек.

   ГДЕ !important И ПОЧЕМУ
   ------------------------------------------------------------
   Tilda подставляет часть размеров прямо в атрибут style
   у элемента (например, width: 385px у блока с ценой).
   Такие правила из файла стилей обычным способом не
   переопределить — только !important. Везде, где он стоит,
   он стоит по этой причине, а не «на всякий случай».

   ЕСЛИ TILDA ОБНОВИТ БЛОК
   ------------------------------------------------------------
   Имена классов у Tilda меняются редко, но такое возможно.
   Если однажды список «рассыплется» — значит, изменились
   классы. Чинится тем же способом: посмотреть код карточки
   в браузере и поправить имена здесь. Данные при этом
   не пострадают: они лежат в каталоге, а не в разметке.
   ------------------------------------------------------------ */

/* --- Сетка превращается в список --- */

.t-store__grid-cont {
  display: block !important;
  margin: 0 !important;
}

.t-store__card {
  display: flex !important;
  align-items: center;
  gap: 16px;
  width: 100% !important;
  max-width: 860px;
  margin: 0 auto 2px !important;
  padding: 10px 16px !important;
  transition: background-color 0.15s ease;
}

.t-store__card:hover {
  background-color: var(--ipps-wash);
}

/* Ровный ритм списка.

   У кого фотографии нет, Tilda не выводит и рамку под неё,
   и строка получается ниже соседних. В длинном списке это
   заметно: он начинает «дышать» неравномерно.

   Минимальная высота выравнивает все строки по высоте
   миниатюры, независимо от того, есть снимок или нет. */
.t-store__card {
  min-height: calc(var(--ipps-thumb) + 20px);
}

.t-store__card[data-product-part-uid="385940586963"] {
  min-height: calc(var(--ipps-thumb-lead) + 40px);
}


/* --- Миниатюра ---

   Tilda задаёт пропорции подкладкой снизу (padding-bottom:100%).
   Здесь вместо этого простые ширина и высота: миниатюра всегда
   72 пикселя, как и на остальных страницах сайта. */

.t-store__card__imgwrapper_column {
  flex: 0 0 var(--ipps-thumb) !important;
  width: var(--ipps-thumb) !important;
  margin: 0 !important;
}

.t-store__card__imgwrapper {
  width: var(--ipps-thumb) !important;
  height: var(--ipps-thumb) !important;
  padding-bottom: 0 !important;
  background-color: var(--ipps-wash);
}

.t-store__card__bgimg {
  background-size: cover !important;
  background-position: center top !important;
}


/* --- Текст --- */

.t-store__card__contentwrapper {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
}

.t-store__card__textwrapper {
  padding: 0 !important;
}

.t-store__card__title {
  margin: 0 !important;
  font-family: var(--ipps-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(18px, 1.5vw, 21px) !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  color: var(--ipps-ink) !important;
}

.t-store__card__descr {
  margin: 4px 0 0 !important;
  font-family: var(--ipps-sans) !important;
  font-size: var(--ipps-fs-small) !important;
  line-height: 1.45 !important;
  color: var(--ipps-ink-soft) !important;
}

.t-store__card a,
.t-store__card a:hover {
  text-decoration: none !important;
}


/* --- Цена, кнопки, артикул: этого здесь нет ---

   Каталог используется как справочник, а не как магазин.
   Цена не заполнена ни у кого, но пустые блоки всё равно
   занимают место и ломают выравнивание строки. */

.t-store__card__price-buttons,
.t-store__card__price-wrapper,
.t-store__card__btns-wrapper,
.t-store__card__mark,
.js-store-prod-sku {
  display: none !important;
}


/* --- Заголовок раздела внутри каталога --- */

.t-store__tabs__button,
.t-store__parts-switch-btn {
  font-family: var(--ipps-sans) !important;
  font-size: var(--ipps-fs-label) !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Корзина не нужна: справочник ничего не продаёт */
.t-store__prod-popup__btn-wrapper,
.t706__carticon,
.t706 {
  display: none !important;
}


/* --- Страница человека (попап каталога) --- */

.t-store__prod-popup__title,
.t-store__prod-snippet__title {
  font-family: var(--ipps-serif) !important;
  font-weight: 400 !important;
  color: var(--ipps-ink) !important;
}

.t-store__prod-popup__text,
.t-store__prod-popup__descr {
  font-family: var(--ipps-sans) !important;
  font-size: var(--ipps-fs-small) !important;
  line-height: 1.7 !important;
  color: var(--ipps-ink-soft) !important;
}

.t-store__prod-popup__price-wrapper,
.t-store__prod-popup__btn {
  display: none !important;
}


/* ------------------------------------------------------------
   ТЕЛЕФОН И ПЛАНШЕТ

   У Tilda для узких экранов свои правила: карточка становится
   столбиком (фотография сверху, текст под ней), текст —
   по центру, а высота задаётся заранее под сетку. От этого
   на телефоне список рассыпался: снимки слева, подписи
   посередине, между записями провалы в пол-экрана.

   Здесь строка возвращается к тому же виду, что и на большом
   экране: миниатюра слева, текст справа, всё по левому краю.
   ------------------------------------------------------------ */

@media (max-width: 960px) {

  .t-store__card,
  .t-store__card_in-column {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 2px !important;
    padding: 10px 0 !important;
    text-align: left !important;
  }

  .t-store__card__imgwrapper_column {
    flex: 0 0 var(--ipps-thumb) !important;
    width: var(--ipps-thumb) !important;
    max-width: var(--ipps-thumb) !important;
    margin: 0 !important;
  }

  .t-store__card__imgwrapper {
    width: var(--ipps-thumb) !important;
    height: var(--ipps-thumb) !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }

  .t-store__card__contentwrapper,
  .t-store__card__textwrapper {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .t-store__card__title,
  .t-store__card__descr {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Портрет супервизора на телефоне меньше, чем на компьютере:
     иначе он занимает треть экрана и строка снова разъезжается. */
  .t-store__card[data-product-part-uid="385940586963"] .t-store__card__imgwrapper_column,
  .t-store__card[data-product-part-uid="385940586963"] .t-store__card__imgwrapper {
    flex-basis: 104px !important;
    width: 104px !important;
    max-width: 104px !important;
    height: 104px !important;
  }

  .t-store__card[data-product-part-uid="385940586963"] {
    gap: 16px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    min-height: 132px !important;
  }
}


/* --- Тёмная полоса над открытым профилем ---

   Полосу с крестиком Tilda красит в цвет затемнения фона.
   У пяти блоков каталога настройки задавались по отдельности,
   и где-то осталось тёмное значение — отсюда чёрная плашка
   у супервизоров и белая у остальных.

   Чтобы это не зависело от настроек каждого блока, цвет
   задаётся здесь один раз для всех. */

/* Полоса со ссылкой «Ко всем персоналиям».

   Раньше она была прозрачной, и сквозь неё просвечивала
   страница: тёмный текст поверх чужих фотографий читался
   плохо. Теперь полоса сплошная, цвета бумаги, и ссылка
   на ней видна всегда — независимо от того, что под окном.

   Класс здесь именно close-txt-wr: close-wrapper у Tilda
   отвечает только за крестик справа. */

/* Ссылка и крестик — светлые, а не тёмные.

   Обе попытки подложить под ссылку фон оказались неудачны:
   подложка под текстом обрывалась ни на чём и читалась как
   заплатка, а полоса во всю ширину вылезала за край окна —
   у Tilda этот блок позиционирован, и width: 100% считается
   не от того родителя. Отсюда и горизонтальная прокрутка.

   Решение проще и надёжнее: ссылка и крестик лежат не на
   окне, а на затемнённой странице — значит, и вести себя
   должны как надписи на тёмном. Светлый текст на затемнении
   читается всегда, и никакого фона для этого не нужно:
   ни заплаток, ни полос, ни выравнивания по чужому краю.

   Затемнение задано здесь же, чтобы контраст не зависел
   от настроек каждого из пяти блоков каталога. */

.t-popup {
  background-color: rgba(26, 26, 28, 0.55) !important;
}

.t-popup__close,
.t-store__prod-popup__close-wrapper,
.t-store__prod-popup__close-txt-wr {
  background: none !important;
}

.t-store__prod-popup__close-txt {
  background: none !important;
  padding: 0 !important;
}

.t-store__prod-popup__close-txt::after {
  color: var(--ipps-paper) !important;
}

.t-store__prod-popup__close-txt:hover::after {
  color: #FFFFFF !important;
}

.t-popup__close-icon svg,
.t-popup__close svg {
  fill: var(--ipps-paper) !important;
}

.t-popup__close-icon line,
.t-popup__close line,
.t-popup__close path {
  stroke: var(--ipps-paper) !important;
}


/* --- Пустое место вокруг блока ---

   У блока ST330 своя вертикальная набивка, свой заголовок
   и своя полоса вкладок. Если заголовок и вкладки не нужны,
   пустые области всё равно занимают место — до полутысячи
   точек над первой карточкой. Здесь они сведены к нулю.

   Отступы самого блока задаются ещё и в его настройках:
   «Отступы» → сверху и снизу 0. Одним CSS их не убрать. */

.t-store {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.t-store__wrapper,
.t-store__grid-cont,
.js-store-grid-cont {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
  /* Tilda рассчитывает высоту сетки заранее, под карточки
     в столбик. Мы превратили их в строки, и посчитанная
     высота остаётся пустым полем в несколько сотен точек.
     Поэтому высота сбрасывается принудительно. */
  height: auto !important;
}

/* --- Скелет-заглушка. Это и было пустое место ---

   Пока каталог грузит людей, Tilda показывает на их месте
   серые прямоугольники-заглушки: t-store__card-preloader,
   у каждого margin-bottom 30px и высота от подкладки
   padding-bottom: 25%. Три такие заглушки давали около
   пятисот точек пустоты.

   После загрузки Tilda должна их убрать, но здесь она этого
   не делает: мы превратили сетку в список, и её расчёты
   перестали совпадать с разметкой. Поэтому заглушки просто
   выключены — люди появляются на десятую долю секунды позже,
   зато без пустого экрана перед ними. */

.t-store__card-preloader,
.t-store__card__img-preloader,
.js-store-grid-cont-preloader,
.t-store__grid-cont-preloader,
.t-store__grid-cont-preloader_hidden::before {
  display: none !important;
}

/* Служебные области блока, которых в справочнике быть не должно:
   «Смотрите также», сортировка, счётчик товаров, разделитель. */
.t-store__relevants,
.t-store__relevants__container,
.t-store__sort,
.t-store__product-snippet,
.t-store__stat,
.t-store__grid-separator {
  display: none !important;
}

/* Первый экран на странице, где сразу под ним идёт каталог.

   У обычного ipps-hero снизу до 130 точек, а у заголовка
   раздела сверху ещё до 72 — вместе получалось двести точек
   пустоты между оглавлением и первым разделом. Здесь нижний
   отступ уменьшен: расстояние задаёт заголовок раздела.

   Ставится дополнительным классом рядом с ipps-hero. */
.ipps-page .ipps-hero-tight {
  padding-bottom: clamp(18px, 2vw, 30px);
}


/* Заголовок раздела перед блоком каталога.

   Обычный ipps-section даёт сверху до 130 точек воздуха.
   Здесь этого много: под заголовком сразу идёт блок каталога
   со своими отступами. Поэтому у заголовков над каталогом
   отступ меньше, а снизу — только небольшой зазор. */
.ipps-page .ipps-section-store {
  padding-top: clamp(44px, 5vw, 72px);
}

.ipps-page .ipps-section-store h2 {
  margin-bottom: 18px;
}

/* Кнопка «Показать ещё», если раздел длинный */
.t-store__load-more-btn,
.t-store__showmore-btn {
  font-family: var(--ipps-sans) !important;
  font-size: var(--ipps-fs-small) !important;
  color: var(--ipps-accent) !important;
  background: none !important;
  border: 0 !important;
}

.t-store__title,
.t-store__filter,
.t-store__sort-wrapper,
.t-store__parts-switch-wrapper {
  margin-top: 0 !important;
  margin-bottom: clamp(20px, 2vw, 28px) !important;
}

/* Полоса вкладок с разделами. При пяти отдельных блоках
   она не нужна — каждый блок показывает свой раздел,
   а название раздела стоит обычным заголовком h2. */
.t-store__tabs-wrapper,
.t-store__parts-switch {
  display: none !important;
}


/* --- Супервизоры крупнее остальных ---

   Раздел «Супервизоры и тренинг-аналитики» на прежней странице
   выделялся большим портретом. Здесь то же самое сделано
   по признаку раздела: у карточек Tilda проставляет
   data-product-part-uid, и у супервизоров он свой.

   ЕСЛИ ПЕРЕСТАНЕТ РАБОТАТЬ: значит, у раздела поменялся
   номер. Посмотреть новый — тем же способом: правой кнопкой
   по карточке → «Просмотреть код» → найти в строке
   data-product-part-uid. */

/* ВНИМАНИЕ: правила ниже заперты в медиазапрос «шире 960».

   Без него они шли в файле позже мобильных и перебивали их:
   вес одинаковый, оба с !important, побеждает последнее.
   Отсюда и были на телефоне портреты во всю ширину. */

@media (min-width: 961px) {

.t-store__card[data-product-part-uid="385940586963"] {
  gap: 26px;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* Портрет крупнее обычной миниатюры, но остаётся квадратным.

   Вытянутый портрет 4:5 рядом с двумя строчками текста
   оставлял справа пустое поле в половину строки. Квадрат
   такого не даёт, а разница в размере всё равно читается. */
.t-store__card[data-product-part-uid="385940586963"] .t-store__card__imgwrapper_column {
  flex: 0 0 var(--ipps-thumb-lead) !important;
  width: var(--ipps-thumb-lead) !important;
  max-width: var(--ipps-thumb-lead) !important;
}

.t-store__card[data-product-part-uid="385940586963"] .t-store__card__imgwrapper {
  width: var(--ipps-thumb-lead) !important;
  max-width: var(--ipps-thumb-lead) !important;
  height: var(--ipps-thumb-lead) !important;
  padding-bottom: 0 !important;
}

}

/* Шрифт у супервизоров такой же, как у остальных.

   Иерархию показывает только размер портрета. Если увеличить
   ещё и кегль, строка перестаёт быть строкой того же списка
   и превращается в отдельный элемент — а список должен
   читаться как единое целое. */


/* --- Кликается вся строка целиком ---

   Tilda делает ссылкой только имя и фотографию. На прежней
   странице нажималась вся строка, и это удобнее: цель для
   пальца во всю ширину колонки, а не два отдельных пятна.

   Приём стандартный: невидимый слой от ссылки растягивается
   на всю карточку. Разметку менять не нужно. */

.t-store__card {
  position: relative;
}

.t-store__card__textwrapper > a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}


/* --- Всплывающее окно с биографией -----------------------------

   В настройках блока задать вручную:
     РАДИУС СКРУГЛЕНИЯ ПОПАПА — 0
     ЦВЕТ ФОНА ВСПЛЫВАЮЩЕГО ОКНА — F6F4EF
     ЗАТЕМНЕНИЕ ФОНА: ЦВЕТ — 1A1A1C, непрозрачность 45%
     ЯЗЫК БЛОКА — русский (иначе «More products» по-английски)
   -------------------------------------------------------------- */

.t-store__prod-popup__container,
.t-popup__container {
  background-color: var(--ipps-paper) !important;
  border-radius: 0 !important;
}

/* Имя в окне.

   На узком экране снимок и имя стоят друг под другом, и Tilda
   не оставляет между ними воздуха — имя буквально прилипает
   к нижнему краю фотографии. Отступ сверху это исправляет;
   на широком экране, где они стоят рядом, он не мешает. */
.t-store__prod-popup__title {
  margin-top: 30px !important;
  margin-bottom: 16px !important;
  font-family: var(--ipps-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(23px, 2.2vw, 30px) !important;
  line-height: 1.24 !important;
  color: var(--ipps-ink) !important;
}

/* Отступ над именем нужен и на большом экране: окно всё равно
   выкладывает снимок и имя друг под другом, и без него имя
   прилипает к нижнему краю фотографии. */

.t-store__prod-popup__text,
.t-store__prod-popup__text * {
  font-family: var(--ipps-sans) !important;
  font-size: var(--ipps-fs-small) !important;
  line-height: 1.7 !important;
  color: var(--ipps-ink-soft) !important;
}

/* Артикул, цена, кнопка покупки и «поделиться» в справочнике
   не нужны: это карточка человека, а не товара */
.t-store__prod-popup__sku,
.t-store__prod-popup__price-wrapper,
.t-store__prod-popup__btn,
.t-store__prod-popup__opts,
.t-store__prod-popup__sharing,
.t-store__relevants__container {
  display: none !important;
}

/* Надпись «More products» слева вверху окна.

   Это встроенный текст Tilda, по-английски, и настройка языка
   его не меняет. Класс — t-store__prod-popup__close-txt
   (именно txt, не text).

   Приём: собственный текст элемента обнуляется по кеглю,
   а нужная надпись подставляется через content. Разметку
   Tilda при этом не трогаем — она обновится, надпись
   останется на месте.

   Чтобы изменить формулировку, править строку в content. */

.t-store__prod-popup__close-txt {
  font-size: 0 !important;
  color: transparent !important;
  opacity: 1 !important;
}

.t-store__prod-popup__close-txt::after {
  content: '← Ко всем персоналиям';
  font-family: var(--ipps-sans);
  font-size: var(--ipps-fs-small);
  font-weight: 500;
  color: var(--ipps-accent);
  white-space: nowrap;
}

.t-store__prod-popup__close-txt:hover::after {
  color: var(--ipps-accent-deep);
}


/* --- Полоса с кнопкой возврата на телефоне ---

   На узком экране Tilda показывает не крестик справа, а стрелку
   слева в отдельной полосе наверху. Полоса полупрозрачная,
   и тёмная стрелка на ней читается плохо.

   На телефоне полоса делается сплошной, цвета бумаги,
   а стрелка — тёмной. На большом экране всё остаётся как есть:
   там надписи лежат прямо на затемнении и потому светлые. */

@media (max-width: 960px) {

  .t-popup__close {
    background-color: var(--ipps-paper) !important;
  }

  .t-popup__close-icon svg,
  .t-popup__close svg {
    fill: var(--ipps-ink) !important;
  }

  .t-popup__close-icon line,
  .t-popup__close line,
  .t-popup__close path {
    stroke: var(--ipps-ink) !important;
  }

  .t-store__prod-popup__close-txt::after {
    color: var(--ipps-ink) !important;
  }
}


/* --- Инициалы вместо отсутствующей фотографии ---

   Если снимка нет, Tilda не выводит и рамку под него.
   Небольшой скрипт на странице подставляет вместо неё
   инициалы — так же, как было на прежней странице.

   Оформление задаётся здесь, чтобы рамка с инициалами
   ничем не отличалась по размеру от рамки с фотографией
   и строки в списке оставались одной высоты. */

/* Пустая рамка у людей без фотографии.

   Tilda выводит рамку под снимок всегда, даже когда снимка
   нет. Рядом с инициалами она давала бы вторую пустую
   клетку, поэтому у таких карточек прячется. */
.t-store__card[data-ipps-ini="set"] .t-store__card__imgwrapper_column {
  display: none !important;
}

.ipps-store-ini {
  flex: 0 0 var(--ipps-thumb);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ipps-thumb);
  height: var(--ipps-thumb);
  background-color: var(--ipps-wash);
  font-family: var(--ipps-serif);
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--ipps-ink-soft);
}

.t-store__card[data-product-part-uid="385940586963"] .ipps-store-ini {
  flex-basis: var(--ipps-thumb-lead);
  width: var(--ipps-thumb-lead);
  height: var(--ipps-thumb-lead);
  font-size: 30px;
}

@media (max-width: 960px) {
  .t-store__card[data-product-part-uid="385940586963"] .ipps-store-ini {
    flex-basis: 104px;
    width: 104px;
    height: 104px;
    font-size: 22px;
  }
}


/* --- Снимок не увеличивается по щелчку ---

   Tilda открывает фотографию во весь экран, если по ней
   нажать. Здесь это ни к чему: исходники в сотню точек,
   и во весь экран они превращаются в пятно. Нажатие
   по снимку просто отключено, вид курсора тоже обычный.

   На тексте и на крестике нажатия работают как прежде. */

.t-store__prod-popup__slider,
.t-store__prod-popup__col-left,
.t-store__prod-popup__imgwrapper,
.t-popup__container .t-slds,
.t-popup__container .t-slds__bgimg,
.t-popup__container .t-slds__item,
.t-popup__container .t-slds__wrapper {
  pointer-events: none !important;
  cursor: default !important;
}

.t-store__prod-popup__gallery-zoom,
.t-slds__lupa,
.t-slds__arrow_wrapper,
.t-slds__bullet_wrapper {
  display: none !important;
}


/* --- Фотография внутри окна не должна быть большой ---

   Исходники около 100–200 точек по стороне. В маленькой
   миниатюре это незаметно, а во всплывающем окне Tilda
   растягивает их на половину экрана, и вся мягкость
   становится видна.

   Поэтому здесь портрет ограничен 240 точками — примерно
   вдвое больше миниатюры и всё ещё в пределах разрешения
   исходника. Текст занимает освободившееся место. */

/* ВАЖНО: внутренности слайдера трогать нельзя.

   Фотография в окне лежит в слайдере Tilda, а он считает
   размеры своих частей скриптом при открытии. Если задать
   ширину его внутренним элементам (t-slds__item, __bgimg,
   __items-wrapper), расчёт и разметка перестают совпадать,
   и вместо снимка остаётся серый прямоугольник. Так и было.

   Поэтому здесь ограничивается только внешняя колонка,
   и только на большом экране: max-width, без width,
   без вмешательства в слайдер. На телефоне снимок занимает
   всю ширину — так и надо.

   Если и этого не хватит, лучше оставить снимок как есть,
   чем снова его сломать. */

@media (min-width: 961px) {
  .t-store__prod-popup__col-left {
    max-width: 280px !important;
  }

  .t-store__prod-popup__col-right,
  .t-store__prod-popup__info {
    max-width: none !important;
  }
}


/* ------------------------------------------------------------
   23. Новости: настраиваемый CMS-поток, блок FD101N

   Блок привязан к записи rec3109252001 на странице /novosti.
   Запись указана через [id="..."] (вес обычного атрибута),
   а не через #id: так правила остаются предсказуемыми.

   На карточке остаются дата, заголовок и краткое описание.
   Полный текст выводится только на подробной странице.
   ------------------------------------------------------------ */

/* --- Общая основа блока --- */

[id="rec3109252001"],
[id="rec3109252001"] *,
[id="rec3109252001"] *::before,
[id="rec3109252001"] *::after {
  box-sizing: border-box;
}

[id="rec3109252001"] {
  background-color: var(--ipps-paper);
  color: var(--ipps-ink);
  font-family: var(--ipps-sans);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* У Tilda на записи стоят встроенные отступы 90px. */
[id="rec3109252001"].t-rec[data-record-type="3251"] {
  padding-top: clamp(64px, 8vw, 104px) !important;
  padding-bottom: clamp(80px, 10vw, 128px) !important;
}

/* --- Заголовок страницы /novosti --- */

[id="rec3109252001"] .t2823__container_header,
[id="rec3109252001"] .t2823__container_items,
[id="rec3109252001"] .t2823__container_buttons,
[id="rec3109252001"] .t2823__container_page {
  width: 100%;
  max-width: var(--ipps-max-page);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ipps-gutter);
  padding-right: var(--ipps-gutter);
}

[id="rec3109252001"] .t2823__container_header {
  margin-bottom: clamp(42px, 5vw, 64px);
}

[id="rec3109252001"] .t2823__container_header .t2823__col,
[id="rec3109252001"] .t2823__container_header .t-section__container,
[id="rec3109252001"] .t2823__container_header .t-col {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

[id="rec3109252001"] .t-section__title {
  width: 100%;
  max-width: var(--ipps-max-read);
  margin: 0 auto;
  padding: 0;
  font-family: var(--ipps-serif);
  font-weight: 400;
  font-size: var(--ipps-fs-display);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-align: left;
  text-wrap: balance;
  color: var(--ipps-ink);
}

[id="rec3109252001"] .t-section__descr {
  width: 100%;
  max-width: var(--ipps-max-read);
  margin: 20px auto 0;
  /* Tilda добавляет сюда 80px снизу после инициализации CMS. */
  padding: 0 !important;
  font-family: var(--ipps-sans);
  font-weight: 400;
  font-size: var(--ipps-fs-lead);
  line-height: 1.6;
  text-align: left;
  text-wrap: pretty;
  color: var(--ipps-ink-soft);
}

/* --- Список новостей --- */

[id="rec3109252001"] .t2823__container_items {
  display: block;
}

/* FD101N помещает список в дополнительную колонку t-col_8.
   Без auto-полей сама колонка остаётся прижатой влево,
   даже если список уже центрирован внутри неё. */
[id="rec3109252001"] .t2823__container_items > .t-col {
  float: none;
  margin-left: auto !important;
  margin-right: auto !important;
}

[id="rec3109252001"] .t2823__items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  width: 100%;
  max-width: var(--ipps-max-read);
  /* У FD101N позднее правило Tilda сбрасывает auto в ноль,
     поэтому центрирование закреплено явно. */
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0;
  list-style: none;
}

[id="rec3109252001"] .t-cms__card {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  background-color: transparent;
  transition: background-color 0.15s ease;
}

/* У исходного блока между строками стоят серые линейки. */
[id="rec3109252001"] .t-cms__card::after {
  display: none;
}

[id="rec3109252001"] .t-cms__card:hover {
  background-color: var(--ipps-wash);
}

[id="rec3109252001"] .t-cms__card__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  color: var(--ipps-accent);
}

[id="rec3109252001"] .t-cms__card__link:focus-visible {
  outline: 2px solid var(--ipps-accent);
  outline-offset: 3px;
}

[id="rec3109252001"] .t-cms__card__cell_txt {
  display: flex;
  flex-direction: column;
  /* Нативный блок добавляет 30px между каждым полем.
     Ниже расстояния задаются отдельно для даты и анонса. */
  gap: 0 !important;
  width: 100%;
  min-width: 0;
  padding: 22px 18px 24px;
}

[id="rec3109252001"] .t-cms__card__molecule {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* Точки-разделители нужны только при выводе полей в одну строку. */
[id="rec3109252001"] .t-cms__card__separator {
  display: none;
}

/* Дата — первая строка карточки. */
[id="rec3109252001"] .t-cms__card__molecule:has([data-style="text_typo"]) {
  order: 1;
  margin-bottom: 9px;
}

[id="rec3109252001"] .t-cms__card__atom[data-style="text_typo"] {
  display: block;
  font-family: var(--ipps-sans);
  font-weight: 500;
  font-size: var(--ipps-fs-label);
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--ipps-ink-soft);
}

/* Заголовок. */
[id="rec3109252001"] .t-cms__card__molecule:has([data-style="title_typo"]) {
  order: 2;
}

[id="rec3109252001"] .t-cms__card__atom[data-style="title_typo"] {
  display: block;
  font-family: var(--ipps-serif);
  font-weight: 400;
  font-size: var(--ipps-fs-h3);
  line-height: 1.35;
  color: var(--ipps-ink);
  transition: color 0.15s ease;
}

[id="rec3109252001"] .t-cms__card:hover .t-cms__card__atom[data-style="title_typo"] {
  color: var(--ipps-accent-deep);
}

/* Краткое описание. */
[id="rec3109252001"] .t-cms__card__molecule:has([data-style="subtitle_typo"]) {
  order: 3;
  margin-top: 8px;
}

[id="rec3109252001"] .t-cms__card__atom[data-style="subtitle_typo"] {
  display: block;
  font-family: var(--ipps-sans);
  font-weight: 400;
  font-size: var(--ipps-fs-small);
  line-height: 1.6;
  color: var(--ipps-ink-soft);
}

/* Страховка до ручной очистки настроек блока:
   полный текст не должен повторяться в карточке списка. */
[id="rec3109252001"] .t-cms__card__molecule:has(.t-cms__card__atom.t-text_xs) {
  display: none;
}

/* --- Подробная страница новости --- */

[id="rec3109252001"] .t-cms__page-container {
  min-height: 0;
  background-color: var(--ipps-paper);
  color: var(--ipps-ink);
}

/* Верхняя полоса превращена в компактную ссылку возврата,
   выровненную по внешнему краю читательской колонки.
   Сплошная линейка и дублирующее название Потока убраны. */
[id="rec3109252001"] .t-cms__page-header {
  min-height: 60px;
  padding-left: max(var(--ipps-gutter), calc((100vw - var(--ipps-max-read)) / 2));
  padding-right: max(var(--ipps-gutter), calc((100vw - var(--ipps-max-read)) / 2));
  background-color: var(--ipps-paper);
  border-bottom: 0;
  box-shadow: none;
  color: var(--ipps-ink);
  z-index: 3;
}

[id="rec3109252001"] .t-cms__page-header__back-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto !important;
  min-width: 0;
  height: 44px;
  padding: 0 4px !important;
  font-family: var(--ipps-sans);
  font-weight: 500;
  font-size: var(--ipps-fs-small);
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ipps-accent);
  transition: color 0.15s ease;
}

[id="rec3109252001"] .t-cms__page-header__back-button::after {
  content: 'Все новости';
}

[id="rec3109252001"] .t-cms__page-header__back-button:hover {
  color: var(--ipps-accent-deep);
}

[id="rec3109252001"] .t-cms__page-header__back-button:focus-visible {
  outline: 2px solid var(--ipps-accent);
  outline-offset: 3px;
}

[id="rec3109252001"] .t-cms__page-header__title {
  display: none;
}

[id="rec3109252001"] .t-cms__page-wrapper {
  display: block;
  width: 100%;
  max-width: var(--ipps-max-read);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 72px) var(--ipps-gutter) clamp(88px, 10vw, 132px);
}

[id="rec3109252001"] .t-cms__page {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--ipps-ink);
}

[id="rec3109252001"] .t-cms__page__cell_txt {
  display: flex;
  flex-direction: column;
  /* Без этого Tilda оставляет 30px между полями и визуальный
     порядок отличается при первом открытии и после F5. */
  gap: 0 !important;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

[id="rec3109252001"] .t-cms__page__molecule {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

[id="rec3109252001"] .t-cms__page__separator {
  display: none;
}

/* Заголовок подробной страницы. */
[id="rec3109252001"] .t-cms__page__molecule:has([data-style="post_title_typo"]) {
  order: 1;
}

[id="rec3109252001"] .t-cms__page__atom[data-style="post_title_typo"] {
  display: block;
  font-family: var(--ipps-serif);
  font-weight: 400;
  font-size: var(--ipps-fs-display);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--ipps-ink);
}

/* Страховка до удаления второго Title в настройках блока. */
[id="rec3109252001"] .t-cms__page__molecule:has([data-style="post_title_typo"])
  ~ .t-cms__page__molecule:has([data-style="post_title_typo"]) {
  display: none;
}

/* Дата под заголовком. */
[id="rec3109252001"] .t-cms__page__molecule:has([data-style="post_text_typo"]) {
  order: 2;
  margin-top: 18px;
}

[id="rec3109252001"] .t-cms__page__atom[data-style="post_text_typo"] {
  display: block;
  font-family: var(--ipps-sans);
  font-weight: 500;
  font-size: var(--ipps-fs-label);
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--ipps-ink-soft);
}

/* Основной текст. В текущем FD101N поле «ТЕКСТ» получает
   стиль post_descr_typo; post_subtitle_typo оставлен как
   запасной вариант, если стиль поля изменится в редакторе. */
[id="rec3109252001"] .t-cms__page__molecule:has([data-style="post_descr_typo"]),
[id="rec3109252001"] .t-cms__page__molecule:has([data-style="post_subtitle_typo"]) {
  order: 3;
  margin-top: clamp(30px, 4vw, 44px);
}

[id="rec3109252001"] .t-cms__page__atom[data-style="post_descr_typo"],
[id="rec3109252001"] .t-cms__page__atom[data-style="post_subtitle_typo"] {
  display: block;
  font-family: var(--ipps-sans);
  font-weight: 400;
  font-size: var(--ipps-fs-body);
  line-height: 1.75;
  color: var(--ipps-ink);
  overflow-wrap: break-word;
}

[id="rec3109252001"] .t-cms__page__text strong {
  font-weight: 600;
}

[id="rec3109252001"] .t-cms__page__text em {
  font-style: italic;
}

[id="rec3109252001"] .t-cms__page__text a {
  color: var(--ipps-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: auto;
}

[id="rec3109252001"] .t-cms__page__text a:hover {
  color: var(--ipps-accent-deep);
}

[id="rec3109252001"] .t-cms__page__text ul,
[id="rec3109252001"] .t-cms__page__text ol {
  margin: 18px 0 22px;
  padding-left: 1.4em;
}

[id="rec3109252001"] .t-cms__page__text li {
  margin: 8px 0;
  padding-left: 0.2em;
}

[id="rec3109252001"] .t-cms__page__text img {
  display: block;
  width: 100%;
  height: auto;
  margin: 34px 0;
}

@media (max-width: 600px) {
  [id="rec3109252001"].t-rec[data-record-type="3251"] {
    padding-top: 54px !important;
    padding-bottom: 82px !important;
  }

  [id="rec3109252001"] .t2823__container_header {
    margin-bottom: 34px;
  }

  [id="rec3109252001"] .t-section__descr {
    margin-top: 16px;
  }

  [id="rec3109252001"] .t-cms__card__cell_txt {
    padding: 20px 0 22px;
  }

  [id="rec3109252001"] .t-cms__page-wrapper {
    padding-top: 50px;
    padding-bottom: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [id="rec3109252001"] *,
  [id="rec3109252001"] *::before,
  [id="rec3109252001"] *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  [id="rec3109252001"].t-rec[data-record-type="3251"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  [id="rec3109252001"] .t-cms__page-header {
    display: none;
  }

  [id="rec3109252001"] .t-cms__card,
  [id="rec3109252001"] .t-cms__page {
    break-inside: avoid;
  }
}


/* ------------------------------------------------------------
   24. Печать

   Навигация, действия и раскрывающие знаки не печатаются.
   Контакты остаются: распечатанная страница без телефона
   бесполезна. Биографии печатаются раскрытыми независимо
   от того, были они открыты на экране или нет.
   ------------------------------------------------------------ */

@media print {
  .ipps-page .ipps-header,
  .ipps-page .ipps-toc,
  .ipps-page .ipps-foot-list,
  .ipps-page .ipps-foot-title,
  .ipps-page .ipps-actions,
  .ipps-page .ipps-more,
  .ipps-page .ipps-row-arrow,
  .ipps-page .ipps-member-mark,
  .ipps-page .ipps-banner,
  .ipps-page .ipps-map {
    display: none;
  }

  .ipps-page {
    background: none;
    color: #000;
    font-size: 11pt;
  }

  .ipps-page a {
    color: #000;
    text-decoration: none;
  }

  /* Строка персоналии без подсветки и без выносных полей */
  .ipps-page .ipps-member-head {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    background: none;
  }

  /* Раскрывает свёрнутые биографии */
  .ipps-page .ipps-member-bio,
  .ipps-page .ipps-person-rest,
  .ipps-page .ipps-details-body {
    display: block;
  }

  .ipps-page .ipps-person-toggle,
  .ipps-page .ipps-details-toggle {
    display: none;
  }

  /* Браузеры по умолчанию не печатают фоновые изображения.
     Чтобы портреты попали на бумагу, в окне печати нужно
     включить «Графика фона» / «Background graphics». */

  .ipps-page .ipps-section,
  .ipps-page .ipps-person,
  .ipps-page .ipps-member {
    break-inside: avoid;
  }
}