/* Kaitu Journal interactive: "Five steps, one road" — a paper road drawn as you scroll, the five steps of a Kaitu plan
   pinned in place (/assets/js/interactives/five-steps.js). Once the home page's "How it works"; scoped to .how. */
.how { padding-block: clamp(48px, 6vw, 88px); }
.how__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.how__head .h-section { font-size: var(--fs-2xl); margin-top: 12px; }
.how__head .lede { max-width: 38ch; }
@media (max-width: 860px) { .how__head { display: block; } .how__head .lede { margin-top: 14px; } }
.how { background: var(--paper-2); overflow: hidden; }
.how__stage { position: relative; }
.how__road { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.how__road .road-bed { fill: none; stroke: rgba(26,23,18,.07); stroke-width: 30; stroke-linecap: round; }
.how__road .road-ink { fill: none; stroke: var(--ink); stroke-width: 30; stroke-linecap: round; }
.how__road .road-dash { fill: none; stroke: var(--paper); stroke-width: 2.5; stroke-dasharray: 12 14; stroke-linecap: round; }
.how__road .road-link { stroke: var(--seal); stroke-width: 1.5; stroke-dasharray: 3 5; fill: none; }
.how__road .road-node { fill: var(--paper-2); stroke: var(--seal); stroke-width: 3; }
.how__car { position: absolute; left: 0; top: 0; width: 56px; height: 36px; margin: -18px 0 0 -28px; z-index: 3; filter: drop-shadow(0 6px 8px rgba(26,23,18,.25)); }
.how .steps { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: auto 150px auto; column-gap: 18px; }
.how .step { background: var(--card); border-radius: var(--r-lg); padding: 24px 22px 22px; box-shadow: var(--shadow-paper); border: 1px solid rgba(26,23,18,.06); min-height: 230px; display: flex; flex-direction: column; }
.how .step:nth-child(odd) { grid-row: 1; align-self: end; }
.how .step:nth-child(even) { grid-row: 3; }
.how .step:nth-child(1) { grid-column: 1; } .step:nth-child(2) { grid-column: 2; } .step:nth-child(3) { grid-column: 3; } .step:nth-child(4) { grid-column: 4; } .step:nth-child(5) { grid-column: 5; }
.step__n { display: flex; align-items: center; justify-content: space-between; }
.step__n b { font-family: var(--f-cjk); font-weight: 900; font-size: 2.2rem; color: var(--seal); line-height: 1; min-width: 1.2em; }
.step__n span { font: 500 11px/1 var(--f-mono); letter-spacing: .16em; color: var(--muted); }
.how .step h3 { font-family: var(--f-display); font-size: 1.45rem; letter-spacing: -.02em; margin-top: 20px; line-height: 1.08; }
.how .step p { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 10px; }
.how .step .chip { margin-top: auto; align-self: flex-start; }
.how .step p + .chip { margin-top: 18px; }
/* where the piece's own column is narrow (the class is set by five-steps.js from the column's width) */
.how-narrow .how .steps { grid-template-columns: 1fr; gap: 16px; padding-left: 56px; grid-template-rows: none; }
.how-narrow .how .step:nth-child(n) { grid-row: auto; grid-column: auto; align-self: auto; }
.how-narrow .how .step { min-height: 0; position: static; } /* its dot sits on the road line, not in the card */
.how-narrow .how__road, .how-narrow .how__car { display: none; }
.how-narrow .how .steps::before { content: ''; position: absolute; left: 18px; top: 10px; bottom: 10px; width: 8px; border-radius: 8px; background: var(--ink); background-image: repeating-linear-gradient(transparent 0 10px, var(--paper) 10px 18px); background-size: 2px 100%; background-repeat: no-repeat; background-position: center; }
.how-narrow .how .step::before { content: ''; position: absolute; left: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--seal); border: 4px solid var(--paper-2); margin-top: 4px; }
/* a column narrower than the page (between the Journal's side columns): smaller cards, and the road kept inside it —
   clip-path also clips the stage while it is pinned (position: fixed) */
.how-compact .how .steps { column-gap: 12px; }
.how-compact .how .step { padding: 18px 16px 16px; min-height: 200px; }
.how-compact .how .step h3 { font-size: 1.12rem; margin-top: 14px; }
.how-compact .how .step p { font-size: 13px; line-height: 1.5; }
.how-compact .step__n b { font-size: 1.7rem; }
.how-compact .step__n span { font-size: 10px; letter-spacing: .1em; }
.jinteractive .how { clip-path: inset(0); }