* { box-sizing: border-box; }
:root { --paper:#f5f3eb; --paper-2:#e9e6dc; --ink:#171715; --muted:#6f6b62; --red:#c5231d; --line:rgba(23,23,21,.24); --serif:"Songti SC","SimSun",serif; --sans:"Helvetica Neue",Arial,"PingFang SC",sans-serif; --mono:"SFMono-Regular",Consolas,monospace; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.city-page { width:min(100%,1180px); margin:0 auto; border-left:1px solid var(--line); border-right:1px solid var(--line); }
.topbar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:58px; padding:0 22px; border-bottom:1px solid var(--line); font:700 9px/1 var(--mono); letter-spacing:.1em; }
.topbar > span { color:var(--muted); }.topbar a:last-child { justify-self:end; }
.intro { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:end; padding:48px 34px 40px; }
.intro-title > span { color:var(--red); font:700 9px/1 var(--mono); letter-spacing:.14em; }
h1 { margin:14px 0 0; font:500 clamp(46px,6vw,76px)/1 var(--serif); letter-spacing:-.08em; }
.intro-copy > p { max-width:480px; margin:0 0 26px; color:var(--muted); font-size:13px; line-height:1.85; }
.stats { display:flex; gap:42px; }.stats strong,.stats span { display:block; }.stats strong { font:500 26px/1 var(--serif); }.stats span { margin-top:6px; color:var(--muted); font:700 8px/1 var(--mono); letter-spacing:.1em; }
.city-nav { padding:16px 22px; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.nav-row { display:grid; grid-template-columns:90px repeat(5,minmax(0,1fr)); align-items:stretch; }.nav-row + .nav-row { margin-top:7px; }.nav-row-other { grid-template-columns:90px repeat(5,minmax(0,1fr)); }
.group-name { align-self:center; color:var(--muted); font:700 9px/1 var(--mono); letter-spacing:.08em; }
.nav-row button { min-height:48px; padding:7px 12px; border:0; border-left:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; cursor:pointer; transition:background .18s,color .18s; }
.nav-row button span,.nav-row button small { display:block; }.nav-row button span { font:500 16px/1.2 var(--serif); }.nav-row button small { margin-top:5px; color:var(--muted); font:700 7px/1 var(--mono); letter-spacing:.08em; }
.nav-row button:hover,.nav-row button[aria-selected="true"] { background:var(--ink); color:var(--paper); }.nav-row button:hover small,.nav-row button[aria-selected="true"] small { color:rgba(245,243,235,.6); }.nav-row button:focus-visible { outline:2px solid var(--red); outline-offset:-2px; }
.city-heading { display:flex; justify-content:space-between; align-items:end; min-height:132px; padding:30px 34px 24px; }
.city-heading span,.current-en { color:var(--muted); font:700 8px/1 var(--mono); letter-spacing:.12em; }.city-heading span b { color:var(--red); font-weight:700; }
h2 { margin:8px 0 0; font:500 clamp(38px,5vw,62px)/.95 var(--serif); letter-spacing:-.08em; }.current-en { padding-bottom:5px; }
.content-grid { display:grid; grid-template-columns:1.08fr .92fr; border-top:1px solid var(--ink); }
.content-grid article { display:grid; grid-template-rows:auto 1fr auto; min-height:360px; padding:28px 34px; }.content-grid article + article { border-left:1px solid var(--ink); }
.panel-label { display:flex; justify-content:space-between; color:var(--muted); font:700 8px/1 var(--mono); letter-spacing:.1em; }.panel-label span { color:var(--red); }.panel-label strong { font-family:var(--serif); font-size:12px; }
.panel-copy { align-self:end; margin-bottom:28px; }.panel-copy h3 { max-width:460px; margin:0; font:500 clamp(23px,2.6vw,34px)/1.2 var(--serif); letter-spacing:-.05em; }.panel-copy p { margin:14px 0 0; color:var(--muted); font-size:12px; line-height:1.75; }
.panel-status { padding-top:13px; border-top:1px solid var(--line); color:var(--muted); font:700 8px/1 var(--mono); letter-spacing:.09em; }
.map-panel { grid-template-rows:auto auto 1fr auto !important; }.map-field { position:relative; height:112px; margin:28px 0 20px; overflow:hidden; background:var(--paper-2); }.map-field i { position:absolute; left:-10%; width:120%; height:1px; background:var(--line); }.map-field i:first-child { top:32%; transform:rotate(12deg); }.map-field i:nth-child(2) { top:72%; transform:rotate(-18deg); }.map-field span { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--red); }.map-field span:nth-of-type(1) { left:28%; top:24%; }.map-field span:nth-of-type(2) { left:67%; top:56%; }.map-panel .panel-copy { align-self:start; margin-bottom:24px; }.map-panel .panel-copy h3 { font-size:25px; }
footer { display:flex; justify-content:space-between; gap:20px; padding:17px 22px; border-top:1px solid var(--ink); color:var(--muted); font:700 8px/1 var(--mono); letter-spacing:.09em; }
@media(max-width:700px){ .city-page{border:0}.topbar{grid-template-columns:1fr auto;padding:0 16px}.topbar>span{display:none}.intro{grid-template-columns:1fr;gap:28px;padding:36px 18px 32px}h1{font-size:48px}.stats{gap:28px}.city-nav{padding:14px 0}.nav-row,.nav-row-other{display:flex;overflow-x:auto;margin:0!important;scrollbar-width:none}.nav-row::-webkit-scrollbar{display:none}.group-name{flex:0 0 84px;padding-left:18px}.nav-row button{flex:0 0 92px}.nav-row+.nav-row{border-top:1px solid var(--line)}.city-heading{min-height:118px;padding:26px 18px 20px}h2{font-size:44px}.content-grid{grid-template-columns:1fr}.content-grid article{min-height:320px;padding:25px 18px}.content-grid article+article{border-left:0;border-top:1px solid var(--ink)}footer{flex-direction:column;padding:20px 18px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

@media(max-width:700px){
  .topbar{position:sticky;top:0;z-index:20;min-height:54px;padding:0 14px;background:rgba(245,243,235,.94);backdrop-filter:blur(14px);font-size:8px}
  .topbar a:first-child{overflow:hidden;max-width:145px;text-overflow:ellipsis;white-space:nowrap}
  .intro{gap:34px;padding:48px 20px 40px}
  h1{font-size:42px}
  .intro-copy>p{font-size:12px;line-height:1.8}
  .stats{gap:22px}.stats strong{font-size:23px}
  .city-nav{padding:12px 0}
  .group-name{flex-basis:76px;padding-left:20px}
  .nav-row button{flex-basis:88px;min-height:52px}
  .city-heading{min-height:108px;padding:24px 20px 19px}
  h2{font-size:38px}
  .content-grid article{min-height:290px;padding:24px 20px}
  .panel-copy h3{font-size:27px}
  footer{gap:10px;padding:24px 20px;font-size:7px}
}