/* Parchment stays a reusable paper tile; ageing is an independent alpha layer.
   Add ze-paper-stained to a positioned surface with its own parchment background.
   Its ::before is reserved for stains; content remains above the noninteractive ink. */
.ze-paper-stained {
  --ze-stain-opacity: 0.65;
  --ze-stain-rotation: 0deg;
  --ze-stain-inset: 0px;
  isolation: isolate;
}
.ze-paper-stained::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--ze-stain-inset);
  border-radius: inherit;
  background: image-set(url("https://assets.zeldaelements.net/assets/ze/parchment-edge-patina-720.9524f94dfbac.avif") 1x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/parchment-edge-patina-720.50e100332807.webp") 1x type("image/webp"), url("https://assets.zeldaelements.net/assets/ze/parchment-edge-patina-1440.ac0c656d993b.webp") 2x type("image/webp")) center / 100% 100% no-repeat;
  opacity: var(--ze-stain-opacity);
  transform: rotate(var(--ze-stain-rotation));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.ze-paper-stained--quiet {
  --ze-stain-opacity: 0.5;
}
.ze-paper-stained--aged {
  --ze-stain-opacity: 0.85;
  --ze-stain-rotation: 180deg;
}
.ze-material-examples {
  margin-top: 32px;
}
.ze-material-examples > p {
  max-width: 62ch;
}
.ze-leather-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 24px 0 32px;
}
.ze-leather-stages figure {
  margin: 0;
}
.ze-leather-sample {
  height: 120px;
  border-radius: 4px;
  background:
    var(--face-wash),
    #12362a var(--leather) center / 512px 512px;
}
.ze-leather-sample--dyed {
  background:
    var(--face-wash),
    var(--leather-patina) center / 768px 768px,
    #12362a var(--leather) center / 512px 512px;
  background-blend-mode: normal, soft-light, normal;
}
.ze-leather-sample--finished {
  position: relative;
  background: var(--panel-material);
  background-blend-mode: var(--panel-blend);
  box-shadow: var(--panel-edge);
  filter: var(--panel-shadow);
}
.ze-leather-sample--finished::before {
  content: "";
  position: absolute;
  inset: calc(var(--stitch-inset) + 1px);
  border: 1px dashed var(--stitch-colour);
  border-radius: 2px;
  filter: drop-shadow(0 -0.8px 0 #00170fe6);
}
.ze-leather-stages figcaption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
}
.ze-leather-stages strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ze-ink);
}
.ze-leather-rendering h4 {
  margin-top: 28px;
}
@media (max-width: 800px) {
  .ze-leather-stages {
    grid-template-columns: 1fr;
  }
}
.ze-paper-specimens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
}
.ze-paper-specimen {
  position: relative;
  min-height: 180px;
  padding: 28px 24px;
  background: var(--ze-parchment) image-set(url("https://assets.zeldaelements.net/assets/ze/parchment-600.58ef11e44ab6.webp") 1x type("image/webp"), url("https://assets.zeldaelements.net/assets/ze/parchment-1200.8e521d24cc99.avif") 2x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/parchment-1200.466b0bbbfe4d.webp") 2x type("image/webp")) center / 600px;
  border: 1px solid #baa17466;
}
.ze-paper-specimen h4 {
  margin: 0 0 12px;
  font:
    600 24px/1.1 var(--ze-font-display);
  color: var(--ze-ink);
}
.ze-paper-specimen p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}
@media (max-width: 1100px) {
  .ze-paper-specimens {
    grid-template-columns: 1fr;
  }
}
@media print {
  .ze-paper-stained::before {
    content: none;
  }
}

/* Painterly edge: the element dissolves into the page along dry-brush strokes instead of a gradient fade. The masks
   come from scripts/brush_masks.py. --ze-brush-depth is how far the strokes reach in from the edge. Put the class on
   the box whose edge should fray (a hero's art layer, a plate); use the side variants on a separate wrapper. */
.ze-brush-edge {
  --ze-brush-depth: 160px;
  mask-image: linear-gradient(#000, #000), image-set(url("https://assets.zeldaelements.net/assets/ze/masks/brush-edge-bottom-2400.24677b81a009.avif") 1x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/masks/brush-edge-bottom-2400.15c2c059009e.webp") 1x type("image/webp"));
  mask-size:
    100% calc(100% - var(--ze-brush-depth) + 2px),
    100% var(--ze-brush-depth);
  mask-position: top, bottom;
  mask-repeat: no-repeat;
}
.ze-brush-edge--sides {
  mask-image: image-set(url("https://assets.zeldaelements.net/assets/ze/masks/brush-edge-left-280.a5d2de068754.avif") 1x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/masks/brush-edge-left-280.afd6bce464ac.webp") 1x type("image/webp")), linear-gradient(#000, #000), image-set(url("https://assets.zeldaelements.net/assets/ze/masks/brush-edge-right-280.f412d67990cb.avif") 1x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/masks/brush-edge-right-280.4984133880ea.webp") 1x type("image/webp"));
  mask-size:
    var(--ze-brush-depth) 100%,
    calc(100% - 2 * var(--ze-brush-depth) + 4px) 100%,
    var(--ze-brush-depth) 100%;
  mask-position: left, center, right;
}