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

.section {
  position: relative;
  width: 100%;
  padding: var(--space-9) 0;
  background: var(--color-surface-primary);
}

.section--secondary { background: var(--color-surface-secondary); }
.section--statement { padding: var(--space-10) 0; }

.section--closing   { padding: var(--space-9) 0; }
.section--flush     { padding: 0; }

.section:has(+ .section--flush) { padding-bottom: var(--space-6); }
.section--flush + .section      { padding-top: var(--space-7); }

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

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

.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

.col-1-5   { grid-column: 1 / 6; }
.col-7-12  { grid-column: 7 / 13; }
.col-1-2   { grid-column: 1 / 3; }
.col-4-10  { grid-column: 4 / 11; }
.col-3-10  { grid-column: 3 / 11; }
.col-1-8   { grid-column: 1 / 9; }
.col-9-12  { grid-column: 9 / 13; }

.layout-editorial {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
}
.layout-editorial > :first-child { grid-column: 1 / 6; }
.layout-editorial > :last-child  { grid-column: 7 / 13; }

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

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

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

.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
}

.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-5  { margin-top: var(--space-5); }
.mt-6  { margin-top: var(--space-6); }
.mt-7  { margin-top: var(--space-7); }
.mt-8  { margin-top: var(--space-8); }

.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-5 > * + * { margin-top: var(--space-5); }

.page-main {
  display: block;
  min-height: 60vh;
}

.page-main--offset { padding-top: var(--space-8); }

.measure-narrow    { max-width: var(--measure-narrow); }
.measure           { max-width: var(--measure-base); }
.measure-wide      { max-width: var(--measure-wide); }
.measure-statement { max-width: var(--measure-statement); }

.section-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  margin-bottom: var(--space-8);
}

.section-intro > * { grid-column: 1 / 7; }

.section-intro--wide > * { grid-column: 1 / 9; }

.section-intro__standfirst { margin-top: var(--space-5); }

.u-muted { color: var(--color-text-tertiary); }
.u-center { text-align: center; }