@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Libre+Caslon+Display&display=swap');

:root { --ink:#172b43; --body:#3e4c5c; --muted:#667587; --accent:#235b85; --line:#dce3e9; --soft:#f2f6f9; --white:#fff; font-family:'DM Sans',Arial,sans-serif; color:var(--ink); background:var(--white); font-synthesis:none; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-size:1rem; line-height:1.75; }
a { color:var(--accent); text-underline-offset:4px; }
a:hover { color:#112e4b; }
a:focus-visible,summary:focus-visible { outline:3px solid #70a7cd; outline-offset:5px; }
.skip { position:absolute; left:20px; top:-100px; z-index:100; padding:10px 20px; background:white; }
.skip:focus { top:20px; }
.wrap { width:min(1080px, calc(100% - 96px)); margin-inline:auto; }
.header { border-bottom:1px solid var(--line); }
.header-inner { min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { text-decoration:none; color:var(--ink); font-weight:650; font-size:1.075rem; line-height:1.45; letter-spacing:-.02em; }
.brand span { font-weight:inherit; color:inherit; }
.nav { display:flex; align-items:center; gap:32px; }
.nav a { font-size:.925rem; font-weight:500; text-decoration:none; color:var(--muted); padding:12px 0; position:relative; }
.nav a:hover,.nav a[aria-current=page] { color:var(--ink); }
.nav a[aria-current=page]::after { content:''; position:absolute; bottom:4px; left:0; right:0; height:2px; background:var(--ink); }
.home { padding:72px 0 88px; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) 290px; align-items:center; gap:90px; }
.eyebrow { margin:0 0 18px; color:var(--muted); font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { font-family:'Libre Caslon Display',Georgia,serif; font-size:clamp(3rem,5vw,4.5rem); font-weight:400; line-height:1.08; letter-spacing:-.035em; margin-bottom:12px; }
.chinese { font-family:'Songti SC','Noto Serif CJK SC',serif; font-weight:400; font-size:1.375rem; color:var(--muted); margin-bottom:22px; letter-spacing:.12em; }
.intro { color:var(--body); font-size:1.05rem; line-height:1.85; }
.intro p { margin-bottom:18px; }
.market { display:inline-flex; gap:10px; align-items:center; margin-bottom:23px; font-size:.875rem; color:var(--accent); font-weight:400; }
.market::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.portrait { width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:center 30%; display:block; border-radius:3px; }
.portrait-frame { margin:0; padding-bottom:20px; border-bottom:2px solid var(--ink); }
.portrait-frame figcaption { padding-top:14px; color:var(--muted); font-size:.875rem; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:27px; }
.button { display:inline-flex; align-items:center; gap:22px; padding:10px 18px; color:white; background:var(--ink); border:1px solid var(--ink); text-decoration:none; font-weight:500; font-size:.925rem; border-radius:2px; }
.button:hover { background:#294764; color:white; }
.text-link { font-size:.925rem; font-weight:500; }
.contact-strip { margin-top:64px; padding-top:27px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; }
.contact-strip a,.social a { font-size:.875rem; text-decoration:none; }
.social { display:flex; flex-wrap:wrap; gap:24px; }
.footer { border-top:1px solid var(--line); padding:26px 0; color:var(--muted); font-size:.8rem; }
.footer-inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; }
.footer a { text-decoration:none; }
.page { padding:64px 0 88px; }
.page-heading { margin-bottom:52px; }
.page-heading h1 { font-size:3.625rem; margin:0 0 18px; }
.section-title { font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; font-weight:650; padding-bottom:14px; border-bottom:1px solid var(--line); margin:0 0 30px; }
.paper { padding:0 0 34px; margin:0 0 34px; border-bottom:1px solid var(--line); }
.paper:last-child { margin-bottom:0; }
.paper h3 { font-family:'Libre Caslon Display',Georgia,serif; font-size:2rem; line-height:1.2; font-weight:400; margin-bottom:9px; letter-spacing:-.015em; }
.authors { color:var(--muted); font-size:.925rem; margin-bottom:15px; }
.label { display:inline-block; background:#eaf1f7; color:var(--accent); padding:3px 9px; margin-bottom:14px; font-size:.75rem; font-weight:600; letter-spacing:.045em; }
.paper-meta { font-size:.875rem; color:var(--body); margin:13px 0; }
.paper-meta strong { font-weight:600; }
.paper-meta+.paper-meta { margin-top:7px; }
.paper .authors a { color:var(--muted); text-decoration:none; }
.paper .authors a:hover { color:var(--accent); text-decoration:underline; }
.presentation-details { margin-top:12px; }
.presentation-details summary { font-size:.875rem; color:var(--muted); }
.presentation-details p { color:var(--muted); font-size:.875rem; margin:12px 0 0; }
.paper-actions { display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start; margin-top:16px; }
details { width:100%; }
summary { cursor:pointer; width:fit-content; color:var(--accent); font-size:.925rem; font-weight:500; list-style:none; }
summary::-webkit-details-marker { display:none; }
summary::after { content:'+'; margin-left:10px; font-weight:400; }
details[open] summary::after { content:'−'; }
.abstract { color:var(--body); font-size:.975rem; line-height:1.85; margin:17px 0 0; max-width:900px; }
.research-block > .section-title,.teaching-group > .section-title { font-size:clamp(1.25rem,3vw,1.5rem); line-height:1.35; letter-spacing:-.02em; text-transform:none; color:var(--ink); padding:16px 18px; background:var(--soft); border:0; border-left:3px solid var(--ink); margin:0 0 32px; }
.research-block > .paper:last-child { padding-bottom:0; border-bottom:0; }
.research-block+.research-block { margin-top:64px; padding-top:40px; border-top:2px solid var(--ink); }
.teaching-group { margin:0; }
.teaching-group+.teaching-group { margin-top:64px; padding-top:40px; border-top:2px solid var(--ink); }
.teaching-school+.teaching-school { margin-top:44px; }
.institution { font-size:1.375rem; font-weight:650; line-height:1.4; margin-bottom:12px; }
.course { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:32px; padding:23px 0; border-top:1px solid var(--line); }
.course h4 { font-size:1.025rem; font-weight:550; line-height:1.5; margin:0 0 5px; }
.course p { color:var(--muted); font-size:.875rem; margin:0; }
.course-terms { font-size:.875rem; color:var(--body); text-align:right; }
.rating { color:var(--body); font-size:.925rem; margin-top:20px; }
.featured { margin:54px 0 0; padding:28px 0 0; border-top:1px solid var(--line); display:grid; grid-template-columns:180px 1fr; gap:34px; }
.featured h2 { font-family:'Libre Caslon Display',Georgia,serif; font-size:1.8rem; line-height:1.25; font-weight:400; margin:0 0 14px; }
.featured .eyebrow { margin-top:5px; }
.featured p { color:var(--body); margin-bottom:15px; font-size:.975rem; }
@media (max-width:900px) { .wrap { width:calc(100% - 56px); } .hero { grid-template-columns:minmax(0,1fr) 235px; gap:44px; } .home { padding-top:52px; } h1 { font-size:3.375rem; } .intro { font-size:1rem; } .course { grid-template-columns:minmax(0,1fr) 210px; } }
@media (max-width:650px) { .wrap { width:calc(100% - 40px); } .header-inner { min-height:110px; padding:18px 0; flex-direction:column; align-items:flex-start; gap:9px; } .nav { gap:26px; } .nav a { padding:5px 0 9px; } .nav a[aria-current=page]::after { bottom:2px; } .home,.page { padding:36px 0 54px; } .hero { display:flex; flex-direction:column; align-items:stretch; gap:32px; } h1 { font-size:3.2rem; } .eyebrow { font-size:.75rem; } .portrait-frame { max-width:290px; } .portrait { aspect-ratio:1; } .contact-strip { margin-top:38px; gap:17px; } .social { gap:18px; } .featured { margin-top:38px; grid-template-columns:1fr; gap:0; } .page-heading { margin-bottom:35px; } .page-heading h1 { font-size:3rem; } .paper h3 { font-size:1.8rem; } .course { grid-template-columns:1fr; gap:8px; } .course-terms { text-align:left; } .footer-inner { flex-direction:column; gap:7px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }