/* Additions on top of the original main.css (kept untouched). */

/* Rendered Markdown in blog posts */
.blog-post-content h2, .blog-post-content h3, .blog-post-content h4 {
  font-family: 'Bebas Neue', sans-serif; letter-spacing: .02em; line-height: 1.1; margin: 2rem 0 .75rem; color: var(--text, #eeeae4);
}
.blog-post-content h2 { font-size: 34px; }
.blog-post-content h3 { font-size: 26px; }
.blog-post-content p, .blog-post-content ul, .blog-post-content ol,
.blog-post-content pre, .blog-post-content blockquote, .blog-post-content table { margin-bottom: 1.1rem; }
.blog-post-content ul, .blog-post-content ol { padding-left: 1.4rem; }
.blog-post-content a { color: var(--acc); text-decoration: underline; text-underline-offset: 2px; }
.blog-post-content img { max-width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--border); }
.blog-post-content iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: var(--r); }
.blog-post-content blockquote { border-left: 3px solid var(--acc); padding: .25rem 0 .25rem 1rem; color: var(--muted); }
.blog-post-content code { font-size: 13px; background: var(--s2); padding: .1em .35em; border-radius: 4px; }
.blog-post-content pre { background: var(--s1); border: 1px solid var(--border); border-radius: var(--r); padding: 1rem; overflow-x: auto; }
.blog-post-content pre code { background: none; padding: 0; }
.blog-post-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.blog-post-content th, .blog-post-content td { border: 1px solid var(--border); padding: .45rem .6rem; text-align: left; }

.draft-note {
  margin-bottom: 1.5rem; padding: .6rem 1rem; border: 1px dashed var(--acc2); color: var(--acc2);
  border-radius: var(--r); font-size: 13px;
}
.post-feat-img { width: 100%; aspect-ratio: 16/7; object-fit: cover; border-radius: var(--r); margin-bottom: 1rem; }