/* ==========================================================================
   КУРАК — стили лендинга
   --------------------------------------------------------------------------
   Порядок разделов:
     1. Переменные (цвета, отступы, тени)
     2. Базовый сброс и типографика
     3. Мелкие переиспользуемые части (контейнер, кнопки, заголовки секций)
     4. Шапка и навигация
     5. Секции сверху вниз: hero → цифры → событие → председатель →
        партнёры → новости → призыв к действию
     6. Подвал
     7. Анимации появления
     8. Адаптив (планшет, телефон)

   Метод именования — BEM: .block__element--modifier
   Например .card__title — заголовок внутри карточки,
            .btn--gold  — кнопка в золотом варианте.
   Так по имени класса сразу видно, к чему он относится, и стили
   не «протекают» друг в друга.
   ========================================================================== */


/* ==========================================================================
   1. ПЕРЕМЕННЫЕ
   --------------------------------------------------------------------------
   Все цвета и размеры собраны в одном месте. Если заказчик попросит
   поменять оттенок бордового — правим одну строку здесь, а не сто мест
   по файлу. Это и есть главный смысл CSS-переменных.
   Палитра — из ТЗ, раздел 3.2.
   ========================================================================== */
:root {
  /* Фирменные цвета */
  --burgundy:       #8B1A4A;   /* основной: заголовки, кнопки, акценты */
  --burgundy-dark:  #6E1039;   /* для наведения на кнопку */
  --burgundy-soft:  #F6EAF0;   /* очень светлый — фоновые подложки */
  --gold:           #C4973B;   /* акцент: декор, выделения */
  --gold-dark:      #A87C27;   /* наведение на золотую кнопку */
  /* Отдельный «золотой для текста». Фирменный #C4973B и даже #A87C27
     на белом фоне дают контраст ~3.5:1 — мелкий текст таким цветом
     читается плохо и не проходит норму доступности WCAG AA (нужно 4.5:1).
     #8C6626 даёт ~5.2:1 на белом. Декоративные элементы (линии, иконки)
     остаются ярко-золотыми: к ним требование по контрасту не применяется. */
  --gold-text:      #8C6626;
  --navy:           #1A2E4A;   /* шапка, подвал */
  --navy-deep:      #122034;

  /* Нейтральные */
  --bg:             #F8F9FA;   /* фон страниц из ТЗ */
  --white:          #FFFFFF;
  --text:           #1F2933;   /* основной текст: почти чёрный, но мягче */
  --muted:          #5B6470;   /* второстепенный текст */
  --line:           #E4E7EB;   /* разделители и рамки */

  /* Шрифты (ТЗ п.3.3) */
  --font-head: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Ритм отступов. Кратность 4px делает вёрстку визуально ровной. */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 16px;  --sp-4: 24px;
  --sp-5: 32px;  --sp-6: 48px;  --sp-7: 64px;  --sp-8: 96px;

  --radius:    14px;
  --radius-sm: 8px;

  /* Плавность анимаций.
     --ease — кривая ускорения. Стандартная браузерная (ease) стартует резко
     и так же резко тормозит. Эта кривая наоборот: быстро набирает скорость
     и мягко останавливается, поэтому наведение ощущается «дороже».
     Числа в cubic-bezier — это две контрольные точки кривой разгона;
     подбираются на глаз, менять можно смело.
     --dur  — длительность. Меньше 0.15s глаз не успевает заметить движение,
     больше 0.4s кнопка начинает казаться «тормозящей». 0.28s — золотая
     середина. */
  --ease: cubic-bezier(.33, .85, .3, 1);
  --dur:  .28s;

  --shadow:    0 4px 24px rgba(26, 46, 74, .08);
  --shadow-lg: 0 18px 48px rgba(26, 46, 74, .14);

  --wrap: 1180px;              /* максимальная ширина контента */
}


/* ==========================================================================
   2. БАЗА
   ========================================================================== */

/* border-box означает: padding и border входят в заданную ширину.
   Без этого блок шириной 300px с padding 20px реально займёт 340px,
   и вся сетка «поедет». Это первая строка почти любого CSS-файла. */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Отступ для якорей: без него при переходе по #events заголовок
     секции уезжает под липкую шапку. */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;          /* ТЗ: минимум 16px */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;       /* страховка от горизонтальной прокрутки */
}

h1, h2, h3 {
  font-family: var(--font-head);
  line-height: 1.18;
  margin: 0 0 var(--sp-3);
  color: var(--navy);
  letter-spacing: -.01em;
}

p { margin: 0 0 var(--sp-3); }
img { max-width: 100%; height: auto; display: block; }
/* Снимаем маркеры и у нумерованных списков тоже. Нумерованными тегами
   размечены список проектов и шаги подачи заявки: <ol> выбран потому,
   что порядок там осмысленный (хронология, последовательность шагов) —
   это говорит скринридеру «список из N пунктов, пункт 2 из 3». Но
   СВОИ номера браузера нам не нужны: год и цифру в кружке мы рисуем
   сами, и без этого правила рядом появлялся второй, серый «1.». */
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--burgundy); text-decoration: none; transition: color .2s; }
a:hover { color: var(--burgundy-dark); }

/* Единая заметная обводка при навигации с клавиатуры.
   :focus-visible срабатывает только при Tab, но не при клике мышью —
   поэтому кнопки не «моргают» рамкой у обычных пользователей. */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Иконки-заглушки в тексте */
.ico { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* Ссылка «Перейти к содержанию»: спрятана за верхним краем экрана,
   выезжает только когда на неё попадает фокус с клавиатуры. */
.skip-link {
  position: fixed;
  top: -60px; left: var(--sp-3);
  z-index: 200;
  background: var(--burgundy);
  color: var(--white);
  padding: var(--sp-2) var(--sp-4);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  transition: top .2s;
}
.skip-link:focus { top: 0; color: var(--white); }


/* ==========================================================================
   3. ПЕРЕИСПОЛЬЗУЕМЫЕ ЧАСТИ
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.section { padding-block: var(--sp-8); }
.section--tint { background: var(--white); }   /* чередование фонов даёт «воздух» */

.section__head { max-width: 720px; margin-bottom: var(--sp-6); }
.section__head--center { margin-inline: auto; text-align: center; }

.section__title { font-size: clamp(28px, 4vw, 42px); font-weight: 800; }
.section__sub   { color: var(--muted); font-size: 18px; margin: 0; }

/* Маленькая надпись-«надзаголовок» над крупным заголовком.
   Золотая черта слева задаётся через ::before — отдельный тег не нужен. */
.eyebrow {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-head);
  font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 var(--sp-2);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--gold);
  flex: none;
}
.section__head--center .eyebrow { justify-content: center; }

/* --- Кнопки --------------------------------------------------------------
   Общий каркас в .btn, а цвет задают модификаторы. Так все кнопки на
   сайте гарантированно одного размера и формы. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 16px; font-weight: 700;
  text-align: center;
  cursor: pointer;
  /* Все свойства анимируются одинаково — одной длительностью и одной кривой.
     Раньше transform ехал за .15s, а цвет за .2s: подъём кнопки заканчивался
     раньше заливки, и переход выглядел рваным.

     Свойства перечислены поимённо, а не `transition: all`. `all` заставляет
     браузер следить за каждым изменением стиля, включая те, что анимировать
     не надо — это лишняя работа и источник неожиданных подёргиваний. */
  transition:
    background-color var(--dur) var(--ease),
    color            var(--dur) var(--ease),
    border-color     var(--dur) var(--ease),
    box-shadow       var(--dur) var(--ease),
    transform        var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-3px); }

/* Нажатие должно откликаться мгновенно — иначе кнопка кажется «залипшей».
   Поэтому на :active длительность укорачивается до 0.08s. */
.btn:active {
  transform: translateY(-1px) scale(.985);
  transition-duration: .08s;
}

.btn--primary { background: var(--burgundy); color: var(--white); }
.btn--primary:hover { background: var(--burgundy-dark); color: var(--white); box-shadow: var(--shadow-lg); }

.btn--gold { background: var(--gold); color: var(--navy-deep); }
.btn--gold:hover { background: var(--gold-dark); color: var(--white); box-shadow: var(--shadow-lg); }

/* У прозрачных кнопок фон в обычном состоянии не задан вовсе (transparent).
   Браузер не умеет плавно переходить от «нет цвета» к цвету, поэтому
   заливка появлялась рывком. Задаём тот же цвет с нулевой прозрачностью —
   меняется только альфа-канал, и переход становится плавным. */
.btn--outline {
  border-color: var(--burgundy);
  color: var(--burgundy);
  background: rgba(139, 26, 74, 0);
}
.btn--outline:hover {
  background: rgba(139, 26, 74, 1);
  color: var(--white);
  box-shadow: var(--shadow);
}

/* Для тёмного фона (hero): полупрозрачная белая рамка */
.btn--ghost {
  border-color: rgba(255, 255, 255, .55);
  color: var(--white);
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(4px);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 1);
  color: var(--navy);
  border-color: var(--white);
  box-shadow: var(--shadow-lg);
}

.btn--sm { padding: 10px 20px; font-size: 15px; }
.btn--lg { padding: 17px 40px; font-size: 18px; }

/* Кнопка со значком мессенджера.
   inline-flex выстраивает значок и подпись в строку и центрирует их по
   вертикали — при обычном inline-block значок «сидел» бы на базовой линии
   текста и казался съехавшим вниз.
   Значок задан в em, а не в пикселях: он автоматически масштабируется
   вместе с размером шрифта кнопки (у .btn--lg он крупнее). */
.btn--wa {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55em;
}
.btn__ico {
  width: 1.25em; height: 1.25em;
  fill: currentColor;   /* значок всегда того же цвета, что и подпись */
  flex-shrink: 0;
}


/* ==========================================================================
   4. ШАПКА
   ========================================================================== */

.header { position: relative; z-index: 100; }

/* Навигация. position: sticky держит её у верха при прокрутке,
   но, в отличие от fixed, она не выпадает из потока документа. */
.nav {
  position: sticky; top: 0;
  background: var(--navy);
  transition: box-shadow .25s, background .25s;
}
.nav--stuck { box-shadow: 0 6px 24px rgba(0, 0, 0, .22); }

.nav__inner {
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: 76px;
}

/* --- Логотип --- */
.brand { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.brand__mark {
  width: 46px; height: 46px;
  border-radius: 10px;   /* скругляем оранжевую плитку логотипа */
}
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-head);
  font-size: 23px; font-weight: 800;
  letter-spacing: .1em;
  color: var(--white);
}
.brand__sub {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold);
}

/* --- Пункты меню --- */
.menu {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-left: auto;
}
/* :not(.btn) здесь обязателен. Без него селектор .menu > a перебивает
   .btn--gold по «весу» (специфичности): класс+тег весит больше, чем
   один класс. В результате тёмный текст кнопки становился белым —
   белое на золотом почти нечитаемо. */
.menu > a:not(.btn) {
  position: relative;
  color: rgba(255, 255, 255, .88);
  font-size: 16px; font-weight: 500;
  padding-block: 4px;
}
.menu > a:not(.btn):hover { color: var(--white); }

/* Золотая подчёркивающая линия, растущая от центра при наведении.
   Рисуется через ::after, чтобы не добавлять лишних тегов в HTML. */
.menu > a:not(.btn)::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--gold);
  transform: scaleX(0);
  transition: transform .25s;
}
.menu > a:not(.btn):hover::after { transform: scaleX(1); }

/* --- Переключатель языка (RU / EN / KG) ---
   Раньше жил в отдельной полосе над шапкой, теперь — часть навигации.
   Небольшая рамка визуально отделяет его от пунктов меню. */
.lang-switch {
  display: flex; align-items: center; gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
}
/* Все три языка — обычные ссылки <a href="?lang=…">, поэтому им нужно
   снять подчёркивание и задать свой цвет: браузерные стили ссылки здесь
   только мешают. */
.lang {
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700; font-size: 12px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.lang--active { background: var(--white); color: var(--navy-deep); }
.lang:not(.lang--active):hover { background: rgba(255, 255, 255, .14); color: var(--white); }

/* --- Гамбургер (только на телефоне) --- */
.burger {
  display: none;
  margin-left: auto;
  width: 46px; height: 46px;
  padding: 11px;
  background: transparent; border: 0; cursor: pointer;
}
.burger span {
  display: block; height: 2px; border-radius: 2px;
  background: var(--white);
  transition: transform .25s, opacity .2s;
}
.burger span + span { margin-top: 6px; }
/* Три полоски превращаются в крестик: верхняя и нижняя поворачиваются
   и съезжаются к центру, средняя исчезает. */
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


/* ==========================================================================
   5.1 HERO
   ========================================================================== */

/* Текст прижат к НИЗУ экрана (align-items: flex-end), а не по центру.
   Причина в фотографии: лица участниц находятся в верхней половине кадра,
   и центрированный заголовок лёг бы прямо на них. Внизу же кадр — это
   одежда, по которой текст читается спокойно.

   Фон-заливка под фотографией нужна на те доли секунды, пока картинка
   ещё грузится: без неё hero мигает белым. */
.hero {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: clamp(560px, 82vh, 780px);
  padding-block: var(--sp-8);
  background: linear-gradient(140deg, var(--navy-deep) 0%, var(--navy) 45%, #4A1636 100%);
  color: var(--white);
  overflow: hidden;
}

/* --- Фотография на фоне ---
   <picture> по умолчанию ведёт себя как обычный текстовый элемент, поэтому
   растягивать надо и его, и вложенный <img>.

   object-fit: cover — «заполни область целиком, лишнее обрежь». Без него
   картинка сплющилась бы под пропорции блока, и лица стали бы кривыми.
   object-position: 50% 26% — какую точку кадра держать в центре видимой
   области. 26% вместо 50% поднимает кадр так, чтобы при обрезке пропадали
   ноги, а не головы. */
.hero__media,
.hero__media img {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
}
.hero__media img {
  object-fit: cover;
  object-position: 50% 26%;
}

/* «Лоскутное одеяло» — узор из CSS-градиентов.
   Каждый linear-gradient рисует цветной треугольник в своей четверти
   квадратной плитки 150x150, background-size повторяет её по всему блоку.
   Узор курака без единой картинки: ноль килобайт трафика.

   Раньше он был самим фоном hero; теперь под ним настоящая фотография,
   поэтому прозрачность снижена с .9 до .18 — узор работает как едва
   заметная фактура ткани поверх снимка, а не спорит с ним. На .35 его
   треугольники читались как дефект съёмки. */
.hero__quilt {
  position: absolute; inset: -10%;
  background-image:
    linear-gradient(135deg, rgba(196, 151, 59, .16) 25%, transparent 25%),
    linear-gradient(225deg, rgba(139, 26,  74, .28) 25%, transparent 25%),
    linear-gradient(315deg, rgba(196, 151, 59, .10) 25%, transparent 25%),
    linear-gradient( 45deg, rgba(180, 72,  42, .20) 25%, transparent 25%);
  background-size: 150px 150px;
  transform: rotate(-8deg);
  opacity: .18;
  pointer-events: none;
}

/* Затемняющая «вуаль» поверх фотографии.
   Снимок студийный, фон у него светло-серый — белый текст на нём просто
   исчезает. Вуаль решает это, но одной равномерной заливкой пришлось бы
   гасить фото целиком, и лица ушли бы в темноту. Поэтому слоёв два:

   1) ВЕРТИКАЛЬНЫЙ — общий тон. Сверху .38, книзу .88: верх кадра, где
      лица, остаётся светлее; низ, где текст, уходит в тёмно-синий.
   2) ГОРИЗОНТАЛЬНЫЙ — «щит» под колонкой с текстом. Слева .66, до 45 %
      ширины держится почти без ослабления и только потом сходит на нет.
      Текст занимает левые ~55 % ширины, и именно там нужна плотность;
      правая четверть фотографии остаётся нетронутой.

   ПОЧЕМУ ЧИСЛА ПОДНЯЛИ: на прежнем снимке фон был тёмный, хватало .52.
   Новый кадр — участницы в БЕЛОМ на светлом фоне, и под строками абзаца
   оказались белые рубашки: белый текст на них почти пропадал. Проверено
   увеличением в браузере, а не на глаз по общему виду страницы.

   Запятая в background перечисляет слои, ПЕРВЫЙ лежит СВЕРХУ. */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      rgba(18, 32, 52, .66)  0%,
      rgba(18, 32, 52, .58) 45%,
      rgba(18, 32, 52, .20) 78%,
      rgba(18, 32, 52, 0)  100%),
    linear-gradient(to bottom,
      rgba(18, 32, 52, .38)  0%,
      rgba(18, 32, 52, .52) 45%,
      rgba(18, 32, 52, .80) 78%,
      rgba(18, 32, 52, .88) 100%);
  pointer-events: none;
}

/* Ширину НЕ ограничиваем: .hero__inner — это .container, и его поля должны
   совпадать с полями шапки, иначе заголовок «уедет» вправо относительно
   логотипа. Длину строк ограничиваем уже у самого текста (см. ниже). */
.hero__inner { position: relative; z-index: 2; }

.hero__title {
  /* clamp(минимум, «резиновое» значение, максимум) — размер плавно
     подстраивается под ширину экрана без единого media-query. */
  font-size: clamp(34px, 6vw, 62px);
  font-weight: 800;
  color: var(--white);
  max-width: 820px;     /* длинная строка тяжело читается — ограничиваем здесь */
  margin-bottom: var(--sp-4);
  text-wrap: balance;   /* не даёт последней строке остаться из одного слова */
}
.hero__title-accent { color: var(--gold); }

.hero__lead {
  font-size: clamp(17px, 2vw, 21px);
  color: rgba(255, 255, 255, .9);
  max-width: 620px;
  margin-bottom: var(--sp-6);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }


/* ==========================================================================
   5.2 ЦИФРЫ
   ========================================================================== */

/* auto-fit + minmax = сетка сама решает, сколько колонок влезет.
   На широком экране будет 4 колонки, на планшете 2, на телефоне 1 —
   и всё это без единого media-query.

   Раньше цифры были отдельной белой полосой сразу под hero. Теперь они
   живут внутри секции «О КУРАК», поэтому отделяем их от текста
   отступом и тонкой линией сверху. */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}

.stat {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--radius);
  transition: background .25s;
}
.stat:hover { background: var(--burgundy-soft); }

.stat__ico { width: 32px; height: 32px; fill: var(--gold); margin-bottom: var(--sp-2); }
.stat__num {
  font-family: var(--font-head);
  font-size: clamp(38px, 5vw, 52px); font-weight: 800;
  line-height: 1;
  color: var(--burgundy);
  /* Цифры одинаковой ширины: при «прокрутке» счётчика число не дёргается. */
  font-variant-numeric: tabular-nums;
}
.stat__label {
  margin-top: var(--sp-2);
  font-size: 15px; color: var(--muted);
  max-width: 190px;
}


/* ==========================================================================
   5.3 БЛИЖАЙШЕЕ СОБЫТИЕ
   ========================================================================== */

.event {
  display: grid;
  grid-template-columns: 190px 1fr 250px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.event__date {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--sp-5) var(--sp-3);
  background: linear-gradient(160deg, var(--burgundy), #5E0F31);
  color: var(--white);
  font-family: var(--font-head);
  text-align: center;
}
.event__day   { font-size: 60px; font-weight: 800; line-height: 1; }
.event__month { font-size: 19px; font-weight: 600; margin-top: 4px; }
.event__year  { font-size: 14px; color: var(--gold); letter-spacing: .16em; margin-top: 6px; }

.event__body { padding: var(--sp-5); }

/* Иллюстрация в карточке события.
   Третья колонка карточки. Картинка декоративная: всё, что она
   сообщает, уже написано рядом текстом, поэтому у неё пустой alt
   и aria-hidden — скринридер её пропустит, а не прочитает «изображение».

   object-fit: contain, а НЕ cover. Сначала стоял cover — и он срезал
   выступающую: панель узкая и высокая, рисунок почти квадратный,
   и cover вырезал из него вертикальную полосу по центру. Главное
   коварство в том, что высота карточки зависит от длины описания
   события: поменяется текст — поменяется и то, что окажется за кадром.
   contain показывает рисунок целиком при любой высоте, а свободное
   место остаётся фоном панели. */
.event__art {
  display: flex; align-items: center; justify-content: center;
  background: var(--burgundy-soft);
  border-left: 1px solid var(--line);
  padding: var(--sp-4);
}
.event__art img {
  width: 100%; height: auto;
  max-height: 100%;
  object-fit: contain;
}

.event__tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--burgundy-soft);
  color: var(--burgundy);
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  margin-bottom: var(--sp-2);
}
.event__title { font-size: clamp(22px, 3vw, 30px); font-weight: 700; }
.event__text  { color: var(--muted); max-width: 660px; }

.event__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: 15px; color: var(--muted);
}
.event__meta li { display: flex; align-items: center; gap: var(--sp-2); }
.event__meta .ico { fill: var(--gold-dark); }


/* ==========================================================================
   5.4 СЛОВО ПРЕДСЕДАТЕЛЯ
   ========================================================================== */

/* Блок «О КУРАК» на главной. Раньше здесь была сетка «фото слева, текст
   справа»; фотографию и цитату председателя убрали, поэтому остался один
   текстовый столбец с ограниченной длиной строки. 70 символов — предел,
   за которым глазу трудно находить начало следующей строки. */
.about-lead { max-width: 70ch; margin-bottom: var(--sp-7); }
.about-lead__text { color: var(--muted); font-size: 18px; margin-bottom: var(--sp-5); }
.about-lead .section__title { margin-bottom: var(--sp-4); }


/* ==========================================================================
   5.5 ПАРТНЁРЫ
   ========================================================================== */

/* ==========================================================================
   5.5 БЕГУЩАЯ ЛЕНТА ПАРТНЁРОВ
   --------------------------------------------------------------------------
   Как устроена бесшовная прокрутка:

   .track__viewport  — «окошко», в котором всё видно (overflow: hidden)
     └ .track__rail  — длинная дорожка, она и едет влево
         ├ .track__line  (оригинал)
         └ .track__line  (точная копия, aria-hidden)

   Дорожка сдвигается ровно на -50% своей ширины. Так как обе половины
   одинаковые, в момент, когда анимация доходит до конца и мгновенно
   возвращается в начало, картинка на экране не меняется — переход
   незаметен. Это стандартный приём для «бесконечной» ленты.
   ========================================================================== */

.track {
  background: var(--white);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--line);
  overflow: hidden;   /* страховка от горизонтальной прокрутки страницы */
}

/* Заголовок нужен скринридерам и поисковикам, но визуально он тут лишний.
   Прячем его так, чтобы он остался доступен: clip-path обрезает элемент
   до нуля, но не удаляет его из дерева доступности (в отличие от
   display: none, который скрыл бы его и от скринридера тоже). */
.track__title {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Базовое состояние — без JavaScript: копии ленты нет, поэтому анимацию
   не включаем (лента просто уехала бы, оставив пустоту). Вместо этого
   разрешаем прокрутить логотипы пальцем или колесом мыши. */
.track__viewport { overflow-x: auto; }

/* Класс .track--live ставит JS сразу после того, как создал вторую
   половину дорожки. Только тогда включается бесшовная прокрутка. */
.track--live .track__viewport {
  overflow: hidden;
  /* Плавное «растворение» логотипов у краёв — лента не обрывается резко.
     mask-image делает края прозрачными. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.track__rail {
  display: flex;
  width: max-content;            /* дорожка шире экрана — это нормально */
}
.track--live .track__rail { animation: marquee 42s linear infinite; }

/* Останавливаем ленту при наведении и при фокусе с клавиатуры,
   чтобы можно было спокойно рассмотреть логотип. */
.track__rail:hover,
.track__rail:focus-within { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.track__line {
  display: flex; align-items: center;
  gap: clamp(32px, 6vw, 76px);
  padding-inline: clamp(16px, 3vw, 38px);
}

.track__item {
  display: flex; align-items: center; gap: var(--sp-2);
  flex: none;
  /* ТЗ: «Серые при загрузке, цветные при наведении».
     Сейчас значки одноцветные, поэтому меняем насыщенность цвета
     и прозрачность — эффект тот же, а когда придут настоящие
     цветные логотипы, grayscale заработает как задумано. */
  color: var(--muted);
  filter: grayscale(1);
  opacity: .68;
  transition: color .3s, filter .3s, opacity .3s;
}
.track__item:hover { color: var(--burgundy); filter: grayscale(0); opacity: 1; }

/* Значки нарисованы линиями (stroke), а не заливкой (fill).
   currentColor означает «тот же цвет, что у текста рядом» — поэтому
   при наведении значок и подпись меняют цвет вместе, одним правилом. */
.track__logo svg {
  display: block;
  width: 46px; height: 46px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Отдельные части значков закрашиваются целиком (звёзды ЕС,
   треугольник «play»). Для них — класс .fill. */
.track__logo svg .fill { fill: currentColor; }

.track__name {
  font-family: var(--font-head);
  font-size: 16px; font-weight: 700;
  white-space: nowrap;
}


/* ==========================================================================
   5.6 КАРТОЧКИ НОВОСТЕЙ
   ========================================================================== */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--sp-4);
}

.card {
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* Обложка-заглушка: тот же лоскутный узор, но у каждой карточки
   свой поворот и оттенок, чтобы три карточки не выглядели близнецами.
   Когда появятся фото — заменить на <img class="card__cover">. */
/* Обложки карточек — рисованные иллюстрации из img/*.svg.
   РАНЬШЕ здесь лежали четыре CSS-градиента, рисовавшие лоскутный узор.
   Узор был честной заглушкой «фотографий нет», но на карточках он читался
   как абстрактная заливка: по обложке нельзя было понять, о чём карточка.
   Теперь каждая обложка показывает сюжет — наставничество, онлайн-торговлю,
   форум.

   ПОЧЕМУ SVG, А НЕ ФОТО: снимков с мероприятий заказчик не передавал,
   а ставить стоковые чужие фотографии на официальный сайт нельзя.
   Рисунок честен: он иллюстрирует, а не выдаёт себя за документальный кадр.

   ПОЧЕМУ ЭТО ФОНОМ, А НЕ ТЕГОМ <img>: карточки повторяются на двух
   страницах (главная и «Новости»). Фон задаётся здесь один раз — в разметку
   лезть не нужно, и она не может разъехаться между страницами.

   Вес всех четырёх иллюстраций вместе — около 5 КБ: это текст, а не
   пиксели, поэтому они резкие на любом экране и не требуют второй версии
   для Retina. Через docs/build_assets.py они не проходят — сжимать
   нечего. */
.card__cover {
  height: 180px;
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.card__cover--1 { background-image: url("../img/cover-mentorship.svg"); }
.card__cover--2 { background-image: url("../img/cover-ecommerce.svg"); background-color: var(--burgundy); }
.card__cover--3 { background-image: url("../img/cover-forum.svg");     background-color: var(--gold-dark); }

.card__body {
  padding: var(--sp-4);
  display: flex; flex-direction: column;
  flex: 1;   /* карточки в ряду тянутся до одинаковой высоты */
}
.card__meta { font-size: 14px; color: var(--muted); margin-bottom: var(--sp-2); }
.card__cat  { color: var(--gold-text); font-weight: 600; }
.card__title { font-size: 20px; font-weight: 700; }
.card__text  { color: var(--muted); font-size: 16px; flex: 1; }
.card__link  { font-weight: 600; font-family: var(--font-head); font-size: 15px; }
.card__link:hover span { padding-left: 4px; }


/* ==========================================================================
   5.7 ПРИЗЫВ К ДЕЙСТВИЮ
   ========================================================================== */

.cta {
  position: relative;
  padding-block: var(--sp-8);
  background: linear-gradient(135deg, var(--burgundy) 0%, #5E0F31 60%, var(--navy) 100%);
  color: var(--white);
  text-align: center;
  overflow: hidden;
}
/* Тонкая золотая линия сверху — «шов» лоскутного одеяла */
.cta::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold), transparent 40%, var(--gold) 70%, transparent);
}

.cta__inner { position: relative; max-width: 720px; }
.cta__title {
  color: var(--white);
  font-size: clamp(28px, 4.4vw, 44px); font-weight: 800;
}
.cta__text {
  color: rgba(255, 255, 255, .88);
  font-size: 18px;
  margin-bottom: var(--sp-5);
}


/* ==========================================================================
   6. ПОДВАЛ
   ========================================================================== */

.footer { background: var(--navy); color: rgba(255, 255, 255, .78); font-size: 15px; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.3fr .8fr;
  gap: var(--sp-6);
  padding-block: var(--sp-7);
}

/* Белая подложка под логотипом убрана: вместо неё используется
   img/logo-footer.png, где надпись «kurak» уже перекрашена в кремовый
   и читается прямо на тёмно-синем. Файл делает docs/build_assets.py */
.footer__logo {
  width: 156px; height: auto;
  margin-bottom: var(--sp-4);
}
.footer__about { color: rgba(255, 255, 255, .66); font-size: 15px; margin: 0; }

.footer__title {
  font-family: var(--font-head);
  font-size: 15px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--sp-3);
}

.footer__list li { margin-bottom: var(--sp-2); }
.footer__list a { color: rgba(255, 255, 255, .82); }
.footer__list a:hover { color: var(--gold); }
.footer__list--contacts li { margin-bottom: var(--sp-3); }
.footer__label {
  display: block;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  margin-bottom: 2px;
}

.socials { display: flex; gap: var(--sp-2); }
.socials a {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  transition: background .25s, border-color .25s, transform .2s;
}
.socials svg { width: 20px; height: 20px; fill: rgba(255, 255, 255, .85); }
.socials a:hover { background: var(--gold); border-color: var(--gold); transform: translateY(-3px); }
.socials a:hover svg { fill: var(--navy-deep); }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
  color: rgba(255, 255, 255, .62);
}
.footer__bottom-inner {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  justify-content: space-between;
  padding-block: var(--sp-4);
}
.footer__bottom p { margin: 0; }


/* --- Всплывающая подсказка для ещё не готовых страниц --- */
.toast {
  position: fixed;
  left: 50%; bottom: 28px;
  z-index: 300;
  max-width: min(440px, calc(100vw - 32px));
  padding: 14px 22px;
  background: var(--navy-deep);
  color: var(--white);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 15px;
  text-align: center;
  /* Спрятан: смещён вниз и прозрачен. visibility убирает его из
     доступа для скринридеров, пока он не нужен. */
  transform: translate(-50%, 140%);
  opacity: 0; visibility: hidden;
  transition: transform .35s cubic-bezier(.2, .8, .3, 1), opacity .3s, visibility .3s;
}
.toast--show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }


/* ==========================================================================
   7. ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ
   --------------------------------------------------------------------------
   Класс .reveal вешает JS на секции. Когда секция входит в экран,
   JS добавляет .is-visible и блок плавно всплывает.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Уважаем системную настройку «уменьшить движение»: людям с вестибулярными
   нарушениями анимации мешают. Заодно это страховка от требования ТЗ
   «никаких анимаций, замедляющих загрузку». */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }

  /* Бегущую ленту останавливаем совсем — движущаяся картинка сильнее
     всего мешает людям с вестибулярными нарушениями. Чтобы логотипы
     при этом остались доступны, окошко можно прокрутить пальцем/мышью. */
  .track--live .track__rail { animation: none; }
  .track--live .track__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}


/* ==========================================================================
   8. АДАПТИВ
   --------------------------------------------------------------------------
   Брейкпоинты из ТЗ п.3.4:
     до 1280px — планшет
     до 768px  — телефон (самое важное: большинство заходят с телефона)
   ========================================================================== */

@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }

  /* 190 + 250 px занимают две боковые колонки; на планшете тексту
     события оставалось бы меньше половины ширины карточки. */
  .event { grid-template-columns: 170px 1fr; }
  .event__art { display: none; }
}

@media (max-width: 900px) {
}

@media (max-width: 768px) {

  :root { --sp-8: 60px; --sp-7: 44px; }

  .burger { display: block; }

  /* Меню превращается в выпадающую панель под шапкой.
     max-height анимируется вместо height, потому что height: auto
     браузер анимировать не умеет. */
  .menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    gap: 0;
    margin: 0;
    padding-inline: var(--sp-4);
    background: var(--navy);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .3);
    max-height: 0; overflow: hidden;
    transition: max-height .35s ease, padding .35s ease;
  }
  /* 420px хватало, пока пунктов было четыре. Сейчас их пять плюс
     переключатель языка и кнопка — содержимое занимает ~400px, и запас
     почти исчез: на кыргызском пункт переносится на вторую строку, и
     нижняя часть меню обрезалась бы. max-height — это ПОТОЛОК, а не
     фиксированная высота, поэтому поднять его безопасно: меню всё равно
     займёт ровно столько, сколько нужно содержимому. */
  .menu--open { max-height: 560px; padding-block: var(--sp-3); }
  /* Опять :not(.btn) — по той же причине, что и выше: иначе разделительная
     линия прилипла бы и к кнопке «Вступить в КУРАК». */
  .menu > a:not(.btn) { padding-block: 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .menu > a:not(.btn)::after { display: none; }
  .menu__cta { margin-top: var(--sp-3); }

  /* Переключатель языка в выпадающем меню: растягиваем на всю ширину,
     чтобы по кнопкам было удобно попадать пальцем. */
  .lang-switch { align-self: flex-start; margin-top: var(--sp-3); }
  .lang { padding: 7px 16px; font-size: 13px; }

  /* Лента партнёров: на телефоне значки мельче и едут чуть быстрее,
     иначе за один экран проезжает всего один-два логотипа. */
  .track__logo svg { width: 38px; height: 38px; }
  .track__name { font-size: 14px; }
  .track--live .track__rail { animation-duration: 26s; }
  /* Наведения на телефоне нет — показываем ленту сразу «в цвете». */
  .track__item { filter: none; opacity: 1; color: var(--navy); }

  .nav__inner { min-height: 66px; position: relative; }
  .brand__mark { width: 40px; height: 40px; }
  .brand__name { font-size: 20px; }

  /* Раньше здесь стояло min-height: auto — высота была ровно по тексту.
     С фотографией на фоне так нельзя: на короткий блок влезала бы только
     полоска снимка. Отдаём hero примерно три четверти экрана телефона,
     но не меньше 520 px, чтобы участницы поместились целиком. */
  .hero { min-height: max(520px, 76vh); padding-block: var(--sp-7); }
  /* 18 % поднимало кадр так, что сверху оставалась полоса одеяла,
     а участницы уходили под текст. Новый вертикальный файл уже обрезан
     по композиции, поэтому держим его почти по центру. */
  .hero__media img { object-position: 50% 34%; }

  /* Вуаль на телефоне — ТОЛЬКО вертикальная.
     На компьютере второй, горизонтальный слой затемняет левые ~55 %
     под колонкой текста, а правая часть снимка остаётся светлой. На
     экране шириной 390 px «левых 55 %» не существует: текст идёт во всю
     ширину, и горизонтальный слой накрывал фотографию целиком — от
     кадра оставался тёмный прямоугольник. Поэтому здесь оставляем один
     градиент сверху вниз: лица вверху видны, текст внизу читается. */
  .hero::after {
    background: linear-gradient(to bottom,
      rgba(18, 32, 52, .30)  0%,
      rgba(18, 32, 52, .55) 38%,
      rgba(18, 32, 52, .82) 70%,
      rgba(18, 32, 52, .90) 100%);
  }
  .hero__actions .btn { flex: 1 1 100%; }   /* кнопки в столбик, во всю ширину */

  /* Дата события переезжает наверх и становится горизонтальной строкой.
     Иллюстрация на телефоне убирается совсем: в одну колонку она
     превратилась бы в широкую полосу, которая отодвигает текст
     и кнопку «Зарегистрироваться» за пределы экрана.
     display: none здесь безопасен — картинка декоративная, ничего,
     кроме настроения, она не несёт. */
  .event { grid-template-columns: 1fr; }
  .event__art { display: none; }
  .event__date { flex-direction: row; align-items: baseline; gap: var(--sp-2); padding: var(--sp-3); }
  .event__day  { font-size: 40px; }
  .event__body { padding: var(--sp-4); }

  /* Кнопки-фильтры на телефоне мельче: иначе пять штук занимают
     половину экрана до того, как человек увидит первую карточку. */
  .chip { padding: 8px 13px; font-size: 14px; }
  .page-hero { padding-block: var(--sp-6); }
  .notice { flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); }

  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-5); padding-block: var(--sp-6); }
  .footer__bottom-inner { flex-direction: column; gap: var(--sp-1); }
}

@media (max-width: 380px) {
  body { font-size: 16px; }
  .container { padding-inline: var(--sp-3); }
}


/* ==========================================================================
   8. ВНУТРЕННИЕ СТРАНИЦЫ
   --------------------------------------------------------------------------
   Всё ниже появилось вместе с многостраничной версией сайта:
   about.html, projects.html, news.html, blog.html, join.html.
   ========================================================================== */

/* --- Шапка внутренней страницы -------------------------------------------
   Заменяет hero с фотографией: на внутренних страницах большая картинка
   только отодвигала бы содержание вниз. Тёмная плашка нужна, чтобы шапка
   сайта (тоже тёмная) не висела в воздухе над белым фоном.

   Узор «лоскутного одеяла» тот же, что в hero, но слабее — он связывает
   страницы между собой и не стоит ни байта трафика. */
.page-hero {
  position: relative;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, #4A1636 100%);
  color: var(--white);
  padding-block: var(--sp-7);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; inset: -20%;
  background-image:
    linear-gradient(135deg, rgba(196, 151, 59, .20) 25%, transparent 25%),
    linear-gradient(225deg, rgba(139, 26,  74, .30) 25%, transparent 25%),
    linear-gradient(315deg, rgba(196, 151, 59, .12) 25%, transparent 25%),
    linear-gradient( 45deg, rgba(180, 72,  42, .22) 25%, transparent 25%);
  background-size: 150px 150px;
  transform: rotate(-8deg);
  opacity: .22;
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero__title {
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 800;
  margin-bottom: var(--sp-3);
  /* Цвет задан явно: общее правило h1,h2,h3 красит заголовки в тёмно-синий,
     и на тёмной плашке заголовок просто исчезал. Наследование от .page-hero
     тут не работает — у h1 есть собственное значение color, а своё значение
     всегда сильнее унаследованного. */
  color: var(--white);
}
.page-hero__lead {
  max-width: 60ch;
  font-size: clamp(17px, 2vw, 20px);
  color: rgba(255, 255, 255, .84);
  margin: 0;
}

/* Надзаголовок на тёмном фоне: обычный .eyebrow бордовый и на синем
   не читается. Контраст золотого #C4973B на тёмно-синем — около 6:1. */
.eyebrow--light { color: var(--gold); }
.eyebrow--light::before { background: var(--gold); }


/* --- Длинный текст -------------------------------------------------------
   Ограничение ширины — не украшение, а требование читаемости: строки
   длиннее ~75 символов глаз теряет при переходе на следующую. */
.prose { max-width: 72ch; margin-bottom: var(--sp-7); }
.prose p { color: var(--muted); font-size: 18px; }
.prose .section__title { margin-bottom: var(--sp-4); }


/* --- Сетка карточек-направлений ------------------------------------------
   auto-fit + minmax — сетка сама решает, сколько колонок поместится:
   четыре на компьютере, две на планшете, одна на телефоне. Ни одного
   медиазапроса для этого не нужно. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.feature {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.feature__ico { width: 30px; height: 30px; fill: var(--gold); margin-bottom: var(--sp-3); }
.feature__tag {
  display: block;
  font-family: var(--font-head);
  font-size: 30px; font-weight: 800; line-height: 1;
  color: var(--gold); margin-bottom: var(--sp-3);
}
.feature__title { font-size: 19px; font-weight: 700; margin-bottom: var(--sp-2); }
.feature__text  { color: var(--muted); font-size: 16px; margin: 0; }

/* Секция --tint белая, карточки на ней тоже белые — меняем фон,
   иначе границы карточек растворяются. */
.section--tint .feature { background: var(--bg); }


/* --- Проекты: фильтры и карточки -----------------------------------------
   РАНЬШЕ здесь был сплошной список в одну колонку: 31 строка подряд,
   лента времени с точками. Читать такое тяжело — глаз не за что
   зацепить, и страница выглядит бесконечной.

   Теперь это сетка карточек. Каждая карточка несёт три опознавательных
   знака: значок направления, цвет и год. Благодаря им список можно
   просматривать «по диагонали», выхватывая нужное, а не читать подряд.
   ------------------------------------------------------------------------ */

/* Кнопки-фильтры.
   Это именно <button>, а не ссылки: они не ведут на другой адрес,
   а переключают показ на той же странице. Скринридеру состояние
   сообщает атрибут aria-pressed, его переставляет js/main.js. */
.chips {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-head);
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--kind, var(--burgundy)); color: var(--kind, var(--burgundy)); }

/* Число проектов в направлении. Цифры набраны «табличными» цифрами:
   в этом начертании все цифры одной ширины, и кружки со счётчиками
   не дёргаются при разных числах. */
.chip__n {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
/* Нажатая кнопка заливается цветом своего направления. */
.chip--on {
  background: var(--kind, var(--burgundy));
  border-color: var(--kind, var(--burgundy));
  color: var(--white);
}
.chip--on:hover { color: var(--white); }
.chip--on .chip__n { background: rgba(255, 255, 255, .22); color: var(--white); }

/* Цвет направления задаётся один раз переменной --kind и дальше
   используется и кнопкой, и карточкой, и значком. Поменять цвет
   направления = поправить одну строку. Все цвета — из палитры ТЗ п.3.2
   плюс терракота, которая уже работает в лоскутном узоре. */
.chip--mentorship, .pcard--mentorship { --kind: #8B1A4A; }
.chip--training,   .pcard--training   { --kind: #A87C27; }
.chip--forum,      .pcard--forum      { --kind: #1A2E4A; }
.chip--research,   .pcard--research   { --kind: #B4482A; }
.chip--culture,    .pcard--culture    { --kind: #6E1039; }

/* Строка «Показано: N проектов» для скринридера и для глаз. */
.pcards__status {
  min-height: 1.5em;
  margin-bottom: var(--sp-3);
  color: var(--muted);
  font-size: 15px;
}

/* Сетка карточек. auto-fill + minmax: число колонок браузер выбирает
   сам по ширине экрана — три на компьютере, две на планшете, одна на
   телефоне. Ни одного медиазапроса для этого не нужно. */
.pcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--sp-4);
}

.pcard {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  /* Цветная полоса сверху — главный опознавательный знак направления.
     Она заметнее значка и работает даже боковым зрением. */
  border-top: 3px solid var(--kind);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* Карточка, скрытая фильтром. Отдельный класс, а не инлайновый стиль:
   так JS не хранит в себе оформление, он только ставит метку. */
.pcard[hidden] { display: none; }

.pcard__head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.pcard__ico { width: 20px; height: 20px; fill: var(--kind); flex: none; }
.pcard__kind {
  font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--kind);
  /* Название направления длинное («Культура и благотворительность»),
     поэтому ему разрешено переноситься, а году — нет. */
  line-height: 1.3;
}
.pcard__year {
  margin-left: auto;
  font-family: var(--font-head);
  font-size: 15px; font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pcard__title {
  font-size: 17px; font-weight: 700; line-height: 1.45;
  margin: 0 0 var(--sp-3);
  /* Длинные слова вроде «предпринимательства» не помещаются в узкую
     карточку и вылезают за край, растягивая страницу. Переносы по
     слогам браузер берёт из атрибута lang у <html> — он меняется
     вместе с языком сайта. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.pcard__donor {
  margin: auto 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: 14px; color: var(--muted);
  overflow-wrap: break-word;
}
/* Отступ после «Донор:» задан стилем, а НЕ пробелом в конце строки
   словаря: невидимый пробел теряется при первой же правке перевода,
   и текст слипается — «ДонорПРООН». */
.pcard__donor-label { color: var(--gold-text); font-weight: 600; margin-right: .4em; }

/* --- Шаги «как подать заявку» -------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
}
.step {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.step__num {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--burgundy); color: var(--white);
  font-family: var(--font-head); font-weight: 700; font-size: 19px;
  margin-bottom: var(--sp-3);
}
.step__title { font-size: 18px; font-weight: 700; margin-bottom: var(--sp-2); }
.step__text  { color: var(--muted); font-size: 16px; margin: 0; }


/* --- Карточки людей и контактов ------------------------------------------ */
.person-grid,
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.person,
.contact {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
}
.person__role,
.contact__label {
  font-size: 14px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--gold-text); font-weight: 600;
  margin-bottom: var(--sp-2);
}
.person__name,
.contact__name {
  font-family: var(--font-head); font-size: 20px; font-weight: 700;
  color: var(--burgundy); margin-bottom: 2px;
}
.person__extra { color: var(--muted); font-size: 15px; margin-bottom: var(--sp-3); }
.person__link,
.contact__value { font-weight: 600; word-break: break-word; }
.contact__ico { width: 24px; height: 24px; fill: var(--gold); margin-bottom: var(--sp-2); }
.contact p { margin: 0 0 var(--sp-1); }


/* --- Пояснительные плашки -------------------------------------------------
   .note — спокойная сноска (например, почему не публикуем список членов).
   .notice — заметная плашка «раздела пока нет». Задачи разные, поэтому
   и выглядят по-разному: сноску не обязательно заметить, заглушку надо. */
.note {
  border-left: 3px solid var(--line);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  color: var(--muted);
  font-size: 15px;
  max-width: 72ch;
}
.note p { margin: 0; }

.notice {
  display: flex; gap: var(--sp-3);
  background: var(--burgundy-soft);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
}
.notice__ico { width: 24px; height: 24px; fill: var(--burgundy); flex: none; margin-top: 2px; }
.notice__title { font-size: 19px; font-weight: 700; margin-bottom: var(--sp-2); color: var(--burgundy); }
.notice__text  { color: var(--text); margin: 0; font-size: 16px; }


/* --- Кнопка по центру под блоком ----------------------------------------- */
.center-cta { text-align: center; margin: var(--sp-6) 0 0; }


/* --- Подсветка текущего пункта меню --------------------------------------
   :not(.btn) — та же предосторожность, что и у остальных правил меню:
   без неё класс перебил бы оформление золотой кнопки «Вступить в КУРАК».
   Подчёркивание рисуется тем же ::after, что и при наведении, — просто
   оно сразу раскрыто. */
.menu > a:not(.btn).is-current { color: var(--white); }
.menu > a:not(.btn).is-current::after { transform: scaleX(1); }


/* ==========================================================================
   9. ПЕЧАТЬ
   Чтобы распечатанная страница не съедала тонну краски на тёмных фонах.
   ========================================================================== */
@media print {
  .nav, .track, .toast, .cta, .socials { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .hero { min-height: auto; background: none; color: #000; }
  .hero::after, .hero__quilt, .hero__media { display: none; }
  .hero__title, .hero__lead { color: #000; }
  .footer { background: #fff; color: #000; }
}