/* Lora belongs to the reading surface; site titles and navigation keep their fonts. */
.article-featured-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 36px auto 48px;
}
.article-body.prose {
  font-family: Lora, Georgia, serif;
  font-size: clamp(19px, 1.35vw, 21px);
  font-weight: 400;
  line-height: 1.85;
  color: #d7d1c9;
  font-synthesis: none;
}
.article-body.prose > p:first-child,
.article-body.prose p.article-opening {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
.article-body.prose :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--display, 'Barlow Condensed'), sans-serif;
  font-weight: 900;
}
.article-body.prose blockquote,
.article-body.prose .serif { font-family: Lora, Georgia, serif; }
.article-body.prose blockquote { font-weight: 400; font-size: 1.3em; line-height: 1.65; }
.article-body.prose strong { font-weight: 600; }

/* The initial is decorative; the complete first word stays in the original prose. */
.article-body.prose .article-opening { display: flow-root; }
.article-body.prose .article-dropcap {
  float: left;
  user-select: none;
  font-family: Chonburi, Georgia, serif;
  font-size: 5.5em;
  font-weight: 400;
  font-style: normal;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--paper, #f1f0e8);
  margin: -.35em .25em .04em 0;
  padding: .4em .6em .5em;
  background-image: linear-gradient(#1c211d66, #1c211d66), url('../images/dropcap-floral-v1.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%, contain;
  text-shadow: 0 2px 10px #0009;
}
@supports (color: color-mix(in srgb, black, transparent)) {
  .article-body.prose .article-dropcap {
    background-image: linear-gradient(color-mix(in srgb, var(--reading, #1c211d) 40%, transparent), color-mix(in srgb, var(--reading, #1c211d) 40%, transparent)), url('../images/dropcap-floral-v1.png');
  }
}
@media (min-width: 1200px) {
  .article-body.prose .article-dropcap { margin-left: -.65em; }
}
@media (max-width: 809px) {
  .article-body.prose { font-size: 18px; line-height: 1.85; }
  .article-body.prose .article-dropcap {
    font-size: 4.2em;
    margin: -.3em .18em .04em -.07em;
    padding: .4em .5em .5em;
  }
}