/* Reusable typography primitives. Section-specific type rules live in section CSS. */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--vl-display);
}

.eyebrow {
  margin: 0;
  color: var(--vl-red-bright);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4.8px;
  line-height: 1;
  text-transform: uppercase;
}

.section-kicker {
  --vl-kicker-word-spacing: 0.55em;
  --vl-kicker-split-word-gap: 1.38em;

  display: inline-flex;
  align-items: center;
  position: relative;
  margin: 0 0 17px;
  color: var(--vl-red);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 6.7px;
  line-height: 1;
  text-transform: uppercase;
  word-spacing: var(--vl-kicker-word-spacing);
}

.section-kicker[data-audience-split="true"] {
  gap: var(--vl-kicker-split-word-gap);
  word-spacing: normal;
}

.section-kicker::after {
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 52px;
  height: 2px;
  background: var(--vl-red);
  content: "";
}

.section-kicker--dark {
  color: var(--vl-red-bright);
}

.section-kicker--dark::after {
  background: var(--vl-red-bright);
}

.section-title {
  margin: 0;
  font-family: var(--vl-display);
  font-size: clamp(42px, 6vh, var(--vl-section-title-size));
  font-weight: 900;
  letter-spacing: var(--vl-section-title-letter-spacing);
  line-height: var(--vl-section-title-line-height);
  text-transform: uppercase;
}

.section-title .accent {
  color: var(--vl-red);
}

.vl-word-reveal__word {
  display: inline-block;
  overflow: hidden;
  vertical-align: baseline;
}

.vl-word-reveal__inner {
  display: inline-block;
  transform-origin: 0 80%;
  will-change: transform, opacity, filter, clip-path;
}

@media (max-width: 560px) {
  .eyebrow {
      font-size: 10px;
      letter-spacing: 3.4px;
    }

  .section-title {
      font-size: clamp(34px, 12vw, 46px);
    }
}