/* Блог — поверх общих токенов (styles.css) */

.blog-hero {
  padding-top: clamp(48px, 8vw, 110px);
  padding-bottom: clamp(28px, 4vw, 56px);
}
.blog-hero .eyebrow {
  margin-bottom: 22px;
}
.blog-hero .display {
  font-size: clamp(2.6rem, 7.5vw, 6rem);
  margin-bottom: 24px;
}
.blog-hero .lead {
  max-width: 46ch;
}

/* --- список постов: карточки крупнее --- */
.blog-hero + .section .posts {
  grid-template-columns: repeat(2, 1fr);
}
.blog-hero + .section .post-card {
  min-height: 200px;
}
@media (max-width: 720px) {
  .blog-hero + .section .posts {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------ Страница поста ----------------------------- */
.article {
  max-width: 760px;
  padding-top: clamp(28px, 5vw, 64px);
  padding-bottom: clamp(48px, 7vw, 100px);
}
.article-back {
  display: inline-block;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 32px;
  transition: color 0.25s;
}
.article-back:hover {
  color: var(--ink);
}
.article-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 500;
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4em 0.9em;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.82rem;
}
.article-title {
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-bottom: 36px;
}

/* типографика тела статьи */
.article-body {
  font-size: clamp(1.06rem, 1.5vw, 1.22rem);
  line-height: 1.7;
  color: var(--ink-soft);
}
.article-body > * + * {
  margin-top: 1.1em;
}
.article-body h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  margin-top: 1.8em;
}
.article-body h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  font-weight: 700;
  color: var(--ink);
  margin-top: 1.6em;
}
.article-body ul,
.article-body ol {
  padding-left: 1.3em;
}
.article-body li + li {
  margin-top: 0.5em;
}
.article-body li::marker {
  color: var(--lime-deep);
}
.article-body strong {
  color: var(--ink);
  font-weight: 700;
}
.article-body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--lime-deep);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.article-body code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  background: rgba(16, 15, 12, 0.07);
  padding: 0.15em 0.4em;
  border-radius: 6px;
}
.article-body blockquote {
  border-left: 4px solid var(--lime);
  padding: 6px 0 6px 22px;
  margin-left: 0;
  font-size: 1.1em;
  font-weight: 500;
  color: var(--ink);
}
.article-body hr {
  border: none;
  height: 1px;
  background: var(--line);
  margin: 2em 0;
}

/* CTA в конце статьи */
.article-cta {
  margin-top: 56px;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius);
  background: var(--card-black);
  color: var(--white);
  background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.07), transparent 45%);
}
.article-cta h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.article-cta p {
  color: rgba(251, 250, 244, 0.7);
  margin-bottom: 24px;
  max-width: 44ch;
}