/* .band--dark (DESIGN.md §5 Dark band): the site's dark section with one big
   rounded corner. One per page at most; never behind a form. */
@layer components {
  .band--dark {
    margin-block-start: var(--section-gap);
    padding: var(--space-8) var(--gutter);
    border-start-start-radius: var(--radius-feature);
    background: var(--color-text);
    color: var(--color-surface);

    & .eyebrow { color: var(--color-line); }
    & a { color: var(--color-surface); }
    & a:hover { color: var(--color-paper); }
  }

  .band__inner {
    display: grid;
    gap: var(--space-4);
    max-width: var(--width-reading);
    margin-inline: auto;
  }

  .band__text {
    font-size: var(--text-lead);
    line-height: var(--leading-lead);
    font-weight: 500;
    text-wrap: pretty;
  }

  @media (min-width: 810px) {
    .band--dark { padding-block: var(--space-9); }
  }
}