/* ==========================================================================
   sprof27.ru — компоненты «B1-PRO Глубина»
   Стили блоков страниц. Все значения — из tokens.css; ни одного «магического»
   числа цвета или тени здесь быть не должно.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Меню-капсула
   Стеклянная капсула по центру, при скролле сжимается и прилипает к верху.
   -------------------------------------------------------------------------- */

.nav-wrap {
  position: sticky;
  top: 0;
  z-index: var(--z-menu);
  padding: 14px 0;
  pointer-events: none;
}

.nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: min(100% - var(--gut) * 2, 960px);
  margin-inline: auto;
  padding: 12px 14px 12px 22px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur-menu));
  backdrop-filter: blur(var(--blur-menu));
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--sh1);
  transition: padding var(--t-slow) var(--e-soft), box-shadow var(--t-slow) var(--e-soft);
}

.nav.is-compact {
  /* Плотнее подложка в сжатой шапке: сквозь .72-стекло просвечивал текст
     страницы (замечание из дизайна-полировки) */
  background: var(--glass-solid);
  padding: 7px 9px 7px 18px;
  box-shadow: var(--sh2);
}

.nav__mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
}

.nav__mark svg { display: block; }

/* Пункты распределяются равномерно по всей ширине между лого и правым
   краем капсулы: слева не копится пустота, «Записаться» прижат к краю.
   margin-left не нужен — зазор даёт собственный gap капсулы. */
.nav__list {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  display: block;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast) var(--e-soft);
}

.nav__link:hover,
.nav__link[aria-expanded="true"] { background: var(--w3); }

.nav__link[aria-current="page"] { color: var(--green-d); }

/* Базовая кнопка мобильного меню: скрыта по умолчанию, показывается в media.
   Селектор с двумя классами — иначе .btn (позже в файле) перебивает скрытие. */
.nav .nav__toggle { display: none; }

/* --------------------------------------------------------------------------
   Мега-меню «Волна»: панель со стекающей нижней кромкой
   -------------------------------------------------------------------------- */

.megamenu {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  width: min(100% - var(--gut) * 2, 960px);
  transform: translateX(-50%) translateY(-10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  background: var(--glass-solid);
  -webkit-backdrop-filter: blur(var(--blur-panel));
  backdrop-filter: blur(var(--blur-panel));
  border: 1px solid var(--line);
  /* нижняя кромка «стекает» — форма вместо рамки */
  border-radius: var(--r-wave);
  box-shadow: var(--sh3);
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-5) + 18px);

  transition: opacity var(--t-mid) var(--e-soft),
              transform var(--t-slow) var(--e-soft),
              visibility 0s linear var(--t-slow);
}

.megamenu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}

.megamenu__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.megamenu h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: var(--sp-2);
}

.megamenu ul { margin: 0; padding: 0; list-style: none; }

.megamenu li + li { margin-top: 2px; }

.megamenu a {
  display: block;
  padding: 7px 10px;
  margin-left: -10px;
  border-radius: 10px;
  font-size: 15px;
  text-decoration: none;
  transition: background var(--t-fast) var(--e-soft), padding-left var(--t-fast) var(--e-soft);
}

.megamenu a:hover { background: var(--w3); padding-left: 14px; }

.megamenu__promo {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--green-soft);
  border-radius: var(--r-plate);
  font-size: 15px;
}

/* Живая кромка: тот же силуэт панели, но «дышащий» */
.megamenu__lip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 54px;
  width: 100%;
  border-radius: 0 0 var(--r-wave);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border: 0;
  border-radius: var(--r-pill);
  font: 500 15px/1 var(--font-text);
  text-decoration: none;
  cursor: pointer;
  background: var(--w3);
  color: var(--ink);
  transition: background var(--t-fast) var(--e-soft);
}

.btn:hover { background: var(--w4); }

.btn--action {
  background: var(--green-d);
  color: #fff;
}

.btn--action:hover { background: var(--green-h); }

.btn--ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}

.btn--ghost:hover { background: var(--w3); }

/* Ряд кнопок: выравнивание и зазор по ритму системы */
.btn-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}


/* --------------------------------------------------------------------------
   Секции: ритм и заголовки
   -------------------------------------------------------------------------- */

/* Ритм секций: верх — полная база, низ — половина. Стык любых соседних
   секций даёт одинаковый зазор 1.5 × базы, без «двойного воздуха». */
.section { padding: var(--sp-7) 0 calc(var(--sp-7) * 0.5); }

.section--tight { padding: var(--sp-7) 0 calc(var(--sp-7) * 0.5); }

.section--deep {
  background: var(--deep);
  color: #fff;
  border-radius: var(--r-plate);
}

.section--deep .lead,
.section--deep .mono { color: var(--d4); }

/* Тёмная плита в раскладке страницы: внутренние поля. Значения те же,
   что у плиты «глубина» на главной. */
.deep {
  padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 64px);
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}

.lead {
  max-width: 58ch;
  font-size: var(--fs-lead);
  color: var(--mut);
}

/* --------------------------------------------------------------------------
   Капсула с текстом внутри живой формы
   -------------------------------------------------------------------------- */

.capsule {
  position: relative;
  aspect-ratio: 720 / 420;
  width: 100%;
}

.capsule svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Остров: заведомо внутри минимального радиуса контура. Инсет считается
   по углам плитки (прямоугольник в эллипс вписывается хуже, чем по осям),
   поэтому он велик — четверть капсулы с каждой стороны. */
.capsule__plate {
  position: absolute;
  inset: 27%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.capsule__plate h3 { font-size: clamp(22px, 2.4vw, 34px); }

.capsule__plate p { margin: 0; font-size: 15px; color: var(--mut); max-width: 34ch; }

/* --------------------------------------------------------------------------
   Карточка-плита с брендовым маркером (ncard).
   Текст живёт в статичном потоке и не зависит от живого контура: живые формы
   применяются там, где им место (чертёж знака первого экрана), а карточки
   получают знак «Эхо». Контент любой длины не может «вылезти» за фигуру.
   -------------------------------------------------------------------------- */

.ncard {
  background: var(--w1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh1);
}

.ncard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) 0;
}

.ncard__mark { flex: none; width: 44px; height: 44px; }

.ncard__mark svg { width: 100%; height: 100%; display: block; }

.ncard__title { margin: 0; font-size: var(--fs-h3); }

.ncard__title a { text-decoration: none; }

.ncard__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }

.ncard__list { margin: 0 0 var(--sp-3); padding-left: var(--sp-3); }

.ncard__list li { margin-bottom: 8px; }

.ncard__list li::marker { color: var(--green-d); }

.ncard__more { font-size: 14px; }

/* Дыхание карточки: пульсация глубины тени (через opacity псевдоэлемента —
   композитное свойство, контент не двигается и не перерисовывается). */
.ncard { position: relative; }

.ncard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--sh-lift);
  opacity: .25;
  pointer-events: none;
  z-index: -1;
  animation: ncard-breathe 7s var(--e-breathe) infinite alternate;
}

@keyframes ncard-breathe {
  from { opacity: .18; }
  to   { opacity: .6; }
}

/* Реакция на наведение: подъём, рамка глубже, знак оживляется */
.ncard {
  transition: transform var(--t-mid) var(--e-soft), border-color var(--t-mid) var(--e-soft);
}

.ncard:hover {
  transform: translateY(-5px);
  border-color: var(--d4);
}

.ncard__mark { transition: transform var(--t-mid) var(--e-soft); }

.ncard:hover .ncard__mark { transform: scale(1.08) rotate(-3deg); }

.ncard__title a { transition: color var(--t-fast) var(--e-soft); }

.ncard:hover .ncard__title a { color: var(--green-d); }

/* Появление при скролле: карточки идут по .reveal (motion.js), вторая — с задержкой */
.directions .ncard:nth-child(2).reveal.is-in { transition-delay: .12s; }

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

.tape {
  --tape-lift: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.tape__row {
  display: grid;
  grid-template-columns: 150px 1fr 130px 120px;
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  /* смещение по волне задаётся из components.js через --lift;
     переход длинный и линейный — смещение обновляется редко, но выглядит
     непрерывным */
  transform: translate3d(0, var(--lift, 0px), 0);
  transition: transform 900ms linear, background var(--t-fast) var(--e-soft);
}

.tape:hover .tape__row,
.tape:focus-within .tape__row,
.tape.is-aligned .tape__row {
  --lift: 0px;
  transform: translate3d(0, 0, 0);
  transition: transform var(--t-mid) var(--e-soft), background var(--t-fast) var(--e-soft);
}

.tape__row:hover { background: var(--w2); }

.tape__date {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--mut);
}

.tape__name { font-size: 17px; font-weight: 500; }

.tape__place,
.tape__status { font-size: 14px; color: var(--mut); }

.tape__status--free { color: var(--green-d); }

/* --------------------------------------------------------------------------
   Числа центра
   -------------------------------------------------------------------------- */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-4);
}

.figure__value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.figure__label {
  margin-top: 10px;
  font-size: 14px;
  color: var(--mut);
}

/* --------------------------------------------------------------------------
   Документы: лепестки
   -------------------------------------------------------------------------- */

.leaves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 900px) { .leaves { grid-template-columns: repeat(2, 1fr); } }

/* На узких экранах две колонки не помещаются: 1fr не сжимается ниже
   min-content самого длинного слова, и сетка раздувает страницу по горизонтали */
@media (max-width: 480px) { .leaves { grid-template-columns: 1fr; } }

.leaf {
  display: block;
  padding: var(--sp-4);
  background: var(--w2);
  border: 1px solid var(--line);
  border-radius: var(--r-leaf);
  text-decoration: none;
  color: inherit;
  transition: background var(--t-fast) var(--e-soft), transform var(--t-mid) var(--e-soft);
}

.leaf:hover { background: var(--w3); transform: translate3d(0, -3px, 0); }

.leaf__kind { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); color: var(--mut); text-transform: uppercase; }

.leaf__title { display: block; margin-top: 10px; font-size: 16px; font-weight: 500; }

/* --------------------------------------------------------------------------
   Шаги (как проходит экзамен)
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-3);
  counter-reset: step;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  padding-top: var(--sp-4);
  border-top: 2px solid var(--line);
  font-size: 15px;
}

.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: var(--sp-2);
  left: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--mut);
}

.step--done { border-top-color: var(--green); }

/* --------------------------------------------------------------------------
   Контакты
   Раскладка секции контактов и строки «метка — значение».
   Те же правила продублированы в локальном <style> главной страницы —
   при правке синхронизировать оба места.
   -------------------------------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-5);
  align-items: start;
}

@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

.contact__row { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }

.contact__row dt { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--mut); }

.contact__row dd { margin: 8px 0 0; font-size: 18px; }

.contact dl { margin: 0; }

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

.foot {
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line);
  color: var(--mut);
  font-size: 14px;
}

.foot__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* Ссылки на разделы в подвале, строка реквизитов и подпись разработчика:
   тише основного ряда */
.foot__nav {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.foot__props,
.foot__credit {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   Поиск по документам (хаб /docs)
   Обычная GET-форма — работает и без JavaScript; результаты отрисовывает
   docs.php вместо каталога. Отдельных страниц результатов нет.
   -------------------------------------------------------------------------- */

.doc-search {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.doc-search input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 11px 16px;
  font: inherit;
  color: inherit;
  background: var(--w1);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

.doc-search input[type="search"]:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Шапка внутренней страницы: та же вода, но спокойнее hero
   -------------------------------------------------------------------------- */

.page-head {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-wave);
  border: 1px solid var(--line);
  padding: clamp(24px, 4vw, 48px) clamp(22px, 4vw, 56px) clamp(26px, 3.5vw, 44px);
  margin-bottom: var(--sp-6);
}

/* Линия-скат (мотив брендбука, common.py: skat_line): три пологих гребня —
   длинный светлый, средний, короткий зелёный (подтверждённый уровень, как в
   знаке). Подпись шапки внутренних страниц: появляется мягко, живёт статично.
   Размер: 468px (1.8× к брендбуковским 260px) на ПК; на узких экранах линия
   плавно заполняет ширину колонки шапки, не дробясь на брейкпоинтах. */
.skatline {
  width: min(468px, 100%);
  margin-bottom: var(--sp-3);
  animation: skatline-in .7s var(--e-soft) both;
}

.skatline svg { display: block; width: 100%; height: auto; overflow: visible; }

@keyframes skatline-in {
  from { opacity: 0; transform: translateY(8px); }
}

.page-head__inner { position: relative; z-index: var(--z-content); }

.page-head h1 { font-size: clamp(28px, 3.8vw, 56px); max-width: 18em; }

.page-head .lead { margin-top: var(--sp-3); }

.crumbs {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: var(--sp-4);
}

.crumbs a { text-decoration: none; }

.crumbs a:hover { color: var(--ink); }

.crumbs span { color: var(--d4); }

/* --------------------------------------------------------------------------
   Текстовые блоки и списки документов
   -------------------------------------------------------------------------- */

.prose { max-width: 70ch; }

/* Один кегль у заголовка секции, независимо от того, пришёл он из markdown
   (.prose) или из шаблона (.sec-title): раньше h2 вне .prose брал --fs-h2 и
   выглядел вдвое крупнее соседних (грабли /o-tsentre, 2026-09-23). */
.prose h2,
.sec-title { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-h3); }

.prose h2:first-child { margin-top: 0; }

.prose ul { margin: 0 0 var(--sp-3); padding-left: var(--sp-3); }

.prose li { margin-bottom: 8px; }

.prose li::marker { color: var(--green-d); }

.doc-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }

.doc-list li { border-bottom: 1px solid var(--line); }

.doc-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
  text-decoration: none;
  color: inherit;
  transition: background var(--t-fast) var(--e-soft);
}

.doc-list a:hover { background: var(--w2); }

.doc-list .kind {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--mut);
  white-space: nowrap;
}

/* Строка .doc-list без ссылки: раскладка та же, что у ссылочной строки.
   Используется, когда переходить некуда, — например, сведения об экспертах. */
.doc-list > li > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
}

.doc-list__name {
  display: block;
  font-size: 17px;
  font-weight: 500;
}

.doc-list__note {
  display: block;
  margin-top: 4px;
  max-width: 56ch;
  font-size: var(--fs-small);
  color: var(--mut);
}

/* --------------------------------------------------------------------------
   Новости: лента публикаций
   Дата в моно-колонке, рядом заголовок и одна строка описания.
   -------------------------------------------------------------------------- */

.news-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }

.news-list li { border-bottom: 1px solid var(--line); }

.news-list a {
  display: grid;
  grid-template-columns: 150px 1fr;
  column-gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3) var(--sp-2);
  text-decoration: none;
  color: inherit;
  transition: background var(--t-fast) var(--e-soft);
}

.news-list a:hover { background: var(--w2); }

.news-list time {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--mut);
}

.news-list__title { font-size: 17px; font-weight: 500; }

.news-list__excerpt {
  margin: 6px 0 0;
  max-width: 64ch;
  font-size: var(--fs-small);
  color: var(--mut);
}

@media (max-width: 720px) {
  .news-list a { grid-template-columns: 1fr; row-gap: 4px; }
}

/* --------------------------------------------------------------------------
   Служебная страница «404 — глубина»
   Единственная страница, где фоном становится тёмная вода на весь экран.
   Медузоидная форма — разметка из стенда движения (demo-motion.html, секция 4).
   -------------------------------------------------------------------------- */

.page-deep {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--deep);
  color: #fff;
}

.page-deep .foot { border-top-color: rgba(255, 255, 255, .16); }

.f404 {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  align-items: center;
  padding: clamp(48px, 8vw, 96px) 0;
}

/* Медуза живёт справа и не заходит на текст: строки занимают левую колонку.
   На средних экранах места мало — силуэт приглушается, на телефоне уходит. */
.f404__skat {
  position: absolute;
  top: 56%;
  right: 0;
  width: min(50%, 600px);
  height: auto;
  aspect-ratio: 1200 / 500;
  transform: translateY(-50%);
  pointer-events: none;
}

@media (max-width: 1080px) {
  .f404__skat { right: -12%; width: 62%; opacity: .4; }
}

@media (max-width: 720px) {
  .f404__skat { display: none; }
}

.f404__inner {
  position: relative;
  z-index: var(--z-content);
  max-width: 620px;
}

.f404__code {
  margin: var(--sp-2) 0 var(--sp-3);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(96px, 16vw, 208px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--d4);
}


/* --------------------------------------------------------------------------
   Мобильная раскладка
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .megamenu__grid { grid-template-columns: 1fr; }
  .tape__row { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .tape__name { grid-column: 1 / -1; order: -1; }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .step { padding-top: var(--sp-3); }
}

/* Меню складывается в бургер заметно раньше остальных блоков: пять пунктов
   с лого не помещаются в капсулу уже ниже ~900px (измерено: при 768px
   дефицит ~120px), поэтому точка переноса — 920px, а не 720px. */
@media (max-width: 920px) {
  .nav { padding: 10px 12px; gap: var(--sp-2); }
  .nav__list { display: none; }
  .nav__list.is-open {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    flex-direction: column;
    align-items: stretch;
    padding: var(--sp-2);
    background: var(--glass-solid);
    -webkit-backdrop-filter: blur(var(--blur-panel));
    backdrop-filter: blur(var(--blur-panel));
    border: 1px solid var(--line);
    border-radius: var(--r-plate);
    box-shadow: var(--sh2);
  }
  .nav .nav__toggle { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   Первый экран и направления
   Стили жили локально в прототипе главной, из-за чего CMS и прототип
   расходились: заголовок на сайте не ограничивался по ширине.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  border-radius: var(--r-wave);
  overflow: hidden;
  background: var(--w1);
  border: 1px solid var(--line);
  padding: clamp(28px, 5vw, 64px) clamp(24px, 5vw, 72px) clamp(28px, 4vw, 56px);
}

/* Чертёж знака первого экрана: направляющие, прочерчивание скатов, дыхание —
   и построение повторяется (цикл живёт в components.js). Это единственный
   живой объект первого экрана. */
.hero__draft {
  position: absolute;
  right: 1%;
  top: 6%;
  bottom: 6%;
  width: 48%;
  z-index: var(--z-wave);
  pointer-events: none;
}

@media (max-width: 1080px) {
  .hero__draft { right: -2%; width: 52%; opacity: .85; }
}

@media (max-width: 720px) {
  .hero__draft {
    position: static;
    width: 100%;
    height: 210px;
    margin-top: var(--sp-4);
    opacity: 1;
  }
}

.hero__inner {
  position: relative;
  z-index: var(--z-content);
  max-width: min(54%, 860px);
}

@media (max-width: 720px) {
  .hero__inner { max-width: 100%; }
}

.hero h1 {
  font-size: var(--fs-hero);
  max-width: 13em;
}

.hero h1 b {
  font-weight: 600;
}

.hero__lead {
  margin-top: var(--sp-3);
  max-width: 44ch;
  font-size: var(--fs-lead);
  color: var(--mut);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}

.hero__phone {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--ls-mono);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--d4);
  padding-bottom: 2px;
}

.hero__phone:hover {
  border-bottom-color: var(--green-d);
}

.directions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

/* Капсулы направлений: одна колонка, иначе плитка текста уже колонки
   и список квалификаций вылезает за контур капли. Блок стоит ПОСЛЕ базового
   правила — иначе каскад перебьёт медиа-запрос (см. грабли про .nav__toggle). */
@media (max-width: 720px) {
  .directions { grid-template-columns: 1fr; }
  .capsule__plate h3 { font-size: clamp(17px, 4.8vw, 22px); }
}

/* Тёмная секция: шаги и заголовок на графите */

.deep h2 {
  color: #fff;
}

.deep .steps .step {
  border-top-color: rgba(255, 255, 255, .16);
  color: var(--d4);
}

.deep .step::before {
  color: var(--d4);
}

.deep .step--done {
  border-top-color: var(--green);
  color: #fff;
}


/* --------------------------------------------------------------------------
   Раздел-лонгрид: текст + колонка фактов
   Одна сетка на весь раздел: слева мера текста 70 знаков, справа липкий рейл,
   а широкие блоки (галерея) занимают обе колонки — контент-блок не живёт в
   узкой колонке текста (спека 2026-09-23).
   -------------------------------------------------------------------------- */

.spread {
  display: grid;
  grid-template-columns: minmax(0, 70ch) 320px;
  gap: var(--sp-4) var(--sp-5);
  justify-content: space-between;
  align-items: start;
}

/* Верхний блок — своя сетка «текст + рейл»: рейл липнет ровно на высоту
   текста и не наезжает на широкие блоки ниже (галерею). */
.spread__top {
  display: grid;
  grid-template-columns: minmax(0, 70ch) 320px;
  gap: var(--sp-5);
  justify-content: space-between;
  align-items: start;
}

/* Блоки по умолчанию — в колонке текста; .wide и верхний блок занимают
   всю ширину раздела. */
.spread > * { grid-column: 1; }

.spread > .spread__top,
.spread > .wide { grid-column: 1 / -1; }

.facts {
  position: sticky;
  top: 108px;                 /* ниже прилипшего меню */
  padding: var(--sp-3);
  background: var(--w2);
  border: 1px solid var(--line);
  border-radius: var(--r-plate);
}

.facts__phone {
  display: block;
  margin: var(--sp-2) 0 2px;
  font-family: var(--font-display);
  font-size: 20px;
  text-decoration: none;
}

.facts__note { margin: 0; font-size: 14px; color: var(--mut); }

/* Ключевые сроки: одна цифра — одна строка рейла. Здесь они и живут,
   в тексте раздела те же числа не повторяются. */
.facts__terms {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--line);
}

.facts__terms div + div { margin-top: 12px; }

.facts__terms dt {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.1;
}

.facts__terms dd {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--mut);
}

.facts__links {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.facts__links li + li { margin-top: 6px; }

.facts__links a { font-size: 14px; }

.facts .btn { width: 100%; justify-content: center; }

/* --------------------------------------------------------------------------
   Аккордеон «Подробнее»
   Нативный details: раскрывается и без JS. Открыто только то, что нужно
   большинству; правовые детали и длинные перечни живут под сводкой.
   -------------------------------------------------------------------------- */

.acc {
  margin: var(--sp-3) 0;
  overflow: hidden;
  background: var(--w1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}

.acc summary::-webkit-details-marker { display: none; }

.acc summary::after {
  content: '+';
  flex: none;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--green-d);
}

.acc[open] summary::after { content: '−'; }

.acc summary:hover { background: var(--w2); }

.acc__body {
  padding: 0 var(--sp-3) var(--sp-2);
  animation: acc-in var(--t-mid) var(--e-soft);
}

.acc__body > *:last-child { margin-bottom: 0; }

@keyframes acc-in {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Перечень документов по годам
   Год — сводка аккордеона, файлы — под ней. Плоская форма карточки .acc:
   список читается одним блоком, а не набором рамок, поэтому у сводки нет
   ни фона, ни скруглений, а линию несёт сама строка. Индикатор «+/−»
   не прижимается к правому краю: на широкой строке десктопа одиночный
   знак у края читался как случайное тире — он стоит сразу за счётчиком.
   -------------------------------------------------------------------------- */

.doc-years { margin-top: var(--sp-3); }

.acc--year {
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.acc--year > summary {
  justify-content: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--line);
}

/* Индикатор «+/−» стоит сразу за счётчиком: у правого края широкой строки
   одиночный знак читался как случайное тире (аудит 2026-09-27). */
.acc--year > summary::after { margin-left: 0; }

/* Счётчик в сводке перечня: «12 файлов», «3 файла» */
.acc__count {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--mut);
}

.acc--year .acc__body { padding: 0; }

.acc--year .doc-list { border-top: 0; }

/* --------------------------------------------------------------------------
   Галерея: ровная сетка и лайтбокс
   Кадр задаёт контейнер (aspect-ratio + object-fit: cover), поэтому фото
   любых пропорций (в наборе есть и 3:4, и 4:3) не искажаются, а обрезаются
   по центру; полный кадр открывается в лайтбоксе.
   -------------------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.gallery__item {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--w2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--e-soft);
}

.gallery__item:hover img { transform: scale(1.05); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  place-items: center;
  padding: var(--gut);
  background: rgba(22, 30, 26, .84);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-mid) var(--e-soft), visibility var(--t-mid);
}

.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox img {
  width: auto;
  max-width: min(100%, 1100px);
  max-height: 86vh;
  border-radius: var(--r-card);
  box-shadow: var(--sh3);
}

.lightbox__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.lightbox__close:hover { background: rgba(255, 255, 255, .18); }

/* --------------------------------------------------------------------------
   Карточка квалификации в разделе документов
   Список документов собран по квалификациям (граница 1), внутри — по типам
   (граница 2): человек ищет по своей квалификации, а не по типу файла.
   Карточка — сводка аккордеона: восемь открытых карточек занимали восемь
   экранов, а сводка сразу отвечает на первый вопрос — «есть ли моя
   квалификация». Открыта первая; карточку по якорю (/docs/quals#слаг)
   раскрывает components.js — ссылки на неё идут из «Оценки квалификации».
   -------------------------------------------------------------------------- */

.acc--qual,
.acc--group {
  max-width: 900px;
  margin: 0 auto var(--sp-3);
  padding: 0 var(--sp-4);
  background: var(--w1);
  border: 1px solid var(--line);
  border-radius: var(--r-plate);
  /* Липкая капсула меню: якорь не должен прятать сводку под собой */
  scroll-margin-top: calc(var(--sp-6) + var(--sp-2));
}

/* Подраздел каталога документов: та же карточка, но во всю ширину раздела —
   это не карточка выбора, а раздел списка. */
.acc--group {
  max-width: none;
  margin: 0 0 var(--sp-2);
}

/* Два класса в селекторе: иначе медиа-правило `.acc summary` ниже перебьёт
   отступы сводки и текст разъедется с содержимым карточки */
.acc.acc--qual > summary,
.acc.acc--group > summary { padding: var(--sp-3) 0; }

/* Сводка подраздела каталога — короткая строка-строка указателя: названия
   групп в одну строку, и десять плашек высотой с карточку читались бы
   как десять пустых рамок. */
.acc.acc--group > summary { padding: var(--sp-2) 0; }

.acc--qual .sec-title,
.acc--group .sec-title { margin: 0; }

.acc--qual .sec-title .mono { display: block; margin-bottom: 6px; }

.acc--qual .acc__body,
.acc--group .acc__body { padding: 0 0 var(--sp-4); }

/* Пояснение группы — как пояснение типа в карточке квалификации */
.doc-group__note {
  margin: 0 0 var(--sp-2);
  font-size: 14px;
  color: var(--mut);
}

.acc--group .doc-list { border-top: 0; }

.acc--group .doc-list li:last-child { border-bottom: 0; }

.qual__standard {
  margin: var(--sp-2) 0 0;
  font-size: 14px;
  color: var(--mut);
}

.qual__type {
  margin: var(--sp-4) 0 4px;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-h3);
}

.qual__note {
  margin: 0 0 var(--sp-2);
  font-size: 14px;
  color: var(--mut);
}

/* В карточке список документов идёт сразу под пояснением, без верхней линии:
   линию уже даёт заголовок типа. */
.acc--qual .doc-list { border-top: 0; }

.acc--qual .doc-list li:last-child { border-bottom: 0; }

/* Метаданные квалификации: партиал _qualification_meta.php, один список
   «термин — значение» для «Оценки квалификации» и карточек /docs/quals.
   Термины — как в .contact: моно, прописные, служебный цвет. */
.qual-meta { margin: var(--sp-2) 0 0; font-size: 14px; }

.qual-meta__row {
  display: grid;
  grid-template-columns: minmax(150px, 260px) 1fr;
  gap: 2px var(--sp-3);
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.qual-meta dt {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--mut);
}

.qual-meta dd { margin: 0; }

@media (max-width: 720px) { .qual-meta__row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Переключатель направлений
   Вкладки «Оценки квалификации». Разметка и поведение — как в дизайн-системе:
   при выключенном JS первая вкладка просто открыта.
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--sp-6);
}

.tabs__btn {
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--w1);
  font: 400 15px var(--font-text);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t-fast) var(--e-soft), color var(--t-fast) var(--e-soft);
}

.tabs__btn:hover { background: var(--w3); }

.tabs__btn.is-active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.tabs__panel[hidden] { display: none; }

/* Схема расположения: кадр во всю ширину раздела.
   Скриншот карты (1035×797) при полной ширине дал бы почти два экрана высоты,
   а при ширине 720 px справа оставалась пустая полоса. Поэтому кадр широкий
   (2:1), а карта обрезается по нему — точка на схеме и подпись «Спортивный
   переулок» остаются в кадре (object-position 62 % по вертикали).
   Полный кадр открывается кликом: лайтбокс берёт файл из href. */
.gallery--maps { grid-template-columns: 1fr; }

.gallery--maps .gallery__item {
  max-width: none;
  aspect-ratio: 2 / 1;
  background: var(--w1);
  cursor: zoom-in;
}

.gallery--maps .gallery__item img { object-fit: cover; object-position: 50% 62%; }

.gallery--maps .gallery__item:hover img { transform: none; }

.gallery__caption {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-small);
  color: var(--mut);
}

/* Реквизиты: строка «термин — значение» в две колонки. Три короткие строки
   во всю ширину разъезжались — термин и значение стояли друг под другом
   на 1240 px. */
.requisites { margin: 0; }

.requisites .contact__row {
  display: grid;
  grid-template-columns: minmax(160px, 240px) 1fr;
  gap: 0 var(--sp-3);
  align-items: baseline;
  padding: var(--sp-2) 0;
}

.requisites .contact__row dd { margin: 0; }

/* Skip-link: первый tab-стоп — переход к содержимому мимо меню. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--w1);
  color: var(--ink);
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--sh1);
}

.skip-link:focus-visible { left: 12px; }

/* --------------------------------------------------------------------------
   Объявления: крупный блок на главной и компактная плашка под меню.
   Плашка отдаётся сервером всегда (видна и без JS); крестик закрытия
   появляется только при работающем скрипте — components.js.
   -------------------------------------------------------------------------- */

.announce {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
  overflow: hidden;
  padding: var(--sp-4) var(--sp-5);
  background: var(--w1);
  border: 1px solid var(--line);
  border-radius: var(--r-plate);
  box-shadow: var(--sh1);
}

/* Акцент: объявление читается как действие, поэтому живёт на зелёном —
   но без заливки, чтобы главная осталась воздушной. Полоса уходит под
   скругление плиты (overflow: hidden) и повторяет её контур. */
.announce::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--green);
}

.announce__kicker {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--green);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}

.announce__title {
  margin: 0;
  font-size: var(--fs-h2);
}

.announce__body {
  max-width: 58ch;
  font-size: var(--fs-lead);
}

.announce__body > *:last-child { margin-bottom: 0; }

.notice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  background: var(--w2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh1);
}

.notice[hidden] { display: none; }

.notice__body {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-small);
}

.notice__title { font-weight: 600; }

.notice__link {
  flex: none;
  font-weight: 500;
  white-space: nowrap;
}

.notice__close {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--mut);
  font: 400 20px/1 var(--font-text);
  cursor: pointer;
  transition: background var(--t-fast) var(--e-soft), color var(--t-fast) var(--e-soft);
}

/* Крестик — progressive enhancement: без JS плашка остаётся видимой,
   просто закрыть её нечем (как .reveal прячется только при html.js). */
html.js .notice__close { display: inline-flex; }

.notice__close:hover { background: var(--w4); color: var(--ink); }

/* Медиа-правило после базового (грабли проекта про порядок каскада) */
@media (max-width: 720px) {
  .announce { padding: var(--sp-3) var(--sp-2); }
}

/* Медиа-правила идут после базовых: иначе каскад их перебьёт
   (грабли проекта про .nav__toggle). */
@media (max-width: 1100px) {
  .spread,
  .spread__top { grid-template-columns: 1fr; justify-content: start; }
  .facts { position: static; }
}

@media (max-width: 720px) {
  .gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
  /* Схему на узком экране не делим: в половине колонки подписи не читаются.
     Стоит после .gallery — специфичность одинаковая, решает порядок. */
  .gallery--maps { grid-template-columns: 1fr; }
  /* Широкая полоса карты на телефоне превратилась бы в узкую ленту:
     здесь кадр 4:3, карта показывает район вокруг точки. */
  .gallery--maps .gallery__item { aspect-ratio: 4 / 3; }
  .gallery--maps .gallery__item img { object-position: 52% 58%; }
  .acc summary { padding: var(--sp-2); }
  .acc__body { padding: 0 var(--sp-2) var(--sp-2); }
  /* Строка документа на телефоне: служебная подпись под названием. Иначе
     длинное название сжимается в 3–5 строк рядом с «DOCX · 31 КБ · 2025»
     и строка превращается в столбик из трёх слов (как в .news-list). */
  .doc-list a { flex-direction: column; gap: 4px; }
  .doc-list .kind { white-space: normal; }
  /* Узкий экран: термин и значение реквизитов — снова друг под другом */
  .requisites .contact__row { grid-template-columns: 1fr; }
}

/* Печать: сайт раздаёт регламенты и бланки — печатная копия обязана быть
   документом, а не кадром сайта. Идёт после всех правил выше (грабли
   проекта про порядок каскада). */
@media print {
  .nav-wrap,
  .foot__nav,
  .hero__skat,
  .nav__toggle,
  .skip-link,
  .notice,
  .ncard::after { display: none !important; }

  body { background: #fff; }

  /* Картинки анимации и тени не жгут тонер: только контент */
  .ncard { box-shadow: none; border-color: #bbb; }

  /* Контент со скролл-анимацией на бумаге обязан быть виден всегда */
  html.js .reveal { opacity: 1 !important; transform: none !important; }

  /* Ссылки на документы — с адресом: распечатанная опись остаётся рабочей */
  a[href^="/uploads/"]::after {
    content: " — " attr(href);
    font-size: 9pt;
    color: #555;
    word-break: break-all;
  }
}