/* Дизайн-система сайта Калли. Правила и «почему» — design/ДИЗАЙН.md.
   Вариант А (решение Руслана 13.10.2026): тёмная шапка, светлая статья. */

/* Шрифт подключается из static/fonts/fonts.css: вариативный Golos Text 400–800, свой сервер. */

:root {
  /* Цвета. Контраст к фону — в ДИЗАЙН.md. */
  --ink: #16130F;          /* текст на светлом; фон шапки, подвала, блока с кнопкой */
  --paper: #FBF8F3;        /* фон страницы */
  --cream: #F3EDE4;        /* текст на тёмном; фон шапки таблицы и врезок на светлом */
  --amber: #FFB627;        /* ТОЛЬКО заливка кнопки и знак-пламя; текстом на светлом — никогда */
  --amber-ink: #8A5200;    /* ссылки на светлом */
  --muted: #6B645B;        /* дата, подписи, источники на светлом */
  --muted-on-ink: #A79F94; /* то же на тёмном */
  --line: #E6DED2;         /* разделители и рамки таблиц на светлом */
  --line-on-ink: #2E2923;  /* разделители на тёмном */
  --focus: 0 0 0 3px #FFB627, 0 0 0 5px #16130F;

  /* Шрифт */
  --font: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --w-regular: 400;
  --w-medium: 500;
  --w-heavy: 800;          /* только заголовки и имя «Калли» */

  /* Размеры текста: телефон → от 768px */
  --fs-body: 17px;         /* 18px на широком экране */
  --fs-small: 14px;        /* подписи, источники, мета */
  --fs-h1: 28px;           /* 34px */
  --fs-h2: 22px;           /* 26px */
  --fs-h3: 18px;           /* 20px */
  --lh-body: 1.6;
  --lh-head: 1.2;
  --measure: 68ch;         /* ширина колонки текста */

  /* Отступы: шаг 4px */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --gutter: 16px;          /* боковой отступ на телефоне; 24px от 768px */

  --radius: 10px;          /* кнопки, блок с кнопкой, поля калькулятора */
}

@media (min-width: 768px) {
  :root {
    --fs-body: 18px;
    --fs-h1: 34px;
    --fs-h2: 26px;
    --fs-h3: 20px;
    --gutter: 24px;
  }
}

/* Golos Text, ParaType, SIL Open Font License 1.1. Вариативный шрифт 400–800, скачан с Google Fonts 13.10.2026, раздаём сами (быстрее из РФ, адреса читателей не уходят в Google). */
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 800;font-display:swap;src:url("/fonts/golos-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 800;font-display:swap;src:url("/fonts/golos-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;}

/* Стили сайта. Значения — только из design/tokens.css (собираются в один файл при сборке). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body);
  font-weight: var(--w-regular);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--amber-ink); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }
.wrap { max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* Шапка */
.site-head { background: var(--ink); }
.site-head .wrap { display: flex; align-items: center; gap: var(--s3); min-height: 56px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: var(--s2); color: var(--amber); text-decoration: none; font-weight: var(--w-heavy); font-size: 20px; }
.logo svg { width: 20px; height: 26px; }
.site-nav { margin-left: auto; display: flex; gap: var(--s4); }
.site-nav a { color: var(--muted-on-ink); text-decoration: none; font-size: var(--fs-small); font-weight: var(--w-medium); }
.site-nav a:hover { color: var(--cream); }

/* Текст */
main { padding: var(--s6) 0 var(--s7); }
h1, h2, h3 { line-height: var(--lh-head); font-weight: var(--w-heavy); margin: 0; }
h1 { font-size: var(--fs-h1); margin: var(--s2) 0 var(--s4); }
h2 { font-size: var(--fs-h2); margin: var(--s7) 0 var(--s3); }
h3 { font-size: var(--fs-h3); margin: var(--s5) 0 var(--s2); font-weight: var(--w-medium); }
p, ul, ol { margin: 0 0 var(--s4); }
li { margin-bottom: var(--s2); }
strong { font-weight: var(--w-medium); }
.meta { color: var(--muted); font-size: var(--fs-small); margin: 0; }
.meta a { color: var(--muted); }
.lead { font-size: calc(var(--fs-body) + 1px); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s7) 0 var(--s5); }

/* Таблица: прокрутка внутри рамки, страница не уезжает */
.table-scroll { overflow-x: auto; margin: 0 0 var(--s5); border: 1px solid var(--line); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; line-height: 1.45; }
th { background: var(--cream); text-align: left; font-weight: var(--w-medium); }
th, td { padding: var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }

/* Блок с кнопкой в бота — один на странице */
.cta { background: var(--ink); color: var(--cream); border-radius: var(--radius); padding: var(--s5); margin: var(--s6) 0; display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }
.cta p { margin: 0; flex: 1 1 260px; }
.cta a, .button { display: inline-block; background: var(--amber); color: var(--ink); text-decoration: none; font-weight: var(--w-medium); padding: var(--s3) var(--s5); border-radius: var(--radius); white-space: nowrap; }
.cta a:hover, .button:hover { filter: brightness(1.06); }

/* Скриншот бота на главной */
.shot { margin: var(--s5) auto; max-width: 340px; }
.shot img { border-radius: var(--radius); border: 1px solid var(--line); }
.shot figcaption { color: var(--muted); font-size: var(--fs-small); margin-top: var(--s2); }
.placeholder { border: 2px dashed var(--line); border-radius: var(--radius); padding: var(--s6) var(--s4); text-align: center; color: var(--muted); }

/* Список статей */
.posts { list-style: none; padding: 0; }
.posts li { padding: var(--s4) 0; border-bottom: 1px solid var(--line); margin: 0; }
.posts a { font-weight: var(--w-medium); font-size: var(--fs-h3); text-decoration: none; color: var(--ink); }
.posts a:hover { color: var(--amber-ink); }
.posts p { margin: var(--s1) 0 0; color: var(--muted); font-size: var(--fs-small); }

/* Хлебные крошки и источники */
.crumbs { font-size: var(--fs-small); color: var(--muted); margin: 0; }
.crumbs a { color: var(--muted); }
.sources { font-size: var(--fs-small); color: var(--muted); }
.sources li { margin-bottom: var(--s1); }

/* Подвал */
.site-foot { background: var(--ink); color: var(--muted-on-ink); font-size: var(--fs-small); padding: var(--s6) 0; }
.site-foot p { margin: 0 0 var(--s2); }
.site-foot a { color: var(--cream); }