/* Shared layout for long pages: full-width bands, an inner column, and the
   numbered section label used across the site ("01 · The problem"). */
.band {
  padding: clamp(3.5rem, 9vw, 7rem) var(--gutter);
}

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

.band--rule {
  border-top: 1px solid var(--color-rule);
}

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

.label {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-sage-deep);
}

.band--ink .label {
  color: var(--color-sage);
}

.label__num {
  font-family: var(--font-mono);
  font-weight: 400;
}

.h2 {
  max-width: 34ch;
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: 1rem;
}

.prose h2 {
  margin-top: 2.75rem;
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.25;
}

.prose ul,
.prose ol {
  display: grid;
  gap: 0.6rem;
  padding-left: 1.25rem;
}

.prose li::marker {
  color: var(--color-sage-deep);
}

.prose strong {
  font-weight: 650;
}