/* ==========================================================================
   Story page — small helpers only.
   2026-08-09: the banner-overlay and "at a glance" card rules that used to
   live here were fighting story.css's layout (that's what caused the
   broken, overlapping story pages). story.css is now the single source of
   truth for .story-page layout — this file only adds the scroll-reveal
   animation and a subtle image hover, neither of which touches layout.
   ========================================================================== */

.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-editorial,ease),transform .8s var(--ease-editorial,ease)}
.reveal.in-view{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

.story-page .story-figure img{transition:transform 1.1s var(--ease-editorial,ease)}
.story-page .story-figure:hover img{transform:scale(1.03)}

/* ---- Decisive overrides ----
   modern-refresh.css and density-review.css both still carry old, unscoped
   `.story-body` / `.story-figure` rules (card backgrounds, huge fluid type,
   1120px max-widths) left over from earlier redesigns. They aren't scoped
   to .story-page and this file loads last, so !important here is the only
   reliable way to guarantee the single clean reading column actually wins,
   without hunting every stray legacy rule across the codebase. */
.story-page .story-body{
  max-width:700px!important;
  background:none!important;
  padding:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.story-page .story-body>p,
.story-page .story-body .story-intro,
.story-page .story-body .story-deck{
  max-width:none!important;
}
.story-page .story-body>p,
.story-page .story-body .story-intro{
  font-size:18px!important;
  line-height:1.75!important;
}
.story-page .story-body .story-deck{
  font-size:clamp(19px,1.9vw,22px)!important;
  line-height:1.5!important;
  font-style:italic!important;
}
.story-page .story-body blockquote{
  max-width:none!important;
  font-size:clamp(20px,2.1vw,24px)!important;
  line-height:1.4!important;
}
.story-page .story-figure,
.story-page .story-body figure{
  width:100%!important;
  max-width:none!important;
  margin:38px 0!important;
  grid-column:auto!important;
}