/* Long-form article body. The design system has no prose class - its pages are all
   built from cards and bands - so this is the one place raw editor output is styled.
   33 of the 48 posts are Gutenberg, i.e. plain semantic HTML; the other 15 carry Divi
   shortcodes and keep Divi's stylesheet, which renders them inside .et_pb_section. */

.artcover{margin:0 0 36px}
.artcover img{width:100%;height:auto;border-radius:var(--r-lg);display:block}

.prose{font-size:17px;line-height:1.72;color:var(--body);max-width:68ch}

.prose > :first-child{margin-top:0}
.prose p{margin:0 0 1.25em}

.prose :is(h2,h3,h4){color:var(--ink);letter-spacing:-.02em;line-height:1.22;
  margin:2em 0 .6em;font-weight:600}
.prose h2{font-size:clamp(22px,2.2vw,28px)}
.prose h3{font-size:20px}
.prose h4{font-size:17px;letter-spacing:-.01em}

.prose :is(ul,ol){margin:0 0 1.25em;padding-left:1.35em}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--muted)}

.prose a{color:var(--blue-bold);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--blue-bold) 35%,transparent);
  transition:text-decoration-color var(--t-micro) var(--ease)}
.prose a:hover{text-decoration-color:currentColor}

.prose :is(img,figure img){max-width:100%;height:auto;border-radius:var(--r);display:block}
.prose figure{margin:1.8em 0}
.prose figcaption{font-size:14px;color:var(--muted);margin-top:.6em}

.prose blockquote{margin:1.8em 0;padding:2px 0 2px 20px;border-left:3px solid var(--blue-soft);
  color:var(--ink);font-size:19px;line-height:1.6}
.prose blockquote p:last-child{margin-bottom:0}

.prose hr{border:0;border-top:1px solid var(--hair);margin:2.4em 0}

.prose :is(strong,b){font-weight:600;color:var(--ink)}

/* editor tables are rarely sized for a phone, so let them scroll rather than
   force the whole article to */
.prose table{width:100%;border-collapse:collapse;font-size:15px;margin:1.6em 0;display:block;overflow-x:auto}
.prose :is(th,td){border-bottom:1px solid var(--hair);padding:10px 12px;text-align:left}
.prose th{color:var(--ink);font-weight:600}

/* WordPress caption and alignment classes reach the page unstyled otherwise */
.prose .wp-caption{max-width:100%}
.prose .wp-caption-text{font-size:14px;color:var(--muted);margin-top:.5em}
.prose .alignleft{float:left;margin:.4em 1.4em 1em 0}
.prose .alignright{float:right;margin:.4em 0 1em 1.4em}
.prose .aligncenter{margin-left:auto;margin-right:auto}
.prose .alignwide,.prose .alignfull{max-width:100%}

@media (max-width:640px){
  .prose{font-size:16px}
  .prose :is(.alignleft,.alignright){float:none;margin:1.2em 0}
}

/* a listing card carries a date under the copy; the design's .post had no slot for it */
.post .body .note{display:block;margin-top:10px;font-size:13px;color:var(--muted)}