/* The lockup: wordmark, mark, tagline, contacts. */

.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  padding: 24px;
  width: 100%;
  max-width: 640px;
  transform: translateY(var(--lockup-lift));
}

.wordmark {
  font-family: var(--wordmark);
  font-weight: var(--wm-weight);
  letter-spacing: var(--wm-tracking);
  font-size: clamp(52px, 9vw, 104px);
  line-height: 1;
  margin: 0;
}

.wordmark em {
  font-style: normal;
  color: var(--terra);
}

.mark {
  display: block;
  width: min(340px, 100%);
  height: auto;
  margin: var(--mark-gap-top) 0 var(--mark-gap-bottom);
  overflow: visible;
}

.tagline {
  font-family: var(--mono);
  font-size: clamp(9px, 2.6vw, 13.5px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0;
  max-width: 100%;
  text-wrap: balance;
}

.tagline i,
.people i {
  font-style: normal;
  color: var(--faint);
}

.tagline i {
  padding: 0 0.55em;
}

.people {
  margin: var(--people-gap) 0 0;
  font-size: 13.5px;
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Short viewports (mobile landscape): drop the optical lift and tighten
   the vertical rhythm so the lockup still fits without scrolling. */
@media (max-height: 560px) {
  .lockup {
    --mark-gap-top: 20px;
    --mark-gap-bottom: 18px;
    --people-gap: 28px;
    --lockup-lift: 0;
  }

  .mark {
    max-width: 260px;
  }
}

/* SMIL animation can't be stopped from CSS, so the moving dot is hidden and a
   static twin at the arc's apex takes its place. */
.flow-static {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .flow {
    visibility: hidden;
  }

  .flow-static {
    display: block;
  }
}