@layer components {
  @scope (.escala) {
    /* Flip to light text on the darker brand green — cream on Brasil green. */
    :scope { color: var(--paper); }

    .escala__row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: clamp(1.5rem, 3vw, 2.5rem);
    }

    .escala__country {
      margin: 0;
      padding-block-start: 1.25rem;
    }
    .escala__country figcaption {
      font-family: var(--font-display);
      font-weight: normal;
      font-size: clamp(1.5rem, 3vw, 2.1rem);
      letter-spacing: -0.01em;
      margin-block-end: 1.25rem;
    }

    .escala__country dl {
      display: grid;
      gap: 0.75rem;
      margin: 0;
    }
    .escala__stat {
      display: flex;
      justify-content: space-between;
      align-items: start;
      border-block-end: 1px solid rgba(244, 239, 227, 0.24);
      padding-block-end: 0.5rem;
    }
    .escala__stat dt { padding-block-start: 0.15em; }
    .escala__stat:last-child { border-block-end: 0; padding-block-end: 0; }
    .escala__stat dt {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--paper);
      margin: 0;
    }
    .escala__stat dd {
      margin: 0;
      font-weight: 700;
      font-size: 1.15rem;
      font-variant-numeric: tabular-nums;
    }
    .escala__stat--big dd {
      font-family: var(--font-sans);
      font-weight: 900;
      font-size: 2.4rem;
      line-height: 1;
    }

    .escala__punchline {
      font-family: var(--font-display);
      font-weight: normal;
      font-size: clamp(1.6rem, 4vw, 2.75rem);
      line-height: 1.2;
      max-inline-size: 42ch;
      margin-inline: auto;
      margin-block: 0 clamp(2.5rem, 5vw, 4rem);
      text-align: center;
      text-wrap: balance;
    }
    .escala__invert {
      background: var(--ink);
      color: var(--paper);
      padding: 0 8px;
    }
  }
}