/* ------------------------------------------------------------------
       PAGE THEME
       Background is the Humboldt teal. We use a tan "road" color and a
       deep-green ink color for headings to match the RV + map artwork.
    ------------------------------------------------------------------ */
html,
body {
  background: #6DC6CC;
  overflow-x: clip;
  max-width: 100%;
}

/* ---------- Intro / hero ---------- */
.road-hero {
  max-width: 1480px;
  margin: 0 auto 0;
  padding: 8rem 1.5rem 0;
  overflow: visible;
}
.road-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(620px, 1fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 5.5rem);
}
.road-hero-copy {
  max-width: 560px;
  padding-top: clamp(0rem, 2vw, 2rem);
}
.road-hero h1 {
  font-size: clamp(3.2rem, 7vw, 3.6rem);
  line-height: 1.05;
  margin: 0 0 1rem;
  text-wrap: balance;
  color: #000;
}
.road-hero p {
  font-size: 1.125rem;
  line-height: 1.4;
  margin: 0 0 1.25rem;
}
.road-hero .byline {
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 30px;
}
.road-hero-map {
  display: block;
  width: min(100%, 760px);
  margin-bottom: clamp(-16rem, -16vw, -8rem);
  margin-left: auto;
  transform: translateY(clamp(1rem, 4vw, 4.5rem));
  filter: drop-shadow(0 22px 34px rgba(0,0,0,0.18));
}

@media (max-width: 1120px) {
  .road-hero {
    max-width: 760px;
    margin-bottom: 4rem;
  }
  .road-hero-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .road-hero-map {
    width: min(100%, 520px);
    margin: 0 auto;
    transform: none;
  }
}

/* ------------------------------------------------------------------
   THE JOURNEY
   .journey is the tall scrolling area. The RV lives inside it and is
   "sticky", so it stays parked in the middle of the screen while the
   stop cards scroll past it. GSAP then nudges it side-to-side + bobs
   it as you scroll, so it feels like it is driving.
------------------------------------------------------------------ */
.journey {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem 20rem;
  overflow-x: clip;
  --stop-offset-y: 8rem;
  --road-start-y: 72px;
  --rv-start-y: 109px;
}

/* the winding road is an SVG that we draw with JavaScript so it can
   follow exactly the same left/right weave as the RV. It sits behind
   the stop cards. */
.road {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.road .road-base {            /* the wide tan "asphalt" */
  fill: none;
  stroke: #efe3b8;
  stroke-width: 64;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.road .road-line {            /* the dashed centre line */
  fill: none;
  stroke: #c9a544;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 2 30;
}

/* the RV that drives down the page */
.rv-wrap {
  position: sticky;
  top: 38vh;               /* keeps the RV near the middle of the viewport */
  z-index: 1;              /* above the road (0) but BEHIND the stop cards (2) */
  width: 230px;
  margin: 0 auto;
  opacity: 0;
  pointer-events: none;     /* let scroll/clicks pass through to content */
  will-change: transform;   /* hint the browser we will animate this */
}
.rv-wrap img {
  display: block;
  width: 100%;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,0.25));
}
/* the two RV graphics are stacked on top of each other. We fade
   between them depending on which way the RV is currently driving. */
.rv-wrap .rv-dir-left {
  position: absolute;
  inset: 0;
  opacity: 0;              /* starts hidden; GSAP fades it in on left turns */
}

/* ---------- Stop cards ---------- */
.stop {
  position: relative;
  top: var(--stop-offset-y);
  z-index: 2;              /* in front of the RV (1) and road (0) */
  max-width: 420px;
  margin: -4rem 0 14rem;     /* big gaps so the RV has room to "travel" */
  background: #fbf6e7;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
  overflow: hidden;
}
.stop.left  { margin-right: auto; }   /* card on the left side of the road */
.stop.right { margin-left: auto; }    /* card on the right side of the road */

.stop img,
.stop video {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.stop .stop-body { padding: 1.5rem 1.75rem 0.50rem; }
.stop .stop-tag {
  display: inline-block;
  background: #f4b73e;
  color: #3a2a00;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  /*border-radius: 7px;*/
  margin-bottom: 1.25rem;
  margin-left: -1.75rem;
}
.stop h2 {
  margin: 0 0 0.6rem;
  font-size: 1.6rem;
}
.stop p {
  margin: 0 0 0.75rem;
  line-height: 1.6;
}
.stop a {
  color: #8B4513;
}
.stop a:hover {
  color: #3a2a00;
}

@media (max-width: 640px) {
  .journey {
    --road-start-y: 60px;
    --rv-start-y: 60px;
  }

  .road-hero {
    margin: 0 auto 2.5rem;
    padding-top: calc(var(--reading-progress-offset, 4.75rem) + 1.25rem);
  }
  .road-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .road-hero-map {
    width: min(100%, 340px);
    margin: 0 auto;
  }
  .rv-wrap {
    top: 56vh;
    z-index: 1;
    width: 200px;
  }

  .stop {
    top: 0;
    z-index: 3;
    margin: 4rem 0 18rem;
  }

  .stop:first-of-type {
    margin-top: 2rem;
  }

  .stop:last-of-type {
    margin-bottom: 0;
  }
}

/* ---------- Outro ---------- */
.road-outro {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1.5rem 6rem;
  text-align: center;
}
.road-outro h2 { font-size: 2rem; margin: 0 0 0.75rem; }
.road-outro p  { font-size: 1.1rem; line-height: 1.6; }