.iv-opening[data-opening=ivory-letter]{color:#6d5944;background:radial-gradient(ellipse at 50% 30%,#fffdf7,#ece3d4)}
[data-opening=ivory-letter] .il-scene{position:relative;display:block;width:min(82vw,460px);perspective:1400px}
[data-opening=ivory-letter] .il-shadow{position:absolute;inset:35% 3% 20%;background:#81664c;filter:blur(25px);opacity:.22;transform:rotate(-3deg)}
[data-opening=ivory-letter] .il-envelope{position:absolute;display:block;top:27%;left:0;width:100%;height:60%;background:#ded0ba;border:1px solid #cebea5;box-shadow:0 4px 5px #70543a12,0 24px 40px #6b4c3424;perspective:1400px;transform:rotate(-3deg);transition:transform 2.5s cubic-bezier(.22,.8,.24,1)}
[data-opening=ivory-letter] .il-liner{position:absolute;inset:5px;background:repeating-linear-gradient(45deg,transparent 0 9px,#ac917222 10px 11px),repeating-linear-gradient(-45deg,#f6ecdb 0 9px,#ac917233 10px 11px)}
[data-opening=ivory-letter] .il-letter{position:absolute;display:flex;inset:6% 6% 4%;align-items:stretch;background:#fffdf8;padding:7px;box-shadow:0 -2px 12px #614b3215;z-index:2;transition:transform 1.5s cubic-bezier(.22,.8,.24,1) 1.5s}
[data-opening=ivory-letter] .il-letter-border{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;border:1px solid #b29c7866;padding:8px;overflow:hidden}
[data-opening=ivory-letter] .il-pretitle{font:500 7px/1.5 'Be Vietnam Pro',sans-serif;letter-spacing:.18em;text-transform:uppercase}
[data-opening=ivory-letter] .il-names{font:400 clamp(17px,4.5vw,27px)/1.05 'Cormorant Garamond',Georgia,serif;display:block;width:100%;overflow-wrap:anywhere;margin:6px 0}
[data-opening=ivory-letter] .il-names i{display:block;font-size:.55em;margin:3px 0;font-weight:400}
[data-opening=ivory-letter] .il-date{font:400 8px/1.4 'Be Vietnam Pro',sans-serif;letter-spacing:.06em}
[data-opening=ivory-letter] .il-sprig{width:70px;height:16px;flex-shrink:0;margin-top:4px}
[data-opening=ivory-letter] .il-front{position:absolute;inset:0;background:linear-gradient(170deg,#fbf6e9,#e7dcc7);clip-path:polygon(0 100%,0 20%,50% 66%,100% 20%,100% 100%);z-index:5}
[data-opening=ivory-letter] .il-fold-left,[data-opening=ivory-letter] .il-fold-right{position:absolute;inset:0;z-index:6;pointer-events:none}
[data-opening=ivory-letter] .il-fold-left{background:linear-gradient(35deg,#e6d9c3,#f9f4e6);clip-path:polygon(0 0,51% 60%,0 100%)}
[data-opening=ivory-letter] .il-fold-right{background:linear-gradient(-35deg,#dfd0b8,#fbf6eb);clip-path:polygon(100% 0,49% 60%,100% 100%)}
[data-opening=ivory-letter] .il-flap{position:absolute;inset:-1px -1px 29%;background:linear-gradient(170deg,#fff9ec,#e8dac2);clip-path:polygon(0 0,100% 0,50% 100%);z-index:7;transform-origin:50% 0;backface-visibility:visible;transition:transform 1.2s ease .65s,z-index 0s 1.25s;filter:drop-shadow(0 2px 1px #9a846645)}
[data-opening=ivory-letter] .il-flap-inner{position:absolute;inset:8px 14px 10px;border-top:1px solid #b8a17c66;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(150deg,transparent 49.5%,#ac977633 50%,transparent 50.5%)}
[data-opening=ivory-letter] .il-band{position:absolute;top:0;bottom:0;left:46%;width:8%;background:linear-gradient(90deg,#b3a08599,#e8ddcacc,#b8a486aa);z-index:8;transition:transform .85s ease .1s,opacity .65s ease .1s}
[data-opening=ivory-letter] .il-seal{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:20%;aspect-ratio:1;border-radius:48% 52% 46% 54%;z-index:9;background:radial-gradient(circle at 30% 24%,#d5b882,#b49762 55%,#8c7042);box-shadow:2px 5px 7px #74512d4d,inset 1px 2px 3px #f1dba8,inset -2px -2px 4px #6c542d;transition:transform .7s ease,opacity .45s ease .2s;color:#785b32}
[data-opening=ivory-letter] .il-seal svg{position:absolute;width:100%;height:100%}
[data-opening=ivory-letter] .il-seal>span{font:italic 400 clamp(13px,3vw,20px)/1 Georgia,serif;letter-spacing:-.06em;color:#76592f;text-shadow:0 1px #edce9566}
[data-opening=ivory-letter] .il-address{position:relative;display:block;width:100%;margin-top:4px;font:400 8px/1.7 'Be Vietnam Pro',sans-serif;letter-spacing:.08em}
[data-opening=ivory-letter] .il-address strong{display:block;overflow-wrap:anywhere;font:italic 400 clamp(19px,4vw,25px)/1.2 'Cormorant Garamond',Georgia,serif;letter-spacing:0;margin:4px 0}
[data-opening=ivory-letter] .il-address>span{display:block;font-size:8px}
[data-opening=ivory-letter]:is([data-state=opening],[data-state=leaving],[data-state=open]) .il-seal{transform:translate(-50%,-90%) rotate(-15deg) scale(1.14);opacity:0}
[data-opening=ivory-letter]:is([data-state=opening],[data-state=leaving],[data-state=open]) .il-band{transform:translateY(90%);opacity:0}
[data-opening=ivory-letter]:is([data-state=opening],[data-state=leaving],[data-state=open]) .il-flap{transform:rotateX(178deg);z-index:1}
[data-opening=ivory-letter]:is([data-state=opening],[data-state=leaving],[data-state=open]) .il-letter{transform:translateY(-61%)}
[data-opening=ivory-letter]:is([data-state=opening],[data-state=leaving],[data-state=open]) .il-envelope{transform:rotate(0deg) translateY(8%)}
@media(max-height:700px){[data-opening=ivory-letter] .il-scene{width:min(78vw,350px)}}
@media(max-height:520px){[data-opening=ivory-letter] .il-scene{width:min(65vw,300px)}}
@media(prefers-reduced-motion:reduce){[data-opening=ivory-letter] *{transition:none!important;animation:none!important}}

[data-opening=ivory-letter] .il-long-names .il-letter-border{padding:5px}
[data-opening=ivory-letter] .il-long-names .il-names{font-size:clamp(12px,3.3vw,18px);margin:5px 0;line-height:1.12}
[data-opening=ivory-letter] .il-long-names .il-sprig{height:15px;margin-top:2px}
[data-opening=ivory-letter] .il-long-names .il-address{font-size:7px}
[data-opening=ivory-letter] .il-long-names .il-address strong{font-size:clamp(14px,3.3vw,19px);line-height:1.15}

[data-opening=ivory-letter] .il-paper-space{display:block;position:relative;width:100%;aspect-ratio:1.04}
