/*
  日常外观调整入口：本文件最后加载，会覆盖生成 CSS 的同名属性。
  保存后刷新 Homepage/index.html 即可，无需编译；预览 _site/ 时先运行 prepare_site.py。
  常用属性：font-size 字号，line-height 行距，padding 内留白，margin 外间距，gap 元素间距。
  rgb(... / .2) 的最后一项为不透明度（0 透明，1 不透明）。
*/

/* 导航手写名：优先修改下方三个变量，两个单词一起缩放。 */
.site-brand-handwritten {
  --signature-height: 30px; /* 姓名整体高度，宽度自动等比例变化。 */
  --signature-offset-y: 2px; /* 数值增大向下，减小向上，可以为负数。 */
  --signature-gap: 10px; /* 单词间距：如改为 16px，在当前基础上增加 6px。 */
  display: inline-flex;
  align-items: center;
  gap: var(--signature-gap);
  color: #f4f0fa;
  min-height: 48px;
  flex-shrink: 0;
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}

.site-brand-handwritten .brand-name-en {
  display: block;
  height: var(--signature-height);
  opacity: 1;
  width: auto;
  max-width: none;
  /* 只移动笔迹，不改变导航高度；笔迹颜色在两个 SVG 的 fill 属性中修改。 */
  transform: translateY(var(--signature-offset-y));
  transition: filter .2s ease;
}

/* 鼠标经过增加柔光并上浮 1px；brightness 控制笔迹提亮。 */
.site-brand-handwritten:hover {
  color: #fff;
  filter: drop-shadow(0 0 8px rgb(202 187 255 / .35));
  transform: translateY(-1px);
}

/* 键盘 Tab 聚焦轮廓，保留以便键盘操作。 */
.site-brand-handwritten:focus-visible {
  outline: 2px solid #c4b5fd;
  outline-offset: 5px;
}

.site-brand-handwritten:hover .brand-name-en,
.site-brand-handwritten:focus-visible .brand-name-en {
  filter: brightness(1.2);
}

/* 窄窗口按姓名高度的 83% 显示，只需修改顶部变量。 */
@media (max-width: 900px) {
  .site-brand-handwritten .brand-name-en { height: calc(var(--signature-height) * .83); }
}

/* 系统选择减少动态效果时关闭动画，保留固定位置偏移。 */
@media (prefers-reduced-motion: reduce) {
  .site-brand-handwritten { transition: none; }
  .site-brand-handwritten .brand-name-en { transition: none; }
  .site-brand-handwritten:hover { transform: none; }
}

/* 邮箱胶囊：文字在 HTML 修改；font-size 字号，gap 图标间距，padding 上下/左右留白。 */
.contact-email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgb(255 255 255 / .2);
  border-radius: 999px;
  background: var(--glass);
  color: var(--hero-text);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: inset 0 1px rgb(255 255 255 / .14), 0 10px 28px rgb(5 3 17 / .12);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  backdrop-filter: blur(14px) saturate(145%);
  cursor: text;
  user-select: text;
}

.contact-email svg {
  flex-shrink: 0;
}

.hero-links > .social-link,
.hero-links > .social-link-disabled {
  flex-shrink: 0;
}

/* 导航锚点：只保留一次顶部偏移，避免 scroll-padding 和 scroll-margin 叠加。
   65px 是固定导航高度（含细边框），16px 是标题/照片与导航下缘的距离。
   希望停靠更紧凑时减小 --anchor-gap；无需修改各栏目的正常布局留白。 */
html {
  --navigation-height: 65px;
  --anchor-gap: 16px;
  scroll-padding-top: calc(var(--navigation-height) + var(--anchor-gap));
}
#about {
  scroll-margin-top: 20px;
}
#education, #publications, #research, #gallery {
  scroll-margin-top: 0;
}
/* 最后一个栏目保留足够滚动空间，Gallery 标题也能到达导航下方。 */
main > section:last-child {
  min-height: calc(100svh - var(--navigation-height));
}

/* Product Design 方案 C：通栏简介 + 轻量论文列表 + 紧凑科研瀑布流。
   日常微调集中在这里，不需要新增框架或编译步骤。 */
:root { --surface-shadow: 0 12px 36px rgb(48 34 90 / .045); }
body { background: var(--canvas); }
.hero-inner { padding-top: 104px; padding-bottom: 52px; }
.hero-grid { grid-template-columns: minmax(0, 1fr) 224px; gap: 20px; align-items: center; }
.hero-copy { grid-column: 1; grid-row: 1; }
/* 圆形头像：width/height 同时修改保持圆形；margin-top 控制整框位置。
   translate 的两项分别向右/向下偏移，scale 略放大确保图片覆盖圆框。 */
.hero-portrait { grid-column: 2; grid-row: 1; width: 224px; height: 224px; border-radius: 50%; justify-self: center; align-self: start; margin-top: 26px; border: 0; background: transparent; box-shadow: 0 10px 30px rgb(5 3 20 / .2); }
.hero-portrait img { transform: translate(2%, 2%) scale(1.08); transform-origin: 50% 50%; object-position: 50% 50%; }
html[data-theme="night"] .hero-portrait { box-shadow: 0 10px 30px rgb(47 32 69 / .13); }
/* 近况段：行内徽标、申请句加粗下划线；研究目标紧接后文，不强制另起一行。 */
.about-note { margin-top: 28px; }
.about-note .hero-bio { max-width: none; font-size: 15px; line-height: 1.85; }
.note-prefix { display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-size: 13px; font-style: normal; font-weight: 600; line-height: 1; letter-spacing: .055em; padding: 8px 11px; border-radius: 7px; background: rgb(223 214 255 / .14); margin: 0 8px 0 0; vertical-align: middle; transform: translateY(-1px); color: #eee8ff; white-space: nowrap; }
.opportunity-sentence { font-size: 15.5px; line-height: 1.6; color: #fff; font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgb(255 255 255 / .45); }
.ambition-sentence { display: inline; max-width: none; color: var(--hero-text); }
html[data-theme="night"] .note-prefix { background: rgb(94 70 132 / .1); color: #514965; }
html[data-theme="night"] .opportunity-sentence { color: #31213e; text-decoration-color: rgb(49 33 62 / .4); }
/* 联系图标外框：宽高为圆形按钮尺寸，SVG 大小仍由 HTML 控制。 */
.hero-links > .social-link,
.hero-links > .social-link-disabled { width: 36px; height: 36px; min-height: 36px; }
.hero-links > .contact-email { min-height: 36px; padding-inline: 13px; }
.hero-copy h1 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 40px; font-weight: 700; line-height: 1.14; letter-spacing: normal; }
/* 方案 C：左文右图；兴趣并入简介。姓名的中英文共用系统字体、字号与字重，中文不在两个字间拆行。 */
.name-zh { display: inline-block; margin-inline-start: .3em; white-space: nowrap; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
.hero-bio { font-size: 15.5px; line-height: 1.75; }
.hero-bio p + p { margin-top: 19px; }
.hero-bio .interests-paragraph { color: #eceaf8; }

.advisor-link { color: var(--hero-accent); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(183 187 255 / .4); }
.advisor-link:hover { text-decoration-color: currentColor; }
.advisor-link:focus-visible { outline: 2px solid var(--hero-accent); outline-offset: 4px; }
.hero-links { margin-top: 24px; }
html[data-theme="night"] .hero-bio .interests-paragraph { color: var(--hero-text); }


.section-shell { padding-block: 48px; }
.education-bridge .section-shell { padding-block: 52px; }
.section-heading { margin-bottom: 28px; }
.section-heading h2 { font-weight: 620; }

/* 论文是信息列表：取消单篇卡片边框、上浮与阴影，保留行分隔。 */
.publication-card {
  padding: 20px 0; border: 0; border-bottom: 1px solid var(--surface-line);
  border-radius: 0; background: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.publication-card:hover,
html[data-theme="night"] .publication-card:hover { transform: none; box-shadow: none; }
.publication-card h3 { font-size: 16px; font-weight: 620; line-height: 1.45; }
.publication-authors, .publication-meta { font-size: 13px; }
.publication-list { margin-top: -12px; }
.publication-list > .publication-card { margin-top: 0; }
.doi-link {
  padding: 8px 0 8px 12px; border: 0; background: transparent;
  font-size: 12px; color: var(--light-accent);
  text-decoration: underline; text-underline-offset: 4px;
}
.doi-link:hover,
html[data-theme="night"] .doi-link,
html[data-theme="night"] .doi-link:hover { background: transparent; border: 0; }
.doi-link:hover, html[data-theme="night"] .doi-link:hover { color: var(--ink); }

/* 科研卡片：桌面两列，窄窗口一列；columns 让长短插图自然错落。
   图像没有固定高度：height:auto + object-fit:contain 完整保留内容。
   正文不使用负 margin 或绝对定位，不覆盖图片；只保留卡片自身反馈。 */
.research-grid { display: block; columns: 2; column-gap: 24px; }
/* 只有一个项目时居中收窄；新增卡片后自动恢复双列，无需修改 HTML。 */
.research-grid:has(> .research-card:only-child) { columns: 1; max-width: 680px; margin-inline: auto; }
.research-grid .research-card {
  display: block; width: 100%; break-inside: avoid;
  margin-bottom: 24px; border-radius: 22px;
  box-shadow: 0 12px 32px rgb(48 34 90 / .045);
}
.research-card:hover { border-color: rgb(111 90 167 / .38); }
.research-figure { padding: 28px 24px 16px; }
.research-figure img { height: auto; width: 100%; object-fit: contain; transform: none; transition: none; }
.research-card-content { margin-top: 0; padding: 18px 22px 22px; }
.research-card-content h3 {
  font-size: 19px; font-weight: 630; line-height: 1.35;
  letter-spacing: -.015em; text-wrap: balance;
}
.research-card-content .research-label {
  margin-bottom: 10px; font-size: 10px; line-height: 1.7; letter-spacing: .055em;
}
.research-card-content .research-summary { margin-top: 8px; font-size: 14px; line-height: 1.75; text-wrap: pretty; }
.research-card-content .research-link { margin-top: 14px; font-size: 13px; line-height: 1.5; text-underline-offset: 5px; }
.research-link:hover, .research-link:focus-visible { text-decoration: underline; }

/* Gallery 尚无照片：占位文字不套卡片。保留上面的最小栏目高度供锚点定位。 */
.empty-state { min-height: 0; padding: 12px 0; border: 0; background: transparent; justify-content: start; }

/* 当前栏目提示：脚本设置 aria-current；日/夜保持各自清晰的字色。 */
.nav-link { position: relative; }
.nav-link[aria-current="location"] { color: white; }
.nav-link[aria-current="location"]::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -10px;
  height: 2px; border-radius: 2px; background: #b9a3ef;
}
html[data-theme="night"] .nav-link[aria-current="location"] { color: #382b51; }
@media (max-width: 900px) {
  .hero-copy h1 { font-size: 40px; }
  .hero-inner { padding-top: 104px; }
}
@media (max-width: 759px) { .research-grid { columns: 1; } }

/* Education：学位与专业保持同一行的自然换行；学位稍重，专业颜色柔和。 */
.education-copy h3 { font-size: 15px; line-height: 1.6; font-weight: 400; letter-spacing: 0; }
.education-degree { font-weight: 600; }
.education-major { font-weight: 400; }
.education-major, .education-copy p { color: #646078; }
html[data-theme="night"] .education-major,
html[data-theme="night"] .education-copy p { color: #b9b3c9; }


/* 品牌图标沿用原色：GitHub 黑/白，ORCID 绿色白字；CV 保留禁用状态。 */
.hero-section .github-link { color: #fff; }
/* GitHub 与 ORCID 使用相同尺寸，调整图案大小不影响外层按钮。 */
.github-icon, .orcid-id { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.hero-section .social-link-disabled .cv-icon { color: #dad5ec; }
html[data-theme="night"] .hero-section .github-link { color: #25212c; }
html[data-theme="night"] .hero-section .social-link-disabled .cv-icon { color: #625b75; }
/* 日间 About：深紫色渐变加入少量蓝紫色光晕，不新增色块。 */
html:not([data-theme="night"]) { --hero: radial-gradient(ellipse 42% 78% at 90% 16%, rgb(162 102 221 / .35), transparent 78%), radial-gradient(ellipse 48% 72% at 8% 96%, rgb(85 89 185 / .27), transparent 80%), linear-gradient(138deg, #09091b 0%, #171337 50%, #2b235c 100%); }