/* Общая шкала актуальной главной. Компоненты используют роли вместо отдельных размеров. */
:root {
  --font-heading: Manrope, Onest, sans-serif;
  --font-body: Onest, sans-serif;
  --text-display: clamp(44px, 4.55vw, 72px);
  --text-section: clamp(36px, 3.7vw, 56px);
  --text-step: clamp(24px, 2.1vw, 32px);
  --text-subheading: 22px;
  --text-card-title: 18px;
  --text-lead: 18px;
  --text-body: 16px;
  --text-action: 14px;
  --text-ui: 13px;
  --text-meta: 12px;
  --leading-display: 1.12;
  --leading-section: 1.15;
  --leading-heading: 1.35;
  --leading-body: 1.7;
  --leading-ui: 1.5;
  --tracking-display: -.04em;
  --tracking-section: -.03em;
  --tracking-heading: -.02em;
  --weight-section: 550;
  --weight-heading: 600;
  --weight-label: 500;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --page-width: 1600px;
  --page-gutter: 24px;
  --section-gap: 128px;
  --section-divider-space: 64px;
  --heading-gap: 56px;
  --column-gap: 64px;
  --story-step-gap: 176px;
  --story-summary-gap: 96px;
  --card-padding: 32px;
}
.blue-page :where(h1, h2, h3, h4, h5, h6) { font-family: var(--font-heading); }
@media (max-width: 1100px) {
  :root { --column-gap: 40px; }
}
@media (max-width: 960px) {
  :root { --story-step-gap: 128px; --story-summary-gap: 64px; }
}
@media (max-width: 760px) {
  :root { --page-gutter: 12px; --section-gap: 96px; --section-divider-space: 48px; --heading-gap: 40px; --card-padding: 24px; }
}
@media (max-width: 600px) {
  :root {
    --text-display: clamp(36px, 10vw, 48px);
    --text-section: clamp(28px, 8.2vw, 36px);
    --text-step: 24px;
    --text-subheading: 20px;
    --text-card-title: 16px;
    --text-lead: 16px;
    --text-body: 16px;
    --text-ui: 13px;
    --text-meta: 12px;
    --column-gap: 24px;
  }
}