/* style.css (minimal baseline) */
:root { --bg:#0e0e10; --text:#eaeaea; --accent:#ffd700; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Iceland", sans-serif;
  line-height: 1.5;
}
header { text-align:center; padding:2rem 1rem; }
h1, h3 { font-family: "Iceland", sans-serif; letter-spacing:.5px; }
nav ul { list-style:none; display:flex; gap:1rem; justify-content:center; padding:0; margin:0 0 2rem; }
nav a, nav li { text-decoration:none; color:#ddd; padding:.4rem .6rem; border-radius:.5rem; }
nav a:hover, nav li:hover { background:rgba(255,255,255,.08); }
main { max-width: 900px; margin: 0 auto; padding: 0 1rem 3rem; }

/* Normalize nav list look */
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; justify-content: center; 
}

.site-nav a { text-decoration: none; 
}

.site-nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; 
}

/* ===== Header & title (pop from nav) ===== */
.site-header img{display:block;width:100%;height:auto
}
.site-title{
  font-family:"Iceland",sans-serif;
  font-size:clamp(2.4rem,6vw,6rem);
  line-height:1; margin:.75rem 0 0;
  color: #FFD700; text-align:center;
  text-shadow:0 4px 12px rgba(0,0,0,.6);
  opacity:0; transform:translateY(calc(-1*var(--nav-h))) scale(.98);
  animation:popFromNav 900ms cubic-bezier(.2,.75,.15,1.1) forwards,
           underlineDelay 1ms linear 900ms forwards;
}
.site-title::after{
  content:""; display:block; height:3px; width:0%;
  margin:.6rem auto 0;
  background:linear-gradient(90deg,#b8860b,#ffd700,#b8860b);
  border-radius:999px;
  animation:underlineGrow 700ms ease-out 1200ms forwards;
}

/* ===== Keyframes ===== */
@keyframes popFromNav{
  0%{opacity:0; transform:translateY(calc(-1*var(--nav-h))) scale(.98)}
  60%{opacity:1; transform:translateY(-8px) scale(1.02)}
  100%{opacity:1; transform:translateY(0) scale(1)}
}
@keyframes underlineGrow{to{width:54%}}
@keyframes underlineDelay{} /* just to offset ::after timing */

/* ===== Content container ===== */
.content{max-width:1000px; margin:2rem auto 4rem; padding:0 1rem}

/* ===== Responsive ===== */
@media (max-width:800px){
  :root{--nav-h:56px}
  .site-title::after{height:2px}
}
@media (max-width:480px){
  :root{--nav-h:52px}
  .site-title{font-size:clamp(2rem,9vw,3.2rem)}
  .site-title::after{width:60%}
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .site-title,.site-title::after{animation:none !important; opacity:1 !important; transform:none !important}
}