.connect-letter{--letter-paper:#fff9ed;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:30px 18px;border:0;background:transparent;color:#242427;overflow:auto;overscroll-behavior:contain;font-family:'DM Sans',sans-serif}
.connect-letter::backdrop{background:rgba(21,30,65,.85);backdrop-filter:blur(9px)}
.connect-letter[open]{display:flex;align-items:center;justify-content:center}
.letter-scene{position:relative;perspective:1400px;width:min(100%,650px);margin:auto;isolation:isolate;padding:48px 24px 35px}
.letter-close{position:absolute;right:0;top:0;z-index:6;border:1px solid #fff9ed80;border-radius:25px;padding:9px 17px;background:#fff9ed;color:#242427;cursor:pointer;font:500 14px 'DM Sans',sans-serif;display:flex;gap:15px;align-items:center}
.letter-close span{font-size:23px;line-height:1}.letter-close:hover{background:#e5ed79}.connect-letter :focus-visible{outline:3px solid #e95739;outline-offset:5px}
.letter-orbit{position:absolute;inset:15% -9%;border:1px solid #fff9ed30;border-radius:50%;transform:rotate(-23deg);pointer-events:none;z-index:-2}
.letter-envelope{position:absolute;left:0;right:0;bottom:5px;height:57%;transform:rotate(-4deg);z-index:-1;filter:drop-shadow(0 20px 30px #0004);pointer-events:none;transform-style:preserve-3d}
.envelope-back{position:absolute;inset:0;background:#d9432a;border:1px solid #24242740;border-radius:5px}
.envelope-flap{position:absolute;inset:0 0 auto;height:58%;background:#f18d70;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transform:rotateX(180deg);backface-visibility:visible}
.envelope-pocket{position:absolute;inset:0;background:linear-gradient(145deg,#ec7757,#e95739);clip-path:polygon(0 0,50% 47%,100% 0,100% 100%,0 100%);border-radius:4px}
.letter-seal{position:absolute;bottom:22px;left:calc(50% - 25px);background:#e5ed79;border:1px solid #24242760;color:#304ab5;border-radius:50%;width:50px;height:50px;display:grid;place-items:center;font-size:33px}
.letter-paper{position:relative;z-index:2;background:var(--letter-paper);background-image:repeating-linear-gradient(0deg,transparent,transparent 7px,#b8915210 8px);border:1px solid #24242755;padding:30px 38px 24px;box-shadow:0 8px 0 #efe3ce,0 9px 0 #24242740,0 24px 50px #0003;transform:rotate(1deg);transform-origin:50% 100%}
.letter-letterhead{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #24242755;padding-bottom:12px;font-size:12px;letter-spacing:.12em;font-weight:600}.letter-letterhead>span:last-child{color:#e95739;font-size:32px;line-height:1}
.letter-salutation{margin:22px 0 12px;font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;font-style:italic;color:#304ab5}
.connect-letter h2{font:600 clamp(33px,4vw,48px)/1.03 'Space Grotesk',sans-serif;letter-spacing:-.055em;margin:0 0 18px}.connect-letter h2 em{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;color:#304ab5;font-size:1.16em}
.letter-message{font-size:16px;line-height:1.75;margin:0 0 20px;max-width:48ch}
.letter-links{border-top:1px solid #24242735}.letter-links a{display:flex;align-items:center;gap:16px;padding:16px 0;text-decoration:none;color:#242427;border-bottom:1px solid #24242735;transition:color .2s,transform .2s}.letter-links a:hover{color:#304ab5;transform:translateX(4px)}.letter-links a>span:last-child{min-width:0}.letter-link-icon{flex:none;width:40px;height:40px;display:grid;place-items:center;border:1px solid #24242760;border-radius:50%;font-size:23px;background:#e5ed79}.letter-links a:last-child .letter-link-icon{background:#eec3d4}.letter-links small{display:block;font-size:11px;letter-spacing:.07em;line-height:1.6}.letter-links strong{display:block;font-size:18px;font-weight:500;line-height:1.6}.letter-address{display:block;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.letter-signoff{display:flex;align-items:center;justify-content:space-between;margin-top:20px;font-size:14px;line-height:1.7}.letter-signoff strong{display:block;font:italic 32px 'Cormorant Garamond',Georgia,serif;color:#304ab5}.letter-postmark{border:2px solid #304ab570;border-radius:50%;width:70px;height:70px;display:grid;place-content:center;text-align:center;font-size:10px;line-height:1.25;letter-spacing:.1em;color:#304ab5;transform:rotate(-14deg)}.letter-postscript{font-size:10px;letter-spacing:.1em;margin:15px 0 0;color:#555}
@media(max-width:600px){.connect-letter{padding:14px 12px}.letter-scene{padding:44px 7px 24px}.letter-paper{padding:23px 21px 20px}.letter-salutation{margin-top:20px;font-size:24px}.letter-message{font-size:16px;line-height:1.75}.letter-links a{gap:10px}.letter-link-icon{width:32px;height:32px;font-size:20px}.letter-links strong{font-size:17px}.letter-address{font-size:13px}.letter-letterhead{font-size:11px;letter-spacing:.05em}.letter-orbit{inset:20% 0}.letter-signoff{margin-top:15px}.letter-postscript{font-size:10px;letter-spacing:.02em}.letter-close{right:5px}.letter-envelope{bottom:0}.letter-postmark{width:60px;height:60px}}
/* Sculpted cobalt stationery, with separate lining, folded panels and foil details. */
.connect-letter{overflow-x:hidden}
.connect-letter::backdrop{background:rgba(16,23,43,.88);backdrop-filter:blur(12px)}
.letter-orbit{border-color:#e5ed7920;inset:20% -6%;transform:rotate(-18deg)}
.letter-envelope{left:50%;right:auto;bottom:4px;width:94%;height:300px;transform:translateX(-50%) rotate(-2deg);z-index:1;filter:drop-shadow(0 24px 28px #0005);transform-style:preserve-3d}
.envelope-back{border-radius:12px;background:linear-gradient(145deg,#243b97,#16276a);border:1px solid #7183cd;box-shadow:inset 0 0 0 5px #2d4190}
.envelope-lining{position:absolute;inset:8px;border-radius:7px;background:repeating-linear-gradient(45deg,#cfda76 0 1px,#e5ed79 1px 10px);box-shadow:inset 0 5px 20px #17245655}
.envelope-flap{inset:-1px -1px auto;height:63%;background:linear-gradient(165deg,#5269c6,#304ab5 65%,#273e9b);clip-path:polygon(0 0,100% 0,100% 7%,52% 100%,48% 100%,0 7%);border-radius:12px 12px 0 0;transform:rotateX(180deg);filter:drop-shadow(0 2px 2px #1115)}
.envelope-flap-line{position:absolute;inset:6px;background:#e5ed7938;clip-path:polygon(0 0,50% 94%,100% 0,100% 1%,50% 96%,0 1%)}
.envelope-pocket{inset:0;border-radius:12px;background:linear-gradient(175deg,#3b54af,#21377e);clip-path:polygon(0 0,50% 57%,100% 0,100% 100%,0 100%);box-shadow:inset 0 -1px 0 #9cadd055}
.envelope-fold-left,.envelope-fold-right{position:absolute;inset:0;border-radius:12px;pointer-events:none}
.envelope-fold-left{background:linear-gradient(145deg,#4962b5,#304790);clip-path:polygon(0 0,52% 58%,0 100%);box-shadow:inset 1px 0 0 #aec0ff80}
.envelope-fold-right{background:linear-gradient(225deg,#304b9e,#223779);clip-path:polygon(100% 0,48% 58%,100% 100%);box-shadow:inset -1px 0 0 #aec0ff60}
.letter-seal{left:auto;right:27px;bottom:60px;width:48px;height:54px;border-radius:4px;background:#e5ed79;color:#253b83;box-shadow:3px 3px 0 #14245c;border:1px solid #eff5aa;font:600 19px 'Space Grotesk',sans-serif;display:flex;align-items:center;justify-content:center;gap:2px;transform:rotate(7deg)}
.letter-seal>span{position:absolute;top:2px;right:4px;font-size:13px}
.envelope-wordmark{position:absolute;left:28px;bottom:69px;color:#fff9ed;font:500 18px 'Space Grotesk',sans-serif;letter-spacing:.05em}.envelope-wordmark>span{display:block;font:10px 'DM Sans',sans-serif;letter-spacing:.2em;margin-top:7px;color:#e5ed79}
.envelope-edition{position:absolute;left:28px;right:28px;bottom:22px;display:flex;justify-content:space-between;color:#fff9edb0;font:9px 'DM Sans',sans-serif;letter-spacing:.1em;border-top:1px solid #b5c2ff40;padding-top:12px}
.letter-paper{z-index:2}
@keyframes modernEnvelope{
  0%{opacity:0;transform:translateX(-50%) translateY(-100px) rotateX(24deg) rotate(-9deg) scale(.86);z-index:3}
  24%,48%{opacity:1;transform:translateX(-50%) translateY(-155px) rotateX(8deg) rotate(-4deg) scale(.94);z-index:3}
  55%{z-index:1}
  100%{opacity:1;transform:translateX(-50%) translateY(0) rotateX(0) rotate(-2deg) scale(1);z-index:1}
}
@keyframes modernFlap{from{transform:rotateX(0)}to{transform:rotateX(180deg)}}
@keyframes modernLetter{
  0%{opacity:0;transform:translateY(180px) rotateX(12deg) rotate(-4deg) scale(.62);clip-path:inset(0 0 55% 0)}
  15%{opacity:1}
  60%{opacity:1;transform:translateY(-18px) rotateX(-2deg) rotate(1deg) scale(.98);clip-path:inset(0)}
  100%{opacity:1;transform:translateY(0) rotateX(0) rotate(1deg) scale(1);clip-path:inset(-40px -50px -60px -50px)}
}
@keyframes noteAppear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes modernLetterReturn{
  from{opacity:var(--paper-current-opacity,1);transform:var(--paper-current-transform,rotate(1deg));clip-path:inset(-40px -50px -60px -50px)}
  65%{opacity:1;clip-path:inset(0 0 45% 0)}
  to{opacity:0;transform:translateY(180px) rotateX(12deg) rotate(-4deg) scale(.62);clip-path:inset(0 0 100% 0)}
}
@keyframes modernEnvelopeReturn{
  0%,40%{transform:var(--envelope-current-transform,translateX(-50%) rotate(-2deg));z-index:1}
  45%{z-index:3}
  100%{transform:translateX(-50%) translateY(-155px) rotateX(8deg) rotate(-4deg) scale(.94);z-index:3}
}
@keyframes modernSeal{from{transform:var(--flap-current-transform,rotateX(180deg))}to{transform:rotateX(0)}}
@keyframes letterDismiss{0%,80%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes modernBackdrop{0%,80%{background:rgba(16,23,43,.88);backdrop-filter:blur(12px)}to{background:transparent;backdrop-filter:blur(0)}}
@keyframes noteAway{to{opacity:0;transform:translateY(3px)}}
.connect-letter[open] .letter-envelope{animation:modernEnvelope 2.1s cubic-bezier(.22,.65,.25,1) both}
.connect-letter[open] .envelope-flap{animation:modernFlap .65s .45s cubic-bezier(.3,.6,.2,1) both}
.connect-letter[open] .letter-paper{animation:modernLetter 1.1s 1s cubic-bezier(.2,.7,.25,1) both}
.connect-letter[open] .letter-paper>*{animation:noteAppear .35s 1.8s ease both}
.connect-letter[open] .letter-links{animation-delay:1.9s}
.connect-letter[open] .letter-signoff,.connect-letter[open] .letter-postscript{animation-delay:2s}
.connect-letter[open].is-closing .letter-paper{animation:modernLetterReturn .9s .05s cubic-bezier(.4,0,.3,1) both;pointer-events:none}
.connect-letter[open].is-closing .letter-paper>*{animation:noteAway .2s ease both}
.connect-letter[open].is-closing .letter-envelope{animation:modernEnvelopeReturn 1.15s cubic-bezier(.3,.6,.3,1) both}
.connect-letter[open].is-closing .envelope-flap{animation:modernSeal .5s 1.12s ease-in-out both}
.connect-letter[open].is-closing .letter-scene{animation:letterDismiss 1.95s ease both;pointer-events:none}
.connect-letter[open].is-closing::backdrop{animation:modernBackdrop 1.95s ease both}
@media(max-width:600px){.letter-envelope{height:230px;width:96%}.envelope-wordmark{left:20px;font-size:15px;bottom:62px}.envelope-wordmark>span{font-size:8px;letter-spacing:.13em}.letter-seal{right:20px;bottom:58px;width:38px;height:44px;font-size:16px}.envelope-edition{left:20px;right:20px;font-size:8px;letter-spacing:0;bottom:18px}.letter-orbit{inset:25% 0}}
@media(prefers-reduced-motion:reduce){.connect-letter[open] .letter-paper,.connect-letter[open] .letter-paper>*,.connect-letter[open] .letter-envelope,.connect-letter[open] .envelope-flap,.connect-letter[open].is-closing .letter-scene,.connect-letter[open].is-closing::backdrop{animation:none}.letter-links a{transition:none}.letter-envelope{transform:translateX(-50%) rotate(-2deg)}}