/* ==========================================================
   山高路远，家在身边 — 日系胶片感
   米白纸底 / 大留白 / 细衬线 / 柔和暖调
   行程页采用 12 列栅格，多版式编排（像翻开的相册）
   ========================================================== */

:root {
  --paper: #f7f5f0;
  --paper-warm: #f2efe7;
  --card: #fffefb;
  --ink: #2f2c28;
  --ink-light: #57534d;
  --ink-faint: #948f86;
  --line: #e5e0d5;
  --line-soft: #ece7dc;
  --accent: #8a7a63;
  --accent-soft: #b8a888;
  --sea: #7d8f92;
  --shadow: 0 1px 3px rgba(58, 50, 38, 0.04), 0 8px 24px rgba(58, 50, 38, 0.05);
  --shadow-hover: 0 2px 6px rgba(58, 50, 38, 0.06), 0 16px 40px rgba(58, 50, 38, 0.10);
  --serif: 'Songti SC', 'STSong', 'SimSun', 'Noto Serif SC', Georgia, serif;
  --sans: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --maxw: 940px;
  --tripw: 1060px;
  --gap: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.02em;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* ===== 导航 ===== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 245, 240, .9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 28px;
  height: 60px; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  font-family: var(--serif); font-size: 15px;
  letter-spacing: .14em; color: var(--ink);
}
.nav-links { display: flex; gap: 26px; }
.nav-links a {
  font-size: 13px; color: var(--ink-light); letter-spacing: .14em;
  position: relative; padding-bottom: 2px; transition: color .25s;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--accent-soft); transition: right .3s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { right: 0; }

/* ===== 首页 Hero ===== */
.hero { text-align: center; padding: 108px 28px 74px; }
.hero-en {
  font-size: 10.5px; letter-spacing: .46em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 30px; padding-left: .46em;
}
.hero-title {
  font-family: var(--serif); font-size: 40px; font-weight: 400;
  letter-spacing: .2em; color: var(--ink); line-height: 1.55;
  padding-left: .2em;
}
.hero-divider {
  width: 44px; height: 1px; background: var(--accent-soft);
  margin: 30px auto 26px;
}
.hero-sub {
  font-size: 14px; color: var(--ink-light); line-height: 2.2;
  letter-spacing: .14em;
}

/* ===== 统计 ===== */
.stats {
  max-width: var(--maxw); margin: 0 auto; padding: 0 28px 80px;
  display: flex; justify-content: center; gap: 78px;
}
.stat { text-align: center; }
.stat-num {
  font-family: var(--serif); font-size: 32px; font-weight: 400;
  color: var(--ink); line-height: 1.2; letter-spacing: .04em;
}
.stat-label {
  font-size: 11.5px; color: var(--ink-faint);
  letter-spacing: .22em; margin-top: 8px;
}

/* ===== 区块 ===== */
.section { padding: 0 28px 110px; }
.wrap { max-width: var(--maxw); margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 54px; }
.section-en {
  font-size: 10.5px; letter-spacing: .46em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 14px; padding-left: .46em;
}
.section-title {
  font-family: var(--serif); font-size: 22px; font-weight: 400;
  letter-spacing: .3em; color: var(--ink); padding-left: .3em;
}

/* ===== 胶片长卷（首页·横向滚筒）===== */
.reel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 26px;
}
.reel-hint {
  font-size: 11px; color: var(--ink-faint);
  letter-spacing: .22em;
}
.reel-nav { display: flex; gap: 10px; }
.reel-btn {
  width: 42px; height: 42px; border: 1px solid var(--line);
  background: var(--card); border-radius: 50%;
  color: var(--ink-light); font-size: 17px; line-height: 1;
  cursor: pointer; transition: border-color .3s, color .3s, opacity .3s;
  font-family: var(--serif);
}
.reel-btn:hover { border-color: var(--accent); color: var(--accent); }

.reel {
  display: flex; align-items: stretch; gap: 26px;
  overflow-x: auto; overflow-y: hidden;
  padding: 6px 4px 28px;
  cursor: grab;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.reel::-webkit-scrollbar { display: none; }
.reel.dragging { cursor: grabbing; scroll-snap-type: none; }
.reel { -webkit-user-select: none; user-select: none; }
.reel img { -webkit-user-drag: none; }

/* 年代分隔牌 */
.era {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-width: 100px; padding: 0 26px 10px 0;
  border-right: 1px solid var(--line);
}
.era-year {
  font-family: var(--serif); font-size: 46px; font-weight: 400;
  color: var(--ink); line-height: 1.1; letter-spacing: .04em;
}
.era-count {
  font-size: 10.5px; color: var(--ink-faint);
  letter-spacing: .24em; margin-top: 10px;
}

/* 行程卡（横筒内竖版）*/
.reel .trip-card {
  flex: 0 0 300px; display: flex; flex-direction: column;
  scroll-snap-align: center;
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 3px; overflow: hidden;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .5s;
}
.reel .trip-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--line);
}
.reel .trip-cover { overflow: hidden; background: var(--paper-warm); flex: 0 0 auto; }
.reel .trip-cover img {
  width: 100%; height: 195px; object-fit: cover; display: block;
  transition: transform 1.4s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.reel .trip-card:hover .trip-cover img { transform: scale(1.045); }
.reel .trip-body {
  padding: 20px 22px 22px; flex: 1;
  display: flex; flex-direction: column; align-items: flex-start;
}
.reel .trip-date {
  font-size: 10.5px; color: var(--ink-faint);
  letter-spacing: .2em; margin-bottom: 8px;
}
.reel .trip-title {
  font-family: var(--serif); font-size: 18.5px; font-weight: 400;
  letter-spacing: .1em; color: var(--ink); line-height: 1.55;
}
.reel .trip-sub {
  font-size: 12px; color: var(--accent); letter-spacing: .08em; margin-top: 7px;
}
.reel .trip-intro {
  font-size: 12.5px; color: var(--ink-light); line-height: 1.95;
  margin-top: 10px; letter-spacing: .03em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.reel .trip-more {
  font-size: 11px; color: var(--accent);
  letter-spacing: .2em; margin-top: auto; padding-top: 16px;
}
.reel .trip-more::after { content: " →"; }

/* 进度条 */
.reel-progress {
  height: 2px; background: var(--line-soft);
  border-radius: 2px; overflow: hidden; margin-top: 4px;
}
.reel-bar {
  display: block; height: 100%; width: 8%;
  background: var(--accent-soft); border-radius: 2px;
  transition: width .25s ease;
}

/* ==========================================================
   行程详情页
   ========================================================== */

/* --- 头图 --- */
.trip-hero {
  position: relative; max-width: var(--tripw); margin: 0 auto;
  padding: 0 28px; opacity: 0; transition: opacity 1.1s ease;
}
.trip-hero.fade-in { opacity: 1; }
.trip-hero-in {
  position: relative; overflow: hidden; border-radius: 3px;
  background: var(--paper-warm);
}
.trip-hero-in img { width: 100%; max-height: 74vh; object-fit: cover; }
.trip-hero-in::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(30,26,20,.42) 0%, rgba(30,26,20,.10) 38%, transparent 66%);
}
.trip-hero-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 44px; color: #fff; z-index: 2;
}
.trip-hero-date {
  font-size: 11px; letter-spacing: .28em; opacity: .88; margin-bottom: 12px;
}
.trip-hero-title {
  font-family: var(--serif); font-size: 34px; font-weight: 400;
  letter-spacing: .16em; line-height: 1.4;
}
.trip-hero-place {
  font-size: 13px; letter-spacing: .16em; opacity: .9; margin-top: 10px;
}

/* --- 导语 --- */
.trip-lead {
  max-width: 660px; margin: 0 auto; padding: 62px 28px 76px;
  text-align: center;
}
.trip-lead p {
  font-family: var(--serif); font-size: 15.5px; color: var(--ink-light);
  line-height: 2.35; letter-spacing: .05em; margin-bottom: 14px;
}
.trip-lead p:last-child { margin-bottom: 0; }
.trip-lead::after {
  content: ''; display: block; width: 30px; height: 1px;
  background: var(--line); margin: 46px auto 0;
}

/* --- 照片流：12 列栅格 --- */
.flow {
  max-width: var(--tripw); margin: 0 auto; padding: 0 28px 40px;
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap); row-gap: 72px;
  align-items: start;
}

/* 单张版式 */
.f-full    { grid-column: 1 / -1; }
.f-center  { grid-column: 3 / 11; }
.f-narrow  { grid-column: 4 / 10; }
.f-left    { grid-column: 1 / 9; }
.f-right   { grid-column: 5 / 13; }

/* 图文并排版式（图 7 栏 + 文字 4 栏）*/
.f-aside { grid-column: 1 / -1; }
.f-aside .flow-item {
  display: grid; grid-template-columns: 7fr 4fr;
  column-gap: 46px; align-items: center;
}

/* 双图并排 */
.f-duo {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: var(--gap); align-items: start;
}

/* 重点照片：白边纸感大头图 + 居中大字图注（一段行程的定性之作）*/
.f-hero { grid-column: 1 / -1; }
.f-hero .flow-pic {
  border: 12px solid #fff;
  box-shadow: 0 30px 64px -34px rgba(58, 48, 34, .55), 0 1px 0 rgba(58, 48, 34, .07);
}
.f-hero .flow-cap { max-width: 640px; margin: 32px auto 0; text-align: center; }
.f-hero .flow-cap-head { display: block; }
.f-hero .flow-cap-no { display: block; margin-bottom: 12px; letter-spacing: .34em; }
.f-hero .flow-cap-main { display: block; font-size: 23px; letter-spacing: .24em; line-height: 1.62; }
.f-hero .flow-cap-note { padding-left: 0; margin-top: 16px; text-align: center; }

/* --- 单张照片 --- */
.flow-item { margin: 0; }
.flow-pic { overflow: hidden; background: var(--paper-warm); cursor: zoom-in; }
.flow-pic img { width: 100%; transition: transform 1.6s cubic-bezier(.2,.8,.2,1); }
.flow-pic:hover img { transform: scale(1.025); }
.is-portrait .flow-pic img { max-height: 76vh; width: auto; margin: 0 auto; }

.flow-cap { margin-top: 18px; }
.flow-cap-head { display: flex; align-items: baseline; gap: 11px; }
.flow-cap-no {
  font-family: var(--serif); font-size: 11px; color: var(--accent-soft);
  letter-spacing: .1em; flex-shrink: 0;
}
.flow-cap-main {
  font-family: var(--serif); font-size: 15.5px; color: var(--ink);
  letter-spacing: .1em;
}
.flow-cap-note {
  font-size: 13px; color: var(--ink-light); line-height: 2.15;
  margin-top: 9px; letter-spacing: .04em;
  padding-left: 27px;
}

/* 图下配文的宽度控制 */
.f-full .flow-cap, .f-center .flow-cap, .f-left .flow-cap, .f-right .flow-cap {
  max-width: 620px;
}
.f-center .flow-cap, .f-narrow .flow-cap { margin-left: auto; margin-right: auto; }
.f-right .flow-cap { margin-left: auto; }
.f-aside .flow-cap { margin-top: 0; }
.f-aside .flow-cap-note { padding-left: 0; }
.f-duo .flow-cap-note { padding-left: 0; font-size: 12.5px; }

/* --- 页尾 --- */
.trip-end {
  max-width: var(--tripw); margin: 0 auto; padding: 26px 28px 110px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; font-size: 12.5px; letter-spacing: .12em;
  border-top: 1px solid var(--line-soft); margin-top: 46px;
}
.trip-end a { color: var(--accent); transition: color .25s, opacity .25s; }
.trip-end a:hover { color: var(--ink); }
.trip-end .dim { color: var(--ink-faint); }

/* ===== 灯箱 ===== */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(28, 25, 20, .94);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px; opacity: 0; pointer-events: none;
  transition: opacity .4s ease;
}
.lightbox.on { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 92vw; max-height: 82vh;
  object-fit: contain; border-radius: 2px;
}
.lightbox-cap {
  font-family: var(--serif); font-size: 14px; color: rgba(255,255,255,.82);
  letter-spacing: .16em; margin-top: 22px;
}

/* ===== 空状态 ===== */
.empty {
  text-align: center; color: var(--ink-faint);
  font-size: 14px; letter-spacing: .16em; padding: 54px 0;
}
.empty-mark {
  font-family: var(--serif); font-size: 20px;
  margin-bottom: 14px; color: var(--accent-soft); letter-spacing: .3em;
}

/* ===== 页脚 ===== */
.footer {
  text-align: center; padding: 52px 28px 62px;
  font-family: var(--serif); font-size: 12.5px;
  color: var(--ink-faint); letter-spacing: .24em;
  border-top: 1px solid var(--line-soft);
}

/* ===== 响应式 ===== */
@media (max-width: 900px) {
  .f-center { grid-column: 2 / 12; }
  .f-narrow { grid-column: 3 / 11; }
  .f-aside .flow-item { grid-template-columns: 6fr 5fr; column-gap: 30px; }
}

@media (max-width: 760px) {
  .hero { padding: 76px 22px 52px; }
  .hero-title { font-size: 30px; letter-spacing: .16em; }
  .stats { gap: 46px; padding-bottom: 60px; }
  .stat-num { font-size: 26px; }
  .section { padding: 0 22px 80px; }

  /* 胶片长卷：触屏原生横滑，隐藏箭头 */
  .reel-btn, .reel-hint { display: none; }
  .reel { gap: 16px; padding: 4px 18px 22px; cursor: default; }
  .era { min-width: 64px; padding-right: 14px; }
  .era-year { font-size: 30px; }
  .reel .trip-card { flex: 0 0 72vw; }
  .reel .trip-cover img { height: 200px; }
  .reel .trip-body { padding: 20px 20px 22px; }

  /* 行程页：栅格收紧 */
  .trip-hero, .flow, .trip-end { padding-left: 22px; padding-right: 22px; }
  .trip-hero-cap { padding: 26px 24px; }
  .trip-hero-title { font-size: 25px; }
  .trip-lead { padding: 44px 22px 52px; }

  .flow { row-gap: 52px; column-gap: 16px; }
  .f-full, .f-center, .f-narrow, .f-left, .f-right { grid-column: 1 / -1; }
  .f-aside .flow-item { grid-template-columns: 1fr; row-gap: 16px; }
  .f-duo { grid-template-columns: 1fr; row-gap: 44px; }
  .f-hero .flow-pic { border-width: 7px; }
  .f-hero .flow-cap-main { font-size: 19px; letter-spacing: .18em; }
  .is-portrait .flow-pic img { max-height: none; width: 100%; }
  .flow-cap-note { padding-left: 0; }
  .trip-end { flex-direction: column; align-items: flex-start; gap: 14px; }

  .lightbox { padding: 20px; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 25px; }
  .stats { gap: 30px; }
  .stat-num { font-size: 22px; }
  .stat-label { font-size: 10.5px; letter-spacing: .16em; }
}