/* fx.css · story/smooth, the page eases after each scroll · owner: Lizzy East · all rights reserved */

/* The page keeps its real height and its real, native scroll. fx.js sizes the block to
   the content (again whenever the content resizes), pins the content layer in place
   and moves it after the real scroll position with an easing. With no script, on a
   touch screen, or with motion off, the content layer is simply the page.
   flow-root in every state, so margins never collapse differently once it is pinned. */
[data-fx~="story/smooth"] > [data-fx-smooth] { display: flow-root; }
[data-fx~="story/smooth"].is-smooth > [data-fx-smooth] {
  position: fixed;
  inset: 0 0 auto 0;
  will-change: translate;
}