@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* — Reset & Basics — */
* {
  margin: 0;
  padding: 0em;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  background: #000;
  color: #fff;
  /* font-family: 'Inter', sans-serif; */
    font-family: 'Fira Mono','IBM Plex Mono', monospace;

}
.gfm-embed iframe {
    filter: invert(1);
}



/* — Banner Marquee (continuous!) — */
.banner {
  background: #000;
  color: #fff;
  font-size: 0.9rem;
  text-transform: uppercase;
  padding: 0.5rem 0;
  border-bottom: 1px solid #444;
}
/* — grid container for artist cards — */
.artists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin: 2rem;       /* space below the “ARTISTS” heading */
}

@media (min-width: 700px) {
  .artists-grid {
    /* at 700px+ wide, lock into 3 equal columns */
    grid-template-columns: repeat(3, 1fr);
  }
  body{
    padding: 1em;
}
}

/* — each bio card — */
.artist-card {
  border: 2px solid #fff;
  border-radius: 4px;
  padding: 1.5rem;
  text-align: left;
  display: flex;
  flex-direction: column; 
  height: 100%; /* ensures consistent card height */

}


/* — artist name — */
.artist-card h3 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  text-transform: lowercase;
}

/* — bio text — */
.artist-card p {
  font-size: 1rem;
  line-height: 1.5;

}

.artist-link {
  justify-content: space-between; 

  margin-top: auto;
  padding-top: 1rem; /* consistent spacing */

}
.artist-link a {
  color: #fff;
  text-decoration: underline;
}

/* — Page Layout — */
.hero {
  display: flex;
  align-items: center;          /* vertical centering */
  justify-content: center;      /* nav + logo + nav centered */
  gap: 3rem;                    /* tighten the spacing */
  padding-top: 2rem;            /* room below marquee */
  flex-wrap: wrap;
}
/* — Side Nav (no more sticky) — */
.nav {
  width: auto; /* shrink-to-fit */
}
.nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.nav a {
  color: #fff;
  text-decoration: none;
  text-transform: lowercase;
  font-size: 1.3rem; /* bigger per your note */
  line-height: 1.4;
}
.nav--left {
  text-align: left;
}
.nav--right {
  text-align: right;
}

/* — Main & Logo — */
.main {
  text-align: center;
}

.logo img {
  width: 250px; /* fixed size */
}

/* — Sections — */
section {
  margin: 4rem 0;
}
section h2 {
    font-family: 'VT323', monospace;

  font-size: 2rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
  padding: 0.2em;
}
section p {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
  font-size: 1rem;
}

@media screen and (max-width: 480px) {
    html, body {
    overflow-x: hidden;
  }
  .page {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    align-items: stretch;
    flex-wrap: wrap;
}

  

  /* .nav ul {
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
    padding: 0;
  } */

  .nav a {
    font-size: 1rem;
  }

  .logo h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
  

  }

  section {
    margin: 1rem 1rem;
  }

  section h2 {
    font-size: 1.5rem;
  }

  section p {
    font-size: 0.9rem;
    /* padding: 0 1rem; */
  }
}

/*  → Pull in a serif italic for the quote */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,400&display=swap');

/* — Intro Quote — */
.intro-quote {
  font-family: 'Merriweather', serif;
  font-style: italic;
  font-size: 1.2rem;
  color: #ddd;
  margin: 2rem auto;
  max-width: 700px;
  padding-left: 1rem;
  border-left: 4px solid #fff;
}
.intro-quote footer {
  margin-top: 0.5rem;
  font-style: normal;
  font-size: 0.9rem;
  color: #bbb;
}
.intro-quote cite {
  font-style: normal;
  font-weight: bold;
}

/* — Body Text — */
.body-text {
  max-width: 700px;
  margin: 0 auto 2rem auto;
  line-height: 1.6;
  font-size: 1rem;
  color: #eee;
}
.body-text p + p {
  margin-top: 1.5rem;
}

/* — Keywords — */
.keywords {
  max-width: 700px;
  margin: 0 auto 4rem auto;
  text-align: left;
}
.keywords h3 {
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: #bbb;
  margin-bottom: 0.5rem;
}
.keywords ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.keywords li {
  font-size: 0.9rem;
  color: #ddd;
  background: rgba(255,255,255,0.05);
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
}

.landscape-photo {
  text-align: center;     /* center the figure & caption */
  margin: 1rem 0;         /* vertical spacing */
}

.landscape-photo img {
  display: block;         /* so margin auto works */
  max-width: 100%;         /* cap at 80% of its container */
  height: auto;           /* preserve aspect ratio */
  margin: 0 auto;         /* center horizontally */
  border-radius: 4px;     /* optional—soften the corners */
  box-shadow: 0 2px 8px rgba(0,0,0,0.5); /* optional subtle shadow */
}

.landscape-photo figcaption {
  font-size: 0.9rem;
  color: #ccc;
  margin-top: 0.5rem;
  font-style: italic;
}

/* — Map styling — */
.map-wrapper {
  text-align: center;
  margin: 2rem 0;
}
.map-wrapper iframe {
  width: 80%;              /* your requested 80% width */
  height: 400px;           /* adjust as you like */
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* — “Add to calendar” button — */
.btn {
  display: block;
  padding: 0.8rem 4rem;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  text-transform: uppercase;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 4px;
  margin-top: 1rem;
  transition: background 0.3s, color 0.3s;
}
.btn--calendar:hover {
  background: #fff;
  color: #000;
}

.btn-wrapper {
  text-align: center;
  margin-top: 1rem;   /* optional space above */
}

section p a {
  color: #fff;
  text-decoration: underline;
}

section p a:hover {
  opacity: 0.7;
}