/* Страницы-статьи. Подключается после style.css и берёт из него токены,
   шапку, кнопки и таблицы. Своего JS у статей нет: текст — главное,
   движение ему не нужно. */

.art-head { background: rgba(5,7,11,.94); border-bottom-color: var(--line); }
.art-head .head-cta { display: flex; }
@media (max-width: 640px) { .art-head .lnk { display: none; } }

.art {
  max-width: 46rem; margin: 0 auto;
  padding: calc(5.5rem + var(--s7)) var(--gut) var(--s9);
}
.crumbs {
  display: flex; flex-wrap: wrap; gap: .5rem;
  font: 500 var(--t-2xs)/1.6 var(--f-mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s5);
}
.crumbs a { color: var(--ink-2); border-bottom: 1px solid var(--line-3); }
.crumbs a:hover { color: var(--ink); }

.art h1 {
  font: 400 clamp(2rem, 5vw, 3.4rem)/1.06 var(--f-serif);
  letter-spacing: -.02em; margin-bottom: var(--s5);
}
.art .art-lead { font-size: var(--t-lg); color: var(--ink); line-height: 1.55; margin-bottom: var(--s7); }
.art-meta {
  font: 400 var(--t-2xs)/1.6 var(--f-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s7);
}
.art h2 {
  font: 400 var(--t-xl)/1.2 var(--f-serif); letter-spacing: -.01em;
  margin: var(--s8) 0 var(--s4); padding-top: var(--s5); border-top: 1px solid var(--line);
}
.art h3 { font: 600 var(--t-md, 1.125rem)/1.35 var(--f-sans); margin: var(--s6) 0 var(--s3); }
.art p, .art li { color: var(--ink-2); line-height: 1.7; }
.art p + p { margin-top: var(--s4); }
.art strong { color: var(--ink); font-weight: 600; }
.art em { font-style: italic; color: var(--ink); }
.art a:not(.btn) { color: var(--sig-hi); border-bottom: 1px solid rgba(124,166,255,.4); }
.art a:not(.btn):hover { border-bottom-color: var(--sig-hi); }
.art ul, .art ol { padding-left: 1.3rem; margin: var(--s4) 0; display: grid; gap: var(--s3); }
.art code { font: 400 .9em var(--f-mono); color: var(--ink); }
.art .cmp-t { margin: var(--s5) 0; }

.art-cta {
  margin-top: var(--s9); padding: var(--s6) var(--s5);
  border: 1px solid rgba(47,107,246,.4); background: var(--surf);
}
.art-cta h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.art-cta .btn { margin-top: var(--s5); margin-right: var(--s3); }

.art-more { margin-top: var(--s8); }
.art-more ul { list-style: none; padding: 0; }
.art-more li a { font: 400 var(--t-lg)/1.35 var(--f-serif); }

.art-foot {
  border-top: 1px solid var(--line); padding: var(--s6) var(--gut);
  font: 400 var(--t-2xs)/1.7 var(--f-mono); letter-spacing: .1em; color: var(--ink-3);
  text-align: center;
}
.art-foot a { color: var(--ink-2); }