/* Physical prints and correspondence, using the portfolio's paper and brass. */
[data-spatial-object]{--object-x:0;--object-y:0;--object-scroll:.5;--object-open:.65}
.brand-object{position:relative;min-width:0;padding:22px 15px 18px;perspective:1100px;isolation:isolate}
.brand-object::before{content:"";position:absolute;left:6%;right:4%;bottom:2%;height:13%;border-radius:50%;background:#46523825;filter:blur(19px);transform:rotate(-5deg) scaleY(.4);pointer-events:none}
.brand-object .brand-images{transform-style:preserve-3d;transform:rotateX(calc(-3deg + var(--object-y) * -4deg)) rotateY(calc(-5deg + var(--object-x) * 6deg)) translateY(calc((.5 - var(--object-scroll)) * 15px));transition:transform .65s cubic-bezier(.2,.7,.25,1);overflow:visible}
.brand-object .brand-images::before{content:"";position:absolute;inset:0 0 25px;border-radius:7px;background:#d0cfbd;transform:rotateZ(-4deg) translateZ(-9px);box-shadow:0 2px 0 #c1c3b1,0 4px 0 #b3b8a4,0 6px 0 #a6ad98,9px 23px 34px #35432629;pointer-events:none}
.brand-object .brand-photo-main{position:relative;transform:rotateZ(-4deg) translateZ(2px);outline:9px solid #f3f1e6;outline-offset:-1px;box-shadow:0 1px 0 9px #d7d8c5,0 4px 0 9px #c7cbb6,0 7px 0 8px #b8bea8,12px 25px 34px #303c2426;transition:transform .8s cubic-bezier(.2,.7,.25,1),box-shadow .8s}
.brand-object .brand-photo-inset{z-index:2;right:-30px;bottom:2px;width:39%;border-color:#f3f1e6;border-width:7px;transform:translateZ(38px) rotateZ(9deg) rotateY(-7deg) translateY(calc((.5 - var(--object-scroll)) * 18px));box-shadow:1px 2px 0 #d3d5c1,2px 4px 0 #c1c7af,8px 16px 24px #29331f3b;transition:transform .8s cubic-bezier(.2,.7,.25,1),box-shadow .8s}
.brand-object .brand-images::after{content:"";position:absolute;z-index:3;left:42%;top:-9px;width:25px;height:13px;border:1px solid #a69a6a;border-radius:7px 7px 3px 3px;background:linear-gradient(110deg,#d6c68e,#f4e5ba 35%,#968556 70%,#d8c794);box-shadow:0 3px 3px #2b301c42;transform:rotateZ(-4deg) translateZ(17px);pointer-events:none}
.brand-object:focus-within .brand-photo-main{transform:rotateZ(-6deg) translateZ(13px)}
.brand-object:focus-within .brand-photo-inset{transform:translate3d(5px,-12px,65px) rotateZ(12deg) rotateY(-7deg)}

.contact-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.75fr);align-items:center;gap:7%;min-height:340px}
.contact-copy{position:relative;min-width:0;z-index:2}
.contact-copy .contact-bottom{display:flex;flex-direction:column;gap:23px}
.contact-copy .contact-actions{display:flex;flex-direction:column;align-items:flex-start;max-width:100%}
.contact-copy .email-link{font-size:clamp(19px,2vw,25px);gap:18px;overflow-wrap:anywhere}
.contact-object{--envelope-open:var(--object-open);position:relative;display:grid;place-items:center;width:min(100%,360px);height:290px;justify-self:end;color:#354329;perspective:1000px;isolation:isolate;border-radius:24px;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.contact-object::before{content:"";position:absolute;left:12%;right:12%;bottom:13%;height:13%;background:#35422942;filter:blur(17px);border-radius:50%;transform:scaleY(.35) rotate(-8deg);transition:transform .8s,opacity .8s;pointer-events:none}
.contact-object:focus-visible{outline:2px solid #4f6238;outline-offset:8px}
.envelope{position:relative;display:block;width:90%;aspect-ratio:1.42;transform-style:preserve-3d;transform:rotateZ(-9deg) rotateX(calc(10deg + var(--object-y) * -6deg)) rotateY(calc(-14deg + var(--object-x) * 11deg)) translateY(calc((.5 - var(--object-scroll)) * 18px));transition:transform .8s cubic-bezier(.2,.7,.25,1);pointer-events:none}
.envelope-back{position:absolute;inset:28% 0 0;border-radius:7px;background:linear-gradient(135deg,#8b986a,#596a44);box-shadow:0 2px 0 #83925f,0 4px 0 #6c7b4e,0 7px 0 #55663e,8px 16px 27px #28341d21;transform:translateZ(-4px)}
.envelope-letter{position:absolute;inset:12% 7% 7%;display:block;padding:18px 19px;background:linear-gradient(125deg,#fffdf4,#f0eddf);border:1px solid #d8d7c4;border-radius:4px;box-shadow:0 0 1px #fff inset,0 3px 6px #25301a21;transform:translate3d(0,calc(var(--envelope-open) * -34%),4px);transition:transform 1s cubic-bezier(.2,.7,.25,1);transform-origin:50% 100%}
.envelope-letter>span{display:block;font:600 clamp(14px,1.5vw,19px) var(--display);letter-spacing:-.4px;color:#354329;white-space:nowrap}
.envelope-letter>i{display:block;height:2px;width:76%;margin-top:14px;background:#b4bba4;border-radius:2px}
.envelope-letter>i:nth-of-type(2){width:91%;margin-top:9px;background:#d0d2bf}
.envelope-letter>i:nth-of-type(3){width:58%;margin-top:9px;background:#d0d2bf}
.envelope-letter>b{position:absolute;right:16px;top:14px;font:400 25px var(--font);color:#7d8c5d}
.envelope-flap{position:absolute;inset:28% 0 auto;height:43%;display:block;background:linear-gradient(160deg,#bec89a,#8d9d69 68%,#6c7c4d);clip-path:polygon(0 0,100% 0,100% 5%,50% 100%,0 5%);transform-origin:50% 0;transform:translateZ(-1px) rotateX(calc(var(--envelope-open) * -168deg));transition:transform 1s cubic-bezier(.2,.7,.25,1);backface-visibility:visible;filter:drop-shadow(0 2px 1px #45553155)}
.envelope-front{position:absolute;inset:28% 0 0;display:block;border-radius:4px 4px 7px 7px;background:linear-gradient(146deg,transparent 49.7%,#e2e6c9 50% 50.5%,transparent 50.8%),linear-gradient(34deg,transparent 49.7%,#b9c29a 50% 50.5%,transparent 50.8%),linear-gradient(145deg,#b7c493,#91a16c);clip-path:polygon(0 0,50% 48%,100% 0,100% 100%,0 100%);transform:translateZ(11px);box-shadow:0 -1px 0 #d1d8b5 inset,0 -4px 7px #6e7f4d44 inset}
.envelope-seal{position:absolute;left:43%;top:60%;display:grid;place-items:center;width:43px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 36% 28%,#e0c98b,#b69b5f 51%,#9c824c 76%,#d4ba79 78%);border:1px solid #cbb47a;box-shadow:0 0 0 3px #ad965e,0 0 0 4px #d2bc82,0 4px 5px #35422246,inset 0 0 0 2px #e1cc93;transform:translateZ(18px);font:italic 600 20px var(--display);letter-spacing:-2px;text-indent:-2px;color:#66512b;text-shadow:0 1px 0 #e2cc91}
.contact-object:focus-visible{--envelope-open:1}
.contact-object:focus-visible .envelope{transform:rotateZ(-5deg) rotateX(5deg) rotateY(-6deg) translateY(-10px)}

@media(hover:hover) and (pointer:fine){
  .brand-object:hover .brand-photo-main{transform:rotateZ(-6deg) translateZ(13px);box-shadow:0 1px 0 9px #d7d8c5,0 4px 0 9px #c7cbb6,0 7px 0 8px #b8bea8,16px 32px 38px #303c242b}
  .brand-object:hover .brand-photo-inset{transform:translate3d(5px,-12px,65px) rotateZ(12deg) rotateY(-7deg)}
  .contact-object:hover{--envelope-open:1}
  .contact-object:hover .envelope{transform:rotateZ(-5deg) rotateX(calc(5deg + var(--object-y) * -7deg)) rotateY(calc(-6deg + var(--object-x) * 11deg)) translateY(-10px)}
  .contact-object:hover::before{transform:scaleY(.3) rotate(-5deg);opacity:.8}
}
@media(max-width:1100px){
  .contact-layout{gap:4%;grid-template-columns:minmax(0,1.25fr) minmax(235px,.7fr)}
  .contact-object{height:260px}
  .brand-object{padding:17px 7px 15px}
}
@media(max-width:760px){
  .brand-object{padding:17px 18px 21px 9px;margin:0 3px}
  .brand-object .brand-images{margin-right:23px;transform:rotateX(-2deg) rotateY(-4deg)}
  .brand-object .brand-photo-main{outline-width:7px;box-shadow:0 1px 0 7px #d7d8c5,0 3px 0 7px #c7cbb6,0 5px 0 6px #b8bea8,7px 20px 25px #303c2426}
  .brand-object .brand-photo-inset{right:-21px;width:37%;border-width:5px;transform:translateZ(25px) rotateZ(8deg)}
  .brand-object .brand-images::before{inset:0 0 27px}
  .brand-object .brand-images::after{width:21px;height:11px;top:-8px}
  .contact-layout{grid-template-columns:minmax(0,1fr);gap:8px;min-height:0}
  .contact-copy{width:100%}
  .contact-copy .contact-bottom{gap:20px}
  .contact-copy .email-link{font-size:20px;gap:12px}
  .contact-object{--object-open:.8;width:255px;height:215px;margin:13px auto 0;justify-self:center}
  .envelope{transform:rotateZ(-9deg) rotateX(7deg) rotateY(-10deg)}
  .envelope-letter{padding:14px}
  .envelope-letter>span{font-size:15px}
  .envelope-letter>b{font-size:21px;right:12px;top:10px}
  .envelope-letter>i{margin-top:12px}
  .envelope-seal{width:34px;font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  [data-spatial-object]{--object-x:0!important;--object-y:0!important;--object-scroll:.5!important;--object-open:.85!important}
  .brand-object .brand-images,.brand-object .brand-photo-main,.brand-object .brand-photo-inset,.contact-object .envelope,.contact-object .envelope-letter,.contact-object .envelope-flap{transition:none!important}
  .brand-object .brand-images{transform:rotateX(-2deg) rotateY(-3deg)!important}
  .brand-object .brand-photo-main{transform:rotateZ(-4deg) translateZ(2px)!important}
  .brand-object .brand-photo-inset{transform:translateZ(28px) rotateZ(8deg)!important}
  .contact-object{--envelope-open:.85!important}
  .contact-object .envelope{transform:rotateZ(-7deg) rotateX(7deg) rotateY(-10deg)!important}
}
@media print{
  .brand-object{padding:10px}
  .brand-object .brand-images,.brand-object .brand-photo-main,.brand-object .brand-photo-inset{transform:none!important;box-shadow:none}
  .contact-object{display:none}
  .contact-layout{display:block;min-height:0}
}