@font-face {
  font-family: "Atlas Grotesk LC Web";
  src: url("/assets/fonts/atlas-grotesk/AtlasGrotesk-Regular-Cy-Web.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Atlas Grotesk LC Web";
  src: url("/assets/fonts/atlas-grotesk/AtlasGrotesk-Medium-Cy-Web.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: block;
}

:root {
  --color-ivory: #f3efe7;
  --color-stone: #e7e1d7;
  --color-graphite: #1c1d1c;
  --color-charcoal: #151615;
  --color-text-primary: #222321;
  --color-text-secondary: #6e6c66;
  --color-text-light: #f1eee7;
  --color-text-light-muted: #aaa69e;
  --color-accent-green: #24362f;
  --color-hairline-light: rgba(34, 35, 33, 0.16);
  --color-hairline-medium: rgba(34, 35, 33, 0.24);
  --color-hairline-dark: rgba(241, 238, 231, 0.18);
  --color-hairline-dark-strong: rgba(241, 238, 231, 0.28);

  --font-serif: "Canela", "Times New Roman", serif;
  --font-sans: "Atlas Grotesk LC Web", Arial, Helvetica, sans-serif;

  --fs-hero: clamp(3.25rem, 5.6vw, 5.125rem);
  --lh-hero: 0.98;
  --ls-hero: -0.035em;

  --fs-statement-lg: clamp(2.75rem, 4.3vw, 4rem);
  --lh-statement-lg: 1.02;
  --ls-statement-lg: -0.03em;

  --fs-section-intro: clamp(2rem, 3vw, 3rem);
  --lh-section-intro: 1.12;
  --ls-section-intro: -0.02em;

  --fs-case-value: clamp(2.75rem, 4.2vw, 4.25rem);
  --lh-case-value: 0.95;
  --ls-case-value: -0.03em;

  --fs-subhead: clamp(1.375rem, 1.8vw, 1.875rem);
  --lh-subhead: 1.2;
  --ls-subhead: -0.015em;

  --fs-body: clamp(1rem, 1.1vw, 1.125rem);
  --lh-body: 1.62;
  --ls-body: 0;

  --fs-body-sm: 0.9375rem;
  --lh-body-sm: 1.55;

  --fs-label: 0.8125rem;
  --lh-label: 1.2;
  --ls-label: 0.12em;

  --fs-meta: 0.8125rem;
  --lh-meta: 1.4;
  --ls-meta: 0.04em;

  --container-max: 1360px;
  --container-content: 1240px;
  --container-reading: 920px;
  --container-legal: 820px;

  --page-gutter-desktop: 40px;
  --page-gutter-tablet: 28px;
  --page-gutter-mobile: 20px;
  --gutter-mobile: 20px;
  --gutter-mobile-wide: 24px;
  --gutter-tablet: 28px;
  --gutter-desktop: 40px;
  --page-gutter: var(--gutter-desktop);

  --grid-columns: 12;
  --grid-gap: 24px;

  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-small-desktop: 1024px;
  --bp-desktop: 1280px;
  --bp-wide: 1440px;
  --bp-ultrawide: 1920px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;
  --space-36: 144px;
  --space-40: 160px;

  --section-space-standard: clamp(7rem, 9vw, 10rem);
  --section-space-large: clamp(8rem, 11vw, 11.5rem);

  --hairline: 1px;
  --radius-none: 0;
  --radius-subtle: 2px;

  --header-height: 92px;
  --header-height-sticky: 70px;
  --header-height-mobile: 68px;

  --duration-fast: 180ms;
  --duration-standard: 240ms;
  --duration-slow: 280ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

:root:lang(ru) {
  --lh-hero: 1.02;
  --lh-statement-lg: 1.08;
  --lh-subhead: 1.28;
  --lh-body: 1.68;
}

@media (max-width: 1279px) {
  :root {
    --page-gutter: var(--gutter-tablet);
    --header-height: 72px;
    --header-height-sticky: 66px;
  }
}

@media (max-width: 767px) {
  :root {
    --page-gutter: var(--gutter-mobile);
    --header-height: var(--header-height-mobile);
    --header-height-sticky: 64px;
  }
}

@media (min-width: 400px) and (max-width: 767px) {
  :root {
    --page-gutter: var(--gutter-mobile-wide);
  }
}