/*
 * Элементы статьи, которых не было в вёрстке старого сайта: подзаголовок H4,
 * цитата, код, разделитель, подпись к иллюстрации и ссылки в списках.
 * Подключается только на страницах с макетом «Статья блога»
 * (layouts.json → layout_cms_article.styles) и берёт токены сайта.
 */
.article-body > h4 { margin: 28px 0 8px; color: var(--ink); font-family: var(--body); font-size: 16px; font-weight: 650; line-height: 1.4; }
.article-body li a,
.article-note a,
.article-quote a,
.article-cta p a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; transition: color .18s ease, text-decoration-color .18s ease; }
.article-body li a:hover,
.article-note a:hover,
.article-quote a:hover,
.article-cta p a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.article-quote { margin: 36px 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--accent); }
.article-quote p { margin: 0; color: var(--ink); font-family: var(--display); font-size: 21px; line-height: 1.45; }
.article-code { margin: 0 0 28px; padding: 18px 20px; overflow-x: auto; border: 1px solid var(--line); background: color-mix(in srgb, var(--paper-deep) 55%, var(--paper)); color: var(--ink); font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; tab-size: 4; }
.article-code code { font-size: inherit; }
.article-body :not(pre) > code { padding: 1px 5px; background: color-mix(in srgb, var(--paper-deep) 70%, transparent); }
.article-divider { height: 0; margin: 46px 0; border: 0; border-top: 1px solid var(--line); }
.article-illustration figcaption { margin-top: 10px; color: var(--ink-muted); font-size: 13px; line-height: 1.5; }
@media (max-width: 720px) {
	.article-quote p { font-size: 19px; }
	.article-code { font-size: 13px; }
}