
.art-wrap{max-width:760px}
.art-top{padding:96px 0 8px}
.art-back{display:inline-flex;align-items:center;gap:6px;color:var(--t2);font-family:var(--font-mono);font-size:13.5px;text-decoration:none;transition:.18s}
.art-back:hover{color:var(--text)}
/* Обложка стала настоящим <img> (см. gen-articles.mjs): height→aspect-ratio, чтобы
   место под картинку резервировалось до загрузки и не было сдвига макета (CLS). */
.art-cover{width:100%;aspect-ratio:1200/630;height:auto;object-fit:cover;display:block;
  border-radius:22px;position:relative;overflow:hidden;margin:22px 0 26px}
.art-cover .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);background-size:30px 30px}
.art-cover .em{position:absolute;inset:0;display:grid;place-items:center;font-size:84px;filter:drop-shadow(0 8px 22px rgba(0,0,0,.3))}
.art-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--t3);font-family:var(--font-mono);margin-bottom:12px}
.art-meta .tag{color:var(--brand-violet)}
.art-title{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,4.5vw,44px);line-height:1.12;letter-spacing:-.02em;margin-bottom:26px}
.art-content{color:var(--t1,var(--text));font-size:17px;line-height:1.75}
.art-content p{margin:0 0 18px;color:var(--t2)}
.art-content h2{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.01em;margin:32px 0 12px}
.art-content code{font-family:var(--font-mono);font-size:14px;background:var(--surf);border:1px solid var(--bd);border-radius:6px;padding:1px 6px;color:var(--brand-violet)}
.art-cta{display:flex;gap:12px;flex-wrap:wrap;margin:40px 0 0;padding-top:28px;border-top:1px solid var(--bd)}
.art-missing{padding:120px 0;text-align:center}
.art-missing h1{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,4vw,38px);margin-bottom:14px}
.art-missing p{color:var(--t2);margin-bottom:24px}

/* Блок «Дальше по теме» — перелинковка в конце статьи (см. scripts/gen-articles.mjs):
   ссылка на посадочную по теме + соседние статьи той же категории. */
.art-next{margin:38px 0 0;padding:22px 24px;border:1px solid var(--bd);border-radius:22px;background:var(--surf)}
.art-next h2{font-family:var(--font-mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--t2);margin:0 0 12px}
.art-next ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.art-next a{color:var(--text);font-size:15.5px;font-weight:600}
.art-next a:hover{color:var(--accent)}
.art-next li::before{content:'→ ';color:var(--accent)}
