:root{
  --bg:#050505;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.62);
  --line:rgba(255,255,255,.12);
  --btn:rgba(255,255,255,.08);
  --max:1040px;
  --serif: ui-serif, "Times New Roman", Georgia, serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(255,255,255,.06), rgba(0,0,0,0)),
    linear-gradient(to bottom, var(--bg), var(--bg));
  color:var(--text);
  font-family:var(--sans);
  overflow-x:hidden;
}

/* TOPBAR */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.topbar-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{color:var(--text); text-decoration:none; display:flex; flex-direction:column; gap:4px;}
.brand-name{letter-spacing:.35em; font-size:13px;}
.brand-sub{letter-spacing:.26em; font-size:11px; color:var(--muted);}

.nav{display:flex; gap:18px; align-items:center;}
.nav a{color:var(--muted); text-decoration:none; letter-spacing:.18em; font-size:12px; padding:10px 8px;}
.nav a:hover{color:var(--text)}

.menu-btn{display:none; width:44px; height:44px; border-radius:14px; border:1px solid var(--line); background:rgba(0,0,0,.45); align-items:center; justify-content:center;}
.menu-icon{width:18px; height:2px; background:rgba(255,255,255,.85); position:relative; display:block;}
.menu-icon::before,.menu-icon::after{content:""; position:absolute; left:0; width:18px; height:2px; background:rgba(255,255,255,.85);}
.menu-icon::before{top:-6px} .menu-icon::after{top:6px}

.mobile-menu{display:none; max-width:var(--max); margin:0 auto; padding:10px 18px 18px;}
.mobile-menu.is-open{display:block;}
.mobile-link{display:block; text-decoration:none; color:var(--text); letter-spacing:.16em; padding:14px 14px; margin:10px 0; border:1px solid var(--line); border-radius:22px; background:rgba(0,0,0,.55);}

/* HERO */
.hero{position:relative; min-height:100svh; padding-top:78px; overflow:hidden;}
.bg.hero-bg{position:absolute; inset:0; z-index:0;}
.slide{position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.06); opacity:0; transition: opacity 1000ms ease-in-out; will-change: opacity;}
.slide.is-active{opacity:1}
.bg-overlay{position:absolute; inset:0; background: rgba(0,0,0,.35); z-index:1;}
.bg-vignette{position:absolute; inset:-1px; background: radial-gradient(60% 60% at 50% 40%, rgba(0,0,0,0), rgba(0,0,0,.55)), linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.65)); z-index:2;}

.hero-content{
  position:relative; z-index:3;
  max-width:var(--max); margin:0 auto;
  padding: 70px 18px 30px;
  min-height: calc(100svh - 78px);
  display:flex; flex-direction:column; justify-content:flex-end; gap:14px;
}
.kicker{margin:0; color:rgba(255,255,255,.75); letter-spacing:.28em; font-size:12px;}
.hero-title{margin:0; font-family:var(--serif); font-weight:600; line-height:0.98; font-size:56px;}
.hero-sub{margin:0; color:rgba(255,255,255,.75); font-size:16px; line-height:1.5; max-width:520px;}

.cta-row{display:flex; gap:12px; flex-wrap:wrap; padding-top:8px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 18px; border-radius:999px; text-decoration:none;
  letter-spacing:.18em; font-size:12px;
  border:1px solid var(--line); background:var(--btn); color:var(--text);
}
.btn.primary{background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18);}
.btn.ghost{background: rgba(0,0,0,.25);}

.scroll-hint{margin-top:18px; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.55); letter-spacing:.18em; font-size:11px;}
.scroll-hint .dot{width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.25); box-shadow:0 0 18px rgba(255,255,255,.12); animation:pulse 1800ms ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1); opacity:.7}50%{transform:scale(1.45); opacity:1}}

/* MAIN */
.wrap{max-width:var(--max); margin:0 auto; padding: 44px 18px 60px;}
.section{padding:34px 0}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:14px;}
.section-head h2{margin:0; font-family:var(--serif); font-size:38px;}
.section-tag{color:rgba(255,255,255,.55); letter-spacing:.25em; font-size:11px;}

.card{border:1px solid var(--line); background: rgba(0,0,0,.35); border-radius:24px; padding:20px;}
.card p{margin:0; color:rgba(255,255,255,.78); line-height:1.7; font-size:16px;}

.albums{display:grid; grid-template-columns: repeat(12, 1fr); gap:14px;}
.album{
  grid-column: span 4;
  border:1px solid var(--line);
  background: rgba(0,0,0,.35);
  border-radius:24px;
  overflow:hidden;
  padding:0;
  cursor:pointer;
  text-align:left;
  color:var(--text);
}
.album-cover{height:210px; background-size:cover; background-position:center;}
.album-meta{padding:16px 16px 18px}
.album-title{font-family:var(--serif); letter-spacing:.10em; font-size:18px;}
.album-sub{margin-top:6px; color:rgba(255,255,255,.62); letter-spacing:.10em; font-size:12px;}

.reviews{display:grid; grid-template-columns: repeat(12, 1fr); gap:14px;}
.review{grid-column: span 4; border:1px solid var(--line); background: rgba(0,0,0,.35); border-radius:24px; padding:18px;}
.review-text{margin:0; color:rgba(255,255,255,.82); line-height:1.7;}
.review-name{margin:14px 0 0; letter-spacing:.12em; font-size:12px;}
.review-role{margin:6px 0 0; color:rgba(255,255,255,.55); font-size:12px; letter-spacing:.10em;}

.booking-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px;}
.fine{margin-top:14px !important; color:rgba(255,255,255,.55) !important; font-size:12px !important; letter-spacing:.08em;}
.footer{padding-top:26px; color:rgba(255,255,255,.45); letter-spacing:.14em; font-size:11px;}

/* LIGHTBOX */
.lightbox{position:fixed; inset:0; background: rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; padding:18px; z-index:100;}
.lightbox.is-open{display:flex;}
.lightbox-card{width:min(860px, 100%); border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.55); border-radius:26px; padding:16px; position:relative;}
.lb-close{position:absolute; top:10px; right:12px; width:42px; height:42px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.35); color:rgba(255,255,255,.85); font-size:22px;}
.lb-title{font-family:var(--serif); letter-spacing:.18em; font-size:16px; padding:6px 8px 12px;}
.lb-stage{display:grid; grid-template-columns: 48px 1fr 48px; gap:10px; align-items:center; padding:6px 4px 10px;}
.lb-img{width:100%; height:min(70vh, 520px); object-fit:contain; border-radius:18px; background: rgba(0,0,0,.25);}
.lb-nav{width:48px; height:48px; border-radius:16px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.35); color:rgba(255,255,255,.85); font-size:28px; display:flex; align-items:center; justify-content:center;}

/* THUMBS: centered + fit-content => NO “4th empty slot” */
.lb-thumbs-wrap{display:flex; justify-content:center; margin-top:8px;}
.lb-thumbs{
  display:inline-flex;
  width:fit-content;
  max-width:100%;
  gap:10px;
  padding: 10px 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background: rgba(0,0,0,.35);
  overflow:auto;
}
.lb-thumb{
  width:76px; height:76px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background-size:cover;
  background-position:center;
  flex:0 0 auto;
  opacity:.78;
}
.lb-thumb.is-active{opacity:1; outline:2px solid rgba(255,255,255,.22);}

/* Responsive */
@media (max-width: 900px){
  .albums{grid-template-columns:1fr;}
  .album{grid-column: span 12;}
  .reviews{grid-template-columns:1fr;}
  .review{grid-column: span 12;}
  .hero-title{font-size:46px}
}
@media (max-width: 720px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .hero-content{padding-top:88px}
  .hero-title{font-size:44px}
  .lb-stage{grid-template-columns: 40px 1fr 40px}
  .lb-nav{width:40px;height:40px;border-radius:14px}
  .lb-thumb{width:70px;height:70px}
}