.band { padding: 0 0 8rem; scroll-margin-top: 1.5rem; }

.band__body { display: grid; row-gap: 3rem; }

.band__lede { max-width: 30ch; }

.band__lede--narrow { max-width: 22ch; }

.band__prose p,
.card__line {
  max-width: 38rem;
  margin: 0;
  font-size: var(--body);
  line-height: 1.7;
}
.band__prose p { margin: 0 0 var(--para-gap); }
.band__prose p:last-child { margin-bottom: 0; }

.band__sub {
  margin: 0 0 1rem;
  font: 900 var(--sub) / .95 var(--font-slab);
  letter-spacing: var(--track-display);
}

.band__sub--display {
  font-size: var(--display);
  line-height: .88;
}

.eq {
  display: flex;
  align-items: flex-end;
  gap: .4rem;
  height: 7rem;
  margin: 0;
}

.eq__bar {
  flex: 1;
  height: calc(var(--h) * 100%);
  background: var(--eyebrow-ink);
  transform-origin: bottom;
}

@keyframes eq { from { transform: scaleY(.4); } to { transform: scaleY(1); } }

@media (prefers-reduced-motion: no-preference) {
  .eq__bar {
    animation: eq 2.6s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -110ms);
  }
}

.card__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 0 1.25rem;
  object-fit: cover;
}

.card__title { margin: 0 0 1rem; font: inherit; line-height: 1; }

.band__cta { margin: 0; text-align: center; }

#about .case__meta::before { content: "\e029"; content: "\e029" / ""; }
#drives .case__meta::before { content: "\e92c"; content: "\e92c" / ""; }
#range .case__meta::before { content: "\e1bd"; content: "\e1bd" / ""; }
#passion .case__meta::before { content: "\ea19"; content: "\ea19" / ""; }
#wonder .case__meta::before { content: "\e66a"; content: "\e66a" / ""; }
#heart .case__meta::before { content: "\eb9b"; content: "\eb9b" / ""; }
#portfolio .case__meta::before { content: "\f06c"; content: "\f06c" / ""; }

.band--cards .band__body { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 767px) {
  .eq__bar:nth-child(n+25) { display: none; }
}

@media (max-width: 1139px) {
  .bands { max-width: 40rem; margin-inline: auto; }
}

@media (min-width: 700px) and (max-width: 1139px) {
  .band--cards .band__body { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .band--cards .band__cta { grid-column: 1 / -1; }
}

@media (min-width: 1140px) {
  .bands {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .band {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "meta title title title title title title title title title title title"
      "meta body  body  body  body  body  body  body  body  body  body  body";
    align-items: start;
  }

  .band .case__meta {
    grid-area: meta;
    justify-content: end;
    height: 100%;
    margin: 0;
    text-align: start;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

  .band .case__meta::before {
    text-orientation: upright;
    transform: rotate(180deg);
  }

  .band .case__title { grid-area: title; padding-left: 1rem; }

  .band__body {
    grid-area: body;
    grid-template-columns: subgrid;
    column-gap: 2rem;
    padding-left: 1rem;
  }

  .band__body > * { grid-column: 1 / -1; }

  .band__item--left { grid-column: 1 / span 5; }
  .band__item--right { grid-column: 7 / -1; }
  .band__item--wide { grid-column: 1 / span 9; }
  .band__item--col-1 { grid-column: 1 / span 4; }
  .band__item--col-2 { grid-column: 5 / span 4; }
  .band__item--col-3 { grid-column: 9 / -1; }

  .band--cards .band__body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .band--cards .band__body > * { grid-column: auto; }
  .band--cards .band__cta { grid-column: 1 / -1; }
}

@media print {
  .band { padding: 1.2rem 0; break-inside: avoid; }
  .case__meta::before { display: none; }
  .eq { display: none; }
}