/*
Theme Name: Prohibition Co.
Theme URI: http://localhost/
Author: Prohibition Co.
Description: A modern speakeasy theme — dark, gold + bronze, live music & events, Kennesaw-time date sync. Static theme: activate it (styles + scripts load site-wide), then build the homepage as a WordPress Page and paste in the provided markup (see homepage-content.html).
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: prohibition
*/

  /* ============================ TOKENS ============================ */
  :root{
    --bg:#0B0B0C; --bg2:#0d0c0e; --bg3:#0a090b; --panel:#100F0D;
    --gold:#C7A35E; --gold-lt:#E6CE9A; --cream:#F2EBDD;
    --bronze:#a06e34; --bronze-deep:#4a3216; --bronze-soft:rgba(160,110,52,0.15); --bronze-line:rgba(160,110,52,0.42);  /* second colour, pulled from the logo's bronze */
    --muted:#a89f92; --muted2:#8c857a; --muted3:#6b655c;
    --line:rgba(199,163,94,0.18); --line-strong:rgba(199,163,94,0.5);
    --hair:rgba(255,255,255,0.07);
    --serif:'Cormorant Garamond',serif;
    --display:'Josefin Sans',sans-serif;
    --body:'Jost',sans-serif;
    --script:'Pinyon Script',cursive;
    --maxw:1240px;
    --ease:cubic-bezier(.16,1,.3,1);        /* expo-out: slow, expensive settle */
    --ease-soft:cubic-bezier(.22,.61,.36,1);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; scroll-padding-top:80px;}
  body{
    margin:0; background:var(--bg); color:var(--cream);
    font-family:var(--body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  a{color:inherit; text-decoration:none;}
  img{display:block; max-width:100%;}

  /* scroll-driven page background — two layers cross-fade as you scroll */
  .bgfx{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity 1s ease; will-change:opacity;}
  .bgfx.on{opacity:1;}
  ::selection{background:rgba(199,163,94,0.3); color:#fff;}

  /* scrollbar */
  *{scrollbar-width:thin; scrollbar-color:var(--gold) rgba(255,255,255,0.06);}

  /* ============================ ANIMATIONS ============================ */
  @keyframes phGlow{0%,100%{opacity:.4; transform:translate(-50%,-50%) scale(1);}50%{opacity:.85; transform:translate(-50%,-50%) scale(1.08);}}
  @keyframes phCue{0%,100%{transform:translateY(0);opacity:.45;}50%{transform:translateY(8px);opacity:1;}}
  @keyframes phPing{from{transform:scale(1);opacity:.55;}to{transform:scale(2.5);opacity:0;}}
  @keyframes lineGrow{from{transform:scaleY(0);}to{transform:scaleY(1);}}
  @keyframes grainShift{0%{transform:translate(0,0);}10%{transform:translate(-4%,-3%);}30%{transform:translate(3%,-5%);}50%{transform:translate(-3%,4%);}70%{transform:translate(4%,3%);}90%{transform:translate(-2%,-4%);}100%{transform:translate(0,0);}}
  @keyframes sheen{0%{background-position:-160% 0;}60%,100%{background-position:260% 0;}}

  /* base reveal — long, expo settle, soft focus-in */
  [data-reveal]{opacity:0; transform:translateY(34px); filter:blur(6px); transition:opacity 1.2s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease); transition-delay:var(--d,0s);}
  [data-reveal].in{opacity:1; transform:none; filter:none;}
  /* directional */
  [data-reveal="left"]{transform:translateX(-46px);} [data-reveal="left"].in{transform:none;}
  [data-reveal="right"]{transform:translateX(46px);} [data-reveal="right"].in{transform:none;}
  /* image — slow ken-burns settle */
  [data-reveal="scale"]{opacity:0; transform:scale(1.1); filter:blur(8px); transition:opacity 1.5s var(--ease), transform 1.7s var(--ease), filter 1.4s var(--ease); transition-delay:var(--d,0s);}
  [data-reveal="scale"].in{opacity:1; transform:none; filter:none;}
  /* heading reveal — rise + fade (no clip-path; reliable across engines) */
  [data-reveal="mask"]{opacity:0; transform:translateY(26px); filter:blur(4px); transition:opacity 1.2s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease); transition-delay:var(--d,0s);}
  [data-reveal="mask"].in{opacity:1; transform:none; filter:none;}
  /* hero title — rise + fade + letter-spacing settle */
  [data-reveal="title"]{opacity:0; transform:translateY(28px); letter-spacing:0.5em!important; transition:opacity 1.4s var(--ease), transform 1.4s var(--ease), letter-spacing 1.8s var(--ease); transition-delay:var(--d,0s);}
  [data-reveal="title"].in{opacity:1; transform:none; letter-spacing:0.18em!important;}

  /* staggered children cascade */
  [data-stagger] > *{opacity:0; transform:translateY(36px); filter:blur(6px); transition:opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);}
  [data-stagger].in > *{opacity:1; transform:none; filter:none;}
  [data-stagger].in > *:nth-child(1){transition-delay:.04s} [data-stagger].in > *:nth-child(2){transition-delay:.12s}
  [data-stagger].in > *:nth-child(3){transition-delay:.2s}  [data-stagger].in > *:nth-child(4){transition-delay:.28s}
  [data-stagger].in > *:nth-child(5){transition-delay:.36s} [data-stagger].in > *:nth-child(6){transition-delay:.44s}
  [data-stagger].in > *:nth-child(7){transition-delay:.52s} [data-stagger].in > *:nth-child(8){transition-delay:.6s}

  /* film grain + ambient light (premium vintage texture) */
  .grain{position:fixed; inset:-50%; z-index:40; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:grainShift 7s steps(6) infinite;}

  /* ============================ SHARED ============================ */
  .wrap{max-width:var(--maxw); margin:0 auto; padding-left:56px; padding-right:56px;}
  .kicker{font:400 28px/1 var(--script); color:var(--gold); margin-bottom:12px;}
  .eyebrow{font:300 13px/1 var(--body); letter-spacing:0.4em; text-transform:uppercase; color:var(--muted);}
  .h2{margin:0; font:300 44px/1.04 var(--display); letter-spacing:0.16em; color:var(--cream);}
  .center{text-align:center;}
  .lead{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:18px;}
  .lead .ln{width:54px; height:1px; background:var(--line-strong);}
  .lead .dot{width:6px; height:6px; border:1px solid var(--gold); transform:rotate(45deg);}
  .sec-head{margin-bottom:54px;}
  .flourish{font:italic 500 19px/1.5 var(--serif); color:var(--gold-lt); margin-top:16px;}
  .center .flourish{max-width:600px; margin-left:auto; margin-right:auto;}

  /* accessibility focus */
  a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:1px;}
  .btn:focus-visible{outline-offset:4px;}

  /* ---- art-deco divider (line · diamond · seal · diamond · line) ---- */
  .deco{display:flex; align-items:center; justify-content:center; gap:20px; padding:18px 56px;}
  .deco .ln{height:1px; width:120px; max-width:20vw;}
  .deco .ln.l{background:linear-gradient(90deg,transparent,var(--line-strong));}
  .deco .ln.r{background:linear-gradient(90deg,var(--line-strong),transparent);}
  .deco .dia{width:7px; height:7px; transform:rotate(45deg); flex:none;}
  .deco .dia.g{border:1px solid var(--gold);}
  .deco .dia.w{background:var(--bronze); box-shadow:0 0 12px rgba(160,110,52,0.6);}
  .deco .seal{width:42px; height:42px; object-fit:contain; opacity:.92; flex:none;}

  /* ---- reusable art-deco corner ornaments ---- */
  .cnr{position:absolute; width:28px; height:28px; pointer-events:none; z-index:3;}
  .cnr.tl{top:14px; left:14px; border-top:1px solid var(--line-strong); border-left:1px solid var(--line-strong);}
  .cnr.tr{top:14px; right:14px; border-top:1px solid var(--line-strong); border-right:1px solid var(--line-strong);}
  .cnr.bl{bottom:14px; left:14px; border-bottom:1px solid var(--line-strong); border-left:1px solid var(--line-strong);}
  .cnr.br{bottom:14px; right:14px; border-bottom:1px solid var(--line-strong); border-right:1px solid var(--line-strong);}

  .btn{position:relative; display:inline-block; overflow:hidden; font:500 11px/1 var(--body); letter-spacing:0.24em; text-transform:uppercase; padding:15px 30px; transition:all .4s var(--ease-soft); cursor:pointer; border:0;}
  .btn::before{content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,0.45),transparent); transform:skewX(-20deg); transition:left .7s var(--ease-soft);}
  .btn:hover::before{left:150%;}
  .btn-gold{background:var(--gold); color:var(--bg);}
  .btn-gold:hover{background:var(--gold-lt); transform:translateY(-2px); box-shadow:0 14px 30px rgba(199,163,94,0.28);}
  .btn-ghost{color:var(--gold); border:1px solid var(--line-strong); padding:14px 30px;}
  .btn-ghost:hover{background:rgba(199,163,94,0.08); border-color:var(--gold);}

  /* ============================ NAV ============================ */
  nav.top{
    position:fixed; top:0; left:0; right:0; z-index:60; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    padding:6px 56px; background:rgba(11,11,12,0.55); backdrop-filter:blur(12px);
    border-bottom:1px solid transparent; transition:padding .3s ease, background .3s ease, border-color .3s ease;
  }
  nav.top.scrolled{border-bottom-color:var(--line); padding:6px 56px; background:rgba(11,11,12,0.92);}
  /* nav logo hidden while the hero intro is on screen; revealed once the hero clears OR on scroll */
  .brand{justify-self:start; display:flex; align-items:center; opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s ease;}
  nav.top.scrolled .brand,nav.top.logo-show .brand{opacity:1; visibility:visible;}
  .brand img{width:100px; height:100px; object-fit:contain; transition:width .35s var(--ease), height .35s var(--ease);}
  nav.top.scrolled .brand img{width:80px; height:80px;}
  .nav-social{justify-self:end; display:flex; align-items:center; gap:16px;}
  .nav-social a{color:var(--muted); display:flex; align-items:center; justify-content:center; transition:color .3s ease, transform .3s ease;}
  .nav-social a:hover{color:var(--gold); transform:translateY(-2px);}
  .nav-social svg{width:19px; height:19px;}
  .nav-links{justify-self:center; display:flex; align-items:center; gap:34px;}
  .nav-links a.lnk{font:400 12px/1 var(--body); letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); transition:color .3s; position:relative;}
  .nav-links a.lnk::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--gold); transition:width .3s ease;}
  .nav-links a.lnk:hover,.nav-links a.lnk.active{color:var(--gold);} .nav-links a.lnk:hover::after,.nav-links a.lnk.active::after{width:100%;}
  .nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px;}
  .nav-toggle span{width:24px; height:2px; background:var(--gold); transition:.3s;}
  .nav-toggle:hover span{background:var(--gold);}

  /* ============================ HAIRLINE FRAME ============================ */
  .frame{position:fixed; inset:0; pointer-events:none; z-index:1;}
  .frame i{position:absolute; top:0; bottom:0; width:1px; transform-origin:top; transform:scaleY(0); animation:lineGrow 2s ease .3s forwards;}
  .frame i:nth-child(1){left:6%;  background:linear-gradient(180deg,transparent,rgba(199,163,94,0.16) 12%,rgba(199,163,94,0.16) 88%,transparent);}
  .frame i:nth-child(2){left:35%; background:linear-gradient(180deg,transparent,rgba(199,163,94,0.07) 12%,rgba(199,163,94,0.07) 88%,transparent); animation-delay:.45s;}
  .frame i:nth-child(3){left:65%; background:linear-gradient(180deg,transparent,rgba(199,163,94,0.07) 12%,rgba(199,163,94,0.07) 88%,transparent); animation-delay:.55s;}
  .frame i:nth-child(4){left:94%; background:linear-gradient(180deg,transparent,rgba(199,163,94,0.16) 12%,rgba(199,163,94,0.16) 88%,transparent); animation-delay:.35s;}

  .page{position:relative; z-index:2;}

  /* ============================ HERO ============================ */
  header.hero{position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:92px 9% 96px; overflow:hidden;}
  .hero-media{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; background:#0a0809;}
  .hero-media video,.hero-media .poster{position:absolute; inset:0; width:100%; height:100%;}
  .hero-media .poster{object-fit:cover; background:#000 center/cover no-repeat; filter:brightness(0.42) saturate(0.9); transition:opacity .9s ease, filter 1.8s ease;}
  .hero-media.playing .poster{opacity:0;}
  /* portrait video sits fully visible on a dark base */
  .hero-vid{object-fit:contain; filter:brightness(0.6) saturate(0.98); z-index:1;}
  .hero-scrim{position:absolute; inset:0; z-index:2; background:linear-gradient(110deg,rgba(11,11,12,0.92) 34%,rgba(11,11,12,0.5) 66%,rgba(11,11,12,0.72));}
  .hero-glow{position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(199,163,94,0.08), rgba(199,163,94,0.025) 12%, transparent 26%), linear-gradient(270deg, rgba(199,163,94,0.08), rgba(199,163,94,0.03) 12%, transparent 26%);}
  .hero-rail{position:absolute; top:0; bottom:0; right:5%; display:flex; align-items:center; pointer-events:none;}
  .hero-rail .col{display:flex; flex-direction:column; align-items:center; gap:20px;}
  .hero-rail .seg{width:1px; height:90px;}
  .hero-rail .seg.a{background:linear-gradient(180deg,transparent,var(--gold));}
  .hero-rail .seg.b{background:linear-gradient(180deg,var(--gold),transparent);}
  .hero-rail .vtxt{writing-mode:vertical-rl; font:400 12px/1 var(--body); letter-spacing:0.4em; text-transform:uppercase; color:#9b9384;}

  .hero-spot{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .8s ease;
    background:radial-gradient(300px circle at var(--mx,30%) var(--my,45%), rgba(199,163,94,0.16), transparent 68%); mix-blend-mode:screen;}
  .hero:hover .hero-spot{opacity:1;}
  .hero-inner{position:relative; z-index:2; max-width:760px;}
  .hero-script{font:400 27px/1 var(--script); color:var(--gold); margin-bottom:20px;}
  .hero-tick{width:1px; height:50px; background:linear-gradient(180deg,var(--gold),transparent); margin-bottom:24px;}
  .hero-title{margin:0; font:300 clamp(48px,8vw,80px)/0.96 var(--display); letter-spacing:0.18em; color:var(--cream); padding-left:0.18em;}
  .hero-co{display:flex; align-items:center; gap:22px; margin:16px 0 24px;}
  .hero-co .ln{width:70px; height:1px;}
  .hero-co .ln.l{background:linear-gradient(90deg,transparent,var(--gold));}
  .hero-co .ln.r{background:linear-gradient(90deg,var(--gold),transparent);}
  .hero-co .co{font:500 24px/1 var(--display); letter-spacing:0.5em; padding-left:0.5em;
    background:linear-gradient(100deg, var(--gold) 0%, var(--gold) 38%, #fff6e2 50%, var(--gold) 62%, var(--gold) 100%);
    background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sheen 6.5s ease-in-out 2.4s infinite;}
  .hero-logo{margin:6px 0 22px; line-height:0;}
  .hero-logo img{width:clamp(150px,21vw,224px); height:auto; filter:drop-shadow(0 14px 40px rgba(0,0,0,0.55));}
  .hero-tags{margin:0 0 14px; font:300 14px/1 var(--body); letter-spacing:0.42em; text-transform:uppercase; color:var(--muted); padding-left:0.42em;}
  .hero-desc{max-width:440px; margin:14px 0 0; font:400 16px/1.7 var(--body); color:var(--muted2);}

  /* classy "this saturday" marquee billing */
  .billing{display:flex; align-items:center; gap:24px; margin-top:34px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); max-width:560px;}
  .billing .star{width:42px; height:1px; background:var(--line-strong); flex:none;}
  .billing .body{flex:1;}
  .billing .bk{font:400 10px/1 var(--body); letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); margin-bottom:9px;}
  .billing .bn{font:500 30px/1 var(--serif); color:var(--cream); margin-bottom:7px;}
  .billing .bm{font:400 11px/1 var(--body); letter-spacing:0.14em; text-transform:uppercase; color:var(--muted2);}
  .billing .bt{margin-top:13px; padding-top:12px; border-top:1px solid var(--line); font:400 11px/1.2 var(--body); letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-lt);}
  .billing .bt b{font-weight:600; color:var(--cream);}

  .hero-cta{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:30px;}
  .scroll-cue{position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:9px;}
  .scroll-cue .t{font:400 10px/1 var(--body); letter-spacing:0.3em; text-transform:uppercase; color:var(--muted3);}
  .scroll-cue .a{font-size:16px; color:var(--gold); animation:phCue 2s ease-in-out infinite;}

  /* hero video controls */
  .hctrl{position:absolute; bottom:26px; z-index:6; width:46px; height:46px; display:flex; align-items:center; justify-content:center;
    background:rgba(11,11,12,0.42); border:1px solid var(--line); color:var(--cream); cursor:pointer;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    transition:border-color .3s ease, color .3s ease, background .3s ease, transform .3s ease;}
  .hctrl:hover{border-color:var(--gold); color:var(--gold); background:rgba(11,11,12,0.62); transform:translateY(-2px);}
  #heroPlay{left:26px;} #heroMute{right:26px;}
  .hctrl svg{width:17px; height:17px; fill:currentColor;}
  .hctrl .ic-2{display:none;} .hctrl.toggled .ic-1{display:none;} .hctrl.toggled .ic-2{display:block;}

  /* after 60s the hero "clears" — text + dark overlay fade, video opens to full brightness, only the controls remain */
  .hero-inner,.scroll-cue,.hero-rail,.hero-scrim,.hero-glow,.hero-spot,
  .hero-media video,.hero-media .poster{transition:opacity 1.6s ease, filter 1.8s ease;}
  .hero.cleared .hero-inner,.hero.cleared .hero-rail,
  .hero.cleared .hero-glow,.hero.cleared .hero-spot{opacity:0; pointer-events:none;}
  .hero.cleared .hero-scrim{opacity:0;}
  .hero.cleared .hero-media .poster,.hero.cleared .hero-vid{filter:brightness(0.95) saturate(1);}

  /* ============================ ABOUT ============================ */
  section{position:relative;}
  .about{padding:120px 0; overflow:hidden;}
  .about .watermark{position:absolute; left:-2%; top:50%; transform:translateY(-50%); font:300 clamp(80px,17vw,230px)/1 var(--display); letter-spacing:0.06em; color:rgba(199,163,94,0.025); white-space:nowrap; pointer-events:none; z-index:0;}
  .about-grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;}
  .about h2{margin:0 0 26px; font:300 46px/1.06 var(--display); letter-spacing:0.12em; color:var(--cream);}
  .rule{width:60px; height:2px; background:var(--gold); margin-bottom:28px;}
  .about p{margin:0 0 18px; font:400 16px/1.8 var(--body); color:var(--muted);}
  .about p.dim{color:var(--muted2);}
  .feature{display:flex; align-items:center; gap:24px; padding:26px 4px; border-top:1px solid var(--line);}
  .feature:last-child{border-bottom:1px solid var(--line);}
  .feature .no{font:500 22px/1 var(--serif); color:var(--gold); width:40px; flex:none;}
  .feature .ft{font:500 18px/1.2 var(--display); letter-spacing:0.14em; text-transform:uppercase; color:var(--cream); margin-bottom:7px;}
  .feature .fn{font:400 14px/1.5 var(--body); color:var(--muted2);}

  /* ============================ PREMIUM LIVE BANDS ============================ */
  .bands{padding:90px 0 100px;}
  .bands-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  .band-tile{position:relative; display:block; height:340px; overflow:hidden; border:1px solid var(--line); cursor:pointer; transition:border-color .35s ease, transform .35s ease;}
  .band-tile:hover{border-color:var(--line-strong); transform:translateY(-5px);}
  .band-tile img{width:100%; height:100%; object-fit:cover; filter:grayscale(0.35) brightness(0.6); transition:transform .8s var(--ease), filter .55s ease;}
  .band-tile:hover img{transform:scale(1.06); filter:grayscale(0) brightness(0.85);}
  .band-tile .scrim{position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,7,6,0.92),rgba(8,7,6,0.08) 58%); pointer-events:none;}
  .band-tile .play{position:absolute; top:46%; left:50%; transform:translate(-50%,-50%) scale(.9); width:66px; height:66px; border-radius:50%;
    border:1px solid var(--line-strong); background:rgba(11,11,12,0.32); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center; pointer-events:none;
    transition:transform .5s var(--ease), border-color .4s ease, background .4s ease;}
  .band-tile:hover .play{transform:translate(-50%,-50%) scale(1.05); border-color:var(--gold); background:rgba(199,163,94,0.16);}
  .band-tile .play svg{width:20px; height:20px; fill:var(--cream); margin-left:3px; transition:fill .4s ease;}
  .band-tile:hover .play svg{fill:var(--gold);}
  .band-tile .meta{position:absolute; left:0; right:0; bottom:0; padding:22px; pointer-events:none;}
  .band-tile .gn{font:400 10px/1 var(--body); letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:9px;}
  .band-tile .nm{font:500 24px/1.05 var(--serif); color:var(--cream);}
  /* youtube popup iframe */
  .mfp-ph .mfp-iframe-scaler iframe{border:1px solid var(--line-strong); box-shadow:0 30px 90px rgba(0,0,0,0.7); background:#000;}

  /* ============================ UPCOMING SHOWS — TIMELINE SLIDER ============================ */
  .shows{padding:100px 0 110px;}
  .shows-slider{position:relative; padding:0 4%;}
  .show-card{position:relative; display:block; height:min(72vh,600px); overflow:hidden; border:1px solid var(--line); border-radius:4px; cursor:pointer;
    transition:border-color .35s ease, transform .35s ease;}
  .show-card:hover{border-color:var(--line-strong); transform:translateY(-4px);}
  .show-card img{width:100%; height:100%; object-fit:cover; filter:grayscale(0.3) brightness(0.66); transition:transform .8s var(--ease), filter .55s ease;}
  .show-card:hover img{transform:scale(1.06); filter:grayscale(0) brightness(0.92);}
  .show-card .scrim{position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,7,6,0.94) 4%,rgba(8,7,6,0.12) 52%,rgba(8,7,6,0.3)); pointer-events:none;}
  .show-card .zoom{position:absolute; top:44%; left:50%; transform:translate(-50%,-50%) scale(.8); width:56px; height:56px; border-radius:50%; border:1px solid var(--line-strong); background:rgba(11,11,12,0.32); -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s ease .1s, transform .4s var(--ease) .1s, border-color .4s ease, backdrop-filter .35s ease .1s, -webkit-backdrop-filter .35s ease .1s; pointer-events:none;}
  .show-card:hover .zoom{opacity:1; transform:translate(-50%,-50%) scale(1); border-color:var(--gold); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);}
  .show-card .zoom svg{width:18px; height:18px; stroke:var(--cream); stroke-width:2; fill:none;}
  .show-card:hover .zoom svg{stroke:var(--gold);}
  /* while the track scrubs/coasts, hide the magnifier INSTANTLY (no fade to ride during a fast drag) */
  .ph-shows.sliding .show-card .zoom{opacity:0 !important; transition:none !important;}
  .show-card .tag{position:absolute; top:14px; left:14px; font:500 10px/1 var(--body); letter-spacing:0.16em; text-transform:uppercase; color:var(--bg); background:rgba(199,163,94,0.92); padding:6px 10px; border-radius:2px;}
  .show-card .nm{position:absolute; left:0; right:0; bottom:0; padding:22px 20px; font:500 24px/1.08 var(--serif); color:var(--cream); pointer-events:none;}
  /* timeline axis under each card — with a heartbeat pulse */
  .show-tl{position:relative; margin-top:38px; padding-top:32px; text-align:center;}
  .show-tl::before{content:""; position:absolute; top:0; left:-12px; right:-12px; height:1px;
    background:linear-gradient(90deg, rgba(199,163,94,0.15), var(--line-strong) 50%, rgba(199,163,94,0.15));}
  .show-tl .pip{position:absolute; top:-5px; left:50%; margin-left:-5px; width:10px; height:10px; border-radius:50%; background:var(--gold);
    box-shadow:0 0 10px rgba(199,163,94,0.6); transition:box-shadow .3s ease;}
  .show-tl .pip::after{content:""; position:absolute; inset:0; border-radius:50%; border:1px solid var(--gold); opacity:0;}
  /* heartbeat pulses only while hovering the card */
  .show-card:hover ~ .show-tl .pip{animation:pipBeat 1.8s ease-in-out infinite;}
  .show-card:hover ~ .show-tl .pip::after{animation:pipRing 1.8s ease-out infinite;}
  @keyframes pipBeat{0%,100%{transform:scale(1);}45%{transform:scale(1.4);}}
  @keyframes pipRing{0%{transform:scale(1); opacity:.6;}75%,100%{transform:scale(3.8); opacity:0;}}
  .show-tl .d{font:500 14px/1 var(--body); letter-spacing:0.18em; text-transform:uppercase; color:var(--cream);}
  .show-tl .w{font:400 10px/1 var(--body); letter-spacing:0.14em; text-transform:uppercase; color:var(--muted3); margin-top:8px;}
  /* arrows */
  .ph-shows .splide__arrow{width:48px; height:48px; background:rgba(11,11,12,0.55); border:1px solid var(--line); border-radius:50%; opacity:1; transition:border-color .3s ease, background .3s ease;}
  .ph-shows .splide__arrow:hover{border-color:var(--gold); background:rgba(11,11,12,0.8);}
  .ph-shows .splide__arrow svg{width:16px; height:16px; fill:var(--cream);}
  .ph-shows .splide__arrow:hover svg{fill:var(--gold);}
  .ph-shows .splide__arrow--prev{left:8px;} .ph-shows .splide__arrow--next{right:8px;}
  .ph-shows .splide__arrow:disabled{opacity:.3;}
  /* pagination */
  .ph-shows .splide__pagination{bottom:-40px;}
  .ph-shows .splide__pagination__page{background:rgba(199,163,94,0.28); width:7px; height:7px; margin:0 4px; opacity:1; transition:background .3s ease, transform .3s ease;}
  .ph-shows .splide__pagination__page.is-active{background:var(--gold); transform:scale(1.3);}

  /* ============================ EVENTS — FEATURED + LINEUP ============================ */
  .events{padding:100px 0;}
  .feat-grid{display:grid; grid-template-columns:1.55fr 1fr; gap:42px; align-items:stretch;}
  .feat-hero{position:relative; min-height:540px; border-radius:4px; overflow:hidden; background:linear-gradient(160deg,#241019,#0a0908);}
  .feat-hero::before{content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(135deg,rgba(255,255,255,0.022) 0 1px,transparent 1px 12px);}
  .feat-hero .big{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:300 200px/1 var(--display); letter-spacing:0.1em; color:rgba(231,206,154,0.12);}
  .feat-hero .feat-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(0.18) brightness(0.82); transition:transform 1.2s var(--ease), filter .6s ease;}
  .feat-hero:hover .feat-img{transform:scale(1.04); filter:grayscale(0) brightness(0.9);}
  /* subtle fade whenever the featured day changes (hover-preview / revert) */
  @keyframes featSwap{from{opacity:0; transform:translateY(7px);} to{opacity:1; transform:none;}}
  @keyframes featImgSwap{from{opacity:.35;} to{opacity:1;}}
  .feat-hero.swap .body{animation:featSwap .34s var(--ease);}
  .feat-hero.swap .feat-img{animation:featImgSwap .5s ease;}
  .lu-row{cursor:pointer;}
  .feat-hero .wine{position:absolute; inset:0; background:radial-gradient(80% 60% at 50% 100%, rgba(160,110,52,0.30), transparent 62%); mix-blend-mode:screen;}
  .feat-hero .tag{position:absolute; top:22px; left:24px; font:400 10px/1 var(--body); letter-spacing:0.2em; text-transform:uppercase; color:rgba(243,239,230,0.45);}
  .feat-hero .grad{position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,7,6,0.96) 0%,rgba(8,7,6,0.55) 35%,rgba(8,7,6,0) 62%);}
  .feat-hero .body{position:absolute; left:0; right:0; bottom:0; padding:40px;}
  .feat-hero .pill{display:inline-block; font:500 10px/1 var(--body); letter-spacing:0.2em; text-transform:uppercase; color:var(--bg); background:var(--gold); padding:8px 13px; margin-bottom:18px;}
  .feat-hero .nm{font:500 60px/0.98 var(--serif); color:var(--cream); margin-bottom:12px;}
  .feat-hero .meta{font:400 14px/1 var(--body); letter-spacing:0.06em; text-transform:uppercase; color:var(--gold-lt); margin-bottom:18px;}
  .feat-hero .blurb{font:400 15px/1.55 var(--body); color:var(--muted); max-width:560px;}
  .lineup{display:flex; flex-direction:column;}
  .lineup .lbl{font:400 11px/1 var(--body); letter-spacing:0.24em; text-transform:uppercase; color:var(--muted2); margin-bottom:6px;}
  .lu-row{position:relative; display:flex; align-items:center; gap:18px; padding:20px 6px 20px 6px; border-bottom:1px solid var(--hair); flex:1; transition:padding-left .35s var(--ease-soft), background .35s ease;}
  .lu-row::before{content:""; position:absolute; left:0; top:18%; bottom:18%; width:2px; background:var(--bronze); transform:scaleY(0); transform-origin:center; transition:transform .35s var(--ease-soft);}
  .lu-row:hover{padding-left:20px; background:linear-gradient(90deg,var(--bronze-soft),transparent 70%);}
  .lu-row:hover::before{transform:scaleY(1);}
  .lu-row .wd{width:54px; flex:none; font:500 20px/1 var(--serif); color:rgba(199,163,94,0.75); text-align:center;}
  .lu-row .info{flex:1; min-width:0;}
  .lu-row .t{font:500 23px/1 var(--serif); color:var(--cream); margin-bottom:6px;}
  .lu-row .s{font:400 11px/1 var(--body); letter-spacing:0.1em; text-transform:uppercase; color:var(--muted2);}
  .lu-row .arr{font:300 26px/1 var(--display); color:rgba(199,163,94,0.55); flex:none;}

  /* ============================ DRINK SPECIALS ============================ */
  .specials{position:relative; padding:118px 0;}
  .spec-poster{position:relative; max-width:600px; margin:0 auto; padding:56px 52px 60px; text-align:center;
    background:linear-gradient(180deg, rgba(18,14,10,0.55), rgba(9,8,9,0.3));}
  .spec-poster::before{content:""; position:absolute; inset:8px; border:1px solid rgba(199,163,94,0.28); pointer-events:none;}
  .spec-poster .dcnr{position:absolute; width:42px; height:42px; color:var(--gold); opacity:.75; z-index:1;}
  .spec-poster .dcnr svg{width:100%; height:100%; display:block;}
  .spec-poster .dcnr.tl{top:0; left:0;}
  .spec-poster .dcnr.tr{top:0; right:0; transform:scaleX(-1);}
  .spec-poster .dcnr.bl{bottom:0; left:0; transform:scaleY(-1);}
  .spec-poster .dcnr.br{bottom:0; right:0; transform:scale(-1,-1);}
  .spec-block{position:relative; z-index:1;}
  .spec-block + .spec-block{margin-top:26px;}
  .spec-head{display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:14px;}
  .spec-head .fl{width:30px; height:1px; background:linear-gradient(90deg,transparent,rgba(199,163,94,0.65));}
  .spec-head .fl:last-child{background:linear-gradient(90deg,rgba(199,163,94,0.65),transparent);}
  .spec-head .plq{display:inline-flex; align-items:center; gap:11px; padding:7px 18px; border:1px solid rgba(199,163,94,0.4);}
  .spec-head .plq .dia{width:5px; height:5px; flex:none; border:1px solid var(--gold); transform:rotate(45deg);}
  .spec-head .plq .dn{font:500 13px/1 var(--body); letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); padding-left:0.28em;}
  .spec-line{display:flex; align-items:baseline; gap:12px; padding:7px 0; text-align:left;}
  .spec-line .nm{font:400 13.5px/1.4 var(--body); letter-spacing:0.13em; text-transform:uppercase; color:var(--cream);}
  .spec-line .dots{flex:1; border-bottom:1px dotted rgba(199,163,94,0.4); transform:translateY(-4px);}
  .spec-line .pr{font:500 16px/1 var(--body); letter-spacing:0.06em; color:var(--gold); white-space:nowrap;}
  @media(max-width:560px){
    .spec-poster{padding:42px 22px 46px;}
    .spec-head .fl{width:16px;}
    .spec-line .nm{font-size:12px; letter-spacing:0.08em; white-space:normal;}
  }

  /* ============================ TASTINGS ============================ */
  .tastings{padding:110px 0;}
  .tast-grid{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;}
  .tast-img{position:relative; padding:14px;}
  .tast-img .c{position:absolute; width:34px; height:34px;}
  .tast-img .c.tl{top:0; left:0; border-top:1px solid var(--gold); border-left:1px solid var(--gold);}
  .tast-img .c.tr{top:0; right:0; border-top:1px solid var(--gold); border-right:1px solid var(--gold);}
  .tast-img .c.bl{bottom:0; left:0; border-bottom:1px solid var(--gold); border-left:1px solid var(--gold);}
  .tast-img .c.br{bottom:0; right:0; border-bottom:1px solid var(--gold); border-right:1px solid var(--gold);}
  .tast-img img{width:100%; height:480px; object-fit:cover;}
  .tast-body{text-align:center;}
  .tast-body h2{margin:0 0 22px; font:300 50px/1.08 var(--display); letter-spacing:0.16em; color:var(--cream);}
  .tast-body .orn{display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:24px;}
  .tast-body .orn .ln{width:46px; height:1px; background:var(--line-strong);}
  .tast-body .orn .x{font:400 14px/1 var(--body); color:var(--gold); letter-spacing:0.1em;}
  .tast-body p{margin:0 auto 32px; max-width:430px; font:400 15px/1.8 var(--body); color:var(--muted);}

  /* ============================ FEATURED MENU ============================ */
  .menu-feature{padding:90px 0 100px;}
  .menu-grid{display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:34px; margin-top:8px;}
  .menu-item{flex:1 1 360px; max-width:440px; text-align:center;}
  .menu-label{font:400 12px/1 var(--body); letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); margin-bottom:16px;}
  .menu-card{position:relative; display:block; cursor:pointer;}
  .menu-card img{width:100%; height:auto; display:block; border:1px solid rgba(199,163,94,0.22); box-shadow:0 30px 80px rgba(0,0,0,0.55); filter:brightness(0.96); transition:transform .7s var(--ease), filter .5s ease;}
  .menu-card:hover img{transform:scale(1.012); filter:brightness(1.05);}
  .menu-card .cnr{position:absolute; width:30px; height:30px; z-index:2; pointer-events:none;}
  .menu-card .cnr.tl{top:-8px; left:-8px; border-top:1px solid var(--gold); border-left:1px solid var(--gold);}
  .menu-card .cnr.tr{top:-8px; right:-8px; border-top:1px solid var(--gold); border-right:1px solid var(--gold);}
  .menu-card .cnr.bl{bottom:-8px; left:-8px; border-bottom:1px solid var(--gold); border-left:1px solid var(--gold);}
  .menu-card .cnr.br{bottom:-8px; right:-8px; border-bottom:1px solid var(--gold); border-right:1px solid var(--gold);}
  .menu-card .menu-zoom{position:absolute; top:50%; left:50%; width:64px; height:64px; border-radius:50%; border:1px solid var(--gold); background:rgba(11,11,12,0.34); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; opacity:0; transform:translate(-50%,-50%) scale(.78); transition:opacity .3s ease, transform .35s var(--ease); pointer-events:none;}
  .menu-card:hover .menu-zoom{opacity:1; transform:translate(-50%,-50%) scale(1);}
  .menu-card .menu-zoom svg{width:22px; height:22px; stroke:var(--gold); stroke-width:2; fill:none;}
  /* full food menu (dinner + brunch) — reuses .item / .col-head from The List */
  /* re-order the menu blocks to Brunch → Lunch → Dinner (chronological), CSS-only */
  .menu-feature .wrap{display:flex; flex-direction:column;}
  .menu-feature .wrap > .menu-block:nth-child(2){order:2;}   /* Lunch  → middle */
  .menu-feature .wrap > .menu-block:nth-child(3){order:3;}   /* Dinner → last */
  .menu-feature .wrap > .menu-block:nth-child(4){order:1;}   /* Brunch → first */
  .menu-block{margin-top:60px;}
  .menu-block-head{text-align:center; margin-bottom:34px;}
  .menu-block-head .mb{font:500 46px/1 var(--serif); color:var(--cream); letter-spacing:0.02em;}
  .menu-block-head .ms{display:block; margin-top:11px; font:400 11px/1 var(--body); letter-spacing:0.32em; text-transform:uppercase; color:var(--gold-lt);}
  .menu-feature .mstar{color:var(--gold); font-style:normal; font-weight:400; letter-spacing:0; margin:0 .12em;}
  .menu-cols .item .nm .mstar{font-size:0.72em; vertical-align:0.12em;}
  .menu-block-head::after{content:""; display:block; width:54px; height:1px; margin:18px auto 0; background:linear-gradient(90deg,transparent,var(--gold),transparent);}
  .menu-cols{column-count:3; column-gap:46px; margin-top:4px;}
  .menu-col{display:contents;}                              /* let categories flow + auto-balance across the columns */
  .menu-cols .list-col{margin-bottom:34px;}                 /* categories may flow across columns so all three fill evenly */
  .menu-cols .col-head{margin-bottom:10px; break-after:avoid; -webkit-column-break-after:avoid;}
  .menu-cols .col-head .cn{font-size:13px;}
  .menu-cols .col-head .cp{font:500 18px/1 var(--body); letter-spacing:0.03em; color:var(--gold); white-space:nowrap;}
  .menu-cols .item{padding:12px 0; break-inside:avoid; -webkit-column-break-inside:avoid;}
  .menu-cols .item .nm{font-size:22px; white-space:normal;}
  .menu-cols .item .pr{font-size:16px;}
  .menu-cols .item .ds{font:400 16px/1.55 var(--serif); color:#d3cabb; max-width:100%; margin-top:7px;}
  .menu-cols .item .opt{margin-top:7px; font:500 11px/1.4 var(--body); letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-lt);}
  .menu-cols .item .pr .pn{font-size:0.6em; letter-spacing:0.06em; color:var(--muted2); vertical-align:0.14em; margin-left:.15em;}
  .menu-note{margin-top:12px; font:400 16px/1.6 var(--serif); color:#d3cabb; break-inside:avoid; -webkit-column-break-inside:avoid;}
  .menu-note b{display:block; margin-bottom:4px; font:500 10px/1 var(--body); letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-lt); font-style:normal;}
  .menu-tip{margin-top:10px; font:italic 400 13px/1.5 var(--serif); color:var(--muted); break-inside:avoid; -webkit-column-break-inside:avoid;}

  /* ============================ GALLERY ============================ */
  .gallery{padding:90px 0 110px;}
  .gal-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; padding:0 4%; margin-top:16px;}
  .gal{position:relative; display:block; overflow:hidden; border:1px solid var(--line); cursor:pointer; aspect-ratio:4/3;}
  /* each photo reveals as it scrolls into view (all tiles, not just the first 8) */
  .gal-grid .gal{opacity:0; transform:translateY(26px); filter:blur(5px); transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);}
  .gal-grid .gal.in{opacity:1; transform:none; filter:none;}
  .gal img{filter:grayscale(0.28) brightness(0.82);}
  .gal:hover img{filter:grayscale(0) brightness(1);}
  .gal .ph{width:100%; height:100%; background:linear-gradient(160deg,#1a1610,#0c0b0d); display:flex; align-items:center; justify-content:center;}
  .gal .ph::after{content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(135deg,rgba(255,255,255,0.02) 0 1px,transparent 1px 12px);}
  .gal img{width:100%; height:100%; object-fit:cover; transition:transform .8s ease, filter .55s ease;}
  .gal:hover img{transform:scale(1.06);}
  .gal .mono{font:300 60px/1 var(--serif); color:rgba(199,163,94,0.28); position:relative;}
  .gal .cap{position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,7,6,0.85),transparent 52%); display:flex; align-items:flex-end; padding:18px; opacity:0; transition:opacity .35s ease; z-index:2;}
  .gal:hover .cap{opacity:1;}
  .gal .cap span{font:400 11px/1 var(--body); letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-lt);}
  /* magnifier on hover (matches the photo slider) */
  .gal::after{content:""; position:absolute; top:50%; left:50%; width:60px; height:60px; margin:-30px 0 0 -30px; border-radius:50%; z-index:3; pointer-events:none;
    border:1px solid var(--gold); -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px);
    background:rgba(11,11,12,0.32) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C7A35E' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E") center/22px no-repeat;
    opacity:0; transform:scale(.82); transition:opacity .3s ease .1s, transform .4s var(--ease) .1s, backdrop-filter .35s ease .1s, -webkit-backdrop-filter .35s ease .1s;}
  .gal:hover::after{opacity:1; transform:scale(1); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);}
  .gal.w2,.gal.h2{grid-column:auto; grid-row:auto;}  /* uniform wall — old spans neutralised */

  /* ============================ VISIT / MAP ============================ */
  .visit{padding:90px 0;}
  .visit-card{display:grid; grid-template-columns:1.4fr 1fr; border:1px solid rgba(199,163,94,0.22);}
  .map{position:relative; min-height:440px; background:#0e0d0f; overflow:hidden;}
  .map iframe{position:absolute; inset:0; width:100%; height:100%; border:0; filter:invert(0.9) hue-rotate(180deg) saturate(0.65) brightness(0.92) contrast(0.95); transition:filter .55s ease;}
  .map:hover iframe{filter:invert(0.88) hue-rotate(180deg) saturate(0.8) brightness(0.98) contrast(0.98);}
  .map::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(130% 130% at 50% 50%, transparent 52%, rgba(8,7,6,0.55)); z-index:1;}
  .map .cnr{position:absolute; width:26px; height:26px; z-index:2; pointer-events:none;}
  .map .cnr.tl{top:14px; left:14px; border-top:1px solid var(--gold); border-left:1px solid var(--gold);}
  .map .cnr.tr{top:14px; right:14px; border-top:1px solid var(--gold); border-right:1px solid var(--gold);}
  .map .cnr.bl{bottom:14px; left:14px; border-bottom:1px solid var(--gold); border-left:1px solid var(--gold);}
  .map .cnr.br{bottom:14px; right:14px; border-bottom:1px solid var(--gold); border-right:1px solid var(--gold);}
  .visit-info{padding:46px 44px; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(160deg,#15130E,#100E0B);}
  .visit-info .k{font:400 11px/1 var(--body); letter-spacing:0.24em; text-transform:uppercase; color:var(--gold); margin-bottom:16px;}
  .visit-info .addr{font:500 26px/1.3 var(--serif); color:var(--cream); margin-bottom:22px;}
  .visit-info .note{font:400 13px/2 var(--body); color:var(--muted); margin-bottom:28px;}
  .visit-btns{display:flex; flex-direction:column; gap:12px; max-width:340px;}
  .visit-btns .btn{width:100%; text-align:center; white-space:nowrap;}

  /* ============================ FOOTER ============================ */
  footer{border-top:1px solid var(--line); padding:80px 0 40px;}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:50px;}
  .foot-grid img{width:74px; height:74px; object-fit:contain; margin-bottom:18px;}
  .foot-grid .wm{font:600 15px/1 var(--display); letter-spacing:0.3em; color:var(--cream); margin-bottom:14px;}
  .foot-grid .wm span{color:var(--gold);}
  .foot-grid p{margin:0; max-width:280px; font:400 13px/1.8 var(--body); color:#7e776b;}
  .foot-grid .ck{font:400 11px/1 var(--body); letter-spacing:0.24em; text-transform:uppercase; color:var(--gold); margin-bottom:18px;}
  .foot-grid .lst{font:400 13px/2.1 var(--body); color:var(--muted);}
  .foot-grid .lst.hours{display:flex; flex-direction:column; gap:3px; line-height:1.5;}
  .foot-grid .lst.hours b{display:inline-block; min-width:96px; color:var(--gold-lt); font-weight:600;}
  .foot-grid .lst.hours span{white-space:nowrap;}
  .foot-grid .soc{display:flex; flex-direction:column; gap:11px;}
  .foot-grid .soc a{font:400 13px/1 var(--body); color:var(--muted); transition:color .3s;}
  .foot-grid .soc a:hover{color:var(--gold);}
  .foot-grid .lst a{color:inherit; transition:color .3s ease;}
  .foot-grid .lst a:hover{color:var(--gold);}
  .foot-soc{display:flex; gap:14px; margin-top:22px;}
  .foot-soc a{color:var(--muted); display:flex; transition:color .3s ease, transform .3s ease;}
  .foot-soc a:hover{color:var(--gold); transform:translateY(-2px);}
  .foot-soc svg{width:18px; height:18px;}
  .foot-div{display:flex; align-items:center; gap:18px; margin:54px 0 28px;}
  .foot-div .ln{flex:1; height:1px; background:var(--line);}
  .foot-div .est{font:400 16px/1 var(--body); letter-spacing:0.3em; color:var(--gold); white-space:nowrap; text-align:center;}
  .copy{text-align:center; font:400 11px/1 var(--body); letter-spacing:0.14em; text-transform:uppercase; color:#5a554c;}

  /* ============================ PHOTO SLIDER (marquee) ============================ */
  .slider{position:relative; background:transparent; padding:0; overflow:hidden;}
  .slider .vbg{position:absolute; inset:0; background:url('assets/img/vertical-lines-bg.svg') left top repeat-y; opacity:.16; pointer-events:none;}
  .ph-splide{position:relative; width:100%; padding:0 15px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
  .ph-splide .splide__slide{width:380px; height:560px;}
  .slide{position:relative; display:block; height:100%; width:100%; border-radius:6px; overflow:hidden; background:var(--panel); border:0; padding:0; cursor:pointer;
    box-shadow:0 18px 50px rgba(0,0,0,0.4);}
  .slide img{height:100%; width:100%; display:block; object-fit:cover; filter:grayscale(0.32) brightness(0.74);
    transition:transform .9s var(--ease), filter .55s ease;}
  .slide:hover img{transform:scale(1.07); filter:grayscale(0) brightness(1);}
  /* stop native image/link drag so slider drag is smooth */
  .ph-splide a.slide, .ph-splide a.slide img{-webkit-user-drag:none; -khtml-user-drag:none; user-select:none;}
  .ph-splide .splide__slide{cursor:grab;} .ph-splide .splide__slide:active{cursor:grabbing;}
  .slide .ov{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at center, rgba(8,7,6,0.32), rgba(8,7,6,0.06)); opacity:0; transition:opacity .4s ease;}
  .slide:hover .ov{opacity:1;}
  .slide .ov .circ{display:none;}  /* replaced by the cursor-tracking .ph-lens below — drift-proof (lives on the non-moving root, not the slide) */
  /* one gold lens on the strip root; JS positions it under the cursor, so the drifting track can never carry it off-centre */
  .ph-splide .ph-lens{position:absolute; top:0; left:0; z-index:6; width:72px; height:72px; border-radius:50%; border:1px solid var(--gold); background:rgba(11,11,12,0.32); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; pointer-events:none; will-change:left,top,transform;
    opacity:0; transform:translate(-50%,-50%) scale(.72); transition:opacity .28s ease, transform .34s var(--ease);}
  .ph-splide .ph-lens.on{opacity:1; transform:translate(-50%,-50%) scale(1);}
  .ph-splide .ph-lens.hidden{display:none !important;}  /* hard kill while lightbox is open — beats any override, no fade */
  /* while dragging: fade opacity ONLY (no scale) so it just disappears — matches Upcoming Shows, no zoom-out */
  .ph-splide .ph-lens.sliding{opacity:0 !important; transform:translate(-50%,-50%) scale(1) !important; transition:opacity .12s ease !important;}
  .ph-splide .ph-lens svg{width:22px; height:22px; stroke:var(--gold); stroke-width:2; fill:none;}
  /* CSS-only backstop: while ANY Magnific popup is on screen, kill every hover-magnifier so none can bleed over the lightbox */
  body:has(.mfp-wrap) .ph-lens,
  body:has(.mfp-wrap) .gal::after{display:none !important;}

  /* ---- Magnific Popup — dark/gold theme ---- */
  /* Magnific paints a zoom-out (magnifying-glass) cursor over the whole popup — override it to a clean arrow */
  body.mfp-zoom-out-cur, body.mfp-zoom-out-cur .mfp-image-holder{cursor:default !important;}
  body.mfp-zoom-out-cur .mfp-close, body.mfp-zoom-out-cur .mfp-arrow{cursor:pointer !important;}
  .mfp-ph.mfp-bg{background:#08070a; opacity:0.96;}
  .mfp-ph .mfp-figure{opacity:0; transform:scale(.92); transition:opacity .35s ease, transform .4s var(--ease);}
  .mfp-ph.mfp-ready .mfp-figure{opacity:1; transform:none;}
  .mfp-ph.mfp-removing .mfp-figure{opacity:0; transform:scale(.96);}
  /* keep the photo inside the viewport — no scrollbar */
  .mfp-ph img.mfp-img{max-height:calc(100vh - 130px)!important; padding:0;}
  .mfp-ph .mfp-figure{margin:0 auto;}
  .mfp-ph .mfp-img{border:1px solid var(--line-strong); box-shadow:0 30px 90px rgba(0,0,0,0.7);}
  .mfp-ph .mfp-figure:after{box-shadow:none;}
  /* caption (bottom-left) + counter (bottom-right) */
  .mfp-ph .mfp-bottom-bar{margin-top:10px;}
  .mfp-ph .mfp-title{font:400 12px/1.5 var(--body); letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-lt); padding-right:90px;}
  .mfp-ph .mfp-counter{font:400 12px/1.5 var(--body); letter-spacing:0.16em; color:var(--muted2); right:0; top:0;}
  /* arrows — clean chevron, no default triangles */
  .mfp-ph .mfp-arrow{width:60px; height:60px; margin-top:-30px; opacity:.9;}
  .mfp-ph .mfp-arrow:hover,.mfp-ph .mfp-arrow:focus{opacity:1;}
  .mfp-ph .mfp-arrow:after{display:none!important;}
  .mfp-ph .mfp-arrow:before{content:''; display:block; position:absolute; top:50%; left:50%; width:15px; height:15px; margin:0; border:0;
    border-top:2px solid var(--cream); border-right:2px solid var(--cream); opacity:1; transition:border-color .3s ease;}
  .mfp-ph .mfp-arrow-left{left:24px;} .mfp-ph .mfp-arrow-right{right:24px;}
  .mfp-ph .mfp-arrow-right:before{transform:translate(-65%,-50%) rotate(45deg);}
  .mfp-ph .mfp-arrow-left:before{transform:translate(-35%,-50%) rotate(-135deg);}
  .mfp-ph .mfp-arrow:hover:before{border-color:var(--gold);}
  /* close — × at top/right 40px */
  .mfp-ph button.mfp-close{top:40px; right:40px; width:48px; height:48px; padding:0; margin:0; opacity:1; color:var(--cream);
    display:flex; align-items:center; justify-content:center; background:transparent; transition:color .3s ease;}
  .mfp-ph button.mfp-close svg{width:26px; height:26px; transform-origin:center center; transition:transform .45s var(--ease); pointer-events:none;}
  .mfp-ph button.mfp-close:hover{color:var(--gold);}
  .mfp-ph button.mfp-close:hover svg{transform:rotate(90deg);}

  /* ============================ THE LIST (cocktails & spirits) ============================ */
  .list{position:relative; padding:110px 0;}
  .list-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; margin-top:8px;}
  .list-col .col-head{display:flex; align-items:baseline; gap:16px; margin-bottom:14px;}
  .list-col .col-head .ct{font:500 13px/1 var(--body); letter-spacing:0.28em; text-transform:uppercase; color:var(--gold);}
  .list-col .col-head .cl{flex:1; height:1px; background:var(--line);}
  .list-col .col-head .cn{font:italic 500 16px/1 var(--serif); color:var(--muted2);}
  .item{padding:18px 0; border-bottom:1px solid var(--hair);}
  .item .row{display:flex; align-items:baseline; gap:12px;}
  .item .nm{font:500 25px/1 var(--serif); color:var(--cream); white-space:nowrap;}
  .item .dots{flex:1; border-bottom:1px dotted rgba(199,163,94,0.4); transform:translateY(-5px);}
  .item .pr{font:500 16px/1 var(--body); letter-spacing:0.06em; color:var(--gold); white-space:nowrap;}
  .item .ds{margin-top:6px; font:italic 400 14px/1.45 var(--serif); color:var(--muted2); max-width:90%;}
  .list-note{text-align:center; margin-top:46px; font:italic 500 17px/1.6 var(--serif); color:var(--muted);}

  /* ============================ RESERVE MODAL ============================ */
  .modal{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:24px;
    opacity:0; visibility:hidden; transition:opacity .45s var(--ease-soft), visibility .45s;}
  .modal.open{opacity:1; visibility:visible;}
  .modal-scrim{position:absolute; inset:0; background:rgba(6,5,7,0.78); backdrop-filter:blur(6px);}
  .modal-card{position:relative; width:100%; max-width:560px; max-height:92vh; overflow:auto; padding:48px 46px 42px;
    background:linear-gradient(165deg,#161118,#0d0b0d); border:1px solid var(--line-strong);
    transform:translateY(26px) scale(.98); opacity:0; transition:transform .55s var(--ease), opacity .55s var(--ease);
    box-shadow:0 40px 110px rgba(0,0,0,0.6);}
  .modal.open .modal-card{transform:none; opacity:1;}
  .modal-card .x{position:absolute; top:16px; right:18px; width:38px; height:38px; border:1px solid var(--line); background:none; color:var(--muted); font:300 22px/1 var(--body); cursor:pointer; transition:all .3s ease;}
  .modal-card .x:hover{border-color:var(--gold); color:var(--gold); transform:rotate(90deg);}
  .modal-head{text-align:center; margin-bottom:30px;}
  .modal-head .k{font:400 24px/1 var(--script); color:var(--gold); margin-bottom:10px;}
  .modal-head h3{margin:0; font:300 34px/1 var(--display); letter-spacing:0.16em; color:var(--cream);}
  .modal-head .sub{margin-top:12px; font:italic 500 15px/1.5 var(--serif); color:var(--muted2);}
  .field{margin-bottom:18px;}
  .field label{display:block; font:400 10px/1 var(--body); letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); margin-bottom:9px;}
  .field input,.field select,.field textarea{width:100%; padding:13px 15px; background:rgba(255,255,255,0.03); border:1px solid var(--line);
    color:var(--cream); font:400 14px/1.4 var(--body); transition:border-color .3s ease, background .3s ease;}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--gold); background:rgba(199,163,94,0.05);}
  .field textarea{resize:vertical; min-height:78px;}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .modal form .btn{width:100%; margin-top:8px; text-align:center; padding:16px;}
  .modal-ok{display:none; text-align:center; padding:14px 0 4px;}
  .modal-ok.show{display:block;}
  .modal-ok .tick{font:300 46px/1 var(--serif); color:var(--gold); margin-bottom:14px;}
  .modal-ok p{font:italic 500 17px/1.6 var(--serif); color:var(--cream); margin:0;}
  body.modal-on,body.nav-open{overflow:hidden;}

  /* ============================ RESPONSIVE ============================ */
  @media (max-width:1024px){
    .strip{grid-template-columns:repeat(2,1fr);} .timeline{grid-template-columns:repeat(2,1fr); row-gap:34px;}
    .bands-grid{grid-template-columns:repeat(2,1fr);}
    .feat-grid{grid-template-columns:1fr;} .feat-hero{min-height:420px;}
    .gal-grid{grid-template-columns:repeat(3,1fr);}
    .menu-cols{column-count:2; column-gap:40px;}
    .foot-grid{grid-template-columns:repeat(2,1fr); gap:40px;}
    .visit-card{grid-template-columns:1fr;}
    .visit-info{text-align:center; align-items:center; padding:42px 32px;}
    .ph-splide .splide__slide{width:300px; height:420px;}
  }
  @media (max-width:820px){
    .wrap{padding-left:28px; padding-right:28px;}
    nav.top,nav.top.scrolled{display:flex; justify-content:space-between; padding:10px 24px;}
    .brand{position:relative; z-index:3;}
    .nav-open .brand{opacity:1; visibility:visible;}        /* show the logo while the menu is open */
    .brand img,nav.top.scrolled .brand img{width:76px; height:76px;}
    .nav-social{display:none;}
    /* mobile menu — full-width dropdown BELOW the header with a solid background */
    .nav-links{position:fixed; top:0; left:0; right:auto; width:100vw; z-index:1; flex-direction:column; align-items:center; gap:2px; padding:104px 26px 34px;
      background:#0a0a0c; border-bottom:1px solid var(--line); box-shadow:0 26px 54px rgba(0,0,0,0.55);
      transform:translateY(-100%); transition:transform .42s cubic-bezier(.2,.7,.2,1);}
    .nav-links.open{transform:translateY(0);}
    .nav-links a.lnk{padding:15px 0; font-size:13px;}
    .nav-links a.lnk::after{bottom:5px;}
    .nav-toggle{display:flex; position:relative; z-index:4;}
    .nav-toggle:hover span,.nav-open .nav-toggle span{background:var(--gold);}
    .nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    .nav-open .nav-toggle span:nth-child(2){opacity:0;}
    .nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
    header.hero{height:auto; min-height:100svh; padding:100px 28px 104px;}
    .about-grid,.tast-grid,.list-grid{grid-template-columns:1fr; gap:44px;}
    /* tighter vertical rhythm on tablet/mobile — the desktop paddings are too airy on small screens */
    .about,.bands,.shows,.events,.menu-feature,.gallery,.visit{padding-top:74px; padding-bottom:78px;}
    footer{padding:62px 0 34px;}
    .hero-rail{display:none;}
    .frame{display:none;}                                   /* drop the 4 vertical accent lines on tablet/mobile */
    .scroll-cue{display:none;}                              /* hide the hero scroll cue on tablet/mobile */
    .show-card{height:min(60vh,440px);}                     /* shorter show cards on smaller screens */
    .visit-info{padding:38px 26px;}
    /* footer: stack vertically, centered */
    .foot-grid{grid-template-columns:1fr; gap:34px; justify-items:center; text-align:center;}
    .foot-grid img{display:block; margin-left:auto; margin-right:auto;}
    .foot-grid p{margin-left:auto; margin-right:auto;}
    .foot-soc{justify-content:center;}
    .foot-grid .lst.hours{align-items:center;}
  }
  @media (max-width:560px){
    .strip,.timeline,.bands-grid{grid-template-columns:1fr;}
    .gal-grid{grid-template-columns:repeat(2,1fr);}
    .menu-cols{column-count:1;} .menu-block-head .mb{font-size:32px;}
    .about,.bands,.shows,.events,.menu-feature,.gallery,.visit{padding-top:56px; padding-bottom:60px;}
    footer{padding:52px 0 30px;}
    .h2,.about h2,.tast-body h2{font-size:34px;}
    .feat-hero .nm{font-size:44px;} .feat-hero .big{font-size:130px;}
    .billing{flex-direction:column; align-items:flex-start; gap:14px;} .billing .star{display:none;}
    .field-row{grid-template-columns:1fr;}
    .item .nm{font-size:21px; white-space:normal;}
    .modal-card{padding:40px 26px 34px;}
    .ph-splide .splide__slide{width:220px; height:300px;}
  }
  @media (max-width:430px){
    .copy .copy-dot{display:none;}
    .copy .copy-rr{display:block; margin-top:4px;}          /* "All Rights Reserved" drops to a second line */
  }
  @media (max-width:360px){
    .visit-info .note .ne-dot{display:none;}
    .visit-info .note .ne-time{display:block;}              /* "Open every night" / time on two lines */
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;}
    [data-reveal],[data-stagger]>*,.gal-grid .gal{opacity:1!important; transform:none!important; clip-path:none!important; filter:none!important; transition:none!important;}
    [data-reveal="title"]{letter-spacing:0.18em!important;}
    .frame i{transform:scaleY(1);}
  }