/* The menu page. Its own file so the landing page pays nothing for it.
   Built picture-first on purpose: people here pick the drink they can see,
   so the photograph is the row and the name sits under it, not beside it. */

.menu-body{ background:var(--board); color:var(--sun) }

.mbar{
  position:sticky; top:0; z-index:60;
  background:rgba(10,10,9,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(228,226,216,.14);
  display:flex; align-items:center; gap:clamp(14px,3vw,36px);
  padding:12px var(--gut);
}
.mbar-back{
  flex:0 0 auto; text-decoration:none; color:var(--sun);
  font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.3em;
}
.mbar-jump{
  display:flex; gap:clamp(12px,2.4vw,30px);
  overflow-x:auto; scrollbar-width:none; margin-left:auto;
}
.mbar-jump::-webkit-scrollbar{ display:none }
.mbar-jump a{
  flex:0 0 auto; text-decoration:none; white-space:nowrap;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(228,226,216,.62); padding:6px 0;
  border-bottom:1px solid transparent; transition:color .2s ease;
}
.mbar-jump a:hover{ color:var(--sun) }
.mbar-jump a.is-here{ color:var(--gold); border-bottom-color:var(--gold) }

.mwrap{ padding:0 var(--gut) clamp(40px,7vw,90px) }

.mtitle{ padding:clamp(40px,7vw,96px) 0 clamp(26px,4vw,48px) }
.mtitle h1{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(46px,11vw,132px); line-height:.9; letter-spacing:-.01em;
}
.mtitle-sub{
  margin:14px 0 0; font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold);
}

/* The bar is the one thing borrowed from the reference: a category announces
   itself across the full width before its drinks start. */
.mcat{ scroll-margin-top:66px; padding-top:clamp(22px,3.5vw,44px) }
.mcat-bar{
  display:flex; align-items:baseline; gap:14px;
  border-top:1px solid rgba(228,226,216,.22);
  padding-top:14px; margin-bottom:clamp(18px,3vw,30px);
}
.mcat-bar h2{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,4.6vw,52px); line-height:1;
}
.mcat-bar span{
  margin-left:auto; font-size:10px; letter-spacing:.24em;
  color:var(--gold); opacity:.85;
}

.mgrid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(12px,2vw,26px);
}
.mcard{ display:flex; flex-direction:column; min-width:0 }
.mcard img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  background:#fff; display:block;
}
/* Stands where a photograph of that exact drink does not exist yet. Showing a
   different drink would misread as the thing being ordered, which on a menu
   people read by picture is worse than showing nothing. */
.mcard-wait{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; width:100%; aspect-ratio:4/5; padding:14px; text-align:center;
  background:linear-gradient(155deg,#141311,#0C0C0B);
  border:1px dashed rgba(217,160,60,.5);
}
.mcard-wait-l{
  font-family:var(--sans); font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(228,226,216,.46);
}
.mcard-wait-n{
  font-family:var(--serif); font-size:clamp(13px,1.5vw,17px);
  line-height:1.2; color:var(--gold);
}
.mcard-t{
  display:flex; align-items:baseline; gap:10px;
  padding:11px 2px 0;
}
.mcard-t h3{
  margin:0; flex:1 1 auto; min-width:0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(14px,1.5vw,18px); line-height:1.25;
}
.mcard-t b{
  flex:0 0 auto; font-family:var(--serif); font-weight:400;
  font-size:clamp(14px,1.5vw,18px); font-variant-numeric:tabular-nums;
  color:var(--gold);
}
.mcard-t i{ font-style:normal; font-size:.62em; vertical-align:.62em; margin-left:1px }

.mend{
  margin-top:clamp(40px,7vw,90px); padding-top:clamp(24px,4vw,40px);
  border-top:1px solid rgba(228,226,216,.22);
  display:flex; flex-wrap:wrap; align-items:center; gap:18px;
}
.mend p{ margin:0; font-size:12px; letter-spacing:.14em; color:rgba(228,226,216,.66) }
.mend-cta{
  margin-left:auto; text-decoration:none;
  background:var(--gold); color:#14100E;
  padding:13px 24px; font-size:11px; letter-spacing:.24em; text-transform:uppercase;
}
.mend-cta:hover{ background:#E6B252 }

/* Sits on top of the scroll rather than at the end of it: the reader decides
   while looking at the drinks, so the invitation has to still be there then. */
.mfoot{
  position:fixed; left:0; right:0; bottom:0; z-index:1800;
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom));
  background:rgba(10,10,9,.93); backdrop-filter:blur(10px);
  border-top:1px solid rgba(217,160,60,.3);
}
.mfoot-go{
  border-bottom:0; padding:12px 22px;
  background:var(--gold); color:#14100E;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  text-align:center;
}
.mfoot-go:hover{ background:#E6B252; color:#14100E }
.mfoot-mine{ margin:0 }
/* The bar would otherwise cover the last row of drinks. */
.menu-body .foot{ padding-bottom:calc(90px + env(safe-area-inset-bottom)) }

.menu-body .foot{ border-top-color:rgba(228,226,216,.16); color:rgba(228,226,216,.55) }
.menu-body .foot-mark{ color:var(--sun) }

@media (min-width:620px){ .mgrid{ grid-template-columns:repeat(3,1fr) } }
@media (min-width:900px){ .mgrid{ grid-template-columns:repeat(4,1fr) } }
@media (min-width:1280px){ .mgrid{ grid-template-columns:repeat(5,1fr) } }

@media (max-width:420px){
  .mbar{ gap:10px; padding:10px var(--gut) }
  .mbar-back{ font-size:11px; letter-spacing:.22em }
  .mgrid{ gap:10px }
}

@media (prefers-reduced-motion:reduce){
  .mbar-jump a{ transition:none }
}