/* ============================================================
   THE THREE TREATMENTS — a functional axis, not decoration.
   Every tonal field in the system is one of three print marks.
   These are the CSS-only fallbacks that approximate the WebGL
   shader where a live canvas is overkill. Each has a fixed
   register: where it's allowed, its tonal range, its density.

   Apply a treatment with a class on any block:
     .tr-engrave  — burin line-work   (data, figures, proofs)
     .tr-woodcut  — gouged cut        (section breaks, callouts)
     .tr-mezzo    — stochastic grain  (imagery, ambient fields)

   Set depth 1..5 with .tr-d1 … .tr-d5 (hatch density = tone).
   ============================================================ */
:root{
  /* tonal ramp expressed as hatch/grain density (light → dark) */
  --tone-1: 0.14; /* @kind other */
  --tone-2: 0.28; /* @kind other */
  --tone-3: 0.46; /* @kind other */
  --tone-4: 0.66; /* @kind other */
  --tone-5: 0.86; /* @kind other */

  --tr-ink:   var(--ink);
  --tr-paper: var(--paper);
}

/* ---------- ENGRAVING — fine parallel burin hatching ----------
   Precise, controlled, high-information. Cross-hatches (a second
   angle) as tone darkens. Tight pitch (3–5px). Lives behind data,
   diagrams, technical/proof content. */
.tr-engrave{
  background-color: var(--tr-paper);
  background-image:
    repeating-linear-gradient(24deg,
      var(--tr-ink) 0, var(--tr-ink) var(--tr-w, 0.6px),
      transparent var(--tr-w, 0.6px), transparent var(--tr-pitch, 4px));
  background-blend-mode: multiply;
  --tr-w: 0.6px; --tr-pitch: 4px;
}
/* darker depths add a cross angle + tighten pitch */
.tr-engrave.tr-d1{ --tr-w:0.5px; --tr-pitch:6px; }
.tr-engrave.tr-d2{ --tr-w:0.6px; --tr-pitch:5px; }
.tr-engrave.tr-d3{ --tr-w:0.7px; --tr-pitch:4px;
  background-image:
    repeating-linear-gradient(24deg,  var(--tr-ink) 0 0.7px, transparent 0.7px 4px),
    repeating-linear-gradient(-64deg, var(--tr-ink) 0 0.5px, transparent 0.5px 6px); }
.tr-engrave.tr-d4{ background-image:
    repeating-linear-gradient(24deg,  var(--tr-ink) 0 0.8px, transparent 0.8px 3.5px),
    repeating-linear-gradient(-64deg, var(--tr-ink) 0 0.7px, transparent 0.7px 3.5px); }
.tr-engrave.tr-d5{ background-image:
    repeating-linear-gradient(24deg,  var(--tr-ink) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-64deg, var(--tr-ink) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,  var(--tr-ink) 0 0.6px, transparent 0.6px 5px); }

/* ---------- WOODCUT — coarse gouged cut ----------
   Bold, declarative, hard black/white cutoffs. Wide pitch, heavy
   strokes, a ragged edge. Lives behind section breaks, large
   headers, callouts — moments that should hit. */
.tr-woodcut{
  background-color: var(--tr-paper);
  background-image:
    repeating-linear-gradient(8deg,
      var(--tr-ink) 0, var(--tr-ink) var(--tr-w, 3px),
      transparent var(--tr-w, 3px), transparent var(--tr-pitch, 11px));
  --tr-w: 3px; --tr-pitch: 11px;
}
.tr-woodcut.tr-d1{ --tr-w:2px;  --tr-pitch:16px; }
.tr-woodcut.tr-d2{ --tr-w:3px;  --tr-pitch:13px; }
.tr-woodcut.tr-d3{ --tr-w:4px;  --tr-pitch:11px; }
.tr-woodcut.tr-d4{ --tr-w:6px;  --tr-pitch:10px; }
.tr-woodcut.tr-d5{ --tr-w:9px;  --tr-pitch:11px; }

/* ---------- MEZZOTINT — stochastic grain ----------
   Velvety, continuous tone, atmospheric. Layered dithered noise,
   no linework. Lives behind imagery, hero/ambient fields, quiet
   backgrounds. Uses an inline SVG feTurbulence dither. */
.tr-mezzo{
  background-color: var(--tr-paper);
  background-image: var(--mezzo-grain);
  background-size: 180px 180px;
  --mezzo-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.165 0 0 0 0 0.125 0 0 0 0 0.075 0 0 0 -1.1 1'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23m)'/%3E%3C/svg%3E"); /* @kind other */
}
.tr-mezzo.tr-d1{ opacity:1; filter:contrast(0.7) brightness(1.05); }
.tr-mezzo.tr-d2{ filter:contrast(0.85); }
.tr-mezzo.tr-d3{ filter:contrast(1); }
.tr-mezzo.tr-d4{ filter:contrast(1.35) brightness(0.9); }
.tr-mezzo.tr-d5{ filter:contrast(1.8) brightness(0.78); }

/* keep marks under the register they belong to */
.tr-engrave, .tr-woodcut, .tr-mezzo{ color: var(--text-body); }