.page {

  background: var(--color-white);
  border-bottom: 3px dashed var(--color-base-darker);
  border-top: 3px dashed var(--color-base-darker);
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: var(--space-large);
  padding: var(--space-large) var(--space-medium);

  &__content {
    display: flex;
    gap: var(--space-large);
    margin-inline: auto;
    width: min(100%, 24em);
  }

  aside {

    display: none;
    flex-direction: column;
    font-size: var(--font-size-x-small);
    letter-spacing: -0.01em;
    margin-bottom: -0.5em;
    margin-top: -0.5em;

    div {
      display: flex;
      flex-direction: column;
      position: sticky;
      top: var(--space-large);
    }

    form.search {
      margin: 0 -0.8em 1.4em -0.8em;
    }

    ul {

      display: flex;
      flex-direction: column;
      font-size: 80%;
      gap: 0.3em;
      letter-spacing: -0.01em;
      list-style: none;
      padding: 0;

      li {

        margin: 0;
        position: relative;

        a {
          border-radius: 0.3em;
          color: var(--color-grey);
          display: flex;
          margin-left: -0.8em;
          margin-right: -0.8em;
          padding: 0.55em 0.8em 0.45em 0.8em;
          position: relative;
          text-decoration: none;
          transition:
            background var(--transition),
            color var(--transition)
          ;
          z-index: 1;
        }

        &.selected a {
          background: var(--color-blue);
          color: var(--color-white);
        }

        ul.sections {

          gap: 0.8em;
          line-height: 1.3;
          padding: 0.6em 0;
          position: relative;
          top: auto;

          li {

            display: flex;

            a {
              background: none;
              color: var(--color-grey-light);
              display: inline-block;
              font-weight: 400;
              margin-left: 0;
              margin-right: 0;
              overflow: hidden;
              padding: 0;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 100%;
            }

            &.selected a {
              color: var(--color-grey);
              font-weight: 500;
            }

          }

        }

      }

    }

  }

  article {

    display: flex;
    flex-direction: column;
    font-size: var(--font-size-x-small);
    letter-spacing: -0.01em;
    margin-bottom: -0.45em;
    margin-top: -0.5em;

    & > * + * {
      margin-top: var(--flow-space, 1.4em);
    }

    & > * {

      & + h1,
      & + h2,
      & + h3,
      & + h4,
      & + h5,
      & + h6 {
        --flow-space: 2.4em;
      }

    }

    h1 {

      font-size: var(--font-size-xx-large);
      padding-top: 0.08em;

      & + * {
        --flow-space: 1.4em;
      }

    }

    h2,
    h3 {

      & + * {
        --flow-space: 0.9em;
      }

    }

    h2 {
      color: var(--color-blue);
      padding-top: 0.1em;
    }

    h3 {
      color: var(--color-grey);
      padding-top: 0.125em;
    }

    h4,
    h5,
    h6 {

      padding-top: 0.175em;

      & + * {
        --flow-space: 0.4em;
      }

    }

    hr {

      --flow-space: 0;
      height: var(--space-x-large);

      & + * {
        --flow-space: 0;
      }

      &.ornament {

        display: flex;
        flex-direction: column;
        height: auto;
        margin-bottom: 2.4em;
        margin-top: 2.4em;

        &:before {
          color: var(--color-base-darkest);
          content: '++++';
          font-size: var(--font-size-medium);
          font-weight: 500;
          letter-spacing: 0.1em;
          line-height: 1;
        }

      }

    }

    figure {
      border-radius: 0.2em;
      overflow: hidden;
    }

    nav {

      --flow-space: 4.1em;
      display: flex;
      gap: 1.2em;

      a {

        background: var(--color-white);
        border-radius: 0.3em;
        box-shadow:
          0 0 0 1px rgba(var(--rgb-black), 0.075),
          0 10px 30px -15px rgba(var(--rgb-black), 0.15),
          0 20px 20px -30px rgba(var(--rgb-black), 0.15)
        ;
        flex: 1;
        padding: 1em 1.2em 0.8em 1.2em;
        text-decoration: none;
        transition:
          background var(--transition),
          box-shadow var(--transition)
        ;

        dl {

          display: flex;
          flex-direction: column;
          gap: 0.15em;

          dt {
            color: var(--color-grey-lighter);
            font-size: 65%;
            letter-spacing: normal;
            text-transform: uppercase;
          }

          dd {
            color: var(--color-grey);
            font-size: 85%;
          }

        }

        &:last-child {
          text-align: right;
        }

      }

    }

    .highlight {

      background: var(--color-base-dark);
      border-radius: 0.3em;
      letter-spacing: normal;
      line-height: 1.4;
      position: relative;

      pre {

        overflow-x: auto;
        padding: 0.6em 1.2em;
        white-space: pre;

        code {
          background: none;
          border-radius: initial;
          font-family: var(--font-family-mono);
          font-size: var(--font-size-small);
          font-style: normal;
          font-weight: 400;
          line-height: inherit;
          padding: 0;
        }

      }

      button.copy {
        background: var(--color-blue);
        border-radius: 0.2em;
        color: var(--color-white);
        cursor: pointer;
        display: none;
        font-family: var(--font-family-mono);
        font-size: var(--font-size-small);
        font-weight: 600;
        letter-spacing: normal;
        line-height: inherit;
        opacity: 0;
        padding: 0.25em 0.6em;
        position: absolute;
        right: 0.8em;
        text-transform: uppercase;
        top: 0.8em;
        transition:
          background var(--transition),
          opacity var(--transition)
        ;
      }

    }

  }

  &--docs {
    margin-top: 0;
  }

  @media(hover: hover) {

    aside ul li {

      a {

        &:focus,
        &:hover {
          background: var(--color-base-dark);
        }

      }

      ul.sections li {

        a {

          &:focus,
          &:hover {
            color: var(--color-grey);
            text-decoration: underline;
          }

        }

        &.selected a {

          &:focus,
          &:hover {
            color: var(--color-grey);
          }

        }

      }

    }

    article {

      nav a {

        &:focus,
        &:hover {
          background: var(--color-base);
          box-shadow:
            0 0 0 1px rgba(var(--rgb-black), 0.09),
            0 10px 30px -15px rgba(var(--rgb-black), 0.18),
            0 20px 20px -30px rgba(var(--rgb-black), 0.18)
          ;
        }

      }

      .highlight {

        button.copy {

          &:focus,
          &:hover {
            background: var(--color-blue-light);
            opacity: 1;
          }

        }

        &:focus button,
        &:hover button {
          opacity: 1;
        }

      }

    }

  }

  @media(min-width: 64em) {

    margin-top: var(--space-x-large);
    padding: var(--space-x-large) var(--space-large);

    aside ul li.selected a {
      background: var(--color-blue);
    }

    article .highlight button.copy {
      display: flex;
    }

    &--docs {

      margin-top: 0;

      .page__content {
        width: min(100%, 94.5rem);
      }

      aside {
        display: flex;
        flex: 2;
      }

      article {
        flex: 7;
      }

    }

  }

  @media(prefers-color-scheme: dark) {

    article {

      figure img {
        filter: invert(100%);
      }

      .highlight {
        background: var(--color-base);
      }

    }

  }

}
