/* Article typography — used on the public blog AND inside the admin editor,
   so what you write looks the same once published. */
.prose { font-family: var(--sans, 'Inter', system-ui, sans-serif); font-size: 1.075rem; line-height: 1.8; color: var(--ink, #22313a); }
.prose > * + * { margin-top: 1.1em; }
.prose h1, .prose h2, .prose h3, .prose h4 { font-family: var(--serif, 'DM Serif Display', Georgia, serif); font-weight: 400; color: var(--heading, #0a2f38); line-height: 1.2; margin-top: 1.6em; }
.prose h1 { font-size: 2.2rem; } .prose h2 { font-size: 1.85rem; } .prose h3 { font-size: 1.45rem; }
.prose h4 { font-family: var(--sans, 'Inter', sans-serif); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; }
.prose p { margin: 0; } .prose p + p { margin-top: 1em; }
.prose a { color: var(--primary, #0b6a77); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-dark, #a37f2c); }
.prose img { max-width: 100%; height: auto; border-radius: 10px; }
.prose figure { margin: 1.6em 0; }
.prose figure img { display: block; width: 100%; }
.prose figcaption { font-size: .85rem; color: #5b6b73; margin-top: .5em; font-style: italic; text-align: center; }
.prose ul, .prose ol { padding-left: 1.4em; } .prose li + li { margin-top: .35em; }
.prose ul li::marker { color: #c19a3e; }
.prose hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent, #c9a24b), transparent); margin: 2.4em 0; }
.prose blockquote { margin: 1.6em 0; padding: .4em 0 .4em 1.2em; border-left: 4px solid var(--accent, #c9a24b); font-style: italic; color: #33464f; }
.prose code { background: #eef3f4; padding: .1em .35em; border-radius: 4px; font-size: .9em; }
.prose pre { background: #0d2a31; color: #e8f1f2; padding: 1em; border-radius: 10px; overflow: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid #d9e3e5; padding: .55em .75em; text-align: left; vertical-align: top; }
.prose th { background: #eef4f5; font-weight: 600; }
.prose iframe { max-width: 100%; border-radius: 10px; }
.prose .video-embed, .prose iframe[src*="youtube"] { width: 100%; aspect-ratio: 16 / 9; height: auto; }

/* Newspaper-style formats available in the editor's "Formats" menu */
.prose .lead, .prose p.lead { font-size: 1.3rem; line-height: 1.65; color: #1b3740; font-weight: 500; }
.prose p.dropcap::first-letter { float: left; font-family: var(--serif, 'DM Serif Display', Georgia, serif); font-size: 4.2em; line-height: .82; padding: .06em .12em 0 0; color: var(--accent-dark, #a37f2c); }
.prose .pullquote, .prose blockquote.pullquote { border: 0; border-top: 3px solid var(--accent, #c9a24b); border-bottom: 3px solid var(--accent, #c9a24b); padding: 1em 0; margin: 2em 0; text-align: center; font-family: var(--serif, 'DM Serif Display', Georgia, serif); font-style: normal; font-size: 1.6rem; line-height: 1.35; color: var(--primary-deep, #0a2f38); }
.prose .callout { background: #f3f8f8; border: 1px solid #d5e5e7; border-left: 5px solid var(--primary, #0b6a77); padding: 1em 1.2em; border-radius: 8px; }
.prose .callout-warning { background: #fff8ec; border: 1px solid #f1dfb7; border-left: 5px solid var(--accent, #c9a24b); padding: 1em 1.2em; border-radius: 8px; }
.prose mark, .prose .highlight { background: #fbefc9; padding: 0 .2em; border-radius: 3px; }
.prose .columns-2 { column-count: 2; column-gap: 2.2em; column-rule: 1px solid #e1e8ea; }
.prose .columns-3 { column-count: 3; column-gap: 2em; column-rule: 1px solid #e1e8ea; }
.prose .small-print { font-size: .85rem; color: #5b6b73; }
.prose .img-left  { float: left;  max-width: 46%; margin: .3em 1.4em 1em 0; }
.prose .img-right { float: right; max-width: 46%; margin: .3em 0 1em 1.4em; }
.prose .byline-box { display: flex; gap: 1em; align-items: center; padding: 1em; border: 1px solid #e1e8ea; border-radius: 10px; }
.prose::after { content: ""; display: table; clear: both; }
@media (max-width: 700px) {
  .prose .columns-2, .prose .columns-3 { column-count: 1; }
  .prose .img-left, .prose .img-right { float: none; max-width: 100%; margin: 1em 0; }
}