/* Long-form prose. The homepage is all bespoke layout blocks and has no
   body-copy scale, so this is the one place that needs one. Spectrum 2 tokens
   only — same sources site.css draws from, so light/dark comes for free. */

.bao-prose {
  --bao-prose-max: 760px;
}

.bao-prose .bao-wrap {
  max-width: var(--bao-prose-max);
}

.bao-prose h1 {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: var(--extra-bold-font-weight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--spacing-100);
}

.bao-prose__meta {
  font-size: var(--font-size-75);
  color: var(--text-subdued);
  margin: 0 0 var(--spacing-400);
}

.bao-prose__lede {
  font-size: var(--font-size-300);
  line-height: 1.6;
  color: var(--text-color);
  margin: 0 0 var(--spacing-500);
  padding-bottom: var(--spacing-400);
  border-bottom: var(--border-width-100) solid var(--border-default);
}

.bao-prose h2 {
  font-size: var(--font-size-300);
  font-weight: var(--bold-font-weight);
  letter-spacing: -0.01em;
  margin: var(--spacing-500) 0 var(--spacing-200);
  /* Deep-linked from the app's Settings → Privacy and from within the page. */
  scroll-margin-top: 96px;
}

.bao-prose h3 {
  font-size: var(--font-size-200);
  font-weight: var(--bold-font-weight);
  margin: var(--spacing-400) 0 var(--spacing-100);
}

.bao-prose p {
  font-size: var(--font-size-100);
  line-height: 1.7;
  color: var(--text-color);
  margin: 0 0 var(--spacing-200);
}

.bao-prose strong {
  font-weight: var(--bold-font-weight);
}

.bao-prose__list {
  margin: 0 0 var(--spacing-300);
  padding-inline-start: var(--spacing-400);
  display: grid;
  gap: var(--spacing-75);
}

.bao-prose__list li {
  font-size: var(--font-size-100);
  line-height: 1.7;
  color: var(--text-color);
}

.bao-prose__list li::marker {
  color: var(--bao-coral);
}

/* Enum values, header names, and paths quoted inline. Never a code block — none
   of this is anything to copy and run. */
.bao-mono {
  font-family: var(--font-family-code);
  font-size: 0.92em;
  background: var(--bao-wash);
  border-radius: var(--corner-radius-medium-default);
  padding: 1px 5px;
  white-space: nowrap;
}

.bao-prose__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--spacing-300);
  font-size: var(--font-size-100);
}

.bao-prose__table th,
.bao-prose__table td {
  text-align: start;
  vertical-align: top;
  padding: var(--spacing-100) var(--spacing-100);
  border-bottom: var(--border-width-100) solid var(--border-default);
  line-height: 1.6;
}

.bao-prose__table th {
  font-weight: var(--bold-font-weight);
  color: var(--text-subdued);
  font-size: var(--font-size-75);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bao-prose__table td:first-child {
  width: 58%;
}

@media (max-width: 640px) {
  .bao-prose__table td:first-child {
    width: auto;
  }
  .bao-mono {
    white-space: normal;
  }
}