/* AI-ERIKA — слой блога поверх /v2/erika.css (B1, 18.10.2026). Меняя файл — бампать ?v= в шаблоне. */
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;src:url(/blog/fonts/manrope-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;src:url(/blog/fonts/manrope-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+20BD,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Unbounded;font-style:normal;font-weight:500 800;font-display:swap;src:url(/blog/fonts/unbounded-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Unbounded;font-style:normal;font-weight:500 800;font-display:swap;src:url(/blog/fonts/unbounded-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+20BD,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* урок 28.07: strong внутри тёмного callout должен быть светлым */
.callout strong,.callout b{color:#fff}
.article-body img{height:auto;max-width:100%}
.article-body h2,.article-body h3{scroll-margin-top:84px}

/* строка автора и дат под h1 */
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:14px;color:var(--muted);margin:-4px 0 30px}
.art-meta .who{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:700;text-decoration:none}
.art-meta .who img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.art-meta .dot{display:none}
.art-meta time{white-space:nowrap}
.art-kind{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin:0 0 6px}

/* короткий ответ в начале */
.answer{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:16px;padding:20px 24px;margin:0 0 30px}
.answer .lbl{display:block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:8px}
.article-body .answer p{color:var(--text);margin-bottom:0}

/* оглавление */
.toc{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin:0 0 36px}
.toc summary{cursor:pointer;font-weight:800;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.toc summary::-webkit-details-marker{display:none}
.toc summary:after{content:"+";color:var(--acc);font-size:22px;line-height:1}
.toc[open] summary:after{content:"−"}
.toc ol{margin:14px 0 2px;padding:0;list-style:none;counter-reset:t}
.toc li{counter-increment:t;margin:0 0 8px;padding-left:30px;position:relative;font-size:15px;line-height:1.5}
.toc li:before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:2px;font:600 12px Unbounded,sans-serif;color:var(--acc)}
.toc a{color:var(--muted);text-decoration:none}.toc a:hover{color:var(--acc)}

/* CTA в середине */
.mid-cta{margin:40px 0;border:1px solid rgba(57,220,225,.35);border-radius:20px;padding:24px 26px;background:radial-gradient(500px 220px at 0% 0%,rgba(57,220,225,.14),transparent 70%),var(--card)}
.mid-cta .t,.article-body .mid-cta p.t{font:700 clamp(18px,1.8vw,22px)/1.3 Unbounded,sans-serif;color:var(--text);margin:0 0 8px}
.article-body .mid-cta p{color:var(--muted);font-size:15px;margin:0 0 16px}
.mid-cta .row,.cta-box .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-box .row{justify-content:center}
.article-body .mid-cta a.btn{color:#04282a;text-decoration:none}
.article-body .mid-cta a.soft,.cta-box a.soft{color:var(--acc);font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:3px}
.cta-box .soft-line{margin:18px 0 0;font-size:14px;color:var(--muted)}

/* блок эксперта */
.author-box{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:start;margin:56px 0 0;padding:26px;border:1px solid var(--line);border-radius:20px;background:var(--card)}
.author-box img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:2px solid rgba(57,220,225,.5)}
.author-box .name{font:700 18px/1.3 Unbounded,sans-serif;margin:2px 0 4px}
.author-box .role{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin:0 0 10px}
.author-box p{color:#c9cfd4;font-size:15px;line-height:1.7;margin:0 0 10px}
.author-box .facts{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.author-box .facts span{font-size:13px;font-weight:700;color:var(--text);background:var(--bg2);border:1px solid var(--line);border-radius:99px;padding:5px 12px;white-space:nowrap}
.author-box .links{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px}
.author-box .links a{color:var(--acc);text-decoration:none;font-weight:700}
.how-prepared{font-size:13px;color:var(--dim);margin:14px 0 0}

/* «Читайте также» */
.related{margin:56px 0 0}
.related>h2{font-size:clamp(22px,2.4vw,28px)}
.related .posts{margin-top:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}

/* шапка: кнопка не переносится */
.top .btn.sm{white-space:nowrap}
@media (max-width:760px){.top .btn.sm{margin-left:auto}}
@media (max-width:380px){.top .btn.sm{font-size:13px;padding:9px 12px}}

/* липкая кнопка — только мобилка */
.sticky-cta{display:none}
@media (max-width:760px){
  .sticky-cta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;gap:8px;align-items:center;justify-content:center;
    background:var(--acc);color:#04282a;font-weight:800;font-size:15px;line-height:1.25;text-align:center;text-decoration:none;padding:14px 16px;border-radius:14px;
    box-shadow:0 10px 30px rgba(0,0,0,.45);transform:translateY(140%);transition:transform .25s}
  .sticky-cta.on{transform:none}
  body.has-sticky .foot{padding-bottom:92px}
  .author-box{grid-template-columns:minmax(0,1fr);padding:22px 18px}
  .author-box img{width:72px;height:72px}
  .mid-cta{padding:20px 18px}
  .mid-cta .row a.btn,.cta-box .row a.btn{width:100%}
  .art-meta{font-size:13px}
  .page h1{overflow-wrap:break-word}
}