/* Blog pages. Uses the tokens from site.css. */
.bl-hero{padding:72px 0 0}
.bl-hero h1{font-size:clamp(32px,4.4vw,50px); font-weight:800; letter-spacing:-.032em; max-width:20ch}
.bl-hero .lede{color:var(--muted); font-size:18.5px; line-height:1.62; margin-top:20px; max-width:54ch}
.bl-list{padding:48px 0 0}
.bl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.bl-card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:26px 26px 24px; box-shadow:var(--shadow-sm); transition:border-color .15s, box-shadow .15s}
.bl-card:hover{border-color:var(--faint); box-shadow:var(--shadow)}
.bl-card time{font-size:13px; font-weight:500; color:var(--faint)}
.bl-card h2{font-size:20px; letter-spacing:-.02em; line-height:1.25; margin-top:10px}
.bl-card p{color:var(--muted); font-size:15px; line-height:1.6; margin-top:10px; flex:1}
.bl-more{display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-size:14px; font-weight:600; color:var(--accent)}
.bl-empty{color:var(--muted)}
.bl-more-h{font-size:24px; margin-bottom:24px}
.bl-more-posts{padding-top:72px}
@media(max-width:960px){ .bl-grid{grid-template-columns:1fr 1fr} }
@media(max-width:620px){ .bl-grid{grid-template-columns:1fr} }

.post{padding:56px 0 0}
.post-col{max-width:720px; margin:0 auto}
.post-back{display:inline-block; font-size:14px; font-weight:500; color:var(--muted); margin-bottom:28px}
.post-back:hover{color:var(--accent)}
.post-head h1{font-size:clamp(30px,4.2vw,44px); font-weight:800; letter-spacing:-.03em; line-height:1.12}
.post-head .lede{color:var(--muted); font-size:19px; line-height:1.6; margin-top:18px}
.post-meta{display:flex; gap:10px; align-items:center; color:var(--faint); font-size:13.5px; font-weight:500; margin-top:22px; padding-bottom:28px; border-bottom:1px solid var(--line)}
.post-body{padding-top:32px; font-size:17px; line-height:1.72; color:var(--fg)}
.post-body > * + *{margin-top:1.15em}
.post-body h2{font-size:27px; letter-spacing:-.024em; margin-top:2.1em; line-height:1.2}
.post-body h3{font-size:20px; letter-spacing:-.018em; margin-top:1.8em}
.post-body p, .post-body li{color:#2b3647}
.post-body a{color:var(--accent2); text-decoration:underline; text-decoration-color:var(--accent-line); text-underline-offset:3px}
.post-body a:hover{text-decoration-color:var(--accent)}
.post-body ul, .post-body ol{padding-left:1.4em}
.post-body li + li{margin-top:.45em}
.post-body blockquote{margin-left:0; padding:2px 0 2px 20px; border-left:3px solid var(--accent-line); color:var(--muted)}
.post-body code{font-family:var(--mono); font-size:.88em; background:var(--raised); border:1px solid var(--line2); border-radius:5px; padding:1px 6px}
.post-body pre{background:#14202f; color:#e4ebf5; border-radius:10px; padding:18px 20px; overflow-x:auto; font-size:14px; line-height:1.6}
.post-body pre code{background:none; border:0; padding:0; color:inherit; font-size:inherit}
.post-body table{width:100%; border-collapse:collapse; font-size:15px}
.post-body th, .post-body td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line)}
.post-body th{font-weight:600; background:var(--raised)}
.post-body hr{border:0; border-top:1px solid var(--line); margin:2.2em 0}
.post-body img{border-radius:10px; height:auto}