.prose {
  --prose-vertical-spacing: 1.5ch;
  --prose-list-vertical-spacing: 0.5ch;
  --prose-list-horizontal-spacing: 2ch;
  --prose-color: var(--color-text-dimmed);
  --prose-secondary-color: var(--color-text);

  width: 100%;
  color: var(--prose-color);
  font: var(--typography-body-large);
  hyphens: auto;
}

.prose > * {
  margin-block: var(--prose-vertical-spacing);

  &:first-child {
    margin-block-start: 0;
  }

  &:last-child {
    margin-block-end: 0;
  }
}

.prose h2 {
  padding-bottom: 0.5ch;
  border-bottom: 1px solid var(--color-border-light);
}

.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  margin-top: calc(var(--prose-vertical-spacing) + 1ch);
  color: var(--prose-secondary-color);
  scroll-margin-top: var(--page-header-middle-height);
}

.prose h2:first-child,
.prose h3:first-child,
.prose h4:first-child,
.prose h5:first-child,
.prose h6:first-child {
  margin-top: 0;
}

.prose h2 + h3,
.prose h3 + h4,
.prose h4 + h5,
.prose h5 + h6 {
  margin-top: 0;
}

.prose .heading-permalink {
  visibility: hidden;
  margin-left: 1ch;
  scroll-margin-top: 2ch;
  text-decoration: none;
}

.prose h1:hover .heading-permalink,
.prose h2:hover .heading-permalink,
.prose h3:hover .heading-permalink,
.prose h4:hover .heading-permalink,
.prose h5:hover .heading-permalink,
.prose h6:hover .heading-permalink {
  visibility: visible;
}

.prose ul,
.prose ol {
  padding-inline-start: var(--prose-list-horizontal-spacing);
}

.prose li > ul,
.prose li > ol {
  position: relative;

  &::before {
    position: absolute;
    left: calc(-1.5ch + 1px);
    height: 100%;
    content: "";
    border-left: 1px solid var(--color-border-light);
  }
}

.prose ul > *,
.prose ol > *,
.prose li > * {
  margin-block: var(--prose-list-vertical-spacing);
}

.prose li::marker {
  color: var(--color-border);
}


body:not(.is-using-mouse) .prose .heading-permalink {
  visibility: visible;
}

.prose img {
  border-radius: var(--radius-lg);
  overflow: hidden;
}