/* Imported post/resource body typography.
 *
 * WordPress body HTML arrives with its own inline styles and its own idea of
 * typography. Those are stripped on import so this site's CSS governs instead;
 * the imported markup structure is kept as-is.
 *
 * The templates define .artbody for p / h2 / ul / li / strong only. The imported
 * corpus also uses h3 (62), h4 (25), h6 (26), figure (37), img (51),
 * blockquote (9), hr (8) and iframe (7), which would otherwise render unstyled.
 * The values below extend the templates' own scale (p 17/1.75 #4C5170,
 * h2 26/1.2/800 #1E1927) rather than introducing a new one.
 */

/* headings — continue the h2 ramp downward */
.artbody h3 {
  font-size: 20px; line-height: 1.3; letter-spacing: -.015em;
  font-weight: 800; color: #1E1927; margin: 34px 0 10px;
}
.artbody h4 {
  font-size: 17.5px; line-height: 1.4; letter-spacing: -.01em;
  font-weight: 700; color: #1E1927; margin: 26px 0 8px;
}
.artbody h5,
.artbody h6 {
  font-size: 15px; line-height: 1.45; font-weight: 700;
  color: #1E1927; margin: 22px 0 8px;
}

/* <b> is used interchangeably with <strong> in the imported copy */
.artbody b { color: #1E1927; font-weight: 700; }

/* ordered lists mirror the template's ul */
.artbody ol {
  margin: 0 0 22px; padding-left: 22px;
  color: #4C5170; font-size: 17px; line-height: 1.75;
}

/* media */
.artbody img {
  max-width: 100%; height: auto; display: block;
  border-radius: 14px; margin: 28px 0;
}
.artbody figure { margin: 28px 0; }
.artbody figcaption {
  font-size: 14px; line-height: 1.5; color: #9BA0B5; margin-top: 10px;
}
.artbody iframe {
  width: 100%; aspect-ratio: 16/9; height: auto;
  border: 0; border-radius: 14px; margin: 28px 0; display: block;
}

/* pull quotes */
.artbody blockquote {
  margin: 30px 0; padding: 4px 0 4px 22px;
  border-left: 3px solid #1D29FF;
  font-size: 19px; line-height: 1.6; color: #1E1927;
}
.artbody blockquote p { font-size: inherit; color: inherit; margin-bottom: 12px; }
.artbody blockquote p:last-child { margin-bottom: 0; }

/* separators */
.artbody hr {
  border: 0; height: 1px; background: #EDEEF4; margin: 38px 0;
}

/* body links pick up the site's brand link colour; underline them so they are
   distinguishable inside a wall of prose */
.artbody a { color: #1D29FF; text-decoration: underline; text-underline-offset: 2px; }
.artbody a:hover { color: #141FCC; }