.story-vignette{position:relative;isolation:isolate;display:grid;place-items:center;width:calc(100% + 48px);min-height:620px;margin:25px -24px 40px;padding:55px 24px;overflow:hidden;overflow:clip;background:#181818}
.story-vignette:focus{outline:none}
.story-vignette-backdrop{position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1)}
.story-vignette::before{content:'';position:absolute;inset:0;z-index:-1;background:#0000003b;pointer-events:none}
.story-handkerchief{position:relative;display:block;container-type:inline-size;width:min(500px,80%);aspect-ratio:1;color:#743247;text-decoration:none;filter:drop-shadow(0 12px 22px #00000055);touch-action:manipulation;transition:translate .25s ease}
.story-handkerchief:focus-visible{outline:2px solid white;outline-offset:7px;border-radius:2px}
.story-handkerchief-art{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;user-select:none}
.story-handkerchief-title{position:absolute;left:28%;top:22%;width:44%;margin:0;text-align:center;font:400 16cqw/.98 'Pinyon Script',cursive;text-wrap:balance;font-synthesis:none}
.story-handkerchief-cupid{position:absolute;left:40.5%;top:54%;width:19%;height:auto;aspect-ratio:534/692;pointer-events:none;user-select:none}
.story-handkerchief-link{position:absolute;left:22%;top:80%;width:56%;display:flex;align-items:center;justify-content:center;gap:9px;min-height:24px;font:400 clamp(11px,3cqw,16px)/1.2 'EB Garamond',Georgia,serif;letter-spacing:.1em;text-transform:uppercase;text-align:center}
@media(hover:hover) and (pointer:fine){.story-handkerchief:hover{translate:0 -4px}}
@media(max-width:700px){.story-vignette{width:calc(100% + 28px);min-height:480px;margin:20px -14px 28px;padding:48px 14px}.story-handkerchief{width:94%;max-width:460px}.story-vignette-backdrop{object-position:57% center}}
@media(prefers-reduced-motion:reduce){.story-handkerchief{transition:none}.story-handkerchief:hover{translate:none}}