/* YUEIN FOREST AUDIO — 案例展示 · 作品集（2026-10-19）
 * 精选项目整幅大图 → 场景筛选 → 编辑式项目网格 → 项目详情（数据 / 系统配置 / 影像 / 现场图片）
 * 没有已发布案例时：首批案例整理中 + 五个服务场景（不虚构项目）。 */

.cx { position: relative; }
.cx-root:focus { outline: none; }

/* ---------- 页头 ---------- */
.cx-intro {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 48px; align-items: end;
  padding-top: calc(var(--nav-h) + clamp(40px, 8vh, 100px)); padding-bottom: clamp(44px, 7vh, 84px);
}
.cx-intro[hidden] { display: none; }
.cx-intro .display { margin-top: 22px; }
.cx-intro .lede { margin-top: 22px; }
.cx-stats { justify-self: end; display: flex; }
.cx-stats[hidden] { display: none; }
.cx-stats div { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.cx-stats div + div { margin-left: clamp(22px, 2.6vw, 44px); padding-left: clamp(22px, 2.6vw, 44px); border-left: 1px solid rgb(var(--fg) / .1); }
.cx-stats dd { order: -1; font: 300 clamp(46px, 4.8vw, 76px)/1 var(--serif); letter-spacing: .02em; color: rgb(var(--gold)); font-variant-numeric: tabular-nums; }
.cx-stats dt { font: 500 10px/1 var(--sans); letter-spacing: .3em; color: rgb(var(--fg) / .5); white-space: nowrap; }

/* ---------- 首批案例整理中 ---------- */
.cx-soon { position: relative; margin: 0 var(--gx); min-height: clamp(400px, 62vh, 660px); display: grid; align-items: end; border-radius: 4px; overflow: hidden; isolation: isolate; background: #0b0c0d; }
.cx-soon-media { position: absolute; inset: 0; z-index: -2; }
.cx-soon-media img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 38%; filter: saturate(.7) brightness(.78); transform: scale(1.06); transition: transform 9s var(--ease); }
.cx-soon.is-in .cx-soon-media img { transform: none; }
.cx-soon::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(7 7 8 / .94) 0%, rgb(7 7 8 / .62) 42%, rgb(7 7 8 / .08) 78%), linear-gradient(0deg, rgb(7 7 8 / .7), transparent 46%); }
.cx-soon-copy { max-width: 660px; padding: clamp(30px, 5.4vw, 84px); }
.cx-soon-copy h2 { margin-top: 22px; font: 300 clamp(32px, 3.6vw, 56px)/1.28 var(--serif); letter-spacing: .08em; }
.cx-soon-copy p:last-child { margin-top: 20px; max-width: 30em; font-size: 14px; line-height: 1.95; letter-spacing: .08em; color: rgb(var(--fg) / .66); }

/* ---------- 服务场景 ---------- */
.cx-scenes { padding-top: clamp(84px, 13vh, 150px); }
.cx-scene-list { border-top: 1px solid rgb(var(--fg) / .12); }
.cx-scene-list > li {
  position: relative; display: grid; grid-template-columns: 72px minmax(210px, .9fr) minmax(0, 1.35fr) minmax(200px, .75fr);
  gap: 28px; align-items: baseline; padding: 34px 0; border-bottom: 1px solid rgb(var(--fg) / .1);
}
.cx-scene-list > li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, rgb(var(--gold)), rgb(var(--gold) / 0)); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); }
.cx-scene-list > li:hover::after { transform: none; }
.cx-scene-list .no { font: 500 11px var(--sans); letter-spacing: .18em; color: rgb(var(--gold)); font-variant-numeric: tabular-nums; }
.cx-scene-name h3 { font: 300 clamp(22px, 2vw, 30px)/1.25 var(--serif); letter-spacing: .12em; transition: transform .7s var(--ease); }
.cx-scene-list > li:hover .cx-scene-name h3 { transform: translateX(6px); }
.cx-scene-name span { display: block; margin-top: 10px; font: 500 9.5px var(--sans); letter-spacing: .28em; color: rgb(var(--fg) / .4); }
.cx-scene-list p { font-size: 13.5px; line-height: 1.95; letter-spacing: .06em; color: rgb(var(--fg) / .64); }
.cx-scene-list ul { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.cx-scene-list ul li { padding: 6px 12px; border: 1px solid rgb(var(--fg) / .12); border-radius: 999px; font-size: 12px; letter-spacing: .1em; color: rgb(var(--fg) / .72); white-space: nowrap; }

/* ---------- 精选项目 ---------- */
.cx-feature { position: relative; margin: 0 var(--gx); height: clamp(480px, 80vh, 860px); border-radius: 4px; overflow: hidden; isolation: isolate; background: #0b0c0d; }
.cx-feature-card {
  position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px;
  padding: clamp(28px, 4.6vw, 76px); opacity: 0; visibility: hidden; transition: opacity 1.2s var(--ease), visibility 0s 1.2s;
}
.cx-feature-card.is-on { opacity: 1; visibility: visible; transition: opacity 1.2s var(--ease); }
.cx-feature-media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.cx-feature-media img, .cx-feature-media video, .cx-feature-media .cms-placeholder { width: 100%; height: 100%; object-fit: cover; }
.cx-feature-media img, .cx-feature-media video { transform: scale(1.07); transition: transform 8s cubic-bezier(.2, .6, .3, 1); }
.cx-feature-card.is-on .cx-feature-media img, .cx-feature-card.is-on .cx-feature-media video { transform: none; }
.cx-feature-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(7 7 8 / .94) 0%, rgb(7 7 8 / .5) 36%, rgb(7 7 8 / 0) 68%), linear-gradient(90deg, rgb(7 7 8 / .62), rgb(7 7 8 / 0) 62%); }
.cx-feature-copy { max-width: 780px; }
.cx-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 500 10px/1.4 var(--sans); letter-spacing: .3em; color: rgb(var(--gold)); }
.cx-kicker span + span { padding-left: 14px; border-left: 1px solid rgb(var(--fg) / .3); color: rgb(var(--fg) / .78); letter-spacing: .24em; }
.cx-feature-en { margin-top: 24px; font: 500 11px/1.5 var(--sans); letter-spacing: .34em; color: rgb(var(--fg) / .55); }
.cx-feature-title { margin-top: 12px; max-width: 15em; font: 300 clamp(32px, 4.2vw, 66px)/1.18 var(--serif); letter-spacing: .06em; }
.cx-meta { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; margin-top: 20px; font-size: 13px; line-height: 1.6; letter-spacing: .12em; color: rgb(var(--fg) / .72); }
.cx-meta i { display: inline-block; width: 1px; height: 10px; margin: 0 14px; background: rgb(var(--fg) / .3); }
.cx-feature-sum { margin-top: 16px; max-width: 34em; font-size: 14px; line-height: 1.9; letter-spacing: .06em; color: rgb(var(--fg) / .66); }
.cx-more { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; padding-bottom: 7px; border-bottom: 1px solid rgb(var(--gold) / .6); font-size: 12.5px; letter-spacing: .26em; color: rgb(var(--fg)); }
.cx-more svg { width: 14px; height: 14px; transition: transform .5s var(--ease); }
.cx-feature-card:hover .cx-more svg { transform: translate(3px, -3px); }
.cx-feature-facts { display: grid; gap: 26px; justify-items: end; text-align: right; padding-bottom: 8px; }
.cx-feature-facts div { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cx-feature-facts dd { order: -1; font: 300 clamp(26px, 2.6vw, 42px)/1 var(--serif); letter-spacing: .02em; }
.cx-feature-facts dt { font: 500 9.5px/1 var(--sans); letter-spacing: .28em; color: rgb(var(--fg) / .52); }
.cx-feature-dots { position: absolute; z-index: 2; right: clamp(28px, 4.6vw, 76px); top: clamp(24px, 4vw, 56px); display: flex; gap: 4px; }
.cx-feature-dots button { display: grid; align-items: center; width: 40px; height: 24px; }
.cx-feature-dots i { position: relative; display: block; height: 1px; background: rgb(var(--fg) / .3); overflow: hidden; }
.cx-feature-dots i::after { content: ""; position: absolute; inset: 0; background: rgb(var(--gold)); transform: scaleX(0); transform-origin: left; }
.cx-feature-dots [aria-selected="true"] i::after { animation: cxDot 7s linear both; }
.cx-feature:hover .cx-feature-dots [aria-selected="true"] i::after { animation-play-state: paused; }
@keyframes cxDot { to { transform: none; } }

/* ---------- 项目网格 ---------- */
.cx-index { padding-top: clamp(84px, 13vh, 150px); }
.cx-index-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(36px, 5vh, 56px); padding-bottom: 18px; border-bottom: 1px solid rgb(var(--fg) / .12); }
.cx-filter { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.cx-filter button { position: relative; padding: 6px 0; font-size: 13.5px; letter-spacing: .14em; color: rgb(var(--fg) / .5); transition: color .35s; white-space: nowrap; }
.cx-filter button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -19px; height: 1px; background: rgb(var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.cx-filter button:hover { color: rgb(var(--fg) / .85); }
.cx-filter [aria-selected="true"] { color: rgb(var(--fg)); }
.cx-filter [aria-selected="true"]::after { transform: none; }
.cx-filter sup { margin-left: 5px; font: 500 9px var(--sans); letter-spacing: .06em; color: rgb(var(--fg) / .35); }
.cx-filter [aria-selected="true"] sup { color: rgb(var(--gold)); }
.cx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 8vh, 96px) clamp(20px, 2.4vw, 40px); transition: opacity .3s var(--ease); }
.cx-grid.is-swap { opacity: 0; transition: none; }
.cx-none { grid-column: 1 / -1; padding: 40px 0; font-size: 13.5px; letter-spacing: .1em; color: rgb(var(--fg) / .5); }

.cx-card { display: grid; gap: 24px; align-content: start; }
.cx-card--wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); align-items: end; gap: clamp(24px, 3.4vw, 64px); }
.cx-card-media { position: relative; margin: 0; overflow: hidden; border-radius: 3px; aspect-ratio: 4 / 3; background: #0d0e0f; isolation: isolate; }
.cx-card--wide .cx-card-media { aspect-ratio: 16 / 9; }
.cx-card-media img, .cx-card-media video, .cx-card-media .cms-placeholder { width: 100%; height: 100%; object-fit: cover; }
.cx-card-media img, .cx-card-media video { filter: saturate(.88) brightness(.9); transition: transform 1.6s var(--ease), filter .9s var(--ease); }
.cx-card-media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(var(--gold) / 0); transition: box-shadow .7s var(--ease); pointer-events: none; }
.cx-card:hover .cx-card-media img, .cx-card:hover .cx-card-media video { transform: scale(1.045); filter: none; }
.cx-card:hover .cx-card-media::after, .cx-card:focus-visible .cx-card-media::after { box-shadow: inset 0 0 0 1px rgb(var(--gold) / .55); }
.cx-badge { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 999px; background: rgb(7 7 8 / .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 10.5px var(--sans); letter-spacing: .2em; color: rgb(var(--fg)); }
.cx-badge i { width: 0; height: 0; border-left: 6px solid rgb(var(--gold)); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.cx-card-body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: start; }
.cx-card-no { padding-top: 3px; font: 500 10.5px var(--sans); letter-spacing: .16em; color: rgb(var(--gold)); font-variant-numeric: tabular-nums; }
.cx-card-kicker { font: 500 10px/1.5 var(--sans); letter-spacing: .26em; color: rgb(var(--fg) / .5); }
.cx-card-text h3 { margin-top: 10px; font: 300 clamp(22px, 1.9vw, 30px)/1.32 var(--serif); letter-spacing: .06em; transition: color .4s; }
.cx-card--wide .cx-card-text h3 { font-size: clamp(26px, 2.7vw, 42px); }
.cx-card:hover h3 { color: rgb(255 248 232); }
.cx-card-sum { margin-top: 12px; font-size: 13px; line-height: 1.85; letter-spacing: .05em; color: rgb(var(--fg) / .58); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-card--wide .cx-card-sum { -webkit-line-clamp: 4; }
.cx-card-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 12px; letter-spacing: .22em; color: rgb(var(--gold) / .85); }
.cx-card-go svg { width: 12px; height: 12px; transition: transform .5s var(--ease); }
.cx-card:hover .cx-card-go svg { transform: translate(3px, -3px); }
.cx-card-year { padding-top: 1px; font: 300 15px/1 var(--serif); letter-spacing: .08em; color: rgb(var(--fg) / .42); font-variant-numeric: tabular-nums; }
.cx-noimg { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(60% 60% at 50% 45%, rgb(var(--gold) / .1), transparent 70%), #0d0e0f; }
.cx-noimg span { font: 500 9px var(--sans); letter-spacing: .4em; color: rgb(var(--gold) / .45); }

/* ---------- 项目详情 ---------- */
.is-case-detail .nav:not(.is-scrolled) { background: linear-gradient(180deg, rgb(7 7 8 / .72), rgb(7 7 8 / 0)); }
.cx-detail { position: relative; }
.cx-d-hero { position: relative; display: grid; align-items: end; min-height: min(94svh, 1000px); overflow: hidden; isolation: isolate; }
.cx-d-hero.is-plain { min-height: 0; }
.cx-d-hero.is-plain .cx-d-media { display: none; }
.cx-d-media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.cx-d-media img, .cx-d-media video, .cx-d-media .cms-placeholder { width: 100%; height: 100%; object-fit: cover; }
.cx-d-media img, .cx-d-media video { animation: cxSettle 9s cubic-bezier(.2, .6, .3, 1) both; }
@keyframes cxSettle { from { transform: scale(1.08); } to { transform: none; } }
.cx-d-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--bg) 0%, rgb(7 7 8 / .6) 30%, rgb(7 7 8 / .05) 62%, rgb(7 7 8 / .35) 100%); }
.cx-d-head { width: 100%; padding-top: calc(var(--nav-h) + 48px); padding-bottom: clamp(44px, 8vh, 100px); }
.cx-crumb { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; letter-spacing: .16em; color: rgb(var(--fg) / .62); }
.cx-crumb a { transition: color .3s; }
.cx-crumb a:hover { color: rgb(var(--gold)); }
.cx-d-en { margin-top: 30px; font: 500 11px/1.5 var(--sans); letter-spacing: .36em; color: rgb(var(--gold)); }
.cx-d-title { margin-top: 14px; max-width: 14em; font: 300 clamp(36px, 5.4vw, 88px)/1.12 var(--serif); letter-spacing: .05em; }
.cx-d-title:focus { outline: none; }
.cx-d-hero .cx-meta { margin-top: 24px; font-size: 13.5px; }

.cx-d-facts { padding-top: clamp(40px, 6vh, 72px); }
.cx-d-facts dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border-top: 1px solid rgb(var(--fg) / .14); }
.cx-d-facts div { display: flex; flex-direction: column; gap: 12px; padding: 30px 24px 0 0; }
.cx-d-facts div + div { padding-left: 24px; border-left: 1px solid rgb(var(--fg) / .08); }
.cx-d-facts dd { order: -1; font: 300 clamp(34px, 3.8vw, 60px)/1 var(--serif); letter-spacing: .02em; }
.cx-d-facts dt { font: 500 10px/1.4 var(--sans); letter-spacing: .28em; color: rgb(var(--gold)); }

.cx-d-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .8fr); gap: clamp(40px, 6vw, 112px); align-items: start; padding-top: clamp(64px, 11vh, 130px); padding-bottom: clamp(64px, 11vh, 130px); }
.cx-d-lead { margin-top: 24px; max-width: 30em; font: 300 clamp(20px, 1.8vw, 27px)/1.75 var(--serif); letter-spacing: .06em; color: rgb(var(--fg) / .94); white-space: pre-line; }
.cx-d-rich { max-width: 40em; margin: 34px 0 0; }
.cx-d-side { position: sticky; top: calc(var(--nav-h) + 28px); display: grid; gap: 34px; justify-items: start; }
.cx-d-info { display: grid; width: 100%; border-top: 1px solid rgb(var(--fg) / .14); }
.cx-d-info div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; padding: 15px 0; border-bottom: 1px solid rgb(var(--fg) / .08); font-size: 13px; line-height: 1.7; letter-spacing: .08em; }
.cx-d-info dt { color: rgb(var(--fg) / .45); }
.cx-d-info dd { color: rgb(var(--fg) / .9); overflow-wrap: anywhere; }
.cx-d-system { width: 100%; }
.cx-d-system ol { margin-top: 18px; border-top: 1px solid rgb(var(--fg) / .14); }
.cx-d-system li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid rgb(var(--fg) / .08); font-size: 13.5px; line-height: 1.6; letter-spacing: .06em; color: rgb(var(--fg) / .86); }
.cx-d-system .no { font: 500 10px var(--sans); letter-spacing: .1em; color: rgb(var(--gold) / .8); }
.cx-d-system a { display: inline-flex; align-items: baseline; gap: 6px; transition: color .3s; }
.cx-d-system a b { font-weight: 500; color: rgb(var(--gold)); }
.cx-d-system a svg { width: 10px; height: 10px; opacity: .55; transition: transform .45s var(--ease), opacity .3s; }
.cx-d-system a:hover { color: rgb(var(--fg)); }
.cx-d-system a:hover svg { opacity: 1; transform: translate(2px, -2px); }
.cx-d-system em { font-style: normal; font-variant-numeric: tabular-nums; color: rgb(var(--fg) / .55); white-space: nowrap; }

.cx-d-film { padding-bottom: clamp(64px, 11vh, 130px); }
.cx-d-film video { display: block; width: 100%; max-height: 86vh; border-radius: 3px; background: #000; }
.cx-d-gallery { padding-bottom: clamp(64px, 11vh, 130px); }
.cx-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.cx-shot { position: relative; display: block; overflow: hidden; border-radius: 3px; aspect-ratio: 4 / 3; background: #0d0e0f; cursor: zoom-in; isolation: isolate; }
.cx-shot--full { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.cx-shot img, .cx-shot .cms-placeholder { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.cx-shot:hover img { transform: scale(1.03); }
.cx-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(7 7 8 / .7), transparent 40%); opacity: 0; transition: opacity .5s var(--ease); }
.cx-shot-cap { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 14px; font-size: 12.5px; line-height: 1.6; letter-spacing: .08em; text-align: left; color: rgb(var(--fg) / .92); opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.cx-shot:hover::after, .cx-shot:focus-visible::after, .cx-shot:hover .cx-shot-cap, .cx-shot:focus-visible .cx-shot-cap { opacity: 1; transform: none; }

.cx-d-pager { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgb(var(--fg) / .12); }
.cx-pager { position: relative; display: grid; gap: 12px; align-content: center; min-height: 220px; padding: 48px 0; overflow: hidden; isolation: isolate; }
.cx-pager.next { justify-items: end; text-align: right; padding-left: 24px; }
.cx-pager.prev { padding-right: 24px; }
.cx-pager figure { position: absolute; inset: 0; z-index: -1; margin: 0; opacity: 0; transition: opacity .9s var(--ease); }
.cx-pager figure img, .cx-pager figure video { width: 100%; height: 100%; object-fit: cover; filter: brightness(.45) saturate(.8); }
.cx-pager figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgb(7 7 8 / .2), rgb(7 7 8 / .95)); }
.cx-pager:hover figure { opacity: 1; }
.cx-pager-dir { font: 500 10.5px var(--sans); letter-spacing: .28em; color: rgb(var(--gold)); }
.cx-pager strong { max-width: 18em; font: 300 clamp(22px, 2.3vw, 36px)/1.3 var(--serif); letter-spacing: .06em; }
.cx-pager-meta { font-size: 12px; letter-spacing: .16em; color: rgb(var(--fg) / .5); }
.cx-missing { padding-top: calc(var(--nav-h) + 60px); padding-bottom: 60px; display: grid; gap: 24px; justify-items: center; }

/* ---------- 行动号召 ---------- */
.cx-cta { padding-top: clamp(96px, 15vh, 180px); padding-bottom: clamp(96px, 15vh, 180px); }
.cx-cta-in { display: grid; justify-items: center; text-align: center; padding: clamp(52px, 7vw, 104px) 24px; border-top: 1px solid rgb(var(--fg) / .1); border-bottom: 1px solid rgb(var(--fg) / .1); background: radial-gradient(55% 80% at 50% 50%, rgb(var(--gold) / .075), transparent 72%); }
.cx-cta h2 { margin-top: 24px; font: 300 clamp(30px, 3.8vw, 58px)/1.3 var(--serif); letter-spacing: .1em; }
.cx-cta p:not(.eyebrow) { margin-top: 20px; max-width: 32em; font-size: 14px; line-height: 1.95; letter-spacing: .08em; color: rgb(var(--fg) / .6); }
.cx-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }

/* ---------- 大图浏览 ---------- */
.cx-lightbox { position: fixed; inset: 0; z-index: 90; background: rgb(4 4 5 / .97); opacity: 0; transition: opacity .38s var(--ease); touch-action: pan-y; }
.cx-lightbox[hidden] { display: none; }
.cx-lightbox.is-open { opacity: 1; }
.cx-lb-stage { display: grid; place-items: center; width: 100%; height: 100%; padding: 72px clamp(16px, 7vw, 110px) 48px; }
.cx-lb-stage figure { display: grid; gap: 16px; justify-items: center; margin: 0; }
.cx-lb-stage img { max-width: 100%; max-height: calc(100svh - 170px); object-fit: contain; border-radius: 2px; }
.cx-lb-stage figcaption { max-width: 46em; font-size: 13px; line-height: 1.7; letter-spacing: .08em; text-align: center; color: rgb(var(--fg) / .72); }
.cx-lb-count { position: absolute; left: 24px; top: 26px; font: 500 11px var(--sans); letter-spacing: .2em; color: rgb(var(--fg) / .6); font-variant-numeric: tabular-nums; }
.cx-lb-btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgb(var(--fg) / .18); background: rgb(7 7 8 / .45); color: rgb(var(--fg) / .82); transition: border-color .3s, color .3s; }
.cx-lb-btn:hover { border-color: rgb(var(--gold)); color: rgb(var(--fg)); }
.cx-lb-btn[hidden] { display: none; }
.cx-lb-btn svg { width: 16px; height: 16px; }
.cx-lb-close { right: 18px; top: 14px; }
.cx-lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.cx-lb-next { right: 18px; top: 50%; transform: translateY(-50%); }

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
  .cx-scene-list > li { grid-template-columns: 56px minmax(180px, .9fr) minmax(0, 1.4fr); }
  .cx-scene-list ul { grid-column: 3; justify-content: flex-start; }
}
@media (max-width: 960px) {
  .cx-intro { grid-template-columns: 1fr; gap: 36px; }
  .cx-stats { justify-self: start; }
  .cx-stats div { align-items: flex-start; }
  .cx-scene-list > li { grid-template-columns: 44px minmax(0, 1fr); gap: 14px 16px; padding: 28px 0; }
  .cx-scene-list p, .cx-scene-list ul { grid-column: 2; }
  .cx-feature-card { grid-template-columns: 1fr; gap: 28px; }
  .cx-feature-facts { grid-auto-flow: column; justify-content: start; justify-items: start; text-align: left; gap: 32px; }
  .cx-feature-facts div { align-items: flex-start; }
  .cx-card--wide { grid-template-columns: 1fr; }
  .cx-d-body { grid-template-columns: 1fr; }
  .cx-d-side { position: static; }
}
@media (max-width: 640px) {
  .cx-soon, .cx-feature { margin: 0; border-radius: 0; }
  .cx-soon { min-height: 520px; }
  .cx-soon::after { background: linear-gradient(0deg, rgb(7 7 8 / .96) 0%, rgb(7 7 8 / .7) 48%, rgb(7 7 8 / .15) 100%); }
  .cx-feature { height: max(560px, 84svh); }
  .cx-feature-title { font-size: clamp(28px, 8.4vw, 40px); }
  .cx-feature-sum { display: none; }
  .cx-feature-facts { gap: 22px; }
  .cx-feature-facts dd { font-size: 24px; }
  .cx-index-head { flex-direction: column; align-items: flex-start; }
  .cx-filter { flex-wrap: nowrap; width: calc(100% + 2 * var(--gx)); margin: 0 calc(-1 * var(--gx)); padding: 0 var(--gx); overflow-x: auto; scrollbar-width: none; }
  .cx-filter::-webkit-scrollbar { display: none; }
  .cx-filter button::after { bottom: -1px; }
  .cx-grid { grid-template-columns: 1fr; }
  .cx-card-body { grid-template-columns: auto minmax(0, 1fr); }
  .cx-card-year { display: none; }
  .cx-d-hero { min-height: 78svh; }
  .cx-d-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-d-facts div, .cx-d-facts div + div { padding: 24px 14px 22px 0; border-left: 0; }
  .cx-d-facts div:nth-child(even) { padding-left: 18px; border-left: 1px solid rgb(var(--fg) / .08); }
  .cx-d-facts div:nth-child(n+3) { border-top: 1px solid rgb(var(--fg) / .08); }
  .cx-d-facts dd { font-size: clamp(30px, 9vw, 40px); }
  .cx-meta { flex-direction: column; align-items: flex-start; row-gap: 4px; }
  .cx-meta i { display: none; }
  .cx-mosaic { grid-template-columns: 1fr; }
  .cx-shot--full { aspect-ratio: 4 / 3; }
  .cx-shot-cap { opacity: 1; transform: none; }
  .cx-shot::after { opacity: 1; }
  .cx-d-pager { grid-template-columns: 1fr; }
  .cx-pager.prev { display: none; }
  .cx-pager.next { padding-left: 0; }
  .cx-lb-prev, .cx-lb-next { top: auto; bottom: 16px; transform: none; }
}