@layer layout {
  .page {
    width: min(100% - 2 * var(--gutter), var(--page-max));
    margin-inline: auto;
    padding-block: var(--space-xl) var(--space-3xl);
  }

  .page--wide { --page-max: 96rem; }
  .page--flush { padding-block: 0; }

  .stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-s)); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-xs)); }
  .split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-s); }

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

  .with-sidebar {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: minmax(0, 1fr);
  }

  @media (width >= 60rem) {
    .with-sidebar { grid-template-columns: minmax(0, 1fr) 20rem; }
  }

  .section-head {
    display: grid;
    gap: var(--space-2xs);
    margin-block-end: var(--space-l);
  }

  .eyebrow {
    font-family: var(--font-marquee);
    font-size: var(--step--1);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 60ch; }
}