/* JA ATELIER · tactile paper invitation · 26 October 2026 */
.hero-paper-scene{background:radial-gradient(ellipse at 40% 28%,#f9f6ef 0,#e9e7dd 62%,#dedfd5 100%);box-shadow:0 24px 50px #3b4c3915}
.hero-paper-scene:before{content:'';inset:0;background:url('ivory-paper.webp') center/560px;opacity:.16;pointer-events:none}
.hero-paper-scene:after{border-color:#ffffffe0}
.hero-paper-heading{top:48px;font-size:9px;font-weight:500;letter-spacing:.22em;color:#7e7d6c}
.hero-envelope{--paper:url('ivory-paper.webp');width:min(80%,380px);aspect-ratio:1.55;top:48%;transform:translate(-50%,-18%);filter:none;perspective:1400px;isolation:isolate;border-radius:2px;box-shadow:0 2px 3px #63524018,0 13px 18px -9px #55463235,0 27px 44px -18px #55463238}
.hero-envelope-back{inset:0;border-radius:2px;background:linear-gradient(#b5a58f66,#c8baa55c),var(--paper) center/440px;z-index:0;box-shadow:inset 0 2px 5px #66503530,inset 0 0 0 1px #c5b79f}
.hero-envelope-back:before{inset:9px;border:1px solid #c7b49350;background:repeating-linear-gradient(45deg,#a9987e08 0 1px,transparent 1px 5px)}
.hero-envelope .hero-letter{top:5%;left:6.5%;right:6.5%;height:93%;padding:27px 12px 18px;z-index:2;transform:none;clip-path:none;visibility:hidden;background:linear-gradient(#fffdf5d9,#fffdf5d9),var(--paper) center/400px;box-shadow:0 0 1px #826d4e80,0 3px 7px #66564120;transition:none;will-change:transform}
.hero-letter:before{inset:10px;border-color:#b9a47a8c;box-shadow:inset 0 0 0 3px #fff9,inset 0 0 0 4px #b9a47a26}
.hero-letter-overline{font-size:8px;letter-spacing:.23em;font-weight:500;color:#887855}
.hero-letter-names{font-size:clamp(24px,2.4vw,33px);font-weight:400;color:#485b48;letter-spacing:-.055em;margin:21px 0 14px}
.hero-letter-names i{color:#a3885b}
.hero-letter-date{font-size:8px;letter-spacing:.13em;font-weight:500;color:#8d7959}
.hero-envelope .hero-letter-link{font-size:10px;margin-top:19px;padding-bottom:4px;color:#506348;border-color:#9caa91;opacity:0;visibility:hidden;pointer-events:auto;transition:none}
.hero-envelope-sides{position:absolute;inset:0;z-index:3;pointer-events:none}
.hero-envelope-sides:before,.hero-envelope-sides:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,#ffffff36,#bca78a22),var(--paper) center/440px}
.hero-envelope-sides:before{clip-path:polygon(0 0,54% 58%,0 100%);box-shadow:inset 1px 0 1px #ffffffe0}
.hero-envelope-sides:after{clip-path:polygon(100% 0,46% 58%,100% 100%);background:linear-gradient(260deg,#ffffff38,#af9a7b18),var(--paper) center/440px;box-shadow:inset -1px 0 1px #bdad9460}
.hero-envelope-front{z-index:4;inset:0;border-radius:0 0 2px 2px;clip-path:polygon(0 100%,0 99%,48% 44%,50% 43%,52% 44%,100% 99%,100% 100%);background:linear-gradient(0deg,#bba48718,#fff9e900),var(--paper) center/440px;box-shadow:inset 0 -1px 1px #c7b39380}
.hero-envelope-front:after{inset:0;clip-path:none;background:none;opacity:1}
.hero-envelope .hero-envelope-flap,.hero-envelope.is-open .hero-envelope-flap{left:0;right:0;top:0;height:65%;z-index:5;background:none;clip-path:none;opacity:1;transform:rotateX(0deg);transform-style:preserve-3d;transform-origin:50% 0;backface-visibility:visible;transition:none;filter:drop-shadow(0 2px 1px #77654c3b);will-change:transform}
.hero-flap-face{position:absolute;inset:0;display:block;clip-path:polygon(0 0,100% 0,52% 96.5%,51% 98%,50% 98.5%,49% 98%,48% 96.5%);backface-visibility:hidden;-webkit-backface-visibility:hidden;border-top:1px solid #ffffffb0;background:linear-gradient(170deg,#fffaf54d,#ddccb733),var(--paper) center/440px}
.hero-flap-inside{transform:rotateX(180deg);background:linear-gradient(0deg,#c2ae8f28,#f5e8d126),var(--paper) center/440px;border-top:1px solid #b7a18145}
.hero-envelope .hero-envelope-seal{width:94px;height:94px;top:62%;left:50%;margin:-47px 0 0 -47px;padding:0;display:block;border:0;border-radius:50%;background:none;transform:none;z-index:6;filter:drop-shadow(1px 4px 2px #4b252638);animation:none;transition:none;opacity:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hero-envelope .hero-envelope-seal:before,.hero-envelope .hero-envelope-seal:after{display:none}
.hero-envelope-seal img{display:block;width:100%;height:100%;object-fit:contain;user-select:none}
.hero-envelope .hero-envelope-seal:hover{transform:none;filter:drop-shadow(1px 5px 3px #4b252650)}
.hero-envelope .hero-envelope-seal:focus-visible{outline:2px solid #7c2937;outline-offset:5px}
.hero-envelope-trigger{display:flex;align-items:center;justify-content:center;gap:12px;bottom:61px;background:transparent;border:0;border-bottom:1px solid #8e977c;box-shadow:none;padding:11px 2px 9px;color:#4d634d;font-size:11px;font-weight:500;letter-spacing:.025em;min-height:44px;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.hero-envelope-trigger:hover{background:transparent;border-bottom-color:#334c36;color:#334c36}
.hero-envelope-trigger:focus-visible{outline:2px solid #526a50;outline-offset:5px}
.hero-envelope-trigger svg{fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.hero-envelope-caption{font-size:12px;color:#888273;bottom:22px}
.hero-envelope[data-static-open] .hero-envelope-seal{opacity:0;visibility:hidden}
.hero-envelope[data-static-open] .hero-envelope-flap{transform:rotateX(-180deg);z-index:1}
.hero-envelope[data-static-open] .hero-letter{transform:translateY(-78%);visibility:visible}
.hero-envelope[data-static-open] .hero-letter-link{opacity:1;visibility:visible}
@media(max-width:1120px) and (min-width:721px){
 .hero-envelope{width:82%;top:47%}
 .hero-envelope .hero-letter{padding:21px 10px 15px}
 .hero-letter-names{font-size:26px;margin:17px 0 12px}
 .hero-envelope .hero-letter-link{margin-top:13px}
 .hero-envelope .hero-envelope-seal{width:80px;height:80px;margin:-40px 0 0 -40px}
}
@media(max-width:720px){
 .hero-paper-heading{top:40px}
 .hero-envelope{width:min(80%,365px);top:47%}
 .hero-letter-names{font-size:31px}
 .hero-envelope-trigger{bottom:56px}
}
@media(max-width:460px){
 .hero-paper-heading{top:31px;font-size:8px}
 .hero-envelope{width:82%;top:46%}
 .hero-envelope .hero-letter{padding:20px 9px 13px}
 .hero-letter-names{font-size:25px;margin:16px 0 11px}
 .hero-letter-overline{font-size:7px}
 .hero-letter-date{font-size:7px}
 .hero-envelope .hero-letter-link{font-size:9px;margin-top:14px}
 .hero-envelope .hero-envelope-seal{width:76px;height:76px;margin:-38px 0 0 -38px}
 .hero-envelope-trigger{bottom:56px;font-size:11px}
 .hero-envelope-caption{font-size:10px;left:25px;right:25px;bottom:20px}
}
@media(max-width:360px){
 .hero-envelope .hero-letter{padding-top:17px}
 .hero-letter-names{font-size:22px;margin:13px 0 10px}
 .hero-envelope .hero-letter-link{margin-top:11px;font-size:8px}
 .hero-letter-date{font-size:6px}
 .hero-envelope .hero-envelope-seal{width:68px;height:68px;margin:-34px 0 0 -34px}
}
/* Keep the control clear of the closed envelope at every width. */
@media(min-width:1121px){.hero-envelope-trigger{bottom:48px}.hero-envelope-caption{bottom:18px}}
@media(max-width:460px){.hero-visual-envelope{height:490px}}

.hero-envelope.is-open .hero-letter{transform:none;clip-path:none;transition:none}
.hero-envelope.is-open .hero-envelope-seal{opacity:1;transition:none}
.hero-envelope.is-open .hero-letter-link{opacity:0;transition:none}
.hero-envelope[data-static-open] .hero-envelope-seal{opacity:0;visibility:hidden}
.hero-envelope[data-static-open] .hero-letter{transform:translateY(-78%);visibility:visible}
.hero-envelope[data-static-open] .hero-letter-link{opacity:1;visibility:visible}
@media(max-width:1120px) and (min-width:721px){
 .hero-envelope{width:min(80%,310px);top:48%}
 .hero-envelope-trigger{bottom:48px}
 .hero-envelope-caption{bottom:18px}
}