/* Blog pages extend the shared shell and semantic palette in both themes. */
.cs-blog { margin: 0; -webkit-font-smoothing: antialiased; }
.cs-blog *, .cs-blog *::before, .cs-blog *::after { box-sizing: border-box; }
.blog-main { width: min(1200px, calc(100% - 48px)); margin: auto; padding-bottom: 96px; }
.blog-heading { padding: 100px 0 72px; text-align: center; }
.blog-heading h1 { margin: 0 0 24px; font-size: clamp(48px, 6vw, 80px); line-height: 1.06; font-weight: 600; letter-spacing: normal; }
.blog-heading p { max-width: 52ch; margin: auto; color: var(--palette-muted); font-size: 18px; line-height: 1.7; }
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
.blog-card { min-width: 0; }
.blog-card-link { display: block; height: 100%; padding: 20px; color: inherit; text-decoration: none; border-radius: var(--cs-radius-card); background-color: transparent; transition: background-color 240ms var(--cs-ease); }
.blog-card-link:focus-visible { background-color: var(--palette-soft); }
@media (hover: hover) { .blog-card-link:hover { background-color: var(--palette-soft); } }
.blog-cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--cs-radius-card); }
.blog-card .blog-cover { transition: opacity 180ms ease-out; }
.blog-card-link:hover .blog-cover { opacity: .9; }
.blog-card h2 { margin: 24px 0 12px; font-size: clamp(25px, 3vw, 30px); font-weight: 500; line-height: 1.25; }
.blog-card-link:hover h2 { color: var(--palette-accent); }
.blog-card p { margin: 0; max-width: 60ch; font-size: 16px; line-height: 1.75; color: var(--palette-muted); }
.blog-card-action { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--palette-accent); }
.blog-card-action svg, .blog-back svg { flex: none; }
.blog-article { max-width: 1040px; margin: auto; }
.blog-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 32px; font-size: 15px; color: var(--palette-muted); text-decoration: none; }
.blog-back:hover { color: var(--palette-accent); }
.blog-article-header { max-width: 940px; margin: auto; padding: 48px 0 48px; text-align: center; }
.blog-article-header h1 { margin: 0 auto 24px; font-size: clamp(40px, 5.5vw, 68px); font-weight: 600; line-height: 1.1; text-wrap: balance; }
.blog-article-header .blog-subtitle { max-width: 48ch; margin: 0 auto; font-size: 22px; line-height: 1.6; color: var(--palette-muted); }
.blog-article-cover { margin-bottom: 64px; }
.blog-prose { max-width: 70ch; margin: auto; font-size: 18px; line-height: 1.85; overflow-wrap: break-word; }
.blog-prose p { margin: 0 0 24px; }
.blog-prose h2 { margin: 56px 0 20px; font-size: clamp(28px, 3.2vw, 34px); font-weight: 500; line-height: 1.25; }
.blog-prose h3 { margin: 36px 0 16px; font-size: 26px; font-weight: 500; line-height: 1.3; }
.blog-prose ul, .blog-prose ol { padding-left: 24px; margin: 24px 0; }
.blog-prose li { padding-left: 4px; margin: 12px 0; }
.blog-prose a { color: var(--palette-accent); text-underline-offset: 4px; }
.blog-prose strong { font-weight: 600; }
.blog-table-scroll { width: 100%; overflow-x: auto; margin: 32px 0 24px; border: 1px solid var(--palette-line); border-radius: var(--cs-radius-card); }
.blog-prose table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 16px; line-height: 1.6; }
.blog-prose th, .blog-prose td { padding: 15px 18px; border-bottom: 1px solid var(--palette-line); text-align: right; font-variant-numeric: tabular-nums; }
.blog-prose th { background: var(--palette-soft); font-weight: 600; }
.blog-prose th:first-child, .blog-prose td:first-child { text-align: left; width: 34%; }
.blog-prose tbody tr:first-child { background: var(--palette-tint); }
.blog-prose tbody tr:last-child td { border-bottom: 0; }
.blog-end { max-width: 70ch; margin: 56px auto 0; padding-top: 24px; border-top: 1px solid var(--palette-line); }
.blog-end .blog-back { margin: 0; }
@media (max-width: 700px) {
  .blog-main { width: calc(100% - 32px); padding-bottom: 64px; }
  .blog-heading { padding: 64px 0 48px; }
  .blog-heading p { font-size: 16px; }
  .blog-grid { grid-template-columns: 1fr; gap: 40px; }
  .blog-card-link { padding: 16px; }
  .blog-back { margin-top: 20px; }
  .blog-article-header { padding: 32px 0; }
  .blog-article-header .blog-subtitle { font-size: 20px; }
  .blog-article-cover { margin-bottom: 40px; }
  .blog-prose { font-size: 17px; line-height: 1.8; }
  .blog-prose h2 { margin-top: 40px; }
  .blog-prose th, .blog-prose td { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) { .blog-card-link, .blog-card .blog-cover { transition: none; } }