/* ==========================================================================
   MANIFESTO — citação grande com reveal palavra a palavra
   Prefixo: man-
   Tokens usados: --fg --fg-2 --accent --sans --ease
   ========================================================================== */

.man-grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(36px,6vw,84px);align-items:start;margin-top:34px;
}

/* A citação usa a fonte de TEXTO em itálico, não a display. É o que a
   distingue de um título de seção: ela é fala, não rótulo. */
.man-quote{
  font-family:var(--sans);font-style:italic;font-weight:300;
  font-size:clamp(23px,2.9vw,35px);line-height:1.42;color:var(--fg);
}

.man-body p{font-size:17px;line-height:1.6;color:var(--fg-2)}
.man-body p + p{margin-top:18px}

/* Link de texto com régua embaixo, não botão: o manifesto é leitura, e um
   botão ali competiria com o CTA principal da página. */
.man-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  font-size:14px;color:var(--accent);
  border-bottom:1px solid var(--rule-2);                       /* fallback */
  border-bottom-color:color-mix(in srgb,var(--accent) 40%,transparent);
  padding-bottom:2px;transition:border-color .25s;
}
.man-link:hover{border-color:var(--accent)}
.man-link svg{transition:transform .25s}
.man-link:hover svg{transform:translateX(4px)}

@media(max-width:900px){.man-grid{grid-template-columns:1fr}}