.blog-hero{padding-top:34px;padding-bottom:48px}
.blog-crumb{display:flex;flex-wrap:wrap;gap:10px;color:var(--ink-soft);font-size:12px;margin-bottom:50px}
.blog-crumb a{text-decoration:underline;text-underline-offset:3px}
.blog-hero h1{font-size:clamp(38px,4.7vw,66px);max-width:22ch;line-height:1.08}
.blog-hero .lede{max-width:65ch;margin-top:24px;margin-bottom:18px}
.blog-byline{font-size:12px;color:var(--ink-soft)}
.blog-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(180px,250px);gap:clamp(30px,5vw,70px);align-items:start;padding-bottom:54px}
.blog-content{grid-column:1;grid-row:1;min-width:0;font-size:16px;line-height:1.85}
.blog-content>p:first-child{font-size:18px;color:var(--ink-soft)}
.blog-content section{padding:0;margin:42px 0 0;scroll-margin-top:130px}
.blog-content h2{font-size:clamp(28px,2.5vw,36px);margin-bottom:20px;line-height:1.18}
.blog-content h3{margin:25px 0 14px;font-size:24px}
.blog-content a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;overflow-wrap:anywhere}
.blog-content a:hover{text-decoration-color:var(--ink)}
.blog-content .tscroll{margin:26px 0;max-width:100%;border:1px solid var(--line);background:rgba(255,255,255,.45)}
.blog-content table{width:100%;margin:0;font-size:14px;line-height:1.65}
.blog-content th{font-weight:500;color:var(--ink);background:var(--bg-alt)}
.blog-content th,.blog-content td{padding:14px 16px;vertical-align:top;min-width:140px}
.blog-content .faq details{background:transparent}
.blog-content .faq summary{font-size:16px;line-height:1.6;padding-right:30px}
.blog-content .faq .ans p{font-size:15px;margin:0}
.blog-toc{grid-column:2;grid-row:1;position:sticky;top:120px;padding:20px;border:1px solid var(--line);font-size:13px;line-height:1.65}
.blog-toc summary{cursor:pointer;font-size:14px;font-weight:500}
.blog-toc ol{padding-left:18px;margin-bottom:0}
.blog-toc li{margin:14px 0}
.blog-toc a:hover{text-decoration:underline}
.blog-back{display:flex;flex-wrap:wrap;gap:24px;padding-top:30px;padding-bottom:64px;border-top:1px solid var(--line-soft)}
.blog-library{padding-top:0;padding-bottom:80px}
.blog-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,220px) auto;gap:20px;align-items:end;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.blog-controls[hidden],.blog-card[hidden],#blog-empty[hidden]{display:none}
.blog-controls label{font-size:13px;display:block}
.blog-controls input,.blog-controls select{display:block;width:100%;min-width:0;margin-top:7px;border:1px solid var(--line);background:transparent;padding:12px;font:inherit;color:var(--ink);border-radius:0}
.blog-controls button{padding:13px 18px;background:var(--ink);color:var(--bg);border:1px solid var(--ink);font:inherit;font-size:13px;cursor:pointer}
#blog-count{font-size:13px;color:var(--ink-soft);margin:25px 0}
.blog-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.blog-card{padding:35px 0;border-top:1px solid var(--line);min-width:0}
.blog-card h2{font-size:clamp(27px,2.7vw,35px);line-height:1.16;margin-bottom:16px}
.blog-card h2 a:hover{text-decoration:underline;text-underline-offset:5px}
.blog-card .eyebrow{margin-bottom:16px;letter-spacing:.12em}
.blog-card>p:last-child{max-width:52ch;margin-bottom:0;color:var(--ink-soft);font-size:14px}
.blog-page :focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media(max-width:900px){
 .blog-layout{display:block}
 .blog-toc{position:static;margin-bottom:32px;max-width:760px}
 .blog-content{max-width:760px}
 .blog-grid{gap:0 30px}
 .blog-controls{grid-template-columns:minmax(0,1fr) minmax(140px,180px)}
 .blog-controls button{justify-self:start}
}
@media(max-width:540px){
 .blog-hero{padding-top:25px;padding-bottom:30px}
 .blog-crumb{margin-bottom:34px}
 .blog-hero h1{max-width:none}
 .blog-content>p:first-child{font-size:16px}
 .blog-content section{margin-top:34px}
 .blog-content th,.blog-content td{padding:12px;min-width:125px}
 .blog-grid,.blog-controls{grid-template-columns:minmax(0,1fr)}
 .blog-card{padding:28px 0}
 .blog-card h2{font-size:30px}
}