@font-face{font-family:Maria;src:url('/assets/about/maria.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
.contact-page{--contact-header:88px;--contact-green:#85862c;position:relative;min-height:calc(100svh - var(--contact-header));background:var(--contact-green);color:#30140c;overflow:hidden}
.contact-page__title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
.contact-composition{position:relative;min-height:calc(100svh - var(--contact-header));display:grid;place-items:center;padding:24px}
.envelope{--pocket-top:54%;--pocket-height:46%;--flap-height:calc(var(--pocket-height)*.62);position:relative;width:min(45vw,calc((100svh - var(--contact-header) - 48px)*.78));aspect-ratio:.78;isolation:isolate;perspective:1800px;transform-origin:center 75%;filter:drop-shadow(0 12px 16px #30140c1a)}
.paper-surface{background-color:#e9e0c8;background-image:var(--paper-texture,none),var(--paper-light,linear-gradient(135deg,#f1ebdc,#ded3b7));background-size:180px 180px,100% 100%}
.envelope__back{position:absolute;inset:var(--pocket-top) 0 0;--paper-light:linear-gradient(180deg,#b9a886,#dbceae 48%,#e5d9bd);border-radius:2px;z-index:0}
.envelope__flap{position:absolute;top:calc(var(--pocket-top) - var(--flap-height));left:0;width:100%;height:var(--flap-height);transform-style:preserve-3d;transform-origin:center bottom;z-index:1}
.envelope__flap-face{position:absolute;inset:0;clip-path:polygon(0 100%,2% 91%,44% 5%,47% 1%,50% 0,53% 1%,56% 5%,98% 91%,100% 100%);backface-visibility:hidden}
.envelope__flap-inner{--paper-light:linear-gradient(180deg,#eee6d2 0%,#e7ddc5 42%,#c9b894 85%,#a5916c 100%)}
.envelope__flap-inner::after{content:"";position:absolute;inset:7% 5% 0;clip-path:polygon(0 100%,50% 0,100% 100%);background:linear-gradient(180deg,#d7c8a5,#c4b28b);opacity:.35}
.envelope__flap-outer{transform:rotateY(180deg);--paper-light:linear-gradient(180deg,#e6dbc2,#f0e9d9 55%,#d3c3a4)}
.envelope__letter-window{position:absolute;inset:0;overflow:hidden;z-index:2;pointer-events:none}
.contact-form{position:absolute;top:8%;left:1%;width:98%;min-height:57%;margin:0;padding:clamp(20px,2vw,36px);background:linear-gradient(135deg,#fffcf5,#f5f3eb);box-shadow:0 2px 10px #30140c14;transform:rotate(-1.25deg);transform-origin:50% 50%;pointer-events:auto}
.contact-form__row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.contact-form .contact-form__trap{display:none}
.contact-form label{display:block;min-width:0;margin-bottom:14px;font:400 clamp(22px,1.8vw,34px)/1.25 Maria,cursive;padding-top:.25em}
.contact-form input,.contact-form textarea{display:block;width:100%;min-width:0;margin-top:3px;padding:7px 0;border:0;border-bottom:1px solid transparent;border-radius:0;background:transparent;color:#30140c;font:400 clamp(13px,1.05vw,19px)/1.45 Manrope,Arial,sans-serif;text-transform:none;box-shadow:none}
.contact-form textarea{resize:none;min-height:90px}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#735e52;opacity:1}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-bottom-color:#30140c}
.contact-form__required{margin:0;text-align:center;font-size:12px}
.envelope__fold{position:absolute;inset:var(--pocket-top) 0 0;z-index:3;pointer-events:none}
.envelope__fold-left{clip-path:polygon(0 0,3% 1%,54% 60%,0 100%);--paper-light:linear-gradient(135deg,#f3eddf,#dfd3b8 65%,#b4a17f)}
.envelope__fold-right{clip-path:polygon(100% 0,97% 1%,46% 60%,100% 100%);--paper-light:linear-gradient(225deg,#f0e9d8,#ded1b5 65%,#b8a787)}
.envelope__fold-front{clip-path:polygon(0 100%,.5% 96%,42% 46%,45% 44%,55% 44%,58% 46%,99.5% 96%,100% 100%);--paper-light:linear-gradient(165deg,#fff9e9,#e6dbc3 55%,#daceb1)}
.contact-privacy{position:absolute;z-index:6;bottom:3%;left:13%;width:74%;margin:0;text-align:center;font-size:clamp(11px,.8vw,14px);line-height:1.4}
.contact-privacy span{display:block;margin-bottom:4px;font-weight:650}
.contact-privacy a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.contact-actions{position:absolute;left:calc(50% + min(22.5vw,((100svh - var(--contact-header) - 48px)*.39)) + 4vw);right:3vw;top:48%;transform:translateY(-50%);max-width:340px}
.contact-send,.contact-preview button,.contact-preview-reset{border:0;padding:8px 0;background:transparent;color:inherit;cursor:pointer;text-align:left;font:400 clamp(22px,2vw,36px)/1.4 Maria,cursive}
.contact-send span{display:inline-block;margin-left:8px;font-family:Manrope,sans-serif}
.contact-send:disabled{cursor:default;opacity:.48}
.contact-send:not(:disabled):hover,.contact-preview button:hover,.contact-preview-reset:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.contact-sound{display:flex;align-items:center;gap:7px;margin-top:18px;font-size:12px;cursor:pointer}
.contact-sound input{accent-color:#30140c;width:16px;height:16px}
.contact-preview{margin-top:24px}.contact-preview button{font-family:Manrope,Arial,sans-serif;font-size:14px}.contact-preview p{font-size:11px;margin:3px 0}
.contact-error,.contact-pending{font-size:14px;line-height:1.5;margin-top:18px}.contact-error a{color:inherit;text-decoration:underline}
.contact-test-note{font-size:12px;line-height:1.5;margin-top:16px}
.contact-test-note[hidden]{display:none}
.contact-confirmation{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 6vw;outline:none}
.contact-confirmation[hidden],.contact-preview[hidden],.contact-error[hidden],.contact-pending[hidden],.contact-preview-reset[hidden]{display:none}
.contact-confirmation h2{font:400 clamp(44px,5.7vw,104px)/1.3 Maria,cursive;margin:0;max-width:15em}
.contact-confirmation p{font:400 clamp(18px,2vw,32px)/1.5 Manrope,Arial,sans-serif;margin:0;max-width:28em}
.contact-preview-reset{font:400 14px/1.4 Manrope,Arial,sans-serif;margin-top:36px;text-decoration:underline}
.contact-page:is([data-state="closing"],[data-state="tucking"],[data-state="closed"],[data-state="flying"]) .envelope__flap{z-index:4}
/* The tip passes under the front pocket, while the flap stays above the side folds. */
.contact-page:is([data-state="tucking"],[data-state="closed"],[data-state="flying"]) .envelope__fold-front{z-index:5}
.contact-page[data-state="success"] .contact-composition{display:none}
@media(max-width:1000px){
 .envelope{width:min(58vw,calc((100svh - var(--contact-header) - 110px)*.78))}
 .contact-composition{padding-bottom:100px}
 .contact-actions{position:relative;top:auto;left:auto;right:auto;transform:none;width:min(580px,100%);max-width:none;text-align:center;margin-top:8px}
 .contact-sound{justify-content:center;margin-top:8px}.contact-preview{margin-top:12px}.contact-preview p{display:inline;margin-left:12px}
}
@media(max-width:760px){
 .contact-page{--contact-header:116px}
 .contact-composition{display:flex;flex-direction:column;padding:24px 16px 36px;min-height:calc(100svh - 116px)}
 .envelope{--pocket-top:62%;--pocket-height:38%;width:min(100%,490px);aspect-ratio:.54}
 .contact-form{top:3%;padding:22px 18px;min-height:62%}
 .contact-form__row{gap:12px}.contact-form label{font-size:23px;margin-bottom:13px}.contact-form input,.contact-form textarea{font-size:16px}.contact-form textarea{min-height:100px}
 .contact-privacy{left:9%;width:82%;bottom:4%;font-size:11px}
 .contact-actions{margin-top:20px}.contact-send{font-size:30px}
 .contact-confirmation{min-height:calc(100svh - 116px)}
 .contact-confirmation h2{font-size:48px;line-height:1.4}.contact-confirmation p{font-size:18px;margin-top:12px}
}
@media(prefers-reduced-motion:reduce){.envelope{filter:none}}

.envelope__flap-outer svg,.envelope__fold-front svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#917a5266;stroke-width:5;vector-effect:non-scaling-stroke}
.envelope__fold-front svg{stroke:#aa967144;stroke-width:6}