/* ============================================================
   blog.css — the engineering blog, layered on top of ao-page.css.
   Reuses .ao-pg / .ao-pg-hd / .docs-content and the same tokens as
   theme.css, so a post reads like the docs it sits next to.
   ============================================================ */

/* ---- index ---- */
.blog-feedline{margin-top:14px !important;font-family:'JetBrains Mono',monospace;font-size:12px}
.blog-feedline a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid var(--line)}
.blog-feedline a:hover{border-bottom-color:var(--accent-ink)}

.blog-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.blog-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px 26px;transition:.18s}
.blog-card:hover{border-color:var(--accent)}
.blog-card-link{text-decoration:none}
.blog-card h2{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:1.1rem;letter-spacing:-.4px;color:var(--ink);margin:0 0 8px;line-height:1.35}
.blog-card-link:hover h2{color:var(--accent-ink)}
.blog-card-desc{color:var(--muted);font-size:15px;line-height:1.6;margin:0 0 12px}
.blog-card-meta{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim);margin:0}
.blog-card-meta .sep{opacity:.5;margin:0 7px}
.blog-draft{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--accent-ink);border:1px solid var(--line);border-radius:999px;padding:2px 8px;vertical-align:middle}

/* ---- post header ---- */
.blog-post-meta{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--dim);margin:14px 0 0 !important}
.blog-post-meta .sep{opacity:.5;margin:0 7px}
.blog-tags{margin:12px 0 0 !important;display:flex;flex-wrap:wrap;gap:6px}
.blog-tag{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);background:var(--chip-bg);border:1px solid var(--line);border-radius:999px;padding:3px 10px}

/* ---- table of contents ---- */
.blog-toc{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 24px;margin-bottom:20px}
.blog-toc-title{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
.blog-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.blog-toc li.lvl-3{padding-left:18px}
.blog-toc li.lvl-4{padding-left:34px}
.blog-toc a{color:var(--muted);text-decoration:none;font-size:14px;line-height:1.4}
.blog-toc a:hover{color:var(--accent-ink)}

/* ---- post body ---- */
/* Prose wants a narrower measure than the docs' reference tables. */
.blog-body{max-width:none}
.blog-body p,.blog-body li{font-size:16px;line-height:1.72}
.blog-body h2{scroll-margin-top:24px}
.blog-body h3{scroll-margin-top:24px}
.blog-body table{font-size:14px}
.blog-body figcaption,.blog-body .note{color:var(--dim);font-size:14px}
.blog-body blockquote{border-left:3px solid var(--accent);padding-left:16px;margin-left:0;color:var(--muted)}

/* ---- related + closing ---- */
.blog-related{margin-top:40px}
.blog-related h2{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:1.1rem;letter-spacing:-.4px;color:var(--ink);margin:0 0 16px}
.blog-cta{margin-top:32px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:20px 24px}
.blog-cta p{margin:0;color:var(--muted);font-size:15px;line-height:1.65}
.blog-cta a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid var(--line)}
.blog-cta a:hover{border-bottom-color:var(--accent-ink)}

@media (max-width:640px){
  .blog-card{padding:20px}
  .blog-toc{padding:16px 18px}
}