/* BEGIN RESET */

/* Box sizing for all elements */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Remove default margin and set base font */
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* Make images easier to work with */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Remove built-in form typography styles */
input,
button,
textarea,
select {
  font: inherit;
}

/* Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Remove list styles */
ul,
ol {
  list-style: none;
}

/* Remove default link styles */
a {
  text-decoration: none;
  color: inherit;
}

/* END RESET */

@font-face {
  font-family: "Inter Variable";
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter Variable Italic";
  font-weight: 100 900;
  font-display: swap;
  font-style: ;
  src: url("/assets/fonts/InterVariable-Italic.woff2") format("woff2");
}

:root {
  --measure: 60ch;

  /* Step -2: 11.1111px → 12.8px */
  --step--2: clamp(0.6944rem, 0.6577rem + 0.1836vw, 0.8rem);
  /* Step -1: 13.3333px → 16px */
  --step--1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem);
  /* Step 0: 16px → 20px */
  --step-0:  clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
  /* Step 1: 19.2px → 25px */
  --step-1:  clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem);
  /* Step 2: 23.04px → 31.25px */
  --step-2:  clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem);
  /* Step 3: 27.648px → 39.0625px */
  --step-3:  clamp(1.728rem, 1.4799rem + 1.2407vw, 2.4414rem);
  /* Step 4: 33.1776px → 48.8281px */
  --step-4:  clamp(2.0736rem, 1.7334rem + 1.7011vw, 3.0518rem);
  /* Step 5: 39.8131px → 61.0352px */
  --step-5:  clamp(2.4883rem, 2.027rem + 2.3067vw, 3.8147rem);

  --leading-tight:   1.1;
  --leading-snug:    1.2;
  --leading-normal:  1.3;
  --leading-relaxed: 1.4;
  --leading-loose:   1.5;
  --leading-looser:  1.6;

  --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4565rem + 0.2174vw, 0.625rem);
  --space-xs:  clamp(0.75rem, 0.6848rem + 0.3261vw, 0.9375rem);
  --space-s:   clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
  --space-m:   clamp(1.5rem, 1.3696rem + 0.6522vw, 1.875rem);
  --space-l:   clamp(2rem, 1.8261rem + 0.8696vw, 2.5rem);
  --space-xl:  clamp(3rem, 2.7391rem + 1.3043vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.6522rem + 1.7391vw, 5rem);
  --space-3xl: clamp(6rem, 5.4783rem + 2.6087vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.1196rem + 0.6522vw, 0.625rem);
  --space-2xs-xs:  clamp(0.5rem, 0.3478rem + 0.7609vw, 0.9375rem);
  --space-xs-s:    clamp(0.75rem, 0.5761rem + 0.8696vw, 1.25rem);
  --space-s-m:     clamp(1rem, 0.6957rem + 1.5217vw, 1.875rem);
  --space-m-l:     clamp(1.5rem, 1.1522rem + 1.7391vw, 2.5rem);
  --space-l-xl:    clamp(2rem, 1.3913rem + 3.0435vw, 3.75rem);
  --space-xl-2xl:  clamp(3rem, 2.3043rem + 3.4783vw, 5rem);
  --space-2xl-3xl: clamp(4rem, 2.7826rem + 6.087vw, 7.5rem);

  --bg-color: #ffffff;
  --text-color: #333333;
  --accent-color: #0066cc;

  --border-thing: 1px;

  font-family: "Inter Variable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings:
    "liga" 1,
    "calt" 1, /* fix for Chrome */
    "dlig" 1,
    "zero" 1,
    "ss01" 1,
    "ss02" 1,
    "ss07" 1,
    "ss08" 1,
    "cv10" 1;

  font-variation-settings: "opsz" 20, "wght" 500;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #d3d3d3;
    --secondary-text-color: #9e9e9e;
    --accent-color: #66b3ff;
  }
}

* {
  max-inline-size: var(--measure);
}

html,
body,
div,
header,
nav,
main,
footer {
  max-inline-size: none;
}

em {
  font-family: "Inter Variable Italic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

stack-l {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

stack-l > * + * {
  margin-block-start: var(--space-m);
}

center-l {
  display: block;
  box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: var(--measure);
}

box-l {
  display: block;
  padding: var(--space-s);
  border-width: var(--border-thin);
  /* For high contrast mode */
  outline: var(--border-thin) solid transparent;
  outline-offset: calc(var(--border-thin) * -1);
}

cluster-l {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-size: var(--step-0);
}

h1 {
  font-size: var(--step-2);
  font-weight: 500;
  text-wrap: pretty;
}

a {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  width: fit-content;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.display-large {
  font-size: var(--step-4);
  font-variation-settings: "opsz" 32, "wght" 750;
}

.display-medium {
  font-size: var(--step-3);
  font-variation-settings: "opsz" 32, "wght" 700;
}

.display-small {
  font-size: var(--step-2);
  font-variation-settings: "opsz" 32, "wght" 750;
}

.text-large {
  font-size: var(--step-1);
  font-variation-settings: "opsz" 20, "wght" 500;
}

.text-medium {
  font-size: var(--step-0);
  font-variation-settings: "opsz" 20, "wght" 500;
}

.text-small {
  font-size: var(--step--1);
  font-variation-settings: "opsz" 20, "wght" 500;
}

.caption-large {
  font-size: var(--step--1);
  font-variation-settings: "opsz" 14, "wght" 450;
}

.caption-small {
  font-size: var(--step--2);
  font-variation-settings: "opsz" 14, "wght" 450;
}

.text-step--2 {
  font-size: var(--step--2);
}

.text-step--1 {
  font-size: var(--step--1);
}

.text-step-0 {
  font-size: var(--step-0);
}

.text-step-1 {
  font-size: var(--step-1);
}

.text-step-2 {
  font-size: var(--step-2);
}

.text-step-3 {
  font-size: var(--step-3);
}

.text-step-4 {
  font-size: var(--step-4);
}

.text-step-5 {
  font-size: var(--step-5);
}

.leading-tight {
  line-height: var(--leading-tight);
}

.leading-snug {
  line-height: var(--leading-snug);
}

.leading-normal {
  line-height: var(--leading-normal);
}

.leading-relaxed {
  line-height: var(--leading-relaxed);
}

.leading-loose {
  line-height: var(--leading-loose);
}

.leading-looser {
  line-height: var(--leading-looser);
}

.prose {
  line-height: var(--leading-relaxed);

  p {
    margin-bottom: var(--space-s);
  }

  h2 {
    font-size: var(--step-1);
    font-variation-settings: "opsz" 32, "wght" 750;
    margin-bottom: var(--space-s);
    margin-top: var(--space-l);
  }

  h3 {
    font-size: var(--step-0);
    font-variation-settings: "opsz" 32, "wght" 750;
    margin-bottom: var(--space-s);
    margin-top: var(--space-l);
  }

  pre {
    font-size: var(--step--1);
    margin: var(--space-l) 0;
    border: 1px solid var(--text-color);
    max-inline-size: none;
    width: 100%;
    overflow-x: auto;
    padding: var(--space-s);
  }

  ol {
    list-style-type: number;
    margin-bottom: var(--space-m);

    li {
      margin-bottom: var(--space-2xs)
    }
  }

  ul {
    list-style-type: square;
    margin-bottom: var(--space-m);

    li {
      margin-bottom: var(--space-2xs)
    }
  }

  img {
    object-fit: cover;
    aspect-ratio: 16 / 9;
  }

  .footnotes {
    font-size: var(--step--1);
    hr {
      margin-bottom: var(--space-m);
    }
  }
}