/* Новости, анонсы и гайды: лента и статья. Общие цвета и шапка — site.css. Кегль не меньше 13px. */

.news-head { margin-top: 16px; }
.news-head h1 { font-size: 48px; line-height: 1.05; letter-spacing: -1.8px; margin: 10px 0 12px; }
.lead { font-size: 18px; color: var(--sec); margin: 0 0 20px; max-width: 720px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { padding: 8px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); text-decoration: none; font-weight: 600; font-size: 15px; color: var(--sec); }
.chips a:hover { color: var(--text); }
.news-cat { margin-top: 40px; }
.news-cat h2 { font-size: 26px; letter-spacing: -0.6px; margin: 0 0 14px; }
.reads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.read { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); text-decoration: none; }
.read:hover { border-color: #3d5052; }
.read small { color: var(--accent); font-weight: 700; font-size: 13px; }
.read b { font-size: 18px; line-height: 1.3; }
.read span { color: var(--sec); font-size: 15px; }

.article { max-width: 760px; margin-top: 16px; }
.crumbs { color: var(--muted); font-size: 14px; margin: 0; }
.crumbs a { color: var(--accent); text-decoration: none; }
.article h1 { font-size: 44px; line-height: 1.08; letter-spacing: -1.6px; margin: 10px 0 12px; }
.article h2 { font-size: 26px; letter-spacing: -0.6px; margin: 40px 0 10px; scroll-margin-top: 20px; }
.article p, .article li { color: var(--sec); font-size: 17px; line-height: 1.65; }
.article b { color: var(--text); }
.article mark { background: none; color: var(--accent); font-weight: 700; }
.article blockquote { margin: 22px 0; padding: 14px 20px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 16px 16px 0; color: var(--text); font-size: 19px; line-height: 1.5; }
.article figure { margin: 22px 0; }
.article figure img { width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--border); display: block; }
.article figcaption { color: var(--muted); font-size: 14px; margin-top: 8px; }
.toc { margin: 20px 0 8px; padding: 18px 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.toc ol { margin: 8px 0 0; padding-left: 22px; }
.toc a { color: var(--live); text-decoration: none; }
.toc li { margin: 4px 0; font-size: 16px; }
.app-action { margin: 16px 0; }
.article-app { display: grid; gap: 8px; margin-top: 48px; padding: 26px; border-radius: 26px; background: linear-gradient(120deg, #0c302c, #131a1b); border: 1px solid #1d5c55; }
.article-app b { font-size: 22px; }
.article-app span { color: var(--sec); }
.article-app .btn { justify-self: start; margin-top: 6px; }

@media (max-width: 960px) { .reads { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .news-head h1, .article h1 { font-size: 32px; letter-spacing: -1px; }
  .article p, .article li { font-size: 16px; }
}