.band-profile {
  margin: 2.25rem 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid #d7deea;
  border-top: 4px solid #8a1a2b;
  background: #f7f9fc;
}

.band-profile__eyebrow {
  margin: 0 0 .4rem;
  color: #8a1a2b;
  font: 700 .75rem/1.3 "Roboto Mono", monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.band-profile h2 { margin-top: 0; }

.band-profile__grid {
  display: grid;
  gap: 1rem;
}

.band-profile dl {
  display: grid;
  gap: .8rem;
  margin: 0;
}

.band-profile dt {
  color: #657088;
  font: 700 .72rem/1.3 "Roboto Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.band-profile dd { margin: .15rem 0 0; }

.band-socials {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.2rem;
}

.band-socials a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: .55rem .8rem;
  border: 1px solid #bcc6d8;
  color: #0a1224;
  font: 700 .78rem/1 "Roboto", sans-serif;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.band-socials a:hover,
.band-socials a:focus-visible {
  border-color: #8a1a2b;
  background: #fff;
  color: #8a1a2b;
}

.story-figure--portrait {
  max-width: 22rem;
  margin: 2.25rem auto;
  background: transparent;
  border: 0;
}

.story-figure--portrait img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 281 / 466;
  object-fit: cover;
  background: transparent;
  border: 1px solid #d7deea;
}

.story-figure--portrait figcaption {
  padding: .65rem 0 0;
  color: #657088;
  font: .82rem/1.55 "Roboto", sans-serif;
}

.story-figure--interview {
  max-width: 40rem;
  margin: 2.25rem auto;
}

.story-figure--interview img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 860px) {
  .cover-figure img {
    object-fit: contain;
  }
}

.cover .lead {
  font-size: clamp(1.12rem, 1.55vw, 1.3rem);
  line-height: 1.55;
  color: #38465b;
}

@media (min-width: 720px) {
  .band-profile__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .band-socials a { transition: none; }
}