.wrap {
  width: min(var(--max-w), 100% - 2 * var(--space-6));
  margin-inline: auto;
}
.wrap--narrow {
  width: min(var(--max-w-narrow), 100% - 2 * var(--space-6));
  margin-inline: auto;
}
.wrap--wide {
  width: min(var(--max-w-wide), 100% - 2 * var(--space-4));
  margin-inline: auto;
}

.band {
  padding-block: var(--space-16);
}
.band--sm {
  padding-block: var(--space-10);
}
.band--lg {
  padding-block: var(--space-24);
}
.band--dark {
  background-color: var(--olive);
  color: var(--cream);
}
.band--mid {
  background-color: var(--olive-mid);
  color: var(--cream);
}
.band--cream {
  background-color: var(--cream-light);
}
.band--sand {
  background-color: var(--cream-mid);
}
.band--gold {
  background-color: var(--gold);
  color: var(--olive);
}

.grid-asymm {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 768px) {
  .grid-asymm { grid-template-columns: 3fr 2fr; }
}

.grid-asymm--rev {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 768px) {
  .grid-asymm--rev { grid-template-columns: 2fr 3fr; }
}

.grid-thirds {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 560px) {
  .grid-thirds { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid-thirds { grid-template-columns: repeat(3, 1fr); }
}

.grid-quarters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
@media (min-width: 960px) {
  .grid-quarters { grid-template-columns: repeat(4, 1fr); }
}

.grid-halves {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 720px) {
  .grid-halves { grid-template-columns: repeat(2, 1fr); }
}

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

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.stack--sm { gap: var(--space-2); }
.stack--lg { gap: var(--space-8); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.sidebar-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 960px) {
  .sidebar-layout { grid-template-columns: 1fr 320px; }
}

.editorial-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 768px) {
  .editorial-strip {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

.matrix-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .matrix-block { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .matrix-block { grid-template-columns: repeat(3, 1fr); }
}

.timeline-track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.timeline-track::before {
  content: '';
  position: absolute;
  inset-inline-start: 20px;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold), transparent);
}
@media (min-width: 768px) {
  .timeline-track::before { inset-inline-start: 50%; }
}

.comparison-strip {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--cream-mid);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 640px) {
  .comparison-strip { grid-template-columns: repeat(3, 1fr); }
}

.spotlight-module {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 860px) {
  .spotlight-module { grid-template-columns: 1fr 1fr; }
}