/* FRIENDS — organic, hand-drawn. Sage palette, soft node circles, slight stroke jitter. */
body[data-segment="friends"] {
  --bg: #f4f6f0;
  --fg: #1f2a22;
  --muted: #6e7c6c;
  --accent: #5d7a5d;
  --line: #d8e0d0;
}

.tree-block {
  padding-top: 0;
  padding-bottom: 0;
}

.friends-tree {
  width: 100%;
  height: min(70vh, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.friends-tree svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.friends-tree .ft-edge {
  stroke: var(--accent);
  stroke-width: 1.25;
  stroke-linecap: round;
  opacity: 0.45;
  fill: none;
}
.friends-tree .ft-node {
  fill: #fff;
  stroke: var(--accent);
  stroke-width: 1.25;
  transition: fill 0.3s var(--easing), transform 0.3s var(--easing), stroke-width 0.3s var(--easing);
  transform-origin: center;
  transform-box: fill-box;
}
.friends-tree .ft-node-self {
  fill: var(--accent);
  stroke: var(--accent);
}
.friends-tree .ft-node:hover {
  stroke-width: 2;
  transform: scale(1.08);
}
.friends-tree .ft-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  fill: var(--fg);
  text-anchor: middle;
  letter-spacing: 0.04em;
}
.friends-tree .ft-label-self {
  font-weight: 500;
  fill: var(--fg);
}
.friends-tree .ft-group-label {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--muted);
  text-anchor: middle;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.caption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}