/* The story (story.js): "One job, start to finish", one car through six real screens, a camera on
   each picture. A fresh sheet at the end of the features: copy left, the window right; one column on
   phones, the window stuck under the header where the screen is tall enough. After style.css. */
.story {
  margin-top: clamp(80px, 10vw, 150px);
  padding: clamp(64px, 7vw, 120px) 0;
  border-block: 1px solid var(--line);
  background: var(--sheet);
}
.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.story__lede {
  max-width: 40ch;
  margin-top: 20px;
  color: var(--ink-2);
}
.story__steps {
  margin-top: 36px;
}
/* each step is one button; their left borders make the rail, the current one fills orange (story.js
   sets --fill over the stop's running time) */
.story__steps button {
  position: relative;
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr);
  align-items: baseline;
  width: 100%;
  min-height: 44px;
  padding: 14px 0 14px 24px;
  border: 0;
  border-left: 2px solid var(--line);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.story__steps button::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--orange);
  transform: scaleY(var(--fill, 0));
  transform-origin: 50% 0;
}
.story__n {
  font: 500 0.78rem/1 var(--font-mono);
  color: var(--ink-3);
}
.story__name {
  font: 500 1.35rem/1.2 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink-3);
  transition: color 0.3s var(--ease-out);
}
.story__line {
  grid-column: 2;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.5;
}
.story__steps [aria-current] .story__n {
  color: var(--accent-text);
}
.story__steps [aria-current] .story__name,
.story__steps button:hover .story__name {
  color: var(--ink);
}
.story__play {
  margin-top: 18px;
}
/* keyboard focus brings a step or the play button into view clear of the fixed header */
.story__steps button,
.story__play {
  scroll-margin-top: calc(var(--head-h) + 8px);
}
.story__note {
  margin-top: 28px;
  color: var(--ink-3);
  font-size: 0.85rem;
}

/* the window: one screen at a time, the camera is a transform on its picture */
.win--story {
  width: 100%;
}
.js .story__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
/* pictures stay unrendered (so unfetched) until the story is near: the current one, then the rest;
   the hidden ones are out of the accessibility tree too, once the crossfade is over */
.js .story__shot {
  position: absolute;
  inset: 0;
  display: none;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0s 0.6s,
    visibility 0s 0.6s;
}
.js .story:not(.is-live) .story__shot:first-child,
.story.is-near .story__shot.is-on,
.story.is-warm .story__shot {
  display: block;
}
.js .story:not(.is-live) .story__shot:first-child,
.story__shot.is-on {
  z-index: 1;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.6s var(--ease-out);
}
.story__shot img {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  will-change: transform;
}

@media (min-width: 900px) {
  .story__grid {
    grid-template-columns: minmax(320px, 5fr) 8fr;
    column-gap: clamp(32px, 4vw, 72px);
    align-items: center;
  }
  /* whole and inside the screen: never taller than the screen under the header */
  .win--story {
    justify-self: end;
    max-width: min(100%, calc((100vh - var(--head-h) - 120px) * 16 / 9));
  }
}
/* wide screens: the content edge on the left, the right gutter on the right, as the features above */
@media (min-width: 1800px) {
  .story > .wrap {
    max-width: none;
    padding-left: max(var(--gut), calc((100% - var(--wrap)) / 2));
    padding-right: var(--gut);
  }
}
/* phones: title, lede, window, steps, play. The window shows whole under the header: as wide as the
   content or as the screen's height allows (6.5rem: its bars), centred */
@media (max-width: 899.98px) {
  .story__copy {
    display: contents;
  }
  .story__steps,
  .story__play {
    order: 1;
  }
  .story__steps {
    margin-top: 24px;
  }
  .win--story {
    margin-top: 28px;
  }
  .js .win--story {
    justify-self: center;
    max-width: calc((100svh - var(--head-h) - 8px - 6.5rem) * 16 / 9);
  }
  /* two lines kept for every caption, so the window never changes height */
  .win--story .win__cap {
    min-height: calc(3.2em + 24px);
  }
}
/* It sticks under the header (12 px of sheet round it, the steps passing beneath) only where the
   screen holds it and a whole step below: 56.25vw its screen area at most, 20.5em the header, bars,
   sheet and tallest step (em: the reader's text size); focus scrolls clear of it. Elsewhere it scrolls
   with the page. Never without JS (the six screens stack). */
@media (max-width: 899.98px) and (min-height: calc(56.25vw + 20.5em)) {
  .js .win--story {
    position: sticky;
    top: calc(var(--head-h) + 8px);
    z-index: 2;
    box-shadow:
      0 0 0 1px var(--line),
      0 0 0 12px var(--sheet);
  }
  .js .story__steps button,
  .js .story__play {
    scroll-margin-top: calc(var(--head-h) + 20px + 6.5rem + (100vw - 2 * var(--gut)) * 9 / 16);
  }
}

/* the first time the window comes into view its screen plots in (the page's plotter wipe) */
@media (prefers-reduced-motion: no-preference) {
  .story.is-live:not(.is-seen) .story__stage {
    clip-path: inset(0 0 100% 0);
  }
  .story.is-seen .story__stage {
    animation: shot-wipe 0.95s var(--wipe-ease) both;
  }
  .story.is-seen .story__stage::after {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, var(--orange) 0 1px, rgba(249, 115, 22, 0.2) 1px, rgba(249, 115, 22, 0) 22px);
    animation:
      pw-run 0.95s var(--wipe-ease) both,
      pw-fade 0.95s linear both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .story__shot,
  .story__shot.is-on,
  .story__name {
    transition: none;
  }
}