main {
  max-width: 75ch;
  padding-inline: var(--s-s-m);
  margin: auto;
}

#title {
  margin-block: var(--s-xl);

  h1 {
    margin: 0;
    line-height: 1;
    border: none;

    font-size: var(--fs-6);
    letter-spacing: -1%;
    font-variation-settings:
      "wght" 600,
      "wdth" 95;
  }
  p {
    margin: 0;
    font-size: var(--fs-1);

    font-variation-settings:
      "wght" 200,
      "ital" 1;
  }
}

#toc {
  margin-top: 8rem;

  h2 {
    font-size: var(--fs-4);
    margin: 0;
    margin-bottom: var(--s-m);
  }

  ol.chapters-list {
    list-style-type: none;
    counter-reset: chapter-counter;
    padding: 0;
    margin: 0;

    li {
      display: flex;
      align-items: center;
      counter-increment: chapter-counter;
      gap: var(--s-2xs);

      &::before {
        content: "[" counter(chapter-counter, decimal-leading-zero) "]";
        color: var(--rhizo-gray);
        font-variation-settings: "wght" 555;
        width: 3.5ch;

        @media (width <= 450px) {
          display: none;
        }
      }
    }
  }

  .chapter {
    width: 100%;
    padding: var(--s-xs);
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--s-s);

    text-decoration: none;

    .cover {
      width: var(--s-3xl-4xl);
      height: var(--s-3xl-4xl);
      grid-row: 1 / span 2;
      /* For now before we have covers: */
      display: none;
    }

    .title {
      line-height: 1;
      font-size: var(--fs-4);
      letter-spacing: -1%;
      font-variation-settings:
        "wght" 450,
        "wdth" 85;

      align-self: end;
    }

    .description {
      font-size: var(--fs-1);
      font-variation-settings: "wght" 200;
      grid-row: 2;
    }

    &:hover {
      background-color: var(--rhizo-bg-light);
    }
  }
}