.cp-card{isolation:isolate;border-radius:var(--radius-card,1.25rem);border:1px solid var(--color-smoke);background:linear-gradient(160deg, #2a221c, var(--color-brace) 70%);transition:translate .35s var(--ease-out-expo), border-color .35s, box-shadow .35s;align-content:start;gap:.6rem;padding:1.5rem 1.4rem 1.6rem;display:grid;position:relative;overflow:hidden}.cp-card:before{content:"";z-index:-1;opacity:.25;width:16rem;height:16rem;transition:opacity .35s, transform .5s var(--ease-out-expo);background:radial-gradient(circle,#e9b44c59,#0000 65%);border-radius:50%;position:absolute;inset:-40% -20% auto auto}.cp-card__no{z-index:-1;font-family:var(--font-display);color:#0000;-webkit-text-stroke:1.25px #e9b44c59;font-size:2.75rem;font-weight:900;line-height:1;position:absolute;top:1.35rem;right:1.25rem}.cp-card__icon{place-items:center;width:4rem;height:4rem;margin-bottom:.3rem;display:grid;position:relative}.cp-card__ring{border:2px dashed #e9b44c99;border-radius:50%;position:absolute;inset:0}.cp-card__glyph{background:var(--color-oro);width:3.1rem;height:3.1rem;color:var(--color-ink);border-radius:50%;place-items:center;display:grid;box-shadow:0 8px 22px -8px #e9b44ccc}.cp-card:hover,.cp-card:focus-within{border-color:#e9b44cb3;box-shadow:0 0 0 1px #e9b44c80,0 22px 44px -18px #e9b44c80}.cp-card:hover:before{opacity:1}@media (prefers-reduced-motion:no-preference){.cp-card__ring{animation:14s linear infinite cp-turn}.cp-card:nth-child(2n) .cp-card__ring{animation-direction:reverse}.cp-card:hover{translate:0 -6px}.cp-card:hover:before{transform:scale(1.25)}.cp-card:hover .cp-card__ring{animation-duration:3s}}@keyframes cp-turn{to{transform:rotate(360deg)}}