@layer components {
  .shell {
    max-width: var(--column);
    margin-inline: auto;
    padding: var(--space-6) max(var(--gutter), var(--safe-right))
             var(--floor) max(var(--gutter), var(--safe-left));
  }

  @media (width <= 60rem) {
    .shell {
      padding: var(--space-4) max(var(--gutter), var(--safe-right))
               var(--floor) max(var(--gutter), var(--safe-left));
    }
  }

  .main { gap: var(--space-4); }

  
  .main--cards { min-width: 0; }

  @media (width <= 48rem) {
    .main:not(.main--article):not(.main--cards) { padding-inline: var(--space); }
  }

  
  .main--article {
    max-width: var(--article);
    margin-inline: auto;
  }

  
  .page--narrow {
    max-width: 30rem;
    margin-inline: auto;
    padding-top: var(--space-10);
  }

  .stack        { display: flex; flex-direction: column; gap: var(--space-3); }
  .stack--tight { gap: var(--space); }
  .stack--loose { gap: var(--space-6); }

  .stack--snug  { gap: calc(var(--space) / 2); }

  .row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .row--between { justify-content: space-between; }
  .row--tight { gap: var(--space); }

  
  .row--end { align-items: flex-end; }

  .muted { color: var(--ink-muted); }
  .faint { color: var(--ink-faint); font-size: var(--text-sm); }

  
  .hint { color: var(--ink); max-width: var(--measure); }
}