@import url('tokens.css');

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-canvas);
  font: var(--text-body-md);
  color: var(--text-primary-dark);
}
img { max-width: 100%; display: block; }
a { color: var(--link-color); text-decoration: none; }
a:hover { color: var(--link-color-hover); }
h1, h2, p { margin: 0; }
::selection { background: var(--accent-primary); color: var(--grey-0); }

.section {
  padding: var(--space-8) var(--space-7);
  max-width: var(--content-max-width);
  margin: 0 auto;
}
.section--alt { background: var(--bg-canvas-alt); }
.section--light { background: var(--cream); }

.section-title {
  font: var(--text-display-md);
  text-transform: uppercase;
  color: var(--text-primary-dark);
  margin: 0 0 var(--space-6);
}
.section-title--on-light { color: var(--text-primary-light); }

.eyebrow {
  font: var(--text-meta-md);
  font-family: var(--font-eyebrow);
  color: var(--accent-primary);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.text-dim { color: var(--cream-dim); }

/* eyebrow flanked by rule lines */
.eyebrow-rule { display: flex; align-items: center; gap: 16px; }
.eyebrow-rule--hero { margin-bottom: var(--space-4); }
.eyebrow-rule--album { margin-bottom: var(--space-5); }
.eyebrow-rule__line { height: 1px; background: var(--accent-primary); }
.eyebrow-rule__line--fixed { width: 44px; flex: none; }
.eyebrow-rule__line--flex { flex: 1; }
.eyebrow-rule__text {
  font: var(--text-meta-md);
  font-family: var(--font-eyebrow);
  color: var(--accent-primary);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- navbar ---------- */
.navbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: color-mix(in oklch, var(--bg-canvas) 96%, transparent);
  position: sticky;
  top: 0;
  z-index: 1100;
}
.navbar__brand {
  font: var(--text-display-sm);
  color: var(--text-primary-dark);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}
.navbar__brand:hover { color: var(--text-primary-dark); }
.navbar__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
  justify-self: center;
}
.navbar__link {
  font: var(--text-meta-sm);
  font-family: var(--font-nav);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary-dark);
  text-decoration: none;
}
.navbar__link--active { color: var(--accent-primary); }
.navbar__link:hover { color: var(--cream); }

.navbar__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  justify-self: end;
  background: none;
  border: none;
  color: var(--text-primary-dark);
  cursor: pointer;
  padding: 0;
  grid-column: 3;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--bg-canvas);
  z-index: 1200;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu__close {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  background: none;
  border: none;
  color: var(--text-primary-dark);
  cursor: pointer;
  padding: 0;
}
.mobile-menu__brand {
  position: absolute;
  top: var(--space-6);
  left: 0;
  right: 0;
  text-align: center;
  font: var(--text-display-sm);
  color: var(--text-primary-dark);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  text-decoration: none;
}
.mobile-menu__link {
  font: var(--text-display-sm);
  font-family: var(--font-nav);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-primary-dark);
  text-decoration: none;
}
body.mobile-menu-open .video-gallery__frame iframe { pointer-events: none; }
body.mobile-menu-open .navbar__hamburger { visibility: hidden; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.btn:hover { opacity: 0.8; }
.btn:disabled { cursor: default; opacity: 0.5; }

.btn--sm { padding: 8px 18px; font: var(--text-meta-sm); }
.btn--md { padding: 11px 26px; font: var(--text-meta-md); }
.btn--lg { padding: 15px 34px; font: var(--text-display-sm); }

.btn--primary { background: var(--accent-primary); color: var(--grey-0); }
.btn--secondary { background: transparent; color: var(--text-primary-dark); border: 2px solid oklch(0.42 0.014 60); }
.btn--ghost { background: transparent; color: var(--accent-primary); }

/* ---------- hero ---------- */
.hero { background: var(--bg-canvas); }
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-8) var(--space-7);
  gap: var(--space-8);
}
.hero__title {
  font: var(--text-display-xl);
  color: var(--text-primary-dark);
  text-transform: uppercase;
  margin: var(--space-4) 0 var(--space-5);
}
.hero__text {
  font: var(--text-body-md);
  color: var(--text-secondary-dark);
  max-width: 440px;
  margin: 0 0 var(--space-6);
}
.hero__link { color: var(--cream); text-decoration: underline; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.hero__actions-mobile {
  display: none;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-7) var(--space-8);
  gap: var(--space-4);
}
.hero__image {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.hero__image img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- album ---------- */
.album__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-8) var(--space-7) var(--space-8);
}
.album__image { border-radius: var(--radius-sm); overflow: hidden; width: 90%; }
.album__image img { width: 100%; display: block; }
.album__title {
  font: var(--text-display-lg);
  color: var(--text-primary-dark);
  text-transform: uppercase;
  margin: 0 0 var(--space-6);
}
.album__player { border: 0; width: 100%; height: 120px; display: block; margin: 0 0 var(--space-5); }
.album__text {
  font: var(--text-body-md);
  color: var(--text-secondary-dark);
  margin: 0 0 var(--space-5);
}
.album__link { color: var(--cream-mid); text-decoration: underline; }

.album__reviews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-7) var(--space-8);
}
.album__review-card {
  background: var(--bg-surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  box-sizing: border-box;
}
.album__review-stars { color: var(--accent-primary); font-size: 1.1rem; letter-spacing: 0.1em; margin-bottom: calc(var(--space-4) * -1 + var(--space-3)); }
.album__review-quote { font: var(--text-quote); font-size: 1.15rem; color: var(--cream-mid); }
.album__review-source {
  font: var(--text-meta-sm);
  font-family: var(--font-meta);
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: auto;
}

/* ---------- video gallery ---------- */
.video-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.video-gallery--stacked { display: flex; flex-direction: column; }
.video-gallery__item { display: flex; flex-direction: column; gap: var(--space-3); }
.video-gallery__frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--grey-2);
}
.video-gallery__frame iframe { width: 100%; height: 100%; border: none; }
.video-gallery__title {
  font: var(--text-meta-md);
  font-family: var(--font-meta);
  color: var(--text-secondary-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- show listing ---------- */
.show-listing { display: flex; flex-direction: column; }
.show-listing__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.show-listing__link { display: flex; flex-direction: column; gap: 4px; text-decoration: none; min-width: 0; }
.show-listing__date { font: var(--text-meta-md); font-family: var(--font-meta); color: var(--accent-primary); letter-spacing: 0.04em; }
.show-listing__venue { font: var(--text-display-sm); color: var(--text-primary-dark); text-transform: uppercase; }
.show-listing__city { font: var(--text-body-sm); color: var(--text-secondary-dark); margin-top: var(--space-1); }
.show-listing__actions { display: flex; gap: var(--space-3); flex: 0 0 auto; }
.show-listing__tickets {
  font: var(--text-meta-sm);
  color: var(--text-primary-dark);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 9px 22px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.show-listing__tickets:hover { background: var(--bg-surface-card); border-color: var(--cream-dim); }

/* ---------- bio ---------- */
.bio__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}
.bio__text { font: var(--text-body-lg); color: var(--text-primary-light); }
.bio__extra {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.bio__link { color: var(--grey-1); text-decoration: underline; }

/* ---------- quote card ---------- */
.quote-card {
  background: var(--bg-surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.quote-card__text { font: var(--text-quote); color: var(--text-primary-dark); }
.quote-card__attribution {
  font: var(--text-meta-sm);
  font-family: var(--font-meta);
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- photo gallery ---------- */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-8);
}
.photo-gallery__item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--grey-2);
  cursor: pointer;
}
.photo-gallery__item img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1300;
}
.lightbox.is-open { display: flex; }
.lightbox__close {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  background: none;
  border: none;
  color: var(--cream);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.lightbox__image { max-width: 90vw; max-height: 90vh; object-fit: contain; }

/* ---------- press ---------- */
.press__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-8) var(--space-7) var(--space-6);
}
.press__grid .quote-card__attribution { margin-top: auto; }
.press__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-7) var(--space-8);
}
.press__link-card {
  background: var(--bg-surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.press__link-card a { font: var(--text-body-lg); color: var(--text-primary-dark); text-decoration: underline; }
.press__link-source {
  font: var(--text-meta-sm);
  font-family: var(--font-meta);
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- publicity / booking ---------- */
.pub-booking { text-align: center; }
.pub-booking__list {
  display: flex;
  flex-direction: column;
  max-width: 640px;
  margin: 0 auto;
}
.pub-booking__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-subtle);
  text-align: left;
}
.pub-booking__row--last { border-bottom: 1px solid var(--border-subtle); }
.pub-booking__label {
  font: var(--text-meta-sm);
  font-family: var(--font-meta);
  color: var(--accent-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 4px;
}
.pub-booking__info { display: flex; flex-direction: column; gap: 6px; }
.pub-booking__org { font: var(--text-display-sm); color: var(--text-primary-dark); }
.pub-booking__contact { font: var(--text-body-md); color: var(--text-secondary-dark); }
.pub-booking__links {
  font: var(--text-meta-md);
  font-family: var(--font-meta);
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.pub-booking__links a { color: var(--accent-primary); font-weight: 400; }

/* ---------- contact ---------- */
.contact { text-align: center; }
.contact--social { padding-bottom: 0; }
.contact--mailing-list { padding-top: var(--space-4); padding-bottom: var(--space-9); }
.contact__title { margin: 0 0 var(--space-4); }
.contact__text {
  font: var(--text-body-md);
  color: var(--text-secondary-dark);
  margin: 0 0 var(--space-6);
}
.social { display: flex; justify-content: center; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.social__link { display: inline-flex; }
.social__link svg { width: 52px; height: 52px; }

/* ---------- mailing list form ---------- */
.mailing-form {
  max-width: 420px;
  margin: 0 auto;
  padding: 32px;
  background: var(--bg-surface-card);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  text-align: left;
}
.mailing-form__field { display: flex; flex-direction: column; gap: var(--space-2); }
.mailing-form__field label {
  font: var(--text-meta-sm);
  font-family: var(--font-meta);
  color: var(--text-secondary-dark);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.mailing-form__field input,
.mailing-form__field select {
  box-sizing: border-box;
  padding: 7px 12px;
  font: var(--text-body-md);
  font-family: var(--font-display);
  background: oklch(0.93 0.02 85);
  color: var(--text-primary-light);
  border: 2px solid var(--accent-primary);
  border-radius: 13px;
  outline: none;
  transition: border-color 0.15s ease;
}
.mailing-form__field input:hover,
.mailing-form__field input:focus,
.mailing-form__field select:hover,
.mailing-form__field select:focus { border-color: var(--tan-700); }
.mailing-form__honeypot { position: absolute; left: -5000px; }
.mailing-form__submit {
  padding: 8px 30px;
  font: var(--text-body-md);
  font-weight: 500;
  background: var(--accent-primary);
  color: var(--grey-0);
  border: none;
  font-family: var(--font-button);
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: opacity 0.15s ease;
  margin-top: var(--space-2);
  align-self: center;
}
.mailing-form__submit:hover { opacity: 0.8; }

/* ---------- supersonic trio page ---------- */
.section-title--center { text-align: center; }
.text-highlight { color: var(--cream-mid); }

.trio-hero { padding-bottom: var(--space-7); }
.trio-hero__heading { display: flex; flex-direction: column; align-items: stretch; width: fit-content; margin: 0 auto; }
.trio-hero__title {
  font: 600 clamp(2.75rem, 5vw, 5.25rem)/1 var(--font-display);
  color: var(--text-primary-dark);
  text-transform: uppercase;
  margin: 0 0 var(--space-7);
  text-align: center;
  white-space: nowrap;
}
.trio-hero__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  margin: 0 auto var(--space-7);
  max-width: 68%;
}
.trio-hero__photo { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; }
.trio-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.trio-text {
  font: var(--text-body-md);
  color: var(--text-secondary-dark);
  max-width: 720px;
  margin: 0 auto var(--space-4);
  text-align: center;
}
.trio-text--gap-7 { margin-bottom: var(--space-7); }

.press-clip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: 720px;
  margin: 0 auto;
}
.press-clip { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; }
.press-clip img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bandmates { max-width: 920px; }
.bandmates__list { display: flex; flex-direction: column; gap: var(--space-7); }
.bandmate-row { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-6); align-items: start; }
.bandmate-row__photo { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; }
.bandmate-row__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bandmate-row__name { font: var(--text-display-sm); color: var(--text-primary-dark); text-transform: uppercase; margin-bottom: var(--space-4); }
.bandmate-row__bio { font: var(--text-body-md); color: var(--text-secondary-dark); margin: 0; line-height: 1.8; }

.trio-videos { display: flex; flex-direction: column; gap: var(--space-5); align-items: center; }
.trio-videos__item { aspect-ratio: 16 / 9; max-width: 640px; width: 100%; border-radius: var(--radius-sm); overflow: hidden; }
.trio-videos__item iframe { width: 100%; height: 100%; border: 0; display: block; }

.trio-text--gap-5 { margin-bottom: var(--space-5); }

.press-clip-grid--4 { grid-template-columns: repeat(4, 1fr); max-width: 920px; }

.trio-press__eyebrow { max-width: 320px; margin: 0 auto var(--space-4); }

.trio-streaming { display: flex; justify-content: center; align-items: center; gap: var(--space-3); margin-bottom: var(--space-7); }
.trio-streaming a { display: inline-flex; }
.trio-streaming svg { width: 52px; height: 52px; }

.trio-socials { text-align: center; padding: 0 var(--space-7) var(--space-8); }
.trio-socials__title { margin: var(--space-8) 0 var(--space-5); }

/* ---------- trio toggle switcher ---------- */
.trio-toggle {
  background: var(--bg-canvas);
  display: flex;
  justify-content: center;
  padding-top: var(--space-6);
  margin-bottom: calc(var(--space-6) * -0.6);
}
.trio-toggle__pill {
  display: inline-flex;
  padding: 3px;
  background: var(--grey-0);
  border-radius: 12px;
  gap: 4px;
  box-shadow: inset 0 3px 6px oklch(0 0 0 / 0.3), inset 0 0 0 1px oklch(0 0 0 / 0.18);
}
.trio-toggle__link {
  padding: 9px 20px 8px;
  border-radius: 8px;
  background: transparent;
  font: var(--text-meta-sm);
  font-family: var(--font-eyebrow);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary-dark);
  text-decoration: none;
}
.trio-toggle__link:hover { color: var(--cream); }
.trio-toggle__link--active {
  background: var(--bg-surface-card);
  color: var(--accent-primary);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.4);
}
.trio-toggle__link--active:hover { color: var(--cream); }

.navbar--trio { grid-template-columns: 1fr auto 1fr; }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .navbar__links { display: none; }
  .navbar__hamburger { display: flex; }

  .hero__grid { grid-template-columns: 1fr; padding-top: var(--space-4); padding-bottom: 0; padding-left: var(--space-6); padding-right: var(--space-6); gap: var(--space-6); }
  .hero__text { margin-bottom: 0; }
  .hero__actions { display: none; }
  .hero__actions-mobile { display: flex; flex-direction: column; margin-top: var(--space-7); padding-left: var(--space-6); padding-right: var(--space-6); padding-bottom: var(--space-7); }
  .hero__actions-mobile a { width: 100%; box-sizing: border-box; text-align: center; }
  .eyebrow-rule--hero { gap: 0; }
  .eyebrow-rule--hero .eyebrow-rule__text { display: none; }
  .eyebrow-rule--hero .eyebrow-rule__line--fixed { width: auto; flex: 1; }

  .album__grid { grid-template-columns: 1fr; gap: var(--space-6); padding-left: var(--space-6); padding-right: var(--space-6); padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .album__image { width: 100%; }
  .album__reviews { grid-template-columns: 1fr; gap: var(--space-6); padding-bottom: var(--space-7); }

  #videos .section,
  #shows,
  #bio .section,
  #photos { padding-top: var(--space-7); padding-bottom: var(--space-7); }

  .bio__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .bio__grid .quote-card { padding-top: var(--space-4); padding-bottom: var(--space-4); }

  .photo-gallery { gap: var(--space-7); }

  .press__grid,
  .press__links { grid-template-columns: 1fr; gap: var(--space-6); padding-left: var(--space-6); padding-right: var(--space-6); }
  .press__grid { padding-top: var(--space-7); }
  .press__links { padding-bottom: var(--space-7); }

  .pub-booking__row { grid-template-columns: 1fr; gap: var(--space-2); }
  .pub-booking { padding: var(--space-7) var(--space-6); }

  .contact--social { padding: var(--space-7) var(--space-6) 0; }
  #contact { scroll-margin-top: 32px; }
  .contact--mailing-list { padding-top: var(--space-3); padding-left: var(--space-6); padding-right: var(--space-6); }

  .section-inset { padding-left: var(--space-6); padding-right: var(--space-6); }

  .show-listing__row { flex-direction: column; align-items: flex-start; }

  .trio-hero__photos { grid-template-columns: 1fr; max-width: 100%; gap: var(--space-4); }
  .trio-hero__heading { width: 100%; }
  .trio-hero__heading .eyebrow-rule__line--flex { min-width: 16px; }
  .trio-hero__title { white-space: normal; }
  .press-clip-grid { grid-template-columns: 1fr 1fr; }
  .press-clip-grid--4 { grid-template-columns: 1fr 1fr; }
  .bandmate-row { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .bandmate-row__photo { width: 160px; }
}