/* сайт: макет spravochnik, палитра oliva, пара 1 — собрано build.py из макетов Дизайна */
/* Пара 1 «Литера»: текст — Literata (антиква для чтения), заголовки и служебные строки — Commissioner (гротеск). Обе — OFL.
   Файлы — /fonts/literata, /fonts/commissioner (кириллица + латиница, woff2). */
@font-face { font-family: "Literata"; src: url("/fonts/literata/literata-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("/fonts/literata/literata-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Commissioner"; src: url("/fonts/commissioner/commissioner-normal.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
:root {
  --font-body: "Literata", Georgia, "Times New Roman", serif;
  --font-head: "Commissioner", system-ui, "Segoe UI", Arial, sans-serif;
  --font-ui: "Commissioner", system-ui, "Segoe UI", Arial, sans-serif;
  --fs-body: 18px; --lh-body: 1.62; --head-weight: 700; --head-tracking: -0.015em; --ui-weight: 500;
  --measure: 66ch;   /* ширина колонки текста: у этой гарнитуры ≈ 70 знаков в строке */
}

:root {         /* Олива — льняной фон, оливковый акцент */
  color-scheme: light;
  --bg: #F7F6EE; --surface: #FFFFFD; --surface-2: #EEEDDF;
  --text: #23241C; --heading: #16170F; --muted: #5D5E4F; --line: #E1DFCD;
  --accent: #56661B; --accent-hover: #435016; --accent-ink: #FFFFFF; --accent-soft: #ECEFD8;
}
p:where(.cap) { font-size: 1.5em; font-weight: bold; margin-block: 0.83em; }
/* Макет «Справочник» — навигация по разделам слева, статья с блоком «Коротко» наверху, таблицы, врезки «Важно» и «Пример».
   Плотнее и суше «Журнала»: меньше воздуха между блоками, линии вместо заливок, акцент — для навигации и отметок.
   Цвета — только переменные палитры (../variacii/palitry.css), шрифты — только переменные пары (../variacii/pary/para-N.css).
   Сетка 8 px; страница 1280, левая колонка 280, текст статьи ≤ 70 знаков. */

/* ── Основа ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body);
  font-kerning: normal; font-variant-numeric: lining-nums;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3, h4 {
  margin: 0; color: var(--heading); font-family: var(--font-head); font-weight: var(--head-weight);
  letter-spacing: var(--head-tracking); line-height: 1.2; text-wrap: balance;
}
p:where(.cap) {
  margin: 0; color: var(--heading); font-family: var(--font-head); font-weight: var(--head-weight);
  letter-spacing: var(--head-tracking); line-height: 1.2; text-wrap: balance;
}
p { margin: 0; }
.wrap { --pad: 24px; max-width: 1328px; margin-inline: auto; padding-inline: var(--pad); }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 16px; z-index: 20; padding: 8px 16px; background: var(--surface); color: var(--heading); }
.label {
  font-family: var(--font-ui); font-size: 13px; line-height: 16px; font-weight: var(--ui-weight);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}

/* ── Шапка ──────────────────────────────────────────────────────────────── */
.top { background: var(--surface); border-bottom: 1px solid var(--line); }
.top__row { display: flex; align-items: center; gap: 12px 32px; min-height: 72px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-tracking); font-size: 22px; line-height: 1.15; }
.logo a { color: var(--heading); text-decoration: none; }
.logo a:hover { color: var(--accent); }
.logo__sub { display: block; font-family: var(--font-ui); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.menu-t { position: absolute; opacity: 0; pointer-events: none; }
.menu-b {
  display: none; align-items: center; gap: 8px; min-height: 40px; margin-left: auto; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px;
  font-family: var(--font-ui); font-size: 15px; font-weight: var(--ui-weight); color: var(--heading); background: var(--surface); cursor: pointer; user-select: none;
}
.menu-b::before { content: ""; width: 14px; height: 10px; border-block: 2px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; }
.menu-t:focus-visible + .menu-b, .menu-t:focus-visible ~ .top__row .menu-b { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; font-family: var(--font-ui); font-size: 15px; font-weight: var(--ui-weight); }
.menu a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 6px; color: var(--heading); text-decoration: none; }
.menu a:hover { background: var(--surface-2); color: var(--heading); }
.menu a[aria-current] { background: var(--accent-soft); color: var(--accent); }

/* Шапка A — знак слева, разделы справа */
/* Шапка B — квадратный знак с буквой перед названием, подпись под названием */
.top--b .logo::before {
  content: attr(data-mark); display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 8px;
  background: var(--accent); color: var(--accent-ink); font-size: 20px; line-height: 1;
}
/* Шапка C — две строки: знак и служебные ссылки сверху, разделы вкладками снизу */
.top--c .top__row { min-height: 64px; }
.top--c .top__links { display: flex; gap: 20px; margin-left: auto; font-family: var(--font-ui); font-size: 14px; }
.top--c .top__links a { color: var(--muted); text-decoration: none; }
.top--c .top__links a:hover { color: var(--accent); text-decoration: underline; }
.top--c .top__tabs { border-top: 1px solid var(--line); }
.top--c .menu { margin-left: -12px; gap: 0; }
.top--c .menu a { min-height: 48px; border-radius: 0; box-shadow: inset 0 -2px 0 transparent; }
.top--c .menu a:hover { background: transparent; box-shadow: inset 0 -2px 0 var(--line); }
.top--c .menu a[aria-current] { background: transparent; box-shadow: inset 0 -2px 0 var(--accent); }

/* ── Крошки ─────────────────────────────────────────────────────────────── */
.crumbs ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-family: var(--font-ui); font-size: 14px; line-height: 20px; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-inline: 8px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }

/* ── Главная ────────────────────────────────────────────────────────────── */
.intro { padding-block: 48px 40px; background: var(--surface); border-bottom: 1px solid var(--line); }
.intro__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.intro h1 { font-size: clamp(30px, 1.4vw + 20px, 42px); line-height: 1.15; }
.intro__text { margin-top: 16px; max-width: 60ch; color: var(--text); }
.quick { padding: 24px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.quick ul { margin: 12px 0 0; padding: 0; list-style: none; font-family: var(--font-ui); font-size: 16px; line-height: 1.4; }
.quick li { border-top: 1px solid var(--line); }
.quick li:first-child { border-top: 0; }
.quick a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; text-decoration: none; }
.quick a:hover { text-decoration: underline; }

.dir { padding-block: 48px 8px; }
.dir__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.dir__head h2 { font-size: 26px; }
.dir__head p:where(.cap) { font-size: 26px; }
.dir__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.sec { display: flex; flex-direction: column; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.sec h3 { font-size: 20px; }
.sec h3 a { color: var(--heading); text-decoration: none; }
.sec h3 a:hover { color: var(--accent); }
.sec__desc { margin-top: 6px; font-family: var(--font-ui); font-size: 14px; line-height: 1.45; color: var(--muted); }
.sec ul { margin: 16px 0 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.4; }
.sec li { padding-block: 8px; border-top: 1px solid var(--line); }
.sec li a { color: var(--text); text-decoration: none; }
.sec li a:hover { color: var(--accent); text-decoration: underline; }
.sec__all { margin-top: auto; padding-top: 16px; font-family: var(--font-ui); font-size: 14px; font-weight: var(--ui-weight); }

.twin { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; padding-block: 40px 8px; }
.twin h2 { font-size: 22px; margin-bottom: 16px; }
.twin p:where(.cap) { font-size: 22px; margin-bottom: 16px; }
.abc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.abc a { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-family: var(--font-ui); font-size: 16px; font-weight: var(--ui-weight); color: var(--heading); text-decoration: none; }
.abc a:hover { border-color: var(--accent); color: var(--accent); }
.abc__note { margin-top: 12px; font-family: var(--font-ui); font-size: 14px; color: var(--muted); }
.fresh { margin: 0; padding: 0; list-style: none; }
.fresh li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding-block: 12px; border-top: 1px solid var(--line); }
.fresh li:first-child { border-top: 0; padding-top: 0; }
.fresh a { color: var(--text); text-decoration: none; }
.fresh a:hover { color: var(--accent); text-decoration: underline; }
.fresh time { font-family: var(--font-ui); font-size: 14px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Статья: колонка разделов + текст ───────────────────────────────────── */
.doc { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; padding-block: 32px 0; }
.side { position: relative; }
.side__in { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; padding-right: 8px; }
.side .label { margin-bottom: 12px; }
.tree, .tree ul { margin: 0; padding: 0; list-style: none; }
.tree { font-family: var(--font-ui); font-size: 15px; line-height: 1.35; }
.tree > li + li { margin-top: 4px; }
.tree a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--text); text-decoration: none; }
.tree a:hover { background: var(--surface-2); color: var(--heading); }
.tree > li > a { font-weight: var(--ui-weight); color: var(--heading); }
.tree ul { margin: 2px 0 8px 12px; padding-left: 8px; border-left: 1px solid var(--line); }
.tree ul a { padding-block: 6px; }
.tree a[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: var(--ui-weight); }
.side-m { display: none; margin-bottom: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.side-m summary { display: flex; align-items: center; min-height: 48px; padding: 0 16px; cursor: pointer; font-family: var(--font-ui); font-size: 15px; font-weight: var(--ui-weight); color: var(--heading); }
.side-m .tree { padding: 0 8px 12px; }

.doc__main { min-width: 0; max-width: 760px; }
.doc__main .crumbs { margin-bottom: 20px; }
.doc__main h1 { font-size: clamp(28px, 1.2vw + 20px, 40px); line-height: 1.15; }
.doc__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; font-family: var(--font-ui); font-size: 14px; line-height: 20px; color: var(--muted); }
.brief { margin-top: 28px; padding: 20px 24px 22px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 0 0 8px 8px; }
.brief .label { color: var(--accent); }
.brief ul { margin: 12px 0 0; padding-left: 1.2em; }
.brief li + li { margin-top: 6px; }
.brief li::marker { color: var(--accent); }

.doc__body { margin-top: 32px; max-width: var(--measure, 66ch); }
.doc__body > * + * { margin-top: 1em; }
.doc__body h2 { margin-top: 1.9em; padding-top: 16px; border-top: 1px solid var(--line); font-size: clamp(22px, 0.6vw + 17px, 27px); scroll-margin-top: 16px; }
.doc__body p:where(.cap) { margin-top: 1.9em; padding-top: 16px; border-top: 1px solid var(--line); font-size: clamp(22px, 0.6vw + 17px, 27px); scroll-margin-top: 16px; }
.doc__body h3 { margin-top: 1.5em; font-size: 20px; }
.doc__body h2 + *, .doc__body h3 + * { margin-top: 0.6em; }
.doc__body p:where(.cap) + * { margin-top: 0.6em; }
.doc__body ul, .doc__body ol { padding-left: 1.4em; }
.doc__body li + li { margin-top: 0.35em; }
.doc__body ol > li::marker { font-family: var(--font-ui); font-weight: 700; color: var(--accent); }
.doc__body ul > li::marker { color: var(--accent); }
.doc__body strong { color: var(--heading); }
.doc__body dl { margin-block: 1.4em 0; display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); border-top: 1px solid var(--line); }
.doc__body dt, .doc__body dd { margin: 0; padding-block: 12px; border-bottom: 1px solid var(--line); }
.doc__body dt { padding-right: 16px; font-weight: 700; color: var(--heading); }
.tbl { margin: 1.6em 0 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; }
.tbl + * { margin-top: 1.6em; }
.tbl__scroll { overflow-x: auto; }
.tbl table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums lining-nums; }
.tbl figcaption, .tbl caption { padding: 14px 16px; text-align: left; font-family: var(--font-ui); font-size: 15px; line-height: 1.4; font-weight: 700; color: var(--heading); border-bottom: 1px solid var(--line); }
.tbl th { padding: 10px 16px; text-align: left; vertical-align: bottom; background: var(--surface-2); color: var(--heading); font-weight: 700; border-bottom: 1px solid var(--line); }
.tbl td { padding: 12px 16px; vertical-align: top; border-bottom: 1px solid var(--line); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:nth-child(even) td { background: var(--bg); }
.call { margin-block: 1.6em; padding: 16px 20px 18px 20px; border-radius: 8px; border: 1px solid var(--line); }
.call > .label { display: block; margin-bottom: 6px; }
.call p + p { margin-top: 0.5em; }
.call--vazhno { background: var(--accent-soft); border-color: transparent; box-shadow: inset 4px 0 0 var(--accent); padding-left: 24px; }
.call--vazhno > .label { color: var(--accent); }
.call--primer { background: var(--surface); border-style: dashed; }
.see { margin-top: 40px; padding: 20px 24px; background: var(--surface-2); border-radius: 8px; }
.see h2 { font-size: 18px; }
.see p:where(.cap) { font-size: 18px; }
.see ul { margin: 10px 0 0; padding-left: 1.2em; }
.see li + li { margin-top: 6px; }
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.pager a { display: grid; gap: 4px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); text-decoration: none; color: var(--heading); }
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager .label { font-size: 13px; }
.pager a + a, .pager .next { text-align: right; }

/* ── 404 ────────────────────────────────────────────────────────────────── */
.nf { padding-block: 64px 24px; max-width: 760px; }
.nf .label { color: var(--accent); }
.nf h1 { margin-top: 8px; font-size: clamp(30px, 1.4vw + 20px, 42px); }
.nf__text { margin-top: 16px; }
.nf .quick { margin-top: 32px; background: var(--surface); }

/* ── Подвал ─────────────────────────────────────────────────────────────── */
.bottom { margin-top: 72px; border-top: 1px solid var(--line); background: var(--surface); font-family: var(--font-ui); font-size: 15px; line-height: 1.5; color: var(--muted); }
.bottom a { color: var(--text); text-decoration: none; }
.bottom a:hover { color: var(--accent); text-decoration: underline; }
.bottom ul { margin: 0; padding: 0; list-style: none; }
.bottom__name { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-tracking); font-size: 20px; color: var(--heading); }
.bottom__line { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 18px; font-size: 14px; }
.bottom__line::before { content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad); border-top: 1px solid var(--line); }   /* линия — по краю содержимого, не по полям */
/* Подвал A — разделы в четыре колонки */
.bottom--a .bottom__grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 3fr)); gap: 32px; padding-block: 40px 32px; }
.bottom--a h2 { margin-bottom: 10px; font-family: var(--font-ui); font-size: 13px; line-height: 16px; font-weight: var(--ui-weight); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.bottom--a p:where(.cap) { margin-bottom: 10px; font-family: var(--font-ui); font-size: 13px; line-height: 16px; font-weight: var(--ui-weight); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.bottom--a li + li { margin-top: 4px; }
.bottom--a .bottom__about p { margin-top: 10px; max-width: 34ch; }
/* Подвал B — строка */
.bottom--b .bottom__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-block: 24px; }
.bottom--b ul { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-left: auto; }
/* Подвал C — отметка о справочном характере крупно */
.bottom--c { background: var(--surface-2); }
.bottom--c .bottom__row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px; padding-block: 40px 28px; align-items: start; }
.bottom--c .bottom__about p { margin-top: 10px; }
.bottom--c ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }

/* ── Ширины ─────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .side { display: none; }
  .side-m { display: block; }
  .doc__main { max-width: none; }
  .intro__in, .twin { grid-template-columns: minmax(0, 1fr); }
  .dir__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bottom--a .bottom__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bottom--a .bottom__about { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .wrap { --pad: 16px; }
  .menu-b { display: inline-flex; }
  .menu { display: none; width: 100%; flex-direction: column; gap: 0; margin: 0 0 8px; }
  .menu a { min-height: 48px; border-radius: 0; border-top: 1px solid var(--line); padding-inline: 4px; }
  .menu-t:checked ~ .menu, .menu-t:checked ~ .top__tabs .menu { display: flex; }
  .top__row { min-height: 64px; padding-block: 12px; }
  .logo { font-size: 20px; }
  .top--c .top__links { display: none; }
  .top--c .top__tabs { border-top: 0; }
  .top--c .menu { margin-left: 0; }
  .top--c .menu a { min-height: 48px; box-shadow: none; }
  .top--c .menu a[aria-current] { box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; }
  .intro { padding-block: 32px 28px; }
  .dir__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sec { padding: 20px; }
  .doc { padding-top: 20px; }
  .doc__main .crumbs li[aria-current] { display: none; }
  .brief { padding: 16px 18px 18px; }
  .doc__body dl { grid-template-columns: minmax(0, 1fr); }
  .doc__body dt { padding-bottom: 0; border-bottom: 0; }
  .doc__body dd { padding-top: 4px; }
  .tbl { position: relative; }
  .tbl::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; pointer-events: none; background: linear-gradient(to right, transparent, var(--surface)); }   /* знак: таблица листается вбок */
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager a + a, .pager .next { text-align: left; }
  .bottom--a .bottom__grid, .bottom--c .bottom__row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .bottom li a { display: inline-flex; align-items: center; min-height: 40px; }
  .bottom--a li + li { margin-top: 0; }
  .bottom--b ul { margin-left: 0; }
}