/* ==========================================================================
   Блог на общей основе сайта (BLOG-1B/1C, docs/blog/blog-1bc-plan-2026-10-26.md, 26.10.2026)

   Один файл для списка и всех статей. Цвета — только токены --site-* (css/site-tokens.css, тема Light/Dark),
   шрифт — Inter сайта; приёмы главной: один синий, кромка 3 px, мягкий фон карточек.
   Все правила ограничены .bl2-*; кабинет и другие страницы не затрагиваются.
   Отступы текста статьи: базовый ноль и «блок + блок» — правила одной силы, второе объявлено последним
   (прежде .at-prose p{margin:0} перебивал межблочный отступ — аудит B01).
   ========================================================================== */

body.bl2-body{ background:var(--site-bg); color:var(--site-text); font-family:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
.bl2-main{ padding:36px 0 72px; }
.bl2-main a{ color:var(--site-link); }

/* ---------- список ---------- */
.bl2-head{ max-width:760px; margin:0 0 24px; }
.bl2-h1{ margin:0; font-size:clamp(30px,3.2vw,40px); line-height:1.15; font-weight:700; letter-spacing:-.02em; color:var(--site-ink); background:none; -webkit-text-fill-color:currentColor; }
.bl2-lede{ margin:10px 0 0; font-size:17px; line-height:1.6; color:var(--site-text); }

.bl2-tools{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; padding:0 0 18px; border-bottom:1px solid var(--site-line); }
.bl2-topics{ display:flex; flex-wrap:wrap; gap:8px; }
.bl2-chip{ display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 14px; border:1px solid var(--site-line); border-radius:999px;
  background:var(--site-surface); color:var(--site-ink) !important; font-size:14px; font-weight:500; text-decoration:none; }
.bl2-chip:hover{ border-color:var(--site-accent); }
.bl2-chip[aria-current="page"]{ background:var(--site-accent-soft); border-color:var(--site-accent); color:var(--site-link) !important; font-weight:600; }
.bl2-chip-n{ color:var(--site-muted); font-size:12.5px; font-variant-numeric:tabular-nums; }
.bl2-search{ display:flex; gap:8px; flex:0 1 420px; min-width:0; }
.bl2-search input{ flex:1 1 auto; min-width:0; height:44px; padding:0 14px; border:1px solid var(--site-line-strong); border-radius:10px;
  background:var(--site-surface); color:var(--site-ink); font-size:15px; }
.bl2-search input:focus{ outline:2px solid var(--site-accent); outline-offset:1px; border-color:var(--site-accent); }
.bl2-search .hv2-btn{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 18px; border-radius:10px; }

.bl2-result{ margin:18px 0 0; color:var(--site-muted); font-size:14.5px; }

.bl2-list{ list-style:none; margin:0; padding:0; }
.bl2-card{ display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:28px; align-items:start; padding:24px 0; border-bottom:1px solid var(--site-line); }
.bl2-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:0 0 6px; font-size:13px; color:var(--site-muted); }
.bl2-topic{ font-weight:600; text-decoration:none; color:var(--site-link) !important; }
.bl2-en{ padding:1px 6px; border:1px solid var(--site-line-strong); border-radius:4px; font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--site-muted); }
.bl2-card-title{ margin:0; font-size:21px; line-height:1.3; font-weight:700; letter-spacing:-.01em; color:var(--site-ink); background:none; -webkit-text-fill-color:currentColor; text-wrap:balance; }
.bl2-card-title a{ color:var(--site-ink) !important; text-decoration:none; }
.bl2-card-title a:hover{ color:var(--site-link) !important; }
.bl2-card-desc{ margin:8px 0 0; font-size:15.5px; line-height:1.6; color:var(--site-text);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.bl2-thumb{ display:block; border-radius:10px; overflow:hidden; background:var(--site-bg-soft); aspect-ratio:1200/630; }
.bl2-thumb img{ display:block; width:100%; height:100%; object-fit:cover; }

.bl2-empty{ padding:48px 0; text-align:center; color:var(--site-muted); }
.bl2-empty p{ margin:0 0 16px; font-size:17px; }

.bl2-pager{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:32px 0 0; }
.bl2-pg{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 10px; border:1px solid var(--site-line);
  border-radius:10px; color:var(--site-ink) !important; text-decoration:none; font-size:15px; font-variant-numeric:tabular-nums; background:var(--site-surface); }
.bl2-pg:hover{ border-color:var(--site-accent); }
.bl2-pg[aria-current="page"]{ background:var(--site-accent); border-color:var(--site-accent); color:var(--site-on-accent) !important; font-weight:600; }
.bl2-pg-gap{ display:inline-flex; align-items:center; padding:0 4px; color:var(--site-faint); }

/* ---------- статья ---------- */
.bl2-crumbs{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px; font-size:13.5px; color:var(--site-faint); }
.bl2-crumbs a{ color:var(--site-muted) !important; text-decoration:none; }
.bl2-crumbs a:hover{ color:var(--site-link) !important; }
.bl2-note{ display:flex; gap:10px; align-items:flex-start; margin:0 0 20px; padding:12px 16px; border-inline-start:3px solid var(--site-accent);
  background:var(--site-bg-soft); border-radius:0 8px 8px 0; font-size:15px; color:var(--site-text); }
.bl2-note i{ color:var(--site-link); margin-top:2px; }

.bl2-art-head{ margin:0 0 26px; }
.bl2-art-title{ margin:10px 0 0; font-size:clamp(30px,3.6vw,44px); line-height:1.15; font-weight:700; letter-spacing:-.02em; color:var(--site-ink); background:none; -webkit-text-fill-color:currentColor; text-wrap:balance; }
.bl2-art-lede{ margin:14px 0 0; font-size:19px; line-height:1.55; color:var(--site-text); }
.bl2-art-meta{ display:flex; flex-wrap:wrap; gap:6px 20px; margin:16px 0 0; font-size:14px; color:var(--site-muted); }
.bl2-art-meta span{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.bl2-art-meta i{ color:var(--site-faint); }
.bl2-nb{ white-space:nowrap; }
.bl2-langs{ display:flex; flex-wrap:wrap; gap:4px 12px; margin:10px 0 0; font-size:13.5px; color:var(--site-muted); }
.bl2-langs a{ text-decoration:none; }
.bl2-langs a:hover{ text-decoration:underline; }

/* картинка — по ширине текста; на узком экране не выше 340 px, чтобы не отодвигать текст на целый экран */
.bl2-hero{ width:100%; margin:0 0 32px; border-radius:12px; overflow:hidden; background:var(--site-bg-soft); aspect-ratio:1200/630; max-height:340px; }

.bl2-hero img{ display:block; width:100%; height:100%; object-fit:cover; }

.bl2-body-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }
.bl2-toc{ border:1px solid var(--site-line); border-radius:10px; padding:12px 16px; background:var(--site-surface); font-size:14px; }
.bl2-toc summary{ cursor:pointer; font-weight:600; color:var(--site-ink); min-height:28px; }
.bl2-toc ol{ list-style:none; margin:10px 0 0; padding:0; }
.bl2-toc li a{ display:block; padding:6px 10px; border-inline-start:2px solid transparent; color:var(--site-text) !important; text-decoration:none; line-height:1.4; }
.bl2-toc li.bl2-toc-l2 a{ padding-inline-start:22px; font-size:13.5px; }
.bl2-toc li a:hover{ color:var(--site-link) !important; }

.bl2-prose{ font-size:18px; line-height:1.7; color:var(--site-text); overflow-wrap:break-word; }
.bl2-prose > *{ margin-top:0; margin-bottom:0; }
.bl2-prose > * + *{ margin-top:1.1em; }
.bl2-prose > h2{ margin-top:1.9em; font-size:26px; line-height:1.25; font-weight:700; letter-spacing:-.015em; color:var(--site-ink); scroll-margin-top:96px; background:none; -webkit-text-fill-color:currentColor; }
.bl2-prose > h3{ margin-top:1.5em; font-size:20px; line-height:1.3; font-weight:700; color:var(--site-ink); scroll-margin-top:96px; background:none; -webkit-text-fill-color:currentColor; }
.bl2-prose > h2 + *,.bl2-prose > h3 + *{ margin-top:.6em; }
.bl2-prose a{ color:var(--site-link); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.bl2-prose strong{ color:var(--site-ink); }
.bl2-prose img{ max-width:100%; height:auto; border-radius:10px; }
.bl2-prose ul,.bl2-prose ol{ padding-inline-start:1.4em; }
.bl2-prose li + li{ margin-top:.4em; }
.bl2-prose li > p{ margin:0; }
.bl2-prose li > p + p{ margin-top:.6em; }
.bl2-prose blockquote{ padding:6px 0; padding-inline-start:18px; border-inline-start:3px solid var(--site-accent); color:var(--site-text); }
.bl2-prose blockquote > p{ margin:0; }
.bl2-prose blockquote > p + p{ margin-top:.6em; }
.bl2-prose table{ display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; font-size:15px; }
.bl2-prose th,.bl2-prose td{ padding:10px 14px; border-bottom:1px solid var(--site-line); text-align:start; vertical-align:top; }
.bl2-prose th{ color:var(--site-ink); background:var(--site-bg-soft); font-weight:600; }
.bl2-prose pre{ max-width:100%; overflow-x:auto; padding:16px 18px; border-radius:10px; background:var(--site-code-bg); color:var(--site-code-text); font-size:14px; line-height:1.6; }
.bl2-prose code{ font-size:.9em; }
.bl2-prose hr{ border:0; border-top:1px solid var(--site-line); }

.bl2-share{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:40px 0 0; padding:20px 0; border-top:1px solid var(--site-line); border-bottom:1px solid var(--site-line); }
.bl2-share > span{ margin-inline-end:6px; font-size:14px; font-weight:600; color:var(--site-ink); }
.bl2-share a,.bl2-copy{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border:1px solid var(--site-line); border-radius:10px;
  background:var(--site-surface); color:var(--site-ink) !important; font-size:14px; text-decoration:none; cursor:pointer; }
.bl2-share a:hover,.bl2-copy:hover{ border-color:var(--site-accent); }

.bl2-prevnext{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:28px 0 0; }
.bl2-pn{ display:block; padding:16px 20px; border:1px solid var(--site-line); border-radius:12px; background:var(--site-surface); text-decoration:none; }
.bl2-pn:hover{ border-color:var(--site-accent); }
.bl2-pn-next{ text-align:end; }
.bl2-pn-lbl{ display:block; margin:0 0 4px; font-size:13px; color:var(--site-muted); }
.bl2-pn-title{ display:block; font-size:16px; font-weight:600; line-height:1.35; color:var(--site-ink); }

.bl2-related{ margin:44px 0 0; }
.bl2-related-h{ margin:0 0 16px; font-size:22px; font-weight:700; color:var(--site-ink); background:none; -webkit-text-fill-color:currentColor; }
.bl2-related-grid{ list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:0; padding:0; }
.bl2-related-grid a{ display:flex; flex-direction:column; gap:8px; height:100%; padding:20px; border-top:3px solid var(--site-accent); background:var(--site-bg-soft);
  border-radius:0 0 12px 12px; text-decoration:none; }
.bl2-related-grid .bl2-card-title{ font-size:17px; }
.bl2-related-grid a:hover .bl2-card-title{ color:var(--site-link); }

/* ---------- узкие экраны ---------- */
@media (max-width:860px){
  .bl2-card{ grid-template-columns:minmax(0,1fr) 140px; gap:16px; }
  .bl2-related-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:600px){
  .bl2-main{ padding:24px 0 56px; }
  .bl2-search{ flex:1 1 100%; }
  .bl2-search .hv2-btn span{ display:none; }
  .bl2-card{ grid-template-columns:minmax(0,1fr); }
  .bl2-thumb{ display:none; }
  .bl2-card-title{ font-size:19px; }
  .bl2-art-lede{ font-size:17px; }
  .bl2-prose{ font-size:17px; }
  .bl2-prose > h2{ font-size:22px; }
  .bl2-prevnext{ grid-template-columns:minmax(0,1fr); }
  .bl2-pn-next{ text-align:start; }
}

/* ---------- широкие экраны: две колонки, как у Binance ----------
   Решение владельца 26.10.2026: текст во всю левую колонку, края — по шапке сайта; справа колонка 272 px от уровня заголовка:
   «поделиться» значками и оглавление линией с точками, едет вместе с прокруткой. Нижний «поделиться» и свёрнутое
   оглавление — только на узком экране. Шрифт текста — 18 px на всех ширинах (владелец: «размер шрифта наш оставлять»).
   Блок — последним: перекрывает базовые правила той же силы. */
.bl2-rail{ display:none; }
@media (min-width:1100px){
  .bl2-layout{ display:grid; grid-template-columns:minmax(0,1fr) 272px; gap:48px; align-items:start; }
  .bl2-hero{ max-height:none; }
  .bl2-toc,.bl2-share{ display:none; }
  .bl2-rail{ display:block; position:sticky; top:96px; }
  .bl2-rail-in{ display:flex; flex-direction:column; gap:28px; max-height:calc(100vh - 120px); overflow:auto; }
  .bl2-rail-h{ margin:0 0 10px; font-size:13px; font-weight:600; color:var(--site-muted); }
  .bl2-rail-share{ display:flex; flex-wrap:wrap; gap:8px; }
  .bl2-rail-share a,.bl2-rail-share .bl2-copy{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0;
    border:1px solid var(--site-line); border-radius:10px; background:var(--site-surface); color:var(--site-ink) !important; font-size:16px; text-decoration:none; cursor:pointer; }
  .bl2-rail-share a:hover,.bl2-rail-share .bl2-copy:hover{ border-color:var(--site-accent); }
  .bl2-rail-share .bl2-copy span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .bl2-rail-share .bl2-copy.is-done{ border-color:var(--site-accent); color:var(--site-link) !important; }
  .bl2-rail-share .bl2-copy.is-done i::before{ content:"\F26E"; }
  .bl2-rail-toc ol{ position:relative; list-style:none; margin:0; padding:0; }
  .bl2-rail-toc ol::before{ content:''; position:absolute; inset-inline-start:4px; top:14px; bottom:14px; width:1px; background:var(--site-line); }
  .bl2-rail-toc li a{ position:relative; display:block; padding:7px 0; padding-inline-start:22px; font-size:14px; line-height:1.4; color:var(--site-muted) !important; text-decoration:none; }
  .bl2-rail-toc li.bl2-toc-l2 a{ padding-inline-start:36px; font-size:13.5px; }
  .bl2-rail-toc li a::before{ content:''; position:absolute; inset-inline-start:0; top:13px; width:9px; height:9px; box-sizing:border-box; border-radius:50%;
    border:2px solid var(--site-line-strong); background:var(--site-bg); }
  .bl2-rail-toc li a:hover{ color:var(--site-ink) !important; }
  .bl2-rail-toc li a[aria-current="true"]{ color:var(--site-ink) !important; font-weight:600; }
  .bl2-rail-toc li a[aria-current="true"]::before{ border-color:var(--site-accent); background:var(--site-accent); }
}

/* «Уменьшить движение» в системе (BLOG-4 п. 2, план эксперта 1C): переход к разделу оглавления — мгновенный,
   а не плавная прокрутка общего css/style.css. Файл подключается только на страницах блога. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

/* ---------- «Следующий шаг» в конце статьи и ссылки под заголовком списка (план эксперта 1B п. 6, 1C) ----------
   Приём главной: серые карточки с синей кромкой 3 px, как «Похожие статьи». */
.bl2-next{ margin:40px 0 0; }
.bl2-next-h{ margin:0 0 14px; font-size:20px; font-weight:700; color:var(--site-ink); background:none; -webkit-text-fill-color:currentColor; }
.bl2-next-grid{ list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0; padding:0; }
.bl2-next-grid a{ display:flex; flex-direction:column; gap:6px; height:100%; padding:18px 20px; border-top:3px solid var(--site-accent); background:var(--site-bg-soft);
  border-radius:0 0 12px 12px; text-decoration:none; }
.bl2-next-t{ font-size:16px; font-weight:700; color:var(--site-ink); }
.bl2-next-t i{ font-size:13px; color:var(--site-link); }
.bl2-next-d{ font-size:14px; line-height:1.5; color:var(--site-text); }
.bl2-next-grid a:hover .bl2-next-t{ color:var(--site-link); }
.bl2-head-links{ display:flex; flex-wrap:wrap; gap:6px 20px; margin:12px 0 0; font-size:15px; }
.bl2-head-links a{ display:inline-flex; align-items:center; gap:6px; min-height:44px; text-decoration:none; font-weight:500; }
@media (max-width:860px){ .bl2-next-grid{ grid-template-columns:minmax(0,1fr); } }