/* palette */
:root{
  --forest-green:#2e441a;
  --earth-brown:#5b3e1d;
  --cream:#f5efe0;
  --tan:#d4c2a1;
}

*{box-sizing:border-box;margin:0;padding:0;font-family:sans-serif;}

body{
  background:var(--cream);
  color:var(--forest-green);
  line-height:1.4;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* header + nav */
header{
  background:var(--earth-brown);
  color:var(--cream);
  padding:1rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}
header h1 a{
  color:var(--cream);
  text-decoration:none;
}
nav a{
  color:var(--cream);
  margin-right:1rem;
  text-decoration:none;
}
nav a[aria-current]{text-decoration:underline;}

/* image grid */
.grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  padding:2rem;
}
.grid img{
  width:100%;
  height:auto;
  border:4px solid var(--tan);
  background:var(--tan);
  transition:transform .2s ease;
}
.grid img:hover{transform:scale(1.03);}

/* video section */
.video-wrap{padding:2rem;}
.video-wrap video{
  max-width:100%;
  width:600px;
  height:auto;
  display:block;
  margin-bottom:2rem;
  border:4px solid var(--tan);
  background:var(--tan);
}

/* footer */
footer{
  margin-top:auto;
  background:var(--earth-brown);
  color:var(--cream);
  text-align:center;
  padding:0.8rem;
  font-size:0.9rem;
}
footer img{
  max-width:110px;
  width:25%;
  height:auto;
  margin-bottom:0.4rem;
}

/* lightbox navigation buttons */
.lb-prev,
.lb-next,
.lb-close{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  background:var(--earth-brown);
  color:var(--cream);
  border:none;
  padding:0.4rem 0.6rem;
  cursor:pointer;
  font-size:1.4rem;
  z-index:1002;
}
.lb-prev{left:0.6rem;}
.lb-next{right:0.6rem;}
.lb-close{
  top:1rem;
  right:1rem;
  transform:none;
}
.lb-prev:hover,
.lb-next:hover,
.lb-close:hover{
  background:var(--forest-green);
}