/* Article HTML can carry inline colors from older editors. Keep foreground
   and background together so every published article stays readable. */
#blog-content {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.8;
    overflow-wrap: anywhere;
    color: #334155;
    background: #fff;
}
#blog-content * {
    color: #334155 !important;
    background-color: transparent !important;
    background-image: none !important;
    opacity: 1 !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}
#blog-content p { margin: 0 0 1.25em; }
#blog-content :is(h2, h3, h4, h5, h6) {
    color: #9a3412 !important;
    font-weight: 700;
    line-height: 1.4;
    margin: 2rem 0 .8rem;
    scroll-margin-top: 7rem;
}
#blog-content h2 { font-size: 1.5rem; }
#blog-content h3 { font-size: 1.25rem; }
#blog-content :is(h4, h5, h6) { font-size: 1.1rem; }
#blog-content :is(h2, h3, h4, h5, h6) * { color: inherit !important; }
#blog-content a, #blog-content a * { color: #1d4ed8 !important; }
#blog-content a { text-decoration: underline; text-underline-offset: .2em; }
#blog-content a:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
#blog-content :is(strong, b) { font-weight: 700; }
#blog-content :is(ul, ol) { padding-left: 1.5rem; margin: 0 0 1.25rem; }
#blog-content ul { list-style: disc outside; }
#blog-content ol { list-style: decimal outside; }
#blog-content li { display: list-item; margin-bottom: .5rem; }
#blog-content :is(blockquote, .blog-note, nav) {
    border-left: 4px solid #c2410c;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    background-color: #fff7ed !important;
    border-radius: 0 8px 8px 0;
}
#blog-content img { max-width: 100%; height: auto; border-radius: 12px; margin: 1.5rem 0; }
#blog-content figure { margin: 1.5rem 0; }
#blog-content figcaption { font-size: .9rem; margin: -.5rem 0 1.5rem; }
#blog-content table {
    display: block;
    max-width: 100%;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: .95em;
}
#blog-content :is(th, td) {
    border: 1px solid #cbd5e1;
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    min-width: 145px;
    background-color: #fff !important;
}
#blog-content tbody tr:nth-child(even) td { background-color: #f1f5f9 !important; }
#blog-content th { font-weight: 700; background-color: #0f172a !important; }
#blog-content th, #blog-content th * { color: #fff !important; }
#blog-content :is(pre, code) { background-color: #f1f5f9 !important; }
#blog-content pre { overflow-x: auto; padding: 1rem; }
@media (max-width: 640px) {
    #blog-content { font-size: 16px; }
    #blog-content :is(th, td) { padding: 10px 12px; }
}