/* Оформление сайта Единой федерации шахмат г. Иркутска — efshi.angarachess.ru.

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

   Белых полотен здесь нет намеренно. Федерация — не школа и не центр
   творчества: она проводит городские соревнования и удостоверяет их, поэтому
   страница строгая, без скруглений-пузырей и карточек с тенями. Но и не
   бумажный бланк: сайт, а не скан документа.

   Шрифты лежат рядом, а не тянутся с Google: страницу открывают с телефонов,
   и внешняя зависимость в первой строке ей не нужна. PT Serif и PT Sans
   выбраны не случайно — это шрифты ParaType, сделанные для русской типографики
   казённых документов, и в этом качестве они здесь и работают. */

@font-face {
  font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/pt-serif-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/pt-serif-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2212;
}
@font-face {
  font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/pt-serif-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/pt-serif-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2212;
}
@font-face {
  font-family: 'PT Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/pt-sans-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/pt-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2212;
}
@font-face {
  font-family: 'PT Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/pt-sans-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/pt-sans-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2212;
}

:root {
  --pole: #faf1e0;        /* кремовое поле вывески — фон всего сайта */
  --pole-tyomnoe: #f3e7d0; /* та же бумага на полтона глубже: полосы и врезки */
  --sin-glubokiy: #1a2750; /* синие полосы: афиша и низ */
  --sin: #203265;          /* чернила: заголовки, ссылки, кнопка */
  --sin-svetlyy: #2c479d;
  --baikal: #98a9cb;       /* голубой силуэта: линии и приглушённые подписи */
  --tekst: #1f2a4e;
  --tihiy: #5c6480;
  --na-sinem: #f7eedc;     /* кремовый текст на синей полосе */
  --ohra: #8a5b10;         /* состояния: закрыто, мест нет, долг по взносу */
  --zelyonyy: #2f6b3a;     /* взнос внесён */
  --krasnyy: #9e1b2f;      /* отказ формы */
  --antikva: 'PT Serif', Georgia, 'Liberation Serif', 'Times New Roman', serif;
  --grotesk: 'PT Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pole);
  color: var(--tekst);
  font-family: var(--antikva);
  font-size: 17px;
  line-height: 1.62;
}

/* Поле страницы. Одна ширина у шапки, содержимого и низа: ступенька между
   ними заметнее любого украшения. */
.obyom { max-width: 940px; margin: 0 auto; padding: 0 24px; }

a { color: var(--sin); text-decoration: none; border-bottom: 1px solid var(--baikal); }
a:hover { border-bottom-color: var(--sin); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--sin-svetlyy); outline-offset: 2px; }

h1, h2, h3 { font-weight: 700; color: var(--sin); line-height: 1.22; }

/* ——— шапка ——— */

.verh { padding: 14px 0; }
.verh .obyom { display: flex; align-items: center; gap: 15px; }
.k-glavnoy { border: 0; display: block; flex: none; }
.verh .logotip { height: 46px; width: auto; display: block; }
.verh .imya { font-size: 15px; line-height: 1.3; }
.verh .imya a { border: 0; color: var(--sin); font-weight: 700; display: block; }
.verh .imya .korotkoe { display: none; }
.verh .imya span.rod { display: block; color: var(--tihiy); font-weight: 400; font-size: 14px; }
.verh .sayt { margin-left: auto; font-family: var(--grotesk); font-size: 15px; }

/* ——— низ ——— */

.niz {
  margin-top: 64px;
  background: var(--sin-glubokiy);
  color: var(--na-sinem);
  padding: 40px 0 46px;
  font-size: 15.5px;
}
.niz .obyom { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; }
.niz b { display: block; font-family: var(--grotesk); font-size: 14px; font-weight: 700;
         color: var(--baikal); margin-bottom: 7px; }
.niz p { margin: 0 0 8px; }
.niz a { color: var(--na-sinem); border-bottom-color: rgba(247, 238, 220, .35); }
.niz a:hover { border-bottom-color: var(--na-sinem); }
.niz .chya-sistema { color: var(--baikal); font-size: 14.5px; margin-top: 12px; }
/* Вход сотрудников: участнику он не нужен, тренер ищет служебную дверь внизу. */
.niz .sluzhebnoe { color: var(--baikal); font-size: 14.5px; }
.niz .sluzhebnoe button {
  font: inherit; font-family: var(--grotesk); font-size: 14.5px; background: none;
  border: 0; border-bottom: 1px solid rgba(247, 238, 220, .35); color: var(--na-sinem);
  cursor: pointer; padding: 0;
}

/* ——— главная ——— */

/* Знак федерации во всю ширину поля: вывеска и есть главное, что о ней надо
   знать человеку, попавшему на голый адрес. */
.vyveska { padding: 44px 0 10px; display: flex; align-items: center; gap: 38px; flex-wrap: wrap; }
.vyveska img { width: min(300px, 62vw); height: auto; }
.vyveska .slova { flex: 1 1 320px; min-width: 0; }
.vyveska h1 { margin: 0; font-size: clamp(25px, 3.2vw, 32px); max-width: 17ch; }
.vyveska p { margin: 15px 0 0; max-width: 48ch; color: var(--tihiy); }

/* Синяя полоса с силуэтом Байкала — единственное громкое место главной.
   Силуэт тянется во всю высоту полосы и уходит за правый край: на широком
   экране текст занимает левую треть, и пустое место справа нужно чем-то
   держать. */
.o-nas {
  margin-top: 34px;
  background: var(--sin-glubokiy) url(/assets/baikal.png) no-repeat right 8vw top -10px;
  background-size: auto 150%;
  color: var(--na-sinem);
  padding: 40px 0 44px;
}
.o-nas p {
  margin: 0; max-width: 62ch; font-size: 18.5px; line-height: 1.6;
}

/* Три полосы содержания. На ПК они и забирают ширину, которой раньше не было
   чем занять: колонка в 940 точек оставляла две трети экрана пустыми. */
.polosy {
  padding: 44px 0 10px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 34px;
}
.polosy h2 { margin: 0 0 10px; font-size: 20px; }
.polosy p { margin: 0; color: var(--tihiy); }
.polosy a { color: var(--sin); }

@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .verh .logotip { height: 38px; }
  .verh .imya .polnoe { display: none; }
  .verh .imya .korotkoe { display: block; }
  .vyveska { padding-top: 26px; gap: 22px; }
  .o-nas { background-size: auto 130%; background-position: right -70px top -10px; padding: 30px 0 32px; }
  .o-nas p { font-size: 17px; }
  .polosy { padding-top: 30px; gap: 26px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }