/* Naturally Hazardous — Atlas V2 visual identity.
   Edit the values in :root to adjust the main colour palette.
   This stylesheet overrides the original prototype without changing its interactions. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #111518;
  --panel: #1a2023;
  --panel2: #24292c;
  --ink: #e7e1d7;
  --muted: #9aa8ac;
  --gold: #c58b4c; /* NH copper accent; retained variable name for compatibility */
  --line: rgba(231,225,215,.17);
  --blue: #70818a;
  --red: #df796e;
  --orange: #df9659;
  --violet: #b298c6;
  --water: #70b5c7;
  --green: #94b39e;
}
html, body {
  font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
}
#map, .leaflet-container { background: #111a1e; }
.frame {
  background: linear-gradient(to bottom,rgba(13,17,19,.95),rgba(13,17,19,.07) 22%,transparent 38%,transparent 73%,rgba(13,17,19,.86));
}
header {
  background: rgba(17,21,24,.89);
  border-bottom-color: var(--line);
}
.brand-name, .atlas-name, .tagline,
.event-title, .modal h2, .card-desc,
.insight p, .stat strong, .bottom-right {
  font-family: 'Manrope', 'Segoe UI', sans-serif;
}
.brand-name { font-weight: 800; letter-spacing: .07em; }
.atlas-name { font-weight: 700; letter-spacing: .17em; }
.tagline { font-size: 12px; font-weight: 400; letter-spacing: .02em; }
.gold {
  color: #e2b078;
  background: rgba(197,139,76,.085);
  border-color: var(--gold);
}
.gold:hover { background: rgba(197,139,76,.18); }
.ghost, .filter, .search-wrap {
  background: rgba(25,32,35,.90);
  border-color: rgba(231,225,215,.17);
}
.filter { color: #cbd0ce; }
.filter.active {
  color: #f0c28d;
  border-color: var(--gold);
  background: rgba(197,139,76,.15);
}
.search-wrap input::placeholder {color: #929f9e;}
.leaflet-control-zoom a {
  background: #24292c!important;
  color: var(--ink)!important;
}
.leaflet-control-attribution {
  background: rgba(17,21,24,.80)!important;
}
.bottom-right { font-size: 12px; font-style: normal; letter-spacing: .02em; }
.count { letter-spacing: .05em; }
.event-card {
  background: linear-gradient(154deg,#293337 0%,#171d21 42%,#11171a 100%);
  border-color: var(--gold);
  border-radius: 17px;
  box-shadow: 0 24px 75px #0009, 0 0 0 5px rgba(197,139,76,.035);
}
.event-card:before {
  border-color: rgba(197,139,76,.24);
}
.card-art {
  background: radial-gradient(ellipse at 50% 110%,rgba(197,139,76,.13),transparent 59%),repeating-radial-gradient(ellipse at 60% 67%,transparent 0px,transparent 16px,rgba(153,166,161,.12) 17px,transparent 18px),linear-gradient(130deg,#334147,#1a282b 65%,#233035);
}
.card-art:after { background: linear-gradient(transparent 38%,#171d21); }
.card-topline {font-family:'IBM Plex Sans',sans-serif; color:#ead3b7; font-weight:600;}
.eyebrow {font-family:'IBM Plex Sans',sans-serif; color:#dfa96f; font-weight:600; letter-spacing:.10em;}
.event-title {font-size:32px; font-weight:700; letter-spacing:-.035em; line-height:1.16;}
.location {color:#b2c0bf;}
.card-desc {font-size:14px; font-weight:400; color:#d6dbd8; line-height:1.65;}
.stat strong {color:#eac69e; font-size:16px; font-weight:700;}
.insight {
  border-color:rgba(197,139,76,.35);
  background:linear-gradient(130deg,rgba(197,139,76,.12),rgba(197,139,76,.025));
}
.insight b {color:#eac69e;}
.insight p {font-weight:400; font-size:12px; line-height:1.65;}
.source a {color:#bac7c4; border-color:#bac7c466;}
.nav-btns button {background:#283236;}
.card-close {background:#24292ce8;}
.modal {background:#20272a; border-color:var(--gold);}
.modal-backdrop {background:#0c1214e8;}
.modal h2 {font-weight:700; letter-spacing:-.03em;}
.event-list button.chosen {background:#344045; color:#f0c28d;}
.field input,.field select,.field textarea {background:#151d20; border-color:#536064;}
.field label {color:#e1c2a2;}
.hint {color:#aab9b7!important;}
.nh-dot::before {border-color:#eee4d5;}
@media(max-width:720px) {
  .event-title {font-size:28px;}
  .card-desc {font-size:13px;}
  .brand-name {letter-spacing:.035em;}
}

/* Naturally Hazardous network links — compact header and About section */
.social-header-link {
 display:inline-flex;align-items:center;justify-content:center;gap:6px;
 padding:9px 12px;border:1px solid rgba(197,139,76,.55);
 border-radius:10px;color:#e7e1d7;text-decoration:none;
 background:rgba(197,139,76,.07);font:500 12px 'IBM Plex Sans',sans-serif;
 white-space:nowrap;
}
.social-header-link:hover,.about-social-links a:hover {background:rgba(197,139,76,.17);}
.social-header-link:focus-visible,.about-social-links a:focus-visible {outline:2px solid #c58b4c;outline-offset:2px;}
.about-social {margin-top:22px;padding-top:15px;border-top:1px solid rgba(231,225,215,.17);}
.about-social h3 {font:700 12px 'IBM Plex Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#e7e1d7;margin:0 0 12px;}
.about-social-links {display:flex;gap:9px;flex-wrap:wrap;}
.about-social-links a {display:inline-flex;padding:9px 13px;border:1px solid rgba(197,139,76,.48);border-radius:9px;color:#eac69e;text-decoration:none;font-size:13px;background:rgba(197,139,76,.06);}
[hidden],.social-header-link[hidden],.about-social-links a[hidden],.about-social[hidden] {display:none!important;}
@media(max-width:720px) {
 .social-header-link {padding:7px 9px;font-size:11px;}
 .social-header-link span {display:none;}
}