/* Main Street — the strolling painted storefront strip that closes the
   homepage. Added 2026-08-23. Hidden until the listings load (is-ready), so a
   slow directory never leaves an empty grey band at the bottom of the page. */
#main-street {
  margin: 8px auto 0;
  padding: 0 clamp(12px, 4vw, 32px) 34px;
  max-width: 1240px;
  opacity: 0;
  transition: opacity .35s ease;
}
#main-street.is-ready { opacity: 1; }

#main-street .ms-head { margin: 0 0 14px; }
#main-street .ms-head h2 {
  margin: 0 0 4px;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -.02em;
}
#main-street .ms-head p {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  opacity: .78;
}
#main-street .ms-count {
  display: inline-block;
  background: #0f2d3d;
  color: #fff;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12.5px;
  font-weight: 800;
  margin-left: 4px;
}

#main-street .ms-stage {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #cfe0ea;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
}
/* Soft edges so storefronts walk in and out instead of being chopped off. */
#main-street .ms-stage::before,
#main-street .ms-stage::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 8%, 110px);
  z-index: 3;
  pointer-events: none;
}
#main-street .ms-stage::before { left: 0; background: linear-gradient(90deg, rgba(244,245,241,.95), rgba(244,245,241,0)); }
#main-street .ms-stage::after { right: 0; background: linear-gradient(270deg, rgba(244,245,241,.95), rgba(244,245,241,0)); }

#main-street .ms-strip {
  display: flex;
  width: max-content;
  animation: msStroll 240s linear infinite;
}
#main-street .ms-stage:hover .ms-strip,
#main-street .ms-stage:active .ms-strip { animation-play-state: paused; }
@keyframes msStroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  #main-street .ms-strip { animation: none; }
  #main-street .ms-stage { overflow-x: auto; }
}

#main-street .ms-lot {
  position: relative;
  flex: 0 0 auto;
  width: clamp(240px, 32vw, 430px);
  display: block;
  text-decoration: none;
  color: inherit;
}
#main-street .ms-lot img { display: block; width: 100%; height: auto; }
#main-street .ms-sign {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 2%;
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  color: #3b2a17;
  line-height: 1.04;
}
#main-street .ms-sign b { display: block; }
#main-street .ms-sign small { display: block; font-weight: 600; opacity: .75; margin-top: .16em; }
#main-street .ms-lot:hover .ms-sign { color: #10202a; }