body {
  font-family: "Satoshi-regular", Arial, Helvetica, sans-serif;
}

/* Mobile First */
h1 {
  margin: var(--large-gutter) 0 var(--small-gutter) 0;
  font-family: "CabinetGrotesk-Regular", serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--main-color);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
  letter-spacing: 0;
  text-align: left;
}

h2 {
  margin: var(--small-gutter) 0 var(--large-gutter) 0;
  font-family: "CabinetGrotesk-Regular", serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--main-color);
  line-height: 1;
  text-transform: none;
  text-decoration: none;
  letter-spacing: 0;
  text-align: left;
  color: var(--accent);
}

h3 {
  margin: var(--small-gutter) 0 var(--small-gutter) 0;
  font-family: "CabinetGrotesk-Medium", serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--main-color);
  line-height: 1;
  text-transform: none;
  text-decoration: none;
  letter-spacing: 0;
  text-align: left;
  color: var(--p4-blush-pink);
}

p {
  margin: var(--small-gutter) 0 var(--small-gutter) 0;
  font-family: "Satoshi-regular", Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--main-color);
  line-height: 1.4;
  text-transform: none;
  text-decoration: none;
  letter-spacing: 0;
  text-align: left;
}

li {
  margin-left: 16px;
}

sup {
  font-size: 20px;
  vertical-align: bottom;
}
.copal {
  margin: var(--small-gutter) 0;
  font-family: "Copal", serif;
  font-size: 24.5vw;
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
  text-transform: capitalize;
  text-decoration: underline;
  letter-spacing: 0.03em;
  text-align: center;
}

/* Slate or large smartphone */
@media screen and (width>=480px) and (width < 768px) {
  .copal {
    font-family: "Copal", serif;
    font-size: 24.5vw;
    letter-spacing: 0.03em;
    text-align: left;
  }

  h1 {
    font-family: "CabinetGrotesk-Bold", serif;
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 900;
  }

  h2 {
    font-family: "CabinetGrotesk-Bold", serif;
    font-size: 2rem;
    line-height: 1;
    font-weight: 900;
  }

  h3 {
    font-size: 1.8rem;
  }

  p {
    line-height: 1.7;
  }
}

/* Landscape Slate to small desktop */
@media screen and (width>=768px) and (width <1024px) {
  .copal {
    margin: var(--large-gutter) 0 var(--small-gutter) 0;
    font-family: "Copal", serif;
    font-size: 6rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    text-align: left;
    text-decoration: none;
  }

  .copal::after {
    content: ".";
  }

  h1 {
    font-family: "Copal", serif;
    font-weight: 200;
    letter-spacing: 0.05em;
    font-size: 3.6rem;
    line-height: 1;
  }

  h2 {
    margin: var(--large-gutter) 0 var(--small-gutter) 0;
    font-family: "CabinetGrotesk-Black", serif;
    font-size: 2.6rem;
    line-height: 1;
    font-weight: 900;
  }

  h3 {
    font-size: 1.8rem;
  }

  p {
    margin: 0;
    line-height: 1.7;
  }
}

/* Desktop */
@media screen and (width>=1024px) {
  .copal {
    margin: var(--large-gutter) 0;
    font-family: "Copal", serif;
    letter-spacing: 0.03em;
    font-size: 8rem;
    text-align: left;
    text-decoration: none;
  }

  .copal::after {
    content: ".";
  }

  h1 {
    font-family: "Copal", serif;
    font-weight: 200;
    letter-spacing: 0.04em;
    font-size: 5rem;
    line-height: 0.8;
  }

  h2 {
    margin: var(--large-gutter) 0 var(--small-gutter) 0;
    font-family: "CabinetGrotesk-Black", serif;
    font-size: 2.6rem;
    line-height: 1;
    font-weight: 900;
  }

  h3 {
    font-size: 1.8rem;
  }

  p {
    margin: 0 0 0 0;
    text-align: left;
    line-height: 1.7;
  }
}

.break-message {
  margin-top: 48px;
  background-color: var(--p6-coral);
  padding: 16px;
  border: 1px solid var(--p6-midnight-navy);
  h3 {
    color: var(--p6-midnight-navy);
  }

  p {
    color: var(--p6-midnight-navy);
    line-height: 1.7;
  }
}

.underlined {
  text-decoration: underline;
}
.emphasis {
  color: var(--accent);
  font-weight: 700;
}
.emphasis-2 {
  color: var(--p);
  font-family: "CabinetGrotesk-Regular", serif;
  color: var(--p3-forest-green);
  font-weight: 700;
}

@media print {

  li {
    margin-left: 0;
  }
}