@layer layout {

  .container {
    width: 100%;
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-m);
  }

  @media (min-width: 64em) {
    .container { padding-inline: var(--space-l); }
  }

  .container--wide { max-inline-size: var(--container-wide); }
  .container--text { max-inline-size: var(--container-text); }

  .section { padding-block: var(--space-2xl); }
  .section--tight { padding-block: var(--space-xl); }
  .section--loose { padding-block: var(--space-3xl); }

  .section--surface { background-color: var(--surface); }
  .section--sunken  { background-color: var(--surface-sunken); }

  .section--deep {
    background-color: var(--surface-deep);

    border-block: 1px solid rgb(255 255 255 / 0.10);
    color: var(--on-deep);
    --ink: var(--on-deep);
    --ink-2: var(--on-deep-2);
    --ink-3: var(--on-deep-2);
    --rule: rgb(255 255 255 / 0.14);
    --rule-strong: rgb(255 255 255 / 0.28);
    --surface: rgb(255 255 255 / 0.04);
    --surface-2: rgb(255 255 255 / 0.07);
    --paper: var(--surface-deep);
    --brand-deep: #9bd93e;
    --data: #8cbcc4;
  }

  .section--surface + .section--surface { border-block-start: 1px solid var(--rule); }

  .flow > * + * { margin-block-start: var(--flow-space, var(--space-m)); }
  .flow--tight { --flow-space: var(--space-2xs); }
  .flow--snug  { --flow-space: var(--space-s); }
  .flow--loose { --flow-space: var(--space-l); }
  .flow--xl    { --flow-space: var(--space-xl); }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap, var(--space-s));
  }
  .cluster--between { justify-content: space-between; }
  .cluster--end     { justify-content: flex-end; }
  .cluster--baseline { align-items: baseline; }

  .grid {
    display: grid;
    gap: var(--gap, var(--space-m));
    grid-template-columns: repeat(auto-fit, minmax(min(var(--col, 16rem), 100%), 1fr));
  }

  .split {
    display: grid;
    gap: var(--gap, var(--space-xl));
    align-items: center;
  }
  @media (min-width: 64em) {
    .split { grid-template-columns: 1fr 1fr; --gap: var(--space-2xl); }
    .split--wide-start { grid-template-columns: 7fr 5fr; }
    .split--wide-end   { grid-template-columns: 5fr 7fr; }
    .split--reverse > :first-child { order: 2; }
  }

  .split--top { align-items: start; }

  /* Heading beside its body: for a section that is one heading plus a
     short text or list, the title takes a narrow left column so the body
     does not sit in a 40rem strip with the right half of the row empty. */
  .headed { display: grid; gap: var(--space-m); }
  @media (min-width: 64em) {
    .headed {
      grid-template-columns: 4fr 8fr;
      column-gap: var(--space-2xl);
      align-items: start;
    }
  }

  .rule {
    position: relative;
    block-size: 1px;
    background-color: var(--rule);
  }
  .rule::before,
  .rule::after {
    content: "";
    position: absolute;
    inset-block-start: -3px;
    inline-size: 1px;
    block-size: 7px;
    background-color: var(--rule-strong);
  }
  .rule::before { inset-inline-start: 0; }
  .rule::after  { inset-inline-end: 0; }

  .center-text { text-align: center; }
  .measure { max-inline-size: var(--container-text); }
  .measure--wide { max-inline-size: 52rem; }
  .measure--center { margin-inline: auto; }
}