/* ==========================================================================
   IT'S HIM — THE MENU  ("The House Menu")
   A calm, readable menu page. The MENUS are the focus: each is a clean white
   card with soft rounded edges + a warm shadow, sat on the shared dark ambient
   (flowing smoke + amber edge lighting) used across the site. A FEW moody,
   feathered photos frame each section as atmosphere only — never crowding the
   menus. Layered on top of styles.css (palette, type system, nav, footer) and
   the reusable ambient background (ambient.css / ambient.js).

   Type system is identical to the other pages:
   THE·[script]·CAP :  .t-the / .t-cap = Italiana caps · .t-script = Parisienne
   ========================================================================== */

.menu-page { background: var(--bg); }

/* ---- Shared small tracked label above titles (matches the other pages) ---- */
.eyebrow {
  margin: 0 0 clamp(10px, 1.6vh, 18px);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  padding-left: 0.42em;
}

/* ==========================================================================
   Shared type — same faces / lockup as the homepage / membership / events.
   ========================================================================== */
.mn-name {
  margin: 0;
  font-family: var(--font-caps);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 66px);
  line-height: 0.98;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: 0 6px 38px rgba(0,0,0,0.95), 0 2px 10px rgba(0,0,0,0.8);
}
.mn-name .t-the, .mn-name .t-cap {
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mn-name .t-script {
  font-family: var(--font-script);
  font-size: 1.5em;
  text-transform: none;
  letter-spacing: 0.005em;
  padding: 0 0.06em;
  color: var(--ink);
}
.mn-slogan {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2.9vw, 34px);
  line-height: 1.05;
  color: var(--gold-bright);
  text-shadow: 0 2px 30px rgba(0,0,0,0.85);
}
.mn-desc {
  margin: 0;
  max-width: 44ch;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.78;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-shadow: 0 1px 26px rgba(0,0,0,0.9);
}
/* Section marker line ("The Bar", "The Kitchen", "By Day") */
.mn-section-id {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  text-shadow: 0 1px 16px rgba(0,0,0,0.85);
}
.mn-rule {
  display: block;
  width: clamp(120px, 22vw, 240px);
  height: 1px;
  margin: clamp(6px, 1vh, 12px) auto;
  background: rgba(199,154,84,0.42);
}

/* ==========================================================================
   The page container — sits above the fixed ambient background.
   ========================================================================== */
.menu { position: relative; z-index: 5; }

/* ==========================================================================
   HERO — a centred opening moment over the ambient (no hero photo; the menus
   carry the page). Bookends with the closing note at the bottom.
   ========================================================================== */
.mn-hero {
  position: relative;
  min-height: 82vh;
  min-height: 82svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(120px, 18vh, 190px) clamp(28px, 8vw, 128px) clamp(40px, 8vh, 90px);
  overflow: clip;
}
.mn-hero__inner {
  position: relative;
  z-index: 3;
  max-width: min(94vw, 780px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(14px, 2vh, 24px);
}
.mn-hero__inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -30% -26%;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(14,9,8,0.72) 0%, rgba(14,9,8,0.42) 48%, var(--bg-0) 78%);
}
.mn-hero__inner .eyebrow { font-size: clamp(13px, 1.4vw, 16px); padding-left: 0; }
.mn-title {
  margin: 0;
  font-family: var(--font-caps);
  /* NOTE: Italiana (caps) and Parisienne (script) are single-weight (400-only)
     Google fonts — they render identically at every font-weight, so the hero
     title cannot be thinned via font-weight. Left at its original weight.
     A genuinely thinner title would require a different (thinner) display face. */
  font-weight: 400;
  font-size: clamp(46px, 8vw, 112px);
  line-height: 0.92;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: 0 6px 44px rgba(0,0,0,0.95);
}
.mn-title .t-the, .mn-title .t-cap {
  font-family: var(--font-caps); text-transform: uppercase; letter-spacing: 0.05em;
}
.mn-title .t-script {
  font-family: var(--font-script); font-size: 1.36em; text-transform: none; padding: 0 0.04em;
  color: var(--ink);
}
.mn-hero__slogan { font-size: clamp(22px, 3.2vw, 40px); }
.mn-hero__intro { max-width: 48ch; }

/* scroll cue — "The Menu" */
.mn-cue {
  margin-top: clamp(10px, 2vh, 22px);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.mn-cue > span:first-child {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 0.42em;
  transition: color 240ms ease;
}
.mn-cue:hover > span:first-child { color: var(--gold-bright); }
.mn-cue__line {
  position: relative;
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, var(--muted), var(--bg-0));
  opacity: 0.5; overflow: hidden;
}
.mn-cue__dot {
  position: absolute; top: 0; left: -1.5px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold-bright);
  animation: mn-cueFall 2.4s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes mn-cueFall {
  0% { transform: translateY(-6px); opacity: 0; }
  30% { opacity: 1; } 80% { opacity: 1; }
  100% { transform: translateY(46px); opacity: 0; }
}

/* ==========================================================================
   SECTIONS — a centred heading, then the menu card(s) for that menu grouped as
   one clean set. Each section is a positioning context for its atmosphere
   photos (which are feathered and pushed to the edges, behind the cards).
   ========================================================================== */
.mn-section {
  position: relative;
  overflow: clip;
  padding: clamp(56px, 9vh, 120px) clamp(24px, 6vw, 110px) clamp(64px, 10vh, 130px);
}

/* Centred heading block, with a soft legibility scrim so it reads cleanly even
   where an atmosphere photo drifts behind it. */
.mn-head {
  position: relative;
  z-index: 3;
  max-width: min(94vw, 640px);
  margin: 0 auto clamp(34px, 5vh, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(8px, 1.4vh, 16px);
}
.mn-head::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -60% -40%;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(14,9,8,0.78) 0%, rgba(14,9,8,0.42) 50%, var(--bg-0) 78%);
}

/* ---- Menu cards: a clean, consistent, aligned set. Every card is the SAME
   display width across every section so the menus line up within and across
   sections; each image keeps its own aspect ratio (width:100% + height:auto),
   so different original sizes never look ragged. The white menu background is
   kept (the text needs the contrast) and matted on a soft rounded card with a
   warm shadow so it sits elegantly on the dark room rather than as a harsh
   white rectangle. ---- */
.mn-cards {
  position: relative;
  /* Above the heading's feathered scrim (.mn-head is z-index:3) so the scrim,
     which extends downward past the heading, never overlaps the menu cards. */
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(20px, 2.6vw, 40px);
}
.mn-card {
  margin: 0;
  width: var(--card-w, clamp(280px, 30vw, 384px));
  padding: clamp(8px, 0.7vw, 12px);
  background: #fbf8f2;                 /* warm off-white mat — keeps menu text legible */
  border-radius: 12px;
  border: 1px solid rgba(199,154,84,0.28);
  box-shadow:
    0 30px 70px rgba(0,0,0,0.62),
    0 8px 22px rgba(0,0,0,0.5),
    0 0 0 1px rgba(0,0,0,0.35);
  line-height: 0;
  transition: transform 420ms cubic-bezier(0.16,0.84,0.24,1), box-shadow 420ms ease;
}
.mn-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.mn-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 42px 90px rgba(0,0,0,0.66),
    0 12px 28px rgba(0,0,0,0.52),
    0 0 0 1px rgba(199,154,84,0.4);
}
/* The single food card reads a touch larger since it stands alone. */
.mn-cards--single .mn-card { --card-w: clamp(300px, 34vw, 430px); }

/* ==========================================================================
   ATMOSPHERE — a FEW moody photos, feathered softly into the dark so they have
   no hard edges and never compete with the menus. Pushed toward the section
   edges and sat BEHIND the cards (low z-index). Restrained on purpose.
   ========================================================================== */
.mn-atmo {
  position: absolute;
  z-index: 1;
  margin: 0;
  line-height: 0;
  pointer-events: none;
}
.mn-atmo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) saturate(1.04) contrast(1.06);
  /* Feather every side to nothing — a soft ellipse core + long linear edge fades,
     so the photo dissolves into the ambient with no rectangle anywhere. */
  -webkit-mask-image:
    radial-gradient(66% 62% at 50% 48%, #000 30%, rgba(0,0,0,0.35) 62%, transparent 88%),
    linear-gradient(to right,  transparent 0%, #000 24%, #000 76%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(66% 62% at 50% 48%, #000 30%, rgba(0,0,0,0.35) 62%, transparent 88%),
    linear-gradient(to right,  transparent 0%, #000 24%, #000 76%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-composite: intersect;
}

/* Cocktails — one drink drifting in high-right (behind the heading), one low-left
   below the cards. Both kept out in the margins so the trio of cards stays clear. */
.mn-atmo--cocktail-a {
  top: clamp(-40px, -3vw, 0px); right: -6vw;
  width: clamp(300px, 34vw, 520px); height: clamp(380px, 42vw, 660px);
}
.mn-atmo--cocktail-b {
  bottom: -6vw; left: -7vw;
  width: clamp(280px, 30vw, 460px); height: clamp(360px, 38vw, 600px);
}
/* Kitchen — a plated dish easing in top-left + a second dish bottom-right, so the
   two sit DIAGONALLY and balance the section like the cocktail pair does. */
.mn-atmo--food {
  top: 8%; left: -8vw;
  width: clamp(320px, 36vw, 560px); height: clamp(400px, 44vw, 700px);
}
.mn-atmo--food-b {
  bottom: -6vw; right: -8vw;
  width: clamp(280px, 30vw, 470px); height: clamp(360px, 38vw, 600px);
}
/* Coffee — a warm cup photo top-right + a second coffee photo bottom-left, placed
   DIAGONALLY to balance the section (mirrors the cocktail pair). */
.mn-atmo--coffee {
  top: 4%; right: -8vw;
  width: clamp(320px, 36vw, 560px); height: clamp(400px, 44vw, 700px);
}
.mn-atmo--coffee-b {
  bottom: -6vw; left: -8vw;
  width: clamp(280px, 30vw, 470px); height: clamp(360px, 38vw, 600px);
}

/* Closing address note under the last menu (bookends the hero). */
.mn-close-note {
  position: relative;
  z-index: 3;
  margin: clamp(48px, 8vh, 96px) 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.64;
}

/* ==========================================================================
   Scroll-driven entrances — same technique as the other pages. Content surfaces
   gently out of the ambient as it enters. Pure CSS (animation-timeline: view()).
   ========================================================================== */
@keyframes mn-rise {
  0%   { opacity: 0; transform: translateY(46px); filter: blur(5px); animation-timing-function: cubic-bezier(0.16,0.84,0.24,1); }
  26%  { opacity: 1; transform: translateY(0);     filter: blur(0); }
  84%  { opacity: 1; transform: translateY(0);     filter: blur(0); animation-timing-function: cubic-bezier(0.6,0,0.85,0.35); }
  100% { opacity: 0; transform: translateY(-26px); filter: blur(3px); }
}
@keyframes mn-reveal-up {
  from { opacity: 0; transform: translateY(34px); filter: blur(5px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes mn-reveal-card {
  from { opacity: 0; transform: translateY(30px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mn-hero__inner { animation: mn-rise both; animation-timeline: view(); animation-range: cover; }
    .mn-head  { animation: mn-reveal-up both; animation-timeline: view(); animation-range: entry 2% cover 22%; }
    .mn-cards { animation: mn-reveal-card both; animation-timeline: view(); animation-range: entry 4% cover 26%; }
  }
}

/* ==========================================================================
   Responsive — the layout is already a centred, wrapping column, so it holds
   down to mobile. Below 900px the atmosphere photos are dialled back so they
   never sit under the menu text, and the cards go one-per-row.
   ========================================================================== */
@media (max-width: 900px) {
  .mn-title { white-space: normal; font-size: clamp(44px, 14vw, 84px); line-height: 1; }
  .mn-name { white-space: normal; font-size: clamp(32px, 9vw, 52px); line-height: 1.06; }

  .mn-cards { gap: clamp(28px, 6vh, 44px); }
  /* Larger cards + tap-to-read: the menus are full pages of small print, so on a
     phone we both enlarge the card and let a tap open it full-screen (menu-zoom.js). */
  .mn-card { --card-w: min(94vw, 500px) !important; cursor: zoom-in; position: relative; }
  .mn-card::after {
    content: "";
    position: absolute;
    right: 14px; bottom: 14px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 50%, transparent 0 6px, var(--bg) 6px 8px, transparent 8px),
      rgba(14, 9, 8, 0.72);
    border: 1px solid rgba(230, 192, 121, 0.7);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
    pointer-events: none;
  }
  .mn-card::before {
    content: "";
    position: absolute;
    right: 20px; bottom: 17px;
    width: 8px; height: 1.5px;
    background: var(--gold-bright);
    transform: rotate(45deg);
    transform-origin: right center;
    border-radius: 2px;
    z-index: 1;
    pointer-events: none;
  }

  /* Keep only a whisper of atmosphere on small screens — smaller + dimmer. */
  .mn-atmo { opacity: 0.5; }
  .mn-atmo--cocktail-a { width: 62vw; height: 46vh; right: -22vw; }
  .mn-atmo--cocktail-b { width: 60vw; height: 42vh; left: -24vw; }
  .mn-atmo--food  { width: 66vw; height: 46vh; left: -26vw; top: 4%; }
  .mn-atmo--food-b { width: 60vw; height: 42vh; right: -26vw; bottom: 2%; }
  .mn-atmo--coffee { width: 66vw; height: 46vh; right: -26vw; top: 3%; }
  .mn-atmo--coffee-b { width: 60vw; height: 42vh; left: -26vw; bottom: 2%; }
}

@media (prefers-reduced-motion: reduce) {
  .mn-cue__dot { animation: none; }
}

/* ==========================================================================
   TAP-TO-READ LIGHTBOX (mobile) — tapping a menu card opens it full-screen in a
   pannable, enlarged view so the small menu print is actually readable on a
   phone. Driven by menu-zoom.js; dark scrim in the site's key. Desktop is never
   triggered (the script gates on the mobile breakpoint).
   ========================================================================== */
.mz-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(199, 154, 84, 0.10) 0%, rgba(14, 9, 8, 0) 46%),
    rgba(11, 7, 6, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}
.mz-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 300ms ease, visibility 0s;
}
.mz-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(60px, 12vh, 100px) 10px 40px;
}
.mz-img {
  display: block;
  width: min(200vw, 900px);            /* ~2× the on-screen card — big enough to read */
  max-width: none;
  height: auto;
  background: #fbf8f2;
  padding: 6px;
  border-radius: 6px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}
.mz-close {
  position: fixed;
  top: 12px; right: 12px;
  width: 46px; height: 46px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.mz-close span {
  position: absolute;
  left: 11px; right: 11px; top: 22px;
  height: 1.5px;
  background: var(--gold-bright, #E6C079);
  border-radius: 2px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.mz-close span:nth-child(1) { transform: rotate(45deg); }
.mz-close span:nth-child(2) { transform: rotate(-45deg); }
body.mz-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mz-overlay { transition: opacity 1ms linear, visibility 0s; }
}