/* ============================================================
   何珍泉 He Zhenquan
   Finger-Burnt-Ink Landscape · 手指焦墨山水
   —— 美术馆级别的东方数字展厅
   设计原则：墨为主，白为气，朱为魂
   ============================================================ */

:root {
  /* 纸 —— 宣纸的冷白，不偏黄 */
  --paper:      #fafaf8;
  --paper-2:    #f1f0ec;
  --paper-3:    #e5e3dd;

  /* 墨 —— 从浓到无 */
  --ink:        #0e0d0a;
  --ink-2:      #2e2c27;
  --ink-3:      #5f5c54;
  --ink-4:      #918d83;
  --ink-5:      #c6c2b8;
  --ink-6:      #e3e0d8;

  /* 朱 —— 印章红，唯一彩色 */
  --red:        #9a2a18;
  --red-2:      #b8391f;

  --line:       rgba(14, 13, 10, 0.14);
  --line-2:     rgba(14, 13, 10, 0.075);
  --line-3:     rgba(14, 13, 10, 0.035);

  --serif-cn: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", "PingFang SC", serif;
  --serif-en: "Optima", "Cormorant Garamond", "Palatino Linotype", "Palatino", Georgia, serif;
  --sans-cn:  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --sans-en:  "Inter", "Helvetica Neue", "Segoe UI", Arial, sans-serif;

  /* 节奏 */
  --pad:    clamp(22px, 5.4vw, 96px);
  --maxw:   1560px;
  --prose:  660px;
  --sec-y:  clamp(84px, 11vh, 168px);
}

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

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans-en);
  font-size: 16px;
  line-height: 1.78;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.zh { font-family: var(--sans-cn); }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
/* 长英文短语兜底换行，防止窄屏溢出 */
.hero-eyebrow, .hero-title-en, .hero-lead, .sec-hd .sub,
.qa-a, .tec p, .major-desc, .exh-txt p, .art-body p,
.tl-o, .note p, .col-cta p, .lb-desc { overflow-wrap: break-word; }

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

/* 语言切换：默认英文，body.zh 时切中文 */
.zh-mode { display: none; }
body.zh .zh-mode { display: inline; }
body.zh .en-mode { display: none !important; }
/* 特定元素需要 block / flex 语义 */
body.zh .zh-mode.zh-block { display: block; }
body.zh .zh-mode.zh-flex { display: flex; }

/* ============================================================
   导航
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 90;
  background: rgba(250, 250, 248, 0.86);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border-bottom: 1px solid var(--line-3);
  transition: border-color .4s, background .4s;
}
.nav.scrolled { border-bottom-color: var(--line-2); }

.nav-in {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--pad);
  height: 76px;
  display: flex; align-items: center; gap: 52px;
}

.brand { display: flex; align-items: center; gap: 13px; flex: 0 0 auto; }
.brand-mark {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: block; overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 0 0 1px rgba(14,13,10,.10);
  transition: box-shadow .4s, transform .4s;
}
.brand-mark img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 44%;
  filter: contrast(1.06) saturate(0);
}
.brand:hover .brand-mark { box-shadow: 0 0 0 1px rgba(154,42,24,.45); transform: translateY(-1px); }
.brand-cn {
  font-family: var(--serif-cn); font-size: 21px;
  letter-spacing: 0.26em; line-height: 1; color: var(--ink);
}
.brand-en {
  font-family: var(--serif-en); font-size: 10.5px;
  letter-spacing: 0.3em; color: var(--ink-4); text-transform: uppercase;
}

.nav-links { margin-left: auto; display: flex; gap: 38px; align-items: center; }
.nav-links a {
  position: relative;
  font-size: 12px; letter-spacing: 0.16em; color: var(--ink-3);
  padding: 6px 0; transition: color .3s;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--red);
  transition: width .38s cubic-bezier(.2,.7,.3,1);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.on::after { width: 100%; }
.nav-links a.on { color: var(--ink); }

.lang {
  flex: 0 0 auto;
  border: 1px solid var(--line); padding: 8px 16px;
  font-size: 10.5px; letter-spacing: 0.16em; color: var(--ink-2);
  transition: .3s; white-space: nowrap;
}
.lang:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* 移动端菜单按钮 */
.nav-burger { display: none; width: 30px; height: 30px; position: relative; flex: 0 0 auto; }
.nav-burger span {
  position: absolute; left: 3px; right: 3px; height: 1px; background: var(--ink);
  transition: .3s;
}
.nav-burger span:nth-child(1) { top: 10px; }
.nav-burger span:nth-child(2) { top: 19px; }
body.menu-open .nav-burger span:nth-child(1) { top: 14px; transform: rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { top: 14px; transform: rotate(-45deg); }

/* ============================================================
   版式基础
   ============================================================ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
/* 只设上下内边距，避免覆盖 .wrap 的左右内边距 */
.sec { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.sec.flush { padding-top: 0; }

/* 锚点跳转时为 sticky 导航让位 */
section[id] { scroll-margin-top: 76px; }

/* 区块标题：序号 · 中文大标 · 英文小标 · 细线 */
.sec-hd { margin-bottom: clamp(42px, 6vh, 78px); }

.sec-hd .lbl {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--serif-en); font-size: 10px;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 20px;
}
.sec-hd .lbl::before {
  content: ''; display: block; width: 34px; height: 1px; background: var(--line);
}

.sec-hd h2 {
  font-family: var(--serif-cn); font-weight: 400;
  font-size: clamp(30px, 3.5vw, 50px);
  letter-spacing: 0.14em; line-height: 1.24;
  color: var(--ink);
}
body:not(.zh) .sec-hd h2.dual { font-family: var(--serif-en); letter-spacing: 0.01em; }
.sec-hd h2.en {
  font-family: var(--serif-en); font-weight: 400;
  font-size: clamp(32px, 3.9vw, 56px);
  letter-spacing: 0.005em; line-height: 1.1;
}
.sec-hd .sub {
  margin-top: 20px; max-width: 620px;
  font-size: 15px; line-height: 1.95; color: var(--ink-3);
}
.sec-hd .cnt {
  margin-top: 24px; padding-top: 12px;
  border-top: 1px solid var(--line);
  display: inline-block;
  font-family: var(--serif-en); font-size: 11px;
  letter-spacing: 0.3em; color: var(--ink-4);
}

/* 双侧标题布局（大屏） */
.sec-hd.split {
  display: grid; grid-template-columns: 1fr auto;
  gap: 40px; align-items: end;
}
.sec-hd.split .hd-right { text-align: right; }

/* ============================================================
   首屏 HERO —— 整屏，无需下拉
   ============================================================ */
.hero {
  position: relative;
  padding: 0;
  height: calc(100svh - 76px);
  min-height: 540px;
  max-height: 1040px;
}

.hero-grid {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--pad);
  height: 100%;
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  align-items: center;
  gap: clamp(30px, 4vw, 76px);
}

/* ---- 左：文字 ---- */
.hero-text {
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0; height: 100%;
  padding: clamp(18px, 3.4vh, 50px) 0;
}

.hero-eyebrow {
  display: flex; align-items: center; gap: 15px;
  font-family: var(--serif-en);
  font-size: clamp(9.5px, 0.72vw, 10.5px);
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: clamp(14px, 2.4vh, 32px);
  line-height: 1.7;
}
.hero-eyebrow::before {
  content: ''; display: block; flex: 0 0 auto;
  width: clamp(24px, 2.4vw, 44px); height: 1px; background: var(--red);
}
.hero-eyebrow > span { min-width: 0; }

.hero-title-cn {
  font-family: var(--serif-cn); font-weight: 400;
  font-size: clamp(38px, 6.1vw, 92px);
  line-height: 1.08; letter-spacing: 0.11em;
  color: var(--ink);
}
.hero-title-cn .ln { display: block; }
.hero-title-cn .ln:last-child { padding-left: 0.11em; }
.hero-title-cn.en {
  font-family: var(--serif-en); font-style: italic;
  font-size: clamp(30px, 4.5vw, 68px);
  letter-spacing: 0.005em; line-height: 1.04;
}
.hero-title-cn.en .ln:last-child { padding-left: 0; }

.hero-title-en {
  margin-top: clamp(12px, 2vh, 26px);
  font-family: var(--serif-en); font-style: italic;
  font-size: clamp(14px, 1.18vw, 19px);
  letter-spacing: 0.015em; color: var(--ink-3);
  line-height: 1.5;
}

.hero-rule {
  width: clamp(40px, 4vw, 62px); height: 1px;
  background: var(--red); opacity: .8;
  margin: clamp(16px, 2.8vh, 38px) 0 clamp(15px, 2.4vh, 32px);
}

.hero-lead {
  max-width: 560px;
  font-size: clamp(14.5px, 1.05vw, 17px);
  line-height: 1.95; color: var(--ink-2);
}

.hero-foot {
  margin-top: clamp(18px, 3.2vh, 46px);
  padding-top: clamp(16px, 2.8vh, 38px);
  border-top: 1px solid var(--line-2);
}

.hero-facts { display: flex; flex-wrap: wrap; gap: 0 0; margin-bottom: clamp(14px, 2.4vh, 30px); }
.hero-facts div {
  padding-right: clamp(18px, 1.9vw, 30px);
  margin-right: clamp(18px, 1.9vw, 30px);
  border-right: 1px solid var(--line-2);
  font-family: var(--serif-en);
  font-size: clamp(11.5px, 0.86vw, 13.5px);
  letter-spacing: 0.05em;
  color: var(--ink-2);
  line-height: 1.5;
}
.hero-facts div:last-child { border: none; margin-right: 0; padding-right: 0; }
.hero-facts b { font-weight: 400; color: var(--ink); }

/* 肖像条 */
.hero-portrait {
  display: flex; width: 100%; align-items: center; gap: 20px;
  padding: 15px 20px;
  border: 1px solid var(--line-2);
  background: rgba(241,240,236,.4);
  transition: border-color .35s, background .35s, transform .35s;
}
.hero-portrait:hover {
  border-color: var(--line); background: var(--paper-2); transform: translateX(3px);
}
.hero-portrait img {
  width: clamp(66px, 8vh, 104px); height: clamp(66px, 8vh, 104px);
  flex: 0 0 auto; object-fit: cover; object-position: 50% 18%;
  filter: grayscale(1) contrast(1.06);
}
/* 名片文字：姓名 / 籍贯字号 / 职称师承 三段式 */
.hp-txt {
  display: flex; flex-direction: column; gap: 7px;
  min-width: 0; text-align: left;
}
.hp-name {
  font-family: var(--serif-cn);
  font-size: clamp(17px, 1.3vw, 21px);
  letter-spacing: 0.16em; line-height: 1.2; color: var(--ink);
}
body:not(.zh) .hp-name { font-family: var(--serif-en); letter-spacing: 0.01em; }
.hp-meta {
  font-family: var(--sans-en);
  font-size: clamp(9.5px, 0.72vw, 11px);
  letter-spacing: 0.1em; color: var(--ink-4); line-height: 1.5;
}
body.zh .hp-meta {
  font-family: var(--serif-cn);
  font-size: clamp(10.5px, 0.78vw, 12px);
  letter-spacing: 0.06em;
}
.hp-role {
  padding-top: 8px; border-top: 1px solid var(--line-2);
  font-family: var(--serif-cn);
  font-size: clamp(10.5px, 0.82vw, 12.5px);
  letter-spacing: 0.07em; color: var(--ink-3); line-height: 1.68;
}
body:not(.zh) .hp-role { font-family: var(--sans-en); letter-spacing: 0.02em; }
.hp-go {
  margin-left: auto; padding-left: 16px;
  border-left: 1px solid var(--line-2);
  font-family: var(--serif-en); font-size: 9.5px;
  letter-spacing: 0.26em; color: var(--ink-4); white-space: nowrap;
  transition: color .3s;
}
.hero-portrait:hover .hp-go { color: var(--red); }

/* ---- 右：主图 ---- */
.hero-figure {
  position: relative; height: 100%;
  display: flex; align-items: center; justify-content: center;
  min-height: 0; overflow: hidden;
}
.hero-figure::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--paper-2) 0%, var(--paper-3) 100%);
}
.hero-figure img {
  position: relative;
  height: min(74%, 680px); width: auto; max-width: 100%;
  object-fit: contain;
  box-shadow: 0 4px 60px rgba(14,13,10,.13), 0 1px 3px rgba(14,13,10,.08);
}
/* 首屏画作区：给上下留出额外的纸呼吸 */
.hero-figure { padding: clamp(14px, 2.4vh, 34px) 0; }
.hero-cap {
  position: absolute; z-index: 2;
  left: clamp(18px, 2.2vw, 38px);
  bottom: clamp(18px, 3vh, 38px);
  padding-right: clamp(18px, 2.2vw, 38px);
  font-family: var(--serif-en);
  font-size: clamp(9.5px, 0.72vw, 10.5px);
  letter-spacing: 0.2em; color: var(--ink-3);
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(250,250,248,.9);
}
.hero-cap b {
  display: block; font-weight: 400;
  font-family: var(--serif-cn);
  font-size: clamp(15px, 1.32vw, 19px);
  letter-spacing: 0.12em; color: var(--ink);
  margin-bottom: 6px; text-transform: none;
}

/* 首屏滚动提示 */
.hero-scroll {
  position: absolute; left: var(--pad); bottom: 18px;
  z-index: 3;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--serif-en); font-size: 9px;
  letter-spacing: 0.3em; color: var(--ink-4);
  text-transform: uppercase; pointer-events: none;
}
.hero-scroll i {
  display: block; width: 1px; height: 26px;
  background: linear-gradient(var(--line), transparent);
  animation: drop 2.4s ease-in-out infinite;
}
@keyframes drop {
  0%, 100% { opacity: .3; transform: translateY(-4px); }
  50%      { opacity: 1;  transform: translateY(4px); }
}

/* ============================================================
   概述 STATEMENT —— 五问
   ============================================================ */
.state-grid {
  display: grid; grid-template-columns: 0.78fr 1.22fr;
  gap: clamp(44px, 6vw, 108px);
  align-items: start;
}
.state-lead h3 {
  font-family: var(--serif-cn); font-weight: 400;
  font-size: clamp(26px, 2.9vw, 42px);
  line-height: 1.56; letter-spacing: 0.09em;
  color: var(--ink);
}
body:not(.zh) .state-lead h3 { font-family: var(--serif-en); letter-spacing: 0.005em; line-height: 1.28; }
.state-lead h3 em { font-style: normal; color: var(--red); }
.state-lead .sig {
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid var(--line-2);
  font-family: var(--serif-en); font-size: 11px;
  letter-spacing: 0.26em; color: var(--ink-4); text-transform: uppercase;
}
/* 左列留白处的竖版作品 */
.state-art {
  margin: clamp(32px, 5vh, 58px) 0 0;
  max-width: 420px;
}
.state-art img {
  width: 100%; height: auto; display: block;
  box-shadow: 0 2px 6px rgba(14,13,10,.05), 0 14px 44px rgba(14,13,10,.11);
}
.state-art figcaption {
  margin-top: 13px;
  font-family: var(--serif-en); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-4); line-height: 1.72;
}
body.zh .state-art figcaption {
  font-family: var(--serif-cn); font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: none;
}

.qa { border-top: 1px solid var(--line); }
.qa-item {
  padding: clamp(24px, 3.2vh, 36px) 0;
  border-bottom: 1px solid var(--line-2);
  transition: background .4s;
}
.qa-q {
  display: flex; gap: 18px; align-items: baseline;
  font-family: var(--serif-cn); font-size: clamp(18px, 1.42vw, 22px);
  letter-spacing: 0.1em; color: var(--ink);
}
body:not(.zh) .qa-q { font-family: var(--serif-en); letter-spacing: 0.005em; }
.qa-q .n {
  flex: 0 0 auto;
  font-family: var(--serif-en); font-size: 11px;
  letter-spacing: 0.1em; color: var(--red);
  padding-top: 3px;
}
.qa-a {
  margin-top: 13px; padding-left: 36px;
  font-size: clamp(14px, 0.96vw, 15.5px);
  line-height: 1.92; color: var(--ink-2);
}

/* ============================================================
   创作理念 CREED —— 深墨底
   ============================================================ */
.creed {
  position: relative;
  background: var(--ink); color: var(--paper);
  padding: clamp(88px, 12vh, 172px) 0;
  overflow: hidden;
}
.creed::after {
  content: ''; position: absolute; right: -8%; top: -20%;
  width: 42vw; height: 42vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(154,42,24,.14) 0%, transparent 68%);
  pointer-events: none;
}

/* 渗入式衬底：左下角浮现，向右上消散 */
.creed-art {
  position: absolute; left: 0; bottom: 0;
  width: min(52vw, 820px); height: auto;
  z-index: 0; pointer-events: none; user-select: none;
  opacity: .34;
  -webkit-mask-image: radial-gradient(105% 105% at 0% 100%,
      rgba(0,0,0,1) 0%, rgba(0,0,0,.72) 26%, rgba(0,0,0,.26) 56%, rgba(0,0,0,0) 78%);
          mask-image: radial-gradient(105% 105% at 0% 100%,
      rgba(0,0,0,1) 0%, rgba(0,0,0,.72) 26%, rgba(0,0,0,.26) 56%, rgba(0,0,0,0) 78%);
}
.creed .wrap { position: relative; z-index: 1; }

.creed .lbl-lt {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--serif-en); font-size: 10px;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: rgba(250,250,248,.4);
}
.creed .lbl-lt::before { content: ''; width: 34px; height: 1px; background: rgba(250,250,248,.24); }

.creed-in {
  display: grid; grid-template-columns: 1.16fr 0.84fr;
  gap: clamp(40px, 6vw, 92px);
  align-items: start;
}
.creed blockquote {
  margin-top: 40px;
  font-family: var(--serif-cn); font-weight: 400;
  font-size: clamp(26px, 3.6vw, 54px);
  line-height: 1.5; letter-spacing: 0.14em;
  color: var(--paper);
}
body:not(.zh) .creed blockquote {
  font-family: var(--serif-en); font-style: italic;
  letter-spacing: 0.02em; line-height: 1.2;
}

/* 引言下方的作品局部 */
.creed-detail {
  margin: clamp(30px, 4vh, 50px) 0 0;
  max-width: 400px;
}
.creed-detail img {
  width: 100%; height: auto; display: block;
  background: rgba(250,250,248,.04);
  box-shadow: 0 12px 44px rgba(0,0,0,.5);
}
/* 载入完成后才描边，避免图片未就绪时留下空框 */
.creed-detail img.is-loaded { border: 1px solid rgba(250,250,248,.12); }
.creed-detail figcaption {
  margin-top: 11px;
  font-family: var(--serif-en); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(250,250,248,.58);
  line-height: 1.72;
  position: relative;
}
.creed-detail figcaption em { font-style: italic; color: rgba(250,250,248,.78); }

.creed-body { padding-bottom: 8px; }
.creed-body p {
  font-size: clamp(14px, 0.98vw, 15.5px);
  line-height: 2.05; color: rgba(250,250,248,.7);
  margin-bottom: 22px;
}
.creed-body p:last-of-type { margin-bottom: 0; }
.creed-sign {
  margin-top: 36px; padding-top: 22px;
  border-top: 1px solid rgba(250,250,248,.14);
  font-family: var(--serif-en); font-size: 10.5px;
  letter-spacing: 0.26em; color: rgba(250,250,248,.42);
  text-transform: uppercase;
}

/* ============================================================
   技法 TECHNIQUE —— 四格
   ============================================================ */
.tec-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line-2);
  border: 1px solid var(--line-2);
}
.tec {
  background: var(--paper);
  padding: clamp(34px, 4.4vw, 56px) clamp(24px, 2.4vw, 36px) clamp(30px, 4vw, 50px);
  transition: background .5s;
  position: relative;
}
.tec:hover { background: var(--paper-2); }
.tec .num {
  font-family: var(--serif-en);
  font-size: clamp(22px, 1.9vw, 29px);
  color: var(--ink-5); line-height: 1; margin-bottom: 26px;
  letter-spacing: 0.04em;
  transition: color .5s;
}
.tec:hover .num { color: var(--red); opacity: .55; }
.tec h4 {
  font-family: var(--serif-cn); font-weight: 400;
  font-size: clamp(17px, 1.34vw, 20px);
  letter-spacing: 0.12em; color: var(--ink);
  padding-bottom: 15px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
}
body:not(.zh) .tec h4 { font-family: var(--serif-en); letter-spacing: 0.005em; }
.tec p { font-size: clamp(13.5px, 0.92vw, 14.5px); line-height: 1.88; color: var(--ink-2); }

/* ---- 技法实证：画家作画实拍 ---- */
.tec-proof {
  display: grid;
  grid-template-columns: minmax(0, 0.66fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: center;
  margin: clamp(44px, 6vh, 82px) 0 0;
  padding-top: clamp(40px, 5.4vh, 72px);
  border-top: 1px solid var(--line-2);
}
.tec-proof-img {
  max-width: clamp(300px, 24vw, 380px);
  width: 100%;
  justify-self: start;
}
.tec-proof-img img {
  width: 100%; height: auto; display: block;
  box-shadow: 0 2px 6px rgba(14,13,10,.07), 0 16px 46px rgba(14,13,10,.14);
}
.tec-proof-sig {
  margin-top: 13px;
  font-family: var(--serif-en); font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-4); line-height: 1.7;
}
body.zh .tec-proof-sig {
  font-family: var(--serif-cn);
  letter-spacing: 0.16em;
  text-transform: none;
  font-size: 11px;
}
/* 右列：标签 → 正文 → 信息栅格，与图片垂直居中 */
.tec-proof-cap {
  display: flex; flex-direction: column;
  gap: clamp(22px, 3vh, 36px);
}
.tec-proof-cap .lbl {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--serif-en); font-size: 10px;
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--ink-4);
}
.tec-proof-cap .lbl::before { content: ''; width: 30px; height: 1px; background: var(--line); }
.tec-proof-cap p {
  margin: 0;
  max-width: 56ch;
  font-family: var(--serif-cn); font-weight: 400;
  font-size: clamp(16px, 1.32vw, 21px);
  line-height: 1.92; letter-spacing: 0.06em;
  color: var(--ink-2);
  text-wrap: pretty;
}
body:not(.zh) .tec-proof-cap p {
  font-family: var(--serif-en); font-style: italic;
  letter-spacing: 0.005em; line-height: 1.72;
  font-size: clamp(15px, 1.18vw, 18.5px);
}
/* 三项元信息 */
.tec-proof-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 44px);
  margin: 0; padding-top: clamp(18px, 2.2vh, 26px);
  border-top: 1px solid var(--line-2);
}
.tec-proof-facts > div { min-width: 0; }
.tec-proof-facts dt {
  font-family: var(--serif-en); font-size: 9.5px;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 9px;
}
body.zh .tec-proof-facts dt {
  font-family: var(--serif-cn); font-size: 10.5px;
  letter-spacing: 0.2em; text-transform: none;
}
.tec-proof-facts dd {
  font-family: var(--serif-cn); font-size: clamp(13px, 0.98vw, 15px);
  letter-spacing: 0.05em; color: var(--ink-2); line-height: 1.7;
}
body:not(.zh) .tec-proof-facts dd {
  font-family: var(--serif-en); letter-spacing: 0.01em;
}

/* ============================================================
   作品 GALLERY
   ============================================================ */
.filters {
  display: flex; gap: 34px; flex-wrap: wrap;
  margin-bottom: clamp(38px, 5vh, 62px);
  border-bottom: 1px solid var(--line-2); padding-bottom: 0;
}
.filters button {
  position: relative;
  padding: 0 0 13px;
  font-size: 12.5px; letter-spacing: 0.14em; color: var(--ink-3);
  transition: color .3s;
}
.filters button::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: 0; height: 1px; background: var(--red);
  transition: width .38s cubic-bezier(.2,.7,.3,1);
}
.filters button:hover { color: var(--ink); }
.filters button.on { color: var(--ink); }
.filters button.on::after { width: 100%; }
.filters button .ct {
  font-family: var(--serif-en); font-size: 9.5px;
  color: var(--ink-4); margin-left: 6px; letter-spacing: 0.08em;
}

.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(44px, 5vw, 76px) clamp(24px, 3vw, 46px); }

.card { cursor: pointer; }
.card-frame {
  position: relative; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: #f6f5f2;
  padding: clamp(20px, 2.2vw, 32px);
  transition: background .5s;
}
.card:hover .card-frame { background: #f1efeb; }
.card-frame img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  box-shadow: 0 1px 2px rgba(14,13,10,.05), 0 6px 22px rgba(14,13,10,.07);
  transition: transform .9s cubic-bezier(.2,.7,.3,1), box-shadow .5s;
}
.card:hover .card-frame img {
  transform: scale(1.045);
  box-shadow: 0 2px 4px rgba(14,13,10,.06), 0 14px 40px rgba(14,13,10,.13);
}

/* 悬停时浮现的细节 */
.card-veil {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end;
  padding: clamp(18px, 1.8vw, 26px);
  background: linear-gradient(to top, rgba(14,13,10,.5) 0%, transparent 52%);
  opacity: 0; transition: opacity .45s;
}
.card:hover .card-veil { opacity: 1; }
.card-veil span {
  font-family: var(--serif-en); font-size: 9.5px;
  letter-spacing: 0.28em; color: rgba(255,255,255,.92);
  text-transform: uppercase;
}

.card-idx {
  position: absolute; z-index: 3;
  left: clamp(16px, 1.6vw, 24px); top: clamp(14px, 1.4vw, 20px);
  font-family: var(--serif-en); font-size: 10px;
  letter-spacing: 0.18em; color: var(--ink-4);
  transition: color .4s;
}
.card:hover .card-idx { color: var(--red); }

.gal-empty {
  padding: 76px 0; text-align: center;
  font-family: var(--serif-cn); font-size: 15px;
  letter-spacing: 0.16em; color: var(--ink-4);
}

.card-meta { margin-top: clamp(15px, 1.6vw, 22px); display: flex; gap: 13px; }
.card-meta .bar { width: 1px; flex: 0 0 auto; align-self: stretch; background: var(--line-2); }
.card-title {
  font-family: var(--serif-cn); font-size: clamp(16.5px, 1.24vw, 19px);
  letter-spacing: 0.1em; color: var(--ink); line-height: 1.35;
}
body:not(.zh) .card-title { font-family: var(--serif-en); letter-spacing: 0.005em; }
.card-sub {
  margin-top: 7px;
  font-family: var(--serif-en); font-size: 11px;
  letter-spacing: 0.13em; color: var(--ink-4);
}

/* ============================================================
   横卷 HANDSCROLL —— 可拖动展卷（全幅出血）
   ============================================================ */
#scrolls { padding-left: 0; padding-right: 0; overflow: hidden; }
#scrolls .sec-hd { padding-left: var(--pad); padding-right: var(--pad); }

.scroll-hint {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--serif-en); font-size: 9.5px;
  letter-spacing: 0.32em; color: var(--ink-4);
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-left: var(--pad); padding-right: var(--pad);
}
.scroll-hint::before, .scroll-hint::after {
  content: ''; height: 1px; background: var(--line-2);
}
.scroll-hint::before { width: 30px; }
.scroll-hint::after { flex: 0 0 auto; width: 30px; }

.scroll-view {
  overflow-x: auto; overflow-y: hidden;
  cursor: grab;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  background:
    linear-gradient(180deg, rgba(241,240,236,.55), rgba(241,240,236,0) 22%),
    var(--paper);
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-behavior: auto;
  scroll-snap-type: x proximity;
}
.scroll-view::-webkit-scrollbar { display: none; }
.scroll-view.grabbing { cursor: grabbing; }
.scroll-view.grabbing img { pointer-events: none; }

.scroll-inner {
  display: flex; align-items: stretch; min-width: min-content;
}
/* 首尾各留一段与页面同宽的空白，使卷首不贴边、卷尾不突兀 */
.scroll-inner::before,
.scroll-inner::after {
  content: ''; flex: 0 0 auto;
  width: var(--pad);
}
.scroll-inner::before { margin-right: clamp(34px, 5vw, 72px); }
.scroll-inner::after { margin-left: clamp(34px, 5vw, 72px); }

.scroll-panel {
  flex: 0 0 auto;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(34px, 5vh, 62px) 0;
  scroll-snap-align: start;
}
.scroll-panel + .scroll-panel {
  border-left: 1px solid var(--line-2);
  padding-left: clamp(34px, 5vw, 72px); margin-left: clamp(34px, 5vw, 72px);
}
.scroll-panel img {
  height: 34vh; width: auto;
  max-width: none;
  display: block;
  box-shadow: 0 2px 6px rgba(14,13,10,.06), 0 14px 46px rgba(14,13,10,.13);
}

.scroll-cap {
  margin-top: 20px;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-family: var(--serif-cn); font-size: 15px;
  letter-spacing: 0.12em; color: var(--ink-2);
}
.scroll-cap b {
  font-weight: 400;
  font-family: var(--serif-en); font-size: 10.5px;
  letter-spacing: 0.2em; color: var(--red); opacity: .85;
}
.scroll-cap em {
  font-style: normal; font-family: var(--serif-en);
  font-size: 10.5px; letter-spacing: 0.14em; color: var(--ink-4);
}
.scroll-note {
  margin-top: 9px; max-width: 62ch;
  font-size: 12.5px; line-height: 1.78; color: var(--ink-3);
}

/* 进度轨：把隐藏滚动条换成一条细朱线 */
.scroll-rail {
  position: relative; height: 2px;
  background: var(--line-2);
  margin: 26px var(--pad) 0;
}
.scroll-rail-bar {
  position: absolute; top: 0; left: 0; height: 2px; width: 30%;
  background: var(--red); opacity: .8;
  transition: transform .1s linear;
  transform-origin: 0 50%;
}

/* ============================================================
   巨幅长卷 MONUMENTAL
   ============================================================ */
.majors { border-top: 1px solid var(--line); }
.major {
  display: grid; grid-template-columns: 76px 1fr 1.2fr;
  gap: clamp(24px, 3.4vw, 56px);
  align-items: start;
  padding: clamp(30px, 4.4vh, 52px) 0;
  border-bottom: 1px solid var(--line-2);
  transition: background .5s;
}
.major:hover { background: rgba(241,240,236,.5); }
.major-num {
  font-family: var(--serif-en); font-size: clamp(26px, 2.4vw, 36px);
  color: var(--ink-5); line-height: 1; padding-top: 5px;
  transition: color .5s;
}
.major:hover .major-num { color: var(--red); opacity: .5; }
.major-title {
  font-family: var(--serif-cn); font-weight: 400;
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: 0.12em; line-height: 1.32; color: var(--ink);
}
body:not(.zh) .major-title {
  font-family: var(--serif-en); font-style: italic; letter-spacing: 0.005em;
}
.major-meta {
  margin-top: 15px; padding-top: 13px;
  border-top: 1px solid var(--line-2);
  font-family: var(--serif-en); font-size: 12px;
  letter-spacing: 0.1em; color: var(--ink-3); line-height: 1.9;
}
.major-desc { font-size: clamp(14px, 0.98vw, 15px); line-height: 1.96; color: var(--ink-2); }
.major-flag {
  display: inline-block; margin-top: 18px;
  font-family: var(--serif-en); font-size: 9.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-4); border: 1px solid var(--line);
  padding: 5px 11px;
}

/* ============================================================
   展览现场 EXHIBITION
   ============================================================ */
.exh {
  display: grid; grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(38px, 5vw, 88px); align-items: center;
}
.exh-img { position: relative; background: var(--paper-2); padding: clamp(12px, 1.4vw, 20px); }
.exh-img img { width: 100%; }
.exh-img::after {
  content: ''; position: absolute; right: -1px; bottom: -1px;
  width: 56px; height: 56px;
  border-right: 1px solid var(--red); border-bottom: 1px solid var(--red);
  opacity: .45;
}
.exh-txt h3 {
  font-family: var(--serif-cn); font-weight: 400;
  font-size: clamp(22px, 2.2vw, 33px);
  line-height: 1.58; letter-spacing: 0.08em; color: var(--ink);
  margin-bottom: 30px;
}
body:not(.zh) .exh-txt h3 { font-family: var(--serif-en); letter-spacing: 0.005em; line-height: 1.24; }
.exh-txt p {
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.98; color: var(--ink-2); margin-bottom: 22px;
}
.exh-txt .exh-list {
  margin-top: 30px; padding-top: 24px;
  border-top: 1px solid var(--line-2);
  font-size: clamp(12.5px, 0.86vw, 13.5px);
  line-height: 1.9; color: var(--ink-3);
}

/* ============================================================
   艺术家 ARTIST
   ============================================================ */
.art-grid {
  display: grid; grid-template-columns: 0.86fr 1.14fr;
  gap: clamp(38px, 5.4vw, 96px);
  align-items: start;
}
.art-left { position: sticky; top: 108px; }

.portrait { position: relative; background: var(--paper-2); padding: clamp(12px, 1.4vw, 20px); }
.portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 18%; }
.portrait figcaption {
  margin-top: 16px; padding-left: 15px;
  border-left: 2px solid var(--red);
  font-family: var(--serif-cn); font-size: 12.5px;
  letter-spacing: 0.24em; color: var(--ink-3);
}

.art-facts { margin-top: 38px; border-top: 1px solid var(--line); }
.art-fact {
  display: grid; grid-template-columns: 92px 1fr; gap: 20px;
  padding: 15px 0; border-bottom: 1px solid var(--line-2);
  font-size: clamp(13px, 0.9vw, 14px);
}
.art-fact dt {
  font-family: var(--serif-en); font-size: 9.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-4); padding-top: 5px;
}
.art-fact dd { color: var(--ink-2); line-height: 1.8; }

.art-body p {
  margin-bottom: 26px;
  font-size: clamp(14.5px, 1vw, 16px);
  line-height: 2; color: var(--ink-2);
}
.art-body p:first-of-type::first-letter {
  font-family: var(--serif-en); font-size: 3.1em;
  float: left; line-height: .82;
  padding: 5px 12px 0 0; color: var(--ink);
}
body.zh .art-body p:first-of-type::first-letter {
  font-family: var(--serif-cn); font-size: 1em; float: none; padding: 0; color: inherit;
}

.art-pull {
  margin: clamp(34px, 4.4vh, 52px) 0 0;
  padding-left: clamp(20px, 2vw, 32px);
  border-left: 2px solid var(--red);
  font-family: var(--serif-cn);
  font-size: clamp(17px, 1.5vw, 23px);
  line-height: 1.86; letter-spacing: 0.11em; color: var(--ink);
}
body:not(.zh) .art-pull { font-family: var(--serif-en); font-style: italic; letter-spacing: 0.005em; }

/* 社会任职 */
.posts { margin-top: clamp(44px, 5.4vh, 68px); border-top: 1px solid var(--line); padding-top: 30px; }
.posts-hd {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--serif-cn); font-size: 16px;
  letter-spacing: 0.2em; color: var(--ink); margin-bottom: 16px;
}
body:not(.zh) .posts-hd { font-family: var(--serif-en); letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
.posts ol { list-style: none; counter-reset: p; }
.posts li {
  counter-increment: p;
  display: grid; grid-template-columns: 34px 1fr; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--line-2);
  font-size: clamp(13px, 0.92vw, 14.5px); color: var(--ink-2); line-height: 1.7;
}
.posts li:last-child { border-bottom: none; }
.posts li::before {
  content: counter(p, decimal-leading-zero);
  font-family: var(--serif-en); font-size: 10.5px;
  color: var(--ink-4); letter-spacing: 0.08em; padding-top: 4px;
}

/* ============================================================
   年表 TIMELINE
   ============================================================ */
.tl { border-top: 1px solid var(--line); }
.tl-row {
  display: grid; grid-template-columns: 118px 1fr;
  gap: clamp(20px, 3.4vw, 48px);
  padding: clamp(24px, 3.4vh, 36px) 0;
  border-bottom: 1px solid var(--line-2);
  transition: background .45s;
}
.tl-row:hover { background: rgba(241,240,236,.5); }
.tl-year {
  font-family: var(--serif-en); font-size: clamp(20px, 1.8vw, 27px);
  color: var(--red); line-height: 1.1; padding-top: 2px;
}
.tl-t {
  font-family: var(--serif-cn); font-size: clamp(16px, 1.24vw, 19px);
  letter-spacing: 0.08em; color: var(--ink); line-height: 1.5;
}
body:not(.zh) .tl-t { font-family: var(--serif-en); letter-spacing: 0.005em; }
.tl-o {
  margin-top: 8px; font-size: clamp(12.5px, 0.88vw, 13.5px);
  line-height: 1.85; color: var(--ink-3);
}

/* ============================================================
   收藏 COLLECT
   ============================================================ */
.col-grid {
  display: grid; grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(38px, 5vw, 88px); align-items: stretch;
}
.col-list { border-top: 1px solid var(--line); }
.col-row {
  display: flex; justify-content: space-between; gap: 28px;
  padding: clamp(18px, 2.1vh, 23px) 0;
  border-bottom: 1px solid var(--line-2);
  font-size: clamp(13.5px, 0.94vw, 15px);
}
.col-row .k { font-family: var(--serif-cn); letter-spacing: 0.1em; color: var(--ink); flex: 0 0 auto; }
body:not(.zh) .col-row .k { font-family: var(--serif-en); letter-spacing: 0.005em; }
.col-row .v {
  max-width: 62%; text-align: right;
  font-size: clamp(12.5px, 0.86vw, 13.5px);
  line-height: 1.85; color: var(--ink-3);
}
.col-cta {
  margin-top: clamp(26px, 3.4vh, 38px);
  padding: clamp(30px, 3.4vw, 44px) clamp(28px, 3vw, 40px);
  background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; gap: 22px; justify-content: center;
}
.col-cta p {
  font-size: clamp(13px, 0.92vw, 14px);
  line-height: 1.92; color: rgba(250,250,248,.74);
  max-width: 46ch;
}
.col-cta .btn { align-self: flex-start; }
.col-right { display: flex; flex-direction: column; gap: clamp(20px, 2.6vh, 30px); }
.col-right .note:last-child { flex: 1; }
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 26px;
  border: 1px solid currentColor;
  font-family: var(--serif-en); font-size: 10.5px;
  letter-spacing: 0.26em; text-transform: uppercase;
  transition: .35s;
}
.btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn-light { color: var(--paper); }
.btn-light:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

.note { background: var(--paper-2); padding: clamp(28px, 3vw, 42px); border-left: 2px solid var(--ink-5); }
.note h5 {
  font-family: var(--serif-cn); font-weight: 400;
  font-size: 16px; letter-spacing: 0.16em; color: var(--ink);
  margin-bottom: 18px;
}
body:not(.zh) .note h5 { font-family: var(--serif-en); letter-spacing: 0.06em; text-transform: uppercase; font-size: 12px; }
.note p { font-size: 13.5px; line-height: 1.95; color: var(--ink-2); }
.note p + p { margin-top: 15px; }

/* ============================================================
   页脚
   ============================================================ */
footer { border-top: 1px solid var(--line); padding: clamp(48px, 7vh, 84px) 0 clamp(40px, 6vh, 72px); }
.foot-in {
  display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  align-items: flex-start;
  font-family: var(--serif-en); font-size: 11.5px;
  letter-spacing: 0.11em; color: var(--ink-4);
}
.foot-brand {
  font-family: var(--serif-cn); font-size: clamp(17px, 1.4vw, 21px);
  letter-spacing: 0.24em; color: var(--ink-2);
}
.foot-brand small {
  display: block; margin-top: 9px;
  font-family: var(--serif-en); font-size: 10px;
  letter-spacing: 0.26em; color: var(--ink-4); text-transform: uppercase;
}
.foot-col { display: flex; flex-direction: column; gap: 9px; }
.foot-col b { font-weight: 400; color: var(--ink-3); letter-spacing: 0.2em; text-transform: uppercase; font-size: 9.5px; }

/* ============================================================
   灯箱 LIGHTBOX
   ============================================================ */
.lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8,8,6,.985);
  display: none;
}
.lb.on { display: flex; flex-direction: column; }
.lb-bar {
  flex: 0 0 auto; height: 68px;
  display: flex; align-items: center; gap: 24px;
  padding: 0 clamp(18px, 2.6vw, 36px);
  border-bottom: 1px solid rgba(255,255,255,.085);
  color: #e8e5dd;
}
.lb-bar .t { font-family: var(--serif-cn); font-size: clamp(15px, 1.2vw, 18px); letter-spacing: 0.12em; }
.lb-bar .m { color: #86816f; font-family: var(--serif-en); letter-spacing: 0.14em; font-size: 11px; }
.lb-nav {
  margin-left: auto; flex: 0 0 auto;
  width: 38px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.18);
  color: #c9c4b6; font-size: 14px; line-height: 1;
  transition: .26s;
}
.lb-nav + .lb-nav { margin-left: 8px; }
.lb-nav:hover { background: #e8e5dd; color: #080806; border-color: #e8e5dd; }
.lb-bar .close {
  margin-left: 14px; flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.22); padding: 8px 16px;
  font-family: var(--serif-en); font-size: 10px;
  letter-spacing: 0.22em; color: #e8e5dd;
  transition: .28s;
}
.lb-bar .close:hover { background: #e8e5dd; color: #080806; border-color: #e8e5dd; }

.lb-stage {
  flex: 1; min-height: 0; padding: clamp(24px, 4vh, 48px);
  display: flex; align-items: center; justify-content: center;
  overflow: auto;
}
.lb-stage img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; cursor: zoom-in;
  transition: transform .32s cubic-bezier(.2,.7,.3,1);
}
.lb-stage img.zoom { cursor: zoom-out; transform: scale(2.05); }

.lb-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 0 clamp(18px, 2.6vw, 36px) 26px;
  color: #86816f;
}
.lb-desc {
  max-width: 780px;
  font-size: 13.5px; line-height: 1.95; color: #a8a396;
}
.lb-sig { font-family: var(--serif-cn); font-size: 12.5px; letter-spacing: 0.14em; color: #c9c4b6; }
.lb-tip { margin-left: auto; font-family: var(--serif-en); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; }

/* ============================================================
   进场动画
   ============================================================ */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); }
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
  .rv { opacity: 1; transform: none; }
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1280px) {
  .nav-links { gap: 28px; }
  .tec-grid { grid-template-columns: repeat(2, 1fr); }
  .gal { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  :root { --sec-y: clamp(64px, 8vh, 104px); }
  .hero { height: auto; min-height: 0; max-height: none; }
  .hero-grid { grid-template-columns: 1fr; padding-top: 28px; padding-bottom: 36px; gap: 30px; }
  .hero-text { padding: 0; height: auto; }
  .hero-figure { order: -1; height: 38vh; min-height: 240px; max-height: 380px; }
  .hero-figure img { height: 92%; }
  .hero-scroll { display: none; }
  .state-grid, .art-grid, .col-grid, .exh, .creed-in { grid-template-columns: 1fr; }
  .creed-in { gap: 44px; }
  .state-art { max-width: 340px; }
  .tec-proof { grid-template-columns: 1fr; gap: 34px; align-items: start; }
  .tec-proof-img { max-width: 340px; justify-self: start; }
  .tec-proof-cap { gap: 22px; }
  .tec-proof-cap p { max-width: none; }
  .tec-proof-facts { gap: 20px; }
  .tec-proof-facts dd { font-size: 13px; }
  .art-left { position: static; }
  .sec-hd.split { grid-template-columns: 1fr; align-items: start; }
  .sec-hd.split .hd-right { text-align: left; }
}

@media (max-width: 560px) {
  .hero-figure { height: 34vh; min-height: 210px; }
  /* 窄屏收字号，给标题留出右侧呼吸空间（原先几乎顶到边缘） */
  .hero-title-cn { font-size: clamp(32px, 9.2vw, 50px); }
  .hero-title-cn.en { font-size: clamp(26px, 7.4vw, 42px); }
  .hero-lead { font-size: 14px; line-height: 1.88; }
  .hero-facts div { font-size: 11px; padding-right: 12px; margin-right: 12px; }
  /* 窄屏：eyebrow 收短，允许折行 */
  .hero-eyebrow { letter-spacing: 0.12em; font-size: 8.5px; align-items: flex-start; }
  .hero-eyebrow span { white-space: normal; }
  .hero-cap { font-size: 8.5px; letter-spacing: 0.1em; line-height: 1.6; right: 14px; }
  .hero-cap b { font-size: 14px; letter-spacing: 0.1em; }
  .hp-meta { font-size: 9.5px; }
  .hp-go { padding-left: 12px; font-size: 9px; }
  .scroll-cap { font-size: 12.5px; }
  .scroll-cap em { font-size: 9.5px; }
}

@media (max-width: 780px) {
  .nav-links {
    position: fixed; left: 0; right: 0; top: 76px;
    flex-direction: column; gap: 0; align-items: stretch;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 10px var(--pad) 22px;
    display: none; z-index: 89;
    max-height: calc(100svh - 76px); overflow-y: auto;
  }
  body.menu-open .nav-links { display: flex; }
  .nav-links a { padding: 15px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
  .nav-links a::after { display: none; }
  .nav-burger { display: block; margin-left: auto; order: 3; }
  .nav-in { gap: 12px; }
  .brand-en { display: none; }
  .lang { padding: 8px 12px; font-size: 10px; letter-spacing: 0.1em; }
  .gal, .tec-grid { grid-template-columns: 1fr; }
  .tec-proof-facts { grid-template-columns: 1fr 1fr; gap: 18px 20px; }
  .major { grid-template-columns: 40px 1fr; gap: 16px; }
  /* 标题块与描述块都归到第 2 列（描述块是 grid 子元素，不是 .major-desc 本身） */
  .major > div:nth-child(2),
  .major > div:nth-child(3) { grid-column: 2; }
  .tl-row { grid-template-columns: 72px 1fr; gap: 16px; }
  .col-row { flex-direction: column; gap: 8px; }
  .col-row .v { max-width: 100%; text-align: left; }
  .art-fact { grid-template-columns: 82px 1fr; gap: 14px; }
  .lb-foot { padding-bottom: 18px; }
  .lb-desc { display: none; }
  .scroll-panel img { max-height: 42vh; }
}

@media (max-width: 420px) {
  .brand-cn { font-size: 18px; letter-spacing: 0.18em; }
  .brand-mark { width: 25px; height: 25px; }
  .filters { gap: 22px; }
  .filters button { font-size: 12px; }
}

/* 矮屏兜底：首屏完整可见 */
@media (min-width: 1025px) and (max-height: 900px) {
  .hero-title-cn { font-size: clamp(34px, 5.2vw, 72px); }
  .hero-title-cn.en { font-size: clamp(27px, 3.8vw, 54px); }
  .hero-lead { font-size: 14.5px; line-height: 1.88; }
  .hero-figure img { height: min(80%, 640px); }
}
@media (min-width: 1025px) and (max-height: 760px) {
  .hero-eyebrow { margin-bottom: 12px; }
  .hero-title-cn { font-size: clamp(30px, 4.4vw, 58px); }
  .hero-title-cn.en { font-size: clamp(24px, 3.2vw, 44px); }
  .hero-lead { font-size: 13.5px; }
  .hero-rule { margin: 14px 0 12px; }
  .hero-facts { margin-bottom: 12px; }
  .hero-foot { margin-top: 14px; padding-top: 14px; }
  .hero-portrait img { width: 62px; height: 62px; }
  .hp-name { font-size: 16px; }
  .hp-role { font-size: 10px; line-height: 1.6; }
  .hero-figure img { height: min(76%, 520px); }
  .hero-scroll { display: none; }
}