/* LIVING.FIELDS — surface treatments (ported from political.design).
   Apply directly to an element that already has a background-colour, or use
   .tx-over on an absolutely-positioned child to lay a texture over artwork. */

.tx-over {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* fractal film grain (feTurbulence, pre-rendered) */
.tx-grain {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii43NSIgc3RpdGNoVGlsZXM9InN0aXRjaCIgdHlwZT0iZnJhY3RhbE5vaXNlIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGQ9Ik0wIDBoMzAwdjMwMEgweiIgZmlsdGVyPSJ1cmwoI2EpIiBvcGFjaXR5PSIuMDUiLz48L3N2Zz4=');
}
.tx-grain--heavy {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii4yIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIiB0eXBlPSJmcmFjdGFsTm9pc2UiLz48ZmVDb2xvck1hdHJpeCB0eXBlPSJzYXR1cmF0ZSIgdmFsdWVzPSIwIi8+PC9maWx0ZXI+PHBhdGggZD0iTTAgMGgzMDB2MzAwSDB6IiBmaWx0ZXI9InVybCgjYSkiIG9wYWNpdHk9Ii4xIi8+PC9zdmc+Cg==');
}

/* khadi: uneven handloom weave */
.tx-khadi {
  background-image:
    repeating-linear-gradient(90deg, rgba(90,70,45,0.075) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(90,70,45,0.06) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(90,70,45,0.05) 0 2px, transparent 2px 17px);
}

/* letterpress / chromolithograph halftone */
.tx-halftone {
  background-image: radial-gradient(currentColor 0.85px, transparent 0.9px);
  background-size: 5px 5px;
  opacity: 0.14;
}
.tx-halftone--coarse {
  background-image: radial-gradient(currentColor 1.6px, transparent 1.7px);
  background-size: 8px 8px;
  opacity: 0.2;
}

/* silkscreen mesh */
.tx-silkscreen {
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.055) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.055) 0 1px, transparent 1px 3px);
}

/* cheap newsprint: fibre + press lines */
.tx-newsprint {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 3px),
    radial-gradient(rgba(120,110,95,0.14) 0.6px, transparent 0.7px);
  background-size: auto, 7px 7px;
}

/* photocopier: streaks and toner blotch */
.tx-xerox {
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.03) 0 2px, transparent 2px 130px),
    radial-gradient(rgba(0,0,0,0.09) 0.7px, transparent 0.8px);
  background-size: auto, auto, 4px 4px;
}

/* linocut / woodcut carving */
.tx-woodcut {
  background-image:
    repeating-linear-gradient(35deg, rgba(0,0,0,0.16) 0 1.5px, transparent 1.5px 6px);
}

/* riso / offset misregistration bloom */
.tx-riso {
  background-image: radial-gradient(currentColor 1px, transparent 1.1px);
  background-size: 6px 6px;
  opacity: 0.22;
  mix-blend-mode: multiply;
}

/* constructivist diagonal hatch */
.tx-diagonals {
  background-image: repeating-linear-gradient(45deg, transparent 0 12px, rgba(0,0,0,0.09) 12px 24px);
}

/* spray-can stencil speckle */
.tx-stencil {
  background-image:
    radial-gradient(currentColor 0.5px, transparent 0.6px),
    radial-gradient(currentColor 0.4px, transparent 0.5px);
  background-size: 11px 11px, 17px 17px;
  background-position: 0 0, 5px 8px;
  opacity: 0.3;
}

/* CRT / phone-screen scanlines */
.tx-scanlines {
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px);
}

/* concrete: brutalist board-form */
.tx-concrete {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.07) 0 1px, transparent 1px 46px),
    radial-gradient(rgba(0,0,0,0.05) 1px, transparent 1.2px);
  background-size: auto, 9px 9px;
}

/* kente / handwoven strip */
.tx-kente {
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.09) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.06) 0 2px, transparent 2px 9px);
}

/* krama: Cambodian checked scarf */
.tx-krama {
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.09) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.09) 0 14px, transparent 14px 28px);
}

/* rice-paper fibre */
.tx-ricepaper {
  background-image:
    repeating-linear-gradient(78deg, rgba(120,100,60,0.05) 0 1px, transparent 1px 23px),
    repeating-linear-gradient(12deg, rgba(120,100,60,0.04) 0 1px, transparent 1px 31px);
}

/* graph / bureaucratic grid */
.tx-grid {
  background-image:
    linear-gradient(rgba(0,0,0,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.055) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* vignette for full-bleed heroes */
.tx-vignette {
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,0.42) 100%);
}