/* latin-ext */
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax-HiqOu8IVPmn7erxlJD1wmULYyT8.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax-HiqOu8IVPmn7erxrJD1wmULY.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax-HiqOu8IVPmn7erxlJD1wmULYyT8.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax-HiqOu8IVPmn7erxrJD1wmULY.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax-HiqOu8IVPmn7erxlJD1wmULYyT8.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax-HiqOu8IVPmn7erxrJD1wmULY.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax-HiqOu8IVPmn7erxlJD1wmULYyT8.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax-HiqOu8IVPmn7erxrJD1wmULY.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax-HiqOu8IVPmn7erxlJD1wmULYyT8.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax-HiqOu8IVPmn7erxrJD1wmULY.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax-HiqOu8IVPmn7erxlJD1wmULYyT8.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax-HiqOu8IVPmn7erxrJD1wmULY.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax-HiqOu8IVPmn7erxlJD1wmULYyT8.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax-HiqOu8IVPmn7erxrJD1wmULY.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax-HiqOu8IVPmn7erxlJD1wmULYyT8.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax-HiqOu8IVPmn7erxrJD1wmULY.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax-HiqOu8IVPmn7erxlJD1wmULYyT8.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax-HiqOu8IVPmn7erxrJD1wmULY.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax8HiqOu8IVPmn7cYxpLjpSm3LZ.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax8HiqOu8IVPmn7f4xpLjpSmw.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax8HiqOu8IVPmn7cYxpLjpSm3LZ.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax8HiqOu8IVPmn7f4xpLjpSmw.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax8HiqOu8IVPmn7cYxpLjpSm3LZ.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax8HiqOu8IVPmn7f4xpLjpSmw.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax8HiqOu8IVPmn7cYxpLjpSm3LZ.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax8HiqOu8IVPmn7f4xpLjpSmw.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax8HiqOu8IVPmn7cYxpLjpSm3LZ.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax8HiqOu8IVPmn7f4xpLjpSmw.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax8HiqOu8IVPmn7cYxpLjpSm3LZ.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax8HiqOu8IVPmn7f4xpLjpSmw.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax8HiqOu8IVPmn7cYxpLjpSm3LZ.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax8HiqOu8IVPmn7f4xpLjpSmw.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax8HiqOu8IVPmn7cYxpLjpSm3LZ.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax8HiqOu8IVPmn7f4xpLjpSmw.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax8HiqOu8IVPmn7cYxpLjpSm3LZ.woff2)
    format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/bitter/v19/rax8HiqOu8IVPmn7f4xpLjpSmw.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  --gray-1: hsl(214, 88%, 4%);
  --gray-2: hsl(214, 44%, 19%);
  --gray-3: hsl(214, 28%, 30%);
  --gray-4: hsl(215, 22%, 42%);
  --gray-5: hsl(216, 17%, 55%);
  --gray-6: hsl(217, 17%, 67%);
  --gray-7: hsl(216, 22%, 80%);
  --gray-8: hsl(215, 30%, 89%);
  --gray-9: hsl(218, 44%, 98%);

  --yellow-1: hsl(51, 98%, 8%);
  --yellow-2: hsl(51, 98%, 28%);
  --yellow-3: hsl(51, 98%, 40%);
  --yellow-4: hsl(51, 98%, 48%);
  --yellow-5: hsl(51, 98%, 65%);
  --yellow-6: hsl(51, 98%, 78%);
  --yellow-7: hsl(51, 98%, 84%);
  --yellow-8: hsl(51, 98%, 93%);
  --yellow-9: hsl(60, 100%, 100%);

  --blue-1: hsl(214, 100%, 6%);
  --blue-2: hsl(216, 87%, 18%);
  --blue-3: hsl(216, 78%, 30%);
  --blue-4: hsl(216, 68%, 43%);
  --blue-5: hsl(216, 65%, 56%);
  --blue-6: hsl(216, 70%, 69%);
  --blue-7: hsl(216, 78%, 76%);
  --blue-8: hsl(216, 93%, 90%);
  --blue-9: hsl(214, 100%, 96%);

  --pink-1: hsl(350, 100%, 12%);
  --pink-2: hsl(350, 100%, 25%);
  --pink-3: hsl(350, 100%, 39%);
  --pink-4: hsl(350, 100%, 52%);
  --pink-5: hsl(350, 100%, 66%);
  --pink-6: hsl(350, 100%, 74%);
  --pink-7: hsl(350, 100%, 82%);
  --pink-8: hsl(350, 100%, 90%);
  --pink-9: hsl(350, 100%, 98%);

  --green-1: hsl(171, 100%, 2%);
  --green-2: hsl(171, 100%, 8%);
  --green-3: hsl(171, 100%, 16%);
  --green-4: hsl(171, 100%, 35%);
  --green-5: hsl(171, 100%, 46%);
  --green-6: hsl(171, 100%, 58%);
  --green-7: hsl(171, 100%, 68%);
  --green-8: hsl(171, 100%, 82%);
  --green-9: hsl(171, 100%, 94%);

  /* @link https://utopia.fyi/type/calculator?c=320,21,1.125,1140,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
  --step--2: clamp(1.04rem, 1.07rem + -0.15vw, 0.96rem);
  --step--1: clamp(1.17rem, 1.15rem + 0.06vw, 1.2rem);
  --step-0: clamp(1.31rem, 1.24rem + 0.37vw, 1.5rem);
  --step-1: clamp(1.48rem, 1.32rem + 0.78vw, 1.88rem);
  --step-2: clamp(1.66rem, 1.39rem + 1.33vw, 2.34rem);
  --step-3: clamp(1.87rem, 1.45rem + 2.07vw, 2.93rem);
  --step-4: clamp(2.1rem, 1.49rem + 3.04vw, 3.66rem);
  --step-5: clamp(2.37rem, 1.5rem + 4.32vw, 4.58rem);

  --fluid-min-width: 320;
  --fluid-max-width: 1140;

  --fluid-screen: 100vw;
  --fluid-bp: calc(
    (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /
      (var(--fluid-max-width) - var(--fluid-min-width))
  );

  --fc-3xs-min: (var(--fc-s-min) * 0.25);
  --fc-3xs-max: (var(--fc-s-max) * 0.25);

  --fc-2xs-min: (var(--fc-s-min) * 0.5);
  --fc-2xs-max: (var(--fc-s-max) * 0.5);

  --fc-xs-min: (var(--fc-s-min) * 0.75);
  --fc-xs-max: (var(--fc-s-max) * 0.75);

  --fc-s-min: (var(--f-0-min, 21));
  --fc-s-max: (var(--f-0-max, 24));

  --fc-m-min: (var(--fc-s-min) * 1.5);
  --fc-m-max: (var(--fc-s-max) * 1.5);

  --fc-l-min: (var(--fc-s-min) * 2);
  --fc-l-max: (var(--fc-s-max) * 2);

  --fc-xl-min: (var(--fc-s-min) * 3);
  --fc-xl-max: (var(--fc-s-max) * 3);

  --fc-2xl-min: (var(--fc-s-min) * 4);
  --fc-2xl-max: (var(--fc-s-max) * 4);

  --fc-3xl-min: (var(--fc-s-min) * 6);
  --fc-3xl-max: (var(--fc-s-max) * 6);

  /* T-shirt sizes */
  --space-3xs: calc(
    ((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-3xs-max) - var(--fc-3xs-min)) *
      var(--fluid-bp)
  );
  --space-2xs: calc(
    ((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-2xs-min)) *
      var(--fluid-bp)
  );
  --space-xs: calc(
    ((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-xs-min)) *
      var(--fluid-bp)
  );
  --space-s: calc(
    ((var(--fc-s-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-s-min)) *
      var(--fluid-bp)
  );
  --space-m: calc(
    ((var(--fc-m-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-m-min)) *
      var(--fluid-bp)
  );
  --space-l: calc(
    ((var(--fc-l-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-l-min)) *
      var(--fluid-bp)
  );
  --space-xl: calc(
    ((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-xl-min)) *
      var(--fluid-bp)
  );
  --space-2xl: calc(
    ((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-2xl-min)) *
      var(--fluid-bp)
  );
  --space-3xl: calc(
    ((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-3xl-min)) *
      var(--fluid-bp)
  );

  /* One-up pairs */
  --space-3xs-2xs: calc(
    ((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-3xs-min)) *
      var(--fluid-bp)
  );
  --space-2xs-xs: calc(
    ((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-2xs-min)) *
      var(--fluid-bp)
  );
  --space-xs-s: calc(
    ((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-xs-min)) *
      var(--fluid-bp)
  );
  --space-s-m: calc(
    ((var(--fc-s-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-s-min)) *
      var(--fluid-bp)
  );
  --space-m-l: calc(
    ((var(--fc-m-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-m-min)) *
      var(--fluid-bp)
  );
  --space-l-xl: calc(
    ((var(--fc-l-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-l-min)) *
      var(--fluid-bp)
  );
  --space-xl-2xl: calc(
    ((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-xl-min)) *
      var(--fluid-bp)
  );
  --space-2xl-3xl: calc(
    ((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-2xl-min)) *
      var(--fluid-bp)
  );

  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, avenir next,
    avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial,
    sans-serif;
  --font-family-serif: Iowan Old Style, Apple Garamond, Baskerville,
    Times New Roman, Droid Serif, Times, Source Serif Pro, serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-family-mono: Dank Mono, Fira Code, Menlo, Consolas, Monaco,
    Liberation Mono, Lucida Console, monospace;

  --outline-size: max(2px, 0.08em);
  --outline-style: solid;
  --outline-color: var(--green-4);

  --surface-1: var(--yellow-9);
  --surface-2: var(--blue-8);
  --text-1: var(--gray-2);
  --text-2: var(--blue-2);
  --text-3: var(--gray-4);
  --highlight: var(--green-5);
  --accent: var(--pink-5);
  --link-color: var(--accent);
  --scrollbar-gutter: var(--surface-1);
  --scrollbar-thumb: var(--accent);

  --line-length: 60ch;

  color-scheme: dark light;
}

@media screen and (min-width: 1140px) {
  :root {
    --fluid-screen: calc(var(--fluid-max-width) * 1px);
  }
}

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

:where(*) {
  margin: 0;
  padding: 0;
}

:where(html) {
  scrollbar-gutter: stable both-edges;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-gutter);
}

:where(html, body) {
  height: 100%;
}

:where(#root) {
  isolation: isolate;
  height: 100%;
}

:where(body) {
  font-weight: 300;
  font-family: var(--font-family-sans-serif);
  font-size: var(--step-0);
  line-height: 1.5;
  background: var(--surface-1);
  color: var(--text-1);
}

:where(a, button, input, textarea, summary):focus {
  outline: var(--outline-size) var(--outline-style) var(--outline-color);
  outline-offset: var(--outline-offset, var(--outline-size));
}

:is(a, button, input, textarea, summary):focus-visible {
  outline: var(--outline-size) var(--outline-style) var(--outline-color);
  outline-offset: var(--outline-offset, var(--outline-size));
}

:is(a, button, input, textarea, summary):focus:not(:focus-visible) {
  outline: none;
}

:where(img, picture, video, canvas, svg) {
  display: block;
  max-width: 100%;
}

:where(input, button, textarea, select) {
  font: inherit;
}

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

:where(p) {
  max-width: var(--line-length);
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: "Bitter", var(--font-family-serif);
  color: var(--text-2);
  font-weight: 900;
}

:where(h1, .h1) {
  font-size: var(--step-5);
  line-height: 1.05;
}

:where(h2, .h2) {
  font-size: var(--step-4);
  line-height: 1.1;
}

:where(h3, .h3) {
  font-size: var(--step-3);
  line-height: 1.15;
}

:where(h4, .h4) {
  font-size: var(--step-2);
  line-height: 1.2;
}

:where(h5, .h5) {
  font-size: var(--step-1);
  line-height: 1.3;
}

:where(h6, .h6) {
  font-size: var(--step-0);
}

.max-width-container {
  width: min(var(--fluid-screen), 100%);
  margin-inline: auto;
  padding-inline: var(--space-m);
}

.button-text {
  font-size: var(--step--1);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
}

:where(a, .link-text) {
  color: inherit;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--link-color);
  transition: color 0.35s ease;
}

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

a:hover {
  color: var(--link-color);
  /* For any links that might have the underline hidden */
  text-decoration-style: underline;
  transition: color 0.2s ease;
}

::selection {
  color: var(--green-2);
  background: var(--green-7);
}

::-webkit-scrollbar {
  width: 10px; /* Mostly for vertical scrollbars */
  height: 10px; /* Mostly for horizontal scrollbars */
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-gutter);
}

/* Layouts */

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

.stack > * {
  margin-top: 0;
  margin-bottom: 0;
}

.stack > * + * {
  margin-top: var(--space, var(--space-s));
}

/* Header */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header svg {
  height: 4rem;
  color: var(--green-3);
}

header nav {
  display: flex;
  margin-inline-end: calc(var(--space-xs) * -1);
}

header nav a {
  padding: var(--space-xs);
  --outline-offset: calc(var(--outline-size) * -1);
}

header a {
  text-decoration: none;
}

header a:is(:hover, :focus-visible) {
  text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
  header svg {
    color: var(--green-5);
  }
}

header path {
  --length: 320;
  fill: none;
  stroke: currentColor;
  stroke-width: 0.5rem;
  animation: draw-site-logo 0.5s ease-in-out forwards,
    fill-site-logo 0.5s 0.4s ease-in-out forwards;
  stroke-dashoffset: 83;
}

@keyframes draw-site-logo {
  from {
    stroke-dasharray: 0 var(--length);
  }

  to {
    stroke-dasharray: var(--length) 0;
  }
}

@keyframes fill-site-logo {
  from {
    fill: transparent;
  }

  to {
    fill: currentColor;
  }
}