/*
  Global typography controls.
  Tune these variables first when Marc wants the whole site to feel lighter,
  tighter, smaller, or more open.
*/
:root {
  --mp-font-display: Impact, Haettenschweiler, "Arial Narrow Bold", "Helvetica Neue Condensed Black", sans-serif;
  --mp-font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --mp-title-size: clamp(5.4rem, 14vw, 13rem);
  --mp-title-size-mobile: clamp(5.2rem, 23vw, 8rem);
  --mp-section-title-size: clamp(2rem, 4.4vw, 5.4rem);
  --mp-section-title-size-mobile: clamp(2.15rem, 10vw, 3.8rem);
  --mp-card-title-size: clamp(1.05rem, 1.8vw, 1.65rem);
  --mp-legal-title-size: clamp(3rem, 8vw, 6rem);
  --mp-legal-title-size-mobile: clamp(2.5rem, 11vw, 4.4rem);

  --mp-title-tracking: -0.022em;
  --mp-home-title-tracking: -0.014em;
  --mp-card-title-tracking: -0.016em;
  --mp-label-tracking: 0.18em;
  --mp-label-tracking-wide: 0.2em;
  --mp-button-tracking: 0.14em;
  --mp-body-tight-tracking: -0.025em;
  --mp-home-panel-word-spacing: 0.04em;
}

.agency-title,
.contact-title,
.site-shell--about .about-principal__title,
.site-shell--about .about-principal h1,
.site-shell--about .about-principal h2,
.site-shell--workpage .work-intro h1,
.site-shell--workpage .work-intro h2 {
  font-family: var(--mp-font-display);
  font-size: var(--mp-title-size);
  letter-spacing: var(--mp-title-tracking) !important;
}

.site-shell--home .hero-agency-panel__line,
.site-shell--home .hero-agency-panel__line::before {
  letter-spacing: var(--mp-home-title-tracking) !important;
  word-spacing: var(--mp-home-panel-word-spacing) !important;
}

.site-shell--home .hero-slide__title {
  letter-spacing: var(--mp-title-tracking) !important;
}

.agency-section__header h2,
.agency-final h2,
.site-shell--about .about-selected__header h2 {
  font-family: var(--mp-font-display);
  font-size: var(--mp-section-title-size);
  letter-spacing: var(--mp-title-tracking) !important;
}

.agency-card h3,
.agency-proof-links strong,
.agency-process-list span,
.site-shell--about .about-proof__meta strong,
.site-shell--about .about-selected__grid strong,
.site-shell--workpage .placement-grid__overlay strong,
.site-shell--workpage .placement-grid__item:nth-child(-n+3) .placement-grid__overlay strong {
  letter-spacing: var(--mp-card-title-tracking) !important;
}

.agency-proof-group h3,
.agency-vertical-proof__copy h3,
.contact-name,
.project-detail__meta h1,
.project-native-player__info h1,
.project-native-player__info h2,
.project-native-player__next-up-copy strong {
  letter-spacing: var(--mp-title-tracking) !important;
}

.agency-kicker,
.agency-section__header p,
.agency-card span,
.agency-vertical-proof__copy p,
.agency-proof-group > div > span,
.agency-proof-links span,
.contact-list__label,
.contact-socials a,
.project-detail__meta span,
.project-native-player__info span,
.site-shell--about .about-principal__kicker,
.site-shell--about .about-selected__header p,
.site-shell--about .about-selected__grid span,
.site-shell--about .about-proof__meta span,
.site-shell--about .about-background span,
.site-shell--home .hero-slide__client,
.site-shell--workpage .placement-grid__overlay span,
.site-shell--workpage .work-intro__subtitle {
  letter-spacing: var(--mp-label-tracking) !important;
}

.site-shell--home .hero-agency-panel__eyebrow,
.site-shell--home .hero-slide__subtitle,
.site-shell--home .hero-slide__music-credit,
.legal-page__eyebrow {
  letter-spacing: var(--mp-label-tracking-wide) !important;
}

.agency-button,
.agency-vertical-proof__copy dt,
.project-detail__meta small,
.project-detail__credits small,
.project-native-player__info small,
.project-native-player .project-detail__up-next.project-native-player__up-next-card .project-detail__up-next-copy span,
.project-native-player__next-up-copy small,
.project-native-player__next-up-copy span {
  letter-spacing: var(--mp-button-tracking) !important;
}

.agency-intro,
.contact-intro,
.contact-copy,
.agency-working-grid p {
  letter-spacing: var(--mp-body-tight-tracking);
}

.contact-email {
  letter-spacing: 0 !important;
}

.site-shell--legal-light .legal-page__hero h1,
.legal-page__hero h1 {
  font-family: var(--mp-font-display);
  font-size: var(--mp-legal-title-size);
  letter-spacing: var(--mp-title-tracking) !important;
}

@media (max-width: 720px) {
  .agency-title,
  .contact-title,
  .site-shell--about .about-principal__title,
  .site-shell--about .about-principal h1,
  .site-shell--about .about-principal h2,
  .site-shell--workpage .work-intro h1,
  .site-shell--workpage .work-intro h2 {
    font-size: var(--mp-title-size-mobile) !important;
    letter-spacing: var(--mp-title-tracking) !important;
  }

  .agency-section__header h2,
  .agency-final h2,
  .site-shell--about .about-selected__header h2 {
    font-size: var(--mp-section-title-size-mobile);
  }

  .site-shell--legal-light .legal-page__hero h1,
  .legal-page__hero h1 {
    font-size: var(--mp-legal-title-size-mobile);
  }
}