/* ============================================================================
   SECTION THREE — the desert
   ----------------------------------------------------------------------------
   His artboard is 1922.52 x 855.76 with no bleed either side, so the artboard
   IS the art column here and the ratio is 855.76 / 1922.52. No copy in this
   section: it is ground, road and one cloud.
   ========================================================================= */

.sec3{
  position:relative;
  width:100%;
  aspect-ratio:1922.52 / 855.76;        /* 0.4451 */
  container-type:inline-size;
  /* THE TOP FIFTH OF THIS SECTION IS EMPTY. His sand does not start until 20%
     down the artboard, so above that there was nothing but this section's own
     fallback gradient - a band of dead cream between section two's copy and
     his road, which is the gap he marked. The section is pulled up by 10% of
     the width so that empty band lies over section two's sand instead of below
     it, and the band itself is left TRANSPARENT (see the gradient) so section
     two paints straight through. Nothing inside either artboard moves; the
     dead space is simply overlapped away, and the copy keeps about 55px of
     clearance above where his sand begins. */
  margin-top:-10%;
  /* The desert's own colours, sampled straight down the art by
     tools/art_underlay.js, painted underneath it. You never see them - the art
     covers every stop. They are there for the moment the browser is short of
     memory and has not finished painting, so a dropped tile shows the right
     colour at the right height instead of a hole. The flat #fdf6e4 under it
     all is section two's sand, so the join has no line. */
  background: var(--sec3-bg,
    linear-gradient(180deg,
      transparent 0%,  transparent 18%, #fdf3dd 21%,     #ffdb95 45.78%,  #ffd486 47.72%,
      #daa363 47.86%,  #d59c5f 48.00%,  #c19885 48.13%,  #b59080 48.83%,
      #d9ae9c 50.76%,  #a78676 50.90%,  #97796a 51.87%,  #deb081 52.01%,
      #ffd486 61.70%,  #d59c5f 61.97%,  #d59c5f 69.72%,  #8f705e 69.86%,
      #876b5f 72.21%,  #ba9483 72.35%,  #cfa694 78.58%,  #967769 78.72%,
      #8c6e62 80.66%,  #d8ad9b 80.80%,  #ddb19e 96.43%,  #ecbdaa 96.57%,
      #c89f8c 96.71%,  #c99e86 97.96%,  #d59c5f 98.09%,  #d59c5f 100%));
  overflow:hidden;
  isolation:isolate;
}

.sec3 [data-at]{ position:absolute; display:block }
.sec3 img[data-at], .sec3 svg[data-at]{ height:auto }

.sec3 .z-ground{ z-index:0 } .sec3 .z-road{ z-index:1 }
.sec3 .z-cloud { z-index:3 }


/* --- HIS DESERT AT NIGHT, PAINT BY PAINT ---------------------------------
   GENERATED by tools/make_desert_night.js - do not edit between the markers.
   In his day art the sand is the bright thing and the rocks are dark; in his
   night artboard it is the other way round, and no filter can swap two
   families over. Each of his paints gets its own switch instead, with the
   day colour as the fallback, so daylight cannot be changed from here. */
/* >>> desert */
.sec3 .z-ground [fill="#ffdb96"]{ fill: var(--dffdb96, #ffdb96) }
.sec3 .z-ground [fill="#ffd486"]{ fill: var(--dffd486, #ffd486) }
.sec3 .z-ground [fill="#fac67e"]{ fill: var(--dfac67e, #fac67e) }
.sec3 .z-ground [fill="#754c24"]{ fill: var(--d754c24, #754c24) }
.sec3 .z-ground [fill="#c89a70"]{ fill: var(--dc89a70, #c89a70) }
.sec3 .z-ground [fill="#bb9067"]{ fill: var(--dbb9067, #bb9067) }
.sec3 .z-ground [fill="#83643d"]{ fill: var(--d83643d, #83643d) }
.sec3 .z-ground [fill="#af845b"]{ fill: var(--daf845b, #af845b) }
.sec3 .z-ground [fill="#c3976b"]{ fill: var(--dc3976b, #c3976b) }
.sec3 .z-ground [fill="#bb9066"]{ fill: var(--dbb9066, #bb9066) }
.sec3 .z-ground [fill="#d8a77c"]{ fill: var(--dd8a77c, #d8a77c) }
.sec3 .z-ground [fill="#735632"]{ fill: var(--d735632, #735632) }
.sec3 .z-ground [fill="#a67f56"]{ fill: var(--da67f56, #a67f56) }
.sec3 .z-ground [fill="#b48a5f"]{ fill: var(--db48a5f, #b48a5f) }
.sec3 .z-ground [fill="#b4895f"]{ fill: var(--db4895f, #b4895f) }
.sec3 .z-ground [fill="#c7996e"]{ fill: var(--dc7996e, #c7996e) }
.sec3 .z-ground [fill="#af865c"]{ fill: var(--daf865c, #af865c) }
.sec3 .z-ground [fill="#9a754e"]{ fill: var(--d9a754e, #9a754e) }
.sec3 .z-ground [fill="#a17b53"]{ fill: var(--da17b53, #a17b53) }
.sec3 .z-ground [fill="#b68c61"]{ fill: var(--db68c61, #b68c61) }
.sec3 .z-ground [fill="#80623c"]{ fill: var(--d80623c, #80623c) }
.sec3 .z-ground [fill="#93704a"]{ fill: var(--d93704a, #93704a) }
.sec3 .z-ground [fill="#9b6b22"]{ fill: var(--d9b6b22, #9b6b22) }
.sec3 .z-ground [fill="#376e00"]{ fill: var(--d376e00, #376e00) }
.sec3 .z-ground [fill="#4f9705"]{ fill: var(--d4f9705, #4f9705) }
.sec3 .z-ground [fill="#458500"]{ fill: var(--d458500, #458500) }
.sec3 .z-ground [fill="#51ab00"]{ fill: var(--d51ab00, #51ab00) }
.sec3 .z-ground [fill="#67ba14"]{ fill: var(--d67ba14, #67ba14) }
.sec3 .z-ground [fill="#83c438"]{ fill: var(--d83c438, #83c438) }
.sec3 .z-ground [fill="#3f7a00"]{ fill: var(--d3f7a00, #3f7a00) }
.sec3 .z-ground [stop-color="#ffdb96"]{ stop-color: var(--dffdb96, #ffdb96) }
.sec3 .z-ground [stop-color="#ffd486"]{ stop-color: var(--dffd486, #ffd486) }
.sec3 .z-ground [stop-color="#fac67e"]{ stop-color: var(--dfac67e, #fac67e) }
.sec3 .z-ground [stop-color="#754c24"]{ stop-color: var(--d754c24, #754c24) }
.sec3 .z-ground [stop-color="#c89a70"]{ stop-color: var(--dc89a70, #c89a70) }
.sec3 .z-ground [stop-color="#bb9067"]{ stop-color: var(--dbb9067, #bb9067) }
.sec3 .z-ground [stop-color="#83643d"]{ stop-color: var(--d83643d, #83643d) }
.sec3 .z-ground [stop-color="#af845b"]{ stop-color: var(--daf845b, #af845b) }
.sec3 .z-ground [stop-color="#c3976b"]{ stop-color: var(--dc3976b, #c3976b) }
.sec3 .z-ground [stop-color="#bb9066"]{ stop-color: var(--dbb9066, #bb9066) }
.sec3 .z-ground [stop-color="#d8a77c"]{ stop-color: var(--dd8a77c, #d8a77c) }
.sec3 .z-ground [stop-color="#735632"]{ stop-color: var(--d735632, #735632) }
.sec3 .z-ground [stop-color="#a67f56"]{ stop-color: var(--da67f56, #a67f56) }
.sec3 .z-ground [stop-color="#b48a5f"]{ stop-color: var(--db48a5f, #b48a5f) }
.sec3 .z-ground [stop-color="#b4895f"]{ stop-color: var(--db4895f, #b4895f) }
.sec3 .z-ground [stop-color="#c7996e"]{ stop-color: var(--dc7996e, #c7996e) }
.sec3 .z-ground [stop-color="#af865c"]{ stop-color: var(--daf865c, #af865c) }
.sec3 .z-ground [stop-color="#9a754e"]{ stop-color: var(--d9a754e, #9a754e) }
.sec3 .z-ground [stop-color="#a17b53"]{ stop-color: var(--da17b53, #a17b53) }
.sec3 .z-ground [stop-color="#b68c61"]{ stop-color: var(--db68c61, #b68c61) }
.sec3 .z-ground [stop-color="#80623c"]{ stop-color: var(--d80623c, #80623c) }
.sec3 .z-ground [stop-color="#93704a"]{ stop-color: var(--d93704a, #93704a) }
.sec3 .z-ground [stop-color="#9b6b22"]{ stop-color: var(--d9b6b22, #9b6b22) }
.sec3 .z-ground [stop-color="#376e00"]{ stop-color: var(--d376e00, #376e00) }
.sec3 .z-ground [stop-color="#4f9705"]{ stop-color: var(--d4f9705, #4f9705) }
.sec3 .z-ground [stop-color="#458500"]{ stop-color: var(--d458500, #458500) }
.sec3 .z-ground [stop-color="#51ab00"]{ stop-color: var(--d51ab00, #51ab00) }
.sec3 .z-ground [stop-color="#67ba14"]{ stop-color: var(--d67ba14, #67ba14) }
.sec3 .z-ground [stop-color="#83c438"]{ stop-color: var(--d83c438, #83c438) }
.sec3 .z-ground [stop-color="#3f7a00"]{ stop-color: var(--d3f7a00, #3f7a00) }
.sec3 .z-ground [fill^="#"],
.sec3 .z-ground [stop-color^="#"]{ transition: fill 1s linear, stop-color 1s linear }
/* <<< desert */