/* ================================================================
   blog.css — Editorial "Издание" (Вариант А), Best Bus brand (visa-ru).
   Loaded ONLY on /blog/* via head.html { if eq .Section "blog" }.
   Owner: Claude (SEO Engine pipeline).

   Design: light paper article on the dark-navy visa-ru chrome (header/
   footer/related stay navy — main.css :root untouched). Serif body
   (Source Serif 4) + sans headings (Source Sans 3), 2 typefaces only.
   Persistent sticky sales rail + facts in the reading flow (GEO #1/#2).
   Photo curtain-reveal preserved.

   §4.9 #6 RU-pair divergence (visa-ru vs vietnam-tour-guide-ru, same WHOIS):
   visa-ru = Source Serif 4 + Source Sans 3, cool paper #FBFCFD, CYAN accent
   #22D3EE (matches its navy chrome), fact = <aside class="fact"> label-first.
   tour-guide-ru diverges: Lora+Inter, warm paper, orange, .keyfact value-first,
   renamed structural classes, different hero-block order.
   ================================================================ */

/* ================================================================
   SELF-HOSTED FONTS (blog scope only). Variable, Latin+Cyrillic subset.
   Metrics-matched fallbacks (size-adjust/overrides from real font metrics
   vs Georgia/Arial) → ZERO reflow on swap, passes the CLS gate. Do NOT edit.
   ================================================================ */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/source-serif-var.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/source-sans-var.woff2') format('woff2-variations');
}
/* Metrics-matched fallback for Source Serif 4 → Georgia */
@font-face {
  font-family: 'SourceSerif-fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 107.61%;
  ascent-override: 96.27%;
  descent-override: 31.13%;
  line-gap-override: 0%;
}
/* Metrics-matched fallback for Source Sans 3 → Arial */
@font-face {
  font-family: 'SourceSans-fallback';
  src: local('Arial'), local('Helvetica Neue');
  size-adjust: 97.01%;
  ascent-override: 105.56%;
  descent-override: 41.23%;
  line-gap-override: 0%;
}

/* === Consolidated from main.css (T1, 2026-07-18). Kept at top to preserve the
   original cascade; shadowed by the editorial rules below on /blog/*. === */
.blog-post { max-width: 800px; margin: 0 auto; padding: 2rem; }
.post-header h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 0.5rem; }
.post-featured-image { width: 100%; border-radius: 8px; margin: 1.5rem 0; }
.post-content h2 { margin: 2rem 0 1rem; font-size: 1.5rem; }
.post-content p { margin-bottom: 1rem; color: #ddd; }
.related-posts { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-border); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
.related-card { padding: 1rem; border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text); }
.related-card:hover { border-color: var(--color-accent); text-decoration: none; }
.related-card time { color: var(--color-muted); font-size: 0.85rem; }

/* ================================================================
   TOKENS (editorial). Paper palette scoped to the article/list sheets;
   the site's dark --color-bg/--color-text (main.css) is left for header/
   footer/related, so the chrome never flips.
   ================================================================ */
:root {
  /* light paper — visa-ru (cool near-white, harmonises with the navy chrome) */
  --color-paper: #FBFCFD;
  --color-paper-2: #EFF3F7;
  --color-paper-3: #E2E9F0;
  --color-ink: #16202E;      /* headings — navy-ink, almost-black */
  --color-body: #39434F;     /* body text (~10:1 on paper) */
  --color-quiet: #6B7688;    /* muted on paper */
  --color-rule: #DEE5EC;     /* hairlines on paper */
  --color-accent-ink: #0E7490; /* dark cyan that passes AA on paper (links/text) */
  --color-accent-soft: #DFF6FB;
  /* visa-ru brand cyan — bright accent for buttons/rails (main.css sets #22D3EE) */
  --color-accent: #22D3EE;

  /* dark chrome helpers (related/rail-on-dark) — navy to match main.css */
  --color-frame: #0E1525;
  --color-on-frame: #EAF0F7;
  --color-on-frame-dim: #8FA0B8;

  /* legacy tokens still referenced by widgets — keep defined */
  --color-surface-warm: #16203A;
  --color-text-soft: #B7C2D6;
  --color-gold: #22D3EE;
  --color-border-strong: rgba(234, 240, 247, 0.22);

  --font-serif: 'Source Serif 4', 'SourceSerif-fallback', Georgia, 'Times New Roman', serif;
  --font-sans:  'Source Sans 3', 'SourceSans-fallback', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  /* 2 typefaces on screen — labels/numbers = sans differentiated by tracking/weight */
  --font-mono:  var(--font-sans);
  /* Blog-scoped chrome remap: main.css uses --font-display/--font-mono/--font-heading/
     --font-body (Spectral/Inter/JetBrains via CDN). On /blog/* the CDN link is dropped
     (0 googleapis) so repoint chrome fonts to the self-hosted Source pair — chrome stays
     real, not system-fallback. Non-blog pages keep Spectral/JetBrains (main.css untouched). */
  --font-display: var(--font-serif);
  --font-heading: var(--font-sans);
  --font-body:    var(--font-serif);

  /* type scale §3 — H1>H2>H3>body always; serif body 20, sans heading 700 */
  --fs-h1:   clamp(1.875rem, 1.15rem + 3.1vw, 2.75rem);   /* 30 → 44 */
  --fs-h2:   clamp(1.4375rem, 1.24rem + 0.85vw, 1.75rem); /* 23 → 28 */
  --fs-h3:   clamp(1.1875rem, 1.11rem + 0.35vw, 1.3125rem);/* 19 → 21 */
  --fs-body: clamp(1.125rem, 1.06rem + 0.30vw, 1.25rem);  /* 18 → 20 */
  --fs-lead: clamp(1.25rem, 1.12rem + 0.55vw, 1.4375rem); /* 20 → 23 */
  --fs-meta: 0.875rem;   /* 14 */
  --fs-label: 0.72rem;
  --fs-micro: 0.6875rem;

  /* legacy fs-* used by list/widgets */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-xl: clamp(1.375rem, 1.6vw, 1.625rem);
  --fs-2xl: clamp(2rem, 3.4vw, 2.75rem);
  --fs-3xl: clamp(2.5rem, 5vw, 4rem);

  --content-width: 700px;   /* main reading column — ~67 CPL at 20px Lora */
  --rail-width: 336px;
  --wrap-max: 1240px;
  --gap-rail: clamp(30px, 3.4vw, 60px);
  --pad-x: clamp(20px, 4vw, 44px);

  --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem;
  --max-content: 1440px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 68px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-curtain: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Blog body typography — serif on the sheet. main.css sets body font 'Inter'
   as a literal; override explicitly here (blog scope) so body reads serif. */
body:has(.blog-post),
body:has(.blog-list) {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Sticky-rail fix: main.css sets overflow-x:hidden on html/body site-wide, which makes
   them scroll containers and KILLS position:sticky (the rail scrolls away). On ARTICLE
   pages restore overflow-x:visible so the viewport scrolls and the rail sticks; move the
   horizontal guard to the reading column (.post-main — a SIBLING of .post-rail). The blog
   LIST keeps hidden: no rail + a full-bleed ::before band that needs it. */
html:has(.blog-post), body:has(.blog-post) { overflow-x: visible; }
.post-main { overflow-x: clip; }

::selection { background: rgba(34, 211, 238, 0.22); color: var(--color-ink); }

/* ================================================================
   NEUTRALISE main.css pre-T3 leftovers. visa-ru's main.css still carries
   the old dark-chrome .post-content / .post-figure blog rules; the editorial
   rules below override most, but these kill the decorations that would leak
   onto the light paper. Blog scope only (main.css untouched → non-blog intact).
   ================================================================ */
/* dark film-grain/vignette overlay (body::before) → off on the light sheet */
body:has(.blog-post)::before,
body:has(.blog-list)::before { display: none !important; }
/* old h2 accent-bar (::before) + left padding — the in-flow section number replaces it */
.post-content h2 { padding-left: 0; }
.post-content h2::before { content: none; }
/* old giant opening-quote glyph before blockquotes */
.post-content blockquote::before { content: none; }
/* old accent dash before figcaptions */
.post-figure figcaption::before { content: none; }

/* ================================================================
   READING PROGRESS BAR
   ================================================================ */
.reading-progress {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--color-accent), #67E8F9);
  transform: scaleX(0); transform-origin: left center;
  z-index: 1000; pointer-events: none;
  transition: transform 0.08s linear;
}

/* ================================================================
   ANIMATION BASELINE (photo curtain preserved — Sergei's requirement)
   ================================================================ */
[data-anim] {
  opacity: 0;
  transition: opacity 0.7s var(--ease-soft), transform 0.7s var(--ease-soft);
  will-change: opacity, transform;
}
[data-anim="fade-up"]     { transform: translate3d(0, 18px, 0); }
[data-anim="slide-left"]  { transform: translate3d(-40px, 0, 0); }
[data-anim="slide-right"] { transform: translate3d(40px, 0, 0); }
[data-anim].is-inview { opacity: 1; transform: none; }

.word-stagger { display: inline-block; overflow: hidden; padding-bottom: 0.08em; }
.word-stagger > span {
  display: inline-block; opacity: 0;
  transform: translate3d(0, 100%, 0);
  transition: opacity 0.6s var(--ease-soft), transform 0.6s var(--ease-soft);
  will-change: opacity, transform;
}
.word-stagger.is-inview > span { opacity: 1; transform: translate3d(0, 0, 0); }

@media (prefers-reduced-motion: reduce) {
  [data-anim], .word-stagger > span {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .reading-progress { display: none; }
}

/* ================================================================
   ARTICLE SHEET + WRAP (content column + sticky sales rail)
   ================================================================ */
.blog-post {
  max-width: none; margin: 0; padding: 0;
  color: var(--color-body);
}
.post-sheet {
  background: var(--color-paper);
  background-image: radial-gradient(rgba(120, 100, 70, 0.022) 1px, transparent 1px);
  background-size: 3px 3px;
}
.post-wrap {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding: clamp(28px, 4vw, 56px) var(--pad-x) clamp(48px, 7vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-width);
  column-gap: var(--gap-rail);
  align-items: start;
}
.post-main {
  min-width: 0;
  max-width: var(--content-width);
  justify-self: start;
  width: 100%;
}

/* ================================================================
   ARTICLE HEADER — text-first (crumbs → eyebrow → H1 → dek → byline)
   ================================================================ */
.post-crumbs {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--color-quiet);
  margin-bottom: 20px;
}
.post-crumbs .breadcrumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
}
.post-crumbs .breadcrumbs li { display: inline-flex; align-items: center; }
.post-crumbs .breadcrumbs li::before,
.post-crumbs .breadcrumbs li::after { content: none; }
.post-crumbs .breadcrumbs li + li::before {
  content: '/'; margin: 0 7px; color: var(--color-rule);
}
.post-crumbs .breadcrumbs li[aria-current="page"] { color: var(--color-ink); }
.post-crumbs a { color: var(--color-quiet); text-decoration: none; transition: color 0.2s; }
.post-crumbs a:hover { color: var(--color-accent-ink); }

.post-hero-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-quiet);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 15px;
}
.eyebrow-cat { color: var(--color-accent-ink); }
.eyebrow-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-rule); }
.eyebrow-time { color: var(--color-quiet); text-transform: none; letter-spacing: 0; }

.post-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: 1.12;
  letter-spacing: -0.021em;
  color: var(--color-ink);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

.post-dek {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-body);
  margin: 0 0 1.1em;
  max-width: 40ch;
}

.post-hero-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  color: var(--color-quiet);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: 28px;
}
.post-hero-meta .who,
.post-hero-meta > span:first-child { color: var(--color-ink); font-weight: 600; }
.post-hero-meta .meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-quiet); opacity: 0.6; }

/* ================================================================
   ARTICLE BODY
   ================================================================ */
.post-content {
  counter-reset: section;
  color: var(--color-body);
}
.post-content > p,
.kin-sec-body > p,
.kin-sec p { margin: 0 0 1.15em; }

/* Lead paragraph = the answer (first 20% of the page). Serif, drop-cap.
   Styled via > p:first-of-type too, so it's lead-sized from first paint —
   the JS .lead class then only carries the reveal (no font-size jump → no CLS). */
.post-content .lead,
.post-content > p:first-of-type {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: 1.52;
  color: var(--color-ink);
  margin: 0 0 1.4em;
}
.post-content .lead::first-letter,
.post-content > p:first-of-type::first-letter {
  font-family: var(--font-sans);
  font-weight: 800;
  float: left;
  font-size: 3.4em;
  line-height: 0.82;
  padding: 0.05em 0.12em 0 0;
  color: var(--color-ink);
}

/* Sections (JS-wrapped H2 + siblings). Section number renders in-flow
   above the H2 (GEO: real text in linear DOM, no margin field). */
.kin-sec { margin: 0 0 1.4em; }
.kin-sec > h2::before {
  counter-increment: section;
  content: counter(section, decimal-leading-zero);
  display: block;
  /* reset main.css's absolute accent-bar props so the number renders inline */
  position: static; inset: auto; width: auto; height: auto;
  background: none; transform: none; transition: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-accent-ink);
  margin-bottom: 0.5em;
}

.post-content h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 1.5em 0 0.5em;
  text-wrap: balance;
  position: relative;
}
.post-content h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--color-ink);
  margin: 1.5em 0 0.5em;
}
.post-content p {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--color-body);
  margin: 0 0 1.15em;
}
.post-content strong { color: var(--color-ink); font-weight: 700; }
.post-content em { font-style: italic; }

/* Prose links only — scoped to text containers so TOC / buttons / nav are exempt */
.post-content :is(p, li, blockquote, td, dd) a {
  color: var(--color-accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 0.15s;
}
.post-content :is(p, li, blockquote, td, dd) a:hover {
  text-decoration-thickness: 2px;
}
/* TOC links stay clean — higher specificity than the prose-link rule (TOC uses <li>) */
.post-content .post-toc nav a { color: var(--color-body); text-decoration: none; }
.post-content .post-toc nav a:hover { color: var(--color-accent-ink); text-decoration: none; }

/* Understated numeric emphasis (sans, tabular) — справочник niche */
.num {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
}

/* Lists — tire markers amber, ordered = decimal-leading-zero mono-ish */
.post-content ul, .post-content ol { margin: 0 0 1.3em; padding: 0; list-style: none; }
.post-content li {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--color-body);
  position: relative;
  padding-left: 1.7em;
  margin-bottom: 0.6em;
}
.post-content ul li::before {
  content: '—'; position: absolute; left: 0; top: 0;
  color: var(--color-accent-ink); font-weight: 700; font-family: var(--font-sans);
}
.post-content ol { counter-reset: li; }
.post-content ol li::before {
  counter-increment: li;
  content: counter(li, decimal-leading-zero);
  position: absolute; left: 0; top: 0.2em;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.78em;
  color: var(--color-accent-ink);
  letter-spacing: 0.02em;
}
.post-content li > ul, .post-content li > ol { margin: 0.5em 0 0; }

.post-content blockquote {
  margin: 1.8em 0;
  padding: 2px 0 2px 22px;
  border-left: 3px solid var(--color-accent);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.4;
  color: var(--color-ink);
}
.post-content blockquote p { font: inherit; color: inherit; margin: 0; }
.post-content blockquote cite {
  display: block; margin-top: 10px;
  font-style: normal; font-family: var(--font-sans);
  font-size: 0.82rem; color: var(--color-quiet);
}
.post-content blockquote cite::before { content: '— '; }

.post-content code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--color-paper-2);
  color: var(--color-ink);
  padding: 0.12rem 0.4rem;
  border-radius: 3px;
}
.post-content pre {
  background: #1c1814;
  color: #ece6dd;
  border: 1px solid var(--color-rule);
  padding: 1.1rem 1.35rem;
  margin: 1.6em 0;
  border-radius: 6px;
  overflow-x: auto;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.post-content pre code { background: transparent; color: inherit; padding: 0; }

/* Tables */
.post-content table {
  width: 100%; border-collapse: collapse; margin: 1.5em 0;
  font-family: var(--font-sans); font-size: 0.94rem;
}
.post-content thead th {
  text-align: left; font-weight: 600;
  color: var(--color-quiet); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0 14px 8px 0; border-bottom: 1px solid var(--color-rule);
}
.post-content td {
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-body); vertical-align: top;
}
.post-content td:last-child, .post-content th:last-child { padding-right: 0; }
.post-content tr:last-child td { border-bottom: none; }

/* ================================================================
   FIGURES + CURTAIN (reveal preserved; curtain now paints on paper)
   ================================================================ */
.post-figure {
  margin: 1.6em 0 0.5em;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-paper-2);
}
.post-figure img {
  width: 100%; height: auto; display: block;
  filter: saturate(0.96) contrast(1.03);
  transition: filter 0.7s var(--ease-soft);
}
.post-figure.is-inview img { filter: none; }
.post-figure::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: var(--color-paper);        /* was --color-bg (dark) — §4.6 curtain fix */
  transform-origin: right center;
  transform: scaleX(1);
  transition: transform 1.1s var(--ease-curtain);
  pointer-events: none;
}
.post-figure.is-inview::after { transform: scaleX(0); }
.post-figure figcaption {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--color-quiet);
  line-height: 1.4;
  padding-top: 9px;
}
.post-figure figcaption strong, .post-figure figcaption b { color: var(--color-body); font-weight: 600; }

/* Hero figure (from frontmatter image; JS relocates it after the lead).
   Reserve a 16:10 banner box so image load never shifts layout (CLS). */
.post-hero-figure { margin: 0 0 0.6em; }
.post-hero-figure img { aspect-ratio: 16 / 10; width: 100%; height: auto; object-fit: cover; }
.post-hero-figure .post-hero-caption,
.post-hero-figure figcaption {
  font-family: var(--font-sans); font-size: 0.82rem; color: var(--color-quiet);
  line-height: 1.4; padding-top: 9px; position: static; background: none;
  text-shadow: none; margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .post-figure::after { transform: scaleX(0) !important; transition: none !important; }
  .post-figure img { filter: none !important; }
}

/* ================================================================
   FACT — label-first card, in the reading flow (Best Bus brand,
   divergent from Samurai's value-first .keyfact). Markup order from
   fact.html: .fact-key (label) → .fact-value (number) → .fact-src.
   ================================================================ */
.fact {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 8px 8px 0;
  padding: 13px 17px;
  margin: 1.5em 0;
}
.fact-key {
  font-family: var(--font-sans); font-weight: 600; font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-quiet);
  order: 1;
}
.fact-value {
  font-family: var(--font-sans); font-weight: 800; font-size: 1.3rem;
  line-height: 1.1; color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  order: 2;
}
.fact-src {
  font-style: normal; font-size: 0.76rem; color: var(--color-quiet);
  order: 3;
}
/* two+ adjacent facts flow into a row on wider screens */
.fact + .fact { margin-top: -0.6em; }
@media (min-width: 620px) {
  .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 1.5em 0; }
  .facts .fact { margin: 0; }
}

/* ================================================================
   INLINE CTA — quiet author's note (prose bridge, not a box)
   ================================================================ */
.inline-cta {
  border-left: 2px solid var(--color-accent);
  padding: 2px 0 2px 20px;
  margin: 1.8em 0;
  color: var(--color-body);
  display: flex; flex-direction: column; gap: 0.55rem;
}
.inline-cta-eyebrow {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-ink); margin: 0;
}
.inline-cta-text { margin: 0; font-family: var(--font-serif); color: var(--color-body); }
.inline-cta-text strong { color: var(--color-ink); }
.inline-cta-button {
  align-self: flex-start; background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-sans); font-weight: 700; color: var(--color-accent-ink);
  text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: baseline; gap: 0.35rem;
}
.inline-cta-button:hover { text-decoration-thickness: 2px; }
.inline-cta-button .arrow { transition: transform 0.25s var(--ease-soft); }
.inline-cta-button:hover .arrow { transform: translateX(3px); }

/* ================================================================
   TOC — inline "Вы узнаете" (Т—Ж school), rendered from Hugo TOC
   ================================================================ */
.post-toc {
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: 9px;
  padding: 18px 24px;
  margin: 1.8em 0;
}
.post-toc-title {
  font-family: var(--font-sans); font-weight: 600; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-quiet);
  margin: 0 0 12px;
}
.post-toc nav ol, .post-toc nav ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 32px; }
.post-toc nav li { padding: 0; margin-bottom: 8px; break-inside: avoid; }
.post-toc nav a {
  font-family: var(--font-sans); font-size: 0.92rem; color: var(--color-body);
  text-decoration: none;
}
.post-toc nav a:hover { color: var(--color-accent-ink); }
.post-toc nav ul ul { columns: 1; margin-top: 6px; padding-left: 16px; }
@media (max-width: 560px) { .post-toc nav ol, .post-toc nav ul { columns: 1; } }

/* ================================================================
   END CTA CARD (final, on paper)
   ================================================================ */
.post-cta {
  margin: 2.4em 0 0;
  padding: 26px;
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: 12px;
  display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start;
}
.post-cta-mark {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
  background: var(--color-accent); color: #06323b;
  display: flex; align-items: center; justify-content: center;
}
.post-cta-mark svg { width: 56%; height: 56%; display: block; }
.post-cta-eyebrow {
  font-family: var(--font-sans); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-quiet);
  margin: 0 0 0.6rem;
}
.post-cta-title {
  font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-h3);
  line-height: 1.2; color: var(--color-ink); margin: 0 0 0.5em;
}
.post-cta-text {
  font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.5;
  color: var(--color-body); margin: 0 0 1.1em; max-width: 56ch;
}
.post-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.post-cta-button {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--color-accent); color: #06323b;
  font-family: var(--font-sans); font-weight: 700; font-size: 0.95rem;
  padding: 11px 20px; border-radius: 999px; text-decoration: none;
  transition: transform 0.2s var(--ease-soft), box-shadow 0.2s;
}
.post-cta-button:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(34, 211, 238, 0.32); }
.post-cta-button .cta-arrow { transition: transform 0.25s var(--ease-soft); }
.post-cta-button:hover .cta-arrow { transform: translateX(4px); }
.post-cta-button--alt {
  background: transparent; color: var(--color-accent-ink);
  box-shadow: inset 0 0 0 1.5px var(--color-accent);
}
.post-cta-button--alt:hover { background: var(--color-accent-soft); box-shadow: inset 0 0 0 1.5px var(--color-accent); }
@media (max-width: 720px) {
  .post-cta { grid-template-columns: 1fr; }
  .post-cta-mark { display: none; }
}

/* ================================================================
   POST FOOTER — share + nav
   ================================================================ */
.post-footer {
  margin-top: 3rem; padding-top: 2.5rem;
  border-top: 1px solid var(--color-rule);
}
.post-share {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  margin-bottom: 2.5rem; padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-rule);
}
.share-label {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-quiet);
}
.share-links { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.share-link {
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 500;
  color: var(--color-body); background: transparent;
  border: 1px solid var(--color-rule); border-radius: 999px;
  padding: 0.5rem 1rem; cursor: pointer; text-decoration: none;
  transition: all 0.2s var(--ease-soft);
}
.share-link:hover { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.share-link.is-copied { background: var(--color-accent); color: #06323b; border-color: var(--color-accent); }

.post-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
  margin: 0; padding: 0; border: none;
}
.post-nav-link {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-serif); font-size: var(--fs-h3);
  color: var(--color-ink); padding: 1rem 0; text-decoration: none;
  transition: color 0.2s;
}
.post-nav-home { justify-content: flex-end; }
.post-nav-link:hover { color: var(--color-accent-ink); }
.post-nav-link .nav-arrow { font-family: var(--font-sans); transition: transform 0.25s var(--ease-soft); }
.post-nav-back:hover .nav-arrow { transform: translateX(-5px); }
.post-nav-home:hover .nav-arrow { transform: translateX(5px); }
@media (max-width: 640px) {
  .post-nav { grid-template-columns: 1fr; gap: 1rem; }
  .post-nav-home { justify-content: flex-start; }
}

/* ================================================================
   STICKY SALES RAIL (persistent lead-gen — the point of the article)
   ================================================================ */
/* align-self: stretch — the grid uses align-items:start, which would shrink this column
   to the card height and leave position:sticky no room to travel. */
.post-rail { min-width: 0; align-self: stretch; }
.rail-sticky {
  position: sticky; top: calc(var(--header-h) + 16px);
  display: flex; flex-direction: column; gap: 18px;
}
.railcard {
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: 14px;
  padding: 22px 20px;
  position: relative; overflow: hidden;
  box-shadow: 0 2px 12px rgba(60, 45, 25, 0.05);
}
.railcard::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--color-accent);
}
.rc-eyebrow {
  font-family: var(--font-sans); font-weight: 600; font-size: 0.68rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-quiet);
}
.railcard h3 {
  font-family: var(--font-sans); font-weight: 800; font-size: 1.2rem;
  line-height: 1.22; color: var(--color-ink); margin: 0.5em 0 0.4em;
}
.rc-text {
  font-family: var(--font-sans); font-size: 0.88rem; line-height: 1.5;
  color: var(--color-quiet); margin: 0 0 14px;
}
.railcard ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.railcard li {
  font-family: var(--font-sans); font-size: 0.86rem; color: var(--color-body);
  padding-left: 24px; position: relative; margin: 0;
}
.railcard li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--color-accent); font-weight: 700; }
.rc-go {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 700; font-size: 0.95rem;
  color: #06323b; background: var(--color-accent);
  padding: 13px; border-radius: 10px; text-decoration: none;
  transition: transform 0.2s var(--ease-soft), box-shadow 0.2s;
}
.rc-go:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(34, 211, 238, 0.32); }
.rc-go span { transition: transform 0.25s var(--ease-soft); }
.rc-go:hover span { transform: translateX(4px); }
.rc-note { font-family: var(--font-sans); font-size: 0.74rem; color: var(--color-quiet); text-align: center; margin: 10px 0 0; }

.rail-b2b {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-decoration: none; font-family: var(--font-sans); font-weight: 600; font-size: 0.86rem;
  color: var(--color-ink); background: var(--color-paper-2);
  border: 1px solid var(--color-rule); border-radius: 11px; padding: 13px 16px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.rail-b2b::after { content: '→'; color: var(--color-accent); font-weight: 700; }
.rail-b2b:hover { border-color: var(--color-accent); color: var(--color-accent-ink); background: var(--color-accent-soft); }

@media (max-width: 980px) {
  .post-wrap { grid-template-columns: minmax(0, 1fr); }
  .post-main { max-width: var(--content-width); justify-self: center; }
  .post-rail { display: none; } /* mobile sells via inline-CTA + reading-widget + end CTA */
}

/* ================================================================
   FLOATING WIDGETS (dark-glass pills over light paper)
   ================================================================ */
.reading-widget {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 950;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.65rem 0.55rem 1rem;
  background: rgba(26, 26, 26, 0.9);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.02em; color: var(--color-on-frame);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.4s var(--ease-soft), transform 0.4s var(--ease-soft);
}
.reading-widget.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.reading-widget-time { display: inline-flex; align-items: baseline; gap: 0.35rem; white-space: nowrap; }
.reading-widget-num { color: var(--color-accent); font-weight: 700; font-size: 0.95rem; }
.reading-widget-label { color: var(--color-on-frame-dim); }
.reading-widget-top {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--color-on-frame); font-size: 1rem; cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.3s;
  opacity: 0; transform: scale(0.5); pointer-events: none;
}
.reading-widget.show-top .reading-widget-top { opacity: 1; transform: scale(1); pointer-events: auto; }
.reading-widget-top:hover { background: var(--color-accent); color: #06323b; }
.reading-widget-cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--color-accent); color: #06323b;
  font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.02em; padding: 0.45rem 0.85rem; border-radius: 100px;
  text-decoration: none; margin-left: 0.3rem;
  max-width: 0; overflow: hidden; opacity: 0; transform: scale(0.5);
  padding-left: 0; padding-right: 0; white-space: nowrap; pointer-events: none;
  transition: max-width 0.5s var(--ease-soft), opacity 0.4s var(--ease-soft),
              transform 0.4s var(--ease-soft), padding 0.4s var(--ease-soft);
}
.reading-widget.show-cta .reading-widget-cta {
  max-width: 200px; opacity: 1; transform: scale(1); pointer-events: auto; padding: 0.45rem 0.85rem;
}
.reading-widget-cta:hover { background: #67E8F9; }
@media (max-width: 720px) {
  .reading-widget-cta .cta-label { display: none; }
  .reading-widget.show-cta .reading-widget-cta { max-width: 40px; padding: 0.45rem 0.6rem; }
  .reading-widget { bottom: 1rem; right: 1rem; padding: 0.45rem 0.55rem 0.45rem 0.85rem; }
  .reading-widget-label { display: none; }
}

.lang-switcher {
  position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 950;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 1rem;
  background: rgba(26, 26, 26, 0.9);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  font-family: var(--font-sans); font-size: 0.78rem;
  letter-spacing: 0.02em; color: var(--color-on-frame);
}
.lang-switcher-label { color: var(--color-on-frame-dim); margin-right: 0.2rem; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.08em; }
.lang-switcher-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.6rem; align-items: center; }
.lang-switcher-list li { display: inline-flex; }
.lang-switcher-list li:not(:last-child)::after { content: '·'; margin-left: 0.6rem; color: var(--color-on-frame-dim); }
.lang-switcher-current span { color: var(--color-accent); font-weight: 600; }
.lang-switcher-list a { color: var(--color-on-frame); transition: color 0.2s; text-decoration: none; }
.lang-switcher-list a:hover { color: var(--color-accent); }
@media (max-width: 720px) {
  .lang-switcher { bottom: 1rem; left: 1rem; padding: 0.4rem 0.75rem; font-size: 0.72rem; }
  .lang-switcher-label { display: none; }
}

/* ================================================================
   RELATED (bottom, on dark frame, WITH photos — §4.6 requirement)
   ================================================================ */
.related-posts {
  background: var(--color-frame);
  margin-top: 0;
  border-top: none;
}
.related-posts .related-in,
.related-posts {
  padding: clamp(40px, 6vw, 72px) var(--pad-x);
}
.related-posts {
  max-width: none;
}
.related-inner { max-width: var(--wrap-max); margin-inline: auto; }
.related-posts h2 {
  font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h3);
  color: var(--color-on-frame); margin: 0 0 24px;
}
.related-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px; margin: 0; border: none;
}
.related-card {
  text-decoration: none; display: flex; flex-direction: column; gap: 12px;
  padding: 0; border: none; border-radius: 0; background: none; color: inherit;
  transition: none;
}
.related-card:hover { border: none; transform: none; }
.related-card-image {
  aspect-ratio: 16 / 9; border-radius: 7px; overflow: hidden;
  background: var(--color-surface-warm); position: relative;
}
.related-card-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s var(--ease-soft), filter 0.6s ease;
  filter: saturate(0.95) contrast(1.03);
}
.related-card:hover .related-card-image img { transform: scale(1.04); filter: none; }
.related-card-image--empty {
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.16), rgba(34, 211, 238, 0.04)),
    var(--color-surface-warm);
}
.related-card-image--empty::after {
  content: '✦'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: rgba(34, 211, 238, 0.5);
}
.related-card-cat {
  font-family: var(--font-sans); font-weight: 600; font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent);
}
.related-card h3 {
  font-family: var(--font-sans); font-weight: 700; font-size: 1rem; line-height: 1.3;
  color: var(--color-on-frame); margin: 0; transition: color 0.2s;
}
.related-card:hover h3 { color: var(--color-accent); }
.related-card p {
  font-family: var(--font-sans); font-size: 0.86rem; line-height: 1.45;
  color: var(--color-on-frame-dim); margin: 0;
}
.related-card time {
  font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.02em;
  color: var(--color-on-frame-dim);
}

/* ================================================================
   BLOG INDEX — light paper, full-bleed band behind the centered list
   ================================================================ */
.blog-list {
  position: relative;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: calc(var(--header-h) + 4rem) var(--gutter) 6rem;
}
.blog-list::before {
  content: ''; position: absolute; z-index: -1;
  top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: var(--color-paper);
  background-image: radial-gradient(rgba(120, 100, 70, 0.022) 1px, transparent 1px);
  background-size: 3px 3px;
}
.blog-list > h1 { display: none; }

.blog-masthead {
  max-width: 56ch; margin: 0 auto 4rem; padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-rule); text-align: center;
}
.blog-masthead-eyebrow {
  font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-accent-ink);
  margin: 0 0 1.5rem; display: inline-flex; align-items: center; gap: 0.8rem;
}
.blog-masthead-eyebrow .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-rule); }
.blog-masthead-eyebrow > span:last-child { color: var(--color-quiet); }
.blog-masthead-title {
  font-family: var(--font-sans); font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--color-ink); margin: 0 0 1.25rem;
  text-wrap: balance;
}
.blog-masthead-dek {
  font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lead);
  line-height: 1.45; color: var(--color-body); margin: 0 auto; max-width: 46ch;
}

.blog-featured {
  display: block; position: relative; width: 100%;
  height: clamp(400px, 56vh, 620px); margin: 0 0 4rem;
  overflow: hidden; text-decoration: none; color: inherit;
  background: var(--color-surface-warm); border-radius: 10px; isolation: isolate;
}
.blog-featured-bg { position: absolute; inset: 0; z-index: 0; }
.blog-featured-bg img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04); transition: transform 1.2s var(--ease-soft), filter 0.6s ease;
  filter: saturate(0.94) contrast(1.03);
}
.blog-featured:hover .blog-featured-bg img { transform: scale(1); filter: none; }
.blog-featured-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20, 16, 12, 0.1) 0%, rgba(20, 16, 12, 0.55) 60%, rgba(20, 16, 12, 0.9) 100%);
}
.blog-featured-content { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; padding: clamp(1.75rem, 4vw, 3rem); max-width: 720px; }
.blog-featured-eyebrow {
  font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-on-frame-dim);
  display: inline-flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin: 0 0 1.25rem;
}
.blog-featured-eyebrow .latest-tag { background: var(--color-accent); color: #06323b; padding: 0.25rem 0.6rem; border-radius: 4px; letter-spacing: 0.08em; }
.blog-featured-eyebrow .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-on-frame-dim); }
.blog-featured-eyebrow .cat { color: var(--color-accent); }
.blog-featured-title {
  font-family: var(--font-sans); font-weight: 800; font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.1; letter-spacing: -0.02em; color: #fff; margin: 0 0 1rem; max-width: 26ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-featured-dek {
  font-family: var(--font-serif); font-style: italic; font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.45; color: var(--color-on-frame); margin: 0 0 1.25rem; max-width: 52ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-featured-cta {
  font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent);
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.blog-featured-cta .arrow { transition: transform 0.25s var(--ease-soft); }
.blog-featured:hover .blog-featured-cta .arrow { transform: translateX(5px); }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(2rem, 4vw, 3rem); }
.blog-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  padding: 1.25rem 0 0; margin: 0; border: none; border-top: 1px solid var(--color-rule);
  transition: border-color 0.3s var(--ease-soft);
}
.blog-card:hover { border-top-color: var(--color-accent); }
.blog-card-image {
  aspect-ratio: 4/3; overflow: hidden; background: var(--color-surface-warm);
  margin-bottom: 1.25rem; border-radius: 7px; position: relative;
}
.blog-card-image img {
  width: 100%; height: 100%; object-fit: cover; margin: 0; max-height: none; border-radius: 0;
  transition: transform 0.8s var(--ease-soft), filter 0.6s ease; filter: saturate(0.95) contrast(1.03);
}
.blog-card:hover .blog-card-image img { transform: scale(1.05); filter: none; }
.blog-card-eyebrow {
  font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-quiet);
  margin: 0 0 0.75rem; display: inline-flex; align-items: center; gap: 0.6rem;
}
.blog-card-eyebrow .cat { color: var(--color-accent-ink); }
.blog-card-eyebrow .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-quiet); }
.blog-card-title {
  font-family: var(--font-sans); font-weight: 700; font-size: 1.2rem; line-height: 1.22;
  letter-spacing: -0.01em; color: var(--color-ink); margin: 0 0 0.75rem; transition: color 0.2s;
}
.blog-card:hover .blog-card-title { color: var(--color-accent-ink); }
.blog-card-dek {
  font-family: var(--font-serif); font-size: 0.95rem; line-height: 1.5;
  color: var(--color-body); margin: 0 0 1rem; flex: 1;
}
.blog-card-arrow { font-family: var(--font-sans); font-size: 1.2rem; color: var(--color-accent-ink); align-self: flex-start; transition: transform 0.25s var(--ease-soft); }
.blog-card:hover .blog-card-arrow { transform: translateX(5px); }

@media (max-width: 720px) {
  .blog-list { padding-top: calc(var(--header-h) + 2.5rem); }
  .blog-masthead { margin-bottom: 3rem; }
  .blog-featured { height: clamp(320px, 50vh, 480px); margin-bottom: 3rem; }
  .blog-featured-content { padding: 1.5rem; }
}

/* ================================================================
   MOBILE — article
   ================================================================ */
@media (max-width: 720px) {
  .post-content .lead::first-letter { font-size: 3rem; }
  .post-content blockquote { font-size: 1.2rem; padding-left: 16px; }
}

:focus-visible { outline: 2px solid var(--color-accent-ink); outline-offset: 3px; border-radius: 2px; }

/* ================================================================
   BLOG INDEX (visa-ru keeps its own .list-page/.post-grid/.post-card
   markup — light-paper it here so /blog/ matches the editorial article.
   blog.css only loads on Section=blog → taxonomy/tag lists stay on the
   dark main.css treatment, untouched.)
   ================================================================ */
body:has(.list-page) { background: var(--color-paper); }
.list-page {
  position: relative;
  background: var(--color-paper);
  background-image: radial-gradient(rgba(40, 70, 110, 0.03) 1px, transparent 1px);
  background-size: 3px 3px;
  color: var(--color-body);
}
.list-page .breadcrumbs a { color: var(--color-quiet); }
.list-page .breadcrumbs a:hover { color: var(--color-accent-ink); }
.list-page .breadcrumbs li[aria-current="page"] { color: var(--color-ink); }
.list-header h1 {
  font-family: var(--font-sans); font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--color-ink);
}
.list-lead { font-family: var(--font-serif); font-style: italic; color: var(--color-body); }
.list-page > .content { color: var(--color-body); }
.post-card {
  background: var(--color-paper); border: 1px solid var(--color-rule);
  border-radius: 12px; padding: 0; overflow: hidden;
  transition: border-color 0.25s var(--ease-soft), box-shadow 0.25s;
}
.post-card:hover { border-color: var(--color-accent); box-shadow: 0 6px 20px rgba(14, 21, 37, 0.06); }
.post-card__link { display: block; padding: 20px 22px; text-decoration: none; }
.post-card__title {
  font-family: var(--font-sans); font-weight: 700; font-size: 1.2rem; line-height: 1.24;
  letter-spacing: -0.01em; color: var(--color-ink); margin: 0 0 0.5rem;
}
.post-card:hover .post-card__title { color: var(--color-accent-ink); }
.post-card__date {
  font-family: var(--font-sans); font-size: 0.76rem; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--color-quiet); margin: 0 0 0.6rem;
}
.post-card__summary { font-family: var(--font-serif); font-size: 0.95rem; line-height: 1.5; color: var(--color-body); margin: 0; }
.post-grid__empty { color: var(--color-quiet); }