.archives--timeline {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  scroll-behavior: smooth;

  nav {
    details {
      padding: 0.75em 0.75em 0.75em 1.5em;
      margin: 0 0 1em 0;
      border: 2px solid var(--border-color);
      border-radius: var(--border-radius, 6px);
    }

    ul {
      margin: 0;
      padding: 0 0 0 1rem;
      list-style: none;
    }

    li {
      margin-bottom: 0.75em;

      a {
        font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;

        span {
          font-family: serif;
          font-size: smaller;
        }
      }
    }
  }

  .archives--timeline-events {
    scroll-behavior: smooth;
  }

  .archives--empty-title {
    font-size: 200%;
  }
}

@media (min-width: 640px) {
  .archives--timeline {
    flex-flow: row nowrap;
    justify-content: space-between;

    nav {
      flex-basis: 30%;
      position: sticky;
      align-self: start;
      top: 2rem;
      max-height: 90vh;
      overflow: scroll;
      padding-left: 2em;

      ul {
        padding-left: 1em;
        list-style: disc;
      }
    }

    .archives--timeline-events {
      flex-basis: 66%;
    }
  }
}