.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.container--read { max-width: var(--container-read); }

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

.bleed-pad {
  padding-inline: max(var(--pad-x), calc((100vw - var(--container)) / 2));
}

.section { padding-block: var(--section-y); }
.section--dark { padding-block: var(--section-y-dark); background: var(--c-deep); }
.section--split { padding-block: 0; }
.section--tight { padding-block: var(--sp-8); }
.section--blue { background: var(--c-paper-blue); }
.section--paper { background: var(--c-paper); }

.section--rule-top { border-top: var(--bw-hair) solid var(--c-line); }
.section--rule-bottom { border-bottom: var(--bw-hair) solid var(--c-line); }

.section-tag {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  font-weight: var(--fw-med);
  letter-spacing: var(--ls-mono);
  color: var(--c-muted);
}
.section-tag::before {
  content: "";
  width: 2px;
  height: 24px;
  background: var(--c-copper);
  flex: none;
}
.on-dark .section-tag { color: var(--c-focus-invert); }
.on-dark .section-tag::before { background: var(--c-copper-invert); }

.sec-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
  margin-bottom: var(--sp-9);
}
.sec-head__main { grid-column: 1 / span 6; }
.sec-head__aside { grid-column: 8 / span 5; }

.sec-head__main:only-child,
.sec-head__aside:only-child { grid-column: 1 / span 12; }

@media (min-width: 1024px) {
  .sec-head.is-swapped .sec-head__main,
  .sec-head.is-swapped .sec-head__aside { grid-row: 1; }
  .sec-head.is-swapped .sec-head__main { grid-column: 7 / span 6; }
  .sec-head.is-swapped .sec-head__aside { grid-column: 1 / span 5; }
  .sec-head.is-swapped .sec-head__main:only-child,
  .sec-head.is-swapped .sec-head__aside:only-child { grid-column: 1 / span 12; }
}
.sec-head__aside:only-child { padding-top: 0; margin-top: 0; }

@media (min-width: 1024px) {
  .sec-head__aside { padding-top: calc(24px + var(--sp-4)); }
}
.sec-head__title { margin-top: var(--sp-4); max-width: var(--measure-h2); }
.sec-head__text {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-muted);
  max-width: 46ch;
}
.sec-head__link { margin-top: var(--sp-5); }

.sec-head__main:only-child .sec-head__title,
.sec-head__aside:only-child .sec-head__text { max-width: none; }

@media (max-width: 1023px) {
  .sec-head { margin-bottom: var(--sp-7); }
  .sec-head__main { grid-column: 1 / span 12; }
  .sec-head__aside { grid-column: 1 / span 12; margin-top: var(--sp-5); }
}

.wire {
  display: grid;
  border-top: var(--bw-hair) solid var(--c-line);
  border-left: var(--bw-hair) solid var(--c-line);
}
.wire > * {
  border-right: var(--bw-hair) solid var(--c-line);
  border-bottom: var(--bw-hair) solid var(--c-line);
  min-width: 0;
}
.wire--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wire--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wire--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wire > :only-child { grid-column: 1 / -1; }

@media (max-width: 1023px) {
  .wire--4, .wire--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .wire--4, .wire--3, .wire--2 { grid-template-columns: 1fr; }
}