/* Rick's Journey: the adventure map page. Builds on site.css. */
.j-intro{padding-top:44px;padding-bottom:16px}
.j-intro h1{font-size:clamp(32px,5vw,54px);max-width:20ch}
.j-stage{padding-top:0;padding-bottom:12px;position:relative}
.map-wrap{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--meadow)}
.j-map{display:block;width:100%;height:auto;touch-action:pan-y}
.j-lbl{font:600 22px var(--serif);fill:var(--ink)}
.j-lbl-sm{font:600 17px var(--sans);fill:var(--ink)}
.j-lbl-xs{font:600 14px var(--sans);fill:var(--ink-2)}
.j-val{font:600 19px var(--serif);fill:var(--ink)}
.j-val-light{fill:#fff}
.j-flow{font:600 16px var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--meadow);stroke-width:4px}
.j-out{fill:var(--bad)} .j-good{fill:var(--good)}
.mtns text{fill:#12263a}

/* things appear as the story reaches them */
.dam,.feature,.chan,.j-flow{opacity:0;transition:opacity .6s ease}
.dam.shown,.feature.shown,.chan.shown,.j-flow.shown{opacity:1}
.chan.dashed.shown{animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-32}}

.stop{cursor:pointer;outline:none}
.stop-dot{fill:var(--paper);stroke:var(--ink-2);stroke-width:2}
.stop-n{font:700 14px var(--sans);fill:var(--ink-2);pointer-events:none}
.stop-age{font:600 15px var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--meadow);stroke-width:4px;pointer-events:none}
.stop.reached .stop-dot{fill:var(--river-deep);stroke:#fff}
.stop.reached .stop-n{fill:#fff}
.stop.here .stop-dot{fill:var(--sun);stroke:var(--ink)}
.stop.here .stop-n{fill:var(--ink)}
.stop:focus-visible .stop-dot{stroke:var(--river);stroke-width:4}
#boat{filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}

.hud{display:flex;gap:10px;margin:0 0 10px;flex-wrap:wrap}
.hud>div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 14px;min-width:96px}
.hud small{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.hud b{font:600 24px var(--serif);font-variant-numeric:tabular-nums}
.hud-lake{flex:1}

.stop-card{margin:12px 0 0;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);max-width:900px}
.sc-head{display:flex;flex-direction:column;gap:4px}
.sc-age{font:600 13px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--river-deep)}
@media (prefers-color-scheme:dark){.sc-age{color:var(--river-light)}}
.sc-head h2{font-size:clamp(26px,3.6vw,36px);margin:0}
.sc-lesson{font-size:18px;color:var(--ink);margin:12px 0}
.sc-tip{color:var(--ink-2);border-left:3px solid var(--sun);padding:4px 0 4px 12px;margin:14px 0 0;font-style:italic}
.streams{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;flex-direction:column;background:var(--paper-2);border-radius:10px;padding:6px 12px;border:1px solid var(--line)}
.chip small{font-size:12px;color:var(--muted);font-weight:600}
.chip b{font:600 17px var(--serif);font-variant-numeric:tabular-nums}
.chip.good b{color:var(--good)} .chip.out b{color:var(--bad)}
.chip.damchip{border-color:var(--dam)}
.chip.lake{border-color:var(--river);background:color-mix(in srgb,var(--river) 10%,var(--card))}
.sc-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
.dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.dots button{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink-2);background:transparent;padding:0;cursor:pointer;position:relative}
.dots button::after{content:'';position:absolute;inset:-8px}
.dots button.reached{background:var(--river-deep);border-color:var(--river-deep)}
.dots button[aria-selected=true]{background:var(--sun);border-color:var(--ink)}
.sc-end{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
@media (max-width:560px){.dots{display:none}.hud b{font-size:20px}.stop-card{padding:18px}}

.j-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@media (min-width:980px){.j-stage{grid-template-columns:minmax(0,1.75fr) minmax(320px,1fr)}.stop-card{margin:0;position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto}.j-intro{padding-bottom:8px}.j-intro .lede{font-size:18px}}