/* static/css/style.css */

/* 1. 字体声明：优先使用 Sitka Text */
body {
  font-family: "Charter", "Sitka Text", serif;
  margin: 0;
  padding: 0;
}

.hero-header {
  /* 渐变色：粉-紫-蓝 */
  background: linear-gradient(135deg, #f8c4d1 0%, #d6c9fb 50%, #c5d2fb 100%);
  /* 关键：使用 100vh 确保正好占满一屏，上下 padding 缩小到 2rem */
  padding: 2rem; 
  height: 100vh; 
  min-height: 600px; /* 防止在极小屏幕上重叠 */
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.container.is-max-desktop {
  max-width: 1200px !important;
}

/* 2. 项目标题：极致压缩字距，防止超出 */
.project-name {
  font-size: 8.5rem; 
  font-weight: 900;
  line-height: 0.8;    /* 进一步压缩行高 */
  margin-bottom: 0.5rem; /* 大幅减小标题与副标题间距 */
  color: #000000 !important;
  letter-spacing: -6px; /* 必须开启！负字距防止标题过长并增加雕刻感 */
  margin-left: -10px; 
}

/* 3. 副标题：紧贴标题，压缩下方间距 */
.project-subtitle {
  font-size: 1.8rem;
  font-weight: 700 !important;
  line-height: 1.15;    /* 压缩副标题内部行高 */
  margin-bottom: 1.2rem; /* 大幅减小副标题与作者列表间距 */
  color: #000000 !important;
  max-width: 1000px;
}

/* 4. 作者列表：彻底清理重复定义，极致紧凑 */
.author-info {
  font-size: 1.1rem; /* 保持字号 */
  font-weight: 600;
  color: #000000 !important;
  
  /* 核心：将行高降至极限 (1.1 甚至 1.05)，消除文字上下的空气感 */
  line-height: 1.1 !important; 
  
  /* 压缩整块区域与上下元素的间距 */
  margin-top: 0.5rem;
  margin-bottom: 1.2rem;
  
  /* 确保没有内边距撑开高度 */
  padding: 0;
}

.authors {
  /* 消除段落自带的下方间距 */
  margin-bottom: 0.1rem !important;
}

/* 3. 作者链接：默认黑色 */

.author-link {

  color: #000000 !important; /* 强制黑色 */

  text-decoration: none;

  transition: color 0.3s ease;

  display: inline-block;

  margin-right: 5px;

}

/* Hover 时变为 LOKI 风格的紫色 */

.author-link:hover {

  color: #9623fb7c !important; /* LOKI 风格紫色 */

  text-decoration: none;

}



.label-morandi {
  color: #9623fb !important; 
  font-style: italic;
  font-weight: 900;
  margin-right: 8px;
  /* 之前教的物理加粗，让它更显眼 */
  text-shadow: 0.4px 0 0 #9623fb; 
}

.affiliations {
  margin-top: 0.8rem !important; /* 让单位紧贴名字 */
}

.affiliation-text {
  color: #000000;
  font-weight: 700;
}

.note {
  font-size: 1.0rem;
  color: #666666 !important;
  margin-top: 0.8rem; /* 让备注紧贴 */
}

/* 5. 胶囊按钮：增大字体与图标 */
.buttons-container {
  display: flex;
  /* 调整这里：增加 gap 实现“分散布局” */
  gap: 35px; 
  
  flex-wrap: wrap;
  margin-top: 2rem; /* 增加按钮组与上方作者信息的距离，进一步减缓压抑感 */
}

.button-capsule {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 3px solid #666666; 
  
  /* 增加内边距，让按钮整体更宽大 */
  padding: 12px 30px; 
  border-radius: 50px;
  font-weight: bold;
  
  /* 1. 增大字体 */
  font-size: 1.25rem; 
  
  display: inline-flex;
  align-items: center;
  
  /* 2. 增大图标与文字之间的间距 */
  gap: 12px; 
  text-decoration: none !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* 3. 专门针对内部图标容器的大小调整 */
.button-capsule .icon {
  font-size: 1.4rem; /* 图标比文字稍微大一点点，视觉上更平衡 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 4. 确保学术图标 ai 和 font-awesome 图标大小一致 */
.button-capsule .icon i {
  vertical-align: middle;
}

/* Hover 状态保持 */
.button-capsule:hover {
  background-color: #9623fb !important; 
  color: #ffffff !important; 
  border-color: #b463fb; 
  transform: translateY(-3px); 
  box-shadow: 0 8px 20px rgba(150, 35, 251, 0.3);
}

/* Hover 时图标颜色同步变白 */
.button-capsule:hover .icon i {
  color: #ffffff !important;
}

/* 6. Logo：按照你红色圆圈的位置进行绝对定位 */
.project-logo{
  position: absolute;
  left: 2%;        /* 靠左移动 */
  top: 50%;
  transform: translateY(-50%);
  width: 35%;      /* 宽度控制在一屏内 */
  max-width: 420px;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 15px 40px rgba(0,0,0,0.1);
  border: 6px solid rgba(255, 255, 255, 0.4);
}




/* --- 响应式适配 (Mobile Responsive) --- */

@media screen and (max-width: 768px) {
  /* 1. 让第一屏高度自适应，不要锁定 100vh，否则内容多会溢出 */
  .hero-header {
    height: auto;
    min-height: 100vh;
    padding: 3rem 1rem;
    display: block; /* 取消 flex，改用块级排布 */
  }

  /* 2. 重置 Logo：取消绝对定位，让它回到文档流中居中显示 */
  .project-logo {
    position: relative; /* 取消 absolute */
    left: 0;
    top: 0;
    transform: none;
    display: block;
    margin: 0 auto 2rem auto; /* 居中并增加下方间距 */
    width: 60%; /* 手机端缩小一点比例 */
    max-width: 250px;
    border-width: 6px; /* 缩小边框 */
  }

  /* 3. 调整标题字号：8.5rem 在手机上太大了，必须缩小 */
  .project-name {
    font-size: 3.5rem; /* 缩小字号 */
    text-align: center;
    letter-spacing: -1px;
    margin-left: 0;
  }

  /* 4. 调整副标题和作者：居中对齐 */
  .project-subtitle {
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 2rem;
  }

  .author-info {
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.5;
  }

  /* 5. 按钮：居中排列 */
  .buttons-container {
    justify-content: center;
    gap: 15px;
  }

  .button-capsule {
    padding: 8px 20px;
    font-size: 1rem;
  }
}