:root{
  --paper:#e9edf2; --card:#ffffff; --ink:#161a20; --muted:#69748a; --line:#d3dae3;
  --blue:#0f4cc4; --navy:#0a2e73; --steel:#5b86c9; --track:#e2e7ef;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---- hero: the enamel plate is the signature ---- */
header{padding:56px 0 34px}
.hero{display:flex;align-items:center;gap:44px}
.plate{position:relative;flex:none;width:188px;height:226px;background:var(--blue);
  border-radius:16px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;color:#fff;
  box-shadow:0 18px 38px rgba(15,76,196,.30),0 2px 0 rgba(255,255,255,.25) inset;
  animation:platein .8s cubic-bezier(.2,.8,.2,1) both}
.plate::after{content:"";position:absolute;inset:11px;border:3px solid #fff;
  border-radius:9px;opacity:.92}
.plate .no{font-family:"Space Mono",monospace;font-size:18px;letter-spacing:.05em;
  margin-bottom:-6px;opacity:.95}
.plate .num{font-family:"Archivo Black",sans-serif;font-size:140px;line-height:.9}
@keyframes platein{from{opacity:0;transform:translateY(14px) rotate(-2deg)}
  to{opacity:1;transform:none}}

.eyebrow{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--muted);margin:0 0 14px}
h1{font-family:"Archivo Black",sans-serif;font-weight:400;
  font-size:clamp(40px,7vw,80px);line-height:.96;margin:0;letter-spacing:-.01em}
.tagline{color:var(--muted);font-size:18px;margin:16px 0 0;max-width:46ch}
.updated{font-family:"Space Mono",monospace;font-size:12px;color:var(--muted);
  margin-top:20px;display:flex;align-items:center;gap:8px}
.updated .dot{width:7px;height:7px;border-radius:50%;background:var(--blue)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:38px 0 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px}
.stat .num{font-family:"Archivo Black",sans-serif;font-size:clamp(30px,4.5vw,46px);
  line-height:1;color:var(--blue)}
.stat:nth-child(2) .num{color:var(--ink)}
.stat:nth-child(3) .num{color:var(--navy)}
.stat:nth-child(4) .num{color:var(--steel)}
.stat .lbl{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:9px}

section{padding:50px 0;border-top:1px solid var(--line)}
.sec-head{display:flex;align-items:baseline;gap:14px;margin:0 0 24px}
.sec-head .idx{font-family:"Space Mono",monospace;color:var(--blue);font-size:13px}
.sec-head h2{font-family:"Archivo Black",sans-serif;font-weight:400;
  font-size:clamp(22px,3.4vw,34px);margin:0;letter-spacing:-.01em}
.sec-head .note{margin-left:auto;color:var(--muted);font-size:12px;
  font-family:"Space Mono",monospace}

#map{height:520px;width:100%;border:1px solid var(--line);border-radius:12px;
  background:var(--card)}
.leaflet-popup-content-wrapper{border-radius:8px}
.pop-sender{font-weight:700;color:var(--blue)}
.pop-place{color:var(--muted);font-size:13px}
.skipped{color:var(--muted);font-size:12px;font-family:"Space Mono",monospace;margin-top:14px}
.legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);
  font-size:12px;font-family:"Space Mono",monospace;margin:12px 0 0}
.legend .k{width:12px;height:12px;border-radius:3px;display:inline-block;margin-left:14px}
.legend .k:first-child{margin-left:0}
.legend .solid{background:var(--blue);border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.legend .hollow{background:#fff;border:2px solid var(--blue)}

.columns{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.columns .row{grid-template-columns:30px minmax(0,1.7fr) 1.1fr auto;gap:12px}
.columns .name{font-size:15px}

.rows{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:34px minmax(0,1.4fr) 2fr auto;
  align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.rank{font-family:"Space Mono",monospace;color:var(--muted);font-size:13px}
.row:nth-child(1) .rank{color:var(--blue);font-weight:700}
.name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flag{margin-right:9px}
.track{height:9px;background:var(--track);border-radius:99px;overflow:hidden}
.fill{display:block;height:100%;border-radius:99px;transform-origin:left;
  animation:grow .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.count{font-family:"Space Mono",monospace;font-weight:700;min-width:3ch;text-align:right}
.empty{color:var(--muted)}

footer{padding:34px 0 64px;color:var(--muted);font-size:12px;
  font-family:"Space Mono",monospace;line-height:1.8;border-top:1px solid var(--line)}
footer a{color:var(--navy)}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

@media (max-width:760px){
  .hero{flex-direction:column;align-items:flex-start;gap:26px}
  .plate{width:150px;height:182px}
  .plate .num{font-size:110px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .columns{grid-template-columns:1fr;gap:36px}
  .row{grid-template-columns:28px minmax(0,1.3fr) 1.4fr auto;gap:10px}
  #map{height:380px}
  .sec-head .note{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fill,.plate{animation:none}
  html{scroll-behavior:auto}
}