/* 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, "Iceland", "Segoe UI", Roboto, Helvetica, Arial, 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 {
opacity: 1; 
transform: none; 
}

/* Animate only when motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  .site-title {
    opacity: 0;
    transform: translateY(calc(-1 * var(--nav-h))) scale(.98);
    animation: popFromNav 900ms cubic-bezier(.2,.75,.15,1.1) forwards;
  }
  .site-title::after {
    content: "";
    display: block;
    height: 3px;
    width: 0;
    margin: .6rem auto 0;
    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
	}
}