/* "Our Vision", Refinement step (site/princypl/refinement.js): the description set large and
   brought to life word by word, in the theme's text colour */
.pw-refine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--c-dark-primary);
  opacity: 0;
}
.pw-refine__text {
  position: absolute;
  display: block;
  font-family: var(--font-helvetica);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-kerning: normal;
}
.pw-refine__w { white-space: nowrap; }
/* the phrase may break between its words like the rest of the sentence */
.pw-refine__w--guide { white-space: normal; }
.pw-refine__l,
.pw-refine__gw { display: inline-block; }
/* the template's own small description stays for screen readers, out of sight */
.pw-refine-on .content-3 .content-description { opacity: 0 !important; }
/* color: each letter clipped to its slice of the cobalt gradient (shows once its tint clears) */
.pw-refine__w--color .pw-refine__l { -webkit-background-clip: text; background-clip: text; }
/* guide the eye: the old Windows arrow, hard pixels, tip at its top left */
.pw-refine__cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  visibility: hidden;
  transform-origin: 0 0;
  image-rendering: pixelated;
}
.pw-refine__cursor svg { display: block; }
/* personality: the pixel burst canvas, centred on the word with room around it */
.pw-refine__w--personality { position: relative; display: inline-block; }
.pw-refine__burst { position: absolute; z-index: 2; }
/* quiet detail: copperplate, written on (refinement.js, site/princypl/quiet-detail.svg); sized so
   its small script x-height sits with the sentence */
.pw-refine__w--quiet { font-size: 1.5em; margin-left: .06em; }
.pw-refine__hand { display: inline-block; position: relative; height: 0; color: currentColor; }
.pw-refine__hand svg { position: absolute; overflow: visible; }
/* the burst canvas reaches past the screen on phones: keep the layer to the screen (no sideways scroll) */
.pw-refine { overflow: hidden; }