/* ============================================================
   BURROW BLOG, index + post
   Layers on top of main.css (tokens + nav + badges + terminal).
   ============================================================ */

.blog-wrap { padding-top:var(--space-6); padding-bottom:var(--space-16); }

.nav-links a.is-active { color:var(--text-strong); font-weight:var(--fw-semibold); }
.eyebrow .eyebrow-dot { width:6px; height:6px; border-radius:var(--radius-pill); background:var(--accent); flex-shrink:0; }

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.blog-hero {
  display:flex; align-items:flex-end; gap:var(--space-8); flex-wrap:wrap;
  padding:var(--space-16) 0 var(--space-10);
}
.blog-hero-copy { max-width:640px; flex-shrink:0; }
.blog-hero h1 {
  margin-top:var(--space-4); font-size:var(--text-3xl); line-height:1.06;
  letter-spacing:-0.03em; color:var(--text-strong);
}
.blog-hero .sub { margin-top:var(--space-4); font-size:var(--text-md); line-height:1.55; color:var(--text-muted); max-width:560px; }
.blog-hero-visual { flex:1; display:flex; justify-content:center; min-width:180px; }
.blog-hero-visual img { height:150px; width:auto; filter:drop-shadow(0 14px 30px rgba(0,0,0,0.4)); }

/* ------------------------------------------------------------
   CATEGORY FILTER
   ------------------------------------------------------------ */
.blog-filters {
  display:flex; gap:var(--space-2); flex-wrap:wrap;
  padding-bottom:var(--space-8); border-bottom:1px solid var(--border-subtle); margin-bottom:var(--space-10);
}
.filter-chip {
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 16px;
  border-radius:var(--radius-pill); font-family:var(--font-sans); font-size:var(--text-sm); font-weight:var(--fw-semibold);
  background:var(--surface); color:var(--text-muted); border:1px solid var(--border); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.filter-chip:hover { color:var(--text-strong); border-color:var(--border-strong); }
.filter-chip.is-active { background:var(--brand); color:var(--on-brand); border-color:transparent; }
.filter-chip .count { font-family:var(--font-mono); font-size:11px; opacity:0.6; }

/* ------------------------------------------------------------
   CATEGORY PILLS + AVATARS (shared)
   ------------------------------------------------------------ */
.cat-pill {
  display:inline-flex; align-items:center; height:22px; padding:0 10px; border-radius:var(--radius-pill);
  font-size:11px; font-weight:var(--fw-semibold); letter-spacing:0.01em; line-height:1; white-space:nowrap;
}
.cat-engineering { color:var(--info-text); background:var(--info-subtle); }
.cat-product { color:var(--accent-active); background:var(--accent-subtle); }
.cat-company { color:var(--brand); background:var(--brand-subtle); }
.cat-changelog { color:var(--success-text); background:var(--success-subtle); }
.cat-neutral { color:var(--text-muted); background:var(--bg-subtle); }
.cat-featured { color:var(--accent-active); background:transparent; border:1px solid color-mix(in oklab, var(--accent) 40%, transparent); }

.avatar {
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:40px; height:40px; border-radius:var(--radius-pill);
  font-family:var(--font-mono); font-size:14px; font-weight:var(--fw-semibold); color:var(--sand-50);
}
.avatar-sm { width:30px; height:30px; font-size:12px; }
.avatar-lg { width:44px; height:44px; font-size:15px; }
.avatar-xl { width:52px; height:52px; font-size:17px; }
.avatar-navy { background:var(--navy-600); }
.avatar-orange { background:var(--orange-600); }
.avatar-teal { background:var(--teal-600); }
.avatar-green { background:var(--green-600); }
.avatar-sand { background:var(--sand-600); }

.byline { display:flex; align-items:center; gap:var(--space-3); margin-top:auto; padding-top:var(--space-6); }
.byline-name { font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--text-strong); }
.byline-meta { font-family:var(--font-mono); font-size:12px; color:var(--text-subtle); }
.byline-role { font-size:13px; color:var(--text-subtle); }

/* ------------------------------------------------------------
   FEATURED CARD
   ------------------------------------------------------------ */
.featured-card {
  display:grid; grid-template-columns:1.15fr 1fr; margin-bottom:var(--space-16);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-2xl);
  overflow:hidden; box-shadow:var(--shadow-sm); color:inherit;
  transition:box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.featured-card:hover { box-shadow:var(--shadow-lg); border-color:var(--border-strong); transform:translateY(-2px); }
.featured-cover { min-height:340px; background:var(--surface-sunken); }
.featured-cover img { width:100%; height:100%; object-fit:cover; }
.featured-body { padding:var(--space-10) var(--space-10) var(--space-8); display:flex; flex-direction:column; }
.pill-row { display:flex; gap:var(--space-2); margin-bottom:var(--space-4); }
.featured-body h2 { font-size:var(--text-2xl); line-height:1.12; font-weight:var(--fw-extrabold); letter-spacing:-0.025em; color:var(--text-strong); }
.featured-excerpt { margin-top:var(--space-4); font-size:var(--text-base); line-height:1.6; color:var(--text-muted); }

/* ------------------------------------------------------------
   POST GRID
   ------------------------------------------------------------ */
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-7, 1.75rem); }
.post-card {
  display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-xs); color:inherit;
  transition:box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.post-card:hover { box-shadow:var(--shadow-md); border-color:var(--border-strong); transform:translateY(-3px); }
.post-cover { height:180px; background:var(--surface-sunken); }
.post-cover img { width:100%; height:100%; object-fit:cover; }
.post-cover-sm { height:150px; }
.post-body { padding:var(--space-5) var(--space-5) var(--space-6); display:flex; flex-direction:column; flex:1; }
.post-body .cat-pill { align-self:flex-start; margin-bottom:var(--space-3); }
.post-body h3 { font-size:var(--text-lg); line-height:1.22; font-weight:var(--fw-bold); letter-spacing:-0.02em; color:var(--text-strong); }
.post-excerpt { margin-top:var(--space-2_5); font-size:var(--text-sm); line-height:1.55; color:var(--text-muted); }
.post-footer { display:flex; align-items:center; gap:var(--space-2_5); margin-top:var(--space-5); }
.post-readtime { margin-left:auto; font-family:var(--font-mono); font-size:12px; color:var(--text-subtle); }
.post-date { margin-top:var(--space-2_5); font-family:var(--font-mono); font-size:12px; color:var(--text-subtle); }

/* ------------------------------------------------------------
   ARTICLE
   ------------------------------------------------------------ */
.article-head { max-width:760px; margin:0 auto; padding:var(--space-14, 3.5rem) 0 var(--space-9, 2.25rem); }
.back-link { display:inline-flex; align-items:center; gap:4px; font-size:13px; color:var(--text-muted); margin-bottom:var(--space-5); }
.back-link:hover { color:var(--text-strong); }
.back-link .icon { width:15px; height:15px; }
.article-meta { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4); }
.article-meta-date { font-family:var(--font-mono); font-size:12px; color:var(--text-subtle); }
.article-head h1 { font-size:var(--text-3xl); line-height:1.08; letter-spacing:-0.03em; color:var(--text-strong); }
.article-head .deck { margin-top:var(--space-4); font-size:var(--text-md); line-height:1.55; color:var(--text-muted); }
.article-byline { display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-6); padding-top:var(--space-6); border-top:1px solid var(--border-subtle); }

.article-cover { max-width:1000px; margin:0 auto; height:440px; border-radius:var(--radius-2xl); overflow:hidden; background:var(--surface-sunken); }
.article-cover img { width:100%; height:100%; object-fit:cover; }

.article-body { display:grid; grid-template-columns:1fr minmax(0,720px) 1fr; gap:var(--space-8); padding:var(--space-12) 0 var(--space-10); }

/* table of contents */
.toc { position:sticky; top:96px; align-self:start; }
.toc-label { font-family:var(--font-mono); font-size:var(--text-2xs); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--text-subtle); margin-bottom:var(--space-3); }
.toc-nav { display:flex; flex-direction:column; border-left:1px solid var(--border); }
.toc-link { padding:5px 0 5px var(--space-4); margin-left:-1px; border-left:1px solid transparent; font-size:13px; line-height:1.35; color:var(--text-muted); transition:color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
.toc-link:hover { color:var(--text-strong); border-left-color:var(--border-strong); }
.toc-sub { padding-left:var(--space-6); font-size:12.5px; }

/* ------------------------------------------------------------
   PROSE
   ------------------------------------------------------------ */
.prose { color:var(--text-body); font-size:1.0625rem; line-height:1.72; }
.prose > p { margin:0 0 var(--space-5); }
.prose h2 { font-size:var(--text-xl); font-weight:var(--fw-extrabold); letter-spacing:-0.025em; color:var(--text-strong); margin:var(--space-11, 2.75rem) 0 var(--space-4); scroll-margin-top:88px; }
.prose h3 { font-size:var(--text-md); font-weight:var(--fw-bold); color:var(--text-strong); margin:var(--space-8) 0 var(--space-3); scroll-margin-top:88px; }
.prose ul, .prose ol { margin:0 0 var(--space-5); padding-left:var(--space-6); }
.prose li { margin-bottom:var(--space-2); }
.prose li::marker { color:var(--text-subtle); }
.prose a { color:var(--text-link); font-weight:var(--fw-medium); }
.prose a:hover { text-decoration:underline; }
.prose strong { color:var(--text-strong); font-weight:var(--fw-bold); }
.prose blockquote { margin:var(--space-6) 0; padding:var(--space-2) 0 var(--space-2) var(--space-5); border-left:3px solid var(--border-strong); color:var(--text-muted); }
/* inline code, scoped so it does not hit fenced code blocks */
.prose p code, .prose li code, .prose h3 code {
  font-family:var(--font-mono); font-size:0.875em; background:var(--bg-subtle);
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm); padding:1px 6px;
}
/* fenced code block */
.prose pre {
  margin:var(--space-6) 0; padding:var(--space-4); border-radius:var(--radius-lg);
  background:var(--code-bg); border:1px solid var(--code-border); color:var(--ink-100);
  font-family:var(--font-mono); font-size:var(--text-sm); line-height:var(--leading-relaxed); overflow-x:auto;
}
.prose pre code { font-family:inherit; background:none; border:none; padding:0; font-size:inherit; color:inherit; }
.prose .terminal, .prose .callout, .prose .codeblock { margin:var(--space-6) 0; }
.prose img { border-radius:var(--radius-md); margin:var(--space-6) 0; }

/* ------------------------------------------------------------
   CALLOUT
   ------------------------------------------------------------ */
.callout {
  display:flex; flex-direction:column; gap:5px; padding:var(--space-4) var(--space-5);
  border-radius:var(--radius-md); border:1px solid var(--border); border-left:3px solid var(--border-strong); background:var(--bg-subtle);
}
.callout-title { font-size:var(--text-sm); font-weight:var(--fw-bold); color:var(--text-strong); }
.callout-body { font-size:var(--text-sm); line-height:1.6; color:var(--text-body); }
.callout-info { background:var(--info-subtle); border-color:color-mix(in oklab, var(--info) 30%, transparent); border-left-color:var(--info); }
.callout-info .callout-title { color:var(--info-text); }
.callout-warning { background:var(--warning-subtle); border-color:color-mix(in oklab, var(--warning) 30%, transparent); border-left-color:var(--warning); }
.callout-warning .callout-title { color:var(--warning-text); }

/* ------------------------------------------------------------
   END-OF-POST CTA
   ------------------------------------------------------------ */
.post-cta {
  max-width:760px; margin:var(--space-4) auto 0; text-align:center;
  padding:var(--space-10) var(--space-8);
  background:var(--brand-subtle); border:1px solid color-mix(in oklab, var(--brand) 30%, transparent);
  border-radius:var(--radius-xl);
}
.post-cta h2 { font-size:var(--text-xl); letter-spacing:-0.02em; color:var(--text-strong); }
.post-cta p { margin:var(--space-3) auto 0; max-width:46ch; font-size:var(--text-md); line-height:1.55; color:var(--text-muted); }
.post-cta-actions { display:flex; gap:var(--space-3); justify-content:center; margin-top:var(--space-6); flex-wrap:wrap; }

/* ------------------------------------------------------------
   AUTHOR BIO
   ------------------------------------------------------------ */
.author-bio {
  max-width:760px; margin:var(--space-6) auto 0; display:flex; gap:var(--space-4);
  padding:var(--space-6); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-xs);
}
.author-bio .bio-text { margin-top:var(--space-2); font-size:var(--text-sm); line-height:1.6; color:var(--text-muted); }

/* ------------------------------------------------------------
   RELATED
   ------------------------------------------------------------ */
.related { background:var(--bg-subtle); border-top:1px solid var(--border); margin-top:var(--space-16); padding:var(--space-14, 3.5rem) 0 var(--space-20); }
.related-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--space-8); }
.related-head h2 { font-size:var(--text-2xl); letter-spacing:-0.03em; }
.related-all { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--text-link); }
.related-all .icon { width:16px; height:16px; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.blog-footer { background:var(--bg-subtle); border-top:1px solid var(--border); padding:var(--space-10) 0; margin-top:var(--space-16); }
.blog-footer-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap; }
.blog-footer-brand { display:flex; align-items:center; gap:var(--space-4); }
.blog-footer-tag { font-size:var(--text-sm); color:var(--text-muted); }
.blog-footer-links { display:flex; gap:var(--space-6); flex-wrap:wrap; }
.blog-footer-links a { font-size:13px; color:var(--text-muted); }
.blog-footer-links a:hover { color:var(--text-strong); }

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
.featured-card > *, .post-card > * { min-width:0; }

@media (max-width:1024px) {
  .article-body { grid-template-columns:1fr; gap:0; }
  .toc { display:none; }
  .article-body > .prose { max-width:720px; margin:0 auto; }
  .post-grid, .related-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px) {
  .featured-card { grid-template-columns:1fr; }
  .featured-cover { min-height:200px; height:220px; }
}
@media (max-width:760px) {
  /* stack the hero so the long headline wraps and the mascot sits under it */
  .blog-hero { flex-direction:column; gap:var(--space-6); }
  .blog-hero-copy { width:100%; max-width:100%; }
  .blog-hero-visual { width:100%; justify-content:flex-start; }
}
@media (max-width:640px) {
  .post-grid, .related-grid { grid-template-columns:1fr; }
  .blog-hero { padding-top:var(--space-10); }
  .blog-hero h1 { font-size:var(--text-2xl); }
  .article-head h1 { font-size:var(--text-2xl); }
  .article-cover { height:240px; border-radius:var(--radius-lg); }
  .related-head { flex-direction:column; gap:var(--space-2); align-items:flex-start; }
}