:root {
  --ink: #171a1f;
  --paper: #f3f1eb;
  --line: rgba(23, 26, 31, .17);
  --c1: #e6442e;
  --c2: #f0a329;
  --c3: #2c8e72;
  --c4: #4b6fd8;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; color: var(--ink); background: var(--paper); font-family: Inter, Arial, sans-serif; }
body { padding: 22px; }
.hero { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; max-width: 1500px; margin: 0 auto 24px; }
.eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 0; max-width: 850px; font-size: clamp(43px, 6.6vw, 104px); line-height: .85; letter-spacing: -.065em; text-transform: uppercase; }
.intro { max-width: 680px; margin: 24px 0 0; font-size: clamp(16px, 1.7vw, 22px); line-height: 1.35; }
.updated { padding-bottom: 4px; font-size: 12px; line-height: 1.5; text-align: right; color: #65676a; }
main, footer { max-width: 1500px; margin-inline: auto; }
.toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; align-items: end; gap: 18px; padding: 14px 16px; border: 1px solid var(--line); border-bottom: 0; background: rgba(255,255,255,.42); }
.search-wrap span { display: block; margin-bottom: 5px; color: #6f7174; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
input { width: 100%; border: 0; border-bottom: 1px solid var(--ink); outline: 0; padding: 7px 1px 8px; background: transparent; border-radius: 0; font: inherit; }
.filters { display: flex; flex-wrap: wrap; gap: 7px; }
.filter { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; padding: 9px 11px; background: transparent; color: var(--ink); cursor: pointer; font-weight: 700; }
.filter.off { opacity: .35; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color) 22%, transparent); }
.counter { min-width: 72px; text-align: right; }
.counter strong, .counter span { display: block; }
.counter strong { font-size: 26px; line-height: 1; }
.counter span { font-size: 11px; color: #747679; }
.map-shell { position: relative; border: 1px solid var(--line); background: #ddd; }
#map { height: min(70vh, 780px); min-height: 480px; }
.map-note { position: absolute; z-index: 500; left: 12px; bottom: 12px; max-width: 380px; padding: 8px 10px; border: 1px solid var(--line); background: rgba(243,241,235,.92); backdrop-filter: blur(5px); font-size: 11px; line-height: 1.3; }
.school-marker { display: grid; place-items: center; width: 28px !important; height: 28px !important; margin: -14px 0 0 -14px !important; border: 2px solid var(--paper); border-radius: 50%; background: var(--marker); color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.25); font-size: 10px; font-weight: 800; }
.leaflet-popup-content-wrapper { border-radius: 3px; box-shadow: 0 16px 50px rgba(0,0,0,.22); }
.leaflet-popup-content { margin: 16px 18px; min-width: 230px; }
.popup-rank { margin-bottom: 8px; color: var(--popup-color); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.popup-name { margin: 0 0 8px; font-size: 17px; line-height: 1.18; }
.popup-address { margin: 0 0 12px; color: #606267; line-height: 1.35; }
.popup-links { display: flex; gap: 12px; }
.popup-links a { color: var(--ink); font-weight: 700; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 17px 2px 7px; font-size: 12px; color: #696b6e; }
footer a { color: inherit; }
@media (max-width: 850px) {
  body { padding: 14px; }
  .hero { grid-template-columns: 1fr; }
  .updated { text-align: left; }
  .toolbar { grid-template-columns: 1fr auto; }
  .search-wrap { grid-column: 1 / -1; }
  #map { min-height: 520px; height: 65vh; }
}
@media (max-width: 560px) {
  .filters { grid-column: 1 / -1; }
  .counter { position: absolute; right: 28px; margin-top: -47px; }
  .map-note { right: 10px; max-width: none; }
  footer { flex-direction: column; }
}