/* Economic Atlas — shared styles */
:root{
  --paper:#F5F6F3; --panel:#FFFFFF; --ink:#171B1E; --ink2:#5A6167;
  --hair:#E4E6E1;
  /* wireframe blues */
  --navy:#1E4566; --navy-2:#27567F; --blue:#4796CE;
  /* seaborn mako stops (dark -> light) */
  --mako-1:#2E1E3B; --mako-2:#413D7B; --mako-3:#37659E;
  --mako-4:#348FA7; --mako-5:#40B7AD; --mako-6:#8AD9B1; --mako-7:#DEF5E5;
}
*{box-sizing:border-box; margin:0;}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Avenir Next","Avenir","Nunito Sans",system-ui,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px;}

/* ------------------------------ navigation ------------------------------ */
nav.top{background:var(--navy);}
nav.top .wrap, nav.sub .wrap{display:flex; align-items:stretch; gap:4px;}
nav .brand{
  color:#fff; font-weight:600; font-size:17px; letter-spacing:.02em;
  padding:14px 18px 14px 0; margin-right:10px; text-decoration:none;
  display:flex; align-items:center; gap:9px;
}
nav .brand .globe{width:9px;height:9px;border-radius:50%;
  background:var(--mako-5); box-shadow:0 0 0 3px rgba(64,183,173,.25);}
nav.top a.item{
  color:#D8E4EF; text-decoration:none; font-weight:600; font-size:15px;
  padding:14px 22px; display:flex; align-items:center;
}
nav.top a.item:hover{background:var(--navy-2); color:#fff;}
nav.top a.item.active{background:var(--navy-2); color:#fff;}
nav.sub{background:var(--blue);}
nav.sub a.item{
  color:#F2F8FD; text-decoration:none; font-weight:600; font-size:14.5px;
  padding:10px 22px; display:flex; align-items:center;
}
nav.sub a.item:hover, nav.sub a.item.active{background:rgba(255,255,255,.18); color:#fff;}

/* -------------------------------- headers ------------------------------- */
header.page{padding:44px 0 6px;}
.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink2); display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--mako-4);}
h1{font-weight:600; font-size:clamp(30px,4.6vw,44px); line-height:1.08;
   letter-spacing:-.01em; margin:12px 0 8px;}
.subline{color:var(--ink2); font-size:15px;}
.badge{display:none; margin-left:8px; padding:3px 10px; border-radius:999px;
  background:#F3E8D8; color:#7A5518; font-size:12px; font-weight:600;}
.badge.show{display:inline-block;}

/* --------------------------------- tiles -------------------------------- */
.hero{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:1px; background:var(--hair); border:1px solid var(--hair);
  border-radius:14px; overflow:hidden; margin:30px 0 40px;}
.stat{background:var(--panel); padding:20px 22px 18px; min-height:132px;}
.stat .label{font-size:12px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink2);}
.stat .figure{font-weight:600; font-size:clamp(32px,3.4vw,40px);
  line-height:1.15; margin:7px 0 5px; font-variant-numeric:tabular-nums;}
.stat .delta{font-size:13.5px; font-weight:600;}
.stat .delta .arrow{font-size:11px;}
.stat .period{font-size:12.5px; color:var(--ink2); margin-top:2px;}
.delta.good{color:#1E7B54;} .delta.bad{color:#B0432E;} .delta.flat{color:var(--ink2);}
.stat.pending .figure{color:#C4C8C3;}
.stat.pending .period{color:#A8ACA7; font-style:italic;}

/* --------------------------------- panels ------------------------------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr)); gap:22px;}
.panel{background:var(--panel); border:1px solid var(--hair);
  border-radius:14px; padding:22px 24px 18px;}
.panel h2{font-size:13px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink);}
.panel .range{font-size:12.5px; color:var(--ink2); margin:2px 0 14px;}
.chartbox{position:relative; height:250px;}
.panel .src{font-size:12px; color:var(--ink2); margin-top:12px;}

/* ------------------------------ placeholders ---------------------------- */
.shell{
  border:1.5px dashed #C9CEC8; border-radius:14px; background:rgba(255,255,255,.55);
  padding:64px 32px; text-align:center; margin:34px 0 60px;
}
.shell h2{font-size:20px; font-weight:600; margin-bottom:8px;}
.shell p{color:var(--ink2); max-width:520px; margin:0 auto 20px;}
.btn{
  display:inline-block; background:var(--blue); color:#fff; text-decoration:none;
  font-weight:600; font-size:14.5px; padding:10px 22px; border-radius:8px;
}
.btn:hover{background:var(--navy-2);}
.btn.ghost{background:transparent; color:var(--navy); border:1.5px solid var(--blue);}
.btn.ghost:hover{background:var(--blue); color:#fff;}

footer{margin:52px 0 60px; padding-top:22px; border-top:1px solid var(--hair);
  font-size:13px; color:var(--ink2);}
footer a{color:var(--navy-2); text-decoration:none;}
footer a:hover{text-decoration:underline;}