/* Page and post layout (Post design): breadcrumb, title, author line, table of contents, related articles. Prose styling: prose.css. */
.progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:30;background:var(--acc-fg);transform-origin:0 50%;transform:scaleX(0);display:none}
@supports (animation-timeline: scroll()){.progress{display:block;animation:grow linear both;animation-timeline:scroll(root)}}
@keyframes grow{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.progress{display:none !important}}
.pagehead-post{padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(40px,5vw,64px)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none;font-size:13px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding-inline:7px;margin-inline:-7px;transition:color 150ms ease}
.crumbs a:hover{color:var(--text)}
.crumbs a.acc{color:var(--acc-fg)}
.crumbs a.acc:hover{color:var(--hi)}
.crumbs [aria-current="page"]{color:var(--text)}
.ptitle{font-size:clamp(36px,4.8vw,64px);line-height:1.04;letter-spacing:-.04em;font-weight:600;margin:0;text-wrap:balance;max-width:18em}
.lead-40{max-width:40em}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:8px}
.byline-text{display:flex;flex-direction:column;line-height:1.35}
.byline-name{font-weight:600;font-size:15px}
.byline-meta{font-size:13px;color:var(--muted)}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#04140C;font-weight:600;font-size:15px;flex:none}
.avatar-lg{width:52px;height:52px;font-size:18px}
/* project meta line (single project) */
.proj-facts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin-top:8px;font-size:13px;color:var(--muted)}
.proj-facts .tlink{min-height:32px;font-size:13px}
/* body: table of contents + prose column */
.entry-layout{display:flex;flex-wrap:wrap;gap:clamp(32px,6vw,96px);align-items:flex-start}
.toc-aside{flex:1 1 220px;max-width:280px;display:flex;flex-direction:column;gap:16px}
.toc-label{margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.toc{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0;border-left:1px solid var(--line2)}
.toc a{display:flex;align-items:center;min-height:44px;padding:4px 0 4px 16px;margin-left:-1px;border-left:1px solid transparent;color:var(--muted);text-decoration:none;font-size:14px;line-height:1.35;transition:color 150ms ease,border-color 150ms ease}
.toc a:hover{color:var(--text);border-left-color:var(--line3)}
.toc a.on{color:var(--text);border-left-color:var(--acc-fg)}
@media (min-width:960px){.toc-aside{position:sticky;top:96px}}
.entry.entry-main{flex:999 1 560px;min-width:0}
/* author box under the article */
.entry .author,.entry-foot .author{margin-top:56px;padding-top:28px;border-top:1px solid var(--line2);display:flex;gap:16px;align-items:flex-start;max-width:68ch;font-size:18px}
.author-text{display:flex;flex-direction:column;gap:6px}
.author-name{font-weight:600;font-size:17px;line-height:1.3}
.author-bio{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}
/* related articles */
.related{border-top:1px solid var(--line)}
.related-stack{display:flex;flex-direction:column;gap:32px}
.related-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px}
.related-title{margin:0;font-size:28px;letter-spacing:-.03em;font-weight:600}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:20px}
.rel{display:flex;flex-direction:column;gap:10px;padding:28px;text-decoration:none;color:var(--text)}
.rel:hover{color:var(--text)}
.rel-meta{font-size:12px;color:var(--muted)}
.rel .t{font-size:21px;font-weight:600;letter-spacing:-.025em;line-height:1.2;transition:color 150ms ease}
.rel:hover .t{color:var(--hi)}