.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--flush-top { padding-top: 0; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--color-muted); }
.lede { font-size: clamp(19px, 1.8vw, 22px); color: var(--color-muted); max-width: 640px; line-height: 1.5; }
.stack { display: grid; gap: var(--stack-gap, 16px); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, 12px); align-items: center; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap, 24px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap, 18px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap, 16px); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--lead { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.sticky { position: sticky; top: calc(var(--header-h) + 40px); }
.placeholder-text { color: var(--color-accent-text); font-weight: 600; }

@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split--even, .split--lead { grid-template-columns: 1fr; }
  .sticky { position: static; }
}

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