/* ============================================================
   base.css — reset · @font-face · типографика (п.1.4) · .container · .section · утилиты · reveal
   Подключается третьим: tokens → themes → base → layout → components.
   ============================================================ */

/* ————————————————————————————————————————————————
   @font-face — локально из assets/fonts (woff2, font-display:swap).
   Сначала local() — если шрифт установлен в системе, сетевого запроса нет;
   если файла нет и в системе нет — работает системный фолбэк из --font-*.
   ———————————————————————————————————————————————— */
@font-face{
  font-family:"Playfair Display"; font-style:normal; font-weight:400; font-display:swap;
  src:local("Playfair Display"),local("PlayfairDisplay-Regular"),
      url("../assets/fonts/PlayfairDisplay-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Playfair Display"; font-style:normal; font-weight:500; font-display:swap;
  src:local("Playfair Display Medium"),local("PlayfairDisplay-Medium"),
      url("../assets/fonts/PlayfairDisplay-Medium.woff2") format("woff2");
}
/* курсив дисплейного шрифта — для типографских акцентов */
@font-face{
  font-family:"Playfair Display"; font-style:italic; font-weight:400; font-display:swap;
  src:local("Playfair Display Italic"),local("PlayfairDisplay-Italic"),
      url("../assets/fonts/PlayfairDisplay-Italic.woff2") format("woff2");
}
@font-face{
  font-family:"Playfair Display"; font-style:italic; font-weight:500; font-display:swap;
  src:local("Playfair Display Medium Italic"),local("PlayfairDisplay-MediumItalic"),
      url("../assets/fonts/PlayfairDisplay-MediumItalic.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:400; font-display:swap;
  src:local("Manrope"),local("Manrope-Regular"),
      url("../assets/fonts/Manrope-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:500; font-display:swap;
  src:local("Manrope Medium"),local("Manrope-Medium"),
      url("../assets/fonts/Manrope-Medium.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:600; font-display:swap;
  src:local("Manrope SemiBold"),local("Manrope-SemiBold"),
      url("../assets/fonts/Manrope-SemiBold.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:700; font-display:swap;
  src:local("Manrope Bold"),local("Manrope-Bold"),
      url("../assets/fonts/Manrope-Bold.woff2") format("woff2");
}

/* ——— RESET ——— */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:var(--font-ui);
  font-size:var(--fs-md);
  line-height:var(--lh-base);
  font-weight:var(--fw-reg);
  color:var(--c-ink-800);
  background:var(--c-white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden;}
img,svg,video,picture{display:block;max-width:100%;}
img{height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;padding:0;}
address{font-style:normal;}
:focus-visible{outline:2px solid var(--th-accent);outline-offset:2px;border-radius:var(--r-xs);}

/* ——— ТИПОГРАФИКА (п.1.4) ——— */
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:var(--fw-reg);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  color:var(--c-ink-900);
}
h1{font-size:var(--fs-d1);line-height:1.1;}
h2{font-size:var(--fs-d2);line-height:1.15;}
h3{font-size:var(--fs-d3);font-weight:var(--fw-med);line-height:var(--lh-snug);}
strong,b{font-weight:var(--fw-semi);}
small{font-size:var(--fs-sm);}

/* ——— КОНТЕЙНЕР И СЕКЦИЯ ——— */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--s-4);           /* mobile: 16px (п.1.7) */
}
.section{padding-block:var(--section-py);}

@media (min-width:768px){
  .container{padding-inline:var(--s-6);}  /* tablet: 24px */
}
@media (min-width:1024px){
  .container{padding-inline:var(--s-8);}  /* laptop+: 32px */
}

/* ——— УТИЛИТЫ ——— */
.u-eyebrow{
  font-family:var(--font-ui);
  font-size:var(--fs-2xs);
  font-weight:var(--fw-semi);
  line-height:1.4;
  text-transform:uppercase;
  letter-spacing:var(--ls-caps);
  color:var(--th-deco);
}
/* типографский акцент — курсив дисплейного шрифта */
.u-em{font-family:var(--font-display);font-style:italic;font-weight:var(--fw-reg);}

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

/* Иконки из спрайта: наследуют цвет через currentColor */
.ic{width:20px;height:20px;flex:0 0 auto;}
.ic--chev{width:16px;height:16px;}
.ic--sm{width:16px;height:16px;}
.ic--lg{width:24px;height:24px;}

/* ——— ВРЕМЕННАЯ ЗАГЛУШКА КОНТЕНТА (секции 2–10 верстаются позже) ——— */
.content-placeholder{
  min-height:150vh;
  background:var(--c-ink-050);
}

/* ——— REVEAL (п.1.6): сдвиг снизу 24px + прозрачность 0→1 ——— */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--t-reveal) var(--ease-out),
             transform var(--t-reveal) var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
[data-reveal].is-visible{opacity:1;transform:none;}

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