/* Legal pages. They borrow the site's tokens and nav, then get a plain reading column:
   these exist to be read and quoted, not admired. */
.legal {
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(96px, 16vh, 180px) var(--gutter) clamp(64px, 10vh, 120px);
}
.legal h1 { font-size: clamp(38px, 6vw, 76px); line-height: 1.02; margin: 0 0 .3em; }
.legal h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 2.2vw, 27px); line-height: 1.2;
  margin: 2.2em 0 .5em;
}
.legal p, .legal li { line-height: 1.65; }
.legal .updated { font-family: var(--hand); font-size: .9em; color: var(--grass-deep); margin: 0 0 2.4em; }
.legal .rules { margin: .6em 0; padding-left: 1.3em; }
.legal .rules li { margin: .35em 0; padding-left: .2em; }
.legal .who { font-style: normal; line-height: 1.7; margin-top: .4em; }
.legal a { color: var(--ink); text-underline-offset: 3px; }
/* The legal pages have no sky, so the glass nav sits on paper: give it enough tint to read. */
.legal ~ .footer { margin-top: 0; }
body:has(.legal) .nav { --glass-amount: 62%; --glass-bright: 1.04; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 10px; z-index: 40; background: var(--cream); padding: 10px 16px; border-radius: 999px; }