/* ===== 基础 ===== */

html, body{
  margin: 0; padding: 0; font-family: Arial, system-ui, 
  -apple-system, Segoe UI, Roboto, Helvetica, sans-serif;
}

.container{
  width: 80%; 
  max-width: 800px;
  margin: 0 auto; 
  padding-top: 40px; 
  text-align: left;
}

.page-header{
  margin-top: 60px;
  margin-bottom: 40px;
  text-align: center;
} 

.site-title{ 
  margin-top: 50px; 
  font-size: 36px;
  text-align: center;
  width: 100%; 
  display: block;
}

.site-subtitle{
  margin-left: 8px; 
  text-decoration: none; 
  color: lightgrey; 
  font-weight: 400;
}

.post-list{
  display: block;
  text-align: left;
  list-style: none; 
  padding: 0; 
  margin: 0 auto;
  width: fit-content;
  max-width: 100%;  /* 不超过容器宽度 */
}

.post-item{
  display: flex; 
  align-items: baseline; 
  padding: 6px 0;
  gap: 30px;  /* 时间戳和标题之间的最小间距 */
}

.post-date{
  font-size: 18px; 
  flex: 0 0 110px; 
  white-space: nowrap;
  margin-right: 40px;
}

.post-title{
  text-decoration: none; 
  overflow-wrap: anywhere;
  font-size: 16pt;
  white-space: nowrap;
}

.post-title:hover{
  text-decoration: underline; 
  text-underline-offset: 3px; 
}

/* 平板适配 (601px - 900px) */
@media only screen and (max-width: 900px){
  .post-item{
    gap: 30px;  /* 中等屏幕：缩小间距 */
  }
}

/* 手机适配 (max-width: 600px) */
@media only screen and (max-width: 600px){
  .container{ 
    width: 90%; 
  } 
  .site-title{ 
    font-size: 32px;    /* 手机上也适当增大 */
  }
  .page-header{
    margin-top: 40px;   /* 手机上顶部距离稍小 */
  }
  .post-item{
    gap: 20px;  /* 小屏幕：进一步缩小间距 */
  }
  .post-date{ 
    flex-basis: 92px; 
    font-size: 15px; 
  }
}

/* 超小手机适配 (max-width: 400px) */
@media only screen and (max-width: 400px){
  .post-item{
    gap: 15px;  /* 超小屏幕：最小间距 */
  }
}