/* One portfolio map travels from the track overview to the detailed portfolio.
   The ordinary document layout is the no-JS, mobile, print and reduced-motion fallback. */
.portfolio-origin, .portfolio-simple, .portfolio-flow, .portfolio-stack-hint { display:none; }
.portfolio-story.is-scrolling {
  position:relative;
  width:min(980px, calc(100vw - 48px));
  margin-left:calc((min(712px, calc(100vw - 48px)) - min(980px, calc(100vw - 48px))) / 2);
}
.is-scrolling .how-overview {
  display:grid;
  grid-template-columns:32% minmax(0, 1fr);
  gap:32px;
  align-items:start;
  min-height:400px;
}
.is-scrolling .how-copy {
  display:grid;
  grid-template-rows:var(--copy-track-1) var(--copy-track-2) var(--copy-track-3);
  row-gap:var(--copy-gap);
  padding:10px 0 0 24px;
  opacity:var(--copy-opacity, 1);
}
.is-scrolling .how-copy p {
  width:auto;
  margin:0;
  font-size:1.12rem;
  line-height:1.5;
}
.is-scrolling .how-copy p:nth-of-type(1) strong { color:#cf5656; }
.is-scrolling .how-copy p:nth-of-type(2) strong { color:#777; }
.is-scrolling .how-copy p:nth-of-type(3) strong { color:#2f6db5; }
.is-scrolling .portfolio-origin { display:block; height:390px; }
.is-scrolling .practice-intro {
  max-width:712px;
  margin:2rem auto 0;
  opacity:var(--intro-opacity, 0);
}
.is-scrolling .portfolio-destination { padding-top:20px; }
.is-scrolling figure.stf-map-fig {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  margin:0;
  transform-origin:top left;
  z-index:1;
}
.is-scrolling .stf-map .map-diagram { gap:var(--band-gap, 6px); }
.is-scrolling .stf-map .mband { box-sizing:border-box; }
.is-scrolling .stf-map .mband > header { font-size:var(--track-size, 1rem); }
.is-scrolling .stf-map .mband > header .role { font-size:.85em; }
.is-scrolling .stf-map .mband > .cols { opacity:var(--detail-opacity, 1); }
.is-scrolling .stf-map .slots { opacity:var(--project-opacity, 1); }
.is-scrolling.is-overview .stf-map .mband > .cols { visibility:hidden; }
.is-scrolling .portfolio-simple {
  position:absolute;
  inset:50px 18px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  opacity:var(--simple-opacity, 1);
  font-size:21px;
  line-height:1.3;
  pointer-events:none;
}
.portfolio-simple > span, .portfolio-stack-hint > span { padding:5px 12px; border:1px solid #bbc3cd; background:#ffffffa8; border-radius:6px; }
.is-scrolling .stf-map .b-stack > .cols { opacity:1; }
.is-scrolling.is-overview .stf-map .b-stack > .cols { visibility:visible; }
.is-scrolling.is-morphing .stf-map .b-stack > .cols {
  position:absolute;
  top:var(--stack-top);
  left:9px;
  right:9px;
  bottom:9px;
  max-height:none;
}
.is-scrolling.is-morphing .stf-map .b-stack > .cols > .col {
  position:absolute;
  top:0;
  left:var(--column-x);
  width:var(--column-width);
  height:100%;
  overflow:hidden;
}
.is-scrolling.is-morphing .stf-map .b-stack .c-partner { opacity:var(--detail-opacity); }
.is-scrolling.is-morphing .stf-map .b-stack h5 { font-size:var(--stack-title-size); }
.is-scrolling.is-morphing .portfolio-stack-hint {
  display:flex;
  position:absolute;
  top:50%;
  left:12px;
  right:12px;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  text-align:center;
  font-size:17px;
  line-height:1.4;
  opacity:var(--simple-opacity);
  pointer-events:none;
}
.is-scrolling .portfolio-flow {
  display:block;
  position:absolute;
  bottom:calc(var(--band-gap, 48px) * -.5 - 10px);
  left:0;
  width:100%;
  text-align:center;
  font-size:18px;
  color:var(--muted);
  opacity:var(--simple-opacity, 1);
  pointer-events:none;
}
.is-scrolling figure.stf-map-fig > figcaption { opacity:var(--project-opacity, 1); }
/* No clipping on the final map: contextual tooltips must escape their bands. */
.is-scrolling.is-morphing figure.stf-map-fig { pointer-events:none; }
.is-scrolling.is-morphing .stf-map .mband:not(.b-stack) > .cols { overflow:hidden; max-height:calc(100% - 28px); }
@media print {
  .portfolio-story.is-scrolling { width:auto; margin:0; }
  .is-scrolling .how-overview { display:block; min-height:0; }
  .is-scrolling .how-copy { display:block; padding:0; }
  .is-scrolling .how-copy p { margin:0 0 1rem; }
  .is-scrolling .how-copy p strong { color:inherit; }
  .is-scrolling .how-copy, .is-scrolling .practice-intro { opacity:1; }
  .is-scrolling .portfolio-origin, .is-scrolling .portfolio-simple, .is-scrolling .portfolio-flow,
  .is-scrolling.is-morphing .portfolio-stack-hint { display:none; }
  .is-scrolling .portfolio-destination { height:auto!important; }
  .is-scrolling figure.stf-map-fig { position:static; transform:none!important; }
  .is-scrolling .stf-map .mband { height:auto!important; }
  .is-scrolling .stf-map .map-diagram { gap:6px; }
  .is-scrolling .stf-map .mband > .cols, .is-scrolling .stf-map .slots, .is-scrolling figure.stf-map-fig > figcaption { opacity:1; }
  .is-scrolling.is-overview .stf-map .mband > .cols { visibility:visible; }
  .is-scrolling.is-morphing .stf-map .mband:not(.b-stack) > .cols { max-height:none; overflow:visible; }
  .is-scrolling.is-morphing .stf-map .b-stack > .cols { position:static; }
  .is-scrolling.is-morphing .stf-map .b-stack > .cols > .col { position:static; width:auto; height:auto; overflow:visible; opacity:1; }
  .is-scrolling.is-morphing .stf-map .b-stack h5 { font-size:.9rem; }
}