/* Extra layout for the standalone pages (blog posts, blog index, Q&A, privacy, 404).
   Colors, type and components come from app.css, which the build extracts from the main page. */
body.page{min-height:100vh; display:flex; flex-direction:column}
body.page main{flex:1}
body.page header.top .wrap{flex-wrap:wrap}
.crumbs{max-width:72ch; margin:28px auto 0; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
.crumbs a{color:var(--muted); text-decoration:none; font-family:var(--font-mono); font-size:var(--step--1)}
.crumbs a:hover{color:var(--accent)}
body.page .rd-article{padding-block:20px 64px}
.page-hero{padding-block:44px 12px}
.page-hero h1{font-family:var(--font-display); font-weight:600; font-size:clamp(2rem, 5vw, 3rem); line-height:1.1; margin:0 0 12px; text-wrap:balance}
.post-card .pc-title{margin:0; font-family:var(--font-display); font-weight:400; font-size:var(--step-1); line-height:1.25; text-wrap:balance}
.post-card .pc-title a{text-decoration:none}
.post-card .pc-title a:hover{color:var(--accent)}
.qa-page .qa-list{margin-bottom:64px}
.qa-page .qa-item:target{border-color:var(--accent)}
.lost{display:grid; justify-items:center; text-align:center; padding-block:64px 80px; gap:6px}
.lost h1{font-family:var(--font-display); font-weight:600; font-size:clamp(2.2rem, 6vw, 3.4rem); margin:0}
.lost .sub{margin:8px auto 20px}
.lost-bit{image-rendering:pixelated; animation:bob 1.6s steps(2) infinite}
.lost-links{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
@media (prefers-reduced-motion: reduce){.lost-bit{animation:none}}