:root {
  /* arrow icon (buttons + slider), color it with background */
  --arrow-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MiA2MiI+PHBhdGggZD0iTTQxIDMzLjczNDNDMzguODU0NCAzMy43MzQzIDM3LjA5MiAzMy4zNTc4IDM1LjcxMjYgMzIuNjA0OUMzNC4zNzE2IDMxLjg1MiAzMy4zMTggMzAuOTIwNyAzMi41NTE3IDI5LjgxMTJDMzEuODIzOCAyOC43MDE2IDMxLjI4NzQgMjcuNTkyMSAzMC45NDI1IDI2LjQ4MjVDMzAuNjM2IDI1LjM3MyAzMC40NDQ0IDI0LjQ0MTcgMzAuMzY3OCAyMy42ODg4QzMwLjI5MTIgMjIuOTM1OSAzMC4yNTI5IDIyLjUzOTYgMzAuMjUyOSAyMi41SDM0LjM5MDhDMzQuMzkwOCAyMi41Mzk2IDM0LjQyOTEgMjIuODU2NiAzNC41MDU3IDIzLjQ1MUMzNC41ODI0IDI0LjA0NTUgMzQuODMxNCAyNC43MTkxIDM1LjI1MjkgMjUuNDcyQzM1LjY3NDMgMjYuMjI0OSAzNi4zMjU3IDI2Ljg3ODggMzcuMjA2OSAyNy40MzM2QzM4LjA4ODEgMjcuOTg4MyAzOS4zNTI1IDI4LjI2NTcgNDEgMjguMjY1N1YzMy43MzQzWk0yMSAzMy43MzQzVjI4LjI2NTdINDFWMzMuNzM0M0gyMVpNMzAuMjUyOSAzOS41QzMwLjI1MjkgMzkuNSAzMC4yOTEyIDM5LjEyMzUgMzAuMzY3OCAzOC4zNzA2QzMwLjQ0NDQgMzcuNjE3NyAzMC42MzYgMzYuNjY2NyAzMC45NDI1IDM1LjUxNzVDMzEuMjg3NCAzNC4zNjgzIDMxLjgyMzggMzMuMjU4NyAzMi41NTE3IDMyLjE4ODhDMzMuMzE4IDMxLjA3OTMgMzQuMzcxNiAzMC4xNDggMzUuNzEyNiAyOS4zOTUxQzM3LjA5MiAyOC42NDIyIDM4Ljg1NDQgMjguMjY1NyA0MSAyOC4yNjU3VjMzLjczNDNDMzkuMzUyNSAzMy43MzQzIDM4LjA4ODEgMzQuMDExNyAzNy4yMDY5IDM0LjU2NjRDMzYuMzI1NyAzNS4xMjEyIDM1LjY3NDMgMzUuNzc1MSAzNS4yNTI5IDM2LjUyOEMzNC44MzE0IDM3LjI4MDkgMzQuNTgyNCAzNy45NTQ1IDM0LjUwNTcgMzguNTQ5QzM0LjQyOTEgMzkuMTAzNyAzNC4zOTA4IDM5LjQyMDcgMzQuMzkwOCAzOS41SDMwLjI1MjlaIi8+PC9zdmc+");
  /* colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-cream: #fdf3ec; /* page bg */
  --color-pine-forest: #113e3b; /* dark teal */
  --color-sea-nymph: #7ba39e; /* sage */
  --color-pastel-blood: #ba5861; /* dusty rose */
  --color-persian-plum: #6c171e; /* plum */
  --color-peach: #f4dabf; /* peach */
  --color-outline: rgba(17, 30, 28, 0.28); /* faded half of outlined headings */

  /* type */
  --font-family-base: "Darker Grotesque", sans-serif;
  --h1-weight: 900;
  --h2-weight: 800;

  --body-r-size: max(var(--font-min), calc(24 * var(--fu)));
  --body-r-weight: 400;
  --body-r-line-height: 1.1;

  --body-s-size: max(var(--font-min), calc(16 * var(--fu)));
  --body-s-weight: 400;
  --body-s-line-height: 1.1;

  /* bold text is the same size as body text, only the weight changes */
  --body-b-size: var(--body-r-size);
  --body-b-weight: 700;
  --body-b-line-height: 1.1;

  /* Sizes
     Every size is calc(N * var(--u)) where N is the value at 1920.
     --u steps down at each breakpoint and stays flat inside a band:
     1440 = .75, 1280 = .667, 992 = .517, then the phone steps below.
     --fu is the same idea for fonts, --font-min stops text getting too small. */
  --page-max-width: 1920px;
  --u: 1px;
  --fu: var(--u);
  --font-min: 13px;

  --page-gutter: calc(60 * var(--u));
  --display-size: calc(140 * var(--u));
  --h2-size: max(var(--font-min), calc(110 * var(--fu))); /* h2 */
  --h3-size: max(var(--font-min), calc(48 * var(--fu))); /* h3 */
  --logo-w: calc(204 * var(--u));
  --logo-h: calc(60 * var(--u));
  --toggle-size: calc(83 * var(--u));
  --header-h: calc(120 * var(--u));
  --nav-font: max(var(--font-min), calc(18 * var(--fu)));
  --hero-icon: calc(140 * var(--u));
  --section-space: calc(160 * var(--u)); /* space under each section */
  --hero-top: calc(65 * var(--u)); /* header to page hero */

  /* tints */
  --color-sage-20: #7ba39e33; /* sage 20% */
  --color-sage-26: #7ba39e42; /* sage 26% */
  --color-sage-line: rgba(123, 163, 158, 0.25); /* thin borders */
  --color-rose-20: #ba586133; /* rose 20% */
  --color-rose-line: rgba(186, 88, 97, 0.35); /* thin rose borders */
  --color-shine: #fff8f0; /* glass highlight */
}

/* 1440 */
@media (max-width: 1440px) {
  :root {
    --u: 0.75px;
  }
}
/* 1280 */
@media (max-width: 1280px) {
  :root {
    --u: 0.66667px;
  }
}
/* 992 (tablet keeps the desktop layout) */
@media (max-width: 992px) {
  :root {
    --u: 0.51667px;
  }
}

/* Phones: everything goes full width so it can be a bit bigger.
   One step down the type scale (140 -> 110), and one more below 480. */
@media (max-width: 767px) {
  :root {
    --u: 0.7857px;
    /* phones: fixed side padding */
    --page-gutter: 20px;
    /* headings get fixed sizes on phones so the longest word fits */
    --display-size: 60px;
    --h2-size: 47px;
  }
}
/* small phones, down to 320 */
@media (max-width: 480px) {
  :root {
    --u: 0.6173px;
    --display-size: 38px; /* fits the longest word at 320 */
    --h2-size: 30px;
  }
}