@layer utilities {

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

  .container--wide { max-width: var(--container-wide); }
  .container--narrow { max-width: var(--container-narrow); }

  .section {
    padding-block: var(--space-section);
  }

  .section[id] {
    scroll-margin-top: calc(-1 * var(--space-section));
  }

  .section--tight { padding-block: var(--space-block); }

  .section--tight[id] {
    scroll-margin-top: calc(-1 * var(--space-block));
  }

  .section--divided { border-top: 1px solid var(--line); }

  .section--lit {
    position: relative;
    isolation: isolate;
  }

  .section--lit::before {
    content: '';
    position: absolute;
    inset: -12% 0 -18%;
    z-index: -1;
    pointer-events: none;
    background-image:
      radial-gradient(72% 58% at 50% 42%, var(--section-glow), transparent 72%);
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-sm));
  }

  .stack--2xs { --stack-gap: var(--space-2xs); }
  .stack--xs { --stack-gap: var(--space-xs); }
  .stack--md { --stack-gap: var(--space-md); }
  .stack--lg { --stack-gap: var(--space-lg); }
  .stack--xl { --stack-gap: var(--space-xl); }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-xs));
  }

  .cluster--between { justify-content: space-between; }

  .grid {
    display: grid;
    gap: var(--grid-gap, var(--space-md));
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .grid--split {
    grid-template-columns: 1fr;
  }

  @media (min-width: 48rem) {
    .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--split { grid-template-columns: 7fr 5fr; }
  }

  @media (min-width: 64rem) {
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  .grid--gap-sm { --grid-gap: var(--space-sm); }
  .grid--gap-lg { --grid-gap: var(--space-lg); }

  .measure { max-width: var(--measure); }
  .measure-narrow { max-width: var(--measure-narrow); }
  .text-muted { color: var(--ink-muted); }
  .text-sm { font-size: var(--text-sm); }
  .nums { font-variant-numeric: tabular-nums; }

  .rule {
    height: 1px;
    border: 0;
    background-color: var(--line);
  }

  .divided > * + * {
    border-top: 1px solid var(--line);
    padding-top: var(--space-md);
    margin-top: var(--space-md);
  }

  .visually-hidden:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .js [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur-reveal) var(--ease-out),
                transform var(--dur-reveal) var(--ease-out);
    transition-delay: calc(var(--reveal-index, 0) * 70ms);
  }

  .js [data-reveal][data-revealed] {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .js [data-reveal] {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  @media print {
    .js [data-reveal] {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
}