/* ==========================================================================
   Cursors — the owner's hand-drawn arrow and hands (brand/cursor/*).
   The artwork carries a green outline around a cream fill, so a single set
   reads on both the cream pages and the green sections. No per-section tone
   swapping, and no recolouring: these are the supplied files, resized.

   Three constraints shaped the format:
     · browsers IGNORE a cursor image larger than 128px and fall back to the
       system arrow with no warning — the source is 128x184, over on the long
       edge, so it has to be resized
     · Safari does not support SVG cursors at all, so PNG it is
     · cursor images do not respond to devicePixelRatio, hence image-set()

   The two numbers after each url are the HOTSPOT: where the click actually
   lands. Wrong values mean every click misses by that offset. These were
   measured off the alpha channel, not guessed: the arrow's topmost ink sits at
   x 8-10 y 0, so it points from 9,1. Both hands share one hotspot near their
   ink centroid — give them different values and the thing you are dragging
   jumps the moment you press.

   This file is the ONLY place cursors are set. Component and page stylesheets
   load after it, so a stray `cursor:` on a class silently wins — two of them
   did exactly that before this was consolidated.
   ========================================================================== */

/* A coarse pointer has no cursor to style; skip the downloads entirely. */
@media (hover: hover) and (pointer: fine) {
  /* The pencil is the default: the whole page draws under the pointer, so the
     cursor may as well be the thing doing the drawing. Its nib is the
     top-left corner of the artwork, hence 4 4. */
  body {
    cursor: image-set(url('/assets/cursor/pencil.png') 1x,
                      url('/assets/cursor/pencil@2x.png') 2x) 4 4, default;
  }

  /* The arrow marks what you can act on. Inverting the usual convention is
     deliberate: on a page where everything is a drawing surface, the pointer
     changing to an arrow is what signals "this one does something". */
  a, button, summary, label[for], [role='button'], .btn,
  input[type='submit'], input[type='button'], .nav-burger {
    cursor: image-set(url('/assets/cursor/mouse.png') 1x,
                      url('/assets/cursor/mouse@2x.png') 2x) 9 1, pointer;
  }

  /* The hands stay where a hand belongs — on the thing you physically move. */
  .pz {
    cursor: image-set(url('/assets/cursor/open-hand.png') 1x,
                      url('/assets/cursor/open-hand@2x.png') 2x) 22 25, grab;
  }
  .pz:active, .pz.is-held {
    cursor: image-set(url('/assets/cursor/closed-hand.png') 1x,
                      url('/assets/cursor/closed-hand@2x.png') 2x) 22 25, grabbing;
  }

  /* Text entry keeps the system caret — a pencil over a field misrepresents
     what typing there will do. */
  input:not([type='submit']):not([type='button']), textarea, select,
  [contenteditable] { cursor: auto; }
}