.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.main {
  min-height: calc(100vh - var(--nav-height));
  padding-block: var(--s-12) var(--s-16);
}
@media (max-width: 640px) {
  .main { padding-block: var(--s-8) var(--s-12); }
}

.section {
  padding-block: var(--s-12);
}
.section--tight { padding-block: var(--s-8); }
.section--loose { padding-block: var(--s-16); }
.section + .section { border-top: 1px solid var(--color-border-subtle); }

.grid {
  display: grid;
  gap: var(--s-6);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 960px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.stack > * + * { margin-top: var(--s-4); }
.stack--lg > * + * { margin-top: var(--s-8); }
.stack--xl > * + * { margin-top: var(--s-12); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.prose {
  max-width: 65ch;
}
.prose p + p,
.prose p + ul,
.prose p + ol,
.prose ul + p,
.prose ol + p,
.prose h2,
.prose h3 { margin-top: var(--s-5); }
.prose h2 { margin-top: var(--s-10); }
.prose h3 { margin-top: var(--s-8); }
.prose ul, .prose ol { padding-left: var(--s-6); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }
.prose li + li { margin-top: var(--s-2); }
.prose a { font-weight: var(--font-weight-medium); }

.breadcrumbs {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  padding-block: var(--s-4);
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.breadcrumbs li + li::before { content: '/'; margin-right: var(--s-2); color: var(--color-text-muted); }
.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-text-primary); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--color-text-primary); }