/* One transparent source, mirrored consistently. Borders and ornaments are
   decorative; content occupies a separate, higher stacking layer. */
.heritage-frame {
    --corner-size: 82px;
    position: relative;
    isolation: isolate;
    background: var(--ivory);
    outline: 1px solid var(--gold);
    outline-offset: -10px;
}
.heritage-frame > :not(.heritage-corner) { position: relative; z-index: 2; }
.heritage-corner {
    position: absolute;
    z-index: 1;
    display: block;
    width: var(--corner-size);
    aspect-ratio: 560 / 470;
    background: url('../heritage/floral-corner-transparent.png') no-repeat top left / contain;
    pointer-events: none;
    user-select: none;
}
.heritage-corner--tl { top: 0; left: 0; }
.heritage-corner--tr { top: 0; right: 0; transform: scaleX(-1); }
.heritage-corner--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.heritage-corner--br { bottom: 0; right: 0; transform: scale(-1); }
.invitation.heritage-frame {
    --corner-size: clamp(110px, 11vw, 158px);
    padding-top: 110px;
    padding-bottom: 145px;
}
.location.heritage-frame {
    --corner-size: clamp(100px, 10vw, 145px);
    padding-top: 98px;
    padding-bottom: 110px;
}
.rsvp-card.heritage-frame { padding-top: 76px; padding-bottom: 76px; }
.confirmation.heritage-frame { --corner-size: 78px; padding-top: 72px; padding-bottom: 76px; }
.login-card.heritage-frame { --corner-size: 74px; padding-top: 68px; padding-bottom: 68px; }
.rsvp-card > .heritage-corner--tr,
.rsvp-card > .heritage-corner--bl,
.confirmation > .heritage-corner--tr,
.confirmation > .heritage-corner--bl,
.login-card > .heritage-corner--tr,
.login-card > .heritage-corner--bl { display: none; }
@media (max-width: 600px) {
    .heritage-frame { outline-offset: -7px; }
    .invitation.heritage-frame { --corner-size: 85px; padding-top: 86px; padding-bottom: 90px; }
    .location.heritage-frame { --corner-size: 76px; padding-top: 75px; padding-bottom: 80px; }
    .rsvp-card.heritage-frame { --corner-size: 64px; padding-top: 60px; padding-bottom: 64px; }
    .confirmation.heritage-frame { --corner-size: 64px; padding-top: 60px; padding-bottom: 64px; }
    .login-card.heritage-frame { --corner-size: 60px; padding-top: 58px; padding-bottom: 60px; }
}