/* The first page is the outside of the wedding letter. */
.envelope-entry{padding:clamp(10px,2vw,26px);background:#f6f3ea}
.envelope-entry[hidden]{display:none}
.stationery{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 125px);min-height:calc(100svh - 125px);padding:35px 18px 28px;text-align:center;color:#344735;background:radial-gradient(ellipse at 48% 45%,#eef0e5 0%,#e0e5d7 66%,#d3dccb 100%)}
.stationery:before{content:"";position:absolute;inset:0;background:url(assets/grain.png);opacity:.12;pointer-events:none;z-index:-1}
.stationery-border{position:absolute;inset:12px;border:1px solid #83957c68;pointer-events:none;z-index:-1}
.stationery-border:before,.stationery-border:after{content:"";position:absolute;width:clamp(125px,21vw,335px);aspect-ratio:380/345;background:url(assets/botanical.svg) center/contain no-repeat;opacity:.72}
.stationery-border:before{bottom:-8%;left:-4%;transform:rotate(-10deg)}
.stationery-border:after{top:-8%;right:-4%;transform:rotate(170deg)}
.post-kicker,.post-dates,.postmark{font:500 10px/1.45 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.post-kicker{display:flex;align-items:center;justify-content:center;gap:10px;color:#52654e}
.post-kicker span{width:25px;height:1px;background:#8c9a80}
.post-heading h2{font:500 clamp(43px,5.65vw,86px)/1.06 var(--serif);letter-spacing:-.048em;margin:8px 0 7px}
.post-heading h2 i{font-weight:400;color:#865255;font-size:.8em}
.post-dates{font-size:10px;letter-spacing:.16em;color:#55624e}
.envelope-opener{display:flex;flex-direction:column;align-items:center;max-width:100%;margin-top:clamp(24px,4.3vh,48px);-webkit-tap-highlight-color:transparent}
.envelope-art{position:relative;isolation:isolate;display:block;width:min(470px,66vw,55vh);width:min(470px,66vw,55svh);aspect-ratio:500/286;perspective:1000px;transform:rotate(-2deg);transition:transform .25s ease}
.envelope-art:before{content:"";position:absolute;inset:2% 1% 0;background:#816d53;border-radius:2px;box-shadow:0 15px 25px #38433532,0 3px 5px #45352740}
.envelope-back,.envelope-pocket,.enclosed-note,.envelope-lid,.fold-lines,.post-seal{position:absolute;display:block}
.envelope-back,.envelope-pocket{inset:0;border-radius:3px}
.envelope-back{background:linear-gradient(155deg,#b39773,#ddcdb2 76%);border:1px solid #c0ac89}
.enclosed-note{inset:5% 4% 5%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fffbef;border:5px solid #fffbef;outline:1px solid #bfa77c;outline-offset:-10px;transition:transform .54s .18s ease-out}
.enclosed-note img{width:17%;height:15%;object-fit:contain}
.enclosed-note i{font:clamp(20px,4vw,38px)/1 var(--script);color:#805259}.enclosed-note b{font:500 clamp(16px,2.5vw,28px) var(--serif)}
.envelope-pocket{background:linear-gradient(115deg,#e8dbc4,#f6eddd 58%,#e3d3b8);overflow:hidden;clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);box-shadow:inset 0 -1px 2px #aa9878}
.fold-lines,.envelope-lid svg{inset:0;width:100%;height:100%;display:block}
.envelope-pocket:after,.envelope-lid:after{content:"";position:absolute;inset:0;background:url(assets/grain.png);mix-blend-mode:multiply;opacity:.22;pointer-events:none}
.pocket-sprig{position:absolute;left:6%;bottom:8%;width:17%;height:13%;object-fit:contain;opacity:.7;transform:rotate(-12deg)}
.postmark{position:absolute;right:6%;bottom:9%;color:#74664d;font-size:clamp(6px,1vw,9px);letter-spacing:.14em}
.envelope-lid{top:0;left:0;width:100%;height:64%;transform-origin:50% 0;filter:drop-shadow(0 2px 1.5px #67503152);transition:transform .6s cubic-bezier(.33,.01,.24,1)}
.envelope-lid:after{clip-path:polygon(0 0,100% 0,50% 96%)}
.post-seal{left:50%;top:57%;width:15.5%;aspect-ratio:1;display:grid;place-items:center;transform:translate(-50%,-50%) rotate(-8deg);border-radius:47% 51% 45% 49% / 51% 45% 53% 46%;background:radial-gradient(at 25% 20%,#b87564,transparent 45%),linear-gradient(145deg,#a35e53,#703b40 75%,#a96857);box-shadow:inset 2px 2px 3px #db9680,inset -2px -3px 3px #663638,1px 3px 4px #503d3266;color:#f4ceab;transition:opacity .2s,transform .3s}
.post-seal:before,.post-seal:after{content:"";position:absolute;inset:8%;border:1px solid #d6957c;border-radius:50%;box-shadow:inset 0 1px 2px #693a39}
.post-seal:after{inset:14%;border-color:#c68972;box-shadow:none}.post-seal b{font:italic 500 clamp(21px,3vw,36px)/1 var(--serif);letter-spacing:-.12em;margin-left:-4%;text-shadow:0 1px #633331}.post-seal i{font-size:.54em}
.envelope-cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;margin-top:clamp(24px,4.5vh,48px);padding:13px 26px;background:#344a3b;color:#fffaef;border:1px solid #324537;border-radius:3px;box-shadow:0 3px 6px #3445371c;font:500 15px/1.35 var(--sans);transition:background .2s}
.envelope-opener:focus-visible{outline:none}.envelope-opener:focus-visible .envelope-cta{outline:3px solid #7f4c43;outline-offset:4px}
@media(hover:hover){.envelope-opener:hover .envelope-cta{background:#253b2d}.envelope-opener:hover .envelope-art{transform:rotate(-1deg) translateY(-2px)}}
.post-footer{margin-top:12px;color:#53654f;font:24px/1.1 var(--script)}
.is-opening .envelope-lid{transform:rotateX(158deg);animation:turn-behind .6s steps(1,end) forwards}
@keyframes turn-behind{0%{z-index:3}50%,100%{z-index:0}}
.is-opening .post-seal{opacity:0;transform:translate(-50%,-65%) rotate(-13deg) scale(.86)}
.is-opening .enclosed-note{transform:translateY(-31%);z-index:1}
.is-opening .envelope-pocket{z-index:2}
.cover.just-opened .folio{animation:letter-arrives .5s ease-out both}
@keyframes letter-arrives{from{opacity:.55;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:740px){.stationery{min-height:calc(100vh - 79px);min-height:calc(100svh - 79px);padding:38px 15px}.envelope-art{width:min(76vw,415px)}.stationery-border{inset:8px}.stationery-border:before,.stationery-border:after{width:clamp(100px,34vw,180px)}.stationery-border:before{bottom:-2%}.stationery-border:after{top:-2%}.envelope-opener{margin-top:34px}.post-seal b{font-size:clamp(22px,6.3vw,33px)}.post-heading h2{font-size:clamp(39px,10.7vw,63px)}}
@media(max-height:510px) and (orientation:landscape){.stationery{min-height:0;padding:15px}.post-heading h2{font-size:36px;margin:3px 0}.envelope-opener{margin-top:12px}.envelope-art{width:min(280px,45vh)}.envelope-cta{margin-top:13px}.post-footer{display:none}}
@media(prefers-reduced-motion:reduce){.envelope-art,.envelope-lid,.post-seal,.enclosed-note,.envelope-cta{transition:none}.cover.just-opened .folio{animation:none}}