/* ═══════════════════════════════════════════════════════════════════════
   BON APPÉTIT — full menu page
   Loaded only by menu.html, on top of theme.css + style.css.
   Reads tokens only — never a raw colour — so it follows the active theme
   exactly like the rest of the site.
   ═══════════════════════════════════════════════════════════════════════ */

:root{ --navh:4.45rem; }

/* The homepage relies on scroll-padding of 5rem. The menu page also has a
   sticky category bar under the nav, so anchored sections need more. */
html{ scroll-padding-top:calc(var(--navh) + 4.4rem); }

/* ── page header ───────────────────────────────────────────────────── */
.mtop{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:calc(var(--navh) + clamp(2.5rem,6vw,4.5rem)) clamp(2rem,4vw,3rem);
  text-align:center;
}
.mtop::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--glow),linear-gradient(180deg,var(--bg-2),var(--bg));
}
.mtop .eyebrow{justify-content:center}
.mtop__lede{max-width:46ch;margin:1.1rem auto 0;color:var(--text-dim);font-size:clamp(1rem,1.4vw,1.1rem)}
.mtop__meta{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;
  margin-top:1.6rem;
}
.mtop__meta span{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .9rem;border:1px solid var(--line);border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--surface) 60%,transparent);
  font-size:.76rem;color:var(--text-mute);
}
.mtop__meta svg{color:var(--brand-2);flex:none}

/* ── list / printed-menu switch ────────────────────────────────────── */
.mswitch{
  display:inline-flex;gap:.25rem;margin-top:1.5rem;padding:.25rem;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--surface) 70%,transparent);
}
.mswitch__b{
  display:inline-flex;align-items:center;gap:.45rem;min-height:40px;
  padding:.5rem 1.05rem;border-radius:var(--r-pill);
  font-family:var(--f-sc);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-mute);transition:color var(--t-mid),background var(--t-mid);
}
.mswitch__b:hover{color:var(--text)}
.mswitch__b[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink)}
.mswitch__b[aria-pressed="true"] svg{opacity:.85}

/* ── the flipbook ──────────────────────────────────────────────────── */
/* base rules the engine needs, inlined so there is no second CDN request */
.stf__parent{position:relative;display:block;box-sizing:border-box;transform:translateZ(0);
             -ms-touch-action:pan-y;touch-action:pan-y}
.stf__parent canvas{position:absolute;width:100%;height:100%;left:0;top:0}
.stf__block{position:absolute;width:100%;height:100%;box-sizing:border-box;perspective:2000px}
.stf__item{display:none;position:absolute;transform-style:preserve-3d}
.stf__outerShadow,.stf__innerShadow,.stf__hardShadow,.stf__hardInnerShadow{position:absolute;left:0;top:0}

.mbook{padding-block:clamp(1.5rem,4vw,3rem) clamp(2.5rem,5vw,4rem)}
.mbook[hidden]{display:none}
.mbook__frame{
  display:flex;justify-content:center;
  padding:clamp(1rem,3vw,2.5rem) clamp(.5rem,2vw,2rem);
  border-radius:var(--r-lg);border:1px solid var(--line);
  background:radial-gradient(80% 90% at 50% 0%,color-mix(in srgb,var(--brand) 9%,transparent),transparent 70%),
             linear-gradient(180deg,var(--bg-2),var(--bg));
}
.mbook__stage{width:100%;max-width:1120px;margin-inline:auto}
/* the pages themselves — the engine positions these, we only style them */
.mbook__page{background:var(--surface);overflow:hidden}
.mbook__page img{width:100%;height:100%;object-fit:cover;display:block;user-select:none}
/* until the engine takes over, keep the raw pages out of the way */
.mbook:not(.is-ready):not(.mbook--plain) .mbook__stage{min-height:60vh}
.mbook:not(.is-ready):not(.mbook--plain) .mbook__page{display:none}
.mbook:not(.is-ready):not(.mbook--plain) .mbook__frame::after{
  content:"Opening the menu…";align-self:center;
  font-family:var(--f-sc);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-mute);
}

.mbook__bar{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.5rem}
.mbook__nav{
  width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-2);color:var(--text-dim);
  transition:color var(--t-mid),border-color var(--t-mid),background var(--t-mid);
}
.mbook__nav:hover{color:var(--brand-2);border-color:var(--brand);
                  background:color-mix(in srgb,var(--brand) 10%,transparent)}
.mbook__count{
  min-width:5rem;text-align:center;font-family:var(--f-display);font-size:1rem;
  color:var(--brand-2);font-variant-numeric:tabular-nums lining-nums;
}
.mbook__hint,.mbook__alt{
  text-align:center;font-size:.82rem;color:var(--text-mute);margin:.9rem auto 0;max-width:46ch;
}
.mbook__alt{font-size:.78rem;margin-top:.5rem}
.mbook__alt .linky{font-size:inherit}

/* fallback when the flip engine can't load — a plain gallery of the pages */
.mbook--plain .mbook__stage{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));
  gap:1rem;max-width:none;
}
.mbook--plain .mbook__page{
  display:block !important;position:static !important;width:auto !important;height:auto !important;
  border-radius:var(--r-md);border:1px solid var(--line);box-shadow:var(--shadow);
}
.mbook--plain .mbook__page img{height:auto;object-fit:contain}
.mbook--plain .mbook__bar{display:none}
.mbook--plain .mbook__frame{min-height:0}

/* in printed-menu view the list, its search and its category bar step aside */
body.is-book .mbar,
body.is-book #menuSections,
body.is-book #menuFound,
body.is-book #menuEmpty{display:none}

/* ── sticky category bar ───────────────────────────────────────────── */
.mbar{
  position:sticky;top:var(--navh);z-index:90;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border-block:1px solid var(--line);
}
.mbar__inner{
  max-width:var(--maxw);margin-inline:auto;padding:.6rem var(--gutter);
  display:flex;align-items:center;gap:.9rem;
}
.mbar__scroll{
  flex:1;min-width:0;display:flex;gap:.4rem;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 20px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 20px),transparent);
}
.mbar__scroll::-webkit-scrollbar{display:none}
.mbar__scroll a{
  flex:none;display:inline-flex;align-items:center;min-height:38px;
  padding:.4rem .85rem;border-radius:var(--r-pill);border:1px solid transparent;
  font-family:var(--f-sc);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-mute);white-space:nowrap;
  transition:color var(--t-mid),border-color var(--t-mid),background var(--t-mid);
}
.mbar__scroll a:hover{color:var(--text)}
.mbar__scroll a[aria-current="true"]{
  color:var(--brand-2);border-color:var(--brand);
  background:color-mix(in srgb,var(--brand) 12%,transparent);
}

/* filter box */
.mfind{position:relative;flex:none;width:min(15rem,38vw)}
.mfind input{
  width:100%;min-height:38px;padding:.4rem .8rem .4rem 2.1rem;font-size:.85rem;
  border-radius:var(--r-pill);
}
.mfind svg{
  position:absolute;left:.7rem;top:50%;transform:translateY(-50%);
  color:var(--text-mute);pointer-events:none;
}
.mfind__x{
  position:absolute;right:.35rem;top:50%;transform:translateY(-50%);
  width:26px;height:26px;display:none;place-items:center;border-radius:50%;
  color:var(--text-mute);
}
.mfind__x:hover{color:var(--text);background:var(--surface-2)}
.mfind.has-value .mfind__x{display:grid}

/* ── sections ──────────────────────────────────────────────────────── */
.msec{padding-block:clamp(2.6rem,5vw,4rem);border-bottom:1px solid var(--line)}
.msec:last-of-type{border-bottom:0}
.msec:nth-of-type(even){background:var(--bg-2)}
.msec__head{text-align:center;margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
.msec__head h2{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.7rem,3.6vw,2.7rem);letter-spacing:-.02em;
}
.msec__rule{
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  margin:.85rem auto 0;max-width:16rem;color:var(--brand-2);
}
.msec__rule::before,.msec__rule::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2),transparent);
}
.msec__kicker{margin:.9rem 0 0;font-size:.87rem;color:var(--text-mute)}
.msec__note{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;
  padding:.35rem .8rem;border:1px dashed var(--line-2);border-radius:var(--r-pill);
  font-family:var(--f-sc);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand-2);
}

/* ── detailed items ────────────────────────────────────────────────── */
.mlist{max-width:52rem;margin-inline:auto;display:grid;gap:.35rem}
.mrow{
  display:grid;grid-template-columns:1fr auto;column-gap:1rem;align-items:baseline;
  padding:.95rem 1rem;border-radius:var(--r-md);border:1px solid transparent;
  transition:background var(--t-mid),border-color var(--t-mid);
}
.mrow:hover{background:color-mix(in srgb,var(--surface) 55%,transparent);border-color:var(--line)}
/* baseline, not center: the dotted leader and the price must sit on the same
   line as the dish name, and `center` throws both off on multi-line names. */
.mrow__name{
  grid-column:1;margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;
  font-family:var(--f-display);font-size:clamp(1rem,1.5vw,1.16rem);font-weight:600;line-height:1.25;
}
/* dotted leader running from the end of the dish name to the price */
.mrow__name .mlead{
  flex:1;min-width:1.5rem;height:0;position:relative;top:-.26em;
  border-bottom:1px dotted var(--line-2);
}
.mrow__price{
  grid-column:2;grid-row:1;margin:0;justify-self:end;white-space:nowrap;
  font-family:var(--f-display);font-size:clamp(1rem,1.5vw,1.16rem);color:var(--brand-2);
  font-variant-numeric:tabular-nums lining-nums;
}
.mfrom{
  font-family:var(--f-sc);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-mute);
}
.mrow__desc{
  grid-column:1/-1;margin:.4rem 0 0;max-width:62ch;
  font-size:.87rem;line-height:1.65;color:var(--text-dim);
}
/* variants — one line each, dotted leader to the price */
.mrow__vars{grid-column:1/-1;margin:.6rem 0 0;display:grid;gap:.15rem}
.mrow__vars li{
  display:flex;align-items:baseline;gap:.5rem;
  font-size:.85rem;color:var(--text-dim);
}
.mrow__vars li span:first-child{flex:none;max-width:calc(100% - 5rem)}
.mrow__vars li i{
  flex:1;min-width:1.5rem;height:0;
  border-bottom:1px dotted var(--line-2);transform:translateY(-.22em);
}
.mrow__vars li b{
  flex:none;font-weight:600;color:var(--brand-2);
  font-variant-numeric:tabular-nums lining-nums;
}

/* ── compact items (drinks) ────────────────────────────────────────── */
.mgrid{
  max-width:52rem;margin-inline:auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:.15rem clamp(1.5rem,4vw,3.5rem);
}
.mcell{
  display:flex;align-items:baseline;gap:.6rem;
  padding:.7rem .3rem;border-bottom:1px solid var(--line);
}
.mcell__name{margin:0;font-size:.95rem;font-weight:500}
.mcell__name small{display:block;margin-top:.15rem;font-size:.76rem;color:var(--text-mute);font-weight:400}
.mcell i{flex:1;min-width:1rem;height:0;border-bottom:1px dotted var(--line-2);transform:translateY(-.22em)}
.mcell__price{
  margin:0;flex:none;font-family:var(--f-display);font-size:1rem;color:var(--brand-2);
  font-variant-numeric:tabular-nums lining-nums;
}

/* ── badges & marks ────────────────────────────────────────────────── */
.mbadge{
  flex:none;padding:.22rem .55rem;border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb,var(--brand) 45%,transparent);
  background:color-mix(in srgb,var(--brand) 14%,transparent);
  font-family:var(--f-sc);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand-2);white-space:nowrap;
}
.mchilli{flex:none;color:var(--accent)}

/* ── empty state ───────────────────────────────────────────────────── */
.mempty{
  display:none;max-width:34rem;margin:0 auto;padding:clamp(2rem,5vw,3.5rem) 1rem;
  text-align:center;color:var(--text-mute);
}
.mempty svg{margin:0 auto 1rem;color:var(--brand-2);opacity:.6}
.mempty p{font-size:.92rem}
body.is-filtering .msec{background:none;border-bottom:0;padding-block:clamp(1rem,2vw,1.5rem)}
body.is-filtering .msec__kicker,body.is-filtering .msec__note{display:none}
body.is-filtering .msec[hidden]{display:none}
.mfound{display:none;text-align:center;font-size:.8rem;color:var(--text-mute);padding-top:1.5rem}
body.is-filtering .mfound{display:block}

/* ── closing note ──────────────────────────────────────────────────── */
.mfoot{
  padding-block:clamp(2.5rem,5vw,4rem);text-align:center;
  background:var(--bg-2);border-top:1px solid var(--line);
}
.mfoot__note{max-width:40rem;margin:0 auto 1.6rem;font-size:.87rem;color:var(--text-mute);line-height:1.7}
.mfoot__cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

/* ── responsive ────────────────────────────────────────────────────── */
@media (max-width:720px){
  .mbar__inner{flex-direction:column;align-items:stretch;gap:.5rem;padding-inline:.75rem}
  .mfind{width:100%;order:-1}
  .mrow{padding:.85rem .5rem}
  .mrow__vars li span:first-child{max-width:calc(100% - 4.5rem)}
  .mgrid{gap:0}
}

/* ── print — the page doubles as a printable menu ──────────────────── */
@media print{
  .mbar,.mfind,.mtop__meta,.mfoot__cta{display:none !important}
  /* always print the readable list, whichever view is on screen */
  .mbook,.mswitch{display:none !important}
  body.is-book #menuSections{display:block !important}
  .msec{break-inside:auto;border-bottom:0;padding-block:1rem}
  .msec:nth-of-type(even){background:none}
  .mrow{break-inside:avoid;padding:.4rem 0}
  .mcell{break-inside:avoid}
  .mtop{padding-top:0}
}