/* ===== Reloway · раздел статей =====
   Правило: только семантические токены. Сырые --brass и --brass-text из правового
   шаблона на .on-dark не перекрашиваются — тёмная плита получит нечитаемую латунь.
   Радиусов нет (--radius:0), теней нет (ТЗ §11), кривая и длительность — --ease / --dur. */

/* якорь оглавления садится под липкую шапку, а не под неё */
html { scroll-padding-top: calc(var(--hdr-real, 4.5625rem) + var(--s-5)); }

/* Короткая страница (404, пустой раздел) не должна оставлять песочную полосу
   под тёмным подвалом: прижимаем подвал к низу окна. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > .ftr { margin-top: auto; }

.art { padding-block: var(--s-7) var(--s-9); }
.art .wrap { max-width: 54rem; }            /* как у правовых страниц — колонка узнаётся */

/* ── хлебные крошки ─────────────────────────────────────────────── */
.crumbs { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 var(--s-6);
  font: 400 var(--fs-caption)/1.5 var(--font-data); letter-spacing: .04em; color: var(--text-muted); }
.crumbs a { color: var(--text-muted); text-decoration: none; transition: color var(--dur) var(--ease); }
.crumbs a:hover { color: var(--action); }
.crumbs span[aria-hidden] { color: var(--line-accent); }
.crumbs [aria-current] { color: var(--text); }

/* ── шапка статьи ───────────────────────────────────────────────── */
.art__eyebrow { font: 600 var(--fs-eyebrow)/1.4 var(--font-text); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--text-eyebrow); margin: 0 0 var(--s-4); }
.art h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); margin: 0 0 var(--s-4); }
.art__meta { display: flex; flex-wrap: wrap; gap: .4rem var(--s-4); margin: 0 0 var(--s-5);
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--line);
  font: 400 var(--fs-caption)/1.5 var(--font-data); letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); max-width: none; }
.art__lead { font-size: var(--fs-body-lg); line-height: 1.6; color: var(--text-muted); margin: 0 0 var(--s-6); }

/* ── оглавление: та же латунная нумерация, что у заголовков ─────── */
.art__toc { border: 1px solid var(--line); border-left: 2px solid var(--line-accent);
  background: var(--bg-alt); padding: var(--s-5); margin: 0 0 var(--s-7); }
.art__toc-t { font: 600 var(--fs-eyebrow)/1.4 var(--font-text); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--text-eyebrow); margin: 0 0 var(--s-4); }
.art__toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.art__toc a { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .5rem;
  align-items: baseline; color: var(--text); text-decoration: none; font-size: var(--fs-small);
  transition: color var(--dur) var(--ease); }
.art__toc a .n { font: 400 var(--fs-caption)/1.5 var(--font-data); letter-spacing: .12em; color: var(--line-accent); }
.art__toc a:hover { color: var(--action); }

/* ── тело статьи ────────────────────────────────────────────────── */
.art__body h2 { font-size: var(--fs-h3); line-height: var(--lh-tight); margin: var(--s-8) 0 var(--s-4);
  display: flex; gap: var(--s-3); align-items: baseline; scroll-margin-top: 1rem; }
.art__body h2 .n { font: 400 var(--fs-caption)/1 var(--font-data); color: var(--text-eyebrow);
  letter-spacing: .06em; flex: none; }
.art__body h3 { font-size: var(--fs-body-lg); line-height: var(--lh-tight); margin: var(--s-6) 0 var(--s-3); }
.art__body p, .art__body li { max-width: var(--measure); }
.art__body p { margin: 0 0 var(--s-4); }
.art__body ul, .art__body ol { margin: 0 0 var(--s-5); padding-left: 1.25em; }
.art__body li { margin-bottom: var(--s-2); }
.art__body li::marker { color: var(--text-eyebrow); }
.art__body b, .art__body strong { font-weight: 600; }

/* ссылок в теле правовой шаблон не описывает — дописываем */
.art__body a { color: var(--action); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, var(--action) 35%, transparent);
  transition: text-decoration-color var(--dur) var(--ease); }
.art__body a:hover { text-decoration-color: var(--action); }
.art__body a[href^="http"]:not([href*="reloway.es"])::after {
  content: "↗"; font-size: .85em; margin-left: .15em; opacity: .6; }

/* ── иллюстрации ────────────────────────────────────────────────────
   Гайдбук §05: иллюстрация — деталь вёрстки, а не картина на стене.
   У набора вырезан фон и своя диагональная тень, поэтому здесь ни рамок,
   ни теней, ни скруглений. Подпись — моноширинным капсом под волосяной
   линией, как подписи в наших документах. */
.art__cover { margin: 0 0 var(--s-7); }
.art__cover img, .art__fig img { display: block; width: 100%; height: auto; }
.art__fig { margin: var(--s-7) 0; }
.art__fig:not(.art__fig--wide) { max-width: 34rem; margin-inline: auto; }
.art__fig figcaption { margin-top: .65rem; padding-top: .6rem;
  border-top: 1px solid var(--line); max-width: var(--measure);
  font: 400 var(--fs-caption)/1.5 var(--font-data); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted); }
.ax-card__img { display: block; margin: 0 0 .5rem; }
.ax-card__img img { display: block; width: 100%; height: auto; }

/* ── врезки ─────────────────────────────────────────────────────── */
.art__note, .art__warn { border: 1px solid var(--line); background: var(--bg-alt);
  padding: var(--s-5); margin: 0 0 var(--s-6); max-width: var(--measure); }
.art__note { border-left: 2px solid var(--line-accent); }
.art__warn { border-left: 2px solid var(--action); }
.art__note > :last-child, .art__warn > :last-child { margin-bottom: 0; }

/* ── таблица: волосяные линии, прокрутка на узком экране ────────── */
.art__tbl { margin: 0 0 var(--s-6); overflow-x: auto; border: 1px solid var(--line); }
.art__tbl table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 34rem; }
.art__tbl th, .art__tbl td { text-align: left; vertical-align: top; padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--line); }
.art__tbl th { font: 600 var(--fs-eyebrow)/1.4 var(--font-text); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--text-eyebrow); background: var(--bg-alt); }
.art__tbl tr:last-child td { border-bottom: 0; }

.art__body blockquote { margin: 0 0 var(--s-6); padding-left: var(--s-5);
  border-left: 2px solid var(--line-accent); max-width: var(--measure); }
.art__body blockquote p { font-family: var(--font-display); font-size: var(--fs-body-lg);
  line-height: 1.5; color: var(--text); }

/* ── источники и подпись ────────────────────────────────────────── */
.art__src { margin: var(--s-8) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--line);
  font-size: var(--fs-caption); color: var(--text-muted); }
.art__src p { margin: 0 0 var(--s-2); max-width: none; }
.art__src ul { margin: 0; padding-left: 1.1em; }
.art__src li { margin-bottom: .35rem; }
.art__src a { color: var(--text-muted); }
.art__src a:hover { color: var(--action); }
.art__by { margin: var(--s-5) 0 0; font-size: var(--fs-caption); color: var(--text-muted); }
.art__by p { margin: 0 0 var(--s-2); }

/* ── FAQ на нативном <details>: работает без JS ─────────────────── */
.art__faq { margin: var(--s-8) 0 0; }
.art__faq-t { font-size: var(--fs-h3); line-height: var(--lh-tight); margin: 0 0 var(--s-4); }
.art__q { border-top: 1px solid var(--line); }
.art__q:last-of-type { border-bottom: 1px solid var(--line); }
.art__q > summary { list-style: none; cursor: pointer; display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 1.5rem; gap: .35rem var(--s-5);
  align-items: baseline; padding: 1.15rem 0;
  font: 400 1.15rem/1.3 var(--font-display); color: var(--text); }
.art__q > summary::-webkit-details-marker { display: none; }
.art__q > summary::before { content: attr(data-n);
  font: 400 var(--fs-caption)/1.5 var(--font-data); letter-spacing: .12em; color: var(--action); }
.art__q > summary::after { content: "→"; color: var(--text-muted); justify-self: end;
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.art__q[open] > summary::after { transform: rotate(90deg); color: var(--action); }
.art__q__a { padding: 0 0 1.15rem 4.25rem; }
.art__q__a p { font-size: var(--fs-small); color: var(--text-muted); max-width: 62ch; margin: 0 0 var(--s-3); }
.art__q__a > :last-child { margin-bottom: 0; }

/* ── список статей и «читайте дальше» ───────────────────────────────
   Карточка .ax-card из дизайн-системы, но ссылкой. Глобальный стиль ссылок
   красит её терракотой и тянет подчёркивание на весь текст внутри —
   поэтому оформление тут задаём заново, а не полагаемся на наследование. */
.ax-card { color: var(--text); text-decoration: none; }
.ax-card h3 { color: var(--text); transition: color var(--dur) var(--ease); }
.ax-card .ax-d { color: var(--text-muted); }
.ax-card:hover h3 { color: var(--action); }

.art__also { margin: var(--s-8) 0 0; }
.art__also-t { font: 600 var(--fs-eyebrow)/1.4 var(--font-text); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--text-eyebrow); margin: 0 0 var(--s-4); }

/* ── финальная плита: на .on-dark --bg-alt = navy-deep, футер = navy ── */
.art__cta { background: var(--bg-alt); padding-block: var(--section-y);
  border-top: 1px solid var(--line-accent); text-align: center; }
.art__cta .wrap { max-width: 44rem; }
.art__cta-eyebrow { font: 600 var(--fs-eyebrow)/1.4 var(--font-text); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--text-eyebrow); margin: 0 0 var(--s-4); }
.art__cta-h { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-h2);
  color: var(--text); margin: 0 auto var(--s-4); max-width: 22ch; }
.art__cta-lead { color: var(--text-muted); margin: 0 auto var(--s-6); max-width: 38rem; }
.art__cta-btns { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; margin: 0; max-width: none; }
.art__cta-micro { max-width: none; margin: var(--s-5) auto 0;
  font: 600 11px/1.6 var(--font-data); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }

/* ── индекс раздела ─────────────────────────────────────────────── */
.art .ax-head { margin-bottom: var(--s-6); }
.art .ax-list { margin-bottom: 0; }

/* ── плавающая кнопка Telegram ───────────────────────────────────
   Дубль из v2-blocks.css: тот файл инлайнится только в главную.
   Правки держать синхронно в обоих местах. */
.tg-fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 56px; height: 56px;
  border-radius: 50%; background: #229ED9; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(14, 27, 44, .30);
  transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.tg-fab:hover { background: #1e93cc; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(14, 27, 44, .36); }
.tg-fab:active { transform: scale(.96); }
.tg-fab svg { width: 26px; height: 26px; fill: #fff; transform: translateX(-1px); }

@media (max-width: 62rem) {
  .art__q__a { padding-left: 2.75rem; }
  .art__q > summary { grid-template-columns: 2.5rem minmax(0, 1fr) 1.25rem; }
  .tg-fab { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .crumbs a, .art__toc a, .art__body a, .art__q > summary::after, .tg-fab,
  .ax-card h3 { transition: none; }
}