/* Kindly Reply - stationery: envelope, wax seal, invitation card, design deck.
   Everything animates with transform/opacity only so it stays smooth on phones. */

.env-scene{position:relative;display:grid;place-items:center;width:100%;--env-w:min(520px,84vw)}
.env-scene>*{grid-area:1/1}
.env-wrap{position:relative;width:var(--env-w);aspect-ratio:1.42/1;animation:env-float 6s ease-in-out infinite;will-change:transform}
.env-wrap.is-open{animation:none}
@keyframes env-float{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-6px) rotate(.4deg)}}
.env-wrap>*{position:absolute}

.env-shadow{left:2%;right:2%;bottom:-11%;height:24%;background:radial-gradient(closest-side,rgba(38,32,20,.34),rgba(38,32,20,0));z-index:0;pointer-events:none}
.env-back{inset:0;z-index:1;border-radius:6px;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 6%,52% 60%,48% 60%,0 6%);
  background:linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,0) 38%),var(--liner-img) 0 0/var(--liner-size,76px) auto,var(--liner-bg)}
.env-back::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 3px var(--env-dark),inset 0 0 0 4px rgba(0,0,0,.08)}

.env-card{left:4.5%;right:4.5%;top:4.5%;height:89%;z-index:2;border-radius:3px;will-change:transform;
  background:url(../img/grain.png),linear-gradient(180deg,rgba(255,255,255,.35),rgba(0,0,0,.03)),var(--card-bg);
  box-shadow:0 1px 2px rgba(0,0,0,.18),0 10px 30px -16px rgba(0,0,0,.4);display:grid;place-items:center}
.env-card::before{content:"";position:absolute;inset:5%;border:1px solid var(--card-rule);opacity:.6;border-radius:2px}
.env-card-mono{font-family:'Bodoni Moda',Georgia,serif;font-style:italic;color:var(--card-accent);font-size:clamp(20px,5.2vw,34px);letter-spacing:.02em;display:flex;align-items:baseline;gap:.15em}
.env-card-mono i{font-size:.55em;color:var(--card-rule)}

.env-pocket{inset:0;z-index:3;pointer-events:none;filter:drop-shadow(0 -1px 1px rgba(0,0,0,.08))}
.env-pocket svg{width:100%;height:100%;display:block;overflow:visible}
.env-pocket .p-side{fill:var(--env)}
.env-pocket .p-right{fill:var(--env);opacity:.97}
.env-pocket .p-bottom{fill:var(--env)}
.env-pocket .p-edge{fill:none;stroke:var(--env-dark);stroke-width:1.2;opacity:.9}
.env-pocket::before{content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;
  background:url(../img/grain.png),linear-gradient(170deg,rgba(255,255,255,.16),rgba(255,255,255,0) 40%,rgba(0,0,0,.1));
  clip-path:polygon(0 0,48.6% 53.5%,50% 52%,51.4% 53.5%,100% 0,100% 100%,0 100%)}
.env-addressee{position:absolute;left:0;right:0;bottom:12%;text-align:center;font-family:'Pinyon Script',cursive;font-size:clamp(17px,4.4vw,28px);color:var(--env-ink);opacity:.85;line-height:1.1;padding:0 18%}

.env-flapshadow{left:0;top:0;width:100%;height:58%;z-index:4;background:rgba(0,0,0,.2);filter:blur(4px);transform:translateY(5px);
  clip-path:polygon(0 0,100% 0,54% 92%,51.8% 97.6%,50% 98.6%,48.2% 97.6%,46% 92%);pointer-events:none}
.env-flap{left:0;top:0;width:100%;height:56%;z-index:5;transform-origin:50% 0;transform-style:preserve-3d;will-change:transform;pointer-events:none}
.flap-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flap-out{clip-path:polygon(0 0,100% 0,54% 92%,51.8% 97.6%,50% 98.6%,48.2% 97.6%,46% 92%);
  background:url(../img/grain.png),linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.06) 70%,rgba(0,0,0,.12)),var(--env)}
.flap-in{transform:rotateX(180deg);clip-path:polygon(0 100%,100% 100%,54% 8%,51.8% 2.4%,50% 1.4%,48.2% 2.4%,46% 8%);background:var(--env-dark)}
.flap-in::before{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.22),rgba(0,0,0,0) 45%),var(--liner-img) 0 0/var(--liner-size,76px) auto,var(--liner-bg);
  clip-path:polygon(4.5% 96%,95.5% 96%,53% 14%,50% 9.5%,47% 14%)}

.env-seal{position:absolute;left:50%;top:55.5%;width:21%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:6;
  border:0;padding:0;background:none;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent}
.env-seal:focus-visible{outline:3px solid var(--card-rule,#B4924F);outline-offset:4px}
.seal{position:absolute;inset:0;display:block;filter:drop-shadow(0 3px 4px rgba(30,10,5,.35))}
.seal-half{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.seal-l{clip-path:polygon(0 0,51.8% 0,47.8% 18%,55.8% 33%,46.8% 47%,55.8% 61%,47.8% 76%,53.8% 100%,0 100%)}
.seal-r{clip-path:polygon(50.2% 0,100% 0,100% 100%,52.2% 100%,46.2% 76%,54.2% 61%,45.2% 47%,54.2% 33%,46.2% 18%)}
.seal-crack{position:absolute;inset:0;width:100%;height:100%;stroke-dasharray:100;stroke-dashoffset:100;pointer-events:none}
.env-wrap:not(.is-open) .env-seal:hover .seal{transform:scale(1.04);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.seal-glint{position:absolute;inset:8%;border-radius:50%;overflow:hidden;pointer-events:none}

.env-reveal{visibility:hidden;width:var(--card-w,min(400px,82vw));will-change:transform;z-index:8}
.env-scene.is-revealed .env-reveal{visibility:visible}
.env-scene.is-revealed .env-wrap{visibility:hidden}

/* ---------------------------------------------------------------- the card */
.inv-card{position:relative;width:100%;aspect-ratio:5/7;container-type:inline-size;color:var(--card-ink);
  background:url(../img/grain.png),linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,0) 45%,rgba(0,0,0,.035)),var(--card-bg);
  border-radius:4px;box-shadow:0 40px 70px -36px rgba(30,25,10,.55),0 14px 24px -18px rgba(30,25,10,.35),0 0 0 1px rgba(0,0,0,.04);
  font-family:var(--font-card);text-align:center;overflow:hidden}
.inv-card::after{content:"";position:absolute;inset:4.2%;border:1px solid var(--card-rule);opacity:.55;pointer-events:none;border-radius:2px}
.inv-card.has-border::after{inset:4%;border:3px double var(--card-rule);opacity:.9}
.inv-card.is-dark{background:url(../img/grain.png),radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.06),rgba(255,255,255,0)),var(--card-bg)}
.inv-card-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:10.5cqw 9.5cqw 8.5cqw;gap:0}
.inv-card-inner>:first-child{margin-top:auto!important}
.inv-card p{margin:0}
.inv-example{position:absolute;top:1.15cqw;left:0;right:0;margin:0 auto;width:max-content;z-index:2;font:600 1.75cqw/1 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--card-accent);background:var(--card-bg);border:1px solid currentColor;border-radius:99px;padding:.55cqw 1.5cqw}
.inv-greet{font-style:italic;font-size:4.2cqw;margin-bottom:4.2cqw!important;color:var(--card-accent);text-transform:none;letter-spacing:0;font-family:'Bodoni Moda',Georgia,serif}
.inv-hosts,.inv-std{font-size:3.1cqw;letter-spacing:.22em;text-transform:uppercase;margin-bottom:2.6cqw!important;opacity:.85}
.inv-std{font-size:4.2cqw;color:var(--card-accent);opacity:1}
.inv-names{font-family:var(--font-names);font-style:var(--names-style);text-transform:var(--names-case);
  font-size:calc(14.6cqw * var(--names-scale));line-height:1.02;display:flex;flex-direction:column;align-items:center;letter-spacing:normal;margin:.5cqw 0 3cqw!important;font-weight:400}
.inv-names .amp{font-family:'Bodoni Moda',Georgia,serif;font-style:italic;font-size:.42em;color:var(--card-accent);line-height:1.1;text-transform:none}
.inv-line{font-size:3.8cqw;line-height:1.42;text-transform:var(--card-case);letter-spacing:var(--card-track)}
.inv-card .ornament{width:32cqw;height:auto;color:var(--card-rule);margin:3.4cqw 0;flex:none}
.inv-date{font-size:4.8cqw;letter-spacing:.06em;margin-bottom:1.6cqw!important;text-transform:var(--card-case)}
.inv-venue{font-size:4.4cqw;font-style:italic;margin-top:.8cqw!important;text-transform:none;letter-spacing:.01em}
.inv-after{margin-top:2cqw!important;font-size:3.4cqw;opacity:.9}
.inv-small{margin-top:auto!important;padding-top:4cqw;font-size:2.8cqw;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
@supports not (container-type:inline-size){
  .inv-card{font-size:14px}.inv-names{font-size:48px}
}

/* ---------------------------------------------------------------- design deck (home page) */
.deck{position:relative;height:clamp(420px,62vw,560px);display:grid;place-items:center;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.deck-env{position:absolute;z-index:12;width:clamp(230px,30vw,350px);pointer-events:none;margin:0 0 -34% -40%}
.deck-env .mini-env{transform:rotate(-8deg);box-shadow:0 30px 50px -28px rgba(30,25,10,.55)}
@media (max-width:640px){.deck-env{margin:0 0 -52% -30%}}
.deck-card{position:absolute;width:clamp(230px,30vw,330px);cursor:grab;will-change:transform}
.deck-card:active{cursor:grabbing}
.deck-card .inv-card{box-shadow:0 30px 60px -30px rgba(30,25,10,.55),0 0 0 1px rgba(0,0,0,.05)}
.deck-card .inv-greet{display:none}
.deck-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:8px}
.deck-btn{width:46px;height:46px;border-radius:2px;border:1px solid var(--hairline,rgba(46,54,44,.32));background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s}
.deck-btn:hover{background:var(--ink);color:var(--paper)}
.deck-btn .ic{width:20px;height:20px}
.deck-dots{display:flex;gap:12px;align-items:center}
.deck-dots button{width:8px;height:8px;border-radius:0;border:1px solid var(--gold);padding:0;background:transparent;cursor:pointer;transform:rotate(45deg);transition:transform .2s,background .2s}
.deck-dots button[aria-current="true"]{background:var(--gold);border-color:var(--gold-deep);transform:rotate(45deg) scale(1.25)}

/* swatches */
.swatches{display:flex;gap:8px;align-items:center}
.swatch{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.swatch.liner{border-radius:6px;background-size:38px auto!important}

/* mini closed envelope (design cards, dashboard) */
.mini-env{position:relative;display:block;width:100%;aspect-ratio:1.42/1;border-radius:5px;overflow:hidden;
  background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,0) 40%),var(--liner-img) 0 0/calc(var(--liner-size,60px) * .75) auto,var(--liner-bg)}
.mini-env .me-pocket{position:absolute;inset:0;background:url(../img/grain.png),var(--env);clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%)}
.mini-env .me-pocket::after{content:"";position:absolute;inset:0;background:linear-gradient(170deg,rgba(255,255,255,.15),rgba(0,0,0,.1));clip-path:polygon(0 100%,44% 50%,50% 46%,56% 50%,100% 100%)}
.mini-env .me-card{position:absolute;left:8%;right:8%;top:-34%;height:80%;background:var(--card-bg);border-radius:3px;box-shadow:0 4px 12px -6px rgba(0,0,0,.35)}
.mini-env .me-seal{position:absolute;left:50%;top:52%;width:16%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.35),rgba(255,255,255,0) 45%),var(--seal);box-shadow:0 2px 4px rgba(0,0,0,.3),inset 0 0 0 3px rgba(0,0,0,.12)}

/* ---------------------------------------------------------------- hero envelope (data-envelope="peek")
   An ivory envelope under a red wax seal. On load the seal lifts with the flap, the flap opens to show the
   liner, the seal comes to rest at the flap's point and the card slides up 24px. CSS only; the flap and the seal
   share sampled keyframes (easeInOutCubic, perspective included) so the seal stays on the flap's point.
   Under prefers-reduced-motion it is simply shown open. */
.env-peek{--pk-d:.95s;--pk-t:1.3s;padding:calc(var(--env-w) * .5) 0 calc(var(--env-w) * .06)}
.env-peek .env-wrap{animation:none;perspective:calc(var(--env-w) * 2.3);perspective-origin:50% 0}
.env-peek .env-shadow{bottom:-9%}
/* warmer, lighter inside shading for the ivory hero envelope */
.env-peek .env-back{background:linear-gradient(rgba(90,70,30,.14),rgba(90,70,30,0) 34%),var(--liner-img) 0 0/var(--liner-size,76px) auto,var(--liner-bg)}
.env-peek .flap-in::before{background:linear-gradient(0deg,rgba(90,70,30,.12),rgba(90,70,30,0) 38%),var(--liner-img) 0 0/var(--liner-size,76px) auto,var(--liner-bg)}
.env-peek .env-card{container-type:inline-size;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;
  padding-top:4.2%;color:var(--card-ink);font-family:'Bodoni Moda',Georgia,serif}
.env-peek .pk-example{font:600 1.45cqw/1 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--card-accent);border:1px solid currentColor;border-radius:99px;padding:.5cqw 1.3cqw;margin:-1cqw 0 1.4cqw}
.env-peek .pk-hosts{margin:0;font-size:2.35cqw;letter-spacing:.24em;text-transform:uppercase;opacity:.82}
.env-peek .pk-names{margin:1.4cqw 0 0;font:400 9.2cqw/1.05 'Pinyon Script',cursive;color:var(--card-ink);white-space:nowrap}
.env-peek .pk-names i{font:italic 400 .5em/1 'Bodoni Moda',Georgia,serif;color:var(--card-accent);margin:0 .22em;vertical-align:.18em}
.env-peek .pk-date{margin:3.2cqw 0 0;font-size:2.8cqw;letter-spacing:.08em}
.env-peek .env-addressee{bottom:13%}
.pk-seal-track{position:absolute;left:0;top:0;width:100%;height:56%;z-index:7;pointer-events:none}
.pk-seal{position:absolute;left:50%;top:98.6%;width:19%;aspect-ratio:1;transform:translate(-50%,-50%);display:block;pointer-events:auto;cursor:pointer;border-radius:50%}
.pk-seal .seal{transform-origin:50% 50%}
.env-peek.is-playing .env-flap{animation:pk-flap var(--pk-t) linear var(--pk-d) both}
.env-peek.is-playing .env-flapshadow{animation:pk-fade .35s ease-out var(--pk-d) both}
.env-peek.is-playing .pk-seal-track{animation:pk-track var(--pk-t) linear var(--pk-d) both}
.env-peek.is-playing .pk-seal{animation:pk-seal var(--pk-t) linear var(--pk-d) both}
.env-peek.is-playing .pk-seal .seal{animation:pk-pop .4s cubic-bezier(.3,.7,.4,1) calc(var(--pk-d) - .4s) both}
.env-peek.is-playing .env-card{animation:pk-card .9s cubic-bezier(.2,.8,.2,1) calc(var(--pk-d) + var(--pk-t) * .62) both}
@keyframes pk-fade{to{opacity:0}}
@keyframes pk-pop{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes pk-card{from{transform:translateY(0)}to{transform:translateY(-24px)}}
@keyframes pk-flap{0%{transform:rotateX(0deg);z-index:5}6.25%{transform:rotateX(.2deg);z-index:5}12.5%{transform:rotateX(1.4deg);z-index:5}18.75%{transform:rotateX(4.7deg);z-index:5}25%{transform:rotateX(11.2deg);z-index:5}31.25%{transform:rotateX(22deg);z-index:5}37.5%{transform:rotateX(38deg);z-index:5}43.75%{transform:rotateX(60.3deg);z-index:5}50%{transform:rotateX(90deg);z-index:1}56.25%{transform:rotateX(119.7deg);z-index:1}62.5%{transform:rotateX(142deg);z-index:1}68.75%{transform:rotateX(158deg);z-index:1}75%{transform:rotateX(168.8deg);z-index:1}81.25%{transform:rotateX(175.3deg);z-index:1}87.5%{transform:rotateX(178.6deg);z-index:1}93.75%{transform:rotateX(179.8deg);z-index:1}100%{transform:rotateX(180deg);z-index:1}}
@keyframes pk-track{0%{transform:translateY(0)}6.25%{transform:translateY(.05%)}12.5%{transform:translateY(.38%)}18.75%{transform:translateY(1.06%)}25%{transform:translateY(1.4%)}31.25%{transform:translateY(-.99%)}37.5%{transform:translateY(-11.85%)}43.75%{transform:translateY(-41.33%)}50%{transform:translateY(-98.6%)}56.25%{transform:translateY(-155.87%)}62.5%{transform:translateY(-185.35%)}68.75%{transform:translateY(-196.21%)}75%{transform:translateY(-198.6%)}81.25%{transform:translateY(-198.26%)}87.5%{transform:translateY(-197.58%)}93.75%{transform:translateY(-197.25%)}100%{transform:translateY(-197.2%)}}
@keyframes pk-seal{0%{transform:translate(-50%,-50%) scale(1)}12.5%{transform:translate(-50%,-50%) scale(1.004)}18.75%{transform:translate(-50%,-50%) scale(1.014)}25%{transform:translate(-50%,-50%) scale(1.034)}31.25%{transform:translate(-50%,-50%) scale(1.068)}37.5%{transform:translate(-50%,-50%) scale(1.116)}43.75%{transform:translate(-50%,-50%) scale(1.172)}50%{transform:translate(-50%,-50%) scale(1.203)}56.25%{transform:translate(-50%,-50%) scale(1.172)}62.5%{transform:translate(-50%,-50%) scale(1.116)}68.75%{transform:translate(-50%,-50%) scale(1.068)}75%{transform:translate(-50%,-50%) scale(1.034)}81.25%{transform:translate(-50%,-50%) scale(1.014)}87.5%{transform:translate(-50%,-50%) scale(1.004)}100%{transform:translate(-50%,-50%) scale(1)}}

/* the open state, shown without motion (reduced motion, and the static brand renders: .is-static) */
.env-peek.is-static .env-flap{transform:rotateX(180deg);z-index:1}
.env-peek.is-static .env-flapshadow{opacity:0}
.env-peek.is-static .pk-seal-track{transform:translateY(-197.2%)}
.env-peek.is-static .env-card{transform:translateY(-24px)}
@media (prefers-reduced-motion:reduce){
  .env-wrap{animation:none}
  .env-peek .env-flap,.env-peek .env-flapshadow,.env-peek .pk-seal-track,.env-peek .pk-seal,.env-peek .pk-seal .seal,.env-peek .env-card{animation:none!important}
  .env-peek .env-flap{transform:rotateX(180deg);z-index:1}
  .env-peek .env-flapshadow{opacity:0}
  .env-peek .pk-seal-track{transform:translateY(-197.2%)}
  .env-peek .env-card{transform:translateY(-24px)}
}
@media print{.env-wrap{display:none}.env-reveal{visibility:visible}.env-peek .env-wrap{display:block}}