:root { --ink:#17202a; --muted:#65717d; --line:#dfe4e8; --accent:#174f8a; --paper:#fff; --soft:#f5f7f8; --width:980px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:72px; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.65 Georgia,"Noto Serif CJK SC","Songti SC",serif; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.container { width:min(calc(100% - 40px),var(--width)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:10; border-bottom:1px solid var(--line); background:rgba(255,255,255,.96); }
.nav-wrap { min-height:56px; display:flex; align-items:center; gap:24px; }
.site-name { color:var(--ink); font-weight:700; white-space:nowrap; }
nav { margin-left:auto; display:flex; gap:17px; font:14px/1.2 Arial,sans-serif; }
nav a { color:#38434c; }
.text-button { padding:5px 8px; border:1px solid var(--line); border-radius:3px; background:white; color:var(--accent); cursor:pointer; }
section { padding:34px 0 18px; border-bottom:1px solid var(--line); }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:5px; font-size:2.15rem; line-height:1.2; }
h1 span { margin-left:14px; color:var(--muted); font-size:1.1rem; font-weight:400; }
h2 { margin-bottom:22px; color:var(--accent); font-size:1.3rem; letter-spacing:.02em; }
h3 { margin-bottom:3px; font-size:1.05rem; line-height:1.4; }
.hero { display:grid; grid-template-columns:190px 1fr; gap:32px; align-items:start; }
.hero .media { aspect-ratio:4/5; }
.subtitle,.venue { color:var(--accent); }
.muted,.authors,.note,time { color:var(--muted); }
.link-row { display:flex; flex-wrap:wrap; gap:12px; font-family:Arial,sans-serif; }
.icon-link { display:inline-flex; align-items:center; gap:6px; color:#38434c; font-size:.8rem; line-height:1; }
.icon-link:hover { color:var(--accent); text-decoration:none; }
.icon-link svg { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.icon-link i { width:16px; flex:none; text-align:center; font-size:15px; }
.hero .link-row { margin-top:18px; gap:10px 0; }
.hero .link-row > .icon-link + .icon-link { margin-left:12px; padding-left:12px; border-left:1px solid var(--line); }
.entry { margin-bottom:18px; }
.entry-head { display:flex; justify-content:space-between; gap:20px; align-items:baseline; }
.entry-head span,.entry-head time { flex:none; }
.experience-list article { display:grid; grid-template-columns:minmax(180px,1fr) minmax(150px,1fr) 200px; gap:22px; align-items:baseline; padding:13px 2px; }
.experience-list article + article { border-top:1px solid var(--line); }
.experience-list h3 { margin:0; }
.experience-list time { width:200px; text-align:left; white-space:nowrap; }
.visual-entry { display:grid; grid-template-columns:210px 1fr; gap:24px; margin-bottom:28px; }
.visual-entry .media { aspect-ratio:16/10; }
.media { overflow:hidden; border:1px solid var(--line); background:var(--soft); }
.media img { width:100%; height:100%; display:block; object-fit:cover; cursor:zoom-in; }
.image-placeholder { width:100%; height:100%; min-height:120px; display:flex; align-items:center; justify-content:center; color:#aeb7bf; }
.image-placeholder[hidden] { display:none; }
.image-placeholder i { font-size:30px; }
.media-empty { border-style:dashed; background:linear-gradient(135deg,#f8f9fa,#f1f3f5); }
.publication h3 { margin-bottom:7px; }
.conference { color:var(--accent); font-weight:800; white-space:nowrap; }
.honors { margin-bottom:6px; color:#9b4d16; font-size:.94rem; }
.project-honors { margin-top:5px; }
.authors { margin-bottom:12px; font-size:.84rem; line-height:1.5; }
.publication-links { margin-top:12px; }
.bubble { padding:5px 8px; border:1px solid var(--line); border-radius:999px; background:var(--soft); min-width: 80px; align-items: center; justify-content: center; }
.bubble:hover { border-color:#aebdca; background:#eef3f7; }
.bubble.is-disabled { color:#9aa3aa; cursor:not-allowed; opacity:.7; }
.dated-list { margin:0; padding:0; list-style:none; }
.dated-list li { display:grid; grid-template-columns:100px 1fr; gap:16px; margin:9px 0; }
.tags { display:flex; flex-wrap:wrap; gap:9px; }
.tags span { padding:5px 11px; border:1px solid var(--line); border-radius:3px; background:var(--soft); font-family:Arial,sans-serif; font-size:.9rem; }
.footer { display:flex; justify-content:space-between; padding-block:28px; color:var(--muted); font-size:.85rem; }
.lightbox { width:min(92vw,1200px); max-width:none; height:min(90vh,900px); max-height:none; padding:42px 20px 20px; border:0; border-radius:6px; background:#111; overflow:hidden; }
.lightbox::backdrop { background:rgba(0,0,0,.82); }
.lightbox img { width:100%; height:100%; display:block; object-fit:contain; }
.lightbox-close { position:absolute; top:8px; right:12px; width:32px; height:32px; padding:0; border:0; background:transparent; color:white; font:30px/1 Arial,sans-serif; cursor:pointer; }
.lightbox-close:hover { color:#cbd3da; }
@media (max-width:820px) { .hero { grid-template-columns:140px 1fr; gap:22px; } .visual-entry { grid-template-columns:170px 1fr; } }
@media (max-width:600px) { .container { width:min(calc(100% - 28px),var(--width)); } nav { display:none; } .hero,.visual-entry { grid-template-columns:1fr; } .hero .media { width:150px; } .visual-entry .media { width:100%; max-width:330px; } .entry-head { display:block; } .experience-list article { grid-template-columns:1fr; gap:2px; } .experience-list time { width:auto; text-align:left; } .dated-list li { grid-template-columns:74px 1fr; gap:10px; } h1 { font-size:1.8rem; } }
@media print { .site-header { position:static; } .text-button,nav { display:none; } section { break-inside:avoid; } }