/* A framed photograph leaves the flying-letter canvas free to move. */
body.contact-story{background-image:radial-gradient(ellipse at 25% 45%,#7c98701c,transparent 65%)}
body.contact-story.is-dusk{background-image:radial-gradient(ellipse at 25% 45%,#60785410,transparent 65%)}
.contact-photo{position:fixed;z-index:0;left:calc(50% - 475px);top:50%;transform:translateY(-50%) rotate(-2deg);width:285px;margin:0;transition:opacity .5s,transform .7s;pointer-events:none}
.contact-photo img{display:block;width:100%;height:auto;border:9px solid #d9d8cb;box-shadow:0 20px 70px #0009}
.contact-photo figcaption{font:10px/1.7 'IBM Plex Mono',monospace;color:#b2b4a9;margin-top:16px;text-align:center}
.contact-story .term{margin-left:360px;transition:translate .7s cubic-bezier(.5,0,.2,1),margin-left .7s cubic-bezier(.5,0,.2,1)}
.contact-story.is-sending .term{margin-left:0}
.contact-story.is-sending .contact-photo{opacity:0;transform:translateY(-50%) rotate(-2deg) scale(.96)}
@media(max-width:1000px){.contact-photo{left:calc(50% - 390px);width:230px}.contact-story .term{margin-left:270px;width:min(500px,calc(100vw - 32px))}}
@media(max-width:800px){html:has(.contact-story){height:auto}.contact-story{height:auto;min-height:100svh;overflow-y:auto;padding:26px 0 80px}.contact-photo{position:relative;left:auto;top:auto;transform:rotate(-2deg);width:126px;margin:0 auto 28px}.contact-photo img{border-width:5px}.contact-photo figcaption{font-size:9px;margin-top:10px}.contact-story .stage{position:relative;inset:auto;display:block}.contact-story .term{margin:0 auto;width:calc(100% - 32px);max-width:560px}.contact-story.is-sending .term{margin-left:auto}.contact-story.is-sending .contact-photo{transform:rotate(-2deg) scale(.96)}.contact-story.is-printing .term{translate:var(--dragX,0px) calc(var(--dragY,0px) + 80px)}}
@media(prefers-reduced-motion:reduce){.contact-photo,.contact-story .term{transition:none}}