/* =========================
   TYPOGRAPHY
   - fonts, base text, headings, utilities
   ========================= */

@font-face {
  font-family: "Chrimson Pro";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/CrimsonPro-Regular.ttf") format("truetype");
}

:root {
  --font-body: "Chrimson Pro", serif;
  --color-fg: #111;
  --color-bg: white;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --fs-h1: clamp(2rem, 4vw + 0.5rem, 3rem);
  --fs-h2: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
  --fs-h3: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
  --fs-base: 1rem;
}

html {
  font-size: 100%;
}

body {
  font-family: var(--font-body);
  line-height: var(--leading-normal);
  color: var(--color-fg);
  background: var(--color-bg);
}

h1,
h2,
h3 {
  margin: 0.6em 0 0.3em;
  font-weight: 600;
  line-height: var(--leading-tight);
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

a {
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.15em;
  text-decoration-skip-ink: auto;
  color: inherit;
}

.u-smallcaps {
  font-variant: small-caps;
}

.u-tracking-wide {
  letter-spacing: 0.08em;
}

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

.u-measure {
  max-width: 65ch;
}