/* frio — цвета по брендбуку фонда 2026 в :root, варианты для показа — [data-theme]; см. design.md. */

/* Шрифты — одна семья Sofia Sans (OFL), родственница надписи знака (Bahnschrift Condensed); выбор пользователя
   30.09.2026 из вариантов. Текст и интерфейс — Sofia Sans (400–700), заголовки — Sofia Sans Condensed (400–800);
   оба подрезаны tools/fonts.py до кириллицы и латиницы, русские формы букв вшиты. */
@font-face{
  font-family:"Sofia Sans";
  src:url("../fonts/SofiaSans-Variable.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Sofia Sans Condensed";
  src:url("../fonts/SofiaSansCondensed-Variable.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

/* Варианты палитры для показа заказчику (?v=v2 / ?v=v0, app.js). Стоят ДО :root, чтобы линтер
   гармонии брал по умолчанию v1; в браузере побеждает специфичность [data-theme]. */
/* v2 «сланец и песок»: действия — сланец, тёплые кнопки с тёмным текстом */
:root[data-theme="v2"]{ --brand:#495768; --brand-strong:#394350; --cta-bg:var(--sand); --cta-ink:var(--dark); --cta-hover:#cf9a5c; --sand-soft:color-mix(in srgb, var(--sand) 22%, var(--paper)); }
/* v0 — прежняя заготовка для сравнения: холодный байкальский синий, без песка */
:root[data-theme="v0"]{ --ink:#15212b; --ink-2:#4b5a68; --brand:#0d5c9e; --brand-strong:#0a4a80; --dark:#f4f7f9; --on-dark:#15212b; --on-dark-2:#4b5a68; --sand-soft:var(--paper); }

:root{
  --paper:#ffffff;  --surface:#f4f7f9;  --line:#d5dde4;  --panel:#f1f3f4;  --line-strong:#7f8c99;   /* рамка кнопок: 3,4 : 1 к белому (Н5 A, 12.10.2026) */   /* --panel — светло-серая панель брендбука: развилка, места без фото */
  --ink:#1b2631;    --ink-2:#526170;                       /* брендбук 2026: «почти чёрный» — текст; вторичный — графит 82 % */
  --brand:#2b71a1;  --brand-strong:#235d85;               /* «электрик-синий» #3e92cc того же тона, затемнён до AA — ссылки, кнопки */
  --mark:#3e92cc;   --graphite:#2c3e50;  --sand:#d2925b;   /* брендбук как есть: электрик-синий, графит, медь-охра — знак, полосы, крупное, фон */
  --noc:#0a7a43;    --ok:#197637;   --warn:#8a5a00;   --bad:#a3201f;   /* зелёный плашки «открыто» — 4.8:1 на своей подложке */
  --dark:var(--graphite); --on-dark:#ffffff;  --on-dark-2:#c9d2db;
  --cta-bg:var(--brand); --cta-ink:var(--paper); --cta-hover:var(--brand-strong);
  --brand-soft:color-mix(in srgb, var(--brand) 9%, var(--paper));
  --sand-soft:color-mix(in srgb, var(--sand) 16%, var(--paper));
  --ok-soft:color-mix(in srgb, var(--ok) 12%, var(--paper));
  --warn-soft:color-mix(in srgb, var(--warn) 12%, var(--paper));
  --bad-soft:color-mix(in srgb, var(--bad) 10%, var(--paper));
  --sand-chip:color-mix(in srgb, var(--sand) 32%, var(--paper));
  --ph:color-mix(in srgb, var(--line) 55%, var(--paper));
  --font:"Sofia Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head:"Sofia Sans Condensed", "Arial Narrow", "Sofia Sans", sans-serif;
  /* кегли: 13 — метки и подписи, 16 — описания и интерфейс (было 15: читалось мелко, пункт 20 разбора 08.10.2026), 17 — текст */
  --fs-1:.8125rem; --fs-2:1rem; --fs-3:1.0625rem; --fs-4:1.1875rem;
  --fs-5:1.375rem; --fs-6:1.6875rem; --fs-7:2.125rem; --fs-8:2.75rem;
  /* три межстрочных (пункт 19): крупные заголовки и цифры, заголовки карточек и строк, текст */
  --lh-head:1.1; --lh-title:1.3; --lh-text:1.55;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px;
  --r-1:6px; --r-2:12px; --r-pill:999px;
  --container:1200px; --gutter:20px; --header-h:72px;
  --shadow:0 8px 24px rgb(21 33 43 / .08);
  --t-fast:.16s; --t-base:.28s; --ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:640px){
  :root{ --fs-8:2.125rem; --fs-7:1.6875rem; --header-h:60px; }
}
@media (max-width:480px){
  :root{ --gutter:16px; }
}

/* ---------- база ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* переход по якорю и фокус с клавиатуры не прячут цель под липкой шапкой (пункт 9 разбора, WCAG 2.4.11) */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + var(--s-5)); }
body{
  margin:0; font-family:var(--font); font-size:var(--fs-3); font-size-adjust:.53; line-height:var(--lh-text);
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:var(--brand); text-decoration-thickness:1px; text-underline-offset:.15em; }
a:hover{ color:var(--brand-strong); }
:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; border-radius:var(--r-1); }
/* Заголовки и названия — Sofia Sans Condensed, текст и интерфейс — Sofia Sans. font-size-adjust .53 у обоих держит
   высоту строчных, как была с Golos (от неё шкала --fs-*), поэтому размеры и межстрочное остались прежними. */
h1,h2,h3,h4,.card__title,.news-item__title,.sched__title,.hall__name,.contact-card__role,
.fact__num,.sched__day,.timeline__year{ font-family:var(--font-head); font-size-adjust:.53; }
h1,h2,h3,h4{ margin:0; line-height:var(--lh-head); font-weight:600; text-wrap:balance; }
h3,h4{ line-height:var(--lh-title); }
h1{ font-size:var(--fs-8); font-weight:700; }
h2{ font-size:var(--fs-7); font-weight:700; }
h3{ font-size:var(--fs-5); }
h4{ font-size:var(--fs-4); }
p{ margin:0; }
ul,ol{ margin:0; padding:0; }
.prose > * + *{ margin-top:var(--s-4); }
/* строка текста — до ~70 знаков (пункт 18 разбора, 08.10.2026: в лидах и абзацах было до 79–86) */
.prose{ max-width:62ch; }
.lead{ font-size:var(--fs-4); color:var(--ink-2); max-width:36em; }
.muted{ color:var(--ink-2); }
.small{ font-size:var(--fs-2); }
.tiny{ font-size:var(--fs-1); }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:var(--s-4); top:-100px; z-index:100; padding:var(--s-2) var(--s-3); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-1); }
.skip-link:focus{ top:var(--s-2); }
main{ position:relative; }
#top-sentinel{ position:absolute; top:0; left:0; width:100%; height:1px; pointer-events:none; }

.container{ width:min(var(--container), 100% - var(--gutter) * 2); margin-inline:auto; }
.section{ padding:var(--s-8) 0; }
.section--tint{ background:var(--surface); }
.section__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--s-3) var(--s-5); margin-bottom:var(--s-5); }
.section__head .sub{ color:var(--ink-2); max-width:60ch; margin-top:var(--s-2); }
@media (max-width:640px){ .section{ padding:var(--s-7) 0; } }
/* две секции одного фона подряд: у второй верхний отступ снят, иначе между ними двойная пустота */
.section:not(.section--tint) + .section:not(.section--tint),.section--tint + .section--tint{ padding-top:0; }
.section--snug{ padding-top:var(--s-6); }   /* лента с фильтром сразу под заголовком страницы */
.page-head + .section--snug{ padding-top:0; }   /* лента на белом, как и шапка: воздуха шапки снизу хватает */

/* списки с маркером */
.bul{ list-style:none; }
.bul li{ position:relative; padding-left:var(--s-5); }
.bul li + li{ margin-top:var(--s-2); }
/* строки списков, шагов и примечаний в колонке блоков — до ~70 знаков, как у абзацев (пункт 18 разбора) */
.block .bul,.block .steps,.block .details-list,.block .border-note,.sched__text{ max-width:58ch; }   /* ch у Sofia Sans уже средней буквы: 58ch ≈ 70 знаков */
.bul li::before{ content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; background:var(--mark); }   /* маркеры, черты, полоски — электрик-синим, как в макетах брендбука; медь — только знак наследия (пункты 1 и 3 разбора, 08.10.2026) */

/* пометка «уточняется у заказчика» — снимается перед релизом */
.todo{ background:var(--warn-soft); color:var(--warn); border-radius:var(--r-1); padding:0 var(--s-1); text-decoration:underline dotted; cursor:help; }

/* место фото: с фото — картинка, под ней размытое превью того же кадра (пункт 14 разбора, 08.10.2026: на медленной сети фото
   полсекунды стояли серыми прямоугольниками); без фото — светло-серая панель брендбука со знаком оттиском (пункты 4 и 7) */
.ph{ position:relative; background:var(--ph); border-radius:var(--r-2); overflow:hidden; display:grid; place-items:center; }
.ph--32{ aspect-ratio:3/2; } .ph--43{ aspect-ratio:4/3; } .ph--11{ aspect-ratio:1; } .ph--169{ aspect-ratio:16/9; } .ph--band{ aspect-ratio:16/5; }
.ph--img::after{ content:""; position:absolute; inset:0; background:var(--lqip, none) center / cover no-repeat; }   /* размытие заложено в саму картинку (tools/lqip.py, 13.10.2026): CSS-фильтр blur заставлял видеокарту собирать свои программы — паузы прокрутки */
.ph--img img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; }   /* точно по рамке и по центру: в сетке .ph картинка другой пропорции раздвигала рамку и показывалась от верхнего края (обложка в колонке новостей 5:2, 13.10.2026) */
.ph--band img{ object-position:50% 40%; }
@media (max-width:640px){ .ph--band{ aspect-ratio:16/9; } }
.ph--wm{ background:var(--panel); }
/* знак оттиском: основа знака — 16 % синего, подставка — 26 % (в svg основа .625, тут общая прозрачность) */
.ph--wm .wm{ position:absolute; right:-14%; bottom:-30%; height:140%; width:auto; max-width:none; opacity:.26; }
/* знак — встроенным svg со ссылкой на символ #frio-wm в начале страницы: рисуется вместе с текстом (08.10.2026) */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.wm-svg{ display:block; aspect-ratio:2040 / 2296; color:var(--mark); }
.figure{ margin:0; display:grid; gap:var(--s-2); align-content:start; }
.figure figcaption{ font-size:var(--fs-1); color:var(--ink-2); line-height:var(--lh-title); }

/* кнопки */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); min-height:44px; padding:0 var(--s-5); border-radius:var(--r-1); font:inherit; font-size:var(--fs-2); font-weight:600; line-height:var(--lh-head); text-decoration:none; cursor:pointer; border:1px solid transparent; transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.btn--primary{ background:var(--cta-bg); color:var(--cta-ink); }
.btn--primary:hover{ background:var(--cta-hover); color:var(--cta-ink); }
/* второстепенная кнопка — рамка темнее (выбор Н5 A, 12.10.2026: «кнопки почти не видно» — у #d5dde4 контраст с белым 1,4 : 1) */
.btn--ghost{ background:var(--paper); color:var(--brand); border-color:var(--brand); }   /* синий контур (выбор Кн2 F, 13.10.2026): вторая кнопка рядом с синей первой, 5,3 : 1 */
.btn--ghost:hover{ background:var(--brand-soft); color:var(--brand-strong); border-color:var(--brand-strong); }
.btn--quiet{ background:none; border-color:transparent; color:var(--brand); padding:0 var(--s-2); }   /* второе действие карточки — ссылкой со значком (Кн1 C, 13.10.2026) */
.btn--quiet:hover{ color:var(--brand-strong); text-decoration:underline; text-underline-offset:3px; }
.btn .soc-i{ width:20px; height:20px; flex:none; }
.btn--link{ position:relative; padding:0; min-height:0; color:var(--brand); border:0; background:none; white-space:nowrap; }
.btn--link::after{ content:""; position:absolute; inset:-12px -8px; }   /* поле нажатия 40+ px вокруг «Все новости», «Все контакты» без смены вида (пункт 27) */
.btn--link:hover{ color:var(--brand-strong); }
.btn .icon{ width:20px; height:20px; flex:none; transition:transform var(--t-fast) var(--ease); }
.btn:hover .icon--arrow{ transform:translateX(4px); }
.btn--icon{ width:44px; padding:0; }

.icon{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }

/* чипы */
.chip{ display:inline-flex; align-items:center; gap:var(--s-1); min-height:28px; padding:0 var(--s-3); border-radius:var(--r-pill); font-size:var(--fs-1); font-weight:600; line-height:var(--lh-head); white-space:nowrap; }
.chip--open{ position:relative; isolation:isolate; background:var(--ok-soft); color:var(--ok); }
.chip--open::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ok); }
/* «открыто» — один раз, когда строка появилась на экране: от точки расходится волна (С7 A, 08.10.2026; раньше мигала всегда) */
/* волна — кружок под точкой и под текстом: растёт и гаснет одними transform и opacity, без перерисовки каждый кадр (09.10.2026) */
.chip--open::after{ content:""; position:absolute; z-index:-1; left:var(--s-3); top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--ok); opacity:0; pointer-events:none; }
.chip--open.is-ping::after{ animation:ping 1.2s var(--ease) .2s 1 both; }
@keyframes ping{ from{ opacity:.5; transform:scale(1); } to{ opacity:0; transform:scale(3.67); } }   /* 6 px → 22 px, как была тень 0 → 8 px */
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.7); } }
.chip--soon,.chip--live{ background:var(--warn-soft); color:var(--warn); }
.chip--done{ background:color-mix(in srgb, var(--ink) 10%, var(--paper)); color:var(--ink-2); }   /* серая, отличная и от белого, и от серой подложки секций: на ней плашка сливалась, и слово «Завершено» стояло с отступом (замечание 06.10) */
.section--tint .chip--blue{ background:var(--paper); }   /* светло-синяя на серой подложке почти не видна — на белом */
.chip--tbd{ color:var(--ink-2); border:1px solid var(--line); }
/* цвета статусов из «Справочников»: синий, песочный и тёмный — из знака, красный — сигнальный */
.chip--blue{ background:var(--brand-soft); color:var(--brand); }
.chip--sand{ background:var(--sand-chip); color:var(--ink); }
.chip--red{ background:var(--bad-soft); color:var(--bad); }
.chip--dark{ background:var(--ink); color:var(--paper); }
.chip--sample{ background:var(--warn-soft); color:var(--warn); font-weight:500; }
.chip--noc{ color:var(--noc); border:1px solid var(--line); }
.badge{ display:inline-flex; align-items:center; gap:var(--s-2); min-height:28px; padding:var(--s-1) var(--s-3); border:1px solid var(--line); border-radius:var(--r-pill); color:var(--ink-2); font-size:var(--fs-1); line-height:var(--lh-title); text-decoration:none; }
a.badge{ border-color:var(--line-strong); }   /* метка-ссылка — кнопка: рамка темнее (13.10.2026); подпись span.badge — светлая */
.badge:hover{ color:var(--brand); border-color:var(--brand); }

/* статусы фонда: официальные знаки партнёров без плашек, только на белом и светлом (первый экран, подвал) */
.statuses{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4) var(--s-6); }
.status{ display:inline-flex; align-items:center; gap:var(--s-3); color:var(--ink-2); text-decoration:none; }
.status img{ height:40px; width:auto; }
.status__cap{ display:grid; font-size:var(--fs-2); line-height:var(--lh-head); }
.status__cap b{ font-weight:700; color:var(--ink); }
.status:hover .status__cap,.status:hover .status__cap b{ color:var(--brand); }
@media (max-width:480px){ .statuses{ column-gap:var(--s-5); } .status img,.footer .status img{ height:32px; } .status__cap{ font-size:var(--fs-1); } }

/* ---------- шапка ---------- */
/* при прокрутке верхняя графитовая полоса с адресом уезжает вместе со страницей — шапка прилипает с top:-44px, — а шапка
   с меню остаётся и становится ниже до 60 px (пункт 12 разбора, 08.10.2026: две полосы занимали 117 px, 11–15 % окна);
   с выбора 19A (08.10.2026) — плавно, вместе с прокруткой, без скачка страницы: ниже */
.header{ position:sticky; top:-44px; z-index:50; background:var(--paper); border-bottom:1px solid var(--line); transition:box-shadow var(--t-base) var(--ease); }   /* без overflow-x:clip: вместе со сдвигом шапки при прокрутке он перехватывал нажатия в выпадающих панелях (08.10.2026); закрытые панели у правого края расставляет app.js; вниз панели не режет */
.header.is-scrolled{ box-shadow:var(--shadow); }
@media (max-width:980px){ .header{ top:0; } }   /* на узком экране верхней полосы нет */
/* переход на другую страницу (app.js ставит .is-leaving): полоса растёт по нижней кромке шапки — видно,
   что новая страница грузится, а не сайт завис. Появляется через 150 мс, быстрый переход не мигает. */
.header::after{ content:""; position:absolute; z-index:1; left:0; right:0; bottom:-1px; height:3px; background:var(--mark); transform:scaleX(0); transform-origin:left center; pointer-events:none; }
.is-leaving .header::after{ animation:leaving 8s cubic-bezier(.1,.8,.2,1) .15s both; }
@keyframes leaving{ from{ transform:scaleX(0); } 12%{ transform:scaleX(.45); } to{ transform:scaleX(.92); } }
/* новая страница уже открылась, но сеть ещё отдаёт её остаток (бывает секундами): полоса продолжается на ней,
   пока app.js не отметит конец разбора (.is-ready). Без скрипта гаснет через 12 с. */
html:not(.is-ready) .header::after{ animation:arriving 8s cubic-bezier(.1,.8,.2,1) .15s both, bar-off .3s linear 12s forwards; }
@keyframes arriving{ from{ opacity:0; transform:scaleX(.35); } 2%{ opacity:1; } to{ opacity:1; transform:scaleX(.92); } }
@keyframes bar-off{ to{ opacity:0; } }
.is-leaving,.is-leaving *{ cursor:progress; }
/* и сама страница тускнеет через четверть секунды: видно, что клик принят и она сменяется, а не зависла.
   Переход задан только на вход в состояние — при возврате «назад» страница сразу яркая. */
.is-leaving main{ opacity:.45; transition:opacity .3s var(--ease) .25s; }
.header__in{ display:flex; align-items:center; gap:var(--s-5); min-height:var(--header-h); }
.brand{ display:flex; align-items:center; flex:0 1 auto; min-width:0; color:var(--ink); text-decoration:none; }
/* знак целиком из брендбука — горизонтальная версия, как в подвале: свой шрифт, раскладка в три строки и медь (выбор 05.10) */
.brand__logo{ display:block; height:56px; width:auto; max-width:100%; }
/* шапка ниже плавно, вместе с прокруткой первых 120 px после полосы с адресом (выбор 19A, 08.10.2026): двигаются только сама
   шапка, знак и меню (transform) — раскладка страницы не меняется, текст под шапкой не дёргается. Видимая высота 72 → 60 px:
   шапка уходит вверх на 12 px, знак и меню опускаются на 6 px к середине, знак 56 → 44 px. Без привязки к прокрутке
   (Firefox) — плавный переход по .is-scrolled; при «уменьшить движение» шапка не меняется. */
@media (min-width:981px){
  .brand__logo{ transform-origin:left center; }
  @supports (animation-timeline: scroll()){
    .header{ animation:hdr-bar linear both; animation-timeline:scroll(root block); animation-range:44px 164px; }
    .header__in > *{ animation:hdr-in linear both; animation-timeline:scroll(root block); animation-range:44px 164px; }
    .brand__logo{ animation:hdr-logo linear both; animation-timeline:scroll(root block); animation-range:44px 164px; }
  }
  @supports not (animation-timeline: scroll()){
    .header{ transition:box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
    .header__in > *,.brand__logo{ transition:transform var(--t-base) var(--ease); }
    .header.is-scrolled{ transform:translateY(-12px); }
    .header.is-scrolled .header__in > *{ transform:translateY(6px); }
    .header.is-scrolled .brand__logo{ transform:scale(.786); }
  }
}
@keyframes hdr-bar{ to{ transform:translateY(-12px); } }
@keyframes hdr-in{ to{ transform:translateY(6px); } }
@keyframes hdr-logo{ to{ transform:scale(.786); } }
@media (max-width:640px){ .brand__logo{ height:44px; } }
@media (max-width:400px){ .header__in{ gap:var(--s-2); } .brand__logo{ height:40px; } }
.topbar{ background:var(--dark); color:var(--on-dark); font-size:var(--fs-1); }
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); min-height:44px; }
.topbar__place{ display:flex; align-items:center; gap:var(--s-2) var(--s-5); min-width:0; color:var(--on-dark-2); }
.topbar__contacts{ display:flex; gap:var(--s-5); }
.topbar__place a,.topbar__contacts a{ display:inline-flex; align-items:center; gap:var(--s-2); color:var(--on-dark); text-decoration:none; white-space:nowrap; }
.topbar__place a:hover,.topbar__contacts a:hover{ color:var(--on-dark-2); }
.topbar .icon{ width:16px; height:16px; }
.nav{ margin-left:auto; display:flex; align-items:center; }
.nav__list{ list-style:none; display:flex; align-items:center; gap:var(--s-1); position:relative; }
.nav__item{ position:relative; }   /* панель открывается под своей кнопкой; у края экрана её сдвигает app.js */
.nav__link{ position:relative; display:inline-flex; align-items:center; gap:var(--s-1); min-height:44px; padding:0 var(--s-3); border-radius:var(--r-1); color:var(--ink); text-decoration:none; font-size:var(--fs-2); font-weight:500; line-height:var(--lh-head); white-space:nowrap; background:none; border:0; font-family:inherit; font-size-adjust:inherit; cursor:pointer; }   /* у <button> браузер сбрасывает font-size-adjust своим font — без этого «Направления» мельче «Новостей» */
.nav__link:hover,.nav__link[aria-expanded="true"]{ background:var(--surface); color:var(--ink); }
/* «вы здесь» одинаково у всех пунктов: цвет и подчёркивание — у страницы (aria-current) и у раздела, в котором
   она лежит (.is-current: «Направления» на странице направления, «Проекты» на странице проекта, «Новости» на новости).
   У кнопок-разделов подчёркивание только под словом, без стрелки. */
.nav__link::after{ content:""; position:absolute; left:var(--s-3); right:var(--s-3); bottom:6px; height:2px; background:var(--mark); transform:scaleX(0); transform-origin:left; transition:transform var(--t-fast) var(--ease); }
button.nav__link::after{ right:calc(var(--s-3) + 20px); }
a.nav__link:hover::after,.nav__link[aria-current="page"]::after,.nav__link.is-current::after{ transform:scaleX(1); }
.nav__link[aria-current="page"],.nav__link.is-current{ color:var(--brand); }
.nav__link .icon{ width:16px; height:16px; transition:transform var(--t-fast) var(--ease); }
.nav__link[aria-expanded="true"] .icon{ transform:rotate(180deg); }
.dd{ position:absolute; z-index:2; top:calc(100% + var(--s-2)); left:0; width:560px; max-width:calc(100vw - var(--gutter) * 2); padding:var(--s-5); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-2); box-shadow:var(--shadow); display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); opacity:0; visibility:hidden; transform:translateY(-4px); pointer-events:none; transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast); }
.dd.is-open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s; }
.dd--narrow{ width:320px; grid-template-columns:1fr; }
/* «Направления»: управления друг под другом, направления — две ровные колонки, каждое в одну строку (пункт 24 разбора) */
.dd--dirs{ width:700px; grid-template-columns:1fr; gap:var(--s-4); }
.dd--dirs .dd__sec{ display:grid; grid-template-columns:1fr 1fr; column-gap:var(--s-5); }
.dd--dirs .dd__sec + .dd__sec{ padding-top:var(--s-4); border-top:1px solid var(--line); }
.dd--dirs .dd__group{ grid-column:1 / -1; }
.dd--dirs a{ white-space:nowrap; }
.dd__group{ font-size:var(--fs-1); color:var(--ink-2); margin-bottom:var(--s-2); }
.dd a{ display:block; padding:var(--s-2) var(--s-3); margin:0 calc(var(--s-3) * -1); border-radius:var(--r-1); color:var(--ink); text-decoration:none; font-size:var(--fs-2); }
.dd a:hover{ background:var(--surface); color:var(--brand); }
.dd a[aria-current="page"]{ background:var(--brand-soft); color:var(--brand); font-weight:500; }
.header__phone{ flex:none; display:none; }
.burger{ flex:none; display:none; --bar:2px; --bar-gap:6px; width:44px; height:44px; padding:0; border:1px solid var(--line-strong); border-radius:var(--r-1); background:var(--paper); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:var(--bar-gap); }
.burger span{ display:block; width:20px; height:var(--bar); background:var(--ink); transition:transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease); }
.menu-open .burger span:nth-child(1){ transform:translateY(calc(var(--bar) + var(--bar-gap))) rotate(45deg); }
.menu-open .burger span:nth-child(2){ opacity:0; }
.menu-open .burger span:nth-child(3){ transform:translateY(calc(-1 * (var(--bar) + var(--bar-gap)))) rotate(-45deg); }
.mnav{ display:none; }
@media (max-width:980px){
  .topbar,.nav{ display:none; }
  .header__phone--icon,.burger{ display:inline-flex; }
  .header__phone--icon{ margin-left:auto; }
  .mnav{ position:fixed; top:var(--header-h); right:0; bottom:0; left:0; z-index:40; background:var(--paper); overflow:auto; padding:var(--s-5) var(--gutter) var(--s-8); transform:translateX(100%); visibility:hidden; transition:transform var(--t-base) var(--ease), visibility 0s linear var(--t-base); display:block; }
  .menu-open .mnav{ transform:none; visibility:visible; transition-delay:0s; }
  .menu-open{ overflow:hidden; }
  .mnav__group{ font-size:var(--fs-1); color:var(--ink-2); margin:var(--s-5) 0 var(--s-2); }
  .mnav__group:first-child{ margin-top:0; }   /* сверху хватает отступа самой панели */
  /* только пункты меню (прямые ссылки панели): кнопки телефона и почты внизу — обычные .btn */
  .mnav > a{ display:block; padding:var(--s-3) 0; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:var(--fs-3); }
  .mnav > a[aria-current="page"],.mnav > a.is-current{ color:var(--brand); font-weight:600; }
  .mnav__contacts{ margin-top:var(--s-6); display:grid; gap:var(--s-3); }
}

/* ---------- первый экран главной ---------- */
.hero{ position:relative; overflow:hidden; padding:var(--s-6) 0 var(--s-7); }
.hero > .container{ position:relative; z-index:1; }
/* знак оттиском за первым экраном — справа, обрезан краем, как на обложке брендбука (мотив E, 08.10.2026): основа 12 % синего */
.hero__wm{ position:absolute; z-index:0; right:-150px; top:-150px; height:760px; pointer-events:none; }
.hero__wm .wm-svg{ height:100%; width:auto; max-width:none; opacity:.19; }
@media (max-width:980px){ .hero__wm{ right:-200px; top:-80px; height:560px; } }
@media (max-width:640px){ .hero__wm{ right:-170px; top:-24px; height:300px; } }   /* на телефоне — узкой полосой у края, не за текстом */
.hero .statuses{ margin-top:var(--s-6); }
.hero__grid{ display:grid; grid-template-columns:7fr 5fr; gap:var(--s-7); align-items:start; }
.hero__text > * + *{ margin-top:var(--s-5); }
.hero .lead{ font-size:var(--fs-4); color:var(--ink); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s-3); }   /* первый экран, вариант C (06.10.2026): к развилке и телефон */
.hero__cta .btn--ghost .icon{ color:var(--mark); }
.hero__photo{ margin-top:var(--s-2); }
@media (max-width:980px){ .hero__grid{ grid-template-columns:1fr; gap:var(--s-5); } .hero__photo{ max-width:520px; } }

/* развилка «С чем вы пришли?» — оглавление «ситуация → куда»: вопрос крупно, пояснение мельче, вся строка — ссылка. 05.10 — на
   графитовой полосе, 06.10 — на тёплой подложке; 08.10 по сверке с брендбуком — на его светло-серой панели (пункт 2 разбора:
   брендбук от тёплой гаммы ушёл, поверхности в его макетах белые и светло-серые). Отступ под липкую шапку — scroll-padding у html */
.fork{ --fork-line:var(--line); padding:var(--s-7) 0 var(--s-8); background:var(--panel); }
.fork__list{ --fork-q:var(--fs-6); list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:var(--s-7); margin-top:var(--s-5); }
.fork__list li{ border-top:1px solid var(--fork-line); }
.fork__list li:nth-last-child(-n+2){ border-bottom:1px solid var(--fork-line); }   /* черта под нижней строкой каждой колонки — и при нечётном числе строк */
.fork__list a{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:var(--s-1) var(--s-4); padding:var(--s-5) 0; color:var(--ink); text-decoration:none; }
.fork__list a:hover{ color:var(--ink); }
.fork__list a:focus-visible{ outline-offset:4px; }
.fork__q{ font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fork-q); font-weight:600; line-height:var(--lh-title); text-wrap:balance; text-decoration:underline 2px transparent; text-underline-offset:.18em; transition:text-decoration-color var(--t-fast) var(--ease); }
.fork__a{ grid-column:1; color:var(--ink-2); font-size:var(--fs-2); text-wrap:pretty; }
.fork__list .icon{ grid-row:1; grid-column:2; align-self:start; width:24px; height:24px; margin-top:calc((var(--fork-q) * var(--lh-title) - 24px) / 2); color:var(--mark); transition:transform var(--t-fast) var(--ease); }   /* центр стрелки — на середине первой строки вопроса, и когда вопрос в две строки */
.fork__list a:hover .fork__q{ color:var(--brand); text-decoration-color:currentColor; }
.fork__list a:hover .icon{ transform:translateX(4px); }
@media (max-width:980px){ .fork__list{ --fork-q:var(--fs-5); column-gap:var(--s-6); } }
@media (max-width:760px){ .fork__list{ grid-template-columns:1fr; } .fork__list li:nth-last-child(2){ border-bottom:0; } .fork__list a{ padding:var(--s-4) 0; } }

/* карточки */
.card{ position:relative; display:flex; flex-direction:column; gap:var(--s-2); padding:var(--s-5); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-2); color:var(--ink); text-decoration:none; transition:border-color var(--t-fast) var(--ease), transform var(--t-base) var(--ease); }
a.card:hover{ border-color:var(--brand); color:var(--ink); transform:translateY(-2px); box-shadow:var(--shadow); }
.card{ transition:border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.card__kicker{ font-size:var(--fs-1); color:var(--ink-2); }
.card__title{ font-size:var(--fs-5); font-weight:600; line-height:var(--lh-title); }   /* 1,3: в две-три строки заголовки не слипаются (пункт 21) */
.card__text{ color:var(--ink-2); font-size:var(--fs-2); }
.card__arrow{ margin-top:auto; padding-top:var(--s-3); color:var(--mark); display:flex; justify-content:flex-end; }
.card__arrow .icon{ transition:transform var(--t-fast) var(--ease); }
a.card:hover .card__arrow .icon{ transform:translateX(4px); }
.card--wide{ flex-direction:row; align-items:center; gap:var(--s-6); }
.card--wide > div{ flex:0 0 32%; display:grid; gap:var(--s-2); }
.card--wide .card__text{ flex:1; }
.card--wide .card__arrow{ margin:0; padding:0; }
@media (max-width:640px){ .card--wide{ flex-direction:column; align-items:stretch; gap:var(--s-2); } .card--wide > div{ flex:none; } .card--wide .card__arrow{ justify-content:flex-end; padding-top:var(--s-3); } }
.card--media{ padding:0; overflow:hidden; }
.card--media .card__body{ display:flex; flex-direction:column; gap:var(--s-2); padding:var(--s-5); flex:1; }
.card--media .ph{ border-radius:0; }
.card--media .card__status{ position:absolute; top:var(--s-3); left:var(--s-3); }
.card--media .card__status{ z-index:2; }
.card--media .card__status .chip--tbd{ background:var(--paper); }   /* контурная плашка поверх фото — на белом, иначе текст ляжет на снимок */
@media (max-width:640px){ .card--media .ph--wm,.grid-3 > .card--media:last-child:nth-child(odd) .ph--wm{ aspect-ratio:3/1; } }   /* без фото на телефоне панель ниже: главная короче (пункт 11) */
/* карточка направления со шапкой (выбор 4C, 08.10.2026): знак оттиском на светло-серой панели, значок и короткое имя крупно */
.card--cover{ padding:0; overflow:hidden; }
.card--cover > :not(.card__cover){ margin-inline:var(--s-5); }
.card--cover > .card__arrow{ margin-bottom:var(--s-5); }
.card__cover{ position:relative; overflow:hidden; height:128px; margin-bottom:var(--s-2); background:var(--panel); }
.card__wm{ position:absolute; right:-6%; bottom:-70%; height:210%; width:auto; max-width:none; opacity:.26; pointer-events:none; }
.card__ic{ position:absolute; left:var(--s-5); top:var(--s-4); color:var(--mark); }
.card__ic .icon{ width:28px; height:28px; }
.card__big{ position:absolute; left:var(--s-5); right:var(--s-5); bottom:var(--s-3); font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-7); font-weight:800; line-height:var(--lh-head); color:var(--ink); overflow-wrap:anywhere; }
/* «фонарь» (К5 A, 08.10.2026; заменил полоску С2 A): мягкое синее пятно идёт за курсором по шапке карточки направления,
   знак под ним проступает ярче. Фото в шапке этих карточек нет — свет только по панели. На касание — без света. */
.card__cover::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(170px circle at var(--x, 50%) var(--y, 50%), rgb(62 146 204 / .22), rgb(62 146 204 / 0) 70%);
  opacity:0; transition:opacity .25s var(--ease); }
.card__cover.is-lit::after{ opacity:1; }
.card__cover .card__wm{ transition:opacity .25s var(--ease); }
.card__cover.is-lit .card__wm{ opacity:.36; }
.card__ic,.card__big{ z-index:2; }
.card--wide.card--cover{ align-items:stretch; gap:var(--s-5); }
.card--wide.card--cover > .card__cover{ display:block; height:auto; min-height:150px; margin:0; }
.card--wide.card--cover > div:not(.card__cover),.card--wide.card--cover > .card__text{ align-self:center; margin-block:var(--s-5); margin-inline:0; }
.card--wide.card--cover > .card__arrow{ align-self:center; margin:0 var(--s-5) 0 0; }
@media (max-width:640px){
  .card--wide.card--cover{ flex-direction:column; gap:var(--s-2); }
  .card--wide.card--cover > .card__cover{ min-height:128px; margin-bottom:var(--s-2); }
  .card--wide.card--cover > div:not(.card__cover),.card--wide.card--cover > .card__text{ margin:0 var(--s-5); }
  .card--wide.card--cover > .card__arrow{ margin:0 var(--s-5) var(--s-5); }
}

/* сейчас: новости + ближайшее */
.now__grid{ display:grid; grid-template-columns:7fr 5fr; gap:var(--s-7); }
@media (max-width:980px){ .now__grid{ grid-template-columns:1fr; gap:var(--s-6); } }
.col__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-4); }
/* новости строками (пункт 29 разбора, 08.10.2026): дата и рубрика, заголовок, в ленте — анонс; линии между строками; вся строка —
   ссылка (растянутая ссылка заголовка) */
.nlist{ list-style:none; }
.nlist [hidden]{ display:none; }
.nrow{ position:relative; display:grid; gap:var(--s-1); padding:var(--s-4) 0; border-top:1px solid var(--line); }
.nlist > .nrow:last-child{ border-bottom:1px solid var(--line); }
.nrow .news-item__meta{ margin-bottom:0; }
.nrow__title{ font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-4); font-weight:600; line-height:var(--lh-title); color:var(--ink); text-decoration:none; text-wrap:pretty; }
.nrow__title::after{ content:""; position:absolute; inset:0; }
.nrow:hover .nrow__title{ color:var(--brand); }
.nrow__text{ color:var(--ink-2); font-size:var(--fs-2); max-width:60ch; }
.nrow .chip{ position:relative; z-index:1; }
.news-item__meta{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-3); font-size:var(--fs-1); color:var(--ink-2); margin-bottom:var(--s-1); }
/* свежая новость крупно (выбор 1B, 08.10.2026): светло-серая панель брендбука с синей чертой; без обложки — знак оттиском,
   с обложкой — фото рядом с текстом, если колонка широкая, иначе над текстом (ширина колонки — @container списка) */
.nlist{ container-type:inline-size; }
.nfeat{ overflow:hidden; gap:0; padding:0; margin-bottom:var(--s-2); border:0; border-top:4px solid var(--mark); border-radius:var(--r-2); background:var(--panel); }   /* impeccable-disable-line border-accent-on-rounded -- синяя черта сверху — приём брендбука, как у «Кто отвечает»; вид выбран пользователем (1B, 08.10) */
.nlist > .nfeat + .nrow{ border-top:0; }
.nlist > .nfeat:last-child{ border-bottom:0; }
.nfeat__wm{ position:absolute; right:-70px; bottom:-110px; height:300px; width:auto; max-width:none; opacity:.26; pointer-events:none; }
.nfeat__body{ position:relative; display:grid; gap:var(--s-2); padding:var(--s-6); }
.nfeat .nrow__title{ max-width:19em; font-size:var(--fs-6); line-height:var(--lh-head); }
.nfeat .nrow__text{ max-width:52ch; color:var(--ink); font-size:var(--fs-3); }
.nfeat__more{ display:inline-flex; align-items:center; gap:var(--s-1); margin-top:var(--s-2); color:var(--brand); font-weight:600; font-size:var(--fs-2); }
.nfeat__more .icon{ width:18px; height:18px; transition:transform var(--t-fast) var(--ease); }
.nfeat:hover .nfeat__more .icon{ transform:translateX(4px); }
.nfeat .ph{ border-radius:0; }
.nfeat--photo .ph{ aspect-ratio:16/9; }   /* над текстом — пониже: в колонке главной 3:2 вытягивало блок почти на 450 px */
@container (min-width:720px){
  .nfeat--photo{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); }
  .nfeat--photo .ph{ height:100%; min-height:240px; aspect-ratio:auto; }
  .nfeat--photo .nfeat__body{ align-content:center; }
}
@media (max-width:640px){ .nfeat__body{ padding:var(--s-5); } .nfeat .nrow__title{ font-size:var(--fs-5); line-height:var(--lh-title); } }

/* расписание: дата — графитовой плиткой, как листок календаря; линий между записями нет (вариант C, 06.10.2026: линия под
   заголовком, под записью и разделитель блока давали двойную черту) */
.sched{ list-style:none; display:grid; gap:var(--s-5); }
.sched__row{ display:grid; grid-template-columns:80px minmax(0, 1fr); gap:var(--s-5); align-items:start; }
.sched__date{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:80px; padding:var(--s-2); border-radius:var(--r-2); background:var(--dark); color:var(--on-dark); text-align:center; line-height:var(--lh-head); }
.sched__day{ display:block; font-size:var(--fs-7); font-weight:700; }
.sched__day small{ display:block; margin:0 0 var(--s-1); font-family:var(--font); font-size:var(--fs-1); font-weight:500; color:var(--on-dark-2); }
.sched__mon{ display:block; margin-top:var(--s-1); font-size:var(--fs-1); color:var(--on-dark-2); }
.sched__title{ padding-top:var(--s-1); font-weight:600; font-size:var(--fs-4); line-height:var(--lh-title); }
.sched__title a{ color:var(--ink); text-decoration:none; }
.sched__title a:hover{ color:var(--brand); }
.sched__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-3); font-size:var(--fs-2); color:var(--ink-2); margin-top:var(--s-2); }
.sched__text{ margin-top:var(--s-2); color:var(--ink-2); font-size:var(--fs-2); max-width:60ch; }
@media (max-width:480px){ .sched__row{ grid-template-columns:72px minmax(0, 1fr); gap:var(--s-4); } .sched__date{ min-height:72px; } }

/* лента «События» (выбор 2C, 08.10.2026): по месяцам, впереди — синие точки, черта «Сегодня», прошедшее — серым. Дата — своей
   колонкой на всю высоту строки: в две строки она не сдвигает метки под названием (замечание к варианту: «тип ниже, чем должен») */
.evt{ list-style:none; position:relative; max-width:960px; margin-top:var(--s-6); padding-left:28px; }
.evt::before{ content:""; position:absolute; left:7px; top:8px; bottom:8px; border-left:2px solid var(--line); }
.evt__m{ margin:var(--s-6) 0 var(--s-3); font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-5); font-weight:700; line-height:var(--lh-title); }
.evt > .evt__m:first-child{ margin-top:0; }
.evt__e{ position:relative; display:grid; grid-template-columns:168px minmax(0, 1fr); column-gap:var(--s-5); align-items:start; padding:var(--s-3) 0; }
.evt__e::before{ content:""; position:absolute; left:-27px; top:calc(var(--s-3) + .3em); width:14px; height:14px; border-radius:50%; background:var(--paper); border:3px solid var(--line); }
.evt__e.is-future::before{ border-color:var(--mark); background:var(--mark); }
.evt__d{ font-weight:600; line-height:var(--lh-title); text-wrap:balance; }
.evt__b{ display:grid; gap:var(--s-2); }
.evt__t{ font-weight:600; line-height:var(--lh-title); color:var(--ink); text-decoration:none; text-wrap:pretty; }
a.evt__t:hover{ color:var(--brand); text-decoration:underline; text-underline-offset:.15em; }
.evt__meta{ margin-top:0; }
.evt__place{ font-size:var(--fs-2); }
.evt__e.is-past{ color:var(--ink-2); }
.evt__e.is-past .evt__t{ color:var(--ink-2); }
.evt__e.is-past .evt__st,.evt__e.is-past .evt__place{ display:none; }
.chip--tag{ background:var(--brand-soft); color:var(--brand); }
.is-past .chip--tag{ background:var(--surface); color:var(--ink-2); }
.evt__today{ position:relative; margin:var(--s-3) 0; padding:var(--s-2) var(--s-3); border-radius:var(--r-1); background:var(--brand-soft); color:var(--brand); font-weight:700; font-size:var(--fs-2); }
.evt__today::before{ content:""; position:absolute; left:-27px; top:50%; width:14px; height:2px; background:var(--mark); transform-origin:left center; }
/* при появлении черта от линии времени прочерчивается к отметке, надпись выезжает на 8 px (С8 A, 08.10.2026) */
.evt__today.is-in::before{ animation:draw .45s var(--ease) both; }
.evt__today.is-in > span{ display:inline-block; animation:today-in .4s var(--ease) .12s both; }
@keyframes today-in{ from{ opacity:0; transform:translateX(-8px); } }
.evt [hidden]{ display:none; }
@media (max-width:640px){ .evt{ padding-left:24px; } .evt::before{ left:5px; } .evt__e{ grid-template-columns:1fr; row-gap:var(--s-1); } .evt__e::before,.evt__today::before{ left:-24px; } }

.empty{ padding:var(--s-5); border:1px dashed var(--line); border-radius:var(--r-2); color:var(--ink-2); font-size:var(--fs-2); }
.empty a{ white-space:nowrap; }

/* направления на главной и в каталоге */
.dir-group + .dir-group{ margin-top:var(--s-6); }
.dir-group__label{ font-size:var(--fs-2); color:var(--ink-2); margin-bottom:var(--s-3); padding-bottom:var(--s-2); border-bottom:1px solid var(--line); }
.dir-group__rows{ display:grid; gap:var(--s-4); }
/* главная, «Чем занимается Фонд» — реестр в две колонки по управлениям (вариант A, 06.10.2026; ТЗ: «список направлений»);
   каталог «Направления» — карточками выше (ТЗ: «карточки всех направлений») */
.dirs__group + .dirs__group{ margin-top:var(--s-7); }
.dirs__h{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--s-1) var(--s-4); padding-bottom:var(--s-3); border-bottom:2px solid var(--ink); font-size:var(--fs-4); }
.dirs__h span{ font-family:var(--font); font-size:var(--fs-2); font-weight:400; color:var(--ink-2); }
.dirs__list{ list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:var(--s-7); }
.dirs__list li:nth-child(n+3){ border-top:1px solid var(--line); }
.dirs__list a{ display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:var(--s-4); padding:var(--s-4) 0 var(--s-5); color:var(--ink); text-decoration:none; }
.dirs__k{ grid-column:1; font-size:var(--fs-1); color:var(--ink-2); }
.dirs__t{ grid-column:1; margin-top:var(--s-1); font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-5); font-weight:600; line-height:var(--lh-title); }
.dirs__x{ grid-column:1; margin-top:var(--s-1); color:var(--ink-2); font-size:var(--fs-2); text-wrap:pretty; }
.dirs__list .icon{ grid-column:2; grid-row:2; align-self:center; margin-top:var(--s-1); color:var(--mark); transition:transform var(--t-fast) var(--ease); }
.dirs__list a:hover .dirs__t{ color:var(--brand); }
.dirs__list a:hover .icon{ transform:translateX(4px); }
@media (max-width:760px){ .dirs__list{ grid-template-columns:1fr; } .dirs__list li:nth-child(2){ border-top:1px solid var(--line); } }
/* на телефоне — только названия, пояснения — в каталоге «Направления» (пункт 11 разбора: главная на телефоне короче) */
@media (max-width:640px){ .dirs__x{ display:none; } .dirs__list a{ padding:var(--s-3) 0; } }
.grid-3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s-4); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
@media (max-width:980px){
  .grid-3{ grid-template-columns:1fr 1fr; }
  .grid-3 > :last-child:nth-child(odd){ grid-column:1 / -1; }
  .grid-3 > .card--media:last-child:nth-child(odd){ flex-direction:row; }
  .grid-3 > .card--media:last-child:nth-child(odd) .ph{ flex:0 0 42%; aspect-ratio:auto; }
}
@media (max-width:640px){
  .grid-3,.grid-2{ grid-template-columns:1fr; }
  .grid-3 > :last-child:nth-child(odd){ grid-column:auto; }
  .grid-3 > .card--media:last-child:nth-child(odd){ flex-direction:column; }
  .grid-3 > .card--media:last-child:nth-child(odd) .ph{ flex:none; aspect-ratio:3/2; }
}

/* о фонде коротко */
.about__grid{ display:grid; grid-template-columns:7fr 5fr; gap:var(--s-7); align-items:start; }
.about__grid > :last-child{ margin-top:calc(var(--fs-7) * var(--lh-head) + var(--s-4)); }
@media (max-width:980px){ .about__grid > :last-child{ margin-top:0; } }
.about__grid .prose{ font-size:var(--fs-4); margin-top:var(--s-4); }
.about__short{ display:none; margin-top:var(--s-4); font-size:var(--fs-4); }
.about__grid .about__facts{ display:none; }   /* выше .facts{display:grid}: на компьютере цифры — отдельной полосой ниже */
.about__btn{ margin-top:var(--s-5); }
@media (max-width:980px){ .about__grid{ grid-template-columns:1fr; gap:var(--s-5); } }
/* на телефоне (пункт 11 разбора): две первые фразы, цифры «Фонда в цифрах» и «Подробнее о Фонде»; полный текст и фото — с 641 px */
@media (max-width:640px){
  .about__full,.about__photo,.facts-sec{ display:none; }
  .about__short{ display:block; }
  .about__grid .about__facts{ display:grid; margin-top:var(--s-5); }
}

/* факты: крупно в строку, без рамок (пункт 32 разбора, 08.10.2026) */
.facts{ display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr)); gap:var(--s-5) var(--s-7); }
.fact__num{ font-size:var(--fs-8); font-weight:700; line-height:var(--lh-head); color:var(--ink); }   /* синие числа читались как ссылки */
.fact__num::before{ content:""; display:block; width:24px; height:4px; margin-bottom:var(--s-3); border-radius:var(--r-pill); background:var(--mark); }
.fact__label{ margin-top:var(--s-2); color:var(--ink-2); font-size:var(--fs-3); max-width:26ch; }
@media (max-width:980px){ .facts{ gap:var(--s-5); } }
@media (max-width:640px){ .facts{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-4); } .facts > :first-child:nth-last-child(odd){ grid-column:1 / -1; } .fact__num{ font-size:var(--fs-7); } .fact__label{ font-size:var(--fs-2); } }
/* цифры под текстом (история МНОЦ «Байкал», вариант A, 06.10.2026) — как «Фонд в цифрах», без рамок; на телефоне по две,
   при нечётном числе первая — на всю ширину */
.text-facts{ margin-top:var(--s-6); }
.text-facts h3{ font-size:var(--fs-4); }
.text-facts__row{ display:grid; grid-template-columns:repeat(var(--n, 4), minmax(0, 1fr)); gap:var(--s-5); margin-top:var(--s-4); }
.text-facts .fact__num{ font-size:var(--fs-7); }
.text-facts .fact__label{ font-size:var(--fs-2); line-height:var(--lh-title); max-width:none; }
@media (max-width:760px){ .text-facts__row{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-4); } .text-facts__row > :first-child:nth-last-child(odd){ grid-column:1 / -1; } }

/* контакты */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); }
.contact-box{ padding:var(--s-5); border:1px solid var(--line); border-radius:var(--r-2); background:var(--paper); display:grid; gap:var(--s-3); align-content:start; }
.contact-box h3,.contact-box .contact-box__h{ font-size:var(--fs-4); font-weight:600; }   /* на «Контактах» карточки сразу под H1 — там это H2 того же вида */
.contact-box .big{ font-size:var(--fs-5); font-weight:600; line-height:var(--lh-title); overflow-wrap:anywhere; }
.contact-box a.big{ color:var(--ink); text-decoration:none; }
.contact-box a.big:hover{ color:var(--brand); }
.contact-box__actions{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-2); }
.contact-box dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:var(--s-1) var(--s-4); }
.contact-box dt{ color:var(--ink-2); font-size:var(--fs-2); }
.contact-box dd{ margin:0; }
@media (max-width:640px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-box__actions{ display:grid; }      /* кнопки карт и площадки — одной ширины, во всю карточку (пункт 37 разбора) */
  .contact-box__actions .btn{ width:100%; }
}
@media (max-width:480px){ .contact-box dl{ grid-template-columns:1fr; gap:0 } .contact-box dd{ margin-bottom:var(--s-2); } }
/* «Не нашли своё направление» — полосой на всю ширину: слева фраза, справа телефон, почта и кнопки (пункт 33 разбора) */
.callout-band{ position:relative; overflow:hidden; padding:var(--s-8) 0; background:var(--dark); color:var(--on-dark); }
.callout-band__wm{ position:absolute; right:-90px; top:50%; height:520px; width:auto; max-width:none; transform:translateY(-50%); opacity:.08; color:var(--on-dark); pointer-events:none; }   /* знак оттиском — белым, как на обложках проектов */
.callout-band__in{ position:relative; display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:var(--s-6) var(--s-9); align-items:center; }
.callout-band h2{ color:var(--on-dark); font-size:var(--fs-7); }
.callout-band h2::after{ content:""; display:block; width:56px; height:4px; margin-top:var(--s-4); border-radius:var(--r-pill); background:var(--mark); }
.callout-band__t p{ margin-top:var(--s-4); color:var(--on-dark-2); max-width:54ch; }
.callout-band__a{ display:grid; gap:var(--s-2); justify-items:start; }
.callout-band__tel{ font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-7); font-weight:700; line-height:var(--lh-head); color:var(--on-dark); text-decoration:none; white-space:nowrap; }
.callout-band__tel:hover{ color:var(--on-dark-2); }
.callout-band__mail{ color:var(--on-dark); font-weight:600; text-decoration-color:color-mix(in srgb, var(--on-dark) 45%, transparent); overflow-wrap:anywhere; }
.callout-band__mail:hover{ color:var(--on-dark-2); }
.callout-band__h{ color:var(--on-dark-2); font-size:var(--fs-1); }
.callout-band__btn{ margin-top:var(--s-3); background:var(--paper); color:var(--dark); }
.callout-band__btn:hover{ background:var(--panel); color:var(--dark); }
@media (max-width:860px){
  .callout-band{ padding:var(--s-7) 0; }
  .callout-band__in{ grid-template-columns:1fr; gap:var(--s-5); }
  .callout-band__tel{ font-size:var(--fs-6); }
  .callout-band__wm{ height:340px; right:-120px; top:auto; bottom:-90px; transform:none; }
}
/* шапка «Контактов»: телефон и почта Фонда крупно, режим и адрес строкой (пункт 36 разбора) */
.chead{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-7); }
.page-head__text > .chead{ margin-top:var(--s-5); }
.chead__big{ display:inline-flex; align-items:center; gap:var(--s-3); min-width:0; font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-7); font-weight:700; line-height:var(--lh-head); color:var(--ink); text-decoration:none; }
.chead__big span{ overflow-wrap:anywhere; }
.chead__big .icon{ flex:none; width:26px; height:26px; color:var(--mark); }
.chead__big:hover{ color:var(--brand); }
.chead__s{ color:var(--ink-2); }
@media (max-width:640px){ .chead__big{ font-size:var(--fs-5); } .chead__big .icon{ width:22px; height:22px; } }

/* ---------- внутренние страницы ---------- */
.crumbs{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--s-2); font-size:var(--fs-2); color:var(--ink-2); padding:var(--s-4) 0 0; }
.crumbs li + li::before{ content:"/"; margin-right:var(--s-2); color:var(--line); }
.crumbs a{ color:var(--ink-2); text-decoration:none; }
.crumbs a:hover{ color:var(--brand); }
.crumbs [aria-current]{ color:var(--ink); }
/* на телефоне — одна ссылка назад, в раздел (пункт 25 разбора): цепочка переносилась, последний пункт повторял заголовок */
@media (max-width:640px){
  .crumbs li[aria-current],.crumbs li:not(:nth-last-child(2)){ display:none; }
  .crumbs li + li::before{ content:none; }
  .crumbs li:nth-last-child(2)::before{ content:"←"; margin-right:var(--s-2); color:var(--ink-2); }
  .crumbs a{ display:inline-flex; align-items:center; min-height:40px; }
  .crumbs{ padding-top:var(--s-2); }
}

.page-head{ padding:var(--s-6) 0 var(--s-7); }
.page-head__grid{ display:grid; grid-template-columns:7fr 5fr; gap:var(--s-7); align-items:start; }
.page-head__text > * + *{ margin-top:var(--s-4); }
.page-head__meta{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.page-head .lead{ color:var(--ink); }
/* черта под заголовком первого экрана — электрик-синим, как короткая черта под каждым заголовком в макетах брендбука (пункт 1
   разбора, 08.10.2026; с 05.10 по 08.10 была медной). Воздух над чертой (от базовой линии заголовка) = воздуху под ней (до верха
   букв лида): хвост строки заголовка под базовой линией ≈ .26 его кегля, поэтому отступ — шаг шкалы минус .26em */
.hero h1::after,.page-head h1::after{ content:""; display:block; width:56px; height:4px; margin-top:calc(var(--s-5) - .26em); border-radius:var(--r-pill); background:var(--mark); }
.hero h1::after{ margin-top:calc(var(--s-6) - .26em); }
/* черта под заголовком первого экрана прочерчивается слева направо, когда текст встал на место (С1 A, 08.10.2026) */
.hero h1::after,.page-head h1::after{ transform-origin:left center; animation:draw .55s var(--ease) .22s both; }
@keyframes draw{ from{ transform:scaleX(0); } }
.page-head__actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); }
@media (max-width:980px){ .page-head__grid{ grid-template-columns:1fr; gap:var(--s-5); } .page-head__photo{ max-width:520px; } }
/* «Кто отвечает» в первом экране направления (пункт 8 разбора): белая карточка с синей полоской сверху и мягкой тенью, как
   карточки брендбука; телефон и почта крупно, «Написать» и «Позвонить» */
.hc{ display:grid; gap:var(--s-2); padding:var(--s-5) var(--s-6) var(--s-6); border:1px solid var(--line); border-top:4px solid var(--mark); border-radius:var(--r-2); background:var(--paper); box-shadow:var(--shadow); }   /* impeccable-disable-line border-accent-on-rounded -- полоска сверху у карточек — приём брендбука, вид утверждён по макету разбора 08.10 */
.hc__k{ color:var(--ink-2); font-size:var(--fs-1); }
.hc__role{ font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-5); font-weight:600; line-height:var(--lh-title); }
.hc__name{ color:var(--ink-2); font-size:var(--fs-2); }
.hc__row{ display:inline-flex; align-items:flex-start; gap:var(--s-2); justify-self:start; min-width:0; color:var(--ink); font-size:var(--fs-4); font-weight:600; line-height:var(--lh-title); text-decoration:none; }
.hc__row > span{ min-width:0; overflow-wrap:anywhere; }
.hc__row .icon{ flex:none; margin-top:calc((1lh - 20px) / 2); color:var(--mark); }
.hc__row:hover{ color:var(--brand); }
.hc__btns{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-2); }
.hc__hours{ color:var(--ink-2); font-size:var(--fs-1); }
@media (max-width:980px){ .page-head__photo:has(.hc){ max-width:560px; } }
@media (max-width:640px){ .hc{ padding:var(--s-4) var(--s-4) var(--s-5); } .hc__row{ font-size:var(--fs-3); } .hc__btns .btn{ flex:1 1 0; } }
/* фото направления из админки (выбор 8C, 08.10.2026): до трёх снимков 4:3 в ряд под первым экраном — кадр не растягивается полосой
   и не режется по середине; одно фото — 3:2 шириной до 600 px; «Кто отвечает» остаётся в первом экране */
.page-band{ padding:0 0 var(--s-6); }
.pstrip{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s-4); }
.pstrip--2{ grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:calc(100% * 2 / 3); }
.pstrip--1{ grid-template-columns:minmax(0, 1fr); max-width:600px; }
.pstrip .ph--43 img{ object-position:50% 60%; }
@media (max-width:640px){
  .pstrip{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-3); }
  .pstrip--3 > :first-child{ grid-column:1 / -1; }
  .pstrip--2{ max-width:none; }
  .pstrip--1{ grid-template-columns:minmax(0, 1fr); }
}
/* обложка проекта без фото — афиша на графите (выбор 6A, 08.10.2026; до того — пункт 35 разбора): синяя черта, фраза белым, знак едва
   заметным оттиском, внизу цифры проекта. Обложка — контейнер: цифры в ряд, строками «цифра — подпись» или друг под другом, по ширине */
.pcover{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:var(--s-6); min-height:360px; padding:var(--s-6); border-radius:var(--r-2); background:var(--dark); color:var(--on-dark); container-type:inline-size; }
.pcover__wm{ position:absolute; right:-14%; bottom:-30%; height:140%; width:auto; max-width:none; opacity:.07; color:var(--on-dark); pointer-events:none; }
.pcover__top{ position:relative; }
.pcover__top::before{ content:""; display:block; width:56px; height:4px; margin-bottom:var(--s-4); border-radius:var(--r-pill); background:var(--mark); }
.pcover__q{ max-width:13em; font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-7); font-weight:700; line-height:var(--lh-head); color:var(--on-dark); text-wrap:balance; }
.pcover__s{ max-width:22em; margin-top:var(--s-3); color:var(--on-dark-2); font-size:var(--fs-4); }
.pcover__f{ position:relative; display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:var(--s-2) var(--s-4); align-items:baseline; margin:0; padding-top:var(--s-4); border-top:1px solid rgb(255 255 255 / .2); }
.pcover__f > div{ display:contents; }
.pcover__f dt{ font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-4); font-weight:700; line-height:var(--lh-title); color:var(--on-dark); white-space:nowrap; }
.pcover__f dd{ margin:0; font-size:var(--fs-2); color:var(--on-dark-2); line-height:var(--lh-title); }
@container (max-width:559px){ .pcover__q{ font-size:var(--fs-6); } }
@container (max-width:379px){
  .pcover__f{ grid-template-columns:minmax(0, 1fr); row-gap:var(--s-1); }
  .pcover__f dt{ white-space:normal; }
  .pcover__f > div + div dt{ margin-top:var(--s-2); }
}
@container (min-width:600px){
  .pcover__f{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .pcover__f > div{ display:grid; gap:var(--s-1); align-content:start; }
  .pcover__f dt{ font-size:var(--fs-5); white-space:normal; }
  .pcover__f dd{ font-size:var(--fs-1); }
}
@media (max-width:640px){ .pcover{ min-height:0; gap:var(--s-5); padding:var(--s-5); } .pcover__s{ font-size:var(--fs-3); } }

.block{ padding:var(--s-7) 0; border-top:1px solid var(--line); }
.block:first-of-type{ border-top:0; }
.block__grid{ display:grid; grid-template-columns:4fr 8fr; gap:var(--s-6); }
.block__grid > *{ min-width:0; }
.block h2{ font-size:var(--fs-6); }
@media (max-width:980px){ .block__grid{ grid-template-columns:1fr; gap:var(--s-4); } }

/* страница направления (пункт 10 разбора, 08.10.2026): слева — оглавление «На странице», едет при прокрутке и подсвечивает
   текущий раздел синей чертой; справа — блоки, заголовок над текстом, без линий — их разделяет воздух */
.doc__in{ display:grid; grid-template-columns:4fr 8fr; gap:var(--s-6); align-items:start; }
.doc__toc{ position:sticky; top:calc(60px + var(--s-6)); padding-top:var(--s-6); margin-bottom:var(--s-7); font-size:var(--fs-2); }   /* в конце колонки не прилипает к низу блока: воздух снизу (замечание 08.10) */
.doc__toc-h{ margin-bottom:var(--s-2); color:var(--ink-2); font-size:var(--fs-1); }
.doc__toc ol{ list-style:none; display:grid; }
.doc__toc a{ display:block; padding:var(--s-2) 0 var(--s-2) var(--s-4); border-left:2px solid var(--line); color:var(--ink-2); line-height:var(--lh-title); text-decoration:none; transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.doc__toc a:hover{ color:var(--ink); }
.doc__toc a[aria-current="true"]{ border-left-color:var(--mark); color:var(--ink); font-weight:600; }
/* текущий раздел — одна синяя черта, она переезжает к пункту (С3 A, 08.10.2026): app.js ставит .has-bar и двигает .doc__toc-bar */
.doc__toc-bar{ position:absolute; left:0; top:0; width:2px; height:1px; background:var(--mark); transform-origin:0 0; transition:transform .32s var(--ease); pointer-events:none; }
.doc__toc.has-bar a[aria-current="true"]{ border-left-color:var(--line); }
.doc__body{ min-width:0; }
.doc .block{ padding:var(--s-6) 0; border-top:0; }
.doc .block > .container{ width:auto; margin:0; }
.doc .block__grid{ display:block; }
.doc .block__grid > h2{ margin-bottom:var(--s-4); }
.doc .block .grid-3{ grid-template-columns:1fr 1fr; }
@media (max-width:980px){
  .doc__in{ display:block; }
  .doc__toc{ display:none; }
  .doc .block{ padding:var(--s-5) 0; }
}

/* ключевая фраза — без подложки, с синей чертой слева, как в брендбуке (пункт 5 разбора) */
.border-note{ margin-top:var(--s-5); padding:var(--s-1) 0 var(--s-1) var(--s-5); border-left:3px solid var(--mark); font-size:var(--fs-3); color:var(--ink); }   /* impeccable-disable-line side-tab -- черта слева у ключевой фразы — приём брендбука (стр. 5 и 8), пункт 5 разбора */
.border-note .icon{ display:none; }

.steps{ list-style:none; counter-reset:step; display:grid; gap:var(--s-4); }
.steps li{ position:relative; padding-left:calc(32px + var(--s-4)); min-height:32px; }
.steps li::before{ counter-increment:step; content:counter(step); position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%; background:var(--brand-soft); color:var(--brand); font-weight:700; display:grid; place-items:center; font-size:var(--fs-2); }
.steps li:not(:last-child)::after{ content:""; position:absolute; left:15px; top:32px; bottom:calc(-1 * var(--s-4)); border-left:1px solid var(--line); }   /* от низа кружка до следующего — и когда шаг в две строки */
/* этапы по порядку на одной линии («Программа занятий», вариант A, 06.10.2026): последний — цель — выделен; на телефоне сверху вниз */
.path{ list-style:none; display:grid; grid-template-columns:repeat(var(--n, 5), minmax(0, 1fr)); gap:var(--s-4); }
.path li{ position:relative; display:grid; align-content:start; gap:var(--s-3); }
.path li:not(:last-child)::after{ content:""; position:absolute; top:19px; left:calc(40px + var(--s-2)); right:calc(var(--s-4) * -1 + var(--s-2)); border-top:2px solid var(--line); }
.path__n{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--brand-soft); color:var(--brand); font-weight:700; }
.path li:last-child .path__n{ background:var(--brand); color:var(--paper); }
.path__t{ font-weight:600; line-height:var(--lh-title); text-wrap:balance; }
@media (max-width:760px){
  .path{ grid-template-columns:1fr; }
  .path li{ grid-template-columns:40px minmax(0, 1fr); align-items:center; gap:var(--s-4); }
  .path li:not(:last-child)::after{ top:40px; bottom:calc(var(--s-4) * -1); left:19px; right:auto; border-top:0; border-left:2px solid var(--line); }
}

.details-list h3{ font-size:var(--fs-4); margin-bottom:var(--s-2); }
.details-list > * + *{ margin-top:var(--s-5); }
.details-list .bul + .prose{ margin-top:var(--s-3); }

/* соцсети и мессенджеры (выбор 7A, 08.10.2026): карточки двумя группами — знак площадки, название, @имя или адрес, «Открыть» */
.soc__wrap{ display:grid; gap:var(--s-6); }
.soc__gt{ font-size:var(--fs-4); }
.soc__gd{ margin-top:var(--s-1); color:var(--ink-2); font-size:var(--fs-2); }
.soc{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-3); margin-top:var(--s-3); }
.soc__c{ display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:var(--s-3); align-content:start; padding:var(--s-4); border:1px solid var(--line); border-radius:var(--r-2); background:var(--paper); color:var(--ink); text-decoration:none; transition:border-color var(--t-fast) var(--ease); }
.soc__c:hover{ border-color:var(--mark); color:var(--ink); }
.soc__ic{ grid-row:1 / span 2; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--dark); color:var(--on-dark); }
.soc__ic svg{ width:22px; height:22px; }
.soc__n{ align-self:end; font-weight:700; }
.soc__h{ color:var(--ink-2); font-size:var(--fs-2); overflow-wrap:anywhere; }
.soc__go{ grid-column:1 / -1; display:inline-flex; align-items:center; gap:var(--s-1); margin-top:var(--s-3); color:var(--brand); font-weight:600; font-size:var(--fs-2); }
.soc__go .icon{ width:16px; height:16px; }
.soc__c:hover .soc__go{ text-decoration:underline; text-underline-offset:.15em; }
@media (max-width:640px){ .soc{ grid-template-columns:minmax(0, 1fr); } }
.links-list{ list-style:none; display:grid; gap:var(--s-2); }
.links-list .icon{ display:inline-block; width:16px; height:16px; margin-left:var(--s-1); vertical-align:middle; }   /* сразу за текстом ссылки */
/* «Документы и ссылки» строками: название, под ним адрес сайта, справа значок перехода; линии — только между строками (вариант A, 06.10.2026) */
.reflinks{ list-style:none; max-width:42rem; }
.reflinks li + li{ border-top:1px solid var(--line); }
.reflinks a{ display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:var(--s-4); padding:var(--s-4) 0; color:var(--ink); text-decoration:none; }
.reflinks li:first-child a{ padding-top:0; }
.reflinks li:last-child a{ padding-bottom:0; }
.reflinks__t{ font-weight:600; text-wrap:pretty; }
.reflinks__d{ grid-column:1; margin-top:var(--s-1); color:var(--ink-2); font-size:var(--fs-2); }
.reflinks .icon{ grid-column:2; grid-row:1 / span 2; align-self:center; color:var(--mark); transition:transform var(--t-fast) var(--ease); }
.reflinks a:hover .reflinks__t{ color:var(--brand); text-decoration:underline; text-underline-offset:.15em; }
.reflinks a:hover .icon{ transform:translate(2px, -2px); }
.reflinks a:hover .icon--arrow{ transform:translateX(4px); }
/* «Что Фонд представляет в регионе»: таблица «организация или программа → роль Фонда» (вариант B, 06.10.2026) */
.roles-table__head{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--s-5); padding-bottom:var(--s-2); border-bottom:2px solid var(--ink); color:var(--ink-2); font-size:var(--fs-1); }
.roles-table__row{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--s-2) var(--s-5); padding:var(--s-3) 0; }
.roles-table__row + .roles-table__row{ border-top:1px solid var(--line); }
.roles-table__org{ font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-4); font-weight:600; line-height:var(--lh-title); }
.roles-table__roles{ list-style:none; display:grid; gap:var(--s-1); align-content:start; }
.roles-table__roles a{ color:var(--brand); text-decoration:none; }
.roles-table__roles .icon{ display:inline-block; width:16px; height:16px; margin-left:var(--s-1); vertical-align:middle; transition:transform var(--t-fast) var(--ease); }
.roles-table__roles a:hover{ text-decoration:underline; }
.roles-table__roles a:hover .icon{ transform:translateX(3px); }
@media (max-width:640px){ .roles-table__head{ display:none; } .roles-table__row{ grid-template-columns:1fr; } .roles-table__head + .roles-table__row{ border-top:2px solid var(--ink); } }
.nowrap{ white-space:nowrap; }

/* «Кто отвечает» — белая карточка с синей полоской сверху и мягкой тенью, как карточки брендбука (пункт 5 разбора, 08.10.2026:
   была на той же голубой подложке, что примечания и кружки шагов) */
.contact-card{ padding:var(--s-6); background:var(--paper); border:1px solid var(--line); border-top:4px solid var(--mark); border-radius:var(--r-2); box-shadow:var(--shadow); display:grid; gap:var(--s-3); }   /* impeccable-disable-line border-accent-on-rounded -- полоска сверху у карточек — приём брендбука, вид утверждён по макету разбора 08.10 */
.contact-card__role{ font-weight:600; font-size:var(--fs-4); line-height:var(--lh-title); }
.contact-card__name{ color:var(--ink-2); }
.contact-card__row{ display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-6); font-size:var(--fs-5); font-weight:600; line-height:var(--lh-title); }
.contact-card__row a{ color:var(--ink); text-decoration:none; display:inline-flex; align-items:flex-start; gap:var(--s-2); min-width:0; }
.contact-card__row a .icon{ flex:none; margin-top:4px; margin-top:calc((1lh - 20px) / 2); color:var(--mark); }   /* значок — на середине первой строки */
.contact-card__row a > span{ min-width:0; overflow-wrap:anywhere; }   /* длинная почта переносится после «@» рядом со значком */
.contact-card__row a:hover{ color:var(--brand); }
.contact-card__hours{ color:var(--ink-2); font-size:var(--fs-2); }
@media (max-width:480px){ .contact-card__row{ font-size:var(--fs-4); } }

.timeline{ list-style:none; display:grid; gap:var(--s-5); position:relative; padding-left:calc(12px + var(--s-4)); }
.timeline::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; border-left:1px solid var(--line); }
.timeline li{ position:relative; }
.timeline li::before{ content:""; position:absolute; left:calc(-1 * (12px + var(--s-4))); top:6px; width:12px; height:12px; border-radius:50%; background:var(--sand); }   /* медь — знак наследия: история (пункт 3 разбора) */
/* история «загорается» по ходу чтения (С5 A, 08.10.2026): app.js ставит .is-anim — точки контурные, пункт на середине экрана
   заливается медью, от точки расходится волна. Без скрипта и при «уменьшить движение» точки залиты сразу. */
.timeline.is-anim li{ isolation:isolate; }
.timeline.is-anim li::before{ background:var(--paper); border:2px solid var(--sand); transition:background-color .4s var(--ease); }
.timeline.is-anim li.is-lit::before{ background:var(--sand); }
/* волна от точки — кружок под ней: растёт и гаснет одними transform и opacity (раньше — анимация тени с перерисовкой каждый кадр; 09.10.2026) */
.timeline.is-anim li::after{ content:""; position:absolute; z-index:-1; left:calc(-1 * (12px + var(--s-4))); top:6px; width:12px; height:12px; border-radius:50%; background:var(--sand); opacity:0; pointer-events:none; }
.timeline.is-anim li.is-lit::after{ animation:tl-ring .8s var(--ease); }
@keyframes tl-ring{ from{ opacity:.55; transform:scale(1); } to{ opacity:0; transform:scale(2.67); } }   /* 12 px → 32 px, как была тень 0 → 10 px */
.timeline__year{ font-size:var(--fs-5); font-weight:700; line-height:var(--lh-title); margin-bottom:var(--s-1); }

/* структура деревом (вариант B, 06.10.2026): директор, линия к двум управлениям, направления строками в две колонки */
.tree{ --ln:color-mix(in srgb, var(--ink) 30%, var(--paper)); }
.tree__root{ display:inline-block; padding:var(--s-2) var(--s-4); border-radius:var(--r-1); background:var(--dark); color:var(--on-dark); font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-4); font-weight:600; }
.tree__units{ list-style:none; position:relative; display:grid; gap:var(--s-6); margin-left:var(--s-5); padding:var(--s-5) 0 0 var(--s-6); border-left:1px solid var(--ln); }
.tree__units > li{ position:relative; }
.tree__units > li::before{ content:""; position:absolute; left:calc(var(--s-6) * -1); top:.75em; width:calc(var(--s-6) - var(--s-2)); border-top:1px solid var(--ln); }
.tree__units > li:last-child::after{ content:""; position:absolute; left:calc(var(--s-6) * -1 - 1px); top:calc(.75em + 1px); bottom:0; width:3px; background:var(--paper); }   /* линия кончается на последнем управлении */
.tree__name{ font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-4); font-weight:600; line-height:var(--lh-title); }
.tree__links{ list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:var(--s-5); margin-top:var(--s-3); }
.tree__links li{ border-top:1px solid var(--line); }
.tree__links a{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-2) 0; color:var(--ink); text-decoration:none; font-size:var(--fs-2); }
.tree__links .icon{ flex:none; width:16px; height:16px; color:var(--mark); transition:transform var(--t-fast) var(--ease); }
.tree__links a:hover{ color:var(--brand); }
.tree__links a:hover .icon{ transform:translateX(3px); }
.tree > p{ margin-top:var(--s-5); }
@media (max-width:640px){ .tree__links{ grid-template-columns:1fr; } .tree__units{ margin-left:var(--s-3); padding-left:var(--s-4); } .tree__units > li::before{ left:calc(var(--s-4) * -1); width:var(--s-3); } .tree__units > li:last-child::after{ left:calc(var(--s-4) * -1 - 1px); } }

.gallery{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s-4); }
.gallery--4{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:980px){ .gallery--4{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .gallery{ grid-template-columns:1fr 1fr; } }

.docs{ list-style:none; display:grid; }
.docs li{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s-2) var(--s-4); padding:var(--s-3) 0; border-top:1px solid var(--line); }
.docs li:last-child{ border-bottom:1px solid var(--line); }
.docs__meta{ color:var(--ink-2); font-size:var(--fs-2); }
.docs li > a{ display:inline-flex; align-items:center; gap:var(--s-2); }
.docs li > a .icon{ flex:none; width:16px; height:16px; }
.docs__cat{ margin-top:var(--s-5); }
.docs__cat:first-child{ margin-top:0; }
/* «Контакты», ответственные (вариант B, 06.10.2026): общий номер — один раз сверху; направления одного человека — группой,
   почта и добавочный — один раз рядом */
.team__phone{ color:var(--ink-2); }
.team__phone a{ display:inline-block; margin-left:var(--s-2); font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-6); font-weight:700; line-height:var(--lh-head); color:var(--ink); text-decoration:none; }
.team__phone a:hover{ color:var(--brand); }
.team__intro{ margin-top:var(--s-1); color:var(--ink-2); font-size:var(--fs-2); }
.team{ margin-top:var(--s-5); }
.team__g{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--s-3) var(--s-6); padding:var(--s-4) 0; }
.team__g + .team__g{ border-top:1px solid var(--line); }
.team__dirs{ list-style:none; display:grid; gap:var(--s-1); align-content:start; }
.team__dirs li{ font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-4); font-weight:600; line-height:var(--lh-title); }
.team__dirs a{ color:var(--ink); text-decoration:none; }
.team__dirs a:hover{ color:var(--brand); }
.team__who{ display:grid; gap:var(--s-1); align-content:start; font-size:var(--fs-2); }
.team__who strong{ font-weight:600; }
.team__who a{ display:inline-flex; align-items:flex-start; gap:var(--s-2); justify-self:start; min-width:0; color:var(--brand); text-decoration:none; }
.team__who a .icon{ flex:none; width:16px; height:16px; margin-top:calc((1lh - 16px) / 2); }   /* значок — на середине первой строки */
.team__who a > span{ min-width:0; overflow-wrap:anywhere; }
.team__who a:hover span{ text-decoration:underline; }
.team__more{ color:var(--ink-2); }
@media (max-width:640px){ .team__g{ grid-template-columns:1fr; } }

/* залы одной сеткой с фото (пункт 31 разбора, 08.10.2026): фото, название, вместимость, назначение. Карточки — по верху ряда:
   названия в одну линию сразу под фото, и когда у соседа подпись в две строки (замечание к макету 08.10) */
.halls{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s-5) var(--s-4); align-items:start; }
.halls--2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.halls--4{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.hall{ display:grid; gap:var(--s-1); align-content:start; }
.hall .ph{ margin-bottom:var(--s-2); }
.hall__name{ font-size:var(--fs-5); font-weight:600; line-height:var(--lh-title); }
.hall__cap{ color:var(--ink); }
.hall__eq{ color:var(--ink-2); font-size:var(--fs-2); }
.halls__note{ margin-top:var(--s-4); color:var(--ink-2); font-size:var(--fs-1); }
.halls__btn{ margin-top:var(--s-5); }
@media (max-width:980px){ .halls,.halls--4{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:640px){ .halls,.halls--2,.halls--4{ grid-template-columns:1fr; } }

.people{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:var(--s-4) var(--s-6); }
.person{ display:grid; gap:var(--s-1); align-content:start; }
.person__role{ color:var(--ink-2); font-size:var(--fs-2); }
@media (max-width:640px){ .people{ grid-template-columns:1fr; } .people--cards{ grid-template-columns:1fr 1fr; } }

/* новости: рубрики; лента — строками (.nlist выше) */
.chips{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.chips button{ min-height:36px; padding:0 var(--s-4); border-radius:var(--r-pill); border:1px solid var(--line-strong); background:var(--paper); color:var(--ink); font:inherit; font-size:var(--fs-2); cursor:pointer; }
.chips button:hover{ border-color:var(--brand); color:var(--brand); }
.chips button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.chips + .nlist{ margin-top:var(--s-5); max-width:860px; }
/* рубрики на телефоне — одной строкой с прокруткой вбок (пункт 29): пять рядов кнопок занимали пол-экрана */
@media (max-width:640px){
  .chips{ flex-wrap:nowrap; overflow-x:auto; margin-inline:calc(var(--gutter) * -1); padding:0 var(--gutter) var(--s-1); scrollbar-width:none; }
  .chips::-webkit-scrollbar{ display:none; }
  .chips button{ flex:none; }
}
.pager{ display:flex; justify-content:center; margin-top:var(--s-6); }

/* новость (пункт 34 разбора, 08.10.2026): текст колонкой, справа — рубрика, источник и кто отвечает по теме; без обложки —
   без рамки; отступы по шкале: метка → 12 → заголовок → 32 → обложка или текст */
.art{ display:grid; grid-template-columns:minmax(0, 720px) minmax(0, 1fr); gap:var(--s-8); align-items:start; }
.article h1{ font-size:var(--fs-7); margin-top:var(--s-3); max-width:20em; }
.article .news-item__meta{ font-size:var(--fs-2); }
.article__cover{ margin-top:var(--s-6); }
.article .prose{ margin-top:var(--s-6); font-size:var(--fs-4); max-width:62ch; }
.article__foot{ margin-top:var(--s-7); padding-top:var(--s-4); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-5); font-size:var(--fs-2); color:var(--ink-2); }
.article__foot a{ white-space:nowrap; }
.art__aside{ position:sticky; top:calc(60px + var(--s-5)); display:grid; gap:var(--s-1); padding:var(--s-5); border:1px solid var(--line); border-top:4px solid var(--mark); border-radius:var(--r-2); background:var(--paper); box-shadow:var(--shadow); font-size:var(--fs-2); }   /* impeccable-disable-line border-accent-on-rounded -- полоска сверху у карточек — приём брендбука, вид утверждён по макету разбора 08.10 */
.art__k{ margin-top:var(--s-3); color:var(--ink-2); font-size:var(--fs-1); }
.art__aside > .art__k:first-child{ margin-top:0; }
.art__who{ display:grid; gap:var(--s-1); margin-top:var(--s-3); padding-top:var(--s-3); border-top:1px solid var(--line); }
.art__who .art__k{ margin-top:0; }
.art__role{ font-weight:600; line-height:var(--lh-title); }
.art__l{ display:inline-flex; align-items:flex-start; gap:var(--s-2); justify-self:start; min-width:0; padding-block:var(--s-1); color:var(--ink); text-decoration:none; }
.art__l > span{ min-width:0; overflow-wrap:anywhere; }
.art__l .icon{ flex:none; width:16px; height:16px; margin-top:calc((1lh - 16px) / 2); color:var(--mark); }
.art__l:hover{ color:var(--brand); }
.art__more{ justify-self:start; margin-top:var(--s-2); }
.art__more .icon{ display:inline-block; width:16px; height:16px; margin-left:var(--s-1); vertical-align:middle; }
@media (max-width:980px){ .art{ grid-template-columns:1fr; gap:var(--s-6); } .art__aside{ position:static; max-width:520px; } }

/* ---------- подвал ---------- */
.footer{ background:var(--surface); border-top:1px solid var(--line); padding:var(--s-7) 0 var(--s-6); font-size:var(--fs-2); }
.footer__top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-5) var(--s-6); padding-bottom:var(--s-6); margin-bottom:var(--s-6); border-bottom:1px solid var(--line); }
.footer__brand{ flex:none; }
.footer__brand img{ height:64px; width:auto; }
.footer .status{ color:var(--ink-2); }
.footer .status img{ height:36px; }
.footer__grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--s-6); }
.footer h4,.footer__title{ font-size:var(--fs-2); color:var(--ink-2); font-weight:500; margin-bottom:var(--s-3); letter-spacing:0; line-height:var(--lh-head); }
.footer ul{ list-style:none; display:grid; gap:var(--s-2); }
.footer a{ color:var(--ink); text-decoration:none; }
.footer a:hover{ color:var(--brand); }
.footer__contacts p + p{ margin-top:var(--s-2); }
/* группа ссылок: на компьютере — колонка с заголовком (раскрыта всегда, app.js), на телефоне — строка, раскрывается по нажатию */
.fgroup > summary{ display:block; list-style:none; }
.fgroup > summary::-webkit-details-marker{ display:none; }
.fgroup + .fgroup,.footer__contacts .fgroup{ margin-top:var(--s-5); }
@media (min-width:641px){ .fgroup > summary{ pointer-events:none; } }
.footer__bottom{ margin-top:var(--s-6); padding-top:var(--s-4); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s-2) var(--s-5); color:var(--ink-2); font-size:var(--fs-1); }
/* две колонки — газетой, а не сеткой 2×2: в сетке ряд тянулся по самой высокой группе, и под «Направлениями»
   оставалась дыра до «Контактов фонда» (замечание 29.09); группы не рвутся между колонками */
@media (max-width:980px){
  .footer__grid{ display:block; columns:2; column-gap:var(--s-6); }
  .footer__grid > div{ break-inside:avoid; margin-bottom:var(--s-6); }
  .footer__grid > div:last-child{ margin-bottom:0; }
}
/* телефон (пункт 22 разбора, 08.10.2026: подвал был 1 600 px, ссылки по 20 px): сначала контакты Фонда, группы ссылок — строками
   по 48 px, раскрываются по нажатию; ссылки — с полем нажатия 40 px */
@media (max-width:640px){
  .footer__grid{ display:flex; flex-direction:column; columns:auto; gap:0; }
  .footer__grid > div{ margin:0; }
  .footer__grid > .footer__main{ order:-1; margin-bottom:var(--s-5); }
  .footer__contacts p + p{ margin-top:0; }
  .footer__contacts p a{ display:inline-block; padding-block:var(--s-2); }
  .footer__contacts:not(.footer__main){ padding-top:var(--s-4); border-top:1px solid var(--line); }
  .fgroup,.fgroup + .fgroup,.footer__contacts .fgroup{ margin:0; border-top:1px solid var(--line); }
  .footer__contacts .fgroup{ margin-top:var(--s-4); }
  .fgroup > summary{ position:relative; display:flex; align-items:center; min-height:48px; padding-right:var(--s-6); cursor:pointer; }
  .fgroup > summary .footer__title{ margin:0; color:var(--ink); font-family:var(--font); font-size:var(--fs-3); font-weight:600; }
  .fgroup > summary::after{ content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); color:var(--mark); font-size:var(--fs-5); line-height:var(--lh-head); }
  .fgroup[open] > summary::after{ content:"−"; }
  .fgroup > ul{ gap:0; padding-bottom:var(--s-3); }
  .fgroup a{ display:block; padding-block:var(--s-2); }
  .footer__grid > div:last-child .fgroup:last-child{ border-bottom:1px solid var(--line); }
}

/* нажимаемое на телефоне — не меньше 24 px по высоте (пункт 27 разбора, WCAG 2.5.8): ссылкам в строках текста — поле за счёт отступов */
@media (max-width:640px){
  .empty a,.contact-card__hours a,.article__foot a,.art__aside p > a,.roles-table__roles a,.links-list a{ display:inline-block; padding-block:var(--s-1); }
  .hc__row{ padding-block:var(--s-1); }
}

/* кнопка вверх */
.to-top{ position:fixed; right:var(--s-5); bottom:var(--s-5); z-index:30; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); background:var(--paper); color:var(--ink); display:grid; place-items:center; box-shadow:var(--shadow); opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .2s var(--ease), transform .2s var(--ease); cursor:pointer; }
.to-top.is-on{ opacity:1; pointer-events:auto; transform:none; }   /* выезжает снизу (Р8 A, 08.10.2026) */

/* появление. Блок виден по умолчанию: прячет его только app.js и только ниже первого экрана (.is-pending),
   поэтому пока страница догружается или скрипт ещё не пришёл, содержимое не пропадает. */
.reveal{ transition:opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); transition-delay:var(--d, 0s); }
.reveal.is-pending{ opacity:0; transform:translateY(12px); }
@keyframes rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.hero__text > *, .hero__photo, .page-head__text > *, .page-head__photo{ animation:rise var(--t-base) var(--ease) both; }
.hero__text > :nth-child(2), .page-head__text > :nth-child(2){ animation-delay:60ms; }
.hero__text > :nth-child(3), .page-head__text > :nth-child(3){ animation-delay:120ms; }
.page-head__text > :nth-child(4){ animation-delay:180ms; }
.hero__photo, .page-head__photo{ animation-delay:120ms; }
.steps li::before{ transition:transform var(--t-base) var(--ease), background var(--t-fast) var(--ease); }
.steps li.reveal.is-pending::before{ transform:scale(.6); }
.steps li:hover::before{ background:var(--brand); color:var(--paper); }
/* нажатие: кнопка на долю секунды утапливается (С11 A, 08.10.2026) — отклик и на телефоне, где наведения нет */
.btn{ transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform .09s var(--ease); }
.btn:active{ transform:scale(.97); }
/* переход между страницами (С4 A, 08.10.2026; Chrome, Edge, Safari 18.2+): шапка стоит, новая страница проступает поверх
   прежней за 0,25 с. Пока следующая грузится, прежняя бледнеет (.is-leaving main, с 0,25 с) и идёт полоса загрузки: 08.10 бледнение
   здесь выключали, пользователь заметил «пропало осветление текста при загрузке» — возвращено 13.10.2026. */
@view-transition{ navigation:auto; }
.header{ view-transition-name:site-header; }
::view-transition-group(*){ animation-duration:.25s; animation-timing-function:var(--ease); }
::view-transition-old(root){ animation:vt-out .16s ease-in both; }
::view-transition-new(root){ animation:vt-in .26s var(--ease) both; }
@keyframes vt-out{ to{ opacity:0; } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(8px); } }
@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none; }
  .header,.header__in > *,.brand__logo{ animation:none !important; transform:none !important; }
  *,*::before,*::after{ transition-duration:0s !important; animation-duration:0s !important; animation-delay:0s !important; scroll-behavior:auto !important; }
  .reveal.is-pending{ opacity:1; transform:none; }
  .chip--open::after,.timeline li::after{ animation:none; }
  .is-leaving main{ opacity:1; }
}

/* 404: под кнопками — ситуации развилки главной, справа — знак оттиском (пункт 39 разбора, 08.10.2026) */
.notfound{ position:relative; overflow:hidden; padding:var(--s-9) 0 var(--s-8); text-align:left; }
.notfound > .container{ position:relative; z-index:1; }
.notfound__wm{ position:absolute; z-index:0; right:-110px; top:-70px; height:440px; pointer-events:none; }   /* знак кончается над ситуациями — подставка не ложится на строки */
.notfound__wm .wm-svg{ height:100%; width:auto; max-width:none; opacity:.24; }
.notfound .links{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-5); }
.notfound__fork{ --fork-line:var(--line); margin-top:var(--s-8); }
.notfound__fork h2{ font-size:var(--fs-6); }
@media (max-width:640px){ .notfound{ padding:var(--s-7) 0; } .notfound__wm{ right:-140px; top:-30px; height:320px; } .notfound__fork{ margin-top:var(--s-7); } }

/* ---------- переключатель вариантов палитры (показ заказчику, ?variants) ---------- */
.variants{ position:fixed; left:var(--s-4); bottom:var(--s-4); z-index:60; display:flex; gap:var(--s-1); padding:var(--s-1); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-pill); box-shadow:var(--shadow); }
.variants button{ font:inherit; font-size:var(--fs-1); font-weight:600; min-height:32px; padding:0 var(--s-3); border:0; border-radius:var(--r-pill); background:transparent; color:var(--ink-2); cursor:pointer; }
.variants button[aria-pressed="true"]{ background:var(--brand); color:var(--paper); }


/* ---------- блоки из админки (28.09.2026) ---------- */
/* объявление над шапкой: срок показа — data-until, после него app.js прячет полосу, сборка её не выводит. Графитовое, как
   верхняя полоса с адресом (пункт 2 разбора, 08.10.2026: без тёплых подложек), отделено от неё тонкой светлой чертой */
.announce{ background:var(--dark); border-bottom:1px solid color-mix(in srgb, var(--on-dark) 18%, var(--dark)); color:var(--on-dark); font-size:var(--fs-2); }
.announce__in{ display:flex; align-items:center; gap:var(--s-2); min-height:40px; padding-block:var(--s-2); }
.announce__in .icon{ width:18px; height:18px; flex:none; color:var(--mark); }
.announce a{ color:var(--on-dark); font-weight:600; }
.announce a:hover{ color:var(--on-dark-2); }
/* вопросы и ответы: нативные <details>, открываются с клавиатуры, стрелка поворачивается */
.faq{ display:grid; border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{ position:relative; display:block; padding:var(--s-4) var(--s-7) var(--s-4) 0; font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-4); font-weight:600; line-height:var(--lh-title); cursor:pointer; list-style:none; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:""; position:absolute; right:var(--s-2); top:50%; width:10px; height:10px; border-right:2px solid var(--mark); border-bottom:2px solid var(--mark); transform:translateY(-70%) rotate(45deg); transition:transform var(--t-fast) var(--ease); }
.faq__item[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq__item summary:hover{ color:var(--brand); }
.faq__a{ padding:0 0 var(--s-5); max-width:68ch; }
.faq__a > * + *{ margin-top:var(--s-3); }
.block__figure{ max-width:760px; }
.docs__desc{ flex-basis:100%; color:var(--ink-2); font-size:var(--fs-2); }
.article__gallery{ margin-top:var(--s-6); }
.article__gallery .ph{ margin:0; }            /* отступы обложки (.article .ph) фото галереи не нужны: подпись отъезжала от фото */
.prose .bul{ margin-top:var(--s-3); }

/* уведомление о cookie: только при включённой Метрике, слева внизу (справа — кнопка «наверх») */
.cookie{ position:fixed; left:var(--s-4); bottom:var(--s-4); z-index:60; display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-4); max-width:460px; padding:var(--s-4) var(--s-5); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-2); box-shadow:var(--shadow); font-size:var(--fs-2); }
.cookie p{ flex:1 1 220px; }
@media (max-width:640px){ .cookie{ right:var(--s-4); max-width:none; } }

/* ---------- фото крупно (С6 A, 08.10.2026): щелчок по фото галереи или полосы фото направления — снимок вырастает из миниатюры;
   ✕, Esc или щелчок — обратно в миниатюру; стрелки — соседние фото. Окно — <dialog> (фокус внутри, Esc из коробки). ---------- */
.ph[role="button"]{ cursor:zoom-in; }
/* окно — ровно видимая область: 100vw на Windows шире её на полосу прокрутки, и правые кнопки уходили к самому краю (09.10.2026) */
.lb{ --lb-in:var(--s-5); position:fixed; inset:0; width:auto; max-width:none; height:auto; max-height:none; margin:0; padding:var(--s-7) var(--s-9); border:0; background:transparent; color:var(--on-dark); overflow:hidden; }
.lb::backdrop{ background:rgb(27 38 49 / .92); }
.lb[open]::backdrop{ animation:lb-bg .3s var(--ease); }
@keyframes lb-bg{ from{ background:rgb(27 38 49 / 0); } }
.lb__fig{ display:grid; place-items:center; align-content:center; gap:var(--s-3); height:100%; margin:0; }
.lb__img{ display:block; max-width:min(1200px, 100%); max-height:calc(100dvh - 160px); width:auto; height:auto; border-radius:var(--r-1); }
.lb__cap{ max-width:80ch; color:var(--on-dark-2); font-size:var(--fs-2); line-height:var(--lh-title); text-align:center; }
.lb__btn{ position:absolute; display:grid; place-items:center; width:48px; height:48px; padding:0; border:1px solid rgb(255 255 255 / .28); border-radius:50%; background:rgb(27 38 49 / .6); color:var(--on-dark); cursor:pointer; transition:background-color var(--t-fast) var(--ease); }
.lb__btn:hover{ background:rgb(255 255 255 / .14); }
.lb__btn .icon{ width:22px; height:22px; }
/* один отступ у всех кнопок — 24 px от края (16 px на телефоне), с учётом выреза экрана; до поля фото — тоже 24 px */
.lb__x{ top:max(var(--lb-in), env(safe-area-inset-top)); right:max(var(--lb-in), env(safe-area-inset-right)); }
.lb__prev,.lb__next{ top:50%; margin-top:-24px; }
.lb__prev{ left:max(var(--lb-in), env(safe-area-inset-left)); } .lb__next{ right:max(var(--lb-in), env(safe-area-inset-right)); }
.lb__prev .icon{ transform:rotate(180deg); }
@media (max-width:640px){ .lb{ --lb-in:var(--s-4); padding:var(--s-8) var(--s-4) var(--s-9); } .lb__prev,.lb__next{ top:auto; bottom:max(var(--lb-in), env(safe-area-inset-bottom)); margin-top:0; } }
.lb.is-closing::backdrop{ animation:lb-bg-out .26s var(--ease) forwards; }
@keyframes lb-bg-out{ to{ background:rgb(27 38 49 / 0); } }
.lb .lb__cap,.lb .lb__btn{ transition:opacity .12s; }
.lb.is-closing .lb__cap,.lb.is-closing .lb__btn{ opacity:0; }

/* ---------- почта: значок «скопировать» рядом (С9 A, 08.10.2026) — на рабочих компьютерах почтовая программа часто не настроена
   и щелчок по адресу ничего не открывает. Кнопку ставит app.js; цвет — от строки, поэтому и на графитовой полосе. ---------- */
.copyline{ display:inline-flex; align-items:center; gap:var(--s-2); justify-self:start; min-width:0; max-width:100%; }
.copy{ position:relative; display:grid; place-items:center; flex:none; width:32px; height:32px; padding:0; border:1px solid color-mix(in srgb, currentColor 55%, transparent);   /* было 24 % — рамку не было видно (Н5 A) */ border-radius:var(--r-1); background:transparent; color:inherit; cursor:pointer; transition:border-color var(--t-fast) var(--ease); }
.copy:hover{ border-color:currentColor; }
.copy svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:opacity .15s, transform .2s var(--ease); }
.copy .copy__ok{ position:absolute; opacity:0; transform:scale(.6); color:var(--ok); }
.copy.is-ok .copy__i{ opacity:0; transform:scale(.6); }
.copy.is-ok .copy__ok{ opacity:1; transform:none; }
.copy.is-ok{ border-color:var(--ok); }
.callout-band .copy .copy__ok{ color:#8fd6a5; } .callout-band .copy.is-ok{ border-color:#8fd6a5; }
.copy__tip{ position:absolute; right:0; bottom:calc(100% + 6px); padding:var(--s-1) var(--s-2); border-radius:var(--r-1); background:var(--ink); color:var(--paper); font-size:var(--fs-1); font-weight:600; line-height:1.2; white-space:nowrap; opacity:0; transform:translateY(4px); transition:opacity .15s, transform .2s var(--ease); pointer-events:none; }   /* по правому краю кнопки: у края экрана не выходит за него */
.copy.is-ok .copy__tip{ opacity:1; transform:none; }

/* =====================================================================================================
   Движение, второй круг — выбор 08.10.2026 (Р2 B, Р3–Р9 A; Р1 — не делать). Одна кривая --ease, только положение
   и прозрачность, всё один раз; при «уменьшить движение» — общий сброс длительностей выше и проверки в app.js.
   ===================================================================================================== */
/* Р2 B: фото, которое ещё грузится, проявляется поверх размытого превью и чуть уменьшается до своего размера */
.ph--img img{ transition:opacity .6s var(--ease), transform .8s var(--ease); }
.ph--img.is-loading img{ opacity:0; transform:scale(1.04); }
.ph--img.is-loaded::after{ content:none; }   /* фото на месте — размытое превью под ним не перерисовывается при прокрутке */

/* Р3 A, переделано 08.10.2026 («очень плохо работает анимация»: шаги загорались каждый на своём уровне экрана — рывками
   и с запаздыванием): список показался — один раз проигрывается сам: кружки заливаются через 0,4 с, линия идёт от шага к шагу */
.steps.is-anim li::before{ transition:transform var(--t-base) var(--ease), background-color .25s var(--ease) calc(var(--k, 0) * .4s + .1s), color .25s var(--ease) calc(var(--k, 0) * .4s + .1s); }
.steps.is-anim li:not(:last-child)::after{ left:15px; width:2px; border-left:0;
  background:linear-gradient(var(--mark), var(--mark)) top / 2px 0% no-repeat, linear-gradient(var(--line), var(--line)) center / 1px 100% no-repeat;
  transition:background-size .28s linear calc(var(--k, 0) * .4s + .22s); }
.steps.is-anim.is-on li::before{ background:var(--brand); color:var(--paper); }
.steps.is-anim.is-on li:not(:last-child)::after{ background-size:2px 100%, 1px 100%; }

/* Р4 A: развилка — за строкой слева направо проходит светло-синяя полоса, стрелка сдвигается вперёд */
.fork__list li{ display:grid; }      /* ссылка во всю высоту ячейки: подсветка у соседних строк ряда одной высоты */
.fork__list li > a{ align-content:start; }   /* а текст — у верха, как был */
.fork__list a{ position:relative; isolation:isolate; }
.fork__list a::before{ content:""; position:absolute; z-index:-1; inset:0 calc(var(--s-4) * -1); background:color-mix(in srgb, var(--mark) 9%, transparent);
  transform:scaleX(0); transform-origin:left center; transition:transform .35s var(--ease); pointer-events:none; }
.fork__list a:hover::before,.fork__list a:focus-visible::before{ transform:scaleX(1); }
.fork__list a:hover .fork__q{ text-decoration-color:transparent; }

/* Р5 A: черта над числом прочерчивается вместе со счётом */
.fact__num.is-wait::before{ transform:scaleX(0); }
.fact__num.is-count::before{ transform-origin:left center; animation:draw .9s var(--ease) both; }

/* Р6 A: рубрики — тёмная отметка перетекает к выбранной (передний край уходит первым, задний догоняет); рубрики прозрачные,
   чтобы отметка не пряталась под соседними; подпись, над которой она проходит, на это время белая. Список — плавно. */
.chips.has-pill{ position:relative; isolation:isolate; }
.chips__pill{ position:absolute; z-index:-1; left:0; top:0; width:0; height:36px; border-radius:var(--r-pill); background:var(--ink); pointer-events:none; }
.chips.has-pill button{ background:transparent; transition:color .15s var(--ease), border-color .15s var(--ease); }
.chips.has-pill button[aria-pressed="true"]{ background:transparent; border-color:var(--line-strong); color:var(--ink); }
.chips.has-pill button.is-under,.chips.has-pill button.is-under:hover{ border-color:transparent; color:var(--paper); }
.flip-out{ opacity:0 !important; transition:opacity .15s ease-in !important; }
.flip-in{ animation:flip-in .25s var(--ease) both; }
@keyframes flip-in{ from{ opacity:0; } }

/* Р7 A: меню на телефоне — пункты поднимаются друг за другом */
@media (max-width:980px){
  .menu-open .mnav > *{ animation:mnav-in .3s var(--ease) both; animation-delay:calc(.12s + var(--i, 0) * 25ms); }
}
@keyframes mnav-in{ from{ opacity:0; transform:translateY(6px); } }

/* Р9 A: «Структура» — линия от директора прочерчивается вниз, от неё — к управлениям, затем проступают направления */
.tree.is-anim .tree__units{ border-left-color:transparent; }
.tree.is-anim .tree__units::before{ content:""; position:absolute; left:-1px; top:0; bottom:0; width:1px; background:var(--ln); transform:scaleY(0); transform-origin:top; transition:transform .6s var(--ease); }
.tree.is-anim .tree__units > li::before{ transform:scaleX(0); transform-origin:left center; transition:transform .3s var(--ease); transition-delay:calc(.35s + var(--k, 0) * .2s); }
.tree.is-anim .tree__name,.tree.is-anim .tree__links{ opacity:0; transition:opacity .4s var(--ease); transition-delay:calc(.55s + var(--k, 0) * .2s); }
.tree.is-anim.is-drawn .tree__units::before,.tree.is-anim.is-drawn .tree__units > li::before{ transform:none; }
.tree.is-anim.is-drawn .tree__name,.tree.is-anim.is-drawn .tree__links{ opacity:1; }

/* =====================================================================================================
   Третий круг «что ещё круто» — выбор 08.10.2026: К1 A, К2 A, К3 A, К4 A, К5 A (выше, у карточек), К6 A, К7 B + C, К8 A, К9 A.
   ===================================================================================================== */
/* луч маяка из фонаря знака оттиском: клин конического градиента за текстом, гаснет к краям */
.beam{ position:absolute; left:50.3%; top:30%; width:0; height:0; z-index:1; pointer-events:none; }
.beam::before{ content:""; position:absolute; left:-1500px; top:-1500px; width:3000px; height:3000px; border-radius:50%;
  background:conic-gradient(from -15deg, rgb(62 146 204 / 0) 0deg, rgb(62 146 204 / .14) 7deg, rgb(62 146 204 / .36) 15deg, rgb(62 146 204 / .14) 23deg, rgb(62 146 204 / 0) 30deg, transparent 30deg);
  -webkit-mask:radial-gradient(closest-side, #000 4%, rgb(0 0 0 / .9) 30%, rgb(0 0 0 / .5) 62%, transparent 100%); mask:radial-gradient(closest-side, #000 4%, rgb(0 0 0 / .9) 30%, rgb(0 0 0 / .5) 62%, transparent 100%);
  transform:rotate(200deg); opacity:0; }
.beam::after{ content:""; position:absolute; left:-60px; top:-60px; width:120px; height:120px; border-radius:50%; background:radial-gradient(rgb(62 146 204 / .45), rgb(62 146 204 / 0) 70%); opacity:0; }
/* К9 A: на 404 маяк ищет страницу — луч медленно ходит из стороны в сторону */
.beam--search::before{ opacity:1; animation:beam-search 9s cubic-bezier(.45,0,.55,1) infinite alternate; }
.beam--search::after{ opacity:.8; }
@keyframes beam-search{ from{ transform:rotate(185deg); } to{ transform:rotate(300deg); } }


/* К3 A: сколько осталось до конца приёма — в полосе объявления, по иркутскому времени */
.announce__in{ flex-wrap:wrap; }
.announce__t{ flex:1 1 240px; min-width:0; }   /* текст рядом со значком; «осталось …» справа, на телефоне — строкой ниже */
.announce__left{ margin-left:auto; padding-left:var(--s-4); color:var(--on-dark-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
.announce__left b{ display:inline-block; color:var(--on-dark); font-weight:700; }
.announce__left b.is-tick{ animation:ann-tick .4s var(--ease); }
@keyframes ann-tick{ from{ opacity:0; transform:translateY(-6px); } }
@media (max-width:640px){ .announce__left{ flex-basis:100%; margin-left:calc(18px + var(--s-2)); padding-left:0; } }

/* К4 A: подбор программы за два вопроса — окно по кнопке «Подобрать программу» */
.wz{ width:min(560px, calc(100vw - 32px)); max-height:calc(100dvh - 48px); padding:0; border:0; border-radius:var(--r-2); background:var(--paper); color:var(--ink); box-shadow:var(--shadow); overflow:auto; }
.wz::backdrop{ background:rgb(27 38 49 / .5); }
.wz[open]{ animation:wz-in .3s var(--ease) both; }
.wz[open]::backdrop{ animation:wz-fade .25s ease both; }
@keyframes wz-in{ from{ opacity:0; transform:translateY(12px) scale(.98); } }
@keyframes wz-fade{ from{ opacity:0; } }
.wz__box{ position:relative; padding:var(--s-6) var(--s-6) var(--s-5); }
.wz__x{ position:absolute; right:var(--s-3); top:var(--s-3); display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:var(--r-1); background:none; color:var(--ink-2); cursor:pointer; }
.wz__x:hover{ background:var(--panel); color:var(--ink); }
.wz__x .icon{ width:20px; height:20px; }
.wz__step{ color:var(--ink-2); font-size:var(--fs-1); letter-spacing:.04em; text-transform:uppercase; }
.wz__q{ margin:var(--s-2) 0 var(--s-4); padding-right:var(--s-6); font-size:var(--fs-6); }
.wz__body > *{ animation:wz-fade .25s var(--ease) both; }
.wz__opts{ display:grid; gap:var(--s-2); }
.wz__opts button{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); min-height:52px; padding:var(--s-2) var(--s-4); border:1px solid var(--line-strong); border-radius:var(--r-1);
  background:var(--paper); color:var(--ink); font:inherit; font-size:var(--fs-3); text-align:left; cursor:pointer; transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.wz__opts button:hover,.wz__opts button:focus-visible{ border-color:var(--brand); background:var(--brand-soft); }
.wz__opts .icon{ width:18px; height:18px; color:var(--mark); }
.wz__r + .wz__r{ margin-top:var(--s-4); padding-top:var(--s-4); border-top:1px solid var(--line); }
.wz__t{ font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-5); font-weight:700; line-height:var(--lh-title); color:var(--ink); text-decoration:none; }
.wz__t:hover{ color:var(--brand); }
.wz__x2{ margin:var(--s-1) 0 var(--s-3); color:var(--ink-2); font-size:var(--fs-2); }
.wz__who{ margin-bottom:var(--s-3); font-size:var(--fs-2); }
.wz__acts{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.wz__back{ margin-top:var(--s-4); padding:var(--s-1) 0; border:0; background:none; color:var(--brand); font:inherit; font-size:var(--fs-2); cursor:pointer; }
.wz__back:hover{ text-decoration:underline; }
@media (max-width:640px){ .wz__box{ padding:var(--s-5) var(--s-4) var(--s-4); } .wz__acts .btn{ flex:1 1 auto; } }

/* К6 A: цифры — барабанами: каждая цифра прокручивается колонкой 0–9 на своё место, разряды справа налево */
.odo{ display:inline-block; height:1.15em; overflow:hidden; vertical-align:top; }
.odo__s{ display:block; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.odo__s > span{ display:block; height:1.15em; line-height:1.15; }
.fact__num.has-odo{ line-height:1.15; }


/* К8 A: заголовок первого экрана — слова выходят из-под черты друг за другом, затем прочерчивается синяя черта */
h1 .w{ display:inline-block; vertical-align:top; overflow:hidden; padding:.1em 0 .14em; margin:-.1em 0 -.14em; }
h1 .w > span{ display:inline-block; animation:word-rise .6s var(--ease) both; animation-delay:calc(var(--i, 0) * 60ms + 60ms); }
@keyframes word-rise{ from{ opacity:0; transform:translateY(112%); } }   /* и проявляются, как до К8 (13.10.2026, «пропало осветление текста при загрузке») */
.hero__text > h1,.page-head__text > h1{ animation:none; }
.hero__text > :nth-child(2),.page-head__text > :nth-child(2){ animation-delay:.3s; }
.hero__text > :nth-child(3),.page-head__text > :nth-child(3){ animation-delay:.38s; }
.hero__text > :nth-child(4),.page-head__text > :nth-child(4){ animation-delay:.46s; }
.hero h1::after,.page-head h1::after{ animation-delay:.55s; }
@media (prefers-reduced-motion:reduce){ .beam{ display:none; } }

/* карточка Точки кипения: карта и соцсети — кнопками со знаками (замечание «соц сети поправить», 08.10.2026) */
.contact-card__links{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-3); }
.contact-card__links a{ display:inline-flex; align-items:center; gap:var(--s-2); min-height:40px; padding:0 var(--s-4) 0 var(--s-1); border:1px solid var(--line-strong); border-radius:var(--r-pill);
  color:var(--ink); font-size:var(--fs-2); font-weight:600; text-decoration:none; transition:border-color var(--t-fast) var(--ease); }
.contact-card__links a:hover{ border-color:var(--mark); color:var(--ink); }
.cl__ic{ display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:50%; background:var(--dark); color:var(--on-dark); }
.cl__ic svg{ width:16px; height:16px; }
.copy[hidden]{ display:none; }

/* «если много пролистываю … до конца и после, а потом обратно — фризит» (08.10.2026): прокрутка «в упор» копит упругую перекрутку
   (тачпад, колесо в Chrome на Windows), и обратно страница сначала отматывает её — похоже на зависание. На компьютере перекрутка
   выключена; на телефоне — как привычно (оттяжка, обновление страницы). */
@media (hover:hover) and (pointer:fine){ html{ overscroll-behavior-y:none; } }

/* политика обработки персональных данных (12.10.2026): у каждой цели — данные, чьи, зачем, основание, срок — строками «подпись — значение» */
.pol-goal{ margin-top:var(--s-6); }
.pol-goal h3{ font-size:var(--fs-4); margin-bottom:var(--s-3); }
.pol-dl{ display:grid; grid-template-columns:minmax(110px, 150px) minmax(0, 1fr); gap:var(--s-2) var(--s-4); max-width:70ch; margin:0; padding-top:var(--s-3); border-top:1px solid var(--line); }
.pol-dl dt{ padding-top:2px; color:var(--ink-2); font-size:var(--fs-2); }
.pol-dl dd{ margin:0; }
.pol-ed{ margin-top:var(--s-6); color:var(--ink-2); font-size:var(--fs-2); }
@media (max-width:640px){ .pol-dl{ grid-template-columns:minmax(0, 1fr); gap:2px; } .pol-dl dd + dt{ margin-top:var(--s-3); } }

/* ===================== второй круг 12.10.2026 — выбор «Н1 B, Н3 C1, Н4 C, Н5 A, Н6 A» ===================== */
/* Н1 B — главная, «Чем занимается Фонд»: направления и проекты одним блоком на графите со знаком оттиском */
.dband{ position:relative; isolation:isolate; overflow:hidden; padding:var(--s-7); border-radius:var(--r-2); background:var(--dark); color:var(--on-dark); }
.dband__wm{ position:absolute; z-index:-1; right:-6%; bottom:-30%; height:125%; width:auto; max-width:none; color:var(--on-dark); opacity:.06; pointer-events:none; }
.dband__head{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:var(--s-2) var(--s-6); align-items:end; margin-bottom:var(--s-6); }
.dband__head h2{ color:var(--on-dark); }
.dband__head p{ grid-column:1; max-width:52ch; color:var(--on-dark-2); }
.dband__all{ grid-column:2; grid-row:1 / span 2; display:inline-flex; align-items:center; gap:var(--s-2); color:var(--on-dark); font-weight:600; text-decoration:none; white-space:nowrap; }
.dband__all:hover{ color:var(--on-dark); }
.dband .icon{ color:var(--mark); transition:transform var(--t-fast) var(--ease); }
.dband__all:hover .icon{ transform:translateX(4px); }
.dband__cols{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s-6); }
.dband__g--two{ grid-column:span 2; }
.dband__grp{ display:flex; justify-content:space-between; gap:var(--s-3); padding-bottom:var(--s-2); border-bottom:1px solid rgb(255 255 255 / .28); color:var(--on-dark-2); font-size:var(--fs-1); }
.dband__grp--pj{ margin-top:var(--s-6); }
.dband__ul{ list-style:none; }
.dband__g--two .dband__ul{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:repeat(var(--rows, 4), auto); grid-auto-flow:column; column-gap:var(--s-6); }
.dband__ul li{ border-bottom:1px solid rgb(255 255 255 / .12); }
.dband__ul a{ display:grid; grid-template-columns:minmax(0, 1fr) 20px; column-gap:var(--s-3); align-items:center; padding:var(--s-3) 0; color:var(--on-dark); text-decoration:none; }
.dband__t{ font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-4); font-weight:600; line-height:var(--lh-title); }
.dband__k{ grid-column:1; margin-top:2px; font-size:var(--fs-1); color:var(--on-dark-2); }
.dband__ul .icon{ grid-column:2; grid-row:1 / span 2; width:20px; height:20px; }
.dband__ul a:hover .dband__t,.dband__pj a:hover .dband__pt{ color:#a9d2f0; }
.dband__ul a:hover .icon,.dband__pj a:hover .icon{ transform:translateX(4px); }
.dband__pj{ list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s-3); margin-top:var(--s-4); }
.dband__pj a{ display:grid; grid-template-columns:64px minmax(0, 1fr) 20px; gap:var(--s-3); align-items:center; height:100%; padding:var(--s-3); border:1px solid rgb(255 255 255 / .12); border-radius:var(--r-2); background:rgb(255 255 255 / .05); color:var(--on-dark); text-decoration:none; transition:background-color var(--t-fast) var(--ease); }
.dband__pj a:hover{ background:rgb(255 255 255 / .1); }
.dband__th{ position:relative; display:block; overflow:hidden; width:64px; height:64px; border-radius:var(--r-1); background:rgb(255 255 255 / .08); }
.dband__th img{ display:block; width:100%; height:100%; object-fit:cover; }
.dband__th .wm-svg{ position:absolute; right:-12%; bottom:-18%; height:106%; width:auto; max-width:none; color:var(--on-dark); opacity:.35; }
.dband__pt{ display:block; font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-4); font-weight:600; line-height:var(--lh-title); }
.dband__pk{ display:block; margin-top:2px; font-size:var(--fs-1); color:var(--on-dark-2); }
.dband__pj .icon{ width:20px; height:20px; }
@media (max-width:980px){ .dband__cols{ grid-template-columns:minmax(0, 1fr); } .dband__g--two{ grid-column:auto; } .dband__pj{ grid-template-columns:minmax(0, 1fr); } }
@media (max-width:640px){ .dband{ padding:var(--s-5); } .dband__head{ grid-template-columns:minmax(0, 1fr); } .dband__all{ grid-column:1; grid-row:auto; }
  .dband__g--two .dband__ul{ grid-template-columns:minmax(0, 1fr); grid-template-rows:none; grid-auto-flow:row; } }

/* Н3 C1 — «Направления»: «Кто вы?» — подходящее наверх с тем, что именно получите; без выбора — весь список по управлениям */
.who__top{ margin-bottom:var(--s-5); }
.who__q{ font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-6); font-weight:700; line-height:var(--lh-head); }
.who__pick{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:var(--s-3); margin-top:var(--s-4); }
.who__pick button{ display:grid; justify-items:start; align-content:start; gap:var(--s-3); min-height:112px; padding:var(--s-4); border:1px solid var(--line-strong); border-radius:var(--r-2); background:var(--paper); color:var(--ink); font:inherit; font-size:var(--fs-2); font-weight:600; line-height:var(--lh-title); text-align:left; cursor:pointer; transition:border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.who__pick .icon{ width:28px; height:28px; color:var(--mark); }
.who__pick button:hover{ border-color:var(--brand); }
.who__pick button[aria-pressed="true"]{ background:var(--dark); border-color:var(--dark); color:var(--on-dark); }
.who__pick button[aria-pressed="true"] .icon{ color:#a9d2f0; }
.who__hint{ margin-top:var(--s-4); color:var(--ink-2); font-size:var(--fs-2); }
.who__list{ list-style:none; }
.who__g{ padding:var(--s-6) 0 var(--s-2); border-bottom:2px solid var(--ink); font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-4); font-weight:700; }
.who__list > .who__g:first-child{ padding-top:0; }
.who__i{ border-bottom:1px solid var(--line); }
.who__i a{ position:relative; isolation:isolate; display:grid; grid-template-columns:48px minmax(0, 1fr) 24px; gap:var(--s-4); align-items:center; padding:var(--s-4) 0; color:var(--ink); text-decoration:none; }
.who__i a::before{ content:""; position:absolute; z-index:-1; inset:0 calc(var(--s-3) * -1); border-radius:var(--r-2); background:color-mix(in srgb, var(--mark) 8%, transparent); opacity:0; transition:opacity var(--t-fast) var(--ease); }
.who__i a:hover::before{ opacity:1; }
.who__ic{ position:relative; display:grid; place-items:center; overflow:hidden; width:48px; height:48px; border-radius:50%; background:color-mix(in srgb, var(--mark) 12%, var(--paper)); color:var(--brand); }
.who__ic .icon{ width:26px; height:26px; }
.who__ic--ph{ border-radius:var(--r-2); background:var(--panel); }
.who__ic--ph img{ display:block; width:100%; height:100%; object-fit:cover; }
.who__ic--ph .wm-svg{ position:absolute; right:-12%; bottom:-18%; height:106%; width:auto; max-width:none; opacity:.3; }
.who__k{ display:block; font-size:var(--fs-1); color:var(--ink-2); }
.who__t{ display:block; font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-5); font-weight:600; line-height:var(--lh-title); }
.who__x{ display:block; max-width:70ch; margin-top:2px; color:var(--ink-2); font-size:var(--fs-2); }
.who__need{ display:flex; flex-wrap:wrap; gap:var(--s-1); margin-top:var(--s-2); }
.who__need:empty{ display:none; }
.who__need span{ display:inline-flex; align-items:center; min-height:26px; padding:0 var(--s-3); border-radius:var(--r-pill); background:color-mix(in srgb, var(--mark) 14%, var(--paper)); color:var(--brand-strong); font-size:var(--fs-1); font-weight:600; }
.who__i .icon--arrow{ color:var(--mark); transition:transform var(--t-fast) var(--ease); }
.who__i a:hover .who__t{ color:var(--brand); }
.who__i a:hover .icon--arrow{ transform:translateX(4px); }
.who__rest{ margin-top:var(--s-5); }
.who__more{ display:inline-flex; align-items:center; gap:var(--s-2); min-height:44px; padding:0 var(--s-5); border:1px solid var(--line-strong); border-radius:var(--r-1); background:var(--paper); color:var(--ink); font:inherit; font-size:var(--fs-2); font-weight:600; cursor:pointer; }
.who__more:hover{ border-color:var(--ink); }
.who__list--rest{ margin-top:var(--s-3); }
.who__list--rest .who__x{ display:none; }
.who__i.is-in{ animation:who-in .35s var(--ease) both; }
@keyframes who-in{ from{ opacity:0; transform:translateY(8px); } }
@media (max-width:1100px){ .who__pick{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:640px){ .who__pick{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .who__pick button{ min-height:96px; }
  .who__i a{ grid-template-columns:40px minmax(0, 1fr); } .who__ic{ width:40px; height:40px; } .who__i .icon--arrow{ display:none; } }
@media (prefers-reduced-motion:reduce){ .who__i.is-in{ animation:none; } }

/* Н4 C — низ страницы направления: «Что ещё пригодится» — направление и чем оно поможет рядом с этой страницей */
.rel{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:var(--s-4); }
.rel__c{ position:relative; overflow:hidden; display:grid; grid-template-columns:48px minmax(0, 1fr); gap:var(--s-1) var(--s-4); align-content:start; padding:calc(var(--s-5) + 4px) var(--s-5) var(--s-5); border-radius:var(--r-2); background:var(--paper); color:var(--ink); text-decoration:none; transition:box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.rel__c::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--mark); }   /* синяя полоса сверху — плашкой, скругление её обрезает */
.rel__ic{ grid-row:1 / span 3; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:color-mix(in srgb, var(--mark) 12%, var(--paper)); color:var(--brand); }
.rel__ic .icon{ width:26px; height:26px; }
.rel__k{ font-size:var(--fs-1); color:var(--ink-2); }
.rel__t{ font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-5); font-weight:600; line-height:var(--lh-title); }
.rel__x{ grid-column:2; margin-top:var(--s-2); padding-top:var(--s-3); border-top:1px solid var(--line); font-size:var(--fs-2); }
.rel__go{ grid-column:2; justify-self:end; margin-top:var(--s-3); color:var(--mark); transition:transform var(--t-fast) var(--ease); }
.rel__c:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.rel__c:hover .rel__t{ color:var(--brand); }
.rel__c:hover .rel__go{ transform:translateX(4px); }

/* Н6 A — новости обложками и афишами: без фото — афиша на графите, как у слэма и «Тайги-Джуниор» */
.ngrid{ list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s-6) var(--s-4); }
.ncard{ min-width:0; }
.ncard[hidden],.nmini[hidden]{ display:none; }
.ncard__a{ display:grid; grid-template-rows:auto 1fr; gap:var(--s-3); height:100%; color:var(--ink); text-decoration:none; }
.ncard--big{ grid-column:1 / -1; }
.ncard--big .ncard__a{ grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); grid-template-rows:auto; gap:var(--s-6); align-items:center; }
.npo{ position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; aspect-ratio:3/2; padding:var(--s-4); border-radius:var(--r-2); background:var(--dark); color:var(--on-dark); }
.npo--big{ aspect-ratio:16/9; padding:var(--s-6); }
.npo .wm-svg{ position:absolute; z-index:-1; right:-10%; bottom:-34%; height:140%; width:auto; max-width:none; color:var(--on-dark); opacity:.07; }
.npo__r{ position:relative; display:inline-flex; align-items:center; gap:var(--s-2); padding-top:var(--s-4); color:var(--on-dark-2); font-size:var(--fs-1); font-weight:600; }
.npo__r::before{ content:""; position:absolute; left:0; top:0; width:40px; height:4px; border-radius:var(--r-pill); background:var(--mark); }
.npo__r .icon{ width:22px; height:22px; color:#a9d2f0; }
.npo__d{ display:flex; align-items:baseline; gap:var(--s-2); color:var(--on-dark-2); font-size:var(--fs-3); }
.npo__d b{ font-family:var(--font-head); font-size-adjust:.53; font-size:64px; font-weight:700; line-height:.9; color:var(--on-dark); }
.npo--big .npo__d b{ font-size:112px; }
.npo--mini{ aspect-ratio:4/3; padding:var(--s-2); border-radius:var(--r-1); }
.npo--mini .npo__r{ padding-top:0; }
.npo--mini .npo__r::before{ content:none; }
.npo--mini .npo__r .icon{ width:18px; height:18px; }
.npo--mini .npo__d b{ font-size:30px; }
.npo--mini .wm-svg{ opacity:.08; }
.ncard__t{ display:block; margin-top:var(--s-1); font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-4); font-weight:600; line-height:var(--lh-title); text-wrap:pretty; }
.ncard--big .ncard__t{ font-size:var(--fs-6); }
.ncard__x{ display:block; max-width:62ch; margin-top:var(--s-2); color:var(--ink-2); }
.ncard__a:hover .ncard__t,.nmini a:hover .nmini__t{ color:var(--brand); }
.ncard .news-item__meta,.nmini .news-item__meta{ margin-bottom:0; }
.ncol{ list-style:none; }
.ncol .ncard{ padding-bottom:var(--s-4); }
.ncol .ncard .npo,.ncol .ncard .ph{ aspect-ratio:5/2; }   /* свежая карточка в колонке рядом с «Ближайшим» — ниже, чтобы не перевешивала; маленькие афиши строк — свои 4:3 (13.10.2026: правило задевало и их — 96×38, число обрезалось) */
.nmini{ border-top:1px solid var(--line); }
.nmini a{ display:grid; grid-template-columns:96px minmax(0, 1fr); gap:var(--s-4); align-items:center; padding:var(--s-3) 0; color:var(--ink); text-decoration:none; }
.nmini .ph{ aspect-ratio:4/3; border-radius:var(--r-1); }
.nmini__t{ display:block; margin-top:2px; font-family:var(--font-head); font-size-adjust:.53; font-size:var(--fs-4); font-weight:600; line-height:var(--lh-title); }
@media (max-width:980px){ .ngrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .ncard--big .ncard__a{ grid-template-columns:minmax(0, 1fr); gap:var(--s-3); } }
@media (max-width:640px){ .ngrid{ grid-template-columns:minmax(0, 1fr); } .npo--big{ padding:var(--s-4); } .npo--big .npo__d b{ font-size:72px; } }
.chips[data-filter] + .ngrid{ margin-top:var(--s-5); }   /* второй ряд рубрик не прилипает к обложке */
@media (max-width:640px){ .contact-box__actions .btn--quiet{ width:auto; justify-self:start; } }   /* на телефоне ссылки карточки — у левого края, не кнопками во всю ширину (Кн1 C) */