/* ============================================================
   BLOG.CSS — раздел «Блог и новости»
   Общая страница ленты (.bl-*) и шаблон статьи (.art-*).
   Собран строго на токенах ui-kit: цвета, радиусы, тени, шрифты
   берутся из styles.css / v2.css. Новых цветов не вводим.
   Коралл в разделе НЕ используется — он зарезервирован под акции.
   ============================================================ */

/* ---------- Хлебные крошки (как на «Акциях» и «Услугах») ---------- */
.crumbs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
.crumbs a { color: var(--text-mute); transition: color .3s; }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { opacity: 0.5; }
.crumbs .cur { color: var(--text-dim); }

/* ---------- Hero внутренней страницы (эталон «Услуги и цены») ---------- */
.svc-hero { position: relative; overflow: hidden; padding-block: clamp(112px, 13vh, 148px) clamp(30px, 4vw, 48px); }
.svc-hero .svc-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.svc-hero .halo { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.82; }
.svc-hero .halo.h1 { width: 56vw; height: 56vw; left: -14vw; top: -22vw; background: radial-gradient(circle, var(--halo-1), transparent 65%); animation: drift 24s var(--ease) infinite alternate; }
.svc-hero .halo.h2 { width: 44vw; height: 44vw; right: -12vw; top: -6vw; background: radial-gradient(circle, var(--accent-soft), transparent 62%); animation: drift 30s var(--ease) infinite alternate-reverse; }
[data-motion="off"] .svc-hero .halo { animation: none; }
.svc-hero .svc-hero-bg .vignette { position: absolute; inset: 0; background: radial-gradient(135% 135% at 50% -12%, transparent 58%, color-mix(in srgb, var(--bg) 55%, transparent) 100%); }
.svc-hero .orbit-motif { top: 38%; }
.svc-hero-inner { position: relative; z-index: 2; display: grid; gap: clamp(14px, 1.8vw, 20px); }
.svc-hero h1 { font-size: clamp(2.1rem, 8.6vw, 5.4rem); line-height: 1.02; margin: 0; }
.svc-hero h1 em { font-style: italic; color: var(--accent); }
.svc-sub { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: var(--step-2); line-height: 1.2; color: var(--text); }
.svc-sub em { font-style: italic; color: var(--accent); }
.bl-hero-notes { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: clamp(8px, 1.4vw, 14px); }
.bl-hero-notes span { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); }
.bl-hero-notes span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }

/* ============================================================
   1 · ЛЕНТА — общая страница раздела
   ============================================================ */

/* ---------- Липкая панель управления лентой ---------- */
.bl-bar {
  /* липнет под фиксированной шапкой (.site-header ~74px), как табы на «Ценах» */
  position: sticky; top: var(--bl-bar-top, 74px); z-index: 60;
  padding-block: 14px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-block: 1px solid var(--line);
}
.bl-bar-inner { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); flex-wrap: wrap; }
.bl-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; min-width: 0; }
.bl-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 100px; border: 1px solid var(--line-strong);
  color: var(--text-dim); background: rgba(255,255,255,0.015);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease-out);
  cursor: pointer; white-space: nowrap;
}
.bl-chip .n { color: var(--text-mute); font-size: 0.62rem; transition: color .3s; }
.bl-chip:hover { color: var(--text); border-color: var(--accent); transform: translateY(-1px); }
.bl-chip[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.bl-chip[aria-pressed="true"] .n { color: var(--accent); }

.bl-search { position: relative; flex: 0 1 300px; min-width: 210px; }
.bl-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-mute); pointer-events: none; }
.bl-search input {
  width: 100%; padding: 11px 16px 11px 44px; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  font-family: inherit; font-size: var(--step--1);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.bl-search input::placeholder { color: var(--text-mute); }
.bl-search input:focus { outline: none; border-color: var(--accent); background: var(--surface-2); }

/* ---------- Сетка карточек-анонсов ---------- */
.bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.bl-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .7s var(--ease-out), border-color .45s var(--ease), background .45s var(--ease), box-shadow .55s var(--ease), opacity .5s var(--ease);
  will-change: transform;
}
.bl-card:hover, .bl-card:focus-within {
  transform: translateY(-6px); border-color: var(--accent); background: var(--surface-2);
  box-shadow: 0 30px 60px -34px var(--accent-glow), 0 0 0 1px var(--accent-soft);
}
.bl-card.is-hidden { display: none; }

.bl-media { position: relative; display: block; width: 100%; aspect-ratio: 16/10; overflow: hidden; isolation: isolate; background: var(--surface-2); }
.bl-media image-slot {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; display: block;
  transform: translateZ(0) scale(1); transform-origin: 50% 50%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform;
  transition: transform 1.1s var(--ease-out);
}
.bl-media image-slot::part(img) { width: 100%; height: 100%; object-fit: cover; }
.bl-card:hover .bl-media image-slot { transform: translateZ(0) scale(1.07); }
.bl-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--surface) 2%, transparent 46%); pointer-events: none; }

.bl-flag {
  position: absolute; top: 14px; left: 16px; z-index: 2;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
  padding: 5px 12px; border-radius: 100px;
  background: rgba(6,15,29,0.55); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.16);
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.bl-card:hover .bl-flag { background: var(--accent-deep); border-color: var(--accent); }
.bl-flag.is-news { background: color-mix(in srgb, var(--accent-deep) 80%, #000); border-color: var(--accent); }

.bl-body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: clamp(20px, 2vw, 28px) clamp(20px, 2.1vw, 28px) clamp(20px, 2.1vw, 26px); }
/* Перекрываем границу медиаблока на 1px: это убирает субпиксельный шов,
   который мог мерцать во время GPU-масштабирования изображения. */
.bl-card:not(.feature) .bl-body { position: relative; z-index: 2; }
.bl-card:not(.feature) .bl-body::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--surface); pointer-events: none;
  transition: background .45s var(--ease);
}
.bl-card:not(.feature):hover .bl-body::before,
.bl-card:not(.feature):focus-within .bl-body::before { background: var(--surface-2); }
.bl-cat { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
/* Cormorant с крупными выносными: интерлиньяж держим плотным,
   иначе многострочный заголовок карточки выглядит размашисто */
.bl-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--step-2); line-height: 1.04; letter-spacing: -0.01em; margin-top: -3px; color: var(--text); text-wrap: balance; }
.bl-title a { color: inherit; }
.bl-desc { color: var(--text-dim); font-size: var(--step--1); line-height: 1.55; }
.bl-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bl-meta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }
.bl-meta .dot { opacity: 0.5; }
.bl-more { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); transition: color .35s var(--ease), gap .35s var(--ease-out); white-space: nowrap; }
.bl-card:hover .bl-more { color: var(--accent); gap: 0.95em; }

/* карточка-заглушка: материал ещё не написан */
.bl-card.is-soon .bl-media::before {
  content: "Скоро"; position: absolute; z-index: 2; right: 14px; top: 14px;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim); padding: 5px 11px; border-radius: 100px;
  background: rgba(6,15,29,0.55); backdrop-filter: blur(6px); border: 1px solid var(--line-strong);
}

/* фичевая карточка — на всю ширину, горизонтально */
.bl-card.feature { grid-column: span 3; flex-direction: row; align-items: stretch; background: linear-gradient(150deg, var(--surface-2), var(--surface)); }
.bl-card.feature .bl-media { flex: 0 0 48%; aspect-ratio: auto; min-height: clamp(300px, 32vw, 440px); }
.bl-card.feature .bl-media::after { background: linear-gradient(105deg, transparent 58%, rgba(11,18,32,0.5) 100%); }
.bl-card.feature .bl-body { padding: clamp(26px, 3vw, 50px); justify-content: center; gap: 16px; }
.bl-card.feature .bl-title { font-size: var(--step-3); line-height: 1.0; }
.bl-card.feature .bl-desc { font-size: var(--step-0); max-width: 50ch; }
.bl-card.feature .bl-foot { border-top: 0; padding-top: 6px; margin-top: 10px; justify-content: flex-start; gap: clamp(16px, 2vw, 30px); }

/* ---------- Пустое состояние, «показать ещё», подписка ---------- */
.bl-empty { display: none; text-align: center; padding: clamp(50px, 8vw, 90px) 0; }
.bl-empty.is-on { display: block; }
.bl-empty h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--step-2); margin-bottom: 12px; }
.bl-empty p { color: var(--text-dim); font-size: var(--step--1); margin-bottom: 22px; }

.bl-tail { display: flex; justify-content: center; margin-top: clamp(30px, 4vw, 50px); }
.bl-tail.is-off { display: none; }

.bl-sub { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 3vw, 44px); padding: clamp(26px, 3vw, 44px) clamp(26px, 3.4vw, 50px); border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(150deg, var(--surface-2), var(--surface)); }
.bl-sub h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--step-2); line-height: 1.16; margin: 10px 0 8px; }
.bl-sub p { color: var(--text-dim); font-size: var(--step--1); max-width: 52ch; }

@media (max-width: 980px) {
  .bl-grid { grid-template-columns: 1fr 1fr; }
  .bl-card.feature { grid-column: span 2; }
}
@media (max-width: 760px) {
  .bl-card.feature { flex-direction: column; }
  .bl-card.feature .bl-media { flex: none; width: 100%; min-height: 0; aspect-ratio: 16/10; }
  .bl-sub { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .bl-grid { grid-template-columns: 1fr; }
  .bl-card.feature { grid-column: span 1; }
  .bl-bar-inner { flex-direction: column; align-items: stretch; }
  .bl-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
  .bl-chips::-webkit-scrollbar { display: none; }
  .bl-search { flex: 1 1 auto; }
}

/* ============================================================
   2 · СТАТЬЯ — детальная страница

   КАНОН ШАБЛОНА (утверждено Дмитрием 13.07.2026).
   Детальная статья состоит СТРОГО из этих блоков:
     1. Шапка: крошки, чипы рубрики, H1, лид, мета (дата · время · автор), шеринг
     2. Тело: липкое оглавление + текст, врезки, фото, таблицы, CTA-врезка
     3. «Читайте также» — 3 карточки
     4. Подвал

   НЕ ДОБАВЛЯТЬ в статьи:
     × фото-обложку под шапкой (.art-cover) — фото живут в теле текста;
     × блок «Коротко» / TL;DR (.art-tldr);
     × блок «Частые вопросы» (FAQ-аккордеон);
     × финальный CTA перед подвалом (.final-cta).
   Причина: всё это перегружало страницу и отодвигало текст.
   Призывы к записи остаются только во врезке в теле и в липком оглавлении.

   Стили .art-cover и .art-tldr ниже сохранены — они могут пригодиться
   на других типах страниц, но в статьях блога не используются.
   ============================================================ */

/* ---------- Индикатор прочитанного ---------- */
.art-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1001; background: transparent; pointer-events: none; }
.art-progress span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-deep), var(--accent-2)); box-shadow: 0 0 12px var(--accent-glow); transition: width .12s linear; }

/* ---------- Шапка статьи ---------- */
.art-hero { position: relative; overflow: hidden; padding-block: clamp(108px, 12vh, 140px) 0; }
.art-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.art-hero-bg .halo { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.7; width: 52vw; height: 52vw; left: -12vw; top: -20vw; background: radial-gradient(circle, var(--halo-1), transparent 65%); animation: drift 26s var(--ease) infinite alternate; }
[data-motion="off"] .art-hero-bg .halo { animation: none; }
.art-head { position: relative; z-index: 2; display: grid; gap: clamp(14px, 1.8vw, 22px); max-width: 900px; }
.art-kicker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.art-head h1 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -0.015em; font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4.1rem); line-height: 1.05; margin: 0; }
.art-head h1 em { font-style: italic; color: var(--accent); }
.art-lede { font-size: var(--step-1); color: var(--text-dim); line-height: 1.5; max-width: 62ch; text-wrap: pretty; }

.art-meta { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); flex-wrap: wrap; padding-top: clamp(14px, 2vw, 20px); margin-top: 4px; border-top: 1px solid var(--line); }
.art-author { display: flex; align-items: center; gap: 12px; }
.art-author .av { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent); font-family: var(--font-mono); font-size: 0.78rem; }
.art-author .nm { font-size: var(--step--1); color: var(--text); }
.art-author .rl { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); margin-top: 2px; }
.art-mono { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); display: inline-flex; align-items: center; gap: 9px; }
.art-mono::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.art-share { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.art-share button, .art-share a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--text-dim); background: rgba(255,255,255,0.015); transition: color .3s, border-color .3s, transform .3s var(--ease-out); }
.art-share button:hover, .art-share a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }

/* обложка статьи */
.art-cover { position: relative; margin-top: clamp(28px, 4vw, 48px); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); aspect-ratio: 2/1; }
.art-cover image-slot { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; display: block; }
.art-cover image-slot::part(img) { width: 100%; height: 100%; object-fit: cover; }
.art-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,15,29,0.55) 2%, transparent 45%); pointer-events: none; }
@media (max-width: 700px) { .art-cover { aspect-ratio: 3/2; } }

/* ---------- Раскладка: текст + липкое оглавление ---------- */
.art-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(30px, 5vw, 76px); align-items: start; }

.art-toc { position: sticky; top: clamp(90px, 12vh, 110px); display: grid; gap: 14px; }
.art-toc .t { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-mute); }
.art-toc ol { list-style: none; display: grid; gap: 2px; counter-reset: toc; }
.art-toc a {
  display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: baseline;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: var(--step--1); line-height: 1.35; color: var(--text-mute);
  border-left: 1px solid transparent;
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.art-toc a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-mute); transition: color .3s; }
.art-toc a:hover { color: var(--text); background: rgba(255,255,255,0.03); }
.art-toc a.is-active { color: var(--accent); background: var(--accent-soft); border-left-color: var(--accent); }
.art-toc a.is-active::before { color: var(--accent); }
.art-toc .toc-cta { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.art-toc .toc-cta .k { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); line-height: 1.6; }

@media (max-width: 980px) {
  .art-layout { grid-template-columns: 1fr; }
  .art-toc { position: static; order: -1; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
  .art-toc .toc-cta { display: none; }
}

/* ---------- Типографика тела статьи ---------- */
.art-body { max-width: 68ch; }
.art-body > * + * { margin-top: 1.15em; }
.art-body p { font-size: var(--step-0); line-height: 1.72; color: var(--text-dim); text-wrap: pretty; }
.art-body p strong { color: var(--text); font-weight: 600; }
.art-body a:not(.btn):not(.linklike) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); transition: text-decoration-color .3s; }
.art-body a:not(.btn):not(.linklike):hover { text-decoration-color: var(--accent); }

.art-body h2 {
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -0.01em;
  font-size: var(--step-3); line-height: 1.12; color: var(--text);
  margin-top: clamp(46px, 5vw, 76px); scroll-margin-top: clamp(84px, 11vh, 104px);
}
.art-body h2 em { font-style: italic; color: var(--accent); }
.art-body h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--step-1); line-height: 1.2; color: var(--text); margin-top: clamp(28px, 3vw, 40px); }

/* глобальный сброс в styles.css снимает маркеры только с ul — ol гасим здесь,
   иначе к нашему счётчику ::before добавляется родная нумерация браузера */
.art-body ul, .art-body ol { display: grid; gap: 12px; padding-left: 2px; list-style: none; }
.art-body ul li, .art-body ol li { position: relative; padding-left: 26px; font-size: var(--step-0); line-height: 1.62; color: var(--text-dim); }
.art-body ul li::before { content: ""; position: absolute; left: 2px; top: 0.66em; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--accent); background: var(--accent-soft); }
.art-body ol { counter-reset: al; }
.art-body ol li { padding-left: 34px; }
.art-body ol li::before { counter-increment: al; content: counter(al, decimal-leading-zero); position: absolute; left: 0; top: 0.1em; font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); }

/* врезка-выделение */
.art-callout {
  display: grid; gap: 10px; padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--r-md);
  background: linear-gradient(120deg, var(--accent-soft), transparent 70%);
  margin-block: clamp(28px, 3vw, 42px);
}
.art-callout .k { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.art-callout p { font-size: var(--step--1); line-height: 1.62; color: var(--text-dim); margin: 0; }

/* цитата */
.art-body blockquote {
  margin-block: clamp(30px, 3.4vw, 46px); padding-left: clamp(20px, 2.4vw, 30px);
  border-left: 2px solid var(--accent);
}
.art-body blockquote p { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--step-2); line-height: 1.3; color: var(--text); font-style: italic; }
.art-body blockquote cite { display: block; margin-top: 12px; font-family: var(--font-mono); font-style: normal; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); }

/* фото внутри статьи */
.art-fig { margin-block: clamp(32px, 4vw, 54px); }
.art-fig .f { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.art-fig image-slot { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; display: block; }
.art-fig image-slot::part(img) { width: 100%; height: 100%; object-fit: cover; }
.art-fig figcaption { margin-top: 12px; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); line-height: 1.6; }
.art-fig figcaption::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
/* широкое фото — выходит за колонку текста */
.art-fig.is-wide { max-width: none; width: min(100%, 1000px); }

/* таблица */
.art-table { margin-block: clamp(28px, 3vw, 44px); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.art-table table { width: 100%; border-collapse: collapse; }
.art-table th {
  text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute);
  padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.art-table td { padding: 16px 18px; border-bottom: 1px solid var(--line); font-size: var(--step--1); color: var(--text-dim); line-height: 1.5; vertical-align: top; }
.art-table tr:last-child td { border-bottom: 0; }
.art-table td:first-child { color: var(--text); }
.art-table tr:hover td { background: rgba(255,255,255,0.02); }
@media (max-width: 620px) { .art-table th, .art-table td { padding: 12px 13px; } }

/* «Коротко» — резюме статьи */
.art-tldr { padding: clamp(22px, 2.6vw, 34px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); margin-bottom: clamp(30px, 3.4vw, 46px); }
.art-tldr .k { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; display: block; }
.art-tldr ul { display: grid; gap: 11px; }
.art-tldr li { position: relative; padding-left: 24px; font-size: var(--step--1); line-height: 1.58; color: var(--text-dim); }
.art-tldr li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--accent); background: var(--accent-soft); }

/* CTA-врезка посреди статьи */
.art-cta {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(18px, 2.4vw, 34px); flex-wrap: wrap;
  margin-block: clamp(38px, 4.4vw, 62px); padding: clamp(24px, 2.8vw, 38px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--surface-2), var(--surface));
}
.art-cta h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--step-2); line-height: 1.16; margin-bottom: 8px; }
.art-cta p { color: var(--text-dim); font-size: var(--step--1); max-width: 46ch; margin: 0; }

/* подвал статьи: теги + возврат в ленту */
.art-foot { margin-top: clamp(40px, 5vw, 66px); padding-top: clamp(22px, 2.6vw, 32px); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.art-tags { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Орбита в финальном CTA (единая по всем страницам) ---------- */
/* Без этих правил SVG-петли встают в поток обычными блоками
   и распирают секцию пустотой — см. эталон на «Акциях». */
.final-cta .cta-orbit { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; opacity: 0.4; }
.final-cta .cta-orbit .sh-orbit-drift { width: min(82vmin, 760px); aspect-ratio: 1; position: relative; }
.cta-orbit .sh-loop { position: absolute; inset: 0; display: grid; place-items: center; transform-origin: 50% 50%; will-change: transform; }
.cta-orbit .sh-loop svg { width: 100%; height: 100%; overflow: visible; }
.cta-orbit .sh-loop path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.cta-orbit .l-a path, .cta-orbit .l-b path { stroke: color-mix(in oklch, var(--accent-2) 86%, white); stroke-width: 1.1; opacity: 0.42; }
.cta-orbit .l-c, .cta-orbit .l-d { transform: scale(1.34); }
.cta-orbit .l-c path, .cta-orbit .l-d path { stroke: var(--accent); stroke-width: 0.85; opacity: 0.18; }
.cta-orbit .l-a { animation: ctaSpin 58s linear infinite; }
.cta-orbit .l-b { animation: ctaSpin 72s linear infinite reverse; }
.cta-orbit .l-c { animation: ctaSpinBig 96s linear infinite reverse; }
.cta-orbit .l-d { animation: ctaSpinBig 116s linear infinite; }
@keyframes ctaSpin    { to { transform: rotate(360deg); } }
@keyframes ctaSpinBig { to { transform: scale(1.34) rotate(360deg); } }
[data-motion="off"] .cta-orbit .sh-loop { animation: none; }
@media (prefers-reduced-motion: reduce) { .cta-orbit .sh-loop { animation: none; } }

/* ---------- «Читайте также» ---------- */
.art-next { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
@media (max-width: 900px) { .art-next { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .art-next { grid-template-columns: 1fr; } }

/* ---------- Светлая редакционная поверхность статьи ----------
   Локальные токены сохраняют фирменную тёмную шапку, hero,
   рекомендации и футер, а длинный текст переводят на ivory-фон. */
.art-paper-section {
  position: relative;
  isolation: isolate;
  padding-bottom: var(--section-pad-y);
  background: linear-gradient(180deg, transparent 0%, transparent 76%, var(--bg-2) 100%);
}
.art-paper-section > .wrap { position: relative; z-index: 1; }

.art-paper {
  --bg: #f4f1e9;
  --bg-2: #e7e0d2;
  --surface: #fffdf7;
  --surface-2: #e7e0d2;
  --line: rgba(19, 39, 53, 0.14);
  --line-strong: rgba(22, 113, 180, 0.27);
  --text: #132735;
  --text-dim: rgba(19, 39, 53, 0.78);
  --text-mute: rgba(19, 39, 53, 0.64);
  --accent: #1671b4;
  --accent-deep: #155f9c;
  --accent-2: #2a84bf;
  --accent-soft: rgba(22, 113, 180, 0.10);
  --accent-glow: rgba(22, 113, 180, 0.20);

  position: relative;
  color: var(--text);
  padding: clamp(30px, 5vw, 70px) clamp(24px, 5.2vw, 72px) clamp(38px, 5.8vw, 80px);
  border: 1px solid var(--line);
  border-radius: clamp(26px, 3.2vw, 42px);
  background: #f4f1e9;
  box-shadow:
    0 48px 110px -54px rgba(1, 8, 15, 0.78),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.art-paper .art-layout {
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: clamp(30px, 4vw, 58px);
}
.art-paper .art-body { max-width: 66ch; }
.art-paper .art-body p { font-size: var(--step-0); line-height: 1.72; }
.art-paper .art-body > p:first-child { color: var(--text-dim); }
.art-paper .art-body ul li,
.art-paper .art-body ol li { font-size: var(--step-0); line-height: 1.62; }
.art-paper .sci-card p { font-size: var(--step--1); line-height: 1.6; }
.art-paper .art-body .biblio li { font-size: var(--step--1); line-height: 1.55; }

.art-paper .art-cta {
  flex-wrap: nowrap;
  gap: clamp(16px, 2vw, 24px);
  margin-block: clamp(30px, 3.6vw, 46px);
  padding: clamp(18px, 2vw, 26px);
}
.art-paper .art-cta > div { flex: 1 1 auto; min-width: 0; }
.art-paper .art-cta .btn { flex: 0 0 auto; }

.art-paper .art-toc {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.art-paper .art-toc a { font-size: var(--step--1); }
.art-paper .art-toc a:hover {
  color: var(--text);
  background: rgba(22, 113, 180, 0.07);
}
.art-paper .art-table tr:hover td { background: rgba(22, 113, 180, 0.045); }

@media (max-width: 1040px) {
  .art-paper .art-layout { grid-template-columns: 1fr; }
  .art-paper .art-toc { position: static; order: -1; }
}
@media (max-width: 600px) {
  .art-paper-section > .wrap { padding-inline: 0; }
  .art-paper {
    margin-inline: 8px;
    padding: 28px clamp(18px, 5.5vw, 24px) 36px;
    border-radius: 24px;
  }
  .art-paper .art-toc { padding: 0; }
}
@media (max-width: 480px) {
  .art-paper .art-cta {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 18px;
    padding: 20px;
  }
  .art-paper .art-cta > div { flex-basis: 100%; }
}