/* src/styles/site.css
   Вся стилизация сайта (CODE-07), оформление «Алатау» (макет
   docs/design/1b-alatau): ночной ельник и закатное солнце в тёмной шапке,
   силуэт хребта под первым блоком страницы, разделы — светлые карточки,
   главная кнопка — «солнечная». Только системные шрифты, без картинок.
   Мобильный подход снизу вверх, тап-цели ≥44 px (MOB-09), таблица
   дистанций и список участников со своей прокруткой (MOB-04, MOB-07),
   перенос длинных слов (MOB-10), меню на телефонной ширине (MOB-02) и
   отступ прокрутки для якорей под шапкой (NAV-03). Открывать при
   изменении внешнего вида — правка здесь никогда не меняет разметку или
   данные (GUIDE-G). Цвета — переменные в :root ниже. */

:root {
  /* Основные цвета */
  --color-bg: #f1f0ea;            /* фон страницы */
  --color-surface: #fff;          /* карточки разделов */
  --color-text: #16221d;
  --color-muted: #56615b;
  --color-accent: #1d6a55;        /* ссылки и обычные кнопки */
  --color-accent-hover: #134b3c;
  --color-on-accent: #fff;
  /* Ночь: шапка, первый блок страницы, подвал */
  --color-night: #0e241f;
  --color-night-2: #1a4036;
  --color-ridge: #2c5a4d;
  --color-on-night: #eef3ee;
  --color-on-night-muted: #b8c8c0;
  /* Солнце: главная кнопка, эмблема, акценты на тёмном */
  --color-sun: #f5a742;
  --color-sun-hover: #ffbd62;
  --color-on-sun: #1d1300;
  /* Служебные */
  --color-border: #e0dfd6;
  --color-tag: #e3eee8;
  --color-temp-bg: #ffe6a6;
  --color-temp-text: #3d2c00;
  --color-error: #b3261e;
  --color-error-bg: #fdecea;
  --color-focus: #f5a742;

  --radius: 22px;
  --radius-sm: 14px;
  --gutter: 0px;
  --container: 1120px;
  --pad-x: max(var(--gutter), calc((100% - var(--container)) / 2));
  --header-height: 68px;

  --ridge-back: polygon(0 100%, 0 62%, 7% 48%, 13% 58%, 21% 26%, 29% 50%, 36% 38%, 45% 60%, 54% 18%, 62% 44%, 70% 30%, 79% 54%, 88% 36%, 100% 56%, 100% 100%);
  --ridge-front: polygon(0 100%, 0 40%, 10% 70%, 18% 45%, 27% 72%, 40% 38%, 52% 70%, 64% 50%, 76% 76%, 88% 46%, 100% 68%, 100% 100%);
}

/* --header-height — наибольшая высота липкой шапки на этой ширине (для
   якорей, NAV-03): на средних ширинах меню переносится, длиннее всего —
   казахские пункты. */
@media (min-width: 768px) {
  :root { --gutter: 24px; --header-height: 164px; }
}

@media (min-width: 960px) {
  :root { --gutter: 40px; --header-height: 116px; }
}

@media (min-width: 1280px) {
  :root { --header-height: 72px; }
}

/* --- Основа --- */

*, *::before, *::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3 {
  margin: 0;
  line-height: 1.12;
  text-wrap: balance;
}

/* Подвал прижат к низу окна и на коротких страницах (у 404 шапка, main
   и подвал лежат внутри блока своего языка). */
body,
.page-lang-block {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-lang-block[hidden] {
  display: none;
}

main {
  flex: 1 0 auto;
  align-content: start;
}

p {
  margin: 0 0 0.8em;
}

p:last-child {
  margin-bottom: 0;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-accent);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--color-accent-hover);
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* Все возможные якоря получают запас сверху, чтобы заголовок блока не
   оказался под липкой шапкой (NAV-03). */
[id] {
  scroll-margin-top: calc(var(--header-height) + 0.5rem);
}

/* Длинные слова и ссылки переносятся, а не раздвигают страницу (MOB-10). */
main,
.site-text,
.event-info-extra {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* --- Шапка (NAV-01): тёмная, липкая; меню и языки в одной строке с
   названием клуба на широком экране --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 24px;
  padding: 0 var(--pad-x);
  min-height: 54px;
  background: #ffffff;
  color: #142332;
  border-bottom: 1px solid #e7ebee;
}
.site-header-row {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

.site-brand:hover {
  color: #fff;
}

/* Эмблема клуба — в «солнечном» круге, как в макете. */
.site-emblem,
.event-placeholder-emblem {
  flex: none;
  border-radius: 50%;
  background: var(--color-sun);
  padding: 3px;
}

.site-emblem {
  width: 48px;
  height: 48px;
}

.site-brand-name {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Кнопка меню видна только на телефонной ширине (MOB-02); на шапке
   ≥768px меню всегда развёрнуто и кнопка скрыта. */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  color: var(--color-on-night);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.menu-toggle::before {
  content: "";
  width: 16px;
  height: 12px;
  border-block: 2px solid;
  background: linear-gradient(currentColor 0 0) center / 100% 2px no-repeat;
}

.site-nav {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
}

.site-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-menu a,
.lang-switcher a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  text-decoration: none;
}

.site-menu a {
  color: #142332;
  font-weight: 600;
}

.site-menu a:hover {
  background: #eef3f6;
  color: #142332;
}

.lang-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-left: auto;
  font-size: 15px;
}

.lang-switcher a {
  color: var(--color-on-night-muted);
  font-weight: 600;
}

.lang-switcher a:hover {
  background: rgb(255 255 255 / 0.1);
  color: #fff;
}

.lang-switcher a[aria-current="true"] {
  color: var(--color-sun);
  font-weight: 800;
}

@media (max-width: 960px) {
  .site-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 4px 0 8px;
  }
  .site-nav.is-open {
    display: flex;
  }
  .site-menu {
    flex-direction: column;
  }
  .site-menu a {
    display: flex;
    min-height: 48px;
  }
  .lang-switcher {
    margin-left: 0;
    padding-top: 6px;
    border-top: 1px solid rgb(255 255 255 / 0.12);
  }
}

@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }
  /* На широком экране языки — коротким кодом (RU · KK · EN), как в макете;
     полное название остаётся в тексте ссылки для чтения с экрана. */
  .lang-switcher a {
    justify-content: center;
    min-width: 44px;
    padding: 0 8px;
    font-size: 0;
  }
  .lang-switcher a::before {
    content: attr(data-lang);
    font-size: 15px;
    text-transform: uppercase;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .site-menu a {
    padding: 0 9px;
    font-size: 16px;
  }
}

@media (min-width: 960px) {
  .site-header-row {
    flex: 0 0 auto;
  }
  .site-nav {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  .site-menu {
    flex-wrap: nowrap;
  }
}

/* --- Баннер и значки временного контента (EP §8) --- */

.temp-banner {
  padding: 9px var(--pad-x);
  background: var(--color-sun);
  color: var(--color-on-sun);
  text-align: center;
  font-size: 14px;
  font-weight: 650;
}

.temp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--color-temp-bg);
  color: var(--color-temp-text);
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 700;
}

.temp-badge::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-sun);
  box-shadow: 0 0 0 2px var(--color-temp-text);
}

/* --- Кнопки --- */

.button,
button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}

/* --- Первый блок страницы: ночное небо, солнце и хребет. На главной это
   карточка следующего старта, на странице события — её название и
   сведения, на странице архива — заголовок. --- */

.next-event,
.event-main,
.page-title {
  position: relative;
  overflow: hidden;
  padding: 24px var(--pad-x) 120px;
  color: var(--color-on-night);
  background:
    radial-gradient(circle at 86% 60px, var(--color-sun) 0 34px, rgb(245 167 66 / 0.22) 35px 78px, transparent 79px),
    linear-gradient(180deg, var(--color-night) 0%, var(--color-night-2) 100%);
}

.next-event::before,
.next-event::after,
.event-main::before,
.event-main::after,
.page-title::before,
.page-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px; /* без полосы сглаживания под хребтом */
}

.next-event::before,
.event-main::before,
.page-title::before {
  height: 112px;
  background: var(--color-ridge);
  clip-path: var(--ridge-back);
}

.next-event::after,
.event-main::after,
.page-title::after {
  height: 60px;
  background: var(--color-bg);
  clip-path: var(--ridge-front);
}

.next-event > *,
.event-main > *,
.page-title > * {
  position: relative;
  z-index: 1;
}

.next-event a:not(.button),
.event-main a {
  color: var(--color-on-night);
}

.next-event a:not(.button):hover,
.event-main a:hover {
  color: var(--color-sun);
}

.next-event-label {
  margin-bottom: 14px;
  color: var(--color-sun);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Карточка следующего старта (HOME-02): вид можно поменять только тут, без
   изменения данных или логики (CODE-07). */
.event-card {
  display: grid;
  gap: 16px;
  justify-items: start;
  padding: 22px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 0.07);
}

.event-card-name,
.event-main h1 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.event-card-name a {
  text-decoration: none;
}

.event-card-info,
.event-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 24px;
  width: 100%;
  margin: 0;
}

.event-card-info dt,
.event-info dt {
  color: var(--color-on-night-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-card-info dd,
.event-info dd {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
}

.event-card .button {
  width: 100%;
}

.next-event .button {
  background: var(--color-sun);
  color: var(--color-on-sun);
}

.next-event .button:hover {
  background: var(--color-sun-hover);
  color: var(--color-on-sun);
}

.event-placeholder {
  display: grid;
  gap: 16px;
  justify-items: center;
  padding: 28px 0;
  color: var(--color-on-night-muted);
  font-size: 18px;
  text-align: center;
}

.event-placeholder-emblem {
  width: 88px;
  height: 88px;
}

/* Страница события: название и сведения в первом блоке. */
.event-main {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.event-info-extra {
  max-width: 64ch;
  color: var(--color-on-night);
}

/* Заголовок страницы архива. */
.page-title {
  margin: 0;
  padding-top: 32px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

@media (min-width: 960px) {
  .next-event,
  .event-main,
  .page-title {
    padding-top: 48px;
    padding-bottom: 170px;
    background:
      radial-gradient(circle at 84% 110px, var(--color-sun) 0 56px, rgb(245 167 66 / 0.2) 57px 130px, transparent 131px),
      linear-gradient(180deg, var(--color-night) 0%, var(--color-night-2) 100%);
  }
  .next-event::before,
  .event-main::before,
  .page-title::before {
    height: 170px;
  }
  .next-event::after,
  .event-main::after,
  .page-title::after {
    height: 86px;
  }
  .event-card {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 40px;
    max-width: 880px;
    padding: 36px 40px;
  }
  .event-card > * {
    grid-column: 1;
  }
  .event-card .button {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: end;
    width: auto;
  }
  .event-card-name,
  .event-main h1,
  .page-title {
    font-size: 52px;
  }
  .event-main > * {
    max-width: 880px;
  }
}

/* --- Карточки разделов: блоки главной, дистанции, бюллетень, регистрация,
   список участников, годы архива, документы, 404 --- */

.site-section,
.event-distances,
.event-bulletin,
.registration,
.participant-list,
.archive-year,
.archive-empty,
.legal-page,
.not-found {
  display: grid;
  gap: 14px;
  justify-items: start;

  padding: 48px 48px;
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgb(20 30 25 / 0.06);
}

main > :is(.site-section, .event-distances, .event-bulletin, .registration, .participant-list, .archive-year, .archive-empty, .legal-page, .not-found) > * {
  max-width: 100%;
}

/* Самые узкие телефоны: меньше полей, чтобы таблицы помещались (MOB-07). */
@media (max-width: 399px) {
  :root { --gutter: 12px; }
  main > :is(.site-section, .event-distances, .event-bulletin, .registration, .participant-list, .archive-year, .archive-empty, .legal-page, .not-found) {
    padding: 22px 14px;
  }
  .participant-list th,
  .participant-list td {
    padding: 0 8px;
  }
}

.site-section > h2,
.event-distances > h2,
.archive-year > h2,
.legal-page > h1,
.not-found > h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.site-text {
  max-width: 64ch;
}

.site-text :first-child {
  margin-top: 0;
}

/* Широкий экран: карточки по ширине контейнера; «О клубе» и «Наши цели»
   стоят рядом, как в макете. */
@media (min-width: 960px) {
  main {
    display: grid;
   grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, calc(var(--container) / 2)) minmax(0, calc(var(--container) / 2)) minmax(var(--gutter), 1fr);
  }
  main > * {
    grid-column: 1 / -1;
  }
  main > :is(.site-section, .event-distances, .event-bulletin, .registration, .participant-list, .archive-year, .archive-empty, .legal-page, .not-found) {
    grid-column: 2 / 4;
    margin: 12px 0;
    padding: 40px;
	padding-left: max(var(--pad-x), calc((100vw - 1120px) / 2));
    padding-right: max(var(--pad-x), calc((100vw - 1120px) / 2));
  }
  main > .site-section {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: 40px;
    align-items: start;
  }
  main > .site-section > h2 {
    grid-row: 1 / span 4;
  }
  main > .site-section > :not(h2) {
    grid-column: 2;
  }
  main > #about {
    grid-column: 2;
    margin-right: 12px;
  }
  main > #goals {
    grid-column: 3;
    margin-left: 12px;
  }
  main > #about,
  main > #goals,
  main > #calendar {
    grid-template-columns: minmax(0, 1fr);
  }
  main > #about > *,
  main > #goals > *,
  main > #calendar > * {
    grid-column: 1;
    grid-row: auto;
  }
  .site-section > h2,
  .event-distances > h2,
  .archive-year > h2,
  .legal-page > h1,
  .not-found > h1 {
    font-size: 36px;
  }
}

/* --- Календарь (HOME-07) --- */

.calendar-list,
.archive-list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.calendar-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
}

.calendar-date,
.calendar-name {
  flex-basis: 100%;
}

.calendar-date {
  color: var(--color-accent);
  font-size: 14.5px;
  font-weight: 700;
}

.calendar-name {
  font-size: 20px;
  font-weight: 750;
  line-height: 1.25;
}

.calendar-name a {
  color: var(--color-text);
  text-decoration: none;
}

.calendar-name a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.calendar-place {
  color: var(--color-muted);
  font-size: 15px;
}

.calendar-discipline {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--color-tag);
  color: var(--color-accent);
  font-size: 13.5px;
  font-weight: 700;
}

.calendar-empty {
  color: var(--color-muted);
}

@media (min-width: 960px) {
  .calendar-entry {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr) minmax(0, 150px) minmax(0, 210px);
    column-gap: 20px;
  }
  .calendar-discipline {
    justify-self: start;
  }
  .calendar-entry .temp-badge {
    grid-column: 2 / -1;
  }
}

/* --- Контакты --- */

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--color-night);
  color: var(--color-on-night);
  font-weight: 650;
  text-decoration: none;
}

.social-links a:hover {
  background: var(--color-accent);
  color: #fff;
}

/* --- Подвал (NAV-04): ночь с волной хребта сверху --- */

.site-footer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 72px;
  padding: 12px var(--pad-x) 28px;
  background: var(--color-night);
  color: var(--color-on-night-muted);
  font-size: 15px;
}



.site-footer-copy {
  margin: 0;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

.footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-on-night);
}

.footer-legal a:hover {
  color: var(--color-sun);
}

/* --- Страница события (EVT) --- */

/* Таблица дистанций и таблица участников прокручиваются только внутри
   своего блока, страница целиком — нет (MOB-04). */
.table-scroll,
.list-scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.event-distances table,
.participant-list table {
  width: 100%;
  border-collapse: collapse;
  min-width: 320px;
}

.event-distances th,
.event-distances td,
.participant-list th,
.participant-list td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.event-distances th,
.participant-list th {
  background: var(--color-tag);
  color: var(--color-accent);
  font-size: 14px;
  font-weight: 700;
}

.event-distances tbody tr:last-child td {
  border-bottom: 0;
}

.event-bulletin a,
.archive-links a,
.reg-notice a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.event-bulletin a {
  padding: 0 20px;
  border-radius: 999px;
  background: var(--color-tag);
  font-weight: 700;
  text-decoration: none;
}

.event-bulletin a:hover {
  background: var(--color-accent);
  color: #fff;
}

/* --- Регистрация (REG) --- */

.registration {
  display: block;
}

.registration-closed p {
  display: inline-block;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  color: var(--color-temp-text);
  background: var(--color-temp-bg);
  font-weight: 650;
}

#reg-form .field,
#reg-form fieldset.field-gender {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 420px;
  margin: 0 0 16px;
}

#reg-form fieldset.field-gender {
  padding: 0;
  border: 0;
}

#reg-form label,
#reg-form legend {
  font-weight: 650;
}

#reg-form legend {
  margin-bottom: 6px;
}

#reg-form input:not([type="radio"]),
#reg-form select {
  min-height: 48px;
  padding: 8px 14px;
  border: 1px solid #c9c8bd;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

#reg-form input:not([type="radio"]):focus,
#reg-form select:focus {
  border-color: var(--color-accent);
}

#reg-form input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-accent);
}

.field-gender label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 400;
}

#reg-form select:disabled {
  background: var(--color-bg);
  color: var(--color-muted);
}

.field-error {
  min-height: 1.2em;
  margin: 0;
  color: var(--color-error);
  font-size: 15px;
}

/* Сообщение под кнопкой отправки (REG-07, REG-14): предупреждение о дубле
   и сбой заметнее обычного статуса «отправляем». */
#reg-status {
  max-width: 420px;
  margin: 12px 0 0;
}

#reg-status[data-kind="warning"],
#reg-status[data-kind="error"] {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-weight: 650;
}

#reg-status[data-kind="warning"] {
  background: var(--color-temp-bg);
  color: var(--color-temp-text);
}

#reg-status[data-kind="error"] {
  background: var(--color-error-bg);
  color: var(--color-error);
}

#reg-form button[type="submit"][disabled] {
  opacity: 0.6;
  cursor: progress;
}

.reg-notice {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  max-width: 480px;
  margin: 0 0 12px;
  color: var(--color-muted);
  font-size: 15px;
}

.reg-notice > span {
  flex-basis: 100%;
}

#reg-form > .temp-badge {
  display: flex;
  margin-bottom: 16px;
}

/* Модальное окно успеха (REG-11, MOB-06): по центру экрана, помещается на
   320×568 без прокрутки. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgb(14 36 31 / 0.6);
}

.modal[hidden] {
  display: none;
}

.modal-content {
  position: relative;
  width: 100%;
  max-width: 360px;
  max-height: calc(100vh - 32px);
  padding: 44px 24px 24px;
  border-radius: var(--radius);
  background: var(--color-surface);
  text-align: center;
}

.modal-message {
  margin: 0 0 18px;
  font-size: 24px;
  font-weight: 800;
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 44px;
  min-height: 44px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.modal-close:hover {
  background: var(--color-bg);
}

/* --- Список участников (LIST-05, MOB-07): 6 строк, свой скролл, липкая
   шапка, одна и та же высота при 7 и при 300 записях. --- */

.list-count {
  font-size: 20px;
  font-weight: 800;
}

/* Высота блока — строка заголовков и ровно 6 строк по 2.75rem (44 px). */
.list-scroll {
  max-height: calc(7 * 2.75rem + 2px);
  overflow-y: auto;
}

.participant-list table {
  min-width: 0;
}

.participant-list th,
.participant-list td {
  height: 2.75rem;
  padding: 0 10px;
  font-size: 15px;
}

/* Длинное имя переносится внутри своего столбца, чтобы все три столбца
   помещались на 320 px (MOB-07). */
.participant-list td:first-child {
  white-space: normal;
  overflow-wrap: anywhere;
}

.participant-list thead th {
  position: sticky;
  top: 0;
}

.list-empty {
  color: var(--color-muted);
}

.list-error {
  color: var(--color-error);
}

/* --- Архив (ARC) --- */

.archive-entry {
  display: grid;
  gap: 6px;
  justify-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
}

.archive-entry-title {
  margin: 0;
  font-size: 20px;
  font-weight: 750;
  line-height: 1.25;
}

.archive-entry-title a {
  color: var(--color-text);
  text-decoration: none;
}

.archive-entry-title a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.archive-entry-place {
  margin: 0;
  color: var(--color-muted);
  font-size: 15px;
}

.archive-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
}

.archive-links a {
  padding: 0 16px;
  border-radius: 999px;
  background: var(--color-tag);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.archive-links a:hover {
  background: var(--color-accent);
  color: #fff;
}

.archive-empty {
  color: var(--color-muted);
}

/* --- Юридические страницы (LEGAL) и 404 --- */

.legal-version {
  color: var(--color-muted);
}

main > .legal-page {
  max-width: none;
}

.legal-page .site-text {
  max-width: 72ch;
}

main > .not-found {
  margin-top: 40px;
}

/* --- Redesign 2026: header --- */

.site-wordmark {
  display: block;
  width: 90px;
  height: auto;
}
/* --- Redesign 2026: home hero --- */

.home-hero {
  background: #8FACC7;
  color: #1B2A37;
  padding: 72px max(var(--pad-x), calc((100vw - 1120px) / 2));
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 64px;
  align-items: center;
  min-height: 520px;
}

.home-hero-intro {
  max-width: 580px;
}

.home-hero-kicker {
  margin: 0 0 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.home-hero h1 {
  margin: 0 0 24px;
  color: #1B2A37;
  font-size: clamp(48px, 5vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.home-hero-text {
  margin: 0;
  max-width: 520px;
  font-size: 19px;
  line-height: 1.55;
}

.home-hero-event .next-event {
  padding: 0;
  min-height: 0;
  background: transparent;
}

.home-hero-event .next-event::before,
.home-hero-event .next-event::after {
  display: none;
}

.home-hero-event .event-card {
  margin: 0;
}

.home-hero-event .next-event-label {
  color: #1B2A37;
}
.home-hero-event {
  min-width: 0;
}

.home-hero-event .event-card {
  width: 100%;
  max-width: none;
  padding: 38px;
  background: rgb(255 255 255 / 0.18);
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 24px;
  color: #1B2A37;
}

.home-hero-event .event-card-name {
  font-size: 42px;
  line-height: 1;
  overflow-wrap: normal;
  word-break: normal;
}

.home-hero-event .event-card-name a {
  color: #1B2A37;
}

.home-hero-event .event-card-info {
  color: #1B2A37;
}

.home-hero-event .event-card-info dt,
.home-hero-event .event-card-info dd {
  color: #1B2A37;
}
.home-hero-event .event-card-button {
  background: #5A82A8;
  color: #ffffff;
  border: 0;
}

.home-hero-event .event-card-button:hover {
  background: #496f92;
  color: #ffffff;
}
main {
  background: #ffffff;
}

.site-section {
  background: #ffffff;
}

#goals,
#contacts {
  background: #EEF3F8;
}
/* --- Redesign 2026: about + goals --- */

#about,
#goals {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 72px 48px;
}

#about {
  background: #ffffff;
}

#goals {
  background: #EEF3F8;
}

#about h2,
#goals h2 {
  color: #1B2A37;
  font-size: 42px;
  line-height: 1;
  margin-bottom: 32px;
}

#about .site-text,
#goals .site-text {
  color: #1B2A37;
  font-size: 17px;
  line-height: 1.65;
}
/* --- Redesign 2026: full-width about + goals --- */

@/* --- Redesign 2026: about reference layout --- */

#about {
  background: #111B24;
  color: #EEF3F8;
  padding-top: 92px;
  padding-bottom: 100px;
}

#about .about-kicker {
  grid-column: 1 / -1;
  margin: 0 0 10px;
  color: #8FACC7;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

#about h2 {
  color: #EEF3F8;
  margin-bottom: 46px;
}

#about h2::after {
  content: "";
  display: block;
  width: 118px;
  height: 4px;
  margin-top: 20px;
  border-radius: 4px;
  background: #8FACC7;
}

#about .about-content {
  grid-column: 1 / -1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 90px;
  align-items: start;
}

#about .about-text {
  max-width: 620px;
}

#about .about-text p {
  margin: 0 0 24px;
  color: #EEF3F8;
  font-size: 17px;
  line-height: 1.65;
}

#about .about-lead {
  font-size: 19px !important;
  line-height: 1.65 !important;
}

#about .about-stats {
  width: 100%;
  border-top: 2px solid #EEF3F8;
}

#about .about-stat {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  min-height: 110px;
  padding: 22px 0;
  border-bottom: 1px solid #31414E;
}

#about .about-stat strong {
  color: #8FACC7;
  font-size: 48px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
}

#about .about-stat span {
  color: #A3B4C4;
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 959px) {
  #about .about-content {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  #about .about-text {
    max-width: 700px;
  }
}

@media (max-width: 600px) {
  #about {
    padding-top: 64px;
    padding-bottom: 72px;
  }

  #about .about-stat {
    grid-template-columns: 110px minmax(0, 1fr);
  }

  #about .about-stat strong {
    font-size: 40px;
  }
}
/* --- Redesign 2026: goals reference layout --- */

#goals {
  background: #1B2A37;
  color: #EEF3F8;
  padding-top: 92px;
  padding-bottom: 110px;
}

#goals h2 {
  color: #EEF3F8;
  margin-bottom: 10px;
}

#goals h2::after {
  content: "";
  display: block;
  width: 115px;
  height: 4px;
  margin-top: 20px;
  border-radius: 4px;
  background: #8FACC7;
}

#goals .goals-kicker {
  margin: 0 0 26px;
  color: #8FACC7;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.09em;
}

#goals .goals-main {
  max-width: 720px;
  margin: 0 0 52px;
  color: #EEF3F8;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
}

#goals .goals-features {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 38px;
}

#goals .goals-feature {
  padding-top: 24px;
  border-top: 2px solid #EEF3F8;
}

#goals .goals-icon {
  height: 42px;
  color: #8FACC7;
  font-size: 36px;
  line-height: 1;
}

#goals .goals-feature h3 {
  margin: 8px 0 10px;
  color: #EEF3F8;
  font-size: 20px;
  font-weight: 800;
}

#goals .goals-feature p {
  margin: 0;
  color: #A3B4C4;
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 960px) {
  #goals {
    padding-top: 64px;
    padding-bottom: 72px;
  }

  #goals .goals-main {
    font-size: 28px;
  }

  #goals .goals-features {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
/* --- Redesign 2026: hero reference --- */

.home-hero {
  position: relative;
  overflow: hidden;
  background: #1B2A37;
  color: #EEF3F8;
  padding-top: 76px;
  padding-bottom: 76px;
  min-height: 650px;
}

/* пока без горизонталей — добавим отдельным слоем следующим шагом */

.home-hero-intro,
.home-hero-event {
  position: relative;
  z-index: 1;
}

.home-hero-logo {
  display: block;
  width: min(430px, 85%);
  height: auto;
  margin: 0 0 24px;
}

.home-hero-kicker {
  color: #EEF3F8;
  margin-bottom: 16px;
}

.home-hero h1 {
  color: #FFFFFF;
  font-size: clamp(48px, 4.4vw, 68px);
  line-height: 1.02;
  margin-bottom: 22px;
}

.home-hero-text {
  max-width: 570px;
  color: #EEF3F8;
  font-size: 18px;
  line-height: 1.6;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.home-hero-actions .button {
  background: #5A82A8;
  color: #FFFFFF;
  border-radius: 10px;
}

.home-hero-actions .button:hover {
  background: #496F92;
}

.home-hero-actions .home-hero-secondary {
  background: transparent;
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
}

.home-hero-actions .home-hero-secondary:hover {
  background: #FFFFFF;
  color: #1B2A37;
}

/* Карточка ближайшего старта */

.home-hero-event .next-event-label {
  color: #8FACC7;
  margin-bottom: 12px;
}

.home-hero-event .event-card {
  padding: 32px;
  background: #1B2A37;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.12);
}

.home-hero-event .event-card-name {
  font-size: 38px;
}

.home-hero-event .event-card-name a,
.home-hero-event .event-card-info dd {
  color: #EEF3F8;
}

.home-hero-event .event-card-info dt {
  color: #8FACC7;
}

.home-hero-event .event-card-button {
  background: #5A82A8;
  color: #FFFFFF;
  border-radius: 10px;
}

@media (max-width: 959px) {
  .home-hero {
    grid-template-columns: 1fr;
    gap: 48px;
    min-height: 0;
  }

  .home-hero-logo {
    width: min(380px, 80%);
  }
}
/* --- Hero event route --- */

.home-hero-event .event-route {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 2px 0 12px;
  color: #F08A3C;
  font-size: 28px;
  line-height: 1;
}

.home-hero-event .route-start,
.home-hero-event .route-control,
.home-hero-event .route-finish {
  flex: 0 0 auto;
  color: #F08A3C;
  font-weight: 700;
}

.home-hero-event .route-line {
  flex: 1 1 auto;
  min-width: 24px;
  margin: 0 6px;
  border-top: 2px dashed #F08A3C;
}

/* Старое desktop-правило карточки пытается отправить кнопку
   во вторую колонку. В hero нам нужна одна колонка. */
@media (min-width: 960px) {
  .home-hero-event .event-card {
    grid-template-columns: 1fr;
  }

  .home-hero-event .event-card > * {
    grid-column: 1;
  }

  .home-hero-event .event-card .button {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    margin-top: 8px;
  }
}
/* --- Hero course SVG --- */

.home-hero-event .event-course {
  display: block;
  width: 100%;
  height: auto;
  margin: 4px 0 14px;
  overflow: visible;
}

.home-hero-event .event-course-path {
  fill: none;
  stroke: #F08A3C;
  stroke-width: 2;
  stroke-dasharray: 6 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-hero-event .event-course-mark {
  fill: #1B2A37;
  stroke: #F08A3C;
  stroke-width: 2.5;
}

.home-hero-event .event-course-number {
  fill: #A3B4C4;
  font-size: 10px;
  font-weight: 600;
  font-family: Onest, Arial, sans-serif;
}
.home-hero-contours {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* --- Redesign 2026: calendar reference --- */

#calendar {
  background: #FFFFFF;
  color: #1B2A37;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-top: 92px;
  padding-bottom: 100px;
}

#calendar h2 {
  margin: 0 0 48px;
  color: #1B2A37;
  font-size: 42px;
  line-height: 1;
}

#calendar .calendar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid #1B2A37;
}

#calendar .calendar-entry {
  display: grid;
  grid-template-columns:
    minmax(150px, 0.8fr)
    minmax(220px, 1.35fr)
    minmax(220px, 1.1fr)
    minmax(190px, 1fr);
  gap: 28px;
  align-items: center;

  margin: 0;
  padding: 24px 0;

  border-bottom: 1px solid #D7DEE5;
}

#calendar .calendar-date,
#calendar .calendar-name,
#calendar .calendar-place,
#calendar .calendar-discipline {
  min-width: 0;
}

#calendar .calendar-date {
  color: #1B2A37;
  font-size: 18px;
  font-weight: 700;
}

#calendar .calendar-name {
  font-size: 18px;
  font-weight: 700;
}

#calendar .calendar-name a {
  color: #1B2A37;
  text-decoration: none;
}

#calendar .calendar-name a:hover {
  color: #5A82A8;
}

#calendar .calendar-place {
  color: #51606E;
  font-size: 16px;
  line-height: 1.45;
}

#calendar .calendar-discipline {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #51606E;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 400;
}



@media (max-width: 760px) {
  #calendar {
    padding-top: 64px;
    padding-bottom: 72px;
  }

  #calendar h2 {
    font-size: 36px;
    margin-bottom: 36px;
  }

  #calendar .calendar-entry {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 22px 0;
  }

  #calendar .calendar-date {
    color: #5A82A8;
  }
}
#calendar .calendar-entry .calendar-discipline-badge {
  display: inline;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #51606E;
  font: inherit;
  font-weight: 400;
}
#calendar .calendar-kicker {
  margin: 0 0 10px;
  color: #5A82A8;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

#calendar .calendar-head {
  display: grid;
  grid-template-columns:
    minmax(150px, 0.8fr)
    minmax(220px, 1.35fr)
    minmax(220px, 1.1fr)
    minmax(190px, 1fr);
  gap: 28px;

  padding: 0 0 12px;
  border-bottom: 2px solid #1B2A37;

  color: #51606E;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

#calendar .calendar-list {
  border-top: 0;
}

@media (max-width: 760px) {
  #calendar .calendar-head {
    display: none;
  }

  #calendar .calendar-list {
    border-top: 2px solid #1B2A37;
  }
}
/* --- Redesign 2026: calendar dark reference --- */

#calendar {
  background: #111B24;
  color: #EEF3F8;
  padding-top: 92px;
  padding-bottom: 100px;
}

#calendar .calendar-kicker {
  margin: 0 0 14px;
  color: #8FACC7;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

#calendar h2 {
  margin: 0 0 18px;
  color: #EEF3F8;
  font-size: 42px;
  line-height: 1;
}

#calendar h2::after {
  content: "";
  display: block;
  width: 118px;
  height: 4px;
  margin-top: 20px;
  border-radius: 4px;
  background: #8FACC7;
}

#calendar .calendar-head {
  display: grid;
  grid-template-columns:
    150px
    minmax(220px, 1.25fr)
    minmax(220px, 1fr)
    minmax(190px, .95fr)
    130px;
  gap: 28px;

  margin-top: 44px;
  padding-bottom: 12px;

  border-bottom: 1px solid #A3B4C4;

  color: #8FACC7;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}

#calendar .calendar-list {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

#calendar .calendar-entry {
  display: grid;
  grid-template-columns:
    150px
    minmax(220px, 1.25fr)
    minmax(220px, 1fr)
    minmax(190px, .95fr)
    130px;
  gap: 28px;
  align-items: center;

  margin: 0;
  padding: 24px 0;

  border-bottom: 1px solid #31414E;
}

#calendar .calendar-date {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#calendar .calendar-date strong {
  color: #FFFFFF;
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
}

#calendar .calendar-date span {
  color: #8FACC7;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 400;
}

#calendar .calendar-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;

  color: #FFFFFF;
  font-size: 20px;
  font-weight: 800;
}

#calendar .calendar-name a {
  color: #FFFFFF;
  text-decoration: none;
}

#calendar .calendar-name a:hover {
  color: #8FACC7;
}

#calendar .calendar-next {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: #1B2A37;
  color: #8FACC7;

  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .06em;
}

#calendar .calendar-place,
#calendar .calendar-discipline {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;

  color: #EEF3F8;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 400;
}

#calendar .calendar-link {
  text-align: right;
}

#calendar .calendar-action {
  color: #8FACC7;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

#calendar .calendar-action:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  #calendar .calendar-head {
    display: none;
  }

  #calendar .calendar-list {
    border-top: 1px solid #A3B4C4;
  }

  #calendar .calendar-entry {
    grid-template-columns: 120px 1fr;
    gap: 16px 24px;
  }

  #calendar .calendar-place,
  #calendar .calendar-discipline,
  #calendar .calendar-link {
    grid-column: 2;
  }

  #calendar .calendar-date {
    grid-row: 1 / span 4;
  }

  #calendar .calendar-link {
    text-align: left;
  }
}
/* --- Calendar full-width fix --- */

@media (min-width: 960px) {
  main > #calendar {
    grid-column: 1 / -1;
    margin: 0;
    padding-left: max(var(--pad-x), calc((100vw - 1120px) / 2));
    padding-right: max(var(--pad-x), calc((100vw - 1120px) / 2));
  }
}
/* --- Redesign 2026: First start — Claude reference --- */

.first-start {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;

  background: #1B2A37;
  color: #EEF3F8;
}

.first-start-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 48px;
}

.first-start-kicker {
  margin: 0 0 12px;

  color: #8FACC7;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
}

.first-start h2 {
  margin: 0 0 54px;

  color: #FFFFFF;
  font-size: 42px;
  line-height: 1;
}

.first-start h2::after {
  content: "";
  display: block;

  width: 118px;
  height: 4px;
  margin-top: 20px;

  border-radius: 4px;
  background: #8FACC7;
}

.first-start-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 72px);
}

.first-start h3 {
  margin: 0 0 20px;

  color: #FFFFFF;
  font-size: 20px;
  font-weight: 800;
}

/* левая колонка */

.first-start-list {
  display: grid;
  gap: 14px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.first-start-list li {
  position: relative;

  padding-left: 32px;

  color: #EEF3F8;
  font-size: 16px;
  line-height: 1.55;
}

.first-start-list li::before {
  content: "";

  position: absolute;
  left: 0;
  top: .28em;

  width: 16px;
  height: 16px;

  border: 2.5px solid #8FACC7;
  border-radius: 50%;
}

.first-start-list b,
.first-start-steps b {
  color: #FFFFFF;
  font-weight: 600;
}

/* правая колонка */

.first-start-steps {
  display: grid;
  gap: 14px;

  margin: 0;
  padding: 0;

  list-style: none;
  counter-reset: first-start-step;
}

.first-start-steps li {
  position: relative;

  min-height: 30px;
  padding-left: 44px;

  counter-increment: first-start-step;

  color: #EEF3F8;
  font-size: 16px;
  line-height: 1.55;
}

.first-start-steps li::before {
  content: counter(first-start-step);

  position: absolute;
  left: 0;
  top: -.1em;

  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;

  border: 2px solid #8FACC7;
  border-radius: 50%;

  color: #8FACC7;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

/* предупреждение */

.first-start-warning {
  display: flex;
  gap: 12px;
  align-items: flex-start;

  margin: 22px 0 0;
  padding: 14px 16px;

  border-radius: 12px;
  background: #111B24;

  color: #EEF3F8;
  font-size: 15px;
  line-height: 1.5;
}

.first-start-warning::before {
  content: "×";

  color: #F08A3C;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

/* бесплатная тренировка */

.first-start-free {
  margin: 22px 0 0;
  padding: 18px 20px;

  border-radius: 12px;
  background: #5A82A8;

  color: #FFFFFF;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}

.first-start-free b {
  color: #FFFFFF;
  font-weight: 800;
}

/* легенда */

.first-start-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;

  margin-top: clamp(40px, 5vw, 56px);
  padding-top: 24px;

  border-top: 1px solid #31414E;
}

.first-start-legend-title {
  flex-basis: 100%;

  margin: 0 0 4px;

  color: #8FACC7;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
}

.first-start-legend figure {
  display: flex;
  align-items: center;
  gap: 12px;

  margin: 0;

  color: #A3B4C4;
  font-size: 15px;
}

.first-start-legend svg {
  width: 34px;
  height: 34px;
}

.first-start-legend svg path,
.first-start-legend svg circle {
  fill: none;
  stroke: #8FACC7;
  stroke-width: 3;
}

.first-start-legend figure:first-of-type svg path {
  fill: #8FACC7;
  stroke: none;
}

.first-start-legend .route-symbol {
  fill: none;
  stroke: #8FACC7;
  stroke-width: 3;
  stroke-dasharray: 5 4;
}

@media (max-width: 760px) {
  .first-start-inner {
    padding-top: 64px;
        margin: 16px var(--gutter);
        padding: 48px 48px;
    padding-bottom: 72px;
  }

  .first-start-grid {
    grid-template-columns: 1fr;
  }

  .first-start h2 {
    font-size: 36px;
  }
}
/* --- First start width fix --- */

.first-start .first-start-inner {
  width: 100%;
  max-width: 1120px;
  box-sizing: border-box;
}

.first-start .first-start-grid {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.first-start .first-start-grid > div {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.first-start .first-start-list,
.first-start .first-start-steps {
  width: 100%;
  max-width: none;
}
@media (min-width: 960px) {
  main > .first-start {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
  }
}
@media (min-width: 960px) {
  main > .first-start {
    grid-column: 1 / -1;
    width: auto;
    max-width: none;
    margin: 0;
    padding-left: max(var(--pad-x), calc((100vw - 1120px) / 2));
    padding-right: max(var(--pad-x), calc((100vw - 1120px) / 2));
  }

  main > .first-start > .first-start-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
}
/* --- Redesign 2026: contacts --- */

.contacts-section {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  padding: 0;

  background: #EEF3F8;
  color: #1B2A37;
}

.contacts-inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 92px var(--pad-x) 100px;
  box-sizing: border-box;
}

.contacts-kicker {
  margin: 0 0 12px;

  color: #5A82A8;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
}

.contacts-section h2 {
  margin: 0 0 52px;

  color: #1B2A37;
  font-size: 42px;
  line-height: 1;
}

.contacts-section h2::after {
  content: "";
  display: block;

  width: 118px;
  height: 4px;
  margin-top: 20px;

  border-radius: 4px;
  background: #5A82A8;
}

.contacts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.contacts-card {
  min-width: 0;
  min-height: 190px;
  padding: 28px;

  background: #FFFFFF;
  border-top: 3px solid #5A82A8;
}

.contacts-card-label {
  margin: 0 0 20px;

  color: #5A82A8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.contacts-card h3 {
  margin: 0 0 16px;

  color: #1B2A37;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
}

.contacts-card-content,
.contacts-card-content p,
.contacts-city {
  margin: 0;

  color: #51606E;
  font-size: 16px;
  line-height: 1.6;
}

.contacts-card-content a,
.contacts-social {
  color: #5A82A8;
  text-decoration: none;
}

.contacts-card-content a:hover,
.contacts-social:hover {
  text-decoration: underline;
}

.contacts-social {
  display: inline-flex;
  align-items: center;

  font-size: 16px;
  font-weight: 700;
}

.contacts-social::after {
  content: " →";
  margin-left: 6px;
}

@media (min-width: 960px) {
  main > .contacts-section {
    grid-column: 1 / -1;
    width: auto;
    max-width: none;
    margin: 0;
    padding-left: max(var(--pad-x), calc((100vw - 1120px) / 2));
    padding-right: max(var(--pad-x), calc((100vw - 1120px) / 2));


  }

  main > .contacts-section > .contacts-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 760px) {
  .contacts-inner {
    padding-top: 64px;
    padding-bottom: 72px;
  }

  .contacts-section h2 {
    font-size: 36px;
  }

  .contacts-grid {
    grid-template-columns: 1fr;
  }
}
/* --- Redesign 2026: contacts → footer --- */

#contacts {
  margin-bottom: 0;
}

.site-footer {
  margin-top: 0;
}
main > #contacts.contacts-section {
  margin-bottom: 0;
  border-radius: 0;
}
/* --- Redesign 2026: contacts — dark reference --- */

#contacts.contacts-section {
  background: #111B24;
  color: #EEF3F8;
}

#contacts .contacts-kicker {
  color: #8FACC7;
}

#contacts h2 {
  color: #FFFFFF;
}

#contacts h2::after {
  background: #8FACC7;
}

/* Убираем белые карточки */

#contacts .contacts-grid {
  gap: 64px;
}

#contacts .contacts-card {
  min-height: 0;
  padding: 0;

  background: transparent;
  border: 0;
}

/* Маленькие подписи */

#contacts .contacts-card-label {
  margin: 0 0 10px;

  color: #8FACC7;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
}

/* Основные данные */

#contacts .contacts-card h3 {
  margin: 0 0 8px;

  color: #FFFFFF;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 800;
}

#contacts .contacts-card-content,
#contacts .contacts-card-content p,
#contacts .contacts-city {
  color: #A3B4C4;
}

/* Ссылки */

#contacts .contacts-card-content a,
#contacts .contacts-social {
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 800;
  text-decoration: none;
}

#contacts .contacts-social::after {
  content: "";
}

#contacts .contacts-card-content a:hover,
#contacts .contacts-social:hover {
  color: #8FACC7;
  text-decoration: none;
}

/* Footer как в референсе */

.site-footer {
  margin-top: 0;
  background: #0B131A;
}
/* --- Redesign 2026: contacts geometry --- */

#contacts .contacts-inner {
  width: min(1120px, calc(100% - 64px));
  max-width: 1120px;
  margin: 0 auto;
  padding: 0px 0 110px;
}

#contacts .contacts-head {
  margin-bottom: 64px;
}

#contacts .contacts-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: 72px;
  align-items: start;
}

#contacts .contacts-card {
  width: auto;
  max-width: none;
}

#contacts .contacts-card p {
  margin: 0;
  color: #A3B4C4;
  font-size: 16px;
  line-height: 1.55;
}

#contacts .contacts-card h3 {
  margin: 10px 0 8px;
  font-size: 22px;
  line-height: 1.25;
}

#contacts .contacts-card h3 a {
  color: #FFFFFF;
  text-decoration: none;
}

#contacts .contacts-copy {
  margin-top: 14px;
  padding: 8px 13px;
  border: 1px solid #8FACC7;
  border-radius: 8px;
  background: transparent;
  color: #8FACC7;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

#contacts .contacts-copy:hover {
  background: #8FACC7;
  color: #1B2A37;
}

@media (max-width: 960px) {
  #contacts .contacts-inner {
    width: min(100% - 40px, 1120px);
    padding: 0px 0 72px;
  }

  #contacts .contacts-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
/* --- Contacts: full-width section fix --- */

main > #contacts {
  grid-column: 1 / -1;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

#contacts .contacts-inner {
  width: min(1120px, calc(100% - 64px));
  max-width: 1120px;
  margin-left: 0;
  margin-right: 0;
}

#contacts .contacts-head,
#contacts .contacts-grid {
  width: 100%;
}
/* --- Contacts final geometry --- */

main > #contacts.contacts-section {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  min-height: 0;
  height: auto;
}

#contacts .contacts-inner {
  width: min(1120px, calc(100% - 64px)) !important;
  max-width: 1120px !important;
  margin: 0 !important;
  padding: 0px 0 110px;
}

/* --- Fix: about + goals full width --- */

@media (min-width: 960px) {
  main > #about,
  main > #goals {
    grid-column: 1 / -1;
    margin: 0;
    padding-left: max(var(--pad-x), calc((100vw - 1120px) / 2));
    padding-right: max(var(--pad-x), calc((100vw - 1120px) / 2));
  }
}

#about {
  background: #111B24;
  color: #EEF3F8;
}
/* --- Redesign 2026: header reference --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;

  min-height: 86px;
  padding: 0 max(var(--pad-x), calc((100vw - 1120px) / 2));

  background: #111B24;
  color: #FFFFFF;
  border-bottom: 0;
}

.site-header-row {
  flex: 0 0 auto;
  min-height: 86px;
}

.site-wordmark {
  width: 116px;
  height: auto;
}

.site-nav {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.site-menu {
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

.site-menu a {
  min-height: 44px;
  padding: 0 10px;

  color: #EEF3F8;
  background: transparent;
  border-radius: 8px;

  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.site-menu a:hover {
  color: #FFFFFF;
  background: rgb(255 255 255 / 0.07);
}

/* RU / KZ / EN */

.lang-switcher {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 2px;

  margin-left: 0;
  padding: 3px;

  border: 1px solid #31414E;
  border-radius: 10px;
}

.lang-switcher a {
  min-width: 40px;
  min-height: 34px;
  padding: 0 9px;

  justify-content: center;

  border-radius: 7px;

  color: #A3B4C4;
  background: transparent;

  font-size: 0;
  font-weight: 700;
  text-decoration: none;
}

.lang-switcher a::before {
  content: attr(data-lang);
  font-size: 12px;
  text-transform: uppercase;
}

/* В дизайне kk показываем как KZ */
.lang-switcher a[data-lang="kk"]::before {
  content: "KZ";
}

.lang-switcher a[aria-current="true"] {
  color: #FFFFFF;
  background: #5A82A8;
}

.lang-switcher a:hover {
  color: #FFFFFF;
  background: #31414E;
}

/* mobile */

@media (max-width: 959px) {
  .site-header {
    min-height: 64px;
  }

  .site-header-row {
    min-height: 64px;
  }

  .site-wordmark {
    width: 100px;
  }
}/* --- Redesign 2026: header reference --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;

  min-height: 86px;
  padding: 0 max(var(--pad-x), calc((100vw - 1120px) / 2));

  background: #111B24;
  color: #FFFFFF;
  border-bottom: 0;
}

.site-header-row {
  flex: 0 0 auto;
  min-height: 86px;
}

.site-wordmark {
  width: 116px;
  height: auto;
}

.site-nav {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.site-menu {
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

.site-menu a {
  min-height: 44px;
  padding: 0 10px;

  color: #EEF3F8;
  background: transparent;
  border-radius: 8px;

  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.site-menu a:hover {
  color: #FFFFFF;
  background: rgb(255 255 255 / 0.07);
}

/* RU / KZ / EN */

.lang-switcher {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 2px;

  margin-left: 0;
  padding: 3px;

  border: 1px solid #31414E;
  border-radius: 10px;
}

.lang-switcher a {
  min-width: 40px;
  min-height: 34px;
  padding: 0 9px;

  justify-content: center;

  border-radius: 7px;

  color: #A3B4C4;
  background: transparent;

  font-size: 0;
  font-weight: 700;
  text-decoration: none;
}

.lang-switcher a::before {
  content: attr(data-lang);
  font-size: 12px;
  text-transform: uppercase;
}

/* В дизайне kk показываем как KZ */
.lang-switcher a[data-lang="kk"]::before {
  content: "KZ";
}

.lang-switcher a[aria-current="true"] {
  color: #FFFFFF;
  background: #5A82A8;
}

.lang-switcher a:hover {
  color: #FFFFFF;
  background: #31414E;
}

/* mobile */

@media (max-width: 959px) {
  .site-header {
    min-height: 64px;
  }

  .site-header-row {
    min-height: 64px;
  }

  .site-wordmark {
    width: 100px;
  }
}
.lang-switcher {
  border-radius: 999px;
}

.lang-switcher a {
  border-radius: 999px;
}

.lang-switcher a[aria-current="true"] {
  border-radius: 999px;
}
.site-menu a[href*="/archive/"]::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 5px;
  vertical-align: -1px;

  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* =========================================================
   EVENT PAGE — INTERRA 2026
   ========================================================= */

/* вся страница события */
body:has(.event-main) {
  background: #111B24;
  color: #EEF3F8;
}

/* старый зелёный hero превращаем в новый */
.event-main {
  position: relative;
  overflow: hidden;

  grid-column: 1 / -1;

  margin: 0;
  padding:
    78px
    max(var(--pad-x), calc((100vw - 1120px) / 2))
    74px;

  background: #111B24;

  color: #EEF3F8;
}

/* лёгкие "горизонтали" вместо старых гор */
.event-main::before {
  display: none;
}
/* всё содержимое поверх фона */
.event-main > * {
  position: relative;
  z-index: 1;
}

.event-main h1 {
  max-width: 1120px;
  margin: 0 auto 42px;

  color: #FFFFFF;
  font-size: clamp(42px, 4.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

/* МЕСТО / ДАТА / СТАРТ */
.event-main .event-info {
  width: 100%;
  max-width: 1120px;

  margin: 0 auto;

  display: grid;
  grid-template-columns: 1.35fr 1fr .8fr;
  gap: 64px;
}

.event-main .info-row {
  display: block;
  margin: 0;
}

.event-main .info-row dt {
  margin: 0 0 8px;

  color: #8FACC7;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.event-main .info-row dd {
  margin: 0;

  color: #EEF3F8;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
}

/* дополнительная информация */
.event-main .event-info-extra {
  width: 100%;
  max-width: 1120px;

  margin: 36px auto 0;

  color: #A3B4C4;
  line-height: 1.65;
}

/* убиваем старую декоративную геометрию hero */
.event-main::after {
  display: none;
}
.event-main-contours {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.event-main > :not(.event-main-contours) {
  position: relative;
  z-index: 1;
}
/* Event hero действительно на всю ширину */
body:has(.event-main) main {
  display: block;
}

body:has(.event-main) .event-main {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.event-main > .event-main-contours {
  max-width: none;
}
/* --- EVENT 2026: distances --- */

.event-distances {
  grid-column: 1 / -1;

  width: 100%;
  max-width: none;
  margin: 0;
  padding:
    72px
    max(var(--pad-x), calc((100vw - 1120px) / 2))
    64px;

  box-sizing: border-box;

  background: #FFFFFF;
  border-radius: 0;
  box-shadow: none;

  color: #1B2A37;
}

.event-distances > h2 {
  margin: 0 0 32px;

  color: #1B2A37;
  font-size: 36px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.event-distances > h2::after {
  content: "";
  display: block;

  width: 90px;
  height: 4px;
  margin-top: 16px;

  border-radius: 999px;
  background: #5A82A8;
}

.event-distances .table-scroll {
  width: 100%;
  max-width: 1120px;

  overflow: hidden;

  border-top: 2px solid #1B2A37;
  border-bottom: 1px solid #CBD5DE;
}

.event-distances table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

.event-distances th {
  padding: 15px 18px;

  color: #51606E;
  background: #EEF3F8;

  border: 0;
  border-bottom: 1px solid #CBD5DE;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: left;
}

.event-distances td {
  padding: 18px;

  color: #1B2A37;
  background: #FFFFFF;

  border: 0;
  border-bottom: 1px solid #DCE4EA;

  font-size: 16px;
}

.event-distances tbody tr:last-child td {
  border-bottom: 0;
}

.event-distances tbody tr:hover td {
  background: #F6F8FA;
}
.event-distances > h2 {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto 32px;
}

.event-distances > .table-scroll {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}
/* --- EVENT 2026: registration form --- */

.registration {
  grid-column: 1 / -1;

  width: 100%;
  max-width: none;
  margin: 0;
  padding:
    36px
    max(var(--pad-x), calc((100vw - 1120px) / 2))
    80px;

  box-sizing: border-box;

  background: #FFFFFF;
  border-radius: 0;
  box-shadow: none;

  color: #1B2A37;
}

/* сама форма по центру */
.registration form {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

/* поля — удобная ширина, не на весь экран */
.registration .field {
  width: 100%;
  max-width: 560px;
  margin-bottom: 26px;
}

.registration label,
.registration legend {
  color: #1B2A37;
  font-size: 14px;
  font-weight: 700;
}

/* текстовые поля + select */
.registration input[type="text"],
.registration input[type="email"],
.registration input[type="number"],
.registration select {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;

  padding: 0 14px;

  color: #1B2A37;
  background:#8facc7;

  border: 1px solid #A3B4C4;
  border-radius: 10px;

  font: inherit;
  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}

.registration input:focus,
.registration select:focus {
  outline: none;
  border-color: #5A82A8;
  box-shadow: 0 0 0 3px rgb(90 130 168 / 0.15);
}

/* пол */
.registration .field-gender {
  border: 0;
  padding: 0;
}

.registration .field-gender label {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-right: 24px;

  color: #1B2A37;
  font-weight: 500;
}

.registration input[type="radio"] {
  accent-color: #5A82A8;
}

/* текст оферты */
.registration .reg-notice {
  max-width: 560px;

  color: #51606E;
  font-size: 13px;
  line-height: 1.55;
}

.registration .reg-notice a {
  color: #5A82A8;
  text-decoration: underline;
}
/* EVENT — registration button */

#reg-form > .button {
  min-height: 50px;
  padding: 0 26px;

  color: #FFFFFF;
  background: #5A82A8;

  border: 0;
  border-radius: 10px;

  font: inherit;
  font-weight: 800;

  cursor: pointer;

  transition:
    background .15s ease,
    transform .15s ease;
}

#reg-form > .button:hover {
  color: #FFFFFF;
  background: #496F92;
}

#reg-form > .button:active {
  transform: translateY(1px);
}
/* --- EVENT 2026: participants --- */

.participant-list {
  grid-column: 1 / -1;

  width: 100%;
  max-width: none;
  margin: 0;
  padding:
    40px
    max(var(--pad-x), calc((100vw - 1120px) / 2))
    80px;

  box-sizing: border-box;

  color: #1B2A37;
  background: #EEF3F8;

  border-radius: 0;
  box-shadow: none;
}

/* Участники — 0 */
.participant-list h2,
.participant-list .participant-count {
  color: #1B2A37;
}

/* таблица */
.participant-list .table-scroll {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;

  overflow: hidden;

  background: #8facc7;
  border: 1px solid #CBD5DE;
  border-radius: 12px;
}

.participant-list table {
  width: 100%;
  border-collapse: collapse;
}

.participant-list th {
  padding: 15px 18px;

  color: #51606E;
  background: #8facc7;

  border: 0;
  border-bottom: 1px solid #CBD5DE;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.participant-list td {
  padding: 16px 18px;

  color: #1B2A37;
  background: #8facc7;

  border: 0;
  border-bottom: 1px solid #DCE4EA;
}

/* "Пока никто не зарегистрировался" */
.participant-list .empty-row td {
  color: #51606E;
}
body:has(.event-main) main::after,
body:has(.event-main) .participant-list::after {
  display: none !important;
  content: none !important;
}
/* Registration — main light background */
.registration {
  background: #8facc7;
}

/* Participants — alternate light background */
.participant-list {
  background: #EEF3F8;
}
.event-distances {
  background: #8FACC7;
}
body:has(.event-main) main {
  background: #8FACC7;
}
.participant-list {
  background: #1B2A37;
  color: #EEF3F8;
}

.participant-list h2 {
  color: #EEF3F8;
}

.participant-list .empty-row td {
  color: #A3B4C4;
}
/* Participants — contrast according to brand palette */

.participant-list {
  background: #1B2A37;
  color: #EEF3F8;
}

.participant-list h2 {
  color: #EEF3F8;
}

.participant-list th {
  color: #1B2A37;
  background: #8FACC7;
}

.participant-list td {
  color: #1B2A37;
  background: #8FACC7;
}
.participant-list .empty-row td {
  color: #A3B4C4;
}

/* убрать светло-голубую полосу снизу */
.participant-list {
  border-bottom: 0;
}

body:has(.event-main) main {
  padding-bottom: 0;
}
body:has(.event-main) main {
  background: #1B2A37;
}
.event-distances,
.registration {
  background: #8FACC7;
}
body:has(.event-main) main {
  background: #8FACC7;
}
body:has(.event-main) main {
  background: #8FACC7;
  gap: 0;
}

.event-main,
.event-distances,
.registration,
.participant-list {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* последний блок должен вплотную примыкать к footer */
.participant-list {
  padding-bottom: 80px;
}

.site-footer {
  margin-top: 0 !important;
}
.registration-closed p {
  background: #FFFFFF;
  color: #F08A3C;
  border: 0;
}
/* --- ARCHIVE 2026: hero --- */

.page-title {
  position: relative;
  overflow: hidden;

  margin: 0;
  padding:
    72px
    max(var(--pad-x), calc((100vw - 1120px) / 2))
    72px;

  background: #111B24 !important;
  color: #FFFFFF;

  font-size: clamp(42px, 4.5vw, 64px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.035em;
}

/* старые горы / солнце */
.page-title::before,
.page-title::after {
  display: none !important;
  content: none !important;
}
.page-title {
  min-height: 260px;
  padding:
    0
    max(var(--pad-x), calc((100vw - 1120px) / 2));

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  background: #111B24 !important;
  color: #FFFFFF;
}
/* --- ARCHIVE 2026: content --- */

.archive-year {
  width: 100%;
  max-width: none;
  margin: 0;
  padding:
    64px
    max(var(--pad-x), calc((100vw - 1120px) / 2))
    80px;

  background: #EEF3F8;
  border: 0;
  border-radius: 0;
  box-shadow: none;

  color: #1B2A37;
}

.archive-year h2 {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto 28px;
  padding-bottom: 18px;

  color: #1B2A37;

  border-bottom: 2px solid #1B2A37;

  font-size: 38px;
  line-height: 1;
  font-weight: 800;
}

.archive-list {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;

  list-style: none;
}

.archive-entry {
  padding: 26px 0 30px;

  border-bottom: 1px solid #A3B4C4;
}

.archive-entry:last-child {
  border-bottom: 0;
}

.archive-entry-title {
  margin: 0 0 8px;

  color: #1B2A37;

  font-size: 20px;
  line-height: 1.35;
  font-weight: 800;
}

.archive-entry-title a {
  color: #1B2A37;
  text-decoration: none;
}

.archive-entry-title a:hover {
  color: #5A82A8;
}

.archive-entry-place {
  margin: 0 0 18px;

  color: #51606E;

  font-size: 15px;
}

.archive-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  margin: 0;
}

.archive-links a {
  display: inline-flex;
  align-items: center;

  min-height: 40px;
  padding: 0 16px;

  color: #FFFFFF;
  background: #5A82A8;

  border-radius: 10px;

  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.archive-links a:hover {
  color: #FFFFFF;
  background: #496F92;
}
body:has(.archive-year) main {
  background: #51606E;
}
/* =========================================================
   БЮЛЛЕТЕНЬ СОРЕВНОВАНИЙ
   ========================================================= */

.event-bulletin {
  background: #8FACC7;
  border: 0;
  border-radius: 0;
  box-shadow: none;

  margin: 0;
  padding:
    34px
    max(var(--pad-x), calc((100vw - 1120px) / 2));
}

/* Кнопка «Открыть бюллетень соревнований (PDF)» */
.event-bulletin a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 18px;

  background: #5A82A8;
  color: #FFFFFF;

  border: 0;
  border-radius: 10px;

  font-weight: 800;
  text-decoration: none;
}

.event-bulletin a:hover {
  background: #496F92;
  color: #FFFFFF;
}

//* =========================================================
   БЛОК БЮЛЛЕТЕНЯ
   ========================================================= */

.event-bulletin {
  width: 100%;
  margin: 0;
  padding: 34px var(--pad-x);

  display: flex;
  justify-content: center;

  background: #8FACC7;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Кнопка «Открыть бюллетень соревнований (PDF)» */
.event-bulletin a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 46px;
  padding: 0 18px;

  background: #5A82A8;
  color: #FFFFFF;
  border: 0;
  border-radius: 10px;

  font-weight: 800;
  text-decoration: none;
}

.event-bulletin a:hover {
  background: #496F92;
  color: #FFFFFF;
}
/* БЮЛЛЕТЕНЬ — финальная центровка */
.event-bulletin {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  width: 100%;
  margin: 0;
  padding: 34px var(--pad-x);

  background: #8FACC7 !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* МОБИЛЬНАЯ ВЕРСИЯ — рамка блока «О клубе» */
@media (max-width: 960px) {
  body:has(.home-hero) main {
    background: #1B2A37;
  }
}
/* МОБИЛЬНАЯ ВЕРСИЯ — прокрутка таблицы дистанций */
@media (max-width: 960px) {
  .event-distances .table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .event-distances table {
    width: 100%;
    min-width: 550px;
  }

  .event-distances th,
  .event-distances td {
    white-space: nowrap;
  }
}
/* ПЕРВЫЙ СТАРТ — центрирование цифр */
.first-start ol li::before {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* ПЕРВЫЙ СТАРТ — одна колонка на телефонах */
@media (max-width: 960px) {
  section#first-start {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  section#first-start .first-start-inner,
  section#first-start .first-start-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* МОБИЛЬНАЯ ВЕРСИЯ — легенда карты */
@media (max-width: 960px) {
  .first-start-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
    margin-top: 32px;
    padding: 24px 0 0;
    border-top: 1px solid #31414E;
  }

  .first-start-legend-title {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    color: #8FACC7;
  }

  .first-start-legend figure {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
  }

  .first-start-legend svg {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
  }

  .first-start-legend figcaption {
    color: #EEF3F8;
    line-height: 1.4;
  }

  #first-start {
    padding-bottom: 48px;
  }

  #contacts {
    padding-top: 48px;
    padding: 48px 48px;
  }
}
.registration-closed {
  justify-self: center;
}
@media (max-width: 960px) {
	.site-header{
	 --pad-x: 24px;
    padding-inline: var(--pad-x);
   } 
  .home-hero{
	 --pad-x: 24px;
    padding-inline: var(--pad-x);
  } 
  .about{
	 --pad-x: 24px;
    padding-inline: var(--pad-x);
  } 
  .goals{
	 --pad-x: 24px;
    padding-inline: var(--pad-x);
  } 
  .calendar{
	 --pad-x: 24px;
    padding-inline: var(--pad-x);
  } 
  .first-start{
	 --pad-x: 24px;
    padding-inline: var(--pad-x);
  } 
  .Contacts{
	 --pad-x: 24px;
    padding-inline: var(--pad-x);
  } 
 
     
  
  .event-main {
    --pad-x: 24px;
    padding-inline: var(--pad-x);
  }
   .event-about {
    --pad-x: 24px;
    padding-inline: var(--pad-x);
  }
  .event-payment {
    --pad-x: 24px;
    padding-inline: var(--pad-x);
  }
  .event-distances{
	  --pad-x: 24px;
    padding-inline: var(--pad-x);
  }
  .registration{
	 --pad-x: 24px;
    padding-inline: var(--pad-x);
  } 
  .participant-list{
	  --pad-x: 24px;
    padding-inline: var(--pad-x);
  }
  .site-footer{
	 --pad-x: 24px;
    padding-inline: var(--pad-x);
  } 
}
.payment-modal {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  text-align: center;
}

.payment-amount {
  margin: 12px 0;
  color: #111B24;
  font-size: 28px;
  font-weight: 800;
}

.payment-instruction {
  margin: 12px 0 18px;
  line-height: 1.5;
}

.payment-qr {
  display: block;
  width: min(100%, 280px);
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
}

.payment-recipient {
  margin: 12px 0 0;
  font-weight: 650;
}

.payment-note {
  margin: 12px 0 20px;
  font-size: 13px;
  color: #64748B;
}
.event-about {
  grid-column: 1 / -1;
  width: 100%;
  padding: 64px max(var(--pad-x), calc((100vw - 1120px) / 2));
  background: #1B2A37;
  color: #FFFFFF;
}

.event-about-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.event-about h2 {
  margin: 0 0 24px;
  font-family: Unbounded, sans-serif;
  font-size: clamp(26px, 3vw, 38px);
}

.event-about h3 {
  margin: 32px 0 12px;
  font-family: Unbounded, sans-serif;
  font-size: clamp(17px, 2vw, 22px);
}

.event-about p {
  max-width: 850px;
  margin: 0 0 16px;
  line-height: 1.7;
}

@media (max-width: 767px) {
  .event-about {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
.event-payment {
  grid-column: 1 / -1;
  width: 100%;
  padding: 64px max(var(--pad-x), calc((100vw - 1120px) / 2));
  background: #1B2A37;
  color: #FFFFFF;
}

.event-payment-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.event-payment h2 {
  margin: 0 0 24px;
  font-family: Unbounded, sans-serif;
  font-size: clamp(26px, 3vw, 38px);
}

.event-payment h3 {
  margin: 0 0 20px;
  font-size: 21px;
}

.event-payment-table-scroll {
  overflow-x: auto;
}

.event-payment table {
  width: 100%;
  border-collapse: collapse;
  background: #EEF3F8;
  border-radius: 12px;
  overflow: hidden;
}

.event-payment th,
.event-payment td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid #C9D5E0;
}

.event-payment thead {
  background: #17242F;
  color: #FFFFFF;
}

.event-payment tbody tr:last-child th,
.event-payment tbody tr:last-child td {
  border-bottom: none;
}

.event-payment-points {
  margin: 28px 0;
  padding-left: 24px;
  line-height: 1.7;
}

.event-payment-points li {
  margin-bottom: 10px;
}

.event-payment-contact {
  margin: 24px 0 0;
  font-weight: 600;
}

.event-payment-contact a {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .event-payment {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .event-payment table {
    min-width: 420px;
  }
}
.event-payment tbody th,
.event-payment tbody td {
  color: #111B24;
}
.payment-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 18px auto;
  padding: 12px 22px;
  border-radius: 999px;
  background: #1D6D58;
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}

.payment-link:hover {
  background: #155543;
  color: #FFFFFF;
}

@media (min-width: 960px) {
  main > .legal-page {
    grid-column: 1 / -1;
    width: min(100% - 48px, 1120px);
    max-width: 1120px;
    margin: 24px auto;
    padding: 40px;
    box-sizing: border-box;
  }
}
/* --- ARCHIVE 2026 Fixes --- */

body:has(.archive-hero) main {
  display: block;
  background: #EEF3F8;
}

.archive-hero {
  width: 100%;
  background: #111B24;
  padding: 72px max(var(--pad-x), calc((100vw - 1120px) / 2));
}

.archive-hero .page-title {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
  display: block;
  text-align: left;
  min-height: 0;
  background: transparent !important;
  color: #FFFFFF;
  font-size: clamp(42px, 4.5vw, 64px);
  line-height: 1.05;
}

.archive-year {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 64px max(var(--pad-x), calc((100vw - 1120px) / 2)) 80px;
  background: #EEF3F8;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #1B2A37;
  box-sizing: border-box;
}

.archive-year-inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.archive-year h2 {
  width: 100%;
  margin: 0 auto 28px;
  padding-bottom: 18px;
  color: #1B2A37;
  border-bottom: 2px solid #1B2A37;
  font-size: 38px;
  line-height: 1;
  font-weight: 800;
}

.archive-list {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}