/* The pinned stage's story (src/story/): the trade and the third option.
   The stage (src/page.css) stays pinned through .story; each state's section
   is taller than the viewport, and its copy holds beside the stage for the
   section's pinned range (height minus one viewport) while the camera holds
   the state. src/story/timeline.js reads these sections' positions, so the
   scroll and the layout never disagree. Lengths are whole pixels, so the
   pinned copy lands on the same pixels whichever way the page scrolls.

   Wide (901px and up): the copy sits at the left on black, vertically
   centred, clear of the stage's subject on the right. Stacked (900px and
   below): the stage pins at the top and the copy holds below it. The
   story's script shows each copy only while the stage is at its state
   (src/story/timeline.js, copyAt), so none crosses the subject between.

   The third option's copy leaves with the stage: its sticky box ends where
   the stage's does, so both are released at the same scroll (the end of
   .story, which the third option ends) and scroll up together, unfaded.
   Stacked, that box is empty (its copy hangs below it), and the job below
   leaves the hanging copy its room, --story-overhang
   (src/sections/job.css). */

:root {
  --story-overhang: 0px;
  /* The trade → third option move's own scroll, between the trade's
     section and the third option's (src/story/timeline.js runs the move
     from the trade's hold to the third option's across it). */
  --story-move: round(175svh, 1px);
}

.trade, .third-option { position: relative; }
.trade { height: round(260svh, 1px); }
.third-option { height: round(185svh, 1px); margin-top: var(--story-move); }

.story-copy {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  width: min(38vw, 660px);
  height: 100svh;
  padding: 26px 0 0 var(--gutter);
}

.lead {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 60px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}
.lead-turn { font-weight: 600; color: var(--paper); }
.trade-body { max-width: 23em; margin-top: clamp(28px, 3vw, 52px); font-size: clamp(16px, 1.3vw, 21px); }

.payoff {
  max-width: 13.5em;
  margin: 0;
  font-size: clamp(26px, 2.6vw, 46px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--paper);
  text-wrap: balance;
}
.payoff-turn { font-weight: 600; }

/* Wide: the third option's box is as tall as the stage (a viewport, or
   680px on a short one), so it is released with it. */
.third-option .story-copy { height: max(100svh, 680px); }

/* Stacked: the stage (clamp(440px, 120vw, 720px) tall) pins with its top
   12% above the viewport; the copy holds in the rest. */
@media (max-width: 900px) {
  /* The copy starts a section's space below the stage, as the bands did,
     so the hero ends with the stage. */
  .trade { height: round(250svh, 1px); padding-top: var(--section-space); }
  .third-option { height: round(140svh, 1px); }
  .story-copy {
    top: round(clamp(440px, 120vw, 720px) * 0.88, 1px);
    justify-content: flex-start;
    width: auto;
    height: calc(100svh - round(clamp(440px, 120vw, 720px) * 0.88, 1px));
    padding: clamp(20px, 4vw, 36px) var(--gutter) 0;
  }
  .lead { max-width: 16em; font-size: clamp(24px, 4.6vw, 40px); }
  .trade-body { margin-top: clamp(14px, 2.4vw, 24px); font-size: clamp(15px, 2vw, 18px); line-height: 1.45; }
  .payoff { font-size: clamp(24px, 4.4vw, 36px); }
  /* The third option's box ends at the stage's bottom edge, where it
     sticks: it has no height, and its copy (at most four lines) hangs
     below it by the overhang. */
  :root { --story-overhang: calc(clamp(20px, 4vw, 36px) + 4.8 * clamp(24px, 4.4vw, 36px)); }
  .third-option .story-copy { height: 0; padding-top: 0; }
  .third-option .payoff { margin-top: clamp(20px, 4vw, 36px); }
}