:root {
  --bg: #07080a;
  --panel: #0c0d10;
  --ink: #f4f5f6;
  --soft: rgba(244, 245, 246, .74);
  --muted: rgba(244, 245, 246, .54);
  --faint: rgba(244, 245, 246, .16);
  --line: rgba(244, 245, 246, .14);
  --accent: #f4f5f6;
  --display: "Arial Narrow", "DIN Condensed", "Avenir Next Condensed", "Helvetica Neue", "PingFang SC", sans-serif;
  --body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", system-ui, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* 字号阶梯：13 / 15 / 16-18 / 18-22 / 17-20 / 22-30 / 36-68 / 52-160 */
  --type-caption: .8125rem;
  --type-small: .9375rem;
  --type-body: clamp(1rem, .96rem + .16vw, 1.125rem);
  --type-lead: clamp(1.125rem, 1.04rem + .42vw, 1.375rem);
  --type-h4: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --type-h3: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  --type-h2: clamp(2.25rem, 1.6rem + 2.6vw, 4.25rem);
  --type-display: clamp(3.25rem, 1.2rem + 8.4vw, 10rem);

  /* 字距随字号反向缩放：字越大收得越紧，全大写小标签反向放开 */
  --track-display: -.04em;
  --track-h2: -.03em;
  --track-h3: -.02em;
  --track-body: -.01em;
  --track-label: .06em;

  /* 全站统一缓动 */
  --dur: .4s;
  --ease: cubic-bezier(.4, 0, .2, 1);

  --section-space: clamp(3.25rem, 1.8rem + 4vw, 6rem);
  color: var(--ink);
  background: var(--bg);
  font-family: var(--body);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* 用 clip 而不是 hidden：clip 不会创建滚动容器，子元素的 position:sticky 才能正常工作 */
body { margin: 0; min-width: 0; overflow-x: clip; background: var(--bg); color: var(--ink); font-size: var(--type-body); line-height: 1.7; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; }
figure, p, h1, h2, h3 { margin-top: 0; }

/* DOM 顺序即视觉顺序，不再使用 flex order 重排 */
.page-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: clip;
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
    radial-gradient(circle at 49% 38%, rgba(255,255,255,.035), transparent 36%),
    #050505;
  background-size: 64px 64px, 64px 64px, auto, auto;
}

.section-pad { padding-left: clamp(24px, 5vw, 80px); padding-right: clamp(24px, 5vw, 80px); }

/* ── 导航 ───────────────────────────────────────────── */
.top-nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  height: 76px;
  padding: 0 clamp(24px, 5vw, 80px);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(5,5,5,.94), rgba(5,5,5,.5));
  backdrop-filter: blur(10px);
  font: 500 var(--type-small)/1 var(--body);
  letter-spacing: .02em;
}

.brand {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  color: #080808;
  background: #f4f4f4;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 800;
}

.nav-links { display: flex; align-items: center; justify-self: end; gap: clamp(4px, 1.4vw, 24px); }
.nav-links a { position: relative; min-height: 38px; display: inline-flex; align-items: center; padding: 0 12px; color: var(--soft); }
.nav-links a:hover { color: #fff; }
.nav-links a::after { content: ""; position: absolute; right: 12px; bottom: 2px; left: 12px; height: 1px; background: #fff; transform: scaleX(0); transform-origin: right; transition: transform var(--dur) var(--ease); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links .nav-primary { margin-left: 6px; padding: 0 18px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: var(--ink); transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.nav-links .nav-primary::after { display: none; }
.nav-links .nav-primary:hover { color: #07080a; background: #f2f2f2; border-color: #f2f2f2; }
.draft-mark { display: none; }

.section-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  color: var(--muted);
  font: 500 var(--type-caption)/1.4 var(--mono);
  letter-spacing: var(--track-label);
}

/* ── 首屏 ───────────────────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding-top: 124px;
  padding-bottom: 132px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .7;
  background:
    radial-gradient(circle at 76% 34%, rgba(255,255,255,.025), transparent 28%),
    radial-gradient(circle at 22% 64%, rgba(255,255,255,.028), transparent 26%);
  mask-image: linear-gradient(to bottom, #000, rgba(0,0,0,.45) 70%, transparent);
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 88px;
  right: clamp(24px, 5vw, 80px);
  width: 84px;
  height: 84px;
  border-top: 1px solid rgba(255,255,255,.42);
  border-right: 1px solid rgba(255,255,255,.42);
  box-shadow: inset -12px 12px 0 rgba(255,255,255,.03);
}

/* 全部走正常文档流，避免 absolute 定位在矮视口被 overflow 裁掉 */
.hero .section-meta { padding: 0 0 clamp(36px, 5vh, 72px); }
.hero-title-wrap { position: relative; margin: 0; }

.hero-cn-name {
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  font-family: var(--display);
  font-size: clamp(26px, 2.4vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--track-h3);
}
.hero-cn-name span { color: var(--muted); font: 500 var(--type-caption)/1 var(--mono); letter-spacing: var(--track-label); }



.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.hero-summary { width: min(760px, 90%); margin-top: clamp(36px, 5vh, 56px); }
.hero-role { margin: 0 0 20px; color: var(--soft); font: 400 var(--type-lead)/1.6 var(--body); letter-spacing: .02em; }
.hero-copy { display: block; }
.lead { margin: 0 0 12px; color: var(--ink); font-size: var(--type-lead); line-height: 1.7; }
.muted { margin-bottom: 0; color: var(--muted); font: 500 var(--type-caption)/1.7 var(--mono); letter-spacing: .06em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* 标签整体上移滑出、箭头从下方滑入（单一文本节点，无重复标签） */
.hero-jump { position: relative; overflow: hidden; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 26px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: var(--ink); font: 400 var(--type-small)/1 var(--body); transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.hero-jump > span { display: block; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.hero-jump::after { content: "↗"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.15em; transform: translateY(120%); opacity: 0; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.hero-jump:hover > span { transform: translateY(-140%); opacity: 0; }
.hero-jump:hover::after { transform: none; opacity: 1; }
.hero-jump:hover { border-color: #f2f2f2; }
.hero-jump.primary { color: #07080a; border-color: #f2f2f2; background: #f2f2f2; }
.hero-scroll { position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--muted); font: 500 11px/1 var(--mono); letter-spacing: .16em; }
.hero-scroll i { width: 1px; height: 48px; display: block; background: linear-gradient(#fff 0 35%, rgba(255,255,255,.12) 35% 100%); }

/* ── 区块标题：统一为「中文主标题 + 英文小标签」 ──────── */
.content-section { padding-top: var(--section-space); padding-bottom: var(--section-space); border-bottom: 1px solid var(--line); }
.section-head { max-width: 1440px; margin: 0 auto clamp(2rem, 1.4rem + 1.8vw, 3rem); padding-bottom: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; border-bottom: 1px solid var(--line); }
.section-head h2, .section-label h2 { margin: 0; font-family: var(--display); font-size: var(--type-h2); font-weight: 700; line-height: 1.05; letter-spacing: var(--track-h2); }
.section-head > span, .section-label > span { color: var(--muted); font: 500 var(--type-caption)/1.4 var(--mono); letter-spacing: var(--track-label); }
.section-label { grid-column: 1 / 4; }
.section-label h2 { margin-top: 14px; }
.section-body { grid-column: 5 / 13; }

/* ── 作品集 ─────────────────────────────────────────── */
#works { padding-top: clamp(72px, 7vw, 124px); background: linear-gradient(180deg, #090a0c, #07080a 40%); }
.portfolio-title { margin-bottom: clamp(28px, 2.6vw, 44px); }
.works-cover { margin: 0; }
.works-cover img { border: 1px solid rgba(255,255,255,.1); }
.works-cover figcaption, .portfolio-item figcaption { padding-top: 14px; color: var(--muted); font: 500 var(--type-caption)/1.4 var(--mono); letter-spacing: .06em; }

.portfolio-projects {
  max-width: 1440px;
  margin: 0 auto 40px;
}


/* 左栏钉住、右栏图片滚过（纯 CSS sticky） */
.portfolio-project {
  display: grid;
  grid-template-columns: clamp(230px, 23vw, 330px) minmax(0, 1fr);
  gap: clamp(28px, 3.2vw, 60px);
  align-items: start;
  padding: 64px 0 104px;
  border-bottom: 1px solid var(--line);
}
.portfolio-project-head {
  position: sticky;
  top: 108px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 0;
}
.portfolio-project-head span { color: var(--muted); font: 500 var(--type-caption)/1.5 var(--mono); letter-spacing: var(--track-label); }
.portfolio-project-head h3 { margin: 0; font-family: var(--display); font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.75rem); font-weight: 700; line-height: 1.04; letter-spacing: var(--track-h3); }
.portfolio-project-head p { margin: 4px 0 0; color: var(--soft); font-size: var(--type-small); line-height: 1.85; }
/* 单列大图：作品图是 1600×900 的演示稿，缩到半栏会读不清上面的文字 */
.project-slides { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 4vw, 64px); align-items: start; }
.portfolio-item { position: relative; z-index: 0; margin: 0; transform-origin: center; }
.portfolio-item.single-slide { max-width: none; }
.portfolio-item img { border: 1px solid rgba(255,255,255,.1); background: #111; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.portfolio-media { position: relative; isolation: isolate; overflow: hidden; }
.portfolio-video .portfolio-media img {
  transition: filter var(--dur) var(--ease);
}
.portfolio-media:has(.video-hotspot:hover) img,
.portfolio-media:has(.video-hotspot:focus-visible) img { filter: brightness(.94); }

.video-hotspot {
  position: absolute;
  z-index: 2;
  display: block;
  border-radius: 50%;
  cursor: pointer;
}
.video-hotspot:focus-visible { outline: 2px solid rgba(255,255,255,.84); outline-offset: 3px; }

/* 视频海报本身就是完整播放范围时使用。 */
.video-hotspot-full { inset: 0; border-radius: 0; }

/* 跟随鼠标的播放提示，由 interactions.js 写入位置和当前文案。 */
.video-cursor-label {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  padding: 11px 15px 10px;
  border: 1px solid rgba(7,8,10,.12);
  border-radius: 10px;
  color: #07080a;
  background: rgba(244,245,246,.96);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  font: 650 var(--type-small)/1.2 var(--body);
  letter-spacing: -.01em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: scale(.97);
  transform-origin: left top;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.video-cursor-label.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* 多片段页：每个热区覆盖对应的完整视频画面。 */
.hotspot-p3-1 { left: 0; top: 49%; width: 21.5%; height: 24%; border-radius: 0; }
.hotspot-p3-2 { left: 22%; top: 49%; width: 29.5%; height: 24%; border-radius: 0; }
.hotspot-p3-3 { left: 52%; top: 49%; width: 29.5%; height: 24%; border-radius: 0; }
.hotspot-p3-4 { right: 0; top: 49%; width: 18%; height: 24%; border-radius: 0; }
.hotspot-p26-1 { left: 51.2%; top: 16%; width: 22%; height: 70%; border-radius: 0; }
.hotspot-p26-2 { left: 74.4%; top: 16%; width: 22%; height: 70%; border-radius: 0; }

/* 单视频页：热区严格限制在画面中的实际视频区域。 */
.hotspot-p7 { left: 20.6%; top: 16.5%; right: 2.5%; bottom: 6.6%; border-radius: 0; }
.hotspot-p12 { left: 7.5%; top: 17%; right: 7.5%; bottom: 8%; border-radius: 0; }
.hotspot-p18 { left: 2%; top: 32%; right: 2%; bottom: 9%; border-radius: 0; }
.hotspot-p24 { left: 57.4%; top: 30%; width: 18%; height: 54%; border-radius: 0; }

/* ── 工作与项目经历 ─────────────────────────────────── */
.project-history { background: rgba(4,5,7,.8); }
.project-history-hint { margin: 0; color: var(--muted); font-size: var(--type-body); line-height: 1.6; }
.project-history-hint span { display: inline-block; margin-left: 8px; color: var(--soft); font-size: 1.15em; }
.project-history-list { max-width: 1440px; margin: 0 auto; border-bottom: 1px solid var(--line); }
.project-history-list details { border-top: 1px solid var(--line); }
.project-history-list details:first-child { border-top: 0; }
.project-history-list details[open] { background: radial-gradient(circle at 10% 48%, rgba(255,255,255,.025), transparent 30%); }
.history-summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 56px minmax(0, 1.35fr) minmax(220px, .58fr) 28px; gap: 28px; align-items: start; padding: 30px 0 28px; user-select: none; }
.history-summary::-webkit-details-marker { display: none; }
.history-index { color: #fff; font: 650 20px/1 var(--display); }
.history-identity { min-width: 0; display: block; }
.history-identity > strong { display: block; color: #fff; font-family: var(--display); font-size: var(--type-h3); line-height: 1.14; letter-spacing: -.02em; }
.history-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 20px; }
.history-meta time { margin-right: 10px; color: var(--soft); font: 500 var(--type-small)/1 var(--mono); letter-spacing: .06em; }
.history-tag { padding: 7px 11px 6px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: var(--soft); font: 500 var(--type-caption)/1 var(--mono); letter-spacing: .08em; }
.history-role { color: var(--muted); font-size: var(--type-h4); line-height: 1.4; text-align: right; }
.history-toggle { color: var(--soft); font: 300 25px/1 var(--body); text-align: right; }
.project-history-list details[open] .history-summary { padding-bottom: 22px; border-bottom: 2px solid rgba(255,255,255,.88); }
.project-history-list details[open] .history-toggle { font-size: 0; }
.project-history-list details[open] .history-toggle::after { content: "−"; font: 300 25px/1 var(--body); }
.history-body { padding: 34px 70px 50px 112px; }
.history-lead { max-width: 78ch; margin: 0; color: var(--soft); font-size: var(--type-lead); line-height: 1.85; }
.history-points { max-width: 82ch; margin: 24px 0 0; padding-left: 22px; color: var(--muted); font-size: var(--type-body); line-height: 1.85; }
.history-points li + li { margin-top: 6px; }
.history-stats { max-width: 1120px; margin-top: 36px; padding-top: 30px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.history-stats > span { min-height: 92px; padding-right: 28px; border-right: 1px solid var(--line); }
.history-stats > span + span { padding-left: 28px; }
.history-stats > span:last-child { border-right: 0; }
.history-stats strong { display: block; color: #fff; font-family: var(--display); font-size: clamp(28px, 2.4vw, 48px); line-height: 1; letter-spacing: -.035em; white-space: nowrap; }
.history-stats small { display: block; margin-top: 16px; color: var(--muted); font-size: var(--type-small); line-height: 1.4; }
.history-source { margin: 26px 0 0; }
.history-source a { color: var(--soft); font: 500 var(--type-caption)/1.5 var(--mono); letter-spacing: .06em; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.history-source a:hover { color: #fff; border-bottom-color: #fff; }

/* ── 研究 ───────────────────────────────────────────── */

/* ── 关于我 ─────────────────────────────────────────── */
#about {
  display: block;
  padding-top: clamp(56px, 5vw, 84px);
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
    #050505;
  background-size: 64px 64px;
}
#about .section-label { display: block; padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,.72); }
#about .section-label h2 { margin-top: 20px; }

/* 自我介绍：说服用，放在凭据之前 */
.about-lead { max-width: 62ch; margin: 0; color: var(--ink); font-size: var(--type-lead); line-height: 1.85; letter-spacing: var(--track-body); }

/* 关键数据条：先给硬结果，再给明细 */
.about-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); }
.resume-highlight { display: flex; flex-direction: column; gap: 10px; padding-right: 32px; border-right: 1px solid var(--line); }
.resume-highlight + .resume-highlight { padding-left: 32px; }
.resume-highlight:last-child { border-right: 0; }
.resume-highlight b { color: #fff; font-family: var(--display); font-size: clamp(34px, 3.4vw, 56px); font-weight: 700; line-height: 1; letter-spacing: var(--track-h2); }
.resume-highlight strong { color: var(--ink); font-size: var(--type-small); font-weight: 600; line-height: 1.45; }
.resume-highlight span { color: var(--muted); font: 500 var(--type-caption)/1.4 var(--mono); letter-spacing: var(--track-body); }

#about .section-body { display: grid; grid-template-columns: 220px minmax(0, 1.45fr) minmax(0, .8fr); gap: 40px; align-items: start; max-width: 1560px; margin: clamp(32px, 3vw, 44px) auto 0; padding: 40px 36px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(5,5,5,.82); }

.statement { margin: 0 0 14px; font-size: var(--type-h4); font-weight: 500; line-height: 1.35; letter-spacing: -.01em; overflow-wrap: anywhere; }
.statement span { color: var(--accent); margin-left: 10px; }

.text-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 26px; color: var(--soft); font-size: var(--type-small); line-height: 1.75; }
.text-columns p { margin: 0; }
.text-columns b { color: #fff; font-weight: 600; }

.about-main, .about-side { display: grid; align-content: start; gap: 26px; min-width: 0; }
.resume-block { min-width: 0; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.25); }
.resume-block:last-child { border-bottom: 0; }
.resume-block h3 { display: inline-block; margin: 0 0 14px; padding: 5px 12px; color: #050505; background: #f4f5f6; font-size: var(--type-small); font-weight: 600; line-height: 1.2; }
.about-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; color: var(--soft); font-size: var(--type-small); }
.about-education-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.about-education-grid article { min-width: 0; }
.dense-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.18); }
.dense-head time { color: var(--muted); font: 500 var(--type-caption)/1.3 var(--mono); }
.dense-head strong { font-size: var(--type-h4); }
.about-education-grid p { margin: 10px 0; color: var(--soft); font-size: var(--type-small); line-height: 1.65; }
.about-education-grid ul { margin: 0; padding-left: 17px; color: var(--muted); font-size: var(--type-small); line-height: 1.7; }
.about-side ul { margin: 0; padding: 0; display: grid; gap: 9px; list-style: none; }
.about-side ul li { display: flex; gap: 12px; color: var(--soft); font-size: var(--type-small); line-height: 1.5; }
.about-side ul b { min-width: 44px; color: #fff; font: 500 var(--type-caption)/1.5 var(--mono); }

.profile-sheet {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 44px 0 0;
  border: 0;
  background: transparent;
}
.profile-sheet::before { content: ""; position: absolute; top: 42px; right: 18px; width: 52px; border-top: 1px solid rgba(255,255,255,.52); transform: rotate(-45deg); transform-origin: right center; }
.profile-sheet-label { position: absolute; top: 0; left: 0; font: 700 var(--type-small)/1 var(--display); letter-spacing: .12em; }
.profile-sheet-wordmark { display: block; margin-top: 20px; font: 700 40px/1.45 var(--display); letter-spacing: .18em; }
.profile-sheet img {
  width: 150px;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  margin: 0;
  border: 0;
  background: #fff;
}

/* ── 在线简历入口 ───────────────────────────────────── */
.resume-portal {
  width: min(calc(100% - 60px), 1560px);
  margin: clamp(30px, 3vw, 58px) auto 52px;
  padding: 0;
  color: #080808;
  background: #f3f3ef;
  border: 1px solid rgba(255,255,255,.32);
  overflow: hidden;
}
.resume-portal-copy { display: flex; flex-direction: column; padding: clamp(48px, 4.4vw, 80px); }
.resume-portal-kicker { margin: 0 0 26px; color: #696963; font: 500 var(--type-caption)/1.4 var(--mono); letter-spacing: .12em; }
.resume-portal-copy h2 { max-width: 14ch; margin: 0; font-size: clamp(40px, 3.4vw, 68px); font-weight: 500; line-height: 1.06; letter-spacing: -.045em; }
.resume-portal-summary { max-width: 62ch; margin: 30px 0 0; color: #4b4b47; font-size: var(--type-body); line-height: 1.85; }
.resume-portal-action { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: auto; padding-top: 22px; border-top: 1px solid #080808; font-size: var(--type-body); }
.resume-portal-action b { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid #080808; border-radius: 50%; color: #fff; background: #080808; font-size: 24px; font-weight: 400; }

/* 关键结果卡片（替换原来 4—7px 的微缩简历图） */

/* ── 联系 ───────────────────────────────────────────── */
.contact { padding-top: 68px; }
/* 收敛口号：让位给真正该被点击的联系方式 */
.contact h2 { max-width: 14ch; margin: 44px 0 48px; font-family: var(--display); font-size: var(--type-h2); font-weight: 700; line-height: 1.05; letter-spacing: var(--track-h2); text-transform: uppercase; }
.contact h2 span { color: var(--muted); }
/* 联系方式：整行可点，字号提到 h3 级 */
.contact-links { display: grid; border-top: 1px solid var(--line); }
.contact-links a { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); color: var(--soft); font-family: var(--display); font-size: var(--type-h3); letter-spacing: var(--track-h3); transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease); }
.contact-links a::before { content: attr(data-label); flex: none; color: var(--muted); font: 500 var(--type-caption)/1.6 var(--mono); letter-spacing: var(--track-label); }
.contact-links a:hover { color: #fff; padding-left: 12px; }
.footer-note { margin: 0; padding: 24px 0 34px; color: var(--muted); font: 500 var(--type-caption)/1.4 var(--mono); letter-spacing: .13em; }

/* ── 响应式 ─────────────────────────────────────────── */
@media (max-width: 1180px) {
  .resume-portal { width: calc(100% - 48px); }

  #about .section-body { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; padding: 32px 28px; }
  #about .profile-sheet { grid-column: 1; grid-row: 1; }
  #about .about-main { grid-column: 2; grid-row: 1; }
  #about .about-side { grid-column: 1 / -1; grid-row: 2; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.25); }
  #about .about-side ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 26px; }

  .about-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .section-pad { padding-left: 24px; padding-right: 24px; }
  .top-nav { padding-inline: 24px; grid-template-columns: 1fr auto; }
  .nav-links a:not(.nav-primary) { display: none; }

  .hero { min-height: 0; padding-top: 108px; padding-bottom: 116px; }
    .hero-summary { width: 100%; }

  .grid-12 { display: block; }
  .section-label { margin-bottom: 48px; }

  .portfolio-project { grid-template-columns: 1fr; gap: 32px; padding: 48px 0 72px; }
  .portfolio-project-head { position: static; }

  .history-summary { grid-template-columns: 42px minmax(0, 1fr) 24px; gap: 16px; }
  .history-role { grid-column: 2; grid-row: 2; text-align: left; }
  .history-toggle { grid-column: 3; grid-row: 1; }
  .history-body { padding: 28px 0 42px 58px; }
  .history-stats { grid-template-columns: 1fr 1fr; }
  .history-stats > span:nth-child(2) { border-right: 0; }
  .history-stats > span:nth-child(n+3) { padding-top: 24px; }

  #about { padding-top: 64px; }
  #about .section-body { grid-template-columns: 1fr; gap: 26px; margin-top: 28px; padding: 26px; }
  #about .profile-sheet {
    grid-column: 1;
    grid-row: auto;
    padding: 34px 0 22px;
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 0 26px;
    border-bottom: 1px solid rgba(255,255,255,.25);
  }
  #about .profile-sheet::before { display: none; }
  #about .profile-sheet img { grid-row: 1 / 3; width: 140px; }
  #about .profile-sheet-wordmark { align-self: end; margin: 0; font-size: 34px; line-height: 1.35; }
  #about .about-main, #about .about-side { grid-column: 1; grid-row: auto; }

  .contact-links { grid-template-columns: 1fr; }
  .contact-links > *:nth-child(2), .contact-links > *:last-child { text-align: left; }
}

@media (max-width: 640px) {
  .top-nav { height: 64px; }
  .brand { width: 34px; height: 34px; }
  .hero { padding-top: 92px; padding-bottom: 104px; }
  .hero-actions { flex-direction: column; align-items: stretch; margin-top: 28px; }
  .hero-jump { width: 100%; }
  .hero-scroll { display: none; }

  .resume-portal { width: calc(100% - 28px); margin-top: 36px; }
  .resume-portal-copy { padding: 32px 24px; }

  .history-body { padding: 24px 0 34px 44px; }
  .history-stats { gap: 20px 0; }
  .history-stats > span, .history-stats > span + span { min-height: 74px; padding-left: 0; padding-right: 16px; }
  .history-stats > span:nth-child(even) { padding-left: 16px; }
  .history-stats strong { white-space: normal; }

  #about .section-body { padding: 20px; border-radius: 10px; }
  #about .profile-sheet { grid-template-columns: 108px 1fr; gap: 0 18px; }
  #about .profile-sheet img { width: 108px; }
  #about .profile-sheet-wordmark { font-size: 28px; }
  .about-results { grid-template-columns: 1fr; }
  #about .about-meta, #about .about-education-grid, #about .text-columns, #about .about-side ul { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   交互与动效
   原则：位移一律 10px 量级；全部受 prefers-reduced-motion 保护
   ══════════════════════════════════════════════════════ */

/* ── 首屏进场：分层上浮 ─────────────────────────────── */
@keyframes enter-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.hero .section-meta,
.hero-cn-name,
.hero-dial,
.hero-role,
.hero-copy,
.hero-actions,
.hero-scroll { animation: enter-up .7s var(--ease) backwards; }
.hero-cn-name { animation-delay: .08s; }
.hero-dial    { animation-delay: .22s; }
.hero-role    { animation-delay: .30s; }
.hero-copy    { animation-delay: .38s; }
.hero-actions { animation-delay: .46s; }
.hero-scroll  { animation-delay: .60s; }

/* SCROLL 指示线呼吸 */
@keyframes scroll-breathe {
  0%, 100% { transform: scaleY(1);   opacity: .55; }
  50%      { transform: scaleY(.72); opacity: 1;   }
}
.hero-scroll i { transform-origin: top; animation: scroll-breathe 2.4s var(--ease) infinite .8s; }

/* ── 滚动揭示：只有 10px，内容始终在 DOM 里 ─────────── */
/* 只有确认 JS 可用时才隐藏——否则 JS 失败会让半个页面永久消失 */
.js [data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* ── 经历：展开时内容分段浮现 ───────────────────────── */
.project-history-list details[open] .history-body > * { animation: enter-up .5s var(--ease) backwards; }
.project-history-list details[open] .history-body > *:nth-child(2) { animation-delay: .07s; }
.project-history-list details[open] .history-body > *:nth-child(3) { animation-delay: .14s; }
.project-history-list details[open] .history-body > *:nth-child(4) { animation-delay: .21s; }
.history-summary { transition: background-color var(--dur) var(--ease); }
.history-summary:hover { background: rgba(255,255,255,.028); }
.history-toggle { transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.history-summary:hover .history-toggle { color: #fff; transform: scale(1.18); }

/* ── 作品集：整个作品框（含视频热区与角标）一起放大 ─── */
.portfolio-item { transition: transform var(--dur) var(--ease); }
.portfolio-item:hover { z-index: 3; transform: scale(1.05); }
.portfolio-item img, .works-cover img { cursor: zoom-in; transition: border-color var(--dur) var(--ease); }
.works-cover img { transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.works-cover img:hover { transform: scale(1.05); }
.portfolio-item figcaption, .works-cover figcaption { transition: color var(--dur) var(--ease); }
.portfolio-item:hover figcaption, .works-cover:hover figcaption { color: var(--ink); }

/* ── 灯箱 ───────────────────────────────────────────── */
.lightbox { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.lightbox::backdrop { background: rgba(4,5,7,.94); backdrop-filter: blur(6px); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox-figure { margin: 0; max-width: min(1600px, 94vw); display: flex; flex-direction: column; gap: 14px; animation: enter-up .38s var(--ease); }
.lightbox-figure img { width: auto; max-width: 100%; max-height: 84vh; object-fit: contain; border: 1px solid rgba(255,255,255,.14); background: #111; }
.lightbox-caption { margin: 0; color: var(--muted); font: 500 var(--type-caption)/1.4 var(--mono); letter-spacing: var(--track-label); }
.lightbox-form { position: fixed; top: clamp(16px, 3vw, 32px); right: clamp(16px, 3vw, 32px); margin: 0; }
.lightbox-close { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.26); border-radius: 50%; color: var(--ink); background: transparent; font-size: 15px; cursor: pointer; transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.lightbox-close:hover { color: #07080a; background: #f2f2f2; border-color: #f2f2f2; }

/* ── 尊重系统的减少动态设置 ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* 研究区块的过程图：浅底、单列大图 */

/* ── 首屏圆盘 ───────────────────────────────────────── */
.hero-grid { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.hero-title-wrap { position: relative; display: flex; flex-direction: column; justify-content: center; }

/* SVG 按 1600:760 原比例直接显示，不做裁切、偏移或调色。 */
.hero-dial {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  display: grid;
  place-items: center;
  background: #07080a;
}

.hero-dial-art {
  position: static;
  display: block;
  width: min(100%, 210.5263svh);
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  aspect-ratio: 40 / 19;
  /* 后退：整体压暗 + 四边羽化，让它落到文字后面而不是贴在文字上。
     只降明度和做边缘渐隐，不改色相。 */
  opacity: .42;
  -webkit-mask-image: radial-gradient(118% 128% at 50% 62%, #000 46%, rgba(0,0,0,.72) 72%, transparent 100%);
  mask-image: radial-gradient(118% 128% at 50% 62%, #000 46%, rgba(0,0,0,.72) 72%, transparent 100%);
}

/* 文字一侧再压一档，保证姓名和正文的对比度 */
.hero-dial::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(7,8,10,.92) 0 16%, rgba(7,8,10,.62) 40%, rgba(7,8,10,.18) 70%, transparent 100%);
}

@media (max-width: 1180px) {
}
@media (max-width: 900px) {
}

/* ══ 点缀色：取自参考图（黑底 + 高饱和小色块）══════════
   规则：结构线保持中性灰，颜色只出现在「序号 / 短色条 / 悬停」
   这三类地方，每个区块一色，往下走一圈色相。            */
:root {
  --c-red:    #BD614D;
  --c-orange: #EE7B33;
  --c-yellow: #F2D53C;
  --c-cream:  #F7F0DE;
  --c-pink:   #EFA3B6;
  --c-mint:   #9FD3B4;
  --c-green:  #2F7A55;   /* 深绿：给浅底区块用 */
  --c-blue:   #6E86E8;
  --c-indigo: #2E3192;   /* 深蓝：给浅底区块用 */
  --c-purple: #A379D6;
}

#about           { --sec: var(--c-yellow); }
#project-history { --sec: var(--c-orange); }
#works           { --sec: var(--c-red); }
.resume-portal   { --sec: var(--c-indigo); }  /* 浅底 */
#contact         { --sec: var(--c-purple); }

/* 1｜区块序号上色 —— 最小的一处，也是最像「点缀」的一处 */
#about .section-label > span:first-child,
.content-section .section-head > span:first-child { color: var(--sec); }

/* 2｜标题底线上压一小段实色条 */
.section-head, .section-label { position: relative; }
.section-head::after,
.section-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 68px;
  height: 2px;
  background: var(--sec);
}

/* 3｜几条本来是纯白的粗线，换成本区块的颜色 */
#about .section-label { border-bottom-color: rgba(242,213,60,.55); }
.project-history-list details[open] .history-summary { border-bottom-color: var(--c-orange); }


/* 5｜悬停：把颜色留给「可点」的东西 */
.history-tag { transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.history-tag:hover { color: var(--c-orange); border-color: var(--c-orange); }
.history-source a:hover { color: var(--c-orange); border-bottom-color: var(--c-orange); }
.contact-links a:hover { color: var(--c-purple); }
.contact-links a:hover::before { color: var(--c-purple); }
.lightbox-close:hover { color: #07080a; border-color: var(--c-cream); background: var(--c-cream); }

/* 6｜浅色简历卡：唯一的亮底区块，用蓝色圆钮呼应 */
.resume-portal-action b { border-color: var(--c-indigo); background: var(--c-indigo); }
.resume-portal-kicker { color: var(--c-indigo); }

/* 7｜首屏那个直角标记，用奶白而不是纯白 */
.hero::after { border-color: rgba(247,240,222,.42); }

/* ══ 全站点缀系统：几何色块 × 细线 × 重点文字 ══════════ */
:root {
  --c-red: #BD614D;
  --c-red-ink: #8E493B;
  --c-orange: #F08A34;
  --c-yellow: #F1D33F;
  --c-cream: #F4ECD4;
  --c-pink: #EFA2B4;
  --c-mint: #8EC9A2;
  --c-green: #1C6545;
  --c-fog: #DDE3DF;
  --c-blue: #7187D7;
  --c-indigo: #333085;
  --c-purple: #8D68B1;
  --c-khaki: #CFC48C;
}

/* 导航与首屏：只保留三个高辨识度色点 */
.brand { position: relative; border-color: var(--c-cream); background: var(--c-cream); }
.brand::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 9px;
  height: 9px;
  border: 2px solid #050505;
  border-radius: 1px;
  background: var(--c-red);
}
.nav-links a:nth-child(1)::after { background: var(--c-red); }
.nav-links a:nth-child(2)::after { background: var(--c-yellow); }
.nav-links a:nth-child(3)::after { background: var(--c-mint); }
.nav-links a:nth-child(4)::after { background: var(--c-blue); }
.nav-links .nav-primary:hover { color: #080808; border-color: var(--c-yellow); background: var(--c-yellow); }
.hero .section-meta span:first-child { color: var(--c-cream); }
.hero .section-meta span:last-child { color: var(--c-mint); }
.hero-cn-name { color: var(--c-cream); }
.hero-cn-name span { color: var(--c-pink); }
.hero-role { color: var(--c-khaki); }
.hero-jump.primary { color: #080808; border-color: var(--c-red); background: var(--c-red); }
.hero-jump.primary:hover { color: #080808; border-color: var(--c-orange); background: var(--c-orange); }
.hero-jump:not(.primary):hover { color: var(--c-mint); border-color: var(--c-mint); }
.hero-scroll { color: var(--c-orange); }
.hero-scroll i { background: linear-gradient(var(--c-orange) 0 35%, rgba(240,138,52,.16) 35% 100%); }

/* 每章只认一个主色；短线与菱形重复形成节奏 */
#about { --sec: var(--c-yellow); }
#project-history { --sec: var(--c-orange); }
#works { --sec: var(--c-red); }
.resume-portal { --sec: var(--c-indigo); }
#contact { --sec: var(--c-purple); }
.section-head h2::after,
.section-label h2::after {
  content: "";
  display: inline-block;
  width: .22em;
  height: .22em;
  margin-left: .24em;
  border-radius: 1px;
  background: var(--sec);
  transform: rotate(45deg);
  vertical-align: .2em;
}
.section-head::after,
.section-label::after { width: clamp(52px, 5vw, 82px); height: 3px; border-radius: 99px; }

/* ABOUT：数据与小标题轮换色相，不改变正文颜色 */
.resume-highlight:nth-child(1) b { color: var(--c-red); }
.resume-highlight:nth-child(2) b { color: var(--c-yellow); }
.resume-highlight:nth-child(3) b { color: var(--c-blue); }
.profile-sheet-label { color: var(--c-red); }
.profile-sheet::before { border-top-color: var(--c-yellow); }
.profile-sheet-wordmark { color: var(--c-cream); }
.about-main .resume-block:nth-child(1) h3 { color: #080808; background: var(--c-red); }
.about-main .resume-block:nth-child(2) h3 { color: #080808; background: var(--c-yellow); }
.about-main .resume-block:nth-child(3) h3 { color: var(--c-cream); background: var(--c-indigo); }
.about-side .resume-block:nth-child(1) h3 { color: #080808; background: var(--c-mint); }
.about-side .resume-block:nth-child(2) h3 { color: #080808; background: var(--c-purple); }
.about-side ul b { color: var(--c-mint); }
.dense-head time { color: var(--c-khaki); }

/* EXPERIENCE：橙色是主线，条目编号与统计值轮换 */
.project-history-list details { position: relative; }
.project-history-list details::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: -14px;
  width: 3px;
  border-radius: 99px;
  background: var(--c-orange);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur) var(--ease);
}
.project-history-list details[open]::before { transform: scaleY(1); }
/* 一条经历定一个色：编号和它那一排标签同色，不再逐个标签轮换 */
/* 七条各一色。取参考图那批印刷感的粉质色：彩度接近、明度接近，
   暖冷交替排布，不按色相环顺序走，避免"橙黄绿青蓝紫"那种排队感。 */
.project-history-list details:nth-child(1) { --entry: #E2A0A6; }  /* 陶土粉 暖 */
.project-history-list details:nth-child(2) { --entry: #8FAE84; }  /* 苔绿   冷 */
.project-history-list details:nth-child(3) { --entry: #BCAA6E; }  /* 奶油黄 暖 */
.project-history-list details:nth-child(4) { --entry: #8AA0C4; }  /* 灰蓝   冷 */
.project-history-list details:nth-child(5) { --entry: #D98A55; }  /* 砖橙   暖 */
.project-history-list details:nth-child(6) { --entry: #AE94B8; }  /* 藕紫   冷 */
.project-history-list details:nth-child(7) { --entry: #D4837A; }  /* 赭红   暖 */
.project-history-list .history-index { color: var(--entry); }
.project-history-list details::before { background: var(--entry); }
.history-toggle { color: var(--c-orange); }
.history-meta .history-tag { color: var(--entry); border-color: rgba(255,255,255,.16); opacity: .88; }
.history-meta .history-tag:hover { color: var(--entry); border-color: var(--entry); opacity: 1; }
/* 统计值统一为白：四张并排再上四种色，等于没有重点 */
.history-stats > span strong { color: #fff; }

/* WORKS：色彩仅附着在项目索引、短线与图像 hover */
.portfolio-project { position: relative; --project-accent: var(--c-red); }
.portfolio-project:nth-of-type(6n + 2) { --project-accent: var(--c-orange); }
.portfolio-project:nth-of-type(6n + 3) { --project-accent: var(--c-yellow); }
.portfolio-project:nth-of-type(6n + 4) { --project-accent: var(--c-green); }
.portfolio-project:nth-of-type(6n + 5) { --project-accent: var(--c-blue); }
.portfolio-project:nth-of-type(6n) { --project-accent: var(--c-purple); }
.portfolio-project::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 3px;
  background: var(--project-accent);
}
.portfolio-project-head > span { color: var(--project-accent); }

/* RESEARCH 与简历入口：浅底使用深绿/靛蓝以保证对比 */
/* 中性偏冷的近白，不用米色：暖调在纯黑站里显旧 */
.resume-portal { position: relative; background: #ECECE9; }
.resume-portal::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: min(34%, 360px);
  height: 12px;
  background: linear-gradient(90deg, var(--c-indigo) 0 28%, var(--c-red) 28% 52%, var(--c-yellow) 52% 76%, var(--c-green) 76%);
}
.resume-portal-copy h2 { color: var(--c-indigo); }
.resume-portal-action { border-top-color: var(--c-indigo); }
.resume-portal-action:hover { color: var(--c-red-ink); }

/* CONTACT：三行链接分别回应红、绿、蓝 */
.contact .section-meta span:first-child { color: var(--c-purple); }
.contact .section-meta span:last-child { color: var(--c-khaki); }
.contact h2 span { color: var(--c-pink); }
.contact-links a::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 1px;
  background: currentColor;
  transform: rotate(45deg);
}
.contact-links a:nth-child(1):hover { color: var(--c-red); }
.contact-links a:nth-child(2):hover { color: var(--c-mint); }
.contact-links a:nth-child(3):hover { color: var(--c-blue); }
.footer-note { color: var(--c-khaki); }

a:focus-visible,
summary:focus-visible,
button:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 4px; }

@media (max-width: 900px) {
  .project-history-list details::before { left: -8px; }
  .section-head h2::after, .section-label h2::after { width: .18em; height: .18em; }
}

/* ══ 连续响应式比例系统 ═══════════════════════════════
   桌面与平板连续缩放；只有内容确实放不下时才改单列。
   文字、留白、控件、头像与装饰统一使用同一组流体尺度。 */
:root {
  --content-max: 1600px;
  --content-wide: 1640px;
  --page-gutter: clamp(18px, 5vw, 88px);
  --nav-height: clamp(64px, calc(56px + 1.4vw), 84px);
  --brand-size: clamp(34px, calc(28px + .7vw), 42px);
  --grid-size: clamp(44px, 4vw, 72px);
  --card-radius: clamp(10px, .8vw, 18px);

  --type-caption: clamp(.75rem, .70rem + .14vw, .875rem);
  --type-small: clamp(.875rem, .81rem + .18vw, 1rem);
  --type-body: clamp(1rem, .94rem + .16vw, 1.1875rem);
  --type-lead: clamp(1.0625rem, .98rem + .34vw, 1.4375rem);
  --type-h4: clamp(1.0625rem, .98rem + .3vw, 1.3125rem);
  --type-h3: clamp(1.3125rem, 1.04rem + 1.05vw, 2rem);
  --type-h2: clamp(2.125rem, 1.45rem + 2.8vw, 4.5rem);
  --type-display: clamp(3rem, 1rem + 8.8vw, 10.5rem);
  --section-space: clamp(3rem, 1.5rem + 4.4vw, 6.5rem);
}

.page-shell,
#about {
  background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), auto, auto;
}

.section-pad {
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

.top-nav {
  height: var(--nav-height);
  padding-inline: var(--page-gutter);
}

.brand {
  width: var(--brand-size);
  height: var(--brand-size);
  font-size: clamp(14px, calc(12px + .25vw), 18px);
}

.nav-links { gap: clamp(3px, 1.35vw, 26px); }
.nav-links a {
  min-height: clamp(34px, calc(28px + .7vw), 42px);
  padding-inline: clamp(8px, .65vw, 13px);
}
.nav-links .nav-primary {
  padding-inline: clamp(14px, 1vw, 20px);
}

.hero {
  min-height: 100svh;
  padding-top: calc(var(--nav-height) + clamp(32px, 3vw, 56px));
  padding-bottom: clamp(96px, 7vw, 144px);
}

.hero::after {
  top: calc(var(--nav-height) + clamp(10px, 1vw, 18px));
  right: var(--page-gutter);
  width: clamp(54px, 4.4vw, 92px);
  height: clamp(54px, 4.4vw, 92px);
}

.hero .section-meta { padding-bottom: clamp(30px, 5vh, 72px); }
.hero-cn-name {
  margin-bottom: clamp(14px, 1.2vw, 22px);
  gap: clamp(5px, .45vw, 8px) clamp(12px, 1vw, 18px);
  font-size: clamp(1.625rem, 1.2rem + 1.65vw, 2.625rem);
}
.grid-12 { gap: clamp(14px, 1.4vw, 26px); }
.hero-summary {
  width: min(clamp(560px, 42vw, 820px), 92%);
  margin-top: clamp(30px, 4vh, 60px);
}
.hero-role { margin-bottom: clamp(14px, 1.2vw, 22px); }
.hero-actions {
  gap: clamp(10px, .9vw, 16px);
  margin-top: clamp(28px, 2.6vw, 44px);
}
.hero-jump {
  min-height: clamp(44px, calc(36px + .8vw), 52px);
  padding-inline: clamp(20px, 1.5vw, 30px);
}
.hero-scroll { bottom: clamp(24px, 2vw, 40px); gap: clamp(8px, .7vw, 14px); }
.hero-scroll i { height: clamp(36px, 2.6vw, 52px); }

.section-head,
.portfolio-projects,
.project-history-list { max-width: var(--content-max); }
.section-head {
  padding-bottom: clamp(20px, 1.6vw, 28px);
  gap: clamp(13px, 1.1vw, 20px);
}
.section-label { margin-bottom: clamp(36px, 3.4vw, 54px); }

.portfolio-project {
  grid-template-columns: clamp(220px, 22vw, 360px) minmax(0, 1fr);
  gap: clamp(26px, 3.2vw, 64px);
  padding: clamp(48px, 3.8vw, 72px) 0 clamp(76px, 5.5vw, 112px);
}
.portfolio-project-head { top: calc(var(--nav-height) + clamp(22px, 2vw, 36px)); gap: clamp(10px, .9vw, 16px); }
.project-slides { gap: clamp(32px, 4vw, 68px); }
.works-cover figcaption,
.portfolio-item figcaption { padding-top: clamp(10px, .8vw, 15px); }
.video-cursor-label {
  padding: clamp(9px, .65vw, 12px) clamp(12px, .9vw, 17px);
  border-radius: clamp(8px, .6vw, 11px);
}

.history-summary {
  grid-template-columns: clamp(44px, 3vw, 60px) minmax(0, 1.35fr) minmax(200px, .58fr) clamp(24px, 1.6vw, 30px);
  gap: clamp(18px, 1.8vw, 30px);
  padding: clamp(24px, 1.8vw, 32px) 0;
}
.history-index { font-size: clamp(17px, 1.15vw, 21px); }
.history-meta { gap: clamp(7px, .55vw, 10px); margin-top: clamp(14px, 1.2vw, 22px); }
.history-tag { padding: clamp(6px, .42vw, 8px) clamp(9px, .65vw, 12px); }
.history-body {
  padding: clamp(26px, 2.2vw, 38px) clamp(44px, 3.8vw, 76px) clamp(40px, 3vw, 54px) clamp(80px, 6vw, 120px);
}
.history-points { margin-top: clamp(18px, 1.5vw, 26px); }
.history-stats { margin-top: clamp(28px, 2vw, 40px); padding-top: clamp(24px, 1.7vw, 32px); }
.history-stats > span { min-height: clamp(82px, 5.2vw, 98px); padding-right: clamp(20px, 1.8vw, 30px); }
.history-stats > span + span { padding-left: clamp(20px, 1.8vw, 30px); }
.history-stats small { margin-top: clamp(11px, .9vw, 17px); }

#about { padding-top: clamp(52px, 5vw, 92px); }
#about .section-label { padding-bottom: clamp(20px, 1.6vw, 28px); }
#about .section-body {
  grid-template-columns: clamp(190px, 13vw, 230px) minmax(0, 1.45fr) minmax(0, .8fr);
  gap: clamp(28px, 2.4vw, 44px);
  max-width: var(--content-wide);
  margin-top: clamp(28px, 3vw, 48px);
  padding: clamp(28px, 2.3vw, 44px) clamp(24px, 2.1vw, 40px);
  border-radius: var(--card-radius);
}
.about-results { margin-top: clamp(30px, 2.5vw, 44px); padding-top: clamp(20px, 1.5vw, 28px); }
.resume-highlight { gap: clamp(7px, .6vw, 11px); padding-right: clamp(20px, 1.8vw, 34px); }
.resume-highlight + .resume-highlight { padding-left: clamp(20px, 1.8vw, 34px); }
.about-main,
.about-side { gap: clamp(20px, 1.6vw, 28px); }
.resume-block { padding-bottom: clamp(18px, 1.4vw, 24px); }
.resume-block h3 { margin-bottom: clamp(10px, .8vw, 15px); padding: clamp(4px, .34vw, 6px) clamp(9px, .7vw, 13px); }
.profile-sheet { padding-top: clamp(38px, 2.7vw, 48px); }
.profile-sheet::before {
  top: clamp(36px, 2.6vw, 46px);
  right: clamp(12px, 1.1vw, 20px);
  width: clamp(44px, 3vw, 58px);
}
.profile-sheet img { width: clamp(132px, 10.5vw, 180px); }
.profile-sheet-wordmark { margin-top: clamp(16px, 1.2vw, 22px); font-size: clamp(34px, 2.5vw, 44px); }

.resume-portal {
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--content-wide));
  margin: clamp(30px, 3vw, 60px) auto clamp(42px, 3vw, 56px);
  border-radius: clamp(0px, .3vw, 5px);
}
.resume-portal-copy { padding: clamp(36px, 4.4vw, 84px); }
.resume-portal-kicker { margin-bottom: clamp(18px, 1.5vw, 28px); }
.resume-portal-copy h2 { font-size: clamp(2rem, 1.4rem + 2.7vw, 4.5rem); }
.resume-portal-summary { margin-top: clamp(22px, 1.8vw, 32px); }
.resume-portal-action { gap: clamp(14px, 1.2vw, 22px); padding-top: clamp(16px, 1.4vw, 24px); }
.resume-portal-action b {
  width: clamp(48px, 3.2vw, 62px);
  height: clamp(48px, 3.2vw, 62px);
  font-size: clamp(20px, 1.4vw, 26px);
}

.contact { padding-top: clamp(54px, 4vw, 72px); }
.contact h2 { margin: clamp(32px, 2.8vw, 48px) 0 clamp(36px, 3vw, 52px); }
.contact-links a { gap: clamp(14px, 1.2vw, 22px); padding: clamp(17px, 1.4vw, 24px) 0; }
.footer-note { padding: clamp(20px, 1.5vw, 26px) 0 clamp(28px, 2vw, 38px); }

@media (min-width: 1680px) {
  .portfolio-item:hover,
  .works-cover img:hover { transform: scale(1.045); }
}

@media (max-width: 1180px) {
  #about .section-body {
    grid-template-columns: clamp(170px, 19vw, 210px) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 34px);
    padding: clamp(26px, 3vw, 34px) clamp(22px, 2.7vw, 30px);
  }
  .profile-sheet img { width: clamp(120px, 12vw, 150px); }
}

@media (max-width: 900px) {
  :root { --page-gutter: clamp(18px, 4.2vw, 28px); }
  .section-pad,
  .top-nav { padding-inline: var(--page-gutter); }
  .hero-summary { width: 100%; }
  .portfolio-project {
    grid-template-columns: 1fr;
    gap: clamp(26px, 4vw, 36px);
    padding: clamp(42px, 6vw, 52px) 0 clamp(62px, 8vw, 78px);
  }
  .history-summary {
    grid-template-columns: clamp(34px, 5vw, 44px) minmax(0, 1fr) clamp(22px, 3vw, 26px);
    gap: clamp(12px, 2.5vw, 18px);
  }
  .history-body { padding: clamp(22px, 3vw, 30px) 0 clamp(34px, 5vw, 44px) clamp(44px, 7vw, 60px); }
  #about .section-body {
    grid-template-columns: 1fr;
    padding: clamp(20px, 3.5vw, 28px);
    border-radius: var(--card-radius);
  }
  #about .profile-sheet {
    grid-template-columns: clamp(104px, 15vw, 132px) minmax(0, 1fr);
    gap: 0 clamp(18px, 3vw, 28px);
    padding: clamp(28px, 4vw, 36px) 0 clamp(18px, 3vw, 24px);
  }
  #about .profile-sheet img { width: clamp(104px, 15vw, 132px); }
  #about .profile-sheet-wordmark { font-size: clamp(28px, 4.4vw, 36px); }
  .resume-portal { width: calc(100% - (var(--page-gutter) * 2)); }
}

@media (max-width: 640px) {
  :root { --page-gutter: clamp(16px, 5vw, 22px); }
  .hero { padding-bottom: clamp(82px, 22vw, 104px); }
  .hero-actions { margin-top: clamp(24px, 7vw, 30px); }
  .hero-cn-name { font-size: clamp(1.5rem, 6.6vw, 1.75rem); }
  .portfolio-item:hover,
  .works-cover img:hover { transform: none; }
  .history-body { padding-left: clamp(38px, 11vw, 46px); }
  .history-stats { gap: clamp(16px, 5vw, 22px) 0; }
  #about .section-body { padding: clamp(16px, 5vw, 22px); }
  #about .profile-sheet { grid-template-columns: clamp(94px, 28vw, 112px) minmax(0, 1fr); gap: 0 clamp(14px, 4.5vw, 20px); }
  #about .profile-sheet img { width: clamp(94px, 28vw, 112px); }
  #about .profile-sheet-wordmark { font-size: clamp(24px, 7vw, 30px); }
  .resume-portal-copy { padding: clamp(26px, 8vw, 34px) clamp(20px, 6vw, 26px); }
  .contact-links a { align-items: flex-start; overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
  .history-summary { grid-template-columns: 30px minmax(0, 1fr) 22px; }
  .history-meta time { width: 100%; margin-right: 0; }
  .history-stats { grid-template-columns: 1fr; }
  .history-stats > span,
  .history-stats > span + span,
  .history-stats > span:nth-child(even) {
    min-height: 0;
    padding: 14px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .history-stats > span:last-child { border-bottom: 0; }
  #about .profile-sheet { grid-template-columns: clamp(88px, 27vw, 102px) minmax(0, 1fr); }
  #about .profile-sheet img { width: clamp(88px, 27vw, 102px); }
  .contact-links a::before { min-width: 52px; }
}