/* =====================================================================
   Mission · 01 · medium — bridging the medium imbalance (graphic: g-medium.js; from the talk's 02)
   Light only, tokens only.
   The architect's medium is graphite (--old-ink); the residents take the
   stakeholder colour (--stake) once they hold a render of their own; AI is --ai.
   ===================================================================== */
.ms-medium-duo{position:relative;width:100%;aspect-ratio:16/10}
.ms-medium-duo__f{position:absolute;margin:0;outline:none;cursor:default;
  transition:left .9s var(--ms-ease),top .9s var(--ms-ease),width .9s var(--ms-ease)}
.ms-medium-duo__img{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r-img-s);background:var(--field);
  box-shadow:0 0 0 1px var(--rule-soft),0 22px 44px -26px var(--ms-shadow);transition:box-shadow .6s var(--ms-ease)}
.ms-medium-duo__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s var(--ms-ease)}
.ms-medium-duo__cap{margin-top:12px;color:var(--ms-old-ink);transition:color .6s var(--ms-ease)}
.ms-medium-duo__c1{display:none}
/* the chip sits on the photo: a raised card in either theme, with the AI ink */
.ms-medium-duo__tag{position:absolute;left:10px;bottom:10px;padding:5px 10px 4px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--ms-card) 92%,transparent);box-shadow:0 0 0 1px var(--rule-soft);color:var(--ms-ai-ink);font-size:10.5px;opacity:0;transition:opacity .6s var(--ms-ease) .3s}
.ms-medium-duo__tag::before{content:"\2733";margin-right:5px;color:var(--ms-ai)}
.ms-medium-duo__f.is-hot .ms-medium-duo__img,.ms-medium-duo__f:focus-visible .ms-medium-duo__img{box-shadow:0 0 0 2px var(--ink),0 22px 44px -26px var(--ms-shadow)}

/* step 01: the render dominates; the residents hold a small board of notes */
.ms-medium-duo__f--arch{left:0;top:6%;width:64%}
.ms-medium-duo__f--res{left:68%;top:38%;width:32%}
.ms-medium-duo__gen{opacity:0}

/* step 02: the residents' own render, the same size, beside it */
.ms-medium-duo[data-state="1"] .ms-medium-duo__f--arch{top:19%;width:48.5%}
.ms-medium-duo[data-state="1"] .ms-medium-duo__f--res{left:51.5%;top:19%;width:48.5%}
.ms-medium-duo[data-state="1"] .ms-medium-duo__notes{opacity:0}
.ms-medium-duo[data-state="1"] .ms-medium-duo__gen{opacity:1}
.ms-medium-duo[data-state="1"] .ms-medium-duo__tag{opacity:1}
.ms-medium-duo[data-state="1"] .ms-medium-duo__f--res .ms-medium-duo__img{box-shadow:0 0 0 2px var(--ms-stake),0 22px 44px -26px var(--ms-shadow)}
.ms-medium-duo[data-state="1"] .ms-medium-duo__f--res .ms-medium-duo__cap{color:var(--ms-stake-ink)}
.ms-medium-duo[data-state="1"] .ms-medium-duo__c0{display:none}
.ms-medium-duo[data-state="1"] .ms-medium-duo__c1{display:inline}

.ms-medium-duo--still,.ms-medium-duo--still *{transition:none!important}

/* the close: the live Mission's struck terms (Top-down, Bottom-up) beside the talk's line */
.ms-medium-close{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3.4vw,56px);align-items:center;padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(24px,3vw,40px)}
.ms-medium-close__terms{display:flex;flex-direction:column;gap:.06em;margin:0;font-family:var(--f-display);font-weight:var(--w-display);font-variation-settings:var(--fvs-display);font-size:var(--fs-h2);line-height:1.08;letter-spacing:var(--ls-h2);color:var(--ink-4)}
.ms-medium-close__terms s{text-decoration-line:line-through;text-decoration-color:var(--amber);text-decoration-thickness:max(2px,.05em);text-decoration-skip-ink:none}
.ms-medium-close blockquote{margin:0}
.ms-medium-close .say{max-width:19em}
.ms-medium-close cite{display:block;margin-top:16px;font-style:normal}
.ms-medium-src{padding-bottom:8px;max-width:58em}

@media (max-width:900px){
  .ms-medium-close{grid-template-columns:minmax(0,1fr);align-items:start}
  .ms-medium-close__terms{flex-direction:row;flex-wrap:wrap;gap:0 .5em}
  /* talk.css layers the steps (z-index 2) over the phone's sticky stage (z-index 1); lift this one so steps pass under it */
  .ms-medium-scrolly .ms-scrolly__stage{z-index:3}
}
@media (max-width:560px){
  .ms-medium-duo__cap{margin-top:7px;font-size:9.5px;letter-spacing:.1em}
  .ms-medium-duo__tag{left:6px;bottom:6px;font-size:8.5px;padding:3px 7px 2px}
}
/* static reading: the finished state, not too large; on phones talk.css keeps the stage sticky at 52vh, so release it */
.ms-static .ms-medium-duo{max-width:920px}
.ms-static .ms-medium-scrolly .ms-scrolly__stage{position:relative;top:auto;height:auto;min-height:0}