/* ---------- cursor dot ---------- */
/* the site's signature orange dot, now a tracked element rather than a CSS
   cursor image so it can pick up a label (hero prev/next) and auto-contrast
   itself against whatever's underneath (hero photos can be the same orange).
   The dot and its label are separate fixed elements (rather than one nested
   inside the other) so the dot's blend-mode trick composites against the
   real page behind it — nesting it under another positioned element would
   trap the blend inside that element's own stacking context, where there's
   nothing to blend against. */
.cursor-dot{
  position:fixed;
  left:0;top:0;
  width:18px;height:18px;
  border-radius:50%;
  background:#fb4827;
  transform:translate(-50%,-50%);
  z-index:999;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s ease;
}
.cursor-dot.on{opacity:1}
/* the dot stays orange everywhere. it only switches — via a true colour
   invert — at the exact moment it's over something that's ALSO orange (a
   hero photo, a panel that happened to roll the same swatch), so it's
   never lost against its own colour, and plain orange the rest of the time */
.cursor-dot.on-orange{
  mix-blend-mode:difference;
  background:#fff;
}

.cursor-dot-label{
  position:fixed;
  left:0;top:0;
  transform:translate(19px,-50%);
  z-index:999;
  pointer-events:none;
  font-family:var(--display);
  font-weight:500;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  color:#fff;
  opacity:0;
  transition:opacity .15s ease;
}
.cursor-dot-label.on{opacity:1}
/* "Previous" sits on the other side of the dot, so the dot always sits
   between the label and the direction it points to */
.cursor-dot-label.reverse{transform:translate(calc(-100% - 19px), -50%)}

/* touch devices have no cursor to stand in for */
@media (hover:none){
  .cursor-dot, .cursor-dot-label{display:none !important}
}