/* This is CSS: it styles the HTML */
/* style.css */
body {
  margin: 0;
  background: white;
  font-family: "helvetica neue", helvetica, arial, sans-serif;
}

nav {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px clamp(12px, 4vw, 28px);
  background-color: transparent;
  box-sizing: border-box;
}

nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 4vw, 30px); /* spacing between items */
  padding: 0;
  margin: 0;
  justify-content: center;
  margin-inline: auto;
  width: 100%;
}

nav li a {
  display: inline-block;
  background: black;
  color: white;
  font-size: clamp(0.95rem, 2.6vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -1px;
  padding: clamp(8px, 1.2vw, 8px) clamp(6px, 1.6vw, 12px);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 1;
}

nav li a:link,
nav li a:visited,
nav li a:active {
  color: white;
  text-decoration: none;
}

nav li a:hover {
  background: #333; /* hover effect */
}

/* Tighter nav on small screens */
@media (max-width: 640px) {
  nav { padding: 8px clamp(10px, 4vw, 16px); }
  nav ul { gap: clamp(4px, 2.5vw, 12px); }
  nav li a { letter-spacing: -0.5px; }
}

/* Extra-small screens: make sure it always fits */
@media (max-width: 420px) {
  nav ul { justify-content: center; }
  nav li a { font-size: clamp(0.9rem, 3.2vw, 1.05rem); padding: 4px 8px; }
}


/* Responsive foundation */
html, body {
  min-height: 100%;
  margin: 0;
}

/*
  Logo sizing controls
  - Change --logo-max to set the maximum size the logo can grow to.
  - Change --logo-min to ßset the smallest size on tiny screens.
*/
:root{
  --logo-max: 90vw; /* adjust this to fine‑tune max logo size */
  --logo-min: 30vw; /* adjust this to fine‑tune min logo size */
}

section.bigfront {
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh; /* center hero nicely on most screens */
  padding: 8vh 16px 6vh; /* breathing room and mobile side padding */
}

.logo {
  /*
    The logo scales with the viewport but never larger than --logo-max
    and never smaller than --logo-min.
    Tweak --logo-max above to change the maximum.
  */
  width: clamp(var(--logo-min), 70vw, var(--logo-max));
  height: auto;
  position: relative;
  margin: 0 auto;
  display: block;
  margin-top: -200px;

}
.flower {
  width: 80vw;
  height: auto;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1; /* Ensure the flower is behind the logo */
  opacity: 0.9;
}

.listen a {
  display: block;
  background: black;
  margin-left: auto;
  margin-right: auto;
  color: tomato;
  font-size: clamp(22px, 6.5vw, 64px); /* scales on mobile/desktop */
  font-weight: 400;
  letter-spacing: -2px;
  padding: 2px 6px;
  text-decoration: none;
  position: relative;
  text-align: center;
  margin-top: -350px;
  align-items: center;
  justify-content: center;
  width: fit-content;
  text-decoration: underline;
}

.listen a:link,
.listen a:visited,
.listen a:active {
  color: tomato;
  text-decoration: underline;
}

.listen a:hover {
  background: #333; /* hover effect */
  color: white;
}

.volume-library {
  display: flex;
  flex-direction: column; /* stack vertically */
  align-items: center;    /* center horizontally */
  gap: .2rem;              /* space between volumes */
}
.volume {
  text-align: center;
}

.volume h2 {
  font-size: 5rem;
  font-weight: 800;
  text-transform: lowercase;
  color: black;
  margin: 0;
  padding-bottom: 5px;
  letter-spacing: -5px;
  margin-top: 20px;
  text-decoration: underline;

}

.volume h2 a:link,
.volume h2 a:visited,
.volume h2 a:active {
  color: black;
  text-decoration: underline;
}

.volume p {
  font-style: italic;
  font-size: 1rem;
  margin-top: 5px;
}

.episode-library {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-bottom: 240px; /* extra bottom space for volume 1 page */
}

.episode {
  text-align: center;
}

.episode h2 {
  font-size: 5rem;
  font-weight: 800;
  text-transform: lowercase;
  margin: 0;
  padding-bottom: 5px;
  letter-spacing: -5px;
  margin-top: 20px;
  text-decoration: underline;
}

.episode h2 a:link,
.episode h2 a:visited,
.episode h2 a:active {
  color: black;
  text-decoration: none;
}

.episode p {
  font-style: italic;
  font-size: 1rem;
  margin-top: 5px;
}

/* legacy non-hyphenated container for episode pages */
.episodelibrary {
  display: flex;
  flex-direction: column; /* stack vertically */
  align-items: center;    /* center horizontally */
  gap: 3rem;              /* space between episodes */
}