/* Article typography, shared by the editor preview and the public blog */
.prose { font-size: 17px; line-height: 1.75; color: var(--ink); }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.6em; font: 800 26px/1.25 var(--font-sans); }
.prose h3 { margin-top: 1.4em; font: 800 20px/1.3 var(--font-sans); }
.prose h4 { margin-top: 1.2em; font: 800 17px/1.3 var(--font-sans); }
.prose p, .prose ul, .prose ol { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose a { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--neon); text-decoration-thickness: 3px; text-underline-offset: 2px; }
.prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; box-shadow: inset 4px 0 0 0 var(--neon-pink); font: 400 italic 21px/1.5 var(--font-serif); color: var(--ink-70); }
.prose blockquote p { margin: 0; }
.prose img { display: block; max-width: 100%; height: auto; box-shadow: inset 0 0 0 1px var(--stroke); }
.prose figure { margin: 1.6em 0; }
.prose figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-muted); text-align: center; }
.prose code { padding: 1px 5px; background: var(--surface-2); font-size: .9em; }
.prose pre { overflow-x: auto; padding: 14px 16px; background: var(--fg); color: var(--white); font-size: 14px; line-height: 1.5; }
.prose pre code { padding: 0; background: none; }
.prose hr { border: 0; border-top: 1.5px solid var(--stroke); margin: 2em 0; }


/* Blog pages */
.bl { max-width: 1120px; margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-16); }
.bl-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: var(--space-8); }
.bl-hero { margin-bottom: var(--space-12); }
.bl-hero .mh { text-align: left; }
.bl-hero .lead { text-align: left; margin: var(--space-4) 0 0; }
.bl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.bl-card { display: flex; flex-direction: column; margin: 0 4px 4px 0; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--fg), 4px 4px 0 0 var(--fg); color: var(--ink); transition: transform var(--duration-press) ease-in-out, box-shadow .2s var(--ease); }
.bl-card:hover { transform: translate(-2px, -2px); box-shadow: inset 0 0 0 1.5px var(--fg), 6px 6px 0 0 var(--neon-violet), 6px 6px 0 1.5px var(--fg); }
.bl-card .cover { aspect-ratio: 1200 / 630; margin: 1.5px 1.5px 0; background: var(--surface-2) linear-gradient(135deg, var(--neon) 0 30%, var(--neon-cyan) 30% 60%, var(--neon-pink) 60%); overflow: hidden; }
.bl-card .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-card .b { display: grid; gap: 8px; padding: 18px 20px 20px; }
.bl-card h2 { margin: 0; font: 400 24px/1.2 var(--font-serif); }
.bl-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-70); }
.bl-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 700 10px/1.3 var(--font-sans); letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-muted); }
.bl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-tags span { padding: 2px 8px 1px; background: var(--neon-yellow); box-shadow: inset 0 0 0 1px var(--fg); font: 700 10px/1.5 var(--font-sans); letter-spacing: .6px; }
.bl-empty { padding: 48px; text-align: center; border: 1px dashed var(--stroke); color: var(--ink-70); }
.post { max-width: 760px; margin: 0 auto; }
.post-crumbs { margin-bottom: var(--space-6); font: 600 12px/1.4 var(--font-sans); color: var(--ink-muted); }
.post-crumbs a { border-bottom: 1px solid currentColor; }
.post h1 { margin: 12px 0 14px; font: 400 clamp(34px, 5vw, 50px)/1.1 var(--font-serif); }
.post-excerpt { margin: 0 0 18px; font: 500 19px/1.55 var(--font-sans); color: var(--ink-70); }
.post-cover { margin: var(--space-8) 0; box-shadow: inset 0 0 0 1.5px var(--fg), 6px 6px 0 0 var(--fg); }
.post-cover img { display: block; width: 100%; height: auto; }
.post-foot { margin-top: var(--space-12); padding: var(--space-6); background: var(--neon); box-shadow: inset 0 0 0 1.5px var(--fg), 5px 5px 0 0 var(--fg); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.post-foot b { font: 800 18px/1.3 var(--font-sans); }
.post-more { margin-top: var(--space-16); }
.post-more h2 { margin: 0 0 var(--space-6); font: 800 22px/1.3 var(--font-sans); }
@media (max-width: 760px) { .bl { padding: var(--space-4) var(--space-4) var(--space-12); } }