/* =====================================================================
   Guia Pesca Esportiva — homepage chapters ("Amanhecer no rio")
   One sticky WebGL stage, and five chapters that scroll over it.
   The stage is always a dawn scene, so this layer is always dark text
   on light-on-dark tokens, in the light and the dark theme.
   Colors come from the scales in style.css. Fluid sizes use clamp()
   between two steps of the type scale.
   ===================================================================== */

.rio {
  --rio-ink: hsl(165 40% 4%);
  --rio-bone: hsl(140 22% 93%);
  --rio-bone-2: hsl(150 18% 80%);
  --rio-mute: hsl(150 10% 64%);
  --rio-line: hsl(140 22% 93% / 0.14);
  --rio-line-soft: hsl(140 22% 93% / 0.08);
  --rio-gold: var(--gold-400);
  --rio-pad: clamp(1.25rem, 3.4vw, 3.5rem);
  --rio-ease: cubic-bezier(.16, 1, .3, 1);
  --rio-ease-io: cubic-bezier(.65, 0, .35, 1);
  --rio-shadow: 0 1px 18px hsl(165 40% 4% / 0.85);
  position: relative;
  margin-top: calc(-1 * var(--rio-header, 4rem) - 1px);
  color: var(--rio-bone);
  background: var(--rio-ink);
  isolation: isolate;
}
.rio ::selection { background: var(--gold-400); color: var(--gold-900); }

/* ----------------------------------------------------------- the stage */
.rio-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100lvh;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.rio-poster, .rio-poster img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.rio-poster img { object-fit: cover; object-position: 30% 50%; transform: scale(1.04); }
.rio-poster::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, hsl(165 40% 4% / 0.55), hsl(165 40% 4% / 0.12) 40%, hsl(165 40% 4% / 0.7)),
    linear-gradient(90deg, hsl(165 40% 4% / 0.65), transparent 60%);
}
.rio-gl {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1.6s var(--rio-ease);
}
.rio-live .rio-gl { opacity: 1; }
.rio-vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, hsl(165 40% 4% / 0.55), transparent 22%),
    radial-gradient(120% 90% at 50% 45%, transparent 45%, hsl(165 40% 4% / 0.5) 100%);
}
.rio-grain {
  position: absolute; inset: -1px; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the right rail: chapter ticks and a sonar depth gauge */
.rio-rail {
  position: absolute; right: var(--rio-pad); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-6);
  padding: var(--space-4) var(--space-3) var(--space-4) var(--space-4);
  border-radius: var(--radius-lg);
  background: hsl(165 40% 4% / 0.32);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--rio-bone-2);
}
.rio-rail-ticks { list-style: none; display: grid; gap: var(--space-3); }
.rio-rail-ticks li {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; font-variant-numeric: tabular-nums;
  opacity: 0.55; transition: opacity .5s, color .5s;
}
.rio-rail-ticks li::after {
  content: ""; width: 14px; height: 1px; background: currentColor;
  transition: width .6s var(--rio-ease), background .5s;
}
.rio-rail-ticks li.on { opacity: 1; color: var(--rio-bone); }
.rio-rail-ticks li.on::after { width: 34px; background: var(--rio-gold); }
.rio-depth { display: grid; justify-items: end; gap: 2px; text-align: right; }
.rio-depth-label { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.rio-depth b {
  font-size: var(--text-sm); font-weight: 500; color: var(--rio-bone);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
.rio.is-under .rio-depth b { color: var(--gold-300); }
.rio-static .rio-depth { display: none; }

/* --------------------------------------------------------- the chapters */
.rio-chapters { position: relative; z-index: 1; overflow-x: clip; margin-top: -100vh; margin-top: -100lvh; }

.rio-eyebrow {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-5);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-300); text-shadow: var(--rio-shadow);
}
.rio-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rio-gold); box-shadow: 0 0 12px var(--rio-gold); }

.rio-display {
  color: var(--rio-bone);
  font-family: var(--font-display);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.04;
  text-shadow: 0 1px 3px hsl(165 40% 4% / 0.35);
  text-wrap: balance;
}
.rio-display em { font-style: normal; color: var(--gold-300); }
.rio-h1 { font-size: clamp(2.5rem, 4.6vw, 4.5rem); margin-bottom: var(--space-5); }
.rio-h2 { font-size: clamp(2rem, 4.2vw, 3.75rem); }
.rio-lead {
  font-size: clamp(var(--text-base), 1.25vw, var(--text-xl)); line-height: 1.65;
  color: var(--rio-bone-2); text-shadow: var(--rio-shadow);
  max-width: 36rem;
}
.rio-body { font-size: var(--text-base); line-height: 1.7; color: var(--rio-mute); text-shadow: var(--rio-shadow); max-width: 34rem; }

/* reveal: only when the module can run (html.rio-js) */
.rio-js .rio [data-rv="up"], .rio-js .rio [data-rv="fade"] { opacity: 0; }
.rio-js .rio [data-rv="up"] { transform: translate3d(0, 28px, 0); }
.rio-js .rio [data-rv].rv-in {
  opacity: 1; transform: none;
  transition: opacity .9s var(--rio-ease), transform 1.1s var(--rio-ease);
}
.rio-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.rio-line > span { display: block; }
.rio-js .rio-line > span { transform: translate3d(0, 110%, 0); }
.rio-js .rio-line.rv-in > span { transform: none; transition: transform 1.15s var(--rio-ease) var(--d, 0ms); }
.rio-wm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.rio-w { display: inline-block; }
.rio-js .rio-w { opacity: 0; transform: translate3d(0, 110%, 0); }
.rio-js [data-rv="words"].rv-in .rio-w {
  opacity: 1; transform: none;
  transition: transform .9s var(--rio-ease) var(--d, 0ms), opacity .5s var(--rio-ease) var(--d, 0ms);
}

/* buttons on the scene: one gold primary, one glass secondary */
.rio-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.rio-actions-center { justify-content: center; }
.rio-btn-primary {
  background: var(--gold-400); color: var(--gold-900);
  box-shadow: inset 0 1px 0 var(--gold-300), 0 10px 30px -10px hsl(46 90% 56% / 0.55);
  transition: background var(--ease), box-shadow .4s var(--rio-ease), transform .4s var(--rio-ease);
}
.rio-btn-primary:hover { background: var(--gold-300); color: var(--gold-900); transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--gold-200), 0 16px 36px -12px hsl(46 90% 56% / 0.7); }
.rio-btn-ghost {
  color: var(--rio-bone); border-color: hsl(140 22% 93% / 0.3);
  background: hsl(165 40% 8% / 0.35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background var(--ease), border-color var(--ease), transform .4s var(--rio-ease);
}
.rio-btn-ghost:hover { color: #fff; background: hsl(165 40% 14% / 0.55); border-color: hsl(140 22% 93% / 0.55); transform: translateY(-2px); }

/* --------------------------------------------------------- 00 · hero */
.rio-hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding: calc(var(--rio-header, 4rem) + clamp(var(--space-6), 7vh, var(--space-9))) var(--rio-pad) 0;
}
.rio-hero-top { max-width: 46rem; position: relative; }
.rio-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 70% at 14% 42%, hsl(165 40% 4% / 0.5), hsl(165 40% 4% / 0.2) 55%, transparent 80%),
    linear-gradient(0deg, hsl(165 40% 4% / 0.6), transparent 34%);
}
.rio-hero .rio-lead { max-width: 33rem; }
.rio-checks {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  margin-top: var(--space-6);
  color: var(--rio-bone-2); font-size: var(--text-sm); font-weight: 500; text-shadow: var(--rio-shadow);
}
.rio-checks li { display: inline-flex; align-items: center; gap: var(--space-2); }
.rio-checks li::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: hsl(46 90% 56% / 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.6L13 6.5' fill='none' stroke='%23f5cf4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* the framed still: the guide's photograph, carried over the live river */
.rio-peek {
  position: absolute; z-index: 1;
  right: clamp(9rem, 15vw, 16rem); top: clamp(8rem, 22vh, 13rem);
  width: clamp(10rem, 16vw, 15rem);
  transition: transform .8s var(--rio-ease);
}
.rio-peek:hover { transform: translate3d(0, -6px, 0); }
.rio-peek-frame {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px hsl(140 22% 93% / 0.18), 0 34px 70px -28px hsl(165 40% 2% / 0.95);
  transition: box-shadow .5s;
}
.rio-peek:hover .rio-peek-frame { box-shadow: 0 0 0 1px hsl(140 22% 93% / 0.45), 0 40px 80px -28px hsl(165 40% 2% / 0.95); }
.rio-peek img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.2s var(--rio-ease); }
.rio-peek:hover img { transform: scale(1); }
.rio-peek figcaption {
  display: grid; gap: 2px; margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius);
  background: hsl(165 40% 4% / 0.42);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.rio-peek b { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; color: var(--rio-bone-2); }
.rio-peek i { font-style: normal; font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--rio-bone-2); opacity: 0.8; }

.rio-hero-foot { margin-top: auto; padding: var(--space-8) 0 clamp(var(--space-5), 4vh, var(--space-7)); position: relative; }
.rio-cue {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rio-mute);
}
.rio-cue-track { width: 56px; height: 1px; background: var(--rio-line); position: relative; overflow: hidden; }
.rio-cue-track i { position: absolute; inset: 0; background: var(--rio-bone); transform-origin: left; animation: rio-cue 2.8s var(--rio-ease-io) infinite; }
@keyframes rio-cue { 0% { transform: scaleX(0); } 42% { transform: scaleX(1); } 100% { transform: scaleX(1) translateX(100%); } }

.rio-chips {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(var(--space-4), 2.4vw, var(--space-7));
  border-top: 1px solid var(--rio-line); padding-top: var(--space-5);
}
.rio-chip { display: flex; gap: var(--space-4); align-items: flex-start; color: var(--rio-bone-2); }
.rio-chip:hover { color: var(--rio-bone); }
.rio-chip-num {
  font-size: clamp(var(--text-2xl), 2.5vw, var(--text-4xl)); font-weight: 300; line-height: 1; letter-spacing: -0.03em;
  color: var(--rio-bone); font-variant-numeric: tabular-nums;
  transition: color .4s, transform .5s var(--rio-ease);
}
.rio-chip-tx { min-width: 0; padding-top: 2px; }
.rio-chip b { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--space-1); color: var(--rio-bone); text-shadow: var(--rio-shadow); }
.rio-chip-tx > span { display: block; font-size: var(--text-sm); line-height: 1.5; color: var(--rio-mute); transition: color .4s; text-shadow: var(--rio-shadow); }
.rio-chip:hover .rio-chip-num, .rio-chip.on .rio-chip-num { color: var(--gold-300); transform: translate3d(0, -3px, 0); }
.rio-chip:hover .rio-chip-tx > span { color: var(--rio-bone-2); }

.rio-side {
  position: absolute; left: calc(var(--rio-pad) * 0.4); top: 50%; transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.5em; text-transform: uppercase;
  color: hsl(140 22% 93% / 0.4);
}

/* ------------------------------------------------------- chapters 01–04 */
.rio-sec { position: relative; padding: clamp(var(--space-9), 18vh, 12rem) var(--rio-pad); }
/* each chapter carries its own soft scrim, so its copy stays readable over
   any frame of the world; the mask removes the top edge so no seam shows */
.rio-sec::before {
  content: ""; position: absolute; inset: -20% -4%; z-index: -1; pointer-events: none;
  background: radial-gradient(110% 62% at 28% 50%, hsl(165 40% 4% / 0.82), hsl(165 40% 4% / 0.55) 42%, hsl(165 40% 4% / 0.12) 74%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 40%, #000 70%, transparent);
          mask-image: linear-gradient(transparent, #000 40%, #000 70%, transparent);
}
.rio-sec-right::before { background: radial-gradient(110% 62% at 72% 50%, hsl(165 40% 4% / 0.82), hsl(165 40% 4% / 0.5) 45%, transparent 78%); }
.rio-sec-wide::before { background: radial-gradient(110% 70% at 50% 50%, hsl(165 40% 4% / 0.72), hsl(165 40% 4% / 0.42) 50%, transparent 80%); }

.rio-head { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: clamp(var(--space-6), 6vh, var(--space-8)); max-width: var(--max-width); }
.rio-k { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rio-mute); white-space: nowrap; }
.rio-k b { color: var(--gold-300); font-weight: 600; }
.rio-rule { flex: 1 1 auto; height: 1px; background: var(--rio-line); }

.rio-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-6), 5vw, var(--space-9)); align-items: start;
  max-width: var(--max-width);
}
.rio-split .rio-h2 { max-width: 12ch; }
.rio-split-tight { align-items: end; margin-bottom: clamp(var(--space-6), 6vh, var(--space-8)); }
.rio-copy .rio-lead + .rio-body { margin-top: var(--space-5); }

.rio-arrow {
  display: inline-flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6);
  min-height: 44px;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rio-bone);
}
.rio-arrow:hover { color: var(--rio-bone); }
.rio-arrow-ring {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rio-line);
  display: grid; place-items: center;
  transition: background .45s var(--rio-ease), border-color .45s, color .45s;
}
.rio-arrow-ring svg { transition: transform .5s var(--rio-ease); }
.rio-arrow:hover .rio-arrow-ring { background: var(--rio-bone); border-color: var(--rio-bone); color: var(--rio-ink); }
.rio-arrow:hover .rio-arrow-ring svg { transform: translate3d(2px, -2px, 0); }

.rio-stats {
  display: flex; flex-wrap: wrap; gap: var(--space-5) clamp(var(--space-6), 5vw, var(--space-9));
  margin-top: clamp(var(--space-7), 9vh, var(--space-9));
  padding-top: var(--space-5); border-top: 1px solid var(--rio-line-soft);
  max-width: var(--max-width);
}
.rio-stats div { display: flex; flex-direction: column-reverse; }
.rio-stats dd { font-size: clamp(var(--text-3xl), 3vw, var(--text-5xl)); font-weight: 300; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--rio-bone); }
.rio-stats dt { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rio-mute); }

/* 02 · routes: glass panels on a staggered grid, lit where the pointer is */
.rio-routes {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(var(--space-3), 1.2vw, var(--space-5));
  align-items: start;
}
.rio-route {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-2);
  min-height: 15rem; padding: var(--space-5);
  border-radius: var(--radius-lg);
  color: var(--rio-bone);
  background:
    radial-gradient(240px circle at var(--gx, 50%) var(--gy, 0%), hsl(46 90% 70% / 0.14), transparent 70%),
    linear-gradient(180deg, hsl(165 30% 14% / 0.5), hsl(165 40% 6% / 0.62));
  box-shadow: inset 0 0 0 1px hsl(140 22% 93% / 0.1), inset 0 1px 0 hsl(140 22% 93% / 0.12), 0 24px 48px -24px hsl(165 40% 2% / 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  transition: box-shadow .5s var(--rio-ease), transform .7s var(--rio-ease);
}
.rio-route:nth-child(2) { margin-top: clamp(1rem, 2.5vw, 2.5rem); }
.rio-route:nth-child(3) { margin-top: clamp(2rem, 5vw, 5rem); }
.rio-route:nth-child(4) { margin-top: clamp(1rem, 2.5vw, 2.5rem); }
.rio-route:hover { color: var(--rio-bone); transform: translate3d(0, -6px, 0); box-shadow: inset 0 0 0 1px hsl(140 22% 93% / 0.28), inset 0 1px 0 hsl(140 22% 93% / 0.2), 0 32px 60px -24px hsl(165 40% 2% / 0.95); }
.rio-js .rio .rio-route.rv-in { transition: opacity .9s var(--rio-ease), transform .7s var(--rio-ease), box-shadow .5s var(--rio-ease); }
.rio-js .rio .rio-route.rv-in:hover { transform: translate3d(0, -6px, 0); }
.rio-route-k { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rio-mute); }
.rio-route strong { font-size: var(--text-xl); line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.rio-route-tx { font-size: var(--text-sm); line-height: 1.55; color: var(--rio-bone-2); }
.rio-route-ar {
  margin-top: auto; align-self: flex-end;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--rio-line); color: var(--rio-bone);
  transition: background .45s var(--rio-ease), color .45s, border-color .45s, transform .5s var(--rio-ease);
}
.rio-route:hover .rio-route-ar { background: var(--rio-bone); color: var(--rio-ink); border-color: var(--rio-bone); transform: translateX(3px); }
.rio-route-accent { box-shadow: inset 0 2px 0 var(--gold-400), inset 0 0 0 1px hsl(46 90% 56% / 0.28), 0 24px 48px -24px hsl(165 40% 2% / 0.9); }
.rio-route-accent .rio-route-k { color: var(--gold-300); }
.rio-route-accent .rio-route-ar { background: var(--gold-400); color: var(--gold-900); border-color: var(--gold-400); }
.rio-route-accent:hover .rio-route-ar { background: var(--gold-300); color: var(--gold-900); border-color: var(--gold-300); }

/* 03 · under the surface: a numbered list with a filling bar */
.rio-under {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(var(--space-6), 6vw, var(--space-9)); align-items: start;
  max-width: var(--max-width); margin-left: auto;
}
.rio-under-intro .rio-h2 { margin-bottom: var(--space-5); }
.rio-hint {
  display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6);
  font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--rio-mute);
}
.rio-hint span { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--rio-line); position: relative; }
.rio-hint span::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--gold-300); animation: rio-pulse 2.4s var(--rio-ease-io) infinite; }
@keyframes rio-pulse { 0%, 100% { transform: scale(.6); opacity: .5; } 50% { transform: scale(1); opacity: 1; } }
@media (hover: none) { .rio-hint { display: none; } }

.rio-steps { list-style: none; border-top: 1px solid var(--rio-line); }
.rio-steps a {
  position: relative;
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: var(--space-4); align-items: baseline;
  padding: var(--space-5) var(--space-2);
  border-bottom: 1px solid var(--rio-line);
  color: var(--rio-bone);
  transition: background .5s var(--rio-ease), padding .5s var(--rio-ease);
}
.rio-steps a:hover { color: var(--rio-bone); background: hsl(165 40% 8% / 0.45); padding-left: var(--space-4); }
.rio-step-k { font-size: var(--text-sm); font-weight: 600; color: var(--gold-300); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.rio-step-tx strong { display: block; font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--space-1); }
.rio-step-tx span { display: block; font-size: var(--text-sm); line-height: 1.55; color: var(--rio-bone-2); text-shadow: var(--rio-shadow); }
.rio-step-tag { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rio-mute); white-space: nowrap; }
.rio-step-bar {
  position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--gold-400); transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--rio-ease);
}
.rio-steps a:hover .rio-step-bar { transform: scaleX(1); }

/* 04 · the closing chapter: centered, then a long fade into the page */
.rio-fin {
  text-align: center;
  padding-bottom: clamp(var(--space-10), 26vh, 16rem);
  display: flex; flex-direction: column; align-items: center;
}
.rio-fin::before {
  background: radial-gradient(80% 55% at 50% 42%, hsl(165 40% 4% / 0.62), hsl(165 40% 4% / 0.3) 55%, transparent 80%);
}
.rio-fin .rio-eyebrow { justify-content: center; }
.rio-h2-fin { font-size: clamp(2.25rem, 5vw, 4.5rem); max-width: 16ch; margin-bottom: var(--space-5); }
.rio-fin .rio-lead { margin: 0 auto; }

/* the page slides over the river like a sheet */
.rio-after {
  position: relative; z-index: 2;
  margin-top: calc(-1 * var(--space-7));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -24px 60px hsl(165 40% 2% / 0.45);
}

@media (min-width: 901px) {
  .rio-hero, .rio-sec { padding-right: calc(var(--rio-pad) + 9rem); }
  .rio-fin { padding-left: calc(var(--rio-pad) + 9rem); }
}

/* ------------------------------------------------- the header on scene */
.is-home { --rio-header: 4rem; }
.is-home .site-header { transition: background .5s, border-color .5s, box-shadow .5s; }
.is-home .site-header.on-scene {
  background: transparent; border-bottom-color: transparent;
}
.is-home .site-header.on-scene.stuck {
  background: hsl(165 40% 5% / 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: hsl(140 22% 93% / 0.08);
}
.is-home .site-header.on-scene .site-logo,
.is-home .site-header.on-scene .main-nav a,
.is-home .site-header.on-scene .icon-btn,
.is-home .site-header.on-scene .nav-toggle { color: hsl(140 22% 93%); }
.is-home .site-header.on-scene .main-nav a:not(.active) { color: hsl(150 18% 80%); }
.is-home .site-header.on-scene .main-nav a:hover,
.is-home .site-header.on-scene .icon-btn:hover,
.is-home .site-header.on-scene .nav-toggle:hover { color: #fff; background: hsl(140 22% 93% / 0.1); }
@media (min-width: 821px) {
  .is-home .site-header.on-scene .main-nav a.active { color: #fff; }
}
@media (max-width: 820px) {
  .is-home .site-header.on-scene .main-nav { background: hsl(165 40% 5% / 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: hsl(140 22% 93% / 0.08); }
  .is-home .site-header.on-scene .main-nav a.active { background: hsl(140 22% 93% / 0.08); }
}

/* --------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .rio-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rio-route:nth-child(n) { margin-top: 0; min-height: 12rem; }
  .rio-route:nth-child(even) { transform: translateY(var(--space-6)); }
  .rio-js .rio-route:nth-child(even).rv-in { transform: translateY(var(--space-6)); }
  .rio-route:last-child { grid-column: 1 / -1; }
  .rio-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-5); }
  .rio-peek { display: none; }
}
@media (max-width: 900px) {
  .rio-split, .rio-under { grid-template-columns: minmax(0, 1fr); }
  .rio-split .rio-h2 { max-width: 16ch; }
  .rio-rail { display: none; }
  .rio-side { display: none; }
  .rio-sec::before, .rio-sec-right::before { background: radial-gradient(130% 70% at 40% 50%, hsl(165 40% 4% / 0.8), hsl(165 40% 4% / 0.5) 55%, transparent 85%); }
}
@media (max-width: 640px) {
  .is-home { --rio-header: 4rem; }
  .rio-hero { padding-top: calc(var(--rio-header) + var(--space-6)); }
  .rio-actions .btn { width: 100%; }
  .rio-checks { flex-direction: column; }
  .rio-chips { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .rio-chip-tx > span { display: none; }
  .rio-chip { align-items: center; }
  .rio-chip-num { font-size: var(--text-xl); width: 2rem; }
  .rio-cue { justify-content: flex-start; }
  .rio-routes { grid-template-columns: minmax(0, 1fr); }
  .rio-route:nth-child(even), .rio-js .rio-route:nth-child(even).rv-in { transform: none; }
  .rio-route { min-height: 0; }
  .rio-route-ar { position: absolute; right: var(--space-4); top: var(--space-4); margin: 0; }
  .rio-steps a { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .rio-step-tag { display: none; }
  .rio-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rio-head .rio-rule, .rio-head .rio-k:last-child { display: none; }
  .rio-h1 { font-size: clamp(2.125rem, 9.6vw, 2.5rem); }
}

/* on a tall screen the sun sits behind the copy: shade the whole column */
@media (max-aspect-ratio: 1/1) {
  .rio-hero::before {
    background: linear-gradient(180deg, hsl(165 40% 4% / 0.35), hsl(165 40% 4% / 0.58) 30%, hsl(165 40% 4% / 0.5) 70%, hsl(165 40% 4% / 0.65));
  }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .rio-h1 { font-size: clamp(2.5rem, 7vw, 4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .rio-js .rio [data-rv], .rio-js .rio-line > span, .rio-js .rio-w { opacity: 1 !important; transform: none !important; }
  .rio-cue-track i, .rio-hint span::after { animation: none; }
}