/* Blog (list page + post template). Uses the site tokens and styles.css; only blog-specific rules live here.
   Headings use Geist 600 ("Geist HL", self-hosted with Hero V2: fonts/hl-geist-600-latin.woff2, @font-face in /styles.css,
   SIL OFL 1.1, fonts/OFL-Geist.txt). Hero V2 only applies Geist to .hero, so the blog sets it here explicitly. */
.blog h1,.blog h2,.blog h3,.blog h4{font-family:"Geist HL",var(--sans);font-weight:600;font-variation-settings:normal;font-synthesis:none;letter-spacing:-0.015em}
.blog .page-hero h1{max-width:22ch;font-size:clamp(2.2rem,4.2vw,3.25rem);line-height:1.1}
.blog .page-hero .eyebrow a{color:inherit;text-decoration:none}
.blog .page-hero .eyebrow a:hover{text-decoration:underline}
.blog-feed{margin:20px 0 0;font-size:.9375rem}
.blog-meta{font:500 .8125rem/1.4 var(--mono);color:var(--muted);margin:0 0 10px;letter-spacing:.01em}
.blog-post .page-hero .blog-meta{margin:20px 0 0}
.blog-tag{display:inline-block;margin-left:8px;padding:2px 8px;border:1px solid var(--warn-line,#E9C88E);background:var(--warn-soft,#FDF3E2);color:var(--warn-ink,#7A4A06);border-radius:999px;font:600 .6875rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;vertical-align:1px}
.pg section.blog-index{padding:48px 0 88px}
.blog-list{list-style:none;margin:0;padding:0;max-width:760px}
.blog-item{padding:32px 0;border-bottom:1px solid var(--line)}
.blog-item:first-child{padding-top:8px}
.blog-item h2{font-size:clamp(1.375rem,1.2rem + .7vw,1.75rem)}
.blog-item h2 a{color:var(--ink);text-decoration:none}
.blog-item h2 a:hover{color:var(--accent);text-decoration:underline}
.blog-summary{color:var(--muted);font-size:1.0625rem;margin:12px 0 0;max-width:62ch}
.blog-empty{color:var(--muted)}
.blog-narrow{max-width:760px}
.blog-body{padding-top:48px;padding-bottom:88px;font-size:1.0625rem}
.blog-body p,.blog-body li{max-width:66ch}
.blog-body h2{font-size:clamp(1.4rem,1.2rem + .8vw,1.75rem);margin:44px 0 14px}
.blog-body h3{font-size:1.25rem;margin:32px 0 10px}
.blog-body h4{font-size:1.0625rem;margin:24px 0 8px}
.blog-body ul,.blog-body ol{margin:0 0 1em;padding-left:1.4em}
.blog-body li{margin:0 0 .4em}
.blog-body blockquote{margin:0 0 1.2em;padding:4px 0 4px 20px;border-left:3px solid var(--accent-line,#C7E2D8);color:var(--muted)}
.blog-body pre{background:var(--term);color:var(--term-text);border-radius:var(--r);padding:18px 20px;overflow-x:auto;margin:0 0 1.2em;font-size:.875rem;line-height:1.6}
.blog-body pre code{background:none;border:0;padding:0;white-space:pre}
.blog-body hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.blog-sample{background:var(--warn-soft,#FDF3E2);border:1px solid var(--warn-line,#E9C88E);color:var(--warn-ink,#7A4A06);border-radius:var(--r);padding:14px 18px;margin:0 0 32px;font-size:.9375rem;max-width:none}
.blog-sample strong{color:var(--warn-strong,#5C3700)}
.blog-back{margin-top:48px;font-weight:600}
.blog-feed-post{margin-top:12px}
@media (max-width:760px){
  .pg section.blog-index{padding:32px 0 64px}
  .blog-item{padding:24px 0}
  .blog-body{padding-top:32px;padding-bottom:64px;font-size:1rem}
}