/* ============================================================
   SOYUZ — BLOG styles (uses tokens from styles.css)
   ============================================================ */

/* ---- simplified blog header reuses .nav / header from styles.css ---- */

/* ---- BLOG INDEX ---- */
.blog-hero{padding:clamp(48px,7vw,90px) 0 clamp(28px,4vw,44px)}
.blog-hero .kicker{display:block;margin-bottom:16px}
.blog-hero h1{font-family:var(--serif);font-weight:430;font-optical-sizing:auto;letter-spacing:-0.02em;
  line-height:1.04;font-size:clamp(38px,6vw,68px)}
.blog-hero h1 em{font-style:italic;color:var(--accent-ink)}
.blog-hero p{margin-top:18px;font-size:clamp(17px,2vw,20px);color:var(--ink-2);max-width:62ch;line-height:1.6;text-wrap:pretty}

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:clamp(48px,6vw,80px)}
.post-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);padding:26px 26px 24px;transition:border-color .25s,transform .25s,box-shadow .25s}
.post-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-card)}
.post-card .pc-cat{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
.post-card h2{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.22;letter-spacing:-0.01em;margin:12px 0 10px;text-wrap:balance}
.post-card p{font-size:14.5px;color:var(--ink-2);line-height:1.55;flex:1;text-wrap:pretty}
.post-card .pc-meta{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:18px;display:flex;gap:10px;align-items:center}
.post-card .pc-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-3)}

/* ---- ARTICLE ---- */
.article{padding:clamp(28px,4vw,52px) 0 clamp(56px,7vw,96px)}
.article-wrap{max-width:760px}
.crumbs{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-bottom:28px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.crumbs a:hover{color:var(--accent-ink)}
.crumbs .sep{opacity:.5}
.article-head{border-bottom:1px solid var(--line-soft);padding-bottom:28px;margin-bottom:32px}
.article-head .kicker{display:block;margin-bottom:14px}
.article-head h1{font-family:var(--serif);font-weight:430;font-optical-sizing:auto;letter-spacing:-0.02em;
  line-height:1.08;font-size:clamp(30px,4.6vw,46px);text-wrap:balance}
.article-meta{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin-top:18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.article-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-3)}

.article-body{font-size:18px;line-height:1.72;color:var(--ink)}
.article-body > p{margin-bottom:20px;text-wrap:pretty}
.article-lede{font-size:20px;line-height:1.6;color:var(--ink-2);margin-bottom:30px}
.article-body h2{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3vw,30px);letter-spacing:-0.01em;
  line-height:1.2;margin:42px 0 16px}
.article-body h3{font-size:20px;font-weight:600;letter-spacing:-0.01em;margin:28px 0 12px}
.article-body ul,.article-body ol{margin:0 0 22px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.article-body ul li{position:relative;padding-left:28px;line-height:1.6}
.article-body ul li::before{content:"";position:absolute;left:2px;top:11px;width:8px;height:8px;border-radius:50%;
  background:var(--accent-soft);border:1.5px solid var(--accent)}
.article-body ol{counter-reset:n}
.article-body ol li{counter-increment:n;position:relative;padding-left:38px;line-height:1.6}
.article-body ol li::before{content:counter(n);position:absolute;left:0;top:1px;width:24px;height:24px;
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;background:var(--surface-2)}
.article-body strong{font-weight:600}
.article-body a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}

.callout{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 var(--r) var(--r) 0;
  padding:18px 22px;margin:26px 0;font-size:16.5px;line-height:1.6;color:var(--ink)}
.callout b{color:var(--accent-ink)}

/* FAQ inside article */
.article-faq{margin-top:40px;border-top:1px solid var(--line-soft);padding-top:8px}
.article-faq .qa{border-bottom:1px solid var(--line-soft);padding:20px 0}
.article-faq .qa h3{font-size:18px;font-weight:600;margin:0 0 8px}
.article-faq .qa p{font-size:16px;color:var(--ink-2);line-height:1.6;margin:0}

/* CTA */
.article-cta{margin-top:44px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:clamp(26px,4vw,40px);text-align:center}
.article-cta h2{font-family:var(--serif);font-weight:500;font-size:clamp(22px,3vw,28px);margin-bottom:10px;letter-spacing:-0.01em}
.article-cta p{color:var(--ink-2);font-size:16px;max-width:54ch;margin:0 auto 22px;line-height:1.55}

/* related */
.related{margin-top:52px;border-top:1px solid var(--line-soft);padding-top:30px}
.related h2{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.related-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.related-list a{border:1px solid var(--line);border-radius:var(--r);padding:18px;font-size:15px;line-height:1.4;
  font-weight:500;transition:border-color .2s,transform .2s;text-wrap:pretty}
.related-list a:hover{border-color:var(--accent);color:var(--accent-ink);transform:translateY(-2px)}

@media (max-width:900px){
  .post-grid{grid-template-columns:repeat(2,1fr)}
  .related-list{grid-template-columns:1fr}
}
@media (max-width:600px){
  .post-grid{grid-template-columns:1fr}
  .article-body{font-size:17px}
}