/* Long-form Blog typography and illustrations. */
.blog-page main.wrap { max-width: 1360px; }
.blog-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; margin-top: 2rem; }
.blog-reading { min-width: 0; }
.blog-listing-layout { grid-template-columns: minmax(0, 1fr); max-width: 960px; }
.blog-article-layout { grid-template-columns: 260px minmax(0, 1fr); max-width: 1280px; margin-inline: auto; margin-top: 1.5rem; }
.blog-page main:has(.blog-article-layout) { max-width: 1360px; }
.blog-page main:has(.blog-article-layout) > .eyebrow,
.blog-page main:has(.blog-article-layout) > h1,
.blog-page main:has(.blog-article-layout) > .intro { max-width: 820px; margin-inline: auto; }
.blog-article-layout .feature-heading { margin-bottom: 1.5rem; }
.blog-article-layout .article-hero { max-width: 820px; margin-inline: auto; }
.blog-article-layout .blog-image-note { max-width: 720px; margin-inline: auto; }
.blog-card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); overflow: hidden; background: #efede3; border: 1px solid #d3dacd; border-radius: 12px; }
.blog-card-image { display: block; align-self: start; }
.blog-card-image img { display: block; width: 100%; height: auto; }
.blog-card-content { min-width: 0; padding: 1.5rem; }
.blog-card-content h2 { margin: .5rem 0 1rem; font-size: 1.5rem; line-height: 1.35; }
.blog-card-content h2 a { text-decoration: none; }
.blog-card-content > p:not(.article-kicker) { margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.75; }
.blog-read-more, .article-back { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: 1rem; font-weight: 600; }
.article-back { margin-bottom: 1.25rem; }
.blog-reading > .blog-image-note { margin-top: 1.5rem; }
.blog-sidebar { position: sticky; top: 1.5rem; }
.blog-guide { border: 1px solid #d3dacd; border-radius: 12px; background: #efede3; padding: 0; overflow: hidden; }
.blog-guide summary { padding: 1.25rem; cursor: pointer; font-size: 1.125rem; font-weight: 700; color: #285446; }
.blog-guide-content { padding: 0 1.25rem 1.25rem; max-height: calc(100svh - 8rem); overflow-y: auto; }
.blog-guide nav { display: block; min-height: 0; padding: 1rem 0; border-top: 1px solid #d3dacd; }
.blog-guide h2 { font-size: .9375rem; line-height: 1.5; margin: 0 0 .75rem; color: #56635b; }
.blog-guide ul { list-style: none; margin: 0; padding: 0; }
.blog-guide li + li { margin-top: .25rem; }
.blog-guide li a { display: block; padding: .625rem .75rem; min-height: 44px; border-radius: 6px; font-size: 1rem; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; }
.blog-guide li a:hover, .blog-guide li a[aria-current="location"] { background: #dde6d8; color: #1d4035; }
.blog-guide li a[aria-current="page"] { background: #dde6d8; color: #1d4035; font-weight: 600; }
@media (min-width: 961px) {
  .blog-article-layout { height: calc(100dvh - 3rem); min-height: 400px; align-items: stretch; }
  .blog-article-layout .blog-sidebar { position: static; min-height: 0; }
  .blog-article-layout .blog-reading { height: 100%; overflow-y: auto; scrollbar-gutter: stable; padding: 0 1.25rem 1rem; }
  .blog-article-layout .blog-reading:focus-visible { outline: 3px solid #98723e; outline-offset: 4px; }
}
.blog-guide-safety { display: flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: .75rem; font-size: 1rem; font-weight: 600; }
@media (max-width: 960px) {
  .blog-layout { grid-template-columns: 1fr; gap: 2rem; }
  .blog-sidebar { position: static; }
  .blog-guide-content { max-height: none; }
}
.blog-page .blog-topics { min-height: 0; }
.feature-article { border-top: 0; padding-top: .5rem; }
.feature-heading { max-width: 820px; margin: 0 auto 2rem; }
.article-kicker { margin: 0 0 .75rem; color: #705833; font-size: 1rem; font-weight: 600; }
.feature-heading h2 { margin: 0 0 1rem; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.article-deck { max-width: 58ch; margin: 0; font-size: 1.25rem; line-height: 1.7; }
.article-hero { margin: 0 0 2.5rem; }
.article-hero img { display: block; width: 100%; height: auto; border-radius: 14px; }
.feature-article figcaption { margin-top: .75rem; color: #56635b; font-size: .9375rem; line-height: 1.6; }
.article-body { max-width: 720px; margin-inline: auto; font-size: 1.125rem; line-height: 1.85; }
.article-body p { margin: 0 0 1.25rem; }
.article-body section { margin-top: 2.5rem; padding: 0; scroll-margin-top: 2rem; }
.article-body h3 { margin: 0 0 1rem; font-size: clamp(1.375rem, 2.5vw, 1.75rem); line-height: 1.35; color: #28352f; }
.article-body section > h2 { margin: 0 0 1.25rem; font-size: clamp(1.625rem, 3vw, 2rem); line-height: 1.3; color: #28352f; }
.article-body section > h3 { margin-top: 1.75rem; font-size: 1.25rem; }
.article-body ul { padding-left: 1.5rem; margin: 0 0 1.5rem; color: #56635b; }
.article-body li + li { margin-top: .5rem; }
.article-body blockquote { margin: 1rem 0 1.5rem; padding: 1rem 1.5rem; border-left: 3px solid #285446; border-radius: 0 8px 8px 0; background: #efede3; }
.article-body blockquote p { margin: 0; color: #34483c; }
.article-contents { display: block; min-height: 0; margin: 2rem 0; padding: 1.5rem; background: #e9ede3; border-radius: 10px; }
.article-contents h3 { font-size: 1.125rem; }
.article-contents ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.5rem; padding: 0; margin: 0; list-style: none; }
.article-contents li + li { margin: 0; }
.article-contents a { display: inline-flex; align-items: center; min-height: 44px; line-height: 1.5; }
.article-photo { margin: 2.5rem 0; }
.article-photo img { display: block; width: 100%; height: auto; border-radius: 12px; }
.article-photo img[src="assets/blog-fresh-start.jpg"] { width: min(100%, 360px); margin-inline: auto; }
.article-safety-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 600; }
.article-body .article-takeaway { padding: 1.75rem; background: #e4ece3; border-radius: 12px; margin-bottom: 2.5rem; }
.article-takeaway > p:last-child { margin-bottom: 0; }
@media (max-width: 650px) {
  .blog-card { grid-template-columns: 1fr; }
  .feature-heading { margin-bottom: 1.5rem; }
  .article-body { font-size: 1.125rem; line-height: 1.8; }
  .article-contents ul { grid-template-columns: 1fr; }
  .article-body blockquote, .article-contents, .article-body .article-takeaway { padding: 1.25rem; }
  .article-hero { margin-bottom: 2rem; }
}