/* Three pieces of occasion stationery. Open invitation cards keep their own styling. */
#ir-envelope{isolation:isolate;container-type:inline-size;max-width:410px;aspect-ratio:1.28;margin:105px auto 55px;background:none;border:0;border-radius:3px;box-shadow:none;filter:none;perspective:1100px;transform:rotate(-2deg)}
#ir-envelope .ir-envelope-body{position:absolute;inset:0;border-radius:3px;background:#c5d4bc;box-shadow:0 3px 3px #28362424,0 20px 30px -7px #27352640;z-index:1}
#ir-envelope .ir-envelope-photo{left:10%;right:auto;top:-22%;width:62%;height:76%;padding:10px 10px 28px;background:#fffaf0;transform:rotate(-8deg);box-shadow:0 2px 4px #25391f20,0 9px 18px #26312230;z-index:0;transition:transform .55s cubic-bezier(.2,.75,.25,1)}
#ir-envelope .ir-envelope-photo img{object-position:50% 46%}
#ir-envelope .ir-envelope-photo>span{position:absolute;bottom:8px;left:0;right:0;text-align:center;font:italic 11px 'Cormorant Garamond',var(--serif);color:#67715b}
#ir-envelope .ir-envelope-pocket{inset:0;z-index:2;border-radius:3px;pointer-events:none}
#ir-envelope .ir-envelope-pocket:before{background:linear-gradient(135deg,#dae2ca,#bbc9ae);clip-path:polygon(0 0,50% 49%,100% 0,100% 100%,0 100%)}
#ir-envelope .ir-envelope-pocket:after{background:linear-gradient(0deg,#cbd5ba,#dce4cf);clip-path:polygon(0 100%,50% 43%,100% 100%);filter:drop-shadow(0 -1px 1px #34472c26)}
#ir-envelope .ir-envelope-flap{position:absolute;inset:0 0 auto;height:59%;z-index:3;background:linear-gradient(160deg,#e1e7d3,#bac9ac);clip-path:polygon(0 0,100% 0,52% 100%,48% 100%);transform-origin:50% 0;filter:drop-shadow(0 2px 1px #27372533);transition:transform .5s cubic-bezier(.22,.75,.25,1)}
#ir-envelope .ir-envelope-decoration{position:absolute;inset:0;pointer-events:none;z-index:4}
#ir-envelope .ir-envelope-decoration>svg,#ir-envelope .ir-envelope-decoration>span{display:none;position:absolute;pointer-events:none}
#ir-envelope .ir-open-invitation{inset:0;z-index:5;padding:0;display:block;color:#35523b;font-style:normal;border-radius:3px;touch-action:manipulation;transition:none}
#ir-envelope .ir-open-invitation:focus-visible{outline:3px solid #a36e36;outline-offset:8px}
#ir-envelope .ir-open-invitation:disabled{opacity:1}
#ir-envelope .ir-envelope-overline{position:absolute;left:15%;right:15%;top:10%;font:500 9px/1.4 var(--sans);letter-spacing:.23em}
#ir-envelope .ir-envelope-address{position:absolute;left:13%;right:13%;top:65%;display:flex;align-items:center;flex-direction:column}
#ir-envelope .ir-envelope-salutation{font:italic 16px/1.3 'Cormorant Garamond',var(--serif)}
#ir-envelope .ir-envelope-title{font:400 clamp(26px,8cqw,36px)/1.05 'Cormorant Garamond',var(--serif);white-space:pre-line;letter-spacing:-.025em;margin:5px 0 0}
#ir-envelope .ir-envelope-date{font:500 7px/1.6 var(--sans);letter-spacing:.16em;margin-top:10px}
#ir-envelope .ir-open-invitation small{position:absolute;top:calc(100% + 23px);left:-5%;right:-5%;display:flex;justify-content:center;align-items:center;gap:15px;margin:0;color:#425846;font:11px/1.5 var(--sans);letter-spacing:.02em}
#ir-envelope .ir-envelope-arrow{display:grid;place-items:center;width:29px;height:29px;border:1px solid #6e816655;border-radius:50%;font:16px var(--sans);transition:transform .25s}
#ir-envelope .ir-seal{left:calc(50% - 29px);top:calc(56% - 29px);width:58px;height:58px;display:grid;place-items:center;transform:rotate(-7deg);transition:transform .35s,opacity .25s;border-radius:45% 49% 44% 48%;border:4px solid #ac9570;background:radial-gradient(ellipse at 32% 22%,#e1cfaa,#c0a373 60%,#ab8e61);color:#775d39;font:500 21px 'Cormorant Garamond',var(--serif);letter-spacing:-.07em;padding:0;box-shadow:0 3px 5px #23302040,inset 0 0 0 1px #e9dabb,inset 0 0 7px #73573166;text-shadow:0 1px #f6e2b3}
#ir-envelope .ir-seal:after{content:'';position:absolute;inset:5px;border:1px solid #8e714b66;border-radius:50%;box-shadow:0 1px 0 #f1deaf80}
/* Birthday: a hand-addressed party letter with a scalloped label and tiny cake stamp. */
[data-event=birthday] #ir-envelope{transform:rotate(-3deg);aspect-ratio:1.25}
[data-event=birthday] #ir-envelope .ir-envelope-body{background:repeating-linear-gradient(130deg,#c47e6d 0 10px,#f8ecd6 10px 20px,#6a9da6 20px 30px,#f8ecd6 30px 40px);padding:8px}
[data-event=birthday] #ir-envelope .ir-envelope-body:after{content:'';position:absolute;inset:8px;border:1px solid #dfd1ac;background:repeating-linear-gradient(0deg,#fff1 0 1px,transparent 1px 4px),#f8eed5}
[data-event=birthday] #ir-envelope .ir-envelope-pocket,[data-event=birthday] #ir-envelope .ir-envelope-flap{display:none}
[data-event=birthday] #ir-envelope .ir-envelope-photo{left:5%;width:58%;top:-24%;height:65%;transform:rotate(-8deg);border-radius:2px}
[data-event=birthday] #ir-envelope .ir-envelope-photo>span{font:700 17px Gaegu,var(--sans);color:#ad5b48;bottom:5px}
[data-event=birthday] #ir-envelope .ir-mail-doodles{display:block;inset:0;width:100%;height:100%}
[data-event=birthday] #ir-envelope .ir-envelope-overline{top:9%;left:23%;right:27%;font:700 clamp(12px,4cqw,18px)/1 Gaegu,var(--sans);letter-spacing:.02em;color:#a15c48;transform:rotate(-4deg)}
[data-event=birthday] #ir-envelope .ir-envelope-address{top:25%;left:18%;right:19%;bottom:16%;justify-content:center;background:#c6dfdf;transform:rotate(2deg);color:#345e66;filter:drop-shadow(1px 3px 0 #849a861b);border:1px solid #91b5b899;clip-path:polygon(0 3%,5% 0,10% 3%,15% 0,20% 3%,25% 0,30% 3%,35% 0,40% 3%,45% 0,50% 3%,55% 0,60% 3%,65% 0,70% 3%,75% 0,80% 3%,85% 0,90% 3%,95% 0,100% 3%,100% 97%,95% 100%,90% 97%,85% 100%,80% 97%,75% 100%,70% 97%,65% 100%,60% 97%,55% 100%,50% 97%,45% 100%,40% 97%,35% 100%,30% 97%,25% 100%,20% 97%,15% 100%,10% 97%,5% 100%,0 97%)}
[data-event=birthday] #ir-envelope .ir-envelope-salutation{font:700 clamp(14px,5cqw,20px)/1.2 Gaegu,var(--sans);transform:rotate(-2deg)}
[data-event=birthday] #ir-envelope .ir-envelope-title{font:500 clamp(24px,8cqw,35px)/1.05 Fredoka,var(--sans);letter-spacing:-.025em;color:#a94c3b;margin-top:9px;transform:rotate(-2deg)}
[data-event=birthday] #ir-envelope .ir-envelope-date{font-size:7px;letter-spacing:.07em;max-width:90%;margin-top:13px}
[data-event=birthday] #ir-envelope .ir-envelope-party-tape{display:block;left:41%;top:22%;width:27%;height:19px;background:repeating-linear-gradient(90deg,#dcb24b80 0 5px,#eacd7d80 5px 10px);transform:rotate(9deg);mix-blend-mode:multiply;clip-path:polygon(1% 0,100% 5%,98% 100%,0 93%)}
[data-event=birthday] #ir-envelope .ir-seal{left:auto;right:7%;top:68%;width:18%;height:auto;aspect-ratio:1;border:0;border-radius:0;background:#e9c75d;box-shadow:none;font:500 clamp(30px,11cqw,46px)/1 Fredoka,var(--sans);color:#a04e38;text-shadow:0 1px #ffedb9;transform:rotate(13deg);clip-path:polygon(50% 0,61% 12%,77% 5%,80% 23%,98% 27%,90% 44%,100% 59%,83% 66%,83% 86%,64% 84%,50% 100%,39% 86%,20% 94%,18% 75%,1% 69%,10% 52%,0 37%,17% 29%,19% 10%,38% 15%)}
[data-event=birthday] #ir-envelope .ir-seal:after{inset:17%;border:1px dashed #a86b4266;box-shadow:none}
[data-event=birthday] #ir-envelope .ir-open-invitation small{font:700 20px/1.2 Gaegu,var(--sans);color:#466f75}
/* Wedding: generated photographic satin and sage paper, with live typesetting. */
[data-event=wedding] #ir-envelope{transform:rotate(-2deg);aspect-ratio:1024 / 765;margin-top:108px}
[data-event=wedding] #ir-envelope .ir-envelope-photo{left:12%;width:76%;height:85%;top:-29%;padding:10px 10px 34px;transform:rotate(5deg);border:1px solid #e9dfc9;transition-duration:.42s}
[data-event=wedding] #ir-envelope .ir-envelope-photo img{object-position:50% 42%}
[data-event=wedding] #ir-envelope .ir-envelope-body{background:#cdd2bc url("assets/rsvp-wedding-satin-envelope.webp") center / 100% 100% no-repeat;transform-origin:50% 75%;transition:transform .4s cubic-bezier(.2,.75,.25,1),opacity .36s ease}
[data-event=wedding] #ir-envelope .ir-envelope-decoration,[data-event=wedding] #ir-envelope .ir-envelope-pocket,[data-event=wedding] #ir-envelope .ir-envelope-flap,[data-event=wedding] #ir-envelope .ir-seal{display:none}
[data-event=wedding] #ir-envelope .ir-envelope-overline{top:14%;left:49%;right:6%;font-size:8px;line-height:1.8;color:#40513b;letter-spacing:.15em}
[data-event=wedding] #ir-envelope .ir-envelope-address{top:30%;bottom:13%;left:49%;right:6%;justify-content:center;padding:8px;background:#f5f1e6;box-shadow:0 2px 4px #25351e21;border:1px solid #fff8;color:#2d4430;transform:rotate(1deg)}
[data-event=wedding] #ir-envelope .ir-envelope-salutation{font-size:14px}
[data-event=wedding] #ir-envelope .ir-envelope-title{font-size:clamp(26px,8.5cqw,36px);line-height:1.05;margin:9px 0 0;max-width:155px;text-wrap:balance}
[data-event=wedding] #ir-envelope .ir-envelope-date{margin-top:17px;font-size:8px;letter-spacing:.15em}
[data-event=wedding] #ir-envelope.is-opening .ir-envelope-body{transform:translateY(12px) scale(.985);opacity:0}
/* Dinner: photographic invitation jacket with an uncoated ivory-paper panel. */
[data-event=gathering] #ir-envelope{aspect-ratio:1.08;transform:rotate(-1.5deg);max-width:430px;margin-top:35px}
[data-event=gathering] #ir-envelope .ir-envelope-body{background:#e7dbc4;border:1px solid #b6a68a;border-radius:1px;box-shadow:3px 4px 0 #88795f55,0 25px 35px -10px #382c1c45}
[data-event=gathering] #ir-envelope .ir-envelope-photo{display:block;left:0;right:auto;top:0;width:61%;height:100%;padding:0;z-index:2;overflow:hidden;background:#443e2c;transform:none;border-radius:1px 0 0 1px;box-shadow:none;transition:transform .45s,opacity .45s}
[data-event=gathering] #ir-envelope .ir-envelope-photo img{width:100%;height:100%;object-fit:cover;object-position:54% 56%;filter:none;transition:transform .65s cubic-bezier(.2,.75,.25,1)}
[data-event=gathering] #ir-envelope .ir-envelope-photo>span{display:none}
[data-event=gathering] #ir-envelope .ir-envelope-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 80%,#2b281a18);pointer-events:none}
[data-event=gathering] #ir-envelope .ir-envelope-pocket{left:58%;right:0;z-index:3;overflow:visible;border-radius:0 1px 1px 0;transform-origin:right center;transition:transform .45s cubic-bezier(.22,.75,.25,1)}
[data-event=gathering] #ir-envelope .ir-envelope-pocket:before{inset:0;clip-path:none;background:repeating-linear-gradient(0deg,#aa91600a 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#aa916008 0 1px,transparent 1px 4px),linear-gradient(90deg,#ebe2ce,#f6efdf 14%,#f6efdf 97%,#e7ddc8);border:0;box-shadow:-2px 0 6px #2c25182b;transform:none}
[data-event=gathering] #ir-envelope .ir-envelope-pocket:after{display:none}
[data-event=gathering] #ir-envelope .ir-envelope-flap,[data-event=gathering] #ir-envelope .ir-envelope-ribbon,[data-event=gathering] #ir-envelope .ir-envelope-band,[data-event=gathering] #ir-envelope .ir-seal{display:none}
[data-event=gathering] #ir-envelope .ir-envelope-overline{top:13%;left:63%;right:5%;text-align:left;font:500 9px/1.8 var(--sans);color:#65654c;letter-spacing:.2em}
[data-event=gathering] #ir-envelope .ir-envelope-address{top:32%;bottom:12%;left:63%;right:5%;align-items:flex-start;color:#3e4732;text-align:left}
[data-event=gathering] #ir-envelope .ir-envelope-salutation{display:none}
[data-event=gathering] #ir-envelope .ir-envelope-title{font:400 clamp(27px,10cqw,43px)/.99 'Cormorant Garamond',var(--serif);white-space:normal;letter-spacing:-.035em;max-width:100%;margin:0;text-wrap:balance}
[data-event=gathering] #ir-envelope .ir-envelope-date{position:absolute;bottom:0;left:0;right:0;margin:0;max-width:110px;font:500 8px/1.9 var(--sans);letter-spacing:.09em;color:#787257}
[data-event=gathering] #ir-envelope .ir-open-invitation small{color:#4b573f}
@media(hover:hover) and (pointer:fine){#ir-envelope:has(button:hover) .ir-envelope-photo{transform:translateY(-7px) rotate(-5deg)}#ir-envelope:has(button:hover) .ir-seal{transform:rotate(4deg) translateY(-2px)}#ir-envelope:has(button:hover) .ir-envelope-arrow{transform:translate(2px,-2px)}}
#ir-envelope.is-opening .ir-envelope-flap{transform:rotateX(150deg)}
#ir-envelope.is-opening .ir-envelope-photo{transform:translateY(-45px) rotate(0)!important}
#ir-envelope.is-opening .ir-open-invitation{opacity:0;transition:opacity .23s}
#ir-envelope.is-opening .ir-envelope-decoration{opacity:0;transition:opacity .3s}
[data-event=birthday] #ir-envelope.is-opening .ir-envelope-body{transform:rotate(3deg) translateY(12px);opacity:0;transition:transform .4s,opacity .4s}
[data-event=gathering] #ir-envelope.is-opening .ir-envelope-pocket:before{transform:rotateY(-90deg)}
[data-event=gathering] #ir-envelope.is-opening .ir-envelope-pocket:after{transform:rotateY(90deg)}
@media(max-width:1050px){#ir-envelope{margin-top:85px}.ir-invitation-stage:has(#ir-envelope:not([hidden])){padding-left:30px;padding-right:30px}}
@media(max-width:760px){.ir-invitation-stage:has(#ir-envelope:not([hidden])){min-height:0;padding:35px 32px 25px}#ir-envelope,[data-event=wedding] #ir-envelope,[data-event=gathering] #ir-envelope{margin-top:90px;margin-bottom:75px;max-width:410px}#ir-envelope .ir-envelope-photo{padding:7px 7px 25px}#ir-envelope .ir-envelope-overline{font-size:7px}#ir-envelope .ir-seal{width:49px;height:49px;left:calc(50% - 24.5px);top:calc(54% - 24.5px);font-size:17px}[data-event=birthday] #ir-envelope .ir-envelope-overline{font-size:clamp(12px,4cqw,18px)}[data-event=birthday] #ir-envelope .ir-seal{left:auto;top:68%;width:18%;height:auto;font-size:clamp(30px,11cqw,46px)}[data-event=gathering] #ir-envelope .ir-seal{top:8%;left:calc(50% - 22px);width:44px;height:44px;font-size:20px}[data-event=wedding] #ir-envelope .ir-seal{top:calc(54% - 24.5px)}[data-event=wedding] #ir-envelope .ir-envelope-salutation{font-size:12px}[data-event=birthday] #ir-envelope .ir-envelope-date{font-size:6px;margin-top:9px}}
@media(max-width:370px){.ir-invitation-stage:has(#ir-envelope:not([hidden])){padding-left:23px;padding-right:23px}#ir-envelope,[data-event=wedding] #ir-envelope,[data-event=gathering] #ir-envelope{margin-top:80px;margin-bottom:67px}[data-event=wedding] #ir-envelope .ir-envelope-date{font-size:6px;margin-top:4px}[data-event=wedding] #ir-envelope .ir-envelope-title{font-size:24px}[data-event=gathering] #ir-envelope .ir-seal{width:38px;height:38px;left:calc(50% - 19px);font-size:17px;border-width:3px}}
@media(max-width:760px){[data-event=wedding] #ir-envelope .ir-envelope-band{bottom:4%}}
@media(prefers-reduced-motion:reduce){#ir-envelope *,#ir-envelope *:before,#ir-envelope *:after{transition:none!important}#ir-envelope:has(button:hover) .ir-envelope-photo{transform:rotate(-5deg)}#ir-envelope:has(button:hover) .ir-seal{transform:none}}

/* Keep the photographic jacket fixed while its paper panel opens. */
[data-event=gathering] #ir-envelope:has(button:hover) .ir-envelope-photo{transform:none}
[data-event=gathering] #ir-envelope.is-opening .ir-envelope-photo{transform:translateX(-12px)!important;opacity:.25}
[data-event=gathering] #ir-envelope.is-opening .ir-envelope-pocket{transform:rotateY(85deg)}
[data-event=gathering] #ir-envelope.is-opening .ir-envelope-pocket:before{transform:none}
@media(hover:hover) and (pointer:fine){[data-event=gathering] #ir-envelope:has(button:hover) .ir-envelope-photo img{transform:scale(1.025)}}
@media(max-width:760px){[data-event=gathering] #ir-envelope{margin-top:27px;aspect-ratio:1.04}[data-event=gathering] #ir-envelope .ir-envelope-photo{padding:0}[data-event=gathering] #ir-envelope .ir-envelope-overline{top:13%;left:63%;right:5%;font-size:7px;letter-spacing:.12em}[data-event=gathering] #ir-envelope .ir-envelope-address{top:33%;bottom:11%;left:63%;right:5%}[data-event=gathering] #ir-envelope .ir-envelope-title{font-size:clamp(25px,10cqw,38px)}[data-event=gathering] #ir-envelope .ir-envelope-date{font-size:7px;letter-spacing:.035em;line-height:1.8;max-width:85px}}
@media(max-width:370px){[data-event=gathering] #ir-envelope .ir-envelope-title{font-size:24px}[data-event=gathering] #ir-envelope .ir-envelope-overline{font-size:6px;letter-spacing:.1em}[data-event=gathering] #ir-envelope .ir-envelope-date{font-size:6px}}
@media(prefers-reduced-motion:reduce){[data-event=gathering] #ir-envelope:has(button:hover) .ir-envelope-photo{transform:none}[data-event=gathering] #ir-envelope:has(button:hover) .ir-envelope-photo img{transform:none}}

@media(max-width:760px){
  [data-event=wedding] #ir-envelope .ir-envelope-overline{font-size:7px;letter-spacing:.1em}
  [data-event=wedding] #ir-envelope .ir-envelope-address{top:30%;padding:5px}
  [data-event=wedding] #ir-envelope .ir-envelope-title{font-size:clamp(25px,8.5cqw,34px);max-width:145px;margin-top:7px}
  [data-event=wedding] #ir-envelope .ir-envelope-date{font-size:7px;margin-top:12px}
}
@media(max-width:370px){
  [data-event=wedding] #ir-envelope .ir-envelope-overline{font-size:6px}
  [data-event=wedding] #ir-envelope .ir-envelope-salutation{font-size:11px}
  [data-event=wedding] #ir-envelope .ir-envelope-title{font-size:24px}
  [data-event=wedding] #ir-envelope .ir-envelope-date{font-size:6px;margin-top:10px}
}
@media(prefers-reduced-motion:reduce){[data-event=wedding] #ir-envelope.is-opening .ir-envelope-body{transform:none}}

[data-event=wedding] #ir-envelope .ir-envelope-address{top:77%;bottom:5%;left:46%;right:5%;padding:0;background:none;border:0;box-shadow:none;transform:none;justify-content:center}
[data-event=wedding] #ir-envelope .ir-envelope-salutation{display:none}
[data-event=wedding] #ir-envelope .ir-envelope-title{font-size:5cqw;line-height:1;margin:0;max-width:none;white-space:nowrap}
[data-event=wedding] #ir-envelope .ir-envelope-title br{display:none}
[data-event=wedding] #ir-envelope .ir-envelope-date{font-size:1.6cqw;margin-top:6%;line-height:1;letter-spacing:.08em}
[data-event=wedding] #ir-envelope .ir-envelope-overline{top:74%;left:46%;right:5%;font-size:1.4cqw;letter-spacing:.08em}