/* Paper grain — applied as a fixed overlay so every page gets the texture.
 * All three layers sit behind content (negative z-index) so fixed-positioned
 * modals (e.g. the search palette) can escape ancestor stacking traps. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -3;
  background-color: var(--base);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.07 0 0 0 0 0.04 0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.salon-noir body::after,
html.salon-noir body::after {
  opacity: 0.5;
}
.gothic body::after,
html.gothic body::after {
  opacity: 0.55;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0 0.10 0 0 0 0.28 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: screen;
}
/* Breakcore: blown-out RGB-tinted digital noise + CRT scanlines. */
.breakcore body::after,
html.breakcore body::after {
  opacity: 0.55;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.18 0 0 0 0 0.65 0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0) 0,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0.28) 3px,
      rgba(0, 0, 0, 0) 4px
    );
  mix-blend-mode: screen;
}
.breakcore .salon-atmosphere::before { opacity: 0.32; }
.breakcore .salon-atmosphere::after { opacity: 0.28; }

/* Floating motes of pigment — far background, very subtle. */
.salon-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.salon-atmosphere::before,
.salon-atmosphere::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.18;
}
.salon-atmosphere::before {
  width: 55vw; height: 55vw;
  top: -15vw; left: -10vw;
  background: var(--mauve);
}
.salon-atmosphere::after {
  width: 45vw; height: 45vw;
  bottom: -10vw; right: -10vw;
  background: var(--blue);
  opacity: 0.12;
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
}

/* Selection */
::selection {
  background: var(--mauve);
  color: var(--rosewater);
}

/* Breakcore: chromatic-aberration glow on display headings + nameplate. */
.breakcore .prose h1,
.breakcore .prose h2,
.breakcore h1.font-display,
.breakcore .nameplate-title {
  text-shadow:
    -1px 0 0 color-mix(in srgb, var(--teal) 70%, transparent),
    1px 0 0 color-mix(in srgb, var(--mauve) 70%, transparent),
    0 0 18px color-mix(in srgb, var(--mauve) 35%, transparent);
}
.breakcore ::selection {
  background: var(--green);
  color: var(--crust);
  text-shadow: 0 0 6px var(--mauve);
}