/* ══════════════════════════════════════════════════════════════
   黑洞二级页 —— ABOUT / JOURNEY / SKILLS
   🔵 2026-10-18 用户要求：
      「右上角导航里那几个点打开之后，全部都得是黑洞样式」
      「ABOUT 用"联系我"那个黑洞样式，把 PDF 的内容排版进去」
      「技能图谱也用黑洞样式，图谱叠加进黑洞里」
   ══════════════════════════════════════════════════════════════ */

/* ---------- 黑洞内的页容器 ---------- */
.nk-hole .nk-hole-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* 🔴🔴 2026-10-22 R17 用户：「整个内容移到黑洞正中间」——inner 是 flex-start
     （R8 防裁切），内容只有一屏时贴顶、下方留一大片空。
     ✅ overflow-safe 垂直居中：上下 auto margin 把整块推到圆心；
     内容一旦超出，auto margin 自动归 0（回到贴顶），不会重引 R8 的顶部裁切。 */
  margin: auto 0;
  animation: nkPageIn .45s cubic-bezier(.22, 1, .36, 1);
}
@keyframes nkPageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nk-hole .nk-hole-page { animation: none; }
}

/* ═══════════ ABOUT（照 Contact me.pdf 排版）═══════════ */
.nk-page-about .nk-about-face {
  width: calc(112 * var(--s));
  height: calc(112 * var(--s));
  border-radius: 50%;
  background: #1a1a1d center/cover no-repeat;
  border: 1px solid rgba(255, 255, 255, .16);
  margin: 0 auto calc(28 * var(--s));
  flex: none;
}
.nk-page-about .nk-about-title {
  /* 🔴🔴 R2-V-2：标题占圆径 5.96%，Awwwards 惯例 8–12%
     （--s 压缩后 56 只渲染 44px）→ 提到 76
     （@1512 渲染 59.9px = 圆径 8.1%）*/
  font-size: calc(50 * var(--s));
  font-weight: 400;
  letter-spacing: calc(-1 * var(--s));
  color: #fff;
  /* 🔵 2026-10-22 R10-P1-2：用户「两边还有空间，中间留白不够、太挤了」
     → 栏宽全部放开用掉两侧空间，竖向留白按 newsletter 参考图的呼吸感加大。 */
  margin: 0 0 calc(38 * var(--s));
  flex: none;
}
.nk-about-rule {
  /* 🟡 测试报告 #11：1px + .16 对比度几乎不可见（1:1），
     Awwwards 的做法不是加粗而是**拉长**，让它成为构图横线。
     🔵 R10：210 → 260，横线跟着栏宽一起放开。 */
  width: calc(260 * var(--s));
  height: 1px;
  background: rgba(255, 255, 255, .22);
  margin: 0 auto calc(54 * var(--s));
  flex: none;
}
.nk-page-about .nk-about-p {
  /* 🔵 R10：470 → 580（用掉圆内两侧空间），段距 20 → 26 */
  margin: 0 auto calc(26 * var(--s));
  max-width: calc(580 * var(--s));
  font-size: calc(20 * var(--s));
  line-height: calc(30 * var(--s));
  letter-spacing: calc(-0.2 * var(--s));
  color: #d4d4d8;
}
.nk-page-about .nk-about-p.dim { color: #8a8a94; }

/* 12 个胶囊标签 */
.nk-page-about .nk-about-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(9 * var(--s));
  /* 🔵 R10：500 → 620（12 个标签收进两行，行数少＝更透气），上下留白拉开 */
  max-width: calc(620 * var(--s));
  margin: calc(36 * var(--s)) auto calc(38 * var(--s));
}
.nk-page-about .nk-about-tags span {
  /* 🔴🔴 2026-10-18 测试报告 R2-V-1：--s = 100vw/1920
     （@1512=0.7875 / @1280=0.667），要 12px 实际渲染
     需设计px ≥18（@1280 口径）→ 13.5 远远不够。
     ✅ 提到 18（@1512 渲染 14.2 / @1280 渲染 12.0）*/
  font-size: calc(18 * var(--s));
  line-height: 1;
  padding: calc(7 * var(--s)) calc(14 * var(--s));
  border-radius: 999px;
  background: #1c1c20;
  color: #9a9aa4;
  letter-spacing: calc(0.2 * var(--s));
  white-space: nowrap;
}

/* 英文段（更小更淡，PDF 里的层级） */
.nk-page-about .nk-about-en {
  margin: calc(14 * var(--s)) auto 0;
  /* 🔵 R10：460 → 560，与正文栏一起放开 */
  max-width: calc(560 * var(--s));
  /* 🔴 R2-V-1：同样受 --s 压缩 → 提到 18 */
  font-size: calc(20 * var(--s));
  line-height: calc(28 * var(--s));
  /* 🔴 R3-4：#6a6a74 对比度 3.93:1 未达 AA → #7a7a84（4.94:1）*/
  color: #7a7a84;
}

/* 技能图谱入口
   🔴 2026-10-22 用户拍板：ABOUT 页不放「看技能图谱」按钮（元素已从
   buildAbout 移除），样式一并删除。图谱入口只剩右上菜单 SKILLS。 */

/* ═══════════ JOURNEY（时间轴 · R11 二稿：居中竖排）═══════════ */
/* 🔴🔴 2026-10-22（用户「双栏版还是丑」）：
   圆形容器的正确构图是**对称居中**（newsletter 参考图同款），
   左右分栏和圆的几何打架。✅ 年份 → 职位 → 机构 → 摘要竖排列中，
   条目间发丝线；hover 只做颜色变化（用户既定原则）。 */
.nk-tl-list {
  width: 100%;
  max-width: calc(560 * var(--s));
  margin: calc(18 * var(--s)) auto 0;
  display: flex;
  flex-direction: column;
}
.nk-tl-item {
  /* R11：17/15 → 13/11（@1512 四条省 ~56px，一屏放下不滚动） */
  padding: calc(13 * var(--s)) 0 calc(11 * var(--s));
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .10);
  transition: border-color .3s ease;
}
.nk-tl-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .10); }
.nk-tl-item:hover { border-color: rgba(255, 255, 255, .26); }
.nk-tl-item:hover + .nk-tl-item { border-top-color: rgba(255, 255, 255, .26); }

.nk-tl-period {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: calc(15 * var(--s));
  letter-spacing: calc(1.2 * var(--s));
  color: #6a6a74;
  margin-bottom: calc(5 * var(--s));
  transition: color .3s ease;
}
.nk-tl-item:hover .nk-tl-period { color: #a4a4ae; }
.nk-tl-item.study .nk-tl-period { color: #55555c; }

.nk-tl-title {
  font-size: calc(21 * var(--s));
  font-weight: 500;
  color: #fff;
  line-height: 1.3;
  letter-spacing: calc(-0.2 * var(--s));
  margin-bottom: calc(5 * var(--s));
}
.nk-tl-item.study .nk-tl-title { font-weight: 400; color: #c8c8cc; }
.nk-tl-org {
  font-size: calc(14 * var(--s));
  color: #8a8a94;
  letter-spacing: calc(0.5 * var(--s));
  margin-bottom: calc(6 * var(--s));
}
.nk-tl-sum {
  font-size: calc(15 * var(--s));
  line-height: calc(21 * var(--s));
  color: #7a7a84;
  max-width: calc(430 * var(--s));
  margin: 0 auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ═══════════ SKILLS（图谱叠加进黑洞）═══════════ */
/* 🔵 R10：三页页头统一 —— JOURNEY/SKILLS 的引导语降一级灰阶（图谱/时间轴
   本身才是主体），CONTACT 的 lead 保持原版亮白不动。 */
.nk-hole-lead.dim {
  color: #8a8a94;
  max-width: calc(520 * var(--s));
}
.nk-page-graph .nk-hole-lead {
  margin-bottom: calc(6 * var(--s));
  /* 🔵 R10-P1-4（用户「skills 页太丑」）：引导语降级 20 → 18、走 dim 灰阶，
     给图谱让出视觉权重；宽度放开到 520。 */
  font-size: calc(18 * var(--s));
  line-height: calc(26 * var(--s));
  max-width: calc(520 * var(--s));
}
.nk-page-journey .nk-hole-lead {
  margin-bottom: calc(2 * var(--s));
  font-size: calc(18 * var(--s));
  line-height: calc(26 * var(--s));
}
/* 🔴🔴 2026-10-18 修：图谱之前挤在右下角 —— 两个原因：
   ① 父容器 .nk-page-graph 是 flex column，但没给高度约束，
      `flex:1` 在 auto 高度里等于 0 → cy 用 0 尺寸布局再被 min-height 兜，
      出现「容器挤在角落」；
   ② .nk-hole-inner 是 flex center + 圆角 overflow，图谱用 absolute 定位更稳。
   ✅ 改成：容器在黑洞页里绝对定位撑满内层可用区域（圆形安全区内缩 14%）。 */
/* 🔵 图谱页：撑满黑洞内层的安全区（内层已有 15% padding，这里再留一点给标题）
   —— 之前图谱挤在中间一小块，是容器用了 absolute + 上下边距太大。
   ✅ 改成 flex 布局：标题在上、图谱占剩余空间（flex:1），自动填满。 */
.nk-page-graph {
  position: relative;
  width: 100%;
  /* 🔵🔵 2026-10-19 R6-P1-1 修「图谱整体下沉 55.1px」
   *
   * 实测（@1512）：圆心 y=450，图谱墨迹中心 y=505.1，**偏移 +55.1px**，
   * 三档视口完全一致（是固定偏移，不是缩放误差）。
   * 而图谱内容**相对它自己的宿主是居中的**（偏移 -0.2px）
   * → 问题不在求解器，在**容器摆错了位置**。
   *
   * 根因：`inner` 有 padding:13%（=90px），`.nk-page-graph` 又是
   * `justify-content: flex-start` —— 标题 + 说明占了上方 102px，
   * 剩下的全部给 `flex:1` 的图谱容器，于是容器中心必然落在圆心下方
   * （偏移 ≈ (102 + 7.9)/2 + ... ≈ 55px）。
   *
   * ✅ 两个改动一起做：
   *   ① height: 100% → 撑满 inner 的**内容盒**（padding 之内），
   *      而不是被 padding 挤到下半部分；
   *   ② justify-content: center —— 让「标题 + 说明 + 图谱」作为
   *      一个整体在圆内垂直居中，而不是顶端对齐。
   *   实测偏移从 +55.1px 降到 -1.5px（墨迹中心 448.5 vs 圆心 450）。*/
  height: 100%;
  min-height: 0;
  /* 🔵🔵 R6-P1-1 终版：标题与说明**绝对定位**到圆的上部，
     图谱容器占满整个 page。
   *
   * 为什么不能用 flex 居中（试过了，只降到 49.5px）：
   *   flex 布局下「标题+说明」占掉 page 顶部 102px，剩下给 flex:1 的图谱，
   *   图谱中心 = page中心 + (102+?) / 2 ≈ +50px，**怎么调都是偏下**。
   *
   * ✅ 绝对定位把标题/说明从布局流里拿出去 → page 里只剩图谱一个子元素
   *    → flex 居中让图谱中心 == page 中心 == 圆心，偏移归零。
   *    标题用 `position:absolute; top:0` 贴在 page 顶部（= 圆的安全区顶部）。
   */
  justify-content: flex-start;
  /* R12：图谱已绝对定位铺满整圆 → 标题流回到顶部（justify center 会把它压到圆心） */
  padding: calc(24 * var(--s)) 0 0 !important;
}
.nk-page-graph > .nk-hole-title { position: relative; z-index: 3; flex: none; }
.nk-page-graph > .nk-hole-lead  { position: relative; z-index: 3; flex: none; }
.nk-page-graph .nk-hole-title {
  position: relative; z-index: 2; flex: none;
  /* 🔴 R4-P1-4：JOURNEY/SKILLS 标题与 ABOUT 统一（4 : 3.3 : 1）*/
  font-size: calc(50 * var(--s));
  /* 🔵 R6-P1-1：16 → 12，把 4*--s ≈ 3.1px 让给图谱（墨迹覆盖率 7.31% 偏低）*/
  margin-bottom: calc(12 * var(--s));
}
.nk-page-graph .nk-hole-lead { position: relative; z-index: 2; flex: none; }
.nk-graph-in canvas { left: 0 !important; }
.nk-graph-in {
  /* 🔵🔵 R6-P1-1 / R12：绝对定位铺满整个 page（= 圆的内切方盒）。
     R12 用户规格「满铺整个黑洞」：画布必须占满整圆，Vogel 螺旋才能
     铺到圆边（flex:1 时标题占掉顶部 → 圆盘只缩在下半块）。
     标题/说明 z-index:3 浮在上方（见 .nk-page-graph > .nk-hole-*）。*/
  position: absolute;
  inset: 0;
  /* 🔴🔴🔴 2026-10-18 测试报告 R2-P0（实测图谱右移 185px、左半圆全空）：
     `.nk-hole-inner` 的 `text-align:center`（ABOUT/JOURNEY 依赖它居中）
     **继承到了 Cytoscape 的三层 canvas** ——
     canvas 是 position:absolute 且没显式给 left，
     它的静态位置按父级 text-align 计算 → 左移半个自身宽度。
     ✅ 修正：在 .nk-graph-in 链上重置 text-align:left（不动 inner 的 center）。
        再给 canvas 显式 left:0 双保险。 */
  text-align: left;
  /* 🔴 2026-10-18 测试报告 P1-5（实测容器偏圆心 38.4px、三档视口等比偏移）：
     之前的 margin-top:14px 把图谱整体往下推。
     ✅ 去掉margin，靠 flex 自动分配剩余空间 → 容器与圆心严格对齐。*/
  /* 🔵 R6-P1-1：标题/说明改为绝对定位后，本容器独占 page 并居中。
     margin-top 会再次把图谱推下，去掉。*/
  margin: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
  pointer-events: auto;
}
.nk-graph-in .nk-graph-canvas-inner {
  position: relative;    /* 回到文档流，让 flex:1 生效 */
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}
.nk-graph-in canvas { pointer-events: auto; }

/* 图谱详情面板在黑洞里 → 改成圆内浮层，不占整屏 */
/* 详情面板默认滑出圆外（不可见），点节点才滑入 */
.nk-page-graph .nk-graph-panel {
  position: absolute;
  /* 🔴 R2-V-3：之前用 top+bottom 双锚点强行拉高 416px，内容只有 90px（78% 空白）
     → 改成 height:auto + 单锚点，高度跟随内容。*/
  right: calc(4 * var(--s));
  top: calc(74 * var(--s));
  bottom: auto;
  height: auto;
  max-height: calc(300 * var(--s));
  left: auto;
  width: calc(240 * var(--s));
  max-width: 56%;
  padding: calc(18 * var(--s));
  border-radius: calc(10 * var(--s));
  background: rgba(16, 16, 18, .98);
  border: 1px solid rgba(255, 255, 255, .12);
  z-index: 9;
  pointer-events: auto;
  overflow-y: auto;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .32s ease, transform .32s cubic-bezier(.22, 1, .36, 1);
}
/* 🔴🔴 2026-10-18 测试报告 P0-2（实测面板飞出圆外 208px）：
   上面的规则用 top+bottom 双锚点已经把高度定死了，
   再叠 translateY(-50%) 等于凭空上移 50% 高度。
   ✅ 只保留 translateX（横向滑入），去掉 Y。*/
.nk-page-graph .nk-graph-panel.on { opacity: 1; transform: translateX(0) !important; }
/* 🔴 R2-V-1：@1280 渲染 6.33px → 提到 16 */
/* 🔵 R10-P1-4：面板三级字阶收紧（kicker 15 / title 22 / sum 16）——
   之前三级字号接近（20/24/20）层级糊成一团，是「丑」的主要来源之一。 */
.nk-page-graph .nk-graph-kicker {
  font-size: calc(15 * var(--s));
  letter-spacing: calc(0.6 * var(--s));
  color: #7a7a84;
}
.nk-page-graph .nk-graph-title {
  font-size: calc(22 * var(--s));
  margin-bottom: calc(9 * var(--s));
  letter-spacing: calc(-0.3 * var(--s));
}
.nk-page-graph .nk-graph-sum {
  font-size: calc(16 * var(--s));
  line-height: 1.65;
  color: #8a8a94;
}

@media (prefers-reduced-motion: reduce) {
  .nk-tl-item,
  .nk-page-graph .nk-graph-panel { transition: none; }
}


/* ══════════════════════════════════════════════════════════════
   2026-10-19：内容超出一屏时的底部渐隐提示
   ──────────────────────────────────────────────────────────────
   内层 overflow-y:auto 可以滚到底（JOURNEY 5 条时间线在 696px 的圆里
   装不下，必须靠滚动），但滚动条被 scrollbar-width:none 隐藏了，
   用户不知道下面还有内容。
   ✅ 用一个 sticky 的底部渐变遮罩提示「还有内容」：
     贴在 safe-area 底部，随滚动始终可见。*/
.nk-hole-inner::after {
  content: "";
  position: sticky;
  bottom: 0;
  display: block;
  width: 100%;
  height: calc(34 * var(--s));
  margin-top: calc(-34 * var(--s));
  background: linear-gradient(to top, #000 12%, rgba(0, 0, 0, .72) 46%, rgba(0, 0, 0, 0));
  pointer-events: none;
  flex: none;
  /* 内容没超出时不该出现遮罩：用 .nk-hole-scrolled 由 JS 控制 */
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.nk-hole-inner.has-overflow::after { opacity: 1; }