.contact-page{min-height:100svh;background:radial-gradient(ellipse at 50% 30%,#303a2f,transparent 65%),#101610;color:#e9e9df}.contact-main{width:100%;max-width:1160px;margin:0 auto;padding:clamp(32px,5vw,72px) clamp(20px,5vw,64px) 72px;min-height:75svh}.letter-intro{text-align:center}.letter-eyebrow{font-size:11px;letter-spacing:.08em;line-height:1.6;color:#abb5a5;margin:0 0 22px}.letter-intro h1{font-size:clamp(27px,3.5vw,48px);font-weight:400;letter-spacing:-.045em;line-height:1.25;margin:0}.envelope-scene{perspective:1400px;padding:70px 0 20px}.envelope{position:relative;width:min(100%,640px);aspect-ratio:1.65;margin:auto;background:#c9cebc;box-shadow:0 32px 64px #0005,0 6px 14px #0004;border-radius:3px;isolation:isolate}.envelope::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(15deg,#00000002 0 1px,transparent 1px 4px);pointer-events:none;z-index:7}.envelope-pocket{position:absolute;inset:0;z-index:3;background:linear-gradient(155deg,#e6e7d8,#d4d8c5);clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);border-radius:3px}.envelope-pocket::after{content:"";position:absolute;inset:0;background:#e5e7d6;clip-path:polygon(0 100%,50% 42%,100% 100%)}.envelope-flap{position:absolute;inset:0 0 43%;background:linear-gradient(#edf0df,#d9decb);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;z-index:4;transition:transform .75s cubic-bezier(.2,.65,.3,1) .25s;backface-visibility:hidden}.envelope-paper{position:absolute;z-index:2;inset:7% 6% 4%;background:#f0f0e4;color:#43503e;display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:36px;text-align:left;font-size:14px;transition:transform .8s ease .55s;box-shadow:0 0 15px #0001}.envelope-address{position:absolute;bottom:10%;left:7%;font-size:clamp(9px,1.15vw,13px);line-height:1.8;text-align:left;color:#4b5444;z-index:5}.wax-seal{position:absolute;z-index:8;left:50%;top:53%;transform:translate(-50%,-50%);width:94px;height:94px;border-radius:50%;filter:drop-shadow(0 5px 5px #0005);cursor:pointer}.wax-seal:focus-visible{outline:2px solid #fff;outline-offset:8px}.seal-half{position:absolute;inset:0;border-radius:46% 52% 47% 49%;background:radial-gradient(ellipse at 35% 23%,#c57756,#903e2b 48%,#6a291d 78%,#a25539);box-shadow:inset 0 2px 3px #efad7d88,inset 0 -4px 5px #481b19aa;display:grid;place-items:center;transition:transform .55s ease,opacity .55s ease}.seal-half::after{content:"";position:absolute;inset:12px;border:1px solid #e7a17a65;border-radius:50%;box-shadow:inset 0 2px 2px #511e2488}.seal-half span{font:28px var(--font);letter-spacing:-3px;color:#562519;text-shadow:0 1px 0 #db956b8c;transform:rotate(-10deg)}.seal-left{clip-path:polygon(0 0,53% 0,45% 28%,57% 48%,44% 72%,51% 100%,0 100%)}.seal-right{clip-path:polygon(53% 0,100% 0,100% 100%,51% 100%,44% 72%,57% 48%,45% 28%)}.seal-crack{position:absolute;inset:0;background:#3c1b19;clip-path:polygon(52% 5%,49% 27%,60% 48%,48% 72%,51% 96%,44% 72%,54% 48%,44% 28%);opacity:0;transition:opacity .12s}.wax-seal:hover .seal-half{filter:brightness(1.1)}.letter-hint{font-size:11px;color:#b2bda9;margin:22px 0 0}.is-opening .seal-crack{opacity:1}.is-opening .seal-left{transform:translate(-26px,20px) rotate(-24deg);opacity:0}.is-opening .seal-right{transform:translate(26px,18px) rotate(22deg);opacity:0}.is-opening .envelope-flap{transform:rotateX(-170deg)}.is-opening .envelope-paper{transform:translateY(-26%)}.is-opening .letter-hint{opacity:0}
.contact-letter{background:linear-gradient(135deg,#edf0df,#e3e8d5);color:#283424;padding:clamp(24px,5vw,64px);box-shadow:0 24px 70px #0004;max-width:880px;margin:0 auto;border:1px solid #f8f9ed66;animation:letter-arrives .65s ease both}.letter-heading{padding-bottom:32px;border-bottom:1px solid #42503d3d;margin-bottom:32px}.letter-heading .letter-eyebrow{color:#66745b}.letter-heading :is(h1,h2){font-weight:400;font-size:clamp(34px,5vw,60px);letter-spacing:-.045em;margin:0 0 18px}.letter-heading :is(h1,h2):focus{outline:none}.letter-heading p:not(.letter-eyebrow){font-size:13px;line-height:1.7}.letter-email{display:inline-block;max-width:100%;margin-top:10px;font-size:clamp(13px,1.6vw,18px);overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:5px}.contact-letter a:hover,.contact-letter button:hover{color:#162b13}.contact-letter fieldset{border:0;padding:0;margin:0 0 24px;min-width:0}.contact-letter legend{font-size:14px;margin-bottom:14px;padding:0}.name-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.contact-letter label{display:block;font-size:14px;line-height:1.6;min-width:0}.contact-letter label span{font-size:12px;color:#78836f}.contact-letter form>label{margin-bottom:24px}.contact-letter input,.contact-letter textarea{display:block;width:100%;border:0;border-bottom:1px solid #64715b;background:transparent;border-radius:0;box-shadow:none;color:#24311f;font:16px/1.6 var(--font);padding:12px 0 8px;min-height:50px}.contact-letter textarea{resize:vertical;min-height:150px}.contact-letter input:focus-visible,.contact-letter textarea:focus-visible{outline:2px solid #294323;outline-offset:4px}.letter-submit-row{display:flex;align-items:center;gap:20px}.letter-submit{background:#183b19;color:#f0f1df;padding:16px 26px;font-size:15px;min-height:50px}.contact-letter .letter-submit:hover{background:#28502b;color:#fff}.letter-send-note{font-size:11px;color:#64715b;line-height:1.7;max-width:32ch}.contact-status{font-size:12px;line-height:1.7;color:#294323}.contact-status:empty{display:none}.letter-signoff{display:flex;justify-content:space-between;align-items:end;gap:20px;border-top:1px solid #42503d30;margin-top:40px;padding-top:24px;font-size:12px;line-height:1.8}.reseal-letter{font-size:11px;text-decoration:underline;text-underline-offset:4px;color:#54624b}.contact-page .roji-footer{background:transparent}@keyframes letter-arrives{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}@media(max-width:540px){.contact-main{padding-inline:16px}.envelope-scene{padding-top:52px}.wax-seal{width:72px;height:72px}.seal-half span{font-size:23px}.seal-half::after{inset:9px}.envelope-paper{padding:18px;font-size:11px}.contact-letter{padding:28px 22px}.name-grid{grid-template-columns:1fr;gap:24px}.letter-submit-row{align-items:flex-start;flex-direction:column;gap:8px}.letter-send-note{margin:0}}@media(prefers-reduced-motion:reduce){.envelope-flap,.envelope-paper,.seal-half,.seal-crack{transition:none}.contact-letter{animation:none}}

/* Fibrous, aged stationery and a poured-wax seal. */
.envelope{background:#c6b793;box-shadow:0 32px 64px #0005,0 6px 14px #0004,inset 0 0 35px #8b6a3430}
.envelope::before{background:url("assets/contact-paper.svg") repeat;opacity:.17;mix-blend-mode:multiply}
.envelope-pocket{background:linear-gradient(155deg,#e4d4b299,#a28b5766),url("assets/contact-paper.svg")}
.envelope-pocket::after{background:linear-gradient(0deg,#b29a6344,transparent 75%),url("assets/contact-paper.svg")}
.envelope-flap{background:linear-gradient(180deg,#f7ebcf55,#a88e5433),url("assets/contact-paper.svg");transition-delay:.75s}
.envelope-paper{background:linear-gradient(#fff5df44,#e6d8b822),url("assets/contact-paper.svg");transition-delay:1s}
.contact-letter{background:linear-gradient(135deg,#f5eed8bb,#e8dfc6bb),url("assets/contact-paper.svg");border-color:#f9ecd3;box-shadow:0 24px 70px #0004,inset 0 0 70px #96774517}
.wax-seal{width:110px;height:110px;filter:drop-shadow(1px 5px 3px #30150988)}
.seal-half{border-radius:0;background:url("assets/contact-wax.svg") center/100% 100% no-repeat;box-shadow:none;transition:transform .38s cubic-bezier(.2,.85,.25,1)}
.seal-half::after{display:none}.seal-half span{display:none}
.seal-left{clip-path:polygon(0 0,51% 0,49% 19%,54% 32%,47% 45%,52% 59%,46% 72%,50% 85%,48% 100%,0 100%)}
.seal-right{clip-path:polygon(51% 0,100% 0,100% 100%,48% 100%,50% 85%,46% 72%,52% 59%,47% 45%,54% 32%,49% 19%)}
.is-opening .seal-left{transform:translate(-7px,-1px) rotate(-3deg);opacity:1}
.is-opening .seal-right{transform:translate(7px,1px) rotate(3deg);opacity:1}
.seal-crack,.is-opening .seal-crack{display:none}
@media(max-width:540px){.wax-seal{width:86px;height:86px}}
@media(prefers-reduced-motion:reduce){.seal-half,.envelope-flap,.envelope-paper{transition:none}}

/* Distressed ink impression, followed by folding the letter closed. */
.letter-submit-row{position:relative}
.correspondence-stamp{position:absolute;width:clamp(150px,26vw,230px);height:auto;right:0;bottom:46px;pointer-events:none;opacity:0;transform:rotate(-12deg) scale(1.8);mix-blend-mode:multiply;z-index:2}
.is-stamped .correspondence-stamp{animation:roji-ink-stamp .48s cubic-bezier(.16,.8,.25,1) forwards}
@keyframes roji-ink-stamp{0%{opacity:0;transform:translateY(-34px) rotate(-16deg) scale(1.8);filter:blur(3px)}55%{opacity:.88;transform:translateY(2px) rotate(-12deg) scale(.97);filter:blur(0)}75%{transform:translateY(0) rotate(-12deg) scale(1.025)}100%{opacity:.84;transform:translateY(0) rotate(-12deg) scale(1);filter:blur(0)}}
.contact-letter.is-closing{animation:roji-letter-close .5s ease-in forwards;transform-origin:50% 10%}
@keyframes roji-letter-close{to{opacity:0;transform:perspective(1000px) rotateX(12deg) translateY(45px) scale(.92)}}
.letter-submit:disabled{cursor:default;opacity:.6}
.letter-delivery-note{max-width:48ch;margin:24px auto 0;font-size:12px;line-height:1.8;color:#c0cab8}
@media(max-width:540px){.correspondence-stamp{bottom:95px;width:160px}}
@media(prefers-reduced-motion:reduce){.is-stamped .correspondence-stamp{animation:none;opacity:.84;transform:rotate(-12deg)}.contact-letter.is-closing{animation:none}}

.contact-page{background:#191a18 url("assets/contact-dark-texture.webp") center center / cover no-repeat}.contact-page::before{content:none}

/* Layered paper grain, fold impressions and softly lifted edges. */
.contact-letter{background:linear-gradient(176deg,#fffaf02b,transparent 35%,#80633e12),linear-gradient(to bottom,transparent 32.8%,#91734c19 33%,#fff8e74d 33.3%,transparent 33.7%,transparent 66%,#91734c14 66.3%,#fff8e747 66.6%,transparent 67%),url("assets/contact-paper.svg");border:1px solid #d1c1a2;border-radius:2px 3px 2px 4px;box-shadow:0 2px 3px #0005,0 12px 24px #0005,0 35px 70px #0006,inset 0 0 50px #866b3620,inset 0 1px 1px #fff5;color:#393426}.envelope{box-shadow:0 3px 5px #0006,0 18px 28px #0005,0 38px 60px #0005,inset 0 0 35px #8b6a3430}.envelope-pocket{background:linear-gradient(155deg,#fff7df30,#84694424),url("assets/contact-paper.svg")}.envelope-pocket::after{background:linear-gradient(0deg,#a5885122,transparent 75%),url("assets/contact-paper.svg")}.envelope-flap{background:linear-gradient(180deg,#fff8e64d,#88704822),url("assets/contact-paper.svg");filter:drop-shadow(0 2px 1px #57432144)}.contact-letter input,.contact-letter textarea{border-bottom-color:#786c5066;color:#393426}.contact-letter label{color:#49412f}

/* Visible vintage fibre stock and aged paper edges. */
.contact-page .contact-letter,.contact-page .envelope-paper{background-color:#ddc69a;background-image:linear-gradient(90deg,#7650242b,transparent 8%,transparent 92%,#76502430),linear-gradient(0deg,#79532230,transparent 10%,transparent 90%,#79532220),linear-gradient(to bottom,transparent 32.6%,#86613333 33%,#fff0bf55 33.4%,transparent 34%,transparent 66%,#86613330 66.5%,#fff0bf55 66.9%,transparent 67.5%),url("assets/contact-vintage-paper.svg");background-size:100% 100%,100% 100%,100% 100%,420px 420px;border-color:#b49a6c;box-shadow:0 2px 3px #0007,0 18px 35px #0006,0 40px 75px #0007,inset 0 0 45px #76502433}.contact-page .envelope-pocket,.contact-page .envelope-pocket::after,.contact-page .envelope-flap{background-image:linear-gradient(145deg,#fff1ca22,#78512426),url("assets/contact-vintage-paper.svg");background-size:100% 100%,420px 420px}.contact-page .envelope::before{background:url("assets/contact-vintage-paper.svg") repeat;background-size:420px;opacity:.27;mix-blend-mode:multiply}.contact-page .contact-letter{border-radius:3px 1px 4px 2px}.contact-page .letter-intro h1{color:#eee4cf}

/* Clean laid paper: fine fibres without stains or mottled aging. */
.contact-page .contact-letter,.contact-page .envelope-paper{background-color:#e9ddc2;background-image:linear-gradient(to bottom,transparent 33%,#96836114 33.2%,#fff9e833 33.5%,transparent 34%,transparent 66%,#96836114 66.3%,#fff9e833 66.6%,transparent 67%),url("assets/contact-vintage-paper.svg");background-size:100% 100%,420px 420px;border-color:#cbbd9f;box-shadow:0 2px 3px #0005,0 18px 35px #0005,0 40px 75px #0005,inset 0 0 12px #927d5010}.contact-page .envelope-pocket,.contact-page .envelope-pocket::after,.contact-page .envelope-flap{background-image:linear-gradient(145deg,#fff8e71a,#786b5010),url("assets/contact-vintage-paper.svg")}.contact-page .envelope::before{opacity:.08}

/* User-supplied natural paper; overscan keeps the printed border outside the surface. */
.contact-page .contact-letter,.contact-page .envelope-paper,.contact-page .envelope-pocket,.contact-page .envelope-pocket::after,.contact-page .envelope-flap{background-color:#f3eedf;background-image:url("assets/contact-natural-paper.webp");background-repeat:no-repeat;background-position:center;background-size:110% 110%;border-color:#d8cdb7}.contact-page .envelope::before{background:none;opacity:0}.contact-page .contact-letter{color:#393426;box-shadow:0 2px 4px #0006,0 20px 45px #0006,inset 0 0 8px #b6a27a15}.contact-page .envelope-flap{filter:drop-shadow(0 2px 2px #57432133)}

/* Defined paper edges and envelope folds. */
.contact-page .contact-letter{border:1px solid #a99470;box-shadow:0 0 0 1px #f8f1df80,inset 0 0 0 1px #fff8e7,0 3px 4px #0009,0 18px 38px #0008,0 40px 70px #0005}.contact-page .envelope{outline:1px solid #ae9871;box-shadow:0 0 0 2px #eadfc155,0 4px 5px #0009,0 22px 42px #0008}.contact-page .envelope-paper{border:1px solid #ae9871;box-shadow:0 2px 8px #49392355}.contact-page .envelope-flap{filter:drop-shadow(0 3px 1px #5b452866)}.contact-page .envelope-pocket{filter:drop-shadow(0 -1px 1px #6c543d66)}

.contact-page .envelope-fold-lines{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;transition:opacity .2s}.is-opening .envelope-fold-lines{opacity:0}.contact-page .contact-letter{border:2px solid #aa9471;outline:1px solid #f5ead5;outline-offset:-5px}

.contact-page .seal-half{background-image:url("assets/contact-wax-textured.svg")}.contact-page .wax-seal{filter:drop-shadow(1px 3px 2px #35110b88)}

/* Cast shadows outside the clipped flap and beneath the raised wax. */
.contact-page .envelope::after{content:"";position:absolute;inset:3px 0 0;height:59%;background:linear-gradient(180deg,transparent 65%,#38281870);clip-path:polygon(0 0,100% 0,50% 100%);filter:blur(3px);z-index:3;pointer-events:none;transform:translateY(6px);transition:opacity .4s}.contact-page .is-opening .envelope::after{opacity:0}.contact-page .wax-seal{overflow:visible;background:transparent;box-shadow:none;filter:drop-shadow(0 2px 1px #2b0b08cc) drop-shadow(3px 7px 4px #2c170a88)}.contact-page .seal-half{filter:contrast(1.2) saturate(1.1)}.contact-page .envelope-fold-lines{filter:drop-shadow(0 2px 1px #3e2b1b66)}

/* Natural paper edges: no drawn outlines. */
.contact-page .contact-letter{border:0;outline:none;border-radius:2px;box-shadow:0 2px 3px #0003,0 15px 32px #0005,0 35px 65px #0004}.contact-page .envelope{outline:none;border:0;box-shadow:0 3px 5px #0004,0 20px 40px #0006}.contact-page .envelope-paper{border:0;outline:none;box-shadow:0 2px 6px #49392333}.contact-page .envelope-pocket{filter:none;background-image:linear-gradient(155deg,#fff9ec08,#59482c12),url("assets/contact-natural-paper.webp")}.contact-page .envelope-flap{filter:none;background-image:linear-gradient(180deg,#fffaf014,transparent 65%,#6b573718),url("assets/contact-natural-paper.webp")}.contact-page .envelope::after{inset:0;top:4px;height:57%;background:#3728192e;filter:blur(3px);transform:translateY(3px)}

.contact-page .seal-half{background-image:url("assets/contact-wax-burgundy.svg");filter:none}.contact-page .wax-seal{filter:drop-shadow(0 2px 1px #160509cc) drop-shadow(3px 6px 3px #21100a88)}

/* Keep the cast shadow attached to the lifting flap. */
.contact-page .envelope::after{transform-origin:top center;transition:transform .75s cubic-bezier(.2,.65,.3,1) .75s,opacity .75s ease .75s,filter .75s ease .75s}
.contact-page .is-opening .envelope::after{transform:translateY(2px) scaleY(.08);opacity:.25;filter:blur(6px)}
.contact-page .envelope-flap{backface-visibility:visible}
.contact-page .seal-half{background-image:url("assets/contact-wax-monogram.svg")}
@media(prefers-reduced-motion:reduce){.contact-page .envelope::after{transition:none}}

/* Linen paper supplied for the envelope and letter. */
.contact-page .contact-letter,.contact-page .envelope-paper,.contact-page .envelope-pocket,.contact-page .envelope-pocket::after,.contact-page .envelope-flap{background-color:#f7f7f3;background-image:url("assets/contact-linen-paper.webp");background-size:110% 110%;background-position:center;background-repeat:no-repeat}
/* Drop the flap behind the letter only once it has rotated past the hinge. */
.contact-page .is-opening .envelope-flap{animation:flap-behind-letter .001s step-end 1s forwards}
@keyframes flap-behind-letter{to{z-index:1}}
@media(prefers-reduced-motion:reduce){.contact-page .is-opening .envelope-flap{animation:none;z-index:1}}