/* Miłosny list. Coordinates follow the artwork's paper, not the scene center. */
.preview.letter,.theme-letter{--ink:#424426;--accent:#895963;--heading:'Great Vibes',cursive;--reading:'Cormorant Garamond',Georgia,serif}
#shop .preview.letter,.editor .preview.letter,#guest.collection-theme .preview.letter{container-type:inline-size;position:relative;display:block;aspect-ratio:2/3;min-height:0;padding:0!important;border:0;border-radius:3px;background:#f3ebdc!important;overflow:hidden;box-shadow:0 16px 44px #46322118;color:#424426;perspective:1000px}
.letter-copy{position:absolute;text-align:center;color:#424426;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;box-sizing:border-box}
/* Paper runs from x=14% to x=74%; its axis is x=44%. */
.letter-card-copy{inset:30% 29% 33% 17%;gap:3cqw}
.letter-copy small{font:400 2.1cqw/1.5 'Cormorant Garamond',Georgia!important;letter-spacing:.32cqw;margin:0;max-width:100%;color:inherit;text-align:center}
#shop .preview.letter h3,.editor .preview.letter h3,#guest .preview.letter h3{font:400 var(--letter-name,11cqw)/1.15 'Great Vibes',cursive!important;letter-spacing:0;margin:0!important;width:100%;max-width:100%;text-align:center;color:#424426!important}
.letter-name{display:block;overflow-wrap:normal;word-break:normal}
.letter-and{display:block;font-size:.58em;line-height:1.15;margin:.12em 0;text-align:center}
#shop .preview.letter p,.editor .preview.letter p,#guest .preview.letter p{font:400 3cqw/1.5 'Cormorant Garamond',Georgia!important;width:100%;max-width:100%;text-align:center;color:#424426;margin:0;padding:0;background:none}
.letter-scene-back,.letter-scene-front,.letter-card-layer,.letter-card-art,.letter-motion-flap{position:absolute;inset:0;pointer-events:none;background-position:center;background-size:100% 100%;background-repeat:no-repeat}
.letter-scene-back{z-index:0;background-image:url('collections/letter-back-v2.webp')}
.letter-card-layer{z-index:2;transform:translate3d(0,0,0)}
.letter-card-art{background-image:url('collections/letter-card.webp')}
.letter-scene-front{z-index:3;background-image:url('collections/letter-front-v2.webp')}
.letter-motion-flap{z-index:5;background-image:url('collections/letter-flap.webp');transform-origin:50% 55%;transform:rotateX(-90deg);opacity:0;backface-visibility:hidden}
.letter-panel .letter-seal{position:absolute;z-index:6;left:41%;top:70%;width:18%;aspect-ratio:1;background:transparent url('collections/letter-seal.webp') center/contain no-repeat;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 2px 2px #30201455);color:#d1a39c;text-shadow:0 1px 0 #f9ded0,-.5px -.5px 0 #75454e;display:grid;place-items:center;pointer-events:none}
/* Contain calligraphic overhang inside the recessed wax center. */
.letter-panel .letter-seal>span{position:absolute;inset:21% 20%;width:60%;height:58%;display:flex;align-items:center;justify-content:center;overflow:hidden;font:400 3.1cqw/1.35 'Great Vibes',cursive;letter-spacing:-.12cqw;white-space:nowrap;text-align:center;padding:0 .5cqw;box-sizing:border-box}
.letter-interactive:not(.letter-opening) .letter-card-layer{transform:translate3d(0,47%,0)}
.letter-interactive:not(.letter-opening) .letter-motion-flap{transform:rotateX(0deg);opacity:1}
.letter-animating .letter-card-layer,.letter-animating .letter-motion-flap{will-change:transform}
.letter-cover{position:absolute;inset:0;z-index:7;background:none;pointer-events:none}
.letter-cover[hidden]{display:none!important}
.letter-opening .letter-cover{opacity:0}
.letter-open-button{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;color:#424426;font:400 2.4cqw 'Cormorant Garamond';letter-spacing:.3cqw;padding:0 0 3%;display:flex;align-items:flex-end;justify-content:center;gap:8px;text-transform:uppercase;pointer-events:auto;cursor:pointer;touch-action:manipulation}
.letter-open-button:focus-visible{outline:3px solid #762438;outline-offset:-6px}
.letter-open-button:disabled{cursor:wait}
/* Closed-flap inscription, separately anchored to the flap's safe area. */
.letter-address{inset:55% 27% 29%;gap:.8cqw}
.letter-address small{font-size:1.6cqw!important;letter-spacing:.18cqw}
#guest .preview.letter .letter-address h3{font-size:var(--letter-name,7cqw)!important;line-height:1.25!important;white-space:nowrap}
.letter-address .letter-name{display:inline}
.letter-address .letter-and{display:inline;font-size:.7em;margin:0 .16em}
#guest .preview.letter .letter-address p{font-size:2.1cqw!important}
#guest .preview.letter .letter-address h3,#guest .preview.letter .letter-address p,.letter-address small{color:#f0e5c8!important;text-shadow:0 1px 2px #30361b80}
/* The interactive scene retains its layers throughout; no final image swap. */
.letter-panel:not(.letter-interactive) .letter-scene-back{background-image:url('collections/letter.webp')}
.letter-panel:not(.letter-interactive) .letter-motion-flap,.letter-panel:not(.letter-interactive) .letter-scene-front,.letter-panel:not(.letter-interactive) .letter-card-art{visibility:hidden}
#guest.theme-letter .guestActions{background:#f6f0e5}
#guest.theme-letter .wedding-section,#guest.theme-letter .save-date{background:#faf5e9!important;border-color:#85885d55;box-shadow:0 5px 18px #4a42230a}
#guest.theme-letter .wedding-section h2{font-size:clamp(38px,9vw,52px)!important}
#guest.theme-letter .program-row h3,#guest.theme-letter .venue-title,#guest.theme-letter .wedding-faq summary{font-family:'Cormorant Garamond',Georgia!important}
#guest.theme-letter .rsvp-form button,#guest.theme-letter .wedding-link,#guest.theme-letter .secondary{background:#681c35!important}
#guest.theme-letter .letter-message{font:italic 22px/1.7 'Cormorant Garamond',Georgia;max-width:470px;padding:25px;margin:0 auto;color:#424426;text-align:center;overflow-wrap:anywhere}
#guest.theme-letter .wedding-section p,#guest.theme-letter .venue-title{overflow-wrap:anywhere}
.letter-photo-note{font:11px/1.6 Arial;text-align:center;color:#77715f;margin:14px 10px}
@media(prefers-reduced-motion:reduce){.letter-panel *{animation:none!important;transition:none!important}}