/* Twenty separate compositions, with shared content and accessible controls. */
[hidden] { display: none !important; }
.preview-page .site-wrap { max-width: none; padding: 0 4vw; }
.preview-page .site-header { max-width: none; }
#main-content { max-width: 1380px; margin: auto; }
#main-content h1 { margin: 0 0 18px; font: 500 clamp(38px, 4.8vw, 66px)/1.15 var(--serif); letter-spacing: -.04em; }
.layout-eyebrow { font: 10px/1.7 var(--mono); letter-spacing: .09em; color: var(--muted); margin: 0 0 15px; }
.profile-photo { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.04; object-fit: cover; object-position: 50% 35%; filter: saturate(.65); }
.profile-card { padding: 25px; background: var(--surface); border: 1px solid var(--rule); }
.profile-card .profile-photo { width: 90px; border-radius: 8px; margin-bottom: 22px; }
.profile-card h2 { font: 500 27px var(--serif); margin: 0 0 12px; }
.profile-card > p { font-size: 13px; color: var(--muted); }
.identity-meta { color: var(--muted); font-size: 11px; line-height: 1.9; }
.profile-links { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 11px; margin-top: 20px; }
.profile-links a { white-space: nowrap; }
.research-topics { display: flex; flex-wrap: wrap; gap: 9px; }
.research-topics span { border: 1px solid var(--rule); padding: 5px 11px; font-size: 11px; border-radius: 3px; }
.section-stack .content-section { margin: 0 0 36px; }
.preview-page .section-about .section-body { columns: auto; }
.preview-page .section-publications .section-body { columns: auto; }
.preview-page .section-publications { grid-column: auto; grid-row: auto; }
.chapter-jumps { display: flex; flex-wrap: wrap; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 24px 0 38px; }
.chapter-jumps a { flex: 1; min-width: 110px; display: flex; align-items: center; gap: 12px; padding: 15px 12px; font-size: 11px; color: var(--ink); }
.chapter-jumps small { font: 9px var(--mono); color: var(--muted); }
.chapter-jumps a > span { margin-left: auto; color: var(--accent); }
.four-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 35px; padding: 40px 0; }
.supporting-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
.latest-paper { min-width: 0; }
.latest-paper p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.9; }
.latest-paper .layout-eyebrow { font: 10px var(--mono); margin-bottom: 20px; }
.latest-paper .paper-title { font: 500 27px/1.45 var(--serif); margin-bottom: 13px; }
.latest-paper .paper-title + br { display: none; }
.latest-paper a { display: inline-block; margin-top: 12px; border-bottom: 1px solid var(--accent); }
.paper-search { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.paper-search label { flex: 1; min-width: 180px; }
.paper-search label span { display: block; font-size: 10px; color: var(--muted); margin-bottom: 7px; }
.paper-search input { color: var(--ink); background: var(--surface); border: 1px solid var(--rule); padding: 12px 14px; width: 100%; font: 13px var(--sans); border-radius: 3px; }
.paper-search > button { padding: 12px; border: 1px solid var(--rule); background: transparent; font-size: 11px; }
.paper-search [data-paper-count] { font: 10px var(--mono); color: var(--muted); padding: 13px 0; }
.paper-years { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.paper-years button { color: var(--muted); border: 1px solid var(--rule); background: transparent; border-radius: 4px; padding: 6px 13px; font-size: 11px; }
.paper-years button[aria-pressed="true"] { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.paper-empty { padding: 40px 20px; font-size: 13px; color: var(--muted); border: 1px dashed var(--rule); }
.chapter-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.chapter-tabs button { padding: 9px 15px; border: 1px solid var(--rule); background: transparent; font-size: 12px; color: var(--muted); }
.chapter-tabs button[aria-selected="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.chapter-pane { padding: 28px 0; }
.chapter-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 0; border-top: 1px solid var(--rule); font: 11px var(--mono); }
.chapter-pagination button { padding: 6px 0; border: 0; background: transparent; font-size: 12px; }

/* 01: publication library above the fold, with a separate personal column. */
.paper-front { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 60px; padding-top: 45px; }
.paper-front .library-intro { margin-bottom: 35px; }
.paper-front .library-intro > p:last-child { color: var(--muted); font-size: 14px; }
.paper-profile .profile-card { background: #ecf0e8; margin-bottom: 32px; }
.paper-profile .section-about .section-heading h2 { font-size: 18px; }
.paper-profile .section-about .section-body { font-size: 13px; }
.layout-papers .section-publications { padding: 0; }
.layout-papers .paper-title { font-size: 18px; }

/* 02: profile dossier plus a continuous curriculum vitae. */
.dossier-grid { display: grid; grid-template-columns: 265px minmax(0, 1fr); gap: 55px; padding: 45px 0; }
.dossier-person { border-right: 1px solid var(--rule); padding-right: 30px; }
.dossier-person .profile-photo { width: 180px; height: 215px; border: 8px solid #fcf7eb; margin-bottom: 25px; filter: sepia(.15) saturate(.5); }
.dossier-person h1 { font-size: 37px !important; }
.dossier-person .section-about { margin-top: 34px; }
.dossier-person .section-heading h2 { font-size: 20px; }
.dossier-label { margin: 0 0 35px; padding-bottom: 18px; border-bottom: 3px double var(--accent); font: 26px var(--serif); }
.dossier-record .section-experience li, .dossier-record .section-education li { padding: 15px 0 15px 20px; border-left: 1px solid #bca88d; position: relative; }
.dossier-record .section-experience li::before, .dossier-record .section-education li::before { content: ""; position: absolute; left: -3px; top: 25px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* 03: institutional research portal with a leading research announcement. */
.portal-banner { padding: 40px 42px; background: #6b348c; color: #fff; margin-top: 28px; }
.portal-banner h1 { max-width: 960px; font-family: var(--sans) !important; font-weight: 500 !important; }
.portal-banner .layout-eyebrow { color: #ddc6ed; }
.portal-banner > p:last-of-type { font-size: 13px; color: #e9daf3; }
.portal-banner .research-topics span { border-color: #9b72b5; }
.portal-feature { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 36px; padding: 30px 0; }
.portal-feature .latest-paper { background: #fff; border: 1px solid var(--rule); padding: 35px; display: flex; flex-direction: column; justify-content: center; }
.portal-feature .profile-card { padding: 22px; }
.portal-feature .profile-photo { width: 65px; float: right; margin-left: 10px; }
.portal-body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 36px; }
.portal-body .supporting-sections { display: block; }
.portal-body .content-section { border-radius: 0; }

/* 04: a genuine multi-size information dashboard. */
.bento-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 30px 0; }
.bento-board > div { min-width: 0; padding: 27px; background: #fff; border: 1px solid #d6e1d8; border-radius: 15px; }
.bento-identity { grid-column: span 3; display: flex; align-items: center; gap: 25px; }
.bento-identity .profile-photo { width: 100px; height: 115px; border-radius: 12px; }
.bento-identity h1 { font: 600 42px var(--sans) !important; }
.bento-identity .identity-meta { margin: 0; }
.bento-topics .research-topics { flex-direction: column; }
.bento-topics .research-topics span { font-size: 10px; padding: 5px 8px; }
.bento-latest { grid-column: span 2; }
.bento-about { grid-column: span 2; }
.bento-education, .bento-teaching { grid-column: span 2; }
.bento-board .content-section { padding: 0; margin: 0; border: 0; background: transparent; border-radius: 0; }
.bento-board .section-heading h2 { font-size: 16px; }
.bento-board .section-body { font-size: 13px; }
.bento-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 35px; }

/* 05: the notebook is navigated with tabs, not a single homepage scroll. */
.notebook-cover { padding: 35px 0 24px; border-bottom: 1px solid var(--rule); }
.notebook-cover h1 { font-size: 48px !important; }
.notebook-cover > p { margin: 0; font-size: 13px; color: var(--muted); }
.notebook-spread { display: grid; grid-template-columns: 225px minmax(0, 1fr); gap: 40px; padding: 28px 0 45px; }
.notebook-margin .profile-card { padding: 15px; border: 0; background: transparent; }
.notebook-margin .profile-photo { width: 120px; height: 140px; border: 8px solid #fffdf6; border-bottom-width: 18px; border-radius: 0; transform: rotate(-5deg); }
.notebook-margin .profile-card h2 { font-size: 24px; }
.margin-note { font: 17px/1.9 var(--serif); color: #a27b54; transform: rotate(-3deg); padding: 10px 15px; }
.notebook-page { padding: 25px 30px; background: #fffdf4a3; border-left: 2px solid #d4a28b; }
.notebook-page .chapter-tabs button { background: #f0eadb; border-color: #c9d1d4; border-bottom: 0; }
.notebook-page .chapter-tabs button[aria-selected="true"] { color: #fffdf4; background: var(--accent); }
.notebook-page .section-publications { padding: 0; }

/* 06: a command-driven shell with one active content pane. */
.terminal-window { max-width: 1080px; margin: 30px auto 45px; border: 1px solid #43634c; background: #111b15; padding: 0 35px 30px; }
.terminal-titlebar { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #2d4936; font: 10px var(--mono); color: #78a187; }
.terminal-titlebar > span:first-child { letter-spacing: 7px; color: #8aaf93; }
.terminal-welcome { padding: 28px 0 20px; }
.terminal-welcome h1 { font: 450 43px var(--mono) !important; }
.terminal-welcome > p { font-size: 12px; }
.terminal-welcome .profile-links { font-family: var(--mono); }
.terminal-window .chapter-tabs button { font: 11px var(--mono); border-style: dashed; }
.terminal-command { display: flex; align-items: center; gap: 10px; background: #1b2d20; padding: 12px 15px; margin-top: 20px; }
.terminal-command label { color: #8fe3a8; font: 14px var(--mono); }
.terminal-command input { flex: 1; min-width: 0; border: 0; background: transparent; color: #c9ebd3; outline-color: #90e7ab; font: 13px var(--mono); }
.terminal-command button { border: 0; background: transparent; color: #90e7ab; font: 11px var(--mono); }
.terminal-message { color: #83a18b; font: 10px/1.8 var(--mono); }
.terminal-window .chapter-pane { padding-top: 25px; }

/* 07: an interactive, full-width constellation is the introduction. */
.constellation-map { min-height: 490px; position: relative; margin-top: 15px; }
.map-caption { position: absolute; top: 34px; left: 0; z-index: 2; }
.map-caption h1 { font: 400 38px var(--sans) !important; }
.map-caption > p:last-child { font-size: 11px; color: #8dacca; }
.orbit-lines { position: absolute; width: 100%; height: 100%; inset: 0; fill: none; stroke: #7eaac166; stroke-width: 1; }
.map-center { position: absolute; left: 54%; top: 51%; transform: translate(-50%, -50%); width: 380px; text-align: center; }
.map-center small { font: 9px var(--mono); letter-spacing: .14em; color: #7e9cbd; }
.map-center h2 { font: 400 28px/1.5 var(--sans); margin: 15px 0; text-wrap: balance; }
.map-center > span { font-size: 11px; color: #99bad1; }
.map-node { position: absolute; z-index: 2; font-size: 13px; color: #bbdce3; display: flex; align-items: center; gap: 10px; padding: 10px; background: #0e172bd4; }
.map-node > span { width: 7px; height: 7px; border-radius: 50%; background: #a0d1dc; box-shadow: 0 0 0 6px #9bced81c; }
.node-papers { right: 7%; top: 25%; }
.node-about { left: 12%; bottom: 15%; }
.node-teaching { left: 35%; top: 12%; }
.node-experience { right: 17%; bottom: 8%; }
.constellation-content { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 35px; }
.constellation-content .supporting-sections { display: block; }
.constellation-content .section-publications { padding: 25px; background: #142039; }

/* 08: typographic poster and three-column research cards. */
.typographic-poster { background: #e94330; color: #171b19; display: grid; grid-template-columns: 1.15fr 1fr; gap: 25px; padding: 42px; margin: 28px 0 38px; }
.typographic-poster h1 { font: 800 clamp(65px, 8vw, 115px)/1 var(--sans) !important; }
.typographic-poster .layout-eyebrow { color: #642920; font-size: 9px; }
.poster-statement { font: 700 clamp(30px, 4vw, 58px)/1.15 var(--sans); color: #fff5e7; margin: 0; letter-spacing: -.055em; overflow-wrap: anywhere; }
.poster-footnote { grid-column: 1 / -1; display: flex; align-items: end; justify-content: space-between; padding-top: 24px; border-top: 1px solid #7a342c; }
.poster-footnote .identity-meta { color: #582720; }
.poster-footnote a { color: #171b19; font-weight: 600; }
.poster-research .section-publications .section-body > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.poster-research .paper-item { padding: 22px !important; border: 1px solid #bcbeb4; }
.poster-research .paper-title { font: 650 17px/1.45 var(--sans); }
.poster-bottom { margin-top: 40px; }
.poster-bottom .section-about { display: block; }
.poster-bottom .supporting-sections { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 09: a chaptered scroll with a vertical Chinese cover. */
.scroll-cover { display: grid; grid-template-columns: 38px 165px 215px minmax(0, 1fr); gap: 38px; align-items: center; min-height: 380px; padding: 38px 0; }
.scroll-spine { height: 290px; border-left: 1px solid #a8ad9a; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; color: #8e927f; font: 11px var(--serif); letter-spacing: .3em; }
.scroll-name { display: flex; align-items: center; gap: 22px; }
.scroll-name h1 { font-size: 57px !important; }
.scroll-name > p { writing-mode: vertical-rl; font: 14px/1.8 var(--serif); height: 240px; letter-spacing: .15em; }
.layout-scroll:lang(zh-CN) .scroll-name h1 { writing-mode: vertical-rl; height: 245px; letter-spacing: .15em !important; }
.scroll-portrait .profile-photo { height: 255px; border: 1px solid #adb19f; padding: 6px; filter: grayscale(1); }
.scroll-portrait > span { display: block; margin-top: 12px; font: 9px var(--serif); color: var(--muted); text-align: center; }
.scroll-description .identity-meta { font: 15px/2.2 var(--serif); }
.long-scroll { max-width: 980px; margin: auto; padding: 25px 0; }
.long-scroll .content-section { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 45px; padding: 30px 0; border-bottom: 1px solid var(--rule); }
.long-scroll .section-rule { display: none; }
.long-scroll .section-heading { align-items: flex-start; }

/* 10: an editorial cover with three columns and a journal-style paper spread. */
.magazine-cover { padding: 34px 0 35px; border-bottom: 3px double var(--ink); }
.magazine-title { text-align: center; margin-bottom: 28px; }
.magazine-title h1 { font: 500 76px/1.1 var(--serif) !important; }
.magazine-title > p:last-child { font: italic 18px var(--serif); color: var(--muted); }
.magazine-columns { display: grid; grid-template-columns: 1fr 280px 1fr; gap: 36px; }
.magazine-columns figure { margin: 0; }
.magazine-columns .profile-photo { height: 310px; filter: grayscale(.8); }
.magazine-columns figcaption { border-top: 1px solid var(--rule); font: 9px/1.9 var(--mono); padding-top: 10px; margin-top: 15px; }
.magazine-columns .section-about { padding: 0; }
.magazine-columns .section-body { font: 13px/1.9 var(--serif); }
.magazine-columns .section-heading h2 { font: 21px var(--serif); }
.magazine-latest .latest-paper .paper-title { font-size: 28px; }
.text-link { display: inline-block; margin-top: 24px; font-size: 11px; }
.magazine-papers { padding-top: 35px; }
.magazine-papers .section-publications .section-body { columns: 3; column-gap: 35px; column-rule: 1px solid var(--rule); }

/* 11: horizontally navigable columns, each independently readable. */
.board-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding: 32px 0 22px; }
.board-heading h1 { font: 750 53px var(--sans) !important; }
.board-heading > div > p:last-child { margin: 0; font-size: 13px; }
.board-controls { display: flex; gap: 8px; }
.board-controls button { width: 48px; height: 45px; border: 2px solid #171717; background: #f5ea66; font-size: 22px; }
.information-board { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 25px; scroll-snap-type: x proximity; margin-bottom: 30px; }
.board-column { flex: 0 0 325px; height: 615px; overflow-y: auto; padding: 22px; border: 2px solid #171717; scroll-snap-align: start; background: #fff; }
.board-publications { flex-basis: 560px; }
.board-about { background: #f5ea66; }
.board-about .profile-photo { width: 105px; height: 110px; filter: grayscale(1); margin-bottom: 18px; }
.board-column .content-section { padding: 0; border: 0; }
.board-about .content-section { margin-top: 28px; }
.board-column .section-heading h2 { font: 700 24px var(--sans); }
.board-column .section-body { font-size: 13px; }

/* 12: six geometric chapter entrances replace the conventional hero. */
.geometry-heading { padding: 30px 0 24px; display: grid; grid-template-columns: 1fr 1fr; }
.geometry-heading .layout-eyebrow { grid-column: 1 / -1; }
.geometry-heading h1 { font: 700 49px var(--sans) !important; }
.geometry-heading > p:last-child { text-align: right; align-self: end; font-size: 14px; }
.geometry-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 45px; }
.geometry-tile { min-height: 175px; padding: 24px; position: relative; overflow: hidden; border: 1px solid #282b29; color: #282b29; background: #e4dac0; }
.geometry-tile:hover { text-decoration: none; box-shadow: inset 0 0 0 2px #282b29; }
.geometry-tile small { font: 10px var(--mono); position: relative; z-index: 1; }
.geometry-tile h2 { position: absolute; bottom: 20px; left: 24px; margin: 0; z-index: 1; font: 600 24px var(--sans); }
.geometry-arrow { position: absolute; right: 24px; bottom: 20px; font-size: 23px; z-index: 1; }
.geometry-shape { position: absolute; width: 145px; height: 145px; right: 35px; top: -10px; background: #d2aa35; }
.geometry-0 { color: #fff; background: #c44938; }
.geometry-0 .geometry-shape { background: #a73728; border-radius: 50%; }
.geometry-1 { color: #fff; background: #265996; }
.geometry-1 .geometry-shape { transform: rotate(45deg); background: #3977b0; }
.geometry-2 .geometry-shape { border-radius: 50% 50% 0 0; }
.geometry-3 { background: #d6b444; }
.geometry-3 .geometry-shape { background: #be9a2c; transform: rotate(45deg); }
.geometry-4 .geometry-shape { background: transparent; border: 20px solid #c44938; border-radius: 50%; }
.geometry-5 { background: #282b29; color: #fff; }
.geometry-5 .geometry-shape { background: #3c433d; border-radius: 0 100% 0 0; }
.geometry-body { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 45px; }
.geometry-body .supporting-sections { display: block; }
.geometry-body .section-publications { padding: 0; border-left: 0; }

/* 13: photographic personal narrative and a subsequent journey through research. */
.story-opening { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 70px; padding: 35px 0 45px; }
.story-photograph .profile-photo { height: 500px; border-radius: 180px 180px 3px 3px; filter: saturate(.55); }
.story-photograph > span { display: block; margin-top: 17px; font: 9px var(--mono); color: var(--muted); }
.story-introduction { align-self: center; }
.story-introduction h1 { font: 500 65px var(--serif) !important; margin-bottom: 27px !important; }
.story-introduction .section-about { padding: 0; border: 0; background: transparent; }
.story-introduction .section-about .section-heading { display: none; }
.story-introduction .section-about .section-body { font: 16px/2 var(--serif); }
.story-journey { display: grid; grid-template-columns: 335px minmax(0, 1fr); gap: 65px; padding: 38px 0; border-top: 1px solid var(--rule); }
.story-journey .section-experience li, .story-journey .section-education li { padding-left: 20px; border-left: 1px solid #c5a38a; position: relative; }
.story-journey .section-experience li::before, .story-journey .section-education li::before { content: ""; width: 6px; height: 6px; background: #b38765; border-radius: 50%; position: absolute; top: 22px; left: -3px; }

/* 14: a compact identity followed by a vertical chronology. */
.compact-identity { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 32px 0; border-bottom: 1px solid var(--rule); }
.compact-identity h1 { font: 450 44px var(--sans) !important; margin-bottom: 10px !important; }
.compact-identity .profile-photo { width: 80px; height: 80px; border-radius: 50%; }
.compact-identity > div > p:last-child { margin: 0; font-size: 13px; }
.timeline-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 70px; padding: 35px 0; }
.timeline-index { position: sticky; top: 25px; align-self: start; }
.timeline-index > p { font-size: 13px; color: var(--muted); }
.timeline-index .chapter-jumps { display: block; border: 0; }
.timeline-index .chapter-jumps a { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.timeline-index .profile-links { display: block; }
.timeline-index .profile-links a { display: block; margin: 12px 0; }
.timeline-track { border-left: 2px solid #acd2e3; padding-left: 38px; }
.timeline-track .section-publications { padding: 0; }
.timeline-track .section-publications .section-body > p > strong:only-child { font: 24px var(--sans); background: var(--bg); display: inline-block; padding: 12px 10px 12px 0; margin: 20px 0 0 -49px; position: relative; color: var(--accent); }
.timeline-track .section-stack { margin-top: 40px; }
.timeline-track .section-stack .content-section { padding-top: 30px; border-top: 1px solid var(--rule); }

/* 15: a real two-page book with a persistent table of contents. */
.folio-book { display: grid; grid-template-columns: 340px minmax(0, 1fr); margin: 28px auto 45px; max-width: 1200px; background: #faf9f0; border: 1px solid #cad3bc; box-shadow: 0 12px 35px #273b1c0f; }
.folio-cover { padding: 30px; background: #23483b; color: #f3f2e9; border-right: 5px double #879b70; }
.folio-cover .layout-eyebrow { color: #adc49d; font-size: 9px; }
.folio-cover h1 { font: 500 48px var(--serif) !important; }
.folio-cover .profile-photo { width: 130px; height: 145px; margin: 23px 0; border: 6px solid #a2b690; filter: saturate(.45); }
.folio-research { font: 17px/1.6 var(--serif); }
.folio-cover .identity-meta { color: #b2c49e; font-size: 10px; }
.folio-cover a { color: #d1dfbc; }
.folio-cover .profile-links { margin: 18px 0 28px; }
.folio-cover .chapter-tabs { display: block; border-top: 1px solid #5e7957; padding-top: 13px; }
.folio-cover .chapter-tabs button { display: block; width: 100%; text-align: left; color: #b3c4a1; border: 0; padding: 8px 10px; font-size: 11px; }
.folio-cover .chapter-tabs button[aria-selected="true"] { background: #47644a; color: #f3f2e9; }
.folio-page { padding: 30px 38px; min-width: 0; }
.folio-page-label { font: 9px var(--mono); color: #97a080; text-align: right; border-bottom: 1px solid #dbe2d0; padding-bottom: 18px; margin: 0; }
.folio-page .chapter-panes { max-height: 610px; overflow-y: auto; scrollbar-width: thin; padding-right: 8px; }
.folio-page .section-publications { border-left: 0; padding: 0; }
.folio-page .paper-title { font-size: 18px; }
.folio-page .chapter-pagination { margin-top: 5px; }

/* 16: a searchable application-style catalog with a year facet rail. */
.library-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 35px 0 25px; }
.library-heading h1 { font: 500 42px var(--sans) !important; }
.library-heading > p { color: var(--muted); font-size: 12px; }
.catalog-library { display: grid; grid-template-columns: 205px minmax(0, 1fr); border: 1px solid #dce4ef; min-height: 550px; margin-bottom: 45px; }
.library-facets { background: #f4f7fc; padding: 24px; border-right: 1px solid #dce4ef; }
.library-facets > p { font: 10px var(--mono); color: #8091a8; }
.library-facets .paper-years { display: block; }
.library-facets .paper-years button { display: block; text-align: left; width: 100%; border: 0; border-radius: 3px; margin: 5px 0; padding: 9px 11px; }
.library-person { border-top: 1px solid #d5dfed; padding-top: 25px; font-size: 12px; }
.library-person .profile-photo { width: 48px; height: 48px; border-radius: 5px; margin-bottom: 13px; }
.library-person .identity-meta { font-size: 10px; }
.library-person .profile-links { display: block; }
.library-person .profile-links a { display: block; margin: 10px 0; }
.library-results { padding: 26px 30px; min-width: 0; }
.library-results .section-publications .section-heading { display: none; }
.library-results .section-publications .section-body > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.library-results .paper-item { border: 1px solid #dce4ef; padding: 19px !important; font-size: 11px; }
.library-results .paper-item::before { position: static; display: block; margin-bottom: 9px; }
.library-results .paper-title { font-size: 14px; }

/* 17: a varied research-card wall, rather than a profile-plus-list page. */
.wall-heading { position: relative; padding: 38px 0 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: end; }
.wall-sticker { position: absolute; top: 15px; right: 0; font: 9px var(--mono); transform: rotate(4deg); padding: 6px 9px; background: #d4ed7b; border: 1px solid #9482b1; }
.wall-heading h1 { font: 750 clamp(60px, 8vw, 110px)/1 var(--sans) !important; margin: 0 !important; }
.wall-heading > div { text-align: right; }
.wall-heading .profile-links { justify-content: flex-end; }
.research-wall .section-publications .section-heading { display: none; }
.research-wall .section-publications .section-body > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.research-wall .paper-item { padding: 28px !important; min-height: 240px; margin: 0; border: 1px solid #b8a6d0; border-radius: 1px; }
.research-wall .paper-item:nth-child(3n + 1) { background: #d4ed7b; }
.research-wall .paper-item:nth-child(3n + 2) { background: #4f3688; color: #d5c5f0; }
.research-wall .paper-item:nth-child(3n + 2) .paper-title, .research-wall .paper-item:nth-child(3n + 2) strong { color: #f2eafc; }
.research-wall .paper-item:nth-child(3n + 2) a { color: #3e2b64; }
.research-wall .paper-item:first-child { grid-column: span 2; }
.research-wall .paper-title { font: 650 23px/1.4 var(--sans); }
.research-wall .paper-item::before { content: attr(data-number) " / RESEARCH"; display: block; font: 10px var(--mono); margin-bottom: 20px; opacity: .6; }
.wall-notes { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 45px; margin-top: 45px; }
.wall-notes .profile-card { align-self: start; background: #f5f0fc; }
.wall-notes .supporting-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 18: a tabbed desktop workspace with real counts and a persistent rail. */
.research-workspace { display: grid; grid-template-columns: 230px minmax(0, 1fr); margin: 25px 0 45px; min-height: 700px; background: #ffffff61; border: 1px solid #fff; border-radius: 16px; overflow: hidden; backdrop-filter: blur(12px); }
.workspace-rail { padding: 27px; border-right: 1px solid #ffffffac; background: #ffffff65; }
.workspace-rail .profile-photo { width: 56px; height: 56px; border-radius: 12px; margin-bottom: 14px; }
.workspace-rail > strong { display: block; font-size: 16px; }
.workspace-rail > p { margin: 4px 0 28px; font-size: 11px; color: var(--muted); }
.workspace-rail .chapter-tabs { display: block; }
.workspace-rail .chapter-tabs button { display: block; text-align: left; width: 100%; border: 0; margin-bottom: 5px; border-radius: 6px; padding: 11px; }
.workspace-rail .profile-links { display: block; border-top: 1px solid #b6cbd36e; padding-top: 15px; margin-top: 28px; }
.workspace-rail .profile-links a { display: block; margin: 12px 0; }
.workspace-main { padding: 30px; min-width: 0; }
.workspace-heading h1 { font: 450 35px var(--sans) !important; }
.workspace-heading > p:last-child { font-size: 11px; color: var(--muted); }
.workspace-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin: 28px 0; }
.workspace-stats > div { padding: 18px; background: #ffffff8c; border: 1px solid #fff; border-radius: 10px; }
.workspace-stats strong { display: block; font: 350 32px var(--sans); }
.workspace-stats span { font-size: 10px; color: #7790a0; }
.workspace-content { border: 1px solid #fff; padding: 0 25px; border-radius: 10px; background: #ffffff69; }
.workspace-content .content-section { background: transparent; border: 0; padding: 0; }

/* 19: a clickable diagram connects the research topic to the site's chapters. */
.research-diagram { padding: 28px 0 0; }
.diagram-caption { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; border-bottom: 1px dashed #769ec4; padding-bottom: 20px; }
.diagram-caption .layout-eyebrow { width: 100%; margin: 0; }
.diagram-caption h1 { font: 450 42px var(--mono) !important; margin: 0 !important; }
.diagram-caption .identity-meta { margin-left: auto; font-size: 10px; }
.diagram-canvas { height: 425px; position: relative; }
.diagram-canvas svg { width: 100%; height: 100%; fill: none; stroke: #96bddc99; stroke-width: 1.2; }
.diagram-root { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); width: 400px; text-align: center; padding: 18px; border: 1px solid #a5cbe6; background: #214778; font: 18px var(--mono); }
.diagram-node { position: absolute; width: 205px; top: 260px; transform: translateX(-50%); padding: 20px; border: 1px solid #96bddc; background: #254c7e; display: block; }
.diagram-node:hover { background: #315b8e; text-decoration: none; }
.diagram-node small { display: block; color: #8ab5d7; font: 8px var(--mono); }
.diagram-node strong { display: inline-block; font: 450 19px var(--sans); margin-top: 10px; }
.diagram-node > span { float: right; color: #bfe1f4; }
.diagram-left { left: 17%; }.diagram-middle { left: 50%; }.diagram-right { left: 83%; }
.diagram-annotation { position: absolute; bottom: 0; right: 0; color: #8db6d8; font: 8px var(--mono); }
.diagram-record { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 45px; }
.diagram-record .supporting-sections { display: block; }

/* 20: a photographic cover occupies the screen before the exhibition chapters. */
.exhibition-cover { display: grid; grid-template-columns: 46% minmax(0, 1fr); position: relative; min-height: 620px; margin-top: 25px; background: #e4e0d7; }
.exhibition-photo { min-width: 0; }
.exhibition-photo .profile-photo { height: 100%; min-height: 560px; object-position: 50% 40%; filter: saturate(.45); }
.exhibition-title { padding: 45px; align-self: center; }
.exhibition-title h1 { font: 500 clamp(55px, 6vw, 88px)/1.1 var(--serif) !important; }
.exhibition-title > p:not(.layout-eyebrow):not(.identity-meta) { font: 22px/1.6 var(--serif); }
.exhibition-enter { display: flex; align-items: center; justify-content: space-between; font-size: 12px; margin-top: 45px; padding: 16px 0; border-bottom: 1px solid #b4aa97; }
.exhibition-enter > span { font-size: 23px; }
.exhibition-index { grid-column: 1 / -1; background: #eae6dc; border-top: 1px solid #c9c1b2; margin: 0; }
.exhibition-index a { padding: 18px 16px; }
.exhibition-rooms { padding-top: 50px; }
.exhibition-rooms > .section-publications .section-heading h2 { font: 500 38px var(--serif); }
.exhibition-rooms > .section-stack { margin-top: 50px; }
.exhibition-rooms > .section-stack .content-section { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 45px; padding: 30px 0; border-top: 1px solid var(--rule); }

/* Adapt the different navigation models without hiding homepage content. */
@media (max-width: 1050px) {
  .paper-front, .portal-body, .portal-feature { gap: 28px; grid-template-columns: minmax(0, 1fr) 245px; }
  .dossier-grid { gap: 30px; grid-template-columns: 235px minmax(0, 1fr); }
  .magazine-columns { grid-template-columns: 1fr 230px 1fr; gap: 25px; }
  .magazine-latest .latest-paper .paper-title { font-size: 23px; }
  .four-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-opening { grid-template-columns: 310px minmax(0, 1fr); gap: 40px; }
  .story-introduction .section-about .section-body { font-size: 14px; }
  .story-journey { grid-template-columns: 280px minmax(0, 1fr); gap: 40px; }
  .folio-book { grid-template-columns: 280px minmax(0, 1fr); }
  .folio-cover { padding: 25px; }
  .folio-page { padding: 25px; }
  .constellation-content, .geometry-body, .diagram-record { grid-template-columns: minmax(0, 1fr) 300px; }
  .research-wall .paper-title { font-size: 19px; }
  .exhibition-title { padding: 35px; }
  .scroll-cover { gap: 25px; grid-template-columns: 25px 145px 170px minmax(0, 1fr); }
}
@media (max-width: 850px) {
  .paper-front { grid-template-columns: minmax(0, 1fr) 220px; }
  .paper-front .library-intro h1 { font-size: 43px !important; }
  .dossier-grid { grid-template-columns: 215px minmax(0, 1fr); gap: 30px; }
  .portal-banner { padding: 30px; }
  .bento-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-identity { grid-column: span 2; }
  .bento-topics { grid-column: span 1; }.bento-latest { grid-column: span 1; }
  .bento-about { grid-column: span 2; }.bento-education, .bento-teaching { grid-column: span 1; }
  .bento-topics .research-topics { flex-direction: row; }
  .bento-bottom { grid-template-columns: minmax(0, 1fr) 260px; }
  .magazine-columns { grid-template-columns: minmax(0, 1fr) 250px; }
  .magazine-latest { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--rule); }
  .magazine-papers .section-publications .section-body { columns: 2; }
  .notebook-spread { grid-template-columns: 190px minmax(0, 1fr); gap: 20px; }
  .notebook-page { padding: 20px; }
  .poster-research .section-publications .section-body > ul, .research-wall .section-publications .section-body > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .poster-bottom .supporting-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-opening { grid-template-columns: 255px minmax(0, 1fr); gap: 32px; }
  .timeline-layout { gap: 40px; grid-template-columns: 165px minmax(0, 1fr); }
  .scroll-cover { grid-template-columns: 20px 130px minmax(0, 1fr); gap: 30px; }
  .scroll-portrait { display: none; }
  .long-scroll .content-section { grid-template-columns: 130px minmax(0, 1fr); gap: 28px; }
  .library-results .section-publications .section-body > ul { grid-template-columns: 1fr; }
  .research-workspace { grid-template-columns: 180px minmax(0, 1fr); }
  .workspace-rail { padding: 20px; }.workspace-main { padding: 23px; }
  .workspace-stats { gap: 10px; }.workspace-stats > div { padding: 12px; }
  .diagram-node { width: 170px; padding: 17px; }
  .geometry-tile { padding: 18px; }.geometry-tile h2 { left: 18px; font-size: 20px; }
  .exhibition-title { padding: 28px; }.exhibition-title > p:not(.layout-eyebrow):not(.identity-meta) { font-size: 18px; }
}
@media (max-width: 650px) {
  .preview-page .site-wrap { padding: 0 18px; }
  #main-content h1 { font-size: 39px !important; overflow-wrap: anywhere; }
  .layout-eyebrow { font-size: 9px; }
  .paper-front, .dossier-grid, .portal-feature, .portal-body, .bento-bottom, .notebook-spread, .constellation-content, .geometry-body, .story-opening, .story-journey, .timeline-layout, .folio-book, .wall-notes, .diagram-record { grid-template-columns: 1fr; gap: 28px; }
  .paper-front { padding-top: 25px; }
  .paper-profile .profile-card { display: block; }
  .paper-profile .profile-photo { float: right; width: 65px; margin-left: 15px; }
  .four-columns, .supporting-sections, .poster-bottom .supporting-sections { grid-template-columns: 1fr; gap: 25px; }
  .dossier-person { border-right: 0; padding-right: 0; }.dossier-person .profile-photo { width: 140px; height: 155px; }
  .portal-banner { padding: 25px; }.portal-feature .latest-paper { padding: 25px; }
  .portal-feature .profile-card .profile-photo { width: 65px; }
  .bento-board { gap: 14px; }.bento-board > div { padding: 22px; }
  .bento-identity { display: block; }.bento-identity .profile-photo { float: right; width: 65px; height: 75px; margin-left: 15px; }
  .bento-topics, .bento-latest, .bento-education, .bento-teaching { grid-column: span 2; }
  .notebook-margin .profile-card { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px 22px; }
  .notebook-margin .profile-photo { width: 85px; height: 95px; grid-row: span 3; }
  .notebook-margin .profile-card h2 { font-size: 20px; margin: 0; }
  .notebook-margin .identity-meta, .margin-note { display: none; }
  .notebook-margin .profile-card p { margin: 0; font-size: 11px; }
  .notebook-margin .profile-links { grid-column: 1 / -1; margin-top: 10px; }
  .notebook-page { padding: 20px; }.chapter-tabs button { font-size: 11px; padding: 8px 10px; }
  .terminal-window { padding: 0 18px 25px; }.terminal-titlebar { font-size: 8px; }
  .terminal-welcome h1 { font-size: 35px !important; }.terminal-window .chapter-tabs button { font-size: 10px; padding: 7px; }
  .constellation-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: auto; gap: 15px; padding: 25px 0; }
  .map-caption, .map-center { position: static; transform: none; width: auto; grid-column: 1 / -1; }
  .map-center { padding: 30px 18px; border: 1px solid #456387; }.map-center h2 { font-size: 22px; }
  .orbit-lines { display: none; }.map-node { position: static; font-size: 12px; padding: 14px 10px; border: 1px solid #28435f; }
  .chapter-jumps a { min-width: 45%; padding: 12px; }
  .typographic-poster { padding: 25px; grid-template-columns: 1fr; }.poster-statement { font-size: 44px; }
  .poster-footnote { grid-column: 1; display: block; }.poster-research .section-publications .section-body > ul { grid-template-columns: 1fr; }
  .scroll-cover { grid-template-columns: 25px 1fr; gap: 20px; min-height: auto; padding: 30px 0; }
  .scroll-spine { height: 230px; }.scroll-description { grid-column: 1 / -1; }.scroll-name > p { height: 210px; }
  .layout-scroll:lang(zh-CN) .scroll-name h1 { height: 210px; font-size: 48px !important; }
  .long-scroll .content-section { display: block; }
  .magazine-columns { grid-template-columns: 1fr; }.magazine-latest { grid-column: 1; }.magazine-title h1 { font-size: 49px !important; }
  .magazine-columns .profile-photo { height: 300px; }.magazine-papers .section-publications .section-body { columns: auto; }
  .board-heading { display: block; }.board-controls { margin-top: 22px; }.board-column { flex-basis: calc(100% - 15px); height: 620px; }.board-publications { flex-basis: calc(100% - 15px); }
  .geometry-heading { display: block; }.geometry-heading > p:last-child { text-align: left; }
  .geometry-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.geometry-tile { min-height: 145px; padding: 14px; }.geometry-tile h2 { font-size: 18px; bottom: 18px; left: 14px; }
  .geometry-arrow { font-size: 19px; right: 12px; }.geometry-shape { width: 100px; height: 100px; right: 0; }
  .story-photograph .profile-photo { height: 355px; }.story-introduction .section-about .section-body { font-size: 14px; }
  .compact-identity { gap: 15px; }.compact-identity .profile-photo { width: 65px; height: 65px; }.compact-identity h1 { font-size: 33px !important; }
  .timeline-index { position: static; }.timeline-index .chapter-jumps { display: flex; }.timeline-index .profile-links { display: flex; }
  .timeline-track { padding-left: 22px; }.timeline-track .section-publications .section-body > p > strong:only-child { margin-left: -33px; }
  .folio-cover { border-right: 0; border-bottom: 5px double #879b70; }.folio-cover .profile-photo { float: right; width: 80px; height: 90px; margin: 0 0 15px 15px; }.folio-cover h1 { font-size: 37px !important; }
  .folio-cover .chapter-tabs { clear: both; display: flex; }.folio-cover .chapter-tabs button { width: auto; padding: 8px 10px; }
  .folio-page { padding: 23px; }.folio-page .chapter-panes { max-height: 620px; }
  .library-heading { display: block; }.catalog-library { grid-template-columns: 1fr; }.library-facets { border-right: 0; border-bottom: 1px solid #dce4ef; padding: 20px; }
  .library-facets .paper-years { display: flex; margin-bottom: 0; }.library-facets .paper-years button { width: auto; }.library-person { display: none; }.library-results { padding: 20px; }
  .wall-heading { display: block; }.wall-heading > div { text-align: left; }.wall-heading .profile-links { justify-content: flex-start; }.wall-sticker { top: 12px; font-size: 8px; }
  .research-wall .section-publications .section-body > ul { grid-template-columns: 1fr; }.research-wall .paper-item:first-child { grid-column: 1; }.research-wall .paper-title { font-size: 22px; }
  .wall-notes .supporting-sections { grid-template-columns: 1fr; }
  .research-workspace { grid-template-columns: 1fr; }.workspace-rail { border-right: 0; border-bottom: 1px solid #fff; }.workspace-rail .profile-photo { float: right; margin: 0 0 10px 12px; }.workspace-rail .chapter-tabs { display: flex; }.workspace-rail .chapter-tabs button { width: auto; padding: 8px; font-size: 11px; }.workspace-rail .profile-links { display: flex; clear: both; margin: 10px 0 0; padding: 0; border: 0; }
  .workspace-main { padding: 20px; }.workspace-heading h1 { font-size: 30px !important; }.workspace-stats > div { padding: 12px 8px; }.workspace-stats strong { font-size: 26px; }.workspace-content { padding: 0 16px; }
  .diagram-caption { display: block; }.diagram-caption h1 { font-size: 37px !important; }.diagram-caption .identity-meta { margin-top: 16px; }
  .diagram-canvas { display: grid; grid-template-columns: 1fr; gap: 17px; height: auto; padding: 30px 0 20px; }.diagram-canvas svg { display: none; }.diagram-root, .diagram-node, .diagram-annotation { position: static; width: auto; transform: none; }.diagram-root { font-size: 16px; }.diagram-node { padding: 18px; }
  .exhibition-cover { grid-template-columns: 1fr; min-height: 0; }.exhibition-photo .profile-photo { height: 360px; min-height: 0; }.exhibition-title { padding: 28px; }.exhibition-title h1 { font-size: 53px !important; }.exhibition-index { grid-column: 1; }.exhibition-rooms > .section-stack .content-section { display: block; }
}