/* ════════════════════════════════════════════════════════════════════
   KNEW · "Healing moves like a river" (§7 of the home page)

   One river vocabulary at three fixed geometries:
     ≥1100px  the 1728x2630 canvas, scaled to the viewport by JS
     770–1099 tablet rail (722x1240)
     <770     mobile rail (342x1048, scaling down below 390)

   The rail line is ONE path; the gaps where quotes sit are dash slices
   computed at runtime, not separate segments.

   Self-contained: scoped to .knew-river, no theme tokens required. Colors
   resolve to the Total palette when present and fall back to the design
   literals otherwise.
   ════════════════════════════════════════════════════════════════════ */

.knew-river{
  --kr-sandstone: var(--wpex-palette-22-color,  #F6EFE8);
  --kr-plum-deep: var(--wpex-palette-246-color, #5E3744);
  /* the two darker stops of the band have no palette entry — they are a
     gradient ramp off Deep Plum rather than named colors */
  --kr-band-mid:  #4A2A38;
  --kr-band-end:  #3A2030;
  --kr-glow:      rgba(255,155,55,.4);
  --kr-dot:       #D9D9D9;

  --kr-font-display: "Roaming", Georgia, serif;
  --kr-band: linear-gradient(180deg, var(--kr-plum-deep) 0%, var(--kr-band-mid) 56%, var(--kr-band-end) 100%);

  position: relative;
}

.knew-river *,
.knew-river *::before,
.knew-river *::after{ box-sizing: border-box; }

.knew-river .j-seg{ stroke: var(--kr-sandstone); stroke-opacity: .5; stroke-width: 2; stroke-linecap: round; fill: none; }
.knew-river .j-dot{ fill: var(--kr-dot); }

.knew-river h2,
.knew-river .hbr-q,
.knew-river .hbr-dq h3{ font-family: var(--kr-font-display); font-weight: 400; }
/* Colour is set here, not inherited from .hbr-canvas / .hbr-rail. The theme
   has its own `h1, h2, h3 { color: … }`, and a direct rule beats an inherited
   value no matter how specific the inherited one's source was — so headings
   that only inherited came out in the theme's green. */
.knew-river h2{ letter-spacing: -.003em; margin: 0; text-wrap: balance; color: var(--kr-sandstone); }
.knew-river .hbr-sub{ color: rgba(246,239,232,.8); text-wrap: pretty; }

/* quotes and the closing block fade up as the river reaches them */
.knew-river.is-anim .hbr-step{ opacity: .28; transition: opacity .9s ease; }
.knew-river.is-anim .hbr-step.lit{ opacity: 1; }

/* Break out of a fixed-width WPBakery container so the band reaches both
   edges. In a row that is already full width this computes to 0 and does
   nothing, so it is safe either way.

   50vw counts the vertical scrollbar, which the page cannot actually use —
   on Windows that overhangs the viewport by half the scrollbar on each side
   and adds a horizontal scrollbar. --kr-sbw is measured in JS and defaults
   to 0px, which is correct for overlay scrollbars (macOS, touch). */
.knew-river--bleed{
  --kr-sbw: 0px;
  margin-left: calc(50% - 50vw + var(--kr-sbw) / 2);
  margin-right: calc(50% - 50vw + var(--kr-sbw) / 2);
}

/* ── desktop canvas ─────────────────────────────────────────────── */
/* The band lives on the wrapper, which is width:100%, rather than on the
   canvas, which is a fixed 1728px. On a viewport wider than 1728 the canvas
   stops scaling up, so a band painted on it left bare gutters down both
   sides — most visible at 1920. */
.knew-river .hbr-desktop{
  position: relative; width: 100%; overflow: hidden; display: block;
  background: var(--kr-band);
  color: var(--kr-sandstone);
}
.knew-river .hbr-canvas{
  position: absolute; left: 50%; top: 0;
  width: 1728px; height: 2630px;
  transform-origin: top center;
  color: var(--kr-sandstone);
  overflow: hidden; isolation: isolate;
}
.knew-river .hbr-art{ position: absolute; left: 50%; transform: translateX(-50%); top: 400px; width: 1253px; height: 1942px; z-index: 1; overflow: visible; }
.knew-river .hbr-canvas .hbr-open,
.knew-river .hbr-canvas .hbr-close{ position: absolute; left: 414px; width: 900px; text-align: center; z-index: 2; }
.knew-river .hbr-canvas .hbr-open{ top: 340px; }
.knew-river .hbr-canvas .hbr-close{ top: 2200px; }
.knew-river .hbr-canvas h2{ font-size: 56px; line-height: 1.16; margin: 0 auto; }
.knew-river .hbr-canvas .hbr-sub{ margin: 20px auto 0; max-width: 640px; font-size: 20px; line-height: 1.6; }
.knew-river .hbr-dq{ position: absolute; z-index: 2; }
.knew-river .hbr-dq h3{ font-size: 28px; line-height: 1.16; color: var(--kr-sandstone); margin: 0; text-align: center; }

/* ── rails ──────────────────────────────────────────────────────── */
.knew-river .hbr-rail{
  position: relative; overflow: hidden; isolation: isolate; display: none;
  background: var(--kr-band);
  color: var(--kr-sandstone);
}
.knew-river .hbr-rail::before,
.knew-river .hbr-rail::after{
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, var(--kr-glow) 0%, rgba(85,73,59,0) 70%);
}
.knew-river .hbr-rail-in{ position: relative; z-index: 2; }
.knew-river .hbr-rail .hbr-open,
.knew-river .hbr-rail .hbr-close{ text-align: center; }
.knew-river .hbr-rail h2{ font-size: clamp(34px, 3.6vw, 64px); line-height: 1.18; }
.knew-river .hbr-rail .hbr-sub{ font-size: clamp(17px, 1.3vw, 22px); line-height: 1.6; }
.knew-river .hbr-track{ position: relative; margin: 0 auto; }
.knew-river .hbr-river{ position: absolute; top: 0; }
.knew-river .hbr-q{ position: absolute; margin: 0; color: var(--kr-sandstone); text-align: center; font-size: clamp(20px, 1.6vw, 28px); line-height: 1.35; }

.knew-river .hbr-t{ padding: 76px 56px 84px; }
.knew-river .hbr-t::before{ width: 520px; height: 520px; left: -160px; top: 300px; }
.knew-river .hbr-t::after{ width: 470px; height: 470px; right: -170px; bottom: 200px; }
.knew-river .hbr-t .hbr-sub{ margin: 18px auto 0; max-width: 42ch; }
.knew-river .hbr-t .hbr-track{ width: 722px; height: 1240px; margin-top: 16px; }
.knew-river .hbr-t .hbr-river{ left: -56px; }
.knew-river .hbr-t .hbr-close{ margin-top: 64px; }

.knew-river .hbr-m{ padding: 44px 24px 52px; }
.knew-river .hbr-m::before{ width: 300px; height: 300px; left: -110px; top: 300px; }
.knew-river .hbr-m::after{ width: 290px; height: 290px; right: -120px; bottom: 190px; }
.knew-river .hbr-m .hbr-sub{ margin: 14px auto 0; max-width: 30ch; }
.knew-river .hbr-m .hbr-track{ width: 342px; height: 1048px; margin-top: 12px; }
.knew-river .hbr-m .hbr-river{ left: -24px; }
.knew-river .hbr-m .hbr-q{ width: 240px; }
.knew-river .hbr-m .hbr-close{ margin-top: 52px; }

@media (max-width: 1099px){
  .knew-river .hbr-desktop{ display: none; }
  .knew-river .hbr-t{ display: block; }
}
@media (max-width: 769px){
  .knew-river .hbr-t{ display: none; }
  .knew-river .hbr-m{ display: block; }
}
@media (prefers-reduced-motion: reduce){
  .knew-river.is-anim .hbr-step{ opacity: 1; transition: none; }
}