/* Reset */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Base */
body {
  font-family: 'Iceland', sans-serif;
  color: #BF8915;           /* dark yellowish gold text color for body */
  background: #1c1c1c;      /* slate/charcoal background */
  line-height: 1.5;
}

/* Full-bleed banner */
.site-header {
  position: relative;  /* allows overlay title */
  margin: 0;
  padding: 0;
  /* Do NOT set line-height:0 here or the H1 may vanish */
}
.site-header img {
  display: block;      /* removes inline image gap */
  width: 100%;
  height: auto;
}

/* Overlay title on the banner */
.site-title {
  font-size: clamp(2rem, 4vw + 1rem, 6rem);
  line-height: 1;
  position: absolute;
  left: 50%;
  bottom: 10%;                     /* nudge higher/lower as needed */
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  z-index: 1;

  /* start hidden; animate in and stay */
  opacity: 0;
  animation: fadeSlideIn 1.2s ease-out forwards, goldShine 4s ease-in-out infinite;
  animation-delay: 0s, 1.2s;

  /* gold shine */
  background: linear-gradient(90deg, #b8860b, #ffd700, #b8860b);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,.35); /* subtle contrast on light banner zones */
}

/* Keyframes */
@keyframes fadeSlideIn {
  0%   { opacity: 0; transform: translate(-50%, -16px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes goldShine {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Sticky nav under header */
.site-nav {
  position: sticky;
  top: 0;
  background: rgba(20,20,20,.75);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.site-nav ul {
  margin: 0 auto;
  padding: .5rem 1rem;
  list-style: none;
  display: flex;
  gap: 1rem;
  justify-content: center;
  max-width: 1000px;
}
.site-nav a {
  color: #efefef;
  text-decoration: none;
  padding: .5rem .75rem;
  border-radius: .5rem;
}
.site-nav a:hover, .site-nav a:focus-visible {
  background: rgba(255,255,255,.08);
}

/* Content + footer */
.content { max-width: 1000px; margin: 2rem auto; padding: 0 1rem 3rem; }
.site-footer { text-align: center; color: #bdbdbd; padding: 1.5rem 1rem 3rem; }