/* Сайт фонда «Серафим». Mobile-first, без фреймворков и сторонних шрифтов.
   Правило: ни у одного блока нет фиксированной ширины больше 360px; ширины — в % и max-width. */
*, *::before, *::after { box-sizing: border-box; }

/* Шрифты (#101622, design §7.2): только свои WOFF-подмножества из fonts/ (scripts/build-fonts.py), внешних адресов нет.
   Neutraface 2 Text — цифры и латиница (без U+0020: иначе файл качался бы на каждой странице); Noto Sans — кириллица,
   пробел и знаки; Noto Sans Georgian — только на страницах с грузинским текстом (unicode-range).
   Georgian Regular в наборе нет: слот 400 занимает NotoSansGeorgian-Medium (чуть жирнее).
   font-display: optional, а не swap: подмена шрифта после первой отрисовки сдвигает раскладку (замер 29.10: CLS 0.0001-0.021
   на главной), а tests/layout-101292.test.js (101292-T5) требует сдвиг 0. optional не подменяет шрифт после отрисовки:
   не успел за ~100 мс — страница остаётся на запасном шрифте, со следующего захода шрифт берётся из кэша.
   Исключение — Noto Sans Georgian: swap (#102458). При optional на устройстве без системного грузинского шрифта
   буквы оставались пустыми. Грузинский — короткие строки реквизитов, подмена их шрифта раскладку не сдвигает (check-layout). */
@font-face { font-family: "Neutraface 2 Text"; font-style: normal; font-weight: 400; font-display: optional;
  src: url("../fonts/neutraface-book-latin.woff") format("woff");
  unicode-range: U+0030-0039, U+0041-005A, U+0061-007A, U+00C0-00FF; }
@font-face { font-family: "Neutraface 2 Text"; font-style: normal; font-weight: 700; font-display: optional;
  src: url("../fonts/neutraface-bold-latin.woff") format("woff");
  unicode-range: U+0030-0039, U+0041-005A, U+0061-007A, U+00C0-00FF; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 400; font-display: optional;
  src: url("../fonts/noto-sans-cyr-400.woff") format("woff");
  unicode-range: U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+00A0-00BF, U+0301, U+0400-04FF, U+2010-2015, U+2018-201E, U+2022, U+2026, U+2116; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 700; font-display: optional;
  src: url("../fonts/noto-sans-cyr-700.woff") format("woff");
  unicode-range: U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E, U+00A0-00BF, U+0301, U+0400-04FF, U+2010-2015, U+2018-201E, U+2022, U+2026, U+2116; }
@font-face { font-family: "Noto Sans Georgian"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/noto-sans-georgian-400.woff") format("woff");
  unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F; }
@font-face { font-family: "Noto Sans Georgian"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/noto-sans-georgian-700.woff") format("woff");
  unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F; }
/* Запасное лицо с метриками Noto Sans (hhea 1069/-293/0 при 1000 upm): меньше прыжок строк до загрузки шрифта.
   size-adjust не задан — подбор измерением отложен (#101622, design C9). */
@font-face { font-family: "Noto Sans Fallback"; font-weight: 400; src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  ascent-override: 106.9%; descent-override: 29.3%; line-gap-override: 0%; }
@font-face { font-family: "Noto Sans Fallback"; font-weight: 700; src: local("Arial Bold"), local("Liberation Sans Bold"), local("Helvetica Bold");
  ascent-override: 106.9%; descent-override: 29.3%; line-gap-override: 0%; }

:root {
  /* бренд: значения равны config/clients/seraphim/brand/tokens.yaml colors (#101622, design §1.1) */
  --bg: #F5F8FB;
  --surface: #FFFFFF;
  --ink: #231F20;
  --ink-muted: #4A5866;
  --accent: #0E74BC;
  --accent-ink: #FFFFFF;
  /* производные — литеральный hex, не color-mix/var: #102432 считает контраст по значениям :root */
  --accent-soft: #E2EEF7;   /* 12% accent на surface */
  --accent-strong: #12639D; /* 80% accent + 20% ink: hover и текст на подложке accent-soft (5.40:1) */
  --line: #D6D7DA;          /* 15% ink на bg */
  --sand: #3D3A3B;          /* 88% ink на surface */
  --danger: #A3342A;        /* прежний красный ошибок формы; в бренде красного нет */
  /* фон страницы (#102454, слово оператора 29.10 13:11): миллиметровка поверх лёгкого градиента. Конец градиента =
     --accent-soft; линии — акцент с прозрачностью; самая тёмная точка — пересечение крупных линий (все 4 слоя сетки
     на --bg-end, R2 ревью): ink 11.2:1, ink-muted 5.0:1, ссылки --link 5.0:1 — считает tests/background-102454.test.js */
  --bg-end: #E2EEF7;
  --grid-minor: rgba(14, 116, 188, 0.03); /* 8 px */
  --grid-major: rgba(14, 116, 188, 0.06); /* 40 px */
  --link: #145A8D;          /* 70% accent + 30% ink: ссылки текста на фоне-сетке (--accent там 2.9:1) */
  /* прежние имена (их читает #102432) — литералы со значениями бренда */
  --paper: #F5F8FB;
  --muted: #4A5866;
  --font-body: "Neutraface 2 Text", "Noto Sans", "Noto Sans Georgian", "Noto Sans Fallback", sans-serif;
  --header-max: 80rem;
}

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

body {
  margin: 0;
  min-height: 100vh; /* градиент до низа окна и на короткой странице */
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to right, var(--grid-minor) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-minor) 1px, transparent 1px),
    linear-gradient(160deg, var(--bg) 0%, var(--bg-end) 100%);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px, 100% 100%;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.55;
  overflow-wrap: anywhere;
  overflow-x: hidden; /* защитная сетка; основной механизм — отсутствие широких блоков */
}

/* ссылки текста — --link: на фоне #102454 --accent и --accent-strong ниже 4.5:1 на пересечении линий сетки */
a { color: var(--link); }
a:hover { color: var(--ink); }

/* Шапка (#101622, design §4): контейнер .site-header__inner шире колонки текста (80rem), одинаков на всех страницах.
   Узкий экран: строка 1 — логотип и кнопка «Разделы» (<details>, работает без JS, панель под шапкой), ниже кнопки.
   Все правила кнопок шапки — под .site-header: у героя главной та же разметка site-actions, его вид не меняется. */
.site-header { position: relative; background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header__inner {
  max-width: var(--header-max);
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 1rem;
  align-items: stretch;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

.brand .photo-slot, .brand .photo { width: 2.75rem; flex: 0 0 2.75rem; aspect-ratio: 1; border-radius: 50%; margin: 0; }
/* Логотип-картинка фонда (img/brand, design §6.4): горизонтальный, по высоте; круг выше остаётся только заглушке. */
.brand .photo--logo { width: auto; height: 3rem; flex: 0 0 auto; aspect-ratio: auto; border-radius: 0; margin: 0; object-fit: contain; }
.site-header .brand { grid-column: 1; min-width: 0; }
/* Имя фонда остаётся в DOM (ссылка и поиск), на экране его заменяет надпись логотипа. */
/* #102707: короткая подпись основной кнопки («Помочь») и пункт «Друзья Серафима» в меню — только на телефоне. */
.action__short, .site-nav a.site-nav__action { display: none; }
.site-nav__more { display: contents; }
.brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.site-menu { grid-column: 2; justify-self: end; display: flex; align-items: center; }
.site-menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
}
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu[open] > summary { background: var(--accent-soft); color: var(--accent-strong); }
.site-nav { font-size: 0.95em; }
.site-menu[open] .site-nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 0.5rem 1rem color-mix(in srgb, var(--ink) 12%, transparent);
}
.site-nav a { display: flex; align-items: center; min-height: 2.75rem; color: var(--ink); font-weight: 600; text-decoration: none; }
.site-nav a:hover { color: var(--accent-strong); text-decoration: underline; }
/* Раскрывающийся пункт меню (#102451): группа страниц карты (nav_group) под одной подписью. Узкий экран — подпункты
   списком с отступом внутри панели «Разделы»; десктоп — выпадающая панель под подписью. */
.site-sub > summary { list-style: none; display: flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; color: var(--ink); font-weight: 600; cursor: pointer; }
.site-sub > summary::-webkit-details-marker { display: none; }
.site-sub > summary::after { content: ""; width: 0.45em; height: 0.45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.15em) rotate(45deg); }
.site-sub[open] > summary::after { transform: translateY(0.1em) rotate(-135deg); }
.site-sub > summary:hover, .site-sub[open] > summary { color: var(--accent-strong); }
/* Отступ подпунктов — только у раскрытой панели «Разделы»: у закрытой панель сжата в ноль у правого края экрана,
   и любой отступ вылезал бы за экран (check_layout, переполнение на 360). */
.site-sub__list { display: flex; flex-direction: column; border-left: 2px solid var(--accent-soft); }
.site-menu[open] .site-sub__list a { padding-left: 1rem; }
.lang-switch { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; }
.lang-switch a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-header .site-actions {
  grid-column: 1 / -1;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem;
}
.site-header .action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.4rem 0.6rem;
  text-align: center;
  line-height: 1.25;
}
/* Телефон (< 48rem, #102707, вариант В — выбор оператора 02.11 15:58): шапка в одну строку — горизонтальный логотип,
   одна небольшая залитая кнопка «Помочь» (на /pomoch/) и иконка меню из трёх полосок (подпись «Разделы» остаётся
   для чтения с экрана). «Друзья Серафима» и «Контакты» — пунктами открытого меню; «Связаться с фондом» в шапке
   не печатается. Было: две строки, 126 px из 640 (пятая часть экрана). */
@media (max-width: 47.99rem) {
  .site-header__inner { grid-template-columns: minmax(0, 1fr) auto auto; gap: 0 0.5rem; align-items: center; padding: 0.375rem 0.75rem; }
  .brand .photo--logo { height: 2.75rem; }
  .site-header .brand { min-width: 2.75rem; min-height: 2.75rem; }
  .site-header .site-actions { grid-column: 2; grid-row: 1; display: flex; }
  .site-header .action--secondary { display: none; }
  .site-header .action { min-height: 2.75rem; padding: 0 1rem; border-radius: 0.5rem; font-size: 0.9375rem; font-weight: 700; white-space: nowrap; }
  .action__full { display: none; }
  .action__short { display: inline; }
  .site-menu { grid-column: 3; grid-row: 1; }
  .site-menu > summary {
    width: 2.75rem; height: 2.75rem; min-height: 2.75rem; padding: 0; border: 0; border-radius: 0.5rem;
    font-size: 0; color: var(--ink); overflow: hidden;
    --bars:
      linear-gradient(currentColor, currentColor) center calc(50% - 0.4375rem) / 1.5rem 2px no-repeat,
      linear-gradient(currentColor, currentColor) center 50% / 1.5rem 2px no-repeat,
      linear-gradient(currentColor, currentColor) center calc(50% + 0.4375rem) / 1.5rem 2px no-repeat;
    background: var(--bars), var(--surface);
  }
  /* Общее правило открытого меню (выше) задаёт background целиком и стёрло бы полоски — повторяем их. */
  .site-menu[open] > summary { color: var(--accent-strong); background: var(--bars), var(--accent-soft); }
  .site-nav a.site-nav__action { display: flex; }
}
:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }

/* Десктоп (>= 72rem): одна строка — логотип, 8 пунктов меню (один раскрывающийся), языки, две кнопки. Меню раскрыто без кнопки через
   ::details-content; браузер без него остаётся с мобильным меню (деградация, не поломка). */
@media (min-width: 72rem) {
  @supports selector(::details-content) {
    .site-header__inner { grid-template-columns: auto minmax(0, 1fr) auto auto; padding: 0.75rem 1.5rem; }
    .site-menu > summary { display: none; }
    .site-menu { grid-column: 2; justify-self: stretch; justify-content: center; }
    .site-menu::details-content { content-visibility: visible; display: block; }
    .site-menu .site-nav, .site-menu[open] .site-nav {
      position: static;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0 0.75rem;
      font-size: 0.875em;
      padding: 0;
      background: none;
      border: 0;
      box-shadow: none;
    }
    .site-nav a, .site-sub > summary { min-height: 2.5rem; }
    .site-sub { position: relative; }
    .site-sub__list {
      position: absolute;
      top: 100%;
      left: -1rem;
      z-index: 30;
      min-width: 14rem;
      padding: 0.4rem 1rem;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 0.5rem;
      box-shadow: 0 0.5rem 1rem color-mix(in srgb, var(--ink) 12%, transparent);
    }
    .site-menu .site-sub__list a, .site-menu[open] .site-sub__list a { padding-left: 0; }
    .lang-switch { grid-column: 3; }
    .site-header .site-actions { grid-column: 4; display: flex; flex-wrap: nowrap; align-items: center; }
    /* #102451: восемь пунктов меню и две кнопки в одну строку с запасом около 30 px на 1280-1440 (замер Playwright). */
    .site-header .action { font-size: 0.9em; }
    .brand .photo--logo { height: 3.25rem; }
  }
}

/* Кнопки шапки из карты сайта (#100825): переносятся строкой ниже, а не расширяют шапку на 360px. */
.site-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.action {
  display: inline-block;
  max-width: 100%;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95em;
}

.action--primary { background: var(--accent); color: var(--accent-ink); }
.action--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-ink); }
/* Основное действие в герое главной (#101307): та же кнопка, что в шапке, крупнее. */
.hero-actions { margin-top: 1rem; }
.hero-actions .action { font-size: 1.05em; padding: 0.6rem 1.2rem; }
.action--secondary { background: var(--surface); color: var(--accent); }
.action--secondary:hover { background: var(--accent-soft); color: var(--accent-strong); }

.page {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 1rem;
}

h1 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); line-height: 1.2; margin: 0.5rem 0 1rem; }
h2 { font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.5rem); margin: 2rem 0 0.75rem; }
h3 { font-size: 1.1em; margin: 0 0 0.5rem; }

.lead { font-size: 1.1em; }

.photo, .photo-slot {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 1rem 0;
  border-radius: 0.75rem;
  object-fit: cover;
}

/* Заглушка вместо фото: спокойный фон, без подписи об отсутствии снимка. */
.photo-slot {
  background:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--surface) 35%, transparent), transparent 45%),
    linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent) 20%, var(--surface)) 55%, color-mix(in srgb, var(--accent) 30%, var(--surface)));
}
.photo-slot--ureki_black_sand { background: linear-gradient(160deg, color-mix(in srgb, var(--sand) 75%, var(--surface)), var(--sand) 60%, color-mix(in srgb, var(--sand) 50%, var(--ink))); }
.photo-slot--logo { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--surface))); }

/* Места под фото (#101307, design §3.2): <figure data-slot> — фото с подписью или видимая заглушка «ждёт …».
   Заглушка: тусклый фон, пунктирная рамка, надпись читается на 360px; пропорции — по ориентации кадра. */
.photo-fig { margin: 1rem 0; max-width: 100%; }
.photo-fig .photo { margin: 0; }
.photo-fig figcaption { font-size: 0.9em; color: var(--ink-muted); margin-top: 0.4rem; }
.photo-fig--wait .photo-slot {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 1rem;
  box-sizing: border-box;
  border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--surface));
  background: var(--accent-soft);
  overflow-wrap: anywhere;
}
.photo-slot--wide { aspect-ratio: 3 / 2; }
.photo-slot--pano { aspect-ratio: 16 / 9; }
.photo-slot--square { aspect-ratio: 1 / 1; max-width: 22rem; }
.photo-slot--tall { aspect-ratio: 4 / 5; max-width: 20rem; }
.photo-slot--doc { aspect-ratio: 1 / 1.414; max-width: 16rem; }
.photo-slot--og { aspect-ratio: 1200 / 630; }
.photo-slot--figure { aspect-ratio: auto; min-height: 4.5rem; }
.photo-slot__badge {
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  background: var(--accent-soft);
  color: var(--ink);
}
.photo-slot__text { color: var(--ink); }
.site-footer__links a { margin-right: 0.75rem; }

.object {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
}

/* Карточки сборов на /pomoch/ (#102250): одна колонка, от 48rem две. Кнопка «помочь» — цель касания не ниже 44 px
   (qa/check_mobile.js меряет её на экране 375 px). */
.sbory { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 1rem 0; }
@media (min-width: 48rem) {
  .sbory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sbor { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; overflow-wrap: anywhere; }
.sbor > * { margin-top: 0; margin-bottom: 0; }
.sbor .more { align-self: flex-start; }
/* /sbory/ (#102453): рамка 3:2 сверху карточки, сумма крупно, кнопка прижата к низу ряда, группа «Откроются позже» компактнее. */
.sbor > .photo-fig { margin: 0; }
.sbor .photo-fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0.5rem; }
.sbor .money { font-size: 1.3em; line-height: 1.3; }
.sbor .sbor-help { margin-top: auto; }
.sbory--later .sbor { padding: 0.75rem; gap: 0.35rem; }
/* Рамки всех пяти карточек — 3:2 во всю ширину карточки (ревью #102453): min-height 0 держит пропорцию, подпись её не растягивает. */
.sbor .photo-fig--wait .photo-slot { min-height: 0; overflow: hidden; }
.sbory--later .money { font-size: 1.05em; }
.sbor-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  align-self: flex-start;
  max-width: 100%;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
}

.money { font-size: 1.05em; }

.progress {
  width: 100%;
  height: 0.6rem;
  border-radius: 1rem;
  background: var(--accent-soft);
  overflow: hidden;
}
.progress span { display: block; height: 100%; background: var(--accent); }

.note { color: var(--muted); font-size: 0.9em; }

.directions, .channels { padding-left: 1.25rem; }
.channels li { margin-bottom: 0.5rem; }
.activity { color: var(--muted); }
.channel-address { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.95em; overflow-wrap: anywhere; }

.cta {
  margin: 2rem 0 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: var(--accent-soft);
}

/* Кнопка пожертвования: селектор намеренно без имени класса кнопки, чтобы при пустом адресе
   имя класса не встречалось в _site/ вовсе — так его ищет output_quality_cmd. */
.cta > a {
  display: inline-block;
  max-width: 100%;
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
}

.contact-cta { margin: 0; }

.legal dl { margin: 0; }
.legal dt { font-weight: 600; margin-top: 0.75rem; }
.legal dd { margin: 0.1rem 0 0; }
.pending { color: var(--muted); font-style: italic; }

.site-footer {
  padding: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9em;
  text-align: center;
}

/* Телефон (< 48rem, #102707): подвал по левому краю, ссылки сеткой в две колонки (на 320 — в одну) — каждая целиком, не рвётся посередине, и не меньше
   44 px по высоте. Было: мелкий текст по центру, «Как проверить фонд» рвалась на две строки посередине. */
@media (max-width: 47.99rem) {
  .site-footer { text-align: left; padding: 1rem 1rem 1.25rem; font-size: 0.95em; }
  .site-footer p { margin: 0 0 0.5rem; }
  .site-footer__links { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); column-gap: 0.75rem; margin: 0; font-size: 0.95em; }
  .site-footer__links a { display: flex; align-items: center; min-height: 2.75rem; margin-right: 0; white-space: nowrap; }
  .site-footer .cookie-settings { min-height: 2.75rem; text-align: left; }
}
/* Баннер согласия (#100358, js/consent.js). Кнопки «Принять» и «Отказать» одинаковы по виду и
   размеру: отказ не прячется и не делается бледнее. Ширина — в %, без фиксированных пикселей. */
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -0.25rem 1rem color-mix(in srgb, var(--ink) 8%, transparent);
}
.consent-banner[hidden] { display: none; }
.consent-banner p { max-width: 44rem; margin: 0 auto 0.75rem; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; max-width: 44rem; margin: 0 auto; }
.consent-btn {
  flex: 1 1 8rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 0.375rem;
  background: var(--accent-soft);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
/* Телефон (< 48rem, #102707): плашка не больше ~1/5 экрана — мельче текст, кнопки в одну строку по 44 px.
   Было: 218 px из 640 (треть экрана). */
@media (max-width: 47.99rem) {
  .consent-banner { padding: 0.625rem 1rem; }
  .consent-banner p { font-size: 0.8125rem; line-height: 1.4; margin-bottom: 0.5rem; }
  .consent-actions { flex-wrap: nowrap; gap: 0.5rem; }
  .consent-btn { flex: 1 1 0; min-height: 2.75rem; padding: 0.4rem 0.75rem; }
}
.cookie-settings {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Форма подписки (#100740). Сообщение об ошибке без JS: подсказка видна, когда браузер пометил поле
   как неверное после попытки отправки (:user-invalid). */
.intake-form .field { margin: 0 0 1rem; }
.intake-form label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.intake-form input[type="email"], .intake-form input[type="text"], .intake-form select {
  width: 100%;
  max-width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  font: inherit;
  background: var(--surface);
}
.intake-form .field--check { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; }
.intake-form .field--check input { margin-top: 0.35rem; flex: 0 0 auto; }
.intake-form .field--check label { flex: 1 1 0; min-width: 0; font-weight: 400; margin: 0; }
.intake-form .field-error { display: none; flex-basis: 100%; margin-top: 0.25rem; color: var(--danger); font-size: 0.95em; }
.intake-form input:user-invalid { border-color: var(--danger); outline: 2px solid var(--danger); }
.intake-form input:user-invalid ~ .field-error { display: block; }
.intake-form button {
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
}
/* Honeypot: невидим и недоступен человеку, остаётся в форме для ботов. */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ── Главная-хаб (#101095). Живо, плотно, спокойно: карточки на белом, мягкая тень при наведении, без
   анимаций сверх перехода цвета и сдвига на 2px. Ширины — в % / rem и minmax(): на 360px всё в одну колонку,
   горизонтальной прокрутки нет. ── */
.page--hub { max-width: 68rem; }

.icon { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; }

.hub-hero {
  margin: 0 0 1.5rem;
  padding: 1.25rem;
  border-radius: 1rem;
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--surface) 60%, transparent), transparent 40%),
    linear-gradient(135deg, var(--accent-soft), var(--bg));
}
.hub-hero h1 { margin-top: 0; }
.hub-hero p { max-width: 44rem; }
.hub-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; }
.hub-jump a {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none;
  font-size: 0.95em;
}
.hub-jump a:hover, .hub-jump a:focus-visible { border-color: var(--accent); }

.hub-block { margin: 2rem 0; scroll-margin-top: 1rem; }
.hub-block h2 { margin-top: 0; }

/* Плитки «Что мы делаем» / «Как помочь» */
.tiles, .hub-grid, .places-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--surface);
}
.tile h3 { margin: 0.35rem 0 0.25rem; }
.tile p { margin: 0 0 0.5rem; }
.tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.7rem;
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.tile__more { margin-top: auto; font-weight: 600; }
.tile--accent { border-color: var(--accent); background: linear-gradient(180deg, var(--surface), var(--accent-soft)); }
.tile__figure strong { font-size: 1.35em; color: var(--accent-strong); }

/* Карточки всех разделов: вся карточка — ссылка (растянутая ссылка), фокус виден */
.hub-group { margin: 1.25rem 0 0.6rem; color: var(--muted); font-size: 0.95em; text-transform: uppercase; letter-spacing: 0.04em; }
.hub-card {
  position: relative;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.hub-card:hover, .hub-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0.4rem 1.2rem color-mix(in srgb, var(--ink) 8%, transparent);
  transform: translateY(-2px);
}
.hub-card__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.hub-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hub-card__link:focus-visible { outline: none; }
.hub-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.hub-card__icon { color: var(--accent); display: inline-flex; }
.hub-card__text { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.95em; }
.hub-card--help { background: linear-gradient(180deg, var(--surface), var(--accent-soft)); }
.hub-latest { position: relative; z-index: 1; margin: 0.75rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--line); font-size: 0.95em; }
.hub-latest__title { margin: 0 0 0.3rem; font-weight: 600; color: var(--ink); }
.hub-latest .blog-latest { margin: 0 0 0.4rem; }
.hub-latest li { margin: 0.3rem 0; }
.hub-latest p { margin: 0; }

/* Схема мест. Без JS — сетка карточек мест (тот же вид, что у плиток). */
.place {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--surface);
}
.place__name { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.4rem; }
.place__name .icon { color: var(--accent); }
.place__text { margin: 0 0 0.5rem; }
.place__more { margin: 0; }
.place__photo, .hub-photo { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0.6rem; margin: 0.5rem 0; }

/* Схема (#101292: в разметке с сервера, класс places--js тоже — первая отрисовка равна итоговой, сдвига нет):
   сверху море, полоса чёрного песка, суша; места — кнопки в клетках сетки; под схемой карточка выбранного места.
   Без JS схему прячет и список возвращает <noscript><style> в _includes/base.njk; js/places.js только навешивает выбор. */
.places--js .places-list { display: block; }
.places--js .place { border-color: var(--accent); box-shadow: 0 0.4rem 1.2rem color-mix(in srgb, var(--ink) 6%, transparent); }
.places-scheme {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  padding: 3rem 0.75rem 0.85rem;
  border-radius: 1rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, var(--surface)) 0, color-mix(in srgb, var(--accent) 15%, var(--surface)) 2.1rem,
      var(--sand) 2.1rem, color-mix(in srgb, var(--sand) 80%, var(--surface)) 2.6rem, color-mix(in srgb, var(--sand) 8%, var(--bg)) 2.6rem, var(--bg) 100%);
}
.place-pin {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.place-pin::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.4rem; border-radius: 50%; background: var(--accent); vertical-align: 0.05em; }
.place-pin:hover { border-color: var(--accent); }
.place-pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.place-pin.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.place-pin.is-active::before { background: var(--accent-ink); }

/* Шире телефона — схема сеткой в три колонки по клеткам из _data/places.yaml (--col / --row в style кнопки, content/ru/index.njk). */
@media (min-width: 30rem) {
  .places-scheme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(3.2rem, auto); gap: 0.6rem; }
  .place-pin { grid-column: var(--col, auto); grid-row: var(--row, auto); }
}
@media (min-width: 48rem) {
  .places--js { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
  .places--js .places-scheme { margin: 0; grid-auto-rows: minmax(4.5rem, auto); }
  .hub-hero { padding: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-card, .place-pin { transition: none; }
  .hub-card:hover, .hub-card:focus-within { transform: none; }
}

/* Блог (#101096): только токены сайта, без ширин — на 360 px горизонтального скролла нет. */
.blog-list, .blog-latest, .blog-related, .blog-sources { padding-left: 1.25rem; }
.blog-list { list-style: none; padding-left: 0; }
.blog-item { padding: 0.75rem 0; border-top: 1px solid var(--line); }
.blog-item-title { margin: 0 0 0.25rem; font-size: 1.15em; }
.blog-date { color: var(--muted); font-size: 0.9em; margin: 0 0 0.5rem; }
.blog-latest .blog-date { margin: 0; display: block; }
.blog-tags { margin: 0.5rem 0; }
.blog-tag { display: inline-block; padding: 0.15rem 0.6rem; margin: 0 0.25rem 0.25rem 0; background: var(--accent-soft); color: var(--accent-strong); border-radius: 1rem; text-decoration: none; }
/* #102551: списки и подзаголовок h3 в статье; отступ списка тот же, что у .blog-sources. */
.blog-post ul, .blog-post ol { padding-left: 1.25rem; margin: 0.5rem 0 1rem; }
.blog-post li { margin: 0.25rem 0; }
.blog-post h3 { margin: 1.25rem 0 0.5rem; font-size: 1.1em; }

/* Способы пожертвования на /pomoch/ (#102432, design §4): только переменные :root и color-mix, без hex/rgb.
   Неактивные — серый фон и пунктирная рамка, текст --muted (контраст >= 4.5:1, тест T10), без hover/focus. */
/* Реквизиты на /pomoch/ — по кнопке «Перевод на счёт фонда» (#102452): без #schet в адресе блок скрыт.
   Не display:none: текст остаётся в раскладке (1x1 px, visibility:hidden), чтобы грузинский шрифт юрлица грузился
   сразу (fonts-101622 T13, check-layout) и раскрытие не дёргало вёрстку; на экране и для диктора блока нет. */
.schet:not(:target) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); visibility: hidden; }
.methods__list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.methods__list > li { margin: 0; }
.method { border: 1px solid var(--line); border-radius: 0.5rem; padding: 1rem; background: var(--paper); color: var(--ink); height: 100%; box-sizing: border-box; }
.method__title { margin: 0 0 0.35rem; font-size: 1.05em; font-weight: 700; }
.method__note { margin: 0 0 0.75rem; }
.method--active { border-color: var(--accent); background: var(--accent-soft); }
.method__btn { display: inline-block; max-width: 100%; padding: 0.6rem 1.1rem; border-radius: 0.5rem; background: var(--accent); color: var(--paper); font-weight: 600; text-decoration: none; }
.method__btn:hover { background: var(--ink); color: var(--paper); }
.method--inactive { background: color-mix(in srgb, var(--line) 35%, var(--paper)); border-style: dashed; cursor: default; }
.method--inactive .method__title, .method--inactive .method__note { color: var(--muted); }
.method--inactive .method__note { margin: 0; }
.method--inactive .method__soon { color: var(--muted); font-weight: 600; margin: 0 0 0.35rem; }