/*
  Шрифты для проекта — самостоятельный хостинг (без запросов к Google Fonts).
  Файлы: variable fonts, субсеты Latin + Cyrillic (латиница + кириллица).
  Источник: github.com/google/fonts (лицензия OFL — см. /LICENSES).

  Подключение в Django-шаблоне:
    {% load static %}
    <link rel="stylesheet" href="{% static 'fonts/fonts.css' %}">
*/

/* ---------- EB Garamond (editorial) ---------- */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('EBGaramond-Variable.woff2') format('woff2');
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('EBGaramond-Italic-Variable.woff2') format('woff2');
}

/* ---------- Manrope (interface) ---------- */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('Manrope-Variable.woff2') format('woff2');
}

/* ---------- Overpass Mono (technical) ---------- */

@font-face {
  font-family: 'Overpass Mono';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('OverpassMono-Variable.woff2') format('woff2');
}

/* ---------- Токены проекта ---------- */

:root {
  --font-edito: 'EB Garamond', 'Times New Roman', serif;
  --font-primary: 'Manrope', 'Roboto', sans-serif;
  --font-secondary: 'Overpass Mono', 'Courier New', monospace;

  /* ----- Шкала размеров ----- */
  --font-size-heading-hero: clamp(2.5rem, 5vw, 4.5rem);
  --font-size-heading-xl: clamp(1.75rem, 4vw, 2.125rem);
  --font-size-heading-l: 1.5rem;
  --font-size-heading-m: 1.25rem;
  --font-size-heading-s: 1.125rem;

  --font-size-body-xl: 1.125rem;
  --font-size-body-l: 1rem;
  --font-size-body-default: 0.875rem;
  --font-size-body-s: 0.8125rem;
  --font-size-body-xs: 0.75rem;

  /* ----- Отступы между заголовком и текстом под ним -----
     Чем сильнее смысловая связь — тем меньше отступ. */
  --space-hero-to-sub: 1rem;        /* H1 → эпиграф/подзаголовок */
  --space-sub-to-cta: 2rem;         /* эпиграф → кнопка */
  --space-heading-to-body: 1.25rem; /* H2 → первый параграф */
  --space-paragraph: 1rem;          /* параграф → параграф */
  --space-title-to-price: 0.375rem; /* название товара → цена */
  --space-price-to-cta: 1rem;       /* цена → кнопка "В корзину" */
  --space-section: 4rem;            /* между секциями, десктоп */
  --space-section-mobile: 2.5rem;   /* между секциями, мобайл */
}

/* ----- Базовые правила заголовков ----- */

h1 {
  font-family: var(--font-edito);
  font-weight: 400;
  font-size: var(--font-size-heading-hero);
  line-height: 1.08;
  margin: 0 0 var(--space-hero-to-sub);
}

h2 {
  font-family: var(--font-edito);
  font-weight: 500;
  font-size: var(--font-size-heading-xl);
  line-height: 1.2;
  margin: 0 0 var(--space-heading-to-body);
}

h3 {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--font-size-heading-m);
  line-height: 1.3;
  margin: 0 0 var(--space-title-to-price);
}

p {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-body-l);
  line-height: 1.6;
  margin: 0 0 var(--space-paragraph);
}

.lede {
  font-family: var(--font-edito);
  font-style: italic;
  font-weight: 400;
  font-size: var(--font-size-body-xl);
  line-height: 1.4;
  color: var(--ink-soft, #4A463F);
}

.article section + section, .article section + h2 {
    margin-top: var(--space-section);
}

@media (max-width: 640px) {
    .article section + section,
    .article section + h2 {
        margin-top: var(--space-section-mobile);
    }
}