/* ===== 基础设置 ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --bg: #f5f1ea;
  /* 暖调浅底 */
  --fg: #161616;
  /* 主文字 */
  --muted: #8a8479;
  /* 次级文字 */
  --accent: #b8843b;
  /* 点缀色 */
  --border-subtle: rgba(0, 0, 0, 0.06);
  /* 更新：减小圆角，更接近矩形 */
  --radius-md: 8px;
  --radius-lg: 10px;
  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 24px 55px rgba(0, 0, 0, 0.14);
  --transition-fast: 0.18s ease-out;
  --transition-med: 0.26s ease-out;
}

/* ===== 优化 1: 自定义选中文本颜色 (匹配您的 accent 色) ===== */
::selection {
  background: rgba(184, 132, 59, 0.25); /* 使用您的 var(--accent) 的半透明版 */
  color: #161616;
}

/* ===== 优化 2: 自定义滚动条 (更细、更现代) ===== */
::-webkit-scrollbar {
  width: 8px; /* 稍微细一点 */
  background-color: var(--bg);
}

::-webkit-scrollbar-thumb {
  background-color: #d1cdc7; /* 浅灰色滑块 */
  border-radius: 99px;
  border: 2px solid var(--bg); /* 制造一点间隙感 */
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent); /* 悬停时变色 */
}

html {
  scroll-behavior: smooth;
}

/* style.css */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  /* 极其重要：确保鼠标能穿透它点击下面的内容 */

  /* 这里使用一个更明显的噪点纹理 */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");

  background-size: 150px;
  /* 噪点颗粒大小 */
  opacity: 0.06;
  mix-blend-mode: multiply;
  /* 正片叠底，让噪点融入背景色 */
}


body {
  margin: 0;
  /* 更新：使用 Inter 字体，回落到 system-ui */
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
}

/* ===== 统一容器 ===== */
.container {
  width: min(1200px, 100% - 3rem);
  margin: 0 auto;
}

/* ===== 顶部导航 ===== */
.site-header {
  position: sticky; /* 确保吸顶 */
  top: 0;
  z-index: 100;
  
  /* 核心：改为半透明背景 + 高斯模糊 */
  background-color: rgba(245, 241, 234, 0.75); /* 使用您的背景色，但透明度 75% */
  backdrop-filter: saturate(180%) blur(20px);   /* 增加饱和度并大范围模糊 */
  -webkit-backdrop-filter: saturate(180%) blur(20px); /* Safari 兼容 */
  
  /* 极细的分割线，而不是粗边框 */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  
  transition: all 0.4s ease;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.7rem;
}

.logo a {
  font-size: 0.9rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
  padding: 0.25rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.7);
}

.nav {
  display: flex;
  gap: 1.3rem;
  font-size: 0.88rem;
}

.nav a {
  color: var(--muted);
  text-decoration: none;
  position: relative;
  padding-bottom: 0.15rem;
  transition: color var(--transition-fast);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--fg);
  transition: width var(--transition-fast);
}

.nav a.active {
  color: var(--fg);
}

.nav a.active::after {
  width: 100%;
}

.nav a:hover {
  color: var(--fg);
}

.nav a:hover::after {
  width: 100%;
}

.nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ===== 首页：横图轮播 ===== */
.hero-slider {
  position: relative;
  width: 100%;
  /* 稍微更高一点的横幅，带一点裁切 */
  height: clamp(460px, 78vh, 880px);
  min-height: 420px;
  overflow: hidden;
}

.hero-indicator {
  position: absolute;
  left: 7%;
  top: 10%;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 2;
}

.hero-indicator-separator {
  margin-inline: 0.25rem;
  opacity: 0.6;
}

/* hero 轮播轨道：把每一张 slide 排成一排，整条一起滑动 */
.hero-slides {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;

  /* 这里稍微缩短一点时间，看起来不拖又很顺 */
  transition: transform 1.05s cubic-bezier(0.33, 1, 0.68, 1);

  /* 提前丢给 GPU，减少卡顿 */
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* 每一张 slide 占满一屏宽度 */
.hero-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
}

/* 图片本身也丢给 GPU 一层 */
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* 初始状态：文字和 meta 稍微向下、透明一点 */
/* 文字与 meta：在图片开始滑动后，稍微滞后一丢丢浮上来 */
.hero-text,
.hero-slide .hero-meta {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.9s cubic-bezier(0.25, 0.9, 0.35, 1) 0.18s,
    transform 0.9s cubic-bezier(0.25, 0.9, 0.35, 1) 0.18s;
}

/* 当前 active 的那一张：文字浮上来 */
.hero-slide.is-active .hero-text,
.hero-slide.is-active .hero-meta {
  opacity: 1;
  transform: translateY(0);
}

/* 遮罩也加一个淡入，不要瞬间“啪”地盖上来 */
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.1) 30%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(.25, .1, .25, 1);
}

.hero-slide.is-active::after {
  opacity: 1;
}

.scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  /* 居中 */
  z-index: 10;
  color: rgba(255, 255, 255, 0.8);
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  /* 初始隐藏，等加载完再出来，或者直接设为 1 */
  animation: fadeInOut 3s infinite;
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);
}

@keyframes fadeInOut {

  0%,
  100% {
    opacity: 0.3;
    transform: translate(-50%, 0);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, 5px);
  }
}

/* 1. 指示器容器：居中悬浮在底部 */
.hero-pagination {
  position: absolute;
  bottom: 3rem;
  /* 根据你的喜好调整高度 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  /* 点与点之间的间距 */
  z-index: 10;
  pointer-events: auto;
  /* 允许点击 */
}

/* style.css */

/* 1. 定义“随时间变短”的动画 */
@keyframes timerShrink {
  0% {
    width: 48px;
    /* 初始宽度：长条 */
  }

  100% {
    width: 6px;
    /* 结束宽度：圆点 */
  }
}

/* 2. 基础圆点样式 */
.hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.3);
  /* 未选中时比较暗 */
  cursor: pointer;
  position: relative;
  /* 取消原来的 transition，因为我们要用 animation */
  transition: background-color 0.3s ease;
}

/* 增加点击热区 */
.hero-dot::after {
  content: "";
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
}

/* 3. 激活状态：执行倒计时动画 */
.hero-dot.active {
  background-color: #ffffff;
  /* 激活时变亮 */

  /* 关键配置：
     timerShrink: 动画名称
     6s: 持续时间 (必须必须和 JS 里的定时器时间一致！)
     linear: 线性匀速 (倒计时通常是匀速的)
     forwards: 动画结束后保持最后的状态
  */
  animation: timerShrink 6000ms linear forwards;
}

/* 4. Hover 效果：未选中的点鼠标放上去变亮 */
.hero-dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

/* 5. 极其实用的细节：鼠标悬停在轮播图上时，暂停进度条
/* 因为 JS 里我们写了鼠标悬停会 clearInterval，视觉上也必须暂停，否则就穿帮了 */
/* .hero-slider:hover .hero-dot.active {
  animation-play-state: paused;
} */

.hero-meta {
  position: absolute;
  right: 7%;
  top: 14%;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.12rem;
  padding: 0.4rem 0.7rem;
  /* 小一点，不像一个“框” */
  border-radius: 10px;

  /* 背景基本“只剩一点点” */
  background: rgba(245, 241, 234, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);

  font-size: 0.76rem;
  color: rgba(138, 132, 121, 0.85);
  backdrop-filter: blur(2px);
  /* 可删可留，轻微磨砂感 */
}


.hero-meta span:first-child {
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.74rem;
  color: rgba(208, 205, 199, 0.96);
  /* 接近卡片底色的暖白 */
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
  /* 轻微描边，防止糊进背景 */
}

/* 第二行（城市那行）更淡一点 */
.hero-meta span+span {
  opacity: 0.7;
}

/* 覆盖在图片上的文字 */
.hero-text {
  position: absolute;
  left: 12%;
  bottom: 12%;
  width: 500px;
  /* 依然限制宽度，让文字换行好看 */
  z-index: 2;

  /* === 核心修改：去掉了背景、边框、阴影 === */
  background: transparent;
  backdrop-filter: none;
  border: none;
  box-shadow: none;
  padding: 0;

  /* === 核心修改：文字颜色和阴影 === */
  color: #fff;
  /* 变成白字（假设图片偏深）或者保持深色 */

  /* 关键：给文字加阴影，保证在任何背景下都看得清 */
  /* 这种阴影是弥散的，不会显得脏 */
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
}

/* 针对这种风格，标题和正文颜色可能需要微调 */
.hero-text p {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.74rem;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.hero-meta-title {
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: rgba(220, 216, 216, 0.92);
  /* 改成偏白的浅色 */
  text-shadow: 0 0 6px rgba(216, 208, 208, 0.35);
  /* 很轻的发光描边，防止吃进背景 */
}

.hero-meta-line {
  font-size: 0.78rem;
  max-width: 14rem;
  line-height: 1.4;
}

.hero-title {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  line-height: 1.25; /* 稍微收紧行高，大标题行高紧一点更精致 */
  
  /* 新增：字距微调 */
  letter-spacing: -0.01em; /* 衬线体大标题稍微负一点字距会更紧凑有力 */
}

/* 找到 .hero-text h1 或者直接加这个类 */
.hero-title,
.series-title {
  /* 核心改变：换成衬线体 */
  font-family: "Playfair Display", serif;

  /* 设为斜体，这是高级感的关键 */
  font-style: italic;

  /* 不需要太粗，400 或者 500 足矣 */
  font-weight: 400;

  /* 稍微拉近一点字间距，让字母咬合更紧密，显得精致 */
  letter-spacing: -0.01em;

  /* 稍微调大行高，防止削头去尾 */
  line-height: 1.3;
}

/* 副标题/描述文字增加一点透明度层次 */
.hero-text p.hero-kicker {
  opacity: 0.85; 
  letter-spacing: 0.25em; /* Kicker 这种小标签字距拉大更显高级 */
}

/* ===== Hero 底部那一条标语 ===== */

.hero-caption {
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.6),
      rgba(255, 255, 255, 0.9));
  border-top: 1px solid rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
  padding: 2.4rem 0 2.4rem;
  text-align: center;
  /* 让中间这块整体居中 */
  animation: captionFadeUp 700ms ease-out 420ms both;
}

@keyframes captionFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 不再用整个 section 的 before / after 画线和点 */
.hero-caption::before,
.hero-caption::after {
  content: none;
}

.hero-caption-text {
  margin: 0;
  display: inline-flex;
  /* 文字 + 两边细线 */
  align-items: center;
  gap: 2.25rem;
  /* 文字和线之间留一点呼吸 */
  font-size: 0.8rem;
  line-height: 1.6;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.48);
  /* 比原来更淡一点 */
  opacity: 0.95;
}

/* 左右各一条细线 */
.hero-caption-text::before,
.hero-caption-text::after {
  content: "";
  height: 1px;
  width: 128px;
  background: rgba(0, 0, 0, 0.12);
  /* 非常淡的灰线 */
}


/* ===== 类别：一排竖向相纸感卡片 ===== */
.categories {
  padding: 4rem 0 4.5rem;
  border-top: 1px solid var(--border-subtle);
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.6),
      rgba(255, 255, 255, 0.2));
}

.section-header {
  max-width: 760px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.section-kicker {
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 0.76rem;
  color: var(--muted);
}

.section-title {
  margin: 0 0 0.4rem;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 1.7rem;
  letter-spacing: -0.01em;
}

.section-subtitle {
  margin: 0;
  color: #4c453b;
  font-size: 1rem;
  line-height: 1.7;
}

.category-vertical-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.8rem;
}

.category-row {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.3s ease;
}

.category-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.category-img-wrap {
  background-color: #eae8e3;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  box-shadow: none;
  border: none;
  transform: translate3d(0, 0, 0);
  transition: transform 0.5s ease, filter 0.4s ease;
}

.category-img-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.08) 30%,
      rgba(0, 0, 0, 0.35) 100%);
  z-index: 1;
  opacity: 0.9;
  pointer-events: none;
}

.category-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.14), transparent 40%);
  z-index: 2;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.category-row img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  filter: saturate(0.96);
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.category-row-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: #fff;
  z-index: 3;
}

.category-label-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  /* 数字和标题底部对齐 */
  gap: 0.8rem;
  min-height: 3.1rem;
  /* 固定一个高度，两行/一行都能塞下 */
}

.category-index {
  font-size: 0.74rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.9;
}

.category-name-en {
  font-size: 1.15rem;
  /* 稍微减小一点字体 (原 1.2rem)，防止过大 */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;

  display: block;
  text-align: right;

  /* 修改核心：增加最大宽度限制，或者直接使用百分比 */
  max-width: 15ch;
  /* 从 10ch 改为 15ch，容纳 "Installation" 等长词 */

  line-height: 1.3;

  /* 新增：防止长单词（如 Installation）强行溢出容器 */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 字比较多的标题，用稍微小一点的版本 */
.category-name-en.is-long {
  font-size: 1.02rem;
  /* 稍微小一点 */
  letter-spacing: 0.11em;
  /* 字距收紧一点，不那么“散” */
}

.category-label-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.9);
}

.category-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.category-cta::after {
  content: "→";
  font-size: 0.92rem;
  transition: transform 0.3s ease;
}

.category-row:hover {
  transform: translateY(-6px); /* 稍微克制一点，由 10px 改为 6px */
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12); /* 阴影扩散得更大更柔和 */
  border-color: rgba(184, 132, 59, 0.3); /* 边框微微泛起主题色 */
}

.category-row:hover .category-img-wrap {
  transform: scale(1.01);
  filter: saturate(1.02);
}

.category-row:hover img {
  transform: scale(1.06);
}

.category-row:hover .category-img-wrap::after {
  opacity: 0.9;
}

.category-row:hover .category-cta::after {
  transform: translateX(4px);
}


/* ===== Scroll reveal: elements fade/slide in ===== */
/* 向下滚动时的 reveal，更柔和一点 */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.9s cubic-bezier(0.25, 0.9, 0.35, 1),
    transform 0.9s cubic-bezier(0.25, 0.9, 0.35, 1);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== 首页整页淡入过渡 ===== */
/* .page-root {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms ease-out, transform 320ms ease-out;
}

.page-root--visible {
  opacity: 1;
  transform: translateY(0);
} */

/* ===== 通用 section ===== */
.section {
  padding: 3.5rem 0;
}

.section h2 {
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 1.2rem;
}

/* ===== About ===== */
.section-about {
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.about-layout {
  max-width: 640px;
}

.about-en,
.about-zh {
  line-height: 1.7;
  margin: 0 0 0.9rem;
  font-size: 0.94rem;
  color: #433f37;
}

/* ===== Contact ===== */
.section-contact {
  padding-bottom: 4rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.6rem;
}

.contact-block h3 {
  margin: 0 0 0.35rem;
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4a453b;
}

.contact-block p,
.contact-block li {
  margin: 0.1rem 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.contact-list {
  list-style: none;
  padding: 0;
}

.contact-list a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.contact-list a:hover {
  color: var(--accent);
  border-color: rgba(184, 132, 59, 0.6);
}

/* 只给上方 contact-block 里的 mailto 链接加下划线样式 */
.section-contact .contact-block a[href^="mailto"] {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
  padding-bottom: 0.05rem;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.section-contact .contact-block a[href^="mailto"]:hover {
  color: var(--accent);
  border-color: rgba(184, 132, 59, 0.6);
}

.contact-cta-wrap {
  margin-top: 2.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 1.4rem;
  background: #161616;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.82rem;
  border-radius: 999px;
  transition: transform 0.25s ease, box-shadow 0.3s ease, background 0.3s ease;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.14);
}

.contact-cta:hover {
  transform: translateY(-2px);
  background: #1f1b15;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}

.contact-cta::after {
  content: "→";
  font-size: 0.95rem;
}

.contact-cta-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* ===== 页脚 ===== */
.site-footer {
  border-top: 1px solid var(--border-subtle);
  padding: 1.4rem 0 1.7rem;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ===== 系列详情页（travel.html 等复用） ===== */
.series-layout {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 3rem;
}

/* 左侧信息栏固定 */
.series-side-meta {
  position: sticky;
  top: 5.5rem;
  /* 让它在导航下方停住 */
  align-self: flex-start;
  font-size: 0.86rem;
  color: var(--muted);
}

.series-side-meta .series-title {
  font-size: 1.1rem;
  margin: 0.4rem 0 0.4rem;
}

.series-meta-small {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* 移动端：还是恢复成一列 */
@media (max-width: 768px) {
  .series-layout {
    display: block;
  }

  .series-side-meta {
    position: static;
    margin-bottom: 1.4rem;
  }

  .nav a {
    padding: 0.5rem 0; /* 增加手指点击区域 */
  }
  
  /* 手机端去掉 hover 下划线动画，直接变色，因为手机没有 hover */
  .nav a::after {
    display: none; 
  }
  
  /* 激活状态改为文字加粗或变色 */
  .nav a.active {
    font-weight: 600;
    color: var(--fg);
  }
}


.series-wrapper {
  padding: 4.5rem 0 4rem;
}

.series-header {
  max-width: 720px;
  margin: 0 auto 2.5rem;
}

.series-kicker {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.74rem;
  color: var(--muted);
  margin-bottom: 0.7rem;
}

.series-title {
  margin: 0 0 0.6rem;
  font-size: 1.6rem;
}

.series-subtitle-en,
.series-subtitle-zh {
  margin: 0 0 0.4rem;
  font-size: 0.94rem;
  color: #47433a;
}

/* 照片：单列 + 留白 */
.series-photos {
  max-width: 820px;
  margin: 0 auto;
}

.photo-item {
  margin-bottom: 3rem;
  /* 更新：移除整个卡片的上浮过渡 */
  /* transition: transform var(--transition-med); */

  /* 新增：为图片放大做准备 */
  overflow: hidden;
  /* 新增：把圆角和阴影移到外层容器 */
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--transition-med);
  /* 让阴影有过渡 */
}

/* 更新：移除卡片上浮效果 */
.photo-item:hover {
  /* transform: translateY(-4px); */
  /* 新增：悬停时阴影更明显 */
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

.photo-item img {
  width: 100%;
  display: block;
  /* border-radius: var(--radius-md); */
  /* 移除：已移到 photo-item */
  /* box-shadow: var(--shadow-soft); */
  /* 移除：已移到 photo-item */
  object-fit: cover;
  /* 更新：移除图片阴影过渡 */
  /* transition: box-shadow var(--transition-med); */

  /* 新增：为放大效果添加过渡 */
  transition: transform 0.4s ease-out;
}

/* 更新：移除卡片上浮时的图片阴影变化 */
.photo-item:hover img {
  /* box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12); */
  /* 新增：悬停时图片轻微放大 */
  transform: scale(1.03);
}

/* 图说：地点 + 内容 + 相机 */
.photo-meta {
  margin-top: 0;
  font-size: 0.8rem;
  /* 字再小一点 */
  opacity: 0;
  max-height: 0;
  transform: translateY(10px);
  overflow: hidden;
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    max-height 0.3s ease-out,
    margin-top var(--transition-fast);
}

/* Hover 时只微微浮出来 */
.photo-item:hover .photo-meta {
  opacity: 0.28;
  /* 这里控制“基本看不出来”的程度 */
  max-height: 200px;
  transform: translateY(0);
  margin-top: 0.6rem;
}

/* 整体颜色更“灰” */
.photo-line-main,
.photo-line-sub,
.photo-line-gear {
  color: var(--muted);
}

/* 地点稍微有点强调，但也很轻 */
.photo-line-main span.location {
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
  opacity: 0.9;
}

/* 子标题和器材更淡一点 */
.photo-line-sub {
  margin-top: 0.15rem;
  opacity: 0.8;
}

.photo-line-gear {
  margin-top: 0.1rem;
  opacity: 0.65;
}


/* ===== 页面淡入 / 淡出过渡 ===== */
.page {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms ease-out, transform 260ms ease-out;
}

.page--visible {
  opacity: 1;
  transform: translateY(0);
}

.page--hidden {
  opacity: 0;
  transform: translateY(8px);
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  .nav {
    gap: 1rem;
    font-size: 0.82rem;
  }

  .hero-slider {
    height: clamp(380px, 70vh, 720px);
  }

  .hero-text {
    left: 6%;
    right: 6%;
    bottom: 10%;
    max-width: none;
  }

  .categories {
    padding: 3.5rem 0 3.8rem;
  }

  .category-vertical-list {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.2rem;
  }

  .category-row {
    border-radius: 12px;
  }

  .series-wrapper {
    padding-top: 4rem;
  }
}

@media (max-width: 480px) {
  .container {
    width: min(100% - 2rem, 720px);
  }

  .nav {
    gap: 0.8rem;
  }

  .logo a {
    letter-spacing: 0.12em;
    padding-inline: 0.7rem;
  }

  .section-title {
    font-size: 1.4rem;
  }

  .category-row-label {
    padding: 0.85rem 1rem 1rem;
  }

  .category-name-en {
    font-size: 1.05rem;
  }

  .photo-item {
    margin-bottom: 2.4rem;
  }

  /* 手机端：hero 文案整体居中 */
  .hero-text {
    left: 50%;
    right: auto;
    bottom: 13%;
    transform: translateX(-50%);
    width: min(92vw, 420px);
    text-align: center;
  }

  /* 手机端：轮播的小圆点靠近图像底边一点，不要挡文案 */
  .hero-pagination {
    bottom: 1.1rem;
    /* 原来是 3rem，这里往下挪贴近图片底部 */
  }

  /* 手机端：hero caption 居中 + 去掉两边细线，避免视觉偏右 */
  .hero-caption-text {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    line-height: 1.8;
    padding: 0 1.5rem;
    /* 两边留一点安全距离 */
    text-align: center;
  }

  .hero-caption-text::before,
  .hero-caption-text::after {
    display: none;
    /* 小屏上不画那两条线了 */
  }
}

@media (min-width: 769px) {
  .category-row+.category-row {
    margin-top: 0;
  }
}