diff --git a/static/style.css b/static/style.css
index f3befdc..41bd287 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1468,6 +1468,9 @@ main.content a { color: var(--accent); }
 
 .table-wrap { overflow-x: auto; }
 table.normals-table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 15px; table-layout: fixed; }
+/* Records has 5 columns — give it a floor width so it scrolls inside .table-wrap on
+   narrow screens instead of overlapping. */
+table.records-table { min-width: 560px; }
 table.normals-table th:first-child, table.normals-table td:first-child { width: 26%; }
 table.normals-table th, table.normals-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
 table.normals-table thead th { color: var(--muted); font-weight: 600; font-size: 13px; }
@@ -1488,9 +1491,20 @@ table.normals-table tbody tr:hover { background: var(--surface-2); }
 .travel-note { font-size: 15px; }
 
 /* Hub / directory of cities */
-.hub-country { margin: 22px 0; }
-.hub-country h2 { margin: 0 0 8px; font-size: 18px; }
-.city-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
+/* Collapsible country sections (native <details>). */
+details.hub-country { border-bottom: 1px solid var(--border); }
+details.hub-country > summary {
+  cursor: pointer; padding: 12px 4px; font-weight: 700; font-size: 16px;
+  list-style: none; display: flex; align-items: center; gap: 8px;
+}
+details.hub-country > summary::-webkit-details-marker { display: none; }
+details.hub-country > summary::before {
+  content: "\25B8"; color: var(--muted); transition: transform .15s ease; display: inline-block;
+}
+details.hub-country[open] > summary::before { transform: rotate(90deg); }
+details.hub-country > summary:hover { color: var(--accent); }
+.hub-count { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 13px; }
+.city-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 2px 4px 16px 22px; list-style: none; }
 .city-links a { text-decoration: none; }
 
 /* Glossary / about editorial */