:root {
  --bg:#FAF8F5; --text:#1A1A1A; --cobalt:#1E3A6E; --warm:#C4A882;
  --critical:#8B2020; --positive:#2d7a3a;
  --border:rgba(26,26,26,0.12); --border-hair:rgba(26,26,26,0.2);
  --ghost:rgba(26,26,26,0.06); --low:rgba(26,26,26,0.5);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }

.running-header {
  position:fixed; top:0; left:0; right:0; height:40px;
  background:#0a0a0a; color:rgba(255,255,255,0.6);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2rem; z-index:1000;
  font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:0.12em;
}
.rh-left, .rh-right { display:flex; align-items:center; gap:1.2rem; }
.rh-left .rh-brand { color:var(--warm); font-weight:700; }
.rh-left .rh-sep { color:rgba(255,255,255,0.2); }
.rh-right a { color:var(--warm); text-decoration:none; }
.rh-right a:hover { opacity:0.7; }

.back-nav {
  position:sticky; top:40px; z-index:90;
  background:rgba(250,248,245,0.95); backdrop-filter:blur(8px);
  border-bottom:0.5px solid var(--border); padding:0.6rem 2rem;
  display:flex; gap:1.5rem; align-items:center;
}
.back-nav a {
  font-size:11px; font-weight:500; color:var(--cobalt);
  text-decoration:none; text-transform:uppercase; letter-spacing:0.08em;
}
.back-nav a:hover { color:var(--text); }
.nav-sep { color:var(--low); }

.page { max-width:1240px; margin:0 auto; padding:2rem; }

.vp-hero { padding:3rem 0 2rem; border-bottom:0.5px solid var(--border-hair); margin-bottom:2.5rem; position:relative; }
.vp-eyebrow {
  display:flex; align-items:center; gap:0.8rem;
  font-size:10px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--cobalt); margin-bottom:1rem;
}
.vp-eyebrow::before { content:''; width:32px; height:2px; background:var(--cobalt); }
.vp-headline {
  font-family:'Playfair Display',serif; font-weight:700;
  font-size:clamp(36px, 5vw, 56px); line-height:1.1; letter-spacing:-0.02em;
  margin-bottom:0.8rem;
}
.vp-subtitle {
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:18px; line-height:1.5; color:rgba(26,26,26,0.7); max-width:780px;
}

.viz-container {
  background:white; border:0.5px solid var(--border);
  padding:1.5rem; margin-bottom:2rem; min-height:600px;
}

.legend {
  display:flex; flex-wrap:wrap; gap:1rem; margin:1.5rem 0;
  padding:1rem 0; border-top:0.5px solid var(--border);
  border-bottom:0.5px solid var(--border);
}
.legend-item {
  display:flex; align-items:center; gap:0.5rem;
  font-size:11px; font-weight:500;
}
.legend-swatch {
  width:14px; height:14px; border-radius:50%;
  border:1.5px solid white; box-shadow:0 0 0 0.5px var(--border);
}

.panel {
  background:white; border:0.5px solid var(--border);
  padding:1.8rem; margin-bottom:1.5rem;
}
.panel-label {
  font-size:10px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--cobalt); margin-bottom:0.8rem;
}
.panel-title {
  font-family:'Playfair Display',serif; font-weight:700;
  font-size:20px; line-height:1.3; margin-bottom:1rem;
}
.panel p { font-size:13px; line-height:1.65; color:var(--text); margin-bottom:0.8rem; }

.tooltip {
  position:absolute; pointer-events:none;
  background:#0a0a0a; color:#fff; padding:0.5rem 0.7rem;
  font-size:11px; font-weight:500; line-height:1.4;
  border-radius:3px; opacity:0; transition:opacity 0.15s;
  max-width:240px; z-index:200;
}
.tooltip.visible { opacity:0.95; }
.tooltip .tip-title { font-weight:700; margin-bottom:0.2rem; color:var(--warm); }

.footer {
  margin-top:4rem; padding:2rem; background:var(--text); color:white;
  font-size:11px; line-height:1.6;
}
.footer-inner { max-width:1240px; margin:0 auto; display:flex; justify-content:space-between; }
.footer a { color:var(--warm); text-decoration:none; }
.footer a:hover { text-decoration:underline; }