/* =====================================================================
   徐州历史人物数字文化馆 · 美学系统 v2
   设计语言：宣纸 · 水墨 · 朱砂 · 留白 · 真书法
   原则：克制为主，朱砂只点睛；大留白；墨分五色；钤印为饰
   ===================================================================== */

:root{
  /* 纸 */
  --paper:#f4ecdb;
  --paper-2:#ece1c9;
  --paper-card:#fbf6ea;
  /* 墨（分五色层次） */
  --ink:#211b16;
  --ink-2:#473c30;
  --ink-3:#8a7a63;
  /* 朱砂（印泥，极克制） */
  --cinnabar:#a8302a;
  --cinnabar-2:#bd4a3f;
  /* 金（仅极细点缀，几乎不用） */
  --gold:#9a7b3f;
  /* 线 */
  --line:rgba(40,30,20,.12);
  --line-soft:rgba(40,30,20,.07);

  --font-kai:'Ma Shan Zheng', 'STKaiti','KaiTi','Songti SC',serif;
  --font-serif:'Noto Serif SC','Songti SC','STSong',serif;
  --font-en:'Cormorant Garamond','Times New Roman',serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-serif);
  background:#1a1510; color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
#app{
  max-width:480px;margin:0 auto;min-height:100vh;
  background:var(--paper);position:relative;
  box-shadow:0 0 80px rgba(0,0,0,.55);
  overflow:hidden;
}
.page{display:none;min-height:100vh}
.page.active{display:block}

/* 入场动效 */
.page.enter{animation:pageIn .55s cubic-bezier(.22,.61,.36,1) both}
@keyframes pageIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* 宣纸肌理（极淡纤维 + 角落墨晕） */
.paper{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-color:var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 12% 8%, rgba(40,30,22,.05), transparent 40%),
    radial-gradient(ellipse at 88% 92%, rgba(40,30,22,.06), transparent 45%);
  background-blend-mode:multiply,normal,normal;
  opacity:.9;
}
/* 淡墨远山 */
.ink-mountain{
  position:absolute;left:0;right:0;bottom:0;height:62%;
  width:100%;pointer-events:none;z-index:0;opacity:.85;
}

/* ===================== 首页 ===================== */
.home-inner{
  position:relative;z-index:2;
  min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  padding:64px 32px 44px;text-align:center;
}

.hero{position:relative;margin-bottom:54px}
.hero-kicker{
  font-family:var(--font-serif);font-weight:300;
  font-size:13px;letter-spacing:.7em;color:var(--ink-3);
  margin:0 0 34px;text-indent:.7em;
}
.hero-title{
  font-family:var(--font-kai);font-weight:400;
  font-size:54px;line-height:1.28;color:var(--ink);
  margin:0;letter-spacing:.02em;
}
.hero-title .ht-line{display:block;white-space:nowrap}
.hero-title .ht-red{color:var(--cinnabar)}
.hero-sub{
  font-family:var(--font-serif);font-weight:300;
  font-size:14px;letter-spacing:.42em;color:var(--ink-2);
  margin:30px 0 0;text-indent:.42em;
}

/* 朱文闲章 */
.seal{
  position:absolute;right:-2px;bottom:-44px;
  width:54px;height:auto;opacity:1;
  transform:rotate(-4deg);
  pointer-events:none;
}

/* 三入口 */
.entries{width:100%;max-width:330px;display:flex;flex-direction:column;gap:14px}
.entry{
  position:relative;display:flex;align-items:center;gap:16px;
  padding:17px 20px;
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:2px;
  text-decoration:none;color:var(--ink);
  transition:transform .28s ease, box-shadow .28s ease, background .28s ease;
}
.entry::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;
  background:var(--cinnabar);opacity:0;transition:opacity .28s ease;
}
.entry:active{transform:translateY(1px);background:#fff}
.entry:hover::before{opacity:1}
.entry-ico{
  font-family:var(--font-kai);font-size:20px;color:var(--ink-2);
  width:38px;flex:0 0 38px;text-align:center;line-height:1.1;
}
.entry-text{flex:1;display:flex;flex-direction:column;gap:3px;text-align:left}
.entry-t{font-family:var(--font-serif);font-weight:500;font-size:18px;letter-spacing:.18em}
.entry-en{
  font-family:var(--font-en);font-size:11px;letter-spacing:.34em;
  color:var(--ink-3);text-transform:uppercase;
}
.entry-arrow{
  color:var(--ink-3);font-size:19px;transition:transform .28s ease,color .28s ease;
}
.entry:hover .entry-arrow{transform:translateX(4px);color:var(--cinnabar)}

.home-foot{
  margin-top:46px;font-family:var(--font-serif);font-weight:300;
  font-size:11px;letter-spacing:.28em;color:var(--ink-3);text-indent:.28em;
}

/* 首页 stagger 动效 */
.home .hero-kicker{animation:rise .7s .05s both}
.home .hero-title{animation:rise .8s .16s both}
.home .hero-sub{animation:rise .8s .32s both}
.home .entries{animation:rise .8s .46s both}
.home .home-foot{animation:rise .8s .62s both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ===================== 顶栏 ===================== */
.bar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;
  height:52px;padding:0 14px;
  background:var(--ink);color:#f1e7d2;
  font-family:var(--font-serif);font-size:16px;letter-spacing:.18em;
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 2px 10px rgba(0,0,0,.18);
}
.bar .back{color:#e9ddc4;text-decoration:none;font-size:15px;min-width:56px;letter-spacing:.05em}
.bar .bar-t{flex:1;text-align:center;font-weight:500}
.bar .bar-sp{min-width:56px}

/* ===================== 人物图鉴 ===================== */
.filters{
  display:flex;gap:8px;padding:14px 14px;overflow-x:auto;
  background:linear-gradient(180deg, var(--paper-2), var(--paper));
  position:sticky;top:52px;z-index:19;
  border-bottom:1px solid var(--line);
}
.filters::-webkit-scrollbar{display:none}
.fbtn{
  flex:0 0 auto;padding:7px 16px;border-radius:1px;
  border:1px solid var(--line);
  background:var(--paper-card);color:var(--ink-2);
  font-family:var(--font-serif);font-size:13px;letter-spacing:.1em;
  cursor:pointer;white-space:nowrap;transition:all .2s ease;
}
.fbtn.on{background:var(--ink);color:#f1e7d2;border-color:var(--ink)}

.fig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px 14px}
.suit-label{
  grid-column:1/-1;font-family:var(--font-kai);
  font-size:21px;color:var(--ink);letter-spacing:.2em;
  margin:18px 0 6px;text-align:center;
}
.suit-label .cnt{font-family:var(--font-serif);font-size:12px;color:var(--ink-3);letter-spacing:.1em}

.fig-card{
  position:relative;background:var(--paper-card);
  border:1px solid var(--line);border-radius:2px;
  padding:14px 6px;text-align:center;cursor:pointer;
  aspect-ratio:3/4;
  display:flex;flex-direction:column;justify-content:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.fig-card:active{transform:scale(.96);box-shadow:0 0 0 1px var(--cinnabar)}
.fig-rank{font-family:var(--font-kai);font-size:23px;color:var(--cinnabar);line-height:1}
.fig-suit{font-size:12px;color:var(--ink-3);margin-top:3px}
.fig-name{font-family:var(--font-serif);font-weight:500;font-size:17px;color:var(--ink);margin-top:7px;letter-spacing:.12em}
.fig-dyn{font-size:10px;color:var(--ink-3);margin-top:3px;letter-spacing:.08em}

/* ===================== 人物详情 ===================== */
.detail{padding:20px 20px 56px;position:relative}
.detail-fig{text-align:center;position:relative;padding:8px 0 4px}
.detail-fig img{
  width:58%;max-width:220px;border-radius:2px;
  border:6px solid var(--paper-card);
  box-shadow:0 8px 22px rgba(40,28,18,.28);
}
.detail-hero{text-align:center;padding:18px 0 22px;position:relative}
.detail-hero::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:46px;height:2px;background:var(--cinnabar);
}
.dh-rank{font-family:var(--font-kai);font-size:22px;color:var(--cinnabar)}
.dh-name{font-family:var(--font-kai);font-size:38px;color:var(--ink);margin:6px 0 12px;letter-spacing:.08em}
.dh-tag{
  display:inline-block;font-family:var(--font-serif);font-size:11px;
  color:var(--ink-2);background:var(--paper-2);
  border:1px solid var(--line);padding:3px 11px;margin:2px 3px;letter-spacing:.1em;
}
.detail-quote{
  font-family:var(--font-kai);font-size:19px;color:var(--cinnabar);
  text-align:center;line-height:1.7;letter-spacing:.05em;
  margin:18px 6px 22px;position:relative;
}
.detail-quote::before{content:"「";margin-right:2px}
.detail-quote::after{content:"」";margin-left:2px}

.d-row{margin:18px 0;padding-left:15px;border-left:2px solid var(--cinnabar)}
.d-row .d-k{
  font-family:var(--font-serif);font-size:13px;color:var(--cinnabar);
  font-weight:500;letter-spacing:.22em;
}
.d-row .d-v{
  font-family:var(--font-serif);font-size:14px;color:var(--ink-2);
  line-height:1.95;margin-top:6px;letter-spacing:.02em;
}

/* ===================== 攻略 ===================== */
.travel{padding:20px 18px 56px}
.travel-intro{
  font-family:var(--font-serif);font-size:14px;line-height:1.95;
  color:var(--ink-2);letter-spacing:.02em;
  background:var(--paper-card);border:1px solid var(--line);
  border-left:2px solid var(--cinnabar);
  border-radius:2px;padding:16px 18px;margin-bottom:26px;position:relative;
}
.travel-intro::before{
  content:"引";position:absolute;right:12px;top:4px;
  font-family:var(--font-kai);font-size:40px;color:var(--ink);opacity:.07;
}

.route-name{
  font-family:var(--font-kai);font-size:26px;color:var(--ink);
  letter-spacing:.1em;margin:0 0 14px;position:relative;
}
.route-name::after{
  content:"";position:absolute;left:0;bottom:-7px;width:40px;height:2px;background:var(--cinnabar);
}
.route-block{margin-bottom:30px}
.day{
  background:var(--paper-card);border:1px solid var(--line);
  border-radius:2px;padding:15px 17px;margin-bottom:11px;
}
.day-title{font-family:var(--font-serif);font-weight:500;font-size:15px;color:var(--ink);letter-spacing:.1em;margin-bottom:5px}
.day-note{font-family:var(--font-serif);font-size:13px;color:var(--ink-2);line-height:1.9}
.day-spots{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.chip{
  font-family:var(--font-serif);font-size:11px;color:var(--cinnabar);
  border:1px solid var(--cinnabar);border-radius:1px;padding:3px 11px;letter-spacing:.08em;
}

.sec-h{
  font-family:var(--font-kai);font-size:23px;color:var(--ink);
  letter-spacing:.12em;margin:30px 0 14px;position:relative;
}
.sec-h::after{
  content:"";position:absolute;left:0;bottom:-6px;width:36px;height:2px;background:var(--cinnabar);
}
.spot{
  background:var(--paper-card);border:1px solid var(--line);
  border-radius:2px;padding:15px 17px;margin-bottom:11px;
}
.spot-top{display:flex;justify-content:space-between;align-items:center}
.spot-name{font-family:var(--font-serif);font-weight:500;font-size:15px;color:var(--ink);letter-spacing:.08em}
.spot-tag{font-family:var(--font-serif);font-size:10px;color:var(--ink-3);border:1px solid var(--line);padding:2px 9px;letter-spacing:.1em}
.spot-desc{font-family:var(--font-serif);font-size:13px;color:var(--ink-2);line-height:1.9;margin-top:7px}
.spot-rel{font-family:var(--font-serif);font-size:11px;color:var(--cinnabar);margin-top:7px;letter-spacing:.06em}

.food-grid,.souv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.food,.souv{
  background:var(--paper-card);border:1px solid var(--line);
  border-radius:2px;padding:15px;
}
.food-name,.souv-name{font-family:var(--font-serif);font-weight:500;font-size:15px;color:var(--ink);letter-spacing:.1em}
.food-desc,.souv-desc{font-family:var(--font-serif);font-size:12px;color:var(--ink-2);line-height:1.8;margin-top:5px}

/* ===================== 关于 ===================== */
.about{padding:26px 22px 56px;font-family:var(--font-serif);font-size:14px;line-height:2;color:var(--ink-2);letter-spacing:.02em}
.about h3{
  font-family:var(--font-kai);color:var(--ink);font-size:25px;
  letter-spacing:.1em;margin:26px 0 10px;font-weight:400;
}
.about h3:first-child{margin-top:6px}
.about .quote{
  font-family:var(--font-kai);font-size:22px;color:var(--cinnabar);
  text-align:center;letter-spacing:.1em;margin:22px 0;line-height:1.8;
}