/* Kit: menu mechanics from website/MENUS.md section 5, with mo- names so a site's old header styles and script are left alone.
   The site's motion.css sets the look by overriding the --mo-nav-* values and the .mo-* rules. */
:root { --mo-nav-h: 76px; --mo-nav-h-float: 56px; --mo-nav-gap: 12px; --mo-nav-max: 1080px; --mo-nav-move: 320ms cubic-bezier(.2,.7,.2,1);
  --mo-nav-bg: #fff; --mo-nav-ink: #111; --mo-nav-line: rgba(0,0,0,.14); --mo-nav-shadow: 0 10px 30px rgba(0,0,0,.14); --mo-nav-radius: 999px; --mo-nav-pad: clamp(16px, 4vw, 40px); }
html { scroll-padding-top: calc(var(--mo-nav-h) + 16px); }
.mo-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 64px; pointer-events: none; }
.mo-hdr { position: sticky; top: 0; z-index: 60; display: flow-root; height: var(--mo-nav-h); padding: 0 var(--mo-nav-gap); pointer-events: none; }
.mo-bar { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 16px; height: var(--mo-nav-h); max-width: 100%; margin: 0 auto; padding: 0 calc(var(--mo-nav-pad) - var(--mo-nav-gap));
  color: var(--mo-nav-ink); border: 1px solid transparent; border-radius: 0; background: transparent;
  transition: height var(--mo-nav-move), max-width var(--mo-nav-move), margin-top var(--mo-nav-move), border-radius var(--mo-nav-move), padding var(--mo-nav-move), background-color 200ms linear, border-color 200ms linear, box-shadow 200ms linear; }
.mo-scrolled .mo-bar { height: var(--mo-nav-h-float); max-width: var(--mo-nav-max); margin-top: var(--mo-nav-gap); padding: 0 12px 0 18px; border-color: var(--mo-nav-line); border-radius: var(--mo-nav-radius); background: var(--mo-nav-bg); box-shadow: var(--mo-nav-shadow); }
.mo-hidden .mo-hdr { transform: translateY(calc(-100% - 24px)); }
.mo-hdr { transition: transform 340ms cubic-bezier(.2,.7,.2,1); }
.mo-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; flex: none; }
.mo-nav { margin-left: auto; }
.mo-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.mo-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; color: inherit; background: none; border: 0; font: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
.mo-has-sub { position: relative; }
.mo-has-sub > .mo-link::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 150ms; }
.mo-has-sub > .mo-link[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.mo-sub { position: absolute; top: calc(100% + 10px); left: 0; min-width: 260px; display: none; padding: 8px; background: var(--mo-nav-bg); color: var(--mo-nav-ink); border: 1px solid var(--mo-nav-line); border-radius: 14px; box-shadow: var(--mo-nav-shadow); }
.mo-link[aria-expanded="true"] + .mo-sub { display: block; }
.mo-sub a { display: grid; gap: 2px; padding: 10px 12px; min-height: 44px; color: inherit; text-decoration: none; border-radius: 8px; }
.mo-sub a small { opacity: .75; font-weight: 400; }
.mo-cta { flex: none; white-space: nowrap; }
.mo-menu-btn { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; font: inherit; color: inherit; background: none; border: 1px solid currentColor; border-radius: var(--mo-nav-radius); cursor: pointer; flex: none; }
@media (max-width: 860px) {
  :root { --mo-nav-h: 64px; --mo-nav-h-float: 52px; --mo-nav-gap: 8px; }
  .mo-menu-btn { display: inline-flex; }
  .mo-nav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; display: none; max-height: calc(100dvh - var(--mo-nav-h) - 32px); overflow-y: auto; padding: 8px; background: var(--mo-nav-bg); color: var(--mo-nav-ink); border: 1px solid var(--mo-nav-line); border-radius: 18px; box-shadow: var(--mo-nav-shadow); }
  .mo-nav-open .mo-nav { display: block; }
  .mo-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .mo-link { width: 100%; min-height: 48px; justify-content: space-between; }
  .mo-sub { position: static; display: none; min-width: 0; border: 0; box-shadow: none; padding: 0 0 8px 12px; background: none; }
  .mo-bar { gap: 8px; }
  .mo-bar .mo-cta { margin-left: auto; }
  .mo-nav-open .mo-bar, .mo-bar { }
}
@media (max-width: 380px) { .mo-menu-btn svg { display: none; } .mo-menu-btn { padding: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .mo-bar, .mo-hdr { transition: none; } }
/* Kit: pinned hero mechanics. The site's motion.css animates the hero's parts with var(--mo-pin), which runs 0 to 1. */
.mo-pin { --mo-pin: 0; --mo-pin-extra: 90vh; --mo-pin-offset: 0px; position: relative; }
/* the room to scroll through has to be real height (a sticky element cannot travel into its parent's padding) */
.mo-pin.is-pinned { height: calc(var(--mo-pin-h, 100vh) + var(--mo-pin-extra)); }
.mo-pin.is-pinned > :first-child { position: sticky; top: var(--mo-pin-top, 0px); }
/* Backwater Outfitters: motion in the site's own language, a river chart on a fog-grey sheet.
   Words and cards drift in from upstream as the fog lifts off them, photos unroll like a chart sheet,
   and the contour-line dividers are cast across the page from the left bank. */
.mo-ready .mo { opacity: 0; transform: translate3d(-22px, 8px, 0); filter: blur(3px); transition: opacity .6s ease-out, transform .8s cubic-bezier(.16,.7,.2,1), filter .6s ease-out; transition-delay: calc(var(--mo-i, 0) * 70ms); }
.mo-ready .mo.in { opacity: 1; transform: none; filter: none; }

/* rows of a table or a list of facts: a short slide along the rule, no blur */
.mo-ready tr.mo, .mo-ready dl > div.mo, .mo-ready .tick-list li.mo, .mo-ready .week-list li.mo { transform: translate3d(-14px, 0, 0); filter: none; }
.mo-ready tr.mo.in, .mo-ready dl > div.mo.in, .mo-ready .tick-list li.mo.in, .mo-ready .week-list li.mo.in { transform: none; }

/* photos and the chart: unrolled from the left edge like a chart sheet */
.mo-ready figure.mo, .mo-ready .chart-map.mo { opacity: 1; filter: none; transform: translate3d(-10px, 0, 0); clip-path: inset(0 100% 0 0); transition: clip-path .85s cubic-bezier(.3,.6,.2,1), transform .85s cubic-bezier(.3,.6,.2,1); transition-delay: calc(var(--mo-i, 0) * 70ms); }
.mo-ready figure.mo.in, .mo-ready .chart-map.mo.in { transform: none; clip-path: inset(0 -2% 0 0); }

/* contour dividers: the lines run out across the page like a cast */
.mo-ready .contours.mo { opacity: 1; filter: none; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path .9s cubic-bezier(.3,.5,.2,1); }
.mo-ready .contours.mo.in { clip-path: inset(0 0 0 0); }

/* The chart-key band: four small chart-legend drawings that link to the main pages. They ride the current as the page scrolls. */
.mo-band { background: var(--mist); border-block: 1px solid var(--rule); padding-block: var(--s5) var(--s6); overflow: hidden; }
.hero + .mo-band { margin-top: var(--s6); }
.closer + .mo-band, main + .mo-band { border-bottom: 0; }
.mo-band__in { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.mo-scale { height: 7px; margin-bottom: var(--s5); outline: 1px solid var(--channel); background: repeating-linear-gradient(to right, var(--channel) 0 44px, var(--mist) 44px 88px); clip-path: inset(-1px calc(100% - min(1, 0.12 + var(--mo-p, 1) * 2.4) * 100% - 1px) -1px -1px); }
.mo-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mo-item { display: grid; align-content: start; gap: var(--s1); padding: 0 var(--s4); border-left: 1px solid var(--rule); border-radius: var(--r1); color: var(--channel); text-decoration: none; }
.mo-item:first-child { padding-left: 0; border-left: 0; }
.mo-item__pic { display: block; width: 168px; margin-bottom: var(--s3); will-change: transform; }
.mo-item img { width: 100%; height: auto; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.mo-item__name { font-family: var(--serif); font-size: 1.5625rem; font-weight: 560; font-variation-settings: 'opsz' 30; line-height: 1.2; text-decoration: underline; text-decoration-color: var(--rust); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.mo-item small { font-size: 0.9375rem; line-height: 1.5; color: var(--muted); max-width: 22em; }
.mo-item:hover img, .mo-item:focus-visible img { transform: translate3d(0, -6px, 0) rotate(-3deg); }
.mo-item:hover .mo-item__name, .mo-item:focus-visible .mo-item__name { text-decoration-thickness: 3px; color: var(--river); }
/* the drawings surface like a float coming up, then settle */
.mo-ready .mo-item.mo { transform: translate3d(0, 26px, 0); filter: none; transition: opacity .45s ease-out, transform .8s cubic-bezier(.2,1.25,.35,1); transition-delay: calc(var(--mo-i, 0) * 70ms); }
.mo-ready .mo-item.mo.in { transform: none; }
@media (max-width: 899px) {
  .mo-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s5); }
  .mo-item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .mo-item:nth-child(even) { padding-right: 0; }
}
@media (max-width: 559px) {
  .mo-band { padding-block: var(--s4) var(--s5); }
  .mo-scale { margin-bottom: var(--s3); }
  .mo-keys { grid-template-columns: 1fr; row-gap: 0; }
  .mo-item, .mo-item:nth-child(even) { grid-template-columns: 84px 1fr; column-gap: var(--s3); align-items: center; padding: var(--s3) 0; border-left: 0; border-top: 1px solid var(--rule); }
  .mo-item:first-child { border-top: 0; }
  .mo-item__pic { width: 84px; margin: 0; grid-row: 1 / 3; }
  .mo-item__name { align-self: end; font-size: 1.375rem; }
  .mo-item small { align-self: start; }
}

/* ---- Round 2. Menu: a hide-and-return floating bar drawn like the edge of a chart sheet.
   Top of the page: the site's own fog bar with a hairline rule. After the first scroll: a squared mist card with a hairline
   ink edge and the chart's scale strip along its foot. It slides away on the way down and returns on any scroll up. ---- */
:root { --mo-nav-bg: var(--mist); --mo-nav-ink: var(--channel); --mo-nav-line: var(--channel); --mo-nav-shadow: 0 12px 24px rgba(23,50,53,.14); --mo-nav-radius: var(--r1); --mo-nav-pad: max(var(--gut), calc((100vw - var(--wrap)) / 2)); --mo-nav-max: 1040px; }
html:not(.mo-scrolled) .mo-hdr { background: var(--fog); box-shadow: 0 1px 0 var(--rule); }
.mo-bar { gap: var(--s3); }
.mo-bar::after { content: ""; position: absolute; left: -1px; right: -1px; top: 100%; height: 6px; border: 1px solid var(--channel); border-radius: 0 0 var(--r1) var(--r1); background: repeating-linear-gradient(to right, var(--channel) 0 44px, var(--mist) 44px 88px); opacity: 0; transition: opacity 200ms linear; pointer-events: none; }
.mo-scrolled .mo-bar { border-radius: var(--r1) var(--r1) 0 0; }
.mo-scrolled .mo-bar::after { opacity: 1; }
.mo-brand { gap: 12px; min-height: 44px; border-radius: var(--r1); }
.mo-brand .brand-mark { transition: width var(--mo-nav-move), height var(--mo-nav-move); }
.mo-scrolled .mo-brand .brand-mark { width: 32px; height: 32px; }
.mo-nav > ul { gap: 2px; }
.mo-link { font: 500 1.0625rem/1 var(--sans); padding: 0 13px; border-radius: var(--r1); transition: background-color 150ms linear; }
.mo-link:hover { background: var(--shallow); }
.mo-link[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--rust); text-decoration-thickness: 3px; text-underline-offset: .45em; }
.mo-bar .mo-cta { min-height: 44px; padding-block: 8px; transition: min-height var(--mo-nav-move), background-color 150ms linear; }
.mo-scrolled .mo-bar .mo-cta { min-height: 40px; padding: 6px 16px; }
.mo-menu-btn { font: 600 1rem/1 var(--sans); border-color: var(--channel); min-height: 44px; transition: background-color 150ms linear, color 150ms linear; }
.mo-scrolled .mo-menu-btn { min-height: 40px; }
.mo-menu-btn svg { width: 22px; height: 22px; }
.mo-menu-btn svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mo-menu-btn[aria-expanded="true"] { background: var(--channel); color: #fff; }
@media (min-width: 861px) and (max-width: 979px) { .mo-link { padding: 0 9px; } .mo-bar { gap: var(--s2); } }
@media (max-width: 860px) {
  /* phone: a dropdown sheet under the bar, ruled like the chart's key */
  .mo-nav { top: calc(100% + 14px); padding: 4px var(--s3) 8px; border-radius: var(--r1); }
  .mo-nav li + li { border-top: 1px solid var(--rule); }
  .mo-link { font-size: 1.125rem; min-height: 52px; padding: 0 8px; border-radius: 0; }
  .mo-scrolled .mo-bar { padding: 0 8px 0 12px; }
}
@media (max-width: 759px) {
  /* the site's own bottom bar already carries "Book a trip" and "Call Ben" on a phone, as the old header relied on */
  .mo-bar .mo-cta { display: none; }
  .mo-bar .mo-menu-btn { margin-left: auto; }
  .mo-nav { max-height: calc(100dvh - var(--mo-nav-h) - 32px - 76px); }
  .mo-scrolled .mo-brand .brand-mark { width: 30px; height: 30px; }
}
/* scripts off on a phone: the "Menu" button cannot open anything, so the links sit in a plain row under the name instead */
@media (max-width: 860px) {
  html:not(.js) .mo-hdr { position: static; height: auto; }
  html:not(.js) .mo-bar { height: auto; min-height: var(--mo-nav-h); flex-wrap: wrap; padding-block: 8px; }
  html:not(.js) .mo-menu-btn { display: none; }
  html:not(.js) .mo-nav { position: static; display: block; width: 100%; max-height: none; padding: 0; border: 0; box-shadow: none; background: none; }
  html:not(.js) .mo-nav > ul { flex-direction: row; flex-wrap: wrap; }
  html:not(.js) .mo-nav li + li { border-top: 0; }
  html:not(.js) .mo-link { width: auto; min-height: 44px; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .mo-bar::after, .mo-brand .brand-mark, .mo-bar .mo-cta { transition: none; } }

/* ---- Round 2. Hero: one pinned scroll section, "marking the spot".
   The morning fog lifts off the photo, the two chart readings ride in along the sheet's edges pulling a hairline each,
   the hairlines cross on the water where the anglers are casting, and a waypoint closes in on the crossing.
   The readings riding along the sheet's two scale strips are the progress mark. ---- */
.mo-pin { --mo-pin-offset: 8px; --mo-pin-extra: 85vh; }
.mo-pin + .mo-band { margin-top: var(--s6); }
.mo-fog, .mo-fix, .mo-mark { display: none; }
.mo-pin.is-pinned .mo-fog, .mo-pin.is-pinned .mo-fix, .mo-pin.is-pinned .mo-mark { display: block; position: absolute; pointer-events: none; }
.mo-pin.is-pinned .sheet-lat, .mo-pin.is-pinned .sheet-lon { opacity: 0; }
.mo-pin.is-pinned .sheet img { filter: saturate(calc(.6 + var(--mo-pin) * .4)) brightness(calc(1.07 - var(--mo-pin) * .07)); }
.mo-pin.is-pinned .mo-fog { left: 12px; top: 0; right: 0; bottom: 12px; background: linear-gradient(to top, rgba(231,236,234,.86) 0%, rgba(231,236,234,.5) 32%, rgba(231,236,234,0) 72%); transform-origin: 50% 100%; transform: scaleY(calc(1 - var(--mo-pin) * .45)); opacity: calc(1 - var(--mo-pin) * 1.5); }
.mo-pin.is-pinned .mo-fix { left: 12px; top: 0; right: 0; bottom: 12px; }
.mo-fix::before { content: ""; position: absolute; background: var(--mist); }
.mo-fix i { position: absolute; font-style: normal; font-size: .75rem; line-height: 1.6; background: var(--mist); color: var(--channel); padding: 2px 6px; }
.mo-pin.is-pinned .mo-fix--lat { transform: translate3d(0, calc(var(--mo-pin) * 76%), 0); }
.mo-fix--lat::before { left: 0; right: 0; top: 0; height: 1px; }
.mo-fix--lat i { left: 8px; top: 12px; }
.mo-pin.is-pinned .mo-fix--lon { transform: translate3d(calc(var(--mo-pin) * -31%), 0, 0); }
.mo-fix--lon::before { right: 0; top: 0; bottom: 0; width: 1px; }
.mo-fix--lon i { right: 12px; bottom: 10px; }
.mo-pin.is-pinned .mo-mark { left: calc(12px + (100% - 12px) * .69); top: calc((100% - 12px) * .76); width: 0; height: 0; opacity: calc((var(--mo-pin) - .55) * 3.2); transform: scale(calc(1 + (1 - var(--mo-pin)) * 1.8)); }
.mo-mark::before, .mo-mark::after { content: ""; position: absolute; border-radius: 50%; }
.mo-mark::before { left: -7px; top: -7px; width: 14px; height: 14px; background: var(--rust); border: 2px solid var(--mist); }
.mo-mark::after { left: -19px; top: -19px; width: 38px; height: 38px; border: 1.5px solid var(--mist); outline: 1px solid rgba(246,248,247,.75); outline-offset: 9px; }
.mo-hidden .mo-bar { box-shadow: none; }