/* ============================================================
   ShanghaiWalk — Design system
   Dark editorial / brand-site. No external assets, no web fonts.
   ============================================================ */

:root {
  --ink: #08090b;
  --ink-2: #101216;
  --ink-3: #171a1f;
  --ink-4: #22262c;
  --paper: #f5f2ec;
  --paper-dim: #a6a29b;
  --paper-faint: #6f6c66;
  --accent: #e2431f;
  --accent-soft: #ff5a33;
  --gold: #c9a227;
  --line: rgba(245, 242, 236, 0.13);
  --line-strong: rgba(245, 242, 236, 0.26);
  --paper-line: rgba(8, 9, 11, 0.14);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial,
    "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  --pad: clamp(1.25rem, 5vw, 5rem);
  --max: 1400px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.02em; line-height: 1.06; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--accent); color: #fff; padding: 0.75rem 1.25rem; font-size: 0.85rem;
}
.skip:focus { left: 0; }

/* ---------- Type scale ---------- */
.display {
  font-size: clamp(3.4rem, 12.5vw, 11rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  font-weight: 600;
}
.h1 {
  font-size: clamp(2.4rem, 7vw, 5.2rem);
  line-height: 0.94;
  letter-spacing: -0.038em;
  font-weight: 600;
}
.h2 {
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 600;
}
.h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--paper-dim);
  font-weight: 600;
  line-height: 1;
}
.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: rgba(245, 242, 236, 0.82);
  max-width: 62ch;
}
.small { font-size: 0.86rem; line-height: 1.6; color: var(--paper-dim); }
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.accent { color: var(--accent); }
.dim { color: var(--paper-dim); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }
main { display: block; min-width: 0; }
section { position: relative; }

.band { padding-block: clamp(4rem, 10vw, 9rem); }
.band--tight { padding-block: clamp(2.5rem, 6vw, 5rem); }
.band--paper { background: var(--paper); color: var(--ink); }
.band--paper .lede { color: rgba(8, 9, 11, 0.7); }
.band--paper .eyebrow { color: rgba(8, 9, 11, 0.5); }
.band--paper .small, .band--paper .dim { color: rgba(8, 9, 11, 0.6); }
.band--ink2 { background: var(--ink-2); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.band--paper .rule { background: var(--paper-line); }

.section-head {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 900px) {
  .section-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem; align-items: end; }
}

/* ---------- Scroll progress ---------- */
.progress {
  position: fixed; inset: 0 auto auto 0; height: 2px; width: 0;
  background: var(--accent); z-index: 120; transition: width 0.1s linear;
}

/* ---------- Header ---------- */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background 0.4s var(--ease), backdrop-filter 0.4s var(--ease), border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.site-head.is-solid {
  background: rgba(8, 9, 11, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}
.head-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.1rem; transition: padding 0.35s var(--ease);
}
.site-head.is-solid .head-inner { padding-block: 0.7rem; }

.wordmark {
  display: inline-flex; align-items: baseline; gap: 0.5ch;
  font-weight: 700; letter-spacing: -0.03em; font-size: 1.06rem; line-height: 1;
}
.wordmark i { font-style: normal; color: var(--accent); }
.wordmark span { font-weight: 400; opacity: 0.55; font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; }

.nav { display: none; }
@media (min-width: 1080px) {
  .nav { display: flex; gap: clamp(1rem, 1.7vw, 1.9rem); align-items: center; }
  .nav a {
    font-size: 0.88rem; white-space: nowrap; letter-spacing: -0.005em;
    color: rgba(245, 242, 236, 0.72); position: relative; padding-block: 0.35rem; transition: color 0.25s;
  }
  .nav a::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
    background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease);
  }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--paper); }
  .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
}

/* 提高特异性：.btn 在文件更后面定义了 display:inline-flex，
   裸的 .head-cta{display:none} 会被它覆盖，导致移动端页头多出一个折行的按钮。 */
.head-inner .head-cta { display: none; }
@media (min-width: 1240px) {
  .head-inner .head-cta { display: inline-flex; }
}

/* 语言切换 —— 中英两版 URL 一一对应，所以永远指向同一页的另一种语言，
   不需要回落到首页。任何视口都显示（窄屏没有桌面导航，但仍有汉堡菜单，
   切换入口必须独立于二者之外）。 */
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 3.1rem; padding: 0.42rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em;
  color: rgba(245, 242, 236, 0.78); white-space: nowrap;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.lang-switch:hover { color: var(--paper); border-color: var(--accent); background: rgba(226, 67, 31, 0.1); }

/* ---------- 中文排版 ----------
   拉丁字体栈里带的负字距（-0.045em 等）是按西文调的，套到汉字上会挤在一起；
   汉字本身是等宽方块，正文行高也要比西文松一档才好读。
   ⚠️ 行高不能照搬西文的 0.86/0.94：汉字占满整个 em 框，
   hero 的 .line-mask（overflow:hidden 逐行入场动画）会把字上下裁掉。 */
body.lang-zh { font-size: 16.5px; line-height: 1.82; }
.lang-zh .display { font-size: clamp(1.9rem, 4.6vw, 3.6rem); line-height: 1.32; letter-spacing: 0; }
/* .line-mask 是 overflow:hidden 的逐行入场动画：汉字占满 em 框且比拉丁字形高，
   行高再松也可能在极端字体下裁到笔画底部，用「内边距 + 等量负外边距」兜底，
   布局尺寸不变但给字形留出溢出空间。 */
.lang-zh .line-mask { padding-bottom: 0.08em; margin-bottom: -0.08em; }
.lang-zh .h1 { font-size: clamp(1.9rem, 4.8vw, 3.3rem); line-height: 1.26; letter-spacing: 0; }
.lang-zh .h2 { line-height: 1.3; letter-spacing: 0; }
.lang-zh .h3 { line-height: 1.4; letter-spacing: 0; }
.lang-zh .eyebrow { letter-spacing: 0.16em; }
.lang-zh .lede { max-width: 42ch; line-height: 1.75; }
.lang-zh .mono { letter-spacing: 0.06em; }
.lang-zh .tag { letter-spacing: 0; }

/* burger */
/* burger —— 两条线用绝对定位，保证打开时是真正的 ✕。
   用 grid + place-items:center 时，auto 轨道会被拉伸，
   两条线的中心相距约 20px，各转 45° 后只会拼成「>」而不是交叉的 ✕。 */
.burger {
  appearance: none; background: none; border: 1px solid var(--line-strong); color: var(--paper);
  position: relative; width: 46px; height: 46px; border-radius: 999px; cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
}
.burger:hover { border-color: var(--accent); }
.burger i {
  position: absolute; left: 50%; top: calc(50% - 0.5px); margin-left: -9px;
  width: 18px; height: 1px; background: currentColor;
  transition: transform 0.35s var(--ease);
}
.burger i:nth-child(1) { transform: translateY(-3px); }
.burger i:nth-child(2) { transform: translateY(3px); }
/* 断点必须与 .nav 的 1080px 一致：否则 940–1079px 之间汉堡隐藏、桌面导航又没出现，
   整段视口宽度将没有任何导航入口。 */
@media (min-width: 1080px) { .burger { display: none; } }
body.nav-open .burger i:nth-child(1) { transform: rotate(45deg); }
body.nav-open .burger i:nth-child(2) { transform: rotate(-45deg); }

/* 移动端菜单。
   三个必须：overflow-y:auto（否则内容比视口高时会从盒子里漏出来叠在页面上）、
   visibility 门控（关闭时不进无障碍树、链接不可 Tab 到）、
   字号随高度收缩（12 个栏目要在矮屏上也基本放得下）。 */
.mobile-nav {
  position: fixed; inset: 0; z-index: 99; background: var(--ink);
  padding: 5.25rem var(--pad) 2.5rem; display: grid; align-content: start; gap: 0;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  transform: translateY(-100%); visibility: hidden;
  transition: transform 0.55s var(--ease-out), visibility 0s linear 0.55s;
}
body.nav-open .mobile-nav {
  transform: none; visibility: visible;
  transition: transform 0.55s var(--ease-out), visibility 0s linear 0s;
}
.mobile-nav a {
  font-size: clamp(1.32rem, 5.4vw, 2.05rem); font-weight: 600; letter-spacing: -0.03em;
  padding-block: clamp(0.42rem, 1.5vh, 0.7rem); border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 1ch;
}
.mobile-nav a span { color: var(--paper-faint); font-size: 0.68rem; letter-spacing: 0.2em; flex: none; }
body.nav-open { overflow: hidden; }
/* 菜单打开时页头必须完全不透明：菜单内部可滚动，滚动的栏目会从页头下方经过，
   透明或半透明页头会和 wordmark 叠字。 */
body.nav-open .site-head,
body.nav-open .site-head.is-solid {
  background: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: var(--line);
}

/* ---------- Buttons ---------- */
.btn {
  --bg: transparent;
  position: relative; display: inline-flex; align-items: center; gap: 0.7ch;
  padding: 0.95rem 1.6rem; border-radius: 999px; border: 1px solid var(--line-strong);
  font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; cursor: pointer;
  overflow: hidden; isolation: isolate; background: var(--bg); color: var(--paper);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper);
  transform: translateY(101%); transition: transform 0.45s var(--ease-out);
}
.btn:hover { color: var(--ink); border-color: var(--paper); }
.btn:hover::before { transform: none; }
.btn .arw { transition: transform 0.4s var(--ease-out); }
.btn:hover .arw { transform: translateX(5px); }

.btn--solid { --bg: var(--accent); border-color: var(--accent); color: #fff; }
.btn--solid::before { background: var(--paper); }
.btn--solid:hover { color: var(--ink); }

.btn--sm { padding: 0.65rem 1.15rem; font-size: 0.82rem; }

.band--paper .btn { color: var(--ink); border-color: var(--paper-line); }
.band--paper .btn::before { background: var(--ink); }
.band--paper .btn:hover { color: var(--paper); border-color: var(--ink); }

.link-u {
  position: relative; display: inline-block;
}
.link-u::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: currentColor; transform-origin: right; transition: transform 0.4s var(--ease);
}
.link-u:hover::after { transform: scaleX(0); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: grid; align-items: end;
  padding-top: 8rem; padding-bottom: clamp(2.5rem, 6vw, 5rem); overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-bg .grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(to right, rgba(245, 242, 236, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245, 242, 236, 0.055) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(120% 90% at 60% 20%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 60% 20%, #000 20%, transparent 78%);
}
.hero-bg .glow {
  position: absolute; width: 90vw; height: 90vw; max-width: 1100px; max-height: 1100px;
  right: -18%; top: -22%; border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 67, 31, 0.22), transparent 62%);
  filter: blur(20px);
}
.hero-bg .glow-2 {
  position: absolute; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px;
  left: -20%; bottom: -30%; border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.14), transparent 65%);
}
.hero-skyline { position: absolute; inset: auto 0 0 0; width: 100%; height: auto; opacity: 0.95; }
.hero-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-route path {
  fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round;
  filter: drop-shadow(0 0 12px rgba(226, 67, 31, 0.55));
}
.hero-route circle { fill: var(--accent); }
@media (max-width: 760px) {
  .hero-route { opacity: 0.45; transform: translateY(16%); }
  .hero-skyline { height: 170px; }
  .hero-bg .grid { background-size: 56px 56px; }
}

.noise {
  position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay; pointer-events: none;
  background-image: 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.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner { position: relative; z-index: 2; width: 100%; }

.hero-kicker { display: flex; align-items: center; gap: 1rem; margin-bottom: clamp(1.25rem, 3vw, 2.25rem); }
.hero-kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(226, 67, 31, 0.6); animation: pulse 2.6s infinite; }
@keyframes pulse {
  70% { box-shadow: 0 0 0 12px rgba(226, 67, 31, 0); }
  100% { box-shadow: 0 0 0 0 rgba(226, 67, 31, 0); }
}

.line-mask { display: block; overflow: hidden; }
.line-mask > span {
  display: block; transform: translateY(112%);
  animation: rise 1.05s var(--ease-out) forwards; animation-delay: var(--d, 0s);
}
@keyframes rise { to { transform: translateY(0); } }

.hero-sub {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: grid; gap: 1.75rem; max-width: 640px;
}
.hero-meta {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.stat b { display: block; font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.stat span { font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-dim); }

.scroll-hint {
  position: absolute; left: var(--pad); bottom: 1.5rem; z-index: 3;
  display: none; align-items: center; gap: 0.75rem; font-size: 0.7rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--paper-faint);
}
.scroll-hint i { display: block; width: 46px; height: 1px; background: var(--line-strong); position: relative; overflow: hidden; }
.scroll-hint i::after { content: ""; position: absolute; inset: 0; background: var(--accent); animation: slide 2.4s var(--ease) infinite; }
@keyframes slide { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@media (min-width: 900px) { .scroll-hint { display: flex; } }

/* ---------- Page header (inner pages) ---------- */
.phead {
  position: relative; padding-top: clamp(8rem, 16vw, 11rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.phead .glow {
  position: absolute; width: 70vw; height: 70vw; max-width: 820px; max-height: 820px;
  right: -10%; top: -30%; border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 67, 31, 0.18), transparent 65%);
}
.phead-inner { position: relative; z-index: 2; }
.phead-decor {
  position: absolute; inset: auto 0 -1px 0; z-index: 0; pointer-events: none;
  opacity: 0.42;
  mask-image: linear-gradient(to top, #000 0%, transparent 88%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 88%);
}
.phead .phead-sky { width: 100%; height: auto; }
.crumbs { display: flex; flex-wrap: wrap; gap: 0.6ch; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 1.5rem; }
.crumbs a:hover { color: var(--paper); }
.crumbs span { opacity: 0.5; }

.metabar {
  display: flex; flex-wrap: wrap; gap: 0; margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.metabar > div {
  flex: 1 1 160px; min-width: 0; padding: 1.1rem 1.25rem 1.1rem 0;
  border-right: 1px solid var(--line);
}
.metabar > div:last-child { border-right: 0; }
.metabar dt { font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 0.4rem; }
.metabar dd { margin: 0; font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em; overflow-wrap: anywhere; }
@media (max-width: 719px) {
  .metabar > div { flex: 1 1 45%; border-right: 1px solid var(--line); }
  .metabar > div:nth-child(2n) { border-right: 0; padding-right: 0; }
  .metabar > div:nth-last-child(-n + 2) { border-bottom: 0; }
}

/* ---------- Route map (SVG) ---------- */
.routemap {
  position: relative; background: linear-gradient(160deg, #12151a 0%, #0b0d10 70%);
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  margin-block: 2rem;
}
.routemap svg { width: 100%; height: auto; display: block; }
.rm-river { fill: none; stroke: rgba(120, 150, 175, 0.1); stroke-width: 26; }
.rm-fabric rect { fill: rgba(245, 242, 236, 0.04); }
.rm-tag { fill: var(--accent); font-size: 7.4px; letter-spacing: 0.22em; font-family: var(--sans); font-weight: 600; }
.rm-grid path { fill: none; stroke: rgba(245, 242, 236, 0.05); stroke-width: 0.5; }
.rm-shadow { fill: none; stroke: rgba(226, 67, 31, 0.16); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.rm-path {
  fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(226, 67, 31, 0.65));
}
.rm-node circle { fill: #0b0d10; stroke: var(--accent); stroke-width: 1.6; }
.rm-node text { fill: var(--paper); font-size: 7.6px; font-weight: 600; font-family: var(--sans); letter-spacing: -0.02em; }
.rm-end circle { fill: var(--paper); }
.rm-label {
  fill: rgba(245, 242, 236, 0.7); font-size: 8px; font-family: var(--sans);
  letter-spacing: 0.02em; font-weight: 500;
}
.rm-cap {
  position: absolute; left: 1rem; bottom: 0.85rem; font-size: 0.62rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--paper-faint);
}

/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (min-width: 1080px) { .grid--3 { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }
@media (min-width: 640px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
  .grid--4 .card { padding: 1.35rem; }
}

/* 月份卡（首页 When to visit 十二宫格） */
.card--month { display: flex; flex-direction: column; gap: 0.7rem; min-height: 168px; }
.card--month .mono { font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.card--month p { font-size: 0.88rem; line-height: 1.5; color: var(--paper-dim); flex: 1; }
.card--month .foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.card--month .tag { font-size: 0.66rem; }
.card--month:hover .foot .arw { transform: translateX(6px); }

.card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  gap: 1.5rem; padding: 1.75rem; min-height: 260px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden; isolation: isolate;
  transition: border-color 0.45s var(--ease), background 0.45s var(--ease), transform 0.6s var(--ease-out);
}
.card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(226, 67, 31, 0.16), transparent 45%);
  transition: opacity 0.5s var(--ease);
}
.card:hover { border-color: var(--line-strong); background: var(--ink-3); }
.card:hover::after { opacity: 1; }
.card .num { font-size: 0.68rem; letter-spacing: 0.24em; color: var(--paper-faint); }
.card h3 { margin-top: 0.75rem; }
.card p { font-size: 0.93rem; color: var(--paper-dim); margin-top: 0.65rem; }
.card .foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-faint); }
.card .foot .arw { transition: transform 0.45s var(--ease-out); color: var(--accent); font-size: 1.05rem; }
.card:hover .foot .arw { transform: translateX(7px); }
.card .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.tag {
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.7rem;
}

/* Feature card (large) */
.card--feature { min-height: 360px; padding: 2rem; }
@media (min-width: 900px) { .card--feature { grid-column: span 2; } }
.card--feature .rt {
  position: absolute; right: -8%; top: -10%; width: 62%; height: 120%; opacity: 0.5;
  transition: transform 0.8s var(--ease-out), opacity 0.6s var(--ease);
}
.card--feature:hover .rt { transform: translateY(-6px) scale(1.04); opacity: 0.85; }

/* ---------- Marquee ---------- */
.marquee {
  --gap: 3rem;
  position: relative; display: flex; overflow: hidden; padding-block: 1.25rem;
  border-block: 1px solid var(--line); user-select: none;
}
.marquee ul { display: flex; gap: var(--gap); padding-right: var(--gap); animation: scrollx 38s linear infinite; flex-shrink: 0; }
.marquee li { font-size: clamp(1.05rem, 2.2vw, 1.6rem); font-weight: 600; letter-spacing: -0.02em; color: rgba(245, 242, 236, 0.32); white-space: nowrap; display: flex; align-items: center; gap: var(--gap); }
.marquee li::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@keyframes scrollx { to { transform: translateX(calc(-100% - var(--gap))); } }
.marquee:hover ul { animation-play-state: paused; }

/* ---------- Article body ---------- */
.doc {
  display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .doc { grid-template-columns: minmax(0, 1fr) 250px; align-items: start; }
  .doc__aside { position: sticky; top: 7rem; }
}
.doc__body { max-width: 74ch; font-size: 1.06rem; line-height: 1.75; color: rgba(245, 242, 236, 0.86); }
.doc__body h2 { margin-top: 2.75rem; margin-bottom: 1rem; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.doc__body h3 { margin-top: 2rem; margin-bottom: 0.65rem; font-size: 1.12rem; }
.doc__body > p:first-of-type {
  font-size: clamp(1.22rem, 1.9vw, 1.5rem);
  line-height: 1.5;
  color: var(--paper);
  letter-spacing: -0.012em;
}
.doc__body > p:first-of-type::first-letter { color: var(--accent); }

.toc { border-left: 1px solid var(--line); padding-left: 1.25rem; }
.toc h4 { font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 1rem; }
.toc ol { display: grid; gap: 0.6rem; counter-reset: t; }
.toc li {
  counter-increment: t; font-size: 0.85rem; color: var(--paper-dim);
  padding-left: 2.4ch; text-indent: -2.4ch; line-height: 1.5;
}
.toc li::before { content: counter(t, decimal-leading-zero) " "; color: var(--paper-faint); font-size: 0.7rem; }
.toc a:hover { color: var(--paper); }

/* Stops */
.stops { display: grid; gap: 0; margin-top: 2.5rem; }
.stop {
  display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 1.25rem;
  padding-block: 1.75rem; border-top: 1px solid var(--line); position: relative;
}
.stop:last-child { border-bottom: 1px solid var(--line); }
.stop .idx {
  font-size: 0.78rem; letter-spacing: 0.12em; color: var(--accent); font-weight: 600;
  display: flex; align-items: center; gap: 0.5rem;
}
.stop .idx::after { content: ""; flex: 1; height: 1px; background: var(--line); }
@media (min-width: 720px) {
  .stop { grid-template-columns: 54px minmax(0, 1fr) 96px; }
}
.stop h3 { font-size: 1.18rem; }
.stop p { margin-top: 0.55rem; color: var(--paper-dim); font-size: 0.98rem; }
.stop .tip {
  margin-top: 0.9rem; font-size: 0.9rem; padding-left: 1rem; border-left: 2px solid var(--accent);
  color: rgba(245, 242, 236, 0.78);
}
.stop .mins { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-faint); text-align: right; padding-top: 0.35rem; }
@media (max-width: 719px) { .stop .mins { display: none; } }

/* ---------- Timeline blocks (guides) ---------- */
.timeline { display: grid; gap: 0; }
.tl {
  display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 1.5rem;
  padding-block: 1.6rem; border-top: 1px solid var(--line);
}
.tl:last-child { border-bottom: 1px solid var(--line); }
.tl time { font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); padding-top: 0.3rem; }
.tl h3 { font-size: 1.15rem; }
.tl p { margin-top: 0.6rem; color: var(--paper-dim); font-size: 0.98rem; }
@media (max-width: 700px) {
  .tl { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* ---------- Numbers / feature strip ---------- */
.strip { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
@media (min-width: 720px) { .strip { grid-template-columns: repeat(3, 1fr); } }
.strip > div { background: var(--ink); padding: clamp(1.5rem, 3vw, 2.25rem); }
.strip b { display: block; font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; margin-bottom: 0.6rem; }
.strip span { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-dim); }

/* ---------- Subscribe block ---------- */
.subscribe { position: relative; overflow: hidden; }
.subscribe .glow {
  position: absolute; width: 60vw; height: 60vw; max-width: 700px; max-height: 700px;
  left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 67, 31, 0.2), transparent 65%);
}
.subscribe-inner { position: relative; z-index: 2; max-width: 760px; margin-inline: auto; text-align: center; display: grid; gap: 1.5rem; justify-items: center; }
.subscribe form {
  display: flex; gap: 0.5rem; width: 100%; max-width: 520px; flex-wrap: wrap; justify-content: center;
}
.subscribe input {
  flex: 1 1 260px; background: rgba(245, 242, 236, 0.06); border: 1px solid var(--line-strong);
  color: var(--paper); border-radius: 999px; padding: 0.9rem 1.25rem; font: inherit; font-size: 0.95rem;
}
.subscribe input::placeholder { color: var(--paper-faint); }
.subscribe input:focus { outline: none; border-color: var(--accent); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0; max-width: 80ch; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.35rem 3rem 1.35rem 0; position: relative;
  font-size: 1.06rem; font-weight: 500; letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  font-size: 1.35rem; color: var(--accent); transition: transform 0.4s var(--ease);
}
.faq details[open] summary::after { content: "–"; }
.faq .ans { padding: 0 3rem 1.5rem 0; color: var(--paper-dim); font-size: 1rem; }

/* ---------- Affiliate slot ---------- */
.slot {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap;
  padding: 1.25rem 1.5rem; margin: 2rem 0; border: 1px dashed var(--line-strong); border-radius: 4px;
  background: rgba(226, 67, 31, 0.05);
}
.slot p { margin: 0; font-size: 0.88rem; color: var(--paper-dim); }

/* ---------- Footer ---------- */
.site-foot { background: var(--ink); border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.foot-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .foot-grid { grid-template-columns: 1.6fr repeat(3, 1fr); } }
.foot-col h4 { font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 1.1rem; }
.foot-col ul { display: grid; gap: 0.6rem; }
.foot-col a { font-size: 0.92rem; color: rgba(245, 242, 236, 0.72); }
.foot-col a:hover { color: var(--accent); }
.foot-brand .wordmark { font-size: 1.35rem; margin-bottom: 1rem; }
.foot-bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: grid; gap: 1rem; font-size: 0.78rem; color: var(--paper-faint);
}
@media (min-width: 900px) { .foot-bottom { grid-template-columns: 1fr auto; align-items: center; } }
.legal { max-width: 70ch; }

/* ---------- Reveal ----------
   注意：opacity:0 只在 html.js 下生效（由 head 内联脚本加上）。
   这样 JS 被拦截 / 加载失败 / 爬虫不执行脚本时，内容依然可见 —— 不留白屏。 */
html.js .rv { opacity: 0; transform: translateY(30px); }
html.js .rv.is-in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--d, 0s); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
  html.js .rv { opacity: 1; transform: none; }
  .line-mask > span { transform: none; }
}

/* ============================================================
   本地英语导游板块（/local-guides/ · /zh/local-guides/）
   ============================================================ */

/* 档案状态徽章（示例 / 已核验） */
.badge {
  display: inline-block; margin-left: 0.6rem; vertical-align: 2px;
  padding: 0.24rem 0.62rem; border: 1px solid var(--accent); border-radius: 999px;
  font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
}
.card--guide .num { display: inline-block; }
.tag--rate { border-color: rgba(201, 162, 39, 0.45); color: var(--gold); }

/* 流程卡：四步也能排，所以不用固定三列 */
.how { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .how { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } }
.how__item {
  padding: 1.6rem 1.5rem; background: var(--ink-2); border: 1px solid var(--line);
  border-left: 2px solid var(--accent); border-radius: 4px;
}
.how__n { display: block; font-size: 0.72rem; letter-spacing: 0.28em; color: var(--accent); }
.how__item h3 { margin-top: 0.6rem; }
.how__item p { margin-top: 0.7rem; font-size: 0.92rem; color: var(--paper-dim); }

/* 双向入口（两个大卡） */
.board { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 820px) { .board { grid-template-columns: repeat(2, 1fr); } }
.board__card {
  display: block; padding: 2rem; background: var(--ink-3); border: 1px solid var(--line);
  border-radius: 4px; transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.board__card:hover { border-color: var(--line-strong); background: var(--ink-4); }
.board__card h3 { margin-top: 0.9rem; }
.board__card > p { margin-top: 0.9rem; font-size: 0.95rem; color: var(--paper-dim); }
.board__card .btn { margin-top: 1.5rem; }
.board__card:hover .btn .arw { transform: translateX(7px); }

/* 收录标准 */
.criteria { margin-top: 1.5rem; }
.criteria__item {
  display: grid; grid-template-columns: 2.8rem 1fr; gap: 0.5rem 1rem; align-items: start;
  padding: 1.25rem 0; border-top: 1px solid var(--line);
}
.criteria__item:last-child { border-bottom: 1px solid var(--line); }
.criteria__n { font-size: 0.72rem; letter-spacing: 0.22em; color: var(--accent); padding-top: 0.4rem; }
.criteria__item h3 { font-size: 1.05rem; }
.criteria__item p { margin-top: 0.5rem; font-size: 0.92rem; color: var(--paper-dim); }

/* 边界提示条 —— 合规说明用这个样式，别做成容易被忽略的小字 */
.notice {
  padding: 0.95rem 1.15rem; border-left: 2px solid var(--gold); border-radius: 0 4px 4px 0;
  background: rgba(201, 162, 39, 0.07); font-size: 0.88rem; color: var(--paper-dim);
}

/* 提交表单 */
.intake {
  margin-top: 1.5rem; padding: 1.75rem; background: var(--ink-2);
  border: 1px solid var(--line); border-radius: 4px;
}
.intake__row { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.field { margin: 0 0 1.1rem; min-width: 0; }
.field label {
  display: block; margin-bottom: 0.45rem;
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-faint);
}
.field input,
.field select,
.field textarea {
  width: 100%; padding: 0.8rem 0.9rem; font: inherit; font-size: 0.95rem; color: var(--paper);
  background: var(--ink); border: 1px solid var(--line); border-radius: 3px;
  transition: border-color 0.3s var(--ease);
}
/* 下拉：原生箭头在深色底上几乎看不见，换成自画的箭头 */
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 2.4rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23a6a29b' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 0.75rem;
}
/* 浅色底 band 里的表单是深色卡，所以 select 要重新声明一次底色 */
.band--paper .field select { background-color: var(--ink); }
.field input::placeholder,
.field textarea::placeholder { color: var(--paper-faint); }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--accent); }
.field textarea { min-height: 7.5rem; resize: vertical; line-height: 1.6; }
/* 蜜罐：给不看 CSS 的机器人留的陷阱，正常用户永远看不到 */
.intake__hp { display: none; }
.intake__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.25rem; }
.intake__msg { margin: 0; font-size: 0.9rem; color: var(--paper-dim); }
.intake__msg.is-ok { color: #86c98a; }
.intake__msg.is-err { color: var(--accent-soft); }
.intake__msg.is-busy { color: var(--paper-faint); }
.intake button[disabled] { opacity: 0.55; cursor: default; }

/* 中文排版微调：这些控件上的西文大写与小字距不能直接套汉字 */
.lang-zh .badge { letter-spacing: 0.08em; }
.lang-zh .how__n,
.lang-zh .criteria__n { letter-spacing: 0.1em; }
.lang-zh .field label { letter-spacing: 0.06em; }
.lang-zh .notice { line-height: 1.8; }
.lang-zh .board__card > p,
.lang-zh .criteria__item p { line-height: 1.8; }

/* ---------- 配图（Pexels 实景照片，轻增强） ---------- */
.phero { padding: clamp(1.5rem, 4vw, 2.75rem) 0 0; }
.phero img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 4px;
}
.phero figcaption {
  margin-top: 0.7rem; font-size: 0.74rem; letter-spacing: 0.02em;
  color: var(--paper-faint);
}
.lang-zh .phero figcaption { font-size: 0.78rem; letter-spacing: 0; }

/* 卡片缩略图：向卡片三边出血铺满，圆角跟随卡片 */
.card:has(.card__img) { padding-top: 0; }
.card__img {
  width: calc(100% + 3.5rem); margin: 0 -1.75rem;
  aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--ink-3); border-radius: 4px 4px 0 0;
  transition: transform 0.7s var(--ease-out), filter 0.5s var(--ease);
}
.grid--4 .card__img { width: calc(100% + 2.7rem); margin-inline: -1.35rem; }
.card:hover .card__img { transform: scale(1.03); }
.card:has(.card__img) { justify-content: flex-start; gap: 1.15rem; }
.card--month { grid-row: span 1; }

/* ---------- 目录筛选条 ---------- */
.filters {
  margin-top: 1.75rem; padding: clamp(1.1rem, 3vw, 1.6rem);
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 4px;
}
.filters__row { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.filters__row .field { margin-bottom: 0.9rem; }
.filters__row--foot { align-items: end; }
.field--grow { grid-column: 1 / -1; }
@media (min-width: 900px) { .field--grow { grid-column: span 2; } }
.filters__meta {
  display: flex; align-items: center; gap: 1rem; margin: 0 0 0.9rem;
  font-size: 0.82rem; color: var(--paper-dim); white-space: nowrap;
}
.filters__meta button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--accent); }
.filters__count { color: var(--paper-faint); }

/* ---------- 档案卡 ---------- */
.card--guide .gcard { display: flex; flex-direction: column; height: 100%; }
.gcard__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gavatar {
  display: grid; place-items: center; flex: none;
  width: 3rem; height: 3rem; border-radius: 999px;
  border: 1px solid var(--accent); background: rgba(226, 67, 31, 0.09); color: var(--paper);
  font-family: var(--serif); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.04em;
}
.card--guide h3 .gcard__link { display: inline-block; }
.card--guide h3 .gcard__link:hover { color: var(--accent-soft); }
.gcard__teaser { font-size: 0.93rem; color: var(--paper-dim); margin-top: 0.7rem; }
.gcard__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.gcard__badges .badge { margin-left: 0; }
.badge--ok { border-color: #86c98a; color: #86c98a; }
.badge--fast { border-color: var(--gold); color: var(--gold); }
.badge--pick { border-color: var(--accent); background: var(--accent); color: #fff; margin-left: 0; }
.tag--ghost { border-color: var(--line); color: var(--paper-faint); }

.gfact {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1rem;
  margin: 1.15rem 0 0; font-size: 0.88rem;
}
.gfact > div { min-width: 0; }
.gfact dt {
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-faint); margin-bottom: 0.2rem;
}
.gfact dd { margin: 0; color: var(--paper); overflow-wrap: anywhere; }

.gcard__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-top: auto; padding-top: 1.25rem;
}
.gcard__acts { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.btn--pick { cursor: pointer; font-family: inherit; }
.btn--pick.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--pick.is-on::before { background: var(--paper); }

/* ---------- 已挑选面板（表单上方） ---------- */
.picks {
  margin-top: 1.5rem; padding: 1.25rem;
  background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 4px; color: var(--paper);
}
.picks__label {
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--paper-faint); margin-bottom: 0.8rem;
}
.picks__list { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.picks__empty { margin: 0; font-size: 0.9rem; color: var(--paper-dim); }
.pickchip {
  display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.42rem 0.7rem;
  border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.85rem;
}
.pickchip button {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--paper-faint); font-size: 0.78rem;
}
.pickchip button:hover { color: var(--accent-soft); }

/* ---------- 粘性挑选条 ----------
   ⚠️ fixed 层，项目硬规则：任何视口高的 fixed 层必须显式设 overflow，
      否则矮视口（曾真实事故：430×560）下内容会被顶出屏幕且滚不动。 */
.pickbar {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  max-height: 42vh; overflow-y: auto; overflow-x: hidden;
  background: rgba(9, 10, 12, 0.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-strong);
  padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom, 0px));
}
.pickbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; }
.pickbar__count { margin: 0; font-size: 0.88rem; }
.pickbar__acts { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.pickbar__acts button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--paper-dim); font-size: 0.84rem; }
.pickbar__link { margin: 0; font-size: 0.78rem; color: var(--paper-faint); }
.pickbar__link:hover { color: var(--paper); }
body.pickbar-open { padding-bottom: 5.5rem; }

/* ---------- 路线 × 导游 配对表 ---------- */
.matrix { margin-top: 1.75rem; border-top: 1px solid var(--line); }
.mrow {
  display: grid; grid-template-columns: 1fr; gap: 0.75rem 1.5rem;
  padding: 1.15rem 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 960px) {
  .mrow { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.5fr) auto; align-items: center; }
}
.mrow__route b { display: block; margin-top: 0.25rem; font-size: 1.02rem; font-weight: 500; }
.mrow__route:hover b { color: var(--accent-soft); }
.mrow__area { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.mrow__meta { display: block; margin-top: 0.3rem; font-size: 0.78rem; color: var(--paper-faint); }
.mrow__guides { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.mrow__act { margin: 0; }
.person {
  display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.75rem 0.35rem 0.4rem;
  border: 1px solid var(--line); border-radius: 999px; font-size: 0.85rem;
  transition: border-color 0.35s var(--ease);
}
.person:hover { border-color: var(--accent); }
.person .gavatar { width: 1.9rem; height: 1.9rem; font-size: 0.68rem; }
.person .arw { color: var(--accent); }

/* ---------- 导游侧套餐 ---------- */
.plans { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 960px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(1.35rem, 3vw, 1.9rem);
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 4px;
}
.plan--pick { border-color: var(--accent); }
.plan .badge--pick { position: absolute; top: 1rem; right: 1rem; }
.plan__id { margin: 0; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--paper-faint); }
.plan__price { display: flex; align-items: baseline; gap: 0.45rem; margin: 0.5rem 0 0.3rem; }
.plan__price b { font-size: clamp(2rem, 4vw, 2.4rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.plan__price span { font-size: 0.82rem; color: var(--paper-dim); }
.plan__list { margin: 1.15rem 0 1.5rem; display: grid; gap: 0.6rem; font-size: 0.9rem; color: var(--paper-dim); }
.plan__list li { position: relative; padding-left: 1.15rem; }
.plan__list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.plan > p.mt-1 { margin-top: auto; }
.addons { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 1rem; }
.addons__item { padding: 1.1rem 1.2rem; background: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; }
.addons__price { float: right; color: var(--gold); font-size: 0.92rem; }
.addons__item p { margin-top: 0.5rem; }

/* ---------- 导游详情页：头部档案条 ---------- */
.gprofile {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.25rem;
  margin-top: 2rem; padding: 1.25rem;
  background: rgba(245, 242, 236, 0.04); border: 1px solid var(--line); border-radius: 4px;
}
.gprofile .gavatar { width: 3.6rem; height: 3.6rem; font-size: 1.05rem; }
.gprofile__meta { flex: 1 1 14rem; min-width: 0; }
.gprofile__line { margin: 0; font-size: 0.95rem; }
.gprofile__tags { margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--paper-faint); }
.gprofile__acts { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- 导游详情页：覆盖的路线 ---------- */
.routes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 1.35rem; }
.routes__item {
  display: block; padding: 1.25rem;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 4px;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.routes__item:hover { border-color: var(--line-strong); background: var(--ink-3); }
.routes__item b { display: block; margin-top: 0.7rem; font-size: 1rem; font-weight: 500; }
.routes__item p { margin-top: 0.5rem; font-size: 0.88rem; color: var(--paper-dim); }
.routes__cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.9rem; font-size: 0.8rem; color: var(--accent); }

/* ---------- 路线页：走这条线的导游 ---------- */
.wg { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 1.5rem; }
.wg__item {
  display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; align-items: center;
  padding: 1.15rem 1.25rem; background: var(--ink-2); border: 1px solid var(--line); border-radius: 4px;
}
.wg__item .gavatar { width: 2.6rem; height: 2.6rem; font-size: 0.8rem; }
.wg__body b { font-size: 0.98rem; font-weight: 500; }
.wg__body p { margin: 0.25rem 0 0; }
.wg__acts { grid-column: 1 / -1; display: flex; gap: 0.5rem; flex-wrap: wrap; }
@media (min-width: 720px) {
  .wg__item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .wg__acts { grid-column: auto; }
}

/* ---------- 需求进展时间线 ---------- */
.statusline { margin-top: 1.5rem; padding: 1.25rem; background: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; }
.statusline ol { display: grid; gap: 0; }
.statusline li { display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.75rem; padding: 0.85rem 0; border-top: 1px solid var(--line); align-items: start; }
.statusline li:first-child { border-top: 0; }
.statusline .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 0.45rem; background: var(--ink-4); }
.statusline li.is-on .dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(226, 67, 31, 0.16); }
.statusline li.is-done .dot { background: var(--paper-dim); }
.statusline b { display: block; font-weight: 500; color: var(--paper-faint); }
.statusline li.is-on b { color: var(--paper); }
.statusline p { margin: 0.25rem 0 0; font-size: 0.88rem; color: var(--paper-dim); }

/* 浅色 band 里的事物要反过来：之前 notice 在 paper 底上几乎看不见 */
.band--paper .notice { background: rgba(8, 9, 11, 0.05); color: rgba(8, 9, 11, 0.72); }

/* 中文排版：这些控件上的西文大写与小字距不能直接套汉字 */
.lang-zh .gfact dt,
.lang-zh .plan__id,
.lang-zh .gprofile__tags { letter-spacing: 0.06em; }
.lang-zh .mrow__area,
.lang-zh .picks__label { letter-spacing: 0.1em; }
.lang-zh .gcard__teaser,
.lang-zh .gfact dd,
.lang-zh .plan__list li,
.lang-zh .statusline p { line-height: 1.8; }
.lang-zh .gavatar { letter-spacing: 0; }

/* ---------- Utility ---------- */
/* 组件类（.card 等）的 display 会盖掉 UA 的 [hidden]{display:none}，这里强制回来。
   筛选与挑选正是靠 hidden 属性控制显隐的。 */
[hidden] { display: none !important; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-2 { margin-bottom: 2rem; }
.center { text-align: center; }
.row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.between { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.hide-sm { display: none; }
@media (min-width: 900px) { .hide-sm { display: block; } }

/* ============================================================
   China Haul — 数据看板 / 扫货带 / 清单 / 计算器 / 宾果 / 投稿墙
   ------------------------------------------------------------
   三条硬约束与其他组件一致：
     · 窄屏（430×560）下单列可读，不横向溢出；
     · .band--paper 内的元素整体反色（浅底深字）；
     · 所有可点元素有 :focus-visible 与 aria-pressed 的视觉反馈。
   ============================================================ */

/* ---------- 数据看板 ---------- */
.hfacts {
  display: grid; gap: 0 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) { .hfacts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hfact { padding: 1.5rem 0; border-bottom: 1px solid var(--line); min-width: 0; }
.hfact b {
  display: block; font-size: clamp(1.25rem, 2.4vw, 1.95rem); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.12;
}
.hfact span {
  display: block; margin-top: 0.5rem; font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--paper-faint);
}

/* ---------- 扫货带 ---------- */
.hzone-wrap { padding-block: clamp(1.5rem, 3vw, 3rem); }
.hzone {
  border: 1px solid var(--line); padding: clamp(1.4rem, 3vw, 2.75rem);
  background: rgba(245, 242, 236, 0.02);
}
.hzone__head { display: grid; gap: 1.5rem; }
@media (min-width: 1000px) {
  .hzone__head { grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: start; }
}
.hzone__head .metabar { margin: 0; }
.hstops { display: grid; margin-top: 2rem; }
.hstop {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 1.1rem;
  padding-block: 1.5rem; border-top: 1px solid var(--line);
}
@media (min-width: 720px) { .hstop { grid-template-columns: 54px minmax(0, 1fr); gap: 1.5rem; } }
.hstop__n {
  font-size: 0.78rem; letter-spacing: 0.12em; color: var(--accent);
  font-weight: 600; padding-top: 0.3rem;
}
.hstop h3 { font-size: 1.15rem; }
.hstop p { margin-top: 0.5rem; color: var(--paper-dim); font-size: 0.97rem; }
.hstop__where { color: var(--accent) !important; margin-top: 0.35rem !important; }
.hstop .tip {
  margin-top: 0.85rem; font-size: 0.9rem; padding-left: 1rem;
  border-left: 2px solid var(--accent); color: rgba(245, 242, 236, 0.78);
}

/* ---------- 品类筛选 ---------- */
.hfilters { margin-bottom: 2rem; }
.hfilters__label {
  margin-bottom: 0.8rem; font-size: 0.68rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--paper-faint);
}
.hfilters__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  appearance: none; -webkit-appearance: none; border: 1px solid var(--line);
  background: transparent; color: var(--paper-dim); padding: 0.45rem 0.95rem;
  font-size: 0.8rem; font-family: inherit; line-height: 1.2; cursor: pointer;
  border-radius: 999px; transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.chip:hover { color: var(--paper); border-color: var(--line-strong); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- 编辑部清单 ---------- */
.hlist { display: grid; border-top: 1px solid var(--line); }
.hitem {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 1.1rem;
  padding-block: 1.5rem; border-bottom: 1px solid var(--line); align-items: start;
}
@media (min-width: 780px) { .hitem { grid-template-columns: 88px minmax(0, 1fr); gap: 1.5rem; } }
.hitem__vote { display: grid; justify-items: center; gap: 0.3rem; }
.hvote {
  appearance: none; -webkit-appearance: none; width: 100%; max-width: 64px;
  border: 1px solid var(--line); background: transparent; color: var(--paper-dim);
  padding: 0.5rem 0; border-radius: 3px; cursor: pointer; font-family: inherit;
  display: grid; justify-items: center; gap: 0.1rem;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.hvote:hover { border-color: var(--accent); color: var(--paper); }
.hvote.is-on { background: rgba(226, 67, 31, 0.12); border-color: var(--accent); color: var(--paper); }
.hvote__arw { font-size: 0.95rem; line-height: 1; }
.hvote b { font-size: 0.92rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.hvote__cap {
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-faint); text-align: center; line-height: 1.3;
}
.hitem__body { min-width: 0; }
.hitem__body h3 { font-size: 1.2rem; }
.hitem__body p { margin-top: 0.5rem; color: var(--paper-dim); font-size: 0.97rem; }
.hitem__k {
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-faint);
}

/* ---------- 行李箱计算器 ---------- */
.hcalc { border: 1px solid var(--line); padding: clamp(1.25rem, 2.5vw, 2rem); }
.hcalc__row { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.hcalc__out { margin-top: 1.75rem; display: grid; gap: 1rem; }
@media (min-width: 760px) {
  .hcalc__out { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.25rem; }
}
.hcalc__card { border: 1px solid var(--line); padding: 1.1rem 1.25rem; min-width: 0; }
.hcalc__card b {
  display: block; font-size: clamp(1.3rem, 2.4vw, 1.85rem); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.1;
}
.hcalc__card span {
  display: block; margin-top: 0.4rem; font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--paper-faint);
}
.hcalc__card p { margin-top: 0.6rem; font-size: 0.9rem; color: var(--paper-dim); }
.hcalc__card--warn { border-color: rgba(201, 162, 39, 0.55); }
.hcalc__card--warn b { color: var(--gold); }

/* ---------- 扫货宾果（浅底 band 内，整体反色） ---------- */
.hbwrap { display: grid; gap: 1.75rem; }
@media (min-width: 900px) {
  .hbwrap { grid-template-columns: minmax(0, 1fr) 260px; gap: 2.5rem; align-items: start; }
}
.hbcard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.hbcell {
  appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer;
  border: 1px solid var(--paper-line); color: rgba(8, 9, 11, 0.74);
  min-height: 112px; padding: 0.7rem; font-family: inherit; font-size: 0.88rem;
  line-height: 1.35; text-align: left; display: flex; align-items: flex-end;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
@media (max-width: 480px) { .hbcell { min-height: 96px; font-size: 0.78rem; padding: 0.55rem; } }
.hbcell:hover { border-color: rgba(8, 9, 11, 0.42); color: var(--ink); }
.hbcell.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.hbwrap__side { min-width: 0; }
.hbwrap__score { display: flex; align-items: baseline; gap: 0.4rem; }
.hbwrap__score b { font-size: 2.1rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.hbwrap__score span { font-size: 0.8rem; color: rgba(8, 9, 11, 0.55); }
.hbmsg { margin-top: 0.75rem; font-size: 0.95rem; color: rgba(8, 9, 11, 0.72); }
.hbmsg.is-bingo { color: var(--accent); font-weight: 600; }

/* ---------- 投稿墙 ---------- */
.hwall { display: grid; gap: 1rem; }
@media (min-width: 760px) { .hwall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .hwall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hwall__item { border: 1px solid var(--line); padding: 1.4rem 1.5rem; min-width: 0; }
.hwall__who { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; }
.hwall__who b { font-size: 1.05rem; }
.hwall__who span { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-faint); }
.hwall__items { margin-top: 0.8rem; color: var(--paper-dim); font-size: 0.97rem; }
.hwall__item .tip {
  margin-top: 0.9rem; font-size: 0.9rem; padding-left: 1rem;
  border-left: 2px solid var(--accent); color: rgba(245, 242, 236, 0.78);
}
.hwall__empty { border: 1px dashed var(--line-strong); padding: clamp(1.5rem, 3vw, 2.5rem); text-align: center; }

/* 中文排版：西文的大写 + 大字距不能直接套汉字 */
.lang-zh .hfact span,
.lang-zh .hfilters__label,
.lang-zh .hvote__cap,
.lang-zh .hcalc__card span,
.lang-zh .hwall__who span { letter-spacing: 0.06em; }
.lang-zh .hitem__k { letter-spacing: 0.06em; }
.lang-zh .hstop p,
.lang-zh .hitem__body p,
.lang-zh .hwall__items { line-height: 1.8; }

/* ============================================================
   郊野栏目（沪渎100）
   ------------------------------------------------------------
   沿用既有设计令牌（--ink / --paper / --accent / --line），
   不引入任何新颜色。所有栅格都用 minmax(0,1fr) 防止长中文撑破。
   ============================================================ */

.btn--ghost { border-color: var(--line); color: var(--paper-dim); }
.btn--ghost:hover { color: var(--paper); border-color: var(--line-strong); }

/* ---------- 10 + 30 + 60 ---------- */
.ctiers { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 900px) { .ctiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ctier {
  background: var(--ink); padding: clamp(1.25rem, 2.5vw, 2rem);
  display: grid; gap: 0.6rem; align-content: start; min-width: 0;
}
.ctier__n { font-size: clamp(2.6rem, 6vw, 4rem); line-height: 0.9; color: var(--accent); letter-spacing: -0.04em; }
.ctier__v { color: var(--gold); font-size: 0.82rem; letter-spacing: 0.08em; }
.ctier p { margin-top: 0.4rem; color: var(--paper-dim); font-size: 0.94rem; }
.ctier p:last-child { margin-bottom: 0; }

/* ---------- 六域卡片 ---------- */
.cdom { display: grid; gap: 0.5rem; align-content: start; min-width: 0; }
.cdom__zh { font-size: 0.72rem; letter-spacing: 0.3em; color: var(--paper-faint); }
.cdom p { margin-top: 0.5rem; color: var(--paper-dim); font-size: 0.94rem; }

/* ---------- 九个区：怎么去 ---------- */
.cdist { display: grid; border-top: 1px solid var(--line); }
.cdist__row {
  display: grid; gap: 0.4rem 1.25rem; padding-block: 1.1rem;
  border-bottom: 1px solid var(--line); align-items: start; min-width: 0;
}
@media (min-width: 860px) {
  .cdist__row { grid-template-columns: 10rem 5.5rem minmax(0, 1.1fr) minmax(0, 1.3fr); align-items: baseline; }
}
.cdist__name { display: flex; align-items: baseline; gap: 0.6ch; flex-wrap: wrap; min-width: 0; }
.cdist__name b { font-size: 1.02rem; }
.cdist__name span { color: var(--paper-faint); font-size: 0.78rem; letter-spacing: 0.12em; }
.cdist__n { display: flex; align-items: baseline; gap: 0.5ch; }
.cdist__n b { font-size: 1.5rem; line-height: 1; color: var(--accent); }
.cdist__n span { font-size: 0.78rem; color: var(--paper-faint); }
.cdist__metro p { margin: 0; font-size: 0.86rem; color: var(--paper); }
.cdist__note p { margin: 0; font-size: 0.9rem; color: var(--paper-dim); }

/* ---------- 徒步护照面板 ---------- */
.cpass {
  border: 1px solid var(--line); padding: clamp(1.1rem, 2.4vw, 1.75rem);
  margin: 2rem 0 1.5rem; display: grid; gap: 0.9rem; min-width: 0;
}
.cpass__head { display: grid; gap: 1rem; }
@media (min-width: 780px) { .cpass__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.cpass__stat { display: grid; gap: 0.2rem; justify-items: start; }
@media (min-width: 780px) { .cpass__stat { justify-items: end; text-align: right; } }
.cpass__of { margin: 0; font-size: 1.55rem; line-height: 1.05; letter-spacing: -0.02em; }
.cpass__km { margin: 0; font-size: 0.9rem; color: var(--gold); min-height: 1.2em; }
.cpass__badge { margin: 0; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-dim); }
.cpass__bar { height: 3px; background: var(--line); overflow: hidden; }
.cpass__bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.5s var(--ease-out); }
.cpass__acts { display: flex; align-items: center; gap: 0.75rem 1rem; flex-wrap: wrap; }
.cpass__msg { margin: 0; font-size: 0.84rem; color: var(--gold); min-height: 1.2em; }

/* ---------- 筛选 ---------- */
.cfilters { border: 1px solid var(--line); padding: clamp(1rem, 2.2vw, 1.5rem); margin-bottom: 1.5rem; }
.cfilters__row { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.cfilters__row .field { margin-bottom: 0.9rem; }
.cfilters__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cfilters__count { margin: 0; font-size: 0.84rem; color: var(--paper-dim); }

/* ---------- 线路清单 ---------- */
.cfind { display: grid; border-top: 1px solid var(--line); }
.cfind__row {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.35rem 1rem;
  padding-block: 1.15rem; border-bottom: 1px solid var(--line); align-items: start; min-width: 0;
}
@media (min-width: 900px) {
  .cfind__row { grid-template-columns: 2.6rem minmax(0, 1.5fr) minmax(0, 1fr); }
}
.cfind__tick { padding-top: 0.15rem; }
.cfind__name { min-width: 0; }
.cfind__t { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.cfind__zh { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--paper-faint); letter-spacing: 0.06em; }
.cfind__note { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--paper-dim); }
.cfind__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-content: start; min-width: 0; }
@media (min-width: 900px) { .cfind__meta { justify-content: flex-end; } }

/* 勾选按钮：无 JS 时是静止的对勾轮廓，有 JS 才可交互 */
.ctick {
  width: 1.85rem; height: 1.85rem; display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: none; color: var(--paper-faint);
  font: inherit; font-size: 0.95rem; line-height: 1; cursor: pointer; padding: 0;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.ctick:hover { color: var(--paper); border-color: var(--paper-dim); }
.ctick.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.cfind__row.is-done .cfind__t a { color: var(--paper-faint); }

/* ---------- 挑线器 ---------- */
.cpick { border: 1px solid var(--line); padding: clamp(1rem, 2.2vw, 1.5rem); display: grid; gap: 1rem; }
.cpick__row { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.cpick__row .field { margin-bottom: 0; }
.cpick__foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cpick__note { margin: 0; flex: 1 1 14rem; }
.cpick__out { margin-top: 1.5rem; border: 1px solid var(--accent); padding: clamp(1rem, 2.2vw, 1.5rem); }
.cpick__out h3 { font-size: 1.25rem; }
.cpick__out p { margin-top: 0.5rem; color: var(--paper-dim); font-size: 0.95rem; }
.cpick__out .cpick__why { color: var(--gold); font-size: 0.82rem; letter-spacing: 0.06em; margin-bottom: 0.4rem; }

/* ---------- 口径：是 / 不是 ---------- */
.chon { display: grid; gap: 2rem; }
@media (min-width: 860px) { .chon { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; } }
.chon__col { min-width: 0; }
.chon__list { margin-top: 1rem; display: grid; gap: 0.85rem; }
.chon__list li { position: relative; padding-left: 1.6rem; font-size: 0.96rem; color: var(--paper-dim); }
.chon__list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.55rem; height: 1px; background: var(--paper-faint); }
.chon__list--yes li::before { width: 0.55rem; height: 0.55rem; top: 0.42em; border-radius: 50%; background: var(--accent); }
.chon__list--no li::before { width: 0.55rem; height: 1px; top: 0.62em; background: var(--paper-faint); }

/* ---------- 集章挑战 ---------- */
.cchal { border: 1px solid var(--line); padding: clamp(1.25rem, 2.6vw, 2rem); display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .cchal { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 3rem; align-items: start; } }
.cchal__body { min-width: 0; }
.cchal__body p { color: var(--paper-dim); font-size: 0.96rem; }

/* ---------- 实地反馈（复用集章块的双列骨架） ---------- */
.cchal__body .btn { margin-top: 0.25rem; }