/* legal.css — /terms and /privacy, on top of knocklet.css.
   Reading and nothing else: a dated title and a run of sections, centred at a measure somebody
   can finish a line of. No script, no controls, and the only product chrome these pages keep is
   the band at the foot, which every document in the product ends on. */

/* The reading measure, and the foot below takes the same one so the wordmark down there lines up
   with the paragraphs above it. */
:root { --band: 42rem; }

/* Full-bleed with the words held to the measure, the same shape the foot takes. Every rule below
   states its margins block-wise only: a `margin` shorthand on a child would cancel the centring
   this line does. */
/* The document fills the window and the foot holds its floor — same reason as the landing. */
body { min-height: 100svh; display: flex; flex-direction: column; }
.legal { flex: 1 0 auto; padding: var(--sp-8) var(--gutter) var(--sp-9); }
.legal > * { inline-size: 100%; max-inline-size: var(--band); margin-inline: auto; }

.legal-title {
  margin-block: 0;
  font: 400 var(--t-display)/1.1 var(--face); letter-spacing: -.03em; text-wrap: balance;
}
.legal-date { margin-block: var(--sp-3) 0; font: var(--t-footnote)/1.5 var(--face); color: var(--ink3); }

.legal section { margin-block-start: var(--sp-8); }
.legal h2 {
  margin-block: 0;
  font: 500 var(--t-title2)/1.25 var(--face); letter-spacing: -.015em;
}
/* Long reading, so the leading is longer than anywhere else in the product. */
.legal p { margin-block: var(--sp-4) 0; font: var(--t-body)/1.7 var(--face); color: var(--ink2); text-wrap: pretty; }
.legal ul {
  margin-block: var(--sp-4) 0; padding-inline-start: 1.25em;
  font: var(--t-body)/1.7 var(--face); color: var(--ink2);
}
.legal li + li { margin-block-start: var(--sp-3); }
.legal li strong { color: var(--ink); font-weight: 500; }

/* The one sentence quoted rather than written: the product invariant, and the one thing on these
   pages that means "notice this" — which is what the emphasis rule is for. */
.legal blockquote {
  margin-block: var(--sp-5) 0; margin-inline: 0;
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--emphasis-rule);
  font: var(--t-body)/1.7 var(--face); color: var(--ink);
}
.legal blockquote p { margin-block: 0; color: inherit; }

.legal a { color: var(--ink); }