/* ══════════════════════════════════════════════════════════════════════════
   contact.css — 联系页：编辑式联系方式矩阵
   无卡片、无图标。主体只靠排版、细线与留白。
   ══════════════════════════════════════════════════════════════════════════ */

.contact-page {
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ─────────────────────────────────────────────────────────── 标题区 */
.c-head {
  padding: calc(var(--nav-h) + var(--s11)) 0 var(--s10);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  align-items: end;
}
.c-head .eyebrow { grid-column: 1 / -1; margin-bottom: var(--s7); }
.c-head__title {
  grid-column: 1 / span 6;
  margin: 0;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 92px;
  line-height: 1;
  letter-spacing: .06em;
}
.c-head__lead {
  grid-column: 8 / span 5;
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .02em;
  color: var(--ink-muted);
}
.c-head__lead span { display: block; }

/* ─────────────────────────────────────────────────────────── 联系方式矩阵
   三列：编号 / 类型名 / 账号 + 用途说明 */
.c-list { position: relative; margin: 0; padding: 0; list-style: none; }
/* 顶部墨色粗线：页面载入后从左向右画出 */
.c-list::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--ink);
  transform-origin: left;
  animation: draw 1.8s var(--ease-out) .35s both;
}

.c-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  padding: var(--s8) 0 calc(var(--s8) + 4px);
  border-bottom: 1px solid var(--line);
}
/* 悬停：底线由浅灰被墨色从左覆盖，账号轻移，说明文字加深 */
.c-row::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .8s var(--ease-out);
}
.c-row__index, .c-row__name, .c-row__value, .c-row__desc {
  transition: color .5s var(--ease-out), transform .7s var(--ease-out);
}
@media (hover: hover) {
  .c-row:hover::after { transform: scaleX(1); transform-origin: left; }
  .c-row:hover .c-row__value { transform: translateX(8px); }
  .c-row:hover .c-row__desc { color: var(--ink); }
  .c-row:hover .c-row__name { transform: translateX(4px); }
}
.c-row__index { grid-column: 1 / span 2; padding-top: 12px; }
.c-row__name {
  grid-column: 3 / span 3;
  margin: 0;
  padding-top: 5px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--ink);
}
.c-row__main { grid-column: 8 / span 5; }
.c-row__value {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--ink);
  overflow-wrap: anywhere;
  user-select: text;
}
/* 点击复制（site.js 增强，无 JS 时账号仍可手动选中复制） */
.js .c-row__value { cursor: copy; display: inline-flex; align-items: baseline; flex-wrap: wrap; column-gap: 18px; }
.c-hint {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--ink-faint);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), color .3s;
  user-select: none;
}
.c-row:hover .c-hint, .c-row__value:focus-visible .c-hint, .c-hint.is-done { opacity: 1; transform: none; }
.c-hint.is-done { color: var(--accent); }
.c-row__desc {
  margin: var(--s4) 0 0;
  max-width: 440px;
  /* 中文只在标点处换行，不把「文件」这类词拆开 */
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.95;
  letter-spacing: .02em;
  color: var(--ink-muted);
}

.c-end { height: var(--s11); }

/* 入场：逐行上浮，节奏跟随顶线画出 */
.c-row { animation: rise 1.2s var(--ease-out) both; }
.c-row:nth-child(1) { animation-delay: .55s; }
.c-row:nth-child(2) { animation-delay: .70s; }
.c-row:nth-child(3) { animation-delay: .85s; }

/* ─────────────────────────────────────────────────────────── 响应式 */
@media (max-width: 1100px) {
  .c-head__title { font-size: 76px; grid-column: 1 / span 5; }
  .c-head__lead { grid-column: 7 / span 6; }
  .c-row__index { grid-column: 1 / span 3; }
  .c-row__name { grid-column: 4 / span 3; }
  .c-row__main { grid-column: 7 / span 6; }
  .c-row__value { font-size: 26px; }
}

@media (max-width: 720px) {
  .c-head { display: block; padding: calc(var(--nav-h) + var(--s9)) 0 var(--s8); }
  .c-head .eyebrow { margin-bottom: var(--s5); }
  .c-head__title { font-size: 56px; }
  .c-head__lead { margin-top: var(--s5); font-size: 15px; }

  .c-row { display: block; padding: var(--s7) 0; }
  .c-row__index { padding-top: 0; }
  .c-row__name { margin-top: var(--s4); padding-top: 0; font-size: 15px; }
  .c-row__value { margin-top: var(--s2); font-size: 23px; }
  .c-row__desc { margin-top: var(--s3); }
  .c-hint { opacity: 1; transform: none; }
  .c-end { height: var(--s9); }
}