/* Inner pages and long-form content. Kept independent from the animated homepage. */
.content-shell { min-block-size: 70vh; }
.content-hero,
.archive-hero {
  padding-block: clamp(4rem, 8vw, 8rem) clamp(3rem, 6vw, 6rem);
  background: var(--color-surface-dark);
  color: #fff;
}
.content-hero .lead,
.archive-hero .lead { max-inline-size: 48rem; margin-block-start: var(--space-5); color: rgba(255,255,255,.72); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .55rem; margin-block-end: var(--space-5); font-size: var(--text-small); color: rgba(255,255,255,.65); }
.breadcrumbs a { color: inherit; }
.entry-content { padding-block: clamp(3rem, 7vw, 7rem); font-size: var(--text-body-l); }
.entry-content > * { max-inline-size: 46rem; margin-inline: auto; }
.entry-content > * + * { margin-block-start: var(--space-5); }
.entry-content h2 { margin-block-start: var(--space-8); font-size: var(--text-h2); line-height: var(--leading-heading); }
.entry-content h3 { margin-block-start: var(--space-7); font-size: var(--text-h3); }
.entry-content p,
.entry-content li { line-height: 2; }
.entry-content ul,
.entry-content ol { padding-inline-start: 1.4rem; }
.entry-content a { color: var(--color-accent); }
.entry-content blockquote { padding: var(--space-5); border-inline-start: 4px solid var(--color-accent); background: var(--color-accent-tint); }
.conversion-box { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-block-end: var(--space-9); padding: var(--space-6); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: #fff; }
.conversion-box p { margin-block-start: var(--space-2); color: var(--color-text-muted); }
.post-kicker { margin-block-end: var(--space-4); color: var(--color-accent-soft); }
.post-byline { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-5); color: rgba(255,255,255,.65); }
.post-cover { margin-block-start: calc(var(--space-8) * -1); position: relative; }
.post-cover img { inline-size: 100%; max-block-size: 38rem; object-fit: cover; border-radius: var(--radius-lg); }
.post-footer { padding-block-end: var(--space-9); }
.content-shell + .site-footer .wordmark { display: none; }
.post-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.post-tags a { padding: .35rem .75rem; border: 1px solid var(--color-line); border-radius: var(--radius-pill); text-decoration: none; }
@media (max-width: 47.99em) { .conversion-box { align-items: stretch; flex-direction: column; } }
