/* Article body styling for the blog (the rest of the design comes from the site's Tailwind classes).
   Colours match the main site: gold #d4af37, text #e2e8f0. */
.blog-content { color: #cbd5e1; font-size: 1rem; line-height: 1.85; overflow-wrap: anywhere; }
.blog-content > * + * { margin-top: 1.1em; }
.blog-content h2 { font-family: ui-serif, Georgia, serif; font-size: 1.6rem; line-height: 1.3; color: #d4af37; margin-top: 1.8em; }
.blog-content h3 { font-family: ui-serif, Georgia, serif; font-size: 1.3rem; line-height: 1.3; color: #f1d98a; margin-top: 1.6em; }
.blog-content h4 { font-weight: 700; color: #ffffff; margin-top: 1.4em; }
.blog-content a { color: #facc15; text-decoration: underline; text-underline-offset: 3px; }
.blog-content a:hover { color: #fde68a; }
.blog-content strong, .blog-content b { color: #ffffff; }
.blog-content ul { list-style: disc; padding-left: 1.5em; }
.blog-content ol { list-style: decimal; padding-left: 1.5em; }
.blog-content li + li { margin-top: .4em; }
.blog-content blockquote { border-left: 4px solid #ca8a04; padding: .4em 1em; color: #e2e8f0; background: rgba(255,255,255,.05); border-radius: 0 .5rem .5rem 0; }
.blog-content img { max-width: 100%; height: auto; border-radius: .75rem; border: 1px solid rgba(255,255,255,.1); }
.blog-content hr { border: 0; border-top: 1px solid rgba(255,255,255,.15); }
.blog-content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.blog-content th, .blog-content td { border: 1px solid rgba(255,255,255,.15); padding: .5em .75em; text-align: left; }
.blog-content th { background: rgba(255,255,255,.07); color: #fff; }