/* V15 — a quiet invitation, with the same motion language as the project entries. */
#contact { scroll-margin-top:35px; }
#contact .footer-top { padding-bottom:36px; }
.contact-heading { display:flex; align-items:center; gap:20px; margin-bottom:20px; color:var(--muted); }
.contact-heading>span { font:8px var(--mono); letter-spacing:1.8px; }
.contact-heading>p { font-size:12px; margin:0; }
.contact-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; }
.contact-link {
  position:relative; isolation:isolate; overflow:hidden; display:grid;
  grid-template-columns:30px minmax(0,1fr) 24px; align-items:center; gap:17px;
  min-height:100px; width:100%; padding:21px 16px 21px 12px; text-align:left;
  border-top:1px solid var(--accent-line); border-bottom:1px solid var(--accent-line);
  color:var(--ink); background:transparent; text-decoration:none; border-radius:3px;
  transition:color .3s,border-color .3s;
}
.contact-link::before {
  content:""; position:absolute; z-index:-1; inset:-1px; background:var(--ink);
  transform:translateY(105%); border-radius:35% 35% 0 0;
  transition:transform var(--motion-time) var(--motion-ease),border-radius var(--motion-time);
}
.contact-link:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.contact-icon { display:block; width:28px; height:28px; color:var(--accent); transition:transform var(--motion-time) var(--motion-ease),color .3s; }
.contact-icon svg { display:block; width:100%; height:100%; }
.contact-icon-mail svg { stroke:currentColor; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; }
.contact-icon-x,.contact-icon-douyin { color:var(--ink); }
.contact-icon-x { width:24px; height:24px; }
.contact-icon-douyin { width:30px; height:30px; }
.contact-copy { display:flex; flex-direction:column; align-items:flex-start; gap:9px; min-width:0; }
.contact-label { position:relative; display:block; height:21px; overflow:hidden; font-size:14px; line-height:21px; font-weight:500; }
.contact-label>span { display:block; transition:transform var(--motion-time) var(--motion-ease); }
.contact-label>span:nth-child(2) { position:absolute; top:100%; left:0; white-space:nowrap; }
/* Reserve the longer hover label without changing the width of the link. */
.contact-label { min-width:6em; }
.contact-value { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; color:var(--muted); font-size:11px; line-height:1.5; overflow-wrap:anywhere; transition:color .3s; }
.contact-value small { font-size:10px; opacity:.8; }
.contact-arrow { position:relative; display:block; width:24px; height:24px; overflow:hidden; color:var(--accent); transition:color .3s; }
.contact-arrow>i { position:absolute; inset:0; display:grid; place-items:center; font-size:22px; line-height:24px; font-style:normal; transition:transform var(--motion-time) var(--motion-ease); }
.contact-arrow>i:nth-child(2) { transform:translate(-115%,115%); }
.contact-arrow-copy svg { width:20px; height:20px; margin:2px; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--motion-time) var(--motion-ease); }
.contact-feedback { min-height:22px; margin:11px 0 20px; color:var(--accent); font-size:11px; line-height:1.8; }
.contact-link.is-copied .contact-arrow-copy svg { transform:scale(.9); }
.contact-link:focus-visible,.contact-link.is-copied { color:var(--bg); border-color:var(--ink); }
.contact-link:focus-visible::before,.contact-link.is-copied::before { transform:translateY(0); border-radius:0; }
.contact-link:focus-visible :is(.contact-icon,.contact-arrow),.contact-link.is-copied :is(.contact-icon,.contact-arrow) { color:var(--bg); }
.contact-link:focus-visible .contact-value,.contact-link.is-copied .contact-value { color:color-mix(in srgb,var(--bg) 78%,var(--ink)); }
.contact-link:focus-visible .contact-label>span { transform:translateY(-100%); }
.contact-link:focus-visible .contact-icon { transform:translateY(-3px) rotate(-7deg); }
.contact-link:focus-visible .contact-arrow>i:first-child { transform:translate(115%,-115%); }
.contact-link:focus-visible .contact-arrow>i:nth-child(2) { transform:translate(0,0); }
@media (hover:hover) and (pointer:fine) {
  .contact-link:hover { color:var(--bg); border-color:var(--ink); }
  .contact-link:hover::before { transform:translateY(0); border-radius:0; }
  .contact-link:hover :is(.contact-icon,.contact-arrow) { color:var(--bg); }
  .contact-link:hover .contact-value { color:color-mix(in srgb,var(--bg) 78%,var(--ink)); }
  .contact-link:hover .contact-label>span { transform:translateY(-100%); }
  .contact-link:hover .contact-icon { transform:translateY(-3px) rotate(-7deg); }
  .contact-link:hover .contact-arrow>i:first-child { transform:translate(115%,-115%); }
  .contact-link:hover .contact-arrow>i:nth-child(2) { transform:translate(0,0); }
  .contact-link:hover .contact-arrow-copy svg { transform:translate(1px,-1px); }
}
@media (max-width:1000px) {
  .contact-links { gap:15px; }
  .contact-link { gap:12px; padding-left:10px; padding-right:10px; grid-template-columns:26px minmax(0,1fr) 20px; }
  .contact-value { font-size:10px; }
}
@media (max-width:760px) {
  #contact .footer-top { padding-bottom:32px; }
  .contact-heading { gap:15px; margin-bottom:17px; }
  .contact-heading>p { font-size:11px; }
  .contact-links { grid-template-columns:1fr; gap:0; }
  .contact-link { min-height:88px; padding:18px 10px; grid-template-columns:30px minmax(0,1fr) 24px; gap:18px; border-bottom:0; border-radius:0; }
  .contact-link:last-child { border-bottom:1px solid var(--accent-line); }
  .contact-value { font-size:11px; }
  .contact-label { font-size:13px; }
  .contact-copy { gap:6px; }
  .contact-feedback { margin-bottom:14px; min-height:22px; font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .contact-link,.contact-link::before,.contact-link * { transition:none!important; }
  .contact-link:is(:hover,:focus-visible) .contact-icon,.contact-arrow-copy svg { transform:none!important; }
}