/* Rich bodies (ADR-0016 decision 5): what a body written in the editor shows with, on the
   page ({% rich_css %}) and in the editing box ({% rich_editor_css %}). Formatting is
   classes only (the CSP's style-src has no 'unsafe-inline'): the palette rules below are
   core.richtext.COLORS, SIZES, FONTS, HIGHLIGHTS and ALIGNMENTS, in their order
   (test_richtext_palette.py compares them). Every colour reads at 4.5:1 or more on
   --surface, --bg, --sunk and --yellow-soft and on every background colour, so even 작게
   meets WCAG 1.4.3. Sizes are em: they follow the site's text size setting
   (data-font-scale). In forced colours the browser picks the colours (a background colour
   goes); lines that carry meaning (table rules, the quote bar) are borders, which it keeps. */

/* Spaces and line breaks show as they were written (ProseMirror's pre-wrap): a poem's
   indents stay. Bodies hold no whitespace between their blocks. */
.rt{white-space:pre-wrap;overflow-wrap:break-word}

/* Palette: colour */
.rt-c-red{color:#B3261E}
.rt-c-orange{color:#A3470A}
.rt-c-brown{color:#6B4F00}
.rt-c-green{color:#2A6A4A}
.rt-c-teal{color:#00676B}
.rt-c-blue{color:#1F5FAE}
.rt-c-purple{color:#6A3FA0}
.rt-c-gray{color:#5E6B61}
/* Palette: size */
.rt-s-small{font-size:.875em}
.rt-s-large{font-size:1.25em}
.rt-s-xlarge{font-size:1.5em}
/* Palette: typeface (장식 is Latin only; Hangul falls back to the body serif) */
.rt-f-sans{font-family:var(--sans)}
.rt-f-display{font-family:var(--mono)}
/* Palette: background colour (light: the ink and every colour above stay ≥4.5:1 on it) */
.rt-h-yellow{background-color:#FFF1BD}
.rt-h-orange{background-color:#FBE4CE}
.rt-h-pink{background-color:#FCE5EC}
.rt-h-purple{background-color:#ECE5FA}
.rt-h-blue{background-color:#DCEBFA}
.rt-h-green{background-color:#D8EFE0}
.rt-h-gray{background-color:#E7EBE2}
/* A paragraph's or heading's alignment (core.richtext.ALIGNMENTS; left has no class) */
.rt-a-center{text-align:center}
.rt-a-right{text-align:right}
.rt-a-justify{text-align:justify}

/* Blocks */
.rt>*+*{margin-top:1.1em}
.rt h2{font-family:var(--serif);font-size:1.6rem;line-height:1.5;margin:1.6em 0 .6em}
.rt h3{font-family:var(--serif);font-size:1.3rem;line-height:1.5;margin:1.4em 0 .5em}
.rt :is(ul,ol){padding-inline-start:1.5em}
.rt ul{list-style:disc}
.rt ol{list-style:decimal}
.rt li>p{margin:0}
.rt blockquote{margin:1.5em 0;padding:.2em 0 .2em 1em;border-inline-start:4px solid var(--yellow);color:var(--ink)}
.rt blockquote>p+p{margin-top:.8em}
.rt hr{margin:2em 0;border:0;border-top:1px solid var(--line-strong)}
.rt a{text-underline-offset:3px}
/* Bold is a fixed weight: `bolder` from the light body text (--prose-weight 300) would be
   400, barely heavier. The site's serif is variable (200–900). */
.rt :is(strong,b){font-weight:700}

/* Photos: a photo on its own line is a figure, one in a list or a cell a picture. */
.rt picture{display:block}
.rt picture img{display:block;max-width:100%;height:auto;border-radius:12px;background:var(--sunk)}
.rt-figure{margin:1.6em 0}

/* Tables: a region the keyboard can scroll on a narrow screen (tabindex 0). */
.rt-table{max-width:100%;overflow-x:auto;margin:1.6em 0;white-space:normal}
.rt-table:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.rt table{border-collapse:collapse;min-width:100%;font-size:.95em;line-height:1.7}
.rt :is(th,td){padding:8px 12px;border:1px solid var(--line-strong);vertical-align:top;text-align:start;white-space:pre-wrap}
.rt th{background:var(--sunk);font-weight:600}
.rt :is(th,td)>p{margin:0}

/* Videos: the site's player (media.css .media-player, repeated here: a page with a body
   need not load the gallery's sheet) and its captions and transcript link. */
.rt-video{margin:1.6em 0;white-space:normal}
.rt-video .media-player{position:relative;aspect-ratio:16/9;background:var(--deep)}
.rt-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.rt-video figcaption{margin-top:8px;font-family:var(--sans);font-size:.92rem;line-height:1.6}
.rt-video-link{font-family:var(--sans)}

@media (forced-colors:active){
  .rt :is(th,td){border-color:CanvasText}
  .rt blockquote{border-inline-start-color:CanvasText}
  .rt hr{border-top-color:CanvasText}
  .rt picture img{border:1px solid CanvasText}
}