:where(html) {
  --font-system-ui: system-ui, sans-serif;
  --font-transitional: "Source Sans 3", Charter, Bitstream Charter, Sitka Text, Cambria, serif;
  --font-old-style: Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif;
  --font-humanist: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
  --font-geometric-humanist: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif;
  --font-classical-humanist: Optima, Candara, Noto Sans, source-sans-pro, sans-serif;
  --font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;
  --font-monospace-slab-serif: Nimbus Mono PS, Courier New, monospace;
  --font-monospace-code: "Source Code Pro", Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, monospace;
  --font-industrial: Bahnschrift, DIN Alternate, Franklin Gothic Medium, Nimbus Sans Narrow, sans-serif-condensed, sans-serif;
  --font-rounded-sans: ui-rounded, Hiragino Maru Gothic ProN, Quicksand, Comfortaa, Manjari, Arial Rounded MT, Arial Rounded MT Bold, Calibri, source-sans-pro, sans-serif;
  --font-slab-serif: Rockwell, Rockwell Nova, Roboto Slab, DejaVu Serif, Sitka Small, serif;
  --font-antique: Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif;
  --font-didone: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif;
  --font-handwritten: Segoe Print, Bradley Hand, Chilanka, TSCu_Comic, casual, cursive;

  --font-weight-1: 100;
  --font-weight-2: 200;
  --font-weight-3: 300;
  --font-weight-4: 400;
  --font-weight-5: 500;
  --font-weight-6: 600;
  --font-weight-7: 700;
  --font-weight-8: 800;
  --font-weight-9: 900;
  --font-lineheight-00: .95;
  --font-lineheight-0: 1.1;
  --font-lineheight-1: 1.25;
  --font-lineheight-2: 1.375;
  --font-lineheight-3: 1.5;
  --font-lineheight-4: 1.75;
  --font-lineheight-5: 2;
  --font-letterspacing-0: -.05em;
  --font-letterspacing-1: .025em;
  --font-letterspacing-2: .050em;
  --font-letterspacing-3: .075em;
  --font-letterspacing-4: .150em;
  --font-letterspacing-5: .250em;
  --font-letterspacing-6: .500em;
  --font-letterspacing-7: 1em;
  --font-size-00: .5rem;
  --font-size-0: .8rem;
  --font-size-1: 1rem;
  --font-size-2: 1.1rem;
  --font-size-3: 1.25rem;
  --font-size-4: 1.4rem;
  --font-size-5: 1.8rem;
  --font-size-6: 2.4rem;
  --font-size-7: 2.7rem;
  --font-size-8: 3.5rem;
  --font-size-fluid-0: clamp(.8rem, 2vw, 1rem);
  --font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
  --font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
  --font-size-fluid-3: clamp(2.5rem, 9vw, 3.5rem);

  --font-sans: var(--font-system-ui);
  --font-serif: ui-serif, serif;
  --font-mono: "Source Code Pro", ui-monospace, monospace;

  --font-size-small: var(--font-size-0);
  --font-size-medium: var(--font-size-1);
  --font-size-large: var(--font-size-4);
  --font-size-x-large: var(--font-size-5);
  --font-size-xx-large: var(--font-size-8);

  .font-code {
    font-family: var(--font-mono);
  }
  .font-mono {
    font-family: var(--font-mono);
  }

  .font-serif {
    font-family: var(--font-serif);
  }

  .font-bold {
    font-weight: var(--font-weight-7);
  }
  .font-italic {
    font-style: italic;
  }

  .txt-small {
    font-size: var(--font-size-small);
  }

  .txt-medium {
    font-size: var(--font-size-medium);
  }

  .txt-large {
    font-size: var(--font-size-large);
  }

  .txt-x-large {
    font-size: var(--font-size-x-large);
  }

  .txt-xx-large {
    font-size: var(--font-size-xx-large);
  }

  .txt-small-responsive {
    font-size: var(--font-size-fluid-0);
  }

  .txt-medium-responsive {
    font-size: var(--font-size-fluid-1);
  }

  .txt-large-responsive {
    font-size: var(--font-size-fluid-2);
  }
  .txt-x-large-responsive {
    font-size: var(--font-size-fluid-3);
  }

  .txt-undecorated {
    text-decoration: none;
  }

  .txt-tight-lines {
    line-height: var(--font-lineheight-1);
  }

  .txt-normal {
    font-weight: var(--font-weight-4);
    font-style: normal;
  }

  .txt-nowrap {
    white-space: nowrap;
  }

  .txt-uppercase {
    text-transform: uppercase;
  }

  .txt-x-large-responsive {
    font-size: var(--font-size-fluid-2);
  }
  .txt-spread {
    letter-spacing: var(--font-letterspacing-5);
  }

  :where(.h1, .h2, .h3, .h4, .h5, .h6) {
    font-weight: 800;
    hyphens: auto;
    letter-spacing: -0.02ch;
    line-height: 1.1;
    margin-block: 0;
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  :where(/h1, /h2, /h3, /h4, /h5, /h6) {
    display: block;
  }

  :is(.h1, .h2, .h3, .h4, .h5, .h6) {
    margin-block: 0.65em;
  }

  :is(h1, .h1),
  :is(h1, .headline) {
    /* font-size: var(); */
    font-size: var(--font-size-fluid-2);
    font-weight: var(--font-weight-7);
    line-height: var(--line-height-6);
    margin-bottom: var(--size-4);
  }

  :is(.h2) {
    font-size: 1.5em;
  }

  :is(.h3) {
    font-size: 1.17em;
  }

  :is(.h4) {
    font-size: 1em;
  }

  :is(.h5) {
    font-size: 0.83em;
  }

  :is(h6, .h6) {
    font-size: 0.67em;
  }

  :is(p, ul, ol, dl, blockquote, pre, figure, table, hr) {
    margin-block: 0.65lh;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  .subheadline {
    font-size: var(--font-size-fluid-2);
  }

  .txt-align-center {
    text-align: center;
  }

  .link {
    text-decoration: underline;
    color: var(--color-primary);

    &:visited {
      color: var(--color-primary);
    }
  }

  .no-link {
    text-decoration: none;
    color: var(--color-ink);
    &:hover {
      text-decoration: underline;
    }
  }
}