:root{
  --paper:#e9d6a3;
  --paper-deep:#d9bd78;
  --ink:#17130d;
  --ink-soft:#3a2a19;
  --red:#a5281f;
  --red-dark:#64160f;
  --ochre:#c38b26;
  --cream:#f4e6bd;
  --blue:#546a73;
  --muted:#83765e;
  --shadow:rgba(20,13,5,.34);
  --panel:rgba(238,217,164,.94);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.22), transparent 23%),
    linear-gradient(135deg, rgba(0,0,0,.05) 0 25%, transparent 25% 50%, rgba(0,0,0,.035) 50% 75%, transparent 75%),
    var(--paper);
  color:var(--ink);
  font-family: "Arial Narrow", "Roboto Condensed", Impact, Haettenschweiler, sans-serif;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:1000;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 4px),
    radial-gradient(rgba(0,0,0,.15) .55px, transparent .75px);
  background-size:100% 4px, 7px 7px;
  mix-blend-mode:multiply;
  opacity:.5;
}
#app{
  width:min(1440px,100vw);
  margin:0 auto;
  min-height:100vh;
  padding:18px;
}
.poster-header{
  position:relative;
  border:5px solid var(--ink);
  border-bottom:0;
  padding:16px 22px 12px;
  background:linear-gradient(90deg, var(--red-dark), var(--red));
  color:var(--cream);
  box-shadow:0 10px 0 rgba(0,0,0,.11);
  z-index:20;
}
.kicker{
  letter-spacing:.18em;
  font-size:clamp(.75rem,1.6vw,1rem);
  font-weight:900;
  color:#f7d683;
}
h1{
  margin:.02em 0 0;
  font-size:clamp(2.8rem,8.5vw,7.2rem);
  line-height:.82;
  letter-spacing:.025em;
  text-transform:uppercase;
  text-shadow:3px 3px 0 var(--ink);
}
.subtitle{
  margin:7px 0 0;
  font-weight:900;
  font-size:clamp(1.05rem,3vw,2rem);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.map-frame{
  position:relative;
  height:min(68vh,760px);
  min-height:520px;
  border:5px solid var(--ink);
  background:
    linear-gradient(rgba(233,214,163,.82),rgba(233,214,163,.86)),
    radial-gradient(circle at center, rgba(255,255,255,.35), transparent 55%);
  overflow:visible;
  z-index:30;
}
#map{width:100%;height:100%;display:block;cursor:grab;position:relative;z-index:1}
#map:active{cursor:grabbing}
#loading{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:30;background:var(--ink);color:var(--cream);
  padding:12px 18px;border:3px solid var(--red);
  text-transform:uppercase;letter-spacing:.08em;font-weight:900;
}
.graticule{fill:none;stroke:var(--blue);stroke-width:.7;stroke-opacity:.35;pointer-events:none}
.boundary{fill:#d6bf84;stroke:var(--ink);stroke-width:.65;stroke-opacity:.58;vector-effect:non-scaling-stroke}
.sphere{fill:#cfbd8a;stroke:var(--ink);stroke-width:1.4}
.node{stroke:var(--ink);stroke-width:1.45;cursor:pointer;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.22))}
.node.usa{stroke-width:4.5;filter:drop-shadow(4px 5px 0 rgba(0,0,0,.32))}
.node.missing{stroke-dasharray:3 2}
.label{
  font-size:12px;
  font-weight:900;
  paint-order:stroke;
  stroke:var(--cream);
  stroke-width:3px;
  stroke-linejoin:round;
  fill:var(--ink);
  pointer-events:none;
}
.leader{stroke:var(--ink);stroke-width:1.3;stroke-dasharray:4 3;pointer-events:none}
.year-controls{
  position:absolute;left:18px;top:18px;z-index:50;
  display:flex;gap:8px;flex-wrap:wrap;
}
.year-btn{
  appearance:none;border:3px solid var(--ink);background:var(--paper-deep);color:var(--ink);
  padding:9px 15px;font-size:1.05rem;font-weight:900;
  box-shadow:3px 3px 0 var(--ink);cursor:pointer;
}
.year-btn.active,.year-btn:focus-visible{
  background:var(--red);color:var(--cream);outline:0;
}
.evidence-panel{
  position:absolute;right:18px;top:-58px;z-index:90;
  width:min(370px,34vw);max-height:calc(100% - 18px);
  overflow:auto;background:var(--panel);
  border:4px solid var(--ink);box-shadow:7px 7px 0 var(--shadow);
  padding:0;
}
.scorecard-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;border:0;border-bottom:3px solid var(--ink);
  background:var(--ink);color:var(--cream);
  padding:8px 11px;text-align:left;text-transform:uppercase;
  letter-spacing:.035em;font-weight:900;cursor:pointer;
  font-family:"Arial Narrow","Roboto Condensed",Impact,Haettenschweiler,sans-serif;
  font-size:clamp(.95rem,1.45vw,1.18rem);
  white-space:nowrap;
}
.scorecard-caret{font-size:1.25em;line-height:1;color:#f7d683}
.evidence-panel:not(.open) .scorecard-body{display:none}
.evidence-panel:not(.open) .scorecard-caret{transform:rotate(-90deg)}
.scorecard-body{padding:14px 16px;}
.us-stat{
  border:3px solid var(--red-dark);background:#f2dfac;margin:0 0 12px;padding:10px;
}
.stat-label{display:block;font-size:.95rem;text-transform:uppercase;letter-spacing:.08em}
.us-stat strong{display:block;color:var(--red-dark);font-size:2rem;line-height:1;margin:5px 0}
.stat-detail{font-weight:900}
.mini-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini-columns h3{margin:2px 0 6px;font-size:.95rem;text-transform:uppercase;border-bottom:2px solid var(--ink)}
ol{margin:.25rem 0 0 1.25rem;padding:0}
li{margin:.18rem 0;font-size:.86rem;line-height:1.15}
.asterisk{font-size:.74rem;margin:.65rem 0 0;color:var(--ink-soft)}
.legend{
  position:absolute;left:18px;bottom:18px;z-index:40;
  background:var(--panel);border:4px solid var(--ink);box-shadow:5px 5px 0 var(--shadow);
  max-width:320px;
}
#legendToggle{
  display:block;width:100%;border:0;border-bottom:3px solid var(--ink);
  background:var(--ink);color:var(--cream);
  padding:8px 11px;text-align:left;text-transform:uppercase;
  letter-spacing:.08em;font-weight:900;cursor:pointer;
}
.legend-body{padding:10px 12px}
.legend:not(.open) .legend-body{display:none}
.legend p{margin:.25rem 0;font-size:.89rem}
.swatch{display:inline-block;width:18px;height:12px;border:2px solid var(--ink);vertical-align:-1px;margin-right:6px}
.swatch.decline{background:var(--red)}
.swatch.gain{background:var(--ochre)}
.swatch.missing{background:#8c8168}
.circle-demo{display:inline-block;width:20px;height:20px;border-radius:50%;background:var(--ochre);border:2px solid var(--ink);vertical-align:-5px;margin-right:6px}
.ring-demo{display:inline-block;width:22px;height:22px;border-radius:50%;border:4px solid var(--ink);background:var(--red);vertical-align:-6px;margin-right:6px}
.sources-btn{
  position:absolute;right:18px;bottom:18px;z-index:45;
  border:3px solid var(--ink);background:var(--red-dark);color:var(--cream);
  padding:9px 13px;box-shadow:4px 4px 0 var(--ink);font-weight:900;
  text-transform:uppercase;letter-spacing:.04em;cursor:pointer;
}
.tooltip{
  position:absolute;z-index:80;display:none;max-width:280px;
  padding:10px 12px;background:#f7e6b8;border:4px solid var(--ink);
  box-shadow:5px 5px 0 var(--shadow);pointer-events:none;
}
.tooltip h3{margin:0 0 5px;text-transform:uppercase;color:var(--red-dark)}
.tooltip p{margin:.22rem 0;font-size:.92rem}
.poster-footer{
  border:5px solid var(--ink);border-top:0;
  padding:7px 15px;background:#dfc584;font-family:Arial, sans-serif;
  font-size:.82rem;line-height:1.28;
}
.poster-footer p{margin:.2rem 0}
.attribution{font-weight:700}
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:2000;
  display:none;align-items:center;justify-content:center;padding:18px;
}
.modal-backdrop.open{display:flex}
.modal{
  position:relative;max-width:760px;background:#f2dfac;border:5px solid var(--ink);
  box-shadow:10px 10px 0 rgba(0,0,0,.4);padding:22px;font-family:Arial, sans-serif;
}
.modal h2{font-family:"Arial Narrow",Impact,sans-serif;font-size:2rem;margin:0 0 8px;text-transform:uppercase}
.modal-close{
  position:absolute;right:10px;top:8px;border:0;background:var(--red-dark);color:var(--cream);
  font-size:2rem;line-height:1;width:38px;height:38px;cursor:pointer;
}
a{color:var(--red-dark);font-weight:900}
@media (max-width:900px){
  #app{padding:8px}
  .map-frame{height:74vh;min-height:600px}
  .evidence-panel{width:calc(100% - 36px);top:auto;right:18px;bottom:92px;max-height:230px}
  .legend{max-width:calc(100% - 36px)}
  .sources-btn{bottom:18px;right:18px}
  .year-controls{top:12px;left:12px}
  .mini-columns{grid-template-columns:1fr}
}