/* Пусковой / Разборы — дизайн-система блога. Paper/ink, serif-заголовки.
   Основа — Stitch-макет (/tmp/orc/stitch_blog), не пиксельная копия:
   без фальшивых цифр и регалий издания (М1-М5 суда плана). Только светлая
   тема.

   Эталоны при вёрстке нового блока — ДВА, оба обязательны: ТЗ владельца
   (текст/данные) и разметка секции макета в /tmp/orc/stitch_blog/main.html
   или article.html (композиция/токены) — брать структуру и числа оттуда,
   а не реконструировать «на глаз» по словесному описанию (см. круг переделки
   полосы спецдоклада). */

@import url('./fonts.css');

:root {
  --paper: #f7f5f1;
  --card: #f2efe9;
  --card-strong: #eeebe5;
  --line: #d6d3cc;
  --ink: #14181d;
  --ink-soft: #4b5056;
  --ink-faint: #75777b;
  --accent: #24405e;
  --accent-soft: #c9d9ea;
  --accent-soft-ink: #0f2338;
  --delta-red: #ba1a1a;
  --max: 1160px;
  --header-h: 4rem;
  --crumb-h: 2.5rem;

  /* Палитра графиков (ТЗ владельца к deficit-kadrov/shtraf-za-skorost/
     stroyka-20-vvp) — те же имена переменных, что в исходниках владельца,
     чтобы их инлайн-SVG (raw-embed, «Расчёт Пускового» — авторские рисунки)
     вставлялись var(--blue) и т.п. без переписывания цветов. Синхронизировано
     с константами ACCENT, BAR_MUTED, BAR_MUTED_2, DELTA_RED в blog/lib/charts.mjs.
     ВНИМАНИЕ комментаторам: звёздочка вплотную к слэшу закрывает комментарий
     досрочно — здесь однажды так склеились два имени констант без пробела
     между ними, и разбор CSS съедал следующее объявление (--blue) целиком
     до ближайшей точки с запятой; синий в авторских SVG сайта рендерился
     чёрным. Держите пробел там, где эти два символа могут оказаться рядом. */
  --blue: #1f4e79;
  --blue2: #7ea1c4;
  --grey: #c3c9d1;
  --red: #b3261e;

  /* Круг 5 — владелец выбрал по монтажам «эталон | кандидат»
     (/tmp/orc/blog_check/fonts/): Work Sans физически не рисует кириллицу
     (круг 4), а его фолбэк на IBM Plex Sans визуально разъехался с
     фактическим рендером Stitch-макета. Noto Sans совпал по рисунку
     (ширина, разрядка, вес) и на кириллице, и на латинице — единая
     гарнитура текста без смешивания рисунков в одной строке. */
  --font-sans: 'Noto Sans', system-ui, -apple-system, sans-serif;
  --font-serif: 'IBM Plex Serif', Georgia, serif;

  /* Тип-токены Stitch-макета (main.html, tailwind.config → theme.fontSize),
     именованные переменные — второй эталон, сверяется check-structure.mjs.
     Пока используются только в полосе спецдоклада; остальной сайт держит
     свою уже устоявшуюся шкалу (проверено предыдущими кругами приёмки),
     переводить её на эти токены здесь не задача. */
  --fs-headline-lg: 30px; --lh-headline-lg: 36px; --ls-headline-lg: -0.01em;
  --fs-display-md: 40px; --lh-display-md: 44px; --ls-display-md: -0.015em;
  --fs-label-caps: 11px; --lh-label-caps: 14px; --ls-label-caps: 0.08em;
  --fs-body-md: 15px; --lh-body-md: 24px;
  --fs-caption: 12px; --lh-caption: 16px; --ls-caption: 0.01em;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-serif); margin: 0; font-weight: 600; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 768px) {
  .container { padding: 0 2rem; }
}

.label-caps {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dot-sep { color: var(--line); margin: 0 0.15em; }
.draft-badge {
  display: inline-flex; align-items: center; gap: 0.35em;
  background: #fff3d6; color: #7a4a00; border: 1px solid #e8b84b;
  padding: 0.15rem 0.55rem; font-size: 11px; line-height: 14px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
/* Тематический тег рубрики («Кадры», «Мегапроект» и т.п.) — та же форма,
   что у .draft-badge (рамка/лёгкий фон/капс), но в своей палитре: жанровая
   плашка (.tag/.tag-sm, серая) и тема должны различаться визуально. */
.topic-badge {
  display: inline-flex; align-items: center; gap: 0.35em;
  background: rgba(126, 161, 196, 0.08); color: #1f4e79; border: 1px solid #7ea1c4;
  padding: 0.15rem 0.55rem; font-size: 11px; line-height: 14px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand-group { display: flex; align-items: center; gap: 0.9rem; }
.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 10px 0; /* тап-таргет ≥44px по высоте, визуально в рамках шапки 64px */
  text-decoration: none;
  color: var(--ink);
}
.header-divider { display: none; width: 1px; height: 1rem; background: var(--line); }
.header-subtitle {
  display: none; font-family: var(--font-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-soft);
}
@media (min-width: 640px) {
  .header-divider, .header-subtitle { display: inline-block; }
}
.brand__mark { height: 1.9rem; width: 1.9rem; object-fit: contain; }
.brand__word {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.brand:hover .brand__word { color: var(--accent); }
.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a {
  display: flex;
  align-items: center;
  padding: 15px 0; /* тап-таргет ≥44px по высоте, визуально в рамках шапки 64px */
  text-decoration: none;
  font-family: var(--font-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 0.15s ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--card);
  margin-top: 4rem;
}
.footer__inner { padding-top: 3rem; padding-bottom: 2.25rem; }
.footer__top {
  display: grid;
  gap: 2rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) {
  .footer__top { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem; }
}
.footer__brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.footer__brand img { height: 1.7rem; width: 1.7rem; object-fit: contain; }
.footer__brand span {
  font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; font-size: 19px; line-height: 24px;
}
.footer__brand-col p {
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 40ch;
  margin: 0;
}
.footer-col h3 {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  margin: 0 0 0.9rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; }
.footer-col a {
  display: flex; align-items: center; min-height: 44px; /* тап-таргет, паддинг заменяет gap списка */
  text-decoration: none; color: var(--ink-soft); font-size: 14px;
}
.footer-col a:hover { color: var(--accent); }
.footer__bottom {
  padding-top: 1.5rem;
  color: var(--ink-faint);
  font-size: 12px;
  line-height: 1.6;
}

/* ── Hero (главная) ──────────────────────────────────────────────────── */
.hero { padding: 3rem 0 3.5rem; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3.5rem; }
}
.hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1.25rem; }
.hero__tags .tag {
  border: 1px solid var(--ink); padding: 0.15rem 0.6rem;
  font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.hero__title { margin: 0 0 1.5rem; }
.hero__title a {
  text-decoration: none; color: var(--ink);
  font-size: 36px; line-height: 40px; letter-spacing: -0.015em; font-weight: 600;
}
@media (min-width: 1024px) { .hero__title a { font-size: 56px; line-height: 60px; letter-spacing: -0.02em; } }
.hero__title a:hover { color: var(--accent); }
.hero__lead {
  font-size: 18px; line-height: 28px; letter-spacing: -0.005em; color: var(--ink-soft);
  border-left: 2px solid var(--accent); padding-left: 1.15rem;
  max-width: 58ch; margin: 0 0 1.5rem;
}
.hero__cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.hero__cta span:first-child { text-decoration: underline; text-underline-offset: 6px; }
.hero__cta:hover { color: var(--accent); }
.hero__aside .exhibit { margin: 0; }

/* ── Разборы (архив-грид) ──────────────────────────────────────────── */
.archive { padding: 0 0 3rem; }
.archive__head { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.archive__head h2 { font-size: 30px; line-height: 36px; letter-spacing: -0.01em; font-weight: 600; }
.archive__grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .archive__grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } }
.archive-card { border: 1px solid var(--line); background: var(--card); padding: 1.4rem 1.5rem; display: flex; flex-direction: column; }
.archive-card__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.tag-sm {
  font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.archive-card h3 { font-size: 24px; line-height: 33px; font-weight: 600; margin-bottom: 0.6rem; }
.archive-card h3 a { text-decoration: none; color: var(--ink); }
.archive-card h3 a:hover { color: var(--accent); }
.archive-card p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 1rem; flex: 1; }
.archive-card__metric {
  margin: 0 0 1rem; padding: 0.6rem 0.85rem; border-left: 3px solid var(--accent);
  background: var(--paper); font-family: var(--font-serif); font-size: 15px;
  font-weight: 600; line-height: 1.35; color: var(--ink);
}
.archive-card__cta {
  align-self: flex-start; text-decoration: none; color: var(--accent);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.archive-card__cta:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── Спецдоклад: полоса на главной ─────────────────────────────────────
   Композиция 1:1 из секции «Спецдоклад» Stitch-макета (main.html: grid-cols-12,
   col-span-8/4, gap-8, py-12, border-y) — эталон для структуры и токенов;
   содержимое — из ТЗ владельца. Подложка --card-strong (#eeebe5), рамка
   сверху/снизу --line, разделитель колонок --accent. Без иконок, бейджей
   «эксклюзив», дат/регионов макета (намеренное исключение по ТЗ). */
.spec-strip { background: var(--card-strong); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 3rem 0; }
.spec-strip__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .spec-strip__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 2rem; } }
.spec-strip__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.spec-strip__badge {
  background: var(--ink); color: #fff; padding: 0.125rem 0.5rem;
  font-family: var(--font-sans); font-size: var(--fs-label-caps); line-height: var(--lh-label-caps);
  letter-spacing: var(--ls-label-caps); font-weight: 600; text-transform: uppercase;
}
.spec-strip__label {
  color: var(--ink-soft); font-size: var(--fs-label-caps); line-height: var(--lh-label-caps);
  letter-spacing: var(--ls-label-caps);
}
.spec-strip__title { margin: 0 0 0.75rem; }
.spec-strip__title a {
  text-decoration: none; color: var(--ink); font-family: var(--font-serif);
  font-size: var(--fs-headline-lg); line-height: var(--lh-headline-lg); letter-spacing: var(--ls-headline-lg); font-weight: 600;
}
.spec-strip__title a:hover { color: var(--accent); }
.spec-strip__lead { font-size: var(--fs-body-md); line-height: var(--lh-body-md); color: var(--ink-soft); max-width: 60ch; margin: 0; }
.spec-strip__figure { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
@media (min-width: 1024px) { .spec-strip__figure { align-items: flex-end; } }
/* Подпись НАД числом + вертикальный разделитель справа от текстового блока
   (эталон: main.html, class border-l lg:border-l-0 lg:border-r border-[#24405e]
   pl-4 lg:pl-0 lg:pr-4) — на мобильном разделитель не нужен, добавляется с 1024px. */
.spec-strip__figure-inner { text-align: left; }
@media (min-width: 1024px) {
  .spec-strip__figure-inner { text-align: right; border-right: 1px solid var(--accent); padding-right: 1rem; }
}
.spec-strip__number-caption {
  margin: 0 0 0.25rem; color: var(--ink-soft);
  font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption);
}
.spec-strip__number {
  margin: 0; color: var(--accent); font-family: var(--font-serif);
  font-size: var(--fs-display-md); line-height: var(--lh-display-md); letter-spacing: var(--ls-display-md); font-weight: 500;
}
.spec-strip__cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--ink); color: #fff; text-decoration: none;
  padding: 0.7rem 1.3rem; font-size: var(--fs-label-caps); font-weight: 600; letter-spacing: var(--ls-label-caps); text-transform: uppercase;
}
.spec-strip__cta:hover { background: var(--accent); }

/* ── About / О проекте ──────────────────────────────────────────────── */
.about { padding: 3.5rem 0; }
.about__grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .about__grid { grid-template-columns: 0.9fr 3fr; gap: 3rem; } }
.about__label { font-size: 13px; letter-spacing: 0.14em; color: var(--accent); font-weight: 600; text-transform: uppercase; }
.about__quotes p {
  font-family: var(--font-serif); font-size: 24px; line-height: 1.6; font-weight: 400;
  color: var(--ink); margin: 0 0 1.15rem;
}
.about__quotes p:last-of-type { color: var(--accent); font-weight: 500; }
.about__principles {
  display: grid; gap: 1.25rem; margin-top: 2rem; padding-top: 2rem;
  border-top: 1px solid var(--line);
}
@media (min-width: 640px) { .about__principles { grid-template-columns: repeat(3, 1fr); } }
.about__card { border: 1px solid var(--line); background: var(--card); padding: 1.1rem 1.25rem; }
.about__card h4 {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.5rem;
}
.about__card p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 19px; letter-spacing: 0.005em; }

/* ── Crumb bar (крошки + дата · время чтения) ────────────────────────── */
/* Вторая полоса под шапкой (владелец): фон как у .site-header, без линии-
   разделителя — закреплена вместе с шапкой на ≥1024px (top: var(--header-h))
   — на 390 в потоке, не закреплена. Дата/время чтения переехали сюда из
   карточки автора (не дублируются). */
.crumb-bar { background: var(--paper); }
@media (min-width: 1024px) {
  .crumb-bar { position: sticky; top: var(--header-h); z-index: 90; }
}
.crumb-bar__inner {
  /* padding-top/bottom, НЕ шорткат padding: — тот обнулил бы левый/правый
     паддинг, который .crumb-bar__inner получает от класса .container
     (выравнивание с заголовком/сайдбаром ниже). */
  min-height: var(--crumb-h); padding-top: 0.5rem; padding-bottom: 0.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.breadcrumb {
  font-size: 12px; color: var(--ink-faint); flex: 1 1 auto; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.breadcrumb a { text-decoration: none; color: var(--ink-faint); }
.breadcrumb a:hover { color: var(--accent); }
.crumb-bar__meta { flex: none; font-size: 12px; color: var(--ink-faint); white-space: nowrap; }

/* ── Article header ──────────────────────────────────────────────────── */
.article-header { border-bottom: 1px solid var(--line); padding: 1.5rem 0 2.5rem; }
.article-header__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1.25rem; }
.article-header__tags .tag {
  background: var(--card-strong); color: var(--accent);
  padding: 0.2rem 0.65rem; font-size: 11px; line-height: 14px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.article-header h1 {
  font-size: 30px; line-height: 36px; letter-spacing: -0.01em; font-weight: 600;
  margin-bottom: 1.15rem; max-width: 30ch;
}
@media (min-width: 1024px) {
  .article-header h1 { font-size: 40px; line-height: 44px; letter-spacing: -0.015em; font-weight: 500; }
}
.article-header .lead {
  font-size: 18px; line-height: 28px; letter-spacing: -0.005em; color: var(--ink-soft);
  max-width: 62ch; margin: 0 0 1.5rem;
}

/* ── Article layout ──────────────────────────────────────────────────── */
/* Крошки — отдельная полоса над сеткой (.crumb-bar), не часть grid-area.
   Сетка начинается с шапки статьи, не с тела — сайдбар с карточкой автора
   стоит на одном уровне с заголовком (эталон владельца,
   owner-expects-author.png). Именованные области, не order-свап: на 390
   порядок «шапка → карточка → текст» (аside между header и body — просто
   order не даёт, аside «наезжал» бы перед шапкой), на ≥1024px аside занимает
   обе строки правой колонки. */
.article-layout { padding-top: 1.75rem; padding-bottom: 4rem; }
.article-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem;
  grid-template-areas: "header" "aside" "body";
}
.article-header { grid-area: header; }
.article-aside { grid-area: aside; }
.article-body { grid-area: body; min-width: 0; }
@media (min-width: 1024px) {
  .article-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0.5rem 3.5rem;
    grid-template-areas: "header aside" "body   aside";
  }
}
.article-body { max-width: 660px; }

.prose h2 {
  font-size: 24px; line-height: 30px; letter-spacing: -0.005em; font-weight: 500;
  display: flex; align-items: center; gap: 0.75rem;
  margin: 2.75rem 0 1.15rem;
}
.prose h2::before { content: ''; width: 6px; height: 1.5rem; background: var(--accent); display: inline-block; flex: none; }
.prose > h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.15rem; font-size: 15px; line-height: 1.8; color: var(--ink); overflow-wrap: break-word; }
.prose .callout {
  font-family: var(--font-serif); font-size: 24px; line-height: 30px; font-weight: 500; font-style: italic;
  color: var(--ink); border-left: 3px solid var(--accent); background: rgba(36,64,94,0.06);
  padding: 1.1rem 1.5rem; margin: 2rem 0;
}
/* Заключительный абзац про Пусковой — обычный абзац, без баннера/рамки
   (ТЗ владельца): только тонкая верхняя черта отделяет его от разбора. */
.prose .tail {
  border: none; border-top: 1px solid var(--line); padding-top: 1.5rem;
  font-size: 15px; line-height: 1.8; color: var(--ink-soft); margin: 2rem 0 0;
}
.prose a, .sources a, .note a {
  color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.prose a:hover, .sources a:hover, .note a:hover { color: var(--accent-soft-ink); }

/* «Два слова, без которых не разобраться» — серая пояснительная плашка. */
.prose .note {
  background: var(--card); border-left: 3px solid var(--line);
  padding: 1rem 1.3rem; margin: 1.75rem 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft);
}
.prose .note b { color: var(--ink); font-weight: 600; }

/* Панель показателей — 2×2, на мобиле стопкой. */
.prose .panel {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin: 1.75rem 0;
}
@media (max-width: 479px) { .prose .panel { grid-template-columns: 1fr; } }
.prose .panel .tile { background: var(--paper); padding: 1.1rem 1.3rem; }
.prose .panel .t { margin: 0 0 0.4rem; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.prose .panel .n { margin: 0 0 0.35rem; font-family: var(--font-serif); font-size: 26px; line-height: 1.15; font-weight: 600; color: var(--ink); }
.prose .panel .n.down { color: var(--delta-red); }
.prose .panel .n.up { color: var(--accent); }
.prose .panel .d { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

.sources { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.sources h3 { font-family: var(--font-sans); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1rem; }
.sources ol { margin: 0; padding-left: 1.15rem; color: var(--ink-soft); font-size: 12px; line-height: 1.55; letter-spacing: 0.01em; }
.sources li { margin-bottom: 0.65rem; overflow-wrap: anywhere; }

/* ── Графики: карточки-«рисунки» (плотность по Stitch article.html) ──── */
.exhibit {
  border: 1px solid var(--line); background: var(--card);
  padding: 1.4rem; margin: 1.75rem 0;
}
.exhibit-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin: 1.75rem 0; }
@media (min-width: 640px) { .exhibit-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.exhibit-pair .exhibit { margin: 0; height: 100%; }
.exhibit-pair__source {
  grid-column: 1 / -1; margin: -0.5rem 0 0; font-size: 12px; color: var(--ink-faint); line-height: 1.6;
  overflow-wrap: anywhere;
}
.exhibit__head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding-bottom: 0.85rem; margin-bottom: 0.95rem; border-bottom: 1px solid var(--line);
}
.exhibit__badge {
  display: block; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.25rem;
}
.exhibit__title { font-family: var(--font-serif); font-size: 19px; line-height: 24px; font-weight: 600; margin: 0; }
.exhibit__meta { flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 16px; letter-spacing: 0.01em; color: var(--ink-faint); text-align: right; }
.exhibit__svg { width: 100%; height: auto; }
/* Классы владельца для raw-embed рисунков (авторские SVG, вставлены как есть). */
.exhibit__svg .ax { font-size: 12px; fill: var(--ink-faint); }
.exhibit__svg .vl { font-size: 13px; fill: var(--ink); font-weight: 600; }
.exhibit__svg .an { font-size: 12px; fill: var(--ink-faint); }
/* Только для --owner: координаты подписей подогнаны владельцем под этот стек
   (его собственный <style>, svg{font-family:"Helvetica Neue",Arial,sans-serif}).
   Наш общий Noto Sans шире и наезжает текстом на столбцы при тех же x/y. */
.exhibit__svg--owner { font-family: "Helvetica Neue", Arial, sans-serif; }
.exhibit__note { margin: 0.65rem 0 0; font-size: 12px; line-height: 1.5; letter-spacing: 0.01em; color: var(--ink-faint); }
.exhibit__delta-caption {
  margin: 0.75rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 19px; letter-spacing: 0.005em; color: var(--ink-soft);
}
.exhibit__source {
  margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-faint); line-height: 1.5; letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}
.delta { color: var(--delta-red); font-weight: 700; }

/* Таблицы данных в карточке-рисунке — горизонтальный скролл в своём контейнере. */
.exhibit__table-scroll { overflow-x: auto; max-width: 100%; }
.exhibit__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.exhibit__table th, .exhibit__table td { padding: 0.5rem 0.6rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.exhibit__table th { color: var(--ink-faint); font-weight: 600; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.exhibit__table td { color: var(--ink); line-height: 1.5; }
.exhibit__table th.r, .exhibit__table td.r { text-align: right; white-space: nowrap; }
.exhibit__table tbody tr:last-child td { border-bottom: none; }

.chart__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin-top: 0.85rem; }
.chart__legend-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 12px; line-height: 16px; letter-spacing: 0.01em; color: var(--ink-soft); }
.chart__swatch { width: 10px; height: 10px; flex: none; display: inline-block; }

/* ── Sidebar (карточка автора + TOC + share) ─────────────────────────── */
.article-aside { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 1024px) {
  .article-aside { position: sticky; top: calc(var(--header-h) + var(--crumb-h)); align-self: start; border-left: 1px solid var(--line); padding-left: 2rem; }
}
/* Первый блок сайдбара (эталон владельца: owner-expects-author.png) — фото
   на всю ширину карточки, снимок уже чёрно-белый (обработан заранее). */
.author-sidebar-card { border: 1px solid var(--line); background: var(--card); }
.author-sidebar-card__photo { display: block; width: 100%; height: auto; }
.author-sidebar-card__body { padding: 1rem 1.1rem 1.1rem; }
.author-sidebar-card__name { font-family: var(--font-serif); font-size: 17px; line-height: 22px; font-weight: 600; margin: 0 0 0.3rem; color: var(--ink); }
.author-sidebar-card__spec {
  margin: 0.6rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--line);
  font-size: 12px; line-height: 17px; color: var(--ink-soft);
}
.toc summary {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; padding: 0.15rem 0; color: var(--ink);
}
@media (min-width: 1024px) { .toc summary { cursor: default; } }
.toc nav { margin-top: 0.85rem; display: grid; gap: 0.5rem; }
.toc nav a {
  text-decoration: none; font-size: 13px; line-height: 19px; letter-spacing: 0.005em; color: var(--ink-soft);
  border-left: 2px solid transparent; padding-left: 0.75rem; transition: color 0.15s, border-color 0.15s;
}
.toc nav a:hover { color: var(--accent); border-color: var(--accent); }

.share__label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 0.7rem;
}
.share__buttons { display: flex; gap: 0.5rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none; padding: 0.55rem 0.85rem; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.btn:hover { border-color: var(--ink); background: var(--card); }
.btn[data-copied]::after { content: ' ✓'; }

.facts-card {
  border: 1px solid var(--line); background: var(--card); padding: 0.85rem 1.1rem;
}
.facts-card p { margin: 0; font-size: 12px; line-height: 16px; letter-spacing: 0.01em; color: var(--ink-soft); }
.aside-footnote {
  font-family: var(--font-serif); font-style: italic; font-size: 13px; line-height: 19px;
  color: var(--ink-faint); margin: 0;
}

/* ── /pravila/ ───────────────────────────────────────────────────────── */
.rules { padding-top: 2.5rem; padding-bottom: 4rem; }
.rules h1 { font-size: 32px; margin-bottom: 0.5rem; }
.rules__intro { color: var(--ink-soft); margin: 0 0 2.5rem; max-width: 60ch; }
.rules section { max-width: 66ch; margin: 0 0 2.75rem; }
.rules section h2 {
  font-size: 24px; line-height: 30px; letter-spacing: -0.005em; font-weight: 500;
  margin-bottom: 0.9rem; display: flex; align-items: center; gap: 0.65rem;
}
.rules section h2::before { content: ''; width: 6px; height: 1.3rem; background: var(--accent); display: inline-block; }
.rules section p { color: var(--ink); line-height: 1.8; margin: 0 0 1rem; font-size: 15px; }
.rules .door {
  border: 1px solid var(--line); background: var(--card); padding: 1.1rem 1.4rem; margin-top: 1rem;
  font-size: 14px; color: var(--ink-soft); line-height: 1.6;
}
.rules .door a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.rules .fixes-empty { color: var(--ink-faint); font-style: italic; }

/* ── 404 ─────────────────────────────────────────────────────────────── */
.notfound { padding-top: 5rem; padding-bottom: 5rem; text-align: center; }
.notfound h1 { font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1rem; }
.notfound p.big { font-family: var(--font-serif); font-size: 28px; margin: 0 0 1.5rem; }
.notfound .actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.notfound .actions a {
  border: 1px solid var(--ink); padding: 0.7rem 1.3rem; text-decoration: none; color: var(--ink);
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.notfound .actions a.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.notfound .actions a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }