:root {
  color-scheme: dark;
  --bg: #0b111a;
  --panel: #121d28;
  --ink: #f5f1e9;
  --muted: #c2cbd1;
  --gold: #d2b37a;
  --line: #34414d;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* 首页背景：PA 位于左侧。容器随视口变化，图片按原比例显示，最大不超过原图宽度。 */
.home-page { position: relative; isolation: isolate; min-height: 100vh; }
/* 江城主背景固定在视口，随屏幕尺寸选择并完整显示图片。 */
.home-backdrop { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.home-backdrop > img { display: block; width: min(100%, 1914px); height: auto; aspect-ratio: 1914 / 822; object-fit: contain; object-position: left top; mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.home-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, #0b111a14 14%, #0b111a80 31%, #0b111a99 56%, #0b111a33 100%); }

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #f1d5a0; outline-offset: 4px; }
::selection { color: var(--bg); background: var(--gold); }
.skip-link { position: fixed; z-index: 20; top: -80px; left: 20px; padding: 12px 16px; color: var(--bg); background: #f1d5a0; }
.skip-link:focus { top: 12px; }
.site-header, main, .site-footer { width: min(1320px, calc(100% - 96px)); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 86px; }
.brand { display: inline-flex; align-items: center; gap: 13px; min-height: 48px; font-size: 19px; font-weight: 750; letter-spacing: .08em; white-space: nowrap; }
.brand img { width: 38px; height: 38px; }
.brand small { display: block; margin-top: 2px; color: #b9a784; font-size: 10px; font-weight: 500; letter-spacing: .18em; }
/* 首页主导航：三个独立入口，以功能图形与标题层级区分模块。 */
.site-header .home-nav { display: flex; align-items: stretch; gap: 14px; }
.site-header .home-nav a { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; min-width: 148px; min-height: 72px; padding: 12px 16px; border-bottom: 1px solid #d2b37a40; color: var(--ink); transition: color .18s ease; }
.site-header .home-nav a::before { content: ""; position: absolute; z-index: -1; inset: -4px; background: #0b111acc; mask-image: linear-gradient(90deg, transparent, #000 16%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 20%, #000 82%, transparent); mask-composite: intersect; pointer-events: none; }
.site-header .home-nav a::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--gold); transform: scaleX(.18); transform-origin: left; opacity: .6; transition: transform .18s ease, opacity .18s ease; pointer-events: none; }
.site-header .nav-icon { flex: none; width: 24px; height: 24px; color: #d7b779; }
.site-header .nav-copy { display: grid; min-width: 0; gap: 3px; }
.site-header .nav-title { color: inherit; font-size: 16px; font-weight: 650; line-height: 1.4; letter-spacing: .055em; text-wrap: balance; }
.site-header .nav-summary { color: #b9c6cf; font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: .04em; }
.site-header .home-nav a:hover, .site-header .home-nav a:focus-visible { color: #f1d5a0; }
.site-header .home-nav a:active { color: #fff1d1; }
.site-header .home-nav a:focus-visible { outline: 3px solid #f1d5a0; outline-offset: 3px; }
.site-header .home-nav a:hover::after, .site-header .home-nav a:focus-visible::after { transform: scaleX(1); opacity: 1; }
/* 桌面导航稍向左，让右侧月亮留出空间。 */
@media (min-width: 821px) {
  .site-header .home-nav { margin-right: clamp(24px, 3vw, 48px); }
}
.section-heading { position: relative; isolation: isolate; }

.hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 460px; margin-top: 10px; overflow: hidden; }
/* Fade the illustration edges into the page, while contain preserves the full artwork. */
.hero-media { position: absolute; z-index: -1; top: 50%; right: 0; width: min(60%, 613px); height: auto; aspect-ratio: 4 / 3; transform: translateY(-50%); pointer-events: none; mask-image: linear-gradient(90deg, transparent, #000 22%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 86%, transparent); mask-composite: intersect; }
.hero-art { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right center; }
.hero-copy { --copy-inset: clamp(150px, 17vw, 240px); position: relative; isolation: isolate; width: 66%; padding: 56px 0 64px var(--copy-inset); }
.hero-copy::before { content: ""; position: absolute; z-index: -1; inset: -24px -8px -24px calc(var(--copy-inset) - 40px); background: #0b111acc; mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 8px), transparent), linear-gradient(180deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-composite: intersect; pointer-events: none; }
.eyebrow { display: block; color: var(--gold); font-size: 11px; font-weight: 650; letter-spacing: .16em; line-height: 1.5; }
.hero .eyebrow { display: flex; align-items: center; gap: 12px; }
.hero .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); flex: none; }
.hero .eyebrow span { color: #84929d; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 24px 0 17px; font-size: clamp(50px, 5.7vw, 80px); font-weight: 800; line-height: 1.14; letter-spacing: .045em; text-wrap: balance; }
.hero-subtitle { margin: 0; color: #e5c994; font-size: clamp(20px, 2vw, 27px); font-weight: 500; line-height: 1.6; letter-spacing: .06em; }
.hero-description { margin-top: 32px; }
.hero-tagline { margin: 0 0 9px; color: #f0e9dc; font-size: 16px; font-weight: 550; letter-spacing: .14em; line-height: 1.7; }
.hero-lead { max-width: 440px; margin: 0; color: #d2dade; font-size: 15px; line-height: 1.9; }

.workspace-section { padding-top: 46px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.section-heading .eyebrow { color: #bca87d; font-size: 10px; }
h2 { margin: 7px 0 0; font-size: 30px; font-weight: 700; letter-spacing: .07em; }
.section-heading > p { margin: 0 0 5px; color: #aebcc6; font-size: 13px; }
/* 工作区入口：图片保留完整构图，透明底色与夜景衔接，不再使用整圈边框。 */
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: repeat(2, auto); gap: 20px 24px; }
.workspace-card { position: relative; isolation: isolate; display: block; width: 100%; min-width: 0; overflow: hidden; background: linear-gradient(135deg, #0b111a38, #0b111a0a); cursor: pointer; transition: background-color .2s ease; }
.workspace-card:hover, .workspace-card:focus-visible { background-color: #d2b37a0a; }
.workspace-card:hover .card-action, .workspace-card:focus-visible .card-action { border-color: #d2b37a; color: #f1d5a0; }
.data-card { grid-column: 1; grid-row: 1 / 3; min-height: 580px; --art-ratio: 4 / 3; }
.event-card { grid-column: 2; grid-row: 1; }
.auction-card { grid-column: 2; grid-row: 2; }
.event-card, .auction-card { min-height: 280px; aspect-ratio: 2 / 1; --art-ratio: 2 / 1; }
.card-art { position: absolute; top: 0; right: 0; width: 100%; height: auto; aspect-ratio: var(--art-ratio); pointer-events: none; }
.card-art > img { display: block; width: 100%; height: 100%; object-fit: contain; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 78%, transparent); mask-composite: intersect; transition: filter .2s ease; }
.workspace-card:hover .card-art > img, .workspace-card:focus-visible .card-art > img { filter: brightness(1.06); }
.card-content { position: relative; z-index: 1; isolation: isolate; display: flex; flex-direction: column; justify-content: end; width: 66%; min-height: inherit; height: 100%; padding: 28px; }
.card-content::before { content: ""; position: absolute; z-index: -1; inset: 0 -12px 0 0; background: linear-gradient(0deg, #0b111ae6, #0b111abf 62%, #0b111a00); mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 24px), transparent); pointer-events: none; }
.data-card .card-content { width: 72%; padding: 36px 32px; }
/* 主入口只保护下方文字，保留上半幅英雄与元素球的亮度。 */
.data-card .card-content::before { top: auto; bottom: 0; height: 330px; max-height: 100%; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-title h3 { margin: 0; font-size: 25px; font-weight: 700; line-height: 1.35; letter-spacing: .06em; }
.data-card .card-title h3 { font-size: 36px; }
.card-content > p { margin: 12px 0 16px; color: #d1dbe0; font-size: 14px; line-height: 1.8; }
.data-card .card-content > p { margin: 16px 0 20px; font-size: 16px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; color: #c6d1d7; list-style: none; }
.tags li { font-size: 12px; line-height: 1.5; white-space: nowrap; }
.tags li + li::before { content: "·"; padding-right: 10px; color: #ae9b75; }
.card-action { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-top: 18px; border-top: 1px solid #d2b37a40; padding-top: 10px; color: #e7c892; font-size: 13px; font-weight: 650; }
.data-card .card-action { margin-top: 24px; }
.card-action span { font-size: 19px; transition: transform .2s ease; }
.workspace-card:hover .card-action span, .workspace-card:focus-visible .card-action span { transform: translateX(4px); }

.workspace-note { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 28px; padding: 18px 0 18px 18px; }
.workspace-note::before { content: ""; position: absolute; top: 21px; left: 0; width: 2px; height: 26px; background: linear-gradient(#d2b37a, #d2b37a22); }
.workspace-note strong { color: #dde4e8; font-size: 14px; font-weight: 650; }
.workspace-note p { margin: 6px 0 0; color: #b5c3cb; font-size: 13px; line-height: 1.7; }
.site-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin-top: 40px; border-top: 1px solid #d2b37a2e; padding: 23px 0 30px; color: #aebbc4; font-size: 12px; line-height: 1.7; }
.site-footer > span:first-child { color: #d2dbe0; }
.site-footer .icp-link { color: #b8c7d0; line-height: 1.8; }
.site-footer .icp-link:hover { color: #f1d5a0; text-decoration: underline; }

@media (max-width: 1100px) {
  .site-header, main, .site-footer { width: calc(100% - 56px); }
  .hero-copy { width: 68%; }
  .workspace-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .data-card .card-content { width: 86%; }
  .event-card .card-content { width: 76%; }
  .auction-card .card-content { width: 76%; }
}
@media (max-width: 820px) {
  .site-header, main, .site-footer { width: calc(100% - 32px); }
  .site-header { flex-wrap: wrap; gap: 10px; padding: 17px 0 10px; }
  .brand { font-size: 17px; }
  .brand img { width: 34px; height: 34px; }
  .brand small { font-size: 9px; }
  .site-header .home-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 8px; }
  .site-header .home-nav a { flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 84px; padding: 8px 4px; text-align: center; }
  .site-header .nav-icon { width: 20px; height: 20px; }
  .site-header .nav-title { font-size: 14px; letter-spacing: .035em; }
  .site-header .nav-summary { font-size: 12px; letter-spacing: 0; }
  .home-backdrop > img { position: absolute; bottom: 0; left: 0; width: min(88%, 941px, calc(100svh * 941 / 1672)); aspect-ratio: 941 / 1672; mask-image: linear-gradient(180deg, transparent, #000 10%, #000 86%, transparent); }
  .home-backdrop::after { background: linear-gradient(90deg, transparent 0%, #0b111a1a 22%, #0b111a66 42%, #0b111a99 75%); }
  .hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; margin-top: 4px; overflow: visible; }
  .hero-media { position: relative; top: auto; right: auto; align-self: center; width: min(100%, 613px); height: auto; aspect-ratio: 4 / 3; transform: none; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 65%, transparent); mask-composite: intersect; }
  .hero-art { position: absolute; inset: 0; object-position: center top; }
  .hero-copy { --copy-inset: clamp(90px, 30vw, 160px); position: relative; width: 100%; margin-top: -100px; padding: 0 8px 20px var(--copy-inset); }
  .eyebrow { font-size: 10px; }
  .hero .eyebrow { gap: 10px; }
  .hero .eyebrow::before { width: 20px; }
  h1 { margin: 19px 0 12px; font-size: clamp(42px, 8vw, 62px); }
  .hero-subtitle { font-size: clamp(17px, 3.4vw, 22px); letter-spacing: .035em; }
  .hero-description { margin-top: 24px; }
  .hero-tagline { font-size: 16px; }
  .hero-lead { font-size: 15px; line-height: 1.85; }
  .workspace-section { padding-top: 36px; }
  .section-heading { align-items: start; margin-bottom: 18px; }
  h2 { font-size: 26px; }
  .section-heading > p { max-width: 120px; padding-top: 19px; font-size: 11px; line-height: 1.5; text-align: right; }
  .workspace-grid { display: flex; flex-direction: column; gap: 24px; }
  .workspace-card, .data-card, .event-card, .auction-card { display: flex; flex-direction: column; min-height: 0; aspect-ratio: auto; }
  .card-art { position: relative; top: auto; right: auto; height: auto; flex: none; }
  .card-art > img { position: absolute; inset: 0; }
  .card-content, .data-card .card-content, .event-card .card-content, .auction-card .card-content { width: 100%; min-height: 0; height: auto; margin: -22px 0 0; padding: 10px 20px 24px; }
  .card-content::before, .data-card .card-content::before { inset: -16px 0 0; height: auto; max-height: none; background: #0b111ab3; mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent), linear-gradient(180deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-composite: intersect; }
  .card-title h3, .data-card .card-title h3 { font-size: 28px; }
  .card-content > p, .data-card .card-content > p { margin: 12px 0 16px; font-size: 16px; }
  .tags li { font-size: 12px; }
  .card-action, .data-card .card-action { min-height: 44px; margin-top: 18px; font-size: 14px; }
  .workspace-note { margin-top: 18px; padding: 17px; }
  .workspace-note p { font-size: 13px; }
  .site-footer { align-items: start; flex-direction: column; gap: 8px; margin-top: 31px; padding: 21px 0 28px; font-size: 12px; }
}
@media (max-width: 600px) {
  .hero-media { width: min(100%, 368px); aspect-ratio: 1122 / 1402; }
  .hero-copy { margin-top: -88px; }
}
@media (max-width: 390px) {
  .site-header, main, .site-footer { width: calc(100% - 28px); }
  .hero-copy { padding-right: 4px; }
  h1 { font-size: clamp(34px, 10vw, 39px); }
  .hero-subtitle { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}