/* =========================================================
   全站共用样式（新作品页用）
   一般不需要改这个文件。
   想整体换背景色、字体颜色，只改最上面 :root 里的几行即可。
   ========================================================= */

:root {
  --bg-color: rgb(239, 239, 239);      /* 背景色 */
  --text-color: #000000;  /* 文字颜色 */
  --grey-text: #808080;   /* 灰色小字 */
  --link-color: #003399;  /* 链接颜色 */
  --link-hover: #8C1515;  /* 鼠标放上去时的链接颜色 */
}

body {
  margin: 10px;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: -apple-system, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}

a { text-decoration: none; color: var(--link-color); }
a:hover { text-decoration: underline; color: var(--link-hover); }

/* ---------- 顶部导航 ---------- */
.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
  padding: 4px 0 24px;
}
.nav .name { color: var(--text-color); font-size: 20px; }
.nav .menu { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.nav .menu a { color: var(--grey-text); }

/* ---------- 作品标题区 ---------- */
.project-header { text-align: center; max-width: 900px; margin: 0 auto; }
.project-header h1 { font-weight: bold; overflow-wrap: anywhere; }
.project-header .subtitle { color: var(--grey-text); line-height: 1.6; }

/* ---------- 正文 ---------- */
.project-text {
  max-width: 900px;
  margin: 24px auto;
  font-size: 17px;
  line-height: 1.6;
}
.project-text.grey { color: var(--grey-text); }

/* ---------- 图片 / 视频 ---------- */
.media { text-align: center; margin: 24px auto; }
.media img, .media video, .media iframe {
  width: 80%;
  max-width: 1400px;
  height: auto;
  vertical-align: middle;
}
/* 两张并排 */
.media.two img, .media.two video { width: 39.5%; }
/* 嵌入的 B 站 / YouTube 视频，保持 16:9 */
.media iframe { aspect-ratio: 16 / 9; border: 0; }
.media .caption { color: var(--grey-text); font-size: 14px; margin-top: 6px; }

/* 画廊：很多张图排成两列（剧照、系列作品），点图片可看大图 */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 80%;
  max-width: 1400px;
  margin: 24px auto;
}
.gallery img { width: 100%; height: auto; display: block; }

/* 竖版海报 + 文字左右排：海报不会铺满整屏 */
.with-poster {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  max-width: 900px;
  margin: 24px auto;
}
.with-poster .poster { width: 300px; flex-shrink: 0; height: auto; }
.with-poster .project-text { margin: 0; }

.back { text-align: center; margin: 40px 0 20px; font-weight: bold; }

/* ---------- 手机屏幕：图片占满宽度 ---------- */
@media (max-width: 700px) {
  .media img, .media video, .media iframe,
  .media.two img, .media.two video { width: 100%; margin-bottom: 8px; }
  .project-text { font-size: 16px; }
  .project-header h1 { font-size: 24px; }
  .gallery { width: 100%; grid-template-columns: 1fr; }
  .with-poster { flex-direction: column; align-items: center; }
  .with-poster .poster { width: 70%; }
}