/* =====================================================
   在昌平 · 打卡老地标逛遍昌平古迹 H5
   V1 古籍寻幽风 · 750px 设计稿基准
   换算: 1rem = 100px(设计稿) => html{font-size: min(100vw/7.5, 100px)}
   ===================================================== */

/* ---------- 字体（子集化 woff2，按页面文案提取） ---------- */
@font-face {
  font-family: 'Noto Serif SC';
  font-weight: 900;
  font-display: swap;
  src: url('../assets/fonts/NotoSerifSC-Black.subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Serif SC';
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/NotoSerifSC-Bold.subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Serif SC';
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/NotoSerifSC-SemiBold.subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans SC';
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/NotoSansSC-Medium.subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans SC';
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/NotoSansSC-Regular.subset.woff2') format('woff2');
}

/* ---------- Design Tokens ---------- */
:root {
  --paper: #F5EFE3;        /* 宣纸米白底 */
  --ink: #26201A;          /* 墨色 */
  --cinnabar: #9E3B24;     /* 朱砂红 */
  --gold: #B8863B;         /* 秋金 */
  --pine: #3E4A3A;         /* 松烟绿 */
  --ink-soft: #5A5044;     /* 棕灰 */
  --paper-warm: #FCF6E8;   /* 浅米白 */
  --card-cream: #EDE4CD;   /* 米金卡片底 */
  --card-light: #F8F3E6;   /* 浅米白卡片底 */
  --gold-stroke: rgba(184, 134, 59, .35);
  --serif: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  --sans: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ---------- Reset / Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  font-size: min(calc(100vw / 7.5), 100px);
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--sans);
  color: var(--ink);
  background: #1D1812; /* 大屏两侧留白底 */
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img { display: block; width: 100%; }
button {
  font-family: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
ul { list-style: none; }

#app {
  max-width: 7.5rem;
  margin: 0 auto;
  background: var(--paper);
  box-shadow: 0 0 0.4rem rgba(0, 0, 0, .4);
  overflow: hidden;
  position: relative;
}

/* ---------- 页面切换 ---------- */
.page { display: none; }
.page.active { display: block; animation: pageIn .3s ease-out both; }
.page-ending.active { display: flex; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(.2rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 通用按压反馈 */
.line-card, .nav-btn, .back-float, .btn-cover-top, .btn-back-cover, .cover-arrow, .music-btn {
  transition: transform .15s ease, opacity .15s ease;
}
.line-card:active, .nav-btn:active, .back-float:active,
.btn-cover-top:active, .btn-back-cover:active, .cover-arrow:active, .music-btn:active {
  transform: scale(.96);
}

/* ---------- 背景音乐按钮（全局 fixed 右上角） ---------- */
.music-btn {
  position: fixed;
  top: calc(.32rem + env(safe-area-inset-top));
  right: .32rem;
  z-index: 60;
  width: .72rem;
  height: .72rem;
  border-radius: 50%;
  background: rgba(38, 32, 26, .78);
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  opacity: .9;
}
.music-btn:active { transform: scale(.92); }
.music-btn .music-ico {
  width: .4rem;
  height: .4rem;
  color: var(--gold);
  display: block;
}
.music-btn .slash { display: block; }
.music-btn.is-playing .slash { display: none; }
.music-btn.is-playing {
  opacity: 1;
  background: rgba(38, 32, 26, .85);
}
.music-btn.is-playing::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0;
  animation: musicPulse 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes musicPulse {
  0%   { transform: scale(.95); opacity: .55; }
  100% { transform: scale(1.28); opacity: 0; }
}
/* 大屏对齐 #app 右边（与 750px 容器右内缘对齐） */
@media (min-width: 750px) {
  .music-btn { right: calc(50% - 3.75rem + .32rem); }
}

/* =====================================================
   P1 封面页
   ===================================================== */
.page-cover {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 11rem;
  overflow: hidden;
  background: var(--ink);
}
.cover-bg {
  position: absolute; inset: 0;
  background: url('../assets/img/cover.webp') center / cover no-repeat;
  animation: heroIn .6s ease-out both;
}
@keyframes heroIn {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: scale(1); }
}
.cover-mask {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, .45) 55%,
    rgba(0, 0, 0, .82) 100%);
}
.cover-copy {
  position: absolute;
  left: .48rem; right: .48rem;
  bottom: 1.44rem;
  z-index: 2;
}
.cover-kicker {
  font-size: .24rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: .14rem;
}
.cover-goldline {
  display: block;
  width: .64rem; height: 2px;
  background: var(--gold);
  margin: .42rem 0 .46rem;
}
.cover-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 1.04rem;
  line-height: 1.15;
  color: var(--paper-warm);
  letter-spacing: .04rem;
}
.cover-sub {
  font-family: var(--serif);
  font-weight: 600;
  font-size: .32rem;
  color: var(--paper-warm);
  margin-top: .26rem;
  letter-spacing: .01rem;
}
.cover-desc {
  font-size: .21rem;
  font-weight: 400;
  line-height: 1.85;
  color: #E8DFCE;
  margin-top: .48rem;
}
.cover-arrow {
  position: absolute;
  left: 50%;
  bottom: .56rem;
  transform: translateX(-50%);
  z-index: 2;
  padding: .1rem;
  animation: floatY 1.2s ease-in-out infinite;
}
.cover-arrow:active { transform: translateX(-50%) scale(.96); }
@keyframes floatY {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, .08rem); }
}

/* =====================================================
   P2 目录导航页
   ===================================================== */
.page-index {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--paper);
  padding: .72rem .48rem calc(.6rem + env(safe-area-inset-bottom));
}
.btn-cover-top {
  position: absolute;
  top: 1.2rem; right: .32rem;
  width: 1.5rem; height: .56rem;
  border: 1px solid var(--cinnabar);
  color: var(--cinnabar);
  font-size: .18rem;
  font-weight: 500;
  background: var(--paper-warm);
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
}
.index-head { text-align: center; }
.index-kicker {
  font-size: .22rem;
  font-weight: 500;
  color: var(--cinnabar);
  letter-spacing: .01rem;
}
.index-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: .62rem;
  color: var(--ink);
  margin-top: .16rem;
  letter-spacing: .04rem;
}
.index-slogan {
  font-size: .22rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: .18rem;
  letter-spacing: .04rem;
}
.goldline-center {
  display: block;
  width: .48rem; height: 2px;
  background: var(--gold);
  margin: .26rem auto 0;
}
.index-cards { margin-top: .56rem; }
.index-cards .line-card + .line-card { margin-top: .4rem; }

.line-card {
  background: var(--paper-warm);
  border: 1px solid var(--gold-stroke);
  cursor: pointer;
}
.line-card-img { height: 3rem; overflow: hidden; }
.line-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.line-card-info { padding: .32rem; }
.spot-head {
  display: flex;
  align-items: center;
  gap: .14rem;
}
.line-card-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: .32rem;
  color: var(--ink);
}
.line-card-tags {
  font-size: .2rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: .16rem;
}
.line-card-more {
  font-size: .2rem;
  font-weight: 500;
  color: var(--cinnabar);
  margin-top: .16rem;
}
.index-foot {
  margin-top: .52rem;
  text-align: center;
  font-size: .19rem;
  color: var(--ink-soft);
}

/* 题章方块（壹贰叁肆伍） */
.seal {
  flex: none;
  width: .44rem; height: .44rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: .24rem;
  color: var(--paper-warm);
}
.seal-red   { background: var(--cinnabar); }
.seal-green { background: var(--pine); }

/* =====================================================
   P3 / P4 线路页
   ===================================================== */
.page-line {
  background: var(--paper);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 返回目录浮窗 */
.back-float {
  position: fixed;
  top: calc(.4rem + env(safe-area-inset-top));
  left: .4rem;
  z-index: 50;
  width: 1.9rem; height: .64rem;
  background: var(--ink);
  border-radius: .32rem;
  color: var(--paper-warm);
  font-size: .2rem;
  font-weight: 500;
  display: none;
  align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
/* 显隐由 JS 控制（仅 P3/P4 激活时显示） */
.page-line .back-float.is-visible { display: flex; }

/* 头图 */
.line-hero {
  position: relative;
  height: 6.2rem;
  overflow: hidden;
  background: var(--ink);
}
.hero-bg {
  position: absolute; inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  animation: heroIn .6s ease-out both;
}
.hero-mask {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, .45) 55%,
    rgba(0, 0, 0, .85) 100%);
}
.hero-copy {
  position: absolute;
  left: .48rem; right: .48rem;
  bottom: .4rem;
  z-index: 2;
}
.hero-seal {
  display: inline-flex;
  align-items: center; justify-content: center;
  height: .4rem;
  padding: 0 .18rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: .22rem;
  color: var(--paper-warm);
}
.theme-red   .hero-seal { background: var(--cinnabar); }
.theme-green .hero-seal { background: var(--pine); }
.hero-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: .46rem;
  color: var(--paper-warm);
  margin-top: .2rem;
  letter-spacing: .01rem;
}
.hero-sub {
  font-size: .2rem;
  font-weight: 500;
  color: var(--paper-warm);
  opacity: .92;
  margin-top: .16rem;
}

/* 线路概况 */
.line-brief { padding: .48rem .48rem .56rem; }
.brief-fit {
  display: flex;
  align-items: baseline;
  gap: .2rem;
  font-size: .2rem;
  font-weight: 500;
}
.fit-label { color: var(--cinnabar); }
.fit-val   { color: var(--ink); }
.brief-text {
  font-size: .21rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-top: .22rem;
}

/* 章节标题行（金线 + 标题 + 右延金线） */
.sec-head {
  display: flex;
  align-items: center;
  gap: .18rem;
  padding: 0 .48rem;
}
.sec-dash {
  flex: none;
  width: .28rem; height: 2px;
  background: var(--gold);
}
.sec-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: .36rem;
  color: var(--ink);
}
.sec-rule {
  flex: 1;
  height: 1px;
  background: var(--gold-stroke);
  transform-origin: left center;
}
/* 金线延展动效 */
[data-anim] .sec-rule,
[data-anim].sec-head .sec-rule { transform: scaleX(0); }
[data-anim].in .sec-rule,
.sec-head.in .sec-rule { transition: transform .4s ease-out; transform: scaleX(1); }

/* 点位块 */
.spot { margin-top: .48rem; }
.spot-img {
  height: 4.6rem;
  overflow: hidden;
  background: var(--card-cream);
}
.spot-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.spot-body { padding: .44rem .48rem .08rem; }
.spot-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: .32rem;
  color: var(--ink);
}
.spot-addr {
  font-size: .19rem;
  font-weight: 500;
  color: var(--gold);
  margin-top: .18rem;
}
.spot-desc {
  font-size: .21rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-top: .18rem;
}
.spot-meta {
  font-size: .19rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--pine);
  margin-top: .24rem;
  padding-bottom: .08rem;
}
.meta-bar { opacity: .55; margin: 0 .06em; }

/* 副章节（住宿/美食/交通） */
.sub-sec { margin-top: .56rem; }
.band-cream { background: var(--card-cream); padding: .48rem .48rem .56rem; }
.band-paper { background: var(--paper);     padding: .56rem .48rem; }
.sub-head {
  display: flex;
  align-items: center;
  gap: .18rem;
}
.sub-head .sec-dash { width: .24rem; }
.sub-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: .3rem;
  color: var(--ink);
}
.sub-img {
  margin-top: .32rem;
  height: 3.6rem;
  overflow: hidden;
}
.sub-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.sub-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: .27rem;
  color: var(--ink);
  margin-top: .32rem;
}
.sub-desc {
  font-size: .2rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-top: .16rem;
}
.food-row {
  font-size: .2rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-top: .18rem;
}
.food-row + .food-row { margin-top: .12rem; }
.food-label { font-weight: 500; color: var(--ink); }

/* 交通导航卡（P3） */
.navi-card {
  display: flex;
  align-items: stretch;
  background: var(--card-light);
  border-radius: .1rem;
  overflow: hidden;
  margin-top: .28rem;
}
.navi-tag {
  flex: none;
  width: .88rem;
  min-height: .88rem;
  display: flex; align-items: center; justify-content: center;
  font-size: .2rem;
  font-weight: 500;
  color: var(--paper-warm);
}
.tag-red   { background: var(--cinnabar); }
.tag-green { background: var(--pine); }
.navi-body { flex: 1; padding: .24rem .24rem .2rem; min-width: 0; }
.navi-title { font-size: .17rem; font-weight: 500; }
.t-red   { color: var(--cinnabar); }
.t-green { color: var(--pine); }
.navi-route {
  font-size: .18rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
  margin-top: .12rem;
}
.navi-note {
  font-size: .15rem;
  font-weight: 400;
  color: var(--pine);
  margin-top: .12rem;
}

/* 底部导航行 */
.page-nav {
  margin-top: .56rem;
  background: var(--ink);
  padding: .28rem .48rem;
  display: flex;
  gap: .16rem;
}
.nav-btn {
  height: .72rem;
  font-size: .2rem;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap;
}
.nav-ghost {
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
}
.nav-solid {
  flex: 1;
  background: var(--cinnabar);
  color: var(--paper-warm);
}
.w-catalog { width: 1.7rem; }
.w-line    { width: 2.2rem; }

/* 线路页页脚 */
.line-foot {
  background: var(--paper);
  text-align: center;
  padding: .5rem .48rem calc(.5rem + env(safe-area-inset-bottom));
}
.line-foot .goldline-center { margin-top: 0; }
.foot-text {
  font-size: .19rem;
  font-weight: 500;
  color: var(--gold);
  margin-top: .18rem;
  letter-spacing: .04rem;
}

/* =====================================================
   P5 出行贴士收尾页
   ===================================================== */
.page-ending {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ink);
  overflow: hidden;
  flex-direction: column;
}
.end-bg {
  position: absolute; inset: 0;
  background: url('../assets/img/ending.webp') center / cover no-repeat;
  animation: heroIn .6s ease-out both;
}
.end-mask {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .15) 0%,
    rgba(0, 0, 0, .32) 35%,
    rgba(0, 0, 0, .62) 68%,
    rgba(0, 0, 0, .85) 100%);
}
.end-copy {
  position: relative;
  z-index: 2;
  padding: 6.3rem .64rem 0;
}
.end-kicker {
  font-size: .22rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: .08rem;
}
.end-title {
  font-family: var(--serif);
  font-weight: 900;
  font-size: .72rem;
  color: var(--paper-warm);
  margin-top: .16rem;
  letter-spacing: .03rem;
}
.tips-list { margin-top: .4rem; }
.tip {
  display: flex;
  align-items: center;
  gap: .14rem;
  font-size: .19rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--paper-warm);
  margin-top: .22rem;
  opacity: 0;
  transform: scale(.6);
}
.tip.in {
  animation: tipIn .35s ease-out forwards;
}
@keyframes tipIn {
  to { opacity: 1; transform: scale(1); }
}
.tip-dot {
  flex: none;
  width: .12rem; height: .12rem;
  background: var(--gold);
}
.end-quote {
  font-family: var(--serif);
  font-weight: 700;
  font-size: .4rem;
  line-height: 1.6;
  color: var(--paper-warm);
  margin-top: .48rem;
}
.btn-back-cover {
  position: relative;
  z-index: 2;
  margin: 2.2rem auto 0;
  width: 3rem; height: .8rem;
  background: var(--ink);
  border: 1px solid var(--gold);
  border-radius: .4rem;
  color: #C9A558;
  font-size: .2rem;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}
.end-foot {
  position: relative;
  z-index: 2;
  margin-top: auto;
  text-align: left;
  padding: .5rem .48rem calc(.5rem + env(safe-area-inset-bottom));
}
.end-foot .foot-text { margin-top: 0; }
.foot-note {
  font-size: .13rem;
  font-weight: 400;
  color: rgba(232, 223, 206, .45);
  margin-top: .14rem;
}