/* MessageText — the big brand-message headline. Stack Sans Headline, 48px,
   -1.5px tracking. Letters start at muted grey (rgb(165,165,165)) and flip to
   near-black (#0a0a0a) with a hard per-glyph cut, but the grey→black boundary
   travels letter-by-letter as the section scrolls up through the viewport, so
   it reads as one continuous wipe. The colour is set per letter, per scroll
   frame, by MessageText.jsx.

   WHITE SURFACE ONLY — the grey→black sweep is tuned for #ffffff behind it. */

.ds-msg {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-heading);
  font-size: var(--msg-text);          /* fluid H2 step: 48px desktop → 32px mobile */
  letter-spacing: var(--msg-tracking); /* -0.031em (≡ -1.5px at 48px) */
  line-height: var(--msg-leading);     /* 1.12 */
  text-wrap: pretty;
  max-width: 22ch;                      /* sensible default column — override via style/className */
}

/* Words stay whole for line-breaking; letters carry the colour.
   Base colour = grey. JS overrides per letter inline; this is the pre-JS /
   below-the-fold resting state. */
.ds-msg__word {
  display: inline-block;
}
.ds-msg__char {
  color: var(--color-muted);
}

/* Reduced motion — no scroll sweep; render the message fully legible in ink.
   The !important beats the inline colour JS would otherwise set. */
@media (prefers-reduced-motion: reduce) {
  .ds-msg__char {
    color: var(--color-ink) !important;
  }
}