/* Coloured heading words carry the background's light: a slow flow of orange, magenta and violet
   moves through the letters, with a soft bright band sweeping across every few seconds. Shared by
   every page; only paints inside the text, so it costs almost nothing. */
@property --ft{syntax:"<percentage>";inherits:false;initial-value:0%}
.ft,h1 em,h1 .o,h1 .dot,.rot-w b,main h2 em,.case-copy h3 em,em.s,.doc h1{
  background-image:
    linear-gradient(105deg,transparent calc(var(--ft) - 18%),rgba(255,240,230,.9) var(--ft),transparent calc(var(--ft) + 18%)),
    linear-gradient(100deg,#F26A2C 0%,#E2531A 15%,#C23F7A 35%,#8B5CF6 50%,#C23F7A 65%,#E2531A 85%,#F26A2C 100%)!important;
  background-size:100% 100%,200% 100%!important;background-repeat:no-repeat,repeat-x!important;padding-bottom:.14em;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;
  animation:ftflow 9s linear infinite,ftsweep 5.5s cubic-bezier(.6,0,.3,1) infinite}
.doc h1{background-image:linear-gradient(105deg,transparent calc(var(--ft) - 18%),rgba(255,240,230,.7) var(--ft),transparent calc(var(--ft) + 18%)),linear-gradient(100deg,#F2EEE8 0%,#F2EEE8 40%,#F58A55 60%,#B9A0FB 80%,#F2EEE8 100%)!important}
@keyframes ftflow{0%{background-position:0 0,0% 0}100%{background-position:0 0,200% 0}}
@keyframes ftsweep{0%,55%{--ft:-30%}100%{--ft:130%}}
@media (prefers-reduced-motion:reduce){.ft,h1 em,h1 .o,h1 .dot,.rot-w b,main h2 em,em.s,.doc h1{animation:none}}
/* the cycling word: room for descenders inside the painted box without changing its step */
.rot-w b{padding-bottom:.22em!important;margin-bottom:-.22em;box-sizing:content-box}