/* muser case-study visuals — shared theme (warm cream editorial).
   Every standalone visual links this. Tokens + chart chrome + Observable Plot overrides. */
:root{
  --bg:#f5f1e8; --paper:#ece6d6; --paper2:#f1ece0; --fg:#1a1815; --mut:#7c7569; --faint:#a89f8d;
  --line:#d6cebb; --line2:#cabfa6;
  --per:#b4543f;      /* personal   (warm red accent) */
  --ref:#4a6b8a;      /* reference  (muted blue) */
  --between:#c08a2e;  /* in-between (amber) */
  --ok:#2f7d6b; --warn:#c08a2e; --bad:#b4543f;
  --serif:"Iowan Old Style","Charter",Georgia,serif;
  --mono:"SFMono-Regular",ui-monospace,Menlo,monospace;
  --sans:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.55 var(--serif);-webkit-font-smoothing:antialiased}
.v-wrap{padding:20px 22px}
h1,h2,h3{margin:0}
.v-title{font:italic 400 21px/1.1 var(--serif)}
.v-kick{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--per);margin-bottom:8px}
.v-sub{font-family:var(--sans);font-size:12.5px;color:var(--mut);max-width:64ch;margin:6px 0 14px}
.v-sub b{color:var(--fg)}
.v-note{font-family:var(--sans);font-size:11.5px;color:var(--mut);border-left:3px solid var(--line2);padding-left:11px;margin-top:14px;max-width:70ch}
.v-note b{color:var(--fg)}
code,.mono{font-family:var(--mono);font-size:.86em}
.stat{font-family:var(--mono);font-variant-numeric:tabular-nums}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--line2);border-radius:999px;color:var(--mut)}
.chip .sw{width:8px;height:8px;border-radius:50%}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0 4px;font-family:var(--mono);font-size:11px;color:var(--mut)}
.legend .r{display:flex;align-items:center;gap:6px}.legend .sw{width:10px;height:10px;border-radius:2px}
/* big number callouts */
.kpis{display:flex;gap:26px;flex-wrap:wrap;margin:10px 0 6px}
.kpi{display:flex;flex-direction:column;gap:2px}
.kpi .n{font:600 26px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--fg)}
.kpi .l{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.kpi .n.per{color:var(--per)}.kpi .n.ref{color:var(--ref)}.kpi .n.ok{color:var(--ok)}
/* generic table */
table.v{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:12.5px}
table.v th{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  text-align:left;border-bottom:1px solid var(--fg);padding:5px 8px}
table.v td{padding:5px 8px;border-bottom:1px solid var(--line)}
table.v td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
/* thumbnail grid */
.thumbs{display:grid;gap:6px}
.thumb{position:relative;aspect-ratio:1;background:var(--paper);overflow:hidden;border:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .tag{position:absolute;left:0;bottom:0;font-family:var(--mono);font-size:9px;letter-spacing:.03em;
  padding:1px 5px;background:rgba(0,0,0,.66);color:#fff}
.thumb .tag.per{background:var(--per)}.thumb .tag.ref{background:var(--ref)}.thumb .tag.between{background:var(--between)}
canvas{display:block}
/* Observable Plot: match the editorial theme */
svg[class^="plot-"],.plot-d6a7b5{font-family:var(--sans) !important}
[aria-label="tip"] text{font-family:var(--mono) !important}