:root{
  --bg:#07090d;--ink:#ece7df;--muted:#9aa0ab;--line:rgb(255 255 255 / .12);
  --accent:#e5953f;--accent-hot:#ffc27a;--on-accent:#1b1308;
  --font-body:'General Sans','Helvetica Neue',sans-serif;--font-display:'Zodiak',Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);--radius:6px;
  --text-xs:clamp(.75rem,.72rem + .15vw,.8125rem);--text-sm:clamp(.875rem,.85rem + .12vw,.9375rem);
  --text-base:clamp(1rem,.97rem + .15vw,1.0625rem);--text-xl:clamp(1.75rem,1.4rem + 1.4vw,2.625rem);
  --text-hero:clamp(2.25rem,1.3rem + 3vw,4rem);
}
*{box-sizing:border-box;margin:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--text-base);-webkit-font-smoothing:antialiased}
a{color:inherit}
.btn{display:inline-flex;align-items:center;gap:.5rem;font:600 var(--text-sm)/1 var(--font-body);padding:.85rem 1.25rem;border-radius:var(--radius);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .2s var(--ease),background .2s,border-color .2s;background:none;color:var(--ink)}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--accent-hot);outline-offset:2px}
.btn--primary{background:var(--accent);color:var(--on-accent)}
.btn--primary:hover{background:#f0a65a}
.btn--ghost{border-color:rgb(255 255 255 / .28);background:rgb(10 12 18 / .4);backdrop-filter:blur(6px)}
.btn--ghost:hover{border-color:#fff}
.btn--sm{padding:.65rem 1rem}

.bar{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(16px,3vw,36px);pointer-events:none}
.bar>*{pointer-events:auto}
.brand{display:block;background:rgb(255 255 255 / .94);padding:6px 12px;border-radius:10px;box-shadow:0 6px 24px rgb(0 0 0 / .4)}
.brand img{display:block;height:40px;width:auto}

.stage{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:#05070b}
#map{position:absolute;inset:0}
.vignette{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgb(5 7 11 / .92) 0%,rgb(5 7 11 / .55) 30%,transparent 55%),
  radial-gradient(ellipse at 60% 50%,transparent 45%,rgb(5 7 11 / .7) 100%)}

.hud{position:absolute;z-index:5;left:clamp(16px,4vw,64px);top:50%;transform:translateY(-46%);max-width:min(36rem,40vw)}
.eyebrow{font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:1rem}
.title{font-family:var(--font-display);font-weight:500;font-size:var(--text-hero);line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
.count{color:var(--accent-hot);font-variant-numeric:tabular-nums;text-shadow:0 0 28px rgb(229 149 63 / .55)}
#towns{font-variant-numeric:tabular-nums}
.lede{margin-top:1.25rem;color:#c9c4bb;max-width:26rem;line-height:1.55}
.clock{display:flex;align-items:baseline;gap:.75rem;margin-top:2rem}
.clock__label{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.clock__date{font-family:var(--font-display);font-size:1.5rem;font-variant-numeric:tabular-nums}
.timeline{height:2px;background:var(--line);margin-top:.75rem;max-width:22rem;border-radius:2px;overflow:hidden}
.timeline__fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-hot));box-shadow:0 0 12px var(--accent)}
.controls{display:flex;gap:.6rem;margin-top:1.5rem;flex-wrap:wrap}

.towns{position:absolute;z-index:5;right:clamp(16px,3vw,36px);top:96px;bottom:190px;width:236px;display:flex;flex-direction:column;
  background:rgb(10 12 18 / .62);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:12px;padding:16px 8px 8px 16px}
.towns__head{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.5rem}
.towns__list{list-style:none;padding:0 8px 24px 0;overflow-y:auto;-webkit-mask-image:linear-gradient(#000 85%,transparent);mask-image:linear-gradient(#000 85%,transparent);scrollbar-width:thin;scrollbar-color:#333 transparent}
.towns__list button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:1fr auto;gap:.5rem;width:100%;padding:.5rem .25rem;border-bottom:1px solid rgb(255 255 255 / .06);cursor:pointer;font-size:var(--text-sm);position:relative}
.towns__list button:hover,.towns__list button[aria-current="true"]{color:var(--accent-hot)}
.towns__list button:focus-visible{outline:2px solid var(--accent-hot);outline-offset:-2px;border-radius:4px}
.towns__list .n{font-variant-numeric:tabular-nums;color:var(--muted)}
.towns__list .barv{position:absolute;left:0;bottom:-1px;height:1px;background:var(--accent);opacity:.8}

.note{position:absolute;z-index:5;left:clamp(16px,4vw,64px);bottom:18px;font-size:var(--text-xs);color:var(--muted)}

.maplibregl-ctrl-attrib{background:rgb(0 0 0 / .45)!important;color:#888}
.maplibregl-ctrl-attrib a{color:#aaa!important}
.maplibregl-ctrl-group{background:rgb(10 12 18 / .8)!important;border:1px solid var(--line)}
.maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1)}
.maplibregl-popup-content{background:#10141b;color:var(--ink);border:1px solid rgb(229 149 63 / .5);border-radius:8px;padding:10px 14px;font-family:var(--font-body);box-shadow:0 10px 30px rgb(0 0 0 / .5)}
.maplibregl-popup-tip{border-top-color:#10141b!important;border-bottom-color:#10141b!important}
.pop b{font-family:var(--font-display);font-weight:500;font-size:1.1rem;display:block}
.pop span{color:var(--muted);font-size:var(--text-xs)}

.cta{background:#0b0e13;border-top:1px solid var(--line);padding:clamp(56px,8vw,96px) clamp(16px,4vw,64px)}
.cta__inner{max-width:40rem;margin:0 auto;text-align:center}
.cta h2{font-family:var(--font-display);font-weight:500;font-size:var(--text-xl);line-height:1.1}
.cta p{color:#c9c4bb;margin:1rem auto 2rem;max-width:32rem;line-height:1.55}

@media (max-width:860px){
  .stage{height:auto;min-height:0;display:flex;flex-direction:column}
  #map{position:relative;height:62svh;min-height:420px;order:2}
  .vignette{display:none}
  .hud{position:relative;transform:none;top:auto;left:auto;padding:96px 20px 20px;max-width:none;order:1}
  .towns{position:relative;order:3;inset:auto;width:auto;margin:0;border-radius:0;border-width:1px 0 0;padding:16px 20px 8px;background:#0b0e13;backdrop-filter:none}
  .towns__list{-webkit-mask-image:none;mask-image:none;display:flex;gap:8px;overflow-x:auto;padding-bottom:10px}
  .towns__list li{flex:0 0 auto}
  .towns__list button{border:1px solid var(--line);border-radius:999px;padding:.5rem .85rem;width:auto}
  .towns__list .barv{display:none}
  .note{position:relative;order:4;left:auto;bottom:auto;padding:4px 20px 18px;background:#0b0e13}
  .brand img{height:32px}
  .bar{position:absolute}
}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover{transition:none;transform:none}}

.maplibregl-ctrl-bottom-right{margin-right:clamp(6px,2vw,26px);margin-bottom:28px}