/* =====================================================================
CALTO BLOG — blog.css · версия 3.0 на бренде v3 «холодный» · 2026-10-07
Общие компоненты блога: шапка и подвал сайта (дополнения к tokens), обложки, лента,
карточки постов, фильтр рубрик, шапка статьи, оглавление, «Коротко», выноски, таблицы,
скриншоты, CTA, лид-магнит, FAQ, автор, шеринг, подписка, финальный призыв, прогресс чтения.
Правила:
— подключается ТОЛЬКО вместе с tokens.css (копия calto-brand-v3/tokens.css в этой папке);
— своих цветов, шрифтов, радиусов и теней здесь нет: только var(--…) из tokens v3;
— в :root ниже — только размеры раскладки блога (не цвета);
— сигнальные цвета — только как сигнал: коралл = ошибка/потеря, мята = «готово»/«как в Calto»,
подсолнух = «важно»/заглушка, синий = действие и совет. Тёплых подложек нет;
— поле (.field) одно на экран: обложка, CTA статьи на тёмном, финальный призыв на холодном.
Коралловой отметки (is-cold-accent) в блоге нет — она только на первом экране главной.
Подключение:
===================================================================== */
:root{
/* Раскладка блога (не цвета) */
--measure: 700px; /* колонка текста статьи (680–720) */
--toc-w: 240px; /* колонка оглавления */
--article-gap: var(--s-16);
--bar-h: 3px; /* полоса прогресса чтения */
--toc-top: calc(var(--header-h) + var(--s-5));
--anchor-gap: calc(var(--header-h) + var(--s-6));
}
/* =====================================================================
0. Шапка и подвал сайта — дополнения к tokens, как на главной home-v11
===================================================================== */
.site-header .logo img{height:24px}
.site-header .actions .in{padding:0 10px}
.site-header .actions .in:hover{color:var(--c-ink)}
.site-header nav a[aria-current="page"]{color:var(--c-ink);font-weight:var(--fw-medium)}
.site-footer a:hover{color:var(--c-ink)}
@media (max-width:560px){
.site-header .actions .in{display:none}
.site-footer .legal{flex-direction:column;gap:var(--s-1)}
}
/* =====================================================================
1. Полоса прогресса чтения
===================================================================== */
.read-progress{position:fixed;top:0;left:0;width:0;height:var(--bar-h);z-index:40;
background:var(--c-blue);border-radius:0 var(--r-pill) var(--r-pill) 0;
transition:width .08s linear}
/* =====================================================================
2. Хлебные крошки
===================================================================== */
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);list-style:none;
font-size:var(--fs-small);color:var(--c-muted);margin-bottom:var(--s-5)}
.breadcrumbs li{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.breadcrumbs li+li::before{content:"/";color:var(--c-line-strong)}
.breadcrumbs a{color:var(--c-muted)}
.breadcrumbs a:hover{color:var(--c-ink)}
.breadcrumbs [aria-current]{color:var(--c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46ch}
/* =====================================================================
3. Обложка — .cover из tokens (16:10) + поле. Три варианта, как в брендбуке §09:
.cover.field.is-cold · .cover.field.is-photo (фото под синей тонировкой) · .cover.field.is-ink
Текст обложки — короткая версия заголовка (до 6–8 слов), белым, внизу.
===================================================================== */
.cover{width:100%}
/* tokens задаёт img{max-width:100%} — фото поля шире рамки на 12%, иначе справа светлая полоса */
.field.is-photo .field-photo{max-width:none}
.cover > span:not([class]){display:block;max-width:92%} /* текст обложки */
.cover.is-sm{font-size:var(--fs-subhead);padding:var(--s-6)}
.cover.is-lg{font-size:var(--fs-h3-lg);padding:var(--s-8)}
.cover .logo-white{top:var(--s-6);left:var(--s-6)}
.cover.is-lg .logo-white{top:var(--s-7);left:var(--s-8)}
.cover .cover-cat{position:absolute;top:var(--s-6);right:var(--s-6);left:auto;
font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-medium);
text-transform:uppercase;letter-spacing:var(--ls-eyebrow);line-height:1.2;
background:var(--c-card);color:var(--c-blue-text);padding:var(--s-1) var(--s-3);border-radius:var(--r-pill)}
@media (max-width:560px){
.cover.is-lg{padding:var(--s-6)}
.cover.is-lg .logo-white{top:var(--s-6);left:var(--s-6)}
}
/* =====================================================================
4. Шапка статьи: крошки, рубрика, H1, лид, обложка, строка мета
===================================================================== */
.article-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);
gap:var(--s-6) var(--s-13);align-items:center;padding-top:var(--s-12)}
.article-hero .ah-text{min-width:0}
.article-hero .ah-cover{min-width:0}
.article-hero h1{font-size:var(--fs-h2);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);
margin:var(--s-4) 0 var(--s-5)}
.article-hero .lead{font-size:var(--fs-lead);max-width:var(--measure)}
.article-hero .article-meta{grid-column:1 / -1}
@media (max-width:1100px){
.article-hero{grid-template-columns:minmax(0,1fr);padding-top:var(--s-8)}
.article-hero .ah-cover{max-width:var(--measure)}
}
/* Рубрика: чип с отметкой */
.cat-chip{font-size:var(--fs-xs)}
.cat-chip .mark{width:9px;height:9px}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-6);
font-size:var(--fs-small);color:var(--c-muted);
padding:var(--s-4) 0;border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.article-meta .mi{display:inline-flex;align-items:center;gap:var(--s-2);min-width:0}
.article-meta .mi b{color:var(--c-ink);font-weight:var(--fw-semibold)}
.article-meta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;flex:none}
/* Подпись автора в шапке */
.byline{display:flex;align-items:center;gap:var(--s-3);min-width:0;margin-right:auto}
.ava{width:38px;height:38px;border-radius:var(--r-pill);flex:none;overflow:hidden;
display:grid;place-items:center;background:var(--c-blue-soft);color:var(--c-blue-text);
font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-small)}
.ava img{width:100%;height:100%;object-fit:cover}
.byline .who{min-width:0}
.byline .who b{display:block;font-size:var(--fs-small);color:var(--c-ink);font-weight:var(--fw-semibold)}
.byline .who > span{display:block;font-size:var(--fs-xs);color:var(--c-muted);line-height:1.5}
.byline .who .placeholder{font-size:var(--fs-xs);padding:1px 6px}
@media (max-width:760px){.byline{flex:1 1 100%}}
/* =====================================================================
5. Раскладка статьи: липкое оглавление + колонка текста
===================================================================== */
.article-layout{display:grid;gap:var(--article-gap);align-items:start;
grid-template-columns:var(--toc-w) minmax(0,var(--measure));justify-content:start;
padding-top:var(--s-12)}
.article-layout > *{min-width:0}
@media (max-width:1100px){
.article-layout{grid-template-columns:minmax(0,var(--measure));gap:var(--s-8);padding-top:var(--s-8)}
}
/* Липкое оглавление (десктоп) */
.toc-side{position:sticky;top:var(--toc-top);max-height:calc(100vh - var(--header-h) - var(--s-12));
overflow:auto;padding-right:var(--s-2)}
@media (max-width:1100px){.toc-side{display:none}}
.toc-title{display:block;font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:var(--fw-medium);
text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--c-muted);margin-bottom:var(--s-4)}
.toc-list{list-style:none;display:grid;gap:2px;font-size:var(--fs-small);border-left:1px solid var(--c-line)}
.toc-list a{display:block;padding:var(--s-2) var(--s-3);margin-left:-1px;color:var(--c-muted);
border-left:2px solid transparent;line-height:1.35;
transition:color var(--dur-fast),border-color var(--dur-fast)}
.toc-list a:hover{color:var(--c-ink)}
.toc-list a.is-active{color:var(--c-ink);font-weight:var(--fw-medium);border-left-color:var(--c-blue)}
/* Свёрнутое оглавление (до 1100 px) */
.toc-mobile{display:none;background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-lg);
box-shadow:var(--shadow);padding:0 var(--s-5)}
@media (max-width:1100px){.toc-mobile{display:block}}
.toc-mobile > summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
gap:var(--s-4);padding:var(--s-4) 0;font-family:var(--font-head);font-weight:var(--fw-semibold);
color:var(--c-ink);font-size:var(--fs-body)}
.toc-mobile > summary::-webkit-details-marker{display:none}
.toc-mobile > summary::after{content:"";width:9px;height:9px;flex:none;
border-right:2px solid var(--c-muted);border-bottom:2px solid var(--c-muted);
transform:rotate(45deg) translateY(-3px);transition:transform var(--dur-fast)}
.toc-mobile[open] > summary::after{transform:rotate(-135deg) translateY(-1px)}
.toc-mobile .toc-list{margin-bottom:var(--s-4)}
/* =====================================================================
6. Типографика тела статьи
===================================================================== */
.article-body{max-width:var(--measure);font-size:var(--fs-body-lg);line-height:1.72;color:var(--c-text)}
.article-body > * + *{margin-top:var(--s-5)}
.article-body h2{font-size:var(--fs-h3-lg);line-height:1.12;letter-spacing:var(--ls-h2);
margin-top:var(--s-16);scroll-margin-top:var(--anchor-gap)}
.article-body h3{font-size:var(--fs-h3);line-height:var(--lh-h3);margin-top:var(--s-10);
scroll-margin-top:var(--anchor-gap)}
.article-body h2 + p,.article-body h3 + p{margin-top:var(--s-4)}
.article-body [id]{scroll-margin-top:var(--anchor-gap)}
.article-body p{color:var(--c-text)}
.article-body strong,.article-body b{color:var(--c-ink);font-weight:var(--fw-semibold)}
/* Ссылки в тексте (абзац, пункт списка, ячейка, подпись); кнопки и служебные ссылки — без подчёркивания */
.article-body :is(p, li, td, figcaption) a:not(.btn){color:var(--c-blue-text);text-decoration:underline;text-underline-offset:3px;
text-decoration-thickness:1px;text-decoration-color:var(--c-line-strong)}
.article-body :is(p, li, td, figcaption) a:not(.btn):hover{text-decoration-color:var(--c-blue)}
.article-body hr{border:0;border-top:1px solid var(--c-line);margin-top:var(--s-12)}
.article-body code{font-family:var(--font-mono);font-size:.88em;color:var(--c-ink);
background:var(--c-surface);border-radius:var(--r-xs);padding:1px 6px}
/* Обычные списки: буллет — отметка из логотипа; номера — моно */
.article-body ul:not([class]){list-style:none;display:grid;gap:var(--s-3);padding-left:0}
.article-body ul:not([class]) > li{position:relative;padding-left:var(--s-6)}
.article-body ul:not([class]) > li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;
background:var(--c-blue);clip-path:polygon(var(--mark-shape))}
.article-body ol:not([class]){display:grid;gap:var(--s-3);padding-left:var(--s-6)}
.article-body ol:not([class]) > li::marker{font-family:var(--font-mono);font-size:.85em;color:var(--c-blue-text)}
.article-body li{color:var(--c-text)}
.article-body .small,.article-body .muted{font-size:var(--fs-small)}
/* =====================================================================
7. «Коротко» — ключевые выводы
===================================================================== */
.takeaways{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-xl);
box-shadow:var(--shadow);padding:var(--s-7) var(--s-8)}
.article-body .takeaways h2{font-size:var(--fs-h3);line-height:var(--lh-h3);margin:0 0 var(--s-5);
display:flex;align-items:center;gap:var(--s-3)}
.takeaways h2 .mark{width:14px;height:14px}
.takeaways .mark-list{gap:var(--s-3)}
.takeaways .mark-list li{font-size:var(--fs-card);line-height:1.6}
@media (max-width:560px){.takeaways{padding:var(--s-6) var(--s-5)}}
/* =====================================================================
8. Выноски: Совет / Важно / Типичная ошибка / Как это в Calto
Белая карточка, слева полоса сигнального цвета, ярлык моно с отметкой.
===================================================================== */
.callout{--cl-accent:var(--c-blue);--cl-text:var(--c-blue-text);
position:relative;background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-lg);
box-shadow:var(--shadow-xs);padding:var(--s-5) var(--s-6) var(--s-5) var(--s-7);overflow:hidden}
.callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cl-accent)}
.callout .cl-label{display:flex;align-items:center;gap:var(--s-2);font-family:var(--font-mono);
font-size:var(--fs-xs);font-weight:var(--fw-medium);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
color:var(--cl-text);margin-bottom:var(--s-2)}
.callout .cl-label::before{content:"";width:10px;height:10px;flex:none;background:var(--cl-accent);
clip-path:polygon(var(--mark-shape))}
.callout p{font-size:var(--fs-card);line-height:1.65;color:var(--c-text)}
.callout p + p{margin-top:var(--s-3)}
.callout b{color:var(--c-ink)}
.callout-tip{--cl-accent:var(--c-blue);--cl-text:var(--c-blue-text)}
.callout-warn{--cl-accent:var(--c-sun);--cl-text:var(--c-sun-text)}
.callout-danger{--cl-accent:var(--c-coral);--cl-text:var(--c-coral-text)}
.callout-calto{--cl-accent:var(--c-mint);--cl-text:var(--c-mint-text)}
/* Цитата практика — курсив-акцент, как цитата на главной */
.quote{position:relative;padding:var(--s-2) 0 var(--s-2) var(--s-7)}
.quote::before{content:"";position:absolute;left:0;top:var(--s-2);width:14px;height:14px;
background:var(--c-blue);clip-path:polygon(var(--mark-shape))}
.quote p{font-family:var(--font-accent);font-style:italic;font-weight:var(--fw-regular);
font-stretch:var(--accent-stretch);font-size:var(--fs-h3-lg);line-height:1.22;letter-spacing:-.01em;color:var(--c-ink)}
.quote p .placeholder{font-family:var(--font-body);font-style:normal;font-stretch:normal;letter-spacing:0}
.quote footer{margin-top:var(--s-3);font-size:var(--fs-small);color:var(--c-muted)}
/* =====================================================================
9. Скриншот продукта: реальный экран с подписью / на поле / заглушка
===================================================================== */
.article-body > .shot{margin-top:var(--s-7)}
.article-body > .shot + *{margin-top:var(--s-7)}
.shot .screen{border-radius:var(--r-md)}
.shot figcaption{margin-top:var(--s-3);font-size:var(--fs-small);line-height:1.5;color:var(--c-muted)}
/* На поле: экран уходит за нижний край, как на главной */
.shot .shot-stage{border-radius:var(--r-2xl);padding:var(--s-8) var(--s-8) 0;display:flex;justify-content:center;align-items:flex-start}
.shot .shot-stage.is-surface{background:var(--c-surface);border:1px solid var(--c-line)}
.shot .shot-stage .screen{width:100%;border-radius:var(--r-md) var(--r-md) 0 0;border-bottom:0}
.shot .shot-stage .phone-screen{width:240px;margin-bottom:calc(-1 * var(--s-10))}
.shot .shot-stage.is-phone{padding-bottom:0;overflow:hidden;max-height:420px}
@media (max-width:560px){.shot .shot-stage{padding:var(--s-5) var(--s-5) 0}.shot .shot-stage .phone-screen{width:200px}}
/* Заглушка: скриншота ещё нет */
.shot .shot-box{display:grid;place-items:center;align-content:center;gap:var(--s-3);text-align:center;
min-height:220px;padding:var(--s-10) var(--s-6);background:var(--c-surface);
border:1px dashed var(--c-line-strong);border-radius:var(--r-lg)}
/* =====================================================================
10. Таблицы, чеклисты, шаги
===================================================================== */
.table-wrap{overflow-x:auto;background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-lg);
box-shadow:var(--shadow)}
.t{width:100%;border-collapse:collapse;font-size:var(--fs-card);line-height:1.5;min-width:560px}
.t th,.t td{text-align:left;padding:var(--s-3) var(--s-4);vertical-align:top;color:var(--c-text);
border-bottom:1px solid var(--c-line-soft)}
.t thead th{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-medium);text-transform:uppercase;
letter-spacing:var(--ls-eyebrow);color:var(--c-muted);background:var(--c-surface);white-space:nowrap}
.t tbody tr:last-child td{border-bottom:0}
.t tbody th,.t td:first-child{color:var(--c-ink);font-weight:var(--fw-medium)}
.t .is-own td{background:var(--c-blue-soft)}
.t .yes{color:var(--c-mint-text);font-weight:var(--fw-semibold)}
.t .no{color:var(--c-muted)}
.table-note{font-size:var(--fs-small);line-height:1.55;color:var(--c-muted)}
.scroll-hint{display:none;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--c-muted)}
@media (max-width:760px){.article-body .scroll-hint{display:block;margin-top:var(--s-2)}}
/* Чеклист с квадратами (печать, PDF) */
.todo-list{list-style:none;display:grid;gap:var(--s-3);padding-left:0}
.todo-list li{position:relative;padding-left:var(--s-8);font-size:var(--fs-card);line-height:1.6;color:var(--c-text)}
.todo-list li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;
border:1.5px solid var(--c-line-strong);border-radius:var(--r-xs);background:var(--c-card)}
.todo-list li b{color:var(--c-ink);font-weight:var(--fw-semibold)}
/* Нумерованные шаги: номер моно на мягком синем, как в шагах сценария на главной */
.steps{list-style:none;display:grid;gap:var(--s-4);padding-left:0;counter-reset:st}
.steps li{position:relative;padding-left:var(--s-12);font-size:var(--fs-card);line-height:1.6;color:var(--c-text)}
.steps li::before{counter-increment:st;content:counter(st, decimal-leading-zero);position:absolute;left:0;top:1px;
font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-medium);line-height:1;
color:var(--c-blue-text);background:var(--c-blue-soft);border-radius:var(--r-xs);padding:5px 7px}
.steps li b{display:block;color:var(--c-ink);font-weight:var(--fw-semibold);margin-bottom:2px}
/* =====================================================================
11. CTA внутри текста
.cta-strip — мягкий/средний: белая карточка
.cta-strip.field.is-ink.on-field — жёсткий (демо): тёмный Calto
===================================================================== */
.cta-strip{display:flex;align-items:center;gap:var(--s-5) var(--s-6);flex-wrap:wrap;
background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-xl);
box-shadow:var(--shadow);padding:var(--s-6) var(--s-7)}
.cta-strip .cs-body{flex:1 1 260px;min-width:0}
.cta-strip .cs-k{display:block;font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-medium);
text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--c-blue-text);margin-bottom:var(--s-2)}
.cta-strip b{display:block;font-family:var(--font-head);font-size:var(--fs-h3);font-weight:var(--fw-semibold);
line-height:1.2;letter-spacing:var(--ls-h3);color:var(--c-ink);margin-bottom:var(--s-2)}
.cta-strip p{font-size:var(--fs-card);line-height:1.6;color:var(--c-text)}
.cta-strip .btn{flex:none}
.cta-strip.field{background:var(--field);border:0;box-shadow:var(--shadow-lg);padding:var(--s-8)}
.cta-strip.field .cs-k{color:var(--c-on-dark-muted)}
.cta-strip.field b{color:var(--c-on-dark);font-size:var(--fs-subhead);letter-spacing:-.02em}
.cta-strip.field p{color:var(--c-on-dark-muted)}
.cta-strip .form-row{flex:1 1 280px}
@media (max-width:560px){
.cta-strip{padding:var(--s-6) var(--s-5)}
.cta-strip .btn{width:100%}
}
/* Лид-магнит / блок скачивания */
.download{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-6);align-items:start;
background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-2xl);
padding:var(--s-7);box-shadow:var(--shadow)}
.dl-file{width:84px;height:104px;flex:none;border-radius:var(--r-md);display:grid;place-items:center;
background:var(--c-blue-soft);color:var(--c-blue-text);font-family:var(--font-mono);font-size:var(--fs-small);
font-weight:var(--fw-medium);letter-spacing:var(--ls-eyebrow);position:relative;overflow:hidden}
.dl-file::after{content:"";position:absolute;top:0;right:0;width:18px;height:18px;background:var(--c-blue);
clip-path:polygon(var(--mark-shape))}
.article-body .download h3,.article-body .author-box h3{margin-top:0}
.download h3{margin-bottom:var(--s-2)}
.download p{font-size:var(--fs-card);line-height:1.6;color:var(--c-text)}
.dl-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
.dl-note{margin-top:var(--s-3);font-size:var(--fs-xs);line-height:1.5;color:var(--c-muted)}
@media (max-width:560px){.download{grid-template-columns:1fr;padding:var(--s-6) var(--s-5)}.download .dl-file{display:none}.dl-actions .btn{width:100%}}
/* Форма: почта + кнопка */
.form-row{display:flex;gap:var(--s-2);flex-wrap:wrap}
.form-row input{flex:1 1 200px;min-width:0;font-family:var(--font-body);font-size:var(--fs-body);color:var(--c-ink);
background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-pill);padding:12px var(--s-5)}
.form-row input::placeholder{color:var(--c-faint)}
.form-row input:focus-visible{outline:none;box-shadow:var(--ring-focus);border-color:var(--c-blue)}
.form-consent{margin-top:var(--s-3);font-size:var(--fs-xs);line-height:1.5;color:var(--c-muted)}
.form-consent a{text-decoration:underline;text-underline-offset:2px}
@media (max-width:560px){.form-row .btn{width:100%}}
/* =====================================================================
12. FAQ — как на главной
===================================================================== */
.faq{display:grid;gap:var(--s-3);max-width:var(--measure)}
.faq details{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-lg);
box-shadow:var(--shadow);padding:0 var(--s-6)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
gap:var(--s-4);padding:var(--s-5) 0;font-family:var(--font-head);font-weight:var(--fw-semibold);
font-size:var(--fs-body-lg);line-height:1.35;letter-spacing:-.015em;color:var(--c-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:9px;height:9px;flex:none;
border-right:2px solid var(--c-muted);border-bottom:2px solid var(--c-muted);
transform:rotate(45deg) translateY(-3px);transition:transform var(--dur-fast)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.faq details > p{padding:0 0 var(--s-5);font-size:var(--fs-card);line-height:1.65;color:var(--c-text);max-width:62ch}
.faq details > p + p{margin-top:calc(-1 * var(--s-2))}
@media (max-width:560px){.faq details{padding:0 var(--s-5)}}
/* =====================================================================
13. Автор и шеринг
===================================================================== */
.author-box{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-6);
background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-2xl);
padding:var(--s-7);box-shadow:var(--shadow)}
.author-box .ava{width:72px;height:72px;font-size:var(--fs-h3)}
.author-box h3{margin-bottom:var(--s-1)}
.author-box .role{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-medium);
text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--c-blue-text);margin-bottom:var(--s-3)}
.author-box p{font-size:var(--fs-card);line-height:1.6;color:var(--c-text)}
.author-box .links{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-4);font-size:var(--fs-small)}
.author-box .links a{color:var(--c-blue-text)}
.author-box .checked{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--c-line-soft);
font-size:var(--fs-xs);line-height:1.5;color:var(--c-muted)}
@media (max-width:560px){.author-box{grid-template-columns:1fr;padding:var(--s-6) var(--s-5)}}
.share{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2)}
.share > span{font-size:var(--fs-small);color:var(--c-muted);margin-right:var(--s-2)}
.share a{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-small);font-weight:var(--fw-medium);
color:var(--c-ink);background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-pill);
padding:7px var(--s-4)}
.share a:hover{border-color:var(--c-line-strong)}
.share svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* =====================================================================
14. Карточки постов, похожие статьи, главная статья, лента
===================================================================== */
.post-card{display:flex;flex-direction:column;background:var(--c-card);border:1px solid var(--c-line);
border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--shadow);min-width:0;padding:var(--s-2);
transition:box-shadow var(--dur-fast),transform var(--dur-fast),border-color var(--dur-fast)}
.post-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:var(--c-line-strong)}
.post-card .cover{border-radius:var(--r-lg)}
.post-card .pc-in{padding:var(--s-5) var(--s-4) var(--s-4);display:flex;flex-direction:column;gap:var(--s-3);flex:1}
.pc-cat{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-medium);text-transform:uppercase;
letter-spacing:var(--ls-eyebrow);color:var(--c-blue-text)}
.post-card h3{font-size:var(--fs-h3);line-height:1.22}
.post-card p{font-size:var(--fs-card);line-height:1.55;color:var(--c-text);flex:1}
.pc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);margin-top:auto;padding-top:var(--s-2);
font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--c-muted)}
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6) var(--grid-gap)}
@media (max-width:980px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.post-grid{grid-template-columns:1fr}}
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
@media (max-width:980px){.related{grid-template-columns:1fr}}
/* Главная статья ленты */
.featured{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:var(--s-12);align-items:center;
background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-3xl);
padding:var(--s-3) var(--s-3) var(--s-3) var(--s-12);box-shadow:var(--shadow)}
.featured .f-text{padding:var(--s-8) 0}
.featured h2{font-size:var(--fs-h3-lg);line-height:1.1;letter-spacing:-.025em;margin:var(--s-3) 0 var(--s-4)}
.featured h2 a:hover{color:var(--c-blue-text)}
.featured p{font-size:var(--fs-body-lg);line-height:1.6;color:var(--c-text);margin-bottom:var(--s-5)}
.featured .f-meta{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin-bottom:var(--s-6);
font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--c-muted)}
.featured .cover{border-radius:var(--r-2xl)}
@media (max-width:980px){
.featured{grid-template-columns:1fr;gap:var(--s-6);padding:var(--s-2) var(--s-2) var(--s-7)}
.featured .f-text{order:2;padding:0 var(--s-5)}
}
/* Панель рубрик */
.filters-bar{position:sticky;top:var(--header-h);z-index:10;padding:var(--s-4) 0;margin:var(--s-12) 0 var(--s-8);
background:color-mix(in srgb, var(--c-bg) 88%, transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid var(--c-line)}
.filters-bar .container{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.filters-bar .fb-label{font-family:var(--font-mono);font-size:var(--fs-xs);text-transform:uppercase;
letter-spacing:var(--ls-eyebrow);color:var(--c-muted);flex:none}
@media (max-width:980px){.filters-bar{position:static}}
.filters{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.filters .chip{cursor:pointer;font-family:var(--font-body);font-size:var(--fs-small);padding:7px var(--s-4);
transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast)}
.filters .chip:hover{border-color:var(--c-line-strong);color:var(--c-ink)}
.filters .chip.is-on{background:var(--c-ink);color:var(--c-on-dark);border-color:var(--c-ink)}
.cat-anchor{display:block;scroll-margin-top:calc(var(--header-h) * 2 + var(--s-6))}
.post-card[hidden]{display:none}
.load-more{display:flex;justify-content:center;margin-top:var(--s-10)}
.empty-cat{display:none;text-align:center;padding:var(--s-10) 0;color:var(--c-muted)}
/* Подписка — белая карточка (поле на этом экране — финальный призыв ниже) */
.newsletter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:var(--s-10);align-items:center;
background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-3xl);
padding:var(--s-12);box-shadow:var(--shadow)}
.newsletter h2{font-size:var(--fs-h3-lg);line-height:1.1;letter-spacing:-.025em;margin-bottom:var(--s-3)}
.newsletter p{font-size:var(--fs-body-lg);line-height:1.6;color:var(--c-text)}
.newsletter .nl-todo{margin-top:var(--s-4)}
.newsletter .form-consent{font-size:var(--fs-xs)}
@media (max-width:980px){.newsletter{grid-template-columns:1fr;gap:var(--s-7);padding:var(--s-8)}}
@media (max-width:560px){.newsletter{padding:var(--s-6) var(--s-5);border-radius:var(--r-2xl)}}
/* =====================================================================
15. Финальный призыв — холодное поле, как финал главной
===================================================================== */
.final{margin-top:var(--section-gap)}
.final .block-cta{padding:88px var(--s-7)}
.final h2{margin-bottom:var(--s-8)}
.final .ctas{display:flex;gap:var(--s-3);justify-content:center;flex-wrap:wrap}
.final-note{text-align:center;max-width:560px;margin:var(--s-7) auto 0;color:var(--c-text);
font-size:var(--fs-body-lg);text-wrap:balance}
.final-fine{text-align:center;font-size:var(--fs-small);color:var(--c-muted);margin:var(--s-3) auto 0}
@media (max-width:560px){
.final .block-cta{padding:56px var(--s-5)}
.final .ctas .btn{width:100%}
}
/* =====================================================================
16. Блоки отдельных шаблонов (тоже только на переменных)
===================================================================== */
/* Лента: шапка */
.blog-hero{padding-top:var(--s-16)}
.blog-hero h1{max-width:var(--container-narrow);margin-bottom:var(--s-5)}
.blog-hero .lead{max-width:var(--container-narrow)}
/* Гайд: «что должно получиться» и карточка шага */
.outcome{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap)}
@media (max-width:640px){.outcome{grid-template-columns:1fr}}
.outcome .card{padding:var(--s-6)}
.outcome .card h3{margin:var(--s-4) 0 var(--s-2);font-size:var(--fs-body-lg)}
.outcome .card p{line-height:1.55}
.step-card{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);
padding:var(--s-2) var(--s-6)}
.step-card .sc-row{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:var(--s-4);align-items:start;
padding:var(--s-4) 0;border-bottom:1px solid var(--c-line-soft)}
.step-card .sc-row:last-child{border-bottom:0}
.step-card .sc-k{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-medium);text-transform:uppercase;
letter-spacing:var(--ls-eyebrow);color:var(--c-muted);padding-top:3px}
.step-card .sc-k.is-error{color:var(--c-coral-text)}
.step-card .sc-v{font-size:var(--fs-card);line-height:1.6;color:var(--c-text)}
@media (max-width:560px){.step-card{padding:var(--s-1) var(--s-5)}.step-card .sc-row{grid-template-columns:1fr;gap:var(--s-1)}}
/* Листикл: пункт, номер, теги, «на что смотреть», плюсы/минусы */
.tool{border-top:1px solid var(--c-line);padding-top:var(--s-10);margin-top:var(--s-12)}
.article-body .tool > h2:first-child,.article-body .tool > .tool-num + h2{margin-top:0}
.article-body .tool > h2{scroll-margin-top:calc(var(--anchor-gap) + var(--s-10))}
.tool > * + *{margin-top:var(--s-5)}
.article-body .tool h3{margin-top:var(--s-6);font-size:var(--fs-body-lg)}
.tool-num{display:block;width:max-content;font-family:var(--font-mono);font-size:var(--fs-body);font-weight:var(--fw-medium);
color:var(--c-blue-text);background:var(--c-blue-soft);border-radius:var(--r-sm);padding:3px var(--s-2);
margin-bottom:var(--s-3);letter-spacing:0;line-height:1.4}
.tool-tags{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.feature{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-4);align-items:start;
background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--shadow-xs)}
.feature b{display:block;font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-medium);text-transform:uppercase;
letter-spacing:var(--ls-eyebrow);color:var(--c-muted);margin-bottom:var(--s-1)}
.feature p{font-size:var(--fs-card);line-height:1.6;color:var(--c-text)}
.proscons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap)}
@media (max-width:640px){.proscons{grid-template-columns:1fr}}
.proscons .pc{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--shadow-xs)}
.proscons h4{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-medium);text-transform:uppercase;
letter-spacing:var(--ls-eyebrow);margin:0 0 var(--s-3);display:flex;align-items:center;gap:var(--s-2)}
.proscons h4::before{content:"";width:10px;height:10px;flex:none;clip-path:polygon(var(--mark-shape))}
.proscons .is-plus h4{color:var(--c-mint-text)}.proscons .is-plus h4::before{background:var(--c-mint)}
.proscons .is-minus h4{color:var(--c-coral-text)}.proscons .is-minus h4::before{background:var(--c-coral)}
.article-body .proscons ul{list-style:none;display:grid;gap:var(--s-2);padding-left:0;margin:0}
.article-body .proscons ul > li{position:relative;padding-left:var(--s-4);font-size:var(--fs-card);line-height:1.55}
.article-body .proscons ul > li::before{content:"";position:absolute;left:0;top:.75em;width:7px;height:2px;
background:var(--c-line-strong);clip-path:none}
/* Сравнение: карточка системы, «для кого», профили */
.vendor{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-2xl);padding:var(--s-7);box-shadow:var(--shadow)}
.vendor.is-own{border-color:var(--c-blue);box-shadow:var(--shadow-lg)}
.article-body .vendor > h2:first-child{margin-top:0;display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.vendor > * + *{margin-top:var(--s-4)}
.article-body .vendor h3{margin-top:var(--s-5);font-size:var(--fs-body-lg)}
.v-num{display:inline-block;font-family:var(--font-mono);font-size:var(--fs-small);font-weight:var(--fw-medium);letter-spacing:0;
color:var(--c-muted);background:var(--c-surface);border-radius:var(--r-sm);padding:3px var(--s-2);line-height:1.4}
.vendor.is-own .v-num{color:var(--c-blue-text);background:var(--c-blue-soft)}
.v-meta{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.v-for{background:var(--c-surface);border-radius:var(--r-md);padding:var(--s-4) var(--s-5);
font-size:var(--fs-card);line-height:1.6;color:var(--c-text)}
.v-for b{color:var(--c-ink)}
@media (max-width:560px){.vendor{padding:var(--s-6) var(--s-5)}}
.profiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
@media (max-width:860px){.profiles{grid-template-columns:1fr}}
.profiles .card{padding:var(--s-6)}
.profiles .card h3{margin:var(--s-4) 0 var(--s-2);font-size:var(--fs-body-lg)}
.profiles .card p{line-height:1.55}
/* Широкая таблица: на широком экране разворачивается под оглавление */
.table-wrap.is-wide .t{min-width:880px}
.table-wrap.is-wide .t thead th{white-space:normal;line-height:1.35}
@media (min-width:1180px){
/* position+z-index: таблица перекрывает липкое оглавление, пока она на экране */
.table-wrap.is-wide{position:relative;z-index:2;margin-left:calc(-1 * (var(--toc-w) + var(--article-gap)));
width:calc(100% + var(--toc-w) + var(--article-gap))}
.table-wrap.is-wide + .scroll-hint + .table-note{margin-left:calc(-1 * (var(--toc-w) + var(--article-gap)))}
}
/* Шаблон документа: блок скачивания, заполненный пример */
.dl-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-8);align-items:center;
background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-2xl);box-shadow:var(--shadow);padding:var(--s-8)}
.article-body .dl-hero h2{font-size:var(--fs-h3-lg);line-height:1.12;margin:0 0 var(--s-3)}
.dl-hero p{font-size:var(--fs-card);line-height:1.6;color:var(--c-text)}
.dl-hero .dl-file{width:120px;height:150px;font-size:var(--fs-body)}
@media (max-width:760px){.dl-hero{grid-template-columns:1fr;padding:var(--s-6) var(--s-5)}.dl-hero .dl-file{display:none}.dl-hero .dl-actions .btn{width:100%}}
.example{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);
padding:var(--s-2) var(--s-6)}
.example .ex-row{display:grid;grid-template-columns:11em minmax(0,1fr);gap:var(--s-4);padding:var(--s-3) 0;
font-size:var(--fs-card);line-height:1.55;border-bottom:1px solid var(--c-line-soft)}
.example .ex-row:last-child{border-bottom:0}
.example .ex-k{font-family:var(--font-mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
color:var(--c-muted);padding-top:3px}
.example .ex-v{color:var(--c-ink);font-weight:var(--fw-medium)}
@media (max-width:560px){.example{padding:var(--s-1) var(--s-5)}.example .ex-row{grid-template-columns:1fr;gap:2px}}
/* =====================================================================
17. Мелочи
===================================================================== */
.section-sm{padding-top:var(--s-12)}
.measure{max-width:var(--measure)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ---------- лента без статей (запуск) ---------- */
.blog-empty{max-width:760px;margin:0 auto;text-align:center;display:grid;justify-items:center;gap:14px;padding:var(--s-12) var(--s-6);border:1px dashed var(--c-line-strong);border-radius:var(--r-2xl);background:var(--c-card)}
.blog-empty .be-mark{width:56px;height:56px;border-radius:16px;background:var(--c-blue-soft);display:grid;place-items:center}
.blog-empty .be-mark svg{width:26px;height:26px;stroke:var(--c-blue-text);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.blog-empty h2{margin:0}
.blog-empty p{max-width:560px;margin:0;color:var(--c-text)}
.blog-empty .be-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px}
/* ---------- переключатель языков (как на главной и лендингах) ---------- */
.lang-menu{position:relative}
.lang-menu summary{list-style:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;border-radius:var(--r-pill);font-size:13.5px;font-weight:600;letter-spacing:.04em;color:var(--c-text);cursor:pointer;user-select:none}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary:hover,.lang-menu[open] summary{background:var(--c-line-soft);color:var(--c-ink)}
.lang-menu summary svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lang-menu[open] summary svg{transform:rotate(180deg)}
.lang-menu ul{position:absolute;right:0;top:calc(100% + 6px);min-width:180px;margin:0;padding:6px;list-style:none;background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md);box-shadow:var(--shadow-lg);z-index:40;display:grid;gap:2px}
.lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:8px;font-size:14.5px;color:var(--c-ink);text-decoration:none}
.lang-menu a:hover{background:var(--c-surface)}
.lang-menu a small{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--c-muted)}
.lang-menu a[aria-current="page"]{font-weight:600;background:var(--c-blue-soft)}
.lang-menu a[aria-current="page"] small{color:var(--c-blue-text)}