/* The body of a blog post. Loaded by the live post and by the editor in the
   back office, so what is written is exactly what is published. */

.post-body { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.75; color: var(--neutral-wood); max-width: 68ch; }
.post-body > :first-child { margin-top: 0; }
.post-body p { margin: 0 0 1.15em; }
.post-body p.lead { font-size: 1.25rem; line-height: 1.6; }
.post-body h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.625rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -0.01em; margin: 1.9em 0 0.55em; }
.post-body h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3125rem, 2vw, 1.5rem); line-height: 1.2; margin: 1.6em 0 0.45em; }
.post-body h4 { font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; margin: 1.4em 0 0.4em; }
.post-body a { color: var(--primary); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.post-body a:hover { text-decoration-thickness: 2px; }
.post-body strong { font-weight: 600; }
.post-body ul, .post-body ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.post-body li { margin-bottom: 0.45em; padding-left: 0.2em; }
.post-body li::marker { color: var(--primary); }
.post-body hr { border: 0; border-top: 1px solid var(--border); margin: 2.5em 0; }

.post-body blockquote { margin: 1.8em 0; padding: 0 0 0 1.25em; border-left: 3px solid var(--primary); font-family: var(--font-display); font-size: 1.375rem; line-height: 1.45; }
.post-body blockquote p:last-child { margin-bottom: 0; }

.post-body .callout { margin: 1.8em 0; padding: 1.15em 1.35em; border-radius: var(--radius-lg); background: var(--neutral-paper); border: 1px solid var(--border); }
.post-body .callout > :last-child { margin-bottom: 0; }
.post-body .callout--tip { background: #EEF3FB; border-color: var(--secondary); }
.post-body .callout--warning { background: #FFF8E1; border-color: var(--status-warning); }

.post-body a.post-button { display: inline-block; padding: 13px 26px; border-radius: 999px; background: var(--primary); color: #fff; text-decoration: none; font-weight: 500; line-height: 1.2; }
.post-body a.post-button:hover { background: var(--primary-dark); color: #fff; }

.post-body figure { margin: 2em 0; }
.post-body img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); }
.post-body figcaption { font-size: 0.875rem; opacity: 0.7; margin-top: 0.6em; }

.post-body table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 0.9375rem; }
.post-body th, .post-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.post-body th { font-weight: 600; background: var(--neutral-paper); }