/* finisher54-article.css — единый визуальный слой статей блога/новостей
   Бренд: минимализм, GraphicLCG, чёрный #040404 на белом. Дополняет
   инлайновый .art-* шелл статьи (таблицы, FAQ-аккордеон, содержание,
   «Читайте также», кнопки-переходы), НИЧЕГО в нём не ломая. */

:root{
  --a-ink:#040404;--a-muted:#8a8a8a;--a-soft:#6f6f6f;
  --a-line:#e7e7ec;--a-bg:#f5f6f8;--a-bg2:#fafafb;--a-card:#fff;
  --a-r:12px;
}

/* ---------- Отступ статьи под фиксированный хедер ----------
   Высота приклеенного к верху хедера t396 НЕ константа: на десктопе (>=1200px)
   артборд фиксированный — 68px, ниже Тильда переключается на масштабируемый
   .t396__artboard_s, и высота становится пропорциональна ширине окна (~21.3%):
   233px на 1100, 163px на 768, 79px на 375. Хардкод 112/108px промахивался во
   всём диапазоне 481–1199 — крошки и H1 уезжали под шапку.
   Источник истины — измеренная высота из finisher54-header-offset.js
   (--fx-hdr), фолбэк ниже повторяет ту же пропорцию, чтобы без JS вёрстка
   тоже была корректной и не прыгала. */
:root{--fx-hdr:68px;}
@media(max-width:1199px){:root{--fx-hdr:21.3vw;}}
#recArt{padding-top:calc(var(--fx-hdr,68px) + 44px);padding-bottom:80px;}
@media(max-width:980px){#recArt{padding-top:calc(var(--fx-hdr,79px) + 30px);}}

/* ---------- Прозовые таблицы ---------- */
.art-prose .art-table,           /* обёртка для горизонтального скролла */
.art-prose table{max-width:100%;}
.art-table{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 26px;
  border:1px solid var(--a-line);border-radius:var(--a-r);background:var(--a-card);}
.art-prose table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5;
  margin:0;min-width:460px;}
/* если таблицу не успели обернуть JS-ом — всё равно опрятно */
.art-prose>table{margin:0 0 26px;border:1px solid var(--a-line);border-radius:var(--a-r);overflow:hidden;}
.art-prose table th{background:var(--a-ink);color:#fff;text-align:left;font-weight:500;
  padding:14px 18px;font-size:14px;letter-spacing:.01em;white-space:nowrap;}
.art-prose table td{padding:13px 18px;border-top:1px solid var(--a-line);color:#2b2b2b;vertical-align:top;}
.art-prose table tr:nth-child(even) td{background:var(--a-bg2);}
.art-prose table td:first-child{font-weight:500;color:var(--a-ink);}
@media(max-width:640px){.art-prose table{font-size:15px;}.art-prose table th,.art-prose table td{padding:11px 14px;}}

/* ---------- FAQ-аккордеон (из <dl> внутри .art-prose) ---------- */
.art-faq{margin:8px 0 26px;display:flex;flex-direction:column;gap:12px;}
.art-faq__item{border:1px solid var(--a-line);border-radius:var(--a-r);background:var(--a-card);
  overflow:hidden;transition:border-color .2s,box-shadow .2s;}
.art-faq__item.is-open{border-color:var(--a-ink);box-shadow:0 10px 30px rgba(4,4,4,.06);}
.art-faq__q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  background:none;border:0;cursor:pointer;font-family:inherit;color:var(--a-ink);
  text-align:left;font-size:18px;font-weight:500;line-height:1.4;padding:20px 22px;-webkit-tap-highlight-color:transparent;}
.art-faq__q:focus-visible{outline:2px solid var(--a-ink);outline-offset:-2px;border-radius:var(--a-r);}
.art-faq__ic{flex:none;width:22px;height:22px;position:relative;margin-top:3px;transition:transform .25s ease;}
.art-faq__ic::before,.art-faq__ic::after{content:"";position:absolute;background:var(--a-ink);border-radius:2px;
  top:50%;left:50%;transform:translate(-50%,-50%);}
.art-faq__ic::before{width:15px;height:2px;}
.art-faq__ic::after{width:2px;height:15px;transition:transform .25s ease,opacity .2s ease;}
.art-faq__item.is-open .art-faq__ic::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.art-faq__a{overflow:hidden;max-height:0;transition:max-height .3s ease;}
.art-faq__a-inner{padding:0 22px 20px;color:var(--a-soft);font-size:16.5px;line-height:1.65;}
.art-faq__a-inner>*:last-child{margin-bottom:0;}
@media(max-width:640px){.art-faq__q{font-size:16.5px;padding:17px 18px;}.art-faq__a-inner{padding:0 18px 17px;font-size:15.5px;}}

/* ---------- Содержание (Содержание) ---------- */
.art-toc{margin:0 0 34px;border:1px solid var(--a-line);border-radius:14px;background:var(--a-bg);padding:22px 24px;}
.art-toc__h{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-muted);
  font-weight:600;margin:0 0 14px;}
.art-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;
  display:grid;grid-template-columns:1fr 1fr;gap:8px 30px;}
.art-toc li{counter-increment:toc;}
.art-toc a{display:flex;gap:10px;align-items:baseline;color:var(--a-ink);font-size:15.5px;line-height:1.4;
  padding:4px 0;text-decoration:none;transition:color .15s;}
.art-toc a::before{content:counter(toc,decimal-leading-zero);color:var(--a-muted);font-size:12.5px;flex:none;
  font-variant-numeric:tabular-nums;}
.art-toc a:hover{color:#0a58ca;}
@media(max-width:640px){.art-toc ol{grid-template-columns:1fr;}}
.art-prose h2[id]{scroll-margin-top:90px;}

/* ---------- Кнопки-переходы (CTA + назад) ---------- */
/* Аккуратная кнопка-пилюля «назад» вместо голого текста.
   Разметка остаётся прежней (&#8592; Все статьи блога) — просто оформляем. */
.art-back{margin-top:34px;}
.art-back a{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:100px;
  border:1px solid var(--a-line);background:var(--a-card);color:var(--a-ink)!important;font-weight:500;font-size:15px;
  transition:border-color .18s,background .18s,transform .18s;}
.art-back a:hover{border-color:var(--a-ink);background:#fff;transform:translateX(-3px);}

/* CTA-кнопка: чуть живее */
.art-cta a{transition:transform .18s ease,box-shadow .18s ease,background .18s ease;}
.art-cta a:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(4,4,4,.24);background:#161616;}

/* ---------- «Читайте также» ---------- */
.art-related{max-width:1000px;margin:64px auto 0;padding:0 20px;font-family:'GraphicLCG',Arial,sans-serif;}
.art-related__h{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-muted);
  font-weight:600;margin:0 0 22px;display:flex;align-items:center;gap:14px;}
.art-related__h::after{content:"";flex:1;height:1px;background:var(--a-line);}
.art-related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 28px;}
.ra-card{display:block;text-decoration:none;color:var(--a-ink);}
.ra-card__ph{position:relative;overflow:hidden;border-radius:10px;background:#f2f2f2;aspect-ratio:4/3;}
.ra-card__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.ra-card:hover .ra-card__ph img{transform:scale(1.05);}
.ra-card__cat{display:inline-block;margin:16px 0 8px;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:#7a7a7a;}
.ra-card__t{font-size:19px;font-weight:500;line-height:1.34;margin:0;transition:color .15s;}
.ra-card:hover .ra-card__t{color:#0a58ca;}
.ra-card__m{margin-top:12px;font-size:13.5px;color:var(--a-muted);}
@media(max-width:960px){.art-related__grid{grid-template-columns:repeat(2,1fr);gap:30px 24px;}}
@media(max-width:640px){.art-related__grid{grid-template-columns:1fr;gap:28px;}.ra-card__t{font-size:18px;}}

/* автор */
.art-author{margin:34px 0 0;font-size:14px;color:var(--a-muted);font-style:normal;}