:root {
  --bg: #ffffff;
  --ink: #0b0b0b;
  --ink2: #2b2b2b;
  --muted: rgba(17, 17, 17, 0.6);
  --giotto: #0000ff;
  --scroll: #bbd2fc;
  --font:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --top: 42px;
  --side: clamp(22px, 6vw, 88px);

  --navSpace: 150px;
  --navH: calc(var(--top) + 14px + 22px);

  --work-gap-x: 36px;
  --work-gap-y: 30px;

  --slash-gap: 6px;
  --nav-drop: 8px;
}

* {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable both-edges;

  background-color: #f6faf8; /* 带一点暖绿的冷白 */

  background-image:
    radial-gradient(
      2200px 1500px at 68% 6%,
      rgba(120, 175, 185, 0.07),
      transparent 72%
    ),
    radial-gradient(
      2600px 1900px at 18% 85%,
      rgba(165, 205, 195, 0.05),
      transparent 78%
    ),
    radial-gradient(
      3200px 2400px at 50% 50%,
      rgba(130, 120, 140, 0.012),
      transparent 92%
    );
  background-size:
    100% 100%,
    100% 100%,
    100% 100%;
  background-position:
    0 0,
    0 0,
    0 0;
}

html,
body {
  min-height: 100%;
  height: auto;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  /* background-color: var(--bg); */

  background: transparent; /* 让 body 不再重复画一遍 */

  /* filter: contrast(1.06) brightness(1.01); */
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  opacity: 0.05; /* ✅ 提高一点：0.08~0.14 */
  mix-blend-mode: soft-light; /* ✅ 比 multiply 更适合白底“天光” */
  filter: contrast(140%); /* ✅ 把噪点从“不可见”推到“可见但不脏” */

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  background-size: 180px 180px;

  transform: translateZ(0);
  will-change: transform;

  background-repeat: repeat;
  background-position: 0 0;
  backface-visibility: hidden;
}

/* 顶部三词：左/中/右 */
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 9999;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

  padding: var(--top) var(--side) 14px;
  pointer-events: none;

  background: transparent; /* ✅ 融入背景 */

  will-change: transform, opacity;
  transition: none;
}

.topnav.is-hidden {
  transform: translateY(-110%); /* ✅ 平滑滑上去 */
  opacity: 0; /* ✅ 同时淡掉 */
}

.topnav a {
  pointer-events: auto;
  text-decoration: none;
  color: var(--ink);
  font-size: 18px;
  letter-spacing: 0.02em;
  position: relative;
}

.topnav a:hover {
  opacity: 0.65;
}

/* 默认不显示 */
.topnav a::after {
  content: "";
  display: inline-block;
  width: 2px; /* ✅ 粗细：1px 最像 Pages；想更细试 0.75px */
  height: 0.9em; /* ✅ 高度跟字体走 */
  background: currentColor; /* ✅ 跟文字同色 */
  margin-left: 4px;
  opacity: 0;
  transform: translateY(0.08em); /* ✅ 微调垂直对齐，可改 0~0.12em */
}

.topnav.is-erasing a::after {
  opacity: 1;
  animation: blink 1s infinite;
}

.nav-left {
  justify-self: start;
}
.nav-mid {
  justify-self: center;
}
.nav-right {
  justify-self: end;
}

/* ===== work page: "work / paintings" ===== */
body[data-page^="work"] .topnav .nav-midWrap {
  justify-self: center;
  position: relative;
  /* --- 关键修改：改为 flex 并锁定基线 --- */
  display: inline-flex;
  align-items: baseline;
  /* ---------------------------------- */
  pointer-events: auto;
  z-index: 4;
}

/* hover bridge (does NOT affect layout) */
body[data-page^="work"] .topnav .nav-midWrap::after {
  content: "";
  position: absolute;
  left: 0;
  top: -10px;
  right: -220px;
  bottom: -22px; /* ✅ 覆盖到往下滑出的区域 */
  pointer-events: auto; /* ✅ 关键：以前是 none，会导致跳 */
  background: transparent;
  z-index: 1;
}

/* paintings link */
body[data-page^="work"] .topnav .nav-midWrap .nav-extra {
  position: absolute;
  left: 100%;
  top: 0;
  z-index: 2; /* 要在 bridge 上面 */

  margin-left: var(--slash-gap);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: rgba(11, 11, 11, 0.72);
  text-decoration: none;
  border-bottom: 0 !important;
  white-space: nowrap;

  opacity: 0;
  visibility: hidden;
  pointer-events: auto;

  /* ✅ 起点：更靠“work”附近（左上），准备往右下滑出 */
  transform: translate(-6px, 1px);

  vertical-align: baseline;

  transition:
    opacity 420ms ease,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    /* ← 加这行 */ visibility 0s linear 420ms,
    color 220ms ease;
}

/* 确保 hover 时依然有蓝色反馈 */
body[data-page="work-paintings"] .nav-extra.is-current:hover {
  color: var(--giotto);
}

/* slash */
body[data-page^="work"] .topnav .nav-midWrap .nav-extra::before {
  content: "/";
  margin-right: var(--slash-gap); /* ✅ 右侧间距：/ 到 paintings */
  color: rgba(11, 11, 11, 0.38);
}

/* show */
body[data-page^="work"] .topnav .nav-midWrap:hover .nav-extra,
body[data-page^="work"] .topnav .nav-midWrap:focus-within .nav-extra,
body[data-page^="work"] .topnav .nav-midWrap .nav-extra:hover {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 8px);
  transition:
    opacity 420ms ease,
    transform 1000ms cubic-bezier(0.22, 1, 0.36, 1),
    /* 入场可以稍慢 */ visibility 0s,
    color 220ms ease;
}

/* 1. 确保在 work 页面，hover 到容器时，里面的文字变淡 */
body[data-page^="work"] .topnav .nav-midWrap:hover .nav-mid {
  opacity: 0.65;
}

/* 2. 修复可能存在的层级问题，确保文字在 bridge 之上 */
body[data-page^="work"] .topnav .nav-midWrap .nav-mid {
  position: relative;
  z-index: 2; /* 确保它在 ::after bridge 之上 */
  transition: opacity 220ms ease;
}

body[data-page^="work"] .topnav .nav-midWrap .nav-extra:hover {
  color: var(--giotto);
  opacity: 0.9;
}

/* 页面留白 */
.page {
  min-height: 100vh;
  padding: calc(var(--navH) + 48px) var(--side) 80px;
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* ===== unify start line: remove top margin of first content ===== */
.page > :first-child {
  margin-top: 0;
}
.page .block > :first-child {
  margin-top: 0;
}
.page .block > :first-child > :first-child {
  margin-top: 0;
}

/* 之后你往每页放内容时用 */
.block {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.poem {
  white-space: pre-wrap;
  margin: 1.2em 0;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
}

/* --- 修正：Paintings 页面下的导航栏表现 --- */

/* 1. 强制让 paintings 链接在当前页显示并滑出 */
body[data-page="work-paintings"] .topnav .nav-midWrap .nav-extra.is-current {
  color: var(--ink);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* 关键：在当前页时直接处于 8px 的滑出位置，不要缩回去 */
  transform: translate(0, 8px);
}

/* 2. 修正：在 paintings 页面 hover 到 work 时，work 变淡 */
body[data-page="work-paintings"] .topnav .nav-midWrap:hover .nav-mid {
  opacity: 0.65;
}

/* 3. 修正：在 paintings 页面 hover 那个 "/ paintings" 标签时变蓝色 */
body[data-page="work-paintings"]
  .topnav
  .nav-midWrap
  .nav-extra.is-current:hover {
  color: var(--giotto) !important;
  opacity: 1;
}

/* 4. 优化：确保 bridge 覆盖范围足够，防止鼠标滑向 "/ paintings" 时菜单消失 */
body[data-page^="work"] .topnav .nav-midWrap::after {
  content: "";
  position: absolute;
  left: 0;
  top: -10px;
  right: -120px; /* 适当缩短一点，避免干扰右侧导航 */
  bottom: -30px; /* 增加底部判定范围 */
  background: transparent;
  z-index: 1;
}

/* --- 导航栏擦除状态专用补丁（替换原有全部 is-erasing 相关规则）--- */

/* 1. 锁定 midWrap 布局，防止文字消失时容器塌陷 */
.topnav.is-erasing .nav-midWrap {
  display: inline-flex !important;
  align-items: baseline !important;
  height: 1.2em;
}

/* 2. midA 擦除时禁用过渡和位移 */
.topnav.is-erasing .nav-mid {
  display: inline-block !important;
  white-space: pre !important;
  transition: none !important;
  transform: none !important;
  margin: 0 !important;
  vertical-align: baseline !important;
}

/* 3. extra 擦除时同样锁定
   注意：paintings 页面在 RETRACT 阶段 is-erasing 不会激活，
   所以这里不会干扰收回动画，不需要 paintings 专属覆盖 */
.topnav.is-erasing .nav-extra {
  display: inline-block !important;
  white-space: pre !important;
  transition: none !important;
  transform: none !important;
  visibility: visible !important;
  margin: 0 !important;
  vertical-align: baseline !important;
}

/* 4. 擦除时隐藏斜杠伪元素（JS 直接控制文字） */
.topnav.is-erasing .nav-extra::before {
  display: none !important;
}

/* ===== bio content ===== */
.bio {
  max-width: 600px;
}

/* Bio: strict 3/5 blank + 2/5 text (center-right) */
body[data-page="bio"] .bioLayout {
  max-width: 1100px;
  display: grid;
  grid-template-columns: 5fr 6fr; /* 左图：右文 ≈ 45:55 */
  column-gap: 48px;
  align-items: start;
}

/* 左栏：图片 */
body[data-page="bio"] .bioImg {
  position: sticky;
  margin-left: auto;
  margin-right: auto;
  top: calc(var(--navH) + 58px); /* 跟随页面顶部偏移，滚动时贴住 */
}

body[data-page="bio"] .bioImg img {
  width: 300px;
  height: auto;
  display: block;
  /* 竖版图片，不裁切，保留全图 */
}

body[data-page="bio"] .bio {
  grid-column: 2;
  max-width: none;
  margin: 0;
}

.h1 {
  margin: 0 0 22px 0;
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1.12;
}

.h1 .sub {
  display: block;
  font-weight: 400;
  font-size: 16px;
  margin-top: 8px; /* ✅ 控制 title 和 subtitle 的距离 */
  line-height: 1.2;
  opacity: 0.9;
}

.h2 {
  margin: 28px 0 10px 0;
  font-family: var(--font);
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
}

.bio p {
  margin: 0 0 14px 0;
  line-height: 1.75;
  font-size: 16px;
}

body[data-page="bio"] .page a,
body[data-page="contact"] .page a,
body[data-page="research"] .page a,
body[data-page="work"] .page a {
  border-bottom: 1px solid rgba(17, 17, 17, 0.35);
  text-decoration: none;
}

.page a:not(.workCard):hover {
  border-bottom-color: rgba(17, 17, 17, 0.7);
  opacity: 0.85;
}

.list {
  margin: 0;
  padding-left: 18px;
  line-height: 1.6;
  font-size: 15px;
}

.y {
  display: inline-block;
  width: 52px;
  color: var(--muted);
}

.asideLine {
  margin-top: 22px;
  font-size: 18px; /* 你可调 */
  line-height: 1.2;
  text-align: right; /* 宽屏靠右 */
  padding-right: 18%; /* 不用固定缩进 */
}

/* ===== contact layout ===== */
body[data-page="contact"] .contactLayout {
  max-width: 1200px;
  display: grid;
  grid-template-columns: 3fr 5fr; /* 左窄右宽，像参考图 */
  column-gap: 10px;
  align-items: start;
}

.contactGroup {
  margin-bottom: 26px;
}

.contactLine {
  margin: 0 0 8px 0;
  font-size: 16px;
  line-height: 1.6;
}

.contactSection {
  margin-top: 28px;
}

/* 让左栏内容下移，对齐右栏的“Selected Exhibitions” */
body[data-page="contact"] .sideSpacer {
  height: 50px; /* 先用 86px，不准就微调 78/92 */
}

/* 拉开 PÀN Qí 和 Selected Exhibitions 的距离 */
body[data-page="contact"] .contactMain .h1 {
  margin-bottom: 48px; /* 你想更空就 56/64 */
}

body[data-page="contact"] .page a {
  color: var(--ink); /* 黑 */
  text-decoration: none;
  border-bottom: 1px solid var(--muted);
}

body[data-page="contact"] .page a:hover {
  color: var(--giotto);
  border-bottom: 1px solid var(--giotto);
  opacity: 0.85;
}

.contactTwoCol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  margin-top: 6px;
}

.contactAddr {
  margin: 0;
  font-size: 14px; /* 想更小就 13px */
  line-height: 1.6;
}

.entry {
  display: grid;
  grid-template-columns: 30px 1fr; /* 年份列宽 */
  column-gap: 28px;
  padding: 5px 0;
  align-items: start; /* 关键：顶部对齐 */
}

.when {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.65; /* 跟右侧保持同一行高 */
  padding-top: 2px; /* 微调：让年份更贴近右侧第一行基线 */
  font-variant-numeric: tabular-nums;
}

.what {
  font-size: 16px;
  line-height: 1.65; /* 关键：统一行高 */
}

.returnBtn {
  position: fixed;
  left: var(--side);
  bottom: 28px;
  z-index: 9998;

  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--giotto);

  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;

  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: none;
}

/* 光标 */
.returnBtn::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.8em;
  background: currentColor;
  margin-left: 4px;

  opacity: 0;
  transform: translateY(0.08em);

  /* ✅ 关键：让 opacity 变动可以慢慢淡 */
  transition: opacity 440ms ease;
}

/* 打字中：闪烁（注意：不要用 opacity transition 来管它） */
.returnBtn.is-typing::after {
  opacity: 1;
  animation: blink 1s infinite;
}

/* 打完：先稳定亮着 */
.returnBtn.is-done::after {
  opacity: 1;
  animation: none;
}

/* ✅ 新增：淡出状态（不闪烁，靠 transition 慢慢变 0） */
.returnBtn.is-fading::after {
  opacity: 0;
  animation: none;
}

.returnBtn.cursor-off::after {
  opacity: 0 !important;
  animation: none !important;
}

@keyframes blink {
  0%,
  45% {
    opacity: 1;
  }
  46%,
  100% {
    opacity: 0;
  }
}

/* ===== Back link (global) ===== */
.workBack {
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  text-decoration: none !important;
  border-bottom: 0 !important;
  transition:
    color 220ms ease,
    opacity 220ms ease;
}

.workBack:visited {
  color: var(--ink);
  border-bottom: 0 !important;
}

.workBack:hover {
  color: var(--giotto);
  opacity: 0.85;
  border-bottom: 0 !important;
}

/* ===== work grid ===== */
/* 只放宽 work 列表页 */
body[data-page="work"] .block {
  max-width: 1300px; /* 你想更满就 1400px 或 1600px */
}
.workYear {
  font-family: var(--display);
  font-size: 16px;
  margin: 0 0 18px 0;
  letter-spacing: 0.01em;
}

/* ===== work grid ===== */
.workGrid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 280px;
  gap: var(--work-gap-y) var(--work-gap-x);
  align-items: start;

  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;

  /* ✅ hide native scrollbar (we use custom bar) */
  scrollbar-width: none; /* Firefox */
}

.workGrid::-webkit-scrollbar {
  height: 0; /* Chrome / Edge / Safari */
}

/* ===== custom scrollbar ===== */
.workScroll {
  width: 100%;
  margin-top: 10px;
  height: 4px; /* 6px → 4px 更细 */
  border-radius: 999px;
  background: rgba(187, 210, 252, 0.08); /* 轨道更淡 */
  position: relative;

  opacity: 0;
  pointer-events: none;

  transition: opacity 600ms cubic-bezier(0.37, 0, 0.63, 1);
  /* 也可以：transition-timing-function: ease-in-out; */
}

.workScrollThumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40px;
  border-radius: 999px;
  background: rgba(187, 210, 252, 0.28); /* thumb 更淡 */
}

.workScroll.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.workCard {
  display: block;
  scroll-snap-align: start;
  text-decoration: none;
  border-bottom: 0 !important; /* 覆盖 .page a 的下划线 */
}

.workCard img {
  width: 100%;
  aspect-ratio: 4 / 3; /* 想更长：3/2；更方：1/1 */
  object-fit: cover;
  display: block;
}

.workTitle {
  font-family: var(--display); /* 或 var(--font) */
  font-size: 14px; /* 你想更小：18px */
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--giotto);
  margin-top: 4px;
  border-bottom: 0 !important; /* 关键：去掉标题下划线 */
  text-align: center;
}

.workCard:hover {
  opacity: 0.85;
}

/* ===== work item page ===== */
.workItem {
  max-width: 980px;
  margin: 0 auto;
}

/* ===== work item links: behave like contact (only turn blue on hover) ===== */
body[data-page="work-item"] .page a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--muted);
}

body[data-page="work-item"] .page a:hover {
  color: var(--giotto);
  border-bottom-color: var(--giotto);
  opacity: 0.85;
}

/* 可选：点击过不要变紫 */
body[data-page="work-item"] .page a:visited {
  color: var(--ink);
}
body[data-page="work-item"] .page a:visited:hover {
  color: var(--giotto);
}

/* ===== work item typography (page-scope) ===== */

/* 标题 */
body[data-page="work-item"] .h1 {
  font-family: var(--display);
  font-size: 22px; /* 改这里 */
  font-weight: 600; /* 改这里 */
  letter-spacing: 0.01em;
  margin: 0 0 18px 0;
}

/* 年份/场地那一行 */
body[data-page="work-item"] .workMeta {
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  margin: 0 0 32px 0;
}

/* 正文 */
body[data-page="work-item"] .workText {
  font-family: var(--font);
  font-size: 14px; /* 改这里 */
  line-height: 1.4em; /* 改这里 */
  color: var(--ink); /* 想淡一点就用 var(--muted) */
  margin: 0 0 16px 0;
}

body[data-page="work-item"] .workText p:last-child {
  margin-bottom: 32px;
}

/* ===== work item: meta (year/materials left, description right) ===== */
body[data-page="work-item"] .workMetaRow {
  display: grid;
  grid-template-columns: 120px 1fr;
  column-gap: 48px;
  align-items: start;
  margin: 0 0 28px 0;
}

body[data-page="work-item"] .workMetaLeft {
  font-size: 14px;
  line-height: 1.65;
  margin-top: 2px;
}

body[data-page="work-item"] .workMetaRight {
  font-size: 14px;
  line-height: 1.65;
}

body[data-page="work-item"] .workYearOnly,
body[data-page="work-item"] .workMaterials {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

body[data-page="work-item"] .workYearOnly {
  margin-bottom: 10px;
}

body[data-page="work-item"] .workMaterials {
  font-size: 14px;
  line-height: 1.25; /* 1.2~1.35 之间挑你喜欢的 */
  margin: 0;
}

body[data-page="work-item"] .workText--intro p {
  margin: 0 0 12px 0;
}
body[data-page="work-item"] .workText--intro p:last-child {
  margin-bottom: 0;
}

.workText--intro .pSpacer {
  height: 14px; /* 想更空就 18/24 */
}
.workBackRow {
  margin-bottom: 68px;
}

.workMeta .dot {
  margin: 0 8px;
}

.workLinks {
  margin: 10px 0 18px 0;
  font-size: 14px;
  color: var(--muted);
}

.workLinks a {
  color: inherit;
  border-bottom: 1px solid rgba(17, 17, 17, 0.25);
  text-decoration: none;
}

/* ===== work item: mosaic grid ===== */
.workImages--mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  margin-top: 26px;
}

.workImg {
  margin: 0;
}

.workImg img {
  width: 100%;
  height: auto;
  display: block;
}

/* spans */
.workImg.full {
  grid-column: 1 / -1;
}
.workImg.half {
  grid-column: span 6;
}
.workImg.third {
  grid-column: span 4;
}

/* optional caption */
.workCap {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ===== research list ===== */
body[data-page="research"] .researchList {
  max-width: 800px;
  margin: 0 auto;
}

.researchItem {
  max-width: 800px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  column-gap: 48px;
  align-items: start;
  padding: 18px 0 26px 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
}

.researchTitle {
  margin: 0 0 10px 0;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.researchTitle a {
  color: var(--ink);
  text-decoration: none !important;
  border-bottom: 0 !important;
  transition:
    /* color 220ms ease, */ opacity 220ms ease;
}

body[data-page="research"] .researchTitle a:hover {
  /* color: var(--giotto); */
  opacity: 0.65;
}

.researchMeta {
  margin: 0 0 14px 0;
  font-size: 14px;
  color: var(--muted);
}

.researchMeta .dot {
  margin: 0 8px;
}

.researchDesc {
  font-size: 18px;
  line-height: 1em;
  color: var(--ink);
}

.researchDesc p {
  margin: 0 0 12px 0;
}
.researchDesc p:last-child {
  margin-bottom: 0;
}

.researchLinks {
  margin-top: 14px;
  font-size: 14px;
}

.researchLinks a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(17, 17, 17, 0.35);
  margin-right: 14px;
}

.researchLinks a:hover,
.researchLinks a:hover * {
  color: var(--muted);
  border-bottom-color: currentColor;
}

.researchThumb {
  display: block;
  text-decoration: none;
  border-bottom: 0 !important;
  transition: opacity 220ms ease;
}

body[data-page="research"] .researchThumb:hover {
  opacity: 0.55; /* 你想更轻就 0.9；更明显就 0.75 */
}

.researchThumb img {
  width: 100%;
  max-width: 300px; /* 你想更像 work 的卡片就 420~520；更大就 560 */
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  justify-self: end;
}

.researchThumbPh {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(17, 17, 17, 0.12);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 14px;
}

.researchItem:hover .researchTitle a {
  opacity: 0.85;
}
.researchItem:hover .researchThumb {
  opacity: 0.92;
}

/* ===== research item page (single) ===== */
body[data-page="research-item"] .researchPage {
  max-width: 800px;
  margin: 0 auto;
}

.researchHero {
  display: grid;
  grid-template-columns: 1fr 1.07fr;
  column-gap: 48px;
  align-items: start;
}

.researchPageText h1 {
  font-family: var(--display);
  font-size: 22px; /* 改这里 */
  font-weight: 600; /* 改这里 */
  letter-spacing: 0.01em;
  margin: 0 0 18px 0;
}

.researchCover {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  justify-self: center;
}

.researchCover--sm {
  max-width: 300px;
}

/* ===== research item: links like work-item (no underline, hover color) ===== */
body[data-page="research-item"] .page a {
  color: var(--ink);
  font-size: 14px;
  text-decoration: none !important;
  border-bottom: 0 !important;
  transition:
    color 220ms ease,
    opacity 220ms ease;
}

body[data-page="research-item"] .page a:hover {
  color: var(--giotto);
  opacity: 1;
}

/* ===== Paintings Page ===== */

/* ===== Paintings / Etchings / Drawings ===== */

body.noScroll {
  overflow: hidden;
}

body[data-page="paintings"] .paintingsPage {
  max-width: 1300px;
}

.paintSectionTitle {
  font-family: var(--display);
  font-size: 14px;
  color: var(--ink2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 10px 0;
}

.paintYear {
  font-family: var(--display);
  font-size: 14px;
  margin: 0 0 30px 0;
  letter-spacing: 0.01em;
}

.paintGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: start;
  margin-bottom: 40px;
  background: transparent;
  border: 0;
}

.pThumb {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.pThumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  display: block;
  background: none;
}

.pThumb:hover {
  opacity: 0.85;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  background: var(--bg);
  z-index: 10000;
}

.lightbox.open {
  display: grid;
  place-items: center;
}

.lbFigure {
  margin: 0 auto; /* 关键 */
  display: grid;
  gap: 18px;
  justify-items: center; /* 关键 */
  text-align: center;
}

#lbImg {
  max-width: min(1100px, 92vw);
  max-height: 80vh;
  height: auto;
}

.lbCap {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

.lbClose {
  position: absolute;
  top: 24px;
  right: 24px;
  border: 0;
  background: transparent;
  font-size: 26px;
  cursor: pointer;
}

/* 小屏 */
@media (max-width: 900px) {
  :root {
    --top: 42px;
    --navH: calc(var(--top) + 14px + 20px);
  }

  /* .page {
    padding: calc(var(--navH) + 32px) var(--side) 60px;
  } */

  .bio h1 {
    font-size: 16px;
    line-height: 1.75;
  }

  body[data-page="bio"] .bioLayout {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  body[data-page="bio"] .bioImg {
    position: static;
    max-width: 300px; /* 手机上别太大 */
  }

  body[data-page="bio"] .bio {
    grid-column: 1;
  }

  .asideLine {
    text-align: right; /* 或 center */
    padding-right: 10%;
    font-size: clamp(16px, 3.2vw, 18px);
  }

  body[data-page="contact"] .contactLayout {
    display: block;
    max-width: 620px;
    margin: 0 auto;
  }

  .contactTwoCol {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .entry {
    grid-template-columns: 90px 1fr;
  }

  .returnBtn {
    left: 22px;
    right: auto;
    bottom: 22px;
  }

  /* ===== work grid (mobile) ===== */
  /* .workGrid {
    gap: 26px 26px;
  } */

  .workTitle {
    font-size: 14px;
  }

  body[data-page="work-item"] .workMetaRow {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }

  .workImages--mosaic {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .workImg.half {
    grid-column: span 6;
  }
  .workImg.third {
    grid-column: span 3;
  }

  .researchItem {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  body[data-page="research-item"] .researchHero {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .paintGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

/* ===== mobile layout ===== */
@media (max-width: 520px) {
  .topnav {
    display: flex !important;
    align-items: baseline;
    padding: var(--top) 22px 14px;
    gap: 0;
    grid-template-columns: none !important;
  }

  .nav-left {
    flex: 1 1 0;
    min-width: 0;
  }

  /* 中槽：work 用 nav-midWrap，其它页用 nav-mid */
  .topnav :is(.nav-midWrap, .nav-mid) {
    flex: 1.35 1 0;
    min-width: 0;
  }

  .nav-right {
    flex: 1 1 0;
    min-width: 0;
  }

  .topnav a {
    display: block;
    width: 100%;
    font-size: 16px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-left {
    text-align: left;
  }
  .topnav :is(.nav-midWrap, .nav-mid) {
    text-align: center;
  }
  .nav-right {
    text-align: right;
  }

  body[data-page^="work"] .topnav .nav-midWrap {
    display: flex !important;
    justify-content: center;
    align-items: baseline;
    min-width: 0;
  }

  /* mid 链接：不要 width:100%，用 max-content 让文字正常排版 */
  body[data-page^="work"] .topnav .nav-midWrap .nav-mid {
    display: inline-block !important;
    width: auto !important;
    max-width: 100%;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.15;
  }

  /* extra 仍然保持原逻辑 */
  body[data-page^="work"] .topnav .nav-midWrap .nav-extra {
    max-width: 100%;
  }
}

/* ===== mobile touch: show paintings under work ===== */
@media (max-width: 520px) and (hover: none) and (pointer: coarse) {
  body[data-page^="work"] .topnav .nav-midWrap {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px; /* ✅ 两行距离：4~10px 之间挑 */
    line-height: 1.2;
  }

  body[data-page^="work"] .topnav .nav-midWrap::after {
    display: none !important;
  }

  body[data-page^="work"] .topnav .nav-midWrap .nav-extra {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    margin-left: 0 !important;
    margin-top: 14px;
    width: auto;
    font-size: 14px !important;

    opacity: 0;
    visibility: hidden;
    transform: translateX(12px) translateY(-10px) !important;
    transition:
      opacity 300ms ease,
      transform 400ms cubic-bezier(0.23, 1, 0.32, 1),
      visibility 0s linear 300ms;
  }

  body[data-page^="work"] .topnav .nav-midWrap .nav-extra::before {
    display: none !important;
  }

  body[data-page^="work"] .topnav .nav-midWrap.show-extra .nav-extra {
    opacity: 1;
    visibility: visible;
    transform: translateX(12px) translateY(14px) !important;
    transition:
      opacity 300ms ease,
      transform 400ms cubic-bezier(0.23, 1, 0.32, 1),
      visibility 0s;
  }
}