:root {
  --paper: #fdfdfd;
  --ink: #262626;
  --muted: #646464;
  --line: #dfdfdf;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 20px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.52; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration-color: #969696; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); text-decoration-color: var(--ink); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
::selection { background: #e3e3e3; color: #252525; }
p { margin: 0 0 12px; }
h1,h2,h3,h4 { margin: 0; font-family: var(--font); line-height: 1.22; font-weight: 600; }
h1 { font-size: 28px; letter-spacing: -.025em; }
h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .065em; }
h3 { font-size: 16px; letter-spacing: -.01em; }
strong,b { font-weight: 600; }
img { max-width: 100%; height: auto; display: block; }
.site-shell { max-width: 868px; padding: 0 34px; margin: 0 auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 26px; min-height: 84px; border-bottom: 2px solid var(--ink); }
.identity { display: inline-flex; align-items: center; gap: 11px; font-size: 27px; font-weight: 600; letter-spacing: -.045em; text-decoration: none; white-space: nowrap; }
.primary-nav { display: flex; gap: 22px; align-items: center; padding-top: 3px; }
.primary-nav a { position: relative; font-size: 15px; text-decoration: none; padding: 6px 0; }
.primary-nav a[aria-current] { color: var(--ink); }
.primary-nav a[aria-current]::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--ink); }
main { padding-top: 26px; }
.skip-link { position: fixed; top: -60px; left: 15px; background: var(--ink); color: white; padding: 8px 14px; z-index: 10; }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.intro-layout { display: grid; grid-template-columns: minmax(0,1fr) 205px; gap: 25px; align-items: start; }
.intro-copy { grid-column: 1; grid-row: 1; }
.profile-aside { grid-column: 2; grid-row: 1; }
.role-line { font-size: 13px; color: var(--muted); margin-bottom: 11px; }
.name-note { font-size: 13px; color: var(--muted); margin-top: -5px; margin-bottom: 12px; }
.name-note [lang="zh-Hans"] { color: var(--ink); }
.intro-copy p:last-child { margin-bottom: 0; }
.intro-copy a { text-decoration-color: #929292; }
.inline-contact { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; margin-top: 12px; }
.inline-contact a { color: var(--ink); }
.inline-contact span { color: #969696; }
.home-section { margin-top: 23px; }
.home-section h2 { margin-bottom: 13px; }
.focus-list { list-style: none; padding: 0; margin: 0; }
.focus-list li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.focus-list li:nth-child(3)::before { content: ''; width: 19px; height: 19px; position: absolute; left: 0; top: 3px; background: center / contain no-repeat url('/assets/fibres.svg'); }
.structure-icon { position: absolute; left: -5px; top: -3px; display: grid; place-items: center; width: 29px; height: 29px; border: 0; border-radius: 3px; padding: 0; background: transparent; color: inherit; cursor: pointer; touch-action: manipulation; }
.structure-icon svg { display: block; width: 27px; height: 27px; pointer-events: none; }
.structure-icon:hover, .structure-icon:focus-visible { background: #f0f0ee; }
.structure-icon:focus-visible { outline: 1px solid #555; outline-offset: 1px; }
.structure-icon:disabled { cursor: default; }
.focus-list li:last-child { margin-bottom: 0; }
.section-end-link { font-size: 14px; margin: 9px 0 0 28px; }
.section-end-link a { color: var(--ink); }
.section-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.section-title-row>a { font-size: 13px; color: var(--muted); }
.compact-paper { display: grid; grid-template-columns: 48px 1fr; gap: 15px; margin-bottom: 16px; }
.compact-paper:last-child { margin-bottom: 0; }
.compact-year { font-size: 13px; color: var(--muted); padding-top: 1px; }
.compact-paper>div { padding-left: 0; }
.compact-paper h3 { font-size: 16px; line-height: 1.3; margin-bottom: 4px; }
.compact-paper h3 a { text-decoration: none; }
.compact-paper h3 a:hover { text-decoration: underline; }
.compact-paper p { font-size: 13px; line-height: 1.4; color: var(--muted); margin: 0; }
.compact-paper .paper-takeaway { margin-top: 3px; color: #454545; }
.page-heading { margin-bottom: 18px; }
.page-heading h1 { margin-bottom: 8px; }
.page-heading p { font-size: 14px; color: var(--muted); margin: 0; }
.page-index { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.page-index a { color: var(--ink); text-decoration: none; }
.page-index a:hover { text-decoration: underline; }
.prose p { margin-bottom: 13px; }
.research-question { font-size: 18px; line-height: 1.45; font-weight: 500; color: #363636; }
.page-section { margin-top: 25px; }
.page-section>h2 { margin-bottom: 13px; }
.first-section { margin-top: 0; }
.code-entry, .research-project { border-left: 1px solid var(--line); padding-left: 15px; }
.code-entry-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.code-entry-heading span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.code-entry h3, .research-project h3 { font-size: 17px; margin-bottom: 6px; }
.code-entry p, .research-project p { font-size: 14px; color: #505050; margin-bottom: 8px; }
.text-links { display: flex; flex-wrap: wrap; gap: 6px 17px; font-size: 13px; }
.text-links a { color: var(--ink); }
.publication { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 18px; padding: 21px 0; border-bottom: 1px solid var(--line); }
.publication:last-child { border-bottom: 0; padding-bottom: 0; }
.publication-year { font-size: 23px; font-weight: 600; line-height: 1.2; letter-spacing: -.03em; border-top: 1px solid var(--line); padding-top: 7px; align-self: start; }
.publication-year span { display: block; font-size: 11px; font-weight: 400; letter-spacing: 0; line-height: 1.4; color: var(--muted); margin-top: 6px; }
.publication-body { padding-left: 0; }
.publication-kind { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .045em; color: var(--ink); margin-bottom: 5px; }
.publication.preprint .publication-kind { color: var(--ink); }
.publication h2 { font-size: 17px; font-weight: 600; line-height: 1.3; text-transform: none; letter-spacing: -.01em; margin-bottom: 7px; }
.publication h2 a { text-decoration: none; }
.publication h2 a:hover { text-decoration: underline; }
.authors,.venue { color: var(--muted); font-size: 13px; line-height: 1.45; margin-bottom: 4px; }
.authors strong { color: var(--ink); }
.publication-description { color: #4b4b4b; font-size: 14px; line-height: 1.5; margin: 8px 0; }
.publication .text-links { margin-top: 8px; align-items: baseline; }
.bibtex-toggle { padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: #969696; text-underline-offset: 3px; }
.bibtex-toggle:hover { text-decoration-color: var(--ink); }
.bibtex-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.bibtex { margin-top: 6px; font-size: 13px; }
.bibtex-enhanced { margin-top: 0; }
.bibtex summary { width: fit-content; cursor: pointer; text-decoration: underline; text-decoration-color: #969696; text-underline-offset: 3px; }
.bibtex summary:hover { text-decoration-color: var(--ink); }
.bibtex summary::marker { font-size: 10px; color: var(--muted); }
.bibtex-panel { margin-top: 9px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 3px; background: #f6f6f6; }
.bibtex-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: 12px; }
.copy-bibtex { margin-left: auto; padding: 3px 10px; border: 1px solid #bcbcbc; border-radius: 3px; background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; }
.copy-bibtex:hover { background: #eaeaea; }
.copy-bibtex:focus-visible, .bibtex pre:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.bibtex-status { flex-basis: 100%; }
.bibtex-status:empty { display: none; }
.bibtex pre { margin: 10px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; }
.bibtex code { font: inherit; }
.education-item { display: grid; grid-template-columns: 125px 1fr; gap: 18px; margin-bottom: 17px; }
.education-item:last-child { margin-bottom: 0; }
.education-date { font-size: 13px; color: var(--muted); padding-top: 1px; }
.education-title { display: flex; gap: 12px; align-items: baseline; }
.education-title h3,.education-item h3 { font-size: 16px; margin: 0 0 3px; }
.current-label { font-size: 11px; color: var(--ink); }
.education-item p { font-size: 13px; color: var(--muted); line-height: 1.45; margin: 3px 0 0; }
.education-item .degree { font-size: 14px; color: var(--ink); }
.education-item .education-detail { font-size: 12px; margin-top: 5px; }
.activity-rows article { display: grid; grid-template-columns: 55px 1fr; gap: 15px; margin-bottom: 12px; }
.activity-rows article>span { font-size: 13px; color: var(--muted); }
.activity-rows h3 { font-size: 15px; margin-bottom: 3px; }
.activity-rows p { font-size: 13px; color: var(--muted); margin: 0; }
.teaching-content { border-left: 2px solid #bcbcbc; padding-left: 15px; }
.teaching-content p { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.teaching-content p:last-child { margin-bottom: 0; }
.teaching-content strong { color: var(--ink); font-size: 14px; }
.skills-list { display: grid; grid-template-columns: 125px minmax(0,1fr); gap: 10px 18px; margin: 0; font-size: 13px; }
.skills-list dt { font-weight: 500; }
.skills-list dd { margin: 0; color: var(--muted); }
.skills-note { display: block; margin-top: 2px; font-size: 12px; }
.minor-section>h2 { font-size: 13px; color: #555555; }
.school-list { list-style: none; padding: 0; margin: 0; }
.school-list li { display: grid; grid-template-columns: 55px 1fr; gap: 15px; margin-bottom: 12px; }
.school-year { font-size: 12px; color: var(--muted); padding-top: 2px; }
.school-list a { font-size: 13px; font-weight: 500; }
.school-list p { font-size: 12px; color: var(--muted); line-height: 1.45; margin: 3px 0 0; }
.school-list strong { color: #626262; font-weight: 500; }
.draft-note { font-size: 12px; color: #626262; margin: -4px 0 20px; }
.thought { border-top: 1px solid var(--line); }
.thought:last-child { border-bottom: 1px solid var(--line); }
.thought summary { display: grid; grid-template-columns: 28px minmax(0,1fr) 20px; gap: 12px; align-items: center; list-style: none; cursor: pointer; padding: 16px 0; }
.thought summary::-webkit-details-marker { display: none; }
.thought-index { font-size: 12px; color: var(--ink); }
.thought-topic { display: block; color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.thought-title { display: block; font-size: 18px; font-weight: 500; letter-spacing: -.015em; line-height: 1.35; }
.thought-preview { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.thought-toggle { font-size: 19px; color: var(--ink); }
.thought[open] .thought-toggle { transform: rotate(45deg); }
.thought-body { margin: 0 0 19px 40px; max-width: 680px; font-size: 15px; }
.thought-body a { font-size: 13px; color: var(--ink); }
.site-footer { border-top: 1px solid var(--line); margin-top: 30px; padding: 15px 0 25px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 19px; margin-bottom: 10px; font-size: 14px; }
.site-footer>p { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 11px; margin: 0; }
@media(min-width:1000px) { .page-home main { padding-top: 28px; } }
@media(max-width:760px) {
  .site-shell { max-width: 690px; padding: 0 23px; }
  .site-header { gap: 12px; flex-wrap: wrap; justify-content: flex-start; padding: 19px 0 10px; min-height: 0; }
  .identity { font-size: 25px; gap: 9px; }
  .primary-nav { width: 100%; gap: 23px; padding-top: 0; }
  .primary-nav a { font-size: 14px; padding: 2px 0 6px; }
  main { padding-top: 22px; }
  .intro-layout { grid-template-columns: minmax(0,1fr) 170px; gap: 18px; }

  .publication { grid-template-columns: 59px minmax(0,1fr); gap: 13px; }
  .publication-year { font-size: 21px; }
  .publication-body { padding-left: 0; }
}
@media(max-width:540px) {
  body { font-size: 15px; line-height: 1.5; }
  .site-shell { padding: 0 20px; }
  .intro-layout { display: flow-root; }
  .profile-aside { float: right; margin: 0 0 10px 16px; }
  .role-line { font-size: 12px; margin-bottom: 12px; }
  .inline-contact { font-size: 13px; gap: 8px; }
  .home-section { margin-top: 21px; }
  h1 { font-size: 26px; }
  h2 { font-size: 14px; }
  .section-title-row { gap: 12px; }
  .section-title-row>a { font-size: 12px; }
  .compact-paper { grid-template-columns: 37px minmax(0,1fr); gap: 10px; }
  .compact-paper>div { padding-left: 0; }
  .compact-paper h3 { font-size: 15px; }
  .compact-paper p { font-size: 12px; }
  .publication { grid-template-columns: 1fr; gap: 10px; padding: 18px 0; }
  .publication-year { display: flex; align-items: baseline; gap: 12px; border: 0; padding-top: 0; font-size: 20px; }
  .publication-year span { display: inline; margin: 0; }
  .publication h2 { font-size: 16px; }
  .publication-description { font-size: 13px; }
  .publication-kind { font-size: 10px; }
  .education-item { grid-template-columns: 1fr; gap: 5px; margin-bottom: 16px; }
  .education-date { font-size: 12px; }
  .skills-list { grid-template-columns: 1fr; gap: 3px; }
  .skills-list dd { margin-bottom: 9px; }
  .skills-list dd:last-child { margin-bottom: 0; }
  .code-entry-heading { display: block; }
  .code-entry-heading span { display: block; margin-bottom: 6px; }
  .thought summary { grid-template-columns: 20px minmax(0,1fr) 16px; gap: 8px; }
  .thought-title { font-size: 17px; }
  .thought-body { font-size: 14px; margin-left: 28px; }
  .page-heading p { font-size: 13px; }
  .research-question { font-size: 17px; }
  .site-footer>p { flex-wrap: wrap; gap: 5px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior: auto!important; } }

/* Quiet structural details and an original-photo portrait crop. */
/* The 600 × 750 crop starts at (1120, 340) in the 2172 × 1448 original.
   Framing in CSS preserves the original photographic pixels and scales on phones. */
.profile-photo-frame { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: #f4f4f4; }
.profile-photo { position: absolute; width: 362%; max-width: none; height: auto; left: -186.666667%; top: -45.333333%; }
@media(max-width:540px) {
  .profile-aside { width: 92px; }
}