/* ============================================================
   base.css — токени, ресет, типографіка, примітиви сітки
   Архетип: БРУТАЛІЗМ. radius:0, жирні рамки, високий контраст.
   ============================================================ */

:root{
  --ink:#0f0f0f;        /* майже-чорний */
  --paper:#f4ead3;      /* кремовий */
  --paper-2:#ece0c2;    /* теплий беж */
  --fire:#ff4a17;       /* вогняний */
  --yellow:#ffd400;     /* жовтий-знак */
  --white:#ffffff;
  --line:3px;           /* товщина брутальних рамок */
  --bord: var(--line) solid var(--ink);
  --bord-2: 6px solid var(--ink);
  --maxw:1280px;
  --shadow-hard: 8px 8px 0 var(--ink);
  --shadow-fire: 8px 8px 0 var(--fire);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0 !important}

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

body{
  font-family:"Archivo",-apple-system,system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.45;
  font-size:18px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

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

a{color:inherit;text-decoration:none}

ul{list-style:none}

h1,h2,h3,h4,.mono,.display{
  font-family:"Archivo",sans-serif;
  font-weight:900;
  line-height:0.95;
  letter-spacing:-0.02em;
  text-transform:uppercase;
}

.mono,code,.tag,.kicker{
  font-family:"Space Mono",ui-monospace,monospace;
  text-transform:uppercase;
}

/* ---- Сітка / контейнер ---- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:18px}

.section{padding-block:clamp(48px,8vw,96px)}

/* ---- Утиліти кольорових блоків ---- */
.bg-ink{background:var(--ink);color:var(--paper)}
.bg-fire{background:var(--fire);color:var(--ink)}
.bg-yellow{background:var(--yellow);color:var(--ink)}
.bg-paper2{background:var(--paper-2)}

/* ---- Великі заголовки ---- */
.display{
  font-size:clamp(2.6rem,9vw,7.5rem);
}
.h-xxl{font-size:clamp(2rem,6vw,4.5rem)}
.h-xl{font-size:clamp(1.6rem,4.5vw,3rem)}
.h-l{font-size:clamp(1.3rem,3vw,2rem)}

.kicker{
  font-size:0.8rem;
  letter-spacing:0.22em;
  font-weight:700;
  display:inline-block;
}

/* наклейка-бейдж */
.tag{
  display:inline-block;
  font-size:0.72rem;
  letter-spacing:0.12em;
  font-weight:700;
  padding:6px 12px;
  border:var(--bord);
  background:var(--yellow);
  transform:rotate(-2deg);
}

/* величезна цифра */
.bignum{
  font-family:"Space Mono",monospace;
  font-weight:700;
  font-size:clamp(3rem,11vw,8rem);
  line-height:0.85;
  display:block;
}

/* зведення відступів секцій */
.mt-s{margin-top:12px}
.mt-m{margin-top:24px}
.mt-l{margin-top:48px}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}

/* фокус-стан для доступності */
a:focus-visible,button:focus-visible{
  outline:4px solid var(--fire);outline-offset:3px;
}