/* ==========================================================================
   STORY — the handful of rules specific to the long-form case-study
   template that don't belong in the general component kit.
   ========================================================================== */

.story-nav-back{ padding-top: var(--card-gap); }

.story-hero{ padding-block: var(--card-gap) var(--story-gap); text-align: center; }
.story-hero .story-kicker{ font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--card-gap); }
.story-hero .story-tags{ display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--card-gap); }
.story-hero h1{ font-size: var(--display-xl); max-width: 18ch; margin-inline: auto; }
.story-lede{ font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.5; max-width: 52ch; margin-inline: auto; color: var(--ink-soft); }
.story-lede em{ font-style: italic; color: var(--accent); }

.story-reflection{ text-align: center; padding-block: var(--section-gap); }
.story-reflection p{ max-width: 56ch; margin-inline: auto; font-size: var(--text-lg); }