:root {
  --ink: #16273b;
  --muted: #5b6773;
  --paper: #fbfaf6;
  --sand: #eee9de;
  --line: #d9d7d0;
  --accent: #ce5c45;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; }
a { color: inherit; text-underline-offset: 0.2em; }
a:hover { color: var(--accent); }

.topbar { width: min(1160px, calc(100% - 48px)); margin: 0 auto; min-height: 80px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.wordmark { display: grid; width: 36px; height: 36px; place-items: center; color: var(--paper); background: var(--ink); border-radius: 50%; font-family: var(--serif); font-weight: bold; text-decoration: none; }
nav { display: flex; gap: clamp(16px, 3vw, 36px); font-size: 0.88rem; }
nav a { text-decoration: none; }

main, footer { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.hero { display: grid; grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr); gap: clamp(38px, 7vw, 104px); align-items: center; padding: clamp(72px, 11vw, 132px) 8.5% clamp(74px, 10vw, 118px); }
.portrait-wrap { position: relative; max-width: 320px; }
.portrait-wrap::before { content: ''; position: absolute; inset: -16px 16px 16px -16px; background: var(--sand); z-index: -1; }
.portrait { display: block; aspect-ratio: 4 / 5; width: 100%; object-fit: cover; object-position: center top; filter: saturate(.82); }
.eyebrow, .section-kicker, .pub-type, .card-number { margin: 0; color: var(--accent); font-size: 0.75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.025em; line-height: 1.08; }
h1 { max-width: 600px; margin: 7px 0 0; font-size: clamp(3rem, 6.7vw, 5.35rem); }
.name-cn { margin: 4px 0 22px; color: var(--muted); font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.72rem); line-height: 1.35; }
.lede { max-width: 550px; margin-bottom: 20px; font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.72rem); line-height: 1.35; }
.interest-line { max-width: 560px; font-size: .93rem; color: var(--muted); }
.interest-line span { margin-right: 9px; color: var(--ink); font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 9px 17px; border: 1px solid var(--ink); font-size: .88rem; font-weight: 650; text-decoration: none; }
.button-solid { background: var(--ink); color: var(--paper); }
.button-solid:hover { color: var(--paper); background: var(--accent); border-color: var(--accent); }
.button-outline:hover { border-color: var(--accent); }

.section { padding: clamp(64px, 9vw, 105px) 8.5%; border-top: 1px solid var(--line); }
h2 { margin-bottom: 30px; font-size: clamp(2.25rem, 4.2vw, 3.5rem); }
.large-copy { max-width: 780px; font-size: 1rem; line-height: 1.65; }
.about > div > p:not(.large-copy) { max-width: 700px; color: var(--muted); }
.facts { max-width: 700px; margin: 34px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.facts li { display: grid; grid-template-columns: 135px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.facts span { color: var(--muted); }

.research { background: #e7efec; color: var(--ink); }
.research-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.research-grid article { min-height: 280px; display: flex; flex-direction: column; padding: 24px; background: rgba(255,255,255,.56); border: 1px solid rgba(22,39,59,.2); }
.research-grid h3 { margin: auto 0 14px; font-size: 1.7rem; }
.research-grid p:last-child { margin-bottom: 0; color: var(--muted); font-size: .91rem; }

.publication-list { border-top: 1px solid var(--line); }
.publication-item { padding: 26px 0 25px; border-bottom: 1px solid var(--line); }
.publication-item h3 { max-width: 860px; margin: 8px 0 9px; font-size: clamp(1.24rem, 2vw, 1.55rem); }
.publication-item p:last-child { margin-bottom: 0; color: var(--muted); font-size: .93rem; }
.text-link { display: inline-block; margin-top: 28px; font-weight: 700; }

.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 120px 1fr; gap: 22px; padding: 0 0 28px; }
.timeline time { color: var(--accent); font-size: .82rem; font-weight: 700; letter-spacing: .08em; }
.timeline h3 { margin-bottom: 6px; font-size: 1.5rem; }
.timeline p { margin-bottom: 3px; }
.muted { color: var(--muted); font-size: .92rem; }
footer { display: flex; justify-content: space-between; gap: 24px; padding: 30px 8.5% 44px; color: var(--muted); font-size: .84rem; }
footer p { margin-bottom: 0; }

@media (max-width: 720px) {
  .topbar, main, footer { width: min(100% - 32px, 1160px); }
  .topbar { min-height: 68px; }
  nav { gap: 15px; font-size: .79rem; }
  .hero { grid-template-columns: 1fr; padding: 62px 0 74px; gap: 40px; }
  .portrait-wrap { max-width: 250px; }
  .section { padding: 65px 0; }
  .research { margin-left: calc((100vw - min(100% - 32px, 1160px)) / -2); margin-right: calc((100vw - min(100% - 32px, 1160px)) / -2); padding-left: 16px; padding-right: 16px; }
  .research-grid { grid-template-columns: 1fr; }
  .research-grid article { min-height: 200px; }
  .facts li { grid-template-columns: 100px 1fr; }
  .timeline li { grid-template-columns: 80px 1fr; gap: 13px; }
  footer { padding-left: 0; padding-right: 0; flex-direction: column; gap: 5px; }
}