/* Раздел статей /articles/ (задача 06afe35f, док 228 «Раздел статей»).
   Отдельный файл поверх style.css: статьи — длинный текст, которому нужны свои
   правила чтения (ширина строки, отступы абзацев, код, кадры), а посадочные их не
   используют. Токены цвета — из :root style.css, своих цветов здесь нет. */

/* шапка статьи и индекса */
.art-hero{padding:76px 0 8px}
.crumbs{font-size:13.5px;color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--ink-soft)}
.crumbs a:hover{color:var(--link)}
.art-hero h1{font-size:40px;line-height:1.14;letter-spacing:-.022em;font-weight:780;color:var(--ink-strong)}
.art-hero .lead{margin-top:18px;font-size:18.5px;line-height:1.6;color:var(--ink-soft)}
.art-meta{margin-top:20px;font-size:13.5px;color:var(--muted)}

/* текст статьи идёт по ширине страницы витрины (.wrap), своей узкой колонки нет:
   шапка и меню той же ширины, статья не сужается (замечание Андрея 13.10.2026, 7223519e) */
.prose{padding:24px 0 8px}
.prose h2{font-size:26px;line-height:1.25;letter-spacing:-.015em;margin:52px 0 14px;max-width:none}
.art-hero h1,.more h2{max-width:none}
.prose h3{font-size:19px;color:var(--ink-strong);margin:32px 0 10px}
.prose p,.prose li{font-size:16.5px;line-height:1.72;color:var(--ink-soft)}
.prose p{margin-bottom:14px}
.prose ul,.prose ol{padding-left:24px;margin:0 0 16px}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--accent-soft)}
.prose b,.prose strong{color:var(--ink);font-weight:650}
.prose a{text-decoration:underline;text-decoration-color:rgba(68,163,165,.45);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--accent-soft)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;color:var(--ink);
  background:rgba(255,255,255,.07);border-radius:6px;padding:1px 6px}
.prose pre{margin:6px 0 20px;background:var(--surface);border:1px solid rgba(255,255,255,.12);border-radius:14px;
  padding:16px 18px;overflow-x:auto}
.prose pre code{background:none;padding:0;font-size:13px;line-height:1.7;color:var(--code-ink);white-space:pre}

/* кадр из демо в браузер-рамке (.browser из style.css) */
.art-shot{margin:28px 0 30px}
.art-shot a{display:block}
.art-shot img{display:block;width:100%;height:auto}
/* макет-таблица в кадре (.fin из style.css): на посадочной она сидит в узкой колонке
   и набрана мелко, в статье кадр шире — шрифт ближе к тексту статьи */
.art-shot .fin-table{font-size:14px}
.art-shot .fin-table th{font-size:11px;color:#9dbdba}
.art-shot .fin-table .tag{font-size:10.5px}
.art-shot .fin-note{font-size:12.5px}
.art-shot figcaption{margin-top:10px;font-size:13.5px;color:var(--muted);line-height:1.5}

/* «Как это сделать в портале» */
.howto{margin:44px 0 8px;background:var(--surface);border:1px solid var(--surface-line);border-radius:18px;padding:28px 32px}
.prose .howto h2{margin-top:0;font-size:22px}
.howto ol{margin-bottom:14px}
.howto p:last-child{margin-bottom:0}

.verified{margin-top:34px;padding-top:18px;border-top:1px solid var(--surface-line);font-size:13.5px;color:var(--muted)}

/* «Читать ещё» и список статей на индексе — одна карточка */
.more{padding:56px 0 0}
.more h2{font-size:24px}
.art-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:26px}
.art-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--surface-line);
  border-radius:16px;padding:24px 26px;color:inherit}
.art-card:hover{border-color:var(--accent-soft)}
.art-card .kicker{margin-bottom:10px}
.art-card h3{font-size:19px;line-height:1.3;color:var(--ink-strong);margin-bottom:10px}
.art-card p{font-size:14.5px;color:var(--ink-soft)}
.art-card .art-meta{margin-top:auto;padding-top:16px;font-size:13px}
.art-index .art-list{grid-template-columns:repeat(3,1fr)}

/* от ноутбука: колонка статьи идёт по ширине страницы (b051524), поэтому длинную строку
   компенсирует кегль и интерлиньяж; таблица-макет в кадре — своей ширины, по левому краю */
@media (min-width:1280px){
  .art-hero .lead{font-size:21px}
  .prose p,.prose li{font-size:19.5px;line-height:1.75}
  .prose h2{font-size:30px}
  .prose h3{font-size:22px}
  .prose .howto h2{font-size:25px}
  .art-shot figcaption{font-size:15px}
  .art-shot .fin-table{font-size:15px}
  .art-shot .fin-table th{font-size:12px}
}
@media (min-width:901px){
  .art-shot .fin-table{width:auto;min-width:560px}
}

@media (max-width:900px){
  .art-hero h1{font-size:30px}
  .art-hero .lead{font-size:17px}
  .prose h2{font-size:22px;margin-top:40px}
  .art-list,.art-index .art-list{grid-template-columns:1fr}
  .howto{padding:22px 20px}
  .art-shot{width:auto}
  /* на телефоне второстепенный столбец макета прячется, чтобы суммы не уезжали за край */
  .art-shot .fin-table .opt{display:none}
  .art-shot .fin-table{font-size:13px;min-width:0}
}
@media print{
  .prose p,.prose li,.art-hero .lead{color:#222}
  .art-hero h1,.prose h2,.prose h3,.prose b{color:#000}
}