/* Fluid editorial title system: scale by role and viewport, never by fixed px. */
:root {
  --title-hero: clamp(3.25rem, 6.2vw, 6.5rem);
  --title-column-long: clamp(1.9rem, 3.35vw, 3.5rem);
  --title-panorama-long: clamp(1.75rem, calc(1.4rem + 1.3vw), 2.75rem);
  --title-split-primary: clamp(2rem, 4.25vw, 4.25rem);
  --title-split-secondary: clamp(1.75rem, 3.4vw, 3.4rem);
}

:is(#hero-title,#problem-title,#benefits-title,#speakers-title,#registration-title),
#speakers-title > span {
  color: #fff;
  font-family: var(--display);
  font-style: normal;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

#hero-title { font-size: var(--title-hero); }
.problem #problem-title { max-inline-size: 18ch; font-size: var(--title-column-long); line-height: 1.06; }
#benefits-title { max-inline-size: 40ch; font-size: var(--title-panorama-long); }
#speakers-title { display: flex; flex-direction: column; gap: .12em; }
#speakers-title > span:first-child { font-size: var(--title-split-primary); }
#speakers-title > span:last-child { margin-top: 0; font-size: var(--title-split-secondary); }
#registration-title { max-inline-size: 11ch; font-size: var(--title-split-secondary); line-height: 1.06; }

@media (max-width: 991px) {
  .problem #problem-title { max-inline-size: 19ch; font-size: var(--title-column-long); line-height: 1.06; }
  #benefits-title { max-inline-size: 28ch; }
  #speakers-title > span { white-space: nowrap; }
  #registration-title { max-inline-size: 20ch; margin-inline: auto; }
}