/* Blog only (/blog, /blog/<slug>). Built by site/blog.mjs, served by license-server/src/blog.ts. Tokens, .edge, .label and the 3 button classes come from pearl.css; only the reading layout is here. */
.post-hero{padding:clamp(124px,13vw,164px) 0 28px}
.post-hero .wrap{max-width:820px}
.post-hero h1{margin:18px 0 0;font-size:clamp(34px,4.6vw,56px);line-height:1.05}
.post-hero .lead{margin-top:16px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font:500 14px/1.2 var(--f-b);color:var(--ink-3)}
.il{display:inline;font:inherit;color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.il .btn-t{padding:0;background:none}
.il:hover{text-decoration-thickness:2px}
.crumbs .il,.post-toc .il,.post-meta .il{color:var(--ink-2)}
.crumbs .il:hover,.post-toc .il:hover{color:var(--accent)}
.post-meta{margin-top:18px;font-size:15px;color:var(--ink-2)}
.label{font:600 12.5px/1.2 var(--f-b);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.post-wrap{max-width:820px;padding-bottom:clamp(56px,7vw,96px)}
.post-cover{display:block;margin-bottom:8px;width:100%;height:auto;border:1px solid var(--line-2);border-radius:20px}
.post-toc{margin:36px 0 28px;padding:20px 24px}
.post-toc .label{margin-bottom:10px}
.post-toc ol{display:grid;gap:6px;margin:0;padding-left:20px;font-size:15.5px}

/* the article: one readable column */
.post-body{font-size:17.5px;line-height:1.75;color:var(--ink-2)}
.post-body :is(b,strong){color:var(--ink)}
.post-body h2{margin:52px 0 14px;font-size:clamp(25px,3vw,32px);line-height:1.15;color:var(--ink);scroll-margin-top:96px}
.post-body h3{margin:34px 0 8px;font:700 20.5px/1.3 var(--f-d);letter-spacing:-.02em;color:var(--ink);scroll-margin-top:96px}
.post-body p{margin:0 0 18px}
.post-body :is(ul,ol){margin:0 0 20px;padding-left:24px}
.post-body li{margin:6px 0}
.post-body li::marker{color:var(--ink-3)}
.post-body :not(pre)>code{padding:.1em .35em;border-radius:6px;background:var(--sunken);font:500 .88em var(--f-m0);color:var(--ink)}
.post-body .codeblock{margin:0 0 22px;padding:16px 18px;border-radius:16px;background:#0F0F14;overflow-x:auto;font:13.5px/1.65 var(--f-m0);color:#F3F2EF;tab-size:2}
.post-body .codeblock code{padding:0;background:none;font:inherit;color:inherit}
.post-body blockquote{margin:24px 0;padding:16px 22px;border-left:3px solid var(--accent);border-radius:0 12px 12px 0;background:var(--sunken)}
.post-body blockquote p:last-child{margin:0}
.post-body .table{margin:8px 0 24px;overflow-x:auto;border:1px solid var(--line-2);border-radius:14px;background:var(--surface)}
.post-body table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.post-body :is(th,td){padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.post-body th{font-weight:600;color:var(--ink)}
.post-body tr:last-child td{border-bottom:0}

/* author, related posts, call to action */
.post-author{display:flex;gap:18px;align-items:flex-start;margin-top:56px;padding:24px}
.post-author img{flex:none;border-radius:10px}
.post-author p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.post-author .post-author-name{margin-bottom:4px;font:600 17px/1.4 var(--f-b);color:var(--ink)}
.post-related{margin-top:64px}
.post-related h2{margin-bottom:22px;font-size:clamp(24px,2.6vw,30px)}
.post-related .bgrid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.post-cta{margin:64px 0 0;padding:32px;text-align:center}
.post-cta p{max-width:520px;margin:0 auto;color:var(--ink-2)}
.post-cta .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:20px}

/* the list (/blog) */
.blog-list{padding-bottom:clamp(56px,7vw,96px)}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.bcard{display:flex;padding:0;gap:0;font:inherit;text-align:left;flex-direction:column;overflow:hidden;border:1px solid var(--line-2);border-radius:20px;background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);transition:box-shadow .3s,transform .3s}
.bcard:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.bcard:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.bcard img{display:block;width:100%;height:auto;aspect-ratio:1200/630;border-bottom:1px solid var(--line)}
.bcard div{display:flex;flex-direction:column;gap:8px;flex:1;padding:18px 20px 22px}
.bcard :is(h2,h3){font:700 20px/1.28 var(--f-d);letter-spacing:-.02em}
.bcard p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.bcard-tag{font:600 12px/1.2 var(--f-b);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.bcard-meta{margin-top:auto;padding-top:6px;font-size:13.5px;color:var(--ink-2)}
@media (max-width:600px){.post-body{font-size:16.5px}.post-author{flex-direction:column}.post-cta{padding:24px 18px}.bgrid{grid-template-columns:1fr}.blog-list .bcard img{display:none}}
.post-body .faq-list{margin-top:20px}
.post-body .qa p{margin:0;font-size:16px}