@layer compositions {
  /* Stack: vertical flow with configurable spacing */
  .stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .stack > * + * {
    margin-block-start: var(--stack-space, var(--space-md));
  }

  /* Cluster: horizontal flex with gap and wrapping */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--space-md));
    align-items: center;
  }

  /* Sidebar: two-column layout with one fixed-ish side */
  .sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sidebar-gap, var(--space-lg));
  }

  .sidebar > :first-child {
    flex-basis: var(--sidebar-width, 20rem);
    flex-grow: 1;
  }

  .sidebar > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 50%;
  }

  /* Grid: auto-fit responsive grid with configurable min column size */
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 250px), 1fr));
    gap: var(--grid-gap, var(--space-md));
  }

  /* Center: max-width container with auto margins */
  .center {
    box-sizing: content-box;
    max-inline-size: var(--center-width, var(--content-width));
    margin-inline: auto;
    padding-inline: var(--center-padding, var(--space-md));
  }

  /* Cover: full viewport height section */
  .cover {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .cover > * {
    margin-block: auto;
  }

  .cover > :first-child {
    margin-block-start: 0;
  }

  .cover > :last-child {
    margin-block-end: 0;
  }

  /* Section: consistent section padding with centering */
  .section {
    padding-block: var(--section-space, var(--space-3xl));
    max-inline-size: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--space-md);
  }

  /* Scroll margin: offsets anchor targets below sticky nav */
  #projects,
  #resume,
  #stats,
  #contact {
    scroll-margin-top: 4rem;
  }
}