/* Template 28: Storytelling Layout — 叙事长卷 · 暗影电影 */
:root {
  --crimson: #e11d48;
  --crimson-glow: rgba(225, 29, 72, 0.4);
  --bg: #0b0b0c;
  --surface: #141416;
  --surface-node: #1c1c20;
  --border: rgba(225, 29, 72, 0.25);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --text: #f5f5f0;
  --text-muted: #a1a1aa;
  --radius: 12px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif; line-height:1.7; overflow-x:hidden; }
a { color:inherit; text-decoration:none; transition:all .25s; }
.container { max-width:1160px; margin:0 auto; padding:0 1.5rem; }

/* Split Cinematic Header */
.story-header { position:fixed; top:0; left:0; right:0; z-index:100; padding:1.2rem 0; background:rgba(11, 11, 12, 0.85); backdrop-filter:blur(16px); border-bottom:1px solid var(--border-subtle); }
.story-header-inner { display:flex; justify-content:space-between; align-items:center; }
.story-logo { font-size:1.5rem; font-weight:900; letter-spacing:.05em; color:#fff; }
.story-logo span { color:var(--crimson); }
.story-nav { display:flex; gap:2rem; list-style:none; }
.story-nav a { font-size:.9rem; color:var(--text-muted); font-weight:500; }
.story-nav a:hover, .story-nav a.active { color:var(--crimson); }
.btn-story-crimson { background:var(--crimson); color:#fff; font-weight:700; padding:.55rem 1.4rem; border-radius:var(--radius); font-size:.88rem; display:inline-flex; align-items:center; gap:.5rem; box-shadow:0 4px 20px var(--crimson-glow); }
.btn-story-crimson:hover { transform:translateY(-2px); box-shadow:0 6px 25px var(--crimson-glow); }

/* Cinematic Hero */
.story-hero { min-height:90vh; display:flex; align-items:center; padding:9rem 0 5rem; position:relative; background:radial-gradient(circle at 70% 30%, rgba(225,29,72,.15) 0%, transparent 60%); }
.story-act { font-size:.82rem; text-transform:uppercase; letter-spacing:.25em; color:var(--crimson); font-weight:800; margin-bottom:1.5rem; }
.story-hero h1 { font-size:clamp(2.5rem, 5.5vw, 4.5rem); font-weight:900; line-height:1.15; margin-bottom:1.5rem; letter-spacing:-.02em; }
.story-hero h1 .crimson { color:var(--crimson); }
.story-hero-desc { color:var(--text-muted); font-size:1.1rem; line-height:1.8; max-width:680px; margin-bottom:2.5rem; }
.story-hero-actions { display:flex; gap:1.2rem; flex-wrap:wrap; }
.btn-story-outline { border:1px solid rgba(255,255,255,0.2); color:#fff; padding:.75rem 2rem; border-radius:var(--radius); font-weight:600; font-size:.92rem; }
.btn-story-outline:hover { border-color:var(--crimson); color:var(--crimson); }

/* Narrative Timeline Flow */
.story-section { padding:6rem 0; border-top:1px solid var(--border-subtle); }
.story-sec-head { text-align:center; max-width:650px; margin:0 auto 4rem; }
.story-sec-head h2 { font-size:2.3rem; font-weight:800; margin-bottom:.8rem; }
.story-sec-head p { color:var(--text-muted); font-size:1rem; }

/* Timeline Nodes */
.timeline-container { position:relative; max-width:900px; margin:0 auto; padding:2rem 0; }
.timeline-container::before { content:''; position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--border-subtle); transform:translateX(-50%); }
.timeline-node { display:flex; justify-content:space-between; align-items:center; margin-bottom:3.5rem; position:relative; }
.timeline-node:nth-child(even) { flex-direction:row-reverse; }
.timeline-content { width:45%; background:var(--surface-node); border:1px solid var(--border-subtle); border-radius:var(--radius); padding:2rem; transition:all .3s; }
.timeline-content:hover { border-color:var(--crimson); transform:translateY(-3px); }
.timeline-content h3 { font-size:1.25rem; font-weight:700; margin-bottom:.6rem; color:#fff; }
.timeline-content p { color:var(--text-muted); font-size:.92rem; line-height:1.7; }
.timeline-marker { position:absolute; left:50%; width:20px; height:20px; border-radius:50%; background:var(--crimson); box-shadow:0 0 15px var(--crimson-glow); transform:translateX(-50%); }

/* Download Cards */
.story-dl-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
.story-dl-box { background:var(--surface); border:1px solid var(--border-subtle); border-radius:var(--radius); padding:2.5rem 2rem; text-align:center; transition:all .3s; }
.story-dl-box:hover { border-color:var(--crimson); }
.story-dl-box i { font-size:2.8rem; color:var(--crimson); margin-bottom:1.2rem; display:block; }
.story-dl-box h4 { font-size:1.2rem; font-weight:700; margin-bottom:.5rem; }
.story-dl-box p { color:var(--text-muted); font-size:.88rem; margin-bottom:1.8rem; }

/* Club Cards */
.story-club-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
.story-club-card { background:var(--surface); border:1px solid var(--border-subtle); border-radius:var(--radius); padding:2rem; border-left:3px solid var(--crimson); }
.story-club-card h4 { font-size:1.15rem; font-weight:700; margin-bottom:.4rem; }
.story-club-card span { font-size:.82rem; color:var(--crimson); display:block; margin-bottom:.6rem; }
.story-club-card p { color:var(--text-muted); font-size:.9rem; }

/* FAQ List */
.story-faq-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:1.25rem; max-width:920px; margin:0 auto; }
.story-faq-item { background:var(--surface); border:1px solid var(--border-subtle); border-radius:var(--radius); padding:1.75rem; }
.story-faq-item h4 { font-size:1.05rem; font-weight:700; color:var(--crimson); margin-bottom:.6rem; }
.story-faq-item p { color:var(--text-muted); font-size:.92rem; line-height:1.7; }

/* Grand Finale CTA */
.story-cta-box { background:linear-gradient(135deg, #1c1c20, #0b0b0c); border:1px solid var(--border); border-radius:var(--radius); padding:4.5rem 2rem; text-align:center; max-width:900px; margin:0 auto; box-shadow:0 20px 50px rgba(0,0,0,0.5); }
.story-cta-box h2 { font-size:2.4rem; font-weight:800; margin-bottom:1rem; }
.story-cta-box p { color:var(--text-muted); font-size:1.05rem; margin-bottom:2rem; }

/* Integrated Story Footer */
.story-footer { background:#070708; border-top:1px solid var(--border-subtle); padding:4rem 0 2rem; }
.story-footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.story-footer h4 { color:var(--crimson); font-size:1.05rem; margin-bottom:1rem; }
.story-footer p { color:var(--text-muted); font-size:.88rem; line-height:1.8; }
.story-footer ul { list-style:none; }
.story-footer li { margin-bottom:.5rem; }
.story-footer a { color:var(--text-muted); font-size:.88rem; }
.story-footer a:hover { color:var(--crimson); }
.story-footer-bottom { border-top:1px solid var(--border-subtle); padding-top:1.5rem; text-align:center; font-size:.82rem; color:#71717a; }

/* Subpage */
.story-subpage { padding:7.5rem 0 5rem; min-height:80vh; }
.story-sub-box { background:var(--surface); border:1px solid var(--border-subtle); border-radius:var(--radius); padding:3rem; }
.story-sub-box h1 { font-size:2.2rem; font-weight:800; margin-bottom:1.5rem; color:var(--crimson); }
.breadcrumb { font-size:.88rem; color:var(--text-muted); margin-bottom:1.5rem; }
.breadcrumb a { color:var(--crimson); font-weight:600; }

@media (max-width:768px) {
  .story-nav { display:none; }
  .timeline-container::before { left:20px; }
  .timeline-node, .timeline-node:nth-child(even) { flex-direction:column; align-items:flex-start; margin-left:40px; }
  .timeline-marker { left:-20px; }
  .timeline-content { width:100%; }
  .story-dl-grid, .story-club-grid, .story-faq-grid, .story-footer-grid { grid-template-columns:1fr; }
}