.wax-seal {
    position: relative;
    display: grid;
    width: clamp(4rem, 16vw, 5.4rem);
    aspect-ratio: 1;
    place-items: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--ivory-100);
    background: radial-gradient( circle at 35% 28%, #e0c36e 0%, #c8a247 24%, #aa8030 58%, #75551f 100% );
    box-shadow: 0 0.7rem 1.4rem rgba(68, 51, 21, 0.34), inset 0.2rem 0.2rem 0.45rem rgba(255, 244, 195, 0.32), inset -0.25rem -0.3rem 0.5rem rgba(79, 53, 14, 0.32);
    transition: transform var(--duration-normal) var(--ease-elegant), filter var(--duration-normal) var(--ease-standard);
}

    .wax-seal::before {
        content: "";
        position: absolute;
        inset: -0.24rem;
        z-index: -1;
        border-radius: 45% 55% 48% 52% / 52% 43% 57% 48%;
        background: linear-gradient( 145deg, #d1aa4d, #977025 );
        transform: rotate(8deg);
    }

    .wax-seal::after {
        content: "";
        position: absolute;
        inset: -0.14rem;
        z-index: -1;
        border-radius: 56% 44% 52% 48% / 46% 58% 42% 54%;
        border: 1px solid rgba(255, 232, 158, 0.24);
        transform: rotate(-10deg);
    }

    .wax-seal:hover {
        transform: translateY(-0.18rem) scale(1.035);
        filter: brightness(1.06);
    }

    .wax-seal:active {
        transform: translateY(0) scale(0.97);
    }

    .wax-seal:focus-visible {
        outline: 3px solid rgba(200, 162, 71, 0.4);
        outline-offset: 0.5rem;
    }

.wax-seal__outer-ring {
    position: absolute;
    inset: 0.48rem;
    border: 1px solid rgba(255, 240, 184, 0.46);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(91, 62, 17, 0.22);
}

.wax-seal__inner-ring {
    position: absolute;
    inset: 0.73rem;
    border: 1px solid rgba(91, 62, 17, 0.27);
    border-radius: 50%;
}

.wax-seal__initials {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.12em;
    font-family: var(--font-heading);
    font-size: clamp(1.05rem, 4vw, 1.5rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 1px rgba(74, 50, 14, 0.48);
}

    .wax-seal__initials span {
        font-size: 0.7em;
        font-style: italic;
    }

.wax-seal__shine {
    position: absolute;
    width: 38%;
    height: 24%;
    top: 16%;
    left: 22%;
    border-radius: 50%;
    opacity: 0.4;
    filter: blur(2px);
    background: linear-gradient( 135deg, rgba(255, 255, 255, 0.8), transparent );
    transform: rotate(-24deg);
}

@media (prefers-reduced-motion: reduce) {
    .wax-seal {
        transition: none;
    }
}