/* =========================================================================
   PROEKCIA · Брендбук — 02. BASE
   Reset, типографіка документа, службові класи сітки та доступності.
   Тут немає нічого про конкретні секції.
   ========================================================================= */

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

html{
  -webkit-text-size-adjust:100%;
  /* scroll-behavior:smooth тут немає навмисно: він ламає перерахунок
     ScrollTrigger (під час refresh сторінка ще їде, і всі тригери
     рахуються від нуля). Плавний перехід до якорів робить main.js. */
  scroll-padding-top:calc(var(--header-h) + 1rem);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff);
  font-weight:400;
  font-size:var(--fs-body);
  line-height:var(--lh-text);
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;            /* страховка від горизонтального скролу */
}

body.is-locked{overflow:hidden;}

h1,h2,h3,h4,h5,p,figure,blockquote,ul,ol,dl,dd{margin:0;}
ul,ol{padding:0;list-style:none;}

h1,h2,h3,h4{
  font-weight:500;
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
  text-wrap:balance;
}

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

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

button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}

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

/* ---- Фокус: завжди видимий, ніколи не обрізаний ------------------------- */
:where(a,button,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:2px;
}
.on-night :where(a,button):focus-visible{outline-color:var(--white);}

/* ---- Довгі українські слова не ламають сітку ---------------------------- */
p,li,h1,h2,h3,h4,dt,dd,figcaption{overflow-wrap:break-word;}

/* =========================== СІТКА ======================================= */
.wrap{
  width:100%;
  max-width:var(--page-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--col-gap);
  row-gap:var(--row-gap);
}
/* до 860px сітка завжди однорядкова — секції самі задають винятки */
@media (max-width:860px){
  .grid{grid-template-columns:minmax(0,1fr);}
  .grid > *{grid-column:auto !important;grid-row:auto !important;}
}

.section{padding-block:var(--section-y);position:relative;}
.section--tight{padding-block:calc(var(--section-y) * .62);}
.section--night{background:var(--night);color:var(--night-fg);}
.section--paper2{background:var(--paper-2);}
.section--white{background:var(--white);}

/* =========================== ТИПОГРАФІЧНІ ПРИМІТИВИ ====================== */
.label{
  display:inline-block;
  font-size:var(--fs-label);
  font-weight:500;
  line-height:1.2;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--ink-55);
}
.label--accent{color:var(--accent);}
.section--night .label{color:var(--night-fg-55);}

.h2{font-size:var(--fs-h2);letter-spacing:var(--ls-head);line-height:var(--lh-tight);}
.h3{font-size:var(--fs-h3);}
.h4{font-size:var(--fs-h4);}

.statement{
  font-size:var(--fs-statement);
  font-weight:500;
  line-height:1.06;
  letter-spacing:var(--ls-head);
  text-wrap:balance;
}

.lead{
  font-size:var(--fs-lead);
  font-weight:300;
  line-height:1.45;
  color:var(--ink-70);
  max-width:36ch;
}
.section--night .lead{color:var(--night-fg-55);}

.text{color:var(--ink-70);max-width:62ch;}
.text--narrow{max-width:46ch;}
.section--night .text{color:var(--night-fg-55);}

.em{
  font-family:var(--ff-accent);
  font-style:italic;
  font-weight:500;
  letter-spacing:-.01em;
}
.accent{color:var(--accent);}

.num{
  font-size:var(--fs-num);
  font-weight:400;
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  color:var(--ink-38);
}
.section--night .num{color:var(--night-fg-55);}

.rule{height:1px;background:var(--rule);border:0;margin:0;}
.section--night .rule{background:var(--night-rule);}

/* =========================== ВІДСТУПИ (утиліти) ========================== */
/* Мінімальний набір: усе інше — у сітці секції, не в утилітах. */
.mt-s{margin-top:var(--sp-3);}
.mt-m{margin-top:var(--sp-4);}
.mt-l{margin-top:clamp(1.5rem,3vw,2.5rem);}
.mb-s{margin-bottom:var(--sp-3);}
.mb-l{margin-bottom:clamp(1.75rem,3.5vw,3rem);}
.block{display:block;}
.strong{font-weight:500;}
.night-fg{color:var(--night-fg);}

/* абзаци всередині .text дихають без інлайнових стилів */
.text p + p{margin-top:1em;}

/* =========================== ДОСТУПНІСТЬ ================================= */
.visually-hidden{
  position:absolute !important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:var(--gutter);top:-100px;z-index:200;
  background:var(--ink);color:var(--white);
  padding:.75rem 1.1rem;border-radius:var(--radius-sm);
  font-size:var(--fs-small);
  transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{top:.75rem;}

/* =========================== МОУШН ======================================= */
/* Базовий reveal. JS додає .is-in, коли елемент входить у в'юпорт. */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);
  transition-delay:var(--reveal-delay,0ms);
}
/* will-change лише до появи: 43 блоки, що назавжди лишаються окремими шарами,
   на iPhone забивають пам'ять відеокарти, і прокрутка підгальмовує */
.reveal:not(.is-in){will-change:opacity,transform;}
.reveal.is-in{opacity:1;transform:none;}

/* Поява знімка: не різкий край, а м'яка межа, що збігає зверху вниз.
   --rv веде js/sections.js від 0 до 1; після появи маску знімаємо зовсім,
   щоб вона не коштувала нічого під час прокрутки. */
.fx-reveal{
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(var(--rv,1) * 125% - 25%),transparent calc(var(--rv,1) * 125%));
  mask-image:linear-gradient(to bottom,#000 calc(var(--rv,1) * 125% - 25%),transparent calc(var(--rv,1) * 125%));
}
.fx-reveal.is-revealed{-webkit-mask-image:none;mask-image:none;}

/* Заголовок, порізаний на рядки (js/sections.js): кожен рядок їде з-під маски.
   Після програвання додається .is-lines-done і маска знімається — щоб при зміні
   ширини екрана рядки могли вільно перегрупуватись. */
.is-lines .ln{display:block;overflow:hidden;}
.is-lines .ln__in{display:block;}
.is-lines-done .ln{overflow:visible;}

/* Без JS контент має бути видимим завжди. */
.no-js .reveal{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none;}
}