/* ============================================================
   设计系统 —— 暖调赭红 · 米色纸张（editorial 纵向长卷）
   ============================================================ */
:root{
  /* 暗色系：暖调墨底 + 提亮的朱红/赭金，保留原本的东方质感 */
  --primary:#C96B52;        /* 朱砂（对齐主站） */
  --primary-dark:#A9543E;
  --gold:#B3945C;           /* 古铜 */
  --gold-deep:#9A7F4D;
  --gold-soft:rgba(179,148,92,.30);
  --pine:#9AA48F;           /* 地址用的灰绿，降饱和以融入主站色系 */
  --ink:#ECE4D4;            /* 象牙 */
  --ink-soft:#B7AC99;
  --bg:#16120D;             /* 暖炭黑 */
  --surface:#1E1912;
  --surface-2:#241E16;
  /* 插画承印纸面：必须保持浅色，否则黑墨线在暗底上会消失 */
  --plate:#FBF7F0;
  --plate-2:#F1E9DB;
  --line:rgba(236,228,212,.12);
  --line-strong:rgba(236,228,212,.22);

  --shadow-sm:0 1px 2px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.34);
  --shadow-md:0 2px 6px rgba(0,0,0,.5), 0 20px 42px rgba(0,0,0,.52);

  --radius:18px;
  --maxw:1060px;

  --font-serif:"Noto Serif SC","Songti SC","STSong",Georgia,"Times New Roman",serif;
  --font-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;

  --paper-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background-color:var(--bg);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";position:fixed;inset:0;
  background-image:var(--paper-grain);
  opacity:.3;pointer-events:none;z-index:0;
}
img{max-width:100%;display:block;}

/* ============================================================
   顶部滚动进度 + 吸顶迷你标题
   ============================================================ */
.progress{
  position:fixed;top:0;left:0;height:3px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold),var(--primary));
  z-index:60;
  transition:transform .12s linear;
}
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:flex-start;
  gap:14px;
  /* 右侧预留出常驻语言切换器的位置，避免文案与其相撞 */
  padding:11px calc(clamp(16px,4vw,34px) + 150px) 11px clamp(16px,4vw,34px);
  background:rgba(18,14,10,.9);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transform:translateY(-105%);
  transition:transform .34s cubic-bezier(.22,.61,.36,1);
}
.topbar.is-shown{transform:none;}
.topbar__brand{
  font-family:var(--font-serif);
  font-weight:700;letter-spacing:.22em;
  font-size:15px;color:var(--primary);
  flex:none;
}
.topbar__meta{
  font-size:12px;letter-spacing:.14em;color:var(--ink-soft);
  min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 窄屏空间不足时只保留站点名 */
@media(max-width:640px){
  .topbar__meta{display:none;}
  .topbar{padding-right:calc(clamp(16px,4vw,34px) + 122px);}
}

/* ============================================================
   返回主站（常驻左上角，与右上角语言切换对称）
   ============================================================ */
.back-home{
  position:fixed;top:16px;left:clamp(16px,4vw,34px);z-index:58;
  text-decoration:none;
}
.back-home__text{
  font-family:var(--font-serif);
  font-size:13px;letter-spacing:.1em;
  color:var(--ink-soft);
  padding-bottom:4px;
  border-bottom:1px solid var(--line);
  transition:color .3s ease, border-color .3s ease;
}
.back-home__text em{font-style:italic;color:var(--ink);}
.back-home:hover .back-home__text{color:var(--primary);border-bottom-color:var(--primary);}
/* 吸顶标题栏出现时给品牌文字让位 */
.topbar{padding-left:calc(clamp(16px,4vw,34px) + 205px);}
@media(max-width:640px){
  .back-home__text{font-size:11px;letter-spacing:.06em;}
  .topbar{padding-left:calc(clamp(16px,4vw,34px) + 150px);}
}

/* ---------- 返回顶部（右下角，滚动后浮现） ---------- */
.to-top{
  position:fixed;right:clamp(16px,4vw,34px);bottom:26px;z-index:58;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);
  background:rgba(30,25,18,.9);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid var(--line);
  border-radius:50%;
  cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease,
             color .25s ease, border-color .25s ease;
}
.to-top.is-shown{opacity:1;pointer-events:auto;transform:none;}
.to-top:hover{color:var(--primary);border-color:var(--primary);}
.to-top svg{transition:transform .3s cubic-bezier(.22,.61,.36,1);}
.to-top:hover svg{transform:translateY(-2px);}

/* ============================================================
   中英文版本切换（常驻右上角）
   ============================================================ */
.lang-switch{
  position:fixed;top:13px;right:clamp(16px,4vw,34px);z-index:58;
  display:flex;gap:2px;
  padding:3px;
  background:rgba(30,25,18,.94);
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}
.lang-switch__btn{
  font-size:12px;letter-spacing:.06em;
  color:var(--ink-soft);
  padding:4px 13px;border-radius:999px;
  text-decoration:none;
  transition:background-color .2s ease,color .2s ease;
}
.lang-switch__btn:hover{color:var(--primary);}
.lang-switch__btn.is-active{background:var(--primary);color:#fff;}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  padding:clamp(52px,9vw,112px) 24px clamp(30px,5vw,54px);
  text-align:center;overflow:hidden;
}
.hero__inner{max-width:var(--maxw);margin:0 auto;position:relative;z-index:1;}
.hero__title{
  font-family:var(--font-serif);
  font-size:clamp(38px,7vw,68px);
  font-weight:800;letter-spacing:.14em;
  margin:0 0 18px;color:var(--ink);text-indent:.14em;
}
.hero__title em{font-style:normal;color:var(--primary);}
.hero__rule{width:76px;height:4px;margin:0 auto 20px;background:var(--gold);border-radius:4px;}
.hero__sub{font-size:clamp(15px,2.2vw,18px);color:var(--ink-soft);letter-spacing:.08em;margin:0;}
.hero__cue{
  margin-top:26px;font-size:13px;letter-spacing:.2em;
  color:var(--gold-deep);
}
.hero__deco{position:absolute;width:180px;height:180px;opacity:.5;pointer-events:none;}
.hero__deco--tl{top:-30px;left:-30px;border-left:2px solid var(--gold-soft);border-top:2px solid var(--gold-soft);border-radius:0 0 0 24px;}
.hero__deco--br{bottom:-30px;right:-30px;border-right:2px solid var(--gold-soft);border-bottom:2px solid var(--gold-soft);border-radius:0 24px 0 0;}

/* ============================================================
   景点长卷列表
   ============================================================ */
.stage{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,28px) 30px;}

.list{display:flex;flex-direction:column;gap:26px;}
@media(min-width:1024px){ .list{gap:30px;} }

/* ---------- 横向卡片：左图右文 ---------- */
.card{
  position:relative;
  display:grid;
  grid-template-columns:1fr;            /* 移动端：上下堆叠 */
  background-color:var(--surface);
  background-image:var(--paper-grain);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:transform .34s cubic-bezier(.22,.61,.36,1),
             box-shadow .34s ease,
             border-color .34s ease;
  will-change:transform;
}
@media(min-width:620px){ .card{grid-template-columns:43% 1fr;} }
@media(min-width:1024px){ .card{grid-template-columns:430px 1fr;} }

.card:hover{
  transform:translateY(-5px);
  border-color:var(--gold);
  box-shadow:var(--shadow-md);
}

/* 左：插画 / 实景照片（左右切换） */
.card__media{
  position:relative;
  overflow:hidden;
  min-height:312px;
  background:linear-gradient(160deg,#241E16,#1A150F);
  border-bottom:1px dashed var(--line-strong);
}
@media(min-width:620px){
  .card__media{border-bottom:none;border-right:1px dashed var(--line-strong);min-height:100%;}
}
.slides{position:absolute;inset:0;}
.slide{
  position:absolute;inset:0;margin:0;
  display:flex;align-items:center;justify-content:center;
  padding:28px 28px 74px;
  opacity:0;pointer-events:none;
  transition:opacity .42s ease, transform .42s cubic-bezier(.22,.61,.36,1);
}
.slide.is-active{opacity:1;pointer-events:auto;}
.slide.is-left{transform:translateX(-30px);}
.slide.is-right{transform:translateX(30px);}

.slide img{
  position:relative;z-index:1;
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;
  filter:drop-shadow(0 10px 16px rgba(120,85,45,.17));
}

/* 大号衬线序号水印（坐在浅色承印纸面内，避免被纸面边缘切断） */
.card__ghost{
  position:absolute;left:28px;top:20px;
  font-family:var(--font-serif);
  font-size:84px;font-weight:800;line-height:1;
  color:var(--primary);opacity:.13;
  letter-spacing:-.04em;
  pointer-events:none;user-select:none;
  z-index:0;
}
.slide--art img{
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  transform-origin:50% 62%;
}
/* 暗色主题下，插画单独坐在一块浅色纸面上——像裱在深色展墙上的画片 */
.slide--art::before{
  content:"";position:absolute;inset:14px 14px 60px 14px;
  border-radius:14px;
  background:linear-gradient(158deg,var(--plate),var(--plate-2));
  box-shadow:0 16px 34px rgba(0,0,0,.52), inset 0 0 0 1px rgba(255,255,255,.4);
}
.card:hover .slide--art img{transform:translateY(-5px) scale(1.04);}

/* 实景照片：略深的纸底 + 相片质感 */
.slide--photo{
  background:linear-gradient(160deg,#26201A,#1B1610);
  padding:28px 28px 74px;
}
.slide--photo img{
  border-radius:3px;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.62));
}

/* 左右切换箭头 */
.media-arrow{
  position:absolute;top:auto;bottom:13px;z-index:4;
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);
  background:rgba(30,25,18,.94);
  border:1px solid var(--line);
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 2px 12px rgba(0,0,0,.55);
  opacity:.9;
  transition:opacity .22s ease, background-color .22s ease, color .22s ease,
             box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.media-arrow--prev{left:16px;}
.media-arrow--next{right:16px;}
.media-arrow:hover,.media-arrow:focus-visible{
  opacity:1;background:var(--primary);color:#fff;border-color:var(--primary);
  box-shadow:0 4px 18px rgba(225,92,65,.45);
}
.media-arrow--prev:hover{transform:translateX(-2px);}
.media-arrow--next:hover{transform:translateX(2px);}
.card:hover .media-arrow{opacity:1;}

/* 圆点指示 */
.media-dots{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:flex;gap:8px;
}
.media-dot{
  width:9px;height:9px;padding:0;
  background:rgba(40,33,25,.92);
  border:1px solid rgba(232,196,140,.45);
  border-radius:50%;
  cursor:pointer;
  transition:background-color .22s ease, border-color .22s ease, transform .22s ease;
}
.media-dot.is-active{background:var(--primary);border-color:var(--primary);transform:scale(1.18);}

/* 右：文字区 */
.card__body{
  display:flex;flex-direction:column;flex:1 1 auto;
  padding:32px clamp(28px,3.6vw,46px) 28px;
  position:relative;z-index:1;
}

.card__title{
  font-family:var(--font-serif);
  font-size:clamp(21px,2.6vw,26px);
  font-weight:700;letter-spacing:.05em;
  margin:0;color:var(--ink);
}
.card__title::after{
  content:"";display:block;
  width:34px;height:3px;margin-top:11px;
  background:var(--primary);border-radius:3px;
  transition:width .38s cubic-bezier(.22,.61,.36,1);
}
.card:hover .card__title::after{width:62px;}

.card__desc{
  font-size:15px;color:var(--ink-soft);
  margin:20px 0 28px;line-height:1.95;text-align:justify;
  letter-spacing:.01em;
}
/* 英文版：两端对齐会让西文词距忽宽忽窄，改为左对齐 */
:lang(en) .card__desc{text-align:left;letter-spacing:0;}
/* 英文版：标题字距收紧，拉丁衬线更挺括 */
:lang(en) .card__title{letter-spacing:0;}
:lang(en) .hero__title{letter-spacing:.06em;text-indent:0;}
:lang(en) .topbar__brand{letter-spacing:.14em;}

.card__addr{
  display:flex;align-items:flex-start;gap:9px;
  margin-top:auto;padding-top:26px;
  border-top:1px solid var(--line);
  font-size:13.5px;color:var(--pine);line-height:1.6;
}
.card__addr svg{flex:none;margin-top:4px;}

/* ============================================================
   页脚
   ============================================================ */
.site-foot{
  position:relative;z-index:1;text-align:center;
  padding:40px 24px 56px;margin-top:16px;
  border-top:1px solid var(--line);
}
.site-foot p{margin:6px 0;font-size:13px;color:var(--ink-soft);letter-spacing:.05em;}
.site-foot strong{color:var(--primary);font-family:var(--font-serif);letter-spacing:.14em;}

/* ============================================================
   入场动效
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(24px);}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1);
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
  .js .reveal,.reveal{opacity:1;transform:none;}
  html{scroll-behavior:auto;}
  .card:hover{transform:none;}
  .card:hover .slide--art img{transform:none;}
  .topbar{transition:none;}
}

:where(button,a):focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;border-radius:8px;
}