/* ═══════════════════════════════════════════════════════════════
   Zhixuan Gao — personal homepage
   Style: "academic press". Near-neutral paper, a high-contrast
   serif for display, a grotesque for metadata, brass as the single
   accent, and hairline rules doing the structural work.
   ═══════════════════════════════════════════════════════════════ */

/* ┌─────────────────────────────────────────────────────────────┐
   │  想自己调字号 / 照片大小？搜索「字号①」或「照片①」即可跳转  │
   │                                                             │
   │   字号①  .eyebrow   右侧那段话上方的小字（研究关键词那行）    │
   │   字号②  .name      页面大标题，也就是你的名字               │
   │   字号③  .label     BIOGRAPHY / PUBLICATIONS 等章节小标题    │
   │                                                             │
   │   照片①  .layout     左栏宽度。照片、姓名、邮箱都在这一栏，  │
   │                      所以它同时就是照片宽度（照片是 4:5，    │
   │                      宽度定了高度会自动跟着定）              │
   │                                                             │
   │   1rem = 16px。想大一点就把数字改大，例如 .95rem → 1.1rem。  │
   │   .name 用的是 clamp(最小, 随屏幕宽度变化, 最大)：           │
   │     · 第一个数是手机上的下限                               │
   │     · 中间的 4.8vw = 屏幕宽度的 4.8%，随窗口缩放            │
   │     · 最后一个是桌面上的上限                                │
   │   改完保存 → 回浏览器按 Cmd + Shift + R 强制刷新即可。       │
   └─────────────────────────────────────────────────────────────┘ */

/* ── Tokens · light ───────────────────────────────────────────── */
:root {
  --paper:      #f7f5f1;
  --ink:        #14171a;
  --ink-2:      #3c4348;
  --muted:      #5f676d;
  --faint:      #666d73;
  --rule:       #e4e0d8;
  --rule-2:     #cfc8bc;
  --accent:     #8c6d3f;   /* decorative brass: rules, ticks, underlines */
  --accent-ink: #7a5c31;   /* brass that carries text — contrast-checked */
  --sel:        #ece2cd;

  --display: "Iowan Old Style", "Hoefler Text", "Palatino Linotype", Palatino,
             "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans:    -apple-system, BlinkMacSystemFont, "Avenir Next", "Segoe UI",
             "Helvetica Neue", Arial, sans-serif;
  --mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --bar:   44px;            /* height of the sticky bar */
  --page:  78rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --ease:  cubic-bezier(.2, .75, .3, 1);

  /* ── 小标题前面的图标 ───────────────────────────────────────────
     细线条单色图标，用「内联 SVG + CSS mask」实现：
     图标在这里只写一次，HTML 里加 class="i i-xxx" 即可。
     颜色跟着文字走（currentColor），所以深浅两种模式自动适配。   */
  --i-bio:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f00' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.2 3.8c0 9-6 11.5-11.7 11.5H4.9c0-6.4 5-11.5 15.3-11.5Z'/%3E%3Cpath d='M4.9 20.2c0-5.2 3.4-8.4 9-9.6'/%3E%3C/svg%3E");
  --i-news:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f00' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5v14H5V5h14Z'/%3E%3Cpath d='M8.5 9h7M8.5 12.5h7M8.5 16h4'/%3E%3C/svg%3E");
  --i-pubs:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f00' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.8 7.8V4.6h11.6v11.6h-3.2'/%3E%3Crect x='4.6' y='8' width='10.8' height='11.4'/%3E%3Cpath d='M7.4 12.4h5.2M7.4 15.4h3.4'/%3E%3C/svg%3E");
  --i-honors:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f00' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5.4'/%3E%3Cpath d='M8.6 13.4 7.2 20l4.8-2.4 4.8 2.4-1.4-6.6'/%3E%3C/svg%3E");
  --i-services: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f00' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2.8v3M12 18.2v3M2.8 12h3M18.2 12h3M5.5 5.5l2.1 2.1M16.4 16.4l2.1 2.1M18.5 5.5l-2.1 2.1M7.6 16.4l-2.1 2.1'/%3E%3C/svg%3E");
  --i-edu:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f00' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.6 4.4h10.8v4H9.6z'/%3E%3Cpath d='M4.2 10.8 12 6.6l7.8 4.2'/%3E%3Cpath d='M6.6 12.6v4.6c0 1.7 2.4 3 5.4 3s5.4-1.3 5.4-3v-4.6'/%3E%3Cpath d='M19.8 12.4v4'/%3E%3C/svg%3E");
}

/* ── 图标基类：尺寸用 em，所以跟着所在文字的字号自动缩放 ───────── */
.i {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.i-bio      { -webkit-mask-image: var(--i-bio);      mask-image: var(--i-bio); }
.i-news     { -webkit-mask-image: var(--i-news);     mask-image: var(--i-news); }
.i-pubs     { -webkit-mask-image: var(--i-pubs);     mask-image: var(--i-pubs); }
.i-honors   { -webkit-mask-image: var(--i-honors);   mask-image: var(--i-honors); }
.i-services { -webkit-mask-image: var(--i-services); mask-image: var(--i-services); }
.i-edu      { -webkit-mask-image: var(--i-edu);      mask-image: var(--i-edu); }

/* ── Tokens · dark ────────────────────────────────────────────── */
html[data-theme="dark"] {
  --paper:      #0f1214;
  --ink:        #e9e6e0;
  --ink-2:      #dcd9d2;   /* 深色底上的浅色字会发虚，比浅色模式多留一点余量 */
  --muted:      #b9bcc0;   /* 章节标题、小字用这个：7.1:1 → 9.9:1 */
  --faint:      #a3a9ad;   /* 日期、年份这类：5.7:1 → 7.9:1 */
  --rule:       #262b2e;
  --rule-2:     #4a5358;   /* 边框，深色底上要亮一点才看得出形状 */
  --accent:     #bd9c5e;   /* 黄铜提亮：5.8:1 → 7.4:1 */
  --accent-ink: #cbae74;
  --sel:        rgba(203, 174, 116, .26);
}

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + 1.5rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.72;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}

a { color: inherit; text-decoration: none; }

.statement a {
  color: #1a73e8;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}

.statement a:hover {
  color: #0b4fc4;
}

::selection { background: var(--sel); color: var(--ink); }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  position: fixed;
  left: 1rem; top: 1rem; z-index: 99;
  padding: .5rem .9rem;
  background: var(--ink); color: var(--paper);
  font-size: .85rem;
  border-radius: 3px;
}

.page {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Reading progress: a single hairline ──────────────────────── */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 50;
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  background: var(--accent);
  pointer-events: none;
}

/* ── Sticky bar ───────────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transform: translateY(-101%);
  transition: transform .5s var(--ease);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .topbar { background: color-mix(in srgb, var(--paper) 86%, transparent); }
}
.topbar {
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
}
.topbar.is-pinned { transform: none; }

.topbar-in {
  max-width: var(--page);
  margin: 0 auto;
  padding: .55rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.topbar-name {
  font-family: var(--display);
  font-size: .98rem;
  letter-spacing: .01em;
  white-space: nowrap;
}

.topnav {
  margin-left: auto;
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 1.6rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.topnav::-webkit-scrollbar { display: none; }
.topnav a {
  position: relative;
  flex: none;
  padding-bottom: .18rem;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--muted);
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.topnav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.topnav a:hover { color: var(--ink); }
.topnav a[aria-current="true"] { color: var(--ink); }
.topnav a[aria-current="true"]::after { transform: scaleX(1); }

.theme {
  appearance: none;
  flex: none;
  width: 2rem; height: 2rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--rule-2);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.theme:hover { color: var(--ink); border-color: var(--ink); }
.ico {
  width: .92rem; height: .92rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}
html[data-theme="light"] .ico-sun  { display: none; }
html[data-theme="dark"]  .ico-moon { display: none; }

/* ── Layout: 左栏固定 · 右栏滚动 ──────────────────────────────── */
.layout {
  display: grid;
  /* ── 照片①：左栏宽度。照片、姓名、邮箱都在这一栏，所以它同时决定照片多大 ── */
  grid-template-columns: clamp(17.5rem, 21vw, 19rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-top: clamp(4rem, 10vh, 7.5rem);
}

/* 左栏：上下滑动时钉在视口里不动 */
.side {
  position: sticky;
  top: calc(var(--bar) + 2rem);
}

/* 右栏：随页面滚动。用 container 让里面的章节按「这一栏实际有多宽」排版，
   这样就算改了左栏宽度，章节也不会被挤变形 */
.main-col {
  container-type: inline-size;
  container-name: maincol;
  min-width: 0;
}

/* 右栏开头：研究关键词 + 自我介绍 + 链接 */
.intro {
  padding-bottom: clamp(2.4rem, 4vw, 3.4rem);
  border-bottom: 1px solid var(--rule);
}

.eyebrow {
  margin: 0 0 .6rem;
  /* ── 字号①：右侧那段话上方的小字（研究关键词） ── */
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: titlecase;
  color: var(--muted);
}

.name {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  /* ── 字号②：页面大标题（你的名字）。clamp(最小, 随屏宽变化, 最大) ── */
  font-size: clamp(1.1rem, 4.8vw, 1.6rem);
  line-height: 1.06;
  letter-spacing: -.018em;
}

.role {
  margin: 1.1rem 0 0;
  font-family: var(--display);
  font-size: clamp(0.95rem, 1.6vw, 1.0rem);
  line-height: 1.5;
  color: var(--ink-2);
  /* 邮箱这类很长的词组：宁可折行，也不要撑破左边这个窄栏 */
  overflow-wrap: break-word;
}
.role .org { color: var(--muted); }

.statement {
  margin: 0;
  /* 不再限宽：跟着右栏走，和下面的章节左边右边都对齐 */
  font-family: var(--display);
  font-size: clamp(1.02rem, 1.9vw, 1.18rem);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.contact {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.9rem;
  font-size: .84rem;
}
.contact a {
  position: relative;
  padding-bottom: .16rem;
  color: var(--ink-2);
  transition: color .25s var(--ease);
}
.contact a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: .35;
  transition: opacity .25s var(--ease), background-color .25s var(--ease);
}
.contact a:hover { color: var(--accent-ink); }
.contact a:hover::after { opacity: 1; background: var(--accent); }

/* Portrait — bare, no frame: the crop carries it */
.portrait {
  /* 照片与下方姓名之间的距离 */
  margin: 0 0 2.1rem;
}
.portrait img {
  display: block;
  width: 75%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--rule);
  filter: grayscale(.26) contrast(1.03);
  transition: filter .9s var(--ease), transform 1.6s var(--ease);
}
.portrait:hover img { filter: grayscale(0) contrast(1); transform: scale(1.015); }
.portrait figcaption {
  margin-top: .8rem;
  padding-top: .55rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ── Section grid: sticky label · content ─────────────────────── */
.entry {
  padding: clamp(2.6rem, 5vw, 3.9rem) 0;
  border-bottom: 1px solid var(--rule);
}

/* 章节小标题：排在正文上方。
   右栏只有 750px 左右，如果再像以前那样在左边留 240px 给标题，
   正文就只剩 450px，太窄了。 */
.label {
  /* 小图标 + 标题文字排在同一行 */
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.5rem;
  /* ── 字号③：BIOGRAPHY / PUBLICATIONS 等章节小标题 ── */
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
/* 标题前面的图标：黄铜色，比标题字稍大一点 */
.label .i {
  font-size: 1.05em;
  color: var(--accent);
}
/* 深色底上的细体大写小标题最容易糊，单独再提一档亮度 */
html[data-theme="dark"] .label { color: #cdd1d4; }

.entry-body { min-width: 0; }

.entry-note {
  margin: 0 0 1.7rem;
  font-size: .84rem;
  color: var(--muted);
}

/* ── Biography prose (serif — the one long-form passage) ──────── */
.prose {
  max-width: 38rem;
  font-family: var(--display);
  font-size: 1.08rem;
  line-height: 1.78;
  color: var(--ink-2);
}
.prose p { margin: 0 0 1.15rem; }
.prose p:last-of-type { margin-bottom: 0; }
.prose em { font-style: italic; }

.prose-links {
  margin: 1.9rem 0 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.9rem;
  font-family: var(--sans);
  font-size: .84rem;
}
.prose-links a {
  position: relative;
  padding-bottom: .16rem;
  color: var(--accent-ink);
}
.prose-links a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  opacity: .4;
  transition: opacity .25s var(--ease);
}
.prose-links a:hover::after { opacity: 1; }

/* ── News ─────────────────────────────────────────────────────── */
.news { list-style: none; margin: 0; padding: 0; max-width: 44rem; }
.news li {
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding: .58rem 0;
  font-size: 1.05rem;
  color: var(--ink-2);
}
.news time {
  padding-top: .18rem;
  font-family: var(--mono);
  font-size: 0.9rem;
  letter-spacing: .03em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.news em { font-family: var(--display); font-style: italic; }

/* ── Publications ─────────────────────────────────────────────── */
.pubs { list-style: none; margin: 0; padding: 0; }

.pub {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--rule);
}
.pub:first-child { border-top: 0; padding-top: .15rem; }

.pub-num {
  padding-top: .25rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  transition: color .3s var(--ease);
}
.pub:hover .pub-num { color: var(--accent-ink); }

.pub-authors {
  margin: 0 0 .55rem;
  font-size: .84rem;
  color: var(--muted);
}
.me {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
}

.pub-title {
  margin: 0 0 .55rem;
  /* 与 .news 一致：不写 font-family，继承 body 的系统无衬线 */
  font-weight: 400;
  font-size: 1.14rem;
  line-height: 1.42;
  letter-spacing: -.006em;
  text-wrap: pretty;
}
.pub-title a { transition: color .25s var(--ease); }
.pub:hover .pub-title a { color: var(--accent-ink); }

.pub-venue {
  margin: 0;
  font-size: .87rem;
  color: var(--ink-2);
}
.pub-venue em { font-style: italic; }

.tag {
  display: inline-block;
  margin-left: .4rem;
  padding: .1rem .45rem;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: .1em;
  white-space: nowrap;
}

.pub-links {
  margin: .8rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.2rem;
}
.pub-links a {
  padding-bottom: .12rem;
  border-bottom: 1px solid var(--rule-2);
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.pub-links a:hover { color: var(--accent-ink); border-color: var(--accent); }

.subhead {
  margin: 2.8rem 0 0;
  padding-top: 1.7rem;
  border-top: 1px solid var(--rule);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.pubs-plain .pub-title { font-size: 1.03rem; }
.pubs-plain .pub:first-child { padding-top: 1.35rem; }

/* ── Honors and Awards ────────────────────────────────────────── */
.awards { margin: 0; }
.award {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding: .98rem 0;
  border-top: 1px solid var(--rule);
}
.award:first-child { border-top: 0; padding-top: 0; }
.award dt {
  padding-top: .22rem;
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  transition: color .3s var(--ease);
}
.award:hover dt { color: var(--accent-ink); }
.award dd { margin: 0; display: flex; flex-direction: column; gap: .16rem; }
.award-name {
  /* 与 .news 一致：系统无衬线 */
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--ink);
}
.award-org { font-size: .85rem; color: var(--muted); }

/* ── Services ─────────────────────────────────────────────────── */
.services { margin: 0; }
.service {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: .3rem 2rem;
  padding: .98rem 0;
  border-top: 1px solid var(--rule);
}
.service:first-child { border-top: 0; padding-top: 0; }
.service dt {
  padding-top: .12rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ink-2);
}
.service dd {
  margin: 0;
  font-size: .89rem;
  line-height: 1.7;
  color: var(--muted);
}

/* ── Education ────────────────────────────────────────────────── */
.education { list-style: none; margin: 0; padding: 0; }
.edu {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0 1.8rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--rule);
}
.edu:first-child { border-top: 0; padding-top: 0; }
.edu-years {
  margin: 0;
  padding-top: .28rem;
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.edu-degree {
  margin: 0 0 .32rem;
  /* 与 .news 一致：系统无衬线 */
  font-weight: 400;
  font-size: 1.12rem;
  line-height: 1.4;
}
.edu-org { margin: 0 0 .45rem; font-size: .9rem; color: var(--ink-2); }
.edu-note { margin: 0; font-size: .85rem; line-height: 1.66; color: var(--muted); }

/* ── Footer & colophon ────────────────────────────────────────── */
.footer { padding: clamp(2.6rem, 5vw, 3.8rem) 0 clamp(3rem, 8vw, 5.5rem); }

.footer-note {
  margin: 0 0 2.4rem;
  max-width: 38rem;
  font-family: var(--display);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ink-2);
}
.footer-note a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
}

.colophon {
  display: flex;
  justify-content: space-between;
  gap: .7rem 2.5rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: .74rem;
  line-height: 1.75;
  color: var(--faint);
}
.colophon p { margin: 0; }
.colophon p:first-child { max-width: 34rem; }
.colophon-right { text-align: right; }

/* ── Entrance motion (hidden only when JS is available) ───────── */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* 说明：小标题前面原来有一条黄铜短线（.label::before），带动画从左侧展开。
   短线已按要求删除，这里原本对应的 scaleX 动画规则也一并清掉了 ——
   留着是死代码，而且没有任何视觉作用。标题的淡入仍由上面 .reveal 的通用规则负责。 */

.js .stagger {
  opacity: 0;
  transform: translateY(9px);
  transition:
    opacity .6s var(--ease) var(--d, 0ms),
    transform .6s var(--ease) var(--d, 0ms),
    color .3s var(--ease),
    border-color .25s var(--ease);
}
.js .stagger.is-in { opacity: 1; transform: none; }

/* ── Responsive ───────────────────────────────────────────────── */
/* 窗口变窄 → 左栏移到上方，两栏合并成一栏 */
@media (max-width: 62rem) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.4rem;
    padding-top: clamp(3rem, 9vh, 4.5rem);
  }
  .side { position: static; }
  .portrait { max-width: 15rem; }
}

@media (max-width: 46rem) {
  .name { letter-spacing: -.016em; }

  .topbar-name { display: none; }
  .topnav {
    margin-left: 0;
    gap: 1.25rem;
    /* a soft edge hints that the row scrolls sideways */
    -webkit-mask-image: linear-gradient(to right, #000 86%, transparent 100%);
            mask-image: linear-gradient(to right, #000 86%, transparent 100%);
  }
}

/* 右栏内部怎么排，按「右栏实际的宽度」判断。
   用 @container 而不是 @media：右栏宽度 = 窗口宽度 − 左栏宽度，
   改左栏宽度时它也会跟着算对，不会排歪。 */
@container maincol (max-width: 40rem) {
  .news li { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .news time { padding-top: 0; }

  .pub { grid-template-columns: 1.9rem minmax(0, 1fr); gap: 0 .7rem; }

  .award, .edu, .service { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .award dt, .edu-years { padding-top: 0; }
  .colophon-right { text-align: left; }
}

/* ── Accessibility ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js .reveal,
  .js .stagger { opacity: 1; transform: none; }
  .portrait img { filter: none; }
}

/* ── Print: a clean CV ────────────────────────────────────────── */
@media print {
  html[data-theme] {
    --paper: #fff; --ink: #000; --ink-2: #1a1a1a;
    --muted: #444; --faint: #555;
    --rule: #ccc; --rule-2: #bbb;
    --accent: #000; --accent-ink: #000;
  }
  html { scroll-padding-top: 0; }
  body { font-size: 10.5pt; line-height: 1.5; transition: none; }

  .topbar, .progress, .theme, .skip, .contact { display: none; }

  .page { max-width: none; padding: 0; }
  .layout { padding-top: 0; grid-template-columns: 46mm minmax(0, 1fr); gap: 8mm; }
  .side { position: static; }
  .portrait { max-width: none; }
  .name { font-size: 20pt; }
  .statement { font-size: 11pt; }

  .entry { grid-template-columns: 42mm minmax(0, 1fr); gap: 8mm; padding: 5mm 0; }
  .label { position: static; font-size: 8pt; }

  .pub, .award, .edu, .service, .news li {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .pub-title a, .award-name { color: #000 !important; }
  .me { text-decoration-color: #000; }

  .js .reveal,
  .js .stagger { opacity: 1; transform: none; }
}