@layer layout {
  .container {
    width: min(100% - (2 * var(--gutter)), var(--container));
    margin-inline: auto;
  }

  .container--narrow {
    width: min(100% - (2 * var(--gutter)), var(--container-narrow));
    margin-inline: auto;
  }

  .full-bleed {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

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

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

  .section--dark {
    background: var(--color-graphite);
    color: var(--color-ivory);
  }

  .section--brand {
    background: var(--color-brand);
    color: var(--color-ivory);
  }

  .editorial-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap);
  }

  .grid-span-12 { grid-column: span 12; }
  .grid-span-8 { grid-column: span 8; }
  .grid-span-7 { grid-column: span 7; }
  .grid-span-6 { grid-column: span 6; }
  .grid-span-5 { grid-column: span 5; }
  .grid-span-4 { grid-column: span 4; }

  .split {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(var(--space-7), 8vw, var(--space-10));
    align-items: center;
  }

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

  .stack--tight { --stack-space: var(--space-3); }
  .stack--loose { --stack-space: var(--space-7); }

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

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

  .section-heading {
    display: grid;
    gap: var(--space-5);
    max-width: 60rem;
  }

  .section-heading > p:not(.eyebrow) {
    color: var(--color-muted);
    font-size: var(--text-lead);
  }

  .section--dark .section-heading > p,
  .section--brand .section-heading > p {
    color: rgb(244 240 232 / 86%);
  }

  .safe-bottom {
    padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
  }
}