@charset "UTF-8";
/* Страница статьи по макету Article-Light: колонка текста 680px,
   содержание справа 240px. Общие компоненты — в ds-core.css. */

.ds-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding-top: var(--space-7);
  font-family: var(--meta-family); font-size: var(--meta-size); color: var(--ink-600);
}
.ds-crumbs a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.ds-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ds-crumbs span { color: var(--ink-400); }

/* Раскладка: текст и боковая колонка */
/* 960 = 680 текста + 40 зазора + 240 колонки: зазор считаем из токенов, чтобы не разъехалось */
/* Без align-items: боковая колонка тянется во всю высоту статьи —
   иначе прилипанию внутри неё некуда двигаться. */
.ds-layout { display: flex; gap: calc(var(--container) - var(--measure) - 240px); margin-top: var(--space-6); }
.ds-main { width: var(--measure); flex-shrink: 0; min-width: 0; }
.ds-side { width: 240px; flex-shrink: 0; padding: var(--space-5) 0; }
.ds-side__inner { position: sticky; top: var(--space-6); }

/* Шапка статьи */
.ds-article__top { display: flex; align-items: center; gap: var(--space-4); }
.ds-article__title {
  margin: var(--space-5) 0 0;
  font-size: var(--display-2-size); line-height: var(--display-2-line);
  font-weight: var(--display-2-weight); letter-spacing: var(--display-2-tracking);
}
.ds-article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  margin-top: var(--space-5); padding: var(--space-4) 0;
  border-top: 1px solid var(--line-200); border-bottom: 1px solid var(--line-200);
  font-family: var(--meta-family); font-size: var(--meta-size); color: var(--ink-600);
}
.ds-article__meta .ds-sep { color: var(--ink-400); }
.ds-article__lead {
  margin: var(--space-5) 0 0;
  font-size: var(--lead-size); line-height: var(--lead-line); color: var(--ink-600);
}

/* Блок «Главное» */
.ds-summary {
  margin-top: var(--space-6); padding: var(--space-5);
  background: var(--surface-300); border-radius: var(--radius-md);
}
.ds-summary__title { margin: 0 0 var(--space-4); color: var(--ink-600); }
.ds-summary ul { margin: 0; padding-left: var(--space-5); }
.ds-summary li { margin-bottom: var(--space-3); font-size: var(--body-sm-size); line-height: var(--body-sm-line); }
.ds-summary li:last-child { margin-bottom: 0; }
.ds-summary li::marker { color: var(--clay-600); }

/* Текст статьи */
.ds-body { margin-top: var(--space-7); }
.ds-body h2 {
  margin: var(--space-7) 0 var(--space-4);
  font-size: var(--heading-3-size); line-height: var(--heading-3-line);
  font-weight: var(--heading-3-weight); letter-spacing: var(--heading-3-tracking);
}
.ds-body h2:first-child { margin-top: 0; }
.ds-body p { margin: 0 0 var(--space-5); font-size: var(--body-size); line-height: var(--body-line); }
.ds-body ul, .ds-body ol { margin: 0 0 var(--space-5); padding-left: var(--space-6); font-size: var(--body-size); line-height: var(--body-line); }
.ds-body li { margin-bottom: var(--space-3); }
.ds-body li::marker { color: var(--ink-400); }
.ds-body strong { font-weight: 500; }
.ds-body a { color: var(--clay-600); text-underline-offset: 3px; }
.ds-body a:hover { color: var(--clay-700); }
.ds-body code {
  padding: 2px 5px; background: var(--surface-300); border-radius: var(--radius-sm);
  font-family: var(--code-family); font-size: var(--code-size);
}

/* Цитата внутри текста */
.ds-body blockquote {
  margin: var(--space-6) 0; padding: var(--space-5) var(--space-6);
  background: var(--surface-200); border: 1px solid var(--line-200); border-radius: var(--radius-lg);
  font-size: var(--quote-size); line-height: var(--quote-line);
  font-weight: var(--quote-weight); letter-spacing: var(--quote-tracking);
}
.ds-body blockquote::before {
  content: "“"; display: block; margin-bottom: var(--space-2);
  font-size: 48px; line-height: 1; font-weight: 600; color: var(--clay-600);
}
.ds-body blockquote p { margin: 0; font-size: inherit; line-height: inherit; }

/* Выноски */
.ds-body .rm-callout {
  margin: var(--space-6) 0; padding: var(--space-5);
  background: var(--surface-200); border: 1px solid var(--line-300); border-radius: var(--radius-md);
}
.ds-body .rm-callout p { margin: 0 0 var(--space-3); font-size: var(--body-sm-size); line-height: var(--body-sm-line); }
.ds-body .rm-callout p:last-child { margin-bottom: 0; }
.ds-body .rm-callout__label {
  margin-bottom: var(--space-3) !important; color: var(--ink-600);
  font-family: var(--label-family); font-size: var(--label-size) !important; line-height: var(--label-line);
  font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: uppercase;
}
.ds-body .rm-callout--important .rm-callout__label { color: var(--clay-600); }
.ds-body .rm-callout--warning .rm-callout__label { color: var(--warn-600); }

/* Схемы: рамка с номером, полем рисунка и подписью */
.ds-figure {
  margin: var(--space-6) 0; background: var(--surface-200);
  border: 1px solid var(--line-300); border-radius: var(--radius-lg); overflow: hidden;
}
.ds-figure__head {
  padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--line-200);
  font-family: var(--label-family); font-size: var(--label-size); line-height: var(--label-line);
  font-weight: var(--label-weight); letter-spacing: var(--label-tracking);
  text-transform: uppercase; color: var(--ink-600);
}
.ds-figure__number { color: var(--clay-600); }
.ds-figure__canvas { padding: var(--space-5); background: var(--surface-300); overflow-x: auto; }
.ds-figure__note {
  padding: var(--space-3) var(--space-5);
  font-family: var(--meta-family); font-size: var(--meta-size); line-height: 1.5; color: var(--ink-600);
}

/* Таблицы */
.ds-body table {
  width: 100%; margin: var(--space-5) 0; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--line-300); border-radius: var(--radius-md); overflow: hidden;
  font-size: var(--body-sm-size);
}
.ds-body th {
  padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top;
  background: var(--surface-300); border-bottom: 1px solid var(--line-300);
  font-family: var(--label-family); font-size: var(--label-size); font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--ink-600);
}
.ds-body td {
  padding: var(--space-3) var(--space-4); vertical-align: top; background: var(--surface-200);
  border-bottom: 1px solid var(--line-200); line-height: var(--body-sm-line); color: var(--ink-600);
}
.ds-body td:first-child { color: var(--ink-900); }
.ds-body tr:last-child td { border-bottom: 0; }

/* Источники */
.ds-sources { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line-200); }
.ds-sources__title { margin: 0 0 var(--space-4); color: var(--ink-600); }
/* Заголовок — h2, а внутри текста статьи на h2 действует .ds-body h2: возвращаем вид метки */
.ds-sources .ds-sources__title {
  margin: 0 0 var(--space-4);
  font-size: var(--label-size); line-height: var(--label-line);
  font-weight: var(--label-weight); letter-spacing: var(--label-tracking);
}
.ds-sources ol { margin: 0; padding-left: var(--space-5); font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--ink-600); }
.ds-sources li { margin-bottom: var(--space-2); }
.ds-sources li:last-child { margin-bottom: 0; }
.ds-sources li::marker { color: var(--ink-400); }
.ds-sources a { color: var(--clay-600); text-underline-offset: 3px; }
/* Стрелка у внешней ссылки — как в макете */
.ds-sources a[href^="http"]::after { content: " ↗"; color: var(--clay-600); text-decoration: none; }

/* Низ статьи: действия и автор */
.ds-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-6); }
.ds-tools button {
  padding: 0; min-height: 44px; border: 0; background: transparent; cursor: pointer; color: inherit;
  font-family: inherit; font-size: var(--body-sm-size); text-decoration: underline; text-underline-offset: 3px;
}
.ds-tools__status { font-family: var(--meta-family); font-size: var(--meta-size); color: var(--ink-600); }

.ds-author {
  margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--line-200);
}
.ds-author__label { margin: 0 0 var(--space-3); color: var(--ink-600); }
.ds-author__name { margin: 0; font-size: var(--card-title-size); line-height: var(--card-title-line); font-weight: var(--card-title-weight); letter-spacing: var(--card-title-tracking); }
.ds-author__bio { margin: var(--space-3) 0 var(--space-5); max-width: 620px; font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--ink-600); }

/* Боковая колонка: содержание и вердикт */
.ds-toc__title { margin: 0; color: var(--ink-600); }
.ds-toc ol { margin: var(--space-3) 0 0; padding: 0; list-style: none; border-left: 1px solid var(--line-200); }
.ds-toc li { margin: 0; }
.ds-toc a {
  display: block; padding: var(--space-2) 0 var(--space-2) var(--space-4);
  font-size: 14px; line-height: 1.4; color: var(--ink-600); text-decoration: none;
}
.ds-toc a:hover { color: var(--ink-900); }
.ds-toc a[aria-current="true"] {
  margin-left: -2px; border-left: 2px solid var(--clay-600); color: var(--clay-600);
}

.ds-side__verdict {
  margin-top: var(--space-6); padding: var(--space-4);
  background: var(--surface-300); border-radius: var(--radius-md);
}
.ds-side__verdict p {
  margin: var(--space-2) 0 0;
  font-size: var(--meta-size); line-height: 1.5; color: var(--ink-600);
}

/* Дальше в блоге */
.ds-next { margin-top: var(--space-9); padding-top: var(--space-6); border-top: 1px solid var(--line-200); }
.ds-next__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5); }
.ds-next__head h2 { margin: 0; font-size: var(--heading-3-size); line-height: var(--heading-3-line); font-weight: var(--heading-3-weight); letter-spacing: var(--heading-3-tracking); }
.ds-next__grid { margin-top: var(--space-6); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }

@media (max-width: 1000px) {
  /* Узкий экран: колонка не помещается рядом с текстом, а над заголовком
     содержание только мешает — заголовок должен идти первым. */
  .ds-layout { flex-direction: column; gap: var(--space-6); }
  .ds-main { width: 100%; }
  .ds-side { display: none; }
}

@media (max-width: 860px) {
  .ds-article__title { font-size: 30px; }
  .ds-body table { display: block; overflow-x: auto; }
  .ds-next__grid { grid-template-columns: 1fr; }
  .ds-summary, .ds-body .rm-callout { padding: var(--space-5); }
  .ds-body blockquote { padding: var(--space-5); font-size: 21px; }
}