.toc-heading, .toc-wrapper {
  padding: var(--basis-padding);
  padding-block: calc(var(--basis-padding) * 2);
  flex-direction: column;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.toc-heading {
  padding-block: calc(var(--basis-padding) * 3);
  padding-block-start: calc((var(--basis-padding) * 3) + calc(var(--basis) / 2));
  position: relative;

  &:after {
    content: "";
    background: var(--color-border-over-flood);
    width: 100%;
    height: 1px;
    top: calc(var(--basis) / 2);
    mix-blend-mode: color-dodge;
    position: absolute;
    left: 0;
    right: 0;
  }

  &:before {
    content: "";
    background: var(--color-border-over-flood);
    mix-blend-mode: color-dodge;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }

  & > * {
    color: var(--color-text-over-flood);
    background-color: #0000;

    & h1 {
      font-size: max(3rem, 3.5vw);
    }
  }
}

.toc-width {
  width: 100%;
  max-width: 60rem;
}

.toc-section {
  gap: calc(var(--basis-padding) * 2);
  flex-direction: column;
  padding-block-start: calc(var(--basis-padding) * 4);
  display: flex;

  & h2 {
    text-transform: uppercase;
    letter-spacing: .2em;
    opacity: .75;
    font-size: 1rem;
    font-weight: 200;
  }

  & ul {
    font-size: max(2.5vw, 1rem);

    & li {
      margin-bottom: calc(var(--basis-padding) * 2);
    }
  }

  & a {
    color: var(--color-highlight);
    text-decoration: underline 1px wavy;
    text-decoration-color: hsl(from currentcolor h s l / 50%);
    font-weight: 800;

    &:hover {
      text-decoration-color: hsl(from currentcolor calc(h + 50) s l / 100%);
    }
  }

  & small {
    opacity: .75;
    font-size: 1rem;
  }
}

@media (width >= 40rem) {
  .toc-section {
    flex-direction: row;

    & h2 {
      writing-mode: vertical-lr;
      text-orientation: sideways;
      margin-top: 2ex;
    }
  }
}
/*# sourceMappingURL=words.87953efe.css.map */