@import "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500&display=swap";.invitation-card{box-sizing:border-box;background:linear-gradient(135deg,#fffcf7 0%,#f5f0e6 100%);border-radius:4px;flex-direction:column;justify-content:center;width:100%;height:560px;margin:0 auto;padding:40px 60px;display:flex;position:relative;overflow:hidden;box-shadow:0 20px 40px #00000014,inset 0 0 0 1px #fff9}.invitation-card:before{content:"";opacity:.6;pointer-events:none;border:1px solid #d4af37;position:absolute;inset:15px}.invitation-card:after{content:"";pointer-events:none;border:1px solid #d4af3733;position:absolute;inset:20px}.invitation-eyebrow{text-align:center;letter-spacing:6px;color:#8c7a5a;text-transform:uppercase;z-index:1;margin-bottom:16px;font-family:Jost,sans-serif;font-size:11px;font-weight:500;position:relative}.invitation-title{text-align:center;color:#2c3539;letter-spacing:1px;z-index:1;margin-bottom:24px;font-family:Cormorant Garamond,serif;font-size:32px;font-weight:400;line-height:1.3;position:relative}.invitation-name{text-align:center;background:linear-gradient(90deg,#7a5c14,#b38e36,#7a5c14);-webkit-text-fill-color:transparent;color:#8a6b22;z-index:1;filter:drop-shadow(0 2px 3px #0000001a);-webkit-background-clip:text;margin-bottom:16px;padding:10px 0;font-family:Cormorant Garamond,serif;font-size:64px;font-style:italic;font-weight:600;position:relative}.invitation-divider{opacity:.8;z-index:1;justify-content:center;align-items:center;margin-bottom:24px;display:flex;position:relative}.invitation-divider:before,.invitation-divider:after{content:"";background:linear-gradient(90deg,#0000,#d4af37,#0000);width:140px;height:1px}.invitation-divider span{color:#d4af37;margin:0 15px;font-size:12px;display:inline-block}.invitation-details{z-index:1;justify-content:center;gap:60px;margin-bottom:30px;display:flex;position:relative}.invitation-detail{text-align:center;flex:1;max-width:300px;position:relative}.invitation-detail:first-child:after{content:"";background:#d4af3766;width:1px;height:80%;position:absolute;top:10%;right:-30px}.invitation-label{letter-spacing:3px;text-transform:uppercase;color:#8c7a5a;margin-bottom:8px;font-family:Jost,sans-serif;font-size:11px;font-weight:500}.invitation-value{color:#2c3539;margin:0 auto;font-family:Playfair Display,serif;font-size:22px;line-height:1.5}.invitation-rsvp{text-align:center;color:#5a5a5a;z-index:1;margin-bottom:16px;font-family:Jost,sans-serif;font-size:14px;line-height:1.6;position:relative}.invitation-guest-name{color:#2c3539;margin-bottom:8px;font-family:Cormorant Garamond,serif;font-size:26px;font-weight:500;display:block}.invitation-closing{text-align:center;color:#8c7a5a;z-index:1;font-family:Cormorant Garamond,serif;font-size:19px;font-style:italic;font-weight:400;position:relative}*{box-sizing:border-box;margin:0;padding:0}body{background:#ede7da url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");margin:0;font-family:JetBrains Mono,monospace}.view-container{justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex;position:relative;overflow:hidden}.envelope-container{cursor:pointer;z-index:10;perspective:1200px;width:600px;height:400px;position:relative}.is-open.view-container .envelope-container{cursor:default}.envelope-container.no-hover{pointer-events:none}.envelope-back{z-index:1;background:#e0e0e0;border-radius:4px;transition:opacity .8s,transform 1s;position:absolute;inset:0;box-shadow:0 20px 50px #00000026}.envelope-back .letter-preview{z-index:2;background:#fbf8f1;border:1px solid #b7975c;position:absolute;inset:15px;box-shadow:inset 0 0 10px #0000000d}.envelope-back.fading{opacity:0;pointer-events:none;transform:translateY(200px)}.envelope-front{z-index:3;pointer-events:none;transition:opacity .8s,transform 1s;position:absolute;inset:0}.envelope-front.fading{opacity:0;transform:translateY(200px)}.fold.left{z-index:3;border-top:200px solid #0000;border-bottom:200px solid #0000;border-left:300px solid #ededed;position:absolute;top:0;left:0}.fold.right{z-index:3;border-top:200px solid #0000;border-bottom:200px solid #0000;border-right:300px solid #ededed;position:absolute;top:0;right:0}.fold.bottom{z-index:4;filter:drop-shadow(0 -4px 10px #0000000f);border-bottom:240px solid #f5f5f5;border-left:300px solid #0000;border-right:300px solid #0000;position:absolute;bottom:0;left:0}.flap-wrapper{transform-origin:top;z-index:5;filter:drop-shadow(0 8px 12px #0000001f);will-change:transform, opacity;width:100%;height:260px;transition:transform 1.5s ease-in-out,opacity .4s,filter .5s;position:absolute;top:0;left:0}.envelope-container:not(.no-hover):hover .flap-wrapper{transform:perspective(1200px)rotateX(15deg)}.flap-triangle{border-top:260px solid #fff;border-left:300px solid #0000;border-right:300px solid #0000;width:0;height:0}.flap-text{color:#b7975c;text-transform:uppercase;letter-spacing:3px;pointer-events:none;font-family:JetBrains Mono,monospace;font-size:14px;font-weight:600;animation:2s infinite pulse;position:absolute;top:190px;left:50%;transform:translate(-50%)}.flap-wrapper.flap-opening{filter:none;pointer-events:none;transform:perspective(1200px)rotateX(180deg)}.flap-wrapper.flap-hidden{opacity:0;z-index:0;pointer-events:none;transition:opacity .3s;transform:perspective(1200px)rotateX(180deg)}.letter-slide{z-index:2;will-change:transform;transition:transform 1.5s cubic-bezier(.25,.46,.45,.94),z-index;position:absolute;bottom:10px;left:50%;transform:translate(-50%)translateY(0)}.letter-slide.rising{transform:translate(-50%)translateY(-250px)}.letter-slide.expanding{z-index:20;transform:translate(-50%)translateY(-250px)}.letter-scale{transform-origin:bottom;will-change:transform;justify-content:center;width:840px;transition:transform 1.5s cubic-bezier(.2,.8,.2,1);display:flex;transform:translateY(0)scale(.68)}.letter-scale.expanded{transform:translateY(340px)scale(1)}@media (width<=900px){.letter-scale.expanded{transform:translateY(300px)scale(.85)}}@media (width<=650px){.envelope-container{width:340px;height:230px}.fold.left{border-top:115px solid #0000;border-bottom:115px solid #0000;border-left:170px solid #ededed}.fold.right{border-top:115px solid #0000;border-bottom:115px solid #0000;border-right:170px solid #ededed}.fold.bottom{border-bottom:140px solid #f5f5f5;border-left:170px solid #0000;border-right:170px solid #0000}.flap-wrapper{height:150px}.flap-triangle{border-top:150px solid #fff;border-left:170px solid #0000;border-right:170px solid #0000}.flap-text{top:110px}.letter-scale{transform:translateY(0)scale(.38)}.letter-slide.rising{transform:translate(-50%)translateY(-150px)}.letter-scale.expanded{transform:translateY(140px)scale(.42)}}.guest-label{z-index:6;text-align:center;color:#2d3748;pointer-events:none;flex-direction:column;align-items:center;width:80%;display:flex;position:absolute;top:55%;left:50%;transform:translate(-50%,-50%)}.guest-label .eyebrow-text{letter-spacing:4px;color:#96723c;text-transform:uppercase;margin-bottom:12px;font-size:13px;font-weight:600;display:block}.guest-label .guest-name{color:#1a202c;border-bottom:2px solid #c9a66b;margin-bottom:16px;padding-bottom:12px;font-family:JetBrains Mono,monospace;font-size:26px;font-weight:700}.guest-label .click-hint{color:#718096;font-size:13px;font-weight:500;animation:2s infinite pulse}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.card.landscape.compact{background:#fbf8f1 url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");border:1px solid #b7975c;width:840px;padding:40px;position:relative;box-shadow:0 20px 50px #00000026}.card.landscape.compact:before{content:"";pointer-events:none;border:1px solid #b7975c;position:absolute;inset:12px}.corner{border:2px solid #16233f;width:34px;height:34px;position:absolute}.corner.tl{border-bottom:none;border-right:none;top:4px;left:4px}.corner.tr{border-bottom:none;border-left:none;top:4px;right:4px}.corner.bl{border-top:none;border-right:none;bottom:4px;left:4px}.corner.br{border-top:none;border-left:none;bottom:4px;right:4px}.card-content{align-items:stretch;gap:40px;padding:10px;display:flex}.card-left{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.school-logo{width:100px;height:auto;margin-bottom:20px}.card-divider-vertical{background:#b7975c80;width:1px;margin:10px 0}.card-right{flex-direction:column;flex:1.2;justify-content:space-between;display:flex}.eyebrow{text-align:center;letter-spacing:4px;color:#96723c;text-transform:uppercase;margin-bottom:8px;font-size:11px;font-weight:600}h1{text-align:center;color:#16233f;margin-bottom:12px;font-family:JetBrains Mono,monospace;font-size:32px;font-weight:800;line-height:1.2}.school-name{text-align:center;color:#16233f;letter-spacing:1px;margin-bottom:30px;font-size:13px;font-weight:600;line-height:1.5}.name-block{border-top:1px solid #b7975c4d;width:80%;padding-top:20px}.name{text-align:center;color:#16233f;margin-bottom:8px;font-size:28px;font-weight:800}.major{text-align:center;color:#7a7362;font-size:13px;line-height:1.6}.lead{color:#4a4536;text-align:left;margin-bottom:24px;font-size:15px;line-height:1.8}.highlight-name{color:#16233f;border-bottom:1px dashed #c9a66b;font-size:20px;font-weight:800}.details-compact{background:#fff6;border:1px solid #b7975c33;border-radius:6px;flex-direction:column;gap:16px;margin-bottom:24px;padding:16px;display:flex}.detail-row{align-items:flex-start;gap:12px;display:flex}.detail-icon{font-size:20px}.detail-text{flex-direction:column;gap:4px;display:flex}.detail-text .label{letter-spacing:2px;text-transform:uppercase;color:#96723c;font-size:10px;font-weight:600}.detail-text strong{color:#16233f;font-size:14px;font-weight:700;line-height:1.4}.rsvp{color:#7a7362;text-align:left;font-size:13px;line-height:1.8}.rsvp b{color:#16233f;font-weight:800}