:root{
  --red:#C62828; --green:#2E7D32; --gold:#C9A227; --blue:#2E6DA4; --silver:#C0C7D1;
  --bg-winter:#f4f8ff; --bg-classic:#fffaf3; --ink:#222;
  --rounded:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);}
header{position:sticky;top:0;z-index:999;background:linear-gradient(90deg,var(--blue),var(--silver));}
.nav{display:flex;align-items:center;gap:16px;max-width:1200px;margin:0 auto;padding:10px 16px;}
.nav a.brand{font-weight:800;color:white;text-decoration:none}
.nav ul{display:flex;gap:12px;list-style:none;margin:0 0 0 auto;padding:0}
.nav a{color:white;text-decoration:none;padding:8px 10px;border-radius:8px}
.nav a:hover{background:rgba(255,255,255,.15)}
.footer{background:#101418;color:#ddd;padding:24px;text-align:center}
main{max-width:1200px;margin:0 auto;padding:24px}

/* Landing hero */
.hero{background:var(--bg-winter);padding:0 0 24px 0}
.hero-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center}
.hero img{width:100%;height:auto;border-radius:var(--rounded);box-shadow:0 10px 30px rgba(0,0,0,.15)}

.btn{display:inline-block;background:var(--red);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none}
.btn.sec{background:var(--green)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.card{border:1px solid #eee;border-radius:12px;padding:16px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.notice{background:#fff3cd;border-left:6px solid var(--gold);padding:12px;border-radius:8px}
.small{font-size:.9rem;opacity:.8}
.hidden{display:none !important}

@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
}

/* Snowflakes */
.snowflake{position:fixed;top:-10px;color:#fff;user-select:none;pointer-events:none;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(110vh)}}
.prefers-reduced-motion .snowflake{display:none}

/* Gallery */
.gallery img{width:100%;height:auto;border-radius:10px}
audio{width:100%; margin:10px 0}

/* === Slideshow stage & audio placement fix === */
#stage{
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
#stage img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
#player{
  display: block;
  margin-top: 12px;
}

/* === Gallery Lightbox === */
#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.lightbox-inner {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  text-align: center;
}
#lightbox img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(255,255,255,0.3);
}
#lightbox p {
  color: #fff;
  margin-top: 8px;
  font-size: 0.9rem;
}
.close-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #fff;
  border: none;
  color: #000;
  font-size: 1.5rem;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 50%;
  cursor: pointer;
}
.close-btn:hover {
  background: #c9a227;
  color: #fff;
}