.deepdoc-intro {
  padding-top: 72px;
  padding-bottom: 48px;
}

.deepdoc-intro h1 {
  margin-top: 8px;
  margin-bottom: 24px;
}

.deepdoc-intro > p:not(.kicker) {
  max-width: var(--reading);
  line-height: var(--line-prose);
}

.deepdoc-lead {
  font-size: var(--text-lead);
  color: var(--c-muted);
}

.deepdoc-baseline {
  margin-top: 32px;
}

.deepdoc-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 0;
  margin: 8px 0 0;
  list-style: none;
}

.deepdoc-facts b {
  display: block;
  margin-bottom: 8px;
  font-weight: var(--weight-display);
}

.deepdoc-facts span {
  color: var(--c-muted);
  font-size: var(--text-label);
}

.deepdoc-toc {
  margin-top: 0;
  margin-bottom: 0;
}

.deepdoc-chapter {
  scroll-margin-top: calc(var(--head-h) + 24px);
}

.deepdoc-chapter-head {
  max-width: var(--reading);
  margin-bottom: 28px;
}

.deepdoc-chapter-head h2 {
  margin-top: 0;
  margin-bottom: 16px;
}

.deepdoc-chapter-head > p:last-child {
  margin-bottom: 0;
  color: var(--c-muted);
}

.deepdoc-chapter > .prose {
  padding: clamp(24px, 4vw, 52px);
}

.deepdoc-chapter > .prose > p,
.deepdoc-chapter > .prose > h3,
.deepdoc-chapter > .prose > aside {
  max-width: var(--reading);
  margin-inline: auto;
}

.deepdoc-chapter > .prose > h3 {
  margin-top: 40px;
  margin-bottom: 20px;
}

.deepdoc-chapter > .prose > h3:first-child {
  margin-top: 0;
}

.deepdoc-chapter > .prose > p:last-child {
  margin-bottom: 0;
}

.deepdoc-chapter .table-scroll,
.deepdoc-chapter pre {
  max-width: var(--reading);
  margin: 28px auto;
}

.deepdoc-chapter .data-table {
  display: table;
  overflow: visible;
}

.deepdoc-chapter .data-table th,
.deepdoc-chapter .data-table td {
  font-size: var(--text-label);
}

.deepdoc-chapter pre {
  font-size: var(--text-sm);
}

@media (max-width: 900px) {
  .deepdoc-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .deepdoc-intro {
    padding-top: 40px;
    padding-bottom: 32px;
  }

  .deepdoc-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .deepdoc-chapter > .prose {
    padding: var(--card-pad);
  }

  .deepdoc-toc {
    gap: 4px;
    padding: 12px;
  }

  .deepdoc-toc a {
    width: 100%;
  }

  .deepdoc-chapter > .prose > h3 {
    font-size: var(--text-lead);
  }
}