:root {
  --sys:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Playfair Display', serif;
  --cream: #F9F5EF;
  --ivory: #F2EBE0;
  --white: #FFFFFF;
  --sage:    #6B8F71;
  --sage-lt: #A8C5AD;
  --sage-dk: #3E5E44;
  --warm:    #C97D4E;
  --text:  #2A2420;
  --muted: #7A6E68;
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-pill: 100px;
}

/* ══════════════════════════════════════════
   2. ЦВЕТОВЫЕ ТОКЕНЫ
══════════════════════════════════════════ */
:root {
  --sage-rgb:    107, 143, 113;
  --sage-dk-rgb: 62,  94,  68;
  --text-rgb:    42,  36,  32;
  --white-rgb:   255, 255, 255;
  --sage-10: rgba(var(--sage-rgb), .10);
  --sage-15: rgba(var(--sage-rgb), .15);
  --sage-18: rgba(var(--sage-rgb), .18);
  --sage-20: rgba(var(--sage-rgb), .20);
  --sage-22: rgba(var(--sage-rgb), .22);
  --sage-25: rgba(var(--sage-rgb), .25);
  --sage-28: rgba(var(--sage-rgb), .28);
  --sage-30: rgba(var(--sage-rgb), .30);
  --sage-40: rgba(var(--sage-rgb), .40);
  --sage-dk-18: rgba(var(--sage-dk-rgb), .18);
  --sage-dk-40: rgba(var(--sage-dk-rgb), .40);
  --sage-dk-50: rgba(var(--sage-dk-rgb), .50);
  --sage-dk-85: rgba(var(--sage-dk-rgb), .85);
  --text-12: rgba(var(--text-rgb), .12);
  --text-45: rgba(var(--text-rgb), .45);
  --text-55: rgba(var(--text-rgb), .55);
  --white-55: rgba(var(--white-rgb), .55);
  --white-75: rgba(var(--white-rgb), .75);
  --white-90: rgba(var(--white-rgb), .90);
  --border-sage: .5px solid var(--sage-20);
}

/* ══════════════════════════════════════════
   3. ТИПОГРАФИЧЕСКАЯ ШКАЛА
══════════════════════════════════════════ */
:root {
  --text-xs:   0.8rem;
  --text-sm:   0.9rem;
  --text-base: 1rem;
  --text-md:   1.0625rem;
  --text-body: 1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.75rem;
  --text-5xl:  3.25rem;
  --text-6xl:  3.5rem;
  --text-7xl:  4.25rem;
}

/* ══════════════════════════════════════════
   4. СБРОС И БАЗОВЫЕ СТИЛИ
══════════════════════════════════════════ */
html {
  font-size: 18px; /* базовый размер — все rem пересчитаются автоматически */
}

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

body {
  font-family: var(--sys);
  background: var(--cream);
  color: var(--text);
  font-size: var(--text-body);
  line-height: 1.6;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; }

.page-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  overflow-x: hidden;
}

/* ══════════════════════════════════════════
   5. БАЗОВАЯ ТИПОГРАФИКА
══════════════════════════════════════════ */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.2; color: var(--text); }
h1 { font-size: var(--text-7xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-xl);  }
p  { color: var(--text); line-height: 1.8; }

/* ══════════════════════════════════════════
   6. УТИЛИТЫ ТИПОГРАФИКИ
══════════════════════════════════════════ */
.label-caps { font-size: var(--text-xs); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.text-serif-italic { font-family: var(--serif); font-style: italic; color: var(--muted); line-height: 1.65; }
.text-muted  { color: var(--muted);   }
.text-accent { color: var(--sage-dk); }
.text-warm   { color: var(--warm);    }

.stat-number { font-family: var(--serif); font-size: var(--text-6xl); font-weight: 400; color: var(--sage-dk); line-height: 1; }
.stat-number em { font-family: var(--serif); font-size: var(--text-2xl); font-style: normal; color: var(--sage); }
.stat-number--warm    { color: var(--warm); }
.stat-number--warm em { opacity: .7; }

/* ══════════════════════════════════════════
   7. ОБЩИЕ КОМПОНЕНТЫ
══════════════════════════════════════════ */
.section-h2 {
  font-family: var(--serif);
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sage-dk);
  text-align: center;
  margin-bottom: 2rem;
}

.section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
  padding-bottom: .9rem;
  border-bottom: var(--border-sage);
  margin-bottom: .4rem;
}

.section-label--sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ivory);
  padding-top: .9rem;
  margin-top: -.9rem;
}

/* ══════════════════════════════════════════
   10. MAIN
══════════════════════════════════════════ */
.site-main { min-height: calc(100vh - 116px - 200px); }