/* Layout for blog content only: colours, fonts, header and footer come from the site's own style.css */
body.blogpage{display:block;min-height:100vh;padding:0}
.blog-navlinks{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.navlink.active{border-color:var(--brand);color:var(--brand)}
.blog-main{max-width:760px;margin:0 auto;padding:36px 20px 64px;color:var(--ink);font-size:17px;line-height:1.75}
.crumbs{font-size:.9rem;margin-bottom:10px}.meta{color:var(--mut);font-size:.92rem}.crumbs a{color:var(--mut)}
.blog-main h1{font-size:clamp(1.8rem,4.6vw,2.6rem);line-height:1.15;font-weight:800;letter-spacing:-.03em;margin:.2em 0 .4em}
.blog-main h2{font-size:1.5rem;line-height:1.3;margin:1.9em 0 .5em;font-weight:700}.blog-main h3{font-size:1.15rem;margin:1.5em 0 .4em;font-weight:700}
.blog-main p,.blog-main ul,.blog-main ol,.blog-main table,.blog-main blockquote,.blog-main pre{margin:0 0 1.1em}.blog-main ul,.blog-main ol{padding-left:1.4em}.blog-main li{margin:.25em 0}
.blog-main a{color:var(--brand);text-underline-offset:3px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin:16px 0;box-shadow:var(--shadow)}
.card:hover{border-color:var(--brand)}.card h2{font-size:1.25rem;margin:0 0 4px}.card h2 a{text-decoration:none;color:var(--ink)}.card h2 a:hover{color:var(--brand)}.card p{margin:.3em 0;color:var(--mut)}
.blog-main table{border-collapse:collapse;width:100%;font-size:.95rem}.blog-main th,.blog-main td{border:1px solid var(--line);padding:9px 12px;text-align:left}.blog-main th{background:var(--soft)}
.blog-main blockquote{border-left:3px solid var(--brand);padding:2px 0 2px 16px;color:var(--mut)}
.blog-main code{background:var(--soft);padding:2px 6px;border-radius:5px;font-size:.92em}.blog-main pre{background:var(--soft);padding:14px;border-radius:12px;overflow:auto}.blog-main pre code{background:none;padding:0}
.blog-main img{max-width:100%;height:auto;border-radius:12px}.blog-main hr{border:0;border-top:1px solid var(--line);margin:2em 0}
@media (max-width:560px){.blog-navlinks .navlink:nth-child(3){display:none}}