/* ============ 基础 ============ */
:root {
  --red: #E60012;
  --black: #0a0a0c;
  --dark: #121216;
  --gray: #8a8a92;
  --light: #f2f0ec;
  --serif: "Songti SC", "Noto Serif SC", serif;
  --sans: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { background: var(--black); color: var(--light); font-family: var(--sans); overflow-x: hidden; }
img { display: block; max-width: 100%; }

/* ============ Loader ============ */
#loader {
  position: fixed; inset: 0; z-index: 100; background: var(--black);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  transition: opacity .8s ease, visibility .8s;
}
#loader.done { opacity: 0; visibility: hidden; }
.loader-line { width: 0; height: 1px; background: var(--red); animation: lineGrow 1.2s ease forwards; }
@keyframes lineGrow { to { width: 120px; } }
.loader-text { font-size: 13px; letter-spacing: 8px; color: var(--gray); animation: fadeIn 1s .4s both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ============ Nav ============ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px; transition: background .4s, backdrop-filter .4s;
}
#nav.scrolled { background: rgba(10,10,12,.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.nav-logo { font-size: 20px; font-weight: 800; letter-spacing: 2px; }
.nav-logo .dot { color: var(--red); }
.nav-links { display: flex; gap: 26px; }
.nav-links a {
  color: var(--gray); text-decoration: none; font-size: 13px; letter-spacing: 2px;
  transition: color .3s; position: relative; padding-bottom: 4px;
}
.nav-links a::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 1px;
  background: var(--red); transition: width .3s, left .3s;
}
.nav-links a:hover, .nav-links a.active { color: var(--light); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; left: 0; }
.nav-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; }
.nav-burger span { width: 22px; height: 1.5px; background: var(--light); transition: .3s; }
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: 0; z-index: 49; background: rgba(10,10,12,.97);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  opacity: 0; visibility: hidden; transition: .4s;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu a { color: var(--light); text-decoration: none; font-size: 22px; letter-spacing: 6px; font-family: var(--serif); }

/* ============ Hero ============ */
#hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform: scale(1.12); animation: heroZoom 6s ease forwards; }
@keyframes heroZoom { to { transform: scale(1.0); } }
.hero-vignette {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,10,12,.35) 0%, rgba(10,10,12,0) 35%, rgba(10,10,12,.2) 62%, rgba(10,10,12,.96) 100%);
}
.hero-content {
  position: absolute; left: 0; right: 0; bottom: 12vh; text-align: center; z-index: 2;
}
.hero-eyebrow { font-size: 11px; letter-spacing: 6px; color: var(--gray); margin-bottom: 18px; }
.hero-name { font-family: var(--serif); font-size: clamp(64px, 14vw, 130px); font-weight: 700; line-height: 1.05; letter-spacing: 6px; }
.hero-name .char { display: inline-block; opacity: 0; transform: translateY(40px); animation: charUp .9s cubic-bezier(.16,1,.3,1) forwards; }
.hero-name .char:nth-child(1) { animation-delay: 1.0s; }
.hero-name .char:nth-child(2) { animation-delay: 1.15s; }
.hero-name .char:nth-child(3) { animation-delay: 1.3s; }
@keyframes charUp { to { opacity: 1; transform: translateY(0); } }
.hero-en { font-size: 14px; letter-spacing: 10px; color: rgba(242,240,236,.75); margin-top: 14px; }
.hero-line { width: 56px; height: 2px; background: var(--red); margin: 22px auto 0; box-shadow: 0 0 14px rgba(230,0,18,.8); }
.hero-slogan { font-size: 13px; letter-spacing: 4px; color: rgba(242,240,236,.65); margin-top: 18px; }
.hero-scroll {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2;
}
.hero-scroll span { font-size: 9px; letter-spacing: 4px; color: var(--gray); }
.scroll-track { width: 1px; height: 42px; background: rgba(242,240,236,.15); overflow: hidden; }
.scroll-thumb { width: 100%; height: 14px; background: var(--red); animation: scrollDrop 1.8s ease-in-out infinite; }
@keyframes scrollDrop { 0% { transform: translateY(-16px); } 100% { transform: translateY(46px); } }

/* ============ 通用 Section ============ */
.section { padding: 110px 6vw; max-width: 1200px; margin: 0 auto; }
.sec-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 60px; }
.sec-index { font-size: 13px; color: var(--red); letter-spacing: 2px; font-weight: 700; }
.sec-title { font-family: var(--serif); font-size: clamp(30px, 5vw, 44px); letter-spacing: 6px; font-weight: 700; }
.sec-en { font-size: 12px; letter-spacing: 5px; color: var(--gray); font-family: var(--sans); font-weight: 400; margin-left: 8px; }

/* reveal 初始态（入场由 app.js 的 rAF 补间驱动） */
.reveal { opacity: 0; transform: translateY(36px); }
.no-js .reveal { opacity: 1; transform: none; }

/* ============ Profile ============ */
.profile-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center; }
.profile-photo { position: relative; overflow: hidden; border-radius: 4px; }
.profile-photo img { transition: transform .8s ease; }
.profile-photo:hover img { transform: scale(1.04); }
.photo-tag {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 30px 18px 14px;
  background: linear-gradient(transparent, rgba(10,10,12,.9));
  font-size: 10px; letter-spacing: 4px; color: rgba(242,240,236,.85);
}
.p-row { display: flex; align-items: baseline; padding: 15px 0; border-bottom: 1px solid rgba(242,240,236,.08); }
.p-k { width: 92px; flex-shrink: 0; font-size: 12px; letter-spacing: 3px; color: var(--gray); }
.p-v { font-size: 17px; letter-spacing: 1px; }
.p-v em { font-style: normal; font-size: 12px; color: var(--gray); margin-left: 10px; letter-spacing: 2px; }
.color-chip {
  display: inline-block; width: 14px; height: 14px; background: var(--red); border-radius: 3px;
  margin-right: 8px; vertical-align: -1px; box-shadow: 0 0 10px rgba(230,0,18,.7);
}
.stats-band {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: 80px; padding-top: 50px; border-top: 1px solid rgba(242,240,236,.08);
}
.stat { text-align: center; }
.stat-num { font-family: var(--serif); font-size: clamp(38px, 6vw, 60px); font-weight: 700; color: var(--light); }
.stat-num .suffix { font-size: .45em; color: var(--red); margin-left: 2px; }
.stat-label { font-size: 11px; letter-spacing: 3px; color: var(--gray); margin-top: 8px; }

/* ============ Timeline ============ */
.tl-wrap { position: relative; padding-left: 40px; }
.tl-line { position: absolute; left: 8px; top: 6px; bottom: 6px; width: 1px; background: rgba(242,240,236,.1); }
.tl-progress { width: 100%; height: 0; background: var(--red); box-shadow: 0 0 8px rgba(230,0,18,.6); transition: height .1s linear; }
.tl-item { position: relative; margin-bottom: 64px; }
.tl-item::before {
  content: ""; position: absolute; left: -36.5px; top: 10px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--black); border: 1.5px solid var(--red);
}
.tl-year { font-family: var(--serif); font-size: clamp(40px, 7vw, 64px); font-weight: 700; color: rgba(242,240,236,.14); line-height: 1; margin-bottom: 14px; }
.tl-card h3 { font-size: 20px; letter-spacing: 2px; margin-bottom: 12px; font-family: var(--serif); }
.tl-card p { font-size: 14.5px; line-height: 1.9; color: rgba(242,240,236,.68); max-width: 640px; }
.tl-card-now { border-left: 2px solid var(--red); padding-left: 20px; }
.tl-card-now h3 { color: var(--red); }

/* ============ Works ============ */
.works-note { text-align: center; font-size: 12px; letter-spacing: 4px; color: var(--gray); margin: -28px 0 48px; }
.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.work-card {
  background: var(--dark); border: 1px solid rgba(242,240,236,.06); border-radius: 6px;
  padding: 30px 24px; display: flex; align-items: center; gap: 20px;
  transition: transform .4s ease, border-color .4s, box-shadow .4s; position: relative; overflow: hidden;
}
.work-card::after {
  content: attr(data-year); position: absolute; right: 14px; top: 10px;
  font-size: 11px; letter-spacing: 2px; color: rgba(242,240,236,.2);
}
.work-card:hover { transform: translateY(-6px); border-color: rgba(230,0,18,.5); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.work-disc {
  width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0;
  background: repeating-radial-gradient(circle at center, #1c1c22 0 2px, #26262e 2px 4px);
  display: flex; align-items: center; justify-content: center;
  transition: transform .6s ease;
}
.work-card:hover .work-disc { transform: rotate(160deg); }
.disc-center { width: 18px; height: 18px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px rgba(230,0,18,.6); }
.work-info h3 { font-size: 16px; letter-spacing: 1px; margin-bottom: 6px; }
.work-info span { font-size: 12px; color: var(--gray); letter-spacing: 1px; }
.work-card-ost { grid-column: span 1; }
.drama-banner {
  margin-top: 26px; position: relative; border-radius: 6px; overflow: hidden; height: 320px;
}
.drama-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.drama-text {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 34px; background: linear-gradient(to top, rgba(10,10,12,.92) 0%, rgba(10,10,12,.2) 55%, transparent 100%);
}
.drama-tag { font-size: 10px; letter-spacing: 4px; color: var(--red); margin-bottom: 10px; font-weight: 700; }
.drama-text h3 { font-family: var(--serif); font-size: clamp(24px, 4vw, 34px); letter-spacing: 4px; margin-bottom: 8px; }
.drama-text p { font-size: 13px; color: rgba(242,240,236,.7); letter-spacing: 2px; }

/* ============ Voice ============ */
#voice { text-align: center; width: 100%; max-width: none; padding-left: max(6vw, calc((100vw - 1200px)/2 + 6vw)); padding-right: max(6vw, calc((100vw - 1200px)/2 + 6vw)); background: #eeeae2; color: #17171b; }
#voice .sec-en { color: #79777a; }
.voice-wrap { position: relative; max-width: 760px; margin: 0 auto; padding: 30px 0 10px; }
.quote-mark { font-family: var(--serif); font-size: 120px; line-height: .5; color: rgba(230,0,18,.35); margin-bottom: 30px; }
.quote-stage { position: relative; height: 130px; }
.quote {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 18px; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: clamp(22px, 4.5vw, 34px); letter-spacing: 4px; line-height: 1.6;
  color: rgba(23,23,27,.88);
  opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; padding: 0 20px;
}
.quote.active { opacity: 1; transform: translateY(0); }
.quote-dots { display: flex; gap: 10px; justify-content: center; margin-top: 26px; }
.quote-dots .dot2 { width: 6px; height: 6px; border-radius: 50%; background: rgba(242,240,236,.2); cursor: pointer; transition: .3s; }
.quote-dots .dot2.active { background: var(--red); transform: scale(1.3); }

/* ============ Gallery ============ */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; grid-auto-flow: dense; gap: 14px; }
.g-item { position: relative; overflow: hidden; border-radius: 4px; cursor: pointer; }
.g-tall { grid-row: span 2; }
.g-wide { grid-column: span 2; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease, filter .7s; }
.g-item:hover img { transform: scale(1.06); }
.g-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px;
  font-size: 11px; letter-spacing: 3px; color: rgba(242,240,236,.9);
  background: linear-gradient(transparent, rgba(10,10,12,.85));
  opacity: 0; transform: translateY(8px); transition: .4s;
}
.g-item:hover figcaption { opacity: 1; transform: translateY(0); }
.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(10,10,12,.96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: .4s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 4px; }
.lb-close { position: absolute; top: 18px; right: 26px; font-size: 40px; color: var(--gray); cursor: pointer; line-height: 1; }

/* ============ Fandom ============ */
.pantone {
  display: flex; max-width: 420px; margin: 0 auto 70px; flex-direction: column;
  background: #fff; border-radius: 6px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(230,0,18,.15);
}
.pantone-swatch { height: 300px; background: var(--red); }
.pantone-info { padding: 22px 24px 26px; color: #111; }
.pantone-name { font-family: var(--serif); font-size: 26px; letter-spacing: 6px; font-weight: 700; }
.pantone-code { font-size: 13px; letter-spacing: 2px; color: #888; margin-top: 6px; }
.pantone-desc { font-size: 12px; line-height: 1.8; color: #555; margin-top: 12px; letter-spacing: 1px; }
.slogan-wall { display: flex; flex-direction: column; gap: 22px; align-items: center; margin-bottom: 90px; }
.slogan-item {
  font-family: var(--serif); font-size: clamp(20px, 4vw, 30px); letter-spacing: 5px;
  padding: 6px 10px; border-bottom: 1px solid rgba(230,0,18,.35);
}
.slogan-fun { font-size: clamp(14px, 2.6vw, 18px); color: var(--gray); border-bottom-style: dashed; letter-spacing: 3px; }

/* 信 */
.letter { max-width: 620px; margin: 0 auto; text-align: center; }
.letter-seal { cursor: pointer; }
.seal-circle {
  width: 84px; height: 84px; margin: 0 auto; border-radius: 50%;
  border: 2px solid var(--red); color: var(--red); font-family: var(--serif);
  font-size: 34px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 24px rgba(230,0,18,.35), inset 0 0 14px rgba(230,0,18,.15);
  transition: transform .4s;
  animation: sealPulse 2.6s ease-in-out infinite;
}
@keyframes sealPulse { 50% { box-shadow: 0 0 40px rgba(230,0,18,.6), inset 0 0 18px rgba(230,0,18,.25); } }
.letter-seal:hover .seal-circle { transform: scale(1.08); }
.seal-hint { font-size: 11px; letter-spacing: 3px; color: var(--gray); margin-top: 16px; }
.letter-body {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 1.4s cubic-bezier(.16,1,.3,1), opacity 1s .3s, margin .8s;
  text-align: left; background: var(--dark); border: 1px solid rgba(230,0,18,.25);
  border-radius: 6px; padding: 0 34px;
}
.letter.open .letter-body { max-height: 700px; opacity: 1; margin-top: 34px; padding: 34px; }
.letter.open .letter-seal { display: none; }
.letter-title { font-family: var(--serif); font-size: 20px; letter-spacing: 3px; margin-bottom: 18px; }
.letter-body p { font-size: 14.5px; line-height: 2.1; color: rgba(242,240,236,.8); margin-bottom: 14px; letter-spacing: 1px; }
.letter-sign { text-align: right; color: var(--gray) !important; font-size: 13px !important; margin-top: 22px; }

/* ============ Footer ============ */
footer { text-align: center; padding: 80px 20px 50px; border-top: 1px solid rgba(242,240,236,.06); }
.footer-name { font-size: 13px; letter-spacing: 8px; color: var(--gray); }
.footer-line { width: 36px; height: 1px; background: var(--red); margin: 18px auto; }
footer p { font-size: 11px; color: rgba(138,138,146,.7); letter-spacing: 2px; line-height: 2; }
.footer-credit { font-size: 10px; }

/* ============ 响应式 ============ */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .section { padding: 80px 6vw; }
  .profile-grid { grid-template-columns: 1fr; gap: 36px; }
  .stats-band { grid-template-columns: repeat(2, 1fr); gap: 34px 12px; }
  .works-grid { grid-template-columns: 1fr; gap: 16px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .drama-banner { height: 260px; }
  .quote-stage { height: 150px; }
}


/* ============ 显漫署名 ============ */
.loader-credit { font-size: 10px; letter-spacing: 5px; color: rgba(230,0,18,.85); animation: fadeIn 1s .8s both; }
.hero-credit {
  margin-top: 26px; font-size: 10px; letter-spacing: 4px; color: rgba(242,240,236,.45);
}
.hero-credit b {
  position: relative; display: inline-block;
  font-weight: 700; color: var(--light); font-size: 13px; letter-spacing: 4px;
  padding: 0 0 7px 4px; margin-left: 7px;
}
.hero-credit b::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 34px; height: 1px;
  background: var(--red); transform: translateX(-50%);
}
.footer-madeby {
  display: flex; align-items: baseline; justify-content: center; gap: 14px;
  margin-bottom: 22px;
}
.madeby-label { font-size: 9px; letter-spacing: 3px; color: rgba(138,138,146,.6); }
.madeby-name {
  position: relative; display: inline-block;
  font-family: var(--serif); font-size: 22px; font-weight: 700; letter-spacing: 10px;
  color: var(--light); padding: 0 0 10px 10px;
}
.madeby-name::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 52px; height: 2px;
  background: var(--red); transform: translateX(-50%);
}
.madeby-year { font-size: 10px; color: rgba(138,138,146,.6); letter-spacing: 2px; }


/* ============ v2 · 电影节奏与真实交互 ============ */
.page-progress {
  position: fixed; z-index: 120; left: 0; top: 0; height: 2px; width: 0;
  background: var(--red); box-shadow: 0 0 12px rgba(230,0,18,.75); pointer-events: none;
}
:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
button, input { font: inherit; }
button { color: inherit; }

.chapter-intro {
  display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: baseline;
  padding: 0 0 34px; margin: -28px 0 44px; border-bottom: 1px solid rgba(242,240,236,.08);
}
.chapter-intro span, .gallery-guide span { color: var(--red); font-size: 10px; letter-spacing: 3px; font-weight: 700; }
.chapter-intro p { font-family: var(--serif); font-size: clamp(18px,2.5vw,25px); line-height: 1.7; letter-spacing: 2px; color: rgba(242,240,236,.72); }

.xianman-pick {
  position: relative; padding: 34px; margin: 0 0 30px; overflow: hidden;
  border: 1px solid rgba(230,0,18,.24); background: linear-gradient(135deg,rgba(230,0,18,.12),rgba(18,18,22,.86) 44%,rgba(18,18,22,.98));
}
.xianman-pick::before { content:"显"; position:absolute; right:-12px; top:-38px; font-family:var(--serif); font-size:190px; color:rgba(230,0,18,.055); }
.pick-kicker { position:relative; color:var(--red); font-size:10px; font-weight:700; letter-spacing:4px; }
.pick-title { position:relative; margin-top:10px; font-family:var(--serif); font-size:clamp(25px,4vw,40px); letter-spacing:4px; }
.pick-tracks { position:relative; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:28px; background:rgba(242,240,236,.1); }
.pick-track { min-height:96px; display:grid; grid-template-columns:36px 1fr 20px; grid-template-rows:auto auto; gap:4px 12px; text-align:left; padding:19px; border:0; background:#111116; cursor:pointer; transition:background .3s; }
.pick-track:hover { background:#19191f; }
.pick-track span { grid-row:1/3; color:var(--red); font-size:10px; letter-spacing:2px; padding-top:3px; }
.pick-track b { font-size:15px; letter-spacing:1px; }
.pick-track em { font-style:normal; color:var(--gray); font-size:11px; line-height:1.55; }
.pick-note { position:relative; margin-top:18px; color:var(--gray); font-size:10px; letter-spacing:2px; }
.work-card.spotlight { border-color:var(--red); box-shadow:0 0 0 1px var(--red),0 18px 60px rgba(230,0,18,.18); }

.stage-feature {
  width:100vw; margin-left:calc(50% - 50vw); margin-top:100px; position:relative; min-height:72vh; overflow:hidden; background:#050506;
}
.stage-feature img { width:100%; height:72vh; object-fit:cover; filter:saturate(.8) contrast(1.1) brightness(.72); }
.stage-feature::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,5,6,.88),transparent 52%),linear-gradient(0deg,rgba(5,5,6,.72),transparent 48%); }
.stage-copy { position:absolute; z-index:2; inset:0; display:grid; grid-template-columns:100px minmax(0,560px); gap:34px; align-content:end; padding:8vw; }
.stage-no { writing-mode:vertical-rl; color:var(--red); font-size:10px; letter-spacing:4px; }
.stage-copy span { font-size:10px; color:var(--red); letter-spacing:4px; }
.stage-copy h3 { margin:12px 0; font-family:var(--serif); font-size:clamp(34px,6vw,72px); line-height:1.2; letter-spacing:5px; }
.stage-copy p { color:rgba(242,240,236,.65); font-size:13px; line-height:1.9; max-width:500px; }

.gallery-guide { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:-28px 0 34px; }
.gallery-guide p { color:var(--gray); font-size:11px; letter-spacing:1px; }
.lb-stage { display:flex; flex-direction:column; max-width:86vw; max-height:90vh; }
.lightbox .lb-stage img { max-width:86vw; max-height:80vh; }
.lb-meta { display:flex; justify-content:space-between; gap:30px; padding:14px 2px 0; color:var(--gray); font-size:11px; letter-spacing:2px; }
.lb-meta span { color:var(--red); white-space:nowrap; }
.lb-close, .lb-nav { position:absolute; z-index:2; border:0; background:transparent; cursor:pointer; min-width:48px; min-height:48px; }
.lb-close { top:18px; right:22px; font-size:38px; color:var(--gray); }
.lb-nav { top:50%; transform:translateY(-50%); font-family:var(--serif); font-size:54px; color:rgba(242,240,236,.6); }
.lb-prev { left:20px; } .lb-next { right:20px; }

.spark-wall { margin:0 auto 100px; max-width:820px; padding:38px; border:1px solid rgba(242,240,236,.09); background:radial-gradient(circle at 80% 20%,rgba(230,0,18,.13),transparent 38%),#101014; }
.spark-head { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; }
.spark-head span { color:var(--red); font-size:10px; letter-spacing:4px; }
.spark-head h3 { margin-top:8px; font-family:var(--serif); font-size:clamp(26px,4vw,38px); letter-spacing:4px; }
.spark-count { text-align:right; }
.spark-count b { display:block; font-family:var(--serif); font-size:42px; line-height:1; }
.spark-count span { color:var(--gray); letter-spacing:2px; }
.spark-form { margin-top:32px; }
.spark-form label { display:block; margin-bottom:10px; color:var(--gray); font-size:11px; letter-spacing:2px; }
.spark-input-row { display:grid; grid-template-columns:1fr 92px; }
.spark-input-row input { min-width:0; height:50px; padding:0 16px; color:var(--light); background:#09090b; border:1px solid rgba(242,240,236,.14); border-right:0; outline:0; }
.spark-input-row input:focus { border-color:rgba(230,0,18,.7); }
.spark-input-row button { border:0; background:var(--red); font-weight:700; letter-spacing:3px; cursor:pointer; }
.spark-note { display:flex; justify-content:space-between; gap:16px; margin-top:9px; color:rgba(138,138,146,.7); font-size:9px; letter-spacing:1px; }
.spark-sky { display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; min-height:4px; }
.spark-message { display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:9px 13px; border:1px solid rgba(230,0,18,.2); border-radius:999px; color:rgba(242,240,236,.75); font-size:11px; }
.spark-message::before { content:"✦"; color:var(--red); font-size:9px; }

.creator-note { max-width:720px; margin:120px auto 0; padding:38px 0; text-align:center; border-top:1px solid rgba(230,0,18,.35); border-bottom:1px solid rgba(230,0,18,.35); }
.creator-kicker { color:var(--red); font-size:10px; letter-spacing:5px; }
.creator-note p { margin-top:18px; font-family:var(--serif); font-size:clamp(16px,2.7vw,22px); line-height:2; letter-spacing:2px; color:rgba(242,240,236,.72); }

@media (hover:none) {
  .g-item figcaption { opacity:1; transform:none; }
}
@media (max-width:860px) {
  .chapter-intro { grid-template-columns:1fr; gap:12px; }
  .pick-tracks { grid-template-columns:1fr; }
  .xianman-pick { padding:26px 20px; }
  .stage-feature,.stage-feature img { min-height:74vh; height:74vh; }
  .stage-copy { grid-template-columns:24px 1fr; gap:18px; padding:28px 24px 54px; }
  .stage-copy h3 { font-size:36px; }
  .gallery-guide { align-items:flex-start; flex-direction:column; gap:8px; }
  .lb-nav { font-size:42px; }
  .lb-prev { left:0; } .lb-next { right:0; }
  .lightbox .lb-stage img { max-width:82vw; max-height:73vh; }
  .spark-wall { padding:28px 20px; margin-bottom:82px; }
  .spark-head h3 { font-size:27px; }
  .spark-input-row { grid-template-columns:1fr 78px; }
  .spark-note { flex-direction:column; gap:5px; }
  .creator-note { margin-top:90px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
.no-js #loader { display:none; }
.no-js .reveal,.no-js .hero-name .char { opacity:1; transform:none; }
.no-js .letter-body { max-height:none; opacity:1; margin-top:34px; padding:34px; }
.no-js .letter-seal { display:none; }

.spark-note button { border:0; background:transparent; color:var(--gray); text-decoration:underline; cursor:pointer; font-size:inherit; }

/* 固定导航不能压住锚点内容 */
section[id] { scroll-margin-top: 84px; }
#nav.scrolled { border-bottom: 1px solid rgba(242,240,236,.06); }
.pick-track::after { content:"→"; grid-column:3; grid-row:1/3; align-self:center; color:rgba(230,0,18,.7); font-size:18px; }
@media (max-width:860px) {
  #nav.scrolled { background:rgba(10,10,12,.94); }
  section[id] { scroll-margin-top:70px; }
}
.quote cite { font-family:var(--sans); font-style:normal; font-size:10px; letter-spacing:3px; color:#858185; }

/* 作品卡可听提示 */
.work-card.listenable { cursor:pointer; padding-bottom:44px; }
.listen-hint { position:absolute; left:24px; bottom:14px; font-size:10px; letter-spacing:2px; color:rgba(230,0,18,.75); }
.work-card.listenable:hover .listen-hint { color:var(--red); }

/* ============ v2.1 · 站内听歌推荐卡 ============ */
.song-sheet {
  position:fixed; inset:0; z-index:95; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px; text-align:center; background:rgba(8,8,10,.97); opacity:0; visibility:hidden;
}
.song-sheet-close { position:absolute; top:20px; right:24px; width:48px; height:48px; border:0; background:transparent; color:var(--gray); font-size:38px; cursor:pointer; }
.song-vinyl { width:128px; height:128px; border-radius:50%; display:grid; place-items:center; background:repeating-radial-gradient(circle,#19191f 0 3px,#292932 3px 5px); box-shadow:0 22px 60px rgba(0,0,0,.55); }
.song-vinyl div { width:34px; height:34px; border-radius:50%; background:var(--red); box-shadow:0 0 22px rgba(230,0,18,.75); }
.song-sheet-kicker { margin-top:32px; color:var(--red); font-size:10px; letter-spacing:5px; }
.song-sheet h3 { margin-top:12px; max-width:720px; font-family:var(--serif); font-size:clamp(28px,6vw,54px); letter-spacing:3px; }
.song-sheet-meta { margin-top:12px; color:var(--gray); font-size:12px; letter-spacing:3px; }
.song-sheet-reason { max-width:560px; margin:28px 0 0; color:rgba(242,240,236,.75); font-family:var(--serif); font-size:16px; line-height:2; letter-spacing:2px; }
.song-copy { margin-top:32px; min-width:150px; min-height:48px; border:1px solid var(--red); background:transparent; color:var(--light); letter-spacing:3px; cursor:pointer; }
.song-copy-note { margin-top:12px; color:rgba(138,138,146,.7); font-size:10px; letter-spacing:1px; }
.work-card.listenable { cursor:pointer; }

/* 手机/折叠屏影像墙：瀑布流保留完整人物，不强裁 */
@media (max-width:860px) {
  .gallery-grid { display:block; column-count:2; column-gap:10px; }
  .g-item,.g-tall,.g-wide { display:inline-block; width:100%; height:auto; margin:0 0 10px; break-inside:avoid; grid-row:auto; grid-column:auto; }
  .g-item img { width:100%; height:auto; object-fit:contain; }
  .g-item figcaption { padding:34px 12px 11px; }
}
@media (min-width:600px) and (max-width:860px) {
  .gallery-grid { column-count:3; }
}