/* Mapa de autores — Constelación nocturna del tango.
   Editorial atmosphere: 1940s Buenos Aires archive, brass on aged-paper black.
   Performance-conscious: minimal backdrop-filters, no mix-blend, no infinite loops. */

:root {
  /* Period palette — tonal sepia, slightly warmer */
  --p-origen:        #3e2218;
  --p-guardia-nueva: #6a4030;
  --p-edad-de-oro:   #b58862;
  --p-tardio:        #c69771;
  --p-vanguardia:    #8d3d2c;
  --p-contemporaneo: #8a7d74;
  /* Neutral "no data" swatch — desaturated, reads as unknown vs the gold edad-de-oro */
  --p-desconocido:   #5a5048;

  /* Role palette */
  --r-compositor:     #c69771;
  --r-letrista:       #e7dfd5;
  --r-cantor:         #8d3d2c;
  --r-orquesta:       #a87a55;
  --r-instrumentista: #6a4030;
  --r-otros:          #8a7d74;

  /* Scene-specific palette */
  --night:    #07050a;
  --cordovan: #0e0809;
  --oxblood:  #1a0c0c;
  --brass:    #c9974a;
  --brass-2:  #d4a07a;
  --brass-3:  #8b5a2b;
}

/* Body opens up: the graph claims the entire viewport below the sticky header. */
body.page-graph { overflow: hidden; }
body.page-graph .site-main { padding-bottom: 0; }
body.page-graph .site-backdrop { display: none; }
body.page-graph .site-footer { display: none; }
body.page-graph .content-ad-slot { display: none; }

/* Reset the global `button` rule from site.css (min-height: 3rem ≈ 63px,
   padding: 0 1.2rem) so each graph button sizes to its own width/height. */
.graph-scene button { min-height: 0; padding: 0; }

/* ── Scene shell ──────────────────────────────────────────────────── */

.graph-scene {
  position: relative;
  height: calc(100dvh - var(--header-h, 4.2rem));
  min-height: 480px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, #1a0e12 0%, var(--cordovan) 42%, var(--night) 92%);
}

/* Single soft vignette over everything */
.graph-scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 70% at 50% 44%, transparent 42%, rgba(0,0,0,0.55) 100%);
  z-index: 2;
}

/* ── Decorative background: compass rings ─────────────────────────── */

.graph-compass {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.9;
}

/* The cytoscape canvas itself */
#graph-canvas {
  position: absolute; inset: 0;
  z-index: 2;
}

/* ── Editorial titlebar (top center) ──────────────────────────────── */

.graph-titlebar {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 5;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  pointer-events: none;
  text-align: center;
}
.graph-titlebar-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-ui);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--brass-2);
  opacity: 0.78;
}
.graph-titlebar-eyebrow .dash {
  display: inline-block;
  width: 32px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-2) 50%, transparent);
  opacity: 0.7;
}
.graph-counts {
  position: static; transform: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  font-family: "Bodoni Moda", "Times New Roman", serif;
  font-style: italic;
  font-weight: 300;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  text-transform: none;
}

/* ── Floating chrome panels ───────────────────────────────────────── */

.graph-chrome {
  position: absolute; z-index: 5; pointer-events: none;
}
.graph-chrome > * { pointer-events: auto; }

.graph-chrome.tl { top: 28px; left: 28px; width: 260px; }
.graph-chrome.tr { top: 28px; right: 28px; transition: right 460ms cubic-bezier(0.16, 1, 0.3, 1); }
/* Keep the zoom (+/−) controls reachable while the detail panel is open — slide
   them to the left edge of the 400px panel instead of letting it cover them.
   Below 720px the whole graph chrome is hidden (mobile fallback), so the panel is
   always its fixed 400px width when this offset applies. */
.graph-scene:has(#graph-panel.open) .graph-chrome.tr { right: 428px; }
.graph-chrome.bl { bottom: 28px; left: 28px; }
.graph-chrome.br { bottom: 28px; right: 28px; }

/* Zoom buttons — compact stacked +/− card matching the modecard vocabulary */
.graph-zoom {
  display: flex; flex-direction: column;
  background: rgba(10,6,8,0.82);
  border: 1px solid rgba(213,160,122,0.18);
  border-radius: 2px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.42);
  overflow: hidden;
}
.graph-zoom button {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; outline: 0; cursor: pointer;
  font-family: "Bodoni Moda", "Times New Roman", serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 1;
  color: var(--brass-2);
  transition: color 180ms ease, background-color 180ms ease;
}
.graph-zoom button + button {
  border-top: 1px solid rgba(213,160,122,0.16);
}
.graph-zoom button:hover { color: var(--brass); background: rgba(213,160,122,0.06); }
.graph-zoom button:active { background: rgba(213,160,122,0.12); }
.graph-zoom button:focus-visible {
  background: rgba(213,160,122,0.08);
  color: var(--brass);
}

/* Search — full override of site.css input defaults */
.graph-search-box {
  position: relative;
  border-bottom: 1px solid rgba(213,160,122,0.32);
  background: transparent;
  transition: border-color 220ms ease;
}
.graph-search-box::before {
  /* Decorative leading dash */
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 14px; height: 1px;
  background: var(--brass-2);
  opacity: 0.55;
  transition: width 280ms cubic-bezier(0.16,1,0.3,1), opacity 220ms;
}
.graph-search-box:focus-within { border-bottom-color: var(--brass); }
.graph-search-box:focus-within::before {
  width: 22px;
  opacity: 1;
  background: var(--brass);
}
.graph-search-box input[type="text"] {
  /* Hard reset against site.css globals */
  width: 100%;
  min-height: 0;
  height: auto;
  padding: 9px 4px 10px 28px;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  font-family: "Bodoni Moda", "Times New Roman", serif;
  font-style: italic;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--text-main);
  letter-spacing: 0.01em;
  appearance: none;
  -webkit-appearance: none;
  transition: none;
}
.graph-search-box input[type="text"]::placeholder {
  color: var(--text-muted);
  font-style: italic;
  opacity: 0.62;
  letter-spacing: 0.01em;
}
.graph-search-box input[type="text"]:focus {
  /* Override site.css :focus */
  border: 0;
  box-shadow: none;
  outline: 0;
}

#graph-autocomplete {
  margin-top: 6px;
  max-height: 380px; overflow-y: auto;
  background: rgba(10,6,8,0.96);
  border: 1px solid rgba(213,160,122,0.18);
  border-radius: 2px;
  display: none;
  box-shadow: 0 18px 42px rgba(0,0,0,0.55);
}
#graph-autocomplete.open { display: block; }
.graph-ac-item {
  position: relative;
  padding: 11px 16px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(213,160,122,0.08);
  cursor: pointer;
  transition: background-color 140ms ease;
}
.graph-ac-item::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 0; height: 1px; background: var(--brass);
  transition: width 240ms cubic-bezier(0.16,1,0.3,1);
}
.graph-ac-item:last-child { border-bottom: 0; }
.graph-ac-item:hover, .graph-ac-item.focused {
  background: rgba(213,160,122,0.05);
}
.graph-ac-item:hover::before, .graph-ac-item.focused::before { width: 14px; }
.graph-ac-item .ac-name {
  font-family: "Bodoni Moda", serif; font-style: italic;
  color: var(--text-main); font-size: 14px; line-height: 1.2;
  padding-left: 18px;
}
.graph-ac-item .ac-meta {
  font-family: var(--font-ui);
  font-size: 8.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--brass-2);
  opacity: 0.7;
}

/* Mode card — tabs on top, legend list below, unified card */
.graph-modecard {
  background: rgba(10,6,8,0.82);
  border: 1px solid rgba(213,160,122,0.18);
  border-radius: 2px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.42);
  min-width: 220px;
  position: relative;
  overflow: hidden;
}
.graph-modecard::before {
  content: "✦";
  position: absolute; top: 8px; right: 10px;
  font-size: 8px; color: var(--brass-2); opacity: 0.5;
  pointer-events: none;
  z-index: 2;
}

/* Tabs row (top of the card) */
.graph-modecard .graph-toggle {
  display: flex; gap: 0;
  background: transparent;
  border: 0;
  padding: 0;
  border-bottom: 1px solid rgba(213,160,122,0.16);
}
.graph-modecard .graph-toggle button {
  position: relative;
  flex: 1;
  background: transparent; border: 0; outline: 0; cursor: pointer;
  padding: 12px 16px 13px;
  font-family: var(--font-ui); font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--text-muted);
  transition: color 220ms ease, background-color 220ms ease;
}
.graph-modecard .graph-toggle button::after {
  content: ""; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%);
  width: 0; height: 1px; background: var(--brass);
  transition: width 280ms cubic-bezier(0.16,1,0.3,1);
}
.graph-modecard .graph-toggle button:hover { color: var(--text-soft); }
.graph-modecard .graph-toggle button.active {
  color: var(--brass-2);
  background: rgba(213,160,122,0.04);
}
.graph-modecard .graph-toggle button.active::after { width: calc(100% - 28px); }

/* Density picker (bottom of the card, mirrors the mode tabs above the legend) */
.graph-modecard .graph-toggle-density {
  border-bottom: 0;
  border-top: 1px solid rgba(213,160,122,0.16);
}
.graph-modecard .graph-toggle-density button {
  padding: 10px 8px 11px;
  font-size: 8.5px;
  letter-spacing: 0.22em;
}
.graph-modecard .graph-toggle-density button.active::after {
  bottom: auto; top: -1px;
}

/* Legend list (bottom of the card) */
.graph-modecard .graph-legend {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 13px 18px 14px;
  box-shadow: none;
  min-width: 0;
  position: relative;
}
/* The toggle now indicates the mode — title becomes redundant */
.graph-modecard .graph-legend .graph-legend-title { display: none; }

.graph-legend-row {
  display: flex; align-items: center; gap: 11px;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 12.5px;
  padding: 3px 0;
  color: var(--text-soft);
  cursor: pointer;
  user-select: none;
  transition: color 180ms ease, opacity 180ms ease;
  outline: none;
}
.graph-legend-row:hover { color: var(--brass-2); }
.graph-legend-row:focus-visible { color: var(--brass-2); }
.graph-legend-row.disabled {
  color: var(--text-muted);
  opacity: 0.42;
  text-decoration: line-through;
  text-decoration-color: rgba(213,160,122,0.35);
  text-decoration-thickness: 1px;
}
.graph-legend-swatch {
  width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(213,160,122,0.30);
  transition: background-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}
.graph-legend-row.disabled .graph-legend-swatch {
  background: transparent !important;
  box-shadow: 0 0 0 1px rgba(213,160,122,0.22) inset;
}

/* Tooltip */
#graph-tooltip {
  position: absolute; z-index: 6;
  background: rgba(10,6,8,0.96);
  border: 1px solid rgba(213,160,122,0.20);
  border-radius: 2px;
  padding: 9px 13px 10px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.55);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 12px));
  transition: opacity 140ms ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
}
#graph-tooltip.visible { opacity: 1; }
#graph-tooltip .tt-avatar {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(213,160,122,0.10);
  box-shadow: 0 0 0 1px rgba(213,160,122,0.30);
}
#graph-tooltip .tt-avatar.empty { display: none; }
#graph-tooltip .tt-name {
  font-family: "Bodoni Moda", serif; font-style: italic;
  font-size: 14px; color: var(--text-main); line-height: 1.05;
}
#graph-tooltip .tt-meta {
  font-family: var(--font-ui); font-size: 8.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass-2);
  margin-top: 4px;
  opacity: 0.78;
}

/* ── Side panel ───────────────────────────────────────────────────── */

#graph-panel {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 6;
  width: 400px; max-width: 92vw;
  background: rgba(10,7,8,0.97);
  border-left: 1px solid rgba(213,160,122,0.18);
  transform: translateX(105%);
  transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; flex-direction: column;
  box-shadow: -28px 0 64px rgba(0,0,0,0.55);
}
#graph-panel::before {
  content: ""; position: absolute; top: 14px; left: 14px; bottom: 14px; right: 14px;
  border: 1px solid rgba(213,160,122,0.08);
  pointer-events: none;
}
#graph-panel.open { transform: translateX(0); }

.graph-panel-close {
  position: absolute; top: 24px; right: 24px;
  width: 30px; height: 30px; border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(213,160,122,0.22);
  color: var(--brass-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: "Bodoni Moda", serif; font-size: 18px; line-height: 0;
  transition: background-color 200ms, border-color 200ms, color 200ms;
  z-index: 2;
}
.graph-panel-close:hover {
  background: rgba(213,160,122,0.10);
  border-color: var(--brass);
  color: var(--brass);
}

.graph-panel-scroll {
  overflow-y: auto; padding: 44px 36px 48px;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(213,160,122,0.25) transparent;
}
.graph-panel-scroll::-webkit-scrollbar { width: 6px; }
.graph-panel-scroll::-webkit-scrollbar-thumb {
  background: rgba(213,160,122,0.25); border-radius: 3px;
}

.graph-panel-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-ui); font-weight: 500;
  font-size: 9px; letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
  opacity: 0.95;
}
.graph-panel-eyebrow::before {
  content: ""; display: inline-block;
  width: 18px; height: 1px;
  background: var(--brass);
  opacity: 0.7;
}

.graph-panel-name {
  font-family: "Bodoni Moda", "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--text-main);
  margin: 0 0 6px;
  text-wrap: balance;
}
.graph-panel-alias {
  font-family: var(--font-reading);
  font-style: italic;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
  opacity: 0.85;
}

.graph-panel-avatar {
  width: 90px; height: 90px; border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid rgba(213,160,122,0.30);
  outline: 3px solid rgba(213,160,122,0.06);
  outline-offset: 3px;
  object-fit: cover;
  margin-bottom: 22px;
  filter: saturate(0.88) contrast(1.08);
  box-shadow: 0 10px 26px rgba(0,0,0,0.4);
}
.graph-panel-avatar-fallback {
  width: 90px; height: 90px; border-radius: 50%;
  background: linear-gradient(135deg, #1a0e0e, #0d0708);
  border: 1px solid rgba(213,160,122,0.30);
  outline: 3px solid rgba(213,160,122,0.06);
  outline-offset: 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: "Bodoni Moda", serif; font-style: italic;
  font-size: 34px; color: var(--brass-2);
  margin-bottom: 22px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.4);
}

.graph-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.graph-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-ui);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(213,160,122,0.06);
  color: var(--text-soft);
  border: 1px solid rgba(213,160,122,0.14);
}
.graph-chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
}

.graph-panel-bio {
  font-family: var(--font-reading);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-soft);
  margin: 22px 0 26px;
  text-wrap: pretty;
}
.graph-panel-bio::first-letter {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 2.4em;
  line-height: 0.95;
  float: left;
  margin: 0.04em 0.08em 0 0;
  color: var(--brass-2);
}

.graph-section-title {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-ui); font-weight: 500;
  font-size: 9px; letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--brass);
  margin: 28px 0 12px;
  opacity: 0.95;
}
.graph-section-title::before {
  content: ""; display: inline-block;
  width: 14px; height: 1px;
  background: var(--brass);
  opacity: 0.7;
}

.graph-works-list { display: flex; flex-direction: column; gap: 0; }
.graph-work-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center; gap: 14px;
  padding: 3px 12px; margin: 0 -12px;
  border-radius: 2px;
  transition: background-color 160ms;
}
.graph-work-row:hover { background: rgba(213,160,122,0.05); }
.graph-work-spotify {
  width: 22px; height: 22px; min-height: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #1db954;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 220ms, transform 220ms;
}
.graph-work-spotify:hover {
  color: #1ed760;
  transform: scale(1.12);
}
.graph-work-title {
  font-family: "Bodoni Moda", serif; font-style: italic;
  font-size: 15px; line-height: 1.2;
  color: var(--text-main);
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 180ms;
}
.graph-work-title:hover { color: var(--brass-2); }
.graph-work-roles {
  font-family: var(--font-ui);
  font-size: 8.5px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}

.graph-neighbor-list { display: flex; flex-direction: column; gap: 1px; }
.graph-neighbor {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 12px; margin: 0 -12px;
  cursor: pointer;
  border-radius: 2px;
  transition: background-color 160ms;
}
.graph-neighbor:hover { background: rgba(213,160,122,0.05); }
.graph-neighbor-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.graph-neighbor-name {
  font-family: "Bodoni Moda", serif; font-style: italic;
  font-size: 15px; color: var(--text-main);
}

.graph-panel-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 26px;
  padding: 11px 22px;
  background: transparent;
  border: 1px solid var(--brass);
  border-radius: 999px;
  color: var(--brass-2);
  text-decoration: none;
  font-family: var(--font-ui); font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  transition: background-color 240ms, color 240ms;
}
.graph-panel-cta:hover {
  background: var(--brass);
  color: var(--cordovan);
}

.graph-panel-meta {
  font-family: var(--font-ui);
  font-size: 9.5px; color: var(--text-muted);
  margin: 16px 0 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* ── Edge relation labels (focused state) ─────────────────────────── */

.graph-edge-label {
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(213, 160, 122, 0.75);
  background: rgba(7, 5, 10, 0.72);
  padding: 2px 6px;
  border-radius: 2px;
  pointer-events: none;
  white-space: nowrap;
}

/* ── Focus hint ───────────────────────────────────────────────────── */

.graph-focus-hint {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  z-index: 4;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-ui);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--brass-2);
  background: rgba(10,6,8,0.85);
  border: 1px solid rgba(213,160,122,0.20);
  border-radius: 999px;
  padding: 9px 18px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.42);
  opacity: 0; pointer-events: none;
  transition: opacity 280ms ease;
}
.graph-focus-hint.visible { opacity: 1; }
.graph-focus-hint .hint-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brass);
}

/* ── Onboarding pill (first-visit hint, QW5) ──────────────────────── */

.graph-onboard-pill {
  position: absolute; bottom: 72px; left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 5;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-ui);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass-2);
  background: rgba(10,6,8,0.9);
  border: 1px solid rgba(213,160,122,0.30);
  border-radius: 999px;
  padding: 10px 20px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.48);
  opacity: 0; pointer-events: none;
  transition: opacity 320ms ease, transform 320ms ease;
}
.graph-onboard-pill.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.graph-onboard-pill .onboard-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 0 rgba(213,160,122,0.55);
  animation: graph-onboard-ping 1.8s ease-out infinite;
}
@keyframes graph-onboard-ping {
  0%   { box-shadow: 0 0 0 0 rgba(213,160,122,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(213,160,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(213,160,122,0); }
}

/* ── Loading splash ───────────────────────────────────────────────── */

.graph-loading {
  position: absolute; inset: 0; z-index: 9;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 50%, var(--oxblood) 0%, var(--cordovan) 50%, var(--night) 100%);
  transition: opacity 600ms ease;
}
.graph-loading.fading { opacity: 0; pointer-events: none; }
.graph-loading-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px;
  text-align: center;
}
.graph-loading-glyph {
  font-family: "Bodoni Moda", serif;
  font-size: 26px;
  color: var(--brass);
  opacity: 0.7;
}
.graph-loading-pulse {
  font-family: "Bodoni Moda", "Times New Roman", serif;
  font-style: italic;
  font-weight: 300;
  font-size: 30px;
  color: var(--text-main);
  letter-spacing: 0.02em;
  line-height: 1;
  animation: graph-pulse 1.8s ease-in-out infinite;
}
@keyframes graph-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1.0; }
}
.graph-loading-sub {
  font-family: var(--font-ui); font-weight: 500;
  font-size: 9px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--brass-2);
  opacity: 0.6;
}

/* ── Mobile fallback ──────────────────────────────────────────────── */

.graph-mobile-fallback { display: none; }

@media (max-width: 720px) {
  .graph-scene > :not(.graph-mobile-fallback) { display: none; }
  .graph-mobile-fallback {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 18px;
    padding: 80px 32px;
    height: 100%;
    text-align: center;
  }
  .graph-mobile-fallback h2 {
    font-family: "Bodoni Moda", serif; font-style: italic;
    font-size: 28px; color: var(--text-main); margin: 0;
  }
  .graph-mobile-fallback p {
    font-family: var(--font-reading); font-size: 15px;
    color: var(--text-soft); max-width: 36ch; margin: 0;
  }
  .graph-mobile-fallback a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px;
    border: 1px solid var(--brass); border-radius: 999px;
    color: var(--brass-2); text-decoration: none;
    font-family: var(--font-ui); font-size: 11px;
    letter-spacing: 0.22em; text-transform: uppercase;
  }
}

/* ── Reduced motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .graph-loading-pulse { animation: none !important; }
  .graph-onboard-pill {
    transform: translateX(-50%);
    transition: opacity 320ms ease;
  }
  .graph-onboard-pill.visible { transform: translateX(-50%); }
  .graph-onboard-pill .onboard-dot { animation: none !important; }
}