/* SOLUNA XII — menu overlay (Comadre-style). Owned by menu.js; every selector is scoped to .slm. */
.slm {
  --slm-bg: #C75A28;
  --slm-ink: #2B1A10;
  --slm-paper: #F7F1E6;
  --slm-text: #4B4436;
  --slm-soft: #6B4A2F;
  --slm-accent: #C75A28;
  --slm-deep: #9E3A16;
  --slm-cw: min(600px, calc(100vw - 32px));
  --slm-top: 78px;
  --slm-bot: 66px;
  --slm-ease: cubic-bezier(.65, 0, .35, 1);
  --slm-out: cubic-bezier(.22, .61, .36, 1);
  position: fixed;
  inset: var(--frame, 0px);
  z-index: 90;
  overflow: hidden;
  color: var(--slm-text);
  -webkit-tap-highlight-color: transparent;
  contain: layout paint style;
}
.slm[hidden] { display: none !important; }
.slm[data-kind="drinks"] { --slm-bg: #9E3A16; --slm-ink: #F6EAD6; }
.slm *, .slm *::before, .slm *::after { box-sizing: border-box; }

/* ---------- backdrop: terracotta + paper grain + soft vignette ---------- */
.slm-bg {
  position: absolute; inset: 0;
  background-color: var(--slm-bg);
  transition: background-color 900ms var(--slm-ease);
}
.slm-bg::before {
  content: ""; position: absolute; inset: 0;
  background: url("assets/paper.webp") repeat;
  background-size: 220px 220px;
  mix-blend-mode: multiply;
  opacity: .55;
}
.slm-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 46%, rgba(255, 236, 214, .10), rgba(255, 236, 214, 0) 70%),
    radial-gradient(ellipse 120% 100% at 50% 50%, rgba(40, 10, 0, 0) 55%, rgba(40, 10, 0, .2) 100%);
  pointer-events: none;
}

/* ---------- engraved illustrations ---------- */
/* .slm-clip (around the traveler) never moves: on wide screens menu.js masks him out just past the card edge */
.slm-clip { position: absolute; inset: 0; pointer-events: none; }
.slm-art { position: absolute; inset: 0; pointer-events: none; }
.slm-art-in { position: absolute; inset: 0; will-change: transform; }
.slm.is-phone .slm-art-in { will-change: auto; }
.slm-fig {
  position: absolute; display: block; max-width: none; height: auto;
  user-select: none; -webkit-user-drag: none;
  opacity: 0;
  transition: opacity 900ms var(--slm-ease), transform 1100ms var(--slm-out);
}
.slm-art-l .slm-fig { transform: translate3d(-6%, 3%, 0) rotate(-2deg); transform-origin: 70% 10%; }
.slm-art-r .slm-fig { transform: translate3d(6%, -3%, 0) rotate(2deg); transform-origin: 10% 70%; }
.slm[data-kind="food"] .slm-fig-food.is-ready,
.slm[data-kind="drinks"] .slm-fig-drinks.is-ready { opacity: 1; transform: none; }
.slm.is-narrow .slm-art { opacity: .24; }
.slm.is-phone .slm-art { opacity: .18; }
/* closing: the prints leave at once while the circle closes over the (opaque) card */
.slm.is-closing .slm-fig.is-ready { opacity: 0; transition: opacity 180ms ease-out; }

/* ---------- frame notches (repeat the site frame so it reads through the modal) ----------
 * Sizes follow the site's own state classes (styles.css #frame .notch-*, .brand-notch), which hang off
 * body.mode-portrait, so nothing jumps when the menu opens or closes. The overlay is inset by --frame,
 * so the site's `top: calc(var(--frame) - 2px)` for the logo is `top: -2px` here. */
.slm-notch { position: absolute; left: 50%; z-index: 3; display: block; fill: #C75A28; pointer-events: none; }
.slm-notch svg { display: block; width: 100%; height: 100%; }
.slm-notch-top { top: -1px; width: 220px; height: 60px; transform: translateX(-50%); }
.slm-notch-bottom { bottom: -1px; width: 140px; height: 32px; transform: translateX(-50%); }
.slm-logo {
  position: absolute; top: -2px; left: 50%; z-index: 4;
  width: 64px; height: 50px; margin-left: -32px;
  display: grid; place-items: center; pointer-events: none;
}
.slm-logo img { width: 40px; height: auto; filter: brightness(0) invert(.96) sepia(.25) saturate(.8); }
.mode-portrait .slm-notch-top { width: 168px; height: 46px; }
.mode-portrait .slm-logo { width: 52px; height: 40px; margin-left: -26px; }
.mode-portrait .slm-logo img { width: 30px; }

/* ---------- close button in the bottom notch ---------- */
.slm-close {
  position: absolute; left: 50%; bottom: 6px; z-index: 5;
  width: 46px; height: 46px; margin-left: -23px;
  border: 0; border-radius: 50%; padding: 0;
  background: var(--slm-paper); color: var(--slm-text);
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(40, 12, 0, .45);
  transition: transform 600ms var(--slm-out), background-color 300ms ease;
}
.slm-close::before, .slm-close::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 1.5px; margin: -.75px 0 0 -9px;
  background: currentColor; border-radius: 1px;
  transform: rotate(45deg);
}
.slm-close::after { transform: rotate(-45deg); }
.slm-close:hover { transform: rotate(90deg); background: #fff; }
.slm-close:focus-visible { outline: 2px solid var(--slm-paper); outline-offset: 3px; }

/* ---------- the paper card ---------- */
.slm-card {
  position: absolute; z-index: 2;
  left: 50%; top: var(--slm-top); bottom: var(--slm-bot);
  width: var(--slm-cw); margin-left: calc(var(--slm-cw) / -2);
  background: var(--slm-paper);
  box-shadow: 0 40px 90px -40px rgba(40, 10, 0, .6), 0 2px 6px rgba(40, 10, 0, .12);
  will-change: transform, opacity;
}
/* double rule */
.slm-rule { position: absolute; inset: 14px; border: 1px solid var(--slm-text); pointer-events: none; z-index: 1; }
.slm-rule::after { content: ""; position: absolute; inset: 3px; border: 1px solid var(--slm-text); }
/* L brackets, offset outside the double rule */
.slm-corner { position: absolute; width: 88px; height: 66px; border: 0 solid var(--slm-text); pointer-events: none; z-index: 1; }
.slm-c-tl { top: 6px; left: 6px; border-top-width: 1px; border-left-width: 1px; }
.slm-c-tr { top: 6px; right: 6px; border-top-width: 1px; border-right-width: 1px; }
.slm-c-bl { bottom: 6px; left: 6px; border-bottom-width: 1px; border-left-width: 1px; }
.slm-c-br { bottom: 6px; right: 6px; border-bottom-width: 1px; border-right-width: 1px; }

.slm-scroll {
  position: absolute; inset: 19px; z-index: 2;
  overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(158, 58, 22, .55) transparent;
  padding: 0 clamp(16px, 7%, 52px);
  outline: none;
}
.slm-scroll::-webkit-scrollbar { width: 6px; }
.slm-scroll::-webkit-scrollbar-track { background: transparent; }
.slm-scroll::-webkit-scrollbar-thumb { background: rgba(158, 58, 22, .45); border-radius: 3px; }
.slm-scroll:focus-visible { outline: 1px dashed rgba(158, 58, 22, .55); outline-offset: -5px; }
.slm-title:focus { outline: none; }

/* ---------- card header ---------- */
.slm-head { text-align: center; padding: clamp(30px, 6vh, 52px) 0 4px; }
.slm-star { display: block; width: 74px; height: 14px; margin: 0 auto 16px; color: var(--slm-deep); }
.slm-kicker {
  margin: 0; font: 500 11px/1.4 'Be Vietnam Pro', system-ui, sans-serif;
  letter-spacing: .32em; text-transform: uppercase; color: var(--slm-soft);
}
.slm-title {
  margin: 14px 0 0; font: 400 clamp(38px, 5.4vw, 58px)/1.04 'Playfair Display', Georgia, serif;
  color: var(--slm-text); letter-spacing: -.01em;
}
.slm-title em { font-style: italic; }
.slm-tag { margin: 12px 0 0; font: italic 400 16px/1.4 'EB Garamond', Georgia, serif; color: var(--slm-soft); }

.slm-kinds { display: inline-flex; gap: 28px; margin: 26px auto 0; position: relative; }
.slm-kind {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 6px 2px 9px; position: relative;
  font: 500 12px/1 'Be Vietnam Pro', system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase;
  color: var(--slm-soft); transition: color 300ms ease;
}
.slm-kind::after {
  content: ""; position: absolute; left: 0; right: .24em; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 50% 50%; transition: transform 600ms var(--slm-out);
}
.slm-kind[aria-pressed="true"] { color: var(--slm-deep); }
.slm-kind[aria-pressed="true"]::after { transform: scaleX(1); }
.slm-kind:hover { color: var(--slm-deep); }
.slm-kind:focus-visible, .slm-svc:focus-visible, .slm-chip:focus-visible, .slm-cta:focus-visible { outline: 2px solid var(--slm-deep); outline-offset: 3px; }

.slm-svcs {
  display: inline-flex; position: relative; margin: 18px auto 0; padding: 3px;
  border: 1px solid rgba(75, 68, 54, .32); border-radius: 999px;
}
.slm-svcs[hidden] { display: none; }
.slm-svc-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 999px; background: var(--slm-text);
  transition: transform 600ms var(--slm-out), width 600ms var(--slm-out);
}
.slm-svc {
  appearance: none; border: 0; background: none; cursor: pointer; position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px 8px 13px; border-radius: 999px;
  font: 500 11px/1 'Be Vietnam Pro', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--slm-text); transition: color 400ms ease;
}
.slm-svc svg { width: 13px; height: 13px; flex: none; }
.slm-svc[aria-pressed="true"] { color: var(--slm-paper); }
.slm-svc-note { margin: 12px 0 0; font: italic 400 15px/1.4 'EB Garamond', Georgia, serif; color: var(--slm-soft); }
.slm-svc-note[hidden] { display: none; }

/* ---------- sticky section chips ----------
 * The bar itself is fully opaque card paper (#F7F1E6), so no dish name ever ghosts through the chips or
 * the padding under them (short landscape phones made that band only ~6px of fading gradient). The soft
 * edge hangs BELOW the bar as ::after and only shows once the bar is stuck (menu.js toggles .is-stuck),
 * so at rest it never veils the first section title. z-index 5 keeps it over the rows, whose reveal
 * transforms make each one its own stacking layer. */
.slm-chipbar {
  position: sticky; top: 0; z-index: 5;
  margin: 22px calc(-1 * clamp(16px, 7%, 52px)) 0;
  padding: 12px clamp(16px, 7%, 52px) 16px;
  background: var(--slm-paper);
}
.slm-chipbar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px;
  background: linear-gradient(var(--slm-paper), rgba(247, 241, 230, .82) 35%, rgba(247, 241, 230, 0));
  pointer-events: none;
  opacity: 0; transition: opacity 280ms ease;
}
.slm-chipbar.is-stuck::after { opacity: 1; }
/* Section tabs are plain text with a hairline under the current one (no pills, so nothing is cut into
 * "(" / ")" fragments at the strip's ends). The strip fades 36px only on a side that still hides tabs
 * (menu.js toggles .is-fl / .is-fr). The current tab uses --slm-deep, not the terracotta accent: at 10.5px
 * the accent is 3.8:1 on the paper, the deep oxblood is 6.1:1 (small text needs 4.5:1). */
.slm-chips {
  --fl: 0px; --fr: 0px;
  position: relative; /* offsetParent for chip centring in menu.js */
  display: flex; gap: 22px; overflow-x: auto; overflow-y: hidden;
  justify-content: safe center; scrollbar-width: none; padding: 5px 16px; /* room for the focus ring */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
}
.slm-chips.is-fl { --fl: 36px; }
.slm-chips.is-fr { --fr: 36px; }
.slm-chips::-webkit-scrollbar { display: none; }
.slm-chip {
  appearance: none; flex: none; cursor: pointer; position: relative;
  border: 0; border-radius: 0; background: none;
  padding: 5px 0 7px; white-space: nowrap;
  font: 500 10.5px/1 'Be Vietnam Pro', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--slm-soft);
  transition: color 350ms ease;
}
.slm-chip::after {
  content: ""; position: absolute; left: 0; right: .16em; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transition: transform 500ms var(--slm-out);
}
.slm-chip:hover { color: var(--slm-deep); }
.slm-chip[aria-current="true"] { color: var(--slm-deep); }
.slm-chip[aria-current="true"]::after { transform: scaleX(1); }

/* ---------- sections + items ---------- */
.slm-list { padding: 6px 0 0; }
.slm-sec { padding: 26px 0 8px; text-align: center; }
.slm-sec + .slm-sec::before {
  content: ""; display: block; width: 14px; height: 14px; margin: 0 auto 30px;
  background: var(--slm-accent); opacity: .85;
  -webkit-clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
          clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.slm-h {
  margin: 0 0 22px; padding: .14em 0 .06em; overflow: hidden;
  font: 600 52px/1.12 'Playfair Display', Georgia, serif;
  text-transform: uppercase; letter-spacing: .02em; color: var(--slm-accent);
  scroll-margin-top: 70px;
}
.slm-h span { display: inline-block; transform: translate3d(0, 105%, 0); transition: transform 1000ms var(--slm-out); }
.slm-h.is-in span { transform: none; }
.slm-items { list-style: none; margin: 0; padding: 0; }
.slm-item {
  margin: 0 auto 24px; max-width: 34em;
  opacity: 0; transform: translate3d(0, 16px, 0);
  transition: opacity 800ms var(--slm-out), transform 900ms var(--slm-out);
}
.slm-item.is-in { opacity: 1; transform: none; }
.slm-name {
  margin: 0; font: 500 13px/1.55 'Be Vietnam Pro', system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: var(--slm-text);
}
.slm-line { margin: 3px 0 0; font: 400 17px/1.45 'EB Garamond', Georgia, serif; color: var(--slm-soft); }
.slm-desc { text-transform: lowercase; }
.slm-price { font: 600 15.5px/1 'Playfair Display', Georgia, serif; letter-spacing: .02em; color: var(--slm-deep); white-space: nowrap; }
.slm-desc + .slm-price::before, .slm-desc + .slm-tbc::before { content: "\00a0\00b7\00a0"; color: var(--slm-soft); font-weight: 400; }
.slm-tbc { font-style: italic; letter-spacing: .01em; color: var(--slm-soft); }
.slm-empty { padding: 40px 0; text-align: center; font: italic 400 18px/1.5 'EB Garamond', Georgia, serif; color: var(--slm-soft); }

/* ---------- card footer ---------- */
.slm-foot { text-align: center; padding: 18px 0 clamp(36px, 6vh, 56px); }
.slm-note { margin: 0 0 26px; font: italic 400 15.5px/1.5 'EB Garamond', Georgia, serif; color: var(--slm-soft); }
.slm-note[hidden] { display: none; }
.slm-foot .slm-star { margin-bottom: 18px; }
.slm-sign { margin: 0; font: 400 21px/1.3 'Playfair Display', Georgia, serif; color: var(--slm-text); }
.slm-addr { margin: 8px 0 0; font: 400 16px/1.5 'EB Garamond', Georgia, serif; color: var(--slm-soft); }
.slm-open { margin: 4px 0 0; font: 500 10.5px/1.6 'Be Vietnam Pro', system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--slm-soft); }
.slm-cta {
  appearance: none; cursor: pointer; margin-top: 22px;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 22px; border: 1px solid var(--slm-text); border-radius: 999px; background: transparent;
  font: 500 11px/1 'Be Vietnam Pro', system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase;
  color: var(--slm-text);
  transition: background-color 400ms var(--slm-out), color 400ms var(--slm-out);
}
.slm-cta i { display: block; width: 22px; height: 1px; background: currentColor; position: relative; transition: width 400ms var(--slm-out); }
.slm-cta i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.slm-cta:hover { background: var(--slm-deep); color: var(--slm-paper); border-color: var(--slm-deep); }
.slm-cta:hover i { width: 30px; }

/* content swap (kind / service) */
.slm-swap { transition: opacity 260ms ease, transform 420ms var(--slm-out); }
.slm-swap.is-out { opacity: 0; transform: translate3d(0, 10px, 0); }

/* ---------- responsive ---------- */
@media (max-width: 699px) {
  .slm { --slm-top: 58px; --slm-bot: 62px; }
  .slm-corner { width: 56px; height: 42px; }
  .slm-rule { inset: 11px; }
  .slm-c-tl, .slm-c-tr { top: 4px; } .slm-c-bl, .slm-c-br { bottom: 4px; }
  .slm-c-tl, .slm-c-bl { left: 4px; } .slm-c-tr, .slm-c-br { right: 4px; }
  .slm-scroll { inset: 16px; padding: 0 14px; } /* clears the inner rule (11 + 1 + 3 px) so the sticky chip bar never covers it */
  .slm-chipbar { margin-left: -14px; margin-right: -14px; padding-left: 10px; padding-right: 10px; }
  .slm-h { font-size: 34px; margin-bottom: 18px; scroll-margin-top: 62px; }
  .slm-title { font-size: clamp(34px, 10vw, 44px); }
  .slm-kinds { gap: 22px; }
  .slm-line { font-size: 16.5px; }
  .slm-item { margin-bottom: 20px; }
}
/* short landscape (phones on their side): the card is only ~250px tall, so the header packs into
 * three short lines and the first dishes show without scrolling. The card starts under the 60px notch. */
@media (max-height: 560px) {
  .slm { --slm-top: 62px; --slm-bot: 58px; }
  .mode-portrait .slm { --slm-top: 50px; }
  .slm-corner { width: 56px; height: 42px; }
  .slm-rule { inset: 11px; }
  .slm-c-tl, .slm-c-tr { top: 4px; } .slm-c-bl, .slm-c-br { bottom: 4px; }
  .slm-c-tl, .slm-c-bl { left: 4px; } .slm-c-tr, .slm-c-br { right: 4px; }
  .slm-scroll { inset: 16px; }
  .slm-head { padding-top: 8px; }
  .slm-head .slm-star, .slm-tag { display: none; }
  .slm-kicker { line-height: 1.2; }
  .slm-title { font-size: 26px; line-height: 1; margin-top: 2px; }
  .slm-switches { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 22px; margin-top: 6px; }
  .slm-kinds, .slm-svcs { margin-top: 0; }
  .slm-kind { padding-top: 4px; padding-bottom: 6px; }
  .slm-svc { padding-top: 5px; padding-bottom: 5px; }
  .slm-svc-note { margin-top: 4px; font-size: 14px; }
  .slm-chipbar { margin-top: 6px; padding-top: 4px; padding-bottom: 6px; }
  .slm-chipbar::after { height: 12px; }
  .slm-chip { padding: 3px 0 5px; }
  .slm-chips { gap: 18px; }
  .slm-list { padding-top: 0; }
  .slm-sec { padding-top: 6px; }
  .slm-sec + .slm-sec::before { margin-bottom: 14px; }
  .slm-h { font-size: 28px; margin-bottom: 8px; scroll-margin-top: 46px; }
  .slm-item { margin-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .slm-bg, .slm-fig, .slm-close, .slm-kind::after, .slm-chip::after, .slm-svc-thumb, .slm-swap, .slm-chipbar::after { transition-duration: 1ms !important; }
  .slm-fig, .slm-art-l .slm-fig, .slm-art-r .slm-fig { transform: none !important; }
  .slm-item, .slm-h span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .slm-swap.is-out { transform: none; }
}