@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Font */
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Style guide: Heading 1 */
  --style-heading-1-size: clamp(32px, 3.8vw, 52px);
  --style-heading-1-weight: 700;
  --style-heading-1-line-height: 1;

  /* Style guide: Body */
  --style-body-size: clamp(14px, 0.77rem + 0.5vw, 17px);
  --style-body-weight: 400;
  --style-body-line-height: 1.55;

  /* Style guide: Body bold */
  --style-body-bold-size: var(--style-body-size);
  --style-body-bold-weight: 700;
  --style-body-bold-line-height: var(--style-body-line-height);

  /* Style guide: Body bold small */
  --style-body-bold-small-size: 0.75rem;
  --style-body-bold-small-weight: 700;
  --style-body-bold-small-line-height: 1.35;

  /* Style guide: Body bold small mono */
  --style-body-bold-small-mono-size: var(--style-body-bold-small-size);
  --style-body-bold-small-mono-weight: var(--style-body-bold-small-weight);
  --style-body-bold-small-mono-line-height: var(--style-body-bold-small-line-height);

  /* Style guide: Body small regular */
  --style-body-small-regular-size: 0.75rem;
  --style-body-small-regular-weight: 400;
  --style-body-small-regular-line-height: 1.35;

  /* Style guide: Body small regular mono */
  --style-body-small-regular-mono-size: var(--style-body-small-regular-size);
  --style-body-small-regular-mono-weight: var(--style-body-small-regular-weight);
  --style-body-small-regular-mono-line-height: var(--style-body-small-regular-line-height);

  /* Style guide: Eyebrow */
  --style-eyebrow-size: 0.8125rem;
  --style-eyebrow-weight: 400;
  --style-eyebrow-line-height: 1.2;

  /* Style guide: Heading 2 */
  --style-heading-2-size: clamp(24px, 1.25rem + 1vw, 32px);
  --style-heading-2-weight: 700;
  --style-heading-2-line-height: 1.2;

  /* Style guide: Small label */
  --style-small-label-size: 0.9375rem;
  --style-small-label-weight: 700;
  --style-small-label-line-height: 1.2;
}

html {
  font-family: var(--font-system);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-system);
  font-size: var(--style-body-size);
  font-weight: var(--style-body-weight);
  line-height: var(--style-body-line-height);
  text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea,
select {
  font-family: var(--font-system);
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  font-weight: var(--style-heading-2-weight);
  line-height: var(--style-heading-2-line-height);
  letter-spacing: 0;
  text-wrap: balance;
}

p,
li {
  font-weight: var(--style-body-weight);
  text-wrap: pretty;
}

a {
  overflow-wrap: anywhere;
}

.wordmark,
.media-placeholder span,
.icon-button {
  font-weight: var(--style-small-label-weight);
}

/* Eyebrow */
.intro-kicker,
.project-eyebrow {
  font-size: var(--style-eyebrow-size);
  font-weight: var(--style-eyebrow-weight);
  line-height: var(--style-eyebrow-line-height);
}

/* Small label */
.nav-links,
.media-count {
  font-size: var(--style-small-label-size);
}

/* Heading 1 */
.intro h1 {
  font-size: var(--style-heading-1-size);
  font-weight: var(--style-heading-1-weight);
  line-height: var(--style-heading-1-line-height);
}

/* Heading 2 */
.project-copy h2 {
  font-size: var(--style-heading-2-size);
  font-weight: var(--style-heading-2-weight);
  line-height: var(--style-heading-2-line-height);
}

.about-copy h1 {
  font-size: var(--style-heading-1-size);
  font-weight: var(--style-heading-1-weight);
  line-height: var(--style-heading-1-line-height);
}

.about-card-copy h2 {
  font-size: var(--style-heading-2-size);
  font-weight: var(--style-heading-2-weight);
  line-height: var(--style-heading-2-line-height);
}

/* Body */
.intro-copy,
.about-copy p,
.project-description,
.experience-meta,
.experience-summary,
.about-card-bio {
  font-size: var(--style-body-size);
}

/* Body bold */
.section-heading h2 {
  font-size: var(--style-body-bold-size);
  font-weight: var(--style-body-bold-weight);
  line-height: var(--style-body-bold-line-height);
}

/* Body bold */
.experience-details h3 {
  font-size: var(--style-body-bold-size);
  font-weight: var(--style-body-bold-weight);
  line-height: var(--style-body-bold-line-height);
}

/* Body bold */
.intro-links a,
.footer-links a,
.project-description a,
.about-card-links a {
  font-size: var(--style-body-bold-size);
  font-weight: var(--style-body-bold-weight);
  line-height: var(--style-body-bold-line-height);
}

/* Body bold small mono */
.project-info-title {
  font-family: var(--font-mono);
  font-size: var(--style-body-bold-small-mono-size);
  font-weight: var(--style-body-bold-small-mono-weight);
  line-height: var(--style-body-bold-small-mono-line-height);
}

/* Body small regular mono */
.project-info-meta {
  font-family: var(--font-mono);
  font-size: var(--style-body-small-regular-mono-size);
  font-weight: var(--style-body-small-regular-mono-weight);
  line-height: var(--style-body-small-regular-mono-line-height);
}

/* Body small regular */
.project-info-description {
  font-size: var(--style-body-small-regular-size);
  font-weight: var(--style-body-small-regular-weight);
  line-height: var(--style-body-small-regular-line-height);
}

/* Small label */
.media-placeholder span {
  font-size: var(--style-small-label-size);
}