/* Cities board — layout language from onthegrid.city, Gurudada identity. */
:root {
  --cities-ink: #130377;
  --cities-paper: #ffffff;
  --cities-line: 2px;
  --cities-top: 4rem;
}
@media (max-width: 1000px) {
  :root { --cities-top: 2.75rem; }
}

.page-cities .menu-button-3 { filter: brightness(0) invert(1); }
.page-cities .menu-button-3.w--open { filter: none; }

html, body.page-cities {
  margin: 0;
  background: var(--cities-ink);
  color: var(--cities-paper);
  font-family: "DM Sans", "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.cities-top {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--cities-top);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 1rem;
  padding-right: 5.5rem;
  background: var(--cities-ink);
  color: var(--cities-paper);
  border-bottom: var(--cities-line) solid var(--cities-paper);
}
.cities-logo {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: inherit;
  text-decoration: none;
  flex: 0 0 auto;
}
.cities-logo img {
  width: 2.15rem;
  height: 2.15rem;
  filter: brightness(0) invert(1);
}
.cities-logo span {
  font-family: "Archivo Black", "Poppins", sans-serif;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .cities-logo span { display: none; }
}

.cities-search {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 100%;
}
.cities-search input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  outline: none;
}
.cities-search input::placeholder { color: rgba(255,255,255,.55); }

#homeIntro {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--cities-top) + 2rem) 4rem 4rem;
  background: var(--cities-ink);
  color: var(--cities-paper);
}
#homeIntro .intro_wrap { max-width: 50em; }
#homeIntro h1 {
  font-family: "Archivo Black", "Poppins", sans-serif;
  font-size: 5.3rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;
  margin: 0;
}
#homeIntro .subheading {
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 1rem auto 0;
  max-width: 38em;
  font-weight: 400;
}
#homeIntro .choose {
  display: inline-block;
  margin-top: 1.5rem;
  padding: .7rem 1.2rem;
  border: var(--cities-line) solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: background .3s, color .3s;
}
#homeIntro .choose:hover {
  background: var(--cities-paper);
  color: var(--cities-ink);
}
@media (max-width: 1000px) {
  #homeIntro { padding-left: 2.75rem; padding-right: 2.75rem; }
  #homeIntro h1 { font-size: 3.5rem; }
}
@media (max-width: 500px) {
  #homeIntro h1 { font-size: 2.5rem; }
  #homeIntro .subheading { font-size: 1rem; }
}

#cities.homepage-scroll-menu {
  overflow: hidden;
  position: relative;
  background: var(--cities-ink);
  color: var(--cities-paper);
  min-height: 100vh;
}
#cities .count {
  text-align: center;
  padding: .75rem 2rem;
  border-top: var(--cities-line) solid currentColor;
  border-bottom: var(--cities-line) solid currentColor;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.grid_container {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  margin-bottom: -2px;
  margin-right: -2px;
}
.grid_item {
  position: relative;
  display: flex;
  border-right: var(--cities-line) solid currentColor;
  border-bottom: var(--cities-line) solid currentColor;
  overflow: hidden;
  background: var(--cities-ink);
  color: var(--cities-paper);
  transition: background-color .3s;
}
.grid_item--full { width: 12.5%; }
@media only screen and (max-width: 2000px) { .grid_item--full { width: 14.2857%; } }
@media only screen and (max-width: 1800px) { .grid_item--full { width: 16.666%; } }
@media only screen and (max-width: 1600px) { .grid_item--full { width: 20%; } }
@media only screen and (max-width: 1400px) { .grid_item--full { width: 25%; } }
@media only screen and (max-width: 1100px) { .grid_item--full { width: 33.333%; } }
@media only screen and (max-width: 800px)  { .grid_item--full { width: 50%; } }

/* 淡入由 TweenMax autoAlpha 写 inline，这里只给初始态，不加 CSS transition */
.homepage-scroll-menu .grid_item { opacity: 0; }
.homepage-scroll-menu .grid_item.faded { opacity: 1; }
.grid_item.is-hidden { display: none; }

.tile__city {
  text-align: center;
  display: flex;
  flex-direction: column;
}
.tile__city__inner-wrap {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.grid_item-heading_wrap {
  display: block;
  width: 100%;
  padding-top: 2.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
}
.grid_item-heading {
  font-family: "Archivo Black", "Poppins", sans-serif;
  font-size: 2em;
  font-weight: 400;
  line-height: 1;
  margin: 0;
  transition: color .3s;
}
.grid_item-heading.long { font-size: 1.6em; }
@media (max-width: 500px) {
  .grid_item-heading { font-size: 1.5em; }
  .grid_item-heading.long { font-size: 1.2em; }
}
.grid_item-subheading { margin: 0; }
.title-breadcrumb {
  display: block;
  margin-top: .55rem;
  font-size: .75rem;
  letter-spacing: .04em;
  opacity: .85;
}

.landmark_wrap {
  margin: 0 auto;
  height: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile__city .landmark_wrap {
  position: relative;
  display: flex;
  align-self: flex-end;
  width: 100%;
  overflow: hidden;
  margin-top: 1rem;
}
.tile__city .landmark_wrap svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  margin-top: auto;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  fill: none;
  stroke: currentColor;
}
.landmark_wrap svg {
  width: auto;
  height: 100%;
  fill: none;
}
#citiesContainer .landmark_wrap svg,
#citiesContainer .landmark_wrap svg * {
  stroke-width: .75;
  vector-effect: non-scaling-stroke;
}
.tile__city .landmark_wrap svg path,
.tile__city .landmark_wrap svg circle,
.tile__city .landmark_wrap svg rect,
.tile__city .landmark_wrap svg polygon,
.tile__city .landmark_wrap svg polyline,
.tile__city .landmark_wrap svg line {
  transition: stroke .3s;
}

.grid_item:hover {
  background: var(--cities-paper);
  color: var(--cities-ink);
}

.empty-filter {
  display: none;
  width: 100%;
  padding: 4rem 1.5rem;
  text-align: center;
}
.empty-filter.show { display: block; }

@media (prefers-reduced-motion: reduce) {
  .homepage-scroll-menu .grid_item,
  .homepage-scroll-menu .grid_item.faded {
    opacity: 1;
  }
}