:root {
 --green:#1b7f5c;
 --gold:#c9a44c;
 --bg:#fafafa;
}

body {
 margin:0;
 font-family:Inter, sans-serif;
 background:var(--bg);
 color:#1b4d3e;
}

.hero{
 position:relative;
 height:100vh;
 background:
   linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.45)),
   url('../images/hero.jpg') center/cover no-repeat;
 display:flex;
 align-items:center;
 justify-content:center;
 overflow:hidden;
}

.overlay {
 position:absolute;
 inset:0;
 background:rgba(0,0,0,.5);
}

.content {
 position:relative;
 text-align:center;
 color:white;
}

.content h1 {
 font-family:'Playfair Display', serif;
 font-size:3.2rem;
}

.date {
 letter-spacing:2px;
 margin:10px 0 20px;
}

.enter {
 border:1px solid var(--gold);
 padding:14px 36px;
 border-radius:40px;
 color:white;
 text-decoration:none;
}

.enter:hover { background:var(--gold); }

.gallery-header {
 text-align:center;
 padding:40px 20px;
}

nav button {
 background:transparent;
 border:1px solid var(--gold);
 color:var(--green);
 margin:6px;
 padding:10px 20px;
 border-radius:30px;
 cursor:pointer;
}

nav button:hover { background:var(--gold); color:white; }

.gallery {
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
 gap:24px;
 padding:40px;
 max-width:1400px;
 margin:auto;
}

.gallery.empty {
 display:flex;
 justify-content:center;
 align-items:center;
 height:40vh;
}

.hint {
 font-style:italic;
 color:#777;
}

.gallery a {
 position:relative;
 border-radius:18px;
 overflow:hidden;
 box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.gallery img {
 width:100%;
 height:220px;
 object-fit:cover;
}

.play {
 position:absolute;
 inset:0;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:48px;
 color:white;
 background:rgba(0,0,0,.35);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-content {
  animation: fadeUp 1.2s ease-out forwards;
}

.back-home {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--text);
  opacity: 0.6;
  transition: opacity 0.3s;
}

.back-home:hover {
  opacity: 1;
}

.gallery a {
  animation: fadeUp 0.6s ease-out;
}





.gallery a::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(201,164,76,0.35);
  border-radius: 22px;
  pointer-events: none;
}



.gallery {
  background:
    linear-gradient(
      to bottom,
      rgba(143,174,160,0.08),
      transparent 120px
    );
}