/* =========================================================
   AMATUNI — базовые стили: токены, сброс, каркас, компоненты
   Источник: Figma «Personal website for Arsen Amatuni»
   ========================================================= */

/* ---------- Шрифт Rubik (свой хостинг, переменная толщина 400–700) ---------- */
@font-face {
  font-family: "Rubik"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/rubik-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Rubik"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/rubik-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Фоны (Dark Mode / Secondary) */
  --gray-1900: #010406;
  --gray-1800: #03080d;
  --gray-1700: #0b1622;
  --gray-1600: #0b1624;
  --gray-1500: #122135;
  --gray-1200: #172a42;
  --gray-1100: #1a2e47;
  --gray-1000: #1e3552;
  --gray-700: #576779;
  --gray-600: #6f7d8c;
  --gray-500: #8793a0;
  --gray-400: #9fa8b3;
  --gray-300: #b7bec6;
  --gray-200: #cfd4d9;

  /* Текст и акценты */
  --text-light: #e6f4ff;
  --primary: #0095fa;
  --primary-surface: #006fbb;        /* контраст текста на кнопке ≥ 4.5:1 */
  --primary-surface-hover: #005fa3;  /* при наведении темнее, а не светлее */
  --blue-600: #66bffc;
  --blue-200: #cceafe;
  --blue-dark-400: #005996;
  --tertiary-surface: #001e32;
  --tertiary-surface-hover: #003a5f;   /* заметнее, чем раньше: отклик на наведение виден */
  --tertiary-content: #99d5fd;
  --green: #47cb92;
  --green-light: #85ddb7;
  --green-surface: #0c2a1d;
  --red: #f0506e;
  --red-surface: #2e0f16;
  --orange: #f5a524;
  --orange-surface: #3b2811;
  --gradient: linear-gradient(180deg, #00c6ff 0%, #0072ff 100%);
  --gray-1400: #0e1b2c;
  --gray-1300: #102034;

  /* Роли, которые различаются между темами */
  --on-accent: #e6f4ff;                 /* текст на синей заливке и поверх фото */
  --header-bg: rgba(11, 22, 36, .9);
  --scrim: rgba(1, 4, 6, .7);
  --line: rgba(255, 255, 255, .05);     /* волосяная обводка плиток */
  --line-2: rgba(255, 255, 255, .07);
  --card-line: rgba(160, 200, 245, .10); /* обводка карточек: край виден на любом экране */
  --link-line: rgba(102, 191, 252, .35);
  --hero-fade: 11, 22, 34;              /* RGB фона приветствия (= --gray-1700) для градиента */
  --input-bg: #142837;
  --disabled: #003c64;
  --logo: #cceafe;
  --shadow: rgba(0, 0, 0, .5);
  --link-hover: #66bffc;              /* цвет ссылки при наведении */
  color-scheme: dark;

  /* Каркас */
  --page-pad: 28px;
  --gap: 20px;
  --sidebar-w: 80px;
  --aside-w: 484px;
  --header-h: 64px;
  --sticky-top: calc(var(--header-h) + var(--page-pad)); /* = начальный отступ: при прокрутке меню не сдвигается */
  --vh: 100vh;  /* высота окна в пикселях страницы (с учётом zoom — см. ниже) */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;

  --font: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Светлая тема ----------
   Включается атрибутом data-theme="light" на <html> (скрипт в <head> берёт
   выбор посетителя или системную настройку). Меняются только токены. */
:root[data-theme="light"] {
  --gray-1900: #e4edf6;
  --gray-1800: #eef2f7;
  --gray-1700: #ffffff;
  --gray-1600: #ffffff;
  --gray-1500: #eef3f8;
  --gray-1400: #f6f9fc;
  --gray-1300: #eef3f8;
  --gray-1200: #dce6f0;
  --gray-1100: #e2eaf2;
  --gray-1000: #d6e1ec;
  --gray-700: #8995a2;
  --gray-600: #6b7886;
  --gray-500: #586573;
  --gray-400: #46525f;
  --gray-300: #35404c;
  --gray-200: #26303a;

  --text-light: #0a1724;
  --primary: #0767b0;
  --primary-surface: #006fbb;
  --primary-surface-hover: #005c9c;
  --blue-600: #005f9e;
  --blue-200: #00477a;
  --gradient: linear-gradient(180deg, #0a7fd0 0%, #0050b8 100%);
  --blue-dark-400: #8fc3ea;
  --tertiary-surface: #e2f0fb;
  --tertiary-surface-hover: #c0daf2;
  --tertiary-content: #00548f;
  --green: #0c7347;
  --green-light: #0d7045;
  --green-surface: #def4e9;
  --red: #c42340;
  --red-surface: #fde6ea;
  --orange: #8f5300;
  --orange-surface: #fff0d9;

  --on-accent: #ffffff;
  --header-bg: rgba(255, 255, 255, .88);
  --scrim: rgba(10, 23, 36, .35);
  --line: rgba(10, 40, 70, .08);
  --line-2: rgba(10, 40, 70, .10);
  --card-line: rgba(10, 40, 70, .12);
  --link-line: rgba(0, 95, 158, .35);
  --hero-fade: 255, 255, 255;
  --input-bg: #eef3f8;
  --disabled: #b9cfe2;
  --logo: #0b2a45;
  --shadow: rgba(10, 30, 60, .18);
  --link-hover: #003f6b;
  color-scheme: light;
}

/* ---------- Сброс ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--gray-1800);
  color: var(--text-light);
  font-family: var(--font);
  font-size: calc(16px * var(--fs-s, 1));
  line-height: 24px;
  font-feature-settings: "liga" 0;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Внутри прокручиваемых контейнеров рамка фокуса рисуется внутрь, иначе её обрезает */
.rail > :focus-visible, .tab:focus-visible, .sidebar__item:focus-visible, .chip:focus-visible, .partner:focus-visible { outline-offset: -2px; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Типографика ---------- */
.h3 { font-size: 24px; line-height: 32px; font-weight: 700; }
.subheading { font-size: 20px; line-height: 28px; font-weight: 500; }
.body-1 { font-size: calc(16px * var(--fs-s, 1)); line-height: 24px; }
.body-2 { font-size: calc(14px * var(--fs-s, 1)); line-height: 20px; }
.micro { font-size: calc(12px * var(--fs-s, 1)); line-height: 18px; }
.text-gradient {
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.muted { color: var(--gray-500); }

/* ---------- Иконки (маска — цвет через currentColor) ---------- */
.icon {
  display: inline-block;
  flex: none;
  width: 20px; height: 20px;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
}
.icon--24 { width: 24px; height: 24px; }
.icon--16 { width: 16px; height: 16px; }
.i-dashboard { --i: url(../img/ui/dashboard.svg); }
.i-news { --i: url(../img/ui/news.svg); }
.i-blog { --i: url(../img/ui/blog.svg); }
.i-extend { --i: url(../img/ui/extend.svg); }
.i-arrow-left { --i: url(../img/ui/arrow-left.svg); }
.i-arrow-right { --i: url(../img/ui/arrow-right.svg); }
.i-telegram { --i: url(../img/ui/telegram.svg); }
.i-instagram { --i: url(../img/ui/instagram.svg); }
.i-youtube { --i: url(../img/ui/youtube.svg); }
.i-info { --i: url(../img/ui/info.svg); }
.i-play { --i: url(../img/ui/play.svg); }
.i-show { --i: url(../img/ui/show.svg); }
.i-positive { --i: url(../img/ui/positive.svg); }
.i-book { --i: url(../img/ui/book.svg); }
.i-user { --i: url(../img/ui/user.svg); }
.i-mail { --i: url(../img/ui/mail.svg); }
.i-tiktok { --i: url(../img/ui/tiktok.svg); }
.i-music { --i: url(../img/ui/music.svg); }
.i-life { --i: url(../img/ui/life.svg); }
.i-chart { --i: url(../img/ui/chart.svg); }
.i-image { --i: url(../img/ui/image.svg); }
/* Переключатель темы показывает тему, на которую переключит */
.i-theme { --i: url(../img/ui/sun.svg); }
:root[data-theme="light"] .i-theme { --i: url(../img/ui/moon.svg); }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 12px 32px;
  border-radius: var(--radius-s);
  font-size: calc(16px * var(--fs-s, 1)); line-height: 24px; font-weight: 600;
  white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn--sm { height: 40px; padding: 10px 24px; font-size: calc(14px * var(--fs-s, 1)); line-height: 20px; }
.btn--primary { background: var(--primary-surface); color: var(--on-accent); }
@media (hover: hover) { .btn--primary:hover { background: var(--primary-surface-hover); } }
.btn--secondary { border: 1px solid var(--blue-dark-400); color: var(--primary); }
@media (hover: hover) { .btn--secondary:hover { border-color: var(--primary); } }
.btn--tertiary { background: var(--tertiary-surface); color: var(--tertiary-content); }
@media (hover: hover) { .btn--tertiary:hover { background: var(--tertiary-surface-hover); } }
.btn--link { height: auto; padding: 0; color: var(--primary); }
.btn--link:hover { color: var(--link-hover); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  padding: 6px; border-radius: var(--radius-s);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.icon-btn--lg { padding: 12px; }
.icon-btn--round { border-radius: 32px; }
.icon-btn--tertiary { background: var(--tertiary-surface); color: var(--tertiary-content); }
@media (hover: hover) { .icon-btn--tertiary:hover { background: var(--tertiary-surface-hover); } }
.icon-btn--secondary { border: 1px solid var(--blue-dark-400); color: var(--primary); }
@media (hover: hover) { .icon-btn--secondary:hover { border-color: var(--primary); } }
.icon-btn--secondary:disabled { color: var(--disabled); border-color: var(--disabled); cursor: default; }

/* ---------- Карточки и заголовки блоков ---------- */
.card {
  background: var(--gray-1600);
  border-radius: var(--radius-l);
  overflow: hidden;
  position: relative;
}
.card { box-shadow: 0 0 0 1px var(--card-line); }
:root[data-theme="light"] .card { box-shadow: 0 0 0 1px var(--card-line), 0 1px 3px rgba(10, 30, 60, .06); }
.sidebar { box-shadow: 0 0 0 1px var(--card-line); }
.app.is-sidebar-open .sidebar { box-shadow: 0 0 0 1px var(--card-line), 16px 0 40px var(--shadow); }
:root[data-theme="light"] .sidebar__item[aria-current="page"] { background: var(--tertiary-surface); }
:is(.news-panel, .article-panel) { box-shadow: 0 0 0 1px var(--card-line); }
/* В светлой теме тени обложек короче и мягче: чёрная тень на белом выглядит грязным пятном */
:root[data-theme="light"] :is(.bk-hero__cover img, .ab-block__cover, .book__cover, .release__cover) { box-shadow: 0 8px 20px var(--shadow); }
:root[data-theme="light"] .hero__photo img { box-shadow: 0 8px 20px var(--shadow), 0 0 0 1px var(--line-2); }
.block-head {
  display: flex; align-items: center; gap: 16px;
}
.block-head__title { flex: 1; font-size: calc(20px * var(--fs-h, 1)); line-height: 28px; font-weight: 600; }
.block-head__nav { display: flex; gap: 16px; }

/* ---------- Табы ---------- */
.tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--gray-1100);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 16px 16px 12px;
  color: var(--gray-500);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.tab:hover { color: var(--gray-400); }
.tab[aria-selected="true"], .tab[aria-pressed="true"] { color: var(--primary); font-weight: 500; border-bottom-color: var(--primary); }

/* ---------- Статусы ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 2px 8px; border-radius: 24px;
  font-size: calc(12px * var(--fs-s, 1)); line-height: 18px; font-weight: 500;
}
.badge--soon { width: 24px; padding: 0; background: url(../img/ui/soon.svg) center / 24px 24px no-repeat; }
.badge--up { color: var(--green); background: var(--green-surface); }
.badge--down { color: var(--red); background: var(--red-surface); }

/* =========================================================
   Каркас страницы
   ========================================================= */
.app {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 var(--page-pad) var(--page-pad);
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--header-h) 1fr auto;
  column-gap: var(--page-pad);
  row-gap: var(--page-pad);
  min-height: 100vh;
}

/* ---------- Шапка ---------- */
/* Шапка — фиксированная полоса на всю ширину сверху, логотип слева */
.header {
  grid-column: 1 / -1;
  position: sticky; top: 0; z-index: 30;
  height: var(--header-h);
  margin: 0 calc(-1 * var(--page-pad));
  padding: 0 var(--page-pad);
  display: flex; align-items: center; gap: 16px;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-1100);
}
.header > .header__side:first-child { display: none; }
.header__side { display: flex; align-items: center; gap: 16px; min-width: 0; }
.header__side--end { margin-left: auto; justify-content: flex-end; }
.header__logo { flex: none; display: block; width: 200px; height: 30px; }
.header__logo img { width: 100%; height: 100%; }
/* Знак логотипа одноцветный: в светлой теме рисуем его маской нужным цветом */
:root[data-theme="light"] .header__logo { background: var(--logo); -webkit-mask: url(../img/ui/logo-amatuni.svg) left center / contain no-repeat; mask: url(../img/ui/logo-amatuni.svg) left center / contain no-repeat; }
:root[data-theme="light"] .header__logo img { opacity: 0; }
.header__burger { display: none; }
.header__tools { display: flex; align-items: center; gap: 8px; }
.header__tool {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: var(--radius-s);
  background: var(--tertiary-surface); color: var(--tertiary-content);
  font-size: calc(14px * var(--fs-s, 1)); line-height: 20px; font-weight: 600; letter-spacing: .02em;
  transition: background-color .2s var(--ease);
}
@media (hover: hover) { .header__tool:hover { background: var(--tertiary-surface-hover); } }


/* ---------- Боковое меню ---------- */
.sidebar {
  position: relative;
  align-self: start;
  position: sticky; top: var(--sticky-top);
  /* на всех страницах одинаково: от шапки до низа окна — при переходах между разделами не прыгает */
  height: calc(var(--vh) - var(--header-h) - var(--page-pad) * 2 - 2px);
  min-height: 420px;
  display: flex; flex-direction: column; gap: 16px;
  padding: 32px 0 16px;
  background: var(--gray-1500);
  border-radius: var(--radius-l);
  z-index: 25;
  width: var(--sidebar-w);
  transition: width .25s var(--ease), box-shadow .25s var(--ease);
}
.sidebar__nav { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.sidebar__item {
  height: 48px; padding: 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--gray-400);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.sidebar__item:hover { color: var(--text-light); }
.sidebar__item[aria-current="page"] { background: var(--gray-1900); color: var(--primary); }
.sidebar__item[aria-disabled="true"] { cursor: default; }
.sidebar__item[aria-disabled="true"]:hover { color: var(--gray-400); }
.sidebar__extend {
  position: absolute; top: 8px; right: -16px;
  color: var(--gray-500);
}
.sidebar__item-label { display: none; font-size: calc(14px * var(--fs-s, 1)); line-height: 20px; white-space: nowrap; }
/* Раскрытое меню ложится поверх контента, колонка сетки остаётся 80px — сайт не сжимается */
.app.is-sidebar-open .sidebar { width: 220px; }
.app.is-sidebar-open .sidebar__item { justify-content: flex-start; padding-left: 28px; }
.app.is-sidebar-open .sidebar__item-label { display: inline; }
.app.is-sidebar-open .sidebar__extend .icon { transform: scaleX(-1); }

/* ---------- Основная область ---------- */
.main { min-width: 0; }

/* Сетка «контент + правая колонка» (главная) */
.layout-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--aside-w);
  gap: var(--gap);
  align-items: start;
}
.stack { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }

/* ---------- Подвал ---------- */
.footer {
  grid-column: 2;
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px 0 4px;
  border-top: 1px solid var(--gray-1100);
  font-size: calc(14px * var(--fs-s, 1)); line-height: 20px; color: var(--gray-500);
}
.footer__nav { display: flex; flex-wrap: wrap; gap: 6px 20px; padding-bottom: 8px; }
.footer__nav a { color: var(--gray-300); font-weight: 500; }
.footer__nav a:hover { color: var(--text-light); }
.footer__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer__copy { color: var(--gray-400); }
.footer__socials { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer__socials a { color: var(--gray-400); transition: color .2s var(--ease); }
.footer__socials a:hover { color: var(--text-light); }
.footer__note { max-width: 760px; font-size: calc(12px * var(--fs-s, 1)); line-height: 18px; }

/* ---------- Нижняя панель (мобильная) ---------- */
.tabbar { display: none; }

/* ---------- Горизонтальная лента (карусель) ---------- */
.rail {
  display: flex; gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex: none; }

/* =========================================================
   Масштаб интерфейса
   Макет нарисован под монитор 1920px. На ноутбуках (1280–1600px) те же
   пиксельные размеры кнопок, заголовков и отступов выглядят огромными,
   поэтому весь интерфейс уменьшается пропорционально. Телефон не трогаем.
   Обычный текст (≤16px) при этом получает компенсацию --fs-s, чтобы
   на экране оставаться читаемым: основной ~15.5px, подписи ≥11.5px.
   Крупные заголовки уменьшаются вместе с блоками.
   ========================================================= */
/* --fs-h — мягкая компенсация для подзаголовков 16–21px, чтобы они оставались крупнее текста */
@media (min-width: 1101px) and (max-width: 1799px) { html { zoom: .85; --fs-s: 1.15; --fs-h: 1.1; } }
@media (min-width: 768px) and (max-width: 1100.98px) { html { zoom: .9; --fs-s: 1.1; --fs-h: 1.06; } }

/* =========================================================
   Адаптив
   ========================================================= */
@media (max-width: 1600px) {
  :root { --aside-w: 400px; }
}
@media (max-width: 1280px) {
  :root { --page-pad: 20px; --aside-w: 340px; }
  .header__logo { width: 180px; height: 27px; }
}
@media (max-width: 1023px) {
  /* Кнопки входа и языка уходят в бургер-меню, чтобы не наезжать на логотип */
  .header__side--end > :not(.header__burger):not(.header__tools) { display: none; }
  .header__burger { display: inline-flex; }
}
@media (max-width: 1100.98px) {
  .layout-2col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  :root { --page-pad: 16px; --gap: 16px; --header-h: 56px; }
  .app {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
    padding: 0 16px calc(88px + env(safe-area-inset-bottom));
  }
  .header { margin: 0 -16px; padding: 0 16px; }
  .header__side--end { gap: 8px; }
  .header__side--end > :not(.header__burger):not(.header__tools) { display: none; }
  .header__burger { display: inline-flex; }
  .header__logo { width: 150px; height: 22px; }
  .header__tool { width: 44px; height: 44px; }
  .sidebar { display: none; }
  .footer { grid-column: 1; padding-bottom: 8px; }

  .tabbar {
    display: flex; justify-content: space-around; align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--gray-1500);
    border-top: 1px solid var(--gray-1100);
  }
  .tabbar__item {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 40px; border-radius: var(--radius-s);
    color: var(--gray-400);
  }
  .tabbar__item[aria-current="page"] { background: var(--gray-1100); color: var(--primary); }
  .tabbar__item .badge--soon { position: absolute; top: -14px; right: 2px; transform: scale(.85); }

}

@media (max-width: 767.98px) {
  /* Тач-цели не меньше 44px */
  .icon-btn { min-width: 44px; min-height: 44px; }
  .tabbar__item { height: 44px; }
}
.app--plain .header__burger { display: none; }

/* Мобильное меню (бургер) */
.mobile-menu {
  position: fixed; inset: 0; z-index: 40;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: none;
}
.mobile-menu.is-open { display: block; }
.mobile-menu__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(320px, 86vw);
  background: var(--gray-1500);
  padding: 20px 16px;
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto; overscroll-behavior: contain; /* на коротких экранах низ меню доступен прокруткой */
}
.mobile-menu__panel .btn { width: 100%; margin-top: 8px; }
.mobile-menu__link {
  display: flex; align-items: center; min-height: 48px; padding: 0 12px;
  border-radius: var(--radius-s); color: var(--gray-300); font-weight: 500;
}
.mobile-menu__link:hover { background: var(--gray-1100); color: var(--text-light); }
.mobile-menu__link[aria-current="page"] { background: var(--gray-1100); color: var(--primary); }
.mobile-menu__close { align-self: flex-end; }
.mobile-menu__prefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--gray-1100); }
.mobile-menu__pref {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: calc(14px * var(--fs-s, 1)); min-width: 0;
  min-height: 44px; padding: 0 8px; border-radius: var(--radius-s);
  background: var(--gray-1100); color: var(--gray-300); font-weight: 500; white-space: nowrap;
}
.mobile-menu__pref:hover { color: var(--text-light); }
/* На узком телефоне тема переключается из меню, в шапке остаются язык и бургер */
@media (max-width: 479.98px) { .header__tools [data-theme-toggle] { display: none; } .app--plain .header__tools [data-theme-toggle] { display: inline-flex; } }

.is-theme-switching *, .is-theme-switching *::before, .is-theme-switching *::after { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Страница 404 ---------- */
.app--plain { grid-template-columns: minmax(0, 1fr); }
.notfound { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 48px 16px; }
.notfound__code { font-size: 96px; line-height: 1; font-weight: 700; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.notfound__title { font-size: 28px; line-height: 36px; font-weight: 700; }
.notfound__text { max-width: 440px; color: var(--gray-400); }
.notfound__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; }

/* ---------- Ссылка «Перейти к содержанию» (видна только при фокусе с клавиатуры) ---------- */
.skip-link {
  position: fixed; left: 16px; top: -100px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius-s);
  background: var(--primary-surface); color: var(--on-accent); font-weight: 600;
}
.skip-link:focus { top: 16px; }

/* ---------- Хлебные крошки (общие для внутренних страниц) ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: calc(14px * var(--fs-s, 1)); line-height: 20px; color: var(--gray-500); }
.crumbs a { color: var(--gray-400); }
.crumbs a:hover { color: var(--text-light); }
.crumbs [aria-current] { color: var(--gray-300); }

/* Длинные кнопки на телефоне переносятся, а не обрезаются */
@media (max-width: 767.98px) {
  .btn { white-space: normal; height: auto; min-height: 48px; text-align: center; }
  .btn--sm { min-height: 40px; }
  .btn--link { min-height: 0; }
}

.crumbs--page { margin-bottom: var(--gap); }

.footer__mail { color: var(--primary); font-weight: 600; }
.footer__mail:hover { color: var(--link-hover); }

/* Подпись-ссылка в цифрах (курс) */
.stat-link { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gray-400) 40%, transparent); text-underline-offset: 3px; }
.stat-link:hover { color: var(--link-hover); text-decoration-color: currentColor; }

/* Тач-цели не меньше 44px на любом сенсорном экране, в том числе на планшете.
   Там, где интерфейс уменьшен zoom, размер делим на масштаб — на экране выходит 44px */
@media (pointer: coarse) {
  :root { --tap: 44px; }
  .icon-btn, .header__tool { min-width: var(--tap); min-height: var(--tap); }
  .chip, .btn--sm, .mobile-menu__pref { min-height: var(--tap); }
}
@media (pointer: coarse) and (min-width: 768px) and (max-width: 1100.98px) { :root { --tap: calc(44px / .9); } }
@media (pointer: coarse) and (min-width: 1101px) and (max-width: 1799px) { :root { --tap: calc(44px / .85); } }
/* Ноутбуки: zoom .85 истончает рамку фокуса до 1 экранного пикселя — делаем её толще */
@media (min-width: 1101px) and (max-width: 1799px) { :focus-visible { outline-width: 3px; } }
/* Телефон: нижняя панель не закрывает элемент, к которому переходит фокус */
@media (max-width: 767.98px) { html { scroll-padding-bottom: calc(69px + 16px + env(safe-area-inset-bottom)); } }
/* Подвал на телефоне: ссылки с запасом по высоте, чтобы попадать пальцем */
@media (max-width: 767.98px) {
  .footer__nav a, .footer__socials a { display: inline-block; padding: 8px 0; }
  .footer__nav { gap: 0 20px; }
  .footer__socials { gap: 0 20px; }
}

/* Кнопки шапки одной ширины в RU и EN: при смене языка переключатели не сдвигаются */
@media (min-width: 1024px) {
  /* кнопки шапки одной ширины в обоих языках */
  .header__side--end > .btn--tertiary { min-width: 216px; }
  .header__side--end > .btn--primary { min-width: 154px; }
}

/* Шапка липкая: элемент, к которому переходит фокус (в том числе Shift+Tab), не прячется под ней */
/* (не scroll-padding на html: тогда фокус на кнопке в самой шапке прокручивал страницу вверх) */
main [tabindex], main a, main button, main summary, main input, main select, #main, .footer a { scroll-margin-top: calc(var(--header-h) + 12px); }
/* Светлая тема: боковое меню белое, как карточки (иначе сливается с фоном страницы) */
:root[data-theme="light"] .sidebar { background: var(--gray-1600); }
/* Ссылки в тексте: одинаковое поведение при наведении на всех страницах */
:is(.ab-block p, .ab-links, .ab-list, .bk-details, .song p, .ab-muted) a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
/* Сенсорные экраны: запас по высоте и у текстовых ссылок, подвала и пунктов меню */
@media (pointer: coarse) {
  .btn, .sidebar__item { min-height: var(--tap); }
  .btn--link { min-height: var(--tap); }
  .footer__nav a, .footer__socials a, .release__links a { display: inline-flex; align-items: center; min-height: var(--tap); }
}

/* Низкий экран (телефон горизонтально, увеличение 300–400%): шапка и нижняя панель не липнут */
@media (max-height: 500px) {
  .header { position: static; }
  .tabbar { position: static; margin: 0 -16px; }
  .app { padding-bottom: 16px; }
}
/* Firefox ≤125 не знает zoom: без масштаба не раздуваем текст компенсацией */
@supports not (zoom: 1) { html { --fs-s: 1; --fs-h: 1; } }
/* Очень широкий экран: фон и линия шапки на всю ширину окна, а не до 1920 */
@media (min-width: 1921px) { .header { box-shadow: 0 0 0 100vmax var(--header-bg); clip-path: inset(0 -100vmax); } }
/* Контрастные темы Windows (forced-colors): иконки и края кнопок/карточек остаются видимыми */
@media (forced-colors: active) {
  .icon { forced-color-adjust: none; background: CanvasText; }
  a .icon, button .icon { background: LinkText; }
  .btn, .header__tool, .icon-btn, .card, .sidebar, .dir, .partner, .faq__item, .tabbar__item, .chip, .mobile-menu__pref { border: 1px solid CanvasText; }
  [aria-current="page"] { outline: 2px solid Highlight; }
  .header__logo { forced-color-adjust: none; }
}
/* Печать и сохранение в PDF: только содержимое, тёмный текст на белом */
@media print {
  html { zoom: 1; --fs-s: 1; --fs-h: 1; }
  :root, :root[data-theme] {
    --gray-1900: #fff; --gray-1800: #fff; --gray-1700: #fff; --gray-1600: #fff; --gray-1500: #fff; --gray-1400: #fff;
    --gray-1100: #ccc; --text-light: #000; --gray-200: #111; --gray-300: #222; --gray-400: #333; --gray-500: #444;
    --primary: #000; --blue-600: #000; --tertiary-content: #000; --card-line: #bbb;
  }
  .header, .sidebar, .tabbar, .skip-link, .mobile-menu, .hero__socials, .block-head__nav, .footer__socials, .footer__nav, .bk-hero__actions, .ab-hero__actions, .hero__buttons, .book__actions, .pg-actions { display: none !important; }
  .app { display: block; padding: 0; }
  body, .card { background: #fff !important; color: #000; }
  * { box-shadow: none !important; text-shadow: none !important; }
  .card { border: 1px solid #bbb; break-inside: avoid; margin-bottom: 12px; }
  .btn { border: 1px solid currentColor; background: none !important; color: #000 !important; }
  a { color: #000 !important; }
  .ab-block p a[href^="http"]::after, .ab-links a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; word-break: break-all; }
}
@media (max-width: 359.98px) { .mobile-menu__pref .icon { display: none; } }
h1 { letter-spacing: -.02em; }
h2 { letter-spacing: -.01em; }
@media (max-width: 479.98px) { .notfound__links { flex-direction: column; width: 100%; } .notfound__links .btn { width: 100%; } }
/* стрелка ↗/→ в ссылке-действии вплотную к тексту (неразрывный пробел уже есть) */
.btn--link > span[aria-hidden="true"] { margin-left: -8px; }
.btn > span[aria-hidden="true"]:last-child:not(.icon) { margin-left: -4px; }

/* Внутри html с zoom единица vh не уменьшается вместе со страницей — пересчитываем высоту окна */
@media (min-width: 1101px) and (max-width: 1799px) { :root { --vh: calc(100vh / .85); } }
@media (min-width: 768px) and (max-width: 1100.98px) { :root { --vh: calc(100vh / .9); } }
@supports not (zoom: 1) { :root { --vh: 100vh; } }
/* Полоса прокрутки (Windows, мышь) не сдвигает страницу при переходе между длинными и короткими разделами */
html { scrollbar-gutter: stable; }
/* Нажатие на кнопку без сдвига на пиксель */
.btn:active { transform: none; }