/* The interactive city. Page typography and sections live in home.css. */
.city-page { --city-sky: #bdcddd; }
.fair-world { position: relative; background: var(--city-sky); isolation: isolate; }
.city-scene { height: clamp(590px, 50vw, 820px); position: relative; overflow: hidden; }
#city-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.fair-markers { position: absolute; inset: 0; pointer-events: none; }
.fair-markers button { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 50%; background: #f8f4ede8; color: var(--place-color); border: 1px solid currentColor; box-shadow: 0 1px 3px #25214125; pointer-events: auto; will-change: transform; }
.fair-markers button::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.city-pin-number { font-size: 12px; font-variant-numeric: tabular-nums; }
.fair-markers button:hover, .fair-markers button.city-pin-active, .fair-markers button[aria-pressed=true] { background: var(--place-color); color: #fff; box-shadow: 0 0 0 5px #f8f4ed99, 0 0 0 6px var(--place-color); }
.fair-marker-out { visibility: hidden; }
.fair-exploring .fair-markers button[aria-pressed=false] { visibility: hidden; pointer-events: none; }
.fair-scene-note { position: absolute; left: var(--gutter); right: var(--gutter); top: 16px; display: flex; justify-content: flex-end; pointer-events: none; }
.city-scene-status > div { display: flex; align-items: center; }
.fair-scene-note button { min-height: 44px; padding: 8px 12px; pointer-events: auto; font-size: 14px; color: var(--text); background: #f8f4ede8; border: 1px solid #14132633; border-radius: 4px; }
.fair-scene-note button > span { margin-left: 8px; }
.city-page[data-light=evening] { --city-sky: #252f49; }
.city-page[data-light=evening] .fair-fallback { color: #f8f4ed; }
.city-page[data-light=evening] .fair-scene-note button { background: #252f49; color: #f8f4ed; border-color: #f8f4ed66; }
.fair-place-card { position: absolute; left: var(--gutter); bottom: 96px; width: 350px; padding: 28px; background: var(--surface); border: 1px solid var(--border); color: var(--text); z-index: 4; }
.fair-place-card > span { display: block; padding-right: 20px; font-size: 12px; color: var(--muted); }
.fair-place-card h2 { font-size: 22px; line-height: 1.3; margin: 20px 0 16px; }
.fair-place-card p { font-size: 14px; line-height: 1.6; color: var(--muted); }
.fair-place-card > .city-doc-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; font-size: 14px; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.city-close { position: absolute; right: 4px; top: 4px; width: 44px; height: 44px; padding: 0; font-size: 24px; color: var(--muted); }
.city-reset { position: absolute; right: var(--gutter); bottom: 22px; min-height: 44px; padding: 10px 14px; font-size: 14px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; z-index: 4; }
.fair-fallback { position: absolute; inset: 25%; font-size: 22px; line-height: 1.5; }
.fair-no-canvas .fair-markers { display: none; }

.city-map-guide { padding: 24px var(--gutter) 28px; border-top: 1px solid var(--border); }
.city-map-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.city-map-heading h2 { font-size: 16px; line-height: 1.5; letter-spacing: 0; font-weight: 500; }
.city-map-heading p { font-size: 14px; color: var(--muted); }
.city-map-index { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px 16px; }
.city-map-index button { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 9px 0; border-bottom: 1px solid var(--border); color: var(--muted); text-align: left; }
.city-index-number { display: grid; place-items: center; flex-shrink: 0; width: 25px; height: 25px; border: 1px solid var(--border); border-radius: 50%; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--place-color); }
.city-map-index b { font-size: 14px; font-weight: 400; line-height: 1.4; }
.city-map-index button:hover, .city-map-index button.city-index-active, .city-map-index button[aria-pressed=true] { border-color: var(--place-color); color: var(--text); }
.city-map-index button:hover .city-index-number, .city-map-index button.city-index-active .city-index-number, .city-map-index button[aria-pressed=true] .city-index-number { background: var(--place-color); border-color: var(--place-color); color: #fff; }

.city-brand-link { position: absolute; left: 5%; top: 75%; display: block; z-index: 3; transform: translate(-50%, -50%); border-radius: 50%; cursor: pointer; }
.city-brand-link::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
.city-brand-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.city-brand-chip { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #f7f3e9; color: var(--accent); border: 1px solid var(--accent); }
.city-brand-chip svg { width: 60%; height: 60%; }
.city-brand-link:hover .city-brand-chip, .city-brand-link:focus-visible .city-brand-chip { background: var(--accent); color: #fff; }
.fair-no-canvas .city-brand-link { top: auto; bottom: 28px; width: auto; height: auto; transform: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 12px; background: var(--accent); color: #fff; border-radius: 4px; font-size: 14px; }
.fair-no-canvas .city-brand-link::before { display: none; }
.fair-no-canvas .city-brand-text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
.fair-no-canvas .city-brand-chip { width: 18px; height: 18px; border: 0; background: #fff; }

@media (min-width: 1700px) { .city-scene { height: 820px; } }
@media (max-width: 1200px) { .city-map-index { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1050px) { .city-scene { height: 620px; } }
@media (max-width: 760px) {
  .city-scene { height: 330px; }
  .fair-exploring .city-scene { height: 370px; }
  .fair-markers button[aria-pressed=false] { visibility: hidden; pointer-events: none; }
  .city-map-guide { padding-block: 20px 22px; }
  .city-map-heading { display: block; margin-bottom: 10px; }
  .city-map-heading p { margin-top: 6px; }
  .city-map-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
  .city-map-index button { white-space: normal; }
  .fair-place-card { position: relative; left: auto; bottom: auto; width: auto; margin: 0 var(--gutter); padding: 24px; }
  .fair-exploring .fair-world { padding-bottom: 80px; }
  .city-reset { bottom: 18px; }
  .fair-fallback { inset: 25% 8%; font-size: 18px; }
}
@media (max-width: 365px) { .city-scene { height: 310px; } }