/* Unified typography for the main page, /artists/ and /repertoire/. */

:root {
  --vh-font-display: "Montserrat", Arial, sans-serif;
  --vh-font-body: "Montserrat", Arial, sans-serif;
  --vh-type-display: clamp(3rem, 7vw, 6.5rem);
  --vh-type-h1: clamp(2.6rem, 5vw, 4.9rem);
  --vh-type-h2: clamp(2rem, 4vw, 3.7rem);
  --vh-type-h3: clamp(1.2rem, 2vw, 1.75rem);
  --vh-type-lead: clamp(1rem, 1.45vw, 1.25rem);
  --vh-type-body: clamp(.94rem, 1vw, 1.05rem);
  --vh-type-small: clamp(.78rem, .85vw, .9rem);
  --vh-leading-display: .98;
  --vh-leading-heading: 1.08;
  --vh-leading-body: 1.58;
  --vh-reading-width: 68ch;
  --vh-heading-width: 18ch;
}

body {
  font-family: var(--vh-font-body);
  font-size: var(--vh-type-body);
  line-height: var(--vh-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p,
li,
a,
button,
label,
input,
select,
textarea {
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  margin-block-start: 0;
  font-family: var(--vh-font-display);
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

/* ===== MAIN PAGE HEADINGS ===== */
.vh-hero__title {
  max-width: 13ch;
  font-size: var(--vh-type-display) !important;
  line-height: var(--vh-leading-display) !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
}

.vh-hero__title > span,
.vh-hero__title > strong {
  max-width: 100%;
}

.vh-hero-offer__line {
  max-width: 48ch;
  font-size: var(--vh-type-lead);
  line-height: 1.45;
  text-wrap: pretty;
}

:is(
  .vh-video-section__title,
  .vh-formats-title,
  .vh-booking__title,
  .vh-price-calc__title,
  .vh-reviews-title,
  .vh-faq__title,
  .vh-contacts-section__title
) {
  max-width: var(--vh-heading-width);
  margin-inline: auto;
  font-size: var(--vh-type-h2) !important;
  line-height: var(--vh-leading-heading) !important;
  letter-spacing: -.025em !important;
  text-wrap: balance;
}

:is(
  .vh-video-section__description,
  .vh-formats-description,
  .vh-booking__description,
  .vh-price-calc__description,
  .vh-reviews-description,
  .vh-faq__description,
  .vh-contacts-section__description
) {
  max-width: 62ch;
  margin-inline: auto;
  font-size: var(--vh-type-lead) !important;
  line-height: 1.55 !important;
  text-wrap: pretty;
}

:is(
  .vh-video-section__description,
  .vh-formats-description,
  .vh-booking__description,
  .vh-price-calc__description,
  .vh-reviews-description,
  .vh-faq__description,
  .vh-contacts-section__description
) br {
  display: none;
}

.vh-benefit-text h3,
.vh-format-title,
.vh-booking-card h3,
.vh-price-calc h3,
.vh-faq__question span,
.vh-contact-card__content strong {
  font-size: var(--vh-type-h3);
  line-height: 1.18;
  letter-spacing: -.018em;
  text-wrap: balance;
}

.vh-benefit-text p,
.vh-video-card__content p,
.vh-format-list,
.vh-booking-card p,
.vh-faq__answer p,
.vh-contact-card__content > span {
  font-size: var(--vh-type-body);
  line-height: var(--vh-leading-body);
}

.vh-video-card__content strong,
.vh-format-title,
.vh-contact-card__content strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.vh-video-card__content p,
.vh-benefit-text p,
.vh-faq__answer p {
  max-width: var(--vh-reading-width);
}

/* ===== CATALOG ===== */
.vh-artists-page__title {
  max-width: 15ch !important;
  font-size: var(--vh-type-h1) !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
}

.vh-artists-page__subtitle {
  max-width: 62ch !important;
  font-size: var(--vh-type-lead) !important;
  line-height: 1.55 !important;
  text-wrap: pretty;
}

.vh-artists-page__title-row > div {
  min-width: 0;
  flex: 1 1 auto;
}

#artists .vh-artist-card h2,
#artists .vh-artist-card h3,
.vh-artist-modal__title-row h2 {
  font-size: var(--vh-type-h3) !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

#artists .vh-artist-card p,
.vh-artist-modal__about,
.vh-artist-modal__info-card p {
  font-size: var(--vh-type-body);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ===== REPERTOIRE ===== */
.vr-head__content {
  min-width: 0;
}

.vr-head__title {
  max-width: 18ch !important;
  min-height: 0 !important;
  font-size: var(--vh-type-h1) !important;
  line-height: 1.04 !important;
  letter-spacing: -.03em !important;
  text-wrap: balance !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.vr-head__title .vr-head__title-word {
  max-width: 100%;
  white-space: normal !important;
}

.vr-head__meta {
  max-width: 62ch !important;
  font-size: var(--vh-type-lead) !important;
  line-height: 1.5 !important;
  text-wrap: pretty;
}

.vr-song__title {
  min-width: 0;
}

.vr-song__title h3 {
  font-size: clamp(1rem, 1.3vw, 1.18rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -.012em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.vr-song__title p,
.vr-state,
.vr-picker,
.vr-toolbar,
.vr-summary {
  font-size: var(--vh-type-small);
}

/* ===== MOBILE STABILITY ===== */
@media (max-width: 720px) {
  :root {
    --vh-type-display: clamp(2.7rem, 13vw, 4.4rem);
    --vh-type-h1: clamp(2.25rem, 10vw, 3.5rem);
    --vh-type-h2: clamp(1.85rem, 8vw, 2.8rem);
    --vh-type-h3: clamp(1.08rem, 5vw, 1.42rem);
    --vh-type-lead: clamp(.95rem, 4vw, 1.08rem);
    --vh-type-body: clamp(.9rem, 3.8vw, 1rem);
  }

  .vh-hero__title,
  .vh-artists-page__title,
  .vr-head__title {
    max-width: 100% !important;
  }

  .vh-artists-page__title-row {
    align-items: stretch;
  }

  .vh-video-card__content strong,
  .vh-format-title,
  .vh-contact-card__content strong {
    hyphens: auto;
  }

  .vh-subpage-brand strong,
  .vh-subpage-nav a,
  button,
  a {
    overflow-wrap: normal;
  }
}

@media (max-width: 390px) {
  .vh-hero__title,
  .vh-artists-page__title,
  .vr-head__title {
    letter-spacing: -.025em !important;
  }
}
