/* ============================================================================
   blog.css — the /blog index + /blog/<slug> article pages (hand-authored).
   ----------------------------------------------------------------------------
   Loads AFTER /assets/carpe.css → /css/pages.css (shared nav/footer chrome).
   Only design-system tokens; light only, like every other page. The page
   markup is GENERATED by tools/site/build_blog.py from content/blog/*.md.
   ============================================================================ */
.brand-text{flex:none}.brand-word{white-space:nowrap}
.blog{padding:64px 72px 24px;max-width:1300px;box-sizing:border-box}
.kick{display:inline-block;margin-bottom:14px;text-decoration:none}
a.kick:hover{color:var(--accent2)}
.h1{margin:0;font-size:44px;font-weight:800;letter-spacing:var(--tracking-tight);line-height:1.1;color:var(--text-body);text-wrap:balance;max-width:24ch}
.lead{margin:16px 0 0;font-size:17px;line-height:1.6;color:var(--text-muted);text-wrap:pretty;max-width:62ch}
.pmeta{margin:14px 0 0;font-size:var(--text-sm);color:var(--text-muted)}
.pmeta time{font-variant-numeric:tabular-nums}
.rss{display:inline-flex;align-items:center;gap:6px;color:var(--accent);text-decoration:none;font-weight:600}
.rss:hover{color:var(--accent2)}

/* index */
.bhead{padding-bottom:28px;border-bottom:1px solid var(--border-hairline)}
.plist{list-style:none;margin:0;padding:0}
.pitem{padding:28px 0;border-bottom:1px solid var(--border-hairline);max-width:70ch}
.pitem time{font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);font-variant-numeric:tabular-nums}
.ptitle{margin:6px 0 8px;font-size:24px;font-weight:800;letter-spacing:var(--tracking-tight);line-height:1.2;text-wrap:balance}
.ptitle a{color:var(--text-body);text-decoration:none}
.ptitle a:hover{color:var(--accent)}
.pdesc{margin:0;font-size:15px;line-height:1.6;color:var(--text-muted);text-wrap:pretty}

/* article */
.post{max-width:70ch}
.phead{padding-bottom:26px;margin-bottom:30px;border-bottom:1px solid var(--frame-gold)}
.prose{font-size:17px;line-height:1.7;color:var(--text-body)}
.prose>*+*{margin-top:1em}
.prose h2{margin-top:2em;font-size:26px;font-weight:800;letter-spacing:var(--tracking-tight);line-height:1.2;text-wrap:balance}
.prose h3{margin-top:1.6em;font-size:19px;font-weight:700;line-height:1.3}
.prose h4{margin-top:1.4em;font-size:17px;font-weight:700}
.prose p{margin-bottom:0}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent);text-underline-offset:2px}
.prose a:hover{color:var(--accent2);text-decoration-color:currentColor}
.prose ul,.prose ol{padding-left:1.4em}
.prose li+li{margin-top:.35em}
.prose blockquote{margin:1.4em 0;padding:4px 0 4px 18px;border-left:3px solid var(--laurel);color:var(--text-muted);font-size:16px}
.prose blockquote p+p{margin-top:.6em}
.prose code{font-size:.92em;background:var(--surface-sunken);border:1px solid var(--border-hairline);border-radius:var(--radius-xs);padding:.08em .38em}
.prose pre{background:var(--surface-sunken);border:1px solid var(--border-hairline);border-radius:var(--radius-sm);padding:14px 16px;overflow-x:auto;font-size:14px;line-height:1.55}
.prose pre code{background:none;border:0;padding:0;font-size:inherit}
.prose img{max-width:100%;height:auto;display:block;border-radius:var(--radius-md);border:1px solid var(--border-hairline);box-shadow:var(--shadow-card)}
.prose hr{border:0;height:1px;background:var(--frame-gold);margin:2.2em 0}
.prose table{border-collapse:collapse;width:100%;font-size:15px;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border-hairline);vertical-align:top}
.prose th{font-size:var(--text-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);font-weight:600}
.prose strong{font-weight:700}
.pfoot{margin-top:44px;padding-top:22px;border-top:1px solid var(--border-hairline);display:flex;flex-direction:column;gap:18px}
.back{color:var(--accent);text-decoration:none;font-weight:600;font-size:var(--text-sm)}
.back:hover{color:var(--accent2)}
.pnav{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pnav a{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--border-hairline);border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-body);text-decoration:none;font-weight:600;font-size:15px;line-height:1.35}
.pnav a:hover{border-color:var(--border-strong);color:var(--accent)}
.pnav-r{text-align:right;align-items:flex-end}

@media (max-width:900px){
  .blog{padding:40px 22px 12px}
  .h1{font-size:34px}
  .prose{font-size:16px}
  .pnav{grid-template-columns:1fr}
  .pnav-r{text-align:left;align-items:flex-start}
}