/* ============ STORYTELLING (sticky scroll) ============ */
.story { position: relative; background: var(--background); height: 300vh; }
.story-sticky {
  position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden;
}
.story-grid {
  max-width: 80rem; width: 100%; margin: 0 auto; padding: 0 1.25rem;
  display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center;
}
@media (min-width: 640px) { .story-grid { padding: 0 2rem; } }
@media (min-width: 768px) { .story-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }

.story-left { position: relative; }
.story-text-wrap { position: relative; min-height: 300px; }
.story-chapter {
  position: absolute; inset: 0; opacity: 0; transform: translateY(30px);
}
.story-chapter .no {
  font-family: "Cabinet Grotesk", sans-serif; font-weight: 900; line-height: 1;
  font-size: 6rem; display: block;
}
@media (min-width: 640px) { .story-chapter .no { font-size: 8rem; } }
.story-chapter h3 { font-family: "Cabinet Grotesk", sans-serif; font-weight: 800; letter-spacing: -.02em; font-size: 2rem; margin: .5rem 0 0; }
@media (min-width: 640px) { .story-chapter h3 { font-size: 3rem; } }
.story-chapter p { margin: 1rem 0 0; font-size: 1.05rem; line-height: 1.7; color: var(--muted-foreground); max-width: 28rem; }

.story-dots { margin-top: 2.5rem; display: flex; gap: .5rem; }
.story-dot { height: .75rem; width: 12px; border-radius: 999px; background: var(--border); transition: width .3s ease, background-color .3s ease; }
.story-dot.active { width: 40px; background: var(--primary); }

/* Right images */
.story-right { position: relative; width: 100%; aspect-ratio: 4/5; }
@media (min-width: 640px) { .story-right { aspect-ratio: 1/1; } }
.story-img-group { position: absolute; inset: 0; opacity: 0; }
.story-img-main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px 3rem 3rem 3rem; }
.story-img-sec {
  position: absolute; bottom: -1.25rem; left: -1.25rem; width: 42%; aspect-ratio: 4/3;
  object-fit: cover; border-radius: 1rem; border: 4px solid var(--background); box-shadow: 0 25px 50px rgba(18,33,46,.2);
}
.story-chip {
  position: absolute; top: -1rem; right: -1rem; border-radius: 1rem; padding: .75rem 1rem; box-shadow: 0 15px 30px rgba(0,0,0,.2);
}
.story-chip span { font-family: "Cabinet Grotesk", sans-serif; font-weight: 900; font-size: 1.5rem; line-height: 1; color: var(--background); }