@charset "UTF-8";

/* =====================================================
  MENU PAGE
===================================================== */

.bar-menu-page{
  background:var(--fb-bg);
  color:var(--fb-text);
}

/* =====================================================
  HERO
===================================================== */

.bar-menu-page__hero{
  padding:32px 0 18px;
  border-bottom:1px solid var(--fb-line-soft);
}

.bar-menu-page__head{
  max-width:760px;
}

.bar-menu-page__eyebrow{
  margin:0 0 6px;
  font-size:11px;
  letter-spacing:.14em;
  color:rgba(244,243,239,.72);
}

.bar-menu-page__title{
  margin:0;
  font-family:var(--fb-en);
  font-size:clamp(28px, 3vw, 36px);
  line-height:1.12;
  color:rgba(244,243,239,.92);
}

.bar-menu-page__lead{
  margin:10px 0 0;
  font-size:13px;
  line-height:1.8;
  color:var(--fb-muted);
}

/* =====================================================
  LAYOUT
===================================================== */

.bar-menu-page__content{
  padding:18px 0 60px;
}

.bar-menu-page__layout{
  display:grid;
  grid-template-columns:180px minmax(0, 1fr);
  gap:48px;
  align-items:start;
}

.bar-menu-page__side{
  position:sticky;
  top:88px;
  align-self:start;
}

/* =====================================================
  LEFT NAV
===================================================== */

.bar-menu-page__anchor{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:2px;
}

.bar-menu-page__anchor a{
  position:relative;
  display:inline-block;
  width:fit-content;
  padding:0 0 8px;
  font-family:var(--fb-en);
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(244,243,239,.58);
  text-decoration:none;
  transition:
    color .35s ease,
    opacity .35s ease;
}

.bar-menu-page__anchor a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:currentColor;
  opacity:.28;
  transform:scaleX(.28);
  transform-origin:left center;
  transition:
    transform .4s cubic-bezier(.22,.61,.36,1),
    opacity .35s ease;
}

/* =====================================================
  MAIN
===================================================== */

.bar-menu-page__main{
  min-width:0;
}

/* =====================================================
  SECTION
===================================================== */

.bar-menu-section{
  padding:0 0 48px;
}

.bar-menu-section + .bar-menu-section{
  padding-top:6px;
}

.bar-menu-section__head{
  margin:0 0 16px;
}

.bar-menu-section__kicker{
  margin:0 0 3px;
  font-size:10px;
  letter-spacing:.16em;
  color:rgba(244,243,239,.72);
}

.bar-menu-section__title{
  margin:0;
  font-family:var(--fb-en);
  font-size:clamp(22px, 2.2vw, 26px);
  line-height:1.16;
  letter-spacing:.03em;
  color:rgba(244,243,239,.96);
}

/* =====================================================
  MENU LIST
===================================================== */

.bar-menu-list{
  border-top:1px solid var(--fb-line-soft);
}

.bar-menu-list--two-col{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:34px;
}

.bar-menu-list__item{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:20px;
  align-items:start;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.bar-menu-list--two-col .bar-menu-list__item{
  min-width:0;
}

.bar-menu-list__item--no-price{
  grid-template-columns:1fr;
}

.bar-menu-list__name{
  font-size:15px;
  line-height:1.5;
  letter-spacing:.02em;
  color:rgba(244,243,239,.92);
}

.bar-menu-list__sub{
  margin-top:2px;
  font-size:10px;
  line-height:1.7;
  letter-spacing:.04em;
  color:rgba(244,243,239,.48);
}

.bar-menu-list__meta{
  margin-top:4px;
  font-size:10px;
  line-height:1.7;
  letter-spacing:.08em;
  color:rgba(244,243,239,.46);
}

.bar-menu-list__price{
  white-space:nowrap;
  font-family:var(--fb-en);
  font-size:12px;
  line-height:1.4;
  letter-spacing:.08em;
  color:rgba(244,243,239,.68);
  text-align:right;
  padding-top:2px;
}

/* =====================================================
  NOTE
===================================================== */

.bar-menu-note{
  margin-top:16px;
}

.bar-menu-note p{
  margin:0;
  font-size:10px;
  line-height:1.9;
  color:rgba(244,243,239,.46);
}

.bar-menu-note p + p{
  margin-top:2px;
}

/* =====================================================
  FEATURED
===================================================== */

.bar-menu-feature{
  border-top:1px solid var(--fb-line-soft);
}

.bar-menu-feature__item{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:20px;
  align-items:start;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.bar-menu-feature__label{
  font-family:var(--fb-en);
  font-size:15px;
  line-height:1.5;
  color:rgba(244,243,239,.92);
}

.bar-menu-feature__price{
  white-space:nowrap;
  font-family:var(--fb-en);
  font-size:12px;
  letter-spacing:.08em;
  color:rgba(244,243,239,.68);
}

/* =====================================================
  HOVER
===================================================== */

.bar-menu-page a{
  transition:
    color .35s ease,
    opacity .35s ease,
    transform .35s ease;
}

@media (hover:hover){

  .bar-menu-page a:hover{
    opacity:.82;
  }

  .bar-menu-page__anchor a:hover{
    color:rgba(244,243,239,.9);
    opacity:1;
  }

  .bar-menu-page__anchor a:hover::after{
    opacity:.72;
    transform:scaleX(.72);
  }
}

/* =====================================================
  RESPONSIVE
===================================================== */

@media (max-width:960px){

  .bar-menu-page__layout{
    grid-template-columns:1fr;
    gap:28px;
  }

  .bar-menu-page__side{
    position:static;
    top:auto;
  }

  .bar-menu-page__anchor{
    flex-direction:row;
    flex-wrap:wrap;
    gap:18px 24px;
    padding-top:0;
    padding-bottom:4px;
    border-bottom:1px solid var(--fb-line-soft);
  }

  .bar-menu-list--two-col{
    grid-template-columns:1fr;
    column-gap:0;
  }
}

@media (max-width:768px){

  .bar-menu-page__hero{
    padding:24px 0 14px;
  }

  .bar-menu-page__lead{
    font-size:12px;
    line-height:1.8;
  }

  .bar-menu-page__content{
    padding:14px 0 42px;
  }

  .bar-menu-page__anchor{
    gap:14px 18px;
  }

  .bar-menu-section{
    padding:0 0 42px;
  }

  .bar-menu-list__item,
  .bar-menu-feature__item{
    grid-template-columns:minmax(0, 1fr) auto;
    gap:12px;
    padding:12px 0;
  }

  .bar-menu-list__name,
  .bar-menu-feature__label{
    font-size:15px;
  }

  .bar-menu-list__sub{
    font-size:10px;
  }

  .bar-menu-list__price,
  .bar-menu-feature__price{
    font-size:12px;
  }
}