/* Blog: the index uses the home page's serif headings; posts reuse the documentation reading styles. */
.blog-index { padding-block:64px 96px; min-height:65vh; }
.blog-container { max-width:820px; }
.blog-index h1 { font-family:var(--display); font-size:clamp(36px,4vw,50px); line-height:1.12; letter-spacing:0; margin:0 0 16px; }
.blog-lead { color:var(--muted); font-size:18px; margin:0 0 40px; }
.blog-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--border); }
.blog-card { padding:30px 0 32px; border-bottom:1px solid var(--border); }
.blog-card h2 { font-family:var(--display); font-size:28px; line-height:1.25; letter-spacing:0; margin:6px 0 10px; }
.blog-card h2 a { color:var(--text); }
.blog-card h2 a:hover { color:var(--link); }
.blog-card p { color:var(--soft); margin:0 0 14px; }
.blog-meta { display:flex; flex-wrap:wrap; gap:8px; color:var(--muted)!important; font-size:14px; margin:0!important; }
.blog-read { font-weight:600; font-size:15px; }

.blog-layout { display:grid; grid-template-columns:minmax(0,760px) 200px; justify-content:center; gap:64px; max-width:1440px; margin:auto; padding:0 40px; align-items:start; }
.blog-layout .docs-toc { top:0; }
.blog-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-top:56px; padding-top:24px; border-top:1px solid var(--border); font-size:14px; }
.blog-footer a:last-child { color:var(--muted); }
.docs-content figure { margin:32px 0; }
.docs-content figcaption { color:var(--muted); font-size:14px; line-height:1.6; margin-top:12px; text-align:center; }

/* Garbage collection figures (blog-gc.js) */
.gc-figure { margin:36px 0; padding:20px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.gc-figure figcaption { margin-top:16px; }
.gc-figure svg text { font-family:var(--mono); text-anchor:middle; }
.gc-compare { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.gc-panel { padding:14px; border:1px solid var(--border); border-radius:10px; background:var(--background); }
.gc-panel-title { font-weight:600; font-size:15px; margin-bottom:10px; color:var(--text); }
.gc-heap, .gc-graph { display:block; width:100%; height:auto; }
.gc-tile { fill:#c08552; stroke:#7a4519; stroke-width:1.5; transition:fill .2s, stroke .2s, stroke-width .2s; }
.gc-tile.gc-root { fill:#4b2a14; stroke:#2e190b; }
.gc-tile.gc-free { fill:none; stroke:#e3cfb6; stroke-dasharray:3 3; }
.gc-tile.gc-new { fill:#fffaf3; stroke:#a8652c; stroke-dasharray:4 3; }
.gc-tile.gc-changed { fill:#f0b44c; stroke:#a8652c; }
.gc-tile.gc-visit { stroke:#d9480f; stroke-width:5; }
.gc-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 0; }
.gc-stats dt { font-size:12px; color:var(--muted); }
.gc-stats dd { margin:0; font:600 22px/1.3 var(--mono); color:var(--text); font-variant-numeric:tabular-nums; }
.gc-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; margin-top:16px; font-size:13px; color:var(--muted); }
.gc-controls[hidden] { display:none; }
.gc-controls button, .gc-step-bar > button { min-width:44px; height:40px; padding:0 16px; border:1px solid var(--card-border); border-radius:8px; background:var(--background); color:var(--text); font-size:15px; font-weight:600; white-space:nowrap; }
.gc-controls button:hover, .gc-step-bar > button:hover:not(:disabled) { border-color:var(--link); color:var(--link); }
.gc-step-bar > button:disabled { opacity:.4; cursor:default; }
.gc-step-bar > .gc-next { background:var(--accent); border-color:var(--accent); color:#fffaf3; }
.gc-step-bar > .gc-toggle { display:inline-flex; align-items:center; gap:8px; }
.gc-toggle svg { width:13px; height:13px; fill:currentColor; }
.gc-step-bar > .gc-next:hover:not(:disabled) { background:#7d4114; border-color:#7d4114; color:#fffaf3; }
.gc-legend { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; }
.gc-legend > span { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.gc-legend i { display:inline-block; width:12px; height:12px; border-radius:3px; }
.gc-key-live { background:#c08552; }
.gc-key-new { border:1.5px dashed #a8652c; }
.gc-key-changed { background:#f0b44c; }
.gc-key-visit { border:2.5px solid #d9480f; }
.gc-stack rect { fill:#4b2a14; }
.gc-stack text { fill:#fffaf3; font-size:13px; }
.gc-node > circle { fill:#c08552; stroke:#7a4519; stroke-width:2; transition:fill .3s, stroke .3s, stroke-width .3s; }
.gc-node { transition:opacity .3s; }
.gc-node.gc-new > circle { fill:#fffaf3; stroke:#a8652c; stroke-dasharray:5 4; }
.gc-node.gc-logged > circle { fill:#f0b44c; }
.gc-node.gc-lost > circle { fill:#e8794a; stroke:#b4380d; }
.gc-node.gc-freed > circle { fill:none; stroke:#cdb9a3; stroke-dasharray:3 4; }
.gc-node.gc-visit > circle { stroke:#d9480f; stroke-width:5; }
.gc-node.gc-skipped { opacity:.35; }
.gc-node.gc-absent { opacity:0; }
.gc-count-badge circle { fill:#4b2a14; }
.gc-count-badge text { fill:#fffaf3; font-size:11px; font-weight:700; }
.gc-count-badge { transition:opacity .3s; }
.gc-count-badge.gc-hidden { opacity:0; }
.gc-edge { fill:none; stroke:#8a6a4d; stroke-width:2; transition:opacity .3s, stroke .3s; }
.gc-edge.gc-old { stroke-dasharray:5 5; opacity:.45; }
.gc-edge.gc-new { stroke:#a8652c; stroke-dasharray:5 5; }
.gc-edge.gc-count { stroke-dasharray:1 6; stroke-linecap:round; stroke-width:3; }
.gc-edge.gc-visit { stroke:#d9480f; stroke-width:3; }
.gc-edge:is(.gc-gone,.gc-absent) { opacity:0; }
.gc-arrow-plain { fill:#8a6a4d; }
.gc-arrow-new { fill:#a8652c; }
.gc-arrow-visit { fill:#d9480f; }
.gc-key-owner, .gc-key-count { width:18px!important; height:0!important; border-radius:0!important; border-top:2px solid #8a6a4d; }
.gc-key-count { border-top:3px dotted #8a6a4d; }
.gc-phase-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:12px; }
.gc-round { font-weight:600; font-size:14px; color:var(--text); }
.gc-phases { display:flex; flex-wrap:wrap; gap:6px; margin:0!important; padding:0!important; list-style:none; }
.gc-phases li { margin:0!important; padding:2px 10px; border:1px solid var(--card-border); border-radius:999px; background:var(--background); color:var(--muted); font-size:12px; line-height:1.6; }
.gc-phases li[aria-current] { background:var(--accent); border-color:var(--accent); color:#fffaf3; }
.gc-step-text { min-height:4.8em; margin-top:12px; font-size:15px; line-height:1.6; color:var(--soft); }
.gc-step-text strong { color:var(--text); margin-right:4px; }
.gc-step-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.gc-step-bar[hidden] { display:none; }
.gc-dots { flex:1; display:flex; justify-content:center; gap:2px; }
.gc-dots button { position:relative; width:16px; height:28px; padding:0; border:0; background:none; transition:width .25s; }
.gc-dots button:nth-child(8) { margin-left:10px; }
.gc-dots button::before, .gc-dots button::after { content:""; position:absolute; left:4px; right:4px; top:10px; height:8px; border-radius:4px; background:#dcc3a6; }
.gc-dots button::after { right:auto; width:0; background:var(--accent); }
.gc-dots button:hover::before { background:#c9a882; }
.gc-dots button[aria-current] { width:36px; }
.gc-dots button[aria-current]::before { background:var(--accent); }
.gc-autoplay .gc-dots button[aria-current]::before { background:#dcc3a6; }
.gc-autoplay .gc-dots button[aria-current]::after { animation:gc-step-fill var(--gc-step-ms) linear forwards; }
@keyframes gc-step-fill { to { width:calc(100% - 8px); } }
@media (prefers-reduced-motion:reduce) {
    .gc-figure * { transition:none!important; }
}

@media (max-width:1199px) {
    .blog-layout { grid-template-columns:minmax(0,760px); padding:0 32px; }
}
@media (max-width:760px) {
    .blog-index { padding-block:40px 64px; }
    .blog-lead { font-size:17px; }
    .blog-card h2 { font-size:24px; }
    .blog-layout { padding:0 22px; }
    .docs-content .gc-figure { padding:14px 10px; margin-inline:-22px; border-radius:0; border-inline:0; }
    .gc-compare { grid-template-columns:1fr; }
    .gc-step-text { font-size:14px; min-height:10.5em; }
    .gc-dots { order:-1; flex-basis:100%; }
}