/* The run's real map beside the guide: a sticky rail on wide screens, the blue
   line drawing itself as you read and an orange boat riding its tip. Lifted
   from the Stikine forecast page's inline styles (2026-09-22) so every river
   page — and, later, the Sierra forecast pages — shares one sheet. Engine:
   /river-side.js; data per run: /<slug>-data.js + /<slug>-topo.svg from
   scripts/build-river-sides.mjs. Hidden below 1180px: on a phone the number
   and the text box are the page, and the rail would only push them down. */

.river-wrap { display: block; }
@media (min-width: 1180px) {
  .river-wrap {
    display: grid;
    grid-template-columns: minmax(0, 44rem) 250px;
    gap: 1.6rem;
    align-items: start;
    justify-content: center;
    max-width: calc(44rem + 250px + 1.6rem + 2rem);
    margin: 0 auto;
  }
}

.river-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 1.5rem 0 0.8rem; }
.river-side__head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 2px solid var(--border); padding-bottom: 0.3rem; }
.river-side__head span { display: block; text-transform: none; letter-spacing: 0; color: var(--muted); }
.river-map { position: relative; flex: 1; min-height: 0; margin: 0.55rem 0; }
.river-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.river-map__topo {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.river-map__topo path { fill: none; stroke: #cbbfa6; stroke-width: 0.75; stroke-linejoin: round; stroke-linecap: round; }
.river-map__topo .i path { stroke: #ab9b7a; stroke-width: 1.1; }
.river-map__river { overflow: visible; }
.river-map__trib { fill: none; stroke: var(--high); stroke-width: 1.3; opacity: 0.45; stroke-linecap: round; stroke-linejoin: round; }
.river-map__bed { fill: none; stroke: #d9e0f3; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.river-map__flow { fill: none; stroke: var(--high); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.river-map__marks text { font-size: 9.5px; fill: #444; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.river-map__marks circle { fill: #fff; stroke: #111; stroke-width: 1.1; }
.river-map__marks .camp { fill: #ff5a00; stroke: #111; stroke-width: 1.1; stroke-linejoin: round; }
.river-map__north path { fill: none; stroke: #555; stroke-width: 1.1; stroke-linecap: round; }
.river-map__north text { font-size: 9px; fill: #555; }
.river-map__boat path { fill: #ff5a00; stroke: #111; stroke-width: 1.4; }
.river-map__boat { transition: opacity 0.3s ease; }
.river-side__foot { color: var(--faint); font-size: 0.7rem; }

/* Last so it wins the cascade over the base rule above. */
@media (max-width: 1179.98px) {
  .river-side { display: none; }
}

/* ---- Camp strip map (2026-09-30) ---------------------------------------------
   /<river>-camps, engine /camp-rail.js. Same sticky aside, but the map is
   zoomed in and pans under a fixed reading line, so it needs clipping, a wider
   column for a label on each bank, and a soft edge where the river runs off the
   top and bottom. The engine draws leaders, glyphs, labels and mile ticks. */
@media (min-width: 1180px) {
  .river-wrap.camp-wrap {
    grid-template-columns: minmax(0, 44rem) 300px;
    max-width: calc(44rem + 300px + 1.6rem + 2rem);
  }
}
.camp-rail__map {
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 93%, transparent);
}
.camp-rail__svg { overflow: hidden; }
.camp-rail .river-map__bed { stroke-width: 6; }
.camp-rail__leader { fill: none; stroke: #c9c9c9; stroke-width: 0.6; }
.camp-rail__camp { cursor: pointer; }
.camp-rail__camp text { font-size: 9px; fill: #555; paint-order: stroke; stroke: #fff; stroke-width: 2.5px; stroke-linejoin: round; }
.camp-rail__camp circle { fill: #fff; stroke: #555; stroke-width: 1; }
.camp-rail__camp path:not(.camp-rail__leader) { stroke: #111; stroke-width: 1.1; stroke-linejoin: round; }
.camp-rail__camp.glyph-filled path:not(.camp-rail__leader) { fill: #111; }
.camp-rail__camp.glyph-open path:not(.camp-rail__leader) { fill: #fff; }
.camp-rail__camp.glyph-filled text, .camp-rail__camp.glyph-open text { fill: #111; }
.camp-rail__camp:hover text { fill: #000; text-decoration: underline; }
/* The camp at the reading line. */
.camp-rail__camp.on text { fill: #000; font-weight: 700; font-size: 10px; }
.camp-rail__camp.on .camp-rail__leader { stroke: #ff5a00; stroke-width: 1.2; }
.camp-rail__camp.on circle, .camp-rail__camp.on path:not(.camp-rail__leader) { fill: #ff5a00; stroke: #111; }
/* Hidden by the filters, or no camp at the chosen water level. */
.camp-rail__camp.off { opacity: 0.25; }
.camp-rail__landmark text { font-size: 8.5px; fill: #777; text-transform: uppercase; letter-spacing: 0.06em; paint-order: stroke; stroke: #fff; stroke-width: 2.5px; }
.camp-rail__landmark rect { fill: #fff; stroke: #777; stroke-width: 1; }
.camp-rail__tick { stroke: #111; stroke-width: 1; }
.camp-rail__mile { font-size: 8.5px; fill: #999; font-style: italic; }