/* Homepage relationship graph (#graph in index.html / index-bento.html) — 2.5D layered parallax, drawn by assets/graph-layers.js.
   Frameless: the canvas sits straight on the section's blue; its edges are masked so bokeh never shows a hard box. */
.gr-figure { margin: 0; min-width: 0; }
.gr-stage { position: relative; height: clamp(380px, 35vw, 500px); touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.gr-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent); mask-composite: intersect; }
.gr-fallback { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; color: var(--ice-2); font-size: 15px; }
.gr-stage.is-live .gr-fallback { display: none; }

/* role · city pills, positioned every frame by graph-layers.js */
.gr-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gr-pill { position: absolute; left: 0; top: 0; opacity: 0; background: #fff; color: var(--ink); border-radius: 10px; padding: 5px 10px 6px; line-height: 1.2; white-space: nowrap; will-change: transform, opacity;
  box-shadow: 0 8px 24px rgba(13, 38, 110, .28), 0 1px 2px rgba(13, 38, 110, .2); transition: opacity .25s ease, background-color .3s ease, color .3s ease; }
.gr-pill b { display: block; font: 500 11.5px var(--sans); }
.gr-pill i { display: block; font: 400 10.5px var(--sans); font-style: normal; color: rgba(29, 29, 27, .6); }
.gr-pill.is-target { background: var(--ink); color: #fff; }
.gr-pill.is-target i { color: rgba(255, 255, 255, .7); }
@media (max-width: 599px) { .gr-pill { padding: 4px 8px 5px; } .gr-pill b { font-size: 10.5px; } .gr-pill i { font-size: 9.5px; } }

/* visually hidden, focusable person buttons (keyboard / screen reader); the canvas draws the focus ring */
.gr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* path caption — plain text under the graph */
.gr-caption { margin: 8px 0 0; min-height: 3em; font-size: 14px; line-height: 1.5; color: var(--ice-2); text-align: center; }
.gr-caption b { color: var(--ice); font-weight: 600; }
.gr-caption .t { color: var(--ice-blue); }
@media (max-width: 599px) { .gr-caption { min-height: 4.5em; text-align: left; } }
@media (prefers-reduced-motion: reduce) { .gr-pill { transition: none; } }

/* pill reason line: why this person is reachable */
.gr-pill em { display: block; margin-top: 3px; font: 500 10.5px var(--sans); font-style: normal; color: var(--royal); }
.gr-pill em:empty { display: none; }
.gr-pill.is-target em { color: var(--ice-blue); }
@media (max-width: 599px) { .gr-pill em { font-size: 9.5px; } }

/* four things you can do — a tidy row under the heading (Poppins) */
.gr-points { list-style: none; margin: clamp(4px, 1vw, 12px) 0 clamp(8px, 1.5vw, 20px); padding: 0; display: grid; gap: 0 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .gr-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gr-points { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gr-points li { min-width: 0; padding: 14px 0 16px; border-top: 1px solid rgba(255, 255, 255, .24); font: 400 14px/1.5 var(--sans); color: var(--ice-2); }
.gr-points b { display: block; margin-bottom: 4px; font: 500 16px/1.3 var(--sans); letter-spacing: -.005em; color: var(--ice); }