/* ============= Base & Vars ============= */
*{margin:0;padding:0;}
ul,li{list-style:none;}

html, body{
  font-family: serif;
}

:root{
  --nav-h:70px;
  --page-hpad-desktop:90px;
  --section-vspace:36px;
}

/* ============= Nav ============= */
.nav1-show{display:flex;}
.nav2-show{display:none;}
nav{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h);
  display:flex; justify-content:space-around; align-items:center;
  width:100vw; background:#fff; box-shadow:0 5px 5px #c5c2c2; z-index:9999;
}
.nav-ul{display:flex;}
.mobile-nav{display:none;}
.nav-item{margin-right:20px;}
nav a{font-weight:600; text-decoration:none; color:#000;}
nav a:hover{color:#4294e5;}

/* ============= Anchor offset ============= */
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 14px);}
section[id]{scroll-margin-top:calc(var(--nav-h) + 14px);}

/* ============= Header (About) ============= */
.body{
  display:flex;
  padding: calc(var(--nav-h) + 20px) var(--page-hpad-desktop) 0;
}
.body .left{width:30vw; display:flex; flex-direction:column; align-items:center;}
.body .right{width:70vw; margin-top:50px; padding-bottom:var(--section-vspace);}

.head-img{
  background:url("/?originalUrl=https%3A%2F%2Fxid32.github.io%2Fhead.jpeg"); background-size:100% 100%;
  width:200px; height:200px; border-radius:100px; margin:40px 0 12px;
}
.name{font-size:22px; margin:0 0 8px;}
.icon{display:flex; justify-content:center; gap:10px;}
.icon-item img{width:25px; height:25px;}
.biography-title{font-size:32px; font-weight:normal;}
.biography{font-size:18px; margin-bottom:30px;}

/* ============= Showcase Sections ============= */
.showcase{
  display:flex;
  padding: 0 var(--page-hpad-desktop);
  padding-bottom: var(--section-vspace);
}
.showcase:nth-of-type(2n+1){background:#f7f7f7;}
.showcase:nth-of-type(2n){background:#fff;}

.showcase-left{
  width:30vw;
  padding-top: var(--section-vspace);
  display:flex; flex-direction:column; align-items:flex-start;
}
.showcase-right{
  width:70vw;
  padding-top: var(--section-vspace);
}
.showcase-left-title{font-size:35px; color:#1b6535;}
.showcase-left-desc{font-size:26px; color:#b2b2b2;}
.showcase-right td{font-size:16px;}

/* ============= News (Neutral Card Style) ============= */
#News .news-list{list-style:none; margin:0; padding:0;}
#News .news-item{
  margin-bottom:14px;
  padding:10px 14px;
  border-radius:8px;
  background:#fafafa;
  transition:background .2s ease;
}
#News .news-item:hover{background:#f2f2f2;}
#News .news-date{
  color:#6b6b6b;
  font-size:14px;
  margin-bottom:4px;   /* 原来是 3px，太挤了 */
  display:block;
}
#News .news-text{color:#333;}

/* NEW: accent text (replaces inline style) */
#News .news-accent{
  color:#E55C5C;
}

/* NEW: Show more / details (minimal, not ugly) */
#News .news-more{
  margin-top:6px;
}

#News .news-more-summary{
  cursor:pointer;
  color:#4169E1;
  font-size:14px;
  list-style:none; /* helps in some browsers */
  outline:none;
}

/* Remove default marker in Chrome/Safari, keep clean */
#News .news-more-summary::-webkit-details-marker{
  display:none;
}

/* Optional: add a subtle caret using text only (no icons) */
#News .news-more-summary::after{
  content:" ▾";
  font-size:12px;
  color:#6b6b6b;
}

#News .news-more[open] .news-more-summary::after{
  content:" ▴";
}

/* ===== News: Show more -> Show less when expanded (CSS only) ===== */
#News .news-more[open] .news-more-summary{
  font-size:0; /* hide original "Show more" text */
}

#News .news-more[open] .news-more-summary::before{
  content:"Show less";
  font-size:14px; /* restore readable size */
  color:#4169E1;
}


#News .news-list-older{
  margin-top:10px;
}

/* ============= Contact (Desktop/Desktop) ============= */
#Contact .showcase-right {
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
}
#Contact .contact-ul {padding-left:0; margin-top:10px;}
#Contact .contact-item {
  display:flex;
  align-items:center;
  margin:14px 0;
}
#Contact .contact-svg {
  width:28px !important;
  height:28px !important;
  margin-right:12px !important;
  flex-shrink:0;
}
#Contact .contact-item a {
  font-size:18px;
  color:#4169E1;
  text-decoration:none;
  word-break:break-word;
}
#Contact .contact-item a:hover {text-decoration:underline;}

/* ============= Services (Clean Academic Style) ============= */
#Services .service-title {
  font-size:18px;
  font-weight:600;
  margin-bottom:14px;
  color:#444;
}
#Services .service-list {
  margin:0;
  padding-left:18px;
  line-height:1.55;
  font-size:16px;
  color:#333;
}
#Services .service-list li {margin-bottom:3px;}

/* ============= Mobile ≤ 900px ============= */
@media (max-width:900px){

  .nav1-show{display:none;}
  .nav2-show{display:flex;}
  .mobile-nav{display:flex; justify-content:center; flex-wrap:wrap; padding: calc(var(--nav-h) + 20px) 26px 0;}

  html{scroll-padding-top:80px;}
  section[id]{scroll-margin-top:80px;}

  .body{display:block; padding:30px 20px 0;}
  .body .left{width:100%;}
  .body .right{width:100%; margin-top:50px;}

  .biography-title{text-align:center; font-size:42px;}
  .biography{padding:0 20px;}

  .showcase{display:block; padding:0 14px 24px;}
  .showcase-left{width:100%; text-align:center; align-items:center;}
  .showcase-right{width:100%; padding-top:16px;}

  /* Publications mobile → card layout */
  #Publications table tr{
    display:block;
    margin-bottom:26px;
    padding-bottom:18px;
    border-bottom:1px solid #e6e6e6;
  }
  #Publications table td{
    display:block;
    width:100% !important;
    padding:6px 0 !important;
    text-align:left !important;
  }
  #Publications img{
    width:100% !important;
    height:auto !important;
    border-radius:8px;
    margin-bottom:10px;
  }

  /* Projects mobile → card layout (NEW, important) */
  #Tools table tr{
    display:block;
    margin-bottom:28px;
    padding-bottom:20px;
    border-bottom:1px solid #e6e6e6;
  }
  #Tools table td{
    display:block;
    width:100% !important;
    padding:6px 0 !important;
    text-align:left !important;
  }
  #Tools img{
    width:100% !important;
    height:auto !important;
    border-radius:8px;
    margin-bottom:10px;
  }
  #Tools papertitle,
  #Tools strong{
    font-size:18px;
    display:block;
    margin-bottom:6px;
    color:#1b6535;
  }
  #Tools p{
    font-size:15px;
    line-height:1.55;
    color:#444;
  }

  /* Contact Mobile */
  #Contact .showcase-right{width:100%; padding-top:12px;}
  #Contact .contact-item{margin:10px 0;}
  #Contact .contact-svg{width:22px !important; height:22px !important;}
  #Contact .contact-item a{font-size:16px;}
}

/* ============= Footer ============= */
footer{text-align:center; margin:20px; color:#8b9596;}