.blog-wrap { max-width: 780px; margin: 0 auto; padding: 30px 20px 60px; }
.blog-wrap h1 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.8px; line-height: 1.15; margin: 14px 0 8px; }
.blog-meta { color: var(--muted); font-size: 13.5px; margin-bottom: 26px; }
.blog-wrap h2 { font-size: 21px; margin: 30px 0 12px; letter-spacing: -.3px; }
.blog-wrap h3 { font-size: 17px; margin: 22px 0 8px; }
.blog-wrap p, .blog-wrap li { font-size: 16px; color: var(--ink-2); line-height: 1.65; margin-bottom: 12px; }
.blog-wrap ul, .blog-wrap ol { padding-left: 24px; margin-bottom: 16px; }
.blog-wrap li { margin-bottom: 7px; }
.blog-wrap b { color: var(--ink); }
.blog-wrap table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-bottom: 16px; }
.blog-wrap th { text-align: left; color: var(--muted); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--grid); }
.blog-wrap td { padding: 8px 10px; border-bottom: 1px solid var(--grid); color: var(--ink-2); }
.callout {
  background: var(--grad-soft); border-radius: 12px; padding: 18px 22px; margin: 26px 0;
}
.callout p { margin-bottom: 12px; }
.formula {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 18px; font-weight: 600; color: var(--ink); margin: 16px 0; font-size: 15.5px;
  overflow-x: auto;
}
/* индекс блога */
.post-grid { display: grid; gap: 16px; max-width: 860px; margin: 30px auto 60px; padding: 0 20px; }
.post-card { display: block; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.post-card h2 { font-size: 19px; margin-bottom: 6px; letter-spacing: -.3px; }
.post-card p { color: var(--ink-2); font-size: 14.5px; }
.post-card .blog-meta { margin-bottom: 8px; }
.blog-head { text-align: center; padding: 44px 20px 6px; }
.blog-head h1 { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -1px; }
.blog-head p { color: var(--ink-2); margin-top: 10px; }