/* Tactile contact letter, scoped to the contact dialog. */
.popup-mode-contact.project-dialog{background:#103f31;color:#f5eedc;max-width:1050px;border:1px solid #f5eedc22;box-shadow:0 25px 80px #001e1866;scrollbar-gutter:auto}
.popup-mode-contact .close{color:#f5eedc;background:#103f31;border-color:#f5eedc55}
.popup-mode-contact .dialog-inner{padding:45px 30px 20px}
.letter-experience{--paper:#f5eedc;--wine:#732b39;--fold:#e7dac0;position:relative;isolation:isolate;background:radial-gradient(ellipse at 40% 20%,#28634b33,transparent 70%)}
.letter-experience:before,.letter-paper:after,.envelope-back:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.15;background-image:url('/assets/letter-grain.svg');mix-blend-mode:multiply}
.letter-stage{position:relative;min-height:555px;padding:20px 0 110px;perspective:1200px;transition:min-height .8s ease}
.envelope{position:absolute;width:min(560px,88%);height:310px;left:50%;top:95px;transform:translateX(-50%);filter:drop-shadow(0 15px 12px #001d1855);transition:top .9s cubic-bezier(.22,1,.36,1)}
.envelope-back{position:absolute;inset:0;background:linear-gradient(125deg,#f5eedc,#e5d7b9);border:1px solid #d9c9a7}
.envelope-flap{position:absolute;inset:0;background:linear-gradient(175deg,#fff8e9,#e3d4b4);clip-path:polygon(0 0,100% 0,50% 63%);z-index:4;transform-origin:top;filter:drop-shadow(0 3px 2px #58432b44);transition:transform .65s ease,z-index 0s .32s;backface-visibility:visible}
.envelope-front{position:absolute;inset:0;background:linear-gradient(140deg,#eee2c9,#f7efdf);clip-path:polygon(0 0,50% 61%,100% 0,100% 100%,0 100%);z-index:3;border-bottom:1px solid #d0bf9e}
.envelope-front:after{content:'';position:absolute;inset:0;background:linear-gradient(32deg,transparent 49.5%,#cebd9c66 50%,transparent 50.5%),linear-gradient(-32deg,transparent 49.5%,#cebd9c66 50%,transparent 50.5%)}
.envelope-tape{position:absolute;width:65px;height:27px;left:-16px;top:-5px;background:#e9cf87bf;transform:rotate(-36deg);z-index:6;clip-path:polygon(2% 0,97% 4%,100% 94%,0 100%)}
.wax-seal{position:absolute;z-index:7;top:240px;left:50%;width:92px;height:88px;transform:translate(-50%,-50%) rotate(-8deg);border:0;border-radius:44% 52% 43% 48%;background:radial-gradient(circle at 35% 25%,#a74b5a,#732b39 55%,#481322 100%);box-shadow:inset 2px 3px 3px #c77d8977,inset -3px -4px 4px #350e1a99,0 7px 8px #21120f55;cursor:pointer;transition:transform .3s,opacity .25s}
.wax-seal:before{content:'';position:absolute;inset:9px;border-radius:50%;border:2px solid #511725;box-shadow:inset 1px 2px 2px #c17d8866,1px 1px 1px #bd6e7b99}
.wax-seal span{position:relative;font:italic 54px Georgia,serif;color:#4c1725;text-shadow:1px 1px 1px #c0778399}
.wax-seal:hover{transform:translate(-50%,-50%) rotate(-3deg) scale(1.06)}
.letter-invitation{position:absolute;top:440px;width:100%;text-align:center;transition:opacity .2s}
.letter-open-label,.letter-skip{display:block;margin:auto;background:none;border:0;color:#f5eedc;cursor:pointer;min-height:44px}
.letter-open-label{font:29px Georgia,serif}
.letter-skip{font:13px Arial,sans-serif;color:#d3ccad;text-decoration:underline;text-underline-offset:4px;margin-top:10px}
.popup-mode-contact .letter-paper{position:relative;z-index:5;width:min(540px,83%);max-width:none;margin:0 auto;padding:42px 42px 30px;color:#103f31;background:linear-gradient(125deg,#fff8e9,#f1e6ce);box-shadow:0 9px 26px #06251d33;opacity:0;transform:translateY(165px) scale(.94);transition:transform 1s cubic-bezier(.16,1,.3,1) .3s,opacity .45s .3s;clip-path:polygon(0 1%,7% .5%,15% 1%,23% 0,34% .7%,45% 0,57% .6%,69% 0,82% .6%,94% 0,100% .8%,99.7% 99%,88% 99.5%,76% 99%,65% 100%,50% 99.3%,35% 100%,22% 99.5%,10% 100%,0 99%)}
.popup-mode-contact .letter-paper[hidden]{display:none}
.popup-mode-contact .letter-paper .tag{color:#732b39;position:relative;z-index:1}
.popup-mode-contact .letter-paper h2{font:clamp(35px,4.5vw,48px)/1.04 Georgia,serif;letter-spacing:-1.2px;margin:18px 0 24px;position:relative;z-index:1}
.popup-mode-contact .letter-paper p{font:15px/1.7 Arial,sans-serif;position:relative;z-index:1;margin:14px 0}
.popup-mode-contact .letter-paper .contact-actions{position:relative;z-index:1;display:grid;gap:0;margin-top:20px;justify-items:start}
.popup-mode-contact .letter-paper .contact-actions>span{display:none}
.popup-mode-contact .letter-paper .contact-actions a{font:21px Georgia,serif;color:#103f31;padding:5px 0;min-height:44px;border:0;text-decoration:underline;text-underline-offset:4px}
.popup-mode-contact .letter-paper .contact-actions a:hover{color:#732b39}
.popup-mode-contact .letter-paper .letter-signature{text-align:right;font:italic 34px Georgia,serif;transform:rotate(-8deg);margin:8px 0 0}
.letter-open .letter-paper{opacity:1;transform:none}
.letter-open .envelope{top:300px}
.letter-open .envelope-flap{transform:rotateX(180deg);z-index:1}
.letter-open .wax-seal{opacity:0;transform:translate(-50%,-50%) scale(1.15);pointer-events:none}
.letter-open .letter-invitation{opacity:0;visibility:hidden;pointer-events:none}
.letter-instant *{transition:none!important;animation:none!important}
.popup-mode-contact :focus-visible{outline:3px solid #e9cf87;outline-offset:5px}
.popup-mode-contact .letter-paper :focus-visible{outline-color:#732b39}
.popup-mode-contact .letter-paper h2:focus{outline:none}
@media(max-width:600px){.popup-mode-contact.project-dialog{width:calc(100% - 18px);max-height:95svh}.popup-mode-contact .dialog-inner{padding:55px 8px 12px}.letter-stage{min-height:490px;padding-top:18px;padding-bottom:65px}.envelope{height:210px;top:100px;width:88%}.wax-seal{top:203px;width:76px;height:73px}.wax-seal span{font-size:43px}.letter-invitation{top:355px}.letter-open-label{font-size:25px}.popup-mode-contact .letter-paper{width:93%;padding:32px 23px 25px}.popup-mode-contact .letter-paper h2{font-size:37px}.popup-mode-contact .letter-paper p{font-size:14px;line-height:1.7}.letter-open .envelope{top:auto;bottom:0;height:230px;width:99%}.envelope-tape{width:46px;height:23px;left:-4px}.letter-open .envelope-tape{display:none}}

/* Photographic stationery replaces the initial CSS approximations. */
.letter-stage{min-height:555px;padding-top:25px;padding-bottom:105px}
.envelope{width:min(480px,86%);height:auto;aspect-ratio:580/415;top:65px;filter:drop-shadow(0 16px 14px #00160f66);transition:top .8s cubic-bezier(.22,1,.36,1),width .8s}
.envelope-back{border:0;background:transparent url('/assets/letter-envelope-closed.webp') center/100% 100% no-repeat;transition:opacity .35s .2s}
.envelope-back:after,.envelope-front:after,.envelope-tape{display:none}
.envelope-flap{background:transparent url('/assets/letter-envelope-closed.webp') center/100% 100% no-repeat;clip-path:polygon(5% 8%,96% 8%,51% 69%);transform-origin:50% 8%;filter:none;transition:transform .7s cubic-bezier(.4,0,.2,1),opacity .25s .4s;z-index:4}
.envelope-front{inset:auto -3% -2%;height:140%;background:transparent url('/assets/letter-envelope-open.webp') center bottom/100% 100% no-repeat;clip-path:none;border:0;opacity:0;transition:opacity .45s .2s}
.wax-seal{top:280px;width:98px;height:99px;background:transparent url('/assets/letter-wax-z.webp') center/contain no-repeat;border-radius:0;box-shadow:none;filter:drop-shadow(1px 5px 4px #32121766)}
.wax-seal:before,.wax-seal span{display:none}
.letter-invitation{top:440px}
.popup-mode-contact .letter-paper{background:transparent url('/assets/letter-paper-real.webp') center/100% 100% no-repeat;clip-path:none;box-shadow:none;filter:drop-shadow(0 8px 12px #001d1833);padding:45px 44px 35px;width:min(540px,83%)}
.letter-paper:after{display:none}
.letter-open .envelope{top:auto;bottom:5px;width:min(620px,96%)}
.letter-open .envelope-back{opacity:0}
.letter-open .envelope-flap{transform:rotateX(170deg);opacity:0;z-index:4}
.letter-open .envelope-front{opacity:1}
.letter-open .letter-paper{transform:none}
@media(max-width:600px){.letter-stage{min-height:470px;padding:20px 0 75px}.envelope{width:92%;top:80px;aspect-ratio:580/415;height:auto}.wax-seal{top:clamp(185px,48vw,255px);width:76px;height:77px}.letter-invitation{top:355px}.popup-mode-contact .letter-paper{width:96%;padding:35px 28px 28px}.letter-open .envelope{width:100%;height:auto;bottom:0}.letter-open .envelope-front{height:130%}.popup-mode-contact .letter-paper h2{font-size:clamp(31px,8.5vw,38px)}}
@media(max-width:600px){.envelope{width:min(380px,92%)}.wax-seal{top:clamp(190px,calc(66px + 41vw),245px)}.letter-invitation{top:380px}.letter-stage{min-height:490px}}