/* ===============================
   CSS 变量定义区 - 主题配色与样式
   =============================== */
   :root {
    /* 主色调 */
    --primary-color: #2c1b3f;           /* 主色 */
    --primary-light: #4e2b5d;           /* 主色浅色调 */
    --primary-dark: #1a0f3d;            /* 主色深色调 */
  
    /* 强调色 */
    --accent-color: #a58ea7;            /* 强调色 */
    --accent-light: #c4a8c7;            /* 强调色浅色 */
    --accent-border: #7a4b65;           /* 强调色边框 */
  
    /* 文字颜色 */
    --text-primary: #3b3b3b;             /* 主要文本颜色 */
    --text-secondary: #666666;           /* 次要文本颜色 */
    --text-light: #ffffff;               /* 浅色文本 */
  
    /* 背景色 */
    --background-light: #ffffff;        /* 浅色背景 */
    --background-card: #ffffff;         /* 卡片背景 */
  
    /* 边框颜色 */
    --border-color: #e1e8ed;            /* 边框颜色 */
  
    /* 阴影效果 */
    --shadow-light: 0 2px 10px rgba(44, 27, 63, 0.1);    /* 轻微阴影 */
    --shadow-medium: 0 8px 30px rgba(44, 27, 63, 0.15);  /* 中度阴影 */
    --shadow-heavy: 0 20px 60px rgba(44, 27, 63, 0.2);   /* 强阴影 */
  
    /* 渐变色 */
    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-light) 100%);
    --gradient-hero: linear-gradient(135deg, #2c1b3f 0%, #4e2b5d 50%, #55315d 100%);
  
    /* 圆角 */
    --border-radius: 12px;              /* 默认圆角 */
    --border-radius-large: 20px;        /* 大圆角 */
  
    /* 过渡动画 */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
    /* 字体族 */
    --font-primary: 'Playfair Display', serif;  /* 标题等主要字体 */
    --font-secondary: 'Inter', sans-serif;      /* 正文等辅助字体 */
  }
  

/* ================================
   中文字体样式配置 - 针对中文内容的字体切换
   ================================ */

/* 定义中文字体变量，优先使用 Noto Serif TC 和 Noto Sans TC */
.chinese-font {
  --font-primary: 'Noto Serif TC', 'Playfair Display', serif;  /* 中文衬线体及备用衬线体 */
  --font-secondary: 'Noto Sans TC', 'Inter', sans-serif;      /* 中文无衬线体及备用无衬线体 */
}

/* 在包含 .chinese-font 的根元素下，正文文本使用中文无衬线字体 */
.chinese-font body {
  font-family: var(--font-secondary);
}

/* 标题元素统一使用中文衬线字体 */
.chinese-font h1,
.chinese-font h2,
.chinese-font h3,
.chinese-font h4,
.chinese-font h5,
.chinese-font h6 {
  font-family: var(--font-primary);
}

/* 特殊大标题（hero-title）同样使用中文衬线字体 */
.chinese-font .hero-title {
  font-family: var(--font-primary);
}


/* ======================
   Reset 和基础样式
   ====================== */

/* 全局重置：去除默认 margin 和 padding，设置盒模型为 border-box */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* body 基础样式：字体、行高、颜色、背景色，禁止横向溢出滚动 */
body {
  font-family: var(--font-secondary);
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--background-light);
  overflow-x: hidden;
}

/* ======================
   导航栏样式
   ====================== */

/* 导航栏容器，固定顶部，半透明背景，毛玻璃效果，底部边框，高层级覆盖 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-color);
  z-index: 1000;
  transition: var(--transition);
}

/* 导航内容最大宽度，水平居中，内边距，Flex 布局左右分散对齐，固定高度 */
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

/* 导航左侧区域中的更新时间文本样式 */
.nav-left .last-updated {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 400;
  padding: 0.25rem 0.75rem;
  background: rgba(44, 27, 63, 0.05);   /* 浅色背景 */
  border-radius: 15px;
  border: 1px solid rgba(44, 27, 63, 0.1);
}

/* 导航菜单列表，水平排列，去掉默认列表样式，元素间距 */
.nav-menu {
  display: flex;
  list-style: none;
  gap: 2rem;
}

/* 导航链接样式：无下划线，主文本色，中等粗细，适中字号，内边距，圆角，过渡效果 */
.nav-link {
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  transition: var(--transition);
  position: relative;
}

/* 导航链接悬停及激活状态：字体颜色变主色，背景变浅色 */
.nav-link:hover,
.nav-link.active {
  color: var(--primary-color);
  background: rgba(44, 27, 63, 0.05);
}

/* 语言切换按钮样式：主色渐变背景，白色文字，无边框，内边距，圆角，字体加粗，指针效果，过渡动画 */
.language-switch {
  background: var(--gradient-primary);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.875rem;
}

/* 语言切换按钮悬停时上移2px并添加阴影 */
.language-switch:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}


/* ===============================
   背景圖：靜態排列網格
   =============================== */
   .bg-pictures {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(auto-fill, 520px); /* 固定每張圖寬度約 300px */
    grid-auto-rows: 300px;
    justify-content: center; /* 水平居中整個 grid */
    align-content: center;   /* 垂直居中整個 grid */
    gap: 20px; /* 圖片之間的間距 */
    opacity: 1;
    pointer-events: none;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
  }
  
  /* 單張背景圖樣式 */
  .background-picture {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保證圖片不被裁剪，完整顯示 */
  }
  
  
  /* ===========================
     Hero 主页主视觉区域
     =========================== */
  .hero {
    min-height: 100vh;        /* 最小高度为视口高度 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background: var(--gradient-hero);
    color: white;
    overflow: hidden;
  }
  
  /* Hero背景装饰的多重径向渐变 */
  .hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
      radial-gradient(circle at 20% 80%, rgba(165, 142, 167, 0.15) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, rgba(122, 75, 101, 0.1) 0%, transparent 50%);
    z-index: 1;
  }
  
  /* Hero内容容器，确保置于背景之上 */
  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 2rem;
  }
  
  /* 主标题，使用主字体，响应式字号，渐变文字色，文字阴影 */
  .hero-title {
    font-family: var(--font-primary);
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #e9ecef 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.02em;
  }
  
  /* 副标题，响应式字号，细体，半透明斜体字，字间距 */
  .hero-subtitle {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-weight: 300;
    margin-bottom: 2rem;
    opacity: 0.9;
    font-style: italic;
    letter-spacing: 0.05em;
  }
  
  /* Hero下方链接容器 */
  .hero-links {
    margin-top: 2rem;
  }
  
  /* ORCID链接按钮样式，半透明背景，圆角，模糊背景 */
  .orcid-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius);
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    backdrop-filter: blur(10px);
  }
  
  /* ORCID链接悬停效果，背景变亮，上移，阴影 */
  .orcid-link:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }
  
  /* ORCID图标尺寸 */
  .orcid-icon {
    width: 20px;
    height: 20px;
  }
  
  /* ===========================
     页面底部滚动指示器 - 向下箭头
     =========================== */
  .scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }
  
  /* 向下箭头竖线样式，带动画和圆角 */
  .scroll-arrow {
    width: 3px;             /* 线宽 */
    height: 40px;           /* 线高 */
    background: rgba(255, 255, 255, 0.6);
    position: relative;
    animation: scroll-bounce 2s infinite;
    cursor: pointer;
    transition: var(--transition);
    border-radius: 2px;
    margin: 0 auto;         /* 水平居中 */
  }
  
  /* 向下箭头悬停时加深颜色并放大 */
  .scroll-arrow:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(1.1);
  }
  
  /* 箭头尖端，通过伪元素绘制，旋转45度 */
  .scroll-arrow::after {
    content: '';
    position: absolute;
    bottom: -3px;            /* 下方偏移 */
    left: 50%;               /* 水平居中 */
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    border-right: 3px solid rgba(255, 255, 255, 0.6);
    border-bottom: 3px solid rgba(255, 255, 255, 0.6);
    background: transparent;
  }
  
  /* 箭头尖端悬停时颜色加深 */
  .scroll-arrow:hover::after {
    border-right-color: rgba(255, 255, 255, 0.8);
    border-bottom-color: rgba(255, 255, 255, 0.8);
  }
  
  /* 向下箭头浮动动画 */
  @keyframes scroll-bounce {
    0%, 100% {
      opacity: 0.6;
      transform: translateY(0);
    }
    50% {
      opacity: 1;
      transform: translateY(10px);
    }
  }
  

/* ===========================
   主要内容区域容器
   =========================== */
   .main-content {
    position: relative;
    z-index: 1;
    background: var(--background-light);
  }
  
  /* 各个独立内容区块样式 */
  .section {
    padding: 5rem 0;                             /* 上下内边距 */
    opacity: 0;                                 /* 初始隐藏，等待动画 */
    transform: translateY(30px);                /* 初始向下偏移 */
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑过渡 */
  }
  
  /* 触发动画进入状态 */
  .section.animate-in {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* 统一内容最大宽度和水平居中，左右留边 */
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
  }
  
  /* 区块标题容器，居中显示 */
  .section-header {
    text-align: center;
    margin-bottom: 4rem;
  }
  
  /* 区块标题主样式，响应式字体大小，主色调 */
  .section-title {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 5vw, 3.5rem);  /* 根据视口自适应字体大小 */
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 1rem;
    position: relative;
  }
  
  /* 标题下方渐变装饰条 */
  .section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;                      /* 下方偏移 */
    left: 50%;                         /* 水平居中 */
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--gradient-accent);
    border-radius: 2px;
  }
  
  /* ===========================
     通用卡片样式 - 基础浮动框
     =========================== */
  .card {
    background: var(--background-card);
    border-radius: var(--border-radius-large);
    padding: 2rem;
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    border-left: 4px solid transparent; /* 默认左侧边框透明 */
  }
  
  /* 卡片悬停效果，提升层级，左侧边框变色 */
  .card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
    border-left-color: var(--accent-color); /* 左边框高亮为主色 */
  }
  
  /* 特殊卡片的默认边框颜色禁用，统一用悬停显示 */
  /* 这两个类预留给未来特殊样式，当前无默认边框 */
  .card-primary {
    /* 默认无边框色，悬停时显示 */
  }
  
  .card-accent {
    /* 默认无边框色，悬停时显示 */
  }
  
  /* 卡片大小变体 */
  /* 小尺寸卡片，内边距较小 */
  .card-small {
    padding: 1.5rem;
  }
  
  /* 大尺寸卡片，内边距较大 */
  .card-large {
    padding: 2.5rem;
  }  

/* ===========================
   About Me 部分 - 个人介绍区域
   =========================== */

/* 容器：使用 Grid 布局，分两列，左边1份，右边2份，中间间距4rem，垂直居中对齐 */
.about-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: center; /* 垂直居中对齐 */
}

/* 左侧图片容器，使用 flex 居中图片 */
.about-image {
  position: relative;
  display: flex;
  justify-content: center; /* 水平居中 */
}

/* 个人头像样式 */
.profile-photo {
  width: 280px;              /* 固定宽度 */
  height: 350px;             /* 固定高度 */
  object-fit: cover;         /* 保持图片比例裁剪填充 */
  border-radius: 50%;        /* 圆形头像 */
  box-shadow: var(--shadow-heavy); /* 阴影效果，变量定义 */
  transition: var(--transition);    /* 过渡动画，变量定义 */
  border: 3px solid var(--accent-color); /* 边框颜色 */
}

/* 鼠标悬停头像时的放大和阴影变化 */
.profile-photo:hover {
  transform: scale(1.01); /* 放大5% */
  box-shadow: 0 25px 80px rgba(44, 27, 63, 0.25); /* 自定义阴影 */
}

/* 头像黄色边框，当前隐藏 */
.photo-frame {
  display: none; /* 暂时移除黄色边框 */
}

/* ===========================
   About Me文字区域 - 个人介绍文字样式
   =========================== */

/* 文字容器：字体大小1.1rem，行高1.8，主文本颜色 */
.about-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-primary);

  display: flex;
  align-items: center;      /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  height: 100%;             /* 确保占满父容器高度 */
}

/* 段落间距 */
.about-text p {
  margin-bottom: 1.5rem;
}

/* 文字链接样式：主色，去掉下划线，加粗，带过渡效果 */
.text-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition);
}

/* 链接悬停时，颜色变为强调色，并显示下划线 */
.text-link:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

/* ===========================
   研究成果区域整体容器
   =========================== */
   .research-content {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* 各成果卡片间距 */
  }
  
  /* 单个研究成果卡片 */
  .research-item {
    background: var(--background-card);
    border-radius: var(--border-radius-large);
    padding: 2rem;
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    border-left: 4px solid transparent; /* 默认左边框透明 */
  }
  
  /* 研究成果卡片悬停效果 */
  .research-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
    border-left-color: var(--accent-color); /* 左边框亮起主色 */
  }
  
  /* 研究成果元信息区域：状态、年份等 */
  .research-meta {
    display: flex;
    align-items: center;
    gap: 1rem;          /* 元信息各项间距 */
    margin-bottom: 1rem;
  }
  
  /* 研究状态标签基础样式 */
  .research-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase; /* 全部大写 */
    letter-spacing: 0.5px;     /* 字母间距 */
  }
  
  /* 预印本状态样式 */
  .research-status.preprint {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
  }
  
  /* 论文/学位论文状态样式 */
  .research-status.thesis {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
    color: white;
  }
  
  /* 研究年份样式 */
  .research-year {
    color: var(--text-secondary);
    font-weight: 500;
  }
  
  /* 研究标题样式 */
  .research-title {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 1rem;
    line-height: 1.4;
  }
  
  /* 研究链接区域，水平排列 */
  .research-links {
    display: flex;
    gap: 1rem; /* 链接间距 */
  }
  
  /* 单个研究链接按钮 */
  .research-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--gradient-primary);
    color: white;
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: 500;
    font-size: 0.875rem;
    transition: var(--transition);
  }
  
  /* 链接悬停动画 */
  .research-link:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
  }
  
  /* 链接图标大小 */
  .link-icon {
    width: 16px;
    height: 16px;
  }
  
  
  /* ===========================
     讲演记录部分容器 - 网格布局
     =========================== */
  .talks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem; /* 卡片间距 */
  }
  
  /* 单个讲演卡片基础样式 */
  .talk-card {
    background: var(--background-card);
    border-radius: var(--border-radius-large);
    padding: 1.5rem;
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    border-left: 4px solid transparent; /* 默认左边框透明 */
  }
  
  /* 讲演卡片悬停时左边框变色 */
  .talk-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
    border-left-color: var(--accent-color);
  }
  
  /* 讲演卡片头部容器 */
  .talk-header {
    margin-bottom: 1rem;
  }
  
  /* 讲演标题样式 */
  .talk-title {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    line-height: 1.4;
  }
  
  /* 讲演日期样式 */
  .talk-date {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
  }
  
  /* 讲演场所名称样式 */
  .talk-venue {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
  }
  
  /* 讲演地点及图标容器，水平对齐 */
  .talk-location {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
  }
  
  /* 地点图标尺寸 */
  .location-icon {
    width: 14px;
    height: 14px;
  }
  

/* ===========================
   研讨会区域整体容器
   =========================== */
   .seminars-content {
    display: flex;
    flex-direction: column;
    gap: 3rem; /* 各研讨会卡片之间间距 */
  }
  
  /* 单个研讨会卡片 */
  .seminar-item {
    background: var(--background-card);
    border-radius: var(--border-radius-large);
    padding: 2rem;
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    display: flex;
    gap: 1rem; /* 左侧状态圆点与内容之间间距 */
    border-left: 4px solid transparent; /* 默认左边框透明 */
  }
  
  /* 研讨会卡片悬停时效果 */
  .seminar-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
    border-left-color: var(--accent-color); /* 左边框点亮强调色 */
  }
  
  /* 研讨会状态指示圆点 */
  .seminar-status {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 0.5rem;
    flex-shrink: 0; /* 防止缩小 */
  }
  
  /* 活跃状态圆点特效 */
  .seminar-status.active {
    background: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(165, 142, 167, 0.2); /* 发光扩散 */
  }
  
  /* 研讨会内容容器，灵活填充剩余空间 */
  .seminar-info {
    flex: 1;
  }
  
  /* 研讨会标题容器 */
  .seminar-title {
    margin-bottom: 0.5rem;
  }
  
  /* 研讨会标题链接 */
  .seminar-link {
    font-family: var(--font-primary);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
  }
  
  /* 标题链接悬停变色 */
  .seminar-link:hover {
    color: var(--accent-color);
  }
  
  /* 研讨会详细信息：时间、地点等 */
  .seminar-details {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
  }
  
  /* 研讨会描述正文 */
  .seminar-description {
    margin-top: 1rem;
    line-height: 1.6;
  }
  
  /* 研讨会描述段落间距 */
  .seminar-description p {
    margin-bottom: 1rem;
  }
  
  /* 研讨会组织者信息区域 */
  .seminar-organizers {
    margin: 1rem 0;
    padding: 1rem;
    background: rgba(44, 27, 63, 0.05);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
  }
  
  /* 最新研讨会特别高亮区域 */
  .latest-seminar {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: rgba(165, 142, 167, 0.05);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--accent-color);
  }
  
  /* 最新研讨会标题 */
  .latest-seminar h4 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-weight: 600;
  }
  
  /* 具体讲座信息 */
  .seminar-talk {
    font-size: 0.9rem;
    line-height: 1.6;
  }
  
  /* 讲座时间 */
  .talk-time {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
  }

    /* 讲座地點 */
    .talk-location {
      font-weight: 600;
      color: var(--primary-light);
      margin-bottom: 0.5rem;
    }
  
  /* 讲座发言人 */
  .talk-speaker {
    margin-bottom: 0.5rem;
    font-weight: 500;
  }
  
  /* 最新讲座标题 */
  .talk-title-latest {
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
  }
  
  /* 讲座摘要内容，顶部边框分割 */
  .talk-abstract {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(44, 27, 63, 0.1);
  }  

/* ===========================
   Contact 部分 - 联系方式区域
   =========================== */
   .contact-content {
    display: flex;
    justify-content: center; /* 居中对齐整个联系内容容器 */
    gap: 2rem; /* 如果有多个 contact-item，建议加个间距 */
  }
  
  /* Contact 卡片统一样式 */
  .contact-item {
    display: flex;
    align-items: center;
    gap: 1rem; /* 图标与文字之间的间距 */
    padding: 1.5rem 2rem;
    background: var(--background-card);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-light);
    transition: var(--transition);
    border-left: 4px solid transparent; /* 默认透明左边框 */
  }
  
  /* Contact 卡片悬停时，左边边框亮紫色且提升 */
  .contact-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
    border-left-color: var(--accent-color);
  }
  
  /* 联系方式图标样式 */
  .contact-icon {
    width: 24px;
    height: 24px;
    color: var(--primary-color);
    flex-shrink: 0; /* 防止图标被压缩 */
  }
  
  /* 联系方式文字样式 */
  .contact-text {
    font-weight: 500;
    color: var(--text-primary);
  }
  
  /* ===========================
     Footer 页脚区域
     =========================== */
  .footer {
    background: var(--primary-color);
    color: white;
    text-align: center;
    padding: 2rem 0;
  }
  
  .footer p {
    opacity: 0.8; /* 文字半透明，视觉上不抢眼 */
    margin: 0; /* 避免默认段落上下间距 */
  }
  

/* ===================
   响应式设计
   =================== */

/* 当视口宽度最大为768px（中小屏设备）时生效 */
@media (max-width: 768px) {
  /* 隱藏更新時間 */
  .nav-left .last-updated {
    display: none;
  }
  
  /* 导航栏容器调整：
     - 左右内边距缩小至1rem
     - 允许换行以适应狭窄屏幕
     - 高度自动调整，最小高度70px */
  .nav-container {
    padding: 0 1rem;
    flex-wrap: wrap;
    height: auto;
    min-height: 70px;
  }

  /* 导航菜单调整：
     - 重新排序至第三项，确保其在下方
     - 宽度100%，让菜单横向占满整行
     - 水平居中排列菜单项
     - 上下内边距1rem，菜单项间距1rem */
  .nav-menu {
    order: 3;
    width: 100%;
    justify-content: center;
    padding: 1rem 0;
    gap: 1rem;
  }

  /* 导航左右两侧区域均分宽度 */
  .nav-left, .nav-right {
    flex: 1;
  }

  /* 右侧导航内容右对齐 */
  .nav-right {
    text-align: right;
  }

  /* Hero区标题字体缩小 */
  .hero-title {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }

  /* About区内容变为单列显示，间距加大，文字居中 */
  .about-content {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }

  /* 头像尺寸缩小 */
  .profile-photo {
    width: 240px;
    height: 300px;
  }

  /* Talks区改为单列，方便竖屏浏览 */
  .talks-grid {
    grid-template-columns: 1fr;
  }

  /* Seminars区卡片内布局变为纵向 */
  .seminar-item {
    flex-direction: column;
    gap: 1rem;
  }

  /* Seminars状态指示器顶部对齐 */
  .seminar-status {
    align-self: flex-start;
  }

  /* 内容容器内边距缩小 */
  .container {
    padding: 0 1rem;
  }
}

/* 当视口宽度最大为480px（手机小屏）时生效 */
@media (max-width: 480px) {
  /* 隱藏更新時間 */
  .nav-left .last-updated {
    display: none;
  }
  
  /* 导航菜单项间距进一步缩小 */
  .nav-menu {
    gap: 0.5rem;
  }

  /* 导航链接内边距和字体大小缩小 */
  .nav-link {
    padding: 0.5rem;
    font-size: 0.875rem;
  }

  /* 各Section上下内边距减少，适应小屏 */
  .section {
    padding: 3rem 0;
  }

  /* 研究卡片、讲演卡片、研讨会卡片内边距减小 */
  .research-item,
  .talk-card,
  .seminar-item {
    padding: 1.5rem;
  }

  /* 头像尺寸进一步缩小 */
  .profile-photo {
    width: 200px;
    height: 250px;
  }
}

/* ===================
   页面加载动画控制
   =================== */

/* 页面未加载完成时，所有.section区域透明且向下平移50px，隐藏状态 */
body:not(.loaded) .section {
  opacity: 0;
  transform: translateY(50px);
}

/* 页面加载完成后，给.section添加动画：淡入向上移动 */
body.loaded .section {
  animation: fadeInUp 0.8s ease-out forwards;
}

/* 定义淡入向上动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===========================
   辅助功能 - 减少动画偏好
   =========================== */

/* 用户系统开启“减少动画”偏好时，强制关闭所有动画和过渡效果 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;          /* 动画时长极短 */
    animation-iteration-count: 1 !important;        /* 只播放一次 */
    transition-duration: 0.01ms !important;         /* 过渡时间极短 */
  }
  
  /* 禁用特定组件动画 */
  .scroll-arrow,
  .shape,
  .bg-pictures-track {
    animation: none !important;
  }
}

/* =====================
   焦点样式 - 无障碍增强
   ===================== */

/* 给可聚焦的导航链接、语言切换、研究链接、研讨会链接添加明显的聚焦边框 */
.nav-link:focus,
.language-switch:focus,
.research-link:focus,
.seminar-link:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* ===================
   打印样式调整
   =================== */

/* 打印时隐藏导航栏、背景动画、滚动指示器，减少打印杂乱 */
@media print {
  .navbar,
  .bg-animation,
  .scroll-indicator {
    display: none;
  }
  
  /* Hero区高度自适应，取消满屏 */
  .hero {
    min-height: auto;
    padding: 2rem 0;
  }
  
  /* Section区内边距减少，避免分页中断 */
  .section {
    padding: 1rem 0;
    page-break-inside: avoid; /* 避免分页中断section内容 */
  }
}