/* Blog (/blog/, DEC-SEO-01). Loaded after landing.css and built from its tokens like changelog.css: white canvas,
   near-black type, Soft Charcoal copy, the icon blue for links and the one call to action, 20 px cards.
   A reading column of about 70 characters; tables and screenshots may use the full column. Light only, like the
   landing page. */
.blog-page{padding-bottom:96px;background:radial-gradient(60% 420px at 50% 0%,#e8f5ff 0%,transparent 80%),var(--paper)}

/* Index */
.blog-intro{padding:56px 0 32px;text-align:center}
.blog-intro h1{margin:12px 0 0;font-size:clamp(2.4rem,6vw,3.6rem);line-height:1.1;letter-spacing:-.02em}
.blog-intro p:not(.eyebrow){max-width:560px;margin:16px auto 0;color:var(--charcoal);font-size:18px;line-height:1.67}
.blog-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,330px));justify-content:center;gap:24px;max-width:1040px;margin:0 auto;padding:0;list-style:none}
.blog-card{display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:var(--r-card);background:var(--paper);box-shadow:var(--shadow-card);color:inherit;text-decoration:none;transition:transform .15s ease}
.blog-card:hover{transform:translateY(-2px)}
.blog-card:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.blog-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--fill-soft)}
.blog-card-body{display:flex;flex:1;flex-direction:column;gap:8px;padding:20px 22px 22px}
.blog-card-body h2{margin:0;color:var(--ink);font-size:20px;line-height:1.3;letter-spacing:-.01em}
.blog-card-body p{margin:0;color:var(--charcoal);font-size:15px;line-height:1.6}
.blog-card-body .blog-meta{margin-top:auto;padding-top:8px}

/* Shared meta line */
.blog-meta{color:var(--charcoal);font-size:14px;line-height:1.5}
.blog-meta span+span::before{content:"·";margin:0 8px}

/* Post */
.blog-article{width:min(100% - 32px,720px);margin-inline:auto;padding-top:40px}
.blog-crumbs{margin:0 0 20px;color:var(--charcoal);font-size:14px}
.blog-crumbs ol{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.blog-crumbs li+li::before{content:"›";margin-right:6px}
.blog-crumbs a{color:var(--charcoal)}
.blog-article h1{margin:8px 0 16px;color:var(--ink);font-size:clamp(2rem,5vw,2.9rem);line-height:1.12;letter-spacing:-.02em}
.blog-lede{margin:0 0 16px;color:var(--charcoal);font-size:20px;line-height:1.6}
.blog-hero{margin:28px 0 8px;overflow:hidden;border-radius:var(--r-card);box-shadow:var(--shadow-window)}
.blog-hero img{display:block;width:100%;height:auto}
.blog-figure{margin:28px 0}
.blog-figure img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow-window)}
.blog-figure figcaption,.blog-hero+p.blog-caption{margin-top:10px;color:var(--charcoal);font-size:14px;line-height:1.5}

.blog-body{color:var(--graphite);font-size:18px;line-height:1.75}
.blog-body h2{margin:48px 0 12px;color:var(--ink);font-size:28px;line-height:1.25;letter-spacing:-.01em;scroll-margin-top:96px}
.blog-body h3{margin:32px 0 8px;color:var(--ink);font-size:21px;line-height:1.3;scroll-margin-top:96px}
.blog-body p,.blog-body ul,.blog-body ol{margin:0 0 18px}
.blog-body li{margin:6px 0}
.blog-body a{color:var(--blue);text-underline-offset:3px}
.blog-body strong{color:var(--ink);font-weight:600}
.blog-body code,.blog-body kbd{padding:1px 6px;border-radius:6px;background:var(--fill-soft);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}
.blog-body kbd{box-shadow:inset 0 -1px 0 var(--hairline)}
.blog-body pre{overflow-x:auto;margin:0 0 18px;padding:14px 16px;border-radius:12px;background:var(--fill-soft);font-size:15px;line-height:1.55}
.blog-body pre code{padding:0;background:none}
.blog-body blockquote{margin:0 0 18px;padding:2px 0 2px 18px;border-left:3px solid var(--hairline);color:var(--charcoal)}
.blog-table{overflow-x:auto;margin:0 0 22px}
.blog-body table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5}
.blog-body th,.blog-body td{padding:10px 12px;border-bottom:1px solid var(--hairline);text-align:left;vertical-align:top}
.blog-body th{color:var(--ink);font-weight:600}
.blog-body thead th{border-bottom-width:2px}
.blog-note{margin:0 0 22px;padding:16px 18px;border-radius:14px;background:var(--wash-ice);font-size:16px;line-height:1.65}
.blog-note p:last-child{margin-bottom:0}
.blog-sources{margin-top:40px;font-size:15px;color:var(--charcoal)}
.blog-sources h2{font-size:20px}
.blog-sources a{overflow-wrap:anywhere}

.blog-toc{margin:28px 0 8px;padding:18px 22px;border-radius:14px;background:var(--wash-mist);font-size:16px}
.blog-toc p{margin:0 0 8px;color:var(--ink);font-weight:600}
.blog-toc ul{margin:0;padding:0;list-style:none}
.blog-toc li{margin:4px 0}
.blog-toc a{color:var(--graphite)}

.blog-cta{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;align-items:center;margin:48px 0 0;padding:24px 26px;border-radius:var(--r-card);background:var(--field);box-shadow:var(--shadow-card)}
.blog-cta img{grid-row:span 3}
.blog-cta h2{margin:0;color:var(--ink);font-size:22px;line-height:1.3}
.blog-cta p{margin:0;color:var(--charcoal);font-size:16px;line-height:1.6}
.blog-cta .button{justify-self:start;margin-top:8px}

.blog-more{width:min(100% - 32px,1040px);margin:72px auto 0}
.blog-more>h2{margin:0 0 20px;font-size:24px;text-align:center}

@media (max-width:640px){
  .blog-intro{padding:40px 0 24px}
  .blog-list{grid-template-columns:1fr}
  .blog-body{font-size:17px}
  .blog-body h2{font-size:24px}
  .blog-cta{grid-template-columns:1fr}
  .blog-cta img{grid-row:auto}
}