header#book-header {
  @media (width >= 900px) {
    background: none;
    border: none;
    pointer-events: none;
    a {
      pointer-events: initial;
    }
  }
}

main {
  @media (width >= 900px) {
    display: grid;
    grid-template-columns: var(--s-6xl-8xl) 1fr;
  }

  nav {
    grid-column: 1;
    grid-row: 1;

    position: sticky;
    top: var(--s-2xl);
    align-self: start;
    padding: var(--s-s);

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

      & > li {
        counter-increment: chapter-counter;
        display: grid;
        grid-template-columns: 3.5ch 1fr 9fr;
        row-gap: var(--s-3xs);

        font-size: var(--fs-0);
        font-variation-settings: "wght" 300;

        &::before {
          content: "[" counter(chapter-counter, decimal-leading-zero) "]";

          color: var(--rhizo-gray);
          border-bottom: 1px solid var(--rhizo-fg);
        }

        .chapter {
          grid-column: 2 / -1;
          border-bottom: 1px solid;

          text-transform: uppercase;
          text-decoration: none;

          transition: font-variation-settings 75ms ease-out;
          &[aria-current="page"]:not(:has(~ * [aria-current="true"])) {
            font-variation-settings: "wght" 600;
          }
        }
      }
    }

    #sections-list {
      grid-column: 3;

      list-style-type: none;
      counter-reset: section-counter;
      padding: 0;
      margin: 0;

      & > li {
        counter-increment: section-counter;
        display: grid;
        grid-template-columns: 5.5ch 1fr;
        margin-bottom: var(--s-3xs);

        font-size: var(--fs--1);
        font-variation-settings: "wght" 300;

        &::before {
          content: "[" counter(chapter-counter, decimal-leading-zero) "."
            counter(section-counter, decimal-leading-zero) "]";

          color: var(--rhizo-gray);
          border-bottom: 1px solid var(--rhizo-fg);
        }

        .section {
          border-bottom: 1px solid;

          text-transform: lowercase;
          text-decoration: none;

          transition: font-variation-settings 75ms ease-out;
          &[aria-current] {
            font-variation-settings: "wght" 600;
          }
        }
      }
    }

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

  article {
    max-width: 65ch;
    padding-inline: var(--s-s-m);

    @media (width < 900px) {
      margin: auto;
    }

    sup.footnote-ref {
      font-size: var(--fs--2);
      font-variation-settings: "wght" 200;

      a {
        position: relative;
        text-decoration: none;
      }

      a:before {
        position: absolute;
        inset: -2px -7px;
        content: "";
      }
    }
  }

  footer#footnotes {
    margin-top: var(--s-xl);
    padding: var(--s-s);
    border-top: 1px dashed;

    font-size: var(--fs-0);
    max-width: 65ch;

    grid-column: 2;

    .info {
      font-size: var(--fs--1);
      text-transform: uppercase;
      color: var(--rhizo-gray);
      line-height: 1;

      letter-spacing: -1%;
      font-variation-settings: "wght" 450;

      margin-bottom: var(--s-xs);
    }

    #footnotes-container {
      display: grid;
      grid-template-columns: auto 1fr auto;

      display: grid;
      row-gap: var(--s-s);
      column-gap: var(--s-3xs);

      align-items: baseline;

      .footnote-count {
        counter-increment: footnote-counter;
        font-size: var(--fs--2);
      }

      .footnote-content {
        padding-inline: var(--s-3xs);
        font-size: var(--fs--1);
        counter-reset: backref-counter;

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

        p:first-of-type {
          margin-top: 0;
        }
      }

      .back-refs {
        justify-self: end;
        font-size: var(--fs--2);

        a {
          counter-increment: backref-counter;
          text-decoration: none;

          &::before {
            content: "[" counter(backref-counter, lower-alpha) "]";
          }
        }
      }
    }
  }

  footer#next-prev {
    margin-top: var(--s-2xl);
    padding: var(--s-m);

    border-top: 1px solid;
    grid-column: 2;

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

      text-decoration: none;

      .cover {
        width: var(--s-3xl-4xl);
        height: var(--s-3xl-4xl);

        /* for now, before we have covers */
        display: none;

        grid-column: 1;
        grid-row: 1 / span 3;
      }

      .info {
        font-size: var(--fs--1);
        text-transform: uppercase;
        color: var(--rhizo-gray);
        line-height: 1;

        letter-spacing: -1%;
        font-variation-settings: "wght" 450;

        align-self: end;
        grid-column: 2;
        grid-row: 1;
      }

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

        grid-column: 2;
        grid-row: 2;
      }

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

        grid-column: 2;
        grid-row: 3;
      }

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

      svg {
        align-self: center;
        grid-row: 1 / span 3;
        width: var(--s-xl);
        height: auto;

        grid-column: 3;
      }
    }
  }
}