/* ============================================================
   МРЄ · база: шрифти, скидання, типографіка, примітиви розкладки
   Залежить від tokens.css. Підключати другим.
   ============================================================ */

/* ---------- 1. ШРИФТИ --------------------------------------
   e-Ukraine — державний український шрифт, ліцензія OFL.
   Його можна вільно вантажити з нашого домену, на відміну від
   Gotham Pro і DIN Condensed: ті комерційні, і викладання
   .woff2 у публічний доступ вимагає окремої вебліцензії.
   unicode-range обрізає завантаження до кирилиці й латиниці.  */

@font-face{
  font-family:"e-Ukraine";
  src:url("../fonts/e-Ukraine-Light.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"e-Ukraine";
  src:url("../fonts/e-Ukraine-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"e-Ukraine";
  src:url("../fonts/e-Ukraine-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"e-Ukraine";
  src:url("../fonts/e-Ukraine-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"e-Ukraine Head";
  src:url("../fonts/e-UkraineHead-Light.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"e-Ukraine Head";
  src:url("../fonts/e-UkraineHead-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"e-Ukraine Head";
  src:url("../fonts/e-UkraineHead-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---------- 2. СКИДАННЯ ------------------------------------ */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Липка шапка перекриває ціль якоря. Лікується тут, не скриптом. */
  scroll-padding-top:calc(var(--s-9) + 12px);
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:var(--t-body);
  font-weight:var(--w-light);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.page_content img, .page_content svg, .page_content video{max-width:100%;height:auto;display:block}
img{background:var(--bg-alt)}

/* ---------- 3. ТИПОГРАФІКА --------------------------------- */
h1,h2,h3,h4,h5{
  font-family:var(--f-head);
  font-weight:var(--w-medium);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
  color:var(--fg);
  margin:0 0 var(--s-4);
  text-wrap:balance;
}
h1{font-size:var(--t-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-display);font-weight:var(--w-light)}
h2{font-size:var(--t-h2);font-weight:var(--w-light)}
h3{font-size:var(--t-h3)}
h4{font-size:var(--t-h4)}
h5{font-size:var(--t-h5)}

p{margin:0 0 var(--s-4);max-width:var(--measure);text-wrap:pretty}
p:last-child{margin-bottom:0}

a{color:var(--accent-strong);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}

strong,b{font-weight:var(--w-medium)}

small{font-size:var(--t-sm)}

code,kbd{
  font-family:var(--f-mono);font-size:.86em;
  background:var(--bg-deep);padding:.1em .35em;border-radius:var(--r-sm);
}

hr{border:0;border-top:1px solid var(--line);margin:var(--s-8) 0}

::selection{background:var(--accent-tint);color:var(--accent-on-tint)}

/* Фокус видно завжди. Це вимога доступності, не опція. */
:focus-visible{
  outline:2px solid var(--accent-strong);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* Цифри в колонках мають вирівнюватися. */
.tnum,td.num,.stat__n{font-variant-numeric:tabular-nums}

/* ---------- 4. ПРИМІТИВИ РОЗКЛАДКИ -------------------------- */

/* Контейнер. Один на весь сайт, без «широких» і «вузьких» варіацій
   поза цими двома модифікаторами.                               */
.container{
  width:100%;
  max-width:var(--w-container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{max-width:var(--w-narrow)}
.container--flush{padding-inline:0}

/* Секція. Вертикальний ритм задається тільки тут, щоб відступи
   не подвоювалися від сусідніх margin.                          */
.section{padding-block:var(--section-y)}
.section--tight{padding-block:var(--section-y-tight)}
.section--flush-top{padding-top:0}
.section--alt{background:var(--bg-alt)}
.section--deep{background:var(--bg-deep)}
.section--tint{background:var(--accent-wash)}

/* Стек: вертикальний ритм через gap, а не через margin. */
.stack{display:flex;flex-direction:column;gap:var(--s-4)}
.stack--2{gap:var(--s-2)}
.stack--5{gap:var(--s-5)}
.stack--6{gap:var(--s-6)}
.stack--8{gap:var(--s-8)}

/* Ряд з переносом. */
.row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.row--between{justify-content:space-between}
.row--end{justify-content:flex-end}
.row--top{align-items:flex-start}

/* Автосітка. Мінімальна ширина колонки задається змінною. */
.grid{
  display:grid;
  gap:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(min(var(--col,280px),100%),1fr));
}
.grid--2{--col:420px}
.grid--3{--col:300px}
.grid--4{--col:220px}
.grid--tight{gap:var(--s-3)}

/* Дві колонки з різною вагою — для героїв і текст+панель. */
.split{display:grid;gap:var(--s-8);align-items:start}
@media (min-width:920px){
  .split{grid-template-columns:1.15fr .85fr}
  .split--even{grid-template-columns:1fr 1fr}
  .split--flip>:first-child{order:2}
}

/* Горизонтальна прокрутка для широкого вмісту.
   Сторінка ніколи не їде вбік — їде тільки цей контейнер.       */
.scroll-x{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
}
.scroll-x:focus-visible{outline-offset:0}

/* ---------- 5. СЛУЖБОВЕ ------------------------------------ */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:var(--s-4);top:-100px;z-index:100;
  background:var(--accent-strong);color:#fff;
  padding:var(--s-3) var(--s-5);border-radius:var(--r-md);
  font-family:var(--f-head);font-weight:var(--w-medium);
  transition:top var(--dur-2) var(--ease);
}
.skip-link:focus{top:var(--s-4)}

.measure{max-width:var(--measure)}
.measure-narrow{max-width:var(--measure-narrow)}
.text-mute{color:var(--fg-mute)}
.text-center{text-align:center}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}