/* A continuous visual thread. No scroll containers, pinning or distances change here. */
.connected-thread{display:none;position:absolute;inset:0;width:100%;overflow:visible;pointer-events:none;fill:none;stroke:#81704f;stroke-linecap:round;stroke-linejoin:round;z-index:1}
.has-connected-thread>.journey-sticky>.connected-thread{display:block}
.connected-thread path{vector-effect:non-scaling-stroke}
.connected-thread-base{stroke-width:1.1;opacity:.3}
.connected-thread-ink{stroke-width:2.6}
.connected-thread-ink path{stroke-dasharray:1;stroke-dashoffset:1}
.has-connected-thread.is-horizontal .journey-progress,.has-connected-thread.is-horizontal .life-thread{visibility:hidden}
.has-connected-thread.is-horizontal .case-controls{border-top:0}
.has-connected-thread .arrival-route-line{stroke:#81704f}
.has-connected-thread .arrival-route-line path{vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.has-connected-thread [data-route-progress]{stroke-width:2.6}
.has-connected-thread .arrival-route-base{stroke-width:1.1;opacity:.3}
.has-connected-thread.is-horizontal{border-block:0}
.guidance-thread svg{stroke:#81704f;stroke-width:2.6}
.guidance-thread svg path{vector-effect:non-scaling-stroke}

/* Four individual studies, composed as one close group. */
.life-portraits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:0;align-items:center;justify-content:center;width:min(100%,460px);height:380px;margin-inline:auto}
.life-portraits>img,.life-portraits>img+img{width:100%;height:100%;object-fit:contain;align-self:center;mix-blend-mode:multiply}
.life-portraits>img:nth-child(2n){transform:translateX(-5%)}
.life-portraits>img:nth-child(2n+1){transform:translateX(5%)}
#life-now .life-visual figcaption{text-align:center;margin-top:12px}

/* Give architecture the same presence as the large vehicle studies. */
.arrival-visual>.hotel-arrival-drawing,.arrival-visual>.clinic-arrival-drawing,
.arrival-journey.is-horizontal .arrival-visual>.hotel-arrival-drawing,
.arrival-journey.is-horizontal .arrival-visual>.clinic-arrival-drawing{height:clamp(300px,43vh,460px);width:112%;max-width:none;margin-left:-6%;object-fit:contain}
.arrival-visual:has(>.hotel-arrival-drawing) figcaption,.arrival-visual:has(>.clinic-arrival-drawing) figcaption{margin-top:2px;text-align:center}
@media(min-width:1000px) and (max-height:800px){
 .life-portraits{height:310px;width:min(100%,400px)}
 .arrival-journey.is-horizontal .arrival-visual>.hotel-arrival-drawing,
 .arrival-journey.is-horizontal .arrival-visual>.clinic-arrival-drawing{height:310px}
}
@media(min-width:1000px) and (max-height:679px){
 html.compact-journey .life-portraits{height:250px;width:min(100%,360px)}
 html.compact-journey .arrival-journey.is-horizontal .arrival-visual>.hotel-arrival-drawing,
 html.compact-journey .arrival-journey.is-horizontal .arrival-visual>.clinic-arrival-drawing{height:245px}
}
@media(max-width:999px){
 .life-portraits{height:320px;width:min(100%,400px)}
 html.compact-journey .life-portraits{height:270px}
 html.compact-journey .arrival-journey.is-horizontal .arrival-visual>.hotel-arrival-drawing,
 html.compact-journey .arrival-journey.is-horizontal .arrival-visual>.clinic-arrival-drawing{height:260px}
}
@media(max-width:599px){
 .life-portraits{height:330px;width:100%}
 .arrival-visual>.hotel-arrival-drawing,.arrival-visual>.clinic-arrival-drawing{height:auto;aspect-ratio:1.35;width:108%;margin-left:-4%}
 .connected-thread-ink{stroke-width:2}
}
@media(prefers-reduced-motion:reduce){
 .connected-thread-ink path{stroke-dasharray:none;stroke-dashoffset:0}
}
@media print{.connected-thread{display:none!important}}