/* Markers share the media's grid area vertically, so copy length cannot move them. */
.icon-timeline{--timeline-gutter:72px;--timeline-gap:clamp(18px,2.6vw,40px);position:relative;isolation:isolate}
.icon-timeline::before,.icon-timeline::after{content:"";display:block;position:absolute;z-index:-1;left:var(--timeline-x,50%);top:var(--timeline-top,0px);bottom:auto;height:var(--timeline-height,100%);width:3px;transform:translateX(-50%);pointer-events:none}
.icon-timeline::before{background:radial-gradient(circle,#a7b6be 1.2px,transparent 1.5px) center top/3px 9px repeat-y}
.icon-timeline::after{background:#ed873c;transform:translateX(-50%) scaleY(var(--timeline-progress,0));transform-origin:top center;transition:none;animation:none}
.icon-timeline>.home-step::before,.icon-timeline>.chapter::before{content:none;display:none}
.timeline-marker{display:block;grid-area:marker;align-self:center;justify-self:center;width:68px;height:68px;background:white;border-radius:50%;color:#2f4453;position:relative;z-index:1;pointer-events:none}
.timeline-marker>svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.home-journey.icon-timeline>.home-step{grid-template-columns:minmax(0,1fr) var(--timeline-gutter) minmax(0,1fr);grid-template-areas:'heading marker media' 'thought marker media' 'detail marker media';column-gap:var(--timeline-gap)}
.home-journey.icon-timeline>.home-step:nth-child(even){grid-template-areas:'media marker heading' 'media marker thought' 'media marker detail'}
.home-journey.icon-timeline .step-media{width:100%;min-width:0}
.home-journey.icon-timeline .step-heading{gap:0}
.journey.icon-timeline>.chapter{grid-template-columns:minmax(0,1fr) var(--timeline-gutter) minmax(0,1fr);grid-template-areas:'copy marker visual';column-gap:var(--timeline-gap);align-items:center}
.journey.icon-timeline>.chapter.reverse{grid-template-areas:'visual marker copy'}
.journey.icon-timeline>.chapter>.chapter-copy{grid-area:copy;min-width:0;order:0}
.journey.icon-timeline>.chapter>:not(.chapter-copy):not(.timeline-marker){grid-area:visual;min-width:0}
.journey.icon-timeline .timeline-held{display:grid;place-items:center;width:100%;aspect-ratio:16/9;padding:24px;background:var(--mist);color:var(--muted);font-size:15px;text-align:center}
.week-page .chapter-nav .wrap{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:700px){
 .icon-timeline{--timeline-gutter:48px;--timeline-gap:14px}
 .week-page .chapter-nav .wrap{grid-template-columns:1fr}
 .timeline-marker{width:48px;height:48px}
 .home-journey.icon-timeline>.home-step,.home-journey.icon-timeline>.home-step:nth-child(even){grid-template-columns:var(--timeline-gutter) minmax(0,1fr);grid-template-areas:'. heading' '. thought' 'marker media' '. detail';padding:20px 0 24px;row-gap:14px;column-gap:var(--timeline-gap)}
 .home-journey.icon-timeline .journey-more{margin-left:calc(var(--timeline-gutter) + var(--timeline-gap))}
 .home-journey.icon-timeline .step-held{padding:18px}
 .journey.icon-timeline>.chapter,.journey.icon-timeline>.chapter.reverse{grid-template-columns:var(--timeline-gutter) minmax(0,1fr);grid-template-areas:'. copy' 'marker visual';column-gap:var(--timeline-gap);row-gap:26px}
 .week-page .journey.icon-timeline .question-board{padding:20px}
 .week-page .journey.icon-timeline .day-pair{grid-template-columns:1fr;gap:16px}
 .week-page .journey.icon-timeline .day-pair>div{min-height:0;padding:22px}
 .week-page .journey.icon-timeline .day-pair svg{margin-block:18px}
 .journey.icon-timeline .fitting-topics button{grid-template-columns:18px minmax(0,1fr) 20px;gap:6px;padding-inline:8px}
}
@media(prefers-reduced-motion:reduce){.icon-timeline::after{transform:translateX(-50%)!important}}
.reduce-motion .icon-timeline::after{transform:translateX(-50%)!important}

/* Face-free source photography, never a stand-in for a printed prototype. */
.icon-timeline .timeline-photo{margin:0;width:100%;min-width:0;aspect-ratio:16/9;overflow:hidden;background:transparent;padding:0;border:0;clip-path:none}
.icon-timeline .timeline-photo img{display:block;width:100%;height:100%;object-fit:cover;clip-path:none;filter:none;border:0}
.home-journey.icon-timeline>.home-step.timeline-text-only{grid-template-areas:'heading marker .' 'thought marker .' 'detail marker .';row-gap:14px}
.journey.icon-timeline>.chapter.timeline-text-only{grid-template-areas:'copy marker .'}
@media(max-width:700px){
 .home-journey.icon-timeline>.home-step.timeline-text-only,.home-journey.icon-timeline>.home-step.timeline-text-only:nth-child(even){grid-template-areas:'marker heading' 'marker thought' 'marker detail'}
 .journey.icon-timeline>.chapter.timeline-text-only{grid-template-areas:'marker copy';row-gap:0}
 .icon-timeline .timeline-photo{aspect-ratio:16/9}
}

@media(max-width:700px){
 .icon-timeline .timeline-photo:has(img[src="assets/l16-poster.jpg"]){background:#214398}
 .icon-timeline .timeline-photo img[src="assets/l16-poster.jpg"]{object-fit:contain}
}

/* Real prototype and fitting scenes: intentional crops keep smile, mirror and team together. */
.icon-timeline .timeline-photo--patient img{object-position:50% 58%}
.icon-timeline .timeline-photo--fitting img{object-position:50% 62%}
@media(max-width:700px){
 .home-journey.icon-timeline .timeline-photo--patient,.home-journey.icon-timeline .timeline-photo--fitting{height:auto;min-height:0;aspect-ratio:16/9}
 .home-journey.icon-timeline .timeline-photo--patient img,.home-journey.icon-timeline .timeline-photo--fitting img{height:100%;min-height:0}
}
