/* ==================================================================
   Апостройка — таблица стилей
   1. Переменные и сброс
   2. Типографика, контейнер, кнопки, формы
   3. Шапка, навигация, бургер, мобильное меню, футер
   4. Секции
   5. Медиазапросы, доступность, печать
   ================================================================== */

/* ---------- 1. Переменные ---------------------------------------- */

:root {
  --bg-cream: #F6F4EE;
  --surface:  #FFFFFF;
  --ink:      #0D0C0C;
  --ink-soft: #2D2F2F;
  --muted:    #5F5F5C;
  --line:     #BBBAB5;
  --accent:   #B80009;
  --accent-dark: #950007;
  --tint:     #E8ECEE;

  --on-dark:      #F6F4EE;
  --line-on-dark: rgba(246, 244, 238, .18);
  --text-on-dark: rgba(246, 244, 238, .78);
  /* Служебный цвет для тёмной подложки: --muted на #0D0C0C даёт 3:1 и не проходит AA */
  --muted-on-dark: #A9A8A2;

  --font-display: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-text: 'Golos Text', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --container: 1392px;
  --gutter: 24px;
  --prose: 780px;
  --section-y: 96px;
  --header-h: 88px;

  --veil: linear-gradient(180deg, rgba(13, 12, 12, .15) 0%, rgba(13, 12, 12, .62) 100%);
  --t-fast: 160ms ease;
  --t-slow: 300ms ease;
}

/* ---------- Сброс -------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-cream);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; border: 0; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  border-radius: 0;
}

button { cursor: pointer; background: none; border: 0; padding: 0; }

table { border-collapse: collapse; width: 100%; }

hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- 2. Типографика ---------------------------------------- */

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.06;
}

h1 { font-size: 44px; }
h2 { font-size: 32px; line-height: 1.1; }
h3 { font-size: 22px; line-height: 1.2; }

p + p { margin-top: 28px; }

strong { font-weight: 500; }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .12em;
  line-height: 1.2;
  color: var(--muted);
  display: block;
}

.eyebrow--accent { color: var(--accent); }
.eyebrow--light  { color: rgba(246, 244, 238, .78); }

.meta-date,
.caption {
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.text-accent { color: var(--accent); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--on-dark);
  padding: 12px 20px;
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.skip-link:focus { left: 0; }

/* ---------- Контейнер и ритм --------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: 64px; }
.section--flush-top { padding-top: 0; }

.section--tint { background: var(--tint); }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--soft { background: var(--ink-soft); color: var(--on-dark); }

.band { width: 100%; }

/* Заголовок секции: eyebrow + крупный заголовок + линия во всю ширину */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}

.section-head__text { max-width: 720px; }
.section-head__title { margin-top: 10px; }
.section-head__note { margin-top: 12px; color: var(--ink-soft); font-size: 15px; }

.section--dark .section-head,
.section--soft .section-head { border-bottom-color: var(--line-on-dark); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .10em;
  line-height: 1;
  border-radius: 0;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.btn:hover,
.btn:focus-visible {
  background: var(--ink);
  color: var(--bg-cream);
}

.btn--light {
  border-color: var(--on-dark);
  color: var(--on-dark);
}

.btn--light:hover,
.btn--light:focus-visible {
  background: var(--on-dark);
  color: var(--ink);
}

.btn-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 0;
  transition: background-color var(--t-fast);
}

.btn-square:hover,
.btn-square:focus-visible { background: var(--accent-dark); }

/* Текстовая ссылка «читать все» */
.link-more {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--ink);
  transition: color var(--t-fast);
}

.link-more__label { color: var(--muted); }
.link-more__action { text-decoration: underline; text-underline-offset: 4px; }

.link-more:hover,
.link-more:focus-visible { color: var(--accent); }
.link-more:hover .link-more__label { color: var(--accent); }

.section--dark .link-more,
.section--soft .link-more { color: var(--on-dark); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: inherit;
  border-radius: 0;
  transition: color var(--t-fast);
}

.icon-btn:hover { color: var(--accent); }
.icon-btn--light:hover { color: var(--on-dark); opacity: .75; }

/* ---------- Формы --------------------------------------------------- */

.field { display: block; margin-bottom: 20px; }

.field__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: 8px;
}

.input,
.textarea,
.select {
  width: 100%;
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  transition: border-color var(--t-fast);
}

.textarea { min-height: 148px; resize: vertical; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230D0C0C' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.input:hover,
.textarea:hover,
.select:hover { border-color: var(--muted); }

.input:focus,
.textarea:focus,
.select:focus { border-color: var(--ink); outline: none; }

.input::placeholder,
.textarea::placeholder { color: var(--muted); }

.form-note { font-size: 13px; color: var(--muted); margin-top: 14px; }

.form-success {
  border: 1px solid var(--accent);
  padding: 16px 18px;
  margin-bottom: 24px;
  font-size: 15px;
}

/* Маркированные списки с квадратными красными маркерами */
.list-marked li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
}

.list-marked li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  background: var(--accent);
}

.list-numbered { counter-reset: nlist; }

.list-numbered li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 12px;
  counter-increment: nlist;
}

.list-numbered li::before {
  content: counter(nlist);
  position: absolute;
  left: 0;
  top: .05em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
}

/* ==================================================================
   3. Шапка, навигация, бургер, мобильное меню, футер
   ================================================================== */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.site-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--header-h);
}

.site-header--over {
  background: transparent;
  color: #fff;
  border-bottom: 1px solid transparent;
}

/* Собственный скрим шапки: белый текст поверх фото не должен зависеть от того,
   насколько светлый кадр попал под меню. Держим не меньше .62 на всю высоту шапки. */
.site-header--over::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--header-h) + 80px);
  pointer-events: none;
  background: linear-gradient(180deg,
              rgba(13, 12, 12, .74) 0%,
              rgba(13, 12, 12, .64) 52%,
              rgba(13, 12, 12, .28) 82%,
              rgba(13, 12, 12, 0) 100%);
}

.site-header--over.is-stuck::before { display: none; }

.site-header--solid {
  position: relative;
  background: var(--bg-cream);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

/* Липкое состояние при скролле */
.site-header.is-stuck {
  position: fixed;
  background: var(--bg-cream);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

body.has-stuck-header { padding-top: var(--header-h); }

/* Логотип */
.logo {
  flex: 0 0 auto;
  display: block;
  line-height: 1;
}

.logo__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.logo__tag {
  display: block;
  margin-top: 5px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--muted);
}

.site-header--over .logo__tag { color: rgba(255, 255, 255, .72); }
.site-header.is-stuck .logo__tag { color: var(--muted); }

/* Навигация */
.nav { margin-left: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  padding: 6px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .09em;
  white-space: nowrap;
  color: inherit;
  transition: color var(--t-fast), opacity var(--t-fast);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast);
}

.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }

.nav__plus { font-size: 13px; line-height: 1; }

/* Выпадающая панель */
.nav__drop {
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 240px;
  background: var(--bg-cream);
  border: 1px solid var(--line);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}

.nav__item--has-drop:hover .nav__drop,
.nav__item--has-drop:focus-within .nav__drop,
.nav__link[aria-expanded="true"] + .nav__drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__drop-list a {
  display: block;
  padding: 9px 20px;
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--ink);
  transition: color var(--t-fast), background-color var(--t-fast);
}

.nav__drop-list a:hover,
.nav__drop-list a:focus-visible { color: var(--accent); }

.nav__drop-all {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.nav__drop-all a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}

/* Инструменты справа */
.site-header__tools {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
}

/* Бургер */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.burger__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform var(--t-fast), opacity var(--t-fast);
}

.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Полоса поиска */
.search-bar {
  position: relative;
  z-index: 1;
  background: var(--bg-cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}

.search-bar__form {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 640px;
}

.search-bar__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 0;
  font-family: var(--font-text);
  font-size: 15px;
  color: var(--ink);
}

.search-bar__input:focus { outline: none; border-color: var(--ink); }

/* Мобильное меню */
.mobile-menu {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(400px, 100%);
  z-index: 120;
  background: var(--ink);
  color: var(--on-dark);
  overflow-y: auto;
  padding-bottom: 40px;
}

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 16px 0 24px;
  border-bottom: 1px solid var(--line-on-dark);
}

.mobile-menu__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.mobile-menu__item { border-bottom: 1px solid var(--line-on-dark); }

.mobile-menu__link,
.mobile-menu__acc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 14px 24px;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--on-dark);
}

.mobile-menu__acc[aria-expanded="true"] .mobile-menu__sign { transform: rotate(45deg); }
.mobile-menu__sign { transition: transform var(--t-fast); }

.mobile-menu__sub { padding: 0 24px 18px; }

.mobile-menu__sub a {
  display: block;
  padding: 11px 0;
  min-height: 44px;
  font-size: 15px;
  color: var(--text-on-dark);
}

.mobile-menu__sub a:hover,
.mobile-menu__sub a:focus-visible { color: var(--on-dark); text-decoration: underline; }

.mobile-menu__search {
  display: flex;
  margin: 24px 24px 0;
}

.mobile-menu__search .search-bar__input { background: transparent; color: var(--on-dark); border-color: var(--line-on-dark); }

.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(13, 12, 12, .5);
}

/* ---------- Футер --------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--on-dark);
  padding-top: 72px;
  padding-bottom: 32px;
}

.site-footer__top {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
}

.site-footer .logo__name { color: var(--on-dark); }
.site-footer .logo__tag { color: var(--muted-on-dark); }

.site-footer__disclaimer {
  margin-top: 22px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted-on-dark);
  max-width: 300px;
}

.socials {
  display: flex;
  gap: 8px;
  margin-top: 22px;
}

.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--text-on-dark);
  transition: opacity var(--t-fast), color var(--t-fast);
}

.socials a:hover,
.socials a:focus-visible { color: var(--on-dark); opacity: 1; text-decoration: underline; }

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.site-footer__col {
  padding: 0 28px;
  border-left: 1px solid var(--line-on-dark);
}

.site-footer__col:last-child { padding-right: 0; }

.site-footer__col-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--on-dark);
  margin-bottom: 14px;
}

.site-footer__col a {
  display: block;
  font-size: 13px;
  line-height: 2;
  color: var(--text-on-dark);
  transition: color var(--t-fast);
}

.site-footer__col a:hover,
.site-footer__col a:focus-visible { color: var(--on-dark); text-decoration: underline; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line-on-dark);
  font-size: 11px;
  color: var(--muted-on-dark);
}

.site-footer__bottom a { transition: color var(--t-fast); }
.site-footer__bottom a:hover,
.site-footer__bottom a:focus-visible { color: var(--on-dark); }

/* ==================================================================
   4. Секции
   ================================================================== */

/* ---------- Герой главной ------------------------------------------ */

.hero-home {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--ink);
  overflow: hidden;
}

.hero-home__media,
.page-hero__media {
  position: absolute;
  inset: 0;
}

.hero-home__media img,
.page-hero__media img,
.promo-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-home__veil,
.page-hero__veil,
.promo-band__veil {
  position: absolute;
  inset: 0;
  background: var(--veil);
}

.hero-home__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 88px;
  padding-top: calc(var(--header-h) + 80px);
}

.hero-home__title {
  font-size: 72px;
  max-width: 12ch;
}

.hero-home__sub {
  margin-top: 18px;
  font-size: 18px;
  max-width: 620px;
  color: rgba(255, 255, 255, .88);
}

/* ---------- Герой внутренних страниц -------------------------------- */

.page-hero {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--ink);
  overflow: hidden;
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: calc(var(--header-h) + 48px);
  padding-bottom: 44px;
}

.page-hero__title { font-size: 44px; max-width: 18ch; }
.page-hero__title--wide { max-width: 24ch; }

.page-hero--plain {
  background: var(--bg-cream);
  color: var(--ink);
  min-height: 0;
  border-bottom: 1px solid var(--line);
}

.page-hero--plain .page-hero__inner {
  padding-top: 56px;
  padding-bottom: 40px;
}

/* Герой статьи */
.hero-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, .82);
}

.hero-article__rubric {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.hero-article__dot { width: 4px; height: 4px; background: currentColor; opacity: .6; }

/* ---------- Сетка карточек ------------------------------------------ */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(var(--cards-cols, 3), 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--bg-cream);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: border-color var(--t-fast);
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--tint);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 24px 24px;
}

.card__title {
  font-size: 21px;
  line-height: 1.15;
  transition: color var(--t-fast);
}

.card__lead {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.card__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 26px;
}

.card__circle {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.card__rubric {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.card__date { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }

.card:hover { border-color: var(--ink); }
.card:hover .card__title { color: var(--accent); }
.card:hover .card__media img { transform: scale(1.03); }
.card:hover .card__circle { background: var(--ink); border-color: var(--ink); color: #fff; }

.card__link { display: contents; }

.card--simple .card__body { padding-bottom: 22px; }
.card--simple .card__meta { padding-top: 18px; }

.section-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
}

.section-foot--center { justify-content: center; }

/* ---------- Плитки рубрик -------------------------------------------- */

.rubric-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.rubric-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 168px;
  overflow: hidden;
  color: #fff;
  background: var(--ink-soft);
}

.rubric-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rubric-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(13, 12, 12, .15), rgba(13, 12, 12, .62));
  transition: background-color var(--t-fast), opacity var(--t-fast);
}

.rubric-tile__name {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  text-align: center;
  padding: 0 16px;
}

.rubric-tile:hover::after { background: linear-gradient(rgba(13, 12, 12, .35), rgba(13, 12, 12, .78)); }
.rubric-tile:hover .rubric-tile__name { text-decoration: underline; text-underline-offset: 5px; }

/* ---------- Полоса-передышка ------------------------------------------ */

.promo-band {
  position: relative;
  overflow: hidden;
  color: var(--on-dark);
  background: var(--ink-soft);
}

.promo-band__media { position: absolute; inset: 0; }

/* Текст полосы прижат влево, поэтому к вертикальной вуали добавляется
   горизонтальная: надзаголовок и кнопка 12px должны читаться и на светлом кадре. */
.promo-band__veil {
  background:
    linear-gradient(90deg, rgba(13, 12, 12, .72) 0%, rgba(13, 12, 12, .35) 55%, rgba(13, 12, 12, 0) 100%),
    var(--veil);
}

.promo-band__inner {
  position: relative;
  z-index: 2;
  padding-block: 88px;
}

.promo-band__title { margin-top: 12px; font-size: 36px; max-width: 16ch; }
.promo-band__text { margin-top: 18px; max-width: 560px; color: rgba(246, 244, 238, .84); }

.promo-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* ---------- Блок «о портале» на главной -------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}

/* min-width: 0 обязателен: без него колонка грида раздувается по содержимому.
   width: 100% тоже: колонку растягивает align-items: stretch, и без явной ширины
   aspect-ratio считает ширину от высоты — фото наезжало на текст справа. */
.split__media {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--tint);
}

.split__text { min-width: 0; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.split__text {
  border: 1px solid var(--line);
  border-left: 0;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.split__title { margin-top: 12px; }
.split__body { margin-top: 20px; color: var(--ink-soft); }
.split__list { margin-top: 24px; }
.split__actions { margin-top: 32px; }

/* ---------- Рубрика: вступление ---------------------------------------- */

.category-intro__text { max-width: var(--prose); color: var(--ink-soft); }

.category-intro__count {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}

/* ---------- Фильтр в списке статей -------------------------------------- */

.articles-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}

.articles-filter .select { width: auto; min-width: 220px; height: 44px; padding-block: 0; }
.articles-filter__search { display: flex; margin-left: auto; }
.articles-filter__search .search-bar__input { width: 260px; }
.articles-filter__note { width: 100%; font-size: 13px; color: var(--muted); }

/* ---------- Статья ------------------------------------------------------ */

.prose {
  max-width: var(--prose);
  margin-inline: auto;
}

.article-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--prose);
  margin: 0 auto 40px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.article-share__links { display: flex; gap: 4px; }

.article-share__links a,
.article-share__links button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--ink);
  transition: color var(--t-fast);
}

.article-share__links a:hover,
.article-share__links button:hover { color: var(--accent); }

.prose h2 {
  margin-top: 52px;
  margin-bottom: 18px;
  color: var(--accent);
  font-size: 32px;
}

.prose h3 {
  margin-top: 38px;
  margin-bottom: 14px;
  color: var(--ink);
}

.prose p { margin-bottom: 28px; }
.prose p:last-child { margin-bottom: 0; }

.prose ul,
.prose ol { margin: 0 0 28px; }

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose a:hover { color: var(--accent-dark); }

.prose figure { margin: 40px 0; }
.prose figure img { width: 100%; }
.prose figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }

.prose-table-wrap { overflow-x: auto; margin: 0 0 34px; }

.prose table { font-size: 15px; min-width: 520px; }

.prose caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  padding-bottom: 12px;
}

.prose th,
.prose td {
  text-align: left;
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.prose th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom-color: var(--ink);
}

.pull-quote {
  background: var(--ink-soft);
  color: var(--on-dark);
  padding-block: 72px;
  margin-block: 56px;
}

.pull-quote__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.15;
  max-width: 860px;
}

.pull-quote__author {
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(246, 244, 238, .7);
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: var(--prose);
  margin: 48px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-soft);
  transition: border-color var(--t-fast), color var(--t-fast);
}

.tag:hover { border-color: var(--ink); color: var(--accent); }

/* ---------- Комментарии --------------------------------------------------- */

.comments { max-width: 860px; }

.comment {
  display: flex;
  gap: 18px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}

.comment__avatar {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.comment__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.comment__date { font-size: 13px; color: var(--muted); margin-top: 2px; }
.comment__text { margin-top: 12px; font-size: 15px; }
.comment__replies { margin-left: 64px; }

.comment-form { max-width: 640px; margin-top: 48px; }
.comment-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ---------- Факты о портале ------------------------------------------------ */

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.fact {
  padding: 0 32px;
  border-left: 1px solid var(--line-on-dark);
}

.fact:first-child { padding-left: 0; border-left: 0; }

.fact__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
}

.fact__label {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-on-dark);
  max-width: 240px;
}

/* ---------- Контакты --------------------------------------------------------- */

.contacts-lead { max-width: 640px; margin-top: 18px; color: var(--ink-soft); font-size: 18px; }
.contacts-actions { margin-top: 32px; }

.channels { margin-top: 48px; border-top: 1px solid var(--line); max-width: 860px; }

.channel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.channel__label {
  flex: 0 0 220px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}

.channel__value { font-size: 17px; }
.channel__value a { text-decoration: underline; text-underline-offset: 3px; }
.channel__value a:hover { color: var(--accent); }
.channel__note { flex: 1 1 100%; font-size: 13px; color: var(--muted); }

.contacts-form { max-width: 640px; }

/* ---------- Карта сайта -------------------------------------------------------- */

.sitemap-tree {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 40px;
}

.sitemap-col__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 4px;
}

.sitemap-col__title a:hover { color: var(--accent); }

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

.sitemap-col li a {
  display: block;
  padding: 11px 0;
  font-size: 14px;
  color: var(--ink-soft);
  transition: color var(--t-fast);
}

.sitemap-col li a:hover { color: var(--accent); }

/* ---------- 404 ------------------------------------------------------------------ */

.notfound { text-align: left; padding-block: 120px 96px; }

.notfound__code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 120px;
  line-height: .9;
  /* --line — цвет линеек, для текста он даёт 1.8:1; крупному тексту нужно 3:1 */
  color: var(--muted);
}

.notfound__title { margin-top: 24px; }
.notfound__text { margin-top: 18px; max-width: 560px; color: var(--ink-soft); }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ---------- Появление при скролле ------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.reveal.is-visible { opacity: 1; transform: none; }

/* ==================================================================
   5. Медиазапросы, доступность, печать
   ================================================================== */

@media (max-width: 1200px) {
  .hero-home__title { font-size: 60px; }
  .split__text { padding: 40px 36px; }
  .site-footer__top { grid-template-columns: 260px 1fr; gap: 32px; }
  .site-footer__col { padding: 0 18px; }
}

@media (max-width: 1000px) {
  .nav__list { gap: 22px; }
  .nav__link { font-size: 11px; }
}

/* Ниже 900px: навигация в бургер, сетки 4→2 и 3→2 */
@media (max-width: 900px) {
  :root {
    --section-y: 64px;
    --header-h: 64px;
  }

  .nav { display: none; }
  .burger { display: inline-flex; }

  .hero-home { min-height: 0; }
  .hero-home__inner { padding-top: calc(var(--header-h) + 64px); padding-bottom: 56px; }
  .hero-home__title { font-size: 44px; }
  .hero-home__sub { font-size: 16px; }

  .page-hero { min-height: 280px; }
  .page-hero__inner { padding-top: calc(var(--header-h) + 40px); padding-bottom: 32px; }
  .page-hero__title { font-size: 34px; }

  h1 { font-size: 34px; }
  h2 { font-size: 26px; }

  .cards-grid { --cards-cols: 2 !important; }
  .rubric-tiles { grid-template-columns: repeat(2, 1fr); }

  .split { grid-template-columns: 1fr; }
  .split__text { border-left: 1px solid var(--line); border-top: 0; padding: 32px 24px 40px; }

  .promo-band__inner { padding-block: 64px; }
  .promo-band__title { font-size: 28px; }

  .pull-quote { padding-block: 48px; margin-block: 40px; }
  .pull-quote__text { font-size: 24px; }

  .facts { grid-template-columns: 1fr; gap: 28px; }
  .fact { padding: 0 0 0 24px; border-left: 1px solid var(--line-on-dark); }
  .fact:first-child { padding-left: 24px; border-left: 1px solid var(--line-on-dark); }
  .fact__value { font-size: 44px; }

  .sitemap-tree { grid-template-columns: repeat(2, 1fr); }

  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .site-footer__col:nth-child(odd) { padding-left: 0; border-left: 0; }
  .site-footer__disclaimer { order: 3; max-width: none; }

  .notfound { padding-block: 72px 64px; }
  .notfound__code { font-size: 88px; }
}

@media (max-width: 700px) {
  .comment-form__row { grid-template-columns: 1fr; gap: 0; }
  .articles-filter__search { margin-left: 0; width: 100%; }
  .articles-filter__search .search-bar__input { width: 100%; }
  .articles-filter .select { width: 100%; min-width: 0; }
}

/* Ниже 600px: всё в одну колонку */
@media (max-width: 600px) {
  :root { --gutter: 16px; }

  .cards-grid { --cards-cols: 1 !important; }
  .rubric-tiles { grid-template-columns: 1fr; gap: 16px; }
  .sitemap-tree { grid-template-columns: 1fr; gap: 36px; }
  .site-footer__cols { grid-template-columns: 1fr; }
  .site-footer__col { padding-left: 0; border-left: 0; }

  .hero-home__title { font-size: 36px; }
  .page-hero__title { font-size: 28px; }
  .card__title { font-size: 20px; }
  .card__body { padding: 20px; }

  .channel__label { flex: 1 1 100%; }
  .site-footer__col a,
  .channel__value a { min-height: 44px; display: flex; align-items: center; }
  .sitemap-col li a { padding: 13px 0; }
  .btn { width: 100%; }
  .notfound__actions .btn { width: auto; }
  .section-foot { justify-content: flex-start; }
}

/* Фокус — одинаково на всех интерактивных элементах */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.site-header--over a:focus-visible,
.site-header--over button:focus-visible,
.mobile-menu a:focus-visible,
.mobile-menu button:focus-visible,
.section--dark a:focus-visible,
.section--soft a:focus-visible,
.promo-band a:focus-visible,
.site-footer a:focus-visible {
  outline-color: var(--on-dark);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1; transform: none; }
  .card:hover .card__media img { transform: none; }
}

@media print {
  .site-header,
  .mobile-menu,
  .menu-backdrop,
  .search-bar,
  .site-footer,
  .promo-band,
  .rubric-tiles,
  .article-share,
  .comment-form,
  .skip-link { display: none !important; }

  body { background: #fff; color: #000; font-size: 12pt; }

  .section { padding-block: 12pt; }
  .prose { max-width: none; }
  .prose h2 { color: #000; }

  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }

  .card,
  .cards-grid { break-inside: avoid; border-color: #999; }

  .pull-quote { background: none; color: #000; border-left: 3pt solid #000; padding: 8pt 0 8pt 12pt; }
}