/* ==========================================================
   PAPER — aged paper, wax seal, corner flourishes, washi tape.
   Shared by the welcome card, the letter, notes and polaroids.
   ========================================================== */

.paper {
  background-color: #fbf0dc;
  background-image:
    radial-gradient(ellipse at 12% 6%, rgba(190, 140, 70, 0.2), transparent 42%),
    radial-gradient(ellipse at 92% 94%, rgba(160, 110, 50, 0.22), transparent 44%),
    radial-gradient(circle at 84% 22%, transparent 0 46px, rgba(150, 100, 55, 0.07) 47px 49px, transparent 50px),
    var(--grain),
    linear-gradient(180deg, #fdf4e1 0%, #f8ebd0 55%, #f4e2c3 100%);
  box-shadow:
    inset 0 0 70px rgba(150, 100, 50, 0.22),
    inset 0 0 6px rgba(120, 80, 40, 0.28);
}

/* ---------- Wax seal ---------- */
.wax {
  --wax: 72px;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--wax);
  height: var(--wax);
  border-radius: 48% 52% 51% 49% / 52% 47% 53% 48%;
  background:
    radial-gradient(circle at 34% 28%, #bd4a65 0%, #8f2d46 38%, #6e2638 62%, #4a1626 100%);
  color: #f0c9cf;
  box-shadow:
    inset 0 -5px 9px rgba(0, 0, 0, 0.35),
    inset 0 3px 5px rgba(255, 255, 255, 0.2),
    0 7px 14px rgba(45, 12, 22, 0.42),
    0 1px 2px rgba(45, 12, 22, 0.5);
}
.wax::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 2px solid rgba(235, 209, 150, 0.32);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.14);
}
.wax > [data-icon] {
  position: relative;
  z-index: 1;
  display: block;
  width: 34%;
  height: 34%;
}
.wax .ic {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.22)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.45));
}
.wax::after {
  /* a little drip of wax on one side */
  content: "";
  position: absolute;
  right: -5%;
  bottom: 12%;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9d3550, #6e2638);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.3);
}

/* ---------- Corner flourishes ---------- */
.corner {
  position: absolute;
  width: clamp(34px, 7vw, 58px);
  height: clamp(34px, 7vw, 58px);
  color: var(--brown);
  opacity: 0.55;
  pointer-events: none;
}
.corner--tl { top: 12px; left: 12px; }
.corner--tr { top: 12px; right: 12px; transform: scaleX(-1); }
.corner--bl { bottom: 12px; left: 12px; transform: scaleY(-1); }
.corner--br { bottom: 12px; right: 12px; transform: scale(-1, -1); }

/* ---------- Washi tape ---------- */
.tape {
  position: absolute;
  width: 84px;
  height: 26px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.22) 0 6px, transparent 6px 12px),
    rgba(212, 175, 106, 0.62);
  box-shadow: 0 1px 2px rgba(45, 12, 22, 0.18);
  clip-path: polygon(0 0, 4% 12%, 0 25%, 4% 38%, 0 50%, 4% 62%, 0 75%, 4% 88%, 0 100%, 100% 100%, 96% 88%, 100% 75%, 96% 62%, 100% 50%, 96% 38%, 100% 25%, 96% 12%, 100% 0);
  pointer-events: none;
}
.tape--rose { background-color: rgba(201, 130, 139, 0.55); }
.tape--sage { background-color: rgba(143, 160, 128, 0.55); }