:root {
  --prose-padding: 1.5rem;
  --prose-width: min(750px, 100%);
}

.prose > *,
.prose > div[class*='language-'] > pre,
.page-footer {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--prose-padding);
  padding-right: var(--prose-padding);
  width: var(--prose-width);
}

.prose {
  line-height: 1.75;

  a {
    color: var(--fc-intense);
    text-decoration: underline;
    text-decoration-color: var(--fc-soft);
    transition: color 80ms ease;

    &:hover,
    &:active {
      color: var(--fc-primary-soft);
      text-decoration-color: var(--fc-primary-soft);
    }
  }

  ul > li {
    padding-left: 1.75em;
    position: relative;
  }

  ul > li::before {
    background-color: var(--bg-primary);
    border-radius: 50%;
    content: "";
    height: 0.375em;
    left: 0.25em;
    position: absolute;
    top: 0.75em;
    width: 0.375em;
  }

  figure {
    margin-top: 2em;
    margin-bottom: 1.5em;
  }

  hr {
    margin-top: 3em;
    margin-bottom: 3em;
  }

  h1 {
    margin-bottom: 2rem;
    font-size: 38px;
    line-height: 1.4;
    letter-spacing: -.02em;
    font-weight: 700;
  }

  h2 {
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.3333333;
    margin-bottom: 1em;
    margin-top: 1.8em;
  }

  h3 {
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 0.6em;
    margin-top: 1.6em;
  }

  h4 {
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 0.5em;
    margin-top: 1.5em;
  }

  p,
  blockquote,
  div[class*='language-'] {
    margin-bottom: 1.25em;
    margin-top: 1.25em;
  }

  blockquote p {
    margin: 0;
  }

  p code,
  li code {
    @apply rounded;

    background-color: var(--bg-highlight);
    font-size: 0.9em;
    padding: 0.1em 0.3em 0.2em;
  }

  .heading + :not(.heading) {
    margin-top: 0;
  }

  .img {
    @apply my-10;
    display: block;
    padding: 0;

    &.narrow {
      width: min(500px, 100%);
    }
  }

  .caption {
    display: block;
    font-style: italic;
    margin-top: -1rem;
    margin-bottom: 2rem;
    text-align: center;
  }

  .code.caption {
    margin-top: -1rem;
    margin-bottom: 2rem;

    & > code {
      background: none;
      font-style: italic;
    }
  }

  blockquote,
  div[class*='language-'] pre {
    @apply py-4;
  }

  figure,
  .img {
    @apply md:rounded-md;
  }

  blockquote {
    @apply md:rounded-r-md py-6;
  }

  blockquote p + p {
    margin-top: 1rem;
  }
}

a.heading-anchor {
  @apply text-primary;
  float: left;
  margin-top: .125em;
  margin-left: -.87em;
  padding-right: .23em;
  font-size: .85em;
  opacity: 0;
  text-decoration: none!important;

  &::before {
    content: '#';
  }
}

.heading {
  &::before {
    --offset: calc(var(--navbar-height) + 1rem);
    display: block;
    content: " ";
    margin-top: calc(var(--offset) * -1);
    height: var(--offset);
    visibility: hidden;
    pointer-events: none;
  }

  &:focus, &:hover {
    a.heading-anchor {
      opacity: 1;
    }
  }
}
