/* ============================================================
   v4「羊村地图」站点样式
   ------------------------------------------------------------
   结构：悬浮圆角导航 / 大衬线 Hero / SVG 村庄地图（产品=小屋）
         / 逐家拜访（交替式编辑块）/ 村规 / 页脚
   与 v2（卡片阵列）、v3（左轨台账）结构完全不同。
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
p { line-height: var(--lh-body); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
em { font-style: normal; }
strong { font-weight: 600; }

:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; border-radius: var(--r2); }
::selection { background: var(--sel-bg); color: var(--sel-ink); }

.wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band); }
.band--alt { background: var(--bg-alt); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--s5);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--amber); }

/* ============================================================
   1. 悬浮圆角导航
   ============================================================ */
.nav {
  position: sticky; top: var(--s4); z-index: var(--z-nav);
  width: min(1160px - 2*var(--gutter), calc(100% - 2*var(--gutter)));
  margin-inline: auto;
  /* 三栏 grid：链接列恒居页面中线（flex margin-auto 只会居中于两侧剩余空间，不等宽时偏移） */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s6);
  padding: var(--s3) var(--s4) var(--s3) var(--s3);
  background: color-mix(in oklch, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--lift);
}
.brand { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: var(--s3); }
.brand-chip {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  background: var(--chip);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  overflow: hidden;
}
.brand-chip img { width: 33px; height: 33px; }
@media (prefers-color-scheme: light) {
  /* 白羊/白屋顶在浅色衬底上靠双层细阴影勾边 */
  .brand-chip img, .foot-mark-chip img {
    filter: drop-shadow(0 1px 1px oklch(0 0 0 / 0.35))
            drop-shadow(0 0 3px oklch(0 0 0 / 0.18));
  }
}
.brand-name { font-family: var(--serif); font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }

.nav-links { grid-column: 2; justify-self: center; display: flex; gap: var(--s1); }
.nav-link {
  padding: var(--s2) var(--s4);
  border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 500;
  color: var(--ink-2);
  transition: background-color var(--d2) var(--ease), color var(--d2) var(--ease);
}
.nav-link:hover { color: var(--ink); background: var(--accent-soft); }

.nav-right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--s2); }
/* 语言切换：等宽分段控件（中/EN 字数不等导致原生宽度不齐，设最小宽对齐） */
.lang-toggle {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}
.lang-btn {
  min-width: 44px;
  padding: var(--s2) var(--s3);
  text-align: center;
  border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 600;
  color: var(--ink-2);
  transition: background-color var(--d2) var(--ease), color var(--d2) var(--ease);
}
.lang-btn:hover { color: var(--ink); }
.lang-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* ============================================================
   2. Hero
   ============================================================ */
.hero { padding-block: clamp(var(--s16), 9vh, 130px) var(--s16); text-align: center; }
.hero-inner { max-width: 30em; margin-inline: auto; }
.hero-title {
  font-size: var(--t-hero);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.hero-title .sun { color: var(--amber-deep); }
.hero-lede {
  margin-top: var(--s6);
  font-size: var(--t-md);
  color: var(--ink-2);
  max-width: 34em;
  margin-inline: auto;
}
.hero-cta { margin-top: var(--s8); display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s3); }

.hero-chips {
  margin-top: var(--s10);
  display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s2);
}
.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--t-xs); font-weight: 500; color: var(--ink-2);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grass-500); }

/* ============================================================
   3. 按钮
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s6);
  border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 600;
  border: 1px solid transparent;
  transition: background-color var(--d2) var(--ease), color var(--d2) var(--ease),
              border-color var(--d2) var(--ease), transform var(--d1) var(--ease),
              box-shadow var(--d2) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--fill { background: var(--accent); color: var(--on-accent); box-shadow: var(--lift); }
.btn--fill:hover { background: var(--accent-hover); }
.btn--ghost { border-color: var(--border-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: var(--surface); }

.uline {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-weight: 600; color: var(--accent-ink);
  border-bottom: 2px solid color-mix(in oklch, var(--accent-ink) 30%, transparent);
  padding-bottom: 2px;
  transition: border-color var(--d2) var(--ease), color var(--d2) var(--ease);
}
.uline:hover { border-color: var(--accent-ink); }
.uline .arw { transition: transform var(--d2) var(--ease); }
.uline:hover .arw { transform: translateX(3px); }

/* ============================================================
   4. 村庄地图（SVG 内联，产品=小屋）
   ============================================================ */
.map-head { text-align: center; max-width: 30em; margin: 0 auto var(--s12); }
.map-title { font-size: var(--t-2xl); }
.map-lede { margin-top: var(--s4); color: var(--ink-2); font-size: var(--t-md); }

.village-scene {
  border: 1px solid var(--border);
  border-radius: var(--r5);
  background: var(--surface);
  box-shadow: var(--lift);
  overflow: hidden;
}
.village { width: 100%; height: auto; display: block; }

/* 天空元素 */
.v-sun { fill: var(--amber); opacity: .9; }
.v-hill-back { fill: var(--accent-soft); }
.v-hill-front { fill: var(--amber-wash); }
.v-path { fill: none; stroke: var(--border-2); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 1 22; }
.v-tree-top { fill: var(--grass-400); }
.v-tree-top--deep { fill: var(--grass-500); }
.v-tree-trunk { fill: var(--grass-800); }
.v-fence { stroke: var(--ink-3); stroke-width: 2.5; stroke-linecap: round; }
.v-plot-sign-box { fill: var(--surface); stroke: var(--border-2); stroke-width: 1.5; }

/* ============================================================
   小屋部件 —— 关键：<use> 的 shadow 树匹配不到文档选择器，
   所以所有部件规则必须直接命中 <defs> 里的图纸原件；
   克隆体会带走原件的计算样式（含自定义变量解析结果）。
   窗户用 var(--win, var(--glass))：悬停时在 .house 上换 --win 变量，
   自定义属性可继承进 shadow 树，实现「悬停窗暖」。
   ============================================================ */
.house { cursor: pointer; outline: none; }
.house .h-body { transition: transform var(--d2) var(--ease); transform-origin: center bottom; }
.house:hover .h-body, .house:focus-visible .h-body { transform: translateY(-7px); }

.h-roof { fill: var(--roof); }
.h-wall { fill: var(--wall); stroke: var(--border-2); stroke-width: 1.5; }
.h-door { fill: var(--roof); }
.h-slot { fill: var(--roof); opacity: .85; }
.h-win  { fill: var(--win, var(--glass)); transition: fill var(--d3) var(--ease); }

/* 日间悬停/聚焦：窗玻璃变暖（夜间本来就是亮灯，不重复加） */
@media (prefers-color-scheme: light) {
  .house:hover, .house:focus-visible { --win: var(--amber-wash); }
}

/* 一户一形配色（挂在 defs 原件上，随克隆体生效） */
.sh-c-watch { --roof: oklch(0.52 0.085 200); --wall: oklch(0.945 0.020 195); }
.sh-c-seed  { --roof: oklch(0.72 0.130 75);  --wall: oklch(0.960 0.040 85); }
.sh-c-panel { --roof: oklch(0.50 0.070 250); --wall: oklch(0.940 0.015 250); }
.sh-c-tales { --roof: oklch(0.62 0.120 40);  --wall: oklch(0.950 0.025 50); }
.sh-c-atlas { --roof: oklch(0.50 0.095 145); --wall: oklch(0.940 0.030 140); }
.house .h-label { font: 600 15px var(--sans); fill: var(--ink); }
.house .h-label-cn { font: 400 12px var(--sans); fill: var(--ink-3); }
.house .h-tag { font: 500 11px var(--sans); fill: var(--ink-3); letter-spacing: .04em; }

/* 悬停：标签换成品牌色 + 出现「去拜访」提示 */
.house .h-visit {
  font: 600 11.5px var(--sans); fill: var(--accent-ink);
  opacity: 0; transition: opacity var(--d2) var(--ease);
}
.house:hover .h-visit, .house:focus-visible .h-visit { opacity: 1; }
.house:hover .h-label, .house:focus-visible .h-label { fill: var(--accent-ink); }



/* ============================================================
   5. 逐家拜访（交替编辑块）
   ============================================================ */
.home { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: var(--s16); align-items: center; }
.home + .home { margin-top: var(--s20); padding-top: var(--s20); border-top: 1px dashed var(--border-2); }
.home--flip .home-media { order: 2; }

.home-no {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  color: var(--ink-3); text-transform: uppercase;
  margin-bottom: var(--s4);
}
.home-no::after { content: ""; flex: 1; min-width: 40px; height: 1px; background: var(--border-2); }
.home-title { font-size: var(--t-2xl); display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.home-cn { font-size: var(--t-lg); color: var(--ink-3); font-weight: 500; }
.home-tag { margin-top: var(--s3); font-size: var(--t-sm); font-weight: 600; color: var(--accent-ink); }
.home-desc { margin-top: var(--s4); font-size: var(--t-md); color: var(--ink-2); max-width: 30em; }

.home-feats { margin-top: var(--s6); display: grid; gap: var(--s3); }
.home-feat { display: flex; gap: var(--s3); align-items: baseline; font-size: var(--t-sm); }
.home-feat .mark {
  flex: none; width: 22px; height: 22px; margin-top: 2px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: 12px; font-weight: 700;
}
.home-feat strong { font-weight: 600; }
.home-feat span { color: var(--ink-2); }
.home-cta { margin-top: var(--s6); display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.home-note { font-size: var(--t-xs); color: var(--ink-3); }

/* 小屋徽章（SVG 复用） */
.home-media { display: grid; place-items: center; }
.home-badge {
  width: min(320px, 80%);
  border-radius: var(--r5);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--lift);
  padding: var(--s8);
}

/* ============================================================
   6. 村规
   ============================================================ */
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s6); }
.rule {
  padding: var(--s6);
  border: 1px solid var(--border);
  border-radius: var(--r4);
  background: var(--surface);
}
.rule-k {
  font-family: var(--serif);
  font-size: var(--t-lg);
  color: var(--accent-ink);
  padding-bottom: var(--s3);
  margin-bottom: var(--s3);
  border-bottom: 2px solid var(--amber);
  display: inline-block;
}
.rule-v { font-size: var(--t-sm); color: var(--ink-2); }

/* ============================================================
   7. 页脚
   ============================================================ */
.foot { border-top: 1px solid var(--border); background: var(--bg-alt); padding-block: var(--s16) var(--s8); }
.foot-grid { display: grid; grid-template-columns: minmax(0,1.5fr) repeat(2, minmax(0,1fr)); gap: var(--s12); }
.foot-brand { display: grid; gap: var(--s4); align-content: start; }
.foot-tag { font-size: var(--t-sm); color: var(--ink-2); max-width: 26em; }
.foot-col-t { font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s2); }
.foot-col { display: grid; gap: var(--s2); align-content: start; }
.foot-col a { width: fit-content; font-size: var(--t-sm); color: var(--ink-2); }
.foot-col a:hover { color: var(--accent-ink); }
.foot-bar {
  margin-top: var(--s12); padding-top: var(--s5);
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4);
  font-size: var(--t-xs); color: var(--ink-3);
}

/* ============================================================
   8. Toast / 动效
   ============================================================ */
#toast {
  position: fixed; left: 50%; bottom: var(--s8); z-index: var(--z-toast);
  transform: translate3d(-50%, 10px, 0);
  max-width: min(90vw, 420px);
  padding: var(--s3) var(--s5);
  background: var(--ink); color: var(--bg);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  box-shadow: var(--lift-lg);
  opacity: 0; visibility: hidden;
  transition: opacity var(--d2) var(--ease), transform var(--d2) var(--ease), visibility var(--d2) var(--ease);
}
#toast.on { opacity: 1; visibility: visible; transform: translate3d(-50%, 0, 0); }

.js .rise { opacity: 0; transform: translate3d(0, 18px, 0);
  transition: opacity var(--d3) var(--ease-out), transform var(--d3) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms); }
.js .rise.in { opacity: 1; transform: none; }

/* ============================================================
   9. 响应式
   ============================================================ */
@media (max-width: 999px) {
  .home { grid-template-columns: minmax(0,1fr); gap: var(--s10); }
  .home--flip .home-media { order: 0; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --gutter: var(--s4); }
  .nav-links { display: none; }
  .nav { gap: var(--s3); }
  .nav-right { margin-left: auto; }
  html { scroll-padding-top: 88px; }
}
@media (max-width: 560px) {
  .nav .btn--fill { display: none; }   /* 390px 胶囊太挤：藏 CTA，保留语言切换 */
  .brand-name { font-size: var(--t-base); }
  .nav { gap: var(--s3); padding-inline: var(--s3); }
  .hero { text-align: left; }
  .hero-inner { margin-inline: 0; }
  .hero-cta, .hero-chips { justify-content: flex-start; }
  .btn { flex: 1 1 auto; justify-content: center; }
  .foot-grid { grid-template-columns: minmax(0,1fr); }
  .house .h-tag { display: none; }
}

/* ============================================================
   10. 动效降级 / 打印
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .js .rise { opacity: 1; transform: none; }
  .house:hover .h-body, .house:focus-visible .h-body { transform: none; }
}
@media print {
  .nav, #toast { display: none !important; }
  body { background: #fff; color: #000; }
  .band { padding-block: var(--s8); }
}

/* ============================================================
   11. v4.1 追加：一户一形 / 日夜切换 / 羊 / 移动端滑动
   ============================================================ */

/* --- 房型细部（同样直接命中 defs 原件） --- */
.h-mast { stroke: var(--ink-3); stroke-width: 2.5; stroke-linecap: round; }
.h-led { fill: var(--amber); }
.h-mullion { stroke: var(--border-2); stroke-width: 1.6; fill: none; }
.h-flag { fill: var(--amber); }
.h-compass { fill: var(--amber-deep); }
.h-sprout { fill: var(--grass-400); }
.h-sprout-stem { stroke: var(--grass-600); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.h-smoke { stroke: var(--border-2); stroke-width: 2.5; fill: none; stroke-linecap: round; }

/* --- 日 / 夜切换 --- */
.sky-night { display: none; }
@media (prefers-color-scheme: dark) {
  .sky-day { display: none; }
  .sky-night { display: block; }
}
.v-moon { fill: var(--sun-200); }
.v-moon-cut { fill: var(--surface); }
.v-star { fill: var(--ink-3); }

/* --- 羊 --- */
.v-wool { fill: var(--surface); stroke: var(--border-2); stroke-width: 1.5; }
.v-face { fill: var(--ink); }
.v-leg { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }

/* --- 移动端：地图横向滑动，保住可读性 --- */
.village-scroll { width: 100%; }
.map-hint {
  display: none;
  margin-top: var(--s3);
  text-align: center;
  font-size: var(--t-xs);
  color: var(--ink-3);
}
@media (max-width: 760px) {
  .village-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .village { min-width: 780px; }
  .village-scene { border-radius: var(--r4); }
  .map-hint { display: block; }
}

/* ============================================================
   12. v4.2 追加：真实产品截图（有 shot 的产品替换小屋徽章）
   ============================================================ */
.home-shot {
  margin: 0;
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r5);
  box-shadow: var(--lift);
}
.home-shot img {
  width: 100%;
  display: block;
  border-radius: var(--r3);
  border: 1px solid var(--border);
  /* 竖屏手机截图限高（720×1600 原图会把卡片撑爆） */
  max-height: 440px;
  object-fit: cover;
  object-position: top center;
}
@media (max-width: 999px) {
  .home-shot { max-width: 560px; margin-inline: auto; }
}

/* ============================================================
   13. v4.3 追加：独立详情页
   ============================================================ */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.detail-main { padding-block: var(--s10) var(--s16); }

/* 双栏：左信息 / 右媒体（窄屏叠单栏） */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--s16);
  align-items: start;
  margin-top: var(--s6);
}
.detail-info { display: grid; gap: var(--s4); align-content: start; }
.detail-info .home-desc { margin-top: 0; }
.detail-cta { margin-top: var(--s2); display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.detail-sub { font-size: var(--t-xl); margin-top: var(--s8); }
.detail-feats {
  margin-top: var(--s4);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s6);
}
.detail-media { position: sticky; top: 96px; }
.detail-shot { margin: 0; max-width: none; }

.detail-next { margin-top: var(--s20); padding-top: var(--s8); border-top: 1px dashed var(--border-2); }
.detail-next-links { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); margin-top: var(--s3); }

/* 详情页导航：Logo 即主页入口（无独立返回钮），语言切换推右 */
.detail-nav .nav-right { grid-column: 3; }
@media (max-width: 560px) {
  .detail-nav .brand-name { display: none; }   /* 390px 只留 芯片+语言 */
}

/* 面包屑：村口 › 村庄地图 › 当前产品 */
.crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
  font-size: var(--t-xs); color: var(--ink-3);
  margin-bottom: var(--s5);
}
.crumb a { color: var(--ink-3); transition: color var(--d2) var(--ease); }
.crumb a:hover { color: var(--accent-ink); }
.crumb-sep { color: var(--border-2); }
.crumb-here { color: var(--ink-2); font-weight: 500; }

@media (max-width: 999px) {
  .detail-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s10); }
  .detail-feats { grid-template-columns: 1fr; }
  .detail-media { position: static; }
  .detail-shot { max-width: 640px; margin-inline: auto; }
}

/* ============================================================
   移植追加：移动端抽屉 / 关于 / 招聘 / 时间线
   ============================================================ */
.nav-burger {
  display: none; width: 40px; height: 40px;
  place-content: center; gap: 5px; border-radius: var(--r2);
  border: 1px solid var(--border);
  background: var(--surface-2, var(--bg-alt));
}
.nav-burger span { display: block; width: 16px; height: 1.5px; background: var(--ink); border-radius: 2px; }
.mobile-menu {
  position: fixed; inset: 76px 12px auto 12px; z-index: var(--z-menu, 58);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r4); box-shadow: var(--lift-lg);
  padding: var(--s6); max-height: calc(100dvh - 100px); overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translate3d(0, -10px, 0);
  transition: opacity var(--d2) var(--ease), transform var(--d2) var(--ease), visibility var(--d2) var(--ease);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-menu a { display: block; padding: var(--s3) var(--s4); border-radius: var(--r2); font-size: var(--t-sm); color: var(--ink-2); }
.mobile-menu a:hover { background: var(--accent-soft); color: var(--ink); }
.mobile-menu .mm-label { font-size: var(--t-xs); color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; margin: var(--s4) 0 var(--s2); }
body.menu-open { overflow: hidden; }
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; }
}

/* 时间线 */
.tl-item { display: grid; grid-template-columns: 14px minmax(0,1fr); gap: var(--s4); padding-block: var(--s4); border-bottom: 1px dashed var(--border-2); }
.tl-item:last-child { border-bottom: 0; }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; background: var(--amber); }
.tl-item strong { font-weight: 600; }
.tl-item p { font-size: var(--t-sm); color: var(--ink-2); }

/* 招聘 */
.perk-emoji { font-size: 1.6rem; }
.job-card {
  padding: var(--s6); border: 1px solid var(--border); border-radius: var(--r4);
  background: var(--surface); display: grid; gap: var(--s3);
}
.jobs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s5); }
.job-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.job-head h3 { font-size: var(--t-lg); }
.job-tag { font-size: var(--t-xs); color: var(--ink-3); border: 1px solid var(--border-2); border-radius: var(--r-pill); padding: 2px var(--s3); }
.job-req { display: grid; gap: var(--s2); font-size: var(--t-sm); color: var(--ink-2); }
.job-req li { padding-left: var(--s4); position: relative; }
.job-req li::before { content: "·"; position: absolute; left: 2px; color: var(--accent); font-weight: 700; }
.jobs-note { margin-top: var(--s6); font-size: var(--t-sm); color: var(--ink-3); }

/* 关于/招聘页 Hero */
.page-hero { padding-block: var(--s12) var(--s8); }
.cta-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s6); flex-wrap: wrap;
  padding: var(--s8); border: 1px solid var(--border); border-radius: var(--r4);
  background: var(--surface); box-shadow: var(--lift);
}
.cta-card .sso-sub { color: var(--ink-2); margin-top: var(--s2); }

/* ============================================================
   v4.5：村庄地图 logo 徽章（小屋 → 各产品 logo）
   ============================================================ */
.map-logo { cursor: pointer; outline: none; }
.ml-img {
  transition: transform var(--d2) var(--ease);
  transform-origin: center; transform-box: fill-box;
  /* 浅色 logo（tales 米色标）在米色场景里勾出边界——这是可见性阴影，非边框 */
  filter: drop-shadow(0 1px 1px oklch(0 0 0 / 0.25))
          drop-shadow(0 0 3px oklch(0 0 0 / 0.14));
}
.map-logo:hover .ml-img, .map-logo:focus-visible .ml-img { transform: scale(1.05); }


/* 截图廊（竖屏手机截图横排） */
.shots-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s5); }
.shots-grid .home-shot { padding: var(--s3); }
.shots-grid .home-shot img { width: 100%; border-radius: var(--r2); max-height: 520px; object-fit: cover; object-position: top center; }


/* ============================================================
   村民登录 / 注册（统一账号中心 · client_id=site）
   ============================================================ */
.nav-login {
  font: 600 var(--t-sm)/1 var(--sans);
  color: var(--ink); background: transparent;
  border: 1px solid var(--border-2); border-radius: var(--r-pill);
  padding: 0.5em 1.05em; cursor: pointer;
  max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color var(--d1) var(--ease), background var(--d1) var(--ease), color var(--d1) var(--ease);
}
.nav-login:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.nav-login.is-in { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }

.mm-login {
  display: block; width: 100%; text-align: left;
  font: 600 var(--t-sm) var(--sans); color: var(--ink);
  background: none; border: 0; border-top: 1px solid var(--border);
  padding: var(--s3) var(--s4); cursor: pointer; border-radius: var(--r2);
}
.mm-login:hover { background: var(--accent-soft); color: var(--ink); }

.auth-modal {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--d2) var(--ease), visibility 0s linear var(--d2);
}
.auth-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.auth-backdrop { position: absolute; inset: 0; background: oklch(0.2 0.02 150 / 0.45); backdrop-filter: blur(4px); }
.auth-card {
  position: relative; width: min(92vw, 400px);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--r4);
  box-shadow: var(--lift-lg); padding: var(--s12) var(--s6) var(--s6);
  transform: translateY(10px) scale(0.98);
  transition: transform var(--d2) var(--ease-out);
}
.auth-modal.is-open .auth-card { transform: none; }
.auth-x {
  position: absolute; top: var(--s3); right: var(--s3);
  width: 32px; height: 32px; border: 0; border-radius: var(--r-pill);
  background: var(--bg-alt); color: var(--ink-2); font-size: 1.15rem; line-height: 1;
  cursor: pointer; transition: background var(--d1) var(--ease), color var(--d1) var(--ease);
}
.auth-x:hover { background: var(--border); color: var(--ink); }
.auth-tabs { display: flex; gap: 4px; margin-bottom: var(--s5); background: var(--bg-alt); border-radius: var(--r-pill); padding: 4px; }
.auth-tab {
  flex: 1; border: 0; background: none; border-radius: var(--r-pill);
  padding: 0.5em 0; font: 600 var(--t-sm) var(--sans); color: var(--ink-2); cursor: pointer;
  transition: background var(--d1) var(--ease), color var(--d1) var(--ease);
}
.auth-tab.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--lift); }
.auth-title { font: 600 var(--t-lg) var(--sans); margin: 0 0 var(--s5); letter-spacing: var(--tr-tight); text-align: center; }
.auth-form { display: grid; gap: var(--s4); }
.auth-field { display: grid; gap: var(--s2); font: 500 var(--t-xs) var(--sans); color: var(--ink-2); }
.auth-field input {
  font: 400 var(--t-base) var(--sans); color: var(--ink);
  background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--r2);
  padding: 0.6em 0.8em; transition: border-color var(--d1) var(--ease);
}
.auth-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
/* 作者样式的 display:grid 会盖过浏览器默认的 [hidden]{display:none}，必须显式兜底 */
.auth-field[hidden] { display: none; }
.auth-msg { min-height: 1.2em; margin: 0; font: 400 var(--t-sm) var(--sans); color: var(--ink-3); }
.auth-msg.is-err { color: oklch(0.55 0.19 25); }
.auth-msg.is-ok { color: var(--accent-ink); }
.auth-code-row { display: flex; gap: var(--s2); }
.auth-code-row input { flex: 1; min-width: 0; }
.auth-send {
  flex: none; white-space: nowrap; cursor: pointer;
  font: 600 var(--t-xs) var(--sans); color: var(--accent-ink);
  background: var(--accent-soft); border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
  border-radius: var(--r2); padding: 0 var(--s4);
  transition: background var(--d1) var(--ease), opacity var(--d1) var(--ease);
}
.auth-send:hover { background: color-mix(in oklch, var(--accent) 18%, transparent); }
.auth-send:disabled { opacity: .55; cursor: default; }
.auth-send:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* 人机验证：送小羊回圈（迷你滑块） */
.auth-verify {
  position: relative; height: 46px; border-radius: var(--r2);
  background: var(--bg-alt); border: 1px solid var(--border-2);
  overflow: hidden; touch-action: none; user-select: none;
  transition: background var(--d2) var(--ease), border-color var(--d2) var(--ease);
}
.auth-verify-line { position: absolute; left: 46px; right: 14px; top: 50%; height: 3px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, var(--border-2) 0 6px, transparent 6px 12px); border-radius: 3px; }
.auth-verify-knob {
  position: absolute; left: 4px; top: 4px; z-index: 2; width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center; font-size: 1.1rem; line-height: 1;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border-2);
  box-shadow: var(--lift); cursor: grab; will-change: transform;
  transition: transform var(--d1) var(--ease);
}
.auth-verify-knob:active { cursor: grabbing; }
.auth-verify-knob:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.auth-verify-knob.drag { transition: none; }
.auth-verify-knob.spring { transition: transform 420ms cubic-bezier(.34,1.56,.64,1); }
.auth-verify-hint { position: absolute; left: 50px; top: 50%; transform: translateY(-50%);
  font-size: var(--t-xs); color: var(--ink-3); pointer-events: none; }
.auth-verify-ok { position: absolute; left: 50px; top: 50%; transform: translateY(-50%);
  font-size: var(--t-xs); font-weight: 600; color: var(--accent-ink); opacity: 0;
  transition: opacity var(--d2) var(--ease); pointer-events: none; }
.auth-verify.is-ok { background: var(--accent-soft); border-color: color-mix(in oklch, var(--accent) 45%, transparent); }
.auth-verify.is-ok .auth-verify-hint { opacity: 0; }
.auth-verify.is-ok .auth-verify-ok { opacity: 1; }
.auth-verify.is-locked { opacity: .6; }

/* 人机验证弹窗（盖在登录/注册弹窗之上） */
.verify-modal {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--d2) var(--ease), visibility 0s linear var(--d2);
}
.verify-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.verify-backdrop, .coop-backdrop { position: absolute; inset: 0; background: oklch(0.2 0.02 150 / 0.45); backdrop-filter: blur(4px); }
.verify-card {
  position: relative; width: min(92vw, 340px); display: grid; gap: var(--s4);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--r4);
  box-shadow: var(--lift-lg); padding: var(--s6);
  transform: translateY(8px) scale(0.98); transition: transform var(--d2) var(--ease-out);
}
.verify-modal.is-open .verify-card { transform: none; }
.verify-title { font-family: var(--serif); font-size: var(--t-md); margin: 0; text-align: center; }
.verify-sub { font-size: var(--t-sm); color: var(--ink-2); margin: 0; text-align: center; }
.verify-cancel, .coop-cancel {
  justify-self: center; font: 500 var(--t-sm) var(--sans); color: var(--ink-3);
  background: none; border: 0; padding: .3em .8em; cursor: pointer; border-radius: var(--r2);
}
.verify-cancel:hover, .coop-cancel:hover { color: var(--ink); background: var(--bg-alt); }
.verify-cancel:focus-visible, .coop-cancel:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.auth-submit { width: 100%; justify-content: center; }
.auth-hint { margin: var(--s5) 0 0; font: 400 var(--t-xs) var(--sans); color: var(--ink-3); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .auth-modal, .auth-card { transition: none; }
}

/* ============================================================
   页脚「产品」列：紧凑单行（小图标 + 名称）
   依据 NN/g 页脚最佳实践：页脚宜简洁可扫读，不放卡片
   ============================================================ */
#footer-products { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s2) var(--s3); }
.foot-prod {
  display: inline-flex; align-items: center; gap: var(--s2);
  width: fit-content; font-size: var(--t-sm); color: var(--ink-2);
}
.foot-prod:hover { color: var(--accent-ink); }
.foot-prod-logo { width: 18px; height: 18px; object-fit: contain; flex: none; }
.foot-prod-name { font-weight: 500; }
.foot-prod-cn { font-size: var(--t-xs); color: var(--ink-3); }

/* 招聘页占位（职位先留空） */
.jobs-empty {
  padding: var(--s6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r4);
  box-shadow: var(--lift);
}

/* ============================================================
   咩愿池
   ============================================================ */
.wish-form { display: grid; gap: var(--s4); }
.wish-field { display: grid; gap: var(--s2); font: 500 var(--t-xs) var(--sans); color: var(--ink-2); }
.wish-field input, .wish-field textarea {
  font: 400 var(--t-base) var(--sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r2); padding: 0.6em 0.8em; resize: vertical;
}
.wish-field input:focus-visible, .wish-field textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.wish-actions { display: flex; justify-content: center; }   /* 按钮居中，对齐输入框中心 */
.wish-msg { font-size: var(--t-sm); color: var(--accent-ink); text-align: center; min-height: 1.2em; margin: 0; }

/* 咩愿池独立页：左=表单，右=上介绍/下实时愿望 */
.wish-page { padding-block: var(--s10) var(--s16); }
.wish-page .map-head { margin-bottom: var(--s8); max-width: 44em; }
.wish-grid { display: grid; gap: var(--s8); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 920px) { .wish-grid { grid-template-columns: 1fr 1.1fr; } }

.wish-side { display: grid; gap: var(--s5); }
.wish-intro { padding: var(--s5) var(--s6); background: var(--accent-soft); border-radius: var(--r4); }
.wish-intro p { margin: 0; color: var(--ink-2); }

/* ---------- 软件定制：右下角悬浮胶囊 + 模态表单 ----------
   刻意移出文档流：不占许愿池任何空间，同时常驻可见（显眼）。 */

/* 胶囊本体 */
.coop-fab {
  position: fixed; z-index: 55;
  right: clamp(12px, 3vw, 28px); bottom: clamp(12px, 3vw, 28px);
  display: grid; justify-items: end; gap: var(--s2);
}
.coop-fab-btn {
  position: relative; display: inline-flex; align-items: center; gap: .5em;
  font: 600 var(--t-sm) var(--sans); color: var(--amber-deep);
  background: linear-gradient(var(--amber-wash), color-mix(in oklch, var(--amber) 22%, var(--surface)));
  border: 1.5px solid color-mix(in oklch, var(--amber) 45%, var(--border));
  border-radius: var(--r-pill); padding: .7em 1.15em; cursor: pointer;
  box-shadow: var(--lift-lg); transition: transform var(--d2) var(--ease-out), box-shadow var(--d2) var(--ease);
}
.coop-fab-btn:hover { transform: translateY(-2px); }
.coop-fab-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.coop-fab-emoji { font-size: 1.05em; }
/* 慢呼吸光晕：安静地引人注意，不吵 */
.coop-fab-btn::after {
  content: ''; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none;
  border: 1.5px solid color-mix(in oklch, var(--amber) 55%, transparent);
  animation: coopPulse 2.8s var(--ease) infinite;
}
@keyframes coopPulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  45% { opacity: .75; transform: scale(1.045); }
}

/* 展开面板 */
.coop-fab-panel {
  width: min(78vw, 330px); display: grid; gap: var(--s3);
  padding: var(--s5); text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r4); box-shadow: var(--lift-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98);
  transition: opacity var(--d2) var(--ease), transform var(--d2) var(--ease-out), visibility 0s linear var(--d2);
}
.coop-fab.is-open .coop-fab-panel,
.coop-fab:focus-within .coop-fab-panel {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.coop-fab-pitch { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
.coop-fab-cta { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.coop-fab-go { flex: 1 1 auto; justify-content: center; }
.coop-fab-mail { font-size: var(--t-xs); color: var(--accent-ink); }
.coop-fab-mail:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 移动端：面板变底部条，胶囊留右下角 */
@media (max-width: 760px) {
  .coop-fab-panel {
    position: fixed; left: 12px; right: 12px; bottom: 78px; width: auto;
  }
}

/* 模态表单 */
.coop-modal {
  position: fixed; inset: 0; z-index: 65;
  display: grid; place-items: center; padding: var(--s4);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--d2) var(--ease), visibility 0s linear var(--d2);
}
.coop-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.coop-card {
  position: relative; width: min(94vw, 420px); display: grid; gap: var(--s4);
  max-height: 90vh; overflow-y: auto;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--r4);
  box-shadow: var(--lift-lg); padding: var(--s6);
  transform: translateY(8px) scale(.98); transition: transform var(--d2) var(--ease-out);
}
.coop-modal.is-open .coop-card { transform: none; }
.coop-title { font-family: var(--serif); font-size: var(--t-md); margin: 0; text-align: center; }
.coop-sub { margin: 0; color: var(--ink-2); font-size: var(--t-sm); text-align: center; }
.coop-form { display: grid; gap: var(--s2); }
.coop-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
@media (max-width: 560px) { .coop-row { grid-template-columns: 1fr; } }
.coop-form input, .coop-form textarea {
  font: 400 var(--t-sm) var(--sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r2);
  padding: .5em .7em; width: 100%; resize: vertical;
}
.coop-form input:focus-visible, .coop-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.coop-actions { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.coop-msg { margin: 0; font-size: var(--t-sm); min-height: 1.2em; }
.coop-msg.is-err { color: oklch(0.55 0.19 25); }
.coop-msg.is-ok { color: var(--accent-ink); }
.coop-privacy { margin: 0; font-size: var(--t-xs); color: var(--ink-3); }

/* 许愿成功后的二次触达（不占布局，点开才出现） */
.wish-upsell {
  justify-self: start; font: 500 var(--t-xs) var(--sans); color: var(--accent-ink);
  background: var(--accent-soft); border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
  border-radius: var(--r-pill); padding: .45em 1em; cursor: pointer;
  transition: background var(--d1) var(--ease);
}
.wish-upsell:hover { background: color-mix(in oklch, var(--accent) 16%, var(--surface)); }
.wish-upsell:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wish-upsell[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .coop-fab-btn, .coop-fab-panel, .coop-card { transition: none; }
  .coop-fab-btn::after { animation: none; opacity: .35; }
}

.wish-live-t { display: flex; align-items: center; gap: var(--s2); font-family: var(--serif); font-size: var(--t-md); margin: 0 0 var(--s4); }
.wish-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 20%, transparent); animation: wishpulse 2s var(--ease) infinite; }
@keyframes wishpulse { 50% { opacity: .4; } }

.wish-list { display: grid; gap: var(--s3); max-height: 32em; overflow-y: auto; padding-right: 4px; }
.wish-item { display: grid; gap: var(--s2); padding: var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r3); }
.wish-body { margin: 0; color: var(--ink); white-space: pre-wrap; }
.wish-item-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.wish-meta { font-size: var(--t-xs); color: var(--ink-3); }
.wish-like {
  display: inline-flex; align-items: center; gap: .35em; flex: none;
  font: 500 var(--t-xs) var(--sans); color: var(--ink-2);
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: .22em .7em; cursor: pointer;
  transition: background var(--d1) var(--ease), color var(--d1) var(--ease), border-color var(--d1) var(--ease), transform var(--d1) var(--ease);
}
.wish-like:hover { border-color: var(--border-2); }
.wish-like:active { transform: scale(.95); }
.wish-like.is-on { color: var(--accent-ink); background: var(--accent-soft); border-color: color-mix(in oklch, var(--accent) 35%, transparent); }
.wish-like:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wish-empty { color: var(--ink-3); font-size: var(--t-sm); }