:root{
    --paper:#FFFBF3; --paper-2:#FFF4D9; --ink:#2C2A4A; --ink-soft:#5f5c7d;
    --marigold:#F6B93B; --marigold-d:#d99a1e; --brick:#EF6351; --slate:#3B8EC4;
    --chalk:#ffffff; --board:#2C2A4A; --line:#ece4d6;
    --maxw:1140px; --r:12px; --shadow:0 10px 30px -14px rgba(44,42,74,.32);
  }
  *{ box-sizing:border-box; }
:focus-visible{ outline:3px solid var(--marigold); outline-offset:2px; border-radius:2px; }

.hero{ padding:44px 0 10px; }
.eyebrow{ font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:12.5px; color:var(--brick); display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--marigold); display:inline-block; }
h1{ font-size:clamp(32px,5vw,50px); margin:0 0 .3em; }
.hero p{ color:var(--ink-soft); max-width:62ch; font-size:18px; }
.disclaim{ background:#fbf3df; border:1px solid var(--marigold); border-left-width:5px; border-radius:6px;
    padding:14px 18px; margin:20px 0 6px; font-size:14.5px; color:#5a4410; }
.disclaim b{ color:#3a2c07; }
.layout{ display:grid; grid-template-columns:1.35fr .9fr; gap:26px; padding:14px 0 40px; align-items:start; }
@media (max-width:900px){ .layout{ grid-template-columns:1fr; } }
.mapbox{ background:#fbfaf3; border:1px solid var(--line); border-radius:8px; padding:14px; box-shadow:var(--shadow); }
#map{ width:100%; height:auto; display:block; }
#map path{ stroke:#fbfaf3; stroke-width:.7; cursor:pointer; transition:filter .15s, opacity .15s; outline:none; }
#map path:hover{ filter:brightness(1.08) saturate(1.1); }
#map path.sel{ stroke:var(--ink); stroke-width:2; fill:#F6B93B; }
.maploading{ font-size:14px; color:var(--ink-soft); padding:20px; text-align:center; }
.grid-title{ font-family:"Nunito"; font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); margin:18px 4px 8px; }
.state-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:6px; }
.state-grid button{ font-family:"Nunito"; font-weight:700; font-size:13px; color:var(--ink); background:var(--paper);
    border:1px solid var(--line); border-radius:var(--r); padding:8px 4px; cursor:pointer; }
.state-grid button:hover{ background:var(--paper-2); }
.state-grid button[aria-pressed="true"]{ background:var(--ink); color:var(--chalk); border-color:var(--ink); }

  /* detail panel */
  .panel{ position:sticky; top:80px; background:var(--board); color:var(--chalk); border-radius:10px; padding:26px 24px 24px; box-shadow:var(--shadow); }
.panel .placeholder{ color:#9fb0a2; font-family:"Kalam"; font-size:19px; line-height:1.4; }
.panel h2{ color:var(--chalk); font-size:30px; margin:0 0 4px; }
.panel .desc{ font-size:15px; color:#cdd6ce; margin:0 0 20px; }
.panel .links{ display:flex; flex-direction:column; gap:10px; }
.panel .links a{ display:flex; align-items:center; justify-content:space-between; gap:10px; text-decoration:none;
    background:rgba(255,255,255,.05); border:1px solid rgba(237,233,219,.18); border-radius:6px; padding:13px 15px;
    color:var(--chalk); font-weight:600; font-size:15px; }
.panel .links a:hover{ background:rgba(224,163,46,.16); border-color:var(--marigold); color:#fff; }
.panel .links a small{ display:block; font-weight:400; font-size:12.5px; color:#a9b8ab; margin-top:2px; }
.panel .links a .arw{ color:var(--marigold); font-weight:700; flex:0 0 auto; }
.panel .foot{ margin-top:18px; font-size:12px; color:#8ea08f; border-top:1px solid rgba(237,233,219,.14); padding-top:12px; }