/* Blog index and posts. Layered on styles.css; every rule is scoped to blog classes. */

/* Index: featured card */
.blog-index{padding-bottom:96px}
.blog-index .page-head .lead{max-width:36em;margin:0}
.blog-index .feature-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));background:var(--band);color:var(--band-ink);border-radius:32px;overflow:hidden;text-decoration:none;margin:16px 0 40px}
.blog-index .feature-card:hover{color:var(--band-ink)}
.blog-index .fc-copy{padding:40px;display:flex;flex-direction:column;gap:16px;min-width:0}
.blog-index .fc-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.blog-index .fc-title{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(34px,4vw,52px);line-height:1;letter-spacing:-.02em}
.blog-index .fc-desc{color:var(--band-muted);font-size:16px;line-height:1.55;max-width:30em}
.blog-index .fc-meta{margin-top:auto;font-size:13px;color:var(--band-muted)}
.blog-index .fc-visual{padding:40px;display:flex;align-items:center;justify-content:center;background:color-mix(in oklab,var(--band-ink) 8%,transparent)}
.blog-index .fc-ledger{width:100%;max-width:340px;font-family:var(--mono);font-size:14px;line-height:1.8}
.blog-index .fc-row{display:flex;justify-content:space-between;gap:12px}
.blog-index .fc-head{color:var(--band-muted);font-size:11px;letter-spacing:.1em;margin-bottom:6px}
.blog-index .fc-sum{border-top:3px double var(--band-line);margin-top:8px;padding-top:6px;color:var(--accent)}

/* Index: list */
.blog-index .post-list{list-style:none;margin:0;padding:0;border-top:3px double var(--ink15)}
.blog-index .post-list li{border-bottom:1px solid var(--line)}
.blog-index .post-list a{display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:8px 32px;padding:28px 0;text-decoration:none;color:var(--ink)}
.blog-index .post-list a:hover{color:var(--accent-text)}
.blog-index .pl-tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink55);padding-top:6px}
.blog-index .pl-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.blog-index .pl-title{margin:0;font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.blog-index .pl-desc{color:var(--ink70);font-size:16px;line-height:1.5}
.blog-index .pl-read{font-size:13px;color:var(--ink55);padding-top:6px;text-align:right;white-space:nowrap}
.blog-index .disclaimer{margin:28px 0 0;font-size:14px;color:var(--ink55)}
@media (max-width:700px){
.blog-index .fc-copy,.blog-index .fc-visual{padding:28px 24px}
.blog-index .post-list a{grid-template-columns:1fr;gap:6px;padding:22px 0}
.blog-index .pl-tag,.blog-index .pl-read{padding-top:0;text-align:left}
.blog-index .pl-read{order:3}
}

/* Post */
.post{padding-top:56px;padding-bottom:96px}
.post-head{max-width:820px;margin:0 0 48px}
.post .breadcrumb{align-items:center}
.post-title{font-size:clamp(40px,6vw,80px);line-height:.98;margin:0 0 20px}
.post-meta{margin:0;font-size:14px;color:var(--ink55);font-family:var(--mono)}
.post-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px 64px;align-items:start}
.post-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:24px}
.post .app-card{border-radius:22px;padding:22px}
.post .prose h2{scroll-margin-top:96px}
.post .prose .formula sub,.post .prose .formula sup{font-size:.55em}
.post .prose .formula{line-height:1.5}
.post .prose .table-wrap:focus-visible{outline-offset:-3px}
.post .prose caption{text-align:left;padding:14px 18px 0;font-weight:600;font-size:15px;caption-side:top}
.post .prose th[scope=col].num{text-align:right}
.post .prose .callout h2{margin:0 0 12px;font-size:22px}
.post .prose .callout ul{margin-bottom:0}
.post .prose .faq-block{margin-bottom:8px}
.post .prose .faq-block h2{margin-bottom:16px}
.post .prose .faq summary{font-size:17px;line-height:1.45}
.post .prose .faq details > p{font-size:16px;margin-bottom:0}
.post .prose .related h2{font-size:22px}
.post .prose .pills{display:flex;flex-wrap:wrap;gap:8px}
.post .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:24px 0}
.post .stat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}
.post .stat-label{font-size:13px;color:var(--ink55);line-height:1.4}
.post .stat-value{font-family:var(--serif);font-size:40px;line-height:1.1}
.post .stat.hi{background:var(--green-soft)}
.post .stat.hi .stat-label,.post .stat.hi .stat-value{color:var(--green)}
@media (max-width:900px){
.post{padding-top:36px}
.post-head{margin-bottom:32px}
.post-grid{grid-template-columns:minmax(0,1fr)}
.post-aside{position:static}
.post-aside .toc{display:none}
.post .prose{font-size:17px}
.post .prose h2{font-size:25px}
.post .prose .summary{font-size:19px}
.post .prose .formula{font-size:22px;padding:20px}
}