/* Основа. Білий фон прибитий явно: сторінку показують і в темній темі браузера,
   а прозорий body там позичає чужий колір — і сірий знак стає нечитабельним. */
:root{
  --paper:#ffffff;
  --ink:#1b1b1b;        /* основний текст */
  --ink-2:#5c5c5c;      /* знак і заголовки другого рівня — той самий сірий, що в журналі */
  --ink-3:#8a8a8a;      /* підписи */
  --ink-4:#b4b4b4;      /* дрібні мітки */
  --line:#e6e6e6;       /* волосяні лінії */
  --line-2:#f1f1f1;
  --wash:#fafafa;       /* ледь помітна плашка */
  --focus:#1b1b1b;

  --w:1160px;
  --gap:clamp(64px,9vw,128px);   /* відступ між секціями */
  --path:14px;                   /* шлях анімації виїзду — завжди менший за відступ */
  --r:14px;
}

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

/* clip, а не hidden: hidden створює скрол-контейнер і ламає sticky */
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
[hidden]{display:none!important}

::selection{background:#1b1b1b;color:#fff}

:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}