/* ============================================================
   Aurora Artscape / 极光艺廊 — site stylesheet
   Night sky · aurora ridgeline · gold accent · 悲壮 register
   ============================================================ */

:root {
  --night: #070b14;
  --night-2: #0b1120;
  --ink: #10182b;
  --text: #e8e4d8;          /* luminous off-white (matches calligraphy frames) */
  --text-dim: #a8a493;
  --gold: #c9a227;          /* gold ridge accent */
  --gold-soft: #e0c46a;
  --aurora-teal: #35d0ba;
  --aurora-violet: #7b6cff;
  --aurora-green: #57e394;
  --cold-blue: #6fa8dc;     /* 项羽 present-tense key */
  --warm-mem: #d8a25a;      /* memory warmth */
  --serif-zh: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --serif-en: "Cormorant Garamond", "Georgia", serif;
  --display-zh: "ZCOOL XiaoWei", "Noto Serif SC", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--night);
  color: var(--text);
  font-family: var(--serif-zh);
  font-size: 17px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}

/* ---- starfield backdrop ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 8%,  rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 30%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 73% 12%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 26%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 22% 55%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 70%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 67% 62%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 82% 78%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 84%,  rgba(255,255,255,.35) 50%, transparent 51%),
    linear-gradient(180deg, #05070f 0%, var(--night) 45%, var(--night-2) 100%);
}

/* faint aurora glow, top of viewport */
body::after {
  content: "";
  position: fixed;
  top: -30vh; left: -10vw; right: -10vw;
  height: 60vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 30% 30%, rgba(53,208,186,.10), transparent 70%),
    radial-gradient(55% 50% at 65% 22%, rgba(123,108,255,.09), transparent 70%),
    radial-gradient(45% 45% at 85% 40%, rgba(87,227,148,.07), transparent 70%);
  filter: blur(2px);
}

a { color: var(--gold-soft); text-decoration: none; transition: color .25s; }
a:hover { color: #fff; }

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

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---- header / nav ---- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7,11,20,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201,162,39,.18);
}
header.site .bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; max-width: 1080px; margin: 0 auto;
}
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand .zh {
  font-family: var(--display-zh);
  font-size: 1.5rem; color: var(--text);
  letter-spacing: .18em;
}
.brand .en {
  font-family: var(--serif-en);
  font-size: .8rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--text-dim);
}
nav.main { display: flex; gap: 26px; flex-wrap: wrap; }
nav.main a {
  font-size: .92rem; color: var(--text-dim); letter-spacing: .08em;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
nav.main a:hover, nav.main a.active { color: var(--text); border-bottom-color: var(--gold); }

/* ---- hero ---- */
.hero {
  min-height: 68vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 90px 24px 70px;
  position: relative;
}
.hero .kicker {
  font-family: var(--serif-en);
  letter-spacing: .42em; text-transform: uppercase;
  font-size: .78rem; color: var(--aurora-teal);
  margin-bottom: 26px;
}
.hero h1 {
  font-family: var(--display-zh);
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  letter-spacing: .22em;
  line-height: 1.3;
  text-shadow: 0 0 40px rgba(53,208,186,.25);
}
.hero .sub {
  margin-top: 22px;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: var(--text-dim);
  max-width: 620px;
}
.hero .tagline-zh {
  margin-top: 14px; font-size: 1.05rem; color: var(--text-dim); letter-spacing: .12em;
}

/* gold ridgeline divider */
.ridge {
  width: 180px; height: 34px; margin: 44px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  clip-path: polygon(0 78%, 18% 55%, 32% 68%, 50% 22%, 66% 60%, 82% 42%, 100% 74%, 100% 82%, 0 86%);
  opacity: .9;
}

/* ---- buttons ---- */
.btn {
  display: inline-block;
  padding: 13px 34px;
  border: 1px solid var(--gold);
  color: var(--gold-soft);
  letter-spacing: .16em;
  font-size: .95rem;
  transition: all .3s;
  background: transparent;
}
.btn:hover { background: var(--gold); color: var(--night); }
.btn.solid { background: var(--gold); color: var(--night); font-weight: 600; }
.btn.solid:hover { background: var(--gold-soft); color: var(--night); }
.btn-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }

/* ---- sections ---- */
section.block { padding: 88px 0; }
section.block.alt { background: rgba(16,24,43,.45); border-top: 1px solid rgba(201,162,39,.1); border-bottom: 1px solid rgba(201,162,39,.1); }

.sec-head { text-align: center; margin-bottom: 52px; }
.sec-head .zh {
  font-family: var(--display-zh);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  letter-spacing: .2em;
}
.sec-head .en {
  font-family: var(--serif-en); font-style: italic;
  color: var(--text-dim); margin-top: 8px; font-size: 1.02rem;
}
.sec-head::after {
  content: ""; display: block; width: 64px; height: 1px;
  background: var(--gold); margin: 22px auto 0;
}

/* ---- feature card (film) ---- */
.feature {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center;
}
.feature .art {
  border: 1px solid rgba(201,162,39,.25);
  padding: 10px;
  background: rgba(7,11,20,.5);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.feature .art img { width: 100%; height: auto; }
.feature h3 {
  font-family: var(--display-zh); font-weight: 400;
  font-size: 2rem; letter-spacing: .16em; margin-bottom: 6px;
}
.feature .en-title { font-family: var(--serif-en); font-style: italic; color: var(--text-dim); margin-bottom: 20px; }
.feature p { color: var(--text-dim); margin-bottom: 14px; }
.feature .poem-line {
  font-family: var(--serif-zh);
  color: var(--cold-blue);
  font-size: 1.15rem; letter-spacing: .14em;
  border-left: 2px solid var(--gold);
  padding-left: 16px; margin: 22px 0;
}

/* ---- poem block (film page) ---- */
.poem {
  text-align: center; margin: 56px auto; max-width: 560px;
  padding: 46px 30px;
  border-top: 1px solid rgba(201,162,39,.35);
  border-bottom: 1px solid rgba(201,162,39,.35);
}
.poem .line {
  font-size: clamp(1.3rem, 3.4vw, 1.75rem);
  letter-spacing: .3em; line-height: 2.4;
  color: var(--text);
}
.poem .trans {
  margin-top: 30px; font-family: var(--serif-en); font-style: italic;
  color: var(--text-dim); font-size: 1.02rem; line-height: 2;
}
.poem .attribution { margin-top: 26px; font-size: .9rem; color: var(--text-dim); letter-spacing: .2em; }

/* ---- gallery ---- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.gallery figure {
  border: 1px solid rgba(201,162,39,.2);
  background: rgba(7,11,20,.55);
  padding: 8px;
  transition: transform .3s, border-color .3s;
}
.gallery figure:hover { transform: translateY(-4px); border-color: rgba(201,162,39,.55); }
.gallery img { width: 100%; height: 210px; object-fit: cover; }
.gallery figcaption {
  padding: 12px 8px 6px; font-size: .88rem; color: var(--text-dim);
  text-align: center; letter-spacing: .06em;
}

/* ---- video embed ---- */
.video-wrap {
  position: relative; width: 100%; max-width: 900px; margin: 0 auto;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(201,162,39,.3);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  background: #000;
}
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- prose ---- */
.prose { max-width: 760px; margin: 0 auto; }
.prose p { margin-bottom: 20px; color: var(--text); }
.prose p.dim { color: var(--text-dim); }
.prose .en { font-family: var(--serif-en); color: var(--text-dim); font-size: 1.02rem; }

/* ---- world collection strip ---- */
.world-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 10px;
}
.world-strip img { width: 100%; height: 150px; object-fit: cover; filter: saturate(.85); opacity: .85; transition: opacity .3s; }
.world-strip a:hover img { opacity: 1; }

/* ---- footer ---- */
footer.site {
  border-top: 1px solid rgba(201,162,39,.18);
  padding: 54px 24px 40px;
  text-align: center; color: var(--text-dim); font-size: .88rem;
}
footer.site .foot-brand { font-family: var(--display-zh); font-size: 1.2rem; letter-spacing: .22em; color: var(--text); margin-bottom: 14px; }
footer.site p { margin-bottom: 8px; }
footer.site .links { margin: 16px 0; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }

/* ---- page-specific: cold-blue wash for the film page ---- */
body.page-xiangyu .hero h1 { text-shadow: 0 0 46px rgba(111,168,220,.35); }
body.page-xiangyu .hero .kicker { color: var(--cold-blue); }

/* ---- responsive ---- */
@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; }
  .world-strip { grid-template-columns: repeat(2, 1fr); }
  header.site .bar { flex-direction: column; gap: 10px; }
  nav.main { justify-content: center; gap: 16px; }
  .hero { min-height: 56vh; padding-top: 60px; }
}