@font-face {
  font-family: "Ysabeau";
  src: url("assets/fonts/Ysabeau-Regular.otf");
}

@font-face {
  font-family: "Ysabeau";
  font-weight: bold;
  src: url("assets/fonts/Ysabeau-Bold.otf");
}

:focus-visible {
  outline: revert;
}

html {
  font-kerning: normal;
  font-family: "Ysabeau", sans-serif;
  font-variant-numeric: proportional-nums oldstyle-nums;
  font-size: 16px;
  line-height: 1.25rem;
}

@media screen and (width >= calc((36 + 2) * 24px)) {
  html {
    font-size: 24px;
  }
}

html {
  padding-block: 1rlh;
  padding-inline: 1rem;

  display: grid;
  grid: 100% / min(36rem, 100%);
  justify-content: center;
}

h1 {
  line-height: 1.5rlh;
  font-size: 2rem;
  font-weight: bold;
}

h1 small {
  font-size: 1rem;
  font-weight: normal;
  line-height: 1em;
  vertical-align: calc(7 / 16 * 1rex);
}

address {
  margin-block-end: 0.5rlh;
}

h2 {
  margin-block: 0.75rlh 0.25rlh;
  font-weight: bold;
}

li + li {
  margin-block-start: 0.5rlh;
}

li > :not(cite) {
  padding-inline-start: 1rem;
}

.sc,
abbr:not(.no-sc),
h2 {
  font-variant-caps: all-small-caps;
  letter-spacing: calc(1em / 16);
}

.lucide {
  height: 0.75rem;
  width: 0.75rem;
  vertical-align: calc(-1 / 6 * 0.75rem);
}

html {
  background-color: #faf5f1;
  color: #2b2b2b;
}

a {
  color: #634492;
}

@media screen and (prefers-color-scheme: dark) {
  html {
    background-color: #151515;
    color: #e0dad6;
  }

  a {
    color: #b495eb;
  }
}

@media screen and (prefers-contrast: more) {
  html {
    background-color: white;
    color: black;
  }

  a {
    color: #7a43c0;
  }
}

@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) {
  html {
    background-color: black;
    color: white;
  }

  a {
    color: #ab77f8;
  }
}

@media print {
  html {
    background-color: white;
    color: black;
  }
}