/* ========== NAVIGATION HEADER ========== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);

  backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.75);

  border-bottom: 1px solid rgba(0,0,0,0.08);

  padding-block: 1rem; /* makes header taller */
  font-size:1rem; 
}


.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem clamp(1rem, 5vw, 2rem);
}

.logo {
  font-weight: bold;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  font-size: 48px;  
}

.nav-links {
  display: flex;
  gap: 1rem;
}

.nav-links a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background: #629aa9;
  transition: width 0.3s ease;
}

.nav-links a:hover::after {
  width: 100%;
}



/* ========== MAIN SITE ========== */


.page-content {
  padding: 1rem;
} 

/* 
body {
  font-family: sans-serif;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
} */


body {
  font-family: sans-serif;
  font-size: 1rem;
  color: black;
  line-height: 1.6;
  margin: 0;
}

/* Dreamy blurred background layer */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background-image: url("../images/background03.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  filter: blur(20px) brightness(1.2);
  transform: scale(1.08); /* prevents white edges from blur */
}


/* body {
    font-family: sans-serif;
    background: linear-gradient(135deg, #9CD9E7, #e4ffd6);
    margin:0;
    font-size: 2rem;   
    line-height: 1.6;
} 
*/

header {
    margin-bottom: 1rem;
}

h1 {
    font-family: sans-serif;
    font-size: 4rem;
    color: black;
    margin: 0;
    /* color: #333; */
    text-align: center;
    margin-bottom: 1rem;
}


h2 {
    font-family: sans-serif;
    font-size: 2rem;
    margin: 0;
    color: black;
    /* color: #333; */
    margin-bottom: 1rem;
    padding: 2rem;
}

.text-div {
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap:1rem;
    max-width: 800px;

}


.month-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: clamp(1rem, 3vw, 2rem);
    padding-inline: clamp(1rem, 5vw, 2rem);
    padding-bottom: 2rem;
}


.month-link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: rgba(255,255,255,0.6);
  border-radius: 6px;
  text-decoration: none;
  color: #000;
  font-weight: bold;
}

.month-link img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
}

.month-link {
  transition: all 0.3s ease;
}

.month-link:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  background: blue
}


.ascii-art {
  font-family: monospace;
  white-space: pre;     /* ← critical */
  margin: 0;
}




/* ========== HOVER PREVIEW ========== */

#preview {
    position:fixed;
    width:320px;
    pointer-events:none;
    opacity:0;
    transition: opacity 0.2s ease;
}


#preview img {
    width: 100%;
    border-radius: 4px;
}


/* ========== PAGE SPECIFIC CSS ========== */

/*TODO SOME OF THIS IS REPEATED -- FIX */
.listening-log {
  margin-top: 1rem;
  /* max-width: 700px; */
  line-height: 1.5;

  font-family: sans-serif;
  font-size: 8rem;
  color: #333;
  text-align: center;
  margin-bottom: 1rem;}

.listening-log h2 {
   font-family: sans-serif;
    font-size: 2rem;
    margin: 0;
    color: #333;
    margin-bottom: 1rem;
}

.listening-log section {
  margin-bottom: 1rem;
  font-family: sans-serif;
    font-size: 1rem;
}

.listening-log h3 {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  opacity: 0.7;
}

.listening-log ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.listening-log li {
  margin-bottom: 0.4rem;
}

.listening-log a {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px dotted rgba(0,0,0,0.4);
}

.listening-log a:hover {
  background: yellow;
}


.listening-log section:nth-of-type(1) h3 { color: #629aa9; } /* Bandcamp */
.listening-log section:nth-of-type(2) h3 { color: #9b6cff; } /* Nina */
.listening-log section:nth-of-type(3) h3 { color: #ff7700; } /* SoundCloud */


/* ========== BANDCAMP EMBEDS ========== */

.embed {
  width: 100%;
  max-width: 900px;
  margin: 1.5rem auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.embed iframe {
  width: 100%;
  border: 0;
}

/* ========== CONTACT PANEL ========== */

.contact-panel {
  margin-top: 2rem;
  padding: 2rem 1rem;
  background: linear-gradient(135deg, #e4ffd6, #9CD9E7);
  text-align: center;
  font-size:1rem;
}

.contact-inner {
  max-width: 600px;
  margin: 0 auto;
}

.contact-panel h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.contact-panel p {
  margin-bottom: 1.5rem;
  opacity: 0.8;
}

.contact-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.contact-links a {
  text-decoration: none;
  font-weight: bold;
  color: #333;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
  transition: all 0.3s ease;
}

.contact-links a:hover {
  background: #629aa9;
  color: white;
  transform: translateY(-2px);
}

/* ========== BACK LINK ========== */

.back-link {
  display: inline-block;
  margin-top: 1rem;
  font-family: sans-serif;
  font-size: 2rem;
  text-decoration: none;
  color: #333;
  border-bottom: 1px dotted rgba(0,0,0,0.4);
  padding-bottom: 2px;
}

.back-link:hover {
  background: yellow;
}