/* Basic reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Colors & typography */
:root {
  --black: #1a1a1a;
  --cream: #fff4e6;
  --accent: #ff4694; /* Marzipan-pink */
  --font-sans: "Fredoka", Arial, sans-serif;
  font-family: var(--font-sans);
  line-height: 1.6;
  color: var(--black);
  background: var(--cream);
}

/* Layout helpers */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

nav a {
  margin-left: 1.2rem;
  text-decoration: none;
  font-weight: 600;
  color: var(--black);
}

nav a:hover {
  color: var(--accent);
}

.header-logo {
  display: block;
  margin: 3rem auto 2rem;
  width: clamp(200px, 50vw, 600px);
  height: auto;
}

.intro-text {
  max-width: 85ch;
  margin: 2.5rem auto 4rem;
  font-size: 1.125rem;
  text-align: center;
}

/* Hero section */
.hero {
  text-align: center;
  padding: 4rem 1rem;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 1.5rem;
  color: var(--accent);
}

.logo {
  height: clamp(40px, 8vw, 72px);
  width: auto;

}

/* Align page copy with the left edge of the logo */
.wrapper {
  padding-left: 6rem;              /* tweak this if the logo width changes */
  padding-right: 2rem;
  max-width: 70rem;
  margin-inline: auto;
}

/* SHOW LIST — relaxed card style --------------------------- */
.show-list {
  list-style: none;
  margin: 0 0 3rem 0;
  padding: 0;
}

.show-item {
  display: grid;
  grid-template-columns: minmax(9ch, 19ch) 1.2fr 1.2fr auto; /* 4 columns */
  gap: 0.6rem 0.8rem;             /* tighter gap between 2nd & 3rd col */
  align-items: center;

  padding: 1rem 1.25rem;
  margin-bottom: 1rem;

  border: 1px solid var(--black);
  border-radius: 12px;
  background: var(--cream);
}

.show-date     { font-weight: 600; }
.show-tickets  { text-align: right; }      /* keeps link on the right */
.show-tickets a {
  text-decoration: none;
  font-weight: 700;
  color: var(--accent);
}

.news-item { margin-block: 2.75rem; }

/* ============================================================
   MOBILE TWEAKS  –  Anything ≤ 600 px wide (portrait phones)
   ========================================================== */
@media (max-width: 600px) {

  /* 1. Reduce left indent so content isn’t shoved off-screen */
  .wrapper {
    padding-left: 1.25rem;   /* was 6rem */
    padding-right: 1.25rem;
  }

  /* 2. Show cards become a single-column flex block */
  .show-item {
    grid-template-columns: 1fr;    /* one column */
    gap: 0.25rem 0;                /* tighter vertical spacing */
    text-align: left;              /* everything left-aligned */
  }

  /* Put a little space between lines */
  .show-item > span { margin-top: 0.15rem; }

  /* Tickets link sits under venue, full-width */
  .show-tickets { text-align: left; }

  /* 3. Keep nav from smashing logo; allow wrap and center */
  header nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1rem;
    margin-top: 0.75rem;
  }

  /* 4 ▸ Images scale down sooner */
  .header-logo { width: clamp(180px, 70vw, 400px); }
  .band-img    { width: clamp(220px, 85vw, 500px); }

  /* Optional: shrink the logo in the corner a bit */
  .logo { height: clamp(32px, 6vw, 48px); }
}

/* Demo track */
.demo-track {
  margin: 3rem auto 4rem;
  text-align: center;
}
.demo-track h2 {
  font-size: 1.5rem;
  margin-bottom: 0.8rem;
  color: var(--accent);
}

/* ============================================================
   BAND PHOTOS — uniform tiles
   ========================================================== */
.band-photos {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 2.5rem 0;
  flex-wrap: wrap;                /* stacks on narrow screens */
}

.member {
  text-align: center;
  width: clamp(160px, 25vw, 220px);  /* responsive width */
}

.member-img {
  /* ► The magic ◄ */
  aspect-ratio: 1 / 1;            /* perfect square tile */
  width: 100%;
  object-fit: cover;              /* zoom‑crop to fill the square */
  object-position: center;        /* keep faces centered */
  border-radius: 12px;
  display: block;
}

.member figcaption {
  margin-top: 0.45rem;
  font-weight: 600;
  font-size: 1rem;
}

/* SoundCloud widget */
.sc-player {
  max-width: 600px;   /* keeps it tidy on giant monitors */
  display: block;
  margin-inline: auto;
}