/* Типографика статей блога поверх дизайн-системы KiTrip (bundle.min.css).
   Токены: акцент #df4402, тёмная тема body.dark_theme (переключается common.js). */

/* .header — position:fixed, height 62px (десктоп) / ~73px (мобильный).
   Верхний отступ должен перекрывать её высоту, иначе крошки и H1 уезжают под шапку. */
.blog-article{padding:110px 0 64px}
@media (max-width:768px){.blog-article{padding:100px 0 56px}}
.blog-article__inner{max-width:52rem}

.blog-article .crumb{font-family:Montserrat,sans-serif;font-size:.8rem;letter-spacing:.02em;
color:#8a8375;margin-bottom:1.6rem;display:flex;gap:.5rem;flex-wrap:wrap}
body.dark_theme .blog-article .crumb{color:#a8a8a8}
.blog-article .crumb a{color:#df4402;text-decoration:none}
.blog-article .crumb a:hover{text-decoration:underline}

/* .page_section h1 в bundle красит заголовок в цвет hero (#ecdac4) — на светлом
   фоне блога он сливается. Перебиваем цветом текста темы. */
.blog-article h1,
.page_section.blog-article h1{font-family:Oswald,sans-serif;text-transform:uppercase;
font-size:clamp(1.8rem,4.4vw,2.7rem);line-height:1.15;margin:0 0 1.3rem;letter-spacing:.01em;
color:#1a0b03}
body.dark_theme .blog-article h1,
body.dark_theme .page_section.blog-article h1{color:#f9f9f9}

.blog-article .answer{font-family:Montserrat,sans-serif;font-size:1.05rem;line-height:1.6;
margin:0 0 2rem;padding-left:1.1rem;border-left:3px solid #df4402}

.blog-article h2,
.page_section.blog-article h2{font-family:Oswald,sans-serif;text-transform:uppercase;
font-size:1.15rem;margin:2.6rem 0 .8rem;letter-spacing:.01em;color:#1a0b03}
body.dark_theme .blog-article h2,
body.dark_theme .page_section.blog-article h2{color:#f9f9f9}
.blog-article h3{font-family:Montserrat,sans-serif;font-weight:600;
font-size:1.02rem;margin:1.6rem 0 .5rem}
.blog-article p{font-family:Montserrat,sans-serif;font-size:1rem;line-height:1.7;
margin:0 0 1.05rem;color:inherit}
.blog-article ul,.blog-article ol{margin:0 0 1.2rem;padding-left:1.3rem;font-family:Montserrat,sans-serif}
.blog-article li{margin-bottom:.5rem}

.blog-article .tablewrap,.blog-article table{width:100%}
.blog-article table{border-collapse:collapse;margin:0 0 1.6rem;font-family:Montserrat,sans-serif;
font-size:.86rem;border:1px solid rgba(26,11,3,.12);border-radius:4px;overflow:hidden}
body.dark_theme .blog-article table{border-color:rgba(249,249,249,.15)}
.blog-article th,.page_section.blog-article th{text-align:left;padding:.6rem .8rem;
background:rgba(223,68,2,.08);font-weight:600;border-bottom:1px solid rgba(26,11,3,.12);color:#1a0b03}
body.dark_theme .blog-article th,
body.dark_theme .page_section.blog-article th{background:rgba(223,68,2,.15);
border-color:rgba(249,249,249,.15);color:#f9f9f9}
.blog-article td,.page_section.blog-article td{padding:.55rem .8rem;
border-bottom:1px solid rgba(26,11,3,.08);color:#1a0b03}
body.dark_theme .blog-article td,
body.dark_theme .page_section.blog-article td{border-color:rgba(249,249,249,.08);color:#f9f9f9}
.blog-article tr:last-child td{border-bottom:none}

.blog-article .qa{margin:0 0 1.3rem;font-family:Montserrat,sans-serif}
.blog-article .qa p:first-child{font-weight:600;margin-bottom:.35rem}
.blog-article .qa p:last-child{margin:0;opacity:.85}

.blog-article .hubgrid{margin:2rem 0 0;font-family:Montserrat,sans-serif}
.blog-article .hubgrid a{display:flex;gap:1rem;align-items:baseline;padding:1rem .2rem;
border-bottom:1px solid rgba(26,11,3,.1);text-decoration:none;color:inherit}
body.dark_theme .blog-article .hubgrid a{border-color:rgba(249,249,249,.1)}
.blog-article .hubgrid a:hover{color:#df4402}
.blog-article .hubgrid .f{color:#df4402;font-weight:600}

.blog-article .related{margin-top:3.5rem;padding-top:1.4rem;
border-top:2px solid currentColor;font-family:Montserrat,sans-serif}
.blog-article .related .lbl{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
opacity:.6;margin-bottom:.8rem}
.blog-article .related a{display:block;padding:.7rem .2rem;
border-bottom:1px solid rgba(26,11,3,.08);text-decoration:none;color:inherit}
body.dark_theme .blog-article .related a{border-color:rgba(249,249,249,.08)}
.blog-article .related a:hover{color:#df4402}

.blog-article .article-author{margin:2.5rem 0 0;padding:1rem 1.2rem;
background:rgba(223,68,2,.06);border:1px solid rgba(223,68,2,.25);border-radius:8px;
display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;font-family:Montserrat,sans-serif}
body.dark_theme .blog-article .article-author{background:rgba(223,68,2,.1)}
.blog-article .article-author a{color:#df4402;text-decoration:none;font-weight:600}
.blog-article .article-author a:hover{text-decoration:underline}
.blog-article .article-author .w{font-size:.85rem;opacity:.7}