.contact-page{background:#243df4;color:#f4f3ee}
.contact-page .header{position:relative;z-index:10;background:#243df4}
.contact-page .brand span{color:#c5cbff}
.contact-page .header nav a:hover,.contact-page .header nav a[aria-current=page]{color:#d9dcff}
.contact-page .header-code{color:#c5cbff}
.contact-page a:focus-visible,.contact-page button:focus-visible{outline:2px solid #fff;outline-offset:4px}
.contact-shell{height:100svh;min-height:650px;display:grid;grid-template-rows:auto 1fr}
.contact-main{min-height:0;display:flex;flex-direction:column;padding:1.5rem clamp(1.4rem,3.5vw,4rem) 2rem}
.contact-intro{min-height:clamp(10rem,24vh,15rem);display:flex;align-items:flex-end}
.contact-intro h1{font-size:clamp(7rem,16vw,21rem);line-height:.72;letter-spacing:-.07em;margin:0 0 1.5rem;font-weight:700}
.contact-intro h1 span{color:#c8ceff}
.contact-channels{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;flex:1;min-height:0}
.contact-channel{min-width:0;position:relative;text-decoration:none}
.x-channel{background:#f3f1ec;color:#171717;padding:clamp(1.4rem,2.6vw,3rem);display:flex;flex-direction:column;justify-content:space-between}
.wechat-channel{appearance:none;border:0;background:transparent;color:#f3f1ec;padding:0;text-align:left;cursor:pointer;perspective:1300px}
.wechat-inner{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.22,.75,.12,1)}
.wechat-channel[aria-pressed=true] .wechat-inner{transform:rotateY(180deg)}
.wechat-face{position:absolute;inset:0;padding:clamp(1.4rem,2.6vw,3rem);display:flex;flex-direction:column;justify-content:space-between;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.wechat-front{background:#171717;color:#f3f1ec}
.wechat-back{background:#f3f1ec;color:#171717;transform:rotateY(180deg)}
.wechat-back img{display:block;align-self:center;width:auto;height:min(70%,19rem);max-width:80%;object-fit:contain;background:#fff}
.channel-index,.channel-bottom{font:400 .8rem var(--mono);letter-spacing:.05em}
.x-channel .channel-index,.x-channel .channel-bottom span{color:#62615e}
.wechat-front .channel-index,.wechat-front .channel-bottom span{color:#aaa}
.wechat-back .channel-index,.wechat-back .channel-bottom span{color:#666}
.channel-title{font-weight:700;font-size:clamp(7rem,15vw,20rem);letter-spacing:-.11em;line-height:.8;margin:auto 0;text-align:center;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.x-channel:hover .channel-title{transform:translateX(.035em)}
.wechat-front .channel-title{font-size:clamp(4rem,7.5vw,10rem);letter-spacing:-.06em}
.channel-bottom{display:flex;justify-content:space-between;gap:1rem;align-items:end}
.channel-bottom strong{font-weight:400}
.channel-bottom span{text-align:right}
.contact-foot{display:flex;justify-content:space-between;padding-top:1.4rem;font:400 .64rem var(--mono);letter-spacing:.05em;color:#c5cbff}
@media(max-width:850px){
  .contact-intro h1{font-size:15vw}
  .channel-title{font-size:14vw}
  .wechat-front .channel-title{font-size:7vw}
  .channel-bottom{flex-direction:column;align-items:flex-start}
  .channel-bottom span{text-align:left}
}
@media(max-width:650px){
  .contact-shell{height:auto;min-height:100svh}
  .contact-main{padding:1.2rem 1.2rem 1.6rem}
  .contact-intro{min-height:10rem}
  .contact-intro h1{font-size:17vw;margin-bottom:1.2rem}
  .contact-channels{grid-template-columns:1fr;min-height:0}
  .contact-channel{min-height:15rem}
  .wechat-channel{min-height:20rem}
  .x-channel,.wechat-face{padding:1.2rem}
  .channel-title{font-size:28vw}
  .wechat-front .channel-title{font-size:14vw}
  .wechat-back img{width:min(62%,13.5rem);height:auto;max-height:65%}
  .channel-index,.channel-bottom{font-size:.68rem}
  .channel-bottom{flex-direction:row;align-items:end}
  .channel-bottom span{text-align:right}
  .contact-foot{font-size:.52rem}
}
@media(prefers-reduced-motion:reduce){.wechat-inner,.channel-title{transition:none}}