/* Городской портал Борисоглебска — стили сайта. Подключение: core/fonts.css → core/base.css → css/site.css → [css/page-<имя>.css] → core/a11y.css
   Цвета только var(--c-*), --c-illu-* — только в декоративных SVG; шрифты var(--font-*); размеры в rem. Разметка: briefs/portal-components.md
   Разделы: 1 токены · 2 типографика · 3 раскладка · 4 кнопки, ссылки, телефоны · 5 чипы, метки, статусы · 6 плашка и шапка · 7 меню-лист · 8 поиск
   · 9 первый экран главной · 10 плитки · 11 новости · 12 приём · 13 цифры · 14 зигзаг · 15 справочник · 16 контакты · 17 подвал
   · 18 первый экран страниц · 19 таблицы · 22 лента, мозаика, группы, люди · 23 для слабовидящих · 24 знак и иллюстрации
   Формы, аккордеон, фильтры и шаги (бывшие разделы 20–21) есть только на «Жителям» — они в css/page-zhitelyam.css */

/* 1. Токены */
:root {
  --font-display: "Geologica", "Onest", system-ui, sans-serif;
  --font-text: "Onest", system-ui, sans-serif;
  --shrp: 40;

  --c-bg: #F6F2EA;
  --c-surface: #FFFFFF;
  --c-surface-2: #EEE7DA;
  --c-ink: #1D1714;
  --c-ink-2: #5B5048;
  --c-line: #DCD2C2;
  --c-brand: #6E1419;
  --c-on-brand: #FBF3E6;
  --c-accent: #A01C26;
  --c-on-accent: #FFFFFF;
  --c-focus: #1D1714;
  --c-danger: #B42318;
  --c-on-danger: #FFFFFF;
  /* Статус «открыто»: точка рядом с текстом, не единственный признак */
  --c-ok: #2E7A4C;
  --c-ok-on-brand: #9ED6A8;
  --c-line-on-brand: color-mix(in srgb, var(--c-on-brand) 24%, var(--c-brand));
  --c-tint-on-brand: color-mix(in srgb, var(--c-on-brand) 9%, var(--c-brand));

  --c-illu-gold: #B8872B;
  --c-illu-gold-soft: #E3C98E;
  --c-illu-red: #A01C26;
  --c-illu-ink: #3A2E27;

  --radius-s: 0.5rem;
  --radius-m: 0.875rem;
  --radius-l: 1.25rem;
  --radius-pill: 62.5rem;

  --shadow-1: 0 1px 2px rgba(60, 30, 20, 0.05), 0 2px 8px -2px rgba(60, 30, 20, 0.06);
  --shadow-2: 0 1px 2px rgba(60, 30, 20, 0.05), 0 8px 18px -6px rgba(60, 30, 20, 0.11), 0 22px 40px -18px rgba(60, 30, 20, 0.14);
  --shadow-3: 0 2px 4px rgba(60, 30, 20, 0.06), 0 14px 30px -8px rgba(60, 30, 20, 0.16), 0 34px 64px -28px rgba(60, 30, 20, 0.22);

  --fs-h1: clamp(1.875rem, 1.4rem + 2.4vw, 3.25rem);
  --fs-h2: clamp(1.625rem, 1.35rem + 1vw, 2.25rem);
  --fs-h3: clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --fs-num: clamp(2.625rem, 1.9rem + 2.6vw, 4.25rem);

  --tr-c: background-color var(--dur-1) var(--ease-in-out), color var(--dur-1) var(--ease-in-out), border-color var(--dur-1) var(--ease-in-out);
  --tr-t: transform var(--dur-1) var(--ease-out);

  --container: 78rem;
  --gutter: 1rem;
  --utility-h: 0rem;
  --header-h: 3.75rem;
  --section-y: clamp(3rem, 2rem + 3vw, 4.5rem);
}
@media (min-width: 48rem) { :root { --gutter: 2rem; --header-h: 4.25rem; } }
@media (min-width: 64rem) { :root { --utility-h: 2.75rem; --header-h: 4.5rem; } }
@media (min-width: 80rem) { :root { --gutter: 3rem; } }

/* 2. База и типографика */
html { scroll-padding-top: calc(var(--header-h) + 1.5rem); }
body { line-height: 1.6; overflow-x: clip; font-variation-settings: "SHRP" var(--shrp); }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.01em; overflow-wrap: break-word; }
h1 { font-size: var(--fs-h1); line-height: 1.06; }
h2 { font-size: var(--fs-h2); line-height: 1.1; }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
::selection { background: var(--c-accent); color: var(--c-on-accent); }
b, strong { font-weight: 650; }
.kicker { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9375rem; font-weight: 500; line-height: 1.35; color: var(--c-ink-2); }
.kicker + :is(h1, h2, h3) { margin-top: 0.5rem; }
.kicker::before { content: ""; flex: none; width: 1.75rem; height: 1px; background: currentColor; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 0.5rem; }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; }
.crumbs a { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -0.75rem; color: var(--c-ink); text-underline-offset: 0.2em; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--c-ink-2); }
.muted { color: var(--c-ink-2); }
.small { font-size: 0.9375rem; line-height: 1.5; }
.footnote { font-size: 0.875rem; line-height: 1.45; color: var(--c-ink-2); }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* 3. Раскладка */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--flush-top { padding-top: 0; }
.section--surface { background: var(--c-surface); }
.section--paper { background: var(--c-surface-2); }
.section--brand { background: var(--c-brand); color: var(--c-on-brand); --c-focus: var(--c-on-brand); }
.section--brand :is(.kicker, .footnote) { color: var(--c-on-brand); font-size: 0.9375rem; }
.section:not([class*="section--"]) + .section:not([class*="section--"]) { padding-top: 0; }
section[tabindex="-1"]:focus-visible { outline: none; }
.section-head { display: grid; gap: 0.75rem 2rem; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.section-head > .lead, .section-head > p { max-width: 42rem; }
@media (min-width: 56rem) { .section-head--split { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .section-head--split > :not(:first-child) { justify-self: end; } .section-head--split > p { max-width: 36rem; } }
:is(.hero__grid, .news, .news-feature, .reception, .contacts, .story__item, .footer__top, .dir-row, .form-row, .mosaic) > * { min-width: 0; }

/* 4. Кнопки и ссылки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0.5rem 1.25rem; border: 1px solid transparent; border-radius: var(--radius-s); background: transparent; color: inherit; font-family: var(--font-text); font-size: 1rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; transition: var(--tr-c), var(--tr-t); }
.btn:active { transform: scale(0.98); }
.btn .icon { width: 1.25rem; height: 1.25rem; }
.btn--accent { background: var(--c-accent); color: var(--c-on-accent); }
.btn--accent:hover { background: var(--c-brand); }
.btn--light { background: var(--c-on-brand); color: var(--c-brand); }
.btn--light:hover { background: var(--c-surface); }
.btn--lg { min-height: 3.5rem; padding-inline: 1.5rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.link { color: var(--c-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.link:hover { color: var(--c-brand); text-decoration-thickness: 2px; }
.section--brand .link { color: var(--c-on-brand); }
.link-arrow { display: inline-block; padding-block: 0.625rem; color: var(--c-ink); font-weight: 600; line-height: 1.45; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: var(--c-line); transition: text-decoration-color var(--dur-1) var(--ease-in-out); }
.link-arrow .icon { display: inline-block; width: 1.25rem; height: 1.25rem; margin-left: 0.375rem; vertical-align: -0.28em; color: var(--c-accent); transition: transform var(--dur-1) var(--ease-out); }
.link-arrow:hover { text-decoration-color: currentColor; }
.link-arrow:hover .icon { transform: translateX(4px); }
.link-arrow:hover .icon--ext { transform: translate(2px, -2px); }
.link-arrow:hover .icon--down { transform: translateY(3px); }
:is(.section--brand, .place--dark) .link-arrow { color: var(--c-on-brand); text-decoration-color: var(--c-line-on-brand); }
:is(.section--brand, .place--dark) .link-arrow:hover { text-decoration-color: currentColor; }
:is(.section--brand, .place--dark) .link-arrow .icon { color: var(--c-on-brand); }
.phone { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; color: inherit; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.005em; white-space: nowrap; text-decoration: none; }
.phone:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.phone .icon { width: 1.125rem; height: 1.125rem; color: var(--c-accent); }
.section--brand .phone .icon { color: var(--c-on-brand); }
.phone--xl { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); line-height: 1.1; }
.phone__local { white-space: nowrap; }

/* 5. Чипы, метки, статусы */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.375rem 1rem; border: 1px solid var(--c-line); border-radius: var(--radius-pill); background: var(--c-surface); color: var(--c-ink); font-size: 0.9375rem; font-weight: 500; line-height: 1.25; text-decoration: none; transition: var(--tr-c), var(--tr-t); }
.chip:hover { border-color: var(--c-ink-2); }
.chip:active { transform: scale(0.98); }
.chip .icon { width: 1.125rem; height: 1.125rem; color: var(--c-accent); }
.chip[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-bg); }
.chip[aria-pressed="true"] .icon { color: currentColor; }
.chip__count { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; margin-right: -0.375rem; padding-inline: 0.375rem; border-radius: var(--radius-pill); background: var(--c-surface-2); color: var(--c-ink); font-size: 0.8125rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip__count { background: var(--c-bg); }
.section--brand .chip, .site-footer .chip { background: transparent; border-color: var(--c-line-on-brand); color: var(--c-on-brand); }
.section--brand .chip .icon, .site-footer .chip .icon { color: currentColor; }
.section--brand .chip:hover, .site-footer .chip:hover { border-color: var(--c-on-brand); }
/* На телефоне чипы-ссылки — сетка в две колонки */
@media (max-width: 29.9375rem) { .chips--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .chips--grid .chip { width: 100%; min-height: 3.25rem; padding-inline: 0.75rem; border-radius: var(--radius-m); } }
@media (max-width: 22.4375rem) { .chips--grid .icon { display: none; } }

.tag { display: inline-flex; align-items: center; min-height: 1.625rem; padding: 0.125rem 0.625rem; border-radius: var(--radius-pill); background: var(--c-surface-2); color: var(--c-ink); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }

.status { display: flex; align-items: baseline; gap: 0.625rem; margin: 0; }
.status__dot { flex: none; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--c-ink-2); }
.status[data-state="open"] .status__dot { background: var(--c-ok); }
.status[data-state="closed"] .status__dot { background: var(--c-accent); }
.section--brand .status .status__dot { background: var(--c-on-brand); }
.section--brand .status[data-state="open"] .status__dot { background: var(--c-ok-on-brand); }
.status__text { min-width: 0; }
.status--lg { gap: 0.875rem; }
.status--lg .status__dot { width: 0.875rem; height: 0.875rem; }
.status--lg .status__text { display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.status--lg .status__text::first-letter { text-transform: uppercase; }

/* 6. Плашка концепта и шапка */
.concept-bar { background: var(--c-surface-2); color: var(--c-ink); font-size: 0.875rem; border-bottom: 1px solid var(--c-line); }
.concept-bar__inner { max-width: calc(var(--container) + 2 * var(--gutter)); padding: 0.25rem var(--gutter); gap: 0 1.5rem; }
.concept-bar__inner > span { display: inline-flex; align-items: center; gap: 0.5rem; padding-block: 0.375rem; }
.concept-bar span .icon { width: 1.125rem; height: 1.125rem; color: var(--c-accent); }
.concept-bar a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: 0.25rem; font-weight: 500; text-decoration-thickness: 1px; }
.concept-bar a:hover { color: var(--c-accent); text-decoration-thickness: 2px; }
/* До 80rem видимый текст ссылки короткий (полный — для читалок), до 64rem плашка — один абзац, область нажатия ссылки расширена отступами */
@media (max-width: 79.9375rem) { .concept-bar__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (max-width: 63.9375rem) { .concept-bar__inner { display: block; padding-block: 0.5rem 0.75rem; } .concept-bar__inner > span { display: inline; padding: 0; } .concept-bar span .icon { display: inline-block; margin-right: 0.375rem; } .concept-bar a { display: inline; padding-block: 0.75rem; } }

.site-header { position: sticky; top: calc(-1 * var(--utility-h)); z-index: 100; background: var(--c-bg); }
.utility { display: none; }
@media (min-width: 64rem) { .concept-bar__inner { padding-block: 0.5rem; } .utility { display: block; height: var(--utility-h); background: var(--c-brand); color: var(--c-on-brand); font-size: 0.875rem; --c-focus: var(--c-on-brand); } }
.utility__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 100%; }
.utility__place { margin: 0; white-space: nowrap; }
.utility__links { display: flex; align-items: center; gap: 0.5rem; }
.utility__link { display: inline-flex; align-items: center; gap: 0.4375rem; min-height: 2.75rem; padding-inline: 0.75rem; color: inherit; font-weight: 500; text-decoration: none; white-space: nowrap; }
.utility__link:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.utility__link .icon { width: 1rem; height: 1rem; }
.utility__link b { font-family: var(--font-display); font-weight: 650; font-variant-numeric: tabular-nums; }
.a11y-toggle { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; margin-left: 0.5rem; padding: 0.25rem 0.875rem; border: 1px solid var(--c-line-on-brand); border-radius: var(--radius-pill); background: transparent; color: var(--c-on-brand); font-size: 0.875rem; font-weight: 600; line-height: 1.2; white-space: nowrap; transition: border-color var(--dur-1) var(--ease-in-out), transform var(--dur-1) var(--ease-out); }
.a11y-toggle::after { content: ""; position: absolute; inset: -0.25rem 0; }
.a11y-toggle:hover { border-color: var(--c-on-brand); }
.a11y-toggle:active { transform: scale(0.98); }
.a11y-toggle .icon { width: 1.125rem; height: 1.125rem; }

.header-bar { background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.header-bar__inner { display: flex; align-items: center; gap: 0.5rem; min-height: var(--header-h); }
@media (min-width: 64rem) { .header-bar__inner { gap: 1.5rem; } }
.brand { display: inline-flex; align-items: center; gap: 0.625rem; min-width: 0; min-height: 2.75rem; margin-right: auto; color: var(--c-ink); text-decoration: none; border-radius: var(--radius-s); }
.brand__mark { width: 2.25rem; height: 2.25rem; flex: none; }
.brand__text { display: grid; gap: 0.0625rem; line-height: 1.1; overflow-wrap: anywhere; }
.brand__name { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.01em; }
.brand__sub { font-size: 0.75rem; color: var(--c-ink-2); }
@media (max-width: 22.4375rem) { .brand { gap: 0.5rem; } .brand__mark { width: 2rem; height: 2rem; } .brand__name { font-size: 0.9375rem; } .brand__sub { font-size: 0.6875rem; } }
@media (min-width: 64rem) { .brand { gap: 0.75rem; } .brand__mark { width: 2.625rem; height: 2.625rem; } .brand__name { font-size: 1.25rem; } .brand__sub { font-size: 0.8125rem; } }

.site-nav { display: none; }
@media (min-width: 64rem) { .site-nav { display: block; } }
.site-nav__list { display: flex; align-items: center; gap: 0.5rem; }
.site-nav__link { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.625rem; border-radius: var(--radius-s); color: var(--c-ink); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-1) var(--ease-in-out); }
.site-nav__link:hover { background: var(--c-surface-2); }
.site-nav__link[aria-current] { font-weight: 650; }
.site-nav__link[aria-current]::after { content: ""; position: absolute; left: 0.625rem; right: 0.625rem; bottom: 0.1875rem; height: 2px; border-radius: 2px; background: var(--c-accent); }

.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.header-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.625rem; border: 1px solid var(--c-line); border-radius: var(--radius-s); background: var(--c-surface); color: var(--c-ink); font-size: 0.9375rem; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; transition: var(--tr-c), var(--tr-t); }
.header-btn:hover { border-color: var(--c-ink-2); }
.header-btn:active { transform: scale(0.98); }
.header-btn .icon { width: 1.25rem; height: 1.25rem; }
.header-btn--sos { color: var(--c-accent); font-family: var(--font-display); font-size: 1rem; font-variant-numeric: tabular-nums; }
.header-btn--menu[aria-expanded="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-bg); }
.header-btn .icon-close, .header-btn[aria-expanded="true"] .icon-open { display: none; }
.header-btn[aria-expanded="true"] .icon-close { display: block; }
.header-btn--search { display: none; }
@media (max-width: 29.9375rem) { .header-btn__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (max-width: 22.4375rem) { .header-btn--sos { padding-inline: 0.375rem; } .header-btn--sos .icon { display: none; } }
@media (max-width: 21.1875rem) { .header-bar .brand__mark { display: none; } }
@media (min-width: 64rem) { .header-btn--search { display: inline-flex; padding-inline: 0.875rem; } .header-btn--sos, .header-btn--menu { display: none; } }
.header-btn--search[aria-expanded="true"] { background: var(--c-surface-2); border-color: var(--c-ink-2); }

/* 7. Мобильное меню-лист */
.menu-sheet { position: fixed; left: 0; right: 0; bottom: 0; top: var(--menu-top, var(--header-h)); z-index: 110; overflow-y: auto; overscroll-behavior: contain; background: var(--c-bg); opacity: 0; transform: translate3d(0, -0.5rem, 0); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.menu-sheet.is-open { opacity: 1; transform: none; }
@media (min-width: 64rem) { .menu-sheet { display: none !important; } }
html.is-locked { overflow: hidden; }
.menu-sheet__inner { display: grid; gap: 1.75rem; padding-top: 1rem; padding-bottom: 2.5rem; }
.menu-search { display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 3.5rem; padding: 0 1rem; border: 1px solid var(--c-ink-2); border-radius: var(--radius-m); background: var(--c-surface); color: var(--c-ink-2); font-size: 1.0625rem; text-align: left; }
.menu-search .icon { width: 1.375rem; height: 1.375rem; color: var(--c-ink); }
.menu-nav__list { border-top: 1px solid var(--c-line); }
.menu-nav__link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; padding-block: 0.5rem; border-bottom: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.menu-nav__link .icon { width: 1.5rem; height: 1.5rem; color: var(--c-accent); }
.menu-nav__link[aria-current] { color: var(--c-accent); }
.menu-nav__link[aria-current] .icon { display: none; }
.menu-nav__link[aria-current]::after { content: "вы здесь"; font: 500 0.9375rem/1.3 var(--font-text); color: var(--c-ink-2); }
.menu-sheet__block { display: grid; gap: 0.75rem; }
.menu-sheet__label { font-size: 0.875rem; font-weight: 600; color: var(--c-ink-2); }
.menu-sos { justify-content: flex-start; gap: 0.75rem; min-height: 3.75rem; font-size: 1.125rem; }
.menu-sos b { font-family: var(--font-display); font-size: 1.375rem; font-variant-numeric: tabular-nums; }

/* 8. Поиск (комбобокс) */
.search { position: relative; }
.search__label { display: block; margin-bottom: 0.5rem; font-size: 1rem; font-weight: 600; }
.search__box { position: relative; display: flex; align-items: center; gap: 0.5rem; min-height: 3.75rem; padding: 0.375rem 0.375rem 0.375rem 1rem; border: 1px solid var(--c-ink-2); border-radius: var(--radius-m); background: var(--c-surface); box-shadow: var(--shadow-1); transition: border-color var(--dur-1) var(--ease-in-out); }
.search__box:hover { border-color: var(--c-ink); }
.search__box:focus-within { border-color: var(--c-ink); outline: 3px solid var(--c-focus); outline-offset: 2px; }
.search__icon { width: 1.375rem; height: 1.375rem; color: var(--c-ink-2); }
.search__input { flex: 1; min-width: 0; height: 3rem; padding: 0 0.5rem; border: 0; border-radius: 0; background: transparent; font-size: 1.0625rem; text-overflow: ellipsis; -webkit-appearance: none; appearance: none; }
.search__input:focus, .search__input:focus-visible { outline: none; }
.search__input::placeholder { color: var(--c-ink-2); opacity: 1; }
.search__input::-webkit-search-cancel-button, .search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search__pause { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.75rem; height: 2.75rem; border: 0; border-radius: var(--radius-s); background: transparent; color: var(--c-ink-2); transition: background-color var(--dur-1) var(--ease-in-out), color var(--dur-1) var(--ease-in-out); }
.search__pause:hover { background: var(--c-surface-2); color: var(--c-ink); }
.search__pause .icon { width: 1.125rem; height: 1.125rem; fill: currentColor; stroke: none; }
.search__pause .i-play, .search__pause[aria-pressed="true"] .i-pause { display: none; }
.search__pause[aria-pressed="true"] .i-play { display: block; }
.search__submit { flex: none; min-height: 3rem; }
@media (max-width: 29.9375rem) { .search__submit { width: 3rem; padding: 0; } .search__submit-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .search__icon { display: none; } .search__box { position: static; padding-left: 0.375rem; } .search__input { padding-inline: 0.375rem; } .search__input::placeholder { font-size: 0.875rem; } .search__pause { position: absolute; top: -0.6rem; right: -0.5rem; } }
@media (min-width: 30rem) { .search__submit .icon { display: none; } }
.search__results { position: absolute; left: 0; right: 0; top: calc(100% + 0.5rem); z-index: 60; max-height: min(27rem, 62vh); overflow-y: auto; overscroll-behavior: contain; padding: 0.375rem; border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-surface); box-shadow: var(--shadow-3); opacity: 0; transform: translate3d(0, -0.25rem, 0); transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.search__results.is-open { opacity: 1; transform: none; }
.search__list { margin: 0; padding: 0; list-style: none; }
.search__option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.125rem 0.75rem; min-height: 3.25rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-s); cursor: pointer; }
.search__option:hover { background: var(--c-bg); }
.search__option[aria-selected="true"] { background: var(--c-surface-2); outline: 2px solid var(--c-ink); outline-offset: -2px; }
.search__option > .icon:first-child { width: 1.25rem; height: 1.25rem; color: var(--c-accent); grid-row: span 2; }
.search__option-title { font-weight: 600; line-height: 1.3; }
.search__option-meta { grid-column: 2; font-size: 0.875rem; line-height: 1.35; color: var(--c-ink-2); }
.search__option-go { grid-column: 3; grid-row: 1 / span 2; width: 1.125rem; height: 1.125rem; color: var(--c-ink-2); }
.search__empty { padding: 0.75rem 0.875rem 0.875rem; line-height: 1.5; }
.search__empty .phone { font-size: 1.125rem; min-height: 2.75rem; }
.search-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 105; padding-block: 1.25rem 1.5rem; border-bottom: 1px solid var(--c-line); background: var(--c-bg); box-shadow: var(--shadow-3); opacity: 0; transform: translate3d(0, -0.375rem, 0); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.search-panel.is-open { opacity: 1; transform: none; }
.search-panel .search { max-width: 48rem; }

/* 9. Первый экран главной */
.hero { padding-block: clamp(1.5rem, 0.75rem + 2.5vw, 3rem) clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.hero__grid { display: grid; gap: 2rem; }
@media (min-width: 64rem) { .hero__grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: clamp(3rem, 1rem + 3.5vw, 5rem); align-items: center; } }
.hero__title { max-width: 16ch; }
.hero__lead { margin-top: 1.25rem; max-width: 34rem; }
.hero__search { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); max-width: 40rem; }
.hero__quick { margin-top: 1.25rem; max-width: 40rem; }
.hero__quick-label { margin-bottom: 0.5rem; font-size: 0.875rem; color: var(--c-ink-2); }
.hero__visual { position: relative; display: grid; }
.hero-art { position: relative; overflow: hidden; aspect-ratio: 56 / 50; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-surface); }
.hero-art svg { width: 100%; height: 100%; }
.now-card { position: relative; z-index: 2; width: min(100%, 22rem); margin: -3.5rem auto 0 -1.5rem; padding: 1rem 1.25rem 1.125rem; border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-surface); box-shadow: var(--shadow-3); }
@media (max-width: 39.9375rem) { .now-card { order: -1; width: auto; margin: 0 0 0.75rem; box-shadow: var(--shadow-1); } .hero-art { aspect-ratio: 3 / 2; } }
@media (min-width: 40rem) and (max-width: 63.9375rem) { .hero__visual { width: min(100%, 36rem); margin-left: auto; } }
@media (min-width: 64rem) { .now-card { margin: -6.5rem 1.5rem 0 auto; } }
.now-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--c-ink-2); }
.now-card__label { font: 600 0.875rem/1.3 var(--font-text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink); }
.now-card__place { margin-top: 0.5rem; font-size: 0.9375rem; font-weight: 500; }
.now-card .status { margin-top: 0.125rem; }
.now-card .status__text { font-family: var(--font-display); font-size: 1.3125rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.now-card__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px solid var(--c-line); font-size: 0.9375rem; }
.now-card__row b { font-variant-numeric: tabular-nums; }
.now-card .footnote { margin-top: 0.375rem; }

/* Порядок прорисовки героя: реки → фасады → листья → траектория → самолёт */
.js .hero-art svg[data-draw].is-drawn .draw { transition-duration: var(--dd, 1000ms); transition-delay: var(--dl, 0ms); }
.art-rivers { --dl: 0ms; --dd: 1000ms; }
.art-town { --dl: 420ms; --dd: 900ms; --fill-delay: 1250ms; }
.art-town .draw:nth-of-type(2) { --dl: 520ms; }
.art-town .draw:nth-of-type(3) { --dl: 620ms; }
.art-town .draw:nth-of-type(4) { --dl: 720ms; }
.art-town .draw:nth-of-type(5) { --dl: 820ms; }
.art-town .draw:nth-of-type(6) { --dl: 920ms; }
.art-oak { --dl: 1050ms; --dd: 850ms; --fill-delay: 1750ms; }
.art-flight { --dl: 1500ms; --dd: 700ms; }
.art-plane { --dl: 1950ms; --dd: 520ms; --fill-delay: 2250ms; }

/* 10. Плитки bento */
.bento { display: grid; gap: 0.75rem; }
.bento > li { position: relative; display: grid; }
.bento > li::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-l); box-shadow: var(--shadow-2); opacity: 0; transition: opacity var(--dur-1) var(--ease-out); pointer-events: none; }
.bento > li:hover::before { opacity: 1; }
@media (min-width: 40rem) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .bento--actions > :is(:first-child, :last-child) { grid-column: 1 / -1; } }
@media (min-width: 64rem) { .bento--actions { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); } .bento--actions > :first-child { grid-column: auto; grid-row: span 2; } }
.tile { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 0.5rem; min-height: 100%; padding: 1.25rem 1.25rem 1.125rem; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-1); transition: border-color var(--dur-1) var(--ease-in-out), transform var(--dur-1) var(--ease-out); }
@media (min-width: 64rem) { .tile { padding: 1.5rem 1.5rem 1.25rem; } }
.tile:hover { border-color: color-mix(in srgb, var(--c-ink-2) 45%, var(--c-line)); }
.tile:active { transform: scale(0.98); }
:is(.tile--accent, .tile--wide):active { transform: translateY(1px); }
.tile__icon { width: 1.75rem; height: 1.75rem; color: var(--c-accent); stroke-width: 1.5; }
.tile__body { display: grid; gap: 0.5rem; }
.tile__title { font-size: 1.25rem; line-height: 1.2; }
.tile__link { color: inherit; text-decoration: none; }
.tile__link::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.tile__text { position: relative; font-size: 0.9375rem; line-height: 1.5; color: var(--c-ink-2); }
.tile__text a { position: relative; z-index: 1; color: var(--c-ink); }
.tile__text .phone { display: inline; min-height: 0; font: inherit; font-weight: 600; }
/* На телефоне плитки-ссылки без номеров — строки: иконка, заголовок, стрелка */
@media (max-width: 39.9375rem) { .tile--row { flex-direction: row; align-items: center; gap: 0.875rem; min-height: 4.5rem; padding: 0.75rem 1rem; box-shadow: none; } .tile--row .tile__body { flex: 1; } .tile--row .tile__title { font-size: 1.125rem; } .tile--row :is(.tile__text, .tile__foot span) { display: none; } .tile--row .tile__foot { margin: 0; padding: 0; } }
.tile__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--c-ink-2); }
.tile__arrow { width: 1.5rem; height: 1.5rem; color: var(--c-accent); transition: transform var(--dur-1) var(--ease-out); }
.tile:hover .tile__arrow { transform: translateX(4px); }
.tile .tile__link:focus-visible { outline-offset: 4px; }
@supports selector(:has(*)) { .tile .tile__link:focus-visible { outline: none; } .tile:has(.tile__link:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 3px; } }
.tile--accent { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); box-shadow: var(--shadow-2); }
.tile--accent:hover { border-color: var(--c-brand); background: var(--c-brand); }
.tile--accent .tile__icon, .tile--accent .tile__text, .tile--accent .tile__foot, .tile--accent .tile__arrow { color: var(--c-on-accent); }
.tile--accent .tile__body { margin-top: auto; padding-top: 2.5rem; gap: 0.75rem; max-width: 26rem; }
.tile--accent .tile__title { margin-top: 0; padding-top: 0; }
.tile--accent .tile__foot { margin-top: 0.5rem; }
@media (min-width: 64rem) { .tile--accent { padding: 2rem 2rem 1.75rem; } .tile--accent .tile__title { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem); line-height: 1.1; max-width: 12ch; } .tile--accent .tile__text { font-size: 1.0625rem; max-width: 26rem; } }
.tile__decor { position: absolute; right: -1.5rem; top: -1.5rem; z-index: -1; width: 8rem; height: auto; }
@media (min-width: 40rem) { .tile__decor { right: -1.25rem; top: -1.25rem; width: 12rem; } }
.tile__big { font-family: var(--font-display); font-size: clamp(3rem, 2.4rem + 2vw, 4.25rem); font-weight: 600; line-height: 0.95; letter-spacing: -0.02em; color: var(--c-accent); font-variant-numeric: tabular-nums; }
.tile__big a { color: inherit; text-decoration: none; }
.tile__big a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.1em; }
.tile__big a, .tile__line a { position: relative; z-index: 1; }
.tile__line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px solid var(--c-line); font-size: 0.9375rem; color: var(--c-ink-2); }
.tile__line .phone { font-size: 1.0625rem; color: var(--c-ink); }
.tile--emergency .tile__title, .tile--emergency .tile__big { margin-top: 0.25rem; }
.tile--emergency .tile__body { gap: 0.625rem; }
@media (min-width: 64rem) { .tile--emergency { flex-direction: row; align-items: center; gap: 2rem; } .tile--emergency .tile__body { flex: 1; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "t b l" "x b l"; align-items: center; gap: 0.25rem 2.5rem; } .tile--emergency .tile__title { grid-area: t; margin: 0; } .tile--emergency .tile__big { grid-area: b; margin: 0; } .tile--emergency .tile__text { grid-area: x; } .tile--emergency .tile__line { grid-area: l; margin: 0; padding: 0.75rem 0 0.75rem 2.5rem; border-top: 0; border-left: 1px solid var(--c-line); } .tile--emergency .tile__foot { margin: 0; padding: 0; } }

/* 11. Новости */
.news { display: grid; gap: 2.5rem; }
@media (min-width: 64rem) { .news { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; } }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; font-size: 0.875rem; color: var(--c-ink-2); }
.news-meta__rubric { font-weight: 650; color: var(--c-ink); }
.news-meta__dot { width: 0.25rem; height: 0.25rem; border-radius: 50%; background: currentColor; }
.news-feature { position: relative; display: grid; gap: 1rem; }
.news-feature__art { overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-surface); }
.news-feature__art svg { width: 100%; height: 100%; }
.news-feature__title { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.18; }
.news-feature__text { color: var(--c-ink-2); max-width: 40rem; }
.news-link { color: inherit; text-decoration: none; }
.news-link::after { content: ""; position: absolute; inset: 0; }
.news-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.news-feature:hover .news-feature__art { border-color: var(--c-ink-2); }
.news-source { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 500; color: var(--c-ink-2); }
.news-source .icon { width: 1rem; height: 1rem; }
.news-list { border-top: 1px solid var(--c-ink); }
.news-item { position: relative; display: grid; gap: 0.375rem; padding-block: 1.125rem 1.25rem; border-bottom: 1px solid var(--c-line); }
.news-item__title { font-family: var(--font-text); font-size: 1.125rem; font-weight: 600; line-height: 1.38; letter-spacing: 0; }
.news-item .news-source { margin-top: 0.125rem; }

/* 12. Тёмная секция приёма */
.reception { display: grid; gap: 3rem; }
@media (min-width: 64rem) { .reception { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(3rem, 1rem + 4vw, 6rem); } }
.reception__status { margin-top: 1.75rem; padding: 1.25rem 0 1.375rem; border-block: 1px solid var(--c-line-on-brand); }
.reception__place { font-size: 1rem; font-weight: 500; margin-bottom: 0.5rem; }
.reception__status .footnote, .reception__note { margin-top: 0.75rem; }
.reception__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 2rem; }
.reception .contact-list { margin-top: 1.5rem; }
.reception__side .table caption { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.01em; }
.contact-list { display: grid; gap: 0; margin: 1.75rem 0 0; }
.contact-list > div { display: grid; gap: 0.125rem; padding-block: 0.875rem; border-bottom: 1px solid var(--c-line); }
.contact-list > div:first-child { padding-top: 0; }
.contact-list dt { font-size: 0.875rem; font-weight: 500; color: var(--c-ink-2); }
.contact-list dd { margin: 0; font-size: 1.0625rem; }
.section--brand .contact-list > div { border-color: var(--c-line-on-brand); }
.section--brand .contact-list dt { color: var(--c-on-brand); }

/* 13. Цифры */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.25rem; }
@media (max-width: 22.4375rem) { .stats { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 56rem) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.5rem 3rem; } }
.stat { position: relative; display: grid; align-content: start; gap: 0.5rem; padding-top: 1.25rem; }
.stat__rule { position: absolute; top: 0; left: 0; width: 100%; height: 0.375rem; overflow: visible; }
.stat__rule line { stroke: var(--c-illu-gold); }
.stat__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.375rem; font-family: var(--font-display); font-size: var(--fs-num); font-weight: 600; line-height: 1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat__unit { font-size: 0.42em; font-weight: 600; letter-spacing: 0; color: var(--c-ink-2); }
.stat__label { margin-top: 0.25rem; font-size: 1.0625rem; font-weight: 500; line-height: 1.4; max-width: 24ch; }
.stat__source { font-size: 0.875rem; line-height: 1.45; color: var(--c-ink-2); max-width: 30ch; }
.stats--compact { gap: 1.5rem 1.25rem; }
.stats--compact .stat__value { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); }
@media (min-width: 40rem) and (max-width: 63.9375rem) { .stats--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .stats--row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2rem 1.5rem; } .stats--row .stat__value { font-size: clamp(1.875rem, 1rem + 1.4vw, 2.5rem); } .stats--row .stat__label { font-size: 1rem; } }
.stats__note { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }

/* 14. Редакционный зигзаг */
.story { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.story__item { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 56rem) { .story__item { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 0.5rem + 4.5vw, 6rem); } .story__item:nth-child(odd) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .story__item:nth-child(odd) .story__art { order: 2; } .story__item:nth-child(2) .story__body { padding-top: 2rem; } }
.story__art { overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-surface); }
.story__art svg { width: 100%; height: 100%; }
.story__body { display: grid; gap: 0.875rem; align-content: center; max-width: 38rem; }
.story__title { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.15; }
.story__text { color: var(--c-ink-2); }
.story__more { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--c-line); }

/* 15. Справочник служб */
.directory { border-top: 1px solid var(--c-ink); }
.dir-row { display: grid; gap: 0.5rem 2.5rem; padding-block: 1.25rem 1.375rem; border-bottom: 1px solid var(--c-line); }
@media (min-width: 56rem) { .dir-row { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3.6fr); align-items: first baseline; } }
.dir-row__name { font-size: 1.25rem; line-height: 1.25; }
.dir-row__about { color: var(--c-ink-2); }
.dir-row__about p + p { margin-top: 0.25rem; }
.dir-row__contact { display: grid; justify-items: start; gap: 0.125rem; }
@media (max-width: 55.9375rem) { .dir-row__contact { margin-top: 0.25rem; } }
.dir-row__contact .phone { min-height: 2.75rem; }
.dir-row__contact .footnote { margin-top: -0.125rem; }
.hours { display: grid; gap: 0.25rem; margin: 0.875rem 0 0; font-size: 0.9375rem; line-height: 1.45; }
.hours > div { display: grid; grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr); gap: 0.875rem; }
.hours dt { color: var(--c-ink-2); }
.hours dd { margin: 0; color: var(--c-ink); font-variant-numeric: tabular-nums; }

/* 16. Контакты и карта */
.contacts { display: grid; gap: 3rem; }
@media (min-width: 64rem) { .contacts { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 1rem + 4vw, 6rem); align-items: start; } }
.contacts__org { margin-top: 1rem; font-size: var(--fs-lead); line-height: 1.45; max-width: 30rem; }
.contacts dd .phone { font-size: 1.5rem; }
.contacts .contact-list dd a:not(.phone) { display: inline-block; padding-block: 0.75rem; margin-block: -0.625rem; color: var(--c-ink); }
.socials__title { margin-top: 2rem; margin-bottom: 0.75rem; font-size: 1rem; font-family: var(--font-text); font-weight: 600; letter-spacing: 0; }
.map { display: grid; gap: 0.75rem; }
.map__art { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-surface); }
.map__art svg { width: 100%; height: 100%; }
.map__note { margin-top: -0.25rem; }
.map__caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; }

/* 17. Подвал */
.site-footer { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 1.75rem; background: var(--c-brand); color: var(--c-on-brand); --c-focus: var(--c-on-brand); }
.footer__top { display: grid; gap: 2.5rem; }
@media (min-width: 64rem) { .footer__top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 2.75fr); gap: 4rem; } }
.footer__brand { display: grid; gap: 1rem; align-content: start; }
.footer__brand .brand { color: var(--c-on-brand); margin-right: 0; justify-self: start; }
.footer__brand .brand__sub { color: var(--c-on-brand); }
.footer__about { max-width: 22rem; font-size: 0.9375rem; line-height: 1.55; }
.footer__cols { display: grid; gap: 2rem 1.5rem; }
@media (min-width: 22.5rem) and (max-width: 39.9375rem) { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__cols > :last-child { grid-column: 1 / -1; } }
@media (min-width: 40rem) { .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.footer__title { margin-bottom: 0.5rem; font-family: var(--font-text); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.footer__list { display: grid; gap: 0.5rem; }
.footer__list a { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; color: inherit; text-decoration: none; line-height: 1.3; }
.footer__list a:hover { text-decoration: underline; text-underline-offset: 0.22em; }
.footer__list .icon { width: 0.9375rem; height: 0.9375rem; flex: none; }
.footer__socials { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.footer__socials-label { font-size: 0.9375rem; font-weight: 600; }
.footer__bottom { display: grid; gap: 0.375rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--c-line-on-brand); font-size: 0.875rem; line-height: 1.5; }
@media (min-width: 64rem) { .footer__bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } .footer__bottom p:last-child { text-align: right; } }

/* 18. Внутренние страницы: первый экран */
.page-head { padding-block: clamp(2rem, 1.25rem + 3vw, 4rem) clamp(2rem, 1.5rem + 2vw, 3rem); border-bottom: 1px solid var(--c-line); }
.page-head__title { margin-top: 0.875rem; max-width: 20ch; }
.page-head__lead { margin-top: 1rem; max-width: 40rem; }
.page-head .toc-chips { margin-top: 1.75rem; }

/* 19. Таблицы */
.table-block { display: grid; gap: 0.5rem; }
.table-hint { display: none; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--c-ink-2); }
.table-hint .icon { width: 1rem; height: 1rem; }
html[data-a11y="on"] .table-hint { display: flex; }
.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.table-scroll:focus-visible { outline-offset: 2px; border-radius: 0; }
.table { width: 100%; font-size: 1rem; line-height: 1.45; }
.table caption { caption-side: top; padding-bottom: 0.75rem; text-align: left; font-size: 1.0625rem; font-weight: 650; }
.table th, .table td { padding: 0.75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-line); }
.table thead th { padding-block: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--c-ink-2); border-bottom-color: var(--c-ink); }
.table tbody th { font-weight: 600; }
.table td { font-variant-numeric: tabular-nums; }
@media (max-width: 29.9375rem) { .table th, .table td { padding-inline: 0.5rem; } }
.table tr.is-today > * { background: var(--c-surface-2); }
.table .tag { margin-left: 0.5rem; vertical-align: 0.1em; background: var(--c-ink); color: var(--c-bg); }
.section--brand .tag { background: var(--c-on-brand); color: var(--c-brand); }
.section--brand .table :is(th, td) { border-color: var(--c-line-on-brand); }
.section--brand .table thead th { color: var(--c-on-brand); border-bottom-color: var(--c-on-brand); }
.section--brand .table tr.is-today > * { background: var(--c-tint-on-brand); }

/* 22. Лента истории, мозаика мест, группы, люди, заметки */
.timeline { position: relative; padding-left: 2.25rem; }
.timeline__track, .timeline__fill { position: absolute; left: 0.5rem; top: 0.75rem; bottom: 0.75rem; width: 2px; }
.timeline__track { background: var(--c-line); }
.timeline__fill { background: var(--c-accent); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
.timeline__item { position: relative; display: grid; gap: 0.25rem 2rem; padding-bottom: 2.25rem; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before { content: ""; position: absolute; left: -2.25rem; top: 0.6rem; width: 1.125rem; height: 1.125rem; box-sizing: border-box; border: 2px solid var(--c-accent); border-radius: 50%; background: var(--c-bg); }
.section--surface .timeline__item::before { background: var(--c-surface); }
.timeline__year { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.timeline__month { font-family: var(--font-text); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; color: var(--c-ink-2); }
.timeline__text { max-width: 40rem; color: var(--c-ink-2); }
@media (min-width: 56rem) { .timeline { --tl: 13rem; padding-left: 0; } .timeline__track, .timeline__fill { left: calc(var(--tl) + 1rem); } .timeline__item { grid-template-columns: var(--tl) minmax(0, 1fr); column-gap: 2rem; } .timeline__item::before { left: calc(var(--tl) + 0.5rem); } .timeline__item > :not(.timeline__year) { grid-column: 2; padding-left: 1.25rem; } .timeline__year { grid-row: 1 / span 2; padding-right: 0.5rem; text-align: right; } }

.mosaic { display: grid; gap: 0.75rem; }
@media (min-width: 40rem) { .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .place--wide { grid-column: 1 / -1; } }
@media (min-width: 64rem) { .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; } .place--wide { grid-column: span 2; } }
.place { position: relative; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.25rem 1rem; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-surface); }
.place__art { overflow: hidden; margin: -0.25rem -0.25rem 0.5rem; border-radius: var(--radius-m); background: var(--c-surface-2); aspect-ratio: 16 / 9; }
.place__art svg { width: 100%; height: 100%; }
.place__title { font-size: 1.25rem; line-height: 1.2; }
.place__text { font-size: 0.9375rem; line-height: 1.5; color: var(--c-ink-2); }
.place__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--c-line); }
.place__addr { font-size: 0.875rem; color: var(--c-ink-2); }
.place--dark { border-color: var(--c-brand); background: var(--c-brand); color: var(--c-on-brand); --c-focus: var(--c-on-brand); }
.place--dark .place__text, .place--dark .place__addr { color: var(--c-on-brand); }
.place--dark .place__foot { border-color: var(--c-line-on-brand); }

.groups { display: grid; gap: 2rem 2.5rem; }
@media (min-width: 48rem) { .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .groups { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.group__title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; padding-bottom: 0.625rem; border-bottom: 2px solid var(--c-ink); font-size: 1.125rem; }
.group__title .icon { color: var(--c-accent); }
.group__list li { display: flex; gap: 0.625rem; padding-block: 0.3125rem; line-height: 1.45; }
.group__list li::before { content: ""; flex: none; width: 0.375rem; height: 0.375rem; margin-top: 0.55em; border-radius: 50%; background: var(--c-ink-2); }

.people { border-top: 1px solid var(--c-ink); }
.person { display: grid; gap: 0.25rem 2.5rem; padding-block: 1.125rem 1.25rem; border-bottom: 1px solid var(--c-line); }
@media (min-width: 56rem) { .person { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.person__name { font-size: 1.25rem; line-height: 1.25; }
.person__about { color: var(--c-ink-2); }

.note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; padding: 1rem 1.25rem; border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-surface); font-size: 0.9375rem; line-height: 1.5; }
.note > .icon { width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; color: var(--c-accent); }

/* 23. Версия для слабовидящих: длинные слова переносятся, таблицы листаются в своём блоке */
html[data-a11y="on"] { --c-ok: var(--c-ink); --c-ok-on-brand: var(--c-on-brand); --c-line-on-brand: var(--c-on-brand); --c-tint-on-brand: var(--c-brand); --fs-h1: 1.75rem; --fs-h2: 1.5rem; --fs-h3: 1.25rem; --fs-num: 2.25rem; }
html[data-a11y="on"] :is(h1, h2, h3, h4, dd, .link-arrow, .concept-bar a, .news-feature__text, .kicker, .acc__meta, .place__text, .place__addr, .timeline__text, .person__about) { overflow-wrap: anywhere; hyphens: auto; }
html[data-a11y="on"] :is(.section-head--split, .groups, .footer__cols) { grid-template-columns: minmax(0, 1fr); }
html[data-a11y="on"] .footer__list a { display: flex; min-width: 0; }
html[data-a11y="on"] :is(.nowrap, .phone, .stat__value, .utility__place, .tag) { white-space: normal; }
html[data-a11y="on"] .chips--grid { grid-template-columns: minmax(0, 1fr); }
html[data-a11y="on"] .now-card__head { flex-wrap: wrap; }
html[data-a11y="on"] .site-header { position: relative; top: auto; }
html[data-a11y="on"] .utility { height: auto; }
html[data-a11y="on"] .utility__inner { flex-wrap: wrap; padding-block: 0.25rem; }
html[data-a11y="on"] .header-bar__inner { flex-wrap: wrap; padding-block: 0.5rem; }
html[data-a11y="on"] .now-card { width: auto; margin: 0; }
html[data-a11y="on"] .stat { border-top: 1px solid var(--c-line); }
html[data-a11y="on"] .stats { grid-template-columns: minmax(0, 1fr); }
html[data-a11y="on"] .phone { font-size: 1.125rem; }
html[data-a11y="on"] :is(.tile--accent .tile__title, .status--lg .status__text, .story__title, .tile__big) { font-size: 1.5rem; }
html[data-a11y="on"] .news-feature__title { font-size: 1.25rem; }
html[data-a11y="on"] .tile__title { font-size: 1.125rem; }
html[data-a11y="on"] .tile--row { flex-direction: column; align-items: stretch; }
html[data-a11y="on"] .tile--row .tile__text { display: block; }
html[data-a11y="on"] .tag { border: 1px solid var(--c-ink); }
html[data-a11y="on"] .timeline__fill { transform: none; }
/* Ховеры со сменой фона выключены: в двух цветах они сливаются */
html[data-a11y="on"] :is(.btn--accent, .tile--accent):hover { background: var(--c-accent); border-color: var(--c-accent); }
html[data-a11y="on"] .btn--light:hover { background: var(--c-on-brand); }
html[data-a11y="on"] .link:hover { color: var(--c-accent); }
html[data-a11y="on"] :is(.site-nav__link, .search__pause):hover { background: transparent; }
html[data-a11y="on"] .table tr.is-today > * { background: transparent; }
html[data-a11y="on"] .search__box:focus-within { outline: 3px solid var(--c-focus); }

/* 24. Знак и иллюстрации */
.mark-bg { fill: var(--c-brand); }
.mark-line { fill: none; stroke: var(--c-illu-gold-soft); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mark-line--thin { stroke-width: 2.2; }
.site-footer .mark-bg { fill: var(--c-tint-on-brand); stroke: var(--c-line-on-brand); stroke-width: 1; }
.illu { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.i-gold { stroke: var(--c-illu-gold); }
.i-gold-soft { stroke: var(--c-illu-gold-soft); }
.i-red { stroke: var(--c-illu-red); }
.i-ink { stroke: var(--c-illu-ink); }
.f-gold-soft { fill: var(--c-illu-gold-soft); stroke: none; }
.f-red { fill: var(--c-illu-red); stroke: none; }
.f-paper { fill: var(--c-surface); }
.illu-label { fill: var(--c-illu-ink); stroke: var(--c-surface); stroke-width: 5; paint-order: stroke; font-family: var(--font-text); font-weight: 600; }
.illu-label--red { fill: var(--c-illu-red); }
.illu-label--strong { stroke: none; font-weight: 650; }
.js .illu[data-draw] .draw { stroke-dasharray: 1 1.05; stroke-dashoffset: 1.02; }
@media (prefers-reduced-motion: reduce) { .js .illu[data-draw] .draw { stroke-dashoffset: 0; } }