:root{--navy:#25313d;--night:#191d24;--accent:#846b4d;--link:#49657b;--ink:#3e454d;--muted:#70767d;--pale:#f7f7f4;--line:#e3e5e3}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:#fff;color:var(--ink);font:400 16px/1.65 "Patrick Hand","Segoe Print",cursive}a{color:var(--link);text-decoration:none;transition:color .2s ease}a:hover{color:#293d50}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}img{display:block;max-width:100%}p{margin:0 0 18px}h1,h2,h3{font-family:"Comic Neue","Segoe Print",cursive;line-height:1.25;color:var(--navy);margin:0 0 16px}h2{font-size:32px;font-weight:700}h3{font-size:21px}button,summary{font:inherit}.container{width:min(1140px,calc(100% - 64px));margin-inline:auto}.skip-link{position:fixed;z-index:1100;top:-80px;left:20px;padding:10px 16px;background:#fff;color:var(--navy)}.skip-link:focus{top:12px}
.site-header{position:fixed;inset:0 0 auto;height:72px;z-index:1000;background:rgba(25,29,36,.97);border-bottom:1px solid rgba(255,255,255,.09)}.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{color:#fff;font:700 20px/1.2 "Comic Neue","Segoe Print",cursive;white-space:nowrap}.brand:hover{color:#fff}.brand span{font:400 13px/1.2 "Patrick Hand","Segoe Print",cursive;color:#c9c8c4;margin-left:8px}#primary-navigation{display:flex;gap:24px;align-items:center}#primary-navigation a{position:relative;color:#c6c8cd;font:700 13px/1.6 "Comic Neue","Segoe Print",cursive;padding:10px 0}#primary-navigation a::after{content:"";position:absolute;bottom:3px;left:0;height:2px;width:0;background:var(--accent);transition:width .2s ease}#primary-navigation a:hover,#primary-navigation a.active{color:#fff}#primary-navigation a:hover::after,#primary-navigation a.active::after{width:100%}.menu-toggle{display:none;align-items:center;gap:10px;background:transparent;border:0;color:#fff;padding:10px;cursor:pointer}.menu-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}
.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 82% 32%,rgba(149,129,100,.14),transparent 48%),linear-gradient(115deg,#191d24 0%,#242b35 72%,#30343a 100%);color:#fff;padding:140px 0 70px;min-height:620px}.hero::after{content:"";position:absolute;pointer-events:none;inset:72px 0 0;background:linear-gradient(155deg,transparent 45%,rgba(255,255,255,.025) 100%);border-bottom:1px solid rgba(218,203,179,.16)}.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:center;gap:80px}.eyebrow{color:#d7c1a1;font-size:12px;font-weight:700;letter-spacing:.16em;margin:0 0 18px}.hero h1{color:#fff;font-size:56px;font-weight:800;letter-spacing:-.03em;margin-bottom:16px}.hero h1 span{display:block;margin-top:10px;font:400 25px/1.3 "Patrick Hand","Segoe Print",cursive;letter-spacing:.12em;color:#e5e1da}.hero-focus{font-family:"Comic Neue","Segoe Print",cursive;font-size:21px;font-weight:600;color:#e5e3de;margin-bottom:22px}.focus-dot{color:#d7c1a1}.mobile-break{display:none}.hero-role{font-size:14px;line-height:1.9;color:#c6c9cf;margin-bottom:17px}.hero-role a{color:#eae9e6}.hero-role a:hover{color:#d7c1a1}.hero-description{max-width:640px;color:#c6c9cf;font-size:15px;line-height:1.75;margin-bottom:25px}.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:2px solid var(--accent);border-radius:40px;background:var(--accent);color:#fff;font:700 14px/1.3 "Comic Neue","Segoe Print",cursive;padding:11px 23px}.button:hover{background:#fff;color:var(--accent)}.button-outline{background:transparent;border-color:#747b83}.button-outline:hover{border-color:var(--accent);background:var(--accent);color:#fff}.hero-email{color:#e7e5e1;font-size:14px;padding:8px 3px}.hero-email:hover{color:#d7c1a1}.portrait{margin:0;justify-self:end;width:320px;text-align:center}.portrait-frame{overflow:hidden;width:288px;height:288px;border-radius:50%;background:#fff;outline:1px solid rgba(255,255,255,.3);outline-offset:12px;margin:0 auto 30px}.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;transform:scale(1.16);transform-origin:50% 24%}.portrait figcaption{font-size:12px;letter-spacing:.025em;color:#bfc0c0}
.section{padding:72px 0}.section-pale{background:var(--pale)}.section-heading{text-align:center;margin:0 auto 44px;padding-bottom:23px;position:relative;max-width:850px}.section-heading::after{content:"";position:absolute;width:60px;height:4px;background:var(--accent);bottom:0;left:calc(50% - 30px)}.section-heading h2{margin-bottom:10px;text-transform:uppercase;font-size:30px}.section-heading p{color:var(--muted);font-size:15px;margin:0}.section-kicker{color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.14em;margin-bottom:13px}.section-intro h2{font-size:30px}.about-layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:70px}.about-copy{font-size:15px;line-height:1.85}.about-copy p:last-child{margin-bottom:0}.about-copy .background{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;margin-top:22px}.background strong{color:var(--navy);margin-right:8px}.news-section{padding-block:48px}.news-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:60px}.news-list{margin:0;padding:0;list-style:none}.news-list li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:20px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}.news-list time{font-size:12px;color:var(--muted);font-weight:700;padding-top:2px}.news-list li p{margin:0}.news-list li:last-child{border-bottom:0}.older-news{margin-top:12px}.older-news summary{list-style:none;display:inline-flex;gap:15px;align-items:center;color:var(--navy);cursor:pointer;font-size:12px;font-weight:700;padding:8px 0}.older-news summary::-webkit-details-marker{display:none}.older-news summary span{color:var(--accent);font-size:18px}.older-news[open] summary span{transform:rotate(45deg)}
.research-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}.research-area{text-align:center;padding:0 10px}.research-icon{width:55px;height:55px;display:grid;place-items:center;margin:0 auto 20px;border:1px solid #e1e3e4;border-radius:50%;color:var(--navy);background:var(--pale)}.research-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}.research-area h3{font-size:20px;font-weight:700}.research-area p{font-size:14px;color:var(--muted);line-height:1.8;margin:0}
.publication-list{background:#fff;border:1px solid var(--line);padding:0 28px}.publication{display:grid;grid-template-columns:260px minmax(0,1fr);gap:34px;padding:30px 0;align-items:center;border-bottom:1px solid var(--line)}.publication:last-child{border-bottom:0}.publication-image{display:flex;align-items:center;justify-content:center;height:172px;overflow:hidden;background:#fff;border:1px solid #edefed;border-radius:4px;padding:8px}.publication-image img{width:100%;height:100%;object-fit:contain}.publication-venue{color:var(--navy);font-size:11px;font-weight:700;letter-spacing:.04em;margin:0 0 7px}.status-tag{font-size:10px;letter-spacing:0;font-weight:400;color:#6c757d;margin-left:7px}.publication h3{font:700 18px/1.4 "Patrick Hand","Segoe Print",cursive;margin-bottom:8px}.publication-authors{font-size:11.5px;line-height:1.7;color:var(--muted);margin-bottom:10px}.publication-authors strong{color:var(--navy)}.publication-summary{font-size:13px;color:#525767;margin-bottom:10px}.publication-links{display:flex;gap:20px;align-items:center}.publication-links a{font-size:12px;font-weight:700}.paper-honor{font-size:11px;color:var(--navy);margin-bottom:10px}.publication-footer{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:20px;font-size:11px;color:var(--muted)}.publication-footer p{margin:0}.publication-footer a{font-size:12px}
.subsection-title{font:700 17px/1.4 "Patrick Hand","Segoe Print",cursive;margin-bottom:24px}.workshop-feature{display:grid;grid-template-columns:290px minmax(0,1fr);gap:36px;align-items:center;padding:24px;border:1px solid var(--line);border-left:3px solid var(--accent);background:#fff}.workshop-image{display:flex;align-items:center;justify-content:center;min-height:150px}.workshop-image img{width:100%;height:auto}.activity-label{font-size:10px;letter-spacing:.07em;font-weight:700;color:var(--muted);margin-bottom:9px}.workshop-feature h3{font-size:22px;font-weight:700;margin-bottom:12px}.workshop-feature p:not(.activity-label){font-size:13px;color:var(--muted);margin-bottom:14px}.text-link{font-size:12px;font-weight:700}.outreach-item{padding:24px 27px 0;margin-bottom:30px}.outreach-item h3{font-size:17px;font-weight:600;max-width:900px;line-height:1.5}.outreach-item p:last-child{font-size:13px;color:var(--muted);margin-bottom:0}.talks-heading{margin-top:32px}.talk-item{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;padding:15px 0;border-top:1px solid var(--line);align-items:baseline}.talk-item time{font-size:12px;font-weight:700;color:var(--muted)}.talk-item h3{font:400 14px/1.6 "Patrick Hand","Segoe Print",cursive;margin:0}.service-section{padding-block:48px}.service-layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:70px;align-items:center}.service-layout h2{margin:0}.service-description{font-size:14px;color:var(--muted);margin-bottom:15px}.service-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}.service-list li{font-size:12px;color:var(--navy);background:#fff;border:1px solid #dfe2e2;border-radius:4px;padding:6px 13px}
.contact-section{padding:58px 0;background:var(--navy);color:#c9cbd0}.contact-inner{display:flex;justify-content:space-between;align-items:center;gap:50px}.contact-inner h2{color:#fff;font-size:34px;margin-bottom:12px}.contact-inner .eyebrow{margin-bottom:10px}.contact-inner p:last-child{font-size:14px;margin:0;max-width:520px}.contact-email{color:#fff;font-size:18px;border-bottom:1px solid #d7c1a1;padding-bottom:6px;white-space:nowrap}.contact-email:hover{color:#e9d8bf}.site-footer{background:#191d24;color:#a0a4ab;padding:22px 0;font-size:11px}.footer-inner{display:flex;justify-content:space-between;gap:20px;align-items:center}.footer-inner p{margin:0}.footer-inner>div{display:flex;flex-wrap:wrap;gap:22px}.footer-inner a{color:#bfc3c9}.footer-inner a:hover{color:#d7c1a1}.credits-page{padding-top:130px}.credits-page ul{padding-left:20px}.credits-page li{margin-bottom:20px;font-size:14px}
@media(min-width:1400px){.container{width:min(1200px,calc(100% - 80px))}.hero-inner{gap:110px}}
@media(max-width:1100px){#primary-navigation{gap:18px}.brand span{display:none}.hero-inner{grid-template-columns:minmax(0,1fr) 270px;gap:50px}.hero h1{font-size:48px}.hero-focus{font-size:19px}.portrait{width:270px}.portrait-frame{width:244px;height:244px}.about-layout,.service-layout{grid-template-columns:260px minmax(0,1fr);gap:40px}.publication{grid-template-columns:230px minmax(0,1fr);gap:26px}.workshop-feature{grid-template-columns:240px minmax(0,1fr);gap:26px}}
@media(max-width:820px){html{scroll-padding-top:80px}.container{width:calc(100% - 44px)}.site-header{height:66px}.brand{font-size:18px}.brand span{display:inline;font-size:12px}.menu-toggle{display:flex}#primary-navigation{display:none;position:absolute;top:66px;left:0;right:0;padding:14px 22px 22px;background:#191d24;border-bottom:1px solid #41454b;flex-direction:column;align-items:stretch;gap:2px}.site-header.menu-open #primary-navigation{display:flex}#primary-navigation a{padding:10px 0}#primary-navigation a::after{display:none}.hero{padding:110px 0 52px;min-height:0}.hero-inner{grid-template-columns:minmax(0,1fr) 210px;gap:28px}.hero h1{font-size:40px}.hero h1 span{font-size:21px}.hero-focus{font-size:17px}.hero-role{font-size:12px}.hero-description{font-size:13px}.button{font-size:12px;padding:10px 17px}.hero-actions{gap:11px}.hero-email{font-size:12px}.portrait{width:210px}.portrait-frame{width:190px;height:190px;outline-offset:8px}.portrait figcaption{font-size:10px}.section{padding:54px 0}.about-layout,.news-layout,.service-layout{grid-template-columns:1fr;gap:22px}.section-intro h2 br{display:none}.about-copy{font-size:14px}.news-section,.service-section{padding-block:40px}.research-grid{gap:20px}.research-area{padding:0}.research-area h3{font-size:17px}.research-area p{font-size:12px}.section-heading h2{font-size:26px}.section-heading p{font-size:13px}.publication-list{padding:0 22px}.publication{grid-template-columns:180px minmax(0,1fr);gap:22px}.publication-image{height:150px}.publication h3{font-size:16px}.publication-authors{font-size:10.5px}.publication-summary{font-size:12px}.workshop-feature{grid-template-columns:210px minmax(0,1fr);padding:20px;gap:22px}.workshop-feature h3{font-size:19px}.contact-inner{flex-direction:column;align-items:flex-start;gap:24px}.contact-inner h2{font-size:30px}.contact-section{padding:44px 0}}
@media(max-width:600px){.container{width:calc(100% - 40px)}.hero-inner{display:flex;flex-direction:column;align-items:flex-start;gap:32px}.hero{padding:105px 0 45px}.hero-copy{width:100%}.hero h1{font-size:41px}.hero h1 span{font-size:22px;margin-top:9px}.hero-focus{font-size:18px;line-height:1.65}.focus-dot{display:none}.mobile-break{display:block}.hero-role{font-size:12px;line-height:1.85}.hero-description{font-size:13px;max-width:450px}.portrait{width:100%;display:flex;align-items:center;text-align:left;gap:28px}.portrait-frame{flex:0 0 118px;width:118px;height:118px;margin:0 8px;outline-offset:6px}.portrait figcaption{font-size:12px;max-width:175px;line-height:1.8;color:#c7c8c8}.section{padding:44px 0}.section-heading{margin-bottom:30px;padding-bottom:18px}.section-heading h2{font-size:24px;line-height:1.3}.section-heading p{font-size:12px}.section-intro h2{font-size:27px}.about-copy{font-size:13px;line-height:1.85}.about-copy .background{font-size:12px}.news-list li{grid-template-columns:78px minmax(0,1fr);gap:12px;font-size:12px;padding:11px 0}.news-list time{font-size:10px}.research-grid{grid-template-columns:1fr;gap:28px}.research-area{position:relative;text-align:left;padding-left:66px;min-height:72px}.research-icon{position:absolute;left:0;top:1px;width:45px;height:45px;margin:0}.research-icon svg{width:24px;height:24px}.research-area h3{font-size:18px;margin-bottom:8px}.research-area p{font-size:12px}.publication-list{padding:0 18px}.publication{display:flex;flex-direction:column;align-items:stretch;gap:18px;padding:24px 0}.publication-image{width:100%;height:170px;background:#fff;max-width:450px}.publication h3{font-size:16px;line-height:1.5}.publication-authors{font-size:11px;line-height:1.8}.publication-venue{font-size:10px}.publication-summary{font-size:12px}.publication-footer{display:block;font-size:10px;line-height:1.7}.publication-footer p{margin-bottom:10px}.publication-footer a{font-size:11px}.workshop-feature{display:flex;flex-direction:column;align-items:stretch;padding:18px;gap:20px}.workshop-image{min-height:0;max-width:450px;margin:auto}.workshop-feature h3{font-size:18px}.workshop-feature h3 br{display:none}.activity-label{font-size:9px;line-height:1.6}.outreach-item{padding:22px 3px 0}.outreach-item h3{font-size:15px}.outreach-item p:last-child{font-size:12px}.talk-item{grid-template-columns:75px minmax(0,1fr);gap:14px}.talk-item time{font-size:10px}.talk-item h3{font-size:12px}.service-description{font-size:12px}.service-list li{font-size:11px;padding:5px 10px}.contact-email{font-size:16px;white-space:normal;overflow-wrap:anywhere}.contact-inner p:last-child{font-size:12px}.footer-inner{align-items:flex-start;flex-direction:column;gap:12px}.footer-inner>div{gap:18px}.credits-page{padding-top:110px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important}}

/* Quiet graphite, warm metallic accents, and restrained academic links. */
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.about-copy a{color:var(--link);font-weight:600;text-decoration:underline;text-decoration-color:rgba(73,101,123,.22);text-underline-offset:3px}
.about-copy a:hover{color:#263c4e;text-decoration-color:currentColor}
.portrait-frame{outline-color:rgba(218,203,179,.32)}
.button{border-radius:7px}.button-outline{border-color:#85898e}
.hero-description{max-width:630px}

/* Handwritten lettering inspired by the scientific world-model reference. */
body{font-size:18px;line-height:1.65}
.brand{font-size:22px}.brand span{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;font-size:13px}
.hero h1{font-weight:700;font-size:60px;letter-spacing:-.02em}
.hero h1 span{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;font-weight:300;letter-spacing:.13em}
.hero-focus{font-size:23px;font-weight:700}
.hero-role{font-size:17px;line-height:1.7}.hero-description{font-size:18px;line-height:1.6}
.eyebrow,#primary-navigation a,.section-kicker,.activity-label,.publication-venue,.button,.publication-links a,.text-link{font-family:"Comic Neue","Segoe Print",cursive}
.eyebrow{font-size:13px}.button{font-size:15px}.hero-email{font-size:16px}.portrait figcaption{font-size:15px}
.about-copy{font-size:18px;line-height:1.75}.about-copy .background{font-size:16px}.about-copy a{font-weight:400}
.section-heading h2{text-transform:none;font-size:34px}.section-intro h2{font-size:34px}.section-heading p{font-size:18px}
.news-list li{font-size:17px}.news-list time{font-family:"Comic Neue","Segoe Print",cursive;font-size:13px}.older-news summary{font-family:"Comic Neue","Segoe Print",cursive;font-size:14px}
.research-area h3{font-size:23px}.research-area p{font-size:17px;line-height:1.65}
.publication h3{font-family:"Comic Neue","Segoe Print",cursive;font-size:20px}.publication-authors{font-size:14px;line-height:1.6}.publication-summary{font-size:16px;line-height:1.55}.publication-venue{font-size:12px}.publication-links a{font-size:13px}.paper-honor{font-size:14px}.publication-footer{font-size:13px}
.subsection-title{font-family:"Comic Neue","Segoe Print",cursive;font-size:20px}.workshop-feature h3{font-size:25px}.workshop-feature p:not(.activity-label){font-size:17px}.outreach-item h3{font-size:20px}.outreach-item h3:last-child{margin-bottom:0}.talk-item h3{font-size:17px}.service-description{font-size:17px}.service-list li{font-family:"Comic Neue","Segoe Print",cursive;font-size:13px}.contact-inner p:last-child{font-size:17px}.contact-email{font-family:"Comic Neue","Segoe Print",cursive}.footer-inner{font-family:"Comic Neue","Segoe Print",cursive;font-size:12px}
@media(max-width:1100px){.hero h1{font-size:52px}.hero-focus{font-size:21px}}
@media(max-width:820px){.brand{font-size:21px}.hero h1{font-size:43px}.hero-focus{font-size:20px}.hero-role{font-size:15px}.hero-description{font-size:16px}.button{font-size:13px}.hero-email{font-size:15px}.section-heading h2{font-size:31px}.section-heading p{font-size:16px}.about-copy{font-size:17px}.research-area h3{font-size:20px}.research-area p{font-size:15px}.publication h3{font-size:18px}.publication-authors{font-size:13px}.publication-summary{font-size:15px}.workshop-feature h3{font-size:22px}}
@media(max-width:600px){.brand{font-size:21px}.brand span{font-size:12px}.hero h1{font-size:47px}.hero-focus{font-size:20px;line-height:1.5}.hero-role{font-size:14px}.hero-description{font-size:17px;line-height:1.55}.hero-actions{column-gap:12px;row-gap:12px}.button{font-size:13px;padding-inline:15px}.hero-email{font-size:14px}.portrait figcaption{font-size:14px}.section-intro h2{font-size:31px}.section-heading h2{font-size:29px}.section-heading p{font-size:15px}.about-copy{font-size:16px;line-height:1.7}.about-copy .background{font-size:15px}.news-list li{font-size:15px}.news-list time{font-size:11px}.research-area h3{font-size:21px}.research-area p{font-size:15px}.publication h3{font-size:19px}.publication-authors{font-size:13px}.publication-summary{font-size:15px}.publication-venue{font-size:11px}.publication-footer{font-size:12px}.workshop-feature h3{font-size:21px}.workshop-feature p:not(.activity-label){font-size:15px}.outreach-item h3{font-size:18px}.talk-item h3{font-size:15px}.service-description{font-size:15px}.contact-inner p:last-child{font-size:15px}}

/* Victoria Harbour at night: darker on the text side, open city lights on the right. */
.hero{background-image:linear-gradient(90deg,rgba(10,17,26,.86) 0%,rgba(10,17,26,.7) 44%,rgba(10,17,26,.3) 100%),url("../img/hong-kong-night.jpg");background-size:cover;background-position:center,center 58%;background-repeat:no-repeat;background-color:#111c2b}
.hero::after{background:linear-gradient(180deg,rgba(5,10,17,.14) 0%,transparent 55%,rgba(5,10,17,.32) 100%)}
.hero-role,.hero-description{color:#e1e5eb}.portrait figcaption{color:#e0e4e9}
@media(max-width:600px){.hero{background-image:linear-gradient(180deg,rgba(10,17,26,.84) 0%,rgba(10,17,26,.8) 55%,rgba(10,17,26,.54) 100%),url("../img/hong-kong-night.jpg");background-position:center,74% center}.portrait figcaption{color:#f0f1f2}}