/* ==================================================================   SPEAKEASY TAPAS LOUNGE, styles
   Palette sampled from the house crest: noir · vermilion · cream · gold.
   ========================================================================= */

:root{
  /* colour */
  --noir:#0a0a0b;
  --noir-2:#0f0f11;
  --panel:#141416;
  --panel-2:#191919;
  --ink:#050506;
  --red:#e01414;
  --red-hi:#ff2a24;
  --red-deep:#7d0f13;
  --gold:#c9a227;
  --gold-hi:#e9cd7e;
  --gold-lo:#9c7c22;
  --cream:#f4ecd8;
  --cream-2:#d8d0bf;
  --muted:#aca498;
  --line:rgba(201,162,39,.22);
  --line-soft:rgba(244,236,216,.10);

  /* type, Cinzel (engraved deco caps) leads; Cormorant Garamond sets the text.
     No script/cursive faces: the elegance comes from tracking and scale. */
  --f-display:'Cinzel', 'Cormorant Garamond', serif;
  --f-display-deco:'Cinzel Decorative', 'Cinzel', serif;
  --f-deco:'Cinzel', 'Cormorant Garamond', serif;   /* labels: engraved caps, set at --w-deco */
  --w-deco:600;
  --f-serif:'Cormorant Garamond', 'Georgia', serif;

  /* metrics */
  --maxw:1220px;
  --gutter:clamp(18px,5vw,64px);
  --radius:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 24px 60px -24px rgba(0,0,0,.85);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--noir);
  color:var(--cream);
  font-family:var(--f-serif);
  font-size:clamp(17px,1.15vw,19px);
  line-height:1.6;
  letter-spacing:.1px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.locked{overflow:hidden;height:100dvh}

img{max-width:100%;height:auto;display:block}
/* the img rule above out-specifies the UA [hidden] rule, so hidden images
   would otherwise still render. Keep this after any display: declaration. */
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:4px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:12px;top:-60px;z-index:10000;background:var(--gold);color:#000;padding:10px 16px;border-radius:8px;transition:top .2s}
.skip-link:focus{top:12px}

/* ---------- background ambience ---------- */
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.grain{position:fixed;inset:-50%;z-index:1;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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-3%)}60%{transform:translate(-2%,4%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%,transparent 40%,rgba(0,0,0,.55) 100%)}

/* keep content above ambience */
.nav,main,.footer{position:relative;z-index:2}

/* ==================================================================   BUTTONS · DECO · HEADINGS
   ========================================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.92em 1.7em;border-radius:999px;font-family:var(--f-deco);font-weight:var(--w-deco);
  letter-spacing:.18em;text-transform:uppercase;font-size:.78rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s;will-change:transform}
.btn--gold{background:linear-gradient(135deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));color:#1a1204;
  box-shadow:0 10px 30px -10px rgba(201,162,39,.6),inset 0 1px 0 rgba(255,255,255,.4)}
.btn--gold:hover{transform:translateY(-3px);box-shadow:0 18px 40px -12px rgba(201,162,39,.75)}
.btn--gold-sm{background:linear-gradient(135deg,var(--gold-hi),var(--gold-lo));color:#1a1204;padding:.7em 1.25em;
  border-radius:999px;font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;white-space:nowrap}
.btn--gold-sm:hover{transform:translateY(-2px)}
.btn--ghost{border:1px solid var(--line);color:var(--cream);backdrop-filter:blur(4px)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-hi);transform:translateY(-3px)}

.kicker{font-family:var(--f-deco);font-weight:var(--w-deco);text-transform:uppercase;letter-spacing:.42em;
  font-size:.72rem;color:var(--gold);margin:0 0 1rem;opacity:.95}
.h-display{font-family:var(--f-display);font-weight:400;line-height:1.02;
  font-size:clamp(2.2rem,6vw,4.4rem);letter-spacing:.01em;margin:.1em 0 .5em;color:var(--cream)}
.h-display em{font-family:var(--f-serif);font-style:italic;font-weight:600;color:var(--gold-hi);font-size:.92em;letter-spacing:.005em}
.h-sub{font-family:var(--f-deco);font-weight:var(--w-deco);text-transform:uppercase;letter-spacing:.22em;font-size:1.05rem;color:var(--cream);margin:.2em 0 .8em}
.lead{font-size:1.28em;color:var(--cream);line-height:1.55}
.note{color:var(--muted);font-size:.9em;font-style:italic}
.link-underline{font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.14em;text-transform:uppercase;font-size:.76rem;color:var(--gold-hi);
  border-bottom:1px solid var(--line);padding-bottom:3px;transition:color .25s,border-color .25s}
.link-underline:hover{color:var(--cream);border-color:var(--gold)}

.deco-divider{display:flex;align-items:center;justify-content:center;gap:16px;margin:2.2rem auto 0;max-width:340px;color:var(--gold)}
.deco-divider span{height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.deco-divider i{font-style:normal;font-size:1.1rem;opacity:.9}

.section{padding:clamp(64px,10vw,140px) var(--gutter);max-width:var(--maxw);margin-inline:auto}
.section__head{margin-bottom:clamp(32px,5vw,64px)}
.section__head.center{text-align:center;max-width:760px;margin-inline:auto}
.section__intro{color:var(--cream-2);font-size:1.2em}
.center-head{text-align:center}

/* ==================================================================   INTRO, "shhh" then the doors swing open
   ========================================================================= */
.intro{position:fixed;inset:0;z-index:9999;overflow:hidden;perspective:1600px;
  background:radial-gradient(80% 60% at 50% 42%,#161011 0%,#070708 60%,#000 100%)}
.intro.is-gone{display:none}

.doors{position:absolute;inset:0;transform-style:preserve-3d}
.door{position:absolute;top:0;bottom:0;width:50.5%;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.5) 0 2px,transparent 2px 26px),
    linear-gradient(180deg,#241610,#160d08 40%,#0c0705);
  box-shadow:inset 0 0 120px rgba(0,0,0,.9);
  transition:transform 2.9s cubic-bezier(.72,0,.18,1),opacity 1.1s ease 1.9s;
  backface-visibility:hidden}
.door::before{/* gold deco inlay panel */
  content:"";position:absolute;inset:9% 12%;border:2px solid rgba(201,162,39,.5);border-radius:6px;
  box-shadow:inset 0 0 0 6px rgba(0,0,0,.4),inset 0 0 40px rgba(201,162,39,.12)}
.door::after{/* inner deco lines */
  content:"";position:absolute;inset:16% 20%;border:1px solid rgba(201,162,39,.28)}
.door--l{left:0;transform-origin:left center;border-right:1px solid rgba(0,0,0,.6)}
.door--r{right:0;transform-origin:right center;border-left:1px solid rgba(0,0,0,.6)}
.door__knob{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;translate:0 -50%;
  background:radial-gradient(circle at 35% 30%,var(--gold-hi),var(--gold-lo));box-shadow:0 0 14px rgba(201,162,39,.7)}
.door--l .door__knob{right:16px}
.door--r .door__knob{left:16px}
.door__seam{position:absolute;top:0;bottom:0;left:50%;width:2px;translate:-50% 0;
  background:linear-gradient(180deg,transparent,rgba(233,205,126,.7),transparent);opacity:0;transition:opacity .6s;filter:blur(1px)}

.intro.is-open .door--l{transform:rotateY(-118deg)}
.intro.is-open .door--r{transform:rotateY(118deg)}
.intro.is-open .door{opacity:.35}
.intro.is-open .door__seam{opacity:1}

.intro__center{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;
  z-index:5;transition:opacity .7s ease,transform .9s var(--ease);padding:24px}
.intro.is-open .intro__center{opacity:0;transform:translateZ(340px) scale(1.35);pointer-events:none}

.peephole{position:relative;width:min(46vw,220px);aspect-ratio:1;display:grid;place-items:center;
  border-radius:50%;background:radial-gradient(circle,#0c0c0e 60%,#000);
  box-shadow:0 0 0 2px rgba(201,162,39,.5),0 0 60px rgba(0,0,0,.9),inset 0 0 40px rgba(0,0,0,.9);
  animation:peepIn 1.1s var(--ease) both}
.peephole__ring{position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(201,162,39,.35);
  animation:ripple 3.4s ease-out infinite}
.peephole__ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(201,162,39,.25);
  animation:ripple 3.4s ease-out 1.2s infinite}
@keyframes ripple{0%{transform:scale(.86);opacity:.8}100%{transform:scale(1.5);opacity:0}}
@keyframes peepIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
.intro__logo{width:76%;filter:drop-shadow(0 8px 24px rgba(0,0,0,.6));animation:logoPulse 3.2s ease-in-out infinite}
@keyframes logoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

.intro__shh{display:flex;gap:.06em;margin:1.6rem 0 .2rem;font-family:var(--f-display);
  font-size:clamp(1.8rem,7vw,3rem);color:var(--cream);letter-spacing:.1em}
.intro__shh span{opacity:0;animation:shh .8s var(--ease) forwards}
.intro__shh span:nth-child(1){animation-delay:.8s}
.intro__shh span:nth-child(2){animation-delay:1.3s}
.intro__shh span:nth-child(3){animation-delay:1.8s}
.intro__shh span:nth-child(4){animation-delay:2.3s}
.intro__shh span:nth-child(5){animation-delay:2.9s;color:var(--gold-hi)}
@keyframes shh{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.intro__word{font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.34em;text-transform:uppercase;font-size:.74rem;
  color:var(--muted);margin:.2rem 0 2rem;opacity:0;animation:fadeUp 1s ease 3.5s forwards}

.intro__enter{position:relative;padding:.9em 2.2em;border-radius:999px;border:1px solid var(--gold);
  color:var(--gold-hi);font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.28em;text-transform:uppercase;font-size:.76rem;
  opacity:0;animation:fadeUp 1s ease 4s forwards;overflow:hidden;transition:color .3s}
.intro__enter::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--gold-hi),var(--gold-lo));
  transform:translateY(101%);transition:transform .4s var(--ease);z-index:-1}
.intro__enter:hover{color:#1a1204}
.intro__enter:hover::before{transform:translateY(0)}
.intro__enter .intro__enter-inner{position:relative}
.intro__enter::after{content:"";position:absolute;inset:0;border-radius:999px;box-shadow:0 0 0 0 rgba(201,162,39,.5);animation:pulseRing 2.6s ease-out infinite}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(201,162,39,.45)}70%{box-shadow:0 0 0 18px rgba(201,162,39,0)}100%{box-shadow:0 0 0 0 rgba(201,162,39,0)}}

.intro__skip{position:absolute;right:22px;bottom:20px;z-index:6;color:var(--muted);
  font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.2em;text-transform:uppercase;font-size:.68rem;
  opacity:0;animation:fadeUp .6s ease 1.4s forwards;transition:color .25s}
.intro__skip:hover{color:var(--cream)}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ==================================================================   NAV
   ========================================================================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .4s,backdrop-filter .4s,box-shadow .4s,padding .4s;
  padding:14px 0}
.nav__inner{max-width:1360px;margin-inline:auto;padding-inline:var(--gutter);display:flex;align-items:center;gap:22px}
.nav.scrolled{background:rgba(8,8,9,.82);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line-soft),0 14px 40px -30px #000;padding:8px 0}
.nav__brand{display:flex;align-items:center;gap:12px}
.nav__logo{width:44px;height:44px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));transition:transform .5s var(--ease)}
.nav__brand:hover .nav__logo{transform:rotate(-8deg) scale(1.06)}
.nav__name{font-family:var(--f-display);font-size:1.12rem;line-height:1;color:var(--cream);display:flex;flex-direction:column;gap:2px}
.nav__name small{font-family:var(--f-deco);font-weight:var(--w-deco);font-size:.52rem;letter-spacing:.34em;color:var(--gold);text-transform:uppercase}
.nav__links{margin-left:auto;display:flex;gap:26px}
.nav__links a{position:relative;font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;color:var(--cream-2);padding:6px 0;transition:color .25s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .3s var(--ease)}
.nav__links a:hover,.nav__links a.active{color:var(--gold-hi)}
.nav__links a.active::after,.nav__links a:hover::after{width:100%}
.nav__call{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  background:linear-gradient(135deg,var(--red-hi),var(--red-deep));color:#fff;font-family:var(--f-deco);font-weight:var(--w-deco);
  letter-spacing:.08em;font-size:.78rem;box-shadow:0 8px 24px -10px rgba(224,20,20,.7);transition:transform .3s var(--ease)}
.nav__call:hover{transform:translateY(-2px)}
.nav__toggle{display:none;flex-direction:column;gap:5px;padding:8px;margin-left:auto}
.nav__toggle span{width:26px;height:2px;background:var(--cream);transition:.3s var(--ease)}

/* mobile menu */
.mobile{position:fixed;inset:0;z-index:99;background:rgba(6,6,7,.97);backdrop-filter:blur(8px);
  display:grid;place-content:center;opacity:0;transition:opacity .35s}
.mobile.open{opacity:1}
.mobile[hidden]{display:none}
.mobile__nav{display:flex;flex-direction:column;gap:6px;text-align:center}
.mobile__nav a{font-family:var(--f-display);font-size:1.9rem;color:var(--cream);padding:10px;opacity:0;transform:translateY(14px)}
.mobile.open .mobile__nav a{animation:fadeUp .5s var(--ease) forwards}
.mobile__nav a:nth-child(1){animation-delay:.05s}.mobile__nav a:nth-child(2){animation-delay:.1s}
.mobile__nav a:nth-child(3){animation-delay:.15s}.mobile__nav a:nth-child(4){animation-delay:.2s}
.mobile__nav a:nth-child(5){animation-delay:.25s}.mobile__nav a:nth-child(6){animation-delay:.3s}
.mobile__call{margin-top:16px;color:var(--gold-hi)!important;font-family:var(--f-deco)!important;font-weight:var(--w-deco)!important;font-size:1rem!important;letter-spacing:.2em;text-transform:uppercase}
body.menu-open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav__toggle span:nth-child(2){opacity:0}
body.menu-open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ==================================================================   HERO
   ========================================================================= */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:-4% -4% -4% -4%;z-index:-4;
  background:url("../assets/img/interior.jpg") center/cover no-repeat;
  animation:kenburns 26s ease-in-out infinite alternate;transform-origin:60% 40%}
@keyframes kenburns{from{transform:scale(1.05)}to{transform:scale(1.16) translateY(-1.5%)}}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(70% 60% at 50% 42%,rgba(10,10,11,.28),rgba(6,6,7,.86) 88%),
    linear-gradient(180deg,rgba(6,6,7,.72) 0%,rgba(6,6,7,.35) 30%,rgba(6,6,7,.6) 70%,var(--noir) 100%)}
.hero__content{padding:96px var(--gutter) 120px;max-width:940px;display:flex;flex-direction:column;align-items:center}

.hero__title{margin:0;line-height:.92;display:flex;flex-direction:column;gap:6px}
.hero__title-1{font-family:var(--f-display);font-size:clamp(3.1rem,13vw,8.2rem);color:var(--cream);
  text-shadow:0 3px 30px rgba(0,0,0,.6);letter-spacing:.02em}
.hero__title-2{font-family:var(--f-display);font-weight:400;font-size:clamp(.85rem,2.1vw,1.35rem);color:var(--gold-hi);
  line-height:1;letter-spacing:.62em;text-indent:.62em;text-transform:uppercase;margin-top:22px}
.hero__tag{font-family:var(--f-serif);font-style:italic;font-size:clamp(1.15rem,2.4vw,1.7rem);color:var(--cream-2);margin:20px 0 30px;
  background:linear-gradient(90deg,var(--cream-2),var(--gold-hi),var(--cream-2));background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 6s linear infinite}
@keyframes shimmer{to{background-position:200% center}}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

.hero__scroll{position:absolute;bottom:26px;left:50%;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted)}
.hero__scroll-dot{width:22px;height:36px;border:1px solid var(--line);border-radius:12px;position:relative}
.hero__scroll-dot::after{content:"";position:absolute;top:6px;left:50%;translate:-50% 0;width:3px;height:7px;border-radius:2px;background:var(--gold);animation:scrolldot 1.8s var(--ease) infinite}
@keyframes scrolldot{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}
.hero__scroll-label{font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.3em;text-transform:uppercase;font-size:.6rem}

/* ==================================================================   ABOUT
   ========================================================================= */
.about__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.about__copy .lead{margin-bottom:1rem}
.about__stats{display:flex;gap:26px;flex-wrap:wrap;margin:2rem 0;padding:1.3rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.about__stats div{display:flex;flex-direction:column}
.about__stats strong{font-family:var(--f-display);font-size:1.5rem;color:var(--gold-hi);line-height:1}
.about__stats span{font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.1em;text-transform:uppercase;font-size:.66rem;color:var(--muted);margin-top:6px}
.about__actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.about__media{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.about__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.about__media figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 20px 16px;font-family:var(--f-deco);font-weight:var(--w-deco);
  letter-spacing:.12em;text-transform:uppercase;font-size:.68rem;color:var(--cream);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.78))}

/* virtual tour */
.tour{margin-top:clamp(48px,7vw,90px)}
.tour__head{text-align:center;margin-bottom:24px}
.tour__frame{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);
  aspect-ratio:16/9;background:#0c0c0e}
.tour__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.05) brightness(.92);z-index:2}
.tour__fallback{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
.tour__fallback img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.tour__fallback p{position:relative;font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;color:var(--cream);text-align:center}
.tour__fallback a{color:var(--gold-hi);border-bottom:1px solid var(--line)}
.tour__frame::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 90px rgba(0,0,0,.6);border-radius:var(--radius)}

/* ==================================================================   MENUS
   ========================================================================= */
.menus{scroll-margin-top:80px}
.tabs{position:relative;display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-bottom:clamp(32px,5vw,54px);
  border-bottom:1px solid var(--line);padding-bottom:2px}
.tab{position:relative;padding:14px 26px;font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.18em;text-transform:uppercase;
  font-size:.82rem;color:var(--muted);transition:color .3s;z-index:2}
.tab:hover{color:var(--cream)}
.tab.is-active{color:var(--gold-hi)}
.tabs__ink{position:absolute;bottom:-1px;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi),var(--gold-lo));
  transition:transform .4s var(--ease),width .4s var(--ease);box-shadow:0 0 14px rgba(201,162,39,.7)}

.panel{animation:panelIn .5s var(--ease)}
.panel[hidden]{display:none}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.menu-cat-head{display:flex;align-items:center;gap:14px;margin:2.4rem 0 1.3rem}
.menu-cat-head.sm{margin:1.8rem 0 1rem}
.menu-cat-head.center-head{flex-direction:column;text-align:center;gap:4px}
.cat-ico{width:26px;height:26px;color:var(--gold);flex:none;filter:drop-shadow(0 0 8px rgba(201,162,39,.35))}
.menu-cat-head h3{font-family:var(--f-display);font-size:clamp(1.4rem,3vw,1.9rem);color:var(--cream);margin:0;font-weight:400}
.menu-cat-head p{margin:0;color:var(--muted);font-style:italic;font-size:.95em}
.menu-cat-head .ea{font-family:var(--f-deco);font-weight:var(--w-deco);font-style:normal;letter-spacing:.1em;color:var(--gold);font-size:.7rem}

/* cocktail cards */
.cocktails{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:16px}
.ck{position:relative;padding:22px 22px 24px;border-radius:12px;overflow:hidden;
  background:linear-gradient(160deg,rgba(25,25,27,.9),rgba(12,12,14,.9));border:1px solid var(--line-soft);
  transition:border-color .3s}
.ck:hover{border-color:var(--line)}
.ck__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ck__top h4{font-family:var(--f-serif);font-weight:600;font-size:1.35rem;color:var(--cream);margin:0;line-height:1.15}
.price{font-family:var(--f-deco);font-weight:var(--w-deco);color:var(--gold-hi);font-size:1.05rem;letter-spacing:.04em;flex:none}
.price::before{content:"$"}
.price--mp::before{content:none}   /* market price, no currency prefix */
.ck__ing{color:var(--gold);font-size:.86rem;letter-spacing:.02em;margin:.5rem 0 .6rem;font-style:italic}
.ck__note{color:var(--cream-2);font-size:.98rem;margin:0;line-height:1.45}

/* wine/beer leaders */
.winelist{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,60px);margin-top:1rem}
.leaders{list-style:none;margin:0;padding:0}
.leaders li{display:flex;align-items:baseline;gap:8px;padding:.5rem 0;border-bottom:1px dotted rgba(201,162,39,.18)}
.leaders .n{color:var(--cream);font-size:1.08rem}
.leaders .n em{color:var(--muted);font-style:italic;font-size:.82em;letter-spacing:.02em}
.leaders .d{flex:1}
.leaders .p{font-family:var(--f-deco);font-weight:var(--w-deco);color:var(--gold-hi);letter-spacing:.06em;font-size:.92rem;white-space:nowrap}

/* shareables / plates */
.shareables{display:grid;gap:8px}
.plates{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.plates li{padding:1rem 0;border-bottom:1px solid var(--line-soft)}
.pl__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pl__top h4{font-family:var(--f-serif);font-weight:600;font-size:1.3rem;color:var(--cream);margin:0}
.plates p{margin:.35rem 0 0;color:var(--cream-2);font-size:1.02rem}
.plates--grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.plates--grid li{padding:20px;border:1px solid var(--line-soft);border-radius:12px;position:overflow;overflow:hidden;
  background:linear-gradient(160deg,rgba(25,25,27,.7),rgba(12,12,14,.7));transition:border-color .3s}
.plates--grid li:hover{border-color:var(--line)}

.sh-group--feature .plates{position:relative}
.pl--photo{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center;border-bottom:1px solid var(--line-soft)}
.pl__img{margin:0;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.pl__img img{width:120px;height:120px;object-fit:cover;transition:transform .6s var(--ease)}
.pl--photo:hover .pl__img img{transform:scale(1.08)}
.pl__tag{display:inline-block;margin-top:.5rem;font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.14em;text-transform:uppercase;
  font-size:.6rem;color:var(--gold);border:1px solid var(--line);border-radius:999px;padding:3px 10px}

/* dinner */
.dinner-hours{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;text-align:center;
  margin-bottom:2rem;padding:14px 20px;border:1px solid var(--line);border-radius:999px;background:rgba(20,20,22,.6);
  font-family:var(--f-serif);color:var(--cream-2);font-size:1rem}
.dinner-hours strong{color:var(--cream)}
.dinner-hours .dot{width:9px;height:9px;border-radius:50%;background:var(--red-hi);box-shadow:0 0 12px var(--red-hi);animation:pulseDot 2.2s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.4}}
.dinner{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,5vw,56px);align-items:start}
.plates--lg .pl__top h4{font-size:1.5rem}
.plates--lg p{font-size:1.08rem}
.dinner__feature{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.dinner__feature img{width:100%;aspect-ratio:3/4;object-fit:cover}
.dinner__feature figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.88));
  font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.16em;text-transform:uppercase;font-size:.66rem;color:var(--cream-2)}

/* ==================================================================   GALLERY
   ========================================================================= */
.gallery__filters{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.chip{padding:8px 18px;border-radius:999px;border:1px solid var(--line);color:var(--cream-2);
  font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.14em;text-transform:uppercase;font-size:.68rem;transition:.3s var(--ease)}
.chip:hover{color:var(--cream);border-color:var(--gold)}
.chip.is-active{background:linear-gradient(135deg,var(--gold-hi),var(--gold-lo));color:#1a1204;border-color:transparent}
.gallery__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;grid-auto-flow:dense}
.gcard{position:relative;margin:0;border-radius:12px;overflow:hidden;cursor:pointer;border:1px solid var(--line-soft);
  aspect-ratio:3/4;transition:transform .5s var(--ease),opacity .4s,border-color .3s;transform-style:preserve-3d}
.gcard--wide{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gcard img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .5s}
.gcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.75));opacity:.5;transition:opacity .4s}
.gcard:hover{border-color:var(--gold);transform:translateY(-4px)}
.gcard:hover img{transform:scale(1.08)}
.gcard:hover::after{opacity:.85}
.gcard figcaption{position:absolute;left:16px;bottom:14px;z-index:2;font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.14em;
  text-transform:uppercase;font-size:.72rem;color:var(--cream);opacity:0;transform:translateY(8px);transition:.4s var(--ease)}
.gcard:hover figcaption,.gcard:focus figcaption{opacity:1;transform:none}
.gcard.hide{display:none}
.gallery__foot{text-align:center;margin-top:22px}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;
  background:rgba(4,4,5,.94);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s}
.lightbox[hidden]{display:none}
.lightbox.show{opacity:1}
.lb__stage{margin:0;max-width:min(92vw,1100px);max-height:86vh;text-align:center;perspective:1400px}
.lb__stage img{max-width:100%;max-height:78vh;border-radius:10px;border:1px solid var(--line);box-shadow:0 30px 80px -20px #000;
  animation:lbIn .5s var(--ease)}
@keyframes lbIn{from{opacity:0;transform:rotateY(14deg) scale(.94)}to{opacity:1;transform:none}}
.lb__stage figcaption{margin-top:16px;font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.14em;text-transform:uppercase;font-size:.76rem;color:var(--cream-2)}
.lb__close{position:absolute;top:18px;right:22px;font-size:1.5rem;color:var(--cream);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);transition:.25s}
.lb__close:hover{background:var(--red);border-color:var(--red);color:#fff}
.lb__nav{position:absolute;top:50%;translate:0 -50%;font-size:2.4rem;color:var(--cream);width:56px;height:56px;border-radius:50%;transition:.25s;opacity:.7}
.lb__nav:hover{color:var(--gold-hi);opacity:1}
.lb__prev{left:14px}.lb__next{right:14px}

/* ==================================================================   EVENTS
   ========================================================================= */
.events{position:relative;max-width:none;margin:0;overflow:hidden;
  background:radial-gradient(80% 120% at 50% 0%,rgba(125,15,19,.35),transparent 60%),linear-gradient(180deg,var(--noir),#0c0608 60%,var(--noir))}
.events__inner{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,60px);align-items:center;padding-block:8px}
.neon{font-family:var(--f-display);font-size:clamp(3rem,10vw,7rem);line-height:.9;margin:.1em 0 .1em;
  color:#fff;text-shadow:0 0 6px #fff,0 0 20px var(--red-hi),0 0 44px var(--red),0 0 80px var(--red);animation:flicker 5s infinite}
@keyframes flicker{0%,19%,21%,23%,80%,100%{opacity:1}20%,22%{opacity:.55}82%{opacity:.7}}
.events__sub{font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.24em;text-transform:uppercase;font-size:1rem;color:var(--gold-hi);margin:0 0 1.2rem}
.events__sub strong{color:#fff}
.eq{display:flex;align-items:flex-end;gap:5px;height:56px;margin:0 0 1.6rem}
.eq i{width:6px;background:linear-gradient(180deg,var(--gold-hi),var(--red));border-radius:3px;height:20%;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(odd){animation-duration:.85s}
.eq i:nth-child(3n){animation-duration:1.3s}
.eq i:nth-child(3n+1){animation-duration:.7s}
.eq i:nth-child(1){animation-delay:-.2s}.eq i:nth-child(2){animation-delay:-.5s}.eq i:nth-child(3){animation-delay:-.1s}
.eq i:nth-child(4){animation-delay:-.7s}.eq i:nth-child(5){animation-delay:-.3s}.eq i:nth-child(6){animation-delay:-.9s}
.eq i:nth-child(7){animation-delay:-.4s}.eq i:nth-child(8){animation-delay:-.6s}.eq i:nth-child(9){animation-delay:-.15s}
.eq i:nth-child(10){animation-delay:-.8s}.eq i:nth-child(11){animation-delay:-.35s}.eq i:nth-child(12){animation-delay:-.55s}
@keyframes eq{0%,100%{height:15%}50%{height:100%}}
.events__body{color:var(--cream-2);font-size:1.12em;max-width:46ch;margin-bottom:1.6rem}
.events__nights{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.events__nights li{display:flex;flex-direction:column;padding:16px 20px;border:1px solid var(--line-soft);border-radius:12px;
  background:rgba(15,15,17,.6);transition:.35s var(--ease)}
.events__nights li:hover{border-color:var(--gold);transform:translateX(6px)}
.events__nights span{font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.16em;text-transform:uppercase;font-size:.62rem;color:var(--gold)}
.events__nights strong{font-family:var(--f-serif);font-weight:600;font-size:1.25rem;color:var(--cream)}

/* ==================================================================   PRIVATE EVENTS
   ========================================================================= */
.packages{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pkg{position:relative;padding:34px 30px;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(165deg,rgba(24,24,26,.92),rgba(11,11,13,.92));border:1px solid var(--line-soft);
  transition:border-color .3s}
.pkg:hover{border-color:var(--line)}
.pkg__num{position:absolute;top:18px;right:24px;font-family:var(--f-display);font-size:2.6rem;color:rgba(201,162,39,.16);line-height:1}
.pkg h3{font-family:var(--f-display);font-weight:400;font-size:1.4rem;color:var(--cream);margin:0 0 .5rem;max-width:82%}
.pkg__for{font-family:var(--f-serif);font-style:italic;color:var(--gold);font-size:.98rem;margin:0 0 1rem}
.pkg ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pkg li{position:relative;padding-left:22px;color:var(--cream-2)}
.pkg li::before{content:"❧";position:absolute;left:0;color:var(--gold);font-size:.8em;top:2px}
.pkg__more{margin-top:1.2rem;font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.16em;text-transform:uppercase;font-size:.68rem;color:var(--gold-hi);
  display:inline-flex;align-items:center;gap:6px}
.pkg__more::after{content:"+";font-size:1rem}
.pkg__more[aria-expanded="true"]::after{content:"\2212"}   /* true minus, not a dash */
.pkg__extra{max-height:0;overflow:hidden;transition:max-height .45s var(--ease),margin .45s var(--ease),opacity .4s}
.pkg__extra p{margin:0;color:var(--cream-2);font-style:italic}
.pkg__extra.open{max-height:200px;margin-top:14px}
.private__cta{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:38px}

/* ==================================================================   VISIT / CONTACT
   ========================================================================= */
.visit__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px)}
.status{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);
  margin:.4rem 0 1.4rem;font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.12em;text-transform:uppercase;font-size:.72rem}
.status__dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.status.open .status__dot{background:#3fbf6a;box-shadow:0 0 12px #3fbf6a;animation:pulseDot 2s infinite}
.status.open .status__text{color:#8ff0ae}
.status.closed .status__dot{background:var(--red-hi);box-shadow:0 0 12px var(--red)}
.status.closed .status__text{color:#ff9a95}
.visit__addr{font-style:normal;font-family:var(--f-serif);font-size:1.4rem;color:var(--cream);line-height:1.4;margin-bottom:1.2rem}
.visit__addr a{border-bottom:1px solid transparent;transition:border-color .3s}
.visit__addr a:hover{border-color:var(--line)}
.visit__reserve{color:var(--cream-2);margin-bottom:1.6rem}
.tel-lg{display:inline-block;font-family:var(--f-display);font-size:1.5rem;color:var(--gold-hi);letter-spacing:.02em;margin-top:4px}
.hours{width:100%;border-collapse:collapse;max-width:420px}
.hours td{padding:.5rem 0;border-bottom:1px dotted rgba(201,162,39,.18);font-size:1.02rem}
.hours td:first-child{color:var(--cream-2)}
.hours td:last-child{text-align:right;color:var(--cream);font-variant-numeric:tabular-nums}
.hours tr.today td{color:var(--gold-hi)}
.hours tr.today td:first-child::after{content:" · today";font-family:var(--f-deco);font-weight:var(--w-deco);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.hours tr.closed td:last-child{color:var(--muted);font-style:italic}

/* forms */
.visit__forms{display:grid;gap:26px;align-content:start}
.form{padding:28px;border-radius:var(--radius);border:1px solid var(--line-soft);background:linear-gradient(165deg,rgba(22,22,24,.8),rgba(11,11,13,.8))}
.form__hint{color:var(--muted);font-size:.95rem;margin:0 0 1.2rem}
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.14em;text-transform:uppercase;font-size:.66rem;color:var(--gold);margin-bottom:6px}
.field input,.field textarea{width:100%;padding:12px 14px;border-radius:8px;background:rgba(6,6,7,.7);border:1px solid var(--line-soft);
  color:var(--cream);font-family:var(--f-serif);font-size:1.05rem;transition:border-color .25s,box-shadow .25s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.15)}
.field textarea{resize:vertical}
.field--inline{display:flex;gap:10px}
.field--inline input{flex:1}
.form .btn{margin-top:6px}
.form__note{margin:12px 0 0;font-size:.92rem;min-height:1.2em;color:var(--gold-hi)}
.form__note.err{color:#ff9a95}
.field.invalid input,.field.invalid textarea{border-color:var(--red);box-shadow:0 0 0 3px rgba(224,20,20,.14)}

.visit__store{margin:clamp(40px,6vw,72px) 0 0;position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.visit__store img{width:100%;max-height:520px;object-fit:cover;object-position:center 30%}
.visit__store figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 22px 18px;font-family:var(--f-deco);font-weight:var(--w-deco);
  letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;color:var(--cream);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.82))}

/* ==================================================================   FOOTER
   ========================================================================= */
.footer{border-top:1px solid var(--line);background:var(--ink);padding:clamp(48px,7vw,80px) var(--gutter) 30px;margin-top:40px}
.footer__inner{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;align-items:start}
.footer__brand img{width:72px;cursor:pointer;transition:transform .5s var(--ease)}
.footer__brand img:hover{transform:rotate(360deg)}
.footer__name{font-family:var(--f-display);font-size:1.3rem;margin:12px 0 4px;color:var(--cream)}
.footer__name span{display:block;font-family:var(--f-deco);font-weight:var(--w-deco);font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.footer__tag{font-family:var(--f-serif);font-style:italic;font-size:1.12rem;color:var(--gold-hi);margin:0;letter-spacing:.01em}
.footer__links{display:flex;flex-direction:column;gap:10px}
.footer__links a{font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.12em;text-transform:uppercase;font-size:.74rem;color:var(--cream-2);transition:color .25s}
.footer__links a:hover{color:var(--gold-hi)}
.footer__meta{color:var(--cream-2);font-size:.95rem;display:grid;gap:6px}
.footer__meta a{color:var(--gold-hi)}
.footer__social a{color:var(--cream-2)}
.footer__fine{max-width:var(--maxw);margin:40px auto 0;padding-top:20px;border-top:1px solid var(--line-soft);
  color:var(--muted);font-size:.82rem;text-align:center;letter-spacing:.02em}

/* ==================================================================   TILT / GLARE · REVEAL · TOAST
   ========================================================================= */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;transition:transform .4s var(--ease);will-change:transform}
.tilt.tilting{transition:transform .08s linear}
.tilt__glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 60%);mix-blend-mode:screen}
.tilt:hover .tilt__glare{opacity:1}

[data-reveal]{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].is-visible{opacity:1;transform:none}
[data-reveal] .kicker,[data-reveal] .h-display,[data-reveal] .lead,[data-reveal] .btn{transition-delay:.05s}

/* staggered children */
.cocktails .ck,.packages .pkg,.events__nights li,.plates--grid li,.gallery__grid .gcard{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.is-visible .ck,.is-visible .pkg,.is-visible .events__nights li,.is-visible .plates--grid li,.is-visible .gcard{opacity:1;transform:none}
.is-visible .ck:nth-child(2),.is-visible .pkg:nth-child(2){transition-delay:.06s}
.is-visible .ck:nth-child(3){transition-delay:.12s}.is-visible .ck:nth-child(4){transition-delay:.18s}
.is-visible .ck:nth-child(5){transition-delay:.24s}.is-visible .ck:nth-child(6){transition-delay:.3s}

.toast{position:fixed;left:50%;bottom:30px;translate:-50% 0;z-index:1200;padding:14px 26px;border-radius:999px;
  background:linear-gradient(135deg,var(--gold-hi),var(--gold-lo));color:#1a1204;font-family:var(--f-deco);font-weight:var(--w-deco);
  letter-spacing:.1em;text-transform:uppercase;font-size:.76rem;box-shadow:0 16px 40px -12px rgba(0,0,0,.7);
  opacity:0;transform:translate(-50%,20px);transition:.4s var(--ease)}
.toast[hidden]{display:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ==================================================================   RESPONSIVE
   ========================================================================= */
@media (max-width:960px){
  .nav__links,.nav__call{display:none}
  .nav__toggle{display:flex}
  .about__grid,.dinner,.events__inner,.visit__grid,.packages,.winelist{grid-template-columns:1fr}
  .about__media{order:-1}
  .gallery__grid{grid-template-columns:repeat(2,1fr)}
  .gcard--wide{grid-column:span 2;grid-row:auto;aspect-ratio:16/10}
  .footer__inner{grid-template-columns:1fr;gap:26px;text-align:center;justify-items:center}
  .footer__links{align-items:center}
  .dinner__feature{max-width:420px;margin-inline:auto}
}
@media (max-width:560px){
  .cocktails,.plates--grid{grid-template-columns:1fr}
  .pl--photo{grid-template-columns:88px 1fr;gap:14px}
  .pl__img img{width:88px;height:88px}
  .about__stats{gap:18px}
  .hero__content{padding-top:120px}
  .intro__skip{right:14px}
  .lb__nav{width:44px;height:44px;font-size:1.8rem}
}

/* ==================================================================   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hero__bg{animation:none;transform:scale(1.05)}
  [data-reveal]{opacity:1;transform:none}
  .cocktails .ck,.packages .pkg,.events__nights li,.plates--grid li,.gallery__grid .gcard{opacity:1;transform:none}
  .tilt{transform:none!important}
  #fx{display:none}
  .intro .door{transition:opacity .4s ease}
}

/* ==================================================================   v2: typography polish, multi-page chrome, stamps, swipe deck, tour
   ========================================================================= */
.hero__title-1{font-family:var(--f-display);font-weight:800;letter-spacing:.05em}
.h-display{letter-spacing:.015em;text-wrap:balance}
.brand-deco{font-family:var(--f-display-deco)}

/* --- nav dropdown (Menu ▾) --- */
.nav__links .has-sub{position:relative}
.nav__links .has-sub>a::before{content:"▾";font-size:.7em;margin-left:.35em;opacity:.7}
.nav__sub{position:absolute;top:100%;left:50%;translate:-50% 10px;min-width:190px;
  background:rgba(9,9,11,.97);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:12px;
  padding:8px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transition:opacity .25s,translate .25s,visibility .25s}
.nav__links .has-sub:hover .nav__sub,.nav__links .has-sub:focus-within .nav__sub{opacity:1;visibility:visible;translate:-50% 6px}
.nav__sub a{padding:10px 14px;border-radius:8px;font-size:.72rem;white-space:nowrap}
.nav__sub a::after{display:none}
.nav__sub a:hover{background:rgba(201,162,39,.12);color:var(--gold-hi)}

/* --- page hero (interior pages) --- */
.page-hero{position:relative;min-height:56vh;display:grid;place-items:center;text-align:center;
  overflow:hidden;padding:150px var(--gutter) 70px;isolation:isolate}
.page-hero__bg{position:absolute;inset:-4%;z-index:-2;background-size:cover;background-position:center;
  animation:kenburns 28s ease-in-out infinite alternate}
.page-hero__scrim{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(80% 70% at 50% 40%,rgba(6,6,7,.45),rgba(6,6,7,.82) 92%),
             linear-gradient(180deg,rgba(6,6,7,.78),rgba(6,6,7,.5) 45%,var(--noir))}
.page-hero.plain{min-height:auto;padding:150px var(--gutter) 20px}
.page-hero.plain .page-hero__scrim{background:none}
.page-hero__ico{width:40px;height:40px;color:var(--gold);margin:0 auto 14px;filter:drop-shadow(0 0 10px rgba(201,162,39,.4))}
.page-hero h1{font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,7vw,5rem);
  color:var(--cream);margin:.1em 0 .3em;letter-spacing:.03em;line-height:1}
.page-hero p.lead{max-width:640px;margin-inline:auto;color:var(--cream-2)}

/* --- home: stamps --- */
.stamps{padding-top:0}
.stamps__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.6vw,22px)}
.stamp{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:10px 4px;border-radius:14px;transition:background .3s}
.stamp:hover{background:rgba(255,255,255,.02)}
.stamp img{width:clamp(76px,10.5vw,128px);aspect-ratio:1;object-fit:contain;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.65));transition:transform .45s var(--ease)}
.stamp:hover img{transform:translateY(-8px) rotate(-5deg) scale(1.07)}
.stamp span{font-family:var(--f-display);font-weight:600;font-size:.82rem;letter-spacing:.08em;color:var(--cream-2);transition:color .3s}
.stamp:hover span{color:var(--gold-hi)}

/* --- home: signature strip --- */
.signature{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sig{position:relative;display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;box-shadow:var(--shadow)}
.sig img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.sig:hover img{transform:scale(1.07)}
.sig__cap{position:absolute;inset:auto 0 0 0;padding:44px 18px 16px;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.85))}
.sig__cap small{font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.16em;text-transform:uppercase;font-size:.6rem;color:var(--gold)}
.sig__cap b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.15rem;color:var(--cream);margin-top:4px}

/* --- events: swipe deck --- */
/* (swipe deck removed, replaced by the What's On board, see v10) */

/* --- tour embed --- */
.tour-embed{position:relative;width:100%;height:min(80vh,780px);border-radius:16px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);background:#0b0806;isolation:isolate}
.tour-embed iframe{width:100%;height:100%;border:0;display:block}
.tour-embed__badge{position:absolute;top:14px;left:14px;z-index:3;pointer-events:none;
  font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.16em;text-transform:uppercase;font-size:.6rem;color:var(--cream-2);
  background:rgba(0,0,0,.5);border:1px solid var(--line-soft);border-radius:999px;padding:6px 12px}
.tour-cta{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:30px}
.tour-note{text-align:center;color:var(--muted);font-size:.9rem;margin-top:14px}

/* --- home tour teaser --- */
.teaser{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  min-height:340px;display:grid;place-items:center;text-align:center;padding:60px 24px;box-shadow:var(--shadow)}
.teaser__bg{position:absolute;inset:0;z-index:-2;background:url("../assets/img/interior.jpg") center/cover;filter:brightness(.5) saturate(1.1)}
.teaser__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,transparent,rgba(0,0,0,.7))}
.teaser h2{font-family:var(--f-display);font-weight:800;font-size:clamp(1.8rem,4vw,3rem);color:var(--cream);margin:0 0 .4rem}
.teaser p{color:var(--cream-2);max-width:520px;margin:0 auto 1.4rem}

@media (max-width:860px){
  .stamps__grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .signature{grid-template-columns:1fr}
  .sig{aspect-ratio:16/10}
}
@media (max-width:520px){
  .stamps__grid{grid-template-columns:repeat(2,1fr)}
  .ecard__title{font-size:1.45rem}
}
@media (prefers-reduced-motion:reduce){
  .page-hero__bg{animation:none;transform:scale(1.05)}
  .ecard{transition:opacity .2s}
  .stamp img,.sig img{transition:none}
}

/* ==================================================================   v3 polish, page transition, mobile reserve bar, tour fullscreen
   ========================================================================= */
main#main{animation:pageIn .55s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.mobile-reserve{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;align-items:center;justify-content:center;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(10,10,11,.35),rgba(10,10,11,.97));backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.mobile-reserve a{display:inline-flex;align-items:center;gap:9px;padding:12px 24px;border-radius:999px;
  background:linear-gradient(135deg,var(--red-hi),var(--red-deep));color:#fff;
  font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.14em;text-transform:uppercase;font-size:.76rem;
  box-shadow:0 8px 24px -10px rgba(224,20,20,.75)}
.mobile-reserve svg{width:15px;height:15px}
@media (max-width:960px){.mobile-reserve{display:flex}body{padding-bottom:66px}}
body.menu-open .mobile-reserve{display:none}

.tour-fs{position:absolute;top:14px;right:14px;z-index:4;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  background:rgba(0,0,0,.5);border:1px solid var(--line-soft);color:var(--cream);font-size:1.05rem;cursor:pointer;transition:.25s var(--ease)}
.tour-fs:hover{border-color:var(--gold);color:var(--gold-hi);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){main#main{animation:none}}

/* ==================================================================   v4: refined typography, empty gallery, card craft
   ========================================================================= */

/* --- empty gallery state --- */
.gallery__grid:empty{display:none}
.gallery__grid:not(:empty)+.gallery__empty{display:none}
.gallery__empty{max-width:620px;margin:0 auto;padding:clamp(40px,6vw,64px) 32px;text-align:center;
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(165deg,rgba(22,22,24,.7),rgba(11,11,13,.7))}
.gallery__empty svg{width:42px;height:42px;color:var(--gold);opacity:.75;margin-bottom:16px}
.gallery__empty-title{font-family:var(--f-display);font-weight:600;font-size:1.4rem;color:var(--cream);margin:0 0 .5rem;letter-spacing:.03em}
.gallery__empty-sub{color:var(--muted);max-width:44ch;margin:0 auto 1.8rem;line-height:1.6}
.gallery__empty-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* --- typographic refinement (no script faces) --- */
.hero__title{gap:0}
.hero__title-1{font-weight:700;letter-spacing:.055em;text-indent:.055em}
/* deepen the scrim behind the hero copy so type always reads cleanly */
.hero__scrim{background:
  radial-gradient(50% 40% at 50% 60%,rgba(6,6,7,.55),transparent 72%),
  radial-gradient(75% 65% at 50% 42%,rgba(10,10,11,.12),rgba(6,6,7,.72) 92%),
  linear-gradient(180deg,rgba(6,6,7,.6) 0%,rgba(6,6,7,.18) 32%,rgba(6,6,7,.5) 72%,var(--noir) 100%)}
.hero__title-1{text-shadow:0 4px 40px rgba(0,0,0,.75)}
.hero__tag{text-shadow:0 2px 16px rgba(0,0,0,.9)}
.hero__tag{font-family:var(--f-serif);font-style:italic;font-weight:400;
  font-size:clamp(1.05rem,1.9vw,1.3rem);letter-spacing:.02em;color:var(--cream-2);
  -webkit-text-fill-color:currentColor;background:none;animation:none;margin:26px 0 32px}
.kicker{font-size:.66rem;letter-spacing:.38em}
.h-sub{letter-spacing:.2em;font-size:.98rem}
.section__intro{font-size:1.12em;line-height:1.6;color:var(--muted);max-width:60ch;margin-inline:auto}
.lead{font-size:1.2em;line-height:1.6}
.page-hero h1{font-weight:700;letter-spacing:.045em;text-indent:.045em}
.menu-cat-head h3{letter-spacing:.045em;font-weight:600}
.pkg h3,.teaser h2{letter-spacing:.035em}

/* --- card craft: equal heights, quieter borders, cleaner hover --- */
.cocktails{grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px}
.ck{padding:24px;border-radius:14px;display:flex;flex-direction:column;
  border-color:rgba(244,236,216,.07);background:linear-gradient(165deg,rgba(24,24,26,.85),rgba(13,13,15,.85))}
.ck:hover{border-color:rgba(201,162,39,.35);transform:translateY(-2px)}
.ck__top h4{font-size:1.28rem;letter-spacing:.01em}
.ck__ing{font-size:.84rem;line-height:1.45}
.ck__note{font-size:.95rem;color:var(--muted)}
.plates--grid li{padding:24px;border-radius:14px}
.pkg{padding:36px 32px;border-radius:16px}
.price{font-family:var(--f-display);font-weight:600;font-size:.98rem;letter-spacing:.02em}

/* --- section rhythm --- */
.section__head.center{margin-bottom:clamp(30px,4.5vw,52px)}
.deco-divider{margin-top:2.6rem}

@media (max-width:560px){
  .hero__title-2{letter-spacing:.4em;text-indent:.4em}
  .gallery__empty{padding:36px 22px}
}

/* ==================================================================   v5: legibility, editorial craft, restraint
   Sparkles removed. Atmosphere now comes from type, rules and negative space.
   ========================================================================= */

/* ---- 1. LEGIBILITY: nav, buttons, labels ---- */
.nav{padding:18px 0}
.nav.scrolled{background:rgba(7,7,8,.92);backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:0 1px 0 rgba(201,162,39,.16),0 18px 50px -34px #000;padding:11px 0}
.nav__links{gap:30px}
.nav__links a{color:rgba(244,236,216,.82);font-size:.74rem;letter-spacing:.15em;font-weight:400;
  transition:color .28s var(--ease)}
.nav__links a:hover{color:#fff}
.nav__links a.active{color:var(--gold-hi)}
.nav__links a::after{height:1.5px;background:var(--gold-hi);box-shadow:0 0 10px rgba(233,205,126,.5)}
.nav__name{font-family:var(--f-display);font-weight:600;letter-spacing:.04em}
.nav__name small{color:rgba(201,162,39,.9);letter-spacing:.3em}
.nav__call{background:linear-gradient(135deg,#f02a22,#a5121a);font-weight:400;letter-spacing:.1em;
  padding:10px 17px;box-shadow:0 10px 26px -12px rgba(224,20,20,.85)}
.nav__call:hover{filter:brightness(1.08)}

/* buttons: readable at a glance, quiet until touched */
.btn{font-size:.74rem;letter-spacing:.2em}
.btn--gold{background:linear-gradient(135deg,#f0dca0,#c9a227 52%,#9c7c22);color:#150e02;font-weight:400;
  box-shadow:0 12px 34px -14px rgba(201,162,39,.8),inset 0 1px 0 rgba(255,255,255,.55)}
.btn--ghost{border:1px solid rgba(244,236,216,.42);color:#f4ecd8;background:rgba(10,10,11,.35)}
.btn--ghost:hover{border-color:var(--gold-hi);color:var(--gold-hi);background:rgba(201,162,39,.09)}
.kicker{color:var(--gold-hi)}
.note{color:rgba(244,236,216,.5)}
.section__intro{color:rgba(244,236,216,.72)}
.mchip{color:rgba(244,236,216,.8);border-color:rgba(244,236,216,.2)}
.hero__scroll{color:rgba(244,236,216,.55)}

/* ---- 2. EDITORIAL: rules, section heads, deco marks ---- */
.section__head.center .kicker{display:inline-flex;align-items:center;gap:16px}
.section__head.center .kicker::before,
.section__head.center .kicker::after{content:"";width:clamp(24px,5vw,58px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.85))}
.section__head.center .kicker::after{background:linear-gradient(90deg,rgba(201,162,39,.85),transparent)}
.h-display{font-weight:700;letter-spacing:.03em}

/* the ❧ glyph rendered poorly, a drawn deco rule instead */
.deco-divider i{font-size:0;width:9px;height:9px;transform:rotate(45deg);
  border:1px solid var(--gold);background:rgba(201,162,39,.25)}
.deco-divider span{background:linear-gradient(90deg,transparent,rgba(201,162,39,.75),transparent)}

/* hairline frame inside the hero, quiet art-deco architecture */
.hero__content{position:relative}
.hero__content::before{content:"";position:absolute;inset:-6% -4%;pointer-events:none;
  border:1px solid rgba(201,162,39,.13);border-radius:2px}

/* ---- 3. MENU TYPOGRAPHY: dotted leaders, tabular figures ---- */
.price,.leaders .p,.hours td:last-child{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* classic menu leader: name · · · · · price, sitting on the baseline */
.plates li .pl__top{display:flex;align-items:flex-end;gap:10px}
.plates li .pl__top h4{order:0;flex:0 1 auto}
.plates li .pl__top::after{content:"";order:1;flex:1 1 auto;min-width:24px;height:0;
  border-bottom:1px dotted rgba(201,162,39,.32);margin-bottom:.42em}
.plates li .pl__top .price{order:2;flex:0 0 auto}
.plates--grid li .pl__top{align-items:baseline}
.plates--grid li .pl__top::after{display:none}
.leaders li{padding:.62rem 0;align-items:flex-end}
.leaders .n{flex:0 1 auto}
.leaders .d{flex:1 1 auto;min-width:24px;height:0;border-bottom:1px dotted rgba(201,162,39,.3);margin-bottom:.4em}
.leaders .p{flex:0 0 auto}

/* ---- 4. SURFACES: calmer cards, precise borders ---- */
.ck,.plates--grid li,.pkg,.form,.events__nights li{
  background:linear-gradient(168deg,rgba(23,23,25,.72),rgba(12,12,14,.72));
  border-color:rgba(244,236,216,.075)}
.ck:hover,.plates--grid li:hover,.pkg:hover{border-color:rgba(201,162,39,.32)}
.pkg__num{font-family:var(--f-display);color:rgba(201,162,39,.14)}
.about__media,.dinner__feature,.visit__store,.tour__frame,.tour-embed{border-color:rgba(201,162,39,.24)}

/* ---- 5. DETAILS ---- */
html{scrollbar-color:var(--gold-lo) #0a0a0b;scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#0a0a0b}
::-webkit-scrollbar-thumb{background:#3a3020;border:3px solid #0a0a0b;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--gold-lo)}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.grain{opacity:.03}

/* ---- 6. MOTION: a single, purposeful reveal ---- */
[data-reveal]{transform:translateY(26px)}
[data-reveal].is-visible{transform:none}

@media (max-width:960px){
  .hero__content::before{inset:-3% 0}
}

/* ==================================================================   v6: the doorman, tour setups, booking
   ========================================================================= */

/* --- the man in the yellow suit --- */
.host__grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(28px,5vw,64px);align-items:center}
.host__media{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(201,162,39,.26);box-shadow:var(--shadow)}
.host__media img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 34%;
  transition:transform .8s var(--ease)}
.host__media:hover img{transform:scale(1.04)}
.host__media figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 15px;
  font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.16em;text-transform:uppercase;font-size:.64rem;color:var(--cream-2);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.86))}
.host__copy .lead{margin-bottom:1rem}
.host__actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:1.8rem}

/* --- tour setup switcher --- */
.tour-setups{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.setup{display:flex;flex-direction:column;gap:5px;padding:16px 18px;text-align:left;border-radius:12px;
  border:1px solid rgba(244,236,216,.09);background:linear-gradient(168deg,rgba(23,23,25,.72),rgba(12,12,14,.72));
  transition:.3s var(--ease);cursor:pointer}
.setup:hover{border-color:rgba(201,162,39,.45);transform:translateY(-2px)}
.setup.is-active{border-color:var(--gold);background:linear-gradient(168deg,rgba(201,162,39,.14),rgba(12,12,14,.8))}
.setup__n{font-family:var(--f-display);font-weight:600;font-size:.88rem;color:var(--cream);letter-spacing:.03em}
.setup.is-active .setup__n{color:var(--gold-hi)}
.setup__d{font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.12em;text-transform:uppercase;font-size:.58rem;color:var(--muted)}
.setup--fs{justify-content:center}

/* --- booking --- */
.booking__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:start}
.booking__points{list-style:none;margin:1.6rem 0;padding:0;display:grid;gap:10px}
.booking__points li{position:relative;padding-left:24px;color:var(--cream-2)}
.booking__points li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;
  transform:rotate(45deg);border:1px solid var(--gold);background:rgba(201,162,39,.25)}
.booking__call{color:var(--muted);margin-top:1.4rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field select{width:100%;padding:12px 14px;border-radius:8px;background:rgba(6,6,7,.7);
  border:1px solid var(--line-soft);color:var(--cream);font-family:var(--f-serif);font-size:1.02rem}
.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.15)}
.field input[type="date"]{color-scheme:dark}

@media (max-width:960px){
  .host__grid,.booking__grid{grid-template-columns:1fr}
  .host__media{max-width:440px;margin-inline:auto}
  .tour-setups{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .tour-setups{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
}

/* ==================================================================   v6b: real venue footage as background
   ========================================================================= */
.hero__video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);filter:saturate(1.05) contrast(1.04)}
.page-hero.has-video{min-height:62vh;padding-top:170px}
.page-hero__video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.02) contrast(1.03)}
.page-hero.has-video .page-hero__scrim{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 68% at 50% 46%,rgba(6,6,7,.5),rgba(6,6,7,.9) 92%),
             linear-gradient(180deg,rgba(6,6,7,.86) 0%,rgba(6,6,7,.5) 40%,var(--noir) 100%)}
@media (prefers-reduced-motion:reduce){
  .page-hero__video{display:none}
}

/* --- BUTTONS: legible, not yellow. Vermilion primary, cream outline secondary --- */
.btn--gold,.btn--gold-sm{
  background:linear-gradient(135deg,#e8241c,#a5121a);color:#fff;font-weight:400;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 30px -14px rgba(224,20,20,.9),inset 0 1px 0 rgba(255,255,255,.18);
  text-shadow:0 1px 2px rgba(0,0,0,.35)}
.btn--gold:hover,.btn--gold-sm:hover{filter:brightness(1.09);transform:translateY(-3px)}
.btn--ghost{border:1px solid rgba(244,236,216,.6);color:#fff;background:rgba(10,10,11,.5);backdrop-filter:blur(6px)}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.intro__enter{color:#fff;border-color:rgba(244,236,216,.7)}
.intro__enter::before{background:linear-gradient(135deg,#e8241c,#a5121a)}
.intro__enter:hover{color:#fff}

/* --- about without the photo --- */
.about__grid--solo{grid-template-columns:1fr;max-width:760px;margin-inline:auto;text-align:center}
.about__grid--solo .about__stats{justify-content:center}
.about__grid--solo .about__actions{justify-content:center}

/* --- upstairs --- */
.upstairs__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,60px);align-items:center}
.upstairs__media{margin:0}

/* --- good to know --- */
.know{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.know__item{padding:26px 24px;border-radius:14px;border:1px solid rgba(244,236,216,.075);
  background:linear-gradient(168deg,rgba(23,23,25,.72),rgba(12,12,14,.72))}
.know__item h3{font-family:var(--f-display);font-weight:600;font-size:1.02rem;color:var(--gold-hi);
  margin:0 0 .5rem;letter-spacing:.04em}
.know__item p{margin:0;color:var(--cream-2);font-size:1rem;line-height:1.55}
@media (max-width:960px){.know{grid-template-columns:1fr 1fr}.upstairs__grid{grid-template-columns:1fr}
  .upstairs__media{max-width:430px;margin-inline:auto}}
@media (max-width:560px){.know{grid-template-columns:1fr}}

/* --- playable reels (portrait promo / live set) --- */
.dinner--nofeature{grid-template-columns:1fr}
.reel__frame{max-width:min(92vw,430px);margin:0 auto;border-radius:16px;overflow:hidden;
  border:1px solid rgba(201,162,39,.26);box-shadow:var(--shadow);background:#0a0a0b;line-height:0}
.reel__video{width:100%;height:auto;display:block;background:#0a0a0b}

/* ==================================================================   v7: merged about+stamps, gallery tabs
   ========================================================================= */
.about.stamps .about__grid--solo{max-width:1000px}
.about.stamps .stamps__grid{margin-top:clamp(34px,5vw,56px)}
.about.stamps .about__stats{margin-bottom:0}
.gallery__grid{grid-auto-rows:1fr}
.gcard[data-cat]{aspect-ratio:3/4}
.gcard--wide{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
@media (max-width:960px){.gcard--wide{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}}

/* ---- gallery: two photos, no filters ---- */
.gallery__grid--duo{grid-template-columns:repeat(2,1fr);max-width:900px;margin-inline:auto;gap:18px}
.gallery__grid--duo .gcard{aspect-ratio:3/4}
@media (max-width:640px){.gallery__grid--duo{grid-template-columns:1fr}}

/* ---- reviews ---- */
.reviews__summary{display:flex;align-items:center;justify-content:center;gap:clamp(22px,4vw,56px);flex-wrap:wrap;
  padding:30px 28px;border:1px solid var(--line);border-radius:var(--radius);max-width:820px;margin:0 auto 34px;
  background:linear-gradient(168deg,rgba(23,23,25,.72),rgba(12,12,14,.72))}
.reviews__score{display:flex;flex-direction:column;align-items:center;gap:4px}
.reviews__score strong{font-family:var(--f-display);font-weight:700;font-size:3rem;color:var(--cream);line-height:1}
.reviews__score .stars{color:var(--gold-hi);letter-spacing:.16em;font-size:1.05rem}
.reviews__score small{font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.2em;text-transform:uppercase;font-size:.6rem;color:var(--muted)}
.reviews__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.quote{margin:0;padding:26px 24px;border-radius:14px;border:1px solid rgba(244,236,216,.075);
  background:linear-gradient(168deg,rgba(23,23,25,.72),rgba(12,12,14,.72))}
.quote p{margin:0 0 .9rem;color:var(--cream);font-size:1.06rem;font-style:italic;line-height:1.55}
.quote cite{font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.14em;text-transform:uppercase;font-size:.62rem;color:var(--gold-hi);font-style:normal}
@media (max-width:860px){.quotes{grid-template-columns:1fr}}

/* ---- instagram ---- */
.insta__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.insta__tile{position:relative;display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;
  border:1px solid rgba(244,236,216,.08);transition:.35s var(--ease)}
.insta__tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .35s}
.insta__tile:hover{border-color:var(--gold);transform:translateY(-3px)}
.insta__tile:hover img{transform:scale(1.09);filter:brightness(1.08)}
.insta__ico{position:absolute;top:8px;right:10px;color:#fff;opacity:0;transition:opacity .3s;font-size:.9rem;
  text-shadow:0 2px 8px rgba(0,0,0,.8)}
.insta__tile:hover .insta__ico{opacity:1}
@media (max-width:860px){.insta__grid{grid-template-columns:repeat(3,1fr)}}

/* ---- OpenTable button + 4-up gallery ---- */
.nav__book{display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;
  border:1px solid var(--gold);color:var(--gold-hi);font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.16em;
  text-transform:uppercase;font-size:.7rem;transition:.28s var(--ease);white-space:nowrap}
.nav__book:hover{background:var(--gold);color:#150e02}
.mr__book{background:linear-gradient(135deg,#f0dca0,#c9a227)!important;color:#150e02!important;margin-right:10px}
.gallery__grid--quad{grid-template-columns:repeat(4,1fr);max-width:1100px;margin-inline:auto;gap:14px}
.gallery__grid--quad .gcard{aspect-ratio:3/4}
@media (max-width:960px){.gallery__grid--quad{grid-template-columns:repeat(2,1fr)}.nav__book{display:none}}

/* ---- combined @speakeasy_ottawa grid ---- */
.insta__grid--wide{grid-template-columns:repeat(3,1fr);max-width:1000px;margin-inline:auto;gap:12px}
@media (max-width:860px){.insta__grid--wide{grid-template-columns:repeat(2,1fr)}}

/* ---- no yellow buttons anywhere: vermilion primary everywhere ---- */
.mr__book{background:linear-gradient(135deg,#e8241c,#a5121a)!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.16)}
.nav__book{border-color:rgba(244,236,216,.5);color:#fff}
.nav__book:hover{background:#e8241c;border-color:#e8241c;color:#fff}
.intro__enter::before{background:linear-gradient(135deg,#e8241c,#a5121a)}

/* ==================================================================   v8: typographic scale: smaller, calmer, less shouty
   ========================================================================= */

/* hero wordmark: title case, noticeably smaller, tighter tracking */
.hero__title-1{
  font-size:clamp(2.5rem,7.2vw,5rem);
  font-weight:600;
  letter-spacing:.045em;
  text-indent:.045em;
  text-transform:none;
  text-shadow:0 4px 34px rgba(0,0,0,.7);
}
.hero__title-2{
  font-size:clamp(.7rem,1.35vw,.92rem);
  letter-spacing:.52em;
  text-indent:.52em;
  margin-top:16px;
}
.hero__tag{font-size:clamp(1rem,1.5vw,1.16rem);margin:20px 0 28px}

/* section headings: dialled back on desktop */
.h-display{
  font-size:clamp(1.75rem,3.6vw,2.9rem);
  font-weight:600;
  letter-spacing:.022em;
  line-height:1.12;
}
.h-display em{font-size:.95em}

/* interior page titles */
.page-hero h1{
  font-size:clamp(1.9rem,4.4vw,3.2rem);
  font-weight:600;
  letter-spacing:.03em;
  text-indent:.03em;
}
.page-hero .lead{font-size:1.08em;max-width:56ch}
.page-hero.has-video{min-height:52vh;padding-top:150px}
.page-hero.plain{padding-top:150px}

/* supporting type */
.lead{font-size:1.12em}
.section__intro{font-size:1.04em}
.kicker{font-size:.62rem}
.menu-cat-head h3{font-size:clamp(1.2rem,2.2vw,1.5rem)}
.ck__top h4,.pl__top h4{font-size:1.18rem}
.plates--lg .pl__top h4{font-size:1.28rem}
.pkg h3{font-size:1.2rem}
.about__stats strong{font-size:1.28rem}
.reviews__score strong{font-size:2.4rem}
.ecard__title{font-size:clamp(1.15rem,3.6vw,1.4rem)}
.teaser h2,.gallery__empty-title{font-size:clamp(1.4rem,2.8vw,2rem)}
.footer__name{font-size:1.12rem}
.nav__name{font-size:1.02rem}

@media (max-width:560px){
  .hero__title-2{letter-spacing:.34em;text-indent:.34em}
}

/* v8b: hero breathing room; drop the boxy hairline frame */
.hero__content::before{display:none}
.hero__content{padding-top:104px}

/* v8c: mobile bar: one black, one red (not two reds) */
.mobile-reserve{gap:10px}
.mr__book{
  background:#0c0c0e!important;color:#fff!important;
  border:1px solid rgba(232,36,28,.85)!important;
  box-shadow:0 8px 22px -12px rgba(0,0,0,.9)!important;
  margin-right:0}
.mr__book:active{background:#141416!important}
/* v8d: mobile bar: no wrapping */
.mobile-reserve a{white-space:nowrap;font-size:.7rem;letter-spacing:.1em;padding:12px 16px;flex:0 1 auto}
.mr__book{padding:12px 18px!important}
.mobile-reserve svg{flex:none}
@media (max-width:380px){.mobile-reserve a{font-size:.64rem;padding:11px 12px;letter-spacing:.06em}}


/* v9b: optical centring: letter-spacing adds a trailing space, so centred
   lines sit left of true centre. Compensate by half the tracking. */
.hero__title-1{text-indent:.022em}
.hero__title-2{text-indent:.26em}
.page-hero h1{text-indent:.015em}

/* v9c: sound toggle on the featured video */

/* ==================================================================   v10: "What's On" board (replaces the swipe deck)
   ========================================================================= */
.whatson__filters{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:34px}

/* next up */
.feature{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(22px,3.5vw,44px);align-items:center;
  padding:clamp(20px,2.6vw,30px);border-radius:18px;margin-bottom:40px;
  border:1px solid rgba(201,162,39,.3);background:linear-gradient(160deg,rgba(24,24,26,.9),rgba(11,11,13,.92));
  box-shadow:0 34px 70px -34px #000}
.feature[hidden]{display:none}
.feature__media{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#0a0a0b}
.feature__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2}
.feature__bg{position:absolute;inset:-12%;background-size:cover;background-position:center;
  filter:blur(24px) brightness(.5) saturate(1.2);transform:scale(1.1)}
.feature__media--none{background:radial-gradient(120% 90% at 50% 15%,rgba(125,15,19,.5),#0c0709)}
.feature__flag{display:inline-block;font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.2em;text-transform:uppercase;
  font-size:.58rem;color:#fff;background:linear-gradient(135deg,#e8241c,#a5121a);
  padding:5px 12px;border-radius:999px;margin:0 0 12px}
.feature__title{font-family:var(--f-display);font-weight:700;font-size:clamp(1.5rem,3.2vw,2.2rem);
  color:var(--cream);margin:.15rem 0 .6rem;line-height:1.1;text-wrap:balance}
.feature__blurb{color:var(--cream-2);font-size:1.05rem;line-height:1.55;margin:.6rem 0 1.3rem}
.feature__cta{display:flex;gap:12px;flex-wrap:wrap}

/* upcoming list */
.wlist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.wlist[hidden],.wlist:empty{display:none}
/* a filter that leaves only the feature shouldn't open a hole beneath it */
.feature:has(+ .wlist:empty){margin-bottom:0}
.wrow{display:grid;grid-template-columns:78px 1fr auto;gap:clamp(16px,2.4vw,28px);align-items:center;
  padding:20px 22px;border-radius:14px;border:1px solid rgba(244,236,216,.075);
  background:linear-gradient(168deg,rgba(23,23,25,.72),rgba(12,12,14,.72));transition:.35s var(--ease)}
.wrow:hover{border-color:rgba(201,162,39,.38);transform:translateX(4px)}
.wrow__date{text-align:center;border-right:1px solid var(--line);padding-right:14px}
.wrow__dow,.wrow__mon{display:block;font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.16em;text-transform:uppercase;
  font-size:.56rem;color:var(--gold)}
.wrow__date strong{display:block;font-family:var(--f-display);font-weight:700;font-size:1.7rem;
  color:var(--cream);line-height:1.05;font-variant-numeric:tabular-nums}
.wrow__title{font-family:var(--f-display);font-weight:600;font-size:1.14rem;color:var(--cream);margin:.1rem 0 .35rem;letter-spacing:.02em}
.wrow__blurb{color:var(--cream-2);font-size:.98rem;line-height:1.5;margin:0 0 .55rem;max-width:62ch}
.wrow__act{display:flex;flex-direction:column;align-items:flex-end;gap:10px;white-space:nowrap}
.wrow.hide{display:none}

/* empty state */
.whatson__empty{max-width:620px;margin:0 auto;padding:clamp(36px,5vw,56px) 32px;text-align:center;
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(165deg,rgba(22,22,24,.7),rgba(11,11,13,.7))}
.whatson__empty-title{font-family:var(--f-display);font-weight:600;font-size:1.3rem;color:var(--cream);margin:0 0 .5rem}
.whatson__empty-sub{color:var(--muted);max-width:46ch;margin:0 auto 1.6rem;line-height:1.6}

@media (max-width:960px){
  .feature{grid-template-columns:1fr}
  .feature__media{max-width:420px;margin-inline:auto;width:100%}
  .wrow{grid-template-columns:64px 1fr;gap:16px}
  .wrow__act{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start;
    border-top:1px solid var(--line-soft);padding-top:14px;margin-top:4px}
}

/* v10b: small type reused by the board (was defined in the removed swipe block) */
.ecard__kicker{font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.2em;text-transform:uppercase;font-size:.6rem;
  color:var(--gold-hi);margin:0}
.ecard__meta{display:flex;flex-wrap:wrap;gap:7px;margin:.3rem 0 .1rem}
.mchip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  border:1px solid rgba(244,236,216,.2);font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.08em;
  text-transform:uppercase;font-size:.58rem;color:rgba(244,236,216,.8);background:rgba(0,0,0,.3)}

/* v10c: admin portal */
.admin__status{padding:16px 20px;border-radius:12px;border:1px solid var(--line-soft);margin-bottom:26px;
  background:linear-gradient(168deg,rgba(23,23,25,.72),rgba(12,12,14,.72));color:var(--cream-2);font-size:.98rem}
.admin__status.is-live{border-color:rgba(63,191,106,.45)}
.admin__status.is-local{border-color:rgba(201,162,39,.4)}
.admin__status code{font-size:.86em;color:var(--gold-hi)}
.know__item code{font-size:.86em;color:var(--gold-hi)}
.admin__gen{margin-top:40px;max-width:760px}
.admin__out{margin-top:16px;padding:18px;border-radius:10px;overflow:auto;max-height:60vh;
  white-space:pre-wrap;word-break:break-word;
  background:#08080a;border:1px solid var(--line-soft);color:var(--cream-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;line-height:1.55}

/* ==================================================================   v11: What's On board: more presence
   Rows carry the event's photo, a category accent and a staggered entrance;
   the feature card gets depth so the next night reads first.
   ========================================================================= */

/* --- feature: warmer, deeper, with the light coming off the photo --- */
.feature{position:relative;overflow:hidden;isolation:isolate}
.feature::before{content:"";position:absolute;inset:-40% -10% auto -30%;height:150%;z-index:-1;
  background:radial-gradient(58% 62% at 22% 38%,rgba(232,36,28,.19),transparent 70%);
  pointer-events:none}
.feature::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  box-shadow:inset 0 1px 0 rgba(244,236,216,.07)}
.feature__media{aspect-ratio:5/4;box-shadow:0 26px 54px -26px #000,0 0 0 1px rgba(201,162,39,.22)}
.feature__media::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(190deg,transparent 58%,rgba(0,0,0,.42))}
.feature__flag{position:relative;overflow:hidden;box-shadow:0 6px 18px -8px rgba(232,36,28,.9)}
.feature__flag::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);
  transform:translateX(-120%);animation:flagsheen 4.6s var(--ease) 1.4s infinite}
@keyframes flagsheen{0%{transform:translateX(-120%)}34%,100%{transform:translateX(120%)}}

/* --- rows: photo + category accent + stagger --- */
.wrow{position:relative;grid-template-columns:74px 168px 1fr auto;overflow:hidden;padding:18px 22px 18px 24px;
  animation:wrowin .5s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes wrowin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.wrow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--wrow-accent,var(--gold));opacity:.55;transition:.35s var(--ease)}
.wrow[data-cat="music"]{--wrow-accent:var(--gold)}
.wrow[data-cat="comedy"]{--wrow-accent:var(--red)}
.wrow[data-cat="special"]{--wrow-accent:#d8cfae}
.wrow:hover{border-color:rgba(201,162,39,.42);transform:translateX(4px);
  background:linear-gradient(168deg,rgba(31,31,34,.82),rgba(14,14,16,.82));
  box-shadow:0 22px 44px -30px #000}
.wrow:hover::before{opacity:1;width:4px}
.wrow__thumb{position:relative;aspect-ratio:3/2;border-radius:10px;overflow:hidden;
  background:#0c0c0e;border:1px solid rgba(244,236,216,.09)}
.wrow__thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s var(--ease);transform:scale(1.02)}
.wrow:hover .wrow__thumb img{transform:scale(1.09)}
.wrow__thumb--none{display:grid;place-items:center;
  background:radial-gradient(120% 110% at 50% 10%,rgba(125,15,19,.42),#0c0709)}
.wrow__thumb--none span{font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.14em;text-transform:uppercase;
  font-size:.58rem;color:rgba(244,236,216,.42);text-align:center;padding:0 8px}
/* a row with nothing but a message (the "nothing on the board yet" case) */
.wrow > .wrow__main:only-child{grid-column:1/-1}
.wrow__date strong{font-size:1.95rem}
.wrow:hover .wrow__title{color:#fff}

@media (prefers-reduced-motion:reduce){
  .wrow{animation:none}
  .feature__flag::after{animation:none;display:none}
  .wrow__thumb img,.wrow:hover .wrow__thumb img{transition:none;transform:none}
}
@media (max-width:960px){
  .wrow{grid-template-columns:62px 124px 1fr}
  .wrow__thumb{aspect-ratio:4/3}
}
@media (max-width:560px){
  .wrow{grid-template-columns:56px 1fr}
  .wrow__thumb{grid-column:1/-1;aspect-ratio:16/9;order:-1;margin-bottom:2px}
}

/* --- v11b: admin photo picker --- */
/* visually hidden, but still focusable and clickable.
   Needs to out-specify `.form input{width:100%}`, hence `.form input.photo__input`. */
.form input.photo__input,.photo__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.photo{display:grid;place-items:center;gap:6px;padding:26px 20px;cursor:pointer;
  border:1px dashed rgba(201,162,39,.34);border-radius:12px;background:rgba(0,0,0,.24);
  text-align:center;transition:.28s var(--ease)}
.photo:hover,.photo:focus-visible{border-color:rgba(201,162,39,.7);background:rgba(201,162,39,.06)}
.photo.is-over{border-color:var(--gold);background:rgba(201,162,39,.12);transform:scale(1.01)}
.photo.has-photo{padding:14px 20px}
.photo__ico{width:26px;height:26px;color:var(--gold);opacity:.8}
.photo__lead{margin:0;color:var(--cream-2);font-size:.98rem}
.photo__lead strong{color:var(--cream)}
.photo__sub{margin:0;color:var(--muted);font-size:.82rem;max-width:44ch}
.photo__preview{margin:12px 0 0;display:grid;grid-template-columns:132px 1fr;gap:14px;align-items:center}
.photo__preview img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;
  border:1px solid rgba(244,236,216,.12);display:block}
.photo__preview figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  color:var(--muted);font-size:.85rem;word-break:break-word}
@media (max-width:560px){.photo__preview{grid-template-columns:1fr}}
.field--sub{margin-top:14px}
.field--sub label{font-size:.7rem;opacity:.78}

/* ---- hero vibe reel: plays when the doors open ----
   The footage is vertical. On wide screens the whole frame is shown centred,
   with a blurred copy of itself filling the space either side, so nothing is
   cropped. On portrait screens it simply fills the viewport. */
.hero__video{position:absolute;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.hero__video.is-playing{opacity:1}

/* The backdrop is a blurred still, not a second copy of the hero video.
   At 34px blur and half brightness it is an ambient wash, so motion buys
   nothing, and the old <video> re-downloaded the whole file (2.8MB) even on
   phones, where this layer is display:none. The poster is already cached. */
.hero__backdrop{position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:url('../assets/img/poster-hero-vibe.jpg') center/cover no-repeat;
  filter:blur(34px) saturate(1.15) brightness(.5);transform:scale(1.15)}
.hero__video--main{inset:0;margin:auto;height:100%;width:auto;max-width:100%;
  object-fit:contain;z-index:-2;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}

@media (max-aspect-ratio:3/4){
  .hero__backdrop{display:none}
  .hero__video--main{width:100%;height:100%;object-fit:cover;
    -webkit-mask-image:none;mask-image:none}
}
@media (prefers-reduced-motion:reduce){.hero__video{display:none}}

/* ---- hero reel sound toggle ---- */
.hero__sound{position:absolute;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:3;
  padding:9px 15px;border-radius:999px;font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.12em;
  text-transform:uppercase;font-size:.66rem;color:var(--cream-2);cursor:pointer;
  background:rgba(10,10,11,.62);border:1px solid rgba(244,236,216,.28);
  backdrop-filter:blur(6px);transition:color .25s,border-color .25s,background .25s}
.hero__sound:hover{color:var(--cream);border-color:rgba(244,236,216,.55)}
.hero__sound.is-on{color:#fff;border-color:rgba(232,36,28,.85);background:rgba(120,12,14,.6)}
@media (prefers-reduced-motion:reduce){.hero__sound{display:none}}

/* ---- the hero hands the screen over to the reel ----
   Two stages, so nothing competes for attention at once. First the writing
   goes: the wordmark and tagline lift, dissolve and blur away while the scrim
   eases back, leaving the room on screen. Then the buttons leave the frame.
   On wide screens the reel is a tall column with blurred margins either side,
   so they cross-fade into the left margin, where they never cover the
   footage, a row where there is room, a stack where there is not, and out of
   sight when neither fits. Nothing leaves the DOM; the h1 still reads for
   search and screen readers. */
.hero__title,.hero__tag,.hero .deco-divider{
  transition:opacity 1.5s ease,transform 1.5s ease,filter 1.5s ease}
.hero__scrim{transition:opacity 1.8s ease}

.hero.is-reel .hero__title,
.hero.is-reel .hero__tag,
.hero.is-reel .deco-divider{
  opacity:0;transform:translateY(-24px);filter:blur(8px);pointer-events:none}
.hero.is-reel .hero__scrim{opacity:.4}
/* the ghost button loses the scrim's help against bright footage */
.hero.is-reel .btn--ghost{background:rgba(10,10,11,.45);backdrop-filter:blur(5px)}

/* stage two, the buttons dissolve where they stand and return in the corner */
.hero__cta{transition:opacity .55s ease}
.hero__cta.is-moving{opacity:0}
@media (min-width:961px){
  /* the copy block is the CTA's offset parent until now, hand it to the hero
     so "bottom left" means the corner of the screen, not the corner of the copy */
  .hero.is-docked .hero__content{position:static}
  .hero.is-docked .hero__cta{position:absolute;margin:0;z-index:3;
    left:clamp(16px,3vw,30px);bottom:clamp(16px,3vw,30px);justify-content:flex-start}
  .hero.is-stacked .hero__cta{flex-direction:column;align-items:flex-start;gap:10px}
}
/* no room beside the reel, or a phone where the fixed bar at the foot of the
   screen already carries both of these actions, either way, the reel gets
   the whole frame rather than a second set of buttons */
.hero.is-tucked .hero__cta{opacity:0;pointer-events:none}

/* the reel never plays here, so nothing needs to step aside */
@media (prefers-reduced-motion:reduce){
  .hero__title,.hero__tag,.hero .deco-divider,.hero__cta,.hero__scrim{transition:none}
  .hero.is-reel .hero__title,
  .hero.is-reel .hero__tag,
  .hero.is-reel .deco-divider{opacity:1;transform:none;filter:none}
  .hero.is-reel .hero__scrim{opacity:1}
  .hero.is-docked .hero__cta{position:static}
  .hero.is-tucked .hero__cta{opacity:1;pointer-events:auto}
}

/* ==================================================================   v6: READABILITY
   Poiret One (a single-weight hairline face) has been retired as the label
   font: at 12px, uppercase, letter-spaced and reversed out of dark or video,
   it had almost no stroke left to read. Cinzel 700 now carries every label,
   which also drops the site to two families, engraved caps and Cormorant.
   Cinzel's caps are wider than Poiret's, so tracking comes in to compensate.
   ========================================================================= */

/* ---- type scale: heavier where it was thin ---- */
body{font-weight:500;font-size:clamp(17.5px,1.2vw,19.5px);line-height:1.62}
.h-display{font-weight:600}
.lead{font-weight:500;color:var(--cream)}
.section__intro{color:var(--cream-2);font-weight:500}
.note{color:var(--cream-2);opacity:.86}

/* labels: shorter tracking now that the letterforms have width of their own */
.kicker{font-size:.72rem;letter-spacing:.24em;color:var(--gold-hi);opacity:1}
.h-sub{letter-spacing:.14em;font-size:1rem}
.link-underline{font-size:.74rem;letter-spacing:.1em;border-bottom-color:rgba(201,162,39,.5)}
.btn{font-size:.76rem;letter-spacing:.12em}
.btn--gold,.btn--gold-sm{font-weight:var(--w-deco)}
.btn--ghost{border-color:rgba(244,236,216,.5);color:#fff}
.about__stats span,.footer__name span,.nav__name small{letter-spacing:.18em}
.tab{letter-spacing:.12em}
.field label{letter-spacing:.1em;font-size:.68rem;color:var(--gold-hi)}
.status{letter-spacing:.09em}
.price,.leaders .p{font-weight:600;letter-spacing:.01em}
.leaders .p{font-size:.98rem;color:#f0d99a}
.leaders .n em{color:var(--cream-2);opacity:.82}

/* ---- the header sits over video, so it carries its own ground at all times ---- */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,7,.92) 0%,rgba(6,6,7,.72) 45%,transparent 100%);
  transition:opacity .4s var(--ease)}
.nav.scrolled::before{opacity:0}
.nav__links a{font-size:.79rem;letter-spacing:.09em;font-weight:var(--w-deco);
  color:#f0e8d4;text-shadow:0 1px 12px rgba(0,0,0,.85)}
.nav__links{gap:24px}
.nav__links a:hover{color:#fff}
.nav__links a.active{color:var(--gold-hi)}
.nav__name{font-size:1.16rem;font-weight:var(--w-deco)}
.nav__name small{font-size:.55rem;font-weight:var(--w-deco)}
.nav__call{font-weight:var(--w-deco);letter-spacing:.04em;font-size:.8rem}
.nav__book{font-weight:var(--w-deco);letter-spacing:.1em}
.mobile__nav a{font-weight:600}
.mobile__call{letter-spacing:.12em}

@media (max-width:1180px){
  .nav__links{gap:18px}
  .nav__links a{font-size:.73rem;letter-spacing:.06em}
}

/* ---- footer and small print earn their contrast back ---- */
.footer__links a{font-size:.75rem;letter-spacing:.1em;color:var(--cream)}
.footer__meta{color:var(--cream-2)}
.footer__fine{color:var(--cream-2);opacity:.72}
.hours td:first-child{color:var(--cream)}
.wrow__dow,.wrow__mon,.ecard__kicker,.events__nights span,.quote cite,.gcard figcaption{letter-spacing:.12em}

/* ---- tabs and filter chips read as controls, not captions ---- */
.chip{font-size:.78rem;letter-spacing:.1em;padding:9px 20px;color:var(--cream);
  background:rgba(244,236,216,.05);border-color:rgba(201,162,39,.34)}
.chip:hover{background:rgba(201,162,39,.12);border-color:var(--gold-hi);color:#fff}
.chip.is-active{color:#150e02;background:linear-gradient(135deg,#f0dca0,#c9a227 55%,#9c7c22);
  box-shadow:0 8px 22px -12px rgba(201,162,39,.9)}
.whatson__filters{gap:12px;margin-bottom:38px}
.tab{font-size:.86rem;letter-spacing:.11em;color:var(--cream-2)}
.tab:hover{color:#fff}

/* ==================================================================   v7: EVENTS: tonight band and the live-music schedule
   The ticketed feature card (.feature) and its list (.wrow) are unchanged 
   they were the part that worked. These are the two bands around them.
   ========================================================================= */

/* ---- tonight: the first question a guest actually asks ---- */
.tonight{display:flex;align-items:center;gap:clamp(18px,3vw,38px);flex-wrap:wrap;
  padding:clamp(20px,2.6vw,30px) clamp(22px,3vw,36px);border-radius:var(--radius);
  border:1px solid var(--line);background:linear-gradient(120deg,rgba(28,22,10,.72),rgba(13,13,15,.85));
  box-shadow:var(--shadow)}
.section.tonight-sec{padding-top:clamp(30px,4vw,48px);padding-bottom:0}
.tonight__loading{margin:0;color:var(--cream-2);font-style:italic}
.tonight__mark{display:flex;align-items:center;gap:11px;flex:none}
.tonight__mark .kicker{margin:0;white-space:nowrap}
.tonight__dot{width:9px;height:9px;border-radius:50%;background:#3fbf6a;box-shadow:0 0 12px #3fbf6a;
  animation:pulseDot 2s infinite;flex:none}
.tonight__dot--quiet{background:var(--muted);box-shadow:none;animation:none}
.tonight__list{list-style:none;margin:0;padding:0;flex:1 1 340px;display:grid;gap:8px;min-width:0}
.tonight>.btn{margin-left:auto;flex:none}
.tonight__list li{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tonight__time{font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.06em;
  color:var(--gold-hi);font-size:.84rem;flex:none;min-width:5.5em}
.tonight__name{color:var(--cream);font-size:1.1rem}

/* ---- live music: grouped by night, over a week or a month ---- */
.mus__range{text-align:center;margin:-16px 0 30px;color:var(--cream-2);font-style:italic}
.mus{display:grid;gap:12px}
.mus__day{display:grid;grid-template-columns:118px 1fr;gap:clamp(16px,2.4vw,30px);align-items:start;
  padding:22px clamp(18px,2.4vw,28px);border-radius:14px;border:1px solid var(--line-soft);
  background:linear-gradient(165deg,rgba(24,24,26,.78),rgba(12,12,14,.78));transition:border-color .3s}
.mus__day:hover{border-color:rgba(201,162,39,.34)}
.mus__day.is-today{border-color:var(--line);background:linear-gradient(165deg,rgba(34,27,12,.85),rgba(13,13,15,.85))}
.mus__when{text-align:center;border-right:1px solid var(--line-soft);padding-right:clamp(12px,2vw,22px);align-self:stretch}
.mus__when strong{display:block;font-family:var(--f-display);font-weight:600;font-size:2.1rem;
  line-height:1;color:var(--cream);font-variant-numeric:tabular-nums}
.mus__dow,.mus__mon{display:block;font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.14em;
  text-transform:uppercase;font-size:.62rem;color:var(--gold)}
.mus__dow{margin-bottom:5px}
.mus__mon{margin-top:5px}
.mus__today{display:inline-block;margin-top:9px;padding:3px 10px;border-radius:999px;
  background:linear-gradient(135deg,#f0dca0,#c9a227 55%,#9c7c22);color:#150e02;
  font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.1em;text-transform:uppercase;font-size:.78rem}
.mus__sets{list-style:none;margin:0;padding:0;display:grid;gap:16px;min-width:0}
.mus__sets li{display:flex;align-items:baseline;gap:clamp(12px,2vw,20px);flex-wrap:wrap}
.mus__time{font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.06em;color:var(--gold-hi);
  font-size:.86rem;flex:none;min-width:5em}
.mus__what{flex:1 1 260px;min-width:0}
.mus__what h3{font-family:var(--f-display);font-weight:600;font-size:1.18rem;color:var(--cream);margin:0 0 .25rem}
.mus__what p{margin:0;color:var(--cream-2);font-size:.98rem;line-height:1.5}

@media (max-width:640px){
  .mus__day{grid-template-columns:1fr;gap:14px}
  .mus__when{display:flex;align-items:baseline;gap:10px;text-align:left;border-right:0;padding-right:0;
    border-bottom:1px solid var(--line-soft);padding-bottom:12px}
  .mus__when strong{font-size:1.5rem}
  .mus__dow,.mus__mon{margin:0}
  .mus__today{margin-top:0}
  .tonight{gap:16px}
  .tonight__time{min-width:0}
}

/* A leaders list with no price column: keep the rule, drop the dangling dots. */
.leaders--plain li{display:block}
.leaders--plain .n{display:block}

/* ==================================================================   v8: TYPE SCALE
   Measured pass. Before this, 28 distinct pieces of text rendered under 13px
   on a 390px phone, including form labels (10.9px), the event date and time
   chips (9.3px) and the mobile booking button (11.2px). Almost nothing
   scaled between phone and desktop either: the same px at 390 and 1440.

   Rules applied here:
     - nothing readable renders below 12.5px, on any screen;
     - anything a guest acts on (button, link, control, form label) is 13px+;
     - sizes are clamped so they grow with the viewport instead of sitting
       still, phone value first, desktop value as the ceiling.
   ========================================================================= */

/* body: larger on a phone, and it now grows on a desktop */
body{font-size:clamp(18px,0.29vw + 16.9px,19.5px);line-height:1.65}

/* the wordmark, asked to carry more presence */
.nav__name{font-size:clamp(1.38rem,1.15vw + 1.05rem,1.72rem);line-height:1.05}
.nav__name small{font-size:clamp(.68rem,.2vw + .62rem,.75rem);letter-spacing:.22em}

/* navigation and the actions beside it */
.nav__links a{font-size:clamp(.84rem,.18vw + .79rem,.9rem);letter-spacing:.08em}
.nav__call{font-size:clamp(.85rem,.15vw + .81rem,.9rem)}
.nav__book{font-size:clamp(.82rem,.15vw + .78rem,.88rem)}

/* every button and inline action */
.btn{font-size:clamp(.85rem,.16vw + .81rem,.91rem);letter-spacing:.11em}
.link-underline{font-size:clamp(.83rem,.14vw + .79rem,.88rem)}
.chip{font-size:clamp(.84rem,.14vw + .8rem,.89rem)}
.mr__book,.mr__call{font-size:clamp(.86rem,.16vw + .82rem,.92rem)}

/* labels and small caps: the old floor was 8.8px, which is not text */
.kicker{font-size:clamp(.78rem,.14vw + .74rem,.84rem);letter-spacing:.22em}
.mchip{font-size:.79rem;letter-spacing:.07em}
.feature__flag{font-size:.79rem;letter-spacing:.14em}
.ecard__kicker,.pl__tag,.ea{font-size:.78rem}
.mus__dow,.mus__mon,.wrow__dow,.wrow__mon{font-size:.78rem;letter-spacing:.12em}
.status{font-size:.79rem}
.hero__scroll-label{font-size:.75rem;letter-spacing:.26em}
.hero__sound{font-size:.79rem}
.hero__title-2{font-size:clamp(.88rem,.5vw + .72rem,1.05rem)}
.field label{font-size:.82rem;letter-spacing:.09em}
.about__stats span,.footer__name span{font-size:.76rem}
.footer__links a{font-size:clamp(.83rem,.14vw + .79rem,.88rem)}
.footer__fine{font-size:.86rem}
.menu-cat-head p,.gcard figcaption,.about__media figcaption,
.visit__store figcaption,.sig__cap small{font-size:.79rem}

/* the guest reviews carry more weight than a caption */
.quote p{font-size:clamp(1.16rem,.55vw + 1.02rem,1.32rem);line-height:1.55}
.quote cite{font-size:.81rem;letter-spacing:.12em}

/* reading matter that was a shade tight */
.ck__ing{font-size:.9rem;line-height:1.5}
.ck__note{font-size:1rem}
.leaders .n em{font-size:.86em}
.mus__what p,.wrow__blurb{font-size:1rem}
.note{font-size:.95rem}

/* headings: h1 was set 35px on 32px leading, so two lines would collide */
.page-hero h1{line-height:1.08}
.h-display{line-height:1.1}

/* Stragglers: these carried a more specific rule than the block above, so the
   sizes there never applied. Matched at the same specificity here. */
.mobile-reserve a{font-size:clamp(.86rem,.16vw + .82rem,.92rem)}
.menu-cat-head .ea{font-size:.79rem}
.host__media figcaption,.dinner__feature figcaption{font-size:.79rem}
.about__stats span{font-size:.8rem}
.nav__name small{font-size:clamp(.78rem,.18vw + .73rem,.85rem)}
.hero__scroll-label{font-size:.79rem}

/* The nav runs full-width down to 961px, where it becomes the burger. Between
   there and about 1300px, "Host Your Event" used to wrap onto a second line
   and the phone number collapsed into a red disc. Nothing in the bar may wrap;
   instead the links tighten as the room runs out. */
.nav__links a,.nav__call,.nav__book,.nav__name{white-space:nowrap}
/* nowrap text overflows a shrunken flex box, so the wordmark was riding into
   the first nav link. The brand keeps its width; the links tighten instead. */
.nav__brand{flex:none}
.nav__links{min-width:0}
/* Below ~1000px the full bar can only fit by squeezing the links against the
   Book button. The burger takes over a little earlier instead. This is the nav
   only; the 960px breakpoint still governs the rest of the layout. */

/* ==================================================================   v9: THE FOOTAGE, MADE VISIBLE
   The room was being hidden by its own scrim: the page-hero wash ran to 0.9
   opacity black at the edges and 0.5 dead centre, which left the video as a
   dark smear. Lifting the video and easing the scrim, then protecting the
   headline with a text shadow rather than a blanket of black over everything.
   ========================================================================= */
.hero__video{filter:brightness(1.16) saturate(1.08) contrast(1.03)}
.page-hero__video{filter:brightness(1.2) saturate(1.06) contrast(1.02)}
.reel__video{filter:brightness(1.1) saturate(1.04)}

.page-hero.has-video .page-hero__scrim{
  background:radial-gradient(72% 70% at 50% 46%,rgba(6,6,7,.26),rgba(6,6,7,.72) 92%),
             linear-gradient(180deg,rgba(6,6,7,.7) 0%,rgba(6,6,7,.26) 42%,var(--noir) 100%)}
.hero__scrim{background:
  radial-gradient(50% 40% at 50% 60%,rgba(6,6,7,.4),transparent 74%),
  radial-gradient(75% 65% at 50% 42%,rgba(10,10,11,.08),rgba(6,6,7,.58) 94%),
  linear-gradient(180deg,rgba(6,6,7,.5) 0%,rgba(6,6,7,.1) 34%,rgba(6,6,7,.38) 72%,var(--noir) 100%)}

/* the type keeps its own contrast now that the wash is lighter */
.page-hero.has-video .page-hero__inner h1{text-shadow:0 2px 26px rgba(0,0,0,.92),0 1px 5px rgba(0,0,0,.75)}
.page-hero.has-video .page-hero__inner .lead,
.page-hero.has-video .page-hero__inner .kicker{text-shadow:0 1px 16px rgba(0,0,0,.95),0 1px 4px rgba(0,0,0,.8)}
.page-hero.has-video .page-hero__ico{filter:drop-shadow(0 2px 10px rgba(0,0,0,.85))}

/* ---- hours on the home page: the question every guest asks first ---- */
.openhours__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,5vw,64px);align-items:center;
  padding:clamp(26px,3.4vw,42px) clamp(24px,3.4vw,44px);border-radius:var(--radius);
  border:1px solid var(--line);background:linear-gradient(120deg,rgba(28,22,10,.6),rgba(13,13,15,.85));
  box-shadow:var(--shadow)}
.openhours__now .status{margin:.5rem 0 1rem}
.openhours__note{color:var(--cream-2);margin:0 0 1.3rem}
.openhours__cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.openhours .hours{max-width:none;width:100%}
.openhours .hours td{font-size:1.05rem;padding:.62rem 0}
@media (max-width:820px){.openhours__inner{grid-template-columns:1fr;gap:26px}}

/* ---- past clients: official single-colour marks, inlined ----
   Each mark is fill="currentColor", so colour comes from here: cream at rest,
   gold on hover. Heights are per-logo (from the supplied set) so a tall mark
   like Apple and a wide one like Maison Birks carry the same optical weight. */
.clients__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(22px,3vw,36px) clamp(26px,3.5vw,50px);color:var(--cream);
  padding:clamp(18px,2.4vw,30px) 0}
.clients__row svg{width:auto;display:block;opacity:.8;flex:none;
  transition:opacity .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.clients__row svg:hover{opacity:1;color:var(--gold-hi);transform:translateY(-2px)}

.clients__row .apple{height:44.9px}
.clients__row .amazon{height:33.4px}
.clients__row .google{height:36.2px}
.clients__row .goldman-sachs{height:38.8px}
.clients__row .rbc{height:43.7px}
.clients__row .morguard{height:28.1px}
.clients__row .maison-birks{height:19px}

@media (max-width:720px){
  .clients__row{gap:22px 30px}
  .clients__row .apple{height:34px}
  .clients__row .amazon{height:25px}
  .clients__row .google{height:27px}
  .clients__row .goldman-sachs{height:29px}
  .clients__row .rbc{height:33px}
  .clients__row .morguard{height:21px}
  .clients__row .maison-birks{height:14px}
}

/* ---- EN / FR toggle, first thing in the bar ---- */
.lang{display:inline-flex;align-items:center;gap:7px;flex:none;padding:5px 11px;border-radius:999px;
  border:1px solid var(--line-soft);background:rgba(8,8,9,.45)}
.lang__opt{font-family:var(--f-deco);font-weight:var(--w-deco);font-size:.78rem;letter-spacing:.08em;
  color:var(--cream-2);padding:2px 3px;border-radius:4px;transition:color .25s;line-height:1.1}
.lang__opt:hover{color:#fff}
.lang__opt.is-on{color:var(--gold-hi)}
.lang__sep{width:1px;height:13px;background:var(--line-soft)}
@media (max-width:1140px){.lang{padding:4px 9px}.lang__opt{font-size:.78rem}}
@media (max-width:520px){.lang{padding:3px 8px;gap:5px}.lang__opt{font-size:.78rem}}

/* ---- the bar has to hold: toggle, wordmark, six links, Book and the phone,
   in two languages. Measured, French needs about 100px more than English.
   The container gets more room on wide screens, the links step down through
   two tiers, and the burger takes over before anything can collide. ---- */
.nav__inner{max-width:1560px}
.nav__links{flex:none;margin-left:auto}

@media (min-width:1501px){
  .nav__links{gap:22px}
  .nav__links a{font-size:.9rem;letter-spacing:.07em}
}
@media (max-width:1500px){
  .nav__links{gap:15px}
  .nav__links a{font-size:.83rem;letter-spacing:.025em}
  .nav__inner{gap:16px}
  .nav__call{padding:9px 14px}
}
@media (max-width:1320px){
  .nav__links{gap:11px}
  .nav__links a{font-size:.79rem;letter-spacing:.01em}
  .nav__name{font-size:1.34rem}
  .nav__inner{gap:12px}
  .nav__book{font-size:.78rem;padding:8px 14px}
  .nav__call{font-size:.79rem;padding:8px 12px}
}
/* Below this the full bar cannot hold both languages without crowding.
   Measured after Careers came out: the bar needs 992px in English and 1027px
   in French, so 1080 keeps a margin over the wider language. It sat at 1180
   while there were seven links, which handed people the burger on screens
   the full nav now fits on. */
@media (max-width:1080px){
  .nav__links,.nav__call{display:none}
  .nav__toggle{display:flex}
}

/* The only word set in CSS content, so the text walker cannot reach it. */
:root[lang="fr-CA"] .hours tr.today td:first-child::after{content:" · aujourd’hui"}

/* ---- a hero video that is narrower than the banner ----
   The plate clip is a 360px-wide vertical phone video. Covering a 1440px
   banner with it showed 26% of the frame at 4x upscale: a slice of the dish,
   unreadable. Contained instead, it plays at close to native size, whole and
   sharp, and a blurred still of the same frame fills the rest of the band. */
.page-hero.has-video--whole .page-hero__video{object-fit:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
/* the band reads as one field rather than a plate floating on black */
.page-hero.has-video--whole .page-hero__scrim{
  background:radial-gradient(58% 62% at 50% 52%,rgba(6,6,7,.34),rgba(6,6,7,.6) 88%),
             linear-gradient(180deg,rgba(6,6,7,.68) 0%,rgba(6,6,7,.2) 40%,var(--noir) 100%)}
/* background-image is set inline in the HTML on purpose: a url() inside a CSS
   custom property resolves against the stylesheet, not the document, so a path
   passed that way would be looked for under /css/. Longhands here so the
   inline background-image is not clobbered by a shorthand. */
.page-hero__still{position:absolute;inset:0;z-index:-3;pointer-events:none;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  filter:blur(34px) saturate(1.15) brightness(.6);transform:scale(1.18)}
/* Reduced motion hides the video, so the still stands in for it: sharp,
   contained and masked the same way, so the dish is still identifiable. */
@media (prefers-reduced-motion:reduce){
  .page-hero.has-video--whole .page-hero__still{
    background-size:contain;filter:none;transform:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
}

/* ==================================================================   v10: THE MONTH CALENDAR
   Replaces the This week / This month chips. Nights with something on carry a
   gold dot and are clickable; clicking one filters the list below to that
   night, clicking it again clears. Empty days are inert spans, not buttons,
   so a keyboard never lands on a night with nothing on it.
   ========================================================================= */
.cal{max-width:440px;margin:0 auto clamp(24px,3vw,34px);padding:clamp(16px,2vw,22px);
  border-radius:var(--radius);border:1px solid var(--line-soft);
  background:linear-gradient(165deg,rgba(24,24,26,.72),rgba(12,12,14,.72))}
.cal__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.cal__month{font-family:var(--f-display);font-weight:600;font-size:1.12rem;color:var(--cream);
  margin:0;letter-spacing:.03em;text-align:center;flex:1}
.cal__nav{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-soft);
  color:var(--cream-2);font-size:1.3rem;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:border-color .25s,color .25s,background .25s;flex:none}
.cal__nav:hover{border-color:var(--gold);color:var(--gold-hi);background:rgba(201,162,39,.1)}
.cal__dow,.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal__dow{margin-bottom:6px}
.cal__dow span{text-align:center;font-family:var(--f-deco);font-weight:var(--w-deco);
  font-size:.72rem;letter-spacing:.06em;color:var(--gold)}
.cal__day,.cal__pad{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;border-radius:9px;font-size:.9rem;color:var(--muted)}
.cal__day.has-event{color:var(--cream);border:1px solid var(--line-soft);cursor:pointer;
  transition:border-color .25s,background .25s,color .25s}
.cal__day.has-event:hover{border-color:var(--gold);background:rgba(201,162,39,.12);color:#fff}
.cal__day i{width:5px;height:5px;border-radius:50%;background:var(--gold-hi);display:block}
.cal__day.is-today{color:var(--gold-hi)}
.cal__day.is-today.has-event{border-color:rgba(201,162,39,.5)}
.cal__day.is-picked{background:linear-gradient(135deg,#f0dca0,#c9a227 55%,#9c7c22);
  color:#150e02;border-color:transparent}
.cal__day.is-picked i{background:#150e02}
@media (max-width:420px){.cal__day,.cal__pad{font-size:.84rem;border-radius:7px}}

/* ---- the two rooms, as tabs ---- */
.rooms .tabs{justify-content:center;margin-bottom:clamp(22px,3vw,34px)}
.rooms__panel{padding-top:6px}
.rooms__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(26px,4.4vw,58px);align-items:center}
.rooms__title{font-size:clamp(1.6rem,3vw,2.3rem);margin:0 0 1rem}
.rooms__copy .lead{margin-bottom:1rem}
.rooms__shots{display:grid;gap:14px}
.rooms__shots figure{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line-soft);box-shadow:var(--shadow)}
.rooms__shots img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.rooms__shots figure:hover img{transform:scale(1.03)}
.rooms__shots figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 12px;
  font-family:var(--f-deco);font-weight:var(--w-deco);letter-spacing:.12em;text-transform:uppercase;
  font-size:.72rem;color:var(--cream);background:linear-gradient(180deg,transparent,rgba(0,0,0,.8))}
.rooms__shots--one img{aspect-ratio:4/3}
.rooms__included{margin-top:clamp(30px,4vw,48px);padding-top:clamp(26px,3vw,36px);
  border-top:1px solid var(--line-soft);max-width:78ch;margin-inline:auto;text-align:center}
.rooms__included .kicker{margin-bottom:1.2rem}
.booking__points--wide{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:10px 26px;text-align:left;margin-bottom:1.6rem}
@media (max-width:860px){
  .rooms__grid{grid-template-columns:1fr;gap:24px}
  .rooms__shots{grid-template-columns:1fr 1fr}
  .rooms__shots--one{grid-template-columns:1fr}
}
@media (max-width:560px){.rooms__shots{grid-template-columns:1fr}}

/* ==================================================================   v11: THE BAR HEADER AND THE EVENT FILM
   ========================================================================= */

/* A plain cover hero keeps its still sharp: the still is the stand-in when the
   video is suppressed (reduced motion) or has not decoded, so it must be
   framed exactly like the video rather than blurred the way the letterboxed
   --whole variant needs. */
.page-hero.has-video:not(.has-video--whole) .page-hero__still{
  filter:none;transform:none;background-size:cover}

/* The event film. The source is 960x540, so the frame is capped near its own
   width: shown any wider it would upscale and soften, which is the one thing
   footage of a dark room cannot afford. Sized to read as a deliberate frame. */
.reel--wide .reel__frame{max-width:min(94vw,1000px);aspect-ratio:16/9}
.reel--wide .reel__video{width:100%;height:100%;object-fit:cover}
.reel__cap{max-width:min(94vw,1000px);margin:14px auto 0;text-align:center;
  font-family:var(--f-serif);font-size:1.02rem;color:var(--cream-2)}

/* A 16:9 clip in a 3.1:1 band is cropped to a sliver, which zooms the shot
   about 1.9x and turns a bar into an abstraction. Measured: at 1440x900 the
   band was 1440x468. Giving the hero real height on anything desktop-sized
   brings it to roughly 2.2:1, so cover barely crops and the room reads as a
   room. Capped so a tall monitor does not get a wall of video. */
@media (min-width:900px){
  .page-hero.has-video{min-height:min(72vh,720px)}
}

/* Honeypot: a field only a bot will fill in. Kept out of the layout and out
   of the tab order rather than display:none, which some bots detect. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Upstairs carries no photograph, so its panel is copy only and should not
   sit in half a grid with nothing beside it. */
.rooms__grid--copy{grid-template-columns:1fr;max-width:760px;margin-inline:auto;text-align:center}
.rooms__grid--copy .booking__points{display:inline-block;text-align:left}
.rooms__grid--copy .host__actions{justify-content:center}

/* The event film sits between the rooms and what every buyout includes. The
   source is 960x540, so the frame is capped near its own width rather than
   stretched, where it would upscale and soften. */
.rooms__film{max-width:min(94vw,1000px);margin:clamp(30px,4vw,48px) auto 0}
.rooms__film .reel__video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  border-radius:16px;border:1px solid rgba(201,162,39,.26);box-shadow:var(--shadow);background:#0a0a0b}