:root {
  --app-height: 100vh;
  --in: cubic-bezier(0.13, 0.81, 0.23, 0.96);
  --header-h: calc((80 / 1920) * 100vw);
  --header-s: calc((40 / 1920) * 100vw);
  --gutter: calc((40 / 1920) * 100vw);
  --radius: calc((12 / 1920) * 100vw);
  --corner: calc((12 / 1920) * 100vw);
  --color-white: rgba(255, 255, 255, 1);
  --color-bg: rgba(246, 246, 246, 1);
  --color-bg-dark: rgba(4, 12, 21, 1);
  --color-black: rgba(10, 15, 19, 1);
  --color-white-2: rgba(228, 228, 228, 1);
  --color-white-3: #e4e4e4;
  --color-ocher: rgba(170, 161, 147, 1);
  --color-muted: rgba(115, 115, 115, 1);
  --color-cream: rgba(227, 215, 196, 1);
  --p375: calc((375 / 1920) * 100vw);
  --p300: calc((300 / 1920) * 100vw);
  --p260: calc((260 / 1920) * 100vw);
  --p190: calc((190 / 1920) * 100vw);
  --p160: calc((160 / 1920) * 100vw);
  --p120: calc((120 / 1920) * 100vw);
  --p100: calc((100 / 1920) * 100vw);
  --p90: calc((90 / 1920) * 100vw);
  --p80: calc((80 / 1920) * 100vw);
  --p70: calc((70 / 1920) * 100vw);
  --p60: calc((60 / 1920) * 100vw);
  --p50: calc((50 / 1920) * 100vw);
  --p40: calc((40 / 1920) * 100vw);
  --p30: calc((30 / 1920) * 100vw);
  --p20: calc((20 / 1920) * 100vw);
  --p10: calc((10 / 1920) * 100vw);
  --g100: calc((100 / 1920) * 100vw);
  --g90: calc((90 / 1920) * 100vw);
  --g80: calc((80 / 1920) * 100vw);
  --g70: calc((70 / 1920) * 100vw);
  --g60: calc((60 / 1920) * 100vw);
  --g50: calc((50 / 1920) * 100vw);
  --g48: calc((48 / 1920) * 100vw);
  --g40: calc((40 / 1920) * 100vw);
  --g30: calc((30 / 1920) * 100vw);
  --g24: calc((24 / 1920) * 100vw);
  --g20: calc((20 / 1920) * 100vw);
  --g18: calc((18 / 1920) * 100vw);
  --g16: calc((16 / 1920) * 100vw);
  --g12: calc((12 / 1920) * 100vw);
  --g10: calc((10 / 1920) * 100vw);
  --g8: calc((8 / 1920) * 100vw);
  --g5: calc((5 / 1920) * 100vw);
  --g4: calc((4 / 1920) * 100vw);
  --g2: calc((2 / 1920) * 100vw);
}

@media screen and (max-width: 1023px) {
  :root {
    --header-h: calc((60 / 375) * 100vw);
    --header-s: calc((20 / 375) * 100vw);
    --gutter: calc((12 / 375) * 100vw);
    --radius: calc((12 / 375) * 100vw);
    --corner: calc((12 / 375) * 100vw);
    --p375: calc((20 / 375) * 100vw);
    --p300: calc((20 / 375) * 100vw);
    --p260: calc((20 / 375) * 100vw);
    --p190: calc((190 / 375) * 100vw);
    --p160: calc((160 / 375) * 100vw);
    --p120: calc((120 / 375) * 100vw);
    --p100: calc((100 / 375) * 100vw);
    --p90: calc((90 / 375) * 100vw);
    --p80: calc((80 / 375) * 100vw);
    --p70: calc((70 / 375) * 100vw);
    --p60: calc((60 / 375) * 100vw);
    --p50: calc((50 / 375) * 100vw);
    --p40: calc((40 / 375) * 100vw);
    --p30: calc((30 / 375) * 100vw);
    --p20: calc((20 / 375) * 100vw);
    --p10: calc((10 / 375) * 100vw);
    --g100: calc((100 / 375) * 100vw);
    --g90: calc((90 / 375) * 100vw);
    --g80: calc((80 / 375) * 100vw);
    --g70: calc((70 / 375) * 100vw);
    --g60: calc((60 / 375) * 100vw);
    --g50: calc((50 / 375) * 100vw);
    --g40: calc((40 / 375) * 100vw);
    --g30: calc((30 / 375) * 100vw);
    --g24: calc((24 / 375) * 100vw);
    --g20: calc((20 / 375) * 100vw);
    --g18: calc((18 / 375) * 100vw);
    --g16: calc((16 / 375) * 100vw);
    --g12: calc((12 / 375) * 100vw);
    --g10: calc((10 / 375) * 100vw);
    --g8: calc((8 / 375) * 100vw);
    --g5: calc((5 / 375) * 100vw);
    --g4: calc((4 / 375) * 100vw);
    --g2: calc((2 / 375) * 100vw);
  }
}
.text-h1 {
  font-family: "Climate Crisis", sans-serif;
  font-size: 5.2083333333vw;
  font-weight: 400;
  font-style: normal;
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: uppercase;
  font-variation-settings: "'YEAR' 1979";
}
@media screen and (max-width: 1023px) {
  .text-h1 {
    font-size: 9.6vw;
  }
}

.text-h2 {
  font-family: "Inter Tight", sans-serif;
  font-size: 4.1666666667vw;
  font-weight: 500;
  font-style: normal;
  line-height: 1;
  letter-spacing: -0.075em;
  text-decoration: none;
}
@media screen and (max-width: 1023px) {
  .text-h2 {
    font-size: 8.5333333333vw;
  }
}

.text-h3 {
  font-family: "Inter Tight", sans-serif;
  font-size: 2.5vw;
  font-weight: 500;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.04em;
}
@media screen and (max-width: 1023px) {
  .text-h3 {
    font-size: 6.4vw;
  }
}

.text-subtitle {
  font-family: "Inter Tight", sans-serif;
  font-size: 1.25vw;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.04em;
}
@media screen and (max-width: 1023px) {
  .text-subtitle {
    font-size: 3.7333333333vw;
  }
}

.text-body {
  font-family: "Inter Tight", sans-serif;
  font-size: 1.0416666667vw;
  font-weight: 500;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: -0.04em;
}
@media screen and (max-width: 1023px) {
  .text-body {
    font-size: 4.2666666667vw;
  }
}

.text-button {
  font-family: "Inter Tight", sans-serif;
  font-size: 0.8333333333vw;
  font-weight: 700;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
@media screen and (max-width: 1023px) {
  .text-button {
    font-size: 3.7333333333vw;
  }
}

.text-tiny {
  font-family: "Inter Tight", sans-serif;
  font-size: 0.625vw;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: 0;
}
@media screen and (max-width: 1023px) {
  .text-tiny {
    font-size: 3.2vw;
  }
}

.text-white {
  color: var(--color-white);
}

.text-white-2 {
  color: var(--color-white-2);
}

.text-white-3 {
  color: var(--color-white-3);
}

.text-black {
  color: var(--color-black);
}

.text-ocher {
  color: var(--color-ocher);
}

.text-muted {
  color: var(--color-muted);
}

.text-cream {
  color: var(--color-cream);
}

.bg-dark {
  background-color: var(--color-bg-dark);
}

.bg-light {
  background-color: var(--color-bg);
}