/* Общий стиль лонгридов блога (/blog и /blog/{slug}).
   Палитра и типографика те же, что на /welcome и /kids: кремовый фон, акцент
   терракотовый, тело статьи — Newsreader, интерфейсные подписи — Hanken Grotesk.
   Файл отдаётся из /static, поэтому кэшируется браузером один раз на все статьи. */
:root{
  --bg:#f4f2ee; --panel:#faf9f6; --surface:#fff; --hair:#e6e2da;
  --text:#1b1a17; --ink:#2a2823; --text2:#5a564c; --muted:#79756c; --label:#a39b8d;
  --accent:#b8502e; --accent-h:#a3441f; --dark:#1b1a17;
  --serif:'Newsreader',Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%}

/* ── шапка ── */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);
  background:rgba(244,242,238,.85);border-bottom:1px solid rgba(0,0,0,.06)}
.nav-in{max-width:1080px;margin:0 auto;padding:15px 32px;display:flex;align-items:center;
  justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:28px;height:28px;border-radius:7px;display:block}
.brand b{font-weight:700;font-size:17px;letter-spacing:-.02em}
.brand .sec{font-size:13px;color:var(--label);font-weight:600;margin-left:2px;padding-left:12px;
  border-left:1px solid #d8d2c7}
.nav-r{display:flex;align-items:center;gap:24px}
.nav-l{font-size:14px;font-weight:500;color:var(--text2)}
.nav-l:hover{color:var(--text)}
.nav-cta{padding:9px 18px;border-radius:10px;background:var(--dark);color:var(--panel);
  font-size:14px;font-weight:600}
.nav-cta:hover{background:#000}

/* ── шапка статьи ── */
.head{max-width:760px;margin:0 auto;padding:52px 32px 0}
.crumb{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--label);flex-wrap:wrap}
.crumb a:hover{color:var(--text)}
.pill{display:inline-block;margin-top:20px;padding:6px 13px;border-radius:999px;background:#f6ece6;
  color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
h1{font-size:clamp(32px,4.4vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.09;margin-top:18px}
.dek{font-family:var(--serif);font-size:clamp(18px,2vw,20px);color:var(--text2);line-height:1.5;margin-top:18px}
.byline{display:flex;align-items:center;gap:13px;margin-top:26px;padding-bottom:26px;
  border-bottom:1px solid var(--hair)}
.ava{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#d98a5b,#e8c07a);flex-shrink:0}
.byline .who{font-size:14px;font-weight:700}
.byline .when{font-size:13px;color:var(--label);margin-top:2px}
.article-hero{margin-top:30px}
.article-hero img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:22px;
  box-shadow:0 18px 45px rgba(35,19,48,.16)}

/* ── тело ── */
.body{max-width:1080px;margin:0 auto;padding:44px 32px 20px;display:flex;gap:56px;align-items:flex-start}
.toc{width:225px;flex-shrink:0;position:sticky;top:88px}
.toc-h{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--label);
  margin-bottom:13px}
.toc-l{display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--hair)}
.toc-l a{padding:7px 0 7px 16px;font-size:14px;color:var(--muted);line-height:1.35}
.toc-l a:hover{color:var(--text)}
.toc-l a.active{margin-left:-2px;border-left:2px solid var(--accent);font-weight:600;color:var(--text)}

article{flex:1;min-width:0;max-width:680px}
article h2{font-size:clamp(24px,3vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.2;
  margin:44px 0 16px;scroll-margin-top:88px}
article h2:first-child{margin-top:0}
article h3{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:30px 0 10px}
article p{font-family:var(--serif);font-size:19px;line-height:1.68;color:var(--ink);margin-bottom:17px}
article p.lead{font-size:20px}
article ul,article ol{font-family:var(--serif);font-size:19px;line-height:1.62;color:var(--ink);
  margin:0 0 18px 22px}
article li{margin-bottom:9px}
article a.ln{color:var(--accent);border-bottom:1px solid rgba(184,80,46,.35)}
article a.ln:hover{border-bottom-color:var(--accent)}
article strong{font-family:'Hanken Grotesk',sans-serif;font-weight:700}

/* редакционные иллюстрации */
.article-art{margin:30px 0 38px}
.article-art img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:18px;
  border:1px solid rgba(27,26,23,.07)}
.article-art figcaption{font-size:13px;line-height:1.45;color:var(--label);margin-top:10px}
.article-art-dark figcaption{color:var(--muted)}

/* врезка-цитата / пример */
.note{background:var(--surface);border:1px solid var(--hair);border-left:3px solid var(--accent);
  border-radius:12px;padding:19px 21px;margin:0 0 28px}
.note .note-l{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-bottom:7px}
.note p{font-size:17.5px;margin-bottom:0;color:var(--ink)}
.note p+p{margin-top:11px}

/* таблица сравнения */
.tw{overflow-x:auto;margin:0 0 30px;border:1px solid var(--hair);border-radius:12px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--hair);vertical-align:top;line-height:1.45}
th{font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--label);
  background:#f7f5f1}
tr:last-child td{border-bottom:0}
td b{font-weight:700}

/* шаги */
.steps{display:flex;flex-direction:column;gap:13px;margin:0 0 30px}
.step{display:flex;gap:13px;align-items:flex-start}
.step .n{width:23px;height:23px;border-radius:50%;background:#f6ece6;color:var(--accent);display:flex;
  align-items:center;justify-content:center;flex-shrink:0;margin-top:3px;font-weight:700;font-size:13px}
.step .tx{font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--ink)}

/* CTA внутри текста */
.cta-box{border-radius:18px;background:var(--dark);color:var(--bg);padding:29px;margin:36px 0}
.cta-box .t{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.cta-box .s{font-size:15px;color:#a8a29a;margin-top:9px;line-height:1.5}
.cta-box a{display:inline-flex;align-items:center;gap:9px;margin-top:19px;padding:0 25px;height:49px;
  border-radius:12px;background:var(--accent);color:#fff;font-size:15px;font-weight:700}
.cta-box a:hover{background:var(--accent-h)}

/* FAQ на нативных details — без JS */
.faq{margin:14px 0 10px}
.faq details{border-top:1px solid var(--hair)}
.faq details:last-of-type{border-bottom:1px solid var(--hair)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 0;
  cursor:pointer;font-size:17.5px;font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .sign{flex-shrink:0;color:var(--label);transition:transform .18s ease}
.faq details[open] summary .sign{transform:rotate(45deg);color:var(--accent)}
.faq .ans{font-family:var(--serif);font-size:18px;line-height:1.62;color:var(--text2);padding:0 0 19px}
.faq .ans p+p{margin-top:12px}

/* подвал статьи */
.related{border-top:1px solid var(--hair);background:var(--panel);margin-top:40px}
.related-in{max-width:1080px;margin:0 auto;padding:52px 32px}
.related-h{font-size:23px;font-weight:800;letter-spacing:-.02em;margin-bottom:22px}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rcard .rc{width:100%;aspect-ratio:16/10;border-radius:14px}
.rcard .rt{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);
  margin-top:13px}
.rcard .rh{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-top:6px;line-height:1.28}
.rcard:hover .rh{color:var(--accent)}
.rcard .rr{font-size:13px;color:var(--label);margin-top:6px}

.foot{border-top:1px solid var(--hair);background:var(--panel)}
.foot-in{max-width:1080px;margin:0 auto;padding:34px 32px;display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:18px;font-size:13px;color:var(--label)}
.foot-in .links{display:flex;gap:22px}
.foot-in .links a:hover{color:var(--text)}

/* ── индекс блога ── */
.idx-head{max-width:1080px;margin:0 auto;padding:56px 32px 0}
.idx-head h1{max-width:16ch}
.idx-head .sub{font-family:var(--serif);font-size:19px;color:var(--text2);margin-top:16px;max-width:56ch;
  line-height:1.55}
.idx{max-width:1080px;margin:0 auto;padding:40px 32px 60px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:34px 26px}
.post .pc{width:100%;aspect-ratio:16/10;border-radius:16px}
.post .pt{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);
  margin-top:15px}
.post h2{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.26;margin-top:8px}
.post:hover h2{color:var(--accent)}
.post p{font-family:var(--serif);font-size:16px;line-height:1.55;color:var(--text2);margin-top:9px}
.post .pr{font-size:13px;color:var(--label);margin-top:10px}

@media (max-width:880px){
  .nav-r .nav-l{display:none}
  .nav-in,.head,.body,.related-in,.foot-in,.idx,.idx-head{padding-left:20px;padding-right:20px}
  .body{flex-direction:column;gap:0;padding-top:34px}
  .toc{display:none}
  article{max-width:100%}
  article p,article ul,article ol,.step .tx{font-size:17.5px}
  .article-hero{margin-top:24px}
  .article-hero img,.article-art img{border-radius:14px}
  .article-art{margin:24px 0 32px}
  .rgrid{grid-template-columns:1fr;gap:26px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}