/* Generated by scripts/build-blog.mts - edit the template there, not here. */
/* Layout only. guides.css owns the chrome, the type scale and the tokens; this
   must not redeclare any of them. No backticks in this block: it is a TS
   template literal and one would end the string. */
.wrap.doc.blog{max-width:1360px}
.blog{--measure:720px}
.blog .doc-main{max-width:none}
/* :not(.b-end) and the rest break out; everything else reads at the measure.
   The section element is a direct child of doc-main, so it needs excluding by
   name or it caps everything inside it. */
.blog .doc-main>*:not(.b-fig):not(.b-tw):not(.b-code):not(.b-end):not(.b-more){max-width:var(--measure)}
.blog .b-end>*{max-width:var(--measure)}
.kicker{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.blog h1{font-size:clamp(30px,4.4vw,46px);max-width:20ch;margin-bottom:16px}
.byline{margin:0 0 24px;font-size:14.5px;color:var(--ink-faint)}
.byline a{color:var(--ink-soft)}
.b-intro p{font-size:19px;line-height:1.62;color:var(--ink);margin:0 0 14px}
.b-intro p:not(:first-child){color:var(--ink-soft)}
.blog h2{font-size:clamp(21px,2.3vw,27px);margin:44px 0 14px;padding-top:24px}
.blog h3{font-size:18px;margin:26px 0 8px}
.blog p,.blog li{font-size:16.5px;line-height:1.72}
.b-ticks{list-style:none;margin:0 0 14px;padding:0}
.b-ticks li{position:relative;padding-left:26px;margin:0 0 10px}
.b-ticks li:before{content:"";position:absolute;left:4px;top:.66em;width:9px;height:9px;border-radius:50%;background:var(--accent);opacity:.5}
.b-steps{margin:0 0 14px;padding-left:24px}
.b-steps li{margin:0 0 10px;padding-left:4px}
.b-fig{margin:28px 0;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;background:var(--wash)}
.b-fig img{display:block;width:100%;height:auto;background:#fff}
.b-fig figcaption{font-size:13.5px;line-height:1.55;color:var(--ink-faint);padding:11px 16px;border-top:1px solid var(--hairline)}
.b-call{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--radius);padding:16px 20px;margin:24px 0}
.b-call h4{margin:0 0 6px;font-size:16px;color:var(--warn-ink)}
.b-call p{margin:0;font-size:15.5px;color:var(--warn-ink)}
blockquote{margin:24px 0;padding:14px 20px;border-left:3px solid var(--accent);background:var(--wash);border-radius:0 var(--radius) var(--radius) 0;font-size:16.5px;color:var(--ink-soft)}
blockquote cite{display:block;margin-top:8px;font-size:13.5px;font-style:normal;color:var(--ink-faint)}
.b-code{margin:24px 0;border-radius:var(--radius);overflow:hidden;background:#12151b}
.b-code figcaption{padding:9px 16px;font:700 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.07em;text-transform:uppercase;color:#8d95a3;border-bottom:1px solid #232833}
.b-code pre{margin:0;padding:16px 18px;overflow-x:auto}
.b-code code{font:400 13.5px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:#e7eaf0;background:none;border:0;padding:0}
code{background:var(--wash);border:1px solid var(--hairline);border-radius:6px;padding:1px 5px;font:400 .88em/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
/* A REAL table, never a picture of one. It scrolls inside its own box on a
   phone; the page body must never scroll sideways. */
.b-tw{margin:26px 0;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden}
.b-tw figcaption{padding:11px 16px;font-size:13px;color:var(--ink-faint);background:var(--wash);border-bottom:1px solid var(--hairline)}
.b-tw-s{overflow-x:auto}
.b-tw table{border-collapse:collapse;width:100%;font-size:15px}
.b-tw th,.b-tw td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--hairline);vertical-align:top}
.b-tw thead th{background:var(--wash);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.b-tw tbody th{font-weight:700;color:var(--ink)}
.b-tw tbody tr:last-child th,.b-tw tbody tr:last-child td{border-bottom:0}
.b-faq{margin:0 0 4px}
.b-faq h3{margin:24px 0 6px}
.b-faq p{color:var(--ink-soft)}
.b-end{margin-top:8px}
.b-more{margin-top:44px;border-top:1px solid var(--hairline);padding-top:20px}
.b-more h4,.rail h4{margin:0 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.b-more .cards p{font-size:13.5px}
.b-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.b-tags span,.b-tags a{font-size:12px;font-weight:600;color:var(--ink-soft);background:var(--wash);border:1px solid var(--hairline);border-radius:999px;padding:3px 9px;text-decoration:none}
.b-tags a{color:var(--accent-ink)}
.border-note{border-top:1px solid var(--hairline);padding-top:14px;margin-top:22px}
.rail .fine{font-size:14px;line-height:1.55}
/* Index */
.b-index .lead{max-width:760px;font-size:19px}
.b-cards{display:grid;gap:20px;margin:34px 0 0}
.b-card{display:grid;gap:20px;border:1px solid var(--hairline);border-radius:var(--radius);padding:20px;background:var(--paper);align-items:start}
.b-card-img{display:block;line-height:0;border-radius:12px;overflow:hidden;background:var(--wash)}
.b-card-img img{display:block;width:100%;height:auto}
.b-card h2{margin:0 0 10px;border:0;padding:0;font-size:clamp(20px,2.3vw,26px);line-height:1.24}
.b-card h2 a{color:var(--ink);text-decoration:none}
.b-card h2 a:hover{color:var(--accent-ink)}
.b-sum{font-size:16px;line-height:1.6;color:var(--ink-soft);margin:0 0 12px;max-width:64ch}
.who{margin-top:44px}
.who p{max-width:760px;font-size:16.5px;line-height:1.7;color:var(--ink-soft)}
@media(min-width:760px){.b-card{grid-template-columns:minmax(0,300px) minmax(0,1fr)}}
@media(min-width:1000px){.blog .doc{grid-template-columns:minmax(0,1fr) 290px}}