/* Legal pages: long-form reading on the same dark ground as the landing page.
   Measure is kept tight and the type a touch larger, because these get read
   properly by exactly the people you least want squinting. */

.legal { padding: 56px 0 80px; }
.legal .wrap { max-width: 760px; }

.legal h1 { font-size: clamp(36px, 5vw, 52px); margin-bottom: 10px; max-width: none; }
.legal-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 28px;
}
.legal-lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--sand-2);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line-2);
  margin: 0 0 8px;
}

.legal h2 {
  font-size: 25px;
  margin: 42px 0 12px;
  max-width: none;
  scroll-margin-top: 80px;
}
.legal h3 {
  font-family: var(--body);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--sand);
  margin: 26px 0 8px;
}
.legal p { font-size: 15.5px; line-height: 1.72; color: var(--sand-2); margin: 0 0 14px; }
.legal p b, .legal li b { color: var(--sand); font-weight: 600; }
.legal a { color: var(--spark); }
.legal code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--deeper);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--sand);
}

.legal ul { margin: 0 0 16px; padding: 0; list-style: none; }
.legal li {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--sand-2);
  padding: 7px 0 7px 22px;
  position: relative;
}
.legal li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 16px;
  width: 6px;
  height: 6px;
  background: var(--moss);
  transform: rotate(45deg);
}

.legal-callout {
  background: var(--deep);
  border: 1px solid var(--line);
  border-left: 3px solid var(--spark);
  border-radius: 4px;
  padding: 20px 22px;
  margin: 20px 0 24px;
}
.legal-callout p:last-child, .legal-callout ul:last-child { margin-bottom: 0; }
.legal-callout li::before { background: var(--spark); }

.legal-table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; }
.legal-table th, .legal-table td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-2);
  font-size: 14.5px;
  color: var(--sand-2);
  vertical-align: top;
}
.legal-table th {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  border-bottom-color: var(--line);
}
.legal-table td:first-child { color: var(--sand); }

@media (max-width: 560px) {
  .legal-table th:last-child, .legal-table td:last-child { display: none; }
  .legal h2 { font-size: 22px; }
}