/* /legal/privacy and /legal/terms (page key 'legal'): a reading page.
   One column held to a reading measure, the site's own type and inks, no
   teal and no pictures. Links in running text are underlined, because the
   site's links are not, and a link in a paragraph would otherwise vanish. */

.lg { padding: 72px 0 104px; }
.lg-inner { max-width: 760px; }

.lg-head { padding-bottom: 36px; border-bottom: 1px solid var(--rule); }
.lg-head h1 { font-size: clamp(36px, 4.6vw, 56px); }
.lg-updated { margin-top: 14px; font-size: 15px; color: var(--muted); }
.lg-intro { margin-top: 24px; font-size: 18.5px; line-height: 1.62; color: var(--body); }

.lg-sec { margin-top: 44px; }
.lg-sec h2 {
  font-size: 23px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.lg-sec p,
.lg-sec li { font-size: 17px; line-height: 1.65; color: var(--body); }
.lg-sec h2 + p,
.lg-sec h2 + ul { margin-top: 12px; }
.lg-sec p + p,
.lg-sec p + ul,
.lg-sec ul + p { margin-top: 14px; }
.lg-sec ul { padding-left: 22px; list-style: disc; }
.lg-sec li + li { margin-top: 6px; }
.lg-sec li::marker { color: var(--muted); }

.lg a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.lg a:hover { color: var(--ink); }

@media (max-width: 700px) {
  .lg { padding: 48px 0 72px; }
  .lg-intro { font-size: 17.5px; }
  .lg-sec { margin-top: 36px; }
  .lg-sec h2 { font-size: 21px; }
}