/* ===== RISO UTILITIES =====
   Spot-color helpers, halftone patterns, misregistration text,
   and the standard "riso card" surface with grain overlay.
*/

/* Misregistration, pink text with green ghost behind */
.riso-misreg {
  color: var(--riso-pink);
  text-shadow: 1.5px 1px 0 var(--riso-green-deep);
}
.riso-misreg-green {
  color: var(--riso-green);
  text-shadow: -1px 1.5px 0 var(--riso-pink);
}

/* Halftone surfaces */
.halftone-pink {
  background-image: radial-gradient(var(--riso-pink) 1.4px, transparent 1.8px);
  background-size: 5px 5px;
}
.halftone-pink-dense {
  background-image: radial-gradient(var(--riso-pink) 2px, transparent 2.4px);
  background-size: 4px 4px;
}
.halftone-green {
  background-image: radial-gradient(var(--riso-green) 1.4px, transparent 1.8px);
  background-size: 5px 5px;
}

/* Card surface, white-ish paper, ink outline, grain overlay */
.riso-card {
  position: relative;
  background: var(--paper-white);
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
}
.riso-card::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("/img/grain.svg");
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: 0.40;
  pointer-events: none;
  border-radius: inherit;
}
.riso-card > * { position: relative; z-index: 1; }

/* Pink/green stamp pill, for chips and tags */
.riso-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--paper-white);
  border: 1.5px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--riso-pink);
}
.riso-pill.green { box-shadow: 2px 2px 0 var(--riso-green); }

/* Hand-drawn-feeling underline for active nav, etc. */
.riso-underline {
  position: relative;
}
.riso-underline::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: -4px;
  height: 3px;
  background: var(--riso-pink);
  box-shadow: 1.5px 1.5px 0 var(--riso-green);
  border-radius: 2px;
}