/* Riso print texture, shared by the homepage, posts and archived pages.
   - Paper grain over the whole page (an SVG noise tile, fixed, ignores the pointer).
   - The pink band printed like a riso layer: uneven ink, a halftone screen, coarse grain.
   - The name slightly off-register, as when the black drum lands a hair beside the pink.
   Everything here is decoration only; turning it off leaves the page intact. */

:root {
  /* fine grain: black specks for light paper */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.1 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* coarse mottling: the uneven ink of a riso drum */
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='600' viewBox='0 0 1600 600' preserveAspectRatio='none'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.6 -.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --grain-opacity: .15;
  --grain-blend: multiply;
  --off-register: rgba(22, 22, 22, .32);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --grain-opacity: .5; --grain-blend: overlay; }
}
:root[data-theme="dark"] { --grain-opacity: .5; --grain-blend: overlay; }

/* paper grain over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 220px 220px;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
}

/* the pink band as a printed layer */
.band, .site-bar { position: relative; isolation: isolate; overflow: hidden; }
.band::before, .site-bar::before, .parallax::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--mottle) center / cover no-repeat,
    radial-gradient(circle, rgba(22, 22, 22, .2) .7px, transparent 1.1px) 0 0 / 4px 4px,
    var(--grain) 0 0 / 220px 220px;
  opacity: .55;
  mix-blend-mode: soft-light;
}
.band::after, .site-bar::after {
  /* a lighter streak where the drum ran low on ink */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(97deg, transparent 0 58%, rgba(255, 255, 255, .16) 72%, transparent 86%);
}

/* the name a hair off-register */
.band h1, .site-bar .name { text-shadow: 2px 1.5px 0 var(--off-register); }
.page h1 { text-shadow: 2px 1.5px 0 color-mix(in srgb, var(--accent) 45%, transparent); }

@media (prefers-reduced-transparency: reduce) {
  body::after, .band::before, .band::after, .site-bar::before, .site-bar::after, .parallax::after { display: none; }
}
@media print {
  body::after { display: none; }
}