/* Scroll-led walking trail. All content remains visible without JavaScript. */
.movement-story { --trail-paper: #f7f5ef; --trail-ink: #b96030; position: relative; isolation: isolate; overflow: hidden; padding: clamp(4rem,8vw,8rem) 0; background: var(--trail-paper); scroll-margin-top: 4rem; }
.movement-heading { max-width: 780px; margin: 0 auto clamp(3rem,7vw,6rem); text-align: center; }
.movement-heading .section-kicker { color: var(--trail-ink); }
.movement-heading h2 { font-size: clamp(2.5rem,5.4vw,5rem); line-height: 1.04; letter-spacing: -.055em; font-weight: 800; margin: 1rem 0 0; color: inherit; text-wrap: balance; }
.movement-steps { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: clamp(5rem,10vw,10rem); margin: 0; padding: 2rem 0; list-style: none; }
.movement-step { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; column-gap: clamp(4rem,10vw,10rem); align-items: center; min-width: 0; padding: 0 2rem; }
.movement-step-top { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 1rem; align-self: end; padding: 1rem 0; }
.movement-step-copy { grid-column: 2; grid-row: 2; align-self: start; padding: 0 0 1rem; background: var(--trail-paper); box-shadow: 0 0 0 16px var(--trail-paper); }
.movement-image { grid-column: 1; grid-row: 1 / 3; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px 44px 4px 4px; background: #fff; box-shadow: 0 24px 55px -35px rgba(45,49,32,.35); transform: rotate(-2deg); }
.movement-step:nth-child(even) { grid-template-columns: 1fr 1.15fr; }
.movement-step:nth-child(even) .movement-image { grid-column: 2; border-radius: 44px 4px 4px 4px; transform: rotate(2deg); }
.movement-step:nth-child(even) .movement-step-top, .movement-step:nth-child(even) .movement-step-copy { grid-column: 1; }
.movement-number { flex: 0 0 2.6rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; background: var(--trail-paper); border: 1px solid #c7bdab; border-radius: 50%; color: var(--trail-ink); font-size: 1rem; font-weight: 600; box-shadow: 0 0 0 8px var(--trail-paper); transition: background 500ms, color 500ms, border-color 500ms; }
.movement-label { color: var(--trail-ink); font-size: .73rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; background: var(--trail-paper); padding: .35rem 0; }
.movement-step h3 { font-size: clamp(1.7rem,3vw,2.8rem); line-height: 1.12; letter-spacing: -.04em; margin: .4rem 0 1.2rem; color: inherit; text-wrap: balance; }
.movement-step p { max-width: 40ch; font-size: 1.05rem; line-height: 1.75; color: var(--secondary-text); margin: 0; }
.movement-image > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.movement-tour-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 5px; height: 100%; }
.movement-tour-grid figure { position: relative; margin: 0; min-width: 0; min-height: 0; overflow: hidden; }
.movement-tour-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.movement-tour-grid figcaption { position: absolute; inset: auto 0 0; padding: 1.5rem .8rem .55rem; color: #fff; background: linear-gradient(transparent,rgba(0,0,0,.65)); font-size: .75rem; font-weight: 600; }
.movement-route { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; pointer-events: none; }
.movement-route-base, .movement-route-fill { fill: none; stroke-width: 2; }
.movement-route-base { stroke: #cfc6b6; stroke-dasharray: 3 8; }
.movement-route-fill { stroke: var(--trail-ink); stroke-linecap: round; }
.movement-route-marker { fill: var(--trail-ink); stroke: var(--trail-paper); stroke-width: 5; }
.movement-step.is-visible .movement-number { background: var(--trail-ink); border-color: var(--trail-ink); color: white; }
.movement-step.will-reveal .movement-image, .movement-step.will-reveal .movement-step-copy, .movement-step.will-reveal .movement-label { opacity: 0; translate: 0 35px; transition: opacity 850ms ease, translate 1000ms cubic-bezier(.16,1,.3,1); }
.movement-step.will-reveal .movement-step-copy { transition-delay: 120ms; }
.movement-step.will-reveal.is-visible .movement-image, .movement-step.will-reveal.is-visible .movement-step-copy, .movement-step.will-reveal.is-visible .movement-label { opacity: 1; translate: 0 0; }
:root[data-theme="dark"] .movement-story { --trail-paper: #151812; --trail-ink: #e6a16f; }
:root[data-theme="dark"] .movement-route-base { stroke: #4b5143; }
@media (max-width: 760px) {
 .movement-heading { text-align: left; }
 .movement-steps { gap: 4rem; padding-left: 2.5rem; }
 .movement-step, .movement-step:nth-child(even) { display: flex; flex-direction: column; align-items: stretch; padding: 0; }
 .movement-step-top { align-self: stretch; padding: 0 0 1rem; }
 .movement-number { position: absolute; left: -2.9rem; width: 2rem; height: 2rem; font-size: .85rem; }
 .movement-label { padding: .45rem 0; }
 .movement-image, .movement-step:nth-child(even) .movement-image { transform: none; border-radius: 3px 24px 3px 3px; }
 .movement-step-copy { padding-top: 1.5rem; }
 .movement-step p { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
 .movement-step.will-reveal .movement-image, .movement-step.will-reveal .movement-step-copy, .movement-step.will-reveal .movement-label { opacity: 1; translate: none; transition: none; }
 .movement-number { transition: none; }
 .movement-route-marker { display: none; }
}