:root { --relationship-red: rgb(138, 30, 34); --relationship-red-bright: rgb(192, 55, 60); }
body.relationship-page { margin: 0; min-height: 100vh; padding: 14px 24px 18px; box-sizing: border-box; opacity: 0; overflow-x: hidden; background: rgb(8,8,8); color: rgb(204,204,204); font-family: Arial, Helvetica, sans-serif; filter: blur(2px); transition: opacity var(--ares-motion-deliberate, 900ms) ease, filter var(--ares-motion-deliberate, 900ms) ease; }
body.relationship-page.is-ready { opacity: 1; filter: blur(0); }
body.relationship-page.is-exiting { opacity: 0; filter: blur(1.5px); }
.relationship-shell { width: min(72vw, 920px); margin: 0 auto; }
.relationship-frame { border: 1px solid var(--frame-border, rgb(54,54,54)); background: rgb(17,17,17); padding: 16px 14px 14px; box-shadow: 0 28px 80px rgba(0,0,0,0.48); }
.relationship-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .48fr); gap: 24px; padding: 20px 18px; border: 1px solid rgba(255,255,255,0.10); background: linear-gradient(135deg, rgba(36,8,10,0.25), rgba(14,14,14,0.96) 42%); }
.relationship-kicker, .relationship-control-label, .relationship-map-label, .relationship-detail-kicker { margin: 0; color: rgb(135,135,135); font-size: 9px; letter-spacing: .18em; line-height: 1.5; text-transform: uppercase; }
.relationship-title { margin: 7px 0 13px; color: rgb(188,188,188); font-size: 22px; font-weight: normal; letter-spacing: .12em; line-height: 1.25; text-transform: uppercase; }
.relationship-intro { max-width: 720px; margin: 0; color: rgb(164,164,164); font-size: 11px; letter-spacing: .045em; line-height: 1.78; text-transform: uppercase; }
.relationship-stats { display: grid; grid-template-columns: 1fr; gap: 1px; align-self: stretch; margin: 0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); }
.relationship-stats div { padding: 11px 12px; background: rgba(10,10,10,.78); }
.relationship-stats dt { color: rgb(129,129,129); font-size: 8px; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; }
.relationship-stats dd { margin: 4px 0 0; color: rgb(194,194,194); font-size: 11px; letter-spacing: .09em; line-height: 1.45; text-transform: uppercase; }
.relationship-controls { margin-top: 10px; padding: 14px; border: 1px solid rgba(255,255,255,.10); background: rgb(14,14,14); }
.relationship-control-group + .relationship-control-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.relationship-control-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.relationship-filter { appearance: none; min-height: 33px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.12); background: rgb(18,18,18); color: rgb(154,154,154); font: inherit; font-size: 8px; letter-spacing: .11em; line-height: 1.35; text-transform: uppercase; cursor: pointer; transition: border-color var(--ares-motion-brief,240ms) ease, background var(--ares-motion-brief,240ms) ease, color var(--ares-motion-brief,240ms) ease; }
.relationship-filter:hover, .relationship-filter:focus-visible { border-color: rgba(255,255,255,.34); color: rgb(222,222,222); outline: none; }
.relationship-filter.is-active { border-color: rgba(192,55,60,.76); background: rgba(104,17,21,.24); color: rgb(232,204,205); }
.relationship-era-context { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: center; margin-top: 10px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.10); border-left: 2px solid var(--relationship-red); background: rgb(14,14,14); }
.relationship-era-context h2 { margin: 3px 0 5px; color: rgb(206,206,206); font-size: 14px; font-weight: normal; letter-spacing: .12em; line-height: 1.35; text-transform: uppercase; }
.relationship-era-context p { margin: 0; color: rgb(153,153,153); font-size: 10px; letter-spacing: .045em; line-height: 1.68; text-transform: uppercase; }
.relationship-era-link, .relationship-action, .relationship-return { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; box-sizing: border-box; padding: 9px 13px; border: 1px solid rgba(255,255,255,.15); background: rgb(17,17,17); color: rgb(183,183,183); font-size: 8px; letter-spacing: .13em; line-height: 1.4; text-decoration: none; text-align: center; text-transform: uppercase; transition: border-color var(--ares-motion-brief,240ms) ease, color var(--ares-motion-brief,240ms) ease, background var(--ares-motion-brief,240ms) ease; }
.relationship-era-link[hidden] { display: none !important; }
.relationship-era-link:hover, .relationship-era-link:focus-visible, .relationship-action:hover, .relationship-action:focus-visible, .relationship-return:hover, .relationship-return:focus-visible { border-color: rgba(192,55,60,.62); background: rgba(104,17,21,.18); color: rgb(235,220,220); outline: none; }
.relationship-map-panel { position: relative; margin-top: 10px; padding: 14px; border: 1px solid rgba(255,255,255,.10); background: radial-gradient(circle at 50% 50%, rgba(84,20,24,.13), transparent 26%), rgb(11,11,11); overflow: hidden; }
.relationship-map-header { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 18px; align-items: baseline; }
.relationship-map-count { color: rgb(129,129,129); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
.relationship-map { position: relative; height: 620px; margin-top: 8px; overflow: hidden; }
.relationship-lines { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.relationship-line { stroke: rgba(148,148,148,.13); stroke-width: 1; vector-effect: non-scaling-stroke; }
.relationship-line.is-selected { stroke: rgba(192,55,60,.64); stroke-width: 1.4; }
.relationship-core { position: absolute; z-index: 2; left: 50%; top: 50%; width: 118px; height: 118px; transform: translate(-50%,-50%); border: 1px solid rgba(192,55,60,.45); border-radius: 50%; background: radial-gradient(circle, rgba(110,24,28,.30), rgba(13,13,13,.97) 66%); color: rgb(220,220,220); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 10px; letter-spacing: .17em; line-height: 1.45; text-transform: uppercase; box-shadow: 0 0 42px rgba(118,22,27,.16); }
.relationship-nodes { position: absolute; inset: 0; z-index: 1; }
.relationship-node { position: absolute; width: 98px; min-height: 46px; transform: translate(-50%,-50%); padding: 7px 8px; border: 1px solid rgba(255,255,255,.13); background: rgba(17,17,17,.95); color: rgb(174,174,174); font: inherit; font-size: 8px; letter-spacing: .10em; line-height: 1.35; text-align: center; text-transform: uppercase; cursor: pointer; transition: border-color var(--ares-motion-brief,240ms) ease, color var(--ares-motion-brief,240ms) ease, background var(--ares-motion-brief,240ms) ease, opacity var(--ares-motion-brief,240ms) ease; }
.relationship-node:hover, .relationship-node:focus-visible { z-index: 4; border-color: rgba(255,255,255,.42); color: rgb(235,235,235); outline: none; }
.relationship-node.is-selected { z-index: 5; border-color: var(--relationship-red-bright); background: rgba(91,16,20,.72); color: rgb(244,226,227); box-shadow: 0 0 22px rgba(122,24,29,.25); }
.relationship-node-role { display: block; margin-top: 3px; color: rgb(116,116,116); font-size: 7px; letter-spacing: .09em; }
.relationship-node.is-selected .relationship-node-role { color: rgb(206,166,168); }
.relationship-detail { display: grid; grid-template-columns: minmax(0,1.18fr) minmax(280px,.82fr); gap: 22px; margin-top: 10px; padding: 18px; border: 1px solid rgba(255,255,255,.10); background: linear-gradient(135deg, rgba(21,21,21,.98), rgba(12,12,12,.98)); }
.relationship-detail h2 { margin: 5px 0 5px; color: rgb(218,218,218); font-size: 22px; font-weight: normal; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.relationship-detail-meta { margin: 0 0 12px; color: rgb(154,154,154); font-size: 9px; letter-spacing: .12em; line-height: 1.6; text-transform: uppercase; }
.relationship-detail-copy { margin: 0; color: rgb(166,166,166); font-size: 10px; letter-spacing: .045em; line-height: 1.75; text-transform: uppercase; }
.relationship-detail-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.relationship-detail-side { display: grid; gap: 12px; align-content: start; }
.relationship-detail-block { padding-top: 10px; border-top: 1px solid rgba(255,255,255,.09); }
.relationship-detail-block:first-child { padding-top: 0; border-top: 0; }
.relationship-detail-block h3 { margin: 0 0 6px; color: rgb(132,132,132); font-size: 8px; font-weight: normal; letter-spacing: .16em; text-transform: uppercase; }
.relationship-detail-list { margin: 0; padding: 0; list-style: none; }
.relationship-detail-list li { color: rgb(173,173,173); font-size: 9px; letter-spacing: .06em; line-height: 1.62; text-transform: uppercase; }
.relationship-detail-list li + li { margin-top: 5px; }
.relationship-page-actions { margin-top: 12px; text-align: center; }
.relationship-noscript { margin: 10px 0 0; padding: 16px; border: 1px solid rgba(255,255,255,.10); color: rgb(170,170,170); font-size: 10px; letter-spacing: .05em; line-height: 1.7; text-transform: uppercase; }
.relationship-footer { margin-top: 12px; }
@media (max-width: 860px) {
  .relationship-header, .relationship-detail { grid-template-columns: 1fr; }
  .relationship-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .relationship-era-context { grid-template-columns: 1fr; }
  .relationship-era-link { justify-self: start; }
  .relationship-map { height: auto; min-height: 0; padding-top: 76px; overflow: visible; }
  .relationship-lines { display: none; }
  .relationship-core { top: 0; width: 62px; height: 62px; font-size: 8px; }
  .relationship-nodes { position: relative; inset: auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
  .relationship-node { position: relative; left: auto !important; top: auto !important; width: 100%; min-height: 52px; transform: none; }
}
@media (max-width: 1100px) {
  .relationship-shell { width: min(94vw, 920px); }
}
@media (max-width: 620px) {
  body.relationship-page { padding: 10px; }
  .relationship-frame { padding: 10px 8px; }
  .relationship-header { padding: 16px 13px; }
  .relationship-stats { grid-template-columns: 1fr; }
  .relationship-control-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
  .relationship-filter { flex: 0 0 auto; }
  .relationship-nodes { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .relationship-detail { padding: 14px; }
}
@media (max-width: 390px) { .relationship-nodes { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { body.relationship-page, .relationship-filter, .relationship-node, .relationship-action, .relationship-era-link, .relationship-return { transition-duration: 1ms; } }