/* fx.css · type/variable-weight, a headline that thickens and thins as you scroll · owner: Lizzy East · all rights reserved */

/* One variable font does the moving. fx.js writes each marked line's weight from
   where it sits on screen (a style written on scroll, never an animation, so
   nothing moves on its own), heaviest as a line crosses the middle of the screen.
   Each line holds its own line, so a heavier weight can never rewrap the headline
   or change the page's height. Without script, or with motion off, the headline
   rests at its middle weight. */
[data-fx~="type/variable-weight"] { font-weight: var(--fx-weight-rest, 700); }
[data-fx~="type/variable-weight"] { text-align: start; }
[data-fx~="type/variable-weight"] [data-fx-line] {
  display: block;
  white-space: nowrap;
  /* The line is sized for its heaviest weight, so a lighter frame only leaves room at
     the end and its text never moves: no layout shift as the weight changes. */
  min-width: 100%;
  contain: layout;
}