/* Story page styles (kept minimal and complementary to base.css) */
.hero {
  background: linear-gradient(0deg, rgba(232,243,227,0.6), rgba(232,243,227,0.6));
  padding: var(--space-12) 0 var(--space-10);
}
.hero-inner { align-items: center; gap: var(--space-8); }
.hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }
.hero-media { margin-top: var(--space-6); }

.section { padding: var(--space-11) 0; }
.section-alt { background-color: var(--gray-50); }

.media { margin-top: var(--space-6); }
.media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--gray-200); }

.list { list-style: disc; padding-left: 1.25rem; }
.list li { margin-bottom: var(--space-2); }

.characters-grid { gap: var(--space-6); }

#story-poll .poll-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0 var(--space-2); }
#story-poll .poll-result { font-weight: 700; color: var(--color-primary-700); margin-top: var(--space-2); }

/* Small responsive tweaks */
@media (min-width: 800px) {
  .hero-inner { grid-template-columns: 1.1fr 0.9fr; }
  .hero-media { margin-top: 0; }
}