/* ------------------------------------------------------------------ */
/* Font‐Faces
/* ------------------------------------------------------------------ */

@font-face {
  font-family: "Source Serif 4 Variable";
  font-style: normal;
  src: url("/fonts/Source_Serif_4_Var.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4 Variable";
  font-style: italic;
  src: url("/fonts/Source_Serif_4_Var_It.woff2") format("woff2");
}

/* ------------------------------------------------------------------ */
/* View Transitions
/* ------------------------------------------------------------------ */

@view-transition {
  navigation: auto;
  types: none;
}

/* ------------------------------------------------------------------ */
/* Root
/* ------------------------------------------------------------------ */

:root {
  --text-color-pri: light-dark(#111, #EEE);
  --text-color-sec: light-dark(#555, #AAA);
}


/* ------------------------------------------------------------------ */
/* Tags
/* ------------------------------------------------------------------ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
  interpolate-size: allow-keywords;
  scroll-behavior: smooth;
  scroll-padding-block: 2rem;
  scrollbar-gutter: stable;
}

body {
  min-block-size: 100svh;
  max-inline-size: min(60rem, 100% - 2rem);
  margin-block: 0;
  margin-inline: auto;

  display: block grid;
  grid-template-rows: auto 1fr auto;

  font-family: "Source Serif 4 Variable", serif;
  text-rendering: optimizeLegibility;
  hanging-punctuation: first last;
  color: var(--text-color-pri);

  & > header {
    margin-block: 2em;

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

    & img {
      block-size: 3rem;
      inline-size: 3rem;
    }

    & > button {

      display: none;

      @media (max-width: 35rem) {
        display: block;
        position: absolute;
        background: red;
        width: 2rem;
        aspect-ratio: 1;
        top: 2rem;
        right: 2rem;
        z-index: 1;
        background-repeat: no-repeat;
        border: 0;
      }
    }

    & > nav {

      & > ul {
        padding-block: 0;
        margin-block: 0;
        display: block flex;
        column-gap: 2rem;
        list-style: none;

        & > li {
          font-variant: small-caps;
        }

        @media (max-width: 35rem) {
          background: hsl(0, 0%, 100%, 0.1);
          backdrop-filter: blur(1rem);
          padding-block: 6rem;
          padding-inline: 2rem;
          position: fixed;
          inset: 0 0 0 30%;
          flex-direction: column;
          row-gap: 2rem;
        }
      }
    }
  }

  & > footer {
    margin-block: 2em;

    display: block flex;
    column-gap: 2rem;
    justify-content: space-between;
    align-items: center;

    & > nav > dl {
      display: block flex;
      column-gap: 2rem;

      & > div {
        padding-inline: 1rem;
      }

      & dt {
        font-weight: 700;
        margin: 0;
        padding: 0;
      }

      & dd {
        margin: 0;
        padding: 0;
      }
    }
  }
}

/* ------------------------------------------------------------------ */
/* Classes
/* ------------------------------------------------------------------ */



/* ------------------------------------------------------------------ */
/* IDs
/* ------------------------------------------------------------------ */



/* ------------------------------------------------------------------ */

body {

  & > main {
    &:has(> nav) {
      display: block grid;
      grid-template-columns: 1fr 2fr;
      column-gap: 3rem;
    }
  }

  @media screen and (min-width: 768px) {
    font-size: 1.125rem;
  }
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;
  text-wrap: balance;
}

h1 {
  margin-block: 6.0rem 1.5rem;
  font-size: 1.25em;
  font-weight: 700;

  &:first-child {
    margin-block-start: 0;
  }
}

h2 {
  margin-block: 1.5rem 1.0rem;
  font-size: 1.00em;
  font-weight: 700;

  &:first-child {
    margin-block-start: 0;
  }
}

h3 {
  margin-block: 1.0rem 0.5rem;
  font-size: 1.00em;
  font-weight: 700;

  &:first-child {
    margin-block-start: 0;
  }
}

h4 {
  margin-block: 1.0rem 0.5rem;
  font-size: 1.00em;
  font-weight: 700;

  &:first-child {
    margin-block-start: 0;
  }
}

h5 {
  margin-block: 0.0rem 0.0rem;
  font-size: 1.00em;
  font-weight: 700;

  &:first-child {
    margin-block-start: 0;
  }
}

h6 {
  margin-block: 0.0rem 0.0rem;
  font-size: 1.00em;
  font-weight: 700;

  &:first-child {
    margin-block-start: 0;
  }
}


article {
  p, li, dd {
    line-height: 1.40;
    text-wrap: pretty;
  }

  p {
    margin-block: 0.75em;
  }
}

a {
  color: inherit;
  text-decoration: none;
}


main dt {
  float: left;
  clear: left;

  font-weight: bold;
  text-align: right;

  &::after {
    content: ":";
  }
}

main dd {
  margin-inline-start: 6rem;
}

main > nav.table-of-contents {
  & ul {
    list-style-type: none;
    padding: 0;
    padding-inline-start: 2ch;
  }
}

nav a {
  display: block;
  width: 100%;
  height: 100%;
}