@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InterVariable-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Diatype";
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/Cargo-DiatypePlusVariable.woff2") format("woff");
}
@font-face {
  font-family: "Diatype";
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
  src: url("/assets/fonts/Cargo-DiatypePlusVariable-Italic.woff2") format("woff");
}
[data-theme=default] {
  --color-dark-foreground: oklch(0.7721 0.0228 96.47);
  --color-dark-background: oklch(0.2308 0.0023 67.73);
  --font-header: InterVariable;
  --font-header-weight: 900;
  --font-header-letter-spacing: -0.065em;
  --font-header-line-height: 0.75;
  --gap-body: var(--space-2);
  --optical-ratio: var(--ratio-golden);
  --font-size: 1em;
  --line-height: 1.5;
}

li::before {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body {
  max-width: 1200px;
  margin: 0 auto;
}

.created::before {
  content: "Rédigé";
  filter: opacity(0.5);
}

.modified::before {
  content: "Révisé";
  filter: opacity(0.5);
}

.p5-sketch-container {
  text-align: center;
}

hr {
  margin-inline: 0;
}

.footer h2 {
  letter-spacing: var(--font-header-letter-spacing);
}
.footer ul li {
  letter-spacing: -0.05em;
}

.header a,
.footer a,
.backlinks a,
.header svg,
.footer svg,
.theme-emoji,
.theme-emoji svg {
  text-decoration-color: transparent;
  color: var(--color-foreground);
}

.footer h2 a:hover,
.backlinks a:hover {
  text-decoration-color: transparent;
  color: var(--color-accent);
}

.footnotes {
  font-size: var(--scale-d2);
}

.footnotes::before {
  content: "Notes";
  filter: opacity(0.5);
}

.footer hr:first-of-type {
  margin-top: var(--rhythm-7);
  margin-bottom: var(--space);
}

h1 + .metadata {
  color: var(--color-subtle);
  font-size: var(--scale-d2);
  position: relative;
  top: calc(var(--space) * -5);
  margin-block-end: calc(var(--space) * -5);
}

article:not(.no-grid) img {
  mix-blend-mode: multiply;
}

@media (prefers-color-scheme: dark) {
  article.note img {
    mix-blend-mode: normal;
    filter: brightness(80%);
  }
  article.note img:hover,
  article.note img.zoomed {
    filter: brightness(100%);
  }
}