/* Blog article pages. Loaded after style.css and uses its colour and font variables. */

.post { padding: 36px 0 120px; background: var(--cream); }
.post-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; }

.post-crumbs {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 28px;
}
.post-crumbs a { border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease), color 0.3s var(--ease); }
.post-crumbs a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.post-crumbs span { margin: 0 8px; }

.post-kicker {
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600; margin-bottom: 16px;
}
.post-title {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.3rem, 5.4vw, 3.9rem); line-height: 0.98; margin-bottom: 20px;
}
.post-meta { color: var(--ink-faint); font-size: 13px; letter-spacing: 0.04em; margin-bottom: 36px; }
.post-meta a { border-bottom: 1px solid var(--line); }
.post-meta a:hover { border-bottom-color: var(--ink); }

.post-fig { margin: 0 auto 44px; }
.post-fig img { width: 100%; height: auto; background: var(--cream-dim); }
.post-fig.is-portrait { max-width: 460px; }
.post-fig.is-square { max-width: 600px; }
.post-fig.is-landscape { max-width: 100%; }
.post-fig-mid { margin-top: 44px; }

.post-lede { font-size: 19px; line-height: 1.7; color: var(--ink); margin-bottom: 8px; }

.post-body p { color: var(--ink-soft); font-size: 17px; line-height: 1.8; margin-bottom: 20px; }
.post-body h2 {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.15rem);
  line-height: 1.12; margin: 52px 0 16px; color: var(--ink);
}
.post-body h3 { font-size: 17px; font-weight: 600; margin: 26px 0 6px; color: var(--ink); line-height: 1.4; }
.post-body h3 + p { margin-bottom: 0; }
.post-body ul, .post-body ol { margin: 0 0 24px; padding-left: 24px; color: var(--ink-soft); font-size: 17px; line-height: 1.75; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { margin-bottom: 8px; padding-left: 4px; }
.post-body a { color: var(--ink); border-bottom: 1px solid var(--ink); transition: opacity 0.3s var(--ease); }
.post-body a:hover { opacity: 0.55; }
.post-body strong { color: var(--ink); font-weight: 600; }

.post-cta {
  margin-top: 64px; padding: 40px 36px; background: var(--cream-dim);
  border-top: 1px solid var(--line);
}
.post-body .post-cta h2 { margin: 0 0 14px; }
.post-body .post-cta p { margin-bottom: 26px; }
.post-cta-btn { display: inline-flex; }
.post-body .post-cta a.quote-btn { border: 1px solid var(--ink); }
.post-body .post-cta a.quote-btn:hover { opacity: 1; }

.post-related { margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--line); }
.post-related .post-kicker { margin-bottom: 20px; }
.post-related ul { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 0; }
.post-related li { margin: 0; }
.post-related a { display: block; }
.post-related .blog-meta { margin-bottom: 8px; }
.post-related-title {
  font-family: var(--display); font-weight: 700; font-size: 1.3rem; line-height: 1.15;
  border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease);
}
.post-related a:hover .post-related-title { border-bottom-color: var(--ink); }

@media (max-width: 760px) {
  .post { padding: 24px 0 90px; }
  .post-cta { padding: 30px 24px; }
  .post-related ul { grid-template-columns: 1fr; gap: 24px; }
  .post-lede { font-size: 18px; }
  .post-body p, .post-body ul, .post-body ol { font-size: 16.5px; }
}