/* Interactive heroes for /courses/ and /recruiting/. Additive: lives inside .harper-hero, touches nothing else. */
.hx{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr);gap:22px;margin-top:14px;align-items:start}.hx>div{min-width:0}
.hx-vis{background:#fff;border:1px solid #e3ded8;border-radius:4px;padding:10px;position:relative}
.hx-vis svg{width:100%;height:auto;display:block}
.hx-panel{background:#fff;border:1px solid #e3ded8;border-radius:4px;padding:16px 18px;font:14px/1.55 system-ui;color:#262626;display:flex;flex-direction:column;}
.hx-panel h3{font:400 22px/1.15 Georgia,serif;color:#800000;margin:0 0 4px}
.hx-panel .hx-meta{font:600 11px/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:#68605b;margin:0 0 10px}
.hx-panel p{margin:0 0 8px}
.hx-panel ul{margin:0 0 10px;padding-left:18px;color:#4a4542}
.hx-panel li{margin:2px 0}
.hx-panel .hx-hint{font-size:12.5px;color:#68605b;margin-top:auto;padding-top:8px}
.hx-panel a.hx-go{display:inline-block;margin-top:auto;align-self:flex-start;font:600 13px system-ui;color:#800000;text-decoration:none;border-bottom:1.5px solid #800000;padding-bottom:2px}
.hx-panel a.hx-go:hover{background:#f3eee5}
.hx-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.hx-pills button{font:12.5px system-ui;background:#fff;border:1px solid #d9d2c6;border-radius:999px;padding:6px 12px;color:#4a4542;cursor:pointer}
.hx-pills button[aria-pressed=true]{background:#800000;border-color:#800000;color:#fff}
/* nodes and dots */
.hx-node{cursor:pointer;transition:opacity .18s}
.hx-node rect:not([fill]){fill:#e9d9d1;transition:fill .15s}.hx-node text{font:600 10.5px system-ui;fill:#262626}.hx-node .hx-count{font:500 10px ui-monospace,Menlo,monospace;fill:#68605b}.hx-node.on rect:not([fill]){fill:#800000}.hx-node.near rect:not([fill]){fill:#b8867a}.hx-node.on text,.hx-node.near text{fill:#800000}.hx-node.on .hx-count,.hx-node.near .hx-count{fill:#800000;font-weight:600}
.hx-node:hover rect:not([fill]),.hx-node:focus rect:not([fill]){fill:#800000}.hx-node:hover text,.hx-node:focus text{fill:#800000}
.hx-node:focus{outline:none}
.hx-edge{stroke:#c9b8ad;stroke-linecap:round;transition:stroke .15s,opacity .18s}
.hx-edge.on{stroke:#800000}
.hx-dim{opacity:.22}
.hx-tick text{font:600 10px system-ui;fill:#68605b;letter-spacing:.08em}
.hx-tick line{stroke:#d9d2c6}
.hx-dot{cursor:pointer}
.hx-dot circle{fill:#fff;stroke:#800000;stroke-width:1.5;transition:r .12s,fill .12s}
.hx-dot.past circle{stroke:#b9aea4}
.hx-dot:hover circle,.hx-dot:focus circle,.hx-dot.on circle{fill:#800000}
.hx-dot.past:hover circle,.hx-dot.past.on circle{fill:#b9aea4}
.hx-dot:focus{outline:none}
.hx-today line{stroke:#800000;stroke-dasharray:3 3}
.hx-today text{font:600 10px system-ui;fill:#800000;letter-spacing:.1em}
@media(max-width:760px){.hx{grid-template-columns:1fr;gap:12px}.hx-vis{overflow-x:auto}.hx-vis svg{min-width:560px}.hx-vis.hx-bars svg{min-width:0}}
@media(prefers-reduced-motion:reduce){.hx *{transition:none!important}}