/* How we work: page layout only. Shared components live in components.css / fig.css. */

/* W-2: the spread. Unpinned (the CSS default) is the vertical .path with every panel opaque. */
.hww-spread { padding-block: var(--s-8) var(--s-12); }
.hww-fig { gap: var(--s-6); }
.hww-fig .spread-station { justify-items: stretch; padding-block: var(--s-6); }
.hww-fig .spread-station .h3 { max-width: none; }
.hww-fig .spread-panel { max-width: 44rem; }

@media (min-width: 768px) {
  .hww-spread:not(.spread--pinned) .spread-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); max-width: none; }
}

/* Pinned (JS adds .spread--pinned only at >= 1024 x 700, GSAP loaded, motion full) */
.hww-spread.spread--pinned { padding-block: var(--s-4) var(--s-8); }
.hww-spread.spread--pinned .hww-fig { gap: var(--s-4); }
.hww-spread.spread--pinned .spread-station { justify-items: center; align-content: start; padding-block: 0; }
.hww-spread.spread--pinned .spread-station .h3 { max-width: 14ch; min-height: 2lh; }
.hww-spread.spread--pinned .spread-panel { justify-self: stretch; gap: var(--s-2); margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); text-align: left; }
.hww-spread.spread--pinned .spread-panel .label { margin-bottom: 0; }
.hww-spread.spread--pinned .path-seg { transition: stroke var(--dur-s) var(--ease-out), opacity var(--dur-s); }

/* the six rows of every station (dot, number, label, title, readout, panel) share one grid, so the
   panel rules line up across the four columns whatever wraps */
.hww-spread.spread--pinned .path-stations { grid-template-rows: repeat(6, auto); }
.hww-spread.spread--pinned .path-station.spread-station { grid-row: span 6; grid-template-rows: subgrid; row-gap: var(--s-2); }

/* S6: the drawn path is the hero: full crimson at a heavier weight over a hairline rail */
.hww-spread .path-ink .path-rail { display: none; }
.js .hww-spread.spread--pinned .path-ink[data-orient="h"] .path-rail { display: inline; fill: none; stroke: var(--ink-rule); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
.hww-spread.spread--pinned .path-ink[data-orient="h"] .path-seg { stroke: var(--accent); stroke-width: 2.5; }
.hww-spread.spread--pinned .path-station.spread-station.is-reached::before { background: var(--accent); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--accent-soft); }

/* the scrub owns panel opacity and station fill; the reveal's .is-in must not win, and the reveal's
   stagger delays must not lag the scrub */
.hww-spread.spread--pinned .path-station.spread-station { opacity: 0.35; transition: opacity var(--dur-s) var(--ease-out) 0s, transform var(--dur-s) var(--ease-out) 0s; }
.hww-spread.spread--pinned .path-station.spread-station.is-current { opacity: 1; }
.hww-spread.spread--pinned .path-station.spread-station::before { transform: scale(0.4); transition: transform var(--dur-m) var(--ease-out) 0s, background-color var(--dur-s) var(--ease-out) 0s; }
.hww-spread.spread--pinned .path-station.spread-station.is-reached::before { transform: none; }
.hww-spread.spread--pinned .path-station.spread-station:is(:hover, :focus-within) { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  :root .hww-spread .path-station.spread-station { opacity: 1; }
  :root .hww-spread .path-station.spread-station::before { transform: none; transition: none; }
}
html[data-motion="reduce"] .hww-spread .path-station.spread-station { opacity: 1; }
html[data-motion="reduce"] .hww-spread .path-station.spread-station::before { transform: none; transition: none; }