/* =====================================================================
   CoPlanAI · Mission · story.css — the scrollstory components of the Mission page.
   Adapted from the talks' talk.css (28 Sept 2026) to sit on coplanai.com's own foundation:
   site.css owns tokens, type, header, invitation and footer; this file adds only the scrolly
   (steps beside a sticky stage), the hover card, the reveal, static mode and the graphics'
   shared helpers. Every class is ms-*; colours come from the site's tokens only (light, white ground).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 · The graphics' own names for site tokens (the talk's vocabulary, light values)
   --------------------------------------------------------------------- */
:root{
  --ms-text:var(--c-text);
  --ms-label:var(--c-label);
  --ms-card:var(--ground);
  --ms-dim:color-mix(in srgb,var(--ink-4) 82%,var(--ground));    /* steps not in focus: dimmed with colour, never opacity */
  --ms-shadow:color-mix(in srgb,var(--ink) 28%,transparent);
  --ms-on-accent:var(--ground);
  --ms-mark:color-mix(in srgb,var(--gold) 22%,transparent);        /* the soft underline of <mark> */
  --ms-blend:multiply;
  --ms-rule-strong:color-mix(in srgb,var(--ink) 40%,transparent);
  /* the actors, always in the site's Venn colours */
  --ms-stake:var(--venn-stake-ring); --ms-inst:var(--venn-inst-ring); --ms-ai:var(--venn-ai-ring);
  --ms-stake-ink:var(--venn-ink-s);  --ms-inst-ink:var(--venn-ink-i);  --ms-ai-ink:var(--venn-ink-a);
  --ms-venn-core-ink:var(--ink);
  /* "the traditional way" is graphite */
  --ms-old:color-mix(in srgb,var(--ink-4) 62%,var(--ground));
  --ms-old-ink:var(--ink-4);
  --ms-old-field:color-mix(in srgb,var(--field) 70%,var(--field-2));
  --ms-ease:cubic-bezier(.2,.7,.2,1);
  --ms-ease-io:cubic-bezier(.65,0,.35,1);
}

/* ---------------------------------------------------------------------
   2 · A chapter: eyebrow with its number, h2, a lede beside it (the live Mission's chapter head)
   --------------------------------------------------------------------- */
.ms-ch{position:relative;padding-top:clamp(64px,7vw,108px)}
.ms-ch + .ms-ch::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(var(--max),calc(100% - 2*var(--gut)));height:1px;background:var(--rule)}
/* a hairline on a .wrap that keeps to the text column, not the page's edges */
.ms-hair{background:linear-gradient(var(--rule),var(--rule)) 50% 0/min(var(--max),calc(100% - 2*var(--gut))) 1px no-repeat}
.ms-hair-soft{background:linear-gradient(var(--rule-soft),var(--rule-soft)) 50% 0/min(var(--max),calc(100% - 2*var(--gut))) 1px no-repeat}
.ms-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px clamp(28px,4vw,64px);align-items:end;margin-bottom:clamp(20px,2.6vw,40px)}
.ms-head > .eyebrow{grid-column:1/-1}
.ms-head .h2{grid-column:1;max-width:17.5em}
.ms-head .lede{grid-column:2;padding-bottom:6px;max-width:30em}
.ms-head--solo .h2{grid-column:1/-1;max-width:20em}
.ms-no{display:flex;align-items:baseline;gap:.9em}
.ms-no b{font-weight:inherit;color:var(--amber);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------------
   3 · The scrolly: steps beside a sticky stage
   --------------------------------------------------------------------- */
.ms-scrolly{display:grid;grid-template-columns:minmax(0,4.3fr) minmax(0,6.7fr);column-gap:clamp(32px,4.4vw,72px);position:relative}
.ms-scrolly--wide{grid-template-columns:minmax(0,3.4fr) minmax(0,8.6fr)}
.ms-scrolly__steps{grid-column:1;grid-row:1;min-width:0;padding:6vh 0 18vh;position:relative;z-index:2}
.ms-scrolly__stage{grid-column:2;grid-row:1;min-width:0}
.ms-stage{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));display:flex;flex-direction:column;justify-content:center;padding:18px 0 22px;margin:0}
.ms-stage > svg,.ms-stage__svg{width:100%;height:auto;max-height:100%;overflow:visible;display:block}
.ms-stage__cap{margin-top:14px}

.ms-step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:4vh 0;color:var(--ms-dim);transition:color .35s ease}
.ms-step:first-child{min-height:62vh}
.ms-step:last-child{min-height:88vh}
.ms-step.is-active{color:var(--c-text)}
.ms-step > * + *{margin-top:14px}
.ms-step .body{color:inherit;max-width:30em}
.ms-step .h3,.ms-step .q{color:var(--ms-dim);transition:color .35s ease}
.ms-step.is-active .h3,.ms-step.is-active .q{color:var(--ink)}
.ms-step .lab{color:inherit}
.ms-step.is-active .lab{color:var(--c-label)}
.ms-step .h3 em{color:inherit}
.ms-step.is-active .h3 em{color:var(--amber)}
.ms-step .ms-n{font-family:var(--f-label);font-weight:var(--w-label);font-size:var(--fs-label);line-height:1;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--amber);font-variant-numeric:tabular-nums}
.ms-step:not(.is-active) .ms-n{color:var(--ms-dim)}
/* the phrase a step is about: a soft pigment underline, never a background box */
.ms-step mark{background:none;color:inherit;box-shadow:inset 0 -.32em 0 var(--mk,var(--ms-mark))}
.ms-step:not(.is-active) mark{box-shadow:none}

/* ---------------------------------------------------------------------
   4 · Pull lines, sources lines, reveal
   --------------------------------------------------------------------- */
.ms-pull{padding-block:clamp(56px,7vw,104px)}
.ms-pull blockquote{margin:0}
.ms-pull .say{max-width:20em;font-size:clamp(28px,3vw,44px);line-height:1.12}
.ms-pull cite{display:block;margin-top:20px;font-style:normal}
.ms-fine{font-size:14px;line-height:1.55;color:var(--ink-4);max-width:62em}
.ms-fine a{color:var(--ink-3);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--rule)}
.ms-fine a:hover{color:var(--amber);text-decoration-color:var(--amber)}
.ms-src{padding-top:clamp(28px,3vw,40px);padding-bottom:clamp(56px,6vw,88px)}
.ms-js .ms-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ms-ease),transform .8s var(--ms-ease)}
.ms-js .ms-reveal.is-in{opacity:1;transform:none}
.ms-js .ms-reveal[data-delay="1"]{transition-delay:.08s}.ms-js .ms-reveal[data-delay="2"]{transition-delay:.16s}

/* ---------------------------------------------------------------------
   5 · The graphics' shared helpers
   --------------------------------------------------------------------- */
.ms-g-lab{font-family:var(--f-label);font-weight:var(--w-label);font-size:13px;letter-spacing:var(--ls-label);text-transform:uppercase;fill:var(--c-label)}
.ms-g-name{font-family:var(--f-name);font-weight:var(--w-name);font-size:22px;letter-spacing:-.005em;fill:var(--ink)}
.ms-g-q{font-family:var(--f-q);font-style:italic;font-weight:var(--w-q);font-size:22px;fill:var(--ink)}
.ms-g-num{font-family:var(--f-num);font-weight:var(--w-num);font-size:44px;letter-spacing:var(--ls-num);fill:var(--ink)}
.ms-g-small{font-family:var(--f-text);font-size:15px;fill:var(--ink-3)}
.ms-g-rule{stroke:var(--rule);stroke-width:1.5;fill:none}
.ms-g-fade{transition:opacity .6s var(--ms-ease)}
.ms-g-move{transition:transform .8s var(--ms-ease),opacity .6s var(--ms-ease)}
.ms-g-off{opacity:0}

/* the hover card (MSTORY.tip) */
.ms-tip{position:fixed;z-index:120;pointer-events:none;max-width:290px;padding:11px 13px 12px;border-radius:12px;background:var(--ground);color:var(--ink);
  box-shadow:0 0 0 1px var(--rule),0 12px 28px -12px var(--ms-shadow);font-family:var(--f-text);font-size:14.5px;line-height:1.42;letter-spacing:0;
  opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.ms-tip.is-on{opacity:1;transform:none}
.ms-tip b{display:block;font-family:var(--f-name);font-weight:var(--w-name);font-size:17px;line-height:1.2;margin-bottom:3px}
.ms-tip .lab{display:block;margin-bottom:4px}

/* ---------------------------------------------------------------------
   6 · Phones and small tablets: the stage sticks on top, the steps scroll under it
   --------------------------------------------------------------------- */
@media (max-width:900px){
  .ms-head{grid-template-columns:minmax(0,1fr)}
  .ms-head .h2,.ms-head .lede{grid-column:1}
  .ms-scrolly,.ms-scrolly--wide{grid-template-columns:minmax(0,1fr)}
  .ms-scrolly__steps{grid-column:1;grid-row:2;padding:0 0 30vh;z-index:1}
  .ms-scrolly__stage{grid-column:1;grid-row:1;position:sticky;top:var(--header-h);z-index:3;height:52vh;height:52svh;min-height:300px;background:var(--ground);
    margin:0 calc(-1*var(--gut));padding:0 var(--gut);border-bottom:1px solid var(--rule-soft)}
  .ms-stage{position:relative;top:auto;height:100%;padding:8px 0}
  .ms-step{min-height:64vh}
  .ms-step:first-child{min-height:40vh}
  .ms-step .body{max-width:none}
}

/* ---------------------------------------------------------------------
   7 · Static mode (?static=1) and reduced motion: every graphic in its final
   state, nothing sticky, the steps read as plain text under their figure
   --------------------------------------------------------------------- */
.ms-static .ms-scrolly{grid-template-columns:minmax(0,1fr)}
.ms-static .ms-scrolly__stage{grid-column:1;grid-row:1;position:static;height:auto;min-height:0;margin:0;padding:0;border-bottom:0}
.ms-static .ms-scrolly__steps{grid-column:1;grid-row:2;padding:24px 0 clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:8px clamp(20px,2.4vw,40px)}
.ms-static .ms-stage{position:relative;top:auto;height:auto;min-height:0}
.ms-static .ms-step{min-height:0;padding:14px 0;color:var(--c-text);justify-content:flex-start}
.ms-static .ms-step .h3,.ms-static .ms-step .q{color:var(--ink)}
.ms-static .ms-step .ms-n{color:var(--amber)}
.ms-static .ms-step .h3 em{color:var(--amber)}
.ms-static .ms-reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .ms-js .ms-reveal{transition:none}
}

/* ---------------------------------------------------------------------
   8 · Print: final states, nothing sticky
   --------------------------------------------------------------------- */
@media print{
  .ms-stage,.ms-scrolly__stage{position:relative;height:auto;top:auto}
  .ms-step{min-height:0;color:var(--c-text)}
  .ms-reveal{opacity:1!important;transform:none!important}
}

/* ---------------------------------------------------------------------
   9 · Test mode for screenshots: ?only=<section id>&at=<step>
   Freezes every scrolly of that chapter at step n and shows only that step beside the stage.
   --------------------------------------------------------------------- */
.ms-at .ms-head,.ms-at .ms-open,.ms-at .ms-toc{display:none}
.ms-at .ms-ch{padding-top:0}
.ms-at .ms-scrolly__steps{padding:0}
.ms-at .ms-step:not(.is-at){display:none}
.ms-at .ms-step{min-height:calc(100vh - var(--header-h))}
.ms-at .ms-stage{position:relative;top:auto}