/* Rich HTML prose, shared by member pages and the browser's body editors.
   This file is the one source: member sites serve it beside application-site.css, and
   prodSite/res/rich-html.css is its byte copy, written by scripts/sync-rich-html-css.sh and held
   equal by `scripts/sync-rich-html-css.sh --check` (run by scripts/check-prodsite.sh). Edit it
   here, then run the script.

   `.rich-html` marks a body in core's normal form (rich_html): a member article page's
   `article.prose`, a newsletter's `.entry-body`, and the article and newsletter editors' prose.
   The normal form puts its classes on top-level elements only, and never a style (both origins
   send `style-src 'self'`): three heading levels under the page or issue title,
   align-center/align-right on a paragraph, heading or picture, align-left on a narrower picture
   only, and width-20..width-90 on a picture whose image fills it and whose caption, inside it,
   follows its width. A narrower picture is centred unless aligned left (the start edge) or right,
   never floated. A blank line is <p><br></p>, one line high by itself.

   These rules own the properties they set; each origin's own stylesheet adds spacing, colour and
   type around them and never sets these on the same elements, so the link order does not
   matter. */
.rich-html > h2 { font-size: 20px; }
.rich-html > h3 { font-size: 18px; }
.rich-html > h4 { font-size: 16px; }
.rich-html > .align-center { text-align: center; }
.rich-html > .align-right { text-align: right; }
.rich-html > figure img { display: block; width: 100%; height: auto; }
.rich-html > figure[class*="width-"] { margin-inline: auto; }
.rich-html > figure.align-left { margin-inline: 0 auto; }
.rich-html > figure.align-right { margin-inline: auto 0; }
.rich-html > figure.width-20 { width: 20%; }
.rich-html > figure.width-30 { width: 30%; }
.rich-html > figure.width-40 { width: 40%; }
.rich-html > figure.width-50 { width: 50%; }
.rich-html > figure.width-60 { width: 60%; }
.rich-html > figure.width-70 { width: 70%; }
.rich-html > figure.width-80 { width: 80%; }
.rich-html > figure.width-90 { width: 90%; }