:root{
  --cyan:#00AEEF;
  --navy:#17365D;
  --charcoal:#231F20;
  --mid:#6f7377;
  --light:#E6E7E8;
  --white:#FFFFFF;
  --paper:#F6F7F8;
  --shadow:0 6px 18px rgba(23,54,93,.14), 0 1px 3px rgba(23,54,93,.1);
  --radius:20px;
  --header-h:130px;
  --footer-h:38px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--charcoal);font-family:"Source Sans 3",system-ui,sans-serif}
body{min-height:100vh}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:1rem;top:1rem;z-index:1000;background:var(--white);padding:.5rem .75rem;border-radius:.5rem;box-shadow:var(--shadow)}
#app{min-height:100vh;display:flex;flex-direction:column}
.app-header{
  height:var(--header-h);
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:1.1rem 1.4rem 1rem 1.4rem;
  border-bottom:1px solid rgba(35,31,32,.15);
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(8px);
}
.header-copy{min-width:0}
.eyebrow{
  margin:0 0 .15rem 0;
  font:800 1.05rem/1 "Roboto Condensed",sans-serif;
  text-transform:uppercase;letter-spacing:.08em;color:var(--cyan)
}
h1{
  margin:0;
  font:800 clamp(2.2rem,5vw,4rem)/.95 "Roboto Condensed",sans-serif;
  color:var(--navy); letter-spacing:-.02em;
  white-space:nowrap;
}
.icon-button,.zoom-button,.legend-toggle,.dialog-close{border:none;cursor:pointer;background:var(--white);color:var(--navy)}
.menu-button{
  width:56px;height:56px;border-radius:999px;box-shadow:0 0 0 1px rgba(23,54,93,.16), var(--shadow);
  font-size:1.85rem;display:grid;place-items:center;flex:none;margin-top:.25rem
}
.map-main{flex:1;display:flex;min-height:0}
.map-shell{
  position:relative;flex:1;min-height:calc(100vh - var(--header-h) - var(--footer-h));
  background:linear-gradient(180deg, rgba(221,243,248,.14), rgba(230,231,232,.26));
  overflow:hidden;
}
#map{display:block;width:100%;height:100%}
.loading-panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(255,255,255,.9);padding:.85rem 1rem;border-radius:999px;
  box-shadow:var(--shadow);font-weight:600;color:var(--navy);z-index:3
}
.legend{
  position:absolute;left:1.35rem;bottom:1.35rem;z-index:4;
  width:min(360px,calc(100vw - 2.7rem));
  background:rgba(255,255,255,.95); border:1px solid rgba(23,54,93,.16);
  border-top:4px solid var(--cyan); border-radius:18px; box-shadow:var(--shadow);
  overflow:hidden;
}
.legend.collapsed{width:min(360px,calc(100vw - 2.7rem))}
.legend-toggle{
  position:absolute;right:.7rem;top:.55rem;width:44px;height:44px;border-radius:999px;
  border:3px solid rgba(0,174,239,.28);font:700 1.7rem/1 "Roboto Condensed",sans-serif;
  background:rgba(255,255,255,.95)
}
.legend-body{padding:.7rem 1rem 1rem 1rem}
.legend.collapsed .legend-body{padding:.7rem 1rem .85rem 1rem}
.legend.collapsed .legend-size-wrap,.legend.collapsed .legend-zoom-note,.legend.collapsed .legend-note{display:none}
.legend-kicker{margin:0;color:var(--cyan);font:800 .95rem/1 "Roboto Condensed",sans-serif;text-transform:uppercase;letter-spacing:.08em}
#legend-title{margin:.15rem 0 .55rem 0;color:var(--navy);font:800 1.95rem/1 "Roboto Condensed",sans-serif}
.legend-size-wrap{margin:0 0 .45rem}
.legend-size-svg{width:100%;height:auto;display:block}
.legend-label{font:700 .82rem/1.15 "Source Sans 3",sans-serif;fill:var(--mid);text-anchor:middle}
.legend-circle{fill:transparent;stroke:var(--navy);stroke-width:2}
.legend-zoom-note{margin:.3rem 0 .45rem;color:var(--mid);font-size:.88rem;line-height:1.2}
.legend-note{margin:.4rem 0 0;font-size:.95rem;line-height:1.28;color:var(--charcoal)}
.zoom-controls{
  position:absolute;right:1.35rem;bottom:1.35rem;z-index:4;
  display:flex;flex-direction:column;gap:.7rem
}
.zoom-button{
  width:56px;height:56px;border-radius:10px;box-shadow:0 0 0 1px rgba(23,54,93,.14), var(--shadow);
  font:700 2rem/1 "Roboto Condensed",sans-serif
}
#home-button{font-size:1.85rem}
.app-footer{
  height:var(--footer-h);
  border-top:1px solid rgba(35,31,32,.12); background:rgba(255,255,255,.78);
  display:flex;align-items:center;justify-content:center; padding:.35rem 1rem
}
.footer-desktop,.footer-mobile{margin:0;color:var(--mid);font-size:.95rem}
.footer-desktop{display:flex;gap:1.15rem;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.footer-mobile{display:none;text-align:center}
.node .halo{fill:rgba(255,255,255,.88);stroke:rgba(23,54,93,.18);stroke-width:1.5}
.node image{pointer-events:none}
.node .hit{fill:transparent}
.node{cursor:pointer}
.node:focus-visible .halo{stroke:var(--cyan);stroke-width:3}
.node:hover .halo{stroke:rgba(0,174,239,.45)}

.country-dialog,.menu-dialog{
  border:none;padding:0;background:transparent;max-width:none;max-height:none
}
.country-dialog::backdrop,.menu-dialog::backdrop{background:rgba(23,54,93,.35);backdrop-filter:blur(4px)}
.dialog-panel,.menu-panel{
  position:relative;border:none;background:var(--white);
  border-radius:22px; box-shadow:var(--shadow); overflow:hidden
}
.dialog-panel{
  width:min(720px,calc(100vw - 1rem)); max-height:min(92vh,900px); overflow:auto;
  border-top:6px solid var(--cyan)
}
.menu-panel{
  width:min(700px,calc(100vw - 1rem)); max-height:min(92vh,900px); overflow:auto;
  padding:1.3rem 1.4rem 1.2rem; border-top:6px solid var(--cyan)
}
dialog[open]{display:grid;place-items:center}
.dialog-close{
  position:absolute;right:.8rem;top:.8rem;width:64px;height:64px;border-radius:999px;
  background:rgba(230,231,232,.85);border:4px solid rgba(40,92,194,.04);
  box-shadow:0 0 0 2px rgba(39,89,186,.95) inset;
  font:800 2.3rem/1 "Roboto Condensed",sans-serif;z-index:2
}
#country-dialog-content{padding:1rem 1rem 1.25rem}
.popup-hero{display:grid;grid-template-columns:120px 1fr;gap:1rem;align-items:start;padding-right:4.6rem}
.popup-symbol{width:102px;height:102px;border-radius:999px;background:rgba(0,174,239,.12);display:grid;place-items:center}
.popup-symbol img{width:78px;height:78px;object-fit:contain}
.popup-kicker{margin:0;color:#4fa3e4;font:800 1rem/1 "Roboto Condensed",sans-serif;text-transform:uppercase;letter-spacing:.1em}
.popup-title{margin:.1rem 0 .15rem;color:var(--navy);font:800 clamp(2.3rem,4.2vw,4rem)/.92 "Roboto Condensed",sans-serif}
.popup-population{margin:0;color:#4fa3e4;font:800 clamp(1.4rem,3vw,2.6rem)/1 "Roboto Condensed",sans-serif}
.popup-reason{margin:1rem 0 1.2rem;color:var(--charcoal);font:600 clamp(1.12rem,2.3vw,1.45rem)/1.38 "Source Serif 4",serif}
.popup-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin-bottom:1.05rem}
.meta-card{background:rgba(230,231,232,.55);border-radius:16px;padding:.8rem .9rem .9rem}
.meta-label{margin:0 0 .25rem;color:var(--mid);font:800 .96rem/1 "Roboto Condensed",sans-serif;letter-spacing:.08em;text-transform:uppercase}
.meta-value{margin:0;color:var(--charcoal);font:700 1.15rem/1.2 "Source Sans 3",sans-serif;word-break:break-word}
.renditions-title{margin:.1rem 0 .65rem;color:var(--navy);font:800 1.15rem/1 "Roboto Condensed",sans-serif;letter-spacing:.06em;text-transform:uppercase}
.renditions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.rendition-card{border:1px solid rgba(23,54,93,.15);border-radius:16px;padding:.9rem .7rem;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.55rem;min-height:148px}
.rendition-card img{width:64px;height:64px;object-fit:contain}
.rendition-card p{margin:0;color:var(--charcoal);font-size:.98rem;font-weight:600;text-align:center}

.menu-panel h2{margin:.1rem 0 1rem;color:var(--navy);font:800 clamp(2.6rem,5vw,4.2rem)/.95 "Roboto Condensed",sans-serif}
.menu-section h3{
  margin:0 0 .6rem;color:var(--navy);font:800 clamp(1.5rem,3vw,2.2rem)/1 "Roboto Condensed",sans-serif;
  text-transform:uppercase;letter-spacing:.06em
}
.menu-section p{margin:.85rem 0 0}
.menu-section p a{font:700 clamp(1.55rem,3vw,2.2rem)/1.15 "Source Sans 3",sans-serif}
.menu-divider{height:1px;background:rgba(35,31,32,.09);margin:1.25rem 0 1.05rem}

@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px){
  .footer-desktop{display:none}
  .footer-mobile{display:block}
}

@media (max-width: 760px){
  :root{--header-h:110px;--footer-h:40px}
  .app-header{padding:1rem 1rem .85rem}
  .eyebrow{font-size:.92rem}
  h1{font-size:2.7rem}
  .menu-button{width:52px;height:52px;font-size:1.7rem}
  .legend{left:.8rem;bottom:.8rem;width:min(358px,calc(100vw - 1.6rem))}
  .zoom-controls{right:.8rem;bottom:.8rem}
  .zoom-button{width:52px;height:52px}
  .dialog-close{width:58px;height:58px;font-size:2.1rem}
  #country-dialog-content{padding:.85rem .85rem 1.05rem}
  .popup-hero{grid-template-columns:84px 1fr;gap:.8rem;padding-right:3.7rem}
  .popup-symbol{width:74px;height:74px}
  .popup-symbol img{width:58px;height:58px}
  .popup-title{font-size:3rem}
  .popup-population{font-size:2.25rem}
  .popup-meta{gap:.75rem}
  .renditions-grid{gap:.6rem}
  .menu-panel{padding:1rem 1.15rem 1rem}
}

@media (max-width: 640px){
  .popup-meta{grid-template-columns:1fr 1fr}
  .renditions-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rendition-card{border:none;background:transparent;border-radius:0;min-height:unset;padding:.1rem;box-shadow:none}
  .menu-panel h2{font-size:3rem}
  .menu-section h3{font-size:1.45rem}
  .menu-section p a{font-size:1.08rem}
  .menu-divider{margin:.9rem 0 .8rem}
}

@media (max-width: 540px){
  :root{--header-h:100px}
  .app-header{padding:.85rem .85rem .8rem}
  h1{font-size:2.35rem}
  .map-shell{min-height:calc(100vh - var(--header-h) - var(--footer-h))}
  .legend{left:.65rem;bottom:.65rem}
  .zoom-controls{right:.65rem;bottom:.65rem}
  .popup-hero{grid-template-columns:66px 1fr;gap:.65rem;padding-right:3.4rem}
  .popup-symbol{width:60px;height:60px}
  .popup-symbol img{width:48px;height:48px}
  .popup-kicker{font-size:.86rem}
  .popup-title{font-size:2.2rem}
  .popup-population{font-size:1.78rem}
  .popup-reason{font-size:1.15rem;line-height:1.34}
  .meta-label{font-size:.85rem}
  .meta-value{font-size:1.02rem}
  .rendition-card img{width:52px;height:52px}
  .rendition-card p{font-size:.92rem}
  .menu-panel{width:min(94vw,620px);padding:1rem 1rem .95rem}
  .menu-panel h2{font-size:2.3rem;padding-right:4rem}
  .menu-section h3{font-size:1.18rem}
  .menu-section p{margin:.6rem 0 0}
  .menu-section p a{font-size:.96rem}
  .dialog-close{width:54px;height:54px;font-size:1.9rem}
}

@media (max-width: 420px){
  h1{font-size:2.08rem}
  .legend-body{padding:.65rem .85rem .9rem}
  #legend-title{font-size:1.7rem}
  .legend-note{font-size:.9rem}
  .zoom-button{width:50px;height:50px}
}