.place-page { height:100dvh; min-height:0; overflow:auto; background:var(--bg,#f7f8fa); color:var(--text,#17202a); }
.place-content { max-width:1100px; margin:0 auto; padding:24px clamp(16px,4vw,48px) 64px; }
.place-breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:16px 24px; font-size:14px; }
.place-actions { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0; }
.place-actions a { padding:10px 16px; border:1px solid #ccd2d8; border-radius:8px; }
.place-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:20px 0 32px; }
.place-card { display:flex; flex-direction:column; gap:8px; padding:20px; border:1px solid #d8dde3; border-radius:12px; background:var(--panel,#fff); text-decoration:none; }
.place-card:hover,.place-card:focus-visible { border-color:#53769d; }
.place-card span { font-size:14px; }
.place-content li { margin:10px 0; }
.place-content h1 { font-size:clamp(28px,4vw,42px); }

/* City homepages share the homepage's palette and editorial typography. */
.city-page { --text:var(--openmuni-text); --muted:var(--openmuni-muted); --border:var(--openmuni-border); --focus:var(--openmuni-focus); background:var(--openmuni-canvas); color:var(--text); scrollbar-gutter:stable; }
.city-page a,.city-page a:hover { color:inherit; text-decoration:none; }
.city-page :focus-visible { outline:2px solid var(--focus); outline-offset:4px; }
.city-page .topbar { height:52px; min-height:52px; padding:0 20px; flex-wrap:nowrap; gap:16px; background:#fff; border-bottom:1px solid #e3e4e4; box-shadow:none; }
.city-page .topbar .brand { flex-basis:auto; }
.city-page .topbar__nav { gap:18px; }
.city-page .topbar__link { color:var(--muted); }
.city-page .topbar__link:hover { color:var(--text); }
.city-content { max-width:1200px; padding:48px 40px 32px; }
.city-skip { position:absolute; top:8px; left:20px; z-index:10; padding:10px 16px; border:1px solid var(--border); border-radius:8px; background:#fff; transform:translateY(-160%); }
.city-skip:focus { transform:translateY(0); }
.city-hero { margin-bottom:56px; }
.city-hero__intro { min-width:0; }
.city-eyebrow { margin:0 0 16px; color:var(--muted); font-size:12px; font-weight:500; }
.city-page .city-hero h1 { margin:0; font:400 clamp(48px,5.5vw,76px)/1.08 var(--font-editorial); letter-spacing:-.055em; overflow-wrap:anywhere; }
.city-actions { gap:10px; margin:28px 0 0; }
.city-actions a { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:44px; padding:11px 17px; border:1px solid #cdd1d5; border-radius:8px; background:#fff; box-shadow:0 2px 3px rgb(14 30 46 / 3%); font-size:13px; font-weight:500; line-height:1.4; }
.city-actions a:hover { border-color:var(--focus); box-shadow:0 3px 10px rgb(14 30 46 / 7%); }
.city-actions .city-actions__research { border-color:#a5b6ca; color:#0b326b; }
.city-actions__research span { font-size:18px; line-height:1; }
.city-hero__cover { overflow:hidden; aspect-ratio:3 / 1; margin-bottom:36px; border:1px solid var(--border); border-radius:14px; background:#e7edf1; }
.city-hero__cover img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 28%; }
.city-section { margin:0 0 48px; }
.city-section__heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.city-section__heading h2 { margin:0; font-size:21px; font-weight:500; letter-spacing:-.025em; }
.city-section__heading p { margin:9px 0 0; color:var(--muted); font-size:14px; line-height:1.6; }
.city-section__link { display:inline-flex; align-items:center; gap:12px; min-height:44px; padding:10px 14px; border:1px solid var(--border); border-radius:8px; background:#fff; font-size:12px; white-space:nowrap; }
.city-section__link:hover { border-color:var(--focus); }
.city-page .place-grid { margin:0; gap:14px; }
.city-page .place-card { min-width:0; padding:24px; border-color:var(--border); border-radius:14px; background:#fff; }
.city-page .place-card h3 { margin:0; font-size:16px; font-weight:550; line-height:1.5; letter-spacing:-.015em; }
.city-highlights { grid-template-columns:repeat(3,minmax(0,1fr)); }
.city-highlight p { margin:8px 0 0; color:var(--muted); font-size:14px; line-height:1.75; }
.city-topics { grid-template-columns:repeat(3,minmax(0,1fr)); }
.city-page .city-topic { position:relative; display:grid; grid-template-columns:22px minmax(0,1fr); align-content:center; column-gap:14px; row-gap:6px; min-height:120px; padding-right:52px; }
.city-topic__icon { grid-row:span 2; align-self:center; background-color:var(--text); opacity:.75; }
.city-page .city-topic__count { color:var(--muted); font-size:12px; line-height:1.6; }
.city-page .city-topic__arrow { position:absolute; top:22px; right:22px; color:#7a8794; font-size:20px; line-height:1; }
.city-page .city-topic:hover { border-color:var(--focus); box-shadow:0 4px 18px rgb(14 30 46 / 5%); }
.city-topic:hover .city-topic__arrow { color:var(--focus); }
.city-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:24px 0 0; border-top:1px solid var(--border); color:var(--muted); font-size:12px; }
.city-footer a { display:inline-flex; align-items:center; gap:12px; min-height:44px; }
.city-footer a:hover { color:var(--focus); }
.city-notice { margin:0 0 24px; padding:14px 18px; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--muted); line-height:1.6; }
@media (max-width:959px) {
  .city-topics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .city-highlights { grid-template-columns:1fr; }
}
@media (max-width:639px) {
  .city-page .topbar { height:48px; min-height:48px; padding:0 12px; gap:8px; }
  .city-page .brand { gap:7px; }
  .city-page .topbar__nav { gap:10px; }
  .city-page .topbar__link { font-size:12px; }
  .city-content { padding:32px 20px 28px; }
  .city-hero { margin-bottom:40px; }
  .city-hero__cover { aspect-ratio:2 / 1; margin-bottom:28px; }
  .city-page .city-hero h1 { font-size:clamp(48px,11vw,66px); }
  .city-actions { margin-top:24px; gap:8px; }
  .city-actions a { padding:10px 14px; }
  .city-section { margin-bottom:36px; }
  .city-section__heading { align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
  .city-section__heading h2 { font-size:20px; }
  .city-page .place-card { padding:20px; }
  .city-topics { grid-template-columns:1fr; gap:10px; }
  .city-page .city-topic { min-height:104px; }
  .city-footer { align-items:flex-start; }
}
.place-switch-notice { position:fixed; bottom:80px; left:16px; right:16px; max-width:540px; margin:auto; padding:12px 16px; background:#fff; border:1px solid #ccd2d8; border-radius:8px; box-shadow:0 2px 8px #0002; z-index:100; }
.shell--records .body-pane { display:none; }
.shell--records .shell__body { grid-template-columns:var(--rail-w) 1fr; }
.shell--records .list-pane { position:relative; inset:auto; transform:none; width:auto; max-width:none; height:100%; min-width:0; }
@media (max-width: 767px) {
  .shell--records .shell__body { grid-template-columns:1fr; }
  .shell--records .list-pane { padding-bottom:var(--mobile-rail-h); }
  .shell { grid-template-rows:auto 1fr; }
  .topbar { flex-wrap:wrap; gap:8px; height:auto; min-height:44px; padding-block:8px; }
  .topbar .brand { flex-basis:100%; }
  .topbar__nav { margin-left:auto; }
}
.municipality-selector button { border:1px solid #ccd2d8; border-radius:6px; padding:4px 8px; background:#fff; cursor:pointer; }
.municipality-selector { gap:8px; }
.municipality-selector::before,.municipality-selector::after { display:none; }
.municipality-selector select { position:static; inset:auto; width:auto; max-width:42vw; padding-right:16px; appearance:auto; }
.atlas-public-places { flex-basis:100%; text-align:center; }
.atlas-public-places summary { cursor:pointer; list-style-position:inside; }
.atlas-place-picker { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin:12px 0 0; }
.atlas-place-picker select,.atlas-place-picker button { border:1px solid #ccd2d8; border-radius:6px; background:#fff; padding:6px 8px; color:#17202a; font:inherit; }
.atlas-page .atlas-place-picker select { width:auto; max-width:220px; }
@media (max-width:767px) { .atlas-place-picker label { flex-basis:100%; text-align:center; } }