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

  .o-container[data-size="narrow"] {
    max-width: var(--container-narrow);
  }

  .o-container[data-size="wide"] {
    max-width: var(--container-wide);
  }

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

  .o-stack[data-gap="s"] { --stack-gap: var(--space-s); }
  .o-stack[data-gap="l"] { --stack-gap: var(--space-l); }
  .o-stack[data-gap="xl"] { --stack-gap: var(--space-xl); }

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

  .o-cluster[data-gap="s"] { --cluster-gap: var(--space-s); }
  .o-cluster[data-gap="xs"] { --cluster-gap: var(--space-xs); }
  .o-cluster[data-justify="between"] { justify-content: space-between; }
  .o-cluster[data-justify="center"] { justify-content: center; }

  .o-grid {
    display: grid;
    gap: var(--grid-gap, var(--space-m));
    grid-template-columns: repeat(var(--grid-cols, 1), minmax(0, 1fr));
  }

  .o-grid[data-cols="2"] { --grid-cols: 2; }
  .o-grid[data-cols="3"] { --grid-cols: 3; }
  .o-grid[data-cols="4"] { --grid-cols: 4; }
  .o-grid[data-gap="l"] { --grid-gap: var(--space-l); }
  .o-grid[data-gap="xl"] { --grid-gap: var(--space-xl); }

  @media (max-width: 768px) {
    .o-grid[data-cols="2"],
    .o-grid[data-cols="3"],
    .o-grid[data-cols="4"] {
      --grid-cols: 1;
    }
  }

  @media (min-width: 640px) {
    .o-grid[data-cols="3"],
    .o-grid[data-cols="4"] {
      --grid-cols: 2;
    }
  }

  @media (min-width: 1024px) {
    .o-grid[data-cols="3"] { --grid-cols: 3; }
    .o-grid[data-cols="4"] { --grid-cols: 4; }
  }

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

  .o-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--switcher-gap, var(--space-m));
  }

  .o-switcher > * {
    flex-grow: 1;
    flex-basis: calc((var(--switcher-threshold, 640px) - 100%) * 999);
  }

  .o-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .o-frame {
    aspect-ratio: var(--frame-ratio, 16 / 9);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .o-frame[data-ratio="square"] { --frame-ratio: 1; }
  .o-frame[data-ratio="portrait"] { --frame-ratio: 3 / 4; }

  .o-cover {
    display: flex;
    flex-direction: column;
    min-height: var(--cover-min, 100vh);
    padding: var(--space-m);
  }

  .o-cover > * {
    margin-block: var(--space-m);
  }

  .o-cover > .o-cover__center {
    margin-block: auto;
  }

  .o-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
  }

  .o-sidebar > :first-child {
    flex-basis: var(--sidebar-width, 300px);
    flex-grow: 1;
  }

  .o-sidebar > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-width: var(--sidebar-content-min, 60%);
  }

  /* Flow - vertical spacing between direct children */
  .o-flow > * + * {
    margin-top: var(--flow-space, var(--space-m));
  }

  .o-flow[data-space="s"] { --flow-space: var(--space-s); }
  .o-flow[data-space="l"] { --flow-space: var(--space-l); }
  .o-flow[data-space="xl"] { --flow-space: var(--space-xl); }

  /* Box - general purpose wrapper with padding */
  .o-box {
    padding: var(--box-padding, var(--space-m));
  }

  .o-box[data-padding="s"] { --box-padding: var(--space-s); }
  .o-box[data-padding="l"] { --box-padding: var(--space-l); }
  .o-box[data-padding="xl"] { --box-padding: var(--space-xl); }

  /* Prose - styled text content */
  .o-prose {
    max-width: 70ch;
    line-height: var(--line-height-relaxed);
  }

  .o-prose > * + * {
    margin-top: var(--space-m);
  }

  .o-prose h2, .o-prose h3, .o-prose h4 {
    margin-top: var(--space-l);
  }

  .o-prose ul, .o-prose ol {
    padding-left: var(--space-m);
  }

  .o-prose ul {
    list-style: disc;
  }

  .o-prose ol {
    list-style: decimal;
  }

  .o-prose li {
    margin-bottom: var(--space-2xs);
  }

  .o-prose a {
    color: var(--color-secondary);
  }

  .o-prose a:hover {
    color: var(--color-secondary-light);
  }
}