/* Статья журнала: заголовок и строка о материале; текст с подводкой, фото, «Коротко о главном» и оглавлением
   (на компьютере оглавление стоит справа и едет вместе с текстом); источники, «Поделиться», «Читайте также», каталог.
   Цвета — только переменными темы, размеры — шкалой из hm-chrome.css. */

/* Первый экран: крошки, заголовок, строка о материале */
.art-head { padding-bottom: var(--space-xl); }
.art-head .crumbs { padding-top: var(--space-xs); }
.art-head__grid { display: grid; gap: var(--space-lg); margin-top: var(--space-md); }
.art-head h1 { max-width: 24ch; font-size: var(--text-display-s); letter-spacing: var(--tracking-tight); line-height: 1.08; }

/* Строка о материале: рубрика, редакция, даты, время чтения; разделители — волосяные линии, у первой в строке линия срезана.
   Запас 4px по краям обрезки — чтобы рамка фокуса у ссылки не срезалась */
.byline-wrap { overflow: hidden; margin: calc(-1 * var(--space-2xs)); padding: var(--space-2xs); }
.byline { display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--space-2xs); margin: 0 0 0 calc(-1 * var(--space-sm) - 1px); padding: 0; list-style: none; color: var(--color-ink-2); font: var(--label-weight) var(--text-sm)/1.3 var(--font-display); }
.byline > li { display: inline-flex; align-items: center; gap: var(--space-xs); padding-inline: var(--space-sm); border-left: var(--rule-hair) solid var(--color-rule-2); }
.byline a { display: inline-flex; align-items: center; min-height: 48px; color: var(--color-ink); text-decoration-color: var(--color-accent); }
.byline__cat { color: var(--color-accent-text); font-weight: 700; }
.byline .icon { color: var(--color-accent-text); }

/* Текст: мера около 65 знаков, PT Serif, строка 1.65 */
.art-body { position: relative; overflow-wrap: break-word; }
.art-body > *, .art-body > p { max-width: 44rem; min-width: 0; }
.art-body > .standfirst { margin: 0 0 var(--space-xl); color: var(--color-ink); font-size: var(--text-lead); line-height: 1.45; }
.art-hero { margin: 0 0 var(--space-xl); }
.art-hero img { aspect-ratio: 3 / 2; }
.art-hero .caption a { text-decoration-color: currentColor; }

.prose > p { margin: 0 0 var(--space-md); line-height: 1.65; }
.prose > ul, .prose > ol { margin: 0 0 var(--space-md); padding-left: 1.4em; }
.prose li > ul, .prose li > ol { margin: var(--space-2xs) 0 0; padding-left: 1.4em; }
.prose > ul li, .prose > ol li { margin-block: var(--space-xs); line-height: 1.6; }
.prose a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.prose a:hover { color: var(--color-accent-text); }
.prose > h2 { margin: var(--space-2xl) 0 var(--space-md); font-size: var(--text-2xl); line-height: 1.15; scroll-margin-top: var(--space-lg); }
.prose > h3 { margin: var(--space-xl) 0 var(--space-sm); }
.prose > hr { margin: var(--space-xl) 0; border: 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.prose img, .prose iframe, .prose video { max-width: 100%; }
.prose .disclaimer { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font: var(--label-weight) var(--text-xs)/1.5 var(--font-display); }

/* Подводка в конце: каталог, районы, карта, журнал — под тяжёлой линейкой, крупнее текста */
.art-body > p:last-child:not([class]):has(a) { margin: var(--space-2xl) 0 0; padding-top: var(--space-lg); border-top: var(--rule-heavy) solid var(--color-ink); color: var(--color-ink); font-size: var(--text-lead); line-height: 1.55; }

/* Коротко о главном: ответ до оглавления и первого раздела, на ступени бумаги под волосяной линией */
.keyfacts { margin: 0 0 var(--space-xl); padding: var(--space-lg) var(--space-md); background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule-2); }
.keyfacts__h { margin: 0 0 var(--space-sm); font-size: var(--text-xl); }
div.keyfacts::before { content: "Коротко о главном"; display: block; margin-bottom: var(--space-sm); color: var(--color-ink); font: 700 var(--text-xl)/1.05 var(--font-display); }
.keyfacts ul { margin: 0; padding: 0; list-style: none; }
.keyfacts li { position: relative; margin: 0; padding: var(--space-sm) 0 var(--space-sm) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); line-height: 1.5; }
.keyfacts li:last-child { border-bottom: 0; }
.keyfacts li::before { content: ""; position: absolute; left: 0; top: calc(var(--space-sm) + 0.55em); width: 10px; height: 10px; background: var(--color-accent); }
.keyfacts p { margin: 0 0 var(--space-sm); }
@media (min-width: 40rem) { .keyfacts { padding: var(--space-xl); } }

/* Оглавление — строками под тяжёлой линейкой, без подложки: подложка одна, у «Коротко о главном» */
.art-toc { margin: 0 0 var(--space-xl); }
.toc { padding-top: var(--space-lg); border-top: var(--rule-heavy) solid var(--color-ink); }
.toc__h { margin-bottom: var(--space-sm); color: var(--color-ink); font: 700 var(--text-lg)/1.3 var(--font-display); }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; border-top: var(--rule-hair) solid var(--color-rule-2); }
.toc li { margin: 0; counter-increment: toc; border-bottom: var(--rule-hair) solid var(--color-rule); }
.prose .toc a { display: grid; grid-template-columns: 2ch minmax(0, 1fr); column-gap: var(--space-sm); align-items: baseline; min-height: 48px; padding-block: var(--space-sm); color: var(--color-ink); font: var(--label-weight) var(--text-sm)/1.35 var(--font-display); text-decoration: none; }
.prose .toc a::before { content: counter(toc); color: var(--color-accent-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.prose .toc a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.toc a:focus-visible { outline-offset: -2px; }

@media (min-width: 60rem) {
  .art-head { padding-bottom: var(--space-2xl); }
  .art-head__grid { margin-top: var(--space-lg); }
}
/* На компьютере: текст — семь колонок из двенадцати, оглавление — справа во всю высоту текста и прилипает к верху окна.
   Браузер без min() оставляет оглавление в потоке над текстом. */
@supports (width: min(1px, 2px)) {
  @media (min-width: 60rem) {
    .art-body > *, .art-body > p { max-width: min(44rem, calc((100% - 11 * var(--gap-columns)) * 7 / 12 + 6 * var(--gap-columns))); }
    .art-body > .art-toc { position: absolute; top: 0; right: 0; bottom: 0; width: calc((100% - 11 * var(--gap-columns)) * 5 / 12 + 4 * var(--gap-columns)); max-width: none; margin: 0; }
    .art-toc .toc { position: sticky; top: var(--space-lg); max-height: calc(100vh - 2 * var(--space-lg)); overflow-y: auto; overscroll-behavior: contain; }
    .art-body > .standfirst, .art-hero, .art-body > .keyfacts { margin-bottom: var(--space-2xl); }
  }
  @media (min-width: 75rem) {
    .art-body > .art-toc { width: calc((100% - 11 * var(--gap-columns)) * 4 / 12 + 3 * var(--gap-columns)); }
  }
}

/* Цитата-правило: крупнее текста, курсивом, между волосяными линиями */
.prose blockquote { margin: var(--space-xl) 0; padding: var(--space-md) 0; border-block: var(--rule-hair) solid var(--color-rule-2); }
.prose blockquote p { max-width: none; margin: 0 0 var(--space-xs); color: var(--color-ink); font-size: var(--text-lead); font-style: italic; line-height: 1.5; }
.prose blockquote p:last-child { margin-bottom: 0; }

/* Таблица: на компьютере таблица; на телефоне строка с подписями встаёт карточкой, таблица без шапки прокручивается в своей рамке */
.tbl, .tbl-wrap { margin: var(--space-xl) 0; overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font: var(--label-weight) var(--text-sm)/1.45 var(--font-display); }
.prose th { padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: var(--rule-heavy) solid var(--color-ink); color: var(--color-ink); font-weight: 700; text-align: left; vertical-align: bottom; }
.prose td { padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); text-align: left; vertical-align: top; }
.prose td:first-child { color: var(--color-ink); font-weight: 700; }
@media (max-width: 39.99rem) {
  .art-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .art-table--cards, .art-table--cards tbody, .art-table--cards tfoot, .art-table--cards tr, .art-table--cards td, .art-table--cards tbody th { display: block; }
  .art-table--cards { border-top: var(--rule-heavy) solid var(--color-ink); }
  .art-table--cards tr { padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
  .prose .art-table--cards td, .prose .art-table--cards tbody th { padding: var(--space-2xs) 0; border: 0; overflow-wrap: anywhere; }
  .art-table--cards td:first-child, .art-table--cards tbody th { font-size: var(--text-lg); }
  .art-table--cards td + td::before, .art-table--cards th + td::before { content: attr(data-label); display: block; color: var(--color-ink-2); font-size: var(--text-xs); font-weight: 700; }
}

/* Частые вопросы: раскрывающиеся строки 64px с плюсом */
.faq { margin: var(--space-2xl) 0; }
.faq h2 { margin: 0 0 var(--space-md); font-size: var(--text-2xl); line-height: 1.15; }
div.faq::before { content: "Частые вопросы"; display: block; margin-bottom: var(--space-md); color: var(--color-ink); font: 700 var(--text-2xl)/1.15 var(--font-display); }
.faq details { margin: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq details:first-of-type { border-top: var(--rule-hair) solid var(--color-rule-2); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 64px; padding-block: var(--space-sm); color: var(--color-ink); font: 700 var(--text-md)/1.35 var(--font-display); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover span { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.16em; }
.faq__i { color: var(--color-accent-text); }
.faq details[open] .faq__v { display: none; }
.faq details p { margin: 0; padding-bottom: var(--space-md); line-height: 1.6; }

/* Под текстом: источники; рядом «Поделиться» и «О материале» */
.art-notes { margin-top: var(--section-gap-s); }
.art-notes__grid { display: grid; gap: var(--space-2xl); }
.sources h2 { max-width: none; margin-bottom: var(--space-md); padding-top: var(--space-lg); border-top: var(--rule-heavy) solid var(--color-ink); font-size: var(--text-2xl); }
.sources ol { margin: 0; padding: 0; list-style: none; counter-reset: src; border-top: var(--rule-hair) solid var(--color-rule-2); }
.sources li { counter-increment: src; display: grid; grid-template-columns: 2ch minmax(0, 1fr); column-gap: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.sources li::before { content: counter(src); padding-top: var(--space-sm); color: var(--color-accent-text); font: 700 var(--text-sm)/1.45 var(--font-display); }
.sources a { grid-column: 2; display: block; min-height: 48px; padding-block: var(--space-sm) var(--space-2xs); color: var(--color-ink); font: var(--label-weight) var(--text-sm)/1.45 var(--font-display); text-decoration-color: var(--color-accent); overflow-wrap: anywhere; }
.sources a:last-child { padding-bottom: var(--space-sm); }
.sources__pub { grid-column: 2; padding-bottom: var(--space-sm); color: var(--color-ink-2); font: var(--label-weight) var(--text-xs)/1.4 var(--font-display); overflow-wrap: anywhere; }
.art-notes__side { display: grid; gap: var(--space-xl); align-content: start; }
.share__h { margin-bottom: var(--space-sm); color: var(--color-ink); font: 700 var(--text-lg)/1.3 var(--font-display); }
/* кнопки «Поделиться» — сеткой по две равной ширины; последняя нечётная — во всю строку */
.share__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.share__row > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.share__btn { width: 100%; padding-inline: var(--space-md); white-space: normal; text-align: center; line-height: 1.2; }
.share__btn.done { border-color: var(--color-accent); color: var(--color-accent-text); }
html:not(.js) .js-only { display: none; }
.editorial { display: grid; gap: var(--space-md); }
.editorial p { max-width: 60ch; color: var(--color-ink-2); line-height: 1.55; }
.editorial a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.editorial__note { padding-left: var(--space-md); border-left: var(--rule-heavy) solid var(--color-accent); }
@media (min-width: 60rem) {
  .art-notes__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
  .sources { grid-column: 1 / span 7; }
  .art-notes__side { grid-column: 9 / span 4; padding-top: var(--space-lg); border-top: var(--rule-heavy) solid var(--color-ink); }
  .art-notes__side:first-child { grid-column: 1 / span 7; }
}

/* Читайте также: на телефоне рельс со стрелками, на компьютере все четыре статьи в ряд */
.related { margin-top: var(--section-gap); }
.related .rail-head { margin-bottom: var(--space-lg); }
.related span.tile__pic { display: block; }
@media (min-width: 60rem) {
  .related .rail { grid-auto-columns: calc((100% - 3 * var(--gap-columns)) / 4); }
  .related .rail-ctrl { display: none; }
}

/* Каталог: пять ссылок и районы сеткой */
.silo { margin-top: var(--section-gap-s); }
.silo__main { display: flex; flex-wrap: wrap; column-gap: var(--space-xl); margin: 0 0 var(--space-xl); padding: 0; list-style: none; }
.silo__h { margin-bottom: var(--space-sm); color: var(--color-ink); font: 700 var(--text-lg)/1.3 var(--font-display); }
.silo__r { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule-2); }
.silo__r li { min-width: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.silo__r a { display: flex; align-items: center; min-height: 52px; color: var(--color-ink); font: var(--label-weight) var(--text-sm)/1.3 var(--font-display); text-decoration-color: var(--color-accent); overflow-wrap: anywhere; hyphens: auto; }
@media (min-width: 40rem) { .silo__r { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .silo__r { grid-template-columns: repeat(6, minmax(0, 1fr)); } }