/* ============================================================
   窗含西岭 · 深夜终端
   暖黑底 · 琥珀金 · 超大字号 · 等宽小标 · 深夜写代码的氛围
   ============================================================ */

:root {
  --bg:       #171412;
  --bg2:      #201c18;
  --ink:      #efe6d8;
  --ink-2:    #9a8f80;
  --line:        rgba(239,230,216,.12);
  --line-strong: rgba(239,230,216,.24);
  --accent:   #e8a54a;
  --accent-hi:#ffd489;
  --accent-lo:#b8772b;

  /* 拍卖行卡片（还原 portal 原版） */
  --card-bg0:#0c0c1c;
  --card-bg1:#141430;
  --card-gold:#c9a84c;
  --card-gold-hi:#e8cd7d;
  --card-gold-lo:#a8883a;
  --card-gold-dim:#8a7440;
  --card-blue:#0070dd;

  --serif: "Kaiti SC", "KaiTi", "STKaiti", "Songti SC", "Noto Serif SC", serif;
  --mono:  ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  --sans:  "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: radial-gradient(120% 100% at 50% 0%, var(--bg2) 0%, var(--bg) 62%);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.7;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

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

.page {
  max-width: 880px;
  margin: 0 auto;
  padding: 5rem 1.5rem 4rem;
}

/* ------------------------------ 顶部行 ------------------------------ */
.lede {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .05em;
  color: var(--accent);
  opacity: .9;
}
.lede::before { content: "> "; }

/* ------------------------------ 主标题 ------------------------------ */
.hero { margin-top: 2.4rem; }
.title {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  font-size: clamp(2.6rem, 9vw, 5.4rem);
  letter-spacing: .02em;
}
.title em { font-style: normal; color: var(--accent); }
.sub {
  margin-top: 1.4rem;
  color: var(--ink-2);
  font-size: 1rem;
  max-width: 34ch;
}

/* ------------------------------ 分隔线 ------------------------------ */
.rule {
  height: 1px;
  background: var(--line);
  margin: 3rem 0;
  position: relative;
}
.rule::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 72px; height: 1px;
  background: var(--accent);
}

/* ------------------------------ 作品区 ------------------------------ */
.sec-label {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .3em;
  color: var(--ink-2);
  text-transform: uppercase;
}

/* 拍卖行 · 还原 portal 原版深藏青卡片 */
.auction {
  margin-top: 1.6rem;
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(201,168,76,.10), transparent 60%),
    radial-gradient(900px 600px at 8% 110%, rgba(0,112,221,.10), transparent 55%),
    linear-gradient(180deg, var(--card-bg1), var(--card-bg0) 70%);
  border: 1px solid rgba(201,168,76,.20);
  border-radius: 18px;
  padding: 2.8rem 2rem 2.4rem;
  text-align: center;
  color: #d0ccc0;
  position: relative;
  overflow: hidden;
}
.auction::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(50% 42% at 50% 0%, rgba(201,168,76,.14), transparent 70%);
  pointer-events: none;
}
.emblem {
  width: 92px; height: 92px;
  margin: 0 auto;
  display: grid; place-items: center;
  font-size: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #f4e0a0, var(--card-gold) 55%, #7a6430 100%);
  box-shadow:
    0 0 0 1px rgba(201,168,76,.35),
    0 0 44px rgba(201,168,76,.28),
    inset 0 2px 6px rgba(255,255,255,.35),
    inset 0 -4px 10px rgba(0,0,0,.35);
  animation: emblem-float 5.5s ease-in-out infinite;
}
@keyframes emblem-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.auction .eyebrow {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .34em;
  color: var(--card-gold);
  text-transform: uppercase;
}
.auction-title {
  margin-top: 14px;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(34px, 7vw, 52px);
  letter-spacing: .06em;
  line-height: 1.1;
  color: #ffffff;
}
.auction-title .gold { color: var(--card-gold); }
.auction-sub {
  margin-top: 14px;
  font-size: 15px;
  color: #8a88a0;
  letter-spacing: .04em;
}
.auction-sub .sep { color: var(--card-gold-dim); padding: 0 8px; }
.cta {
  margin-top: 30px;
  display: inline-block;
  padding: 15px 44px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #17120a;
  background: linear-gradient(180deg, var(--card-gold-hi), var(--card-gold) 55%, var(--card-gold-lo));
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(201,168,76,.28), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .16s ease, box-shadow .16s ease;
}
.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 42px rgba(201,168,76,.38), inset 0 1px 0 rgba(255,255,255,.5);
}
.cta:focus-visible { outline: 2px solid var(--card-gold); outline-offset: 3px; }

/* 更多作品 · 占位卡 */
.more {
  margin-top: 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  padding: 2.1rem 1.5rem;
  text-align: center;
  color: var(--ink-2);
  transition: border-color .22s ease;
}
.more:hover { border-color: var(--accent); }
.more-plus {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  margin: 0 auto .6rem;
  border: 1px dashed var(--line-strong);
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--ink-2);
}
.more p { font-size: .9rem; letter-spacing: .14em; line-height: 1.5; }

/* 进入视口浮现（JS 渐进增强） */
.reveal { transition: opacity .5s ease, transform .5s ease; }
.reveal.pre { opacity: 0; transform: translateY(16px); }
.reveal.in  { opacity: 1; transform: none; }

/* ------------------------------ 落款 ------------------------------ */
.foot {
  margin-top: 4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.foot .n { font-family: var(--serif); letter-spacing: .16em; }
.foot .y { font-family: var(--mono); font-size: .78rem; color: var(--ink-2); letter-spacing: .2em; }

/* 备案号（合规展示） */
.beian {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: .74rem;
  letter-spacing: .1em;
  color: #5d5547;
}
.beian a { color: inherit; }
.beian a:hover { color: var(--ink-2); }

/* ------------------------------ 响应式 / 动效偏好 ------------------------------ */
@media (max-width: 520px) {
  .page { padding-top: 3rem; }
  .auction { padding: 2.2rem 1.3rem; }
  .cta { padding: .8rem 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  html { scroll-behavior: auto; }
}