/* Shared Macabi cigar-band masthead.
   Fixed positioning keeps header transitions from changing document layout. */
:root{
  --masthead-expanded:116px;
  --masthead-overlap:80px;
  --masthead-duration:210ms;
  --masthead-ease:cubic-bezier(.2,.72,.2,1)
}

html{scroll-padding-top:calc(var(--masthead-expanded) + 18px)}
body{padding-top:var(--masthead-expanded)}
body>main{margin-top:calc(var(--masthead-overlap) * -1)}

.masthead{
  position:fixed;
  inset:0 0 auto;
  height:var(--masthead-expanded);
  z-index:100;
  background:transparent;
  pointer-events:none;
  --rail-h:36px;
  --util-h:var(--rail-h);
  --band-h:80px;
  --band-w:min(900px,calc(100vw - 120px));
  --band-scale-x:1;
  --band-scale-y:1;
  --band-step:14px;
  --band-shift:20px;
  --crest-top:26px;
  --crest-shift:0px;
  --crest-scale:1;
  --links-y:0px;
  --links-scale:1;
  --crest-slot:220px
}
.masthead>*{pointer-events:auto}
.masthead.scrolled{
  /* Breakpoint-specific rules below own compact scaling. */
  --band-shift:5px;
  --crest-shift:0px
}

.topbar{
  position:absolute;
  inset:0 0 auto;
  height:var(--rail-h);
  opacity:1;
  overflow:hidden;
  background:var(--sand,#d6c2a3);
  color:var(--navy,#182645);
  border-bottom:1px solid rgba(24,38,69,.1);
  box-shadow:0 1px 0 rgba(255,255,255,.65) inset;
  transform:translateY(0);
  transition:
    transform 180ms var(--masthead-ease),
    opacity 130ms ease;
  will-change:transform,opacity;
  contain:paint
}
.topbar .wrap{
  width:calc(100% - 48px);
  max-width:none;
  height:100%;
  margin-inline:auto;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--crest-slot) minmax(0,1fr);
  align-items:center;
  gap:16px;
  flex-wrap:nowrap
}
.topbar .tb-info{grid-column:1;justify-self:start;min-width:0}
.topbar .tb-util{grid-column:3;justify-self:end}
.topbar .tb-info,
.topbar .tb-util{
  height:100%;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:nowrap
}
.topbar .tb-info{gap:0}
.topbar .tb-info>.sep{display:none}
.topbar #openState,
.topbar .tb-info>.tb-hh:not(.sep){
  display:inline-flex;
  align-items:center;
  height:100%;
  padding-inline:15px;
  white-space:nowrap;
  border:0
}
.topbar #openState{padding-left:0}
.topbar .tb-info>.tb-hh:not(.sep){
  position:relative;
  padding-left:0
}
.topbar .tb-info>.tb-hh:not(.sep)::before{
  content:"";
  width:3px;
  height:3px;
  margin-right:15px;
  border-radius:50%;
  background:var(--gold,#c59a46);
  opacity:.72
}
.topbar .tb-util{gap:14px}
.topbar .tb-util a{border:0}
.topbar .tb-util>.tb-lm{
  display:inline-flex;
  align-items:center;
  height:100%;
  margin-right:5px;
  white-space:nowrap;
  color:var(--navy,#182645)
}
.topbar .dot{
  width:6px;height:6px;border-radius:50%;display:inline-block;
  margin-right:8px;vertical-align:middle;background:#57c98a;
  box-shadow:0 0 0 3px rgba(87,201,138,.25)
}
.topbar .dot.closed{background:#b4a688;box-shadow:none}
.topbar .tb-util .ic{color:var(--navy,#182645);gap:8px}
.topbar .tb-util .ic svg{width:16px;height:16px}
.topbar .tb-util>.ic+.ic::before{
  content:"";
  flex:0 0 auto;
  width:3px;
  height:3px;
  margin-right:6px;
  border-radius:50%;
  background:var(--gold,#c59a46);
  opacity:.8
}
.topbar .tb-util>.ic+.ic svg{
  transform:translateY(-1px)
}
.topbar .tb-util .badge{
  min-width:15px;
  height:15px;
  padding:0 4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:15px;
  transform:translateY(-1px)
}
.masthead.scrolled .topbar{
  opacity:0;
  transform:translateY(-100%);
  pointer-events:none
}

header.nav{
  position:absolute;
  inset:var(--rail-h) 0 auto;
  z-index:2;
  height:var(--band-h);
  color:#f1ebdc;
  background:transparent;
  transform:translate3d(0,var(--band-shift),0);
  transform-origin:50% 0;
  transition:
    transform var(--masthead-duration) var(--masthead-ease);
  will-change:transform;
  backface-visibility:hidden;
  isolation:isolate
}
header.nav::before{
  content:"";
  position:absolute;
  inset:0 auto;
  left:50%;
  width:var(--band-w);
  transform:translateX(-50%);
  scale:var(--band-scale-x) var(--band-scale-y);
  transform-origin:center;
  z-index:0;
  background:var(--navy,#182645);
  clip-path:polygon(
    0 22%,
    var(--band-step) 22%,
    var(--band-step) 14%,
    34% 14%,
    37% 0,
    63% 0,
    66% 14%,
    calc(100% - var(--band-step)) 14%,
    calc(100% - var(--band-step)) 22%,
    100% 22%,
    100% 78%,
    calc(100% - var(--band-step)) 78%,
    calc(100% - var(--band-step)) 86%,
    66% 86%,
    63% 100%,
    37% 100%,
    34% 86%,
    var(--band-step) 86%,
    var(--band-step) 78%,
    0 78%
  );
  box-shadow:0 10px 34px rgba(8,15,31,.12);
  transition:
    scale var(--masthead-duration) var(--masthead-ease),
    box-shadow var(--masthead-duration) var(--masthead-ease)
}
header.nav::after{
  content:"";
  position:absolute;
  inset:5px auto;
  left:50%;
  z-index:0;
  width:calc(var(--band-w) - 10px);
  transform:translateX(-50%);
  scale:var(--band-scale-x) var(--band-scale-y);
  transform-origin:center;
  background:var(--paper,#fbf8f1);
  clip-path:polygon(
    0 22%,
    var(--band-step) 22%,
    var(--band-step) 14%,
    34% 14%,
    37% 0,
    63% 0,
    66% 14%,
    calc(100% - var(--band-step)) 14%,
    calc(100% - var(--band-step)) 22%,
    100% 22%,
    100% 78%,
    calc(100% - var(--band-step)) 78%,
    calc(100% - var(--band-step)) 86%,
    66% 86%,
    63% 100%,
    37% 100%,
    34% 86%,
    var(--band-step) 86%,
    var(--band-step) 78%,
    0 78%
  );
  transition:scale var(--masthead-duration) var(--masthead-ease)
}
.masthead.scrolled header.nav::before{box-shadow:0 12px 34px rgba(8,15,31,.24)}

.nav .wrap{
  position:relative;
  z-index:1;
  display:grid;
  align-items:center;
  gap:0;
  width:var(--band-w);
  max-width:none;
  min-height:0;
  height:100%;
  margin-inline:auto;
  padding-inline:16px;
  grid-template-columns:minmax(0,1fr) var(--crest-slot) minmax(0,1fr);
  transition:none
}
.nav .wrap::before{
  content:"";
  position:absolute;
  inset:7px auto;
  left:50%;
  z-index:0;
  width:calc(100% - 14px);
  transform:translateX(-50%);
  scale:var(--band-scale-x) var(--band-scale-y);
  transform-origin:center;
  background:var(--navy,#182645);
  clip-path:polygon(
    0 22%,
    var(--band-step) 22%,
    var(--band-step) 14%,
    34% 14%,
    37% 0,
    63% 0,
    66% 14%,
    calc(100% - var(--band-step)) 14%,
    calc(100% - var(--band-step)) 22%,
    100% 22%,
    100% 78%,
    calc(100% - var(--band-step)) 78%,
    calc(100% - var(--band-step)) 86%,
    66% 86%,
    63% 100%,
    37% 100%,
    34% 86%,
    var(--band-step) 86%,
    var(--band-step) 78%,
    0 78%
  );
  transition:scale var(--masthead-duration) var(--masthead-ease)
}
.crest-slot{display:block}
nav.links{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:clamp(14px,1.2vw,22px);
  font-family:var(--ui,var(--fs-ui,"Avenir Next",Arial,sans-serif));
  font-size:14px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
  transform:translate3d(var(--links-x),var(--links-y),0) scale(var(--links-scale));
  transition:
    transform var(--masthead-duration) var(--masthead-ease)
}
.links-l{justify-content:flex-end;--links-x:-60px}
.links-r{justify-content:flex-start;--links-x:60px}
.masthead.scrolled nav.links{--links-scale:.94}
nav.links a{white-space:nowrap}
.links-l{padding-right:8px}
.links-r{padding-left:8px}
nav.links a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:3px;
  height:2px;
  background:var(--gold,#c79a4e);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .36s var(--masthead-ease)
}
nav.links a{
  position:relative;
  color:#d6cebb;
  padding:6px 0
}
nav.links a:hover::after,
nav.links a[aria-current]::after{transform:scaleX(1)}
nav.links a[aria-current]{color:#fff}

.crest{
  position:absolute;
  left:50%;
  top:var(--crest-top);
  transform:
    translateX(-50%)
    translateY(var(--crest-shift))
    scale(var(--crest-scale));
  transform-origin:50% 0;
  z-index:5;
  line-height:0;
  display:block;
  transition:transform var(--masthead-duration) var(--masthead-ease);
  will-change:transform;
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased
}
.crest .mark{
  height:140px;
  width:auto;
  max-width:none;
  display:block;
  position:relative;
  z-index:3
}
.crest::before{
  content:none
}
.crest::after{
  content:none
}
.crest .halo{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  height:173px;
  width:auto;
  max-width:none;
  z-index:2
}
.ic{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#d6cebb;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:600
}
.ic svg{width:18px;height:18px}
.badge{
  background:var(--red,#a5322c);
  color:#fff;
  font-size:10px;
  font-weight:800;
  border-radius:20px;
  padding:1px 6px
}
.burger{
  position:relative;
  z-index:1;
  display:none;
  width:50px;
  height:50px;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  color:#fff;
  padding:0;
  cursor:pointer
}
.mobile-actions{display:none}
.mobile-menu,
.home-mobile-menu{
  position:fixed;
  inset:0;
  z-index:99;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:18px;
  background:var(--navy-deep,var(--navy-2,#0f1830));
  color:#fff;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .3s ease,visibility .3s
}
.mobile-menu.open,
.home-mobile-menu.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto
}
.mobile-menu a,
.home-mobile-menu a{
  font-family:var(--display,var(--fs-display,Georgia,serif));
  font-size:clamp(30px,9vw,50px)
}
body.menu-open{overflow:hidden}

/*
 * Desktop compact mode uses one uniform ratio for the complete cigar band:
 * silhouette, keylines, navigation type, spacing, and crest. Scaling the
 * complete nav drawing also guarantees that its left and right halves remain
 * exact mirrors instead of receiving different horizontal/vertical treatment.
 */
@media(min-width:921px){
  .masthead.scrolled{
    --band-scale-x:1;
    --band-scale-y:1;
    --crest-shift:-10.2px;
    --crest-scale:.84
  }
  .masthead.scrolled header.nav{
    transform:translate3d(0,var(--band-shift),0) scale(.84)
  }
  .masthead.scrolled nav.links{--links-scale:1}
}

@media(max-width:920px){
  :root{
    --masthead-expanded:104px;
    --masthead-overlap:64px
  }
  html{scroll-padding-top:122px}
  .masthead{
    /* Mobile covers more distance than desktop; finish the return sooner. */
    --masthead-duration:155ms;
    --masthead-ease:cubic-bezier(.18,.82,.24,1);
    --rail-h:40px;
    --util-h:var(--rail-h);
    --band-h:64px;
    --band-w:calc(100vw - 68px);
    --band-scale-x:1;
    --band-scale-y:1;
    --band-step:10px;
    /* Band center: 40px rail + 20px shift + 32px half-height = 92px.
       Crest center: 53px top + (140px × .56 ÷ 2) = 92.2px. */
    --crest-top:53px;
    --crest-shift:0px;
    --crest-scale:.56
  }
  .masthead.scrolled{
    /* One compact ratio controls the mobile band, controls, and crest. */
    --masthead-duration:175ms;
    --util-h:var(--rail-h);
    --crest-top:53px;
    --band-shift:-10.52px;
    --band-scale-x:1;
    --band-scale-y:1;
    --crest-shift:-29.42px;
    --crest-scale:.4592
  }
  .masthead.scrolled header.nav{
    transform:translate3d(0,var(--band-shift),0) scale(.82)
  }
  .topbar{
    transition:
      transform 150ms var(--masthead-ease),
      opacity 95ms ease
  }
  .nav .wrap{
    width:var(--band-w);
    padding-inline:16px;
    display:flex;
    justify-content:space-between
  }
  .topbar .wrap{
    width:calc(100% - 20px);
    display:flex;
    justify-content:center;
    gap:0
  }
  .topbar .tb-info{grid-column:auto;justify-self:auto}
  .topbar .tb-info,
  .topbar .tb-util{
    display:flex;
    flex:0 0 auto;
    gap:0;
    font-size:11px;
    font-weight:500;
    line-height:1;
    letter-spacing:.01em
  }
  .topbar #openState{
    font-size:11px;
    font-weight:500;
    line-height:1;
    letter-spacing:.01em
  }
  .topbar .tb-util .ic{display:none}
  .topbar .tb-info>.tb-hh:not(.sep),
  .topbar .tb-util>.tb-lm{
    display:inline-flex;
    align-items:center;
    height:100%;
    margin:0;
    padding:0;
    font-size:0;
    white-space:nowrap
  }
  .topbar .tb-info>.tb-hh:not(.sep)::before,
  .topbar .tb-util>.tb-lm::before{
    content:"";
    flex:0 0 auto;
    width:3px;
    height:3px;
    margin:0 9px;
    border-radius:50%;
    background:var(--gold,#c59a46);
    opacity:.72
  }
  .topbar .tb-info>.tb-hh:not(.sep)::after{
    content:"Happy Hour 4–8";
    font-size:11px;
    font-weight:500;
    line-height:1;
    letter-spacing:.01em
  }
  .topbar .tb-util>.tb-lm::after{
    content:"Music Tue/Fri/Sat";
    font-size:11px;
    font-weight:500;
    line-height:1;
    letter-spacing:.01em
  }
  nav.links{display:none}
  .burger{display:inline-flex}
  .burger{
    width:44px;
    transition:transform var(--masthead-duration) var(--masthead-ease)
  }
  .mobile-actions{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:0;
    transform-origin:left center;
    transition:transform var(--masthead-duration) var(--masthead-ease)
  }
  .mobile-actions .ic{
    position:relative;
    width:44px;
    height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff
  }
  .mobile-actions .ic svg{width:19px;height:19px}
  .mobile-actions .ic>span:not(.badge){
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
  }
  .mobile-actions .badge{
    position:absolute;
    top:5px;
    right:0;
    min-width:15px;
    padding:0 4px;
    line-height:15px;
    text-align:center
  }
  .crest-slot{display:none}
  .crest{
    left:50%;
    bottom:auto;
    transform:
      translateX(-50%)
      translateY(var(--crest-shift))
      scale(var(--crest-scale))
  }
  .masthead .crest .mark,
  .masthead.scrolled .crest .mark{height:140px}
  /*
   * One controlled outer treatment: artwork, white keyline, then navy edge.
   * The halo is independent of the band, so expanded and collapsed states
   * retain the same crest silhouette.
   */
  .crest .halo{display:block}
  .masthead.scrolled .mobile-actions,
  .masthead.scrolled .burger{transform:none}
}

/*
 * Tablet is the desktop masthead scaled to the available band width—not a
 * separate mobile drawing. The crest and the band's center shoulders retain
 * the same proportions at every width in this range.
 */
@media(min-width:521px) and (max-width:920px){
  .masthead{
    /* Desktop ratio: 140px crest / 80px band, scaled to the 64px tablet band. */
    --crest-top:36px;
    --crest-scale:1
  }
  .masthead.scrolled{
    /* The whole tablet masthead contracts to the same 82% ratio. */
    --band-shift:8.76px;
    --crest-top:36px;
    --crest-shift:-6.92px;
    --crest-scale:.82
  }
  .masthead .crest .mark,
  .masthead.scrolled .crest .mark{
    height:112px
  }
  .masthead .crest .halo{
    height:138px
  }
}

/* Phones use the compact control band; tablets retain the desktop shoulders. */
@media(max-width:520px){
  .masthead.scrolled{
    /* .56 expanded crest × .82 compact ratio = .4592. */
    --band-shift:-10.52px;
    --crest-shift:-29.42px;
    --crest-scale:.4592
  }
  header.nav::before,
  header.nav::after,
  .nav .wrap::before{
    clip-path:polygon(
      0 22%,
      var(--band-step) 22%,
      var(--band-step) 14%,
      calc(100% - var(--band-step)) 14%,
      calc(100% - var(--band-step)) 22%,
      100% 22%,
      100% 78%,
      calc(100% - var(--band-step)) 78%,
      calc(100% - var(--band-step)) 86%,
      var(--band-step) 86%,
      var(--band-step) 78%,
      0 78%
    )
  }
}

@media(min-width:921px) and (max-width:1100px){
  .topbar .tb-info>.tb-hh:not(.sep){display:none}
}

@media(max-width:700px){
  .topbar .wrap{width:calc(100% - 14px);justify-content:center}
  .topbar .tb-info{justify-content:center}
  .topbar .tb-info>.sep{display:none}
  .topbar #openState{padding-left:0}
  .topbar .tb-util{display:flex}
}

@media(max-width:360px){
  .masthead{--band-w:calc(100vw - 32px)}
  .topbar #openState,
  .topbar .tb-info>.tb-hh:not(.sep)::after,
  .topbar .tb-util>.tb-lm::after{
    font-size:10px
  }
  .topbar .tb-info>.tb-hh:not(.sep)::before,
  .topbar .tb-util>.tb-lm::before{
    margin-inline:6px
  }
}

@media(prefers-reduced-motion:reduce){
  .masthead,
  .masthead *,
  .masthead *::before,
  .masthead *::after{transition:none!important}
}