/* Стили статей блога, которые генерирует tools/blog/build.py.
   Подключается только на blog.html и blog-*.html поверх site.css,
   поэтому site.css и его ?v= трогать не нужно. */

.article h3{margin:40px 0 16px;font-size:26px;font-weight:500;letter-spacing:-0.02em;line-height:1.25}
.article ol{margin:0 0 22px;padding:0 0 0 26px;font-size:19px;line-height:1.65}
.article p a,.article li a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.article p a:hover,.article li a:hover{text-decoration:none}
.article strong{font-weight:500}
.article hr{border:0;border-top:1px solid rgba(128,128,128,.3);margin:44px 0}
.article figure img{width:100%;height:auto;display:block;border:1px solid rgba(128,128,128,.25)}
.article code{font-family:var(--mono);font-size:.88em;background:rgba(128,128,128,.12);padding:2px 6px;border-radius:2px}
.article pre{margin:0 0 22px;padding:20px 24px;overflow:auto;background:#f1f1f0;border:1px solid rgba(128,128,128,.25);font-family:var(--mono);font-size:14px;line-height:1.6}
.article pre code{background:none;padding:0;font-size:inherit}
.article table{width:100%;border-collapse:collapse;margin:0 0 28px;font-size:17px;line-height:1.5}
.article th,.article td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid rgba(128,128,128,.3)}
.article th{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.04em;color:#9b9b9b}
.article .callout p{margin:0;font-size:18px;line-height:1.6;color:#555}
.article .callout ol{margin:0;padding:0 0 0 22px;font-size:18px;line-height:1.6;color:#555}
.article .author .ava.ph-img{border-radius:0}
.art-share a[data-copy-link]{cursor:pointer}
.blog-empty{border-top:1px solid #111;padding:80px 48px;font-size:22px;line-height:1.5}
.blog-empty a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

html[data-theme="dark"] .article pre{background:#15181d}
html[data-theme="dark"] .article .callout p,html[data-theme="dark"] .article .callout ol{color:#a9b0b8}
html[data-theme="dark"] .blog-empty{border-color:rgba(255,255,255,.2)}

@media (max-width:720px){
  .article h3{font-size:22px}
  .article table{font-size:15px}
  .article th,.article td{padding:10px 8px}
  .blog-empty{padding:48px 20px;font-size:18px}
}

/* блоки-компоненты статьи: «важно», CTA, цитата клиента, карточка кейса */
.article .callout-important{background:transparent;border:1px solid var(--blue);border-left-width:4px}
.article .callout-important .lbl{color:var(--blue)}
.article .art-cta{margin:48px 0;padding:36px;border:1px solid #111;display:flex;flex-direction:column;gap:20px}
.article .art-cta p{margin:0;font-size:20px;line-height:1.5;font-weight:500;letter-spacing:-0.01em}
.article .art-cta .big-cta{margin:0}
.article .art-quote{margin:44px 0}
.article .art-quote blockquote{margin:0}
.article .art-quote blockquote p{margin:0;font-size:24px;line-height:1.45;font-weight:500;letter-spacing:-0.01em}
.article .art-quote figcaption{margin-top:14px;padding-left:30px}
.article a.art-case{margin:44px 0;text-decoration:none;color:var(--ink);padding:0;overflow:hidden}
.article a.art-case .thumb{height:220px;border-bottom:1px solid #111}
.article a.art-case .eyebrow{padding:24px 28px 0}
.article a.art-case h3{padding:0 28px;font-size:24px}
.article a.art-case .go{padding:0 28px 24px}
html[data-theme="dark"] .article .art-cta,html[data-theme="dark"] .article a.art-case{border-color:rgba(255,255,255,.25)}
html[data-theme="dark"] .article a.art-case .thumb{border-color:rgba(255,255,255,.25)}
@media (max-width:720px){
  .article .art-cta{padding:24px}
  .article .art-cta p{font-size:17px}
  .article .art-quote blockquote p{font-size:20px}
  .article a.art-case .thumb{height:160px}
}

/* рубрики, страницы рубрик и тегов, похожие статьи */
.blog-rubrics{display:flex;flex-wrap:wrap;gap:8px;padding:0 48px 32px}
.blog-rubrics a{font-family:var(--mono);font-size:14px;border:1px solid #111;padding:8px 16px;color:var(--ink);display:inline-flex;gap:10px;align-items:baseline}
.blog-rubrics a span{color:#9b9b9b;font-size:12px}
.blog-rubrics a:hover{background:#f7f7f6;color:var(--ink)}
.blog-rubrics a.on{background:#111;color:#fff}
.blog-rubrics a.on span{color:#bbb}
.archive-hero .eyebrow{display:block;margin-bottom:12px}
.archive-hero p{max-width:760px;margin:16px 0 0;font-size:20px;line-height:1.5;color:#555}
a.chip:hover{background:rgba(39,51,227,.08);color:var(--blue)}
.related .blog-older{margin-top:24px;border-top:1px solid #111}
.blog-card .date{display:flex;gap:6px;flex-wrap:wrap}
html[data-theme="dark"] .blog-rubrics a{border-color:rgba(255,255,255,.3)}
html[data-theme="dark"] .blog-rubrics a:hover{background:rgba(255,255,255,.06)}
html[data-theme="dark"] .blog-rubrics a.on{background:#fff;color:#111}
html[data-theme="dark"] .archive-hero p{color:#a9b0b8}
@media (max-width:720px){
  .blog-rubrics{padding:0 20px 24px}
  .blog-rubrics a{font-size:13px;padding:6px 12px}
}
.archive-hero h1{font-size:72px}
@media (max-width:720px){.archive-hero h1{font-size:44px}}

/* авторы */
.author-hero{display:flex;gap:40px;align-items:flex-start}
.author-photo{width:180px;height:180px;flex-shrink:0;border:1px solid #111}
.author-role{font-family:var(--mono);font-size:16px;color:#9b9b9b;margin-top:14px}
.author-link{font-family:var(--mono);font-size:14px;color:var(--blue);display:inline-block;margin-top:14px}
.article .author .name a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.article .author .ava.ph-img{background-size:cover}
.art-meta a{color:inherit;text-decoration:underline;text-underline-offset:3px}
html[data-theme="dark"] .author-photo{border-color:rgba(255,255,255,.25)}
@media (max-width:720px){.author-hero{flex-direction:column;gap:20px}.author-photo{width:120px;height:120px}}

/* блок «Вопросы и ответы» */
.article .art-faq{margin:56px 0;border-top:1px solid #111;padding-top:8px}
.article .art-faq h2{margin-top:32px}
.article .faq-item{border-bottom:1px solid rgba(128,128,128,.3);padding:22px 0}
.article .faq-item h3{margin:0 0 10px;font-size:22px}
.article .faq-a p:last-child,.article .faq-a ul:last-child{margin-bottom:0}
html[data-theme="dark"] .article .art-faq{border-color:rgba(255,255,255,.25)}