/* Privacy, Terms and Data deletion pages: a single readable column on paper. */
.legal {
  padding: clamp(40px, 6vw, 88px) 7% clamp(56px, 7vw, 104px);
  background: var(--flow-paper);
  color: #19261f;
}
.legal-doc { max-width: 72ch; margin: 0 auto; }
.legal-doc h1 { font-size: clamp(44px, 6vw, 84px); letter-spacing: -.05em; }
.legal-doc .legal-meta {
  margin: 20px 0 0;
  color: #4b574e;
  font: 400 10px/1.6 ui-monospace, Consolas, monospace;
  letter-spacing: .09em;
}
.legal-doc .legal-draft {
  margin: 28px 0 8px;
  padding: 14px 18px;
  border-left: 3px solid #8a6b35;
  background: #e7e3d2;
  font-size: 13px;
  line-height: 1.7;
}
.legal-doc h2 {
  margin: 48px 0 14px;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -.03em;
}
.legal-doc p,
.legal-doc li,
.legal-doc dd { color: #303e34; font-size: 16px; line-height: 1.8; }
.legal-doc ul, .legal-doc ol { padding-left: 1.3em; }
.legal-doc li + li { margin-top: 6px; }
.legal-doc a { text-decoration: underline; text-underline-offset: 3px; }
.legal-doc a:hover { color: #8a6b35; }
.legal-doc a:focus-visible { outline-color: #8a6b35; }
.legal-doc dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; }
.legal-doc dt { font-weight: 600; }
.legal-doc dd { margin: 0; }

@media (max-width: 680px) {
  .legal { padding-left: 5%; padding-right: 5%; }
  .legal-doc p, .legal-doc li, .legal-doc dd { font-size: 15px; }
  .legal-doc dl { grid-template-columns: 1fr; gap: 2px; }
  .legal-doc dd { margin-bottom: 10px; }
}