body {
      margin: 0;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      background-color: #F0F0F0;
      color: #333;
    }




.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 45px;
  background: #2B2B2B;
  z-index: 1000;
}

.navbar ul {
  margin: 0;
  padding: 0 30px;
  display: flex;
  gap: 30px;
  list-style: none;
  justify-content: center;
  align-items: center;
  height: 100%; /* 高度撑满 navbar */
}



.navbar a {
  color: #fff;
  display: block;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s;
}


.navbar a:hover{
  font-size: 17px;
}
/* English 单独样式 */
.navbar a.small-link {
  margin-left: 40px;
  font-size: 14px;   /* 比其他导航项小 */
}

.navbar a.small-link:hover {
  font-size: 15px;   /* 悬停稍微放大 */
}


/* 避免导航栏遮挡内容 */
body {
  padding-top: 45px;
}

/* 给所有主要区块设置滚动时的上边距 */
#intro,
#about,
#portfolio,
#series {
  scroll-margin-top: 80px;  /* 导航栏高度+一点点缓冲 */
}

.email {
  white-space: normal; /* 允许换行 */
}

.label {
  white-space: nowrap; /* 确保“邮箱:”永远在一行 */
}

.address {
  display: inline-block;    /* 单独成一个可换行的块 */
  overflow-wrap: anywhere;  /* 地址太长时允许断行 */
}


    /* 顶部个人信息区 */
.header {
  display: flex;
  align-items: center;    /* ← 关键：竖直居中 */
  max-width: 1600px;       /* 限制内容区最大宽度 */
  margin: 0 auto;          /* 居中 */
  padding: 35px;
  background: linear-gradient(to left, #000 0%, #808080 50%, #fff 100%);
}

.profile-pic img {
  margin-left: 150px;
  width: 200px;   /* 控制头像大小 */
  height: 200px;
  border-radius: 50%; /* 圆形头像 */
  object-fit: cover;
  margin-right:60px; /* 头像和文字之间留点间距 */
}

.intro h1 {
  margin: 0;
  font-size: 30px;
}

.intro p {
  margin: 5px 0;
  font-size: 18px;
  color: #2B2B2B;
}


.quote-section {
  text-align: center;
  font-size: 24px;
  font-weight: solid;
  font-style: italic;
  margin: 50px auto;
  max-width: 800px;
  color: #808080;   /* 字体颜色，可以调浅一点 */
  line-height: 1.6;
}


/*精选作品*/

/* 精选作品区域 */
.gallery-section {
  max-width: 1200px;
  margin: -20px auto;
  padding: 0 30px;          /* 左右留空，保证按钮可见 */
  position: relative; /* 按钮绝对定位参考 */
}

/* 图片滑动容器 */
.gallery-container {
  overflow: hidden;  /* 限制图片溢出整体容器 */
  height: 330px;
  margin-top: 30px;
}

/* 滑动轨道 */
.gallery-track {
  display: flex;
  transition: transform 0.5s ease;
}

/* 单个图片容器 */
.gallery-item {
  flex: 0 0 auto;
  width: 300px;        /* 每张图片宽度 */
  margin: 15px 30px;      /* 图片间距 */
  position: relative;
  overflow: visible;   /* 内部图片可以放大 */
}

/* 图片样式 */
.gallery-item img {
  width: 100%;
  object-fit: cover;
  border: 3px solid #000000;
  transition: transform 0.3s ease;
  display: block;
  cursor: pointer;
}

/* 鼠标悬停放大 */
.gallery-item img:hover {
  transform: scale(1.05); /* 放大 5% */
}



/* 按钮样式 */
.gallery-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.2);
  color: white;
  border: none;
  padding: 10px 10px;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.3s;
  z-index: 10;
}

/* 左右按钮位置在图片两侧，不挡图片 */
.gallery-btn.prev {
  left: 0px;  /* 可根据需要调整 */
}

.gallery-btn.next {
  right: 0px; /* 可根据需要调整 */
}

/* 不可点击时透明 */
.gallery-btn[disabled] {
  opacity: 0;
  cursor: default;
}
.gallery-btn:hover { background: rgba(0,0,0,0.6); }



/* 触控设备隐藏按钮 */
@media (hover: none) and (pointer: coarse) {
  .gallery-btn {
    display: none !important;
  }
}



    /* 分隔线 */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;   /* 文字居中 */
  gap: 1rem;
  margin: 60px 0;
  color: #2B2B2B;
  font-weight: 600;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  /* 不用 position:absolute，避免被 overflow 截断 */
}

.section-divider::before,
.section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ddd;
}

/* 文字块，使用背景色遮盖横线 */
.section-divider span {
  padding: 0 14px;
  background: #F0F0F0;   /* 如果该区域不是白色，把这里改成对应背景色 */
  z-index: 1;
  line-height: 1;
  font-size: 24px;
}


.about-section {
  max-width: 900px;    /* 控制文字宽度 */
  margin: 60px auto;   /* 上下留白，居中 */
  text-align: center;  /* 居中对齐 */
  line-height: 2.0;    /* 行距大一点，松弛感 */
  font-size: 18px;   /* 比正文稍大 */
  color: #808080;         /* 柔和字体颜色 */
}

.about-section h2 {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 600;
}



    /* 分隔线 */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;   /* 文字居中 */
  gap: 1rem;
  margin: 100px 0;
  color: #2B2B2B;
  font-weight: 600;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  /* 不用 position:absolute，避免被 overflow 截断 */
}

.section-divider::before,
.section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ddd;
}

/* 文字块，使用背景色遮盖横线 */
.section-divider span {
  padding: 0 14px;
  background: #F0F0F0;   /* 如果该区域不是白色，把这里改成对应背景色 */
  z-index: 1;
  line-height: 1;
  font-size: 24px;
}





    /* 作品集 */
    .portfolio {
      max-width: 1200px;
      margin: 0 auto 60px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      column-gap:80px;
      row-gap: 60px;
      padding: 0 20px;
      background-color:transparent;
      padding-bottom: 0px;
    }

    .portfolio-item {
      text-align: center;
    }

    .portfolio-item img {
      width: 100%;
      transition: transform 0.3s ease;
       aspect-ratio: 3 / 2;
      
  border: 2px solid #000000;  
    }

    .portfolio-item img:hover {
      transform: scale(1.05);
    }

    .portfolio-item p {
      margin: 8px 0 0;
      font-size: 16px;
      color: #808080;
    }




/* 整体区块，控制系列作品区域的宽度和居中 */
.series-section {
  max-width: 1200px;   /* 最大宽度 */
  margin: 80px auto;   /* 上下间距 80px，左右自动居中 */
  padding: 0 20px;     /* 左右留点内边距，避免贴边 */
}

/* 单个系列容器 */
.series {
  margin-bottom: 80px; /* 每个系列之间的空隙 */
}

/* 系列标题 */
.series-title {
  font-size: 24px;     /* 标题字号 */
  font-weight: bold;   /* 加粗 */
  color: #808080;
  margin-bottom: 30px; /* 标题和简介的间隔 */
  text-align: center;  /* 居中显示 */
}

/* 系列简介 */
.series-desc {
  font-size: 18px;
  color: #808080;         /* 灰色字体 */
  margin-bottom: 50px; /* 简介和组图之间的间隔 */
  text-align: center;  /* 居中显示 */
  line-height: 1.6;    /* 行高，让文字更舒展 */
}

/* 组图区域 */
.series-gallery {
  display: grid;                               /* 使用网格布局 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* 自动换行，每张最小 250px，最大占满一列 */
  column-gap:50px;
  row-gap: 30px;                                /* 图片间距 */
}

/* 组图里的每张图 */
.series-gallery img {
  width: 100%;              /* 图片宽度填满列 */
  object-fit: cover;        /* 裁剪填充，不变形 */
  transition: transform 0.3s ease;
  
  border: 2px solid #000000;  
}

/* 鼠标悬停时放大一点 */
.series-gallery img:hover {
  transform: scale(1.05);
}






    footer {
  text-align: center;
  padding: 20px;
  margin-top: 20px;
  background-color: #F0F0F0; /* 可以换成你网页底色，或去掉 */
  color: #808080;
  font-size: 0.8rem;
}

.footer-line {
  height: 1px;
  background-color: #ddd; /* 分割线颜色 */
  max-width: 1200px;
  margin: 0 auto 15px auto; /* 居中并和文字留间距 */
}

/* Lightbox 按钮样式 */
.lightbox .lb-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10020;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  font-size: 34px;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}
.lightbox .lb-prev { left: 60px; }
.lightbox .lb-next { right: 60px; }
.lightbox .lb-btn:hover {
  background: rgba(0,0,0,0.8);
}
@media (hover: none) and (pointer: coarse){
  .lightbox .lb-btn {
    font-size: 26px;
    padding: 8px 10px;
  }
  .lightbox .lb-prev { left: 10px; }
  .lightbox .lb-next { right: 10px; }
}

.lb-inner {
  position: relative;
  text-align: center;
}
#lightbox-title {
  position: absolute;
  bottom: -40px;           /* 离图片底部 10px */
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  font-size: 20px;
  font-weight: 500;
  max-width: 90%;
  text-align: center;
  z-index: 10030;
  pointer-events: none;    /* 避免挡住按钮点击 */
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}


.lightbox .close {
  position: fixed;   /* 固定在窗口，不跟随图片 */
  top: 30px;         /* 距离顶部 30px */
  right: 40px;       /* 距离右侧 40px */
  color: white;
  font-size: 40px;
  cursor: pointer;
  user-select: none;
  z-index: 10030;    /* 要比图片和按钮都高 */
}

.lightbox .close:hover {
  color: #ccc;
}


#lightbox-img {
  max-width: 90%;
  max-height: 80vh;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  margin: 0 auto;
  transition: transform 0.3s ease, opacity 0.3s ease;
}



@media (hover: none) and (pointer: coarse) {




.navbar {
  height: 160px;
  background: #2B2B2B;
  z-index: 1000;
}

.navbar ul {
  padding: 0px 30px;
  gap: 40px;
}



.navbar a {
  font-size: 36px;
}


.navbar a:hover{
  font-size: 36px;
}
/* English 单独样式 */
.navbar a.small-link {
  margin-left: 50px;
  font-size: 30px;   /* 比其他导航项小 */
}

.navbar a.small-link:hover {
   font-size: 30px;   /* 比其他导航项小 */
}


/* 避免导航栏遮挡内容 */
body {
  padding-top: 160px;
}

/* 给所有主要区块设置滚动时的上边距 */
#intro,
#about,
#portfolio,
#series {
  scroll-margin-top: 200px;  /* 导航栏高度+一点点缓冲 */
}

  #lightbox-title {
    bottom: -80px;
    font-size: 42px;
  }
  footer {
    font-size: 24px;
  }  
  .portfolio-item p {
    font-size: 40px;
    margin: 16px 0 0;
  }


  .about-section {
    font-size: 42px;  
  }

  .about-section h2 {
    font-size: 42px;
    }
  .section-divider span {
    font-size: 54px;
  }

  .intro h1 {
    font-size: 60px;
  }

  .intro p {
    margin: 10px 0;
    font-size: 40px;
}


  .quote-section {
    font-size: 54px;
    margin: 130px auto;
  }

  .series-title {
    font-size: 42px; 
  }

  .series-desc {
    font-size: 42px;
  }


  .profile-pic img {
    margin-left: 0;
    width: 300px;   /* 控制头像大小 */
    height: 300px;
    margin-right:50px; /* 头像和文字之间留点间距 */
  }

    

  .gallery-item {
    width: 500px;        /* 每张图片宽度 */
  }


 .portfolio {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  }


  .gallery-container {
    height: 550px;
  }

  .series-gallery {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  }

  .section-divider {
    margin: 120px 0;
  }

  .section-divider::before,
  .section-divider::after {
    height: 4px;
  }


  .header {
    padding: 90px;
    background: #808080
  }


}