/* ARDORIUM — слой 1: токены и база.
   Слой 2 (компоненты) — components.css, подключается вторым.

   Цвета — из ../../../../business/палитра.md, менять только там. В файле
   допущены ровно девять шестнадцатеричных значений; всё остальное получается
   из них через color-mix(). Это проверяет tests/test_public_pages.py: любой
   новый цвет в разметке падает тестом, а не всплывает через месяц на макете.

   Запрещено палитрой (данные панели 22 персон, не вкус): золото и латунь
   любых оттенков, неоновый оранжевый, яркий фиолетовый, сигнальный красный,
   неоновый лайм, тяжёлые градиенты — 13–19 отказов из 22, формулировка
   «это воронка продаж».

   Вёрстка от телефона: базовый вид — 390 px, десктоп добирается медиазапросом. */

/* --- Шрифты: свои файлы, не чужая сеть ---------------------------------
   Пара «с засечками и без» (решение Николь 18.08): Lora для заголовков, Inter
   для текста. Обе гарнитуры под лицензией OFL, поэтому лежат у нас файлами.

   Своими файлами — не из шрифтовой сети. Внешняя сеть отдаёт адрес каждого
   читателя третьей стороне до всякого согласия, а аудитория здесь европейская
   (принцип 6 конституции: данные людей в ЕС). Это не осторожность: подключение
   к Google Fonts — это передача персональных данных за пределы ЕС на каждом
   открытии страницы, и суд в Мюнхене уже признавал такое нарушением.

   Начертания подрезаны по алфавитам: кириллица, латиница и её расширение.
   Греческий и вьетнамский не грузятся — на трёх наших языках они не нужны.
   `swap`: пока файл едет, текст читается системным шрифтом, а не пустотой. */

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/static/fonts/lora-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/static/fonts/lora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/static/fonts/lora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Курсив Lora — отдельными файлами, а не наклоном обычного начертания.
   Браузер умеет наклонять любой шрифт сам, но у шрифта с засечками это видно
   сразу: настоящий курсив меняет форму букв, а поддельный просто кладёт их
   набок. Нужен он ровно в одном месте — счёт дней на карточках вечеров
   (решение Николь 18.08), — и три подрезанных файла это стоят. */

@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url("/static/fonts/lora-italic-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url("/static/fonts/lora-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url("/static/fonts/lora-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Цвет: пять рабочих + знак --------------------------------------- */
  /* Значения — из палитры, присланной Николь 18.08 (Palette.pdf). Прежние
     здесь не пишем даже пояснением: проверка палитры читает файл целиком,
     вместе с комментариями, и отменённый цвет в тексте считает живым. */
  --navy: #0f1e38;              /* основа, ≈40% площади */
  --offwhite: #f5f1ea;          /* воздух, ≈27% */
  /* Морская волна — СВЕТЛАЯ полоса, а не тёмная. По ней проходят только два
     цвета: глубокий синий (4.73) и чистый белый (3.51). Молочный даёт 3.12,
     антрацит 3.91, красный 2.09 — ниже порога все три.
     Решение Николь 18.08: текст на бирюзе белый. 3.51 — это порог крупного
     текста (3.0), а не обычного (4.5), поэтому на этой полосе нет мелких
     подписей: минимальный размер здесь — ступень тела, а не ступень ноты. */
  --teal: #1b998b;              /* светлая полоса; текст на ней — белый */
  --brown: #3d2314;             /* основа, ≈15% */
  --anthracite: #2d2d2f;        /* текст и основа, ≈15% */
  --burgundy: #a61c3c;          /* акцент на светлом: кнопка, линейка, метка */
  /* Коралл — акцент на тёмном. Красный по синему даёт 2.26 и не читается
     вовсе; коралл даёт 5.97. Обратное тоже верно: коралл по молочному — 2.47,
     поэтому на светлом акцент красный. Один и тот же акцент двумя цветами —
     не украшение, а единственный способ остаться читаемым на обеих основах. */
  --coral: #f97068;             /* акцент на тёмном: красный по синему не виден */
  --beige: #e9dec9;             /* буквы знака на тёмном (золото исключено 13.08) */
  /* Белый в наборе один и заведён под одну задачу — текст по морской волне
     (решение Николь 18.08). Молочный там даёт 3.12 и не проходит даже порог
     крупного текста; белый даёт 3.51 и проходит. Фоном белый не бывает:
     страница молочная, и «белая карточка» по-прежнему получается границей. */
  --white: #ffffff;             /* только текст и линии по морской волне */
  --flame-on-dark: #b03340;     /* огонь в кольце, тёмный фон */
  --flame-on-light: #87202a;    /* огонь в кольце, светлый фон */

  /* --- Роли на светлом --------------------------------------------------- */
  /* Фон молочный, без примеси (решение Николь 18.08): примесь коричневого
     уводила страницу в серое. Карточку от фона отделяет граница, а не оттенок —
     белого в палитре нет и не появится: панель заперла набор девятью
     значениями, и `test_styles_hold_exactly_the_palette` не пропустит десятое. */
  --page: var(--offwhite);
  --ink: var(--anthracite);
  /* 74%, а не 68%: приглушённый текст встречается и на бумаге карточки
     (--surface), которая темнее страницы. На 68% отношение к ней 4.22 —
     ниже порога 4.5 для 13-пиксельной подписи; на 74% выходит 5.0. */
  --ink-quiet: color-mix(in srgb, var(--anthracite) 74%, var(--offwhite));
  --ink-strong: var(--navy);
  --rule: color-mix(in srgb, var(--anthracite) 22%, transparent);
  --rule-strong: color-mix(in srgb, var(--navy) 45%, transparent);
  --accent: var(--burgundy);
  --surface: var(--offwhite);
  /* Кнопка на всей странице одна и та же — красная (решение Николь 18.08).
     `--btn-edge` — цвет кромки: на светлом фоне он совпадает с заливкой,
     на тёмной и на бирюзовой полосе становится светлым. Причина замером:
     красный к синему даёт 2.26, к морской волне 2.09 — то есть КРАЯ кнопки
     на этих полосах не видно, хотя подпись на ней читается с запасом (6.48).
     Порог для границы органа управления — 3.0, и держит его кромка. */
  --btn-bg: var(--burgundy);
  --btn-ink: var(--offwhite);
  --btn-edge: var(--btn-bg);

  /* --- Роли на тёмном ---------------------------------------------------- */
  --dark-ink: var(--offwhite);
  --dark-ink-quiet: color-mix(in srgb, var(--offwhite) 72%, var(--navy));
  --dark-rule: color-mix(in srgb, var(--offwhite) 24%, transparent);
  /* Акцент на тёмном осветляется примесью off-white. Чистая терракота из
     палитры даёт к тёмным основам 4.3–4.4, а метки набраны 13 px — порог для
     них 4.5. Примесь поднимает до 6.2, тон остаётся тем же.
     Сам цвет палитры не меняется: он по-прежнему годится линейкам,
     подчёркиваниям и заливкам, где порога контраста к тексту нет. */
  --dark-accent: color-mix(in srgb, var(--coral) 80%, var(--offwhite));

  /* --- Типографика ------------------------------------------------------
     Пара «с засечками и без» (решение Николь 18.08): заголовки С ЗАСЕЧКАМИ,
     текст БЕЗ. До 18.08 было наоборот, и это читалось как документ, а не как
     страница, на которую ведут трафик.

     Оба стека системные. Внешних шрифтовых сетей у нас не будет вообще:
     Google Fonts отдаёт адрес читателя за пределы ЕС, а аудитория здесь
     европейская. Своих файлов шрифта тоже пока нет — гарнитура панелью не
     выбрана (business/статус-знака.md), и вешать вес на невыбранное рано. */
  --font-display: "Lora", ui-serif, Georgia, "Iowan Old Style",
    "Times New Roman", serif;
  --font-text: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --weight-text: 400;
  --weight-medium: 500;
  --weight-strong: 600;

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-text: 1.6;

  --tracking-wide: 0.16em;
  --tracking-word: 0.22em;

  /* --- Шкала размеров: пять ступеней, дальше не растим --------------------
     1 — метка и сноска, 2 — основной текст, 3 — лид и крупный ввод,
     4 — заголовок раздела, 5 — заголовок экрана.

     Всё в rem, включая основной текст. Пиксель здесь отвязал бы страницу от
     настройки размера шрифта в браузере: заголовки и подписи росли бы, а
     абзацы — нет. Ступень 2 и есть размер тела: иначе «основной текст»
     подписан у одного значения, а набран другим. */
  --text-1: 0.8125rem;
  --text-2: 1.0625rem;
  --text-3: clamp(1.1875rem, 1rem + 0.7vw, 1.375rem);
  --text-4: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  --text-5: clamp(2rem, 1.35rem + 2.9vw, 3.5rem);

  /* --- Отступы: семь ступеней от четверти строки до четырёх ---------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --space-7: 4rem;

  --gutter: clamp(1.25rem, 5vw, 3rem);   /* поле от края экрана */
  --band-y: clamp(2.5rem, 8vw, 5.5rem);  /* вертикальный воздух полосы */
  --measure: 36rem;                      /* длина строки текста */
  --page-max: 74rem;                     /* ширина содержимого */

  /* --- Линии и углы ------------------------------------------------------
     Скругление (решение Николь 18.08). Прежний почти прямой угол в 2px
     отменён: он читался как бланк, а не как страница.

     Панель отвергала не скругление само по себе, а связку «скруглённая
     карточка + тяжёлая тень + градиент» — её и узнают как воронку продаж
     (business/палитра.md, 13/22 за отказ от тяжёлых градиентов). Поэтому
     скругление берём, а тень не берём: карточку отделяет граница и фон. */
  --radius: 12px;
  --radius-button: 8px;
  --hairline: 1px;

  /* Минимальная цель для пальца. 44 px — не украшение: у промаха по ссылке
     в шапке цена та же, что у неработающей ссылки. */
  --tap: 2.75rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-2);
  font-weight: var(--weight-text);
  line-height: var(--leading-text);
  /* Длинное слово (немецкое сложное, адрес) не должно расталкивать экран. */
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
  color: var(--ink-strong);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-5);
}

h2 {
  font-size: var(--text-4);
}

h3 {
  font-size: var(--text-3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

p,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding-left: 1.15em;
}

a {
  color: var(--ink-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--accent);
}

img,
svg {
  max-width: 100%;
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Тёмная полоса переопределяет роли, а не каждый цвет по месту: любой
   компонент внутри неё становится читаемым сам, без варианта «на тёмном».
   Тёмные полосы перечислены здесь же, а не помечаются в разметке вторым
   классом: забытый класс — это тёмный текст по тёмному фону.

   Заливка кнопки на тёмном — off-white, а не осветлённый бордовый: бордовый
   по тёмному даёт 4.4 к подписи и не дотягивает до порога. Off-white читаем
   на всех четырёх тёмных цветах с запасом (12.3–13.0, палитра). */
.on-dark,
.band--navy,
.band--brown,
.band--ink {
  --ink: var(--dark-ink);
  --ink-quiet: var(--dark-ink-quiet);
  --ink-strong: var(--dark-ink);
  --rule: var(--dark-rule);
  --rule-strong: var(--dark-rule);
  --accent: var(--dark-accent);
  --surface: transparent;
  /* Кнопка красная и здесь: она одна на всю страницу. Молочной была прежде —
     тогда на тёмном она читалась как главная, а на светлом главной была
     красная, и одна страница показывала две разные кнопки. */
  --btn-bg: var(--burgundy);
  --btn-ink: var(--offwhite);
  --btn-edge: var(--offwhite);
  color: var(--ink);
}

/* Полоса морской волны. Своя раскладка ролей, потому что она светлая: текст,
   заголовки и линии — белые (3.51, решение Николь 18.08), кнопка — синяя
   заливка с белой подписью. Синяя заливка кнопки, а не белая: синий по бирюзе
   даёт 4.73 и отделяет кнопку от полосы, а белая кнопка на белом тексте
   потерялась бы. Приглушённой ступени текста здесь нет: любой оттенок белого
   уходит ниже порога, и разницу держит размер, а не контраст. */
.band--teal {
  --ink: var(--white);
  --ink-quiet: var(--white);
  --ink-strong: var(--white);
  --rule: color-mix(in srgb, var(--white) 45%, transparent);
  --rule-strong: color-mix(in srgb, var(--white) 75%, transparent);
  --accent: var(--white);
  --surface: transparent;
  --btn-bg: var(--burgundy);
  --btn-ink: var(--white);
  --btn-edge: var(--white);
  color: var(--ink);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* На экране пошире растёт ступень шкалы, а не размер тела в обход её:
   вместе с телом подрастает всё, что на эту ступень ссылается. */
@media (min-width: 48rem) {
  :root {
    --text-2: 1.125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}