/* ══════════════════════════════════════════════
   NOCTURNE — modern speakeasy cocktail bar demo
   Designs by Delia
   ══════════════════════════════════════════════ */
:root{
  --void:#0A0A0C;
  --coal:#111114;
  --smoke:#17171B;
  --ox:#7E2231;
  --ox-lt:#A93547;
  --gild:#C9A96A;
  --gild-lt:#E0C58E;
  --ivory:#F2EDE4;
  --ash:#8E8A85;
  --line:rgba(242,237,228,.14);
  --line-2:rgba(242,237,228,.28);
  --disp:'Bodoni Moda',Didot,Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--void);color:var(--ivory);font-family:var(--sans);font-size:16.5px;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1200px;margin:0 auto;padding:0 36px;}
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;line-height:1.06;letter-spacing:-.01em;}
.label{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.4em;text-transform:uppercase;color:var(--gild);}

/* deco rule */
.deco{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 26px;max-width:220px;}
.deco span{height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gild));}
.deco span:last-child{background:linear-gradient(90deg,var(--gild),transparent);}
.deco i{width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--gild);}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-size:11px;
  font-weight:500;letter-spacing:.26em;text-transform:uppercase;padding:17px 34px;border:1px solid transparent;
  cursor:pointer;transition:background .3s,color .3s,border-color .3s;}
.btn-gild{background:var(--gild);color:#14100A;}
.btn-gild:hover{background:var(--gild-lt);}
.btn-ox{background:var(--ox);color:var(--ivory);}
.btn-ox:hover{background:var(--ox-lt);}
.btn-ghost{background:transparent;color:var(--ivory);border-color:var(--line-2);}
.btn-ghost:hover{border-color:var(--gild);color:var(--gild);}

/* ── RIBBON ── */
.ribbon{background:var(--ox);color:var(--ivory);text-align:center;font-size:11px;letter-spacing:.28em;text-transform:uppercase;padding:11px 20px;}

/* ── NAV ── */
.nav{position:sticky;top:0;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding:0 36px;height:82px;background:rgba(10,10,12,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.nav-logo{font-family:var(--disp);font-size:25px;letter-spacing:.42em;text-transform:uppercase;padding-left:.42em;}
.nav-links{display:flex;gap:32px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#B7B2AB;}
.nav-links a:hover{color:var(--gild);}
.nav .btn{padding:14px 24px;font-size:10px;}
.burger{display:none;background:none;border:none;cursor:pointer;}
.burger span{display:block;width:24px;height:1px;background:var(--ivory);margin:6px 0;}

/* ── HERO ── */
.hero{position:relative;min-height:clamp(580px,86vh,880px);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;}
.hero-bg{position:absolute;inset:0;}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.5;}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(10,10,12,.38),rgba(10,10,12,.93) 72%);}
.hero-in{position:relative;z-index:2;padding:70px 0;max-width:860px;}
.hero-frame{border:1px solid var(--line-2);padding:clamp(38px,5vw,64px) clamp(24px,4vw,56px);position:relative;}
.hero-frame::before,.hero-frame::after{content:"";position:absolute;width:16px;height:16px;border:1px solid var(--gild);}
.hero-frame::before{top:-1px;left:-1px;border-right:none;border-bottom:none;}
.hero-frame::after{bottom:-1px;right:-1px;border-left:none;border-top:none;}
.hero h1{font-size:clamp(46px,8vw,104px);letter-spacing:.06em;text-transform:uppercase;}
.hero h1 em{font-style:italic;color:var(--gild);letter-spacing:0;text-transform:none;display:block;font-size:.62em;margin-top:6px;}
.hero p{font-size:17px;color:#C6C1B9;max-width:52ch;margin:24px auto 32px;font-weight:300;}
.hero-btns{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;}
.hero-note{margin-top:30px;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ash);}

/* ── MARQUEE BAR ── */
.mbar{background:var(--coal);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.mbar .wrap{display:grid;grid-template-columns:repeat(4,1fr);}
.mcell{padding:26px 18px;text-align:center;border-right:1px solid var(--line);}
.mcell:last-child{border-right:none;}
.mcell b{display:block;font-family:var(--disp);font-size:19px;letter-spacing:.02em;}
.mcell span{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ash);margin-top:7px;}

/* ── SECTIONS ── */
.sec{padding:clamp(70px,9vw,124px) 0;}
.sec-coal{background:var(--coal);}
.sec-smoke{background:var(--smoke);}
.sec-head{text-align:center;max-width:680px;margin:0 auto clamp(38px,5vw,60px);}
.sec-head h2{font-size:clamp(32px,4.8vw,58px);margin-top:16px;text-transform:uppercase;letter-spacing:.04em;}
.sec-head h2 em{font-style:italic;color:var(--gild);text-transform:none;letter-spacing:0;}
.sec-head p{color:#A9A49D;margin-top:18px;font-weight:300;}

/* ── STORY SPLIT ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center;}
.split-img{position:relative;}
.split-img img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.split-img::after{content:"";position:absolute;inset:14px;border:1px solid var(--line-2);pointer-events:none;}
.split h2{font-size:clamp(30px,4.2vw,52px);text-transform:uppercase;letter-spacing:.04em;margin:16px 0 20px;}
.split h2 em{font-style:italic;color:var(--gild);text-transform:none;letter-spacing:0;}
.split p{color:#A9A49D;font-weight:300;margin-bottom:16px;}

/* ── MENU ── */
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(34px,5vw,80px);}
.mrow{display:flex;align-items:baseline;gap:10px;padding:17px 0;border-bottom:1px solid var(--line);}
.mrow .mn{font-family:var(--disp);font-size:21px;white-space:nowrap;}
.mrow .mn small{display:block;font-family:var(--sans);font-size:12.5px;letter-spacing:.02em;color:var(--ash);font-weight:300;white-space:normal;margin-top:3px;line-height:1.6;}
.mrow .md{flex:1;border-bottom:1px dotted var(--line-2);transform:translateY(-5px);}
.mrow .mp{font-family:var(--disp);font-size:20px;color:var(--gild);}
.menu-note{text-align:center;margin-top:34px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);}

/* ── SATURDAY LIVE ── */
.live{position:relative;overflow:hidden;background:var(--void);}
.live-bg{position:absolute;inset:0;}
.live-bg img{width:100%;height:100%;object-fit:cover;opacity:.28;}
.live::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,12,.9),rgba(10,10,12,.96));}
.live .wrap{position:relative;z-index:2;}
.live-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:38px;}
.live-head h2{font-size:clamp(32px,4.8vw,60px);text-transform:uppercase;letter-spacing:.04em;margin-top:14px;}
.live-head h2 em{font-style:italic;color:var(--gild);text-transform:none;letter-spacing:0;}
.live-head p{color:#A9A49D;max-width:38ch;font-weight:300;font-size:15px;}

.live-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,3.6vw,56px);align-items:start;}
.dates{display:grid;gap:0;border-top:1px solid var(--line);}
.date{display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;width:100%;text-align:left;
  padding:20px 6px;background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--ivory);cursor:pointer;
  font-family:var(--sans);transition:background .25s,padding .25s;}
.date:hover{background:rgba(242,237,228,.04);padding-left:12px;}
.date.on{background:rgba(201,169,106,.09);padding-left:12px;}
.date .dnum{font-family:var(--disp);font-size:26px;line-height:1;color:var(--gild);}
.date .dnum small{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);margin-top:5px;}
.date .dname{font-size:15.5px;font-weight:500;letter-spacing:.02em;}
.date .dgen{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);margin-top:4px;}
.date .dtag{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gild);border:1px solid var(--line-2);padding:6px 10px;white-space:nowrap;}
.date.on .dtag{border-color:var(--gild);}

.act{border:1px solid var(--line-2);background:rgba(17,17,20,.7);}
.act-img{position:relative;aspect-ratio:16/10;overflow:hidden;}
.act-img img{width:100%;height:100%;object-fit:cover;}
.act-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,12,0) 40%,rgba(10,10,12,.85));}
.act-badge{position:absolute;left:0;top:0;z-index:2;background:var(--ox);color:var(--ivory);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;padding:9px 14px;}
.act-b{padding:clamp(24px,3vw,34px);}
.act-b h3{font-size:clamp(26px,3.2vw,38px);text-transform:uppercase;letter-spacing:.03em;}
.act-b .agen{display:block;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gild);margin-top:10px;}
.act-b p{color:#A9A49D;font-weight:300;font-size:15.5px;margin-top:16px;}
.act-meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line);}
.act-meta div b{display:block;font-family:var(--disp);font-size:20px;}
.act-meta div span{display:block;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);margin-top:4px;}
.act-b .btn{margin-top:24px;}

/* ── PASSWORD / BACK ROOM ── */
.door{max-width:640px;margin:0 auto;text-align:center;}
.door-box{border:1px solid var(--line-2);padding:clamp(30px,4vw,50px);position:relative;background:rgba(17,17,20,.6);}
.door-box::before,.door-box::after{content:"";position:absolute;width:18px;height:18px;border:1px solid var(--gild);}
.door-box::before{top:-1px;left:-1px;border-right:none;border-bottom:none;}
.door-box::after{bottom:-1px;right:-1px;border-left:none;border-top:none;}
.door h3{font-size:clamp(26px,3.4vw,38px);text-transform:uppercase;letter-spacing:.05em;}
.door p{color:#A9A49D;font-weight:300;margin:14px 0 24px;font-size:15.5px;}
.door-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.door-row input{flex:1;min-width:200px;max-width:300px;background:transparent;border:1px solid var(--line-2);color:var(--ivory);
  padding:16px 18px;font-family:var(--sans);font-size:14px;letter-spacing:.16em;text-transform:uppercase;text-align:center;}
.door-row input:focus{outline:none;border-color:var(--gild);}
.door-row input::placeholder{color:var(--ash);letter-spacing:.16em;}
.door-hint{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);margin-top:18px;}
.door-out{margin-top:26px;display:none;}
.door-out.show{display:block;animation:fade .5s ease;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.door-out.no .dmsg{color:var(--ox-lt);}
.dmsg{font-size:14px;letter-spacing:.06em;}
.secret{margin-top:22px;border-top:1px solid var(--line);padding-top:24px;text-align:left;}
.secret h4{font-size:22px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;}
.secret ul{list-style:none;display:grid;gap:11px;}
.secret li{display:flex;gap:12px;font-size:15px;color:#A9A49D;font-weight:300;}
.secret li::before{content:"";flex:0 0 auto;width:6px;height:6px;transform:rotate(45deg);border:1px solid var(--gild);margin-top:9px;}

/* ── GALLERY ── */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.gal figure{overflow:hidden;position:relative;}
.gal img{width:100%;height:100%;min-height:220px;object-fit:cover;transition:transform .9s ease,opacity .5s;opacity:.86;}
.gal figure:hover img{transform:scale(1.05);opacity:1;}
.gal figure:first-child{grid-column:span 2;grid-row:span 2;}

/* ── HOUSE RULES + VISIT ── */
.two{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
.cell{background:var(--void);padding:clamp(30px,4vw,52px);}
.cell h3{font-size:26px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:22px;}
.rules{list-style:none;display:grid;gap:14px;}
.rules li{display:flex;gap:13px;font-size:15px;color:#A9A49D;font-weight:300;line-height:1.7;}
.rules li::before{content:"";flex:0 0 auto;width:6px;height:6px;transform:rotate(45deg);border:1px solid var(--gild);margin-top:9px;}
.hrs{list-style:none;display:grid;gap:0;}
.hrs li{display:flex;align-items:baseline;gap:10px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;}
.hrs li:last-child{border-bottom:none;}
.hrs .hd{white-space:nowrap;font-weight:500;}
.hrs .dot{flex:1;border-bottom:1px dotted var(--line-2);transform:translateY(-5px);}
.hrs .ht{color:var(--ash);white-space:nowrap;}
.addr{margin-top:26px;font-size:15px;color:#A9A49D;line-height:1.9;font-weight:300;}

/* ── FOOTER ── */
.foot{background:var(--coal);border-top:1px solid var(--line);padding:60px 0 34px;text-align:center;}
.foot .nav-logo{display:inline-block;}
.foot-links{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#B7B2AB;margin:26px 0 24px;}
.foot small{display:block;font-size:12px;color:#6F6B66;padding-top:24px;border-top:1px solid var(--line);font-weight:300;}

/* ══ TEMPLATE BADGE ══ */
.badge{
  position:fixed;right:18px;bottom:18px;z-index:120;
  background:#F5F1E9;color:#111;
  font-family:inherit;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:12px 18px;text-decoration:none;
  box-shadow:0 12px 30px rgba(0,0,0,.4);transition:transform .3s;
}
.badge:hover{transform:translateY(-3px);}

/* ── RESPONSIVE ── */
@media(max-width:1000px){
  .live-grid,.split,.two,.menu-grid{grid-template-columns:1fr;}
  .menu-grid{gap:0;}
  .gal{grid-template-columns:repeat(2,1fr);}
  .gal figure:first-child{grid-column:span 2;grid-row:span 1;}
  .mbar .wrap{grid-template-columns:repeat(2,1fr);}
  .mcell:nth-child(2){border-right:none;}
  .mcell:nth-child(1),.mcell:nth-child(2){border-bottom:1px solid var(--line);}
  .nav-links{display:none;}
  .burger{display:block;}
  .split-img{order:-1;}
}
@media(max-width:700px){
  .nav .btn{display:none;}
  .date{grid-template-columns:54px 1fr;}
  .date .dtag{display:none;}
}
@media(max-width:560px){
  .wrap{padding:0 22px;}
  .nav{padding:0 22px;}
  .gal{grid-template-columns:1fr;}
  .gal figure:first-child{grid-column:span 1;}
  .badge{right:10px;bottom:10px;font-size:9.5px;padding:10px 13px;letter-spacing:.1em;}
}