/* Base */
* { box-sizing: border-box; }
body {
  margin:0;
  font-family:system-ui, sans-serif;
  background:url('images/hero-bg.webp') center/cover fixed no-repeat;
  color:#fff;
  background-color: #101116;
}
main { color:#fff; }
.no-scroll { overflow:hidden; }

/* Hero */
#hero { position:relative; height:40vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; color:#fff; margin-top: 20vh;}
.hero-logo { width:150px; height:auto; }
.hero-name { margin-top:1rem; font-size:2rem; }
.hero-tagline { margin-top:.5rem; font-size:1.2rem; }

/* Navigation */
.main-nav {
  position:sticky;
  top:0;
  background:rgba(0,0,0,0.4);
  z-index:10;
  opacity:0;
}
.main-nav ul { list-style:none; margin:0 0 20vh 0; padding:.5rem 0; display:flex; gap:2rem; justify-content:center; }
.main-nav a {
  color:#fff;
  text-decoration:none;
  /* text-transform:uppercase; */
  font-family: "futura-pt", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 1.2rem;
}
.main-nav a.active { border-bottom:1px solid #fff; }

/* Gallery Sections */
.gallery-section { max-width:1280px; margin:100px auto 100px; padding:1rem 5rem 6rem; background-color: #ffffffe8; overflow: hidden; opacity:0;}
.gallery-section h2 {
  /* text-transform:uppercase; */
  margin-top: -2.9rem;
  margin-bottom:1rem;
  font-family: "futura-pt", sans-serif;
  font-weight:500;
  font-style:normal;
  color: #111;
  font-size: 6em;
}
.grid { display:grid; gap:2rem; grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid { grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .grid { grid-template-columns:1fr;} }
.grid .thumb { padding:0; border:none; background:none; cursor:pointer; }
.grid img, .grid video { width:100%; display:block; }

/* Lightbox */
.lightbox { position:fixed; inset:0; background:rgba(0, 0, 0, 0.8); display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.95); pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:100; }
.lightbox.visible { opacity:1; transform:scale(1); pointer-events:auto; }
@media (prefers-reduced-motion: reduce){
  .lightbox { transition:opacity .2s ease; transform:none; }
  .lightbox.visible { transform:none; }
}
.lightbox-inner { position:relative; max-width:90%; max-height:90%; }
.lightbox-image, .lightbox-video { max-width:100%; max-height:80vh; display:none; }
.lightbox-caption { color:#fff; text-align:center; margin-top:1rem; }
.lightbox-close, .lightbox-prev, .lightbox-next { position:absolute; background:none; border:none; color:#fff; font-size:2rem; width:44px; height:44px; cursor:pointer; }
.lightbox-close { top:1rem; right:1rem; }
.lightbox-prev { left:1rem; top:50%; transform:translateY(-50%); }
.lightbox-next { right:1rem; top:50%; transform:translateY(-50%); }

/* Slide animations */
@keyframes slideLeft { from{ transform:translateX(30px); opacity:0; } to{ transform:translateX(0); opacity:1; } }
@keyframes slideRight { from{ transform:translateX(-30px); opacity:0; } to{ transform:translateX(0); opacity:1; } }
@media (prefers-reduced-motion: reduce){
  @keyframes slideLeft { from{opacity:0;} to{opacity:1;} }
  @keyframes slideRight { from{opacity:0;} to{opacity:1;} }
}
.lightbox-inner.slide-left { animation:slideLeft .2s ease; }
.lightbox-inner.slide-right { animation:slideRight .2s ease; }

/* Bio Section */
.bio-section {
  color:#111;
  margin-bottom: 0;
}

.bio-section .name,
.bio-section p {
  opacity:0;
  transform:translateY(20px);
}

.bio-section .name{
  font-family: "futura-pt", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.bio-section  a {
  color:#fff;
  text-decoration:none;
  font-family: "futura-pt", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.8rem;
  background-color:rgba(0,0,0,0.8) ;
  padding: 5px 10px;
  border-radius: 2px;
  display: inline-block;
  margin-top: 3px;
}

/* Error message */
.grid .error {
  grid-column: 1 / -1;
  color: #c00;
  text-align: center;
}
.grid .error button {
  margin-left: 0.5rem;
}