/* Landscape indigo card; original photograph + XY foil, isolated from site effects. */
#contact {padding-bottom:30px}
.contact-orbit{position:relative;width:100%;height:560px;margin-top:18px;isolation:isolate}
.contact-tag-layer{position:absolute;inset:0;perspective:1500px}
.contact-card-arrival{position:absolute;top:80px;left:50%;width:min(580px,86vw);aspect-ratio:1.72;opacity:0;transform:translateX(-50%) translateY(46px) translateZ(-320px) scale(.68) rotateX(15deg) rotateY(-20deg);filter:blur(14px);transition:opacity 1.1s ease,transform 1.65s cubic-bezier(.16,1,.3,1),filter 1.25s ease;pointer-events:none}
.contact-tag-layer.is-visible .contact-card-arrival{opacity:1;transform:translateX(-50%) translateY(0) translateZ(0) scale(1) rotateX(0) rotateY(0);filter:blur(0);pointer-events:auto}
.contact-card-position,.contact-tag-card,.contact-tag-flipper{position:absolute;inset:0;transform-style:preserve-3d}
.contact-tag-card{cursor:grab;touch-action:none;user-select:none;outline:none;--light-x:60%;--light-y:28%;--foil:.23}
.contact-tag-card.is-dragging{cursor:grabbing}
.contact-tag-card:focus-visible{outline:1px solid #b4bdd6;outline-offset:10px;border-radius:19px}
.contact-tag-face{position:absolute;inset:0;overflow:hidden;border:1px solid #363b54;border-radius:19px;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:linear-gradient(115deg,#191829,#101627 66%,#222640);box-shadow:inset 0 1px 1px #ffffff25,inset 0 -2px 2px #0009,0 24px 48px #0008;color:#f4f3f9}
.contact-tag-front{transform:translateZ(2px)}
.contact-tag-back{transform:rotateY(180deg) translateZ(2px)}
.contact-card-copy{position:absolute;z-index:3;top:13%;left:7%;width:42%}
.contact-card-eyebrow{font:8px "DM Mono",monospace;letter-spacing:.17em;color:#aeb1cb}
.contact-card-copy h3{margin:18px 0 5px;font:500 40px/1.1 "Noto Sans SC",sans-serif;letter-spacing:.035em}
.contact-card-en{margin:0;font:11px "DM Mono",monospace;letter-spacing:.18em;color:#e2dfea}
.contact-card-role{margin:24px 0 0;font:10px/1.9 "Noto Sans SC",sans-serif;color:#b4b5cd}
.contact-card-portrait{position:absolute;z-index:1;margin:0;aspect-ratio:1;pointer-events:none;width:80%;right:-10%;bottom:-4%;--portrait-contour:polygon(evenodd,24.4691% 100.0000%,24.3767% 90.2394%,24.6537% 85.0829%,25.0231% 80.5709%,25.5771% 75.4144%,25.8541% 70.6262%,26.0388% 67.6796%,26.6851% 62.7993%,28.7165% 57.7348%,31.5789% 53.7753%,34.8107% 50.9208%,37.9501% 48.9871%,38.4118% 47.4217%,38.6888% 45.6722%,39.5199% 45.1197%,42.1976% 45.3039%,41.8283% 43.0939%,41.4589% 41.2523%,40.9049% 39.2265%,39.3352% 38.7661%,39.0582% 37.8453%,39.5199% 36.9245%,39.1505% 35.7274%,38.5042% 34.2541%,38.3195% 32.3204%,38.7812% 30.5709%,39.6122% 29.5580%,41.1819% 28.8214%,43.7673% 28.7293%,45.7064% 27.5322%,47.9224% 26.9797%,49.9538% 27.3481%,51.7082% 28.7293%,53.6473% 29.4659%,55.3093% 31.2155%,56.0480% 31.0313%,57.0637% 31.3076%,58.8181% 30.9392%,60.4801% 31.2155%,62.5115% 31.9521%,64.6353% 33.0571%,66.0203% 32.8729%,66.8513% 33.6096%,67.7747% 34.5304%,68.4211% 35.6354%,70.1754% 36.3720%,71.7452% 38.1215%,72.8532% 40.3315%,73.4995% 41.8048%,73.2225% 43.6464%,72.0222% 45.9484%,69.4367% 48.3425%,66.4820% 51.1050%,63.9889% 52.7624%,61.1039% 54.2357%,60.2729% 57.0902%,59.7188% 60.1289%,59.5342% 64.0884%,59.4418% 66.2983%,60.0882% 69.4291%,60.1805% 72.7440%,59.6265% 76.3352%,59.9035% 80.0184%,61.4732% 84.0700%,62.4889% 86.9245%,61.8426% 88.5820%,59.7188% 89.7790%,60.0882% 93.9227%,61.5656% 97.0534%,62.2345% 100.0000%,24.4691% 100.0000%,57.8024% 35.7274%,59.8338% 36.7403%,60.3878% 39.1344%,61.8652% 40.4236%,63.7119% 41.4365%,61.2188% 41.8969%,59.4645% 42.6335%,57.8024% 43.9227%,57.9871% 41.9890%,58.1717% 40.5157%,57.8024% 39.2265%,57.9871% 37.3849%,57.8024% 35.7274%,24.4691% 100.0000%)}
/* An intentionally uneven cut-paper backing, separate from the original portrait. */
.contact-card-portrait::before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,#e4e4df 25%,#c9cbd0 62%,#b3b8c2);clip-path:polygon(20% 100%,21% 82%,20% 76%,23% 68%,22% 62%,27% 55%,31% 51%,34% 50%,35% 45%,37% 44%,35% 38%,36% 29%,41% 26%,47% 24%,53% 27%,56% 28%,62% 28%,69% 32%,72% 32%,77% 40%,77% 46%,71% 52%,65% 56%,64% 65%,66% 75%,64% 83%,67% 89%,65% 100%)}
.contact-card-portrait img{position:relative;display:block;width:100%;height:100%;object-fit:cover;clip-path:var(--portrait-contour);filter:grayscale(1) contrast(1.06) brightness(.96)}
.contact-card-portrait::after{content:"";position:absolute;inset:0;clip-path:var(--portrait-contour);background:#5e74a0;mix-blend-mode:color;opacity:.45}
.contact-card-prints{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(120deg,#5a4878 8%,#5e609c 34%,#9de0e9 48%,#c8c6ef 55%,#524276 72%);mask:url("./assets/contact-tag/xinyao-print.svg") 54% -35px/150px 162px repeat;-webkit-mask:url("./assets/contact-tag/xinyao-print.svg") 54% -35px/150px 162px repeat;opacity:var(--foil);mix-blend-mode:screen}
.contact-card-sheen{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse at var(--light-x) var(--light-y),#a5cff425,transparent 52%);mix-blend-mode:screen}
.contact-card-prints{mask-size:210px 228px;-webkit-mask-size:210px 228px;mask-position:55% -30px;-webkit-mask-position:55% -30px}
.contact-card-bottom{position:absolute;z-index:5;bottom:0;left:0;right:0;height:18%;padding:0 6%;display:flex;align-items:center;gap:12px;background:linear-gradient(90deg,#282a3edb,#3642598a 55%,#111c3022);border-top:1px solid #c0c6dd12}
.contact-card-bottom>img{width:27px;height:31px;opacity:.85}
.contact-card-bottom div{display:grid;gap:4px;font-size:9px;color:#e0dfec}
.contact-card-bottom small{font:7px "DM Mono",monospace;color:#adb1c5;letter-spacing:.07em}
.contact-card-side{margin-left:auto;font:7px "DM Mono",monospace;letter-spacing:.08em;color:#b3b7cb}
.contact-tag-back{padding:26px 34px;background:radial-gradient(ellipse at 100% 0,#31304890,transparent 65%),#141827}
.contact-back-heading{display:flex;justify-content:space-between;align-items:center}
.contact-back-heading h3{font-size:20px;letter-spacing:.02em;margin:8px 0 0;font-weight:500}
.contact-back-heading>img{width:35px;height:40px;opacity:.7}
.contact-qr-grid{display:flex;gap:18px;justify-content:center;margin:20px 0 17px}
.contact-qr-item{width:123px;margin:0}
.contact-qr-item a{display:block;background:white;padding:7px;border-radius:3px}
.contact-qr-item a>img{display:block;width:100%;height:auto}
/* The original is untouched; this square viewport shows the complete round code.
   Opening the link displays the full supplied image, including app instructions. */
.contact-qr-item a.contact-douyin-qr{position:relative;aspect-ratio:1;overflow:hidden;padding:0;background:#8e888d}
.contact-qr-item a.contact-douyin-qr>img{position:absolute;width:145%;max-width:none;height:auto;left:-22.5%;top:-26%}
/* Keep the supplied share poster intact; frame its QR with a clear quiet zone. */
.contact-qr-item a.contact-xpc-qr{position:relative;aspect-ratio:1;overflow:hidden;padding:0;background:#fff}
.contact-qr-item a.contact-xpc-qr>img{position:absolute;width:300%;max-width:none;height:auto;left:-100%;top:-238%}
.contact-qr-item figcaption{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:10px;margin-top:8px;color:#d2d5e6}
.contact-qr-item figcaption span{font:6px "DM Mono",monospace;color:#9ba6bf}
.contact-qr-empty{height:123px;border:1px dashed #566078;border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#c6cddd}
.contact-qr-empty span{font-size:16px}.contact-qr-empty small{font-size:9px;color:#a4afc4}
.contact-back-bottom{border-top:1px solid #a4b5e02b;padding-top:12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.contact-back-bottom a{color:#f4f3f9;text-decoration:none;font:13px "DM Mono",monospace;white-space:nowrap}
.contact-back-bottom a span{margin-left:8px;color:#b7c4df}
.contact-back-bottom>span{margin-left:auto;font-size:8px;color:#a7b0c5}
.contact-card-controls{position:absolute;bottom:40px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:18px;font-size:10px;color:#a8b1c3;opacity:0;transition:opacity .5s .8s}
.is-visible .contact-card-controls{opacity:1}
.contact-card-controls button{min-height:44px;padding:0 12px;border:0;border-bottom:1px solid #6f7b9255;color:#e1e5f1;background:transparent;font:11px "Noto Sans SC",sans-serif;cursor:pointer}
.contact-card-controls b{font-size:15px;font-weight:400;margin-left:8px}
.contact-card-controls button:hover{border-color:#b5c3dc;color:white}
.contact-card-controls button:focus-visible,.contact-qr-item a:focus-visible,.contact-back-bottom a:focus-visible{outline:1px solid #becbeb;outline-offset:4px}
.contact-card-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(min-width:1000px){
 #contact{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto auto auto 1fr;column-gap:24px;padding:110px 7vw 45px;align-items:start}
 #contact>.label{grid-column:1;grid-row:1;margin:40px 0 0}
 #contact>h2{grid-column:1;grid-row:2;font-size:clamp(42px,4.6vw,72px);margin:50px 0 30px}
 #contact>.contact-cta{grid-column:1;grid-row:3;justify-self:start}
 #contact>.hint{grid-column:1;grid-row:4;margin-top:20px}
 #contact>.contact-orbit{grid-column:2;grid-row:1 / span 4;height:480px;margin-top:0}
 .contact-card-arrival{width:calc(100% - 26px);max-width:580px;top:70px}
 .contact-card-copy h3{font-size:clamp(28px,3vw,40px)}
 .contact-card-controls{bottom:26px}
}
@media(max-width:760px){
 #contact{padding-bottom:10px}
 .contact-orbit{height:370px;margin-top:0;width:calc(100% + 6vw);margin-left:-3vw}
 .contact-card-arrival{width:min(580px,86vw);top:65px}
 .contact-tag-face{border-radius:12px}
 .contact-card-copy{top:12%}
 .contact-card-eyebrow{font-size:6px;letter-spacing:.12em}
 .contact-card-copy h3{font-size:26px;margin:10px 0 4px}
 .contact-card-en{font-size:8px}
 .contact-card-role{font-size:7px;margin-top:12px}
 .contact-card-bottom{gap:7px}.contact-card-bottom>img{width:19px;height:22px}
 .contact-card-bottom div{font-size:6px;gap:2px}.contact-card-bottom small{font-size:5px}
 .contact-card-side{font-size:5px}
 .contact-card-prints{mask-size:95px 104px;-webkit-mask-size:95px 104px}
 .contact-tag-back{padding:12px 18px}
 .contact-back-heading h3{font-size:13px;margin:4px 0 0}
 .contact-back-heading>img{width:23px;height:28px}
 .contact-qr-grid{gap:12px;margin:10px 0 8px}
 .contact-qr-item{width:78px}.contact-qr-item a{padding:5px}
 .contact-qr-empty{height:78px;gap:5px}.contact-qr-empty span{font-size:12px}.contact-qr-empty small{font-size:7px}
 .contact-qr-item figcaption{font-size:8px;margin-top:4px}.contact-qr-item figcaption span{display:none}
 .contact-back-bottom{padding-top:7px}.contact-back-bottom a{font-size:10px}.contact-back-bottom>span{font-size:6px;max-width:100px;line-height:1.5}
 .contact-card-controls{bottom:30px;gap:8px;font-size:9px}
}
@media(max-width:360px){.contact-orbit{height:345px}.contact-qr-grid{margin-top:7px;gap:10px}.contact-qr-item{width:68px}.contact-qr-empty{height:68px}.contact-back-heading h3{font-size:12px}.contact-back-bottom{padding-top:5px}}
@media(prefers-reduced-motion:reduce){.contact-card-arrival,.contact-card-controls{transition:none;filter:none}}