.hanging-art{height:500px;position:relative;isolation:isolate;perspective:1100px}
.hanging-art .badge-strap{position:absolute;left:0;top:-130px;width:100%;height:calc(100% + 130px);overflow:visible;pointer-events:none;z-index:3}
.hanging-art .id-card{position:absolute;left:0;top:0;width:min(86%,355px);height:auto;aspect-ratio:.76;max-height:none;animation:none!important;transform-origin:50% 15px;will-change:transform;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:var(--shadow-x,12px) 24px 38px #0006,0 1px 0 #ffffff2b inset;transition:box-shadow .25s}
.hanging-art .id-card.is-dragging{cursor:grabbing;box-shadow:var(--shadow-x,12px) 32px 48px #0009,0 1px 0 #ffffff40 inset}
.hanging-art .id-card:before{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;background:radial-gradient(ellipse at var(--shine-x,28%) 8%,#ffffff2e,transparent 60%),linear-gradient(115deg,transparent 25%,#ffffff13 43%,transparent 61%);pointer-events:none}
.hanging-art .id-card:after{content:'';position:absolute;inset:0;z-index:5;border:1px solid #ffffff38;border-radius:inherit;box-shadow:0 0 0 1px #00000012 inset;pointer-events:none}
.hanging-art .id-card:focus-visible{outline:1px solid var(--accent);outline-offset:6px}
.hanging-art .id-card img{pointer-events:none;-webkit-user-drag:none}
.hanging-art[data-badge-entry="waiting"] .id-card,.hanging-art[data-badge-entry="waiting"] .badge-strap,.hanging-art[data-badge-entry="waiting"] .badge-hint{opacity:0;pointer-events:none}
.hanging-art[data-badge-entry="dropping"] .id-card{pointer-events:none}
.hanging-art[data-badge-entry="dropping"] .badge-hint{opacity:0}
.badge-hint{position:absolute;left:0;right:0;bottom:-16px;text-align:center;color:#6e657a;font-size:9px;letter-spacing:2px;margin:0;pointer-events:none}
.badge-hint:before{content:'↔';color:#a5a18e;margin-right:10px;font-size:13px}
.motion-off .badge-hint:before{display:none}
@media(max-width:1100px){.hanging-art{height:440px}.hanging-art .id-card{width:min(86%,310px)}}
@media(max-width:760px){.hanging-art{width:min(290px,100%);height:390px;margin-top:64px;align-self:center}.hanging-art .id-card{width:86%;max-height:none}.hanging-art .id-art b{font-size:42px;margin-top:80px}.hanging-art .id-art{padding:30px 16px 55px}.hanging-art .id-bottom{font-size:5px}.badge-hint{bottom:0;font-size:8px;letter-spacing:1.5px}.contact-section{padding-bottom:150px}}
.hanging-art .id-card.has-photo>img{position:absolute;inset:auto;top:20%;left:26%;width:48%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 38%;border:4px solid #f1f3d8;border-radius:9px;box-shadow:0 7px 16px #23352530;z-index:2}.hanging-art .id-card.has-photo .id-art b{position:absolute;top:73%;left:11%;right:8%;margin:0;font-size:clamp(20px,2.2vw,27px);line-height:.96;letter-spacing:-1px;transform:rotate(-4deg)}.hanging-art .id-card.has-photo .id-art b>span{font-size:9px;margin:2px}.hanging-art .id-card.has-photo .id-flower{font-size:160px;right:-18%;top:32%;opacity:.35}.hanging-art .id-card.has-photo .id-bottom{display:none}.hanging-art .id-card>img[hidden]{display:none}

/* Keep the closing message and interactive badge together in one screen. */
#contact{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:5%;padding-top:70px;padding-bottom:90px;min-height:100%;align-content:center}
#contact .contact-copy{min-width:0}
#contact .contact-copy h2{font-size:clamp(48px,6.3vw,90px);margin-top:24px}
#contact .email-link{font-size:clamp(18px,2.2vw,32px);margin-top:28px}
#contact .hanging-art{width:100%;height:clamp(270px,calc(100dvh - 300px),460px);margin-top:0;align-self:center}
#contact .hanging-art .id-card{width:min(86%,calc((100dvh - 320px)*.76),330px);min-width:180px}
#contact .badge-hint{bottom:-8px}
@media(max-width:760px){
 #contact{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;padding-top:60px;padding-bottom:100px;min-height:100%;align-items:center}
 #contact .contact-copy .eyebrow{font-size:6px;letter-spacing:.7px;line-height:1.8;margin-bottom:16px}
 #contact .contact-copy h2{font-size:clamp(28px,7vw,48px);letter-spacing:-2px;margin-top:16px;white-space:nowrap}
 #contact .contact-copy h2 em{margin-left:4px}
 #contact .contact-copy>p:not(.eyebrow){font-size:9px;line-height:1.9;margin-top:20px}
 #contact .email-link{font-size:13px;letter-spacing:0;gap:5px;margin-top:22px;padding-bottom:12px}
 #contact .email-link>span:last-child{font-size:23px}
 #contact .contact-note{font-size:4px;letter-spacing:.7px;line-height:1.8;align-items:flex-start}
 #contact .social-links{gap:12px;margin-top:20px}
 #contact .social-links button{font-size:5px}
 #contact .hanging-art{height:250px;width:100%;margin:0}
 #contact .hanging-art .id-card{width:100%;min-width:0;border-radius:9px;padding:6px}
 #contact .hanging-art .id-art{padding:16px 7px 30px}
 #contact .hanging-art .id-small{font-size:3px;letter-spacing:.8px}
 #contact .hanging-art .id-card.has-photo>img{border-width:2px;border-radius:5px}
 #contact .hanging-art .id-card.has-photo .id-art b{font-size:clamp(12px,3.3vw,22px);letter-spacing:-.6px}
 #contact .hanging-art .id-card.has-photo .id-art b>span{font-size:4px;margin:1px}
 #contact .hanging-art .id-card.has-photo .id-flower{font-size:85px}
 #contact .hanging-art .card-label{left:8px;right:8px;bottom:8px;padding:6px 7px;gap:3px}
 #contact .hanging-art .card-label>span:first-child{font-size:7px;white-space:nowrap}
 #contact .hanging-art .card-label>span:last-child{font-size:2.5px;letter-spacing:.2px}
 #contact .badge-hint{font-size:6px;letter-spacing:.5px;bottom:0}
 #contact footer{bottom:22px;padding-top:16px;gap:14px}
}
#contact .contact-details{display:grid;margin:28px 0 0;font-style:normal;width:100%;max-width:530px}
#contact .contact-row{display:grid;grid-template-columns:42px minmax(0,1fr) 30px;align-items:center;gap:14px;width:100%;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;text-align:left}
#contact .contact-kind{font-size:11px;color:#928c9d;letter-spacing:2px}
#contact .contact-value{font:400 clamp(14px,1.65vw,23px)/1.35 Arial,'Microsoft YaHei',sans-serif;color:var(--text);overflow-wrap:anywhere}
#contact .contact-action{font-size:20px;color:var(--accent);text-align:right}
#contact button .contact-action{font-size:9px;letter-spacing:1px}
#contact .contact-row:hover .contact-value{color:var(--accent)}
#contact .contact-note{margin-top:20px}
@media(max-width:760px){
 #contact .contact-details{margin-top:20px}
 #contact .contact-row{grid-template-columns:22px minmax(0,1fr);gap:5px;padding:11px 0}
 #contact .contact-kind{font-size:8px;letter-spacing:0}
 #contact .contact-value{font-size:10px;line-height:1.5}
 #contact .contact-action{display:none}
 #contact .contact-note{margin-top:16px}
}