/* base.css — общая разметка всех тем. Цвета, шрифты, радиусы и ритм — переменные; тема (themes/<имя>/theme.css)
   задаёт их и при желании переопределяет отдельные блоки. Шрифты — системные стеки здесь и в теме; набор
   settings.fonts (lib/fonts.mjs, свои файлы static/fonts/) задаёт --font-head и --font-body в конце site.css.
   Без внешних запросов; работает без JS (/site.js — только удобства меню). Сначала телефон (390 px) → планшет → компьютер (до 1440 px). Регистр, кавычки,
   стрелки, номера шагов и разделители рисует CSS — тексты из content/ выводятся целиком (RULES B5, B6).
   Доступность (M2, WCAG 2.2 AA): видимый фокус ≥ 3 : 1 (на тёмной полосе — свой цвет), цель ≥ 24 × 24 px (2.5.8), фокус
   не закрыт панелью внизу экрана и липкой шапкой темы (scroll-padding, 2.4.11), forced-colors, prefers-reduced-motion,
   без потери текста при интервалах 1.4.12 и перестроение на 320 px (1.4.10). Проверка — modules/a11y/check.mjs. */

:root {
  /* значения по умолчанию; тема переопределяет */
  --bg: #ffffff;
  --surface: #f4f4f2;
  --text: #1b1b1a;
  --muted: #5c5c58;
  --line: #e4e4df;
  --line-strong: #c9c9c2;
  --accent: #1f5f8b;
  --accent-hover: #164766;
  --on-accent: #ffffff;
  --dark: #1b1b1a;
  --on-dark: #f3f3ef;
  --on-dark-muted: #c8c8c0;
  --accent-on-dark: #9cc8e6;
  --selection: #cfe3f1;

  --font-head: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --head-weight: 650;
  --head-tracking: -0.015em;
  --eyebrow-case: uppercase;
  --eyebrow-tracking: 0.14em;

  --radius: 0;
  --radius-btn: 0;
  --max: 75rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section: clamp(3.5rem, 9vw, 7rem);
  --measure: 66ch;
  --tap: 2.75rem;
  --h1: clamp(2.4rem, 6.5vw, 4.75rem);
  --h1-page: clamp(2.1rem, 5vw, 3.6rem);
  --h2: clamp(1.7rem, 3.6vw, 2.6rem);
  --h3: 1.25rem;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
/* 2.4.11: якорь и элемент в фокусе прокручиваются с запасом — тема с липкой шапкой задаёт --scroll-top (её высота + запас) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--scroll-top, 1rem); }
:lang(ru), :lang(be), :lang(uk) { quotes: "«" "»" "„" "“"; }
:lang(pl) { quotes: "„" "”" "«" "»"; }
:lang(en) { quotes: "“" "”" "‘" "’"; }
:lang(de) { quotes: "„" "“" "‚" "‘"; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 48rem) { body { font-size: 1.125rem; } }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  line-height: 1.12;
  letter-spacing: var(--head-tracking);
  text-wrap: balance;
  /* длинное слово крупным кеглем («переспрашивать» в h1 на 1440) — перенос с дефисом по языку страницы, а не обрыв
     буквы на новую строку; короткие слова не переносятся */
  hyphens: auto;
  hyphenate-limit-chars: 12 5 5;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* на тёмной полосе рамка фокуса — светлым акцентом (--accent-on-dark к --dark ≥ 4,5 : 1 — test.mjs) */
.cta :focus-visible, .site-notice :focus-visible { outline-color: var(--accent-on-dark); }
main:focus { outline: none; }
::selection { background: var(--selection); color: var(--text); }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.skip-link {
  position: absolute; top: .5rem; left: var(--gutter); z-index: 10;
  padding: .75rem 1.25rem; background: var(--text); color: var(--bg);
  font-weight: 600; text-decoration: none; transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--bg); }
/* текст для экранного диктора, на экране не виден */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.eyebrow {
  display: flex; align-items: center; gap: .6em;
  margin-bottom: 1rem;
  color: var(--accent);
  font-size: .8125rem; font-weight: 650;
  letter-spacing: var(--eyebrow-tracking); text-transform: var(--eyebrow-case);
}

/* ---------- плашка объявления проекта */
.site-notice { background: var(--dark); color: var(--on-dark); font-size: .9375rem; line-height: 1.45; }
.site-notice__text { padding-block: .6rem; }
@media (max-width: 30rem) { .site-notice { font-size: .8125rem; } }

/* ---------- шапка ---------------------------------------------------------------------------------- */
/* телефон: «знак · языки · Меню» одной строкой, под ней — контакты из common.headerContacts; меню длиннее трёх
   пунктов — под кнопкой (<details class="site-menu">), иначе строкой ниже (site-nav). Широкий экран — одна строка;
   не помещается она (много пунктов, длинные подписи) — кнопка меню на месте пунктов: правило для этих ширин дописывает
   сборка в конец site.css (lib/header-fit.mjs, по текстам и этому CSS) — шапка не переносится ни при какой ширине.
   Тема меняет размеры шапки как угодно — сборка считает по итоговому CSS; tools/layout-lint.mjs проверяет. */
.site-header { position: relative; border-bottom: 1px solid var(--line); background: var(--bg); }
.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "brand langs menu" "calls calls calls" "nav nav nav";
  align-items: center; column-gap: .75rem;
  padding-block: .5rem;
}
.brand {
  grid-area: brand; justify-self: start;
  display: inline-flex; align-items: center; gap: .65rem;
  min-height: var(--tap);
  color: var(--text); text-decoration: none;
  font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.2rem; letter-spacing: var(--head-tracking);
}
.brand:hover { color: var(--text); }
.brand, .brand__name { min-width: 0; }               /* длинное название переносится в своей колонке, а не наезжает на языки */
/* телефон: при логотипе название не дублируем (оно в логотипе; ссылка подписана aria-label и alt) — правки IMACON */
@media (max-width: 30rem) { .brand--logo .brand__name { display: none; } }
.brand__logo { height: 2.25rem; width: auto; }
/* SVG-логотип из шаблона (static/logo.svg): название в нём уже нарисовано — текстом оно для диктора и поиска */
.brand--svg .brand__name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.brand--svg .brand__logo { height: 2.75rem; }
.site-nav { grid-area: nav; margin-inline: calc(-1 * .5rem); }
.site-nav__list { display: flex; flex-wrap: wrap; column-gap: .25rem; }
.site-nav__link {
  display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: .5rem;
  color: var(--text); text-decoration: none; font-size: .975rem;
}
.site-nav__link:hover { color: var(--accent); }
.site-nav__link[aria-current="page"] { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45em; }
.langs { grid-area: langs; }
.langs__list { display: flex; gap: .125rem; }
.langs__item {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap);
  color: var(--muted); text-decoration: none; text-transform: uppercase;
  font-size: .8125rem; font-weight: 650; letter-spacing: .08em;
}
.langs__item:hover { color: var(--accent); }
.langs__item[aria-current="true"] { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .5em; }
/* язык — код (pl, uk); название из common.langName («Polski») тема включает так:
   .langs__code { display: none; } .langs__name { display: inline; } */
.langs__name { display: none; padding-inline: .4rem; text-transform: none; letter-spacing: 0; font-size: .9375rem; }

/* контакты в шапке (телефон и т. п.) и кнопки common.actions: кнопка-контур (первая кнопка — с заливкой); на телефоне —
   закреплённой панелью внизу экрана (как у nowa), с отступом под полоску Home (viewport-fit=cover при панели) */
.site-header__calls { grid-area: calls; display: flex; flex-wrap: wrap; gap: .5rem; padding-block: .25rem; }
@media (max-width: 47.99rem) {
  .site-header__calls { position: fixed; inset: auto 0 0; z-index: 30; padding: .5rem max(var(--gutter), env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
    background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -8px 16px -12px rgb(0 0 0 / .3); }
  .site-header__calls > li { flex: 1 1 0; }
  .site-header__calls .call { width: 100%; justify-content: center; background: var(--accent); color: var(--on-accent); }
  body:has(.site-header__calls) { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  /* 2.4.11: элемент в фокусе не уходит под панель внизу экрана */
  html:has(.site-header__calls) { scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
}
.call { display: inline-flex; align-items: baseline; gap: .5rem; min-height: var(--tap); padding: .5rem 1rem; border: 1.5px solid var(--accent); border-radius: var(--radius-btn); color: var(--accent); font-weight: 650; line-height: 1.3; text-decoration: none; white-space: nowrap; }
.call:hover, .call--primary { background: var(--accent); color: var(--on-accent); }
.call__label { font-size: .8125rem; font-weight: 600; }
@media (max-width: 30rem) { .call__label { display: none; } }

/* меню-кнопка на телефоне (без JS): <details> со списком под шапкой */
.site-menu { grid-area: menu; display: none; }
.site-menu__toggle {
  display: inline-flex; align-items: center; gap: .5rem; min-height: var(--tap); padding: 0 .9rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-btn); cursor: pointer; list-style: none;
  font-weight: 600; font-size: .975rem;
}
.site-menu__toggle::-webkit-details-marker { display: none; }
.site-menu__toggle::after { content: "☰"; color: var(--accent); font-size: 1.1em; line-height: 1; }
.site-menu[open] .site-menu__toggle::after { content: "✕"; font-size: .95em; }
.site-menu__nav { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px -16px rgb(0 0 0 / .25); }
.site-menu__link { display: block; padding: .85rem var(--gutter); border-top: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 1.05rem; }
.site-menu__link[aria-current="page"] { color: var(--accent); font-weight: 650; }
@media (max-width: 63.99rem) {
  .site-header--fold .site-nav { display: none; }
  .site-header--fold .site-menu { display: block; }
}
@media (min-width: 64rem) {
  .site-header__inner { grid-template-columns: auto 1fr auto auto; grid-template-areas: "brand nav calls langs"; padding-block: .75rem; }
  .site-nav { justify-self: end; margin-inline: 0 1rem; padding-right: 1rem; border-right: 1px solid var(--line); }
  .site-header--calls .site-nav { border-right: 0; padding-right: 0; }
  .site-header__calls { padding-block: 0; margin-right: 1rem; }
  /* кнопка меню на широком экране (когда её включает правило сборки) — на месте пунктов, список — панелью под ней */
  .site-menu { grid-area: nav; justify-self: end; position: relative; margin-right: 1rem; }
  .site-menu__nav { left: auto; right: 0; top: calc(100% + .5rem); min-width: 16rem; border: 1px solid var(--line); }
  .site-menu__list > li:first-child .site-menu__link { border-top: 0; }
  .site-menu__link { padding: .7rem 1.25rem; }
}

/* ---------- кнопки и ссылки -------------------------------------------------------------------------- */
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .7rem 1.4rem;
  border: 1.5px solid var(--accent); border-radius: var(--radius-btn);
  font-weight: 600; font-size: 1rem; line-height: 1.25; text-decoration: none;
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn--secondary { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn--secondary:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 30rem) { .actions .btn { flex: 1 1 100%; } }
.more { margin-top: 2rem; }
.more__link { font-weight: 600; text-decoration: none; }
.more__link::after { content: " →"; }
.more__link:hover { text-decoration: underline; }
/* 2.5.8 (AA): цель ≥ 24 × 24 px — ссылки списков и подвала (не внутри предложения) — строчным блоком с min-height */
.more__link, .docs__link, a.names__name, .site-footer__nav a, .site-footer__link { display: inline-block; min-height: 24px; }

.photo { overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
/* место для фото ({ "placeholder": T }): рамка и подпись, что снять — не стоковое фото и не пустота */
.photo--stub { display: grid; place-items: center; min-height: 12rem; padding: 1.5rem; text-align: center; border: 2px dashed var(--line-strong);
  background: repeating-linear-gradient(135deg, var(--surface) 0 12px, var(--bg) 12px 24px); }
.photo__stub { max-width: 22rem; font-size: .95rem; color: var(--muted); }

/* «подпись — значение» под заголовком секции (часы, реквизиты, ключевые факты) */
.facts { display: grid; margin: 1.5rem 0 0; border-top: 1px solid var(--line-strong); }
.facts__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem; padding-block: .6rem; border-bottom: 1px solid var(--line); }
.facts__label { color: var(--muted); }
.facts__value { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- герой ------------------------------------------------------------------------------------ */
.hero { padding-block: clamp(3rem, 9vw, 7.5rem) clamp(2.5rem, 7vw, 5.5rem); }
.hero--page { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 4vw, 3rem); }
.hero__inner { display: grid; gap: 2.5rem; align-items: center; }
.hero__title { font-size: var(--h1); }
.hero--page .hero__title { font-size: var(--h1-page); }
.hero__lead { margin-top: 1.5rem; max-width: 40rem; color: var(--muted); font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.55; }
.hero__photo { aspect-ratio: 4 / 5; max-height: 36rem; }
.hero__side { display: grid; gap: 2rem; }
/* цифры в герое: на телефоне — строкой под текстом, на широком экране — колонкой справа */
.hero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 1.5rem 2rem; }
.hero__stat { border-top: 2px solid var(--accent); padding-top: .9rem; }
.hero__stat-value { font-family: var(--font-head); font-weight: var(--head-weight); font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -0.03em; }
.hero__stat-label { margin-top: .5rem; color: var(--muted); font-size: .95rem; }
@media (min-width: 56rem) {
  .hero--side .hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); }
  .hero--stats:not(.hero--photo) .hero__stats { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ---------- секции ----------------------------------------------------------------------------------- */
.section { padding-block: var(--section); border-top: 1px solid var(--line); }
.section__head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section__title { font-size: var(--h2); }
.section__lead { margin-top: 1.25rem; color: var(--muted); font-size: 1.15em; }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.1em; }
.section__photo { margin-top: 2.5rem; aspect-ratio: 3 / 2; }
@media (min-width: 56rem) {
  .section--split .section__inner,
  .section--text .section__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .section--split .section__head,
  .section--text .section__head { margin-bottom: 0; position: sticky; top: 2rem; }
  .section--with-photo .section__photo { grid-column: 2; }
  /* текст в один абзац без фото и фактов — одной колонкой: иначе под заголовком слева 300–600 px пустоты (ревью № 9) */
  .section--text:not(.section--with-photo) .section__inner:not(:has(.prose > p + p, .facts)) { display: block; }
  .section--text:not(.section--with-photo) .section__inner:not(:has(.prose > p + p, .facts)) .section__head { position: static; margin-bottom: 1.5rem; }
  /* одна группа цен — справа от заголовка, как текст: иначе карточка в левой половине и пустота справа (ревью № 10) */
  .section--prices .section__inner:has(.prices__group:only-child) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .section--prices .section__inner:has(.prices__group:only-child) .section__head { margin-bottom: 0; }
  .section--prices .section__inner:has(.prices__group:only-child) .prices { grid-template-columns: 1fr; }
}

/* карточки */
.cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { display: flex; flex-direction: column; gap: .75rem; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--bg); }
.card__title { font-size: var(--h3); }
.card__text { color: var(--muted); }
.card__more { margin-top: auto; padding-top: .5rem; }

/* цифры */
.stats { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .stats { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 3rem; } }
.stat { border-top: 2px solid var(--accent); padding-top: 1.25rem; }
.stat__value { font-family: var(--font-head); font-weight: var(--head-weight); font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1; letter-spacing: -0.03em; }
.stat__label { margin-top: .75rem; color: var(--muted); font-size: .975rem; }

/* список с линейками */
.ruled { border-top: 1px solid var(--line-strong); }
.ruled__item { display: grid; gap: .5rem; padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.ruled__title { font-size: var(--h3); }
.ruled__text { color: var(--muted); }

/* шаги — номера рисует CSS */
.steps { counter-reset: step; display: grid; gap: 2rem; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.step { counter-increment: step; position: relative; padding-top: 3.25rem; }
.step::before { content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0; color: var(--accent); font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.75rem; }
.step__title { font-size: var(--h3); }
.step__text { margin-top: .5rem; color: var(--muted); }

/* люди */
.people { display: grid; gap: 2.5rem; }
@media (min-width: 40rem) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.person__photo { aspect-ratio: 4 / 5; margin-bottom: 1.25rem; }
.person__name { font-size: var(--h3); }
.person__role { margin-top: .25rem; color: var(--accent); font-size: .95rem; font-weight: 600; }
.person__text { margin-top: .75rem; color: var(--muted); }

/* имена (клиенты, партнёры) */
.names { display: grid; gap: 0 2rem; }
@media (min-width: 40rem) { .names { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.names__item { padding-block: 1rem; border-bottom: 1px solid var(--line); }
.names__name { font-weight: 600; }
a.names__name { color: var(--text); text-decoration: none; }
a.names__name:hover { color: var(--accent); text-decoration: underline; }
.names__note { margin-top: .25rem; color: var(--muted); font-size: .95rem; }

/* цитата */
.quote { max-width: 52rem; }
.quote__text p { font-family: var(--font-head); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.3; letter-spacing: var(--head-tracking); }
.quote__text p::before { content: open-quote; }
.quote__text p::after { content: close-quote; }
.quote__by { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: 1.5rem; }
.quote__author { font-weight: 600; }
.quote__role { color: var(--muted); }

/* вопросы */
.faq { border-top: 1px solid var(--line-strong); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; cursor: pointer; font-weight: 600; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; color: var(--accent); font-size: 1.4em; line-height: 1; }
.faq__item[open] .faq__q::after { content: "−"; }
.faq__a { padding-bottom: 1.5rem; color: var(--muted); max-width: var(--measure); }

/* контакты */
.contact-list { display: grid; gap: 1rem; }
.contact { display: grid; gap: .15rem; padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.contact:hover { border-color: var(--accent); color: var(--text); }
.contact__label { color: var(--muted); font-size: .875rem; font-weight: 600; letter-spacing: .04em; }
.contact__value { font-size: 1.2rem; font-weight: 600; color: var(--accent); }
.contact-note { margin-top: 1.25rem; color: var(--muted); }

/* галерея */
.gallery { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gallery .photo img { aspect-ratio: 4 / 3; }
.gallery__caption { padding: .75rem 0 0; color: var(--muted); font-size: .9rem; }

/* документы */
/* цены (из J6): группы колонками; группа — таблица (M2): подпись — заголовок группы, строка «название (пояснение ниже)
   … цена»; на телефоне цена может переноситься (320 px без прокрутки вбок, 1.4.10) */
.prices { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) { .prices { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 3rem; } }
.prices__title { font-size: var(--h3); margin-bottom: 1rem; }
.prices__table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line-strong); }
.prices__caption { caption-side: top; text-align: start; }
.price > th, .price > td { padding-block: .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.price__name { padding-right: 1.5rem; font-weight: 600; text-align: start; }
.price__value { font-weight: 600; white-space: nowrap; color: var(--accent); text-align: end; }
@media (max-width: 30rem) { .price__value { white-space: normal; } }
.price__note { display: block; margin-top: .25rem; color: var(--muted); font-size: .95rem; font-weight: 400; }
.prices__note { margin-top: 1.5rem; color: var(--muted); font-size: .95rem; max-width: var(--measure); }

/* новости и события (из J6): дата, заголовок, место, текст; новость с фото — фото слева на широком экране */
.posts { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.post { padding-block: 1.5rem; border-bottom: 1px solid var(--line); display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .post--media { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 2rem; align-items: start; } }
.post__photo img { aspect-ratio: 4 / 3; }
.post__date { color: var(--muted); font-size: .95rem; }
.post__title { font-size: var(--h3); margin-top: .35rem; }
.post__place { margin-top: .25rem; font-weight: 600; }
.post__text { margin-top: .5rem; max-width: var(--measure); }
.post__more { margin-top: .5rem; }
.posts__empty { color: var(--muted); }

.docs__item { padding-block: 1rem; border-bottom: 1px solid var(--line); }
.docs__link { font-weight: 600; }
.docs__file { color: var(--muted); font-size: .875em; font-weight: 400; white-space: nowrap; }
.docs__note { margin-top: .25rem; color: var(--muted); font-size: .95rem; }

/* тёмная полоса призыва */
.cta { padding-block: clamp(4rem, 9vw, 7rem); background: var(--dark); color: var(--on-dark); }
.cta__inner { max-width: calc(52rem + 2 * var(--gutter)); margin-inline: 0; }
@media (min-width: 75rem) { .cta__inner { margin-inline: auto; max-width: calc(var(--max) + 2 * var(--gutter)); } }
.cta__title { font-size: var(--h2); max-width: 40rem; }
.cta__text { margin-top: 1.25rem; max-width: 38rem; color: var(--on-dark-muted); font-size: 1.125rem; }
.actions--dark .btn--primary { background: var(--accent-on-dark); border-color: var(--accent-on-dark); color: var(--dark); }
.actions--dark .btn--primary:hover { background: var(--on-dark); border-color: var(--on-dark); color: var(--dark); }
.actions--dark .btn--secondary { background: transparent; color: var(--on-dark); border-color: var(--on-dark-muted); }   /* фон темы у .btn--secondary не протекает на тёмную полосу (v2 usa, 15.10) */
.actions--dark .btn--secondary:hover { color: var(--accent-on-dark); border-color: var(--accent-on-dark); }

/* ---------- подвал ----------------------------------------------------------------------------------- */
.site-footer { padding-block: 3.5rem 2.5rem; background: var(--surface); font-size: .95rem; }
.site-footer__inner { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .site-footer__inner { grid-template-columns: 2fr 1fr 2fr; } .site-footer__legal { grid-column: 1 / -1; } }
.site-footer__name { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.2rem; }
.site-footer__role, .site-footer__place { margin-top: .35rem; color: var(--muted); }
.site-footer__nav { display: grid; gap: .35rem; align-content: start; }
.site-footer__nav a { color: var(--text); text-decoration: none; }
.site-footer__nav a:hover { color: var(--accent); }
.site-footer__contacts { display: grid; gap: .75rem; }
.fcontact { display: grid; color: var(--text); text-decoration: none; }
.fcontact__label { color: var(--muted); font-size: .85rem; }
.fcontact__value { font-weight: 600; }
.fcontact:hover .fcontact__value { color: var(--accent); }
.site-footer__legal { display: grid; min-width: 0; gap: .35rem; padding-top: 1.5rem; border-top: 1px solid var(--line-strong); color: var(--muted); font-size: .875rem; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; margin-top: .75rem; }
.site-footer__copyrights { display: grid; gap: .35rem; color: var(--muted); }
.site-footer__copyrights p { margin: 0; }
/* логотипы донора и партнёров (common.footer.logos) — растр на светлом фоне, высота 64 px (типовое требование доноров ≥ 60 px) */
.site-footer__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem clamp(1rem, 3vw, 2rem); width: 100%; max-width: 100%; margin: 0 0 2rem; padding: 0 0 1.5rem; border-bottom: 1px solid var(--line); list-style: none; box-sizing: border-box; }
.site-footer__logo { display: flex; flex: 0 1 8rem; align-items: center; justify-content: center; min-width: 0; height: 64px; }
.site-footer__logo img { display: block; width: auto; height: auto; max-width: min(100%, 8rem); max-height: 64px; object-fit: contain; }
@media (max-width: 30rem) {
  .site-footer__legal { row-gap: 1.5rem; }
  .site-footer__logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 56px; justify-items: center; gap: 24px .75rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; }
  .site-footer__logo { width: 100%; height: 56px; overflow: hidden; }
  .site-footer__logo img { max-width: 100%; max-height: 56px; }
  .site-footer__logo:last-child { grid-column: 1 / -1; width: min(100%, 8rem); }
  .site-footer__links { gap: .75rem 1rem; margin-top: 1rem; }
}
.site-footer__link { color: var(--muted); }
.site-footer__link:hover { color: var(--accent); }

/* ---------- 404 -------------------------------------------------------------------------------------- */
.nf-list { display: grid; gap: 3rem; padding-block: clamp(3rem, 8vw, 6rem); }
.nf + .nf { padding-top: 3rem; border-top: 1px solid var(--line); }
.nf__title { font-size: var(--h1-page); }
.nf__text { margin-top: 1rem; color: var(--muted); max-width: 40rem; }
.nf__links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.5rem; }
.nf__pages { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.nf__page { display: inline-flex; align-items: center; min-height: var(--tap); padding: .4rem .9rem; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); color: var(--text); text-decoration: none; }
.nf__page:hover { border-color: var(--accent); color: var(--accent); }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
/* режим высокой контрастности системы (Windows): цвета задаёт система — фокус, подсветка заглушек и рамки остаются видны */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; }
  .skip-link:focus { outline: 3px solid Highlight; }
  .site-menu__toggle, .btn, .call, .nf__page { border-color: ButtonText; }
}
@media print { .site-header, .site-footer, .skip-link, .cta { display: none; } body { background: #fff; } }

/* Тема «Философия в поисках метода» — по обложке книги В. Мацкевича (Летучий университет, 2026): жёлтый «конус света»
   #FFCB05 под чёрным цилиндром, чёрные контуры, белое поле; заголовки — гротеск, как на обложке; текст — Georgia, как внутри
   книги. Основа — тема expert. Жёлтый — только заливка (кнопки, полоса цитаты, конус): белый и жёлтый вместе — 1,5 : 1,
   поэтому текст на жёлтом и жёлтое на белом — только с чёрным контуром.
   Контраст (WCAG AA, tools/contrast.mjs): text/bg 21:1, muted/bg 7:1, muted/surface 6,4:1, чёрный на жёлтом 13,8:1,
   жёлтый на чёрном 13,8:1, #3D3D3D на жёлтом 7,1:1, on-dark-muted/dark 13,1:1. */
:root {
  --bg: #FFFFFF; --surface: #F5F5F2; --text: #000000; --muted: #595959;
  --line: #D6D6D6; --line-strong: #000000;
  --accent: #000000; --accent-hover: #333333; --on-accent: #FFFFFF;
  --dark: #000000; --on-dark: #FFFFFF; --on-dark-muted: #CCCCCC; --accent-on-dark: #FFCB05;
  --selection: #FFE27A;
  --brand: #FFCB05;
  --font-head: Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-body: Georgia, "Times New Roman", "Noto Serif", "DejaVu Serif", serif;
  --head-weight: 400; --head-tracking: -0.02em;
  --eyebrow-case: none; --eyebrow-tracking: 0.02em;
  --radius: 0; --radius-btn: 999px;
  --measure: 62ch;
  --h1: clamp(2.5rem, 6.2vw, 4.6rem);
  --h2: clamp(1.75rem, 3.4vw, 2.5rem);
}

/* знак: маленький конус — чёрный цилиндр и жёлтый луч (рисунок, не текст) */
.eyebrow::before, .brand::before {
  content: ""; flex: none; width: .8em; height: 1em;
  background: linear-gradient(#000 0 34%, var(--brand) 34%);
  clip-path: polygon(30% 0, 70% 0, 70% 34%, 100% 100%, 0 100%, 30% 34%);
}
.brand { font-weight: 700; letter-spacing: -0.01em; }
.eyebrow { color: var(--text); font-family: var(--font-head); font-size: .95rem; font-weight: 700; }

/* приём 2: кнопка — жёлтая заливка, чёрный текст и чёрный контур 2 px, скругление-«эллипс» (контуры обложки) */
.btn, .call { border-width: 2px; }
.btn--primary, .call--primary, .call:hover { background: var(--brand); border-color: #000; color: #000; }
.btn--primary:hover, .call--primary:hover { background: #000; border-color: #000; color: var(--brand); }
.btn { font-family: var(--font-head); font-weight: 700; padding-inline: 1.6rem; }
.call { font-family: var(--font-head); font-weight: 700; border-color: #000; color: #000; }
:focus-visible { outline-color: #000; }
@media (max-width: 47.99rem) {
  .site-header__calls .call { background: var(--brand); color: #000; border-color: #000; }
}
.actions--dark .btn--primary { border-color: var(--brand); }
.actions--dark .btn--primary:hover { background: #FFFFFF; border-color: #FFFFFF; color: #000; }

/* ---------- герой: название гротеском, как на обложке; обложка справа — предметом, с тенью; цифры — под текстом */
.hero--home { padding-block: clamp(2rem, 6vw, 5rem) clamp(2.5rem, 6vw, 5rem); }
.hero--home .hero__title { max-width: 15ch; line-height: 1.04; }
.hero__lead { color: var(--text); font-style: italic; }
.hero--home .hero__photo {
  aspect-ratio: 960 / 1487; max-height: none; width: 100%; max-width: 15rem; justify-self: center;
  background: #FFFFFF; outline: 1px solid #DCDCDC;
  box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 22px 40px -20px rgb(0 0 0 / .45);
}
.hero--home .hero__photo img { object-fit: contain; }
.hero__stat { border-top: 2px solid #000; }
.hero__stat-value { font-weight: 400; }
.hero__stat-label { color: var(--muted); }
.hero--home .hero__stats { order: -1; }
@media (min-width: 56rem) {
  .hero--home.hero--side .hero__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-template-areas: "text cover" "stats cover";
    align-items: start; row-gap: 3rem;
  }
  .hero--home .hero__side { display: contents; }
  .hero--home .hero__text { grid-area: text; align-self: end; }
  .hero--home .hero__photo { grid-area: cover; max-width: 23rem; justify-self: end; }
  .hero--home .hero__stats { grid-area: stats; align-self: start; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 34rem; }
}

/* ---------- секции */
.section__title { letter-spacing: -0.02em; }
.section__lead { font-size: 1em; }

/* приём 1: «конус света» — цитата в жёлтой линзе с чёрным контуром, как нижний край конуса на обложке
   (вертикальный радиус задан в rem, поэтому на 390 и на 1440 px это дуга, а не «подушка») */
.section--quote, .section--quote + .section { border-top: 0; }
.section--quote { padding-block: clamp(2.5rem, 6vw, 5rem); }
.section--quote .quote {
  max-width: none; margin-inline: auto; text-align: center;
  padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.5rem, 9vw, 9rem);
  background: var(--brand); color: #000;
  border: 2px solid #000; border-radius: 50% / clamp(2.25rem, 5vw, 3.75rem);
}
.section--quote .quote__text p { font-size: clamp(1.4rem, 3vw, 2.35rem); line-height: 1.22; text-wrap: balance; }
.section--quote .quote__by { justify-content: center; font-family: var(--font-head); }
.section--quote .quote__role { color: #3D3D3D; }

/* приём 3: внутри — книжная вёрстка */
.prose { font-size: 1.0625em; line-height: 1.62; }
/* содержание: заголовки глав гротеском, тезисы курсивом, цифры одной ширины */
.ruled { border-top-width: 2px; }
.ruled__title { font-weight: 700; font-size: 1.125rem; letter-spacing: -0.005em; line-height: 1.25; }
.ruled__text { font-style: italic; font-size: .975rem; font-variant-numeric: tabular-nums; }
/* фрагмент — разворот книги: страница на сером поле, колонтитул «Фрагмент», заголовок по центру, абзацный отступ */
#fragment { background: var(--surface); border-top: 0; }
#fragment .section__inner { display: block; max-width: 46rem; padding: clamp(2rem, 7vw, 4.5rem) clamp(1.25rem, 6vw, 4.5rem); background: #FFFFFF; box-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 24px 48px -28px rgb(0 0 0 / .4); }
#fragment .section__head { position: static; max-width: none; margin-bottom: 2rem; text-align: center; }
#fragment .eyebrow { justify-content: center; color: var(--muted); font-family: var(--font-body); font-style: italic; font-weight: 400; font-size: .9rem; }
#fragment .eyebrow::before { display: none; }
#fragment .section__title { font-family: var(--font-body); font-size: clamp(1.5rem, 3vw, 2rem); }
#fragment .section__lead { margin-top: .75rem; font-size: .95rem; }
#fragment .prose { max-width: none; text-align: justify; hyphens: auto; }
#fragment .prose p + p { margin-top: 0; }
#fragment .prose p + p { text-indent: 1.5em; }

/* место для фото — штриховка, рамка пунктиром */
.photo--stub { border-color: #8A8A8A; }

/* ---------- полоса «Скачать книгу»: чёрный цилиндр и жёлтый луч на широком экране (рисунок фоном, текст — слева) */
.cta { position: relative; overflow: hidden; }
.cta__title { font-weight: 400; }
@media (min-width: 64rem) {
  .cta::before {
    content: ""; position: absolute; top: 0; bottom: 0; right: 6%; width: min(24rem, 28%);
    background: var(--brand); clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
  }
  .cta__inner { position: relative; }
}

/* ---------- подвал: белый, чёрная линия сверху */
.site-footer { background: var(--bg); border-top: 2px solid #000; }
.site-footer__name { font-weight: 700; }
.site-footer__legal { border-top-color: var(--line); }


/* ---------- модуль доступности (modules/a11y/a11y.css): панель настроек и сами настройки ---------------------------
   Сборка дописывает этот файл в site.css после темы и шрифтов, если модуль подключён (tools/module.mjs add a11y) и
   settings.a11y.panel ≠ false. Настройки — значения атрибута data-a11y у <html> (ставят a11y.js и скрипт <head>):
   text-1 | text-2 — крупнее текст (125 % / 150 % кегля браузера: всё в rem растёт вместе с ним), contrast — высокий
   контраст (текст ≥ 7 : 1 — проверяет check.mjs), links — подчёркнутые ссылки, motion — без анимаций, spacing —
   интервалы WCAG 1.4.12. Крупный текст и интервалы складывают шапку как на телефоне (знак · языки · кнопка меню, пункты —
   строкой ниже или под кнопкой): расчёт шапки (lib/header-fit.mjs) — для обычного вида, без этих настроек. */

/* без JS панели и ссылки к ней нет: hidden снимает a11y.js */
.a11y[hidden], .a11y__panel[hidden], .skip-link[hidden] { display: none !important; }

.a11y--top { background: var(--surface); border-bottom: 1px solid var(--line); font-size: .875rem; line-height: 1.45; }
.a11y--top .a11y__inner { display: flex; flex-direction: column; align-items: flex-end; padding-block: .25rem; }
.a11y--top .a11y__panel { align-self: stretch; max-width: none; margin-bottom: .5rem; }
.a11y--footer { margin-top: .75rem; color: var(--text); font-size: .9375rem; }

.a11y__toggle, .a11y__option, .a11y__reset {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: var(--tap); padding: .4rem 1rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-btn);
  background: var(--bg); color: var(--text);
  font: inherit; font-weight: 600; line-height: 1.3; text-align: start; cursor: pointer;
}
.a11y--top .a11y__toggle { min-height: 2rem; padding-block: .2rem; }          /* ≥ 24 px (2.5.8): 32 px */
.a11y__toggle:hover, .a11y__option:hover, .a11y__reset:hover { border-color: var(--accent); color: var(--accent); }
/* стрелка раскрытия — рамкой, не знаком (диктор её не читает) */
.a11y__toggle::after { content: ""; flex: none; width: .45em; height: .45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15em) rotate(45deg); }
.a11y__toggle[aria-expanded="true"]::after { transform: translateY(.1em) rotate(-135deg); }

.a11y__panel { display: grid; gap: 1rem; width: 100%; max-width: 48rem; margin-top: .75rem; padding: 1rem 1.25rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); color: var(--text); }
.a11y__note { color: var(--muted); }
.a11y__label { margin-bottom: .5rem; font-weight: 600; }
.a11y__options { display: flex; flex-wrap: wrap; gap: .5rem; }
/* переключатель: квадрат — выключен, галочка и заливка — включён (не только цветом, 1.4.1) */
.a11y__option { font-weight: 500; }
.a11y__option::before { content: ""; flex: none; width: 1em; height: 1em; border: 2px solid currentColor; border-radius: .2em; }
.a11y__option[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.a11y__option[aria-pressed="true"]::before { width: .5em; height: .85em; margin-inline: .25em; border-width: 0 3px 3px 0; border-radius: 0; transform: translateY(-.1em) rotate(45deg); }
.a11y__reset { border-style: dashed; font-weight: 500; }

/* ---------- настройки ---------- */
html[data-a11y~="text-1"] { font-size: 125%; }
html[data-a11y~="text-2"] { font-size: 150%; }

/* крупный текст и интервалы: шапка складывается как на телефоне — пункты строкой ниже знака или под кнопкой меню */
html:is([data-a11y~="text-1"], [data-a11y~="text-2"], [data-a11y~="spacing"]) .site-header__inner { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "brand langs menu" "calls calls calls" "nav nav nav"; }
html:is([data-a11y~="text-1"], [data-a11y~="text-2"], [data-a11y~="spacing"]) .site-nav { justify-self: stretch; margin-inline: -.5rem; padding-right: 0; border-right: 0; }
html:is([data-a11y~="text-1"], [data-a11y~="text-2"], [data-a11y~="spacing"]) .site-header--fold .site-nav { display: none; }
html:is([data-a11y~="text-1"], [data-a11y~="text-2"], [data-a11y~="spacing"]) .site-header--fold .site-menu { display: block; grid-area: menu; margin-right: 0; }
html:is([data-a11y~="text-1"], [data-a11y~="text-2"], [data-a11y~="spacing"]) .site-header__calls { margin-right: 0; }

/* высокий контраст: свои цвета поверх темы (селектор сильнее :root темы); текст ≥ 7 : 1 */
html[data-a11y~="contrast"] {
  --bg: #ffffff; --surface: #f2f2f2; --text: #000000; --muted: #262626;
  --line: #595959; --line-strong: #000000;
  --accent: #0b3d91; --accent-hover: #000000; --on-accent: #ffffff;
  --dark: #000000; --on-dark: #ffffff; --on-dark-muted: #e6e6e6; --accent-on-dark: #ffd60a;
  --selection: #ffd60a;
}
html[data-a11y~="contrast"] :is(.card, .stat, .hero__photo) { box-shadow: none; }
html[data-a11y~="contrast"] :is(.card, .stat) { border: 1px solid var(--line-strong); }
html[data-a11y~="contrast"] .hero--home { background: var(--bg); }

html[data-a11y~="links"] a { text-decoration-line: underline !important; text-decoration-thickness: max(1px, .07em); text-underline-offset: .18em; }

html[data-a11y~="motion"], html[data-a11y~="motion"] *, html[data-a11y~="motion"] *::before, html[data-a11y~="motion"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}

/* интервалы WCAG 1.4.12: строка ≥ 1,5 кегля, буквы 0,12 em, слова 0,16 em, абзацы через 2 кегля */
html[data-a11y~="spacing"] body { line-height: 1.9; }
html[data-a11y~="spacing"] :is(h1, h2, h3, h4) { line-height: 1.5; }
html[data-a11y~="spacing"] body * { letter-spacing: .12em !important; word-spacing: .16em !important; }
html[data-a11y~="spacing"] :is(.prose, .section__body) p + p { margin-top: 2em; }

@media (forced-colors: active) {
  .a11y__option[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: 2px; }
}