@font-face {
  font-family: "Source Sans 3 VF";
  font-weight: 200 900;
  font-style: normal;
  font-stretch: normal;
  src: url("/static/fonts/SourceSans3VF-Upright.ttf.woff2")
    format("woff2-variations");
}

@font-face {
  font-family: "Source Sans 3 VF";
  font-weight: 200 900;
  font-style: italic;
  font-stretch: normal;
  src: url("/static/fonts/SourceSans3VF-Italic.ttf.woff2")
    format("woff2-variations");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-weight: 400;
  src: url("/static/fonts/IBMPlexMono-Italic.ttf") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  src: url("/static/fonts/IBMPlexMono-Regular.ttf") format("woff2");
}

:root {
  --content-max-width: 50rem;
  --content-padding: 1.5rem;
  --margin-default: 1.5rem;

  --color-text: #333;
}

body {
  color: var(--color-text);
  font-family: "Source Sans 3 VF", sans-serif;
  font-size: 1.125rem;
  font-weight: 450;
  hyphens: auto;
}

.header {
  height: 5rem;
  font-size: 1.5rem;
  font-weight: bold;
  background: white;
  position: sticky;
  top: 0;
  z-index: 1;

  & > * {
    padding: 1.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
  }

  & nav {
    display: flex;
    font-size: 1rem;

    & a {
      text-decoration: none;
      color: var(--color-text);
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;

      &:hover,
      &:focus-visible {
        background: #eaf8fc;
      }
    }
  }
}

.content-grid {
  display: grid;
  grid-template-columns:
    [full-start] 1fr [wide-start] var(--margin-default) [content-start] minmax(
      0,
      var(--content-max-width)
    )
    [content-end] var(--margin-default) [wide-end] 1fr [full-end];
  container-type: inline-size;
}

:where(.content-grid > *) {
  grid-column: content;
  margin-bottom: var(--margin-default);
}

h1 {
  margin-top: 3rem;
  margin-bottom: 0.5rem;
}

h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
}

h3 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

:has(+ ul, + ol) {
  margin-bottom: 0.5rem;
}

:is(ul, ol) > * {
  margin-bottom: 0.5rem;
}