/* One graph: life area → authors, with concepts directly under each name. */
body[data-page="cloud"] .page { max-width: 1600px; padding: 25px 44px 50px; }
.life-field { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: center; gap: 90px 8%; min-height: 490px; padding: 35px 3% 80px; }
.life-field h2 { margin: 0; font-weight: normal; font-size: clamp(23px,2vw,29px); line-height: 1.35; }
.life-area:nth-child(3n + 2) { transform: translateY(42px); }
.life-authors { display: flex; flex-wrap: wrap; gap: 2px 0; list-style: none; padding: 0; margin: 12px 0 0; max-width: 34ch; font-size: 15px; line-height: 1.7; }
.life-authors li:not(:last-child)::after { content: ', '; white-space: pre; }
.life-authors a { color: #555; text-decoration-color: #aaa; }
.life-authors a:hover { color: #000; text-decoration-color: #000; }
.life-field a { text-decoration-thickness: 1px; }
.graph-workspace { max-width: 1100px; margin-inline: auto; }
.area-switcher { display: flex; flex-wrap: wrap; gap: 9px 23px; font-size: 14px; margin: 0 0 36px; }
.area-switcher [aria-current] { font-weight: bold; text-decoration: none; }
.author-graph { display: grid; grid-template-columns: minmax(160px,230px) minmax(0,1fr); column-gap: 90px; align-items: center; padding: 16px 0 32px; max-width: 820px; margin-inline: auto; }
.graph-area { transform: translateY(var(--root-offset,0px)); position: relative; font-size: 27px; font-weight: normal; line-height: 1.3; margin: 0; padding-right: 20px; }
.graph-area::after { content: ''; position: absolute; width: 90px; height: 1px; background: #999; right: -90px; top: 50%; }
.author-branches { position: relative; display: flex; flex-direction: column; gap: 35px; padding-left: 44px; }
.author-branches::before { content: ''; position: absolute; left: 0; top: var(--trunk-top,25px); bottom: var(--trunk-bottom,30px); width: 1px; background: #999; }
.graph-author { position: relative; padding: 7px 0; min-width: 0; }
.graph-author::before { content: ''; position: absolute; width: 30px; height: 1px; left: -44px; top: var(--branch-y,25px); background: #999; }
.graph-author h3 { font-size: 23px; line-height: 1.3; font-weight: normal; margin: 0 0 8px; }
.graph-author h3 a { text-decoration-thickness: 1px; }
.graph-concepts { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.6; }
.graph-concepts li:not(:last-child)::after { content: ', '; white-space: pre; }
.graph-concepts .is-target { font-weight: bold; }
.graph-author.is-match h3 a { font-weight: bold; text-decoration-thickness: 2px; }
@media (max-width: 1100px) {
  .life-field { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 75px 10%; }
  .life-area:nth-child(n) { transform: none; }
  .author-graph { grid-template-columns: 180px minmax(0,1fr); column-gap: 60px; }
  .graph-area::after { width: 60px; right: -60px; }
}
@media (max-width: 650px) {
  body[data-page="cloud"] .page { padding: 22px 20px 40px; }
  .life-field { min-height: 0; gap: 48px; padding: 28px 0 35px; grid-template-columns: 1fr; }
  .life-field h2 { font-size: 25px; }
  .area-switcher { gap: 8px 19px; margin-bottom: 28px; }
  .author-graph { display: block; padding-top: 0; }
  .graph-area { transform: none; font-size: 25px; padding: 0 0 32px; }
  .graph-area::after { width: 1px; height: 32px; left: 0; right: auto; top: auto; bottom: 0; }
  .author-branches { padding-left: 26px; gap: 27px; }
  .author-branches::before { top: 0; bottom: 30px; }
  .graph-author::before { width: 15px; left: -26px; top: var(--branch-y,23px); }
  .graph-author h3 { font-size: 21px; }
  .graph-concepts { font-size: 14px; }
}