/* 首屏三行（人名 / 副标题 / 联系我按钮）之间的间距微调。
   由 tools/hero-tweaks.mjs 挂载；数值想改直接改这里，重跑脚本不会覆盖。

   原站的间距不是用 margin 做的，而是靠 transform: translateY(...) 把后一行往上拉
   （.typed-wrapper 是 -60%，.contact-Btn-wrapper 是 -100%），拉得比较紧：
   副标题顶部比人名底部还高约 12px（视觉上压在人名上），副标题到按钮只有约 6px。
   这里不改那些百分比（它们和一堆按设备写的媒体查询绑在一起），改成给两个 wrapper
   加 margin-top —— margin 是布局位移，和自身 transform 互不干扰，所以间距稳稳地加上去。

   实测（1440×900，改前 → 改后）：
     人名 ↔ 副标题： -11.8px → +12.2px
     副标题 ↔ 按钮： +5.8px  → +19.8px
   用 clamp() 跟着视口高度缩放，手机上不会显得过松。 */

html body .typed-wrapper {
  margin-top: clamp(12px, 2.6vh, 26px);
}

html body .contact-Btn-wrapper {
  margin-top: clamp(8px, 1.6vh, 16px);
}

/* 手机上首屏本来更紧凑，间距按比例收一点 */
@media (max-width: 999px) {
  html body .typed-wrapper {
    margin-top: clamp(10px, 2.2vh, 20px);
  }
  html body .contact-Btn-wrapper {
    margin-top: clamp(6px, 1.4vh, 14px);
  }
}

/* === 移动端首屏：WELL 不拆行 + 内容居中 === */
/* 覆盖原站窄屏下的一串 top/right 百分比 hack（.name-container 的 top:5vh~-18vh、right:-20%、
   .typed-wrapper 的 translateY(-60%)、.contact-Btn-wrapper 的 translate(35%,-100%) 等），
   统一成"整块在视口中间"：宽度给满、去掉横向偏移，再用 vh 位移把内容挪到视口中心。
   实测（390×844）：改前内容中心偏上 145px，改后与视口中心偏差 0。 */
@media (max-width: 999px) {
  html body .name-container {
    position: relative;
    top: -6vh;
    right: 0;
    width: 100%;
    margin-top: 0;
    margin-bottom: 4vh;
    letter-spacing: 0.2em;
  }
  html body .name-highlight {
    width: 100%;
    transform: none;
  }
  /* 保险：W 那一小段内部也不允许断行（真正的断点靠 HTML 里的  ） */
  html body .name-highlight #letter2 {
    white-space: nowrap;
  }
  html body .typed-wrapper {
    width: 100%;
    transform: none;
  }
  html body .contact-Btn-wrapper {
    width: 100%;
    transform: none;
  }
  /* 「联系我」按钮：宽度对齐上方副标题。实际宽度由 vendor/mobile-hero.js 运行时量副标题墨迹后写入
     （副标题在各断点是视口的 36.4% / 27.3% / 30.3%，一个 vw 值覆盖不了整个窄屏范围）；
     这里的 36.4vw 是手机断点的回退值，顺带把按钮水平居中。 */
  html body .contact-Btn {
    width: 36.4vw;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}
/* === 移动端首屏 end === */