/* 全局重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #111;
  color: #f2f2f2;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 20px 24px;
}

/* 顶部 */
.hero {
  padding: 40px 0 48px;
}

.hero h1 {
  font-size: 32px;
  line-height: 1.6;
  letter-spacing: 1px;
}

.tagline {
  margin-top: 8px;
  color: #9aa4b2;
  font-size: 16px;
}

/* 分区通用 */
.section {
  margin-bottom: 48px;
}

.section-title {
  font-size: 32px;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* 作品卡片：两列并排，间距 20px，圆角 12px */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.card {
  background-color: #1b1b1b;
  border-radius: 12px;
  padding: 20px;
}

/* 第 3 张卡片在两列布局时横跨两列 */
.card-grid .card:nth-child(3) {
  grid-column: 1 / -1;
}

/* 纯色方块占位图（CSS 绘制，无外部图片）；三张统一按 8:3 比例，高度随宽度推导 */
.thumb {
  height: auto;
  aspect-ratio: 8 / 3;
  border-radius: 8px;
  margin-bottom: 16px;
}

.thumb-a { background-color: #2f6fb0; }
.thumb-b { background-color: #b0562f; }
.thumb-c { background-color: #2fb07a; }

.card-title {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 8px;
}

.card-desc {
  font-size: 16px;
  line-height: 1.6;
  color: #c8c8c8;
}

/* 关于区 */
.about p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 12px;
  color: #d6d6d6;
}

/* 页脚 */
.site-footer {
  border-top: 1px solid #2a2a2a;
  padding-top: 20px;
  color: #8a8a8a;
  font-size: 16px;
}

/* 窄屏时卡片纵向排列（宽屏保持三列） */
@media (max-width: 800px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* 手机适配：小于 700px 时作品区为 1 列 */
@media (max-width: 700px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}