/* blog-post.css — shared typography + rhythm for blog post bodies.
   Loaded by every post in core/pages/blog/<name>/. Design tokens only.
   The shell drops content straight into .shell with no article container, so
   this gives the body a readable measure and vertical rhythm. */

.blog-post {
  max-width: 44rem;
  margin: var(--sp-6) auto var(--sp-10);
}

/* Opening paragraph — confident, not muted body grey. */
.blog-post .lede {
  font-family: var(--ff-product);
  font-size: 1.2rem;
  line-height: 1.7;
  letter-spacing: -0.02em;
  color: var(--c-text);
  margin: 0 0 var(--sp-8);
}

/* Sections get real breathing room between them. */
.blog-post .section {
  margin: 0 0 var(--sp-9);
}

.blog-post .section-label {
  margin-bottom: var(--sp-2);
}

.blog-post .section-title {
  margin: 0 0 var(--sp-4);
}

.blog-post .section-desc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-text-secondary);
  margin: 0 0 var(--sp-4);
  max-width: 42rem;
}

.blog-post p {
  line-height: 1.7;
}

.blog-post strong {
  color: var(--c-text);
  font-weight: 600;
}

/* Tables + grids inside a post sit on the same rhythm. */
.blog-post .data-table-wrap,
.blog-post .card-grid {
  margin: var(--sp-5) 0;
}

/* Trailing source-citation line. */
.blog-post small {
  display: block;
  margin-top: var(--sp-8);
  line-height: 1.6;
}