.article-body {
  color: rgb(34, 34, 34);
  background: rgba(var(--color-background));
}

.article-body__prose {
  max-width: 720px;
  margin: 0 auto;
  font-family: "Montserrat", Arial, sans-serif;
}

.article-body__prose > *:first-child {
  margin-top: 0;
}

.article-body .article-body__prose p {
  margin: 0 0 18px;
  color: #3d4c42;
  font-size: 16.5px;
  line-height: 1.85;
}

.article-body .article-body__prose h2 {
  margin: 34px 0 14px;
  color: #173824;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(21px, 2.6vw, 28px);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}

.article-body__prose [data-article-pullquote] {
  margin: 28px 0;
  padding: 6px 0 6px 22px;
  border-left: 3px solid #214e34;
  color: #173824;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(18px, 2.2vw, 23px);
  font-weight: 400;
  line-height: 1.45;
}

.article-body__prose [data-article-footnote] {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(33, 78, 52, 0.18);
  color: #5c6b60;
  font-size: 12.5px;
  line-height: 1.8;
}

/* Sep 3: the article body only ever had rules for paragraphs, H2s and the two
   custom blocks the migrated posts used. Everything else an article can contain
   had nothing — most visibly images, which have no width constraint anywhere in
   this theme and so rendered at their intrinsic size and pushed straight out of
   the column. Lists, subheadings, links and footnote marks were browser
   defaults sitting inside a designed page.

   This is the reading style the rest of the site uses, extended to the rest of
   what a post can be made of, so an article written in the admin lands looking
   like the ones captured during the migration. */
.article-body .article-body__prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 26px 0;
  border-radius: 6px;
}

.article-body .article-body__prose figure {
  margin: 26px 0;
}

.article-body .article-body__prose figure img {
  margin: 0;
}

.article-body .article-body__prose figcaption {
  margin-top: 10px;
  color: #5c6b60;
  font-size: 13px;
  line-height: 1.6;
}

.article-body .article-body__prose h3 {
  margin: 28px 0 12px;
  color: #173824;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  line-height: 1.3;
}

.article-body .article-body__prose h4 {
  margin: 24px 0 10px;
  color: #173824;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-body .article-body__prose ul,
.article-body .article-body__prose ol {
  margin: 0 0 18px;
  padding-left: 24px;
  color: #3d4c42;
  font-size: 16.5px;
  line-height: 1.85;
}

.article-body .article-body__prose li {
  margin-bottom: 10px;
}

.article-body .article-body__prose li::marker {
  color: #214e34;
}

.article-body .article-body__prose a {
  color: #214e34;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-body .article-body__prose strong {
  color: #173824;
  font-weight: 700;
}

/* Footnote markers: raised without stretching the line they sit in. */
.article-body .article-body__prose sup {
  font-size: 11px;
  line-height: 0;
  vertical-align: super;
}

.article-body .article-body__prose sup a {
  text-decoration: none;
}

.article-body .article-body__prose blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid #214e34;
  color: #173824;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5;
}

.article-body .article-body__prose hr {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid rgba(33, 78, 52, 0.18);
}

/* A wide table scrolls in its own box rather than widening the article. */
.article-body .article-body__prose table {
  display: block;
  width: 100%;
  margin: 0 0 22px;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 15px;
}

.article-body .article-body__prose th,
.article-body .article-body__prose td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(33, 78, 52, 0.16);
}

.article-body .article-body__prose th {
  color: #173824;
  font-weight: 700;
}

.article-body .article-body__prose iframe,
.article-body .article-body__prose video {
  max-width: 100%;
  margin: 26px 0;
  border-radius: 6px;
}

/* Sep 3: the citations on "5 fascinating facts" print their sources as bare
   URLs — 78 unbroken characters that no wrapping rule can break by default. The
   list was forced to 513px inside a 350px column and took the document with it,
   so the page scrolled sideways on a phone.

   break-word lets a word that cannot fit break rather than push its container
   open. Long URLs are the realistic case in a body written from the admin, and
   they arrive as link text often enough to be worth handling once here. */
.article-body .article-body__prose {
  overflow-wrap: break-word;
}

.article-body .article-body__prose a {
  overflow-wrap: anywhere;
}