@layer components {
  /* Information-dense register: the content follows the viewport width up to
     a wide ceiling. Forms and prose keep their own measure caps (.form,
     .page-lede). */
  .content {
    max-width: var(--max-width);
    margin-inline: auto;
    padding: var(--space-3) var(--space-5) var(--space-6);
  }

  .page-heading { margin-bottom: var(--space-2); }

  .page-lede {
    color: var(--ink-2);
    margin-bottom: var(--space-5);
    max-width: 60ch;
  }

  /* Register sections: a serif eyebrow over the content block. */
  .section { margin-block: var(--space-5); }

  .section__title {
    font-family: var(--font-serif);
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--rule);
  }

  /* Sub-grouping inside a section (register municipalities under an area). */
  .section__subtitle {
    font-family: var(--font-serif);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: var(--space-4) 0 var(--space-2);
  }

  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
  .stack-2 { display: flex; flex-direction: column; gap: var(--space-2); }
  ul.stack-2 { padding-left: 0; list-style: none; }
  .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); }
}