@font-face{font-family:CityGlass;src:url('fonts/city-glass-grotesk.ttf') format('truetype');font-display:swap}
.city-showcase{--city-accent:#d5ff70;position:relative;isolation:isolate;box-sizing:border-box;min-width:0;height:540px;overflow:hidden;background:#102c32;color:#fff;border:1px solid #7fa5a1;border-radius:8px;font-family:CityGlass,'Trebuchet MS',sans-serif;letter-spacing:0;box-shadow:0 18px 54px #02060d73}
.city-showcase *{box-sizing:border-box;letter-spacing:0}
.city-showcase::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,#06161bd9 0%,#06161b8f 31%,transparent 66%),linear-gradient(0deg,#06161be6 0%,transparent 43%)}
.city-showcase-picture{position:absolute;inset:0;display:block;z-index:0}
.city-showcase-picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 52%;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.city-showcase-copy{position:absolute;z-index:1;left:clamp(22px,5vw,58px);bottom:clamp(28px,6vw,62px);width:min(560px,62%)}
.city-showcase h2{max-width:12ch;margin:0;color:#fff;font-family:CityGlass,'Trebuchet MS',sans-serif;font-size:clamp(35px,5.5vw,64px);font-weight:600;line-height:.98;text-shadow:0 2px 18px #0314188f;text-transform:none;overflow-wrap:normal}
.city-showcase-copy p{margin:17px 0 0;color:#d6e8e4;font:700 13px/1.2 "Space Mono",monospace}
.city-showcase-play{position:absolute;z-index:2;right:clamp(22px,4vw,48px);bottom:clamp(28px,5vw,54px);display:flex;align-items:center;justify-content:center;min-width:130px;height:48px;padding:0 20px;border:1px solid #eaffb9;border-radius:5px;background:var(--city-accent);color:#102b2c;font-size:15px;font-weight:700;text-decoration:none;box-shadow:0 8px 24px #02090b70;transition:background .2s ease,transform .2s ease}
.city-showcase:hover .city-showcase-picture img{transform:scale(1.018)}
.city-showcase-play:hover{background:#e6ff9d;transform:translateY(-2px)}
.city-showcase-play:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:600px){
 .city-showcase{height:min(620px,78svh);min-height:500px}
 .city-showcase::after{background:linear-gradient(0deg,#04171df2 0%,#04171dbd 24%,transparent 58%)}
 .city-showcase-picture img{object-position:center 42%}
 .city-showcase-copy{left:20px;right:20px;bottom:96px;width:auto}
 .city-showcase h2{max-width:11ch;font-size:clamp(34px,10vw,46px);line-height:1}
 .city-showcase-copy p{margin-top:12px;font-size:12px}
 .city-showcase-play{left:20px;right:auto;bottom:28px;min-width:124px}
}
@media(max-width:340px){.city-showcase h2{font-size:32px}.city-showcase-copy,.city-showcase-play{left:16px}}
@media(prefers-reduced-motion:reduce){.city-showcase *{animation:none!important;transition:none!important}}