/* Pencil trail — the site-wide pointer signature (docs/art-direction.md §2.14).
   The canvas is created by assets/js/pencil.js, so this file styles a layer
   that only exists once the script decides the device qualifies: hover-capable,
   fine pointer, and no reduced-motion preference. */

#ink-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-ink);
  display: block;
  width: 100%;
  height: 100%;

  /* Decorative, and it sits ABOVE section backgrounds so the graphite is
     visible on both cream and green. It must therefore never intercept a
     click — the whole page is underneath it. */
  pointer-events: none;
}

/* Touch draws too — on a press-and-hold, not by following the finger — so the
   layer is no longer hidden on coarse pointers. Reduced motion still removes
   it: the script refuses to build the canvas, and this is belt and braces for
   a preference that changes after load. */
@media (prefers-reduced-motion: reduce) {
  #ink-layer { display: none; }
}

/* While the pen is down on touch, suppress the selection and callout the long
   press would otherwise trigger. */
body.is-inking {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* The gate owns the pointer until it is dismissed. */
.gate ~ #ink-layer,
body:has(.gate) #ink-layer { display: none; }