.x-contact{--envelope-width:600px;--envelope-height:340px;--flap-height:150px;--letter-inset:24px;--letter-bottom:18px;--letter-height:300px;--letter-padding:24px 28px;--letter-title:var(--fs-display);--letter-rise:236px;--letter-shown:calc(var(--letter-height) + var(--letter-bottom) + var(--letter-rise) - var(--envelope-height));--address-x:150px;--address-y:44px;--stamp-x:22px;--stamp-y:22px;--stamp-width:84px;--postmark-width:118px}.x-contact .v-main{flex-direction:column;justify-content:flex-end;align-items:center;min-block-size:auto;padding-block-end:10px;display:flex}.x-contact .x-tilt{inline-size:min(var(--envelope-width), 100%);transition:transform .6s var(--ease-out);will-change:transform;margin-block-start:var(--letter-shown);position:relative}.x-contact .x-envelope{inline-size:100%;block-size:var(--envelope-height);position:relative}.x-contact .x-flap{z-index:1;block-size:var(--flap-height);transform-origin:50% 100%;transition:transform .55s cubic-bezier(.6,0,.3,1);position:absolute;inset-block-end:100%;inset-inline:0;transform:perspective(900px)rotateX(0)}.x-contact .x-envelope.shut .x-flap{transform:perspective(900px)rotateX(-180deg)}.x-contact .x-flap svg{block-size:100%;inline-size:100%;display:block;overflow:visible}.x-contact .x-flap polygon{fill:var(--paper);stroke:var(--ink);stroke-width:1.5px;stroke-linejoin:round;vector-effect:non-scaling-stroke}.x-contact .x-letter{inset-inline:var(--letter-inset);z-index:2;block-size:var(--letter-height);padding:var(--letter-padding);border:1px solid var(--ink);background:var(--paper);visibility:hidden;transition:transform .7s cubic-bezier(.65,0,.35,1),visibility 0s linear .7s;position:absolute;inset-block-end:var(--letter-bottom);transform:translateY(0)}.x-contact .x-envelope.up .x-letter{visibility:visible;transform:translateY(calc(-1 * var(--letter-rise)));transition:transform .8s var(--ease-out)}.x-contact .x-letter p.lbl{margin-block:1em}.x-contact .x-letter h1{margin-block:6px var(--space-4);font:500 var(--letter-title) / .95 var(--font-sans);letter-spacing:-.045em;white-space:nowrap}.x-contact .x-acts{flex-wrap:wrap;gap:10px;display:flex}.x-contact .x-envelope-front{all:unset;z-index:3;box-sizing:border-box;border:1.5px solid var(--ink);background:var(--paper);cursor:pointer;position:absolute;inset:0}.x-contact .x-envelope-front:focus-visible{outline:2px solid var(--ink);outline-offset:4px}.x-contact .x-to{font:500 var(--fs-lead) / 1.25 var(--font-sans);letter-spacing:-.01em;position:absolute;inset-block-end:var(--address-y);inset-inline-start:var(--address-x)}.x-contact .x-to .lbl{margin-block-end:4px;display:block}.x-contact .x-stamp{inline-size:var(--stamp-width);block-size:calc(var(--stamp-width) * 1.2);border:1px dashed var(--ink);background:var(--paper);flex-direction:column;padding:5px;display:flex;position:absolute;inset-block-start:var(--stamp-y);inset-inline-end:var(--stamp-x)}.x-contact .x-picture{border:1px solid var(--ink);color:var(--ink);flex:1;justify-content:center;align-items:flex-end;display:flex;overflow:hidden}.x-contact .x-picture svg{block-size:100%;inline-size:100%}.x-contact .x-value{font:500 7px / 1 var(--font-mono);letter-spacing:.04em;justify-content:space-between;margin-block-start:3px;display:flex}.x-contact .x-postmark{inline-size:var(--postmark-width);opacity:.85;pointer-events:none;position:absolute;inset-block-start:calc(var(--stamp-y) + var(--stamp-width) * .32);inset-inline-end:calc(var(--stamp-x) + var(--stamp-width) * .8)}.x-contact .x-postmark svg{inline-size:100%;overflow:visible}.x-contact .x-postmark circle,.x-contact .x-postmark path{fill:none;stroke:var(--ink);stroke-width:1.3px}.x-contact .x-postmark text{font:500 11px var(--font-mono);letter-spacing:.2em;fill:var(--ink)}.x-contact .x-postmark .x-year{font-size:13px}.x-contact .x-envelope-hint{text-align:center;opacity:0;margin-block:18px 1em;transition:opacity .5s}.x-contact .x-envelope-hint.on{opacity:1}.x-contact .x-hint-tap{display:none}@media (hover:none),(max-width:720px){.x-contact .x-hint-click{display:none}.x-contact .x-hint-tap{display:inline}}@media (min-width:721px) and (max-width:1100px){.x-contact .v-main{justify-content:flex-start;padding-block-end:40px}.x-contact .v-main:before,.x-contact .v-main:after{content:"";flex:1 1 0}.x-contact .v-main:before{min-block-size:var(--letter-shown)}.x-contact .x-tilt{margin-block-start:0}.x-contact{--envelope-width:720px;--envelope-height:410px;--flap-height:180px;--letter-inset:30px;--letter-bottom:24px;--letter-height:360px;--letter-padding:30px 34px;--letter-title:80px;--letter-rise:286px;--address-x:190px;--address-y:56px;--stamp-x:28px;--stamp-y:28px;--stamp-width:104px;--postmark-width:142px}.x-contact .x-acts .v-btn{block-size:48px;padding-block:0;padding-inline:22px}}@media (max-width:720px){.x-contact.v-page{flex-direction:column;min-block-size:100vh;display:flex}.x-contact .v-main{padding-block:var(--space-4) 0;flex:1;justify-content:center}.x-contact{--envelope-width:358px;--envelope-height:250px;--flap-height:96px;--letter-inset:14px;--letter-bottom:12px;--letter-height:226px;--letter-padding:18px;--letter-title:38px;--letter-rise:234px;--address-x:20px;--address-y:22px;--stamp-x:14px;--stamp-y:14px;--stamp-width:68px;--postmark-width:92px}.x-contact .x-tilt{margin-block-start:var(--letter-height)}.x-contact .x-to{font-size:17px}.x-contact .x-acts .v-btn{flex:40%;justify-content:center;padding-block:0;padding-inline:12px}.x-contact .x-acts .v-btn--fill{flex-basis:100%}.x-contact .x-value{justify-content:flex-end}.x-contact .x-value span:first-child{display:none}.x-contact .x-envelope-hint{margin-block-start:14px}}