/*
The two-tone heading. It repeats in every section of every page of the design — a heading
split into segments, each one either dark and bold or accent and light — and until now it
lived inside hero.css, which is where it happened to be needed first.

The component owns the tone: a segment's colour and its weight are one decision, taken
here, and the list of tones is closed so the client cannot set an arbitrary colour.

It does not own its size. Type size, tracking and leading arrive as custom properties, and
the block that uses the heading is what sets them:

    .hero__title { --heading-fs: var(--fs-hero-title); ... }

so a section heading and a hero heading are the same component at two sizes rather than
two components.
*/
.two-tone-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--heading-fs);

  /*
  The default for any text that is not inside a segment — the client can leave a stray
  word outside the repeater, and it has to read as the dark tone rather than as the
  browser's own bold.
  */
  font-weight: var(--fw-display-dark);
  letter-spacing: var(--heading-ls);
  line-height: var(--heading-lh);
}

/*
inline-block rather than inline: a segment must not break in the middle of itself. In the
design each segment takes its own line, and at in-between widths the line has to wrap on a
segment boundary, otherwise the tones get mixed inside one line.
*/
.two-tone-heading__segment {
  display: inline-block;
}

.two-tone-heading__segment--dark {
  color: var(--heading-ink);
  font-weight: var(--fw-display-dark);
}

.two-tone-heading__segment--accent {
  color: var(--heading-accent);
  font-weight: var(--fw-display-accent);
}