:root {
  --bg: #0f172a;
  --bg-accent: #1e293b;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --brand: #38bdf8;
  --gap: 8px; /* 图与图、图与视频之间的细缝 */
}

/* 标题行楷字体（自托管子集，所有设备统一显示）*/
@font-face {
  font-family: 'ChuhubTitle';
  src: url('fonts/title.woff2') format('woff2');
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden; /* 允许上下滚动，禁止左右滚动 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
}

/* 整页：上中下三段，至少一屏高，内容多时可滚动 */
.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at top, var(--bg-accent), var(--bg));
  color: var(--text);
}

/* 顶部标题 */
.site-header {
  flex: 0 0 auto;
  text-align: center;
  padding: 1.6rem 1rem 0.6rem;
}

.site-title {
  font-family: "ChuhubTitle", "Weibei SC", "STKaiti", "KaiTi",
    "楷体", serif;
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-indent: 0.3em; /* 抵消末字右侧字间距，视觉居中 */
  background: linear-gradient(120deg, #e0f2fe, #7dd3fc, #38bdf8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/*
  中间区：左图 | 视频 | 右图
  关键：媒体高度 = min(高度可用, 宽度可用)，同时适配宽和高，
  这样竖屏视频+两侧图在任何窗口都放得下，图始终 2:3 完整显示。
*/
.video-hero {
  flex: 1 1 auto;
  min-height: 0;
  /* 视频显示高度：受屏幕高度与宽度双重约束，宽度留足余量防止手机上溢出 */
  --media-h: min(88vh, 88vw);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  padding: 0.25rem 0.5rem;
}

/* 视频：高度 = media-h，宽度按 9:16 比例自动 */
.video-wrap {
  flex: 0 0 auto;
  height: var(--media-h);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-video {
  height: 100%;
  width: auto;
  display: block;
  border-radius: 8px;
  filter: saturate(1.25) contrast(1.06) brightness(1.03);
}

/* 两侧图列：整列高度 = 视频高度，宽度按 2:3，超出隐藏（滚动视窗）*/
.side-gallery {
  flex: 0 0 auto;
  height: var(--media-h);
  width: calc((var(--media-h) - 3 * var(--gap)) / 3 * 2 / 3);
  overflow: hidden;
}

/* 滚动轨道：竖向堆叠 6 张图（2 组），做无缝循环 */
.marquee {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.marquee img {
  width: 100%;
  height: calc((var(--media-h) - 3 * var(--gap)) / 3);
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: var(--gap);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  display: block;
}

/*
  匀速连续滚动：5 秒滑过一张（含间距）的距离，不停顿。
  一组 3 张 = 15 秒滚完，无缝循环。左右同步、方向相反。
*/
.marquee-up {
  animation: scroll-loop 15s linear infinite; /* 右侧：向上 */
}
.marquee-down {
  animation: scroll-loop 15s linear infinite reverse; /* 左侧：向下 */
}

@keyframes scroll-loop {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* 底部页脚 */
.site-footer {
  flex: 0 0 auto;
  text-align: center;
  padding: 0.4rem 1rem 0.6rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.site-footer a {
  color: var(--muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--brand);
}

.site-footer .beian {
  margin-left: 0.6rem;
  padding-left: 0.6rem;
  border-left: 1px solid rgba(148, 163, 184, 0.3);
}

/* 所有设备统一三栏布局（视频居中 + 两侧滚动图），靠 min(vh,vw) 自适应缩放 */