/* halftone.css */

/* 1) Make sure body can host the overlay */
html, body { height: 100%; }
body { position: relative; }

/* 2) Force a full-screen overlay using ONLY body::before */
body::before{
  content: "";
  position: fixed;
  inset: 0;

  /* Make sure it's visible and ON TOP for testing */
  z-index: 2147483647;
  pointer-events: none;

  /* Avoid blend-modes hiding it */
  mix-blend-mode: normal;
  opacity: 0.18;

  /* Premium micro-dot (clean, subtle) */
  background-image: radial-gradient(circle, rgba(255,255,255,0.55) 1px, transparent 1.2px);
  background-size: 18px 18px;
  background-position: 0 0;
}

/* Optional: if your site is light, use dark dots by switching the body class */
body.halftone-dark::before{
  background-image: radial-gradient(circle, rgba(0,0,0,0.18) 1px, transparent 1.2px);
}