/* Selected illustrations (intro / end of tour / footer), 2026-10-03.
   Tone pass: the small SVG plants in the cemetery tour use the palette sampled from those three
   illustrations (yellow-green leaves, deep conifer green, soft sakura pink, yellow and white wildflowers).
   Photo layout is intentionally unchanged. */

/* ---------- Plant colours (sampled from the new illustrations) ----------
   --sh / --sho: the shaded side of each plant is a deeper tone of the same hue, not a grey-green overlay */
.rb--art{--rb-pink:#f4a7bd}
.rb-c-sakura{color:#f9b1c6;--sh:#e9789c;--sho:.42;--dot:#fff}
.rb-c-sakura-2{color:#fbc3d2;--sh:#ee8dab;--sho:.4;--dot:#fff}
.rb-c-leaf{color:#b8da3a;--sh:#6faf1c;--sho:.5;--dot:#f4fab0}
.rb-c-pine{color:#2f9b37;--sh:#0f7428;--sho:.5}
.rb-c-pine-2{color:#55b845;--sh:#22882c;--sho:.5}
.rb-c-bush{color:#a7d63e;--sh:#5fa61f;--sho:.45}
.rb-c-grass{color:#57ad3b}
.rb-t-blooms{aspect-ratio:60/34}

/* Ground under the photos: a light, fresh meadow tint instead of the old dull sage */
.rb--art .rb-stage::before{background:radial-gradient(120% 90% at 50% 30%,#f3f9d8 0%,#ecf6c8 70%,#e7f3bd 100%)}
.rb--art .rb-stop--02 .rb-stage::before,.rb--art .rb-stop--04 .rb-stage::before{background:radial-gradient(120% 90% at 50% 30%,#f6fae6 0%,#f0f7d6 70%,#ebf4cb 100%)}

/* Tape on the pinned snapshots, matched to the new pinks / greens */
.rb--art .rb-photo--snap::before{background:rgba(247,162,189,.62)}
.rb--art .rb-photo--snap-b::before{background:rgba(183,217,58,.6)}

/* Dotted route: sand where it leaves the painted road, then a soft wine-rose */
.rb--art .rb-route__base{stroke:url(#rb-route-fade);stroke-width:3.4}

/* Small flowers sitting on the upper edge of a text card */
.rb-card .rb-card__bloom{z-index:2}

/* ---------- Common art block ---------- */
.rb-art{position:relative;display:block;width:min(100vw,1760px);height:auto;margin-left:calc(50% - min(50vw,880px));pointer-events:none}
.rb-art__picture{display:block;width:100%;line-height:0}
.rb-art__image{display:block;width:100%;max-width:none;height:auto;aspect-ratio:var(--art-ratio);object-fit:contain}

/* ---------- Intro: the road in the picture fades into the dotted route ----------
   The road tail occupies the bottom ~12% of the picture and fades out over that part.
   The dotted route sits behind the picture (z-index), and starts where the road tail has fully
   faded (the very bottom edge), so the dots never show through the painted road:
   road → dots → stop 1. */
.rb-scene--art{--art-ratio:2172/724;--road-x:50%;height:auto;margin-top:26px;padding-bottom:0}
.rb-scene--art .rb-art__image{-webkit-mask-image:linear-gradient(to bottom,#000 90%,rgba(0,0,0,.6) 95.5%,transparent 100%);mask-image:linear-gradient(to bottom,#000 90%,rgba(0,0,0,.6) 95.5%,transparent 100%)}
.rb-art__anchor{position:absolute;left:var(--road-x);bottom:-2px;width:0;height:0}
.rb--art .rb-stop--01{padding-top:96px}

/* ---------- End of the tour ---------- */
.rb-end__scene--art{--art-ratio:2172/644;height:auto;margin-top:0}
.rb-art__arrival{position:relative;z-index:2;display:block;width:9px;height:9px;margin:0 auto 12px;border:1.5px solid #b45a6c;border-radius:50%;background:#fff}
.rb--art .rb-end{margin-top:64px}
.rb--art .rb-more{margin-top:18px}
.rb--art .rb-note{padding-top:20px}

/* ---------- Footer landscape: flat ground edge sits on the page bottom ---------- */
.ft__scene--art{--art-ratio:2110/556;width:100vw;max-width:none;height:auto;margin:28px 0 0 calc(50% - 50vw);overflow:clip}
/* 1% wider so the soft corners of the painting never leave a notch at the page edge */
.ft__scene--art .rb-art__image{width:101%;margin-left:-.5%;vertical-align:bottom}

@media (max-width:599px){
  /* Phone: show the two tour landscapes a little larger (edges trimmed), keeping the road on the centre line */
  .rb-scene--art{--art-ratio:1480/724;--road-x:47.95%;width:116vw;margin:22px 0 0 calc(50% - 55.6vw)}
  .rb-end__scene--art{--art-ratio:1732/644;width:118vw;margin-left:calc(50% - 59vw)}
  .ft__scene--art{--art-ratio:1255/556;margin-top:26px}
  .rb--art .rb-more{margin-top:12px}
  .rb-art__arrival{margin-bottom:10px}
}

/* ---------- PC: even-numbered stops have the heading on the right,
   so the sky motifs move to the free space on the left of the photo ---------- */
@media (min-width:900px){
  .rb--art .rb-stop--01{padding-top:150px}
  .rb-stop--02 .rb-t-sun{right:auto !important;left:-60px !important;top:-10px !important}
  .rb-stop--02 .rb-t-cloud{right:auto !important;left:24% !important;top:-40px !important}
  .rb-stop--04 .rb-t-round{right:auto !important;left:-62px !important;top:-6px !important}
  .rb-stop--04 .rb-t-tall{right:auto !important;left:-86px !important;top:16px !important}
  .rb-stop--04 .rb-t-cloud{right:12% !important;top:-30px !important}
}