@media (max-width: 580px) {
  .home-intro .eyebrow {
    margin: 0;
  }

  .home-intro h1 {
    margin: -18px 0 0;
  }

  .home-intro .lede {
    margin: -14px 0 0;
  }

  .ontology {
    display: block;
    aspect-ratio: 1;
  }

  .node {
    width: clamp(80px, 23vw, 96px);
    height: clamp(80px, 23vw, 96px);
  }

  .node span {
    font-size: clamp(13px, 3.5vw, 15px);
  }

  .node small {
    bottom: clamp(13px, 3.6vw, 17px);
    font-size: clamp(6px, 1.7vw, 8px);
  }

  .node.center {
    width: clamp(118px, 34vw, 138px);
    height: clamp(118px, 34vw, 138px);
  }

  .node.center span {
    max-width: 96px;
    font-size: clamp(17px, 4.6vw, 20px);
  }

  .node.center small {
    bottom: clamp(21px, 6vw, 26px);
    font-size: clamp(6px, 1.7vw, 8px);
    letter-spacing: 0;
    white-space: nowrap;
  }

  .detail-pair {
    display: contents;
    margin: 0;
    border: 0;
    background: none;
  }

  .detail {
    position: absolute;
    z-index: 4;
    width: clamp(104px, 29vw, 122px);
    min-height: 0;
    padding: 8px 9px;
    border-top: 0;
    border-left: 2px solid var(--detail-color, var(--coral));
    background: rgba(233, 236, 230, 0.97);
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .detail.primary {
    left: 72%;
    top: 13%;
  }

  .detail.counter {
    left: 48%;
    top: 87%;
  }

  .detail.visible {
    transform: translate(-50%, -50%);
  }

  .detail .kind {
    margin-bottom: 3px;
    font-size: 6px;
  }

  .detail strong {
    min-height: 0;
    margin-bottom: 4px;
    font-size: 14px;
  }

  .detail p {
    font-size: 8.5px;
    line-height: 1.35;
  }
}

@media (max-width: 340px) {
  .detail {
    width: 100px;
    padding: 6px 7px;
  }

  .detail.primary {
    top: 15%;
  }

  .detail.counter {
    top: 84%;
  }

  .detail .kind {
    margin-bottom: 2px;
    font-size: 5.5px;
  }

  .detail strong {
    margin-bottom: 3px;
    font-size: 13px;
  }

  .detail p {
    font-size: 7.5px;
    line-height: 1.25;
  }
}