body {
  font-family: sans-serif;
  margin: 0;
  line-height: 1.5;
  background-color: #f6f4ef;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

header {
  background: #4d3434;
  color: #fff;
  padding: 1rem;
  text-align: center;
}

header h1 {
  margin: 0;
}

.justify-block {
  max-width: 80ch;
  text-align: justify;
  margin: 2rem auto;
  /* adjust top/bottom and left/right spacing */
  line-height: 1.6;
  /* a bit more breathing room */
}

.logo-container {
  text-align: center;
  margin-bottom: 0.5rem;
}

.logo {
  max-width: 400px;
  max-height: 400px;
  width: 100%;
  /* will shrink on narrow viewports */
  height: auto;
  /* keeps aspect ratio */
  object-fit: contain;
  display: inline-block;
}

/* “Meet the Band” section */
.members {
  max-width: 900px;
  margin: 3rem auto;
  padding: 0 1rem;
}

.members h2 {
  text-align: center;
  margin-bottom: 2rem;
}

.members-grid {
  display: grid;
  /* 2 columns: each at least 180px, then share leftover space */
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 2rem;
  justify-items: center;    /* center each card in its cell */
}

/* Make the first member (Michelle) span both columns */
.members-grid .member:nth-child(1) {
  grid-column: 1 / -1;
}

.member {
  /* let the grid cell size control the card width, but cap it */
  max-width: 180px;
  text-align: center;
}

.member .bio {
  margin: 0;            /* zero out default top margin */
  line-height: 1.4;
}

.member img {
  width: 180px;
  height: 180px;
  object-fit: cover;    /* crop to fill the square */
  border-radius: 50%;   /* now yields a true circle */
  display: block;
  margin: 0 auto 0.5rem;
}

.member .instruments {
  font-size: 0.95rem;
  margin: 0 0 0.3rem;   /* a little space below */
}

.member h3 {
  margin: 0.25rem 0;
  font-size: 1.1rem;
}

.member p {
  font-size: 0.9rem;
  line-height: 1.4;
}

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

.nav li {
  margin: 0 1rem;
}

.nav a {
  color: #fff;
  text-decoration: none;
}

.nav a:hover {
  text-decoration: underline;
}

main {
  padding: 2rem;
}

.pic-container {
  text-align: center;
  margin-bottom: 0.5rem;
}

.pic {
  max-width: 600px;
  max-height: 600px;
  width: 100%;
  /* will shrink on narrow viewports */
  height: auto;
  /* keeps aspect ratio */
  object-fit: contain;
  display: inline-block;
}

footer {
  background: #4d3434;
  color: #fff;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
}

footer .social-icons {
  margin-top: 0.5rem; /* or however much spacing you need */
  display: inline-flex; 
  gap: 10px; 
}

footer .social-icons img {
  width: 24px;
  height: 24px;
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;

  /* backfill the grid so smaller items slide up into gaps */
  grid-auto-flow: dense;
}

.gallery-item.large {
  grid-column: span 2;   /* first two images stay big */
}

.gallery-item.wide {
  grid-column: span 2;   /* fill a two-column slot */
}

.gallery-item.tall {
  grid-row: span 2;      /* fill a two-row slot */
}

.setlist-table {
  max-width: 1000px;
  width: 90%;
  margin: 2rem auto;
  border-collapse: collapse;
}

.setlist-table th,
.setlist-table td {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid #ddd;
  text-align: left;
  font-size: 0.95rem;
}

.setlist-table thead th {
  border-bottom: 2px solid #bbb;
  font-weight: bold;
}

.shows {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.shows h3 {
  margin-bottom: 0.5rem;
  color: #333;
}

.show-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}

.show-table th,
.show-table td {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid #ddd;
  text-align: left;
  font-size: 0.95rem;
}

.show-table thead th {
  border-bottom: 2px solid #bbb;
}

.shows.past .show-table tbody tr td {
  opacity: 0.6;        /* de-emphasize past shows */
}

.site-header {
  display: flex;
  align-items: center;        /* vertically center logo and text */
  padding: 1rem;
  background: #333;
  color: #fff;
}

@media (max-width: 600px) {
  .show-table thead {
    display: none;
  }
  .show-table,
  .show-table tbody,
  .show-table tr,
  .show-table td {
    display: block;
    width: 100%;
  }
  .show-table tr {
    margin-bottom: 1.5rem;
  }
  .show-table td {
    text-align: right;
    padding-left: 50%;
    position: relative;
  }
  .show-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 45%;
    padding-left: 0.5rem;
    font-weight: bold;
    text-align: left;
  }
}