/* Original paper illustration; isolated from the invitation's existing layout. */
.italian-letter{--letter-ready:1;position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;padding:48px 24px 30px;border:0;background:transparent;color:var(--ink,#414b36);overflow:hidden;flex-direction:column;align-items:center;justify-content:center;gap:0;isolation:isolate}
.italian-letter:not([open]){display:none!important}.italian-letter[open]{display:flex}
.italian-letter::backdrop{background:transparent}
html:has(.italian-letter[open]){overflow:hidden;scrollbar-gutter:stable}
.letter-backdrop{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 18% 8%,#dce0cb70,transparent 43%),radial-gradient(ellipse at 90% 85%,#d8c5a877,transparent 48%),#f5f1e7}
.letter-backdrop::before,.letter-backdrop::after{content:'';position:absolute;width:180px;height:250px;background:url('/art/italian-olive.svg') center/contain no-repeat;opacity:.15;pointer-events:none}
.letter-backdrop::before{left:4%;bottom:8%;transform:rotate(-30deg)}.letter-backdrop::after{right:3%;top:6%;transform:rotate(150deg)}
.letter-skip{position:absolute;top:26px;right:4%;z-index:10}.letter-skip button{border:0;border-bottom:1px solid #a3a58e;background:transparent;color:var(--ink);padding:10px 0;font:11px var(--sans,Arial);cursor:pointer}.letter-skip span{margin-left:15px}
.letter-heading{text-align:center;position:relative;z-index:1;margin-bottom:68px}
.letter-heading>p:first-child{font:9px var(--sans,Arial);letter-spacing:3px;color:#72785f;margin-bottom:17px}.letter-heading h2{font:400 58px/1.1 var(--serif,Georgia);letter-spacing:-1.2px}.letter-heading>p:last-child{font:12px/1.8 var(--sans,Arial);color:#6b715f;margin-top:18px}
.letter-stage{width:min(560px,calc(100vw - 64px));position:relative;perspective:1200px;flex:none}
.letter-envelope{position:relative;width:100%;aspect-ratio:1.58;transform-style:preserve-3d}
.letter-envelope-back{position:absolute;inset:0;border-radius:4px;background:#dfd3bc;box-shadow:0 32px 55px -22px #4d422a66,0 5px 10px #56483124}
.letter-card{position:absolute;inset:7% 7% 4%;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(105deg,#faf7ec,#fffdf6 45%,#eee8d9);border:1px solid #d9cfb8;box-shadow:0 3px 14px #4b422a25;padding:24px;transform-origin:center;will-change:transform}
.letter-card-rule{position:absolute;inset:11px;border:1px solid #c2c5ac;pointer-events:none}.letter-card-label{font:8px var(--sans,Arial);letter-spacing:2px;margin-bottom:14px}.letter-card-names{position:relative;font:400 45px/.96 var(--serif,Georgia);letter-spacing:-.8px;max-width:100%;overflow-wrap:anywhere}.letter-card-names>span{display:block}.letter-card-names i{display:block;font-size:25px;margin:4px 0;color:#956f51}.letter-card-date{font:9px/1.6 var(--sans,Arial);letter-spacing:1px;margin-top:18px}.letter-card-signature{font:italic 19px var(--serif,Georgia);color:#8c7153;margin-top:14px}
.letter-pocket-left,.letter-pocket-right,.letter-pocket-bottom{position:absolute;inset:0;z-index:4;pointer-events:none}
.letter-pocket-left{clip-path:polygon(0 0,56% 56%,0 100%);background:linear-gradient(135deg,#ece3d0,#ddcfb5);filter:drop-shadow(1px 0 1px #9e8f7640)}
.letter-pocket-right{clip-path:polygon(100% 0,44% 56%,100% 100%);background:linear-gradient(225deg,#f0e7d4,#e0d2b8)}
.letter-pocket-bottom{clip-path:polygon(0 100%,0 98%,50% 43%,100% 98%,100% 100%);background:linear-gradient(0deg,#ebe0c9,#f5ecda);border-radius:0 0 4px 4px}
.letter-pocket-bottom::after{content:'';position:absolute;inset:0;background:linear-gradient(32deg,transparent 49.7%,#b9aa8c44 49.9%,transparent 50.2%)}
.letter-flap{position:absolute;inset:0 0 43%;z-index:5;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(180deg,#f8f0e0,#e5d7bc);transform-origin:50% 0;backface-visibility:visible;filter:drop-shadow(0 2px 1px #83745630);will-change:transform}
.letter-wax{position:absolute;z-index:6;top:43%;left:50%;width:82px;height:82px;margin-left:-41px;border-radius:47% 53% 48% 52% / 55% 45% 55% 45%;background:radial-gradient(ellipse at 35% 25%,#879276,#5a684b 68%,#424d35);box-shadow:inset 0 0 0 3px #768262,inset 1px 3px 3px #d2dab062,inset -2px -3px 5px #26351c80,2px 5px 7px #443b2c55;color:#c4cdad;transform:rotate(-12deg)}
.letter-wax svg{width:100%;height:100%;padding:8px;filter:drop-shadow(0 1px 0 #2a3718)}
.letter-address{position:absolute;z-index:5;inset:auto 9% 8%;text-align:center;pointer-events:none}.letter-address p{font:italic 28px/1.15 var(--serif,Georgia);margin-bottom:9px;color:#6b7358}.letter-address>span{display:block;font:18px/1.2 var(--serif,Georgia);letter-spacing:.3px;overflow-wrap:anywhere}
.letter-actions{position:relative;text-align:center;margin-top:47px;z-index:7}.letter-open{display:flex;align-items:center;justify-content:space-between;gap:46px;min-width:270px;border:1px solid #414b36;background:#414b36;color:#faf7ec;padding:19px 25px;font:12px var(--sans,Arial);cursor:pointer;box-shadow:0 5px 15px #414b3612}.letter-open:hover{background:#566146}.letter-open:disabled{cursor:default}.letter-actions>p{font:8px var(--sans,Arial);letter-spacing:2px;margin-top:20px;color:#6b715f}
.italian-letter button:focus-visible{outline:2px solid #826344;outline-offset:5px}
.italian-letter[data-long-letter] .letter-card-names{font-size:28px;line-height:1.05}.italian-letter[data-long-letter] .letter-address>span{font-size:14px}.italian-letter[data-long-letter] .letter-card-signature{display:none}
@media(max-width:700px){.italian-letter{padding:64px 20px 28px}.letter-skip{top:16px;right:23px}.letter-heading{margin-bottom:67px}.letter-heading h2{font-size:42px}.letter-heading>p:first-child{font-size:8px;letter-spacing:2.5px}.letter-heading>p:last-child{font-size:11px}.letter-stage{width:min(370px,calc(100vw - 44px))}.letter-wax{width:62px;height:62px;margin-left:-31px;top:41%}.letter-card{padding:16px}.letter-card-label{font-size:6px;letter-spacing:1.5px;margin-bottom:8px}.letter-card-names{font-size:29px}.letter-card-names i{font-size:18px;margin:2px 0}.letter-card-date{font-size:7px;letter-spacing:.5px;margin-top:11px}.letter-card-signature{font-size:14px;margin-top:7px}.letter-address{bottom:7%}.letter-address p{font-size:23px;margin-bottom:7px}.letter-address>span{font-size:15px}.letter-actions{margin-top:40px}.letter-open{min-width:260px;font-size:11px;padding:18px 23px}.letter-backdrop::before,.letter-backdrop::after{width:110px;height:160px}.italian-letter[data-long-letter] .letter-card-names{font-size:20px}.italian-letter[data-long-letter] .letter-card-label{display:none}.italian-letter[data-long-letter] .letter-address>span{font-size:11px}.italian-letter[data-long-letter] .letter-address p{font-size:19px}}
@media(max-height:670px){.italian-letter{justify-content:flex-start;overflow:auto;padding-top:58px}.letter-heading{margin-bottom:38px}.letter-heading>p:last-child{display:none}.letter-stage{width:min(400px,calc(100vw - 48px))}.letter-actions{margin-top:25px;padding-bottom:20px}}
@media(prefers-reduced-motion:reduce){.italian-letter[open]{display:none!important}.italian-letter *{animation:none!important;transition:none!important}}

/* Only personalized preview starts with empty identities while IndexedDB loads. */
.italian-summer .cover h1:has(>span:empty){visibility:hidden}
.letter-replay[hidden]{display:none!important}
@media(max-width:700px){.personal-toolbar .letter-replay{grid-column:1/-1}}
/* Screen-reader landing point is a heading, not an interactive control. */
.italian-summer #couple-names[tabindex="-1"]:focus{outline:none}