/* Read mode: the established Talvo paper, Manrope and pine, with an editorial index. */
.blog-page { --blog-link: #087349; }
.blog-nav { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); }
.blog-nav > .wrap { display: flex; align-items: center; gap: 32px; min-height: 84px; }
.blog-nav .logo { font-size: 31px; letter-spacing: -.04em; }
.blog-nav-link { font-size: 14px; font-weight: 600; text-underline-offset: 6px; }
.blog-nav-link[aria-current] { text-decoration: underline; text-decoration-color: var(--blog-link); }
.blog-nav-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.blog-nav .btn, .blog-cta .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 22px; border-radius: 50px; font-weight: 600; font-size: 13px; background: var(--forest); color: var(--card); }
.blog-nav .btn:hover { background: #2d4638; }
.blog-breadcrumbs { display: flex; gap: 12px; padding-top: 34px; color: var(--muted); font-size: 13px; }
.blog-breadcrumbs a:hover { color: var(--blog-link); text-decoration: underline; text-underline-offset: 4px; }
.blog-hero { padding: 58px 0 64px; max-width: 950px; }
.blog-hero h1 { font-size: clamp(38px, 5vw, 68px); letter-spacing: -.04em; line-height: 1.12; text-wrap: balance; }
.blog-lead { max-width: 68ch; margin-top: 26px; color: #435048; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.8; }
.blog-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 26px; color: #435048; font-size: 12px; }
.blog-index-intro { position: relative; isolation: isolate; }
.blog-index-intro::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  pointer-events: none;
  /* Match the edge-to-edge atmosphere in content-pages.css. */
  background:
    linear-gradient(to bottom, rgba(242, 241, 235, .45), rgba(242, 241, 235, .12) 60%, var(--paper)),
    radial-gradient(ellipse at 98% 58%, #b9d2aa 0%, #dce8d1 24%, transparent 57%),
    radial-gradient(ellipse at 4% 64%, #efd9bc 0%, #f5e7d1 22%, transparent 50%),
    var(--paper);
}
.blog-index-hero { padding: 32px 0 36px; }
.blog-index-hero h1 { font-size: clamp(32px, 3.2vw, 42px); }
.blog-index-hero .blog-lead { margin-top: 12px; font-size: 16px; }
.blog-related > h2 { font-size: 22px; line-height: 1.4; letter-spacing: -.02em; margin-bottom: 20px; }
.blog-row { border-top: 1px solid var(--line); padding: 34px 0; display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.blog-thumbnail, .blog-cover { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; }
.blog-post-hero { max-width: none; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 64px); }
.blog-post-hero h1 { font-size: clamp(34px, 4vw, 56px); }
.blog-post-hero .blog-lead { font-size: 18px; }
.blog-row:last-child { border-bottom: 1px solid var(--line); }
.blog-row :is(h2, h3) { font-size: clamp(23px, 2.6vw, 32px); font-weight: 600; letter-spacing: -.025em; line-height: 1.3; max-width: 32ch; text-wrap: balance; }
.blog-row :is(h2, h3) a:hover { color: var(--blog-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.blog-row p { max-width: 66ch; margin-top: 14px; color: #435048; line-height: 1.75; }
.blog-category { display: block; margin-top: 12px; font-size: 12px; color: #435048; }
.blog-read { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: var(--blog-link); min-height: 44px; text-underline-offset: 5px; }
.blog-read:hover { text-decoration: underline; }
.blog-read svg { width: 24px; height: 24px; flex: none; }
.blog-article-layout { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: clamp(40px, 6vw, 84px); align-items: start; border-top: 1px solid var(--line); padding-top: 48px; }
.blog-toc { position: sticky; top: 116px; }
.blog-toc h2 { font-size: 14px; line-height: 1.5; letter-spacing: 0; margin-bottom: 18px; }
.blog-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.blog-toc a { display: block; color: #435048; font-size: 13px; line-height: 1.7; }
.blog-toc a:hover { color: var(--blog-link); text-decoration: underline; text-underline-offset: 4px; }
.blog-body { min-width: 0; max-width: 72ch; font-size: 16px; }
.blog-body section { scroll-margin-top: 116px; }
.blog-body section + section { margin-top: 52px; }
.blog-body h2 { font-size: clamp(25px, 2.8vw, 34px); line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; margin-bottom: 20px; }
.blog-body p { color: #435048; line-height: 1.85; margin-top: 18px; }
.blog-body a { color: var(--blog-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.blog-body a:hover { text-decoration-thickness: 2px; }
.blog-body .blog-disclosure { margin: 0 0 40px; font-size: 13px; line-height: 1.8; }
.blog-guide-link { font-size: 14px; font-weight: 600; }
.blog-example { margin: 30px 0 0; background: var(--mint); padding: 24px; border-radius: 14px; }
.blog-example figcaption { color: #435048; font-size: 12px; margin-bottom: 14px; }
.blog-body table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.7; font-variant-numeric: tabular-nums; }
.blog-body th { font-weight: 600; }
.blog-body th, .blog-body td { padding: 14px 12px; border-bottom: 1px solid #c4d0bf; text-align: start; vertical-align: top; }
.blog-example table th:not(:first-child), .blog-example table td { text-align: end; }
.blog-example tfoot th, .blog-example tfoot td { border-bottom: 0; font-weight: 700; }
.blog-example tbody tr:last-child td, .blog-example tbody tr:last-child th { border-bottom: 0; }
.blog-example tfoot { border-top: 1px solid #c4d0bf; }
.blog-example.blog-wide-table table { min-width: 680px; }
.blog-example.blog-worked-table:not(.blog-wide-table) table { min-width: 0; }
.blog-screenshot { margin: 30px 0 0; }
.blog-screenshot a { display: block; border-radius: 12px; cursor: zoom-in; }
.blog-screenshot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; }
.blog-screenshot figcaption { margin-top: 12px; color: #435048; font-size: 12px; line-height: 1.8; }
.blog-deficit { color: #943922; font-weight: 700; }
.blog-table-scroll { max-width: 100%; overflow-x: auto; scrollbar-color: #687167 var(--paper); scrollbar-width: thin; }
.blog-comparison { margin-top: 30px; }
.blog-comparison table { min-width: 620px; }
.blog-comparison caption { text-align: start; font-size: 13px; color: #435048; margin-bottom: 12px; }
.blog-comparison th:first-child { min-width: 100px; }
.blog-sources ul { list-style: disc; padding-left: 20px; display: grid; gap: 12px; font-size: 14px; }
.blog-related { margin-top: 84px; }
.blog-cta { margin: 84px 0; padding: clamp(30px, 5vw, 60px); background: var(--forest); color: var(--card); border-radius: 16px; }
.blog-cta h2 { font-size: clamp(28px, 3.5vw, 42px); letter-spacing: -.025em; line-height: 1.2; }
.blog-cta p { color: #c3d1c6; max-width: 62ch; margin-top: 18px; line-height: 1.8; }
.blog-cta .btn { margin-top: 26px; background: var(--accent); color: var(--forest); }
.blog-cta .btn:hover { background: #9ae6bd; }
@media (max-width: 860px) {
  .blog-row { grid-template-columns: 160px minmax(0, 1fr); gap: 24px; }
  .blog-read { grid-column: 2; justify-self: start; }
  .blog-thumbnail { grid-row: 1 / 3; align-self: start; }
  .blog-post-hero { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .blog-nav > .wrap { min-height: 72px; gap: 24px; }
  .blog-article-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .blog-toc { position: static; }
  .blog-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-body { max-width: 100%; }
}
@media (max-width: 640px) {
  .blog-page .wrap { padding-inline: 20px; }
  .blog-nav > .wrap { gap: 18px; }
  .blog-nav .logo { font-size: 28px; }
  .blog-nav-demo { display: none !important; }
  .blog-nav-actions { gap: 0; }
  .blog-breadcrumbs { padding-top: 26px; }
  .blog-hero { padding: 38px 0 44px; }
  .blog-hero h1 { font-size: clamp(34px, 9vw, 48px); }
  .blog-index-hero { padding: 28px 0 30px; }
  .blog-index-hero h1 { font-size: 32px; }
  .blog-row { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .blog-thumbnail { grid-row: auto; margin-bottom: 12px; }
  .blog-row :is(h2, h3) { max-width: none; }
  .blog-read { grid-column: auto; justify-self: start; }
  .blog-article-layout { padding-top: 30px; }
  .blog-toc ol { grid-template-columns: 1fr; gap: 10px; }
  .blog-example { padding: 18px 14px; }
  .blog-example table { min-width: 410px; }
  .blog-example:not(:has(.blog-table-scroll)) table { min-width: 0; }
  .blog-body th, .blog-body td { padding: 12px 8px; }
  .blog-related { margin-top: 56px; }
  .blog-cta { margin: 56px 0; }
}
@media (prefers-reduced-motion: reduce) { html:has(.blog-page) { scroll-behavior: auto; } }