/* Visitor geography, integrated into the opening spread. */
.portfolio-home { --wide: 1360px; }
.intro-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; }
.visitor-globe { --visitor-active: #28d85b; --visitor-past: #29466e; --visitor-home: var(--tone-red); min-width: 0; align-self: start; padding: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .visitor-globe { --visitor-past: #53749f; }
}
:root[data-theme='dark'] .visitor-globe { --visitor-past: #53749f; }
:root .terminal-render .visitor-globe { --visitor-past: #53749f; --visitor-home: #b45444; }
.globe-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.globe-heading h2 { font: 400 17px var(--serif); letter-spacing: -.01em; }
.globe-connection { font: 10px var(--sans); color: var(--muted); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.globe-connection::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--rule-strong); }
.visitor-globe[data-state='live'] .globe-connection::before { background: var(--visitor-active); }
.globe-stage { position: relative; width: 100%; aspect-ratio: 1.38; margin-top: 10px; overflow: clip; }
.globe-canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.globe-canvas:active { cursor: grabbing; }
.globe-counter { position: absolute; top: 14px; left: 0; display: flex; flex-direction: column; gap: 3px; pointer-events: none; color: var(--ink); }
.globe-counter strong { font: 400 clamp(28px, 3vw, 42px)/1.1 var(--serif); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.globe-counter span { font: 10px var(--mono); }
.globe-counter small { font: 9px var(--sans); color: var(--muted); }
.globe-tooltip { position: absolute; left: 50%; top: 50%; width: max-content; max-width: 180px; z-index: 2; pointer-events: none; background: var(--paper); padding: 9px 12px; border: 1px solid var(--rule); box-shadow: 0 3px 12px #00000008; transform: translate(-50%, calc(-100% - 12px)); font-size: 11px; line-height: 1.5; }
.globe-tooltip strong { display: block; font-weight: 500; }
.globe-tooltip span { display: block; color: var(--muted); font-size: 10px; }
.globe-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 14px; margin-top: 3px; color: var(--muted); font-size: 10px; }
.globe-toolbar p { margin: 0; }
.globe-toolbar > div { display: flex; align-items: center; gap: 15px; margin-left: auto; }
.globe-speed { --accent: var(--visitor-home); display: inline-flex; align-items: center; gap: 8px; }
.globe-speed input { width: 96px; min-width: 0; height: 24px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.globe-speed input:disabled { opacity: .5; cursor: default; }
.globe-speed output { min-width: 3.5ch; font-variant-numeric: tabular-nums; }
.globe-toolbar button { font-size: 10px; border: 0; padding: 6px 0; background: none; color: var(--muted); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.globe-toolbar button:hover { color: var(--accent); }
.globe-toolbar button:disabled { opacity: .5; cursor: default; text-decoration: none; }
.globe-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 10px; }
.globe-legend li { display: inline-flex; align-items: center; gap: 6px; }
.globe-key { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--visitor-past); flex-shrink: 0; }
.globe-key--active { background: var(--visitor-active); }
.globe-key--home { background: var(--visitor-home); }
.globe-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--rule); font-size: 10px; }
.globe-summary p { margin: 0; color: var(--muted); }
.globe-summary strong { font-weight: 500; color: var(--ink); }
.globe-locations { font-size: 10px; color: var(--muted); margin-top: 10px; }
.globe-locations summary { cursor: pointer; width: fit-content; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
.globe-locations ul { list-style: none; padding: 10px 0 0; margin: 0; max-height: 150px; overflow-y: auto; }
.globe-locations li { display: flex; gap: 16px; justify-content: space-between; padding: 5px 0; }
.globe-locations button { background: none; border: 0; padding: 3px 0; color: var(--body); font-size: 11px; text-align: left; }
.globe-locations button:hover { color: var(--accent); }
.globe-locations button .globe-key { margin-right: 6px; vertical-align: 1px; }
.globe-info { margin-top: 8px; font-size: 10px; color: var(--muted); }
.globe-info a { text-decoration-color: var(--rule); }
.globe-accessible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 980px) { .intro-body { gap: 30px; } }
@media (max-width: 760px) {
  .intro-body { grid-template-columns: 1fr; gap: 32px; }
  .visitor-globe { grid-row: 1; width: min(440px, 100%); margin: 0 auto; }
  .bio { grid-row: 2; }
  .globe-stage { max-height: 290px; }
}
@media (max-width: 540px) {
  .globe-toolbar > .globe-controls { width: 100%; }
  .globe-speed { margin-right: auto; }
  .globe-speed input { width: clamp(70px, 20vw, 96px); }
  .globe-heading h2 { font-size: 16px; }
  .globe-heading { gap: 8px; }
  .globe-stage { aspect-ratio: 1.28; }
  .globe-summary { gap: 10px; font-size: 9px; }
}
@media print { .visitor-globe { display: none; } }