.alert-badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 0.35rem;
  font-size: 0.75rem;
  margin-right: 0.35rem;
}

.badge-extreme {
  background: #b00020;
  color: #fff;
}

.badge-severe {
  background: #d7263d;
  color: #fff;
}

.badge-moderate {
  background: #f5a623;
  color: #111;
}

.badge-minor {
  background: #2c7be5;
  color: #fff;
}

.eyebrow {
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(28px, 5vw, 46px);
}

.kicker {
  color: var(--muted);
}

.map-section {
  padding: 0;
}

.map-bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

#map {
  height: 68vh;
  min-height: 420px;
  max-height: 820px;
  width: 100%;
  border-radius: 0;
  box-shadow: none;
}

.temp-control {
  background: rgba(20, 25, 36, 0.9);
  color: #e9eef7;
  padding: 0.6rem 0.8rem;
  border-radius: 0.5rem;
  font: 14px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.temp-control b {
  font-size: 1rem;
}

.temp-control .muted {
  color: #b6c0d1;
  font-size: 0.9em;
}

.legend {
  background: rgba(255, 255, 255, 0.9);
  color: #111;
  padding: 0.3rem 0.5rem;
  border-radius: 0.35rem;
  font-size: 12px;
  margin-top: 0.35rem;
}

@media (max-width: 420px) {
  #map {
    height: 56vh;
    min-height: 340px;
  }
}