/* ===========================================================================
   BACK TO THE TOP — the mark itself.

   Bottom right, opposite the plus, so the two never argue over a corner. It
   fades in rather than appearing, and it is invisible to the pointer while it
   is invisible to the eye.
   ========================================================================= */
.hbtop{
  position:fixed;z-index:93;
  right:clamp(18px,2.4vw,34px);
  bottom:clamp(18px,2.4vw,34px);
  width:clamp(46px,4vw,58px);height:clamp(46px,4vw,58px);
  display:flex;align-items:center;justify-content:center;
  padding:0;cursor:pointer;
  background:transparent;
  border:1px solid currentColor;border-radius:50%;
  /* difference blending is what lets one mark sit over a white page, a black
     page and a photograph without being told which it is on */
  color:#fff;mix-blend-mode:difference;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1),visibility 0s linear .45s;
}
.hbtop[data-on="1"]{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1);
}
.hbtop svg{
  width:44%;height:44%;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.hbtop:hover svg{transform:translateY(-3px)}
.hbtop:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* the reading-preferences button already lives in that corner on every page,
   so the arrow sits above it rather than on top of it */
.hbtop{bottom:clamp(80px,8vh,104px)}

@media (prefers-reduced-motion:reduce){
  .hbtop,.hbtop svg{transition:opacity .2s linear}
  .hbtop{transform:none}
}