/* OE CSS: article special type (OE standard, Eric 2026-10-19; first on Gold Is Money) — writers mark it in plain Markdown:
   ## heading, > pull quote (**bold** in colour), > ### big number, > #### callout box. Elements styles each Markdown tag but
   can't draw the rules, colour **bold** inside a quote, or style a quote by what it starts with. Written by oe_article_layout.py
   in this site's fonts (Elements heading font / Elements body font) and brand colours; re-run it after a brand change. */
[id^="article-body"] h2 { position: relative; padding-bottom: .7rem; margin-bottom: 1.5rem; margin-top: 2.75rem; }
[id^="article-body"] h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3rem; height: 3px; background: #f2855b; }
[id^="article-body"] h3 { }
[id^="article-body"] blockquote { border: 0; border-top: 2px solid #f2855b; border-bottom: 2px solid #f2855b; margin: 2.75rem auto; padding: 1.75rem .5rem;
  max-width: 40rem; font-style: normal; quotes: none; text-align: center; }
[id^="article-body"] blockquote p { margin: 0 0 .75rem; font-style: normal; font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.4; }
[id^="article-body"] blockquote p:last-child { margin-bottom: 0; }
[id^="article-body"] blockquote p::before, [id^="article-body"] blockquote p::after { content: none; }
[id^="article-body"] blockquote strong { color: #c94e1f; font-weight: 600; }
[id^="article-body"] blockquote:not(:has(> h3:first-child)):not(:has(> h4:first-child)) > p + p { font-size: 1rem; line-height: 1.5; margin-top: .9rem; font-style: italic; }
/* OE CSS: big number — a quote that starts with ### */
[id^="article-body"] blockquote:has(> h3:first-child) { border: 0; max-width: none; margin: 2.5rem 0; padding: 0; text-align: left;
  display: grid; grid-template-columns: auto 1fr; column-gap: 1.75rem; align-items: center; }
[id^="article-body"] blockquote:has(> h3:first-child) > h3 { grid-row: 1 / span 9; margin: 0; padding-right: 1.75rem; border-right: 2px solid #f2855b;
  font-size: clamp(3.5rem, 9vw, 5rem); line-height: 1; font-weight: 700; color: #c94e1f; align-self: stretch; display: flex; align-items: center; }
[id^="article-body"] blockquote:has(> h3:first-child) > p { grid-column: 2; margin: 0; text-align: left; font-size: 1.35rem; line-height: 1.35; }
[id^="article-body"] blockquote:has(> h3:first-child) > p + p { margin-top: .4rem; font-size: 1rem; line-height: 1.55; font-style: italic; }
[id^="article-body"] blockquote:has(> h3:first-child) strong { color: inherit; }
/* OE CSS: callout — a quote that starts with #### (with a chart icon) */
[id^="article-body"] blockquote:has(> h4:first-child) { position: relative; max-width: none; margin: 2.5rem 0; text-align: left;
  border: 0; border-top: 3px solid #f2855b; background: #fef7f4; padding: 1.75rem 1.75rem 1.75rem 6.25rem; }
[id^="article-body"] blockquote:has(> h4:first-child)::before { content: ""; position: absolute; left: 1.75rem; top: 1.75rem; width: 2.5rem; height: 2.5rem;
  background: #c94e1f; -webkit-mask: var(--oe-chart) center / contain no-repeat; mask: var(--oe-chart) center / contain no-repeat;
  --oe-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 15l4-4 3 3 6-6'/%3E%3Cpath d='M15 8h5v5'/%3E%3C/svg%3E"); }
[id^="article-body"] blockquote:has(> h4:first-child)::after { content: ""; position: absolute; left: 5rem; top: 1.75rem; bottom: 1.75rem; width: 2px; background: #f2855b; }
[id^="article-body"] blockquote:has(> h4:first-child) > h4 { margin: 0 0 .5rem; font-size: .875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; color: #a64019; }
[id^="article-body"] blockquote:has(> h4:first-child) > p { font-size: 1.0625rem; line-height: 1.65; text-align: left; font-style: normal; }
[id^="article-body"] blockquote:has(> h4:first-child) strong { color: inherit; }
@media (max-width: 639px) {
  [id^="article-body"] blockquote:has(> h4:first-child) { padding: 1.5rem 1.25rem 1.5rem 4.75rem; }
  [id^="article-body"] blockquote:has(> h4:first-child)::before { left: 1.25rem; top: 1.5rem; width: 2rem; height: 2rem; }
  [id^="article-body"] blockquote:has(> h4:first-child)::after { left: 3.9rem; top: 1.5rem; bottom: 1.5rem; }
  [id^="article-body"] blockquote:has(> h3:first-child) { grid-template-columns: 1fr; row-gap: .35rem; }
  [id^="article-body"] blockquote:has(> h3:first-child) > h3 { grid-row: auto; justify-self: start; border-right: 0; padding: 0 0 .6rem; margin-bottom: .4rem; border-bottom: 2px solid #f2855b; }
  [id^="article-body"] blockquote:has(> h3:first-child) > p { grid-column: 1; }
}
@media (prefers-color-scheme: dark) {
  [id^="article-body"] blockquote strong, [id^="article-body"] blockquote:has(> h3:first-child) > h3 { color: #f6ae92; }
  [id^="article-body"] blockquote:has(> h4:first-child) { background: #3b1709; }
  [id^="article-body"] blockquote:has(> h4:first-child) > h4 { color: #f6ae92; }
  [id^="article-body"] blockquote:has(> h4:first-child) strong, [id^="article-body"] blockquote:has(> h3:first-child) strong { color: inherit; }
}