/* The opening ribbon gets its own space above the functional explanation. */
@media (min-width:701px) and (prefers-reduced-motion:no-preference) {
  .js .story-stage {
    --ribbon-space:clamp(140px,24svh,360px);
    padding-top:var(--ribbon-space);
    padding-bottom:60px;
    align-items:start;
    background:linear-gradient(180deg,transparent calc(var(--ribbon-space) - 24px),var(--ink) var(--ribbon-space));
  }
  .js .story-stage>.story-copy,
  .js .story-stage>.function-map {
    margin-top:clamp(24px,4svh,56px);
  }

  @media (max-height:820px) {
    .js .story-stage { padding-bottom:48px; }
    .story-copy>.eyebrow { margin-bottom:16px; }
    .js .example-picker { margin-bottom:20px; }
    .story-copy h2 { margin-bottom:22px; }
    .story-narrative { min-height:160px; }
    .story-index { margin-top:16px; }
    .function-map { height:min(450px,calc(100svh - var(--ribbon-space) - 75px)); }
  }
}