/* A quiet introduction, with a clear pause before the route begins. */
@media (max-width:700px) {
  .mobile-layout .ml-day .coast-subline {margin:20px calc(30*100cqw/414) 10px;font-size:12px;line-height:1.5;letter-spacing:-.02em}
}
@media (min-width:701px) and (max-width:1399px) {
  .mobile-layout .ml-day .coast-subline {display:block;position:absolute;left:12.4cqw;top:21cqw;width:26cqw;margin:0;font-size:1.2cqw;line-height:1.5;letter-spacing:-.02em}
}
@media (max-width:1399px) {
  .mobile-topbar {
    background:color-mix(in srgb,rgba(242,239,229,calc(.7*var(--bar-progress))),#292824 var(--coast-night,0%));
    color:color-mix(in srgb,#262b27,#b8774e var(--coast-night,0%));
  }
}
/* Hold the existing map while the route is uncovered, then pass into the stay. */
@media (max-width:1399px) and (prefers-reduced-motion:no-preference) {
  .coast-scroll-stage {position:relative;height:calc(var(--coast-height) + 150svh);margin-bottom:calc(-1 * var(--coast-height));background:color-mix(in srgb,#f2efe5,#292824 var(--coast-night,0%))}
  main.mobile-layout .coast-scroll-stage>.ml-day {margin-bottom:0;background:color-mix(in srgb,#f2efe5,#292824 var(--coast-night,0%));color:#292824}
  .coast-scroll-stage .ml-day-map,
  .coast-scroll-stage #mobile-coastline,
  .coast-scroll-stage .coast-subline,
  .coast-scroll-stage .ml-eyebrow-coastline {opacity:var(--coast-daylight,1)}
  .coast-scroll-stage .coast-route {stroke-dasharray:1;stroke-dashoffset:var(--coast-offset,1)}
}