/* ============================================================
   MENU — the full bill of fare on its own page.

   The section, category and item styles all come from style.css,
   where the homepage menu section already defines them. This file
   only adds what a standalone page needs: room under the fixed
   header, the lede, the dietary key, and the closing notes.
   ============================================================ */

/* style.css tops the section out at clamp(70px,11vh,130px), which is right
   for a section mid-scroll but slides under the fixed header when the menu
   is the first thing on the page. Match the events page instead. */
.menu--page{ padding-top:clamp(120px,16vh,180px); }

/* The lede is the one paragraph on these pages that people actually need to
   read rather than admire: it carries the service times. It used to be set in
   Cormorant italic at --burnt-ink, which clears AA on paper at 5.46:1 but
   reads far worse than the number suggests. Cormorant is a high-contrast
   old-style serif with a small x-height and thin strokes, and three lines of
   it in italic is hard work for exactly the diners most likely to be checking
   when happy hour starts.

   Body face, roman, darker ink: 13:1, and a noticeably larger effective size
   at a similar point size, because Archivo's x-height is far taller. The
   serif voice stays where it costs nothing: the eyebrow above and the display
   title. The times themselves are bolded rather than coloured, so the most
   looked-up fact on the page is also the highest contrast thing in it. */
.menu__lede{
  font-family:var(--body);
  font-size:clamp(1.125rem,1.7vw,1.3rem); line-height:1.65;
  color:rgba(42,29,18,.88); max-width:54ch; margin:1.1rem 0 0;
  /* Three lines capped at 54ch wrap badly on their own: the happy hour
     lede left "Craft" stranded at the end of line one at every width wide
     enough to hit the cap, and the menu lede dropped "does." onto a line
     by itself below it. Balance evens the line lengths instead of filling
     greedily. It is a no-op where unsupported, so nothing regresses. */
  text-wrap:balance;
}
.menu__lede strong{ font-weight:700; color:rgb(42,29,18); }

/* ---- dietary key ----------------------------------------------------------
   The homepage prints bare V / GF chips with nothing to decode them. On a page
   people arrive at from a search for "gluten free persian palm springs", the
   key has to be legible before the list starts. */
.menu__keytitle{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:var(--fs-2xs); color:var(--burnt-ink);
  margin:2.2rem 0 .7rem;
}
.menu__key{ display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; margin:0; }
.menu__keyrow{ display:flex; align-items:center; gap:.5rem; }
.menu__keyrow dt{ margin:0; }
.menu__keyrow dd{
  margin:0; font-size:var(--fs-2xs); letter-spacing:.04em;
  text-transform:uppercase; color:rgba(42,29,18,.72);
}
/* The key repeats the chip styling, so keep its margin from .tags off. */
.menu__key .tag{ margin:0; }

.menu__allergen{
  font-size:var(--fs-sm); color:rgba(42,29,18,.78);
  max-width:58ch; margin:1.1rem 0 0;
}

/* ---- closing notes ---- */
.menu__foot{
  max-width:var(--maxw); margin:clamp(56px,8vh,96px) auto 0;
  padding-top:clamp(32px,5vh,52px);
  border-top:2px solid rgba(42,29,18,.2);
  display:grid; gap:clamp(28px,4vw,48px);
  grid-template-columns:1fr;
}
@media(min-width:820px){ .menu__foot{ grid-template-columns:1fr 1fr; } }

.menu__note h2{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:var(--fs-lg); color:var(--burnt-ink); margin:0 0 .5rem;
}
.menu__note p{ font-size:var(--fs-base); color:rgba(42,29,18,.82); max-width:52ch; margin:0; }
.menu__note a{ color:var(--burnt-ink); text-decoration:underline; text-underline-offset:3px; }
.menu__note a:hover{ text-decoration-thickness:2px; }

.menu__cta{
  display:flex; flex-wrap:wrap; gap:.8rem; align-items:center;
}
@media(min-width:820px){ .menu__cta{ grid-column:1 / -1; } }

/* ---- header over a light page ---------------------------------------------
   .site-head is transparent until it picks up .is-stuck on scroll, which works
   on every other page because each one opens on the dark hero or a night
   section. This page opens on sand, so the sand-coloured nav links sat
   invisible on a sand background until the first scroll. Carry the stuck
   treatment from the start here; the padding shrink still happens on scroll. */
.page--light .site-head{
  background:rgba(22,15,38,.72);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(241,228,208,.08);
}

/* ---------- Signature cocktail photographs ------------------
   The happy hour menu prices "Signature Cocktails" as one line, so the
   pictures do the describing the list does not. They sit inside the drinks
   group rather than above the menu: they illustrate that one item.

   Every shot is lit on black, so each frame carries its own dark ground
   rather than floating cut-out on the sand page. */
.pours__title{
  margin:1.6rem 0 .9rem;
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:var(--fs-2xs); color:var(--burnt-ink);
}
.pours{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,1.6vw,18px);
}
@media(min-width:700px){ .pours{ grid-template-columns:repeat(4,1fr); } }
.pour{ margin:0; }
.pour img{
  display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover;
  border-radius:14px; background:#0d0819;
}
.pour figcaption{
  margin-top:.5rem;
  font-family:var(--body); font-size:var(--fs-2xs); line-height:1.35;
  color:rgba(42,29,18,.88);
}