/*
 * Large headings use Comfortaa Light: thin, monoline and softly rounded –
 * its 3, 6 and 1 are built from the same arcs and circles as the logo.
 * Smaller display text (eyebrows, labels, item titles) stays in Urbanist.
 * Loaded last so it wins over the section stylesheets.
 */
:root {
  --f-headline: 'Comfortaa', var(--f-display);
}

.hero__title,
.h1,
.h2,
.svc__title,
.work__tab-title,
.menu__link,
.contact__mail,
.ctaband__title,
.case__next-link,
.portrait__initials {
  font-family: var(--f-headline);
  font-weight: 300;
  letter-spacing: -0.035em;
}
.hero__title {
  /* Comfortaa runs wider than Urbanist – a step smaller keeps hero + route in the first screen */
  font-size: clamp(2.3rem, 1.5rem + 3.3vw, 4.5rem);
  line-height: 1.08;
}
.h1,
.h2 {
  line-height: 1.12;
}

/* The full stop after the hero headline: drawn as the logo's round dot, a little larger */
.hero__title .stop {
  display: inline-block;
  width: 0.15em;
  height: 0.15em;
  margin-left: 0.07em;
  border-radius: var(--r-circle);
  background: var(--accent);
  color: transparent;
  overflow: hidden;
  vertical-align: baseline;
}