/* The pages that are documents (src/render.ts renderDocument): /privacy and /terms, whose body is the plain-English file public/privacy.html / terms.html, and the 404. No mockup draws them: they wear the
   site's look (the dark, Baloo 2 for the headings, the system face for the reading, the gold for a link and a button) and are laid out by the page's own rules. Phone first; the wide layout is the same
   container query on #app as every page (700 px). The top bar is the account page's (logo only: a document has nowhere to sign in), so the logo and the footer under it share the page's margin.
   The reading column is 32 rem (512 px of text at 16 px): the longest line is 72 characters and the mean 60, where about 70 is the most a line should hold (measured: layout-check/watch/privacy-w1440/measure.md). Nothing here moves. */
#app { display: flex; flex-direction: column; }
.lg-bar { flex: none; padding: calc(8px + env(safe-area-inset-top, 0px)) 22px 0; }
.lg-brand { display: block; width: fit-content; }
.lg-logo { height: 30px; width: auto; }
.lg-page { flex: 1 0 auto; width: 100%; max-width: calc(32rem + 44px); margin: 0 auto; padding: 28px 22px 48px; font-size: 16px; line-height: 1.6; color: var(--soft); }
.lg-page h1 { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1.05; color: #fff; }
.lg-page h2 { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.2; color: #fff; margin: 34px 0 8px; }
.lg-page p { margin-top: 12px; }
.lg-page h2 + p, .lg-page h1 + p { margin-top: 0; }
.lg-page .lg-updated { margin-top: 6px; font-size: 14px; color: var(--faint); }
.lg-page .lg-lead { margin-top: 18px; font-size: 17px; color: var(--softer); }
.lg-page ul { list-style: disc; padding-left: 1.3em; }
.lg-page li { margin-top: 10px; padding-left: 2px; }
.lg-page li::marker { color: var(--gold); }
.lg-page b { color: #fff; font-weight: 600; }
.lg-page a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; transition: color var(--fade-ms); }
.lg-page a:hover { color: var(--gold-hi); }
.lg-page a.btn { text-decoration: none; }

/* the 404: the heading and the way back, in the middle of the page */
.lg-lost { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center; padding-block: 32px; }
.lg-lost h1 { font-size: 40px; }
.lg-lost .btn-gold, .lg-lost .btn-gold:hover { color: var(--ink); }

@container page (min-width: 700px) {
  .lg-bar { height: 76px; display: flex; align-items: center; padding: 0 clamp(24px, 4.4444cqw, 64px); }
  .lg-logo { height: 44px; }
  .lg-page { padding: 48px 22px 80px; }
  .lg-page h1 { font-size: 44px; }
  .lg-page h2 { font-size: 23px; margin-top: 40px; }
  .lg-lost { padding-block: 32px; }                                                   /* the wide page's own padding is for a document: the 404's group is centred */
  .lg-lost h1 { font-size: 56px; }
}