:root {
  --paper: #f2f0e9;
  --ink: #121310;
  --muted: #66665f;
  --line: #c9c7be;
  --ai: #11845b;
  --quant: #2563eb;
  --life: #ef5b2a;
  --mono: 'DM Mono', monospace;
  --display: 'Manrope', 'Noto Sans SC', sans-serif;
  --chinese-display: 'Noto Serif SC', 'Songti SC', serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Noto Sans SC', sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: .35;
  background-image: radial-gradient(rgba(18, 19, 16, .14) .55px, transparent .55px);
  background-size: 5px 5px;
}
a { color: inherit; }
.mono { font-family: var(--mono); letter-spacing: .04em; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 76px;
  padding: 0 clamp(20px, 4vw, 64px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--ink);
  background: rgba(242, 240, 233, .92);
  backdrop-filter: blur(14px);
}
.wordmark {
  width: max-content;
  font: 800 1.15rem/1 var(--display);
  letter-spacing: -.04em;
  text-decoration: none;
}
.wordmark .wordmark-cn {
  margin-left: .38em;
  font: 600 .66rem/1 var(--chinese-display);
  letter-spacing: .03em;
  vertical-align: .12em;
}
.wordmark span { margin-left: 5px; font: 400 .56rem/1 var(--mono); vertical-align: top; }
.nav-links { display: flex; gap: clamp(18px, 3vw, 46px); }
.nav-links a { font: 500 .72rem/1 var(--mono); text-decoration: none; }
.nav-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.availability { justify-self: end; font: 500 .63rem/1 var(--mono); }
.availability i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--ai); box-shadow: 0 0 0 4px rgba(17,132,91,.13); }

main, footer { width: min(1480px, 100%); margin: 0 auto; }
.hero {
  min-height: min(580px, calc(100vh - 68px));
  padding: clamp(24px, 3vw, 42px) clamp(20px, 4vw, 64px) 24px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(220px, 28%);
  grid-template-rows: 1fr auto;
  gap: 30px;
  border-bottom: 1px solid var(--ink);
}
.hero-index { padding-top: 9px; font-size: .65rem; writing-mode: vertical-rl; transform: rotate(180deg); }
.hero-copy { align-self: center; padding: 2vh 0; }
.eyebrow { margin: 0 0 22px; font: 500 .67rem/1 var(--mono); letter-spacing: .12em; }
h1, h2 { font-family: var(--display); letter-spacing: -.065em; }
h1 { margin: 0; max-width: 720px; font-size: clamp(2.35rem, 4.2vw, 4rem); line-height: 1.03; font-weight: 800; }
h1 em, .life-content em, .contact-section em { color: var(--life); font-style: normal; }
h1 > em { display: inline-block; font-size: .8em; }
.intro { max-width: 590px; margin: 28px 0 0; color: #3d3e39; font-size: clamp(.92rem, 1.1vw, 1.02rem); line-height: 1.8; }
.hero-thought { max-width: 700px; margin: 26px 0 0; color: var(--ink); font: 700 clamp(1.5rem, 2.55vw, 2.45rem)/1.22 var(--display); letter-spacing: -.055em; }
.translation { display: inline; margin-left: .42em; color: var(--muted); font: 500 .68em/1.7 'Noto Sans SC', sans-serif; letter-spacing: 0; }
.hero-thought .translation { display: block; max-width: 540px; margin: .72em 0 0; color: #595a54; font: 500 clamp(.98rem, 1.15vw, 1.12rem)/1.8 var(--chinese-display); letter-spacing: .015em; }
.notes-intro .translation, .discipline-lead .translation, .life-content p .translation, .contact-intro .translation { margin-left: .35em; font: inherit; letter-spacing: 0; }
.discipline h2 .translation, .section-heading h2 .translation, .life-content h2 .translation, .contact-section h2 .translation { font-size: .32em; }
.life-content .translation, .contact-section .translation { color: #aaa99f; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 30px; }
.primary-link { min-width: 178px; padding: 15px 18px; display: flex; justify-content: space-between; background: var(--ink); color: var(--paper); font: 500 .78rem/1 var(--mono); text-decoration: none; }
.primary-link span { transition: transform .2s ease; }
.primary-link:hover span { transform: translate(3px, 3px); }
.text-link { font: 500 .76rem/1 var(--mono); text-underline-offset: 5px; }
.hero-aside { position: relative; display: grid; place-items: center; }
.orbit { position: relative; width: min(22vw, 300px); aspect-ratio: 1; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; }
.orbit::before, .orbit::after { content: ''; position: absolute; border: 1px solid var(--line); border-radius: 50%; }
.orbit::before { width: 70%; height: 70%; }
.orbit::after { width: 38%; height: 38%; }
.portrait-frame {
  position: relative;
  z-index: 2;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 4px solid var(--paper);
  box-shadow: 0 0 0 1px var(--ink);
}
.portrait {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
}
.orbit-label { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; color: white; border-radius: 50%; font: 500 .7rem/1 var(--mono); }
.label-ai { top: 4%; left: 28%; background: var(--ai); }
.label-quant { right: -3%; top: 51%; background: var(--quant); }
.label-life { bottom: 5%; left: 18%; background: var(--life); }
.coordinates { position: absolute; right: 0; bottom: 0; font-size: .57rem; line-height: 1.7; text-align: right; }
.scroll-note { grid-column: 2; font-size: .58rem; }

.manifesto { padding: clamp(54px, 7vw, 100px) clamp(20px, 8vw, 130px); display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(320px, 520px); gap: clamp(28px, 4vw, 72px); align-items: center; border-bottom: 1px solid var(--ink); }
.section-number { margin: 5px 0 0; font-size: .65rem; }
.manifesto-copy p { max-width: 760px; margin: 0; font: 700 clamp(1.6rem, 3.2vw, 3.4rem)/1.28 var(--display); letter-spacing: -.05em; }
.manifesto-copy .translation { display: block; max-width: 640px; margin: .82em 0 0; color: var(--muted); font: 500 clamp(1rem, 1.25vw, 1.2rem)/1.85 var(--chinese-display); letter-spacing: .015em; }
.quote-attribution { display: block; margin-top: .9em; color: var(--ink); font: 500 .84em/1 var(--mono); letter-spacing: .04em; }
.research-direction { width: min(100%, 520px); margin: 0; justify-self: center; }
.research-direction img { display: block; width: 100%; max-height: 440px; object-fit: contain; }

.research-grid { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--ink); }
.discipline { position: relative; min-height: 540px; padding: clamp(30px, 4vw, 52px); }
.discipline + .discipline { border-top: 1px solid var(--ink); }
.discipline-ai { --field: var(--ai); }
.discipline-quant { --field: var(--quant); }
.discipline-head { display: flex; justify-content: space-between; align-items: flex-start; }
.tag { padding: 7px 9px; background: var(--field); color: white; font-size: .58rem; }
.symbol { color: var(--field); font: 800 clamp(2.2rem, 4vw, 4rem)/1 var(--display); letter-spacing: -.08em; }
.discipline h2 { margin: clamp(40px, 5vw, 64px) 0 16px; font-size: clamp(2.2rem, 3.7vw, 3.8rem); line-height: 1; }
.discipline-lead { max-width: 490px; min-height: 0; margin: 0 0 44px; color: var(--muted); font-size: 1rem; line-height: 1.9; }
.project-list { padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--ink); }
.project-list li { padding: 22px 0; display: grid; grid-template-columns: 48px 1fr; border-bottom: 1px solid var(--line); }
.project-list li > span { font: 400 .62rem/1.5 var(--mono); color: var(--field); }
.project-list h3 { margin: 0 0 7px; font: 700 1rem/1.35 var(--display); }
.project-link { text-decoration: none; }
.project-link::after { content: ' ↗'; color: var(--field); font-family: var(--mono); font-size: .72em; }
.project-link:hover { color: var(--field); }
.project-list p { margin: 0; color: var(--muted); font: 400 .63rem/1.5 var(--mono); }
.view-all { margin-top: 32px; display: flex; justify-content: space-between; font: 500 .69rem/1 var(--mono); text-decoration: none; }
.view-all:hover { color: var(--field); }

.notes-section { padding: clamp(48px, 6vw, 76px) clamp(20px, 4vw, 64px); border-bottom: 1px solid var(--ink); }
.section-heading { margin-bottom: 48px; display: flex; justify-content: space-between; align-items: end; }
.section-heading > div { display: flex; gap: 50px; align-items: start; }
.section-heading h2 { margin: 0; font-size: clamp(2.2rem, 4.1vw, 4.25rem); line-height: .95; }
.section-heading > p { margin: 0; font: 400 .58rem/1.65 var(--mono); text-align: right; }
.notes-intro { max-width: 650px; margin: -24px 0 0 175px; color: var(--muted); font-size: 1rem; line-height: 1.9; }
.note-row { padding: 25px 0; display: grid; grid-template-columns: 70px 108px 1fr 30px; align-items: center; gap: 16px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.note-row:last-child { border-bottom: 1px solid var(--line); }
.note-row time { color: var(--muted); font: 400 .64rem/1 var(--mono); }
.note-kind { justify-self: start; font: 600 .64rem/1 var(--mono); }
.ai-dot { color: var(--ai); }
.quant-dot { color: var(--quant); }
.life-dot { color: var(--life); }
.note-row h3 { margin: 0; font: 600 clamp(.95rem, 1.6vw, 1.25rem)/1.4 var(--display); }
.note-row .arrow { justify-self: end; transition: transform .2s; }
.note-row:hover .arrow { transform: translate(4px, -4px); }

.life-section { min-height: 480px; padding: clamp(40px, 4vw, 56px) clamp(20px, 4vw, 64px); display: grid; grid-template-columns: 110px 1fr 200px; gap: 30px; align-items: center; background: var(--ink); color: var(--paper); border-bottom: 1px solid var(--paper); }
.life-label { align-self: start; font-size: .6rem; }
.life-title-link { text-decoration: none; }
.life-content h2 { margin: 0 0 24px; font-size: clamp(2.25rem, 3.7vw, 4rem); line-height: 1.03; }
.life-content p, .contact-intro { color: #aaa99f; font-size: 1rem; font-weight: 400; line-height: 1.9; }
.life-content p { max-width: 590px; margin: 0; }
.life-entry { display: inline-block; margin-top: 36px; padding-bottom: 7px; border-bottom: 1px solid var(--life); color: var(--life); font-size: .74rem; }
.life-title-link:hover .life-entry { color: var(--paper); border-color: var(--paper); }
.life-photo {
  position: relative;
  width: min(100%, 300px);
  margin: 0;
  justify-self: end;
}
.life-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(.82) contrast(1.06);
  image-rendering: auto;
  border: 1px solid #5b5c55;
}
.life-photo figcaption {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  color: #8c8c84;
  font: 400 .5rem/1 var(--mono);
}
.life-stamp {
  position: absolute;
  right: -28px;
  bottom: -56px;
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
  border: 1px solid var(--life);
  border-radius: 50%;
  background: var(--ink);
  color: var(--life);
  font: 500 .58rem/1.45 var(--mono);
  text-align: center;
  transform: rotate(9deg);
}

.contact-section { padding: clamp(62px, 7vw, 88px) clamp(20px, 8vw, 130px); background: var(--ink); color: var(--paper); }
.contact-section > .mono { margin: 0 0 62px; font-size: .63rem; }
.contact-section h2 { max-width: 760px; margin: 0; font-size: clamp(2.4rem, 4.4vw, 4.5rem); line-height: 1.03; }
.contact-heading-content { display: inline-flex; align-items: center; white-space: nowrap; }
.contact-section h2 .idea-light { margin-left: .36em; vertical-align: .08em; }
.contact-intro { max-width: 650px; margin: 34px 0 0; }
.idea-light { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; color: #d9d8d0; background: transparent; border: 0; cursor: default; outline: none; transition: color .24s ease, transform .24s ease; }
.idea-light svg { width: 29px; height: 29px; overflow: visible; transition: filter .24s ease; }
.idea-light path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.idea-light .bulb-fill { fill: transparent; transition: fill .24s ease; }
.idea-light .idea-rays { stroke: currentColor; opacity: 0; transition: opacity .24s ease; }
.idea-light:hover, .idea-light:focus-visible { color: #ffd24d; transform: translateY(-3px); }
.idea-light:hover svg, .idea-light:focus-visible svg { filter: drop-shadow(0 0 5px rgba(255, 210, 77, .9)) drop-shadow(0 0 15px rgba(255, 210, 77, .65)); }
.idea-light:hover .bulb-fill, .idea-light:focus-visible .bulb-fill { fill: #ffd24d; }
.idea-light:hover .idea-rays, .idea-light:focus-visible .idea-rays { opacity: 1; }
.contact-links { margin-top: 72px; display: flex; gap: 14px; flex-wrap: wrap; }
.contact-links a, .contact-channel { min-width: 150px; padding: 16px 18px; border: 1px solid #5b5c55; font: 500 .68rem/1 var(--mono); text-decoration: none; }
.contact-links a { transition: background .2s, color .2s; }
.contact-channel { display: inline-flex; align-items: center; gap: 9px; color: var(--paper); }
.contact-channel small { color: #8c8c84; font: 500 .7rem/1 'Noto Sans SC', sans-serif; }
.contact-links a:hover { background: var(--paper); color: var(--ink); }

.life-project .life-meta { grid-template-columns: repeat(4, 1fr); }
.life-map { margin-top: clamp(58px, 8vw, 108px); }
.life-map-frame { overflow: hidden; }
.world-map { display: block; width: 100%; height: auto; min-height: 230px; }
.china-map-frame { margin-top: clamp(34px, 5vw, 64px); overflow: hidden; }
.china-map { display: block; width: 100%; height: auto; min-height: 420px; }
.map-legend { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0; font: 500 .62rem/1 var(--mono); letter-spacing: .05em; }
.map-legend span { width: 8px; height: 8px; border-radius: 50%; background: #ff5a36; box-shadow: 0 0 0 4px rgba(255, 90, 54, .18); }
.map-fallback { fill: rgba(18, 19, 16, .035); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.map-country { fill: rgba(18, 19, 16, .035); stroke: var(--ink); stroke-width: .8; stroke-linejoin: round; }
.china-fallback { fill: rgba(18, 19, 16, .035); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.china-province { fill: rgba(18, 19, 16, .035); stroke: var(--ink); stroke-width: .8; stroke-linejoin: round; }
.visited-place-halo { fill: #ff5a36; opacity: .23; }
.visited-place-core { fill: #ff5a36; stroke: var(--paper); stroke-width: 1.5px; }
.visited-place-label { fill: var(--ink); font: 500 11px/1 var(--mono); letter-spacing: .015em; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.world-map.is-detailed .map-fallback { display: none; }
.china-map.is-detailed .china-fallback { display: none; }
footer { padding: 24px clamp(20px, 4vw, 64px); display: flex; justify-content: space-between; background: var(--ink); color: #8c8c84; font: 400 .58rem/1 var(--mono); }
footer a { color: var(--paper); text-decoration: none; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }
  .availability { display: none; }
  .hero { min-height: auto; grid-template-columns: 32px 1fr; }
  .hero-aside { grid-column: 2; min-height: 330px; }
  .orbit { width: 260px; }
  .scroll-note { grid-column: 2; }
  .manifesto { grid-template-columns: 60px minmax(0, 1fr); }
  .research-direction { grid-column: 2; width: min(100%, 500px); }
  .research-grid { grid-template-columns: 1fr; }
  .discipline { min-height: auto; }
  .discipline + .discipline { border-left: 0; border-top: 1px solid var(--ink); }
  .life-section { grid-template-columns: 1fr; }
  .life-photo { justify-self: start; margin-bottom: 48px; }
}

@media (max-width: 620px) {
  .site-header { height: 64px; padding: 0 18px; }
  .nav-links { gap: 13px; }
  .nav-links a { font-size: .58rem; }
  .hero { min-height: auto; padding: 25px 18px 38px; grid-template-columns: 1fr; }
  .hero-index { writing-mode: initial; transform: none; }
  .hero-copy { padding: 3vh 0; }
  h1 { font-size: clamp(2.35rem, 11vw, 3.1rem); }
  .intro { margin-top: 26px; }
  .hero-aside, .scroll-note { grid-column: 1; }
  .hero-aside { min-height: 270px; }
  .orbit { width: 215px; }
  .manifesto { padding: 66px 18px; grid-template-columns: 1fr; gap: 28px; }
  .research-direction { grid-column: 1; width: 100%; }
  .discipline { padding: 42px 18px 54px; }
  .discipline h2 { margin-top: 70px; }
  .discipline-lead { min-height: 0; margin-bottom: 42px; }
  .section-heading { align-items: start; }
  .section-heading > div { gap: 20px; }
  .section-heading > p { display: none; }
  .notes-intro { margin: -24px 0 42px; }
  .note-row { grid-template-columns: 58px 1fr 20px; grid-template-rows: auto auto; padding: 21px 0; gap: 6px 12px; }
  .note-kind { grid-column: 1; grid-row: 1 / 3; }
  .note-row time { grid-column: 2; grid-row: 2; }
  .note-row h3 { grid-column: 2; grid-row: 1; font-size: .92rem; }
  .note-row .arrow { grid-column: 3; grid-row: 1 / 3; }
  .life-section { min-height: 560px; padding: 52px 18px; }
  .life-photo { width: min(88%, 290px); }
  .life-stamp { right: -24px; bottom: -42px; width: 108px; height: 108px; }
  .contact-section { padding: 82px 18px; }
  .contact-section > .mono { margin-bottom: 42px; }
  .idea-light { width: 40px; height: 40px; }
  .contact-links { margin-top: 50px; }
  footer { padding: 22px 18px; gap: 12px; flex-wrap: wrap; }
  footer span:nth-child(2) { display: none; }
  .life-project .life-meta { grid-template-columns: 1fr; }
  .world-map { width: 160%; margin-left: -30%; }
  .china-map { width: 135%; min-height: 360px; margin-left: -17.5%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}