/* Layout primitives */

.shell {
  width: min(100% - 2 * var(--grid-margin), var(--grid-max));
  margin-inline: auto;
}

.shell--wide {
  width: min(100% - 2 * var(--grid-margin), 90rem);
  margin-inline: auto;
}

.shell--full {
  width: 100%;
  margin-inline: 0;
  padding-inline: var(--grid-margin);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
}

.span-12 { grid-column: 1 / -1; }
.span-10 { grid-column: span 10; }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }

@media (max-width: 899px) {
  .span-10,
  .span-8,
  .span-7,
  .span-6,
  .span-5,
  .span-4,
  .span-3 {
    grid-column: 1 / -1;
  }
}

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

.stack--sm { gap: var(--space-sm); }
.stack--lg { gap: var(--space-lg); }
.stack--xl { gap: var(--space-xl); }

.section {
  padding-block: var(--space-3xl);
}

@media (max-width: 599px) {
  .section {
    padding-block: var(--space-2xl);
  }

  .section-title {
    max-width: none;
    font-size: clamp(1.75rem, 1.2rem + 4vw, 2.5rem);
  }
}

@media (min-width: 1600px) {
  .section--loose {
    padding-block: var(--space-5xl);
  }
}

.section--tight {
  padding-block: var(--space-2xl);
}

.section--loose {
  padding-block: var(--space-4xl);
}

.section--ink {
  background: var(--color-ink);
  color: var(--color-paper);
}

.section--ink a:hover {
  color: var(--color-accent);
}

.section-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.section--ink .section-label {
  color: color-mix(in srgb, var(--color-paper) 65%, transparent);
}

.section-title {
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 16ch;
}

.section-lede {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  max-width: var(--measure);
  color: var(--color-fg-muted);
}

.section--ink .section-lede {
  color: color-mix(in srgb, var(--color-paper) 72%, transparent);
}

.prose {
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.prose + .prose {
  margin-top: var(--space-md);
}

.rule {
  border: 0;
  border-top: var(--rule-width) solid var(--color-border);
  margin: 0;
}

.rule--accent {
  border-top-color: var(--color-accent);
  width: 3rem;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}