:root{
  /* Procedural paper grain — a printed-ink texture, not an image asset.
     Apply as a design element via the .paper utility, or directly:
       background:var(--ivory); background-image:var(--paper-grain); */
  --paper-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); /* @kind other */
  --paper-grain-size:180px; /* @kind other */
}

/* Paper tooth — a quiet grain that reads on both ivory and olive.
   soft-light is bidirectional, so the same overlay adds fibre to light
   paper and to dark ink blocks alike. Keep it subtle. */
.paper{position:relative}
.paper>*{position:relative;z-index:1}
.paper::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--paper-grain);
  background-size:var(--paper-grain-size) var(--paper-grain-size);
  mix-blend-mode:soft-light;opacity:0.55;
}
/* Heavier tooth for large printed fields */
.paper-heavy::before{opacity:0.8}