:root {
      --paper: #fff; --white: #fff; --ink: #242b31; --body: #354b5b;
      --muted: #526675; --navy: #183451; --blue: #557489; --mist: #d6e3ed; --plot-fill: #edf3f6;
      --line: #cbd5da; --copper: #885e3d; --sans: 'DM Sans', Arial, sans-serif;
      --serif: 'Newsreader', Georgia, serif; --mono: 'DM Mono', monospace;
      --measure: 1120px;
      --section-title-size: clamp(28px, calc(25px + .8vw), 36px);
      --subsection-title-size: clamp(23px, calc(21px + .45vw), 27px);
      --text-body: 16px;
      --text-detail: 15px;
      --text-note: 13px;
      --text-small: 12px;
      --text-leading: 1.75;
      --text-heading-weight: 500;
      --text-intro: clamp(21px, 2vw, 24px);
      --hero-gap: clamp(42px, 7vw, 94px);
      --hero-inline-gap: var(--hero-gap);
      --hero-copy-share: .6521739130434783;
      --biography-measure: 65ch;
      --biography-font-size: var(--text-body);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 94px; }
    body { margin: 0; background: var(--paper); color: var(--ink); font: var(--text-body)/var(--text-leading) var(--sans); -webkit-font-smoothing: antialiased; }
    strong { font-weight: var(--text-heading-weight); }
    a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
    a, button, input, summary { -webkit-tap-highlight-color: transparent; }
    :focus-visible { outline: 2px solid var(--copper); outline-offset: 5px; }
    ::selection { background: #dce8ee; color: var(--navy); }
    h1, h2, h3, h4, p, figure { margin-top: 0; }
    h1, h2, h3, h4 { text-wrap: balance; }
    figure { margin-inline: 0; }
    img, svg { max-width: 100%; }
    button, input { font: inherit; }
    button, summary { touch-action: manipulation; }
    .skip-link { position: fixed; top: 10px; left: 16px; z-index: 100; padding: 8px 16px; background: var(--navy); color: #fff; transform: translateY(-160%); }
    .skip-link:focus { transform: none; }
    .inner, .nav-inner, footer { width: min(var(--measure), calc(100% - 80px)); margin-inline: auto; }
    .site-nav { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
    .nav-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
    .wordmark { color: var(--navy); font: var(--text-heading-weight) 26px/1 var(--serif); text-decoration: none; white-space: nowrap; }
    .nav-links { display: flex; gap: clamp(18px, 2.5vw, 32px); align-items: center; }
    .nav-links a { padding-block: 14px; color: var(--body); text-decoration: none; font-size: 14px; white-space: nowrap; }
    .nav-links a:hover, .nav-links a[aria-current="location"], .nav-links a[aria-current="page"] { color: var(--navy); text-decoration: underline; text-underline-offset: 8px; }
    .hero { padding: 70px 0 78px; }
    .hero-grid { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.5fr); gap: var(--hero-gap); align-items: center; }
    .portrait { margin: 0; }
    .portrait img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
    .hero h1 { margin-bottom: 10px; color: var(--navy); font: var(--text-heading-weight) clamp(36px, calc(26px + 1.5vw), 48px)/1.15 var(--serif); letter-spacing: -.02em; }
    .discipline { margin: 0 0 18px; color: var(--copper); font-size: 16px; font-weight: 700; line-height: 1.5; }
    .hero-research-intro { max-width: 66ch; margin: 0 0 16px; color: var(--body); font: 400 var(--biography-font-size)/1.75 var(--sans); }
    .hero-research-emphasis { color: var(--copper); font-weight: 600; }
    .bio-copy { max-width: var(--biography-measure); color: var(--body); font-size: var(--biography-font-size); line-height: 1.75; }
    .bio-copy p { margin: 0; }
    .bio-copy p + p { margin-top: 12px; }
    .school { font-weight: var(--text-heading-weight); }
    .school.hkust { color: #886000; }
    .school.sorbonne { color: #3557a6; }
    .school.enim { color: inherit; text-decoration: none; }
    .contact-block { margin-top: 16px; display: grid; gap: 8px; }
    .location { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 14px; }
    .location svg, .contact-link svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .contact-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
    .contact-link { display: inline-flex; align-items: center; gap: 7px; color: var(--navy); font-size: 14px; text-decoration: none; }
    .contact-link span { border-bottom: 1px solid #91a1ac; }
    .contact-link:hover span { border-color: var(--navy); }
    .section { padding-block: clamp(72px, 7.6vw, 106px); }
    .section-heading { margin-bottom: 24px; color: var(--navy); font: var(--text-heading-weight) var(--section-title-size)/1.3 var(--serif); letter-spacing: -.015em; }
    .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 28px; margin-bottom: 13px; }
    .section-head .section-heading { margin: 0; }
    .section-head a { flex: none; color: var(--navy); font-size: 14px; }
    .research { background: var(--mist); }
    .nature-inspiration { display: grid; gap: 20px; width: min(100%, 560px); margin: -3px auto 28px; padding-top: 18px; text-align: center; }
    .nature-inspiration-title { margin: 0; color: var(--navy); font: 500 clamp(16px, 1.45vw, 18px)/1.4 var(--serif); }
    .nature-inspiration-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; }
    .nature-example { display: grid; justify-items: center; gap: 4px; color: var(--muted); font-size: 12px; line-height: 1.4; }
    .nature-image { display: grid; width: min(100%, 150px); aspect-ratio: 1; place-items: center; overflow: hidden; }
    .nature-image img { display: block; width: 110%; max-width: none; height: 110%; object-fit: contain; mix-blend-mode: multiply; }
    /* Match the biography's right edge: inner width minus any unused space
       after the capped biography in the hero's right-hand grid track.
       The reference ch unit uses the same font and size as .bio-copy. */
    .research-content { width: calc(100% - max(0px, calc((100% - var(--hero-inline-gap)) * var(--hero-copy-share) - var(--biography-measure)))); font-size: var(--biography-font-size); }
    .research-copy { color: var(--body); font-size: var(--text-body); line-height: var(--text-leading); }
    .research-copy p { margin-bottom: 18px; }
    .research-copy strong { color: var(--navy); font-weight: var(--text-heading-weight); }
    .pubs .section-head { margin-bottom: 10px; }
    .pubs > .inner > .pub-group:first-of-type > .publication-layout { padding-top: 14px; }
    .pub-group + .pub-group { margin-top: 64px; }
    .pub-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 17px; border-bottom: 1px solid #91a4b0; }
    .pub-group-head h3 { margin: 0; color: var(--navy); font: var(--text-heading-weight) clamp(23px, calc(21px + .4vw), 26px)/1.35 var(--serif); }
    .publication-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: start; padding-block: 28px; }
    .publication-layout--figure-row { align-items: stretch; }
    .publication-layout--full { grid-template-columns: minmax(0, 1fr); }
    .publication-list { min-width: 0; }
    .publication-list .paper { margin: 0; padding: 15px 0; border-top: 1px solid var(--line); }
    .publication-list .paper:first-child { padding-top: 0; border-top: 0; }
    .publication-route { min-width: 0; margin: 0; padding: 20px; background: var(--plot-fill); }
    .publication-route--abstract { align-self: stretch; padding: 0; background: transparent; }
    .publication-route--single-visual { display: grid; align-self: stretch; place-items: center; padding: 0; background: transparent; }
    .publication-route--single-visual img { display: block; width: 100%; max-height: 340px; height: auto; mix-blend-mode: multiply; }
    .publication-group-feature { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); align-items: center; gap: clamp(28px, 3vw, 42px); margin-top: 24px; padding-block: 0 28px; }
    .publication-papers-stack { min-width: 0; }
    .publication-papers-stack .paper { margin: 0; }
    .publication-papers-stack .paper + .paper { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
    .publication-route--paired-visuals { display: grid; width: 100%; align-self: stretch; place-items: center; padding: 0; background: transparent; }
    .publication-visual-pair { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(34px, 4vw, 48px); width: 100%; }
    .publication-visual-pair--late { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: start; gap: clamp(46px, 5vw, 58px); }
    .publication-visual-pair--late .publication-visual-arrow { left: 40%; }
    .publication-visual-unit { min-width: 0; }
    .publication-visual-unit h4 { min-height: 42px; margin: 0 0 8px; color: var(--navy); font: var(--text-heading-weight) 15px/1.4 var(--sans); }
    .publication-visual-unit img { display: block; width: 100%; max-height: 260px; height: auto; object-fit: contain; mix-blend-mode: multiply; }
    .publication-visual-unit > p, .publication-architecture-grid p { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
    .publication-architecture-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(8px, 1vw, 14px); }
    .publication-architecture-grid > div { min-width: 0; }
    .publication-visual-unit--structures > img { width: 100%; max-height: none; }
    @media (min-width: 761px) {
      .publication-visual-pair--late { --publication-image-height: clamp(150px, 17vw, 220px); }
      .publication-visual-pair--late .publication-visual-unit > img { height: var(--publication-image-height); max-height: none; }
      .publication-visual-pair--late .publication-visual-arrow { top: calc(var(--publication-image-height) / 2); }
    }
    .publication-architecture-grid p strong { color: var(--navy); font-weight: var(--text-heading-weight); }
    .publication-route-panels { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 4vw, 48px); height: 100%; }
    .publication-route-stage { min-width: 0; }
    .publication-route-stage--experiment { padding-left: 12px; }
    .publication-route-stage h4 { min-height: 42px; margin: 0 0 8px; color: var(--navy); font: var(--text-heading-weight) 15px/1.4 var(--sans); }
    .publication-route-stage p { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
    .publication-route-stage img { display: block; width: 100%; aspect-ratio: 1; height: auto; object-fit: contain; mix-blend-mode: multiply; }
    .publication-route-arrow { position: absolute; z-index: 1; top: 50%; left: 50%; display: block; width: 38px; height: 20px; transform: translate(-50%, -50%); overflow: visible; fill: none; stroke: var(--copper); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .paper-title { margin: 0; color: var(--navy); font: var(--text-heading-weight) 16px/1.5 var(--sans); }
    .paper-title a { color: inherit; text-decoration: none; }
    .paper-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
    .paper-meta { margin: 5px 0 0; color: var(--body); font-size: 14px; line-height: 1.5; }
    .paper-result { margin: 5px 0 0; color: var(--body); font-size: 14px; line-height: 1.55; }
    .paper-result-label { color: var(--navy); font-weight: var(--text-heading-weight); }
    .profile { background: #fff; }
    .academic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(38px, 6vw, 80px); }
    .academic-grid h3, .profile-page .academic-grid h2 { margin: 0; padding-bottom: 15px; border-bottom: 1px solid #aebdc6; color: var(--navy); font: var(--text-heading-weight) var(--subsection-title-size)/1.3 var(--serif); }
    .timeline, .talks { margin: 0; padding: 0; list-style: none; }
    .timeline li, .talks li { padding: 17px 0; border-bottom: 1px solid var(--line); color: var(--body); font-size: 14px; line-height: 1.65; }
    .timeline time, .talks time { display: block; margin-bottom: 5px; color: var(--muted); font: 12px/1.5 var(--mono); }
    .timeline strong { display: block; color: var(--navy); font-size: 15px; font-weight: var(--text-heading-weight); }
    .timeline span { display: block; color: var(--muted); font-size: 13px; }
    .beyond-page { min-height: calc(100svh - 163px); padding-block: 62px 86px; }
    .page-back { color: var(--muted); font-size: 14px; }
    .beyond-heading { margin: 0 0 clamp(24px, 2.5vw, 32px); }
    .beyond-heading .section-heading { margin-bottom: 0; }
    .venture-case { margin: 0; padding: 0; border: 0; }
    .venture-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, .75fr); gap: clamp(34px, 4vw, 58px); align-items: center; }
    .venture-visual { min-width: 0; margin: 0; }
    .venture-art { position: relative; width: 100%; aspect-ratio: 1520 / 754; }
    .venture-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
    .venture-label { position: absolute; color: #565656; font-family: 'Times New Roman', Times, serif; font-size: 13px; font-weight: 400; line-height: 1.2; }
    .venture-label-terminal { top: 12.6%; left: 4.1%; }
    .venture-label-analysis { top: 41.1%; left: 46.9%; width: 13.5%; height: 20%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
    .venture-label-efficiency { top: 2.4%; left: 80.5%; }
    .venture-label-break { top: 41.6%; left: 80.5%; }
    .venture-label-soil { top: 65.4%; left: 80.5%; }
    .venture-label-inclination { top: 83.7%; left: 80.5%; }
    .venture-story { min-width: 0; color: var(--body); font-size: var(--text-detail); line-height: var(--text-leading); }
    .venture-case-heading h2 { margin: 0; color: var(--navy); font: var(--text-heading-weight) clamp(20px, calc(19px + .2vw), 22px)/1.3 var(--serif); letter-spacing: -.015em; }
    .venture-role { margin: 10px 0 0; color: var(--copper); font-size: 13px; line-height: 1.55; }
    .venture-opening { margin: 14px 0 0; max-width: 65ch; color: var(--body); font-size: var(--text-detail); line-height: var(--text-leading); }
    .venture-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin-top: 26px; }
    .venture-facts > div { min-width: 0; }
    .venture-recognition { padding-top: 13px; border-top: 1px solid var(--line); }
    .venture-recognition h3 { margin: 0; color: var(--navy); font: var(--text-heading-weight) 21px/1.3 var(--serif); }
    .venture-recognition p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
    .venture-location { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
    .venture-fact-label { color: var(--muted); font: 12px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
    .venture-location strong { color: var(--navy); font-size: 14px; font-weight: var(--text-heading-weight); }
    .personal-section { margin-top: 64px; padding-top: 32px; border-top: 1px solid #aebdc6; }
    .personal-section h2 { margin: 0 0 14px; color: var(--navy); font: var(--text-heading-weight) var(--section-title-size)/1.3 var(--serif); letter-spacing: -.015em; }
    .personal-section > p { max-width: none; margin: 0; color: var(--body); font-size: var(--text-detail); line-height: var(--text-leading); }
    .personal-photos { margin-top: 20px; }
    .personal-photos-title { margin: 0 0 14px; color: var(--body); font: 400 var(--text-detail)/var(--text-leading) var(--sans); }
    .beyond-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-bottom: 20px; }
    .beyond-gallery figure { min-width: 0; margin: 0; }
    .beyond-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
    .beyond-gallery figcaption { margin-top: 8px; color: var(--muted); font-size: var(--text-note);  line-height: 1.65; }
    @media (max-width: 1200px) {
      .venture-layout { grid-template-columns: 1fr; gap: 28px; }
      .venture-visual { position: relative; left: 50%; width: min(calc(100% + 48px), 1120px); margin-inline: 0; transform: translateX(-50%); }
      .venture-story { width: min(100%, 700px); margin-inline: auto; }
      .personal-section { margin-top: 48px; }
    }
    @media (max-width: 760px) {
      .venture-visual { overflow-x: auto; }
      .venture-art { width: max(100%, 680px); }
    }
    @media (max-width: 540px) {
      .beyond-page { padding-block: 36px 56px; }
      .beyond-heading { margin: 0 0 22px; }
      .venture-case { margin: 0; padding: 0; }
      .venture-layout { gap: 23px; }
      .venture-facts { grid-template-columns: 1fr; gap: 16px; }
      .venture-location { grid-column: auto; }
      .beyond-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 13px; }
    }
    .profile-download { padding-block: 42px 46px; background: var(--plot-fill); }
    .profile-download-inner { display: grid; gap: 18px; }
    .profile-download h2 { margin: 0; color: var(--navy); font: var(--text-heading-weight) var(--section-title-size)/1.3 var(--serif); letter-spacing: -.015em; }
    .profile-download-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--line); }
    .profile-download-link { display: inline-flex; align-items: center; gap: 12px; min-width: 0; padding: 16px 20px 16px 0; color: var(--navy); text-decoration: none; }
    .profile-download-link + .profile-download-link { padding-left: 24px; border-left: 1px solid var(--line); }
    .profile-download-link svg { width: 19px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .profile-download-copy { display: block; min-width: 0; }
    .profile-download-label { display: inline-block; padding-bottom: 2px; border-bottom: 1px solid #91a1ac; font-size: 16px; line-height: 1.5; }
    .profile-download-link:hover .profile-download-label { border-color: var(--navy); }
    .profile-download-link small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.45; }
    .contact { padding-block: 48px 52px; }
    .contact-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 30px; }
    .contact h2 { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; color: var(--navy); font: var(--text-heading-weight) var(--section-title-size)/1.3 var(--serif); letter-spacing: -.015em; }
    .contact-copy { grid-column: 1; grid-row: 1; }
    .contact p { margin: 0 0 10px; color: var(--muted); font-size: var(--text-detail); }
    .contact a { color: var(--navy); font-size: 16px; }
    footer { padding-block: 21px 30px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 12px; }
    footer a { color: var(--navy); }
    footer.index-footer { justify-content: flex-end; }
    @media (max-width: 960px) {
      :root { --hero-gap: 38px; --hero-copy-share: .65; }
      .inner, .nav-inner, footer { width: calc(100% - 56px); }
      .hero-grid { grid-template-columns: minmax(190px, .7fr) minmax(0, 1.3fr); }
      .portrait { width: min(100%, 210px); justify-self: center; }
      .hero { padding-block: 38px 44px; }
      .publication-layout { grid-template-columns: 1fr; gap: 24px; }
      .publication-route { width: 100%; max-width: 620px; }
      .publication-route--abstract { max-width: none; }
      .publication-route--single-visual img { width: 100%; max-height: 340px; }
      .publication-route--paired-visuals { max-width: none; margin-inline: 0; }
    }
    @media (max-width: 760px) {
      :root { --hero-gap: 28px; }
      html { scroll-padding-top: 128px; }
      .nav-inner { min-height: 100px; padding-block: 18px 8px; flex-direction: column; align-items: flex-start; gap: 8px; }
      .wordmark { font-size: 24px; }
      .nav-links { width: 100%; justify-content: flex-start; flex-wrap: wrap; column-gap: clamp(14px, 4vw, 24px); row-gap: 0; }
      .nav-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; padding-block: 10px; }
      .hero-grid { grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr); align-items: start; }
      .publication-route-panels { grid-template-columns: 1fr; gap: 18px; height: auto; width: 100%; }
      .publication-route-stage { width: 100%; max-width: none; margin: 0; }
      .publication-route-stage--experiment { padding-left: 0; }
      .publication-route--abstract { width: 100%; max-width: none; margin-inline: 0; }
      .publication-route-stage img, .publication-visual-unit img { width: 100%; max-height: none; height: auto; aspect-ratio: auto; object-fit: contain; }
      .publication-route-arrow { position: static; width: 22px; height: 26px; margin: 0 auto; transform: rotate(90deg); }
      .publication-visual-pair { grid-template-columns: 1fr; gap: 18px; }
      .nature-inspiration { gap: 16px; margin-bottom: 24px; }
      .nature-example { font-size: 11px; }
      .nature-image { width: min(100%, 132px); }
      .academic-grid { grid-template-columns: 1fr; gap: 36px; }
      .publication-group-feature { grid-template-columns: 1fr; gap: 22px; }
      .pub-group-head { align-items: start; }
      .section-head { align-items: start; }
      .section-head a { margin-top: 8px; }
    }
    @media (max-width: 359px) {
      html { scroll-padding-top: 152px; }
    }
    @media (max-width: 540px) {
      :root { --hero-copy-share: 1; --hero-inline-gap: 0px; }
      .inner, .nav-inner, footer { width: calc(100% - 40px); }
      .hero { padding-block: 35px 42px; }
      .hero-grid { grid-template-columns: 1fr; gap: 28px; }
      .portrait { width: 172px; }
      .portrait img { aspect-ratio: 1 / 1.12; object-position: center 22%; }
      .contact-links { gap: 11px 17px; }
      .section { padding-block: 56px; }
      .section-head { display: block; margin-bottom: 17px; }
      .section-head a { display: inline-block; margin-top: 13px; }
      .pub-group-head { display: block; }
      .pub-group + .pub-group { margin-top: 48px; }
      .publication-layout { padding-block: 24px; }
      .publication-group-feature { grid-template-columns: 1fr; gap: 22px; }
      .publication-route { padding: 16px; }
      .publication-route--abstract { padding: 0; }
      .publication-visual-unit img { max-height: none; }
      .publication-architecture-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
      .contact-inner { display: block; }
      .contact h2 { margin-bottom: 12px; }
      .contact a { font-size: 15px; overflow-wrap: anywhere; }
      .profile-download { padding-block: 34px 38px; }
      .profile-download-links { grid-template-columns: 1fr; }
      .profile-download-link { padding-block: 14px; }
      .profile-download-link + .profile-download-link { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
      footer { flex-direction: column; gap: 9px; }
      footer.index-footer { align-items: flex-end; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition: none !important; }
    }

    .profile-page { min-height: calc(100svh - 163px); }
    .profile-page .profile { padding-block: 62px 86px; }
    .profile-back { color: var(--muted); font-size: 14px; }
    .profile-page .section-head { margin-block: 22px 20px; }
    .profile-heading { align-items: flex-start; }
    .profile-heading .profile-cv { display: inline-flex; align-items: center; gap: 10px; padding: 10px 15px; border: 1px solid #8296a3; color: var(--navy); text-decoration: none; }
    .profile-cv:hover { background: var(--mist); border-color: var(--navy); }
    .profile-cv svg { width: 20px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .profile-cv small { display: block; margin-top: 1px; color: var(--muted); font-size: 12px; font-weight: 400; }
    .profile-introduction { max-width: 64ch; margin-bottom: 28px; color: var(--body); font: 400 var(--text-intro)/1.5 var(--serif); }
    .profile-contents { display: flex; flex-wrap: wrap; gap: 12px 27px; padding-bottom: 24px; margin-bottom: 48px; border-bottom: 1px solid var(--line); }
    .profile-contents a { color: var(--navy); font-size: 13px; }
    .profile-history { display: grid; gap: 64px; }
    .profile-block { min-width: 0; }
    .profile-block > h2 { margin: 0; padding-bottom: 18px; border-bottom: 1px solid #aebdc6; color: var(--navy); font: var(--text-heading-weight) clamp(22px, calc(21px + .25vw), 24px)/1.3 var(--serif); letter-spacing: -.015em; }
    .profile-records, .profile-detail-list { margin: 0; padding: 0; list-style: none; }
    .profile-record { display: grid; grid-template-columns: 88px minmax(0, 1fr) 200px; grid-template-areas: "logo heading meta" ". body body"; column-gap: 28px; row-gap: 14px; align-items: start; padding: 30px 0; border-bottom: 1px solid var(--line); }
    .profile-record--brief { grid-template-areas: "logo heading meta"; }
    .record-heading { grid-area: heading; min-width: 0; }
    .record-heading h3 { margin: 0; color: var(--navy); font: var(--text-heading-weight) 20px/1.35 var(--serif); letter-spacing: -.01em; text-wrap: pretty; }
    .record-role { margin: 6px 0 0; color: var(--body); font: var(--text-heading-weight) 16px/1.5 var(--sans); }
    .record-meta { grid-area: meta; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; padding-top: 3px; text-align: right; }
    .record-date { margin: 0; color: var(--muted); font: 13px/1.6 var(--mono); font-variant-numeric: tabular-nums; }
    .record-location { margin: 0; color: var(--muted); font: 13px/1.6 var(--sans); }
    .institution-name { color: var(--navy); text-decoration: none; overflow-wrap: anywhere; }
    .institution-name:hover { text-decoration: underline; }
    .institution-name.hkust { color: #886000; }
    .institution-name.sorbonne { color: #3557a6; }
    .institution-name.enim { color: #a53e2a; }
    .institution-name.nuaa { color: #1c2475; }
    .institution-name.arts-metiers { color: #80276c; }
    .institution-name.nuaa { font-size: 18px; line-height: 1.4; }
    .institution-name.enim { font-size: 19px; line-height: 1.4; }
    .institution-logo { grid-area: logo; display: block; justify-self: start; width: 88px; height: 64px; object-fit: contain; background: #fff; }
    .institution-logo--hkust, .institution-logo--nuaa { width: 64px; justify-self: center; }
    .record-body { grid-area: body; max-width: 70ch; min-width: 0; font-size: var(--text-detail); }
    .record-context { margin: 0 0 8px; color: var(--muted); font-size: 13px; line-height: 1.65; }
    .record-description { margin: 0; color: var(--body); font-size: var(--text-detail); line-height: var(--text-leading); }
    .record-note { margin: 10px 0 0; color: var(--muted); font-size: var(--text-note); line-height: 1.65; }
    .profile-research-link { display: inline-block; margin-top: 22px; color: var(--navy); font-size: 14px; }
    .profile-wide, .profile-lower-grid { margin-top: 64px; }
    .profile-secondary-grid, .profile-record-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 78px); align-items: start; }
    .profile-secondary-grid { padding-top: 24px; }
    .profile-subheading { margin: 0 0 8px; color: var(--navy); font: var(--text-heading-weight) 20px/1.4 var(--serif); }
    .profile-detail-list > li { padding: 22px 0; border-bottom: 1px solid var(--line); color: var(--body); font-size: var(--text-detail); line-height: var(--text-leading); }
    .profile-detail-list strong { display: block; color: var(--navy); font-size: var(--text-detail); font-weight: var(--text-heading-weight); line-height: 1.6; }
    .profile-detail-list span { display: block; margin-top: 5px; color: var(--muted); font-size: var(--text-note); }
    .profile-detail-list .record-date { margin-top: 7px; }
    .contribution-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 16px; margin-top: 10px; }
    .profile-detail-list .contribution-meta > * { margin: 0; }
    .profile-detail-list .contribution-meta > span { color: var(--muted); font-size: 13px; line-height: 1.55; }
    .profile-detail-list .contribution-meta .contribution-venue { color: var(--navy); font-weight: var(--text-heading-weight); }
    .mentoring-note { margin-top: 16px; }
    .profile-patent { margin-top: 40px; }
    .profile-patent h3 { margin: 22px 0 10px; color: var(--navy); font: var(--text-heading-weight) 22px/1.4 var(--serif); }
    .profile-patent .record-date { margin-bottom: 10px; }
    .profile-contact { margin-top: 64px; padding: 25px 28px; background: var(--mist); color: var(--body); }
    .profile-contact p { margin: 0 0 12px; font-size: var(--text-detail); }
    .profile-contact > div { display: flex; flex-wrap: wrap; gap: 12px 27px; }
    .profile-contact a { color: var(--navy); font-size: 14px; overflow-wrap: anywhere; }
    @media (max-width: 960px) {
      .profile-record { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "logo heading" ". meta" ". body"; column-gap: 24px; row-gap: 12px; }
      .profile-record--brief { grid-template-areas: "logo heading" ". meta"; }
      .record-meta { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 5px 22px; padding: 0; text-align: left; }
      .institution-logo { width: 76px; height: 60px; }
      .institution-logo--hkust, .institution-logo--nuaa { width: 60px; }
    }
    @media (max-width: 760px) {
      .profile-record-grid, .profile-secondary-grid { grid-template-columns: 1fr; gap: 40px; }
      .profile-contents { gap: 12px 24px; margin-bottom: 36px; }
      .profile-history { gap: 48px; }
      .profile-wide, .profile-lower-grid { margin-top: 48px; }
    }
    @media (max-width: 540px) {
      .profile-page .profile { padding-block: 36px 56px; }
      .profile-page .section-head { margin-block: 20px 18px; }
      .profile-cv { margin-top: 16px; }
      .profile-record { grid-template-columns: minmax(0, 1fr) 64px; grid-template-areas: "heading logo" "meta meta" "body body"; column-gap: 18px; row-gap: 14px; padding-block: 24px; }
      .profile-record--brief { grid-template-areas: "heading logo" "meta meta"; }
      .record-heading h3 { font-size: 19px; line-height: 1.4; }
      .record-role { margin-top: 7px; font-size: 15px; }
      .record-meta { gap: 5px 18px; }
      .institution-logo { width: 64px; height: 54px; justify-self: end; }
      .institution-logo--hkust, .institution-logo--nuaa { width: 54px; }
      .profile-detail-list > li { padding-block: 20px; }
      .profile-contact { margin-top: 48px; padding: 22px; }
    }