:root{
    --paper-1:#f4f7fa; --paper-2:#e7eef5;
    --ink:#15233a; --muted:#5d6d84; --hair:#d3dde8;
    --navy-1:#0b1729; --navy-2:#122744; --land:#243b5c; --land-hl:#31527d;
    --amber:#ffc24b; --amber-hi:#ffdd8a; --amber-deep:#f2a417;
    --panel:#ffffff;
    --shadow:0 24px 60px -28px rgba(18,38,66,.42);
    --font-d:"Fraunces",Georgia,serif;
    --font-u:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0}
  .intl{
    font-family:var(--font-u); color:var(--ink);
   background:var(--blue-pale);
    /* padding:clamp(44px,7vw,104px) clamp(20px,5vw,72px); */
  }
  .intl__wrap{max-width:100%;margin:0 auto}

  /* ---- header ---- */
  .intl__eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
    color:var(--amber-deep);margin:0 0 18px;
  }
  .intl__eyebrow::before{content:"";width:26px;height:1.5px;background:var(--amber-deep);opacity:.8}
  .intl__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px}
  .intl__title{
    font-family:var(--font-d);font-optical-sizing:auto;font-weight:600;
    font-size:clamp(38px,6vw,74px);line-height:.98;letter-spacing:-.015em;margin:0;
    max-width:12ch;
  }
  .intl__title em{font-style:italic;font-weight:500;color:var(--amber-deep)}
  .intl__lead{
    color:var(--muted);font-size:clamp(15px,1.4vw,17.5px);line-height:1.55;
    max-width:40ch;margin:0;
  }
  .intl__count{font-family:var(--font-d);font-weight:600;color:var(--ink)}

  /* ---- stage ---- */
  .stage{
    margin-top:clamp(30px,4.5vw,54px);
    display:flex;flex-direction:column;
    background:var(--panel);
    border:1px solid var(--hair);
    border-radius:22px;
    overflow:hidden;
    box-shadow:var(--shadow);
  }

  /* ---- map panel ---- */
  .map{
    position:relative;
    background:
      radial-gradient(120% 120% at 12% 0%, #ffffff 0%, transparent 60%),
      radial-gradient(150% 130% at 100% 100%, #e3ebf4 0%, transparent 55%),
      linear-gradient(160deg,#fbfdff,#eef3f9);
    min-height:320px;
  }
  .map__frame{padding:clamp(14px,2vw,26px) clamp(10px,1.6vw,22px)}
  .map svg{display:block;width:100%;height:auto;overflow:visible}
  .land{fill:#cdd9e6;stroke:#eef3f9;stroke-width:.5;transition:fill .25s ease}
  .land.hl{fill:#b6c6d8}
  .land.lit{fill:#ffd88a}

  .dot-halo{fill:#e8f7fb;opacity:.22;transition:opacity .3s ease, r .3s ease}
  .dot-core{fill:#23A3C1;stroke:#fff;stroke-width:1;transition:transform .2s cubic-bezier(.34,1.56,.64,1);transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 2px 3px rgba(120,70,0,.35))}
  .dot{cursor:pointer;outline:none}
  .dot:hover .dot-core,.dot.active .dot-core{fill:var(--amber-deep);transform:scale(1.55)}
  .dot:hover .dot-halo,.dot.active .dot-halo{opacity:.5}
  .dot:focus-visible .dot-core{transform:scale(1.55)}
  .dot:focus-visible .ring{opacity:1}
  .ring{fill:none;stroke:var(--amber-deep);stroke-width:1.2;opacity:0;transition:opacity .2s}
  .dot.active .ring{opacity:.9}
  .map.filtering .dot:not(.match){opacity:.12;pointer-events:none}
  .map.filtering .dot.match .dot-core{fill:var(--amber-deep)}

  /* tooltip */
  .tip{
    position:absolute;top:0;left:0;pointer-events:none;z-index:5;
    transform:translate(-50%,-140%);opacity:0;transition:opacity .14s ease;
    background:var(--ink);color:#fff;font-size:13px;font-weight:600;
    padding:6px 12px;border-radius:8px;white-space:nowrap;
    box-shadow:0 12px 26px -8px rgba(21,35,58,.5);
  }
  .tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
    border:5px solid transparent;border-top-color:var(--ink)}
  .tip.on{opacity:1}
  .map__hint{
    position:absolute;left:clamp(16px,2vw,26px);bottom:14px;z-index:4;
    display:flex;align-items:center;gap:8px;
    color:var(--muted);font-size:12.5px;font-weight:500;letter-spacing:.01em;
  }
  .map__hint .pip{width:9px;height:9px;border-radius:50%;background:#23a3c1;
    box-shadow:0 0 8px 1px rgba(255,255,255,.7)}

  /* ---- directory ---- */
  .dir{
    border-top:1px solid var(--hair);
    padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;
  }
  .dir__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
  .dir__label{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .dir__n{font-family:var(--font-d);font-weight:600;font-size:15px;color:var(--ink)}
  .search{position:relative;margin-bottom:14px}
  .search input{
    width:100%;font-family:var(--font-u);font-size:14.5px;color:var(--ink);
    padding:11px 14px 11px 38px;border:1px solid var(--hair);border-radius:11px;
    background:#f7fafc;outline:none;transition:border .18s,box-shadow .18s,background .18s;
  }
  .search input::placeholder{color:#9aa8ba}
  .search input:focus{border-color:var(--amber-deep);background:#fff;box-shadow:0 0 0 3px rgba(242,164,23,.16)}
  .search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#9aa8ba}
  .list{
    list-style:none;margin:0;padding:2px;
    display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:2px 8px;
  }
  .list button{
    width:100%;text-align:left;border:0;background:none;cursor:pointer;
    font-family:var(--font-u);font-size:13.6px;color:#33445c;font-weight:500;
    padding:7px 9px;border-radius:8px;display:flex;align-items:center;gap:9px;
    transition:background .14s,color .14s;
  }
  .list button .bullet{
    flex:none;width:7px;height:7px;border-radius:50%;
    background:#23a3c1;opacity:.55;transition:opacity .14s,transform .14s,box-shadow .14s;
  }
  .list button:hover,.list button.active{background:#fff5e0;color:var(--ink)}
  .list button:hover .bullet,.list button.active .bullet{opacity:1;transform:scale(1.25);box-shadow:0 0 0 3px rgba(255,194,75,.22)}
  .list button:focus-visible{outline:2px solid var(--amber-deep);outline-offset:1px}
  .list .empty{grid-column:1/-1;color:var(--muted);font-size:13.5px;padding:14px 9px}

  @media (max-width:560px){
    .intl__head{gap:18px}
  }
  @media (prefers-reduced-motion:reduce){
    .dot-core,.dot-halo,*{transition:none!important}
    .dot{animation:none!important}
  }

  @media (max-width: 768px) {
    .map {  min-height:auto; padding-bottom: 30px;}
    .map__hint { bottom: 10px;}
    .list {
        grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 576px) {
    .list {
        grid-template-columns: repeat(2, 1fr);
    }
}