/* ==========================================================================
   Text pages (page.php) — Privacy Policy and other block-editor pages.
   The site's own type scale, nothing new: H1 Title/Large, H2 Title/Small,
   H3 Body/Large, body Body/Medium. One readable column (~70 characters).
   ========================================================================== */

.page-text__hero {
  padding-top: calc(var(--header-h) + var(--space-100));
  padding-bottom: var(--space-60);
}
.page-text__title {
  margin: 0;
  font-size: var(--title-lg);
  line-height: var(--title-lg-lh);
  letter-spacing: var(--title-lg-ls);
  font-weight: 400;
  color: var(--text-title);
}

.page-text__body { padding-bottom: var(--space-100); }

.prose {
  max-width: 760px;
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  color: var(--text-body);
}

/* Headings: generous space above (a new section starts), little below (it
   belongs to the text that follows). */
.prose h2 {
  margin: 64px 0 16px;
  font-size: var(--title-sm);
  line-height: var(--title-sm-lh);
  letter-spacing: var(--title-sm-ls);
  font-weight: 400;
  color: var(--text-title);
}
.prose h3 {
  margin: 40px 0 8px;
  font-size: var(--body-lg);
  line-height: var(--body-lg-lh);
  font-weight: 500;
  color: var(--text-title);
}
.prose h4 {
  margin: 32px 0 8px;
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  font-weight: 500;
  color: var(--text-title);
}
.prose > :first-child { margin-top: 0; }
.prose h2 + h3 { margin-top: 24px; }

/* Explicit: a global p rule otherwise sets 34px and paragraphs and lists drift apart. */
.prose p { margin: 0 0 20px; font-size: var(--body-md); line-height: var(--body-md-lh); }

.prose ul,
.prose ol { margin: 0 0 24px; padding-left: 1.25em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 8px; padding-left: 0.25em; }
.prose li::marker { color: var(--text-title); }

.prose strong, .prose b { font-weight: 500; color: var(--text-title); }

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

.prose hr { margin: 48px 0; border: 0; border-top: 1px solid rgba(28, 27, 31, 0.12); }

.prose table { width: 100%; margin: 0 0 24px; border-collapse: collapse; font-size: var(--body-sm); line-height: var(--body-sm-lh); }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid rgba(28, 27, 31, 0.12); text-align: left; vertical-align: top; }
.prose th { font-weight: 500; color: var(--text-title); }

@media (max-width: 767px) {
  .page-text__hero { padding-top: calc(var(--header-h) + 48px); padding-bottom: 32px; }
  .prose h2 { margin-top: 48px; }
  .prose h3 { margin-top: 32px; }
}