/*
   performa — раздел «Статьи»
   Подключается ПОСЛЕ styles.css и adaptive.css: страницы статей живут в той же
   системе (токены, шапка, подвал, ховеры), а здесь — только то, чего в системе
   ещё не было: колонка чтения, TL;DR, врезки, карточки индекса.

   Устройство файла:
     1. Колонка чтения и шапка статьи
     2. TL;DR
     3. Тело: заголовки, абзацы, списки, цитаты, врезка 💎
     4. Атрибуция, блок автора
     5. FAQ, «читайте также», CTA
     6. Индекс раздела
     7. Планшет и телефон
*/

/*
   1. КОЛОНКА ЧТЕНИЯ И ШАПКА СТАТЬИ
*/
.art{
  /*
 🔴 --hdr-h объявлен ТОЛЬКО внутри мобильных медиазапросов: на десктопе
     calc() с ним невалиден, объявление отбрасывается целиком, и заголовок
     статьи уезжал под фиксированную полосу. Отсюда запасное значение.
*/
  padding-top:calc(var(--hdr-h,80px) + var(--sp-6));
  padding-bottom:var(--section-y);
  background:var(--grad-hero-light);
}
/*
 Комфортная ширина строки — 680–720px по канону. Контейнер сайта шире,
   поэтому колонка задаётся здесь. Центрируем саму КОЛОНКУ (не текст в ней):
   прижатая влево, она оставляла на 1440 половину экрана пустой.
*/
.art__wrap{max-width:720px;margin-inline:auto}

.art__crumbs{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  margin-bottom:var(--stack-md);
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  font-weight:var(--fw-semibold);
  color:var(--c-muted);
  transition:color var(--dur-fast) var(--ease-out);
}
.art__crumbs .ico{width:14px;height:14px}
.art__crumbs:hover{color:var(--c-accent)}

.art__head{margin-bottom:var(--stack-lg)}
.art__h1{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-h1);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-display);
  color:var(--c-ink);
  margin:0 0 var(--sp-5);
  /*
 Заголовки статей приходят из vc.ru — среди них есть строка капсом.
     Приводим к регистру предложения визуально, текст не трогаем.
*/
  text-transform:none;
}
/*
 Одна линия под волосяной кромкой вместо трёх
   ярусов «имя-дата-время» + отдельного ряда тегов.
*/
.art__meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--sp-3);
  padding-bottom:var(--sp-4);
  border-bottom:var(--rule);
  font-size:var(--fs-sm);
  color:var(--c-muted);
}
.art__cat{
  flex:none;
  padding:.3rem .7rem;
  border-radius:var(--r-pill);
  border:1px solid var(--c-accent-soft);
  background:var(--c-accent-soft);
  color:var(--c-accent);
  font-size:var(--fs-cap);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
}
.art__ava{
  flex:none;
  width:32px;height:32px;
  display:inline-flex;
  align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--c-accent-soft);
  border:1px solid #DCE4F0;
  color:var(--c-accent);
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-cap);
  letter-spacing:.02em;
}
.art__who{display:flex;flex-direction:column;line-height:1.25}
.art__author{font-weight:var(--fw-semibold);color:var(--c-ink)}
.art__role{font-size:var(--fs-xs);color:var(--c-muted)}
/* Дата и хронометраж прижаты к правому краю строки — как в каноне. */
.art__meta-r{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  font-size:var(--fs-xs);
  white-space:nowrap;
}
.art__time{display:inline-flex;align-items:center;gap:6px}
.art__time .ico{width:14px;height:14px}
.art__dot{
  width:3px;height:3px;
  border-radius:50%;
  background:currentColor;
  opacity:.45;
  flex:none;
}
/*
 Место под обложку зарезервировано (V6: изображений на этом этапе нет).
   Не пустой прямоугольник, а тонкая акцентная линейка — она держит ритм
   между шапкой и выжимкой и не читается как «картинка не загрузилась».
*/
.art__cover-slot{
  height:2px;
  margin-top:var(--stack-md);
  background:linear-gradient(90deg,var(--c-accent) 0%,var(--c-accent-2) 30%,transparent 100%);
  border-radius:2px;
}

/*
   2. TL;DR — короткий извлекаемый ответ (GEO/AEO)
*/
/*
   Подпись «Коротко» была лишним ярусом: блок и так стоит первым и читается
   как выжимка.
*/
.art__tldr{
  position:relative;
  margin-bottom:var(--stack-lg);
  padding:var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--c-accent-soft);
  border:none;
}
.art__tldr::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--c-accent);
}
.art__tldr p{
  margin:0;
  font-size:var(--fs-lg);
  line-height:1.5;
  color:var(--c-ink);
}

/*
   2b. Список
   разделов на волосяных линейках, активный подсвечивается по скроллу
   (`initToc()` в js/main.js). Сам список лежит в HTML — он нужен и без JS.
*/
.toc{
  margin-bottom:var(--stack-lg);
  padding:var(--sp-5) var(--sp-6);
  border-radius:var(--r-md);
  background:var(--c-surface);
  border:var(--rule);
}
.toc__k{
  display:block;
  margin-bottom:var(--sp-3);
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-accent);
}
.toc__list{margin:0;padding:0;list-style:none}
.toc__list a{
  display:flex;
  align-items:center;
  /*
 Пункт оглавления — ссылка, а не строка списка: зона ≥44px обязательна
     (WEB-СТАНДАРТ §8.4). С паддингом 8px она выходила 36px и валила гейт
     тач-таргетов на всех ширинах с пальцем.
*/
  min-height:44px;
  padding:var(--sp-2) 0 var(--sp-2) var(--sp-4);
  border-left:2px solid var(--c-line);
  font-size:var(--fs-sm);
  line-height:1.45;
  color:var(--c-muted);
  transition:color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.toc__list a:hover,
.toc__list a.is-active{color:var(--c-accent);border-left-color:var(--c-accent)}

/*
   3. ТЕЛО СТАТЬИ
*/
.art__body{color:var(--c-ink)}
.art__p{
  margin:0 0 var(--sp-5);
  font-size:var(--fs-lg);
  line-height:1.65;
  color:var(--c-ink);
}
.art__body strong{font-weight:var(--fw-semibold);color:var(--c-ink)}
.art__body em{font-style:italic;color:var(--c-muted)}

.art__h2{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-h2);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-tight);
  color:var(--c-ink);
  margin:var(--stack-lg) 0 var(--sp-4);
}
.art__h3{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-h3);
  line-height:1.25;
  letter-spacing:var(--ls-tight);
  color:var(--c-ink);
  margin:var(--stack-md) 0 var(--sp-3);
}
.art__h4{
  font-family:var(--font-text);
  font-weight:var(--fw-bold);
  font-size:var(--fs-body);
  color:var(--c-ink);
  margin:var(--sp-5) 0 var(--sp-2);
}
/* Первый заголовок после выжимки не должен «отваливаться» лишним воздухом. */
.art__body>:first-child{margin-top:0}

.art__ul,.art__ol{
  margin:0 0 var(--sp-5);
  padding:0;
  list-style:none;
}
.art__ul li,.art__ol li{
  position:relative;
  padding:var(--sp-2) 0 var(--sp-2) var(--sp-6);
  font-size:var(--fs-lg);
  line-height:1.6;
  border-bottom:var(--rule);
}
.art__ul li:last-child,.art__ol li:last-child{border-bottom:none}
.art__ul li::before{
  content:"";
  position:absolute;
  left:var(--sp-3);top:1.05em;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--c-accent);
}
/*
 Номер берём из счётчика list-item: он уважает start/value, то есть
   нумерацию самого автора, а не «сколько <li> лежит в этом блоке».
*/
.art__ol li::before{
  content:counter(list-item);
  position:absolute;
  left:0;top:var(--sp-2);
  width:26px;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-sm);
  color:var(--c-accent);
}

/* Цитата — полоса с акцентной кромкой, а не «карточка в карточке». */

.art__quote{
  position:relative;
  margin:var(--stack-md) 0;
  padding:var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  border-left:3px solid var(--c-accent);
  border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--c-surface-2);
}
.art__quote::before{
  content:"«";
  display:block;
  font-family:var(--font-display);
  font-weight:var(--fw-extra);
  font-size:2.4rem;
  line-height:.7;
  height:.5em;
  color:var(--c-accent);
  opacity:.4;
  margin-bottom:var(--sp-3);
}
.art__quote p{
  margin:0;
  font-family:var(--font-text);
  font-weight:var(--fw-regular);
  font-size:clamp(1.0625rem,1rem + .5vw,1.35rem);
  line-height:1.35;
  letter-spacing:var(--ls-tight);
  color:var(--c-ink);
}

/* Строка-акцент автора (💎) — врезка, а не рядовой абзац. */
.art__p--gem{
  margin:var(--stack-md) 0;
  padding:var(--sp-4) var(--sp-5);
  border-radius:var(--r-md);
  background:var(--c-accent-soft);
  font-weight:var(--fw-medium);
}
.art__p--gem strong{color:var(--c-accent)}

.art__hr{
  height:1px;
  margin:var(--stack-lg) 0;
  border:none;
  background:var(--c-line);
}

/*
   4. АТРИБУЦИЯ И БЛОК АВТОРА
*/
/*
 Строкой петитом атрибуция
   читалась как сноска, хотя это обязательство перед первоисточником.
*/
.art__src{
  margin:var(--stack-md) 0 0;
  padding:var(--sp-5);
  background:var(--c-surface);
  border:var(--rule);
  border-left:3px solid var(--c-accent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.art__src-k{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  margin-bottom:var(--sp-3);
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-accent);
}
.art__src-k .ico{width:14px;height:14px}
.art__src ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--sp-2)}
.art__src li{
  position:relative;
  padding-left:var(--sp-5);
  font-size:var(--fs-sm);
  line-height:1.6;
  color:var(--c-muted);
}
.art__src li::before{
  content:"—";
  position:absolute;left:0;
  color:var(--c-accent);
}
.art__src a{color:var(--c-accent);text-decoration:underline;text-underline-offset:3px}

.art__author-card{
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:var(--sp-5);
  align-items:center;
  margin-top:var(--stack-lg);
  padding:var(--sp-5);
  border-radius:var(--r-md);
  background:var(--c-surface);
  border:var(--rule);
}
.art__author-ph{
  width:96px;height:96px;
  border-radius:50%;
  object-fit:cover;
  object-position:top center;
}
.art__author-k{
  display:block;
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-accent);
  font-weight:var(--fw-bold);
}
.art__author-n{
  margin:var(--sp-1) 0 var(--sp-1);
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-h3);
  letter-spacing:var(--ls-tight);
  color:var(--c-ink);
}
.art__author-d{
  margin:0 0 var(--sp-3);
  font-size:var(--fs-sm);
  line-height:1.5;
  color:var(--c-muted);
}

/*
   5. FAQ, «ЧИТАЙТЕ ТАКЖЕ», CTA
*/
/*
 У блока уже есть свой отступ сверху — заголовку внутри второй не нужен,
   иначе между FAQ и «читайте также» вырастала пустая полоса в полтора экрана.
*/
.art__faq>.art__h2:first-child,
.art__rel>.art__h2:first-child{margin-top:0}

.art__faq{margin-top:var(--stack-lg)}
.art__faq .faq{margin-top:var(--sp-4)}

.art__sub{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  margin:0 0 var(--sp-4);
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-h3);
  letter-spacing:var(--ls-tight);
  color:var(--c-ink);
}
.art__sub::before{
  content:"";
  flex:none;
  width:3px;height:1.05em;
  border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--c-accent),transparent);
}

.art__rel{
  margin-top:var(--stack-lg);
  padding-top:var(--stack-md);
  border-top:var(--rule);
}
.art__rel-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-4);
}
.rel-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  padding:var(--sp-5) var(--sp-5) calc(var(--sp-5) + 6px);
  border-radius:var(--r-md);
  background:var(--c-surface);
  border:var(--rule);
  overflow:hidden;
}
.rel-card__badge{
  align-self:flex-start;
  padding:.2rem .55rem;
  border-radius:var(--r-pill);
  background:var(--c-accent-soft);
  color:var(--c-accent);
  font-size:var(--fs-cap);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
}
.rel-card__t{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:1rem;
  line-height:1.35;
  letter-spacing:var(--ls-tight);
  color:var(--c-ink);
}
.rel-card__meta{margin-top:auto;font-size:var(--fs-xs);color:var(--c-muted)}

/* Предыдущая / следующая — лента не обрывается на последнем абзаце. */
.anav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-4);
  margin-top:var(--stack-md);
  padding-top:var(--stack-md);
  border-top:var(--rule);
}
.anav__card{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  padding:var(--sp-5);
  border-radius:var(--r-md);
  background:var(--c-surface);
  border:var(--rule);
}
.anav__card--next{text-align:right;grid-column:2}
/*
 На краях ленты сосед один — он занимает строку целиком, а не оставляет
   рядом пустую половину.
*/
.anav__card:only-child{grid-column:1 / -1}
.anav__dir{
  font-size:var(--fs-cap);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--c-accent);
}
.anav__t{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:.9375rem;
  line-height:1.35;
  letter-spacing:var(--ls-tight);
  color:var(--c-ink);
}
.art-card__tag{
  font-size:var(--fs-cap);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  font-weight:var(--fw-bold);
  color:var(--c-accent);
}
.art-card__meta{
  font-size:var(--fs-xs);
  color:var(--c-muted);
  display:flex;
  align-items:center;
  gap:var(--sp-2);
}

/*
 Один CTA на статью: тёмная полоса — визуальная точка выхода, а не третий
   баннер подряд.
*/
/*
 Тёмная полоса во всю колонку читалась как второй футер и спорила
   с подвалом страницы, стоящим сразу под ней.
*/
.art__cta{
  margin-top:var(--stack-lg);
  padding:clamp(2rem,5vw,3rem) var(--sp-6);
  border-radius:var(--r-lg);
  background:var(--c-accent-soft);
  border:1px solid #DCE4F0;
  text-align:center;
}
.art__cta-t{
  margin:0 0 var(--sp-3);
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-h3);
  line-height:1.25;
  letter-spacing:var(--ls-tight);
  color:var(--c-ink);
}
.art__cta-d{
  margin:0 auto var(--sp-5);
  font-size:var(--fs-body);
  line-height:1.55;
  color:var(--c-muted);
  max-width:46ch;
}

/*
   6. ИНДЕКС РАЗДЕЛА
*/
.arts-page{
  padding-top:calc(var(--hdr-h,80px) + var(--sp-6));
  padding-bottom:var(--section-y);
  background:var(--grad-hero-light);
}
.arts-page .sh__title{
  font-size:var(--fs-display-sub);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-display);
}

.arts-stats{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
  margin:0 0 var(--stack-md);
  padding:0;
  list-style:none;
}
.arts-stats li{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:112px;
  padding:var(--sp-4) var(--sp-5);
  border-radius:var(--r-md);
  background:var(--c-surface);
  border:var(--rule);
}
.arts-stats b{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:1.5rem;
  letter-spacing:var(--ls-tight);
  color:var(--c-accent);
}
.arts-stats span{font-size:var(--fs-xs);color:var(--c-muted)}

.arts-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-5);
}
/*
 Свежая статья — во всю ширину: у ленты появляется вход, а не ровное поле
   одинаковых плиток.
*/
.arts-grid>.art-card:first-child{grid-column:1 / -1}
.art-card{min-width:0}
.art-card__link{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  height:100%;
  padding:var(--sp-6) var(--sp-6) calc(var(--sp-6) + 8px);
  border-radius:var(--r-md);
  background:var(--c-surface);
  border:var(--rule);
  color:var(--c-ink);
  overflow:hidden;
}
.art-card__t{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--fw-display);
  font-size:var(--fs-h3);
  line-height:1.25;
  letter-spacing:var(--ls-tight);
  color:var(--c-ink);
}
.arts-grid>.art-card:first-child .art-card__t{font-size:var(--fs-h2)}
.art-card__d{
  margin:0;
  font-size:var(--fs-body);
  line-height:1.55;
  color:var(--c-muted);
}
.art-card__go{
  position:absolute;
  right:var(--sp-5);bottom:var(--sp-5);
  width:36px;height:36px;
  display:inline-flex;
  align-items:center;justify-content:center;
  border-radius:50%;
  border:var(--rule);
  color:var(--c-accent);
  transition:transform var(--dur) var(--ease-out),
             background var(--dur) var(--ease-out),
             color var(--dur) var(--ease-out);
}
.art-card__meta{margin-top:auto;padding-right:52px}
@media (hover:hover) and (pointer:fine){
  .art-card__link:hover .art-card__go{
    background:var(--c-accent);
    color:var(--c-accent-ink);
    transform:translateX(4px);
  }
}

.arts-author{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  margin-top:var(--stack-lg);
  padding-top:var(--stack-md);
  border-top:var(--rule);
}
.arts-author__t{
  margin:0;
  font-size:var(--fs-sm);
  color:var(--c-muted);
}

/*
   7. ПЛАНШЕТ И ТЕЛЕФОН
   Раздел проектируется под палец, а не сжимается: колонка чтения на телефоне
   и так во всю ширину, поэтому меняем не ширину, а ритм — кегли, отбивки,
   раскладку карточек и блок автора.
*/
@media (max-width:1023px){
  .arts-grid{gap:var(--sp-4)}
  .art-card__link{padding:var(--sp-5)}
  .art__cta{padding:var(--sp-5)}
}

@media (max-width:767px){
  .art{padding-top:calc(var(--hdr-h,80px) + var(--sp-5))}
  .arts-page{padding-top:calc(var(--hdr-h,80px) + var(--sp-5))}

  /*
 Одна колонка: две плитки по 150px — это «сжатый десктоп», а не мобильный
     раздел. Заодно уходит и выделенная первая карточка: на телефоне порядок
     сверху вниз уже сам по себе иерархия.
*/
  .arts-grid{grid-template-columns:minmax(0,1fr)}
  .arts-grid>.art-card:first-child .art-card__t{font-size:var(--fs-h3)}
  .art__rel-grid{grid-template-columns:minmax(0,1fr)}

  /*
 Мета-строка на телефоне: рубрика и автор первой строкой, дата и время —
     второй. Прижимать их вправо на 390px значило рвать имя автора.
*/
  .art__meta{gap:var(--sp-3) var(--sp-4)}
  .art__meta-r{margin-left:0;width:100%;gap:var(--sp-4)}
  .toc{padding:var(--sp-4) var(--sp-5)}
  .art__cta{padding:var(--sp-6) var(--sp-5)}
  /* Пред/след — в столбик, обе плитки по левому краю. */
  .anav{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
  .anav__card--next{grid-column:1;text-align:left}

  .art__p,.art__ul li,.art__ol li{font-size:var(--fs-body);line-height:1.6}
  .art__tldr p{font-size:var(--fs-body)}
  .art__tldr{padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5)}
  .art__h2{margin-top:var(--stack-md)}
  .art__quote{padding-left:var(--sp-4);margin:var(--sp-5) 0}
  .art__ul li,.art__ol li{padding-left:var(--sp-5)}
  .art__ul li::before{left:var(--sp-2)}

  /*
 Портрет автора уезжает наверх строкой: 96px слева отнимали у текста
     треть и без того узкой колонки.
*/
  .art__author-card{
    grid-template-columns:56px minmax(0,1fr);
    gap:var(--sp-4);
    align-items:start;
    padding:var(--sp-4);
  }
  .art__author-ph{width:56px;height:56px}
  .art__author-n{font-size:1.0625rem}

  .art-card__go{right:var(--sp-4);bottom:var(--sp-4)}
  .arts-stats{gap:var(--sp-2)}
  .arts-stats li{flex:1 1 0;min-width:0;padding:var(--sp-3) var(--sp-4)}
  .arts-stats b{font-size:1.25rem}
  .art__crumbs{margin-bottom:var(--sp-5)}
  .arts-author{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
}

@media (max-width:359px){
  /* 320px: ссылка-стрелка и метка в карточке перестают спорить за строку. */
  .art-card__meta{flex-wrap:wrap;padding-right:44px}
  .art__author-card{grid-template-columns:minmax(0,1fr)}
  .art__author-ph{width:64px;height:64px}
}

/* Тач-зоны раздела — та же планка §8.4, что и на остальном сайте. */
@media (pointer:coarse){
  .art__crumbs,.art__src a,.art-card__link,.rel-card,.anav__card{min-height:44px}
  .toc__list a{min-height:46px}
}

/*
 В статьях линейками были разделены пункты
   списков, шапка материала, «Читайте также», пред/след и подпись автора.
   Тексты статей при этом не трогаются — правится только оформление.
*/
.art__ul li,.art__ol li{
  border-bottom:0;
  padding:var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-6);
  border-radius:var(--r-sm);
}
.art__ul li:nth-child(odd),.art__ol li:nth-child(odd){background:var(--c-surface-2)}
.art__ul,.art__ol{display:grid;gap:var(--sp-1)}

.art__meta{border-bottom:0;padding-bottom:0}
.art__rel,.anav,.arts-author{border-top:0}
.art__rel{margin-top:var(--stack-lg);padding-top:0}
.anav{padding-top:0;margin-top:var(--stack-md)}
.arts-author{
  padding:var(--sp-5);
  margin-top:var(--stack-lg);
  background:var(--c-surface-2);
  border-radius:var(--r-lg);
}

/*
 Правое поле у пунктов списка (аудит: pl=32 pr=16 — асимметрия видна
   на скруглённой плитке). Правило живёт здесь: articles.css грузится
   после styles.css и перебивал бы общий фикс.
*/
.art__ul li,.art__ol li{padding-right:var(--sp-6)}