:root {
  --wedding-ivory: #faf7f0;
  --wedding-page-edge: #eee8dd;
  --wedding-moss: #3d482e;
  --wedding-wine: #622339;
  --wedding-serif: 'Newsreader', Georgia, serif;
  --wedding-linen:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='linen' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25 .78' numOctaves='2' seed='11' stitchTiles='stitch' result='warp'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76 .24' numOctaves='2' seed='37' stitchTiles='stitch' result='weft'/%3E%3CfeBlend in='warp' in2='weft' mode='multiply'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .27 0 0 0 0 .20 0 0 0 0 .12 0 0 0 .14 0'/%3E%3C/filter%3E%3Cpath d='M0 0h180v180H0z' filter='url(%23linen)'/%3E%3C/svg%3E");
}

html, body.wedding-home { background-color: var(--wedding-page-edge); }

.stationery-hero, .info-page {
  position: relative;
  isolation: isolate;
  background:
    var(--wedding-linen),
    radial-gradient(ellipse at 48% 37%, #fffdf9 8%, var(--wedding-page-edge) 100%)
    var(--wedding-page-edge);
}

.wedding-monogram {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--wedding-wine);
  font: 400 clamp(1.45rem, 4vw, 2rem)/1 'Pinyon Script', 'Segoe Script', cursive;
  text-decoration: none;
  white-space: nowrap;
}

:is(.stationery-hero, .info-page)::after {
  content: '';
  position: absolute;
  z-index: 8;
  inset: 0 0 auto;
  height: min(100%, 100svh);
  pointer-events: none;
  background: linear-gradient(43deg, transparent 61%, #473d31 82%);
  mask-image: radial-gradient(ellipse 95% 60% at 100% 0%, #000 9%, #0009 45%, transparent 86%);
  opacity: .29;
  mix-blend-mode: multiply;
}