/* Extracted from templates/portal/blog_article.html on 2026-08-05. 1 static <style> block(s),
 * concatenated in document order. Jinja-bearing blocks stay inline.
 */
.article-body p { margin: 0 0 18px; }
.article-body h2 { font-family: 'Playfair Display','Georgia',serif; font-size: 28px; font-weight: 800; color: #1C1917; margin: 40px 0 16px; line-height: 1.25; letter-spacing: -.3px; }
.article-body h3 { font-size: 21px; font-weight: 700; color: #1C1917; margin: 28px 0 12px; }
.article-body blockquote { border-left: 4px solid #EA580C; padding: 14px 22px; margin: 22px 0; background: #FAF7F2; font-style: italic; color: #57534E; border-radius: 0 8px 8px 0; }
.article-body ul, .article-body ol { margin: 0 0 20px 24px; }
.article-body li { margin-bottom: 8px; }
.article-body a { color: #EA580C; text-decoration: underline; text-decoration-color: #D4C9B8; text-underline-offset: 3px; }
.article-body a:hover { text-decoration-color: #EA580C; }
.article-body strong { color: #1C1917; }
.article-body img { max-width: 100%; border-radius: 10px; margin: 24px 0; }
@media(max-width:768px){
  .article-body h2 { font-size: 24px; }
  .article-books { grid-template-columns: 1fr !important; }
}

/* Table-of-contents links. Was an inline style plus an onmouseover/onmouseout pair that set and
 * restored the colour in JS — the heading level decided the resting colour, which is why the
 * restore had to be interpolated by Jinja. Two classes and a :hover say the same thing, and no
 * CSP can whitelist an inline handler. */
.toc-lnk { font-size: 14px; text-decoration: none; line-height: 1.4; }
.toc-lnk:hover { color: #EA580C; }
.toc-h2 { color: #1C1917; font-weight: 700; }
.toc-h3 { color: #57534E; padding-left: 16px; }