.journal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.journal-card {
  display: grid;
  gap: 16px;
  min-height: 100%;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
}

.journal-card-media,
.journal-detail-media {
  display: block;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(20, 20, 20, 0.04);
}

.journal-infographic-block {
  margin: 0;
  padding-top: 8px;
}

.journal-infographic-stack {
  display: grid;
  gap: 14px;
}

.journal-card-media {
  aspect-ratio: 1.3 / 1;
}

.journal-detail-media {
  margin-top: 18px;
  aspect-ratio: 1.7 / 1;
}

.journal-infographic-media {
  display: block;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #fff;
  aspect-ratio: 1.7 / 1;
}

.journal-card-media img,
.journal-detail-media img,
.journal-infographic-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.inquiry-form {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.inquiry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.inquiry-field {
  display: grid;
  gap: 8px;
}

.inquiry-field span {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.inquiry-field-message,
.inquiry-field-admin {
  grid-column: 1 / -1;
}

.inquiry-input,
.inquiry-textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.inquiry-input {
  min-height: 48px;
  padding: 0 16px;
}

.inquiry-textarea {
  min-height: 140px;
  padding: 14px 16px;
  resize: vertical;
}

.inquiry-turnstile {
  min-height: 66px;
}

.inquiry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.inquiry-actions[hidden],
.inquiry-form[data-submitted="true"] [data-inquiry-submit] {
  display: none;
}

.inquiry-feedback,
.admin-access-feedback {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.inquiry-feedback[data-state="success"] {
  color: #157347;
}

.inquiry-feedback[data-state="error"],
.admin-access-feedback.is-error {
  color: #b42318;
}

.admin-access-feedback.is-muted {
  color: var(--muted);
}

.inquiry-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.inquiry-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.inquiry-status-open {
  overflow: hidden;
}

.inquiry-status-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
}

.inquiry-status-modal[hidden] {
  display: none;
}

.inquiry-status-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.38);
  backdrop-filter: blur(4px);
}

.inquiry-status-card {
  position: relative;
  z-index: 1;
  width: min(360px, 100%);
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 28px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 26px 72px rgba(20, 20, 20, 0.24);
  animation: inquiryStatusPop 260ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.inquiry-status-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f36b1c;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}

.inquiry-status-modal[data-state="success"] .inquiry-status-icon {
  background: #157347;
}

.inquiry-status-modal[data-state="error"] .inquiry-status-icon {
  background: #b42318;
}

.inquiry-status-spinner {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  animation: inquiryStatusSpin 760ms linear infinite;
}

.inquiry-status-card h2 {
  margin: 0;
  font-size: 1.28rem;
  line-height: 1.2;
}

.inquiry-status-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.inquiry-status-close {
  margin-top: 4px;
  min-width: 104px;
}

@keyframes inquiryStatusPop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes inquiryStatusSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .inquiry-status-card,
  .inquiry-status-spinner {
    animation: none;
  }
}

.admin-access-card,
.admin-inquiry-card {
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
}

.admin-access-card {
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  margin-bottom: 22px;
}

.admin-access-copy,
.admin-access-form,
.admin-dashboard,
.admin-inquiry-list {
  display: grid;
  gap: 16px;
}

.admin-access-copy h2,
.admin-inquiry-head h2 {
  margin: 0;
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.admin-access-copy p,
.admin-inquiry-message,
.admin-inquiry-meta {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.admin-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.admin-inquiry-list {
  margin-top: 6px;
}

.admin-inquiry-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.admin-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  background: rgba(20, 20, 20, 0.03);
}

.admin-status-chip.is-new {
  color: var(--accent);
  border-color: rgba(243, 107, 28, 0.25);
  background: rgba(243, 107, 28, 0.08);
}

.admin-status-chip.is-read {
  color: #0f5c73;
  border-color: rgba(15, 92, 115, 0.18);
  background: rgba(15, 92, 115, 0.07);
}

.admin-status-chip.is-archived {
  color: var(--muted);
}

.admin-inquiry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 0.9rem;
}

.admin-inquiry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-action-button.is-active {
  opacity: 0.5;
}

@media (max-width: 760px) {
  .inquiry-grid,
  .admin-access-card,
  .admin-stat-strip {
    grid-template-columns: 1fr;
  }
}

.journal-card-top,
.journal-card-meta,
.journal-meta-row,
.journal-card-cities,
.journal-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.journal-card-top {
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.journal-card-meta span {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.journal-card-title,
.journal-section h2 {
  margin: 0;
  letter-spacing: -0.05em;
}

.journal-card-title {
  font-size: clamp(1.04rem, 1.28vw, 1.28rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.journal-card-copy,
.journal-section p,
.journal-closing,
.journal-summary {
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
}

.journal-summary {
  max-width: 52rem;
  font-size: clamp(1.04rem, 1.32vw, 1.18rem);
  color: var(--text);
}

.utility-chip-small {
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.78rem;
}

.journal-card-actions {
  display: flex;
  align-items: center;
}

.journal-article {
  display: grid;
  gap: 28px;
}

.journal-summary-block,
.journal-practical,
.journal-faq,
.journal-related,
.journal-link-block,
.journal-section,
.journal-footer {
  border-top: 1px solid var(--line);
}

.journal-summary-block {
  display: grid;
  gap: 18px;
  padding-top: 22px;
}

.journal-takeaways {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.journal-takeaways li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.68;
}

.journal-takeaways li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  transform: translateY(-50%);
}

.journal-body {
  display: grid;
  gap: 0;
}

.journal-section {
  display: grid;
  gap: 12px;
  padding: 22px 0;
}

.journal-practical {
  display: grid;
  gap: 18px;
  padding: 22px 0;
}

.journal-faq,
.journal-related,
.journal-link-block {
  display: grid;
  gap: 18px;
  padding: 22px 0;
}

.journal-practical-head {
  display: grid;
  gap: 8px;
}

.journal-faq-head,
.journal-related-head {
  display: grid;
  gap: 8px;
}

.journal-practical-head h2,
.journal-practical-card h3,
.journal-faq-item h3,
.journal-related-item strong,
.journal-link-item strong,
.journal-faq-head h2,
.journal-related-head h2 {
  margin: 0;
  letter-spacing: -0.04em;
}

.journal-practical-head h2 {
  font-size: clamp(1.26rem, 1.8vw, 1.72rem);
}

.journal-practical-head p,
.journal-practical-why,
.journal-practical-meta dd,
.journal-faq-head p,
.journal-related-head p,
.journal-faq-item p,
.journal-related-item span,
.journal-link-item span {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.journal-practical-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.journal-practical-card {
  display: grid;
  gap: 14px;
  padding: 18px 18px 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
}

.journal-practical-card h3 {
  font-size: clamp(1.08rem, 1.35vw, 1.22rem);
  line-height: 1.12;
}

.journal-faq-list,
.journal-related-list,
.journal-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.journal-faq-item,
.journal-related-item,
.journal-link-item {
  display: grid;
  gap: 10px;
  padding: 18px 18px 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
}

.journal-faq-item h3,
.journal-related-item strong,
.journal-link-item strong {
  font-size: clamp(1.02rem, 1.28vw, 1.18rem);
  line-height: 1.14;
}

.journal-related-item,
.journal-link-item {
  color: var(--text);
  text-decoration: none;
}

.journal-link-item:hover {
  border-color: rgba(255, 107, 53, 0.46);
  transform: translateY(-1px);
}

.journal-practical-meta {
  display: grid;
  gap: 12px;
  margin: 0;
}

.journal-practical-meta div {
  display: grid;
  gap: 4px;
}

.journal-practical-meta dt {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.journal-practical-meta dd {
  margin: 0;
}

.journal-section h2 {
  font-size: clamp(1.26rem, 1.8vw, 1.72rem);
}

.journal-section p {
  max-width: 48rem;
}

.journal-footer {
  display: grid;
  gap: 16px;
  padding-top: 18px;
}

.journal-footer-actions {
  align-items: center;
}

@media (max-width: 760px) {
  .journal-grid {
    grid-template-columns: 1fr;
  }

  .route-title-journal {
    max-width: 13ch;
  }

  .journal-card {
    padding: 20px;
  }

  .journal-card-media,
  .journal-detail-media,
  .journal-infographic-media {
    border-radius: 18px;
  }

  .journal-card-top,
  .journal-footer-actions {
    display: grid;
  }

  .journal-practical-grid {
    grid-template-columns: 1fr;
  }

  .journal-faq-list,
  .journal-related-list,
  .journal-link-grid {
    grid-template-columns: 1fr;
  }
}
.city-ranking-page{background:#f7f0e3;color:#141414;overflow:hidden}
.city-ranking-hero{min-height:calc(100vh - 74px);display:flex;align-items:center;padding:72px 0 58px;background:linear-gradient(135deg,#fffaf0 0%,#f5ead7 58%,#ead9be 100%)}
.city-ranking-hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);gap:44px;align-items:center}
.city-ranking-hero-copy{display:grid;gap:22px;align-content:center}
.city-ranking-title{margin:0;max-width:9ch;font-size:clamp(4.7rem,12vw,12.4rem);line-height:.78;letter-spacing:-.105em}
.city-ranking-intro{margin:0;max-width:42rem;color:#4f4a43;font-size:clamp(1.06rem,2vw,1.45rem);line-height:1.42}
.city-ranking-actions{display:flex;flex-wrap:wrap;gap:12px}
.city-ranking-note{max-width:48rem;margin:0;color:#686158;font-size:.92rem;line-height:1.55}
.city-ranking-hero-objects{position:relative;min-height:560px}
.city-ranking-hero-objects img{position:absolute;width:min(48vw,420px);height:auto;filter:drop-shadow(0 28px 24px rgba(48,34,18,.18));animation:rankingFloat 7s ease-in-out infinite}
.city-ranking-hero-objects img:nth-child(1){right:4%;bottom:2%;width:min(50vw,460px);z-index:3}
.city-ranking-hero-objects img:nth-child(2){left:0;top:6%;width:min(34vw,320px);z-index:2;animation-delay:-1.7s}
.city-ranking-hero-objects img:nth-child(3){right:0;top:0;width:min(31vw,300px);z-index:1;animation-delay:-3.2s}
@keyframes rankingFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}}
.city-ranking-context{padding:42px 0;background:#141414;color:#fff}
.city-ranking-context-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;align-items:end}
.city-ranking-context h2{margin:8px 0 0;max-width:11ch;font-size:clamp(2.2rem,5vw,5.5rem);line-height:.88;letter-spacing:-.085em}
.city-ranking-context p{margin:0;color:rgba(255,255,255,.72);font-size:1.05rem;line-height:1.7}
.city-ranking-scroll{background:#f7f0e3}
.city-ranking-step{min-height:96vh;display:flex;align-items:center;padding:64px 0;border-top:1px solid rgba(20,20,20,.1);background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0))}
.city-ranking-step-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.72fr);gap:42px;align-items:center}
.city-ranking-object-wrap{min-height:520px;display:grid;place-items:center}
.city-ranking-object{width:min(74vw,640px);max-height:70vh;object-fit:contain;transform:scale(var(--object-scale));transform-origin:center bottom;filter:drop-shadow(0 38px 32px rgba(45,31,18,.18))}
.city-ranking-card{display:grid;gap:14px;align-content:center;padding:32px;border:1px solid rgba(20,20,20,.11);border-radius:30px;background:rgba(255,255,255,.66);backdrop-filter:blur(18px);box-shadow:0 22px 60px rgba(48,34,18,.08)}
.city-ranking-rank{margin:0;color:var(--rank-color);font-size:clamp(3.2rem,8vw,7.4rem);line-height:.78;font-weight:800;letter-spacing:-.08em}
.city-ranking-card h2{margin:0;font-size:clamp(2rem,4.4vw,4.9rem);line-height:.9;letter-spacing:-.085em}
.city-ranking-card p{margin:0;color:#5d564d;line-height:1.62}
.city-ranking-visitors{font-weight:800;color:#141414!important}
.city-ranking-meter{height:12px;overflow:hidden;border-radius:999px;background:rgba(20,20,20,.09)}
.city-ranking-meter span{display:block;width:var(--bar-width);height:100%;border-radius:inherit;background:var(--rank-color)}
.city-ranking-source{padding:76px 0 88px;background:#fff}
.city-ranking-source h2{margin:8px 0 14px;font-size:clamp(2rem,4vw,4.1rem);line-height:.95;letter-spacing:-.075em}
.city-ranking-source p{max-width:58rem;color:#5f636d;line-height:1.7}
.city-rank-menu-page{min-height:100vh;background:#fffaf7;color:#111;overflow:hidden}
.city-rank-menu-hero{min-height:calc(78vh - 74px);display:flex;align-items:center;padding:76px 0 46px;background:linear-gradient(135deg,#fff 0%,#fffaf7 54%,#ffeede 100%)}
.city-rank-menu-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(340px,1.1fr);gap:44px;align-items:center}
.city-rank-menu-copy{display:grid;gap:18px;align-content:center;max-width:680px}
.city-rank-menu-copy h1{margin:0;font-family:"Bahnschrift","Aptos Display","Franklin Gothic Heavy",sans-serif;font-size:clamp(3.5rem,8vw,9rem);font-weight:900;line-height:.84;letter-spacing:-.07em;text-transform:uppercase}
.city-rank-menu-copy p:not(.section-kicker){margin:0;max-width:42rem;color:#545862;font-size:clamp(1rem,1.6vw,1.3rem);line-height:1.55}
.city-rank-menu-art{position:relative;min-height:480px}
.city-rank-menu-object{position:absolute;width:min(42vw,430px);height:auto;object-fit:contain;filter:drop-shadow(0 30px 24px rgba(45,31,18,.18));animation:cityRankMenuFloat 7s ease-in-out infinite}
.city-rank-menu-object-1{right:16%;bottom:0;z-index:3;width:min(48vw,520px)}
.city-rank-menu-object-2{left:2%;top:10%;z-index:2;width:min(28vw,300px);animation-delay:-1.8s}
.city-rank-menu-object-3{right:0;top:0;z-index:1;width:min(31vw,340px);animation-delay:-3.1s}
@keyframes cityRankMenuFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1deg)}}
.city-rank-menu-list{padding:46px 0 82px;background:#111;color:#fff}
.city-rank-menu-list-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.city-rank-menu-card{display:grid;grid-template-columns:minmax(180px,.42fr) minmax(0,.58fr);gap:24px;align-items:center;min-height:300px;padding:24px;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.03));color:#fff;transition:transform 180ms ease,border-color 180ms ease,background 180ms ease}
.city-rank-menu-card:hover{transform:translateY(-4px);border-color:rgba(243,107,28,.6);background:linear-gradient(145deg,rgba(243,107,28,.18),rgba(255,255,255,.05))}
.city-rank-menu-card-media{display:grid;place-items:center;min-height:240px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02))}
.city-rank-menu-card-media img{width:min(100%,280px);height:auto;max-height:238px;object-fit:contain;filter:drop-shadow(0 24px 18px rgba(0,0,0,.28))}
.city-rank-menu-card-copy{display:grid;gap:12px}
.city-rank-menu-card-copy span{color:#ffb083;font-size:.76rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.city-rank-menu-card-copy h2{margin:0;font-size:clamp(1.8rem,3.2vw,3.5rem);line-height:.92;letter-spacing:-.06em}
.city-rank-menu-card-copy p{margin:0;color:rgba(255,255,255,.72);line-height:1.55}
.city-rank-menu-card-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.city-rank-menu-card-meta strong{display:inline-flex;align-items:center;min-height:34px;padding:0 11px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.08);font-size:.82rem}
@media (max-width:980px){
  .city-ranking-hero-grid,.city-ranking-context-grid,.city-ranking-step-grid{grid-template-columns:1fr}
  .city-rank-menu-grid,.city-rank-menu-list-grid{grid-template-columns:1fr}
  .city-rank-menu-art{min-height:360px}
  .city-rank-menu-card{grid-template-columns:1fr}
  .city-ranking-title{font-size:clamp(4.1rem,18vw,8rem)}
  .city-ranking-hero-objects{min-height:420px}
  .city-ranking-object-wrap{min-height:380px}
  .city-ranking-step{min-height:auto;padding:54px 0}
}
@media (max-width:640px){
  .city-rank-menu-hero{min-height:auto;padding:42px 0 30px}
  .city-rank-menu-copy h1{font-size:clamp(3rem,17vw,5.4rem)}
  .city-rank-menu-art{min-height:290px}
  .city-rank-menu-object-1{right:2%;width:74vw}
  .city-rank-menu-object-2{left:-8%;width:46vw}
  .city-rank-menu-object-3{right:-10%;width:48vw}
  .city-rank-menu-list{padding:28px 0 58px}
  .city-rank-menu-card{min-height:0;padding:18px;border-radius:18px}
  .city-rank-menu-card-media{min-height:220px}
  .city-ranking-hero{padding:42px 0}
  .city-ranking-hero-objects{min-height:310px}
  .city-ranking-hero-objects img:nth-child(1){width:74vw}
  .city-ranking-hero-objects img:nth-child(2){width:48vw}
  .city-ranking-hero-objects img:nth-child(3){width:42vw}
  .city-ranking-card{padding:24px;border-radius:24px}
  .city-ranking-object-wrap{min-height:300px}
  .city-ranking-object{width:92vw}
}

.city-life-page{--atlas-bg:#fffaf7;--atlas-ink:#101010;--atlas-orange:#f36b1c;--atlas-orange-soft:#fff0e7;--atlas-line:rgba(20,20,20,.11);--atlas-muted:#676b74;min-height:100vh;background:var(--atlas-bg);color:var(--atlas-ink);overflow:hidden}
.site-shell:has(.city-life-page) .rhythm-assistant{display:none}
.city-life-cover,.city-life-stage{min-height:calc(100vh - 74px);position:relative;background:linear-gradient(135deg,#fff 0%,#fffaf7 55%,#fff1e7 100%);overflow:hidden}
.city-life-cover:before,.city-life-stage:before{content:"";position:absolute;inset:-20%;background:repeating-linear-gradient(115deg,rgba(243,107,28,.08) 0 1px,transparent 1px 42px);opacity:.8;pointer-events:none}
.city-life-cover{display:grid;place-items:center;padding:34px}
.city-life-cover-frame{position:relative;width:min(1220px,calc(100vw - 48px));min-height:min(690px,calc(100vh - 142px));display:grid;grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr);align-items:stretch;overflow:hidden;border:1px solid var(--atlas-line);border-radius:38px;background:rgba(255,255,255,.9);box-shadow:0 32px 90px rgba(20,20,20,.09)}
.city-life-cover-frame:before{content:"";position:absolute;left:0;top:0;bottom:0;width:34%;background:#111;clip-path:polygon(0 0,82% 0,100% 100%,0 100%);z-index:0}
.city-life-logo{position:absolute;top:22px;left:24px;z-index:4;margin:0;padding:9px 13px;border-radius:999px;background:#111;color:#fff;font-family:"Bahnschrift","Aptos Display","Franklin Gothic Medium",sans-serif;font-size:.78rem;font-weight:900;letter-spacing:.02em}
.city-life-cover-copy{position:relative;z-index:3;grid-column:2;display:grid;align-content:center;justify-items:start;gap:18px;max-width:660px;padding:60px 70px 60px 20px;text-align:left}
.city-life-cover-copy h1{margin:0;font-family:"Bahnschrift","Aptos Display","Franklin Gothic Heavy",sans-serif;font-size:clamp(3rem,7.2vw,7.8rem);font-weight:900;line-height:.78;letter-spacing:-.075em;text-transform:uppercase}
.city-life-cover-copy p{margin:0;max-width:38rem;color:var(--atlas-muted);font-size:1.02rem;line-height:1.62}
.city-life-cover-copy .section-kicker{display:inline-flex;width:max-content;padding:8px 11px;border-radius:999px;background:var(--atlas-orange-soft);color:#be4b08;font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.city-life-enter{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 22px;border:1px solid #111;border-radius:999px;background:#111;color:#fff;font-weight:900;box-shadow:8px 8px 0 var(--atlas-orange)}
.city-life-enter span{color:var(--atlas-orange)}
.city-life-cover-art{position:absolute;inset:0;z-index:2;pointer-events:none}
.city-life-cover-art:after{display:none}
.city-life-cover-art img{position:absolute;z-index:1;object-fit:contain;filter:drop-shadow(0 28px 20px rgba(45,31,18,.17))}
.city-life-cover-object-1{left:-5%;bottom:-3%;width:min(38vw,430px)}
.city-life-cover-object-2{left:16%;top:10%;width:min(22vw,250px)}
.city-life-cover-object-3{right:1%;bottom:2%;width:min(29vw,360px)}
.city-life-cover-object-4{right:19%;top:5%;width:min(24vw,300px)}
.city-life-page-new-york-most-visited-attractions .city-life-cover-object-4{right:4%;top:7%;width:min(19vw,230px)}
.city-life-page-new-york-most-visited-attractions .city-life-cover-object-3{right:0;bottom:2%;width:min(27vw,340px)}
.city-life-page-london-most-visited-attractions .city-life-cover-object-4{right:3%;top:18%;width:min(17vw,210px)}
.city-life-page-hong-kong-overnight-visitor-places .city-life-cover-object-4{right:3%;top:18%;width:min(17vw,220px)}
.city-life-page-hong-kong-overnight-visitor-places .city-life-cover-object-3{right:2%;bottom:4%;width:min(27vw,340px)}
.city-life-page-barcelona-places-of-interest .city-life-cover-object-4{right:2%;top:26%;width:min(14vw,180px)}
.city-life-page-barcelona-places-of-interest .city-life-cover-object-3{right:5%;bottom:4%;width:min(24vw,310px)}
.city-life-page-milan-lombardy-most-visited-museums .city-life-cover-object-4{right:3%;top:18%;width:min(15vw,190px)}
.city-life-page-milan-lombardy-most-visited-museums .city-life-cover-object-3{right:5%;bottom:6%;width:min(19vw,250px);opacity:.32}
.city-life-page-lisbon-mmp-museums-monuments .city-life-cover-object-4{right:5%;top:18%;width:min(15vw,190px);opacity:.28}
.city-life-page-lisbon-mmp-museums-monuments .city-life-cover-object-3{right:3%;bottom:2%;width:min(21vw,270px);opacity:.42}
.city-life-page-singapore-selected-places-interest-visits .city-life-cover-object-4{right:4%;top:18%;width:min(15vw,190px);opacity:.3}
.city-life-page-singapore-selected-places-interest-visits .city-life-cover-object-3{right:3%;bottom:3%;width:min(20vw,260px);opacity:.42}
.city-life-page-mexico-city-most-visited-museums .city-life-cover-object-4{right:4%;top:18%;width:min(15vw,190px);opacity:.3}
.city-life-page-mexico-city-most-visited-museums .city-life-cover-object-3{right:4%;bottom:5%;width:min(20vw,260px);opacity:.42}
.city-life-page-dubai-visitor-experiences-2024 .city-life-cover-object-4{right:3%;top:18%;width:min(14vw,180px);opacity:.28}
.city-life-page-dubai-visitor-experiences-2024 .city-life-cover-object-3{right:4%;bottom:3%;width:min(21vw,270px);opacity:.42}
.city-life-page-kyoto-foreign-visitor-places-2024 .city-life-cover-object-4{right:3%;top:18%;width:min(14vw,180px);opacity:.28}
.city-life-page-kyoto-foreign-visitor-places-2024 .city-life-cover-object-3{right:4%;bottom:3%;width:min(21vw,270px);opacity:.42}
.city-life-page-copenhagen-most-visited-attractions-2023 .city-life-cover-object-4{right:3%;top:18%;width:min(14vw,180px);opacity:.28}
.city-life-page-copenhagen-most-visited-attractions-2023 .city-life-cover-object-3{right:4%;bottom:3%;width:min(21vw,270px);opacity:.42}
.city-life-page-istanbul-most-visited-heritage-attractions-2024 .city-life-cover-object-4{right:3%;top:18%;width:min(14vw,180px);opacity:.28}
.city-life-page-istanbul-most-visited-heritage-attractions-2024 .city-life-cover-object-3{right:4%;bottom:3%;width:min(21vw,270px);opacity:.42}
.city-life-page-madrid-most-visited-museums-2024 .city-life-cover-object-4{right:3%;top:18%;width:min(14vw,180px);opacity:.28}
.city-life-page-madrid-most-visited-museums-2024 .city-life-cover-object-3{right:4%;bottom:3%;width:min(21vw,270px);opacity:.42}
@media (prefers-reduced-motion:no-preference){
  .city-life-cover-frame{animation:cityAtlasCoverIn 760ms cubic-bezier(.16,.84,.18,1) both}
  .city-life-cover-copy>*{animation:cityAtlasIntroUp 720ms cubic-bezier(.16,.84,.18,1) both}
  .city-life-cover-copy>*:nth-child(2){animation-delay:70ms}
  .city-life-cover-copy>*:nth-child(3){animation-delay:140ms}
  .city-life-cover-copy>*:nth-child(4){animation-delay:210ms}
  .city-life-cover-art img{animation:cityAtlasObjectDrift 7s ease-in-out infinite}
  .city-life-cover-object-2{animation-delay:-1.4s}
  .city-life-cover-object-3{animation-delay:-2.8s}
  .city-life-cover-object-4{animation-delay:-4.1s}
}
.city-life-stage{display:grid;grid-template-rows:auto 1fr auto;min-height:100vh;outline:0;scroll-margin-top:82px}
.city-life-paper-lines{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,20,20,.07) 1px,transparent 1px),linear-gradient(180deg,rgba(243,107,28,.08),rgba(255,255,255,0) 36%,rgba(20,20,20,.04));background-size:clamp(92px,14.285vw,180px) 100%,auto;pointer-events:none}
.city-life-stage-head{position:relative;z-index:4;width:min(1280px,calc(100vw - 56px));margin:0 auto;display:grid;justify-items:start;gap:8px;padding:30px 0 0;text-align:left}
.city-life-stage-head p{margin:0;max-width:48rem;color:var(--atlas-muted);line-height:1.5}
.city-life-place{display:inline-flex;padding:7px 10px;border-radius:999px;background:#111;color:#fff!important;font-size:.74rem;font-weight:900;text-transform:uppercase;letter-spacing:.12em}
.city-life-stage-head h2{margin:0;font-family:"Bahnschrift","Aptos Display","Franklin Gothic Heavy",sans-serif;font-size:clamp(2.2rem,5vw,5.8rem);font-weight:900;line-height:.84;letter-spacing:-.06em;text-transform:uppercase}
.city-life-world{position:relative;height:clamp(330px,38vh,460px);overflow:hidden}
.city-life-object{position:absolute;left:50%;bottom:9%;margin:0;display:grid;justify-items:center;gap:10px;opacity:0;pointer-events:none;transition:transform 760ms cubic-bezier(.52,0,.12,1),opacity 320ms ease,filter 520ms ease;will-change:transform,opacity}
.city-life-object:before{content:"";position:absolute;z-index:-1;left:50%;bottom:8%;width:min(42vw,520px);height:12px;background:linear-gradient(90deg,transparent,rgba(243,107,28,.22),transparent);filter:blur(14px);transform:translateX(-50%) scale(.82);opacity:0;transition:opacity 320ms ease,transform 760ms cubic-bezier(.52,0,.12,1)}
.city-life-object img{width:min(62vw,700px);max-height:56vh;object-fit:contain;transform:scale(var(--life-scale));transform-origin:center bottom;filter:drop-shadow(0 34px 24px rgba(34,25,16,.23))}
.city-life-object figcaption{padding:4px 12px;border:1px solid rgba(20,20,20,.13);border-radius:999px;background:#fff;color:var(--rank-color);font-family:"Bahnschrift","Aptos Display","Franklin Gothic Medium",sans-serif;font-weight:900;font-size:clamp(1.2rem,3.6vw,3.2rem);line-height:1;box-shadow:0 12px 26px rgba(20,20,20,.08)}
.city-life-object.is-active{opacity:1;transform:translateX(-50%) translateY(0) scale(1);z-index:5;pointer-events:auto}
.city-life-object.is-active:before{opacity:.92;transform:translateX(-50%) scale(1)}
.city-life-object.is-prev{opacity:.48;transform:translateX(-158%) translateY(38px) scale(.62);z-index:3;filter:saturate(.75)}
.city-life-object.is-next{opacity:.62;transform:translateX(58%) translateY(38px) scale(.62);z-index:3;filter:saturate(.82)}
.city-life-object.is-far-prev{opacity:.18;transform:translateX(-224%) translateY(80px) scale(.36);z-index:2;filter:saturate(.55)}
.city-life-object.is-far-next{opacity:.24;transform:translateX(124%) translateY(80px) scale(.36);z-index:2;filter:saturate(.58)}
.city-life-object.is-hidden-left{opacity:0;transform:translateX(-300%) translateY(110px) scale(.2)}
.city-life-object.is-hidden-right{opacity:0;transform:translateX(210%) translateY(110px) scale(.2)}
.city-life-stage[data-ranking-motion="true"] .city-life-object.is-active:before{animation:cityAtlasPulse 760ms cubic-bezier(.52,0,.12,1)}
.city-life-scale{position:absolute;left:50%;bottom:12%;height:230px;border-left:2px solid rgba(20,20,20,.18);color:#5f636d;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;transform:translateX(-420px);z-index:1}
.city-life-scale span{position:absolute;left:-9px;top:0;width:18px;border-top:2px solid rgba(20,20,20,.18)}
.city-life-scale:after{content:"";position:absolute;left:-9px;bottom:0;width:18px;border-top:2px solid rgba(20,20,20,.18)}
.city-life-scale em{position:absolute;left:12px;top:50%;white-space:nowrap;transform:rotate(-90deg) translateX(-50%);transform-origin:left top;font-style:normal;font-weight:900}
.city-life-bottom{position:relative;z-index:6;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:end;padding:0 28px 96px}
.city-life-arrow{position:relative;z-index:8;width:58px;height:58px;border:1px solid #111;border-radius:999px;background:#fff;color:#111;font-size:1.35rem;font-weight:900;box-shadow:7px 7px 0 rgba(243,107,28,.9);cursor:pointer}
.city-life-arrow:disabled{opacity:.24;cursor:not-allowed;box-shadow:none}
.city-life-facts{position:relative;min-height:152px;justify-self:center;width:min(590px,100%);border:1px solid var(--atlas-line);border-radius:28px;background:rgba(255,255,255,.86);box-shadow:0 20px 50px rgba(20,20,20,.07);backdrop-filter:blur(10px)}
.city-life-fact{position:absolute;inset:0;display:grid;gap:4px;place-items:center;text-align:center;opacity:0;transform:translateY(12px) scale(.98);transition:opacity 260ms ease,transform 520ms cubic-bezier(.52,0,.12,1);padding:16px}
.city-life-fact.is-active{opacity:1;transform:translateY(0) scale(1)}
.city-life-fact p{margin:0;color:var(--atlas-orange);font-size:1.02rem;font-weight:900}
.city-life-fact h3{margin:0;font-family:"Bahnschrift","Aptos Display","Franklin Gothic Heavy",sans-serif;font-size:clamp(1.7rem,3.4vw,3rem);font-weight:900;line-height:.92;letter-spacing:-.04em;text-transform:uppercase}
.city-life-fact strong{font-size:1rem}
.city-life-source{position:absolute;right:104px;bottom:28px;max-width:360px;margin:0;color:#676b74;font-size:.76rem;line-height:1.35;text-align:right;z-index:4;pointer-events:none}
.city-life-source a{text-decoration:underline;pointer-events:auto}
@keyframes cityAtlasPulse{
  0%{opacity:.14;transform:translateX(-50%) scale(.72)}
  58%{opacity:1;transform:translateX(-50%) scale(1.12)}
  100%{opacity:.92;transform:translateX(-50%) scale(1)}
}
@media (max-width:860px){
  .city-life-cover{padding:18px}
  .city-life-cover-frame{width:calc(100vw - 28px);min-height:calc(100vh - 116px);grid-template-columns:1fr;border-radius:28px}
  .city-life-cover-frame:before{width:100%;height:35%;clip-path:polygon(0 0,100% 0,100% 68%,0 100%)}
  .city-life-cover-copy{grid-column:1;align-content:end;padding:130px 24px 34px}
  .city-life-cover-copy h1{font-size:clamp(2.7rem,15vw,5rem)}
  .city-life-cover-copy p{font-size:.96rem}
  .city-life-cover-object-1{width:68vw}
  .city-life-cover-object-2{left:auto;right:5%;top:8%;width:36vw}
  .city-life-cover-object-3{right:-14%;bottom:4%;width:48vw}
  .city-life-cover-object-4{display:none}
  .city-life-page-singapore-selected-places-interest-visits .city-life-cover-object-1{left:9%;bottom:-10%;width:60vw}
  .city-life-page-singapore-selected-places-interest-visits .city-life-cover-object-3{right:-18%;bottom:7%;width:42vw}
  .city-life-page-mexico-city-most-visited-museums .city-life-cover-object-1{left:8%;bottom:-8%;width:62vw}
  .city-life-page-mexico-city-most-visited-museums .city-life-cover-object-3{right:-18%;bottom:7%;width:42vw}
  .city-life-page-kyoto-foreign-visitor-places-2024 .city-life-cover-object-1{left:8%;bottom:-8%;width:62vw}
  .city-life-page-kyoto-foreign-visitor-places-2024 .city-life-cover-object-3{right:-18%;bottom:7%;width:42vw}
  .city-life-page-copenhagen-most-visited-attractions-2023 .city-life-cover-object-1{left:8%;bottom:-8%;width:62vw}
  .city-life-page-copenhagen-most-visited-attractions-2023 .city-life-cover-object-3{right:-18%;bottom:7%;width:42vw}
  .city-life-page-istanbul-most-visited-heritage-attractions-2024 .city-life-cover-object-1{left:8%;bottom:-8%;width:62vw}
  .city-life-page-istanbul-most-visited-heritage-attractions-2024 .city-life-cover-object-3{right:-18%;bottom:7%;width:42vw}
  .city-life-page-madrid-most-visited-museums-2024 .city-life-cover-object-1{left:8%;bottom:-8%;width:62vw}
  .city-life-page-madrid-most-visited-museums-2024 .city-life-cover-object-3{right:-18%;bottom:7%;width:42vw}
  .city-life-stage-head{width:calc(100vw - 36px);padding:24px 0 0}
  .city-life-world{min-height:470px}
  .city-life-object img{width:min(88vw,560px);max-height:48vh}
  .city-life-object.is-prev{transform:translateX(-154%) translateY(42px) scale(.5)}
  .city-life-object.is-next{transform:translateX(54%) translateY(42px) scale(.5)}
  .city-life-object.is-far-prev,.city-life-object.is-far-next{opacity:0}
  .city-life-scale{display:none}
  .city-life-bottom{padding:0 18px 72px;gap:10px}
  .city-life-arrow{width:50px;height:50px;box-shadow:5px 5px 0 rgba(243,107,28,.9)}
  .city-life-facts{min-height:138px;border-radius:22px}
  .city-life-source{position:static;grid-column:1/-1;max-width:none;text-align:center;padding:0 18px 18px}
}

/* Atlas stage v2: keep the page ownable and give the objects almost all of the viewport. */
.city-life-stage{display:block;position:relative;height:calc(100vh - 74px);min-height:720px;overflow:hidden;scroll-margin-top:82px}
.city-life-paper-lines{overflow:hidden;background:linear-gradient(90deg,rgba(20,20,20,.08) 1px,transparent 1px),linear-gradient(112deg,rgba(243,107,28,.08) 0 1px,transparent 1px 46px),linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,0) 38%,rgba(20,20,20,.035));background-size:clamp(92px,14.285vw,180px) 100%,auto,auto;background-position:calc(var(--atlas-pan,0) * -22px) 0,0 0,0 0}
.city-life-paper-lines:before{content:"";position:absolute;top:-14%;bottom:-14%;left:50%;width:3px;background:linear-gradient(180deg,transparent,rgba(243,107,28,.78) 22%,rgba(20,20,20,.38) 54%,transparent 82%);opacity:.58;transform:translateX(calc(-50% + (var(--atlas-pan,0) * -18px)));pointer-events:none}
.city-life-paper-lines:after{content:"";position:absolute;left:0;right:0;bottom:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(20,20,20,.24),transparent);opacity:.8}
.city-life-stage-wash{position:absolute;inset:-18%;z-index:1;background:linear-gradient(105deg,transparent 4%,color-mix(in srgb,var(--active-rank-color,#f36b1c) 16%,transparent) 48%,transparent 82%),linear-gradient(90deg,rgba(255,255,255,.62),rgba(20,20,20,.04));filter:blur(24px);opacity:.72;pointer-events:none;transition:background 280ms ease}
.city-life-stage-head{position:absolute;left:clamp(22px,5.6vw,80px);top:24px;z-index:8;width:auto;max-width:min(520px,calc(100vw - 44px));margin:0;padding:0;gap:4px}
.city-life-place{padding:6px 10px;font-size:.68rem;letter-spacing:.1em}
.city-life-stage-head h2{font-size:clamp(1.25rem,2.1vw,2.2rem);line-height:.9;letter-spacing:-.045em}
.city-life-stage-head p:not(.city-life-place){display:none}
.city-life-stage[data-ranking-swap="true"] .city-life-stage-head{animation:cityAtlasLabelSwap 280ms cubic-bezier(.18,.92,.18,1)}
.city-life-world{position:absolute;inset:62px 0 78px;height:auto;overflow:visible}
.city-life-object{bottom:4%;width:min(78vw,1040px);gap:8px;transition:transform 860ms cubic-bezier(.78,0,.06,1.02),opacity 220ms ease,filter 520ms ease}
.city-life-object:before{width:min(54vw,760px);height:min(16vw,160px);transition:opacity 180ms ease,transform 860ms cubic-bezier(.78,0,.06,1.02)}
.city-life-object img{width:100%;max-width:none;max-height:76vh}
.city-life-object figcaption{padding:4px 12px;font-size:clamp(1rem,3vw,2.5rem)}
.city-life-object.is-active{transform:translateX(-50%) translateY(0) scale(1.08);z-index:6}
.city-life-object.is-prev{opacity:1;transform:translateX(-126%) translateY(56px) scale(.34);filter:none}
.city-life-object.is-next{opacity:1;transform:translateX(26%) translateY(56px) scale(.34);filter:none}
.city-life-object.is-far-prev{opacity:0;transform:translateX(-196%) translateY(92px) scale(.12)}
.city-life-object.is-far-next{opacity:0;transform:translateX(96%) translateY(92px) scale(.12)}
.city-life-object.is-hidden-left{opacity:0;transform:translateX(-330%) translateY(120px) scale(.06)}
.city-life-object.is-hidden-right{opacity:0;transform:translateX(240%) translateY(120px) scale(.06)}
.city-life-stage[data-ranking-motion="true"] .city-life-object.is-active{animation:cityAtlasSnap 860ms cubic-bezier(.78,0,.06,1.02)}
.city-life-stage[data-ranking-enhanced="true"] .city-life-object{transition:none}
.city-life-stage[data-ranking-enhanced="true"][data-ranking-motion="true"] .city-life-object.is-active{animation:none}
.city-life-stage[data-ranking-enhanced="true"] .city-life-object{top:auto;bottom:9%;transform-origin:center bottom;backface-visibility:hidden}
.city-life-stage[data-ranking-enhanced="true"] .city-life-object img{transform-origin:center bottom;filter:drop-shadow(0 34px 24px rgba(34,25,16,.23));backface-visibility:hidden}
.city-life-stage[data-ranking-enhanced="true"] .city-life-object figcaption.city-life-caption{position:absolute;left:50%;top:calc(100% + 11px);display:grid;gap:3px;width:min(360px,72vw);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#111;font-family:"Bahnschrift","Aptos Display","Franklin Gothic Medium",sans-serif;font-size:.69rem;font-weight:800;line-height:1.25;letter-spacing:.01em;text-align:center;opacity:0;pointer-events:none;transform:translateX(-50%) scale(var(--caption-scale,1));transform-origin:center top;transition:opacity 180ms ease}
.city-life-stage[data-ranking-enhanced="true"] .city-life-object.is-active figcaption.city-life-caption{opacity:.82;pointer-events:auto}
.city-life-stage[data-ranking-swap="true"] .city-life-object.is-active figcaption.city-life-caption{animation:cityAtlasCaptionUp 280ms ease-out both}
.city-life-caption-main{display:block;text-transform:uppercase}
.city-life-caption-links{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;color:#5f636d;font-size:.64rem;font-weight:800;text-transform:none}
.city-life-caption-links a{color:#111;text-decoration:underline;text-decoration-color:rgba(243,107,28,.55);text-underline-offset:3px}
.city-life-stage[data-ranking-enhanced="true"] .city-life-fact{transition:none}
.city-life-stage[data-ranking-enhanced="true"] .city-life-paper-lines{transform:translate3d(calc(var(--atlas-pan,0) * -18px),0,0) scale(1.03);transition:none}
.city-life-stage[data-ranking-enhanced="true"] .city-life-bottom{display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}
.city-life-stage[data-ranking-enhanced="true"] .city-life-arrow{pointer-events:auto}
.city-life-stage[data-ranking-enhanced="true"] .city-life-facts{display:none}
.city-life-scale{display:none}
.city-life-bottom{position:absolute;left:0;right:0;bottom:24px;z-index:9;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:0 28px}
.city-life-arrow{width:54px;height:54px;background:#fff}
.city-life-facts{min-height:58px;width:min(560px,calc(100vw - 180px));align-self:center;border-radius:999px;background:rgba(255,255,255,.9)}
.city-life-fact{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 18px;transform:translateY(8px) scale(.96)}
.city-life-fact p{font-size:.82rem}
.city-life-fact h3{font-size:clamp(1rem,1.8vw,1.38rem);line-height:1;letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28ch}
.city-life-fact strong{font-size:.82rem;white-space:nowrap}
.city-life-source{right:24px;bottom:6px;max-width:none;font-size:.68rem;line-height:1;opacity:.55;white-space:nowrap}
.city-life-rank-rail{position:absolute;left:clamp(22px,5.6vw,80px);bottom:82px;z-index:11;display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid rgba(20,20,20,.12);border-radius:999px;background:rgba(255,255,255,.78);box-shadow:0 14px 34px rgba(20,20,20,.08);backdrop-filter:blur(12px)}
.city-life-rank-rail:before{content:"";position:absolute;left:15px;right:15px;top:50%;height:1px;background:rgba(20,20,20,.18);transform:translateY(-50%);pointer-events:none}
.city-life-rank-dot{position:relative;z-index:1;width:9px;height:9px;padding:0;border:1px solid #111;border-radius:999px;background:#fff;color:#fff;cursor:pointer;transition:width 260ms cubic-bezier(.18,.92,.18,1),height 260ms cubic-bezier(.18,.92,.18,1),background 180ms ease,box-shadow 180ms ease,transform 180ms ease}
.city-life-rank-dot span{position:absolute;inset:0;display:grid;place-items:center;font-size:.58rem;font-weight:900;line-height:1;opacity:0;transform:translateY(1px)}
.city-life-rank-dot.is-active{width:36px;height:20px;background:#111;box-shadow:4px 4px 0 var(--active-rank-color,#f36b1c);transform:translateY(-1px)}
.city-life-rank-dot.is-active span{opacity:1}
.city-life-rank-dot:focus-visible{outline:3px solid rgba(243,107,28,.42);outline-offset:4px}
@keyframes cityAtlasCoverIn{0%{opacity:0;transform:translateY(18px) scale(.985)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cityAtlasIntroUp{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cityAtlasObjectDrift{0%,100%{transform:translateY(0) rotate(-.8deg)}50%{transform:translateY(-14px) rotate(.8deg)}}
@keyframes cityAtlasLabelSwap{0%{opacity:.36;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cityAtlasCaptionUp{0%{opacity:0;transform:translateX(-50%) translateY(8px) scale(var(--caption-scale,1))}100%{opacity:.82;transform:translateX(-50%) translateY(0) scale(var(--caption-scale,1))}}
@keyframes cityAtlasSnap{
  0%{transform:translateX(-50%) translateY(56px) scale(.62)}
  28%{transform:translateX(-50%) translateY(48px) scale(.68)}
  78%{transform:translateX(-50%) translateY(-12px) scale(1.18)}
  92%{transform:translateX(-50%) translateY(4px) scale(1.055)}
  100%{transform:translateX(-50%) translateY(0) scale(1.08)}
}
@media (max-width:860px){
  .city-life-stage{height:calc(100vh - 70px);min-height:620px}
  .city-life-stage[data-ranking-enhanced="true"]{touch-action:pan-y}
  .city-life-stage[data-ranking-enhanced="true"] .city-life-object{bottom:9%}
  .city-life-stage[data-ranking-enhanced="true"] .city-life-object figcaption.city-life-caption{top:calc(100% + 9px);width:min(310px,82vw);font-size:.62rem}
  .city-life-caption-links{font-size:.58rem;gap:5px}
  .city-life-stage-head{left:18px;top:18px;max-width:calc(100vw - 36px)}
  .city-life-stage-head h2{font-size:clamp(1.15rem,7vw,2rem)}
  .city-life-world{inset:40px 0 82px}
  .city-life-object{width:min(124vw,760px)}
  .city-life-object img{width:100%;max-width:none;max-height:70vh}
  .city-life-object.is-active{transform:translateX(-50%) scale(.98)}
  .city-life-object.is-prev{opacity:1;transform:translateX(-178%) translateY(38px) scale(.34)}
  .city-life-object.is-next{opacity:1;transform:translateX(8%) translateY(-82px) scale(.58)}
  .city-life-bottom{bottom:18px;padding:0 14px;gap:8px}
  .city-life-arrow{width:46px;height:46px}
  .city-life-facts{width:min(100%,calc(100vw - 124px));min-height:52px}
  .city-life-fact{gap:7px;padding:7px 11px}
  .city-life-fact h3{font-size:.9rem;max-width:16ch}
  .city-life-fact strong{display:none}
  .city-life-source{display:none}
  .city-life-rank-rail{left:14px;right:14px;bottom:72px;justify-content:center;gap:6px;padding:7px 8px}
  .city-life-rank-dot{width:8px;height:8px}
  .city-life-rank-dot.is-active{width:32px;height:19px}
}
@media (prefers-reduced-motion:reduce){
  .city-life-cover-frame,.city-life-cover-copy>*,.city-life-cover-art img,.city-life-stage[data-ranking-swap="true"] .city-life-stage-head,.city-life-stage[data-ranking-swap="true"] .city-life-object.is-active figcaption.city-life-caption{animation:none!important}
  .city-life-rank-dot{transition:none}
}