/* Guides: one shared article layout for every /guides/* page (loaded by the registry "css").
   Markup: phero (short) then section.section.sec-white > div.wrap.with-toc > nav.toc + article.ar-body.prose.
   Inside the article: p.ar-meta, div.ar-key (ul), h2s with ids, div.ar-job (h3, p, ol or ul, p.ar-src),
   table via .tbl-wrap/.tbl, then aside.ar-next (h2, ul of a.box-link) after the article. */
.ar-body{max-width:72ch}
.ar-meta{font-size:.92rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 1.6em}
.ar-meta span+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--line-2);margin:0 12px 2px 0;vertical-align:middle}
.ar-key{background:var(--blue-wash);border-radius:14px;padding:22px 26px;margin:1.4em 0 2em}
.ar-key>p:first-child{font-weight:600;color:var(--ink);margin:0 0 .5em}
.ar-key ul{margin:0}
.ar-key li+li{margin-top:.45em}
.ar-job{border:1px solid var(--line-2);border-radius:14px;background:var(--white);padding:22px 26px;margin:1.8em 0}
.ar-body .ar-job>h3{margin-top:0;font-size:1.1rem}
.ar-job>*+*{margin-top:.7em}
.ar-job .ar-src{font-size:.88rem;color:var(--muted)}
.ar-body .tbl-wrap{margin:1.4em 0}
.ar-body blockquote{border-left:3px solid var(--line-2);padding:4px 0 4px 18px;color:var(--ink)}
.ar-next{margin-top:clamp(48px,6vw,80px);padding-top:32px;border-top:1px solid var(--line)}
.ar-next h2{font-size:1.4rem;margin:0 0 16px}
.ar-next ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
@media (max-width:600px){.ar-key,.ar-job{padding:18px 18px}.ar-meta span+span::before{display:none}}