/**
 * KoreAves page masthead
 *
 * The global header answers where the visitor is. This shared masthead
 * answers what the current surface is for before page-specific controls or
 * evidence appear.
 */

.ka-page-masthead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--ka-space-32);
  padding: var(--ka-surface-hero-top) 0 var(--ka-surface-hero-bottom);
  margin-bottom: var(--ka-surface-hero-after);
  border-bottom: var(--ka-border-hairline);
}

.ka-page-masthead-copy {
  min-width: 0;
}

.ka-display-title,
.ka-page-masthead h1,
.ka-page-masthead-title {
  font-family: var(--ka-font-display);
  font-weight: var(--ka-weight-display);
  letter-spacing: var(--ka-track-display);
}

.ka-page-masthead h1,
.ka-page-masthead-title {
  margin: 0 0 var(--ka-space-12);
  color: var(--ka-color-evidence-present-ink);
  font-size: var(--ka-text-display-page);
  line-height: var(--ka-line-display-page);
}

.ka-display-title--hero {
  font-size: var(--ka-text-display-hero);
  line-height: var(--ka-line-display-hero);
}

.ka-page-masthead p {
  max-width: 68ch;
  margin: 0;
  color: var(--ka-color-ink-quiet);
  font-size: var(--ka-text-body-lead);
  line-height: var(--ka-line-body-lead);
}

@media (max-width: 760px) {
  .ka-page-masthead {
    display: block;
  }

  .ka-page-masthead h1,
  .ka-page-masthead-title {
    font-size: var(--ka-text-display-page-mobile);
  }

  .ka-page-masthead p {
    font-size: var(--ka-text-body);
  }
}