/* Shared by public article pages and the CMS preview iframe. */
.article-content, .cms-preview-body { --article-canvas: min(1024px, calc(100vw - 96px)); }
.article-block { margin-block: 40px; min-width: 0; }
.article-block *, .article-block *::before, .article-block *::after { box-sizing: border-box; }
.article-block-figure { margin: 0; min-width: 0; width: auto; transform: none; }
.article-block img { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; border-radius: 6px; }
.article-block-figure a { display: block; }
.article-block figcaption { margin-top: 12px; color: #73786b; font: 12px/1.65 Arial, Helvetica, sans-serif; overflow-wrap: anywhere; text-align: center; }
.article-block figcaption p { margin: 0; }
.article-block-image { --media-width: 640px; width: min(var(--media-width), var(--article-canvas)); }
.article-block-image.media-small { --media-width: 320px; }
.article-block-image.media-wide { --media-width: 860px; }
.article-block-image.media-full { --media-width: 1024px; }
.article-block-image.align-center { margin-inline-start: calc((100% - min(var(--media-width), var(--article-canvas))) / 2); }
.article-block-image.align-left { margin-inline-start: 0; }
.article-block-image.align-right { margin-inline-start: calc(100% - min(var(--media-width), var(--article-canvas))); }
.article-block-image.media-wide.align-left, .article-block-image.media-full.align-left { margin-inline-start: calc((100% - var(--article-canvas)) / 2); }
.article-block-image.media-wide.align-right, .article-block-image.media-full.align-right { margin-inline-start: calc((100% + var(--article-canvas)) / 2 - min(var(--media-width), var(--article-canvas))); }
.article-block-image.align-left img { margin-inline: 0 auto; }
.article-block-image.align-right img { margin-inline: auto 0; }
.article-block-grid, .article-block-gallery { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.article-block-grid.images-2.layout-40-60 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.article-block-grid.images-2.layout-60-40 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.article-block-grid.images-3.layout-equal, .article-block-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.article-block-grid.images-3.layout-large-left { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.article-block-grid.images-3.layout-large-right { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.article-block-grid.images-3.layout-large-left > :first-child { grid-row: span 2; }
.article-block-grid.images-3.layout-large-right > :last-child { grid-column: 2; grid-row: 1 / span 2; }
.article-block-grid.images-4.layout-equal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.article-block.fit-cover img { width: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
.article-block-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 32px; }
.article-block-split.image-left.ratio-40-60, .article-block-split.image-right.ratio-60-40 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.article-block-split.image-left.ratio-60-40, .article-block-split.image-right.ratio-40-60 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.article-block-text { min-width: 0; font-size: .9em; line-height: 1.8; overflow-wrap: anywhere; }
.article-block-text > :last-child, .article-block-callout > :last-child { margin-bottom: 0; }
.article-block-callout { padding: 28px 32px; border-radius: 7px; border: 1px solid #dedfd4; font-size: .95em; }
.article-block-callout h3 { margin: 0 0 12px; font: 25px/1.3 Georgia, serif; color: #434b38; text-wrap: balance; }
.callout-neutral { background: #f2f2ed; }.callout-olive { background: #edf0e3; }.callout-sand { background: #f1eadd; }
.article-block-empty { padding: 20px; border: 1px dashed #cfd3c3; color: #73786b; font: 13px/1.6 Arial, sans-serif; }
/* Legacy Markdown images get a calm default; existing custom figures stay alone. */
.article-content > p > img:only-child, .article-content > p > a:only-child > img:only-child, .article-content > img { display: block; width: auto; height: auto; max-width: min(100%, 640px); margin: 30px auto; }
.cms-preview-body { --article-canvas: 100%; }
@media (max-width: 900px) {
  .article-block-grid.images-4.layout-equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .article-content { --article-canvas: calc(100vw - 44px); }
  .article-block { margin-block: 30px; }
  .article-block-grid, .article-block-gallery { gap: 20px; }
  .article-block-split { grid-template-columns: 1fr !important; gap: 24px; }
  .article-block-callout { padding: 22px; }
}
@media (max-width: 440px) {
  .article-block-grid, .article-block-gallery { grid-template-columns: 1fr !important; }
  .article-block-grid > .article-block-figure { grid-column: auto !important; grid-row: auto !important; }
}