/* ===============================================
   子页面：研究方向 / 组员 / 论文 / 新闻 / 联系我们
   延续首页的浅色通栏风格；在 theme.css 之后加载
   =============================================== */
/* Cormorant 默认是旧式数字（"01" 像 "OI"），全站统一用等高数字 */
body { font-variant-numeric: lining-nums; }

/* 悬停时不做放大和滑动（覆盖 enhanced.css 的旧效果），只保留颜色变化 */
.overview-image:hover img,
.member-card:hover .member-photo img,
.header-logo:hover,
.footer-links a:hover,
.go-top:hover { transform: none; }
/* 导航下划线直接显示，不做展开动画，避免悬停后点击跳转时再播一次造成闪烁 */
.nav-menu a::after,
.lang-btn::after { transition: none !important; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- 页面骨架：去掉旧的白色内容卡片，内容铺满整屏 ---------- */
/* 背景：各页轮换使用多肽主题的平铺线稿；校园建筑线稿只放在上下较窄的横条里 */
.page-main {
    padding: 0;
    background-image: url('../assets/images/patterns/amino-acids.svg');
    background-size: 600px 600px;
}
.page-main.bg-amino { background-image: url('../assets/images/patterns/amino-acids.svg'); }
.page-main.bg-backbone { background-image: url('../assets/images/patterns/peptide-backbone.svg'); }
.page-main.bg-condensate { background-image: url('../assets/images/patterns/condensate.svg'); }
.page-main.bg-vpgxg { background-image: url('../assets/images/patterns/vpgxg.svg'); }
.page-main .content-page {
    max-width: none;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
}
.page-main a { text-decoration: none; }

/* ---------- 页头：只保留面包屑，紧贴在正文上方 ---------- */
.page-head { padding: 32px var(--page-pad) 20px; }
.page-crumbs {
    display: flex;
    gap: 10px;
    font-size: 14px;
    color: var(--faint);
}
.page-crumbs a { color: var(--muted); }
.page-crumbs a:hover { color: var(--accent); }
.page-crumbs [aria-current] { color: var(--ink); }

/* 板块标题沿用首页的 section-kicker（红线 + 中文 + 斜体英文） */
.page-main h2.section-kicker { font-family: inherit; line-height: 1.4; }
.section-kicker em:lang(zh-CN) { font-family: var(--serif); font-style: normal; font-size: 16px; letter-spacing: 0.1em; }

/* ---------- 箭头图标 ---------- */
.news-row-arrow, .member-more svg, .back-link svg {
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.35s var(--timing);
}
/* ===============================================
   研究方向
   =============================================== */
.research-area {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 48px;
    align-items: start;
    padding: 88px var(--page-pad);
    border-bottom: 1px solid var(--rule);
}
.research-area:nth-child(odd) { background: #fff; }
.research-area-copy {
    grid-column: 1 / span 7;
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}
.research-area:not(.has-media) .research-area-copy { grid-column: 3 / span 8; }
.research-area.has-media .research-area-copy { grid-column: 1 / span 5; }
.research-area.has-media .research-media { grid-column: 7 / span 6; }
.research-area.has-media.is-reversed .research-area-copy { grid-column: 8 / span 5; grid-row: 1; }
.research-area.has-media.is-reversed .research-media { grid-column: 1 / span 6; grid-row: 1; }
.research-area-number { display: flex; align-items: flex-end; gap: 24px; }
.research-area-number span {
    font-family: var(--latin-serif);
    font-size: clamp(40px, 3.2vw, 52px);
    font-weight: 600;
    line-height: 0.78;
    color: var(--accent);
}
.research-area-number i { flex-grow: 1; height: 1px; margin-bottom: 6px; background: #D9D2C4; }
.research-area h2 {
    margin: 12px 0 0;
    font-family: var(--serif);
    font-size: clamp(20px, 1.5vw, 24px);
    line-height: 1.45;
    font-weight: 900;
    letter-spacing: 0.06em;
    color: var(--ink);
}
html.lang-en .research-area h2 { font-family: var(--latin-serif); font-weight: 600; letter-spacing: 0; font-size: clamp(23px, 1.8vw, 28px); line-height: 1.2; }
.research-area-text {
    margin: 8px 0 0;
    font-size: 17px;
    line-height: 2.05;
    color: var(--ink-soft);
    text-align: justify;
}
html.lang-en .research-area-text { text-align: left; line-height: 1.85; }

.research-media { margin: 0; min-width: 0; width: 100%; max-width: 540px; padding-top: 24px; justify-self: end; }
.research-area.is-reversed .research-media { justify-self: start; }
.research-media figure { margin: 0; min-width: 0; }
.research-media-frame { overflow: hidden; background: #fff; }
.research-media img, .research-media video {
    display: block;
    width: 100%;
    height: auto;
}
.research-media-stack { display: flex; flex-direction: column; gap: 48px; }
.research-media-stack > figure + figure { position: relative; }
.research-media-stack > figure + figure::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -24px;
    height: 1px;
    background: var(--rule);
}
.research-media-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-content: start;
}
.research-media-pair > p, .research-media-pair > .translation-notice { grid-column: 1 / -1; }
.research-media-pair video { aspect-ratio: 1 / 1; object-fit: cover; }
.research-media figcaption, .research-media-caption {
    margin: 0;
    padding-top: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--faint);
}

/* 研究方向页底部致谢：标题与一句感谢在上，资助方 logo 在下 */
.acknowledge { padding: 88px var(--page-pad) 104px; }
.acknowledge-heading p { margin: 20px 0 0; font-size: 16px; line-height: 1.9; color: #4A5160; }
.acknowledge-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}
.acknowledge-logos li { display: flex; align-items: center; }
.acknowledge-logos img { display: block; width: auto; height: 60px; }
.acknowledge-logos .logo-most img { height: 46px; }
.acknowledge-logos .logo-nsfc img, .acknowledge-logos .logo-scu img, .acknowledge-logos .logo-skl img, .acknowledge-logos .logo-pse img { height: 76px; }
.acknowledge-logos .logo-highlight img { height: 44px; }

/* ===============================================
   组员介绍
   =============================================== */
.page-main .members-tabs {
    display: flex;
    gap: 56px;
    margin: 0;
    padding: 0 var(--page-pad);
    background: none;
    border-radius: 0;
    border-bottom: 1px solid var(--rule);
    overflow-x: auto;
    scrollbar-width: none;
}
.members-tab {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    padding: 20px 0 16px;
}
.page-main .members-tabs .pub-tab-btn {
    position: static;
    flex: none;
    padding: 0;
    background: none;
    color: var(--muted);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1em;
}
html.lang-en .page-main .members-tabs .pub-tab-btn { letter-spacing: 0; }
/* 整个标签（含译名和人数）都可点击 */
.page-main .members-tabs .pub-tab-btn::before { content: ''; position: absolute; inset: 0; }
.page-main .members-tabs .pub-tab-btn::after { bottom: -1px; background: var(--accent); }
.page-main .members-tabs .pub-tab-btn:hover, .members-tab:hover .pub-tab-btn { background: none; color: var(--ink); }
.page-main .members-tabs .pub-tab-btn.active { background: none; color: var(--ink); font-weight: 700; }
/* The bold weight is reserved by a hidden copy, so selecting a tab never shifts its neighbours. */
.members-tab-label { display: inline-block; }
.members-tab-label::before { content: attr(data-text); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 700; }
.page-main .members-tabs .pub-tab-btn, .page-main .members-tabs .pub-tab-btn::after { transition: none; }
.members-tabs em {
    font-family: var(--latin-serif);
    font-size: 17px;
    letter-spacing: 0;
    color: var(--faint);
}
.members-tabs em:lang(zh-CN) { font-family: var(--serif); font-style: normal; font-size: 14px; }
.members-tab-count {
    font-family: var(--latin-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--accent);
}
.page-main .members-list {
    display: block;
    padding: 64px var(--page-pad) 96px;
}
.page-main .member-category { margin: 0; }
.page-main .member-category + .member-category { margin-top: 96px; }
.faculty-list { margin-top: 40px; }

.page-main .member-card {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 48px;
    width: auto;
    max-width: none;
    padding: 56px 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: none;
    color: var(--ink);
    overflow: visible;
    transform: none;
}
.faculty-item:first-child .member-card { border-top-color: var(--ink); }
.page-main .member-card::before { display: none; }
.page-main .member-card:hover { transform: none; box-shadow: none; border-color: var(--rule); }
.faculty-item:first-child .member-card:hover { border-top-color: var(--ink); }
.page-main .member-photo {
    grid-column: span 2;
    width: auto;
    height: auto;
    aspect-ratio: 4 / 5;
    margin: 0;
    border-radius: 0;
    background: #EFEBE3;
    overflow: hidden;
}
.page-main .member-photo img { width: 100%; height: 100%; object-fit: cover; }
.member-photo.is-empty { display: flex; align-items: center; justify-content: center; }
.member-photo.is-empty span { font-family: var(--serif); font-size: 72px; font-weight: 900; color: var(--accent); }
.member-body {
    grid-column: 3 / span 10;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.member-heading { display: flex; flex-direction: column; gap: 18px; }
.member-names { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; }
.page-main .member-name {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(24px, 1.8vw, 28px);
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: var(--ink);
    text-align: left;
    transition: color 0.3s;
}
html.lang-en .page-main .member-name { font-family: var(--latin-serif); font-weight: 600; letter-spacing: 0.01em; }
.page-main .member-card:hover .member-name { color: var(--ink); }
.member-alt { font-family: var(--latin-serif); font-style: italic; font-size: 20px; color: var(--faint); }
.member-alt:lang(zh-CN) { font-family: var(--serif); font-style: normal; font-size: 20px; letter-spacing: 0.15em; }
.page-main .member-title, .page-main .member-year {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent);
    text-align: left;
}
html.lang-en .page-main .member-title { letter-spacing: 0.02em; }
.page-main .member-year { color: var(--muted); font-weight: 400; }
.page-main .member-description {
    max-width: 860px;
    margin: 6px 0 0;
    padding: 0;
    border: 0;
    font-size: 17px;
    line-height: 2;
    color: var(--ink-soft);
    text-align: justify;
}
html.lang-en .page-main .member-description { text-align: left; line-height: 1.85; }
.member-facts {
    max-width: 1080px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 16px;
    margin: 12px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
}
.member-facts div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@media (min-width: 1025px) {
    /* The first column is as wide as the longest research line, so emails line up across cards. */
    .member-facts { max-width: none; grid-template-columns: minmax(0, var(--fact-col, auto)) minmax(0, max-content); column-gap: 80px; }
}
.member-facts dt { font-size: 13px; letter-spacing: 0.15em; color: var(--faint); }
html.lang-en .member-facts dt { letter-spacing: 0.04em; }
.member-facts dd { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink); overflow-wrap: anywhere; }
.member-more {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    margin-top: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    transition: color 0.3s, border-color 0.3s;
}
/* 只有「学院个人主页」这一行可以点击跳转，整张卡片不再是链接 */
.page-main .member-more:hover { color: var(--accent); border-color: var(--accent); }
.page-main .member-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* 学生名册：一行四人，照片在上、信息在下；照片比例与教师一致 */
.roster { margin-top: 40px; }
.roster-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 80px 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.roster-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    min-width: 0;
}
.roster-avatar {
    width: min(100%, 196px);
    aspect-ratio: 4 / 5;
    margin-bottom: 26px;
    overflow: hidden;
    background: #EFEBE3;
    display: flex;
    align-items: center;
    justify-content: center;
    /* A thin offset frame around the portrait. */
    outline: 1px solid var(--rule);
    outline-offset: 10px;
}
.roster-avatar img { width: 100%; height: 100%; object-fit: cover; }
.roster-avatar span { font-family: var(--serif); font-size: 48px; font-weight: 900; color: var(--accent); }
.roster-names { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 12px; min-width: 0; margin-bottom: 4px; }
.roster-name { font-family: var(--serif); font-size: 21px; font-weight: 900; letter-spacing: 0.12em; }
html.lang-en .roster-name { font-family: var(--latin-serif); font-weight: 600; font-size: 24px; letter-spacing: 0; }
.roster-grade { margin-top: 2px; font-size: 17px; line-height: 1.7; letter-spacing: 0.08em; color: var(--ink); }
html.lang-en .roster-grade { letter-spacing: 0.02em; font-size: 19px; }
.page-main .members-empty {
    margin: 0;
    padding: 64px 0;
    border-bottom: 1px solid var(--rule);
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--muted);
    text-align: left;
}

/* ===============================================
   成果及论文
   =============================================== */
.pubs-layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 48px;
    align-items: start;
    padding: 64px var(--page-pad) 96px;
}
.pubs-aside {
    grid-column: span 2;
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.pubs-aside-title { margin: 0; font-size: 15px; letter-spacing: 0.2em; color: var(--faint); }
.paper-title .author-mark { margin-left: 1px; font-size: 0.72em; line-height: 0; }
.pubs-toc { display: flex; flex-direction: column; }
.pubs-toc a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 13px 0 13px 18px;
    border-left: 2px solid var(--rule);
    color: var(--faint);
    transition: color 0.3s, border-color 0.3s;
}
.pubs-toc a span { font-family: var(--latin-serif); font-size: 25px; font-weight: 600; line-height: 1.2; }
.pubs-toc a.is-text span { font-family: var(--serif); font-size: 20px; }
html.lang-en .pubs-toc a.is-text span { font-family: var(--latin-serif); font-size: 26px; }
.pubs-toc a:hover { color: var(--ink); }
.pubs-toc a.active { color: var(--ink); border-left-color: var(--accent); }
.pubs-main { grid-column: 3 / span 10; min-width: 0; }
.pubs-years { display: flex; flex-direction: column; gap: 72px; }
.pubs-year { scroll-margin-top: 24px; }
.pubs-year-head {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ink);
}
.pubs-year-head h2 {
    margin: 0;
    font-family: var(--latin-serif);
    font-size: clamp(36px, 2.8vw, 46px);
    font-weight: 600;
    line-height: 0.9;
    color: var(--ink);
}
.pubs-year-head.is-text h2 { font-family: var(--serif); font-size: clamp(24px, 2vw, 30px); font-weight: 900; letter-spacing: 0.1em; line-height: 1.1; }
html.lang-en .pubs-year-head.is-text h2 { font-family: var(--latin-serif); font-weight: 600; letter-spacing: 0; font-size: clamp(32px, 2.6vw, 42px); }
.pubs-subyear {
    margin: 40px 0 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rule);
    font-family: var(--latin-serif);
    font-size: 23px;
    font-weight: 600;
    line-height: 1;
    color: var(--muted);
}

.page-main .paper-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
    margin: 0;
    padding: 26px 20px 26px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: none;
    color: var(--ink);
    transform: none;
    transition: background-color 0.35s, padding-left 0.35s;
}
.page-main .paper-item:not(:has(.paper-number)) { grid-template-columns: minmax(0, 1fr); }
.page-main .paper-item:hover, .page-main .paper-item-clickable:hover, .page-main .paper-item-clickable:active {
    transform: none;
    box-shadow: none;
    border-color: var(--rule);
    background: #fff;
}
.paper-number {
    font-family: var(--latin-serif);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.6;
    color: #B8B1A3;
}
.paper-body { grid-column: 2; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.page-main .paper-item:not(:has(.paper-number)) .paper-body { grid-column: 1; }
.paper-item.has-image .paper-body { grid-column: 2; }
.page-main .paper-item:not(:has(.paper-number)).has-image .paper-body { grid-column: 1; }
.page-main .paper-title,
.page-main .paper-item:has(.paper-image) .paper-title,
.page-main .paper-item-clickable:hover .paper-title {
    margin: 0;
    font-size: 19px;
    line-height: 1.8;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}
.page-main .paper-title strong { color: var(--ink); font-weight: 700; }
.page-main .paper-title u { text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.page-main .paper-image {
    grid-column: 2;
    justify-self: stretch;
    display: flex;
    justify-content: center;
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 18px 0 0;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 0;
    background: #fff;
    overflow: hidden;
}
.page-main .paper-item:not(:has(.paper-number)) .paper-image { grid-column: 1; }
.page-main .paper-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: contain;
    border-radius: 0;
}
.page-main .pub-tab-content { animation: none; }

/* ===============================================
   课题组新闻
   =============================================== */
.news-years {
    display: flex;
    flex-direction: column;
    gap: 64px;
    padding: 64px var(--page-pad) 96px;
}
.news-year {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 48px;
    align-items: start;
}
.news-year-label {
    grid-column: span 2;
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.news-year-label h2 {
    margin: 0;
    font-family: var(--latin-serif);
    font-size: clamp(34px, 2.6vw, 42px);
    font-weight: 600;
    line-height: 0.9;
    color: var(--ink);
}
.news-rows {
    grid-column: 3 / span 10;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ink);
}
.news-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 40px;
    column-gap: 40px;
    align-items: center;
    padding: 28px 24px 28px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    transition: background-color 0.35s, padding-left 0.35s;
}
.news-row:hover { background: #fff; color: var(--ink); }
.news-row-date { display: flex; flex-direction: column; gap: 4px; }
.news-row-day { font-family: var(--latin-serif); font-size: 34px; font-weight: 600; line-height: 0.9; }
.news-row-month { font-size: 14px; color: var(--faint); }
.news-row-month em { font-family: var(--latin-serif); font-size: 16px; }
html.lang-en .news-row-month em { font-size: 18px; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; }
.news-row-text { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.news-row-text h3 {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(19px, 1.5vw, 22px);
    line-height: 1.45;
    font-weight: 900;
    letter-spacing: 0.06em;
    color: var(--ink);
    transition: color 0.3s;
}
html.lang-en .news-row-text h3 { font-family: var(--latin-serif); font-weight: 600; letter-spacing: 0; font-size: clamp(22px, 1.7vw, 26px); line-height: 1.25; }
.news-row-text p { margin: 0; font-size: 16px; line-height: 1.85; color: #4A5160; }
.news-row:hover h3 { color: var(--accent); }

/* 新闻详情 */
.page-main .news-detail-page {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 48px;
    align-items: start;
    padding: 56px var(--page-pad) 96px;
}
.news-article { grid-column: span 8; display: flex; flex-direction: column; min-width: 0; }
.page-main .back-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    margin: 0;
    padding: 0;
    background: none;
    font-size: 15px;
    color: var(--muted);
    transition: color 0.3s;
}
.page-main .back-link:hover { color: var(--accent); background: none; }
.page-main .news-meta { display: flex; align-items: center; gap: 16px; margin: 32px 0 0; padding: 0; background: none; border: 0; }
.page-main .news-meta > span[aria-hidden] { width: 40px; height: 2px; background: var(--accent); }
.page-main .news-meta time { font-family: var(--latin-serif); font-size: 19px; font-weight: 600; letter-spacing: 0.1em; color: var(--accent); }
.page-main .page-header { margin: 24px 0 0; padding: 0; background: none; border-radius: 0; box-shadow: none; }
.page-main .page-header h1 {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--serif);
    font-size: clamp(22px, 1.8vw, 28px);
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: 0.06em;
    color: var(--ink);
}
html.lang-en .page-main .page-header h1 { font-family: var(--latin-serif); font-weight: 600; letter-spacing: 0; font-size: clamp(26px, 2.1vw, 34px); line-height: 1.15; }
.news-lead { margin: 28px 0 0; font-size: 19px; line-height: 1.9; color: #4A5160; }
.news-detail-content {
    max-width: 760px;
    margin-top: 40px;
    padding-top: 16px;
    border-top: 1px solid var(--ink);
    font-size: 18px;
    line-height: 2.05;
    color: var(--ink-soft);
}
html.lang-en .news-detail-content { line-height: 1.8; }
.news-detail-content > * { margin: 24px 0 0; }
.news-detail-content h1, .news-detail-content h2, .news-detail-content h3 {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 48px;
    font-family: var(--serif);
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1.4;
    color: var(--ink);
}
.news-detail-content h1 { font-size: 26px; }
.news-detail-content h2 { font-size: 23px; }
.news-detail-content h3 { font-size: 20px; }
.news-detail-content h2::before { content: ''; flex-shrink: 0; width: 6px; height: 1em; background: var(--accent); }
.news-detail-content a { color: var(--accent); border-bottom: 1px solid currentColor; }
.news-detail-content img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.news-detail-content p:has(> img:only-child) { padding: 32px; background: #fff; text-align: center; }
.news-detail-content ul, .news-detail-content ol { padding-left: 1.4em; }
.news-detail-content li + li { margin-top: 8px; }
.news-detail-content blockquote {
    padding: 8px 0 8px 28px;
    border-left: 2px solid var(--accent);
    font-family: var(--serif);
    font-size: 20px;
    color: var(--ink);
}
.news-detail-content code { padding: 2px 6px; background: var(--paper-deep); font-size: 0.9em; }
.news-detail-content pre { padding: 20px; background: #fff; overflow-x: auto; line-height: 1.6; }
.news-detail-content pre code { padding: 0; background: none; }
.news-more { grid-column: 10 / span 3; position: sticky; top: 24px; margin-top: 76px; }
.news-more h2 {
    margin: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ink);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.2em;
    color: var(--faint);
}
.news-more ol { margin: 0; padding: 0; list-style: none; }
.news-more a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
}
.news-more time { font-family: var(--latin-serif); font-size: 17px; font-weight: 600; color: var(--faint); }
.news-more a span { font-size: 16px; line-height: 1.6; font-weight: 500; transition: color 0.3s; }
.news-more a:hover span { color: var(--accent); }

/* ===============================================
   联系我们
   =============================================== */
.contact-layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 48px;
    align-items: start;
    padding: 64px var(--page-pad) 96px;
}
.contact-intro { grid-column: span 6; display: flex; flex-direction: column; gap: 32px; }
.contact-intro .section-kicker { margin: 0; }
.contact-statement {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(19px, 1.5vw, 23px);
    line-height: 1.8;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink);
    text-align: justify;
}
html.lang-en .contact-statement { font-family: var(--latin-serif); font-size: clamp(22px, 1.8vw, 27px); line-height: 1.45; letter-spacing: 0; text-align: left; }
.contact-rest { margin: 0; font-size: 17px; line-height: 2; color: #4A5160; text-align: justify; }
html.lang-en .contact-rest { text-align: left; line-height: 1.8; }
.contact-details { grid-column: 8 / span 5; }
.contact-ledger { margin: 0; border-top: 1px solid var(--ink); }
.contact-ledger div {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 24px;
    align-items: baseline;
    padding: 24px 0;
    border-bottom: 1px solid var(--rule);
    transition: background-color 0.35s, padding-left 0.35s;
}
html.lang-en .contact-ledger div { grid-template-columns: 128px minmax(0, 1fr); }
.contact-ledger div:hover { background: #fff; }
.contact-ledger dt { font-size: 14px; letter-spacing: 0.15em; color: var(--faint); }
html.lang-en .contact-ledger dt { letter-spacing: 0.04em; }
.contact-ledger dd { margin: 0; font-size: 18px; line-height: 1.8; color: var(--ink); }
.contact-ledger dd a { color: inherit; transition: color 0.3s ease; }
.contact-ledger dd a:hover { color: var(--accent); }


/* ===============================================
   动效：区块进入视口时，子元素按方向分别入场
   · reveal-group：区块本身不动，由它的子元素分别从左、右、下方进入
   · from-left / from-right：单个区块整体从左 / 右滑入
   =============================================== */
/* 横向滑入时不产生横向滚动条（clip 不会影响 sticky） */
.page-main, .home-main { overflow-x: clip; }

.reveal-on-scroll.reveal-group { opacity: 1; transform: none; transition: none; }
.reveal-on-scroll.from-left:not(.revealed) { transform: translateX(-72px); }
.reveal-on-scroll.from-right:not(.revealed) { transform: translateX(72px); }
.reveal-on-scroll.from-left, .reveal-on-scroll.from-right { transition-duration: 1.1s; }
.reveal-on-scroll.from-right { transition-delay: 0.15s; }

/* 子元素的统一过渡；--d 控制先后顺序 */
.reveal-group .rv-l, .reveal-group .rv-r, .reveal-group .rv-up, .reveal-group .rv-zoom,
.research-area-copy, .research-media, .research-area-number i,
.member-photo, .member-body, .roster-row,
.pubs-year-head h2, .pubs-year-head::after, .news-year-label, .news-rows > li,
.news-more h2, .news-more li,
.about-heading, .about-body, .acknowledge-heading, .acknowledge-logos li,
.section-kicker span {
    transition: opacity 0.9s var(--timing) var(--d, 0s), transform 1.1s var(--timing) var(--d, 0s),
        background-color 0.35s ease, padding-left 0.35s ease, color 0.3s ease;
}

/* 研究方向：文字与图片分别从两侧进入，编号后的细线随后画出 */
.research-area:not(.revealed) .research-area-copy { opacity: 0; transform: translateX(-72px); }
.research-area:not(.revealed) .research-media { opacity: 0; transform: translateX(72px); }
.research-area.is-reversed:not(.revealed) .research-area-copy { transform: translateX(72px); }
.research-area.is-reversed:not(.revealed) .research-media { transform: translateX(-72px); }
.research-area .research-media { --d: 0.15s; }
.research-area-number i { transform-origin: left; --d: 0.5s; }
.research-area:not(.revealed) .research-area-number i { transform: scaleX(0); }

/* 组员：照片从左侧放大浮现，文字从右侧滑入 */
.page-main .member-photo { transition: opacity 0.9s var(--timing), transform 1.1s var(--timing); }
.faculty-item:not(.revealed) .member-photo { opacity: 0; transform: translateX(-48px) scale(0.96); }
.faculty-item:not(.revealed) .member-body { opacity: 0; transform: translateX(64px); }
.faculty-item .member-body { --d: 0.15s; }
/* 学生：同一行的四人依次从下方浮现 */
.roster:not(.revealed) .roster-row { opacity: 0; transform: translateY(40px); }
.roster-row:nth-child(4n+2) { --d: 0.1s; } .roster-row:nth-child(4n+3) { --d: 0.2s; } .roster-row:nth-child(4n+4) { --d: 0.3s; }

/* 标题前的红色短线从左向右画出 */
.section-kicker span { transform-origin: left; }
.reveal-group:not(.revealed) .section-kicker span { transform: scaleX(0); }

/* 论文：年份从左侧滑入、下方横线画出；每篇论文从右侧滑入 */
.pubs-year-head { position: relative; border-bottom-color: transparent; }
.pubs-year-head::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--ink);
    transform-origin: left;
    --d: 0.2s;
}
.pubs-year:not(.revealed) .pubs-year-head h2 { opacity: 0; transform: translateX(-56px); }
.pubs-year:not(.revealed) .pubs-year-head::after { transform: scaleX(0); }
.page-main .paper-item.reveal-on-scroll { transition: opacity 0.8s var(--timing), transform 0.9s var(--timing), background-color 0.35s, padding-left 0.35s; }
.page-main .paper-item.reveal-on-scroll:not(.revealed) { transform: translateX(48px); }

/* 新闻：年份从左侧进入，各条新闻依次从右侧滑入 */
.news-year:not(.revealed) .news-year-label { opacity: 0; transform: translateX(-48px); }
.news-year:not(.revealed) .news-rows > li { opacity: 0; transform: translateX(56px); }
.news-rows > li:nth-child(1) { --d: 0.1s; } .news-rows > li:nth-child(2) { --d: 0.2s; } .news-rows > li:nth-child(3) { --d: 0.3s; }
.news-rows > li:nth-child(4) { --d: 0.4s; } .news-rows > li:nth-child(5) { --d: 0.5s; } .news-rows > li:nth-child(n+6) { --d: 0.6s; }
.news-more:not(.revealed) h2 { opacity: 0; transform: translateX(40px); }
.news-more:not(.revealed) li { opacity: 0; transform: translateX(40px); }
.news-more li:nth-child(1) { --d: 0.1s; } .news-more li:nth-child(2) { --d: 0.2s; } .news-more li:nth-child(3) { --d: 0.3s; } .news-more li:nth-child(n+4) { --d: 0.4s; }

/* 致谢：标题从左进入，logo 依次从下方浮现 */
.acknowledge:not(.revealed) .acknowledge-heading { opacity: 0; transform: translateX(-56px); }
.acknowledge:not(.revealed) .acknowledge-logos li { opacity: 0; transform: translateY(32px); }
.acknowledge-logos li:nth-child(2) { --d: 0.3s; } .acknowledge-logos li:nth-child(3) { --d: 0.38s; } .acknowledge-logos li:nth-child(4) { --d: 0.46s; }
.acknowledge-logos li:nth-child(5) { --d: 0.54s; } .acknowledge-logos li:nth-child(6) { --d: 0.62s; } .acknowledge-logos li:nth-child(7) { --d: 0.7s; } .acknowledge-logos li:nth-child(1) { --d: 0.22s; }

/* 首页：标题与介绍依次从下方浮现 */
.about-intro:not(.revealed) .about-heading { opacity: 0; transform: translateY(32px); }
.about-intro:not(.revealed) .about-body { opacity: 0; transform: translateY(48px); }
.about-intro .about-body { --d: 0.15s; }

/* 页头：标题从左、导语从右，随页面入场 */
body.content-loaded .page-crumbs { animation: pageFromLeft 1s var(--timing) 0.35s both; }
@keyframes pageFromLeft { from { opacity: 0; transform: translateX(-56px); } to { opacity: 1; transform: none; } }
@keyframes pageFromRight { from { opacity: 0; transform: translateX(56px); } to { opacity: 1; transform: none; } }

/* ===============================================
   平板
   =============================================== */
@media (max-width: 1024px) {
    .research-area, .pubs-layout, .news-year, .news-detail-page, .contact-layout { column-gap: 32px; }
    .page-main .member-card { column-gap: 32px; }
    .page-main .member-photo { grid-column: span 4; }
    .member-body { grid-column: 5 / span 8; }
    .member-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pubs-aside { display: none; }
    .pubs-main { grid-column: 1 / -1; }
    .page-main .paper-item { grid-template-columns: 40px minmax(0, 1fr); column-gap: 24px; }
    .page-main .news-detail-page { grid-template-columns: minmax(0, 1fr); }
    .news-article, .news-more { grid-column: 1 / -1; }
    .news-more { position: static; margin-top: 72px; }
    .roster-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
}

/* ===============================================
   手机
   =============================================== */
@media (max-width: 768px) {
    .page-head { padding-top: 24px; }
    .page-crumbs { font-size: 13px; }


    /* 研究方向：上下排列 */
    .research-area { display: flex; flex-direction: column; gap: 36px; padding: 64px var(--page-pad); }
    .research-area-copy { gap: 14px; }
    .research-area-number span { font-size: 48px; }
    .research-area h2 { font-size: 21px; margin-top: 8px; }
    .research-area-text { font-size: 15px; line-height: 1.95; }
    .research-media { width: 100%; padding-top: 0; }
    .research-media-stack { gap: 32px; }
    .research-media-stack > figure + figure::before { top: -16px; }
    .research-media-pair { gap: 10px; }
    .acknowledge { padding: 64px var(--page-pad) 72px; }
    .acknowledge-heading p { margin-top: 14px; font-size: 15px; }
    .acknowledge-logos { justify-content: flex-start; gap: 28px 36px; margin-top: 24px; }
    .acknowledge-logos img { height: 44px; }
    .acknowledge-logos .logo-most img { height: 36px; }
    .acknowledge-logos .logo-nsfc img, .acknowledge-logos .logo-scu img, .acknowledge-logos .logo-skl img, .acknowledge-logos .logo-pse img { height: 58px; }
    .acknowledge-logos .logo-highlight img { height: 34px; }

    /* 组员 */
    .page-main .members-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
    .members-tab { justify-content: center; gap: 6px; padding: 18px 0 16px; }
    .page-main .members-tabs .pub-tab-btn { font-size: 15px; letter-spacing: 0.04em; }
    .members-tabs em { display: none; }
    .members-tab-count { font-size: 17px; }
    .page-main .members-list { padding: 40px var(--page-pad) 64px; }
    .faculty-list, .roster { margin-top: 24px; }
    .page-main .member-card { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 18px; padding: 36px 0; }
    .page-main .member-photo { flex: 0 0 120px; }
    .member-body { display: contents; }
    .member-heading { flex: 1 1 0; gap: 8px; min-width: 0; padding-bottom: 4px; }
    .member-names { flex-direction: column; align-items: flex-start; gap: 4px; }
    .page-main .member-name { font-size: 25px; letter-spacing: 0.14em; }
    .member-alt { font-size: 18px; }
    .page-main .member-description, .member-facts, .member-card .translation-notice { flex: 1 1 100%; }
    .page-main .member-title, .page-main .member-year { font-size: 14px; letter-spacing: 0.04em; }
    .page-main .member-description { margin: 0; font-size: 15px; line-height: 1.9; }
    .member-facts { grid-template-columns: 72px minmax(0, 1fr); row-gap: 10px; margin: 0; padding-top: 14px; font-size: 14px; }
    html.lang-en .member-facts { grid-template-columns: 96px minmax(0, 1fr); }
    .member-facts div { display: contents; }
    .member-facts dt { font-size: 14px; letter-spacing: 0; line-height: 1.7; }
    .member-facts dd { font-size: 14px; }
    .member-more { height: 40px; margin: 0; font-size: 14px; }

    .roster-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
    .roster-row { gap: 6px; padding-top: 20px; }
    .roster-avatar { width: min(100%, 120px); margin-bottom: 20px; outline-offset: 8px; }
    .roster-avatar span { font-size: 40px; }
    .roster-name { font-size: 19px; letter-spacing: 0.08em; }
    html.lang-en .roster-name { font-size: 21px; }
    .page-main .members-empty { padding: 36px 0; font-size: 19px; border-top: 1px solid var(--ink); }

    /* 论文：年份目录变为顶部横向吸顶条 */
    .pubs-layout { display: block; padding: 0 0 64px; }
    .pubs-aside {
        display: block;
        position: sticky;
        top: 0;
        z-index: 5;
        margin: 0;
        padding: 0 var(--page-pad);
        background: var(--paper);
        border-bottom: 1px solid var(--rule);
    }
    .pubs-aside-title { display: none; }
    .pubs-toc { flex-direction: row; gap: 22px; overflow-x: auto; scrollbar-width: none; }
    .pubs-toc::-webkit-scrollbar { display: none; }
    .pubs-toc a { flex-shrink: 0; align-items: center; height: 48px; padding: 0 4px; border-left: 0; border-bottom: 2px solid transparent; }
    .pubs-toc a span { font-size: 22px; }
    .pubs-toc a.is-text span { font-size: 17px; }
    .pubs-toc a.active { border-bottom-color: var(--accent); }
    .pubs-main { padding: 0 var(--page-pad); }
    .pubs-years { gap: 48px; padding-top: 48px; }
    .pubs-year { scroll-margin-top: 64px; }
    .pubs-year-head { gap: 14px; padding-bottom: 12px; }
    .pubs-year-head h2 { font-size: 40px; }
    .pubs-subyear { margin-top: 32px; font-size: 21px; }
    .page-main .paper-item, .page-main .paper-item:not(:has(.paper-number)) {
        display: flex;
        flex-wrap: wrap;
        gap: 14px 12px;
        padding: 24px 0;
    }
    .page-main .paper-image { order: -1; flex: 1 1 100%; height: auto; margin: 0; text-align: center; }
    .page-main .paper-image img { width: auto; height: auto; max-width: 100%; max-height: 240px; margin: 0 auto; }
    .paper-number { font-size: 18px; line-height: 1.6; }
    .paper-body { flex: 1 1 0; min-width: 0; gap: 10px; }
    .page-main .paper-title,
    .page-main .paper-item:has(.paper-image) .paper-title,
    .page-main .paper-item-clickable:hover .paper-title { font-size: 16px; line-height: 1.75; }

    /* 新闻 */
    .news-years { gap: 48px; padding: 48px var(--page-pad) 64px; }
    .news-year { display: block; }
    .news-year-label { position: static; flex-direction: row; align-items: baseline; gap: 14px; padding-bottom: 12px; }
    .news-year-label h2 { font-size: 36px; }
    .news-row { grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; align-items: start; padding: 24px 0; }
    .news-row-day { font-size: 30px; }
    .news-row-month { font-size: 12px; }
    .news-row-month em { font-size: 13px; }
    html.lang-en .news-row-month em { font-size: 14px; }
    .news-row-text { gap: 8px; }
    .news-row-text h3 { font-size: 18px; letter-spacing: 0.02em; }
    html.lang-en .news-row-text h3 { font-size: 22px; }
    .news-row-text p { font-size: 14px; line-height: 1.8; }
    .news-row-arrow { display: none; }

    .page-main .news-detail-page { padding: 36px var(--page-pad) 64px; }
    .page-main .news-meta { margin-top: 28px; }
    .page-main .news-meta time { font-size: 18px; }
    .page-main .page-header h1 { font-size: 24px; letter-spacing: 0.03em; }
    html.lang-en .page-main .page-header h1 { font-size: 28px; }
    .news-lead { margin-top: 18px; font-size: 16px; }
    .news-detail-content { margin-top: 28px; font-size: 16px; line-height: 1.95; }
    .news-detail-content h2 { font-size: 22px; margin-top: 36px; }
    .news-detail-content p:has(> img:only-child) { padding: 16px; }
    .news-more { margin-top: 56px; }

    /* 联系 */
    .contact-layout { display: flex; flex-direction: column; gap: 48px; padding: 48px var(--page-pad) 64px; }
    .contact-intro { gap: 20px; }
    .contact-statement { font-size: 20px; line-height: 1.75; }
    html.lang-en .contact-statement { font-size: 24px; }
    .contact-rest { font-size: 15px; line-height: 1.9; }
    .contact-details { width: 100%; }
    .contact-ledger div, html.lang-en .contact-ledger div { grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; padding: 16px 0; }
    html.lang-en .contact-ledger div { grid-template-columns: 104px minmax(0, 1fr); }
    .contact-ledger dt { font-size: 13px; letter-spacing: 0.04em; }
    .contact-ledger dd { font-size: 15px; }
}

@media (max-width: 768px) {
    .reveal-on-scroll.from-left:not(.revealed) { transform: translateX(-32px); }
    .reveal-on-scroll.from-right:not(.revealed) { transform: translateX(32px); }
}

@media print {
    .page-main { background: none; }
    .pubs-aside, .members-tabs { display: none !important; }
    .reveal-group *, .reveal-group *::after, .page-crumbs { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* Switching between member tabs: the breadcrumb and tab bar stay put and only the list fades in. */
html.tab-switch .page-main .members-page { opacity: 1; animation: none; transform: none; }
html.tab-switch .members-page .members-list { opacity: 0; }
html.tab-switch body.content-loaded .members-page .members-list { animation: fadeInUp 0.6s var(--timing) 0.3s forwards; }
html.tab-switch .page-crumbs { animation: none; }