/* Shared typography, loaded after page and responsive styles. */
:is(h1, h2, h3, h4, h5, h6).title-animation {
  line-height: 1.2;
  overflow: visible;
}

:is(.projects-hero, .urban-hero, .kc-hero, .inner-hero, .detail-hero) h1:not(.detail-hero__logo-title) {
  min-width: 0;
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  overflow: visible;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.detail-hero h1:not(.detail-hero__logo-title) {
  font-size: clamp(32px, 4vw, 64px);
}

.detail-hero h1.detail-hero__title--long {
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.18;
}

.detail-breadcrumb {
  gap: 6px 10px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.08em;
}

.detail-breadcrumb a,
.detail-breadcrumb span {
  min-width: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  overflow-wrap: anywhere;
}

@media only screen and (max-width: 767px) {
  :is(.projects-hero, .urban-hero, .kc-hero, .inner-hero, .detail-hero) h1:not(.detail-hero__logo-title) {
    font-size: clamp(30px, 8vw, 38px);
  }

  .detail-hero h1:not(.detail-hero__logo-title) {
    font-size: clamp(30px, 8.5vw, 40px);
  }

  .detail-hero h1.detail-hero__title--long {
    font-size: clamp(28px, 7.5vw, 34px);
  }

  .detail-breadcrumb {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
}