.city-inner {
  width:min(100%,calc(1120px + 2 * var(--gutter)));
  margin-inline:auto;
  padding:clamp(36px,6vw,86px) var(--gutter) clamp(64px,9vw,122px);
}
.city-header { margin-bottom:clamp(24px,4vw,48px); }
.city-breadcrumb {
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  margin-bottom:clamp(18px,4vw,38px); color:var(--muted); font-size:13px;
}
.city-breadcrumb a { color:var(--accent); text-underline-offset:.22em; }
.city-header h1 {
  max-width:21ch; margin:0; color:var(--text); font-size:clamp(38px,7vw,86px);
  font-weight:735; line-height:1.02; letter-spacing:-.06em;
}
.city-header p {
  max-width:60ch; margin:18px 0 0; color:var(--muted);
  font-size:clamp(16px,1.8vw,22px); line-height:1.55;
}
.city-list a,.city-observation,.city-guide,.city-related {
  --text:var(--panel-ink); --muted:var(--panel-muted); --accent:var(--panel-accent);
  --line:var(--panel-line); color:var(--text);
  background:var(--panel-bg); border:1px solid var(--line);
}
.city-observation,.city-guide,.city-related {
  border-radius:18px; padding:clamp(16px,3vw,30px);
}
.city-list {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
  margin:0; padding:0; list-style:none;
}
.city-list a {
  position:relative; display:grid; align-content:center; gap:5px; height:100%; min-height:88px;
  padding:14px 45px 14px 18px; border-radius:12px; text-decoration:none;
  transition:background-color .2s,border-color .2s;
}
.city-list a:hover { border-color:var(--accent); background-color:#fff; }
.city-list strong { font-size:clamp(18px,2vw,23px); line-height:1.1; }
.city-list span { color:var(--muted); font-size:14px; }
.city-list .city-arrow {
  position:absolute; top:50%; right:17px; transform:translateY(-50%); color:var(--accent); font-size:21px;
}
.city-observation { max-width:820px; }
.city-observation-heading {
  display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:14px 20px;
}
.city-page h2 {
  margin:0; font-size:clamp(24px,3.4vw,38px); line-height:1.1; letter-spacing:-.035em;
}
.city-date-controls {
  display:grid; grid-template-columns:44px minmax(110px,auto) 44px; align-items:center; gap:6px;
  text-align:center; color:var(--accent); font-size:14px;
}
.city-date-controls button {
  min-width:44px; min-height:44px; border:1px solid var(--line); border-radius:8px;
  background:var(--panel-inset); color:var(--accent); font-size:17px;
}
.city-date-controls button:hover:not([aria-disabled=true]) { background:#dbe8f8; border-color:var(--accent); }
.city-date-controls button[aria-disabled=true] { opacity:.5; cursor:default; }
.city-observation .lunar-horizon { margin-top:12px; border-top:0; }
.city-observation .horizon-times {
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:0;
}
.city-observation .horizon-times > div {
  min-width:0; padding:clamp(10px,2vw,18px); border:1px solid var(--line);
  border-radius:12px; background:var(--panel-inset);
}
.city-observation .horizon-times dt,.city-observation .horizon-times dd span {
  font-size:13px; color:var(--muted);
}
.city-observation .horizon-times dd strong {
  margin:4px 0; font-size:clamp(25px,4vw,40px); letter-spacing:-.035em;
}
.city-observation .lunar-horizon > p { font-size:12px; }
.city-observation .observation-forecast { margin-top:19px; padding-top:15px; }
.city-observation .observation-forecast h3 { display:block; font-size:18px; }
.city-observation .observation-forecast p { color:var(--muted); font-size:14px; }
.city-observation .observation-forecast time { font-size:22px; }
.city-observation .observation-forecast .observation-source { margin-top:10px; font-size:12px; }
.city-observation .observation-source a { color:var(--accent); text-underline-offset:.18em; }
.city-observation .observation-retry {
  padding:6px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--panel-inset); color:var(--accent);
}
.city-observation .observation-retry:hover { border-color:var(--accent); background:#dbe8f8; }
.city-guide { max-width:820px; margin-top:clamp(26px,4vw,46px); }
.city-guide p {
  max-width:68ch; margin:12px 0 0; color:var(--muted); font-size:clamp(16px,1.6vw,18px); line-height:1.65;
}
.city-related {
  display:flex; flex-wrap:wrap; gap:12px 24px;
  max-width:820px; margin-top:clamp(24px,4vw,46px);
}
@media(max-width:850px) {
  .city-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:540px) {
  .city-list { grid-template-columns:minmax(0,1fr); }
}