/* Стили страницы голосования.

   Правила, которые нарушать нельзя (docs/13-CONTENT-AND-STYLE.md):
   нулевые радиусы везде, ровно одна тень на весь проект, градиентов нет,
   иконок нет — все маркеры текстовые глифы, внешних ресурсов нет.

   Шапка, подшапка и подвал воспроизводят страницу заявок: люди приходят
   оттуда, и две страницы должны читаться как один продукт. Значения сняты
   с живой страницы, а не с описания. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font: 500 17px/1.5 var(--font-text);
  -webkit-text-size-adjust: 100%;
}

/* ── шапка ────────────────────────────────────────────────────────────── */

.hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 40px;
  background: var(--c-surface);
}
.hdr__left { display: flex; align-items: center; gap: 16px; }
.hdr__logo { display: block; height: 52px; width: auto; }
.hdr__rsss {
  font: 700 19px/1.15 var(--font-display);
  letter-spacing: .02em;
  color: var(--c-primary);
}
.hdr__right { font: 500 14px/1.4 var(--font-text); color: var(--c-label); }

/* ── подшапка ─────────────────────────────────────────────────────────── */

.subhdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 40px;
  background: var(--c-dark);
  border-bottom: 4px solid var(--c-dawn);
  color: var(--c-surface);
}
.subhdr__title {
  font: 700 17px/1.3 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .09em;
}
.subhdr__aside { font: 500 13px/1.4 var(--font-text); color: rgba(255, 255, 255, .62); }

/* ── сетка ────────────────────────────────────────────────────────────── */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 44px 32px 72px; }
.wrap--flush { padding-top: 0; }

/* ── типографика ──────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  margin: 0;
  /* Druk заметно уже Montserrat. Рассчитывать, что длинное слово влезет
     в строку, нельзя — поэтому перенос разрешён заранее. */
  overflow-wrap: break-word;
}
/* Информационным страницам нужен h1 для семантики, но не героический
   размер: 68px над коротким текстом читается как крик. */
.page-title { font-size: clamp(32px, 4.4vw, 48px) !important; line-height: 1.05 !important; }
h1 { font-size: clamp(44px, 5.4vw, 68px); font-weight: 700; line-height: .95; letter-spacing: .01em; }
h2 { font-size: clamp(32px, 4.4vw, 48px); font-weight: 700; letter-spacing: .02em; margin: 0 0 16px; }
h3 { font-size: 28px; font-weight: 700; letter-spacing: .02em; margin: 0 0 12px; }
p { margin: 0 0 16px; max-width: 70ch; }
.lead { font-size: 17px; color: var(--c-text); }
.label { font: 500 14px/1.4 var(--font-text); color: var(--c-label); }
.hint { font: 500 13px/1.4 var(--font-text); color: var(--c-hint); }
a { color: var(--c-primary); }

/* Кикер: полоска 40×3 «Яркого рассвета» плюс текст обычным регистром. */
.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 14px/1.2 var(--font-text);
  text-transform: none;
  margin: 0 0 14px;
}
.kicker::before { content: ""; width: 40px; height: 3px; background: var(--c-dawn); flex: 0 0 auto; }

/* ── герой ────────────────────────────────────────────────────────────── */

.hero { background: var(--c-primary); color: var(--c-surface); }
.hero .wrap { padding-top: 44px; padding-bottom: 44px; }
.hero h1 { margin: 0 0 12px; }
.hero .kicker { color: rgba(255, 255, 255, .8); }
.hero__award {
  font: 700 clamp(22px, 2.6vw, 34px)/1.1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 16px;
  max-width: 20ch;
}
.hero__dates { font: 700 17px/1.3 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.hero__rule { color: rgba(255, 255, 255, .86); max-width: 62ch; margin: 16px 0 28px; }
.hero__rule--flush { margin: 0; }
.hero--done { padding: 0; }
.hero--done .wrap { padding-top: 18px; padding-bottom: 18px; display: flex; gap: 16px; align-items: baseline; }
.hero--done .hero__state { font: 700 17px/1.3 var(--font-display); text-transform: uppercase; letter-spacing: .04em; }

.gates { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 24px; }

.gate {
  background: var(--c-surface);
  color: var(--c-ink);
  padding: 20px;
  border: 0;
  text-align: left;
}
.gate__name { font: 700 20px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.gate__state { font: 500 14px/1.4 var(--font-text); color: var(--c-label); margin: 6px 0 16px; }
.gate__hint { font: 500 14px/1.45 var(--font-text); color: var(--c-text); margin: 0 0 16px; }
.gate--verified { background: var(--c-dark); color: var(--c-surface); }
.gate--verified .gate__state { color: rgba(255, 255, 255, .75); }
.gate--unsubscribed { border-left: 4px solid var(--c-dawn); }
.gate--dialog_gone { border-left: 4px solid var(--c-dawn); }
.gate__what { font: 500 14px/1.4 var(--font-text); color: rgba(255, 255, 255, .75); margin: 0; }
.gate__more { display: inline-block; margin-top: 12px; font: 500 14px/1.4 var(--font-text); }
.gate--verified .gate__more { color: var(--c-sky); }

/* Поле кода на синем поле героя: границу образует белая заливка,
   рамка не нужна — контраст 11.11 против 1.40 у серой рамки на белом. */
.codebar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.codebar__label { font: 500 14px/1.4 var(--font-text); color: rgba(255, 255, 255, .86); flex: 1 0 100%; }

/* ── кнопки ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 28px;
  border: 0;
  background: var(--c-primary);
  color: var(--c-surface);
  font: 600 17px/1 var(--font-text);
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--c-dark); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--c-line); color: var(--c-hint); cursor: not-allowed; }
.btn--ghost {
  height: 58px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .4);
  color: var(--c-surface);
  font-weight: 500;
  font-size: 15px;
}
.btn--ghost:hover { background: var(--c-surface); color: var(--c-dark); }
.btn--light {
  height: 56px;
  background: var(--c-surface);
  border: 2px solid var(--c-dark);
  color: var(--c-dark);
  font-weight: 500;
  font-size: 16px;
}
.btn--light:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn--wide { width: 100%; }

/* ── поля ─────────────────────────────────────────────────────────────── */

input[type="text"] {
  height: 56px;
  padding: 0 18px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-ink);
  /* 17px, а не меньше: iOS зумит страницу при фокусе на поле мельче 16px. */
  font: 500 17px/1 var(--font-text);
  min-width: 0;
}
input[type="text"]:focus { border-color: var(--c-primary); outline: none; }
.codebar input[type="text"] { border: 0; }
.field--error input[type="text"] { border-color: var(--c-dawn); }

/* Фокус клавиатуры виден всегда: без него путь с клавиатуры — угадайка. */
:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.hero :focus-visible, .subhdr :focus-visible { outline-color: var(--c-surface); }

/* ── согласие ─────────────────────────────────────────────────────────── */

.consent { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 20px; max-width: 70ch; }
.consent input { margin-top: 4px; width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--c-dark); }
.consent__text { font: 500 15px/1.45 var(--font-text); color: rgba(255, 255, 255, .92); }
.consent__text a { color: var(--c-surface); }
.gate__why { font: 500 13px/1.4 var(--font-text); color: var(--c-label); margin: 10px 0 0; }

/* ── баннеры ──────────────────────────────────────────────────────────── */

.banner { padding: 14px 18px; margin: 0 0 24px; font: 500 16px/1.45 var(--font-text); }
.banner--ok { background: var(--c-surface); border-left: 4px solid var(--c-primary); }
.banner--err { background: var(--c-error-bg); border-left: 4px solid var(--c-dawn); color: var(--c-ink); }

/* ── карточки контента ────────────────────────────────────────────────── */

.card { background: var(--c-surface); border: 1px solid var(--c-line); padding: 20px 22px; margin: 0 0 12px; }
.confirm__desc { font: 500 13px/1.4 var(--font-text); color: var(--c-hint); margin: 6px 0 0; }
.no-max__note { margin-top: 14px; }
.card__title { font: 700 17px/1.3 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.steps { margin: 8px 0 0; padding-left: 20px; }
.steps li { margin-bottom: 8px; }

/* Длинные идентификаторы не рвём по дефисам: на странице заявок номер
   заявки разъезжался на три строки. */
.nowrap { white-space: nowrap; }

/* Визуально скрытый текст: у глифов статуса обязан быть словесный
   эквивалент, иначе читалка произносит «чёрный квадрат». */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── бюллетень: сетка ─────────────────────────────────────────────────── */

.wrap--lead { padding-bottom: 4px; }

.ballot {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px 96px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

/* ── навигация по зачётам ─────────────────────────────────────────────── */

/* min-width: 0 обязателен обоим столбцам: у элемента сетки он по умолчанию
   auto, то есть столбец растягивается под самое широкое содержимое.
   Без этого полоса чипов на узком экране не прокручивалась бы, а тянула
   бы за собой всю страницу — горизонтальный скролл на 320px. */
.ballotnav, .ballot__main { min-width: 0; }

.ballotnav__inner {
  position: sticky;
  top: 16px;
  background: var(--c-surface);
  padding: 16px 16px 6px;
}
.ballotnav__count { font: 500 14px/1.4 var(--font-text); color: var(--c-label); margin: 0 0 8px; }
.ballotnav__count b { color: var(--c-ink); }
/* Полоса ячеек: 10–11 квадратов подряд. Буквенный интервал — чтобы
   квадраты не слипались в сплошную линию. */
.ballotnav__bar {
  margin: 0 0 16px;
  font: 700 14px/1 var(--font-text);
  letter-spacing: .14em;
  word-break: break-all;
}
.cell--on { color: var(--c-dawn); }
.cell--off { color: var(--c-muted); }

.ballotnav__block {
  font: 700 12px/1.3 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-ink);
  margin: 14px 0 6px;
}
.ballotnav__nom { font: 500 13px/1.3 var(--font-text); color: var(--c-label); margin: 10px 0 4px; }

.chips { list-style: none; margin: 0; padding: 0; }
.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-left: 2px solid transparent;
  color: var(--c-text);
  font: 500 14px/1.3 var(--font-text);
  text-decoration: none;
}
.chip:hover { background: var(--c-plate); }
.chip--picked { border-left-color: var(--c-dawn); }
.chip--voted { border-left-color: var(--c-primary); }
.chip--closed { color: var(--c-hint); }
/* Название номинации в чипе нужно только на узком экране: на широком
   оно стоит заголовком над списком уровней и дублировалось бы в каждой строке. */
.chip__nom { display: none; }
.chip__text { flex: 1 1 auto; }

.mark { font-weight: 700; }
.mark--picked, .mark--voted { color: var(--c-primary); }
.mark--none, .mark--closed { color: var(--c-muted); }

/* ── номинация и переключатель уровней ────────────────────────────────── */

.nom { margin: 0 0 40px; position: relative; }
.nom__title { font: 700 26px/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.nom__note { font: 500 14px/1.4 var(--font-text); color: var(--c-label); margin: 6px 0 0; }
.blocktitle {
  font-size: 15px !important;
  letter-spacing: .1em !important;
  color: var(--c-label);
  margin: 0 0 18px;
}
.nom + .blocktitle { margin-top: 12px; }

/* Сам переключатель — скрытые радиокнопки. Убирать их из потока нельзя
   (`display:none` вынимает из табуляции), поэтому прячем клипом. */
.lvl {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.segs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.seg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  background: var(--c-surface);
  /* Невыбранный сегмент — рамка «линии», выбранный — 2px «Тёмной бури».
     Толщина одинаковая, меняется только цвет: иначе сегменты скакали бы
     на ширину рамки при каждом переключении. */
  border: 2px solid var(--c-line);
  color: var(--c-text);
  font: 600 14px/1.2 var(--font-text);
  cursor: pointer;
}
.seg:hover { border-color: var(--c-hint); }
.lvl--1:checked ~ .nom__head .seg--1,
.lvl--2:checked ~ .nom__head .seg--2,
.lvl--3:checked ~ .nom__head .seg--3 { border-color: var(--c-dark); color: var(--c-ink); }
.lvl--1:focus-visible ~ .nom__head .seg--1,
.lvl--2:focus-visible ~ .nom__head .seg--2,
.lvl--3:focus-visible ~ .nom__head .seg--3 { outline: 3px solid var(--c-primary); outline-offset: 2px; }

.lvlpanel { display: none; }
.lvl--1:checked ~ .lvlpanel--1,
.lvl--2:checked ~ .lvlpanel--2,
.lvl--3:checked ~ .lvlpanel--3,
.lvlpanel--only { display: block; }

/* ── зачёт ────────────────────────────────────────────────────────────── */

/* Переход по чипу не должен прятать заголовок зачёта под липкой полосой. */
.contest { margin: 18px 0 0; scroll-margin-top: 24px; }
.plate { margin: 0 0 14px; padding: 12px 14px; font: 600 14px/1.4 var(--font-text); }
.plate--voted { background: var(--c-dark); color: var(--c-surface); }
.plate--closed { background: var(--c-plate); color: var(--c-text); border-left: 4px solid var(--c-line); }
/* Строка держит высоту и пустой: без этого карточки подпрыгивали бы
   при первом выборе в зачёте. */
.contest__chosen {
  min-height: 21px;
  margin: 0 0 12px;
  font: 600 15px/1.4 var(--font-text);
  color: var(--c-primary);
}

/* ── карточки номинантов ──────────────────────────────────────────────── */

.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
/* Проектные карточки текстовые и потому шире: две колонки вместо трёх. */
.cards--project { grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); }

.ncard {
  position: relative;
  /* Тот же min-width: 0, что и у столбцов сетки. Карточка с длинным
     названием вуза иначе задаёт ширину колонки по себе и выносит
     страницу за экран на 320px. */
  min-width: 0;
  background: var(--c-surface);
  /* Рамка всегда 3px, меняется только цвет: при смене толщины карточка
     дёргалась бы на 4px при каждом выборе. */
  border: 3px solid var(--c-line);
  padding: 18px;
}
.ncard:has(.ncard__radio:checked) { border-color: var(--c-primary); }
.ncard:has(.ncard__radio:focus-visible) { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.ncard--locked { background: var(--c-plate); }

/* Метка на всю карточку: кликом считается вся площадь. */
.ncard__hit { position: absolute; inset: 0; cursor: pointer; }
.ncard--locked .ncard__hit { cursor: default; }

/* Флажок «Ваш выбор» — как стартовый номер на майке. Единственное движение
   на странице: 180мс, в ответ на действие. */
.ncard__flag {
  position: absolute;
  top: 0;
  left: 0;
  padding: 7px 10px;
  background: var(--c-primary);
  color: var(--c-surface);
  font: 700 12px/1 var(--font-text);
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.ncard:has(.ncard__radio:checked) .ncard__flag,
.ncard__flag--done { opacity: 1; transform: none; }
.ncard__flag--done { background: var(--c-dark); }

.ncard__top { display: flex; gap: 14px; align-items: flex-start; }
.ncard__id { min-width: 0; }
.ncard__name {
  font: 700 18px/1.2 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 6px;
  /* Сначала перенос по слогам, и только если слово не влезает целиком —
     разрыв. Без hyphens «СОКОЛОВА ЕКАТЕРИНА» рвётся посреди имени. */
  hyphens: auto;
  overflow-wrap: break-word;
}
.ncard__meta { font: 600 14px/1.35 var(--font-text); color: var(--c-text); margin: 0 0 2px; }
.ncard__meta, .ncard__org, .ncard__region, .ncard__facts dd { overflow-wrap: break-word; }
.ncard__rank { font: 500 13px/1.35 var(--font-text); color: var(--c-label); margin: 0 0 2px; }
.ncard__org,
.ncard__region { font: 500 13px/1.35 var(--font-text); color: var(--c-label); margin: 0 0 2px; }
.ncard__label {
  font: 700 12px/1.3 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-label);
  margin: 14px 0 4px;
}
.ncard__text {
  overflow-wrap: break-word;
  /* Переносы строк из заявки сохраняются: разметки в тексте нет,
     а абзацы и списки через тире люди ставили именно переводом строки. */
  white-space: pre-line;
  font: 500 15px/1.5 var(--font-text);
  color: var(--c-text);
  margin: 12px 0 0;
}
.ncard__list { margin: 0; padding-left: 18px; font: 500 14px/1.45 var(--font-text); color: var(--c-text); }
.ncard__facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0 0 12px; }
.ncard__facts dt { font: 500 13px/1.4 var(--font-text); color: var(--c-label); }
.ncard__facts dd { margin: 0; font: 500 14px/1.4 var(--font-text); color: var(--c-ink); }
/* Ссылки и раскрытие текста поднимаются над меткой выбора — иначе клик
   по ним выбирал бы карточку. */
.ncard__video { position: relative; z-index: 1; margin: 14px 0 0; font: 500 14px/1.4 var(--font-text); }
.ncard__text a { position: relative; z-index: 1; }

/* Обложка проектной карточки. Фотографий у проектных заявок нет вообще,
   и пустого кадра здесь тоже нет: пустой кадр читался бы как поломка.
   Роль обложки играет название. */
.ncard__cover {
  margin: -18px -18px 14px;
  padding: 16px 18px;
  background: var(--c-dark);
  color: var(--c-surface);
  font: 700 18px/1.25 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Кадр под изображение. Пропорцию задаёт бюллетень, файл кроется. */
.frame { display: block; background: var(--c-plate); object-fit: cover; flex: 0 0 auto; }
.frame--portrait { width: 116px; aspect-ratio: 3 / 4; height: auto; }
.frame--team { width: 100%; aspect-ratio: 4 / 3; height: auto; margin: 0 0 14px; }
.frame--shot { width: 68px; aspect-ratio: 4 / 3; height: auto; }
.shots { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }

/* Длинный текст: три строки и раскрытие флажком, без скриптов. */
.clamp { margin: 12px 0 0; }
.clamp__text {
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-line;
  font: 500 15px/1.5 var(--font-text);
  color: var(--c-text);
  margin: 0;
}
.clamp__toggle:checked ~ .clamp__text { display: block; }
.clamp__more {
  position: relative;
  z-index: 1;
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  color: var(--c-primary);
  font: 600 14px/44px var(--font-text);
  cursor: pointer;
}
.clamp__close { display: none; }
.clamp__toggle:checked ~ .clamp__more .clamp__open { display: none; }
.clamp__toggle:checked ~ .clamp__more .clamp__close { display: inline; }
.clamp__toggle:focus-visible ~ .clamp__more { outline: 3px solid var(--c-primary); outline-offset: 2px; }

/* ── панель отправки ──────────────────────────────────────────────────── */

.submitbar { margin: 24px 0 0; }
.submitbar__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: var(--c-dark);
}
.submitbar__why { margin: 0; font: 500 14px/1.4 var(--font-text); color: rgba(255, 255, 255, .85); }
.btn--submit { background: var(--c-surface); color: var(--c-dark); }
.btn--submit:hover { background: var(--c-sky); color: var(--c-dark); }
.btn--submit:disabled { background: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .8); }
.submitbar :focus-visible { outline-color: var(--c-surface); }

/* ── движение ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── подвал ───────────────────────────────────────────────────────────── */

.footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 32px;
  padding: 28px 40px;
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
  font: 500 13px/1.5 var(--font-text);
  color: var(--c-label);
}
.footer__brand { display: flex; align-items: flex-start; gap: 16px; }
.footer__logo { display: block; height: 56px; width: auto; }
.footer__docs { display: flex; flex-direction: column; gap: 6px; }
.footer__docs-title { color: var(--c-ink); font-weight: 700; }

/* ── брейкпоинты ──────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .wrap { padding: 36px 24px; }
  .hdr, .subhdr { padding-left: 24px; padding-right: 24px; }
  .footer { padding-left: 24px; padding-right: 24px; grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .wrap { padding: 24px 16px; }
  .hdr, .subhdr { padding-left: 16px; padding-right: 16px; }
  .footer { padding-left: 16px; padding-right: 16px; grid-template-columns: 1fr; }
  /* Находка со страницы заявок: 68px в заголовке дают горизонтальный скролл
     на узком экране. Не «поменьше», а жёстко ≤30px. */
  h1 { font-size: 28px; line-height: 1.05; }
  h2 { font-size: 26px; }
  h3 { font-size: 20px; }
  .hero__award { font-size: 20px; }
  .gates { grid-template-columns: 1fr; }
  .hdr { flex-wrap: wrap; gap: 8px 16px; }
  .hdr__logo { height: 40px; }
  .hdr__rsss { font-size: 16px; }
  .subhdr { flex-direction: column; align-items: flex-start; gap: 4px; }
  .subhdr__title { font-size: 15px; letter-spacing: .06em; }
  .btn { width: 100%; }
  /* Попадание пальцем: цель — метка целиком, а не сам флажок.
     Ссылки внутри абзаца под это правило не подпадают: растягивать строчную
     ссылку до 44px значит разорвать абзац. */
  .gate__more, .footer__docs a { display: inline-block; min-height: 44px; line-height: 44px; }
  .consent { min-height: 44px; }
  .consent input { width: 24px; height: 24px; }

  /* Сайдбар превращается в липкую полосу чипов. Непрозрачную: находка
     со страницы заявок — полупрозрачная накладка нечитаема ровно
     в момент прокрутки, когда на неё и смотрят. */
  .ballot { grid-template-columns: 1fr; gap: 0; padding: 0 16px 128px; }
  .ballotnav { position: sticky; top: 0; z-index: 5; margin: 0 -16px 16px; }
  .ballotnav__inner {
    position: static;
    padding: 10px 16px 12px;
    border-bottom: 1px solid var(--c-line);
  }
  .ballotnav__block, .ballotnav__nom { display: none; }
  .ballotnav__inner, .ballotnav__scroll { min-width: 0; }
  /* Полоса чипов прокручивается сама и наружу не выходит. Обрезка стоит
     именно на липком блоке: на внутреннем она не удерживает полосу,
     и страница получает горизонтальный скролл на 188px при 320px экрана
     (проверено измерением, а не на глаз). */
  .ballotnav { overflow: hidden; }
  .ballotnav__scroll { display: flex; gap: 8px; overflow-x: auto; }
  .chips { display: flex; gap: 8px; }
  .chip {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 136px;
    min-height: 44px;
    border: 1px solid var(--c-line);
    border-left-width: 2px;
  }
  .chip__nom { display: block; font-size: 11px; color: var(--c-label); }
  .chip .mark, .chip .sr-only + .chip__text { align-self: flex-start; }

  .nom__title { font-size: 20px; }
  .contest { scroll-margin-top: 104px; }
  .ncard__cover { font-size: 16px; }

  /* Панель отправки липнет к низу — единственная тень проекта. */
  .submitbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 6;
    margin: 0;
    box-shadow: var(--shadow-sticky);
  }
  .submitbar__inner { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px; }
  .submitbar__why { font-size: 13px; }
}

/* Совсем узкие экраны: герой — это гейт, и первое действие не должно
   уезжать за экран. Название союза словами убираем — в логотипе уже есть
   «РССС», а брендбук разрешает упрощённую версию на малых размерах. */
@media (max-width: 480px) {
  .hdr__rsss { display: none; }
  /* Узкая колонка рядом с портретом ломает фамилии. Кадр уже, текст мельче,
     карточка теснее — имя укладывается в строку. */
  .ncard { padding: 14px; }
  .ncard__cover { margin: -14px -14px 12px; padding: 14px; }
  .frame--portrait { width: 92px; }
  .ncard__name { font-size: 16px; }
  .hdr { padding: 10px 16px; }
  .hero .wrap { padding-top: 24px; padding-bottom: 28px; }
  .hero__award { margin-bottom: 12px; }
  .hero__rule { margin: 12px 0 20px; }
}