/* =============================================================
   作·品 — 深色画廊
   无外部依赖（不引 Google Fonts / CDN），国内服务器加载稳定
   ============================================================= */

:root {
  --bg:         #0b0b0d;
  --bg-2:       #0f0f12;
  --panel:      #141419;
  --line:       rgba(255, 255, 255, .07);
  --line-2:     rgba(255, 255, 255, .15);
  --text:       #ece9e4;
  --muted:      #8b8782;
  --muted-2:    #5f5c58;
  --accent:     #c8a45c;
  --accent-dim: rgba(200, 164, 92, .14);

  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
               "Hiragino Sans GB", "Source Han Sans SC", system-ui, sans-serif;
  --font-display: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC",
                  "SimSun", Georgia, serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --maxw: 1360px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* 极淡的顶部光晕，避免纯黑发闷 */
  background-image: radial-gradient(1200px 500px at 50% -10%, rgba(255,255,255,.045), transparent 70%);
  background-repeat: no-repeat;
}

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

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

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

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #26262b; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #35353c; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* =============================================================
   顶栏
   ============================================================= */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(11, 11, 13, .72);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.topbar.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(11, 11, 13, .9);
}
.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand__cn {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: .16em;
  font-weight: 600;
}
.brand__en {
  font-size: 10px;
  letter-spacing: .34em;
  color: var(--muted-2);
  transform: translateY(-1px);
}
.topbar__nav { display: flex; align-items: center; gap: 22px; }
.topbar__link {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .06em;
  transition: color .2s var(--ease);
}
.topbar__link:hover { color: var(--text); }

/* =============================================================
   首屏
   ============================================================= */
.hero {
  padding: 168px 0 76px;
  text-align: center;
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(64px, 13vw, 132px);
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1;
  margin: 0 0 26px;
  /* 中间那个分隔点做得低调些 */
  color: var(--text);
}
.hero__title .dot { color: var(--muted-2); font-size: .5em; vertical-align: .28em; letter-spacing: 0; }
.hero__en {
  font-size: 11px;
  letter-spacing: .62em;
  color: var(--muted-2);
  text-indent: .62em;
  margin-bottom: 30px;
}
.hero__slogan {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .22em;
}
.hero__slogan::before,
.hero__slogan::after {
  content: "";
  width: 46px;
  height: 1px;
  background: var(--line-2);
}

/* =============================================================
   筛选栏
   ============================================================= */
.filters {
  position: sticky;
  top: 64px;
  z-index: 40;
  background: rgba(13, 13, 16, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* 向下滚浏览作品时整条滑走，作品就能占满一屏；往上滑自己回来。
     翻译量只在这一条 transform 上，不触发布局，滚动不掉帧。 */
  transition: transform .42s var(--ease), box-shadow .42s var(--ease);
  will-change: transform;
}
/* 连 topbar 下面那 64px 缝一起滑出画面，不然还会露一条边 */
.filters.is-hidden {
  transform: translateY(calc(-100% - 64px));
  box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
}

/* 筛选栏滑走时，右上角留一个很小的入口，免得找不到筛选在哪 */
.fab-filter {
  position: fixed;
  top: 74px;
  right: 26px;
  z-index: 45;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(18, 18, 22, .9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .14em;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity .32s var(--ease), transform .32s var(--ease),
              color .2s var(--ease), border-color .2s var(--ease);
}
.fab-filter.is-on { opacity: 1; transform: none; pointer-events: auto; }
.fab-filter:hover { color: var(--accent); border-color: rgba(200, 164, 92, .5); }
.fab-filter__n { color: var(--accent); font-variant-numeric: tabular-nums; }
/* 只写上下内边距，左右交给 .wrap —— 之前这里是 padding: 20px 0 18px，
   把 .wrap 那 32px 的左右内边距一起清零了，筛选栏整条贴着屏幕边，跟顶栏
   站名（在 32px 处）对不齐。以前是左边对齐的胶囊不太看得出来，加了这条拉满
   的搜索框就很扎眼。手机上 .wrap 会换成 18px，这里也就不用再管。 */
.filters__in { padding-top: 20px; padding-bottom: 18px; }
.frow {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 16px;
  align-items: start;
  padding: 7px 0;
}
.frow + .frow { border-top: 1px dashed rgba(255,255,255,.045); }
.frow__label {
  font-size: 12px;
  color: var(--muted-2);
  letter-spacing: .18em;
  padding-top: 7px;
}
.frow__items { display: flex; flex-wrap: wrap; gap: 8px; }

/* 手机版才用的下拉筛选，桌面这一栏显示的是上面那排胶囊（按宽度二选一，
   见文件末尾的 @media (max-width: 720px)）。
   它挂的是 data-fsel 而不是 data-group：app.js 的 syncPills() 会给每个带
   data-group 的元素里塞一个 .pill__n 计数，塞进 <select> 里就会凭空多出
   一条看不见的怪选项。 */
.frow__select { display: none; }

/* -------------------------------------------------------------
   筛选栏顶上的模糊搜索
   桌面和手机都显示。只是在前台已经拿到的这批作品里找，不走数据库。
   ------------------------------------------------------------- */
.filters__search { position: relative; margin-bottom: 10px; }
.filters__kw {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--text);
  background-color: var(--bg-2);
  /* 放大镜自己画：内联 svg，不引外部文件（全站零外部依赖）。
     跟以前那个下拉的箭头是同一套路子。 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%235f5c58' stroke-width='1.4'%3E%3Ccircle cx='6' cy='6' r='4.3'/%3E%3Cpath d='M9.3 9.3 12.4 12.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 13px center;
  border: 1px solid var(--line);
  border-radius: 0;
  /* 左边给放大镜让位，右边给那个 ✕ 让位 */
  padding: 10px 40px 10px 36px;
  transition: border-color .2s var(--ease);
}
.filters__kw::placeholder { color: var(--muted-2); }
.filters__kw:focus { outline: none; border-color: rgba(200, 164, 92, .5); }
/* type=search 时 Chrome / Safari 会自己带一个 ✕，跟右边那个自定义的撞成两个，
   连同一并藏掉 */
.filters__kw::-webkit-search-cancel-button,
.filters__kw::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.filters__kw-clear {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  /* 手指点的东西不能太小：给足 36px 见方，别只管着把 ✕ 画出来 */
  min-width: 36px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: color .2s var(--ease);
}
.filters__kw-clear:hover { color: var(--accent); }
.filters__kw-clear[hidden] { display: none; }

.pill {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: .04em;
  padding: 6px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.pill:hover { color: var(--text); border-color: var(--line-2); }
.pill.is-on {
  color: var(--accent);
  border-color: rgba(200, 164, 92, .55);
  background: var(--accent-dim);
}
.pill__n { color: var(--muted-2); font-size: 11px; margin-left: 5px; }
.pill.is-on .pill__n { color: rgba(200,164,92,.7); }

.filters__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted-2);
}
.btn-reset {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .1em;
  cursor: pointer;
  padding: 0;
  border-bottom: 1px solid var(--line-2);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.btn-reset:hover { color: var(--accent); border-color: var(--accent); }
.filters__count b { color: var(--text); font-weight: 600; }

/* =============================================================
   作品网格
   ============================================================= */
.gallery { padding: 44px 0 40px; }

.grid {
  --rowgap: 26px; /* 列表行之间要用它做负边距，抽出来免得两处对不上 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rowgap) 24px;
}

.card {
  display: block;
  /* 触屏上把「双击缩放」那个 300ms 等待去掉，点下去立刻响应 */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(14px);
  animation: cardIn .62s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes cardIn {
  to { opacity: 1; transform: none; }
}

.card__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  transition: border-color .45s var(--ease), transform .55s var(--ease);
}
.card:hover .card__frame {
  border-color: rgba(200, 164, 92, .42);
  transform: translateY(-3px);
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), opacity .5s var(--ease);
}
.card:hover .card__img { transform: scale(1.045); }

/* 无封面时的渐变占位，比破图好看，同一个标题颜色固定 */
.ph { width: 100%; height: 100%; position: relative; }
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.035) 50%, transparent 58%);
}
.ph-0 { background: linear-gradient(140deg, #1a1f2b, #0d0f14); }
.ph-1 { background: linear-gradient(140deg, #241d13, #0e0c09); }
.ph-2 { background: linear-gradient(140deg, #14201c, #0c110f); }
.ph-3 { background: linear-gradient(140deg, #201a24, #0e0c10); }
.ph-4 { background: linear-gradient(140deg, #1e1c1a, #0d0c0b); }
.ph-5 { background: linear-gradient(140deg, #12201f, #0b1211); }
.ph-6 { background: linear-gradient(140deg, #1b1a2a, #0d0d14); }
.ph-7 { background: linear-gradient(140deg, #17171a, #0b0b0d); }

/* 卡片上的信息遮罩：平时首图干净，hover 才浮出文字 */
.card__veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  background: linear-gradient(to top, rgba(6,6,8,.92) 0%, rgba(6,6,8,.55) 34%, transparent 68%);
  opacity: 0;
  transition: opacity .42s var(--ease);
}
.card:hover .card__veil { opacity: 1; }

.card__title {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: .06em;
  margin: 0 0 9px;
  transform: translateY(8px);
  transition: transform .5s var(--ease);
}
.card:hover .card__title { transform: none; }

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  transform: translateY(8px);
  transition: transform .5s var(--ease) .05s;
}
.card:hover .card__tags { transform: none; }
.tag {
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--muted);
  border: 1px solid var(--line-2);
  padding: 2px 8px;
  border-radius: 2px;
}

/* 目录编号，像画册一样 */
.card__no {
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: 10px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.34);
  font-variant-numeric: tabular-nums;
  transition: color .4s var(--ease);
}
.card:hover .card__no { color: rgba(200,164,92,.8); }

/* 有全景时的角标 */
.card__pano {
  position: absolute;
  top: 12px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--accent);
  background: rgba(10,10,12,.7);
  border: 1px solid rgba(200,164,92,.4);
  padding: 3px 9px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.card:hover .card__pano { opacity: 1; transform: none; }
.card__pano::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 7px var(--accent);
}

/* 静态模式下（无 hover，如触屏）始终显示信息 */
@media (hover: none) {
  .card__veil { opacity: 1; }
  .card__pano { opacity: 1; transform: none; }

  /* 触屏上 :hover 只在手指按住的一瞬间成立，卡片会在指头底下动一下。
     浏览器很容易把「按下去时元素位移了」判成滑动，从而把这次点击吃掉 ——
     手机上点图片没反应、跳不出全景，多半就是这么来的。
     所以触屏设备一律不做 hover 位移 / 缩放，只保留颜色反馈。 */
  .card:hover .card__frame { transform: none; }
  .card:hover .card__img { transform: none; }
  .card:hover .card__title { transform: none; }
  .card:hover .card__tags { transform: none; }

  /* 链接行同理：hover 改的是 padding，等于点一下整行往右挪，更会被判成滑动 */
  .lrow { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .lrow:hover { padding-left: 4px; }
}

/* =============================================================
   链接行（没传封面图的作品）
   跟图片卡片在同一个网格里混排：整行横跨三列，一行一件，整行就是链接。
   相邻两行要挨着（用负边距把网格的行间距抵消掉），
   但行的上下如果是图片卡片，就保留原来的间距。
   ============================================================= */
.lrow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(10px);
  animation: cardIn .5s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
  transition: background .25s var(--ease), padding-left .25s var(--ease);
}
/* 连着两个链接行 → 贴紧；其余情况（卡片↔行）保留网格原本的间距 */
.lrow + .lrow { margin-top: calc(-1 * var(--rowgap)); }
/* 一坨链接行的最上面补一条线，跟上面的卡片分开 */
.lrow:first-child,
.card + .lrow { border-top: 1px solid var(--line); }
.lrow:hover { background: rgba(255, 255, 255, .022); padding-left: 14px; }

.lrow__no {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  transition: color .25s var(--ease);
}
.lrow:hover .lrow__no { color: var(--accent); }

.lrow__main {
  min-width: 0; /* 少了这句，里面那行网址不会省略号 */
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lrow__title {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: .06em;
  transition: color .25s var(--ease);
}
.lrow:hover .lrow__title { color: var(--accent); }
.lrow__meta { font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.lrow__url {
  font-size: 11px;
  color: var(--muted-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lrow__go {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 5px 15px;
  white-space: nowrap;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.lrow:hover .lrow__go {
  color: var(--accent);
  border-color: rgba(200, 164, 92, .55);
  background: var(--accent-dim);
}

/* ---------- 空状态 ---------- */
.empty {
  padding: 96px 0 120px;
  text-align: center;
  color: var(--muted-2);
}
.empty__mark {
  font-family: var(--font-display);
  font-size: 42px;
  color: #232327;
  letter-spacing: .2em;
  margin-bottom: 18px;
}
.empty__text { font-size: 13px; letter-spacing: .1em; }

/* ---------- 加载更多 ---------- */
.loadmore { text-align: center; padding: 22px 0 10px; }
.btn-more {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: .18em;
  padding: 13px 46px;
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.btn-more:hover { color: var(--text); border-color: var(--accent); background: var(--accent-dim); }
.btn-more[disabled] { opacity: .4; cursor: default; }

/* =============================================================
   页脚
   ============================================================= */
.footer {
  border-top: 1px solid var(--line);
  margin-top: 60px;
  padding: 40px 0 52px;
}
.footer__in {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted-2);
  letter-spacing: .08em;
}
.footer__brand { font-family: var(--font-display); letter-spacing: .2em; color: var(--muted); }

/* =============================================================
   右下角「加微信」浮标
   首页和详情页都挂一份，结构在 includes/contact_fab.php。
   名字和微信号在 includes/functions.php 顶上改。
   z-index 特意压在 lightbox(120) 下面：全屏看图的时候它得让开。
   ============================================================= */
.wx {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
}
.fab-wx {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(200, 164, 92, .45);
  background: rgba(18, 18, 22, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--accent);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: .14em;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  transition: background .25s var(--ease), border-color .25s var(--ease),
              transform .25s var(--ease);
}
.fab-wx:hover { background: rgba(200, 164, 92, .16); transform: translateY(-1px); }
/* 小绿点。用微信那个绿，但压暗一档 —— 原色在深色页上太扎眼 */
.fab-wx__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #57b56a;
  box-shadow: 0 0 0 3px rgba(87, 181, 106, .16);
}

/* 名片。默认藏着（HTML 上带 hidden），点浮标才展开。
   absolute 定位在外层 .wx 上，right:0 对齐按钮右缘，往上弹。 */
.wxcard {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: 250px;
  padding: 20px;
  border: 1px solid var(--line-2);
  background: rgba(20, 20, 24, .97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  animation: wx-in .26s var(--ease);
}
.wxcard[hidden] { display: none; }
@keyframes wx-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.wxcard__close {
  position: absolute;
  top: 8px;
  right: 10px;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px;
  color: var(--muted-2);
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s var(--ease);
}
.wxcard__close:hover { color: var(--text); }
.wxcard__name {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: .12em;
  color: var(--text);
}
.wxcard__label {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--muted-2);
}
.wxcard__id {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 6px 8px 12px;
  border: 1px dashed var(--line-2);
  background: rgba(255, 255, 255, .03);
}
.wxcard__id span {
  font-size: 14px;
  letter-spacing: .08em;
  color: var(--text);
  /* 复制失败时还有「长按手动选」这条退路，得让它整段可选中 */
  -webkit-user-select: all;
  user-select: all;
}
.wxcard__copy {
  appearance: none;
  border: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  padding: 5px 10px;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .1em;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease),
              background .2s var(--ease);
}
.wxcard__copy:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.wxcard__tip {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted-2);
}

/* =============================================================
   案例详情页
   ============================================================= */
.detail { padding: 104px 0 0; }

.detail__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--muted);
  margin-bottom: 28px;
  transition: color .2s var(--ease);
}
.detail__back:hover { color: var(--accent); }

.detail__head { margin-bottom: 30px; }
.detail__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: .07em;
  margin: 0 0 16px;
  line-height: 1.24;
}
.detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
/* 主图 */
.viewer { position: relative; background: var(--panel); border: 1px solid var(--line); }
.viewer__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.viewer__img { width: 100%; height: 100%; object-fit: contain; }
.viewer__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,12,.6);
  border: 1px solid var(--line-2);
  color: var(--text);
  cursor: pointer;
  font-size: 17px;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.viewer__nav:hover { background: rgba(200,164,92,.16); border-color: var(--accent); }
.viewer__nav--prev { left: 16px; }
.viewer__nav--next { right: 16px; }
.viewer__count {
  position: absolute;
  right: 18px;
  bottom: 16px;
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.62);
  background: rgba(10,10,12,.6);
  padding: 4px 12px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* 主图整块可点，点开全屏。按钮本身不能有任何自己的样子，否则
   就在图上压出一个框；尺寸撑满 stage，图片还是原来那套 object-fit。
   z-index 压在导航箭头下面，免得把「上一张 / 下一张」挡住。 */
.viewer__open {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.viewer__nav, .viewer__count { z-index: 2; }

.viewer__hint {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.55);
  background: rgba(10,10,12,.6);
  padding: 4px 12px;
  border-radius: 999px;
  pointer-events: none;
}

/* -------------------------------------------------------------
   PDF：直接铺在主图区里看
   ------------------------------------------------------------- */

/* 铺满整块 stage。z-index 压在导航箭头（2）下面，翻页箭头照样点得动。
   注意这几种「隐藏」都得自己写 [hidden] 规则：.viewer__open 上写了
   display:block，UA 自带的那条 [hidden]{display:none} 会被它压过去 ——
   不补这一条，PDF 那张的隐形容器还会占着位置。 */
.viewer__pdf { position: absolute; inset: 0; z-index: 1; background: var(--panel); }
.viewer__frame { position: relative; display: block; width: 100%; height: 100%; border: 0; }
.viewer__open[hidden],
.viewer__pdf[hidden],
.viewer__hint[hidden] { display: none; }

/* 垫在 iframe 后面那句话。iframe 自己不刷底色 —— 认得的浏览器会由
   PDF 阅读器刷上一层不透明的底把它盖住，认不得的就露出来给人指路。
   iframe 给了不透明底的话，这句就永远看不见了，等于白写。 */
.viewer__pdftip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  font-size: 12px;
  line-height: 2;
  letter-spacing: .08em;
  color: var(--muted-2);
}

/* 左下角那行字，当前是 PDF 时变成可点的「在新窗口打开」。
   手机上内嵌的 PDF 经常是一片空白（微信 / QQ 内置浏览器尤其），这是退路。 */
.viewer__hint--link {
  pointer-events: auto;
  text-decoration: none;
  border: 1px solid transparent; /* 先留出来，hover 时只换颜色，文字不跳 */
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.viewer__hint--link:hover {
  border-color: var(--accent);
  background: rgba(200,164,92,.12);
}

/* =============================================================
   全屏看图
   ============================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 8, .96);
  animation: lb-in .22s var(--ease);
}
.lightbox[hidden] { display: none; }
@keyframes lb-in { from { opacity: 0 } to { opacity: 1 } }

/* 点空白关闭用的垫层，铺在最底下；图压在它上面 */
.lightbox__scrim { position: absolute; inset: 0; cursor: zoom-out; }

.lightbox__img {
  position: relative;
  z-index: 1;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  object-fit: contain;
  cursor: zoom-out;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,12,.6);
  border: 1px solid var(--line-2);
  color: var(--text);
  cursor: pointer;
  font-size: 19px;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.lightbox__nav:hover { background: rgba(200,164,92,.16); border-color: var(--accent); }
.lightbox__nav--prev { left: 20px; }
.lightbox__nav--next { right: 20px; }
.lightbox__nav[hidden] { display: none; }

/* 手机上左右滑就是在换图，箭头反而挡图，藏掉 */
@media (hover: none) {
  .lightbox__nav { display: none; }
}

.lightbox__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px calc(18px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.lightbox__count {
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.62);
  font-variant-numeric: tabular-nums;
  background: rgba(10,10,12,.6);
  padding: 4px 12px;
  border-radius: 999px;
}
.lightbox__close {
  pointer-events: auto;
  font: inherit;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--text);
  background: rgba(10,10,12,.6);
  border: 1px solid var(--line-2);
  padding: 8px 14px;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.lightbox__close:hover { background: rgba(200,164,92,.16); border-color: var(--accent); }

/* 全屏里的 PDF。底部给「关闭」那条留出空当，免得把阅读器自己的
   页码 / 缩放那一行压住；手机上再多留一条安全区。 */
.lightbox__pdf {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  z-index: 1;
}
.lightbox__frame { position: relative; display: block; width: 100%; height: 100%; border: 0; }
.lightbox__img[hidden],
.lightbox__pdf[hidden],
.lightbox__open[hidden] { display: none; }

/* 「在新窗口打开 ↗」—— 跟「关闭」长一样的按钮，摆在中间 */
.lightbox__open {
  pointer-events: auto;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--text);
  background: rgba(10,10,12,.6);
  border: 1px solid var(--line-2);
  padding: 8px 14px;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.lightbox__open:hover { background: rgba(200,164,92,.16); border-color: var(--accent); }

/* 打开全屏时把页面锁住，不然底下还能跟着滚，滑动手势会打架 */
body.is-locked { overflow: hidden; }

@media (max-width: 720px) {
  .viewer__hint { left: 12px; bottom: 12px; }
  .lightbox__bar { padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
}

.thumbs {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.thumb {
  flex: 0 0 116px;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  transition: border-color .25s var(--ease), opacity .25s var(--ease);
  opacity: .55;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { opacity: .85; }
.thumb.is-on { opacity: 1; border-color: var(--accent); }

/* 缩略图那一栏里的 PDF：生不出小图，摆一个写死的块。
   斜纹是为了跟「空白」区分开 —— 一眼看出这张是文件不是图。 */
.thumb__pdf {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: .24em;
  text-indent: .24em;
  color: rgba(255,255,255,.5);
  background: repeating-linear-gradient(45deg, #16161a, #16161a 7px, #1d1d22 7px, #1d1d22 14px);
}

/* 侧栏信息 */
.detail__body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 44px;
  margin-top: 40px;
  align-items: start;
}
.detail__desc {
  color: var(--muted);
  font-size: 14px;
  line-height: 2;
  white-space: pre-wrap;
}
.detail__desc:empty { display: none; }

.info {
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.info__row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 18px;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.info__row:last-child { border-bottom: 0; }
.info__k { color: var(--muted-2); letter-spacing: .1em; flex: 0 0 auto; }
.info__v { color: var(--text); text-align: right; }

.btn-pano {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 18px;
  padding: 16px;
  background: var(--accent);
  color: #12100c;
  border: 1px solid var(--accent);
  font-size: 13px;
  letter-spacing: .2em;
  font-weight: 600;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.btn-pano:hover { background: #d8b673; transform: translateY(-1px); }
.btn-pano::after { content: "↗"; font-size: 14px; }

.pano-hint {
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted-2);
  text-align: center;
  letter-spacing: .06em;
}

/* 相关作品 */
.related { padding: 74px 0 0; }
.related__title {
  font-size: 12px;
  letter-spacing: .28em;
  color: var(--muted-2);
  margin: 0 0 26px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.related__title::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* =============================================================
   启动动画
   进站先用一句话把调性交代清楚。纯 CSS 编排，零外部请求。
   整个 .intro 是 app.js 动态插进去的 —— 关掉 JS 的人根本不会看到这层遮罩，
   也就不会被它挡住首页（这是不能用「HTML 里写死 + JS 移除」的原因）。
   只动 opacity / transform，不动 letter-spacing 这类会引发布局的属性，
   低端机也不会卡。
   ============================================================= */
.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  background-image: radial-gradient(900px 620px at 50% 46%, rgba(200, 164, 92, .075), transparent 68%);
  transition: opacity .72s var(--ease), transform .72s var(--ease);
}
.intro.is-out { opacity: 0; transform: scale(1.03); }

/* 四角细线，像画册的裁切标记 */
.intro::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(255, 255, 255, .045);
  pointer-events: none;
}

.intro__in {
  position: relative;
  width: 100%;
  max-width: 760px;
  padding: 0 32px;
  text-align: center;
}

.intro__brand { opacity: 0; animation: introUp .95s var(--ease) .12s forwards; }
.intro__brand-cn {
  display: block;
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: .24em;
  text-indent: .24em;
  color: var(--text);
}
.intro__brand-cn .intro__dot {
  color: var(--muted-2);
  font-size: .5em;
  vertical-align: .28em;
  letter-spacing: 0;
}
.intro__brand-en {
  display: block;
  margin-top: 12px;
  font-size: 9px;
  letter-spacing: .64em;
  text-indent: .64em;
  color: var(--muted-2);
}

/* 中间那条金线：从中间往两边长出来 */
.intro__rule {
  height: 1px;
  margin: 46px auto;
  background: linear-gradient(90deg, transparent, rgba(200, 164, 92, .78) 50%, transparent);
  transform: scaleX(0);
  animation: introRule 1.15s var(--ease) .52s forwards;
}

.intro__line {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(17px, 2.4vw, 25px);
  letter-spacing: .13em;
  line-height: 2.05;
  color: var(--muted);
  opacity: 0;
  animation: introLine .95s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
/* 最后一句是重点，给它一点分量 */
.intro__line--key { color: var(--text); letter-spacing: .16em; }

.intro__skip {
  position: absolute;
  right: 36px;
  bottom: 32px;
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  color: var(--muted-2);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .22em;
  padding: 0 0 4px;
  cursor: pointer;
  opacity: 0;
  animation: introUp .6s var(--ease) .9s forwards;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.intro__skip:hover { color: var(--accent); border-color: var(--accent); }

@keyframes introUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes introRule {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
@keyframes introLine {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* =============================================================
   响应式
   ============================================================= */
@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .detail__body { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 720px) {
  .wrap { padding: 0 18px; }
  /* .wrap 那句是简写，会把上下内边距一起归零，这里补回来 */
  .filters__in { padding-top: 16px; padding-bottom: 15px; }
  .hero { padding: 120px 0 50px; }
  .hero__slogan::before, .hero__slogan::after { width: 24px; }
  .grid { --rowgap: 20px; grid-template-columns: 1fr; gap: var(--rowgap); }
  .lrow { grid-template-columns: 36px 1fr auto; gap: 12px; padding: 14px 2px; }
  .lrow:hover { padding-left: 6px; }
  .lrow + .lrow { margin-top: calc(-1 * var(--rowgap)); }
  .lrow__title { font-size: 15.5px; }
  .filters { position: static; }
  /* 那排胶囊在手机上横着一行放不下，得来回滑才看得全 —— 标签露不全，还容易
     滑过头。所以窄屏不用胶囊，换成原生下拉：点开是系统自己的列表 / 滚轮，
     好点也好选。桌面不受影响，照旧是那排能多选的胶囊。 */
  .frow { grid-template-columns: 62px 1fr; gap: 12px; align-items: center; }
  .frow__label { padding-top: 0; }
  .frow__items { display: none; }
  .frow__select {
    display: block;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: 13px;
    letter-spacing: .06em;
    color: var(--text);
    background-color: var(--bg-2);
    /* appearance: none 之后系统不再给箭头。不自己画一个，它就只是个光框子，
       看不出能点开。内联 svg，不引外部文件。 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235f5c58'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 10px 34px 10px 13px;
  }
  .frow__select:focus { outline: none; border-color: var(--accent); }
  /* 展开的那张列表在桌面浏览器里是自绘的，不指定就是白底黑字，很跳 */
  .frow__select option { background: #16161a; color: var(--text); }
  .fab-wx { padding: 10px 15px; font-size: 12.5px; }
  .wx { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .wxcard { max-width: calc(100vw - 28px); }
  .viewer__nav { width: 38px; height: 38px; }
  .brand__en { display: none; }
  .fab-filter { top: 70px; right: 16px; }
  .intro::before { inset: 14px; }
  .intro__brand-cn { font-size: 24px; }
  .intro__rule { margin: 34px auto; }
  .intro__skip { right: 18px; bottom: 22px; }
}

/* =============================================================
   背景音乐开关（左下角，与右下角「加微信」一左一右）
   播放中：金色音符 + 一圈很淡的呼吸环；关闭：灰色静音。
   ============================================================= */
.bgm-fab {
  position: fixed;
  left: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(200, 164, 92, .28);
  background: rgba(18, 18, 22, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--muted-2);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  transition: color .25s var(--ease), border-color .25s var(--ease),
              background .25s var(--ease), transform .25s var(--ease);
}
.bgm-fab:hover {
  color: var(--accent);
  border-color: rgba(200, 164, 92, .55);
  background: rgba(200, 164, 92, .12);
  transform: translateY(-1px);
}
.bgm-fab.is-on {
  color: var(--accent);
  border-color: rgba(200, 164, 92, .6);
}
.bgm-fab.is-on::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(200, 164, 92, .35);
  animation: bgm-ring 2.4s var(--ease) infinite;
  pointer-events: none;
}
.bgm-fab:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
@keyframes bgm-ring {
  0%   { opacity: .7; transform: scale(.92); }
  70%  { opacity: 0;  transform: scale(1.14); }
  100% { opacity: 0;  transform: scale(1.14); }
}
@media (max-width: 720px) {
  .bgm-fab {
    left: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
}

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

/* =============================================================
   2026-10 视觉升级 —— 画廊氛围 / 首屏 / 作品流 / 页脚
   只在原有结构上做加法：类名不动，旧规则保留，这里统一覆盖。
   ============================================================= */

/* ---------- 全站氛围：极细颗粒，像展厅里的空气 ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* 顶栏底部一条会随滚动生长的金线 */
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  transform: scaleX(var(--sp, 0));
  transform-origin: left;
  background: linear-gradient(90deg, rgba(200,164,92,0), var(--accent));
  opacity: .65;
  pointer-events: none;
}

/* ---------- 首屏 ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 178px 0 92px;
  /* 四条极淡的竖向轴线，像展厅墙面的定位线；上下用底色压掉，不切边 */
  background-image:
    linear-gradient(180deg, var(--bg) 0%, rgba(11,11,13,0) 20%,
                    rgba(11,11,13,0) 80%, var(--bg) 100%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.022) 0 1px, transparent 1px 25%);
}
.hero::before {
  content: "";
  position: absolute;
  top: -34%;
  left: 50%;
  width: min(1180px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle at center,
              rgba(200,164,92,.105), rgba(200,164,92,.028) 36%, transparent 62%);
  pointer-events: none;
  z-index: -1;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}
/* 背后一个巨大的描边英文，制造纵深 */
.hero__ghost {
  position: absolute;
  top: 51%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(130px, 24vw, 360px);
  letter-spacing: .08em;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255,255,255,.018);
  -webkit-text-stroke: 1px rgba(255,255,255,.05);
  pointer-events: none;
  user-select: none;
  z-index: -1;
}
.hero__in { position: relative; z-index: 1; }
.hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 32px;
  font-size: 10px;
  letter-spacing: .42em;
  text-indent: .42em;
  color: var(--muted-2);
}
.hero__eyebrow i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(200,164,92,.6);
}
.hero__title {
  font-size: clamp(72px, 14vw, 152px);
  letter-spacing: .12em;
  text-indent: .12em;
  /* 象牙到暖灰的金属渐变，比纯白多一点厚度 */
  background: linear-gradient(180deg, #f8f5ef 2%, #e8e2d7 46%, #a49d90 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__title .dot { color: var(--accent); opacity: .85; }
/* 个别老内核不认 background-clip: text，退回实色，别让标题消失 */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title { color: var(--text); background: none; }
}
.hero__rail {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 10px;
  letter-spacing: .52em;
  color: rgba(255,255,255,.16);
  pointer-events: none;
  user-select: none;
}
.hero__rail--l { left: 38px; }
.hero__rail--r { right: 38px; transform: translateY(-50%) rotate(180deg); }
/* 必须自成一行：display:flex + width:max-content + auto 外边距居中。
   写成 inline-flex 会跟上一行的 slogan 挤在同一条线上（居中的是这一对，
   于是 slogan 偏左、提示跑到右边） */
.hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: max-content;
  margin: 48px auto 0;
  font-size: 9px;
  letter-spacing: .44em;
  text-indent: .44em;
  color: var(--muted-2);
}
.hero__scroll span {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, var(--accent), transparent);
  transform-origin: top;
  animation: hero-line 2.6s var(--ease) infinite;
}
@keyframes hero-line {
  0%   { transform: scaleY(.15); opacity: .15; }
  45%  { transform: scaleY(1);   opacity: 1; }
  100% { transform: scaleY(1);   opacity: 0; }
}

/* ---------- 筛选栏：把「表单感」压下去 ---------- */
.filters { background: rgba(11, 11, 13, .9); }
.filters__in { padding-top: 24px; padding-bottom: 20px; }
.filters__search { margin-bottom: 14px; }
.filters__kw {
  background-color: rgba(255,255,255,.025);
  border-color: transparent;
  border-bottom-color: var(--line-2);
}
.filters__kw:focus {
  background-color: rgba(255,255,255,.045);
  border-color: rgba(200,164,92,.5);
}
.frow {
  grid-template-columns: 72px 1fr;
  gap: 22px;
  padding: 9px 0;
}
.frow + .frow {
  border-top-style: solid;
  border-top-color: rgba(255,255,255,.035);
}
.frow__label {
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--muted-2);
  padding-top: 8px;
}
.pill {
  border-color: transparent;
  background: rgba(255,255,255,.028);
  font-size: 12.5px;
  padding: 7px 16px;
}
.pill:hover {
  color: var(--text);
  border-color: var(--line-2);
  background: rgba(255,255,255,.05);
}
.pill.is-on {
  color: var(--accent);
  border-color: rgba(200,164,92,.5);
  background: rgba(200,164,92,.13);
}

/* ---------- 作品区标题 ---------- */
.gallery { padding: 64px 0 40px; }
.gallery__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 22px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.gallery__kicker {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  letter-spacing: .4em;
  color: var(--accent);
  opacity: .9;
}
.gallery__kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  margin-right: 11px;
  background: var(--accent);
  opacity: .7;
}
.gallery__title {
  font-family: var(--font-display);
  font-size: clamp(27px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: .09em;
  margin: 12px 0 0;
}
.gallery__note {
  margin: 0;
  text-align: right;
  font-size: 11.5px;
  line-height: 2;
  letter-spacing: .1em;
  color: var(--muted-2);
}
/* 改 --rowgap 而不是直接写 gap：.lrow + .lrow 靠它做负边距，
   两处必须同源，否则相邻链接行之间会漏出半截空隙 */
.grid { --rowgap: 38px; column-gap: 24px; }

/* ---------- 作品行：画册目录 ---------- */
.lrow {
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 26px;
  padding: 24px 4px;
  position: relative;
  overflow: hidden;
  transition: background .32s var(--ease), padding-left .32s var(--ease);
}
.lrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity .32s var(--ease);
}
.lrow::after {
  content: attr(data-no);
  position: absolute;
  right: 118px;
  top: 50%;
  transform: translateY(-44%);
  font-family: var(--font-display);
  font-size: clamp(72px, 8vw, 116px);
  line-height: 1;
  color: rgba(255,255,255,.03);
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s var(--ease), transform .6s var(--ease);
}
.lrow__no,
.lrow__main,
.lrow__go { position: relative; z-index: 1; }
.lrow:hover {
  background: linear-gradient(90deg,
              rgba(200,164,92,.055), rgba(255,255,255,.018) 46%, transparent);
  padding-left: 24px;
}
.lrow:hover::before { opacity: 1; }
.lrow:hover::after { opacity: 1; transform: translateY(-50%); }
.lrow__no {
  font-size: 12px;
  letter-spacing: .26em;
  color: rgba(255,255,255,.28);
}
.lrow__main { gap: 5px; }
.lrow__title {
  font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.25;
  letter-spacing: .04em;
  transition: color .3s var(--ease), transform .45s var(--ease);
}
.lrow:hover .lrow__title {
  color: var(--accent);
  transform: translateX(4px);
}
.lrow__meta {
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--muted-2);
}
.lrow__url { max-width: 560px; }
.lrow__go {
  font-size: 10.5px;
  letter-spacing: .2em;
  padding: 6px 16px;
}
.lrow:hover .lrow__go {
  color: #121212;
  background: var(--accent);
  border-color: var(--accent);
}

/* ---------- 图片卡片：museum caption ---------- */
/* 常驻的一道内框，像画册里的卡纸留边；hover 时再亮一档 */
.card__frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255,255,255,.07);
  opacity: 1;
  transition: border-color .45s var(--ease);
  pointer-events: none;
  z-index: 3;
}
.card:hover .card__frame::after { border-color: rgba(200,164,92,.4); }
.card:hover .card__frame {
  box-shadow: 0 26px 64px rgba(0,0,0,.5);
}
.card__no, .card__pano { z-index: 4; }
.card__veil {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(6,6,8,.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 2;
}
.card__cue {
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--accent);
  border: 1px solid rgba(200,164,92,.6);
  background: rgba(10,10,12,.62);
  padding: 10px 20px;
  transform: translateY(8px);
  transition: transform .45s var(--ease);
}
.card:hover .card__cue { transform: none; }
.card__info {
  padding: 16px 2px 2px;
}
.card__title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .05em;
  margin: 0;
  transform: none;
  transition: color .25s var(--ease);
}
.card:hover .card__title { color: var(--accent); transform: none; }
.card__tags {
  margin-top: 8px;
  gap: 6px;
  transform: none;
}
.card:hover .card__tags { transform: none; }
.card .tag {
  font-size: 10px;
  letter-spacing: .08em;
  padding: 2px 8px;
  color: var(--muted-2);
  border-color: var(--line);
}

/* 触屏：不要 hover 位移，也别让遮罩盖住图 */
@media (hover: none) {
  .card__veil { opacity: 0; }
  .lrow:hover { padding-left: 4px; background: transparent; }
  .lrow:hover::before,
  .lrow:hover::after { opacity: 0; }
  .lrow:hover .lrow__title { transform: none; color: inherit; }
  .lrow:hover .lrow__go {
    color: var(--muted-2);
    background: transparent;
    border-color: var(--line-2);
  }
}

/* ---------- 加载更多 / 空状态 ---------- */
.btn-more {
  border-radius: 999px;
  padding: 14px 54px;
  letter-spacing: .28em;
  text-indent: .28em;
}
.btn-more:hover {
  color: #121212;
  background: var(--accent);
  border-color: var(--accent);
}
.empty { padding: 110px 0 130px; }
.empty__mark {
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 400;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.09);
  margin-bottom: 22px;
}

/* ---------- 页脚：落款 ---------- */
.footer {
  margin-top: 84px;
  padding: 0 0 34px;
  overflow: hidden;
}
.footer__mark {
  font-family: var(--font-display);
  font-size: clamp(96px, 19vw, 280px);
  line-height: .88;
  letter-spacing: .08em;
  text-indent: .08em;
  text-align: center;
  white-space: nowrap;
  color: rgba(255,255,255,.022);
  -webkit-text-stroke: 1px rgba(255,255,255,.06);
  padding: 44px 0 30px;
  user-select: none;
  pointer-events: none;
}
.footer__mark span { -webkit-text-stroke-color: rgba(200,164,92,.34); }
.footer__in {
  padding-top: 20px;
  border-top: 1px solid var(--line);
  justify-content: space-between;
  gap: 18px;
}
.footer__meta { color: var(--muted-2); letter-spacing: .14em; }

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
  .hero__rail { display: none; }
}
@media (max-width: 720px) {
  .hero { padding: 136px 0 72px; }
  .hero__eyebrow {
    font-size: 9px;
    letter-spacing: .3em;
    text-indent: .3em;
    gap: 10px;
    margin-bottom: 26px;
  }
  .hero__ghost { font-size: 34vw; top: 50%; }
  .hero__title { font-size: clamp(64px, 20vw, 96px); }
  .hero__scroll { margin-top: 36px; }
  .gallery { padding-top: 48px; }
  .gallery__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 18px;
    margin-bottom: 22px;
  }
  .gallery__note { text-align: left; }
  .grid { --rowgap: 30px; column-gap: 16px; }
  .lrow {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 14px;
    padding: 18px 2px;
  }
  .lrow::after { display: none; }
  .lrow__title { font-size: 19px; }
  .lrow__go { padding: 5px 11px; font-size: 10px; }
  .lrow__url { max-width: 48vw; }
  .card__info { padding-top: 12px; }
  .card__title { font-size: 17px; }
  .footer { margin-top: 60px; }
  .footer__mark { font-size: 30vw; padding: 30px 0 20px; }
  .footer__in { flex-direction: column; align-items: flex-start; gap: 8px; }
}