/* ============================================================
   吃茶官网 · 首页样式（依赖 base.css）
   组织：序幕 → 理念过场 → 四席 → 席内界面 → 品牌故事 → 收幕 → 响应式
   ============================================================ */

/* ---------- 首屏 · 序幕 ---------- */
.hero { height: 100svh; min-height: 640px; }
.hero-media img { filter: saturate(0.92) brightness(0.9); }
.hero-veil {
  background:
    linear-gradient(180deg, rgba(16,28,22,0.62) 0%, rgba(16,28,22,0.28) 42%, rgba(16,28,22,0.78) 100%),
    linear-gradient(90deg, rgba(16,28,22,0.55) 0%, rgba(16,28,22,0.12) 55%, rgba(16,28,22,0.35) 100%);
}
.hero-stage {
  position: relative; z-index: 2; height: 100%;
  max-width: 1200px; margin: 0 auto; padding: 0 64px;
  display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 64px);
}
.hero-rule {
  width: 1px; height: clamp(160px, 30vh, 260px); flex: none;
  background: linear-gradient(180deg, transparent, rgba(181,133,62,0.85), transparent);
  animation: rise .9s var(--ease) .35s both;
}
.hero-title {
  writing-mode: vertical-rl;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(84px, 12.5vw, 150px);
  line-height: 1; letter-spacing: 0.32em;
  color: #f2efe6;
  text-shadow: 0 4px 44px rgba(10,18,14,0.55);
  animation: rise 1s var(--ease) .2s both;
}
.hero-side {
  writing-mode: vertical-rl;
  font-size: clamp(12px, 1.3vw, 15px);
  letter-spacing: 0.52em; color: rgba(233,229,218,0.78);
  padding-top: 8px; flex: none;
  animation: rise .9s var(--ease) .55s both;
}
.scroll-hint { animation: rise 1s var(--ease) 1.15s both; }

/* ---------- 理念过场 ---------- */
.intro { background: var(--bg); padding: clamp(120px, 16vh, 190px) 0; text-align: center; }
.intro-rule { width: 32px; height: 2px; background: var(--accent2); margin: 0 auto 34px; }
.intro-line {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(23px, 3.3vw, 34px); letter-spacing: 0.14em; color: var(--ink);
}
.intro-line em { font-style: normal; color: var(--accent2); margin: 0 0.35em; }
.intro-sub { margin-top: 20px; font-size: 15px; letter-spacing: 0.1em; color: var(--muted); }

/* ---------- 四席 ---------- */
.seat {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  padding: clamp(96px, 12vh, 150px) 0;
  border-top: 1px solid var(--rule);
}
.seat.tint { background: var(--bg2); }
.seat.dark { background: var(--deep); border-top-color: rgba(233,229,218,0.14); }

.seat-edge {
  position: absolute; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; font-size: 12px; letter-spacing: 0.62em;
  color: var(--faint); white-space: nowrap;
}
.seat-edge.left { left: 22px; }
.seat-edge.right { right: 22px; }
.seat.dark .seat-edge { color: var(--deep-muted); }

.seat-grid {
  display: grid; grid-template-columns: 5fr 6fr;
  gap: clamp(40px, 6vw, 90px); align-items: center; width: 100%;
}
.seat.alt .seat-copy { order: 2; }
.seat.alt .seat-visual { order: 1; }

.seat-no { font-family: var(--serif); font-size: 13px; font-weight: 700; letter-spacing: 0.58em; color: var(--accent2); }
.seat-char {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(100px, 10.5vw, 164px); line-height: 1.06; color: var(--ink);
}
.seat.dark .seat-char { color: #f0ede2; }

.seat-tag { display: flex; align-items: center; gap: 12px; margin: 14px 0 22px; }
.who { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; padding: 3px 13px; border-radius: 999px; }
.who.c { color: var(--accent); background: rgba(62,124,91,0.1); }
.who.b { color: var(--accent2); background: rgba(181,133,62,0.14); }
.seat.dark .who.c { color: #8fc4a7; background: rgba(143,196,167,0.14); }
.seat.dark .who.b { color: #d4ac72; background: rgba(212,172,114,0.15); }
.seat-tag em { font-style: normal; font-size: 13.5px; letter-spacing: 0.22em; color: var(--muted); }
.seat.dark .seat-tag em { color: var(--deep-muted); }

.seat-headline {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(25px, 2.9vw, 35px); line-height: 1.55; color: var(--ink);
}
.seat.dark .seat-headline { color: #ede9dd; }
.seat-desc { margin-top: 16px; font-size: 15.5px; line-height: 2.05; color: var(--muted); max-width: 34em; }
.seat.dark .seat-desc { color: #b9c0b4; }

.seat-points { margin-top: 26px; display: flex; flex-direction: column; gap: 11px; }
.seat-points li { display: flex; gap: 12px; align-items: baseline; font-size: 14.5px; color: #5c5749; letter-spacing: 0.02em; }
.seat-points li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent2); flex: none; transform: translateY(-3px); }
.seat.dark .seat-points li { color: #c7cec2; }

.seat-visual { display: flex; justify-content: center; }
.seat.dark .frame { background: rgba(233,229,218,0.05); border-color: rgba(233,229,218,0.22); box-shadow: 0 30px 70px -24px rgba(0,0,0,0.5); }
.seat.dark .frame:hover { box-shadow: 0 40px 88px -26px rgba(0,0,0,0.55); }

/* ---------- 席内界面 · App 顶栏（城市 + 搜索 + 扫码/消息，蓝渐变底） ---------- */
.ahead { flex: none; display: flex; flex-direction: column; background: linear-gradient(180deg, #AAE7FF 0%, #E3F7FF 58%, #F9F9F9 100%); }
.atop { display: flex; align-items: center; gap: 7px; padding: 4px 11px 2px; }
.acity { font-size: 10.5px; font-weight: 600; color: #000; display: flex; align-items: center; flex: none; }
.acity::after { content: ""; width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4.5px solid #666; margin-left: 2px; }
.asearch { flex: 1; min-width: 0; height: 20px; border-radius: 999px; background: rgba(255,255,255,0.55); border: 1px solid #DDDDDD; display: flex; align-items: center; gap: 4px; padding: 0 7px; }
.asearch i { width: 10px; height: 10px; flex: none; background: #666; -webkit-mask: var(--ic-search) center/contain no-repeat; mask: var(--ic-search) center/contain no-repeat; }
.asearch span { font-size: 8px; color: #666; white-space: nowrap; }
.aicon { width: 12px; height: 12px; flex: none; background: #000; -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; }
.aicon.scan { --ic: var(--ic-scan); }
.aicon.sms { --ic: var(--ic-sms); }

/* ---------- 席内界面 · App 内容区与底部导航 ---------- */
.mbody { flex: 1; overflow: hidden; padding: 9px 10px; display: flex; flex-direction: column; gap: 9px; background: #FAFAFA; }
.bnav { flex: none; display: flex; align-items: center; padding: 6px 4px 8px; background: #fff; border-top: 1px solid #EEEEEE; }
.bn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 8px; color: #666; }
.bn i { width: 15px; height: 15px; background: #666; -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; }
.bn.ic-home i { --ic: var(--ic-home); }
.bn.ic-art i { --ic: var(--ic-art); }
.bn.ic-cat i { --ic: var(--ic-cat); }
.bn.ic-me i { --ic: var(--ic-me); }
.bn.on { color: #007AFF; }
.bn.on i { background: #007AFF; }
.bn.pub i { width: 26px; height: 26px; border-radius: 9px; background: linear-gradient(180deg, #BBDEFB, #007AFF); -webkit-mask: none; mask: none; position: relative; box-shadow: 0 2px 6px rgba(0,122,255,0.35); }
.bn.pub i::before, .bn.pub i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: #fff; transform: translate(-50%, -50%); }
.bn.pub i::after { transform: translate(-50%, -50%) rotate(90deg); }

/* ---------- 席内界面 · 动态卡片（白底圆角卡 + 头像/企业徽章/曝光数 + 点赞评论） ---------- */
.fcard { background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 11px 10px 9px; display: flex; flex-direction: column; gap: 9px; }
.fcard.faint { opacity: 0.55; }
.fc-head { display: flex; align-items: center; gap: 8px; }
.fc-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fc-nm { display: flex; align-items: center; gap: 4px; min-width: 0; }
.fc-nm i { font-style: normal; font-size: 11px; color: #000; white-space: nowrap; }
.fc-nm i.gold { color: #C79A00; font-weight: 600; }
.fc-time { font-size: 8px; color: #999; }
.fc-eyes { flex: none; display: flex; align-items: center; gap: 3px; font-size: 7.5px; color: #999; }
.fc-eyes i { width: 10px; height: 10px; flex: none; background: #999; -webkit-mask: var(--ic-eye) center/contain no-repeat; mask: var(--ic-eye) center/contain no-repeat; }
.fc-txt { font-size: 10.5px; line-height: 1.6; color: #000; }
.fc-imgs { display: flex; gap: 4px; }
.fc-imgs .img { border-radius: 5px; }
.fc-imgs.one .img { width: 134px; height: 97px; }
.fc-imgs.g9 .img { width: 66px; height: 66px; border-radius: 4px; }
.fc-act { display: flex; border-top: 1px solid #EEEEEE; padding-top: 7px; }
.fc-act > span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; }
.fc-act i { width: 13px; height: 13px; background: #666; -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; }
.fc-act .lk i { --ic: var(--ic-heart); }
.fc-act .cm i { --ic: var(--ic-chat); }
.fc-act em { font-style: normal; font-size: 9.5px; color: #000; }

/* ---------- 席内界面 · 茶品详情（顶部大图 → 信息卡 → 推荐供应商） ---------- */
.pd-hero { position: relative; height: 165px; border-radius: 0; flex: none; }
.pd-back { position: absolute; top: 8px; left: 11px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.92); box-shadow: 0 1px 4px rgba(0,0,0,0.18); }
.pd-back::before { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 12px; background: #000; -webkit-mask: var(--ic-back) center/contain no-repeat; mask: var(--ic-back) center/contain no-repeat; }
.pd-body { flex: 1; overflow: hidden; padding: 10px; display: flex; flex-direction: column; gap: 10px; background: #FAFAFA; }
.pd-card { background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; }
.pd-title { font-size: 13.5px; color: #000; }
.pd-meta { font-size: 8.5px; color: #999; }
.pd-desc { font-size: 9.5px; line-height: 1.7; color: #666; }
.pd-sup-t { font-size: 11px; font-weight: 700; color: #000; margin: 1px 2px 0; }
.pcard { background: #fff; border: 1px solid #DDDDDD; border-radius: 12px; padding: 9px 10px; display: flex; align-items: center; gap: 9px; }
.pc-logo { width: 34px; height: 34px; border-radius: 8px; flex: none; }
.pc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pc-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pc-row i { font-style: normal; font-size: 11px; font-weight: 600; color: #000; white-space: nowrap; }
.pc-addr { display: flex; align-items: center; gap: 3px; font-size: 8px; color: #999; }
.pc-addr::before { content: ""; width: 8px; height: 8px; flex: none; background: #999; -webkit-mask: var(--ic-pin) center/contain no-repeat; mask: var(--ic-pin) center/contain no-repeat; }

/* ---------- 品牌故事 ---------- */
.story { background: var(--bg2); border-top: 1px solid var(--rule); padding: clamp(110px, 14vh, 170px) 0; }
.story-inner { max-width: 760px; margin: 0 auto; padding: 0 32px; text-align: center; }
.story-img { border-radius: 6px; overflow: hidden; box-shadow: 0 26px 60px -30px rgba(26,46,36,0.3); }
.story-img img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.story-no { margin: 46px 0 26px; font-family: var(--serif); font-size: 13px; font-weight: 700; letter-spacing: 0.58em; color: var(--accent2); }
.story-p {
  font-family: var(--serif); font-size: clamp(17px, 2.2vw, 20.5px);
  line-height: 2.15; color: var(--ink); letter-spacing: 0.04em;
}
.story-p + .story-p { margin-top: 18px; }
.story-p em { font-style: normal; color: var(--accent); font-weight: 700; }

/* ---------- 收幕 ---------- */
.close { background: var(--bg); border-top: 1px solid var(--rule); padding: clamp(120px, 16vh, 200px) 0; text-align: center; }
.close-zhu { font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 5vw, 54px); letter-spacing: 0.1em; color: var(--ink); }
.close-sub { margin-top: 18px; font-size: clamp(14.5px, 1.7vw, 17px); letter-spacing: 0.14em; color: var(--muted); }
.close-links { margin-top: 52px; display: flex; justify-content: center; gap: clamp(36px, 6vw, 72px); }
.clink { color: var(--ink); }
.clink::before { background: rgba(34,32,27,0.22); }
.clink::after { background: var(--accent); }
.clink.gold::after { background: var(--accent2); }

/* ---------- 下载面板 ---------- */
.dl-panel { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .55s var(--ease), opacity .4s var(--ease), margin-top .55s var(--ease); }
.dl-panel.open { max-height: 400px; opacity: 1; margin-top: 40px; }
.dl-grid { display: flex; justify-content: center; gap: 34px; }
.dl-item { display: flex; flex-direction: column; align-items: center; gap: 11px; font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }
.qr { width: 112px; height: 112px; border: 1px dashed #c9c3b2; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0.3em; color: var(--faint); }
.dl-note { margin-top: 24px; font-size: 11.5px; letter-spacing: 0.1em; color: var(--faint); }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .seat-edge { display: none; }
}
@media (max-width: 900px) {
  .hero-stage { padding: 0 24px; gap: 22px; }
  .seat { min-height: 0; padding: 96px 0; }
  .seat-grid { grid-template-columns: 1fr; gap: 52px; }
  .seat.alt .seat-copy { order: 0; }
  .seat.alt .seat-visual { order: 1; }
  .seat-visual { justify-content: flex-start; }
  .frame { display: inline-block; }
  .close-links { flex-direction: column; align-items: center; gap: 26px; }
  .story-inner { padding: 0 24px; }
}
@media (max-width: 480px) {
  .phone { width: min(260px, 74vw); }
  .dl-grid { gap: 20px; }
  .qr { width: 96px; height: 96px; }
}