/* ==========================================================================
   Artardor · Editorial Cool
   Design system: editorial magazine / cool luxury / asymmetric grid
   Palette: cream + cold charcoal + emerald accent + antique gold (sparing)
   Type:    Cormorant Garamond (英文) + Noto Serif SC 思源宋体 (中文) 全站统一
   V7 / M4 / D3
   ========================================================================== */

/* Google Fonts: 由各 HTML <link> 加载 Cormorant Garamond + Noto Serif SC */

:root {
  /* ---- Color: Editorial Cool ---- */
  --paper:        #f0ebe3;   /* 奶白底 */
  --paper-2:      #e8e2d6;   /* 略深分区底 */
  --paper-3:      #ddd5c5;   /* 更深分区底 */
  --ink:          #1a1f1c;   /* 冷深炭 */
  --ink-2:        #2c322e;   /* 略浅 */
  --muted:        #5f635f;   /* 冷灰 · WCAG AA 5.15 / 4.74 */
  --muted-2:      #676560;   /* 更浅冷灰 · AA 4.91 / 4.51 */
  --line:         rgba(26, 31, 28, 0.14);
  --line-soft:    rgba(26, 31, 28, 0.08);
  --emerald:      #0d5e3a;   /* 祖母绿主色 */
  --emerald-2:    #0a3a25;   /* 祖母绿暗 */
  --emerald-soft: rgba(13, 94, 58, 0.08);
  --gold:         #7b601c;   /* 古金 · AA 5.01 / 4.61 */
  --white:        #ffffff;

  /* ---- Type ---- */
  --font-display: "Cormorant Garamond", "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
  --font-serif-cn: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-body:    "Newsreader", "Noto Serif SC", "Songti SC", "STSong", serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans:    "Inter", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-serif:   "Cormorant Garamond", "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
  --accent:       #0d5e3a;   /* = --emerald，此前未定义导致 var(--accent) 全部失效 */
  --ink-soft:     #4a504c;   /* 同上，此前未定义 */

  /* ---- Spacing (editorial airy) ---- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 72px;
  --space-6: 112px;
  --space-7: 160px;

  /* ---- Type scale：正文/UI 8 级 + 展示 8 级（此前 150 条声明 38 个取值，0 个变量） ---- */
  --fs-1: 10px;  --fs-2: 11px;  --fs-3: 12px;  --fs-4: 13px;
  --fs-5: 14px;  --fs-6: 15px;  --fs-7: 18px;  --fs-8: 21px;
  --fs-d1: 24px; --fs-d2: 28px; --fs-d3: 32px; --fs-d4: 36px;
  --fs-d5: 48px; --fs-d6: 64px; --fs-d7: 80px; --fs-d8: 96px;
  /* ---- Line-height 4 级（此前 49 条声明 19 个取值） ---- */
  --lh-1: 1.15;  --lh-2: 1.35;  --lh-3: 1.65;  --lh-4: 1.8;

  --container:    1280px;
  --container-narrow: 880px;

  /* ---- Shape (锐角杂志风) ---- */
  --radius:       0px;        /* 全站锐角 */
  --radius-input: 2px;        /* 输入框极轻圆角 */
  --shadow:       0 20px 50px rgba(26, 31, 28, 0.08);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { background: var(--paper); }

body {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: var(--lh-3);
  font-size: var(--fs-6);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

/* ==========================================================================
   RTL (Arabic) adaptation
   ========================================================================== */
html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="rtl"] .section-num { right: auto; left: var(--space-3); }
html[dir="rtl"] .nav-links,
html[dir="rtl"] .nav-toggle { right: auto; left: var(--space-3); }
html[dir="rtl"] .hero-split,
html[dir="rtl"] .why-feature,
html[dir="rtl"] .step-bar { direction: rtl; }
html[dir="rtl"] .form-grid { direction: rtl; }
html[dir="rtl"] .lang-menu { right: auto; left: 0; }

/* ==========================================================================
   Layout: container
   ========================================================================== */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-3); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-3); }

/* ==========================================================================
   Typography (magazine scale)
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-1);
  letter-spacing: -0.012em;
  color: var(--ink);
}

h1 { font-size: clamp(48px, 7vw, 96px); font-weight: 600; }

/* 中文方块字不使用负字距 —— -0.012em 是拉丁字母的排印技巧，中文会挤在一起 */
html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3, html[lang="zh"] h4 { letter-spacing: 0; }
h2 { font-size: clamp(36px, 4.5vw, 64px); font-weight: 600; }
h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 600; }
h4 { font-size: var(--fs-6); font-family: var(--font-body); font-weight: 600; letter-spacing: 0.02em; }

p { color: var(--ink-2); font-size: var(--fs-6); }
.sub { font-size: var(--fs-7); color: var(--muted); line-height: var(--lh-3); max-width: 56ch; }

.serif { font-family: var(--font-display); font-style: italic; font-weight: 400; }
.mono  { font-family: var(--font-mono); font-size: var(--fs-2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* Drop cap (杂志首字下沉) */
.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 5.2em;
  float: left;
  line-height: 0.85;
  margin: 0.08em 0.12em 0 -0.04em;
  color: var(--emerald);
}

/* ==========================================================================
   Eyebrow + 装饰横线（限制每 3 屏最多 1 个）
   ========================================================================== */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--emerald);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
}

/* ==========================================================================
   Buttons (锐角)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  font-family: var(--font-body);
  font-size: var(--fs-5);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--emerald); border-color: var(--emerald); }

.btn-outline {
  background: rgba(243, 240, 232, 0.85);
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--paper); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
  padding: 14px 0;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: var(--fs-6);
}
.btn-ghost .arrow { display: inline-block; transition: transform 0.3s ease; }
.btn-ghost:hover .arrow { transform: translateX(6px); }

/* ==========================================================================
   Section base
   ========================================================================== */
.section { padding: var(--space-7) 0; position: relative; }
.section-alt { background: var(--paper-2); }
.section-deep { background: var(--ink); color: var(--paper); }
.section-deep h1, .section-deep h2, .section-deep h3, .section-deep p { color: var(--paper); }
.section-deep .sub { color: rgba(240, 235, 227, 0.7); }
.section-deep .eyebrow { color: var(--gold); }

.section-head { margin-bottom: var(--space-5); }
.section-head.center { text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 { margin: var(--space-2) 0 var(--space-3); }
.section-head .sub { margin: 0; }
/* 板块头两行小字（主标题 + 补充句）之间的间距 */
.section-head .sub + .sub { margin-top: var(--space-2); }
/* 中式雅集分类介绍：独立陈述句（放大、与上方留间隔） */
.works-statement {
  font-family: var(--font-serif-cn);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 600;
  line-height: var(--lh-3);
  color: var(--ink);
  margin-top: var(--space-3);
}
#works .product-grid { margin-top: var(--space-5); }

.section-num {
  position: absolute;
  top: var(--space-5);
  right: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-d8);
  font-weight: 400;
  color: var(--ink);
  opacity: 0.14;
  line-height: var(--lh-1);
  pointer-events: none;
  font-style: italic;
}
.section-deep .section-num { color: var(--paper); opacity: 0.18; }

/* ==========================================================================
   顶部导航（杂志风）
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(240, 235, 227, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 28px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 var(--space-3);
  max-width: var(--container);
  margin: 0 auto;
}
.nav-meta .right { display: flex; gap: var(--space-3); align-items: center; }
.nav-meta .right .dot { width: 6px; height: 6px; background: var(--emerald); border-radius: 50%; display: inline-block; }

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  line-height: var(--lh-1);
  column-gap: 12px;
}

/* ---- 品牌 LOGO：有图（assets/logo.png）自动替换文字，无图自动回退 ---- */
.brand-logo {
  display: none;
  max-height: 40px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.brand.has-logo { flex-direction: row; align-items: center; }
.brand.has-logo .brand-logo { display: block; }
/* 有 LOGO 时保留文字（LOGO 现在是纯图形标） */
.brand.has-logo .brand-text { display: flex; }
.brand.no-logo .brand-logo { display: none; }

.brand-text {
  display: flex;
  flex-direction: column;
}
.brand-name {
  font-family: var(--font-display);
  font-size: var(--fs-d1);
  font-weight: 600;
  letter-spacing: 0.18em;
}
.brand-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

.nav-links {
  display: flex;
  gap: 18px;
}
.nav-links a {
  font-family: var(--font-body);
  font-size: var(--fs-5);
  font-weight: 600;
  color: var(--ink);
  position: relative;
  padding: 4px 0;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--emerald);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }

/* 案例展示：上传真实案例之前只保留菜单项、不可点击（v3-29，她的要求）。
   静态 HTML 里这一项本来就没有 href，所以关掉 JS 也点不动；
   等 content.js 的 cases 有记录，main.js 会自动把链接接回来。 */
.nav-links a.is-locked {
  color: var(--muted-2);
  opacity: 0.6;
  cursor: default;
}
.nav-links a.is-locked::after { display: none; }
.footer-col a.is-locked {
  color: rgba(240, 235, 227, 0.4);
  cursor: default;
}
.footer-col a.is-locked:hover { color: rgba(240, 235, 227, 0.4); }

.nav-right { display: flex; align-items: center; gap: var(--space-2); }

.lang-switch { position: relative; }
.lang-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--line);
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  border-radius: var(--radius);
  transition: border-color 0.2s ease;
}
.lang-btn:hover { border-color: var(--ink); }
.lang-btn .globe { width: 14px; height: 14px; }
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 160px;
  padding: 6px 0;
  display: none;
  z-index: 200;
}
.lang-menu.open { display: block; }
.lang-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-4);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.lang-menu button:hover { background: var(--paper-2); }
.lang-menu button.current { color: var(--emerald); font-weight: 600; }
.lang-menu button .code { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--muted); letter-spacing: 0.12em; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  align-items: flex-end;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--ink);
  transition: all 0.3s ease;
}
.nav-toggle span:nth-child(2) { width: 18px; }

/* ==========================================================================
   HERO · 眉标（页面上居中）+ 主图块（页面中间，文字铺图右空白区）+ 卡片按钮（图下方）
   ========================================================================== */
.hero {
  position: relative;
  padding: var(--space-5) 0 var(--space-7);
}
.hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #383026;
  max-width: 880px;
  margin: 0 auto var(--space-4);
}
.hero-meta .line { flex: 1; height: 1px; background: rgba(43, 32, 18, 0.35); }
.hero-meta .date { color: var(--emerald-2); }

/* 主图块：整幅底图按 1920:1200 原比例完整显示，居中放在页面上（不铺满屏幕） */
.hero-canvas { position: relative; }
.hero-canvas-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 1200;
  object-fit: cover;
  background-color: #c6ac87;   /* 图未加载时的兜底底色 */
}
/* 标题与正文铺在图右侧的空白部分（图左 1/3 是工笔画），区内水平垂直居中 */
.hero-canvas-text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 33.4%;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 3.5%;
  text-align: center;
}
/* 品牌主张：从图内拎出来，成为图片之外的全宽居中大字 */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -0.005em;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto var(--space-5);
  text-wrap: balance;   /* 德文等长语种折行时自动均衡行长，避免末行孤字 */
}
.hero-title em { font-style: normal; }
/* 中文：方块字视觉重量大，字号略低于英文，且不使用负字距 */
html[lang="zh"] .hero-title {
  font-size: clamp(25px, 2.8vw, 37px);
  line-height: 1.42;
  letter-spacing: 0;
  max-width: 760px;
}

/* 图内右侧：雅集释义段的小标题 */
.hero-intro-title {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 600;
  line-height: var(--lh-2);
  letter-spacing: 0.01em;
  margin-bottom: var(--space-3);
}
.hero-intro-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  background: rgba(43, 32, 18, 0.4);
  margin: var(--space-2) auto 0;
}
html[lang="zh"] .hero-intro-title { font-size: clamp(18px, 1.7vw, 22px); }
/* C-04：原来 max-width:720px 配 15px 字 ≈ 85 字符/行，偏宽。收到 64ch（仍在 60–75 舒适区），
   同时保证首屏 4 段正文能在主图右侧高度内完整容纳，不溢出图外 */
.hero-intro { max-width: 64ch; margin: 0 auto; }
.hero-intro p {
  font-family: var(--font-body);
  font-size: var(--fs-6);
  line-height: var(--lh-4);
  color: var(--ink-2);
  margin-bottom: var(--space-2);
}
.hero-intro p:last-child { margin-bottom: 0; }

.works-foot { margin-top: var(--space-5); text-align: center; }

/* 受众卡片：主图下方，页面底色上居中 */
.hero-audience {
  max-width: 860px;
  margin: var(--space-5) auto 0;
  border: 1px solid var(--line);
  background: var(--paper-2);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  text-align: center;
}
.aud-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-5);
  letter-spacing: 0.14em;
  color: var(--emerald);
  margin-bottom: var(--space-2);
}
.aud-text {
  font-family: var(--font-body);
  font-size: var(--fs-6);
  line-height: var(--lh-4);
  color: var(--ink-2);
}
@media (max-width: 1200px) {
  /* 窄屏：主图整幅显示（16:10），标题正文移到图下方页面上，眉标竖排居中。
     断点从 900px 提到 1200px —— 1200px 以下主图右侧高度不足以容纳
     4 段首屏正文（含雅集释义，德文最长），文字会被挤出图外，故一并下移 */
  .hero-canvas-img { aspect-ratio: 16 / 10; }
  .hero-canvas-text { position: static; padding: var(--space-4) var(--space-2) 0; }
  .hero-meta { flex-direction: column; gap: var(--space-1); text-align: center; }
  .hero-meta .line { display: none; }
}
@media (max-width: 768px) {
  .hero-audience { grid-template-columns: 1fr; }
}

/* 整幅通栏横图 16:9 */
.hero-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--paper-2);
  overflow: hidden;
}
.hero-media .placeholder-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media .media-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--muted-2);
}
.hero-media .media-fallback .ico {
  font-family: var(--font-display);
  font-size: var(--fs-d6);
  font-style: italic;
  opacity: 0.4;
  color: var(--emerald);
}
.hero-media .media-fallback .name {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hero-caption {
  margin-top: var(--space-2);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}

.hero-folio {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   选品直展（3 列网格 · 杂志目录式，不分类，点图进详情）
   ========================================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
.product-card:hover .pc-media img { transform: scale(1.05); }
.product-card:hover .pc-name { color: var(--emerald); }

.pc-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-3);
}
.pc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-num {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.2em;
  color: var(--paper);
  background: var(--ink);
  padding: 6px 10px;
  z-index: 2;
}
.pc-body {
  padding: var(--space-3);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.pc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.pc-tag.heritage {
  color: var(--emerald);
  border-color: var(--emerald);
}
.pc-name {
  font-family: var(--font-display);
  font-size: var(--fs-8);
  line-height: var(--lh-2);
  transition: color 0.3s ease;
}
.pc-lead {
  font-size: var(--fs-4);
  line-height: var(--lh-3);
  color: var(--muted);
}
.pc-more {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-2);
}
.category-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-2);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.category-card:hover { transform: translateY(-4px); }
.category-card:hover .category-media img { transform: scale(1.05); }
.category-card:hover .category-body h3 { color: var(--emerald); }

.category-card.feature {
  grid-row: span 2;
}

.category-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-3);
}
.category-card.feature .category-media { aspect-ratio: 4 / 5; }
.category-card .category-media img,
.category-card .category-media .placeholder-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-num {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.2em;
  color: var(--paper);
  background: var(--ink);
  padding: 6px 10px;
  z-index: 2;
}

.category-body {
  padding: var(--space-3);
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.category-body h3 {
  font-size: var(--fs-d2);
  margin-bottom: 6px;
  transition: color 0.3s ease;
}
.category-body .meta {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.products-foot {
  margin-top: var(--space-5);
  text-align: center;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   我们的优势 · 大图特写 + 双小图横向
   ========================================================================== */
.why-feature {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  align-items: stretch;
}
.why-feature-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  overflow: hidden;
}
.why-feature-media img,
.why-feature-media .placeholder-img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.why-feature-media .num {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-d7);
  font-weight: 400;
  color: var(--ink);
  opacity: 0.38;
  font-style: italic;
  line-height: var(--lh-1);
  z-index: 2;
}
.why-feature-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-3) 0;
}
.why-feature-body .eyebrow { margin-bottom: var(--space-3); }
.why-feature-body h3 { font-size: clamp(36px, 3.5vw, 56px); margin-bottom: var(--space-3); }
.why-feature-body p { font-size: var(--fs-7); line-height: var(--lh-3); color: var(--ink-2); max-width: 48ch; }

.why-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.why-mini {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-3);
  align-items: start;
}
.why-mini-media {
  aspect-ratio: 1 / 1;
  background: var(--paper-2);
  overflow: hidden;
}
.why-mini-media img,
.why-mini-media .placeholder-img { width: 100%; height: 100%; object-fit: cover; }
.why-mini-body { padding-top: 4px; }
.why-mini-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-d4);
  color: var(--emerald);
  line-height: var(--lh-1);
  margin-bottom: var(--space-2);
}
.why-mini h3 { font-size: var(--fs-d1); margin-bottom: var(--space-1); }
.why-mini p { font-size: var(--fs-6); line-height: var(--lh-3); color: var(--ink-2); }

/* ==========================================================================
   团队（About 页 #team）· 一位成员一个整屏区块
   左栏：照片 + 姓名 + 职位（居中）｜ 右栏：两段简历
   列表顺序＝页面顺序，第一位在第一屏、第二位在第二屏，往后自动往下加
   ========================================================================== */
.team-grid { display: block; }

.member {
  display: grid;
  grid-template-columns: minmax(0, 4.5fr) minmax(0, 6fr);
  gap: var(--space-5);
  align-items: center;
  /* 一人一屏：留出新站固定的顶栏高度，滚一屏正好一位成员 */
  min-height: calc(100vh - 150px);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--line);
}
.member:first-child { border-top: 0; padding-top: var(--space-4); }

.member-side { text-align: center; }
.member-photo {
  margin: 0 auto;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 3 / 4;
  background: var(--paper-2);
  overflow: hidden;
}
.member-photo picture { display: block; width: 100%; height: 100%; }
.member-photo img { width: 100%; height: 100%; object-fit: cover; }
.member-name {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-d2);
  line-height: var(--lh-1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.member-role {
  margin-top: 8px;
  font-size: var(--fs-5);
  line-height: var(--lh-2);
  color: var(--muted);
}

.member-bio p {
  font-size: var(--fs-7);
  line-height: var(--lh-4);
  color: var(--ink-2);
  max-width: 56ch;
}
.member-bio p + p { margin-top: var(--space-3); }

@media (max-width: 960px) {
  .member {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    min-height: 0;
    padding: var(--space-5) 0;
  }
  .member-photo { max-width: 280px; }
  .member-bio p { max-width: none; }
}
html[dir="rtl"] .member-side { text-align: center; }

/* ==========================================================================
   合作流程（横向 step bar，杂志进度式）
   ========================================================================== */
.process-intro {
  max-width: 56ch;
  margin: 0 auto var(--space-5);
  text-align: center;
  font-size: var(--fs-7);
  color: var(--ink-2);
}
/* v3.19：六步拆成上下两行（上 3 / 下 3）—— 她 2026-10-17 要求 */
.step-bar {
  display: grid;
  /* 用 minmax(0, 1fr)：默认的 1fr 最小宽度是 max-content，德语那种长词会把整列撑宽，
     窄屏直接顶出横向滚动。 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.step {
  padding: var(--space-4) var(--space-3);
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
  position: relative;
}
.step:nth-child(3n) { border-right: 0; }
.step:last-child { border-right: 0; }
.step .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-d3);
  color: var(--emerald);
  display: block;
  margin-bottom: var(--space-3);
  line-height: var(--lh-1);
}
.step h3 {
  font-size: var(--fs-8);
  margin-bottom: var(--space-1);
}
.step p {
  font-size: var(--fs-4);
  line-height: var(--lh-3);
  color: var(--muted);
}
/* 长复合词（德语尤甚）不硬撑列宽，必要时断词换行 */
.step h3,
.step p { overflow-wrap: anywhere; }

/* ==========================================================================
   采购须知 / 买家决策答疑（B2B 降低决策成本）
   ========================================================================== */
.buyer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.buyer-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: var(--space-4);
}
.buyer-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--emerald);
  border: 1px solid var(--line);
  padding: 4px 9px;
  margin-bottom: var(--space-3);
}
.buyer-card h3 {
  font-size: var(--fs-8);
  line-height: var(--lh-2);
  margin-bottom: var(--space-2);
}
.buyer-card p {
  font-size: var(--fs-6);
  line-height: var(--lh-3);
  color: var(--ink-2);
}
.buyer-foot {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.buyer-foot p {
  font-size: var(--fs-6);
  line-height: var(--lh-3);
  color: var(--ink-2);
  max-width: 60ch;
}

/* ==========================================================================
   联系表单（锐角、极简、杂志问卷式）
   ========================================================================== */
.inquiry .container { max-width: 920px; }
/* v3.19 · 询盘表单改成「表格」形式（她 2026-10-17 要求）：
   单元格之间画满 1px 细线，标签在上、填写区在下，文字整体放大一号 */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  background: var(--paper);
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-3);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.form-field:nth-child(2n) { border-right: 0; }
.form-field.full { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
.form-field label {
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.form-field .req {
  color: var(--emerald);
  font-style: italic;
  font-family: var(--font-display);
  font-size: var(--fs-2);
  letter-spacing: 0;
  text-transform: none;
}
.form-field input,
input, textarea, select,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: var(--fs-6);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  border-radius: var(--radius-input);
  transition: border-color 0.25s ease;
  outline: none;
  width: 100%;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-bottom-color: var(--emerald); }
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 14px) center, calc(100% - 8px) center; background-size: 6px 6px; background-repeat: no-repeat; }
.form-field input[type="file"] { padding: 10px 0; }

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.form-note {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 1;
}
.form-success {
  display: none;
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--emerald-soft);
  border-left: 2px solid var(--emerald);
  font-size: var(--fs-6);
  color: var(--emerald-2);
}
.form-success.show { display: block; }

/* ==========================================================================
   页脚（杂志风：hairline + colophon）
   ========================================================================== */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-6) 0 var(--space-3);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: var(--gold);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(240, 235, 227, 0.12);
}
.footer-brand .brand-name { font-size: var(--fs-d4); color: var(--paper); }
.footer-brand p {
  color: rgba(240, 235, 227, 0.65);
  margin-top: var(--space-2);
  font-size: var(--fs-5);
  max-width: 36ch;
  line-height: var(--lh-3);
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
  font-weight: 600;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  color: rgba(240, 235, 227, 0.85);
  font-size: var(--fs-5);
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--gold); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240, 235, 227, 0.45);
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ==========================================================================
   概念库页（concepts.html）· 杂志目录式
   ========================================================================== */
.catalog-hero {
  padding: var(--space-6) 0 var(--space-5);
  border-bottom: 1px solid var(--line);
}
.catalog-hero .meta {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.catalog-hero h1 {
  font-size: clamp(48px, 6vw, 80px);
  margin-bottom: var(--space-3);
}
.catalog-hero p { font-size: var(--fs-7); color: var(--ink-2); max-width: 60ch; }

.catalog-body { display: block; padding: var(--space-5) 0; }

/* 详情页：非遗 / 工艺标签行 与 段落小标题 */
.pd-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-2); }
.pd-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-d2);
  line-height: var(--lh-1);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}
.catalog-side {
  position: sticky;
  top: 100px;
  align-self: start;
}
.catalog-side h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-3);
  font-weight: 600;
}
.catalog-side ul { list-style: none; }
.catalog-side li { margin-bottom: 4px; }
.catalog-side button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 0;
  font-family: var(--font-display);
  font-size: var(--fs-8);
  color: var(--muted);
  cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
  transition: color 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.catalog-side button:hover { color: var(--ink); }
.catalog-side button.active { color: var(--emerald); }
.catalog-side button .count {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--muted);
  letter-spacing: 0.12em;
}

.catalog-main { min-height: 60vh; }
.catalog-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.catalog-row:last-child { border-bottom: 0; }
.catalog-row-media {
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  overflow: hidden;
  position: relative;
}
.catalog-row-media img { width: 100%; height: 100%; object-fit: cover; }
.catalog-row-media .tag {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: var(--paper);
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.catalog-row-body { display: flex; flex-direction: column; justify-content: center; }
.catalog-row-body h3 { font-size: var(--fs-d4); margin-bottom: var(--space-2); }
.catalog-row-body .tag-row {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--emerald);
  margin-bottom: var(--space-2);
}
.catalog-row-body p { color: var(--ink-2); line-height: var(--lh-3); margin-bottom: var(--space-3); }
.catalog-empty {
  text-align: center;
  padding: var(--space-7) var(--space-3);
  color: var(--muted);
}
.catalog-empty .ico {
  font-family: var(--font-display);
  font-size: var(--fs-d5);
  font-style: italic;
  color: var(--emerald);
  margin-bottom: var(--space-2);
  display: block;
}

/* ==========================================================================
   产品详情页（product.html）· 大图 + 文字 + 规格分组
   ========================================================================== */
/* ==========================================================================
   主题详情页（theme.html）· 标题 + 硬指标 → 上图下文两栏 → 横条信息卡 → 说明 + 询盘
   --------------------------------------------------------------------------
   版式来自 2026-10-16 的设计稿：
     · 顶部：返回 / 标题 / 一句话 / 人数·时长·布置量（风格页为规模·季节）
     · 上排两栏：左配图，右「01 历史由来 + 02 玩法介绍」（风格页为「01 是什么 + 02 关键元素」）
     · 横条卡：左主题色块 + 编号，右三项「适合场景布置 / 适合手作形式 / 适合客户类型」
     · 底部：左侧说明行，右下「发询盘」
   相关主题不再单独成块——已并进横条卡第一项，仍然是可点的站内反链。
   ========================================================================== */
.pd { padding-bottom: var(--space-6); }

.pd-head { padding: var(--space-5) 0 var(--space-4); }
.pd-head .bread {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.pd-head .bread a { color: var(--muted); text-decoration: none; transition: color 0.3s ease; }
.pd-head .bread a:hover { color: var(--emerald); }
.pd-head h1 { font-size: clamp(44px, 6vw, 76px); line-height: var(--lh-1); margin-bottom: 0; }

/* 上排两栏：左配图 / 右文字 */
.pd-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.pd-figure {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-figure picture { display: block; width: 100%; height: 100%; }
.pd-figure img { width: 100%; height: 100%; object-fit: cover; }
.pd-figure.is-swatch {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.30) 100%);
}
.pd-figure.is-swatch .sw-big {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 76px);
  line-height: var(--lh-1);
  color: #ffffff;
  text-align: center;
  padding: 0 var(--space-4);
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.35);
}

.pd-copy { padding-top: 4px; }
.pd-sec + .pd-sec { margin-top: var(--space-4); }
.pd-sec-t {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display);
  font-size: var(--fs-d2);
  line-height: var(--lh-1);
  margin-bottom: var(--space-2);
}
.pd-sec-t .n {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.2em;
  color: var(--emerald);
}
.pd-copy > .pd-sec > p { font-size: var(--fs-7); line-height: var(--lh-4); color: var(--ink-2); }
.pd-mood {
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-5);
  line-height: var(--lh-2);
  color: var(--muted);
}
.pd-mood span {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 10px;
}

/* 横条信息卡：左主题色块 + 右三项
   三项做成「标签格 | 内容格」的一行式卡片：标签格带底色与竖分隔线，
   内容格一律从同一条竖线后起排 —— 一眼就能看清谁对应谁。 */
.pd-fit {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  border: 1px solid var(--ink);
  margin-top: var(--space-5);
}
.fit-swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.30) 100%);
}
.fit-swatch span {
  font-family: var(--font-display);
  font-size: var(--fs-d5);
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.35);
}
.fit-list { margin: 0; padding: 0; display: block; }
.fit-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: stretch;
  border-top: 1px solid var(--line);
}
.fit-row:first-child { border-top: 0; }
.fit-row dt {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: var(--paper-2);
  border-right: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--ink);
}
.fit-row dd {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px;
  font-size: var(--fs-6);
  line-height: var(--lh-3);
  color: var(--ink);
}
.fit-links { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.fit-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-5);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.fit-link:hover { border-color: var(--emerald); color: var(--emerald); }
.fit-dot { width: 8px; height: 8px; flex: none; }

/* 底部：说明行 + 询盘 */
.pd-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.pd-note { margin: 0; font-size: var(--fs-6); line-height: var(--lh-3); color: var(--muted); }

@media (max-width: 960px) {
  .pd-top { grid-template-columns: 1fr; gap: var(--space-4); }
  .pd-figure { aspect-ratio: 16 / 9; }
  .pd-fit { grid-template-columns: 1fr; }
  .fit-swatch { min-height: 120px; }
  .fit-row { grid-template-columns: 1fr; }
  .fit-row dt {
    padding: 9px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .fit-row dd { padding: 13px 16px; }
}
@media (max-width: 620px) {
  .pd-foot { flex-direction: column; align-items: flex-start; }
  .pd-foot .btn { width: 100%; text-align: center; }
}
html[dir="rtl"] .pd-mood span { margin-right: 0; margin-left: 10px; }
html[dir="rtl"] .pd-head .bread a { direction: rtl; }

/* ==========================================================================
   共用占位图样式
   ========================================================================== */
.placeholder-img { display: block; position: relative; z-index: 1; }
.placeholder-img.hide-img { display: none; }
.media-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--muted-2);
  background: var(--paper-2);
}
.media-fallback .ico {
  font-family: var(--font-display);
  font-size: var(--fs-d5);
  font-style: italic;
  color: var(--emerald);
  opacity: 0.6;
}
.media-fallback .name {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
/* 有真图时占位层必须让位：
   .media-fallback 是 position:absolute + z-index:3，不处理会永久盖住照片。
   首选 JS（onload 里 dropFallback() 直接摘掉该节点），这条 :has() 作兜底，
   覆盖懒加载图片尚未触发 onload 的窗口期。图片真失败时会带上 .hide-img，
   规则自动失效，占位层照常出现。 */
picture:has(> img.placeholder-img:not(.hide-img)) + .media-fallback { display: none; }

/* ==========================================================================
   导航：7 项在中等宽度排不下 → 提前收进汉堡菜单
   （原断点 960px 时 961–1220px 区间导航会折行，把 68px 的头条撑成两行）
   ========================================================================== */
@media (max-width: 1220px) {
  .nav-links { display: none; position: absolute; top: 68px; right: var(--space-3); left: var(--space-3); background: var(--paper); border: 1px solid var(--line); padding: var(--space-3); flex-direction: column; gap: var(--space-2); }
  .nav-links.open { display: flex; }
  .nav-toggle { display: flex; }
}

/* ==========================================================================
   响应式 · Mobile collapse
   ========================================================================== */
@media (max-width: 960px) {
  .nav-meta { display: none; }
  .nav-links { display: none; position: absolute; top: 68px; right: var(--space-3); left: var(--space-3); background: var(--paper); border: 1px solid var(--line); padding: var(--space-3); flex-direction: column; gap: var(--space-2); }
  .nav-links.open { display: flex; }
  .nav-toggle { display: flex; }
  .hero-split { display: block; }
  .hero-media { aspect-ratio: 4 / 3; }
  .product-grid { grid-template-columns: 1fr 1fr; }
  .why-feature, .member, .pd-top { grid-template-columns: 1fr; }
  .buyer-grid { grid-template-columns: 1fr; }
  .buyer-foot { flex-direction: column; align-items: flex-start; }
  .step-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step:nth-child(3) { border-right: 0; }
  .step:nth-child(n+4) { border-top: 1px solid var(--line); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .section-num { font-size: var(--fs-d6); top: var(--space-3); }
  .section { padding: var(--space-6) 0; }
}
@media (max-width: 640px) {
  h1 { font-size: var(--fs-d5); }
  h2 { font-size: var(--fs-d3); }
  .product-grid { grid-template-columns: 1fr; }
  .why-duo { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .step-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* 两列时把 3n 的「去右边框」还原，否则第 3 个会缺右边线 */
  .step:nth-child(3n) { border-right: 1px solid var(--line); }
  .step { border-right: 1px solid var(--line); }
  .step:nth-child(2n) { border-right: 0; }
  .step:nth-child(n+3) { border-top: 1px solid var(--line); }
  .brand-name { font-size: var(--fs-8); }
  .brand-tag { display: none; } /* 窄屏页头空间有限，品牌语藏起避免挤压 */
  .form-actions { flex-direction: column; align-items: stretch; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   PAGE LEDE — Privacy / generic top-of-page banner
   ========================================================================== */
section.page-lede {          /* 只给作为页头横幅的 <section> 用；<p class="page-lede"> 是导语段，不该继承这套留白 */
  padding: 160px 0 80px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.page-lede .folio {
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
  margin-bottom: var(--space-4);
}
.lede-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 72px);
  line-height: var(--lh-1);
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 900px;
}
.lede-line { display: block; }
.lede-line.italic {
  font-style: italic;
  color: var(--accent);
  margin-top: 4px;
}
.lede-sub {
  font-family: var(--font-serif);
  font-size: var(--fs-7);
  line-height: var(--lh-3);
  color: var(--muted);
  max-width: 640px;
  margin-top: var(--space-3);
}
.lede-rule {
  width: 100%;
  height: 1px;
  background: var(--line);
  margin: var(--space-5) 0 var(--space-3);
}
.lede-meta {
  display: flex;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  color: var(--muted);
  letter-spacing: 0.08em;
}
.lede-meta .lbl {
  color: var(--accent);
  text-transform: uppercase;
  margin-right: 6px;
}

/* ==========================================================================
   LEGAL LAYOUT — Privacy: two-column sticky TOC + body
   ========================================================================== */
.legal-section {
  padding: var(--space-7) 0;
  background: var(--paper);
}
.legal-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-6);
  align-items: start;
}
.legal-toc {
  position: sticky;
  top: 120px;
  padding: var(--space-3);
  border-left: 2px solid var(--accent);
}
.toc-title {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
}
.toc-list li {
  counter-increment: toc;
  font-family: var(--font-serif);
  font-size: var(--fs-6);
  line-height: var(--lh-3);
  border-bottom: 1px dotted var(--line);
}
.toc-list li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  color: var(--accent);
  margin-right: 8px;
}
.toc-list a {
  color: var(--ink);
  text-decoration: none;
  display: block;
  padding: 4px 0;
  transition: color 0.2s, padding 0.2s;
}
.toc-list a:hover {
  color: var(--accent);
  padding-left: 4px;
}
.toc-foot {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
  font-family: var(--font-serif);
  font-size: var(--fs-5);
  color: var(--muted);
}
.toc-foot .lbl {
  color: var(--accent);
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 4px;
}
.toc-foot a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color 0.2s;
}
.toc-foot a:hover { color: var(--accent); }

.legal-body { max-width: 680px; }
.legal-clause {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.legal-clause:last-of-type { border-bottom: none; }
.clause-num {
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  color: var(--accent);
  letter-spacing: 0.18em;
  margin-bottom: var(--space-1);
}
.legal-clause h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-d2);
  line-height: var(--lh-1);
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.legal-clause p {
  font-size: var(--fs-6);
  line-height: var(--lh-3);
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}
.legal-pull {
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--accent);
  background: var(--paper-2);
}
.legal-pull p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-8);
  line-height: var(--lh-2);
  color: var(--ink);
  margin: 0;
}

/* ==========================================================================
   404 PAGE — Editorial errata
   ========================================================================== */
.notfound {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  padding: var(--space-7) 0;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.notfound .container {
  position: relative;
  z-index: 1;
  text-align: center;
}
.nf-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-3);
}
.nf-meta .folio { color: var(--accent); }
.dot-inline {
  width: 4px; height: 4px;
  background: var(--accent);
  display: inline-block;
}
.nf-rule {
  width: 80px;
  height: 1px;
  background: var(--accent);
  margin: 0 auto var(--space-4);
}
.nf-rule-bottom { margin: var(--space-4) auto; }
.nf-num {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(120px, 22vw, 240px);
  line-height: 0.9;
  color: var(--ink);
  letter-spacing: -0.04em;
  font-feature-settings: "lnum";
  font-style: italic;
  position: relative;
}
.nf-num::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 60%, var(--paper) 100%);
  pointer-events: none;
}
.nf-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 4.5vw, 48px);
  line-height: var(--lh-1);
  color: var(--ink);
  margin: var(--space-3) 0;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.nf-title .line { display: block; }
.nf-title .italic { font-style: italic; color: var(--accent); }
.nf-sub {
  font-family: var(--font-serif);
  font-size: var(--fs-7);
  line-height: var(--lh-3);
  color: var(--muted);
  max-width: 520px;
  margin: 0 auto var(--space-4);
}
.nf-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}
.nf-suggest {
  margin-top: var(--space-5);
  text-align: center;
}
.nf-suggest h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
  margin-bottom: var(--space-2);
}
.nf-suggest ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}
.nf-suggest li a {
  font-family: var(--font-serif);
  font-size: var(--fs-6);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color 0.2s;
}
.nf-suggest li a:hover { color: var(--accent); }

/* 404 background mark — large ghost numeral (RTL safe) */
[dir="rtl"] .notfound::before,
.notfound::before {
  content: "Errata";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(180px, 28vw, 360px);
  color: var(--line);
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: -0.04em;
}

/* ==========================================================================
   LEGAL & 404 — Responsive collapse
   ========================================================================== */
@media (max-width: 880px) {
  .legal-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .legal-toc { position: static; }
  .legal-pull p { font-size: var(--fs-7); }
  .lede-meta { flex-direction: column; gap: 8px; }
  .page-lede { padding: 120px 0 60px; }
  .legal-clause h2 { font-size: var(--fs-d1); }
  .nf-actions { flex-direction: column; align-items: stretch; }
  .nf-actions .btn { width: 100%; }
  .nf-suggest ul { flex-direction: column; gap: 12px; }
}

/* ==========================================================================
   Preview tag (footer "Journal preview")
   ========================================================================== */
.tag-preview {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay-2, var(--emerald, #0d5e3a));
  border: 1px solid currentColor;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: var(--lh-2);
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-list {
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.faq-q {
  width: 100%;
  display: grid;
  grid-template-columns: 56px 1fr 32px;
  align-items: center;
  gap: var(--space-2);
  padding: 22px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-7);
  color: var(--ink);
  letter-spacing: 0;
  line-height: var(--lh-2);
}
.faq-q .faq-num {
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  color: var(--muted);
  letter-spacing: 0.08em;
}
.faq-q .faq-toggle {
  font-family: var(--font-mono);
  font-size: var(--fs-7);
  color: var(--muted);
  transition: transform 0.3s ease;
  justify-self: end;
}
.faq-item.open .faq-q .faq-toggle { transform: rotate(45deg); color: var(--emerald, #0d5e3a); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.45s ease, padding 0.3s ease;
  padding: 0 56px 0 calc(56px + var(--space-2));
  color: var(--muted);
  font-size: var(--fs-6);
  line-height: var(--lh-3);
}
.faq-item.open .faq-a {
  grid-template-rows: 1fr;
  padding: 4px 56px 26px calc(56px + var(--space-2));
}
.faq-a > .faq-a-inner { overflow: hidden; }

/* ==========================================================================
   About / FAQ / Journal page layouts
   ========================================================================== */
.page-lede {
  max-width: 780px;
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: var(--lh-3);
  color: var(--ink);
  margin: var(--space-3) 0 var(--space-6);
  font-style: italic;
}

.about-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: stretch;
  margin: var(--space-5) 0;
}
.about-strip-text {
  padding: var(--space-3);
  background: var(--white);
  border: 1px solid var(--line);
}
.about-strip-media {
  min-height: 380px;
  position: relative;
}
.about-strip-media .placeholder-img { width: 100%; height: 100%; object-fit: cover; }
.about-strip-media .media-fallback { height: 100%; min-height: 380px; }

@media (max-width: 720px) {
  .about-strip { grid-template-columns: 1fr; }
  .about-strip-media { min-height: 240px; }
  .faq-q { grid-template-columns: 36px 1fr 24px; font-size: var(--fs-6); }
  .faq-a, .faq-item.open .faq-a { padding-left: calc(36px + var(--space-2)); padding-right: 36px; }
}

/* ==========================================================================
   v3.18 · About 页 · 板块一「团队总体介绍」—— 左图 · 右文
   成员介绍之前的内容全部合并成这一块（原 inner-hero / studio / china /
   europe / craft / values 六个 section 已撤掉，文案合并为 about.intro.*）。
   左栏配图比右栏文字短得多，所以让它 sticky 跟着滚，避免下方空一大片。
   ========================================================================== */
.team-intro-sec { padding-top: var(--space-6); }

.team-intro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-5);
  align-items: start;
}

.team-intro-media {
  position: sticky;
  top: 116px;                    /* 固定顶栏高度 + 一点余量 */
  aspect-ratio: 4 / 5;
  background: var(--paper-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.team-intro-media picture { display: block; width: 100%; height: 100%; }
.team-intro-media .placeholder-img { width: 100%; height: 100%; object-fit: cover; }

.team-intro-text .eyebrow { margin-bottom: var(--space-3); }
.team-intro-text h1 {
  font-size: clamp(26px, 3vw, 44px);
  line-height: var(--lh-1);
  margin: 0 0 var(--space-3);
}
.team-intro-text p {
  font-size: var(--fs-7);
  line-height: var(--lh-4);
  color: var(--ink-2);
  margin: 0;
  max-width: 64ch;
}
.team-intro-text p + p { margin-top: var(--space-3); }
.team-intro-text .team-intro-lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: var(--lh-3);
  color: var(--ink);
  margin: 0 0 var(--space-4);
}

@media (max-width: 960px) {
  .team-intro { grid-template-columns: 1fr; gap: var(--space-4); }
  .team-intro-media { position: static; aspect-ratio: 3 / 2; max-width: 560px; }
  .team-intro-text p { max-width: none; }
}

.journal-grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.journal-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--white);
  border: 1px solid var(--line);
  align-items: stretch;
}
.journal-card-media {
  min-height: 200px;
  position: relative;
}
.journal-card-media .placeholder-img { width: 100%; height: 100%; object-fit: cover; }
.journal-card-body { padding-left: var(--space-2); }
.journal-card-date {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.journal-card h3 {
  font-size: var(--fs-d1);
  margin: 8px 0 12px;
  font-family: var(--font-serif);
  font-weight: 400;
}
.journal-card-excerpt { color: var(--muted); font-size: var(--fs-6); line-height: var(--lh-3); }
.journal-card-ispreview { margin-top: var(--space-2); }
.journal-empty {
  padding: var(--space-6) 0;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  font-family: var(--font-serif);
  font-size: var(--fs-7);
}

@media (max-width: 720px) {
  .journal-card { grid-template-columns: 1fr; }
  .journal-card-media { min-height: 160px; }
  .journal-card-body { padding-left: 0; }
}

/* Hero for inner pages (about / faq / journal) */
.inner-hero {
  padding: 0 0 var(--space-6);
}
.inner-hero .hero-meta { margin-top: 0; }

/* ---- 联系表单：文件选择按钮与整站风格统一 ---- */
input[type="file"]::file-selector-button {
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  letter-spacing: 0.08em;
  padding: 10px 18px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
input[type="file"]::file-selector-button:hover { background: var(--ink); color: var(--paper); }


/* ---- 组合（bundle）系列 ---- */
.pc-tag.bundle {
  color: var(--gold);
  border-color: var(--gold);
}

/* 详情页：组合内含的单品列表 */
.bundle-items { display: flex; flex-direction: column; }
.bundle-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}
.bundle-item:first-child { border-top: 1px solid var(--line); }
.bundle-item .bi-num {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  color: var(--gold);
  letter-spacing: 0.1em;
}
.bundle-item .bi-name { flex: 1; font-size: var(--fs-5); }
.bundle-item .bi-craft {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.08em;
  color: rgba(26,26,26,0.55);
}
.bundle-item .arrow { font-size: var(--fs-4); transition: transform 0.2s ease; }
.bundle-item:hover .arrow { transform: translateX(4px); }
.bundle-item:hover .bi-name { text-decoration: underline; }

/* 详情页：详细使用步骤 */
.usage-steps {
  margin: var(--space-4) 0;
  border-top: 1px solid var(--ink);
}
.usage-step {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}
.usage-step .us-num {
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  letter-spacing: 0.1em;
  color: var(--gold);
  padding-top: 3px;
  flex-shrink: 0;
}
.usage-step h4 {
  font-family: var(--font-display);
  font-size: var(--fs-7);
  margin: 0 0 6px;
}
.usage-step p {
  font-size: var(--fs-5);
  line-height: var(--lh-4);
  margin: 0;
  color: rgba(26,26,26,0.82);
}

/* ==========================================================================
   新增模块 · 信任徽章带 / 二选一分流 / 三种合作 / 示意方案 / 直连 / Cookie
   （依据《Artardor 独立站改进建议全案》P0–P1 落地）
   ========================================================================== */

/* 底图带（首页通用）：整块＝一张底图，文字浮在版位内。
   版位宽度 = 首屏雅集底图（.hero-canvas-img）的宽度 —— 同为容器内宽（1232px@1440）。
   底图规格见各 band 的 aspect-ratio 注释；没放图时是浅色底版位，不会空框。 */
.band-sec { padding: 0 0 var(--space-4); }
.band {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background-color: var(--paper-2);
  /* background-image 由 js/main.js 的 applyBands 注入（inline style） */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* 文字一侧的柔和遮罩：套上底图后才出现（没图时是干净的浅色版位）。
   左侧 40% 基本不遮，保证图能看清；进入文字区迅速加到 0.9 以上保证可读。 */
.band-text {
  position: relative;
  width: 46%;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
}
.band.has-bg .band-text {
  background-image: linear-gradient(to right,
      rgba(240, 235, 227, 0) 0%,
      rgba(240, 235, 227, 0.35) 30%,
      rgba(240, 235, 227, 0.88) 52%,
      rgba(240, 235, 227, 0.95) 100%);
}

/* ① 信任带：图案在左、文字竖排在右。底图 assets/band-trust.jpg —— 2400 × 600（4:1） */
.band-trust { min-height: calc((min(100vw, 1280px) - 48px) / 4); }

/* 两条底图带：她给的底图原样使用 —— 不重绘、不羽化、不叠任何渐变遮罩。
   文字块是纯透明底，直接压在她的图右侧留白上。
   靠左对齐：窄屏（德语/法语文字高会把版位撑高）时 cover 的横向裁切只裁右侧，图案永不被切。
   ⚠️ 这两条必须放在下面 ≤900px 的媒体查询之前 —— 同一优先级（0,2,0）时后写的赢，
      放在后面会把窄屏的 background-position: top left 顶掉（窄屏横幅就会跑到版位中间）。 */
.band-trust.has-bg,
.band-combine.has-bg,
.band-about.has-bg { background-position: left center; }
.band-trust.has-bg .band-text,
.band-combine.has-bg .band-text,
.band-about.has-bg .band-text { background-image: none; }
.band-trust .trust-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin: 0;
  padding: 0;
  text-align: left;
}
.band-trust .trust-list li {
  position: relative;
  padding-left: 20px;
  border: 0;
  font-family: var(--font-serif-cn);
  font-size: var(--fs-4);
  line-height: var(--lh-3);
  color: var(--ink-2);
}
.band-trust .trust-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 11px;
  height: 1px;
  background: var(--emerald);
}
/* 底图带的图案一律画在「物理左侧」、留白在物理右侧（底图不镜像），
   所以阿语下文字仍须留在物理右侧 —— RTL 下 flex-start 才是右端。
   遮罩方向同理保持 to right，不随书写方向翻转。 */
html[dir="rtl"] .band { justify-content: flex-start; }
html[dir="rtl"] .band-text {
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4);
}
html[dir="rtl"] .band-trust .trust-list { text-align: right; }
html[dir="rtl"] .band-trust .trust-list li { padding-left: 0; padding-right: 20px; }
html[dir="rtl"] .band-trust .trust-list li::before { left: auto; right: 0; }
/* 低门槛钩子：起订量 / 人数 / 交期 */
.trust-hook {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.trust-hook i {
  font-style: normal;
  color: var(--line);
  margin: 0 .6em;
}
@media (max-width: 640px) {
  .trust-hook { display: flex; flex-direction: column; gap: 6px; }
  .trust-hook i { display: none; }
}

/* 二选一分流：办活动 / 采购产品 */
.split-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.split-card {
  display: block;
  border: 1px solid var(--line);
  background: var(--paper-2);
  padding: var(--space-5) var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, transform .2s ease;
}
.split-card:hover { border-color: var(--emerald); transform: translateY(-2px); }
.split-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--emerald);
  margin-bottom: var(--space-2);
}
.split-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-d1);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.split-card p {
  font-family: var(--font-serif-cn);
  font-size: var(--fs-5);
  line-height: var(--lh-4);
  color: var(--ink-2);
  margin-bottom: var(--space-3);
}
.split-cta {
  font-family: var(--font-display);
  font-size: var(--fs-6);
  font-weight: 600;
  color: var(--emerald);
}

/* 三种合作深度 */
.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.work-card {
  border: 1px solid var(--line);
  border-top: 3px solid var(--emerald);
  background: var(--paper); /* 该卡位于浅褐底区段上，需比区段更亮才能显形 */
  padding: var(--space-4);
  text-align: center;
}
.work-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--emerald);
  margin-bottom: var(--space-2);
}
.work-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-8);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.work-card p {
  font-family: var(--font-serif-cn);
  font-size: var(--fs-5);
  line-height: var(--lh-4);
  color: var(--ink-2);
}

/* 示意方案（无真实案例时的合规替代） */
.prog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.prog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--paper-2);
  padding: var(--space-4);
}
.prog-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-8);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.prog-card dl { margin: 0; }
.prog-card dt {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--emerald);
  margin-top: var(--space-2);
}
.prog-card dd {
  margin: 2px 0 0;
  font-family: var(--font-serif-cn);
  font-size: var(--fs-4);
  line-height: var(--lh-4);
  color: var(--ink-2);
  flex: 1 1 auto;   /* 不再硬编码两行高度：德语/阿语变长也不会错位 */
}
.prog-note {
  margin-top: var(--space-4);
  font-size: var(--fs-3);
  line-height: var(--lh-4);
  color: var(--muted);
  text-align: center;
  font-style: italic;
}

/* 直连方式（WhatsApp / 邮箱） */
.direct-contact {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  text-align: center;
}
.direct-contact h3 {
  font-family: var(--font-display);
  font-size: var(--fs-7);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.btn-wa {
  background: #25d366;
  color: #fff;
  border-color: #25d366;
}
.btn-wa:hover { background: #1ebe5b; color: #fff; }
.direct-contact p {
  margin-top: var(--space-3);
  font-size: var(--fs-5);
  color: var(--ink-2);
}

/* Cookie 提示条 */
.cookie-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  background: rgba(30, 26, 20, .96);
  color: #f3f0e8;
  padding: 14px 0;
}
.cookie-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.cookie-text { font-size: var(--fs-4); line-height: var(--lh-3); }
.cookie-btn {
  background: transparent;
  border: 1px solid #f3f0e8;
  color: #f3f0e8;
  padding: 6px 18px;
  font-family: var(--font-serif-cn);
  font-size: var(--fs-4);
  cursor: pointer;
}
.cookie-btn:hover { background: #f3f0e8; color: #1e1a14; }

/* 响应式 */
@media (max-width: 900px) {
  .works-grid, .prog-grid { grid-template-columns: 1fr; }
  /* 底图带：窄屏文字铺满整条，遮罩改为竖向，文字不会被图案吃掉 */
  .band { aspect-ratio: auto; padding: var(--space-3) 0; }
  .band-text,
  .band.has-bg .band-text {
    width: 100%;
    padding: var(--space-3);
    background-image: linear-gradient(to bottom, rgba(240, 235, 227, 0.92) 0%, rgba(240, 235, 227, 0.97) 100%);
  }
  html[dir="rtl"] .band-text {
    padding: var(--space-3);
    background-image: linear-gradient(to bottom, rgba(240, 235, 227, 0.92) 0%, rgba(240, 235, 227, 0.97) 100%);
  }

}

/* ==========================================================================
   底图带（信任带 4:1 / 组合带 10:3）· 中窄屏布局
   版位宽度一缩，文字就得占更多行，版位会比「宽 ÷ 图的宽高比」更高；
   而 background-size: cover 是按高度放大的 —— 版位一高，图就被横向裁掉，
   图里那条「图案区 / 留白区」的分界会一路往右走，文字最终落到图案上。
   所以 ≤1180px 直接换成「顶部整幅横幅 ＋ 文字落在下方平底」：
     padding-top 用百分比（按宽度算）＝ 宽 ÷ 图的宽高比 ＝ 横幅高度，
     图设 100% auto 靠上对齐，刚好落进这条 padding 里，一个像素都不裁。
   ========================================================================== */
@media (max-width: 1180px) {
  .band-trust.has-bg,
  .band-combine.has-bg,
  .band-about.has-bg {
    background-size: 100% auto;
    background-position: top left;
    background-repeat: no-repeat;
    background-color: transparent;   /* 图以外的位置直接透出页面底色，不另加色板 */
  }
  .band-trust.has-bg { padding-top: 25%; }      /* 底图 2400 × 600 → 4:1  */
  .band-combine.has-bg { padding-top: 30%; }    /* 底图 2400 × 720 → 10:3 */
  /* 8:5 的图做整幅横幅会很高，所以这一条同时把 min-height 归零 ——
     高度只由 padding-top 决定，图下面不多留一块空版位。 */
  .band-about.has-bg { padding-top: 62.5%; min-height: 0; }  /* 底图 2400 × 1500 → 8:5 */
  /* 写成 .band.xxx 提高一级优先级：≤900px 那段里的
     `.band.has-bg .band-text`（同为 0,3,0 但写在后面）会给文字块补一层纸色渐变，
     这里必须压过它 —— 横幅底下是白给的，文字块不该再有底色。 */
  .band.band-trust.has-bg .band-text,
  .band.band-combine.has-bg .band-text,
  .band.band-about.has-bg .band-text {
    width: 100%;
    padding: var(--space-3);
    background-image: none;
  }
}

/* 居中区块：导语同步居中，避免窄栏悬空 */
.section-head.center .sub { margin-left: auto; margin-right: auto; text-align: center; }

/* ==========================================================================
   工具类：替代原先写死在 HTML 里的内联样式（内联优先级高于媒体查询，小屏不缩）
   ========================================================================== */
.mw-760 { max-width: 760px; }
.mw-780 { max-width: 780px; }
.mt-3   { margin-top: var(--space-3); }
.ta-center { text-align: center; }
.section-head-tight { margin-top: var(--space-6); margin-bottom: var(--space-3); }
p.prose-lead { font-size: var(--fs-7); line-height: var(--lh-4); }
p.prose-muted { color: var(--muted); }
p.prose-quote { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-8); }
.h2-d4 { font-size: var(--fs-d4); }

/* B-09：间距令牌此前从未在任何媒体查询里被重写，375px 屏上区块间距仍是 112px */
@media (max-width: 640px) {
  :root { --space-5: 48px; --space-6: 64px; --space-7: 80px; }
}

/* ==========================================================================
   Collections 区：其余主题按需开发（v2 定位升级新增）
   ========================================================================== */
.works-more {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-5);
  line-height: var(--lh-4);
  color: var(--muted);
  text-align: center;
}
.works-more a {
  color: var(--emerald);
  border-bottom: 1px solid var(--emerald);
  padding-bottom: 1px;
  margin-left: 6px;
  white-space: nowrap;
}
.works-more a:hover { opacity: .78; }

/* 受众卡：贸易/批发伙伴补注 */
.aud-trade {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--line);
  font-family: var(--font-body);
  font-size: var(--fs-4);
  line-height: var(--lh-3);
  color: var(--muted);
}

/* ==========================================================================
   Inspirations 页：文化传统 → 商业应用
   ========================================================================== */
.insp-list { padding: var(--space-5) 0 0; }
.insp-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--line);
}
.insp-item:first-child { border-top: none; padding-top: 0; }
.insp-num {
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  letter-spacing: 0.14em;
  color: var(--emerald);
  padding-top: 6px;
}
.insp-item h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  line-height: var(--lh-2);
  margin-bottom: var(--space-2);
}
.insp-what {
  font-family: var(--font-body);
  font-size: var(--fs-6);
  line-height: var(--lh-4);
  color: var(--ink-2);
  max-width: 62ch;
}
.insp-biz {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--paper-2);
  border-left: 2px solid var(--emerald);
}
.insp-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--emerald);
  margin-bottom: 6px;
}
.insp-biz p {
  font-family: var(--font-body);
  font-size: var(--fs-6);
  line-height: var(--lh-4);
  color: var(--ink);
  max-width: 60ch;
}
.insp-who {
  font-size: var(--fs-5);
  color: var(--muted);
  margin-top: 8px;
}
.insp-link {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emerald);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
@media (max-width: 700px) {
  .insp-item { grid-template-columns: 1fr; gap: var(--space-2); }
  .insp-num { padding-top: 0; }
}

/* ==========================================================================
   For Business 页：四类客户 + 两个方案块
   ========================================================================== */
.biz-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  padding: var(--space-5) 0 0;
}
.biz-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: var(--space-4);
}
.biz-card h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  line-height: var(--lh-2);
  margin-bottom: var(--space-2);
}
.biz-card p {
  font-family: var(--font-body);
  font-size: var(--fs-6);
  line-height: var(--lh-4);
  color: var(--ink-2);
}
.biz-blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  padding: var(--space-6) 0 0;
}
.biz-block {
  border-top: 2px solid var(--ink);
  padding-top: var(--space-3);
}
.biz-block h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.biz-block p {
  font-family: var(--font-body);
  font-size: var(--fs-6);
  line-height: var(--lh-4);
  color: var(--ink-2);
  margin-bottom: var(--space-3);
}
.biz-cta { padding: var(--space-6) 0 var(--space-5); text-align: center; }
.biz-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  line-height: var(--lh-2);
  margin-bottom: var(--space-2);
}
.biz-cta p {
  font-family: var(--font-body);
  font-size: var(--fs-7);
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto var(--space-4);
}
@media (max-width: 900px) {
  .biz-grid, .biz-blocks { grid-template-columns: 1fr; }
}

/* ==========================================================================
   V8 · 主题双轴（中式雅集 7 玩法 × 布置风格 5）＋ 空图位色块
   —— 空图位不是"缺图"，是设计好的版位：主题色块 + 主题名 + 细边框。
      数据层填上 img 文件名即自动换成照片（同名 .webp 需一并生成）。
   ========================================================================== */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
/* 布置风格轴只有 4 个主题 → 四宫格（2 × 2），上面两个、下面两个 */
.theme-grid.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .theme-grid { grid-template-columns: repeat(2, 1fr); } }

.theme-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.theme-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); }
.theme-card:hover .tc-name { color: var(--emerald); }
.theme-card:hover .tc-media img { transform: scale(1.05); }

.tc-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-2);
}
.tc-media picture { display: block; width: 100%; height: 100%; }
.tc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 压暗层：浅色主题色或照片之上，白色编号都保持可读 */
.tc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.12) 46%, rgba(0, 0, 0, 0.02) 100%);
}
/* 内嵌细边框：图位是设计好的版位，不是"缺图"占位 */
.tc-media::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.26);
  pointer-events: none;
}
.tc-media .media-fallback { z-index: 3; }
.tc-num {
  position: absolute;
  z-index: 3;
  left: var(--space-3);
  bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-d5);
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35);
}

/* 空图位色块：主题色纯色版位（不是"缺图"）——编号浮在色块上，
   数据层填上 img 文件名即自动换成照片。 */
.theme-swatch { position: absolute; inset: 0; }

.tc-body {
  padding: var(--space-3);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.tc-name {
  font-family: var(--font-display);
  font-size: var(--fs-d2);
  line-height: var(--lh-2);
  transition: color 0.3s ease;
}
.tc-brief {
  font-size: var(--fs-6);
  line-height: var(--lh-3);
  color: var(--muted);
}
/* v3.19 · 「查看详情」加框 + 加底，做成看得见的按钮（她 2026-10-17 要求） */
.tc-more {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 9px 16px;
  border: 1px solid var(--ink);
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.theme-card:hover .tc-more { background: var(--emerald); border-color: var(--emerald); color: var(--paper); }
.tc-more .arrow { display: inline-block; transition: transform 0.3s ease; }
.theme-card:hover .tc-more .arrow { transform: translateX(5px); }

/* ---- 首页两大板块（玩法 6 / 风格 4）收尾 CTA ---- */
.axis-foot {
  margin-top: var(--space-3);
  text-align: center;
}

/* ---- 手作材料包（首页 #kits）：图 + 文，一行三个 ---- */
.kit-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.kit-copy { max-width: 64ch; }
.kit-copy .eyebrow { display: block; margin-bottom: 10px; }
.kit-copy h2 { margin-bottom: var(--space-2); }
.kit-copy p { color: var(--muted); font-size: var(--fs-6); line-height: var(--lh-3); }

.kit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.kit-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.kit-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); }
.kit-card:hover .kc-name { color: var(--emerald); }
.kit-card:hover .kc-media img { transform: scale(1.05); }
.kc-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-2);
}
.kc-media picture { display: block; width: 100%; height: 100%; }
.kc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.kc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.10) 46%, rgba(0, 0, 0, 0.02) 100%);
}
.kc-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 92px;          /* 图未配、文未填时也是一个设计好的版位，不是空壳 */
  padding: var(--space-3);
  border-top: 1px solid var(--line);
}
.kc-name {
  font-family: var(--font-display);
  font-size: var(--fs-d1);
  line-height: var(--lh-2);
  transition: color 0.3s ease;
}
.kc-desc {
  font-size: var(--fs-5);
  line-height: var(--lh-3);
  color: var(--muted);
}
/* 非遗手作卡片的「查看详情」——她 2026-10-17 要求与主题卡同款：加框加底色，
   卡片文字区是 flex 列，按钮靠 auto 外边距压到底部，四张卡高度不齐也都在底线上。 */
.kc-more { margin: auto 0 0; padding-top: var(--space-2); }
.kit-card:hover .tc-more { background: var(--emerald); border-color: var(--emerald); color: var(--paper); }
.kit-card:hover .tc-more .arrow { transform: translateX(5px); }
@media (max-width: 1100px) { .kit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .kit-grid { grid-template-columns: 1fr; }
  .kit-head { align-items: flex-start; }
}

/* ---- v3.14 · 组合说明 ＋ 公开深度声明：合并成一条扁底图带 ----
   版位与首屏雅集底图同宽（容器内宽 1232px@1440）。
   底图 assets/band-combine.jpg —— 2400 × 720 px（10:3，约 3.33:1）
   她的原图：图案占左侧约 62%，右侧 38% 是无图案的留白（底色过渡到浅米黄）。
   文字（三段合并成一组）就压在这右侧留白里，纯透明底、不叠任何遮罩。
   靠左对齐：版位被撑高时 cover 的横向裁切只裁右侧，图案永不被切。 */
.band-combine {
  min-height: calc((min(100vw, 1280px) - 48px) * 0.3);
}
.band-combine .band-text { width: 37%; }
/* 底图定位 / 透明底那两条写在文件靠前处（和信任带并在一起），这里不要重复声明 */
.combine-line {
  text-align: left;
  font-size: var(--fs-5);
  line-height: var(--lh-3);
  color: var(--ink-2);
}
.combine-line + .combine-line { margin-top: var(--space-2); }
.combine-link {
  color: var(--ink);
  border-bottom: 1px solid rgba(26, 31, 28, 0.35);
  padding-bottom: 1px;
  transition: opacity 0.3s ease;
}
.combine-link:hover { opacity: 0.68; }

/* 公开深度声明：并进同一条底图带，用一条细分隔线分层
   —— 这是全站唯一讲「给到哪一步」的地方，视觉上不再单独占一条带 */
.combine-note {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-4);
  line-height: var(--lh-3);
  color: var(--ink-2);
}
.notice-label {
  display: inline-block;
  flex: 0 0 auto;
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
}

.works-note {
  margin-top: var(--space-3);
  font-size: var(--fs-5);
  line-height: var(--lh-3);
  color: var(--muted-2);
  max-width: 76ch;
}

/* ---- Craft Kits 条 ---- */
.kit-band { border-top: 1px solid var(--line); }

/* ---- 主题详情：风格要素清单 / 交叉推荐 ---- */
.key-list {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 12px var(--space-2);
  margin: 0 0 var(--space-4);
}
.key-list dt {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 3px;
}
.key-list dd { margin: 0; font-size: var(--fs-5); line-height: var(--lh-3); }


/* ---- 旧链接过渡页 ---- */
.redirect-wrap {
  min-height: 72vh;
  display: flex;
  align-items: center;
  padding: var(--space-6) 0;
}
.redirect-wrap .brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-d2);
  margin-bottom: var(--space-3);
}
.redirect-wrap h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  line-height: var(--lh-1);
  margin-bottom: var(--space-3);
}
.redirect-wrap p {
  color: var(--muted);
  font-size: var(--fs-7);
  line-height: var(--lh-3);
  max-width: 62ch;
}
.redirect-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.redirect-back { margin-top: var(--space-4); font-size: var(--fs-5); }
.redirect-back a { color: var(--ink); }

@media (max-width: 720px) {
  .theme-grid { grid-template-columns: 1fr; }
  .theme-grid.grid-2 { grid-template-columns: 1fr; }
  .key-list { grid-template-columns: 1fr; gap: 4px; }
  .key-list dd { margin-bottom: 12px; }
  .tc-num { font-size: var(--fs-d4); }
}

/* ---- 阿语 RTL 适配（大图位、编号、清单） ---- */
.tc-num { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .tc-num { left: auto; right: var(--space-3); }
html[dir="rtl"] .redirect-actions { direction: rtl; }

/* ==========================================================================
   v3.3 / v3.14 · 底图带（组合说明 ＋ 公开深度声明）
   元素上加 .has-bg 即套上底图（由 js/main.js 的 applyBands 写 inline background-image），
   再加 .is-dark 则文字自动反白（HTML 上写 data-band-dark="1"）。
   版位：.band-combine 与首屏雅集底图同宽（容器内宽）
        底图规格 2400 × 720 px（10:3）
   ========================================================================== */
.band-combine.is-dark .combine-line { color: rgba(255, 255, 255, 0.9); }
.band-combine.is-dark .combine-link { color: #ffffff; border-bottom-color: rgba(255, 255, 255, 0.5); }
.band-combine.is-dark .combine-note { color: rgba(255, 255, 255, 0.82); border-top-color: rgba(255, 255, 255, 0.32); }
.band-combine.is-dark .notice-label { color: var(--ink); background: #ffffff; }
html[dir="rtl"] .band-combine .combine-line { text-align: right; }

/* ==========================================================================
   v3.12 / v3.18 · 首页 #about —— 横底图 + 右侧悬浮文字
   底图 assets/band-about.jpg —— 2400 × 1500 px（8:5），与首屏雅集底图同宽
   画面：左侧约 47% 是图案 / 场景，右侧约 53% 是无图案留白（文字压在这一侧）
   v3.18：她给的底图**原样使用** —— 不重绘、不羽化、不叠遮罩，文字块纯透明底。
   个人介绍不在这里 —— 入口指向 about.html#team
   ========================================================================== */
.band-about {
  min-height: calc((min(100vw, 1280px) - 48px) * 0.625);
}
.band-about .band-text { width: 48%; }
.band-about .eyebrow { display: inline-flex; margin-bottom: 12px; }
.band-about h2 {
  font-size: clamp(24px, 2.5vw, 38px);
  line-height: var(--lh-1);
  margin-bottom: var(--space-2);
}
html[lang="zh"] .band-about h2 { font-size: clamp(23px, 2.3vw, 34px); line-height: 1.35; }
.band-about .sub { font-size: var(--fs-5); line-height: var(--lh-3); max-width: none; }

.about-points {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.about-point h3 {
  font-family: var(--font-display);
  font-size: var(--fs-7);
  line-height: var(--lh-2);
  margin-bottom: 4px;
}
.about-point p {
  font-size: var(--fs-4);
  line-height: var(--lh-3);
  color: var(--ink-2);
}
.about-cta { margin-top: var(--space-3); }

/* 底图带上加了 .has-bg 后不再叠 CSS 边框，避免与图内画的框重影。
   注意 background-clip：默认背景会铺到 border box，于是那圈「透明边框」里露出的是
   没被遮罩洗过的原图，看着就像给底图描了一道深边 —— 裁到 padding box 才真干净。 */
.band.has-bg {
  border-color: transparent;
  background-clip: padding-box;
}

/* ==========================================================================
   v3.12 · 首页节奏：板块之间不留大空档，整页连成一条
   （其他页面不受影响，仍是原来的 --space-7 留白）
   ========================================================================== */
.band-sec { position: relative; }
.section-alt-band { background: var(--paper); padding: var(--space-4) 0; }
body[data-page="home"] .section { padding: var(--space-4) 0; }
body[data-page="home"] .hero { padding-bottom: var(--space-4); }
body[data-page="home"] .section-head { margin-bottom: var(--space-4); }

@media (max-width: 900px) {
  .band-about { min-height: 0; }
  .band-about .band-text { width: 100%; }
  /* 窄屏底图带文字铺满整条（.band 已在 900 断点统一处理），高度交给内容 */
  .band-combine { min-height: 0; }
  .band-combine .band-text { width: 100%; }
  html[dir="rtl"] .band-combine .band-text { width: 100%; }
}
html[dir="rtl"] .about-points { direction: rtl; }

/* ==========================================================================
   v3.19 · 2026-10-17 她的一批修改
   ① 板块头层级：eyebrow 提级成标题、h2 收回一级（图5/7/10/12/13）
   ② 语言切换改「国旗 + 语言名」（图15）
   ③ 手作包详情页（图1）：左轮播 / 右文字 / 下方细节图
   ④ 案例展示（图16/17）：列表卡 + 详情页左轮播右文字
   ========================================================================== */

/* ---------- ① 板块头层级 ---------- */
.section-head .eyebrow {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 600;
  line-height: var(--lh-2);
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink);
  gap: 14px;
}
.section-head .eyebrow::before { width: 40px; height: 1px; }
html[lang="zh"] .section-head .eyebrow { letter-spacing: 0.14em; }

.section-head h2 { font-size: clamp(26px, 2.8vw, 38px); }
.section-head .sub { font-size: var(--fs-7); line-height: var(--lh-3); }

/* 底图带里的 eyebrow 同样提级（图11「关于工作室」） */
.band-text .eyebrow {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 600;
  line-height: var(--lh-2);
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink);
  gap: 14px;
}
.band-text .eyebrow::before { width: 40px; height: 1px; }
html[lang="zh"] .band-text .eyebrow { letter-spacing: 0.14em; }

/* 信任带的标题「我们的优势」（2026-10-17 她的要求：
   ✂ 去掉标题前那道短横线、去掉原副标题「送到你的场地，不是送到港口。」
   ✂ 标题整体左移，左边缘与下方清单的短横线对齐（都在 x=0）） */
.band-eyebrow {
  display: block;
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 600;
  line-height: var(--lh-2);
  letter-spacing: 0.06em;
  color: var(--ink);
}
html[lang="zh"] .band-eyebrow { letter-spacing: 0.14em; }

/* 图3：三栏的标题明显化 */
.aud-label {
  font-size: var(--fs-d1);
  letter-spacing: 0.04em;
  color: var(--emerald);
  margin-bottom: var(--space-2);
}
html[lang="zh"] .aud-label { letter-spacing: 0.1em; }

/* 联系表单里的填写文字放大一号（图14） */
.form-field input,
.form-field textarea,
.form-field select { font-size: var(--fs-7); border-bottom-color: transparent; padding: 4px 0 6px; }
.form-field input::placeholder,
.form-field textarea::placeholder { font-size: var(--fs-7); color: var(--muted-2); }
.form-field textarea { min-height: 150px; }
.form-field input:focus,
.form-field textarea:focus { border-bottom-color: var(--emerald); }

@media (max-width: 640px) {
  .form-field,
  .form-field:nth-child(2n) { border-right: 0; }
  .form-field { padding: var(--space-2) var(--space-3); }
}

/* ---------- ② 语言切换：国旗 + 语言名 ---------- */
.lang-btn {
  background: var(--paper-2);
  border: 1px solid rgba(26, 31, 28, 0.32);
  padding: 9px 14px;
  gap: 9px;
  font-family: var(--font-body);
  font-size: var(--fs-5);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}
.lang-btn:hover { border-color: var(--ink); background: var(--white); }
.lang-btn .flag,
.lang-menu .flag {
  display: block;
  width: 22px;
  height: 15px;
  flex: 0 0 auto;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(26, 31, 28, 0.16);
}
.lang-btn .flag svg,
.lang-menu .flag svg { display: block; width: 100%; height: 100%; }
.lang-menu { min-width: 208px; max-height: calc(100vh - 130px); overflow-y: auto; overscroll-behavior: contain; }
.lang-menu button {
  justify-content: flex-start;
  gap: 10px;
  padding: 11px 16px;
  font-size: var(--fs-5);
}
.lang-menu button .name { flex: 1; text-align: left; }
html[dir="rtl"] .lang-menu button .name { text-align: right; }

/* ---------- ③ 轮播（手作包详情 / 案例详情共用） ---------- */
.car { position: relative; }
.car-viewport {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.car-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
}
.car-slide.is-active { opacity: 1; pointer-events: auto; }
.car-slide picture,
.car-slide img { display: block; width: 100%; height: 100%; }
.car-slide img { object-fit: cover; }
.car-swatch {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-d6);
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
}
.car-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(240, 235, 227, 0.9);
  border: 1px solid rgba(26, 31, 28, 0.22);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-7);
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.car-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* ⚠️ .car-btn 自带 display:flex，会盖掉 [hidden] 的 display:none ——
   单图时 initCarousel 设了 hidden 却还看得见箭头（v3-27 修）。 */
.car-btn[hidden], .car-dots[hidden] { display: none; }
.car-btn[disabled] { opacity: 0.32; cursor: default; }
.car-btn[disabled]:hover { background: rgba(240, 235, 227, 0.9); color: var(--ink); border-color: rgba(26, 31, 28, 0.22); }
.car-prev { left: 12px; }
.car-next { right: 12px; }
html[dir="rtl"] .car-prev { left: auto; right: 12px; }
html[dir="rtl"] .car-next { right: auto; left: 12px; }
.car-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: var(--space-2);
}
.car-dot {
  width: 28px;
  height: 2px;
  padding: 0;
  border: 0;
  background: var(--line);
  cursor: pointer;
}
.car-dot.is-active { background: var(--ink); }

/* ---------- ④ 手作包详情页（kit.html?id=） ---------- */
.kd-head { padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.kd-back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.kd-back:hover { color: var(--ink); }
.kd-head h1 { font-size: clamp(34px, 4vw, 56px); }
.kd-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.kd-copy h2 {
  font-size: var(--fs-d2);
  margin-bottom: var(--space-3);
}
.kd-copy p {
  font-size: var(--fs-6);
  line-height: var(--lh-4);
  color: var(--ink-2);
}
.kd-copy p + p { margin-top: var(--space-3); }
.kd-meta {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}
.kd-meta div {
  display: grid;
  grid-template-columns: 9em 1fr;
  gap: var(--space-2);
  font-size: var(--fs-5);
  line-height: var(--lh-3);
}
.kd-meta dt {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 3px;
}
.kd-meta dd { color: var(--ink-2); }
.kd-cta { margin-top: var(--space-4); }

/* 细节图区：宽度跟容器走，长度由图片数量决定 */
.kd-details { display: grid; gap: var(--space-4); }
.kd-details figure { margin: 0; }
.kd-details picture,
.kd-details img { display: block; width: 100%; }
.kd-details img { height: auto; }

@media (max-width: 960px) {
  .kd-top { grid-template-columns: 1fr; gap: var(--space-4); }
  .car-viewport { aspect-ratio: 16 / 10; }
}

/* ---------- ⑤ 案例展示列表（图16）---------- */
/* 目前还没有任何案例 → 板块带 hidden 属性整体隐藏，不留版位、不留空档 */
#cases-section[hidden] { display: none; }
body[data-page="cases"] .inner-hero { padding-bottom: var(--space-4); }
#cases-section[hidden] + .inquiry { padding-top: var(--space-5); }

.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 1100px) { .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .cs-grid { grid-template-columns: 1fr; } }
.cs-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-2);
}
.cs-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- ⑥ 案例详情（图17）：左轮播 + 右文字 ---------- */
.cd-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.cd-copy h2 { font-size: var(--fs-d2); margin-bottom: var(--space-3); }
.cd-copy p { font-size: var(--fs-6); line-height: var(--lh-4); color: var(--ink-2); }
.cd-copy p + p { margin-top: var(--space-3); }
@media (max-width: 960px) { .cd-top { grid-template-columns: 1fr; gap: var(--space-4); } }

/* 手作包列表卡改成可点击（进 kit.html?id=），「查看详情」用跟主题卡同款按钮 */
a.work-card {
  display: block;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
a.work-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); }
a.work-card:hover h3 { color: var(--emerald); }
.work-more {
  margin-top: var(--space-3);
  display: flex;
  justify-content: center;
}
.work-more .tc-more { margin-top: 0; }

/* v3-27 非遗手作卡改成「上图下文」（六项 → 3+3）。
   ⚠️ 只作用于加了 .has-media 的卡；contact.html 那三张纯文字卡不受影响。
   编号做成图上的小白牌，压在照片上也看得清；文字区左对齐，与首页手作包卡一致。 */
a.work-card.has-media {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-align: left;
  border-top: 1px solid var(--line);
}
.work-card.has-media .wm-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-2);
}
.work-card.has-media .wm-media picture { display: block; width: 100%; height: 100%; }
.work-card.has-media .wm-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
a.work-card.has-media:hover .wm-media img { transform: scale(1.05); }
.work-card.has-media .work-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  margin: 0;
  padding: 3px 9px;
  background: var(--paper);
  color: var(--emerald);
  font-size: var(--fs-1);
  line-height: 1.4;
  letter-spacing: 0.14em;
}
.work-card.has-media .wm-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: var(--space-4);
  border-top: 1px solid var(--line);
}
.work-card.has-media .wm-body h3 { margin-bottom: 0; }
.work-card.has-media .work-more {
  justify-content: flex-start;
  margin: auto 0 0;
  padding-top: var(--space-2);
}
a.work-card.has-media:hover .tc-more { background: var(--emerald); border-color: var(--emerald); color: var(--paper); }
a.work-card.has-media:hover .tc-more .arrow { transform: translateX(5px); }

/* 手作包卡片：v3-27 起六项 → 三列两行（3+3），与她给的六张图一一对应。
   窄屏由上面 .kit-grid 的两级断点接管：≤1100px 两列，≤720px 单列。 */

/* 「查看详情」再明显一点 */
.tc-more { font-size: var(--fs-3); padding: 10px 18px; }

/* 表格里的填写位保留一条极浅下划线，让人看得出在哪写 */
.form-field input,
.form-field textarea { border-bottom: 1px solid var(--line-soft); }
.form-field input:focus,
.form-field textarea:focus { border-bottom-color: var(--emerald); }

/* ==========================================================================
   长单词语言的窄屏兜底（v3-20）
   德语 Handwerksaktivität 这类 19 字母词，在 390 宽 + 48px 字号下会顶破版心
   （实测 craft-kits.html 溢出 24px）。中文没有词间空格，靠 overflow-wrap 兜底；
   拉丁语系靠 hyphens: auto + html[lang] 的断字词典。
   ========================================================================== */
h1, h2, h3, .hero-title, .page-title {
  overflow-wrap: break-word;
  hyphens: auto;
}
@media (max-width: 520px) {
  h1 { font-size: var(--fs-d4); }
}

/* ==========================================================================
   联系板块 · WhatsApp 与邮箱并列（v3-21）
   邮箱地址用等宽字体、禁止大写，避免 .btn 的 uppercase 把它变成
   HELLO@ARTARDOR.COM —— 商务场景里小写更专业。
   ========================================================================== */
.dc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  align-items: center;
}
.dc-mail {
  text-transform: none;
  letter-spacing: 0.01em;
  font-family: var(--font-mono);
  font-size: var(--fs-6);
}
.dc-mail svg { width: 17px; height: 17px; flex: 0 0 auto; }
.dc-mail .ico-check { display: none; }
.dc-mail.is-copied .ico-mail { display: none; }
.dc-mail.is-copied .ico-check { display: block; }
html[dir="rtl"] .dc-mail { direction: ltr; }   /* 邮箱地址在阿语页也要从左往右读 */

/* 邮箱按钮兜底反馈：系统没配邮件程序时点它 = 复制地址，边框转绿给出回应 */
.dc-mail.is-copied {
  border-color: var(--emerald);
  color: var(--emerald);
  background: rgba(46, 90, 76, 0.06);
}
.dc-mail.is-copied svg { opacity: 0.55; }

/* ==========================================================================
   工作站模式（?desk=1）—— 只给她自己看的入口
   客户访问正常网址时整块 hidden，页面上没有任何多余元素。
   ========================================================================== */
.desk-mail {
  position: relative;
  margin-left: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.25s, background 0.25s;
}
.desk-mail[hidden] { display: none; }
.desk-mail:hover { border-color: var(--ink); background: var(--paper); }
.desk-mail svg { width: 17px; height: 17px; }
.desk-mail.has-new { border-color: #b23b2e; color: #b23b2e; }
.desk-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #b23b2e;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--paper);
}
.desk-badge[hidden] { display: none; }

/* 手机上导航本来就挤（德语 Deutsch 标签更长），图标再占 38px 会顶出 2px。
   收窄到 34，边距也压一档。 */
@media (max-width: 520px) {
  .desk-mail { width: 34px; height: 34px; margin-left: var(--space-1); }
  .desk-mail svg { width: 15px; height: 15px; }
  .desk-badge { top: -6px; right: -6px; min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; }
}

/* ==========================================================================
   询盘提交成功弹窗（v3-25）
   原来是一行贴在表单下方的小字，客户基本看不到 —— 改成居中弹层。
   文案走 form.success / form.close，六语言同步。
   ========================================================================== */
.form-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}
.form-modal[hidden] { display: none; }
.fm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 31, 28, 0.58);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.fm-card {
  position: relative;
  width: min(460px, 100%);
  padding: 52px 40px 36px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.22);
  text-align: center;
  animation: fmIn 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fmIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.fm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--emerald);
  color: var(--paper);
}
.fm-icon svg { width: 26px; height: 26px; }
.fm-text {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-d1);
  font-weight: 600;
  line-height: var(--lh-2);
  color: var(--ink);
}
.fm-btn {
  min-width: 132px;
  padding: 13px 28px;
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-5);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.fm-btn:hover { background: var(--emerald); border-color: var(--emerald); }
.fm-x {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s;
}
.fm-x:hover { color: var(--ink); }
html[dir="rtl"] .fm-x { right: auto; left: 14px; }
@media (max-width: 520px) {
  .fm-card { padding: 44px 24px 28px; }
  .fm-text { font-size: var(--fs-7); }
}

/* ============================================================
   03 完整介绍（流觞席详情页长文）
   长文行宽限制在 68ch，保证阅读节奏；中文改用宋体、行高更松。
   ============================================================ */
.pd-story {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.pd-story-t {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display);
  font-size: var(--fs-d2);
  line-height: var(--lh-1);
  margin-bottom: var(--space-3);
}

.pd-story-t .n {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.2em;
  color: var(--emerald);
}

.pd-story-inner {
  max-width: 68ch;
}

.pd-story-inner h3 {
  font-family: var(--font-display);
  font-size: var(--fs-d3);
  line-height: var(--lh-2);
  font-weight: 500;
  color: var(--ink);
  margin: var(--space-5) 0 var(--space-2);
}

.pd-story-inner h3:first-child { margin-top: 0; }

.pd-story-inner h4 {
  font-family: var(--font-display);
  font-size: var(--fs-8);
  line-height: var(--lh-2);
  font-weight: 600;
  color: var(--ink);
  margin: var(--space-4) 0 var(--space-1);
}

.pd-story-inner p {
  font-size: var(--fs-7);
  line-height: var(--lh-4);
  color: var(--ink-2);
  margin-bottom: var(--space-2);
}

.pd-story-inner ul {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding-left: 1.4em;
}

.pd-story-inner li {
  position: relative;
  font-size: var(--fs-7);
  line-height: var(--lh-4);
  color: var(--ink-2);
  margin-bottom: 10px;
}

.pd-story-inner li::before {
  content: "—";
  position: absolute;
  left: -1.4em;
  color: var(--emerald);
}

.pd-story-inner strong {
  color: var(--ink);
  font-weight: 600;
}

.pd-story-inner .st-label {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--space-3) 0 var(--space-1);
}

/* 中文：宋体 + 更松的行高 */
html[lang="zh"] .pd-story-inner h3 {
  font-family: var(--font-serif-cn);
  font-weight: 600;
  letter-spacing: 0.02em;
}

html[lang="zh"] .pd-story-inner h4 {
  font-family: var(--font-serif-cn);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}

html[lang="zh"] .pd-story-inner p,
html[lang="zh"] .pd-story-inner li {
  font-family: var(--font-serif-cn);
  font-size: 17px;
  line-height: 1.95;
}

html[lang="zh"] .pd-story-inner .st-label { font-family: var(--font-sans); }

@media (max-width: 720px) {
  .pd-story { margin-top: var(--space-5); padding-top: var(--space-4); }
  .pd-story-inner { max-width: none; }
  .pd-story-inner h3 { font-size: var(--fs-d2); margin-top: var(--space-4); }
  .pd-story-inner h4 { font-size: var(--fs-7); }
  html[lang="zh"] .pd-story-inner p,
  html[lang="zh"] .pd-story-inner li { font-size: 16px; line-height: 1.9; }
}

/* ============================================================
   流觞席详情页：长文并入右栏，栏内滚动
   —— 右栏高度上限内滚动，左右两列等高；窄屏取消滚动改自然长页
   ============================================================ */
.pd-top.has-story {
  align-items: stretch;
}

/* 左图撑满整行高度，避免右栏滚动时左下留白 */
.pd-top.has-story .pd-figure {
  aspect-ratio: auto;
  min-height: 400px;
}

/* 右栏：固定高度上限 + 内部滚动 */
.pd-top.has-story .pd-copy {
  max-height: min(74vh, 720px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 26px), rgba(0,0,0,.25) 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 26px), rgba(0,0,0,.25) 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.pd-top.has-story .pd-copy::-webkit-scrollbar { width: 7px; }
.pd-top.has-story .pd-copy::-webkit-scrollbar-track { background: transparent; }
.pd-top.has-story .pd-copy::-webkit-scrollbar-thumb {
  background: var(--muted);
  border-radius: 4px;
  opacity: .55;
}
.pd-top.has-story .pd-copy::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* 长文页里 01/02 是导语，字号收一档，给 03 标题腾出首屏位置 */
.pd-top.has-story .pd-sec > p {
  font-size: var(--fs-6);
  line-height: 1.72;
}

.pd-top.has-story .pd-sec-t { margin-bottom: 10px; }

html[lang="zh"] .pd-top.has-story .pd-sec > p {
  font-size: 16px;
  line-height: 1.88;
}

/* 文章即右栏主体：无分隔线、无上间距，从顶部开始 */
.pd-copy .pd-story {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.pd-copy .pd-story-inner h3 {
  font-size: clamp(20px, 1.9vw, 26px);
  margin-top: var(--space-4);
}

.pd-copy .pd-story-inner { max-width: none; }

.pd-copy .pd-story-inner p,
.pd-copy .pd-story-inner li {
  font-size: var(--fs-6);
  line-height: 1.78;
}

/* 中文在窄栏里保持 16px / 行高 1.9 */
html[lang="zh"] .pd-copy .pd-story-inner p,
html[lang="zh"] .pd-copy .pd-story-inner li {
  font-size: 16px;
  line-height: 1.9;
}

html[lang="zh"] .pd-copy .pd-story-inner h3 {
  font-size: 21px;
}

html[lang="zh"] .pd-copy .pd-story-inner h4 { font-size: 16px; }

/* 长文末尾留白 > 渐隐区(26px)，滚到底时最后一行不会被淡化 */
.pd-copy .pd-story-inner { padding-bottom: 44px; }

/* 窄屏：取消栏内滚动，改自然长页（手机里框内滚动很难受） */
@media (max-width: 900px) {
  .pd-top.has-story { align-items: start; }
  .pd-top.has-story .pd-copy {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  .pd-top.has-story .pd-figure {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
}