/* ============================================================
   БАЗА: сброс, типографика, рельсы разделов, утилиты раскладки.
   Гарнитуры по хэндофу: Cormorant Garamond (дисплей, цифры, цитаты)
   и Golos Text (текст и интерфейс).
   ============================================================ */
*, *::before, *::after { box-sizing:border-box; }

html {
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;   /* липкая шапка не должна накрывать якорь */
}

body {
  margin:0;
  background:var(--ivory);
  color:var(--body-2);
  overflow-x:hidden;
  font-family:'Golos Text', system-ui, -apple-system, sans-serif;
  font-size:var(--fs-body);
  line-height:1.7;
  text-wrap:pretty;
  font-variant-numeric:lining-nums;
  -webkit-tap-highlight-color:transparent;
}

img { max-width:100%; display:block; }
p { margin:0 0 1em; }
p:last-child { margin-bottom:0; }
a { color:var(--raspberry); text-decoration:none; }
:focus-visible { outline:2px solid var(--raspberry); outline-offset:3px; }
button, input, textarea { font:inherit; color:inherit; }
button { touch-action:manipulation; }

/* ---------- дисплейная гарнитура ---------- */
h1, h2, h3, .display, blockquote {
  font-family:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight:500;
  margin:0;
}
h1 {
  font-size:var(--fs-h1);
  line-height:1.06;
  letter-spacing:.02em;
  text-transform:uppercase;
}
h2 {
  font-size:var(--fs-h2);
  line-height:1.05;
  letter-spacing:.035em;
  text-transform:uppercase;
  color:var(--raspberry);
  text-wrap:balance;
}
h2.h2--sm { font-size:var(--fs-h2-sm); }
/* H2 сам без внешних отступов, поэтому отбивку задаёт следующий элемент */
h2 + .lead, h2 + .lead--18, h2 + p { margin-top:20px; }
h3 { font-size:23px; line-height:1.25; font-weight:600; color:var(--emerald); }

/* ---------- текстовые роли ---------- */
.lead { font-size:var(--fs-lead); line-height:1.65; color:var(--body); }
.lead--18 { font-size:18px; line-height:1.75; color:var(--body-2); }
.small { font-size:var(--fs-small); line-height:1.65; color:var(--muted-3); }
.cap { font-size:var(--fs-label); line-height:1.55; color:var(--muted); }
.text { max-width:62ch; }

/* ---------- надзаголовок и рельс раздела ---------- */
.eyebrow {
  display:flex; align-items:center; gap:14px;
  margin:0 0 22px;
  font-size:var(--fs-label); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--coral-dark);
}
.eyebrow::before {
  content:''; width:34px; height:1px; flex:0 0 34px;
  background:var(--coral);
}
.rail {
  margin:0 0 22px;
  font-size:var(--fs-label); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
}
.rail b { font-weight:500; color:var(--coral-dark); }

/* ---------- секции ---------- */
.wrap { width:100%; max-width:var(--w-page); margin-inline:auto; padding-inline:var(--px); }
.sec { padding-block:var(--py); }
.sec--lg { padding-block:var(--py-lg); }

/* дуга на стыке: секция «наезжает» на предыдущую скруглённым верхом */
.sec--arc {
  border-radius:var(--arc) var(--arc) 0 0;
  margin-top:-40px;
  position:relative;
  z-index:1;
}
.sec--peach { background:linear-gradient(180deg, var(--peach), var(--ivory-3)); }
.sec--sand  { background:linear-gradient(180deg, var(--ivory-3), var(--blush)); }
.sec--stone { background:linear-gradient(180deg, var(--stone), var(--peach)); }
.sec--ivory { background:var(--ivory); }
.sec--dark {
  background:linear-gradient(165deg, var(--emerald), var(--emerald-2));
  color:var(--on-dark);
}
.sec--dark h2, .sec--dark h3 { color:var(--on-dark); }
.sec--dark .lead, .sec--dark p { color:var(--on-dark-75); }
.sec--dark .rail { color:var(--apricot); }
.sec--dark .rail b { color:var(--apricot); }

/* ---------- сетки ----------
   Хэндоф специально обходится без медиазапросов: auto-fit + minmax
   сами складывают колонки. Точку схлопывания задаёт minmax. */
.grid { display:grid; gap:16px; }
.cols   { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(330px, 100%),1fr)); gap:56px; }
.cols--60 { gap:60px; }
.cards  { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(430px, 100%),1fr)); gap:16px; }
.cards--sm { grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%),1fr)); gap:14px; }
.cards--wide { grid-template-columns:repeat(auto-fit, minmax(min(390px, 100%),1fr)); gap:18px; }
.nums   { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(170px, 100%),1fr)); gap:14px; }
.nums--sm { grid-template-columns:repeat(auto-fit, minmax(min(140px, 100%),1fr)); }

/* ---------- доступность ---------- */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
a.skip:focus {
  position:fixed; left:12px; top:12px; z-index:80;
  width:auto; height:auto; clip:auto; margin:0;
  background:var(--emerald); color:var(--ivory); padding:12px 20px; border-radius:999px;
}