/* typography.css — editorial grotesk + technical mono */

body {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--fg);
}

.mono {
  font-family: var(--font-mono);
  font-size: .6875rem; /* 11px */
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* titoli giganti */
.display-xl,
.display-lg {
  font-weight: 500;
  line-height: .82;
  letter-spacing: -.065em;
  text-transform: uppercase;
}
.display-xl { font-size: clamp(4rem, 13vw, 12rem); }
.display-lg { font-size: clamp(3rem, 8.5vw, 7.5rem); }

/* linee mascherate per i reveal (reveal one-shot: la promozione a layer
   la gestisce GSAP, niente will-change permanente) */
.l { display: block; overflow: hidden; }
.li { display: block; }
.li em { font-style: normal; color: var(--accent); }

/* kicker di capitolo */
.chapter-kicker {
  color: var(--muted);
  margin-bottom: var(--space-sm);
}
.chapter-kicker--dark { color: var(--dark-muted); }

/* underline animato: entra da sinistra, esce a destra */
.link-u {
  position: relative;
  display: inline-block;
}
.link-u::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.08em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--ease-out-expo);
}
.link-u:hover::after,
.link-u:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.link-u:not(:hover)::after {
  transform-origin: right center;
}