/* HTML organization nodes with vector connectors; follows the About page scale. */
.about-organization { margin-top: 48px; padding-top: 28px; border-top: 1px solid #d6ded3; scroll-margin-top: 24px; }
.organization-hint { margin: -12px 0 18px; color: #53645a; font-size: .78rem; line-height: 1.8; }
.organization-scroll { overflow-x: auto; padding: 8px 0 16px; border: 1px solid #dce3d8; border-radius: 8px; background: #fffdf7; }
.organization-scroll:focus-visible { outline: 2px solid #1f6b4f; outline-offset: 4px; }
.organization-board { position: relative; width: 100%; min-width: 1040px; aspect-ratio: 1280 / 770; }
.organization-lines { position: absolute; inset: 0; width: 100%; height: 100%; color: #92ac99; pointer-events: none; }
.organization-node { position: absolute; left: var(--org-x); top: var(--org-y); width: var(--org-width); height: 5.194805%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; padding: 3px 6px; border: 1px solid #b9cdbb; border-radius: 8px; background: #eef3e9; color: #294736; text-align: center; font-size: .76rem; font-weight: 400; line-height: 1.35; }
.organization-node--lead { color: #fff; background: #1f6b4f; border-color: #1f6b4f; font-weight: 500; }
@media (max-width: 820px) {
  .about-organization { margin-top: 32px; padding-top: 24px; }
}

/* Fit the complete organization chart inside tablet screens. */
@media (min-width: 601px) and (max-width: 1080px) {
  .organization-scroll { container-type: inline-size; padding: 6px 0 10px; }
  .organization-board { min-width: 0; width: 100%; }
  .organization-node { padding: 1px 2px; font-size: clamp(6px, 1.05vw, 12px); font-size: clamp(6px, 1.17cqw, 12px); line-height: 1.1; }
  .organization-hint { display: none; }
}