.city-directory { max-width:1300px; padding:24px 24px 32px; margin:0 auto; }
.city-directory h1 { font-size:28px; line-height:1.25; font-weight:700; letter-spacing:-.4px; }
.directory-intro { margin-top:6px; color:var(--muted); line-height:1.5; }
.directory-alphabet { display:flex; flex-wrap:wrap; gap:3px; margin:14px 0; }
.directory-alphabet a { display:grid; place-items:center; min-width:34px; min-height:36px; padding:5px; color:var(--accent); border-radius:5px; }
.directory-alphabet a:hover { background:var(--accent-light); }
.directory-card { background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:var(--card-shadow); padding:0 20px; }
.directory-group { display:grid; grid-template-columns:36px minmax(0,1fr); gap:14px; padding:12px 0; }
.directory-group + .directory-group { border-top:1px solid var(--line); }
.directory-group h2 { font-size:21px; color:var(--accent); line-height:1.4; margin:0; scroll-margin-top:90px; }
.directory-cities { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start; gap:4px 20px; padding:0; margin:0; list-style:none; }
.directory-group a { display:block; padding:4px 0; font-size:15px; line-height:1.4; overflow-wrap:anywhere; }
.directory-city-link { font-weight:600; }
.directory-group a:hover { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.directory-areas { list-style:none; margin:2px 0 3px; padding:0 0 0 10px; }
.directory-areas a { color:var(--muted); font-size:14px; padding:3px 0; }
@media(max-width:780px) {
 .city-directory { padding:18px 16px 24px; }
 .city-directory h1 { font-size:24px; }
 .directory-card { padding:0 14px; }
 .directory-group { grid-template-columns:24px minmax(0,1fr); gap:10px; padding:10px 0; }
 .directory-cities { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 12px; }
 .directory-areas { padding-left:6px; }
}