/* ===================================================================
   THE STORY — one stream, told while you scroll (home, sheet 2).

   Replaces the one-line drawing and the copy comparison (JJ, 21 Oct
   2026): two drawings told halves of the same story, each scrolled
   sideways in its own panel. Now one stage stays in view and four steps
   scroll past it, the way apple.com tells a feature. The night is the
   globe's night (#061222) so the hero and the story read as one film;
   the colours are the SmartCast motion study's: accent #4cc2ff,
   SmartCast green #36d399, CDN amber #f0a24b.

   Without JavaScript the stage stays hidden and the four steps read as
   plain text; story.js adds .story-live once the canvas runs.
   =================================================================== */

.story{
  --night:#061222;
  --night-2:#0A1A2E;
  --star:#F2F3F0;
  --star-2:#AEB8C4;          /* 8.9:1 on --night */
  --sky:#4CC2FF;
  --cast:#36D399;
  --amber:#F0A24B;
  background-color:var(--night);
  color:var(--star-2);
  border-top:0;
}
.story h2,.story h3{color:var(--star)}
.story p{color:var(--star-2)}
.story ::selection{background-color:#36D39966;color:var(--star)}
.story a{color:var(--star)}
.story-anchor{position:absolute;margin-top:calc(-1 * (var(--nav-h) + var(--strip-h) + 18px))}

.story-intro{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  column-gap:clamp(28px,4vw,72px);align-items:end;
}
.story-intro h2{max-width:20ch}
.story-lead{font-size:1.25rem;line-height:1.5;max-width:46ch}

/* --- the body: steps on the left, the stage held on the right -------- */
.story-body{
  position:relative;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  column-gap:clamp(28px,4vw,72px);
  margin-top:clamp(28px,3.4vw,52px);
}
.story-steps{
  grid-column:1;grid-row:1;
  list-style:none;margin:0;padding:0;
}
.story-step{
  min-height:72vh;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:6vh;
  max-width:44ch;
}
.story-step:first-child{min-height:52vh;justify-content:flex-start;padding-top:2vh}
.story-step h3{
  font-size:clamp(1.6rem,2.3vw,2.25rem);line-height:1.12;letter-spacing:-.015em;
  margin-bottom:.55em;
}
.story-step p{font-size:1.125rem;line-height:1.6}

/* the active step is read in full white, the others step back one ink;
   both stay above 7:1 on the night, so nothing becomes unreadable */
.story-live .story-step h3,
.story-live .story-step p{transition:color .45s cubic-bezier(.215,.61,.355,1)}
.story-live .story-step:not(.is-on) h3{color:var(--star-2)}
.story-live .story-step:not(.is-on) p{color:#8E99A6}     /* 6.3:1 */

.story-stage{
  grid-column:2;grid-row:1;
  position:sticky;top:calc(var(--nav-h) + var(--story-dock, var(--strip-h)) + 34px);
  height:calc(100vh - var(--nav-h) - var(--strip-h) - 68px);
  min-height:420px;max-height:760px;
  align-self:start;
  display:none;
  background:radial-gradient(120% 90% at 60% 40%, var(--night-2) 0%, #030810 70%);
  overflow:hidden;
}
.story-live .story-stage{display:block}
.story-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.story-hud{
  position:absolute;right:clamp(16px,2vw,28px);top:clamp(14px,1.8vw,24px);
  text-align:right;pointer-events:none;
}
.story-hud p{margin:0}
.story-hud-cap{
  font-family:var(--display);font-weight:600;font-size:.75rem;line-height:1.3;
  letter-spacing:.08em;text-transform:uppercase;color:var(--star-2);
}
.story-hud-fig{
  margin-top:4px;
  font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(2rem,3.6vw,3.25rem);line-height:1;letter-spacing:-.02em;
  color:var(--sky);
}
.story-hud-fig [data-hud="fig"]{transition:color .4s cubic-bezier(.215,.61,.355,1)}
.story .story-hud-fig{color:var(--sky)}
.story .story-hud[data-tone="cdn"] .story-hud-fig{color:var(--amber)}
.story .story-hud[data-tone="cast"] .story-hud-fig{color:var(--cast)}
.story-hud-unit{font-size:.45em;font-weight:600;letter-spacing:0;color:var(--star-2)}
.story-hud-sub{margin-top:6px;font-size:.875rem;line-height:1.35;color:var(--star-2)}

.story-stage-note{
  transition:opacity .4s cubic-bezier(.215,.61,.355,1);
  position:absolute;left:clamp(16px,2vw,28px);bottom:clamp(12px,1.6vw,20px);right:16px;
  margin:0;font-size:.8125rem;line-height:1.4;color:#8E99A6;
}

/* the illustration's numbers belong to the cable; on the other scenes the
   note steps aside so it never sits on a label */
.story-stage[data-step]:not([data-step="0"]) .story-stage-note{opacity:0}

.story-glossary{margin-top:clamp(40px,5vw,72px);padding-top:clamp(28px,3vw,40px);border-top:1px solid #1E3048}
.story .glossary dt,.story .glossary dfn{color:var(--star)}
.story .glossary dd{color:var(--star-2)}

/* --- tablet and phone: the stage sits on top, the steps scroll under it */
@media (max-width:999px){
  .story-intro{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .story-lead{font-size:1.125rem}
  .story-body{display:block}
  .story-stage{
    /* tucked a few pixels under the strip, so no line of a step shows
       through between the strip and the stage */
    position:sticky;top:calc(var(--nav-h) + var(--story-dock, var(--strip-h)) + 24px);
    height:30vh;min-height:210px;max-height:300px;   /* JJ: no dead band on top; more room to read */
    margin-inline:calc(-1 * var(--gutter));
    z-index:2;                 /* the steps pass under the stage, not over it */
    box-shadow:0 18px 22px -10px var(--night);
  }
  .story-steps{position:relative;z-index:1}
  .story-step{min-height:58vh;padding-block:5vh;max-width:none}
  .story-step:first-child{min-height:46vh;padding-top:4vh}
  .story-step h3{font-size:1.5rem}
  .story-step p{font-size:1.0625rem}
  .story-hud-fig{font-size:2rem}
  .story-hud-sub{font-size:.8125rem}
  .story-stage-note{font-size:.75rem}
}

.story-step-note{display:none}
@media (max-width:999px){
  /* on a phone the stage is too short for the note and the labels both;
     the note travels with the first step instead */
  .story-stage-note{display:none}
  .story-step .story-step-note{display:block;margin-top:14px;font-size:.875rem;line-height:1.45;color:#8E99A6}
}

@media (prefers-reduced-motion:reduce){
  .story-live .story-step h3,
  .story-live .story-step p,
  .story-hud-fig [data-hud="fig"]{transition:none}
}