/* Only artwork shares the 720 × 900 envelope canvas. Page type stays responsive. */
#mail-hero{position:relative;height:250svh;color:#343b36;isolation:isolate}
#mail-hero *{box-sizing:border-box}
#mail-hero .mh-pin{position:sticky;top:0;height:100svh;overflow:hidden;overflow:clip}
#mail-hero .mh-heading{position:absolute;z-index:8;top:7svh;left:20px;right:20px;text-align:center;pointer-events:none;will-change:opacity,transform}
#mail-hero h1{font-family:'Iowan Old Style','Palatino Linotype','Book Antiqua',Georgia,serif;font-size:clamp(48px,6vw,88px);font-weight:400;letter-spacing:-.057em;line-height:1.04;margin:0}
#mail-hero h1 em{font-weight:400;color:#d5564b}
#mail-hero .mh-heading p{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:clamp(15px,1.3vw,18px);line-height:1.6;color:#626a5f;margin:19px auto 0;max-width:460px}
#mail-hero .mh-rig{position:absolute;left:50%;top:50%;width:min(86vw,700px,90svh);aspect-ratio:720/900;transform:translate(-50%,-45%) rotate(-5deg);transform-origin:50% 65%;isolation:isolate;will-change:transform;pointer-events:none}
#mail-hero .mh-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none}
#mail-hero .mh-body{z-index:1;filter:drop-shadow(3px 15px 9px #51482e20)}
#mail-hero .mh-pocket{z-index:4}
#mail-hero .mh-lining{z-index:0;transform-origin:50% 47.7778%;backface-visibility:hidden;transform:perspective(1000px) rotateX(180deg)}
#mail-hero .mh-flap{z-index:5;transform-origin:50% 47.7778%;backface-visibility:hidden}
#mail-hero .mh-contents{position:absolute;inset:0;z-index:3;opacity:0;clip-path:inset(0 10.8333% 9.5556%);pointer-events:none}
#mail-hero .mh-card{position:absolute;width:30.5556%;aspect-ratio:319/480;left:34.7222%;top:66.6667%;transform-origin:50% 50%;filter:drop-shadow(0 7px 7px #54412920);will-change:transform,left,top;perspective:1400px}
#mail-hero .mh-turn{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
#mail-hero .mh-front,#mail-hero .mh-back{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#mail-hero .mh-front{object-fit:contain;user-select:none;-webkit-user-drag:none}
/* MailPaperStyle + postcard correspondence marks from LetterCards / HomeCards.
   The three portrait fronts retain their silhouettes; the writing is on the paper. */
#mail-hero .mh-back{transform:rotateY(180deg);background-color:#f5eddc;background-image:radial-gradient(#74603d16 .45px,transparent .7px),radial-gradient(#fffaf399 .55px,transparent .9px);background-size:3px 4px,5px 3px;background-position:0 0,1px 2px;mask-image:var(--card-art);-webkit-mask-image:var(--card-art);mask-size:100% 100%;-webkit-mask-size:100% 100%}
#mail-hero .mh-postcard-title{position:absolute;top:13%;left:12%;font-family:'Iowan Old Style',Georgia,serif;font-size:clamp(7px,.8vw,10px);letter-spacing:.16em;color:#00838a}
#mail-hero .mh-stamp-space{position:absolute;top:10%;right:10%;width:18%;height:16%;border:1px dashed #00838a55}
#mail-hero .mh-note{position:absolute;left:12%;right:10%;top:33%;font-family:'Bradley Hand','Segoe Print',cursive;color:#343b36;font-size:clamp(24px,3.1vw,39px);font-weight:400;line-height:1.24;letter-spacing:-.025em;transform:rotate(-2deg)}
#mail-hero .mh-address{position:absolute;left:51%;right:11%;top:72%;height:17%;border-left:1px solid #00838a60;background:linear-gradient(#00838a4d,#00838a4d) 100% 16%/82% 1px no-repeat,linear-gradient(#00838a4d,#00838a4d) 100% 57%/82% 1px no-repeat,linear-gradient(#00838a4d,#00838a4d) 100% 98%/82% 1px no-repeat}
#mail-hero .mh-scroll{position:absolute;z-index:9;left:50%;bottom:4svh;transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:none;border:0;padding:12px 8px;color:#626a5f;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:13px;white-space:nowrap;cursor:pointer}
#mail-hero .mh-scroll span{font-size:22px;line-height:1}
#mail-hero .mh-scroll:focus-visible{outline:2px solid #00838a;outline-offset:4px}
@media(max-width:650px){
  #mail-hero{height:235svh}
  #mail-hero .mh-heading{top:10svh}
  #mail-hero h1{font-size:clamp(47px,11.7vw,69px)}
  #mail-hero .mh-rig{width:94vw;top:54%;transform:translate(-50%,-45%) rotate(-5deg)}
  #mail-hero .mh-heading p{font-size:15px;margin-top:19px}
  #mail-hero .mh-scroll{bottom:8svh}
  #mail-hero .mh-note{font-size:clamp(22px,6vw,31px)}
}
@media(prefers-reduced-motion:reduce){
  #mail-hero{height:125svh}
  #mail-hero .mh-pin{height:125svh;position:relative}
  #mail-hero .mh-rig{top:54%}
  #mail-hero .mh-scroll{display:none}
}

/* Approved explicit benefit copy, written directly on the postcard. */
#mail-hero .mh-note{top:31%;font-size:20px;line-height:1.28;letter-spacing:-.015em}

#mail-hero .mh-join{pointer-events:auto;margin-top:24px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
#mail-hero .mh-card{aspect-ratio:3/4}
#mail-hero .mh-postage{position:absolute;top:7%;right:8%;width:20%;height:20%;object-fit:contain;transform:rotate(7deg)}
#mail-hero .mh-note{font-size:18px;top:31%}
#mail-hero .mh-address{top:auto;bottom:8%;height:12%}