html {
  background-color: var(--parch-base);
}

.parchment {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--parch-base);

  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255, 251, 240, 0.10) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(150, 112, 58, 0.05) 0 1px,
      transparent 1px 46px
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.34'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.026' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.47 0 0 0 0 0.35 0 0 0 0 0.19 0.42 0.12 0 0 -0.30'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23m)'/%3E%3C/svg%3E"),
    radial-gradient(
      ellipse 90% 75% at 50% 32%,
      var(--parch-lit),
      transparent 72%
    );

  background-size: auto, auto, 300px 300px, 600px 600px, auto;
  background-blend-mode: overlay, multiply, soft-light, multiply, normal;
}

.parchment::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 115% 95% at 50% 42%,
      transparent 42%,
      rgba(74, 46, 18, var(--parch-vignette, 0.12)) 100%
    ),
    rgba(46, 29, 24, var(--parch-scrim, 0.05));
}

.plate {
  background: linear-gradient(
    to bottom,
    rgba(250, 242, 224, 0.55),
    rgba(250, 242, 224, 0.30)
  );
  box-shadow: 0 1px 0 rgba(255, 252, 244, 0.5) inset;
  border-radius: var(--radius);
}

.plate-print {
  padding: clamp(4px, 0.45vw, 7px);
  background: linear-gradient(180deg, rgba(255, 250, 238, 0.55), rgba(255, 250, 238, 0.22));
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  box-shadow:
    0 1px 0 rgba(255, 252, 244, 0.65) inset,
    0 10px 26px -14px rgba(46, 29, 24, 0.45);
}
.plate-print img {
  border: 1px solid color-mix(in srgb, var(--gold-deep) 30%, transparent);
}

@media (forced-colors: active) {
  .parchment,
  .parchment::after { display: none; }
}

.parchment.is-photo {
  --parch-vignette: 0.07;
  background-image: url("../img/parchment-1400.1ccddecacf6f.jpg");
  background-image: image-set(
    url("../img/parchment-1400.2ef216e62660.webp") type("image/webp"),
    url("../img/parchment-1400.1ccddecacf6f.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: normal;
}

@media (min-width: 1100px) {
  .parchment.is-photo {
    background-image: image-set(
      url("../img/parchment-2000.9c6190e9affa.webp") type("image/webp"),
      url("../img/parchment-1400.1ccddecacf6f.jpg") type("image/jpeg")
    );
  }
}

@media (min-width: 1900px), (min-resolution: 2dppx) {
  .parchment.is-photo {
    background-image: image-set(
      url("../img/parchment-2800.d6d40f32c965.webp") type("image/webp"),
      url("../img/parchment-1400.1ccddecacf6f.jpg") type("image/jpeg")
    );
  }
}