/* LEGAL PAGES (privacy, terms). The same page as randomknights.xyz (xyz repo,
   src/docs.css, the "LEGAL PAGES" block), with the names changed for this
   site's markup: the title line, then the text, in one centered column with
   equal side margins. There is no inner scroll box: the page itself scrolls, and
   a short text simply fits. The measure is 88 characters at most on a wide
   window; on a tablet and a phone the column is the window less its side
   margins. The header is the home page's own, the footer follows the content at
   every width. Keep this block in step with the xyz block; do not add rules
   that the xyz page does not have. */
.legal-page .stage { min-height: 0; flex: 1 0 auto; display: flex; flex-direction: column; }
.legal-page .stage > .ck-footer { position: static; left: auto; bottom: auto; flex: none; width: 100vw; margin-left: calc(50% - 50vw); }
.legal-page .legal-main {
  --fs: clamp(16px, 1.3vw, 19px);
  --lh: 1.6em;
  --gut: clamp(18px, 4vw, 56px);
  display: block; flex: 1 0 auto; box-sizing: content-box;
  width: min(88ch, 100% - 2 * var(--gut)); margin: 0 auto;
  padding: clamp(28px, 5vh, 56px) 0 clamp(40px, 7vh, 80px);
  font: 300 var(--fs)/var(--lh) var(--rk-font-body); color: #ffffff; outline: none;
}
.legal-page .legal-title { margin: 0 0 var(--lh); font: italic 400 var(--fs)/1.5 var(--rk-font-mono); color: #ffffff; white-space: nowrap; }
.legal-page .legal-text { min-width: 0; font: inherit; color: inherit; }
.legal-page .legal-text h1,
.legal-page .legal-text h2,
.legal-page .legal-text p { font: inherit; letter-spacing: 0; color: inherit; }
.legal-page .legal-text h1 { margin: 0 0 var(--lh); font-weight: inherit; }
.legal-page .legal-text h2 { margin: var(--lh) 0 0; font-weight: inherit; }
.legal-page .legal-text p { margin: 0 0 var(--lh); }
.legal-page .legal-text > :last-child { margin-bottom: 0; }
.legal-page .legal-text a { color: #ff4124; text-decoration: none; overflow-wrap: anywhere; }
.legal-page .legal-text code { font-family: var(--rk-font-mono); color: #faafa5; overflow-wrap: anywhere; line-height: 0; }
/* From 1000 px landscape (and 1367 up) the title line is the heading and the h1
   is read by a screen reader only; below that the h1 is the heading and the
   title line is left out (the xyz pages do the same). */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1366px) and (orientation: portrait) {
  .legal-page .legal-title { display: none; }
}
@media (min-width: 1367px), (min-width: 1000px) and (orientation: landscape) {
  .legal-page .legal-text h1 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}