@layer components {
  /* The family's professional, set into the vault like a dedication stone: an inscribed tablet at
     the arch's springing, where the opening is widest, so it never crosses the course. Its rule is
     the course's own, so it reads as cut from the same stone. It takes the vault's inks.
     One size for every partner: each line stays one line, and a long one ends in an ellipsis,
     what they do giving way before who they are. */
  .partner-plaque {
    --icon-size: var(--space-6);

    position: relative;
    z-index: var(--z-raised);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    align-self: center;
    inline-size: min(var(--size-fill), calc(var(--exhale-vault-column-min) - 2 * var(--space-8)));
    min-block-size: var(--tap-min);
    margin-block: calc(-1 * (var(--space-8) + var(--space-5))) var(--space-8);
    padding: var(--space-4) var(--space-5);
    border: var(--border-width) solid var(--vault-course);
    border-radius: var(--radius-xs);
    color: var(--vault-quiet);
    text-align: center;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-calm), border-color var(--dur-fast) var(--ease-calm), transform var(--dur-fast) var(--ease-calm);
  }

  .partner-plaque__house,
  .partner-plaque__name,
  .partner-plaque__calling {
    min-inline-size: var(--space-0);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .partner-plaque__house {
    max-inline-size: var(--size-fill);
    font: var(--type-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
  }

  .partner-plaque__person {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: var(--space-3);
    max-inline-size: var(--size-fill);
    font: var(--type-caption);
  }

  .partner-plaque__name {
    flex: 0 1 auto;
    color: var(--vault-crown-ink);
    font: var(--type-label);
  }

  .partner-plaque__calling {
    flex: 0 100 auto;
  }

  .partner-plaque__calling::before {
    content: "·";
    margin-inline-end: var(--space-3);
  }

  .partner-plaque__sees {
    display: inline-flex;
    flex: none;
    color: var(--vault-crown-ink);
  }

  @media (any-hover: hover) {
    .partner-plaque--link:hover {
      border-color: var(--vault-quiet);
      background-color: var(--vault-hover);
    }
  }

  .partner-plaque--link:active {
    transform: scale(var(--press-scale));
  }
}