/* Original Frequency City artwork, assembled as complete depth planes.
   The original garage pixels and approved road/traffic remain unchanged. */
.hero.city-boulevard {
  height: clamp(740px, calc(58.54vw + 54px), 1040px);
  min-height: 740px;
  background: #171327;
}
.city-boulevard .city-scene { background: #171327; }
.world-canvas { display: block; position: absolute; left: 0; bottom: 54px; width: 100%; height: 58.54vw; }
.world-canvas image { pointer-events: none; }
#traffic-car { visibility: hidden; transform-box: fill-box; transform-origin: center; }
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, #0b0c1066, transparent 18%),
    linear-gradient(90deg, #101016a6, #10101650 35%, transparent 62%);
}
.city-boulevard .hero-content { position: relative; margin: 54px 4.3% 0; max-width: 720px; }
.city-boulevard h1 { font-size: clamp(65px, 7.2vw, 116px); line-height: .99; letter-spacing: -1px; }
.city-boulevard .hero-description { max-width: 490px; }
.city-boulevard .hero-bottom { bottom: 0; left: 0; right: 0; height: 54px; padding: 0 4.3%; background: #0b0c10e8; }
.city-boulevard .pin-radio { top: 23%; right: 9%; }
.city-boulevard .pin-audio { top: auto; bottom: 26%; right: 7%; }
.city-boulevard .vincent-character { width: 132px; height: 176px; bottom: 66px; right: 3%; }
.city-boulevard .character-name { font-size: 8px; padding: 6px; letter-spacing: 0; }

.district-card { min-height: 310px; }
.district-card .district-caption strong { font-size: clamp(25px, 2.3vw, 35px); }
.district-card .district-caption small { font-size: 10px; letter-spacing: .7px; }
.district-card .district-image {
  background-repeat: no-repeat;
  background-image: linear-gradient(180deg, #0b0c1030, transparent 30%, #0b0c10f5), url('/assets/frequency-city.png');
  background-size: cover, 260%;
}
.district-underground .district-image {
  background-image: linear-gradient(180deg, #0b0c1030, transparent 30%, #0b0c10f5), url('/assets/woofs-garage.png');
  background-size: cover, cover; background-position: center, 48% center;
}
.district-garage .district-image {
  background-image: linear-gradient(180deg, #0b0c1030, transparent 30%, #0b0c10f5), url('/assets/ohm-sweet-ohm-reference.png');
  background-size: cover, auto 225%; background-position: center, 45% 14%;
}
.district-radio .district-image { background-position: center, 100% 27%; }
.video-art { background-image: linear-gradient(90deg, #100d23c9, #20102220), url('/assets/frequency-city.png'); }
.place-dialog h2 { font-size: clamp(33px, 5vw, 49px); }
.place-dialog > p:not(.eyebrow) { line-height: 1.75; }

@media (min-width: 1600px) {
  .city-boulevard .hero-content { margin-left: max(4.3%, calc((100vw - 1460px) / 2)); }
}
@media (max-width: 1050px) {
  .city-boulevard .hero-content { max-width: 590px; margin-top: 50px; }
  .city-boulevard h1 { font-size: 82px; }
  .city-boulevard .hero-description { max-width: 380px; }
  .city-boulevard .pin-audio { bottom: 22%; right: 4%; }
}
@media (max-width: 760px) {
  .hero.city-boulevard { height: 880px; min-height: 880px; }
  .city-boulevard .hero-content { margin: 48px 5% 0; max-width: 94%; }
  .city-boulevard h1 { font-size: clamp(59px, 11.9vw, 86px); line-height: 1; }
  .city-boulevard .hero-description { max-width: 350px; font-size: 14px; }
  .city-boulevard .hero-scrim {
    background: linear-gradient(180deg, #171327cc, #17132799 31%, transparent 63%),
      linear-gradient(0deg, #0b0c1080, transparent 18%);
  }
  .world-canvas { inset: auto; width: 1100px; height: 644px; left: 50%; bottom: 54px; transform: translateX(-61%); }
  .city-boulevard .pin-radio { top: auto; bottom: 465px; right: 5%; }
  .city-boulevard .pin-audio { left: 5%; right: auto; bottom: 197px; }
  .city-boulevard .vincent-character { width: 100px; height: 139px; right: 4%; bottom: 61px; }
  .district-card .district-caption strong { font-size: 33px; }
}
@media (prefers-reduced-motion: reduce) {
  .world-layer { transform: none !important; }
}