/* ============================================================
   duelinghistory.com - shared music page stylesheet
   Lives at:  public_html/music/music.css
   Each music page links to it with:  <link rel="stylesheet" href="../music.css">
   ============================================================ */

:root{
  --navy:  #1b2a4a;
  --red:   #d64545;
  --cream: #f4f1ea;
  --ink:   #2b2b2b;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:var(--cream);
  color:var(--ink);
  font-family:Arial, Helvetica, sans-serif;
  line-height:1.6;
}

/* ---------- header / nav ---------- */
.site-header{
  background:var(--navy);
  padding:14px 20px;
}
.header-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.logo{
  font-family:'Luckiest Guy', Arial, Helvetica, sans-serif;
  font-size:30px;
  letter-spacing:1px;
  color:var(--cream);
  text-decoration:none;
}
.logo span{ color:var(--red); }

.site-nav{ display:flex; flex-wrap:wrap; gap:22px; }
.site-nav a{
  color:var(--cream);
  text-decoration:none;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:1px;
  padding-bottom:3px;
  border-bottom:3px solid transparent;
}
.site-nav a:hover,
.site-nav a.active{ border-bottom-color:var(--red); }

/* ---------- page body ---------- */
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:34px 20px 60px;
}

.page-title{
  font-family:'Luckiest Guy', Arial, Helvetica, sans-serif;
  font-size:42px;
  line-height:1.15;
  color:var(--navy);
  margin:0 0 6px;
}
.credit{
  font-size:17px;
  color:var(--red);
  font-weight:bold;
  margin:0 0 24px;
}

/* ---------- video card ---------- */
.video-card{
  background:#000;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 22px rgba(27,42,74,.25);
  margin-bottom:30px;
}
.video-card video{
  display:block;
  width:100%;
  height:auto;
}

/* ---------- notes card ---------- */
.notes{
  background:#fff;
  border-left:6px solid var(--red);
  border-radius:0 10px 10px 0;
  padding:20px 24px;
  box-shadow:0 3px 12px rgba(0,0,0,.08);
  margin-bottom:32px;
}
.notes h2{
  font-family:'Luckiest Guy', Arial, Helvetica, sans-serif;
  font-size:24px;
  color:var(--navy);
  margin:0 0 10px;
  letter-spacing:.5px;
}
.notes p{ margin:0 0 12px; }
.notes p:last-child{ margin-bottom:0; }

/* ---------- back button ---------- */
.back-btn{
  display:inline-block;
  background:var(--red);
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  font-size:15px;
  letter-spacing:.5px;
  padding:12px 24px;
  border-radius:999px;
  box-shadow:0 3px 10px rgba(214,69,69,.35);
}
.back-btn:hover{ background:var(--navy); box-shadow:0 3px 10px rgba(27,42,74,.35); }

/* ---------- small screens ---------- */
@media (max-width:600px){
  .page-title{ font-size:30px; }
  .logo{ font-size:24px; }
  .site-nav{ gap:14px; }
  .site-nav a{ font-size:13px; }
  .wrap{ padding:24px 14px 44px; }
}