/* Base */
:root{
  --surf-blue:#0080c0;
  --dark-bg:#111;
  --text:black;
  --max-content: 820px;
  --nav-size: clamp(1.4rem, 3vw + 0.5rem, 2.6rem);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--surf-blue);
  color: var(--text);
  text-align:center;
}

.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding: 32px 20px;
}

.hero{max-width: var(--max-content); margin: 0 auto;}
.logo{max-width: 420px; width: 80%; height:auto; margin: 10px auto 16px; display:block;}

.tagline{font-size: 1.2rem; margin: 8px 0 6px; font-weight: 700;}
.achievements{font-size: 0.95rem; margin: 0 0 18px;}

.main-nav{display:flex; gap: clamp(14px, 3vw, 32px); justify-content:center; flex-wrap:wrap; margin-top: 12px;}
.main-nav a{
  text-decoration:none;
  color: var(--text);
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: var(--nav-size);
}
.main-nav a:hover{text-decoration:underline;}

.music-wrap{max-width: var(--max-content); margin: 0 auto; width:100%;}
.music-wrap h1{font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem); margin: 10px 0 12px; font-weight:800;}

.minimal-list p{margin: 8px 0;}
.minimal-list a{color: var(--text); text-decoration:none; font-size: 1.25rem;}
.minimal-list a:hover{text-decoration:underline;}

.player-footer{margin-top:auto;}
.spotify{margin: 0 auto; width: 100%; max-width: 680px;}
.spotify iframe{border-radius: 12px; width: 100%; height: 380px; display:block;}

/* Dark strip styling */
.dark-strip{
  background-color: var(--dark-bg);
  padding: 20px 0;
}

.back-nav{margin: 28px 0 10px;}
.back-nav a{color: var(--text); font-weight:800; text-decoration:none;}
.back-nav a:hover{text-decoration:underline;}

@media (min-width: 1200px){
  .logo{max-width: 520px;}
  .spotify{max-width: 760px;}
}