@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../assets/fonts/atkinson-400-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+20AC;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../assets/fonts/atkinson-400-latinext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../assets/fonts/atkinson-700-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+20AC;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../assets/fonts/atkinson-700-latinext.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF;
}

@font-face {
  font-family: "Bowlby One SC";
  src: url("../assets/fonts/bowlby-one-sc-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+20AC;
}

@font-face {
  font-family: "Bowlby One SC";
  src: url("../assets/fonts/bowlby-one-sc-latinext.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF;
}

:root {
  --porcelain: #f7f1e8;
  --porcelain-2: #fffaf2;
  --aubergine: #24131f;
  --aubergine-2: #351b2d;
  --tomato: #c83b29;
  --tomato-deep: #b83223;
  --butter: #f2c94c;
  --leaf: #315b46;
  --ink: #24131f;
  --muted: #675b61;
  --line: #d9ccc1;
  --on-dark: #fffaf2;
  --on-tomato: #fffaf2;
  --font-display: "Bowlby One SC", Impact, sans-serif;
  --font-body: "Atkinson Hyperlegible", Arial, sans-serif;
  --step--1: clamp(.82rem, .79rem + .12vw, .9rem);
  --step-0: clamp(1rem, .96rem + .2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.05rem + .65vw, 1.55rem);
  --step-2: clamp(1.55rem, 1.2rem + 1.4vw, 2.35rem);
  --step-3: clamp(2.1rem, 1.45rem + 2.7vw, 3.7rem);
  --step-4: clamp(3rem, 1.6rem + 5.7vw, 7rem);
  --space-xs: clamp(.5rem, .45rem + .2vw, .65rem);
  --space-sm: clamp(.85rem, .7rem + .6vw, 1.25rem);
  --space-md: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem);
  --space-lg: clamp(2.4rem, 1.8rem + 2.4vw, 4rem);
  --space-xl: clamp(4rem, 2.8rem + 4.8vw, 7.5rem);
  --space-2xl: clamp(6rem, 4rem + 8vw, 12rem);
  --radius-sm: .45rem;
  --radius-md: 1rem;
  --radius-lg: 2rem;
  --radius-pill: 999px;
  --shadow-soft: 0 1.5rem 4rem rgba(36, 19, 31, .14);
  --shadow-hard: .65rem .65rem 0 var(--aubergine);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --container: 90rem;
  --container-wide: 112rem;
  --reading: 44rem;
  --header-h: 5.25rem;
}