/* ============================================================
   个人主页 · Home  —— 复用 style.css 的配色 / 极光 / 页眉页脚
   仅承载：顶部导航、hero、板块卡片。视觉语言与工作日志一致。
   ============================================================ */

/* 顶部板块导航（页眉右侧） */
.topnav {
  margin-left: auto;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12.5px;
}
.topnav a {
  color: var(--ink-2); text-decoration: none;
  padding: 6px 12px; border-radius: 999px;
  transition: color .18s, background .18s;
}
.topnav a:hover { color: var(--accent); background: var(--accent-wash); }

/* ── Hero ─────────────────────────────────────────────── */
.home-view { padding-top: 20px; }
.hero {
  padding: 40px 0 34px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 34px;
}
.hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--ink-4); margin: 0 0 16px;
}
.hero h1 {
  font-weight: 680;
  font-size: clamp(32px, 5.6vw, 52px);
  line-height: 1.05; letter-spacing: -1.4px;
  margin: 0 0 18px;
}
.hero h1 .accent { color: var(--accent); }
.hero h1 .h1-txt { display: inline-block; cursor: default; }
.hero h1 .on { color: var(--accent); }
.hero-lead {
  margin: 0; color: var(--ink-2);
  font-size: 16px; max-width: 52ch;
}

/* ── 板块卡片 ─────────────────────────────────────────── */
.modules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.mod {
  position: relative;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px #10131908, 0 14px 34px -26px #10131926;
  padding: 22px 22px 20px;
  min-height: 148px;
  transition: transform .24s cubic-bezier(.2,.7,.3,1),
              box-shadow .24s, border-color .24s, opacity .28s, filter .28s;
  animation: rise .5s cubic-bezier(.2,.7,.3,1) both;
}
.mod:nth-child(1) { animation-delay: .04s; }
.mod:nth-child(2) { animation-delay: .10s; }
.mod:nth-child(3) { animation-delay: .16s; }
.mod:nth-child(4) { animation-delay: .22s; }

.mod-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.mod-en {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-4);
}
.mod-status {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .5px;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line-2);
}
.mod-status.open   { color: var(--ok);   border-color: #16a34a3d; background: #16a34a0f; }
.mod-status.building { color: var(--ink-4); background: var(--bg-2); }

.mod-title {
  font-size: 21px; font-weight: 660;
  letter-spacing: -.4px; color: var(--ink);
  margin-bottom: 6px;
}
.mod-desc {
  font-size: 13.5px; color: var(--ink-2);
  line-height: 1.55; flex: 1;
}
.mod-go {
  align-self: flex-end;
  font-family: var(--mono); font-size: 18px;
  color: var(--ink-4);
  transform: translateX(0);
  transition: transform .24s, color .24s;
}

/* 悬停：卡片浮起、强调色描边、箭头前移 */
.mod:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 1px 2px #10131908, 0 22px 44px -24px #2b54f440;
}
.mod:hover .mod-go { transform: translateX(4px); color: var(--accent); }
.mod:hover .mod-title { color: var(--accent); }

/* 光标聚焦：悬停某张 → 其余淡化去饱和（与日志列表一致） */
.modules:hover .mod { opacity: .5; filter: saturate(.65); }
.modules .mod:hover { opacity: 1; filter: none; }

/* “可访问”的日志卡片：左上角一道强调色标记，暗示可进入 */
.mod.live::before {
  content: "";
  position: absolute; left: 0; top: 18px;
  width: 3px; height: 26px;
  background: var(--accent); border-radius: 0 3px 3px 0;
}

/* ── 建设中占位页（resume/kb/guestbook 共用） ─────────── */
.wip {
  max-width: 620px; margin: 0 auto;
  padding: 72px 0 40px; text-align: center;
}
.wip-eyebrow {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--ink-4); margin: 0 0 18px;
}
.wip h1 {
  font-weight: 680; font-size: clamp(30px, 5vw, 44px);
  letter-spacing: -1.2px; margin: 0 0 14px;
}
.wip h1 .accent { color: var(--accent); }
.wip p { color: var(--ink-2); font-size: 15px; margin: 0 auto 28px; max-width: 44ch; }
.wip .back {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 13px;
  color: var(--accent); text-decoration: none;
  padding: 9px 18px; border: 1px solid var(--accent);
  border-radius: 999px; transition: background .18s, transform .18s;
}
.wip .back:hover { background: var(--accent-wash); transform: translateX(-2px); }

/* ── 响应式 ───────────────────────────────────────────── */
@media (max-width: 620px) {
  .topnav { width: 100%; margin: 8px 0 0; justify-content: flex-start; }
  .modules { grid-template-columns: 1fr; }
  .hero { padding: 28px 0 26px; }
}