/* ==========================================================================
   Tandem Global Typography Components
   ========================================================================== */

h1 {
  font-family: var(--font-headings);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: var(--lh-title);
  letter-spacing: var(--letter-spacing-title);
  text-transform: uppercase;
  width: 100%;
  margin: 0;
}

h2 {
  font-family: var(--font-headings);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: var(--lh-title);
  letter-spacing: var(--letter-spacing-title);
  text-transform: uppercase;
  width: 100%;
  margin: 0;
  color: var(--text-white);
}

.title-subtitle {
  font-family: var(--font-headings);
  font-weight: 700;
  font-size: var(--fs-subtitle);
  color: var(--secondary-grey-purple);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-subtitle);
  margin: 0;
  display: block;
}

h3 {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  color: var(--text-white);
  margin: 0;
}

h4 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-h4);
  color: var(--text-white);
}

p {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-white);
}

.p-small {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: var(--fs-p-small);
  line-height: 1.5;
  color: var(--text-white);
  opacity: 0.7;
}

.title-h2-outline {
  background: var(--gradient-title-shimmer);
  background-size: 200% auto;
  animation: outlineShimmer 6s ease-in-out infinite;
  animation-play-state: paused;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: var(--bg-dark);
  -webkit-text-stroke: var(--outline-stroke-width-desktop) transparent;
  display: inline;
  letter-spacing: var(--letter-spacing-outline);
  padding-left: 0.1em;
  margin-left: -0.1em;
  padding-right: 0.1em;
  margin-right: -0.1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.title-h2-solid {
  color: var(--text-white);
  display: inline;
}

.text-gradient {
  background: var(--gradient-title);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.text-title-sm {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: var(--fs-body); /* 18px */
  color: var(--text-white);
  margin: 0;
  line-height: 1.2;
}


/* ==========================================================================
   Responsive Typography overrides
   ========================================================================== */
@media (max-width: 1280px) {
  .title-h2-outline {
    -webkit-text-stroke-width: var(--outline-stroke-width-tablet);
  }
}

@media (max-width: 768px) {
  .title-h2-outline {
    -webkit-text-stroke-width: var(--outline-stroke-width-mobile);
  }
}



/* Lead Body Text */
.text-lead {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  color: var(--text-white);
}