
:root{
  /* 内容缩放：1 = 原大小，0.85 = 85%，0.8 = 80%。只改下一行即可。
     同时调整 Header 以外的文字及首页照片；导航、课题组名称、Logo 不缩放。 */
  --content-scale: 0.85;
  /* 以下字号仍乘以上面的 content-scale；中英文姓名共用同一个字号。 */
  --name-size: 48px;
  --section-title-size: 26px;
  --secondary-text-color: #666666; /* 机构、地点及条目补充说明 */

  /* Header 居中宽度：减小此值，两侧整体向中间靠；增大则向两边展开。 */
  --header-max-width: 1320px;
  --header-side-padding: 38px; /* 左右内边距：增大则进一步向内靠 */
  --header-group-gap: 40px; /* 导航与品牌区域之间的最小间距 */
  --nav-font-size: 20px; /* 导航文字大小，不乘 content-scale */
  --brand-font-size: 32px; /* SU Research Group 文字大小 */
  --logo-size: 82px; /* 三个 Logo 各自的宽度和高度 */
  --ink:#172033; --muted:#5f6f86; --blue:#234e9b; --blue2:#173b78;
  --line:#dbe3ef; --bg:#f7f9fc; --card:#fff; --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,"Helvetica Neue","Noto Sans",sans-serif;
  color:var(--ink); background:#fff; line-height:1.72; font-size:17px;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max);margin:auto;padding:0 34px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 8px rgba(15,23,42,.035);
}
.nav{min-height:78px;display:flex;align-items:center;gap:30px}
.brand{
  font-family:Georgia,"Times New Roman",serif;
  font-size:27px;font-weight:700;color:var(--ink);margin-right:auto;
  white-space:nowrap;
}
.nav>a:not(.brand){
  font-size:15px;font-weight:700;letter-spacing:.035em;color:#294b85;
  white-space:nowrap;
}
.nav>a:hover{color:#123d88;text-decoration:none}

/* Hero */
.hero{padding:72px 0 54px;background:linear-gradient(180deg,#f7faff 0%,#fff 100%)}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) calc(300px * var(--content-scale));
  gap:70px;align-items:center;
}
.kicker{
  font-size:calc(14px * var(--content-scale));font-weight:800;letter-spacing:.14em;color:var(--blue);
  text-transform:uppercase;margin-bottom:8px;
}
h1{
  font:700 calc(58px * var(--content-scale))/1.06 Georgia,"Times New Roman",serif;
  margin:8px 0 8px;color:#132b55;
}
.zh{font-size:calc(27px * var(--content-scale));color:var(--muted);margin-bottom:20px}
.roles{font-size:calc(20px * var(--content-scale));line-height:1.55;margin:0 0 10px}
.honors{font-size:calc(17px * var(--content-scale));color:#53647b;margin-top:10px}
.hero-photo{
  width:calc(290px * var(--content-scale));height:calc(360px * var(--content-scale));object-fit:cover;object-position:50% 15%;
  border-radius:5px;box-shadow:0 16px 38px rgba(15,23,42,.16);
}
.actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.btn{
  display:inline-block;padding:calc(10px * var(--content-scale)) calc(16px * var(--content-scale));border:1px solid var(--blue);
  border-radius:4px;font-weight:700;font-size:calc(15px * var(--content-scale));
}
.btn.primary{background:var(--blue);color:#fff}

/* Institutional logos */
.institution-strip{
  border-top:1px solid #e6ebf3;border-bottom:1px solid #e6ebf3;
  background:#fff;
}
.institution-logos{
  min-height:108px;display:flex;align-items:center;justify-content:center;
  gap:62px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px;
}
.institution{
  display:flex;align-items:center;gap:13px;color:#34445c;font-size:calc(15px * var(--content-scale));
  font-weight:700;
}
.institution img{width:72px;height:72px;object-fit:contain}
.institution img.logo-wide{width:76px;height:72px}

/* Main sections */
section{padding:58px 0}
.section-alt{background:var(--bg)}
.section-title{
  font:700 calc(36px * var(--content-scale)) Georgia,"Times New Roman",serif;
  margin:0 0 27px;color:var(--blue2);
}
.about-copy{max-width:1080px}
.about-block{
  margin:0 0 22px;
  font-size:calc(18px * var(--content-scale));line-height:1.95;
  text-align:justify;text-justify:inter-ideograph;
}
.about-label{
  display:inline-block;margin-bottom:8px;
  color:var(--blue);font-weight:800;font-size:calc(14px * var(--content-scale));letter-spacing:.08em;
}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.card{
  border:1px solid var(--line);background:#fff;padding:27px;
  border-radius:7px;transition:transform .15s ease,box-shadow .15s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(15,23,42,.06)}
.card .num{font-weight:800;color:var(--blue);font-size:calc(14px * var(--content-scale));letter-spacing:.12em}
.card h3{font:700 calc(23px * var(--content-scale)) Georgia,"Times New Roman",serif;margin:9px 0 10px}
.tags{color:var(--muted);font-size:calc(15px * var(--content-scale));line-height:1.7}

/* Shared subpages */
.pub-year{font:700 calc(28px * var(--content-scale)) Georgia,serif;color:var(--blue);border-bottom:1px solid var(--line);padding-bottom:7px;margin:36px 0 17px}
.pub{margin:0 0 16px;padding-left:34px;text-indent:-34px}
.note{font-size:calc(15px * var(--content-scale));color:var(--muted)}
.project{display:grid;grid-template-columns:210px 1fr;gap:24px;border-bottom:1px solid var(--line);padding:18px 0}
.project-id{font-weight:800;color:var(--blue)}
.project-title{font-weight:700}
.page-head{padding:46px 0 25px;background:var(--bg);border-bottom:1px solid var(--line)}
.page-head h1{font-size:calc(43px * var(--content-scale))}
.footer{border-top:1px solid var(--line);padding:32px 0;color:var(--muted);font-size:calc(15px * var(--content-scale))}

@media(max-width:920px){
  .nav{gap:18px;overflow-x:auto}.brand{font-size:23px}
  .nav>a:not(.brand){font-size:14px}
  .hero-grid{grid-template-columns:1fr calc(235px * var(--content-scale));gap:35px}
  .hero-photo{width:calc(225px * var(--content-scale));height:calc(300px * var(--content-scale))}
  h1{font-size:calc(49px * var(--content-scale))}
}
@media(max-width:720px){
  body{font-size:16px}.container{padding:0 20px}
  .hero-grid{grid-template-columns:1fr}.hero-photo{width:calc(210px * var(--content-scale));height:calc(280px * var(--content-scale))}
  h1{font-size:calc(45px * var(--content-scale))}.section-title{font-size:calc(31px * var(--content-scale))}
  .cards{grid-template-columns:1fr}
  .institution-logos{justify-content:flex-start;gap:22px}
  .institution{width:100%}
  .project{grid-template-columns:1fr;gap:4px}
}


/* ===== V1.2 homepage/navigation typography upgrade ===== */
body{font-size:22px;line-height:1.78}
main{font-size:calc(22px * var(--content-scale))}
.container{max-width:1320px;padding-left:38px;padding-right:38px}

.nav{min-height:104px;gap:22px}
.brand{
  font-size:32px;
  margin-right:8px;
  flex:0 0 auto;
}
.brand-logos{
  display:flex;align-items:center;gap:10px;
  margin-right:auto;flex:0 0 auto;
}
.brand-logos img{
  width:54px;height:54px;object-fit:contain;display:block;
}
.nav-links{display:flex;align-items:center;gap:24px;white-space:nowrap}
.nav-links a{
  font-size:18px;font-weight:800;letter-spacing:.025em;color:#234e9b;
}
.nav-links a:hover{text-decoration:none;color:#102f69}

.kicker{font-size:calc(18px * var(--content-scale))}
h1{font-size:calc(68px * var(--content-scale))}
.zh{font-size:calc(34px * var(--content-scale))}
.roles{font-size:calc(20px * var(--content-scale))}
.honors{font-size:calc(20px * var(--content-scale))}
.btn{font-size:calc(19px * var(--content-scale));padding:calc(12px * var(--content-scale)) calc(19px * var(--content-scale))}
.hero-grid{grid-template-columns:minmax(0,1fr) calc(330px * var(--content-scale))}
.hero-photo{width:calc(320px * var(--content-scale));height:calc(405px * var(--content-scale))}

.section-title{font-size:calc(45px * var(--content-scale))}
.about-block{
  font-size:calc(23px * var(--content-scale));
  line-height:2.0;
  text-align:justify;
  text-justify:inter-ideograph;
  margin-bottom:30px;
}
.card .num{font-size:calc(18px * var(--content-scale))}
.card h3{font-size:calc(29px * var(--content-scale))}
.tags{font-size:calc(19px * var(--content-scale))}
.page-head h1{font-size:calc(52px * var(--content-scale))}
.page-head p{font-size:calc(21px * var(--content-scale))}
.pub{font-size:calc(20px * var(--content-scale))}
.pub-year{font-size:calc(34px * var(--content-scale))}
.project{font-size:calc(20px * var(--content-scale))}
.note{font-size:calc(18px * var(--content-scale))}
.footer{font-size:calc(18px * var(--content-scale))}

/* old separate logo strip no longer used */
.institution-strip,.institution-logos{display:none!important}

@media(max-width:1180px){
  .container{padding-left:24px;padding-right:24px}
  .nav{min-height:92px;gap:14px;overflow-x:auto}
  .brand{font-size:27px}
  .brand-logos img{width:43px;height:43px}
  .nav-links{gap:17px}
  .nav-links a{font-size:16px}
}
@media(max-width:820px){
  body{font-size:18px}
  main{font-size:calc(18px * var(--content-scale))}
  .nav{align-items:center}
  .brand{font-size:23px}
  .brand-logos{gap:6px}
  .brand-logos img{width:36px;height:36px}
  .nav-links{gap:14px}
  .nav-links a{font-size:14px}
  h1{font-size:calc(50px * var(--content-scale))}.zh{font-size:calc(28px * var(--content-scale))}.roles{font-size:calc(21px * var(--content-scale))}.honors{font-size:calc(18px * var(--content-scale))}
  .section-title{font-size:calc(36px * var(--content-scale))}.about-block{font-size:calc(19px * var(--content-scale))}
  .hero-grid{grid-template-columns:1fr}
  .hero-photo{width:calc(240px * var(--content-scale));height:calc(310px * var(--content-scale))}
}
/* ===== Header final layout ===== */

.site-header .container {
    max-width: var(--header-max-width);
    margin: 0 auto;
    padding-left: var(--header-side-padding);
    padding-right: var(--header-side-padding);
}

.nav {
    width: 100%;
    min-height: 190px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--header-group-gap);
    overflow-x: auto;
}

/* 左侧：SU Research Group + Logos */
.brand-area {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 14px;

    /* 关键：取消之前把左侧锁死的 auto */
    margin: 0;

    flex: 0 0 auto;
}

.brand {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--ink);

    margin: 0;
    white-space: nowrap;
}

/* 三个 Logo */
.brand-logos {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 20px;
    margin: 0;
}

.brand-logos img {
    width: 82px;
    height: 82px;

    object-fit: contain;
    display: block;
}

/* 右侧导航 */
.nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 32px;

    margin-left: auto;
    white-space: nowrap;
}

.nav-links a {
    font-size: var(--nav-font-size);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #234e9b;
}
/* ===== Header: navigation left, SU Research Group right ===== */

.nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 导航放左边 */
.nav-links {
    order: 1;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 32px;

    margin-left: 0;
    margin-right: auto;
}

/* SU Research Group + Logo 整体放最右边 */
.brand-area {
    order: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 12px;

    margin-left: 0;
    margin-right: 0;

    flex: 0 0 auto;
}

/* 标题 */
.brand {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: var(--brand-font-size);
    font-weight: 700;

    white-space: nowrap;
    text-decoration: none;
}

/* 三个 Logo */
.brand-logos {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;
    margin: 0;
}

.brand-logos img {
    width: var(--logo-size);
    height: var(--logo-size);

    object-fit: contain;
    display: block;
}
/* ===== Name: English + Chinese on the same line ===== */

.hero-name {
  font-size: calc(var(--name-size) * var(--content-scale));
  display: flex;
  align-items: baseline;
  gap: 18px;
  white-space: nowrap;
}

.hero-name-cn {
  font-family: Arial, "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: inherit;
  font-weight: 400;
  color: #64748b;
}
/* ===== Contact under About ===== */

.home-contact {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  margin-top: 35px;
  padding-top: 28px;

  border-top: 1px solid #dbe3ef;
}

.contact-info h3 {
  margin: 0 0 12px 0;

  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(28px * var(--content-scale));
  font-weight: 700;

  color: #173b78;
}

.contact-info p {
  margin: 0;

  font-size: calc(44px * var(--content-scale));
  line-height: 1.7;
}

.contact-map {
  text-align: right;
  padding-bottom: 4px;
}

.contact-map a {
  font-size: calc(24px * var(--content-scale));
  font-weight: 700;

  color: #234e9b;
  text-decoration: none;
}

.contact-map a:hover {
  text-decoration: underline;
}
.hero-contact {
  margin-top: 35px;
}
.contact-title {
  font-weight: 700;
}
/* ===== Header: use the centered container, without overlapping offsets ===== */

/* 两组位置由文件开头的 Header 宽度、内边距及间距参数控制。 */
.nav-links {
    position: relative;
    left: 0;
    flex: 0 0 auto;
}

/* 右侧 SU Research Group + Logos 整体向左 */
.brand-area {
    position: relative;
    right: 0;
}
/* ===== Principal-Investigator Projects ===== */

.home-projects .project {
  grid-template-columns: 330px 1fr;
}

.home-projects .project-date {
  white-space: nowrap;
}

/* 黑色主文字：仅应用于首页 Hero 以外的正文区域及所有页脚。
   Header 与首页姓名、身份、荣誉、按钮、Contact 保留原配色。 */
main > :not(.hero), .footer {
  --ink: #000;
  --muted: #000;
  --blue: #000;
  --blue2: #000;
  color: #000;
}

/* 子页面的大标题原先直接指定蓝色，在此随正文使用黑色。 */
main .page-head h1 {
  color: #000;
}

/* 导师姓名链接：保持可识别的蓝色，点击后在新标签页打开个人网站。 */
main .advisor-link {
  color: #234e9b;
  white-space: nowrap;
}

/* 板块标题统一略大于正文；放在响应式规则后，避免被旧字号覆盖。 */
.section-title, .page-head h1, .pub-year, .card h3 {
  font-size: calc(var(--section-title-size) * var(--content-scale));
}

/* 条目标题保留黑色；其后的机构、地点、项目说明和辅助文字用灰色。 */
main .project .project-title ~ div,
main .note,
main .tags,
main .page-head p {
  color: var(--secondary-text-color);
}

/* ===== Research page: images, linked papers, and layout choices ===== */
.research-card {
  display: flex;
  flex-direction: column;
}

.research-card > p {
  margin: 0 0 14px;
}

.research-publications {
  margin: 2px 0 18px;
  padding: 10px 13px;
  color: #36557d;
  background: #eef4ff;
  border-left: 3px solid #547fc2;
  border-radius: 0 5px 5px 0;
  font-size: calc(16px * var(--content-scale));
  line-height: 1.75;
}

.research-publications span {
  font-weight: 700;
  color: #36557d;
}

.research-publications a {
  display: inline-block;
  margin-right: 5px;
  color: #315f9f;
  font-weight: 700;
}

.research-figure {
  margin: auto 0 0;
}

.research-figure img {
  display: block;
  width: 100%;
  height: 285px;
  padding: 10px;
  object-fit: contain;
  background: #f7f9fc;
  border: 1px solid #e1e7f0;
  border-radius: 5px;
}

.research-figure figcaption {
  margin-top: 7px;
  color: var(--secondary-text-color);
  font-size: calc(14px * var(--content-scale));
  line-height: 1.45;
}

.research-figure figcaption a {
  color: #315f9f;
  font-weight: 700;
}

/* 4 × 1: one research field per row. */
.research-layout-list {
  grid-template-columns: 1fr;
}

.research-layout-list .research-card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
  grid-template-rows: auto auto auto 1fr;
  align-items: center;
  column-gap: 32px;
  row-gap: 0;
}

.research-layout-list .research-card > .num,
.research-layout-list .research-card > h3,
.research-layout-list .research-card > p,
.research-layout-list .research-card > .research-publications {
  grid-column: 1;
}

.research-layout-list .research-card > .num { grid-row: 1; }
.research-layout-list .research-card > h3 { grid-row: 2; }
.research-layout-list .research-card > p { grid-row: 3; }
.research-layout-list .research-card > .research-publications { grid-row: 4; }

.research-layout-list .research-figure {
  grid-column: 2;
  grid-row: 1 / 5;
  margin: 0;
}

.research-layout-list .research-figure img {
  height: 300px;
}

@media(max-width:900px) {
  .research-layout-list .research-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 18px;
  }
  .research-layout-list .research-card > .num,
  .research-layout-list .research-card > h3,
  .research-layout-list .research-card > p,
  .research-layout-list .research-card > .research-publications,
  .research-layout-list .research-figure {
    grid-column: 1;
    grid-row: auto;
  }
  .research-figure img,
  .research-layout-list .research-figure img {
    height: auto;
    max-height: 430px;
  }
}

/* ===== Final research layout: four rows with image collages ===== */
.research-layout-list .research-gallery {
  grid-column: 2;
  grid-row: 1 / 5;
}

.research-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-self: stretch;
}

.research-gallery img {
  display: block;
  width: 100%;
  height: 148px;
  padding: 5px;
  object-fit: contain;
  background: #f7f9fc;
  border: 1px solid #e1e7f0;
  border-radius: 5px;
}

.research-gallery.gallery-three img:first-child {
  grid-row: span 2;
  height: 306px;
}

.research-gallery.gallery-two {
  grid-template-columns: 1fr;
}

.research-gallery.gallery-two img {
  height: 148px;
}

.research-publications {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 9px;
}

.research-publications .references-label {
  margin-right: 2px;
  color: #274c7a;
}

/* The current page is visibly marked in the six-item navigation. */
.nav-links a[aria-current="page"] {
  color: #9d3159;
  background: #fbeaf1;
  box-shadow: inset 0 -3px 0 #9d3159;
  border-radius: 4px 4px 0 0;
  padding: 6px 9px;
}

.nav-links .language-switch {
  margin-left: 4px;
  padding: 5px 9px;
  color: #315f9f;
  background: #eef4ff;
  border: 1px solid #b9ccea;
  border-radius: 4px;
  line-height: 1.2;
}

.nav-links .language-switch:hover {
  color: #9d3159;
  background: #fbeaf1;
  border-color: #dfb3c4;
}

.section-index {
  position: sticky;
  top: 190px;
  z-index: 15;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
}

.section-index-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.section-index-links a {
  color: #51627a;
  font-size: calc(13px * var(--content-scale));
  font-weight: 800;
  letter-spacing: .025em;
}

.section-index-links a:hover {
  color: #9d3159;
  text-decoration: none;
}

section[id] {
  scroll-margin-top: 245px;
}

@media(max-width:1180px) {
  .section-index { top: 92px; }
  section[id] { scroll-margin-top: 150px; }
}

@media(max-width:820px) {
  .section-index {
    position: static;
  }
  .section-index-links {
    justify-content: flex-start;
    gap: 8px 15px;
  }
  section[id] { scroll-margin-top: 20px; }
}

@media(max-width:900px) {
  .research-layout-list .research-gallery {
    grid-column: 1;
    grid-row: auto;
  }
  .research-gallery img,
  .research-gallery.gallery-two img {
    height: auto;
    max-height: 260px;
  }
  .research-gallery.gallery-three img:first-child {
    grid-row: auto;
    height: auto;
    max-height: 530px;
  }
}

@media(max-width:560px) {
  .research-gallery {
    grid-template-columns: 1fr;
  }
}

/* Responsive bilingual header: keep both navigation and branding visible. */
.nav { overflow: visible; }
.nav-links { flex: 1 1 auto; flex-wrap: wrap; gap: 12px 20px; white-space: normal; }
.nav-links a { white-space: nowrap; }
@media(max-width:1180px) {
  .section-index { top: 190px; }
  section[id] { scroll-margin-top: 255px; }
}
@media(max-width:820px) {
  .site-header { position: relative; }
  .nav { flex-direction: column; padding-top: 18px; padding-bottom: 18px; gap: 18px; }
  .brand-area { order: 1; }
  .nav-links { order: 2; margin: 0; justify-content: center; gap: 8px 16px; }
  .nav-links a { font-size: 14px; }
  .brand { font-size: 27px; }
  .brand-logos img { width: 54px; height: 54px; }
  .section-index { position: static; }
  section[id] { scroll-margin-top: 20px; }
}

/* 首页题句：中文及出处用楷体；在此调整字号与间距。 */
.home-motto { padding-top: 20px; padding-bottom: 25px; text-align: center; }
.home-motto blockquote { margin: 0; }
.home-motto .motto-cn, .home-motto cite {
  font-family: KaiTi, STKaiti, "Kaiti SC", "楷体", "楷体_GB2312", serif;
  font-style: normal;
  font-weight: 400;
}
.home-motto .motto-cn { margin: 0 0 8px; font-size: clamp(24px, 2.5vw, 32px); letter-spacing: .12em; line-height: 1.7; }
.home-motto .motto-translation { margin: 0 auto 8px; max-width: 850px; font-family: Georgia, "Times New Roman", serif; font-size: 17px; line-height: 1.7; color: #53647b; }
.home-motto cite { font-size: 18px; }
.home-motto cite a { color: #666; }
.home-motto .motto-source-en { font-family: Georgia, "Times New Roman", serif; font-size: 14px; }
@media(max-width:560px) {
  .home-motto .motto-cn { letter-spacing: .03em; font-size: 24px; }
  .home-motto .motto-translation { font-size: 15px; }
}

/* 期刊官网链接：保持正文颜色，以细下划线标识可点击。 */
main a.journal-link { color: inherit; text-decoration: underline; text-decoration-color: #aab6c7; text-underline-offset: 3px; }
main a.journal-link:hover, main a.journal-link:focus-visible { color: #234e9b; text-decoration-color: currentColor; }
