header#book-header {
  position: sticky;
  top: 0;

  background-color: var(--rhizo-bg);

  padding: var(--s-3xs) var(--s-2xs-xs);
  border-bottom: 1px solid;

  display: flex;
  justify-content: space-between;
  align-items: center;

  #header-title {
    color: var(--rhizo-fg);
    text-decoration: none;

    font-size: var(--fs-3);
    letter-spacing: -1%;
    font-variation-settings: "wght" 200;
    svg {
      width: auto;
      height: var(--fs-2);
    }

    @media (width <= 450px) {
      .hide-on-mobile {
        display: none;
      }
    }
  }

  #go-home {
    height: var(--fs-3);

    svg {
      color: var(--rhizo-bg);
      background-color: var(--rhizo-fg);

      height: var(--fs-3);
      width: auto;
    }
  }
}

footer#book-footer {
  font-size: var(--fs--1);

  margin-top: var(--s-2xl);
  padding: var(--s-l);
  text-align: center;

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

a {
  color: var(--rhizo-fg);
}

main {
  article {
    font-size: var(--fs-0);
    font-variation-settings: "wght" 375;

    p {
      margin-block-start: var(--s-xs);
    }

    li {
      margin-block-end: var(--s-2xs);
    }

    h1 {
      font-size: var(--fs-5);
      letter-spacing: -1%;
      font-variation-settings:
        "wght" 650,
        "wdth" 110;

      border-bottom: 1px solid;
      padding-bottom: var(--s-2xs);
    }

    h2 {
      margin-top: var(--s-xl);

      font-size: var(--fs-3);
      letter-spacing: -1%;
      font-variation-settings:
        "wght" 500,
        "wdth" 110;

      border-bottom: 1px solid;
      padding-bottom: var(--s-2xs);

      a {
        text-decoration: none;
      }
    }

    h3 {
      margin-top: var(--s-l);

      font-size: var(--fs-2);
      letter-spacing: -1%;
      font-variation-settings:
        "wght" 450,
        "wdth" 110;

      border-bottom: 1px dashed;
      padding-bottom: var(--s-2xs);

      a {
        text-decoration: none;
      }
    }

    em {
      font-style: normal;
      font-variation-settings:
        "wght" 300,
        "wdth" 110,
        "ital" 1;
    }

    strong {
      font-weight: normal;
      font-variation-settings:
        "wght" 500,
        "wdth" 110;
    }

    .block {
      background-color: var(--rhizo-bg-light);
      padding: var(--s-s);
      margin: var(--s-s);

      h3 {
        padding: var(--s-2xs) var(--s-xs);
        margin: calc(-1 * var(--s-s));
        margin-bottom: var(--s-s);

        font-size: var(--fs-1);
        font-variation-settings:
          "wght" 350,
          "wdth" 85;

        border-bottom: 1px dotted;
      }

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

    figure {
      width: fit-content;
      margin: var(--s-s);
      margin-inline: auto;
      padding-inline: var(--s-s);

      img {
        max-width: 100%;
      }

      figcaption {
        margin-top: var(--s-2xs);
        font-size: var(--fs--1);
        font-variation-settings:
          "ital" 1,
          "wght" 350;
      }
    }

    table {
      margin: var(--s-s);
      border-collapse: collapse;

      tr:first-of-type {
        border-bottom: 1px solid;
        th {
          margin-bottom: 100px;
        }
      }

      th {
        background-color: var(--rhizo-bg-light);
        text-align: start;
        padding: var(--s-3xs) var(--s-2xs);

        font-variation-settings: "wght" 500;
      }

      td {
        padding: var(--s-2xs);
        font-size: var(--fs--1);
        vertical-align: top;
      }
    }

    blockquote {
      margin-inline: var(--s-s);
      border-inline-start: 1px solid;
      padding-inline-start: var(--s-xs);
      padding-block: var(--s-3xs);

      p:first-of-type {
        margin-block-start: 0;
      }

      font-variation-settings:
        "ital" 0.5,
        "wght" 300;

      .quote-source {
        &::before {
          content: "—";
        }

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

    pre {
      background-color: var(--rhizo-bg-dark);
      padding: var(--s-s);
      margin: var(--s-s);
      overflow-x: auto;
    }

    code {
      background-color: var(--rhizo-bg-dark);
      padding: var(--s-3xs);

      font-family: "Commit Mono", monospace;
    }

    code {
      .type,
      .type_builtin,
      .constant_builtin,
      .comment {
        color: var(--rhizo-white);
      }
    }

    math {
      background-color: var(--rhizo-bg-dark);
      padding: var(--s-3xs);
    }

    math[display="block"] {
      margin: var(--s-s);
      width: unset;
    }

    abbr {
      text-decoration: underline dotted var(--rhizo-gray);
      cursor: pointer;
      font-variation-settings: "wdth" 100;

      &:hover {
        font-variation-settings: "wdth" 125;
      }

      transition: font-variation-settings 75ms ease-out;
    }
  }
}