/* cursor.css — thin crosshair pointer, in the site's ink and accent.

   Loaded last on the public pages only: the admin panel keeps native cursors,
   since an editor needs ordinary text carets and resize handles.

   Every rule falls back to the crosshair keyword — never pointer — so the
   system hand never appears, even where a browser refuses the SVG. The whole
   thing is gated behind a fine pointer, so touch devices are untouched. */

:root {
  /* 24×24 with the hotspot dead centre (12 12); the centre gap keeps whatever
     sits under the cursor readable. */
  --cursor-cross:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg stroke='%23191613' stroke-width='1.25' stroke-linecap='square'%3E%3Cpath d='M12 2.5V9'/%3E%3Cpath d='M12 15v6.5'/%3E%3Cpath d='M2.5 12H9'/%3E%3Cpath d='M15 12h6.5'/%3E%3C/g%3E%3C/svg%3E") 12 12;

  /* Same crosshair in paper, for surfaces painted with --ink. The ink version
     is effectively invisible there. */
  --cursor-cross-light:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg stroke='%23f4f2ed' stroke-width='1.25' stroke-linecap='square'%3E%3Cpath d='M12 2.5V9'/%3E%3Cpath d='M12 15v6.5'/%3E%3Cpath d='M2.5 12H9'/%3E%3Cpath d='M15 12h6.5'/%3E%3C/g%3E%3C/svg%3E") 12 12;

  /* Accent, with a filled centre: reads as "this does something" so replacing
     the system pointer does not cost the affordance. */
  --cursor-cross-active:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg stroke='%23c2401c' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M12 2V8.5'/%3E%3Cpath d='M12 15.5V22'/%3E%3Cpath d='M2 12H8.5'/%3E%3Cpath d='M15.5 12H22'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='1.75' fill='%23c2401c'/%3E%3C/svg%3E") 12 12;
}

@media (hover: hover) and (pointer: fine) {
  /* Force inheritance so nothing quietly falls back to a system arrow or hand:
     images, SVGs and anything a UA stylesheet touches all take the crosshair
     from their parent. Real rules below outrank this, so text carets and the
     carousel's grab survive. */
  *,
  *::before,
  *::after {
    cursor: inherit;
  }

  html,
  body {
    cursor: var(--cursor-cross), crosshair;
  }

  /* Anything actionable gets the accent variant — including the footer's
     social links and the contact address. Fallback is crosshair, never
     pointer: the system hand should not appear anywhere on the site. */
  a,
  button,
  summary,
  [role="button"],
  .btn,
  .filters__btn,
  .carousel__arrow,
  .footer__socials a,
  .footer__top,
  .project__card {
    cursor: var(--cursor-cross-active), crosshair;
  }

  /* layout.css puts cursor: pointer on the hero image, which reads as a link
     it is not. It is decorative, so it gets the plain crosshair. */
  .hero__asset img,
  .about__bg,
  .about__portrait img {
    cursor: var(--cursor-cross), crosshair;
  }

  /* Ink-painted surfaces flip the crosshair to paper. .footer is the contact
     block; .on-dark is here to tag any future dark section the same way.
     Links inside keep the accent — a lower-specificity match cannot override
     the a/button rules above, which is what we want: red stays red. */
  .footer,
  .on-dark {
    cursor: var(--cursor-cross-light), crosshair;
  }

  /* Dragging the carousel is a different gesture, so it keeps its own
     grab/grabbing affordance rather than the crosshair. */
  .carousel__viewport,
  .carousel.is-dragging .carousel__viewport {
    cursor: grab;
  }
  .carousel.is-dragging .carousel__viewport {
    cursor: grabbing;
  }

  /* Real text still needs a caret. */
  input,
  textarea,
  [contenteditable="true"] {
    cursor: text;
  }
}