/* Blog layer on top of alternatives.css (same tokens, fonts and chrome). */

.post-hero h1 { max-width: 920px; font-size: clamp(38px, 6vw, 64px); }
.post { max-width: 760px; }

.author-line { display: flex; align-items: center; gap: 14px; margin-top: 28px; color: var(--paper-dim); font-size: 14px; }
.author-line img { width: 44px; height: 44px; flex: none; border: 1px solid var(--line); border-radius: 50%; object-fit: cover; }
.author-line a { color: var(--paper); text-decoration: none; }
.author-line a:hover { color: var(--amber); }
.author-line .byline { margin-top: 2px; }

.takeaways ul, .toc ol { margin: 0; padding-left: 20px; }
.takeaways li { margin: 8px 0; color: var(--paper-dim); font-size: 16px; line-height: 1.55; }
.takeaways li::marker { color: var(--amber); }

.toc { margin: 28px 0 8px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 18px; background: rgba(245, 238, 227, .025); }
.toc p { margin: 0 0 8px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.toc li { margin: 6px 0; color: var(--muted); font-size: 15px; }
.toc a { color: var(--paper-dim) !important; text-decoration: none; }
.toc a:hover { color: var(--amber) !important; }

.prose h2 { scroll-margin-top: 90px; }
.prose h3 { margin-top: 36px; scroll-margin-top: 90px; }
.prose p, .prose li { font-size: 18px; line-height: 1.75; }
.prose p { margin: 0 0 1.15em; }
.prose > p:first-child { color: var(--paper); font-size: 20px; }
.prose ul { margin: 0 0 1.4em; padding-left: 22px; color: var(--paper-dim); }
.prose li { margin: 8px 0; }
.prose li::marker { color: var(--amber); }
#faq-heading, #cta-heading, #related-heading { scroll-margin-top: 90px; }

.blog-grid { grid-template-columns: 1fr; max-width: 860px; }
.post-card h2 a { color: var(--paper); text-decoration: none; }
.post-card h2 a:hover { color: var(--amber); }
.post-card .post-meta { margin: 0; color: var(--muted); font-size: 14px; }

@media (max-width: 540px) {
  .prose p, .prose li { font-size: 17px; }
  .prose > p:first-child { font-size: 18px; }
  .toc { padding: 18px 20px; }
}