/* ================================================================
   TYPOGRAPHY
   Font imports and type scale.
   ================================================================ */

/* --- Eyebrow / label --- */
.eyebrow {
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--clr-green-light);
  margin-bottom: 10px;
}

.eyebrow--accent {
  color: var(--clr-chartreuse-muted);
}

/* --- Section title --- */
.sec-title {
  font-family: var(--ff-display);
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: .04em;
  color: var(--clr-ink);
  line-height: 1;
}

.sec-title em {
  font-style: normal;
  color: var(--clr-green);
}

.sec-title .hl {
  color: var(--clr-chartreuse-muted);
}

/* --- Tags / badges --- */
.tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius);
}

.tag--green   { background: var(--clr-green);           color: var(--clr-chartreuse); }
.tag--accent  { background: var(--clr-chartreuse);      color: var(--clr-green); }
.tag--green-l { background: var(--clr-green-mist);      color: var(--clr-green); }
.tag--accent-l{ background: var(--clr-chartreuse-mist); color: var(--clr-green-deep); }

/* --- See-all link --- */
.see-all {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clr-smoke);
  border-bottom: 1.5px solid var(--clr-wire-2);
  padding-bottom: 2px;
  cursor: pointer;
  transition: all var(--speed-fast);
  white-space: nowrap;
}

.see-all:hover,
.see-all:focus-visible {
  color: var(--clr-green);
  border-color: var(--clr-green);
}