:root {
  color-scheme: light;
  --paper: #f4f3ed;
  --surface: #fff;
  --ink: #272f2c;
  --body: #464d49;
  --muted: #72776f;
  --accent: #396452;
  --soft: #f4f6f2;
  --line: #e3e6df;
  --serif: "Noto Serif SC", "Songti SC", STSong, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #161c19;
  --surface: #202723;
  --ink: #eeeae0;
  --body: #d0d1c7;
  --muted: #a6afa6;
  --accent: #b0c9b6;
  --soft: #27302a;
  --line: #3a443c;
}
* {box-sizing:border-box}
html {scroll-behavior:smooth}
body {margin:0; color:var(--body); background:var(--paper); font-family:var(--serif); font-size:16px; line-height:1.9; -webkit-font-smoothing:antialiased}
body::before {content:""; position:fixed; inset:0; z-index:-1; background:url("urban-morphology-texture-v2.png") center / 740px repeat; opacity:.64; pointer-events:none; mix-blend-mode:multiply}
:root[data-theme="dark"] body::before {filter:grayscale(1) invert(1); mix-blend-mode:screen; opacity:.1}
[hidden] {display:none!important}
h1,h2,h3,h4,p,figure {margin:0}
a {color:var(--accent); text-decoration:none; text-underline-offset:5px}
a:hover {text-decoration:underline}
button {font:inherit; color:inherit; cursor:pointer}
button,a {-webkit-tap-highlight-color:transparent}
button {border:0; background:none}
img {display:block; max-width:100%; object-fit:cover}
::selection {background:#ccded0; color:#1e3d2d}
:focus-visible {outline:2px solid var(--accent); outline-offset:5px; border-radius:2px}
.skip-link {position:fixed; top:-80px; left:24px; z-index:100; padding:10px 18px; background:var(--surface); border:1px solid var(--line)}
.skip-link:focus {top:10px}
.site-header {position:sticky; top:0; z-index:10; background:var(--surface); border-bottom:1px solid var(--line)}
.topbar {width:min(100% - 64px,1024px); min-height:76px; margin:0 auto; display:flex; align-items:center; gap:36px}
.primary-nav {display:flex; align-items:center; gap:28px; align-self:stretch}
.primary-nav a {display:flex; align-items:center; position:relative; color:var(--muted); font-size:13px; white-space:nowrap; text-decoration:none; transition:color .18s}
.primary-nav a::after {content:""; position:absolute; height:2px; bottom:-1px; left:0; right:0; background:var(--accent); transform:scaleX(0); transition:transform .18s}
.primary-nav a:hover,.primary-nav a[aria-current] {color:var(--accent)}
.primary-nav a[aria-current]::after {transform:scaleX(1)}
.header-tools {margin-left:auto; display:flex; gap:15px; align-items:center}
.workspace-link {display:flex; align-items:center; gap:7px; white-space:nowrap; font-size:12px; color:var(--muted); border-right:1px solid var(--line); padding-right:20px}
.workspace-link i {font-size:12px}
.icon-button {display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:50%; padding:0; flex-shrink:0; font-size:18px}
.icon-button:hover {background:var(--soft); color:var(--accent)}
.language-toggle {font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.04em; min-width:26px; min-height:34px; padding:3px; color:var(--muted)}
.language-toggle:hover {color:var(--accent)}
.reading-sheet {width:min(100% - 64px,1024px); margin:0 auto; padding:0 112px; background:var(--surface); border-inline:1px solid var(--line); min-height:calc(100vh - 76px)}
main {min-height:calc(100vh - 240px)}
.introduction {padding:68px 0 30px; scroll-margin-top:84px}
.identity {display:flex; justify-content:space-between; align-items:center; gap:32px}
.identity-copy {min-width:0}
.eyebrow {font-family:var(--sans); color:var(--accent); letter-spacing:.16em; font-size:10px; line-height:1.5; margin-bottom:19px; font-weight:500}
h1 {font-size:44px; color:var(--ink); line-height:1.45; font-weight:400; letter-spacing:.12em}
.alternate-name {font-family:Georgia,"Noto Serif SC",serif; font-size:21px; line-height:1.6; color:var(--muted); margin-top:1px; letter-spacing:.01em}
.role {margin-top:20px; font-size:14px; color:var(--ink)}
.affiliation {font-size:13px; color:var(--muted); margin-top:1px}
.portrait {width:126px; height:164px; flex-shrink:0; object-fit:cover; object-position:center 38%; border-radius:2px; margin-right:2px}
.text-links {display:flex; align-items:center; gap:22px; flex-wrap:wrap; font-family:var(--sans); font-size:12px; line-height:1.8}
.text-links a {display:inline-flex; align-items:center; gap:6px}
.text-links .ph {font-size:13px}
.intro-links {margin-top:27px}
.welcome {margin-top:27px; padding:4px 0 4px 17px; border-left:2px solid var(--accent); font-size:13px; color:var(--body); line-height:2.05}
.section-index {display:flex; flex-wrap:wrap; gap:14px 29px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section-index a {font-size:12px; color:var(--muted); display:flex; gap:8px; align-items:center}
.section-index a span {font-family:var(--sans); font-size:9px; color:var(--accent); font-variant-numeric:tabular-nums}
.section-index a:hover {color:var(--accent)}
.content-section {padding:43px 0 45px; border-bottom:1px solid var(--line); scroll-margin-top:84px}
.content-section:last-child {border-bottom:0; padding-bottom:24px}
.section-heading {display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; gap:20px}
h2 {font-size:21px; font-weight:400; line-height:1.6; color:var(--ink); letter-spacing:.05em}
.section-number {font:11px var(--sans); color:var(--muted); font-variant-numeric:tabular-nums}
.prose {font-size:15px; line-height:2.1; overflow-wrap:anywhere}
.prose p + p {margin-top:1.2em}
.research-interests {margin-top:24px; display:flex; align-items:baseline; gap:18px; font-size:13px; line-height:2; flex-wrap:wrap}
.small-label {font-family:var(--sans); font-size:11px; color:var(--muted)}
.research-interests p {color:var(--accent)}
.separator {display:inline-block; margin:0 14px; color:var(--muted); font-size:11px}
.service-block {font-size:12px; color:var(--muted); margin-top:20px; line-height:2}
.service-block ul {padding:0; margin:0 0 6px; list-style:none}
.history-entry {display:grid; grid-template-columns:145px minmax(0,1fr); gap:24px; padding:16px 0}
.history-entry:first-child {padding-top:1px}
.history-entry:last-child {padding-bottom:0}
.history-date {font-family:var(--sans); font-size:11px; padding-top:4px; color:var(--muted); font-variant-numeric:tabular-nums}
.history-entry h3 {font-size:14px; font-weight:400; line-height:1.95; color:var(--ink)}
.entry-meta {font-size:12px; color:var(--muted); line-height:1.9; margin-top:5px; overflow-wrap:anywhere}
.subheading {font-size:13px; font-weight:400; color:var(--accent); letter-spacing:.08em; margin-bottom:18px}
.book-entry {display:grid; grid-template-columns:64px minmax(0,1fr); gap:20px; padding:0 0 28px}
.book-year {font-family:Georgia,serif; color:var(--muted); font-size:16px; padding-top:3px}
.book-entry .entry-title {font-size:16px}
.book-entry .entry-authors {margin-top:8px}
.book-entry .entry-meta {margin-top:1px}
.papers-heading {padding-top:21px; border-top:1px solid var(--line); margin-bottom:5px}
.year-group {display:grid; grid-template-columns:64px minmax(0,1fr); gap:20px; padding-top:26px}
.year-label {font-family:Georgia,var(--serif); font-size:19px; line-height:1.7; color:var(--accent); font-variant-numeric:tabular-nums}
.year-entries {min-width:0}
.publication-entry {padding:0 0 23px}
.publication-entry + .publication-entry {border-top:1px solid var(--line); padding-top:21px}
.publication-entry:last-child {padding-bottom:0}
.entry-title {font-size:15px; font-weight:400; line-height:1.95; color:var(--ink); overflow-wrap:anywhere; letter-spacing:.005em}
.paper-link {display:inline-flex; width:26px; height:25px; align-items:center; justify-content:center; vertical-align:-4px; color:var(--accent); margin-left:4px; border-radius:4px}
.paper-link .ph {font-size:13px}
.paper-link:hover {text-decoration:none; background:var(--soft)}
.entry-authors {font-size:12px; color:var(--muted); line-height:1.8; margin-top:7px}
.entry-authors strong {font-weight:400; color:var(--body)}
.entry-journal {font-family:Georgia,var(--serif); color:var(--muted); font-size:13px; line-height:1.8; margin-top:2px}
.project-entry {padding-bottom:23px}
.project-entry + .project-entry {border-top:1px solid var(--line); padding-top:22px}
.project-entry:last-child {padding-bottom:0}
.project-type {font-family:var(--sans); font-size:10px; color:var(--muted); margin-bottom:6px; line-height:1.9}
.project-entry .entry-meta {font-size:11px; margin-top:8px}
.site-footer {display:flex; justify-content:space-between; align-items:center; gap:24px; padding:30px 0 38px; margin-top:46px; border-top:1px solid var(--line); font-family:var(--sans); font-size:10px; color:var(--muted); line-height:2.1}
.back-top {display:flex; align-items:center; justify-content:center; width:36px; height:36px; color:var(--accent); font-size:16px; flex-shrink:0}
.back-top:hover {text-decoration:none; background:var(--soft); border-radius:50%}
.collection-panel,.detail-panel {padding-top:58px; min-height:calc(100vh - 260px)}
.collection-header {padding-bottom:28px; border-bottom:1px solid var(--line)}
.collection-header h1 {font-size:34px; letter-spacing:.05em}
.empty-state {min-height:330px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--muted); gap:20px; font-size:13px}
.empty-state .ph {font-size:29px; color:var(--accent)}
.student-group {padding-top:30px}
.student-card {display:flex; align-items:center; gap:24px; padding:25px 0; border-bottom:1px solid var(--line); color:var(--body)}
.student-card:hover {text-decoration:none}
.student-card:hover h2 {color:var(--accent)}
.student-card img {width:90px; height:114px; border-radius:2px; flex-shrink:0}
.student-card h2 {font-size:21px}
.student-card > .ph {margin-left:auto}
.student-research {font-size:13px; margin-top:10px}
.back-link {display:inline-flex; gap:9px; align-items:center; font-family:var(--sans); font-size:12px; margin-bottom:28px}
.student-detail-head {display:flex; align-items:center; gap:28px; padding-bottom:30px; border-bottom:1px solid var(--line)}
.student-detail-head img {width:126px; height:160px; border-radius:2px}
.student-detail-head h1 {font-size:32px}
.detail-section {padding-top:30px}
.detail-section h2 {font-size:19px; margin-bottom:16px}
.detail-panel .text-links {margin-top:30px}
.album-list {padding-top:28px; display:grid; gap:36px}
.album-card {display:block; color:var(--body)}
.album-card:hover {text-decoration:none}
.album-card img {width:100%; aspect-ratio:1.62; height:auto; transition:opacity .2s}
.album-card:hover img {opacity:.9}
.album-label {display:flex; align-items:baseline; gap:16px; margin-top:12px}
.album-label h2 {font-size:19px; flex:1}
.album-label .entry-meta {font-family:var(--sans); font-size:11px}
.album-empty {height:240px; display:flex; justify-content:center; align-items:center; background:var(--soft); font-size:36px}
.detail-panel > h1 {font-size:30px; line-height:1.6; letter-spacing:.03em; overflow-wrap:anywhere}
.album-description {margin-top:18px; margin-bottom:28px; color:var(--muted); font-size:14px}
.photo-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 20px; margin-top:30px}
.photo-open {display:block; padding:0; width:100%; background:var(--soft)}
.photo-open img {width:100%; aspect-ratio:4/3; height:auto}
.photo-grid figcaption {font-size:12px; color:var(--muted); margin-top:9px; line-height:1.7}
.photo-grid time {display:block; font-family:var(--sans); font-size:10px; margin-top:3px}
.blog-item {padding:28px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:86px minmax(0,1fr) 16px; gap:20px; align-items:baseline}
.blog-item time {font-family:var(--sans); font-size:11px; color:var(--muted)}
.blog-item h2 {font-size:20px}
.blog-item h2 a {color:var(--ink)}
.blog-item p {font-size:13px; color:var(--muted); margin-top:12px}
.blog-article > time {display:block; margin-bottom:12px}
.blog-article .prose {margin-top:35px}
.photo-viewer {padding:50px 24px 24px; border:0; max-width:min(1200px,95vw); width:95vw; max-height:94dvh; background:var(--surface); color:var(--body)}
.photo-viewer::backdrop {background:rgba(8,15,11,.85)}
.viewer-close {position:absolute; top:10px; right:14px}
.viewer-frame {display:grid; grid-template-columns:36px minmax(0,1fr) 36px; gap:14px; align-items:center}
.viewer-frame img {max-height:75dvh; width:auto; margin:0 auto; object-fit:contain}
.viewer-frame figcaption {font-size:12px; margin-top:14px; text-align:center; color:var(--muted)}
body:has(dialog[open]) {overflow:hidden}
[data-language="en"] h1 {letter-spacing:-.025em; font-size:43px; font-family:Georgia,var(--serif)}
[data-language="en"] .alternate-name {font-family:var(--serif); font-size:19px; letter-spacing:.1em}
[data-language="en"] .affiliation {font-size:12px; max-width:370px; line-height:1.8}
[data-language="en"] .primary-nav {gap:25px}
[data-language="en"] h2 {letter-spacing:0; font-family:Georgia,var(--serif); font-size:23px}
[data-language="en"] .prose {font-family:Georgia,var(--serif); font-size:16px; line-height:1.95}
[data-language="en"] .entry-title {font-family:Georgia,var(--serif); font-size:16px; line-height:1.8}
[data-language="en"] .section-index {gap:10px 24px}
[data-language="en"] .section-index a {font-family:var(--sans); font-size:11px}
[data-language="en"] .research-interests {display:block}
[data-language="en"] .research-interests p {margin-top:8px; font-size:12px}
[data-language="en"] .history-entry h3 {font-family:Georgia,var(--serif); font-size:15px; line-height:1.8}
[data-language="en"] .detail-panel h1,[data-language="en"] .collection-header h1 {font-size:34px}
@media (min-width:1500px) {.reading-sheet {padding-inline:124px} .topbar {gap:40px}}
@media (max-width:1050px) {
  .reading-sheet {padding-inline:70px}
  .topbar {gap:28px}
  .primary-nav {gap:24px}
  .header-tools {gap:10px}
  .workspace-link {padding-right:14px}
}
@media (max-width:800px) {
  .reading-sheet {width:calc(100% - 36px); padding-inline:42px}
  .topbar {width:calc(100% - 44px); gap:22px; min-height:68px}
  .primary-nav {gap:20px}
  .header-tools {gap:6px}
  .workspace-link {font-size:11px; padding-right:10px}
  .workspace-link .ph {display:none}
  [data-language="en"] .primary-nav {gap:18px}
  [data-language="en"] .workspace-link {font-size:10px}
  .introduction {padding-top:48px}
  .section-index {gap:10px 20px}
  .history-entry {grid-template-columns:125px minmax(0,1fr); gap:20px}
}
@media (max-width:620px) {
  body {background:var(--surface)}
  body::before {display:none}
  .topbar {width:100%; padding:12px 24px 0; display:grid; grid-template-columns:minmax(0,1fr); gap:9px 0}
  .header-tools {grid-column:1; grid-row:1; justify-self:end; gap:12px; margin-left:0}
  .workspace-link {font-size:11px; padding-right:13px}
  .workspace-link .ph {display:block}
  .primary-nav {grid-column:1 / -1; grid-row:2; gap:28px; min-height:39px; justify-content:space-between; padding:0 3px}
  .primary-nav a {font-size:12px; padding:4px 0 11px}
  .reading-sheet {width:100%; padding:0 26px; border:0}
  .introduction {padding-top:40px; padding-bottom:26px}
  .identity {gap:20px; align-items:flex-start}
  h1 {font-size:35px}
  .eyebrow {font-size:8px; letter-spacing:.12em; margin-bottom:13px}
  .alternate-name {font-size:18px; margin-top:2px}
  .role {font-size:12px; margin-top:17px}
  .affiliation {font-size:11px; line-height:1.85; max-width:220px}
  .portrait {width:87px; height:115px; margin-top:28px; margin-right:0}
  .intro-links {margin-top:23px; gap:10px 19px; font-size:11px}
  .text-links .ph {font-size:12px}
  .welcome {font-size:12px; padding-left:13px; margin-top:24px; line-height:2}
  .section-index {gap:12px 20px; justify-content:space-between; padding:16px 0}
  .section-index a {font-size:11px; gap:5px}
  .section-index a span {font-size:8px}
  .content-section {padding:32px 0 34px; scroll-margin-top:119px}
  .section-heading {margin-bottom:19px}
  h2 {font-size:20px}
  .prose {font-size:14px; line-height:2.1}
  .research-interests {gap:7px 16px; margin-top:21px; font-size:12px}
  .service-block {font-size:11px; margin-top:16px}
  .history-entry {display:block; padding:12px 0}
  .history-date {margin-bottom:7px; font-size:10px}
  .history-entry h3 {font-size:13px}
  .history-entry .entry-meta {font-size:11px}
  .year-group {grid-template-columns:1fr; gap:12px; padding-top:24px}
  .year-label {font-size:18px; border-bottom:1px solid var(--line); padding-bottom:7px}
  .entry-title {font-size:14px; line-height:1.95}
  .entry-authors {font-size:11px}
  .entry-journal {font-size:12px}
  .book-entry {grid-template-columns:42px minmax(0,1fr); gap:13px}
  .book-entry .entry-title {font-size:14px}
  .book-year {font-size:14px}
  .subheading {font-size:12px}
  .papers-heading {margin-top:4px}
  .site-footer {font-size:9px; padding:24px 0 32px; margin-top:35px; line-height:2}
  .collection-panel,.detail-panel {padding-top:36px; min-height:calc(100dvh - 300px)}
  .collection-header h1 {font-size:29px}
  .empty-state {min-height:290px; font-size:12px}
  .student-card {gap:16px}
  .student-card img {width:73px; height:93px}
  .student-card h2 {font-size:19px}
  .student-research {font-size:12px}
  .student-detail-head {gap:19px}
  .student-detail-head img {width:90px; height:117px}
  .student-detail-head h1 {font-size:27px}
  .photo-grid {grid-template-columns:1fr}
  .blog-item {grid-template-columns:minmax(0,1fr) 16px; gap:10px}
  .blog-item time {grid-column:1 / -1}
  .blog-item h2 {font-size:19px}
  .photo-viewer {padding:45px 10px 14px; max-width:100vw; width:100vw}
  .viewer-frame {grid-template-columns:28px minmax(0,1fr) 28px; gap:2px}
  .viewer-frame .icon-button {width:28px}
  [data-language="en"] h1 {font-size:34px; line-height:1.2; max-width:190px}
  [data-language="en"] .alternate-name {font-size:16px; margin-top:8px}
  [data-language="en"] .affiliation {font-size:10px; max-width:205px}
  [data-language="en"] .portrait {margin-top:29px}
  [data-language="en"] .prose {font-size:15px; line-height:1.95}
  [data-language="en"] .section-index {justify-content:flex-start; gap:10px 19px}
  [data-language="en"] .section-index a {font-size:10px}
  [data-language="en"] .entry-title {font-size:15px}
  [data-language="en"] h2 {font-size:21px}
  [data-language="en"] .detail-panel h1 {font-size:29px; max-width:none}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {transition:none!important}
}
@media print {
  .site-header,.section-index,.back-top,.skip-link {display:none}
  body {background:white; color:black}
  body::before {display:none}
  .reading-sheet {width:100%; padding:0; border:0; background:white}
  .content-section {break-inside:auto}
  .publication-entry,.project-entry,.history-entry {break-inside:avoid}
  .introduction {padding-top:0}
  .year-group {grid-template-columns:64px minmax(0,1fr)}
}

/* Desktop reading scale — readability-20260908. Keep the serif palette and mobile layout. */
@media screen and (min-width:801px) {
  body {font-size:18px}
  .topbar,.reading-sheet {max-width:1080px; width:calc(100% - 64px)}
  .topbar {gap:28px; min-height:84px}
  .primary-nav {gap:24px}
  .primary-nav a,.workspace-link {font-size:17px}
  .workspace-link {padding-right:16px}
  .workspace-link i,.language-toggle {font-size:15px}
  .header-tools {gap:12px}
  .icon-button {width:38px; height:38px; font-size:21px}
  .role {font-size:19px}
  .affiliation,[data-language="en"] .affiliation {font-size:17px}
  .eyebrow {font-size:13px}
  .text-links,.welcome {font-size:16px}
  .text-links .ph {font-size:16px}
  .section-index a,[data-language="en"] .section-index a {font-size:16px}
  .section-index a span,.section-number {font-size:13px}
  .content-section {scroll-margin-top:100px}
  h2,[data-language="en"] h2 {font-size:26px}
  .prose,[data-language="en"] .prose {font-size:18px; line-height:2.05}
  .research-interests,[data-language="en"] .research-interests p {font-size:17px}
  .small-label,.service-block {font-size:15px}
  .history-entry {grid-template-columns:175px minmax(0,1fr); gap:24px}
  .history-date {font-size:15px}
  .history-entry h3,[data-language="en"] .history-entry h3 {font-size:18px}
  .entry-meta,.project-entry .entry-meta {font-size:15px}
  .subheading {font-size:18px}
  .book-year {font-size:19px}
  .year-label {font-size:23px}
  .entry-title,.book-entry .entry-title,[data-language="en"] .entry-title {font-size:18px; line-height:1.95}
  .entry-authors,.entry-journal {font-size:16px}
  .paper-link {width:30px; height:30px}
  .paper-link .ph {font-size:17px}
  .project-type {font-size:15px}
  .site-footer {font-size:14px}
  .empty-state,.back-link,.student-research {font-size:16px}
  .student-card h2,.detail-section h2,.album-label h2,.blog-item h2 {font-size:24px}
  .album-label .entry-meta {font-size:15px}
  .album-description,.blog-item p {font-size:17px; line-height:1.9}
  .photo-grid figcaption,.photo-viewer figcaption {font-size:16px}
  .photo-grid time,.blog-item time {font-size:15px}
  .blog-item {grid-template-columns:108px minmax(0,1fr) 20px}
}
@media screen and (min-width:801px) and (max-width:1050px) {
  .topbar {gap:20px}
  .primary-nav {gap:20px}
  .reading-sheet {padding-inline:56px}
}