/* =====================================================================
   PsiAkt · 灵印收藏馆 — 全站样式（纯 CSS · 敦煌青绿绒墙 + 金 V3.2）
   ---------------------------------------------------------------------
   方案  艾伦《psiakt-敦煌青绿+金-页面设计方案-v3.2》 · 米高《敦煌青绿+金-
         完整配色方案》V3.2（参考图像素校准定稿版）
   色板  敦煌青绿墙三档 --wall #1E3E39 / --wall-deep #17312D / --wall-raise
         #254641（明度锁 L14–21 · 色相锁 H170–174 · 饱和锁 28–36）
         金三档 G0 #D9B87E / G1 #C1A161 / G2 #8F7040 —— 金十条军规：
         金 ≤2% 像素、只做线与字、中文实义词永不金字、三档之外禁止调色
         装饰亮端 --wall-glow #2B645C：全站仅三处装饰面（hero 光晕 /
         404 光晕 / 装裱 hover 青光），禁上任何文字图标边框
         象牙卡纸 --mat #F6F1E5 · 窗口衬纸 --win #EFE7D6 · 墨系只上纸面 ·
         象牙系只上墙 · 深底观片台 --vault #132523
   彩蛋  .gold-line 类名历经「宣纸展厅→版画陈列室→深墨绿绒墙→敦煌青绿绒墙」
         四版终于名副其实——值回归金，墙归敦煌。
   铁律  作品不动纸在动：图片永不缩放放大、永不裁切变形、永不上采样；
         hover 无位移无缩放，只做框色/投影加深与射灯提亮 saturate(1.06)
         brightness(1.04)；墙上文字一律象牙系，纸面文字一律墨系。
   断点  <480 单列 · 480–767 两列 · 768–1279 两列 · ≥1280 三列
   动效  全部尊重 prefers-reduced-motion
   ===================================================================== */

/* ---------- 0. 自托管字体（零外部依赖） ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+2000-206F, U+20AC, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500i.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500i-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+2000-206F, U+20AC, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 1. 令牌与基础（V3.2 敦煌青绿 + 金 · :root 整块换血） ---------- */
:root {
  /* —— 墙（敦煌青绿 = 空间，不是颜色；V3.2 参考图校准 H172） —— */
  --wall: #1c3a34;
  --wall-deep: #152e29;
  --wall-raise: #243f39;
  --wall-glow: #1c3a34;                  /* 不再用发亮青光，与主墙同色即关掉光斑 */
  --bg: var(--wall);                     /* 旧名兼容（body 背景） */
  --bg-deep: var(--wall-deep);           /* 旧名兼容（prose code 底） */
  /* —— 金三档（防俗核心：三档之外禁止自由发挥） —— */
  --g0: #d4bc8a;
  --g1: #c9b07a;
  --g2: #8a7344;
  --brass: var(--g1);                    /* 旧名兼容 → G1 */
  --brass-light: var(--g0);              /* 旧名兼容 → G0 */
  /* —— 象牙卡纸（画的缓冲带） —— */
  --mat: #efe6d2;
  --win: #e8dcc4;
  /* —— 墨（只出现在纸面上） —— */
  --ink: #26221B;
  --ink-soft: rgba(38, 34, 27, .85);
  --ink-2: #6E6656;
  --ink-3: rgba(38, 34, 27, .55);
  /* —— 墙上文字（象牙系） —— */
  --ivory: #f3ead8;
  --ivory-soft: rgba(243, 234, 216, .72);
  --ivory-faint: rgba(243, 234, 216, .55);
  /* —— 线与影 —— */
  --hair-gold: rgba(201, 176, 122, .35);
  --hair-ivory: rgba(243, 234, 216, .16);
  --frame: rgba(143, 112, 64, .55);      /* 卡纸装裱外框线（G2 半透明，"纸的铜边"） */
  --frame-strong: rgba(143, 112, 64, .85); /* hover 加深档 */
  --line: var(--hair-ivory);             /* 旧名兼容：墙上分隔线 */
  --line-strong: rgba(242, 237, 225, .28); /* 墙上强线（输入底线/搜索底线） */
  --line-paper: rgba(38, 34, 27, .14);   /* 纸面内部分隔线（essay 纸浮层/prose 用） */
  --line-paper-strong: rgba(38, 34, 27, .28);
  --win-line: rgba(38, 34, 27, .15);     /* 窗口衬纸内衬细线（沉入 1mm 进深） */
  --mat-edge: var(--frame);              /* 旧名兼容 */
  --shadow-mat: 0 1px 2px rgba(0,0,0,.30), 0 24px 48px rgba(0,0,0,.35);        /* 深墙重投影 = 射灯打在画上 */
  --shadow-mat-hover: 0 2px 4px rgba(0,0,0,.32), 0 32px 64px rgba(0,0,0,.45);
  --shadow-paper: 0 1px 2px rgba(0,0,0,.18), 0 18px 40px rgba(0,0,0,.28);      /* 纸浮层投影 */
  /* —— 深底（灯箱，V3.2 随墙校准） —— */
  --vault: #132523;                      /* 青绿黑观片台（象牙 13.9:1） */
  --paper: var(--mat);

  /* —— 字体（衬线负责馆藏，无衬线负责操作） —— */
  --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", STSong, Georgia, serif;
  --serif-text: "Songti SC", "Noto Serif SC", "Source Han Serif SC", STSong, Georgia, serif;
  --serif-latin: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans: "Inter", -apple-system, "SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  /* 注：Inter 不自托管、不引外链，本机有则用、无则系统无衬线兜底。 */

  /* —— 节奏（8 的倍数 + 装裱宽度） —— */
  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;
  --mat-pad: clamp(12px, 1.6vw, 20px);   /* 卡纸宽边 passe-partout */

  --ease: cubic-bezier(.22, .61, .36, 1);
  --radius: 0;                       /* 印刷品没有圆角 */
  color-scheme: dark;                /* 原生控件/下拉/滚动条跟随深墙 */
}

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

html {
  scroll-behavior: smooth;
  scrollbar-color: #243f39 #152e29;
  scrollbar-width: thin;
}

/* 敦煌青绿绒墙（V3.2：正文主色从墨换象牙，墙上文字一律象牙系） */
body {
  margin: 0;
  background-color: var(--wall);
  color: var(--ivory);
  font-family: var(--serif-text);    /* 正文衬线；操作件另行 --sans */
  font-size: 15px;
  line-height: 2.0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.no-scroll { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
figure, p, h1, h2, h3, h4, dl, dd, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: .02em;
}

[hidden] { display: none !important; }

/* 指针全域让金：蓝退役（V3.2 §2） */
::selection { background: rgba(201, 176, 122, .28); color: var(--ivory); }

:focus { outline: none; }
:focus-visible { outline: 1px solid var(--g1); outline-offset: 3px; border-radius: var(--radius); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #152e29; }
::-webkit-scrollbar-thumb { background: #243f39; border: 2px solid #152e29; border-radius: 5px; }

/* ---------- 2. 通用 ---------- */
.wrap {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4.5vw, 56px);
}

.narrow {
  max-width: 760px;
  margin-inline: auto;
  padding-bottom: clamp(72px, 10vh, 120px);
}

/* 分隔线（彩蛋：类名历经宣纸展厅→版画陈列室→深墨绿绒墙→敦煌青绿绒墙四版，
   终于名副其实——值回归金，墙归敦煌） */
.gold-line {
  border: 0;
  height: 1px;
  margin: 0;
  background: var(--hair-gold);
}
.gold-line--short {
  width: 48px;
  height: 2px;
  margin-inline: auto;
  background: var(--g1);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  left: 16px; top: -64px;
  z-index: 99;
  padding: 10px 16px;
  background: var(--mat);
  border: 1px solid var(--line-paper-strong);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--ink);
  box-shadow: var(--shadow-mat);
  transition: top .2s ease;
}
.skip:focus { top: 12px; }

.noscript {
  padding: 28px 0;
  color: var(--ivory-soft);
  font-size: 14px;
  letter-spacing: .06em;
  text-align: center;
}

/* 墙上类链接按钮：象牙提亮 + hover 金下划线（金线不金字） */
.linklike {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ivory-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
  transition: color .2s ease;
}
.linklike:hover {
  color: var(--ivory);
  text-decoration-color: var(--g1);
}

/* 无图占位 SVG 容器 */
.card-ph, .pn-ph, .art-ph { display: grid; place-items: center; }
.card-ph svg, .pn-ph svg, .art-ph svg { height: auto; }

/* ---------- 3. 顶栏（抬升墙毛玻璃） ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(37, 70, 65, .92);   /* --wall-raise 九成二（V3.2 校准） */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hair-ivory);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: #254641; }
}
.topbar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 9px;   /* 验收 P3-1：触控热区 26px→44px，topbar-in 56/64px 容高内消化，视觉居中不变 */
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ivory);
  white-space: nowrap;
}
/* 老金方点：铜牌式细节（G1） */
.brand-dot {
  width: 7px; height: 7px;
  background: var(--g1);
  flex: none;
}
.brand-mini {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ivory-soft);
}

.back {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding-block: 9px;   /* 收官补漏：触控热区 26→44px（与 brand 同法，topbar 容高内消化） */
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--ivory-soft);
  white-space: nowrap;
  transition: color .2s ease;
}
.back-arrow { transition: transform .25s var(--ease); }
.back:hover { color: var(--ivory); }
.back:hover .back-arrow { transform: translateX(-3px); }

/* 语言切换：页眉三个小字按钮（中 / EN / FR），当前语言象牙下划线高亮
   （状态不是装饰，保持象牙、不打满首屏 6 处金额度）；
   状态类 is-active 由 js/i18n.js 维护，点击写入 localStorage 后全页重渲染文案 */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;   /* 吸收剩余空间：品牌/返回与 tabs 靠左，切换按钮靠右 */
  flex: none;
}
.lang-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 0;
  background: none;
  padding: 0 8px;
  font-family: var(--sans);
  font-size: 13px;   /* 中文「中」≥13px（验收 P3-3，统一口径） */
  line-height: 1;
  letter-spacing: .08em;
  color: var(--ivory-faint);
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease;
}
.lang-btn::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: 9px;
  height: 1px;
  background: var(--ivory);
  transform: scaleX(0);
  transition: transform .2s var(--ease);
}
.lang-btn:hover { color: var(--ivory); }
.lang-btn.is-active { color: var(--ivory); }
.lang-btn.is-active::after { transform: scaleX(1); }

/* 分类 tab：选中态 = 老金下划线（G1 激活线，触控目标 ≥44px） */
.tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;   /* 页眉加入语言切换后仍允许 tabs 收缩横向滚动 */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 0;
  background: none;
  padding: 0 12px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--ivory-faint);
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease;
}
.tab::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 10px;
  height: 1px;
  background: var(--g1);
  transform: scaleX(0);
  transition: transform .2s var(--ease);
}
.tab:hover { color: var(--ivory); }
.tab.is-active { color: var(--ivory); }
.tab.is-active::after { transform: scaleX(1); }

/* 子类筛选 chips：挂在墙上的象牙卡纸小纸签（数据驱动渲染） */
.subtabs-row { border-top: 1px solid var(--hair-ivory); }
.subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-block: 14px 16px;
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 16px;
  background: var(--mat);
  border: 1px solid var(--frame);
  border-radius: var(--radius);
  box-shadow: var(--shadow-mat);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .08em;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.chip:hover { color: var(--ink); border-color: var(--line-paper-strong); }
.chip.is-active {
  color: var(--ink);
  border-color: rgba(143, 112, 64, .75);
  box-shadow: inset 0 -1px 0 var(--g2), var(--shadow-mat);
}
.chip-count {
  margin-left: 7px;
  font-family: var(--serif);
  letter-spacing: .04em;
  opacity: .75;
}
.chip.is-active .chip-count { color: var(--g2); }

/* ---------- 4. 首页 · hero（纯文字 · 射灯下的馆名 · 顶部青绿光晕） ---------- */
/* 定点修复（2026-09-26）延续：hero 无顶部大图、纯文字版式（顶部无图铁律不破——
   下方光晕为纯 CSS 装饰渐变，非图片）。
   V3.2：深青绿墙上大字象牙衬线自带"馆名铜牌"气质；kicker/发丝线/著录号/压印环
   换老金 G 系。注意：本元素同时带 .wrap，纵向内距必须用
   padding-block 简写 —— 写 padding: X 0 Y 会把 .wrap 的 padding-inline 归零。 */
.hero {
  position: relative;
  padding-block: clamp(64px, 10vh, 116px) clamp(44px, 7vh, 84px);
  /* ★V3.2 装饰亮端 --wall-glow 位置1/3：顶部径向光晕（纯 CSS，非图片）。
     渐变主体落在标题上方留白带，衰减至标题区已近透明——象牙文字取样不受影响。
     #2B645C 禁上文字（vs G0 仅 3.6:1），全站仅三处装饰面（§2.2）。 */
  background-image: none;
}
.hero-copy { max-width: 820px; }
.hero-kicker {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--g1);
}
/* 站名大标题：任何视口永不折行（单行完整展示）—— 定点修复原值保留。
   zh 五字 ≥40px 起步、8.5vw 随视口放大至 132px 封顶；
   拉丁站名（EN/FR，字符更多）单独降档，保证同一行内放下。
   html[lang] 由 i18n.js 随语言切换同步，选择器自动生效。
   金不做标题大字：hero-title = 象牙衬线。 */
.hero-title {
  margin-top: 20px;
  font-size: clamp(40px, 8.5vw, 132px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: clamp(.02em, .6vw, .06em);
  white-space: nowrap;
  color: var(--ivory);
}
html[lang="en"] .hero-title,
html[lang="fr"] .hero-title {
  font-size: clamp(30px, 6.4vw, 84px);
  letter-spacing: clamp(.01em, .3vw, .03em);
}
/* 老金发丝线：铜牌式细节（1px hairline，44px 宽） */
.hero-rule {
  width: 44px;
  height: 1px;
  margin: 30px 0 24px;
  background: var(--g1);
}
/* 著录引言：衬线斜体（Cormorant italic + 中文宋），行距放宽 */
.hero-cite {
  max-width: 34em;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .08em;
  color: var(--ivory-soft);
}
/* 著录号：老金老式数字（onum） */
.hero-scope {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--g1);
  font-feature-settings: "onum" 1;
}

/* Ψ 盲压印环：老牌版画商的金压封缄。
   压印不发光：默认 G1 55% 透明度（盲压印感），hover 只回满 G1，不换色相。仅大屏出现。 */
.hero-stamp {
  position: absolute;
  top: clamp(56px, 9vh, 108px);
  right: clamp(0px, 1vw, 8px);
  width: 74px;
  height: 74px;
  border: 1px solid rgba(193, 161, 97, .55);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: rgba(193, 161, 97, .55);
}
.hero-stamp:hover {
  border-color: var(--g1);
  color: var(--g1);
}

/* 馆规铭牌带：两条金发丝线夹一句象牙衬线（V3.2 换血——
   V2 墨绿底色块删除，整面墙已是青绿，改为老画廊墙上鎏金馆规铭牌） */
.statement {
  margin-top: var(--s6);
  padding-block: clamp(28px, 4.5vh, 44px);
  background: none;
  border-block: 1px solid var(--hair-gold);
  color: var(--ivory);
}
.statement p {
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: .04em;
  line-height: 2.0;
  color: var(--ivory);
}
/* 西文小体大写小签（G1）：需压过 .statement p 的 clamp ——
   用 p.statement-sub 提特异性（验收 v2 P3-1 延续） */
.statement p.statement-sub {
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 12px;   /* 西文小体大写装饰签，非中文实义文本 */
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--g1);
  opacity: .9;
}

/* ---------- 5. 首页 · 工具行（墙上的操作件） ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 26px;
  padding-top: clamp(28px, 5vh, 44px);
  padding-bottom: 38px;
}
.search { flex: 1 1 240px; max-width: 380px; }
#q {
  width: 100%;
  min-height: 44px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23F2EDE1' stroke-opacity='.55' stroke-width='1.4'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='m10.6 10.6 3 3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 4px center;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 10px 28px 10px 2px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ivory);
  transition: border-color .2s ease;
}
#q::placeholder { color: var(--ivory-faint); }
#q:focus { border-bottom-color: var(--g1); }

.select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F2EDE1' stroke-opacity='.55' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 6px center;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 10px 30px 10px 2px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ivory);
  cursor: pointer;
  max-width: 240px;
  transition: border-color .2s ease;
}
.select:hover { border-bottom-color: var(--line-strong); }
.select:focus { border-bottom-color: var(--g1); }

.count {
  margin-left: auto;
  font-family: var(--sans);
  font-size: 13px;   /* 中文可读下限 13px（验收 v2 P2-2） */
  letter-spacing: .18em;
  color: var(--ivory-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;   /* 筛选时数字跳动最小化（仅计数处） */
}
.count .num {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ivory);
  letter-spacing: .04em;
  font-feature-settings: "onum" 1;      /* 老式数字（著录感） */
}

/* ---------- 6. 首页 · 瀑布流（编辑式网格） ---------- */
/* 沟槽：480–767 两列 32 · 768–1279 两列 48 · ≥1280 三列 56（间距=呼吸，8 的倍数） */
.works { padding-bottom: clamp(72px, 10vh, 120px); }

.masonry {
  column-count: 2;
  column-gap: 32px;
  transition: opacity .25s ease;   /* 与 js fadeApply 的 250ms 对齐 */
}
.masonry.is-fading { opacity: .25; }
@media (max-width: 479px) {
  .masonry { column-count: 1; }
}
@media (min-width: 768px) {
  .masonry { column-count: 2; column-gap: 48px; }
}
@media (min-width: 1280px) {
  .masonry { column-count: 3; column-gap: 56px; }
}

/* ---------- 6b. 卡纸装裱式作品卡片（深墙上唯一的"亮物"） ---------- */
/* 结构：a.card > figure.card-media（卡纸层）> span.mat-win（窗口层）> img
   铁律：图片不写 width:100% —— 永不拉伸、永不放大，由 mat-win 居中接住；
   V3.2 hover：无位移无缩放，只做铜边加深 + 深投影 + 射灯提亮 + 青绿冷光晕。 */
.card {
  display: block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 40px;
  border-radius: var(--radius);
}
@media (min-width: 768px) {
  .card { margin-bottom: 56px; }
}
@media (min-width: 1280px) {
  .card { margin-bottom: 72px; }
}

.card-media {
  position: relative;
  background: var(--mat);                        /* 象牙卡纸 */
  border: 1px solid var(--frame);                /* 纸的铜边 */
  border-radius: var(--radius);
  padding: var(--mat-pad);                       /* 卡纸宽边 passe-partout */
  padding-bottom: calc(var(--mat-pad) + 6px);    /* 下边比四边厚 6px（挂稳的画） */
  box-shadow: var(--shadow-mat);                 /* 深墙重投影 = 射灯打在画上 */
  transition: box-shadow .35s ease, border-color .35s ease;
}
.card:hover .card-media,
.card:focus-visible .card-media {
  border-color: var(--frame-strong);             /* 铜边加深，不位移 */
  box-shadow: var(--shadow-mat-hover),
              0 24px 56px rgba(43, 100, 92, .15);  /* ★V3.2 装饰亮端位置3：射灯偏青的一丝冷光
                                                      （--wall-glow，落在墙面无字处；
                                                      投影双档令牌零改动，只追加外层） */
}
.card:hover .card-img { filter: saturate(1.06) brightness(1.04); }   /* 射灯提亮，仅交互瞬间 */

/* 内衬窗口：象牙衬纸 + 沉入进深线，接住小图边缘 */
.mat-win {
  display: grid;
  place-items: center;
  background: var(--win);
  box-shadow: inset 0 0 0 1px var(--win-line);
  min-height: 140px;
}
.card-img {
  max-width: 100%;
  height: auto;
}
.js .card-img { transition: opacity .5s ease, filter .35s ease; }
.js .card-img.is-loading { opacity: 0; }

.card-ph {
  width: 100%;
  aspect-ratio: 3 / 4;
}
.card-ph svg { width: 44%; opacity: .8; }

.card-veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  background: linear-gradient(180deg, rgba(246, 241, 229, 0) 58%, rgba(246, 241, 229, .95) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
.card:hover .card-veil,
.card:focus-visible .card-veil { opacity: 1; }
.card-veil-name {
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--ink);
  transform: translateY(6px);
  transition: transform .45s var(--ease);
}
.card:hover .card-veil-name,
.card:focus-visible .card-veil-name { transform: none; }

/* 卡下著录行（直接排墙 = 展签在墙上） */
.card-meta { display: block; padding: 14px 2px 0; }
.card-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--serif-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .01em;
  color: var(--ivory);
  transition: color .2s ease;
}
.card-sub {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 3px;
  font-size: 13px;   /* 中文可读下限 13px（验收 P2-1） */
  line-height: 1.7;
  color: var(--ivory-soft);
}
.card-code {
  font-family: var(--serif);
  letter-spacing: .1em;
  color: var(--g1);
  font-feature-settings: "onum" 1;
}
.card-code::before { content: "№ "; letter-spacing: .1em; }   /* 唯一 № 源：JS 禁止再写 №（防双写） */
.card-sep { color: var(--hair-gold); }

.empty {
  padding: 72px 0;
  text-align: center;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--ivory-soft);
}

/* ---------- 7. 页脚（出馆的深一档绒墙 + 老金双线收边） ---------- */
.footer {
  background: var(--wall-deep);            /* 比主墙深一档（#17312D） */
  color: var(--ivory);
  border-top: 1px solid var(--hair-gold);
}
.footer-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: var(--s5);
  padding-block: 48px 36px;
}
.footer-name {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: .08em;
  color: var(--ivory);
}
.footer-motto {
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--ivory-faint);
}
.footer-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  padding-top: 2px;
}
.footer-cats a {
  font-size: 13px;
  letter-spacing: .08em;
  padding-block: 9px;   /* 验收 P2-2：13px 行高 26px + 上下 9px = 44px 触控热区（V2 遗留补齐） */
  color: var(--ivory-soft);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--hair-ivory);
  transition: color .2s ease;
}
.footer-cats a:hover {
  color: var(--ivory);                     /* 深底上 hover 只提亮，不变金 */
  text-decoration: underline;
  text-decoration-color: var(--g1);        /* 金下划线：线可金，字不金 */
  text-underline-offset: 4px;
}
.footer-mark {
  justify-self: end;
  padding-top: 2px;
  font-family: var(--serif-latin);
  font-size: 11px;
  letter-spacing: .18em;
  line-height: 1.7;
  text-align: right;
  text-transform: uppercase;
  color: var(--g1);
}

/* ---------- 8. 详情页 ---------- */
/* 主图装裱：figure.art 本身即卡纸（passe-partout），作品居中、永不放大
   （.art-img 不设 width —— 以原始尺寸居中，超出按比例缩小，禁上采样） */
.art {
  display: grid;
  place-items: center;
  margin-top: clamp(28px, 5vh, 52px);
  padding: clamp(20px, 3.2vw, 44px);
  background: var(--mat);
  border: 1px solid var(--frame);
  box-shadow: var(--shadow-mat);
  transition: box-shadow .35s ease, border-color .35s ease;
}
.art:hover {
  border-color: var(--frame-strong);
  box-shadow: var(--shadow-mat-hover),
              0 24px 56px rgba(43, 100, 92, .15);   /* 装裱 hover 青光（§2.2 位置3，同卡片） */
}
.art-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 64vh;
  background: var(--win);
  box-shadow: inset 0 0 0 1px var(--win-line);
}
.js .art-img { transition: opacity .6s ease; }
.js .art-img.is-loading { opacity: 0; }
.art--empty {
  width: 100%;
  padding: 64px 0;
  background: var(--mat);
  border: 1px solid var(--frame);
  box-shadow: var(--shadow-mat);
}
.art--empty .art-ph svg { width: 176px; opacity: .65; }

/* 图集：横排小卡纸（样式稿 120×72 场景小图） */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.g-item {
  position: relative;
  width: 120px;
  padding: 8px;
  background: var(--mat);
  border: 1px solid var(--frame);
  border-radius: var(--radius);
  box-shadow: var(--shadow-mat);
  cursor: zoom-in;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.g-item img {
  width: 100%;
  height: 72px;
  object-fit: cover;
  background: var(--win);
  box-shadow: inset 0 0 0 1px var(--win-line);
}
.g-item:hover {
  border-color: var(--frame-strong);
  box-shadow: var(--shadow-mat-hover);
}

/* 著录展签（直接排墙） */
.item-head { margin-top: clamp(48px, 8vh, 84px); }
.item-code {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--g1);
  font-feature-settings: "onum" 1;
}
.item-code::before { content: "№ "; letter-spacing: .1em; }
.item-title {
  margin-top: 10px;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.3;
  font-weight: 500;
  color: var(--ivory);
}
.attrs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 28px;
  padding: 22px 0;
  border-top: 1px solid var(--hair-gold);
  border-bottom: 1px solid var(--hair-gold);
}
.attr dt {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--g1);
}
.attr dd { margin-top: 6px; font-size: 15px; color: var(--ivory); }

/* ---------- 8a. essay 象牙纸浮层（★V3.2 全站唯一新增结构 .essay--paper） ----------
   深底长文阅读落回纸面（米高六手段之五）：墙上的墨字全部换到这张象牙纸上。
   item.html 中 .essay 恒带 .essay--paper，下列纸面色仅在此上下文出现。 */
.essay { margin-top: clamp(52px, 9vh, 96px); }
.essay--paper {
  max-width: 820px;
  margin-inline: auto;
  background: var(--mat);                   /* 无框大块衬底 */
  box-shadow: var(--shadow-paper);          /* 轻投影，纸浮在墙上 */
  padding: clamp(40px, 5vw, 64px);          /* 内边距 ≥40px（米高指定下限） */
}
/* 四段文字：01/02/03/04 编号 + 46em 版心（纸面线系 = --line-paper） */
.essay-sec {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px 28px;
  padding: 36px 0;
  border-top: 1px solid var(--line-paper);
}
.essay-sec:first-child { border-top: 0; padding-top: 0; }
.essay-no {
  margin-top: 7px;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--g2);               /* 纸上的金 = G2（4.1:1，装饰性编号口径放行） */
  font-feature-settings: "onum" 1;
}
.essay-title {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink);
}
.prose {
  max-width: 46em;
  margin-top: 14px;
  color: var(--ink-soft);
}
.prose p { margin-bottom: 1.4em; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
/* 纸上链接：墨字 + 暗线下划；hover 金线不金字 */
.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-paper-strong);
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.prose a:hover { color: var(--ink); text-decoration-color: var(--g2); }
.prose img {
  margin: 8px 0;
  border: 1px solid var(--line-paper);
}
.prose blockquote {
  margin: 1.4em 0;
  padding: 2px 0 2px 18px;
  border-left: 1px solid var(--line-paper-strong);
  color: var(--ink-2);
}
.prose ul, .prose ol { margin-bottom: 1.4em; padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: .3em 0; }
.prose h3, .prose h4 { font-size: 17px; font-weight: 500; margin: 1.8em 0 .6em; color: var(--ink); }
.prose code {
  padding: 1px 6px;
  background: var(--win);
  border: 1px solid var(--line-paper);
  border-radius: var(--radius);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
}
.prose hr { border: 0; border-top: 1px solid var(--line-paper); margin: 2em 0; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.4em; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--line-paper); padding: 8px 12px; text-align: left; }
.prose th { color: var(--ink-2); font-weight: 500; letter-spacing: .05em; }

/* 上一件 / 下一件：去卡片化，改为悬浮整行链接（墙上） */
.pn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: clamp(64px, 10vh, 110px);
  padding-top: 40px;
  border-top: 1px solid var(--hair-ivory);
}
.pn-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 2px;
  background: none;
  border: 0;
  border-radius: var(--radius);
}
.pn-card--next { flex-direction: row-reverse; text-align: right; }
.pn-thumb {
  flex: none;
  width: 76px; height: 76px;
  display: grid;
  place-items: center;
  background: var(--mat);
  border: 1px solid var(--frame);
  box-shadow: var(--shadow-mat);
  padding: 5px;
}
.pn-thumb img { width: 100%; height: 100%; object-fit: contain; background: var(--win); box-shadow: inset 0 0 0 1px var(--win-line); }
.pn-thumb .pn-ph svg { width: 40px; opacity: .7; }
.pn-text { min-width: 0; }
.pn-label {
  display: block;
  font-family: var(--sans);
  font-size: 13px;   /* 中文标签 13px 下限（验收 v2 P2-2，原 12px） */
  letter-spacing: .22em;
  color: var(--ivory-faint);
  white-space: nowrap;
}
.pn-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ivory);
}
/* hover：象牙不变（中文实义词永不金字），金线不金字 */
.pn-card:hover .pn-name {
  color: var(--ivory);
  text-decoration: underline;
  text-decoration-color: var(--g1);
  text-underline-offset: 3px;
}
.pn-slot { min-height: 20px; }

/* ---------- 8b. 购买入口与购买页 ---------- */
/* 详情页标题区：实心象牙按钮——深墙上唯一一块"亮砖"，本身就是聚光位（米高指定） */
.buy-entry { margin-top: 26px; }
.btn-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 28px;
  border: 1px solid var(--frame-strong);   /* 象牙底需要铜边勾轮廓 */
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: .14em;
  color: #1E3E39;                          /* 青绿字（墙色入纸，米高指定；象牙底 10.2:1） */
  background: var(--mat);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.btn-buy:hover {
  border-color: var(--g1);                 /* hover：铜边转金线，不换底色 */
  box-shadow: var(--shadow-mat);           /* 轻微投影抬升 */
}
/* 纸上变体：途径笺内象牙按钮贴象牙纸，靠铜边区分 */
.buy-card .btn-buy { border-color: var(--frame-strong); }
.buy-card .btn-buy:hover { border-color: var(--g1); }

/* 购买页：主图限高 55vh，其余沿用详情页的 .art / .item-head */
.buy-art-img { max-height: 55vh; }
.buy-heading {
  margin-top: clamp(36px, 6vh, 56px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hair-ivory);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ivory);
}
.buy-note { max-width: 46em; margin-top: 22px; }
.buy-note p { color: var(--ivory-soft); }
.buy-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 28px;
}
/* 购买途径笺：双层纸（象牙卡纸 + 铜边 + 深投影） */
.buy-card {
  padding: 28px 28px 30px;
  background: var(--mat);
  border: 1px solid var(--frame);
  border-radius: var(--radius);
  box-shadow: var(--shadow-mat);
}
.buy-card-title {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink);
}
.buy-card-text {
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-2);
}
.buy-card .btn-buy { margin-top: 22px; }

/* ---------- 9. 灯箱（青绿黑观片台） ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vault);   /* 不透明观片台底：避免底层页面透出干扰 */
  opacity: 0;
  transition: opacity .22s ease;
}
.lightbox.is-open { opacity: 1; }
.lb-stage { max-width: min(92vw, 1400px); max-height: 84vh; display: grid; place-items: center; }
.lb-img {
  max-width: 100%;
  max-height: 84vh;
  width: auto; height: auto;
  background: var(--vault);
  box-shadow: 0 0 0 1px rgba(242, 237, 225, .14);
}
.lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  padding: 0;
  background: rgba(19, 37, 35, .55);   /* 随 --vault 校准（V3.2） */
  border: 1px solid var(--hair-ivory);
  border-radius: var(--radius);
  color: var(--ivory-soft);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.lb-btn svg { width: 22px; height: 22px; }
.lb-btn:hover { color: var(--ivory); border-color: var(--g0); }   /* 鎏金高光只此一处用 */
.lb-prev { left: clamp(8px, 3vw, 40px); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(8px, 3vw, 40px); top: 50%; transform: translateY(-50%); }
.lb-close { top: 16px; right: clamp(12px, 2.5vw, 32px); }
.lb-count {
  position: absolute;
  left: 0; right: 0; bottom: 22px;
  text-align: center;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--ivory-faint);
  pointer-events: none;
}

/* ---------- 10. 404（顶部青绿光晕与 hero 呼应） ---------- */
.nf {
  min-height: 78vh;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  /* ★V3.2 装饰亮端位置2/3：与 hero 同规格顶部光晕（纯 CSS，非图片，纯装饰无字） */
  background-image: radial-gradient(640px 300px at 50% -120px, rgba(43, 100, 92, .28), rgba(43, 100, 92, 0) 70%);
}
.nf-code {
  font-family: var(--serif);
  font-size: clamp(120px, 22vw, 240px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .06em;
  font-feature-settings: "onum" 1;
  color: var(--ivory);
}
.nf .gold-line--short { margin: 26px auto; }
.nf-text {
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--ivory-soft);
}
.nf-back {
  margin-top: 36px;
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--ivory);
}
/* hover：象牙不变 + 金下划线（同 pn 口径，金线不金字） */
.nf-back:hover {
  text-decoration: underline;
  text-decoration-color: var(--g1);
  text-underline-offset: 3px;
}

@keyframes nf-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.nf > * { animation: nf-rise .9s var(--ease) both; }
.nf > :nth-child(2) { animation-delay: .1s; }
.nf > :nth-child(3) { animation-delay: .18s; }
.nf > :nth-child(4) { animation-delay: .26s; }

/* ---------- 11. 滚动淡入与动效总开关 ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- 12. 响应式微调 ---------- */
@media (max-width: 1099px) {
  .hero-stamp { display: none; }   /* 盲压印环只在大屏出现 */
}
@media (max-width: 899px) {
  .footer-in {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }
  .footer-cats { justify-content: flex-start; }
  .footer-mark { justify-self: start; text-align: left; }
}
@media (max-width: 859px) {
  .essay-sec { grid-template-columns: 1fr; gap: 10px; }
  .essay-no { margin-top: 0; }
  .attrs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .topbar-in { min-height: 56px; gap: 12px; }
  .brand { letter-spacing: .18em; }
  .lang-btn { padding: 0 6px; }   /* 窄屏收紧语言切换按钮 */
  .pn { grid-template-columns: 1fr; }
  .buy-cards { grid-template-columns: 1fr; }   /* 途径卡片窄屏堆叠 */
  #q, .select { font-size: 16px; }   /* 避免 iOS 聚焦缩放 */
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
  .lb-btn { width: 44px; height: 44px; }
}

/* ---------- 13. prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .art-img.is-loading,
  .js .card-img.is-loading { opacity: 1; }
}