/* Раздел «Блог»: список статей и страница статьи. Читаемый исходник, без сборки.
   Шапка, меню, подвал, кнопки, вопросы и окно формы общие (css/site-*.css, слой site); здесь тема раздела (bl-*), всё в слое page.
   Тёмная нейтральная тема сайта и мятный сигнальный цвет; для длинного чтения узкая колонка текста (до 44rem) и крупный межстрочный интервал.
   Логические свойства (inline, block): раздел готов к RTL. */
@layer page {

body.bl {
  --site-bg: #07080a;
  --site-dim: rgba(242, 244, 245, 0.68);
  --site-wrap: 76rem;
  --bg-2: #0d0f12;
  --card: rgba(255, 255, 255, 0.035);
  --mint: #8cf2c0;
  --faq-accent: var(--mint);
  --faq-accent-ink: #07080a;
  --faq-radius: 0.6rem;
  --faq-line-open: rgba(140, 242, 192, 0.55);
  --c-dev: #8cf2c0;
  --c-speed: #f0d79a;
  --c-seo: #9fc4ff;
  --c-geo: #c9b6ff;
  --c-law: #ffb19a;
}
html { scroll-behavior: smooth; }
.bl-wrap { width: 100%; max-width: calc(var(--site-wrap) + 2 * var(--site-gutter)); margin-inline: auto; padding-inline: var(--site-gutter); }
.site-head::before { background: linear-gradient(to bottom, rgba(7, 8, 10, 0.94) 55%, rgba(7, 8, 10, 0)); }
.site-head.is-scrolled::before { background: rgba(7, 8, 10, 0.92); }
.site-head__tag { position: relative; z-index: 2; }
.site-menu { background: rgba(7, 8, 10, 0.985); }
.site-menu__n { color: var(--mint); }
.site-menu__list a[aria-current="page"] { color: var(--mint); }

.crumbs { margin: 0 0 0.6rem; font-size: 0.85rem; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0; padding: 0; list-style: none; color: var(--site-dim); }
.crumbs li + li::before { content: "/"; margin-inline-end: 0.5rem; color: rgba(242, 244, 245, 0.35); }
.crumbs a { display: inline-block; padding-block: 0.5rem; text-decoration: none; color: var(--site-dim); }
.crumbs a:hover { color: var(--site-fg); text-decoration: underline; text-underline-offset: 0.2em; }

.bl-eyebrow { margin: 0 0 0.8rem; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint); }

/* ---------- первый экран списка ---------- */
.bl-hero { padding-block: calc(var(--site-head-h) + 2rem) 1.5rem; }
.bl-hero__grid { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 62em) { .bl-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.bl-hero__h { margin: 0 0 1rem; font-family: var(--site-font-head); font-weight: 400; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.08; text-wrap: balance; }
.bl-hero__lead { margin: 0; max-width: 34rem; font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--site-dim); }
.bl-scene { display: block; width: 100%; height: auto; }   /* фон кадров равен цвету страницы (#07080a), без рамки и скругления */

/* ---------- рубрики и сетка ---------- */
.bl-list { padding-block: 1.5rem 3rem; }
.bl-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-end: 1.6rem; }
.bl-chips[hidden] { display: none; }
.bl-chip { padding: 0.5rem 1rem; border: 1px solid var(--site-line); border-radius: 2rem; background: transparent; cursor: pointer; font-size: 0.92rem; color: var(--site-dim); transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.bl-chip:hover { border-color: var(--site-fg); color: var(--site-fg); }
.bl-chip[aria-pressed="true"] { background: var(--mint); border-color: var(--mint); color: #07080a; font-weight: 600; }
.bl-grid { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40em) { .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em) { .bl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bl-card[hidden] { display: none; }
.bl-card { display: flex; border: 1px solid var(--site-line); border-radius: 0.9rem; background: var(--card); overflow: hidden; transition: border-color 0.2s, transform 0.2s; }
.bl-card:hover { border-color: rgba(140, 242, 192, 0.55); transform: translateY(-2px); }
.bl-card__link { display: flex; flex-direction: column; width: 100%; color: inherit; text-decoration: none; }
.bl-card__img, .bl-card__art { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.bl-art { display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--ac) 22%, #07080a), #0d0f12 70%); border-block-end: 1px solid var(--site-line); }
.bl-art b { font-family: var(--site-font-head); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--ac); letter-spacing: 0.04em; }
.bl-art--dev { --ac: var(--c-dev); } .bl-art--speed { --ac: var(--c-speed); } .bl-art--seo { --ac: var(--c-seo); }
.bl-art--geo { --ac: var(--c-geo); } .bl-art--law { --ac: var(--c-law); }
.bl-card__body { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; padding: 1.2rem 1.3rem 1.4rem; }
.bl-card__meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; font-size: 0.8rem; color: var(--site-dim); }
.bl-card__cat { color: var(--mint); font-weight: 600; }
.bl-card__title { margin: 0; font-family: var(--site-font-head); font-weight: 400; font-size: 1.3rem; line-height: 1.2; text-wrap: balance; }
.bl-card__lead { color: var(--site-dim); font-size: 0.95rem; }
.bl-card__more { margin-block-start: auto; padding-block-start: 0.4rem; color: var(--mint); font-size: 0.92rem; }
@media (min-width: 62em) {
  .bl-card--big { grid-column: 1 / -1; }
  .bl-card--big .bl-card__link { flex-direction: row; }
  .bl-card--big .bl-card__img, .bl-card--big .bl-card__art { width: 55%; aspect-ratio: auto; min-height: 17rem; border-block-end: 0; border-inline-end: 1px solid var(--site-line); }
  .bl-card--big .bl-card__body { justify-content: center; padding: 2rem; }
  .bl-card--big .bl-card__title { font-size: 1.9rem; }
  .bl-card--big .bl-card__lead { font-size: 1.05rem; }
  .bl-card--big .bl-card__more { margin-block-start: 0.6rem; }
}
.bl-empty, .bl-none { color: var(--site-dim); }
.bl-none[hidden] { display: none; }

.bl-more { padding-block: 0 4rem; }
.bl-more__inner { display: grid; gap: 0.6rem; justify-items: start; padding-block: 1.6rem; border-block-start: 1px solid var(--site-line); }
.bl-more__t { margin: 0; font-family: var(--site-font-head); font-size: 1.4rem; }
.bl-more__l { margin: 0 0 0.6rem; max-width: 36rem; color: var(--site-dim); }

/* ---------- статья ---------- */
.bl-progress { position: fixed; inset: 0 0 auto 0; z-index: 30; height: 3px; background: transparent; pointer-events: none; }
.bl-progress i { display: block; height: 100%; width: 100%; background: var(--mint); transform: scaleX(0); transform-origin: 0 50%; }
.bl-post__head { padding-block: calc(var(--site-head-h) + 1.6rem) 1.5rem; }
.bl-post__headgrid { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 62em) { .bl-post__headgrid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.bl-post__cat { display: inline-block; padding: 0.25rem 0.7rem; border: 1px solid var(--mint); border-radius: 2rem; }
.bl-post__h { margin: 0 0 1rem; font-family: var(--site-font-head); font-weight: 400; font-size: clamp(1.9rem, 4.6vw, 3.2rem); line-height: 1.1; text-wrap: balance; }
.bl-post__lead { margin: 0 0 1.2rem; font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.5; color: var(--site-dim); max-width: 40rem; }
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.2rem; margin: 0; padding: 0; list-style: none; font-size: 0.88rem; color: var(--site-dim); }
.bl-meta__author { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--site-fg); }
.bl-meta__author img { border-radius: 50%; background: #fff; }

.bl-post__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 1rem 3rem; }
.bl-post__grid > *, .bl-hero__grid > *, .bl-post__headgrid > * { min-width: 0; }
@media (min-width: 62em) { .bl-post__grid { grid-template-columns: 15rem minmax(0, 44rem); justify-content: center; gap: 3.5rem; } }
.bl-toc { font-size: 0.9rem; }
@media (min-width: 62em) { .bl-toc { position: sticky; top: calc(var(--site-head-h) + 1.2rem); align-self: start; max-height: calc(100vh - var(--site-head-h) - 2.4rem); overflow: auto; } }
.bl-toc__h { margin: 0 0 0.6rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint); }
.bl-toc ol { margin: 0; padding: 0; list-style: none; border-inline-start: 1px solid var(--site-line); }
.bl-toc a { display: block; padding: 0.4rem 0 0.4rem 0.9rem; margin-inline-start: -1px; border-inline-start: 2px solid transparent; color: var(--site-dim); text-decoration: none; line-height: 1.3; }
.bl-toc a:hover { color: var(--site-fg); }
.bl-toc a.is-active { color: var(--site-fg); border-inline-start-color: var(--mint); }
@media (max-width: 61.99em) {
  .bl-toc { padding: 1rem 1.1rem; border: 1px solid var(--site-line); border-radius: 0.7rem; background: var(--card); }
  .bl-toc ol { border: 0; }
  .bl-toc a { padding-inline-start: 0; border: 0; }
}

.bl-tldr { margin-block-end: 2rem; padding: 1.2rem 1.4rem; border: 1px solid rgba(140, 242, 192, 0.4); border-radius: 0.8rem; background: rgba(140, 242, 192, 0.05); }
.bl-tldr__h { margin: 0 0 0.6rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint); }
.bl-tldr ul { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: 0.5rem; }

.bl-prose { font-size: 1.1rem; line-height: 1.75; color: rgba(242, 244, 245, 0.9); }
.bl-prose > * + * { margin-block-start: 1.2rem; }
.bl-prose h2, .bl-h2 { margin-block: 2.6rem 0.2rem; font-family: var(--site-font-head); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; color: var(--site-fg); scroll-margin-block-start: calc(var(--site-head-h) + 1rem); text-wrap: balance; }
.bl-prose h3 { margin-block: 1.8rem 0; font-size: 1.2rem; line-height: 1.3; color: var(--site-fg); }
.bl-prose a { color: var(--mint); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.bl-prose a:hover { text-decoration-thickness: 2px; }
.bl-prose ul, .bl-prose ol { padding-inline-start: 1.4rem; display: grid; gap: 0.5rem; }
.bl-prose strong { color: var(--site-fg); }
.bl-prose blockquote { margin-inline: 0; padding: 0.2rem 0 0.2rem 1.2rem; border-inline-start: 3px solid var(--mint); color: var(--site-dim); }
.bl-prose code { padding: 0.1em 0.35em; border-radius: 0.3em; background: rgba(255, 255, 255, 0.08); font-size: 0.92em; }
.bl-prose pre { margin-inline: 0; padding: 1rem 1.2rem; border: 1px solid var(--site-line); border-radius: 0.6rem; background: #0b0d10; overflow-x: auto; line-height: 1.55; }
.bl-prose pre code { padding: 0; background: none; font-size: 0.9rem; }
.bl-prose table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.96rem; line-height: 1.5; }
.bl-prose th, .bl-prose td { padding: 0.7rem 0.9rem; border: 1px solid var(--site-line); text-align: start; vertical-align: top; min-width: 9rem; }
.bl-prose th { background: rgba(255, 255, 255, 0.05); color: var(--site-fg); font-weight: 600; }
@media (max-width: 40em) { .bl-prose th, .bl-prose td { min-width: 0; padding: 0.55rem 0.6rem; font-size: 0.88rem; } }
.bl-prose img { max-width: 100%; height: auto; border-radius: 0.6rem; }
.bl-prose figure { margin-inline: 0; }
.bl-prose figcaption { margin-block-start: 0.5rem; font-size: 0.85rem; color: var(--site-dim); }

.bl-faq { margin-block-start: 2.6rem; }
.bl-faq .bl-h2 { margin-block-start: 0; }
.bl-faq .site-faq { margin-top: 1rem; }
.bl-faq .site-faq__list { grid-template-columns: minmax(0, 1fr); }

.bl-soft { display: grid; gap: 0.9rem; justify-items: start; margin-block-start: 2.6rem; padding: 1.3rem 1.5rem; border: 1px solid var(--site-line); border-radius: 0.8rem; background: var(--card); }
.bl-soft p { margin: 0; color: var(--site-dim); }
.bl-soft a { color: var(--mint); text-underline-offset: 0.2em; }
.bl-by { display: flex; align-items: center; gap: 1rem; margin-block-start: 2rem; padding-block-start: 1.4rem; border-block-start: 1px solid var(--site-line); }
.bl-by img { flex: none; border-radius: 50%; background: #fff; }
.bl-by p { margin: 0; }
.bl-by__n { font-weight: 600; }
.bl-by__d { font-size: 0.92rem; color: var(--site-dim); }

/* ---------- Тигр внизу статьи ---------- */
.bl-end { margin-block-start: 2.4rem; display: grid; gap: 0.8rem; justify-items: center; text-align: center; }
.bl-scene--bottom { position: relative; max-width: 26rem; aspect-ratio: 3 / 2; }
.bl-scene--bottom img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bl-scene__down { position: absolute; inset: 0; opacity: 0; }
.bl-end__line { margin: 0; font-family: var(--site-font-head); font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: var(--mint); }
/* без скрипта виден итоговый кадр (собака смотрит на тигра); со скриптом (is-armed) сначала кадр с опущенной головой, потом плавная смена */
.bl-end.is-armed .bl-scene__down { opacity: 1; transition: opacity 0.9s ease; }
.bl-end.is-armed.is-seen .bl-scene__down { opacity: 0; }
.bl-end.is-armed .bl-end__line { opacity: 0; transform: translateY(0.4rem); transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s; }
.bl-end.is-armed.is-seen .bl-end__line { opacity: 1; transform: none; }

.bl-note { padding: 1rem 1.2rem; border: 1px solid var(--site-line); border-inline-start: 3px solid var(--mint); border-radius: 0.6rem; background: var(--card); font-size: 1rem; line-height: 1.6; }
.bl-note--warn { border-inline-start-color: var(--c-law); }
.bl-note__h { margin: 0 0 0.3rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint); }
.bl-note--warn .bl-note__h { color: var(--c-law); }
.bl-note > div > :last-child { margin-bottom: 0; }

/* ---------- теги ---------- */
.bl-tagrow { margin-block: 1.4rem 0; }
.bl-tagrow__h { margin: 0 0 0.5rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--site-dim); }
.bl-tagrow__list { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin: 0; padding: 0; list-style: none; }
.bl-tag { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.8rem; border: 1px solid var(--site-line); border-radius: 2rem; color: var(--site-dim); font-size: 0.88rem; text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.bl-tag span { font-size: 0.75rem; opacity: 0.7; }
.bl-tag:hover, .bl-tag.is-current { border-color: var(--mint); color: var(--site-fg); }
.bl-post__headtext .bl-tagrow { margin-block: 0 1rem; }
.bl-post__headtext .bl-tagrow__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bl-post__headtext .bl-tag span { display: none; }
.bl-list .bl-tagrow { margin-block-start: 2.2rem; }
.bl-back { margin: 1.6rem 0 0; }
.bl-back a { color: var(--mint); text-underline-offset: 0.2em; }
.bl-hero--tag { padding-block-end: 0.5rem; }

.bl-rel { padding-block: 1rem 4rem; border-block-start: 1px solid var(--site-line); }
.bl-rel .bl-h2 { margin-block: 2rem 1.2rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bl-card, .bl-chip { transition: none; }
  .bl-card:hover { transform: none; }
  .bl-end.is-armed .bl-scene__down, .bl-end.is-armed .bl-end__line { transition: none; }
}
@media print { .bl-progress, .bl-toc, .bl-end, .bl-soft, .bl-rel { display: none; } }

}