/* Вступление на тонированном поле: значок, заголовок по центру, колонка текста */
header { background: color-mix(in srgb, var(--card) 92%, transparent); }
.intro { background: var(--card); padding-block: clamp(12px, 2vw, 32px) 0; }
.cover { display: grid; justify-items: center; gap: 18px; text-align: center; padding-bottom: clamp(36px, 4vw, 64px); }
.cover .badge { width: clamp(150px, 13vw, 210px); }
.cover .badge img { width: 100%; }
h1 { font: 600 clamp(2.5rem, 1.7rem + 2.6vw, 3.8rem)/1.08 var(--sans); letter-spacing: -.025em; max-width: 640px; text-wrap: balance; }
.sub { font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3rem); }
.col { max-width: 720px; margin-inline: auto; }
.preface { display: grid; gap: 17px; font-size: 1.0625rem; line-height: 1.53; }
.preface em { display: block; }
.note { font: 400 .8125rem/1.55 var(--sans); color: var(--muted); }
.intro .acc { margin-top: 28px; border-bottom: 0; }
.acc summary { font-weight: 600; }
.acc ul { display: grid; gap: 8px; list-style: disc; padding: 2px 0 20px 1.25em; font-size: 1.0625rem; line-height: 1.5; }

/* Главы: оглавление слева, колонка чтения по центру */
.chapters { display: grid; gap: 32px; padding-block: clamp(36px, 4.4vw, 72px) 0; }
.chapters > * { min-width: 0; }
.toc { display: grid; gap: 12px; align-content: start; }
.toc ol a { display: flex; gap: 14px; padding-block: 8px; border-bottom: 1px solid var(--line); text-decoration: none; font: 400 .8125rem/1.5 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; transition: color .2s, border-color .2s; }
.toc ol li:first-child a { border-top: 1px solid var(--line); }
.toc ol a span { opacity: .75; min-width: 1.6em; }
.toc ol a:hover { color: var(--ink); }
.toc ol a[aria-current="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.toc ol a[aria-current="true"] span { opacity: 1; }
.toc .btn { padding-block: 5px; width: 100%; }
.toc-btns { display: grid; gap: 6px; max-width: 222px; }
.doc { display: grid; gap: clamp(44px, 4vw, 64px); max-width: 720px; }
.doc section { scroll-margin-top: 72px; }
.doc h2 { font: 600 clamp(1.875rem, 1.6rem + .8vw, 2.375rem)/1.12 var(--sans); letter-spacing: -.022em; margin-bottom: 16px; }
.doc h3 { font: 600 1.3125rem/1.28 var(--sans); letter-spacing: -.012em; margin: 26px 0 12px; }
.doc h2 + h3 { margin-top: 0; }
.doc p + p, .doc ul + p, .doc ol + p { margin-top: 17px; }
.doc p, .doc li { font-size: 1.0625rem; line-height: 1.53; text-wrap: pretty; }
.doc ul, .doc ol { display: grid; gap: 8px; padding-left: 1.4em; margin-top: 12px; }
.doc ul { list-style: disc; }
.doc ol { list-style: decimal; }
@media (min-width: 1020px) {
  .chapters { grid-template-columns: minmax(200px, 1fr) minmax(0, 720px) minmax(0, 1fr); gap: 40px; }
  /* Без align-self блок растягивается на всю строку сетки, и ехать ему некуда */
  .toc { position: sticky; top: 72px; align-self: start; max-width: 278px; max-height: calc(100vh - 88px); overflow-y: auto; }
}

@media print {
  header, #menu, .toc, footer, .acc summary svg { display: none !important; }
  body, .intro { background: #fff; color: #000; }
  .chapters { display: block; padding-top: 24px; }
  .doc { max-width: none; }
  .acc:not([open]) { display: none; }
}