:root{
  --text:#f6f1ea;
  --muted:#e8dfd6;
  --panel:rgba(255,255,255,0.12);
  --panel-border:rgba(255,255,255,0.35);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --btn-bg:#efe2d2;
  --btn-text:#3a2a20;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:'Merriweather', serif; color:var(--text); background:#0f0b09}
.site-wrap{min-height:100%}

/* Top bar */
.topbar{position:sticky; top:0; z-index:50; backdrop-filter:blur(10px) saturate(120%); background:rgba(20,14,12,.55); border-bottom:1px solid rgba(255,255,255,.2)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 20px}
.brand{display:flex; align-items:center; gap:10px}
.logo{width:36px; height:36px; object-fit:contain}
.brand-name{font-weight:700}
.nav a{color:var(--text); text-decoration:none; margin-left:14px; opacity:.9}
.nav a:hover{opacity:1; text-decoration:underline}

/* Hero with background */
.hero{
  position:relative; min-height:72vh; display:flex; align-items:flex-end; justify-content:center;
  background-image:url('assets/background.png');
  background-size:cover; background-position:center;
}
.hero-overlay{position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 20%, rgba(18,12,10,.15) 0%, rgba(18,12,10,.55) 55%, rgba(18,12,10,.72) 100%)}
.hero-content{position:relative; width:100%; max-width:1150px; padding:24px 20px 40px}

/* Title & tagline */
.site-title{font-family:'Great Vibes', cursive; font-size:52px; margin:0 0 6px}
.tagline{margin:0 0 18px; color:var(--muted)}

/* Gallery grid */
.cards-grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(5, minmax(140px,1fr));
}
@media (max-width:1100px){ .cards-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px){ .cards-grid{grid-template-columns:repeat(2,1fr)} }

.card{background:var(--panel); border:1px solid var(--panel-border); border-radius:18px; overflow:hidden; box-shadow:var(--shadow)}
.card-image{aspect-ratio:1/1; overflow:hidden}
.card-image img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition:transform .3s ease, filter .3s ease}
.card:hover .card-image img{transform:scale(1.06); filter:brightness(1.06)}
.card-label{padding:10px 12px; font-size:.95rem}

/* CTA button */
.menu-button{
  margin-top:16px; display:inline-block;
  background:var(--btn-bg); color:var(--btn-text);
  border:1px solid rgba(255,255,255,.35); padding:10px 16px; border-radius:999px; font-weight:700; text-decoration:none
}
.menu-button:hover{filter:brightness(.96)}

/* About on Home */
.about-cream{background:linear-gradient(180deg, rgba(19,13,11,.8) 0%, rgba(19,13,11,1) 100%); padding:28px 16px 44px}
.about-inner{max-width:920px; margin:0 auto}
.glass{background:var(--panel); border:1px solid var(--panel-border); border-radius:20px; padding:22px; box-shadow:var(--shadow); backdrop-filter:blur(10px) saturate(120%);}
.about-inner h2{font-family:'Great Vibes', cursive; font-size:40px; margin:0 0 8px}
.about-inner p{color:var(--muted); margin:10px 0}

/* Footer */
.site-footer{padding:32px 16px; text-align:center; color:var(--muted)}