/* chrome.css - шапка, меню, шторка на телефоне, хлебные крошки, подвал.
   Шапка и шторка читают один реестр навигации: второго списка ссылок в проекте нет. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--role-header-bg);
  border-bottom: var(--border-w) solid var(--role-border);
}

/* У предка липкой шапки не должно быть transform, filter, backdrop-filter или
   will-change: любое из них создаёт новый содержащий блок, и шапка уезжает при
   прокрутке, хотя в стилях всё выглядит правильно. */

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 60px;
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}

/* ЛОГОТИП. Ширина задана в пикселях, а высота считается из viewBox: так шапка не
   меняет высоту, пока грузится шрифт, и не прыгает на первой отрисовке. */
.brandmark {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: auto;
  min-height: 44px;
  text-decoration: none;
}
.brandmark .art--logo {
  display: block;
  /* Эмблема ведёт, поэтому знак крупнее прежнего: 136px на 360 (эмблема ~31px),
     дальше растёт. Ширина 360 держит четыре предмета шапки: знак, язык, тема, меню. */
  width: 136px;
  height: auto;
}
.brandmark:hover .art--logo { opacity: 0.86; }

/* ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА. Стоит в шапке на всех шириных, включая телефон: язык это
   не настройка второго ряда, за ним лезут сразу. */
.lang-switch {
  display: flex;
  flex: 0 0 auto;
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--role-surface);
}
.lang-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  padding: 0 var(--sp-1);
  color: var(--role-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.lang-switch__item + .lang-switch__item { border-left: 2px solid var(--role-surface-2); }
.lang-switch__item:hover { background: var(--role-surface-2); color: var(--role-text); }
.lang-switch__item[aria-current="true"] {
  background: var(--role-mark);
  color: var(--role-mark-text);
}

.nav-desktop { display: none; }

.site-header__cta { display: none; white-space: nowrap; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  padding: 0;
  background: var(--role-surface);
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle__box { display: block; width: 22px; }
.nav-toggle__box span {
  display: block;
  height: 3px;
  margin: 4px 0;
  background: var(--role-text);
  border-radius: 2px;
}

/* Закрытая шторка убирается через hidden, то есть display:none.
   Спрятанная через visibility или transform панель продолжает занимать место за
   экраном и даёт горизонтальную прокрутку, невидимую ни глазу, ни скриншоту. */
.nav-backdrop[hidden], .nav-drawer[hidden] { display: none; }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--role-backdrop);
}

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 51;
  width: min(320px, 88vw);
  padding: var(--sp-4);
  padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--role-surface);
  border-left: var(--border-w) solid var(--role-border);
}

.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.nav-drawer__title { font-weight: 700; font-size: var(--fs-lg); }
.nav-drawer__close {
  width: 44px;
  height: 44px;
  font-size: 26px;
  line-height: 1;
  background: var(--role-surface-2);
  color: var(--role-text);
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nav-drawer__nav { display: flex; flex-direction: column; margin-bottom: var(--sp-4); }
.nav-drawer__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--sp-2) 0;
  color: var(--role-text);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--role-surface-2);
}
.nav-drawer__link:hover { color: var(--role-link-hover); }
.nav-drawer__link[aria-current="page"] { color: var(--role-link); text-decoration: underline; }

.nav-drawer__lang { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.nav-drawer__lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 44px;
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius-sm);
  color: var(--role-text);
  font-weight: 700;
  text-decoration: none;
}
.nav-drawer__lang a[aria-current="true"] { background: var(--role-mark); color: var(--role-mark-text); }

body.is-locked { overflow: hidden; }

/* ХЛЕБНЫЕ КРОШКИ. Списком, а не строкой ссылок: схема BreadcrumbList обещает
   поисковику пункты, и они обязаны быть на странице видимыми. */
.crumbs { padding: var(--sp-4) 0 0; }
.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--role-text-muted);
}
.crumbs__item { margin: 0; }
.crumbs__item + .crumbs__item::before { content: "/"; margin-right: var(--sp-2); }

/* ПОЛОСА ДАТЫ .stamp - последний ребёнок <main> (свод 03). Волосяная линия сверху,
   фон второй поверхности, дата полужирным. Подвал прижимается к ней без отступа. */
.stamp {
  margin-top: var(--sp-5);
  padding: var(--sp-4) 0;
  background: var(--role-bg-alt);
  border-top: 1px solid var(--role-border);
  font-size: var(--fs-sm);
  color: var(--role-text-muted);
}
.stamp__in { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); align-items: baseline; }
.stamp__date { color: var(--role-text); font-weight: 600; }
main:has(> .stamp:last-child) + .site-footer { margin-top: 0; }

/* ПОДВАЛ ПО КОНТРАКТУ СВОДА 03: бренд-блок, колонки по составу, нижняя полоса.
   Плотный: в один экран на телефоне помещается знак, числа, кнопка и ссылки. */
.site-footer {
  margin-top: var(--sp-7);
  padding: var(--sp-6) 0 calc(var(--sp-5) + env(safe-area-inset-bottom));
  background: var(--role-footer-bg);
  color: var(--role-footer-text);
  border-top: var(--border-w) solid var(--role-border);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-5);
}
.site-footer__brand { display: flex; flex-direction: column; gap: var(--sp-3); }
.site-footer__logo {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--role-header-bg);
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.site-footer__logo .art--logo { display: block; width: 168px; height: auto; }
.site-footer__tagline {
  margin: 0;
  max-width: 34ch;
  font-size: var(--fs-sm);
  color: var(--role-footer-muted);
}
/* Три числа игры плашками: подвал читают почти все, кто долистал. */
.site-footer__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__facts li {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border: 2px solid var(--role-footer-muted);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  color: var(--role-footer-muted);
}
.site-footer__facts strong { color: var(--role-footer-text); font-size: var(--fs-sm); }
.site-footer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.site-footer__lang { display: inline-flex; gap: var(--sp-1); }
.site-footer__lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 40px;
  padding: 0 var(--sp-2);
  border: 2px solid var(--role-footer-muted);
  border-radius: var(--radius-sm);
  color: var(--role-footer-text);
  font-weight: 700;
  font-size: var(--fs-xs);
  text-decoration: none;
}
.site-footer__lang a[aria-current="true"] { background: var(--role-mark); color: var(--role-mark-text); border-color: var(--role-mark); }

.site-footer__col { display: flex; flex-direction: column; }
.site-footer__head {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--role-footer-muted);
}
.site-footer__col a {
  min-height: 36px;
  display: flex;
  align-items: center;
  color: var(--role-footer-text);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
}
.site-footer__col a:hover { color: var(--role-mark); text-decoration: underline; }
.site-footer__links { display: flex; flex-direction: column; }
.site-footer__col--wide .site-footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); }
.site-footer__col a[aria-current="page"] { color: var(--role-mark); }

/* Нижняя полоса: 18+, дисклеймер, линия помощи, юрстрока. */
.site-footer__bottom {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-3);
  align-items: start;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--role-footer-muted);
  font-size: var(--fs-xs);
  color: var(--role-footer-muted);
}
.site-footer__age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--role-footer-text);
  border-radius: 50%;
  color: var(--role-footer-text);
  font-weight: 700;
  font-size: var(--fs-xs);
}
.site-footer__disclaimer { margin: 0; line-height: 1.5; }
.site-footer__legal { grid-column: 1 / -1; margin: 0; }
.site-footer__legal a { color: var(--role-footer-text); font-weight: 600; }
.site-footer__legal a:hover { color: var(--role-mark); }
.site-footer__dot { margin: 0 var(--sp-1); }

@media (min-width: 480px) {
  .site-header__bar { gap: var(--sp-3); }
  .brandmark .art--logo { width: 178px; }
  .lang-switch__item { min-width: 44px; min-height: 42px; font-size: var(--fs-sm); }
  .site-footer__grid { grid-template-columns: 1fr; }
}

@media (min-width: 768px) {
  .site-header__cta { display: inline-flex; }
  .site-footer__grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  /* Треков ровно столько, сколько колонок: бренд, «Разделы» на два трека, «Правовое». */
  .site-footer__grid { grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: auto; }
  .site-footer__col--wide { grid-column: span 2; }
  .site-footer__bottom { grid-template-columns: auto 1fr auto; }
  .site-footer__legal { grid-column: auto; text-align: right; }
  .stamp { padding: var(--sp-5) 0; }
  .brandmark { font-size: var(--fs-lg); }
  .brandmark .art--logo { width: 210px; }
}

@media (min-width: 1280px) {
  .nav-toggle { display: none; }
  .nav-desktop {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--sp-3);
    margin-left: auto;
    margin-right: var(--sp-3);
  }
  .nav-desktop a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--role-header-text);
    font-weight: 700;
    font-size: var(--fs-xs);
    text-decoration: none;
  }
  .nav-desktop a { white-space: nowrap; }
  .nav-desktop a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
  .nav-desktop a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; }
}

/* ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ. Цель касания 44px, знак меняется по нажатому состоянию. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  background: var(--role-surface);
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.theme-toggle__glyph {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--role-mark);
  border: 3px solid var(--role-text);
}
.theme-toggle[aria-pressed="true"] .theme-toggle__glyph {
  background: var(--role-surface);
  box-shadow: inset -6px -2px 0 var(--role-text);
}

/* ЛАЙТБОКС. Слой выше шторки меню: 40 шапка, 50 подложка меню, 51 шторка, 60 здесь.
   Порядок задан числами один раз, чтобы не выяснять его нажатиями на живом сайте. */
.lightbox[hidden] { display: none; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  /* Сверху место под кнопку закрытия, снизу вырез телефона: панель не уезжает
     ни под кнопку, ни под полосу жестов. */
  padding-top: calc(var(--sp-4) + 52px);
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  /* ПЕРЕХОДЫ (свод 03, пункт 42). В покое окно display:none (атрибут hidden), а не
     opacity:0 - невидимый бокс с фиксированной шириной давал бы скролл за экраном.
     Открытие в два шага: сначала hidden снимается, потом, после пересчёта стилей,
     класс is-visible ведёт opacity и кадр из scale(.96). Закрытие ждёт конца перехода. */
  opacity: 0;
  transition: opacity 220ms var(--ease, ease);
}
.lightbox.is-visible { opacity: 1; }
.lightbox__panel {
  transform: scale(0.96);
  transition: transform 220ms var(--ease, ease);
}
.lightbox.is-visible .lightbox__panel { transform: none; }
/* Смена кадра стрелками - кроссфейд картинки, чтобы не мигало резко. */
.lightbox__img { transition: opacity 150ms var(--ease, ease); }
.lightbox.is-swapping .lightbox__img { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__panel, .lightbox__img { transition-duration: 0ms; }
}

.lightbox__panel {
  width: 100%;
  max-width: min(1100px, 100%);
}

.lightbox__figure {
  margin: 0;
  background: var(--role-surface);
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-hard);
}

/* Высота ограничена окном, а не картинкой: снимок 960x540 на невысоком экране
   иначе вытесняет подпись и полосу листания за край. */
.lightbox__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 64vh;
  object-fit: contain;
  background: var(--role-surface-2);
}

.lightbox__caption {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--role-text);
  border-top: 2px solid var(--role-surface-2);
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.lightbox__bar[hidden] { display: none; }

/* Счётчик плашкой, а не текстом поверх подложки. Подложка полупрозрачная, и под
   ней оказывается то заголовок, то картинка: контраст надписи менялся от страницы
   к странице. Своя подложка снимает вопрос разом. */
.lightbox__counter {
  margin: 0;
  padding: 0 var(--sp-3);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  background: var(--role-surface);
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--role-text);
}

.lightbox__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--sp-3);
  background: var(--role-surface);
  border: var(--border-w) solid var(--role-border);
  border-radius: var(--radius-sm);
  color: var(--role-text);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.lightbox__btn:hover { background: var(--role-mark); color: var(--role-mark-text); }
.lightbox__btn[disabled] { opacity: 0.4; cursor: default; }
.lightbox__btn[disabled]:hover { background: var(--role-surface); color: var(--role-text); }

.lightbox__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
}

@media (min-width: 768px) {
  .lightbox__img { max-height: 70vh; }
}

/* ВОЗВРАТ К НАЧАЛУ. До прокрутки кнопки нет ни на экране, ни в обходе Tab:
   visibility убирает её из порядка клавиш, а opacity сам по себе - нет, и тогда
   первый же Tab на верху страницы уводит фокус в невидимую кнопку. */
.to-top {
  position: fixed;
  right: var(--sp-4);
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  z-index: 45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--role-accent);
  color: var(--role-accent-text);
  border: var(--border-w) solid var(--role-border);
  border-radius: 50%;
  box-shadow: var(--shadow-hard-sm);
  /* Это <button>, а не ссылка (свод 03, В22): браузер даёт ему свой фон, рамку,
     отступы и шрифт, и без сброса кнопка выглядит системной кнопкой ОС. */
  padding: 0;
  font: inherit;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.to-top:hover { background: var(--role-accent-hover); color: var(--role-accent-text); }

/* Пока открыто модальное окно, кнопки нет. Слой у неё ниже подложки, и без этого
   правила она проступает сквозь затемнение блёклым пятном в углу: нажать нельзя,
   а видно. Класс ставит тот же скрипт, что блокирует прокрутку. */
body.is-locked .to-top { visibility: hidden; }

/* Стрелка углом рамки: снова без отдельного файла. */
.to-top__arrow {
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-left: 3px solid currentColor;
  border-top: 3px solid currentColor;
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}