/* ============================================================
   Дизайн-система «Афиша турнира»
   Подключается первым, до остальных стилей страницы.
   Шрифты: Unbounded (заголовки) + Manrope (текст), файлы в assets/fonts.
   ============================================================ */

/* Шрифты лежат на сайте, без запросов к Google: Manrope и Unbounded (SIL Open Font License).
   Вариативные файлы — один файл на все начертания; только кириллица и латиница. */
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 }
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("fonts/manrope-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face{ font-family:'Unbounded'; font-style:normal; font-weight:200 900; font-display:swap;
  src:url("fonts/unbounded-cyrillic.woff2") format("woff2");
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 }
@font-face{ font-family:'Unbounded'; font-style:normal; font-weight:200 900; font-display:swap;
  src:url("fonts/unbounded-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }

:root{
  /* --- Поверхности --------------------------------------- */
  --paper:      #F7EFE0;   /* фон страницы, тёплая бумага */
  --card:       #FFFFFF;   /* карточки и панели */
  --ink:        #14110D;   /* контур, тёмные плашки, основной текст */

  /* --- Акценты -------------------------------------------- */
  --blue:       #1B3DF5;   /* ссылки, главная кнопка. 6.06 на бумаге — AA */
  --yellow:     #FFD400;   /* заливка под чёрный текст. 13.15 — AAA */
  --red:        #F5451F;   /* заливка крупных блоков; текст поверх только чёрный (5.16) */
  --red-deep:   #C42E0D;   /* если нужен белый мелкий текст (5.61) или красный текст на бумаге (4.91) */

  /* --- Текст ---------------------------------------------- */
  --text:       #14110D;   /* 16.47 на бумаге — AAA */
  --text-2:     #4A4438;   /* абзацы статей, 8.45 — AAA */
  --text-3:     #6B6455;   /* подписи и метаданные, 5.13 — AA. Ниже не опускаться */
  --on-dark:    #F7EFE0;

  /* --- Линии и объём -------------------------------------- */
  --hair:       #C9BFA9;   /* тонкие декоративные разделители */
  --bw:         3px;       /* толщина основного контура */
  --off:        6px;       /* смещение жёсткой тени */
  --radius:     0px;       /* стиль принципиально без скруглений */

  /* --- Типографика ---------------------------------------- */
  --display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-h1:    clamp(38px, 6.2vw, 62px);
  --t-h2:    clamp(27px, 3.6vw, 36px);
  --t-h3:    clamp(19px, 2.1vw, 22px);
  --t-lead:  clamp(17px, 1.7vw, 19px);
  --t-body:  16.5px;
  --t-small: 14px;
  --t-micro: 12px;

  /* --- Сетка ---------------------------------------------- */
  --maxw: 1240px;
  --pad:  clamp(18px, 3.4vw, 28px);
  --gap:  clamp(16px, 1.7vw, 22px);
}

/* На узких экранах контур и тени тоньше, иначе давят */
@media (max-width: 640px){
  :root{ --bw:2.5px; --off:4px; }
}

/* ============================================================
   База
   ============================================================ */
*{ box-sizing:border-box }
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{ width:min(var(--maxw), 100%); margin-inline:auto; padding-inline:var(--pad) }

h1,h2,h3,.display{ font-family:var(--display); font-weight:900; letter-spacing:-.02em; line-height:1.05; margin:0 }
h1{ font-size:var(--t-h1) }
h2{ font-size:var(--t-h2) }
h3{ font-size:var(--t-h3); font-weight:700; letter-spacing:-.01em; line-height:1.15 }
p{ margin:0 0 1em }
.lead{ font-size:var(--t-lead); line-height:1.55; color:var(--text-2); max-width:62ch }
.article p, .article li{ color:var(--text-2); max-width:70ch }
.meta{ font-size:var(--t-small); color:var(--text-3) }

/* Выделение маркером — только по одной строке заголовка, иначе шумит */
.mark{ background:var(--yellow); padding:0 .14em; margin-left:-.14em; box-decoration-break:clone;
       -webkit-box-decoration-break:clone }

a{ color:var(--blue) }
:focus-visible{ outline:var(--bw) solid var(--blue); outline-offset:2px }

/* ============================================================
   Кнопки
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 22px;
  font-family:var(--sans); font-weight:800; font-size:15px;
  text-decoration:none; color:var(--ink);
  background:var(--card);
  border:var(--bw) solid var(--ink);
  box-shadow:var(--off) var(--off) 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translate(2px,2px); box-shadow:calc(var(--off) - 2px) calc(var(--off) - 2px) 0 var(--ink) }
.btn:active{ transform:translate(var(--off),var(--off)); box-shadow:0 0 0 var(--ink) }
.btn--primary{ background:var(--blue); color:#fff }
.btn--yellow{ background:var(--yellow); color:var(--ink) }
.btn--flat{ box-shadow:none }

/* Текстовая ссылка-действие */
.link{ font-weight:800; font-size:var(--t-small); color:var(--blue);
       text-decoration:none; border-bottom:2.5px solid var(--blue); padding-bottom:1px }
.link:hover{ color:var(--red-deep); border-color:var(--red-deep) }

/* ============================================================
   Метки
   ============================================================ */
.tag{
  display:inline-block; font-weight:800; font-size:var(--t-micro);
  letter-spacing:.12em; text-transform:uppercase;
  padding:5px 10px; border:2.5px solid var(--ink); background:var(--card); color:var(--ink);
}
.tag--red{ background:var(--red); color:var(--ink) }      /* поверх алого только чёрный */
.tag--yellow{ background:var(--yellow) }
.tag--blue{ background:var(--blue); color:#fff }
.tag--tilt{ transform:rotate(-1.5deg) }

/* ============================================================
   Карточки
   ============================================================ */
.card{
  background:var(--card);
  border:var(--bw) solid var(--ink);
  box-shadow:var(--off) var(--off) 0 var(--ink);
  display:flex; flex-direction:column;
}
.card__body{ padding:20px }
.card h3{ margin:6px 0 8px }
.card p{ color:var(--text-2); font-size:15px; margin-bottom:14px }
.card--link:hover{ transform:translate(2px,2px); box-shadow:calc(var(--off) - 2px) calc(var(--off) - 2px) 0 var(--ink) }
.card--link{ transition:transform .12s ease, box-shadow .12s ease }

/* Крупная карточка-строка для главных разделов */
.row-card{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:22px;
  padding:26px 28px;
  background:var(--card); border:var(--bw) solid var(--ink);
  box-shadow:var(--off) var(--off) 0 var(--ink);
  text-decoration:none; color:var(--ink);
}
.row-card__go{ font-size:26px; line-height:1 }
@media (max-width:640px){
  .row-card{ grid-template-columns:1fr; gap:16px; padding:20px }
  .row-card__go{ display:none }
}

/* ============================================================
   Плашки вместо игровых изображений
   Геометрия на чистом CSS: никаких чужих ассетов.
   Модификатор задаёт свою фигуру каждому разделу.
   ============================================================ */
.plate{
  position:relative; overflow:hidden; aspect-ratio:16/10;
  border:var(--bw) solid var(--ink); background:var(--blue);
}
.plate__label{
  position:absolute; left:14px; bottom:13px; z-index:2;
  font-family:var(--display); font-weight:900; font-size:clamp(18px,2.3vw,26px);
  line-height:1.12; letter-spacing:-.03em;
  color:var(--paper); background:var(--ink);
  padding:6px 11px; box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
/* на чёрных фигурах подпись инвертируется, чтобы не сливаться с фоном */
.plate--slash .plate__label,
.plate--steps .plate__label{ color:var(--ink); background:var(--paper) }
.plate:before,.plate:after{ content:""; position:absolute }
/* Солнце: круг в углу */
.plate--sun:before{ inset:-28% -22% auto auto; width:74%; aspect-ratio:1; background:var(--yellow); border-radius:50% }
.plate--sun:after{ left:-12%; bottom:-22%; width:68%; aspect-ratio:1; background:var(--red); transform:rotate(20deg) }
/* Дуга */
.plate--arc{ background:var(--yellow) }
.plate--arc:before{ inset:auto auto -46% -12%; width:82%; aspect-ratio:1; background:var(--blue); border-radius:50% }
.plate--arc:after{ right:12%; top:14%; width:22%; aspect-ratio:1; background:var(--red); border-radius:50% }
/* Диагональ */
.plate--slash{ background:var(--red) }
.plate--slash:before{ inset:-40% -10% auto auto; width:66%; height:180%; background:var(--ink); transform:rotate(24deg) }
.plate--slash:after{ left:10%; bottom:12%; width:26%; aspect-ratio:1; background:var(--yellow) }
/* Сетка */
.plate--grid{ background:var(--card) }
.plate--grid:before{ inset:0; background:
   repeating-linear-gradient(0deg,var(--ink) 0 3px,transparent 3px 34px),
   repeating-linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 34px); opacity:.9 }
.plate--grid:after{ left:22%; top:22%; width:44%; aspect-ratio:1; background:var(--blue) }
/* Ступени */
.plate--steps{ background:var(--ink) }
.plate--steps:before{ left:0; bottom:0; width:36%; height:44%; background:var(--yellow) }
.plate--steps:after{ left:34%; bottom:0; width:36%; height:72%; background:var(--red) }

/* ============================================================
   Бегущая строка
   ============================================================ */
.ticker{ background:var(--ink); color:var(--paper); overflow:hidden; padding:11px 0;
  font-weight:800; font-size:13px; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap }
.ticker__line{ display:inline-block; animation:ticker 34s linear infinite }
@keyframes ticker{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce){
  .ticker__line{ animation:none; padding-left:var(--pad) }
}

/* ============================================================
   Блоки статьи
   ============================================================ */
.notice{ border:var(--bw) solid var(--ink); background:var(--yellow);
  padding:16px 18px; font-weight:600; color:var(--ink) }

.toc{ border:var(--bw) solid var(--ink); background:var(--card); padding:18px }
.toc strong{ font-family:var(--display); font-weight:700; font-size:14px;
  letter-spacing:.06em; text-transform:uppercase; display:block; margin-bottom:10px }
.toc a{ display:block; padding:6px 0; font-size:var(--t-small); font-weight:600;
  color:var(--text-2); text-decoration:none; border-top:1px solid var(--hair) }
.toc a:hover{ color:var(--blue) }

.faq details{ border-bottom:2.5px solid var(--ink); padding:14px 0 }
.faq summary{ cursor:pointer; font-weight:800; font-size:17px; list-style:none;
  display:flex; justify-content:space-between; gap:14px }
.faq summary::-webkit-details-marker{ display:none }
.faq summary:after{ content:"+"; font-family:var(--display); font-weight:900 }
.faq details[open] summary:after{ content:"–" }

.disclaimer{ border-top:var(--bw) solid var(--ink); margin-top:26px; padding-top:16px;
  font-size:var(--t-small); color:var(--text-3) }

/* Разделитель секции */
.sec-head{ display:flex; align-items:end; justify-content:space-between; gap:18px;
  border-bottom:var(--bw) solid var(--ink); padding-bottom:12px; margin-bottom:24px }
.sec-head > span{ font-weight:800; font-size:var(--t-micro); letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-3) }

/* Смена основы плашки: соседние блоки не должны читаться одинаково */
.plate.is-blue{ background:var(--blue) }
.plate.is-yellow{ background:var(--yellow) }
.plate.is-ink{ background:var(--ink) }
.plate.is-red{ background:var(--red) }

/* Страховка для узких экранов: слово шире строки разрывается, а не растягивает
   страницу вбок. Переносы в длинных словах заголовков расставлены при сборке
   мягкими дефисами — автоперенос резал даже слоган на главной. */
@media (max-width:640px){
  h1,h2,h3,.display{ overflow-wrap:anywhere }
}