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

.band {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: var(--rail-gap);
  align-items: start;
  border-top: 1px solid var(--border);
  padding-top: clamp(3rem, 5vw, 4.5rem);
  margin-top: clamp(4rem, 8vw, 7rem);
}

.band > :not(.label) { grid-column: 2; }

.band > .label {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  position: sticky;
  top: 5.25rem;
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--primary);
  color: var(--foreground);
}

.band.open {
  border-top: 0;
  padding-top: 0;
  margin-top: clamp(5rem, 10vw, 9rem);
}

@media (min-width: 901px) {
  .band > .label + .steps li { border-top: 0; padding-top: 0; }
  .band > .label + .feat { border-top: 0; }
  .band > .label + .feat > .feat-item:nth-child(-n + 2) { padding-top: 0; }
  .band > .label + .feat > .feat-item:nth-child(-n + 2) dt {
    margin-top: calc(var(--cap-gap) - 0.484em);
  }
}

.split {
  grid-template-columns: var(--rail) minmax(0, 1fr) minmax(0, 1.35fr);
  column-gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}
.split > .label { align-self: start; }
.split .split-copy { grid-column: 2; }
.split .shot       { grid-column: 3; margin-top: 0.6rem; }

.split.flip { grid-template-columns: var(--rail) minmax(0, 1.35fr) minmax(0, 1fr); }
.split.flip .split-copy { grid-column: 3; }
.split.flip .shot       { grid-column: 2; }

.split:has(.shot-phone)      { grid-template-columns: var(--rail) minmax(0, 1fr) auto; }
.split.flip:has(.shot-phone) { grid-template-columns: var(--rail) auto minmax(0, 1fr); }

.head-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.head-row > p {
  margin: calc(var(--cap-gap) - 0.433em) 0 0;
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  max-width: 42ch;
}

.band > .bleed {
  grid-column: 1 / -1;
  margin-inline: calc(var(--gut) * -1);
}
@media (min-width: 1304px) {
  .band > .bleed { margin-inline: -2.5rem; }
}

.band:has(> .bleed) > .label { position: static; }

@media (max-width: 1100px) {
  :root { --rail-gap: 2rem; --rail: 7.5rem; }
}

@media (max-width: 900px) {

  .band,
  .split,
  .split:has(.shot-phone),
  .split.flip:has(.shot-phone) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
  .band > :not(.label),
  .split .split-copy,
  .split .shot,
  .split.flip .split-copy,
  .split.flip .shot { grid-column: 1; }

  .band > .label {
    grid-column: 1;
    position: static;
    border-top: 0;
    margin: 0 0 1.75rem;
    padding: 0;

    max-width: none;
    display: flex;
    align-items: center;
    gap: 0.85rem;
  }

  .band > .label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--primary);
  }

  .split .shot-phone { width: min(320px, 74vw); }
  .split .shot-phone .plate { height: auto; width: 100%; }

  .split { align-items: start; }
  .split .split-copy { margin-bottom: 2.25rem; }
  .split.flip .split-copy { order: 2; }
  .split.flip .shot { order: 3; }

  .head-row { grid-template-columns: 1fr; }
  .head-row > p { margin-top: 0; }
}

@media (max-width: 640px) {
  :root { --gut: 1.25rem; }
  body { font-size: 1rem; }
  .band > .bleed { margin-inline: calc(var(--gut) * -1); }
}