@font-face {
  font-family: "MSK Sans Consumer";
  font-style: normal;
  font-weight: 300 700;
  src: url("https://cdn.jsdelivr.net/npm/@mskcc/typography@latest/fonts/msk-sans/woff2/MSKSans-Upright-VF-Web.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@mskcc/typography@latest/fonts/msk-sans/woff/MSKSans-Upright-VF-Web.woff") format("woff");
  font-display: swap;
}
:root {
  --msk-font-weight-light: 292;
  --msk-font-weight-normal: 376;
  --msk-font-weight-medium: 420;
  --msk-font-weight-semibold: 504;
  --msk-font-weight-bold: 605;
  --msk-h1-font-weight: var(--msk-font-weight-medium);
  --msk-h2-font-weight: var(--msk-font-weight-medium);
  --msk-h3-font-weight: var(--msk-font-weight-medium);
  --msk-h4-font-weight: var(--msk-font-weight-semibold);
  --msk-h5-font-weight: var(--msk-font-weight-semibold);
  --msk-h6-font-weight: var(--msk-font-weight-bold);
  --msk-max-paragraph-width: 72ch;
  --msk-font-family-base: "MSK Sans Consumer";
  --msk-font-size-base: 16px;
  --msk-line-height-base: 1.5625;
  --msk-letter-spacing-base: calc(0.24 / 100 * 1em);
  --msk-h1-font-size: 40px;
  --msk-h2-font-size: 33px;
  --msk-h3-font-size: 28px;
  --msk-h4-font-size: 23px;
  --msk-h5-font-size: 19px;
  --msk-h6-font-size: 16px;
  --msk-h1-line-height: 1.2;
  --msk-h2-line-height: 1.2;
  --msk-h3-line-height: 1.5;
  --msk-h4-line-height: 1.5;
  --msk-h5-line-height: 1.5;
  --msk-h6-line-height: 1.5;
  --msk-h1-letter-spacing: calc(0.6 / 100 * 1em);
  --msk-h2-letter-spacing: calc(0.52 / 100 * 1em);
  --msk-h3-letter-spacing: calc(0.52 / 100 * 1em);
  --msk-h4-letter-spacing: calc(0.41 / 100 * 1em);
  --msk-h5-letter-spacing: calc(0.36 / 100 * 1em);
  --msk-h6-letter-spacing: calc(0.33 / 100 * 1em);
}

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

html {
  font-family: var(--msk-font-family-base);
  font-size: var(--msk-font-size-base);
  line-height: var(--msk-line-height-base);
  letter-spacing: var(--msk-letter-spacing-base);
}

body {
  font-weight: var(--msk-font-weight-normal);
}

h1 {
  font-size: var(--msk-h1-font-size);
  font-weight: var(--msk-h1-font-weight);
  letter-spacing: var(--msk-h1-letter-spacing);
  line-height: var(--msk-h1-line-height);
}

h2 {
  font-size: var(--msk-h2-font-size);
  font-weight: var(--msk-h2-font-weight);
  letter-spacing: var(--msk-h2-letter-spacing);
  line-height: var(--msk-h2-line-height);
}

h3 {
  font-size: var(--msk-h3-font-size);
  font-weight: var(--msk-h3-font-weight);
  letter-spacing: var(--msk-h3-letter-spacing);
  line-height: var(--msk-h3-line-height);
}

h4 {
  font-size: var(--msk-h4-font-size);
  font-weight: var(--msk-h4-font-weight);
  letter-spacing: var(--msk-h4-letter-spacing);
  line-height: var(--msk-h4-line-height);
}

h5 {
  font-size: var(--msk-h5-font-size);
  font-weight: var(--msk-h5-font-weight);
  letter-spacing: var(--msk-h5-letter-spacing);
  line-height: var(--msk-h5-line-height);
}

h6 {
  font-size: var(--msk-h6-font-size);
  font-weight: var(--msk-h6-font-weight);
  letter-spacing: var(--msk-h6-letter-spacing);
  line-height: var(--msk-h6-line-height);
}

p {
  max-width: var(--msk-max-paragraph-width);
}
