.deepdoc-hero {
  border-bottom: var(--line-strong) solid var(--color-text);
  background: var(--color-panel);
}

.deepdoc-hero h1 {
  max-width: var(--content-reading);
  margin-bottom: 18px;
  font-size: clamp(46px, 7vw, 92px);
}

.deepdoc-hero__lead {
  max-width: var(--content-reading);
  margin-bottom: 22px;
  color: var(--color-text-muted);
  font-size: clamp(16px, 2vw, 21px);
}

.deepdoc-hero__relation {
  max-width: var(--content-reading);
  margin-top: 28px;
  padding: 18px;
  border-left: 8px solid var(--color-accent);
  background: var(--color-bg);
}

.deepdoc-hero__relation p {
  margin-bottom: 0;
  color: var(--color-text-muted);
}

.deepdoc-hero__relation a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.deepdoc-index {
  padding-top: 28px;
}

.deepdoc-prose {
  padding-bottom: var(--section-space);
}

.deepdoc-chapter {
  padding-top: calc(var(--section-space) * 0.62);
  padding-bottom: calc(var(--section-space) * 0.3);
  scroll-margin-top: 18px;
}

.deepdoc-chapter + .deepdoc-chapter {
  border-top: var(--line-thin) dashed var(--color-border);
}

.deepdoc-chapter > h2 {
  margin-top: 0;
}

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

.deepdoc-prose .table-wrap {
  margin-top: 24px;
  margin-bottom: 28px;
}

.deepdoc-prose pre {
  margin-top: 22px;
}

@media (max-width: 640px) {
  .deepdoc-hero h1 {
    font-size: clamp(40px, 13vw, 58px);
  }

  .deepdoc-hero__relation {
    padding: 15px;
    border-left-width: 6px;
  }

  .deepdoc-index {
    padding-top: 18px;
  }

  .deepdoc-chapter {
    padding-top: 52px;
    padding-bottom: 24px;
  }
}