/**
 * Genki Douro — main.css
 *
 * One stylesheet, no build step: the site is uploaded as-is, so keeping a
 * single file avoids a waterfall of requests. Navigate by the numbered
 * banners below (search for "1." , "2." …).
 *
 *   1. DESIGN TOKENS ........ colours, spacing, type, per-theme values
 *   2. GROUND SCOPES ........ token overrides for panels and book paper
 *   3. BASE ................. reset, document, selection, focus rings
 *   4. LAYOUT PRIMITIVES .... .shell, .sr-only, skip link
 *   5. TYPE AND CONTROLS .... eyebrow, lead, buttons, icon buttons
 *   6. SITE CHROME .......... notice bar, header, mobile navigation
 *   7. HOME PAGE ............ hero and the home-only sections
 *   8. FOOTER
 *   9. INNER PAGES .......... breadcrumbs, page hero, gallery, visit, legal
 *  10. MENU — BOOK .......... the paginated 3D book and its controls
 *  11. MENU — LIST .......... the flat, filterable dish list
 *  12. MENU — DISH DIALOG
 *  13. ABOUT PAGE .......... founder, quote, timeline, team
 *  14. RESPONSIVE .......... breakpoint overrides, widest first
 *  15. CATEGORY PICKER ..... the custom dropdown built by menu.js
 *
 * CONVENTIONS
 *   - Colours always come from a token. Never hardcode a hex in a component
 *     unless the surface is genuinely fixed (a photo scrim, printed paper).
 *   - Themes switch by redefining tokens, not by re-styling components.
 *   - Sections 14 and 15 were appended after the original file was written,
 *     so a few overrides live there rather than beside their component. New
 *     rules belong in the numbered section they modify.
 */
/* Genki Douro — dependency-free static design system */

/* =====================================================================
   1. DESIGN TOKENS
   Every colour, radius and font in the site resolves to one of these.
   :root is the light theme. html[data-theme="dark"] redefines the same
   names — components never need to know which theme is active.
   Light is the default and the OS preference is not consulted; see
   assets/scripts/theme-init.js.
   ===================================================================== */

:root {
  color-scheme: light;
  --bg: #f7f0e9;
  --bg-soft: #efe2d8;
  --surface: #fffaf6;
  --surface-strong: #ffffff;
  --surface-glass: rgba(255, 250, 246, .82);
  --ink: #1c1512;
  --ink-soft: #55483f;
  --line: rgba(28, 21, 18, .2);
  --line-strong: rgba(28, 21, 18, .36);
  --ground: #1e1512;
  --salmon: #c53823;
  --salmon-glow: #e2604a;
  --sand: #7f5129;
  /* Editorial panels (footer, notice, feature bands) follow the theme. */
  --panel: #f1e5d7;
  --panel-ink: #241a15;
  --panel-soft: #5b4d43;
  --panel-line: rgba(46, 32, 24, .18);
  --panel-line-strong: rgba(46, 32, 24, .34);
  --panel-salmon: #b8341f;
  --panel-btn-bg: #1e1512;
  --panel-btn-ink: #ffffff;
  --shadow-sm: 0 12px 32px rgba(29, 24, 18, .08);
  --shadow-md: 0 24px 70px rgba(29, 24, 18, .14);
  --shadow-lg: 0 44px 120px rgba(12, 17, 14, .25);
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 34px;
  --shell: min(1240px, calc(100vw - 48px));
  --serif: Iowan Old Style, Baskerville, Times New Roman, ui-serif, Georgia, serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --transition: 220ms cubic-bezier(.2, .7, .2, 1);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #140f0e;
  --bg-soft: #1c1513;
  --surface: #221a17;
  --surface-strong: #2b211d;
  --surface-glass: rgba(28, 21, 19, .86);
  --ink: #f7ece3;
  --ink-soft: #c9bab0;
  --line: rgba(247, 236, 227, .18);
  --line-strong: rgba(247, 236, 227, .36);
  --ground: #241a16;
  --salmon: #ff9d84;
  --salmon-glow: #ffb59f;
  --sand: #e0b183;
  --panel: #1c1512;
  --panel-ink: #f7ece3;
  --panel-soft: rgba(247, 236, 227, .82);
  --panel-line: rgba(247, 236, 227, .2);
  --panel-line-strong: rgba(247, 236, 227, .4);
  --panel-salmon: #ff9d84;
  --panel-btn-bg: #f7ece3;
  --panel-btn-ink: #20140f;
  --shadow-sm: 0 12px 32px rgba(0, 0, 0, .24);
  --shadow-md: 0 24px 70px rgba(0, 0, 0, .34);
  --shadow-lg: 0 44px 120px rgba(0, 0, 0, .52);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    color-scheme: dark;
    --bg: #140f0e;
    --bg-soft: #1c1513;
    --surface: #221a17;
    --surface-strong: #2b211d;
    --surface-glass: rgba(28, 21, 19, .86);
    --ink: #f7ece3;
    --ink-soft: #c9bab0;
    --line: rgba(247, 236, 227, .18);
    --line-strong: rgba(247, 236, 227, .36);
    --ground: #241a16;
    --salmon: #ff9d84;
    --salmon-glow: #ffb59f;
    --sand: #e0b183;
    --panel: #1c1512;
    --panel-ink: #f7ece3;
    --panel-soft: rgba(247, 236, 227, .82);
    --panel-line: rgba(247, 236, 227, .2);
    --panel-line-strong: rgba(247, 236, 227, .4);
    --panel-salmon: #ff9d84;
    --panel-btn-bg: #f7ece3;
    --panel-btn-ink: #20140f;
    --shadow-sm: 0 12px 32px rgba(0, 0, 0, .24);
    --shadow-md: 0 24px 70px rgba(0, 0, 0, .34);
    --shadow-lg: 0 44px 120px rgba(0, 0, 0, .52);
  }
}


/* =====================================================================
   2. GROUND SCOPES
   Two regions do not follow the page background, so they redefine the
   tokens for everything inside them:
     .cat-picker excluded — panels below follow the theme,
     book pages are always cream paper whatever the theme.
   Put a new always-dark or always-paper component in the matching list
   instead of hardcoding its colours.
   ===================================================================== */

/* Editorial panels: a light band by day, a deep one by night. Their accents
   come from the panel tokens so both grounds stay legible. */
.concept-notice, .site-footer, .section--book-preview, .visit-card,
.manifesto, .practical-card, .not-found__art {
  --ink: var(--panel-ink);
  --ink-soft: var(--panel-soft);
  --salmon: var(--panel-salmon);
  --salmon-glow: var(--panel-salmon);
  --line: var(--panel-line);
  --line-strong: var(--panel-line-strong);
}

/* These stay dark whatever the theme: a photo scrim, a printed cover, a solid chip. */
.hero, .book-cover, .book-mock__cover, .view-switch button.is-active, .founder__badge {
  --ink: #f7ece3;
  --ink-soft: rgba(247, 236, 227, .82);
  --salmon: #ff9d84;
  --salmon-glow: #ffb59f;
  --sand: #e8c294;
  --line: rgba(247, 236, 227, .22);
  --line-strong: rgba(247, 236, 227, .4);
}

/* The book is always printed on cream paper, whatever the site theme is. */
.book-page, .turning-page {
  --ink: #221a15;
  --ink-soft: #5b4d43;
  --salmon: #c53823;
  --salmon-glow: #d9573c;
  --sand: #7f5129;
  --line: rgba(67, 58, 43, .24);
  --line-strong: rgba(67, 58, 43, .42);
}


/* =====================================================================
   3. BASE
   Reset, document defaults, selection colour and the shared focus ring.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
/* Any component that sets display would otherwise defeat the hidden attribute
   (the booking form and its summary are grids). Keep [hidden] authoritative. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  min-width: 0;
  background:
    radial-gradient(circle at 8% 2%, color-mix(in srgb, var(--sand) 8%, transparent), transparent 28rem),
    radial-gradient(circle at 94% 28%, color-mix(in srgb, var(--salmon) 6%, transparent), transparent 30rem),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .032;
  z-index: 90;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
body.nav-open { overflow: hidden; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
/* height:auto lets the CSS aspect-ratio win over the width/height attributes;
   without it every image renders at its attribute height and stretches tall. */
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
svg { display: block; }
::selection { background: var(--salmon); color: #fff; }


/* =====================================================================
   4. LAYOUT PRIMITIVES
   ===================================================================== */

.shell { width: var(--shell); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 12px; left: 12px; transform: translateY(-160%);
  z-index: 1000; background: var(--ink); color: var(--bg); padding: 10px 16px;
  border-radius: 999px; transition: transform var(--transition);
}
.skip-link:focus { transform: translateY(0); }


/* =====================================================================
   5. TYPE AND CONTROLS
   Small caps label, lead paragraph, and the button family.
   ===================================================================== */

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--salmon); font-size: .72rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.lead { color: var(--ink-soft); font-size: clamp(1.05rem, 1.4vw, 1.24rem); line-height: 1.75; }

.button {
  --button-bg: var(--ground);
  --button-color: #fff;
  min-height: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: 13px;
  padding: 11px 22px; border: 1px solid transparent; border-radius: 999px;
  background: var(--button-bg); color: var(--button-color); font-size: .82rem;
  font-weight: 800; letter-spacing: .03em; cursor: pointer;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--ground) 20%, transparent);
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.button svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button:hover { transform: translateY(-2px); box-shadow: 0 18px 35px color-mix(in srgb, var(--ground) 28%, transparent); }
.button:active { transform: translateY(0); }
.button--small { min-height: 42px; padding: 8px 18px; font-size: .75rem; }
.button--ghost { --button-bg: transparent; --button-color: var(--ink); border-color: var(--line-strong); box-shadow: none; }
.button--ghost:hover { background: var(--surface); border-color: var(--ink); }
.button--text { min-height: auto; padding: 7px 0; border-radius: 0; --button-bg: transparent; --button-color: var(--ink); box-shadow: none; border-bottom: 1px solid var(--line-strong); }
.button--text:hover { color: var(--salmon); box-shadow: none; }

.icon-button {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.icon-button:hover { background: var(--surface); border-color: var(--line-strong); transform: translateY(-1px); }
.icon-button:focus-visible, .button:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--salmon) 58%, transparent); outline-offset: 3px;
}


/* =====================================================================
   6. SITE CHROME
   Notice bar, sticky header and the off-canvas mobile navigation.
   Behaviour for all three lives in site.js.
   ===================================================================== */

.concept-notice { background: var(--panel); color: var(--panel-ink); border-bottom: 1px solid var(--panel-line); font-size: .74rem; position: relative; z-index: 96; }
.concept-notice[hidden] { display: none; }
.concept-notice__inner { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 20px; text-align: center; }
.concept-notice__inner strong { color: var(--sand); }
.concept-notice button { border: 0; background: transparent; color: inherit; font-size: 1.15rem; cursor: pointer; opacity: .72; }
.concept-notice button:hover { opacity: 1; }

.site-header {
  height: 76px; position: sticky; top: 0; z-index: 95;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(18px) saturate(140%);
  transition: height var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.site-header.is-scrolled { height: 66px; border-color: var(--line); box-shadow: 0 10px 40px rgba(0, 0, 0, .05); }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand__mark { width: 40px; height: 40px; }
.brand__type { display: grid; line-height: .9; letter-spacing: .16em; }
.brand__type strong { font-family: var(--serif); font-size: 1.05rem; letter-spacing: .12em; }
.brand__type span { margin-top: 5px; font-size: .6rem; font-weight: 800; color: var(--sand); letter-spacing: .3em; }
.desktop-nav { display: flex; align-items: center; justify-content: center; gap: 4px; }
.nav-link { position: relative; padding: 11px 14px; font-size: .76rem; font-weight: 700; color: var(--ink-soft); }
.nav-link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 1px; background: var(--salmon); transform: scaleX(0); transform-origin: right; transition: transform var(--transition); }
.nav-link:hover, .nav-link.is-active { color: var(--ink); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.lang-switch { display: grid; place-items: center; min-width: 42px; height: 42px; border-radius: 50%; font-size: .7rem; font-weight: 900; letter-spacing: .08em; }
.lang-switch:hover { background: var(--surface); }
.theme-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon--moon { display: none; }
html[data-resolved-theme="dark"] .theme-icon--sun { display: none; }
html[data-resolved-theme="dark"] .theme-icon--moon { display: block; }
.menu-toggle { display: none; }
.menu-toggle span { width: 18px; height: 1.5px; background: currentColor; transition: transform var(--transition); }
.menu-toggle span + span { margin-top: -12px; transform: translateY(8px); }

.mobile-menu[hidden] { display: none; }
.mobile-menu { position: fixed; inset: 0; z-index: 120; }
.mobile-menu__backdrop { position: absolute; inset: 0; background: rgba(12, 7, 5, .64); backdrop-filter: blur(5px); opacity: 0; animation: fade-in .2s forwards; }
.mobile-menu__panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(420px, 92vw); padding: 26px; background: var(--surface); box-shadow: var(--shadow-lg); transform: translateX(100%); animation: panel-in .35s cubic-bezier(.2,.8,.2,1) forwards; display: flex; flex-direction: column; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu__top .icon-button { font-size: 1.7rem; }
.mobile-menu nav { display: grid; margin-top: 64px; }
.mobile-menu .nav-link { padding: 14px 0; font-family: var(--serif); font-size: clamp(2rem, 8vw, 3.4rem); color: var(--ink); line-height: 1.1; }
.mobile-menu .nav-link::after { left: 0; right: auto; bottom: 8px; width: 60px; }
.mobile-menu__footer { margin-top: auto; border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; gap: 20px; color: var(--ink-soft); font-size: .78rem; }
.mobile-menu__footer a { color: var(--salmon); font-weight: 800; }
@keyframes fade-in { to { opacity: 1; } }
@keyframes panel-in { to { transform: translateX(0); } }


/* =====================================================================
   7. HOME PAGE
   The hero keeps a dark ground in both themes: it sits over a photograph.
   ===================================================================== */

.hero { position: relative; min-height: calc(100svh - 110px); overflow: hidden; background: #140f0d; color: #fff; }
.hero__media, .hero__veil { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); animation: hero-in 1.8s cubic-bezier(.2,.8,.2,1) both; }
.hero__veil { background: linear-gradient(90deg, rgba(16, 10, 8, .84) 0%, rgba(16, 10, 8, .56) 42%, rgba(16, 10, 8, .12) 75%), linear-gradient(0deg, rgba(14, 9, 7, .6), transparent 52%); }
.hero__content { position: relative; min-height: inherit; padding-block: clamp(90px, 14vh, 160px) 80px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.hero__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; color: #ffb59f; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .18em; animation: rise-in .8s .15s both; }
.hero__eyebrow span { width: 34px; height: 1px; background: currentColor; }
.hero h1 { display: grid; margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(5.3rem, 13vw, 12rem); line-height: .64; letter-spacing: -.055em; animation: rise-in 1s .25s both; }
.hero h1 span:last-child { margin-left: clamp(44px, 9vw, 150px); color: #d4b275; font-size: .52em; letter-spacing: .17em; line-height: 1.15; }
.hero__content > p { margin: 38px 0 28px; font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.65rem); font-style: italic; color: rgba(255,255,255,.82); animation: rise-in .9s .4s both; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; animation: rise-in .9s .52s both; }
.hero .button { --button-bg: #f7ece3; --button-color: #20140f; }
.hero .button--ghost { --button-bg: rgba(255,255,255,.04); --button-color: #fff; border-color: rgba(255,255,255,.3); backdrop-filter: blur(10px); }
.hero__scroll { position: absolute; bottom: 30px; left: 0; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.62); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; }
.hero__scroll i { width: 46px; height: 1px; background: rgba(255,255,255,.45); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: translateX(-100%); animation: scroll-line 2.4s infinite; }
.hero__stamp { position: absolute; right: max(40px, calc((100vw - 1240px)/2)); bottom: 46px; width: 90px; height: 90px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; transform: rotate(8deg); backdrop-filter: blur(10px); }
.hero__stamp span { font-family: var(--serif); font-size: 2.15rem; color: #e9bc72; line-height: 1; }
.hero__stamp small { margin-top: -18px; font-size: .56rem; letter-spacing: .25em; }
@keyframes hero-in { from { transform: scale(1.12); filter: brightness(.7); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } }
@keyframes scroll-line { 0% { transform: translateX(-100%); } 55%,100% { transform: translateX(100%); } }

.section { padding-block: clamp(88px, 11vw, 150px); position: relative; }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); align-items: end; gap: 70px; margin-bottom: 56px; }
.section-heading h2, .split-story h2, .book-preview h2, .visit-card h2, .manifesto h2, .centered-cta h2, .practical-card h2 {
  margin: 12px 0 0; font-family: var(--serif); font-size: clamp(2.5rem, 5.2vw, 5rem); font-weight: 500; line-height: .98; letter-spacing: -.045em;
}
.section-heading p { max-width: 460px; margin-bottom: 4px; color: var(--ink-soft); }
.reveal { opacity: 1; transform: none; transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
html.reveal-ready .reveal { opacity: 0; transform: translateY(24px); }
html.reveal-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }

.section--signature { background: var(--bg); }
.dish-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dish-card { border-radius: var(--radius-md); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); border: 1px solid var(--line); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.dish-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.dish-card__media { position: relative; aspect-ratio: 1.45; overflow: hidden; background: var(--ground); }
.dish-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.dish-card:hover .dish-card__media img { transform: scale(1.045); }
.dish-card__media span { position: absolute; left: 16px; top: 16px; padding: 7px 11px; border-radius: 999px; background: rgba(20,13,10,.76); color: #fff; backdrop-filter: blur(8px); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dish-card__body { min-height: 155px; padding: 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.dish-card h3 { margin-bottom: 7px; font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.dish-card p { margin-bottom: 0; color: var(--ink-soft); font-size: .83rem; line-height: 1.55; }
.dish-card__body > strong { color: var(--salmon); white-space: nowrap; font-size: .9rem; }

.section--philosophy { background: var(--surface); }
.split-story { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: clamp(50px, 8vw, 120px); align-items: center; }
.split-story__visual { position: relative; }
.split-story__visual::before { content: ""; position: absolute; inset: 8% -8% -8% 10%; border: 1px solid var(--salmon-glow); border-radius: var(--radius-lg); opacity: .45; }
.split-story__visual img { position: relative; width: 100%; aspect-ratio: .86; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.image-note { position: absolute; left: 22px; bottom: 22px; padding: 8px 12px; border-radius: 999px; background: rgba(20,13,10,.76); color: #fff; font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(10px); }
.split-story__content .lead { margin: 28px 0 36px; }
.value-list { border-top: 1px solid var(--line); margin-bottom: 28px; }
.value-list article { display: grid; grid-template-columns: 42px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.value-list article > strong { color: var(--sand); font-size: .67rem; letter-spacing: .1em; }
.value-list h3 { margin-bottom: 4px; font-family: var(--serif); font-size: 1.25rem; }
.value-list p { margin-bottom: 0; color: var(--ink-soft); font-size: .84rem; }

.section--book-preview { overflow: hidden; background: var(--panel); color: var(--panel-ink); }
.section--book-preview::before { content: ""; position: absolute; width: 440px; height: 440px; right: -160px; top: -120px; border: 1px solid var(--panel-line-strong); border-radius: 50%; box-shadow: 0 0 0 72px rgba(201,166,106,.04), 0 0 0 144px rgba(201,166,106,.025); }
.book-preview { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; }
.book-preview__copy { position: relative; z-index: 1; }
.book-preview__copy .eyebrow { color: var(--salmon); }
.book-preview__copy p { color: var(--panel-soft); margin: 28px 0 32px; }
.book-preview__copy .button { --button-bg: var(--panel-btn-bg); --button-color: var(--panel-btn-ink); }
/* No preserve-3d here: the layers are stacked planes, not a shared 3D scene.
   With preserve-3d the browser sorts them by depth and rotateY(-20deg) puts the
   back cover IN FRONT of rotateY(-10deg), hiding the front cover until hover.
   perspective alone still gives each layer its 3D tilt, and z-index decides who
   is on top. */
.book-mock { position: relative; height: 520px; perspective: 1500px; display: grid; place-items: center; }
.book-mock__shadow { position: absolute; z-index: 0; width: 72%; height: 18%; bottom: 7%; border-radius: 50%; background: #000; filter: blur(30px); opacity: .48; transform: rotate(-7deg); }
.book-mock__back, .book-mock__cover, .book-mock__pages { position: absolute; width: min(420px, 70%); height: 470px; border-radius: 4px 20px 20px 4px; transform-origin: left; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.book-mock__back { z-index: 1; background: #150e0c; transform: rotateY(-20deg) rotateZ(4deg) translate(18px, 4px); box-shadow: 30px 40px 80px rgba(0,0,0,.45); }
.book-mock__pages { z-index: 2; background: repeating-linear-gradient(90deg, #ecdcc6 0 3px, #f7eee0 3px 7px); transform: rotateY(-17deg) rotateZ(4deg) translate(26px, -5px); }
.book-mock__cover { z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(145deg, #40241c, #150d0a); border: 1px solid rgba(232,194,148,.42); color: #f7ece3; transform: rotateY(-10deg) rotateZ(4deg); box-shadow: inset 12px 0 25px rgba(0,0,0,.3), 25px 35px 65px rgba(0,0,0,.38); }
.book-mock__cover::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(232,194,148,.34); border-radius: 2px 12px 12px 2px; }
.book-mock__cover img { width: 92px; margin-bottom: 24px; filter: brightness(1.35); }
.book-mock__cover > span { font-family: var(--serif); font-size: 3.5rem; letter-spacing: .11em; line-height: .9; }
.book-mock__cover > small { color: var(--sand); letter-spacing: .5em; font-weight: 800; margin: 13px 0 54px; }
.book-mock__cover > i { font-style: normal; font-size: .68rem; letter-spacing: .3em; color: rgba(255,255,255,.74); }
.book-mock:hover .book-mock__cover { transform: rotateY(-32deg) rotateZ(1deg) translateX(-12px); }
.book-mock:hover .book-mock__pages { transform: rotateY(-14deg) rotateZ(1deg) translate(20px, -3px); }

.section--gallery-preview { background: var(--bg); }
.editorial-gallery { display: grid; grid-template-columns: 1.35fr .65fr 1fr; grid-template-rows: 320px 260px; gap: 16px; }
.editorial-gallery__item { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--surface); }
.editorial-gallery__item--1 { grid-row: 1 / 3; }
.editorial-gallery__item--2 { grid-column: 2; grid-row: 1; }
.editorial-gallery__item--3 { grid-column: 3; grid-row: 1; }
.editorial-gallery__item--4 { grid-column: 2 / 4; grid-row: 2; }
.editorial-gallery__item--5 { display: none; }
.editorial-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .75s cubic-bezier(.2,.8,.2,1), filter .4s; }
.editorial-gallery__item::after { content: ""; position: absolute; inset: 28% 0 0; background: linear-gradient(transparent, rgba(12,7,5,.88)); }
.editorial-gallery__item span { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; color: #fff; font-size: .74rem; font-weight: 700; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.editorial-gallery__item:hover img { transform: scale(1.05); filter: saturate(1.08); }
.section-action { margin-top: 30px; display: flex; justify-content: flex-end; }

.section--visit-preview { background: var(--surface); }
.visit-card { min-height: 600px; display: grid; grid-template-columns: 1.08fr .92fr; background: var(--panel); color: var(--panel-ink); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.visit-card__media img { width: 100%; height: 100%; object-fit: cover; }
.visit-card__content { padding: clamp(42px, 6vw, 78px); display: flex; flex-direction: column; justify-content: center; }
.visit-card__content .eyebrow { color: var(--salmon); }
.visit-card__content h2 { font-size: clamp(2.5rem, 4.5vw, 4.5rem); }
.visit-details { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding-block: 32px; margin-block: 22px; border-block: 1px solid var(--panel-line); }
.visit-details div { display: grid; gap: 4px; }
.visit-details span { color: var(--sand); font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.visit-details strong { font-family: var(--serif); font-size: 1.15rem; }
.visit-details small { color: var(--panel-soft); }
.visit-card__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.visit-card .button { --button-bg: var(--panel-btn-bg); --button-color: var(--panel-btn-ink); }
.visit-card .button--ghost { --button-bg: transparent; --button-color: var(--panel-ink); border-color: var(--panel-line-strong); }


/* =====================================================================
   8. FOOTER
   ===================================================================== */

.site-footer { background: var(--panel); color: var(--panel-ink); border-top: 1px solid var(--panel-line); padding: 76px 0 24px; }
.site-footer__main { display: grid; grid-template-columns: 1fr 1.75fr; gap: 64px; padding-bottom: 60px; }

.site-footer .brand__type span { color: var(--sand); }
.footer-brand p { margin: 22px 0 0; color: var(--panel-soft); font-family: var(--serif); font-style: italic; }
.footer-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.footer-tag { display: block; margin-top: 18px; color: var(--salmon); font-size: .66rem; font-weight: 800; letter-spacing: .3em; }
.social-link { display: inline-flex; align-items: center; gap: 9px; }
.social-link svg { width: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1000px) { .footer-links { grid-template-columns: repeat(2, 1fr); row-gap: 34px; } }
.footer-links > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-links span { margin-bottom: 5px; color: var(--sand); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.footer-links a, .footer-theme { color: var(--panel-soft); font-size: .78rem; transition: color var(--transition); }
.footer-links a:hover, .footer-theme:hover { color: var(--panel-ink); }
.footer-theme { padding: 0; border: 0; background: none; cursor: pointer; }
.site-footer__bottom { padding-top: 22px; border-top: 1px solid var(--panel-line); display: flex; justify-content: space-between; color: var(--panel-soft); font-size: .72rem; }


/* =====================================================================
   9. INNER PAGES
   Breadcrumbs, page hero, gallery, visit page and the legal pages.
   ===================================================================== */

.breadcrumbs { height: 58px; display: flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: .7rem; }
.breadcrumbs a:hover { color: var(--salmon); }
.page-hero { padding: clamp(65px, 8vw, 112px) 0 clamp(70px, 9vw, 125px); overflow: hidden; }
.page-hero > .shell { position: relative; }
.page-hero__copy { max-width: 920px; }
.page-hero h1 { margin: 14px 0 24px; font-family: var(--serif); font-size: clamp(3.5rem, 8vw, 7.9rem); font-weight: 500; line-height: .9; letter-spacing: -.055em; }
.page-hero__copy > p { max-width: 720px; margin: 0; color: var(--ink-soft); font-size: clamp(1rem, 1.5vw, 1.24rem); line-height: 1.75; }
.page-hero__seal { position: absolute; right: 2%; top: -20px; width: 150px; height: 150px; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; color: var(--salmon); transform: rotate(9deg); }
.page-hero__seal span { font-family: var(--serif); font-size: 4rem; }
.page-hero__seal small { margin-top: -40px; font-size: .6rem; letter-spacing: .2em; }
.page-hero--restaurant > .shell { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.page-hero--restaurant .page-hero__copy { max-width: 640px; }
.page-hero--restaurant h1 { font-size: clamp(3.2rem, 6.4vw, 6.4rem); }
.page-hero__image { position: relative; }
.page-hero__image img { width: 100%; aspect-ratio: 1.18; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.page-hero__image span { position: absolute; right: 18px; bottom: 18px; padding: 8px 11px; border-radius: 999px; background: rgba(20,13,10,.76); color: #fff; font-size: .64rem; letter-spacing: .11em; text-transform: uppercase; }

/* Menu */
.menu-experience { padding-bottom: 110px; }
.menu-toolbar-wrap { position: sticky; top: 76px; z-index: 50; padding-block: 12px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(18px); }
.site-header.is-scrolled + main .menu-toolbar-wrap { top: 66px; }
.menu-toolbar { display: grid; grid-template-columns: auto minmax(260px, 1fr) minmax(190px, auto); gap: 12px; align-items: center; }
.view-switch { display: flex; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.view-switch button { min-width: 102px; height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font-size: .74rem; font-weight: 800; cursor: pointer; }
.view-switch button.is-active { background: var(--ground); color: #fff; box-shadow: var(--shadow-sm); }
.view-switch svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.menu-search { height: 50px; display: flex; align-items: center; gap: 10px; padding-inline: 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); transition: border-color var(--transition), box-shadow var(--transition); }
.menu-search:focus-within { border-color: var(--sand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sand) 14%, transparent); }
.menu-search svg { width: 18px; fill: none; stroke: var(--ink-soft); stroke-width: 1.7; }
.menu-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .78rem; }
.menu-search input::placeholder { color: color-mix(in srgb, var(--ink-soft) 75%, transparent); }
.category-select select { height: 50px; width: 100%; padding: 0 42px 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .73rem; font-weight: 700; cursor: pointer; }
.filter-chips { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chips button { flex: 0 0 auto; height: 36px; padding-inline: 15px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-soft); font-size: .74rem; font-weight: 750; cursor: pointer; transition: all var(--transition); }
.filter-chips button:hover { border-color: var(--line-strong); color: var(--ink); }
.filter-chips button.is-active { background: color-mix(in srgb, var(--salmon) 6%, var(--surface)); border-color: color-mix(in srgb, var(--salmon) 48%, var(--line)); color: var(--salmon); }


/* =====================================================================
   10. MENU — BOOK
   The book is always cream paper, so it carries its own token scope (see 2).
   A turn is a two-faced sheet: .turning-page holds a front and a back face
   and menu.js drives the rotation and the --shade fold shadow per frame.
   ===================================================================== */

.book-view { padding-top: 36px; }
.book-stage { position: relative; }
.book-ribbon { width: max-content; max-width: 90%; margin: 0 auto 18px; padding: 7px 13px; border-radius: 999px; background: color-mix(in srgb, var(--sand) 14%, var(--surface)); color: var(--ink-soft); font-size: .7rem; font-weight: 700; text-align: center; }
.interactive-book {
  position: relative; width: 100%; height: min(690px, 58vw); min-height: 560px;
  display: grid; grid-template-columns: 1fr 1fr; perspective: 2600px; transform-style: preserve-3d;
  filter: drop-shadow(0 42px 36px rgba(16, 18, 15, .22));
}
.interactive-book::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: -28px; height: 60px; border-radius: 50%; background: rgba(0,0,0,.3); filter: blur(28px); z-index: -1; }
.book-page { position: relative; min-width: 0; overflow: hidden; background: #f7eee0; color: #221a15; border: 1px solid rgba(72,61,43,.26); backface-visibility: hidden; }
.book-page::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .25; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.book-page--left { border-radius: 18px 3px 3px 18px; box-shadow: inset -30px 0 40px -38px rgba(0,0,0,.7), inset 4px 0 0 rgba(255,255,255,.35); }
.book-page--right { border-radius: 3px 18px 18px 3px; box-shadow: inset 30px 0 40px -38px rgba(0,0,0,.7), inset -4px 0 0 rgba(255,255,255,.35); }
.book-spine { position: absolute; left: 50%; top: 0; bottom: 0; width: 18px; transform: translateX(-50%); z-index: 4; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(39,28,18,.19), rgba(255,255,255,.2), rgba(39,28,18,.19), transparent); filter: blur(1px); }
/* The sheet the reader drags: two paper faces back to back. */
.turning-page { display: none; position: absolute; top: 0; bottom: 0; width: 50%; z-index: 9; transform-style: preserve-3d; will-change: transform; }
.turning-page.is-active { display: block; }
.turning-page.is-next { left: 50%; transform-origin: left center; }
.turning-page.is-prev { left: 0; transform-origin: right center; }
.turning-page__face { position: absolute; inset: 0; }
.turning-page.is-next .turning-page__face--front { border-radius: 3px 18px 18px 3px; }
.turning-page.is-next .turning-page__face--back { border-radius: 18px 3px 3px 18px; transform: rotateY(180deg); }
.turning-page.is-prev .turning-page__face--front { border-radius: 18px 3px 3px 18px; }
.turning-page.is-prev .turning-page__face--back { border-radius: 3px 18px 18px 3px; transform: rotateY(180deg); }
/* Fold shade — JS drives --shade from 0 to 1 as the sheet lifts. */
.turning-page__face::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: var(--shade, 0); }
.turning-page.is-next .turning-page__face--front::before { background: linear-gradient(270deg, rgba(26,19,9,.72), rgba(26,19,9,0) 62%); }
.turning-page.is-next .turning-page__face--back::before { background: linear-gradient(90deg, rgba(26,19,9,.66), rgba(26,19,9,0) 62%); }
.turning-page.is-prev .turning-page__face--front::before { background: linear-gradient(90deg, rgba(26,19,9,.72), rgba(26,19,9,0) 62%); }
.turning-page.is-prev .turning-page__face--back::before { background: linear-gradient(270deg, rgba(26,19,9,.66), rgba(26,19,9,0) 62%); }

/* Grab affordances: open hand over the paper, closed hand while dragging. */
.interactive-book { cursor: grab; touch-action: pan-y; }
.interactive-book.is-grabbing { cursor: grabbing; }
.interactive-book.is-grabbing *, .interactive-book.is-grabbing .book-item { cursor: grabbing; }
.interactive-book, .interactive-book * { -webkit-user-drag: none; }
.interactive-book.is-grabbing, .interactive-book.is-grabbing * { user-select: none; -webkit-user-select: none; }

/* Lifted outer corner — hints that the sheet can be picked up. */
.book-corner { position: absolute; z-index: 6; bottom: 0; width: 78px; height: 78px; pointer-events: none; opacity: 0; transition: opacity .32s var(--transition), transform .5s cubic-bezier(.2,.7,.2,1); }
.book-corner--right { right: 0; border-radius: 0 0 18px 0; background: linear-gradient(225deg, #efe0cc 0 46%, rgba(84,68,40,.42) 47%, rgba(84,68,40,0) 49%); box-shadow: -8px -8px 20px rgba(24,18,8,.16); transform: translate(10px, 10px) scale(.55); }
.book-corner--left { left: 0; border-radius: 0 0 0 18px; background: linear-gradient(135deg, #efe0cc 0 46%, rgba(84,68,40,.42) 47%, rgba(84,68,40,0) 49%); box-shadow: 8px -8px 20px rgba(24,18,8,.16); transform: translate(-10px, 10px) scale(.55); }
.interactive-book:hover .book-corner { opacity: 1; transform: translate(0, 0) scale(1); }
.interactive-book .book-corner.is-off, .interactive-book.is-grabbing .book-corner { opacity: 0 !important; }

/* "Drag to turn" badge — shown until the reader drags once. */
.book-hint {
  position: absolute; left: 50%; bottom: 24px; z-index: 12;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 17px 9px 13px; border-radius: 999px;
  background: rgba(26, 17, 14, .88); color: #f7ece3;
  font-size: .74rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 16px 34px rgba(10, 14, 10, .32); backdrop-filter: blur(8px);
  pointer-events: none; transform: translateX(-50%);
  animation: hint-rise .55s .7s both;
}
.book-hint svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: hint-swipe 2.6s ease-in-out infinite; }
.book-hint.is-hidden { opacity: 0; transform: translate(-50%, 12px); transition: opacity .45s, transform .45s; }
@keyframes hint-rise { from { opacity: 0; transform: translate(-50%, 14px); } }
@keyframes hint-swipe { 0%, 100% { transform: translateX(5px) rotate(7deg); } 50% { transform: translateX(-5px) rotate(-7deg); } }
@media (prefers-reduced-motion: reduce) {
  .book-hint, .book-hint svg { animation: none; }
}
.book-page__inner { position: relative; height: 100%; padding: clamp(32px, 4.1vw, 62px); display: flex; flex-direction: column; z-index: 1; }
.book-page__inner::before { content: ""; position: absolute; inset: 20px; border: 1px solid rgba(86,67,40,.26); pointer-events: none; }
.book-cover { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 35%, #40241c, #170e0b 68%); color: #f7ece3; text-align: center; }
.book-cover::before { content: ""; position: absolute; inset: 24px; border: 1px solid rgba(232,194,148,.42); }
.book-cover img { width: 105px; filter: brightness(1.25); }
.book-cover h2 { margin: 24px 0 0; font-family: var(--serif); font-size: clamp(2.7rem, 4.4vw, 5.2rem); font-weight: 500; letter-spacing: .08em; line-height: .9; }
.book-cover h2 span { display: block; margin-top: 12px; color: var(--sand); font-family: var(--sans); font-size: .22em; letter-spacing: .52em; font-weight: 800; }
.book-cover p { margin: 54px 0 0; color: rgba(255,255,255,.76); font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; }
.book-intro { justify-content: center; text-align: center; }
.book-intro .book-japanese { font-family: var(--serif); font-size: 6rem; color: var(--salmon); line-height: 1; opacity: .85; }
.book-intro h2 { margin: 18px 0 16px; font-family: var(--serif); font-size: clamp(2rem, 3.7vw, 4rem); font-weight: 500; line-height: 1; }
.book-intro p { max-width: 390px; margin-inline: auto; color: #5b4d43; font-size: .92rem; }
.book-index { justify-content: center; }
.book-index > span, .book-menu-page__eyebrow { color: var(--salmon); font-size: .68rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.book-index h2, .book-menu-page h2 { margin: 12px 0 24px; font-family: var(--serif); font-size: clamp(2.2rem, 3.6vw, 4rem); font-weight: 500; line-height: .95; }
.book-index nav { display: grid; gap: 3px; }
.book-index__nav--dense { grid-template-columns: 1fr 1fr; column-gap: 22px; }
.book-index__nav--dense button { min-height: 34px; gap: 8px; }
.book-index__nav--dense button strong { font-size: .92rem; }
.book-index button { min-height: 45px; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; border-bottom: 1px solid rgba(67,58,43,.25); background: transparent; color: #383a34; cursor: pointer; text-align: left; }
.book-index button span { color: var(--sand); font-size: .68rem; font-weight: 800; }
.book-index button strong { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }
.book-index button:hover strong { color: var(--salmon); }
.book-menu-page h2 { margin-bottom: 8px; }
.book-menu-page__intro { margin: 0 0 20px; max-width: 92%; color: #5b4d43; font-size: .8rem; line-height: 1.5; }
.book-items { display: grid; gap: 1px; border-top: 1px solid rgba(67,58,43,.3); }
.book-item { width: 100%; min-height: 72px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(67,58,43,.24); background: transparent; color: inherit; cursor: pointer; text-align: left; }
.book-item:hover .book-item__name { color: var(--salmon); }
.book-item__name { display: block; font-family: var(--serif); font-size: clamp(.95rem, 1.25vw, 1.22rem); font-weight: 700; line-height: 1.15; transition: color var(--transition); }
.book-item__desc { display: -webkit-box; margin-top: 4px; color: #63564b; font-size: .72rem; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book-item__price { color: var(--salmon); font-size: .82rem; font-weight: 900; white-space: nowrap; }
.book-folio { position: absolute; left: 50%; bottom: 27px; transform: translateX(-50%); color: #6e6055; font-family: var(--serif); font-size: .72rem; }
.book-page--blank .book-page__inner { justify-content: center; align-items: center; }
.book-page--blank img { width: 90px; opacity: .35; }
.book-controls { max-width: 760px; margin: 34px auto 0; display: grid; grid-template-columns: 130px 1fr 130px; align-items: center; gap: 28px; }
.book-controls > button { height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .72rem; font-weight: 800; cursor: pointer; transition: all var(--transition); }
.book-controls > button:hover:not(:disabled) { border-color: var(--line-strong); transform: translateY(-2px); }
.book-controls > button:disabled { opacity: .36; cursor: not-allowed; }
.book-controls svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.book-progress { display: grid; gap: 8px; text-align: center; color: var(--ink-soft); font-size: .72rem; }
.book-progress i { height: 3px; overflow: hidden; border-radius: 999px; background: var(--line); }
.book-progress b { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--salmon); transition: width .45s; }


/* =====================================================================
   11. MENU — LIST
   ===================================================================== */

.menu-list-view { padding-top: 42px; }
.menu-list-category { padding: 54px 0 66px; border-top: 1px solid var(--line); }
.menu-list-category:first-child { border-top: 0; }
.menu-list-category > header { display: grid; grid-template-columns: .7fr 1.3fr; column-gap: 60px; margin-bottom: 30px; }
.menu-list-category > header span { grid-column: 1; color: var(--salmon); font-size: .65rem; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.menu-list-category > header h2 { grid-column: 1; margin: 10px 0 0; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 4.1rem); font-weight: 500; line-height: 1; }
.menu-list-category > header p { grid-column: 2; grid-row: 1 / 3; align-self: end; max-width: 520px; margin: 0; color: var(--ink-soft); }
.menu-list-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.menu-list-item { min-height: 142px; display: grid; grid-template-columns: 155px 1fr; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.menu-list-item:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.menu-list-item[hidden] { display: none; }
.menu-list-item img { width: 100%; height: 100%; object-fit: cover; }
.menu-list-item__copy { min-width: 0; padding: 18px; display: flex; flex-direction: column; justify-content: center; }
.menu-list-item__top { display: flex; justify-content: space-between; gap: 14px; }
.menu-list-item__top strong { font-family: var(--serif); font-size: 1.16rem; line-height: 1.2; }
.menu-list-item__top b { color: var(--salmon); font-size: .76rem; white-space: nowrap; }
.menu-list-item__copy > small { display: -webkit-box; margin: 7px 0 11px; color: var(--ink-soft); font-size: .74rem; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.menu-list-item__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.menu-list-item__tags i { padding: 4px 7px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-soft); font-size: .62rem; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.menu-empty { padding: 100px 20px; text-align: center; }
.menu-empty span { font-family: var(--serif); font-size: 5rem; color: var(--sand); }
.menu-empty h2 { margin: 8px 0 24px; font-family: var(--serif); font-size: 2rem; }


/* =====================================================================
   12. MENU — DISH DIALOG
   ===================================================================== */

.dish-dialog { width: min(1040px, calc(100vw - 36px)); max-height: min(760px, calc(100svh - 36px)); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); overflow: hidden; }
.dish-dialog::backdrop { background: rgba(5,11,8,.74); backdrop-filter: blur(10px); }
.dish-dialog[open] { animation: dialog-in .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.dish-dialog__layout { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; min-height: 610px; }
.dish-dialog__close { position: absolute; right: 18px; top: 18px; z-index: 2; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(7,14,11,.52); color: #fff; font-size: 1.5rem; cursor: pointer; backdrop-filter: blur(10px); }
.dish-dialog__media { min-height: 610px; background: var(--ground); }
.dish-dialog__media img { width: 100%; height: 100%; object-fit: cover; }
.dish-dialog__content { padding: clamp(38px, 5vw, 68px); display: flex; flex-direction: column; justify-content: center; }
.dish-dialog__content h2 { margin: 13px 0 18px; font-family: var(--serif); font-size: clamp(2.4rem, 4.5vw, 4.5rem); font-weight: 500; line-height: .95; }
.dish-dialog__content > p { color: var(--ink-soft); line-height: 1.7; }
.dish-dialog__price { margin: 8px 0 24px; color: var(--salmon); font-family: var(--serif); font-size: 1.75rem; }
.dish-dialog__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-block: 20px; border-block: 1px solid var(--line); }
.dish-dialog__meta span { display: block; margin-bottom: 7px; color: var(--sand); font-size: .64rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.dish-dialog__meta p { margin: 0; color: var(--ink-soft); font-size: .75rem; }
.dish-dialog__actions { display: flex; gap: 8px; margin-top: 26px; }
.dish-dialog__actions .button { flex: 1; padding-inline: 12px; font-size: .68rem; }

/* Restaurant */
.manifesto { background: var(--panel); color: var(--panel-ink); }
.manifesto__grid { display: grid; grid-template-columns: .55fr 1.45fr; gap: 80px; align-items: center; }
.manifesto__mark { min-height: 390px; position: relative; display: grid; place-items: center; border: 1px solid var(--panel-line); border-radius: 50% 50% 8px 50%; }
.manifesto__mark img { width: 130px; }
.manifesto__mark span { position: absolute; right: 35px; bottom: 28px; color: var(--salmon); font-family: var(--serif); font-size: 4rem; }
.manifesto__copy .eyebrow { color: var(--salmon); }
.manifesto__copy .lead { max-width: 760px; margin-top: 28px; color: var(--panel-soft); }
.pillars { background: var(--surface); }
.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 54px; }
.pillar-grid article { min-height: 310px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); display: flex; flex-direction: column; }
.pillar-grid article > span { color: var(--sand); font-size: .65rem; font-weight: 900; }
.pillar-grid h3 { margin: auto 0 12px; font-family: var(--serif); font-size: 1.75rem; }
.pillar-grid p { margin: 0; color: var(--ink-soft); font-size: .8rem; }
.image-duo { background: var(--bg); }
.image-duo__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; align-items: start; }
.image-duo figure { margin: 0; }
.image-duo figure:last-child { margin-top: 120px; }
.image-duo img { width: 100%; aspect-ratio: 1.25; object-fit: cover; border-radius: var(--radius-md); }
.image-duo figure:last-child img { aspect-ratio: .9; }
.image-duo figcaption { margin-top: 11px; color: var(--ink-soft); font-size: .68rem; }
.centered-cta { text-align: center; background: var(--surface); }
.centered-cta .shell { max-width: 760px; }
.centered-cta p { max-width: 620px; margin: 24px auto 30px; color: var(--ink-soft); }
.centered-cta .visit-card__actions { justify-content: center; }

/* --- Sobre nós -------------------------------------------------------- */
.page-hero--about > .shell { display: grid; grid-template-columns: 1.02fr .98fr; gap: 70px; align-items: center; }
.page-hero--about .page-hero__copy { max-width: 620px; }
.page-hero--about h1 { font-size: clamp(3.2rem, 6.4vw, 6.4rem); }


/* =====================================================================
   13. ABOUT PAGE
   ===================================================================== */

.founder { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); gap: clamp(44px, 6vw, 92px); align-items: center; }
.founder__portrait { position: relative; margin: 0; }
.founder__portrait img { width: 100%; aspect-ratio: .82; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.founder__portrait::before { content: ""; position: absolute; inset: 7% -7% -7% 9%; border: 1px solid var(--salmon-glow); border-radius: var(--radius-lg); opacity: .45; }
.founder__portrait figcaption { position: relative; margin-top: 14px; color: var(--ink-soft); font-size: .7rem; }
.founder__badge { position: absolute; z-index: 1; left: 18px; top: 18px; padding: 8px 14px; border-radius: 999px; background: var(--ground); color: #fff; font-size: .62rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.founder__name { margin: 0 0 4px; font-family: var(--serif); font-size: clamp(2rem, 3vw, 2.7rem); font-weight: 500; }
.founder__role { display: block; margin-bottom: 22px; color: var(--salmon); font-size: .68rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.founder p { color: var(--ink-soft); }

/* Owner profiles: Zhuo and Lola, side by side, no carousel (spec 4.1, ABOUT-003). */
.owners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 34px); margin-top: clamp(30px, 4vw, 46px); }
.owner { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.owner__portrait { position: relative; aspect-ratio: .92; overflow: hidden; background: var(--ground); }
.owner__portrait img { width: 100%; height: 100%; object-fit: cover; }
.owner__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: clamp(24px, 3vw, 36px); }
.owner__role { color: var(--salmon); font-size: .64rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.owner h3 { margin: 10px 0 0; font-family: var(--serif); font-size: clamp(2rem, 3.2vw, 2.7rem); font-weight: 500; line-height: 1; }
.owner p { margin: 16px 0 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.7; }
.owner blockquote { margin: 20px 0 0; padding-left: 20px; border-left: 2px solid var(--salmon); font-family: var(--serif); font-size: 1.1rem; font-style: italic; line-height: 1.5; color: var(--ink); }
@media (max-width: 860px) { .owners { grid-template-columns: 1fr; } .owner__portrait { aspect-ratio: 1.4; } }

.quote-block { position: relative; margin: 34px 0 0; padding-left: 26px; border-left: 2px solid var(--salmon); }
.quote-block p { margin: 0; color: var(--ink); font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.7rem); font-style: italic; line-height: 1.45; }
.quote-block cite { display: block; margin-top: 14px; color: var(--ink-soft); font-size: .72rem; font-style: normal; letter-spacing: .06em; }

.timeline { border-top: 1px solid var(--line); }
.timeline article { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 30px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.timeline time, .timeline__step { color: var(--salmon); font-family: var(--serif); font-size: 1.45rem; line-height: 1.1; }
.timeline h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 1.4rem; font-weight: 600; }
.timeline p { margin: 0; color: var(--ink-soft); font-size: .88rem; }

.people-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 50px; }
.person-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.person-card img { width: 100%; aspect-ratio: .94; object-fit: cover; }
.person-card__body { padding: clamp(22px, 2.4vw, 30px); }
.person-card__body > span { color: var(--salmon); font-size: .62rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.person-card h3 { margin: 10px 0 0; font-family: var(--serif); font-size: 1.5rem; font-weight: 500; }
.person-card p { margin: 12px 0 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.6; }


/* =====================================================================
   14. RESPONSIVE
   Breakpoint overrides, appended over time and ordered widest to narrowest
   within each run. When a component needs a tweak at a size, add it here
   rather than duplicating the component above.
   ===================================================================== */

@media (max-width: 1100px) {
  .page-hero--about > .shell { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 1fr; }
  .founder__portrait { max-width: 460px; }
  .people-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .timeline article { grid-template-columns: 1fr; gap: 8px; }
  .people-grid { grid-template-columns: 1fr; }
  .founder__portrait::before { inset: 6% 0 -5% 7%; }
  .split-story__visual::before { inset: 8% 0 -8% 10%; }
}

/* Gallery */
.page-hero--simple { padding-bottom: 45px; }
.gallery-page { padding-top: 35px; }
.gallery-masonry { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 105px; gap: 16px; }
.gallery-tile { position: relative; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-md); background: var(--surface); cursor: zoom-in; box-shadow: var(--shadow-sm); }
.gallery-tile--wide { grid-column: span 7; grid-row: span 4; }
.gallery-tile--tall { grid-column: span 5; grid-row: span 5; }
.gallery-tile--square { grid-column: span 5; grid-row: span 4; }
.gallery-tile:nth-child(4n) { grid-column: span 7; }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.gallery-tile::after { content: ""; position: absolute; inset: 32% 0 0; background: linear-gradient(transparent, rgba(12,7,5,.9)); }
.gallery-tile span { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; color: #fff; font-size: .74rem; font-weight: 700; text-align: left; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.gallery-tile:hover img { transform: scale(1.04); }
.gallery-dialog { width: min(1200px, calc(100vw - 30px)); height: min(850px, calc(100svh - 30px)); padding: 0; border: 0; border-radius: var(--radius-md); background: #0d0908; color: #fff; overflow: hidden; box-shadow: var(--shadow-lg); }
.gallery-dialog::backdrop { background: rgba(8,5,4,.9); backdrop-filter: blur(10px); }
.gallery-dialog figure { width: 100%; height: 100%; margin: 0; display: grid; grid-template-rows: 1fr auto; }
.gallery-dialog figure img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.gallery-dialog figcaption { padding: 15px 70px; text-align: center; color: rgba(255,255,255,.86); font-size: .8rem; }
.gallery-dialog__close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(0,0,0,.38); color: #fff; font-size: 1.5rem; cursor: pointer; }
.gallery-dialog__nav { position: absolute; top: 50%; z-index: 3; width: 50px; height: 50px; display: grid; place-items: center; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: rgba(0,0,0,.38); color: #fff; cursor: pointer; }
.gallery-dialog__nav--prev { left: 18px; }
.gallery-dialog__nav--next { right: 18px; }
.gallery-dialog__nav svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Visit */
.page-hero--visit { padding-bottom: 35px; }
.visit-page { padding-top: 35px; }
.visit-page__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.visit-page__map { position: sticky; top: 96px; min-height: 650px; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.visit-page__map img { width: 100%; height: 100%; object-fit: cover; }
.map-floating-button { position: absolute; left: 22px; bottom: 22px; min-height: 48px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: #fff; color: #20140f; font-size: .72rem; font-weight: 900; box-shadow: var(--shadow-md); }
.map-floating-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
/* Third-party map is only fetched once the reader asks for it. */
.visit-page__map .map-frame { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; }
.visit-page__map .map-floating-button { z-index: 4; }
.map-invite {
  position: absolute; inset: 0; z-index: 3; padding: 26px;
  display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center;
  background: linear-gradient(rgba(20, 13, 10, .48), rgba(20, 13, 10, .8)); color: #f7ece3;
}
.map-invite > svg:first-child { width: 34px; fill: none; stroke: var(--salmon-glow); stroke-width: 1.6; stroke-linejoin: round; }
.map-invite strong { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 500; }
.map-invite > span { max-width: 30ch; color: rgba(247, 236, 227, .88); font-size: .84rem; line-height: 1.6; }
.map-invite .button { margin-top: 8px; --button-bg: #f7ece3; --button-color: #20140f; }
.map-invite small { max-width: 34ch; color: rgba(247, 236, 227, .74); font-size: .7rem; line-height: 1.6; }
.map-invite small a { border-bottom: 1px solid rgba(247, 236, 227, .45); }
.map-invite small a:hover { color: #fff; border-color: currentColor; }
.visit-page__map.is-loaded .map-invite { display: none; }
.visit-page__map.is-loaded > img { visibility: hidden; }
@media (max-width: 680px) {
  .map-invite { gap: 7px; padding: 20px; }
  .map-invite > svg:first-child { display: none; }
  .map-invite > span { font-size: .78rem; }
  .map-invite small { display: none; }
}
.visit-page__details { display: grid; gap: 14px; }
.visit-page__details article { padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.visit-page__details article > span { color: var(--salmon); font-size: .62rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.visit-page__details h2 { margin: 12px 0 9px; font-family: var(--serif); font-size: 2rem; font-weight: 500; }
.visit-page__details p { margin: 0; color: var(--ink-soft); font-size: .84rem; }
.visit-page__details small { display: block; margin-top: 14px; color: var(--sand); }
.visit-page__details small a { border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent); transition: color var(--transition), border-color var(--transition); }
.visit-page__details small a:hover { color: var(--salmon); border-color: currentColor; }
.practical-section { padding-top: 0; }
.practical-card { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items: end; padding: clamp(40px, 6vw, 76px); border-radius: var(--radius-lg); background: var(--panel); color: var(--panel-ink); }
.practical-card .eyebrow { color: var(--salmon); }
.practical-card p { margin: 0; color: var(--panel-soft); }

/* Legal + 404 */
.legal-page { padding: 70px 0 120px; }
.legal-page__inner { max-width: 850px; }
.legal-page h1 { margin: 14px 0 28px; font-family: var(--serif); font-size: clamp(3.2rem, 7vw, 6.5rem); font-weight: 500; line-height: .92; }
.legal-page h2 { margin: 48px 0 12px; font-family: var(--serif); font-size: 1.8rem; }
.legal-page p { color: var(--ink-soft); }
.legal-note { margin-top: 55px; padding: 20px; border-left: 3px solid var(--salmon); background: var(--surface); }
.legal-page__meta { margin: 0 0 30px; color: var(--ink-soft); font-size: .74rem; letter-spacing: .03em; }
.legal-page ul { margin: 0 0 18px; padding-left: 18px; display: grid; gap: 7px; color: var(--ink-soft); }
.legal-page li { line-height: 1.65; }
.legal-page a { border-bottom: 1px solid var(--line-strong); transition: color var(--transition), border-color var(--transition); }
.legal-page a:hover { color: var(--salmon); border-color: currentColor; }
.legal-summary { margin: 8px 0 6px; padding: 24px 26px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.legal-summary strong { display: block; margin-bottom: 12px; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.legal-summary ul { margin: 0; font-size: .88rem; }
.legal-table__wrap { overflow-x: auto; margin-top: 16px; }
.legal-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: .82rem; }
.legal-table th { text-align: left; padding: 0 16px 10px 0; border-bottom: 1px solid var(--line-strong); color: var(--ink); font-size: .62rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.legal-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); vertical-align: top; line-height: 1.55; }
.legal-table td:first-child { color: var(--ink); font-weight: 700; white-space: nowrap; }
.not-found { min-height: 68vh; width: var(--shell); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; padding-block: 90px; }
.not-found__art { min-height: 420px; position: relative; display: grid; place-items: center; border-radius: 50%; background: var(--panel); color: var(--panel-ink); overflow: hidden; }
.not-found__art > span { position: absolute; font-family: var(--serif); font-size: 11rem; opacity: .08; }
.not-found__art img { width: 140px; }
.not-found h1 { margin: 14px 0 20px; font-family: var(--serif); font-size: clamp(3rem, 6vw, 6rem); font-weight: 500; line-height: .92; }
.not-found p { margin-bottom: 28px; color: var(--ink-soft); }

@media (max-width: 1100px) {
  :root { --shell: min(100% - 36px, 980px); }
  .desktop-nav, .header-menu-cta { display: none; }
  .menu-toggle { display: grid; }
  .hero__stamp { right: 30px; }
  .dish-grid { gap: 14px; }
  .dish-card__body { padding: 18px; }
  .book-preview { grid-template-columns: .9fr 1.1fr; gap: 30px; }
  .menu-toolbar { grid-template-columns: auto 1fr; }
  .category-select { grid-column: 1 / -1; }
  .interactive-book { min-height: 520px; }
  .book-page__inner { padding: 36px; }
  .book-item { min-height: 66px; }
  .book-item__desc { -webkit-line-clamp: 1; }
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-masonry { grid-auto-rows: 90px; }
}

@media (max-width: 900px) {
  :root { --shell: min(100% - 30px, 760px); }
  .concept-notice__inner { padding-block: 7px; line-height: 1.35; }
  .site-header { height: 68px; }
  .site-header.is-scrolled { height: 62px; }
  .hero { min-height: 760px; }
  .hero__veil { background: linear-gradient(0deg, rgba(5,12,9,.85), rgba(5,12,9,.25) 70%), linear-gradient(90deg, rgba(5,12,9,.35), transparent); }
  .hero__content { justify-content: flex-end; padding-bottom: 100px; }
  .hero h1 { font-size: clamp(5rem, 21vw, 8.5rem); }
  .hero__stamp { display: none; }
  .hero__scroll { bottom: 24px; }
  .section-heading { grid-template-columns: 1fr; gap: 20px; }
  .dish-grid { grid-template-columns: 1fr; }
  .dish-card { display: grid; grid-template-columns: 1fr 1fr; }
  .dish-card__media { aspect-ratio: auto; min-height: 250px; }
  .split-story { grid-template-columns: 1fr; }
  .split-story__visual img { aspect-ratio: 1.15; }
  .book-preview { grid-template-columns: 1fr; }
  .book-mock { height: 510px; }
  .editorial-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 340px 230px 230px; }
  .editorial-gallery__item--1 { grid-column: 1 / 3; grid-row: 1; }
  .editorial-gallery__item--2 { grid-column: 1; grid-row: 2; }
  .editorial-gallery__item--3 { grid-column: 2; grid-row: 2; }
  .editorial-gallery__item--4 { grid-column: 1 / 3; grid-row: 3; }
  .visit-card { grid-template-columns: 1fr; }
  .visit-card__media { min-height: 380px; }
  .site-footer__main { grid-template-columns: 1fr; gap: 50px; }
  .page-hero--restaurant > .shell { grid-template-columns: 1fr; }
  .page-hero__seal { opacity: .22; right: -20px; }
  .manifesto__grid { grid-template-columns: 1fr; }
  .manifesto__mark { max-width: 430px; min-height: 330px; }
  .image-duo__grid { grid-template-columns: 1fr; }
  .image-duo figure:last-child { margin-top: 0; margin-left: 15%; }
  .image-duo figure:last-child img { aspect-ratio: 1.15; }
  .menu-toolbar-wrap { top: 68px; }
  .interactive-book { height: 680px; min-height: 0; display: block; max-width: 600px; margin-inline: auto; }
  .book-page--left { display: none; }
  .book-page--right { width: 100%; height: 100%; border-radius: 18px; box-shadow: inset 4px 0 0 rgba(255,255,255,.35), inset -4px 0 0 rgba(0,0,0,.05); }
  .book-spine { display: none; }
  .turning-page { width: 100%; left: 0 !important; transform-origin: center !important; }
  .turning-page__face { border-radius: 18px !important; }
  .turning-page__face--back { display: none; }
  .book-corner--left { display: none; }
  .book-hint { bottom: 18px; font-size: .7rem; }
  .book-page__inner { padding: 48px; }
  .book-controls { grid-template-columns: 110px 1fr 110px; }
  .menu-list-grid { grid-template-columns: 1fr; }
  .dish-dialog__layout { grid-template-columns: 1fr; }
  .dish-dialog__media { min-height: 330px; max-height: 40vh; }
  .dish-dialog__content { padding: 34px; }
  .dish-dialog { overflow-y: auto; }
  .visit-page__grid { grid-template-columns: 1fr; }
  .visit-page__map { position: relative; top: auto; }
  .visit-page__map { min-height: 520px; }
  .practical-card { grid-template-columns: 1fr; gap: 28px; }
  .gallery-masonry { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; }
  .gallery-tile--wide, .gallery-tile--tall, .gallery-tile--square, .gallery-tile:nth-child(4n) { grid-column: span 1; grid-row: span 1; }
}

@media (max-width: 680px) {
  :root { --shell: calc(100% - 24px); }
  body { font-size: 15px; }
  .site-header { height: 64px; }
  .brand__mark { width: 36px; height: 36px; }
  .brand__type strong { font-size: .95rem; }
  .lang-switch, .theme-toggle { width: 38px; height: 38px; min-width: 38px; }
  .menu-toggle { width: 38px; height: 38px; }
  .hero { min-height: 690px; }
  .hero__content { padding-bottom: 82px; }
  .hero__eyebrow { font-size: .58rem; }
  .hero h1 { font-size: clamp(4.5rem, 24vw, 7rem); }
  .hero h1 span:last-child { margin-left: 22px; letter-spacing: .1em; }
  .hero__content > p { margin-top: 28px; }
  .hero__actions { width: 100%; }
  .hero__actions .button { flex: 1; padding-inline: 14px; }
  .section { padding-block: 76px; }
  .section-heading { margin-bottom: 34px; }
  .section-heading h2, .split-story h2, .book-preview h2, .visit-card h2, .manifesto h2, .centered-cta h2, .practical-card h2 { font-size: clamp(2.35rem, 12vw, 3.6rem); }
  .dish-card { grid-template-columns: 1fr; }
  .dish-card__media { min-height: 230px; }
  .dish-card__body { min-height: 135px; }
  .split-story__visual img { aspect-ratio: .9; }
  .book-mock { height: 420px; }
  .book-mock__back, .book-mock__cover, .book-mock__pages { height: 380px; width: min(310px, 78%); }
  .book-mock__cover > span { font-size: 2.6rem; }
  .editorial-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -12px; padding-inline: 12px; scrollbar-width: none; }
  .editorial-gallery::-webkit-scrollbar { display: none; }
  .editorial-gallery__item { flex: 0 0 84%; min-height: 370px; scroll-snap-align: start; }
  .visit-card__media { min-height: 290px; }
  .visit-card__content { padding: 34px 24px; }
  .visit-details { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .site-footer__bottom { align-items: flex-start; gap: 20px; }
  .page-hero { padding: 54px 0 76px; }
  .page-hero h1 { font-size: clamp(3.25rem, 16vw, 5.3rem); }
  .page-hero__seal { display: none; }
  .page-hero--restaurant { padding-top: 42px; }
  .page-hero--restaurant h1 { font-size: clamp(3rem, 14vw, 4.8rem); }
  .manifesto__mark { min-height: 290px; }
  .pillar-grid { grid-template-columns: 1fr; }
  .pillar-grid article { min-height: 240px; }
  .image-duo figure:last-child { margin-left: 0; }
  .menu-toolbar-wrap { top: 64px; margin-inline: 0; }
  .menu-toolbar { grid-template-columns: 1fr; }
  .view-switch { width: 100%; }
  .view-switch button { flex: 1; }
  .category-select { grid-column: auto; }
  .filter-chips { margin-inline: -12px; padding-inline: 12px; }
  .book-view { padding-top: 24px; }
  .book-ribbon { font-size: .64rem; }
  .interactive-book { height: 620px; }
  .book-page__inner { padding: 38px 30px; }
  .book-page__inner::before { inset: 13px; }
  .book-cover img { width: 82px; }
  .book-cover h2 { font-size: 3.1rem; }
  .book-cover p { margin-top: 38px; }
  .book-menu-page h2 { font-size: 2.65rem; }
  .book-menu-page__intro { font-size: .74rem; margin-bottom: 14px; }
  .book-item { min-height: 73px; }
  .book-item__name { font-size: 1rem; }
  .book-item__desc { font-size: .68rem; }
  .book-controls { grid-template-columns: 48px 1fr 48px; gap: 12px; margin-top: 24px; }
  .book-controls > button { width: 48px; padding: 0; }
  .book-controls > button span { display: none; }
  .menu-list-category { padding-block: 42px; }
  .menu-list-category > header { grid-template-columns: 1fr; gap: 12px; }
  .menu-list-category > header span, .menu-list-category > header h2, .menu-list-category > header p { grid-column: 1; grid-row: auto; }
  .menu-list-item { grid-template-columns: 116px 1fr; min-height: 128px; }
  .menu-list-item__copy { padding: 14px; }
  .menu-list-item__top { display: grid; gap: 3px; }
  .menu-list-item__top strong { font-size: 1rem; }
  .dish-dialog { width: calc(100vw - 18px); max-height: calc(100svh - 18px); border-radius: 22px; }
  .dish-dialog__media { min-height: 270px; max-height: 34vh; }
  .dish-dialog__content { padding: 28px 22px 24px; }
  .dish-dialog__content h2 { font-size: 2.8rem; }
  .dish-dialog__meta { grid-template-columns: 1fr; gap: 14px; }
  .dish-dialog__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .dish-dialog__actions .button:nth-child(2) { grid-column: 1 / 3; grid-row: 1; }
  .gallery-masonry { grid-template-columns: 1fr; grid-auto-rows: 320px; }
  .gallery-dialog figcaption { padding-inline: 55px; }
  .gallery-dialog__nav { width: 42px; height: 42px; }
  .gallery-dialog__nav--prev { left: 8px; }
  .gallery-dialog__nav--next { right: 8px; }
  .visit-page__map { min-height: 400px; }
  .not-found { grid-template-columns: 1fr; padding-block: 50px 90px; }
  .not-found__art { min-height: 300px; }
}

@media (max-width: 420px) {
  .brand__type { display: none; }
  .header-actions { gap: 4px; }
  .hero h1 { font-size: 4.65rem; }
  .hero__actions { display: grid; }
  .hero__actions .button { width: 100%; }
  .interactive-book { height: 590px; }
  .book-page__inner { padding: 34px 25px; }
  .book-item__desc { display: none; }
  .book-item { min-height: 62px; }
  .book-menu-page__intro { max-width: 100%; }
  .menu-list-item { grid-template-columns: 96px 1fr; }
  .footer-links { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .concept-notice, .site-header, .menu-toolbar-wrap, .book-view, .site-footer, .dish-dialog { display: none !important; }
  body { background: #fff; color: #111; }
  .menu-list-view { display: block !important; }
  .menu-list-category { break-inside: avoid; }
  .menu-list-item { box-shadow: none; }
}

/* -------------------------------------------------------------------------
   Responsive refinement v2
   Mobile-first resilience for narrow phones, tablets, landscape screens and
   ultra-wide displays. Kept at the end so it can safely refine the compiled
   design system without changing the generated HTML structure.
   ------------------------------------------------------------------------- */

html { overflow-x: clip; }
body { min-width: 0; }

main:focus { outline: none; }
main [id] { scroll-margin-top: 96px; }

/* Progressive enhancement: the full menu remains readable when menu.js is
   blocked, fails to load or encounters invalid data. JavaScript adds
   .is-enhanced only after all required controls are available. */
.menu-experience:not(.is-enhanced) .menu-toolbar-wrap,
.menu-experience:not(.is-enhanced) .book-view { display: none !important; }
.menu-experience:not(.is-enhanced) .menu-list-view[hidden] { display: block !important; }

/* With JavaScript unavailable, expose the regular navigation instead of a
   non-functional hamburger and keep it horizontally scrollable on phones. */
html.no-js [data-theme-toggle],
html.no-js [data-notice-dismiss],
html.no-js .menu-toggle { display: none !important; }

@media screen and (max-width: 1100px) {
  html.no-js .site-header,
  html.no-js .site-header.is-scrolled {
    position: relative;
    height: auto;
  }
  html.no-js .site-header__inner {
    height: auto;
    min-height: 66px;
    flex-wrap: wrap;
    padding-block: 9px;
  }
  html.no-js .desktop-nav {
    display: flex !important;
    order: 3;
    flex: 1 0 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 2px 0 6px;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
  }
  html.no-js .desktop-nav .nav-link { flex: 0 0 auto; white-space: nowrap; }
}

/* Grid and flex children must be allowed to shrink. This prevents long copy,
   intrinsic SVG dimensions and CTA groups from widening their parent card. */
.site-header__inner > *,
.header-actions,
.hero__content,
.section-heading > *,
.dish-card__body > *,
.split-story > *,
.book-preview > *,
.visit-card > *,
.page-hero--restaurant > .shell > *,
.page-hero--about > .shell > *,
.manifesto__grid > *,
.image-duo__grid > *,
.founder > *,
.visit-page__grid > *,
.practical-card > *,
.menu-toolbar > *,
.dish-dialog__layout > * { min-width: 0; }

.visit-card__media,
.page-hero__image,
.split-story__visual,
.visit-page__map { min-width: 0; overflow: hidden; }

.visit-card__media img,
.page-hero__image img,
.split-story__visual img,
.visit-page__map img { width: 100%; max-width: 100%; }

.page-hero h1,
.visit-card h2,
.visit-details strong,
.visit-page__details h2,
.footer-links a,
.practical-card h2 { overflow-wrap: break-word; }

button,
a,
input,
select { touch-action: manipulation; }

.menu-search input { min-height: 40px; }
.breadcrumbs a { min-height: 40px; padding-inline: 8px; display: inline-flex; align-items: center; }

.concept-notice__inner > span { min-width: 0; }
.concept-notice button {
  width: 40px;
  min-width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
}

/* The location preview used to grow to the intrinsic SVG width and push the
   content outside the viewport. Explicitly constrain both grid tracks. */
.visit-card { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.visit-card__media img { min-width: 0; }

@media screen and (hover: none), screen and (pointer: coarse) {
  .button:hover,
  .icon-button:hover,
  .dish-card:hover,
  .menu-list-item:hover,
  .editorial-gallery__item:hover img,
  .gallery-tile:hover img { transform: none; }

  .book-mock:hover .book-mock__cover { transform: rotateY(-10deg) rotateZ(4deg); }
  .book-mock:hover .book-mock__pages { transform: rotateY(-17deg) rotateZ(4deg) translate(26px, -5px); }
}

@media screen and (min-width: 1600px) {
  :root { --shell: min(1380px, calc(100vw - 112px)); }
  .dish-grid { gap: 28px; }
  .section-heading { gap: 92px; }
  .visit-card { min-height: 640px; }
}

@media screen and (max-width: 1100px) {
  /* Decorative outlines should never contribute to page width after the
     corresponding two-column layouts collapse. */
  .split-story__visual::before,
  .founder__portrait::before { right: 0; }

  .page-hero__seal { right: 0; }
  .visit-card { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
}

@media screen and (max-width: 900px) {
  :root {
    --radius-md: 18px;
    --radius-lg: 28px;
  }

  .hero {
    min-height: clamp(640px, calc(100svh - 68px), 760px);
  }
  .hero__content {
    padding-top: 76px;
    padding-bottom: 88px;
  }
  .hero__actions .button { min-height: 50px; }

  .section { padding-block: clamp(72px, 10vw, 96px); }
  .section-heading { margin-bottom: 42px; }
  .split-story { gap: 44px; }
  .split-story__visual img { aspect-ratio: 4 / 3; }
  .book-preview { gap: 38px; }

  .visit-card {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }
  .visit-card__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .visit-card__media img { height: 100%; object-fit: cover; }
  .visit-card__content { width: 100%; }

  .page-hero {
    padding-top: clamp(48px, 7vw, 68px);
    padding-bottom: clamp(64px, 9vw, 88px);
  }
  .page-hero--restaurant > .shell,
  .page-hero--about > .shell { gap: 46px; }
  .page-hero__image img { aspect-ratio: 4 / 3; }

  .manifesto__grid { gap: 42px; }
  .image-duo__grid { gap: 16px; }

  .interactive-book {
    width: min(100%, 640px);
    height: min(680px, 72svh);
    min-height: 600px;
  }

  .visit-page__map {
    min-height: 320px;
    aspect-ratio: auto;
  }
  .visit-page__map img { height: 100%; object-fit: cover; }
}

@media screen and (max-width: 680px) {
  .shell {
    width: min(
      calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)),
      100%
    );
  }

  body { font-size: 15px; }

  .concept-notice { font-size: .69rem; }
  .concept-notice__inner {
    min-height: 0;
    padding-block: 5px;
    gap: 8px;
    text-align: left;
    line-height: 1.32;
  }
  .concept-notice button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin-right: -8px;
    font-size: 1.25rem;
  }

  .site-header,
  .site-header.is-scrolled { height: 66px; }
  .site-header__inner { gap: 10px; }
  .brand { gap: 7px; min-height: 44px; }
  .brand__mark { width: 34px; height: 34px; }
  .brand__type {
    display: grid !important;
    letter-spacing: .1em;
  }
  .brand__type strong { font-size: .8rem; letter-spacing: .09em; }
  .brand__type span { margin-top: 4px; font-size: .48rem; letter-spacing: .22em; }
  .header-actions { gap: 4px; }
  .lang-switch,
  .icon-button,
  .menu-toggle,
  .theme-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .mobile-menu__panel {
    width: min(100%, 430px);
    padding:
      max(20px, env(safe-area-inset-top))
      max(20px, calc(20px + env(safe-area-inset-right)))
      max(22px, env(safe-area-inset-bottom))
      max(20px, calc(20px + env(safe-area-inset-left)));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mobile-menu nav { margin-top: clamp(30px, 7vh, 54px); }
  .mobile-menu .nav-link {
    min-height: 48px;
    padding: 9px 0;
    font-size: clamp(1.8rem, 8.4vw, 2.8rem);
  }
  .mobile-menu__footer { flex-wrap: wrap; padding-top: 20px; }

  .hero {
    min-height: clamp(590px, calc(100svh - 66px), 700px);
  }
  .hero__veil {
    background:
      linear-gradient(0deg, rgba(10, 7, 5, .9) 0%, rgba(10, 7, 5, .54) 55%, rgba(10, 7, 5, .18) 100%),
      linear-gradient(90deg, rgba(10, 7, 5, .3), transparent 80%);
  }
  .hero__content {
    justify-content: flex-end;
    padding-top: 62px;
    padding-bottom: 64px;
  }
  .hero__eyebrow {
    max-width: 100%;
    margin-bottom: 17px;
    font-size: .58rem;
    line-height: 1.45;
  }
  .hero h1 {
    max-width: 100%;
    font-size: clamp(4.15rem, 21.5vw, 6.2rem);
    line-height: .67;
  }
  .hero h1 span:last-child {
    margin-left: clamp(18px, 7vw, 32px);
    letter-spacing: .1em;
  }
  .hero__content > p {
    margin: 26px 0 22px;
    font-size: clamp(1.05rem, 5vw, 1.25rem);
  }
  .hero__actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .hero__actions .button { width: 100%; min-height: 50px; }
  .hero__scroll { display: none; }
  .hero__eyebrow,
  .hero h1,
  .hero__content > p,
  .hero__actions { animation-delay: .08s; animation-duration: .62s; }

  .section { padding-block: 64px; }
  .section-heading { gap: 16px; margin-bottom: 32px; }
  .section-heading h2,
  .split-story h2,
  .book-preview h2,
  .visit-card h2,
  .manifesto h2,
  .centered-cta h2,
  .practical-card h2 {
    font-size: clamp(2.35rem, 11.5vw, 3.35rem);
    line-height: .98;
  }
  .lead { font-size: 1.03rem; line-height: 1.68; }

  .dish-grid { gap: 16px; }
  .dish-card { border-radius: 18px; }
  .dish-card__media {
    min-height: 0;
    aspect-ratio: 1.45;
  }
  .dish-card__body {
    min-height: 0;
    padding: 20px;
    gap: 14px;
  }
  .dish-card h3 { font-size: 1.4rem; }

  .split-story { gap: 40px; }
  .split-story__visual img { aspect-ratio: 1.08; }
  .split-story__content .lead { margin: 24px 0 30px; }
  .value-list article {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 0;
  }

  .book-mock { height: clamp(340px, 104vw, 420px); }
  .book-mock__back,
  .book-mock__cover,
  .book-mock__pages {
    width: min(310px, 78%);
    height: min(380px, 92vw);
  }

  .editorial-gallery {
    margin-inline: -12px;
    padding: 2px 12px 12px;
    scroll-padding-inline: 12px;
    overscroll-behavior-inline: contain;
  }
  .editorial-gallery__item {
    flex-basis: min(84%, 330px);
    min-height: clamp(300px, 92vw, 370px);
  }
  .section-action { margin-top: 22px; justify-content: flex-start; }

  .visit-card { border-radius: 26px; }
  .visit-card__media {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .visit-card__content { padding: 32px 22px; }
  .visit-card__content h2 { font-size: clamp(2.45rem, 12vw, 3.45rem); }
  .visit-details {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding-block: 25px;
    margin-block: 18px;
  }
  .visit-details strong { font-size: 1.08rem; }
  .visit-card__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .visit-card__actions .button { width: 100%; }

  .site-footer { padding: 58px 0 22px; }
  .site-footer__main { gap: 38px; padding-bottom: 42px; }
  .footer-brand p { margin-top: 17px; }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 22px; }
  .footer-links > div { min-width: 0; }
  .footer-links a,
  .footer-theme {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    line-height: 1.35;
  }
  .site-footer__bottom { flex-wrap: wrap; }

  .breadcrumbs {
    height: 48px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .breadcrumbs::-webkit-scrollbar { display: none; }
  .breadcrumbs a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .page-hero {
    padding-top: 40px;
    padding-bottom: 58px;
  }
  .page-hero h1,
  .page-hero--restaurant h1,
  .page-hero--about h1 {
    margin: 12px 0 20px;
    font-size: clamp(2.9rem, 14vw, 4.4rem);
    line-height: .94;
  }
  .page-hero__copy > p { font-size: 1rem; line-height: 1.68; }
  .page-hero--restaurant,
  .page-hero--about { padding-top: 34px; }
  .page-hero--restaurant > .shell,
  .page-hero--about > .shell { gap: 34px; }
  .page-hero__image img { aspect-ratio: 4 / 3; border-radius: 24px; }

  .manifesto__grid { gap: 32px; }
  .manifesto__mark { min-height: 250px; max-width: 100%; }
  .manifesto__mark img { width: 104px; }
  .manifesto__mark span { right: 24px; bottom: 20px; font-size: 3rem; }
  .pillar-grid { gap: 12px; margin-top: 34px; }
  .pillar-grid article { min-height: 200px; padding: 24px; }
  .image-duo figure:last-child { margin-left: 0; }

  .founder { gap: 34px; }
  .founder__portrait { width: 100%; max-width: 100%; }
  .founder__portrait img { aspect-ratio: .9; border-radius: 24px; }
  .timeline article { padding: 22px 0; }
  .people-grid { gap: 14px; margin-top: 34px; }
  .person-card img { aspect-ratio: 1.05; }
  .quote-block { margin-top: 28px; padding-left: 20px; }

  /* On phones the complete filter stack should scroll away with the page. A
     230px sticky panel left too little room for the interactive book. */
  .menu-experience { padding-bottom: 72px; }
  .menu-toolbar-wrap,
  .site-header.is-scrolled + main .menu-toolbar-wrap {
    position: relative;
    top: auto;
    z-index: 10;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(18px);
  }
  .menu-toolbar { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .view-switch { width: 100%; }
  .view-switch button { min-width: 0; min-height: 46px; height: 46px; }
  .menu-search,
  .category-select select { height: 48px; }
  /* 16px prevents Safari from zooming the page when the search field opens. */
  .menu-search input,
  .category-select select { font-size: 16px; }
  .filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 2px 0 0;
    padding: 2px 0 1px;
    overflow: visible;
  }
  .filter-chips button {
    min-height: 42px;
    height: 42px;
    padding-inline: 14px;
  }

  .book-view { padding-top: 28px; }
  .book-ribbon {
    max-width: 100%;
    margin-bottom: 14px;
    padding: 8px 12px;
    font-size: .66rem;
    line-height: 1.35;
  }
  .interactive-book {
    width: 100%;
    height: clamp(540px, 72svh, 620px);
    min-height: 540px;
    border-radius: 18px;
  }
  .book-page__inner { padding: 36px 28px; }
  .book-page__inner::before { inset: 12px; }
  .book-cover img { width: 78px; }
  .book-cover h2 { font-size: 2.9rem; }
  .book-menu-page h2 { font-size: clamp(2.2rem, 11vw, 2.7rem); }
  .book-menu-page__intro { margin-bottom: 12px; }
  .book-item { min-height: 70px; }
  .book-controls {
    width: 100%;
    grid-template-columns: 50px minmax(0, 1fr) 50px;
    gap: 10px;
    margin-top: 20px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: var(--shadow-sm);
  }
  .book-controls > button { width: 50px; height: 50px; padding: 0; }
  .book-controls > button span { display: none; }
  .book-progress { min-width: 0; }

  .menu-list-view { padding-top: 28px; }
  .menu-list-category { padding-block: 38px; }
  .menu-list-category > header { margin-bottom: 22px; }
  .menu-list-item {
    grid-template-columns: 104px minmax(0, 1fr);
    min-height: 118px;
    border-radius: 16px;
  }
  .menu-list-item__copy { padding: 14px; }
  .menu-list-item__top { gap: 8px; }
  .menu-list-item__top strong { font-size: 1rem; }
  .menu-list-item__copy > small { margin-block: 6px 9px; }

  .dish-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .dish-dialog__layout { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .dish-dialog__media {
    min-height: 210px;
    height: min(31dvh, 260px);
    max-height: none;
  }
  .dish-dialog__content { padding: 26px 21px 22px; }
  .dish-dialog__content h2 { font-size: clamp(2.35rem, 12vw, 3rem); }
  .dish-dialog__meta { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .dish-dialog__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }
  .dish-dialog__actions .button:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .dish-dialog__close {
    top: 12px;
    right: 12px;
    width: 46px;
    height: 46px;
  }

  .gallery-page { padding-top: 22px; }
  .gallery-masonry {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 12px;
  }
  .gallery-tile,
  .gallery-tile--wide,
  .gallery-tile--tall,
  .gallery-tile--square,
  .gallery-tile:nth-child(4n) {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
  .gallery-tile--wide { aspect-ratio: 16 / 10; }
  .gallery-tile--tall { aspect-ratio: 4 / 5; }
  .gallery-tile--square { aspect-ratio: 1; }
  .gallery-dialog {
    width: calc(100vw - 12px);
    height: calc(100dvh - 12px);
    border-radius: 18px;
  }
  .gallery-dialog__close { top: 10px; right: 10px; }
  .gallery-dialog figcaption { padding: 13px 52px max(13px, env(safe-area-inset-bottom)); }

  .visit-page { padding-top: 18px; }
  .visit-page__grid { gap: 14px; }
  .visit-page__map {
    min-height: 320px;
    aspect-ratio: auto;
    border-radius: 24px;
  }
  .map-floating-button {
    left: 14px;
    right: 14px;
    bottom: 14px;
    justify-content: center;
    min-height: 48px;
  }
  .visit-page__details article { padding: 24px 22px; }
  .visit-page__details h2 { font-size: clamp(1.65rem, 8vw, 2rem); }
  .visit-page__details small a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
  }
  .practical-card { gap: 22px; padding: 32px 24px; border-radius: 24px; }

  .legal-page { padding: 52px 0 84px; }
  .legal-page h1 { font-size: clamp(2.8rem, 14vw, 4.2rem); }
  .legal-page h2 { margin-top: 38px; }
  .legal-note { margin-top: 40px; }

  .not-found { gap: 34px; padding-block: 42px 76px; }
  .not-found__art { min-height: 270px; }
  .not-found__art > span { font-size: 8rem; }
  .not-found__art img { width: 104px; }
}

@media screen and (max-width: 480px) {
  .hero { min-height: clamp(570px, calc(100svh - 66px), 660px); }
  .hero h1 { font-size: clamp(4rem, 21vw, 5.35rem); }

  .section { padding-block: 58px; }
  .dish-card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .dish-card__body > strong { padding-top: 3px; }

  .book-mock__cover > small { margin-bottom: 38px; }
  .visit-card__content { padding: 30px 20px; }

  .menu-list-item { grid-template-columns: 92px minmax(0, 1fr); }
  .menu-list-item__copy { padding: 12px; }
  .menu-list-item__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .menu-list-item__copy > small { -webkit-line-clamp: 2; }

  .book-page__inner { padding: 32px 22px; }
  .book-item__desc { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .book-item { min-height: 66px; }

  .centered-cta .visit-card__actions { width: 100%; }
}

@media screen and (max-width: 380px) {
  .site-header__inner { gap: 5px; }
  .brand { gap: 5px; }
  .brand__mark { width: 32px; height: 32px; }
  .brand__type strong { font-size: .72rem; }
  .brand__type span { font-size: .43rem; }
  .header-actions { gap: 2px; }
  .lang-switch,
  .icon-button,
  .menu-toggle,
  .theme-toggle { width: 42px; min-width: 42px; height: 42px; }

  .mobile-menu .nav-link { font-size: clamp(1.7rem, 8vw, 2.35rem); }
  .mobile-menu__footer { display: grid; }

  .hero h1 { font-size: clamp(3.85rem, 20.5vw, 4.65rem); }
  .hero__eyebrow { letter-spacing: .13em; }

  .filter-chips button { flex: 1 1 calc(50% - 7px); }
  .book-page__inner { padding-inline: 19px; }
  .book-menu-page h2 { font-size: 2.15rem; }
  .book-item__name { font-size: .93rem; }

  .footer-links { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

@media screen and (max-width: 300px) {
  .brand__type { display: none !important; }
}

@media screen and (max-width: 900px) and (max-height: 700px) {
  .mobile-menu nav { margin-top: 20px; }
  .mobile-menu .nav-link { min-height: 42px; padding-block: 5px; font-size: 1.65rem; }
  .mobile-menu__footer { padding-top: 14px; }

  .hero { min-height: 550px; }
  .hero__content { padding-top: 46px; padding-bottom: 50px; }
  .hero h1 { font-size: clamp(3.8rem, 18vw, 5.2rem); }
  .hero__content > p { margin-block: 20px 16px; }

  .page-hero { padding-block: 34px 48px; }
  .interactive-book { height: 540px; min-height: 520px; }
  .dish-dialog__media { min-height: 160px; height: 25dvh; }
}

/* -------------------------------------------------------------------------
   Navigation and menu controls v3
   Fixes the mobile overlay containing-block bug and gives every navigation
   control a consistent, touch-friendly treatment across phones, tablets,
   landscape screens and desktop.
   ------------------------------------------------------------------------- */

body.nav-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.menu-toggle {
  position: relative;
  place-items: center;
  overflow: hidden;
}
.menu-toggle span {
  position: absolute;
  left: 50%;
  width: 19px;
  height: 1.5px;
  margin: 0;
  border-radius: 999px;
  transform: translate(-50%, -4px);
  transform-origin: center;
}
.menu-toggle span + span {
  margin: 0;
  transform: translate(-50%, 4px);
}
.menu-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--salmon) 58%, var(--line));
}

/* The overlay is now a direct child of <body>. This avoids fixed-position
   elements being constrained to the height of the backdrop-filtered header. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 500;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}
.mobile-menu[hidden] { display: none !important; }
.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(223, 103, 77, .16), transparent 38%),
    rgba(15, 9, 7, .72);
  backdrop-filter: blur(8px) saturate(115%);
  opacity: 0;
  animation: none;
  transition: opacity .25s ease;
}
.mobile-menu__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(480px, 92vw);
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding:
    max(24px, env(safe-area-inset-top))
    max(28px, calc(24px + env(safe-area-inset-right)))
    max(24px, env(safe-area-inset-bottom))
    28px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 112% -4%, color-mix(in srgb, var(--salmon) 12%, transparent), transparent 36%),
    linear-gradient(155deg, color-mix(in srgb, var(--surface) 98%, var(--sand) 2%), var(--surface));
  border-left: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  box-shadow: -28px 0 80px rgba(10, 6, 4, .24);
  transform: translate3d(102%, 0, 0);
  animation: none;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
.mobile-menu__panel::before {
  content: "元気";
  position: absolute;
  right: -28px;
  top: 19%;
  color: color-mix(in srgb, var(--salmon) 6%, transparent);
  font-family: var(--serif);
  font-size: clamp(8rem, 30vw, 13rem);
  line-height: 1;
  writing-mode: vertical-rl;
  pointer-events: none;
  user-select: none;
}
.mobile-menu.is-open { pointer-events: auto; }
.mobile-menu.is-open .mobile-menu__backdrop { opacity: 1; }
.mobile-menu.is-open .mobile-menu__panel { transform: translate3d(0, 0, 0); }
.mobile-menu.is-closing { pointer-events: none; }

.mobile-menu__top,
.mobile-menu nav,
.mobile-menu__footer {
  position: relative;
  z-index: 1;
}
.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.mobile-menu__top .brand { min-width: 0; }
.mobile-menu__top .icon-button {
  flex: 0 0 auto;
  width: 48px;
  min-width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.mobile-menu__top .icon-button:hover {
  border-color: color-mix(in srgb, var(--salmon) 52%, var(--line));
  background: color-mix(in srgb, var(--salmon) 7%, var(--surface));
  transform: rotate(6deg);
}

.mobile-menu nav {
  counter-reset: mobile-nav;
  display: grid;
  gap: 7px;
  margin-top: clamp(28px, 6vh, 58px);
}
.mobile-menu .nav-link {
  counter-increment: mobile-nav;
  min-height: 62px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 18px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.7rem, 5vw, 2.45rem);
  line-height: 1;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.mobile-menu .nav-link::before {
  content: counter(mobile-nav, decimal-leading-zero);
  color: var(--sand);
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .12em;
}
.mobile-menu .nav-link::after {
  content: "";
  position: static;
  width: 9px;
  height: 9px;
  border: 0;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  background: transparent;
  opacity: .45;
  transform: rotate(45deg);
  transform-origin: center;
  transition: opacity var(--transition), transform var(--transition);
}
.mobile-menu .nav-link:hover,
.mobile-menu .nav-link:focus-visible {
  border-color: var(--line);
  background: color-mix(in srgb, var(--salmon) 6%, var(--surface));
  transform: translateX(-3px);
}
.mobile-menu .nav-link:hover::after,
.mobile-menu .nav-link:focus-visible::after {
  opacity: 1;
  transform: translateX(2px) rotate(45deg);
}
.mobile-menu .nav-link.is-active {
  border-color: color-mix(in srgb, var(--salmon) 34%, var(--line));
  background: color-mix(in srgb, var(--salmon) 8%, var(--surface));
  color: var(--salmon);
}
.mobile-menu .nav-link.is-active::before { color: var(--salmon); }
.mobile-menu .nav-link.is-active::after { opacity: .9; }

.mobile-menu__footer {
  margin-top: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  color: var(--ink-soft);
  font-size: .75rem;
  line-height: 1.45;
  box-shadow: var(--shadow-sm);
}
.mobile-menu__footer a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid color-mix(in srgb, var(--salmon) 34%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--salmon) 6%, var(--surface));
  color: var(--salmon);
  font-weight: 900;
  white-space: nowrap;
}

/* Native select retained for maximum reliability on iOS and Android; the
   closed control is fully styled while the OS still provides its best picker. */
.category-select {
  position: relative;
  display: block;
  min-width: 0;
  color: var(--ink-soft);
}
.category-select::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 17px;
  top: 50%;
  width: 17px;
  height: 14px;
  color: var(--sand);
  background:
    linear-gradient(currentColor 0 0) 0 1px / 17px 1.5px no-repeat,
    linear-gradient(currentColor 0 0) 0 6px / 12px 1.5px no-repeat,
    linear-gradient(currentColor 0 0) 0 11px / 15px 1.5px no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
  transition: color var(--transition), transform var(--transition);
}
.category-select::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 18px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-68%) rotate(45deg);
  pointer-events: none;
  transition: color var(--transition), transform var(--transition);
}
.category-select select {
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 0 46px 0 48px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 98%, var(--sand) 2%), var(--surface));
  color: var(--ink-soft);
  box-shadow: 0 8px 26px rgba(19, 12, 8, .045);
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), color var(--transition), background var(--transition);
}
.category-select select::-ms-expand { display: none; }
.category-select select:hover {
  border-color: color-mix(in srgb, var(--sand) 60%, var(--line));
  color: var(--ink);
}
.category-select:focus-within select {
  border-color: var(--sand);
  color: var(--ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sand) 15%, transparent), 0 12px 32px rgba(19, 12, 8, .07);
}
.category-select:focus-within::after { transform: translateY(-30%) rotate(225deg); }
.category-select.has-value::before { color: var(--salmon); transform: translateY(-50%) scaleX(1.06); }
.category-select.has-value select {
  border-color: color-mix(in srgb, var(--salmon) 30%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--salmon) 5%, var(--surface)), var(--surface));
  color: var(--ink);
}
.category-select option {
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
}
/* Custom category picker: the native option list cannot be styled, so once JS
   is available the select is swapped for a listbox that matches the page. */
.category-select.is-enhanced > select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.category-select.is-enhanced::before, .category-select.is-enhanced::after { display: none; }


/* =====================================================================
   15. CATEGORY PICKER
   Replaces the native <select> option list, which cannot be styled.
   Built by menu.js; the select stays in the markup as the no-JS fallback.
   ===================================================================== */



/* =====================================================================
   17. MENU OFFERS
   Rodízio, Lunch Menu and Main Menu cards. Spec v3.0 section 5.1 requires
   these to be visible before the reader reaches the interactive book.
   The Rodízio availability chip is computed in menu-offers.js from the
   weekday rule; prices and conditions await the restaurant.
   ===================================================================== */

.menu-offers { padding-block: clamp(30px, 4vw, 48px) 0; }
.menu-offers__head { max-width: 720px; margin-bottom: clamp(22px, 3vw, 34px); }
.menu-offers__head h2 { margin: 12px 0 10px; font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.menu-offers__head p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.7; }
.menu-offers__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.offer-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.offer-card--main { border-color: color-mix(in srgb, var(--salmon) 34%, var(--line)); }
.offer-card__media { position: relative; aspect-ratio: 1.5; overflow: hidden; background: var(--ground); }
.offer-card__media img { width: 100%; height: 100%; object-fit: cover; }
.offer-card__state { position: absolute; left: 14px; top: 14px; z-index: 1; padding: 7px 13px; border-radius: 999px; background: rgba(20,13,10,.82); color: #f7ece3; font-size: .64rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(6px); }
.offer-card__state[data-state="today"] { background: color-mix(in srgb, #1f7a4d 88%, transparent); }
.offer-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: clamp(22px, 2.4vw, 28px); }
.offer-card__eyebrow { color: var(--salmon); font-size: .62rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.offer-card h3 { margin: 10px 0 0; font-family: var(--serif); font-size: 1.7rem; font-weight: 500; }
.offer-card__when { margin: 8px 0 0; color: var(--sand); font-size: .74rem; font-weight: 800; letter-spacing: .04em; }
.offer-card p { margin: 12px 0 0; color: var(--ink-soft); font-size: .85rem; line-height: 1.65; }
.offer-card__pending { margin-top: 12px; padding: 9px 12px; border-left: 2px solid var(--line-strong); color: var(--ink-soft); font-size: .74rem; line-height: 1.55; }
.offer-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 22px; }
.offer-card .button { flex: 1 1 auto; }

@media (max-width: 1000px) { .menu-offers__grid { grid-template-columns: 1fr 1fr; } .offer-card--main { grid-column: 1 / -1; } }
@media (max-width: 680px) { .menu-offers__grid { grid-template-columns: 1fr; } .offer-card--main { grid-column: auto; } }

/* =====================================================================
   16. RESERVATIONS
   Public booking request form (/reservas/, /en/reservations/).
   Behaviour lives in assets/scripts/reservations.js. The form only appears
   when an API base is configured; otherwise the page shows the phone panel.
   ===================================================================== */

.booking { padding-top: 20px; }
.booking__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: clamp(28px, 4vw, 56px); align-items: start; }

/* --- offline / call panel --------------------------------------------- */
.booking-call { padding: clamp(28px, 4vw, 44px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.booking-call h2 { margin: 0 0 12px; font-family: var(--serif); font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 500; line-height: 1.05; }
.booking-call p { margin: 0 0 22px; color: var(--ink-soft); }
.booking-call__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- the form --------------------------------------------------------- */
.booking-form { display: grid; gap: 14px; }
.booking-step { padding: clamp(22px, 2.6vw, 30px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.booking-step[hidden] { display: none; }
.booking-step > legend, .booking-step__title { display: flex; align-items: baseline; gap: 10px; padding: 0; margin-bottom: 6px; font-family: var(--serif); font-size: 1.4rem; font-weight: 600; color: var(--ink); }
.booking-step__num { color: var(--salmon); font-size: .68rem; font-weight: 900; letter-spacing: .14em; font-family: var(--sans); }
.booking-step__hint { margin: 0 0 18px; color: var(--ink-soft); font-size: .82rem; line-height: 1.6; }
.booking-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.booking-field { display: grid; gap: 7px; min-width: 0; }
.booking-field--wide { grid-column: 1 / -1; }
.booking-field > label, .booking-legend { color: var(--ink); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.booking-field__note { color: var(--ink-soft); font-size: .72rem; line-height: 1.5; }
.booking-field input[type="date"], .booking-field input[type="text"], .booking-field input[type="tel"], .booking-field input[type="number"], .booking-field select, .booking-field textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: .88rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.booking-field textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.booking-field input:focus-visible, .booking-field select:focus-visible, .booking-field textarea:focus-visible { outline: 0; border-color: var(--sand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sand) 16%, transparent); }
.booking-field[data-invalid="true"] input, .booking-field[data-invalid="true"] select, .booking-field[data-invalid="true"] textarea { border-color: var(--salmon); }
.booking-error { color: var(--salmon); font-size: .74rem; font-weight: 700; line-height: 1.5; }
.booking-error[hidden] { display: none; }

/* --- option grids (times, areas, experiences) -------------------------- */
.booking-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.booking-option { position: relative; }
.booking-option input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.booking-option span {
  display: block; min-height: 44px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--ink-soft); font-size: .82rem; font-weight: 750; white-space: nowrap;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.booking-option input:hover + span { border-color: var(--line-strong); color: var(--ink); }
.booking-option input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--salmon) 58%, transparent); outline-offset: 3px; }
.booking-option input:checked + span { border-color: color-mix(in srgb, var(--salmon) 48%, var(--line)); background: color-mix(in srgb, var(--salmon) 6%, var(--surface)); color: var(--salmon); }
.booking-option input:disabled + span { opacity: .42; cursor: not-allowed; }
.booking-option--stack span { display: grid; gap: 2px; white-space: normal; border-radius: 14px; text-align: left; }
.booking-option--stack b { font-size: .88rem; font-weight: 800; }
.booking-option--stack small { color: var(--ink-soft); font-size: .72rem; font-weight: 600; }
.booking-option input:checked + span small { color: inherit; opacity: .85; }

/* --- consent ---------------------------------------------------------- */
.booking-consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.booking-consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--salmon); }
.booking-consent label { color: var(--ink-soft); font-size: .82rem; line-height: 1.6; }

/* --- summary aside ---------------------------------------------------- */
.booking-aside { position: sticky; top: 96px; display: grid; gap: 14px; }
.booking-summary { padding: clamp(22px, 2.6vw, 30px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.booking-summary h2 { margin: 0 0 4px; font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.booking-summary > p { margin: 0 0 18px; color: var(--ink-soft); font-size: .8rem; line-height: 1.6; }
.booking-summary dl { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.booking-summary div { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.booking-summary dt { color: var(--ink-soft); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.booking-summary dd { margin: 0; color: var(--ink); font-size: .86rem; overflow-wrap: break-word; }
.booking-summary dd:empty::before { content: "—"; color: var(--ink-soft); }
.booking-submit { width: 100%; margin-top: 22px; }
.booking-submit[disabled] { opacity: .5; cursor: not-allowed; }
.booking-note { margin: 14px 0 0; color: var(--ink-soft); font-size: .74rem; line-height: 1.6; }

/* --- pending confirmation panel --------------------------------------- */
.booking-result { padding: clamp(28px, 4vw, 46px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.booking-result[hidden] { display: none; }
.booking-result__state { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; border-radius: 999px; background: color-mix(in srgb, var(--sand) 16%, var(--surface)); color: var(--ink); font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.booking-result__state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sand); }
.booking-result h2 { margin: 18px 0 10px; font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 500; line-height: 1.05; }
.booking-result > p { margin: 0 0 8px; color: var(--ink-soft); }
.booking-result__ref { display: inline-block; margin: 18px 0 22px; padding: 12px 20px; border: 1px dashed var(--line-strong); border-radius: 12px; font-family: var(--serif); font-size: 1.5rem; letter-spacing: .12em; }
.booking-result dl { display: grid; gap: 0; margin: 0 0 26px; border-top: 1px solid var(--line); }
.booking-result div { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.booking-result dt { color: var(--ink-soft); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.booking-result dd { margin: 0; color: var(--ink); font-size: .88rem; }

@media (max-width: 1100px) {
  .booking__grid { grid-template-columns: 1fr; }
  .booking-aside { position: static; }
}
@media (max-width: 680px) {
  .booking-fields { grid-template-columns: 1fr; }
  .booking-summary div, .booking-result div { grid-template-columns: 1fr; gap: 3px; }
}

.cat-picker { position: relative; }
.cat-picker__trigger {
  width: 100%; min-width: 0; height: 50px;
  display: flex; align-items: center; gap: 12px; padding: 0 18px 0 17px;
  border: 1px solid var(--line); border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 98%, var(--sand) 2%), var(--surface));
  color: var(--ink-soft); font-family: var(--sans); font-size: .76rem; font-weight: 800;
  box-shadow: 0 8px 26px rgba(19, 12, 8, .045); cursor: pointer; text-align: left;
  transition: border-color var(--transition), box-shadow var(--transition), color var(--transition), background var(--transition);
}
.cat-picker__trigger:hover { border-color: color-mix(in srgb, var(--sand) 60%, var(--line)); color: var(--ink); }
.cat-picker__trigger[aria-expanded="true"] {
  border-color: var(--sand); color: var(--ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sand) 15%, transparent), 0 12px 32px rgba(19, 12, 8, .07);
}
.cat-picker__lines { flex: 0 0 auto; width: 17px; height: 14px; color: var(--sand); transition: color var(--transition);
  background: linear-gradient(currentColor 0 0) 0 1px / 17px 1.5px no-repeat,
    linear-gradient(currentColor 0 0) 0 6px / 12px 1.5px no-repeat,
    linear-gradient(currentColor 0 0) 0 11px / 15px 1.5px no-repeat; }
.cat-picker__value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-picker__chevron { flex: 0 0 auto; width: 8px; height: 8px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--transition); }
.cat-picker__trigger[aria-expanded="true"] .cat-picker__chevron { transform: translateY(2px) rotate(225deg); }
.category-select.has-value .cat-picker__lines { color: var(--salmon); }
.category-select.has-value .cat-picker__trigger { border-color: color-mix(in srgb, var(--salmon) 30%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--salmon) 5%, var(--surface)), var(--surface)); color: var(--ink); }

.cat-picker__panel {
  position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; min-width: 100%; width: max-content; max-width: min(340px, calc(100vw - 32px));
  padding: 7px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); box-shadow: var(--shadow-md);
  transform-origin: top right; animation: cat-pop .16s cubic-bezier(.2, .7, .2, 1);
}
.cat-picker__panel[hidden] { display: none; }
@keyframes cat-pop { from { opacity: 0; transform: translateY(-7px) scale(.985); } }
.cat-picker__list { max-height: min(50vh, 430px); margin: 0; padding: 0; overflow-y: auto; list-style: none; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent; }
.cat-picker__list::-webkit-scrollbar { width: 8px; }
.cat-picker__list::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: color-mix(in srgb, var(--ink) 22%, transparent); background-clip: content-box; }
.cat-picker__option {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px;
  border-radius: 13px; color: var(--ink-soft); font-size: .78rem; font-weight: 750; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.cat-picker__option > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-picker__count { flex: 0 0 auto; color: var(--ink-soft); font-size: .66rem; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .75; }
.cat-picker__option.is-active { background: color-mix(in srgb, var(--sand) 12%, var(--surface)); color: var(--ink); }
.cat-picker__option[aria-selected="true"] { background: color-mix(in srgb, var(--salmon) 6%, var(--surface)); color: var(--salmon); }
.cat-picker__option[aria-selected="true"] .cat-picker__count { color: var(--salmon); opacity: .8; }
.cat-picker__option[aria-selected="true"]::after { content: ""; flex: 0 0 auto; width: 11px; height: 6px; border-left: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(-45deg) translate(1px, -2px); }
.cat-picker__sep { height: 1px; margin: 6px 10px; background: var(--line); }

@media (max-width: 900px) {
  .cat-picker__panel { left: 0; right: 0; width: auto; max-width: none; transform-origin: top center; }
  .cat-picker__option { min-height: 46px; font-size: .84rem; }
  .cat-picker__list { max-height: min(58vh, 460px); }
}
@media (prefers-reduced-motion: reduce) {
  .cat-picker__panel { animation: none; }
}

.menu-list-category { scroll-margin-top: 176px; }

@media screen and (max-width: 1100px) {
  .mobile-menu__panel { width: min(500px, 94vw); }
  .category-select { width: 100%; }
  .category-select select { font-size: .8rem; }
}

@media screen and (max-width: 680px) {
  .mobile-menu__panel {
    width: 100%;
    max-width: none;
    padding:
      max(18px, env(safe-area-inset-top))
      max(18px, calc(18px + env(safe-area-inset-right)))
      max(18px, env(safe-area-inset-bottom))
      max(18px, calc(18px + env(safe-area-inset-left)));
    border-left: 0;
  }
  .mobile-menu__top { padding-bottom: 14px; }
  .mobile-menu nav { margin-top: clamp(20px, 4.5vh, 38px); gap: 5px; }
  .mobile-menu .nav-link {
    min-height: 56px;
    grid-template-columns: 30px minmax(0, 1fr) 16px;
    padding: 8px 12px;
    border-radius: 16px;
    font-size: clamp(1.55rem, 8vw, 2.3rem);
  }
  .mobile-menu__footer {
    margin-top: max(20px, 4vh);
    padding: 14px;
  }

  .category-select select {
    height: 50px;
    padding-left: 46px;
    border-radius: 16px;
    font-size: 16px;
  }
  .category-select::before { left: 16px; }
  .category-select::after { right: 18px; }
  .menu-list-category { scroll-margin-top: 18px; }
}

@media screen and (max-width: 380px) {
  .mobile-menu__top .brand__type { display: grid !important; }
  .mobile-menu__top .brand__mark { width: 35px; height: 35px; }
  .mobile-menu__top .icon-button { width: 44px; min-width: 44px; height: 44px; }
  .mobile-menu .nav-link {
    min-height: 50px;
    font-size: clamp(1.42rem, 7.6vw, 1.9rem);
  }
  .mobile-menu__footer {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .mobile-menu__footer a { width: 100%; }
}

@media screen and (max-width: 1100px) and (orientation: landscape) and (max-height: 540px) {
  .mobile-menu__panel {
    width: min(760px, 100%);
    padding:
      max(14px, env(safe-area-inset-top))
      max(22px, calc(22px + env(safe-area-inset-right)))
      max(14px, env(safe-area-inset-bottom))
      22px;
  }
  .mobile-menu__top { padding-bottom: 10px; }
  .mobile-menu__top .brand__mark { width: 34px; height: 34px; }
  .mobile-menu__top .icon-button { width: 42px; min-width: 42px; height: 42px; }
  .mobile-menu nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
    margin-top: 12px;
  }
  .mobile-menu .nav-link {
    min-height: 48px;
    grid-template-columns: 28px minmax(0, 1fr) 14px;
    padding: 5px 10px;
    border-radius: 14px;
    font-size: clamp(1.25rem, 3.2vw, 1.65rem);
  }
  .mobile-menu__footer {
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 12px;
    padding: 10px 12px;
  }
}

/* -------------------------------------------------------------------------
   18. MANAGE PAGE

   A página privada da reserva, /r/<token>. Reutiliza .booking-call para os
   estados sem reserva (API desligada, ligação inválida) porque é exatamente o
   mesmo padrão visual da página de reservas: um painel com o telefone.

   O cartão é sóbrio de propósito. Quem chega aqui vem de um SMS e quer saber
   três coisas — quando, quantos, e se pode cancelar. Tudo o resto é ruído.
   ------------------------------------------------------------------------- */

.manage__inner { max-width: 720px; }

.manage-loading {
  color: var(--ink-soft);
  padding: 32px 0;
}

.manage-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
}

/* O estado é a primeira coisa a ler, antes de qualquer detalhe. */
.manage-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  background: var(--bg);
}

/* Confirmada e cancelada não se podem distinguir só pela cor: quem não a
   distingue lê o próprio texto do rótulo, que já diz o estado por extenso. */
.manage-badge[data-status="confirmed"],
.manage-badge[data-status="seated"],
.manage-badge[data-status="completed"] {
  color: var(--panel-btn-bg);
  border-color: var(--salmon);
  background: color-mix(in srgb, var(--salmon) 12%, var(--bg));
}

.manage-badge[data-status="pending"],
.manage-badge[data-status="alternative_proposed"] {
  color: var(--sand);
  border-color: var(--sand);
  background: color-mix(in srgb, var(--sand) 10%, var(--bg));
}

.manage-card__note {
  margin: 14px 0 24px;
  color: var(--ink-soft);
  max-width: 52ch;
}

.manage-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px 24px;
  margin: 0;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.manage-facts dt {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

.manage-facts dd {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}

/* A referência é lida ao telefone: monoespaçada evita confundir caracteres. */
.manage-facts code {
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-size: 0.95em;
  letter-spacing: 0.04em;
}

.manage-proposal {
  margin-top: 24px;
  padding: 22px;
  border-radius: 14px;
  border: 1px solid var(--sand);
  background: color-mix(in srgb, var(--sand) 8%, var(--bg));
}

.manage-proposal h2 {
  font-size: 1.15rem;
  margin: 0 0 10px;
}

.manage-proposal__expiry {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 8px 0 0;
}

.manage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.manage-confirm {
  margin-top: 22px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
}

.manage-confirm p { margin: 0; max-width: 52ch; }

/* Cancelar é irreversível, por isso o botão não se parece com os outros.
   Não é só a cor: leva contorno cheio, para continuar a destacar-se de um
   .button--ghost em modo de alto contraste ou para quem não distingue cores. */
.button--danger {
  border-color: var(--salmon);
  background: var(--salmon);
  color: #fff;
}

.button--danger:hover,
.button--danger:focus-visible {
  background: var(--salmon-glow);
  border-color: var(--salmon-glow);
}

/* Enquanto um pedido corre, os botões ficam inertes; sem isto a página parece
   morta durante o segundo em que a rede responde. */
.manage[data-busy="true"] .manage-actions { opacity: 0.55; }

@media (max-width: 640px) {
  .manage-card { padding: 20px; }
  .manage-actions .button { flex: 1 1 100%; justify-content: center; }
}