.weather-breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:4px 0 22px; font-size:.8rem; color:var(--muted); }
.weather-breadcrumbs a { text-decoration:none; }
.weather-breadcrumbs [aria-current] { color:var(--text); }
.city-links { margin-top:22px; padding:24px; }
.city-links-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
.city-links h2 { font-size:1.05rem; }
.city-links-heading>a { font-size:.875rem; white-space:nowrap; }
.city-link-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.city-link-grid>a { position:relative; display:flex; flex-direction:column; padding:16px 34px 16px 16px; border:1px solid var(--border); border-radius:8px; text-decoration:none; }
.city-link-grid>a:hover { background:rgba(128,164,202,.1); }
.city-link-grid strong { font-weight:500; }
.city-link-grid span { font-size:.8rem; color:var(--muted); }
.city-link-grid .city-link-arrow { position:absolute; right:14px; top:16px; color:var(--link); }
.city-forecast-updated { margin-top:12px; color:var(--muted); font-size:.75rem; }
.directory-heading { padding:22px 0 38px; max-width:700px; }
.directory-heading h1 { font-size:clamp(2rem,4vw,3rem); letter-spacing:-.04em; }
.directory-heading p { margin:14px 0 20px; color:var(--muted); font-size:1.1rem; max-width:560px; }
.directory-heading>a { font-size:.9rem; }
.directory-country { margin-bottom:22px; }
.directory-country h2 { font-size:1.3rem; margin-bottom:5px; }
.directory-country h2 a { color:var(--text); text-decoration:none; }
.directory-grid { columns:3; column-gap:18px; }
.directory-region { padding:22px; margin-bottom:18px; break-inside:avoid; }
.directory-region h2 { font-size:1rem; margin-bottom:12px; }
.directory-region h2 a { text-decoration:none; color:var(--text); }
.directory-region ul { list-style:none; padding:0; margin:0; }
.directory-region li+li { border-top:1px solid var(--border); }
.directory-region li a { display:flex; justify-content:space-between; gap:12px; padding:10px 0; font-size:.9rem; text-decoration:none; }
@media(max-width:760px) { .city-link-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .directory-grid { columns:2; } .city-links { padding:18px; } .city-links-heading { align-items:flex-start; flex-direction:column; gap:6px; } }
@media(max-width:460px) { .directory-grid { columns:1; } .weather-breadcrumbs { font-size:.72rem; gap:6px; margin-bottom:18px; } .city-link-grid>a { padding:12px 24px 12px 12px; } .city-link-grid .city-link-arrow { right:10px; top:12px; } }