@font-face{font-family:EB Garamond;src:url('fonts/eb-garamond.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{--paper:#eaeeee;--ink:#171a19;--quiet:#616865;--side:360px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Adobe Garamond Pro','EB Garamond','Songti SC','Noto Serif CJK SC',serif;font-size:14px;font-weight:400;line-height:1.6}button,input,select{font:inherit;color:inherit}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:4px}button{background:none;border:0;padding:0;cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:1px solid currentColor;outline-offset:5px}img{display:block;max-width:100%;height:auto}.skip{position:fixed;top:-100px;left:20px;z-index:100;background:var(--paper);padding:10px}.skip:focus{top:10px}.sidebar{width:var(--side);position:fixed;inset:0 auto 0 0;padding:46px 50px 32px;display:flex;flex-direction:column;z-index:20;background:var(--paper)}.wordmark{display:block;width:max-content;font-size:20px;line-height:1;letter-spacing:.025em}.wordmark:hover{text-decoration:none}nav{margin-top:40px;overflow:auto;scrollbar-width:thin}.main-nav{list-style:none;margin:0;padding:0}.main-nav li{padding:4px 0}.main-nav a[aria-current=page]{position:relative}.main-nav a[aria-current=page]:before{content:'·';position:absolute;left:-14px}.copyright{font-size:13px;margin:auto 0 0;padding-top:30px}.menu-toggle{display:none}main{margin-left:var(--side);padding:50px 50px 50px 0;min-height:100svh}.home-figure{margin:0;min-height:calc(100svh - 100px);display:flex;flex-direction:column;justify-content:center}.home-figure>a{display:block}.home-figure img{width:100%;max-height:calc(100svh - 180px);object-fit:contain}.home-figure figcaption{display:flex;justify-content:space-between;gap:20px;margin-top:16px;font-size:13px}.home-figure figcaption span{color:var(--quiet)}
@media(min-width:1700px){main{padding-right:90px}.home-figure{max-width:1200px}}
@media(max-width:1023px){:root{--side:250px}.sidebar{padding:35px 30px}main{padding:35px 30px 35px 0}.home-figure{min-height:calc(100svh - 70px)}}
@media(max-width:700px){.sidebar{position:relative;width:100%;padding:28px 24px;display:block}.wordmark{font-size:20px}.menu-toggle{display:block;position:absolute;right:24px;top:29px;font-size:15px}.sidebar nav{display:none;margin-top:30px}.sidebar.menu-open nav{display:block}.main-nav li{font-size:16px;padding:6px 0}.copyright{display:none}main{margin:0;padding:25px 24px 50px;min-height:calc(100svh - 76px)}.home-figure{min-height:calc(100svh - 170px)}.home-figure figcaption{font-size:12px;gap:8px}.home-figure img{max-height:65svh}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.page-heading{font-size:18px;font-weight:400;line-height:1.4;margin:0 0 38px}.archive-header{display:flex;align-items:baseline;justify-content:space-between;gap:25px}.archive-header .page-heading{margin-bottom:38px}.archive-count{font-size:13px;color:var(--quiet)}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 28px}.project-card{min-width:0}.cover{height:170px;display:flex;align-items:center;justify-content:center;margin-bottom:13px}.cover img{max-height:100%;width:100%;object-fit:contain}.project-card a:hover{text-decoration:none}.project-card a:hover .project-name{text-decoration:underline;text-underline-offset:4px}.project-name{font-size:14px;line-height:1.5;display:block}.project-meta{font-size:13px;color:var(--quiet);margin:4px 0 0}.student-nav{list-style:none;margin:38px 0 0;padding:0;font-size:13px}.student-nav li{padding:4px 0}.student-nav a.active{text-decoration:underline;text-underline-offset:4px}.student-nav .all-students{margin-bottom:12px}.intro{max-width:580px;padding-top:35px}.intro p{margin:0 0 24px;font-size:16px;line-height:1.9}.intro .intro-en{font-size:17px;line-height:1.55;margin-top:32px}.intro .text-link{margin-top:46px;font-size:14px}.detail-heading{display:flex;justify-content:space-between;gap:28px;align-items:flex-start;margin-bottom:46px}.detail-heading h1{font-size:18px;font-weight:400;margin:0 0 8px}.detail-heading p{margin:0;color:var(--quiet);font-size:13px}.detail-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:13px}.detail-actions select{border:0;border-bottom:1px solid #bbc3bf;background:transparent;border-radius:0;max-width:220px;padding:4px 18px 4px 0}.page-sequence{display:flex;flex-direction:column;gap:64px;max-width:1250px;margin:0 auto}.folio-page{margin:0}.folio-page button{display:block;width:100%;cursor:zoom-in}.folio-page img{width:100%;height:auto;max-height:none}.folio-page figcaption{text-align:right;font-size:12px;color:var(--quiet);margin-top:8px}.page-sequence.index-view{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 20px;align-items:start}.index-view .folio-page button{height:170px;display:flex;align-items:center;justify-content:center}.index-view .folio-page img{width:100%;height:100%;object-fit:contain}.detail-bottom{display:flex;justify-content:space-between;gap:20px;margin:60px 0 0;font-size:13px}dialog{border:0;margin:0;padding:22px 30px;background:var(--paper);color:var(--ink);max-width:none;max-height:none;width:100vw;height:100dvh}dialog::backdrop{background:var(--paper)}dialog[open]{display:flex;flex-direction:column}.viewer-bar{display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:14px;min-height:30px}.image-stage{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;margin:18px 0}.image-stage img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}.image-stage.zoomed{display:block}.image-stage.zoomed img{width:auto;height:auto;max-width:none;max-height:none;margin:auto}.viewer-tools{display:flex;justify-content:center;align-items:center;gap:26px;font-size:14px;min-height:36px}.viewer-tools button{min-width:36px;min-height:36px}.viewer-tools button:disabled{opacity:.3;cursor:default}body.viewer-open{overflow:hidden}.notice{max-width:540px;font-size:16px;line-height:1.8}.nav-projects{margin-top:28px;font-size:13px;list-style:none;padding:0}.nav-projects li{padding:5px 0}.nav-projects a.active{text-decoration:underline;text-underline-offset:4px}.student-label{color:var(--quiet);margin:32px 0 10px;font-size:13px}.load-error{font-size:14px;color:var(--quiet);padding:20px 0}.load-error button{text-decoration:underline}
@media(min-width:1600px){.cover{height:210px}}
@media(max-width:1200px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 22px}.cover{height:190px}}
@media(max-width:700px){.page-heading{margin-bottom:28px}.project-grid{gap:32px 18px}.cover{height:140px}.project-name{font-size:14px}.project-meta{font-size:12px}.archive-header .page-heading{margin-bottom:28px}.archive-count{font-size:12px}.student-nav{columns:2;column-gap:24px}.student-nav li{break-inside:avoid}.detail-heading{display:block;margin-bottom:30px}.detail-actions{margin-top:20px}.page-sequence{gap:35px}.page-sequence.index-view{grid-template-columns:repeat(2,minmax(0,1fr))}.index-view .folio-page button{height:140px}.intro{padding-top:10px}.intro p{font-size:15px}dialog{padding:15px}.viewer-bar{font-size:13px}.viewer-tools{gap:15px}.home-figure{min-height:calc(100svh - 170px)}}
@media(max-width:380px){.project-grid{grid-template-columns:1fr}.cover{height:230px}}

/* Compact, uniform portfolio covers; full pages retain their original proportions. */
.project-grid.compact-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 22px;max-width:920px}
.compact-grid .cover{height:auto;aspect-ratio:4/3;overflow:hidden;margin-bottom:10px;background:#e1e6e4}
.compact-grid .cover img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:center}
.name-toggle{position:absolute;left:194px;top:38px;width:36px;height:36px;display:grid;place-items:center;color:var(--quiet);border-radius:50%}
.name-toggle:hover{background:#dce3e0;color:var(--ink)}
.eye-slash{display:none}.name-toggle[aria-pressed=true] .eye-slash{display:block}
.home-figure figcaption a span{color:inherit}
@media(max-width:1250px){.project-grid.compact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1023px){.name-toggle{left:170px;top:27px}}
@media(max-width:700px){.project-grid.compact-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px}}
@media(max-width:520px){.project-grid.compact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.name-toggle{left:auto;right:80px;top:20px}}

/* Individual student directories show each full cover without cropping. */
.student-grid .cover{overflow:visible;background:transparent}
.student-grid .cover img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.home-slideshow{position:relative;min-height:calc(100svh - 100px)}
.home-stage{position:relative;width:100%;height:calc(100svh - 100px)}
.home-slide{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;opacity:0;transition:opacity .55s ease}
.home-slide.is-active{opacity:1}
.slideshow-toggle{position:absolute;bottom:0;right:0;width:32px;height:32px;display:grid;place-items:center;color:var(--quiet);background:var(--paper)}
.play-symbol{display:none}.slideshow-toggle[aria-pressed=true] .play-symbol{display:block}.slideshow-toggle[aria-pressed=true] .pause-symbol{display:none}
.biography{max-width:680px;padding-top:8px}.bio-intro p{font-size:16px;line-height:1.95;margin:0 0 22px}.bio-intro p:first-child{font-size:19px;margin-bottom:6px}.bio-intro p:nth-child(2){color:var(--quiet);font-size:14px;margin-bottom:34px}
.bio-section{margin-top:44px}.bio-section h2{font-weight:400;font-size:15px;margin:0 0 18px}.bio-section ul{padding:0;list-style:none;margin:0;font-size:14px;line-height:1.9}.bio-section li{margin:7px 0}.bio-list{margin:0;font-size:14px;line-height:1.9}.bio-list>div{display:grid;grid-template-columns:54px 1fr;gap:18px;margin:8px 0}.bio-list dt{color:var(--quiet)}.bio-list dd{margin:0}.bio-link{margin:48px 0 0}
@media(max-width:1023px){.home-slideshow{min-height:calc(100svh - 70px)}.home-stage{height:calc(100svh - 70px)}}
@media(max-width:700px){.home-slideshow{min-height:calc(100svh - 170px)}.home-stage{height:calc(100svh - 170px)}.bio-intro p{font-size:15px}.bio-list>div{gap:12px}}
@media(prefers-reduced-motion:reduce){.home-slide{transition:none}}

.teaching-categories{list-style:none;padding:0;margin:25px 0 0;font-size:14px}.teaching-categories li{padding:4px 0}.teaching-categories a.active{text-decoration:underline;text-underline-offset:4px}.teaching-categories+.student-nav{margin-top:24px}.teaching-categories+.student-label{margin-top:28px}

/* Each menu link retains its own soft resting state. */
.submenu-shell{margin-top:24px}.submenu-shell[hidden]{display:none}.submenu-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:13px;color:var(--quiet);padding:6px 0}.submenu-toggle span{font-size:17px}.submenu-content .teaching-categories{margin-top:10px}
.submenu-content a{display:inline-block;opacity:.82;filter:blur(1px);transition:opacity .5s ease,filter .5s ease}
.submenu-content a:hover,.submenu-content a:focus-visible,.submenu-content a.is-selected{opacity:1;filter:blur(0)}
.submenu-toggle:focus-visible{outline-offset:0}
@media(prefers-reduced-motion:reduce){.submenu-content a{transition:none}}

/* Independent directory branches animate without changing the page route. */
.submenu-content{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .32s ease,opacity .25s ease}
.submenu-content #project-nav{min-height:0;overflow:hidden}
.submenu-shell.is-expanded>.submenu-content{grid-template-rows:1fr;opacity:1}
.directory-tree,.directory-tree ul{list-style:none;padding:0;margin:0}
.directory-tree{padding:10px 0 3px;font-size:13px}
.directory-tree>.nav-branch{margin-bottom:8px}
.directory-tree>.nav-branch>.nav-row>a{font-size:14px}
/* Keep parent labels darker than their nested directory entries. */
.directory-categories,.directory-tree>.nav-branch>.nav-row{color:var(--ink)}
.directory-tree>.nav-branch>.nav-children{color:#59635d}
.directory-tree .nav-children .nav-children{color:#69726d}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px}
.nav-row>a{min-width:0;flex:1;padding:4px 0}.directory-tree a.active{text-decoration:underline;text-underline-offset:4px}
.branch-toggle{flex:0 0 28px;height:28px;font-size:17px;line-height:1;color:var(--quiet);opacity:.65;transition:opacity .2s ease}
.branch-toggle:hover,.branch-toggle:focus-visible{opacity:1}
.nav-children{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .32s ease,opacity .25s ease}
.nav-children.is-expanded{grid-template-rows:1fr;opacity:1}
.nav-children>ul{min-height:0;overflow:hidden;padding-left:14px}
.nav-leaf{padding:5px 0;line-height:1.6}
@media(prefers-reduced-motion:reduce){.submenu-content,.nav-children,.branch-toggle{transition:none}}

/* Category choices stay together above the separately expanding directory. */
.directory-categories{list-style:none;margin:10px 0 22px;padding:0;font-size:14px}
.directory-categories li{padding:4px 0}.directory-categories a{display:block;padding:2px 0}
.directory-categories a.active{text-decoration:underline;text-underline-offset:4px}
.directory-context{display:grid;grid-template-rows:1fr}
.directory-context>.directory-tree{min-height:0;overflow:hidden;padding-top:0}
.directory-context.is-entering{animation:directory-enter .32s ease}
@keyframes directory-enter{from{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}
@media(prefers-reduced-motion:reduce){.directory-context.is-entering{animation:none}}

.country-filters{display:flex;flex-wrap:wrap;gap:12px 26px;margin:-12px 0 32px;font-size:13px;color:var(--quiet);overflow:visible}
.country-filters a[aria-current=page]{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.student-overview{max-width:650px;margin:-10px 0 42px;line-height:1.95}
.student-overview h2{font-size:12px;font-weight:400;color:var(--quiet);margin:0 0 13px;letter-spacing:.06em}
.student-overview p{margin:0 0 15px}
.student-overview p:last-child{margin-bottom:0}
.overview-more{margin-top:15px}
.overview-more summary{display:flex;align-items:center;gap:12px;width:max-content;cursor:pointer;list-style:none;font-size:13px;color:var(--quiet);padding:3px 0}
.overview-more summary::-webkit-details-marker{display:none}
.overview-more summary:hover{color:var(--ink)}
.overview-more summary:focus-visible{outline:1px solid currentColor;outline-offset:5px}
.overview-collapse,.overview-more[open] .overview-expand{display:none}
.overview-more[open] .overview-collapse{display:inline}
.overview-symbol{transition:transform .25s ease}
.overview-more[open] .overview-symbol{transform:rotate(45deg)}
.overview-rest{padding-top:18px}
@media(max-width:700px){.student-overview{margin-bottom:32px}.country-filters{gap:12px 22px;margin-top:-8px}}
@media(prefers-reduced-motion:reduce){.overview-symbol{transition:none}}

/* Quiet reading controls stay within the artwork column. */
.reading-bar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 0;margin:-20px 0 28px;background:var(--paper);font-size:13px;color:var(--quiet)}
.reading-bar form,#viewer-jump{display:flex;align-items:center;gap:10px;margin:0}
.reading-bar input,#viewer-page{width:3.5em;padding:4px 2px;background:transparent;border:0;border-bottom:1px solid #bbc3bf;border-radius:0;text-align:center;-moz-appearance:textfield}
.reading-bar input::-webkit-inner-spin-button,#viewer-page::-webkit-inner-spin-button{appearance:none}
.reading-bar button{min-height:32px;min-width:28px}.reading-bar button:disabled{opacity:.35;cursor:default}
.folio-page{scroll-margin-top:78px}
.submenu-content a.is-selected::before{content:'·';position:absolute;left:-10px;top:50%;transform:translateY(-50%);font-size:16px}
.submenu-content a{position:relative}.directory-categories,.directory-tree{padding-left:10px}
.project-preview{margin-top:12px;font-size:12px;color:var(--quiet)}
.project-preview summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;min-height:28px;width:max-content}
.project-preview summary::-webkit-details-marker{display:none}
.preview-hide,.project-preview[open] .preview-show{display:none}.project-preview[open] .preview-hide{display:inline}
.project-preview[open] summary>span:last-child{transform:rotate(45deg)}
.preview-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.preview-strip button{min-width:0;text-align:center;cursor:zoom-in}.preview-strip img{width:100%;height:72px;object-fit:contain}.preview-strip span{display:block;margin-top:5px}
@media(hover:none),(pointer:coarse){.submenu-content a{filter:none;opacity:1}.nav-row{min-height:44px}.nav-row>a,.nav-leaf>a{padding:10px 0}.branch-toggle{width:44px;height:44px;flex-basis:44px}.directory-categories a{padding:10px 0}.submenu-toggle{min-height:44px}}
@media(max-width:700px){.submenu-content a{filter:none;opacity:1}.nav-row{min-height:44px}.nav-row>a,.nav-leaf>a{padding:10px 0}.branch-toggle{width:44px;height:44px;flex-basis:44px}.directory-categories a{padding:10px 0}.submenu-toggle{min-height:44px}.reading-bar{font-size:13px;margin:0 0 22px;gap:6px}.reading-bar form{gap:7px}.reading-bar button{min-height:40px}.viewer-tools{gap:10px;flex-wrap:wrap}#viewer-jump{gap:6px}.preview-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.project-preview summary{min-height:44px}}

/* Keep both reading modes visible, with a quiet persistent selection. */
.layout-options{display:flex;align-items:center;gap:24px;flex-shrink:0}
.layout-options button{white-space:nowrap;color:var(--quiet)}
.layout-options button[aria-pressed=true]{color:var(--ink);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}

/* Subtle text-only enlargement does not move surrounding content. */
@media(hover:hover) and (pointer:fine){
 a:not(:has(img)):not(.process-links a){display:inline-block}
 :is(a:not(:has(img)):not(.process-links a),.layout-options button,.reading-bar button[type=submit],.detail-bottom button,.menu-toggle,#viewer-close,#viewer-zoom,#viewer-jump button,.process-books button,.process-sheets button,#process-expand,.project-name,.process-links a>span:first-child){transform-origin:left center;transform:translate3d(0,0,0) scale(1);will-change:transform;transition:transform .44s cubic-bezier(.4,0,.2,1),color .3s ease,opacity .5s ease,filter .5s ease}
 :is(a:not(:has(img)):not(.process-links a),.layout-options button,.reading-bar button[type=submit],.detail-bottom button,.menu-toggle,#viewer-close,#viewer-zoom,#viewer-jump button,.process-books button,.process-sheets button,#process-expand):is(:hover,:focus-visible){transform:translate3d(0,0,0) scale(1.05)}
 .project-card>a:is(:hover,:focus-visible) .project-name,.process-links a:is(:hover,:focus-visible)>span:first-child{transform:translate3d(0,0,0) scale(1.05)}
}
@media(prefers-reduced-motion:reduce){
 a,button,.project-name,.process-links a>span:first-child{transition:none!important;will-change:auto}
}

/* Contact details follow the same restrained typography as the biography. */
.contact-page{max-width:680px;padding-top:8px}
.contact-list{margin:0;font-size:15px;line-height:1.8}
.contact-list>div{margin-bottom:30px}
.contact-list dt{font-size:13px;color:var(--quiet);margin-bottom:6px}
.contact-list dd{margin:0;overflow-wrap:anywhere}
.contact-wechat{user-select:all;-webkit-user-select:all}

/* Teaching unlock uses the existing quiet, text-led layout. */
.teaching-nav-row{display:flex;align-items:baseline;gap:20px}
.teaching-lock{font-size:12px;color:var(--quiet)}
.teaching-lock[hidden]{display:none}
.teaching-lock:hover{text-decoration:underline;text-underline-offset:4px}
.teaching-access{max-width:440px;padding-top:8px}
.access-intro{margin:0 0 34px;color:var(--quiet);font-size:14px}
#teaching-login label{display:block;font-size:13px;color:var(--quiet);margin-bottom:10px}
.access-input-row{display:flex;align-items:center;gap:24px}
.access-input-row input{min-width:0;flex:1;width:100%;border:0;border-bottom:1px solid #aab5af;border-radius:0;background:transparent;padding:10px 0;font-size:16px;letter-spacing:.08em}
.access-input-row button{white-space:nowrap;min-height:44px;font-size:14px}
.access-input-row button:disabled{opacity:.55;cursor:wait}
.access-message{font-size:13px;color:var(--quiet);min-height:1.6em;margin:16px 0 0}
@media(max-width:700px){.teaching-lock{min-height:44px}.access-input-row{gap:18px}}