/* .section (DESIGN.md §5 Section rule): a 1px rule across the top, the
   section's heading as an eyebrow under it, instead of cards. */
@layer components {
  .section {
    margin-block-start: var(--section-gap);
    padding-block-start: var(--space-3);
    border-top: var(--rule);

    & > .eyebrow:first-child { margin-block-end: var(--space-4); }
  }

  .section--light { border-top: var(--hairline); }

  /* A page heading already ends on a rule: no second one right below it. */
  .page-heading + .section {
    margin-block-start: var(--space-6);
    border-top: 0;
    padding-block-start: 0;
  }
}