/* SectionTitle — the heading that opens a section ("SELECTED WORK", "SERVICES",
   "NUMBERS", "WHO WE ARE"). An orange bracketed number ([1], [2], …) sits to the
   LEFT of an uppercase label. The number is the section's running index from top
   to bottom of the page.

   The label color flips with the background: near-black on light surfaces,
   white on dark surfaces. The orange number never changes. */

.ds-stitle {
  display: inline-flex;
  align-items: baseline;
  gap: var(--stitle-gap);
  font-family: var(--font-display);
  -webkit-tap-highlight-color: transparent;
}

/* Orange bracketed number, e.g. [1]. Uses the same display face and cap metrics
   as the label so the two sit on one baseline. Always the house orange. */
.ds-stitle__num {
  flex-shrink: 0;
  color: var(--color-orange-600);
  font-size: var(--stitle-text);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--stitle-tracking);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ds-stitle__label {
  font-size: var(--stitle-text);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--stitle-tracking);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Light surface (default) — near-black label. */
.ds-stitle--light .ds-stitle__label { color: var(--color-ink); }

/* Dark surface — white label. */
.ds-stitle--dark .ds-stitle__label { color: var(--color-white); }